モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

テーブルタグをGoogleスプレッドシートで作る!


修正情報

  • 2016.05.27:コードの修正
    • セル内の改行が1個目しかbrタグに変換されなかったのを修正しました。



 Googleスプレッドシートに、↓こう書いて
f:id:mmorley:20160511131932p:plain
 ぽちっとすると
f:id:mmorley:20160511132500p:plain
 テーブルタグが出来るようにします。
f:id:mmorley:20160511173320p:plain:w500
 記事に貼り付けるとこうなります。
グループ名前個数
果物りんご2
みかん1
野菜たまねぎ3
 見出しセル(thタグ)、文字寄せ、セル内の改行、セルの結合が出来ます。
 
 作り方を説明します。

使用環境

 私が使用している環境です。

設定方法

 Googleスプレッドシートは、無料で使えるオンラインの表計算(エクセルみたいな)アプリです。
 利用するにはgoogleアカウントが必要です。

2.新しいスプレッドシートを作成

  1. 画面右下の赤い『+』をクリック
    f:id:mmorley:20160511135546p:plain
    『無題のスプレッドシート』が開きます。
  2. 名前を変更
    名前は何でも構いません。
    f:id:mmorley:20160511140418p:plain:w500

3.スクリプトエディタを開く

  1. 『ツール』-『スクリプトエディタ』をクリック
    f:id:mmorley:20160511153134p:plain:w500
    スクリプトエディタで『無題のプロジェクト』が開きます。

4.コードをコピペする

  1. スクリプトエディタの『コード.gs』にあるコードを全て削除
  2. 下記のコードをコピーして、『コード.gs』に貼り付ける
// テーブルタグ作成関数を実行(セル結合あり)
function runCreateTableTagMerge() {
  createTableTag(true);
}

// テーブルタグ作成関数を実行(セル結合なし)
function runCreateTableTag() {
  createTableTag(false);
}

// テーブルタグ作成関数
function createTableTag(margeFlg) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); // アクティブシート
  var range = sheet.getDataRange(); // データのある範囲
  var numRows = range.getNumRows(); // データのある行数
  var numCols = range.getNumColumns(); // データのある列数
  var cells = range.getValues(); // データの配列
  var tableTag = "<table>"; // テーブルタグ
  for(var i = 0; i < numRows; i++){
    var rowTag = "<tr>";
    for(var j = 0; j < numCols; j++){
      var margeString = "";
      if(margeFlg){
        if(cells[i][j] !== "") { // 空のセルでない場合
          // 結合するセルか確認 行
          if(i > 0){ // 先頭の行でない場合
            if(cells[i][j] === cells[i-1][j]){ // 1つ上のセルと同じ内容の場合
              continue;
            }
          } 
          // 結合するセルか確認 列
          if(j > 0){ // 先頭の列でない場合
            if(cells[i][j] === cells[i][j-1]){ // 1つ左のセルと同じ内容の場合
              continue;
            }
          } 
          // セル結合 行
          var count = 1;
          for(var k = i + 1; k < numRows; k++){
            if(cells[i][j] === cells[k][j]){
              count ++;
            }else{
              break;
            }
          }
          if(count > 1){
            margeString += ' rowspan="' + count.toString() + '"';
          } 
          // セル結合 列
          count = 1;
          for(var k = j + 1; k < numCols; k++){
            if(cells[i][j] === cells[i][k]){
              count ++;
            }else{
              break;
            }
          }
          if(count > 1){
            margeString += ' colspan="' + count.toString() + '"';
          }
        }
      }
      // 背景色でタグを設定
      var cellTag = "";
      if(range.getBackgroundColors()[i][j] === "#ffffff"){ // セルの背景が白色の場合 *配列は行、列の順
        cellTag = "td" 
      }else{
        cellTag = "th";
      }
      rowTag += "<" + cellTag + margeString; // セルの結合も設定
      
      // 文字寄せ
      var alignString = range.getHorizontalAlignments()[i][j].replace("general-", "");
      switch(alignString){ // *配列は行、列の順
        case "center":
        case "right":
          rowTag += ' align="' + alignString + '"';
          break;
      }
      rowTag += ">";
      // 改行を変換
      rowTag += cells[i][j].toString().replace(/\n/g, "<br>") + "</" + cellTag + ">";
    }
    rowTag +="</tr>";
    tableTag += rowTag;
  }
  tableTag += "</table>";
  Browser.msgBox(tableTag); // メッセージボックスにテーブルタグ出力
}

// シートの書式・値を全削除
function clearSheet() {
  SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().clear(); // アクティブシートをクリア
}

// スプレッドシートのメニューに追加
function onOpen(){ 
  var ssheet = SpreadsheetApp.getActiveSpreadsheet();
  var menu = [{name: '結合あり', functionName: 'runCreateTableTagMerge'},
              {name: '結合なし', functionName: 'runCreateTableTag'},
              ];
  ssheet.addMenu('テーブルタグ作成', menu);
    menu = [{name: '実行', functionName: 'clearSheet'},
          ];
  ssheet.addMenu('シートをクリア', menu);       
}

5.コードを保存

  1. 『保存』ボタンをクリック
    f:id:mmorley:20160511155732p:plain
  2. プロジェクト名を入力して『OK』をクリック
    名前は何でも構いません。
    f:id:mmorley:20160511162601p:plain:w400

6.スプレッドシートにメニューを追加

 『テーブルタグ作成』メニューを追加します。

  1. 『実行』-『onOpen』をクリック
    f:id:mmorley:20160511161421p:plain:w400
  2. 『許可を確認』をクリック
    f:id:mmorley:20160511162402p:plain:w400
  3. 『許可』をクリック
    f:id:mmorley:20160511162416p:plain:w450

 スプレッドシートに戻ると、メニューに『テーブルタグ作成』と『シートをクリア』が追加されています。
f:id:mmorley:20160511224020p:plain:w500
 設定は以上です。

使い方

  下記の手順でテーブルタグを作成します。

  1. スプレッドシートに値を入力
    f:id:mmorley:20160511173021p:plain
    尚、セル内で改行するには、
    Macの場合はキーボードの『option + return』
    Windowsの場合はキーボードの『alt + enter』です。
  2. セルを選択し、背景色を設定
    f:id:mmorley:20160511171934p:plain
  3. セルを選択し、文字寄せを設定
    f:id:mmorley:20160511172405p:plain
    自由に背景と文字寄せを設定します。
    f:id:mmorley:20160511131932p:plain
  4. 『テーブルタグ作成』の『結合あり』もしくは、『結合なし』をクリック
    f:id:mmorley:20160511132500p:plain
  5. メッセージに表示されるテーブルタグをコピペする
    f:id:mmorley:20160511173320p:plain:w500
  6. テーブルを作り直す場合は『シートをクリア』-『実行』をクリック

詳細

  • テーブルになるのは、スプレッドシートの左上(A1セル)から値のあるセルまでです。
  • 背景が白色の場合は通常セル(tdタグ)、白色以外の場合は見出しセル(thタグ)になります。
    • 背景色ではなくタグの種類が変わります。
  • 水平方向の文字位置(文字寄せ)が反映されます。垂直方向は反映されません。
  • セル内の改行をbrタグに書き換えます。
  • 『テーブルタグ作成』-『結合あり』をクリックした場合、となり合うタグの内容が同じ(空白以外)であれば結合されます。
    • 空白行を結合したい場合は、セルにスペースを入力して下さい。
    • 結合したセルが長方形になるような結合は出来ると思います。
      3行3列等。
      a1b1c1d1
      a2d2
      d3
      d4
      a5b5c5d5
  • 結合した場合、一番左上のセルの種類(通常、見出し)、文字寄せが反映されます。

はてな記法でもテーブルタグを使う理由

 このブログは、はてな記法で書いています。
 はてな記法にはテーブルを簡単に書く方法がありますが、セルの文字寄せや結合がありません。
 また、リスト記法の連番が途切れてしまいます。

はてな記法の場合
+リスト1
|*グループ|*名前|*個数|
|果物|りんご|2|
|果物|みかん|1|
+リスト2

 ↑このように書くと↓こうなります。

  1. リスト1
グループ 名前 個数
果物 りんご 2
果物 みかん 1
  1. スト2

 リストの連番が途切れます。

テーブルタグを使った場合
+リスト1<br><table><tr><th align="center">グループ</th><th align="center">名前</th><th align="center">個数</th></tr><tr><td rowspan="2" align="center">果物</td><td align="center">りんご</td><td align="right">2</td></tr><tr><td align="center">みかん</td><td align="right">1</td></tr></table>
+リスト2

 brタグに続けてテーブルタグを書いています。
 『+リスト1<br>』から『</table>』まで1行です。

  1. リスト1
    グループ名前個数
    果物りんご2
    みかん1
  2. スト2

 リストの連番が続きます。

あとがき

 作成したテーブルタグをクリップボードに出力できたら良いのですが、オンラインソフトの制約で出来ないみたいです。
 確かに、オンラインからクリップボード操作できたら怖いですね。