開発に取り組む環境を構築していく

情報システムやスマートフォン向けアプリケーション、Webページなどを開発するにあたって重要なのが開発環境といえます。

昨今、開発に役立つ様々なツールやフレームワーク、ライブラリがフリーで提供されており、自分にとって開発しやすい環境を整えやすくなってきました。

中でも「統合開発環境（IDE）」や「エディタ」はかなり身近な存在です。

何かを開発するにあたって、誰しもが活用するソフトウェアだといえるでしょう。

今回は特に「Web開発に特化している統合開発環境（IDE）」に注目していきます。


Adobe Dreamweaverに注目

今回の記事でフォーカスを当てていくのは、アドビシステムズがリリースしている「Adobe Dreamweaver（アドビ ドリームウィーバー）」です。

かつては「Macromedia Dreamweaver」としてリリースされていましたが、現在は名前を変えています。

今回はそんなDreamweaverについて、基本的な使い方から特徴まで一気にチェックしていきましょう。

Dreamweaverを使うことによるメリットや便利な機能についても紹介いたします。

有料ソフトウェアですが、無料体験も可能です。

Dreamweaverの使い方などに併せて、無料体験版と有料版の違いについても確認していきます。


Dreamweaverの持つ特徴

さて、それではDreamweaverが持つ特徴についてチェックしていきましょう。

Dreamweaverは、数々の機能を有しているWeb開発向けIDEです。

以下の特徴を持っています。

  • 有料ソフト
  • 機能が豊富
  • 分かりやすい詳細なチュートリアル

1つずつ、順番にチェックしていきましょう。


有料ソフトである

Adobe Dreamweaver最大の特徴ともいえるのが有料だというポイント。

様々な料金体系が用意されていますが、個人利用で基本となる「Adobe Dreamweaver単体プラン」は月額2,480円（税別）です。

また、PhotoshopやInDesign、Illustratorなど20を超えるデスクトップアプリを同時に使えるプランも用意されています。

その「コンプリートプラン」は月額5,680円（税別）。

画像加工やロゴ作成なども自分で手がける場合は、コンプリートプランとう選択肢も現実的だといえるでしょう。

法人利用の場合はCreative Cloudのコンプリートプランか単体プランを選びます。

そして、それぞれの年間プラン料金を月額払いするか、一括払いかを選択しましょう。

年間プラン月々払いの場合、コンプリートで7,980円、単体プランは1ライセンスごとに3,780円となっています。

年間プラン一括払いではコンプリートプランで95,760円、単体プランは1ライセンスごとに45,360円です。

また、学生・教職員の方は更にディスカウントされた価格でCreative Cloudアプリケーションを利用することが可能です。

詳細なプラン料金については、こちらの料金プランと価格の紹介ページでチェックしてみてください。

Adobe Creative Cloud – プランと価格

上記ページからプランの比較表をチェックすることもできるので、実際に導入を検討されている方はぜひチェックしてみてください。


機能が豊富に用意されている

Adobe Dreamweaverの大きな特徴といえるのが、豊富な機能です。

その機能の多さから「使いこなせるか」というのも話題に上がるほど。

単純に機能が多いだけではなくプロ向けの高度な機能も多く搭載されているのも大きな要素でしょう。

凝った調整などもでき、非常にクオリティの高いWebサイトを作り上げることも可能です。

裏を返せば、Web開発初心者の方などはせっかくの多機能ソフトを使いこなせない可能性もあるかもしれません。

ぜひ豊富に用意された機能を巧みに使って、Dreamweaverを使いこなせるようになりましょう。


チュートリアルが分かりやすい

先ほど高度な機能・豊富な機能を使いこなせない可能性があると触れましたが、Dreamweaverはチュートリアルが非常に丁寧です。

詳細なチュートリアルで1ステップずつDreamweaverの使い方を教えてくれるため、初めて利用する方でも安心です。

また、マニュアルも完備されているのも特徴の1つ。

しっかりと丁寧に扱えば、使いこなせるようにかかる時間を短縮できるでしょう。


Dreamweaverを利用するメリット

既にお伝えした通り、Dreamweaverは有料のソフトウェアです。

今の時代、無料でもWeb開発に使える高機能なソフトウェアは数多く存在しています。

無料のものを含めて多くの選択肢があるにも関わらず、有料のDreamweaverを使うメリットはなんでしょうか。

続いては、Dreamweaverを利用するメリットについて解説していきます。


Windows・macOSを気にしなくて良い

Dreamweaverは、Windows・macOSどちらでも利用できるソフトウェアです。

そのため、使用するパソコンのOSという環境を深く気にすることなくWeb開発を行うことができます。

同じソフトなので操作性やUIなども基本的には同一。

パソコンのOSこと違えど、Web開発に関しては「慣れ親しんだ環境」で取り組むことができるでしょう。

パソコンを買い替えても安心です。

Creative Cloudを利用していれば無制限で何度でもインストール・アンインストールすることができるのも大きなメリットといえます。


定期的に行われるアップデート

Dreamweaverは定期的にアップデートが重ねられています。

新しい機能などが追加されることもあり、常に最新機能を扱いながらWeb開発を行うことができるでしょう。


豊富なマニュアル

特徴について解説する際にもお伝えしましたが、Dreamweaverにはマニュアルがしっかりと用意されています。

そして、それ以外にも個人ブログやAdobeが開催しているセミナーなどでDreamweaverについて更に深く学ぶことができるでしょう。

また、海外製だとほとんど英語でしか情報が入手できないソフトなども多いです。

日本語で情報を入手することが容易であるため、情報収集がしやすいソフトだということもできます。


Dreamweaverの基本的な使い方

それでは、実際にDreamweaverでWeb開発を行う際の基本的な部分の使い方をチェックしていきましょう。


サイトフォルダの準備

まず「サイトフォルダ」を作成・準備するのが大切です。

HTMLファイルやCSSファイル、画像ファイルなど作成するWebサイトで利用するすべてのファイルを1つのフォルダにまとめます。

サイトフォルダの中に、画像ファイルは「imgフォルダ」、CSSファイルは「CSSフォルダ」など更にフォルダを作っておくと分かりやすいかもしれません。


サイト設定を行う

サイトフォルダが準備できたら、Adobe Dreamweaver上で「サイト設定」を行います。

まず画面上部のメニューから「サイト」を選び「新規サイト」をクリックしてください。

「サイト設定」ダイアログが表示されるので、サイト名を記入しましょう。

そしてローカルサイトフォルダとして、先ほど準備したサイトフォルダを指定し「保存」をクリック。

Dreamweaverのウィンドウ右側「ファイル」パネルに先ほど指定したサイトフォルダの内容が表示されていることを確認して下さい。

これでサイト設定は完了です。


Dreamweaverでファイルを新しく作成する

さて、Webページを作っていると、新しくファイルを作りたいと感じるシーンが発生することは少なくありません。

そんな時は、Dreamweaver上でファイルを作成してしまいしょう。

「ファイル」から「新規」を選択することで、新規ドキュメントダイアログが表示されるので、各形式のファイルを簡単に作成することができます。

この画面でフレームワークを選択することもできるので、フレームワークを利用されている場合は活用しましょう。


DreamweaverでFTP接続をしたい時の使い方

Dreamweaverは、FTP機能も搭載しています。

わざわざ別にFTPクライアントソフトを立ち上げる必要がないため、非常に便利な機能だといえるでしょう。

構築したものをDreamweaver上でそのままサーバーにアップロードできるということです。


サイトフォルダの指定から

FTP接続の設定を行う際には、先ほどサイトフォルダを指定する操作と途中まで同じ操作を行います。

「新規サイト」をクリックし「サイト設定」ダイアログを表示させます。

先ほど同様、ローカルサイトフォルダを指定してください。


サーバーとのFTP接続設定

指定できたらダイアログ左側から「サーバー」を選択します。

この画面で、サーバーとのFTP接続設定を行うことが可能です。

「＋」ボタンをクリックすると、FTP情報入力ダイアログが表示されます。

FTPアドレスやユーザー名、パスワードなど必要項目を正しく入力してください。

「テスト」ボタンをクリックするとFTP接続できるかどうかのテストができるので、記入が終わったら試してみるといいでしょう。


保存と同時にアップロード

Dreamweaverは単純にFTPクライアント機能を使うだけでなく、更に「保存と同時にアップロード」するといったこともできます。

FTP接続設定ダイアログを「詳細設定」タブに切り替えてください。

リモートサーバーの項目内に「保存時にファイルをサーバーへ自動でアップロード」というチェックボックスがありますね。

ここにチェックを入れれば、保存と同時にアップロードまでできてしまいます。

魅力を感じた方はぜひチェックを入れてみてください。


Dreamweaverの便利機能

DreamweaverにはFTPクライアント機能以外にも便利な機能が数多く搭載されています。

今回は2つピックアップしてみました。


Emmetを標準搭載

DreamweaverにはEmmetが標準で搭載されています。

Emmetを使えば、タグを一瞬で作成可能です。

例えば「str」とタイプした状態で「Tabキー」を押すと、strongタグの開きタグと閉じタグが一瞬で展開されます。

他のタグも同様で、数多くのタグを一瞬で入力できるのでコーディング効率を劇的に改善できるでしょう。


クイック編集でHTMLを表示しながらCSSを編集

クイック編集機能を使えば、HTMLを見ながらCSSを編集できます。

Windowsの場合「ctrl + e」、macOSの場合は「command + e」で使用可能です。


ライブプレビュー

Dreamweaverでは、記述しているファイルの反映結果をリアルタイムで確認できる「ライブプレビュー」機能を利用できます。

自分が編集しているファイルのプレビューを見ながら編集ができるので、ミスを減らすことに繋がるかもしれません。

成果がリアルタイムで目に見えるので、開発・コーディングのモチベーションが上昇する可能性もあるでしょう。


Dreamweaverを無料体験してみよう

Dreamweaverは有料のソフトウェアですが、無料体験版も存在しています。

Dreamweaver無料体験版

上記リンクから無料体験版をダウンロードすることが可能です。

機能面で有料版との違いはなく7日間という使用期間制限が設定されているだけ。

Dreamweaverのことが気になる方は7日間Dreamweaverの機能をフルに試してみましょう。


Dreamweaverを使いこなすために

今回はDreamweaverに注目してきました。

Web開発に役に立つありとあらゆる様々な機能を有しているDreamweaver。

まさにWeb開発用の統合開発環境と呼べます。

豊富に用意された機能を使いこなすことができれば、間違いなくWeb開発の効率が上げられるでしょう。

今回は触れた使い方に関する部分はあくまで基本的なものでした。

Dreamweaverについて更に詳しく細かい機能まで知りたいという方は、ぜひ公式のマニュアル・チュートリアルを活用してみてください。

Dreamweaver ユーザーガイド

Dreamweaverチュートリアル

トピックごとにまとめられているため、自分の知りたい情報を簡単に得られるでしょう。

機能の使い方などは画面のスクリーンショットも掲載されており、画像を見ながら操作できるよう工夫されています。

Dreamweaverは非常に高機能なソフトウェアです。

使いこなせるよう、様々な手段を用いて活用していきましょう。