Your SlideShare is downloading. ×
0
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

9,526

Published on

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

No Downloads
Views
Total Views
9,526
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
52
Comments
0
Likes
29
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. AngularJSとBootstrapでサクッと作るWebアプリ2013年3月19日 (火)HTML5勉強会 名古屋#2
  • 2. 自己紹介上田拓也豊橋技術科学大学大学院電子・情報工学専攻博士後期課程3年twitter : @tenntennblog: http://u.hinoichi.net
  • 3. アジェンダ● ぼくのかんがえたさいきょうのうぇぶあぷりかいはつ● CRUDアプリとRESTful API○ 基本的なWebのデータの流れ○ CRUD○ RESTful API● AngularJSとは● Bootstrapとは
  • 4. ぼくのかんがえた さいきょうのうぇぶあぷり かいはつ
  • 5. Webアプリのざっくりとした構成AngularJSBootstrapGowebMongoDBMemcachedクライアントサイド サーバサイドRESTful
  • 6. サーバサイド● Goweb○ Go言語のライブラリでRESTful APIを提供する● MongoDB○ NoSQLのドキュメント指向型のデータベース● Memcached○ オンンメモリ型のキーバリューストア
  • 7. クライアントサイド● AngularJS○ JavaScriptのMVCフレームワーク● Bootstrap○ 簡単にきれいなサイトが作れるCSS/JSライブラリ
  • 8. 使用する言語HTMLTypscriptSCSSGo言語クライアントサイド サーバサイドRESTful
  • 9. サーバサイド● Go言語○ Googleの開発した言語○ Google App Engineなどで使える○ GoCon 2013 springが大人気
  • 10. クライアントサイド● Typescript○ Microsoftが開発しているJavaScript代替言語○ 型がある○ ECMAScript6との互換を視野に入れている● SCSS○ CSSを拡張したもの
  • 11. CRUDアプリとRESTful API
  • 12. 基本的なWebのデータの流れブラウザ WebサーバGETリクエストHTML/JS/CSS/画像などPOSTリクエストIDやステータスなどユーザのデータHTTP通信 DB永続化取得
  • 13. CRUDアプリケーションC : CreateR : ReadU : UpdateD : Deleteを主にやるアプリケーション⇒ RESTful APIで実現!
  • 14. RESTful API● HTTPのメソッドとURIをうまくを使う● ステートレスなリソースサーバを提供● 多くの大手Webサービスで提供されている● クライアントサイドに依存しない○ 複数種類のクライアントで共通で利用可能■ PC版Web■ モバイル版Web■ モバイルアプリ など
  • 15. RESTful APIとCRUDアプリブラウザ Webサーバ[1] CREATEDB永続化POST/diary/arriticle{ "articleId" : 1 }日記のデータ{"title" : "今日のご飯","body" : "寿司"}取得
  • 16. RESTful APIとCRUDアプリブラウザ Webサーバ[2] READDB永続化取得GET/diary/arriticle/1{"articleId" : 1,"title" : "今日のご飯","body" : "寿司"}
  • 17. RESTful APIとCRUDアプリブラウザ Webサーバ[3] UPDATEDB永続化PUT/diary/arriticle/1{"articleId" : 1,"title" : "今日のご飯","body" : "寿司"}取得
  • 18. RESTful APIとCRUDアプリブラウザ Webサーバ[4] DELETEDB永続化取得DELETE/diary/arriticle/1
  • 19. CRUDとRESTful APIの対応● メソッドでやりたい事を指定する○ Create, Read, Update, Delete● URIで対象のリソース(データ)を指定する○ diary/article/1
  • 20. AngularJSとは
  • 21. AngularJSとは?● Google製● MVCフレームワーク● 双方向データバインド● CRUDアプリに向いている● テストが容易
  • 22. MVCフレームワークModeljsのデータViewhtml/cssControllerロジック$scope
  • 23. 双方向バインディングでない場合ModeljsのデータViewhtmlI(DOM)今日のご飯タイトル:title = "今日のご飯";ユーザWebアプリtitle = "昨日のご飯";$("#title").val("昨日のご飯");
  • 24. 双方向バインディングのない場合ModeljsのデータViewhtmlI(DOM)ユーザWebアプリ今日のご飯タイトル:title = "昨日のご飯";同期!
  • 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タグで入力されたデータのチェックができる
  • 27. AngularJSとCRUDアプリModeljsのデータControllerロジックRESTful APIngResource
  • 28. 実際の例var article = article.$get({articleId : 1});article.title = "ほげ";article.$save({articleId : 1});
  • 29. AngularJSとテストViewhtml/cssControllerロジック$scopeそれぞれ別にテストできる!直接繋がっていない
  • 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の見た目の構築をあまりしないので

×