SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

マルチターゲットアプリ開発の新しいアプローチ~.NET 9 新テンプレートの基本~

.NET MAUI Blazorで構築したアプリを、モバイル環境に適用しよう

マルチターゲットアプリ開発の新しいアプローチ~.NET 9 新テンプレートの基本~ 第4回

 本連載では、.NET 9で登場した新しいソリューションテンプレートである「.NET MAUI Blazor HybridアプリとWebアプリ」について解説します。前回は、OpenAIのImage Generation APIを活用した画像生成ロジックの実装を行いました。モックサービスから実際のAPI実装への置き換えを通じて、DIパターンの利点を実感できたかと思います。第4回目となる今回は、これまでWindowsとWebブラウザで動作を確認してきたアプリケーションを、モバイル環境でも実行できるようにします。

Android開発環境のセットアップ

 モバイル環境で実行した場合の動作画面のイメージは次の通りです。

実機での動作画面
実機での動作画面

 .NET MAUIでAndroidアプリを開発するには、Android SDKとエミュレータまたは実機が必要です。Visual Studio 2022には、これらを統合的に管理する機能が用意されているため、比較的簡単にセットアップできます。

Android SDKの自動インストール

 Visual Studio 2022をインストールする際に「.NET マルチプラットフォーム アプリ UI 開発」ワークロードを選択したはずです。このワークロードでは、Android SDK Tools、Android SDK Build-tools、Android Emulatorなどの必要なコンポーネントも自動的にインストールされます。

Android開発用ワークロード
Android開発用ワークロード

 Visual Studioの[ツール]メニューから[Android]ー[Android SDK Manager]を選択すると、インストール済みのSDKや追加でインストール可能なコンポーネントを確認できます。

Android SDKとツール
Android SDKとツール

Android エミュレータの設定

 実機を持っていない場合は、Android エミュレータを使用してアプリをテストできます。Visual Studioの[ツール]メニューから[Android]ー[Android Device Manager]を選択して、エミュレータを作成・管理します。

 新しいエミュレータを作成する際は、以下の点に注意してください:

  • APIレベル:最低でもAPI 21(Android 5.0)以上を選択
  • ハードウェア:Google Playサービスが必要な場合は「Google APIs」を含むイメージを選択
  • アーキテクチャ:開発マシンがx64の場合はx86_64イメージを選択(パフォーマンス向上のため)
  • メモリ:最低2GB、推奨4GB以上のRAMを割り当て
Android Device Managerでのエミュレータ作成
Android Device Managerでのエミュレータ作成

実機での開発設定

 実機を使用する場合は、デバイス側で開発者オプションとUSBデバッグを有効にする必要があります。設定手順は以下の通りです。

  1. [設定]ー[端末情報]ー[ビルド番号]を7回タップして開発者オプションを有効化
  2. [設定]ー[開発者向けオプション]ー[USBデバッグ]を有効化
  3. USBケーブルでPCと接続し、デバッグを許可

 正しく設定されていれば、Visual Studioのデバッグターゲット選択ドロップダウンに、ローカルデバイスとして実機が表示されます。

Androidでのビルド

 環境が整ったら、実際にImageGeneratorアプリをAndroid向けにビルドしてみましょう。

初回ビルドの実行

 Visual Studioで以下の手順を実行します。

  1. ソリューションエクスプローラーでImageGeneratorプロジェクトを右クリックする
  2. 「スタートアッププロジェクトに設定」を選択する
  3. ツールバーのデバッグターゲットでAndroidエミュレータまたは実機を選択
  4. [デバッグ]ー[デバッグの開始]またはF5キーを押下
Androidデバッグターゲットの選択
Androidデバッグターゲットの選択

 初回ビルド時は、NuGetパッケージのダウンロードやAOT(Ahead-of-Time)コンパイルが実行されるため、時間がかかる場合があります。ビルドが成功すると、選択したエミュレータまたは実機でアプリが起動します。

 アプリが起動したら、メニュー画像生成を選択してみましょう。すると、エラーが出るはずです。

画像生成選択時のエラー表示
画像生成選択時のエラー表示

 これは、OpenAIのAPIキーが取得できず、OpenAIクライアントの初期化で失敗するからです。根本的な原因は、前回組み込んだユーザーシークレットが、モバイル環境では動作しないためです。ユーザーシークレットは、あくまでWindowsの開発環境で成立する仕組みです。そこで、この部分を、モバイル環境や、本番環境を見すえた処理に変更します。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます
  • ・翔泳社の本が買える!
    500円分のポイントをプレゼント

メールバックナンバー

次のページ
APIキー取得処理の変更(1)

この記事は参考になりましたか?

マルチターゲットアプリ開発の新しいアプローチ~.NET 9 新テンプレートの基本~連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 高江 賢(タカエ ケン)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/22811 2025/12/22 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング