弊ブログでは、PC版のヘッダー内部に
<h2 id="blog-description">咲-Saki-のブログです。</h2>というブログ説明文を表示する領域(h2要素)があるので、このスペースを利用しています。
では以下、ソースコードです。
無名即時関数
;(function(){
JavaScript の無名即時関数を使います。この構文だと、結果的にフリーエリア以外をいじらなくて済むので便利です。
var msg = document.getElementById('blog-description').innerHTML;
最初に言ったブログ説明文のオブジェクトから、文字列を取得しています。この文字列に誕生日メッセージをつけ加える仕様になります。
内部関数の定義
function loadText(fileURL){
var xmlHttp;
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", fileURL, false);
xmlHttp.send(null);
return xmlHttp.responseText;
}
fileURL という変数に格納された URL のファイルを開き、中身のデータをテキスト文字列として返す関数を定義しています。ここで使っている XMLHttpRequest() という API が一部ブラウザでは非推奨(動くことは動く)なので別のやり方があればいいんですが…
いちおう D3.js というライブラリを使えばファイルの読込から配列の生成までしてくれるのですが、このためだけに使うにはちょっと重いんですよねえ。
function _makeName(dataO){
var name1 = dataO[NAME1], name2 = dataO[NAME2],
name3 = dataO[NAME3], name4 = dataO[NAME4];
var name, _br;
if(name1[0]=='@'){
_br = name3.length && name4.length ? '・': '';
name = name4 + _br + name3;
} else{
name = name1 + name2;
}
return name;
}
特定のキャラクターのデータオブジェクトを引数として、フルネームを返す関数です。欧米系の名前の場合はカタカナ読みの姓名をひっくり返して「・」で区切るようにしています。
アルファベットで表示したい場合は、14・15行目を
_br = name1.length && name2.length ? ' ': '';
name = name2 + _br + name1;
とすればOKです。
変数・定数の定義とデータ取得
var DefaultItemId = [NAME1 = 0, NAME2 = 1, NAME3 = 2,このプログラムで使うデータファイルは、現在絶賛開発停滞中の咲-Saki-データベースの CSVファイルをそのまま使っています。
NAME4 = 3, BIRTHDAY = 6, TITLE = 11];
そちらとの互換性や拡張性確保のためにややこしい書き方をしていますが、ここは単に
var NAME1 = 0, NAME2 = 1, NAME3 = 2, NAME4 = 3,と書いて問題ありません。
BIRTHDAY = 6, TITLE = 11;
var _DN; var _Data = new Array();_DN は全データ数、_Data は全データを格納する変数です。
変数の頭にアンダーバーをつけるのがカッコいい───そう思っていた時期がありました。
var source = loadText('http://humotomiti.blog.jp/test/sakiData.csv').replace(/\t/g, '');
_Data = source.split('\n');
上で定義したファイル読込関数 loadText() にデータの入っている CSVファイルの URL を渡し、テキスト形式のデータを source という変数に格納、ついでにタブ文字があれば消去。これを改行文字を区切りとして、 _Data に配列として格納します。
_DN = _Data.length;ここ、
var _DN = _Data.length;としてれば22行目要りませんでしたね。
まあこのままにしておきますが。
for(var i in _Data){
var Row = _Data[i].split(',');
_Data[i] = Row;
}
_Data[0],_Data[1]... と一行ごとにデータを取り出し、それぞれについて更に項目の配列になるよう分割します。
var ymd = new Date();
var happy = '';
var title = '';
var ts;
var _today = ('0'+(ymd.getMonth()+1)).slice(-2) + '/' + ('0'+ ymd.getDate()).slice(-2);
new Date()で現在日時のオブジェクトを取得、getMonth()と getDate()で今日の日附を取得→咲-Saki-データベースの書式に合う文字列に変換→_today という変数に格納します。happy は今日が誕生日の人(たち)の名前を格納する文字列変数。
title と ts は敬称の振り分けに使う一時変数です。
データ照合とメッセージ生成
for(i=1;i<_DN;i++){
if(_Data[i][BIRTHDAY] == _today){
if(happy.length) happy += title+ '、';
ts = parseInt(_Data[i][TITLE]);
parseInt()という関数で、敬称データを整数に変換します。これをやらないと下の switch文で数字を'1'とか'2'とか囲まないといけないのが地味に面倒なので。
まだ四つしかないけど、後々増やすことも考えて、です。
switch(ts){
case 1: title='先生';break;
case 2: title='先輩';break;
case 3: title='くん';break;
default: title='さん';break;
}
happy += _makeName(_Data[i]);
}
}
以上 for文でした。このループで happy という変数に祝うべき人の名前が入っています。
今見てて思ったんですが、_makeName()関数で敬称もつけて返せばよかったですね…。
あと、同じ誕生日の人が複数いる、ということを想定せずに書いた当初のコードがベースになっているので、title(敬称)をつけるタイミングとか、アホな書き方になっているところが多々あります。
msg += happy.length? '今日は' + happy + title + 'の誕生日です。おめでとうございます！':'';この A ? B : C;(A なら B だよ。じゃなきゃ C)という三項演算式はとても好きな書き方です。
短くて、スッキリしているので。
ここの happy.length? の意味は、「happyという文字列に長さはあるかい？」
長さがあるなら誰かが誕生日なのでおめでとうメッセージを、長さがないなら誰も誕生日ではないので空の文字列を、msg につけ足します。
msg += ... の「+=」を、NS は「足すのは」と読んでいます。
「-=」は「引くのは」、「*=」は「掛けるのは」、「/=」は「割るのは」
日本語っぽくて分かりやすいと思うんですが、各種チュートリアルとかでは聞いたことがないので、広めたいと思います(思うだけ)。
document.getElementById('blog-description').innerHTML = msg;
})();
最後に表示領域の innerHTML というプロパティにこの文字列を指定してやると、メッセージが画面上に表示されます。ちなみに innerHTML というくらいなので、文字列の中に HTMLコードを書いてやるとちゃんと反映されます。
実装
二つの方法。- 上の JavaScript コードをテキストエディタにコピペして、適当な名前(例：who-of-birthday.js)でアップロードし、HTML の<head>内に次のように書き込む。
<script src="http://・・・/who-of-birthday.js"></script>
- 上の JavaScript コードを<script type="text/javascript"></script>で括り、フリーエリアに貼りつける。
前記事と同様、いちばん簡単なのは、- 右クリックでこのページのソースを表示
- WHO OF BIRTHDAYで検索(リマークしてあります)
- その部分をフリーエリアにコピペ
コメント