WordPress で Flickr videoサムネイルを oEmbed で取得

Flickr

Flickr は、画像、動画の共有サービスです

登録していなくても公開されている綺麗な写真、動画を見ることができます (^^)

ブログ等でクリエイティブ・コモンズライセンスで公開されている画像をアイキャッチ等で使用されている方も多いと思います

クリエイティブ・コモンズって何という方は下記を参照してみてください

ライセンスは、4つの条件の組み合わせで定義されます

表示 表示
(Attribution, BY)
作品を複製、頒布、展示、実演を行うにあたり、著作権者の表示を要求する。
非営利 非営利
(Noncommercial, NC)
作品を複製、頒布、展示、実演を行うにあたり、非営利目的での利用に限定する。
改変禁止 改変禁止
(No Derivative Works, ND)
作品を複製、頒布、展示、実演を行うにあたり、いかなる改変も禁止する。
継承 継承
(Share Alike, SA)
クリエイティブ・コモンズのライセンスが付与された作品を改変・変形・加工してできた作品についても、元になった作品のライセンスを継承させた上で頒布を認める。

広告等を貼り付けているブログならば、表示(CC BY)、表示-継承(CC BY-SA)もしくはパブリックドメインのものが無料で使用することができます

Flickr を記事に埋め込む

Flickr は、既にWordPressでサポートされていますので、特別にプラグイン等を使用しなくても直ぐに記事に埋め込むことが出来ます

flickr-thumbnail

Flickr で写真や動画を探すには Flickr サイトの検索入力欄に探したいイメージのキーワードを入力します

例えば tokyo のようなキーワードを入力しますflickr-search

するとキーワードに合致したイメージが表示されるので、さらにライセンス条件等で絞り込みます

クリエイティブ・コモンズの Commercial use allowed (商用利用可) と Modifications allowed (改変可) をチェックすればその条件にあったものに絞りこまれます

使いたい画像があったらそれをクリックすると、その画像が拡大表示されて右下に操作ボタンが表示されます

画像をダウンロードする場合

flickr-download

一番右のダウンロードボタンからサイズを選んでダウンロードします

ダウンロードした画像ファイルを記事作成時に編集画面からメディアを追加でサイトへアップロードして使用します

画像のHTMLリンクコードを取得する場合

flickr-html

真ん中のボタンをクリックして HTML コードを選び、表示されたコードをコピーして、記事作成時にテキストモード編集画面に貼り付けて挿入します

記事が閲覧された場合、外部リンクとして Flickr サイトから画像が表示されます

WordPress の埋め込み embed を使う場合

flickr-shorturl

真ん中のボタンをクリックして Link コードを選び、表示されたコードをコピーして、記事作成時にビジュアルモード編集画面に貼り付けて挿入します

記事が閲覧された場合、外部リンクとして Flickr サイトから画像が表示されます

また、この埋め込みを使うと基本的にテーマの $content_width で指定されたサイズに合うサイズが自動的に埋め込まれます

また、embed ショートコードを使えば任意のサイズと言うわけではないですが、一応サイズも指定できます

[embed width="123" height="456"]...[/embed]

一番応用が効くのでお勧めです (^^)

試しに JAXA の H2ロケットの動画があったので埋め込んでみます

GPM Rocket Launch!

うまく埋め込まれたでしょうか (^^)

他にも Flickr の検索をより使いやすくした Compfightphotopin のようなサービスもあります

これらのサービスでは、使用した画像の作品や著作者へのリンクを自動的に生成してくれるのでそれをコピーして貼り付ければクレジット表記が簡単に付けられます

それも面倒と言う方は、埋め込み画像のキャプションに自動的にクレジット表記を付ける WordPress のプログラムを紹介します (^^)

WordPress Flickr 画像に自動的に著作者クレジットを付ける

コードも短いのでいろいろカスタマイズ出来ると思います

Flickr のサムネイルを取得

前回までに Vimeo, youtube, Vine, Instagram のサムネイルを取得する方法で紹介した oEmbed を使って Flickr サムネイルの取得をやってみます

前回までの記事は下記を参照して下さい

今回もほとんど同じように出来ます oEmbed 規格って分かりやすいです (^^)

サンプルプログラム

プログラムは、$post_content に入っているコンテンツ内を正規表現を使い Flickr のURLからIDを取得します

最初に正規表現でマッチしたIDを使い json 形式のデータを取得します

//flickr サムネイル画像
if(empty($thumburl)){
    $pattern = array( '#(^|\])\s*https?://(www\.)?(flickr\.com/photos)/([a-z0-9_@\.\-]+/[0-9]+)#im',
                      '#(^|\])\s*https?://(www\.)?(flic\.kr/p)/([a-z0-9]+)#im'
                    );
    foreach ( $pattern as $str ) {
        if(preg_match_all( $str, $post_content, $matches)){
            if(!empty($matches[4][0])){
                $adr = $matches[3][0];
                $id  = $matches[4][0];
                $response = wp_remote_get( "https://flickr.com/services/oembed.json?url=https://{$adr}/{$id}" );
                if ( ! is_wp_error( $response ) && $response['response']['code'] === 200 ) {
                    $obj = json_decode( $response['body'] );
                    if($obj->type == "photo"){
                        $thumburl = $obj->url;
                        $atrsize = array('width' => $obj->width, 'height' =>$obj->height);
                        break;
                    }
                    elseif($obj->type == "video"){
                        $thumburl = $obj->thumbnail_url;
                        $atrsize = array('width' => $obj->thumbnail_width, 'height' =>$obj->thumbnail_height);
                        break;
                    }
                }
            }
        }
    }
}

ちなみに埋め込みと embed ショートコード[]のみにマッチするよう行頭か]があることを正規表現でチェックしています

また、通常のURLとショートURLように2パターンでチェックしています

データ取得時の oEmbed api は、画像と動画で区別なく使えますが、取得したデータは異なっています

参照 oEmbed

画像の場合

flickr-embed-photo-data

動画の場合

flickr-embed-video-data

以上

Flickr の画像と動画のサムネイル取得について紹介しました

 


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss