htmlコーディングの効率化 前編
DESCRIPTION
「9th Knock!」 第9回Knock! Knock! 勉強会(2012年10月12日、B-nest静岡市産学交流センターにて) http://knock3.hamnaly.com/vol09/TRANSCRIPT
![Page 1: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/1.jpg)
HTMLコーディングの効率化とか最近の傾向とか
前編 : コードを書くということ、Dreamweaver以外の選択肢
矢部靖人
2012年10月12日第9回 Knock! Knock!勉強会
![Page 2: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/2.jpg)
・ コードを書く、ということ・ Dreamweaver以外の選択肢・ CSSプリプロセッサー・ 画像軽量化とデザインデータからのCSS3生成
本日のお題
![Page 3: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/3.jpg)
自己紹介
![Page 4: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/4.jpg)
名 前 : ゃべ ゃすひと年 齢 : 三十路のなかば住 所 : 長泉町(静岡県の東部)職 業 : 兼業主夫 → 一児の父ちゃん 個人事業主(フリーランス) Web制作全般、制作の下請け 広告デザイン全般
![Page 5: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/5.jpg)
Webデザイナー↓
Web/DTPデザイナー、フリーペーパーの編集↓
Webディレクター / プランニング / 営業↓
フリーランスのWeb制作者
![Page 6: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/6.jpg)
フェレット飼ってます
![Page 7: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/7.jpg)
よろしくお願いします
![Page 8: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/8.jpg)
1) コードを書く、ということ
![Page 9: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/9.jpg)
![Page 10: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/10.jpg)
![Page 11: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/11.jpg)
![Page 12: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/12.jpg)
![Page 13: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/13.jpg)
金額
市場
1) コードを書く、ということ
アプリが及ぼす市場インパクト
アッパー市場
ミドル市場
主要顧客
みんビズBiND
ローワー市場
100,000円
1,000,000円
hpb
![Page 14: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/14.jpg)
コードを書かなくてもWebサイトは作れる
コードを書くことで、それ以上にできることがある
1) コードを書く、ということ
![Page 15: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/15.jpg)
クロスブラウザ対応とか
1) コードを書く、ということ
87 9 10
![Page 16: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/16.jpg)
アプリにのってない要望対応とか
1) コードを書く、ということ
![Page 17: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/17.jpg)
Webサイトにおいてコード(HTML・CSS)は最終納品物
1) コードを書く、ということ
![Page 18: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/18.jpg)
2) Dreamweaver以外の選択肢
![Page 19: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/19.jpg)
Dreamweaverって重くないですか?
2) Dreamweaver以外の選択肢
Dreamweaverを高速化する方法→ 速いマシンを買うCSS Nite in OKAYAMA, Vol.3 にて
![Page 20: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/20.jpg)
2) Dreamweaver以外の選択肢
Dreamweaverはたしかに便利・ サイト管理とリンクの再設定・ テンプレート / ライブラリ機能・ デザインビュー(特にテーブル!)・ 入力補助 / ソースフォーマットの適用
![Page 21: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/21.jpg)
2) Dreamweaver以外の選択肢
しかし普段使いには如何せん重いそれなら…
「エディタを使い分ける」という方法論
![Page 22: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/22.jpg)
2) Dreamweaver以外の選択肢
普段のコーディング → 別のエディタDWでしかできないこと → DWで
![Page 23: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/23.jpg)
![Page 24: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/24.jpg)
2) Dreamweaver以外の選択肢
・ DWは専らコードビューという人にオススメ・ 何より軽快・ FTPも使えます(サイト機能)・ データベース(MySQL)にもアクセス可能・ コードシンタックス / 入力補助(サジェスト)・ Git / Subversionのクライアント機能
Coda 2という選択肢
![Page 25: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/25.jpg)
サイトごとに管理できます
![Page 26: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/26.jpg)
Coda内でFTPが使えます(Transmitなみの高機能)
![Page 27: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/27.jpg)
コード入力時には入力補助機能が便利
![Page 28: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/28.jpg)
画面分割もできます
![Page 29: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/29.jpg)
プレビューではSafariが動いてます
![Page 30: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/30.jpg)
2) Dreamweaver以外の選択肢
詳しくはCSS Nite in Ginza, Vol.65を( http://cssnite.jp/ginza/vol65/ )
![Page 31: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/31.jpg)
2) Dreamweaver以外の選択肢
WinならSublime TextがいいらしいですCoda 2は、Mac専用です、残念ながら。
![Page 32: Htmlコーディングの効率化 前編](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558ca408d8b42a27548b462e/html5/thumbnails/32.jpg)
後編に続く