Embed Size (px)
Citation preview
DreamweaverとWordPressの いい関係
pictron.net
自己紹介
ピクトロンウェブプランニング 杉山 敦 企業・店舗・メーカーなどのWebサイトの 企画・コンサルティング・プロモーション・デザイン制作 http://www.pictron.net/ Twitter：@pictron2009 Facebook：http://www.facebook.com/atushi.sugiyama.5
自己紹介
昔はこんなこともしてました。もう過ぎ去りし過去の話。
Dreamweaverとは？
というわけで愛着があるので 今日はFireworksとの連携も含めて
なるべくたくさん事例をまじえて紹介します。
とばすぜベイビー
Dreamweaverとは？
• パッケージソフトを使う理由は効率をあげるため • Fireworks、Photoshopとの融合により デザイン←→コーディング間の作業がシームレス
• 独自のコード共有などで省力化を図れる。 • ビルトインされたオートマティズムからシナリオを学ぶ事も可能。
• プラグイン、拡張性、カストマイズの柔軟性。Dreamweaver自身もDOMである。
最近の開発環境事情
ウェブデザイナー コーディングエンジニア
プログラマー
01/プロローグ
• エクセルからコピペでテーブル 列選択してクラス定義できたり。 ファイル＞書き出し＞テーブルでCSVの書き出し。
• ライブラリー、テンプレートでソース共有 • コード検索・置換 タグで検索では、属性ごと、タグごとの絞り込みが可能
• インクルードファイルをタブで閲覧 FTPクロークを使ってFTP対象にしないディレクトリーなどをロックできる。
• メディアクエリー別のプレビューで確認
Dreamweaverってこんな時に便利！例えば．．．
02/ 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/
ローカルPCでWordPress環境を構築
03/ 環境設定・サイト定義
• 環境設定－＞コードフォーマット －＞CSS．．． インデントなどを変更
• ファイルの比較 Mac：TextWranglerをダウンロード http://www.barebones.com/products/textwrangler/index.html
下記のパスを指定 Macintosh HD:Applications:TextWrangler.app:Contents:Helpers:twdiff Win： DFなどをダウンロードして、パスをダイアログで指定
• サイト定義のリモートファイルを「ローカル/ネットワーク」でWordPressのディレクトリーを指定
03/ 環境設定・サイト定義
• サイト固有のコードヒント サイト＞サイト固有のコードヒントでwordpressのディレクトリーを指定。 wordpressの関数やプラグインの関数もスキャン
• Mac：Spotlightのキーがコンフリクトするために変更 システム環境設定->Spotlightで変更。 Ctl+Spaceでコードヒント
04/ ライブビュー・ライブコード
• ライブビューでデザインビュー上でWordPressをプレビュー Ctrl+クリックでリンクへのページ移動も可能
• インスペクターはFireBugの要素をセレクトするボタンと同じ • コードセレクト、ホールディングエディタでソースを見やすく • ライブコードで実行結果のHTMLからCSSを参照 ライブコードはJavasctiptのライブラリーなどのコード確認にも 便利。 例）ライブコードはJavascritpでのコード書き出しの関数の確認にも威力を発揮します。
05/ デザインタイムスタイルシート
• デザインタイムスタイルシート デザインビュー上でソースには関係なく一時的に スタイルシートを適用する。
• ヘッダーを読み込まなければ適用されないスタイルを 一時的に適用。
• JavaScriptの演出でhiddenなどにしているコードをデザインビューで表示する。
06/ 日々の作業にこれ便利
• スニペット コードのブロックを挿入するだけでなく、ハイライトの前と後ろに挿入できる。
• 閉じタグを挿入プラグイン http://design.kayac.com/topics/downloadfiles/End_comment.mxp
• ヒストリーからオリジナルのコマンドを作る。 • GITWeaver subversionしか使えないがプラグインで提供されているようだが 残念ながら動作確認できず。
07/ データベース参照
• データベースに接続して、テーブル、カラムなどの情報を参照できます。データの中身も見れますが、日本語が表示されません。
08/ モダンコーディングへの対応
• Zen-cording はPlugin で提供されています。 http://code.google.com/p/zen-coding/downloads/list
• インストールした時にメニューが文字化けする場合があります。 ユーザー＞ライブラリ＞Application Support＞Adobe＞Dreamweaver CS5＞ja_JP＞Configuration を削除すれば直ります。
08/ モダンコーディングへの対応
• CSS3などで色を付ける時にカラーの形式を選択できる。 RGB、RGBAをピッカーから選ぶ。
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などの場合も同じです。
09/ Fireworks6
Fireworksとの連携
• CSSプロパティ CSS３のプロパティをグラフィックから出す。
• CSSスプライトで書き出し。 Fireoworksのスライスの画像をCSSスプライトで 画像を統合してスタイルまで書き出しできる。
• CSS Sprite Extensionのプラグインを使うと他の画像をあつめて CSSスプライトで書き出す事が可能です。 http://web.r-studio.jp/fieworks/articles/introduce_csssprite_extension.html
10/ Fireworks6
Flash6の書き出し
• Flashでのスコアアニメーション、バナーアニメーション程度のものはJavascriptでの書き出しはけっこう使えます。 Toolkit for CreateJSをダウンロードしてインストール http://www.adobe.com/jp/products/flash/flash-to-html5.html
