さむらいさんソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。au公式ショップを見るどうも、さむらいです。本当は完成させてから掲載したかった記事なんですけど、下手にnode.jsとかに手を出してしまったので、時間がかかっています。いうことで、また連載記事っぽくなりそう。今回Html2Canvasでwebページのスクリーンショットを取ろう(2)Html2Canvasでwebページのスクリーンショットを取ろう(3)Html2Canvasとはhtml2Canvasについてはこちらが公式ホームページです。いうすごい人が作ったライブラリで、webページで表示している内容をJavascriptでCanvasエレメント上に描画するというえっらいヤツです。レンダリングエンジンをJSで実装しちゃう人がいるなんて・・。゚д゚)ポカーン世の中って広いですね。以下のページからサンプルをご覧いただければ、技術者ならその凄さがわかるはず。page」ボタンを押すと、表示中のページをCanvasに描画した結果が、ページ下部に追加されます。※ブラウザを全画面表示にして実行するとわかりやすいです。これを使って何を実装しようとしているか1.ブックマークレットを作ります。それでhtml2canvasのソースをスクリーンショットを取得したいページ上に読み込みます。2.html2canvasを使って、display:none等で隠したCanvasにページのスクリーンショットを描画します。3.canvas.toDataURL()関数を使ってBASE64エンコードされたスクリーンショットデータを取得します。4.このデータをサーバに送信して保存します。5.サーバ上の画像パスをレスポンスとして返します。6.サーバから返ってきた画像のURLをアラート等で表示します。処理としては以上です。今、つまづいているのは、冒頭でも書いたサーバ側の処理のところ。さむらいはもうずっとサーバプログラムはphpでコーディングしてきたので、いくらnode.jsの言語仕様がJavasScirptと同じだと言っても、いろいろなお作法がまだわからないんです。思うんだけど、世の中ってそんなにすんなりいかないもの。引き続き調査して、結果をまた記事にしたいと思います。html2canvasを使って業務をどうしようとしているかさむらいは開発部内の検証チーム兼運用問い合わせをやっているので、問題が発生したときそのページの状態がどうなっているかを把握する必要があるんですが、スクリーンショットの共有って意外と面倒くさいんですよね。PrintScreenでクリップボードにコピーした後、ペイントブラシを起動して画像をペーストしてファイル名をつけて保存して、そのあとメーラーを起動して添付して、送信。スクリーンショットをメールで送るだけならブラウザ・エクステンションでも出来そうですが、それは予め。スクリーンショットを撮る&共有する能動的なニーズが無いと入れていないわけです。意外と環境に左右される動作なんですよね。これをブックマークレット一発で行える形にすれば、スクリーンショットをサーバにアップロードして、そのURLをメーラーに貼り付ければOK!。メール添付云々も、サーバ側でファイルが届いたら、サービス管理者にメールを送信してもいいですし、いろいろと妄想が捗るんですよね。不具合画面を添付して下さいという余計な一手間も不要になります。お客さんの環境によっては、外部にサーバを公開できない場合(ステージングやイントラネット等)もありますが、たとえこちらから直接アクセスできなくても、実際の環境のスクリーンショットをお客さんに撮ってもらえれば何が起きているのか把握するのも容易になります。解決までの時間も短くなると思いますし、文字だけだと伝わりにくいところも簡単に伝えられるので、結構いい仕組みだと思います。いうことで、次回の記事では、ブックマークレットをどう書いているか、をご紹介しようと思います。ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。au公式ショップを見る【週刊bitWave】(メルマガ)始めました!登録はこちらからメールアドレスを入力してお申込みください。【週刊bitWave】の更新情報の配信にのみ使用します。個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。ショーケース・ティービーではメール誤送信防止という観点から、社内連絡ではチャットツールを使用しています。