2020/05/02 ~ 05/08 のもくもく日記

最終更新日：2020/05/09 05:45:13

進捗管理

もくもく前回までは

2020/04/25 ~ 05/01 のもくもく日記をご覧ください。

今回の目標

Android ライブラリの整備
- Debugger の機能検討
- IntentBuilder 1.1.x の実装を進める
- WebViewBuilder の機能検討
REPLInDocker シリーズの整備
XAppRecipe の整備

途中経過

その１

Ionic のモノレポ構成、ややこいかも。
Ionic プロジェクトが２つ並列で扱うケースなら、紹介されている機能で何とかなるのは分かった。
ただ、例えばAngular でライブラリプロジェクトを作って、それをIonic プロジェクトから参照する場合は辛い……。

下記の前提で試して行ったことを書いてみる。

@angular/cli がグローバルインストールされている

Angular CLI: 9.1.3
Node: 12.4.0
OS: darwin x64

@ionic/cli がグローバルインストールされている

Ionic:
   Ionic CLI : 6.7.0
System:
   NodeJS : v12.4.0
   npm    : 6.9.0
   OS     : macOS Catalina

まず単純にやると、ビルドできずに失敗する。

#!/bin/sh
# Angular マルチプロジェクトの整備
ng new my-workspace --createApplication="false"
cd my-workspace

# Angular ライブラリの追加
ng generate library lib1 # 作成のみでIonic プロジェクトから参照しない
ng build lib1

# Ionic アプリの追加
ionic init --multi-app
cd projects
ionic start mainapp blank --no-deps --no-interactive --type=angular
cd ..

# 試しに実行
ionic serve --project=mainapp

実行結果

少し改良して、ionic start で生成した設定ファイル群の記述を修正すると、ビルドは通るようになる。

#!/bin/sh

# Angular マルチプロジェクトの整備
ng new my-workspace --createApplication="false"
cd my-workspace

# Angular ライブラリの追加
ng generate library lib1 # 作成のみでIonic プロジェクトから参照しない
ng build lib1

# Ionic アプリの追加
ionic init --multi-app
cd projects
ionic start mainapp blank --no-interactive --type=angular
cd mainapp
ng update @angular/cli @angular/core
sed -i -e 's/\.\/node_modules/\.\.\/\.\.\/node_modules/g' ./angular.json
sed -i -e 's/\"app\"/\"mainapp\"/g' ./angular.json
sed -i -e 's/app:/mainapp:/g' ./angular.json
sed -i -e 's/\"baseUrl\":\ \"\.\/\",/\"baseUrl\":\ \"\.\/\",\"paths\":{\"lib1\":[\"\.\.\/\.\.\/dist\/lib1\"],\"lib1\/*\":[\"\.\.\/\.\.\/dist\/lib1\/*\"]},/g' ./tsconfig.json
cd ..
cd ..
sed -i -e 's/\"projects\":/\"defaultProject\":\"mainapp\",\"projects\":/g' ./ionic.config.json

# 試しに実行
ionic serve

実行結果

この時点で、Angular のライブラリ参照をIonic プロジェクトに追加してみたら、Angular のバージョン違いで怒られたorz
なので、その修正とCapacitor 設定の記述を追加してみた……。

#!/bin/sh

# Angular マルチプロジェクトの整備
ng new my-workspace --createApplication="false"
cd my-workspace

# Angular ライブラリの追加
ng generate library lib1
ng build lib1

# Ionic アプリの追加
ionic init --multi-app
cd projects
ionic start mainapp blank --no-interactive --type=angular --capacitor
cd mainapp
ng update @angular/cli @angular/core
sed -i -e 's/\.\/node_modules/\.\.\/\.\.\/node_modules/g' ./angular.json
sed -i -e 's/\"app\"/\"mainapp\"/g' ./angular.json
sed -i -e 's/app:/mainapp:/g' ./angular.json
sed -i -e 's/\"baseUrl\":\ \"\.\/\",/\"baseUrl\":\ \"\.\/\",\"paths\":{\"lib1\":[\"\.\.\/\.\.\/dist\/lib1\"],\"lib1\/*\":[\"\.\.\/\.\.\/dist\/lib1\/*\"]},/g' ./tsconfig.json
ionic build
npx cap init mainapp io.ionic.mainapp
ionic capacitor add android
cd ..
cd ..
sed -i -e 's/\"projects\":/\"defaultProject\":\"mainapp\",\"projects\":/g' ./ionic.config.json

# 試しに実行
ionic serve

実行結果

Capacitor は動いたのでひとまず置いておくとして、Angular ライブラリへの参照追加は下記のエラーが出てダメだった。

Cannot read property 'bindingStartIndex' of null when using Library

https://github.com/angular/angular/issues/35586

他にも気になる点があって、これらを何とかしたいな……。

@angular/cli をグローバルインストールしないといけない(@ionic/cli で完結しない)
Angular バージョンがmy-workspace/ とmy-workspace/projects/mainapp/ それぞれで定義されている
capacitor.config.json がmy-workspace/ とmy-workspace/projects/mainapp/ それぞれで定義されている

うん、いろいろ大変だ……。

追記：ちなみに下記リンクにドキュメントがあったので、どこかで試したい
https://github.com/ionic-team/ionic-cli/wiki/Angular-Monorepo

その２

ふむふむふむ
AndroidX でstartActivityForResult() が非推奨になって、代替API が提供されるらしいけど、さてIntentBuilder はどう書き換えよう……。

https://developer.android.com/training/basics/intents/result

その３

Google Tag Manager って、自分でデータ送る場合はどうするのかなと思ったら、なんか用意されているっぽい。
これでSingle Page Application で、ページ遷移イベントを送ったりできるかも……多分w

https://developers.google.com/tag-manager/devguide?hl=ja

その４

sed を使って、ファイル内の該当行を削除し、上書き保存しようとしてハマった……。
例えばこんな感じで、-e がバックアップ保存用のsuffix だと認識されて困った……。

sed -i -e '/hoge/d' hoge.txt
# hoge.txt に保存される
# hoge.txt-e にバックアップが保存されちゃう……

このコメントで教えてもらったのだけど、下記のように書けば回避できた。

sed -i "" -e '/hoge/d' hoge.txt

ありがたい。これ、一人じゃ解決できんかったw

その５

MvnRepository ってサイトに、自作ライブラリが載っていた🎉
このサイト、依存関係を表示してくれるので、意図しないものが無いかをチェックするのに便利w

https://mvnrepository.com/artifact/work.shion.androidpreparation

その６

旅に出ようと思いますw
Final Fantasy の世界を旅しようと思います

その７

Moment .js でグローバル地域設定する場合、モジュールが見つからないエラーになることがあるので、バージョンを確認した方が良いかも

TS2307: Cannot find module 'moment'. · Issue #5486 · moment/moment · GitHub

その８

Capacitor Electron はindex .html のbase href を"./" に変更しないとエラーになるので、注意！
ちなみに変更しても下記環境で動いたので、問題ないはず。

Android(Capacitor)
Electron(Capacitor)
iOS(Capacitor)
WEB

その９

Karma 4.x が依存しているminimist でセキュリティエラーになってしまった……。
Karma 5.x なら問題ないんだけど、どうやらng update 時にテスト周りもアップデートしてくれなくて、手動で上げる必要があった。

karma 4.x が依存しているminimist でセキュリティエラー

その１０

XAppRecipe の既存実装をアップデートするのが面倒なので、作り直してみた。
そしたら、穴が空いてしまった……。
リセマラ好きなのでしゃーないけどw

GitHub 活動記録に穴が空いてしまった

ちなみにXAppRecipe は下記の構成で作り直したので、ある程度拡張できるはず。

自分好みのIonic 5 の初期構成をスクリプト化してみたに記載したスクリプトを使用
Android プロジェクトはAndroidPreparation を使って、デバッグ等を整備した
Android プロジェクトにCapacitor からAndroid Activity へ画面遷移するサンプルを追加した

iOS プロジェクトはXcodeGen で設定管理した

name: XAppRecipe
options:
deploymentLanguage: Japan
postGenCommand: pod install
targets:
App:
  deploymentTarget: "12.0"
  platform: iOS
  settings:
    PRODUCT_BUNDLE_IDENTIFIER: work.shion.xapprecipe
  sources:
    - App
    - path: public
      type: folder
  type: application

今回の成果

XAppRecipe を整備した
記事を整備した
- 自分好みのIonic 5 の初期構成をスクリプト化してみた
本を読み進めた
- ＰＨＰフレームワークＬａｒａｖｅｌＷｅｂアプリケーション開発バージョン５．５ＬＴＳ対応現場で使えるプロのテクニック
- 線形代数学初歩からジョルダン標準形へ
落書き用のリポジトリを整備した
- CSharpRecipe を統合した
- MandelbrotSet を統合した
- RxJSSample を統合した

もくもく前回までは

今回の目標

途中経過

その１

その２

その３

その４

その５

その６

その７

その８

その９

その１０

今回の成果

関連リンク

成果物

もくもく 前回までは

今回の目標

途中経過

その１

その２

その３

その４

その５

その６

その７

その８

その９

その１０

今回の成果

関連リンク

成果物

もくもく前回までは