Ionic Portalsの導入を検討する

[pantasystem]

概要

ノートの詳細画面の本文表示部分をWebView実装し MFMへの対応を検討している。 しかしWebViewだけだとアセットのロードやデータの引き渡しなどの難易度が高くさらには保守性が低くなる可能性がある。 そこで部分的にCapacitorの仕組みを導入することができるIonic Portalsの導入を検討したい。

[pantasystem]

ネイティブ（Android）とTypeScriptを通信させる

PortalとCapacitorのプラグインを使って通信できるようにする。 Kotlin側のプラグインの実装はPortalを初期化実行するKotlinのモジュールから参照できれば良いので、配置場所はあまり気にしなくてよさそう。 https://ionic.io/docs/portals/for-android/how-to/define-api-in-typescript

[pantasystem]

絵文字や本文、テーマの状態をPortal側に転送する方法

PortalのPluginを使ってTypeScript側からKotlinのコードを呼び出せるようにして Kotlin側からはJSONなどに変換してレスポンスを返すようにする。

[pantasystem]

MFMの描画について

Misskeyのロジックを流用して実装する。 あるいはReact等に書き直して実装する。

[pantasystem]

リソースをAndroidアプリ側にコピーする

Portalではネイティブアプリ側のassetsに必要なWeb側のコードをコピーしておく必要性がある。

build.gradleにコピーする処理を書いておけばよさそう https://github.com/ionic-team/portals-ecommerce-demo/blob/3f025f9670188435580f89b82651d86b4e12b719/android/PortalsEcommerce/app/build.gradle#L64-L68

[pantasystem]

検証内容

Ionicを利用しなくてもIonic Portalを利用することができるのか

Ionic Portalから呼び出すWeb側のコードはIonicではなくCapacitor onlyでも問題なく動作するのか Misskey側のMFMのスタイルを利用する必要性があるためIonicの独自のUIフレームワークには依存したくないため。

Ionic PortalでMFMを動作させることができるのか

任意のアニメーションを動かしてPortalで動かした時の動作を検証する。

RecyclerViewに組み込んだ土器の挙動

ノートの詳細画面はRecyclerViewで構成されているので 詳細画面にPortalで組み込む場合は、RecyclerViewに要素として組み込む必要性がある。 その時にアニメーションMFM等が入り込んでいた場合どのような動作になるのかを検証する必要性がある。

Portalにemojisやtextの情報を引き渡せるのか

引き渡せることはほぼ確定しているが、どのように配列を引き渡すのが良いのかなどを検証する

テーマの状態を共有する

Milktea側のテーマをPortal側のWebアプリにも反映できるようにしたい