先日、公開した【ふじねこ占い】珍宿の父。
【別Windowで開きます】
「後日、種明かしします」とお知らせしたので、今回はバックステージをお見せします。バックステージと言うと、ヴィジュアル系のバンドメンバーがメイクなどしている様を思い浮かべる方もいるかと思いますが、実態は私がゲラゲラ爆笑しながらキーボードを打っていただけなので、サイン色紙を手に覗かれた方は、どうぞお引き取りいただくようお願いいたします。
まずソースのキャプチャを提示します。対象の占いの部分を解説していきます。見づらい場合は末尾にソースコードを貼っておくので併せてご確認ください。占いと関係ない部分のソースは…言及しておきたい箇所もありますが、リクエストがあったらにしましょうかね。
それでは解説していきます。
・赤枠:「JavaScriptのプログラムをここで回すぞ」と宣言します。
<script language="JavaScript"></script>
・青枠:「ChinjyukuNoChichiの関数をここで実行するぞ」と宣言します。名前を見てもわかる通り関数名は任意の名前でOKです。
<!-- function ChinjyukuNoChichi(){ }// -->
・緑枠:「これから"UranaiParts"という名前の新しい配列を作成するぞ」と言っています。配列の中身は順に「"お風呂場で、","ふじねこに、", "天地がひっくり返るような勢いで", "応援をする", 」です(下の2行も同様)。
UranaiParts = new Array(
"お風呂場で、","ふじねこに、","天地がひっくり返るような勢いで、","応援をする",
"電車の中で、","鼻の下にホクロのあるロン毛の男性に、","煮え切らぬ様子でモジモジと、","演説をぶってみる",
"書斎で、", "PCの画面に、","ひたすらクールにカッコつけて、","下ネタ話のひとつでもしてみる",
);
【余談】
この配列の中身を作る作業に腹筋がどうかするほど笑ってました。しかし私では少々力不足かも、とも。ブロ友さんで上手そうな方がいらっしゃるので、お誘いすればよかったかもしれません。
・紫枠:ここがミソです。以下詳細を。
[Lines = 3; ]
「3」は緑枠内の戯言の行数を設定します。行数を増やせば増やすほど出る確率が低くなるので占いらしくなります。今回はプレゼン用に3行に削りましたが、実際の珍宿の父では43行も馬鹿なことを書いています(笑)。
[Where = Math.floor(Math.random() * Lines); ]
[Math.randam()]は0以上1未満のランダムな数値を返してくれますが、これに[*Lines]を追加することで、上で設定した行数「3」を乗算する、つまり0以上3未満のランダムな数値を返してくれます。Math.floorは小数点以下切り捨てです。
つまり、合わせ技で整数0、1、2のどれかを返してくれます。
この占いは、【どこで】【誰に】【どのように】【何かをする】の4部構成になっています。「ToWhom」「How」「Do」にも同じ構文を書き、整数0、1、2のどれかをランダムに返させます。
Lines = 3; // 上記配列の行数
Where = Math.floor(Math.random() * Lines); //全行の中でどのWhereを使うか【どこで】
ToWhom = Math.floor(Math.random() * Lines); //全行の中でどのToWhomを使うか【誰に】
How = Math.floor(Math.random() * Lines); //全行の中でどのHowを使うか【どのように】
Do = Math.floor(Math.random() * Lines); //全行の中でどのDoを使うか【何かをする】
document.write(UranaiParts[Where*4] , UranaiParts[ToWhom*4+1] , UranaiParts[How*4+2] , UranaiParts[Do*4+3]);
ここで補足事項です。緑枠の戯言のそれぞれのパーツには配列番号(下図緑数字)が割り当てられています。
これを踏まえて「document.write」で書き出しを行います。
[document.write(UranaiParts[Where*4] , UranaiParts[ToWhom*4+1] , UranaiParts[How*4+2] , UranaiParts[Do*4+3]); ]
「Where」【どこで】は、UranaiParts[Where*4] で書き出します。Whereの数値は0、1、2のどれかですから、「*4」で「4」を乗算した0、4、8のどれかがチョイスされ、書き出されます。補足事項の図の緑数字と照らし合わせて下さい。すべて、【どこで】になっています。
「ToWhom」【誰に】は、UranaiParts[ToWhom*4+1] で書き出します。「Where」の場合と異なるのは、「*4+1」の部分ですね。0、4、8のどれかに「+1」するので、補足事項の図の緑数字1、5、9のどれかの【誰に】が書き出されます。
「How」【どのように】、「Do」【何かをする】も同様の理屈です。
そして、ランダムに選ばれた【どこで】【誰に】【どのように】【何かをする】がつながった状態で書き出されます。
・水色枠:「上記で書き出したデータをHTMLファイル上のここに出力するよ」と言っています。
<script language="JavaScript"><!--
ChinjyukuNoChichi();
// --></script>
長くなったのでもう一度ソースのキャプチャを貼りましょう。水色枠は「本日の占いです!」と「と、今日貴方にとても良いことが起こります!」の間にありますね。
実際のファイルはどうでしょう?ね、「本日の占いです!」の後に、ランダムに出力された文言が確認できました。
キャプチャじゃ証拠にならないので、下記のボタン(先日公開の43行ver.)も確認用に貼っておきます。ちなみにですが、開いた別Windowのブラウザを再読み込みをすると、新しい占い結果が表示されます。何度も繰り返すと爆笑必至です。神聖な占いなのに実に不謹慎だ、ウン。
【別Windowで開きます】
今回は非常にふざけた文言を登録することで、笑って元気になるための爆笑占いとしましたが、もう少しシリアスにもできますよ。「方角」「ラッキーカラー」「ラッキーナンバー」などを項目名に盛り込めば、占いとしてリアルさが増します。
…身も蓋もない話で、書いてて嫌になっちゃいますね。もしも本当に占い師になるなら、こういう子供だましは一切せず、しっかり厳しい修行を積んでからでないとだめですね。にこにこ笑ってるおじいちゃん、おばあちゃんが来るんですよ?ちゃんとしたのでないと絶対に嫌ですね。
最後にプレゼン用の3行バージョンですが、ソースを貼っておきます。JavaScriptの勉強や、楽しい言葉遊びを作る用途などに使っていただければ幸いです。
ちなみにアメブロにこれをそのまま貼っても、「禁止タグが含まれています」と出て、記事の作成ができません。ほとんどのタグが禁止タグなので、アメブロ以外の場所にHTMLファイルを置く必要があります。
以上になります。
《SourceCode》