Recommended
More Related Content
What's hot
What's hot (20)
Similar to CordovaでAngularJSアプリ開発
Similar to CordovaでAngularJSアプリ開発 (20)
More from アシアル株式会社
More from アシアル株式会社 (20)
CordovaでAngularJSアプリ開発
- 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提供が可能
- 7. SPA普及のカギはフレームワーク ブラウザーの整備 HTML5関連APIの整備（pushStateなど） JavaScriptエンジンの高速化（JITコンパイル、最適化処理など） ページ遷移アニメーション等の最適化 JSライブラリ・フレームワークの普及 データバインディング テンプレート ノウハウの蓄積
- 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リファレンス
- 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
- 21. UIコンポーネント用ライブラリ Cordova向けモバイルUIライブラリー AngularJSのモジュールとして提供 さまざまなコンポーネントをディレクティブで 提供＋画面遷移などのUIで実装
- 22. ディレクティブでHTMLを記述
- 23. 基本コンポーネント Master-Detail スライディング メニュー タブバースプリットビュー
- 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. 画面のサンプルパターン
- 33. ありがとうございました。