【第4回】　スマホ向けアプリ「ピグトーク」開発時のTips、苦労した点

テクノロジー

コラム

2012.5.28 MON

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



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

【第4回】
スマホ向けアプリ「ピグトーク」開発時のTips、苦労した点

最終回となる今回はウェブアプリにおける読み込み時間の改善、ローカルキャッシュの使用、また「ピグトーク」開発中に苦労したネイティブ、ウェブ間の連携に焦点を当ててお伝えしたいと思います。

【今回のPoint】
・読み込み時間を短縮するにはローカルキャッシュをうまく使う
・アプリケーションキャッシュでネイティブアプリのように読み込みできる
・ネイティブとウェブの間をつなぐ部分は特に入念に打ち合わせをする

ローカルキャッシュを使って読み込み時間を削減

ウェブアプリはネイティブアプリに比べ、読み込みに時間がかかるという印象があります。たしかに、インストール時にある程度のデータを読み込んでしまうネイティブアプリに対して、その都度ダウンロードするウェブアプリではより通信環境に左右されるといった点があります。

しかし、HTML5で追加されたローカルキャッシュ系の機能を使うことでその問題をいくらか解決することができます。

追加されたローカルキャッシュ系の機能にはCookieに似たlocalStorageやsesstionStorage、指定したファイルをキャッシュできるオフラインアプリケーションキャッシュ、ローカルデータベースとして利用できるWebSQL、Indexed DBなどがあります。「ピグトーク」ではどのようにローカルキャッシュを使用したか、説明していきたいと思います。

図はネイティブアプリとウェブアプリのサーバ通信を表しています。ネイティブアプリが初期インストール時に多くのファイルを一括してダウンロードするのに対し、ウェブアプリではある程度のブラウザキャッシュがあるものの、その都度サーバに取得しにいきます

表はローカルキャッシュの機能別おすすめ度です。使いやすさではlocalStorage、sessionStorageが圧倒的におすすめです。JavaScriptと相性がよさそうなIndexedDBにも期待しています

アプリケーションキャッシュでネイティブのような速さを実現

第2回、第3回目でお伝えしたように、ピグの表示にはウェブの技術を使い、WebView内で表示させています。その際に問題となったのが読み込み時間です。

表示に使うHTML、CSS、JavaScript、画像データ、アクション用データを毎回読み込むと数秒かかってしまいました。必要な部分だけその都度読みこむようにしたとしても、選択してから動作するまで読み込み時間がかかり、決して快適なものとは言えません。

そこで、前述のオフラインアプリケーションキャッシュという機能を使ってみました。マニフェストファイルに記述したデータを初回読み込み時に端末に保存しておき、2回目以降はマニフェストファイルに変更がなければ読み込みしないという機能です。適用することで、データ取得時間を削減でき、キャッシュファイルのコントロールをすることができます。

ただし、使用する際には注意点がいくつかあります。失敗するといつまでたってもデータを更新することができないという落とし穴にはまり、端末によっては初期化せざるをえない状況になります。実際に試したことがある方なら一度は経験したのではないでしょうか。まず大事なことはマニフェストファイル自体をキャッシュさせないということです。キャッシュさせてしまうと変更が反映されず、ファイルを更新することができません。続いてJavaScriptできちんと制御することです。それにはイベントの仕組みを理解する必要があります。また、データが更新されたときは最新の表示にならず、意図的に更新してあげる必要があります。

その他にも、読み込み時間を短縮するためにはlocalStorageを使って端末に保存させることもできます。また、内容によってはファイルをウェブサーバーに置かず、アプリに組み込み一緒に配布するという方法も使えるでしょう。HTML5時代では、ローカルキャッシュをうまく使って読み込み時間を短縮することが大切です。

アプリケーションキャッシュ初回の流れ。マニフェストファイル（pigg.appcache）に指定したファイルをダウンロードし、キャッシュします。必要なファイルを指定しておくことでネイティブアプリのように次回以降の読み込みが必要なくなり、表示が速くなります

2回目以降のアプリケーションキャッシュは、マニフェストファイルに変更があった場合のみデータをダウンロードしにいきます。この際、すべてのデータをもう一度ダウンロードしにいくので、あまり更新しすぎると毎回読み込み時間が多くかかってしまいます

アプリケーションキャッシュを利用する際の注意点です。特に、マニフェストファイル自体をキャッシュしてしまうと機能しなくなってしまいます。少し癖があるので、はじめは失敗することが多く、実践しながら徐々に覚えていきましょう

CSS拡張メタ言語で開発効率をアップ！

ここ最近、SassやLESSなどのCSS拡張メタ言語を使って開発しています。CSS拡張メタ言語とはCSSにはない変数、ミックスイン、入れ子、四則演算、分岐、関数などの機能を追加するものです。CSS拡張メタ言語で書かれたものを通常のCSSに変換することで利用することができます（Sassによる記述を通常のCSSに変換するためのコンパイラはRuby、LESSはJavaScriptで実装されています）。

以前は短縮したりインデントで表現することがなんとなく面倒で、綺麗でないと感じたため苦手意識を感じていましたが、コード量が少なくなることによる見通しのよさや、開発時間の短縮を実感してから考えが変わり、進んでSassなどを使って開発するようになりました。最近はnode.js環境で開発することも増え、Stylusをおもに使用しています。

Stylusのサンプルです。インクルードや変数、ミックスインなどを使うことにより効率的に開発することができます（※画像をクリックすると拡大します）

通常、CSS拡張メタ言語をCSSに変換する際にはRubyやnode.jsなどをインストールしなくてはなりませんが、なかなか敷居が高いものです。最近では「CodeKit.app（Mac専用）」のようにデスクトップアプリで簡単に変換できるものも登場してきました

ハイブリッドアプリはネイティブとウェブの連携に注意！

第3回目で、ハイブリッド型のアプリにすることで開発効率がアップしたとお伝えしました。確かに、役割を明確に分担することで効率が向上し、クオリティを上げることができます。しかしその反面、連携の難しさを感じることもありました。

iOS、Android、ウェブのすべての開発に精通していれば一貫して開発できスムーズですが、そのような人はあまり実在しないのが実情です。基本的にはiOS開発者、Android開発者、ウェブ開発者がそれぞれの得意分野で連携することになります。お互いの技術や開発環境を完全には理解していないのが前提なので、特にネイティブとウェブの間をつなぐ部分の認識合わせは入念に行う必要がありました。また、ウェブ技術者はiOS、Androidどちらとも連携することになるのでそれぞれの差異に気を使いながら、柔軟に対応する必要があります。

ハイブリッドアプリを作る際にはOS、Android、Web三者で連携します。iOS、Android間では必ずしも連携が必要ではないのに対し、WebはiOS、Androidどちらとも連携を取る必要があります。iOS、Androidで作り方が違う場合もあるので、入念に確認します

特に注意が必要な、ネイティブ、ウェブ間で連携する部分はwikiを使い、きちんと記録に残しておくことで認識違いが起こらないようにしました

以上で短期集中連載「スマートフォン・アプリ開発の実践テクニック」の解説は終了となります。全4回に渡ってご愛読いただき、ありがとうございました。スマートフォン時代は始まったばかりで変化が激しく、新しい考え方やサービスが次々に登場します。「ピグトーク」での開発方法も一例に過ぎず、他にもさまざまな工夫やもっと良い実装があり、今回の一例もすぐに古くなってしまうことでしょう。しかし、こんな面白い時代に開発できてとても幸せなことだと思います。今回の内容がみなさまの開発に少しでも役立つことを願っています。

TOPページに戻る
【第1回】「スマホ向けアプリ「ピグトーク」開発から見た開発プロセスの課題」へ戻る（2012.5.7公開）
【第2回】「スマホ向けアプリ開発におけるアニメーション技術の活用」へ戻る（2012.5.14公開）
【第3回】「スマホ向けアプリ開発におけるハイブリッドアプリの利点」へ戻る（2012.5.21公開）
【第4回】「スマホ向けアプリ「ピグトーク」開発時のTips、苦労した点」へ戻る（2012.5.28公開）