Embed Size (px)
DESCRIPTION
HTML5fun 2014.09.27 セッション資料
Citation preview
明日から使えるコーディングツールHTML5 fun 2014.09.27
me
• Tomokazu Kiyohara
• Kanazawa Japan
• JAIST
• clwit, inc.
明日から使えるコーディングツール
明日から使えるコーディングツール
準備が簡単 ＋ 覚えるのが簡単
3 themes
• Template
• Edit
• Reference
その前に…
3 themes
• Template
• Edit
• Reference
Template テンプレート
とにかくすぐに始められるひな形を使おう
HTML5 Boilerplate
• Web サイトのひな形
• モダンなサイトを構築する最低限のファイル群
• HTML5 を活用した様々な仕組みが導入済み
• 必要な部分をコピーするだけでも十分利用できる
Demo
カスタマイズしたひな形を使おう
Initializr
• HTML5 Boilerplate をさらにカスタマイズ
• Responsive デザイン
• Bootstrap デザイン
Demo
パーツ毎にひな形を使おう
coveloping{}
• Coding のための様々なツールを提供
• 特にコードジェネレータが便利
• よく使う「パーツ」の HTML / CSS を作成
• GUI で見た目を確認しながら
Demo
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/ )
Edit エディット
自動でブラウザをリロードしよう
ATOM
• モダンなテキストエディタ
• Github が開発
• 開発者に嬉しい機能が満載
• プラグインによる拡張が簡単
LiveReload Plugin
• ファイル編集時にブラウザを自動的にリロードさせる
• ATOM のプラグインとして単体で動作
• Guard や Gulp は不要
How to Use
• ATOM Plugin install
• Browser extension install
• LiveReload setup
• File edit
How to Use
• ATOM Plugin install
• Browser extension install
• LiveReload setup
• File edit
ATOM Plugin install (1/4)
• Menu
• Atom
• Preferences…
ATOM Plugin install (2/4)
• Packages
ATOM Plugin install (3/4)
• Install Packages
• Search packages
• “LiveReload”
ATOM Plugin install (4/4)
• Install
How to Use
• ATOM Plugin install
• Browser extension install
• LiveReload setup
• File edit
Browser extension install
• http://go.livereload.com/extensions
unstable
Browser extension install (Firefox)
• https://addons.mozilla.org/ja/firefox/addon/livereload/
How to Use
• ATOM Plugin install
• Browser extension install
• LiveReload setup
• File edit
LiveReload Setup (1/2)
• Atom
• Menu
• Packages
• LiveReload
• Toggle Server
LiveReload Setup (2/2)
• Browser
• Open target file
• via http:// (Not file://)
!
• Enable LiveReload extension
LiveReload Setup (2/2)
• Browser
• Open target file
• via http:// (Not file://)
!
• Enable LiveReload extension
local http server ?
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')
How to Use
• ATOM Plugin install
• Browser extension install
• LiveReload setup
• File edit
Demo
自動で編集履歴を取ろう
fswatch
• ファイルの更新時に指定したプログラムを実行
• 実行するプログラムは自由
• sass のコンパイルをしてみたり
• ftp でファイルをアップロードしてみたり
• OSX 用の “コマンド”（ ターミナル / Terminal.app ）
git-now
• ファイル群のスナップショットを取る
• git のサブコマンド
• OSX 用の “コマンド”（ ターミナル / Terminal.app ）
How to Use
• homebrew install
• fswatch install
• git-now install
• git initialize
• watching setup
• File edit
How to Use
• homebrew install
• fswatch install
• git-now install
• git initialize
• watching setup
• File edit
homebrew install
!$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)” !$ xcode-select --install !
How to Use
• homebrew install
• fswatch install
• git-now install
• git initialize
• watching setup
• File edit
fswatch install
!$ brew install fswatch !
How to Use
• homebrew install
• fswatch install
• git-now install
• git initialize
• watching setup
• File edit
git-now install
!$ brew install git-now !
How to Use
• homebrew install
• fswatch install
• git-now install
• git initialize
• watching setup
• File edit
git initialize
!$ cd <working directory> !$ git init !$ git add . !$ git commit -m 'init' !
How to Use
• homebrew install
• fswatch install
• git-now install
• git initialize
• watching setup
• File edit
watching setup (fswatch usage)
!$ fswatch-run <target path> <command> !!$ fswatch-run -e <except path> <target path> <command> !!!^C ← 終了('control' + 'c')
watching setup (fswatch usage)
!$ fswatch-run <target path> <command> !!$ fswatch-run -e <except path> <target path> <command> !!!^C ← 終了('control' + 'c')
watching setup
!$ cd <working directory> !$ fswatch-run -e ./.git ./ 'git now' !
watching setup
!$ cd <working directory> !$ fswatch-run -e ./.git ./ 'git now' !
How to Use
• homebrew install
• fswatch install
• git-now install
• git initialize
• watching setup
• File edit
Demo
SourceTree
https://www.atlassian.com/ja/software/sourcetree/
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/ )
Reference リファレンス
ブラウザのサポート状況を確認しよう
Can I use
• ブラウザサポート状況をチェック
• HTML5 タグ
• 最新の CSS
• 最新の JavaScript API
Demo
超高速にマニュアルを引こう
Dash
• 高速なリファレンスビューア
• 確認速度は開発速度
• ショートカットキーで起動→キーワード入力
• Docset を追加することで様々なリファレンスに対応
Demo
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/ )
3 themes
• Template
• Edit
• Reference
明日から使えるコーディングツール
明日から使おうとするモチベーション
＋
Thank you
Tomokazu Kiyoharahttp://github.com/kiyoharahttp://facebook.com/tomokazu.kiyohara
