HTML5fun 2014.09.27 セッション資料

1. 明日から使えるコーディングツール
HTML5 fun 2014.09.27

2. me
• Tomokazu Kiyohara
• Kanazawa Japan
• JAIST
• clwit, inc.

3. 明日から使えるコーディングツール

4. 明日から使えるコーディングツール
準備が簡単 ＋ 覚えるのが簡単

5. 3 themes
• Template
• Edit
• Reference

6. その前に…

8. 3 themes
• Template
• Edit
• Reference

9. Template テンプレート

10. とにかくすぐに始められるひな形を使おう

11. HTML5 Boilerplate
http://html5boilerplate.com/

12. HTML5 Boilerplate
• Web サイトのひな形
• モダンなサイトを構築する最低限のファイル群
• HTML5 を活用した様々な仕組みが導入済み
• 必要な部分をコピーするだけでも十分利用できる

13. Demo

14. カスタマイズしたひな形を使おう

15. Initializr
http://www.initializr.com/

16. Initializr
• HTML5 Boilerplate をさらにカスタマイズ
• Responsive デザイン
• Bootstrap デザイン

17. Demo

18. パーツ毎にひな形を使おう

19. coveloping{}
http://coveloping.com/

20. coveloping{}
• Coding のための様々なツールを提供
• 特にコードジェネレータが便利
• よく使う「パーツ」の HTML / CSS を作成
• GUI で見た目を確認しながら

21. Demo

22. more keywords
• HTML5 & CSS3 Tools and Tutorials ( http://tools.webdirections.org/ )
• HTML KickStart ( http://www.99lime.com/elements/ )
• Foundation ( http://foundation.zurb.com/ )
• Pure ( http://purecss.io/ )
• Topcoat ( http://topcoat.io/ )
• bootmetro ( http://aozora.github.io/bootmetro/ )
• Yeoman ( http://yeoman.io/ )

23. Edit エディット

24. 自動でブラウザをリロードしよう

25. ATOM + LiveReload Plugin
https://atom.io/

26. ATOM
• モダンなテキストエディタ
• Github が開発
• 開発者に嬉しい機能が満載
• プラグインによる拡張が簡単

27. LiveReload Plugin
• ファイル編集時にブラウザを自動的にリロードさせる
• ATOM のプラグインとして単体で動作
• Guard や Gulp は不要

28. How to Use
• ATOM Plugin install
• Browser extension install
• LiveReload setup
• File edit

29. How to Use
• ATOM Plugin install
• Browser extension install
• LiveReload setup
• File edit

30. ATOM Plugin
install (1/4)
• Menu
• Atom
• Preferences…

31. ATOM Plugin
install (2/4)
• Packages

32. ATOM Plugin
install (3/4)
• Install Packages
• Search packages
• “LiveReload”

33. ATOM Plugin
install (4/4)
• Install

34. How to Use
• ATOM Plugin install
• Browser extension install
• LiveReload setup
• File edit

35. Browser extension
install
• http://go.livereload.com/extensions
unstable

36. Browser extension
install (Firefox)
• https://addons.mozilla.org/ja/
firefox/addon/livereload/

37. How to Use
• ATOM Plugin install
• Browser extension install
• LiveReload setup
• File edit

38. LiveReload
Setup (1/2)
• Atom
• Menu
• Packages
• LiveReload
• Toggle Server

39. LiveReload
Setup (2/2)
• Browser
• Open target file
• via http:// (Not file://)
!
• Enable LiveReload extension

40. LiveReload
Setup (2/2)
• Browser
• Open target file
• via http:// (Not file://)
!
local http server ?
• Enable LiveReload extension

41. Easy http server (example)
!
$ cd <working directory>
!
$ sudo ruby -run -e 'httpd' .
→ http://localhost/
!
or
!
$ ruby -run -e 'httpd' -- --port=8080 .
→ http://localhost:8080/
!
!
^C ← 終了('control' + 'c')

42. How to Use
• ATOM Plugin install
• Browser extension install
• LiveReload setup
• File edit

43. Demo

44. 自動で編集履歴を取ろう

45. fswatch + git-now
http://emcrisostomo.github.io/
fswatch/

46. fswatch
• ファイルの更新時に指定したプログラムを実行
• 実行するプログラムは自由
• sass のコンパイルをしてみたり
• ftp でファイルをアップロードしてみたり
• OSX 用の “コマンド”（ ターミナル / Terminal.app ）

47. git-now
• ファイル群のスナップショットを取る
• git のサブコマンド
• OSX 用の “コマンド”（ ターミナル / Terminal.app ）

48. How to Use
• homebrew install
• fswatch install
• git-now install
• git initialize
• watching setup
• File edit

49. How to Use
• homebrew install
• fswatch install
• git-now install
• git initialize
• watching setup
• File edit

50. Homebrew
http://brew.sh/

51. homebrew install
!
$ ruby -e "$(curl -fsSL https://
raw.githubusercontent.com/Homebrew/install/
master/install)”
!
$ xcode-select --install
!

52. How to Use
• homebrew install
• fswatch install
• git-now install
• git initialize
• watching setup
• File edit

53. fswatch install
!
$ brew install fswatch
!

54. How to Use
• homebrew install
• fswatch install
• git-now install
• git initialize
• watching setup
• File edit

55. git-now install
!
$ brew install git-now
!

56. How to Use
• homebrew install
• fswatch install
• git-now install
• git initialize
• watching setup
• File edit

57. git initialize
!
$ cd <working directory>
!
$ git init
!
$ git add .
!
$ git commit -m 'init'
!

58. How to Use
• homebrew install
• fswatch install
• git-now install
• git initialize
• watching setup
• File edit

59. watching setup (fswatch usage)
!
$ fswatch-run <target path> <command>
!
!
$ fswatch-run -e <except path> <target path> <command>
!
!
!
^C ← 終了('control' + 'c')

60. watching setup (fswatch usage)
!
$ fswatch-run <target path> <command>
!
!
$ fswatch-run -e <except path> <target path> <command>
!
!
!
^C ← 終了('control' + 'c')

61. watching setup
!
$ cd <working directory>
!
$ fswatch-run -e ./.git ./ 'git now'
!

62. watching setup
!
$ cd <working directory>
!
$ fswatch-run -e ./.git ./ 'git now'
!

63. How to Use
• homebrew install
• fswatch install
• git-now install
• git initialize
• watching setup
• File edit

64. Demo

65. SourceTree
https://www.atlassian.com/ja/
software/sourcetree/

66. more keywords
• BrowserSync ( http://www.browsersync.io/ )
• LiveReload ( http://livereload.com/ )
• Emmet LiveStyle ( http://livestyle.emmet.io/ )
• takana ( http://usetakana.com/ )
• atom-lint ( https://atom.io/packages/atom-lint )
• Gulp ( http://gulpjs.com/ )
• Grunt ( http://gruntjs.com/ )

67. Reference リファレンス

68. ブラウザのサポート状況を確認しよう

69. Can I use
http://caniuse.com/

70. Can I use
• ブラウザサポート状況をチェック
• HTML5 タグ
• 最新の CSS
• 最新の JavaScript API

71. Demo

72. 超高速にマニュアルを引こう

73. Dash
http://kapeli.com/dash

74. Dash
• 高速なリファレンスビューア
• 確認速度は開発速度
• ショートカットキーで起動→キーワード入力
• Docset を追加することで様々なリファレンスに対応

75. Demo

76. more keywords
• HTML5 日本語訳 ( http://momdo.github.io/html5/Overview.html )
• HTML5 Cheat Sheet ( http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/ )
• HTML5 Tag Reference ( http://reference.hyper-text.org/html5/ )
• Validator.nu (X)HTML5 Validator ( http://html5.validator.nu/ )
• The W3C Markup Validator Service ( http://validator.w3.org/ )
• HTML Tidy for HTML5 (experimental) ( http://w3c.github.io/tidy-html5/ )

77. 3 themes
• Template
• Edit
• Reference

78. 明日から使えるコーディングツール
＋
明日から使おうとするモチベーション

79. Thank you
Tomokazu Kiyohara
http://github.com/kiyohara
http://facebook.com/tomokazu.kiyohara