always one step forward

トップ > it > ブックマークレット「Flickr2HTML」用テンプレートURLを作った

ブックマークレット「Flickr2HTML」用テンプレートURLを作った

it

DSC_0399


最近（2015年8月現在）のFlickr仕様に合わせた、ブックマークレット「Flickr2HTML」用テンプレートURLを作りましたという話。

（写真：この記事の内容にはほぼ関係なく、後半の実例で登場した、厳島神社の鹿です）

Flickr上の写真をブログに貼り付ける手順

Flickrにアップロードした写真（やアルバム）をブログに貼り付けたいときは、ページ埋め込み用のURLが写真ごとに必要である。

当然、写真1枚ごとにURLは異なり、複数貼り付けたいときは1枚ごとに：

  • Flickrへアクセスし、写真のページを表示
  • 埋め込み用URLを表示してクリップボードにコピー
  • ブログのテキストに貼り付け

を行う必要がある。

ブックマークレット「Flickr2HTML」

これを楽にしてくれるブックマークレット「Flickr2HTML」をずいぶん前から使っている。

ページ中ほどにある「ブックマークレットメーカーはこちら。」以降の案内通りに導入すると、

  • 埋め込み用URLを取得したいFlickrアルバムのページを表示
  • 「Flickr2HTML」を実行

という手順だけで、アルバムに含まれる写真全ての埋め込み用URLを表示してくれる。楽。

Flickr仕様変更（埋め込み用URL）※ 2015.8現在

わりと最近から（いつからかは調べていない）、Flickr側が生成する埋め込み用URLが変更されているのに気付いた。たとえば：

  • aタグの中に追加
    • data-flickr-embed="true" data-header="false" data-footer="true" data-context="true"
  • 埋め込み文字列最後に追加
    • <script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

ということで、ブックマークレットに設定するURLにもこれを適用してみた

Flickr仕様再変更（埋め込み用URL）※ 2015.12現在

再度、embedのURL仕様が変更されている。いつ落ち着くのか‥あるいはこれで落ち着いたのか

  • 以下は残り、
    • aタグ data-flickr-embed="true"
    • <script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
  • 以下は追加されなくなっている。
    • aタグ data-header="false" data-footer="true" data-context="true"

後述「data-header, data-footer：ヘッダ、フッタ情報の表示」「data-context：スライドショー表示の有効化」で示した、embed指定時のチェックボックス欄は消えている（つまり、ユーザーに指定させない仕様に戻った）しかし、手書きで上記タグを書くと想定通り認識される。変なの

設定を変更した部分

Flickrをブログに貼りつけるタグを取得するブックマークレット、Flickr2HTMLが完全リニューアル！！ | Feelingplace

「ブックマークレットメーカーはこちら。」以降に従い、

  1. ブックマークレット名
  2. FlickrAPIキー
  3. 画像の解像度とピクセル
  4. 出力方法
    • すべて変更なし（従来通りの内容使用）
  5. 書式テンプレート
    • 例として「画像のみ」を選択
    • 「以下を直接カスタマイズすることもできます（但し ' は禁止文字）」
      • このテキストボックス内容を以下に書き換え


変更前：

<a
   href="${pageURL}"
   title="${title} by ${username}, on Flickr"
   target="_blank">
<img class="flickr_photo" src="${imgURL}" alt="${title}" ${width}/>
</a>

変更後：

<a
   data-flickr-embed="true"
   data-header="false"
   data-footer="false"
   data-context="false"
   href="${pageURL}"
   title="${title} by ${username}, on Flickr"
   target="_blank">
<img class="flickr_photo" src="${imgURL}" alt="${title}" ${width}/>
</a>
<script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

※ 変更前/後とも、このページでの可読性を上げる改行を入れた。設定用には以下の改行なし版を：

<a data-flickr-embed="true" data-header="false" data-footer="false" data-context="false" href="${pageURL}" title="${title} by ${username}, on Flickr" target="_blank"><img class="flickr_photo" src="${imgURL}" alt="${title}" ${width}/></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

上記の設定ののち [Bookmarkletを生成する] ボタンをクリックして、ブックマークレットを作成。従来通り楽に埋め込み用URLを作成できる。

参考：aタグの属性値はどう表示に影響するか比較

  • data-flickr-embed="true"
  • data-header="false"
  • data-footer="false"
  • data-context="false"

それぞれ何を設定しているのか？実例で比較してみた

data-flickr-embed：マウスオーバーでFlickrロゴや著作権情報の表示

  • data-flickr-embed="true" data-header="false" data-footer="false" data-context="false"

DSC_0399

  • data-flickr-embed="false" data-header="false" data-footer="false" data-context="false"

DSC_0399

data-header, data-footer：ヘッダ、フッタ情報の表示

  • data-flickr-embed="true" data-header="true" data-footer="false" data-context="false"
  • Flickr 設定画面では「Header」「Footer」にチェックを入れた状態に相当。サンプルイメージが分かりやすい

Flickr embed setting

DSC_0399

  • data-flickr-embed="true" data-header="false" data-footer="true" data-context="false"

DSC_0399

data-context：スライドショー表示の有効化

  • 写真にマウスオーバーすると左右＜＞が現れ、その写真を含むアルバムの全写真を、同じ埋め込み部分で表示できる

  • この設定だけは、Flickr設定画面のサンプルイメージには反映されない

  • data-flickr-embed="true" data-header="false" data-footer="false" data-context="true"

Flickr embed setting

DSC_0399

参考：client-code.js の中身

<script>...</script> タグで貼られるJavaScript（実際はminifiedされているけれど整形しています）写真ごとにこのタグを入れる必要があるのかは、よくわからない

!function (e, t, n, r, c)
{
    var i = function (e, t)
    {
        var n, r = "IE", c = document.createElement("B"), i = document.documentElement;
        return e && (r += " " + e, t && (r = t + " " + r)), c.innerHTML = "<!--[if " + r + ']><b id="iecctest"></b><![endif]-->', 
        i.appendChild(c), n = !!document.getElementById("iecctest"), i.removeChild(c), n;
    };
    if (!e[n] && (e[n] = {
        process : function (t)
        {
            (e[n].q = e[n].q || []).push(t);
        }
    },
    !i(8, "lte")))
    {
        var d = t.createElement(r), m = t.getElementsByTagName(r)[0];
        d.async = 1, d.src = c, m.parentNode.insertBefore(d, m);
    }
}
(window, document, "FlickrEmbedr", "script", "https://embedr.flickr.com/assets/embedr-loader.js"), window.FlickrEmbedr.process("inline");

さらに embedr-loader.js も参照している。それほど大きくない。以下で内容を確認可能

組み合わせは自由

当然、テンプレート部分を好みで変更すれば生成されるURLにも適用される。個人的には、オーバーレイで表示される情報はあってもいいと思ったので

data-flickr-embed="true" data-header="false" data-footer="false" data-context="false"

もしスライドショー表示がいるなら

data-flickr-embed="true" data-header="false" data-footer="false" data-context="true"

を使っていこうと思う。

補足

同様に調べられている人がいた。この方はオーバーレイ表示をなるべく無くしたいという意向のようだ（それもわかる気がする）