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

明日から使えるコーディングツール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

http://html5boilerplate.com/

HTML5 Boilerplate

• Web サイトのひな形

• モダンなサイトを構築する最低限のファイル群

• HTML5 を活用した様々な仕組みが導入済み

• 必要な部分をコピーするだけでも十分利用できる

Demo

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

Initializr

http://www.initializr.com/

Initializr

• HTML5 Boilerplate をさらにカスタマイズ

• Responsive デザイン

• Bootstrap デザイン

Demo

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

coveloping{}

http://coveloping.com/

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 + LiveReload Plugin

https://atom.io/

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 + git-now

http://emcrisostomo.github.io/fswatch/

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

http://brew.sh/

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

http://caniuse.com/

Can I use

• ブラウザサポート状況をチェック

• HTML5 タグ

• 最新の CSS

• 最新の JavaScript API

Demo

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

Dash

http://kapeli.com/dash

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