見出し画像

【Flutter】スマホやWindowsやMacやLinuxのアプリやWebサーバーも素早く作れる【Andorid開発元のDart言語】

嶋田印刷＠史跡QRポスターなどで観光推進をし医療コストもアプリで節約するIT広告コンサルタント

Flutterは、Andoridの開発元で検索大手のGoogleが開発したクロスプラットフォームのUIツールキットで、一つのコードでスマホのアプリをiOS・Androidや、デスクトップアプリをMac・Windows・Linuxや、Webサーバーを初心者でも早く開発できます。

スマホのアプリを開発できる言語で代表的なのはJavaですが、Javaはコード数が多く、これはKotlinで改良されますが、Javaが最も開発者が多いような現実があります。JavaはVM（仮想マシン）を使用で処理速度が遅いという誤解がありますが、昨今のVMは改良されているようです。

JavaはAndoridの機械（スマホ機器）開発なバックエンドエンジニア向けですが、FlutterのDart言語はJavaScriptに近いフロントエンドなWebエンジニア向けです。

またAIなどによるとFlutterはUIという画面処理の速さなどで優れているらしいです。JavaはAndoridのネイティブ機能を操作が得意なので、Flutterのような複雑な操作やUIの多さがないシンプルな物だと、Flutterよりも速いようです。

しかしMacやWindowsやLinuxのデスクトップアプリや、AndoridやiOSというスマホのアプリや、Webサーバーとして使用できるという多様さは、他の言語やFW（フレームワーク）などでは見当たりません。

またC10K問題という1万以上の同時アクセスによる遅延対策は、古い言語などですと非対応で、JavaScript系などのモダン言語などは非同期ですので対応という面でも、Flutterは注目を浴びています。

しかしマイコンなどの機械制御系な分野では不向きで、その代わりに同じ開発元のGo言語がI/O系の雑誌によると、多く利用のC++に匹敵する他の言語よりも速い上に、私の私見ですがモダン言語の将来性からも、注目されているらしいです。

WindowsへのFlutterのインストール方法

FlutterはWindowsでもMacでもLinuxでも開発もできて、スマホでもWebでも利用できます。しかしWindowsの利用者は多いわりに、多くのプログラミング言語などはWindowsは他のOSと違い特殊で、リリースが遅れる事もあるので、技術開発が遅れているので技術説明も少なく不便なこともあります。

ただし企業や役所などの一般事務職などの業務での利用者も多いのでニーズが多いです。WindowsPCで仮想Linux環境で開発しても良いのですが、それですとメモリーなどのリソースを無駄に多く使用するので、Flutterのようなクロスプラットフォームアプリはネイティブで開発した方が、他の多くの有益な機能もつけやすい可能性もあります。

では、WindowsへのFlutterのインストール手順を、できるだけわかりやすく解説します。

1. Flutter SDKのダウンロード

SDKとはソフトウエア開発キットの略で、開発するには必要ですが、作成したアプリをクライアントPCやスマホなどで利用するだけのユーザーには必要ありません。

  • Flutter公式サイト (https://flutter.dev/) にアクセスします。

  • Get started ボタンをクリックし、Flutter SDK をダウンロードします。

  • ダウンロードした ZIP ファイルを解凍し、任意の場所に保存します。
    例：Z:\usr\bin\flutter\拡張子を除いたZIP書類名を命名でバージョン管理
    DドライブなどだとDVDドライブなどに取られているためにZとしました。

2. 環境変数の設定

  • Windowsキー+Pause/Breakキー を押して、システムのプロパティを開きます。

  • 詳細設定 タブの 環境変数 ボタンをクリックします。

  • システム環境変数 の Path を選択し、編集 ボタンをクリックします。

  • 新規 ボタンをクリックし、Flutter SDKを解凍したフォルダ内の bin フォルダのパスを追加します。
    例：Z:\usr\bin\flutter\拡張子を除いたZIP書類名

  • OK ボタンを連打して設定を保存します。

3. Android Studioのセットアップ

AndoridStadioは開発元がAndoridアプリの開発元であるGoogleなので、プログラミング（プロジェクトの作成）をするには高機能で便利です。

またエミュレーターやSDKも利用するので、作成で使わなくてもインストールは必須です。コマンドflutter docterを使用する前に、公式サイトからAndoridStadioのインストーラーをダウンロードしインストールし、環境変数のパスを設定しないと、flutter docterでエラーな表示がでます。

プラグインが多い開発ソフトウエアは多機能で便利

その後、AndoridStadioの他のIDE（総合開発環境ソフトウエア）の中で人気がある、VisualStadioCodeのようにプラグインを追加するのがお勧めです。VisualStadioCodeはプラグインの開発参加者が多そうなので多機能です。昔はPhotoShopという画像編集ソフトもプラグインが多かったです。

プラグインの追加方法

  • Android Studio を起動し、Plugins から Flutter と Dart プラグインをインストールします。

  • Flutter SDKのパス を設定します。Android StudioがFlutter SDKの場所を自動検出できない場合は、手動で設定する必要があります。

4. Flutterのコマンドで確認

コマンドプロンプトを開き、以下のコマンドを実行して、Flutterが正しくインストールされているか確認します。

flutter doctor

このコマンドを実行すると、Flutterの環境が診断され、不足しているツールや設定などが表示されます。

実際にスマホのアプリを作成するにはAndroid Studioのエミュレーターが必要です。しかしWebサーバーを作るには、Visual Studioなどは必要が無いですが、Windowsアプリを作るには必要です。

5. エミュレーターまたは実機の準備

  • Androidエミュレーター: Android Studioで仮想デバイスを作成できます。

  • AndoridStudio以外のエミュレーター: ゲームプレイ用なWindowsなどのスマホ仮想ソフトでも、ビルドし転送すれば使えますが、毎回ビルドする手間はかかりますが、他の方法と違い安全だと思います。

  • 実機: USBケーブルでAndroid端末を接続します。スマホやタブレットなどの実機は、アプリという論理でも壊れると文鎮化という使えなくなるので、古い使わない実機で開発がお勧めです。

  • スマホのアプリ以外のWindows・Mac・Linuxアプリや、Webサーバーを作成では必要ありません。ただしこれはFlutterの最も人気な要素であり、世間で多いニーズな、iOS/Andorid両対応版でスマホのアプリを同時販売のためな方法ではない状態です。

6. 開発キットの準備やアップデート

  • Android SDK: FlutterでAndroidアプリを開発するには、Android SDKが必要です。Android Studioのインストール時に一緒にインストールされます。

  • Java: Java Development Kit (JDK) が必要です。Oracleの公式サイトからダウンロードできます。

  • 最新版の利用: Flutterは頻繁にアップデートされます。最新版を利用することで、新しい機能やバグ修正を利用できます。

7. 新規プロジェクトの作成する

Flutterプロジェクトの作成方法は、Android StudioやVisual Studio CodeといったIDE（統合開発環境）を利用するのが一般的です。しかし開発PCなどがメモリーなどが少ない場合は、コマンドで操作するとリソース負担が減り開発可能になります。

コマンドでFlutterプロジェクト作成する

以下のコマンドで新規Flutterプロジェクトを作成できます。

flutter create new_flutter_project

下記を見ればわかりますが、Android Studioでプロジェクト作成するよりも、コマンドで作成した方が手間は少なく簡単です。

コマンドで作成しても、その後はVisualStadioCodeなどの便利なIDEや、メモリー消費減なメモ帳などのテキストエディターでファイルを開き、開発できます。

ただし業務で使用などの場合は、後でプロジェクトの説明、組織名、IDなどを追記する必要があり、プロジェクト構造などに対する多少の知識が必要です。

Android StudioでFlutterプロジェクトを作成する方法

  1. Android Studioの起動: Android Studioを起動し、「Start a new Flutter project」を選択します。

  2. プロジェクトテンプレートの選択: Flutter Applicationを選択し、Nextをクリックします。

  3. プロジェクトの設定:

    • Flutter SDK path: Flutter SDKのパスを指定します。

    • Project name: プロジェクト名を入力します。

    • Project location: プロジェクトを保存する場所を指定します。

    • Description: プロジェクトの説明を入力します。

    • Organization: 組織名を入力します。

    • Project ID: プロジェクトのIDを入力します。

  4. プラットフォームの選択: Android、iOS、または両方を選択できます。

  5. 言語の選択: Dart言語を選択します。

  6. Finish: 設定を確認し、Finishをクリックしてプロジェクトを作成します。

プロジェクト構造

作成されたプロジェクトの主なフォルダとファイルは以下の通りです。

  • lib: Dartソースコードを記述するフォルダです。

  • android: Android用のネイティブコードが格納されるフォルダです。

  • ios: iOS用のネイティブコードが格納されるフォルダです。

  • pubspec.yaml: プロジェクトで使用するパッケージを管理するファイルです。

Flutterプロジェクトの構造と基本的な使い方

  • main.dart: アプリケーションのエントリーポイントとなるファイルです。

  • Widget: FlutterのUIを構成する基本的な要素です。

  • StatelessWidget: 状態を持たないWidgetです。

  • StatefulWidget: 状態を持つWidgetです。

  • ホットリロード: コードを変更すると、シミュレーターや実機上のアプリが自動的に更新される機能です。

  • 状態管理: Provider、Riverpod、BLoCなど、Flutterの状態管理ライブラリを利用して、アプリの状態を管理することができます。

  • パッケージ: pub.devで公開されているパッケージを利用することで、機能を拡張することができます。

スマホのアプリを作る「プロジェクトをビルドする」

ビルド（建てる）とはGoogle Play（Android）やApp Store（iOS）などのアプリ販売サイトで公開できる圧縮書類のような単体なファイル（いわゆるスマホのアプリ）を作成することです。

このファイルを独自サイトなどに設置し、リンクを押すとスマホにアプリがインストールされます。PCはリンクを張っているページが見れないように、簡易的なJavaScriptなどでも出来ます。

  • `flutter build apk`コマンドでAndroid用のAPKファイルを作成できます。

  • `flutter build ipa`コマンドでiOS用のIPAファイルを作成できます。

    • `flutter build ipa`コマンドはipaファイルを直接生成し、ビルドプロセスを簡略化が可能です。このコマンドの利用が多いようです。

    • `flutter build ios`コマンドはXcodeプロジェクトを作成し、柔軟なカスタマイズが可能です。たぶんここまで高機能ニーズが少ないです。

プロジェクトのルートでターミナルを開き、Androidアプリを作成なら`flutter build apk`、iOSアプリなら`flutter build ipa`コマンドを入力します。

そうすると以下の場所にビルドしたファイルが作成されます。そうしたらflutter-apkフォルダに移動し、app-release.apkをコピーしファイル名を改名すれば公開できます。ただしこのコマンドを入力する前にｍGoogle PlayやApp Storeなどで公開したい場合は、電子証明書の署名などがあると思うので、それらの公式サイトで作成する追加な方法を参照してください。

cd ルート（プロジェクトの最上層）\build\app\outputs\flutter-apk\app-release.apk

コマンドを入力し以下のエラーが出る場合は、パスは日本語やUnicodeなどではなく、ANSI文字のみにしてください。

flutter build apk
Your project path contains non-ASCII characters

たぶん他のプログラミング言語なども、ANSI文字のみにしないとエラーが多く出ると思います。これはプログラミング内部までは、装飾などに対応しないというメーカーの方針だと思います。

また環境変数のパスなどは_と-を混じらせると認識しない場合もあります。昔のUnixでは頭文字が大文字（HTML書類名がIndex.html）と小文字（HTML書類内でindex.html）だと認識せずに、これに類似したルータで広域接続障害もありました。

8.プロジェクトを実行する

プロジェクトを実行するには複数の方法があります。多くはAndroid Studioで実行ですが、他にメモリーが軽量なコマンド入力や、特殊な例としてAPKファイルなどを、Windowsなどのスマホの仮想アプリにインストールして起動も出来ます。

デスクトップアプリやWebサーバーとして起動する

作成したプロジェクトをデスクトップアプリやWebサーバーとして起動するには、Android Studioのツールバーにある実行ボタンをクリックするか、ターミナルで以下のコマンドを実行します。

flutter run

このコマンドを入力後に、起動したOSのデスクトップアプリかWebブラウザーのどれで起動するのか聞いてきますので、選ぶと選んだOSのアプリやWebブラウザーで起動します。しかし例えばWindowsを選んでも、デスクトップアプリの開発ソフトであるVisualStadioがインストールされていないと起動しませんので、インストールしてください。

スマホのアプリとして起動する

ビルドしたAPK（Andorid）ファイルかIPA（iOS）ファイルを、Windowsなどのスマホの仮想アプリか、スマホの実機にファイル転送しアイコンを押すと、インストールなどされて起動できます。ただし証明書をつけるなどをしないと、セキュリティ機能で拒否するかもしれません。

これが野良アプリという状態で悪意のあるプログラムもあり、Google PlayやApp Storeでは証明書をつけたり審査をしているので、不明なWebサイトで配布されているAPKやIPAファイルはインストールしない方が良いです。

方やDart（テキスト）ファイルはコンパイル（ビルド）済みファイルと違い、ソースコード（中身の文章）が見れるので研究用に、身元不明なものも利用しても良いかもしれません。なおDartファイルはダブルクリックすると、VisualStadioCodeで起動するようにデフォルトで設定しているようです。VisualStadioCodeはセキュリティソフトやエミュレーターとも設定すれば連携しているようです。

その他

  • Visual Studio Code: Visual Studio CodeなどのIDEでFlutter開発を行うことが出来て、人気があるので開発参加者が多く、多言語対応で、多機能です。

  • コマンド入力やメモ帳などで編集よりも、IDEで作成した方がコパイロットなどのAIによる補助機能などで、簡単に多様な開発が出来ます。

  • Flutterのドキュメント: Flutterの公式ドキュメントには、より詳細な情報やチュートリアルが掲載され、バグなどからして最新情報を得た方が良いです。

  • 参照するならコマンド`flutter --help`の方が他の情報よりも、現在使用している該当ツールであり、他の情報はバージョンなどで情報が異なるので正確です。

より詳しい情報やトラブルシューティングについては、公式ドキュメントなどを参照することをおすすめします。

参考情報

より詳細な情報や、特定の環境でのトラブルシューティングについては、上記の公式サイトを参照してください。また公式や非公式なコミュニティサイトやブログなどの方が、日本語で分かりやすい情報もありました。

このAIによる回答（私がプロンプトし回答も補足情報を一部追加）は、Flutterのインストール手順を簡潔にまとめたものです。

いいなと思ったら応援しよう！