MobileFirst Platform Foundation ( 旧 Worklight)public.dhe.ibm.com/.../3_apache_cordova.pdf · Cordova ベースで開発したHybrid アプリを MFP で動かそうとする場合の考慮点

© 2015 IBM Corporation

MobileFirst Platform Foundation (旧 Worklight)ハイブリッド・アプリケーション開発セミナー

Apache Cordova2015年 4月 21日

日本IBM(株)日本IBMシステムズ・エンジニアリング(株)

© 2015 IBM Corporation 2

© Copyright IBM Corporation 2012. All rights reserved. The information contained in these materials is provided for informational purposes only, and is provided AS IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, these materials. Nothing contained in these materials is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. References in these materials to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in these materials may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. IBM, the IBM logo, Rational, the Rational logo, Telelogic, the Telelogic logo, and other IBM products and services are trademarks of the International Business Machines Corporation, in the United States, other countries or both. Other company, product, or service names may be trademarks or service marks of others.

ワークショップ、セッション、および資料は、IBMまたはセッション発表者によって準備され、それぞれ独⾃の⾒解を反映したものです。それらは情報提供の目的のみで提供されており、いかなる参加者に対しても法律的またはその他の指導や助⾔を意図したもの

ではなく、またそのような結果を⽣むものでもありません。本講演資料に含まれている情報については、完全性と正確性を期するよ

う努⼒しましたが、「現状のまま」提供され、明⽰または暗⽰にかかわらずいかなる保証も伴わないものとします。本講演資料また

はその他の資料の使⽤によって、あるいはその他の関連によって、いかなる損害が⽣じた場合も、IBMは責任を負わないものとします。本講演資料に含まれている内容は、IBMまたはそのサプライヤーやライセンス交付者からいかなる保証または表明を引きだすことを意図したものでも、IBMソフトウェアの使⽤を規定する適⽤ライセンス契約の条項を変更することを意図したものでもなく、またそのような結果を生むものでもありません。

本講演資料でIBM製品、プログラム、またはサービスに言及していても、IBMが営業活動を⾏っているすべての国でそれらが使⽤可能であることを暗⽰するものではありません。本講演資料で⾔及している製品リリース⽇付や製品機能は、市場機会またはその他の

要因に基づいてIBM独⾃の決定権をもっていつでも変更できるものとし、いかなる⽅法においても将来の製品または機能が使⽤可能になると確約することを意図したものではありません。本講演資料に含まれている内容は、参加者が開始する活動によって特定の販

売、売上高の向上、またはその他の結果が生じると述べる、または暗示することを意図したものでも、またそのような結果を生むも

のでもありません。パフォーマンスは、管理された環境において標準的なIBMベンチマークを使用した測定と予測に基づいています。ユーザーが経験する実際のスループットやパフォーマンスは、ユーザーのジョブ・ストリームにおけるマルチプログラミングの量、

⼊出⼒構成、ストレージ構成、および処理されるワークロードなどの考慮事項を含む、数多くの要因に応じて変化します。したがっ

て、個々のユーザーがここで述べられているものと同様の結果を得られると確約するものではありません。

記述されているすべてのお客様事例は、それらのお客様がどのようにIBM製品を使用したか、またそれらのお客様が達成した結果の実例として⽰されたものです。実際の環境コストおよびパフォーマンス特性は、お客様ごとに異なる場合があります。

IBM、IBM ロゴ、ibm.com、CICS、Tivoli、WebSphere、Zseriesは、世界の多くの国で登録されたInternational Business Machines Corporationの商標です。他の製品名およびサービス名等は、それぞれIBMまたは各社の商標である場合があります。現時点での IBM の商標リストについては、www.ibm.com/legal/copytrade.shtmlをご覧ください。

Linuxは、Linus Torvaldsの米国およびその他の国における登録商標です。Microsoft, Windows, Windows NT およびWindowsロゴはMicrosoft Corporationの米国およびその他の国における商標です。UNIXはThe Open Groupの米国およびその他の国における登録商標です。JavaおよびすべてのJava関連の商標およびロゴはOracleやその関連会社の米国およびその他の国における商標または登録商標です。


Agenda

� Apache Cordovaとは

� Cordova と MFP の違い

�MFPが扱うCordovaについて

�CordovaとMFPのHybridアプリ開発の流れ

� Cordova Pluginを利⽤した開発

�iBeaconアプリを例に、Pluginの使い方・考慮点


本セッションの位置づけ

Cordovaベースで開発したHybridアプリをMFPで動かそうとする場合の考慮点

・CordovaとMFPの位置づけ

・Corodva Pluginを例に、MFP Hybridアプリに組み込む際の手順を順を追って説明

Native App

Custom Hybrid(cordova)

MFPHybrid App

1. goto hybrid from native

2. goto MFP hybrid from cordova hybrid

Hybrid App UI : 30min

Cordova & MFP App : 30min


Apache CordovaとはApache Cordovaとは


Apache Cordovaとは

Hybridアプリ（HTML,JS,CSSを使って開発したモバイルアプリ）を開発するためのプラットフォーム。WebView と Native間の仲介層を提供し、Native機能の利用を容易にするためのPluginインタフェースなどを提供している

2015年4月現在で、最新バージョンは 4.0.0

サポートするプラットフォーム: Android , iOS, Windows Phone 8, Windows, BlackBerry, Firefox OS など

サポート状況: http://cordova.apache.org/docs/en/4.0.0/guide_support_index.md.html#Platform%20Support

$ cordova create myapp$ cd myapp$ cordova platform add ios$ cordova build ios$ cordova run ios

基本操作はコマンドラインから実施

$ cordova plugin search bar codecom.phonegap.plugins.barcodescanner - You can use the BarcodeScann …

Pluginの検索

Plugins Registry(over 900 plugins)


Cordova と MFP の違いCordova と MFP の違い


提供する機能の範囲

MFPではCordovaがカバーするデバイス機能に加えサーバーと協調するための機能が提供されている

• サーバー連携（Push通知やAdapterコール）

• サーバーと連携したlocation baseの処理

• セキュリティ（サーバーアクセスに加えて、アプリケーション改ざん検知など）

• データの同期とオフライン保存

• など


MFPが扱うCordovaについて

MFPでは以下のバージョンのCordovaが動作している

• cordova-android: 3.6.4

• cordova-blackberry10: 3.6.3

• cordova-ios: 3.7.0

• cordova-windows: 3.7.1

• cordova-wp8: 3.7.0

動作確認を行ったうえで採用するため、Cordovaの最新のバージョンではない

また、プラットフォーム毎に動作確認済みのCordovaバージョンが適用されるのに加えて、主要なプラグインのバージョンについても適切なバージョンが選択されている


開発の流れ

Cordova, MFP CLIによるコマンドラインからの開発の流れの比較

プロジェクトの作成から、エミュレーター、実機へのインストールまでの流れ

流れ概要流れ概要流れ概要流れ概要 Cordova MFP CLI 備考備考備考備考

プロジェクト作成 cordova create mfp create

アプリ共通コードの開発 wwwディレクトリ common ディレクトリ

エディタ等による開発

プラットフォームの追加 cordova platform add ios

mfp add environment ios

Pluginの追加 cordova plugin add org.example.plugin

- MFPではプラグイン追加コマンドは使えない

(利用方法を後述します)

Adapterの追加 - mfp add adapter <AdapterName> -type sql

ビルド cordova build ios cd app/iphone ; mfp build

デプロイ - mfp deploy


Cordova Pluginを利⽤した開発Cordova Pluginを利⽤した開発


Cordova Pluginとは

実行するNative CodeとWeb Viewから呼び出すJavascdript Pluginをひとまとめにしたもので、以下の要素からなる。

Webview

HTML CSS

JS

JavascriptInterface

UIWebViewDelegate

Screen

NativeCode

NativeCode

fnA()

android iOS Windows

shouldStartLoadWithRequest

appurl://fnA

Apache Cordova , MFP

NativeCode

WebViewControl

notify()

window.external.notify()

JSHybridアプリケーションのJavascriptとして読み込み、Native機能実行のインターフェースを提供する

NativeCode

OSやデバイス固有の機能を実装したNativeコード郡(Java, Objective-C, Swift..)

plugin.xml

pluginファイルの配置場所や各種プラットフォーム毎のファイル設定などの処理が記述される

JS


Pluginの用意

利⽤できるCordova Pluginを探す.

ibeacon pluginを利⽤する

https://github.com/petermetz/cordova-plugin-ibeacon

Cordova Plugin を利⽤する場合は、公開されているままのPluginでは利⽤できないため、MFPで利⽤できるように考慮する必要がある

・ファイルの配置

・プラグインファイル(js)の読込み

・プラグイン実⾏に必要な設定 (Framework, permission, *.pinfo, AndroidManifest.xml など）


Pluginの配置 – Cordova編

Cordovaの場合

コマンドラインからPluginをセットアップ

$ cordova plugin add https://github.com/petermetz/cordova-plugin-ibeacon.git

$ ls plugins/com.unarin.cordova.beaconfetch.jsonios.json

Pluginのリストに自動的に追加されているplatforms/ios/www/cordova_plugins.js{

"file": "plugins/com.unarin.cordova.beacon/www/LocationManager.js", "id": "com.unarin.cordova.beacon.LocationManager","merges": [

"cordova.plugins" ]

},


Pluginの配置 – Cordova編 (2)

Cordovaの場合

$ ls platforms/ios/HelloCordova/Plugins/com.unarin.cordova.beacon/AppDelegate+CDVLocationManager.h CDVLocationManager.h LMLogger.hAppDelegate+CDVLocationManager.m CDVLocationManager.m LMLogger.m

$ ls platforms/ios/www/plugins/com.unarin.cordova.beacon/www/Delegate.js LocationManager.js Regions.js lib model

$ ls platforms/android/src/com/unarin/cordova/beacon/IBeaconServiceNotifier.java ILocationManagerCommand.java LocationManager.java PausableThreadPoolExecutor.java

$ ls platforms/android/assets/www/plugins/com.unarin.cordova.beacon/www/Delegate.js LocationManager.js Regions.js lib model

Platform別のPluginファイルも配置される

iOS

Android

また、Plugin用の javascript は HTMLでロードされる cordova.js 内でロードされるため、明示的に読み込むための記述を追加する必要はない


Pluginの配置 – MFP編

MFPの場合

コマンドラインからPluginをインストールすることができないため、pluginファイルをダウンロードした後、必要なファイルをコピーする

$ ls -RF cordova-plugin-ibeaconCHANGELOG.md LICENSE README.md libs/ plugin.xml src/ test/www/

cordova-plugin-ibeacon/libs/android:altbeacon.jar

cordova-plugin-ibeacon/src/android:IBeaconServiceNotifier.java LocationManager.javaILocationManagerCommand.java PausableThreadPoolExecutor.java

cordova-plugin-ibeacon/src/ios:AppDelegate+CDVLocationManager.h CDVLocationManager.h LMLogger.hAppDelegate+CDVLocationManager.m CDVLocationManager.m LMLogger.m

cordova-plugin-ibeacon/www:Delegate.js LocationManager.js Regions.js lib/ model/

Android用Native code

iOS用Native code

js code

プラグインダウンロード後の内容


Pluginの配置 – MFP編 (2)

MFPの場合：Android

1. Plugin (Native Code) ,Android の Javaファイルを配置する2. package 名に従いディレクトリを作成する

cordova-plugin-ibeacon/libs/android:altbeacon.jar

cordova-plugin-ibeacon/src/android:IBeaconServiceNotifier.java LocationManager.javaILocationManagerCommand.java PausableThreadPoolExecutor.java

AndroidManifest.xml への追加への追加への追加への追加

-uses-permission (bluetooth取得のためのパーミッション)-receiver, service の追加pluginファイル内の plugin.xml <platform name=“android”>内を参照



MFPの場合: iOS

1. Plugin (Native Code) ,iOS の *.h, *.m ファイルを配置する2. iOSのファイルは Xcode 上で追加する3. AppDelegateをマージする4. Bluetooth.frameworkを追加する

cordova-plugin-ibeacon/src/ios:CDVLocationManager.h LMLogger.h

CDVLocationManager.m LMLogger.m

※以下のファイルはAppDelegateファイルと置き換える

or マージする必要があります

-AppDelegate+CDVLocationManager.h-AppDelegate+CDVLocationManager.m（マージ方法は後述）

Bluetooth.frameworkの追加の追加の追加の追加


Pluinの配置 – MFP編(3) iOS AppDelegateのマージ

AppDelegateファイルをマージします= beaconApp.h = (ファイル名はアプリ名+.h)#import "WLAppDelegate.h"#import "WL.h"

@interface MyAppDelegate : WLAppDelegate <WLInitWebFrameworkDelegate> {

}

@property UIBackgroundTaskIdentifier backgroundTaskIdentifier;- (BOOL) xxx_application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions;@end

AppDelegate+CDVLocationManager.h

マージ

= beaconApp.m = (ファイル名はアプリ名+.m)#import "beaconApp.h"#import "WLWebFrameworkInitResult.h"#import "Cordova/CDVViewController.h"

#import <objc/runtime.h>

@implementation MyAppDelegate

…

+ (void)load {static dispatch_once_t onceToken;

…- (void) requestMoreBackgroundExecutionTime {

UIApplication *application = [UIApplication sharedApplication];

self.backgroundTaskIdentifier = [application beginBackgroundTaskWithExpirationHandler:^{self.backgroundTaskIdentifier = UIBackgroundTaskInvalid;

}];}@end

AppDelegate+CDVLocationManager.m

マージ



MFPの場合:plugin js

1. Plugin (JS Code) *.js を配置するplugins ディレクトリを作成するとpluginの管理とアプリコードを分離できます

cordova.js 経由で読み込まれないため、コードを追加する必要があります。“plugins/com.unarin.cordova.beacon/www/LocationManager.js”これはcordova.js が自動的に require 構文を付加する処理を手動で行う必要があるためです。

cordova-plugin-ibeacon/www:Delegate.js LocationManager.js Regions.js lib/ model/



MFPの場合:plugin js

cordova.js 経由で読み込まれないため、コードを追加する必要があります。“plugins/com.unarin.cordova.beacon/www/LocationManager.js”

Cordovaの場合、ビルド後にPlugin 用の js ファイルの先頭に以下の構文が付与されます。cordova.define("com.unarin.cordova.beacon.LocationManager", function(require, exports, module) {

…

LocationManager.jsに上記構文を追記します。（コードの最後もfunctionを”}” で閉じてください）その他のjsファイルについてもコードを追加します。

index.html ファイルから上記のjavascriptを全て読み込みます。plugin.xml に記載されている config.xml への記述を nativeフォルダ下のconfig.xmlに追記します。例)<config-file parent="/*" target="config.xml"><feature name="LocationManager"><param name="ios-package" value="CDVLocationManager"/>

</feature></config-file>

これで全ての準備が整いました。


（参考）Cordova Plugin: plugin.xml

Cordova Pluginにパッケージングされる plugin.xm には Nativeコード, JS Bridgeコードとは別に、Plugin の設定情報やXcode, AndroidManifest.xml への追加情報などが記載されている

<js-module name="LocationManager" src="www/LocationManager.js">

<merges target="cordova.plugins"/></js-module>

<platform name="ios"><config-file parent="/*" target="config.xml">

<feature name="LocationManager"><param name="ios-package" value="CDVLocationManager"/>

</feature></config-file>

<config-file target="*-Info.plist" parent="NSLocationAlwaysUsageDescription"><string>This app would like to scan for iBeacons even when in the background.</string>

</config-file>

<header-file src="src/ios/CDVLocationManager.h"/>source-file src="src/ios/CDVLocationManager.m"/>

<framework src="CoreBluetooth.framework" /><framework src="CoreLocation.framework" />

ibeacon pluginの例の例の例の例 (ios)

platformの記述

plugin jsの読込, 読込方の指定ここでは cordova.plugins下にオブジェ

クトとして登録することを指示

cordovaのconfig.xml へ追加する内容の記述

*-info.plist への追加項目の指定

Plugin (native) コードの指定

追加するframeworkの指定


アプリケーションのビルド

アプリケーションを開発、ビルド

右クリック

アプリビルド後、Android / iPhone用のアプリを起動する

ibeaconの場合は実機が必要なため、実機に導入する。


デモアプリ

店舗にショッピングに来たお客様が利用するO2O アプリ.

iBeaconを使い、商品の近くに到達すると通知される.

ibeaconCordova pluginを利用


まとめ

Apache CordovaとMFPの違いの一つは、サーバー連携機能が提供されること

MFPではデバイス種別ごとに安定動作が確認できたCordovaバージョンを使っている

プロジェクトのディレクトリ構造にあわせてCordova Plugin を配置する必要がある


© Copyright IBM Corporation 2012. All rights reserved. The information contained in these materials is provided for informational purposes only, and is provided AS IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, these materials. Nothing contained in these materials is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. References in these materials to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in these materials may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. IBM, the IBM logo, Rational, the Rational logo, Telelogic, the Telelogic logo, and other IBM products and services are trademarks of the International Business Machines Corporation, in the United States, other countries or both. Other company, product, or service names may be trademarks or service marks of others.

Documents

MobileFirst Platform Foundation ( 旧 Worklight)public.dhe.ibm.com/.../3_apache_cordova.pdf · Cordova ベースで開発したHybrid アプリを MFP で動かそうとする場合の考慮点