<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>この記事は <a href="https://qiita.com/advent-calendar/2022/kuso-app" target="_blank" rel="nofollow noopener noreferrer">クソアプリ Advent Calendar 2022</a> の 21 日目の記事です。</p>
</div></aside>
<p>こんにちわ。 <a href="https://twitter.com/zuma_lab" target="_blank" rel="nofollow noopener noreferrer">ZUMA</a> です。</p>
<p>クソアプ初参加です。お手柔らかにお願いします。</p>
<p>学校や TOEIC のテストでは絶対出てこないであろうスラングのリスニングと発音練習が出来る Slang Boot Camp という WEB アプリを作ってみました。</p>
<p>このアプリで覚えたフレーズは英語のテストで一切役に立たない事を保証いたします。</p>
<p>あと、所構わずスラングばっかり使ってると失礼な奴と思われるので、用量、用法を守って正しくお使いください。</p>
<h1 id="%E3%81%93%E3%82%93%E3%81%AA%E3%82%93%E3%81%A7%E3%81%99">
<a class="header-anchor-link" href="#%E3%81%93%E3%82%93%E3%81%AA%E3%82%93%E3%81%A7%E3%81%99" aria-hidden="true"></a> こんなんです</h1>
<p>以下成果物です。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__cc408b70fc719" src="https://embed.zenn.studio/card#zenn-embedded__cc408b70fc719" data-content="https%3A%2F%2Fmain.d1ntt9o0lggnhf.amplifyapp.com%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://main.d1ntt9o0lggnhf.amplifyapp.com/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://main.d1ntt9o0lggnhf.amplifyapp.com/</a></p>
<p><a href="https://main.d1ntt9o0lggnhf.amplifyapp.com/" target="_blank" rel="nofollow noopener noreferrer"><img src="https://storage.googleapis.com/zenn-user-upload/a6f607816db7-20221223.png" alt loading="lazy" class="md-img"></a></p>
<p>デモ動画も作って YouTube に上げてみたのですが、あまりのスラング具合に年齢制限が課されてしまいました。</p>
<p><span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/8ew40RsloKw" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://youtu.be/8ew40RsloKw" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://youtu.be/8ew40RsloKw</a></p>
<h1 id="%E9%81%8A%E3%81%B3%E6%96%B9">
<a class="header-anchor-link" href="#%E9%81%8A%E3%81%B3%E6%96%B9" aria-hidden="true"></a> 遊び方</h1>
<p>まず英語問題文が読み上げれます。次にユーザーはリスニングした問題文をスピーキングします。</p>
<p>発音が正しければ祝ってくれますし、間違っていればスラングで罵られます。</p>
<h1 id="%E3%82%84%E3%81%A3%E3%81%A6%E3%82%8B%E3%81%93%E3%81%A8">
<a class="header-anchor-link" href="#%E3%82%84%E3%81%A3%E3%81%A6%E3%82%8B%E3%81%93%E3%81%A8" aria-hidden="true"></a> やってること</h1>
<p>以下技術スタックです。</p>
<ul>
<li>フロントエンド
<ul>
<li>Next.js</li>
</ul>
</li>
<li>ホスティング
<ul>
<li>AWS Amplify</li>
</ul>
</li>
<li>問題文の音声読み上げ
<ul>
<li>Amazon Polly</li>
</ul>
</li>
<li>ユーザー音声のテキスト変換
<ul>
<li>Amazon Transcribe</li>
</ul>
</li>
<li>音声録音、音声 PCM データ stream 処理
<ul>
<li>Microphone Stream</li>
</ul>
</li>
<li>音声再生
<ul>
<li>React Audio Player</li>
</ul>
</li>
</ul>
<p>処理は以下の流れです。</p>
<ol>
<li>Amazon Polly で問題文を音声変換</li>
<li>React Audio Player で音声再生</li>
<li>Microphone Stream でユーザーの音声を録音</li>
<li>Amazon Transcribe で音声からテキスト変換</li>
<li>変換されたテキストと問題文が合っているか判定</li>
<li>合っていれば次の問題、以下繰り返し</li>
</ol>
<p>音声録音の UX だけはこだわってて、音声の無音時間が 2 秒あると自動的に録音停止します。</p>
<p>アプリのソースコードはこちらです。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e1398e680062f" src="https://embed.zenn.studio/card#zenn-embedded__e1398e680062f" data-content="https%3A%2F%2Fgithub.com%2Fkazuma-fujita%2Fslang-boot-camp-frontend" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/kazuma-fujita/slang-boot-camp-frontend" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/kazuma-fujita/slang-boot-camp-frontend</a></p>
<p>Amazon Polly の実装に関しては過去に記事を書いたので興味があればご覧ください。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__59fbcce905bee" src="https://embed.zenn.studio/card#zenn-embedded__59fbcce905bee" data-content="https%3A%2F%2Fzenn.dev%2Fzuma_lab%2Farticles%2Fnextjs-amplify-text-to-speech" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/zuma_lab/articles/nextjs-amplify-text-to-speech" style="display:none" target="_blank">https://zenn.dev/zuma_lab/articles/nextjs-amplify-text-to-speech</a></p>
<p>Amazon Transcribe の実装も過去に記事を書きました。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c458b4f935541" src="https://embed.zenn.studio/card#zenn-embedded__c458b4f935541" data-content="https%3A%2F%2Fzenn.dev%2Fzuma_lab%2Farticles%2Fnextjs-amplify-speech-to-text" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/zuma_lab/articles/nextjs-amplify-speech-to-text" style="display:none" target="_blank">https://zenn.dev/zuma_lab/articles/nextjs-amplify-speech-to-text</a></p>
<h1 id="%E3%81%AA%E3%82%93%E3%81%A7%E4%BD%9C%E3%81%A3%E3%81%9F">
<a class="header-anchor-link" href="#%E3%81%AA%E3%82%93%E3%81%A7%E4%BD%9C%E3%81%A3%E3%81%9F" aria-hidden="true"></a> なんで作った</h1>
<p>筆者は字幕無しでハリウッド映画を観るという目標があります。</p>
<p>ただ、現状ハリウッド俳優が何を言ってるのかサッパリわかりません。</p>
<p>たぶんこんな理由です。</p>
<ul>
<li>ハリウッド俳優の会話速すぎ</li>
<li>リンキング(単語間が繋がってる)してる</li>
<li>リダクション(本来発音されるべき音が発音されてない)してる</li>
<li><strong>スラングめっちゃ使ってる!</strong></li>
</ul>
<p>英語学習において他にやること山の如しですが、なんかスラング覚えたいなーと思ってこのアプリを作りました。</p>
<p>時間無くて 17 問しか作れなかったのですが、ほんとは初級編、中級編、上級編とかコース別に分けたかったです。</p>
<p>来年のクソアプではもっと長文スラングに挑戦していきます。</p>
<p>それでは良いスラングライフを！</p>


学校や TOEIC で絶対出てこない英語フレーズの発音練習が出来るアプリを作った

zenn-articles

Discussion