★ 今日はこんな記事も読まれています ★

Flickrの著作権表示をoEmbedで自動化して楽する方法

2017年5月14日WordPress

Flicker oEmbedロゴ

Flickrの写真はWodpressのoEmbedを使えばURLを入力するだけでページ上に表示させられますが、そのままだと著作権表示（クレジット）がありません。

自分の撮った写真や画像ならそれで構いませんが、他の人の著作物ではクレジット無しでは困ります。

そして著作権表示は回数が増えると結構手間なんですよね。

 

Flickrで生成できる埋め込みコードなら画像へのリンクもついているので楽ですが、これはjsがついているので、なんとなく避けたい。

 

そこで、ワードプレステンプレートも配布されているセルティスラボさんが掲載されている、自動で著作権表示を挿入するコードを利用させてもらうことにしました。

オリジナルは著作者と画像へのリンクだけだったので、CC表記も付け加えるよう変更しました。

Flickr画像に自動的に著作権をつける（セルティスラボ）

 

oEmbedは、対応しているサービスのURLを[ embed]〜[/embed]の間に入力すると、メディアの埋め込みができるWordpressの機能。YouTubeなどでも使える。サービス元のキャッシュを利用するので表示も早い。

 

oEmbedで自動化するメリットとデメリット

メリット

  • URLを入力するだけで著作権が表記される
  • 画像管理の手間から解放される
  • ディスクも節約できる
  • 画像表示が早い

デメリット

  • 作者が公開をとりやめたら表示されなくなる（ライセンスは有効なので、ダウンロードしたものを使うのは構わない）
  • 画像のファイルサイズを確認し忘れて、重い画像を使ってしまうかもしれない

 

oEmbedで使っていい画像と著作権表記の方法

Flickrはクリエイティブ・コモンズ・ライセンスを利用しています。

CC ”BY" のものなら、著作権表示をすれば使用可能です。

しかし商用不可や改変不可といった制約を課している作品もあるので、確認してから使ってください。

改変してもいいか、商用でも使えるかどうかといった条件はCCの後につく文字で判別できます

  • BY　著作権表示をすれば使っていい
  • NC　商用不可
  • ND　改変不可
  • SA　継承（改変してもいいけど、同じライセンス形式で公表する必要がある）

 

SAは少し分かりにくいですが、

「改変すればあなた（改変者）の著作物になるけど、勝手にライセンスをゆるくして使い放題にせんといてね」

ということです。

 

oEmbedであれば改変せずそのまま使うことになるため、商用にだけ気をつければOK。

ところが「商用」という文言が曲者で、厳密に商用となる範囲が決まっていません。気になるようなら著作者に確認をとるほうがいいです。

 

著作権表示の範囲

他人の著作物を利用する際は著作権表示が必要になります（cc0のみクレジット不要）。

 

Flickrで生成した埋め込みコードには、ファイルと作者へのリンクのみ記載されています。

この二つさえ記載してあればFlickr的にはOK。しかしそれはFlickrが提供するからであって、著作権表示的にはちょっと足りません。

 

著作権表示は一般に

  • 作品名
  • 著作者
  • 発表年
  • 利用ライセンス

を指します。書籍なら出版社名も入ったりしますね。

利用ライセンスというのは、JASRACの許諾番号みたいなもののことです。FlickrならCC表記が必要となります。

本来はその著作物の発表年も表示するべきではあるんですが、そこまでするとさすがにうるさくなるのでCCまでにしました。

 

著作権表示するコード

コードは子テーマの function.php に追記します。function.php にエラーがあると動かなくなるので、いじるときにはバックアップを取って下さい。

初期状態なら子テーマをダウンロードして、すぐに上書きできるようにしておいてくださいね。

著作権表示用コード

function celtispack_photo_caption( $html, $data, $url ) {
 $newhtml = $html;
 $cc='';
 $cc_ver='';
 if ( is_object( $data ) && !empty( $data->type ) ){
 if($data->type == 'photo' && $data->provider_name == 'Flickr' && !empty( $data->title ) && !empty( $data->author_name )){
 if(!empty( $data->license_url)){preg_match('/licenses\/(by.*)\/(.+)\//',esc_attr($data->license_url),$cc_ver);
 $cc_ver[1] = strtoupper($cc_ver[1]);
 $cc=' / <i class="fa fa-creative-commons"></i> <a href="'.esc_attr($data->license_url).'">'.$cc_ver[1].' '.$cc_ver[2].'</a>';
 }
 if( preg_match('/<img.+?src=[\'\"]([^\'"]+)[\'\"].*?>/i', $html, $match)){
 $newhtml = $match[0];
 }
 if(!empty( $data->author_url ) ){
 $caption = '<a href="' .esc_url($url) . '">' . esc_attr($data->title). '</a> / <a href="' .esc_url($data->author_url) . '">' .esc_attr($data->author_name) . '</a>';
 }
 else {
 $caption = '<a href="' .esc_url($url) . '">' . esc_attr($data->title). ' / ' . esc_attr($data->author_name) . '</a>';
 }
 if ( current_theme_supports( 'html5', 'caption' ) ) {
 $newhtml = "<figure class='wp-caption alignleft cap-credit'>" . $newhtml . "<figcaption class='wp-caption-text'>" . $caption. $cc. "</figcaption></figure>";
 }
 else {
 $newhtml = "<div class='wp-caption alignleft cap-credit'>" . $newhtml . "<p class='wp-caption-text'>" . $caption . $cc."</p></div>";
 }
 }
 }
 return $newhtml;
}
add_filter( 'oembed_dataparse', 'celtispack_photo_caption', 12, 3 );

 

参考にしたサイト
Flickr画像に自動的に著作権をつける（セルティスラボ）

改変したのはCC表記の追加と、対象をFlickrに限定したくらいで、ほぼセルティスラボさんのものを流用させてもらいました。関数名もそのままにしてあります。

子テーマにコードを書き終えたら、flickrの画像URLを

[ embed]https://www.flickr.com/〜[/embed]

にペーストしてみてください。

ここでは平安神宮の写真を利用させてもらいました。

あなたのページでは表示されました？

IMG_4729.jpg

 

oEmbedキャッシュの問題

oEmbedはキャッシュを作成します。これがネックで、リロードをしても一度データを取得した画像は更新されません。

別の画像を表示させれば解消できるんですが、削除できるプラグインをインストールしておくと楽になります。

プラグインページ：oEmbed Cache Clear

有効化すると投稿一覧のタイトル下に Clear oEmbed-Cache という項目が増えます（マウスオーバーすると出るクイック編集の横）。

 

FlickrからoEmbedで取得できるデータ

Flickrのデータは xml と jason で取得できます。

https://www.flickr.com/services/oembed/?format=json&url=https://~

 

取得できるデータ

typephoto
flickr_typephoto
titleタイトル
author_name作者名
author_url作者ページURL
width幅
height高さ
url画像URL
web_page画像ページ
thumbnail_urlサムネイルURL
thumbnail_widthサムネイル幅
thumbnail_heightサムネイル高さ
web_page_short_url短縮URL
licenseライセンス名
license_urlライセンスURL
license_idライセンスID？
html 作品タイトル by 作者, on Flickr
画像ページURL
画像URL、幅、高さ
version1.0
cache_age3600
provider_nameFlickr
provider_urlhttps://www.flickr.com/

 

oEmbedで快適生活

各サービスで埋め込みコードを取得してはりつければいいと言えばいいんですが、

はURLだけでいいので楽なんですよね。

問題は作者が公開をとりやめないか、ですね。

WordPress