CordovaでAngularJSアプリ開発

1. CORDOVAでANGULARJSアプリ開発 CORDOVAユーザー会/ アシアル株式会社田中正裕

2. 自己紹介 » 田中正裕 » アシアル株式会社所属 » Twitter: @massie » 職務: CEO (Chief ExectiveEngineering Officer) » HTML5Expert.jpエキスパート » Cordovaユーザー会、発起人

3. 本日のアジェンダ  Single Page Appの紹介  AngularJSの紹介  Cordovaと使うAngularJS  ngCordova  Onsen UI

4. SPAとは？普通のアプリ SPAのアプリ index.html page2.html page3.html page4.html page5.html page6.html Aタグなどのリンクを通じて遷移画面１画面２画面３画面４画面５画面６ index.html AJAXなどで画面を切り替えながら遷移

5. SPAのメリットユーザーエクスペリエンスの向上  画面遷移時に「真っ白なページ」の状態にならない  画面切り替えの読み込み速度が早く  ページを部分的に更新していくことが可能よりネイティブアプリに近いUI提供が可能

6. SPAアプリの例：OFFICE ONLINE

7. SPA普及のカギはフレームワーク  ブラウザーの整備  HTML5関連APIの整備（pushStateなど）  JavaScriptエンジンの高速化（JITコンパイル、最適化処理など）  ページ遷移アニメーション等の最適化  JSライブラリ・フレームワークの普及  データバインディング  テンプレート  ノウハウの蓄積

8. SPAで利用されるフレームワーク SPAフレームワークで使えるフレームワークは無数にある。

9. angularjs.org

10. ANGULARJSの特徴  HTMLを拡張してアプリを記述  SPA開発に最適化  Cordovaでも実績多数  さまざまなサードーパーティ製モジュール

11. HTML ENHANCED FOR WEB APPS <html ng-app="myapp"> <head> <script src="angular.js"></script> </head> <body ng-controller="myctrl"> <p>{{content}}</p> </body> </html>

12. ANGULARJSの主な特徴ディレクティブデータバインディングDIコンテナー <html ng-app="myapp"> <body ng-controller="myctrl"> <button ng-click="handler()"> <my-element>Hoge</my-element> <p>{{contents}}</p> <p>{{contents|filter}}</p> module.factory("MyClass", function() { return new { num: "100" }; }); module.factory("AnotherClass", function(MyClass) { return MyClass.num + 200; }); AngularJSがHTML構文を拡張テンプレート変数を HTML内に埋め込みオブジェクト指向開発他にも様々なディレクティブ独自で作ることも可能コントローラーと連携 2-way Data Binding

13. 学習リソース AngularJS公式サイト公式動画ドットインストールAngularJSリファレンス

14. Cordovaで使うAngularJS ng-cordova Onsen UI

15. ng-cordova

16. NGCORDOVA  Drifty社が中心となり開発（Ionic Frameworkの作者でもある）  Cordova APIをAngularJSモジュールとしてラッピングしたもの  よりAngularJS風にAPIを呼び出すことができる  AngularJSアプリへの組み込みは下記の通り // ngCordovaをモジュールとして組み込み angular.module("myapp", ["ngCordova"]);

17. 例：カメラAPIの呼び出し module.controller('PictureCtrl', function($scope, $cordovaCamera) { var options = { destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: true }; $cordovaCamera.getPicture(options) .then(function(imageData) { // 成功 }, function(err) { // エラーが発生 }); }); var options = { destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: true }; navigator.camera.getPicture(function(imageData) { // 成功 }, function(err) { // エラーが発生 }, options); ngCordovaを使った場合通常のCordova API

18. 対応プラグイン CordovaのもつコアAPI（カメラなど）に加えて、様々なサードパーティ製プラグインもサポート  CordovaのコアAPI  AdMob  Barcode Scanner  Background Geolocation  Calendar  Clipboard  DatePicker  Facebook  Flashlight  Google Analytics  Keyboard  Keychain  NativeAudio  OAuth  Pin Dialog  Preferences  Printer  Progress Indicator  Push Notifications  Social Sharing  Spinner Dialog  SQLite  Toast  Touch ID  Zip

19. 詳細情報 http://ngcordova.com/

20. http://ja.onsen.io/

21. UIコンポーネント用ライブラリ  Cordova向けモバイルUIライブラリー  AngularJSのモジュールとして提供  さまざまなコンポーネントをディレクティブで提供＋画面遷移などのUIで実装

22. ディレクティブでHTMLを記述

23. 基本コンポーネント Master-Detail スライディングメニュータブバースプリットビュー

24. その他のコンポーネントアラートダイアログポップオーバーリストカルーセルダイアログボタン

25. コンポーネント一覧

26. CORDOVA用の便利機能  戻るボタンのカスタマイズ  プラットフォームや画面向きの判定  ソフトウェアキーボードの対応  ジェスチャーの対応

27. CORDOVA用の便利機能  戻るボタンのカスタマイズ ons.setDefaultDeviceBackButtonListener(function() { if (navigator.notification.confirm("本当に閉じてもいいですか？", function(index) { if (index == 1) { // OKボタンが押された navigator.app.exitApp(); // アプリを閉じる } } )); });

28. CORDOVA用の便利機能  プラットフォームや画面向きの判定 <div> <div ons-if-platform="ios"> iOS限定の内容 </div> <div ons-if-orientation="portrait"> 縦画面でないと表示しない部分 </div> </div>

29. CORDOVA用の便利機能  ソフトウェアキーボードの対応 <div ons-keyboard-active> キーボードが表示されている時に表示されるコンテンツです。 </div> <div ons-keyboard-inactive> キーボードが隠れている時に表示されるコンテンツです。 </div>

30. CORDOVA用の便利機能  ジェスチャーの対応 <ons-gesture-detector> <div id="detect-area" style="width: 100px; height: 100px;"> ここをスワイプ </div> </ons-gesture-detector> <script> $(document).on('swipeleft', '#detect-area', function() { console.log("左スワイプが検知されました"); }) </script>

31. 画面のサンプルパターン

32. 詳細情報 http://ja.onsen.io/

33. ありがとうございました。

http://akiyoko.hatenablog.jp	104
https://twitter.com	94

SlideShare for iOS

Views

Actions

Embeds 197

Report content

Transcript