Github を使用して、Dreamweaver CC でファイルやソースコードを管理する方法を説明します。Dreamweaver で Git をバージョン管理ツールとして使用します。

Dreamweaver CC は、ソースコードを管理するためのオープンソース分散バージョン管理システムである Git をサポートするようになりました。Git と Dreamweaver の統合により、どこからでもコードを自由に変更し、後で変更を中央リポジトリにマージすることができます。Git ではファイル内のすべての変更が追跡され、以前のバージョンに戻ることもできます。

Git では簡単にブランチを作成して管理することができるため、Git リポジトリはグループで作業する場合に便利です。例えば、グループのあるメンバーがサイトのデザインを変更しているときに、他のメンバーがクライアントからの要求に応じるための変更を行うことができます。このような場合は、ブランチを作成し、ローカルリポジトリで変更を行うことができます。

ローカルリポジトリには、すべての変更の完全な履歴が保存されます。一時的に作業を中断して変更を中央リポジトリにマージする作業は、いつでも行うことができます。これにより、中央リポジトリに製品レベルの高品質なコードが常に保持されます。

Dreamweaver 内から Git の使用を開始するには、まずコンピューターに Git クライアントをダウンロードする必要があります。詳しくは、以降の Dreamweaver で Git の使用を開始する方法の説明を参照してください。

Git を使った作業の開始

Git を使用してファイルの管理を始める前に、まず Git クライアントをダウンロードし、電子メール ID を使用して新規登録する必要があります。既に Git アカウントをお持ちの場合は、Dreamweaver から直接 Git の使用を開始できます。 

Dreamweaver で Git を使い始めるには、次の手順を実行します。

  1. お使いのオペレーティングシステムに対応する Git クライアントをダウンロードします。

  2. Git クライアントにアカウントを作成します。

     

    注意:

    既に Git アカウントをお持ちの場合は、その Git アカウントにログインし、サイトを Git リポジトリに関連付けることができます。

    Git クライアントはデフォルトの設定でインストールすることをお勧めします。Git クライアントをインストールすると、Dreamweaver によって実行ファイルのパスが自動的に選択されます。

    これで、Dreamweaver を起動し、サイトを Git リポジトリに関連付けることができます。

Git とサイトの関連付け

Git の新しいユーザーか既存のユーザーかにかかわらず、最初に Git リポジトリとサイトを関連付ける必要があります。Git リポジトリは、ファイルの変更を追跡するために作成するフォルダーのようなものです。コンピューター上に作成できる Git リポジトリの数に制限はありません。システム上の各リポジトリは独立しています。つまり、1つの Git リポジトリに保存される変更が別の Git リポジトリの内容に影響を与えることはありません。

Web サイトをリポジトリに関連付けるとき、新しいリポジトリを作成するか、既存のリポジトリを複製することができます。新しいリポジトリを初期化するか作成すると、現在の作業ディレクトリ内に空の Git リポジトリが作成され、.gitignore ファイルを含むフォルダーが作成されます。

ただし、既存の Git リポジトリを複製した場合は、親リポジトリのすべてのファイルがローカルシステムに複製されます。詳しくは、以降のリポジトリを作成または複製する方法の説明を参照してください。

新しい Git リポジトリの作成

Dreamweaver で Git の使用を開始するときに、新しいリポジトリを作成することができます。サイト用に Git リポジトリを初期化すると、Dreamweaver サイトに関連付けられているファイルを追加できる新しい Git リポジトリが作成されます。

  1. 作成中の新しい Dreamweaver サイトと既に存在しているサイトのどちらも関連付けることができます。いずれの場合でも、新しい Git リポジトリを作成するには、次の手順に従います。

    • 新しい Dreamweaver サイトを関連付けるには、サイト/新規サイトをクリックします。
    • 既存の Dreamweaver サイトを関連付けるには、サイト/サイトの管理をクリックします。サイトの管理ダイアログボックスで、Git リポジトリに関連付けるサイトをダブルクリックします。
  2. 新規サイトを作成する場合は、サイトの名前を指定します。

    サイトに関連するファイルを含むフォルダーがある場合は、「ローカルサイトフォルダー」フィールドにそのフォルダーを指定します。

  3. 「このサイトに Git リポジトリを関連付ける」チェックボックスをオンにします。次に、「Git リポジトリとして初期化」オプションを選択します。

    Dreamweaver で Git リポジトリを初期化する
    「Git リポジトリとして初期化」オプションを選択する

  4. 「保存」をクリックします。

    ローカルフォルダーのファイルがファイルパネルに表示されるようになります(Git 表示)。これらのファイルは未追跡状態です。つまり、これらのファイルはまだ Git リポジトリにコミットされていません。

    ファイルに対する作業を続けてファイルのコミットを後で行うことも、Git パネルを開いてファイルをリポジトリにコミットすることもできます。Git にファイルをコミットする方法については、変更の追跡とコミットに関するセクションを参照してください。

     

既存のリポジトリの複製

Github、Bitbucket または他の一般的なホスティングサービスでホストされている既存の Git リポジトリを既に使用している場合は、次の手順でリポジトリを複製することができます。既存のリポジトリを複製すると、ターゲットリポジトリのコピーがローカルシステム内に作成されます。

  1. Dreamweaver サイト用のリポジトリを複製するには、サイト/新規サイトをクリックします。

  2. サイト設定ダイアログボックスで、「このサイトに Git リポジトリを関連付ける」チェックボックスをオンにします。次に、「URL を使用して既存の Git リポジトリを複製」を選択します。

  3. 複製するリポジトリの URL を入力します。

    入力する URL が有効であることを確認してください。ターゲットリポジトリの https URL を入力します。

    複製する Git リポジトリの URL を指定する
    Git リポジトリの URL を指定する

    注意:

    現時点では、SSH キーとパスフレーズを使用する URL の複製は Dreamweaver ではサポートされていません。ユーザー名とパスワードのフィールドは無効です。

  4. 「保存」をクリックします。

    リポジトリを複製すると、元のリポジトリのローカルコピーが作成されます。Dreamweaver 内でローカルファイルを表示して編集することができます。 

    Dreamweaver で Git パネルを開くと、パネルの右上隅に「オリジン」と表示されます。このオリジンは、複製元のリポジトリのスナップショットを指します。

    Git パネルのオリジンリポジトリの通知
    Git パネルのオリジンリポジトリの通知

Git を使用したバージョン管理

Git リポジトリが初期化または複製されたので、Git を使用したファイルの管理を開始することができます。ローカルシステムのファイルを変更すると、ローカルファイルと Git リポジトリ内のローカルファイルのスナップショットとの間に差が生じます。

変更したファイルを Git にコミットして、ファイルの最新のスナップショットを作成することができます。Git では、ローカルリポジトリ内のファイルは、未変更のファイル、変更したファイル、ステージされたファイルという 3 つのカテゴリーに分類されます。ステージされたファイルは、変更され、コミットされる準備が整っているファイルです。

ファイルをコミットするとき、Git では、コミットごとにログメッセージを入力することができ、差分機能を使用して変更を確認することができます。各ファイルとリポジトリ全体のバージョン履歴を表示することもできます。

Dreamweaver 内での編集の追跡と Git への変更のコミット方法についての説明を参照してください。

変更の追跡

Dreamweaver のファイルパネルに、FTP ビューと Git ビューを切り替えるための Git アイコンがあります。Git ビューに切り替えるには、Git アイコンをクリックします。

ファイルパネルでコミットされたすべてのファイルを表示する
ファイルパネルですべてのファイルを表示する

新しいリポジトリを作成したが、ファイルをコミットしなかった場合、ファイルは未追跡状態のままです。それらは緑で表示されます。ただし、リポジトリを初期化した後でファイルをコミットした場合、ファイルは白色で表示されます。

別のリポジトリのすべてのファイルを複製した場合、ファイルは Git によって認識され、白色で表示されます。

ここで、ファイルを編集して「保存」をクリックするとファイルの色がすぐに変化し、変更されたファイルはファイルパネルに黄色で表示されます。これは、リポジトリ内のファイルとローカルシステム内のファイルが同期していないことを示しています。

変更されたファイルをファイルパネルで表示する
変更されたファイルをファイルパネルで表示する

Git パネルを開くと、変更されたファイルが表示されます。行った編集を確認するには各ファイルをクリックします。赤のハイライトは前のバージョンを示し、緑のハイライトは変更が行われたバージョンを示しています。

Git パネルで差分を直接表示することもできます。Git パネルで、差分を表示するファイルを選択します。差分アイコンをクリックします。Git 差分ダイアログボックスが表示され、変更が赤と緑でハイライト表示されます。

コミットメッセージを入力して、変更をコミットする
コミットメッセージを入力して、変更をコミットする

変更のコミット

変更をコミットするには、コミットするファイルを選択し、コミットアイコンをクリックします。

「コミット」をクリックすると、Git コミットダイアログボックスが表示されます。このダイアログボックスには、変更されたファイルが表示されます。変更を確認するには各ファイルをクリックします。 

コミットを進めるには、メッセージボックスにコミットメッセージを入力し、「OK」をクリックします。

Git に変更をコミットする
Git に変更をコミットする

ファイルをコミットすると、Git パネルでもファイルがクリアされます。

Git へのコミット後、ファイルの状態が変更済みからコミット済みに変化する
Git へのコミット後、ファイルの状態が変更済みからコミット済みに変化する

変更を元に戻す

  1. 変更をコミットした後で前のバージョンのファイルに戻す場合は、元に戻すファイルを選択します。 
  2. Git パネルでサンドイッチアイコンをクリックし、「前回のコミット以降に行ったすべての変更を元に戻す」を選択します。

前のバージョンのファイルがローカルリポジトリに復元されます。ファイルパネルで同じファイルを確認できます。

コミットされたファイルの変更を元に戻す
コミットされたファイルの変更を元に戻す

注意:

コミット後にファイルを元に戻すには、ファイルを少なくとも 2 回コミットしている必要があります。

コミット前に変更を元に戻す

ファイルをコミットする前に最後にコミットしたバージョンのファイルを保持する場合:

  1. Git パネルを開きます。
  2. 保持するファイルを選択し、更新アイコンをクリックします。
  3. 確認ダイアログボックスで、「OK」をクリックします。

選択したファイルが変更されたファイルのリストからクリアされ、ファイルの前のバージョンが復元されます。

変更が Git にコミットされていないファイルを元に戻す
変更がコミットされていないファイルを元に戻す

タグの作成

Git に変更をコミットするときは、いつでもタグを作成することができます。タグを使用して、重要なコミットをマークできます(例えば、主要機能のコード全体のチェックイン)。タグは、特定のコミットに対するポインターとして機能します。

  1. タグを作成するには、Git パネルで、タグを作成アイコンをクリックします。

  2. タグを作成ダイアログボックスで、タグの名前を指定します。「OK」をクリックします。

    コミットに対してタグを作成する
    コミットに対してタグを作成する

    作成したタグはコミットに関連付けられます。

    コミットの実行後にタグを作成した場合、タグは自動的に最新のコミットに関連付けられます。

ファイルの履歴を見る

ファイルを Git にコミットするときは、毎回、ファイルの履歴とコミットの詳細を確認できます。同様に、すべての変更とコミットの履歴をリポジトリレベルで表示できます。この機能は、重要なコミットと、コミットに関連付けられているタグを識別するために役立ちます。

  1. ファイルの変更履歴を表示するには、Git パネルを開きます。
  2. 次のいずれかの操作を実行します。
  • 履歴を表示するファイルを選択し、ファイル履歴を表示アイコンをクリックします。
  • または、ファイルパネルでファイルを右クリックし、「ファイル履歴」を選択します。

選択したファイルの Git ファイル履歴が表示されます。同じダイアログボックスで、このファイルに対するコミットの詳細を確認することもできます。

Git でファイル履歴を表示する
Git でファイル履歴を表示する

リポジトリ履歴の表示

リポジトリ履歴を表示するには、Git パネルで、リポジトリ履歴を表示アイコンをクリックします。

すべてのコミットの詳細を示す Git リポジトリ履歴が表示されます。コミットメッセージ、ファイルのコミット日時、コミットに関連付けられているタグ、ファイルをコミットしたユーザーを確認できます。

通常、リポジトリ履歴は、コミットされたファイルのリストをリポジトリレベルで示します。各ファイルをクリックすることで、ファイルレベルの変更履歴を表示することができます。

Git を使用した共同作業

Git の非常に優れた特徴の 1 つが、ブランチです。大抵のバージョン管理システムとは異なり、Git のブランチは、関連するすべてのファイルまたはコードの独立した行と同一であると見なすことができます。デフォルトで、リポジトリには、「マスター」 という 1 つのブランチがあります。これは、主要な、あるいは決定的なブランチです。マスターからブランチを作成して、各ブランチで編集することができます。

ブランチがあるときに別のブランチを作成すると、親ブランチのコピーが作成されます。同じ Git リポジトリの両方のブランチで、個別に作業することができます。例えば、1 つのブランチでバグを修正しながら、別のブランチで新機能に関する作業を行うことができます。

Git では、現在のブランチを別のターゲットブランチにマージして、変更を統合することができます。2 つのブランチをマージしても、オリジンブランチは独立して存在し続けるので、オリジンブランチで作業を続けることができます。

Dreamweaver では、開発者とデザイナーがサイトの作業を並行して行うときに、各ユーザーがマスターからブランチを作成して、別々に変更することができます。必要に応じて、加えた変更を別のブランチに簡単にマージし、両方のブランチでの作業を続行することができます。

Git でのブランチの作成と管理について詳しくは、以下の各セクションを参照してください。

Git でブランチを作成する

  1. ファイルパネルで、すべてのブランチを一覧表示するドロップダウンリストを選択します。

  2. 「ブランチを管理」をクリックします。

    Git でブランチを作成する
    Git でブランチを作成する

  3. ブランチを管理ダイアログボックスで、下部にある + 記号をクリックします。

    ブランチを管理ダイアログボックスの下部の + 記号をクリックする
    ブランチを管理ダイアログボックスの下部の + 記号をクリックする

  4. ブランチを新規作成ダイアログボックスで、コピーの作成元となるオリジンブランチを選択します。

    これが作成する最初のブランチである場合、初期設定ではマスターブランチがオリジンブランチになります。

    オリジンブランチを選択する
    オリジンブランチを選択する

  5. ブランチ名フィールドに、新しいブランチの名前を指定します。

  6. 「OK」をクリックします。

ブランチのマージ

  1. ファイルパネルで、すべてのブランチを一覧表示するドロップダウンリストを選択します。

  2. 「ブランチを管理」をクリックします。ブランチを管理ダイアログボックスで、マージするブランチを選択します。

  3. ダイアログボックスの下部にあるブランチをマージアイコンをクリックします。

  4. ブランチをマージダイアログボックスで、ターゲットブランチを選択します。これがブランチのマージに使用するターゲットリポジトリになります。

    必要に応じて、このマージに関連付けるメッセージを指定します。

  5. ブランチをターゲットにマージするには、「OK」をクリックします。

    Git でブランチをマージする
    Git でブランチをマージする

    ブランチをマージしたときに競合が発生する可能性がある場合は、「リベース」オプションを使用するか、「早送り」オプションを使用せずにマージ中に競合を解決することができます。

    競合を解決するために「リベース」オプションを選択した場合は、現在の変更がターゲットブランチ内の競合に適用されます。リベースを選択して「OK」をクリックした後、Git パネルを開くと、まだコミットしていないファイルが表示されます。

    Git パネルで、リベースを中止したり、再開したりできます。リリベースを中止すると、リベート操作が停止し、ターゲットブランチは変更されません。リベートを再開すると、ターゲットブランチ内の競合に対する変更はスキップされます。

    ブランチとターゲットブランチの間に競合がある場合でも、コミットをマージすることができます。この場合は、マージする変更によって、ターゲットブランチ内の変更が強制的に上書きされます。

    Git でのリベースについて詳しくは、Git のリベース(英語)を参照してください。

リモートリポジトリの操作

Git のリモートリポジトリは、別のネットワークでホストされているプロジェクトのバージョンです。リポジトリとの接続を作成することによって、リモートリポジトリにアクセスできます。リモートリポジトリに指定されているアクセス権限に応じて、そのリポジトリに対して読み取り専用アクセスまたは書き込みアクセスを行うことができます。

グループでの作業中、リモートリポジトリを使用して、他のレポジトリとの間でデータのプッシュとプルを行うことができます。Dreamweaver の Git パネルで、リモート接続を作成し、Fetch、Git Push、Git Pull、Remote Refresh などの様々な Git 操作を行うことができます。

リモートリポジトリの作成および管理方法については、以下の手順を参照してください。

リモートリポジトリの追加

ファイルや作業の進行状況を共有したり、別のネットワークでホストされているプロジェクトファイルにアクセスしたりするには、ターゲットリポジトリとのリモート接続を確立する必要があります。Dreamweaver では、Git パネルでリモートリポジトリを作成することができます。

リモートリポジトリを追加する前に、他のリポジトリで GitHub 公開設定が有効になっていることを確認します。

  1. Git パネルで、「リモートを作成」をクリックします。

  2. 新しいリモートを追加ダイアログボックスで、リモートリポジトリの名前を指定します。

  3. リモートリポジトリの URL を入力し、リモートリポジトリ用のユーザー名とパスワードを指定します。

    警告:

    有効な URL または資格情報を入力しなかった場合、Git Pull、Git Push、Fetch などを実行したときにエラーが発生します。

  4. リモートリポジトリを追加するには、「OK」をクリックします。

    リモートリポジトリを追加すると、Git パネルの上部にあるドロップダウンリストにリポジトリが表示されます。Git Push、Git Pull、Fetch remote およびカウンターの更新を実行するためのアイコンも表示できます。

    Git にリモートリポジトリを追加する
    Git にリモートリポジトリを追加する

リモートリポジトリの管理

リモートリポジトリを追加し、接続を確立したら、リモートリポジトリからファイルをフェッチし、ローカルリポジトリにプルすることができます。リモートリポジトリにファイルをプッシュすることもできます。ただし、Git Push アクションを初めて実行する前に、リモートリポジトリからファイルをフェッチしておく必要があります。

ファイルをプッシュする前に、ローカルリポジトリ内のすべてのファイルをコミットしておく必要があります。ローカルリポジトリにステージされたファイルがある場合、Git Push は成立しません。 

Dreamweaver 内で以下の Git 操作を実行することができます。

Fetch all

すべてのリモートのフェッチとカウンターの更新:すべてのリモート接続からすべてのファイルをフェッチするには、このアイコンをクリックします。Git Push または Git Pull を実行する前に Git Fetch を実行することをお勧めします。この操作はリモートからファイルをフェッチするだけであり、ローカルリポジトリを変更することはありません。

Git Pull

Git Pull:変更されたファイルをリモートリポジトリからプルし、変更をローカルリポジトリにマージするには、このアイコンをクリックします。単一のリポジトリまたはリポジトリのグループからフェッチできます。Git Pull アイコンをクリックすると、Git Pull ダイアログボックスが表示されます。

追跡ブランチ(現在のブランチまたは別のブランチ)を設定し、プル設定を指定します。初期設定では、既定のマージが選択されています。この場合、リモートリポジトリのファイルがローカルリポジトリにプルされ、変更がローカルリポジトリにマージされます。

ファイルをコミットしないマージを設定したり、リベースやソフトリセットを実行したりできます。

リモートリポジトリから Git Pull を実行する
リモートリポジトリから Git Pull を実行する

Git Push

リモートリポジトリに接続した後、ファイルを変更してコミットすると、変更が Git によって記録されます。Git パネルの Git Push アイコンに、変更されたファイルの数がすぐに表示されます。これらのファイルを、リモートリポジトリにプッシュすることができます。

Git Push を実行すると、ローカルリポジトリに対して実行したコミットが、リモートリポジトリにプッシュされます。

Dreamweaver 内からファイルをプッシュするには、Git パネルで Git Push アイコンをクリックします。Git Push ダイアログボックスが表示されます。指定した現在の追跡ブランチまたは別のブランチにコミットをプッシュすることができます。

このダイアログボックスで、プッシュ設定を指定することもできます。初期設定では、「既定のプッシュ」オプションが選択されています。「強制 Push」を選択して、ローカルリポジトリの変更をリモートリポジトリに強制的にプッシュすることもできます。 

既存のリモートブランチを削除し、ローカルファイルをリモートリポジトリにプッシュする場合は、「リモートを削除」を選択します。

タグをプッシュするには、「タグを送信」チェックボックスをオンにし、「OK」をクリックしてファイルをプッシュします。

ローカルコミットをリモート Git リポジトリにプッシュする
ローカルコミットをリモート Git リポジトリにプッシュする

Git の無視リストへのファイルの追加

Git でファイルが操作されないようにする場合は、.gitignore フォルダーにファイルを追加することができます。Git でコミット、プッシュ、プルなどの操作が実行されるときに、このフォルダー内のファイルは常に無視されます。リポジトリを複製している他のユーザーも .gitignore フォルダー内のファイルを認識できるように、.gitignore ファイルをリポジトリにコミットする必要があります。

.gitignore にファイルを追加するには、Dreamweaver のファイルパネルに移動します。Git で無視するファイルを選択して右クリックし、Git/.gitignore に追加を選択します。

.gitignore にファイルを追加する
.gitignore にファイルを追加する

任意の時点で .gitignore からファイルを削除するには、ファイルパネルでファイルを選択します。右クリックし、Git/.gitignore から削除を選択します。

.gitignore ファイルを変更した場合は、変更後に必ずローカルとリモートのリポジトリにファイルをコミットしてください。

Bash ターミナルによる Git へのアクセス

git コマンドを使用して Git 操作を実行することに慣れているユーザーの場合は、Dreamweaver 内から Git ターミナルにアクセスできます。

Git ターミナルにアクセスするには、次のいずれかの操作を行います。

  • ウィンドウ/Git をクリックし、Bash/Terminal コンソールを開くアイコンをクリックします。
  • ファイルパネルで、Git ビューに切り替えます。リポジトリドロップダウンリストの横にある Git ターミナルを開くアイコンをクリックします。

この記事に記載されているすべての操作を git コマンドを使用して実行することができます。一般的な git コマンドを表示するには、Git クイック操作ガイド(英語)を参照してください。

Dreamweaver での Git 環境設定の指定

Dreamweaver の Git 環境設定を使用して、Dreamweaver で Git を使用するためのいくつかの設定を定義することができます。環境設定ダイアログボックスを使用して、ターミナルへのパスやタイムアウト設定などの Git 環境設定を指定することができます。

  1. 編集/環境設定を選択します。

  2. 環境設定ダイアログボックスで、「Git」を選択します。

  3. Git環境設定ダイアログボックスで、次のオプションを設定します。

    • Git 実行ファイルへのパス:Git クライアントの .exe ファイル。実行ファイルが別の場所に保存されている場合は、Git の .exe ファイルを保存した場所を参照します。
    • 既定の Git 操作のタイムアウト:Git 操作のタイムアウトを秒単位で指定します。
    • 端末へのパス:Git ターミナルで開いて使用する実行ファイルのフルパスです。
    • コマンドライン引数:Git コマンドのコマンドライン引数があれば、それを指定します。
    Dreamweaver で Git 環境設定を指定する
    Dreamweaver で Git 環境設定を指定する

  4. 「適用」をクリックして設定を保存します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー