GyazoのメタデータをJSONで取得してHugoに渡す

当ブログはHugoで生成しているんですが、画像はすべてGyazoから持ってきています。

私はGyazo Proにずっと入ってるんですが、OCRが便利すぎるし、動画も画像も無尽蔵にアップロードできるし、コスパがヤバイです。おまけに画像CDNとしての役割も果たしてくれるなんて破格すぎる！

というわけで、GitHubには一切画像を置いてませんし、画像用のサーバーなどは持っていません。

GyazoのmetadataをURLから取得 - くたくたじゅうよん
にある通り、GyazoのIDに紐づいてmetadataをJSONとして取得できるようです。
せっかくなのでGyazoのショートコードを作成してみました。

{{/* gyazo.html */}}

{{ $id  := .Get 0 }}
{{ $url := printf "https://gyazo.com/%s.json" $id }}

{{ with try (resources.GetRemote $url) }}
  {{ with .Err }}
    {{ errorf "Unable to get remote resource %q: %s" $url . }}
  {{ else with .Value }}
    {{ $json := . | transform.Unmarshal }}

    <a href="{{ $json.url }}" class="luminous">
      <img alt="{{ $json.metadata.title }}" src="{{ $json.thumb1000 }}">
    </a>

  {{ else }}
    {{ errorf "Unable to get remote resource %q" $url }}
  {{ end }}
{{ end }}

ついでにLuminous.jsにも対応しておきます。

↓↓↓ お試し画像 ↓↓↓

さらに、記事リスト一覧でGyazo metadataの.grid_thumbs.large_url_webpを取得してサムネとして利用してみます。

{{/* Gyazo サムネイル or デフォルト */}}
{{ if $page.Params.gyazoThumb }}

{{/* Gyazo サムネ */}}
{{ $id  := $page.Params.gyazoThumb }}
{{ $url := printf "https://gyazo.com/%s.json" $id }}

{{ with try (resources.GetRemote $url) }}
  {{ with .Err }}
    {{ errorf "Unable to get remote resource %q: %s" $url . }}
  {{ else with .Value }}
    {{ $json := . | transform.Unmarshal }}

    <div class="content-thumb">
      <a href="{{ $page.RelPermalink }}">
        <img alt="{{ $json.metadata.title }}" src="{{ $json.grid_thumbs.large_url_webp }}">
      </a>
    </div>

  {{ else }}
    {{ errorf "Unable to get remote resource %q" $url }}
  {{ end }}
{{ end }}

{{ else }}
{{/* デフォルトアイキャッチ */}}
<div class="content-thumb">
  <a href="{{ $page.RelPermalink }}">
    <img src="https://i.gyazo.com/thumb/160/f8e3964957b677a1b6660f458bbd1d0d-jpg.jpg" width="160" alt="">
  </a>
</div>
{{ end }}

もしフロントマターにgyazoThumbというパラメータがなかったら、デフォルトアイキャッチを表示します。

これらの処理は、ビルド時に行われるだけで、訪問者の環境でJSONを取得したりするわけではないので、見る分には特に何の不便もありません。

あとはOGP対応とかページネーションのカスタマイズが残っているんですが……。
問題が見えているわけじゃないから後回しでいっか笑(〃￣︶￣)人(￣︶￣〃)ｲｲﾖｰ