はてなブログにFlickrのEXIF情報を表示させる方法とSSL対応法

EXIF情報の表示のさせ方

写真をよく貼るブログを書いているので撮った時の各種カメラの設定がわかるEXIF情報を写真の下に簡単に書けたらいいなと前々から考えていました。下の記事を参考にして設定させていただきました。まずはこれを見て設定方法を確認していただけたらと思います。

karaage.hatenadiary.jp

SSL化(HTTPS化)対応の仕方についての疑問点の解消

参考にさせていただいた下の記事では、

blog.hisway306.jp

これは無かったことにするには非常に惜しい機能で、どうするか悩んだのですが、結局のところスクリプトファイルの中身をそのまま記事ページのヘッダに書くという力業で対処しています。
独自ドメインを使用したはてなブログでSSL配信がようやく可能になった！ - 酔人日月抄

とありますが、初心者の私はどこをどういじるのかが全く分かりませんでした。試行錯誤してできた結果をメモとしてまとめておきます。

作業メモ

<script type="text/javascript">

    // var FLICKREX_API_KEY = "(your Flickr API key)";

    var FLICKREX_EXIF_JQUERY_SELECTOR = "#content img";

    //var FLICKREX_EXIF_FORMAT = "%camera% / %Focal Length% / f/%aperture% / ISO %ISO Speed% / %Exposure% sec / %Exposure Bias% EV / %Software%";



//var FLICKREX_EXIF_FORMAT = "%camera%, %Focal Length% / f/%aperture% / ISO %ISO Speed% / %Exposure%sec / %Exposure Bias% EV";

    var FLICKREX_EXIF_FORMAT = "%camera%, %Lens%, %Focal Length% / f/%aperture% / ISO %ISO Speed% / %Exposure%sec / %Exposure Bias% EV";    

</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="//github.com/drikin/FlickrEx/raw/stable/flickrex.js"></script>

<script src="//github.com/drikin/FlickrEx/raw/stable/exifex.js"></script>

上を「ブログの管理->デザイン->カスタマイズ->フッタに以下をコピペ」して設定するのですが

以下の部分を書き換える必要があります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="//github.com/drikin/FlickrEx/raw/stable/flickrex.js"></script>

<script src="//github.com/drikin/FlickrEx/raw/stable/exifex.js"></script>

手順としては

<script src="https//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>A</script>

<script>B</script>

//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js　をhttps//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js　に変更
A→https://raw.githubusercontent.com/drikin/FlickrEx/stable/flickrex.js　の中身をコピペ
B→https://raw.githubusercontent.com/drikin/FlickrEx/stable/exifex.js　の中身をコピペ

という風にかえてあげると以下のように表示されるようになりました(感動)

f:id:flum0827:20190817034956p:plain

注意点

Flickr貼り付けで張り付けたものはデフォルトでは以下のように表示されます。

HTML編集では

<p><a data-flickr-embed="true" href="https://www.flickr.com/photos/flum0827/48495236132/" title="Untitled by flumingo, on Flickr"><img src="https://live.staticflickr.com/65535/48495236132_873528445c_b.jpg" alt="Untitled" width="1024" /></a></p>

こういう風に表示されます。

"true" →　"false"

に変えて

<p><a data-flickr-embed="false" href="https://www.flickr.com/photos/flum0827/48495236132/" title="Untitled by flumingo, on Flickr"><img src="https://live.staticflickr.com/65535/48495236132_873528445c_b.jpg" alt="Untitled" width="1024" /></a></p>

とすることで

と表示されるようになります。

今のところこんな感じでCtrlキーで写真1枚ずつ選択してHTML編集で変更しています。