Adobe Dreamweaver CS4：Subversion機能の利用ガイド

今月号の記事

2008年9月23日、Adobe Creative Suite 4がアナウンスされました。多くのアドビ製品がアップグレードされ、もちろん、長くWeb開発ツールとして愛用されてきたDreamweaverもアップグレードされています。新バージョンCS4は、デザイナーやデベロッパーのために数え切れない機能強化が図られたメジャーアップグレードです。英語版の前号にてScott Fegetteが寄稿した記事「hidden gems of Dreamweaver CS4」では、その一部を紹介しました。本記事では、CS4の新機能の中で最も魅力的な機能の1つである「Subversion機能」について、深く掘り下げていきたいと思います。Subversion機能をマスターすれば、デベロッパーのみなさんの生活は非常に楽になるでしょう。

バージョン管理の基本

Subversion（SVN）はバージョン管理システムです。SVNを使えば、チーム開発においてデベロッパーが個別にプロジェクトに取り組みながらも、デベロッパー同士で簡単に同調することが可能となります。バージョン管理システムの一般的なプロセスというと、以下のような内容が考えられます。

サーバ上にリポジトリを作成：リポジトリとは記録システムのようなものです。リポジトリにあるコードのコピーが公式なコピーとして扱われます。1つのプロジェクトにたとえ数百人のデベロッパーたちが関わっているとしても、チームメンバーの全員が「このシステムを使って、編集したコードファイルの変更履歴をトラッキングする」ことに同意していなければなりません。
デベロッパーはリポジトリのローカルコピーを入手：デベロッパーが作業するには、リポジトリ内にあるソースコードファイルを編集する必要があります。そのためには、編集作業と検証作業に必要なファイル群すべてを引き出します。
デベロッパーはローカルリポジトリのファイル群を編集：リポジトリによっては、デベロッパーがファイルを編集する前に、そのファイルを明確にチェックアウトしなければならないものがあります。逆に、チェックアウトしなくても編集できるようにしているリポジトリもあります。
デベロッパーは編集したコードをサーバ上のリポジトリに戻す：デベロッパーは、新機能の追加やバグ修正などのプログラミング作業が終わったら、その変更をサーバ上のリポジトリに戻します。
ファイルのバージョン管理の開始：編集したファイルの新バージョンがサーバに追加されます。編集したファイルは、単にリポジトリ内に存在するファイルを上書きするのではなく、既存ファイルと変更点を新しいバージョンのファイルとして記録します。このようにファイルの変更履歴が作られていきます。そうすることで、デベロッパーは過去のバージョンに戻り、どのような変更が行われてきたのかを調べることができます。

以上は、バージョン管理システムの基本的な流れです。バージョン管理システムを使うメリットは、以下の項目を含めかなりたくさんあります。

ハードウェア損傷からデータを保護：みなさんがプロジェクトを一人で手掛けていようと、チームで手掛けていようと、一番起きて欲しくない出来事といえば、「プロジェクトの全コードデータの損失」でしょう。しかし、リポジトリに保管しておけば、そのコピーがいつでもサーバ上にあります。たとえリポジトリサーバが壊れて、そのサーバのバックアップをとっていなかったとしても、おそらくデベロッパーのだれかがローカルマシンにほぼ最新データのコピーを保存しているでしょう。
質の悪いプログラミング決断を回避：プロジェクトの新メンバーが誤って重要なシステムコードの大部分を削除してしまったら……そのコードを一から作り直さなければならなくなったらどうしますか？　最悪、そのコードを作成した人がもうプロジェクトに携わっていなかったら？　バージョン管理システムがあれば、前バージョンのデータを入手、あるいは前バージョンに戻して作業に戻るだけでよいのです。
長期的に知識を共有：コード内に素晴らしいコメントが書かれていたとしても、後でそれが削除されたり、意味をなさなくなったりすることがあります。長い期間にわたりコードの履歴をレビューすることができれば、そのシステムが開発された時、開発者がどのような考えで開発したのかがより明確に分かるようになります。また、プロジェクトの履歴があれば、主要な改善が行われたのはいつか、どのような改善が行われたのか、などが分かります。

本記事では、Dreamweaver CS4のSubversion機能について、Subversion機能を使ったDreamweaverサイトのセットアップ方法、基本的なSubversion作業の仕方、バージョンサポートを最大限に活かす方法の3つの視点で解説します。

Subversionリポジトリを使うためのDreamweaverサイトのセットアップ方法

Dreamweaverを長年使い続けてきたユーザであれば、データのバージョン管理をするためにいろいろと試行錯誤したことを思い出すかもしれませんね。CS4以前のバージョンでは、新しいサイトを設定する際に図1の画面が表示されました。

図1　Dreamweaverに組み込まれている独自のバージョン管理システム

これはSubversion機能ではありません。最低限のバージョン管理ができるようにDreamweaverに組み込まれた独自システムです。バージョン管理システムを構築するのは、容易ではありません。すでに確立されているバージョン管理システムをDreamweaverに組み込むことは、それだけでアップグレードに匹敵します。多くのデベロッパーが、毎日SVNを使用しています。そして今、Dreamweaver CS4にはSubversion機能が実装され、デベロッパーはこれまでよりかなり生産的に作業できるようになりました。

サイト定義ウィンドウの「詳細設定」タブを選ぶと、「バージョンコントロール」カテゴリがあります。そのカテゴリ内のアクセス項目では、初期状態では「なし」となっています。プルダウンメニューから「Subversion」を選び、SVNシステムを設定します。システム管理者またはSVNプロバイダーに、システム設定に必要な情報を問い合わせて下さい。すべての情報を入力したら、「テスト」ボタンをクリックします。

検証が成功すると、「サーバにアクセスできるようになった」という内容ののダイアログボックスが表示されます。ダイアログボックスが表示されない場合は、入力した情報を再度チェックして下さい。なお、SVN機能を利用するには、正常に動作する設定内容でなければなりません。ダミー情報では、SVN機能を利用することはできません。

DreamweaverからSubversion機能を利用する際の基本操作

SVNのセットアップが完了したら、次に新しいリポジトリを作成するか、既存のリポジトリに接続する必要があります。既存のSVNリポジトリに接続するには、読み込みを行います。新しいリポジトリを作成するには、次の項目を飛ばして、「ファイル状態アイコンと拡張ビュー」に進んで下さい。

ファイルステータスを示すアイコンと拡張ビュー

Dreamweaverでは、ファイルのSVNステータスを簡単にトラッキングできるようになっています。ファイルパネルの各ファイルアイコンの横に、ファイルのステータスを示すアイコンが表示されます（図2）。

図2　ファイルのステータスを示す3つのアイコン　

ファイルステータスを示すアイコンには、以下の3つがあります。

プラス「＋」アイコン：自分がプロジェクトに追加したファイルで、まだそのファイルをリポジトリに送っていないことを示します。
チェック「✓」アイコン：リポジトリから取得後、編集を加えていることを示します。
空白のアイコン：「空白のアイコンはアイコンではない」と言われそうですが、アイコンがないということは、そのファイルはリポジトリにあり、まだローカルで手を加えていないことを示します。

こうしてファイルステータスをアイコンで確認できるのは素晴らしいことですが、リポジトリとローカルコピーのディレクトリを並列して見ることができたらもっと素晴らしいですよね。ファイルパネルの「展開してローカルおよびリモートサイトを表示」ボタン（図2の赤囲み部分）をクリックすると、リポジトリのディレクトリとローカルコピーのディレクトリを見ることができます（図3）。

図3　リポジトリファイルとローカルファイル

この拡張ビューを表示したら、「リポジトリファイル」ボタン（図3の赤囲み部分）がオンになっていることを確認して下さい。オンになっていると、左側にリポジトリファイル、右側にロカールファイルが並列表示されます。

リポジトリにファイルを追加する

通常のSVNツールでは、リポジトリへのファイルの追加は手作業で行います。しかし、Dreamweaverではその作業も簡単にできます。Dreamweaverサイトから「新規ファイル」を選ぶと、そのファイルに「ファイル追加」コマンドが自動的に内蔵されます。そのため、多くのSVNツールで行わなければならない手作業を省くことができます。

ファイルのチェックイン／コミット

新しいファイルを作成したら、あるいは既存のファイルを編集したら、その変更をリポジトリに戻さなければなりません。Dreamweaverでは、この作業も簡単にできます。

リポジトリに戻したいファイルを選択して、右クリックから「チェックイン」を選ぶだけです。ファイルを選択して「チェックイン」ボタンをクリックしても、同様の操作が行えます。「チェックイン」ボタンは、ファイルパネルの上にある上向き矢印と鍵が一緒になったアイコンです。

この操作を行うと、ダイアログボックスが表示され、コミットするファイルにコメントを付けることができます。ファイルに加えた変更をメモしておきましょう。オススメなのは、トラッキングしやすくするためにバグナンバーや機能リクエストのチケット番号を書き加えておくことです。また、変更・追加内容の簡単な概要も、他のデベロッパーの役立ちます。こうしておけば、他のデベロッパーたちも、後でファイルの履歴を簡単に調べることができ、どのような変更がいつ加えられたのか、簡単に把握できるでしょう。

「OK」ボタンをクリックすると、リポジトリへのファイル転送状況を示すプログレスボックスが表示されます。

バージョンサポート

バージョン管理システムの便利な機能の1つが「バージョンサポート」です。ファイルをチェックインするたびに、システム内には新しいバージョンが作成されます。単なる1文字の変更であれ、あるいは数百行の変更であれ、リポジトリシステムでは各バージョンでの変更をトラッキングできます。そのおかげで作業がとても楽になります。

バージョンサポートを使うには、修正とチェックインを数回繰り返したファイルが必要です。そうしたファイルがあれば、右クリックしてメニューから「バージョンコントロール＞バージョンを表示」を選んで下さい。そうすると、バージョン履歴ダイアログボックスが表示され、そのファイルの過去の全バージョンが日付ごとにリストアップされます（図4）。

図4　バージョン履歴ダイアログボックスには、
過去のファイルのバージョン履歴とコメントが表示されます

このダイアログボックスには、チェックイン時に入力したコメントが表示されます。各バージョンには番号が振られているので、手元にあるファイルがどのバージョンなのかが分かります。どれか1つのバージョンをクリックすると、青色のハイライト表示になり、「表示」ボタンがアクティブになります。ボタンをクリックすると、そのバージョンのファイルを見ることができます。

図5は、同じファイルの3つのバージョンを比較したところです。2つはリポジトリにある過去のバージョンと最新のバージョンのファイルで、残りの1つはローカルにある編集中のファイルです。この機能は、たとえば、クライアントから「数か月前に削除したサイドバーを復活させてほしい」といった要望があった場合に役立ちます。わずか数クリックで、サイドバーを簡単に復活させることができます。

図5　複数のバージョンのファイル内容を表示して、比較できます　

ダイアログボックス内のバージョンを1つ選ぶと、「ローカルと比較する」ボタンがアクティブになります。バージョンを2つ選ぶと、「比較」ボタンがアクティブになります。いずれの場合もボタンをクリックすると、ファイル比較ツールが起動します。なお、このツールを使うには設定が必要で、設定画面がポップアップで表示されます。ツールの設定を簡単に行いたい場合は、「ヘルプ」ボタンをクリックしてプラットフォーム依存ガイダンスに従って操作して下さい。

図6 は、ファイル比較ツールの結果です。変更部分がハイライト表示されるので、すぐにわかります。多数の変更を行ったファイル内で、該当箇所をすばやく見つけたい場合に便利です。

図6　ファイル比較ツールでは、同一ファイルの異なるバージョンを比較して
変更部分をハイライト表示させることができます

まとめ

ご覧の通り、Dreamweaver CS4のSubversion機能はデベロッパーにとって大きなインパクトを持った機能と言えます。Dreamweaver CS4にSubversion機能が組み込まれたことで、初めてバージョン管理システムの便利さを知る人がいるかもしれません。また、Subversionツールを使いこなしている人でも、よりスピーディに作業できるようになると感じるかもしれません。いずれにせよ、Subversion機能によって、Dreamweaverユーザの生産性が高まることは間違いないでしょう。

Creative Suite 4がアナウンスされた時に言われたことですが、このリリースはマクロメディアとアドビの合併後初となるフルアップグレードです。2つの素晴らしい会社が合併したことの相乗効果がついに形となりました。Dreamweaverは、そうして誕生した製品の1つです。ぜひ、30日間の無償体験版をダウンロードして、新しい機能を試してみて下さい。