最近、クロスプラットフォーム・モバイルアプリ開発が注目を集めています。
Webの技術(HTML + CSS + JavaScript)を使ってアプリのUIと動作を記述でき、作ったものは
iPhoneでもiPadでもGallaxy SでもXperiaで動作するというのが特徴です。
さまざまな会社からクロスプラットフォーム・モバイルアプリ開発の為の
フレームワークが提供されていますが、私はその中でもJQueryMobileに注目しています。
JQueryMobile公式ページ
http://jquerymobile.com/
理由としては、
(1) HTMLの記述のみでUI設計ができる
(Titanium Mobileとかの他フレームワークよりも簡単)
(2) よけいな設定ファイルやフレームワークが吐き出すベースコードがないのがとっつきやすい
(3) DOM操作にとても便利なライブラリであるJQueryとの親和性が高い
という点です。特に使ってみて(1)がとても便利で、少しでもHTMLが分かっている人なら
簡単にUIを作ることができます（CSSを全くいじらなくてもそれなりのUIが作れます。）
例えば、JQuery Mobileにあらかじめ用意されているUIの部品(ボタンやリストなど）
を使ってこんな感じの画面をHMTLの記述で作れてしまいます。
UIをHTMLで記述したら、
データの受け渡し処理などはjavascript、
データの保存はHTML5のWebStorage
を使うという組み合わせで結構なんでも作れちゃいます。
JQueryMobileを覚えると、次のような良いことがあると考えています。
「こういう感じのアプリを作りたいんだけど」っていうイメージを誰かに伝えたい時、
パワーポイントで苦労して資料を作っても、画面遷移が多くなると
イメージが湧きにくいと言われたりということがあるかと思います。
そんな時に、JQueryMobileでは、ささっとUIと遷移だけ作って、端末に入れて
すぐアプリイメージを伝えるということができるのではと考えています。
（しかも、ひとつ作ってしまえば、いろんな端末で見せることが可能です）
そして、そのあとすぐメンバーの意見を反映させて、UIをFIXした後は、
（その間にUIを修正するのもHTMLを変更するだけなのですぐできます）
実際の処理を作って、テストしてとにかく早くリリースするっていうのが可能になります。
Objective-cやJavaは全く使わずに、多端末対応のアプリを素早く作れて、
何よりもソースコードが分かりやすくなると言った点がとても気に入っています。
悪い点もあげておくと、
(1)デバイスを使った処理（例えば、カメラ制御やGPS、加速度センサ）を含むアプリの開発には向いていない
(2)ゲームなどのアニメーションが多いアプリの開発には向いていない
(javascriptやHTML5で作ることは可能ですが、また別の話です）
という点があげられます。上記のような特徴を持つアプリの開発は現状では、Objective-CやJAVAでの
開発のほうが向いているのかもしれません。
JQueryMobileは現在α4版がリリースされています。
今春中に完成版リリース予定とアナウンスされていますので今後の
アップデート次第では上記の悪い点が改善される可能性もあります。
追記：
先日、AdobeからDreamWeaverがJQuery Moblieに対応することが発表されました。
[参考記事]jQuery MobileにDreamweaverが対応。モバイルアプリケーション開発ツールとして本命に急浮上！
ますます注目を集めそうですね。
サンプルアプリの作成(UI編)
じゃあさっそくサンプルアプリを作ってみましょう。
一番始めにつくるサンプルアプリは、
「TODO管理アプリ（簡易ver）」
を作ってみようかと思います。
作成する画面は以下の2つです。
・TODO一覧を表示する画面(図1)
・新規TODOを追加する画面(図2)
今回はこのUI部分だけ作ってみることとします。
図1:TODO一覧を表示する画面
図2:新規TODOを追加する画面
図1の画面でツールバーの「追加」ボタンを押すと図2の画面に遷移して、新たなTODOを入力する
ことができます。
図2で新規TODOを入力して、画面下の「追加」ボタンを押すと、新たなTODOが追加されて、
図1の画面に戻ります。
というような単純なアプリです。
早速コードを紹介します。
図1、図2にそれぞれ対応する形でリスト1,リスト2のような2つのhtmlファイルを作ります。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ToDoアプリ</title>
<meta name="viewport" content="width=320,user-scalable=no" charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>TODOリスト</h1>
<a rel="external" href="add_todo.html" data-role="button" data-icon="plus" >追加</a>
</div>
<div data-role="content">
<ul data-role="listview" id="todo_list">
<li><h2>レポート書く</h2><p>Thu Apr 2011 12:38:16....</p></li>
<li><h2>リンゴ買う</h2><p>Thu Apr 2011 12:28:52....</p></li>
</ul>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
リスト1:TODO一覧を表示する画面のソースコード(index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ToDoアプリ</title>
<meta name="viewport" content="width=320,user-scalable=no" charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h2>ToDoの追加</h2>
<a rel="external" href="index.html" data-role="button" data-icon="back">戻る</a>
</div>
<div data-role="content">
<div id="label">TODOを入力してください</div>
<div data-role="fieldcontain">
<input type="text" id="text" value="" />
</div>
<a rel="external" href="index.html" data-role="button" data-icon="check">追加</a>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
リスト2:新規TODOを追加する画面のソースコード(add_todo.html)
index.htmlから
簡単にソースコードの説明をしていきます。
まずheadタグ内ではJQueryMobileを使うためにjsファイルとcssファイルをインポートしています。
次にbodyタグの中ですが、始めにここの中がJQueryMobileを使ったUIですよということを表す為に、
<div data-role="page" data-theme="b">というタグを記述します。
ここでdata-themeという属性がありますが、JQueryMobileであらかじめ用意されている
いくつかのUIデザインのテーマ(下記図3のようにaからeまであります）を選択することで、アプリのデザインテーマを
変更することができます。
なお、各部品ごとにテーマを変えるということも可能です。
（ボタンはテーマa、ツールバーはテーマcを使うとかが可能）
図3 選択できるテーマ
デザインテーマを指定したら、実際のUIを記述していきます。
JQueryMobileではHTML5の思想を取り入れ、header部、content部、footer部に
分けて記述します。それぞれdivタグのdata-roleの属性値にheader,content,footerと指定すること切り分け
をおこないます。
このコードと画面との対応ですが、headerが画面上部にあるツールバー（図1ではTODOリストと書いてあり、追加ボタンが表示されている部分です。）に対応し、content部が中央の領域（図1ではリストを表示している部分）、footerは画面下部の領域に対応し、ここにボタンやラベルを表示できます。（図1では使っていません）
ソースを見てもらえれば分かると思いますが、3つに分けられた各部にラベルやボタンをタグで記述するだけで、
UIを設計することができます。
ここで気をつけるのは、ボタンのを表現するのにJQueryMobileではaタグを利用します。aタグのdata-role属性に
buttonと記述するだけで、ボタンの画像が埋め込まれたリンクが自動的に作成されます。
またbutton-icon属性を指定することで、ボタンのアイコンを指定することができます。
どのようなボタンがあるかは、JQueryMobileのリファレンス（日本語）を見ればよくわかります。たくさんのiconが用意されていることが分かります。
次にadd_todo.htmlです。index.htmlと違う点はテキストを入力するinputタグが使われているところぐらいです。
「戻る」ボタン、「追加」ボタンもindex.htmlと同様にaタグで作成されています。
このようにあらかじめ用意されているUIの部品セットを使ってHTMLを記述するだけで、簡単にUIを作れてしまいます。
しかし、これだけでは画面1と2を行き来できるだけで、実際のtodoを登録してリストに反映させることはできません。
はじめにも書きましたが、todoの登録処理の記述はJavascript、データの保持はHTML5のWebStorageを使うことで
実現します。次回の記事はこの部分について書こうと思います。
最後に：マルチデバイスでアプリ化するためのツール「Phone Gap」の紹介
最後に、JQueryMobileで作ったものを端末でアプリとして見せる為の方法を説明します。
今回作ったものはHTMLなので、当然ながらWebサーバ上に置けば動作します。
しかし、適当なサーバを用意するのは割と面倒ですし、mobileSafariの上で動作させるとアプリっぽく見えないとか
電波状況が悪いところでは動作しないというような欠点もあります。
そこで、HTMLをiPhoneやAndroid端末のアプリに自動変換するPhone Gapというツールを使います。
Phone Gap公式ページ
http://www.phonegap.com/
詳しい使い方は次回以降また書こうと思いますが、
本アプリを使うことで簡単にiPhoneアプリに変換することができました。
対応機種は、
・Android
・BlackBerry
・BlackBerry WebWorks (OS 5.0 and higher)
・iPhone
（PhoneGap API Documentationより引用）
となっています。
今回紹介したJQueryMobileとPhoneGapを使えば、1度の開発でマルチプラットフォームで動作するアプリが
作れるようになるというのがとても魅力的だと思っています。
0 件のコメント:
コメントを投稿