JavaScriptの実用例(3)

JavaScriptが、プログラム言語としてなにかまともな動作をし、それに従って面白い内容がdocument.writeするようにできると、JavaScriptを使う価値はちょっと上がります。前の回までは、お決まりの内容を書き出してくれるだけでしたからね。

たとえば、日によって違う内容を表示してくれるなんてのはどうでしょう。下のようなHTMLと外部スクリプトがひとつの例です。JavaScriptのくわしい書き方にはこの記事では触れませんが、なんとなくの雰囲気だけでも。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>日替わりメッセージのひながた</title>
</head>
<body>
<script src="./sample3.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
// これを sample3.js とします
var d = new Date();
var dd = d.getDate();
if (dd == 20) {
  document.write('給料日だ!');
} else {
  document.write('給料日がまだ来ない…');
}
document.close();

(サンプル)

こうすると、毎月20日だけは、アクセスしたときに「給料日だ!」という表示がページ内にあらわれ、それ以外は残念な表示が出てきます。JavaScriptはカレンダーを扱う機能を持っていますから、こんなことが可能なわけです。もうちょっと工夫すれば、日替わりメッセージなんかにも作り直すことができるでしょう。

または、下のようなのはどうでしょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>占いサービスのひながた</title>
</head>
<body>
<script src="./sample4.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
// これを sample4.js とします
var r = Math.random()
if (r < 0.2) {
  document.write('今日は大吉だ!');
} else if (r < 0.8) {
  document.write('今日はそこそこの日だ!');
} else {
  document.write('今日はもうだめだ!');
}
document.close();

これは簡単な占い機能です。JavaScriptは乱数を扱うことができますから、このスクリプトが実行されたときにまず0.0から1.0までの範囲を取る乱数を作り、それの値から判断して、5分の1の確率で大吉、5分の1の確率で凶、残りの確率で無難なメッセージを出すようなものにしてみました。もうちょっと豪華にいじりたくなるかもしれませんね。それもスクリプトがうまくなればいろいろできます。

ここで改めて確認ですが、これらのスクリプトはサーバー上ではなくてクライアント上、つまりお手元のWebブラウザ上で実行されます。だから、今日の日付に反応していろいろと起こるようなスクリプトは、手元のPCの時間に反応するわけです。わざと時間設定を間違えてみてから同じスクリプトを実行して確かめると、よくわかるはずですよ。

ところで、こういった方法だと、クライアント側ないしJavaScript側で知らない情報をもとにした表示ってのはできないことになります。例えば、施設の開館時刻と閉館時刻を毎日ページの一部分に表示したいときは、JavaScriptがクライアント側に渡ってしまってからいくら頑張っても、もとになる情報を知らないのだからそんなことはできません。(まあ、後に紹介するかもしれない、ちょっと高度な方法で可能にはなるんですけど。)

こういうときの解決策のひとつとして、JavaScriptを毎日だれかが作り変えてサーバーにアップする、というのもアリですが、そのうち手間がいやになってくるでしょう。

もうひとつの解決策としては、サーバー側で何かスケジュール実行できるようなプログラムをセットして、そのプログラム自身が定期的に新しいJavaScriptを生成する、という仕組みをつくることです。このプログラムは、JavaScriptでなくても構いません。ブラウザ上じゃなくて、サーバー上で動くんですからね。

例。たとえばこのプログラムはpythonで書いています。あと、部分的に疑似コードですので、実際には動作しません。

# JavaScriptを自動生成するプログラム。毎日午前1時に実行されること。
from datetime import datetime, timedelta

# データベースとかから、今日の開館時間情報を得る疑似コード
(open_today, close_today) = get_schedule(datetime.today())
# 同様に、翌日の開館時間情報を得る疑似コード
(open_tomorrow, close_tomorrow) = get_schedule(datetime.today() + timedelta(1))

script = """
document.write('本日の開館時刻は %s、閉館時刻は %s です。');
document.write('翌日の開館時刻は %s、閉館時刻は %s です。');
document.close();
""" % (open_today, close_today, open_tomorrow, close_tomorrow)

# JavaScriptの書き出し
open('/some/path/schedule_include.js', 'w').write(script)

できあがるJavaScriptは固定の内容を出力するだけのものなんですが、それ自身が毎日違うものに入れ替わるんですから、これでもいいわけです。サーバー側は、例えばデータベースなんかを持っていて、毎日何を出せばいいかという情報を知っているわけですから、それをJavaScriptに託してブラウザに送り届けるというイメージになりますね。

f:id:yamatt2:20131025210754j:plain

これを利用するHTMLは、まあそれほど今までと変わりませんし、実際に動くサンプルもありませんから、省略します。

この方法は、ある程度サーバー管理の権限がある人に限られるんですが、条件にあてはまれば、使えるときがあるでしょう。