Html2Canvasでwebページのスクリーンショットを取ろう(1)「ライブラリの紹介」

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

どうも、さむらいです。
本当は完成させてから掲載したかった記事なんですけど、下手にnode.jsとかに手を出してしまったので、時間がかかっています。ということで、また連載記事っぽくなりそう。

Html2Canvasとは

html2Canvasについてはこちらが公式ホームページです。（注：英語）

Niklas von Hertzen というすごい人が作ったライブラリで、webページで表示している内容をJavascriptでCanvasエレメント上に描画するというえっらいヤツです。

レンダリングエンジンをJSで実装しちゃう人がいるなんて・・。( ﾟдﾟ)ﾎﾟｶｰﾝ
世の中って広いですね。

以下のページからサンプルをご覧いただければ、技術者ならその凄さがわかるはず。
http://html2canvas.hertzen.com/examples.html

「Test on this page」ボタンを押すと、表示中のページをCanvasに描画した結果が、ページ下部に追加されます。※ブラウザを全画面表示にして実行するとわかりやすいです。

１．ブックマークレットを作ります。それでhtml2canvasのソースをスクリーンショットを取得したいページ上に読み込みます。

２．html2canvasを使って、display:none等で隠したCanvasにページのスクリーンショットを描画します。

３．canvas.toDataURL()関数を使ってBASE64エンコードされたスクリーンショットデータを取得します。

４．このデータをサーバに送信して保存します。もちろんajax通信です。

５．サーバ上の画像パスをレスポンスとして返します。

６．サーバから返ってきた画像のURLをアラート等で表示します。

処理としては以上です。

今、つまづいているのは、冒頭でも書いたサーバ側の処理のところ。

さむらいはもうずっとサーバプログラムはphpでコーディングしてきたので、いくらnode.jsの言語仕様がJavasScirptと同じだと言っても、いろいろなお作法がまだわからないんです。

もう少しだと思うんだけど、世の中ってそんなにすんなりいかないもの。
引き続き調査して、結果をまた記事にしたいと思います。

さむらいは開発部内の検証チーム兼運用問い合わせをやっているので、問題が発生したときそのページの状態がどうなっているかを把握する必要があるんですが、スクリーンショットの共有って意外と面倒くさいんですよね。

例えばWindowsだと、一旦 PrintScreenでクリップボードにコピーした後、ペイントブラシを起動して画像をペーストしてファイル名をつけて保存して、そのあとメーラーを起動して添付して、送信。みたいな。

単にスクリーンショットをメールで送るだけならブラウザ・エクステンションでも出来そうですが、それは予め。スクリーンショットを撮る＆共有する能動的なニーズが無いと入れていないわけです。

意外と環境に左右される動作なんですよね。

これをブックマークレット一発で行える形にすれば、スクリーンショットをサーバにアップロードして、そのURLをメーラーに貼り付ければOK！。

さらにメール添付云々も、サーバ側でファイルが届いたら、サービス管理者にメールを送信してもいいですし、いろいろと妄想が捗るんですよね。

不具合画面を添付して下さいという余計な一手間も不要になります。

お客さんの環境によっては、外部にサーバを公開できない場合（ステージングやイントラネット等）もありますが、たとえこちらから直接アクセスできなくても、実際の環境のスクリーンショットをお客さんに撮ってもらえれば何が起きているのか把握するのも容易になります。

コピー＆ペースト＆保存＆添付、みたいな面倒な作業が無ければお客さんも楽になりますよね。

問題発生時、調査のために必要な情報は、多ければ多いほど解決までの時間も短くなると思いますし、文字だけだと伝わりにくいところも簡単に伝えられるので、結構いい仕組みだと思います。

ということで、次回の記事では、ブックマークレットをどう書いているか、をご紹介しようと思います。