2010/11/29
第 12 –回 HTML5
とか勉強会
クジラ飛行机
HTML5 で作る
スマートフォンの
ネイティブアプリ開発
～ JSWAFFLE の紹介
http://d.aoikujira.com/jsWaffle

iPhone のブラウザ → Mobile Safari
Android のブラウザ → 標準ブラウザ
いずれも、 WebKit ベースで HTML5 に対応している
( 前提 )IPHONE/ANDROID …のブラウザは .

「最近 HTML5 の本を書きました！」（ソシム刊）
iPhone/iPad/Android の
ブラウザは HTML5 対応。
スマートフォンならば、
存分に HTML5 に特化した
アプリケーションを
作ることができる！
HTML5 関連 API や
CSS3 について紹介している
( 書籍 ) スマートフォンのための
HTML5 アプリケーション開発ガイド

WebKit …
オープン
ソースの
HTML レン
ダリングエ
ンジン
・・・
これを利用
したブラウ
ザが
Android/iPho
ne で動いて
いる
ネイティブアプリの
開発でも WEBKIT が
利用できないだろうか？

素晴らしいことに、 iPhone/Android では、 UI コンポーネントとして
、 WebKit ベースのブラウザが利用できるようになっている
自分のアプリに自由にブラウザを組み込むことができる
WEBKIT ベースのブラウザが
UI コンポーネントになっている！！

HTML5/CSS/JavaScript で
作った Web アプリを、
ネイティブアプリの中にネイティブアプリの中に
押し込むことができるはず！
…そう、ブラウザをうまく使えば

“HTML5” でネイティブアプリが作れる！
リソースに、 HTML ファイルを仕込んでおき、
アプリが起動したら、すぐ WebKit コンポーネントを全面表示し、
HTML ファイルを表示することで、ネイティブアプリのように見せる

そうだ！
ブラウザコンポーネント
を使って
アプリを作ろう！

WebKit コンポーネントを拡張し、 HTML5 でネイティブアプリを作る
フレームワークが既にある！
HTML5 でアプリが作れるフレームワーク
Titanium jsWaffle

（１） Objective-C や Java を知らなくても作れる！
（２）とにかく開発効率が良い！
 とりあえず、いつものように、 Web ブラウザと好きなエディタで作ってお
いて、最後に、ネイティブアプリ変換すれば良い
 スマートフォン固有 API が手軽に使える（面倒な手続きも簡略化）
 記述するコードも少なくて済む
（３） HTML5 が思う存分使える！
 ネイティブアプリにしてしまうなら、ブラウザ互換性など、もろもろ面倒
な事を考えなくて済む
HTML5/JS でアプリ開発するメリット

ネイティブより、実行速度が遅い
→ネイティブなのは外見だけで実際はブラウザの中で動かすのと一緒
なので仕方がない
→とは言え、これは開発効率とのトレードオフ
利用できない API がある
→使いたいものがあれば、フレームワークに手を入れる
→シンプルなフレームワークならそれほど大変ではない
HTML5/JS でアプリ開発するデメリット

シンプル !!
GPS/ 加速度センサー / カメラなどスマートフォンの機能を利用する
API が用意されている
Android 機能に特化
MIT ライセンス
JSWAFFLE

Desktop(Windows など )/iPhone/Android で動作
カメラ /GPS/ 傾き検知などスマートフォンの機能を使う API あり
Titanium Developer という専用アプリでプロジェクトを管理
有料サポートがある本格的なフレームワーク
 ライセンスは Apache)
TITANIUM MOBILE
Titanium
http://www.appcelerator.com/

HTML5/JS でアプリを作るフレームワークの中で有名
GPS/ 加速度センサー / カメラなどスマートフォンの機能を利用する
API が用意されている
iPhone/Android/BlackBerry などのスマートフォンに対応
オープンソース、 MIT ライセンス
iPhone で実績多数
PHONEGAP
http://www.phonegap.com/

…実は
私 ( クジラ飛
行机 ) が作り
ました！！
ところで
JSWAFFLE とは？？？

PhoneGap が有名なので、 Android で使ってみようと思った
しかし、インストールが大変！
 Android SDK は仕方ないとしても、 Ruby/Apache ANT …
 環境変数の書き換え、 Ruby …のバージョンに指定有り
苦労してインストールを終えプロジェクト作成
サンプルをコンパイル！
実行 .. 残念！動かない機能があった
 動くには動くが・・・使えない機能があるのは嫌 !!
 まともに API が動かない PhoneGap の Android 版に不満
 PhoneGap のコンセプトを見習って自分で作ってしまおう！！
JSWAFFLE を作るまで

既存フレームワークで不満に思った点
 インストールが大変！
 HTML/JavaScript で手軽に Android 開発が始められるように！
 簡単に機能拡張ができるように！
 より多くの Android API が利用出来るように！
JSWAFFLE の開発を開始！

とにかく、インストールを簡単にした！
Web ブラウザから jsWaffle のページへ行って
[INSTALL NOW] のボタンをクリックするだけ
 このために、 Adobe AIR の力を借りた (^o^
JSWAFFLE > インストール

jsWaffle は、フォームに、プロジェクト名などを記入して
[Make Project] ボタンをクリックするだけ
 コマンドラインから操作する必要はなし
 プロジェクト生成したら、 Eclipse/Aptana からインポートして使う
JSWAFFLE > プロジェクトの作成

Titanium/PhoneGap は手広くいろいろなプラットフォームをサポート
しているので汎用性が高いが、デバイス固有の機能を 100% 活かしき
れない

そこで、 jsWaffle は Android に 100%100% 特化特化することに
現在利用可能な API
 着信音やバイブなど通知系の機能
 マルチメディアの再生
 傾きセンサー /GPS
 メール /SMS/ 電話 / カメラ
 ファイル / データベース SQLite
 Android のメニュー / フルスクリーン対応
 バーコード /QR コードの読み取り
JSWAFFLE > ANDROID に特化

jsWaffle
もちろん、レンダリングエンジンには、 WebKit コンポーネントを
使っているので、 WebKit の持つ、 HTML5(+ その周辺技術 ) のはそそ
のままのまま使える！！
JSWAFFLE > HTML5 とか
加えて、 HT-03a/ アップデート前の Xperia など、
Android1.6 端末でも、 localStorage や
geolocation など、本来未実装の HTML5 関連 API が
使えるように工夫している！！

 …ちなみに
<script> droid.runItent(“camera:///sdcard/test.jpg”)
--- OR ---
<a href=“camera:///sdcard/test.jpg”>CAMERA</a>
CAMERA を起動するコードなど

<script>
droid.startIntent("mailto:hoge@example.com?
subject=About_jsWaffle&body=test");
--- OR ---
<a href=“mailto:hoge@example.com?
subject=About_jsWaffle&body=test”>Send Mail!!</a>
MAILER の起動

まだまだ、これからだけど・・・
シンプルで使い勝手も良いので、使ってみてください！！
JSWAFFLE > ANDROID な人使ってみて！
jswaffle
ご静聴に感謝
http://d.aoikujira.com/jsWaffle/