ネイティブアプリとWebアプリ
Presenter Notes
用語
- WebView
- 簡易的なブラウザコンポーネント
- iOSとAndroidはWebkitベースのレンダリングエンジン
- WebkitのバージョンやJavaScriptエンジンは異なる
Presenter Notes
PhoneGapの構造
- WebViewでWebページを表示している
- HTML+CSS+JavaScript
- これだけだとWebサイトと同じ
- JavaScript から ネイティブの機能へブリッジする機能を持つ
- phonegap.js
- API的にネイティブ機能を呼び出せる
Presenter Notes
PhoneGapアプリの例
SmartPhone development guide
View more presentations from Naoya Ito
Presenter Notes
ネイティブ機能呼び出し
- JavaScriptからカメラ機能を使う例
- navigator.camera.getPicturesでカメラを起動
- コールバックで画像のBase64文字列を受け取る
コード
1 navigator.camera.getPictures(onSuccess, onFail);// カメラを立ち上げ
2
3 onSuccess = function (base64data) {
4 var img = document.getElementById('myImage');
5 img.src = "data:image/jpeg;base64;" + base64data;
6 }
Presenter Notes
動作原理
- FFI = Foreign Function Interface = ブリッジ
- ブラウザとネイティブ機能をFFIがつなぐ
HTML5, PhoneGap and What's Next
View more presentations from m0bz
Presenter Notes
PhoneGapプラグイン
-
iOSなら特定のURLを叩きネイティブ機能を呼び出す
gap://<Class>.<command>/[<arguments>][?<dictionary>]- ネイティブ処理
- ネイティブからstringByEvaluatingJavaScriptでコールバック関数に結果を渡す
Presenter Notes
PhongeGap Application
- 表示されている画面はWeb
- 既存のWebAppを持ってこられる
- カメラ等のネイティブ機能はブリッジしてプラグインで呼ぶ
- なぜブリッジが必要?
- ブラウザにはまだ存在しない or 制限された機能が多い
- Device API, Media, Notification …
- W3Cで標準化されて、全部のOSで使えるようになったらPhoneGapは不要?
- "The second goal of PhoneGap is for the project to cease to exist"
Presenter Notes
現在のW3C標準化について
HTML5, PhoneGap and What's Next
View more presentations from m0bz
Presenter Notes
ブラウザベンダの動き
Presenter Notes
PhoneGap With Sencha Touch
- PhoneGap は Mobile Web を ネイティブアプリにできる
- ネイティブっぽいWeb Appを作るのにSencha Touchは強力
- ネイティブ箇所以外はChrome(Webkit系ブラウザ)で動作確認
Presenter Notes
Sencha Touch 2.0
Sencha Touch 2は、1行のコマンドでWebアプリケーションをiOS App StoreやAndroid Marketplaceに配置できるようパッケージングする機能や、デバイス特有の関数にアクセス可能な新APIを備えています。
あれ? PhoneGap…?
Presenter Notes
Titanium Mobile
Appcelerator社が提供しているJavaScript を利用して iPhone/iPad, Android向けのアプリケーションが開発できるソフトウェア
Presenter Notes
アーキテクチャ
- 共通のアプリケーションコード(JavaScript)でアプリを書ける
- OSで異なる挙動も多いが...
Presenter Notes
JavaScriptでネイティブ?
- Titaniumは内部にJavaScripttエンジンを持つ
- iOS は JavaScriptCore
- Android は V8 (以前はRhino)
- JavaScriptインタプリタ経由でネイティブAPIを叩く
- UIKitでネイティブUIの作成
- ネイティブの機能を触る
- Titanium Mobileは本当の意味でネイティブコードを吐くわけではないらしい
Presenter Notes
PhoneGap and Titanium
- PhoneGap は webviewにサイトを表示してPhoneGapプラグインで包んだもの
- 既存のサイトをそのまま持って来られる
- ネイティブな機能はブリッジを経由する
- Titanium MobileはJavaScriptをネイティブコードへコンパイルしているようにみえる…が
- 実際にはJavaScriptインタプリタを使ってネイティブ機能を使うため、変換ではない
- JavaScriptを手段として使いネイティブアプリを作る環境を提供する
- 既存サイト(HTML,CSS,JS)を持ってくるのが目的ではない
Presenter Notes
Titanium Mobile to Web
- Web to Titanium Mobile ではない
- Titanium SDK for Mobile Web
- 逆にTitanium Mobile向けのソースで、Webアプリケーションを作るSDK
- Titanium SDK for Mobile Web Beta 1が公開されていますね。 - JP::HSJ::Junknews::HatenaSide
- JavaScriptという手段を使って何を作る環境