【Flutter入門】開発環境構築 – その①(MacOS)

Flutter環境構築①

モバイルアプリの開発は、iOSではSwift・AndroidではKotlinのように、別々のプログラミング言語を学ぶ必要があり、勉強するにはなかなか骨が折れる作業です。

これを打開しようと、昨今ではマルチプラットフォームのアプリケーション開発ができる環境が増えてきています。例えば、Facebook社が開発しているReactNativeや、Microsoft社が開発しているXamarinなどがあります。

昨年の12月にgoogle社が、同社で開発しているマルチプラットフォーム開発用のSDK「Flutter」のベータ版が外れ、正式版バージョン1.0になったことを発表しました。

本記事では、MacOSを用いてこのFlutterで開発を始めようとされている方向けに、開発環境の構築手順に関して記事にしようと思います。

Flutterの特徴

Flutterの特徴は大きく4つあります。

➀Beautiful

Flutterを使用すると、美しいアプリを作成できます。
Flutterには、iOSとAndroidの両方で”pixel-perfect experience”を提供するウィジェットがフルセットで含まれています。
また、マテリアルデザインの”究極の実現”を可能にします

➁Fast

Flutterは高速です。
Chrome, Androidの基盤となるSkia 2D graphics engineを搭載しています。
FlutterのコードはDartで、1つのコードでiOSとAndroid向けに出力できます。

➂Productive

Flutterは生産的です。
ホットリロード機能で、コード変更結果をすぐに確認することができます。
(ユーザー調査では、3倍の生産性向上につながっています!)

➃Open

Flutterはオープンです。
FlutterはBSD-style licenseのオープンソースプロジェクトで、また何千ものプラグインがあります。
標準のネイティブビルドツールを使用しているため、ネイティブコード(Kotlin, Swift)へのアクセスも容易です。

初期設定の手順

構築手順の全容は、こちらの公式サイトを参考にしました。

Flutter SDKをダウンロードし、Flutterコマンドを実行可能にする

  • STEP.1
    ダウンロードして、zipファイルを展開します
     zipファイルをダウンロードして、それを展開します。
  • STEP.2
    ファイルを置く
    解凍したファイルを自分の好きなフォルダにおきます。僕の場合は、ユーザ/ホームディレクトリ 直下に置きました。
  • STEP.3
    Flutter SDKを実行可能にする
    Flutter SDKをカレントディレクトリで実行できるようにします。ターミナルを起動して、先ほどFlutter SDKを置いたフォルダに移動し、以下のコマンドを実行します。
    export PATH=$PATH:`pwd`/flutter/bin

Flutter Doctorでのチェック

以下のコマンドを同じディレクトリ内で実行し、Flutter開発に必要な環境が整っているかチェックします。

flutter Doctor

Flutterの開発にはXcodeが必要です。以下のようなポップアップが表示された場合、インストールをクリックします。

Gitコマンドの確認ダイアログ

インストール後、再度  flutter doctor を実行します。すると、以下のような情報が出力されます。

flutter doctorコマンド実行時のエラー

いくつか問題があると表示されています。

Android SDKのために、android studioが必要

  • STEP.1
    Android Studioのダウンロード
    このリンクよりダウンロードし、インストールします。
  • STEP2
    Android Studioの初期設定
    Android Studioを起動し、初期設定を進めます。いくつか選択画面が表示されますが、デフォルトのままNextをクリックし、次へ進んでいきます。
  • STEP.3
    初期設定の完了
    初期設定が完了したら、Finishをクリックします。

Androidライセンスに同意する

  • STEP.1
    Flutter Doctorの再実行

    再びflutter doctorを実行すると、次はAndroid licenses not accepted. To resolve this, run: flutter doctor --android-licensest  と表示されました。

  • STEP2
    Androidの利用規約に同意

    flutter doctor --android-licensesを実行します。

  • STEP.3
    利用規約に同意完了

    全ての利用規約にyと入力し、同意していきます。

Xcodeのインストール

  • STEP.1
    Flutter Doctorの再実行

    再びflutter doctorを実行すると、次はiOSアプリ開発のために、xcodeが必要と出ました。

  • STEP2
    Xcodeのインストール

    App storeより、Xcodeをインストールします(これが30分以上かかります。)

  • STEP.3
    Xcodeの初期設定

    Xcodeを起動し、初期設定を行います。

iOSアプリ開発のためのライブラリをインストールする

  • STEP.1
    Flutter Doctorの再実行

    再びflutter doctorを実行すると、iOSアプリ開発のためのライブラリをインストールする必要があると出ました。

  • STEP2
    HOMEBREWのインストール

    ライブラリのインストールにはHOMEBREW(Mac OSのパッケージマネージャー)が必要なので、インストールしていない人は以下よりインストールする必要があります。以下のコマンドを実行して下さい。

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

  • STEP.3
    ライブラリのインストール
    • 以下を順に実行していきます。
      • brew update
      • brew install –HEAD usbmuxd
      • brew link usbmuxd
      • brew install –HEAD libimobiledevice
      • brew install ideviceinstaller
      • brew install ios-deploy
      • brew install cocoapods
      • pod setup(これが30分ほど時間がかかります。)

Android StudioにDartとFlutterのプラグインをインストールする

  • STEP.1
    Flutter Doctorの再実行

    再びflutter doctorを実行すると残りは Android Studio と Intellij(これは私がインストールしているため、表示されています。) にdartとflutterのプラグインが入っていないという警告です。

  • STEP2
    プラグインの検索ページまで移動

    Preferences > Plugins > Browse Repositories…をクリックします。

  • STEP.3
    プラグインのインストール

    flutterで検索し、インストールする。(FlutterのプラグインはDartのプラグインも必要なので、一緒にインストールをしてくれます)。

    IntellijにFlutterのライブラリをインストールする方法

Intellij IDEA にDartとFlutterのプラグインをインストールする

  • STEP.1
    プラグインの検索ページまで移動

    Intellijを起動し、Preferences > Plugins をクリックします。

  • STEP2
    プラグインのインストール

    flutterと検索し、インストール(FlutterのプラグインはDartのプラグインも必要なので、一緒にインストールをしてくれます)

    FlutterのプラグインをIntellij IDEAにインストールする方法

Flutter SDKをパスに通す

現在の状態ですと、カレントディレクトリのみでしかFlutterコマンドが使えません。そのため、Flutterコマンドをどこでも実行できるようにするために、パスにFlutterのプラグインを通します。

  • STEP.1
    ファイルを開く

    vi ~/.bash_profile を実行し、ホームディレクトリの.bash_profileを開きます。(まだ存在しない場合は、touch ~/.bash_profileを実行し、ファイルを作成してください。)

  • STEP2
    ファイルへのコマンドの書き込み
    • iで入力モードに切り替えます。
    • 下記のコマンドをペーストします。
      • export PATH=$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin
      • ※PATH_TO_FLUTTER_GIT_DIRECTORYには、先ほどFlutterのSDKを置いた場所を入力してください。 
    • escで閲覧モードに移動します。
    • : => w => q と順に入力し、保存してviモードを終了します。
  • STEP.3
    編集した.bash=profileの読み込み

    source ~/.bash_profileを実行して、編集した.bash_profileを読み込みなおします。

  • STEP.4
    読み込まれたかチェック

    echo $PATHを実行して、PATHが読み込まれているか確認します。

    出力されたパスの一覧の中に、設定したパスが読み込まれていたら、今後は別の場所でもflutterコマンドを実行することができます。

Xcodeのセットアップ(続き)

Xcodeの最新バージョンを使うために、以下のコマンドを実行します。

  • sudo xcode-select –switch /Applications/Xcode.app/Contents/Developer
  • sudo xcodebuild -license

Androidエミュレーターの設定

  1. Android Studioを起動します
  2. 適当なプロジェクトを作成します(これは後で削除して大丈夫です)
  3. 上のバーの右から5番目のAVD Managerをクリックします新しいプロジェクトを作成する
  4. Create Virtual Deviceをクリックします
  5. 好きな端末を選択します
  6. システムイメージを選択し、ダウンロードをクリックします。x86が推奨されています
  7. Finishを押します
  8. Android Virtual Device Managerで、Actions列のRunアイコンをクリックするとエミュレーターが起動します仮想デバイスの作成

まとめ

ここまでで、flutter doctorを実行すると、残りのエラーが、実機が登録されていないというエラーのみになります。

Flutter doctorの実行結果

次回の記事では、実際にサンプルアプリを作成し、エミュレーターでの起動確認・実機での起動確認ができる状態まで持っていきます。

Flutterの環境構築②【Flutter入門】開発環境構築 – その②(MacOS)

最後まで読んでいただき、ありがとうございました。