注意: 2020/08/20時点の情報です。GoogleFormの仕様が変わっている場合があります。
GoogleFormが作ってくれるグラフをSVG形式で出力する
GoogleFormは手軽にWebアンケートを作ることができる便利なツールだ。
Webの専門知識がなくてもアンケートの作成から集計まで手を煩わせることなく簡単に行なえるツールとしてあらゆる場面で重宝している。
標準機能として集計結果のグラフを画像としてクリップボード経由で出力できるのだが、ラスター画像であるため、大きめの印刷物にこれを用いようとすると画像を引き伸ばすしかなく画像の劣化を避けられずやや不便である。
F12開発ツールで集計ページのhtmlを覗くと、グラフはもともとSVGで作られているようである。だから、このSVGをそのまま抜き出してしまえばよいのではないかと考えた。
SVGを抜き出してしまえばそのあとは適当なツールを使ってラスター画像に変換したり、自身のWebページに埋め込んだりと自由自在である。
手順
- GoogleFormを開き、「回答」タブを表示する
- ブラウザの開発ツールを出してコンソールに後述のJavaScriptを入力する
- ダイアログが表示されるのでファイルをダウンロード
コード
script.js
const downloadHTML = (html) => {
let blob = new Blob([html], {type: "text/html"});
let link = document.createElement("a");
let url = URL.createObjectURL(blob);
link.href = url;
link.download = "download.html";
link.click();
link.remove();
URL.revokeObjectURL(url);
}
var html = [].slice.call(document.querySelectorAll(".freebirdAnalyticsViewAnalyticsItem")).map(item => item.outerHTML).join("\n");
downloadHTML(html);
document.querySelectorAll(".freebirdAnalyticsViewAnalyticsItem")
がみそです。もしGoogleFormの仕様が変わっていて要素にアクセスできない場合はここをいじってみて下さい。