ブログについて
Dreamweaverの紹介
2024.05.30
制作
こんにちは、クリエイティブ制作部です。
最近、webサイトなどの実装を行う際にDreamweaverというソフトを使用する機会が多くなりました。そこで、今回はDreamweaverの便利な機能について紹介したいと思います。
Dreamweaverとは
Dreamweaver(ドリームウィーバー)とはAdobe社が開発・提供するwebデザイン・アプリデザインのためのソフトウェアです。HTML、CSS、JavaScriptなど、webページ作成に使用されるさまざまな言語をサポートしています。コード入力を助ける機能がついているため、短時間で柔軟なコーディングができるのが魅力です。また、同じAdobe社が提供する画像編集ソフトの「Adobe Photoshop」やグラフィックデザインソフトの「Adobe Illustrator」との高度な連携も可能なため、高品質なwebサイト制作が可能になります。
Dreamweaver(Dw)のメリットと便利な機能
ここでは高度なサイト制作が可能なDwのメリットと便利な機能を紹介したいと思います。
コードアシスト機能
サイトのコーディングを行う際にはプログラミング言語の知識が必要です。しかし、Dwにはコード入力を助けてくれるコードアシスト機能があるため、全てのコードを入力する必要がなく効率よくコードを組むことができます。また、こちらの機能は初心者の練習時には機能をオフにすることもできます。
ライブビューでの編集ができる
Dw以外のエディタにもデザインプレビュー機能はありますが、Dwのライブビュー機能はコーディング中にリアルタイムでページの見た目を確認できます。さらにライブビューを表示しながらコードの編集もできるため、デザインの試行錯誤を効率的に行うことができます。
ExcelやWordからのデータ移行
Dwには、ExcelやWordからのデータ移行を簡単にする機能があります。特にテーブルデータやテキストベースのコンテンツの移行には便利です。
Excelからのデータ移行
１. ExcelファイルをCSV（カンマ区切り値）形式に変換します。
２.その後、 Dw内で新たにHTMLファイルを作成し、ファイル内でテーブルを作成します。
３. テーブル作成後、CSVファイルを開きその内容をコピーしてDwのテーブル内にペーストします。
ペースト完了後、ExcelのテーブルデータがDwのHTMLテーブルに転送されます。
Wordからのデータ移行
１. Wordドキュメントのテキストを直接コピーして、DwのHTMLファイルにペーストします。
２. ペースト完了後、テキストは自動的に適切なHTMLタグで囲まれます。
ただし、特殊なフォーマットやスタイルは必ずしも正確に反映されるわけではないため、適宜調整が必要です。
紹介した方法により、DwはExcelやWordからのデータ移行を効率的に行うことが可能です。ただし、これらのデータ移行は基本的にテキストベースであり、画像や他のメディアは含まれないため注意が必要です。
検索・置換機能
検索・置換機能は、ファイル全体またはファイル内の特定のテキストを、効率的に検索・置換するための便利な機能です。この機能は、特定のテキストの位置を迅速に検索したり、一括してテキストを置換したりする際に非常に役立ちます。
検索・置換機能を使用すると、単純なテキスト検索だけでなく、特定のHTMLタグや属性、CSSセレクタなどを含む複雑な検索条件も指定できます。これにより、プロジェクトの構造やスタイルに関する詳細な変更を簡単に行うことができます。
また、この機能はプロジェクト全体を対象とすることも、開いている特定のファイルを対象とすることも可能です。そのため、大規模なプロジェクトでも効率的に修正することができます。
ファイル選択部分で特定のフォルダを選択し、「選択したファイル内を検索」で検索すれば、フォルダ内の全ファイル（Dreamweaverに紐づけのあるファイルのみ）を一括で検索、置換できます。
対象のファイルの範囲の設定
・選択中のファイルを対象
・Dreamweaverで開いているすべてのファイルを対象
・ファイルウィンドウに表示されている選択中のフォルダ内全てのファイルを対象
・選択中のテキスト範囲を検索
・タグを含まないデザインビュー側での検索
・選択したコード範囲を対象
スニペット機能
スニペットは、再利用可能なコードブロックを保存しておくための機能です。スニペットは、HTML、CSS、JavaScriptなどのコードを含むことができ、コードを記述するプロセスを効率化できます。
スニペットの作成方法
１. まず使用したいコードを書きます。
２. 次に、そのコードを選択し、「スニペット」パネルの「新規スニペット」ボタンをクリックします。
３. 新規スニペットダイアログボックスが表示されるので、スニペット名を入力し、「OK」をクリックします。
一度コードを記述して、スニペットとして保存しておくと、スニペットパネルでそれをダブルクリックして複数の場所に挿入できます。
たとえば、スニペットに登録できるのは「ブロックに挿入」と「選択範囲を囲む」の2種類があります。そのため以下のような囲みが使用可能です。
- <div class="sample"><br>
- 〜囲みたい内容〜<br>
- </div>
また、以下の様により詳細にコードの登録をおこなうことで、同じようなコードを繰り返し入力する手間を省くことができます。
- <div id="test_wrap">
- <h3></h3>
- <p></p>
- <div id="testbox_1">
- <h4></h4>
- <p></p>
- </div>
- <div id="testbox_2">
- <h4></h4>
- <p></p>
- </div>
- </div>
- <!-- ▲/test_warp▲ -->
このように、スニペット機能を使用することでコードの再利用が簡単にでき、開発の効率性を大幅に向上させます。
ワークスペースの調整
Dwのワークスペースは自分の好きなように調整できます。
下記画像の様にそれぞれのバーに名前がついています。例えば、画像ではEのパネルが右側にありますが左側に表示させることもできます。また、FのコードビューとIのライブビューが左右に2分割されていますが、こちらは上下に2分割するなど好みにカスタマイズできるのです。それぞれの役割などの説明は割愛させていただきますが、下記リンクを参考に自分の作業がしやすいように調整してみてください。
参照：https://helpx.adobe.com/jp/dreamweaver/using/dreamweaver-workflow-workspace.html
A. アプリケーションバー B. ドキュメントツールバー C. ドキュメントウィンドウ D. ワークスペース切り替えコントロール E. パネル F. コードビュー G. ステータスバー H. タグセレクター
I. ライブビュー J. ツールバー
ファイルとフォルダの管理
Dwでは、HTMLやCSSファイルなど、Web サイトを構成するすべての素材をひとつのフォルダにまとめて管理します。このすべてを含めたフォルダは 「サイト」 と呼ばれます。そして、Dwでこのフォルダの位置を指定することを 「サイトを定義する」 と表現します。
Dwサイトには、「ローカルルートフォルダ」、「リモートフォルダ」、「テストフォルダ」の 3 つのフォルダがあります。
ローカルルートフォルダ
作業中のファイルを格納する、主にローカルコンピュータ上に配置されるフォルダです。Dw上では、このフォルダを 「ローカルサイト」 として表示します。このフォルダはネットワークサーバー上に配置することもできます。
リモートフォルダ
通常、Web サーバーが実行されているコンピュータ上に配置されるフォルダです。Dw上では、このフォルダを 「リモートサイト」 として表示します。
テストフォルダ
Dwによって動的ページが処理されるフォルダです。
「ローカルルートフォルダ」と「リモートフォルダ」を設定することにより、ローカルコンピュータと Web サーバー間のファイルの転送が可能となり、Dwサイトでのファイルの管理が簡単になります。
ファイルパネルのサイト管理から新規作成をクリックすると以下の画面が表示されます。左上の「サイト」からローカルサイトの定義、サーバーからリモートサイトの定義を行えます。
ソースフォーマットの適用
コードを書いていると必要のないインデントや改行をしてしまうことがあります。共同で作業する際には相手にも分かりやすいようにコードの整理が必要です。そんな時にDwでは一発でソースコードを綺麗に整えることが出来る便利機能があります。その機能がソースフォーマットの適用です。ツールバーにある下記マークから「ソースフォーマットの適用」をクリックするだけで綺麗に整えられます。
Dreamweaverのショートカットキー
Dwには多くのショートカットが設定されています。編集 > 環境設定からショートカットは確認できますが、便利なショートカットを紹介します。
下記以外にもたくさんあるのでリンクから確認してみてください。
参照：https://helpx.adobe.com/jp/dreamweaver/using/keyboard-shortcuts.html
| アクション | Mac | Windows |
| 親タグを選択 | コマンド + [ | Ctrl + [ |
| 選択範囲をたたむ | Command + Shift + C | Ctrl + Shift + C |
| コードのインデント | Command + Shift + ＞ | Ctrl + Shift + ＞ |
| コードのインデント解除 | Command+Shift + ＜ | Ctrl + Shift + ＜ |
| 現在の文書内を検索 | Command + F | Ctrl + F |
| ファイルを横断して検索/置換 | Command + Shift + F | Ctrl + Shift + F |
| 現在の文書内で置換 | Command + Alt + F | Ctrl + H |
Dreamweaver(Dw)のデメリット
ここまでDwのメリットや便利な機能を紹介してきましたが、残念ながらデメリットもあります。
有料である
Dwはその機能性と柔軟性が故に購入価格が高くなっています。そのため、無料で使用できる他のエディタと比較するとランニングコストがかかってしまいます。
予算をかけたくない方や採算が取れないような用途での利用にはおすすめしません。
Dwには以下の様に4種類の料金プランがあります。
※2024/5/30日時点
各プランを比較検討し、ご自身に合ったプランを選択してみてください。
HTMLなどの基礎知識が必要
Dwはweb制作に関する専門知識をある程度持っていることを前提としたソフトウェアです。様々な機能があるソフトのため初心者の方が使おうとすると、何から書けばいいのか、どの機能を使えばいいのか分からなくなってしまいます。しかし、使いこなすことができれば高品質なwebサイトを構築することができるようになると思います！
低スペックのPCは動作が重くなる
Dwはその機能の多さから多くのリソースを必要とします。そのため使用しているパソコンによっては、動作が重いと感じることがあります。特にweb制作ではPhotoshopやIllustratorと併用して使うことが多いため、動作がもったり感じる時はメモリの使用率が上がっていないか確認してみてください。
まとめ
いかがでしたでしょうか。
今回はAdobe Dreamweaverの便利な機能やメリットデメリットについて紹介しました。少しでも使ってみたいと思っていただけたら嬉しいです。今回紹介した機能は一部になりますので気になる方は下のリンクからダウンロードしてみてください！
最後までお読みいただきありがとうございました。