kazu22002の技術覚書

技術屋として日々の内容を記録しているサイト。PHPやcordovaをやっています。

cordovaの動作はモバイルに最適化しているのか?

f:id:kazu22002:20150201234547j:plain

以前の記事でcordovaのイベントリスナーを指定したらその後も残ってしまった件から考察です。

モバイルに最適化されているかどうかという点は、読み込みに関してどうなっているのか。という点です。

jQueryMobileからモバイル対応についてを考える

jQueryMobileを触ったことがあるのですが、モバイル用に書き方に工夫がされています。

ページ遷移する際に、新しく読み込むのではなく、ひとつのHTMLに全部のページ内容を記述してアンカーでの表示切り替えを行っています。

見た目は遷移をしているようなエフェクトをつけることで、ページ遷移しているように見せていますが、実は一度の読み込みで使用できるように工夫されています。

これにより何度もヘッダーや読み込みが必要なファイルを読み込まなくなり、通信量を減らすことができています。

HTMLの内容自体は文字列ですので、そこまで大きくないのでこの工夫は感心しました。

ただかなりページ自体が見づらくなったり、大規模開発やPHPなどの動的な開発に向いてないから個人的に実用までやりませんでした。

(プロジェクトで使ったことはあるけど、あまりjQueryMobileの特性はいかせなかった。。。)

PHPとかでできないわけではないので、設定しだいですね。

ちょっと癖がありましたが、モバイルへの対応として考えさせられる部分があったのは良かったです。

なぜ読み込みに工夫が必要なのか

WEBを見るには通信が必要になります。ほぼ必須ですよね。

携帯端末でWEBページを見る際には、やはり通信環境が重要な要素になってくると思います。

WEBページを読み込むまでに待てる時間は約2秒だと言われています。

ページ表示2秒でユーザーはイライラし始め、3分の1が「もういいや」となる | 編集長ブログ―安田英久 | Web担当者Forum

通信環境によりますが、なかなかモバイル端末で2秒って厳しいと思います。

2秒以上かかるとページから離れる人が多くなるんでしょうね。

業務アプリとなると、仕事の効率ですから遅いのは困ったもんです。

ページ読み込みにかかるものは、JSや画像ファイル、動画とかですかね。

このあたりの工夫はいろいろあったりします。

画像読み込みの工夫

画像ファイルでいえば、遅延ロードを入れる。

Lazy Load Plugin for jQuery

画像の読み込み自体は先に小さい画像にしておいて、表示領域に入った際に読み込みを行う。

これによりページ自体は表示されているので、記事自体は見れる形になります。

大きい画像がある際にはあると入れるといいですね。

ほかにはキャッシュ機能ですかね。HTML5のマニュフェストファイルでのキャッシュ機能ですかね。

これはいろいろキャッシュできるので、試したいですね。

アプリケーション キャッシュ初心者ガイド - HTML5 Rocks

JavaScriptファイルのロード

Javascriptの読み込み位置によって変わるみたいですね

[JS] JavaScriptの読み込み位置をページ最後にしたほうがよい理由 | memocarilog

これを意識してやったことはないですが、こういう効果もあるんですね。

検討します。

cordovaはモバイルに最適化されているかどうか

やっと本題を考えます。

モバイルに最適されているかどうかについてですが、実際の動作からの検討です。

結論としては、設定したイベントがHTML側で残る機能はない。と思う。

設定したイベントが残っていることから、Java層に対してのイベントが残っている可能性はあると思う。
(これが困っている部分ですけどね)

HTMLに関しては引き継いでいる感じはないかな。HTMLのIDも普通に使えてるので。

cordovaActivityを読んだが、普通のWebViewを呼び出しているだけだったし。

カスタマイズはある程度やっているみたいですが、そこまでの機能はないかな。

読み込み周りでの最適化はないっぽいので、それぞれの実装しだいです。

まぁ、そうですよね。

cordovaはHTMLでnative機能を呼び出せるのが魅力

cordova自体の魅力はHTMLとJavaScriptでnative機能呼び出しができる。

ここですよね。HTMLとJSがかければアプリが作れる。

プラグインが端末の動作を吸収してくれるので、ほぼ同じソースでかけるはず。
(現実はかなりカスタマイズしてたりしますが。。。)

ここまで書いておいてなんですが、関係ないところが終着点だったりします。

書いている最中に結構考察し直したりしてます。

アプリとしては内部のHTMLで作れるので、通信が要らないアプリは全然作れるので、あまり最適化されている必要はなかったりしますね。

cordovaについての感想ですが、cordovaActivityを読んでいて、かなり非推奨が多くなったと思います。

プラグインでやりなさい。というのが風潮なんですかね。

ちょっと時間があればプラグイン作成に手を出してみたいですね。

Cordova Plugin Registry

というわけで、ぜひアプリ作りをやって見て下さい。

以上です。