WordPressでURLからスクリーンショットを撮って記事に貼り、自分のサーバーにも保存する方法

WordPressでスクリーンショットを貼る方法は色々ありますが、記事を表示する度に画像を読み込みにいくというものが殆どですよね。サイトのスクリーンショットを撮って表示するついでに、自分のサーバーに画像を保存したかったので、その方法をご紹介します。

どういうことが出来るの？

サイトのURLを指定するだけで、指定したサイトのスクリーンショットを表示し、自分のサーバーの好きなディレクトリにスクリーンショットが蔵を保存することができます。

画像は追加した記事の日付をベースに、年/月ディレクトリ以下に保存されます。画像のファイル名はURLをベースに作られます。

「https://memo.ark-under.net/ss/」というディレクトリを指定し、http://memo.ark-under.netの画像をスクショした場合
画像URLは https://memo.ark-under.net/ss/2015/01/memoark-undernet.jpg となります。

設置方法

まず、スクリーンショットを保存する場所を作ります。wpを設置しているサーバーと同じサーバー上に作ってください。

つぎに、使用しているテンプレートのfunction.phpに以下をコピペします。

//URLを入力しスクリーンショットを撮る
function screenshotSc($atts, $content = null) {
	$siteDir = 'ブラウザでみた場合の任意のディレクトリへのアドレス'; //例：https://memo.ark-under.net/ss/
	$homeDir = 'サーバー上の任意のディレクトリへのアドレス';  //例：/home/users/○○/△△/memo/ss/
	global $post;
	define('DS', '/');
	// 画像保存ディレクトリ
	define('SCREENSHOT_DIR', $homeDir);
	extract(shortcode_atts(array(
		//"base"=>'http://s.wordpress.com/mshots/v1/',
		"base"=>'http://capture.heartrails.com/',
		"url" => '',
		"width" => '400',
		"height" => '400'
	), $atts) );
	if( empty( $url )) return null;
	/* 処理 */
	$image_flag=false;
	$dir = SCREENSHOT_DIR;
	$date = $post->post_date;
	$year = date('Y', strtotime($date) );
	$month = date('m', strtotime($date) );
	$vowels = array("http:", "https:", "/", ".");
	$file = str_replace($vowels, "", $url);
	$filename = $siteDir.$year.DS.$month.DS.$file.'.jpg';
	if( !file_exists($dir.$year) ) {
		mkdir($dir.$year);
	}
	if( !file_exists($dir.$year.DS.$month) ) {
		mkdir($dir.$year.DS.$month);
	}
	if( file_exists($dir.$year.DS.$month.DS.$file.'.jpg') ) {
		$image_flag=true;
	}
	if( !$image_flag ) {
		$url=$base.$width.'x'.$height.'?'.$url;
		$image=file_get_contents($url);
		//$url=$base.urlencode($url).'?w='.$width.'&h='.$height;
		//$context = stream_context_create(array('http' => array(
		//'method' => 'GET',
		//'header' => 'User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.63 Safari/537.36',)));
		//$image=file_get_contents($url, false, $context);
		file_put_contents($dir.$year.DS.$month.DS.$file.'.jpg', $image);
	}
	return '<p><a href="'.$url.'"><img src="'.$filename.'" alt="'.$url.'" class="ssimg"/></a></p>';
}
add_shortcode("Screenshot", "screenshotSc");

// HTMLエディタにスクリーンショットボタンを追加
function add_my_quicktag() {
?>
    <script type="text/javascript">
    QTags.addButton( 'ssbt', 'スクリーンショット', prompt_user );
    function prompt_user(e, c, ed) {
        prmt = prompt('サイトURLを入力');
        if ( prmt === null ) return;
        rtrn = '';
        this.tagStart = rtrn;
        QTags.TagButton.prototype.callback.call(this, e, c, ed);
    }
    </script>
<?php
}

このコードでは、HeartRails CaptureのAPIを使用しています。
スクリーンショットを撮るプラグインでも使用されているWordPressの非公式API・http://s.wordpress.com/mshots/v1/ を使用したい場合は、コード内コメントアウトを削除し、11行めと36行めと37行めをコメントアウトしてください。

また、スクリーンショットのボタン追加ですが、すでにadd_my_quicktag()で他のボタンを追加している場合は、53〜60行目をadd_my_quicktag()内に移動してください。

これでテンプレートの編集は終わりました。

使い方

テンプレート編集が終わったら投稿記事の作成画面に行きます。すると「スクリーンショットボタン」が追加されています。

これをクリックすると、ポップアップが表示されるので、任意のURLを追加してください。

URLを入れて「OK」を押すと、[Screenshot url="任意のURL"]というコードがテキストエリアに追加されます。
すると、こんな感じで表示されます。

任意のディレクトリには「arca-workscom.jpg」という画像が保存されているはずです。

気になると思うことについて書いておきます

http://capture.heartrails.com/とhttp://s.wordpress.com/mshots/v1/ はどちらがいいですか？

良い点悪い点がそれぞれあるので、以下の点をふまえてお好きな方をお使いください。

http://capture.heartrails.com/
・キャプチャされたサイト内の日本語がきちんと表示される
・サイズ上限があり、横400px／縦1500px

http://s.wordpress.com/mshots/v1/
・海外サービスのためかキャプチャされたサイト内の日本語がきちんと表示されない
・サイズ上限は不明だが、ある程度大きなサイズも表示可能

また、ロリポップのサーバーのせいかもしれませんが、http://s.wordpress.com/mshots/v1/の場合は、file_get_contentsを使う際、User-Agentの指定が必要なようです（それもPCブラウザである必要があり、上記コードではchromeを設定しています）

wordpressのメディアディレクトリ内に画像を保存したい

指定する任意のディレクトリをwordpressのメディアディレクトリに指定することは可能です。ただし、そのままでは記事投稿画面の「メディアの追加」から画像を指定することはできません。

ftpなどで追加した画像をメディアライブラリに認識してもらうプラグイン「WordPress Flash Uploader」や、サムネイルを作成してくれるプラグイン「AJAX Thumbnail Rebuild」などを使う必要があると思います。

参考サイト
・指定したURLのスクリーンショットを画像を取得し表示させるショートコード – ONILOQ NOTE
・WordPress Custom Editor Quicktag Buttons
・FTP で一括転送した画像を WordPress のメディアライブラリに認識させるプラグイン « re:mix design blog

蛇足な話

ホントは、横400pxより大きいスクリーンショットがとれて、日本語もきちんと表示されるようなAPIで、これをつかってちょっとやりたいことがあったんですよね。heartrails.captureが400px以上ならなー。
Mozshotもあるんですが、少々不安定らしいときいたので、今回は試しませんでした。
Mozshotのサイトにキャプチャをとるソースが公開されてたので、自分がつかうだけなら自分のサイト用に設置した方がいいなーなんて思いまして、今はそのソースを読んでいる次第です。

ただ、この方法は色々と使えそうなので記事にしました。必要な方はご利用ください。やりたことは出来るかわかりませんが…出来たらまたお知らせしますね。