Flutter の開発環境

まずは、Flutterの開発環境に慣れたいと思います。Flutterではdemoアプリケーションが用意されているので、これを使います。

シミュレータと、実機の両方で動作確認をしていきます。

プロジェクトの作成

まず初めに、Flutterの新しいプロジェクトを作成します。

• VSCodeの「表示」「コマンドパレット」でコマンドパレットを開く。
• コマンドパレットにFlutter:New Projectを入力する。
• 「Which Flutter template?」と聞かれるので、Applicationを選択する。
• 新しいプロジェクトのフォルダを選択する。
• プロジェクト名を入力する。

作成されたプロジェクトは、そのままDemoアプリケーションとして実行可能です。

シミュレータでの動作確認

作成されたFlutter DemoアプをSimulatorで動かしてみます。

Flutterは様々なデバイスで動作しますので、デバイスを指定する必要があります。

以下の手順で、デバイスをiOSのシミュレータに設定します。

• コマンドパレットにFlutter:Select Device と入力する。
• Start iOS Simulator選択し、シミュレータを起動します。

次に、メインのソースコード"main.dart"を開きます。

libフォルダ内にあるmain.dartを選択してコード表示させます。この状態で、メニューから「実行」「デバッグの開始」を選択すると、シミュレータ上でアプリケーションを操作することができます。

起動後、右下の「＋」ボタンを押すことで数字がカウントアップされれば成功です。

実機での動作確認

通常のアプリ開発では、ある程度バグが収束するまではシミュレータを使って、開発・デバッグをします。その方が、時間が節約できるからです。しかし、今回の音声チャットボットでは、「マイク」を使いますので、シミュレータでは動作させることができません。

そこで、実機(iPhone)でデバッグができるように、開発用のMacと実機とをケーブルで繋ぎます。実機が認識できれば、VSCodeの右下にデバイス名が表示されます。

ケーブルには、充電専用のケーブルもあるので、認識できない場合にはケーブルを交換すると良いかもしれません。

実機が認識できたら、シミュレータの時と同様にデバッグを開始し、動作を確認します。

実機へのインストール

インストールして動作させる場合には、ターミナルから以下のコマンドを実行します。

flutter devices           //デバイス名の確認
flutter clean
flutter build ios  　　　　//iOS用のビルドコマンド
flutter install -d [X] 　 // [X]はデバイス名で確認した名前の頭文字

インストールが完了したら、通常のアプリと同様に使用できます。

実機でも、デモアプリが問題なく動作することができたら、次のステップに移ります。