angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
TRANSCRIPT
AngularJSとBootstrapでサ
クッと作るWebアプリ
2013年3月19日 (火)HTML5勉強会 名古屋#2
自己紹介
上田拓也豊橋技術科学大学大学院電子・情報工学専攻博士後期課程3年
twitter : @tenntennblog: http://u.hinoichi.net
アジェンダ
● ぼくのかんがえたさいきょうのうぇぶあぷりかいはつ
● CRUDアプリとRESTful API○ 基本的なWebのデータの流れ○ CRUD○ RESTful API
● AngularJSとは● Bootstrapとは
ぼくのかんがえた さいきょうの うぇぶあぷり かいはつ
Webアプリのざっくりとした構成
AngularJSBootstrap
GowebMongoDBMemcached
クライアントサイド サーバサイド
RESTful
サーバサイド
● Goweb○ Go言語のライブラリでRESTful APIを提供する
● MongoDB○ NoSQLのドキュメント指向型のデータベース
● Memcached○ オンンメモリ型のキーバリューストア
クライアントサイド
● AngularJS○ JavaScriptのMVCフレームワーク
● Bootstrap○ 簡単にきれいなサイトが作れるCSS/JSライブラリ
使用する言語
HTMLTypscriptSCSS
Go言語
クライアントサイド サーバサイド
RESTful
サーバサイド
● Go言語○ Googleの開発した言語○ Google App Engineなどで使える○ GoCon 2013 springが大人気
クライアントサイド
● Typescript○ Microsoftが開発しているJavaScript代替言語○ 型がある○ ECMAScript6との互換を視野に入れている
● SCSS○ CSSを拡張したもの
CRUDアプリとRESTful API
基本的なWebのデータの流れ
ブラウザ Webサーバ
GETリクエスト
HTML/JS/CSS/画像など
POSTリクエスト
IDやステータスなど
ユーザのデータ
HTTP通信 DB
永続化取得
CRUDアプリケーション
C : CreateR : ReadU : UpdateD : Delete
を主にやるアプリケーション⇒ RESTful APIで実現！
RESTful API
● HTTPのメソッドとURIをうまくを使う● ステートレスなリソースサーバを提供● 多くの大手Webサービスで提供されている● クライアントサイドに依存しない
○ 複数種類のクライアントで共通で利用可能■ PC版Web■ モバイル版Web■ モバイルアプリ など
RESTful APIとCRUDアプリ
ブラウザ Webサーバ
[1] CREATE DB
永続化
POST/diary/arriticle
{ "articleId" : 1 }
日記のデータ{"title" : "今日のご飯", "body" : "寿司"}
取得
RESTful APIとCRUDアプリ
ブラウザ Webサーバ
[2] READ DB
永続化取得
GET/diary/arriticle/1
{"articleId" : 1, "title" : "今日のご飯", "body" : "寿司"}
RESTful APIとCRUDアプリ
ブラウザ Webサーバ
[3] UPDATE DB
永続化
PUT/diary/arriticle/1
{"articleId" : 1, "title" : "今日のご飯", "body" : "寿司"}
取得
RESTful APIとCRUDアプリ
ブラウザ Webサーバ
[4] DELETE DB
永続化取得
DELETE/diary/arriticle/1
CRUDとRESTful APIの対応
● メソッドでやりたい事を指定する○ Create, Read, Update, Delete
● URIで対象のリソース（データ）を指定する○ diary/article/1
AngularJSとは
AngularJSとは？
● Google製● MVCフレームワーク● 双方向データバインド● CRUDアプリに向いている● テストが容易
MVCフレームワーク
Modeljsのデータ
Viewhtml/css
Controllerロジック
$scope
双方向バインディングでない場合
Modeljsのデータ
ViewhtmlI(DOM)
今日のご飯タイトル：
title = "今日のご飯";
ユーザWebアプリ
title = "昨日のご飯";
$("#title").val("昨日のご飯");
双方向バインディングのない場合
Modeljsのデータ
ViewhtmlI(DOM)
ユーザWebアプリ
今日のご飯タイトル：title = "昨日のご飯";
同期！
実際の例 ngRepeate
<ul ng-repeate="article in articles"><li>
<a href="#/article/{{article.articleId}}">{{article.title}}
</a></li>
</ul>
KnockoutJSとの違い
● 特別なラッパーがいらない○ ko.observableやko.observableArrayみたいな
● バリデーションが簡単にできる○ inputタグで入力されたデータのチェックができる
AngularJSとCRUDアプリ
Modeljsのデータ
Controllerロジック
RESTful API
ngResource
実際の例
var article = article.$get({articleId : 1});article.title = "ほげ";article.$save({articleId : 1});
AngularJSとテスト
Viewhtml/css
Controllerロジック
$scope
それぞれ別にテストできる！
直接繋がっていない
Bootstrapとビュー
Bootstrap
● Twitter社が開発しているCSSのライブラリ● リッチなUIが簡単にできる
○ グリッド○ ボタン○ かっこいアイコン
● class属性をうまく使う○ HTMLとCSSだけでできる○ jQuery UIとかだと、見た目を構築する部分がJSに入っ
てしまう！
グリッドの例
<div class="row"><div class="span6">
右！
</div><div class="span6">
左！
</div></div>
アイコン付きボタンの例
<a href="#" class="btn btn-primary"><i class="icon-plus icon-white"></i>追加
</a>
アイコン付きボタンの例
Awesome Font
● BootstrapのアイコンをWebFontにする○ Bootstrapのアイコンはpng○ pngだと拡大できない○ フォントであれば拡大自由！
● アニメーションが使える○ ぐるぐるまわる読み込み中のアイコンとか
まとめ
● それぞれの構成の関係を疎にする○ 役割分担やテストがしやすくなる
● AngularJSを使うと○ MVCでコントローラーとビューが独立できる○ 双方向バインディングでモデルとビューを同期○ RESTful APIと相性がいい
● Bootstrap○ class属性でリッチなUIが作れる○ ビューとコントローラーが依存しにくい
■ JSでUIの見た目の構築をあまりしないので