はてなブログ + Google Photos (というか Lightroom Classic の現像のカスタムファイル名) で、写真の exif を表示する

Google Photos のオリジナルデータには exif の情報が入っているので、こいつを exif-js でパースして表示、と思ったけどそもそも CORS 的に無理だった。

なので割と力業で表示させてみた。こんな感じで exif を表示してる。

やり方

Lightroom Classic のファイル書き出しで、カスタムファイル名にゴリっと必要そうな exif をいれちゃう。これでファイル名が長い jpg ファイルができあがる。なお私の環境だと、カスタムファイル名でカスタムテキストや、テンプレート以外の文字列を埋め込むと、高確率で Lightroom が落ちたり、意図したファイル名にならなかったりした。

少なくとも、Windows 環境(NTFS) + Windows の Google バックアップと同期 だと、意図したファイル名で Google Photos にアップロードされる。

はてなブログ側は、このファイル名を読み取って適当に HTML に挿入する JS をフッタなどに埋め込む。これで、このエントリーのような表示になる。力業で全然美しい方法では無い…。

document.addEventListener('DOMContentLoaded', function() {
  jQuery('img.magnifiable').each(function(_, e) {
    var filename = e.src.replace(/.*\//, '').replace(/\.*/, '');
    // YYYYMMDD__exif1__exif2__exif3 な lightroom から出力したファイル名。カスタムテキストは __ をセットしてセパレータに。
    var regexp = /^\d{8}__(.*)\.[^.]+$/;
    var matches = filename.match(regexp)
    if (matches) {
      var exif = decodeURI(decodeURIComponent(matches[1]))
        .replace(/__/g, ', ')
        .replace(/\+/g, ' ')
        .replace(/1-(\d+)\s/, '1/$1')
        .replace(' mm,', 'mm,')
        .replace(/ ISO (\d+)/, ' ISO$1')
        .replace(/\s\(f\s-\s(.+?)\)/, ', F$1');

      var exifElement = jQuery('<div/>', {
        text: exif,
        style: 'text-align: right; color: #AAAAAA; font-size: 80%; margin: -5px 5px 0 0;'
      });
      jQuery(e).parent().parent().append(exifElement);
    }
  });
});