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

公開 2016.11.15 (火) 更新 2016.11.15 (火)

ブログで大きめの表を作るとき融通効かなくて何か良い方法ないかと探していたらこれに辿り着いた。コード埋め込むのが若干面倒だけど、クラウド上でExcelと同じ感覚で使えるだけでも十分便利。




◆Googleドライブ

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

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

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

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

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

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

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



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

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

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

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

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

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

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


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



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

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

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

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

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


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

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

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



◆その他調整

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

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

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

▼シート指定コード

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

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

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

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

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

▼シート指定

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

▼シート指定&範囲指定

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


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

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

関連記事

コメント
管理者にだけ表示を許可する
 
back-to-top