javascript(angularjs)で作る ios・androidアプリ開発ハンズオン
TRANSCRIPT
JavaScript で作るiOS ・ Android アプリハンズオン
本日の流れ・自己紹介・ Monaca についての説明・ハンズオン
自己紹介・吉本和弘・株式会社ビズリーチ所属・サーバーサイドエンジニア
・仕事で使っている技術 Java 、 JavaScript(jQuery) 、 HTML 、 CSS MySQL 、 AWS 、 Linux
zuknow – 友達とクイズで競える学習アプリ https://www.zuknow.net/
キャリアトレック–レコメンド型転職サイト https://www.careertrek.com/
Monaca とは・クラウドベースの開発プラットフォーム →環境構築不要、 IDE の機能も充実
・ HTML5 と JavaScript を用いることで、 iOS と Android の両 OS に対応した クロスプラットフォームなアプリ開発を実現 → WEB 開発のスキルでアプリ開発ができる
サンプルアプリの仕様・現在地周辺の飲食店の一覧を表示・一覧に表示された飲食店を お気に入りに追加できる・お気に入り一覧を表示・お気に入りをクリアできる
Onsen UI と AngularJS[Onsen UI] ・ AngularJS をベースにモバイルアプリ作成に 必要な UI を提供 ・多彩な UI コンポーネント ・ HTML を拡張し、タグ形式で提供 [Angular JS] ・ Google によって開発された JavaScript の MVC フレームワーク ・複雑化する Web アプリのフロント部分を効率的に する機能が充実 ex. 双方向バインディングなど
プログラムの構成[index.html] ・アプリの UI(Web と同じ ) ・ ons-template を利用することで、複数ページの UI を 1 ファイルに記述[app.js] ・データ処理、 UI の変更処理
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>
Onsen UI （２）・ ons-list 、 ons-list-item リストを表現するためのコンポーネント
<ons-list> <ons-list-header>Header Text</ons-list-header> <ons-list-item>Item1</ons-list-item> <ons-list-item>Item2</ons-list-item></ons-list>
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
AngularJS のサービス
無名関数の引数に指定した変数名を元に、必要なサービスを変数に渡す。上記の場合は、 $scope サービスと $http サービス。
module.controller('AppController', function($scope, $http) { $scope.search = function() { ・・・ };};
サービスとは・ Web アプリケーション共通の特定のタスクを実行する関数群・シングルトンオブジェクト・組み込みサービスは、「 $ 」から始まる・独自のカスタムサービスを作ることもできる
$scope サービスと $http サービス$scope サービス ・アプリケーションのモデルを 参照するオブジェクト ・データバインディングの肝となる →詳しくは、次のスライドで$http サービス ・ XMLHttpRequest オブジェクト、 JSONP を通じて、 http 通信をする
データ (js)
データバインディング（１）（ AngularJs ） 画面 (html)
{{ data }}
データを変更 表示が変更される
$scope.data
データ (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
ディレクティブ（１）・ 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>
ディレクティブ（２）・ ng-click クリック時に指定したスコープに 定義された関数を呼び出す<ons-button ng-click="search()"> 検索する</ons-button>
index.html
$scope.search = function() { ・・・};
app.js
ローカルストレージ (HTML5)
・値を保存する window.localStrage.setItem([ キー名 ],[ 値 ])・値を取得する window.localStrage.getItem([ キー名 ])
・保存するデータをキーバリューで管理・すべての iOS と Android で利用できる[ 利用例 ]
Cordova （１）
HTML レイヤー(JavaScript)
・ Monaca で開発した搭載されるフレームワーク・デバイス機能にアクセスするための 仕組みを提供
ネイティブレイヤー(Objective-C 、 Java)
呼び出し
Cordova （２）・ InAppBrowser アプリ内でブラウザを開く・ Geolocation 位置情報の取得
navigator.geolocation.getCurrentPosition (geolocationSuccess, [geolocationError],[geolocationOptions]);
window.open(url, '_blank', 'location=no');
・ Device 加速度センサーへのアクセス・ Media オーディオファイルの再生、録音
ぐるなび API
[ リクエストパラメタ ] ・ keyid: アクセスキー ・ format: 「 json 」 ( リクエストのデータ形式 ) ・ latitude: 現在地の緯度 ・ longitude: 現在地の経度 ・ range: 「 1 」 ( 検索範囲を番号で指定。「 1 」は、 300m)
・検索結果を表示
・お気に入り一覧を表示[ リクエストパラメタ ] ・ keyid: アクセスキー ・ format: 「 json 」 ( リクエストのデータ形式 ) ・ id: 表示する店舗 ID （形式は、「 1,2,3 」）
プロジェクトの作成・テンプレート 「 Onsen UI最小限のテンプレート」・ Cordova プラグインの管理 下記の設定を有効にする 「 Geolocation 」 「 InAppBrowser 」 「 StatusBar 」 「 Splashscreen 」 ( デフォルト ) 「 ManacaPlugin 」 ( デフォルト )
参考文献・書籍 クラウドでできる 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