0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

GoogleForm回答の集計グラフをコピーする方法

Last updated at Posted at 2020-08-19

注意: 2020/08/20時点の情報です。GoogleFormの仕様が変わっている場合があります。

GoogleFormが作ってくれるグラフをSVG形式で出力する

GoogleFormは手軽にWebアンケートを作ることができる便利なツールだ。
Webの専門知識がなくてもアンケートの作成から集計まで手を煩わせることなく簡単に行なえるツールとしてあらゆる場面で重宝している。
標準機能として集計結果のグラフを画像としてクリップボード経由で出力できるのだが、ラスター画像であるため、大きめの印刷物にこれを用いようとすると画像を引き伸ばすしかなく画像の劣化を避けられずやや不便である。
F12開発ツールで集計ページのhtmlを覗くと、グラフはもともとSVGで作られているようである。だから、このSVGをそのまま抜き出してしまえばよいのではないかと考えた。
SVGを抜き出してしまえばそのあとは適当なツールを使ってラスター画像に変換したり、自身のWebページに埋め込んだりと自由自在である。

手順

  1. GoogleFormを開き、「回答」タブを表示する
  2. ブラウザの開発ツールを出してコンソールに後述のJavaScriptを入力する
  3. ダイアログが表示されるのでファイルをダウンロード

コード

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の仕様が変わっていて要素にアクセスできない場合はここをいじってみて下さい。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?