Windows PC の Xamarin で Android と iOS のアプリ作成に挑戦した話

最初に

スマホ用のアプリを作ってみよう、ということで勉強がてらやってみました。
Mac を持っていないため、どうにか Mac 無しで iOS アプリの開発ができないか色々調べて試してみました。

結論からいうと、
Windows のみで Apple Store にアプリをリリースするのはあきらめました。

最終的な環境は、

  • Github にプライベートリポジトリを作成
  • コーディング
  • Android エミュレータにて動作確認
  • Android 実機にて動作確認
  • git push
  • AppCenter にて iOS アプリのテスト用Build
  • AppCenter から実機に Distribute
  • iPad の実機にて動作確認
  • AppCenter にて iOS アプリのリリース用 Build
  • macincloud を利用し、 ipa ファイルを AppStore へアップロード

となりました。

最初はどうにか無料で開発できるように頑張りましたが AppStore へのアップロードに Mac が必須という事実を知り断念。
初心者の方は AppCenter を利用せず最初から macincloud を利用するのが一番やりやすいと思います。
今から新しく始めるならば AppCenter を外した構成にします。

  • Github にプライベートリポジトリを作成
  • コーディング
  • Android エミュレータにて動作確認
  • Android 実機にて動作確認
  • macincloud にて iOS アプリを Build
  • Apple Device のエミュレータにて動作確認
  • iPad の実機にて動作確認
  • ipa ファイルを AppStore へアップロード

私の練度が低く、実際に動作をさせながらではないと開発できないのでエミュレータを利用できる環境を選択しています。

AppCenter は実機テストまで自動的に行ってくれるので、多人数での開発や多数のデバイスを対象としたアプリを作成する際には最終的に移行すると幸せになれるかもしれません。

事前準備

開発用のPCです。

  • Windows10 Home
  • Ryzen 7 4700U
  • メモリ 8GB

正直メモリは不足気味でした。16GBが人権なんですね。エミュレータを利用すると常に7GBオーバー。

エミュレータのハードウェア高速化として Hyper-V を有効化したいですが、 Windows10 pro でないと Hyper-V は有効にできません。

ですが、 Windows のハイパーバイザープラットフォーム、仮想マシンプラットフォームを有効化するだけでも劇的に高速化されました。予算をかけられない人はこれで十分かと。

ハイパーバイザーは以下を参考にしながら有効化してください。
エミュレーターのパフォーマンスのためのハードウェア高速化 (Hyper-V と HAXM)

Frameworkの選択

どうせ作るんやったら Android も iOS もちょっとの変更で出したい!ということで無謀にもクロスプラットフォームでの開発を行うことにしました。

参考にした記事

クロスプラットフォームフレームワーク比較 2020(Flutter, React Native, Xamarin, Unity)

普段 C# を使っていることもあり学習コスト最小限でいけるんじゃね?ってことで Xamarin を選択しました。

個人開発なので Visual Studio Community Edition をダウンロードし Xamarin をインストール。

Visual Studio download

ネットの海を彷徨っていると、まずはネイティブの知識をつけたほうが良いとか、クロスプラットフォームにはネイティブの知識が必須とかありましたが、まぁなんとかなるやろ。。。で開始。

実際簡単なアプリだったので何とかなりました。共通コードのみで進めることができ、 Android も iOSも 問題なく動作させることができました。

Androidアプリの開発

Android は特に引っかかるところなく進めることができました。

Debug用のエミュレータ設定

ディスプレイサイズ違いでいくつか設定すると良いでしょう。

Tool > Android > Androidデバイスマネージャ

Android実機での動作確認

実機の USB デバッグを ON にします。
PC と接続して、デバイス側でファイルの転送を選択するとデバッグ用のデバイスとして Visual Studio に認識されました。

設定 > その他の設定 > 開発者オプション > USBデバッグ

iOSアプリの開発

iOS アプリを作るには Mac が必要というのをちらほら見聞きしていましたが、実際に必要だった場面が三つ。

  • iOS アプリのビルド
  • エミュレータでのデバッグ
  • アプリストアへのアプリのアップロード

ビルド自体は AppCenter で何とかなりましたが、あと二つに関してはどうにもならず。

エミュレータでのデバッグの代替として UITest を組み、テストの中でスクリーンショットを撮ることはできました。想定した画面が出ているか、程度は確認できました。

アプリストアへのアプリのアップロードが致命的で、リリースする際に避けて通れません。ここで Mac 無し開発を断念しました。あと少しだったのに。。。

中国製のアプリを使うとアップロードできるみたいですが、非公式かつリスクが高いと感じられ、やめました。

UITestの構築

テストを組まないから時間がなくなるんやで  by.ソフトウェアつよつよマン

参考にした記事

Xamarin.UITest を試す (Visual Studio で) (Xamarin.Forms で)Mastering

Xamarin.UITest

XamarinAppCenterSample(github)

iPhone画面サイズ早見表(図付き)

UITest とは、コード内にタップやスワイプという動作を記載することで、アプリを自動的に操作してくれるテストです。スクリーンショットが取れるので、テスト結果のみ確認することができます。

AppCenter には設定したデバイスでテストを流してくれる機能があり、 Apple Device をあまり持っていない状態でも動作の確認ができました。

設定したデバイスは AppCenter で申請するのに必要な4種類のデバイスを設定しました。

  • 6.5 inch Device ( iPhone 11 MAX Pro )
  • 5.5 inch Device ( iPhone 8 Plus )
  • 12.9 inch Device ( iPad Pro 12.9″ (2017) )
  • 12.9 inch Device ( iPad Pro 12.9″ (2018) )

まずはローカルで UITest を組み、 Android エミュレータで Test のデバッグ、動作を確認した上で AppCenter のテストを手動で流しました。

Testの手動での流し方は以下に従います。

AppCenter > Test > Test runs > New Test run

pathToFile.ipa : Build済みのipaファイルをダウンロードし、ローカルの適当なディレクトリに置き指定
pathToUITestBuildDir : ローカルのUITest ビルドディレクトリを指定

本来ならこれで流れるようですが、エラーが出たためNuGetでxamarin.uitestをv3.0.12へアップデートし、スクリプトに以下を追加しました。

--uitest-tools-dir "C:/Users/{USER}/.nuget/packages/xamarin.uitest/3.0.12/tools"

AppCenterのスクリーンショット取得

2021年1月現在、App Centerから直接スクリーンショットをダウンロードすることはできないみたいです。
手順としては以下。

  • App CenterのAPIを使ってレポートを取得
  • 記載されているURLからフルサイズのスクリーンショットを取得

AppCenter Test reports

AppCenter API

  1. APIで取得したレポートファイルから、 step_report_urlを探す。
  2. step_report_urlに記載されているアドレスにアクセスすると、そのステップでの詳細レポートを取得できるので、その中から “screenshot”:{“urls”:{“original”: を探す
  3. 記載されているアドレスにアクセスすると、フルサイズのスクリーンショットを取得できる。

API parameter

test_run_id

Test > Test runs
テストを選択した際のURLの末尾の数字(桁数:8-4-4-4-12)。ハイフン込み。

owner_name

アプリのオーナー。私の場合、App Centerにログインしているuser nameでOKだった。

app_name

App Centerに登録したアプリの名前。

AppleDevice実機での動作確認

参考にした記事

【Mac不要】.NET製iOSアプリをiPhone実機配備する手順

我が家にはiPadのみあったので、それで実機デバッグをしようと考えました。
Appleのアカウントに実機を登録し、実機の情報を含めたデバッグ用のmobileprovisionファイルを作成。
それをAppCenterに登録し、Buildします。
完了後、AppCenterのDistributeからメールアドレス宛てに配布、iPadからメール内のリンクにアクセスすることでインストールできました。

Apple Storeへのアップロード

今回はAppCenterにてBuild済みのipaファイルがあったため、Transporterを利用しました。
Transporterでログインしてipaファイルをドロップするだけでアップできたので非常に簡単でした。

普通はVisualStudio for MacやXCodeから直接アップすれば良いかと。

Macの代替

WindowsPCだけでは突破できない壁を超えます。

Appcenter

iOSアプリのビルドが可能。実機のテストも可能。

AppCenter

無料で始められる。
1回のビルドが30分未満の小さいアプリであれば、月に240分まで無料でビルドが可能。
実機テストは最初のひと月は無料で利用できる。

AppCenter price

エミュレータと違い、実際に操作しながら画面の状態を確認できないため最初に取り掛かるには結構つらい。
Androidのエミュレータである程度動作が確認できていたので何とかなったが、iOSアプリだけの開発だったら無理だった。

iOSのアプリだけ開発するのであれば、おとなしくMacを買うか、後述のmacincloudの利用をおすすめします。

macincloud

クラウド上のMACを借りる。
OSのバージョンや使用するCPU,メモリの量等で値段が変わる。
今回は小規模なアプリだったので、1日3時間使用可能な一か月$20のプランで事足りた。
登録してから15分くらいで使用可能になった。

Windowsのリモートデスクトップを利用。ファイルのやり取りはGoogleDriveなどの外部サービスを介して行った。
レスポンスは可もなく不可もなく。不自由はしないけど快適でもない感じ。

macincloud.com

最初から開発環境がインストールされている。
Visual Studio for Macはそのままで問題ありませんでしたが、XCodeは古いため、アップデートする必要がありました。

iOS証明書関係

参考にした記事

WINDOWS環境だけでIOS向けアプリをUNITYで作る – IOSビルドの準備

Appleの証明書とかまとめ!

怖くないiOSの証明書

私の理解としては印鑑証明みたいなものかと。

  • 印鑑をつくる
  • 印影を役所へ登録する
  • 印鑑証明書を取得する
  • 印鑑と印鑑証明書で本人であることを証明する

これに照らし合わせて考えると

  • 証明用ファイルを作成する (.csr)
  • 証明用ファイルを認証局へ提出
  • 証明書を取得する(.cer)
  • 秘密鍵と証明書で証明する(.p12)

これと、Apple側で認証した .mobileprovision ファイルをを組み合わせてビルドをすることで、実機デバッグ用ipa、アプリストアリリース用ipa等、分けて作成することができます。

コメントを残す

%d人のブロガーが「いいね」をつけました。