モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ

モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。

jQuery Mobile

jQuery Mobile | jQuery Mobile

jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。

「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。

クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作します。タブレットにも対応。

現在はα3版が提供されており、数カ月以内に正式リリースが登場する見通しです。

jQuery Mobile関連リンク

• 吉川徹氏のプレゼンテーション「jQuery Mobile [基礎編]」とサンプル集
• ASCII.jp：jQuery作者が明かす「jQuery Mobile」の魅力
• 【WDE2010】John Resig氏、JavaScriptライブラリ「jQuery Mobile」を紹介 -INTERNET Watch
• 「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる － Publickey

Sencha Touch

Ext Japan - モバイルJavaScript - Ext JS、Ext GWT、Sencha Touch

モバイルアプリケーションをHTML5/CSS/JavaScriptで開発するためのJavaScriptフレームワーク。iOSとAndroidをサポートしています。

JavaScriptライブラリのExt JSがベースになっており、基本的にExt JSの機能を呼び出すJavaScriptプログラミングによって開発を行います。豊富な機能と柔軟なデザインは大きな特徴です。

Sencha Touchはすでにバージョン1.0が提供され、多数のサンプルプログラムと実際に開発されたアプリケーションがあります。また、GPLのオープンソースライセンスで提供されていると同時に商用ライセンスも用意され、サポートも提供されているので、現時点で商用利用を考えたときにもっとも充実した環境を提供してくれるソフトウェアだといえます。

Sencha Touch関連リンク

• Sencha touchのはじめかた - SlideShare
• iPhone等のWebアプリをHTML5で構築する為のフレームワーク・Sencha Touchを触ってみた - かちびと.net

jQTouch

jQTouch — jQuery plugin for mobile web development

jQTouchは、jQueryのプラグインとして利用するJavaScriptライブラリです。jQuery Mobileのように、HTMLを記述して各要素に属性を設定することでモバイルアプリケーションらしい外観と動作を実現することができます。MITライセンスのオープンソースとして公開されています。

1つ前で紹介したSencha Touchは、このjQTouchとSVGライブラリのRaphaëlがExt JSと合流してSencha Inc.として開発したものです。そのため、jQTouchの開発者の多くがSencha Touchの開発者と重なっていると見られています（それを理由に、この先の開発ペースを懸念する声もあります）。

jQTouchのブログにポストされた「jQTouch Roadmap」によると、今後もjQTouchはjQueryベースのMITライセンスを維持すること、そしてスマートフォンのようなスモールスクリーンデバイスにフォーカスし、タブレット以上のスクリーンにも対応するアプリケーションではSencha Touchを利用するように勧めています。

jQTouch関連リンク

• 【ハウツー】jQuery on iPhone - jQTouchを使ったWebアプリ開発 (1) jQTouchとは | エンタープライズ | マイコミジャーナル
• jQTouchの使い方とclass指定による挙動のまとめ - アークウェブシステム開発SandBox
• jQTouchでiPhoneWebアプリ - web探検隊
• Ext JS, Inc.がjQTouchおよびRaphaëlプロジェクトと合流、「Sencha Inc.」に社名変更。非商用プロジェクトをサポートするための「Sencha Labs」を併せて設立 。 | 合同会社イーエクスティ

Titanium Mobile

Titanium Mobile Application Development | Appcelerator

Titanium Mobileは、JavaScriptでiOSもしくはAndroidのネイティブアプリケーションを開発できる開発環境です。以前はHTMLとJavaScriptを組み合わせていましたが、現在のバージョンではJavaScriptによるプログラミングに変わっているようです。

開発元のAppceleratorは今年に入り、EclipseベースのJavaScript統合開発環境を提供していたAptanaの買収を発表しました。近い将来にはIDEも含めた開発環境の提供が期待されます。

Titanium Mobile関連リンク

• Appcelerator Titanium MobileではじめるJavaScriptによるiPhoneアプリケーション開発
• Titanium Mobileで作る！ iPhone／Androidアプリ：第1回　まずはTitaniumを体験してみよう｜gihyo.jp … 技術評論社
• HTML＋JavaScriptでiPhone/Androidアプリを作れるTitanium Mobileとは（1/3） - ＠IT
• 忙しい人のためのTitanium Mobile導入法 - IDEA*IDEA ～ 百式管理人のライフハックブログ

PhoneGap

PhoneGap

PhoneGapは、Webアプリケーションをネイティブアプリケーション化する開発ツールです。HTML5/CSS3/JavaScriptで開発されたWebアプリケーションをラップし、ネイティブアプリケーションとしてiOS、Android、WebOS、Symbian、Blackberryなどへ展開できます。デバイス固有の機能にアクセスすることもでき、ネイティブ化したアプリケーションはAppStoreで販売することも可能です。MITライセンス/BSDライセンスのオープンソースで提供されています。

これまで紹介してきたjQuery MobileやSencha TouchなどのJavaScriptライブラリで開発したWebアプリケーションをPhoneGapでネイティブ化することも可能で、Webアプリケーションの可能性を広げるツールとなりそうです。

PhoneGap関連リンク

• InfoQ: PhoneGapがモバイルプラットフォームにクロスプラットフォーム開発をもたらす
• 【ハウツー】HTML＋CSS＋JavaScriptでiPhone/Androidアプリ開発「PhoneGap」 (1) HTML＋CSS＋ＪavaScriptでiPhone/Androidアプリを開発 - PhoneGapとは | エンタープライズ | マイコミジャーナル
• 【ムービー解説】JavaScriptで iPhoneアプリが作れるすごいソフト『PhoneGap』をインストール！ - h2ospace - builder by ZDNet Japan

mobl

mobl

moblは、モバイルアプリケーションの開発に特化した静的型付けのJavaScriptに似た独自言語です。開発したアプリケーションは自動的にHTML5/CSS/JavaScriptのWebアプリケーションとして出力されます。オープンソースで提供されています。

モバイルアプリケーションに特化した言語により、HTML5のローカルデータベースやオフライン機能などを含むアプリケーションを効率よく簡単に開発が行えるのが特徴。Eclipseによる統合開発環境もサポートしています。

mobl関連リンク

• mobl - model-driven engineering lecture - SlideShare
• これは凄いぞ！スマートフォン向けHTML5生成プログラミング言語「mobl」 | MOONGIFT
• スマートフォン向けHTML5生成プログラミング言語「mobl」使ってみた！ - 悪あがきプログラマー
• NASKIT» Blog Archive » スマートフォン向けHTML5アプリ製作言語mobl

Rohdes、DHTMLX Touch、Cinco

そのほかのライブラリ／フレームワークを紹介します。

• DHTMLX Touch - HTML5 JavaScript Framework for Mobile and Touch Devices

DHTMLX TouchはモバイルアプリケーションのためのJavaScriptライブラリ。iPhone/iPod/iPad/Androidなどメジャーなデバイスのブラウザに対応します。WYSIWYGなユーザーインターフェイスデザイナーも同時に開発されているのが特徴。

• Rhodes

RhodesはRubyベースのモバイルアプリケーション用フレームワーク。iOS/Android/Symbian/Windows Mobile/RIMなどのネイティブアプリケーションを開発することができます。

• MonoTouch

C#と.NETでiPhoneアプリケーションを開発できるツール。.NET Frameworkのオープンソース実装「Mono」をベースとしています。開発元はノベル。

• iUI

iPhoneライクなユーザーインターフェイスを実現するJavaScriptライブラリ。

• gwt-mobile-webkit

JavaScriptプログラミングをせずにWebアプリケーションを構築できるサーバサイドのJavaライブラリ。Webkitに特化している。

• The-M-Project

クライアントサイドにjQuery Mobile、サーバとビルドツールとしてNode.jsを使うフレームワーク。

• Cinco

CincoはRuby on Railsを開発したDHH（David Heinemeier Hansson）らが開発中のモバイルアプリケーション向けフレームワークです（参考：Rails開発者ら、JavaScriptフレームワーク「Cinco」を発表）。

モバイルアプリケーション開発の参考書籍

モバイルアプリケーションをHTML/CSS/JavaScriptで開発するときに参考になる書籍を紹介します。

iPhoneアプリケーション開発ガイド ～ HTML+CSS+JavaScript による開発手法
CSSのカスタマイズ、jQueryの利用、jQTouchを利用した高度なアニメーション、PhoneGapを使ってネイティブアプリ化ケーションする方法など、HTML+CSS+JavaScriptによるiPhoneアプリケーションの開発プロセスを網羅的に解説

スマートフォンのためのHTML5アプリケーション開発ガイド―iPhone/iPad/Android対応
モバイルアプリケーションをHTML5で開発しようとしているプログラマーに向けたHTML5の解説書。基本的なHTML5の機能から、Canvasによるグラフィックの描画、ローカルストレージやオフライン機能などまで解説

HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応
パソコン用サイトを小さくしても、iPhone対応ではありません！ パソコン用サイトをベースに、見やすく使いやすいiPhoneサイトを設計＆制作する方法を最新の「HTML5」＆「CSS3」を使い、実在サイトを例にサンプルコードを交えて実践的に解説。iPhoneにふさわしいデザイン・ノウハウも満載

1冊目と2冊目は、いずれもモバイルデバイス対応のWebアプリケーションを開発するためのHTML5/CSS/JavaScriptを解説するという内容で構成も似ていますので、どちらかを購入すればよいと思います。1冊目の「iPhoneアプリケーション開発ガイド」はjQTouchやPhoneGapなど関連ソフトウェアの解説も含まれたものになっており、2冊目の「スマートフォンのためのHTML5アプリケーション開発ガイド」は、より丁寧にHTML5の技術をサンプルとともに説明しています。

すでにHTML5の知識があったり書籍を持っていて、実践的な内容を読みたい方は1冊目の「iPhoneアプリケーション開発ガイド」を、HTML5そのものも一緒に学習したい方は2冊目の「スマートフォンのためのHTML5アプリケーション開発ガイド」をおすすめします。

3冊目の「HTML5＋CSS3で作る 魅せるiPhoneサイト」は、モバイル対応サイトの構築にフォーカスしており、具体的な手順も丁寧に説明しているので、Webサイトをモバイル対応にしたい場合におすすめです。

個人的には上記3冊のうち、1冊目の「iPhoneアプリケーション開発ガイド」と3冊目の「HTML5＋CSS3で作る 魅せるiPhoneサイト」を実際に購入して参考にしています。