Google+ もご覧ください
ユーザーアイコン

ピックアップ

AppGyver Steroids - 必見!PhoneGapアプリ開発を高速化

AppGyver Steroids - 必見!PhoneGapアプリ開発を高速化

ネイティブとWebを組み合わせたアプリ、いわゆるハイブリッドアプリを開発する際に注目されているフレームワークがPhoneGap(Cordova)です。最近では特にWebViewのパフォーマンス、ハードウェアの性能が向上しているのでネイティブだけと比べても遜色なくなってきています。

そんなPhoneGapですが、開発に際してはコンパイルに時間がかかったり、実機への転送が面倒だったりと幾つかの問題も散見します。それらをまとめて解決してくれるフレームワークがAppGyver Steroidsになります。

AppGyver
AppGyver

PhoneGapアプリ開発を高速化するAppGyver Steroids、ネイティブアプリ開発者も注目のソフトウェアです。

インストールはシンプルにnpmで行います。nodeのバージョンは0.10系推奨となっています。

$ npm install steroids -g

インストールが終わったらsteroids loginを実行します。loginで分かる通り、AppGyverのアカウントが必要です(無料で取得できます)。また実際の開発に際しては特に情報が送られることはないようですが、クラウドを使った際に利用されるようです。

$ steroids login

            __   AppGyver           .__    .___
     ______/  |_  ___________  ____ |__| __| _/______
    /  ___\   ___/ __ \_  __ \/  _ \|  |/ __ |/  ___/
    \___ \ |  | \  ___/|  | \(  <_> |  / /_/ |\___ \
   /____  >|__|  \___  |__|   \____/|__\____ /____  >
        \/           \/                     \/    \/

25 Nov 09:04:17 - Starting login process
25 Nov 09:04:17 - The server has now been started on port 13303
25 Nov 09:04:17 - Opening authentication URL in the browser: https://accounts.appgyver.com/auth/appgyver_id/authorize?

ここでブラウザが立ち上がって認証を行えば完了です。

アプリを作る

ではまずはサンプルアプリを作成してみます。createオプションで新規作成されます。

$ steroids create myProject

            __   AppGyver           .__    .___
     ______/  |_  ___________  ____ |__| __| _/______
    /  ___\   ___/ __ \_  __ \/  _ \|  |/ __ |/  ___/
    \___ \ |  | \  ___/|  | \(  <_> |  / /_/ |\___ \
   /____  >|__|  \___  |__|   \____/|__\____ /____  >
        \/           \/                     \/    \/

Initializing Steroids project ... 
Initializing
  :
Running "steroids-cordova-merges" task



Done, without errors.

ファイルが幾つか作成されて完了となります。基本的にはPhoneGapなので、www以下を編集していくことになります。

ファイル構成。
ファイル構成。

QRコード生成

ここからがAppGyver Steroidsの面白さになります。まず最初にQRコードを生成します。

$ steroids connect

            __   AppGyver           .__    .___
     ______/  |_  ___________  ____ |__| __| _/______
    /  ___\   ___/ __ \_  __ \/  _ \|  |/ __ |/  ___/
    \___ \ |  | \  ___/|  | \(  <_> |  / /_/ |\___ \
   /____  >|__|  \___  |__|   \____/|__\____ /____  >
        \/           \/                     \/    \/

Initializing

Command-line options: --gruntfile=/path/to/grunt.js, --verbose

  :
25 Nov 09:08:25 - Waiting for the client to connect, scan the QR code visible in your browser ...

Hit [enter] to push updates, type `help` for usage
AppGyver Steroids command

そうするとWebブラウザが表示されて、QRコードが出ます。これをスマートフォン側で読み込む訳ですが、AppGyver Scannerという専用アプリがありますのでそれを使って行います。

QRコード表示
QRコード表示

汎用的なQRコードリーダーアプリを使った場合はアプリに切り替わります。

iOSアプリ
iOSアプリ

後は自動的にコンテンツが読み込まれてアプリが立ち上がります。AppGyver Scannerの中で立ち上がっているので、アプリ内でアプリが実行されているイメージかもしれません。

アプリ画面
アプリ画面

steroids connectを実行すると専用のプロンプトになった状態で待機入力になります。この状態でsim iosなどと入力するとiOSシミュレータが立ち上がります。

AppGyver Steroids command  sim ios

アプリ編集

後は通常通りアプリを開発していく訳ですが、作業が一段落したタイミングでpushコマンドを実行します。そうするとAppGyver Scannerが自動的にリロードして表示が最新のものに切り替わる仕組みになっています。

変更例
変更例

このpushは接続している全てのクライアントに対して適用されます。iPhone、iOSシミュレータなどでアプリを立ち上げていれば、それらが全てリロードされる仕組みになっています。開発から実機、シミュレータテストが高速化されます。

ネイティブの機能

基本はPhoneGapなので、ネイティブと組み合わせた使い方ももちろん可能です。例えばカメラを使う場合はこのようになります。

  function cameraGetPicture() {
    navigator.camera.getPicture(imageReceived, cameraFail, {
      quality: 100,
      destinationType: Camera.DestinationType.FILE_URI,
      correctOrientation: true,
      targetWidth: 600
    });
  }

steroidsでのオプションは次のようになっています。シミュレータの起動やQRコードの表示、更新時の再読み込みが指定できます。

AppGyver Steroids command  help

 Command          Shortcut      Description
------------------------------------------------------------------------------
 push             <enter>       Push code to connected devices

 sim <device>     s             Launch iOS Simulator; <device> can be:
                                 iphone_retina_3_5_inch, iphone_retina_4_inch
                                 ipad, ipad_retina

                                Optionally, append @<iOS-version> to launch with a specific iOS
                                version; e.g. ipad@5.1

 qr               -             Show the QR code for connecting devices

 edit             e             Launch editor (set in application.coffee), defaults to subl

 debug <path>     d             Open Safari debugger for matching path in URL location
                                Note: Enable Develop menu in: Safari -> Preferences -> Advanced

 quit             q             Exits connect. Also: exit


Hit [enter] to push updates, type `help` for usage

面白いところとしては、debugオプションを付けることで、Mac OSXのSafariを使ってインスペクタによるデバッグができることです。

デバッグウィンドウ。
デバッグウィンドウ。

クラウド

AppGyverではクラウドサービスも用意しています。これを使うとインターネット経由でのAppGyverアプリの配信ができるようになります。もちろんpushすれば各デバイスでのアップデートが可能です。Testflight以上に手軽で開発が高速化されると思われます。

既存のPhoneGapアプリでの利用

既に開発済みのPhoneGapアプリにAppGyver Steroidsを組み込む場合は一度AppGyver Steroidsでアプリを作成した上でwwwや設定ファイルを移動するというのが正しいやり方になるようです1

まとめ

AppGyverではPhoneGapを使ったハイブリッドアプリを多数開発しており、その中から生まれたニーズを組み上げて作られたのがAppGyver Steroidsになるようです。Webシステム開発並にトライ&エラーで開発を進めたい時に良さそうな仕組みだと思います。

パフォーマンスではネイティブには敵わないPhoneGapアプリですが、必要に応じてネイティブと組み合わせることで高いパフォーマンスと開発の柔軟性を備えたハイブリッドアプリが出来上がります。PhoneGapを知っている人もそうでない人も一度は触ってみる価値があるのではないでしょうか。

AppGyver

AppGyver/steroids


  1. AppGyver Academyより。 

Catch
タグ:

記事をリクエストする

関連記事

コメント