Your SlideShare is downloading. ×
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
Osc浜松   2014
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

Osc浜松 2014

595

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
595
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
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. 2014/3/22 オープンソースカンファレンス in 浜松
  • 2. 2014/3/22 オープンソースカンファレンス in 浜松 ! ! 佐川 夫美雄 HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 Angularユーザ会 スタッフ Sencha UG CO-ORGANIZER @albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/ Profile:
  • 3. 2014/3/22 オープンソースカンファレンス in 浜松 Single-page Application(SPA) 単一ページによるWebアプリケーション ページはDOMの操作により切り替える サーバとのやりとりはAjaxやWebSocket等を利用 何か最近話題だよね?!でもSPAって書くとお風呂になっちゃうんだよ
  • 4. 2014/3/22 オープンソースカンファレンス in 浜松 こんなの簡単さ!
  • 5. 2014/3/22 オープンソースカンファレンス in 浜松 HTML CSS JavaScript image SPAを開発するには?
  • 6. 2014/3/22 オープンソースカンファレンス in 浜松 HTML CSS JavaScript Sass Compass image SPAを開発するには?
  • 7. 2014/3/22 オープンソースカンファレンス in 浜松 HTML CSS JavaScript Sass CoffeeScript Compass image SPAを開発するには?
  • 8. 2014/3/22 オープンソースカンファレンス in 浜松 HTML CSS JavaScript Sass CoffeeScript backbone underscore jQuery require Compass image SPAを開発するには?
  • 9. 2014/3/22 オープンソースカンファレンス in 浜松 HTML CSS JavaScript Sass CoffeeScript backbone underscore jQuery require Compass image Yuidoc SPAを開発するには?
  • 10. 2014/3/22 オープンソースカンファレンス in 浜松 HTML CSS JavaScript Sass CoffeeScript backbone underscore jQuery require Compass image imagemin htmlmin cssmin jsmin Yuidoc SPAを開発するには?
  • 11. 2014/3/22 オープンソースカンファレンス in 浜松 HTML CSS JavaScript Sass CoffeeScript backbone underscore jQuery require Compass image imagemin htmlmin cssmin jsmin mocha chai テスト Yuidoc SPAを開発するには?
  • 12. 2014/3/22 オープンソースカンファレンス in 浜松 ちょっと大変じゃない。。。
  • 13. 2014/3/22 オープンソースカンファレンス in 浜松 どーやって開発するの? ┐( ̄ヘ ̄)┌
  • 14. 2014/3/22 オープンソースカンファレンス in 浜松 そこで統合開発ツールの登場です!
  • 15. 2014/3/22 オープンソースカンファレンス in 浜松 開発環境のおはなし http://yeoman.io/ 面倒なことは全部このおっさんにやらせちゃえばいいんだよ
  • 16. 2014/3/22 オープンソースカンファレンス in 浜松 Yeoman とは Google社が作成した総合開発ツール群 yo(雛形作成ツール) grunt(タスクランナー) bower(フロントエンドパッケージマネージャ) MODERN WORKFLOWS FOR MODERN WEBAPPS Javaのmavenみたいなもんです もうちょっと高機能かも
  • 17. 2014/3/22 オープンソースカンファレンス in 浜松 開発の大まかな流れ 1. yo [generator] によるひな形 2. grunt server を使用しアプリケーション開発 3. grunt build によるリリースビルド
  • 18. 2014/3/22 オープンソースカンファレンス in 浜松 これはですね。。 Javaのmavenみたいなもんです もうちょっと高機能かも
  • 19. 2014/3/22 オープンソースカンファレンス in 浜松 インストールは簡単 使ってみる $ npm install -g yo
  • 20. 2014/3/22 オープンソースカンファレンス in 浜松 generator はどのくらいある? http://yeoman.io/community-generators.html yo 雛形作成ツール
  • 21. 2014/3/22 オープンソースカンファレンス in 浜松 $ yo backbone yo これだけで使いたい環境ができてしまう! AngularだってknockoutだってChrome Apps、Firefox OS用だってあるんだぜぃ!
  • 22. 2014/3/22 オープンソースカンファレンス in 浜松 $ yo backbone:view view名 --coffee $ yo backbone:model model名 --coffee $ yo backbone:collection collection名 --coffee $ yo backbone:router router名 --coffee yo モジュールのテンプレートが作成できる
  • 23. 2014/3/22 オープンソースカンファレンス in 浜松 bower Twitter社が作ったパッケージマネージャ bower components はどのくらいあるか? http://bower.io/search/
  • 24. 2014/3/22 オープンソースカンファレンス in 浜松 bower 依存関係およびライブラリの情報を管理するためのファイル bower.jsonとは?
  • 25. 2014/3/22 オープンソースカンファレンス in 浜松 bower $ bower install --save-dev [パッケージ名] ! 新しいコンポーネントをダウンロードしbower.jsonにその情 報を書き込みます 使い方
  • 26. 2014/3/22 オープンソースカンファレンス in 浜松 grunt タスクランナー grunt で登録されているプラグインは? http://gruntjs.com/plugins
  • 27. 2014/3/22 オープンソースカンファレンス in 浜松 grunt タスクランナー gruntにはpackage.jsonとGruntfile.jsが必要
  • 28. 2014/3/22 オープンソースカンファレンス in 浜松 grunt package.jsonとは? 必要なタスクプラグインを管理するためのファイル
  • 29. 2014/3/22 オープンソースカンファレンス in 浜松 grunt 使い方は $ npm install --save-dev [プラグイン名] ! 新しいプラグインをダウンロードしpackage.jsonにその情報 を書き込みます
  • 30. 2014/3/22 オープンソースカンファレンス in 浜松 grunt Gruntfile.jsとは? タスクを定義したファイルです
  • 31. 2014/3/22 オープンソースカンファレンス in 浜松 grunt Gruntfile.jsとは? いろんなタスクがあります $ grunt serve $ grunt build $ grunt test grunt serveってやるとnodeサーバが立ち上がるんだぜぃ
  • 32. 2014/3/22 オープンソースカンファレンス in 浜松 Yeomanを使って効率良くSingle-page Applicationを作ろう! 結構大変だけどね。。 イカしてるだろ
  • 33. 2014/3/22 オープンソースカンファレンス in 浜松 続きは展示ブースにて!
  • 34. 2014/3/22 オープンソースカンファレンス in 浜松 ご清聴ありがとうございました

×