ワンパクの「もっと使いこなしてみよう！Dreamweaver」

第2回ライブラリ／スニペット／テンプレートで徹底効率化！

今月号の記事

株式会社ワンパクの近藤＆杉山の師弟コンビが Dreamweaver の覚えておきたい便利な機能や、見落としていた機能などをお届けする連載の第2回目。今回取り上げるのは、「ライブラリ」「スニペット」「テンプレート」です。いずれも作業を効率よく進めるために役立つ機能です。これらの機能を知っている／知らない、使いこなしている／こなしていないでは、作業時間が大きく違ってきます。ぜひマスターして、サクッと仕事を終わらせて飲みにいく時間を作りましょう！　そして、好評？の「杉山のこれ知ってます！」コーナーでは、サイトの定義を共有する方法と、ターゲットブラウザを設定する方法を紹介します。

コードを瞬時に挿入「ライブラリ・スニペット」

近藤：今回はライブラリ・スニペット、そしてテンプレートの機能についてみていこう。

杉山：はい、今回もよろしくお願いします！

近藤：まずはライブラリだが…。

杉山：はい、ライブラリはコードを登録可能で、各ページにコードがあっとゆう間に挿入できますよね。挿入後にライブラリを修正すれば、挿入箇所に修正が反映されるというのもすごく便利ですよね(^^)作成したライブラリは「Library」フォルダ内に格納されるから共有もすぐできますしね。
…あれ？　でも挿入した後は、個別に修正ができないんですね…ここだけなおしたいところがあるのになぁ…(>_<)

近藤：そういう使い方なら、スニペットのほうが適しているぞ。スニペットはライブラリとは異なり、登録したコードを修正しても、すでに挿入した箇所へ反映はされないが、挿入した箇所それぞれで個別に修正が可能だ。よく使用するコードで汎用的なものを登録・管理しておくのだ。

杉山：よく使用するコードで汎用的なもの…CSS・JavaScript の読み込みは必ず記述しているから、スニペットに登録しておけばよかったんですね。ファイル名とパスを編集すれば、どのサイトでも使い回しができますもんね。記述が必要な時は、別ファイルからコピーしていました…(+_+)

近藤：いちいち別ファイルを開くのは効率が悪いな。スニペットに登録しておけば、コードの挿入はあっとゆう間だ。HTML だけではなく、CSS や JavaScript ももちろん登録できるぞ。

杉山：はい！　これからスニペットをたくさん増やしておきます！　他には何をスニペットにしておこうかな…。xml 宣言やmeta、CSS だと clearfix なんかも登録しておけば便利ですね(^^)

近藤：そうだな。他には、社内でエリア分けのルール・id名の命名規則などが決まっていれば、div 要素の大きな枠組みもスニペット化できるな。

杉山：コードはドラッグ・ダブルクリックで挿入できるので、入力ミスも減りますね。新しく追加したスニペットは作業者同士で共有しておきたいです。ライブラリと違って、サイト内には自動でスニペットデータは作られていないようですが…登録しているコード一覧を渡せばいいのかな…(?_?)

近藤：そんな一覧は必要ないぞ。Windows（Vista）はC:\Users\ユーザ名\AppData\Roaming\Adobe\Dreamweaver CS4\ja_JP\Configuration\Snippets、Mac は/Users/Library/Application Support/Adobe/Dreamweaver CS4/ja_JP/Configuration/Snippetsに新規に追加したスニペットのデータが保存されている。このデータを共有したい相手のマシンの同様のフォルダへコピーしてもらえば共有が可能だぞ。

杉山：師匠！　スニペットを右クリックすると「キーボードショートカットの編集」が選択できて、各スニペットに対してキーボードショートカットを割り当てることもできましたよ！　すでに使用されているショートカットの場合は警告で教えてくれました。スニペットの中でも特に使用頻度が高いものはショートカットを割り当てれば、さらに便利ですね(^^)

スニペットパネル-キーボードショートカットの編集

1. ショートカットを割り当てたいスニペットを右クリック（Macはcontrol + クリック）し、「キーボードショートカットの編集」をクリックします。

キーボードショートカットの登録

2. 該当のスニペットを選択し、「キー」の項目でショートカットのキーをクリックします。

3. 「OK」をクリックすると反映されます。ショートカット割り当て後はスニペット名の横にショートカットキーが表示されるようになります。割り当てたショートカットの削除や編集も同様にできます。

近藤：えっ！　スニペットにショートカットを設定できるのか…知らなかった…。

使いこなさないとソン！「テンプレートのオプション領域」

近藤：それでは次にテンプレート機能の見落としがちな機能をみていこう。そもそも、なぜテンプレートを使うんだ？

杉山：えっと、テンプレートで管理することによって複数ページの修正が容易になり、品質管理にも有効だからです。

近藤：制作者として立派な答えだ。しかし！　真の理由は「ラクしたいから」だ！

杉山：えっ！　そんなこと言ってもいいんですか！？(@_@)

近藤：事実だから仕方がない。こんな便利な機能があるんだからサクッと仕事を終わらせて飲みにいく時間を作らなきゃソンだ！

杉山：ハァ…。

近藤：ところでテンプレートではどんな機能を使っている？

杉山：ヘッダとかフッタとかブロックごとにわけてネストして管理したり、リピート領域を使ったり…ですかね。

近藤：うん、いいぞ！　だが理想的なテンプレートには及ばないな。

杉山：理想的なテンプレート！？

近藤：そうだ。理想的なテンプレートとは少しの設定をおこなうだけで、あとはテキスト入力、画像の挿入程度でページ作成できるレベルのテンプレートだ。

杉山：どうすればいいんですか？

近藤：例えば、ページ内には共通要素が複数存在することがある。そんなときに「オプション領域」機能を使って一括で定義してしまおう。下のページの共通要素は何だと思う？

画像と文字列が同じ文字列として複数存在するようなサイトの例

杉山：えっと…、わかりました！　<title> タグ内のページタイトル部分とパンくずのテキストが同じです！　ページタイトルは画像のようなのでこれは指定しないといけませんね。

近藤：あまい！　あまちゃんすぎる！　ALT 属性を忘れておる！

杉山：はっ！(>_<)

近藤：心の目で HTML のコードを見なくてはいかん。ディレクトリやファイル命名規則が決まっていれば、画像のパス（相対パスで記述の際）はどのページも同じになるから固定で記述できる。ちなみに正解は以下のようになる。（赤枠部）

近藤：これらに「オプション領域」を設定すれば一括して管理することが可能になるのだ。<head>タグ内に下記のコメントを追加するのだ。

杉山：追加しました！ valueが空になっていますがいいんですか？

近藤：問題ない。このテンプレートを元にページを作成する際にこの値を「テンプレートプロパティ」から設定することになる。それからここで指定したnameの値を「@@( )@@」内に指定し、適用させたい箇所に記述すれば設定終了だ。それじゃ保存して次にすすむぞ。

作成したテンプレートのプロパティ、pagetitleをコード内に複数指定

杉山：あれっ！？　エラーがでています！

エラーメッセージ「@@(...)@@ディレクティブを編集可能領域内ですることはできません」

近藤：なに！？………あっ！　スマン、スマン。Dreamweaver は <title> 内のテキストを自由に編集できるよう親切な設定になっているから、コメントを削除しなければいかんのだ…ゴニョゴニョ……。

杉山：……あとは大丈夫なんですか？(-_-)

近藤：はい…。大丈夫だと思います。

タイトル部分の編集可能領域を解除
赤枠部を忘れずに削除

近藤：え～と、それでは実際にこのテンプレートを元にファイルを作成してみよう。え～と、「ファイル」→「新規」→「テンプレートから作成」でいま作成したテンプレートを選択してもらえます？

杉山：はい。できました……。

近藤：それでは「修正」→「テンプレートプロパティ」でウィンドウを開いてもらえますでしょうか？

修正-テンプレートのプロパティ

杉山：ここでさっき設定したpageTitleを選択して設定したい値を下のテキストボックスに入力すればいいんですね！

テンプレートのプロパティ

近藤：おっしゃるとおりです……。あと「オプション領域」は条件分岐も使えるので表示する画像の切り替えやインクルードファイルの切り替え、パンくずの階層の指定、レイアウトの指定などにも応用して使えるんです。

オプション領域のコード
1.「vol」の値が「2」の場合に適用（表示される）
2.「vol」の値が「3」の場合に適用（表示される）

杉山：あれ！？ <head> 内のコメントタグの「type」属性の値が「number」になってますよ？

近藤：気づきました！？　ここには以下の5つの型を指定できるんですよ。

typeの属性	指定する値の型
text	テキスト
number	数値
URL	URL
boolean	trueまたはfalse
color	16進法の色

近藤：まずは「text」と「boolean」「number」ぐらい覚えておけば大丈夫じゃないかなと思います。また条件式は論理演算子のような記述をするので JavaScript などおさらいしておくとより複雑な設定もできるんじゃないかと思います。

[例]


杉山：「オプション領域」って覚えることが多そうですが、使いこなしたら本当に簡単にページ作成ができるようになりそうですね！　欲を言えば、もっと具体的なことも教えてほしかったんですが…「リピート領域」の便利な使い方とか…。

近藤：具体的なことももっと取り上げたいが、このまま続けると文字数が1冊の本なみになりそうだから、今回はここまで…。

杉山：はい、まずは今回の応用から始めたいと思います。テンプレートを作成する際にちゃんと要素を確認したりして構造・構成を考えないといけませんね。同じことはライブラリ・スニペットを作成する時にもあてはまりますもんね。今回の内容もとてもためになりました！

近藤：そうだろ！　ためになっただろ！

杉山：エラー出してしまっていましたけどね！(^m^)

近藤：………(-_-;)

杉山のこれ知ってます？
「“サイトの定義” を素早く共有＆ターゲットブラウザお好み設定」

杉山：サイトの定義の設定は案件ごとに異なり、また複数人で作業をする場合もあります。この機能を知らなかった時は、他の作業者へメールやメモで、その都度、設定内容を伝えていたのですが、そんな手間はもうかけずに済みます。サイトの定義情報を書き出して、共有したい相手にファイルを読み込んでもらえば素早く設定の共有ができますよ。書き出されたファイルは拡張子.ste で保存されています。

「サイトの管理」ダイアログウィンドウに表示される「書き出し」ボタンと「読み込み」ボタン