はじめに
今回の記事では、Google Apps Script（GAS）を使用して、Webサイトのスクリーンショットを自動的に取得する方法を紹介します。
Google Apps Script（GAS）自体にはWebページのスクリーンショットを直接取得する機能は存在しません。そのため、今回の方法では、外部サービスであるAPIFlashというサービスを使用します。
全体の流れ
APIFLASHアクセスキーの取得
スクリーンショットを取得できるAPIサービス「APIFLASH」を使用するために、アカウントの作成、アクセスキーの生成を行います。
Google Driveの準備
今回の方法では、GASで取得したスクリーンショットをGoogle Driveに保存します。
そのため、保存したいGoogle DriveのフォルダのIDを取得しておく必要があります。
GASの設定
GASのスクリプトエディタでスクリーンショットを取得するためのスクリプトを記載します。合わせて定期的に実行させるためのトリガーの設定やテスト動作を行います。
作成方法
APIFLASHアクセスキーの取得
APIFLASHにアクセス
アカウントの作成
[Get Started now] をクリックして、メールアドレス・パスワードを入力、[Create account]をクリックしてアカウントを作成します。
APIFLASHから届くメールからメールアドレス認証を行います。
アクセスキーの取得
アカウント作成後に表示される画面から、画像赤枠内にaccess_key=”アクセスキー”が表示されるため、こちらをコピーして控えておきます。
Google Driveの準備
Google Driveにアクセス
フォルダIDの取得
スクリーンショットを保存したいフォルダを選択して、アドレスバーにあるフォルダIDをコピーして控えておきます。（画像赤枠参照）
https://drive.google.com/drive/u/0/folders/フォルダID
GASの設定
GASにアクセス
[+新しいプロジェクト]からスクリプトエディタを起動
新しいプロジェクトを作成すると、GASのエディタが起動します。デフォルトで表示されている以下のコードは削除しておきます。
function myFunction() {
}
代わりに、以下コードを貼り付けます。
function saveFullPageScreenshot() {
// APIキー、フォルダID、URLを変数として記載
var apiKey = 'XXXXXXXXXXXXXXXXXXXXXXX'; // apiflashから取得したアクセスキー
var folderId = 'XXXXXXXXXXXXXXXXXXXXXXX'; // スクリーンショットを保存するGoogle DriveのフォルダID
var url = 'https://example.com'; // スクリーンショットを取得したいURL
var today = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'yyyyMMdd');
var apiUrl = 'https://api.apiflash.com/v1/urltoimage'
+ '?access_key=' + apiKey
+ '&url=' + encodeURIComponent(url)
+ '&full_page=true' // full_pageパラメータをtrueに設定してフルページのスクリーンショットを取得
+ '&fresh=true';
try {
var response = UrlFetchApp.fetch(apiUrl);
if (response.getResponseCode() == 200) {
var imageBlob = response.getBlob();
var folder = DriveApp.getFolderById(folderId);
// ファイル名を「yyyymmdd.png」とする
var filename = today + '.png';
folder.createFile(imageBlob).setName(filename);
Logger.log('Screenshot saved to Google Drive with filename: ' + filename);
} else {
Logger.log('Failed to get screenshot: ' + response.getContentText());
}
} catch (e) {
Logger.log('Error: ' + e.toString());
}
}
2行目のXXX・・・の部分にはAPIFLASHのアクセスキーに置き換えます。
例：アクセスキーが1234567890の場合
var apiKey = ‘1234567890’;
3行目のXXX・・・の部分にはGoogleDriveのフォルダIDに置き換えます。
例：フォルダIDが1234567890の場合
var folderId = ‘1234567890’;
4行目にはスクリーンショットを取得したいwebページのURLに置き換えます。
例：google.comの場合
var url = ‘https://google.com’;
サービスの追加
[サービス]から[Drive API] > [追加]をクリックする。
トリガーの作成
GASの左メニューから[トリガー(時計マーク)]をクリックし、右下[+トリガーの作成]をクリックします。
[イベントのソースを選択]で任意の実行したい時間を選択できます。
テスト動作
GASを保存
GASの上部バーから[プロジェクトの保存]をクリックして保存します。
テスト動作
[▷実行]をクリックします。最初のスクリプトの実行には権限が必要となるため、[承認が必要です]というモーダルが表示されたら、
[権限を確認]>[表示されているGoogleアカウント]>[詳細]>[無題のプロジェクト（安全ではないページ）に移動]>[許可]まで移動します。
クリック後GASが実行され、1分ほど待つと指定したフォルダにスクリーンショットが保存されます。
実行の際の注意点
便利なオプション
APIFLASHでは様々なオプションを追加することができます。今回はスクリプト内の以下の部分で、フルページを取得する[full_page]とキャッシュを無視する[flesh]を追加しています。
var apiUrl = 'https://api.apiflash.com/v1/urltoimage'
+ '?access_key=' + apiKey
+ '&url=' + encodeURIComponent(url)
+ '&full_page=true' // full_pageパラメータをtrueに設定してフルページのスクリーンショットを取得
+ '&fresh=true';以下に代表的なオプションを紹介します。
| width | ページ横幅を指定できます。 |
| delay | Webページの読み込み後、スクリーンショットを取得するまでの遅延時間をミリ秒単位で指定できます。 |
full_page | ページ全体のスクリーンショットを取得できます。 |
fresh | キャッシュを無視して新しいスクリーンショットを取得できます。 |
quality | JPEGの品質を0から100の間で指定できます。 |
詳しいオプションの確認や、オプションの指定方法などは、APIFLASHのQuery builderから確認ができます。
GASおすすめ本
GASをもっと勉強したい！ほかにも自分で何か作成したい！という方には以下がおすすめです。仕事で使えるアイデアなども得ることができます。
