技術のメモ帳

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

[GAS]URLをPOSTしてGyazoに画像ファイルをアップロードするAPIとブックマークレット

今回は、POSTされたURLの画像ファイルをGyazoにアップロードするAPIGoogle Apps Scriptで書きます。

以前書いたGyazoに画像ファイルをアップロードするの関数の応用となります。

アクセストークンの取得については、上記エントリを参照してください。

実装するAPI

新規のプロジェクト(空のプロジェクト)を起ち上げ、次の関数を書きます。

function doPost(e) {
  try {
    if (!e) throw new Error('Your request is missing required parameter');
    var image   = UrlFetchApp.fetch(e.parameter.url),
        options = {
          method: 'POST',
          payload: {
            access_token: PropertiesService.getScriptProperties().getProperty('GYAZO_ACCESS_TOKEN'),
            imagedata: image.getBlob()
          }
        },
        response = UrlFetchApp.fetch('https://upload.gyazo.com/api/upload', options),
        result   = JSON.parse(response);
    if (response.getResponseCode() !== 200) throw new Error(result.message);
    return makeResponse('uploaded: '+result.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);
}

// for Testing function
function doPostTest() {
  var expected_params = {
    parameter: {
      url: 'https://www.google.co.jp/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
    }
  };
  Logger.log(doPost(expected_params));
}

[ファイル]→[プロジェクトのプロパティ]→[スクリプトのプロパティ]より、アクセストークンをGYAZO_ACCESS_TOKENとして保存します。

テストが問題なく動作したら、[公開]→[ウェブアプリケーションとして導入]を選択して、デプロイします。

curlコマンドで確認

CLIから、ウェブアプリケーション用に発行されたURLに必要なパラメータをPOSTして動作確認をします。

$ curl -d url=http://sample.com/image.png -L https://script.google.com/macros/s/***YOUR_APP_ID***/exec

{"message":"uploaded: https://i.gyazo.com/***IMAGE_ID***.png"}と返されれば成功です。

ブックマークレットを作る

せっかくなので、ブックマークレットを作って、ブラウザからPOSTできるようにしてみましょう。

ブックマークレットのコードを可読な状態にしたものは、以下の通りです。

ブックマークレットで jQuery を使う魔法の 210 文字 - Qiitaを参考にして、一部変更しました。

YOUR_APP_IDは、適宜置き換えてください。

javascript:!function(d,f,s){
  s = d.createElement("script");
  s.src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";
  s.onload = function(){ f(jQuery.noConflict(1)) };
  d.body.appendChild(s)
}(document, function($){
  $.ajax({
    url: "https://script.google.com/macros/s/***YOUR_APP_ID***/exec",
    type: "POST",
    dataType: "JSON",
    data: {
      url: location.href
    },
    success: function(res) {
      alert(res.message)
    },
    error: function(res) {
      alert(res.message)
    }
  })
});

ブックマークレットの場合は、短くした方が使いやすいので、不要なスペースを除去します。

javascript:!function(d,f,s){s=d.createElement("script");s.src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";s.onload=function(){f(jQuery.noConflict(1))};d.body.appendChild(s)}(document,function($){$.ajax({url:"https://script.google.com/macros/s/***YOUR_APPLICATION_ID***/exec",type:"POST",dataType:"JSON",data:{url:location.href},success:function(res){alert(res.message)},error:function(res){alert(res.message)}})});

ブラウザに上記コードを保存して、画像を開いた状態でブックマークレットを実行すると、次のようになります(レスポンスは遅めです)。

Gyazo履歴にも、問題なく表示されました。

なお、ブラウザでの動作確認は、Google Chromeのみで行っております。

他ブラウザでは動かない可能性もありますので、何卒ご了承ください。