アプリ開発 プログラミング

【アプリ開発】FlutterでQuizWikiアプリを作る　①環境構築編

[temp id=4]

皆様こんにちは。

今回から私の作ったQuizWikiをFlutterを使ってiOS,Android対応のアプリ化していきたいと思います。

今回使うFlutterは本当に初めて使います。全くわかりませんが、公式のチュートリアルを日本語化しつつアプリの完成に近づけていきたいと思います！

ちなみにQuizWikiはこちらです。

環境構築

iOSアプリでも出したいのでMacを使用して環境構築をしたいと思います。

参考にするのは本家のドキュメントです。Google翻訳を駆使しつつできるだけ日本語化しながら皆さんも試しにできるようにしたいと思います。

インストール

以下のリンクにアクセスします。

https://flutter.dev/docs/get-started/install

アクセスした画面

macOSのボタンを押して以下の図のように[fulutter_macos_X.XX.X-stable.zip]ボタンを押します。

fulutter_macos_1.22.5-stable.zipのボタンを押す

Extract the file in the desired location, for example:

https://flutter.dev/docs/get-started/install/macos

好きな所においてください的な事が書いてありますね。例で示されているのはユーザーフォルダ配下に展開しているようです。試しにやってみましょう。

ターミナルを開いてください。

次のコマンドを実行し、ダウンロードしたファイルを解凍します。

unzip ~/Downloads/flutter_macos_1.22.5-stable.zip

の部分は公式サイトに書かれてあるとおりに入力してください。

mkdir ~/development
cd ~/development/
unzip ~/Downloads/flutter_macos_1.22.5-stable.zip

パスを通す

解凍したら使えるようにするためにパスを通します。

開いているターミナルに次のコマンドを打ち込んで下さい。

export PATH="$PATH:`pwd`/flutter/bin"

この方法だとウィンドウを閉じるともう一度打ち込まなくてはいけなくなるので一作業追加でしておきましょう。

vi ~/.bash_profile
export PATH="$PATH:/Users/uedive/development/flutter/bin"
source ~/.bash_profile

Flutter doctorを実行する

セットアップを完了させるために次のようなコマンドを実行しましょう。

flutter doctor

このコマンドでは環境をチェックしてターミナルにレポートを表示するようです。他にインストールが必要な場合はその案内が出るようです。

私の環境の場合次のような文言が出ました。

[✓] Flutter (Channel stable, 1.22.5, on Mac OS X 10.15.7 19H2 darwin-x64, locale ja-JP)
 
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
[!] Android Studio (version 3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.52.0)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

一つ一つ解決していきましょう。

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

AndroidSDKのバージョンが古いようです。解決するためのコマンドを用意してくれているので実行しましょう。

flutter doctor --android-licenses
[!] Android Studio (version 3.5)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.52.0)
✗ Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

この辺はエディターの話なので今回は無視します。

[!] Connected device
! No devices available

端末はつなげていないので出るのは当たり前ですね。無視します。

iOSのセットアップ

iOS向けのアプリを作成したい場合はXCodeがインストールされたMacが必要です。

Mac App StoreなどでXcodeの最新バージョンをインストールしましょう。

インストールできたら開いたままのターミナルに以下のコマンドを打ち込んでみましょう。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

ここまでできたシミュレーターを起動してみましょう。

ターミナルで次のコマンドを打ち込みます。

open -a Simulator

[ad]

シンプルなアプリを起動してみる

ターミナルに次のコマンドを打ち込んでください。新しいプロジェクトを作成することができます。

flutter create my_app

実行後のログにあるように次のコマンドを打ち込んで実行してみます。

cd my_app
flutter run

cdコマンドで作成したプロジェクトフォルダに移動します。

移動したらrunコマンドで実行します。

少し時間がかかるかもしれませんがゆったり待ちましょう。

成功したら先ほど起動したシミュレーターがこのようになっているはずです！

簡単に始められました。

iOS実機で試す方法

sudo gem install cocoapods

上記コマンドを実行したのちに、my_app/iosのフォルダをみてみましょう。

ここにあるRunner.xcworkspaceを開きましょう。

Runner > Signing & Capabilities > Team のドロップダウンで自分のアカウントを選択します。

上部の Runner>となっている部分で自分の端末を選択して再生ボタンを押すと実機で実行することができます。

[ad]

Androidのセットアップ

Android向けにもリリースしたいのでAndroidのセットアップもしておきましょう。

Android Studioをインストールする

以下のサイトからダウンロードしましょう。

https://developer.android.com/studio

管理者
管理者

Android Studioをメインのエディタ（プログラミングするソフト）にするので必ずインストールしてください！

Android Studio セットアップウィザード

Android向けの開発を行うにはSDKという開発ツールキットのような物が必要です。セットアップウィザードにより、SDKビルドツールをインストールできます。

最新のSDKをダウンロードしておく

[ad]

エディターのセットアップ

ここまでできたら実際にプログラミングするためにエディターのセットアップをしておきます。

今回はAndroid Studioを使用します。

上記のダウンロードパスからダウンロードして置いてください。

flutterとdartのプラグインをインストールする

  • Android Studioを起動する
  • (winの場合)Configure > Plugins　を選択
  • (macの場合)Preferences > Plugins を選択
Flutter のインストールボタンを押す

Flutterのインストールボタンを押すとDartも一緒にインストールされました。

ここまでで環境構築は完了しました。お疲れ様でした。

次回からは初めてのアプリを作る編でお会いしましょう。

-アプリ開発, プログラミング