• ホーム
• 購読申込
• ヘルプ
• アーカイブ

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

最終回 拡張機能でDreamweaverをパワーアップ！

株式会社ワンパクの近藤＆杉山の師弟コンビがDreamweaverの覚えておきたい便利な機能や、見落としていた機能などをお届けする本連載。今回で最終回となりました。最後に取り上げるのはDreamweaverの 「拡張機能」です。拡張機能をインストールすれば、Dreamweaverには搭載されていない機能を加えることができ、自分好みにカスタマイズすることができます。そして、「杉山のこれ知ってます？」のコーナーでは、ダミー画像を簡単に用意できるイメージプレースホルダーと、ファイル操作を制限できるクローク機能について紹介します。

入れておくと便利！ オススメ拡張機能

杉山：師匠～！ 便利なもの見つけちゃいましたよ～(*^▽^*)/

近藤：なんだ？

杉山：Dreamweaverの拡張機能です！ ただでさえ便利なDreamweaverが、拡張機能をインストールすると、ますます便利になっちゃうんですね！

近藤：そうだな、その名のとおり、Dreamweaverに搭載されていない機能を加え拡張することができるからな。

杉山：拡張機能のインストールは、DreamweaverのアプリケーションバーからExtension Managerを立ち上げるか、もしくはエクステンションファイル「.mxp」をダブルクリックするとExtension Managerが立ち上がるので、すぐに簡単にできちゃいました(^_^)

近藤：Extension ManagerはAdobeアプリケーションをインストールすると自動的にインストールされるが、入ってない場合はAdobeサイトからダウンロードできるぞ。

　【Adobe Extension Managerのダウンロード】

アプリケーションバーからExtension Managerを立ち上げる

Extension Managerのメニューの[ファイル]→[拡張機能をインストール]を選択し、インストールしたい拡張機能を参照する

インストールされた拡張機能の一覧が表示される
インストールされた拡張機能のオン・オフ切り替え、追加・削除の管理をする

近藤：どんな拡張機能をインストールしている？

杉山：そうですね～、拡張機能の配布サイト「Adobe Marketplace & Exchange」をチェックして探したりしていますが…。

近藤：無償・有償どちらもあり、またDreamweaverに限らず、他のAdobe製品の拡張機能もまとめられているな。

杉山：あとは、企業や個人のかたが制作されて自身のサイトで配布してくださっているものもインストールさせて頂いてますよ。jQueryやWordPressのコードヒントを表示してくれる拡張機能など便利ですよね！

　【Adobe製品の拡張機能を配布している「Adobe Marketplace & Exchange」】

　【Movable Type 5用の拡張機能】

　【HTML5で新規追加されたタグのコードヒント表示】

　【WordPressのコードヒント表示】

　【jQueryのコードヒント表示】

　【全角・半角置換】

※今回紹介しました拡張機能のインストールとご使用は、それぞれの制作者の説明をよくお読みのうえ、ご自身の責任においてご利用ください。

意外と難しくないってホント！？ 作ってみよう拡張機能！

杉山：みなさん、便利な拡張機能を作成して公開してくださってありがたいですよね～。でも、作るのって難しそうだなぁ…(+_+)

近藤：そうだな、難しいように感じるとは思うが…。実は、それがそうでもないんだぞ！

杉山：えっ…本当ですか！？(@_@)

近藤：Dreamweaverの拡張機能の処理は、一部Dreamweaver独自のJavaScriptオブジェクトも存在するが、ほとんどがhtmlと一般的なJavaScriptで書かれているんだ。また、Dreamweaverが提供しているAPIを使用して作成するんだ。

杉山：APIリファレンスは、Dreamweaverのメニューの[ヘルプ]→[Dreamweaverヘルプ]から見れるんですね！　かなり細かく書いてある！

近藤：作成時はそのリファレンスを参考にするといいぞ。他には、同じくヘルプ内の「拡張ガイド」も参考になるぞ。

　【Dreamweaver CS4 API リファレンス】

　【Dreamweaver CS4 拡張ガイド】

杉山：師匠！ Extension Managerのメニューに[ファイル]→[拡張機能を作成]ってありますよ？　ここから作成するのかな。…作成しようとすると、拡張子が「.mxi」のファイルを参照しようとしますよ。mxiって…？(@_@)

近藤：mxiファイルは、拡張機能の名称・開発者の名前・対応するアプリケーションやそのバージョン・使用するファイルなど、「拡張機能の情報」を記述したファイルだ。

　【mxiファイルフォーマットPDF】

杉山：使用するファイル？

近藤：「拡張機能の情報」を記述したmxiファイルとは別に、Dreamweaverに実行させたい「処理の内容」を記述したファイルも必要だから、どのファイルを参照するのか明記しておくんだ。処理の内容を記述したファイルとmxiファイルの準備ができたら…。

杉山：Extension Managerのメニュー[ファイル]→[拡張機能を作成]からmxiファイルを読み込むわけですね！

Extension Managerのメニューの[ファイル]→[拡張機能を作成]を選択し、該当のmxiファイルを参照する

近藤：そうだ。読み込まれたmxiファイルは、mxpファイルとして生成される。このmxpファイルをExtension Managerでインストールすれば、自分で作成した拡張機能が使えるぞ！

杉山：作り方の流れがわかったことだし、何か拡張機能を作ってみるぞー！(^_^)/

杉山の「これ知ってます？　ダミー画像ラクラク作成＆不要ファイルのアップをロック」

杉山：制作時に、画像データがすべてそろっているとは限りませんよね。でも、レイアウトの確認をしたいときなどは、ダミーの画像をあてておいたりしますが、ダミー画像をわざわざ別のソフトで作ったりしなくても、Dreamweaver上で用意することができます。

1.メニュー[挿入]→[イメージオブジェクト]→[イメージのプレースホルダー] を選択

2.名前・幅・高さ・代替テキストを入力

3.デザインビューで確認ができる(ブラウザでのプレビューはできない、一時的な確認方法)

杉山：続いては、クロークについてです。ローカルサイト内で、htmlファイルやcssファイルのほかに、素材ファイルである.psdや.flaを一緒に管理している場合、ファイルの同期をかけたときなど、素材ファイルをアップロードしてしまう可能性も出てきてしまいます。アップロードする必要のないファイルは、クロークを実行しておけば、PUTやGETなどの操作から除くことができます。クロークはファイル単位・フォルダ単位で実行することができます。

1.[サイトの管理]→[クローク]→[クロークを使用可能にする]にチェックをいれる([次で終わるファイルをクロークする]にチェックをいれるとクローク対象のファイルを拡張子で指定できる)

2.ファイルパネルで、該当フォルダもしくは該当ファイルを選択し、右クリック(Mac OSはCommandを押しながらクリック)から[クローク]→[クロークの実行]を選択 クロークが設定されたフォルダやファイルには赤の斜線が表示される

杉山：クロークを実行したファイルやフォルダは、[ファイル]パネルから選択して直接操作をすれば、その操作は反映されます。

連載を振り返って

近藤：それでは、おさらいを兼ねて今までの連載を振り返ってみようか。1回目は、「作業環境整備」についてだったな。

杉山：はい、自分の使いやすいようにレイアウトした作業環境を保存しておけるって知らなくて、それまでその都度レイアウト変更してたので、無駄な手間をかけてたなーって…(+_+)

近藤：デフォルトのままでももちろん使えるが、自分にとって使いやすいようにカスタマイズすれば、それは作業効率アップにつながるからな。

杉山：2回目は、うまく使えるようになりたかった「ライブラリ／スニペット／テンプレート」についてでしたね。その後の作業がだいぶ早くこなせるようになりました！

近藤：2回目で紹介した機能はDreamweaverの中でも基本であり、絶対覚えておかなければならない機能だな。これらの機能を使いこなせているのとそうでないのとでは、作業時間・クオリティなどに大きな差がでてしまう。

杉山：はい！　テンプレートの「オプション領域」機能をうまく使って、テンプレートプロパティで少し設定をすれば、あとはテキスト入力・画像挿入程度でページが作れる、そんな状態を目指して試行錯誤中です！

近藤：連載では、テンプレートの機能の一部についてしか書けなかったが、「オプション領域」以外にもたくさん便利な機能はあるぞ。どの機能を使用すれば一番効率的か考えて使い勝手のよいテンプレートを作れるようになるんだぞ！

杉山：はい！ 3回目は「ショートカットキー」についてでしたね。ショートカットキーは使っているつもりでしたが、知らなかったショートカットキーもありました。

近藤：新しく覚えたショートカットキーはしっかり使えているか？

杉山：はい、実はタグをたたむ機能ってあまり使ってなかったんですが、タグをたたむショートカットキー「Ctrl ＋ Shift ＋ J (Mac_OS： Command ＋ Shift ＋ J)」を覚えてからは、便利でよく使っています！　やっぱり、今やっている作業に必要のない箇所はたたんでしまえば、すごくスッキリして作業しやすいですね！(^_^)

近藤：ショートカットキーを使って作業しているとなんかカッコイイしな！

杉山：……。えーっと、…4回目は「正規表現を使った検索・置換」についてでしたよね。正規表現は、ちょっと敬遠していたんですよ、難しそうで…(+_+)

近藤：うむ。つきつめるにはかなり奥が深いが、よく使いそうな検索・置換パターンと、そのパターンで使うメタ文字を覚えて、少しずつ慣れていくことだな。

杉山：はい、「()」で括った文字列をグループ化して記憶しておき、「$n(nは任意の数字)」で参照するというのは、ものすごく便利でした。

近藤：今後、正規表現を使っていくうちに、他にも便利な検索・置換パターンを見つけておくといいぞ。見つけたら、クエリに保存しておけば、後からすぐに呼び出して使うこともできるな。

杉山：そして連載最後の今回は拡張機能についてでした。もともと便利な機能が搭載されているDreamweaverですが、その便利度をますます上げられるなんてうれしいですよね！(^_^)

近藤：そうだな。連載1回目から今回まで、作業効率をアップさせるために使いこなすべき機能を取り上げてきたんだが、キサマもかなり効率アップができているようだな。

杉山：はい！ もちろん、まだまだ学ぶべきところはありますが、今回の連載で取り上げてきたことはしっかりと身に付いてきたと思っています！

近藤：そうだな、Dreamweaverを使いこなせるようになる、それももちろん大切だが、それ以外のことにも目を向けていないといけないぞ。

杉山：それ以外というと？

近藤：ちょくちょく目にしているかもしれないが、HTMLの大きな改訂版としての「HTML5」、2012年に正式に勧告されるなんて言われているな。またそれより早く今年の6月頃には「JIS X 8341-3:2010」が告示されるなんて話もよく聞く。そのほか、まだまだ勉強しておかなければならないことばかりだ。

杉山：(@_@)…。まだまだガンバラネバ…

近藤：すべて覚え、そして使いこなせるようになるのが理想だが、なかなか難しいと思う。だからみんなで補完しあったりするんだと思うが、Dreamweaverを使いこなすことでもそれらを補完することもできる。新しいバージョンがでるたびにより便利になり、様々な機能が追加されてきたDreamweaverだから次のバージョン(CS5)にどんな機能が追加されるか楽しみだな！

杉山：はい！　本当に楽しみです！

近藤：でも個人的にはPhotoshopのCS5が楽しみなのだ★

杉山：あの、これDreamweaverの連載なんですが…。

近藤：そろそろ、真っ白な灰になりそうなので、この辺で…。

近藤＆杉山：連載第5回目までお付き合いくださいまして、ありがとうございました！

 

関連情報

• エッジニュースレター連載記事 : ワンパクの「もっと使いこなしてみよう！　Dreamweaver」
  • 第1回 まずはマイワークスペースの整備、そして作業開始！
  • 第2回 ライブラリ／スニペット／テンプレートで徹底効率化！
  • 第3回 蝶のように舞い、蜂のように刺せ、ショートカットキー！
  • 第4回 正規表現を使った検索・置換にチャレンジ！
• Adobe Dreamweaver CS4 製品ページ
• Adobe Dreamweaver CS4 体験版 ダウンロード

‹ 戻る

---