Dreamweaver CC 2017.5で新しく加わったGit機能を使う方法

HTML&CSS

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」です。

which git

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

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

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

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

そのため戸惑いますが、すでにSource TreeなどでGit管理しているフォルダはサイト設定するだけでDreamweaverでもGit管理できるようになります。

リモートリポジトリが存在してローカルに既存のリポジトリがない場合は、空のローカルリポジトリを作成後に、BitbucketやGitHubのリモートリポジトリからpullします。
空のローカルリポジトリを作成したら、BitbucketやGitHubなどのリモートリポジトリのURLとユーザー名とパスワードを入力するします。

「このサイトに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の例です。

ブランチの作成

今までSourceTreeを使っていた場合、Dreamweaverでのブランチの切り方は戸惑うと思います。
ブランチを切る時はファイルパネルのドロップダウンメニューから「ブランチを管理」を選択します。(次図)

「ブランチを管理」を選択すると「ブランチ管理パネル」が表示されます。

「ブランチ管理パネル」の左下にある+ボタンで新しいブランチを切ることができます。
「ブランチを新規作成」パネルのブランチ名を記述してOKボタンをクリックします。

コミット履歴はGitパネルの時計マークのアイコンで表示されます。

SourceTreeのようにブランチごとに枝分かれして表示されませんので、SourceTreeを使い慣れていると少し違和感があります。

マージ

マージする時は、「ブランチ管理パネル」の左下の「ブランチを結合アイコン」(ーの右隣)ボタンで行えます。

コンフリクトした場合の対応はSourceTree同様に対処します。

タイトルとURLをコピーしました