ごあいさつ
本日、私たちの最新のスマートフォン 向け単語学習アプリ “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ページ内 に掲載があります)か、この記事へのコメントでも構いません。