tag:crieit.net,2005:https://crieit.net/tags/%E3%80%80Firebase/feed 「 Firebase」の記事 - Crieit Crieitでタグ「 Firebase」に投稿された最近の記事 2020-01-04T16:25:34+09:00 https://crieit.net/tags/%E3%80%80Firebase/feed tag:crieit.net,2005:PublicArticle/15467 2019-10-09T09:30:58+09:00 2020-01-04T16:25:34+09:00 https://crieit.net/posts/6d32ce9eaaf577859c0436f236303d56 自分のメモが英語翻訳されて単語帳になる「メモや日記ついでに英語学習」をリリースしました <p>*この記事は前半はサービスの概要、後半はCrieit用に、翻訳機能の技術部分の解説になっています。</p> <p>先日、英語学習の便利ツールとして「メモや日記ついでに英語学習」というWebサービスを作りました。<br /> <a target="_blank" rel="nofollow noopener" href="https://translate.ameneko.com/">メモや日記ついでに英語学習</a></p> <h2 id="「メモや日記ついでに英語学習」とは?"><a href="#%E3%80%8C%E3%83%A1%E3%83%A2%E3%82%84%E6%97%A5%E8%A8%98%E3%81%A4%E3%81%84%E3%81%A7%E3%81%AB%E8%8B%B1%E8%AA%9E%E5%AD%A6%E7%BF%92%E3%80%8D%E3%81%A8%E3%81%AF%EF%BC%9F">「メモや日記ついでに英語学習」とは?</a></h2> <p>「メモや日記ついでに英語学習」は、英語の勉強で、いつも挫折してしまう私が「もし自分が書いたメモや日記がついでに英語に翻訳できたら、その文章は自分が書いたものだから、他の英語の例文より覚えやすいのではないか?」と思い作りました。</p> <p>メモや日記ついでに勝手に翻訳してくれて英語の単語帳になるなら、一切気負わずに勉強が続けられそうです。</p> <p>やることは、登録画面で、メモや日記を登録するだけです。登録すると勝手に翻訳して、単語帳のように一覧として管理します。日本で登録したら英語に、英語なら日本語に翻訳してくれるので、気になる英語をこのアプリに登録して使うこともできます。<br /> <a href="https://crieit.now.sh/upload_images/592a17acc0e9e3c06e47ff3d58bfd3415d9d1f0803df3.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/592a17acc0e9e3c06e47ff3d58bfd3415d9d1f0803df3.png?mw=700" alt="スクリーンショット 2019-10-08 9.44.54.png" /></a></p> <h3 id="音声読み上げ機能も付いている"><a href="#%E9%9F%B3%E5%A3%B0%E8%AA%AD%E3%81%BF%E4%B8%8A%E3%81%92%E6%A9%9F%E8%83%BD%E3%82%82%E4%BB%98%E3%81%84%E3%81%A6%E3%81%84%E3%82%8B">音声読み上げ機能も付いている</a></h3> <p>「メモや日記ついでに英語学習」では、音声の読み上げ機能もつけています。音声マークをクリックすると英語を読み上げてくれます。</p> <p>合成音声で喋ってくれますので、知らない単語の読み方などの勉強になります。</p> <p>ただ、ブラウザによっては音声読み上げをしない場合もありますので注意が必要です。</p> <h3 id="グーグル翻訳"><a href="#%E3%82%B0%E3%83%BC%E3%82%B0%E3%83%AB%E7%BF%BB%E8%A8%B3">グーグル翻訳</a></h3> <p>翻訳にはグーグル翻訳を使っています。</p> <p>そのため、正確な英語でない場合もあります。ただそこは割り切って、正確な英語よりはまずは英語に馴れ親しむ方を重視しています。</p> <p>また、グーグルが翻訳しやすい日本語というのもあるようなので、書き方を少し工夫していただくと良いと思います。</p> <h3 id="学習効率を上げるエビングハウスの忘却曲線"><a href="#%E5%AD%A6%E7%BF%92%E5%8A%B9%E7%8E%87%E3%82%92%E4%B8%8A%E3%81%92%E3%82%8B%E3%82%A8%E3%83%93%E3%83%B3%E3%82%B0%E3%83%8F%E3%82%A6%E3%82%B9%E3%81%AE%E5%BF%98%E5%8D%B4%E6%9B%B2%E7%B7%9A">学習効率を上げるエビングハウスの忘却曲線</a></h3> <p>エビングハウスの忘却曲線とは、英単語や暗記学習で使われる暗記テクニックです。</p> <p>人は暗記しても、時間が経つとほとんど忘れてしまいますが、ある一定の時間経過後に思い出すと記憶の定着率が大きく上がるというデータを示した曲線です。</p> <p>忘却曲線 - Wikipedia</p> <p>「メモや日記ついでに英語学習」もこのエビングハウスの忘却曲線を利用しています。</p> <p>ホーム画面には、「当日」「1日前」「1週間前」「1ヶ月前」が表示されるようにしています。</p> <p>このアプリを開いて、ホーム画面の英語の例文を読んで毎日一つ文章を登録するクセをつければ、かなり英語学習に役立つ仕組みになっていると思います。</p> <h3 id="できるだけ気軽に続けれる英語学習サービス"><a href="#%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%A0%E3%81%91%E6%B0%97%E8%BB%BD%E3%81%AB%E7%B6%9A%E3%81%91%E3%82%8C%E3%82%8B%E8%8B%B1%E8%AA%9E%E5%AD%A6%E7%BF%92%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9">できるだけ気軽に続けれる英語学習サービス</a></h3> <p>このアプリを作るにあたってこだわったのは、できるだけ気軽で効果がある英語学習サービスにしたいということでした。</p> <p>そのために</p> <ul> <li>自分の頭の中から出て言葉の方が馴染んで覚えやすい</li> <li>メモや日記の「ついで」に英語の単語帳を作れる</li> <li>エビングハウスの忘却曲線を利用した暗記方法が、アプリを開いただけで利用できる</li> </ul> <p>という3点にこだわりました。</p> <p>翻訳アプリを利用した学習方法では、正確な英語の例文ではありませんが、まずは英語を身近にすることと、自分がよく使う言い回しや単語を覚えて欲しいと思います。</p> <p>自分が今このアプリの一番のヘービーユーザーですが、使っていてかなり英語が覚えられそうです。本当にいいアプリですのでぜひ使ってみてください!</p> <h2 id="Firebaseの拡張機能「Firebase Extensions Translate Text」の概要と使い方の注意点"><a href="#Firebase%E3%81%AE%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%80%8CFirebase+Extensions+Translate+Text%E3%80%8D%E3%81%AE%E6%A6%82%E8%A6%81%E3%81%A8%E4%BD%BF%E3%81%84%E6%96%B9%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9">Firebaseの拡張機能「Firebase Extensions Translate Text」の概要と使い方の注意点</a></h2> <p>さて、ここまでは私の<a target="_blank" rel="nofollow noopener" href="https://www.katonobo.com/entry/translate-app">ブログ</a>と同じ内容でしたが、ここからは本サービスに実際に使用しているFirebaseの翻訳機能「Translate Text」の概要と使い方、使用上の注意点について書いていきます。個人開発の方は海外展開を視野に入れたサービスを作る方が多いように思うので、参考になると思います。</p> <h3 id="Firebase Extensions(Firebase拡張機能)とは?"><a href="#Firebase+Extensions%EF%BC%88Firebase%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%EF%BC%89%E3%81%A8%E3%81%AF%EF%BC%9F">Firebase Extensions(Firebase拡張機能)とは?</a></h3> <p><a target="_blank" rel="nofollow noopener" href="https://firebase.google.com/docs/extensions">Firebase Extensions</a>は、つい最近に発表されたFirebaseの拡張機能です。(ベータ版です)<br /> 拡張機能は<br /> * Resize Images<br /> * Translate Text<br /> * Sync with Mailchimp<br /> * Trigger Email<br /> * Export Collections to BigQuery<br /> * Shorten URLs<br /> * Distributed Counter<br /> * Limit Child Nodes<br /> * Delete User Data<br /> があります。<br /> 詳しくはこちらの記事が参考になります。<br /> <a target="_blank" rel="nofollow noopener" href="https://qiita.com/ryo2132/items/5e102136a1d7ad5d5e43">Firebase Extensionsをサクッと試してみた 〜Firebase Extensions機能一覧、Translate Textの使い方〜</a><br /> 等サービスでは言語の翻訳機能である「Translate Text」を使っています。</p> <h3 id="Translate Textの導入"><a href="#Translate+Text%E3%81%AE%E5%B0%8E%E5%85%A5">Translate Textの導入</a></h3> <p>拡張機能は非常に簡単に使えます。<br /> プロジェクト画面で、Extensionをクリックして、Translate Textをインストールします。<br /> <a href="https://crieit.now.sh/upload_images/17b710458ad6f0a9758789a371d98e605d9d238fd7dd8.jpeg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/17b710458ad6f0a9758789a371d98e605d9d238fd7dd8.jpeg?mw=700" alt="インストール画面" /></a><br /> 左上のExtensionsをクリック<br /> <a href="https://crieit.now.sh/upload_images/936f1a11d6e108f663be7f4effa6bb8f5d9d23ce6ba7e.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/936f1a11d6e108f663be7f4effa6bb8f5d9d23ce6ba7e.png?mw=700" alt="スクリーンショット 2019-10-09 8.56.36.png" /></a><br /> 注意点は、Blaseプランにしないといけないことです。途中でプランの変更もできます。<br /> 設定もわかりやすいです。<br /> <a href="https://crieit.now.sh/upload_images/e075fe18aa2dc3bc37028967301452995d9d2475bf1af.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/e075fe18aa2dc3bc37028967301452995d9d2475bf1af.png?mw=700" alt="スクリーンショット 2019-10-09 9.04.34.png" /></a><br /> Deployment locationはどこの地域に設置するかを選択します。料金、速さを考えるとTokyo(asia-northeast1)が良いでしょう。<br /> Target Languagesは、翻訳する言語を選択します。リストはこちらに一覧があります。<a target="_blank" rel="nofollow noopener" href="https://cloud.google.com/translate/docs/languages">対応言語一覧</a><br /> Collection pathは、Firestoreのコレクション名です。ここで指定したコレクション下のドキュメントが翻訳対象のドキュメントとなります。<br /> Input fieldは、翻訳するフィールド名です。ここにフィールドに入ったテキストが翻訳対象になります。<br /> Translation outputが、翻訳された結果を入れるフィールドとなります。<br /> 以上の設定だけで翻訳機能が拡張されました。驚くほどの簡単さですね。</p> <h3 id="コレクション名、フィールド名は指定しないといけない"><a href="#%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E5%90%8D%E3%80%81%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E5%90%8D%E3%81%AF%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%AA%E3%81%84%E3%81%A8%E3%81%84%E3%81%91%E3%81%AA%E3%81%84">コレクション名、フィールド名は指定しないといけない</a></h3> <p>ここから、実装や本番で運用していて気づいたことなどの共有です。<br /> 先ほどの拡張機能の設定でもおわかりのように、コレクション名やフィールド名はこの拡張設定の段階で先に指定しておく必要があります。<br /> ですから、途中でコレクション名はフィールド名を変更したくなったら、このExtensions画面で編集し直す必要がありますので注意が入ります。<br /> また、この性質上、アプリを運営していて、途中でコレクションやフィールドを変更したい場合はかなり大変になりそうなので、そこの設計は最初の段階でしっかり決めておいた方が良いと思われます。</p> <h3 id="サブコレクションでは使えない"><a href="#%E3%82%B5%E3%83%96%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A7%E3%81%AF%E4%BD%BF%E3%81%88%E3%81%AA%E3%81%84">サブコレクションでは使えない</a></h3> <p>次に、このTranslate Textは、現在、サブコレクションでは機能しませんでした。<br /> つまり、コレクション名を「User」にして、そのサブコレクションに「text」と指定するような方法は使えないということです。<br /> イメージとしては、翻訳専用にコレクションを一つ設けて置くという感じになります。最初サブコレクションで使おうと思ったら機能しなくて少し混乱しました。</p> <h3 id="Cloud Translateの無料枠は適応されない"><a href="#Cloud+Translate%E3%81%AE%E7%84%A1%E6%96%99%E6%9E%A0%E3%81%AF%E9%81%A9%E5%BF%9C%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84">Cloud Translateの無料枠は適応されない</a></h3> <p>追記:修正されました<br /> <a target="_blank" rel="nofollow noopener" href="https://qiita.com/katonobo1/items/79706d986baea5033531">Cloud Translation APIの料金体系が11月1日から変更になり、Firebase ExtensionsのTranslate Textでも無料枠が使えるようになった</a><br /> こちらのFIrebaseを使ったTranslate Textでは、Translation APIの無料枠は適応されませんでした。<br /> <a target="_blank" rel="nofollow noopener" href="https://cloud.google.com/translate/?hl=ja#jump-to-3">Translation API の料金</a><br /> <a href="https://crieit.now.sh/upload_images/71b53c705d25542ddfb8035550adaf7a5d9d28e59e899.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/71b53c705d25542ddfb8035550adaf7a5d9d28e59e899.png?mw=700" alt="スクリーンショット 2019-10-09 9.24.28.png" /></a><br /> 私は当初このTranslateAPIの無料枠(500,000文字まで無料)が適応されると思っていたのですが、されませんでした。<br /> つまり、いきなり最初から課金が発生します。100万文字で20ドルのようです。<br /> おまけ機能くらいでつけるなら問題ないですが、当サービスは翻訳メインで作ったのでちょっと当てが外れた感じです(笑)<br /> また、無料サービスでの運営でこの拡張機能を頻繁に使うのは収益を考えると少し工夫がいるのかなとと思います。</p> <h3 id="とにかく簡単だから良いサービスです"><a href="#%E3%81%A8%E3%81%AB%E3%81%8B%E3%81%8F%E7%B0%A1%E5%8D%98%E3%81%A0%E3%81%8B%E3%82%89%E8%89%AF%E3%81%84%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%A7%E3%81%99">とにかく簡単だから良いサービスです</a></h3> <p>ただ、本当に簡単に拡張できるので、本当に便利なサービスだと思いますし、選択肢として頭に置いておいて損はないでしょう。他の拡張機能はまだ使っていませんが、この感じなら他の拡張機能も簡単に使えそうです。<br /> Firebaseは個人開発の強い味方ですね!これからも本番で得た知見はどんどん共有したいと思います!</p> katonobo