<p data-line="0" class="code-line"><a href="https://qiita.com/advent-calendar/2024/kuso-app" target="_blank" rel="nofollow noopener noreferrer">クソアプリ Advent Calendar 2024</a>シーズン2 6日目の記事です。<br>
中2日遅れました。<br>
申し訳ありません！！！！！！！！</p>
<hr data-line="4" class="code-line">
<p data-line="6" class="code-line">「地獄のハイトーン攻略道場」っていうWebアプリを作りました！！！！！！！！！！！<br>
<img src="https://storage.googleapis.com/zenn-user-upload/c4db614edc91-20241209.jpg" alt="jigohai" loading="lazy" class="md-img"><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c9a619dcec81b" src="https://embed.zenn.studio/card#zenn-embedded__c9a619dcec81b" data-content="https%3A%2F%2Fjigohai.botofune.com" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://jigohai.botofune.com" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://jigohai.botofune.com</a></p>
<h2 id="%E5%9C%B0%E7%8D%84%E3%81%AE%E3%83%8F%E3%82%A4%E3%83%88%E3%83%BC%E3%83%B3%E6%94%BB%E7%95%A5%E9%81%93%E5%A0%B4%E3%81%AE%E6%A6%82%E8%A6%81" data-line="10" class="code-line">
<a class="header-anchor-link" href="#%E5%9C%B0%E7%8D%84%E3%81%AE%E3%83%8F%E3%82%A4%E3%83%88%E3%83%BC%E3%83%B3%E6%94%BB%E7%95%A5%E9%81%93%E5%A0%B4%E3%81%AE%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 地獄のハイトーン攻略道場の概要</h2>
<p data-line="12" class="code-line">キーがどんどん上がっていくカラオケアプリです。</p>
<h2 id="%E5%9C%B0%E7%8D%84%E3%81%AE%E3%83%8F%E3%82%A4%E3%83%88%E3%83%BC%E3%83%B3%E6%94%BB%E7%95%A5%E9%81%93%E5%A0%B4%E3%81%AE%E5%8A%B9%E8%83%BD" data-line="14" class="code-line">
<a class="header-anchor-link" href="#%E5%9C%B0%E7%8D%84%E3%81%AE%E3%83%8F%E3%82%A4%E3%83%88%E3%83%BC%E3%83%B3%E6%94%BB%E7%95%A5%E9%81%93%E5%A0%B4%E3%81%AE%E5%8A%B9%E8%83%BD" aria-hidden="true"></a> 地獄のハイトーン攻略道場の効能</h2>
<p data-line="16" class="code-line">髭男とかミセスとかXとかLOUDNESSとかDIR EN GREYとかハイトーンにまみれた曲ばっかりな人たちの曲を、原曲キーで楽に歌えるようになります！<br>
たぶん！</p>
<h2 id="%E5%9C%B0%E7%8D%84%E3%81%AE%E3%83%8F%E3%82%A4%E3%83%88%E3%83%BC%E3%83%B3%E6%94%BB%E7%95%A5%E9%81%93%E5%A0%B4%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" data-line="19" class="code-line">
<a class="header-anchor-link" href="#%E5%9C%B0%E7%8D%84%E3%81%AE%E3%83%8F%E3%82%A4%E3%83%88%E3%83%BC%E3%83%B3%E6%94%BB%E7%95%A5%E9%81%93%E5%A0%B4%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> 地獄のハイトーン攻略道場の使い方</h2>
<p data-line="21" class="code-line">PCで閲覧した場合の話ですが、</p>
<ol data-line="22" class="code-line">
<li data-line="22" class="code-line">画面左側のサイドバーにある「ふるさと」を押す</li>
<li data-line="23" class="code-line">歌う</li>
</ol>
<p data-line="25" class="code-line">以上です！！！！！</p>
<p data-line="27" class="code-line">曲が進むにつれキーがどんどん上がっていくので、がんばって歌いきってください。<br>
これを何回もやりましょう。<br>
そのあとに原曲キーで歌ってみましょう。<br>
たぶんめっちゃ楽に歌えるようになっています。</p>
<h2 id="%E5%9C%B0%E7%8D%84%E3%81%AE%E3%83%8F%E3%82%A4%E3%83%88%E3%83%BC%E3%83%B3%E6%94%BB%E7%95%A5%E9%81%93%E5%A0%B4%E3%81%8C%E4%BB%96%E3%81%AB%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%93%E3%81%A8" data-line="32" class="code-line">
<a class="header-anchor-link" href="#%E5%9C%B0%E7%8D%84%E3%81%AE%E3%83%8F%E3%82%A4%E3%83%88%E3%83%BC%E3%83%B3%E6%94%BB%E7%95%A5%E9%81%93%E5%A0%B4%E3%81%8C%E4%BB%96%E3%81%AB%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%93%E3%81%A8" aria-hidden="true"></a> 地獄のハイトーン攻略道場が他にできること</h2>
<ul data-line="34" class="code-line">
<li data-line="34" class="code-line">任意の曲をアップロードできます</li>
<li data-line="35" class="code-line">歌詞を検索できます
<ul data-line="36" class="code-line">
<li data-line="36" class="code-line">検索しても該当する曲が無かったら、歌詞を貼り付けることができます</li>
</ul>
</li>
<li data-line="37" class="code-line">キーの上昇を自動にするか手動にするかで切り替えられます</li>
<li data-line="38" class="code-line">音楽に含まれているボーカルを除去できます</li>
<li data-line="39" class="code-line">曲と歌詞のセットを保存できます
<ul data-line="40" class="code-line">
<li data-line="40" class="code-line">IndexedDBを使ってます</li>
</ul>
</li>
<li data-line="41" class="code-line">歌った曲をシェアできます
<ul data-line="42" class="code-line">
<li data-line="42" class="code-line">歌った曲の保存にsessionStorageを使ってます</li>
</ul>
</li>
</ul>
<h2 id="%E5%9C%B0%E7%8D%84%E3%81%AE%E3%83%8F%E3%82%A4%E3%83%88%E3%83%BC%E3%83%B3%E6%94%BB%E7%95%A5%E9%81%93%E5%A0%B4%E3%82%92%E5%88%B6%E4%BD%9C%E3%81%97%E3%81%9F%E8%83%8C%E6%99%AF" data-line="44" class="code-line">
<a class="header-anchor-link" href="#%E5%9C%B0%E7%8D%84%E3%81%AE%E3%83%8F%E3%82%A4%E3%83%88%E3%83%BC%E3%83%B3%E6%94%BB%E7%95%A5%E9%81%93%E5%A0%B4%E3%82%92%E5%88%B6%E4%BD%9C%E3%81%97%E3%81%9F%E8%83%8C%E6%99%AF" aria-hidden="true"></a> 地獄のハイトーン攻略道場を制作した背景</h2>
<p data-line="46" class="code-line">カラオケで歌ってるときに友達がギャヒギャヒ笑いながら、勝手にキーやテンポをガシガシ変えてきたり、ボイスエフェクトを掛けてきたり、みたいな経験ないですかね。<br>
私はあります。<br>
それってクソいなと思ったので、クソアプリとしてつくりました。<br>
私はそれやられても楽しいんで全然かまわんですけどね。<br>
それ嫌がる人もおるやろなと。</p>
<p data-line="52" class="code-line">地獄のハイトーン攻略道場では、変わるのはキーだけ、かつ上がっていくのみです。<br>
テンポやキーがランダムに変わるとクソ度が上がって初見時のインパクトが強そうだと想像しました。<br>
ただ、あまりもクソくて実用性が薄いと出オチで終わると考えました。<br>
せっかくつくるんなら複数回にわたって使ってほしいので、実用性をもたせつつ、実用性があるような見せ方を心がけました。</p>
<h2 id="%E5%9C%B0%E7%8D%84%E3%81%AE%E3%83%8F%E3%82%A4%E3%83%88%E3%83%BC%E3%83%B3%E6%94%BB%E7%95%A5%E9%81%93%E5%A0%B4%E3%81%AE%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E6%A7%8B%E6%88%90" data-line="57" class="code-line">
<a class="header-anchor-link" href="#%E5%9C%B0%E7%8D%84%E3%81%AE%E3%83%8F%E3%82%A4%E3%83%88%E3%83%BC%E3%83%B3%E6%94%BB%E7%95%A5%E9%81%93%E5%A0%B4%E3%81%AE%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E6%A7%8B%E6%88%90" aria-hidden="true"></a> 地獄のハイトーン攻略道場の技術的な構成</h2>
<ul data-line="59" class="code-line">
<li data-line="59" class="code-line">Next.js</li>
<li data-line="60" class="code-line">Vercel</li>
<li data-line="61" class="code-line">Tailwind CSS</li>
<li data-line="62" class="code-line">Cloudflare R2
<ul data-line="63" class="code-line">
<li data-line="63" class="code-line">OGPの画像を保存するために使ってます</li>
</ul>
</li>
<li data-line="64" class="code-line">Newt
<ul data-line="65" class="code-line">
<li data-line="65" class="code-line">デフォルトで入ってる音源と歌詞を管理しています。増やしていく予定です。</li>
</ul>
</li>
</ul>
<h2 id="%E5%9C%B0%E7%8D%84%E3%81%AE%E3%83%8F%E3%82%A4%E3%83%88%E3%83%BC%E3%83%B3%E6%94%BB%E7%95%A5%E9%81%93%E5%A0%B4%E3%81%AE%E7%89%B9%E7%AD%86%E3%81%99%E3%82%8B%E5%AE%9F%E8%A3%85" data-line="67" class="code-line">
<a class="header-anchor-link" href="#%E5%9C%B0%E7%8D%84%E3%81%AE%E3%83%8F%E3%82%A4%E3%83%88%E3%83%BC%E3%83%B3%E6%94%BB%E7%95%A5%E9%81%93%E5%A0%B4%E3%81%AE%E7%89%B9%E7%AD%86%E3%81%99%E3%82%8B%E5%AE%9F%E8%A3%85" aria-hidden="true"></a> 地獄のハイトーン攻略道場の特筆する実装</h2>
<ul data-line="69" class="code-line">
<li data-line="69" class="code-line">キーの変更
<ul data-line="70" class="code-line">
<li data-line="70" class="code-line">
<a href="https://github.com/cutterbl/SoundTouchJS" target="_blank" rel="nofollow noopener noreferrer">SoundTouchJS</a>を使ってます</li>
</ul>
</li>
<li data-line="71" class="code-line">ボーカルの除去
<ul data-line="72" class="code-line">
<li data-line="72" class="code-line">位相反転してます。なのでモノラル音源にやると音が消滅します。</li>
</ul>
</li>
</ul>
<h2 id="%E8%81%96%E9%A3%A2%E9%AD%94%E2%85%B1" data-line="74" class="code-line">
<a class="header-anchor-link" href="#%E8%81%96%E9%A3%A2%E9%AD%94%E2%85%B1" aria-hidden="true"></a> 聖飢魔Ⅱ</h2>
<p data-line="76" class="code-line">地獄のハイトーン攻略道場を作り始めた時期に<a href="https://ja.wikipedia.org/wiki/%E8%81%96%E9%A3%A2%E9%AD%94II" target="_blank" rel="nofollow noopener noreferrer">聖飢魔Ⅱ</a>にハマりだしていたので、悪魔っぽいデザインにしようと思いました。<br>
しかし悪魔っぽいってのはちょっと抽象的だったので、聖飢魔Ⅱが曲で使ってるモチーフであり、アプリのコンセプトと合致するものとして、地獄な感じにしました。<br>
聖飢魔Ⅱの曲だと1990年の「ROCK IN THE KINGDOM」と「RATSBANE」と「不思議な第三惑星」と「白い奇蹟」がオススメです。<br>
ぜひ聖飢魔Ⅱならびに地獄のハイトーン攻略道場を楽しんでください。<br>
聖飢魔Ⅱの曲だと「殺しの現場」って曲がめっちゃ高いので、その曲でハイトーンの練習するといいです。</p>


ハイトーン地獄で、ハイトーンを攻略するクソアプリ

地獄のハイトーン攻略道場の概要

地獄のハイトーン攻略道場の効能

地獄のハイトーン攻略道場の使い方

地獄のハイトーン攻略道場が他にできること

地獄のハイトーン攻略道場を制作した背景

地獄のハイトーン攻略道場の技術的な構成

地獄のハイトーン攻略道場の特筆する実装

Discussion