.NET アプリケーション開発は Linux 上で可能
Google Pixel シリーズをはじめ、いくつかの Android デバイスでは「Linux ターミナル」の機能が使えます。Android スマートフォンで、Linux のターミナルを開いて、アプリケーション開発作業ができるんですね。
そしてそのいっぽうで、.NET SDK は Linux 用にも配布されています。
ということで、自分の手元には Google Pixel 6a があったので、「Android スマートフォンで、Blazor WebAssembly アプリケーションを開発して実行できるのは?」と考え、やってみました。
準備: Android で Linux ターミナルを使えるようにする
まずはじめに、Android デバイスの開発者モード (開発者向けオプション) を有効にします。
[設定] アプリから [デバイス情報] を開き、[ビルド番号] の箇所を 7 回連続でタップすると、開発者向けオプションが有効になります。
開発者向けオプションが有効になったら、改めて [設定] アプリから [システム] > [開発者向けオプション] を開き、さらに [Linux 開発環境] を開いて、[(試験運用版) Android で Linux ターミナルを実行する] のスイッチを ON にします。
そうするとアプリの一覧に [ターミナル] の項目がありますので、これを開きます。[ターミナル] を初めて開いたときに、Linux ターミナルのインストールを実行するか確認されますので、[インストール] を選んで進めます。
インストールが完了すると Linux 環境が立ち上がり、ターミナルが開きます。このあとの操作・作業がやりやすいように外部キーボードとマウスをつなぎ (自分は Bluetooth 接続のキーボードとマウスを使用しました)、横画面にしておきます。
ちなみに、ディストリビューションは Debian 12 のようでした。
droid@debian: ~$ cat /etc/os-release
PRETTY_NAME="Debian GNU/Linux 12 (bookworm)"
NAME= "Debian GNU/Linux"
VERSION_ID= "12"
VERSION="12 (bookworm)"
VERSION_CODENAME=bookworm
ID=debian
HOME_URL="https://www.debian.org/"
SUPPORT_URL="https://www.debian.org/support"
BUG_REPORT_URL="https://bugs.debian.org/"
念のためパッケージはすべて更新しておきました。
sudo apt-get update
sudo apt-get upgrade
.NET SDK をインストールする
以上で Debian Linux 環境ができましたので、続けて、.NET SDK をインストールしましょう。
手順としては、まずは以下のコマンドを実行して Microsoft のパッケージリポジトリを追加登録します。
wget https://packages.microsoft.com/config/debian/12/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
rm packages-microsoft-prod.deb
パッケージリポジトリが追加できたので、あとは apt-get コマンドで、.NET SDK (本記事執筆時点での最新 LTS であるバージョン 10) をインストールします。
sudo apt-get update
sudo apt-get install -y dotnet-sdk-10.0
以上で .NET 10 SDK がインストールされ、"dotnet" コマンドが使えるようになりました。
dotnet --version
10.0.101
事前に Microsoft のパッケージリポジトリの追加が必要とはいえ、普通に apt-get コマンドで .NET SDK がインストールできます。 別に "無理くり四苦八苦しながらインストールする" ようなことはありませんね。
Blazor WebAssembly プロジェクトを新規作成する
では早速、Blazor WebAssembly プロジェクトを作ってみましょう。以下のように dotnet コマンドを使ってプロジェクトを新規作成するだけです。
dotnet new blazorwasm -n MyBlazorWasmApp
生成されたプロジェクトの内容は以下のとおりです。
cd ./MyBlazorWasmApp
ls -l
-rw-r--r-- 1 droid users 286 Dec 13 02:52 App.razor
drwxr-xr-x 2 droid users 4096 Dec 13 02:52 Layout
-rw-r--r-- 1 droid users 549 Dec 13 02:52 MyBlazorWasmApp.csproj
drwxr-xr-x 2 droid users 4096 Dec 13 02:52 Pages
-rw-r--r-- 1 droid users 429 Dec 13 02:52 Program.cs
drwxr-xr-x 2 droid users 4096 Dec 13 02:52 Properties
-rw-r--r-- 1 droid users 383 Dec 13 02:52 _Imports.razor
drwxr-xr-x 2 droid users 4096 Dec 13 02:52 obj
drwxr-xr-x 2 droid users 4096 Dec 13 02:52 wwwroot
このまま実行してもいいのですが、ちょっとだけ、ページ上の記載を書き換えてみましょう。nano ./Pages/Home.razor を実行して、nano エディタで Home.razor を開き、"Hello, World!" と書かれているところを "Hello, .NET 10 on Android!" にしてみます。
Ctrl + O を押して保存、Ctrl + X を押して nano エディタを終了します。
実行
いよいよ実行してみましょう。dotnet run コマンドを実行してみます。すると無事、NuGet パッケージの復元からビルドまで成功し、開発用サーバーが起動開始しました。
コンソールの出力をみると、開発サーバーはポート 5027 でリッスンしているようです。そこでこの Linux 環境のポート設定を変更し、ポート 5027 でのリッスンを許可するようにします。Linux ターミナル画面右上の歯車のアイコンをクリック (タップ) して [設定] 画面を開き、[ポートの管理] をクリックします。
[ポートの管理] 画面が開いたら、[保存済みの許可ポート] 横のプラス [+] ボタンをクリックし、
すると、[新しいポートを許可する] プロンプトが表示されるので、ここに、先ほど確認した、Blazor WebAssembly プロジェクトがリッスンしているポート番号 (今回は 5027) を入力して [保存] をクリックします。
以上で動作確認ができるはずです。その Android 上で Chrome ブラウザを起動し、URL http://localhost:5027 をアドレスバーに入力すると、無事、Blazor WebAssembly アプリケーションが表示されました!
もちろん、カウンターも普通に動作しますし、
HttpClient による JSON のフェッチも動作していました。
また、このあと、Blazor Server アプリケーションプロジェクトの新規作成から実行までも試しましたが、こちらもしっかり SignalR 接続が機能して、正常に動作しました。もう当たり前過ぎるので、これ以上のスクリーンショットは割愛します。
おわりに
実際のところ、Android スマフォで Blazor アプリケーションを開発するかというと、たぶんやらないとは思います😅 でもそれは、単純に、もっぱら画面の狭さに起因するもので、Android スマホ上での開発環境の構築・整備それ自体に難があるわけではありませんでした。すなわち、
- Android の一部機種で有効な Linux 開発環境は、まるっと普通に Debian Linux だし、
- .NET SDK は普通に apt-get でインストールするだけで Linux 上でも何の手間もなくそのまま使えてしまうし、
- Blazor WebAssembly はブラウザ上の WebAssembly を使って、C#、というか .NET の中間言語バイナリをそのまま実行してしまうのだけれども、様々なツールチェインを駆使してやっとこさできるというものでもなく、WebAssembly の知識なしでも .NET SDK だけでしれっと作れてしまうし、ビルド時間も数秒程度で済んでしまうし、
ということを、この記事を通して訴えたかったです。"スマホで WebAssembly アプリ開発" という技術的な面白さもあるんですけれども、かつては "普通" にはできなかったいろんなことが、いまは "普通" にできるようになっているんだなぁ、 というように、認識を新たにしたいな、と思った次第でした。
おまけ
"「やろうと思えばできる」というのとLinux の上で動かすのが当たり前という物とでは話がちがう" という点には全くもって共感しかありません。技術的な挑戦や意義であったりあるいは単純にその面白さと、それが実運用レベルで使い物になるかどうかは別の話だと、まったくもってそう思います。ただ、話の前提であった「C# (.NET) が Linux でも動かせる」のは「やろうと思えばできる」のレベルではなくて、今は実は「ごくごく自然体に・普通にできる」のレベルだったですね。YouTube の Microsoft の公式チャンネルでも、.NET 関連の開発チームの中の人が (Linux ではないですが) 普通にご自身の普段使いの MacBook で VSCode 使ってデモしてますし、.NET の Web サーバーアプリケーションは今や Linux コンテナで稼働させることのほうが多いでしょうしね。
![Android [設定] アプリ画面](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F58450%2F86ced59b-8c48-4410-b567-94cefbd7d1ef.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=cb1327b8775a138c12c2bbcb87b5f123)
![[設定]アプリの[デバイス情報]画面にある[ビルド番号]](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F58450%2Fa828c1ee-df22-40aa-9f5a-4d811a7632f8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=29f0bda45bfc0e3f2e942110c90b2e7b)
![[ビルド番号]を連続タップ中](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F58450%2F62832943-3f4c-494a-b141-46e0b84986b3.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d08c0c297b748129e77c35a45517265c)

![[設定] アプリの [システム] 画面にある [開発者向けオプション] 項目](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F58450%2F65436037-53d0-4555-a0e6-11676b68a609.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0cdc7a17225578f9cd6e4702b80cecb0)
![[開発者向けオプション]画面の [Linux開発環境] 項目](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F58450%2Fc3909cc7-56b4-4752-81b3-3852b659e719.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a1ff601a906cf6d90be8637ceec7bd32)
![[Linux 開発環境] 画面の [Linux ターミナルを実行する] オプション](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F58450%2F2e354bd0-6fa4-4427-a1d3-f92352c6243a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=441ee5405ad339d78a2cad8c965c32cd)
![アプリ一覧に現れた [ターミナル]](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F58450%2F670408f1-a535-4b46-9d4f-dddd0870833e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=86fcab58acfa34ee277656f45c4e237c)
![初めて [ターミナル] を起動したときのインストール確認の画面](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F58450%2F4dce997f-a32b-4716-9936-8575636e28b3.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d445a43744d9873269bfcee4458aa626)








![Linux ターミナルの [設定] 画面](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F58450%2Fc31c1965-baf7-4002-83c0-24ffa0033aab.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d0f9572b602c6cad86a7fabd849beb3d)
![[ポートの管理] 画面](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F58450%2F05299e19-58af-40a6-b311-40c66812c9c0.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9ce3cb601601dbfaa6aea7b179169ace)
![[ポートの管理] 画面で新しいポートを許可しているところ](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F58450%2F62c175a2-cb85-4bca-ac66-2f422332b45b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=efc591681143a707e79fca2b0eb991c3)


