<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__561a8af7e518c" src="https://embed.zenn.studio/card#zenn-embedded__561a8af7e518c" data-content="https%3A%2F%2Fqiita.com%2Fadvent-calendar%2F2021%2Fkuso-app" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://qiita.com/advent-calendar/2021/kuso-app" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/advent-calendar/2021/kuso-app</a></p>
<p>クソアプリカレンダーの14日目の記事です！技術的なことは書きません!</p>
<h1 id="%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE-%F0%9F%8E%89">
<a class="header-anchor-link" href="#%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE-%F0%9F%8E%89" aria-hidden="true"></a> 作ったもの 🎉</h1>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d1af68295c31" src="https://embed.zenn.studio/card#zenn-embedded__d1af68295c31" data-content="https%3A%2F%2F4w-english.vercel.app%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://4w-english.vercel.app/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://4w-english.vercel.app/</a></p>
<p>「いつ、どこで、誰が、何をした」という文章を作り、英語に翻訳してくれるサービスです。<br>
これどこで使うの？っていう英語が出来上がります。ぜひお試しください🙇🏻‍♂️</p>
<table>
<thead>
<tr>
<th style="text-align:center">入力画面</th>
<th style="text-align:center">翻訳結果画面</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center"><img src="https://storage.googleapis.com/zenn-user-upload/c425de883724-20211214.png" alt loading="lazy" class="md-img"></td>
<td style="text-align:center"><img src="https://storage.googleapis.com/zenn-user-upload/b41205a48e20-20211214.png" alt loading="lazy" class="md-img"></td>
</tr>
</tbody>
</table>
<h1 id="%E3%81%AA%E3%81%9C%E4%BD%9C%E3%81%A3%E3%81%9F%E3%81%AE%EF%BC%9F-%F0%9F%98%81">
<a class="header-anchor-link" href="#%E3%81%AA%E3%81%9C%E4%BD%9C%E3%81%A3%E3%81%9F%E3%81%AE%EF%BC%9F-%F0%9F%98%81" aria-hidden="true"></a> なぜ作ったの？ 😁</h1>
<h3 id="%E3%81%A1%E3%82%87%E3%81%86%E3%81%A9%E8%8B%B1%E8%AA%9E%E3%82%92%E5%8B%89%E5%BC%B7%E3%81%97%E3%81%A6%E3%81%9F">
<a class="header-anchor-link" href="#%E3%81%A1%E3%82%87%E3%81%86%E3%81%A9%E8%8B%B1%E8%AA%9E%E3%82%92%E5%8B%89%E5%BC%B7%E3%81%97%E3%81%A6%E3%81%9F" aria-hidden="true"></a> ちょうど英語を勉強してた</h3>
<p>３ヶ月ほど前からオンライン英会話を始めました。</p>
<p>新しい単語を調べたり、例文を調べると「これ、いつ使うんだろう？」というのがよくあります。<code>This is a pen.</code>的なやつです。</p>
<p>「使い所が全くない英語」に振り切っても面白いかなと思いました。</p>
<h3 id="%E4%B9%85%E3%81%97%E3%81%B6%E3%82%8A%E3%81%AB%E5%80%8B%E4%BA%BA%E9%96%8B%E7%99%BA%E3%81%97%E3%81%9F%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%8B%E3%82%89">
<a class="header-anchor-link" href="#%E4%B9%85%E3%81%97%E3%81%B6%E3%82%8A%E3%81%AB%E5%80%8B%E4%BA%BA%E9%96%8B%E7%99%BA%E3%81%97%E3%81%9F%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%8B%E3%82%89" aria-hidden="true"></a> 久しぶりに個人開発したかったから</h3>
<p>純粋にコレ。</p>
<h1 id="%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E6%8A%80%E8%A1%93-%F0%9F%91%A8%E2%80%8D%F0%9F%92%BB">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E6%8A%80%E8%A1%93-%F0%9F%91%A8%E2%80%8D%F0%9F%92%BB" aria-hidden="true"></a> 使っている技術 👨‍💻</h1>
<ul>
<li><a href="https://ja.reactjs.org/" target="_blank" rel="nofollow noopener noreferrer">React</a></li>
<li><a href="https://supabase.com/" target="_blank" rel="nofollow noopener noreferrer">supabase</a></li>
<li><a href="https://cloud.google.com/translate?hl=ja" target="_blank" rel="nofollow noopener noreferrer">Google Cloud Translation</a></li>
<li><a href="https://cloud.google.com/functions" target="_blank" rel="nofollow noopener noreferrer">Google Cloud Functions</a></li>
</ul>
<h1 id="%E6%84%9F%E6%83%B3-%F0%9F%8E%81">
<a class="header-anchor-link" href="#%E6%84%9F%E6%83%B3-%F0%9F%8E%81" aria-hidden="true"></a> 感想 🎁</h1>
<h3 id="%E5%80%8B%E4%BA%BA%E9%96%8B%E7%99%BA%E3%81%AE%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E7%AE%A1%E7%90%86%E9%9B%A3%E3%81%97%E3%81%84">
<a class="header-anchor-link" href="#%E5%80%8B%E4%BA%BA%E9%96%8B%E7%99%BA%E3%81%AE%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E7%AE%A1%E7%90%86%E9%9B%A3%E3%81%97%E3%81%84" aria-hidden="true"></a> 個人開発のスケジュール管理難しい</h3>
<p>アドベントカレンダーなのでスケジュール重視。<br>
個人開発ができる時間は本当に少ないので、<strong>シンプルに作る！やらないことを決める！</strong></p>
<ul>
<li>やること
<ul>
<li>日本語の文章を作る</li>
<li>英語に翻訳する</li>
<li>スマホでも綺麗に見えるようにする</li>
<li>シェアするボタン作る</li>
</ul>
</li>
<li>やらないこと
<ul>
<li>ユーザが言葉を登録できるようにする</li>
<li>ユーザが作った翻訳を一覧にして表示する</li>
<li>バックエンドを作る</li>
<li>２人以上でのマルチプレイなどなど</li>
</ul>
</li>
</ul>
<h3 id="%E6%96%87%E7%AB%A0%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E7%94%A8%E6%84%8F%E3%81%99%E3%82%8B%E3%81%AE%E3%81%8C%E5%A4%A7%E5%A4%89">
<a class="header-anchor-link" href="#%E6%96%87%E7%AB%A0%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E7%94%A8%E6%84%8F%E3%81%99%E3%82%8B%E3%81%AE%E3%81%8C%E5%A4%A7%E5%A4%89" aria-hidden="true"></a> 文章を作るためのデータを用意するのが大変</h3>
<p>事前に200パターン作りました。これが一番時間かかったかも。<br>
単語をランダムで表示してくれるサービスにとてもお世話になりました 🙇🏻‍♂️</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__eeb1d4d208ebc" src="https://embed.zenn.studio/card#zenn-embedded__eeb1d4d208ebc" data-content="https%3A%2F%2Ftango-gacha.com%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://tango-gacha.com/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://tango-gacha.com/</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__919f675d03882" src="https://embed.zenn.studio/card#zenn-embedded__919f675d03882" data-content="https%3A%2F%2Fgacha-n-co.com%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://gacha-n-co.com/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://gacha-n-co.com/</a></p>
<h3 id="%E9%96%8B%E7%99%BA%E4%B8%AD%E3%80%81%E6%AC%A1%E3%81%AB%E3%82%84%E3%82%8A%E3%81%9F%E3%81%84%E3%81%93%E3%81%A8%E3%81%8C%E8%A6%8B%E3%81%A4%E3%81%8B%E3%82%8B%E3%81%AE%E3%81%8C%E8%89%AF%E3%81%84">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E4%B8%AD%E3%80%81%E6%AC%A1%E3%81%AB%E3%82%84%E3%82%8A%E3%81%9F%E3%81%84%E3%81%93%E3%81%A8%E3%81%8C%E8%A6%8B%E3%81%A4%E3%81%8B%E3%82%8B%E3%81%AE%E3%81%8C%E8%89%AF%E3%81%84" aria-hidden="true"></a> 開発中、次にやりたいことが見つかるのが良い</h3>
<p>新しく使った技術、初めて使ったサービスについてもっと知りたい、もっと使ってみたいという欲望が湧き上がってきてメッチャ良い 👍</p>
<ul>
<li>Reactを使ってまた作りたい</li>
<li>次はNext.jsを使ってみようかな</li>
<li>supabaseで認証やってみたい</li>
<li>Google Cloudの他のサービスも使ってみたいなど</li>
</ul>
<h3 id="%E9%96%8B%E7%99%BA%E4%B8%AD%E3%81%AF%E3%81%84%E3%82%8D%E3%82%93%E3%81%AA%E5%88%BA%E6%BF%80%E3%81%8C%E3%81%82%E3%81%A3%E3%81%A6%E3%80%81%E4%BB%96%E3%81%AE%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A3%E3%82%A2%E3%81%8C%E6%B5%AE%E3%81%8B%E3%81%B6">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E4%B8%AD%E3%81%AF%E3%81%84%E3%82%8D%E3%82%93%E3%81%AA%E5%88%BA%E6%BF%80%E3%81%8C%E3%81%82%E3%81%A3%E3%81%A6%E3%80%81%E4%BB%96%E3%81%AE%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A3%E3%82%A2%E3%81%8C%E6%B5%AE%E3%81%8B%E3%81%B6" aria-hidden="true"></a> 開発中はいろんな刺激があって、他のアイディアが浮かぶ</h3>
<p>開発しているときに思ったこと、悩んだことは次に作るサービスのアイディアになる（かも） 👀</p>
<ul>
<li>スケジュールが決まっていると作り切れるな</li>
<li>開発中も「こんなの作ってるよー」ってどんどん言いたいな</li>
<li>英語の勉強で毎回翻訳するけど、どこかに保存しておきたいな</li>
</ul>
<h1 id="%E7%B5%82%E3%82%8F%E3%82%8A">
<a class="header-anchor-link" href="#%E7%B5%82%E3%82%8F%E3%82%8A" aria-hidden="true"></a> 終わり</h1>
<p>作りたいアイディアはたくさんあるので、次は<a href="https://nextjs.org/" target="_blank" rel="nofollow noopener noreferrer">Next.js</a>で開発してみたい</p>


「いつどこで誰が何をした」を英語翻訳するサービス作った

久しぶりに個人開発したかったから

個人開発のスケジュール管理難しい

文章を作るためのデータを用意するのが大変

開発中、次にやりたいことが見つかるのが良い

開発中はいろんな刺激があって、他のアイディアが浮かぶ

Discussion