Google Chrome拡張機能とプルーフロッグのAPI連携方法 : proofrog

ここではGoogle Chrome拡張機能とプルーフロッグの連携方法についてご説明します。

Google Chrome拡張機能のインストール方法については、以下のリンクを参照してください。

スクリーンショットの作成方法については、以下のリンクを参照してください。

APIキーを登録する

Google Chrome拡張機能をインストールしたばかりでは、Webサイトのスクリーンショットを撮って自分のワークスペースに上げることができません。

まず、このGoogle Chrome拡張機能を自分のワークスペースに連携するために、APIキーを登録する必要があります。

ワークスペースのAPIキーの取得方法については、以下のサイトを参照してください。

この拡張機能では 読み込み&書き込み権限 が必要になります。注意してください。

取得したAPIキーをフォームに入力して、登録してください。（APIキーは、生成したときしか取得できません。登録済みのAPIキー情報を後から取得することができませんので、記録していなかった場合は新規作成して生成したAPIキーをお使いください。）

設定画面が開いたら、APIキーを正確に入力（コピー＆ペーストをお勧めします）して、追加ボタンを押します。

APIキーの登録が完了します。

画面を撮影する をクリックすると、現在開いているWebサイトのスクリーンショットが撮影され、以下のようなページが開かれます。

スクリーンショットの作成方法のページも参考にしてください。

スクリーンショットは自動でページスクロールが行われてページ全体に対して行われます。

右上のアイコンから各種操作を行います。

ワークスペースにアップロード をクリックすると、以下のダイアログが表示されます。APIキーを選択（ダッシュボードごとに異なるAPIキーを設定できるため）し、さらにアップロードしたいワークスペースを選択します。

「アップロード」ボタンを押すと、アップロード処理が開始されます。

新しいワークスペースにアップロードする場合は「＋ワークスペースを追加」を選択し、表示されたダイアログにて作成するワークスペースの情報を入力します。

必要な情報を入力して、「作成」ボタンを押します。アップロード先のワークスペースの一覧に、新規作成されたワークスペースが追加されていることが分かります。選択して、アップロードボタンを押します。

実際にproofrogのワークスペースを見てみると、新ワークスペースが作成されて、アップロードしたWebサイトのスクリーンショットがアップロードされていることが確認できます。

この拡張機能を用いて、製作中のWebサイトなどのスクリーンショットを随時アップロードし、比較処理を行うことで、手軽にバージョン管理や修正結果の確認を行うことができます。

比較プロジェクトの作成方法については、以下のページを参照してください。