Dreamweaver CS5でのSubversionの使用 – パート2：Subversionを使用するためのDreamweaverの設定

その他の必要条件

メモ：この記事はMacユーザーを念頭に執筆されています。Microsoft Windowsをご利用の場合は、ほとんどの解説概念が共通ではあるものの（Dreamweaver CS5のGUI以外の）設定詳細が異なる場合がある点に注意してください。Subversionリポジトリの作成手順はMacに特化して書かれていますが、Linuxベースのマシンでも応用することができます。

この記事は、Dreamweaver CS5でのSubversion使用法を解説する3部構成の記事の第2部です。パート1では、バージョン管理システムのコンセプトとSubversionの概要を紹介しました。 パート2では、Dreamweaver CS5でSubversionリポジトリを使用するにあたっての設定方法を紹介します。パート３では、オリジナルのリポジトリを作成する方法について解説します。

大規模なチームの一員としてプロジェクトにかかわる場合は、既にSubversionサーバとリポジトリの設定を担当するユーザーが存在するはずです。リモートリポジトリとの接続方法および認証の詳細については、この担当者に問い合わせるようにしてください。Dreamweaver CS5は、HTTP、HTTPS、SVN、SVN+SSHの4つの主なSubversion接続プロトコルをサポートします。

筆者の経験から言うと、Subversionが設定された環境はApacheとあわせて構成されていることが大半であり、Subversionサーバとの接続方法としてはHTTPまたはHTTPSプロトコルがサポートされています。ただし、Subversionサーバとの接続方法には他のものも存在するので、接続情報について詳しくはSubversion管理者に問い合わせるようにしてください。 この記事の解説では、リポジトリとの接続方法としてHTTPを使用します。

大規模なチームに所属するデザイナー・デベロッパーとは異なり、個人デベロッパーは、Dreamweaverを利用してWebサイトを管理し、既にサイト定義の大半を済ませていると思われます。この場合はSubversionリポジトリを新規にセットアップする必要があります。また、Subversionリポジトリの初期作成を担当する、企業のシニアデベロッパーもこのセットアップ作業を行う必要があります。

リポジトリの作成方法とWebコンテンツの初期チェックイン方法を把握することは非常に重要です。この手続きはやや高度なプロセスであるため、本連載の次のパートで紹介することにします。コンテンツの初期チェックインのために、ここでは、既にDreamweaver上で設定されているWebサイトを用います。このサイトに対するSubversionサポートを有効化することで、Dreamweaver CS5をSubversionのクライアントとして使用することが可能です。

Adobe Dreamweaver CS5では、バージョン管理システムの詳細をサイト定義の一部として調整できます。したがって、管理下のWebサイトごとに、個別のSubversion設定を使用することも可能です。

ここでは、デザイン・開発チームの新たな一員として、リポジトリにチェックインされている既存のWebコンテンツやコードにアクセスするケースを想定することにします。

Dreamweaverのメニューからサイト／サイトの管理を選択し、サイトの管理ダイアログボックス（図１参照）を開きます。

作業対象のサイト向けに新たなサイト定義を作成したい場合は、「新規作成」ボタンを押してから「サイト」を選択します（図２参照）。「基本」タブが表示される場合は、バージョンコントロールの設定にアクセスできるよう、（ダイアログボックスの最上部付近にある）「詳細設定」タブをクリックして表示を切り替えます。

画面左側の「カテゴリ」の節から「ローカル情報」を選択します（図３参照）。 次に、サイト名、ローカルルートフォルダおよびHTTPアドレスといったサイトのローカル情報を入力します。筆者はvoltmer.comを使用しているので、設定は以下のようになります。

• サイト名: voltmer.com
• ローカルルートフォルダ: /Users/Voltmer/Web Sites/voltmer.com
• 初期設定イメージフォルダ
• HTTPアドレス: http://www.voltmer.com

メモ：筆者は、自らのWebサイトフォルダにvoltmer.com用として空のフォルダを新規作成しています。フォルダを空にしておくのは、後ほどSubversionサーバからWebコンテンツをチェックアウトするからです。また、初期設定イメージフォルダの設定が空なのは、画像用のフォルダがまだ存在しないからです。この情報は、リポジトリから供給されるので、後ほど戻って編集することにします。

ローカル情報が設定できたら、画面左側の「リモート情報」をクリックし、アクセスを「なし」に設定します（図4参照）。この設定は、データをDreamweaverから本稼働Webサイトに直接プッシュすることに慣れた、一部のDreamweaverユーザーにとっては違和感が残るかも知れません。しかし、大規模な組織ではSubversionサーバからの更新処理を、別のサブチームまたは自動化されたスクリプトが担当していることが良くあります。この処理により、タグ付けされたファイルがSubversionサーバから本稼働サーバへとプッシュされます。

動作検証またはステージング用として引き続きリモートサイトを使用したい場合は、これらの設定を従来通りにすることも可能です。

仮に読者が本稼働サーバへの更新のプッシュを担当しているのであれば、このインターフェイス上で本稼働サーバの情報を設定するのが良いかも知れません。ただし、コンテンツを本稼働サイトにデプロイする際の手段としては、自動ビルドシステムの使用を検討することを推奨します。

次に、「バージョンコントロール」カテゴリを選択し、アクセス方法としてSubversionを選びます（図５参照）。この記事の執筆時点では、Dreamweaver CS5は1種類のバージョン管理システムしかサポートしていないため、オプションは1つしか表示されていません。

プロトコルやサーバアドレスなど、Subversionリポジトリへの接続に必要な詳細情報を設定します。これらの値は、Subversionの管理者によって提供されるものばかりです。以下に例として筆者の設定を示します。

• アクセス: Subversion
• プロトコル: HTTP
• サーバアドレス: localhost
• リポジトリパス: /repo/voltmer.com/
• サーバポート: デフォルト
• ユーザー名: voltmer
• パスワード: <秘密のパスワード>

メモ：上記記入例のサーバはクライアントと同じマシンで稼働しているため、サーバ名にはlocalhostを指定しています。「localhost」は、ローカルマシンを参照するエイリアスです。

設定内容を検証するために、「テスト」ボタンをクリックします。設定内容に問題がなければ、サーバとプロジェクトにアクセス可能という旨のダイアログボックスが表示されます（図６参照）。このメッセージが表示されない場合は、Dreamweaver CS5のドキュメンテーションを参照するか、設定詳細に誤りがないかについて、Subversionリポジトリ管理者に問い合わせるようにしてください。

サイトの管理ダイアログボックスに戻り、「OK」をクリックします。

メモ：この記事ではすべての設定項目を取り上げないものの、ご利用の環境によっては、サイト定義内の他のカテゴリも設定・調整しなければならないことがあります。

この時点では、まだリポジトリからコンテンツがチェックアウトされていないため、Dreamweaver CS4インターフェイスのローカルファイル領域にはコンテンツが一切表示されません。コンテンツをチェックアウトするには、当該Webサイトのローカルファイル領域が表示されていることを確認した後、ディレクトリ構造最上部のサイトフォルダを右クリック（またはCtrl+クリック）し、メニューからバージョンコントロール／最新バージョンを取得を選択します（図７参照）。これにより、ローカルディレクトリの構造と、サーバ上のSubversionリポジトリのコンテンツが同期されます。コードのチェックアウトが完了したら、編集作業に取りかかれます。

図８に示すのは、voltmer.comからのチェックアウト結果です。これでコンテンツを変更する準備が整いました。

ここでは、voltmer.comのindex.htmlファイルを一部更新することにします。メインページのタイトルが誤ってデフォルトのままになっていたとします。そこで、次のコードを、

以下に変更することにします。

この変更を加えるには、ローカルファイル領域に表示されているindex.htmlファイルをダブルクリックして開きます。筆者の環境ではデフォルトでデザインビューが表示されます。ページ最上部に表示されたタイトルの内容を「Voltmer's Website」に変更します。コードビューまたは分割ビューに切り替えて、HTMLを直接編集することも、もちろん可能です。どの操作を行っても、結果的には当該ファイルが適切に変更されます。編集作業が完了したら、変更内容を保存してファイルを閉じます。

この時点で、ローカルファイル領域の表示がやや変化しています。index.htmlの横にはDreamweaver CS4によってチェックが付けられ、このファイルが編集されていることが示されます（図９参照）。ただし、これはローカルのみの変更であり、リポジトリに配置されたファイルは従来のままです。つまり、Subversionサーバの認識としては、このファイルにはまだ変更が適用されていません。他のユーザーは引き続きサイトのコピーをチェックアウトして編集できるものの、筆者が行ったindex.htmlでの編集内容を見ることはできません。

先ほどの編集内容を本稼働Webサイトにパブリッシュするには、当該編集内容をリポジトリにチェックイン（コミット）する必要があります。

チェックインを行うには、編集したファイル上で右クリックし、メニューから「チェックイン」を選択します（図10参照）。コマンドを選択すると、コミットメッセージを入力するよう促されます。このメッセージは、チェックインとチェックアウトの間に行われた変更の履歴記録として、ファイルの変更内容とともにリポジトリに保管されます。

プロのデザイナー・デベロッパーは、変更内容の簡潔な説明を付けておくことの重要性を認識していることでしょう。説明を付けておけば、チームメンバー全員がなぜ、どのような変更が行われたかを簡単に理解できるようになります。また、コメントは以前の編集内容を思い出すための、自分自身へのメモとしても役立ちます。ここでは、「index.htmlのタイトル変更」と入力することにします（図11参照）。

ダイアログボックスにメッセージを入力してから「コミット」ボタンをクリックすると、変更内容がリポジトリに送信（コミット）されます。処理が完了すると、Dreamweaver CS4によって、ローカリファイル一覧上の当該ファイルのそばにあったチェックマークが削除されます。リポジトリと当該ファイルが同期されていなかった状態が、解消されたことが示されます。

Subversionに用意されている最もパワフルな機能といえば、差分と復元です。差分機能を利用すれば、同一ファイルの２つのバージョンを比較し、どの部分が違うかを特定することができます。Webサイトで問題が発生したバージョンと従来問題なく機能していたバージョンで何が違うかを比較した経験があれば、この機能の有用性は明らかなはずです。ファイルの差分を取れば、変更点を簡単に見つけ出すことができます。

復元機能を利用すれば、以前のバージョンへのロールバックが可能になります。例えば、顧客が新たに行った変更内容が気に入らないのであれば、単に、以前のバージョンのページを復元するだけで済みます。以前のバージョンをいくつも保管しておかなくても、リポジトリ上に配置された以前のコピーを見つけ、現在のコピーと以前のものの差分を確認してから旧バージョンに復元することができます。

では、ここまでの解説で使用したサンプルをシナリオに説明を進めることにします。先ほど、ホームページのタイトルを変更したところ、顧客から元のタイトルに戻して欲しいとの依頼があったとします。筆者は複数のサイトを同時に手がけているため、何をどのように変更したかを覚えていません。そこで、差分を取ってみることにします。

index.htmlファイルを右クリックし、メニューからバージョンコントロール／バージョンを表示を選択します（図12参照）。

バージョン履歴ダイアログボックスが表示されたら、比較する２つのバージョンを選択し、「比較」ボタンをクリックします（図13参照）。

筆者の環境ではファイルの比較時に用いるアプリケーションが定義されていないので、ここでアプリケーションの選択を求めるメッセージが表示されます（図14参照）。筆者の環境にインストール済みのアプリケーションを使用することにします。筆者はBare Bones SoftwareのTextWranglerを使用していますが、ここでは、自らのニーズにあったツールを任意に選択することができます。

差分ツールのインストール方法について詳しくは、Dreamweaverの環境設定ダイアログボックスの「ファイルの比較」カテゴリにある「ヘルプ」ボタンをクリックするようにしてください（図15参照）。

一度、差分比較用のアプリケーションを設定しておけば、バージョンコントロール／バージョンを表示を選択するたびに所定のアプリケーションが起動し、ファイルのバージョンを素早く比較できるようになります（図16参照）。

図16. 差分アプリケーションによってファイルのバージョン間の比較が可能に。

ファイルの差分を確認したところ、以前のバージョンに戻すべきであることが判明したとします。その場合は、先ほどと同じバージョン履歴ダイアログボックス上でロールバックする対象の旧バージョンを選択し、「現在のバージョンに昇格」ボタンをクリックします。Dreamweaverが、選択したバージョンに戻すことを確認するためのメッセージを表示します（図17参照）。

「はい」をクリックするとバージョン履歴が自動的に更新され、ファイルに新しいバージョン番号が割り振られます（図18参照）。ただし、コンテンツは以前のファイルと同じになります。

処理が完了した時点で当該ファイルを開いてみると、先ほど変更した内容の代わりに、元の<title>タグが表示されることを確認できます。

変更されたローカルファイルを元の状態に戻すことも可能です。この場合は、対象のファイルを右クリックし、「チェックアウトの取り消し」を選択します。

次のステップ

リポジトリの設定方法について詳しくは、本連載のパート３「SubversionをサポートするためのApacheの設定」を参照してください。

Subversionおよびバージョン管理について詳しくは、以下のリソースを参照してください。

• Subversion公式サイト
• オンライン書籍『Subversion』
• 書籍『Version Control with Subversion』
• 書籍『Subversion Version Control』
• 書籍『Practical Subversion』