2014年11月14日金曜日

Flickrの写真のEXIFを自動的に表示するブログパーツ FlickrEx

Flickrの写真をブログに貼っている時、その下に自動的にEXIFデータを表示してくれるブログパーツ（Javascript）FlickrExを使ってみました。BloggerとSeesaaでの使い方をメモ。

現在はPC版の画面でしか効きません。BloggerもSeesaaもスマホ版画面ですとEXIFが出ません。これはJavascript自体がスマホ版のページに組み込まれていないからです。スマホ版のHMTLテンプレートのいじり方が私にはわかっていません。 ただスマホの場合画面があまり大きくないのでEXIFが出ない方がすっきりして見易い気もしますのでこれでもいいかな、と思っています。

しかも、BloggerではIE11でみてみたら、動作しませんでした。Seesaaでは動作しています。

また、EXIF情報はaタグの中に置かれるためデフォールトでは下線が付いてしまいます。これがうまく消せません。Bloggerでは:linkと:visitedでは消してあるので目立ちませんが、Seesaaでは絶えず下線がついてしまいます。 そこでSeesaaではaタグすべてについて下線を消してしまいました。Bloggerでは何もいじらないことにしました（従ってマウスオーバーでEXIF情報のところに下線が出てくる）。

動作チェックはMac版Safari。あとMac版Chromeでも少しチェックしています。FirefoxとWindowsはちょっと確認しただけです。

追記 2016.02.10.

BloggerのIE11で出なかったのは、テンプレートがmetaタグでIE7コンパチモードを指示していたからのようです。これを削ったら（だと思う）動くようになりました。

スマホ版画面のHTML/CSSコードのいじりかたがわかったので、コードを実装しました。スマートフォンでもEXIFが出るようにしました。

aタグに囲まれたときに付く下線を消すことですが、やや無理がありますが、消しました:

a[href*="//www.flickr.com/"][title],
a[href*="//www.flickr.com/"][title]:hover { color: inherit; } /* FlickrEx's font color and underline color. text-decoration is rendered by the containing a tag. */
a[href*="//www.flickr.com/"][title]:not(:hover) { text-decoration: none; }

下線はaタグが発生させていました。だからflickr-exifクラスのタグにtext-decoration: none;を付けても消えなかったのでした。

aタグの色と下線（:hover）の色は独立なので、:hoverの色をフォントの色に合わせます。

今回は、他のaタグの挙動に合わせてマウスを載せたときには下線が出るようにしました = :not(:hover)のときだけ下線を消す。

上記のやりかたで、他のものをaタグに入れた時に意図せず下線が消えることはないとは思いますが、本当はflickr-exifクラスに対して「その親のtext-decorationを消せ」と書きたいところです:

a:has(> .flickr-exif) { text-decoration: none; }

とか

a:parent(.flicr-exif) { text-decoration: none; }

と書ければいいのですが、今現在はこういう、自身の親要素を指すセレクターがありません。またJQueryでも出来るはずなのですが、私はうまく動かせませんでした。

Flickrの写真の貼り付け方

Flickrの写真は、左の画面ダンプのように、写真右下にあるボタンを使ってHTMLのaタグ形式を貼り付けます。

FlickrEx自体はimgタグをみているようなのでFlickrの"link"でURLを得て、自分でimgタグを書いてもいいと思いますが、HTML版ならコピー&ペーストで済むので私はそうしています。

私のカスタマイズ

<!-- FlickrEx -->
<script type='text/javascript'>
  //var FLICKREX_API_KEY = "18c9f79a96fd34c3b3f16a93fb0a5d3c";
  //var FLICKREX_EXIF_FORMAT = "%camera% / %Focal Length% / f/%aperture% / ISO %ISO Speed% / %Exposure% sec / %Exposure Bias% EV / %Software%";
  var FLICKREX_EXIF_FORMAT = "%camera% + %lens%<br />%Exposure% s / F%aperture% / ISO %ISO Speed% / %Exposure Bias% EV / %Focal Length%";
  //var FLICKREX_EXIF_JQUERY_SELECTOR = "#content img";
  var FLICKREX_EXIF_JQUERY_SELECTOR = "a:not(.no-flickr-exif) img";
</script>
<script>(window.jQuery && parseFloat(window.jQuery().jquery) > 1.5) || document.write('<script src="//flickrex.drikin.com/stable/vendor/jquery-1.9.0.min.js"><\/script>')</script>
<script src='//flickrex.drikin.com/stable/flickrex.min.js'></script>
<script src='//flickrex.drikin.com/stable/exifex.min.js'></script>
<!-- end of FlickrEx -->

オリジナルですと、EXIFが一行で表示されて写真より幅が広くなってしまう、EXIFの行がやや目立って煩雑、レンズ名がない…などあったのでカスタマイズしました。冒頭の写真が、そのスクリーンダンプです。 

var FLICKREX_EXIF_FORMAT = "%camera% + %lens%<br />%Exposure% s / F%aperture% / ISO %ISO Speed% / %Exposure Bias% EV / %Focal Length%";
var FLICKREX_EXIF_JQUERY_SELECTOR = "a:not(.no-flickr-exif) img";
  • 二行に折り返すことで幅を狭くしています。これはフォーマットに<br>タグを挟み込んで行っています
  • レンズ名（%lens%）を表示
  • パラメーターの並びを変えた
  • パラメーターの表記を変えた
  • aタグにclass="no-flickr-exif"と指定するとEXIF表示しないスイッチをつけた

です。

no-flickr-exifクラスですが、今回の貼付け方ですとaタグが先頭（外側）なのでそこにクラス指定出来るようにしました。imgタグまで探さないでいいように。これは私がコピー&ペーストしているというワークフローに依っているかもしれません。 imgタグに直接付けたいということなら 

var FLICKREX_EXIF_JQUERY_SELECTOR = "img:not(.no-flickr-exif)"

とかすればよいでしょう。

EXIFを付けたいということは写真メインのブログということでしょうから、例外的に何か挿絵的な写真だけEXIFを出さないという目的で :not() で出さない指定が出来るようにしてみました。逆に指定した写真だけEXIFを出したいならば a.add-flickr-exif とかすればよいでしょう。

また、ブログサービスのCSSの設定部分に以下のCSSを追加してFlickrExの字を少し小さくして表示を控えめにしています:

/* */
/* FlickrEx */
/* */
.flickr-exif {
  font-size: smaller;
  color: #aaa; /* aタグの色になってしまうので、明るいグレーに変更 */
  text-decoration: inherit; /* これをしないと下線の色がフォントと同じにならない */
}

/* a .flickr-exif { text-decoration: none; } */ /* これが効かない。悪さをして下線の色をaタグ指定のものにしてしまうのでコメントアウト */

オリジナルでコメントアウトしてある部分はそのまま残してあるので少しみづらいかもしれませんが元々がどうなっていて、それをどう変えたのかわかるように残してあります。

Bloggerの場合

Bloggerは、「テンプレート」で出てきた画面で、「ブログで使用中」のテンプレートの「HTMLの編集」でHTMLのマクロのページに以下のコードを挿入します: 


<title><data:blog.pageTitle/></title>

<!-- FlickrEx -->
<script type='text/javascript'>
// <![CDATA[
  //var FLICKREX_API_KEY = "18c9f79a96fd34c3b3f16a93fb0a5d3c";
  //var FLICKREX_EXIF_FORMAT = "%camera% / %Focal Length% / f/%aperture% / ISO %ISO Speed% / %Exposure% sec / %Exposure Bias% EV / %Software%&quto;;
  var FLICKREX_EXIF_FORMAT = "%camera% + %lens%<br />%Exposure% s / F%aperture% / ISO %ISO Speed% / %Exposure Bias% EV / %Focal Length%";
  //var FLICKREX_EXIF_JQUERY_SELECTOR = "#content img&quto;;
  var FLICKREX_EXIF_JQUERY_SELECTOR = "a:not(.no-flickr-exif) img";
// ]]>
</script>
<script>
// <![CDATA[
(window.jQuery && parseFloat(window.jQuery().jquery) > 1.5) || document.write('<script src="//flickrex.drikin.com/stable/vendor/jquery-1.9.0.min.js"><\/script>');
// ]]>
</script>
<script src='//flickrex.drikin.com/stable/flickrex.min.js'/>
<script src='//flickrex.drikin.com/stable/exifex.min.js'/>
<!-- end of FlickrEx -->

    <b:skin><![CDATA[/*

CSSは「テンプレート」の「ブログで使用中」の下にある「カスタマイズ」→「上級者向け」→「CSSを追加」のところに置きます。

Bloggerはこんな感じで割ときちんとXML（？）で書かないとエラーして編集（変更、保存）自体が出来ません。

Javascriptはheaderタグの中に置きましたが、bodyの中でもいいはずです。

Seesaaの場合

Seesaaの場合、コードは最初に掲げたものそのままでOKです。場所は「デザイン」→「PC」→「HTML」で、</header>タグのすぐ上が安全そうなのでそこに置きました。

CSSは「デザイン」→「PC」→「デザイン設定」。SeesaaはテンプレートのCSS自体がここで触れるようになっているので、その一番最後のところ（自分のブログ用に変更を加えているところ）に追加する形で置きました。

Seesaaは、リンク（aタグの中味）に下線をつけています。従ってEXIF情報のところにも下線が付いてしまいました。最初に述べたようにEXIF情報についた下線が消せませんでした。

そこで、aタグ全部の下線を消してしまうことにしました:

/* */
/* FlickrEx for Seesaa */
/* */
a {  /* for FlickEx */
  text-decoration: none;
}

課題

ということで、課題が残ってしまいました:

  • Bloggerで、IEで動作しない
  • 下線が消せない
  • スマホ版対応（技術的には対応可能にしておきたい）

どちらも、改良していきたいと思います。

追記 2016.02.11.

前半のところに追記したように、三つとも一応解決しました。
投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)