DreamweaverとWordPressの        いい関係        pictron.net
自己紹介ピクトロンウェブプランニング 杉山 敦企業・店舗・メーカーなどのWebサイトの企画・コンサルティング・プロモーション・デザイン制作http://www.pictron.net/Twitter:@pictron2009Facebook:h...
自己紹介昔はこんなこともしてました。もう過ぎ去りし過去の話。
Dreamweaverとは?    というわけで愛着があるので  今日はFireworksとの連携も含めてなるべくたくさん事例をまじえて紹介します。    とばすぜベイビー
Dreamweaverとは?•  パッケージソフトを使う理由は効率をあげるため•  Fireworks、Photoshopとの融合により   デザイン←→コーディング間の作業がシームレス•  独自のコード共有などで省力化を図れる。•  ビルトイ...
最近の開発環境事情コーディングエンジニア	                ウェブデザイナー	                プログラマー
01/プロローグ  Dreamweaverってこんな時に便利!例えば...•  エクセルからコピペでテーブル 列選択してクラス定義できたり。 ファイル>書き出し>テーブルでCSVの書き出し。•  ライブラリー、テンプレートでソース共有•  コー...
02/ WordPress環境を構築      ローカルPCでWordPress環境を構築•  Mamp,Xampなどの設定がわからない場合は Desktop Serverが便利です。•  以前のWordBenchで紹介しましたの、この記事を ...
03/ 環境設定・サイト定義•    環境設定−>コードフォーマット         −>CSS...     インデントなどを変更•    ファイルの比較     Mac:TextWranglerをダウンロード     http://www....
03/ 環境設定・サイト定義•    サイト固有のコードヒント     サイト>サイト固有のコードヒントでwordpressのディレクトリーを     指定。     wordpressの関数やプラグインの関数もスキャン•    Mac:Spo...
04/ ライブビュー・ライブコード•    ライブビューでデザインビュー上でWordPressをプレビュー     Ctrl+クリックでリンクへのページ移動も可能•    インスペクターはFireBugの要素をセレクトするボタンと同じ•    ...
05/ デザインタイムスタイルシート•    デザインタイムスタイルシート     デザインビュー上でソースには関係なく一時的に     スタイルシートを適用する。•    ヘッダーを読み込まなければ適用されないスタイルを     一時的に適用...
06/ 日々の作業にこれ便利•    スニペット     コードのブロックを挿入するだけでなく、ハイライトの前と後ろに挿     入できる。•    閉じタグを挿入プラグイン     http://design.kayac.com/topics...
07/ データベース参照•    データベースに接続して、テーブル、カラムなどの情報を参照できま     す。データの中身も見れますが、日本語が表示されません。
08/ モダンコーディングへの対応•    Zen-cording はPlugin で提供されています。     http://code.google.com/p/zen-coding/downloads/list•    インストールした時に...
08/ モダンコーディングへの対応•    CSS3などで色を付ける時にカラーの形式を選択できる。     RGB、RGBAをピッカーから選ぶ。
08/ モダンコーディングへの対応•    LESS、SASSなどのCSS拡張メタ言語に対応     手軽に初めてみるのにAirのツール     SASS:SCOUT http://mhs.github.com/scout-app/     L...
09/ Fireworks6                         Fireworksとの連携•    CSSプロパティ     CSS3のプロパティをグラフィックから出す。•    CSSスプライトで書き出し。     Fireow...
10/ Fireworks6                         Flash6の書き出し•    Flashでのスコアアニメーション、バナーアニメーション程度のもの     はJavascriptでの書き出しはけっこう使えます。  ...
Upcoming SlideShare
Loading in …5
×

7/7 WordBench kobe dreamweaver seminar

5,052 views
5,012 views

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,052
On SlideShare
0
From Embeds
0
Number of Embeds
3,442
Actions
Shares
0
Downloads
4
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

7/7 WordBench kobe dreamweaver seminar

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

×