【第3回】スマホ向けアプリ開発における　ハイブリッドアプリの利点

テクノロジー

コラム

2012.5.21 MON

　短期集中連載　
「アメーバピグ」スマホ版アプリの開発者が考える
これからのWebディベロッパーに知ってほしい
スマートフォン・アプリ開発の実践テクニック



解説：原一成（株式会社サイバーエージェント）

【第3回】
スマホ向けアプリ開発における　ハイブリッドアプリの利点

スマートフォンアプリを作るには、ネイティブアプリにする方法とウェブアプリにする方法があります。それぞれのメリット・デメリットを踏まえ、どういったときにどちらで作成すれば良いのか、また実際に「ピグトーク」で選択した方法について解説します。

【今回のPoint】
・信頼・日常使いはネイティブアプリ、拡散・変化はウェブアプリ
・「ピグトーク」ではいいとこどりのハイブリッド型（ネイティブ＋ウェブ）を選択
・ネイティブ言語とJavaScriptで連携。ただし連携しすぎないのがポイント

ネイティブアプリとウェブアプリそれぞれの特徴は

スマートフォン用にアプリを作り、公開するにはネイティブアプリとする方法とウェブアプリとする方法があります。ネイティブアプリはObjective-C、Javaなどで書かれ、コンパイルされた後、それぞれのOS上で動作します。ウェブアプリはHTMLやCSS、JavaScriptといった言語で作られ、主にブラウザ内で動作します。

ネイティブアプリとウェブアプリには、それぞれメリットとデメリットがあります。ネイティブアプリはデバイス（例えばスマホに搭載されているカメラ機能など）にアクセスすることができ、高速に動作させることが可能です。また公式ストアに公開することでより多くの集客を期待することもできます。ただし、それぞれのネイティブ環境にあわせて作り直す必要があること、毎回インストール作業する手間があること、公式のストアによる審査があり、やや変更に手間がかかるといったデメリットがあります。

これに対して、ウェブアプリはブラウザで動作するためプラットフォームは問いません。また、インストール作業も発生しないため、比較的手軽に開発することが可能です。ただし、デバイスへのアクセスが制限され、ネイティブ環境に比べ動作が遅めというデメリットがあります。また、公式ストアも現時点では存在していないため、集客面で難しい面もあります。

公式ストアでの集客性、信頼感を持ち、同時に高速でスムーズに動作するネイティブアプリは、天気、SNSなど日常的に使うものに向いています。対して、ソーシャルメディアで拡散するなどして、すばやく多くの人に見てもらいたい広告や、運用など更新頻度を増やし日々変化を加えたいゲームなどにはウェブアプリが向いているというのが、現時点での筆者の考えです。しかし、どちらにも一長一短があり、どう作ればいいのか、なかなか答えが見つからないというのが実情です。

ネイティブアプリとウェブアプリの特徴をあげてみました。それぞれに一長一短の特徴があるため、作りたいもの、運営方針、課金戦略に応じて選択する必要があります

先日行われた「テックヒルズ #2」の様子です。「Facebookやtwitterの利用はネイティブですか？ウェブですか？」と尋ねたところ、ほぼ全員がネイティブアプリからの利用でした。日常的に使うものにはネイティブアプリが向いていると実感しました

「ピグトーク」ではいいとこ取りのハイブリッド型を選択

自分のアバターを表示し、友達とおしゃべりする「ピグトーク」では、ネイティブアプリ、ウェブアプリそれぞれのいいところを組み合わせた“ハイブリッド型”を選択しました。

ハイブリッド型とはネイティブアプリの中にWebViewと呼ばれる簡易ブラウザのようなものを表示し、その中でウェブコンテンツを表示する作り方のことを指します。適切に役割を分担することで、双方のいいところを合わせたアプリに仕上げることができます。

まず、公式ストアで配信することによる集客性・信頼度・愛着感には大きなメリットがあると考え、ネイティブアプリとして配信することにしました。同時に、ネイティブアプリとして配信するからには「スムーズに動くこと」が重要であり、軽い操作感を必要とする箇所はネイティブ言語で処理することにしました。

次に、自分のお部屋（図1、2、3）ではWebViewに背景とアバターを表示し、バーやボタンなどの表示・領域の固定、ページ遷移時のトランジッションなどはネイティブ技術で表示することにしました。おしゃべり機能（図4）では、エディタ、固定配置、頻繁なスクロール処理をネイティブが担当し、ウェブの苦手なところを補っています。こうすることで、それぞれの特徴を活かし、開発効率もあげながら、快適な操作感を実現することができました。

【図1】自分のお部屋の背景とアバターはWebViewで表示しています。webkitベースのブラウザであれば、このまま表示することができます

【図2】ネイティブで表示しているパーツです。これらのパーツを、図1のWebViewの上に被せるように表示すれば完成です。固定表示の部分はネイティブにすることで端末の差異を吸収することもできます

【図3】ページ遷移時のトランジッションはネイティブで処理することで、よりスムーズに表示することができます

【図4】おしゃべり機能では、全身のアバターの箇所のみWebViewで表示し、それ以外はネイティブで表示しています。ネイティブがスクロール位置から表示するアバターを取得し、JavaScriptに指示を出すことで表示しています。こうすることで位置の固定や、スクロールによる処理をスムーズにしています
※画像をクリックすると拡大します

処理はネイティブ、表示はウェブ。それぞれの役割を明確に

ハイブリッド型のアプリを作る上で大事なことは、それぞれの役割を明確にしておくことです。あまりにも双方を行き来するような作りにしてしまうと、それぞれの独立性が薄れ、開発段階だけでなく変更や修正も大変になってしまいます。

「ピグトーク」では処理をネイティブ、ウェブは表示に専念することで役割を明確にしています。実際にはアプリを起動し、サーバに必要なデータを問い合わせ、受け取り、処理をし、JavaScriptに渡すところまでがネイティブで、受け取ったデータを表示するのがウェブの役割となっています。また、最近ではブラウザ単体での閲覧も増えてきており、表示処理の部分をウェブの技術でつくっておくことで、できるだけ早くブラウザに展開できるというメリットもあります。