7/7にwordbench神戸で使ったDreamweaverの資料です。

1. DreamweaverとWordPressの
いい関係
pictron.net

2. 自己紹介
ピクトロンウェブプランニング 杉山 敦
企業・店舗・メーカーなどのWebサイトの
企画・コンサルティング・プロモーション・デザイン制作
http://www.pictron.net/
Twitter：@pictron2009
Facebook：http://www.facebook.com/atushi.sugiyama.5

3. 自己紹介
昔はこんなこともしてました。もう過ぎ去りし過去の話。

4. Dreamweaverとは？
というわけで愛着があるので
今日はFireworksとの連携も含めて
なるべくたくさん事例をまじえて紹介します。
とばすぜベイビー

5. Dreamweaverとは？
• パッケージソフトを使う理由は効率をあげるため
• Fireworks、Photoshopとの融合により
デザイン←→コーディング間の作業がシームレス
• 独自のコード共有などで省力化を図れる。
• ビルトインされたオートマティズムからシナリオを
学ぶ事も可能。
• プラグイン、拡張性、カストマイズの柔軟性。
Dreamweaver自身もDOMである。

6. 最近の開発環境事情
コーディングエンジニア
ウェブデザイナー
プログラマー

7. 01/プロローグ
Dreamweaverってこんな時に便利！例えば．．．
• エクセルからコピペでテーブル
列選択してクラス定義できたり。
ファイル＞書き出し＞テーブルでCSVの書き出し。
• ライブラリー、テンプレートでソース共有
• コード検索・置換
タグで検索では、属性ごと、タグごとの絞り込みが可能
• インクルードファイルをタブで閲覧
FTPクロークを使ってFTP対象にしないディレクトリーなどを
ロックできる。
• メディアクエリー別のプレビューで確認

8. 02/ WordPress環境を構築
ローカルPCでWordPress環境を構築
• Mamp,Xampなどの設定がわからない場合は
Desktop Serverが便利です。
• 以前のWordBenchで紹介しましたの、この記事を
参考に
h+p://www.pictron.net/2012/04/08/48-­‐wordbench%E7%A5%9E
%E6%88%B8%E3%81%A7%E7%B4%B9%E4%BB%8B%E3%81%97%E3%81%9F
%E5%86%85%E5%AE%B9/

9. 03/ 環境設定・サイト定義
• 環境設定−＞コードフォーマット
−＞CSS．．．
インデントなどを変更
• ファイルの比較
Mac：TextWranglerをダウンロード
http://www.barebones.com/products/textwrangler/index.html
下記のパスを指定
Macintosh HD:Applications:TextWrangler.app:Contents:Helpers:twdiff
Win： DFなどをダウンロードして、パスをダイアログで指定
• サイト定義のリモートファイルを「ローカル/ネットワーク」で
WordPressのディレクトリーを指定

10. 03/ 環境設定・サイト定義
• サイト固有のコードヒント
サイト＞サイト固有のコードヒントでwordpressのディレクトリーを
指定。
wordpressの関数やプラグインの関数もスキャン
• Mac：Spotlightのキーがコンフリクトするために変更
システム環境設定->Spotlightで変更。
Ctl+Spaceでコードヒント

11. 04/ ライブビュー・ライブコード
• ライブビューでデザインビュー上でWordPressをプレビュー
Ctrl+クリックでリンクへのページ移動も可能
• インスペクターはFireBugの要素をセレクトするボタンと同じ
• コードセレクト、ホールディングエディタでソースを見やすく
• ライブコードで実行結果のHTMLからCSSを参照
ライブコードはJavasctiptのライブラリーなどのコード確認にも
便利。
例）ライブコードはJavascritpでのコード書き出しの関数の確認にも
威力を発揮します。

12. 05/ デザインタイムスタイルシート
• デザインタイムスタイルシート
デザインビュー上でソースには関係なく一時的に
スタイルシートを適用する。
• ヘッダーを読み込まなければ適用されないスタイルを
一時的に適用。
• JavaScriptの演出でhiddenなどにしているコードをデザインビュー
で表示する。

13. 06/ 日々の作業にこれ便利
• スニペット
コードのブロックを挿入するだけでなく、ハイライトの前と後ろに挿
入できる。
• 閉じタグを挿入プラグイン
http://design.kayac.com/topics/downloadfiles/End_comment.mxp
• ヒストリーからオリジナルのコマンドを作る。
• GITWeaver
subversionしか使えないがプラグインで提供されているようだが
残念ながら動作確認できず。

14. 07/ データベース参照
• データベースに接続して、テーブル、カラムなどの情報を参照できま
す。データの中身も見れますが、日本語が表示されません。

15. 08/ モダンコーディングへの対応
• Zen-cording はPlugin で提供されています。
http://code.google.com/p/zen-coding/downloads/list
• インストールした時にメニューが文字化けする場合があります。
ユーザー＞ライブラリ＞Application Support＞Adobe＞
Dreamweaver CS5＞ja_JP＞Configuration
を削除すれば直ります。

16. 08/ モダンコーディングへの対応
• CSS3などで色を付ける時にカラーの形式を選択できる。
RGB、RGBAをピッカーから選ぶ。

17. 08/ モダンコーディングへの対応
• LESS、SASSなどのCSS拡張メタ言語に対応
手軽に初めてみるのにAirのツール
SASS：SCOUT http://mhs.github.com/scout-app/
LESS：Codekit http://incident57.com/less/
• 拡張子を追加。
Users/ユーザー名/Library/Application Support/Adobe/Dreamweaver CS6/
Configuration
CS5からアプリケーションフォルダよりユーザーフォルダのConfigurationが優先
OSX LIONでライブラリーフォルダーが非表示場合は次のコマンド
chflags nohidden ~/Library/ 元に戻すには chflags hidden ~/Library
• Extensions.txt
CSS,LESS,SASS:Style Sheets
• MMDocumentTypes.xml
macfileextension="css, less,scss”,winfileextension="css, less,scss”
※tpl,cptなどの場合も同じです。

18. 09/ Fireworks6
Fireworksとの連携
• CSSプロパティ
CSS３のプロパティをグラフィックから出す。
• CSSスプライトで書き出し。
Fireoworksのスライスの画像をCSSスプライトで
画像を統合してスタイルまで書き出しできる。
• CSS Sprite Extensionのプラグインを使うと他の画像をあつめて
CSSスプライトで書き出す事が可能です。
http://web.r-studio.jp/fieworks/articles/introduce_csssprite_extension.html

19. 10/ Fireworks6
Flash6の書き出し
• Flashでのスコアアニメーション、バナーアニメーション程度のもの
はJavascriptでの書き出しはけっこう使えます。
Toolkit for CreateJSをダウンロードしてインストール
http://www.adobe.com/jp/products/flash/flash-to-html5.html