Googleスプレッドシートをブログに埋め込む

◆Googleドライブ

Google ドライブ - 写真やドキュメントなど、ファイルのクラウド ストレージとバックアップ


初めにGoogleドライブのページに行って「Googleドライブにアクセス」。Googleアカウントを持っている人なら何も登録せずいきなり使えるようになっているはず。


マイドライブ(Googleドライブ)にアクセスしたらまず設定。一度使った後なので既にファイルがあるけど気にしない。


「アップロードしたファイルを Google ドキュメント エディタ形式に変換します」にチェックを入れて完了。


「新規」か「マイドライブ」からGoogleスプレッドシートを選んでファイルをアップロード。


アップロードするとマイドライブにファイルが追加される。

ついでに表示の切り替えで「ギャラリー表示」から「リスト表示」にしてみた。サムネイルよりこちらの方が情報量多いし見やすいはず。




◆スプレッドシートで埋め込みコードを作成


アップロードしたスプレッドシートはExcelの簡易verみたいな印象。Excelと比べると機能的に少々物足りない部分もある。良く言えばシンプルで分かりやすいとも言えるか。

このまま公開するにはあまりに殺風景な表だったので少し手を加えたが、スプレッドシート使うの初めてでも感覚で大体操作できた。Excel使ったことある人なら普通に使えるはず。

一通り作業が終わったらメニューバーの「ファイル」 → 「ウェブに公開」を選択。


「埋め込む」シートを選んで公開。ドキュメント全体だけでなく一部のシートだけ公開もできる。シート3つのうち2つだけ公開というのもできるはずだが、何故か上手くいかなかった。


埋め込みコードが発行されるのでそれをコピーしてブログに貼り付ける。

FC2ブログの場合、高機能テキストエディタではない状態でコードを貼り付ければひとまず完了。


上記のコードを貼り付けるとこんな感じ。このままだと小さすぎて話にならないので調整が必要。




◆サイズ調整&枠線非表示

<iframe src="https://docs.google.com/spreadsheets/d/1-7rceGeJcm9Ignd1qEzRD3BMd0Plv6XXmCuX4cGZA0s/pubhtml?widget=true&headers=false"></iframe>

先程のコードの一部を改変して見やすくする。

<iframe width="640" height="450" frameborder="0" src="https://docs.google.com/spreadsheets/d/1-7rceGeJcm9Ignd1qEzRD3BMd0Plv6XXmCuX4cGZA0s/pubhtml?widget=true&headers=false"></iframe>

「width="640" height="450"」は横幅と縦幅。「frameborder="0"」はスプレッドシートの一番外側の枠線を非表示。こちらは別になくても問題ないけど、表示できる範囲が若干増えるはず。


このブログの本文幅は640pxなので横幅をそれに合わせた。グラフにカーソル合わせると日付や数値が表示されるのが良いところ。

同じような手順でグラフ単体でも埋め込める。スプレッドシートでグラフを選択すると、グラフ右上辺りに「グラフを公開」と出るので後は同じ手順。

グラフ込みだとスクロールバー出ないようにするのがかなり面倒で、いちいちスプレッドシートの編集とエディタのプレビューを繰り返す必要あるのが難点。一応次の方法で解決できなくもないが。




◆その他調整

▼サイズ調整&枠線非表示コード

<iframe width="640" height="450" frameborder="0" src="https://docs.google.com/spreadsheets/d/1-7rceGeJcm9Ignd1qEzRD3BMd0Plv6XXmCuX4cGZA0s/pubhtml?widget=true&headers=false"></iframe>

ここから先はさっき改変したコードを更に改変していく。

▼シート指定コード

<iframe width="640" height="450" frameborder="0" src="https://docs.google.com/spreadsheets/d/1-7rceGeJcm9Ignd1qEzRD3BMd0Plv6XXmCuX4cGZA0s/pubhtml?widget=true&headers=false&gid=934400455"></iframe>

スプレッドシートを開いて、表示したいシートのURL末尾にある数字を入力。

▼シート指定&範囲指定コード

<iframe width="640" height="450" frameborder="0" src="https://docs.google.com/spreadsheets/d/1-7rceGeJcm9Ignd1qEzRD3BMd0Plv6XXmCuX4cGZA0s/pubhtml?widget=true&headers=false&gid=934400455&range=A1:C18"></iframe>

表示したい範囲を指定。シートを指定しないと範囲指定できないので注意。

▼シート指定

デフォルトだとシートは一番左端のものになるが、指定することで2つ目のシートに変わっている。

▼シート指定&範囲指定

2つ目のシートを指定しつつ、セルを「A1:C18」の2月まで表示。範囲外のグラフは表示されない。余計な部分を表示させたくなかったり、縦横のスクロールバーがウザいときに使えるだろうか。

▼縦幅の調整
縦のスクロールバーが出ないようにしつつ最小限の縦幅に収めるには、ある程度縦幅を大きめにして縦幅を10pxずつ削って微調整。流石に1px単位で削るのは面倒すぎるし必要ないかな。



◆スクロールバーを非表示

2022/03/13追記
最近？スクロールバーが非表示にならなくなって原因を探してみたところ、珍しく公式のヘルプが役に立った。というかこの記事を書く前にちゃんと見とけっていう。

gid=: シート ID。
range=: ウェブに公開されている行と列。A1:B14 などです。
widget=: true または false。true の場合、シートタブが下部に表示されます。
headers=: true または false。true の場合、行番号と列文字が表示されます。
chrome=: true または false。true の場合、タイトルとフッターが表示されます。
Google ドキュメント、スプレッドシート、スライド、フォームを公開する - パソコン - ドキュメント エディタ ヘルプ

単体のシートなら「widget=true」を「widget=false」に変更するだけ。シートタブが表示されてるとスクロールバーが表示されるっぽい？

特に弄ってなかった古いコードと今のコードを見比べても特に違いは見当たらないのが謎。




シートと範囲の指定はやり方載せてるところが全くと言っていいほど見当たらなくてやたら苦労した。それっぽいのがあっても今と仕様違ったときの古い情報だらけで全く話にならないという。

これからは小さめの表はブログのエディタで、大きめで凝りたい表はスプレッドシート使うことになりそう。Googleドライブ自体もバックアップなどに使えそうだしもっと有効活用していきたい。

関連記事

• Twitter検索でユーザー名に含まれる単語を除外 2019/06/10
• IPv6アドレスによるインターネット接続 2017/02/02
• Googleスプレッドシートをブログに埋め込む 2016/11/15
• CLUB NTT-West ニンテンドープリペイドの引き換え方法 2016/04/21
• Amazon送料有料化 今までどおり送料無料で利用する方法 2016/04/08