MissRirica Project 暫定凍結の理由を忘れないようにメモ
FruitRiinMisskey用モバイルクライアントMissRirica計画がうまくいかない理由
FruitRiinMissRirica計画は、各安定バージョンのMisskey及びMisskeyフォークをアプリケーション内に持つモバイルアプリである。
起動画面から適当な方法でアカウントを設定すると、そのアカウントの接続先のMisskeyのバージョン情報を元に、対応するバージョンのクライアントを起動する仕組みを計画している。
任意のバージョンについての識別は一旦横に置いておくとして、任意のバージョンのクライアントを起動して切り替える仕組みについて考える。
最初に考えたのは、全てのバージョンのMisskeyをソースコードの中に直接組み込むことだ。
しかし、同じ名前のファイルがプロジェクト内に大量にできてしまい、IDE上に同一名のシンボルができてしまう。
さらに、node_modulesの解決をどうするんだという問題があった。
次に考えたのは任意バージョンMisskeyを動的に読み込むことだ。
コンセプトとしては以下のようなコードである。
const misskeyV13 = document.createElement("script")
// devと本番でパスが可変
misskeyV13.setAttribute("src", "misskey-v13/app.js")
misskeyV13.setAttribute("type", "module")
const misskeyV13Style = document.createElement("link")
misskeyV13Style.setAttribute("rel", "stylesheet")
// devと本番でパスが可変
misskeyV13Style.setAttribute("href", "misskey-v13/init.css")
document.head.appendChild(misskeyV13)
document.head.appendChild(misskeyV13Style)
これで、headタグの中に scriptタグとcssタグを動的に追加することができる。
headタグではなくbodyタグの中でもいいかもしれないし、エントリポイントとなる app.vue のルートにdivタグかなにかを置いて、 ref参照を持ってそこにappendしてもいいかもしれない。
"misskey-v13/app.js" はどのように作るか？
このファイルは nuxt の public ディレクトリ内にビルド結果が配置されるように、別のプロジェクトで改造したMisskeyを作ることを考えた。
vite.config.ts では、ビルドルールを細かく決めることができる。
この中で、ビルド結果が意図せずキャッシュが優先されて使われないように、ハッシュを含むファイル名になるように設定されている。
それでは困るので、それらの設定を無効化していく。
rollupOptions: {
input: {
app: './src/_boot_.ts',
},
output: {
manualChunks: undefined, // チャンク分割を無効化する
inlineDynamicImports: true, // チャンク分割を無効化する
format: "es", // いるかな？いらないかも
assetFileNames: '[name].[ext]', // ハッシュによるランダム生成を含まない
entryFileNames: 'app.js', // ハッシュによるランダム生成を含まない
},
},
outDir: '../../../missRirica-client/public/misskey-v13', // 出力先を public/misskey-v13配下にする
さて、これで起動するのかというと、コンソールログを見ると一応正しく読み込まれているらしい。しかし画面上は何もおこらない。
これは、APIのリクエスト先が [ホスト名]/api/[各種エンドポイント] となっているからだ。
これはMisskeyがAPIのリクエスト先として他のインスタンスを指すはずがないので、インスタンスの指定がホストしているドメイン決め打ちになっているためだ。
その設定は config.tsにある。
しかし、このファイルは循環参照を起こしており、容易に書き換えることができない。
APIのリクエスト先を書き換えたところで、次にインスタンスをまたいだアカウント情報の保持や、インスタンスをまたいだアカウントの切り替えダイアログなど、考えることはたくさんある。
そもそも、世の中にはFork版Misskeyも溢れており、つらい。
私は考えるのをやめた。
最後に考えたのは、サーバーには manifest.json が配信されており、そのファイルを読み込めば実際に配信されている js や css のアセットが書かれているので、それを拝借して読み込むのはどうかというものである。
とはいえ、この方法ではMissRiricaカスタマイズのコードを埋め込むことが困難であることが予想される。徒労に終わりそうなので考えるのをやめた。