ハイブリッドアプリをなるべく高速化するために(1)


ハイブリッドアプリならではの問題

Monacaで制作できるHTML5ハイブリッドアプリは、HTML5で組まれている以上、ネイティブに比べるとややもっさりしてしまうのは否めません。

しかしWebサイト・Webアプリでももっさりしてしまうのは同じこと。
これをなるべく高速化するためには、今までどおりのHTMLだけではダメ。

麻雀点数計算アプリsuzumeではWebサイト制作のノウハウを活用し、(ネイティブほどのヌルヌルとは言わないまでも)サクサクの反応を実現しています。

Web制作してる方なら「んなこたー知っとる」という小技もあると思いますが、suzumeで実際に使っている小技と使っていない小技も紹介していきます。

1. cssやjsをそれぞれ1ファイルにまとめてリクエスト回数を軽減

していません。

Webサイトでは、cssやjsファイルを何ファイルも取得するために、サーバと何往復も通信します。
そのためソースの量は同じでも、呼び出すファイル数が増えれば増えるほど、すべてのソースを読み込むまでに時間がかかってしまいます。
そこで、HTTPリクエストを減らすためにファイルを1つにまとめちゃおう!という小技があります。

suzumeはサーバ通信を必要としていません。
(・・・広告をタップしてもらうとき以外(∀`*ゞ)テヘ)

アプリ内に各種ファイルが同梱されているため、HTTP通信の時間が存在しません。もしかしたら大量のファイルを用意したら重くなるのかもしれませんが、実際にアプリを触ってもらうとわかるとおり、計算するときもロード時間は体感でほぼゼロになっていますので、関係ありませんね。

2. cssやjsをminifyしてファイルサイズを軽減

していません。

cssやjsのソースに含まれる「スペース」や「改行」は、それ自体もデータなので、これらを削除することでファイルサイズを小さくできる、という小技です。
当然、ファイルサイズが小さくなればサーバと通信して呼び出すための時間も短くなります。

通信を必要としないアプリですが、「1. cssやjsをそれぞれ1ファイルにまとめてリクエスト回数を軽減」よりも影響があります。
アプリそのもののサイズも軽減できますし、ソースを読んでいく途中に余分なデータがないので、高速化できるかもしれません。
でも、そのために毎回minifyしたファイルをアップロードしなおすのは大変めんどくさいです。
GruntやGlupといったタスクランナーを使って自動化したとしても、めんどくさいです。

だってMonacaだもん。
今まではDreamweaverでWebDAVでつないでGETとかして修正したやつをまとめてPUTなんてできたんだけどさ、

誠に勝手ながらWebDAV機能を段階的に廃止いたします。ローカル環境との同期にはMonaca CLIもしくはLocalkitをご利用ください

じゃあ、Monaca CLIもしくはLocalkitをご利用すればいいじゃない。

・・・有料プラン(しかもGold以上)じゃないとご利用できないって。

月5,000円は、個人で趣味レベルでやってる人にはなかなかしんどいよ。AdobeCCが、個人で趣味レベルでやってる人にはなかなかしんどいのと同じだよ。私はPersonalプランがやっとだよ。

クラウドIDEを使ってるので、IDEで作業してデバッグして完了したらローカルでminify作業やってからアップロードして元のファイルは削除してビルドしてもっかい元のファイルをアップして作業して・・・

/(^o^)\

ちなみに、Webサイトの場合の話ですが、必死にminifyするよりgzip圧縮のほうがよっぽど効率よく軽くできるらしいよ。

3. CSSスプライトで画像を1ファイルにまとめる

しています。

これも「1. cssやjsをそれぞれ1ファイルにまとめてリクエスト回数を軽減」と同じ理由で、ファイル数を減らしたらリクエスト回数が減るっていうやつです。
しかも、最初にスプライト画像を一度読み込んでキャッシュさせておけば、同じ画像を使っているところは何度もリクエストする必要がないんですね。

まてよ、じゃあ、通信しないアプリなら別に必要ないんじゃないの?と思うところですが、わざわざ雀牌の画像を1個ずつ保存してファイル名つけて・・・ってこれまためんどいです。
軽量化というより作業がしやすいのと、CSSスプライトで:after要素とかの背景に指定することで、html側に毎度img要素を記述する必要もないのでソースがきれい、管理が楽ちん、という理由です。