*

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


LINE facebook twitter URLコピー
B! pocket Evernote 楽天


フリッカー

flickr画像をブログでうまく自分なりに埋め込みたくて、ブックマークレットを作りました。

こんにちは、カグア!です。JavaScript大好きなので、気がついたら作っていましたw。

もちろん、そういうサイトもあるはあうんですよね。たとえばこちらとか。でもまあ勉強もかねて作りましたので、よろしければどうぞです。
>>商用無料の写真検索さん – フリーの画像素材が6700万点以上

関連記事
>>TPP大筋合意に基づく「著作権侵害の非親告罪化」対応の3ステップ
>>DeNA新キュレーションのライター25人の引用状況をチェックした
>>Web担なら知っておきたいGIGAZINEさんに学ぶメディアの作り方

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

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

著作権で一番ゆるい権利はパブリックドメインですが、画像を選べる種類が少ないことが難点。

そこで、もう1段階縛りをあげてクレジット表示すれば、商用利用や再配布や改変もOKというライセンスを探します。そうしますとかなり選択の幅が広がります。
>>Creative Commons — 表示 4.0 国際 — CC BY 4.0

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

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

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

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

ただ、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本で販売など)展開など、その活用の重要性はみなさんも覚えのあるところかと思います。

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

まとめ

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

クリエイターが知っておくべき権利や法律を教わってきました。著作権のことをきちんと知りたい人のための本: 鷹野 凌, 福井 健策

クリエイターが知っておくべき権利や法律を教わってきました。著作権のことをきちんと知りたい人のための本: 鷹野 凌, 福井 健策: 本
Amazonで詳しく見る

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

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

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

「新しいカメラも欲しい。」

SONY 単焦点マクロレンズ E 30mm F3.5 Macro

Amazon.co.jp|SONY 単焦点マクロレンズ E 30mm F3.5 Macro|カメラ通販
Amazonで詳しく見る

関連するほかの記事を見てみよう!
このサイトのトップページへ行く

  • このエントリーをはてなブックマークに追加
  • Pocket

Profile



Yoshihiko Yoshida
メディア運営業界23年目。Googleアナリティクス公式コミュニティ・アンサリスト最高ランク「レジェンド」国内初獲得。「マツコの知らない世界」Googleマップ案内人TV出演。Googleストリートビュー認定フォトグラファー。教育システム情報学会会員。元立教大学非常勤講師。主な著書「Googleアナリティクス基礎講座」(技術評論社)。趣味はデジカメとゲームとパン作り。>>もっと読む

Instagram

◆代表者略歴 ◆受賞歴
◆おもな著書 ◆TV出演歴
◆新聞掲載歴 ◆雑誌/連載歴
 <<お問い合わせはこちら>>

Facebook

このブログをRSS購読しよう!(無料)

follow us in feedly

よろしければ「いいね」して下さい!

 
PAGE TOP ↑