tamlog

主にwebのフロント回り たまに登山

DWとCodeKitのKit Language

スポンサーリンク

やりたいこと

更新案件、非CMSの場合で 更新はDreamweaverが良いんだがテンプレート機能はちょっと面倒って時に良い プレビュー機能、関連ソース表示機能もスペシャルペーストも使えるので便利 コンパイルの度、静的HTMLを書き出してくれるのも嬉しい 変数化とインクルートのみでif文など使えないが小中規模であれば十分だと思う また、CodeKitを導入すればSassなどコンパイルする物の敷居がぐっと下がるので複数人の作業でも受け渡しが楽

ただし、CodeKitは有料、Mac専用アプリなので注意


手順

  1. kitファイルを開けるようにする
  2. コードカラーを設定する
  3. 「サイトの定義」をする
  4. インクルードさせる
  5. 無駄なコメントを削除、HTMLの整形

1. kitファイルを開けるようにする

/Dreamweaver CC 2014.1/ja_JP/Configuration/Extensions.txt

:HTML DocumentsにKITを追加

HTM,HTML,HTA,HTC,XHTML:HTML DocumentsHTM,HTML,HTA,HTC,XHTML,KIT:HTML Documents

※次の単語で検索すると分かりやすい :HTML Documents

2.コードカラーを設定する

/Dreamweaver CC 2014.1/ja_JP/Configuration/DocumentTypes/MMDocumentTypes.xml

winfileextensionとmacfileextensionに拡張子kitを追加

winfileextension="html,htm,shtml,shtm,stm,tpl,lasso,xhtml"
macfileextension="html,htm,shtml,shtm,tpl,lasso,xhtml,ssi"winfileextension="html,htm,shtml,shtm,stm,tpl,lasso,xhtml,kit"
macfileextension="html,htm,shtml,shtm,tpl,lasso,xhtml,ssi,kit"

※次の単語で検索すると分かりやすい winfileextension="html macfileextension="html

3.「サイトの定義」をする

お好みでサイトの定義をする。

4.インクルードさせる

CodeKitのインクルードにDreamWeaverで認識させるために1行追加

<!-- @include "../include/header.kit" --><!-- @include "../include/header.kit" -->
<!-- #include file="../include/header.kit" -->

※注:CodeKitでコンパイルすると無駄なコメントが出力されてしまう。

5.無駄なコメントを削除、HTMLの整形

gulpで無駄なコメントを削除、HTMLの整形すると良い。


複数人で作業しだすと結局Dreamweaverのテンプレートで管理したほうがやりやすいだろうと思った。 しかし、静的HTMLを書き出してくれるし、学習コストも低いのでKit Languageを使っても無駄にはならないから良い。初期構築で取りあえず分けといて後でしっかりテンプレート化とかで良いかな。