ブックマークレット

flickr画像をクレジット付きで貼り付けるブックマークレット

by
Share on Hatena Share on Pinterest Share on Pocket

flickr画像をブログでうまく自分なりに埋め込みたくて、ブックマークレットを作りました。勉強もかねて作りましたので、よろしければご自由にお使い下さい。

flickrからブログに使える画像を探したい

flickrでは、自由に使える画像でも、クリエイティブ・コモンズの内容をよく読まないといけません。

著作権で一番ゆるい権利はパブリックドメインですが、画像を選べる種類が少ないことが難点。あとは、パブリックドメインと称して投稿していても、それが人の画像だったりと気をつけなくてはいけません。表示されている著作権表記を鵜呑みにしないことが前提です。

それでも、クレジット表示をして掲載すれば、商用利用や再配布や改変もOKというライセンスを探します。そうしますとかなり選択の幅が広がります。

＞＞Creative Commons — 表示 4.0 国際 — CC BY 4.0

クリエイティブ・コモンズ「表示」は、GIGAZINEなど多くのブログで、アイキャッチとして利用されています。
＞＞「学習スタイル」という考え方は迷信に過ぎない – GIGAZINE

メディア関係者やブロガー、アフィリエイター、Web制作をする人は、こちらに一度目を通しておくと良いと思います。
＞＞クリエイティブ・コモンズ・ライセンスとは

flickr公式の埋め込みタグじゃダメなの？

公式がもちろん安心です。

ただ、jsを読み込むのがいやだなぁというのと、マウスオーバーすればクレジット表示などは出るのですが、そうするとスマホだとどうなるの？的なところもあって、個人的な理由で自作することにしました。

ですので、おすすめはあくまで公式の埋め込みコードということで。

flickrのoEMBED

WordPressで記事を書いていますと、たとえばYouTubeのURLを貼り付けただけで、自動的に記事中に動画がEMBEDされますよね。

これが、oEMBEDです。WordPressなど多くのブログサービスがEMBED作業の簡素化を提供しています。これは、ブログ側が対応していることと、それを提供する側の両方が対応していることが必要です。

＞＞oEmbed でメディア共有サイトのコンテンツを簡単埋め込み – WebOS Goodies

flickrも対応しています。その情報もじつは、flickrの公式の埋め込みコードでも利用されており安心して使えます。・・・が、画像がそのまま表示されるだけなのです。

そうした掲載ですと、うかつに掲載しますと、「パクリだ！」「盗用だ！」と炎上しかねません。できればライセンスを明記してあらぬ疑いをかけられることは防ぎたいものです。

ブックマークレット概要

そこで、以下の要件で効率的にアイキャッチ画像のタグを取得できるようにします。

  • 商用利用可能なflickr画像を探す
  • その画像のoEMBED情報を取得
  • そこから貼付けようのタグを生成
  • あとは記事に貼るだけ

という作業を効率化できるようブックマークレットを考えました。

こんな感じに貼り付けられます。

Engagement Photo
Photo:license by librarianavengers

埋め込む手順

1.Compfightで画像を探す

1.compfightにアクセス。

＞＞Compfight / A Flickr Search Tool

compfight

compfightは、flickr画像を検索できるサイトとしては有名ですね。WordPressのプラグインもあるほど。
＞＞Flickr画像をWordPress投稿に1クリックで挿入するプラグインまとめ｜Web Shufu

そこで上図のように、検索結果をCommercial（商用利用可能）で絞り込みます。

気に入った画像が見つかりましたらサムネイルをクリックします。そこでライセンスを確認し、実際のflickrのページヘジャンプします。

権利を確認

なお、いちばんゆるいライセンスは「別の作品のベース」にするなど、加工もできますので助かりますね。ただし、flickr投稿者が、意匠権（建物などのデザイン）や肖像権までクリアしているかはわかりません。そこは調べようがありません。商用利用のさいには、人物やデザイン、商業物などがメインになっているような画像は慎重に扱いましょう。

2.oEMBED情報を取得する

画像の詳細ページに行きましたら、さっそくブックマークレットを使いましょう。

javascript:location.href="https://www.flickr.com/services/oembed?url="+encodeURIComponent(location.href);

こちらは、画像詳細ページからoEMBED情報を取り出すためのブックマークレットです。1つに出来なかったのは、URLが遷移してしまうためです。

こんな感じにXMLを取得してくれると思います。

こんなかんじ

oEMBEDの良いところは、flickrのAPI登録などをせずとも第三者が使える、という手軽さです。

3.埋め込み用のタグ生成する

あとは、ここから著作者情報、画像URL、ライセンス情報を抜き出せばOKです。

JavaScriptでは、querySelector()を使います。これ、ほんと便利ですよねえ。Googleタグマネージャの変数作成でも、最近がんがん使ってます。jQueryを使わなくなりました。

こんな感じにプロンプトが出て埋め込み用タグが生成されます。あとはコピーして、ブログなどに貼り付けてください。

アラート

javascript:var a=document.getElementById("webkit-xml-viewer-source-xml");var b0=a.querySelector("oembed>thumbnail_url").innerHTML;var b=b0.replace("_q","");var c=a.querySelector("oembed>license_url").innerHTML;var e=a.querySelector("oembed>author_url").innerHTML;var d0=e.replace("https:","");var d0=d0.replace("www.flickr.com/photos/","");var d=d0.replace(///g,"");var f=a.querySelector("oembed>title").innerHTML;var g=a.querySelector("oembed>web_page").innerHTML;var z="<p><img src='"+b+"' alt='"+f+"'/><br/><small><a target='_blank' href='"+g+"'>Photo</a>:<a rel='nofollow' target='_blank' href='"+c+"'>license</a> by <i><a rel='nofollow' target='_blank' href='"+e+"'>"+d+"</a></i></small></p>";window.prompt('Copy This!',z);

タグの細かいところやCSSは、皆さんの事情に合わせて変えてください。また、flickrの仕様が変わりますと使えなくなりますので、そのあたりはあしからずです。

サムネイル画像の大きさを変える

わたしのブログでは、flickrでデフォルトに生成される横幅500pxが良いため、URLはちょっと変えています。そのあたりは、皆さんで変えてみてください。

flickrの画像サイズはこんな感じだそうです。上記ブックマークレットでは「_q」を除去してミディアムにしています。

  • _s.jpg Square (w：75px x h：75px)
  • _t.jpg Thumbnail (max：100px)
  • _m.jpg Small (max：240px)
  • .jpg Medium (max：500px)
  • _b.jpg Large (max：1200px)
  • _o.jpg 元画像サイズ

＞＞JavaScriptからFlickr APIで任意のphotoset（セット）を取得 – hello, world.

謝辞

ブックマークレット作成にはこちらのコードを参考にさせていただきました。ありがとうございました。
＞＞Flickrのクレジット表記を作るブックマークレット(新デザイン対応済み) | Zafiel

著作権やライセンスとうまく付き合いたい

最近わたしは、著作権やライセンスについて興味が高まっています。

先日のセミナーもとても興味深く、とても勉強になりました。スライドは公開されていますので、メディア関係者やWeb制作者はぜひとも読んでおきたい内容です。事例も豊富。
＞＞「攻める著作権」TPP時代に知っておくべき権利や法律セミナーレポート

目先のPVや成果をおうばかりに、誰かの作った著作物へのリスペクトは忘れたくないと思います。

そしていっぽうで、初音ミクのようにオープンライセンス戦略、パブリックドメインを使ったビジネス（AmazonがPD作品を有料Kindle本で販売など）展開など、その活用の重要性はみなさんも覚えのあるところかと思います。

もちろん私も日々勉強ですが、そういう活用のなかで役立ちそうな記事やツールが出来ましたら、都度都度公開していきたいと思います。またそのとき、間違ってるよ！といったご指摘も大歓迎ですので、ぜひよろしくお願い致します。

まとめ

著作権はとても身近なものです。ビジネスマンにとっても、個人にとっても。

なんでも著作権は法律の世界では、まだまだ生まれたての権利のようで、これからも議論は続いてくものだそうです。しっかりとキャッチアップしていきたいと思います。

あと、わたしもflickrにもっと画像をアップしたいなと思いました。世界はほんと広いなあ。

ブックマークレットが2つになってるし、Chrome拡張にもしたいし、まだまですけど、ご参考になれば幸いです！

・　・　・　・　・

＞＞安っ！アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る

↓↓↓無料のニュースレターを配信中です

新しいカメラも欲しい。


Post Views: 151