Sencha TouchでPhoneGapを活用する

こんにちは、ゼノフィnakamuraです。

この記事は、US Sencha社ブログ Leveraging PhoneGap within Sencha Touch を翻訳したものです。引用されているビデオには日本語字幕もついています。

Sencha Touch 2.3とSencha Cmd 4の公開で、クロスプラットホームのハイブリッドアプリケーションを生成することは、ここまで簡単になりました。PhoneGapはSencha Touchのモバイルワークフローの重要な機能となり、最近公開されたNodeJSベースのPhoneGapコマンドラインインターフェイスにシームレスに統合します。Sencha TouchとPhoneGap、またはSencha TouchとCordovaを利用したアプリケーション作成の細かい説明には、Sencha & PhoneGap のビデオチュートリアル（日本語字幕付き）をご覧ください。

アプリケーションの生成

Sencha Touch 2.3フレームワークをダウンロードし、Sencha Cmdをインストールしたら、次のコマンドを利用して素早くアプリケーションを生成できます：

//sencha generate app [path/to/app] [AppName] $ sencha generate app ~/Desktop/MyApp MyApp

次はPhoneGap CLI Getting Started Guideに従って、PhoneGapや他の配置したいネイティブプラットホームでシステムを立ち上げましょう。注もしPhoneGap Buildで作成するつもりでしたら、NodeJSとPhoneGap CLIをダウンロードするだけですので、ネイティブSDKを気にする必要はありません。

Sencha Cmd 4対応アプリケーションにもPhoneGapサポートを追加するには、オプションとなる APP_ID と APP_NAME の引数付きで次のコマンドを実行します。

//sencha phonegap init [APP_ID] [APP_NAME] $ sencha phonegap init com.mycompany.MyApp MyApp

フォルダ構造

これで、あなたのアプリケーションはPhoneGapが提供する楽なネイティブ開発と共に、Sencha Touchフレームワークのパワーを利用できるようになりました。既にSencha開発者であれば、アプリケーションビルドのワークフローは今までと同じことに気づきます。我々は普通のフォルダ構造を少しだけ変更して、そこにPhoneGapプロジェクトを追加しました。

Sencha and PhoneGap Folder Structure — SenchaとPhoneGapのフォルダ構造

カスタム構成

いつも通りに、通常のconfig.xmlを利用してPhoneGapアプリケーションを構成することができます。Sencha Cmdがビルド処理を構成するには‘phonegap.local.properties’ ファイルを提供します。PhoneGapをローカルで利用して、カスタムネイティブプロジェクトを生成するときに利用できるだけでなく、Sencha CmdはPhoneGap Buildにも統合されているので、ネイティブ開発ツールがローカルになくても、簡単にアプリケーションを生成できます。下記が構成できるプロパティファイルのサンプルとなります。

# The following are supported platforms for local building (blackberry is version 10)
# android, blackberry, ios, wp7, wp8
#
# The following are supported platforms for remote building (blackberry is version 6)
# android, blackberry, ios, symbian, webos, wp7
 
# This property can be a single platform or a space delimited list
phonegap.platform=ios
 
# This determines if build is remote (phonegap build) or local
phonegap.build.remote=false
 
# Username for PhoneGap Build
phonegap.build.remote.username={username}
 
# Password for PhoneGap Build
phonegap.build.remote.password={password}

開発

この統合の一番大きい利点は開発ワークフローを変更しないで済むことです。もしあなたがPhoneGapのユーザーであれば、Sencha Touchアプリケーションの構造とシンタックスに慣れる必要がありますですが、PhoneGapのアプリケーション生成はこれまで通りです。Sencha Touchプロジェクト内に完全なPhoneGapプロジェクトが含まれているので、プラグインの追加やPhoneGap CLIツールの利用は問題なく動作します。もしSencha Touchユーザーであれば、PhoneGap Docsに目を通したほうがいいですが、シンタックスは簡単に理解できます。Sencha Touchアプリケーション内からネイティブ機能やハードウェアにす速くアクセスできるようになります。‘Ext.browser.is.PhoneGap’を利用すると、ネイティブで包まれたアプリケーションに入っているのか、ブラウザで動作しているのかを検出できます。

ビルドとテスト

ネイティブのエミュレータ、またはデバイスでアプリケーションをテストするために作成するのは単純なコマンドです。-run のフラグはオプションで、それによってアプリケーションがビルドされたあとに走らせるか、または単にデバイスに持っていくネイティブバイナリを作成するかを決められます。

$ sencha app build -run native

コマンドラインを超える

もしコマンドラインがあなたのスタイルではなくて、より「強力」なANTサポート付きのIDEを使っているなら、Sencha Cmd 4のgenerate applicationには、IDE内から通常のコマンドを実行するための人間が読み取れるANTターゲットが付いています。Sublime Textが好きな皆様には、ANTの良さを味わうためのSuperAntという便利なプラグインがあります。

Sencha Cmd 4 Targets — Sencha Cmd 4ターゲット

Apache Cordovaサポート

Sencha Cmd 4はPhoneGapだけではなく、PhoneGapが提供している余分なものが必要ない・欲しくない開発者のためにApache Cordovaもサポートしています。コマンドは同じで、ただPhoneGapを起動せずに、Cordovaを利用するだけです。

//sencha cordova init [APP_ID] [APP_NAME] $ sencha cordova init com.mycompant.MyApp MyApp

詳しくは両方の処理を細かく説明する、Sencha & PhoneGap ビデオチュートリアルをご覧ください。

素早いカメラデモのアプリケーション

アプリケーションにPhoneGap、またはCordova APIを追加するのはとても簡単です。もし既にSenchaフレームワークをよく理解していたら、Cordova APIを学ぶのは余り問題ないと思います。このデモでは、Sencha Touchのアプリケーションにネイティブフォトライブラリを追加する短いコードスニペットについて考察しましょう。

Ext.define('SenchaPhoneGapCameraDemo.view.Main', {
    extend: 'Ext.Panel',
    xtype: 'main',
    requires: [
        'Ext.Button',
        'Ext.Img'
    ],
    config: {
        layout: {
            type:"vbox",
            pack:"center",
            align:"center"
        },
        items: [
            {
                xtype: "image",
                src: "http://placehold.it/200x200",
                width: 200,
                height: 200
            },
            {
                xtype: "button",
                text: "Photo",
                handler: function() {
                    function success(image_uri) {
                        var img = Ext.ComponentQuery.query("image")[0];
                        img.setSrc(image_uri);
                    }
 
                    function fail(message) {
                        alert("Failed: " + message);
                    }
 
                    navigator.camera.getPicture(success, fail, 
                        {
                            quality: 50,
                            destinationType: navigator.camera.DestinationType.FILE_URI,
                            sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
                        }
                    );
                }
            }
        ]
    }
});

このビューでは200×200のイメージのプレースホルダー付きの単純なイメージコンポーネントを生成します。注 config.xmlに許可された原点としてplacehold.itを追加する必要があります。

<access origin="http://placehold.it*" />;

次にボタンハンドラーを追加して、Cordova CameraのAPIを呼び出します。もし現在はPhoneGapユーザーであれば、他のアプリケーションフレームワークで利用した、普通のAPIを利用することに気づくでしょう。

最後に、このアプリケーションをビルドする前に、PhoneGapアプリケーションにカメラプラグインを追加する必要があります。PhoneGap 3.0では、全てのエキストラライブラリ（GeoLocation, Camera, File,その他）はプラグインとして追加されます。これは次のコマンドを‘{application}/phonegap’ フォルダから実行して行います。

phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

さて、次を実行すればアプリケーションをビルドしてシミュレーターで動作させることが出来ます：

sencha app build -run native

プロジェクト全体を見たい人には、このデモを準備しましたので、ダウンロードしてシステムで解凍して下さい。そしてフォルダ内から次を実行します：

sencha app build -run native

iOSシミュレーターにいくつかのイメージをダウンロードするのを忘れないで下さい。Googleイメージを検索して、どのイメージでも、長押しをすればフォトライブラリに保存するオプションが出てきます。

まとめ

弊社ではこの機能についてわくわくしていますので、あなたも一緒にテンションが上がることを期待しています。PhoneGapは、モバイル市場でHTML5アプリケーションが競争できるという信念に完璧にフィットするようなリーダーシップとコミュニティを持っていると思います。アップデートされたチュートリアルやコツは我々のブログやSencha Vimeoのページをご覧ください！

Sencha Blog