More Related Content
What's hot (20)
Viewers also liked (20)
Similar to 明日から使えるコーディングツール (20)
More from Tomokazu Kiyohara (15)
Recently uploaded (13)
![ElasticsearchでSPLADEする [Search Engineering Tech Talk 2025 Winter]](https://cdn.slidesharecdn.com/ss_thumbnails/searchtech-250228102455-ddc5ce09-thumbnail.jpg?width=560&fit=bounds)
明日から使えるコーディングツール
- 1. 明日から使えるコーディングツール HTML5 fun 2014.09.27
- 2. me ? Tomokazu Kiyohara ? Kanazawa Japan ? JAIST ? clwit, inc.
- 4. 明日から使えるコーディングツール 準備が簡単 ＋ 覚えるのが简単
- 5. 3 themes ? Template ? Edit ? Reference
- 6. その前に…
- 8. 3 themes ? Template ? Edit ? Reference
- 12. HTML5 Boilerplate ? Web サイトのひな形 ? モダンなサイトを構築する最低限のファイル群 ? HTML5 を活用した様々な仕組みが導入済み ? 必要な部分をコピーするだけでも十分利用できる
- 13. Demo
- 14. カスタマイズしたひな形を使おう
- 16. Initializr ? HTML5 Boilerplate をさらにカスタマイズ ? Responsive デザイン ? Bootstrap デザイン
- 17. Demo
- 18. パーツ毎にひな形を使おう
- 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
- 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
- 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 リファレンス
- 69. Can I use http://caniuse.com/
- 70. Can I use ? ブラウザサポート状況をチェック ? HTML5 タグ ? 最新の CSS ? 最新の JavaScript API
- 71. Demo
- 72. 超高速にマニュアルを引こう
- 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
- 79. Thank you Tomokazu Kiyohara http://github.com/kiyohara http://facebook.com/tomokazu.kiyohara