プログラミング初心者がFlutterとchatGPTを使って3週間でアプリを作った話
イントロ
YouTubeを見てて、ふとしたきっかけでプログラミング初心者の自分でもアプリが作れるんじゃないかと思い、3週間で完成させた話を共有しようと思います！
これからプログラミングを頑張ってみたい人や、既にエンジニアだけどchatGPTが本当に開発に役立つのかどうかを知りたい人のお役に立てれば幸いです。
今の時代なら誰でもアプリが簡単に作れます！
自己紹介
自分は3ヶ月前までプログラミングなんて全く触れたことがない人間でした。
しかし、最近流行りのAI、chatGPTに関して色々と話を聞いてみると、「もしかしたら自分もchatGPTを使えばアプリが作れるんじゃないか！？」と思うようになってきました。
LINEの「AIチャットくん」なんかもchatGPTを利用して一日で作られたらしいですね。
でもあれは元々アプリ開発経験のある人たちが作ったものなので、「本当にプログラミング初心者でもchatGPTさえあれば簡単にアプリが作れるのか？」という疑問を持ちつつも、半信半疑で挑戦してみることにしました！
自分のスキルについて
-
ある程度の英語ができるレベル
英語が好きで留学などもしていました。しかしネイティブと普通に会話できるレベルではありません。海外で拙くとも生活していけるレベルです。なので、今回は自分のためになりそうな英語勉強アプリを作ろうと決めて開発に取り組みました。 -
プログラミングには全く触れたことはないけどパソコンはある程度使える
ネットは元々好きなので、色んなwebサービスを利用して快適なパソコンライフを送っていました。タイピングも普通にできるレベルで、色々検索する分には問題ありません。
お金を叩いてM1のMacBook Airを買ったことも今回アプリ開発をしてみようと思ったきっかけの一つです。
Flutter勉強スタート
まず何から始めたのかについてですが、YouTubeで開発環境を整えました。
このYouTubeがそもそもアプリ開発をしてみようと思ったきっかけになった動画です。この動画のKBOYさんには感謝です！
動画で言われた通りにただ進めていっただけで開発環境は整いました。この時点ではchatGPTは全く使っていません。
そして動画にあるようにiOSのシミュレーターが立ち上がり、ここから本格的なプログラミングをするという作業になってきました。
この時点では、恥ずかしながら自分がFlutterというものを使ってアプリを開発しているということすらわかっていませんでした。後々調べて、Flutterというのは一つのコードでiPhoneアプリやAndriodアプリも作れるという優れものだということを知りました。
そしてFlutterは比較的わかりやすいと評判らしいので、KBOYさんのFlutter大学というYouTubeに出会えたのは本当に運がよかったです。
KBOYさんはただ答えを教えてくれるだけではなく、間違えた部分をその場で調べて修正するという進め方をしているので、どうやって調べるのか、どうやってミスを見つけるのかといったような初心者にとって必須のスキルが身につくのでおすすめです！
勉強期間
そしてFlutter大学の動画や、英語の動画をたくさん見て丸コピするだけというFlutterの勉強を1週間くらいしました。
最初の1日目は、自分で書いたコードをこのように実機に反映させることができました。
iPhoneだとうまくいかなかったので偶然持っていたAndroidを繋げています
勉強してから1週間後くらいには、YouTube動画のコードを丸コピするだけというやり方でインスタグラム風のアプリのUIを作れるようになりました。
その後、自分で考えた機能をゼロから作る挑戦をしたりしましたが、勝手にボタンが大きくなって画面からはみ出たりとハプニングだらけでした。今ではいい思い出です。
animation機能で遊んでいた頃
自力で作り始める
この辺りから自分で色々考えて作ってみようと思い始めたのですが、そもそもプログラミングの基礎を知らないでコピペだけでやってきた身分としては限界を感じ始めました。
Stack OverFlowというプログラミングに関するサイトがあるので、それを頼りに少しづつ勉強してきましたが、それがまあ難しいのです。
このサイトは全て英語で、英語は頑張れば読めるので良いのですが、「こうすれば出来るよ」と書いてあるコードをどのようにして自分のコードに当てはめれば良いのかすら分からないというのが問題でした。
そこで、chatGPTの登場です。
そもそも、Stack OverFlowやGoogle検索して解決できる人というのは、自分が抱えている問題をちゃんとキーワードにできる人ですよね。
「〇〇が原因でこのエラーが発生する」と自分で原因を把握している人です。
しかし初心者の自分は、何のエラーが起きているか分からないしそもそも自分で書いたコードが何をしているのかさえ把握しきれていない状態です笑。
最初はみんなそうだと思います。そして、最終的に調べることができないから諦めてプログラミングを辞めてしまう感じですよね。
調べる能力こそがITスキルを左右しているのですが、もうそんな時代はおしまいです。
自分のコードをchatGPTに丸投げして、最後に「これだとバグるんだけど？」「これは何してるコードなの？」「というか自分は一体何をしているんだ？」など質問するだけで解決できる時代がきました。
プロから見るとまだchatGPTじゃ解決できないという声もあるらしいですが、初心者の入口としては十分すぎると思います。
そうやってchatGPTと会話しながら練習をしていくと、本当に初心者でも開発出来るかも‼️と感じ始めたので、まだ趣味感覚だったFlutterで、本格的に自分で考えたアプリを作っていこうと決心しました。
chatGPTとの開発
皆さんもchatGPTに何か質問したりした経験があると思いますが、たまに「いやそうじゃなくて...」と思うような回答が来ることもありますよね？
chatGPTを利用して開発するためには、いかに自分が適切な質問をできるかが重要になってきます。
ひたすら質問し続ければ、chatGPTの性格を知り、癖を知り、chatGPTをうまく利用することが出来るようになるはずです。
ここからはchatGPTと共に英語学習アプリ「Habit」を開発してきた具体的な話をしていこうと思います。
英語学習アプリ「Habit」をchatGPTとFlutterで開発
開発の前段階
まずアプリ開発はコードを書く前にコンセプトを決めたり色々やらないといけないことがあります。アプリ名やアプリのアイコンなども必要になってきます。なので参考になるテンプレを作ったので参考にしてください。(最初にやっておくべきだったと後悔しました)
アプリ開発に必要な情報(プログラミングとは関係ない部分)
アプリ名
アプリ名を決めましょう。基本的にiPhoneで見ると約20文字以上ははみ出て読まれませんが、検索ヒットされるためにちゃんと考えた方が良いかもしれません。
例：「Habit - リアルな英語を動画やフレーズで覚えよう」
サブタイトル
サブタイトルはApp Storeでアプリ名の下に表示されるものです。
例:「使えるネイティブ英会話が9000フレーズ集約！」
年齢制限
これもちゃんと指定しないといけない項目です。アプリ内で大人向けの表現があるのに年齢制限を低く設定していると、アプリの審査が通らない可能性があります。
例:「17+」
プライマリ言語
主にアプリを使ってもらう国の言語で良いでしょう。
例:「日本語」
アイコン
アプリアイコンは1024 × 1024 pxのサイズである必要があります。
例:
スクリーンショット
これが一番面倒臭いです。
App Sroreでは5.5inch、6.5inch、6.7inch、12.9inchのそれぞれに最低3枚以上のスクリーンショット画像が必要になります。つまり12枚作らないといけないですね。たまに画像を載せようとしてもイメージにアルファチャンネルや透過を含めることはできません。とエラーになることがあるので、これで対処してください。
- 5.5inchでは1242 × 2208 pxのサイズである必要があります。
- 6.5inchでは1284 × 2778 pxのサイズである必要があります。
- 6.7inchでは1290 × 2796 pxのサイズである必要があります。
- 12.9inchでは2048 × 2732 pxのサイズである必要があります。(iPad用)
アプリ概要
アプリの説明文です。
例:「◆英語アプリの決定版!!◆ ネイティブが使う英会話や、映画で使われる「今すぐ使えるフレーズ」を学べる英語学習アプリ。....」などなど
アプリキーワード
これは検索にヒットさせるために必要になってきます。
例:「英語,英会話,英単語,英語勉強,」などなどカンマで区切ってたくさん書けます。
サポートURL
これは多分ユーザーが開発者に連絡できる手段が必須だとかという理由だったかと思います。
ツイッターアカウントを作り、そのURLで問題ありません。
著作権
そのアプリは誰に著作権があるのかということですね。
自分のDeveloperアカウントの名前で良いと思います。
プライバシーポリシー
これも必須です。notionなどで作ってそのURLを載せれば良いです。プライバシーポリシーや利用規約の作成は面倒くさいですが、他のアプリなどを参考にして頑張りましょう！
App Storeに掲載するためのスクリーンショットはfigmaで作成しました。
これを機に初めてfigmaを触ったのですが、感覚的に操作ができるので本当にすごいサービスです。
デザインセンスはないので、上に文章、下にiPhoneのスクショを置くというシンプルな形を取っています。
こんな感じに、App Storeのスクショを撮ってその上で作ると実際に表示された時がイメージしやすくて良いと思います
ちゃんとそれぞれのサイズのスクリーンショットを用意しました
アプリ開発スタート
まず大前提にあったのは英語学習というコンセプトです。自分の経験をもとに、タメになりそうな機能をつけていけたらなぁくらいの感覚です。
特にこういう機能を持ったアプリを作ろうと思って開発を始めたわけではないので、作りながら思いつき次第で機能を付け加えていこうというやり方にしています。
普通は機能やデザインを決めて作っていく方が良いと思いますが、初めてのアプリ開発なので何も気にせず作り始めました(そのせいでchatGPTには苦労をかけました）。
もちろんこの時はアイコンもアプリ名も決まっていません。
最初は、画面上に日本語訳のついた英語フレーズをいっぱい表示して、一覧して見ることができれば十分だと思っていました。
これはFlutter初心者でもできるくらい簡単でした。
フレーズのデータを用意して、そのデータをListViewで表示すれば良いだけの話です。
なので、まずはたくさんのフレーズが欲しいのでchatGPTに頼りました。
以下のプロンプトのように、使って欲しい英語フレーズをchatGPTに伝えて、json形式でいっぱい書き出してくださいと指示を出しました。
このプロンプトで結構良い出力をしてくれるようになったのですが、ここに至るまで何度もやりとりをしました。
そもそも自分がフレーズデータをどんな形式で作っていくべきかすらわかっていなかったので、そこから質問をしていって「こんな感じのjson形式がおすすめです」と言われたので、それで2つくらい自分で作り、それをまた参考にして作ってもらい、プロンプトをちょっと変えていきながら調整していきました。
「こういう答えが欲しいんだけど、chatGPTにどんな質問をすれば良い?」とchatGPTに聞いたりもしました。
もちろんjsonについても分からなかったので、それについても教えてもらいました。
そしてchatGPTの記憶力について気づいた点があります。
最初は上記のようなプロンプトを投げて、そのあとは「同じように続けてください」と言うだけで英語フレーズをjson形式で続けて出力してくれるのですが、何回か続けると途中でおかしくなってきます。
調べてみるとchatGPTは9回くらいしかやりとりを記憶しないという噂があったのですが、本当でした。
なのでおかしくなってきたら新しくNew Chatを作り、再度上記のプロンプトを投げて数回だけ「同じように続けてください」を繰り返す方法を取りました。
また、一回の質問の文字数をどれだけ記憶できるかについても感覚的に理解していきました。
新機能が欲しくなる
とにかくchatGPTと共にフレーズを増やしていったのですが、途中で飽きてしまい、新機能を考えるようになりました。
- 「その英語の発音を聞きたい」と思い立つ
その英語のフレーズの発音を聞きたい場合があるので、テキストを発声させられるかどうかchatGPTに質問しました。
これでflutter ttsの存在を知り、使い方も教えてもらい、googleでも調べながら発声機能を作ることができました。（音声はAI感が半端ないです）
- 単語のゲーム機能も欲しくなる
まずは英単語と、その日本語訳を持つデータをchatGPTに作らせます。
「とにかくたくさん作ってくれ」と言うと簡単な英単語しか作ってくれなかったので、「このレベルの単語、TOIECに関する英単語」のように細かく指定するとまともなリストを作ってくれました。
final List<Map<String, dynamic>> toeic500Data = [
{Data.wordEn: 'company', Data.wordJp: '会社、仲間'},
{Data.wordEn: 'refer', Data.wordJp: '言及する、述べる'},
{Data.wordEn: 'business', Data.wordJp: '商売'},
{Data.wordEn: 'likely', Data.wordJp: '起こりそうな、可能性が高い'},
...
]
このようなデータを使ってゲーム機能をchatGPTに作ってもらいました。
ゲームのルールを伝えるのは結構大変でした。どんなゲームかというと、
このように画面を左右で分けて、単語が降ってくるゲームです。
最初のプロンプトでは
画面を左右に分けて左は英単語を5秒かけて降らせて、
その英単語の日本語訳を含めた3択の答えを用意して、
5秒以内に正解をタップしなかったら不正解とする。
右は...
みたいな感じで適当に質問しました。そしたらなんと1回目で出力したコードでそれっぽく動くものができました！
しかし、明らかにルールの説明不足だったので、英単語は永遠に下に降って戻ってこなくて、正解をタップしても何も起きないという状態なので、何度もそのゲームに関する細かいルールを伝え、なんとか完成させることが出来ました。
自分の思っているゲームになるのにかかった時間は、chatGPTとのやりとりを含めて30分くらいだったと思います。本当にすごいことです。
プログラミング初心者が30分でゲーム機能を作れるようになりました。
そのあとは自力でデザインを調整していきました。エフェクトを付けたかったので動く何かしらが欲しかったのですが、Lottieにあるファイルを使えば良いよと教えてくれました。
- 動画とスクリプトで勉強したくなる
英語の勉強で自分自身一番タメになったのは、Netflixで英語字幕と日本語字幕を同時に見ることでした。
N英というchrome機能でNetflixで英語の勉強をしていたので、これと同じようなことをYouTube動画を使ってアプリで実現できたらなぁと思いchatGPTに頼りました。
そして出来たのがこれです。
これを作るときは以下のような細かい機能ごとに質問をしていきました。
- YouTubeを表示する方法
- 指定した再生時間に移動する方法
- スクリプト部分のリストビューを自動的にスクロールする方法
(そのYouTube動画についている英語字幕と日本語字幕をスクリプトに使っています。)
これはやることが多かったので1日ぐらいかかったと思います。
- その英語の発音を色んな動画で聞きたい
YouGlishという英語学習者向けのマイナーなサイトがあります。
指定した英語の発音を色んなYouTube動画でその部分だけを繰り返し聞けるサイトです。
自分もこれで英語の勉強をしたことがあったので、この機能をアプリで実装したいと思っていました。
ゼロから作るとなるとさすがに無理があるのですが、運よくYouGlish自体がAPIを用意してくれていたのでやってみようと思いました。
そのYouGlishが用意してくれたAPIの使い方を読んでみると、JavascpritやHTMLで色々やっているみたいだったので、Flutterしかいじったことのない自分には無理かと諦めかけました。
しかし、chatGPTならなんとかしてくれると思い、まずはそのYouGlishのAPIの説明文をコピペしてchatGPTに理解してもらいました。
するとchatGPTは「こういうことができる機能なのですね」と理解してくれたので、そのまま自分のコードを示しつつ、「ここで使えるようにしてほしい」と伝えると、一発で動くコードを教えてくれて、少し微調整してこのようになりました。
このように、
class YouGlishDialog extends StatelessWidget {
const YouGlishDialog({
required this.searchText,
super.key,
});
final String searchText;
Widget build(BuildContext context) {
InAppWebViewController? webViewController;
final initialHtml = '''
<!DOCTYPE html>
<html>
<body>
<!-- 1. The widget will replace this <div> tag. -->
<div id="widget-1"></div>
...
Flutter内でHTMLを使うとは思っていなかったのですが、そういうやり方もあるみたいです。HTMLは小学校で少しいじった以来で全く分からないのですが、captionSize: 80,とか書いてある部分は数字を変えればきっと変わるんだなと分かるので、分かる部分だけ微調整した感じです。
chatGPTに課金
コードに関して質問し始めてからは、chatGPTの凄さに感動したので課金することにしました。コードに関する質問は有料版で使えるGPT-4を使い、英語フレーズの生成などには元々使えるGPT-3.5を使うようにしました。
理由は、GPT-4には3時間で50回しかやり取りができないという制限があるのですが、それよりも何よりもGPT-4はGPT-3.5よりも生成が遅いというのが嫌だったからです。どちらでも同じ回答になるような簡単な命令(英語フレーズの生成など)であれば無料版で十分です。（いや、むしろ無料版の方が良いです）
しかし文字数の多い質問や精度の高い回答を求める必要があるのであれば有料版のGPT-4が良いと思います。特にコードの質問をするときは、自分のコードを全て書き、最後に「このコードだとバグってしまうのは何故？」と聞いたりするので、文字数がかなり多くなってきます。
感覚的には200行くらいのコードに関して質問しても全然平気です。
この質問では200行くらいのコードを最初に書いて、その後に質問を加えています。結構適当に質問しても良い回答をしてくれます。「*声r=これ」
- 今後のchatGPTに期待すること
chatGPTの記録力が成長して、テキストファイルをいくつも保存できて記憶してもらえるようになったら本当に化け物AIになるだろうなと思っています。
開発コードはいくつかのファイルに分かれていて、それぞれが関連性を持っているわけですが、質問するときは一部のコードしか基本伝えません(面倒臭いので)。
そこで、他のファイルのコードもちゃんと記憶した上で回答してくれると助かりますよね。
既にVSCode内でchatGPTを使える機能があるのですが、微妙でした。。
chatGPTをただVSCode内で表示しているだけに近かったのであまり意味がありません。
VSCode内の全てのファイルを記憶した上で回答してくれるのであれば、それはもう化け物です。
あとはchatGPTが持つデータが確か2021年くらいまでだったと思うのですが、それが最新になったらすごいことになりそうです。
例えば、Flutterのaudioplayersについて聞いたときに回答されたコードが、そのコードは古いので変更してくださいと警告されたり、そのコードは存在しませんとエラーが出たりします。
調べてみると、それはaudioplayersの古いバージョンの使い方だったようです。
なので最新のデータに対応することを願っています。
やり取りも全て記憶して欲しいですね。
chatGPTに「この前教えたのにもう忘れたんですか？」とか言われたら面白いですよね。
期待しています。
まとめ
そんなこんなでプログラミング初心者だった自分でも、Flutterの勉強を少しと、chatGPTを使うことで3週間でアプリの開発をすることができました！
chatGPTとのやりとりは累計で数百を超えたんではないでしょうか。
全て日本語で質問しました。
英語で質問した方が良いらしいですが、あまり関係ないと思います。
適当な日本語で誤字脱字があったとしても問題なく意図を汲み取ってくれるので、そこで英語力は必要なさそうです。
google検索は漠然と知りたい時に使い、具体的に知りたいことはchatGPTで聞く、という使い方をしました。
もちろん正しくない回答もあるので、それが正しいかどうかをgoogleで検索するというのも大事です。
chatGPTが凄いという話でしたが、単純にFlutterも楽しかったです。
Widgetという物体をパズルのように組み立てていく感覚が理解しやすくて、さらに編集した部分がすぐにアプリの画面に反映されるのも楽しかったです。
これからもFlutterにハマっていきそうです！
そして、アプリもダウンロードしてください！
絶対にタメになる英語学習アプリです！
「chatGPTで出来たアプリのクオリティはどんなもんだ？」と疑問に思う人もいるかと思うので、その目で確認してみてください！
あと適当だけどWordPressにxmlファイルインポートしてweb版にもしてみたりしました。https://habitenglish.wordpress.com/
Discussion