Xamarinアプリが生まれ変わったらBlazorアプリになっていた件

僕はXamarinアプリだ。

僕の機能は5W1Hで予言をすること。
予言って言えば聞こえは良いんだけど、流行りのAIでもクラウドネイティブとかなんかではなく、ただただノリで作られただけのスタンドアローンなアプリなんだ。いわゆるクソアプリだ。

あ〜あ、今日も利用者が全然いない・・・。
いっその事、生まれ変わりたいよ。

はぁ・・・

ドンっ！

何だ！何が起きたんだ！

・・・どうやら僕は急に出てきたトラックに轢かれたみたいだ。

あ〜あ、これは死んだなー。
つまらないアプリ人生だったよ。

・・・

・・・ん、まだ生きてる？
いや、何だここは！

ここはWEBだ！
僕はWEBアプリになったんだ！
しかもなんだか凄い力が・・・これはクラウドだ！
どうやらクラウドというチート能力がついたようだ。

やれやれ、もう楽になれると思ったのに、まだ僕のアプリ人生は続くようだ。

XamarinアプリからBlazorへの移植

はい、という事で導入終了です。
「こいつ頭ぶっ飛んでるのか？」と思った人、安心してください。僕は正常です。
アプリがトラックに轢かれて転生する状況が僕にも全く理解できません。

続：どこまでショボいアプリがAppleの審査に通るのか試してみたで作ったアプリが可哀想だったのでBlazorの勉強がてらに移植してWEBアプリ化してみました。
せっかくなので、よくあるTODOアプリを作るよりは面白いもの作りたいですよね。

ソースはGitHubに公開してます。

出来あがりの画面はこんな感じです。

Blazorとは

「Blazorとは何だ？」という方は以下の記事が参考になるかと思います。
WebAssemblyの技術を使って、ブラウザ上で.NETを動かしてやろうという変態的なやつです。

　C# で Single Page Web Application が書ける Blazor が凄かった件
　https://qiita.com/jsakamoto/items/20d4893f6c8cdb0356f6

BlazorにはServer-sideとClient-sideの２種類あり、今回はクライアントサイドのお話です。

Server-sideの方がいち早くメジャーデビューする予定で、.NET Core3に含まれてリリースされます（2019年９月予定）。
Client-sideは今現在(2019年７月１日)では正式リリースの予定は決まっていません。

Server-sideは立ち位置的にはNuxt.jsとかに近いのかなと思っています。
Azureとの連携を考えるとより多くの恩恵はあると思います。
気になる方は Blazor server-side Signal-R で調べてもらうと色々情報が出てくるかと思います。

Client-sideはWebAssemblyで動くMVVMフレームワークです。
Silverlightが大好きだったので、個人的にはBlazorのClient-sideの今後に期待しています。

開発環境

Mac + VS Code という環境で、.NET Core の 3.0.100-preview6-012264 で開発しました。

移植作業

BlazorとXamarinだと色々できることは違うと思いますが、一応コードビハインドにガリガリ書いてたわけではなく、ViewModelを作ってやってたので移植は簡単でした。
ロジック部分については基本的にほぼコピペで動きました。
そもそも元のアプリが「ショボいアプリ」なので1画面で難しい処理もしておらず、即移植完了です。

　移植したViewModel
　https://github.com/uemegu/GloriousFutureOnline/blob/master/BlazorProject/ViewModels/PredictModel.cs

せっかくなのでUXを高める

そのまま移植してもつまらないので、勉強がてらにUXを高めます。

プレイ前 -UXの始まり-

始まりは宣伝、導入からですね。
お金はかけないのでTwitterで自ら宣伝します。

みんな〜、あの予言アプリがWEBアプリかされたよ〜

明日に迷える子羊達は使ってみて〜https://t.co/h1NvORH5Gn

— megumu-u (@megyo9) July 1, 2019

プレイ中 -UX進行中-

アプリ画面を開いてプレイをします。
Twitterのリンクもつけてるので**「今日の俺の予言ってマジ卍じゃね〜」**なんて会話を若者達がしてることを妄想します。

プレイ後 -UXは続くよどこまでも-

プレイが終わった後もユーザー体験は続きます。
生まれ変わったこのクソアプリを忘れないで欲しいのでウェブプッシュを飛ばします。
(PCブラウザ、Androidなら受信できます。iOSは残念ながら対応できません。)

これで若者達が**「今日こんなお告げが来た〜マジ卍〜」**なんて会話をしてることでしょう。

※全文表示されないことがありますが、通知をクリックしたら全文読めるようになります

Let's Play

作ったものは以下から試せます。

実装説明

今回、バックはFirebaseを使ってます。
Firebaseを使った実装はJavaScriptです。

WebAssemblyは、ブラウザのWebAssemblyのエンジンで動きます。
JavaScriptとは全く別世界です。DOMとも別世界です。

BlazorではJSInteropというものを通して、JavaScriptの世界と会話します。
JSInteropはデフォルトで用意されているサービスなので、何も考えずにDIできます。

Blazor↔︎JavaScriptの連携

GitHubの方に連携箇所を書いてます。

Firebaseとの連携

bin/Debug/netstandard2.0/dist/_frameworkとwwwroot/index.htmlをコピーして持っていけばBlazorのアプリは起動します。
あとはFirebaseのアプリと適当にマージしたら両方使える状態になります。
（上記パスのDebug部分はリリースビルド時はReleaseになります）

Firebase側の実装

FireStore, Authentication（匿名認証）, FCM, Functionsを使ってます。
このアプリでは、誰かが予言をすると、その予言が誰かにプッシュ通知されるようにしています。
図にするとこんな感じです。FireStoreをメッセージキューがわりにしてます。

まとめ

クライアントサイドのBlazorの所感としては「.NETで書けるの嬉しいけど、遅いなー」という感じです。
サーバーサイドは活用できるシーンは間違いなく出てくると思いますが、サーバーサイドだけでなくクライアントサイドのこれからの成長を期待しています。

再掲ですが、今回作ったアプリは以下のURLからお楽しみ頂けます。

GitHubはこちら。