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