neputa note

今後の作業を整理する【個人開発 / Xamarin Forms】

初稿:

更新:

- 8 min read -

img of 今後の作業を整理する【個人開発 / Xamarin Forms】

自作のモバイルアプリについて

日々の睡眠時間を手入力で記録するモバイルアプリ(アンドロイドのみ)を公開している。

アラフォー初心者だけどスマホアプリを開発~リリースまでがんばってみた【Android・Xamarin.Forms】

この度、素人ながらスマホアプリ開発に挑戦してみました。今回の記事では概要と経緯について書き綴ってみたいと思います。実際に行った作業の詳細は、今後それぞれ記事を書き、こちらにリンクを追記します。作ったアプリ「OneThird」の概要 毎日の睡眠を入力によって記録するアプリです。寝た時間、起きた時間

今年は身内でいろいろとあり、年初にリリースして以降バージョンアップをサボっていた。

やらなければと思うことが溜まっているので整理のためメモを書いておく。

自作のモバイルアプリ「OneThird」の開発環境・使用サービス

フレームワーク

  • Xamarin Forms(クロスプラットフォームアプリ開発用)
  • Prism(MVVMフレームワーク)

使用言語

  • C#
  • XAML

IDE

  • Visual Studio Community 2019

認証サービス

  • Azure AD B2C

データベース

  • Azure CosmosDB(クラウド)
  • Realm(ローカル)

バージョン管理

  • Azure DevOpsのGit

Google Playへのデプロイ

  • Visual Studio AppCenter

広告

  • Google AdMob
  • Firebase(app-ads.txt用)

「やること」の詳細

Azure AD B2C認証アクセスレイヤの分離

このアプリはアカウントを作らずともモバイル内に睡眠記録データを保存して使用することができる。(Realmを使用)しかし、この場合はアプリを削除したり別の端末では同データにアクセスすることはできない。

またアカウントを作成すると(メールアドレスおよび各種SNS認証に対応)、アカウントに紐付いた睡眠記録データをクラウド上に保存できる。つまり機種変したりアプリを入れ直しても保存したデータにアクセスが可能。

この認証部分にはAzure AD B2Cによる認証機能を使用している。

Azure Active Directory B2C とは

Azure Active Directory B2C を使用して、アプリケーションで外部 ID をサポートする方法について説明します (Facebook、Google、その他の ID プロバイダーでのソーシャル サインアップを含む)。

あくまで内部的なことだが、この認証周りの実装がXamarin FormsつまりUI部分に行ってしまっている。

一応ドメイン駆動設計を参考に各レイヤで責任分割をした構造になっているのだけれど、開発当時に認証周りの実装がややこしくXamarin Formsのプロジェクトに組み込んでしまったのだ。

こいつを外部アクセスをつかさどるInfrastructureレイヤへとリファクタリングしたい。

ビフォーアフター

というのも、このあと予定している機能追加がユーザ情報に関連するため、後々のメンテナンスを考慮し先にやっておきたい。

Azure Functionsによるユーザ情報更新API構築

先にも書いたとおり、現在、認証ユーザ情報をAzure AD B2C上で管理している。

いまのところユーザIDさえ維持して認証できれば良いのだが、ユーザ固有の情報を追加したい。(デフォルトの入眠・起床時刻など)

Azure AD B2Cには「カスタム属性」を追加することができる。

この追加属性の値を読み書きするには「Microsoft Graph」使用するのが良いらしい。

そして、Microsoft Graphにはシナリオに応じた認証プロバイダーが用意されている。

Microsoft Graph 認証プロバイダーを選択する - Microsoft Graph

アプリケーションにシナリオ固有の認証プロバイダーを選択する方法について説明します。

しかし、1. クライアントがモバイルであること、2. 認証をAzure ADではなくAzure AD B2Cで行っていること、この2点が障壁となる。

まずモバイルアプリのため、Confidential Clientはサポート対象外のため選択肢から外れる。

Microsoft Authentication Library (MSAL) での認証フローのサポート - Microsoft identity platform

MSAL でサポートされる承認許可と認証フローについて説明します。

となると、インタラクティブに取得した認証トークンを使用することとなるが、Azure AD B2Cのユーザフローで取得したトークンではGraph APIにアクセスできないとのこと。

いろいろ調べて回っているが、モバイルアプリからダイレクトにアプローチする方法が見つけることはできなかった。(なにかよい方法をご存知の方、教えていただけると泣いて喜びます)

ということで、アプリとMicrosoft Graphの間にAzure FunctionsによるAPIを立てることを考えた。

Azure Functionsは使ったことがないが、HTTP Requestで呼びだすことができるし、Confidential ClientとしてMicrosoft Graphにアクセスすることもできるようだ。

Azure Functions の概要

Azure Functions を使用して堅牢なサーバーレス アプリを構築する方法について説明します。

ということで、後のユーザ情報管理に向け、Azure Functionsアプリにチャレンジしてみる。

デプロイ環境の変更(AppCenterからAzure DevOps)

現在、Azure DevOps上のGitリポジトリでソースを管理し、AppCenterでビルドおよびGoogle Playへのデプロイを行っている。

アプリをリリースした当時、偶然AppCenterによるデプロイの手順を丁寧に書いたブログを見つけたため、このような環境となっている。

App Centerを通じてXamarin.Formsで作ったAndroidアプリをストアに公開する - shuhelohelo’s blog

docs.microsoft.com Googleデベロッパー登録する 外部ツールからのAPIアクセスを許可する App CenterからGoogle Play Storeにアプリを公開するために,Googl Play StoreのAPIを外部ツールが利用できるようにする必要があります. まずはGoogle Play Consoleにログインします. 左側に設定という項目があるのでそれを選択します. 次にデベロッパーアカウント > APIアクセスを選択します. 新しいプロジェクトを作成ボタンを押します. 自分のGoogle Play ConsoleとリンクしたAPIプロジェクトが自動で作成され…

Azure DevOpsには、PipelinesというビルドおよびデプロイなどをYAMLファイルで自由に定義し実行するサービスがある。

Azure Pipelines とは - Azure Pipelines

Azure Pipelines を使用してコードを自動的にビルド、テスト、デプロイする方法について説明します

このAzure Pipelinesを使用しCI/CD環境を一本化したい。

学習ボリュームが一気に膨らみそうだが、使いこなせばかなり便利になるのでぜひ実現したい。

まとめ

ざっとやってみたい、やっておきたいことをまとめた。

年明けになるとは思うが、スケジュールをひき早めに取り組みたい。

来年はMAUIがやってくる。

.NET MAUI とは - .NET MAUI

.NET Multi-Platform App UI (.NET MAUI) は、C# と XAML を使用して、ネイティブのモバイル アプリやデスクトップ アプリを作成するためのクロスプラットフォーム フレームワークです。

様子を見つつ移行するんだろうなと思うのだが、個人的にはMobile Blazor Bindingsに期待している

Experimental Mobile Blazor Bindings

勤務先で使用する業務アプリを作る予定がありいろいろと検討しているのだが、BlazorでSPAアプリとするのが良さそうな結論になりつつある。

自作アプリ開発を通じいろいろ情報収集を行っているなかで、Xamarin FormsよりBlazor(というよりASP .NET Core)の方が、進化が早い感じることはしばしばある。

Dependency Injectionやログ出力など細かいところでASP .NET Coreのほうが便利そうだなと思う。

Xamarinは、細かいところで面倒が多い。あくまで個人の感想だが。

私のアプリの目標は「睡眠記録を蓄積し、天候等のデータと照合し、不眠のトリガーを見つけたい」だ。

開発環境や手法はあくまで手段。楽しみながら学んでいきたい。

来年は今年よりも多くに着手できると良いのだけれど。

Top Photo by:Charles Deluvio on Unsplash

目次