MENU

Flutter超初心者が電卓アプリを開発→リリース！全ステップ解説

Flutterで始めるアプリ開発：環境構築からリリースファイル作成までの完全ガイド

アプリ開発の世界へようこそ！「自分だけのアプリを作ってみたい！」そう思ったとき、最初に立ちはだかるのが「開発環境の構築」という壁です。特にプログラミング初心者の方にとって、それはまるで未知の領域への一歩であり、多くの疑問や困難に直面することでしょう。しかし、安心してください。この記事では、人気急上昇中のフレームワークであるFlutterを使って、シンプルなアプリを作り、最終的なリリースファイルを作成するまでの一連の流れを、筆者の実体験に基づきながら、どこよりも分かりやすく解説します。

この記事を読むことで、あなたは以下のことを習得できます。

  • Flutter開発に必要なツール（VS Code, Flutter SDK, Android Studioなど）の導入方法
  • 初心者が特につまずきやすい「環境変数Path」や「flutter doctor」のエラー解消方法
  • 実機でのアプリテストに必要なAndroidスマホの設定
  • アプリの顔となるランチャーアイコンの設定方法
  • アプリをストアで公開するために必須の「署名付きリリースファイル」を作成する手順

さあ、あなたもこのガイドを読み進め、Flutterによるアプリ開発の第一歩を踏み出しましょう！

目次

Flutter開発への扉を開く：環境構築という名の最初の試練

アプリ開発を始めるにあたり、まず乗り越えなければならないのが「開発環境の構築」です。これは複数のソフトウェアをインストールし、それらが正しく連携するように設定する作業であり、手順を間違えたり、小さな設定漏れがあったりするだけで、先に進めなくなってしまうことがあります。

しかし、この環境構築こそが、今後の開発の土台となります。ここでしっかりとした環境を築くことが、スムーズな開発への鍵となります。

1. VS Code：軽快なコードエディタの導入

Flutter開発において、多くの開発者に愛用されているのがVisual Studio Code（VS Code）です。これは無料で使える高機能なコードエディタで、軽量ながらも豊富な拡張機能によって、様々なプログラミング言語に対応できます。

インストールは非常に簡単です。公式サイトからダウンロードして、インストーラーの指示に従うだけで完了します。

VS Codeのインストールが完了したら、次に重要なのがFlutter拡張機能の追加です。VS Codeの拡張機能ビュー（左側のアプリアイコンが並んでいる部分）を開き、「Flutter」と検索してインストールしてください。この拡張機能があることで、コードの入力補完やエラーチェック、デバッグなどが格段に便利になります。Dart（Flutterで使われるプログラミング言語）拡張機能も同時にインストールされるはずです。

2. Flutter SDKとの出会い、そしてPath設定の壁

VS Codeはあくまでコードを書くためのエディタですが、実際にアプリをビルドしたり、デバイスで実行したりするためには、Flutter SDK（Software Development Kit）が必要です。SDKには、Flutterフレームワーク本体や開発に必要なツール一式が含まれています。

Flutter SDKは公式サイトからダウンロードできます。ダウンロードしたZIPファイルを解凍するのですが、ここで一つ重要なポイントがあります。解凍したフォルダを配置する場所です。筆者の経験では、特にWindowsの場合、日本語や空白を含むパスにあると問題が発生しやすい傾向があります。そのため、C:\src\flutter や C:\flutter のように、シンプルで半角英数字のみのパスに配置するのがおすすめです。

SDKを特定の場所に配置したら、次に環境変数Pathを設定します。これは、WindowsのコマンドプロンプトやPowerShellから、Flutter SDKに含まれるコマンド（flutterコマンドなど）を、現在いるディレクトリに関わらずどこからでも実行できるようにするための設定です。

環境変数Pathの設定方法はOSのバージョンによって多少異なりますが、「システムのプロパティ」を開き、「環境変数」ボタンをクリックして設定します。システム環境変数のリストにある「Path」を選択し、「編集」をクリックします。そして、先ほどFlutter SDKを配置したフォルダの中にあるbinフォルダへのパス（例: C:\flutter\bin）を追加します。

設定後は、必ずコマンドプロンプトやPowerShellを再起動してください。 これを忘れると、設定が反映されず、「’flutter’ は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。」のようなエラーが表示されます。

VS Codeを起動し、ターミナル（メニューの「表示」→「ターミナル」）を開いて flutter doctor と入力してみてください。もし「Flutter SDKが見つかりません」のようなエラーが表示された場合、VS CodeがSDKの場所を認識できていない可能性があります。この場合は、VS Codeのコマンドパレット（Ctrl+Shift+PまたはCmd+Shift+P）を開き、「Flutter: Locate SDK」と入力して、SDKのパスを教えてあげることで解決することが多いです。

3. Android Studioは巨大な要塞？（でも必要不可欠）

Androidアプリを開発する場合、Android Studioという強力な開発環境も必要になります。Flutter開発自体はVS Codeで行うことが多いですが、Android StudioはAndroid SDKや仮想デバイス（エミュレーター）の管理、さらにはAndroid固有の設定を行う際に不可欠です。

Android Studioも公式サイトからダウンロードしてインストールします。「とりあえず全部入りで！」という気持ちでインストールを開始して問題ありません。インストール後のセットアップウィザードは英語が多いですが、基本的にはデフォルト設定のまま進めて大丈夫です。

ただし、ここでもAndroid SDKの保存場所に関して、半角英数字のみのパスを選ぶことを強く推奨します。例えば、C:\Android_SDK のようなパスです。これは、後のビルドプロセスなどで問題が発生するのを防ぐためです。

セットアップの途中で、様々なライセンスへの同意を求められます。これらはAndroid開発に必要なコンポーネントのライセンスなので、内容を確認しつつ、すべて「Accept」で進んでください。その後、必要なコンポーネントのダウンロードが始まります。これにはかなりの時間がかかる場合がありますが、焦らず完了を待ちましょう。

4. flutter doctor による健康診断と治療

必要なツールをインストールしたら、開発環境が正しく設定されているかを確認するために、再び flutter doctor コマンドを実行します。これは、Flutter開発に必要な要素（Flutter SDK, Android SDK, VS Code, Android Studio, 接続されたデバイスなど）の状態をチェックし、問題があればそれを教えてくれる非常に便利なツールです。

初めて実行すると、多くの場合、赤いバツ印（✗）がいくつか表示されるでしょう。これを見て心が折れそうになるかもしれませんが、大丈夫です。flutter doctorは、何が問題で、どのように解決すれば良いかのヒントも一緒に表示してくれます。

よくある問題をいくつか見てみましょう。

  • Android SDKが見つからない: flutter doctorがAndroid SDKの場所を特定できていない場合に表示されます。flutter config --android-sdk [SDKのパス] のように、SDKをインストールした場所のパスを教えてあげることで解決します。
  • Android SDK Command-line Toolsがない: Android SDKには、ビルドツールやデバッグツールなど、コマンドラインから利用するツールが含まれています。これらがインストールされていない場合に表示されます。Android Studioを起動し、「SDK Manager」を開き、「SDK Tools」タブで「Android SDK Command-line Tools」にチェックを入れてインストールしてください。
  • Android licenses not accepted: Android開発に必要なライセンスに同意していない場合に表示されます。これは flutter doctor --android-licenses コマンドを実行し、表示されるライセンス規約を読み（または読まずに）ひたすら y を入力して同意していくことで解決できます。

これらの問題を一つずつ潰していき、最終的に flutter doctor の出力がほとんど緑色のチェックマーク（√）になることを目指しましょう。（Platform tools や Build-tools の警告が出ている場合は、SDK Managerで最新版をインストールすると解消することがあります。）

5. Windows開発者モードの必要性（伏線回収）

さて、環境構築の途中で「Windows開発者モード」という言葉を耳にしたかもしれません。これは、後述する「実機デバッグ」を行う際に必要となる設定です。Windows PCとAndroidスマホをUSBケーブルで接続し、PCから直接スマホでアプリを動かすためには、Windows側で開発者モードを有効にしておく必要があります。これは「設定」アプリの「更新とセキュリティ」（または「プライバシーとセキュリティ」）→「開発者向け」から有効にできます。環境構築の段階で設定しておくとスムーズです。

実機デバッグへの道：スマホとの初めての出会い

開発環境が無事整ったら、いよいよ実際にアプリを動かしてみたくなります。最初はエミュレーター（PC上でスマホを模倣して動かすもの）を使うことが多いですが、実際のスマホで動かす「実機デバッグ」も非常に重要です。エミュレーターでは再現できない、実際のデバイスならではの挙動や性能を確認できるからです。

Androidスマホを開発用としてPCに接続するには、いくつか準備が必要です。

  1. スマホの「開発者向けオプション」を解放: Androidスマホには、通常隠されている開発者向けの設定メニューがあります。これを表示させるには、「設定」アプリを開き、「端末情報」→「ビルド番号」を素早く7回連続でタップします。「開発者向けオプションが有効になりました」というメッセージが表示されれば成功です。
  2. 「USBデバッグ」をオン: 開発者向けオプションの中に「USBデバッグ」という項目があります。これを有効にすることで、PCからUSB経由でスマホにアプリをインストールしたり、デバッグ情報を取得したりできるようになります。
  3. PCとUSB接続: スマホをPCにUSBケーブルで接続します。初めて接続する場合、スマホ画面に「このコンピュータを信頼しますか？」や「USBデバッグを許可しますか？」といったダイアログが表示されることがあります。開発に使用するPCであれば、もちろん「はい」または「許可」を選択してください。
  4. VS Codeでのデバイス確認: VS Codeの右下ステータスバーに、現在接続されているデバイスが表示されます。ここにあなたのスマホの名前が表示されていれば成功です。もし「No Device」と表示されている場合は、USBドライバの問題や、USBケーブルの品質、あるいは前述のUSBデバッグ設定などを再確認してみてください。コマンドプロンプトやターミナルで flutter devices コマンドを実行すると、認識されているデバイスのリストが表示されるので、状況を確認するのに役立ちます。

ついにコードを動かす：感動の瞬間

開発環境と実機デバッグの準備が整えば、いよいよFlutterアプリのプロジェクトを作成し、動かしてみる段階です。

  1. プロジェクトを作成する場所: Flutter SDKフォルダ内ではなく、別途アプリのプロジェクトを管理するためのフォルダ（例: C:\flutter_projects）を作成することをおすすめします。
  2. 新しいFlutterプロジェクトの作成: VS Codeのコマンドパレット（Ctrl+Shift+PまたはCmd+Shift+P）を開き、「Flutter: New Project」を選択します。アプリケーション、パッケージ、モジュールなどプロジェクトの種類を聞かれるので、「Application」を選びます。次に、プロジェクトを作成するフォルダを指定し、アプリの名前（例: simple_calculator）を入力します。アプリ名はスネークケース（小文字とアンダースコア）で記述するのが慣例です。
  3. 必要なパッケージの取得: プロジェクトが作成されると、VS Codeが自動的に必要なパッケージ（Flutterフレームワーク本体など）をダウンロードしようとします。これは flutter pub get コマンドの実行に相当します。もし自動で実行されなかったり、後からパッケージを追加したりした場合は、ターミナルでこのコマンドを実行するか、VS CodeのUIから操作します。
  4. アプリの実行: VS Codeのメニューバーの「実行」から「デバッグの開始」を選択するか、単純にキーボードの F5 キーを押してください。VS Codeの右下で実行対象デバイスが選択されていることを確認しましょう。ビルドが開始され、しばらく待つと、あなたのスマホ画面にFlutterのサンプルカウンターアプリが表示されるはずです。初めて自分のPCで書かれた（あるいは生成された）コードが、手元のスマホで動くのを見たときの感動は忘れられません！

アプリの顔を作る：ランチャーアイコンを設定しよう

アプリが形になってきたら、次に気になるのがホーム画面に表示される「ランチャーアイコン」です。これはアプリの第一印象を決める非常に重要な要素です。Flutterでは、flutter_launcher_iconsというパッケージを使うことで、簡単に各プラットフォーム（Android, iOS）用のアイコンを生成できます。

  1. アイコン画像の準備: 使うアイコン画像をPNG形式などで用意し、プロジェクト内の適切な場所（例: assets/icon/icon.png）に保存します。推奨されるサイズは、例えば1024×1024ピクセルなど、比較的高解像度のものを用意すると良いでしょう。

  2. パッケージの追加: プロジェクトルートにある pubspec.yaml ファイルを開き、dev_dependencies: セクションに flutter_launcher_icons: を追加します。
    “`yaml
    dev_dependencies:
    flutter_test:
    sdk: flutter

    flutter_launcher_icons: “^0.13.1” # ここを追加 (バージョンは最新を確認)

    flutter_icons: # ここからを追加
    android: “launcher_icon”
    ios: true
    image_path: “assets/icon/icon.png” # 用意したアイコン画像のパスを指定
    min_sdk_android: 21 # 必要に応じて最小SDKバージョンを指定
    3. **アイコンの生成**: ターミナルを開き、プロジェクトルートで以下のコマンドを実行します。bash
    flutter pub get
    flutter pub run flutter_launcher_icons
    ``
    このコマンドを実行すると、AndroidやiOSに必要なサイズのアイコン画像が自動的に生成され、プロジェクト内の各プラットフォーム固有のディレクトリ（例:    android/app/src/main/res/）に配置されます。
    4. **確認**: 再び    F5` キーなどでアプリを実行してみてください。スマホのホーム画面に戻ると、アプリのアイコンが、あなたが用意したものに変わっているはずです。

いざリリースへ：アプリに印鑑を押す (署名キー作成)

開発したアプリをGoogle Playストアなどで公開するためには、「署名付き」のリリースファイルを作成する必要があります。署名とは、アプリの作者が誰であるかを証明し、またアプリが改ざんされていないことを保証するためのデジタルな印鑑のようなものです。署名されていないアプリは、通常、公式ストアでは配布できません。

この署名には、「署名キー（Keystore）」と呼ばれるファイルが必要です。これは一度作成すれば、同じ開発者がリリースする全てのアプリ（あるいは同じアプリのアップデート）に使用できます。署名キーファイルと、その作成時に設定したパスワードは、絶対に失くしたり忘れたりしないようにしてください。 これらを失うと、アプリのアップデートができなくなり、新しいアプリとして再公開する以外に手がなくなってしまいます。

1. アプリ情報の最終チェック

リリースビルドを行う前に、アプリの基本的な情報が正しく設定されているかを確認しましょう。

  • アプリ名: android/app/src/main/AndroidManifest.xml ファイルを開き、<application> タグの android:label 属性を確認します。これがアプリの表示名になります。
  • アプリケーションID: android/app/build.gradle ファイル（または build.gradle.kts）を開き、android → defaultConfig セクションにある applicationId を確認します。これはGoogle Playストア上でアプリを一意に識別するためのIDで、通常は com.yourcompany.yourappname のような形式になります。一度決定したら変更できません。
  • バージョン情報: pubspec.yaml ファイルの先頭にある version: を確認します。これは バージョン番号+ビルド番号 の形式（例: 1.0.0+1）で記述されます。

2. 禁断の黒い画面：keytool コマンドとの戦い

署名キー（Keystore）を作成するには、JDK (Java Development Kit) に含まれる keytool というコマンドを使用します。

コマンドプロンプトまたはPowerShellを開き、以下のコマンドを実行します。（your_key_name, your_alias_name などは任意の名前に置き換えてください）

keytool -genkeypair -v -keystore your_key_name.jks -alias your_alias_name -keyalg RSA -keysize 2048 -validity 10000

このコマンドは、指定した名前で署名キーファイル（.jks 拡張子）を作成します。実行すると、パスワードの設定や、氏名、組織単位、組織名、都市、都道府県、国コードなどの質問が次々と表示されます。質問に対する回答は、必ずしも正確な情報である必要はありませんが、パスワードだけは絶対に忘れないようにメモしておきましょう。

'keytool' は認識されていません エラーへの対処

もし keytool コマンドを実行した際に「’keytool’ は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。」のようなエラーが表示された場合、それはシステムのPath環境変数にJDKのbinフォルダへのパスが設定されていないためです。

JDKをインストールしたフォルダ（例: C:\Program Files\Java\jdk-17）の中にある bin フォルダ（例: C:\Program Files\Java\jdk-17\bin）へのパスを、前述のFlutter SDKのPath設定と同様の手順で、環境変数Pathに追加してください。追加後、コマンドプロンプトなどを再起動することを忘れないでください。

無事コマンドが完了すると、コマンドを実行したディレクトリに your_key_name.jks という名前のファイルが作成されます。

PKCS12への移行警告: keytool のバージョンによっては、「JKS Keystore format has some security limitations. Consider changing to PKCS12.」のような警告が表示されることがあります。これは、より推奨される形式であるPKCS12への移行を促すものですが、現時点ではJKS形式でも問題なく利用できます。必要であれば、後から形式を変換することも可能です。

3. key.properties ファイルに秘密の情報を書き込む

作成した署名キーの情報（ファイル名、ストアパスワード、キーエイリアス、キーパスワード）を、Flutterプロジェクトが認識できるように設定します。プロジェクトの android フォルダの中に key.properties というファイルを作成し、以下の形式で情報を記述します。

storeFile=<署名キーファイル（.jks）のパス>
storePassword=<署名キーのストアパスワード>
keyAlias=<署名キーのエイリアス名>
keyPassword=<署名キーのキーパスワード>

<署名キーファイル（.jks）のパス> には、作成した .jks ファイルへの絶対パス、または android フォルダからの相対パス（例: ../your_key_name.jks のようにプロジェクトルートに置いた場合）を記述します。パスワードは、keytool コマンド実行時に入力したものを正確に記述してください。

4. android/app/build.gradle を編集（Kotlin DSLの場合）

次に、Androidビルドの設定ファイルに、署名情報を使用するように記述を追加します。この設定ファイルは android/app/build.gradle ですが、最近のプロジェクトでは android/app/build.gradle.kts というKotlin DSL形式になっていることが多いです。提供テキストの筆者もここでつまずいたようです。

従来のGroovy DSL (.gradle) とKotlin DSL (.gradle.kts) では記述方法が異なります。Kotlin DSLの場合、例えばプロパティを参照する際に def のようなキーワードは使えませんし、アクセス方法も異なります。

build.gradle.kts ファイルを開き、以下のような署名設定ブロックを追加・編集します。

android {
    // ... その他の設定 ...

    signingConfigs {
        create("release") {
            // key.properties ファイルから署名情報を読み込む
            val keystoreProperties = java.util.Properties()
            val keystorePropertiesFile = rootProject.file("key.properties")
            if (keystorePropertiesFile.exists()) {
                keystorePropertiesFile.inputStream().use {
                    keystoreProperties.load(it)
                }
                storeFile = file(keystoreProperties.getProperty("storeFile"))
                storePassword = keystoreProperties.getProperty("storePassword")
                keyAlias = keystoreProperties.getProperty("keyAlias")
                keyPassword = keystoreProperties.getProperty("keyPassword")
            } else {
                // key.properties が見つからない場合のエラー処理やデフォルト設定
                println("WARNING: key.properties not found. Release build may fail.")
            }
        }
    }

    buildTypes {
        release {
            // ... その他の設定 ...
            signingConfig = signingConfigs.getByName("release") // release ビルドに署名設定を適用
        }
    }
}

// 必要に応じて、key.properties ファイルをgitignoreに追加して、バージョン管理システムから除外する

ここでは、key.properties ファイルを読み込み、そこに記述された情報を signingConfigs ブロック内の release 設定に適用しています。signingConfig = signingConfigs.getByName("release") の行が、リリースビルドでこの署名設定を使う、という意味になります。Kotlin DSLでのプロパティ参照方法やファイル操作など、Groovy DSLとは異なる記述ルールに注意が必要です。筆者の方も試行錯誤の末、この記述にたどり着いたのでしょう。

5. 最終関門！リリース用ファイル(.aab)のビルド

署名キーの作成と設定が完了したら、いよいよリリース用のビルドを実行します。Google Playストアで推奨されているのは、APK形式ではなくAndroid App Bundle（.aab）形式です。.aab形式でアップロードすると、Google Playがユーザーのデバイス構成（画面密度、CPUアーキテクチャなど）に合わせて最適なAPKファイルを生成して配信するため、アプリサイズを削減できます。

プロジェクトルートのターミナルで、以下のコマンドを実行します。

flutter build appbundle --release

このコマンドを実行すると、Flutterが必要なビルドプロセスを開始します。コードの最適化、難読化、リソースのパッケージングなどが行われ、最後に署名が適用されます。

ビルド中に「Keystore password was incorrect」のようなエラーが表示された場合は、key.properties ファイルに記述したパスワードが間違っている可能性が高いです。ストアパスワードとキーパスワードを再度確認し、正確に記述し直してください。

ビルドが成功すると、ターミナルに以下のようなメッセージが表示されます。

√ Built build\app\outputs\bundle\release\app-release.aab (xxxMB).

この .aab ファイルこそが、Google Playストアにアップロードするための署名付きリリースファイルです！これまでの苦労が報われる、感動の瞬間ですね。

ビルドされたファイルは、プロジェクト内の build\app\outputs\bundle\release\ フォルダに格納されています。

おわりに：次のステップへ

環境構築から始まり、実機での動作確認、アイコン設定、そしてリリースファイルの作成まで、Flutterでのアプリ開発の一連の流れを体験してきました。特に開発の初期段階における環境構築や署名キーの扱いは、多くの初心者にとって大きな壁となりがちです。しかし、この記事で解説した手順と、筆者の経験談を参考にすれば、きっとこの最初の難関を乗り越えられるはずです。

ここまでたどり着いたあなたは、すでにアプリ開発者としての素晴らしい一歩を踏み出しています。この .aab ファイルを手に、次は実際にGoogle Play Consoleでアプリを公開するという、新たなステップが待っています。公開プロセスもまた学びの多いものですが、ここまで培った知識と経験があれば、きっと乗り越えられるでしょう。

Flutter開発の旅はまだ始まったばかりです。UIデザインの探求、状態管理の学習、外部パッケージの活用、API連携など、学ぶべきことはたくさんあります。しかし、一番大切なのは、「自分にもアプリが作れる」という自信と、「もっと良いアプリを作りたい」という探求心です。

この経験を活かし、あなたの作りたいアプリを実現してください。Flutter開発の楽しさを存分に味わい、これからも素晴らしいアプリを生み出していくことを応援しています！

撮影に使用している機材【PR】

Camera:α7 IV ILCE-7M4

Lens:FE 24-70mm F2.8 GM II

Lens:FE 35mm F1.4 GM

Edit:Lightroom・premirePro

あわせて読みたい
【お花博士みずごろう】撮影に使用している機材を全紹介！オススメ機材総まとめ！ 撮影に使用している機材総まとめ! 一眼カメラを購入して8年がたちました。時代の主流が一眼レフカメラからミラーレス一眼へと変化し、重量の軽量化とピント性能が上がっ...

【無料】撮った写真でWEBページを作りませんか？

未分類

この記事が気に入ったら
フォローしてね！

Follow Me
よかったらシェアしてね！
  • URLをコピーしました！
目次