Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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/
ありがとうございました。
Prochain SlideShare
Chargement dans…5
×

CordovaでAngularJSアプリ開発

11 477 vues

Publié le

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

Publié dans : Logiciels
  • Soyez le premier à commenter

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. ありがとうございました。

×