SlideShare une entreprise Scribd logo
1  sur  19
Télécharger pour lire hors ligne
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/プロローグ



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

Contenu connexe

Tendances

Dreamweaver
コードヒントHowTo
Dreamweaver
コードヒントHowToDreamweaver
コードヒントHowTo
Dreamweaver
コードヒントHowToAkira Maruyama
 
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャマークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ力也 伊原
 
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜Takuma Nishiyama
 
次世代CSS組版〜Vivliostyle プロジェクト
次世代CSS組版〜Vivliostyle プロジェクト次世代CSS組版〜Vivliostyle プロジェクト
次世代CSS組版〜Vivliostyle プロジェクトShinyu Murakami
 
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみようJunko Nukaga
 
TeXの後継として、HTML5&CSS組版〜Vivliostyleプロジェクト
TeXの後継として、HTML5&CSS組版〜VivliostyleプロジェクトTeXの後継として、HTML5&CSS組版〜Vivliostyleプロジェクト
TeXの後継として、HTML5&CSS組版〜VivliostyleプロジェクトShinyu Murakami
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化masaaki komori
 
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録タカシ キタジマ
 
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイトrie05
 
W3C日本会議発表資料
W3C日本会議発表資料W3C日本会議発表資料
W3C日本会議発表資料Makoto Murata
 
MT DDC Tokyo テーマ編 - 森和恵
MT DDC Tokyo テーマ編 - 森和恵MT DDC Tokyo テーマ編 - 森和恵
MT DDC Tokyo テーマ編 - 森和恵Mori Kazue
 
WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介Takashi Uemura
 
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でーWP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でータカシ キタジマ
 
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyleShinyu Murakami
 
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかたHiroshi Urabe
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSTakeharu Igari
 
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoyaWordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoyaShinichi Nishikawa
 
WordPressってブログじゃないの?
WordPressってブログじゃないの?WordPressってブログじゃないの?
WordPressってブログじゃないの?tokumotonahoko
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)Horiguchi Seito
 
ブログの枠を超える?ためのWordPressカスタマイズ入門
ブログの枠を超える?ためのWordPressカスタマイズ入門ブログの枠を超える?ためのWordPressカスタマイズ入門
ブログの枠を超える?ためのWordPressカスタマイズ入門muracchi
 

Tendances (20)

Dreamweaver
コードヒントHowTo
Dreamweaver
コードヒントHowToDreamweaver
コードヒントHowTo
Dreamweaver
コードヒントHowTo
 
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャマークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
 
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜
 
次世代CSS組版〜Vivliostyle プロジェクト
次世代CSS組版〜Vivliostyle プロジェクト次世代CSS組版〜Vivliostyle プロジェクト
次世代CSS組版〜Vivliostyle プロジェクト
 
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
 
TeXの後継として、HTML5&CSS組版〜Vivliostyleプロジェクト
TeXの後継として、HTML5&CSS組版〜VivliostyleプロジェクトTeXの後継として、HTML5&CSS組版〜Vivliostyleプロジェクト
TeXの後継として、HTML5&CSS組版〜Vivliostyleプロジェクト
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
 
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
 
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
 
W3C日本会議発表資料
W3C日本会議発表資料W3C日本会議発表資料
W3C日本会議発表資料
 
MT DDC Tokyo テーマ編 - 森和恵
MT DDC Tokyo テーマ編 - 森和恵MT DDC Tokyo テーマ編 - 森和恵
MT DDC Tokyo テーマ編 - 森和恵
 
WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介
 
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でーWP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
 
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
学術出版のHTML5標準化とCSS組版――Scholarly HTMLとVivliostyle
 
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
 
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoyaWordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoya
 
WordPressってブログじゃないの?
WordPressってブログじゃないの?WordPressってブログじゃないの?
WordPressってブログじゃないの?
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
 
ブログの枠を超える?ためのWordPressカスタマイズ入門
ブログの枠を超える?ためのWordPressカスタマイズ入門ブログの枠を超える?ためのWordPressカスタマイズ入門
ブログの枠を超える?ためのWordPressカスタマイズ入門
 

En vedette

New mba detailed_syllabus_for_sem_iv_2
New mba detailed_syllabus_for_sem_iv_2New mba detailed_syllabus_for_sem_iv_2
New mba detailed_syllabus_for_sem_iv_2Sanju Gohil
 
The Evolution of Facebook Marketing - Ignite Social Media
The Evolution of Facebook Marketing - Ignite Social MediaThe Evolution of Facebook Marketing - Ignite Social Media
The Evolution of Facebook Marketing - Ignite Social MediaJim Tobin
 
No BS Social Media Revisited - Jason Falls and Jim Tobin
No BS Social Media Revisited - Jason Falls and Jim TobinNo BS Social Media Revisited - Jason Falls and Jim Tobin
No BS Social Media Revisited - Jason Falls and Jim TobinJim Tobin
 
Dodge and Organic Social Media Marketing
Dodge and Organic Social Media MarketingDodge and Organic Social Media Marketing
Dodge and Organic Social Media MarketingJim Tobin
 
How to drive revenue from social media marketing
How to drive revenue from social media marketingHow to drive revenue from social media marketing
How to drive revenue from social media marketingJim Tobin
 
Secrets of the Top 50 Facebook Fan Pages Jim Tobin
Secrets of the Top 50 Facebook Fan Pages Jim TobinSecrets of the Top 50 Facebook Fan Pages Jim Tobin
Secrets of the Top 50 Facebook Fan Pages Jim TobinJim Tobin
 

En vedette (6)

New mba detailed_syllabus_for_sem_iv_2
New mba detailed_syllabus_for_sem_iv_2New mba detailed_syllabus_for_sem_iv_2
New mba detailed_syllabus_for_sem_iv_2
 
The Evolution of Facebook Marketing - Ignite Social Media
The Evolution of Facebook Marketing - Ignite Social MediaThe Evolution of Facebook Marketing - Ignite Social Media
The Evolution of Facebook Marketing - Ignite Social Media
 
No BS Social Media Revisited - Jason Falls and Jim Tobin
No BS Social Media Revisited - Jason Falls and Jim TobinNo BS Social Media Revisited - Jason Falls and Jim Tobin
No BS Social Media Revisited - Jason Falls and Jim Tobin
 
Dodge and Organic Social Media Marketing
Dodge and Organic Social Media MarketingDodge and Organic Social Media Marketing
Dodge and Organic Social Media Marketing
 
How to drive revenue from social media marketing
How to drive revenue from social media marketingHow to drive revenue from social media marketing
How to drive revenue from social media marketing
 
Secrets of the Top 50 Facebook Fan Pages Jim Tobin
Secrets of the Top 50 Facebook Fan Pages Jim TobinSecrets of the Top 50 Facebook Fan Pages Jim Tobin
Secrets of the Top 50 Facebook Fan Pages Jim Tobin
 

Similaire à 7/7 WordBench kobe dreamweaver seminar

論理思考とプログラミング 2013f#10
論理思考とプログラミング 2013f#10論理思考とプログラミング 2013f#10
論理思考とプログラミング 2013f#10Noritada Shimizu
 
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)Kenji Shirane
 
Awsのインフラをデザインパターン駆使して設計構築
Awsのインフラをデザインパターン駆使して設計構築Awsのインフラをデザインパターン駆使して設計構築
Awsのインフラをデザインパターン駆使して設計構築Monstar Lab Inc.
 
Azure でサーバーレス、 Infrastructure as Code どうしてますか?
Azure でサーバーレス、 Infrastructure as Code どうしてますか?Azure でサーバーレス、 Infrastructure as Code どうしてますか?
Azure でサーバーレス、 Infrastructure as Code どうしてますか?Kazumi IWANAGA
 
Wordpress buddypress3
Wordpress buddypress3Wordpress buddypress3
Wordpress buddypress3Shoichi Otomo
 
Drupal deployment trial on Engine Yard
Drupal deployment trial on Engine YardDrupal deployment trial on Engine Yard
Drupal deployment trial on Engine Yard惠 紀野
 
はじめての Azure 開発
はじめての Azure 開発はじめての Azure 開発
はじめての Azure 開発Yoshitaka Seo
 
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編Yasuhito Yabe
 
アプリ開発&チーム管理で 役立った拡張機能
アプリ開発&チーム管理で役立った拡張機能アプリ開発&チーム管理で役立った拡張機能
アプリ開発&チーム管理で 役立った拡張機能Masaki Suzuki
 
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」ericsagnes
 
CloudFormation Getting Started with YAML
CloudFormation Getting Started with YAMLCloudFormation Getting Started with YAML
CloudFormation Getting Started with YAMLYukitaka Ohmura
 
MODXで“超”キレッキレのブログ作る秘訣公開します
MODXで“超”キレッキレのブログ作る秘訣公開しますMODXで“超”キレッキレのブログ作る秘訣公開します
MODXで“超”キレッキレのブログ作る秘訣公開しますKei Mikage
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座Shinichi Nishikawa
 
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?Shinichi Nishikawa
 
達人出版会のご紹介(技術編)
達人出版会のご紹介(技術編)達人出版会のご紹介(技術編)
達人出版会のご紹介(技術編)masayoshi takahashi
 
はじめてのASP.NET MVC5
はじめてのASP.NET MVC5はじめてのASP.NET MVC5
はじめてのASP.NET MVC5Tomo Mizoe
 
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディングDreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディングMori Kazue
 
始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~
始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~
始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~貴志 上坂
 

Similaire à 7/7 WordBench kobe dreamweaver seminar (20)

論理思考とプログラミング 2013f#10
論理思考とプログラミング 2013f#10論理思考とプログラミング 2013f#10
論理思考とプログラミング 2013f#10
 
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
 
Awsのインフラをデザインパターン駆使して設計構築
Awsのインフラをデザインパターン駆使して設計構築Awsのインフラをデザインパターン駆使して設計構築
Awsのインフラをデザインパターン駆使して設計構築
 
Azure でサーバーレス、 Infrastructure as Code どうしてますか?
Azure でサーバーレス、 Infrastructure as Code どうしてますか?Azure でサーバーレス、 Infrastructure as Code どうしてますか?
Azure でサーバーレス、 Infrastructure as Code どうしてますか?
 
Wordpress buddypress3
Wordpress buddypress3Wordpress buddypress3
Wordpress buddypress3
 
俺とHashiCorp
俺とHashiCorp俺とHashiCorp
俺とHashiCorp
 
Drupal deployment trial on Engine Yard
Drupal deployment trial on Engine YardDrupal deployment trial on Engine Yard
Drupal deployment trial on Engine Yard
 
はじめての Azure 開発
はじめての Azure 開発はじめての Azure 開発
はじめての Azure 開発
 
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
 
アプリ開発&チーム管理で 役立った拡張機能
アプリ開発&チーム管理で役立った拡張機能アプリ開発&チーム管理で役立った拡張機能
アプリ開発&チーム管理で 役立った拡張機能
 
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
 
CloudFormation Getting Started with YAML
CloudFormation Getting Started with YAMLCloudFormation Getting Started with YAML
CloudFormation Getting Started with YAML
 
MODXで“超”キレッキレのブログ作る秘訣公開します
MODXで“超”キレッキレのブログ作る秘訣公開しますMODXで“超”キレッキレのブログ作る秘訣公開します
MODXで“超”キレッキレのブログ作る秘訣公開します
 
WordPressって何
WordPressって何WordPressって何
WordPressって何
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
 
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
 
達人出版会のご紹介(技術編)
達人出版会のご紹介(技術編)達人出版会のご紹介(技術編)
達人出版会のご紹介(技術編)
 
はじめてのASP.NET MVC5
はじめてのASP.NET MVC5はじめてのASP.NET MVC5
はじめてのASP.NET MVC5
 
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディングDreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
 
始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~
始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~
始めよう! ドメイン駆動設計&マイクロサービス開発 ~C# と Azure Service Fabric で最高の DDD 開発を~
 

Plus de Atushi Sugiyama

第2回 concrete5 神戸勉強会 in 大阪「知っててよかったアドオン特集」
第2回 concrete5 神戸勉強会 in 大阪「知っててよかったアドオン特集」第2回 concrete5 神戸勉強会 in 大阪「知っててよかったアドオン特集」
第2回 concrete5 神戸勉強会 in 大阪「知っててよかったアドオン特集」Atushi Sugiyama
 
concrete5のECサイト構築事例
concrete5のECサイト構築事例concrete5のECサイト構築事例
concrete5のECサイト構築事例Atushi Sugiyama
 
デザイナーでも構築できる多言語/マルチデバイス対応サイト
デザイナーでも構築できる多言語/マルチデバイス対応サイトデザイナーでも構築できる多言語/マルチデバイス対応サイト
デザイナーでも構築できる多言語/マルチデバイス対応サイトAtushi Sugiyama
 
Concrete5で運用をデザイン
Concrete5で運用をデザインConcrete5で運用をデザイン
Concrete5で運用をデザインAtushi Sugiyama
 
Concrete5スターターテーマ考察
Concrete5スターターテーマ考察Concrete5スターターテーマ考察
Concrete5スターターテーマ考察Atushi Sugiyama
 
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そうフロンエンドトレンドについて話そう
フロンエンドトレンドについて話そうAtushi Sugiyama
 

Plus de Atushi Sugiyama (6)

第2回 concrete5 神戸勉強会 in 大阪「知っててよかったアドオン特集」
第2回 concrete5 神戸勉強会 in 大阪「知っててよかったアドオン特集」第2回 concrete5 神戸勉強会 in 大阪「知っててよかったアドオン特集」
第2回 concrete5 神戸勉強会 in 大阪「知っててよかったアドオン特集」
 
concrete5のECサイト構築事例
concrete5のECサイト構築事例concrete5のECサイト構築事例
concrete5のECサイト構築事例
 
デザイナーでも構築できる多言語/マルチデバイス対応サイト
デザイナーでも構築できる多言語/マルチデバイス対応サイトデザイナーでも構築できる多言語/マルチデバイス対応サイト
デザイナーでも構築できる多言語/マルチデバイス対応サイト
 
Concrete5で運用をデザイン
Concrete5で運用をデザインConcrete5で運用をデザイン
Concrete5で運用をデザイン
 
Concrete5スターターテーマ考察
Concrete5スターターテーマ考察Concrete5スターターテーマ考察
Concrete5スターターテーマ考察
 
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そうフロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
 

Dernier

持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦Sadao Tokuyama
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdfAyachika Kitazaki
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~arts yokohama
 

Dernier (12)

持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 

7/7 WordBench kobe dreamweaver seminar

  • 1. DreamweaverとWordPressの いい関係 pictron.net
  • 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プロパティ CSS3のプロパティをグラフィックから出す。 •  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