Zenn
Open12

年末年始で個人開発アプリを書き直してみようかなと思っているので過程をメモる

Angular
個人開発
Ionic
さとうあまみさとうあまみ

まずは ionicで新しいプロジェクトを作るかな。
現行アプリがTabsだからTabsで作るか。

ionic start アプリ名 tabs --capacitor

懸念

  • ソーシャルログイン
  • 印刷対応
  • 多言語対応
  • タイトルとチェックボックスが融合しつつ、アコーディオンな独特UI

これらをうまく移行できるかな。
特にソーシャルログインや匿名からのステップアップログインは一癖ありそう

これを機にどうしようかな

  • ミニマルモード（これを機に、ミニマルだけにしてもいいかも？）
  • アプリ初回起動時のSwiperでの案内どうしようかなー？改定しようかなー
  • URLやディレクトリ構造もすっきりさせたい

うまくコンポーネント化してリファクタしたい。
ReactでもVueでも感じたけど、フォームのコンポーネント化はデータのやりとりが難しい。
でもAngularがバインディングは一番分かりやすいと感じているので頑張ってみるか？
年末年始で終わる気がしない😂

さとうあまみさとうあまみ

VoltaでNodeのバージョンかためとこ。
最新の18にしとけばいいのかな。でもほかの色々が動かなかったらイヤだな。
とりあえず18にしておいて、動かなかったらその時に下げるか。

Angular v15 supports node.js versions: 14.20.x, 16.13.x and 18.10.x
https://angular.io/guide/update-to-version-15

$ volta install node
success: installed and set node@18.12.1 (with npm@8.19.2) as default
$ volta pin node
success: pinned node@18.12.1 (with npm@8.19.2) in package.json
さとうあまみさとうあまみ

とりあえずいったんブランクの状態でiPhoneとAndroid端末で動かしてみるか。

$ ionic build
$ ionic cap add ios

add iosするとめっちゃワーニングでたしエラーも出た。ダメじゃん。

[capacitor] ✖ Updating iOS native dependencies with pod install - failed!
[capacitor] ✖ update ios - failed!
[capacitor] [error] xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
[capacitor]         
[ERROR] An error occurred while running subprocess capacitor.
        capacitor add ios exited with exit code 1.

ダメもとでXcode開いてから ionic cap sync したけど同じエラーが出る。

Point xcode-select to the Xcode app Developer directory using the following command:
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
https://ionicframework.com/docs/cli/commands/capacitor-add

で解決した！

さとうあまみさとうあまみ

では、実機で動かそう。

$ ionic cap open ios


ビルドにFailするじゃん〜
証明書を事前に選択しないといけないのだっけ、すっかり忘れてる。
Developer証明書を選択して再度ビルドしたら通った。
実機で起動を確認！🎉

さとうあまみさとうあまみ

今度はAndroidじゃ〜
実機久しぶりに触るから充電しないと。電源の入れ方も一瞬忘れてた。

$ ionic cap add android
$ ionic cap sync


…なんかこっちも不穏な表示出るじゃん？
あとでGradleをなんとかすればいいっぽい。

プロジェクトを開いて実機を繋いで動かしてみる。

$ ionic cap open android

ビルドボタンポチーしたら起動した！🎉ように見えて一瞬でクラッシュしてアプリが閉じた。ウケる。
気を取り直してアプリアイコンをタップしたら起動はした。

やっぱり右下でGradeアップグレードしろと出る。
しかしうかつにアップグレードすると動かなくなるのだ。

7.2.1から7.3.1ならしてもいいかな…。

とりあえずAndroid Studio自身もアップデートしとこ…。

さとうあまみさとうあまみ

起動を確認したところでリファクタリングの方向性を決めねば。
紙（eインクタブレットだけど）に書いていったん整理するかね…

さとうあまみさとうあまみ

ngx translateはそのまま使ってみよう。
Readme.mdにAngular 15への対応が書かれていないのが気になるけど、とりあえず入れてみよう

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save

以前とほぼ同様の手順で導入できたもよう。
今度はちゃんとShared Modulesを使って効率良く使うんだ…

AngularFireも入れる

ng add @angular/fire

あかん、これは相当時間かかるので絶対年末年始にはおわらん。
アプリ存続の危機である…
なになに？

 Interface 'DocumentSnapshotExists<T>' incorrectly extends interface 'DocumentSnapshot<DocumentData>'.

解決策は…まじかー
あんまりやりたくないけどやってみたら確かに解決した。

Same issue, using angular 15.0.0 - seems to be an issue with compatibility interfaces @angular/fire/compat/firestore/interfaces.d.ts.
This is momentarily fixed by changing the above file, replacing line numbers 15 and 24 to:
data(options?: SnapshotOptions): any;
https://github.com/angular/angularfire/issues/3255

さとうあまみさとうあまみ

型エラーの解消
そして印刷プラグインが依存関係のもろもろでインストールできない問題に遭遇しております…
コードの整理も少しずつできてはいるけれど、道のりの遠さよ
楽しいんですけどね、時間が経つことに焦りますね

Hidden comment