2010/11/29

第 12 回 – HTML5 とか勉強会

クジラ飛行机

HTML5 で作る

スマートフォンのネイティブアプリ開発～ JSWAFFLE の紹介

http://d.aoikujira.com/jsWaffle

iPhone のブラウザ → Mobile SafariAndroid のブラウザ → 標準ブラウザいずれも、 WebKit ベースで HTML5 に対応している

( 前提 )IPHONE/ANDROID のブラウザは… .

「最近 HTML5 の本を書きました！」（ソシム刊） iPhone/iPad/Android のブラウザは HTML5 対応。

スマートフォンならば、存分に HTML5 に特化したアプリケーションを作ることができる！

HTML5 関連 API やCSS3 について紹介している

( 書籍 ) スマートフォンのためのHTML5 アプリケーション開発ガイド

WebKit …オープンソースのHTML レンダリングエンジン・・・これを利用したブラウザがAndroid/iPhone で動いている

ネイティブアプリの開発でも 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

Titaniumhttp://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/