Cordova

1. Cordova利用アプリ開発経験談
2014/06/10
@korodroid（神原 健一）
Cordova勉強会

2. 2
自己紹介
l 神原 健一 (@korodroid)
l モバイル関連活動
l 国内外での講演活動
•Droidcon Amsterdam 2013
•Droidcon Paris 2013
•Droidcon London 2012
•Smartphone & Tablet 2014 Spring Tokyo
•DevSummit 2013 Summer
l 書籍執筆
•ブログ「Mobile Dev Blog」
•NTTソフトウェア（株）所属
•テクニカルプロフェッショナル(Android)

3. アジェンダ
3
!
1. アプリ紹介
2. Cordova適用例

4. 4
導入
クロスプラットフォーム対応アプリを開発
Android iOS FirefoxOS Tizen

5. アプリ紹介
5
XTranslator
!
• 翻訳アプリ
• 音声入力
• 音声出力
• 端末シェイク翻訳

6. 6
クロスプラットフォーム開発
SYSTEM_UI_FLAG_IMMERSIVE
1. ユーザインタフェース
2. ビジネスロジック
※それぞれ考慮すべきポイントは大量にありますが、
Cordova関連に特化してお話します。

7. FirefoxOS
App
Tizen
App
Wrapping
7
アプリパッケージング・配布
Wrapping
.html .css .js
Android
App
iOS
App
Wrapping Wrapping
Cordovaを用いたラッピング

8. !
!
FirefoxOS
App
!
!
Tizen
App
!
!
Android
App
!
!
iOS
App 8
Java ScriptとNative実装をつなぐブリッジ
.html .css .js
Native Native Native
Cordova
Native

9. 9
Cordova：Features
多くのAPIをサポート
Storage
Notification
Network
Media
Geolocation
File
Contacts
Compass
Accelerometer
Camera

10. 10
Cordova：Problem?
サポート・未サポートAPIが存在
Storage
Notification
Network
Media
Geolocation
File
Contacts
Compass
Accelerometer
Camera
Basic Features
Non-Supported Features
Voice Recognition TextToSpeech …

11. 11
Cordova：Solution 1
ライブラリの再利用
Cordova Plugins

12. 12
Cordova：Solution 2
世に存在しないもの -> オリジナルライブラリ
.java
Android App
.js
config
.xml
Toast Plugin
.js

13. 13
Cordova：Solution 2
ToastCreator.prototype.showToast =
function(successCallback, errorCallback, text) {
return cordova.exec(successCallback, errorCallback,
"ToastCreator", "showToast", [text]);
};
public class ToastCreator extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args,
CallbackContext callbackContext) {
Boolean isValidAction = true;
if ("showToast".equals(action)) {
Toast.makeText(cordova.getActivity(),
args.getString(0), Toast.LENGTH_SHORT).show();
}
return isValidAction;
}
}
Toast Plugin
.js
.java

14. 14
Cordova：Solution 2
// The case of non-input text
if (value == "") {
ToastCreator.prototype.showToast(showToastSuccess,
showToastFail, 'No Text. Please input text.');
}
return;
}
...
<!-- Toast Plugin -->
<feature name="ToastCreator">
<param name="android-package"
value="org.iplatform.xos.phonegap.ToastCreator"/>
</feature>
Android App
.js
config
.xml
Toast Plugin

15. 15
Web & Hardware Collaboration
Webベースアプリからハードウェア制御も可能

16. おわり
•Facebook:http://fb.com/kanbara.kenichi
•Google+:+Kenichi Kambara
•LinkedIn:http://www.linkedin.com/in/korodroid
•Twitter:@korodroid
ご清聴ありがとうございました。
（執筆、講演依頼などのお話がございましたら、
ご連絡をお願い致します。）