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でANGULARJSアプリ開発 
CORDOVAユーザー会/ アシアル株式会社田中正裕
自己紹介 
» 田中正裕 
» アシアル株式会社所属 
» Twitter: @massie 
» 職務: CEO (Chief ExectiveEngineering Officer) 
» HTML5Expert.jpエキスパート 
» C...
本日のアジェンダ 
 Single Page Appの紹介 
 AngularJSの紹介 
 Cordovaと使うAngularJS 
 ngCordova 
 Onsen UI
SPAとは? 
普通のアプリ 
SPAのアプリ 
index.html page2.html page3.html page4.html page5.html page6.html 
Aタグなどのリンクを通じて遷移 
画面1 画面2 画面3 画...
SPAのメリット 
ユーザーエクスペリエンスの向上 
 画面遷移時に「真っ白なページ」の状態にならない 
 画面切り替えの読み込み速度が早く 
 ページを部分的に更新していくことが可能 
よりネイティブアプリに近いUI提供が可能
SPAアプリの例:OFFICE ONLINE
SPA普及のカギはフレームワーク 
 ブラウザーの整備 
 HTML5関連APIの整備(pushStateなど) 
 JavaScriptエンジンの高速化(JITコンパイル、最適化処理など) 
 ページ遷移アニメーション等の最適化 
...
SPAで利用されるフレームワーク 
SPAフレームワークで使えるフレームワークは無数にある。
angularjs.org
ANGULARJSの特徴 
 HTMLを拡張してアプリを記述 
 SPA開発に最適化 
 Cordovaでも実績多数 
 さまざまなサードーパーティ製モジュール
HTML ENHANCED FOR WEB APPS 
<html ng-app="myapp"> 
<head> 
<script src="angular.js"></script> 
</head> 
<body ng-controlle...
ANGULARJSの主な特徴 
ディレクティブデータバインディングDIコンテナー 
<html ng-app="myapp"> 
<body ng-controller="myctrl"> 
<button ng-click="handler(...
学習リソース 
AngularJS公式サイト 
公式動画 
ドットインストールAngularJSリファレンス
Cordovaで使うAngularJS 
ng-cordova Onsen UI
ng-cordova
NGCORDOVA 
 Drifty社が中心となり開発(Ionic Frameworkの作者でもある) 
 Cordova APIをAngularJSモジュールとしてラッピングしたもの 
 よりAngularJS風にAPIを呼び出すことが...
例:カメラAPIの呼び出し 
module.controller('PictureCtrl', function($scope, 
$cordovaCamera) { 
var options = { 
destinationType: 
Ca...
対応プラグイン 
CordovaのもつコアAPI(カメラなど)に加えて、様々なサードパーティ製プラグインもサポート 
 CordovaのコアAPI 
 AdMob 
 Barcode Scanner 
 Background Geolo...
詳細情報 
http://ngcordova.com/
http://ja.onsen.io/
UIコンポーネント用ライブラリ 
 Cordova向けモバイルUIライブラリー 
 AngularJSのモジュールとして提供 
 さまざまなコンポーネントをディレクティブで 
提供+画面遷移などのUIで実装
ディレクティブでHTMLを記述
基本コンポーネント 
Master-Detail スライディング 
メニュー 
タブバースプリットビュー
その他のコンポーネント 
アラートダイアログポップオーバーリスト 
カルーセルダイアログボタン
コンポーネント一覧
CORDOVA用の便利機能 
 戻るボタンのカスタマイズ 
 プラットフォームや画面向きの判定 
 ソフトウェアキーボードの対応 
 ジェスチャーの対応
CORDOVA用の便利機能 
 戻るボタンのカスタマイズ 
ons.setDefaultDeviceBackButtonListener(function() { 
if (navigator.notification.confirm("本当...
CORDOVA用の便利機能 
 プラットフォームや画面向きの判定 
<div> 
<div ons-if-platform="ios"> 
iOS限定の内容 
</div> 
<div ons-if-orientation="portrait...
CORDOVA用の便利機能 
 ソフトウェアキーボードの対応 
<div ons-keyboard-active> 
キーボードが表示されている時に表示されるコンテンツです。 
</div> 
<div ons-keyboard-inacti...
CORDOVA用の便利機能 
 ジェスチャーの対応 
<ons-gesture-detector> 
<div id="detect-area" style="width: 100px; height: 100px;"> 
ここをスワイプ 
...
画面のサンプルパターン
詳細情報 
http://ja.onsen.io/
ありがとうございました。
Upcoming SlideShare
Loading in …5
×

CordovaでAngularJSアプリ開発

10,958 views

Published on

Cordova勉強会 第2回にて講演した内容です。

Published in: Software
  • Be the first to comment

CordovaでAngularJSアプリ開発

  1. 1. CORDOVAでANGULARJSアプリ開発 CORDOVAユーザー会/ アシアル株式会社田中正裕
  2. 2. 自己紹介 » 田中正裕 » アシアル株式会社所属 » Twitter: @massie » 職務: CEO (Chief ExectiveEngineering Officer) » HTML5Expert.jpエキスパート » Cordovaユーザー会、発起人
  3. 3. 本日のアジェンダ  Single Page Appの紹介  AngularJSの紹介  Cordovaと使うAngularJS  ngCordova  Onsen UI
  4. 4. SPAとは? 普通のアプリ SPAのアプリ index.html page2.html page3.html page4.html page5.html page6.html Aタグなどのリンクを通じて遷移 画面1 画面2 画面3 画面4 画面5 画面6 index.html AJAXなどで画面を切り替えながら遷移
  5. 5. SPAのメリット ユーザーエクスペリエンスの向上  画面遷移時に「真っ白なページ」の状態にならない  画面切り替えの読み込み速度が早く  ページを部分的に更新していくことが可能 よりネイティブアプリに近いUI提供が可能
  6. 6. SPAアプリの例:OFFICE ONLINE
  7. 7. SPA普及のカギはフレームワーク  ブラウザーの整備  HTML5関連APIの整備(pushStateなど)  JavaScriptエンジンの高速化(JITコンパイル、最適化処理など)  ページ遷移アニメーション等の最適化  JSライブラリ・フレームワークの普及  データバインディング  テンプレート  ノウハウの蓄積
  8. 8. SPAで利用されるフレームワーク SPAフレームワークで使えるフレームワークは無数にある。
  9. 9. angularjs.org
  10. 10. ANGULARJSの特徴  HTMLを拡張してアプリを記述  SPA開発に最適化  Cordovaでも実績多数  さまざまなサードーパーティ製モジュール
  11. 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. 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. 13. 学習リソース AngularJS公式サイト 公式動画 ドットインストールAngularJSリファレンス
  14. 14. Cordovaで使うAngularJS ng-cordova Onsen UI
  15. 15. ng-cordova
  16. 16. NGCORDOVA  Drifty社が中心となり開発(Ionic Frameworkの作者でもある)  Cordova APIをAngularJSモジュールとしてラッピングしたもの  よりAngularJS風にAPIを呼び出すことができる  AngularJSアプリへの組み込みは下記の通り // ngCordovaをモジュールとして組み込み angular.module("myapp", ["ngCordova"]);
  17. 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. 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. 19. 詳細情報 http://ngcordova.com/
  20. 20. http://ja.onsen.io/
  21. 21. UIコンポーネント用ライブラリ  Cordova向けモバイルUIライブラリー  AngularJSのモジュールとして提供  さまざまなコンポーネントをディレクティブで 提供+画面遷移などのUIで実装
  22. 22. ディレクティブでHTMLを記述
  23. 23. 基本コンポーネント Master-Detail スライディング メニュー タブバースプリットビュー
  24. 24. その他のコンポーネント アラートダイアログポップオーバーリスト カルーセルダイアログボタン
  25. 25. コンポーネント一覧
  26. 26. CORDOVA用の便利機能  戻るボタンのカスタマイズ  プラットフォームや画面向きの判定  ソフトウェアキーボードの対応  ジェスチャーの対応
  27. 27. CORDOVA用の便利機能  戻るボタンのカスタマイズ ons.setDefaultDeviceBackButtonListener(function() { if (navigator.notification.confirm("本当に閉じてもいいですか?", function(index) { if (index == 1) { // OKボタンが押された navigator.app.exitApp(); // アプリを閉じる } } )); });
  28. 28. CORDOVA用の便利機能  プラットフォームや画面向きの判定 <div> <div ons-if-platform="ios"> iOS限定の内容 </div> <div ons-if-orientation="portrait"> 縦画面でないと表示しない部分 </div> </div>
  29. 29. CORDOVA用の便利機能  ソフトウェアキーボードの対応 <div ons-keyboard-active> キーボードが表示されている時に表示されるコンテンツです。 </div> <div ons-keyboard-inactive> キーボードが隠れている時に表示されるコンテンツです。 </div>
  30. 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. 31. 画面のサンプルパターン
  32. 32. 詳細情報 http://ja.onsen.io/
  33. 33. ありがとうございました。

×