2017.06.26
みんなどうしてる？(Dreamweaver)HTMLコーディングの環境・作業手順
こんにちは佐々木です。
みなさんHTMLコーディングの環境や、作業手順ってどうしていますか？
実は自分の方法が当たり前だと思っていても、人それぞれ違ったりしますよね。
今回は、私が実際にコーディングの時に使っている環境、手順等をご紹介します！
少し長いので、ハンドスピナーでも回しながらご覧ください。
使っているソフトウェア
- Dreamweaver CC
- Fireworks CS6（メイン）、Photoshop CC(デザイン次第）
- PNGoo:PNG画像ファイル圧縮用ソフト
https://pngquant.org/ (PNGoo — Windows GUI for batch conversion)からダウンロード - Chrome拡張 markup checker:見出しタグのチェック漏れ確認用
https://chrome.google.com/webstore/detail/markup-checker/kehdochffindoajoiaeleblnaioffbkp?hl=ja - Chrome拡張 tdk:タイトル、ディスクリプション、OGPタグのチェック漏れ確認用https://chrome.google.com/webstore/detail/tdk/nidbndcmlccgghfbiccmaoaoghchhnoc?hl=ja
- Winmerge:ファイルの差分比較用http://www.geocities.co.jp/SiliconValley-SanJose/8165/winmerge.html
- git:ファイルの管理と差分提出用
作業工程
私は下記のようにしています。
- デザインから全画像の切り出し
- Dreamweaverで大きくセクションに区切って、HTMLタグを配置
（場合によってはこの時に全てHTMLタグを配置） - DreamweaverでCSSを作成 2に戻ってを繰り返す
- ブラウザ上でタイトル、ディスクリプション、キーワード、OGP等の確認
- 必要があればJavascriptをコーディング
全画像の切り出し
最初に全ての画像を切り出してしまうのは、ツール間の行き来で生じるタイムロスを減らすためと、
画像を切っている段階で頭の中でHTML/CSSコーディングの仮組をするためです。
最初に全体の組み立てをする事で、画像切り出し時点でこの部分は難しいぞ・・・・等が見えてきますし、画像を切っている時点でHTMLとCSSの組み立てができるので時間を無駄にしません。
また、この時に難しいJS部分などがあり、その他の部分が多い場合には、JS部分は画像で仮配置するなどがオススメです。
慣れてこないと難しいかもしれませんが、都度画像を切り出しながらHTMLコーディング -> CSSコーディングをしていると、ツール間の移動だけでかなりのタイムロスになります。
画像を切り出す時ですが、私は背景ごと切り出す場合にはスライス。
透過させる場合にはCtrl+Shift+Alt+Zでビットマップにして -> 新規キャンパス -> 貼り付けで書き出しています。
画像切り出しと頭の中でHTML/CSSコーディングオススメです。
あ、くれぐれもデザインの元データでコーディングしないでくださいね。
作業するときは、元デザインデータのコピーをデスクトップに用意して作業しましょう。
間違って保存したら大変です！
Dreamweaverで大きくセクションに区切って、HTMLタグを配置
２スクロールぐらいであれば、一気にHTMLタグを配置してしまうことの方が多いのですが、
あまりに長いページでHTMLタグを配置していると、CSSコーディング時に行ったり来たりする可能性が高くなるので、
長いページの場合には、大きなまとまり（セクション）に区切ってHTMLコーディング -> CSSコーディングの手順で作業するのがオススメです。
また、繰り返しの部分等は、一つ分だけのHTML/CSSコーディングをしてから繰り返しの原稿をいれていくと良いでしょう。
ブラウザ上でタイトル、ディスクリプション、キーワード、OGP等の確認
HTMLコーディングしている最中からALT属性や最初からわかっているテキストは、正しく設定していくのがオススメです。
その上でコーディングの大詰めの段階で改め見落としがちな、ディスクリプション、キーワード、OGP等を確認しましょう。
作業者はついついやったつもりで提出してしまいますが、間違っているとおもって見直すのも必要です。
また、下記私が作ったChrome拡張も便利ですので、是非お使いください。
Javascriptをコーディング
私はJavascript関係は最後の最後で良いのではないかと思っています。
同時進行してしまった場合、Javascriptでもしもはまってしまうと、HTML/CSSコーディングに大きな遅延が出かねないです。
Dreamweaverでのオススメ設定等
- Emmetを使う
- サイト設定は必ず行う
- 良く行う動作はショートカットに登録する
- コードビューオプションで非表示文字をONにする
- GIT機能（CC2017のアップデートで追加)
- コードフォーマット
- 状況に応じてデザインをライブに
Emmet
なんだか使い方が分からずに敬遠している人もいるのではないでしょうか。
使うのはほんの一部で良くて、タグ内選択や、下記のようなCSSプロパティの設置等に大変便利です
-bxz これが↓に一発で変換されるなんて便利ですよね。 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
サイト設定
サイト設定をしないでコーディングしている人結構多いと思います。
サイト設定は絶対に設定した方が良いと思います！
なぜなら、相対ルートパス（/から始まるパス）でのHTMLコーディングや、検索置換（サイト内一括）、画像ファイル名の変更時にも自動で対応してくれるからです。
ショートカットを使う
何か繰り返しの動作があれば、ショートカットはないかな？ 設定できないかな？と考えてみましょう。
ただし最低限で良いです。
覚えられないぐらいショートカットを作っても意味がないので。
コードビューオプションで非表示文字をONにする
この機能をONにすることで、半角スペースと全角スペースのミスや、改行位置、タブの位置なども分かりやすくなります。
GIT機能
CC2017のアップデートで搭載されました。
Dreamweaverに搭載されていなくともGITを使うことは推奨です。
一人で作業していたとしても便利ですので、使っていない方は是非使ってみてください。
コードフォーマット
意外に知っていなかったりする機能で、ソースコードのインデントを自動調整してくれます。
半角スペース２つを１インデントとするような、ルール設定をできます。
状況に応じてデザインをライブに
ライブ状態ですと、動作が重くなってしまいますが、
ブラウザを開いたり閉じたりするよりは早いので、細かな再現が必要な場合には重宝します。
例えば、Javascriptが動作しないといけないような場合にもレンダリングをしてくれます。
以上です、いかがでしたでしょうか？
過去にDreamweaverの記事を書いていたのでこちらも是非見てみてください！
