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

10,965 views

Published on

Published in: Technology
0 Comments
34 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,965
On SlideShare
0
From Embeds
0
Number of Embeds
62
Actions
Shares
0
Downloads
60
Comments
0
Likes
34
Embeds 0
No embeds

No notes for slide

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

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

×