8月17日に載せた旧ブログ(Seesaa)の全記事リストは、PostgreSQLで出力したTSVを動的にHTMLテーブルにしてます。今日はその基本的な仕組みを、簡単なデモで紹介。動作確認ブラウザはChrome52、Firefox47。IE10ではたぶん動きません。
元は昨年7月4日に書いた方法ですが、その時はローカルなHTMLファイルで行う前提でした。今回はWebサーバ・ネット越しの動作になります。あと若干の変更点も。
TSVをObject要素のデータとして読み込む
使うTSVは8月17日と同じ、旧ブログ(Seesaa)の全記事リストです。
» kenpg_seesaa_lists.tsv.txt(693 rows, 78.4 kB)
まず準備として、これをObject要素のデータとして読み込み、さらに内容をJavaScriptで取得できるかチェックするデモページが下記。リンクは別窓で開きます。リンク下がHTMLの中身で、外部リソースはTSVのみ。
» demo1.html
Object要素に正常に読み込まれれば ↓ こんな風にデータが表示されるはず。
JavaScriptのコンソールにTSVの中身が表示されれば ↓ 問題ありませんが、もしそうならずエラーが出たら、HTMLとTSVの位置関係からセキュリティ上JavaScriptで操作できない状況。今回の方法は使えません。
Object要素に入れたTSVを、JavaScriptでテーブル化
JavaScriptでTSVを取得できれば、後は単純なテキストとして扱えます。基本は改行とタブで行・列に分け、HTMLのテーブルタグに入れること。↓ デモページへのリンク(別窓で開く)とHTMLソースです。
» demo2.html
各行に列をセットする所は、DOM構築が面倒だったのでinnerHTMLにしました。デモぺージを開いて ↓ ボタンを押すと、テーブルが出ます。
基本はこれだけ。後はJavaScriptのテーブル各行を作るところに処理を追加して、不要列を消したり、URLをハイバーリンクにして他の列に統合したり(これが8月17日の記事リストでやったこと)自由にできます。
IE10の謎
詳細バージョンは ↓ です。8月17日の記事リストは、LocalhostでもWebでも正常にTSV→ テーブルになってました(2つ目の画像)。
ところが、最初のデモページ(単純にObject要素にTSVを読み込むだけ)が ↓ いつまでも終わらない...。Localhostで。たぶんWebでも同じだと思います。
主に違うのは、8月17日の方がObject要素をJavaScriptで動的に生成し、今回のデモはHTMLに最初から書いてあること。それが関係あるのか分かりません。全く謎です。
昨年7月4日の記事からの変更点
TSVの拡張子を.txtにしました。TSVがテキストでなく何かのアプリケーションに関連付けされていると、動かないため。Object要素のtype属性をtext/plainにしてもダメみたいです。
昨年7月4日の時はローカルHTMLファイルを直接ブラウザで読み込む想定でしたが、読めるファイルの位置が限られ、またブラウザや設定によっても違って面倒。事情がない限りローカルでもサーバを立てて行う方が便利だと思い、今回はそうしました。