April 8, 2014

google spreadsheetからtableタグを抜き出す

google spreadsheetは、ブラウザだけで表計算が可能で便利ですが、他のページに埋め込む場合、標準ではテーブルのみをコンパクトに埋め込むことができないようです。そこで、jqueryを使って簡単に埋め込む方法をメモします。

コード中のKEY_OF_YOUR_SPREADSHEETにはスプレッドシートを公開するときに得られるキーを使います。また、結果を入れたいdivタグのidをコード中で指定しておきます(サンプルコードではspreadsheetresultとしています。)

<div class="spreadsheetresult">Loading google spreadsheet...</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
   $.get("https://docs.google.com/spreadsheet/pub?key=KEY_OF_YOUR_SPREADSHEET",function(data){
      var output=$(data).find("#tblMain")
      $(output).find(".hd").remove()
      $(output).find(".rShim").remove()

      $(".spreadsheetresult").contents().replaceWith(output)
   })
})
</script>

実行結果

Loading google spreadsheet...


もっと高度なことをしたいときは…

JSONもサポートしているのでスクリプトをきちっと組んでやってもいいのですがjqueryを使ってやれば、XHRとDOM操作のわずかなコードでtableタグを抜き出すことが出来ます。
抜き出したタグはstyleを使って味付けすればお好みの表になりますね。

Simple example of retrieving JSON feeds from Spreadsheets Data API - Google Data APIs — Google Developers
https://developers.google.com/gdata/samples/spreadsheet_sample?hl=ja

No comments :

Post a Comment