© 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やその関連会社の米国およびその他の国における商標または登録商標です。
© 2015 IBM Corporation 3
Agenda
� Apache Cordovaとは
� Cordova と MFP の違い
�MFPが扱うCordovaについて
�CordovaとMFPのHybridアプリ開発の流れ
� Cordova Pluginを利⽤した開発
�iBeaconアプリを例に、Pluginの使い方・考慮点
© 2015 IBM Corporation 4
本セッションの位置づけ
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
© 2015 IBM Corporation 5
Apache CordovaとはApache Cordovaとは
© 2015 IBM Corporation 6
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)
© 2015 IBM Corporation 7
Cordova と MFP の違いCordova と MFP の違い
© 2015 IBM Corporation 8
提供する機能の範囲
MFPではCordovaがカバーするデバイス機能に加えサーバーと協調するための機能が提供されている
• サーバー連携(Push通知やAdapterコール)
• サーバーと連携したlocation baseの処理
• セキュリティ(サーバーアクセスに加えて、アプリケーション改ざん検知など)
• データの同期とオフライン保存
• など
© 2015 IBM Corporation 9
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バージョンが適用されるのに加えて、主要なプラグインのバージョンについても適切なバージョンが選択されている
© 2015 IBM Corporation 10
開発の流れ
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
© 2015 IBM Corporation 11
Cordova Pluginを利⽤した開発Cordova Pluginを利⽤した開発
© 2015 IBM Corporation 12
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
© 2015 IBM Corporation 13
Pluginの用意
利⽤できるCordova Pluginを探す.
ibeacon pluginを利⽤する
https://github.com/petermetz/cordova-plugin-ibeacon
Cordova Plugin を利⽤する場合は、公開されているままのPluginでは利⽤できないため、MFPで利⽤できるように考慮する必要がある
・ファイルの配置
・プラグインファイル(js)の読込み
・プラグイン実⾏に必要な設定 (Framework, permission, *.pinfo, AndroidManifest.xml など)
© 2015 IBM Corporation 14
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" ]
},
© 2015 IBM Corporation 15
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 内でロードされるため、明示的に読み込むための記述を追加する必要はない
© 2015 IBM Corporation 16
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
プラグインダウンロード後の内容
© 2015 IBM Corporation 17
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”>内を参照
© 2015 IBM Corporation 18
Pluginの配置 – MFP編 (3)
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の追加の追加の追加の追加
© 2015 IBM Corporation 19
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
マージ
© 2015 IBM Corporation 20
Pluginの配置 – MFP編 (4)
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/
© 2015 IBM Corporation 21
Pluginの配置 – MFP編 (5)
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>
これで全ての準備が整いました。
© 2015 IBM Corporation 22
(参考)Cordova Plugin: plugin.xml
Cordova Pluginにパッケージングされる plugin.xm には Nativeコード, JS Bridgeコードとは別に、Plugin の設定情報やXcode, AndroidManifest.xml への追加情報などが記載されている
<!-- Plugin source code: Core --><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の指定
© 2015 IBM Corporation 23
アプリケーションのビルド
アプリケーションを開発、ビルド
右クリック
アプリビルド後、Android / iPhone用のアプリを起動する
ibeaconの場合は実機が必要なため、実機に導入する。
© 2015 IBM Corporation 24
デモアプリ
店舗にショッピングに来たお客様が利用するO2O アプリ.
iBeaconを使い、商品の近くに到達すると 通知 される.
ibeaconCordova pluginを利用
© 2015 IBM Corporation 25
まとめ
Apache CordovaとMFPの違いの一つは、サーバー連携機能が提供されること
MFPではデバイス種別ごとに安定動作が確認できたCordovaバージョンを使っている
プロジェクトのディレクトリ構造にあわせてCordova Plugin を配置する必要がある
© 2015 IBM Corporation 26
© 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.