初めはBootstrapをベースにしてつくろうと思ったのですが、単にスマホのレイアウトだけだと無駄が多いような気がするのと、いかにもな感じになってしまうので、他のフレームワークを探してみました。
それで良さそうだと思ったのはOnsen UI。
Onsen UI
http://ja.onsenui.io/
シンプルそうなのでなんとなく軽そうです。アシアルが作ってるようで日本語の説明があるのも入りやすそうなポイントです。
しかし、どうやらAngularJSベースで作成されている様子。
jQueryでも使用できるようですが、余分にjsを読み込むと重くなりそうなので、AngularJSを勉強してみることにしました。
今まではjQueryを使ってガリガリjavascriptを書いていました。
AngularJSは聞いたことがあるものの全く使ったことはありませんでした。
どんなものかも全く知りません。そんな状態なので、テストサンプルを作成してみました。
AngularJS
https://angularjs.org/
まずはAngularJSのサイトを見てみます。
The Basicsでシンプルなコードがあったのでまず動かしてみます。
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
バージョンがrc版だったので、なんとなく現状の1.2.24にしています。
inputに名前とか入力すると即座に{{yourName}}に反映されます。
すごく簡単です。
なんとなくこれは使えそうな予感。
次にコード中に直でデータ（model）をセットして、リスト表示させてみます。
AngularJSはどうやらMVCな感じになってるみたいですね。ふむふむ。
で、作成したのがこれ。
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script>
var model = {
"mytest": "test hoge",
"mydata": [
{"title": "title1", url: "http://example.com/1"},
{"title": "title2", url: "http://example.com/2"},
{"title": "title3", url: "http://example.com/3"},
{"title": "title4", url: "http://example.com/4"},
]};
var myApp = angular.module("myApp", []);
myApp.controller("testCtrl", function($scope) {
$scope.thread = model;
});
</script>
</head>
<body ng-controller="testCtrl">
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
<hr>
<h1>{{thread.mytest}}</h1>
<ul>
<li ng-repeat="e in thread.mydata"><a href="{{e.url}}">{{e.title}}</a></li>
</ul>
</div>
</body>
</html>
まずmodelをセットして、angularのmoduleを設定。なんかまだ良くわかったないので、とりあえずWebで参考にしたサンプルなどのマネです。
ここで設定した名前をhtmlのng-appに設定します。
次にコントローラー。testCtrlというのを設定しました。$scopeとか出てきてまだなんとなくよくわかってないけど気にしない。
$scope.threadにmodelをセットします。
bodyのng-controllerにtestCtrlをセット。bodyでなくても、さらに下のエレメントでも良いらしい。その範囲で$scopeが使えるみたい。なるほど。
{{thread.mytest}}でとりあえず単体のデータ表示。
うまく表示できたので、次にng-repeatを使ってリストに表示します。
書き方はこんな感じで雰囲気わかると思いますが、これだけで表示できるのは楽ですね！コードもスッキリしてて読みやすいです。
次はデータをajaxで取得するパターン。
実際はこういうのが多いのではないでしょうか。
データは、data.jsonという以下の内容のファイルを準備しました。
{"mytest": "test hoge","mydata": [{"title": "title1", "url": "http://example.com/1"},{"title": "title2", "url": "http://example.com/2"},{"title": "title3", "url": "http://example.com/3"},{"title": "title4", "url": "http://example.com/4"}]}
初めjsonのフォーマットを微妙に間違っていたのでうまく表示されずちょっと戸惑いました。。いい加減はだめですね。文字はダブルクォートでくくらないとダメみたい。
先ほどのコードを以下のように変更しました。
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("testCtrl", function($scope, $http) {
$http.get('data.json').success(function(data, status){
$scope.thread = data;
});
});
</script>
</head>
<body ng-controller="testCtrl">
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
<hr>
<h1>{{thread.mytest}}</h1>
<ul>
<li ng-repeat="e in thread.mydata"><a href="{{e.url}}">{{e.title}}</a></li>
</ul>
</div>
</body>
</html>
$http.getでajax通信できるようです。
ここで取得したデータを先ほどと同じように$scope.threadにセット。
先ほどと同じように表示されました。
まだ良くわかっていないところがかなりありますが、とりあえずはざっくり雰囲気はわかりました。
書籍でうまくまとまってるものがあればいいのですが、アマゾンを見た感じではまだあまりなさそう。
実際に作成して動かしつつ、AngularJSサイトとかWebで都度調べていくという感じになりそうです。良い書籍などをご存知でしたら教えていただければ幸いです。
※当初、<ul>に ng-repeat="e in thread.mydata"を設定していましたが、これ、<li>ですね。。。リピートしたいタグに設定するのが正解でした。
※当初、<ul>に ng-repeat="e in thread.mydata"を設定していましたが、これ、<li>ですね。。。リピートしたいタグに設定するのが正解でした。
【参考にさせていただいたサイト】
AngularJS使い方ガイド 入門編 | Webエンジニアブログ
0 件のコメント:
コメントを投稿