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