プログラム未経験者が1から英語学習ゲームをつくってみる①「準備編」

 


概要

●なんか最近、アプリ制作の敷居が下がってきてるらしい?。FigmaとかmonacaとかchatGPTとか?
●以前から自作プログラム(アプリ)をつくってみたかった。老化防止にもなる?
●どうせ作るなら何か役に立つものがよいのではないか→「英語をゲーム感覚で学習できるアプリ」。
●目標はアプリストアへの登録

制作者スペック:遠い昔に仕事でエクセルのマクロを使ったような気がするおじさん。

PC環境:windows11

利用予定ソフト:Figma(お試し)、monaca(お試し)、chatGPT(3.5)など

参照サイト:Javascriptリファレンス その他

 


経緯

年を重ねていくにつれ、頭も身体もガチガチと固くなっていくのをひしひしと実感する今日この頃。身体に関しては何十年ぶりに筋トレなるものをはじめて、最近すこしはサビが落ちてきたような気がするが、頭のほうは着実に石化してきている。この状況に対してなんとかあがく手段はないものかと考えてみて、プログラミングはどうかと思いついた。実はこれは前々からやりたかったことで、何十年とTODOリストの上位に入っていたものなのだが、いざ手引き書やサイトを見てみるたびに、我が脳みそはその呪文の羅列を完全拒否するらしく、ずっと先送りになっていたのである。

思い返しても、過去にプログラミングというのは経験したことがない。無理やりこじつければ、エクセルのマクロくらいだろうか。VBAもちょっとだけかじったような気がするが、ほとんど覚えていない。そういえばさらに遠い遠い昔に、プログラムのプの字もしらないまま、無謀にもシステム会社のSEに応募して、見事不採用だったことも思い出してなんか汗がでてきた。

かくして、動機はいささか個人的ではあるけれども、試しに自作のアプリをつくることにした。そしてどうせ作るなら何か役にたつものがいいと思い、題材は英語学習のアプリにしてみた。

英語の学習に関しても、これもまたずっとTODOリストの最上位に鎮座しているもののひとつだったが、やはりなかなか進んでいない。

というわけで、今回の企画は、あわよくばこの「アプリづくり」と「英語学習」のふたつの長年の懸案を欲張りにも(何年かかるかわかりませんが)同時にコンプリートできるのではないかという、人生にちょっと焦りを感じてきたお年頃のおじさんのちょっと甘めの目論見です。

なお、完成したものはappleとgoogleのストアにいれてもらうことを目標とする。もしだめな場合はWEBサイトで利用できるものとしたい。


利用ソフトやリファレンスなど

ゲームのUIや遷移のデザインについては「Figma」を使いたいと思います。フリープランでひとつのプロジェクトがつくれますが、ページ数などは足りない可能性があるので、場合によっては有料プランも利用するかもしれません。(次点:アドビXD)

実際のプログラミングに際しては「monaca」の利用を想定しています。まだ登録もしていないので、そのへんの過程もふくめて記事にしていこうと思います。

制作に際して参考参照したサイトについても逐次掲載していくつもりです。また、例題作成やスクリプト作成に際してchatGPTについても利用してみたいと思います。


ながれ

●ゲームの仕様・内容を考える
↓レイアウト(UI)をデザインする
↓プログラミング
↓最終調整
●完成・掲載(appleストア・google app・webページ)


ゲームの仕様

では今回英語の学習アプリをつくるにあたり、どういうものにするか。
アイデアは昔からいろいろ出てきてはいたものの、いざ自分でつくるには難易度が高いものばかりだ。将来、もしスキルがあがったらそういうものにもチャレンジ出来るかもしれないが、まずは手始めはなにより自分で作れる仕様のものにしなければいけない。とりあえず完成させることが大きな目的だ。
そうこうしている時に、これならいけるかも、というアイデアが浮かんだ。
まあ、よくあると言えばよくある「問題に対して、回答を順番に押していく」スタイルのゲームだ。
ただ、カード学習のように漫然とこなしていくのは、それだけでは飽きるため、なんらかのゲーム性をいれたい。
早く正確にこなすほど高得点なるなど、モチベーション維持や繰り返し意欲を高めやすい仕組みを入れる。
また、結果は保存できるようにし、過程を確認できるようにしたい。
対象者は初級中級者(中学高校英語)とする。

このゲームの目的は、日本語に対する英文を順番に回答することを繰り返し行うことによって、文頭(言い出し)と文の塊(日本語におけるてにをは)を体感的に覚えていくものとします。
問題文は会話文を基本とし、適宜単語や連語のバリエーションを含み、同時に必要な語彙の習得も可能とします。
問題文の作成はchatGPTも活用します。
会話文の他に言い換え問題や単文、正誤問題も出題できるようにします。
また、通常の3択クイズなどにも使えるエンジンとして活用できるように設計する。

回答画面(仮イメージをFigmaで表示)

 

つづく


今後の予定

figmaで具体的なUIのデザインと画面遷移とギミック設置
javascriptとはなんぞや?
monacaの使い方

 

課題:

問題作成
問題の格納の仕方・追加の方法
321スタート・カウント表示
コンボ(連続正解)得点・スピード得点
タイムアップ制 制限時間
得点の計算・保存の方法
プログレスバー
履歴の保存
正解不正解のギミック
音声出力(次期バージョン)