2014年12月29日月曜日

偶然という神の遊び~jQueryでランダムでテキストを表示する~


どうしてもランダムで文字列を表示させなくてはいけない事件に巻き込まれてしました。

今までjQueryは、出来上がったヤツをコピペして、動かなかったら似た様な機能を探しまくる。
というかなり勉強不熱心なアプローチしでしたので、今回はかなり頑張ったのです。

似た様なコードは探せばいくらでもあるんです。
でも、希望にぴったりなモノは見つかりません。
きっと英語で書かれているサイトの中にはあるのかも知れませんが、パッと見て判断できるほどgoogle翻訳は進化してないので、日本語サイトから探します。

いくら探しても出てこない!

仕方ない。いろいろ試してみます。
htmlとcssとUWSCは結構いじっていたのでわかるのですが、他のプログラムはさっぱりです。
WPだって、ちょっと複雑になるとお手上げです。
そんな状態ですから、今までかなり敬遠していたツケが回ってきたのでしょう。

まずはランダムで表示させるコードを探します。
これはいくつも出来ました。

その中でメンテナンスしやすそうなヤツに狙いを絞ります。
よし! リロード!



なんと、勝手にPタグを生成してページの先頭に表示しやがります。
そこじゃないんだよ!
こっちの都合も考えてくれ!

まあ、自由に扱えない自分が悪いのですが。

仕方ないので、jQueryでhtmlに書き出す方法を調べます。

これを先ほどのコードとくっつけて、それっぽい所をいじると出来た!

思った場所に希望のタグで表示されました。これはいいぞ!
完成間近です。

ところがここからか長かった。

なんと、このコード10種類しかランダムに表示してくれないのです。
項目をいくら増やしても、数字をどれだけ並べても、言うことを聞いてくれません。

100個だ。100個から選んで表示してくれ!

そんなオーダーですから、このままではいけません。

普段なら、早めにあきらめて希望に沿うコードを検索するのですが、検索作戦は先ほど失敗したばかり。あきらめてコードの解析にかかります。

この部分があやしい。
一行目はどうやらランダムという意味。
二行目が問題です。理解できるのはCに何とかの5を代入する? 理解できてません。
しかし、5という数字があやしい。5ですよ。5!
5なんて関係ないでしょ。10個から選べるのに、5って。
どうも今回の事件は数字の5がキーワードになってそうです。

5から捜査します。
一番近くにある『charAt』こいつから取り調べです。
結果。この5は五番目の文字という事が発覚しました。

何? 五番目? 何が? 何の?

ますます迷宮入りです。
仕方ないので、捜査の範囲を少し広げます。次は『random()』こいつです。

調べてみると、0~1のランダムだそうです。
なんだそれ! そういうのは二択って言うんだよ! まったく勉強ばかりして世間を見てないから、頓珍漢なルールつくっちまうんだバカ!

かなり熱くなってしまいましたが、もう少し見てみると、小数点以下もランダムに出してくれるらしいです。

「小数点以下…」

ということは0.123456とか0.98765とかそういうのもアリなのか?
待てよ。さっきの5番目って、この小数点以下の並んだ数字の5番目じゃないか?
なるほど! それなら全体の桁数がいくつであっても、5番目の数字は一つで、0~9まで完全なランダムになる。

なるほど! すごいな。考えたな! やるじゃないか!

※この解釈が正しいかどうかわかりません。

となると、このプログラムをいくら手直しても、一桁しか拾ってくれないというのが良くわかりました。
仕方ないので、他の手を考えて、いろいろやっつけて出来上がったのがこちら。

idにgoという名前をつければ、そこに表示されるはずです。おススメはdiv!
合ってるのかどうかわかりませんが、一応動いたので、これでよし!

snsボタン