思索日記

本を読んで思ったことを書いてます。

英単語学習アプリ 公開のお知らせ & ChatGPTでアプリ開発はどの程度できるのか？

技術 ChatGPT

ごあいさつ

本日、私たちの最新のスマートフォン向け単語学習アプリ “FlashCard(仮)” をリリースできることを光栄に思います。 なんちゃって。*1

この記事では、アプリ公開のご報告と簡単なご紹介をさせていただき、その他開発にまつわる雑記を書き留めておきます。

アプリのご紹介

概要

FlashCard(仮)はスマートフォンのWebブラウザ上で動く、英単語学習アプリです。 2024年3月現在、TOEIC向けの単語データを1250語収録しています。

こちらからお使いいただけます！ ※スマートフォン限定です。PCでも動くと思いますがスマートフォン向けにレイアウトしています。

コンセプトと機能のご紹介

コンセプト

  • 無料・広告なし: FlashCard(仮)は無料でお使いいただけます。有料プランや有料機能はありません。広告も一切ありません。
  • シンプルなデザイン: キャラクターやゲーム要素を排除して、シンプルで機能的なデザインを目指しました。
  • 登録不要: FlashCard(仮)はWebブラウザ上で動作し、会員登録やアプリストアからのダウンロードは不要です。

機能

  • 4択の英→和 形式で単語の学習ができます。
  • ミスした単語の復習ができます。
  • 間違えた単語、チェックした単語を優先的に学習できます。記録はブラウザ内に保存されます。

開発経緯

開発のきっかけは、自分の英語の勉強にためにシンプルな英単語帳アプリがほしかったためです。既存の単語アプリはゲーミフィケーションやキャラクター要素があったり、定められたレールに従って勉強している感が強い(前のセクションを完了しない次に進めない、等)といった特徴がありました。私はこれが嫌で、もっとシンプルな単語学習アプリがあったらいいなと思うようになりました。

次に自分の勉強のために調べたところTOEIC Service Listという公開された単語リストを見つけたので、これを使って効率よく勉強する方法はないかなと模索しました。当初はこれをNotionにインポートして、日本語訳をつけて単語帳(表面に英語、裏面に日本語が書かれたカード)の代わりにしようかと思っていました。

最終的に、TOEIC Service Listの英単語集を活用して、自分の好みの英単語学習アプリを作ってしまうのがベストという結論になりました。なのでこのアプリは、私自身がほしい最低限の機能が搭載されている状態になっています。趣味でアプリ作れるって素敵ですね。*2

ハンドメイドアプリ(画像はAI生成)

なぜ完全無料が実現できるのか？

本アプリは完全無料&広告なしで公開します。なぜそんなことができるのかを書いておきますね。

  • 個人の趣味とスキルアップのための開発: そもそもこのアプリ制作は自分の趣味でやっているものであり仕事ではないので、利益を出す必要はないのです。アプリの開発過程(企画、開発の各工程)を一人で経験し、新しい技術も学ぶことができるため、収益が出なくても「作った時点で私の得」なのです。
  • ブラウザ上でのみ動くため、クラウドサービスを使っていない: 本アプリはブラウザ上で完結します。多くのアプリはデータの保存のためにクラウドサービスを使っていますが、このアプリではデータはブラウザ(スマートフォン)内に保存されます。つまり、お金がかかるクラウドサービスを使っていないので、無料のまま公開できています。
  • もともとレンタルサーバーを使っているので、追加費用がかかっていない: アプリを配信するサーバーも、私が別用途でもともと用意しておいたレンタルサーバーの一部を間借りして使っています。なので追加の費用がかかっていません。*3
  • 問題データの作成にTSLとChatGPTを活用している: これが核心ですが、問題データのもととなる単語データとして前述のTSL(TOEIC Service List)を使っています。また単語データから大量の四択の問題を作成する際にはChatGPTを使い、これにより手間をほとんどかけずに問題を作成できました。

ChatGPTの活用について

本アプリの開発にあたっては、ChatGPTを全面的に使いました。完成したアプリの機能にChatGPTが搭載されているわけではなく、あくまでも開発の際のサポートに使ったという意味です。

問題データの作成へのChatGPT活用

NGSLP(New General Service List Project)のページで、TSLの単語データを入手可能です。この単語データをChatGPTに処理させて、四択の和訳問題を作成しました*4。ChatGPTではあまりに多すぎる入出力を扱えないため、単語は50語ずつに区切り、区切ったセットをChatGPTに渡しました。

開発したアプリが読み込む単語データの形はJSONという形式です。この形式は人間や機械にとっての可読性が高い反面、文字数がやや多くなるという欠点があります。ChatGPTで入出力する文字数をなるべく減らすために、このJSON形式でいきなり出力させず、まずCSV形式で出力させるようにしました。次のようなプロンプトを使って単語データを処理しました。

あなたは日本の一流大学で働く、英語の授業の講師です。これから示すTOEIC Service Listの単語を使って、和訳問題の選択肢を作成してください。手順は次に従ってください。

1. 入力はカンマ区切りで、複数の英単語が与えられます。注目する1つの英単語をwとします。
2. wの日本語訳をjとします。jの候補が複数考えられる場合、最も一般的または適切な日本語訳1つをjとして採用してください。jの選択では、直接的なカタカナ語よりも日本語の同等語を優先してください。ただし、現代の日本語で一般的に使用されているカタカナ語（例えば、「スマートフォン」）は適宜使用しても構いません。英単語が和製英語や英語からの借用語である場合、その用法の違いを考慮して、最も適切な日本語訳を選んでください。
3. wを使った英単語の和訳4択問題を作成します。ダミーとなる回答選択肢をd[0], d[1], d[2]とします。ダミーの選択肢を作る手順は特に重要ですので、以下の指示に従ってください。
    1. ダミーの選択肢は、jとは異なる意味を持つものである必要がありますが、誤訳としてありがちなものや、同じカテゴリーから選ばれることが望ましいです。
    2. ダミーの選択肢は、wとは異なる単語に再英訳されることを確認してください。和製英語や英語からの借用語の場合、その再英訳が原語と異なることを特に注意してください。
    3. 誤訳としてありがちなものをダミー選択肢として選ぶ際には、実際の言語使用に基づく一般的な混同を考慮してください。
    4. ダミー選択肢作成にあたり、日本語話者は r/l, v/b, などの区別が苦手がちという点や、和製英語や英語からの借用語となっている類似語をうまく取り入れると効果的です。たとえば、”lawn”は本来は「芝生」と訳されますが、「ローン」と似ているので「借金」という選択肢を入れてみるなどは効果的です。
4. w1つにつき、1行で出力します。出力のフォーマットは次のようにしてください。
    
    `w, j, d[0], d[1], d[2]`
    
    例: voucher, クーポン, 証明書, チケット, 領収書
    
5. このステップを全ての単語について繰り返してください。1単語の出力が終わったら改行して、次の単語について出力します。
mosquito,obligate,oblige,occurrence,operational,outage,overcrowd,paralegal,partially,pepper,permanently,plow,query,railway,raincoat,reconsider,redesign,rehearsal,relaxation,repetition,retreat,salon,satellite,scenery,serial,sew,sketch,smartphone,soar,stimulus,stockbroker,tablecloth,thirsty,thrill,tile,toiletry,trademark,tropical,tuna,unemployed,validate,vanilla,willingness,wristwatch,abide,actively,allergy,apprehensive,automotive,bacteria

出力サンプル(最初の5行)

mosquito, 蚊, 蝶, 蜂, 蟻
obligate, 義務付ける, 解放する, 忘れる, 無視する
oblige, 強いる, 許可する, 阻止する, 逃避する
occurrence, 発生, 消滅, 維持, 固定
operational, 運用可能, 非稼働, 破壊, 閉鎖

ダミー生成のプロンプトが特に入念に書かれているのは、最初に数十個程度の単語から和訳問題を作成させた結果、ダミーの質があまり良くなかったためです。何度か改良を繰り返して、上記のようなプロンプトで最終的な出力を行いました。また、このプロンプトの改良にもChatGPTを使っています（うまくChatGPTに処理させられないのでプロンプトを改良してくれ、とお願いしました）。「和製英語や英語からの借用語の場合、その再英訳が原語と異なることを特に注意してください。」とか「誤訳としてありがちなものをダミー選択肢として選ぶ際には、実際の言語使用に基づく一般的な混同を考慮してください。」といった注文がそれにあたります。

単語データの変換スクリプトの作成にChatGPTを使用

CSV形式で出力させた後は、Pythonスクリプトを使って機械的に処理してJSONファイルに変換しました。このPythonスクリプトもChatGPTを使って作成しました*5。こういうのはChatGPTが得意ですね。テキスト処理のPythonスクリプトを作った際のプロンプトを参考までに置いておきます: https://chat.openai.com/share/ffa058fb-38e1-4df0-a300-7387b421c078

スクリプトを作成する際には要件をまとめて → その通りにスクリプトを作成させるという段階を踏むと良いっぽいです。この要件をまとめる部分にもChatGPTを使えます。上記リンクの中で、「以下に、雑に要件の内容をしゃべるので、その内容を「インデントされた箇条書き」の形式で整理してください。」と書いたあとの読みづらい文章は、私が声でしゃべって音声認識により書き取らせた文章です。ChatGPTによる文章処理は、このような乱雑な文章であったり多少変換がおかしくても、よきにはからって要件をまとめてくれます。音声認識はmacOSやWindowsなどに標準搭載されているもので十分ですよ。

アプリ開発の支援にもChatGPTを活用

実はこちらのほうがChatGPT活用の目玉なのですが、アプリ開発の要件定義や設計書の作成、ソースコード（の断片）の作成、テストケースの作成など、多くの場面でChatGPTを使いました。また今回のアプリはReactというフレームワークを使っているのですが、私は今回これを使うのは初めてで、ChatGPTにゼロからサポートしてもらいながら機能や作法を学び、アプリを作成しました*6。 ただ補足しておくと、一応私はVue.jsという別のフレームワークを触った経験があるので、その経験が間違いなく活きています。「Reactのこの機能ってVueでいうところのこれと似ていませんか？違いはなんですか？」「こういうことをやりたくて、Vueならこう実現するところだけど、Reactではどうやりますか？」のように質問すれば、自分の理解をフックにしてどんどん先に進むことができますからね。まったくプログラミング経験ゼロからChatGPT使ってここまでできました！あなたもできますよ！などと言うつもりは全然ありません。よほど頭が良いかセンスがある人はゼロからでもできちゃいそうですが。。

感想や印象としては、未知のフレームワークやツールや機能を使う際、「これで合っているのかな？」と悩むことがあまりなく、一般的と思われる手段をChatGPTが教えてくれるため最短距離を進むことができたなと思います。

開発ノート

各種URL

開発体制について

公開時点で、著者1名で企画〜開発〜公開まで行っています。

またデザイン担当としてもう1名に入ってもらったため、今後アプリの更新があるかもしれません。

使用技術のご紹介

  • React: JavaScriptのフロントエンドフレームワークです。前述の通りVueは使えるので新しいフレームワークを使えるようになりたかったこと、ChatGPTに教わることで学習のハードルが下がったことが個人的な選定理由です。使い始めてみたら、Vueよりも柔軟で緻密なデータ(ステート)管理ができるなと思いました。
  • TypeScript: 途中までJavaScriptで書いていましたが、JSDocをしっかり書いているうちに「記述量ほとんど変わらないしどうせなら正式な型情報にしてしっかり型で縛った方がよくない？」と思ったので導入。これも正解でした。
  • GitHub Actions, ESLint, Jest, Sass: そのほか補助的なツールとして使っています。Jestでコンポーネントテストを書いて、GitHub ActionsのCIでプルリク時にチェックするようにしています。あまり変わったことはしていないです。とはいえ一から設定するのは大変そうなものですが、そこもやはりChatGPTに助けてもらいました。

今後の展望

デザインができる友人に本アプリの紹介をしたところ興味をもってもらえて、見栄えのブラッシュアップをお願いできることになりました。近日中にアップデートがあるかもしれません。

機能追加について。ホーム画面周りの使い勝手が個人的に気になっている(どこまで勉強したのかがわからない)ので、少し機能追加をする予定です。それ以降はいったん自分が満足してしまえば特にアップデートはないかもしれませんが、皆様に使っていただけているようであれば機能追加を考えます。

バグ報告と単語データミス報告のお願い

不具合を発見したり、機能追加のご要望がございましたら、GitHubからご報告いただけると大変助かります。また、収録されている問題データの不備がございましたら、こちらもGitHubからご報告いただけるとありがたいです。GitHubはわからない、という場合にはメール(Notionページ内に掲載があります)か、この記事へのコメントでも構いません。

*1:”Today, we are excited to announce the release of ○○!” をやってみただけ！　参考: ChatGPTのリリースノート, GitLabのリリースノート

*2:この位にしか活きない・・・編み物や革細工作成、陶芸などが趣味な、自分好みの作品を自分で作れる人が本当に羨ましいです。私の母親がそのタイプなのですが。

*3:AmazonのS3に置いてホスティングするという手もあるんですよね。実はそっちの方が安いかも・・・ドメインお引っ越ししないといけませんが

*4:ChatGPTは有料版でのみ使用可能なGPT-4を使っています

*5:私はPython書けないので・・・

*6:今回Reactの公式ドキュメントほとんど読んでなくて、ChatGPTだけに教わりながらアプリの作成までできてしまった。なんちゅう時代だ・・・。