Contenu connexe
Similaire à CordovaでAngularJSアプリ開発 (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タグなどのリンクを通じて遷移
画面1 画面2 画面3 画面4 画面5 画面6
index.html
AJAXなどで画面を切り替えながら遷移
- 7. SPA普及のカギはフレームワーク
ブラウザーの整備
HTML5関連APIの整備(pushStateなど)
JavaScriptエンジンの高速化(JITコンパイル、最適化処理など)
ページ遷移アニメーション等の最適化
JSライブラリ・フレームワークの普及
データバインディング
テンプレート
ノウハウの蓄積
- 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
- 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
- 27. CORDOVA用の便利機能
戻るボタンのカスタマイズ
ons.setDefaultDeviceBackButtonListener(function() {
if (navigator.notification.confirm("本当に閉じてもいいですか?",
function(index) {
if (index == 1) { // OKボタンが押された
navigator.app.exitApp(); // アプリを閉じる
}
}
));
});
- 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>