PhoneGap」タグアーカイブ

jQuery Mobile + PhoneGapでアプリ作成に挑戦


jQuery Mobile
PhoneGap

jQuery Mobileはスマートフォン向けWebサイト作成を支援するjQueryのライブラリ、PhoneGapはHTML/CSS/JavaScriptで作ったWebコンテンツをアプリとしてパッケージするためのライブラリです。つまりこれらを組み合わせると「HTML/CSS/JavaScriptでアプリを作成」することができます。この組み合わせは前々から試してみたかったのですが、なかなか手を付けることができず、今回やっつけで作業してみました。

今回はある企業の紹介アプリを想定してみました。PhoneGapは本来、JavaScriptからカメラなど端末ネイティブ機能をたたけるのが売りなのですが、今回はそこまで手が回らないので、本当に全画面Webブラウザとしてだけ使ってます。

まずトップページはこちら。JavaScriptを作りこめば画像をアニメーションで切り替えるなどできそうです。

jqm_app1

会社情報です。HTMLが超やっつけでもそれなりに見えるようになるのがjQuery Mobileのいいところですね。もちろん(内部的にはHTMLなので)もっと凝ったレイアウトも可能でしょう。

jqm_app2

jQuery Mobileのサンプルを参考に地図など入れてみました。サンプルのままなので日本ですらないのはご愛嬌。

jqm_app3

スクリーンショットだけみると悪くないのですが、実際に動かしてみるとスクロールや画面切り替えなどに違和感を感じます。ブラウザに表示されているのならば許容される範囲なのでしょうが、なまじアプリの体をしているので無意識のうちにネイティブアプリと比較してしまう感じです。このあたりの最適化を考えると「HTML/CSS/JavaScriptで簡単にアプリを作れる」とは一筋縄にはいかないようにも思います。

とはいえ、低コストで宣伝系のアプリを作りたい、そのためにある程度の動きの違和感は許容できるという案件ではそれなりにものになりそうな手ごたえも感じました。暇を見てぼちぼちと試していこうかと。