LoginSignup
0
0

効果音ボタン集「オノまとめ」

Last updated at Posted at 2023-11-05

はじめに

前回のDiatonic Cheatに続いて、HTML + CSS + JavaScriptで作ったWebアプリをReact.jsで作り直し企画の第二弾です。
半分ネタで作ったアプリです。
画面に表示されたボタンをクリック(タッチ)すると効果音が鳴るという極めてシンプルなアプリです。
タイトルの由来は、オノマトペ(効果音)の鳴るボタンをまとめたサイトであるというノリで付けました。五秒くらいで考えつきました。ジョンレノンの奥さんではありません。
オノまとめ
動画

使い方

  • まず、鳴らしたい効果音のジャンルを選んで
    記事用1.png
    .
    記事用2.png

  • ボタンをクリック(タッチ)してを出す
    記事用3.png

仕様技術

  • React.js
  • TypeScript
    前回同様、React.jsを使って制作したことによって以前作ったアプリをPWAとして使えるようになったので利便性が増しました。
    今回もまたlocalStorageを活用しています。
    一度選んだジャンルを記憶して、一度アプリを落とした後でも再度開くとすでにそのキーが選ばれた状態で表示されます。

まとめ

効果音を鳴らすだけですが、結構遊びやイタズラに使える音が多く入っていると思います。
ただし、イタズラは自己責任でお願いします。
スマホと相性がいいと思うので、PWAでダウンロードすれば使いやすいと思います。
もう一つあるHTML + CSS + JavaScriptで作ったWebアプリもReact.jsでリメイクしたので、そちらの記事も書きました。

0
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
0
0