スマホ用JavaScriptフレームワーク5つ
＋1を徹底研究

プログラマ向けの「Sencha Touch」「Wink toolkit」

　ここまでで紹介したjQuery Mobile、iUI、jQTouchは比較的WebデザイナやHTMLコーダーに使いやすいフレームワークです。しかし、下記で紹介するフレームワークはJavaScriptの知識が多少必要となり、その他のフレームワークに比べて、導入するためのハードルが高いので、本稿では軽い紹介にとどめておきます。

■ JavaScriptに精通している人向け「Sencha Touch」

　Sencha Touchは、HTMLはほとんど使わず、JavaScriptでページやパーツなどを構成します。JavaSciptで全て先読みするので、動きはとても滑らかですが、JavaScriptに精通していないと、扱いにくい印象があります。

　前述のjQTouchを開発しているSencha Labsによって配布されています。以前は有料でしたが、今は無料で使用できます。有料であっただけに、とても多くの機能を持ち、機能面・デザイン面ともに優れています。

　JavaScriptだけでページやパーツを構成していくので、WebデザイナやHTMLコーダーにとっては、少し扱いにくいフレームワークかもしれません。

　キッチンシンクデモが公開されているので、一度アクセスしてみることをオススメします。

■ カバーフローやフリップディスクなど3Dコンポも充実の「Wink toolkit」

　Wink toolkitは、他のフレームワークではあまり見かけないようなAPIがとても充実しています。特に3Dコンポーネントのカバーフローやフリップディスク、ページめくりアニメーションなどは、その機能のためだけでも使う価値がありそうです。よく使いそうな2Dコンポーネントも各種そろっています。

　Sencha Touch同様、HTMLを記述するのではなく、JavaScriptを多く記述するため、WebデザイナやHTMLコーダーが扱いにくいタイプのフレームワークなのではないかと感じます。

　こちらも公式プレビューデモページが存在するので、アクセスしてみてください。

スマホWeb開発から一歩先行くハイブリッドアプリ開発

　スマートフォン向けサイトやWebアプリのソースコードをそのまま使って、iOSアプリやAndroidアプリにできる「ハイブリッドアプリ開発」が最近注目を浴びています。

■ ハイブリッドアプリ開発とは

　通常iOS／Androidのネイティブアプリは、言語としてはObjective-CやJava使って開発を行います。しかし実は、HTMLやCSS、JavaScript、そしてFlashなどを使っても、ネイティブアプリの開発は可能です。その開発手法を「ハイブリッドアプリ開発」と呼びます。

■ ハイブリッドアプリ開発の利点

　Webアプリ開発者が今までの技術と知識を使って、アプリ開発をすることが可能です。つまり、学習コストが低くなります。また、ワンソースでiOSとAndroid両対応のアプリを作れるので、工数の削減につながります。

■ ハイブリッドアプリ開発フレームワーク

　では、どのようなフレームワークが存在するのかというと、現在ではHTMLやCSS、JavaScriptを使う「Titanuim Mobile」「PhoneGap」などのフレームワークが注目を浴びています。また、Flashでは、AIR SDKやFlash Pro／Flash Builderを使ってハイブリッドアプリ開発が行えます。

　「Titanuim Mobile」「Flash」については、下記記事を参照していただくとして、PhoneGapについて少し説明を加えます。

HTML＋JavaScriptでiPhone/Androidアプリを作る Web技術でネイティブアプリを作れるTitanium（1）　iPad/iPhone VS Androidに戸惑っているWebデザイナ／開発者のためにオープンソースの開発ツールを紹介します 「Smart ＆ Social」フォーラム 2010/2/18

Flashでできる！ Androidアプリ制作入門 Flash ProやFlash Builderに拡張機能を追加して、Androidで動く簡単なAdobe AIRのアプリを作る方法を紹介します 「Smart ＆ Social」フォーラム

Flashでできる！ iOSアプリ制作入門 Adobe AIRを基にしたFlash ProやFlash BuilderなどのiOSアプリ開発機能を使って、iPhone／iPadで動く簡単なアプリを作る方法を紹介します 「Smart ＆ Social」フォーラム

Dreamweaverとも一緒に使える「PhoneGap」とは

　カナダにあるnitobi社が開発を行っており、現在はバージョンは0.9.5.1ですが、近々1.0がリリースされるようです。MITライセンスに基付き、無料でダウンロードし、使用できます。

　PhoneGapを使うことで、ネイティブのAPIにもアクセスできます。つまり、通常のWebアプリでは不可能なデバイスカメラやGPS機能などを使えるようになります。そして、本項で紹介した各種フレームワークもそのまま使えます。

■ PhoneGapの日本語コミュニティも

　PhoneGapに関しては、今まではあまり情報がありませんでした。しかし最近、PhoneGapの日本語コミュニティ「PhoneGap Fan」も出現しており、さまざまな情報を提供しています。つまずきやすい環境のセットアップ方法、実際のサンプルアプリなどを公開しています。

　今回紹介したjQuery Mobileのチュートリアルも用意しているので、参考にしてみてはいかがでしょうか。

■ jQuery Mobile＋PhoneGapでハイブリッドアプリ開発もできるようになったDreamweaver

　またWebオーサリングツール「Dreamweaver」の最新版CS 5.5では、先ほど紹介したjQuery Mobileの開発用テンプレートが用意されています。さらにPhoneGapを使ったiOS／Androidのネイティブアプリへのビルドもできるようになっているので、スマートフォンサイトの作成からアプリ化まで可能です。

Web開発者もフレームワークでアプリが作れる時代

　今、Webアプリ・ネイティブアプリに限らず、スマートフォンアプリを作ることが特別なことではなくなってきています。今回紹介したJavaScriptフレームワークやツールを使うと、WebデザイナやHTMLコーダーでも、これまでの技術と知識で十分にアプリを作成できます。

　スマートフォン向けWebサイトはもちろんのこと、ぜひネイティブアプリも作ってみてください。今回のサンプルのソースコードは、こちらからまとめてダウンロードできます。

■ ＠IT関連記事

App Store登録もOK! JavaScriptで作るiPhoneアプリ これ、俺ならこう使う（5）　HTML＋JavaScriptでiPhoneアプリをWebアプリ的に開発しつつ、App Storeで販売できてしまう一挙両得のハイブリッド手法でCoCoTwitter作りました 「Smart ＆ Social」フォーラム 2008/11/28

FlashもHTML5/jQueryもスマホアプリに変えるCS5.5 アドビに聞く、ツールの使い分けポイント　Flash Pro/Flash Builder、Dreamweaver、シミュレータ「Device Central」を使ったスマホアプリ開発のポイントを聞いた 「Smart ＆ Social」フォーラム 2011/6/20

1-2-3-4-5

INDEX
jQuery Mobile、iUI、jQTouch、 Sencha Touch、Wink toolkit、PhoneGapとは　 スマホ用JavaScriptフレームワーク5つ＋1を徹底研究
	Page1 スマホ用JavaScriptフレームワークとは スマホ向けWebコーディングに必要な知識 3つのフレームワークで同じ機能を実装して比較
	Page2 スマホ向けWeb開発の定番となりそうな「jQuery Mobile」
	Page3 手軽にiPhoneっぽいデザインを使える「iUI」
	Page4 3種類のテーマが選べるSencha製「jQTouch」
	Page5 プログラマ向けの「Sencha Touch」「Wink toolkit」 スマホWeb開発から一歩先行くハイブリッドアプリ開発 Dreamweaverとも一緒に使える「PhoneGap」とは Web開発者もフレームワークでアプリが作れる時代

Smart＆Social フォーラム トップページへ