秋晴れのいい日ですね、武田です。
ホームページで表を扱うtableというタグがあります。Excelの表をtableタグに置き換えてHTML表示する、ということをJavaScriptを使ってやってみました。
正直なところ、Excelで「名前をつけて保存…」でファイルの種類を「Webページ」にすればHTMLファイルが出力できるのでこれでもOKなのですが、その際、出力されるデータが複雑なHTMLで使い物になりません。
今日は、JavaScriptを使ってシンプルな表に置き換えてみます。
手順としては、
１）Excelの表範囲をコピー
２）コピーしたデータをJSONデータに変換（Mr. Data Converterというサイトを使用）
３）JavaScriptでJSONデータをtableタグにしてHTML出力
こんな感じです。面倒くさいですね！（笑）
１）Excelの表範囲をコピー
こんな感じの表を範囲指定してコピーします。
２）コピーしたデータをJSONデータに変換
GitHubというところに公開されている「Mr. Data Converter」という便利なデータ形式変換サイトを使います。
「便利」といってもプログラマにとって便利という意味です。
タブ区切りのデータをCSV（カンマ区切り）にしたり、プログラムで利用できる配列形式に変換したりといったことができます。
Mr. Data Converter
http://shancarter.github.io/mr-data-converter/
Mr. Data Converterの画面イメージです。
上のボックスにデータを張り付けると瞬時に下のボックスに表示されます。変換したい形式は中央の「Output as」というところで指定できます。今回は、「Output as」の設定を「JSON – Properties」にします。
今回生成したJSONデータ
[{"month":"1月","en":"January ","ja":"睦月"},
{"month":"2月","en":"February ","ja":"如月"},
{"month":"3月","en":"March ","ja":"弥生"},
{"month":"4月","en":"April ","ja":"卯月"},
{"month":"5月","en":"May ","ja":"皐月"},
{"month":"6月","en":"June ","ja":"水無月"},
{"month":"7月","en":"July ","ja":"文月"},
{"month":"8月","en":"August ","ja":"葉月"},
{"month":"9月","en":"September ","ja":"長月"},
{"month":"10月","en":"October ","ja":"神無月"},
{"month":"11月","en":"November ","ja":"霜月"},
{"month":"12月","en":"December","ja":"師走"}]
こんな感じのデータが生成されます。
これがJSON形式です。この文字列をエディタを使って「tuki.json」というファイル名で保存しておきます。
ちなみにJSONデータは、JavaScriptという言語からすると扱いやすい形式と言われています。
私からすると見づらいですね。
３）JavaScriptでJSONデータをtableタグにしてHTML出力
最後の工程です。
まずは出力するためのHTMLを作成します。
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,userscalable=no"> <link rel="stylesheet" href="style.css"> <script src="main.js" type="text/javascript"></script> <title>JSONデータを表にして表示する</title> </head> <body> <header> <h1>JSONデータを表にして表示する</h1> </header> <div id="contents"></div> <footer> <p>© 2017 mrgarita</p> </footer> </body> </html>
17行目のid=contentsで指定したdivタグはtableタグを書き込む場所です。
次にJavaScript部分です。
XMLHttpRequestを利用して１）で作成したJSONファイルを読み込みます。
読み込み終了後にtableタグやtr, tdタグなどを付加した文字列を生成してからHTMLを書き換えています。
main.js
/*
* JSONデータ格納用
*/
var data = null;
/*
* データを整形してテーブル表示
*/
function showTable(){
// 表示用tableタグを生成
var tag = "<table>";
tag += "<tr><th>月</th><th>英語名</th><th>和名</th></tr>";
for(var i=0; i<data.length; i++){
tag += "<tr>";
tag += "<td>" + data[i].month + "</td>"; // 月名を取得
tag += "<td>" + data[i].en + "</td>"; // 英語名を取得
tag += "<td>" + data[i].ja + "</td>"; // 和名を取得
tag += "</tr>";
}
tag += "</table>";
// HTMLファイルに生成したtableタグを設定（ここで表示される）
document.getElementById("contents").innerHTML = tag;
}
/*
* 起動時の処理
*/
window.onload = function(){
// XMLHttpRequestオブジェクトを作成
var tuki = new XMLHttpRequest();
// JOSNデータファイルを開く
tuki.open("GET", "tuki.json", true);
// データファイル取得完了後の処理
tuki.onload = function(){
data = JSON.parse(this.responseText); // JSONデータとしてdataに読み込む
showTable(); // テーブルに整形して表示
}
// リクエストを送信
tuki.send(null);
}
index.htmlを表示した際のイメージです。
ただのテーブルです。（笑）
でも、このデータはプログラムから扱えるので使い方によっては、「1月」と表示されたら、テキストボックスに英語名で「January」と回答する、などのクイズ形式にも応用できます。
プログラムとデータの関係、面白いですね。