jQuery と JScript を使って IE11 限定で動作するサーバーレス掲示板を作る

どこかのプログラミング講師が「なんか最近やたらと DB であれこれデータ管理すること多くない？ファイルの読み書きってのも場合によっては有効なことがあるんだけどなぁ」と言ってたのを思い出して、サーバがない環境でもファイルの読み書きができれば、チャットだとか掲示板とかが作れるんじゃないかと思ってやってみた。

Scripting.FileSystemObject でファイルが読み書きできるのを利用して、サーバーレスの掲示板を作ってみる。

DOM 操作は jQuery・ファイル読み書きは JScript

厳密な区分けが分かっていないが、WSH に分類される処理は JavaScript ではなく、JScript と呼ぶのが適切かと思っている。ただ、いずれにしても HTML に埋め込んでしまえば JavaScript として普通に使えるので、DOM やイベントの操作は jQuery で行いつつ、ファイルの読み書きは先述のとおり FileSystemObject を使ってみる。

JavaScript はこんな感じ。

// FileSystemObject 用定数
var ForReading = 1;
var ForWriting = 2;

/** BBS のデータファイルのフルパス */
var BbsFile = "C:/BBS/bbs.txt";

/** ファイルの読み込み */
function loadText() {
  var fso = new ActiveXObject("Scripting.FileSystemObject");
  var bbs = fso.OpenTextFile(BbsFile, ForReading);
  return bbs.ReadAll();
}

/** 投稿内容のロード */
function load() {
  $("#data").html(loadText());
}

/** 投稿 */
function post(name, msg) {
  // 既存の書き込み内容の取得
  var data = loadText();
  
  // 投稿内容の生成
  var postData = "<dt>" + name + "</dt>"
               + "<dd"> + msg  + "</dd>" + "\r\n";
  
  // 投稿内容 → 既存の書き込みの順に出力し直す
  var fso = new ActiveXObject("Scripting.FileSystemObject");
  var bbs = fso.OpenTextFile(BbsFile, ForWriting);
  bbs.Write(postData);
  bbs.Write(data);
}

/** jQuery */
$(function() {
  // 初回読み込み
  load();
  
  // 投稿・再読み込み
  $("#post").on("click", function() {
    post($("#name").val(), $("#msg").val());
    load();
    $("#msg").val(""); // メッセージは投稿後空欄にする
  });
});

これに対応する HTML はこんな感じ。

<h1>BBS</h1>
<p>
  <input type="text" id="name" size="10" value="" placeholder="Name">
  <input type="text" id="msg"  size="50" value="" placeholder="Message">
</p>
<p>
  <input type="button" id="post" value="Post">
</p>
<dl id="data">
</dl>

つまり、1回の投稿ごとに、bbs.txt には以下のような行が出力される。

<dt>Neo</dt><dd>こんにちは！</dd>

これを dl#data 内に展開してやることで、書き込み内容を表示させるというワケ。

ActiveXObject を使っているので、例によって IE11 限定だが、ローカルでサーバを構築せずに簡単に掲示板っぽいことをするにはコレで十分かな。