表を作りたい

Google Site上で表を実現するにも、色々な方法がある。用途に応じて表を作る必要性があるが、それらをまとめてみた。

普通に標準の機能で表を作る

そのまま挿入

そのまんまSiteの機能を使って挿入してみる

利点

  1. メニューから簡単に作れる。
  2. 簡単に削除できるし、行列も簡単に後から追加削除できる。
  3. 自由にサイズを調整できる。

欠点

  1. 複雑なレイアウトの表を作成できない。
  2. セルの結合やカラーリングなどの装飾も一切できない。
  3. 表の自由な配置も出来ない。

ということで、作るのは簡単でも、後で調整が困難。調整をしたい場合、HTMLソースを編集ボタンを押して、調整してやる必要性がある。

HTMLを直接編集する

ツールバーのHTMLソースを編集ボタンを押して、直接編集して作る

利点

  1. ほぼ自由にテーブルを組むことができる
  2. 配置も自由にできる
  3. 複雑なセルの結合なども可能

欠点

  1. 作るのが非常に面倒臭い
  2. Google Siteのタグ自動修正によって、結局レイアウトは崩れたりする
  3. 簡単に追加できない上に、サイズを変えると壊れる
  4. CSSが使えるということであるが、実際には殆ど使えない。HTMLボックスでも同じ。ましてや、外部ファイルでのCSS指定なんて、そもそも外部ファイルの読み込みが禁止されているので、それもできない。

ガジェットを使って予め作っておいたテーブルを表示

利点

  1. 自由度は最高。どんなテーブルだろうと組むことが出来る
  2. CSSがバリバリ使用できる。外部CSSの呼び出しもOK。jQueryなどのライブラリを使って装飾もOK。
  3. 作ったテーブルは、ガジェットなので自由自在に配置が可能。
  4. JavaScriptも自由自在に掛ける上に、Google Apps Scriptと連携も可能。
  5. いくらでも簡単に再利用できる。
  6. Google Site以外でも利用可能。

欠点

  1. XMLを書いて外部にアップロードが必要。今回はDropBoxのパブリックフォルダに入れて、共有リンクを用いてここに埋め込んだ。
  2. 作るのが面倒くさい。
  3. ガジェットのサイズを自分で決め打ちしてあげないといけない。(特に高さ)
  4. ガジェットの横サイズがスタイルシート上のwidthとガジェットの横サイズとで影響しあうので嵌る。

ガジェットのソース

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Go to Photo Album" height="250" scaling="false" />
  <Content type="html">
  <![CDATA[ 
<STYLE type="text/css">
table {
  border-spacing: 0;
  font-size:12px;
}
table th {
  color: #fff;
  padding: 8px 15px;
  background: #258;
  background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 70%);
  background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9)));
  font-weight: bold;
  border-left:1px solid #258;
  border-top:1px solid #258;
  border-bottom:1px solid #258;
  line-height: 120%;
  text-align: center;
  text-shadow:0 -1px 0 rgba(34,85,136,0.9);
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}
table th:first-child {
  border-radius: 5px 0 0 0;
}
table th:last-child {
  border-radius:0 5px 0 0;
  border-right:1px solid #258;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1),0px 1px 1px rgba(255,255,255,0.3) inset;
}
table tr td {
  padding: 8px 15px;
  border-bottom: 1px solid #84b2e0;
  border-left: 1px solid #84b2e0;
  text-align: center;
}
table tr td:last-child {
  border-right: 1px solid #84b2e0;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
table tr {
  background: #fff;
}
table tr:nth-child(2n+1) {
  background: #f1f6fc;
}
table tr:last-child td {
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
table tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}
table tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}
table tr:hover {
  background: #bbd4ee;
  cursor:pointer;
}
</STYLE>
<div>
<table>
<tbody>
<tr>
<th style="width:20%">ゲームの名前</td>
<th style="width:20%">ジャンル</td>
<th style="width:10%">価格</td>
<th style="width:10%">面白さ</td>
<th style="width:10%">リンク</td>
</tr>
<tr>
<td>&nbsp;グランツーリスモ２</td>
<td>&nbsp;シミュレーション</td>
<td>&nbsp;5,980円</td>
<td>★★★★</td>
<td>&nbsp;<b><a href="http://www.amazon.co.jp/%E3%82%BD%E3%83%8B%E3%83%BC%E3%83%BB%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%82%A8%E3%83%B3%E3%82%BF%E3%83%86%E3%82%A4%E3%83%B3%E3%83%A1%E3%83%B3%E3%83%88-%E3%82%B0%E3%83%A9%E3%83%B3%E3%83%84%E3%83%BC%E3%83%AA%E3%82%B9%E3%83%A22/dp/B00005OVU9" target="_blank">amazon</a></b></td>
</tr>
<tr>
<td>&nbsp;チョコボの不思議なダンジョン２</td>
<td>&nbsp;RPG</td>
<td>&nbsp;2,271円</td>
<td>★★★★</td>
<td>&nbsp;<b><a href="http://www.amazon.co.jp/%E3%82%B9%E3%82%AF%E3%82%A6%E3%82%A7%E3%82%A2-%E3%83%81%E3%83%A7%E3%82%B3%E3%83%9C%E3%81%AE%E4%B8%8D%E6%80%9D%E8%AD%B0%E3%81%AA%E3%83%80%E3%83%B3%E3%82%B8%E3%83%A7%E3%83%B32/dp/B00005OVVB" target="_blank">amazon</a></b></td>
</tr>
<tr>
<td>&nbsp;アストロノーカ</td>
<td>&nbsp;シミュレーション</td>
<td>&nbsp;1,500円</td>
<td>★★</td>
<td>&nbsp;<b><a href="http://www.amazon.co.jp/%E3%82%A8%E3%83%8B%E3%83%83%E3%82%AF%E3%82%B9-%E3%82%A2%E3%82%B9%E3%83%88%E3%83%AD%E3%83%8E%E3%83%BC%E3%82%AB/dp/B00005OVW9" target="_blank">amazon</a></b></td>
</tr>
<tr>
<td>&nbsp;ドラゴンクエストIV</td>
<td>&nbsp;RPG</td>
<td>&nbsp;8,400円</td>
<td>&nbsp;★★★★★</td>
<td>&nbsp;<b><a href="http://www.amazon.co.jp/%E3%82%A8%E3%83%8B%E3%83%83%E3%82%AF%E3%82%B9-%E3%83%89%E3%83%A9%E3%82%B4%E3%83%B3%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88IV-%E5%B0%8E%E3%81%8B%E3%82%8C%E3%81%97%E8%80%85%E3%81%9F%E3%81%A1/dp/B00005RTU9" target="_blank">amazon</a></b></td>
</tr>
</tbody>
</table>
</div>
  ]]> 
  </Content>
</Module>

（下の方にファイルもあります）

※今回使わせてもらったCSSのファイルがある場所

スプレッドシートを表示する

そのまんま表示する

そのまんまなんの手ほどきもせずに、ウェブに公開したスプレッドシートを表示するとこうなる。

gamelist

範囲を限定して表示する

範囲を限定して公開する。しかし、新しいスプレッドシートを使用しているとこの機能がないため、使えない。

Google スプレッドシート

Ui機能を使って作成する

通常のUiを使って作成する

チャート機能を使って作成する

本来はテーブル表示の為のものではないのだが、Chart APIで綺麗なテーブルチャートにて表を表示することが出来る。Google SiteのAppスクリプトガジェットやサイト用ガジェットにJavaScriptを仕込んで、外部からGoogleのAPIを叩いて表示も可能。今回は、TableChartにスプレッドシートからデータを流し込んで、フィルタを付け加えてある。サイトにはAppスクリプトガジェットとして貼り付ける。

予め、作成してあるApps Scriptは、スクリプトエディタ画面上で公開しアクセス権限を与えて置かないと表示されない。

AppsスクリプトでTableChart表示してみた図

Google Gadget化して表示してみた図

同じスプレッドシートデータのものをApps ScriptではなくGoogle Gadget化してここに貼り付けた事例。この場合、Google Siteじゃなくても、Google Gadgetとして公開すれば、貼り付けることが出来る上に、このテーブル部分を部品化出来る。しかも、データを更新すれば、ガジェット内も更新されるので便利なパーツになる。しかし、ガジェットの場合、大分コードの書き方が変わるので、ちょっと大変。

なお、このガジェットのXMLは下のほうにtestgadget.xmlでアップロードしてます。

上記のガジェットに５秒間毎にリロードするスクリプトを追加したもの（リアルタイムモニタなどに最適）

※ちなみに、AppsのページをJavaScript内でiFrameで表示させたり、スクレイピングしようとしてみたけれど、ダメだった。

※リロードに関するスクリプトはwindow.location.reload()を使用してます。

ソースコード(Apps Script)

function doGet() {
  // シートの名前を取得
  var sheet = SpreadsheetApp.openById("0AjN10lCzkUqkdFFBeDZyTFBnZzlOSkxPWWs3TDJqaEE").
            getSheetByName("master");
  
  //特定のレンジを配列として取得
  var varValues = sheet.getRange("A2:K9").getValues();
  
  var dataTable = Charts.newDataTable();
  dataTable.addColumn(Charts.ColumnType.STRING, "年月");
  dataTable.addColumn(Charts.ColumnType.STRING, "西暦");
  dataTable.addColumn(Charts.ColumnType.NUMBER, "総合計");
  dataTable.addColumn(Charts.ColumnType.NUMBER, "増減数");
  dataTable.addColumn(Charts.ColumnType.NUMBER, "増減率");
  dataTable.addColumn(Charts.ColumnType.NUMBER, "出生児数");
  dataTable.addColumn(Charts.ColumnType.NUMBER, "死亡者数");
  dataTable.addColumn(Charts.ColumnType.NUMBER, "自然増減");
  dataTable.addColumn(Charts.ColumnType.NUMBER, "入国者数");
  dataTable.addColumn(Charts.ColumnType.NUMBER, "出国者数");
  dataTable.addColumn(Charts.ColumnType.NUMBER, "社会増減");
  
  //配列データをテーブルに格納
  var counter = Number(0);
  for(var i in dataTable) {
    var row = []; 
    row.push(String(varValues[counter][0]));
    row.push(String(varValues[counter][1]));
    row.push(Number(varValues[counter][2]));
    row.push(Number(varValues[counter][3]));
    row.push(Number(varValues[counter][4]));
    row.push(Number(varValues[counter][5]));
    row.push(Number(varValues[counter][6]));
    row.push(Number(varValues[counter][7]));
    row.push(Number(varValues[counter][8]));
    row.push(Number(varValues[counter][9]));
    row.push(Number(varValues[counter][10]));
    dataTable.addRow(row);
    counter++;
  }
  var data = dataTable.build();
  
  // フィルタの追加
  var typeFilter = Charts.newCategoryFilter()
      .setFilterColumnLabel("西暦")
      .build();
  
  //テーブルチャートの追加
  var tableChart = Charts.newTableChart()
      .setDimensions(800, 400)
      .build();
  
  //ダッシュボードの追加
  var dashboard = Charts.newDashboardPanel()
      .setDataTable(data)
      .bind(typeFilter, tableChart)
      .build();
  
  var app = UiApp.createApplication();
  dashboard.add(
    app.createVerticalPanel()
    .add(typeFilter)
    .add(tableChart)
    .setSpacing(10)
  );
  
  app.add(dashboard);
  
  return app;
}

ソースコード(Google Gadget)

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="sample1" />
<Content type="html">
<![CDATA[
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['table']});
    </script>
    <script type="text/javascript">

function init(){

        //初期化処理
  var sourceSheet="https://spreadsheets.google.com/tq?&tq=&key=0AjN10lCzkUqkdFFBeDZyTFBnZzlOSkxPWWs3TDJqaEE&gid=2";
        var query = new google.visualization.Query(sourceSheet);
        query.send(handleResponse);
      }
      google.setOnLoadCallback(init);


       function handleResponse(response){
        var div = document.getElementById('res');
        if(response.isError()) {
          div.innerHTML = response.getDetailedMessage();
          return;
        }


        var data = response.getDataTable();
        var divTable  = new google.visualization.Table(div);
        divTable.draw(data);
       }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <p id="res"></p>
  </body>
</html>
]]>
</Content>
</Module>

※このテーブルの呼び出し元スプレッドシート

※このスプレッドシートのデータ元（統計局：人口推計）

関連URL