日本語データが不可欠
本家、ことのはたんごでも、日本語データを活用している。これは、ゲーム内で「だだだだだ」と入力しても受け付けず、「だいどころ」と意味のある言葉を入力したときのみ受け付けるようにするために必要だ。また、正解の単語もデータから引っ張ってきているらしく、そこでもデータが必要とのこと。
実際には、「入力を受け付ける単語」と「正解とする単語」は違うようで、たとえば「ろっぴゃく」と入力したい気持ちはあるが、それを正解にされてもなぁ・・・という単語への対応をしているらしく、そうした気配りができることについて感嘆せざるを得ないが、今の私にはそういう仕様を実装する能力を持ち合わせていないので、そこまで考える必要はないだろう。
まずはそういうデータをどのように利用するのかを知りたい。軽く調べただけでは全然分からず、「なんだか難しそうだ！」という感想。一筋縄ではいかないなぁ。
ヒントを増やして遊びやすく
５文字の言葉を当てましょう。ひらがな５文字です。
言葉も位置も正しい文字は '赤字' で表示されます。
位置は違うが正解の文字列に含まれている場合は '緑字' で表示されます。
位置が違っても、正解にその文字が含まれていたら、さらに色をつけるようにしました。より、本家に近づいています。これがあるとかなり遊びやすいですね。それから、本家に近づいたといえば、入力した文字が正しいかをチェックする際、一文字ずつ時間差で表示するようにもしています。調べるのに少し手間がかかりましたが、その分、コールバック関数など新しい言葉を覚えることができました。そして何より、ちょっと表示の仕方を変えるだけで、問題を解くときのわくわく感がアップしました。
ほんのちょっとの工夫なんですけど、これが大事なんですね。本業で授業を行うときにも生かせそうです。
現状だと、辞書に載っていない言葉でなくても入力できたり、文字数制限がなかったりするので、「あいうえおかき・・・」と最初に入力すればクリアは簡単です。
ただ、プログラムの不十分さ、遊びにくさではなく、攻略の仕方に気が向くということは、徐々に完成度が高まっているということでしょう。
５文字当てクイズ
５文字の言葉を当てましょう。あっている部分は赤字で表示されます。
いよいよ、ことのはたんごっぽいものを作り始めました。
５文字をあてるクイズです。エンターキーでも動きますので、ボタンを押す必要はありません。
それにしても・・・ことのはたんごを見れば見るほど、プログラミングに詳しい人が作っているんだなぁ・・・と思える。作りが丁寧。こういうものを使っていますよ、こういうものに配慮していますよ、というところまできちんと説明されているのは本当にすばらしい。
こういう表記はよく見かけはするんだけど、自分がそういうところまで配慮できるかと言われれば、全然できそうにない。とにかく面白ければいいやろ、みたいなふうにやってしまいそう。いや、今まさに、やっている。
本気でリスペクトして真似するなら、そういう丁寧な部分も真似できるようになりたい。
テキストボックスに入力
猿の名前と言えば？
あ
い
う
ボタンを押したら文字が入力されるものを作りました。いや、作ってもらいました。
AIって本当に便利すぎて、何も考えなくてもできちゃうのがいかん。本当にいかん。良すぎていかん。
５０音
ア
イ
ウ
エ
オ
カ
キ
ク
ケ
コ
サ
シ
ス
セ
ソ
タ
チ
ツ
テ
ト
ナ
ニ
ヌ
ネ
ノ
ハ
ヒ
フ
ヘ
ホ
マ
ミ
ム
メ
モ
ヤ
ユ
ヨ
ラ
リ
ル
レ
ロ
ワ
ヲ
ン
５０音表を作ってみた。
- マウスオーバーで、図の背景色が薄い紫色にかわる。
- クリックで、図の背景色がオレンジ色にかわる。
という、それ以上の機能はまったくない、見た目だけのもの。ブログに載せると美しく並ばなくなってしまうが、まぁいいや。
これをほぼ１００％ＡＩが作ってしまうのだから、驚き。
こっちはプログラミングの技能を習得しようとしているのに、気が付けばＡＩへの指示が上手になっているだけという。だからといってすべて手作業で作ればいいのかというと、効率が非常に悪いためにその判断は正しいとは思えない。
あんまり苦労していないからか、学んでいるとは思えない。
とはいえ、こんなに粘り強く支援してくれる教師はＡＩくらいなものだろうから、ＡＩはありがたい存在だ。
このタイミングでプログラミングを学ぼうというのは、もしかしたら、最適なタイミングだったのかもしれない。
将来的に自分がどこまで続けることができ、どこまで習得できるのかは分からないが、このタイミングにこういうことに取り組んだという事実はもう変わらないわけだから、損はしないよな。
クイズは一応の完成
前回のクイズを改善しました。
パンはパンでもメロンのカタチをしたパンってなーんだ？
エンターキーでも動作します。ESCキーで消去します。
前回に比べて
- ボタンを、標準のボタンではなく、円に変更。円にカーソルを合わせると、円の背景色が変わるようにした。
- テキストボックスとボタン（円）を横並びになるようにした（なぜかブログに載せると縦に並んでしまっていた）。
- ESCキーを押すと、文字が消去されるようにした。
ちょっとした変更ですが、円をクリックしたり、円の背景が変わったりするところは、今後もよく使うと思います。
トップ画面で記事を表示したときと、記事を個別で表示したときで、微妙に動きが違う。
たとえば、１つ前の記事では、トップ画面ではクイズの正解を判定しないが、個別表示だと「正解！」などと正しく表示される。
今回の記事だと、トップ画面だと文字色は黒のみだが、個別表示だと、「正解！」は青文字（こちらが正しい仕様）で表示される。
これははてなブログの仕様が影響しているのかもしれない。今のところは解決する方法を持たず、その解決策を調べることはjavascriptの上達とは関係が深くないので、とりあえず後回しにします。
初めての一歩
なぜかトップ画面では正しく動かないので、この記事の題名をクリックして、記事を個別に表示してください。
パンはパンでもメロンの形をしたパンってなーんだ？
３０代も後半に差し掛かれば、否が応でも仕事の要領はつかめてくるものだ。
１０年以上働けば、どんな人だって、社会人になったばかりの時期と比べて出来が変わらないということはあるまい。
もちろん人間関係など外部の影響を受けて、浮き沈みすることはあるだろう。しかし純粋に能力が下がるということは珍しい。
世間で多忙だと言われがちな教師だって、それは同じだ。
仕事に慣れ、暇であるとは言えないが、忙殺されているとも言い難い。
このまま現状維持しようとすれば、見事に現状維持できていくだろう。
そんなふうに生きていられることは幸せであることも事実だが、果たしてそんな人生でいいのだろうか。自分がそんなふうで、自分や学校の子どもに「自分のやりたいことを一生懸命やれ、挑戦することを恐れるな」などと言えるのだろうか。途中で笑ってしまうかもしれない。いや、笑われてしまうかもしれない。
よし、新しいことを始めよう。
まずは、javascriptだ。
というわけで、このブログができた理由でした。
これまでは、マクロ（VBA）とか、pythonとかをちょっとだけ勉強したことがあります。マクロは、仕事に生かすことができ、今でもだいぶ仕事時間を短縮できています。でも、それで満足してしまっているのが現状です。
そんな私が、なぜ今回javascriptなのかというと、理由が２つあります。
- 環境を整えやすい
- ことのはたんごのようなゲームを作りたい
環境を整えやすいというのは結構重要で、環境づくりで挫折することがないというのはかなりの安心材料です。マクロもそうですね。初心者でも入りやすいです。
ことのはたんごは、面白すぎる！シンプルなのに、ついやってしまう中毒性がたまらない。ゲーム作りというと、プログラミングも、絵も、音楽もできなければならないイメージを持っていたのですが、そうとは限りませんね。工夫次第で、多くの人を楽しませることができるのはすばらしいことだと思います。
リスペクトを持って、「ことのはたんごのようなものを作る」ことを目標に、がんばっていきます。
今回公開したものは、なぞなぞのようで、なぞなぞでは決してないクイズです。
何気に、入力後にボタンを押さなくてもエンターキーでも動くようにしています。
javascriptの解説をされているwebサイトや、AIの力を借りて作成しました。
じゃあ、自分で書いてないやん！う・・・まぁ、そう。書いていない。
でも、最初はそんなもんだと思う！効率よく勉強ができているのだと、前向きに捉えたい！
手本のコードについて細かくAIに質問しながら、ちびちびと理解を深めています。
このブログでは、そんなちびちびした歩みを報告していきます。
そんなすごい成長はないかもしれないし、今回みたいにAIに頼り切ったものを公開するかもしれないけれど、とにかく歩んでいますよ、ということで。
今日は、その初めての一歩です。
小さな一歩が大きな一歩だ！
