目次


Bluemix、Watson、および Apache Cordova を利用してハイブリッド・モバイル・アプリを構築する

Comments

想像してみてください。あなたは素晴らしい Web アプリを完成させました。そのアプリは今までにない斬新なもので、チャットでも盛んに話題にされています。最高の気分ですよね。ただし、そのアプリはモバイル対応ではないため、アプリ・ストアでは販売されていません。これでは、スマートフォン・ユーザーとモバイル端末ユーザーという巨大な市場を見逃していることになります。あなたはアプリをモバイル対応にしなければならないことはわかっていますが、iOS には馴染みがなく、Swift や Objective-C の知識はありません。Windows Phone アプリどころか Android アプリを作成した経験もまったくありません。学ばなければならない知識とテクノロジーは山のようにあっても、そのための時間がないのです。もっと単純な解決策さえあったら…と途方に暮れるでしょうが、実のところ、その解決策はあります。

この記事では、既存の Web アプリを簡単にハイブリッド・モバイル・アプリに変換する方法を説明します。ハイブリッド・モバイル・アプリを作成するために使用するツールは、皆さんがすでに愛用している JavaScript、HTML5、および CSS です。これらのツールで作成したコードをネイティブ・コードのシン・レイヤー内にラップして、位置情報、加速度計、カメラ、連絡先などの端末の機能にアクセスできるようにします。ハイブリッド・モバイル・アプリは、iOS、Android、Windows Phone などのプラットフォーム上でネイティブに実行されます。もちろん、ハイブリッド・モバイル・アプリであれば、アプリ・ストアでも販売できます。

ただし、このチュートリアルはそこで止まりません。アプリをクラウド内でホストできるよう、IBM Bluemix 関連のリンクも記載します。Bluemix 上でアプリをホストすれば、ユーザー・ベースが大きくなってきても、Bluemix がそれに合わせて拡大するため、問題はありません。小さな規模から始めて、簡単にスケールアップすることができるのです。

最後に、アプリをレベルアップするために、IBM Watson で提供している数々のコグニティブ・サービスについて取り上げます。これらのサービスの動作は、Brewery Master アプリで確認できます。Bluemix 上でホストされているこのアプリは、同じく Bluemix 上に用意されている最先端の Watson サービスを多数利用しています。

アプリを実行するコードを入手する

ハイブリッド・アプリを作成するために必要なもの

: iOS 対応のアプリを作成するには、Mac および XCode 6 が必要です。アプリを iOS 端末で実行する予定の場合は、iOS Developer Program のメンバーシップも必要になります。

概要

このチュートリアルでは、ハイブリッド・モバイル・アプリを作成する方法を説明するために、Bluemix 上でホストされている Brewery Master という名前の既存の Web アプリを使用します。チュートリアルを読み終える頃には、Brewery Master を iOS 上や Android 上でネイティブに実行できるようになっています。Windows Phone 上で実行するには追加で少々調査していただく必要があります。

既存の Web アプリをお持ちであれば、Brewery Master を使うのではなく、そのアプリをハイブリッド・モバイルに変換してもかまいません。その場合、このチュートリアルに従って手順を進め、Brewer Master ソース・コードを扱う段階になったら、そのコードを独自のソース・コードで置き換えるだけのことです。最良の結果を得るためには、変換対象の Web アプリが、レスポンシブ・デザインを適用したものでなければなりません。つまり、さまざまな画面サイズに応じて動的にレイアウトが変更されるようになっている必要があります。

Brewery Master の概要

Brewery Master は、IBM Bluemix という PaaS (Platform-as-a-Service) プロバイダーでホストされています。Bluemix では、驚くほど簡単にアプリを作成できるようになっています。さらに、卓越したサービスを簡単にアプリに統合できるだけでなく、アプリをクラウド内でホストして、需要に合わせて容易にスケーリングすることができます。

Brewery Master は以下の 4 つの Bluemix サービスを利用し、Node.js をベースに稼働します。

これらのサービスはいずれも簡単に独自のアプリに統合することができます。このリンク先のページから、Bluemix の詳細を調べてください。

ステップ 1. Android および iOS 用のハイブリッド・モバイル・プロジェクトを作成して構成する

このセクションでは、Apache Cordova を使用してベース・プロジェクトを作成します。このプロジェクトを基に、iOS および Android に対応するハイブリッド Web アプリケーションを構成することになります。Apache Cordova は端末 API のセットであり、モバイル・アプリ開発者はこれらの API を使用して、JavaScript からネイティブ・モバイル端末の機能 (カメラ、加速度計など) にアクセスすることができます。Apache Cordova とさまざまな UI フレームワークを組み合わせることで、HTML、CSS、および JavaScript だけを使ってスマートフォン・アプリを開発できるようになります。

  1. Node.js をダウンロードしてインストールします。
  2. Node.js に同梱されている Node Package Manager (npm) を使用して、Apache Cordova コマンド・ライン・ツールをインストールします。
    npm install -g cordova
  3. ハイブリッド・モバイル・プロジェクトを作成します。
    cd $HOME cordova create CordovaBreweryMaster com.dimascio.brewery "Brewery Master"
  4. ハイブリッド・モバイル・プロジェクトを構成します。
    1. カレント・ディレクトリーを Cordova プロジェクト・ディレクトリーに変更します。
      cd CordovaBreweryMaster
    2. ハイブリッド・アプリをプラットフォーム上でネイティブに実行できるよう、対象のプラットフォームのサポートを追加します。以下に記載するコードには Windows Phone 用のコードも含まれていますが、このチュートリアルでは Windows Phone プラットフォームの場合の手順は説明しません。
      cordova platform add ios
      cordova platform add android
      cordova platform add wp8
    3. 対象のプラットフォームが追加されたことを確認します。
      cordova platform ls
    4. ネイティブのジオロケーション・サポートを追加します。
      cordova plugin add org.apache.cordova.geolocation
    5. プラグインが追加されたことを確認します。
      cordova plugin ls
  5. IBM DevOps Services からプロジェクトのソース・コードをダウンロードします。ダウンロードしたソース・コードには、iOS および Android 対応のハイブリッド・モバイル・アプリを作成できる、完全な Apache Cordova プロジェクトが含まれています。
    git clone https://username:password@hub.jazz.net/git/dimascio/CordovaBreweryMaster
    $HOME/git/CordovaBreweryMaster

    ここで、「username:password」は、DevOps Services 資格情報です。

  6. 新しく複製した git リポジトリー内の Brewery Master Web アプリのソースを、ローカル Cordova プロジェクトにコピーします。

    または、皆さん独自の Web アプリのソースを Cordova プロジェクトの www ディレクトリーにコピーします。

    cp -R $HOME/git/CordovaBreweryMaster/www $HOME/CordovaBreweryMaster/www
  7. 以下のコード・リスティングの内容を、プロジェクトのルート $HOME/CordovaBreweryMaster/ 内にある config.xml という名前のファイルに追加します。このファイルは、Brewery Master の Cordova 構成ファイルです。
    <?xml version='1.0' encoding='utf-8'?>
    <widget id="com.dimascio.brewery" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
       <name>Brewery Master</name>
       <description>
         Brewery Master - beer, cognitive style
       </description>
       <author email="cdimascio@gmail.com" href="https://brewerymaster.mybluemix.net">
         Carmine DiMascio
       </author>
       <content src="index.html"/>
       <access origin="*"/>
    
       <icon src="res/icon/logo.png"/>
    
       <platform name="ios">
         <!-- images are determined by width and height. The following are supported -->
         <splash src="res/icon/logo.png" width="320" height="480"/>
         <splash src="res/icon/logo.png" width="640" height="960"/>
         <splash src="res/icon/logo.png" width="768" height="1024"/>
         <splash src="res/icon/logo.png" width="1536" height="2048"/>
         <splash src="res/icon/logo.png" width="1024" height="768"/>
         <splash src="res/icon/logo.png" width="2048" height="1536"/>
         <splash src="res/icon/logo.png" width="640" height="1136"/>
         <splash src="res/icon/logo.png" width="750" height="1334"/>
         <splash src="res/icon/logo.png" width="1242" height="2208"/>
         <splash src="res/icon/logo.png" width="2208" height="1242"/>
       </platform>
    
       <preference name="BackupWebStorage" value="local"/>
       <preference name="permissions" value="none"/>
    </widget>

Cordova は、このファイルから提供される各種の要素を使用して、アプリのさまざまな特性 (アプリ名、説明、アイコン、端末の機能、環境設定など) を構成します。詳細については、このリンク先の Cordova の資料を参照してください。

ステップ 2. Android および iOS 対応のアプリを作成する

前のステップで、プロジェクトをセットアップして構成する作業は完了しました。次はハイブリッド・モバイル・アプリを作成する手順を説明します。始めに、Android および iOS 用のビルド環境をセットアップします。この作業を行う必要があるのは一度だけです。

Android 用のビルド環境を構成する

注: Intel x86 Emulator Accelerator (HAXM インストーラー) によって Android エミュレーターを高速化することができますが、このアクセラレーターは必須ではありません。

  1. このリンク先のページから Android SDK をダウンロードします。
  2. 任意の場所 (例: /path/to/my/android-sdk-platform) に $ANDROID_HOME を抽出します。
  3. $ANDROID_HOMEPATH 環境変数に追加します (例: export PATH=$PATH:$ANDROID_HOME/tools)。
  4. Android SDK Manager を起動します。
    $ANDROID_HOME/tools/android
  5. 以下の両方の画面に示されている、チェック・マークが付いた項目をすべて選択してから、「Install 1 package... (1 パッケージをインストール...)」をクリックします。

iOS 用のビルド環境を構成する

  1. アプリを iOS 端末で実行する予定の場合は、iOS Developer Program のメンバーになっていなければなりません。
  2. Xcode 6 をインストールします。

ハイブリッド・アプリをビルドする

  1. カレント・ディレクトリーをプロジェクト・ディレクトリーに変更します。
    cd $HOME/CordovaBreweryMaster
  2. 各プラットフォーム (iOS、Android、Windows Phone) 上でアプリをビルドします。
    cordova build ios
    cordova build android
    cordova build wp8

    ビルドの出力は、$HOME/CordovaBreweryMaster/platform/<プラットフォーム> に保管されます。

    ここで、<プラットフォーム> は ios、android、wp8 などの値になります。以降のセクションでは、カレント・ディレクトリーをこれらのプラットフォーム・ディレクトリーのそれぞれに変更してアプリを実行します。

Android および iOS 上でハイブリッド・モバイル・アプリを実行する

このセクションではアプリを実行するために、以下のツールを使用します。

  • iOS シミュレーター
  • Android 端末
  • Android エミュレーター

iOS シミュレーターをセットアップしてハイブリッド・アプリを実行する

  1. カレント・ディレクトリーを iOS プラットフォームに変更します。
    cd $HOME/CordovaBreweryMaster/platform/ios
  2. Xcode を起動し、Brewery Master.xcodeproj を開きます。
  3. iOS 端末 (例: iPhone 6) を選択します。
  4. 「Build and then run the current scheme (ビルドした後に現在のスキームを実行)」ボタンをクリックします。
  5. アプリが iOS シミュレーター内で実行中になります。いろいろと操作してテストしてください!

Android 端末でハイブリッド・アプリをセットアップして実行する

  1. 以下に示すようにカレント・ディレクトリーを変更します。
    cd $HOME/CordovaBreweryMaster/platform/android/ant-build
  2. MainActivity-debug.apk を Android 端末にコピーします。
  3. .apk をダブルクリックしてインストールします。
  4. Brewery Master を起動します。

Android エミュレーターをセットアップする

Android エミュレーターを使用すると簡単にアプリを実行できますが、このエミュレーターをセットアップするのは少々面倒な作業です。幸い、Android のビルド環境を構成する際に、その作業の大部分は済ませてあります。

  1. Android システム・イメージをダウンロードします。
    $ANDROID_HOME/tools/android sdk
  2. Android 仮想端末 (AVD) を作成します。
    $ANDROID_HOME/tools/android avd
  3. 「Device Definitions (端末の定義)」ボタンをクリックします。
  4. 端末 (例:「Nexus 5 」) を選択します。
  5. 「Create AVD... (AVD の作成...)」をクリックします。
  6. 「Target (ターゲット)」「CPU/ABI」「Skin (スキン)」の各フィールドが以下に示すように設定されていることを確認してから、「OK」をクリックします。次に表示される画面でも「OK」をクリックします。

Android エミュレーターでアプリケーションを実行する

  1. 以下のコマンドを実行して、Android エミュレーターを起動します。
    cd $HOME/CordovaBreweryMaster
    cordova build android
    ./platforms/android/cordova/run –emulator -nobuild
  2. アプリが起動するまで待ちます。アプリが起動するまでには時間がかかることがあります。
  3. アプリが起動すると、近隣にあるビール醸造所の一覧が表示されます。試しに、各醸造所のビールの一覧を表示して、「The Vibe (雰囲気)」を使って醸造所の雰囲気を調べたり、「Ask Watson (Watson に質問)」を使ってビールについて Watson に質問したりして、コグニティブ要素を探ってください。
  4. 以下に示す「The Vibe (雰囲気)」と「Ask Watson (Watson に質問)」の機能には、Bluemix に用意されている IBM Watson サービス (Watson Personality Insights および Watson Question and Answer) が利用されています。

    : Beer コーパスは Bluemix には用意されていません。Bluemix Watson Question and Answer サービスで現在利用できるのは、旅行分野と医療分野のコーパスです。

まとめ

これで、アプリは完成です。アプリが iOS および Android 上でネイティブに実行されるようになりました。しかも、Bluemix を利用してアプリをクラウド内で本格的に実行し、IBM Watson で提供しているコグニティブ・サービスをはじめとする幅広いサービスにアクセスできるようになりました。この後、どのような展開が待っているでしょうか。きっと、アプリは軌道に乗って大きく成長するでしょう。それでもご心配なく。皆さんはスケールアップと需要を満たすために必要な、Bluemix とツールを手にしています。


ダウンロード可能なリソース


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Mobile development, Web development
ArticleID=1037625
ArticleTitle=Bluemix、Watson、および Apache Cordova を利用してハイブリッド・モバイル・アプリを構築する
publish-date=09232016