フードコートの”アレ”をスマホで再現できるアプリを作りました。
クソアプリ Advent Calendar 2021の11日目です。
アプリについて
皆さんフードコートって行ったことありますか？ありますよね(強制)
イオンモールなどの一区画に多くの飲食店が出店しているやつです。銀だこ、丸亀製麺、リンガーハット、オムライス、ビビンバ、クレープ、アイス…
そんなフードコートですが”アレ”見ますよね？
…そう。食事ができたことを知らせるブザーです。(以下いらすとや様画像)
そんなフードコートのブザーをスマホで何時でも使えるWebアプリを作ったのでアドカレでご紹介します！
使い方
以下のURLにアクセスして、あとは右下の再生ボタン▶を押すだけ。
音と共にブルブル端末が震えますので料理を取りに行くノリを体験してください。外観やバイブパターンは2種類ずつあります！
以上。（Twitterでシェアもすると喜びます）
※**Safariは非対応です！**iPhoneの方は音しか再現できませんので御注意を。動画で見てみてください。（JS APIの仕様なので私のせいじゃないです。後述）
うまく動かすコツ
うまくブルブル震わせるためのコツとして、ケースを外して硬めの机に置くのがオススメです！(?)
PWA対応でオフラインでも動く
PWAに対応させて、キャッシュを効かせてオフラインで動作できるようにしました。
これで飛行機の中でも楽しめます！！（←迷惑になるので✕）
何故作ろうとしたのか
なんで作ろうと思ったのかと言いますと今年地方から東京都区内へと転居いたしまして、これまで当たり前にあったイオンモールや（九州人ならお馴染み）ゆめタウンなどが殆どみられなく何故か恋しくなった。
ただそれだけです（笑）
技術について
アプリの開発に当たるお話を少しします。
技術スタックは以下のとおりです。
- HTML / CSS
- JS (Vanilla)
単純に端末を振動させて同時に音を流すだけなので、特段フレームワークも使わずにTSも使わずに制作しました。
また、以下のようなアセットで構成されています。
- Winbox.js … ウィンドウ型のモーダルを出現させるJSライブラリ。設定等の表示に使用
- A Modern CSS Reset … リセットCSS(GitHub)
- ブザーの画像 … ンバヂ @nbaji9様の画像を利用
- 背景画像 … 撮影者：私 @丸亀製麺中野店
- 音 … フリー音源を編集ソフトで加工。YouTubeに上がってたブザーの音を何度も聞いて忠実に再現したつもりです
設定などを表示する為に、子ウィンドウを表示出来るWinbox.jsを使いました。
背景画像は私が撮影しました。フードコートで席についた直後にありがちな飲料水のコップも一緒に取ることで再現度を上げました。
メイン画像はこちらの投稿の画像を編集して利用させて頂きました。自分で作っても良かったのですが、せっかく素晴らしいセンスのあるTweetだったのでお借り致しました。
（突然「フードコートのアプリ開発したいんですけど…」と意味不な連絡してすみませんm(_ _)m）
##殆ど使われないﾌﾞﾙﾌﾞﾙさせるVibration API
最後に端末のバイブレーションをJavaScriptで操作するAPI「Vibration API」を紹介します。
以下のようにミリ秒を指定するだけで端末のバイブレーションを制御できます。
window.navigator.vibrate(200);
window.navigator.vibrate([200, 100, 200]);
配列に値を入れて渡すと、ON,OF,ON,OFF,ON...のようにオンオフを交互に指定することも出来ます。
setInterval および clearIntervalを併用することで継続的にバイブレーションを動作させることも可能です。
MDNのDocsは以下にあります。
問題なのは使い道があまり浮かばない上に、Safariブラウザが非対応だという点です。
Win11になってInternet explorerがご臨終になった昨今、Safariが圧倒的に面倒くさいブラウザになっちゃいました。
想定される用途としてはゲームのデバッグや業務システム以外ほぼ思いつかないですし、あったとしてもワンクリック詐欺系に使われそうな機能だなぁと感じました。
toCサービスにおいてバイブレーションは怖がらせたりする可能性もありますからね…
以上、Vibration APIを活用したフードコートのブザーを再現するクソアプリでした。
是非SNS等も宜しくおねがいします…（普段メディアの代表をしてます）
Twitter | GitHub
おまけ:index.htmlのソースを見ると何かがあるかも…