諏訪野ヒロの創作・制作活動記

【Web】うちゅーねこタイマー

【Web】うちゅーねこタイマー #1

　元々、３年くらい前にHTMLとCSSはほんと少しだけスマホでやっていて、HTMLやCSSについて調べていると勿論Javascriptについての記事も出てきましたが、なんだか難しそうということであえて避けてました。その後、１ヶ月位は頑張ってHTMLとCSSをやっていましたが、スマホだと物凄く書きにくく、その後、スマホで書くことはなくなりました。その後、情報系の学校に進学し、学校の授業の一環でC言語の基礎部分を勉強しました。といっても、授業の進みがあまりにもおそすぎたので、９割以上は教科書を見ながら独学でしたが。プログラム上で、計算機や、２次方程式を使用したキルヒホッフの法則という手計算でやるとかなり面倒な計算をプログラム上で計算してくれるようにしたりと、あくまで文字と少しの入力だけのものを作っていました。というより、画像等の使い方が分からなかっただけですが。その後、緊急事態宣言により学校が休校になった頃、ちょうど自分のPCを買い、自粛期間の暇な時間つぶしとして、「いきのこれ！社畜ちゃん」という漫画をよんでいました。その漫画の最後には、ちょっとしたプログラム体験ということでしょうね、軽いプログラム講座みたいなコーナーがあり、それを見て、「暇だし少しやってみるか」と思ってはじめました。そして、その本に描いているものを全く同じように写して動かしてみました。すると、ちゃんと動いたんですよ。いや、当たり前のことなんですがね。

　これをきっかけにもう少しやってみるかと思って、なにか作ろうと思いました。ちょうどその頃、僕が一番好きなイラストレーターさんであり、VTuberでもある「うちゅうねこ」さんが、「カップ麺タイマー」という３分程の動画を投稿してて、「これ、３分と言わず、何分にでもできたら便利じゃないか」と思って、タイマー制作をすることにしました。

　しかし、その時はまだ何も分からず、ただ漫画の最後に書いていたものを写しただけの経験で何をどう書いたらいいのかからすら全く分からなくて、ネット上でサンプルプログラムが転がってないか調べていました。そしたら、キッチンタイマーをJavascriptで作ってみたというページがサンプルプログラムを公開してくれていたんですね。そこのコードをお借りして、最初は全文コピペしてどこで何をしているのかから把握しました。そして、一部C言語とも似た部分があったこともあり、なんとなーくどこで何をしているのかを読み取って、そこから、そのコードを改造していきました。作りたいタイマーの元は、３分間、１分ずつそれぞれ別のことをずっと口ずさんでいるので、タイマー動作中にその音声が流れること、お借りしたサンプルプログラムは、タイマーの時間設定が秒数指定のみで非常に使いにくかったので、直感的にわかるようなUIをHTMLとCSSを使って作りました。勿論、３年前にやっていたものの知識が多少役には立ちましたが、焼け石に水程度のものなので、実質最初から勉強したようなものでした。

　また、どうせブラウザベースで作っているのだから、PCだけじゃなく、スマホにも対応させようと、またまたネットからサンプルプログラムをお借りしてきて、それを作っているものに合うように改造して付け加えて、なーんてこともしました。

　そして、様々な機能を付け加えていきながら、なんとかそのタイマーは完成することができました。そして、タイマー動作中に流している音は、実際のYouTubeにうちゅうねこさんが投稿していた動画から切り抜いたもので、タイマーの中にもうちゅうねこさんが描いたイラストを使用していたので、うちゅうねこさん本人に確認をとって、公開しました。(現在でも公開中です)

　...と、ここまでのことが、どれくらい時間がかかったかというと、１日です。朝の9時くらいに、タイマー作りたいなと思い、そこから作り始めて、多少昼食等の休憩をはさみながら、17時くらいには、動くようになり、21時ころには一応公開できるレベルにまで達す事ができました。