JavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオン
Download as pptx, pdf5 likes2,367 views
JavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオン
![Onsen UIとAngularJS
[Onsen UI]
・AngularJSをベースにモバイルアプリ作成に
必要なUIを提供
・多彩なUIコンポーネント
・HTMLを拡張し、タグ形式で提供
[Angular JS]
・Googleによって開発されたJavaScriptの
MVCフレームワーク
・複雑化するWebアプリのフロント部分を効率的に
する機能が充実
ex. 双方向バインディングなど](https://image.slidesharecdn.com/d3-150904012024-lva1-app6891/85/JavaScript-AngularJS-iOS-Android-6-320.jpg)
![プログラムの構成
[index.html]
・アプリのUI(Webと同じ)
・ons-templateを利用することで、複数ページの
UIを1ファイルに記述
[app.js]
・データ処理、UIの変更処理](https://image.slidesharecdn.com/d3-150904012024-lva1-app6891/85/JavaScript-AngularJS-iOS-Android-7-320.jpg)
![ローカルストレージ(HTML5)
・値を保存する
window.localStrage.setItem([キー名],[値])
・値を取得する
window.localStrage.getItem([キー名])
・保存するデータをキーバリューで管理
・すべてのiOSとAndroidで利用できる
[利用例]](https://image.slidesharecdn.com/d3-150904012024-lva1-app6891/85/JavaScript-AngularJS-iOS-Android-17-320.jpg)
![ぐるなびAPI
[リクエストパラメタ]
・keyid: アクセスキー
・format: 「json」(リクエストのデータ形式)
・latitude: 現在地の緯度
・longitude: 現在地の経度
・range: 「1」(検索範囲を番号で指定。「1」は、300m)
・検索結果を表示
・お気に入り一覧を表示
[リクエストパラメタ]
・keyid: アクセスキー
・format: 「json」(リクエストのデータ形式)
・id: 表示する店舗ID（形式は、「1,2,3」）](https://image.slidesharecdn.com/d3-150904012024-lva1-app6891/85/JavaScript-AngularJS-iOS-Android-20-320.jpg)
JavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオン
- 6. Onsen UIとAngularJS [Onsen UI] ・AngularJSをベースにモバイルアプリ作成に 必要なUIを提供 ・多彩なUIコンポーネント ・HTMLを拡張し、タグ形式で提供 [Angular JS] ・Googleによって開発されたJavaScriptの MVCフレームワーク ・複雑化するWebアプリのフロント部分を効率的に する機能が充実 ex. 双方向バインディングなど
- 8. Onsen UI（１） ・ons-template htmlのテンプレートを定義する 呼び出すときに、テンプレートのIDを指定 <ons-template id="foobar.html"> ... </ons-template> ・ons-tabbar 子要素ons-tabのpage属性に タブで表示するページを指定する <ons-tabbar> <ons-tab page=”tab1.html" active="true”></ons-tab> <ons-tab page=”tab2.html" active="true”></ons-tab> </ons-tab>
- 10. AngularJSを利用するための処理 ②AppControllerコントローラーを登録 module.controller('AppController', function($scope, $http) { $scope.search = function() { ・・・ }; }; <body ng-controller="AppController"> ・・・ </body> ③AppControllerとhtmlの要素を紐付け <script> var module = ons.bootstrap(); </script> ①AngularJSがOnsen UIモジュールを追加 index.html app.js index.html
- 11. AngularJSのサービス 無名関数の引数に指定した変数名を元に、 必要なサービスを変数に渡す。 上記の場合は、$scopeサービスと$httpサービス。 module.controller('AppController', function($scope, $http) { $scope.search = function() { ・・・ }; }; サービスとは ・Webアプリケーション共通の特定のタスクを実行する関数群 ・シングルトンオブジェクト ・組み込みサービスは、「$」から始まる ・独自のカスタムサービスを作ることもできる
- 13. データ(js) データバインディング（１）（AngularJs） 画面(html) {{ data }} データを変更 表示が変更される $scope.data
- 14. データ(app.js) データバインディング（２）（AngularJs） 画面(html.index) <ons-list-item ng-repeat="shop in searchShops”> {{ shop.name }} {{ shop.address }} </ons-list-item> <ons-list-item ng-repeat="shop in likeShops”> {{ shop.name }} {{ shop.address }} </ons-list-item> $scopeのデータを変更すると、 表示が変更される $scope. searchShops $scope. likeShops
- 15. ディレクティブ（１） ・ng-repeat 配列に繰り返し処理を実施し、 展開したデータを表示する <ons-list> <ons-list-item ng-repeat=“data in dataList”> {{ data }} </ons-list-item> </ons-list> ・ng-show 条件がtrueの場合に表示する <ons-list> <ons-list-item ng-repeat=“data in dataList”> <span ng-show=“dataList.length > 0”>{{ data}} </span> </ons-list-item> </ons-list>
- 16. ディレクティブ（２） ・ng-click クリック時に指定したスコープに 定義された関数を呼び出す <ons-button ng-click="search()"> 検索する </ons-button> index.html $scope.search = function() { ・・・ }; app.js
- 20. ぐるなびAPI [リクエストパラメタ] ・keyid: アクセスキー ・format: 「json」(リクエストのデータ形式) ・latitude: 現在地の緯度 ・longitude: 現在地の経度 ・range: 「1」(検索範囲を番号で指定。「1」は、300m) ・検索結果を表示 ・お気に入り一覧を表示 [リクエストパラメタ] ・keyid: アクセスキー ・format: 「json」(リクエストのデータ形式) ・id: 表示する店舗ID（形式は、「1,2,3」）
- 22. 参考文献 ・書籍 クラウドでできるHTML5ハイブリッド アプリ開発 Cordova/Onsen UIで作る iOS/Android両対応アプリ (Monaca公式ガイドブック) http://www.amazon.co.jp/dp/4798140287 ・ウェブサイト Monacaドキュメント http://docs.monaca.mobi/3.5/ja/ js STUDIO http://js.studio-kingdom.com/angularjs