Flutterを触ってみた

#Flutterって?

最近話題のFlutterってなに?という興味から、よくわからないけど触ってみよう!という記事です。
FlutterとはGoogleが作っているオープンソースな開発環境です。2017年にアルファ版がリリースされ、2018年2月28日にベータ版がリリースされたばかりです。
何ができるか一言で言えば、AndroidとiOSアプリが一つの環境で実現できますよ、っていう感じです。素敵です。

#今回の環境

OS: Mac OS X 10.13.3
Text editer:VSCode 1.20.1 
Flutter: Flutter 0.1.5 • channel beta

#おしながき

• Get Started
• Get the Flutter SDK
• Run the doctor
• Update your path
• Editor setup
• Test Drive
• Create new app
• Run the app

#Get Started
先ずはFlutter websiteに行ってみます。

わかりやすくGET STARTEDというボタンがあるのでとりあえず押してみます。

今回はMacOSですので「INSTALL ON MACOS」を参照します。

macOSでのインストール手順のようです。全部英語ですが、私の拙い英語力を駆使してフィーリングで進めていきたいと思います。間違いがあればご指摘にただけると助かります。

#Get the Flutter SDK

flutter SDKを取得するには、gitコマンドでリポジトリをcloneし、PATHを設定してください、と書いてあるようなので、先ずは以下のgitコマンドでflutterリポジトリをcloneします。

terminal

$ git clone -b beta https://github.com/flutter/flutter.git

terminal

Cloning into 'flutter'...
remote: Counting objects: 114298, done.
remote: Compressing objects: 100% (22/22), done.
remote: Total 114298 (delta 12), reused 14 (delta 6), pack-reused 114270
Receiving objects: 100% (114298/114298), 34.04 MiB | 1.71 MiB/s, done.
Resolving deltas: 100% (85478/85478), done.

次にパスを設定します。

terminal

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

特に問題がなければ、そのままプロンプトが返ってきます。

$ echo $PATHで表示された項目の中に[cloneを作成したpath]/flutter/binがあればオーケー。

#Run the doctor

以下のコマンドを実行後、もし依存関係で必要なものがあればインストールしてセットアップを完了してください的なことを言っているようです。なんのことかよくわからないのでとりあえず叩いてみます。

terminal

$ flutter docuter
Downloading Dart SDK from Flutter engine ead227f118077d1f2b57842a32abaf105b573b8a...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 43.3M  100 43.3M    0     0  4932k      0  0:00:09  0:00:09 --:--:-- 5152k
Building flutter tool...
Could not find a command named "docuter".

Run 'flutter -h' (or 'flutter <command> -h') for available flutter commands and options.

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.io                   ║
  ║                                                                            ║
  ║ The Flutter tool anonymously reports feature usage statistics and crash    ║
  ║ reports to Google in order to help Google contribute improvements to       ║
  ║ Flutter over time.                                                         ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting        ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://www.google.com/intl/en/policies/privacy/                           ║
  ║                                                                            ║
  ║ Use "flutter config --no-analytics" to disable analytics and crash         ║
  ║ reporting.                                                                 ║
  ╚════════════════════════════════════════════════════════════════════════════╝

よく見るとdoctorのスペル間違ってますね(お恥ずかしい)。ただWelcomeされているので結果オーライ。もう一度、今度はスペルを間違えないように叩きます(めんどくさがらずにコピペしましょう)。

terminal

$ flutter doctor
Downloading Material fonts...
Downloading package sky_engine...
Downloading common tools...
Downloading darwin-x64 tools...
Downloading android-arm-profile/darwin-x64 tools...
Downloading android-arm-release/darwin-x64 tools...
Downloading android-arm64-profile/darwin-x64 tools...
Downloading android-arm64-release/darwin-x64 tools...
Downloading android-x86 tools...
Downloading android-x64 tools...
Downloading android-arm tools...
Downloading android-arm-profile tools...
Downloading android-arm-release tools...
Downloading android-arm64 tools...
Downloading android-arm64-profile tools...
Downloading android-arm64-release tools...
Downloading ios tools...
Downloading ios-profile tools...
Downloading ios-release tools...
Downloading Gradle Wrapper...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.1.5, on Mac OS X 10.13.3 17D102, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[!] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.io/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[✓] Android Studio (version 3.0)
[!] VS Code (version 1.19.3)
[!] Connected devices
    ! No devices available

! Doctor found issues in 3 categories.

何かをダウンロードしてるようです。あとあと気づいたことですが、doctorコマンドはflutterを使うにあたって環境が整っているかどうかをチェックしてくれるコマンドのようです。ここで大事なのは中盤以降のDoctor summaryというとこから。
[✔︎]のついてる箇所は準備OKなので気にしない。[ ! ]のついている箇所は必要なプラグインなり、バージョンアップが必要ですよということを教えてくれているようです。
ここは人それぞれ表示される内容が変わるかと思われます。
私の場合はiOS toolchainの設定とVS Codeのバージョンが足りないこと、deviceが接続されてないよ、というようなことが読み取れます。
iOS toolchainの設定についてはコマンドが書いてあるので(上の出力でいうとbrew...とかsudo...とかの箇所)一つずつコマンドを実行していきます。VS Codeのバージョンアップも行います。

terminal

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.1.5, on Mac OS X 10.13.3 17D102, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)
[✓] Android Studio (version 3.0)
[✓] VS Code (version 1.20.1)
[!] Connected devices
    ! No devices available

! Doctor found issues in 1 category.

一通り設定が完了すると上記のようにスッキリとします。Connected devicesにまだチェックが入ってますが、今回実機は使わないので無視します(多分実機のことでしょう)

#Update your path

ここはよくわからなかったので最初飛ばしてましたがのちに意外と重要ということがわかりちゃんと設定しました。
一見すると先ほどやったpath設定と同じようなことをやっているように見えます。が、先ほどのパス設定のやり方ではターミナルのセッションが切れる(ターミナルを閉じたり、新規に開いたりする)とパスが見えなくなってしまうので毎回パス設定が必要になります。
もちろんそんな面倒なことはしたくないので以下の手順をやっておきましょうということを言ってくれています。
具体的に何をするかというと、$HOME/.bash_profile というファイルにパス設定のコマンドを書いておけばターミナルを開くたびにパス設定を読み込んでくれます。

$HOMEというのはホームディレクトリ、以下のコマンドで確認します。
$ echo $HOME
そうすると/users/[ ユーザ名 ] のようなパスが表示されます。ホームディレクトリに戻りたいときは
$ cd $HOME または $ cd ~で戻ることができます。
ホームディレクトリに .bash_profileというファイルがなければ作ってしまいましょう。テキストエディタで.bash_profileを開き、
$ export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH
を追加しますが、[PATH_TO_FLUTTER_GIT_DIRECTORY]の箇所はflutterのリポジトリをcloneしたパスに書き換えます。
保存し、
$ source $HOME/.bash_profile
のコマンドを実行すると何かがリフレッシュされるようです。これでターミナルを閉じたり新規に開いたりしても$echo $PATHでパスが設定されていることを確認できます。

これで一通り環境構築ができたかと思います。次はエディタ環境設定に移りますが、flutter開発はAndroid studioやIntelliJ IDEA、VS Codeなどにプラグインを設定することで好きなエディタで開発が行えるようです。私はVS Codeが好きなのでVS Codeで環境構築がしてみます。

#Editor setup

自身が使うエディタ、IDEに合わせて設定を行います。今回はEditor Setupを見にいきます。

さて、まずは

VS Code 1.20.1 もしくはそれ以上のバージョンを使用します。2018年3月現在では最新のようです

Dart Code pluginの設定。DartとはGoogleが作っている言語だそうですが、今回は詳しく触れません(語れるほど知りません)。

拡張機能タブでDart Codeを検索するとすぐ出てくるのでインストール、再起動。以上です。簡単ですね。

ここはハマりました。VSCodeの機能検索でdoctorを検索すると”Flutter Run Flutter Doctor”が出てくるのでOUTPUTを参照しましょうというような手順なのですが、いくら検索しても一向に出てこないので困りました。結果的に手順Create new appで作ったプロジェクトフォルダ配下で実行すればよかったのですが、このページからは読み取れなかったです。。。

#Test Drive

エディタ設定手順画面で設定が終わったらNext stepリンクで次にいきます。

Android, VS Code, Terminal + editorでのやり方が載ってます。今回はVS Codeを見ていきます。

#Create new app

VS Codeを起動してコマンドパレットからflutterを検索して”Flutter: New Project”を実行しなさい。その際にproject name(例えばmyapp)を設定すればビルドOKだよ、projectができるまで待っていれば、main.dartが開くよっと書いてます。
言う通りにすると、

こんな感じでいろんなファイルが作成されました。

#Run the app

項目1ではVS Codeの右下にtarget device つまり起動したいデバイスが表示されているから確認してね、と書いてありますが、

No Devices です。調べてみると手順が載っていました。iOSではコマンドでエミュレータを起動。AndroidではAndroid studioを起動してエミュレータを起動するみたいです。Android studio を起動するのは手間なのでiOSで試して見ます。
ターミナルから
$ open -a Simulator
のコマンドで起動します。エミュレータが起動すると、

iPhone Xが認識されました。
次にVS CodeからF5またはデバッグ>デバッグの開始からアプリケーションを起動します。

無事起動できました。デフォルトで作成されるアプリは、右下のボタンを押すと真ん中の数字が加算されていくだけの簡単のものです。ここまでがflutterで言うHELLO WORLDのようなところでしょうか。

#終わりに
今回は環境構築のみ。これだけでも意外と大変でしたが、自分が失敗したところも含めて掲載しているので誰かのお役に立てるかもしれないし立てないかもしれません。
いずれアプリの方も作ってみたいなと思います。