Google スプレッドシートのガジェットをはてなダイアリーに貼る

web Google Docs 備忘録

昨日の記事で体重のグラフを貼ったんだけど、けっこう手順が面倒だったので記録に残しておく。
はてなダイアリーは、ガジェットの script タグをそのまま貼っただけでは表示されない。華麗にエスケープしてくださる。
なので表示させるために Google ガジェット化して形式を変換してやらないといけない。
基本的には以下の記事を参考に、ほとんどそのままの手順を実行しただけ。
http://labs.unoh.net/2007/08/google_1.html
Ring


1. 表示させたいガジェットの script タグを取得
貼り付けたいガジェットのメニューから「ガジェットを公開」を選ぶと表示された。
昨日のグラフの場合はこんなタグが出力される。

<script src="https://spreadsheets.google.com/gpub?url=http%3A%2F%2Fccmn41lv2h65votlvb823a1s2shmras1-ss-opensocial.googleusercontent.com%2Fgadgets%2Fifr%3Fup_title%3D%25E4%25BD%2593%25E9%2587%258D%26up_chartTitle%3D%25E4%25BD%2593%25E9%2587%258D%26up_labelx%26up_labely%26up_legend%3D4%26up_smoothline%3D1%26up_showpoints%3D0%26up_min%26up_max%26up__table_query_url%3Dhttps%253A%252F%252Fspreadsheets.google.com%252Ftq%253Frange%253DC%25253AC%2526key%253D0AjqgzsENtDNQdDNkeDlJeVZfcUI5aUd2NEFYaTk2UEE%2526gid%253D0%2526pub%253D1%26url%3Dhttp%253A%252F%252Fwww.google.com%252Fig%252Fmodules%252Fline-chart.xml%26spreadsheets%3Dspreadsheets&height=150&width=400"></script>

他のウェブサイトならこれを貼り付けるだけでグラフが表示されるんですけどねー。


2. Google ガジェット化
Google ガジェット用の XML を作成し、その中に設定を書く。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="(ブログパーツのタイトル)" />
  <Content type="html">
     <![CDATA[
        ここに貼り付け用の script タグを記述する。
        エスケープ処理さえすれば CDATA セクションに記述する必要はないよ。
     ]]>
  </Content>
</Module>

昨日のグラフの場合はこう。

<?xml version="1.0" encoding="UTF-8" ?>
<Module> 
  <ModulePrefs title="体重" /> 
  <Content type="html"> 
    <![CDATA[><script src="https://spreadsheets.google.com/gpub?url=http%3A%2F%2Fccmn41lv2h65votlvb823a1s2shmras1-ss-opensocial.googleusercontent.com%2Fgadgets%2Fifr%3Fup_title%3D%25E4%25BD%2593%25E9%2587%258D%26up_chartTitle%3D%25E4%25BD%2593%25E9%2587%258D%26up_labelx%26up_labely%26up_legend%3D4%26up_smoothline%3D1%26up_showpoints%3D0%26up_min%26up_max%26up__table_query_url%3Dhttps%253A%252F%252Fspreadsheets.google.com%252Ftq%253Frange%253DC%25253AC%2526key%253D0AjqgzsENtDNQdDNkeDlJeVZfcUI5aUd2NEFYaTk2UEE%2526gid%253D0%2526pub%253D1%26url%3Dhttp%253A%252F%252Fwww.google.com%252Fig%252Fmodules%252Fline-chart.xml%26spreadsheets%3Dspreadsheets&height=150&width=400"></script>]]>
  </Content> 
</Module>

この XML ファイルをインターネットに公開すればとりあえず準備は完了。
ワタシは遊びで構築した Micolog にあげておいた。
blogparts-weight.xml


3. はてなダイアリーに貼り付け
貼り付けタグの雛形は上記リンク先のものを使わせていただいた。
昨日のグラフの場合は下のようなタグ。

<script src="http://gmodules.com/ig/ifr?url=http://hrkn-blog.appspot.com/media/aglocmtuLWJsb2dyDAsSBU1lZGlhGPlVDA/blogparts-weight.xml&synd=open&w=400&h=150&title=&border=%23ffffff%7C0px%2C0px+solid+%23ffffff&output=js"></script>

この形式であれば、はてなダイアリーにも貼り付けることができる。


4. CSS をちょっと弄る
普通に貼ると以下のキャプチャみたいにラインが入って見栄えが悪いので CSS を弄ってごまかす。

上記リンク先によると以下をスタイルシートに追記すればOK。と思ってやってみたらダメだった。

div.section table.ig_reset, div.section table.ig_reset td {
	border:0;
	padding:0;
}

ソースを調べて少し改造。こうしたらきれいになった。

div.section table.gadget, div.section table.gadget td {
	border:0;
	padding:0;
}


5. やっとできた


Google スプレッドシートのグラフを貼るために調べたんだけど、他のブログパーツでもたぶん同様の手順ではてなダイアリーに貼れると思う。