JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
Download as pptx, pdf1 like674 views
2016/7/22の勉強会資料
![Onsen UIとAngularJS1系
[Onsen UI]
・AngularJSをベースにモバイルアプリ作成に
必要なUIを提供
・多彩なUIコンポーネント
・HTMLを拡張し、タグ形式で提供
[Angular JS]
・Googleによって開発されたJavaScriptの
MVCフレームワーク
・複雑化するWebアプリのフロント部分を効率的に
する機能が充実](https://image.slidesharecdn.com/722-160927162029/85/JavaScript-AngularJS-React-js-iOS-Android-7-320.jpg)
![AngularJSの構成
ons.bootstrap().controller('AppController', function($scope, $http)
{
・・・
}
AppControllerを定義する
index.html
$scope.searchShops
=[shop1, shop2, ・・・];
$scope.likeShops
=[shop1, shop2, ・・・];
Shop{
name,image_url,isLiked
}
オブジェクトの構成](https://image.slidesharecdn.com/722-160927162029/85/JavaScript-AngularJS-React-js-iOS-Android-11-320.jpg)
![ローカルストレージ(HTML5)
・値を保存する
window.localStrage.setItem([キー名],[値])
・値を取得する
window.localStrage.getItem([キー名])
・保存するデータをキーバリューで管理
・すべてのiOSとAndroidで利用できる
[利用例]](https://image.slidesharecdn.com/722-160927162029/85/JavaScript-AngularJS-React-js-iOS-Android-18-320.jpg)
![ぐるなびAPI
[リクエストパラメタ]
・keyid: アクセスキー
・format: 「json」(リクエストのデータ形式)
・latitude: 現在地の緯度
・longitude: 現在地の経度
・range: 「1」(検索範囲を番号で指定。「1」は、300m)
・検索結果を表示
・お気に入り一覧を表示
[リクエストパラメタ]
・keyid: アクセスキー
・format: 「json」(リクエストのデータ形式)
・id: 表示する店舗ID（形式は、「1,2,3」）](https://image.slidesharecdn.com/722-160927162029/85/JavaScript-AngularJS-React-js-iOS-Android-21-320.jpg)
![state
export default class App extends Component
{
constructor(props) {
super(props);
this.state = {
isResult: false,
shops : Array()
};
}
render:() {
return (
・・・
);
}
});
・コンポーネントの状態をもつ、ミュータブル（不変）な値
・コンポーネント自身の状態をもつ
{
shops =[data1, data2]
}
stateに対して、
・props はイミュータブル（可変）な値
・propsは親の状態をもつ](https://image.slidesharecdn.com/722-160927162029/85/JavaScript-AngularJS-React-js-iOS-Android-28-320.jpg)
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
- 7. Onsen UIとAngularJS1系 [Onsen UI] ・AngularJSをベースにモバイルアプリ作成に 必要なUIを提供 ・多彩なUIコンポーネント ・HTMLを拡張し、タグ形式で提供 [Angular JS] ・Googleによって開発されたJavaScriptの MVCフレームワーク ・複雑化するWebアプリのフロント部分を効率的に する機能が充実
- 8. Onsen UIの構成 <ons-page ng-controller="AppController as app"> <ons-tabbar> <ons-tab page=“search.html"></ons-tab> <ons-tab page=“like.html”></ons-tab> </ons-tabbar> </ons-page> <ons-template id=“search.html"> ・・・ </ons-template> <ons-template id=“like.html”> ・・・ </ons-template> <ons-template id=“result.html”> ・・・ </ons-template> JSで切り替え
- 9. 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. 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> 詳しくは、 ・「Onsen UI 1.xガイド」(日本語) (https://ja.onsen.io/v1/guide.html) ・「Onsen UI 2 Docs」（英語） (https://onsen.io/v2/docs/js.html)
- 11. AngularJSの構成 ons.bootstrap().controller('AppController', function($scope, $http) { ・・・ } AppControllerを定義する index.html $scope.searchShops =[shop1, shop2, ・・・]; $scope.likeShops =[shop1, shop2, ・・・]; Shop{ name,image_url,isLiked } オブジェクトの構成
- 12. AngularJSのサービス 無名関数の引数に指定した変数名を元に、 必要なサービスを変数に渡す。 上記の場合は、$scopeサービスと$httpサービス。 module.controller('AppController', function($scope, $http) { $scope.search = function() { ・・・ }; }; サービスとは ・Webアプリケーション共通の特定のタスクを実行する関数群 ・シングルトンオブジェクト ・組み込みサービスは「$」から始まる ・独自のカスタムサービスを作ることもできる
- 14. データ(js) データバインディング（１）（AngularJS） 画面(html) {{ data }} データを変更 表示が変更される $scope.data
- 15. データ(js) データバインディング（２）（AngularJS） 画面(html) <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
- 16. ディレクティブ（１） ・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>
- 17. ディレクティブ（２） ・ng-click クリック時に指定したスコープに 定義された関数を呼び出す <ons-button ng-click="search()"> 検索する </ons-button> $scope.search = function() { ・・・ }; 詳しくは、 js STUDIO(http://js.studio-kingdom.com/angularjs)
- 21. ぐるなびAPI [リクエストパラメタ] ・keyid: アクセスキー ・format: 「json」(リクエストのデータ形式) ・latitude: 現在地の緯度 ・longitude: 現在地の経度 ・range: 「1」(検索範囲を番号で指定。「1」は、300m) ・検索結果を表示 ・お気に入り一覧を表示 [リクエストパラメタ] ・keyid: アクセスキー ・format: 「json」(リクエストのデータ形式) ・id: 表示する店舗ID（形式は、「1,2,3」）
- 22. プロジェクトの作成 ・テンプレート 「Onsen UI V2 Angular1 Tabbar」 ・Cordovaプラグインの管理 下記の設定を有効にする 「Geolocation」 「InAppBrowser」
- 23. Reactアプリ(Meteor)のサンプル ・Meteorをインストール curl https://install.meteor.com/ | sh ・githubからクローン git clone https://github.com/KazuhiroYoshimoto/react-sample ・Node.jsのreact,react-domモジュールをインストール meteor npm install --save react react-dom ・Meteorを起動 meteor
- 26. コンポーネントベース - App.jsx -Shop.jsx export default class Shop extends Component { render() { return ( ・・・ ); } }); コンポーネントに DOMを定義し、コン ポーネントを組み合わ せる。 コンポーネントの定義 に従い、DOMが生成 される。 export default class App extends Component { render() { return ( <div className="commentBox"> ・・・ <Shop /> </div> ); } });
- 27. props export default class App extends Component { return ( <div className=”contaner"> <h1>Comments</h1> <Shop shop={this.data} /> </div> ); } }); export default class Shop extends Component { return ( <div className=“Comment"> {this.props.shop} </div> ); } }); App.jsx Shop.jsx ・dataの値を受け渡す ・Appでdataを更新したら、 自動的にdataの値を受け渡す
- 28. state export default class App extends Component { constructor(props) { super(props); this.state = { isResult: false, shops : Array() }; } render:() { return ( ・・・ ); } }); ・コンポーネントの状態をもつ、ミュータブル（不変）な値 ・コンポーネント自身の状態をもつ { shops =[data1, data2] } stateに対して、 ・props はイミュータブル（可変）な値 ・propsは親の状態をもつ
- 29. propsとstate export default class App extends Component { render () { return ( <div className=”container"> <Shop shop={this.state.data} /> </div> ); } }); {data: “お店１”} this.setState({data: “お店2”}); export default class Shop extends Component { render() { return ( <li> <p> {this.props.shop} </p> </li> ); } } {data: “お店2”} <div>お店1</div> <div>お店2</div> state DOM
- 30. ・Meteorをインストール curl https://install.meteor.com/ | sh ・Node.jsのreact,react-domモジュールをインストール meteor npm install --save react react-dom ・meteorを起動 meteor プロジェクトの作成