Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,905 views

Published on

HTML5fun 2014.09.27 セッション資料

Published in: Technology

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

  1. 1. 明日から使えるコーディングツール HTML5 fun 2014.09.27
  2. 2. me • Tomokazu Kiyohara • Kanazawa Japan • JAIST • clwit, inc.
  3. 3. 明日から使えるコーディングツール
  4. 4. 明日から使えるコーディングツール 準備が簡単 + 覚えるのが簡単
  5. 5. 3 themes • Template • Edit • Reference
  6. 6. その前に…
  7. 7. 3 themes • Template • Edit • Reference
  8. 8. Template テンプレート
  9. 9. とにかくすぐに始められるひな形を使おう
  10. 10. HTML5 Boilerplate http://html5boilerplate.com/
  11. 11. HTML5 Boilerplate • Web サイトのひな形 • モダンなサイトを構築する最低限のファイル群 • HTML5 を活用した様々な仕組みが導入済み • 必要な部分をコピーするだけでも十分利用できる
  12. 12. Demo
  13. 13. カスタマイズしたひな形を使おう
  14. 14. Initializr http://www.initializr.com/
  15. 15. Initializr • HTML5 Boilerplate をさらにカスタマイズ • Responsive デザイン • Bootstrap デザイン
  16. 16. Demo
  17. 17. パーツ毎にひな形を使おう
  18. 18. coveloping{} http://coveloping.com/
  19. 19. coveloping{} • Coding のための様々なツールを提供 • 特にコードジェネレータが便利 • よく使う「パーツ」の HTML / CSS を作成 • GUI で見た目を確認しながら
  20. 20. Demo
  21. 21. 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/ )
  22. 22. Edit エディット
  23. 23. 自動でブラウザをリロードしよう
  24. 24. ATOM + LiveReload Plugin https://atom.io/
  25. 25. ATOM • モダンなテキストエディタ • Github が開発 • 開発者に嬉しい機能が満載 • プラグインによる拡張が簡単
  26. 26. LiveReload Plugin • ファイル編集時にブラウザを自動的にリロードさせる • ATOM のプラグインとして単体で動作 • Guard や Gulp は不要
  27. 27. How to Use • ATOM Plugin install • Browser extension install • LiveReload setup • File edit
  28. 28. How to Use • ATOM Plugin install • Browser extension install • LiveReload setup • File edit
  29. 29. ATOM Plugin install (1/4) • Menu • Atom • Preferences…
  30. 30. ATOM Plugin install (2/4) • Packages
  31. 31. ATOM Plugin install (3/4) • Install Packages • Search packages • “LiveReload”
  32. 32. ATOM Plugin install (4/4) • Install
  33. 33. How to Use • ATOM Plugin install • Browser extension install • LiveReload setup • File edit
  34. 34. Browser extension install • http://go.livereload.com/extensions unstable
  35. 35. Browser extension install (Firefox) • https://addons.mozilla.org/ja/ firefox/addon/livereload/
  36. 36. How to Use • ATOM Plugin install • Browser extension install • LiveReload setup • File edit
  37. 37. LiveReload Setup (1/2) • Atom • Menu • Packages • LiveReload • Toggle Server
  38. 38. LiveReload Setup (2/2) • Browser • Open target file • via http:// (Not file://) ! • Enable LiveReload extension
  39. 39. LiveReload Setup (2/2) • Browser • Open target file • via http:// (Not file://) ! local http server ? • Enable LiveReload extension
  40. 40. 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')
  41. 41. How to Use • ATOM Plugin install • Browser extension install • LiveReload setup • File edit
  42. 42. Demo
  43. 43. 自動で編集履歴を取ろう
  44. 44. fswatch + git-now http://emcrisostomo.github.io/ fswatch/
  45. 45. fswatch • ファイルの更新時に指定したプログラムを実行 • 実行するプログラムは自由 • sass のコンパイルをしてみたり • ftp でファイルをアップロードしてみたり • OSX 用の “コマンド”( ターミナル / Terminal.app )
  46. 46. git-now • ファイル群のスナップショットを取る • git のサブコマンド • OSX 用の “コマンド”( ターミナル / Terminal.app )
  47. 47. How to Use • homebrew install • fswatch install • git-now install • git initialize • watching setup • File edit
  48. 48. How to Use • homebrew install • fswatch install • git-now install • git initialize • watching setup • File edit
  49. 49. Homebrew http://brew.sh/
  50. 50. homebrew install ! $ ruby -e "$(curl -fsSL https:// raw.githubusercontent.com/Homebrew/install/ master/install)” ! $ xcode-select --install !
  51. 51. How to Use • homebrew install • fswatch install • git-now install • git initialize • watching setup • File edit
  52. 52. fswatch install ! $ brew install fswatch !
  53. 53. How to Use • homebrew install • fswatch install • git-now install • git initialize • watching setup • File edit
  54. 54. git-now install ! $ brew install git-now !
  55. 55. How to Use • homebrew install • fswatch install • git-now install • git initialize • watching setup • File edit
  56. 56. git initialize ! $ cd <working directory> ! $ git init ! $ git add . ! $ git commit -m 'init' !
  57. 57. How to Use • homebrew install • fswatch install • git-now install • git initialize • watching setup • File edit
  58. 58. watching setup (fswatch usage) ! $ fswatch-run <target path> <command> ! ! $ fswatch-run -e <except path> <target path> <command> ! ! ! ^C ← 終了('control' + 'c')
  59. 59. watching setup (fswatch usage) ! $ fswatch-run <target path> <command> ! ! $ fswatch-run -e <except path> <target path> <command> ! ! ! ^C ← 終了('control' + 'c')
  60. 60. watching setup ! $ cd <working directory> ! $ fswatch-run -e ./.git ./ 'git now' !
  61. 61. watching setup ! $ cd <working directory> ! $ fswatch-run -e ./.git ./ 'git now' !
  62. 62. How to Use • homebrew install • fswatch install • git-now install • git initialize • watching setup • File edit
  63. 63. Demo
  64. 64. SourceTree https://www.atlassian.com/ja/ software/sourcetree/
  65. 65. 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/ )
  66. 66. Reference リファレンス
  67. 67. ブラウザのサポート状況を確認しよう
  68. 68. Can I use http://caniuse.com/
  69. 69. Can I use • ブラウザサポート状況をチェック • HTML5 タグ • 最新の CSS • 最新の JavaScript API
  70. 70. Demo
  71. 71. 超高速にマニュアルを引こう
  72. 72. Dash http://kapeli.com/dash
  73. 73. Dash • 高速なリファレンスビューア • 確認速度は開発速度 • ショートカットキーで起動→キーワード入力 • Docset を追加することで様々なリファレンスに対応
  74. 74. Demo
  75. 75. 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/ )
  76. 76. 3 themes • Template • Edit • Reference
  77. 77. 明日から使えるコーディングツール + 明日から使おうとするモチベーション
  78. 78. Thank you Tomokazu Kiyohara http://github.com/kiyohara http://facebook.com/tomokazu.kiyohara

×