技術のメモ帳

気が向いたときに書いてます

[GAS]URLのスクリーンショット画像をGyazoに保存する

URLからスクショ画像を作成し、GyazoにアップロードするスクリプトGoogle Apps Scriptで書きました。

スクショの生成には、screenshotlayer APIを利用しました(要登録。100件/月が無料で利用できます)。

なお、Gyazo × Google Apps Scriptについては、過去に以下エントリも書いたので、不明点があればご参照ください。

実装する関数

実装する関数は次の通りです。

各アクセストークン(GYAZO_ACCESS_TOKENSCREEN_SHOT_LAYER_ACCESS_KEY)は、事前に[スクリプトのプロパティ]として登録しておきます。

function doPost(e) {
  try {
    if (!e) throw new Error('Your request is missing required parameter');
    return makeResponse(uploadGyazoByUrl(e.parameter.url));
  } catch(ex) {
    return makeResponse(ex.toString());
  }
}

function makeResponse(message) {
  var payload  = JSON.stringify({ message: message }),
      mimeType = ContentService.MimeType.JSON;
  return ContentService.createTextOutput(payload).setMimeType(mimeType);
}

function uploadGyazoByUrl(url) {
  if (!url) throw new Error('Your request is missing required parameter');
  var screenshot = createScreenshotByUrl(url),
      access_token = PropertiesService.getScriptProperties().getProperty('GYAZO_ACCESS_TOKEN'),
      options = {
        method: 'post',
        payload: {
          access_token: access_token,
          imagedata: screenshot.getBlob()
        }
      },
      response = UrlFetchApp.fetch('https://upload.gyazo.com/api/upload', options),
      result   = JSON.parse(response);

  Logger.log(result);
  if (response.getResponseCode() !== 200) throw new Error(result.message);
  return 'uploaded: '+result.url;
}

function createScreenshotByUrl(url) {
  var access_key = PropertiesService.getScriptProperties().getProperty('SCREEN_SHOT_LAYER_ACCESS_KEY'),
      viewport = {
        iPhone4:     '320x480',
        iPhone5:     '320x568',
        iPhone6:     '375x667',
        iPhone6Plus: '414x736',
        iPad:        '1024x768',
        GalaxyS5:    '360x640',
        MacBook13:   '1440x900',
        iMac27:      '2560x1440'
      },
      user_agent = {
        ChromeWin7:   'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36',
        FirefoxWin7:  'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:37.0) Gecko/20100101 Firefox/37.0',
        ChromeMacOSX: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36',
        SafariMacOSX: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/600.6.3 (KHTML, like Gecko) Version/8.0.6 Safari/600.6.3'
      },
      params = {
        access_key: access_key,
        delay:      3,
        format:     'PNG',
        user_agent: user_agent.ChromeMacOSX,
        url:        url,
        viewport:   viewport.MacBook13,
        width:      640
      },
      query = Object.keys(params).map(function(key) {
        return key + '=' + params[key];
      }).join('&');

  return UrlFetchApp.fetch('http://api.screenshotlayer.com/api/capture?'+query);
}

// for Testing Function
function doPostTest() {
  var expected_args = {
    parameter: {
      url: 'http://yoshiyuki-hirano.hatenablog.jp/'
    }
  };
  doPost(expected_args);
}

テスト用関数でテストをすると、スクショがGyazoにアップロードされていました。日本語も問題なく表示されています。

doPost関数を外部からアクセス可能にするため、[公開]→[ウェブアプリケーションとして導入]よりデプロイして、ウェブアプリケーション用URLを発行します。

curlコマンドで確認

CLIから、発行URLに必要なパラメータをPOSTして動作確認します。

$ curl -d url=http://b.hatena.ne.jp/ -L https://script.google.com/macros/s/***YOUR_APP_ID***/exec

こちらも問題なく動作しました。

活用シーン

はてなブックマークのWebHookを連携させたら、デザイン系のギャラリーサイト等が簡単に作れそうです。

また、SpreadSheetの自作関数として、セルのURLに対してスクショを生成すれば、面倒な作業が一気に片付きそうです。

なお、スクリーンショットAPIを久々に触ったのですが、インターフェースが充実していて、かなり使い勝手が良い印象でした(無料で月100件利用できるのが好印象)。

ちなみに、URL2PNGもドキュメントが充実していて、本番運用ならばコチラがよいかな、という印象を持ちました(無料利用分がなく、若干値段が高めです)。

PDFKitやPhantomJSを使って、独自実装するのもそこまで難しくはないスクリーンショット生成処理ですが、PaaSに委ねてしまうのも、一つの省力化かなと思いました。

参考リンク