ネイティブアプリとWebアプリ

Presenter Notes

用語

  • WebView
    • 簡易的なブラウザコンポーネント
    • iOSとAndroidはWebkitベースのレンダリングエンジン
      • WebkitのバージョンやJavaScriptエンジンは異なる

image

Presenter Notes

PhoneGap

PhoneGapはnitobi社の開発した、スマートフォン向けハイブリッドアプリケーション制作のためのフレームワーク

  • 対応端末が多い
    • iOS Android BlackBerry HP WebOS Windows Phone 7 Symbian Bada

2011/10/04にAdobeにより買収

Presenter Notes

PhoneGapの構造

  • WebViewでWebページを表示している
    • HTML+CSS+JavaScript
    • これだけだとWebサイトと同じ
  • JavaScript から ネイティブの機能へブリッジする機能を持つ
    • phonegap.js
    • API的にネイティブ機能を呼び出せる

Presenter Notes

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がつなぐ

Presenter Notes

PhoneGapプラグイン

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標準化について

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で異なる挙動も多いが...

image

Presenter Notes

JavaScriptでネイティブ?

Presenter Notes

PhoneGap and Titanium

  • PhoneGap は webviewにサイトを表示してPhoneGapプラグインで包んだもの
    • 既存のサイトをそのまま持って来られる
    • ネイティブな機能はブリッジを経由する
  • Titanium MobileはJavaScriptをネイティブコードへコンパイルしているようにみえる…が
    • 実際にはJavaScriptインタプリタを使ってネイティブ機能を使うため、変換ではない
    • JavaScriptを手段として使いネイティブアプリを作る環境を提供する
    • 既存サイト(HTML,CSS,JS)を持ってくるのが目的ではない

CoronaとPhonegapとTitanium Mobileの比較 « bulblub

Presenter Notes

Titanium Mobile to Web

Presenter Notes

Presenter Notes