2021年1月27日今Xamarin.Formsでアプリを作ってみた。

本エントリはmeetup app osaka@5勉強会用のエントリです。

 

meetupapp.connpass.com

 

meetup app osakaって勉強会に定期的に登壇する人として参加させてもらってるんですけど、appって名前の勉強会の割にアプリっぽいことやってないなって思ったので、1年ぶりに最新環境でXamarin.Formsのアプリをさくっと作ってやるぜ!って思ったら失速した話です。

 

原則的に私の勉強会での発表はリアルタイムデモ6割・トーク3割5分・内容5部のおちゃらけ系なのでオンライン勉強会はマジで厳しい。でもおいら負けない。

ちゅーことで内容に関しては期待しないでください、参加することに意味があるのだから。

 

1年ぐらい前までXamarinとXamarin.Formsを仕事で5年ぐらい一生懸命やってて、当時Xamarin.Formsを手足のように駆使してiOSアプリもAndroidアプリもサクっと作れるイメージしかなかった。それまではXamarinの不安定さやXamarin.Formsの進化の速さに地雷踏みまくりの謎現象慣れまくりの状況やったのが1年ぐらい前は安定してた。(と思ってた)

ので、そっから1年も経てばさらに安定して、ウヒヒこんなにサクっと作れちゃうもんねーってなると思ってた。そしてそれはAndroidで動かすまでは実際にそうなった。

 

さすがにHello WorldをXamarin.Formsでやってみたは無いんやけど、かと言って作りたいアプリもない。なので、やったことないけど簡単そうなお題にする。

画面上にボタンが2つあって、片っ方押したらXX、片っ方押したらYYみたいな奴。

一番簡単なのはカウンター(+押したらカウントアップ、-押したらカウントダウン)みたいな奴で、今回は「着いたー」と「帰るー」を記録するアプリにしてみる。

f:id:fkmt5:20210127230720j:plain

Androidエミュレータで出すとこんな感じ。

で、テッキーな内容にするならサーバーレスでS3でうんぬんかんぬんとか、AzureでFunctionsでうんぬんかんぬん的な話になるんやろけど、超簡単そうなslackに投稿するってことにした。

青いボタン押す => 着いたー的な投稿

オレンジのボタン押す => 帰るー的な投稿

で、実行結果は

f:id:fkmt5:20210127231713j:plain

こんな感じアプリ自体は10分で作れたし、書いたコードも10数行。(アプリ書いた時間は10分ぐらいやけど、SlackのAPI叩くトークンの準備とかで全部30分ぐらいはかかってる)

ボタンもXamarin.Formsのプレーンなので超簡単。

あ、そうや最新のVisual Studio 2019 16.8.4やとデザインのプレビューがちゃんと動いてた。1年前は微妙な感じやったんやけどね。悪くない。

f:id:fkmt5:20210127232236j:plain

なのでXamlもサクサク。以上!

 

 

 

で、終わらないのがクロスプラットフォームアプリ開発の地獄って奴なのな。

そしてここで待ってる地獄ってのは、いわゆるM1 Mac(Apple Silicon Mac)でXamarin.Formsがっ!的なテッキーな話では全くなくて、普通のMacBookAir2019でやって地獄やったって話でしかない。

まずVisual Studio 2019 16.8.4に対応するXcode(12以降?)を入れないとXamarin.iOSに相手してもらえない、そしてXcode12を入れるにはmacOS Big Sur 11.1以降が必要となる。

私がMacの情弱なのは認める、はい情弱です。情弱じゃ無かったらはじめっからXcodeでSwiftで書いてるっつーねん。

私のMacBookAir2019にはWindows 10 May 2020 Update並みに評判の悪いBig Surなど入ってるわけは無く、普通にmacOS Catalinaしか入ってなかった。

 

そう、macOSのアップデートから物語は始まる。

いや、macOSのアップデートは大した問題では無かった、時間が滅茶苦茶かかること以外は。真の地獄はその後始まる。

 

ちなみに、皆さんはgoogle suggestionってご存じだろうか?

ならば、"mac xcode"と入れた時になんと出るかも知ってるかい?

f:id:fkmt5:20210127234112j:plain

7個中3個がインストールトラブルに関する検索になってる。

おっと、これじゃあ恣意的すぎるっつーかアンフェアだわね。

"windows10 visual studio"の結果もはっとこう。(windows visual studioでも似たような結果になる)

f:id:fkmt5:20210127234434j:plain

MacAppleをディス意図は全くない、本当に。

でも、Xcode11の入ったmacOS CatalinaをmacOS Big SurにアップデートしてXcode12にアップデートするのがこんなに大変なの理不尽過ぎへん?マジで?

何時間かかんの?ほんでどうやったら成功すんの・・・

(ちなみに、Appleに年1万円ちょっとお布施してDeveloper ProgramでXcode12のZipファイルをダウンロードすることも出来る。で、11.63GBのzipファイルを解凍するだけでびっくりするぐらい時間がかかる。これはまた別の話か) 

 

で、数多のトラップを潜り抜けて

f:id:fkmt5:20210127235152j:plain

やっとここまでたどり着いた。パトラッシュ僕もう疲れたよ。。。

 

一回環境作れば良いのかも知らんけど、これだけ変化の激しいmacOSとXamarin.Formsと.NETの中でM1 Macやって?

マジでお仕事でXamarin.Formsやってる人たちご苦労さんやで。

趣味でやっててこれじゃあもうあの世界には戻れん気がしてる。

アプリ作成30分Xamain.iOSの開発環境作成3日(24時間x3て意味じゃない)

 

現場からは以上です。

 

 

 

 

 

 

堂々巡り

うーん、賢くしてるつもりで悩んでるんやけど、ほんまにそれで賢こなってるんかわからんようになってきた。
その頂点群が描く形を維持するのが良いのか、その頂点群が位置を固定するアンカーとしてそれを維持するんが良いんか、行ったり来たりを繰り返してる。

人間的に判断すれば、形を維持して欲しいケースと頂点位置を固定して欲しいケースは区別出来るんやけど自動で出来るんかな。

理想的な挙動のイメージがないわけじゃないんやけど、現実的な計算量でおさまるんかなあ。
時間が無限にとれて凝りまくれたとしても、それで動きがもっさりして全体としてのUXが悪くなるんならそんなんせん方がマシな気がするなあ。

直角しか出てけーへんねんから、2点を結ぶのは2線分(3頂点)あればOKなんで、末尾から逆算してったら最適化できるかなあ。

ちょっと考えるんしんどなってきた。ちょっとちゃうことやって気分転換するか。

アルゴリズム実装のための準備2

テストパターンをGUIで作る処理と状態の変化の詳細を表示するプログラムを書いた。

ちょっと絵日記じみてきたな。
ほんま大したことやってないんやけど、スクショだけ見たらなんか凄そうな錯覚おこすね。(嘘)
シンプルな実装より、ほんのちょっとだけ賢くしたいだけなんやけどかなり苦戦してる。

どこで妥協するかだけなんやろけどなあ。もうちょっとだけ粘るか。
今実装してるデータ形式は描画時のパフォーマンス重視にしてたんやけど、それだと苦しいところがありそうな気がしてきた。
描画時用のキャッシュするデータ形式と実際のデータ形式分けた方が良いかもなって感じ。
もうちょっと実験してみるか。

しかし、やっぱC#は良いなあ。C++じゃこんなツールも数時間でサクっとは書けんもんなあ。

アルゴリズム実装のための準備

やってることは大して難しないんやけど、脳みそが疲労してんのかデバッグが進まん。
なので実装結果が目視でおかしいかおかしないかテストするプログラムを先に書いた。

状態の変化前と変化後をみておかしい時は赤くなる。

パターンを記述したメソッドにカスタムアノテーション付けてテストパターンを網羅してるんやけど、思ったよりちゃんと動いて無くてショック。
ダメなパターン(テストケース)を一般化してアルゴリズムにフィードバックするんやけど、最先端の人とかやったらディープラーニングで自動的に
実装出来んちゃうかな?ってちょっと思ってる。

次はテストパターンを生成するプログラムを書いて、そのあとアルゴリズムの再検討やな。
なかなか目的のとこまでたどりつかん。

Excel方眼紙

処理的には単純なんやけどイチから書くとなると結構変な感じになる。
全パターン網羅するのには図で書いた方が良い。
昔はフリーハンドでノートに書いてたけど、今回はExcel方眼紙を使ってみた。
他にもいい方法あるんかなあ。

これと拡大縮小をやっつけたら、既存コードの整理とまとめかなあ。
もうひとがんばりって感じ。

WPF 2D

ちょっと、気を抜いたら2週間経ってた。

WPFの論理ピクセル単位(アンチエイリアスあり)の描画

アンチエリアスオフの描画(RenderOptions.EdgeMode="Aliased")

ま、表題通りなんやけど。
最終的にはDirect2Dで解決するつもりなんで深く追求してないんやけど
SnapsToDevicePixels="True"も1pixelの幅を考慮した座標に0.5足すハックもRenderOptions.EdgeMode="Aliased"(いわゆるアンチエイリアシングの逆)もうまくいかない。
その辺は、エッセンシャルWPFでもさらっと流してて、さらに言えば昨今の4Kディスプレイとかの高DPI環境ではどうなんのかとか全然わからん。

4Kモニタでドットバイドットの1物理ピクセルの線なんて見えんのかしら。

UserControlのOnRenderメソッドをオーバーライドしてDrawingContextにベクタグラフィック直書きしてるんやけど、全然うまくいってない。
なんか設定ミスってるだけなんかも知らんし、優先度の高い課題ってわけじゃないんで保留にする。

結局最後はDirect2Dで描くつもりなんで、やっぱ気合入んないのよねって結論。