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

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

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

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

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

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

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

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

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

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

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

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

ライブラリの読み込み

ライブラリを読み込むのは通常のscriptタグを追加するのと一緒なので、JSの中で以下の記述をします。

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

ということで、別ドメインのページをキャプチャしたいときは、このエラーが消えるようサーバ側の.htaccessなどに以下の記述が必要です。

サーバの設定によっては、上記の記述が許されないケースもあるので、サーバ管理者と相談しましょう。このエラーがクリアできれば、任意のページでhtml2canvasライブラリを読み込むことができるようになりました。

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

JSの中身

サーバのPHPの中身

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

コメント