次のレッスンのJavaScriptで作るスロットマシーン (全7回)に挑戦したのだがレベルが急に上がっていて、ほとんど理解できなかった。ここは一度、最初のレッスンに戻ってみる。どうやらプログラミングは既存のプログラムを改造する経験を積むことでもスキルが上がるらしいので、自分なりにチャレンジしてみた。
おみくじプログラムの改造
配列の中身を増やすだけでは芸がないので、いくつか変えてみたい。
修正、追加する機能
- ランダムで生成される要素をおみくじとは別に、おみくじに対応するコメントも追加する
- おみくじ表示を画像にする
日頃からQiitaで活動されているプログラマーの方々には呼吸するくらい簡単なことかもしれませんが、この2つには苦しめられました。現在進行形です。
技術がともなってなかった
JavaScriptでつくるおみくじを参考にすれば作れるかと思ったのだが、そのレッスンではランダムで作成される要素同士は連携しておらず、それぞれがランダムで表示されるため参考にはならなかった。要素A（おみくじ）と要素B（対応するコメント）を連携させるにはどうすればいいのか。要素Aの結果を要素Bに監視させればいいような気がするが、具体的にどうすればいいのか発想がない。とりあえずスルー。
画像の表示はどうするの？
とりあえずローカルでテスト。ボタンを押しても何も表示されない。おかしい。どうやら<p>タグにidを振っても表示されないようだ。そこでデフォルトとして<img>を置いてみる。動いた。しかし、パスがそのまま表示されてしまう。画像を置き換えるにはどうすればいいのかわからないのでググる。どうやらdocument.getElementById('xxx').srcと書けばいいらしい。innerHTMLだと文字列という認識になるのだろうか。ひとまず壁を乗り越えた。脳みそをフル回転させているので頭がボーっとしてくる。だが、まだまだ道のりは長かった。
<p>にidを振るのをやめ初期値として画像を置いてidを振った。
<div class="stage">
<p class="result_img"><img src="http://xxx" id="result"></p>
</div>
GIFアニメのループの問題
画像をぽんと置いてもつまらないのでGIFアニメを作り、それを表示させることにしたのだがループが止まらない。調べてみると、どうやらGIFアニメを作る段階で設定するらしい。しかし、どんなに目をこらしてもそんな設定はない。これはソフトの問題なので仕方がない。次へ進もう。
JavaScriptを動かす場所と画像置き場
Qiitaではソースは書けても動かすことができないので無料で使えるWordPressを利用することにした。しかし通常、WordPressではJavaScriptを動かすことはできないらしい。そこでプラグインを導入しようと考えたのだがWordPress.comではプラグインの利用が不可だった。途方に暮れているとjsdo.itを見つけた。ここならば、煩わしい作業もないだろうと思っていたのだが画像をアップロードする場面で問題が起きた。どうやら容量に1M程度の制限があるらしい。GIFアニメは1つ1.5Mほどあるので、ここも断念。早くJavaScriptの勉強がしたいのに、なぜ関係ない部分で苦労しているのか笑ってしまう。すると同じようなサービスでjsbinを見つけた。しかし今度は画像のアップロードそのものができない。
こういう使い方はNGなのかもしれないが、とりあえずWordPress.comに画像をアップロードしておいてjsbinから参照させてみた。先輩方はいったいどうやっているのだろうか。満身創痍でプログラムの動作を確認。今日は疲れたのでここまでで終了。
問題点
要素Aと要素Bの連携
お互いをランダムで表示させては連携が取れないので要素Aに対してだけランダム作成をさせ要素Bはそこにくっつけたい。そんなことができるのだろうか。せっかく思いついた機能なので実現させたいが、どうすればいいのかアイデア全く浮かばない。
ボタンを押すたびにJavaScriptが動いてしまう
一度押したらページをリロードしないと動かないようにしたい。何度もクリックできてしまうのは格好悪い。更に言うと占いなので1日に1回だけ動かせるようにしたい。IPアドレスが変わったら、うんたらかんたらというところまで掘り下げるつもりはないが可能ならば実現させたい。今は手も足も。
総評
疲れた。プログラミングは本当に難しい。仕事で使う脳みそとは全く違う部分を使っている気がする。だけど、これが超楽しい。ああしたい、こうしたいというアイデアを考え、動かないプログラムに四苦八苦させられ、それを乗り越えて動いたときの喜び。積み木のおもちゃで遊んでた子供の頃を思い出した。
今回、挑戦したプログラムは下にあります。GIFアニメのため、ボタンを押すと一瞬読み込みます。気長に待ってください。