Googleドキュメントのスプレッドシート(excel)をWEBページに埋め込む方法

medium_2568436053photo credit: mark knol via photopin cc

自分自身へのメモ帳として、毎月のアフィリエイト収入額を報告しているページ(アフィ|月に5000円程度稼ぐサイトのアフィエイリト収入額を毎月報告してみる[アフィは本当に儲かるのか?])があって、毎月1回更新しているんですが、これの更新が異常に面倒くさい。

表形式であらわすためにHTMLのTableつかって表示させていたんですが12ヶ月もあると、タグのどこに数字をいれたらいいか、とか分かりにくいわけです。

で、そういえば、Googleドキュメントにexelのようなヤツがあったよな、と思いまして…
「それ(=スプレッドシート)で、表組を作成して、WEBで公開できたらいいんじゃないか?」とか思って調べたら、できました!

↑こんな感じ。 上表はGoogleドキュメントのスプレッドシートを使って作成したものを、表示させています。
きちんとシート毎にクリック表示できたりして芸が細かい!

基本的な考え方

まず、スプレッドシートをWEBに公開し、それを、iframeで、自分のブログ内に呼び込む。

具体的な方法

1:まずは、表示させたい元データを作成

まずは表示させたいデータを、Googleドキュメント上で作成します。 Microsoftのexel(エクセル)に相当するのが、「スプレッドシート」という機能です。Googleドキュメントの「スプレッドシート(exelに相当する機能)」で、アフィ収入報告のデータ(表組)を作成。

2:「一般公開」設定をする

データができたら、画面右上の「共有」ボタン脇の▲をクリックして、「ウェブページとして一般公開」を選択。

3:「ウェブに公開」ウィンドウが開いたら…

「ウェブに公開」ウィンドウが開いたら、「公開するシート」から表示させたいデータ(シート)を選択(※図のA部分)、「今すぐ再公開」ボタンをクリックします。

まずは、これでウェブページが作成され、ウェブに公開状態になります(※シートが増えてくると、この「公開」作業を意外と忘れがちなので注意!)。

4:「公開データへのリンクを取得」部分を…

続いて、公開したページを自分のブログ上で表示させるために、iframeタグを取得します。
「公開データへのリンクを取得」の、下図B部分から「ページに埋め込むHTML」を選択。 また、下図C部分で、公開したいシートを選択します(作成したシートが1個だけの場合は当然ながら1個だけしか選択できません)。

5:iframeタグが生成される

上記の作業を行うと、下部にiframeタグが生成されるので、これをコピーして、掲載したいブログの任意の場所に貼り付けてやる。

1 個のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です