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

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

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

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

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

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...