7日目:🍜南草津駅周辺ラーメンガチャ🍜作った

はじめに

おはこんばんちは。やぎちゃんです。メリクリですね。みなさんいかがお過ごしでしょうか。只今大阪府吹田市の万博記念公園にて、Wonder Experience イルミナイト万博「永遠の万華鏡」が開催されています。70mの巨大な太陽の塔がビームペインティングで変身します。ぜひご覧ください。以上、太陽の塔アンバサダーやぎちゃんからの宣伝でした。

ラーメンに囲まれた大学

突然ですが、我らが立命館大学 びわこ・くさつキャンパスの最寄り駅は南草津駅です。そして、そこから大学までに向かうまでにラーメン屋さんが相次いであります。そんなラーメン屋さんに囲まれた学び舎で日々勉学に励んでいる僕達ですが、ラーメン屋さんが多すぎて今日はどのラーメン屋さんにしようかと迷うことがあります。

参考: 南草津駅と立命館大学とラーメン屋さん。Google Maps より。

南草津駅周辺ラーメンガチャ

さて、人類は原始から人知の及ばぬようなことがあったり、どうしても話し合いで決められないことがあったりすると、くじ引きやおみくじを用いて神様に頼ってきました。そこで、僕らもそれにならってラーメン屋さんのガチャを作ればいいのではないかと思い立って作ったのが……。

南草津駅周辺ラーメンガチャです。

ボタンを押すとラーメン屋さんがランダムに出てきます。

ラーメン屋さんをぐるぐるするところは overflow: hidden にした要素の中に widthheightをそれぞれ100% にした要素を入れています。ボタンが押されると、ランダムな要素までSweet Scroll というスムーススクロールライブラリを使ってスクロールするという仕組みです。

button.addEventListener("click", () =>
  scroller.toElement(
    gacha.children[Math.floor((gacha.children.length - 1) * Math.random()) + 1]
  )
);

GitHub Pages を使ってデプロイしました。リポジトリにREADME.mdがある場合は index.htmlまで入力しないとページが表示されないのでREADMEを消しちゃいましょう。僕はこれで 30 分溶かしました。

その後、ラーメン屋さんの追加依頼や閉店など、いくつかプルリクエストが来ました。これで立派なオープンソースソフトウェア!

みなさんからのありがたいプルリクエスト

おわりに

Web は作成からデプロイまで小さなしょーもないアプリを作るときもやりやすくていいですね。みなさんもぜひ南草津に立ち寄られた際は南草津駅周辺ラーメンガチャで行くラーメン屋さんを決めてみてください。

Twitterでフォローしよう

おすすめの記事