解 説

2017年6月にDreamweaver CC 2017にいよいよGitの機能が標準で搭載されました。さっそく使ってみることにします。
今回の記事はすでにGitの使用経験がありSorceTreeなどから乗り換えたいとお考えの方対象です。
全くGit初心者の方は「Git入門(1)〜Gitの導入とおおまかな仕組み」を参考にしてください。

AdobeのDreamweaver での Git の使用のページも併せて参考にしてください。

DreamweaverとGitの連携

Dreamweaverを最新版にアップデートしただけでは、すでにインストールしているGitとDreamweaverは連携されていません。
マニュアルでは Git クライアントをダウンロードして導入するように書かれていますが、すでにGitを導入している場合はDreamweaverの環境設定でGitのパスを指定します。
Dreamweaverの環境設定を開いて、左にある「カテゴリ」から「Git」を選択して「構成」の「Git実行ファイルへのパス」にGitのパスを記述します。

Gitを導入したのはいつだったかも覚えてない。ましてインストール先などわからない場合はターミナルのコマンドで調べましょう。
Gitのインストール先を調べるコマンドは「which git」です。

環境設定が終わったら必ず一度Dreamweaverを再起動しておきます。再起動しないとGitとの連携は行われません。
これでDreamweaverからGitが使えるようになります。

既存のリポジトリの複製方法

DreamweaverでGitを使うにはサイトの管理を使います。
Git管理したいフォルダをサイト管理のローカルサイト作成のところで登録すればGitが使えるようになります。

すでにGitを使っている場合、ローカルリポジトリとして指定したフォルダがあるはずです。けれども、Git管理を行なっているフォルダを指定すると、これ以上のGitの設定ができなくなります。

Dreamweaverではローカルリポジトリは空である必要がありそうです。空のローカルリポジトリを作成後に、BitbucketやGitHubのリモートリポジトリからpullする考え方のようです。それなら今あるSouceTreeのローカルリポジトリはそのままアーカイブすることもできます。
空のローカルリポジトリを作成したら、BitbucketやGitHubなどのリモートリポジトリのURLとユーザー名とパスワードを入力するとokです。

「このサイトにGitリポジトリを関連づける」にチェックを入れて、「URLを使用して既存のGitリポジトリを複製」を選択します。
ユーザー名、パスワードはBitbucketやGitHubなどに設定しているユーザー名とパスワードを入れます。

ここまでの設定が終わって、サイトの編集画面を閉じるとリモートリポジトリからpullが始まります。ローカルリポジトリとリモートリポジトリはこの時点で同期されます。

Gitのバージョン管理

GitをDreamweaverで活用するには「ファイルパネル」を使います。ファイルパネルの上部にGitのアイコンがありますのでそれをクリックするとGitの操作が行えます。

Dreamweaverでは新しいリポジトリを作成て、ファイルをコミットしなかった場合、それらは緑で表示されます。
ここではstyle.cssファイルを新規作成しました。下図のようにstyle.cssのファイル名は緑色で表示されています。

ステージングする

ステージングしたりGitの操作を行うにはGitパネルを出します。メニューの「ウインドウ」から「Git」を選ぶかファイルパネルのアイコンから開きます。

Gitパネルを見ると、ステージングしてないファイルは未追跡となっています。

Git管理したいファイルの左側にチェックボックスがあります。これにチェックを入れるとGit管理されるようになります。つまりステージングした状態です。この時点ではファイルパネルの中のファイル名の色はまだ緑です。

コミット

コミット用のパネルを開くにはGitパネルの左上部のボタンをクリックします。

コミット入力用のパネル

コミットを入力するとファイルパネルの中のファイル名の色は白になります。

push操作

コミットが終了するとリモートよりこちらが先行していることがわかるように、pushボタンに数字が表示されます。

pushボタンをクリックすると次のような確認のパネルが出ますのでパスワードを入力してpushします。

pushが成功すると成功した旨の表示がされます。

今度はcssの内容を一部変更してみます。
ファイル名の表示が黄色に変わっています。

なお、pullボタンはpushの左隣です。

新規ローカルリポジトリの作成

Dreamweaverで新規ローカルリポジトリを作成するにはサイトの新規作成を使用します。
まず新規サイト作成でローカルフォルダの指定をして、その下にある「このサイトにGitリポジトリを関連付ける」にチェックを入れ、「Gitリポジトリとして初期化」のラジオボタンを選びます。これでローカルフォルダに指定したフォルダでGit管理が始まります。

リモートリポジトリと関連付け

新規作成したローカルリポジトリをリモートと関連付けるにはGitパネルの右上にある「リモート作成」ボタンをクリックします。

「新しいリモート追加」パネルに必要事項を記入します。
次の例はGit Hubの例です。

あとは、上に記述した「Gitのバージョン管理」同様の操作を行います。
今後Dreamweaverの復権が期待されますね。