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);

    }

  });

});