2010年8月アーカイブ

アドビのサイト内の関連書籍欄にて、『効率的なサイト制作のためのDreamweaverの教科書』をご紹介いただきました。ありがとうございます。

デザイン・広告・マーケティングなどの人材派遣を行っているAQUENTが発行しているエイクエント クリエイターズマガジンにて、『効率的なサイト制作のためのDreamweaverの教科書』のプレゼント企画を行っていただきました。

8月31日締め切りです。登録されている方は、ぜひメールマガジンをご覧ください。

p.234ページの手順で4の図版内にて、［アプリケーション］内に「Firefox.app」が表示されていますが、これはMacのみです。Windowsでは「Firefox.exe」を選択してください。

Firefoxに限らず、アプリケーションについている拡張子はMacでは.app、Windowsでは.exeです。

［閉じタグコメントを挿入］拡張機能（p.060）や、HTML5 Pack（p.188）、また、Dreamweaver CS5でバリデート機能を復活する拡張機能などをインストール後に、メニューバーが文字化けしてしまうことがあります。

この場合には、一度、それぞれのユーザーの「Configuration」フォルダーを捨ててから、Dreamweaverを再起動してみてください。

Dreamweaverがインストールされているフォルダーと同じ階層にある「Configuration」フォルダーを捨ててしまうと、Dreamweaverが起動しなくなりますのでご注意ください。

「Configuration」フォルダーの場所については、p.035に掲載されています。またはWebページ制作の効率をUPするためのカスタマイズ | デベロッパーセンターをご覧ください。

• Macromedia - Dreamweaver ドキュメント : Configuration フォルダ

追記（2011年9月21日）：

「Configuration」フォルダーを丸ごと捨ててしまうと、すべての拡張機能がオフになってしまいます。メニューバーだけの文字化けであれば「Configuration」フォルダー内の「Menu」のみを捨ててからDreamweaverを再起動することで直ります。

• Dreamweaverのメニューが「文字化け」してしまった時の対処法｜DESIGN Oil BLOG

Dreamweaver CS3がリリースされる直前、2007年に「Dreamweaver Wish List 2007」というドキュメントを作成しました。

探しものをしていたら、出てきたので、ダウンロードいただけるように「Dreamweaver Wish List 2007」（PDF）おいておきます。

その後、CS4/CS5とリリースされましたが、手が入ったのは下記のみでした。虚しい。

• ルールのON/OFF（Dreamweaver CS5で実装）
• ［新規CSSルール］ダイアログボックスの［セレクタ］欄
• ［新規CSSルール］ダイアログボックスの［セレクタ］欄でのcommand+A
• CSSのルール定義ダイアログボックスのUI（プロパティ名はローカライズしない）※ただし、1文字目が大文字
• デザインとコードの横分割
• コードビューの分割機能（※ただし、デザインビューなしでの分割になってしまう...）
• ドキュメントツールバーの［タイトル］のフィールドを長く
• カラー値のショートハンド対応（#ffffff→#fff）（※ただし、すべてショートハンドになってしまう）

発売から2週間ですが、『効率的なサイト制作のためのDreamweaverの教科書』の増刷が決定しました。ご支援ありがとうございます！

p.092では、クイックタグ編集の「タグに属性を追加」をご紹介しています。

クイックタグ編集を使うことで、たとえば、

<h4>石嶋 未来（いしじま・みき）</h4>

のふりがな部分にspan要素を設定、さらに.furiganaというクラス属性を当て

<h4>石嶋 未来<span class="furigana">（いしじま・みき）</span></h4>

のようにする作業を非常にスピーディに行えます。

クイックタグ編集は、いわば、デザインビュー内で使うコードビューの小窓。ただし、デザインビューだけでなく、コードビュー内でも同様に作業できます。活用すると効率化につながりますので、ぜひ身につけてください。

なお、クイックタグ編集は、Dreamweaver 3.0（1999年にリリース）からの機能です（p.016「Dreamweaverの歴史」をご参照ください）。

映像、Web／モバイル、ゲーム、広告・出版などのクリエイティブ業界の派遣・転職などをサポートしているクリーク・アンド・リバー社さんが今週（18日水曜日）発行したメールマガジンにて、『効率的なサイト制作のためのDreamweaverの教科書』のプレゼント企画を行っていただきました。

登録されている方は、ぜひメールマガジンをご覧ください。

下記の表は、アドビのサイトに掲載されているDreamweaver CS5/CS4/CS3の機能比較です。

• アップグレードの詳細 | Adobe Dreamweaver CS5

「iPhone Simulator.app」をインストールしている場合、Dreamweaverのブラウザープレビューに加えておけば、Dreamweaverで編集のドキュメントを「iPhone Simulator.app」でプレビューすることが可能です。

ただし、事前に「iPhone Simulator.app」でSafariを起動しておく必要があります。

なお、「iPhone Simulator.app」は、「Developer/Platforms/iPhoneSimulator.platform/Developer/Applications」内にインストールされています。

iPhone Simulatorを使うには、iPhoneデベロッパプログラム（有償）に加入し、iPhone SDKをインストールする必要があります。

• iPhoneデベロッパプログラムとは (iPhone Developer Program)： - IT用語辞典バイナリ
• EZ-NET 登録レポート： iPhone Developer Program に登録する

Mac版のInternet Explorerなど、すでに開発元から配布が終了してしまっているブラウザーもあります。古いブラウザーを入手したい場合には「browser archive」が便利です。

ブラウザーのほか、iTunesなどの古いアプリケーションをダウンロードできるOld Version Downloads - OldApps.comもあります。

Dreamweaverには、さまざまなプレビュー方法があります。

それぞれ一長一短ありますので、目的に応じて使い分けましょう（p.031の補足です）。

• 1　ライブビューはSafariと同じWebKitをエンジンとして使っています。ただし、Dreamweaver CS4、Dreamweaver CS5、Dreamweaver CS5（+HTML5 pack）ではWebKitのバージョンが異なります。
• 2　デザインビューでは編集できませんが、コードビューでは編集可能です（F5キーでデザインビューに反映します）
• 3　当然ながらマウスオーバーを認識しないデバイス用では、マウスオーバーは無効です。
• 4　HTML5 packのインストールが必要です。

DreamweaverのライブビューのWebKitのバージョンの差違については、CSS3で書いたドラえもんをDreamweaver CS5のライブビューで見てみた。 - dwlog.netを参照してみてください。

本書（『効率的なサイト制作のためのDreamweaverの教科書』）では「jQuery+yuga.js」（p.133）および、「jQueryを使ったロールオーバー」（jQuery+西畑さん作成のプラグイン）（pp.286-287）にて、jQueryを使ったロールオーバーをご紹介しています。

いずれも2つの画像を用意しますが、その際、「aaa.gif」「aaa_on.gif」のように、拡張子を除くファイル名部分に「_on」を付けた画像を用意しておくことがポイントです。

なお、yuga.jsは、リンク先と同一ページの場合、「_cr」がついた画像に差し替えられます。これによって、グローバルナビゲーションなどで現在位置を表現することができます。

Fireworks CS4まで

Fireworksではステート（過去にはフレーム）を使って、1ファイル内にロールオーバー用の画像を管理します。つまり、ステート1は通常、ステート2はロールオーバー用ということです。

Fireworks CS4までは、ステート2には「_f2」、ステート3には「_f3」が付きますが、これを変更することができません。jQueryのプラグインの方の記述を変更する必要があります。

変更前

"$1_on$2"

変更後

"$1_f2$2"

p.135では、次のようにjQueryを読み込んでいます。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");</script>

p.286では、次のように読み込んでいますが、この2つは結果的には同じ。いずれもGoogleのサーバー上のjQueryファイルを読み込んでいます。inputlog - Google AJAX APIを使ってjQueryを読み込むで取り上げられているように「jQueryをキャッシュできる」といったメリットがあります。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

jQueryをダウンロードしてローカルにおき、そのjQueryファイルを参照することもできます。

<script type="text/javascript" src="js/jquery.min.js"></script>

出先などでインターネット回線がない場合などには、ローカルにおいておかないと実行できませんので、仕事のスタイルによっても使い分けるとよいでしょう。

『Web制作の現場で使うjQueryデザイン入門』の著者でもある西畑一馬さんが運営されているto-Rにて『効率的なサイト制作のためのDreamweaverの教科書』を取り上げていただきました。ありがとうございます。

• [書評]効率的なサイト作成のためのDreamweaverの教科書[to-R]

ブラウザーごとのCSSの解釈の差異をなくすための、ブラウザー・フォーマティング（CSSリセット）と呼ばれる手法をとることがよく行われます。

• reset.css（ ブラウザー・フォーマティング） とは（PDF、1ページ、3.0MB）

ブラウザーによって要素ごとのmargin/paddingの値が異なるため、過去には 「* {margin: 0; padding: 0; } 」のように記述することですべての要素のmargin/paddingを0に初期化するという方法がとられていました。

現在では、対象となる要素を厳選して行う方向に向かいつつあります。 複数のサイトを制作する方は、ほかの新規サイト制作時にも利用していけるように、研究してみるとよいでしょう。

• Tantek Celik（2004年）
• Really Undoing html.css（2004年9月）
• Reworked Reset（2007年4月）
• Reset Reloaded（2007年5月）
• Resetting Again（2008年1月）
• CSS Reset ? a simpler option（2010年4月）

pp.129-135で取り上げているロールオーバーについての補足です。

クリッカブルであることを表現するひとつの手段として王道のロールオーバー効果も、DreamweaverやFireworksが自動的にはき出す JavaScriptを使ったものから、画像置換を使ったもの、そして、jQueryを使ったもの、さらにCSSのみで透明度を変更するものなど、その実装は変遷を遂げてきています。

これまでの流れをざっくり復習しながら、作り手/使い手両方がハッピーなロールオーバーはどこに向かうのかを一緒に考えましょう。

Dreamweaverでは、タイムスタンプ（ファイルの最終更新日）をたよりにローカル／リモートを同期します。どこがどのように変わっているかを確認するには「ファイルの比較」機能を使います。WindowsではWinDiffなどを利用してください。

• ファイルの比較（PDF、2ページ、4.5MB）

CSSのコメントは「/*」ではじまり、「*/」で終了します。 これを一括で削除するには、［検索および置換］ダイアログボックスで正規表現にチェックをつけ、検索フィールドに次のように入力します。

/\*.*?\*/

［すべて置換］をクリックすれば、一括削除することができます（もちろん、［置換］ボタンをクリックして順番に削除していくことも可能）。

「*」は正規表現のメタ文字のため、「\」（バックスラッシュ）をつける必要があります。

たとえば、Dreamweaverに用意されているCSSレイアウトのテンプレートやSpryフレームワーク内のCSSファイルに（ごっそり）入っているCSSコメントを削除するときに役立ちます。

Dreamweaverに限らず、Adobe CS5から語尾の音引き（おんびき）を付けることが基本になっています。

これは内閣告示、および、マイクロソフトの方針変更に倣ったものなのかしら？と予測されます。

• 「マイコンピュータ」が「マイコンピューター」になる日 | 未分類 | 『Weblogy』

Dreamweaverでの音引きは、ほかのCS5アプリケーションに比べて、ちょっと中途半端な実装になっています。

音引きをつけるもの

• サーバー
• フォルダー
• ブラウザー
• セレクター
• タグセレクター
• エディター

音引きを付けないもの（とりあえずDreamweaver CS5）

• プロパティ
• ライブラリ
• カテゴリ
• アクセシビリティ

通常に制作業務を行う上では、支障はありませんが、ご紹介まで。

追記（10月23日）：

“中途半端な実装”でなく、この実装が正しいようです。

• カタカナ用語の末尾の音引きについての考察 - DTP Transit

［挿入］パネルをバー形状にして再起動すると、カテゴリの部分が次のようにずれてしまいます。

これを直すには次の2つのアプローチがあります。

• ワークスペースを登録し、ワークスペースのリセットを行う
• アプリケーションバーの表示／非表示を繰り返す（［ウィンドウ］メニューの［アプリケーションバー］）

どちらの“貧乏生活の知恵”的なアプローチで悲しいですが、こちらで対処してください。

Dreamweaverのデフォルトでは、編集中のドキュメントのみが対象で、サイトに対して実行することはできません。

植木友浩さんが制作された「サイト内ソースフォーマット 」拡張機能を利用すると、サイトに対して実行することができます。

私の環境では、Dreamweaver CS5でも動きましたが、ご利用はご自身の判断で行ってください。

ノンブル（ページ番号）で使われているフォントは「FF Justlefthand」です。

大変申し訳ありませんが、次の誤りがありました。

章	ページ数	場所	誤り	正しい
2-1	42	中央右側の図版のキャプション	［ファイル］パネルを表示するキーボードショートカットはcommand+スペース+shift+Fキー（Ctrl+Shift+Fキー）	［ファイル］パネルを表示するキーボードショートカットはcommand+shift+Fキー（F8キー）
3	254	手順5のキャプション	ぴったり上の場合には確認ないが	ぴったり上の場合には確認できないが
3	280	手順1図版		この時点では、まだ、a、a:visitedなどのCSSルールはない

今後、『効率的なサイト制作のためのDreamweaverの教科書』に関しての誤りはこちらの正誤表をアップデートしていきます。

p.025の「フォント」では、コードビューの表示に適したフォントとして、数字の0と大文字のO（オー）、数字の1と小文字がl（エル）が区別しやすいPanic Sansを紹介しています。

このPanic Sansは、Codaから抽出することができます。

• Coda 1.1: シングルウィンドウ Web 構築環境 | appling weblog
• Blog.okuryu : Coda に標準搭載の美麗フォント Panic Sans の正体

Windows環境の方は、次のブログエントリーを参照して、フォントを見つけてみてください。

• ウノウラボ Unoh Labs: プログラミングに使いやすいフォントを選ぶ
• Windowsでプログラミングに最適なフォントを探す - ナレッジエース
• プログラミング時に最適なフォント「Inconsolata」 | Weboo! Returns.

Amazonでは最高286位まで上がりました。ご支援ありがとうございます。

Part 3「Dreamweaverで作る」の素材データはこちらをご利用ください。

• Part 3, Practice 1（p.200）
• Part 3, Practice 2（p.236）（マークアップが終了し、CSSレイアウトの開始時）
• Part 3, Practice 3（p.284）（ロールオーバーを開始する前）
• Part 3, Practice 4（p.290）（テンプレートを開始する前）

『効率的なサイト制作のためのDreamweaverの教科書』が明日（8月10日）発売になります。現在、オンライン書店ではAmazonと楽天ブックスで取り扱いがあります。

• Amazon
• 楽天ブックス

Dreamweaverのテンプレートタグを削除してしまうと、テンプレート機能が使えなくなってしまいます。極力残しておくのが賢明ですが、どうしても削除したい場合には次のアプローチがあります。

ドキュメント単位で削除する

［コマンド］メニューの［XHTMLのクリーンアップ］をクリックしてダイアログボックスを表示し、［Dreamweaverの特殊マークアップ］オプションにチェックを入れます。

［OK］をクリックすると、次のアラートが表示されます。こちらに記載されているように、Dreamweaverテンプレートタグだけでなく、ライブラリ、トレーシングイメージに関してのコメントタグも削除されます。

• 厚い書籍を開いたままにしておけるブックストッパー - DTP Transit

サイト定義を行うことで、次のようなメリットがあります。言い換えれば、Dreamweaverを使うメリットともいえます。サイト定義は、実際の制作を行う前に最初に行いましょう。

• サイト内のファイルにアクセスしやすくなったり、サイト全体をアップロードできる
• ファイルやフォルダーのリネーム（名称変更）やディレクトリ変更（階層の移動）などを行ったときに、自動的にリンク更新が行われる
• ライブラリ、テンプレートなど、サイト構築を行う上で便利なDreamweaverの機能を利用できる
• ページごと、サイト全体のリンクチェックや、リンクの置き換えが可能
• FTP（サーバーへのアップロード作業）はもちろん、リモートサイトとの同期
• チェックイン／チェックアウトによるグループワークの支援（同時に同じファイルを編集させない）

なお、サイト定義のインターフェイスは、Dreamweaver CS5で一新されています（pp.041-042）。

グループワークを行う場合、また、PCのリプレース（異なる機器への環境移行）などを行う場合に、次の項目を行うとよいでしょう。

• サイト定義の書き出し（p.43）：［サイトの管理］ダイアログボックスで、サイトを選択して［書き出し］をクリックし、サイト情報をファイル（拡張子は「.ste」）として書き出すことができます。ログイン、パスワードを含めることができますが、取り扱いに注意しましょう。なお、書き出したsteファイルをダブルクリックすると、自動で読み込みが完了します。
• ワークスペース：「Configuration」内の「Workspace」フォルダに入っています。
• キーボードショートカット（pp.034-035）
• タグライブラリのカスタマイズ情報（p.220）
• スニペット（pp.054-055）

HTMLやCSSのコードフォーマットを反映させるには、次の方法があります。

• ［コマンド］メニューの［ソースフォーマットの適用］をクリック
• ［コマンド］メニューの［選択範囲にソースフォーマットを適用］をクリック（選択したソースコードのみに、部分的にフォーマットを反映させる）
• コーディングツールバーから（下図）

ソースフォーマットの適用で適用されるのは、次の設定です（なお、コードフォーマットとソースフォーマットは同じ意味）。

• HTMLのインデントやタグの大文字・小文字、改行コードなどに関する設定：環境設定の［コードフォーマット］カテゴリでのインデントの設定（pp.26-27）
• CSSのソースコードに関してのインデント、プロパティごとの改行、開始波カッコの位置、ルール間の空白行などの設定：［コードフォーマット］環境設定の［高度なフォーマット］の［CSS］ボタンをクリック
• タグの前後の改良：タグライブラリーエディター（［編集］→［タグライブラリ］）（参照：p.027, p.220）