jQuery Mobile / Titanium Mobileのセミナーに参加してきました。

iPhoneSDK AndroidSDK セミナー

白石俊平氏講演 モバイル開発のベストプラクティス
http://www.r-agent.co.jp/info/rss/event/bestpractice/


こちらのセミナーに参加してきました。
技術に関する講演自体は60分と短いものではあったのですが
現在のHTML5やJavaScriptを利用したスマートフォン対応の
Webページ製作、アプリ製作について雰囲気をつかむことが出来ました。
以下、セミナーの内容からの走り書きになります。



◆ 白石俊平氏講演 モバイル開発のベストプラクティス

jQueryMobile & Titanium Mobile の基本的なところを５０分程度で
白石さん自身の利用経験はjQueryMobileが去年に2か月ほど、
Titanium Mobileを案件の関係で今年に入って１ヶ月程度使い、簡単なアプリケーションを作った程度


講演の流れとしては、
・jQueryMobile / TitaniumMobileのライブコーディング
・比較
・まとめ


◆ jQueryMobile
モバイルWebサイトのUI開発に特価したフレームワーク


◇ 特徴
・マークアップ中心のUIコーディング
　→ HTMLのタグ要素に記述を追加することで組み込んで行く
　→ <div>タグの場合は、data-role属性を追加していく形。 サンプルは後述。

・多彩なプラットフォームをサポート
　→ http://jquerymobile.com/gbs/
　→ グレードA / フルサポート
　→ グレードB / Ajaxナビゲーション無効
　→ グレードC / UIの拡張は行われないが、一応情報は伝わる。昔の携帯サイトみたいな形に。
　　　Progressive Enhancement的なアプローチにより、古いブラウザやデバイスもサポート対象に
　　（ブラウザごとに見た目が異なってもいいんじゃないか、というパラダイムシフト）


・PhoneGapとの組み合わせが注目されている
・とても簡単にMobileに最適化されたWebサイトを作成することが出来る


◇ ライブコーディング


基本的には、HTMLファイルの最初でCSSを1つ、JSファイルを2つ読み込んで、
div属性でdata-roleを定義することで基本的な動きを行わせることができる。
公式サイトにあるjQueryMobileの基本的なページ構造テンプレートは以下の形。

<!DOCTYPE html> 
<html> 
	<head> 
	<title>Page Title</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>Page content goes here.</p>		
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

これだけで、画面の大きさによって動的に変わるヘッダー部分と
コンテンツ部分、フッター部分のあるページを作成することができる。
http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-pages.html


複数ページを一枚のHTMLに記述することも出来る。
サブページへの遷移を行う際のアニメーションも自動的に設定してくれる。
（<A href="#sub_page">など。指定するのはdata-role="page"のid属性名）


data-role属性に指定する値によって、UIの構造を定義していくことが出来る。
Aタグにdata-role属性を追加して「button」と指定するだけで、
押した場合に画面遷移を行う「ボタン」も配置可能。

<A href="#" data-role="button">など

<属性例>
 page
 dialog : モーダルダイアログ
 header/footer/content
 button
 navbar : 下部ナビゲーションバー
 slider
 listview


ヘッダなどでAタグにdata-add-back-btn="true"属性を追加してやることで
「Back」ボタンなどを追加することもできる。


ヘッダ／フッタの部分は「ツールバー」と呼ばれる


Aタグに以下のようなタグを追加することで、画面遷移アニメーションを
変更することも出来る。デフォルトはスライドアニメーション

data-transition=""
　slide
　slideup
　slidedown
　pop
　fade
　flip


リストを作ってみる
<ul>属性に対してdata-role="listview"を追加する。
<li>属性が小要素となる。
　そして内部にAタグなどを追加していくことになるが、リンク先で外部サイトに
　　遷移する場合などAjaxをさせたくない場合はrel="external"を追加する。


動的にリストを作る場合
→ javaScriptを利用する。
　　#sub_pageなどのpagebeforeshowなどのイベントに関数をbindする。
　　このあたりはjavaScriptのjQueryになる。
　　最後にlist.listview("refresh"); を行うことで動的に作った
　　オブジェクトに対して、jQueryMobileで整形させることが出来る。


data-theme属性をpageに追加することで、
全体的なthemeを変更することが出来る。
a〜eまでの5種類程度の属性がある。
http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/pages-themes.html


◆ 利点
適当に組んでていても、勝手に「それっぽく」見える
通常のブラウザでテストしても、それなりに安心
　→ デバッグが簡単（GoogleChromeやSafariはJSのデバッグ環境が整っている）


◆ 欠点
id属性はあまり多用出来ない（複数人で作業する場合に、衝突する可能性）
ちょっとフレームがきつすぎる気がする。
　→ jQuery Mobileの「流儀」をきちんと知らないと戸惑うこともある。
　→ おかげで、コード数は少なくて済む



おまけ
◇ PhoneGap
　インストール型アプリをHTML5で作成するためのフレームワーク
　AdobeDreamWeaverCS5.5で、jQueryMobileとともにサポートされている
　センサー類にアクセスするためのAPIを提供してくれる
　WebView(Webブラウザコンポーネント）上のHTML5アプリから、
　ネイティブの機能をJavaScriptで呼び出せる



◆ Titanium Mobile入門
スマートフォンアプリをJavaScriptで記述できるフレームワーク
iOS、Androidをサポート（ただし、Androidのサポートレベルは高くない）
Titanium Studioという開発環境が存在
http://www.appcelerator.com/products/titanium-mobile-application-development/


Titanium Mobile固有のAPIを駆使して開発する
// ほかのファイルをインクルード
Titanium.include("")
// ログを出力
Titanium.API.info("")
など。


Titanium Studio
　Eclipseベースの開発環境
　　→ Aptanaを買収して開発
　プロジェクトの作成、ソースコードのエディットなど、基本的な開発作業をサポート
　　→ デバッガは「有償」


ライブコーディング
　New / Project Titanium Mobile Project
　Resources以下にソースコードを書いて行く

Titanium Mobileにはルートタブとタブグループの概念があり、
タブをどんどんスタックに追加していくイメージで作成していく。
UIなども全てJavaScriptで作成していく。 

var button = Titanium.UI.createButton({
 title : "sample"
  height : 25
});

UIは基本的にTitanium.UI.createXXXの形で作って行く
UI部品を追加するには、ウィンドウに対して.addを行う


TitaniumMobileにおけるリストは、tableViewになる。
APIからWebViewを作成することも出来る



◆ Titanium Mobileのいいところ
　生産性の高さ
　ネイティブの言語を覚えなくていい
　パフォーマンスの高さ
　ネイティブのユーザ体験
　　→ あえてWebViewを介す必要が無いため、その分高速化を図れる
　　　（実行時にはJavaScriptのインタプリタのようなものを介して動作している。）


◆ 気をつける点
　UIをJavaSciriptでコーディングして行くので、見辛い
　結構バグが多い
　お金を払わないとデバッガが使えない
　ドキュメントがあまり役に立たないので、結局KitchenSinkを参照して作ることになる



……比較部分については写しきれず……


まとめ
スマートフォン向けWebサイト / アプリを作るならjQueryMobile一択
インストール型アプリを作成するのであれば、
jQueryMobile+PhoneGapとTitanium Mobileのどちらを選ぶかは非常に悩ましい
　・「どこでも動く」が重要ならばjQueryMobile+PhoneGap
　・「サクサク動く」が重要ならTitanium Mobile
　　→ 巨大なsqliteのデータベース(300MB)を利用する案件を実施する必要があったので、
　　　 Titanium Mobileを利用したことがある



こんな形でした。
かなり高速で進んでいくセミナーではありましたが、おおよその流れが
知りたかったので私にとってはちょうど良かったのかもしれません。


Titanium Mobileは最近盛り上がってきている雰囲気を感じますが、
やはりまだバグが多いということ、Androidでは今ひとつ使えないということで
個人ではAndroidアプリを作ろうと思っている私にはまだ時期尚早と言う印象。
ネイティブで開発出来てしまうので、そちらの方が早いじゃん、
という後々の高速化を見込まない発想をしてしまう私です。


jQuery Mobileはなかなか面白そうです。
しかし最終的にWebViewを介すため、やはりAndroidでは動作が遅くなりそうな
予感がします。 jQueryのFlipなども結構重いですからね。
簡単な情報を載せるだけのアプリなどを作る分には、コードはWebViewだけで
実は中身はjQueryというアプリを作るのは選択肢としてありかもしれません。