本記事はクソアプリ Advent Calendar 2020の20日目の記事です。
19日目はampersandさんによるブラウザに弾幕を流して匿名チャットできるやつを作ったでした。
はじめに
年の瀬ですね。一年の締めくくりや大掃除をしている方も多いのではないでしょうか。
ところで、みなさんは年末には何を聴いて年を越しますか？
そうですね、**「ultra soul」**です。
そんな全人類の願望がこれです。
「ｳﾙﾄﾗｿｳｯ ＼ﾊｧｲ／」で年越ししたい。
しかし、そのタイミングはシビアで、残念ながらチャンスは年に一度しか来ないのです。
そこで、私は来たる12月31日に向けて、**「ｳﾙﾄﾗｿｳｯ ＼ﾊｧｲ／」**を練習するためのアプリを作りました。
ｳﾙﾄﾗｿｳｯ ＼ﾊｧｲ／を練習するアプリ
使い方
- ページに表示されている時刻を見ながら、タイミングを合わせて「再生する」ボタンをクリック。
- 格好いい稲葉さんと松本さんを眺めながら、この一年に思いを馳せます。
- そして輝き始めたら準備をし、**「ｳﾙﾄﾗｿｳｯ ＼ﾊｧｲ／」**でテンションを上げて叫びます。
- その瞬間に年を越せたらあなたはウルトラソウルです。
一応ランキングも付いています。
使用技術
JavaScript
本当はReactとかTSの勉強がてら使いたいとか考えていたのですが、YouTube Iframe周辺のあれがいまいちうまくいかなかったためこうなりました。
無限に広がるDOM操作で死ぬかと思いました。
YouTube Iframe
音楽サービスのAPI連携？知らねえ、YouTube埋め込みが一番安定だろ！という脳筋思想によってこうなりました。
GitHub Pages
毎度お世話になっております。静的サイトを５秒でホスティングできる。
Google fonts
おしゃれにしてみたかっただけです。
こだわりポインツ
カットイン
カットインって憧れじゃないですか？
本当は画像とかの方が「ぽさ」が出るのでしょうが、これで我慢してください。
CSSの@keyframesを初めて使いました。CSSでいろんなことができるんだなあ、すごいなあ（小並感）という感じでした。
ゴリ押しの動的OGP
動的OGPをしたかったのですが、そのためだけにバックエンド用意するのは「ないわぁ」って感じ。
ふと思いついたのが、Twitter用のページを何種類か用意して、ルートページにJSでぶっとばせばええんじゃね？？
UXとか考えるとよろしくない設計だとは思いますが、今の私に怖いものはない……。
ラグには勝てなかったよ……。
残念ながら、再生を押してから2秒ほどラグが出てしまいます。
だいぶ致命的な気がしますが、仕方ないですね。
YouTubeを介する限り、ラグからは逃れられません。
つまり、CDを買いましょう。
Amazon | ultra soul | B’z, 稲葉浩志, 松本孝弘, 徳永暁人 | J-POP | 音楽
もしくはこのギャンブル性を楽しみましょう。
あとがき的な感想
最初はミニマムなアプリにしようと思ったのですが、UIにネタを仕込んでいくとどんどん膨張していきました。
生JSの勉強にしようと思っていたのに、結果的にletとfunctionのゴリ押しになりました。
クラスとかいい感じにしたい思いはあった。思いだけだった。
自分でも見る気をなくすイカスミスパゲッティコードが鎮座しています。
ちなみに
実は3月に思いついていたものの、モチベーションがもたずにお蔵入りしていました。
こういうボツを供養できるのもクソアプリアドベントカレンダーのいいところですね。
クソアプリカレンダーはずっと憧れだったので、この機会に参加できてよかったです。
明日はKCさんの記事です。Tの波動を感じます。