こんにちは！
最近、成人してから初めて潮干狩りに行き、ホンビノス貝(外来種)をついに採りました！
キャスレーコンサルティングCSVIT事業部Integration Tech部のおっさんエンジニアこと松永です。
iOSとAndroidアプリを、同時に開発できるフレームワークFlutterが注目されていますね。
最新の大型リリースでは、これまでに加えWebAppも同時に開発できる仕様が公開されました。
SwiftやKotlinだけでなく、ついにMonacaやCordova、PhoneGapと並ぶSDKにまで成長してきました。
Flutterは、どっちかのモバイル開発かフロントエンド業務の経験があると
環境構築は容易いのですが、初めての場合、つまずくことがあります。
優しいエンジニアが、環境構築について書いてくれているサイトがいくつかありますが、
本稿では、この環境構築を終了した初学者の方が、スムーズに開発に入れるよう、
環境構築手順で、つまずきやすいポイントを解説させていただきます。
Flutterの復習
ここで、簡単にFlutterについて復習しておきましょう。
- 開発言語はDart
- フロントエンド業務用
- Google開発のDart言語のフレームワーク
- iOSとAndroidアプリを1言語で同時に開発できる
MonacaやCordovaより簡単に扱え、
パッケージ管理ツールが読みだすYAMLに、パッケージ名を書いておくだけで
OS依存のnative機能へのアクセスも、コードを書くだけで行えます。
例えば、以下のようなことが実現できます。
ファイルフォルダにアクセス
カメラの起動
PUSH Notificationを受ける
GPS情報の取得
機種情報の取得
似たSDKに、XamarinやReact Nativeがあります。
上記両者に詳しくないですが、React Nativeのほうが近いそうです。
一般的な環境の構築は、すでに多くの解説がありますので、公式をはじめ解説記事を参考にしてください。
公式か新しい記事の参照をお勧めします。
構築には、ビルドツールとしてXcodeとAndroid Studioが必要になります。
iOSアプリのリリースのみならXcodeのみ、
AndroidアプリのリリースのみならAndroid StudioのみのインストールでOKです。
両方リリースなら、XcodeとAndroid Studio両方が必要です。
Flutter公式:ここ
本稿では、Androidで構築を進めていますが、本稿の範囲はiOS開発と変わりありません。
VSCodeでの開発者が多いことから、エディタはVSCodeでの初期開発手順をかきます。
目次
・FlutterをVSCodeで立ち上げる（前提：シュミレータがあること）
・VSCodeにFlutterの拡張を設定する
・古いGradleの場合の対処
・VSCodeからシミュレータを立ち上げる
・作業フォルダを指定する
・サンプルプロジェクトの古いGradleへの対処
・Flutterのビルドを開始し、デバッグを始める
・通常起動とVSCode起動の違い
・複数の開発環境を立ち上げる
・VSCodeでのスニペットの使い方
・VSCodeでのその他補完の使い方
・Dart DevToolsの使い方
・ビルドとテスト
ちなみに、公式には本稿の解説の途中まで書いてあります。
Flutter公式: ここ
FlutterをVSCodeで立ち上げる（前提：シュミレータがあること）
環境
OS：WIN or MAC
SDK: Android Studio (Flutter plugin)
IDE: VSCode (Dart Flutter plugin)
本稿では、環境構築自体については解説しないため、
他サイトを見てシュミレータの起動までを行ってください。
Qiita:ここ
以下図は、Android Studioです。
ここまで表示できれば、シュミレータもAndroid Studioも閉じてokです。
繰り返しになりますが、ここまでの解説はすでに多数あります。
VSCodeにFlutterの拡張を設定する
ここから本題です。
VSCodeの左サイドペインの拡張機能を押して、Flutter と入力してください。
Flutter拡張が出ますので、Installを押してください。
FlutterがDartを前提にしているため、Dart拡張を入れるよう表示されるのでそれも入れてください。
表示されなければ、Dartを自ら入力してインストールしてください。
VSCodeからシミュレータを立ち上げる
VSCodeを立ち上げ、一番右下のこのNoDevicesを押してください
（すでにシミュレータが起動している場合、その機種名が出ます）。
押すと、画面中央上部にコマンドパレットが出ます。
機種名を選択してください。
この時点でシミュレータが立ち上がります。
シミュレータが立ち上がりましたか？
作業フォルダを指定する
Flutterでは、個別ファイルではなくプロジェクト単位のフォルダを開きましょう。
今回はとりあえず、Flutter公式からおすすめされている@nisrulzさんのサンプル集を使ってみます。
git clone https://github.com/nisrulz/flutter-examples.git
※Git使わない人は、緑の「Clone or download」ボタンを押して、
zipファイルを落として展開してください
https://github.com/nisrulz/flutter-examples
VSCodeで、今回はstateless_widgets というフォルダを開いてみましょう。
VSCodeがフォルダを読み込みます。
すんなり読み込まれればいいのですが、いくつか問題が出る場合があります。
まだ、Flutterのグローバルパッケージに必要なのに、読み込まれていないファイルがある場合。
その場合、VSCodeが右下に表示を出します。
表示が自動的に出ない場合、ctrl+@を押してターミナルを起動し、
ここから Flutter get packages と入力してください。
ちなみに、このVSCode上のターミナルは
bashで、stateless_widgetsフォルダ直下でコマンドを打ったのと同じです。
サンプルプロジェクトの古いGradleへの対処
私は、落としてきたファイルのGradleファイルのバージョンが古くて起こるエラーがでました。
(問題なければ、ここは飛ばしてください)
GradleはJava系のパッケージ管理ツールで、Androidのビルドで重要です。
Flutterでは、プロジェクトファイルの一式の中にGradleも入っています。
今回は、ダウンロードしたGitHubのフォルダの中のGradleファイルに問題があるようです。
他の場合も、プロジェクトフォルダの直下にあるAndroidディレクトリ中の該当ファイルについて<
エラーメッセージを見て最新に書き換えてください。
ターミナルやVSCodeのProblems(問題)で、表示される内容にヒントがあります。
これらの問題の多くは、Flutterのバージョン、Flutterモジュールのバージョン、
サンプルアプリフォルダ中の、バージョン設定が古いことで起こります。
flutter --version
flutter upgrade
などで、確認してください。
以下は、VSCodeのターミナル画面です。
Flutterのビルドを開始し、デバッグを始める
Flutterの開発では、パッケージファイルであるpubspec.yamlや
その他のフォルダ中のファイルを少し触りますが、それらはわずかです。
作業のほとんどは、libフォルダの中にあるファイルを触ります。
VSCodeで、とりあえずlib/main.dartを開きましょう。
ここでF5を押すと、デバッグモードが起動します。
F5を押しても動かない場合、VSCodeの左ペインのデバッグボタン(虫マーク)を押すと
左上に、緑の実行ボタン▼ができていますので押してください。
最初は、少し時間がかかります。
以下のように、デバッグボタンとシミュレータ中にアプリが起動できれば成功です。
デバッグボタンは、Chrome検証環境でのデバッグと使い方は全く同じです。
ブレークポイントを定めて、そこまでステップ実行・ステップオーバーしながら使います。
通常起動とVSCode起動の違い
Flutterの標準は、コマンドラインからの起動です。
Bashでプロジェクト直下でFlutter runです。
こちらは初期設定では、ホットリロードではなくＲを押して更新します。
VSCodeでは、完全ホットリロードがデフォルトで、デバッグでステップ実行などが行えます。
つまり、何も押さなくて編集したらシュミレータの画面更新されます。
間違うと、ターミナルやシュミレータ画面にエラーが出ます。
一部にホットリロードが効かない更新があります。
その場合は、上記のデバッグボタンの赤□ボタン(停止)を押し、アプリを再起動します。
複数の開発環境を立ち上げる
サンプルアプリの機能を試しながら、
自分のプロジェクトにコードを移植してくることがありますが、
環境を起動しなおすのは面倒です。
そういう時は、事前にシミュレータを2つ作っておき、
シミュレータを上記の手順で、あらかじめ2つ起動しておきます。
その後、VSCodeのツールバーからから新しいウィンドウで、新プロジェクトのフォルダを指定し
F5(またはデバッグ画面の緑矢印ボタン実行)でビルドすると、別プロジェクトが立ち上がります。
VSCodeでのスニペットの使い方
VSCodeでFlutterを使う大きなメリットに、補完の精度の高さがあげられます。
Andriod Studioでも同じことができますが、こちらのほうがカジュアルに使え、機能に遜色がありません。
先ほど立ち上げたファイルの中の20行目、
var column = new Column(
のColumnにカーソルを合わせてください。
すると、下記のように表示されませんか？
ここで表示されるのは、そのWidget Classがもつプロパティとメソッドです。
重要なのは、専用のプロパティやメソッドはこれで全部ということです。
一つ一つ動作を覚えればよく、それ以上覚えなくてokです。
VSCodeでのその他補完の使い方
クラス名がわからない時、最初のアルファベットを大文字で打つと候補が出ます。
以下を見てください。
複数のWidgetをlistで並べるときに、 c と打ちました(赤矢印)。
すると、containerなどの補完が並びました。
一般的な機能ではありますが、Flutterでももちろん使えます。
編集を行っているときに、パターン化された動作がいくつかあります。
たとえば、指定のクラスを別のクラスでくるみたいときや、削除したいときです。
windowsの場合は、Ctrl と . を押すと以下赤線のように表示されませんか？
これは、補完機能の一部で、class単位でソースの改廃が可能です。
ここを選択しclassを削除したり追加したりします。
さらに、組み込みクラスのソースが見たいときには、
組み込みクラスの上でCtrlキーを押し、ダブルクリックします。
すると、ソースが見られます。
下記は、Columnクラスの中身を表示しました。
Dart Dev Toolsの使い方
それから、Dart DevTools についても解説します。
これはDartの言語仕様の一部です。
ウェブアプリ開発でのchrome検証ツールのElement タブで
ページのツリー構造とソースの該当部分がわかりますね。
画面制作では大きな力を発揮しますが、同じことがこちらでもできます。
通常起動で画面の右下にダイアログで Darts DevTools を起動するか聞いていきます。
それに応じるとchromeなどのブラウザが起動し、ホットリロードのツリー構造が表示されます。
ダイアログが出ない場合、コマンドパレットで DART DEV TOOLSと打ってください。
開発がよりスムーズになります。
現在使っているメインの機能は2つあります。
1つは、ツリー構造を表示させ、該当部分を紫で表示するSelectWidGetMode（画面左上ボタン）です。
これで、複雑になったツリー構造でも場所を特定できますね。
もう１つは、レイアウトの幅などデザイン調整用の機能であるDebugPaintです。
そのほか、肥大化して読み出しに時間のかかるファイルを特定する機能などがあります。
ビルドとテスト
ビルド
Flutterでのホットリロードビルドが実現するシミュレータ端末内のアプリは、
デバッグ機能が含まれています。
その為、ビルド後のファイルサイズが大きく、
flutter create 直後のファイルサイズが34Mもあります。
これはしかしリリースビルドではありません。
iOSのテストフライト用ビルドや、テスト用のAndroidの.apkファイルをビルドするときには、
flutter build apk
flutter build ios
でビルドできます。
これらは、アプリストアで公開するカギを設定する必要があります。
Androidの場合は、オプションをつけることでシンプルに鍵なしでビルドできます。
テスト
Flutterには、標準で十分なTESTツールがついています。
デバッグツールに加えて、ユニット、画面単位をテストするウィジェットテスト、
インテグレーションテストツールです。
こちらの解説は、構築手順から外れるので公式に譲ります。
公式:ここ
まとめ
いかがだったでしょうか。
通常の環境構築に加えてここまでやっておくと、開発に入って手間取ることはほとんどありません。
他にも、ソースの自動成型など便利な機能が標準装備されており
現場のニーズに合わせて、使い分けていきましょう。
それでは、よいFlutterライフを。
