angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2

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の見た目の構築をあまりしないので