Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

HTML5fun 2014.09.27 セッション資料

  • Identifiez-vous pour voir les commentaires

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

  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

×