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