Html2Canvasでwebページのスクリーンショットを取ろう(2)

Html2Canvasでwebページのスクリーンショットを取ろう(2)

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

どうも、さむらいです。
今回の記事はブックマークレットでhtml2canvas読み込み編。みんなご存知ブックマークレットの処理内容なので、少々短めです。

そもそもブックマークレットとは

ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、ウェブブラウザで簡単な処理を行う簡易的なプログラムのことである。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。(wikipediaより)

なんか難しそうに書いてるけど、要は誰かが書いたJavaScriptを、どこかの誰かのページ上で実行できる機能です。

って書くと結構危ないことをやろうとしているのでは?と思うかも知れませんが、どんなツールも使いようです。それにそんな危ないことはこのブログでは紹介しませんよ。(ΦωΦ)フフフ…

早速ブックマークレットでhtml2canvasライブラリを読み込む

ブックマークレットは短く記述しないとあかんので、基本的な処理は外のJSに書くとして、ブックマークレット自体は、以下のように記載します。

[js]javascript:(function(){var s=document.createElement(“script”);s.src=”//JSのあるサーバURL/JSファイル名js?tmp=”+(+(new Date()));s.type=”text/javascript”;s.charset=”UTF-8″;document.getElementsByTagName(“head”)[0].appendChild(s);})();[/js]

一応説明しておくと以下は、JSをキャッシュ化しないようURLの最後にユニークな情報(ここではタイムスタンプ)を入れる記述です。

[js]?tmp=+(+(new Date())); [/js]

また上記のブックマークレットの実行によって、指定されたサーバ上にあるJSファイルを、タグの最後に追加することになります。

ここからは、上記のブックマークレットを実施することでページに追加されるJSファイル内の記述。

ライブラリの読み込み

ライブラリを読み込むのは通常のscriptタグを追加するのと一緒なので、JSの中で以下の記述をします。
[js] var e = document.createElement(‘script’);
e.type = ‘text/javascript’;
e.charset=’UTF-8′;
e.src = ‘//ライブラリを設置したサーバのURL/html2canvas.js’;
document.body.appendChild(e);
[/js]

でもこれをこのまま実行しても、html2canvas.jsがおいてあるサーバと、ブックマークレットを実行した時のドメインが違うとAccess-Control-Allow-Originのエラーが出ます(だめじゃん!)

ということで、別ドメインのページをキャプチャしたいときは、このエラーが消えるようサーバ側の.htaccessなどに以下の記述が必要です。
[js] Access-Control-Allow-Origin: *
[/js] サーバの設定によっては、上記の記述が許されないケースもあるので、サーバ管理者と相談しましょう。このエラーがクリアできれば、任意のページでhtml2canvasライブラリを読み込むことができるようになりました。

さむらいの場合、テスト用サーバの.htaccessを上手く書き換えられなかったので(単にさむらいの問題だと思う)、以下のようにトリッキーな方法で実現しました(jQueryならもっと簡単なんだろう)

JSの中身

[js] //取得用ライブラリを読み込み
var xmlHttp;
xmlHttp = new XMLHttpRequest();
xmlHttp.open(“GET”, “//html2canvasの中身を読み込んで返してくれるphpのパス”, false);
xmlHttp.send(null);
var e = document.createElement(‘script’);
e.type = ‘text/javascript’;
e.charset=’UTF-8′;
e.text = xmlHttp.responseText;
document.body.appendChild(e);
[/js]

サーバのPHPの中身

[js] //どのページを開いていても、ここで出力するJSを読み込み許可する
header(‘Access-Control-Allow-Origin: *’);
header(‘Content-type: application/javascript; charset: UTF-8’);
//html2canvasはphpと同じフォルダに設置する。
echo file_get_contents(‘./html2canvas.js’);
[/js]

これでhtml2canvasを実行できるようになりましたぞ!次回の記事では取得したページの画像をサーバにアップするところまで紹介・・・・できたらいいな。

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ