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


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

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


APIキーを登録する 


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

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

 

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


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



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

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

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

ワークスペースにスクリーンショットをアップロード 


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

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


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


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

  • プルーフロッグのワークスペースにアップロード 
  • PCに画像を保存(PNG形式) 
  • APIキーの設定




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

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


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

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


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


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

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