技術の習得方法

【Flutter】学習開始から約2ヶ月でスマホアプリをリリースした方法【Flutter勉強方法/経過と進捗】

  /

Flutterを6月22日から学習をはじめて、この度、8月16日にスマホアプリを公開することができました!

今回はそちらの学習方法と制作の経過を共有したいと思います。

  • 勉強期間：2021/6/22 ~ 7/13
  • アプリ作成期間：2021/07/14~8/16

Flutter とは Google 社が開発しているオープンソースのアプリケーションフレームワークです。
クロスプラットフォームに対応しており、ワンソースで複数のプラットフォーム（iOS、Android、Web、Windows、Mac、Linux）に対応したアプリを開発することができます。
また、マテリアルデザインによる美しい UI を利用することができます。

ちなみに最終的にリリースしたアプリは下記になります。

エンジニアのための英語学習スマホアプリENneerをリリースしました（iOS / Android）この度、エンジニア・プログラミングのためのオンライン英語学習スマホアプリ ENneerを作成しました。 AppleStore(iP...
Contents
  1. Flutter学習フロー概要
  2. Flutter学習の経過と進捗
  3. Flutterでアプリを制作してみての感想

Flutter学習フロー概要

最初に結論を言ってしまうと、下記のような形でFlutterを勉強し、アプリ公開までしました。

  1. 環境構築
  2. YouTubeにて入門動画を見る（その後自分でカスタマイズ）
  3. 公式ドキュメントと入門書籍を見る
  4. 簡単なアプリを作ってみる
  5. アプリを1から作ってみる
  6. 公開

 

経過の詳細は下記にまとめました。

Flutter学習の経過と進捗

①開発環境構築 (2021/6/22)

開発環境構築のやり方は、下記の動画を参考にしました!

とても分かりやすく、参考になりました。

 

②YouTubeで入門動画をこちらでも実行しながら真似る。最後に自分なりにカスタマイズ。(2021/6/22)

基礎の学習は、YouTube「KBOYのFlutter大学」様のFlutter入門動画を参考にさせていただきました。

他の動画はこちらから。私はとりあえず再生リスト「Flutter基礎」を一通り見ながら動かしてみました。

www.youtube.com
外部リンク
https://www.youtube.com/channel/UCReuARgZI-BFjioA8KBpjsw
https://www.youtube.com/channel/UCReuARgZI-BFjioA8KBpjsw

プログラミング学習は、最初は模写して動かしてみて、最後は自分でカスタマイズすることを意識しているので、動画をみた後は、最終的に下記のように学んだことをもとに簡単な動きを作成してみました。

③公式ドキュメントと書籍を見る。動かしてみる(2021/6/27〜)

YouTubeで基礎を学んだ後、公式ドキュメントとFlutter用入門書籍を読みました。

Flutter公式ドキュメント

flutter.dev
外部リンク
Flutter documentation
https://flutter.dev/docs
Get started with Flutter. Widgets, examples, updates, and API docs to help you write your first Flutter app.

入門用書籍

Flutter　モバイルアプリ開発バイブル
created by Rinker
最先端モバイルアプリケーションフレームワークを徹底解説

基礎から学ぶ Flutter
created by Rinker
本書は、Googleが開発したUIツールキット「Flutter」について、基本からの応用まで丁寧に解説した1冊です。

書籍は、Flutterのことを概要で知りたいという人向けかなという印象がありました。プログラミングをこれから学びますという人にはあまりマッチしないかもしれませんね。

またどちらも、これをしっかり読めばすぐにアプリが作れます!というものでもないので、ドキュメントと書籍はさっと目を通して自分でプログラムを書くことにすぐに移った方が良いですね。

④TODOリストを作ってカスタマイズしてみる(2021/6/28・7/1)

下記を参考に簡単なTODOリストを作成してみました。

Qiita
外部リンク
Flutterで基本のTODOアプリを作ってみよう - Qiita
https://qiita.com/pe-ta/items/b3b7458059c1fd7efcf0
🧑‍💻 まえがき■やることdart&flutterにて、必要最低限の実装内容で TODO アプリを作成■やらないこと画面遷移、ルーティング変更TODO の編集、削除、並び替えMVC モデル、...

またカスタマイズとして、一覧をクリックするとその項目が完了になるようなデザインに変更するようにしてみました。

  • 初めての言語はif文どういう風に組み込むの？
  • 配列ってどうやって作成する？

ってことすら最初は大変でした…

⑤簡易アプリを作成してみる(2021/7/1~7/3)

実際に簡単なアプリを作成してみました。

機能としては、

  1. 「はじめる」ボタンを押す
  2. Gif画像で画像が切り替わる映像が数秒流れる
  3. ランダムで今日のおすすめの夕食が表示
  4. 右下の更新ボタンを押すと②〜③を再度実行
  5. 「レシピを調べる」ボタンを押すと、webviewで「レシピ + (夕飯名)」で検索した時のGoogle検索結果が出てきる

というだけのものですが、これだけでも1からやると結構大変でした。

色々と調べながら試行錯誤していました。

⑥個人開発をしてみる（英語学習ENneer）2021/07/14~

基礎がだんだんわかってきたなという段階になってきたので、早速個人開発のアプリを作りはじめました。

作成するアプリは「エンジニアのための英語学習ENneer」というものです。

元々Flutterを勉強しはじめたのが、以前WEBアプリとして作成した、「エンジニアのための英語学習ENneer」のスマホアプリ版を作りたいと思ったからでした。

 

WEBの方で一度形にしていたものなので、頭の中にどのようなものを作るかがイメージできている状態だったので、着手しやすかったです。

最初は英単語のクイズの最小限の機能のみ作成することにしました。

英単語クイズの結果の表示が下記です。

下記はクイズのカテゴリ分けページですね。

結構よくわからないエラーもたくさん出たりしていました。

その度に、半泣きになりながら調べていたり。

また、私の現在のMac Bookが6年くらい使っているものなので、Xcodeのアップデートが必要なものもあり、それも苦労しました。

状況としては、iOSアプリの公開申請をしようという時に、Xcodeのバージョンを上げないとiOS用の公開データにbuildできないよとエラーが出ました。

Xcodeのバージョンを上げるのに、MacOSをCatalinaからBig surにしなければいけない。でも実際にOSのバージョンのインストールが何回やってもうまくいかず…

最終的に、下記を参考にmac OSを上げずにXcodeのバージョンを上げることでなんとかなりました。

京極真の公式ブログ
外部リンク
【図解】Xcodeのアップデートできない症状への対策【初心者OK】
https://www.kyougokumakoto.com/2019/10/xcode-not-download.html
きょうごく本記事では「Xcodeのアップデートができません。どうしたらいいですか」という疑問にお答えします こんな方におすすめ Xcodeのアップデートができない エラーメッセージへの対策を教えてほし

 

⑦公開申請（iOS と Android）

最小限の機能は実装できたかなと思ったので、アプリをリリースしてみることにしました。

FlutterはiOSとAndroidの両方のアプリを作成できるから良いですよね。

Apple Store（iOS）への申請

Apple Storeへの申請は下準備が少し難しかったです。

ちなみに申請後、4回ほどリジェクトされました。

iOSリジェクト理由
  • アイコンがうまく設定されてなかった
  • iPadでの英語の読み上げが早すぎる
  • iPad用のスクリーンショットが、iPhoneの画像が使用されている
  • App Storeに表示されるアプリ名とデバイスに表示されるアプリ名が一致していない

大体修正して再申請すると、翌日の早朝に再審査してくれるような感じでした。

レビューが一気に来るわけではないので、却下されて、修正して、再提出して、また却下されてという感じで結構心がおれそうでした。

でもなんとか、リリースまで持っていくことができました!!

Google Play(Android)への申請

Androidアプリのリリースも行いました!

こちらは調べてみたところ、初期費用のみで、年間手数料がないようなのがとても良いですね。

実際にAndroidでアプリを動かしてみたかったので、中古で実機を購入しました。


Google Playにアプリがリリースされたのですが、実際に確認してみると、webviewの部分がエラーに!修正して再度アップしました。

のちに修正ができ、再度申請して、無事Android版もリリースすることができました。

⑧公開(2021/8/16)

iOSとAndroidアプリどちらも公開することができました!

■iOS版　is.gd/gfpVMb

■Android版　is.gd/sOf3VF

エンジニアのための英語学習スマホアプリENneerをリリースしました（iOS / Android）この度、エンジニア・プログラミングのためのオンライン英語学習スマホアプリ ENneerを作成しました。 AppleStore(iP...

Flutterでアプリを制作してみての感想

Flutterのメリット

下記が個人的にはメリットだなと思いました。

  • 一つのコードベースでiOS / Androidアプリを作成し、同時リリースができる
  • iOS / AndroidアプリでUIデザインを統一できる
  • 学習がしやすい
  • 事前のウェジェットが充実しているので、スピード早く開発ができる
  • ホットリロードが便利

Flutterのデメリット

  • 日本語の情報がまだ少ない（2021年時点）
  • ネイティブ機能を使うとき、難しい場合がある

Flutterをこれから導入したい人に考慮した方が良いと思うこと

何をするかにもよると思うのですが、ネイティブの機能を完全に使うことが難しい時があると思います。

そのため、もし何を作りたいかが明確なら、Flutterでそれを実現できるかを確認した方が良いかなと思います!

Flutter / Dartを学習してみての感想

今回Flutterでアプリを制作してみて、「DartってJavaScriptと似ていると聞いたのですが、学習しやすいですか？」と何回か聞かれました。

私も元々JavaScriptを使っていたので、個人的には導入しやすく、比較的学習コストが低いのかなと感じました。

Dartは本来、GoogleがJavaScriptの代替言語として開発されていたらしいです。ネットで調べると、「JavaScriptとJavaのちょうど中間のような言語」と表現されている人もいました。

ただ開発してみて思ったのが、まだ人気になってから日も浅いので、日本語ソースが少ないことがネックでしたね。エラーが出て調べると、英語の「Stack Overflow」のQAサイトが出てくることが多かったです。

アプリ制作をしてみての感想

アプリ制作は、この5年ほどずっとやってみたかったことの一つで、今回作成・リリースできてとても嬉しかったです。

今まで実は、アプリを作ろうと、SwiftもJavaもKotolinもReact Nativeも勉強を簡単にしてみたことがあるんですよ。

それでも作り上げることができなかった理由として、目的が「学習」になっていて、「アプリを作る」ことが目的ではなかったのかなと今なら思います。

ひたすら書籍や動画を見てプログラムを写すことを延々とやっていましたからね。

 

今回、Flutterでアプリを作成し、リリースまでできたのは、「ENneer」というアプリを作ろう!という目的が第一だったからだと思っています。

それでなかったら多分また延々と動画を写していました。

今年は自分で色々と企画しながら作成することが多く本当に色々なことを学べたなと思っています。

またTwitterで色々と進捗やアプリのリリースを発信して、リアクションをいただけたというのもすごい自分のモチベーションになっていました。

 

今回のアプリのリリースは、まだ最低限の機能しか追加していないのですが、これからもアップデートして、機能の拡充をしていきたいと思っています。

 

この度は最後まで読んでくださり、ありがとうございました。

Flutter
ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。
BLOG：https://web-creates.com/wp/
関連記事