2016/7/22の勉強会資料

1. JavaScript(AngularJS・React.js)
で作る
iOS・Androidアプリハンズオン

2. 自己紹介
・吉本和弘
・株式会社ビズリーチ所属
・サーバーサイドエンジニア
・仕事で使っている技術
Java、JavaScript(jQuery)、HTML、CSS
MySQL、AWS、Linux
iOSアプリ(Objective-C,Swift)、Androidアプリ(Java)
zuknow – 友達とクイズで競える学習アプリ
https://www.zuknow.net/
キャリアトレック–レコメンド型転職サイト
https://www.careertrek.com/

3. 今回取り扱う内容
Angularアプリ(Monaca)
・ハイブリッドアプリ
・AngularJS 1系で開発
Reactアプリ(Meteor)
・Webアプリ
・React.js、ES6で開発
・Meteorでハイブリッドアプリ化も可能
→サンプルの説明、簡易版を作成
→簡易版サンプルの説明

4. Angularアプリ(Monaca)のサンプル
・サンプルプロジェクトをインポート
・ ぐるなびAPIのkeyIDを設定(index.html)
var keyid = ‘＊＊＊';

5. Monacaとは
・クラウドベースの開発プラットフォーム
→環境構築不要、IDEの機能も充実
・HTML5とJavaScriptを用いることで、
iOSとAndroidの両OSに対応した
クロスプラットフォームなアプリ開発を実現
→WEB開発のスキルでアプリ開発ができる
・React.js、AngularJS2系、ES6(Babel)で開発する
場合は、LocalKit(有料版、ローカルの開発環境)が必
要

6. サンプルアプリの仕様
・現在地周辺の飲食店の一覧を表示
・一覧に表示された飲食店を
お気に入りに追加できる
・お気に入り一覧を表示
・お気に入りをクリアできる

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アプリケーション共通の特定のタスクを実行する関数群
・シングルトンオブジェクト
・組み込みサービスは「$」から始まる
・独自のカスタムサービスを作ることもできる

13. $scopeサービスと$httpサービス
$scopeサービス
・アプリケーションのモデルを
参照するオブジェクト
・データバインディングの肝となる
→詳しくは、次のスライドで
$httpサービス
・XMLHttpRequestオブジェクト、JSONP
を通じて、http通信をする

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)

18. ローカルストレージ(HTML5)
・値を保存する
window.localStrage.setItem([キー名],[値])
・値を取得する
window.localStrage.getItem([キー名])
・保存するデータをキーバリューで管理
・すべてのiOSとAndroidで利用できる
[利用例]

19. Cordova（１）
HTMLレイヤー
(JavaScript)
・Monacaで開発した搭載されるフレームワーク
・デバイス機能にアクセスするための
仕組みを提供
ネイティブレイヤー
(Objective-C、Swift、Java)
呼び出し

20. Cordova（２）
・InAppBrowser
アプリ内でブラウザを開く
・Geolocation
位置情報の取得
・Device
加速度センサーへのアクセス
・Media
オーディオファイルの再生、録音

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

24. Meteorとは
・node.jsをベースとした
フルスタックフレームワーク
・Webアプリケーション開発を素早く
低コストで行える
・iOSアプリやAndroidアプリに
することもできる

25. ・Facebookが作ったViewのライブラリ
・フレームワークでなく、UIライブラリ
・Virtual DOM
DOMの状態をデータとして持ち、
状態が変化したらDOMを再生成する
（差分を作成）
React.js
・コンポーネントベース
・データバイディング（props）
・状態管理(state)
React.jsでVirtual DOMを定義する

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
プロジェクトの作成