| グループ | 名前 | 産地 | 個数 |
|---|---|---|---|
| 果物 | りんご | 青森 | 6 |
| みかん （温州） | 和歌山 | 2 | |
| 愛媛 | 2 | ||
| 野菜 | たまねぎ | 北海道 | 12 |
出来ることは以下のとおりです。
- セルの結合を反映します。
- 太字のセルを見出しセル（thタグ）にします。
- 文字の色を再現します。
- セルの背景色を反映します。※見出しセルは除きます。
- 縦および横方向の文字寄せを反映します。
- セル内の改行を反映します。
下記の記事の改良版なのですが、一番の違いはセルの結合の自動判別です。 以前は『結合あり』を選ぶと、
- 以前：背景色が白い外のセルを見出しセルにする
- 今回：文字が太字のセルを見出しセルにする
完全ではないですが、以前より『Googleスプレッドシート』で見たままに近いテーブルタグを作れるようになりました。
それでは作り方を説明します。
設定方法
Googleスプレッドシートは、無料で使えるオンラインの表計算（エクセルみたいな）アプリです。
利用するにはgoogleアカウントが必要です。
新しいスプレッドシートを作成する
- 下記のサイトを開きます。
Google Sheets: Free Online Spreadsheet Editor | Google Workspace
- 画面右下『+』をクリックします。
- 『無題のスプレッドシート』をクリックして、任意の名前を入力します。
今回は”テーブルタグ作成”にしました。
スクリプトを作成する
- 『ツール』→『スクリプトエディタ』をクリックします。
- スクリプトエディタの『コード.gs』に最初からあるコードを全て削除します。
- 下記のコードをコピーして、『コード.gs』に貼り付けます。
// テーブルタグ作成関数を実行 function runCreateTableTag() { createTableTag(); // テーブルタグを作成する } // テーブルタグ作成関数 function createTableTag() { var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); // アクティブシート var range = sheet.getDataRange(); // データのある範囲 var numRows = range.getNumRows(); // データのある行数 var numCols = range.getNumColumns(); // データのある列数 var cells = range.getValues(); // データの配列 var tableTag = "<table>"; // テーブルタグを格納する // セルの結合の有無と表示値を取得する var mcell = new Array(numRows); // セルの結合の有無を格納する配列を作成、true:結合有り var vcell = new Array(numRows); // 結合セルの表示値を格納する配列を作成 for(var i = 0; i < numRows; i++){ // 行数分ループ mcell[i] = new Array(numCols); // 2次元配列を作成 vcell[i] = new Array(numCols); // 2次元配列を作成 for(var j = 0; j < numCols; j++){ // 列数分ループ var mrange = sheet.getRange(i+1, j+1, 1, 1); // セルを取得 mcell[i][j] = mrange.isPartOfMerge(); // 結合の有無を取得 if(mcell[i][j]){ // 結合有りの場合 vcell[i][j] = mrange.getMergedRanges()[0].getDisplayValue(); // 表示値を取得 } } } // テーブルタグを作成する for(var i = 0; i < numRows; i++){ // 行数分ループ var rowTag = "<tr>"; // 行タグを格納する for(var j = 0; j < numCols; j++){ // 列数分ループ var margeString = ""; // セル結合の属性値を格納する // 行方向で、先頭でない結合セルの場合はスキップする if(i > 0){ // 先頭の行でない場合 if(mcell[i-1][j] && mcell[i][j] && vcell[i-1][j] === vcell[i][j] && cells[i][j] === ""){ // 1つ上のセルと現在のセルが結合セル＆表示値が同じ＆現在のセルの値が空白の場合 continue; // 以下の処理をスキップする } } // 列方向で、先頭でない結合セルの場合はスキップする if(j > 0){ // 先頭の列でない場合 if(mcell[i][j-1] && mcell[i][j] && vcell[i][j-1] === vcell[i][j] && cells[i][j] === ""){ // 1つ左のセルと現在のセルが結合セル＆表示値が同じ＆現在のセルの値が空白の場合 continue; // 以下の処理をスキップする } } // 行方向のセルの結合数をカウントする var count = 1; // 結合数 for(var k = i + 1; k < numRows; k++){ // 最終行までループ if(mcell[k-1][j] && mcell[k][j] && vcell[k-1][j] === vcell[k][j] && cells[k][j] === ""){ // 先頭ではない結合セルの場合 count ++; // カウントアップ }else{ // それ以外の場合 break; // カウントを終了する } } if(count > 1){ // 結合数が1より大きい場合 margeString += ' rowspan="' + count.toString() + '"'; // テーブルタグの行結合の属性値を作成する } // 列方向のセルの結合数をカウントする count = 1; // 結合数 for(var k = j + 1; k < numCols; k++){ // 最終列までループ if(mcell[i][k-1] && mcell[i][k] && vcell[i][k-1] === vcell[i][k] && cells[i][k] === ""){ // 先頭ではない結合セルの場合 count ++; // カウントアップ }else{ // それ以外の場合 break; // カウントを終了する } } if(count > 1){ // 結合数が1より大きい場合 margeString += ' colspan="' + count.toString() + '"'; // テーブルタグの列結合の属性値を作成する } // 通常・見出しセル、セルの背景色、文字色を設定する var cellTag = ""; // セルタグ var colorString = ""; // 背景色指定の属性値 if(range.getFontWeights()[i][j] === "normal"){ // 文字が通常の場合（太字でない場合） cellTag = "td" // 通常のセル if(range.getBackgroundColors()[i][j] !== "#ffffff"){ // 白色の場合 colorString = ' bgcolor="' + range.getBackgroundColors()[i][j] + '"'; //色指定の属性値を追加する } }else{ // それ以外の場合 cellTag = "th"; // 見出しセル } rowTag += "<" + cellTag + margeString + colorString; // セルの結合と背景色指定を追加する if(range.getFontColors()[i][j] !== "#000000"){ // 文字が黒でない場合 rowTag += ' style="color:' + range.getFontColors()[i][j] + '"'; // 文字色指定を追加する } // 横方向の文字寄せ var alignString = range.getHorizontalAlignments()[i][j].replace("general-", ""); // スプレッドシートのセルの文字寄せの状態を取得する switch(alignString){ // 文字寄せの種類別処理 //case "left": // 左寄せ テーブルタグのセルのデフォルト位置なので記述しない case "center": // 中央寄せ case "right": // 右寄せ rowTag += ' align="' + alignString + '"'; // テーブルタグの文字寄せの属性値を作成 break; } // 縦方向の文字寄せ var alignString = range.getVerticalAlignments()[i][j]; // スプレッドシートのセルの文字寄せの状態を取得する switch(alignString){ // 文字寄せの種類別処理 case "top": // 上寄せ //case "middle": // 中央寄せ（縦）テーブルタグのセルのデフォルト位置なので記述しない case "bottom": // 下寄せ rowTag += ' valign="' + alignString + '"'; // テーブルタグの文字寄せの属性値を作成する break; } rowTag += ">"; // 開始側のセルタグを閉じる rowTag += range.getDisplayValues()[i][j].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: 'runCreateTableTag'}]; // メニューの項目を作成する ssheet.addMenu('テーブルタグ作成', menu); // メニューを作成する menu = [{name: '実行', functionName: 'clearSheet'}]; // メニューの項目を作成する ssheet.addMenu('シートをクリア', menu); // メニューを作成する }
- 『保存』ボタンをクリックします。
- 任意のプロジェクト名を入力して、『OK』をクリックします。
今回は”テーブルタグ作成”にしました。
スプレッドシートにメニューを追加する
- 『実行』→『関数を実行』→『onOpen』をクリックします。
- 『許可を確認』をクリックします。
スクリプトを初めて実行する際には、自作のものでも承認が必要です。
[
w500]
- アカウントを選択します。
- 『詳細』をクリックします。
『安全なページに戻る』をクリックすると、スクリプトを実行せずにスプレッドシートに戻ります。
- ウィンドウを下に広げて『無題のプロジェクト（安全ではないページ）に移動』をクリックします。
『安全ではないページ』という表現に不安になりますが、『スクリプトを実行しますけど良いですか？』という確認の意味です。
- 『許可』をクリックします。
スプレッドシートのメニューに『テーブルタグ作成』と『シートをクリア』が追加されます。
使い方
下記の手順でテーブルタグを作成します。
補足
- 値の入った範囲がテーブルタグになります。
- 見出しセル（thタグ）にしたいセルを太字にします。
※セル自体を選択して太字にします。中の文字ではありません。
- はてなブログでは見出しセルに背景色が設定出来ないため、見出しセルに背景色の設定をしていません。
- 下図の結合セルは再現出来ません。
『結合セルの先頭以外のセルが接している』かつ『文字が同じ』場合です。
水色の部分が再現出来ません。
下表のようになります。
内部的に下図のように検出するためです。りんご りんご りんご りんご
文字が異なれば、正しく表示されます。
同じ文字にしたい場合は『空白文字（スペース）』を使用して下さい。りんご りんご りんご みかん
