Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Cordova利用アプリ開発経験談
2014/06/10	

@korodroid(神原 健一)
Cordova勉強会
2
自己紹介
l 神原 健一 (@korodroid)
l モバイル関連活動
l 国内外での講演活動
•Droidcon Amsterdam 2013
•Droidcon Paris 2013
•Droidcon London 2012
...
アジェンダ
3
!
1. アプリ紹介	

2. Cordova適用例
4
導入
クロスプラットフォーム対応アプリを開発
Android iOS FirefoxOS Tizen
アプリ紹介
5
XTranslator

!
• 翻訳アプリ	

• 音声入力	

• 音声出力	

• 端末シェイク翻訳
6
クロスプラットフォーム開発
SYSTEM_UI_FLAG_IMMERSIVE
1. ユーザインタフェース

2. ビジネスロジック
※それぞれ考慮すべきポイントは大量にありますが、

 Cordova関連に特化してお話します。
FirefoxOS	

App
Tizen	

App
Wrapping
7
アプリパッケージング・配布
Wrapping
.html .css .js
Android	

App
iOS	

App
Wrapping Wrapping
Cor...
!
!
FirefoxOS	

App
!
!
Tizen	

App
!
!
Android	

App
!
!
iOS	

App 8
Java ScriptとNative実装をつなぐブリッジ
.html .css .js
Native N...
9
Cordova:Features
多くのAPIをサポート
Storage
Notification
Network
Media
Geolocation
File
Contacts
Compass
Accelerometer
Camera
10
Cordova:Problem?
サポート・未サポートAPIが存在
Storage
Notification
Network
Media
Geolocation
File
Contacts
Compass
Accelerometer
Cam...
11
Cordova:Solution 1
ライブラリの再利用
Cordova Plugins
12
Cordova:Solution 2
世に存在しないもの -> オリジナルライブラリ
.java
Android App
.js
config	

.xml
Toast Plugin
.js
13
Cordova:Solution 2
ToastCreator.prototype.showToast =
function(successCallback, errorCallback, text) {
return cordova.e...
14
Cordova:Solution 2
// The case of non-input text	

if (value == "") {	

ToastCreator.prototype.showToast(showToastSucce...
15
Web & Hardware Collaboration
Webベースアプリからハードウェア制御も可能
おわり
•Facebook:http://fb.com/kanbara.kenichi	

•Google+:+Kenichi Kambara	

•LinkedIn:http://www.linkedin.com/in/korodroid	
...
Upcoming SlideShare
Loading in …5
×

Cordova利用アプリ開発経験談

1,463 views

Published on

Cordova

Published in: Technology, Education
  • Hello there! Get Your Professional Job-Winning Resume Here! http://bit.ly/topresum
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Cordova利用アプリ開発経験談

  1. 1. Cordova利用アプリ開発経験談 2014/06/10 @korodroid(神原 健一) Cordova勉強会
  2. 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. アジェンダ 3 ! 1. アプリ紹介 2. Cordova適用例
  4. 4. 4 導入 クロスプラットフォーム対応アプリを開発 Android iOS FirefoxOS Tizen
  5. 5. アプリ紹介 5 XTranslator
 ! • 翻訳アプリ • 音声入力 • 音声出力 • 端末シェイク翻訳
  6. 6. 6 クロスプラットフォーム開発 SYSTEM_UI_FLAG_IMMERSIVE 1. ユーザインタフェース
 2. ビジネスロジック ※それぞれ考慮すべきポイントは大量にありますが、
  Cordova関連に特化してお話します。
  7. 7. FirefoxOS App Tizen App Wrapping 7 アプリパッケージング・配布 Wrapping .html .css .js Android App iOS App Wrapping Wrapping Cordovaを用いたラッピング
  8. 8. ! ! FirefoxOS App ! ! Tizen App ! ! Android App ! ! iOS App 8 Java ScriptとNative実装をつなぐブリッジ .html .css .js Native Native Native Cordova Native
  9. 9. 9 Cordova:Features 多くのAPIをサポート Storage Notification Network Media Geolocation File Contacts Compass Accelerometer Camera
  10. 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. 11 Cordova:Solution 1 ライブラリの再利用 Cordova Plugins
  12. 12. 12 Cordova:Solution 2 世に存在しないもの -> オリジナルライブラリ .java Android App .js config .xml Toast Plugin .js
  13. 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. 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. 15 Web & Hardware Collaboration Webベースアプリからハードウェア制御も可能
  16. 16. おわり •Facebook:http://fb.com/kanbara.kenichi •Google+:+Kenichi Kambara •LinkedIn:http://www.linkedin.com/in/korodroid •Twitter:@korodroid ご清聴ありがとうございました。 (執筆、講演依頼などのお話がございましたら、
 ご連絡をお願い致します。)

×