GCSにおいた画像のビューアーをスプレッドシートで作る #GoogleCloud

こんばんは claspが嫌いなわけじゃないけど、
別にしょぼいスクリプトまでclasp使う必要なくね派の大橋です。

ホントはclaspをCIで使ったり、最近良く質問を受ける「フォームの自動返信スクリプト」のよくあるバグについて書こうと思いましたが、 ~~めんどくさかった~~ 時間がなかったです。

Cloud Storageのビューアーに作りたい

さて皆さんCloud Storage(GCS)は使っていますか？
システムを作ったりすると画像ファイルをアップロードしたり、編集した画像を保存したりと
GCSに画像ファイルを置くことは多々あると思います。

ただここで問題になるのはGCSには画像のビューアーはありません。
自前でGAEなどを用いて作ってもいいのですが、いざやろうと思うと結構めんどくさいです。

そこで今回はスプレッドシートを利用して、簡易のGCS画像ビューアーを作りたいと思います。

スプレッドシートで画像表示

スプレッドシートには IMAGE という関数があり、URLを指定するとセル内に画像を表示することができます。
直接画像を貼り付けるのに比べて、セル内の文字列を引数にして画像を表示でき、今回の様なビューアーを作るにはとてもいいです。

今回はこのIMAGE関数とGCSのSigned URL(署名付きURL)を利用して、画像ビューアーを作りたいと思います。

準備

署名URLを作成するには、参照する予定のバケットの読み込み権限を持ったサービスアカウントの秘密鍵が必要です。
秘密鍵は Google Cloud Consoleから発行してください。
※今回は~~めんどくさかった~~ 時間がないので作成方法は省略します。以下をご覧ください。形式はJSON形式でダウンロードしてください。

コード

今回はスプレッドシートのカスタム関数を作成し、IMAGE関数に渡したいと思います。
先程取得した秘密鍵が含まれるJSONファイルはhtmlとしてsecret.json.htmlという名前で保存してください。

Code.gs

function testCreateSignedUrl() {
  Logger.log(createSignedUrl("gs://hoge"));

}

/**
 * Create Signed URL
 *
 * @param {String} path gcs path prefix is gs://
 * @return Signed URL
 * @customfunction
 */
function createSignedUrl(path) {
  var resource;
  if (path.indexOf("gs://") === 0) {
    resource = path.replace("gs:/", "");
  } else {
    throw new Error("path must include gs://");
  }

  var sl = [
    "GET",
    "",
    "",
    "" + (new Date().getTime() + 60 * 1000),
    resource
  ];

  var unsign = sl.join("\n");
  var secret = JSON.parse(HtmlService.createHtmlOutputFromFile("secret.json.html").getContent());
  var sign = Utilities.computeRsaSha256Signature(unsign, secret.private_key);
  var url = "https://storage.googleapis.com" + resource;
  var req = UrlFetchApp.getRequest(url, {payload:{
    "GoogleAccessId": secret.client_email,
    "Expires": sl[3],
    "Signature": Utilities.base64Encode(sign)
  }});

  return req.url + "?" + req.payload;
}

シート内で使う

あとはシート内でIMAGE関数に渡すだけです。
まずGCSに非公開な画像を置きます。

そしてこれを表示してみます。

まとめ

今回は簡易ですがGCSビューアーを作成してみました。