LoginSignup
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@YasaiDev(電気野菜)

爆音と共振でワイングラスを割るサイトを作りました

Posted at

これは何？

音でグラスを壊したいという破壊衝動に駆られたため，Vue.jsの勉強も兼ねて初めて作ったサイト「爆音グラス破壊」です．

グラスを弾いた音から固有周波数を分析し，その周波数のサイン波を再生してグラスを激しく共振させ破壊します．

現状の手元環境では破壊できるだけの爆音がないので，悶々しています...助けて

使い方

https://hakai.yasaidev.work/usage

準備

  • スマホもしくはパソコン
  • 割れやすそうなワイングラス
  • いい感じの長さのストロー
  • できれば爆音スピーカー
    (最悪スマホスピーカーでもOK)

破壊

  • Analysisボタンを押す
    (マイクの確認ダイアログがでたら許可)
  • もう一度Analysisボタンを押す
  • カウントダウン後グラスをはじいて音を出す
  • サイトが音を自動分析
  • Playボタンは破壊音を再生！

破壊の仕組み

はじめにマイクからグラスを弾いた音をFFTして，周波数のピークをとり固有周波数として求めます．

次に，その固有周波数のサイン波を生成し再生します．

結果，グラスは共振し激しく揺れて限界を超えた際破壊されてしまいます．

Tech

  • JS framework: Vue.js
  • Design Framework: Vuetify
  • オーディオ/描画周り: p5.js

開発周りの工夫点

Vercelの自動デプロイを導入

mainブランチにpushするたびに自動でvercelにデプロイするようにしました．といってもほとんどvercel君がやってくれたので30分で導入できたのは神です．

ちなみに，Vercel bot君はプルリクエストに対しても勝手に検証用デプロイまで行ってくれて感動しました．（神では？）
image.png

Google Analyticsの導入

興味半分でvue-gtagで導入しました．クリックなどのイベントを事細かにGA側に送信することが可能といった知見を得れて便利だなと感じた一方，実際のサイトでもこれだけ事細かに情報が収集されているのかと感じ少し恐ろしくなりました．

かっこいい？OGPの導入

かっこいいね！

クソアプリなのにSNS映えを意識したそうです．今後のアプリ開発等にも役立つ知見を得れたのでヨシです．

P5.jsとVue.jsの組み合わせ

ここが一番コーディングで苦労しました．多少知見がたまったのでそのうち記事にします．

P5.jsが何かというと，クリエイティブ向けコーディング（Ex.オーディオビジュアライザー，ゲームなど）に特化したライブラリです．これを活用したことで，Web Audio周りに関して抽象的に記述できたり，Audioと合わせた描画等をまとめて処理を行うことができました．

ページの軽量化に取り組んだ

当初はNetlifyにデプロイし，速さを求めVercelにデプロイした．

また，PageSpeed Insightsを使って原因が適切なmin.jsを使わずに生のjsを使っていたことに気づき修正しました．
（これが主たる低速度の原因，もしかしたらNetlifyは悪くなかったかも知れないです）

さらに，サイズの大きいcomponentを非同期ロードすることで見かけの表示速度を早めました．

参考: 非同期コンポーネント:ロード状態のハンドリング

const AsyncComponent = () => ({
  // ロードすべきコンポーネント (Promiseであるべき)
  component: import('./MyComponent.vue'),
  // 非同期コンポーネントのロード中に使うコンポーネント
  loading: LoadingComponent,
  // ロード失敗時に使うコンポーネント
  error: ErrorComponent,
  // loading コンポーネントが表示されるまでの遅延時間。 デフォルト: 200ms
  delay: 200,
  // timeout が設定され経過すると、error コンポーネントが表示されます。
  // デフォルト: Infinity
  timeout: 3000
})

結果かなり当初よりは早くなりました．しかし，モバイル向けのスコアが低いのでもっと早めたいです.
image.png
image.png

やったけど取り消した点とか反省点

Github pagesにVue RouterのSPAサイトをデプロイした

当初はGithub Pagesに自動デプロイするようなworkflowを書いて動作させようとしましたが,Vue RouterのSPAのデフォルト設定とGithub pagesは少し相性が悪い．初学者でデプロイにハマりたくなかったのでnetlifyへと移行することを決心しました．

おそらくvueやreactなどはnetlifyやvercelのほうが脳死でデプロイできるので楽かもです．

Netlifyへデプロイした

Github workflowでGithub側でビルドしてNetlifyにデプロイする物を書きました．

参考: Qiita: GitHub Actions による GitHub Pages への自動デプロイ

こうすることでNetlify側のビルド時間制限を無視して好きなだけデプロイすることができるようにしました．

しかし，アクセスが遅い気がしたので，Vercelに移行しました．

(Pagespeed insightがモバイルで10点台)

これは後述するがp5.jsのminバージョンを使っていなかったことが大きいと思われます．このことに気づいていなかったです．

min.js を使わっていなかった

Vercelに移行後もやはりやけにページの読み込みが遅いと思ってGoogleのPageSpeed Insightsを使って確認したところP5.jsが大変ドデカサイズでありました(圧縮前5MB，説明不要でかい)．

min.jsに切り替えたら600KiBぐらいになったのでサクサクになりました．

正直npm run buildしたら勝手にmin.jsに切りかわるなどしてファイルサイズの最適化がされると思いこんでいました．反省．

Githubのブランチ名がmasterからmainになったことを忘れていた

GitHub Actions による GitHub Pages への自動デプロイを参考にworkflowを書いていたのですが，何故かpushしてもactionが動かないことがありめちゃくちゃ悩みました．

そうです，元記事ではactionのトリガーのブランチ名がmasterだったのです...泣きました．

みなさんもブランチ名が絡むもののコピペには気をつけてください．世界は変わってしまいました．

もろもろの所感

手元の音響設備ではワイングラスを破壊するほどの音量が確保できなかったのがすごく残念です．爆音をお持ちの方はグラスワインを破壊して僕に自慢してほしいです．

あと，普段はPython書いているのですがJavascript書いていると文法がごっちゃになって最近はSyntax Errorの量産機になりました．悲しいです．

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?