proofrogにはChrome拡張機能があります。 


これは、今見ているWebサイトのスクリーンショットを自分のproofrogのワークスペースにアップロードする拡張機能です。 


Webサイトを即座にアップロードできますので、手軽に製作中のWebサイトを比較することができます。


ここではChrome拡張機能の使用方法についてご説明します。


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




proofrog-chrome-extension の使用方法 


まず、はじめにスクリーンショットを撮りたいWebサイトを開きます。 

右上のChrome拡張機能一覧にあるproofrogのアイコンをクリックすると以下のようなメニュー画面が表示されます。 


APIキーを登録する 


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

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

 

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


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

APIキーを登録する をクリックして、取得したAPIキーをフォームに入力して、登録してください。 


また、一度APIキーを登録しても、別のワークスペースのAPIキーを登録しなおせば、別のワークスペースにスクリーンショットをアップロードすることができます。 

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


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


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


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

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


ワークスペースにアップロード をクリックすると、どのワークスペースにスクリーンショットをアップロードするかの選択ダイアログが表示されます。 


中央のリストから、アップロード先のワークスペースを選択して アップロード をクリックしてください。 

また、新しくワークスペースを作成し、そのワークスペースに対してスクリーンショットをアップロードすることもできます。

 

+ワークスペースを追加してアップロード を選択して、新しいワークスペースの 名前・備考 を入力し、アップロードをクリックしてください。

 これで、今開いていたWebサイトのスクリーンショットを選択したワークスペースにアップロードすることができました。 


例えば、「Chrome拡張機能で作ったワークスペース」としてアップロードしてみます。 


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

これで、Chrome拡張機能の使用方法についての説明は終了です。 


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

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