From 0009aa332bec1bb52ee5600d528419c0455576d2 Mon Sep 17 00:00:00 2001
From: zyoshoka <107108195+zyoshoka@users.noreply.github.com>
Date: Sun, 24 Dec 2023 16:16:58 +0900
Subject: refactor(frontend): import宣言周りのエラーを修正 (#12773)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/scripts/upload/compress-config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/frontend/src/scripts')

diff --git a/packages/frontend/src/scripts/upload/compress-config.ts b/packages/frontend/src/scripts/upload/compress-config.ts
index 8fe64c8b76..2deb9cbb81 100644
--- a/packages/frontend/src/scripts/upload/compress-config.ts
+++ b/packages/frontend/src/scripts/upload/compress-config.ts
@@ -4,7 +4,7 @@
  */
 
 import isAnimated from 'is-file-animated';
-import { isWebpSupported } from './isWebpSupported';
+import { isWebpSupported } from './isWebpSupported.js';
 import type { BrowserImageResizerConfig } from 'browser-image-resizer';
 
 const compressTypeMap = {
-- 
cgit v1.2.3-freya


From 4f247a0784be6d3d75e988cb84fd8f962a3d8681 Mon Sep 17 00:00:00 2001
From: FineArchs <133759614+FineArchs@users.noreply.github.com>
Date: Mon, 25 Dec 2023 18:03:06 +0900
Subject: Feat: クリックイベントを発生させるMFM構文を追加 (#12798)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Update MkMisskeyFlavoredMarkdown.ts

* fix MkMisskeyFlavoredMarkdown.ts

* Update MkAsUi.vue

* Update ui.ts

* Fix MkMisskeyFlavoredMarkdown.ts

* Update CHANGELOG.md

* fix ui.ts

* revert CHANGELOG.md

* Update CHANGELOG.md
---
 CHANGELOG.md                                              |  1 +
 packages/frontend/src/components/MkAsUi.vue               |  2 +-
 .../src/components/global/MkMisskeyFlavoredMarkdown.ts    | 15 +++++++++++++--
 packages/frontend/src/scripts/aiscript/ui.ts              |  6 ++++++
 4 files changed, 21 insertions(+), 3 deletions(-)

(limited to 'packages/frontend/src/scripts')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5db3783e10..e452eb3845 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@
 
 ### Client
 - Fix: 一部のモデログ(logYellowでの表示対象)について、表示の色が変わらない問題を修正
+- Feat: AiScript専用のMFM構文`$[clickable.ev=EVENTNAME ...]`を追加。`Mk:C:mfm`のオプション`onClickEv`に関数を渡すと、クリック時に`EVENTNAME`を引数にして呼び出す
 
 ### Server
 - Enhance: センシティブワードの設定がハッシュタグトレンドにも適用されるようになりました
diff --git a/packages/frontend/src/components/MkAsUi.vue b/packages/frontend/src/components/MkAsUi.vue
index 4239cc6091..0ff5bd7036 100644
--- a/packages/frontend/src/components/MkAsUi.vue
+++ b/packages/frontend/src/components/MkAsUi.vue
@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</template>
 	</div>
 	<span v-else-if="c.type === 'text'" :class="{ [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }" :style="{ fontSize: c.size ? `${c.size * 100}%` : null, fontWeight: c.bold ? 'bold' : null, color: c.color ?? null }">{{ c.text }}</span>
-	<Mfm v-else-if="c.type === 'mfm'" :class="{ [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }" :style="{ fontSize: c.size ? `${c.size * 100}%` : null, fontWeight: c.bold ? 'bold' : null, color: c.color ?? null }" :text="c.text"/>
+	<Mfm v-else-if="c.type === 'mfm'" :class="{ [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }" :style="{ fontSize: c.size ? `${c.size * 100}%` : null, fontWeight: c.bold ? 'bold' : null, color: c.color ?? null }" :text="c.text" @clickEv="c.onClickEv"/>
 	<MkButton v-else-if="c.type === 'button'" :primary="c.primary" :rounded="c.rounded" :disabled="c.disabled" :small="size === 'small'" inline @click="c.onClick">{{ c.text }}</MkButton>
 	<div v-else-if="c.type === 'buttons'" class="_buttons" :style="{ justifyContent: align }">
 		<MkButton v-for="button in c.buttons" :primary="button.primary" :rounded="button.rounded" :disabled="button.disabled" inline :small="size === 'small'" @click="button.onClick">{{ button.text }}</MkButton>
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
index a46c7f0cec..3e72b64799 100644
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { VNode, h } from 'vue';
+import { VNode, h, SetupContext } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import MkUrl from '@/components/global/MkUrl.vue';
@@ -43,8 +43,12 @@ type MfmProps = {
 	enableEmojiMenuReaction?: boolean;
 };
 
+type MfmEvents = {
+	clickEv(id: string): void;
+};
+
 // eslint-disable-next-line import/no-default-export
-export default function(props: MfmProps) {
+export default function(props: MfmProps, context: SetupContext<MfmEvents>) {
 	const isNote = props.isNote ?? true;
 	const shouldNyaize = props.nyaize ? props.nyaize === 'respect' ? props.author?.isCat : false : false;
 
@@ -281,6 +285,13 @@ export default function(props: MfmProps) {
 							}),
 						]);
 					}
+					case 'clickable': {
+						return h('span', { onClick(ev: MouseEvent): void {
+							ev.stopPropagation();
+							ev.preventDefault();
+							context.emit('clickEv', token.props.args.ev ?? '');
+						} }, genEl(token.children, scale));
+					}
 				}
 				if (style === undefined) {
 					return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children, scale), ']']);
diff --git a/packages/frontend/src/scripts/aiscript/ui.ts b/packages/frontend/src/scripts/aiscript/ui.ts
index 75b9248432..08ba1e6d9b 100644
--- a/packages/frontend/src/scripts/aiscript/ui.ts
+++ b/packages/frontend/src/scripts/aiscript/ui.ts
@@ -47,6 +47,7 @@ export type AsUiMfm = AsUiComponentBase & {
 	bold?: boolean;
 	color?: string;
 	font?: 'serif' | 'sans-serif' | 'monospace';
+	onClickEv?: (evId: string) => void
 };
 
 export type AsUiButton = AsUiComponentBase & {
@@ -230,6 +231,8 @@ function getMfmOptions(def: values.Value | undefined): Omit<AsUiMfm, 'id' | 'typ
 	if (color) utils.assertString(color);
 	const font = def.value.get('font');
 	if (font) utils.assertString(font);
+	const onClickEv = def.value.get('onClickEv');
+	if (onClickEv) utils.assertFunction(onClickEv);
 
 	return {
 		text: text?.value,
@@ -237,6 +240,9 @@ function getMfmOptions(def: values.Value | undefined): Omit<AsUiMfm, 'id' | 'typ
 		bold: bold?.value,
 		color: color?.value,
 		font: font?.value,
+		onClickEv: (evId: string) => {
+			if (onClickEv) call(onClickEv, values.STR(evId));
+		},
 	};
 }
 
-- 
cgit v1.2.3-freya


From 75034d9240c069baff5a24409ea172374261ea3b Mon Sep 17 00:00:00 2001
From: zyoshoka <107108195+zyoshoka@users.noreply.github.com>
Date: Tue, 26 Dec 2023 14:19:35 +0900
Subject: refactor(frontend): Reactivityで型を明示するように (#12791)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(frontend): Reactivityで型を明示するように

* fix: プロパティの参照が誤っているのを修正

* fix: 初期化の値を空配列に書き換えていた部分をnullに置き換え
---
 .../backend/src/server/api/endpoints/admin/meta.ts |  4 ++
 .../src/server/api/endpoints/federation/stats.ts   | 72 +++-------------------
 packages/backend/src/server/api/endpoints/meta.ts  | 16 ++++-
 .../src/server/api/endpoints/notes/translate.ts    |  4 ++
 .../frontend/src/components/MkAchievements.vue     |  2 +-
 packages/frontend/src/components/MkCaptcha.vue     |  2 +-
 packages/frontend/src/components/MkLink.vue        |  2 +-
 packages/frontend/src/components/MkMarquee.vue     |  2 +-
 packages/frontend/src/components/MkNote.vue        |  2 +-
 .../frontend/src/components/MkNoteDetailed.vue     |  4 +-
 .../frontend/src/components/MkPasswordDialog.vue   |  2 +-
 packages/frontend/src/components/MkPostForm.vue    |  4 +-
 packages/frontend/src/components/MkRolePreview.vue |  3 +-
 packages/frontend/src/components/MkSelect.vue      |  8 +--
 packages/frontend/src/components/MkSignin.vue      |  8 ---
 .../src/components/MkSignupDialog.form.vue         |  6 +-
 packages/frontend/src/components/MkSparkle.vue     |  9 ++-
 .../components/MkUserAnnouncementEditDialog.vue    |  2 +-
 packages/frontend/src/components/MkWidgets.vue     |  2 +-
 packages/frontend/src/components/form/suspense.vue |  2 +-
 .../frontend/src/components/page/page.note.vue     |  4 +-
 packages/frontend/src/pages/about-misskey.vue      |  9 ++-
 packages/frontend/src/pages/about.vue              |  3 +-
 packages/frontend/src/pages/admin-file.vue         |  5 +-
 packages/frontend/src/pages/admin-user.vue         |  6 +-
 packages/frontend/src/pages/admin/_header_.vue     |  2 +-
 packages/frontend/src/pages/admin/ads.vue          |  3 +-
 .../frontend/src/pages/admin/bot-protection.vue    |  3 +-
 packages/frontend/src/pages/admin/branding.vue     |  6 +-
 .../frontend/src/pages/admin/email-settings.vue    |  2 +-
 packages/frontend/src/pages/admin/files.vue        |  2 +-
 packages/frontend/src/pages/admin/index.vue        |  8 +--
 packages/frontend/src/pages/admin/modlog.vue       |  2 +-
 .../src/pages/admin/overview.federation.vue        | 44 +++++++------
 .../src/pages/admin/overview.instances.vue         |  3 +-
 .../src/pages/admin/overview.moderators.vue        |  3 +-
 packages/frontend/src/pages/admin/overview.pie.vue |  9 ++-
 .../frontend/src/pages/admin/overview.stats.vue    |  3 +-
 .../frontend/src/pages/admin/overview.users.vue    |  3 +-
 packages/frontend/src/pages/admin/overview.vue     | 50 ++++++++-------
 .../frontend/src/pages/admin/proxy-account.vue     |  5 +-
 packages/frontend/src/pages/admin/queue.chart.vue  | 10 +--
 packages/frontend/src/pages/admin/relays.vue       |  5 +-
 packages/frontend/src/pages/admin/roles.edit.vue   |  5 +-
 packages/frontend/src/pages/admin/settings.vue     |  4 +-
 packages/frontend/src/pages/antenna-timeline.vue   |  3 +-
 packages/frontend/src/pages/api-console.vue        |  2 +-
 packages/frontend/src/pages/avatar-decorations.vue |  3 +-
 packages/frontend/src/pages/channel-editor.vue     |  9 +--
 .../frontend/src/pages/custom-emojis-manager.vue   |  6 +-
 packages/frontend/src/pages/drive.vue              |  3 +-
 packages/frontend/src/pages/emoji-edit-dialog.vue  |  4 +-
 packages/frontend/src/pages/explore.roles.vue      |  3 +-
 packages/frontend/src/pages/explore.users.vue      |  5 +-
 packages/frontend/src/pages/flash/flash-edit.vue   |  5 +-
 packages/frontend/src/pages/flash/flash.vue        |  5 +-
 packages/frontend/src/pages/gallery/edit.vue       | 11 ++--
 packages/frontend/src/pages/gallery/post.vue       |  5 +-
 packages/frontend/src/pages/list.vue               |  5 +-
 packages/frontend/src/pages/my-antennas/edit.vue   |  3 +-
 packages/frontend/src/pages/my-antennas/editor.vue | 11 ++--
 packages/frontend/src/pages/my-clips/index.vue     |  3 +-
 packages/frontend/src/pages/note.vue               |  2 +-
 .../pages/page-editor/els/page-editor.el.image.vue |  3 +-
 .../pages/page-editor/els/page-editor.el.note.vue  |  3 +-
 .../src/pages/page-editor/page-editor.blocks.vue   |  5 +-
 .../frontend/src/pages/page-editor/page-editor.vue | 15 ++---
 packages/frontend/src/pages/page.vue               |  5 +-
 packages/frontend/src/pages/registry.keys.vue      |  2 +-
 packages/frontend/src/pages/registry.value.vue     |  4 +-
 packages/frontend/src/pages/registry.vue           |  3 +-
 packages/frontend/src/pages/role.vue               |  5 +-
 packages/frontend/src/pages/search.note.vue        |  2 +-
 packages/frontend/src/pages/settings/accounts.vue  |  2 +-
 packages/frontend/src/pages/settings/apps.vue      |  2 +-
 packages/frontend/src/pages/settings/drive.vue     |  7 ++-
 packages/frontend/src/pages/settings/index.vue     |  6 +-
 .../src/pages/settings/statusbar.statusbar.vue     |  3 +-
 packages/frontend/src/pages/settings/statusbar.vue |  3 +-
 .../frontend/src/pages/settings/theme.install.vue  |  2 +-
 .../frontend/src/pages/settings/theme.manage.vue   |  2 +-
 packages/frontend/src/pages/user-list-timeline.vue |  3 +-
 packages/frontend/src/pages/user/followers.vue     |  2 +-
 packages/frontend/src/pages/user/following.vue     |  2 +-
 packages/frontend/src/pages/user/index.vue         |  2 +-
 packages/frontend/src/pages/welcome.vue            |  3 +-
 packages/frontend/src/scripts/get-note-menu.ts     |  2 +-
 packages/frontend/src/scripts/use-chart-tooltip.ts |  8 ++-
 packages/frontend/src/ui/classic.vue               |  6 +-
 packages/frontend/src/ui/visitor.vue               |  3 +-
 .../src/widgets/WidgetActivity.calendar.vue        |  7 ++-
 .../frontend/src/widgets/WidgetActivity.chart.vue  | 15 +++--
 packages/frontend/src/widgets/WidgetActivity.vue   | 11 +++-
 packages/frontend/src/widgets/WidgetFederation.vue |  5 +-
 .../frontend/src/widgets/WidgetInstanceCloud.vue   |  3 +-
 packages/frontend/src/widgets/WidgetPhotos.vue     |  3 +-
 packages/frontend/src/widgets/WidgetSlideshow.vue  |  3 +-
 packages/frontend/src/widgets/WidgetTrends.vue     |  3 +-
 packages/frontend/src/widgets/WidgetUserList.vue   |  5 +-
 .../frontend/src/widgets/server-metric/cpu-mem.vue | 11 ++--
 .../frontend/src/widgets/server-metric/cpu.vue     |  3 +-
 .../frontend/src/widgets/server-metric/disk.vue    |  3 +-
 .../frontend/src/widgets/server-metric/index.vue   |  3 +-
 .../frontend/src/widgets/server-metric/mem.vue     |  3 +-
 .../frontend/src/widgets/server-metric/net.vue     | 11 ++--
 packages/misskey-js/src/autogen/apiClientJSDoc.ts  |  2 +-
 packages/misskey-js/src/autogen/endpoint.ts        |  2 +-
 packages/misskey-js/src/autogen/entities.ts        |  2 +-
 packages/misskey-js/src/autogen/models.ts          |  2 +-
 packages/misskey-js/src/autogen/types.ts           | 69 +++++----------------
 110 files changed, 370 insertions(+), 344 deletions(-)

(limited to 'packages/frontend/src/scripts')

diff --git a/packages/backend/src/server/api/endpoints/admin/meta.ts b/packages/backend/src/server/api/endpoints/admin/meta.ts
index 6f8494d1d0..eef27b9721 100644
--- a/packages/backend/src/server/api/endpoints/admin/meta.ts
+++ b/packages/backend/src/server/api/endpoints/admin/meta.ts
@@ -381,6 +381,10 @@ export const meta = {
 				type: 'string',
 				optional: false, nullable: true,
 			},
+			shortName: {
+				type: 'string',
+				optional: false, nullable: true,
+			},
 			objectStorageS3ForcePathStyle: {
 				type: 'boolean',
 				optional: false, nullable: false,
diff --git a/packages/backend/src/server/api/endpoints/federation/stats.ts b/packages/backend/src/server/api/endpoints/federation/stats.ts
index 6548142d41..262aa68776 100644
--- a/packages/backend/src/server/api/endpoints/federation/stats.ts
+++ b/packages/backend/src/server/api/endpoints/federation/stats.ts
@@ -29,37 +29,10 @@ export const meta = {
 				optional: false,
 				nullable: false,
 				items: {
-					properties: {
-						id: { type: 'string' },
-						firstRetrievedAt: { type: 'string' },
-						host: { type: 'string' },
-						usersCount: { type: 'number' },
-						notesCount: { type: 'number' },
-						followingCount: { type: 'number' },
-						followersCount: { type: 'number' },
-						isNotResponding: { type: 'boolean' },
-						isSuspended: { type: 'boolean' },
-						isBlocked: { type: 'boolean' },
-						softwareName: { type: 'string' },
-						softwareVersion: { type: 'string' },
-						openRegistrations: { type: 'boolean' },
-						name: { type: 'string' },
-						description: { type: 'string' },
-						maintainerName: { type: 'string' },
-						maintainerEmail: { type: 'string' },
-						isSilenced: { type: 'boolean' },
-						iconUrl: { type: 'string' },
-						faviconUrl: { type: 'string' },
-						themeColor: { type: 'string' },
-						infoUpdatedAt: {
-							type: 'string',
-							nullable: true,
-						},
-						latestRequestReceivedAt: {
-							type: 'string',
-							nullable: true,
-						},
-					}
+					type: 'object',
+					optional: false,
+					nullable: false,
+					ref: 'FederationInstance',
 				},
 			},
 			otherFollowersCount: { type: 'number' },
@@ -68,42 +41,15 @@ export const meta = {
 				optional: false,
 				nullable: false,
 				items: {
-					properties: {
-						id: { type: 'string' },
-						firstRetrievedAt: { type: 'string' },
-						host: { type: 'string' },
-						usersCount: { type: 'number' },
-						notesCount: { type: 'number' },
-						followingCount: { type: 'number' },
-						followersCount: { type: 'number' },
-						isNotResponding: { type: 'boolean' },
-						isSuspended: { type: 'boolean' },
-						isBlocked: { type: 'boolean' },
-						softwareName: { type: 'string' },
-						softwareVersion: { type: 'string' },
-						openRegistrations: { type: 'boolean' },
-						name: { type: 'string' },
-						description: { type: 'string' },
-						maintainerName: { type: 'string' },
-						maintainerEmail: { type: 'string' },
-						isSilenced: { type: 'boolean' },
-						iconUrl: { type: 'string' },
-						faviconUrl: { type: 'string' },
-						themeColor: { type: 'string' },
-						infoUpdatedAt: {
-							type: 'string',
-							nullable: true,
-						},
-						latestRequestReceivedAt: {
-							type: 'string',
-							nullable: true,
-						},
-					}
+					type: 'object',
+					optional: false,
+					nullable: false,
+					ref: 'FederationInstance',
 				},
 			},
 			otherFollowingCount: { type: 'number' },
 		},
-	}
+	},
 } as const;
 
 export const paramDef = {
diff --git a/packages/backend/src/server/api/endpoints/meta.ts b/packages/backend/src/server/api/endpoints/meta.ts
index 9dd4553152..f7c2962bc2 100644
--- a/packages/backend/src/server/api/endpoints/meta.ts
+++ b/packages/backend/src/server/api/endpoints/meta.ts
@@ -164,20 +164,34 @@ export const meta = {
 					type: 'object',
 					optional: false, nullable: false,
 					properties: {
-						place: {
+						id: {
 							type: 'string',
 							optional: false, nullable: false,
+							format: 'id',
+							example: 'xxxxxxxxxx',
 						},
 						url: {
 							type: 'string',
 							optional: false, nullable: false,
 							format: 'url',
 						},
+						place: {
+							type: 'string',
+							optional: false, nullable: false,
+						},
+						ratio: {
+							type: 'number',
+							optional: false, nullable: false,
+						},
 						imageUrl: {
 							type: 'string',
 							optional: false, nullable: false,
 							format: 'url',
 						},
+						dayOfWeek: {
+							type: 'integer',
+							optional: false, nullable: false,
+						},
 					},
 				},
 			},
diff --git a/packages/backend/src/server/api/endpoints/notes/translate.ts b/packages/backend/src/server/api/endpoints/notes/translate.ts
index a1561c944c..d46bd69795 100644
--- a/packages/backend/src/server/api/endpoints/notes/translate.ts
+++ b/packages/backend/src/server/api/endpoints/notes/translate.ts
@@ -21,6 +21,10 @@ export const meta = {
 	res: {
 		type: 'object',
 		optional: false, nullable: false,
+		properties: {
+			sourceLang: { type: 'string' },
+			text: { type: 'string' },
+		},
 	},
 
 	errors: {
diff --git a/packages/frontend/src/components/MkAchievements.vue b/packages/frontend/src/components/MkAchievements.vue
index b067e94a6d..d49eeb0329 100644
--- a/packages/frontend/src/components/MkAchievements.vue
+++ b/packages/frontend/src/components/MkAchievements.vue
@@ -67,7 +67,7 @@ const props = withDefaults(defineProps<{
 	withDescription: true,
 });
 
-const achievements = ref();
+const achievements = ref<Misskey.entities.UsersAchievementsResponse | null>(null);
 const lockedAchievements = computed(() => ACHIEVEMENT_TYPES.filter(x => !(achievements.value ?? []).some(a => a.name === x)));
 
 function fetch() {
diff --git a/packages/frontend/src/components/MkCaptcha.vue b/packages/frontend/src/components/MkCaptcha.vue
index 14e59acad2..40bca11e64 100644
--- a/packages/frontend/src/components/MkCaptcha.vue
+++ b/packages/frontend/src/components/MkCaptcha.vue
@@ -26,7 +26,7 @@ export type Captcha = {
 	getResponse(id: string): string;
 };
 
-type CaptchaProvider = 'hcaptcha' | 'recaptcha' | 'turnstile';
+export type CaptchaProvider = 'hcaptcha' | 'recaptcha' | 'turnstile';
 
 type CaptchaContainer = {
 	readonly [_ in CaptchaProvider]?: Captcha;
diff --git a/packages/frontend/src/components/MkLink.vue b/packages/frontend/src/components/MkLink.vue
index 8517eff40b..1bd0c8e5c9 100644
--- a/packages/frontend/src/components/MkLink.vue
+++ b/packages/frontend/src/components/MkLink.vue
@@ -29,7 +29,7 @@ const self = props.url.startsWith(local);
 const attr = self ? 'to' : 'href';
 const target = self ? null : '_blank';
 
-const el = ref();
+const el = ref<HTMLElement>();
 
 useTooltip(el, (showing) => {
 	os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
diff --git a/packages/frontend/src/components/MkMarquee.vue b/packages/frontend/src/components/MkMarquee.vue
index f9d0573227..145b60c8e7 100644
--- a/packages/frontend/src/components/MkMarquee.vue
+++ b/packages/frontend/src/components/MkMarquee.vue
@@ -27,7 +27,7 @@ export default {
 		},
 	},
 	setup(props) {
-		const contentEl = ref();
+		const contentEl = ref<HTMLElement>();
 
 		function calc() {
 			const eachLength = contentEl.value.offsetWidth / props.repeat;
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 66a5be22c3..7d4207f0fb 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -250,7 +250,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
 const isDeleted = ref(false);
 const muted = ref(checkMute(appearNote.value, $i?.mutedWords));
 const hardMuted = ref(props.withHardMute && checkMute(appearNote.value, $i?.hardMutedWords));
-const translation = ref<any>(null);
+const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
 const translating = ref(false);
 const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance);
 const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i.id));
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index e88d33ed61..33a6786d03 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -273,7 +273,7 @@ const isMyRenote = $i && ($i.id === note.value.userId);
 const showContent = ref(false);
 const isDeleted = ref(false);
 const muted = ref($i ? checkWordMute(appearNote.value, $i, $i.mutedWords) : false);
-const translation = ref(null);
+const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
 const translating = ref(false);
 const parsed = appearNote.value.text ? mfm.parse(appearNote.value.text) : null;
 const urls = parsed ? extractUrlFromMfm(parsed) : null;
@@ -299,7 +299,7 @@ provide('react', (reaction: string) => {
 });
 
 const tab = ref('replies');
-const reactionTabType = ref(null);
+const reactionTabType = ref<string | null>(null);
 
 const renotesPagination = computed(() => ({
 	endpoint: 'notes/renotes',
diff --git a/packages/frontend/src/components/MkPasswordDialog.vue b/packages/frontend/src/components/MkPasswordDialog.vue
index 118f9a6a91..c77e912199 100644
--- a/packages/frontend/src/components/MkPasswordDialog.vue
+++ b/packages/frontend/src/components/MkPasswordDialog.vue
@@ -52,7 +52,7 @@ const emit = defineEmits<{
 const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
 const passwordInput = shallowRef<InstanceType<typeof MkInput>>();
 const password = ref('');
-const token = ref(null);
+const token = ref<string | null>(null);
 
 function onClose() {
 	emit('cancelled');
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index f800d16524..5e7ca5539e 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -185,14 +185,14 @@ watch(showPreview, () => defaultStore.set('showPreview', showPreview.value));
 const cw = ref<string | null>(props.initialCw ?? null);
 const localOnly = ref<boolean>(props.initialLocalOnly ?? defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly);
 const visibility = ref(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility) as typeof Misskey.noteVisibilities[number]);
-const visibleUsers = ref([]);
+const visibleUsers = ref<Misskey.entities.UserDetailed[]>([]);
 if (props.initialVisibleUsers) {
 	props.initialVisibleUsers.forEach(pushVisibleUser);
 }
 const reactionAcceptance = ref(defaultStore.state.reactionAcceptance);
 const autocomplete = ref(null);
 const draghover = ref(false);
-const quoteId = ref(null);
+const quoteId = ref<string | null>(null);
 const hasNotSpecifiedMentions = ref(false);
 const recentHashtags = ref(JSON.parse(miLocalStorage.getItem('hashtags') ?? '[]'));
 const imeText = ref('');
diff --git a/packages/frontend/src/components/MkRolePreview.vue b/packages/frontend/src/components/MkRolePreview.vue
index 3e4586cee4..4b6b0940ba 100644
--- a/packages/frontend/src/components/MkRolePreview.vue
+++ b/packages/frontend/src/components/MkRolePreview.vue
@@ -28,10 +28,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { } from 'vue';
+import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n.js';
 
 const props = withDefaults(defineProps<{
-	role: any;
+	role: Misskey.entities.Role;
 	forModeration: boolean;
 	detailed: boolean;
 }>(), {
diff --git a/packages/frontend/src/components/MkSelect.vue b/packages/frontend/src/components/MkSelect.vue
index 5a1c788005..33b8a9a86d 100644
--- a/packages/frontend/src/components/MkSelect.vue
+++ b/packages/frontend/src/components/MkSelect.vue
@@ -65,10 +65,10 @@ const opening = ref(false);
 const changed = ref(false);
 const invalid = ref(false);
 const filled = computed(() => v.value !== '' && v.value != null);
-const inputEl = ref(null);
-const prefixEl = ref(null);
-const suffixEl = ref(null);
-const container = ref(null);
+const inputEl = ref<HTMLObjectElement | null>(null);
+const prefixEl = ref<HTMLElement | null>(null);
+const suffixEl = ref<HTMLElement | null>(null);
+const container = ref<HTMLElement | null>(null);
 const height =
 	props.small ? 33 :
 	props.large ? 39 :
diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index 6051db1cad..2fc2c9ec5e 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -71,8 +71,6 @@ const host = ref(toUnicode(configHost));
 const totpLogin = ref(false);
 const queryingKey = ref(false);
 const credentialRequest = ref<CredentialRequestOptions | null>(null);
-const hCaptchaResponse = ref(null);
-const reCaptchaResponse = ref(null);
 
 const emit = defineEmits<{
 	(ev: 'login', v: any): void;
@@ -126,8 +124,6 @@ async function queryKey(): Promise<void> {
 				username: username.value,
 				password: password.value,
 				credential: credential.toJSON(),
-				'hcaptcha-response': hCaptchaResponse.value,
-				'g-recaptcha-response': reCaptchaResponse.value,
 			});
 		}).then(res => {
 			emit('login', res);
@@ -149,8 +145,6 @@ function onSubmit(): void {
 			os.api('signin', {
 				username: username.value,
 				password: password.value,
-				'hcaptcha-response': hCaptchaResponse.value,
-				'g-recaptcha-response': reCaptchaResponse.value,
 			}).then(res => {
 				totpLogin.value = true;
 				signing.value = false;
@@ -168,8 +162,6 @@ function onSubmit(): void {
 		os.api('signin', {
 			username: username.value,
 			password: password.value,
-			'hcaptcha-response': hCaptchaResponse.value,
-			'g-recaptcha-response': reCaptchaResponse.value,
 			token: user.value?.twoFactorEnabled ? token.value : undefined,
 		}).then(res => {
 			emit('login', res);
diff --git a/packages/frontend/src/components/MkSignupDialog.form.vue b/packages/frontend/src/components/MkSignupDialog.form.vue
index f171e449c8..44cfb6f0fa 100644
--- a/packages/frontend/src/components/MkSignupDialog.form.vue
+++ b/packages/frontend/src/components/MkSignupDialog.form.vue
@@ -115,9 +115,9 @@ const emailState = ref<null | 'wait' | 'ok' | 'unavailable:used' | 'unavailable:
 const passwordStrength = ref<'' | 'low' | 'medium' | 'high'>('');
 const passwordRetypeState = ref<null | 'match' | 'not-match'>(null);
 const submitting = ref<boolean>(false);
-const hCaptchaResponse = ref(null);
-const reCaptchaResponse = ref(null);
-const turnstileResponse = ref(null);
+const hCaptchaResponse = ref<string | null>(null);
+const reCaptchaResponse = ref<string | null>(null);
+const turnstileResponse = ref<string | null>(null);
 const usernameAbortController = ref<null | AbortController>(null);
 const emailAbortController = ref<null | AbortController>(null);
 
diff --git a/packages/frontend/src/components/MkSparkle.vue b/packages/frontend/src/components/MkSparkle.vue
index a7cd1692bf..269825e25e 100644
--- a/packages/frontend/src/components/MkSparkle.vue
+++ b/packages/frontend/src/components/MkSparkle.vue
@@ -72,7 +72,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
 
-const particles = ref([]);
+const particles = ref<{
+	id: string,
+	x: number,
+	y: number,
+	size: number,
+	dur: number,
+	color: string
+}[]>([]);
 const el = shallowRef<HTMLElement>();
 const width = ref(0);
 const height = ref(0);
diff --git a/packages/frontend/src/components/MkUserAnnouncementEditDialog.vue b/packages/frontend/src/components/MkUserAnnouncementEditDialog.vue
index b9fd084409..b5489d8e59 100644
--- a/packages/frontend/src/components/MkUserAnnouncementEditDialog.vue
+++ b/packages/frontend/src/components/MkUserAnnouncementEditDialog.vue
@@ -66,7 +66,7 @@ const props = defineProps<{
 	announcement?: any,
 }>();
 
-const dialog = ref(null);
+const dialog = ref<InstanceType<typeof MkModalWindow> | null>(null);
 const title = ref<string>(props.announcement ? props.announcement.title : '');
 const text = ref<string>(props.announcement ? props.announcement.text : '');
 const icon = ref<string>(props.announcement ? props.announcement.icon : 'info');
diff --git a/packages/frontend/src/components/MkWidgets.vue b/packages/frontend/src/components/MkWidgets.vue
index dc7c8bd06b..ee4e29dd8f 100644
--- a/packages/frontend/src/components/MkWidgets.vue
+++ b/packages/frontend/src/components/MkWidgets.vue
@@ -77,7 +77,7 @@ const widgetRefs = {};
 const configWidget = (id: string) => {
 	widgetRefs[id].configure();
 };
-const widgetAdderSelected = ref(null);
+const widgetAdderSelected = ref<string | null>(null);
 const addWidget = () => {
 	if (widgetAdderSelected.value == null) return;
 
diff --git a/packages/frontend/src/components/form/suspense.vue b/packages/frontend/src/components/form/suspense.vue
index bfddac7523..eaf5ae4744 100644
--- a/packages/frontend/src/components/form/suspense.vue
+++ b/packages/frontend/src/components/form/suspense.vue
@@ -30,7 +30,7 @@ const props = defineProps<{
 const pending = ref(true);
 const resolved = ref(false);
 const rejected = ref(false);
-const result = ref(null);
+const result = ref<any>(null);
 
 const process = () => {
 	if (props.p == null) {
diff --git a/packages/frontend/src/components/page/page.note.vue b/packages/frontend/src/components/page/page.note.vue
index 5ca707dbc2..d885ebb1d6 100644
--- a/packages/frontend/src/components/page/page.note.vue
+++ b/packages/frontend/src/components/page/page.note.vue
@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, Ref, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { NoteBlock } from './block.type.js';
 import MkNote from '@/components/MkNote.vue';
@@ -23,7 +23,7 @@ const props = defineProps<{
 	page: Misskey.entities.Page,
 }>();
 
-const note: Ref<Misskey.entities.Note | null> = ref(null);
+const note = ref<Misskey.entities.Note | null>(null);
 
 onMounted(() => {
 	os.api('notes/show', { noteId: props.block.note })
diff --git a/packages/frontend/src/pages/about-misskey.vue b/packages/frontend/src/pages/about-misskey.vue
index 20c65f4541..7cf3aeb951 100644
--- a/packages/frontend/src/pages/about-misskey.vue
+++ b/packages/frontend/src/pages/about-misskey.vue
@@ -313,8 +313,13 @@ const patrons = [
 const thereIsTreasure = ref($i && !claimedAchievements.includes('foundTreasure'));
 
 let easterEggReady = false;
-const easterEggEmojis = ref([]);
-const easterEggEngine = ref(null);
+const easterEggEmojis = ref<{
+	id: string,
+	top: number,
+	left: number,
+	emoji: string
+}[]>([]);
+const easterEggEngine = ref<{ stop: () => void } | null>(null);
 const containerEl = shallowRef<HTMLElement>();
 
 function iconLoaded() {
diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index f463caecb6..44095348f6 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -103,6 +103,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, watch, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import XEmojis from './about.emojis.vue';
 import XFederation from './about.federation.vue';
 import { version, host } from '@/config.js';
@@ -126,7 +127,7 @@ const props = withDefaults(defineProps<{
 	initialTab: 'overview',
 });
 
-const stats = ref(null);
+const stats = ref<Misskey.entities.StatsResponse | null>(null);
 const tab = ref(props.initialTab);
 
 watch(tab, () => {
diff --git a/packages/frontend/src/pages/admin-file.vue b/packages/frontend/src/pages/admin-file.vue
index dd61aea4c7..56b5e7d926 100644
--- a/packages/frontend/src/pages/admin-file.vue
+++ b/packages/frontend/src/pages/admin-file.vue
@@ -68,6 +68,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkObjectView from '@/components/MkObjectView.vue';
@@ -83,8 +84,8 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { iAmAdmin, iAmModerator } from '@/account.js';
 
 const tab = ref('overview');
-const file = ref<any>(null);
-const info = ref<any>(null);
+const file = ref<Misskey.entities.DriveFile | null>(null);
+const info = ref<Misskey.entities.AdminDriveShowFileResponse | null>(null);
 const isSensitive = ref<boolean>(false);
 
 const props = defineProps<{
diff --git a/packages/frontend/src/pages/admin-user.vue b/packages/frontend/src/pages/admin-user.vue
index a614ba73d2..d69d627ce8 100644
--- a/packages/frontend/src/pages/admin-user.vue
+++ b/packages/frontend/src/pages/admin-user.vue
@@ -238,9 +238,9 @@ const tab = ref(props.initialTab);
 const chartSrc = ref('per-user-notes');
 const user = ref<null | Misskey.entities.UserDetailed>();
 const init = ref<ReturnType<typeof createFetcher>>();
-const info = ref();
-const ips = ref(null);
-const ap = ref(null);
+const info = ref<any>();
+const ips = ref<Misskey.entities.AdminGetUserIpsResponse | null>(null);
+const ap = ref<any>(null);
 const moderator = ref(false);
 const silenced = ref(false);
 const suspended = ref(false);
diff --git a/packages/frontend/src/pages/admin/_header_.vue b/packages/frontend/src/pages/admin/_header_.vue
index 50aa7846e4..9050621075 100644
--- a/packages/frontend/src/pages/admin/_header_.vue
+++ b/packages/frontend/src/pages/admin/_header_.vue
@@ -70,7 +70,7 @@ const metadata = injectPageMetadata();
 const el = shallowRef<HTMLElement>(null);
 const tabRefs = {};
 const tabHighlightEl = shallowRef<HTMLElement | null>(null);
-const bg = ref(null);
+const bg = ref<string | null>(null);
 const height = ref(0);
 const hasTabs = computed(() => {
 	return props.tabs && props.tabs.length > 0;
diff --git a/packages/frontend/src/pages/admin/ads.vue b/packages/frontend/src/pages/admin/ads.vue
index f0cf786556..5884ac74b5 100644
--- a/packages/frontend/src/pages/admin/ads.vue
+++ b/packages/frontend/src/pages/admin/ads.vue
@@ -86,6 +86,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
+import * as Misskey from 'misskey-js';
 import XHeader from './_header_.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
@@ -98,7 +99,7 @@ import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
-const ads = ref<any[]>([]);
+const ads = ref<Misskey.entities.Ad[]>([]);
 
 // ISO形式はTZがUTCになってしまうので、TZ分ずらして時間を初期化
 const localTime = new Date();
diff --git a/packages/frontend/src/pages/admin/bot-protection.vue b/packages/frontend/src/pages/admin/bot-protection.vue
index 367ae38b5a..8c9d670d11 100644
--- a/packages/frontend/src/pages/admin/bot-protection.vue
+++ b/packages/frontend/src/pages/admin/bot-protection.vue
@@ -65,6 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { defineAsyncComponent, ref } from 'vue';
+import type { CaptchaProvider } from '@/components/MkCaptcha.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -76,7 +77,7 @@ import { i18n } from '@/i18n.js';
 
 const MkCaptcha = defineAsyncComponent(() => import('@/components/MkCaptcha.vue'));
 
-const provider = ref(null);
+const provider = ref<CaptchaProvider | null>(null);
 const hcaptchaSiteKey = ref<string | null>(null);
 const hcaptchaSecretKey = ref<string | null>(null);
 const recaptchaSiteKey = ref<string | null>(null);
diff --git a/packages/frontend/src/pages/admin/branding.vue b/packages/frontend/src/pages/admin/branding.vue
index e09f68f6e4..38cce69735 100644
--- a/packages/frontend/src/pages/admin/branding.vue
+++ b/packages/frontend/src/pages/admin/branding.vue
@@ -113,9 +113,9 @@ const app192IconUrl = ref<string | null>(null);
 const app512IconUrl = ref<string | null>(null);
 const bannerUrl = ref<string | null>(null);
 const backgroundImageUrl = ref<string | null>(null);
-const themeColor = ref<any>(null);
-const defaultLightTheme = ref<any>(null);
-const defaultDarkTheme = ref<any>(null);
+const themeColor = ref<string | null>(null);
+const defaultLightTheme = ref<string | null>(null);
+const defaultDarkTheme = ref<string | null>(null);
 const serverErrorImageUrl = ref<string | null>(null);
 const infoImageUrl = ref<string | null>(null);
 const notFoundImageUrl = ref<string | null>(null);
diff --git a/packages/frontend/src/pages/admin/email-settings.vue b/packages/frontend/src/pages/admin/email-settings.vue
index c93a19387c..2e6ad3b1d3 100644
--- a/packages/frontend/src/pages/admin/email-settings.vue
+++ b/packages/frontend/src/pages/admin/email-settings.vue
@@ -79,7 +79,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkButton from '@/components/MkButton.vue';
 
 const enableEmail = ref<boolean>(false);
-const email = ref<any>(null);
+const email = ref<string | null>(null);
 const smtpSecure = ref<boolean>(false);
 const smtpHost = ref<string>('');
 const smtpPort = ref<number>(0);
diff --git a/packages/frontend/src/pages/admin/files.vue b/packages/frontend/src/pages/admin/files.vue
index 9d26925993..a366b302c7 100644
--- a/packages/frontend/src/pages/admin/files.vue
+++ b/packages/frontend/src/pages/admin/files.vue
@@ -46,7 +46,7 @@ import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
 const origin = ref('local');
-const type = ref(null);
+const type = ref<string | null>(null);
 const searchHost = ref('');
 const userId = ref('');
 const viewMode = ref('grid');
diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index 9fcbb3ae6f..5e92cbd600 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onActivated, onMounted, onUnmounted, provide, watch, ref, computed } from 'vue';
+import { ComputedRef, Ref, onActivated, onMounted, onUnmounted, provide, watch, ref, computed } from 'vue';
 import { i18n } from '@/i18n.js';
 import MkSuperMenu from '@/components/MkSuperMenu.vue';
 import MkInfo from '@/components/MkInfo.vue';
@@ -36,7 +36,7 @@ import { instance } from '@/instance.js';
 import * as os from '@/os.js';
 import { lookupUser, lookupUserByEmail } from '@/scripts/lookup-user.js';
 import { useRouter } from '@/router.js';
-import { definePageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
+import { PageMetadata, definePageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
 
 const isEmpty = (x: string | null) => x == null || x === '';
 
@@ -51,10 +51,10 @@ const indexInfo = {
 provide('shouldOmitHeaderTitle', false);
 
 const INFO = ref(indexInfo);
-const childInfo = ref(null);
+const childInfo: Ref<ComputedRef<PageMetadata> | null> = ref(null);
 const narrow = ref(false);
 const view = ref(null);
-const el = ref(null);
+const el = ref<HTMLDivElement | null>(null);
 const pageProps = ref({});
 let noMaintainerInformation = isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
 let noBotProtection = !instance.disableRegistration && !instance.enableHcaptcha && !instance.enableRecaptcha && !instance.enableTurnstile;
diff --git a/packages/frontend/src/pages/admin/modlog.vue b/packages/frontend/src/pages/admin/modlog.vue
index 7daf9acc29..8540156d43 100644
--- a/packages/frontend/src/pages/admin/modlog.vue
+++ b/packages/frontend/src/pages/admin/modlog.vue
@@ -42,7 +42,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 
 const logs = shallowRef<InstanceType<typeof MkPagination>>();
 
-const type = ref(null);
+const type = ref<string | null>(null);
 const moderatorId = ref('');
 
 const pagination = {
diff --git a/packages/frontend/src/pages/admin/overview.federation.vue b/packages/frontend/src/pages/admin/overview.federation.vue
index 033fc9ad85..cfd1c6a566 100644
--- a/packages/frontend/src/pages/admin/overview.federation.vue
+++ b/packages/frontend/src/pages/admin/overview.federation.vue
@@ -47,15 +47,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import XPie from './overview.pie.vue';
+import XPie, { type InstanceForPie } from './overview.pie.vue';
 import * as os from '@/os.js';
 import number from '@/filters/number.js';
 import MkNumberDiff from '@/components/MkNumberDiff.vue';
 import { i18n } from '@/i18n.js';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
 
-const topSubInstancesForPie = ref<any>(null);
-const topPubInstancesForPie = ref<any>(null);
+const topSubInstancesForPie = ref<InstanceForPie[] | null>(null);
+const topPubInstancesForPie = ref<InstanceForPie[] | null>(null);
 const federationPubActive = ref<number | null>(null);
 const federationPubActiveDiff = ref<number | null>(null);
 const federationSubActive = ref<number | null>(null);
@@ -72,22 +72,28 @@ onMounted(async () => {
 	federationSubActiveDiff.value = chart.subActive[0] - chart.subActive[1];
 
 	os.apiGet('federation/stats', { limit: 10 }).then(res => {
-		topSubInstancesForPie.value = res.topSubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followersCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowersCount }]);
-		topPubInstancesForPie.value = res.topPubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followingCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowingCount }]);
+		topSubInstancesForPie.value = [
+			...res.topSubInstances.map(x => ({
+				name: x.host,
+				color: x.themeColor,
+				value: x.followersCount,
+				onClick: () => {
+					os.pageWindow(`/instance-info/${x.host}`);
+				},
+			})),
+			{ name: '(other)', color: '#80808080', value: res.otherFollowersCount },
+		];
+		topPubInstancesForPie.value = [
+			...res.topPubInstances.map(x => ({
+				name: x.host,
+				color: x.themeColor,
+				value: x.followingCount,
+				onClick: () => {
+					os.pageWindow(`/instance-info/${x.host}`);
+				},
+			})),
+			{ name: '(other)', color: '#80808080', value: res.otherFollowingCount },
+		];
 	});
 
 	fetching.value = false;
diff --git a/packages/frontend/src/pages/admin/overview.instances.vue b/packages/frontend/src/pages/admin/overview.instances.vue
index da9decaab0..de34f0c09b 100644
--- a/packages/frontend/src/pages/admin/overview.instances.vue
+++ b/packages/frontend/src/pages/admin/overview.instances.vue
@@ -18,12 +18,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
 import { useInterval } from '@/scripts/use-interval.js';
 import MkInstanceCardMini from '@/components/MkInstanceCardMini.vue';
 import { defaultStore } from '@/store.js';
 
-const instances = ref([]);
+const instances = ref<Misskey.entities.FederationInstance[]>([]);
 const fetching = ref(true);
 
 const fetch = async () => {
diff --git a/packages/frontend/src/pages/admin/overview.moderators.vue b/packages/frontend/src/pages/admin/overview.moderators.vue
index c6e81b4a18..3034bdd57e 100644
--- a/packages/frontend/src/pages/admin/overview.moderators.vue
+++ b/packages/frontend/src/pages/admin/overview.moderators.vue
@@ -18,10 +18,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
 import { defaultStore } from '@/store.js';
 
-const moderators = ref<any>(null);
+const moderators = ref<Misskey.entities.UserDetailed[] | null>(null);
 const fetching = ref(true);
 
 onMounted(async () => {
diff --git a/packages/frontend/src/pages/admin/overview.pie.vue b/packages/frontend/src/pages/admin/overview.pie.vue
index a67b67402d..95c1f57b29 100644
--- a/packages/frontend/src/pages/admin/overview.pie.vue
+++ b/packages/frontend/src/pages/admin/overview.pie.vue
@@ -13,10 +13,17 @@ import { Chart } from 'chart.js';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
 import { initChart } from '@/scripts/init-chart.js';
 
+export type InstanceForPie = {
+	name: string,
+	color: string | null,
+	value: number,
+	onClick?: () => void
+};
+
 initChart();
 
 const props = defineProps<{
-	data: { name: string; value: number; color: string; onClick?: () => void }[];
+	data: InstanceForPie[];
 }>();
 
 const chartEl = shallowRef<HTMLCanvasElement>(null);
diff --git a/packages/frontend/src/pages/admin/overview.stats.vue b/packages/frontend/src/pages/admin/overview.stats.vue
index ea8cb164cd..78f435e731 100644
--- a/packages/frontend/src/pages/admin/overview.stats.vue
+++ b/packages/frontend/src/pages/admin/overview.stats.vue
@@ -62,6 +62,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
 import MkNumberDiff from '@/components/MkNumberDiff.vue';
 import MkNumber from '@/components/MkNumber.vue';
@@ -69,7 +70,7 @@ import { i18n } from '@/i18n.js';
 import { customEmojis } from '@/custom-emojis.js';
 import { defaultStore } from '@/store.js';
 
-const stats = ref<any>(null);
+const stats = ref<Misskey.entities.StatsResponse | null>(null);
 const usersComparedToThePrevDay = ref<number>();
 const notesComparedToThePrevDay = ref<number>();
 const onlineUsersCount = ref(0);
diff --git a/packages/frontend/src/pages/admin/overview.users.vue b/packages/frontend/src/pages/admin/overview.users.vue
index 6b8dd90747..79579367c1 100644
--- a/packages/frontend/src/pages/admin/overview.users.vue
+++ b/packages/frontend/src/pages/admin/overview.users.vue
@@ -18,12 +18,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
 import { useInterval } from '@/scripts/use-interval.js';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import { defaultStore } from '@/store.js';
 
-const newUsers = ref(null);
+const newUsers = ref<Misskey.entities.UserDetailed[] | null>(null);
 const fetching = ref(true);
 
 const fetch = async () => {
diff --git a/packages/frontend/src/pages/admin/overview.vue b/packages/frontend/src/pages/admin/overview.vue
index 8b7cad004f..2e0791e24f 100644
--- a/packages/frontend/src/pages/admin/overview.vue
+++ b/packages/frontend/src/pages/admin/overview.vue
@@ -66,6 +66,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { markRaw, onMounted, onBeforeUnmount, nextTick, shallowRef, ref, computed } from 'vue';
+import * as Misskey from 'misskey-js';
 import XFederation from './overview.federation.vue';
 import XInstances from './overview.instances.vue';
 import XQueue from './overview.queue.vue';
@@ -76,6 +77,7 @@ import XStats from './overview.stats.vue';
 import XRetention from './overview.retention.vue';
 import XModerators from './overview.moderators.vue';
 import XHeatmap from './overview.heatmap.vue';
+import type { InstanceForPie } from './overview.pie.vue';
 import * as os from '@/os.js';
 import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
@@ -83,15 +85,15 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
 
 const rootEl = shallowRef<HTMLElement>();
-const serverInfo = ref<any>(null);
-const topSubInstancesForPie = ref<any>(null);
-const topPubInstancesForPie = ref<any>(null);
+const serverInfo = ref<Misskey.entities.ServerInfoResponse | null>(null);
+const topSubInstancesForPie = ref<InstanceForPie[] | null>(null);
+const topPubInstancesForPie = ref<InstanceForPie[] | null>(null);
 const federationPubActive = ref<number | null>(null);
 const federationPubActiveDiff = ref<number | null>(null);
 const federationSubActive = ref<number | null>(null);
 const federationSubActiveDiff = ref<number | null>(null);
-const newUsers = ref(null);
-const activeInstances = shallowRef(null);
+const newUsers = ref<Misskey.entities.UserDetailed[] | null>(null);
+const activeInstances = shallowRef<Misskey.entities.FederationInstance | null>(null);
 const queueStatsConnection = markRaw(useStream().useChannel('queueStats'));
 const now = new Date();
 const filesPagination = {
@@ -123,22 +125,28 @@ onMounted(async () => {
 	});
 
 	os.apiGet('federation/stats', { limit: 10 }).then(res => {
-		topSubInstancesForPie.value = res.topSubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followersCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowersCount }]);
-		topPubInstancesForPie.value = res.topPubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followingCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowingCount }]);
+		topSubInstancesForPie.value = [
+			...res.topSubInstances.map(x => ({
+				name: x.host,
+				color: x.themeColor,
+				value: x.followersCount,
+				onClick: () => {
+					os.pageWindow(`/instance-info/${x.host}`);
+				},
+			})),
+			{ name: '(other)', color: '#80808080', value: res.otherFollowersCount },
+		];
+		topPubInstancesForPie.value = [
+			...res.topPubInstances.map(x => ({
+				name: x.host,
+				color: x.themeColor,
+				value: x.followingCount,
+				onClick: () => {
+					os.pageWindow(`/instance-info/${x.host}`);
+				},
+			})),
+			{ name: '(other)', color: '#80808080', value: res.otherFollowingCount },
+		];
 	});
 
 	os.api('admin/server-info').then(serverInfoResponse => {
diff --git a/packages/frontend/src/pages/admin/proxy-account.vue b/packages/frontend/src/pages/admin/proxy-account.vue
index 4fdecbb67e..05e48f7ac1 100644
--- a/packages/frontend/src/pages/admin/proxy-account.vue
+++ b/packages/frontend/src/pages/admin/proxy-account.vue
@@ -22,6 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
+import * as Misskey from 'misskey-js';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInfo from '@/components/MkInfo.vue';
@@ -31,8 +32,8 @@ import { fetchInstance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
-const proxyAccount = ref<any>(null);
-const proxyAccountId = ref<any>(null);
+const proxyAccount = ref<Misskey.entities.UserDetailed | null>(null);
+const proxyAccountId = ref<string | null>(null);
 
 async function init() {
 	const meta = await os.api('admin/meta');
diff --git a/packages/frontend/src/pages/admin/queue.chart.vue b/packages/frontend/src/pages/admin/queue.chart.vue
index a8fc2f391c..72276c1eed 100644
--- a/packages/frontend/src/pages/admin/queue.chart.vue
+++ b/packages/frontend/src/pages/admin/queue.chart.vue
@@ -62,7 +62,7 @@ const activeSincePrevTick = ref(0);
 const active = ref(0);
 const delayed = ref(0);
 const waiting = ref(0);
-const jobs = ref([]);
+const jobs = ref<(string | number)[][]>([]);
 const chartProcess = shallowRef<InstanceType<typeof XChart>>();
 const chartActive = shallowRef<InstanceType<typeof XChart>>();
 const chartDelayed = shallowRef<InstanceType<typeof XChart>>();
@@ -104,9 +104,11 @@ const onStatsLog = (statsLog) => {
 };
 
 onMounted(() => {
-	os.api(props.domain === 'inbox' ? 'admin/queue/inbox-delayed' : props.domain === 'deliver' ? 'admin/queue/deliver-delayed' : null, {}).then(result => {
-		jobs.value = result;
-	});
+	if (props.domain === 'inbox' || props.domain === 'deliver') {
+		os.api(`admin/queue/${props.domain}-delayed`).then(result => {
+			jobs.value = result;
+		});
+	}
 
 	connection.on('stats', onStats);
 	connection.on('statsLog', onStatsLog);
diff --git a/packages/frontend/src/pages/admin/relays.vue b/packages/frontend/src/pages/admin/relays.vue
index b97eca33d2..0056f2bd9f 100644
--- a/packages/frontend/src/pages/admin/relays.vue
+++ b/packages/frontend/src/pages/admin/relays.vue
@@ -25,13 +25,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
+import * as Misskey from 'misskey-js';
 import XHeader from './_header_.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
-const relays = ref<any[]>([]);
+const relays = ref<Misskey.entities.AdminRelaysListResponse>([]);
 
 async function addRelay() {
 	const { canceled, result: inbox } = await os.inputText({
@@ -66,7 +67,7 @@ function remove(inbox: string) {
 }
 
 function refresh() {
-	os.api('admin/relays/list').then((relayList: any) => {
+	os.api('admin/relays/list').then(relayList => {
 		relays.value = relayList;
 	});
 }
diff --git a/packages/frontend/src/pages/admin/roles.edit.vue b/packages/frontend/src/pages/admin/roles.edit.vue
index f9f1eb0a3c..585b50aad6 100644
--- a/packages/frontend/src/pages/admin/roles.edit.vue
+++ b/packages/frontend/src/pages/admin/roles.edit.vue
@@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import { v4 as uuid } from 'uuid';
 import XHeader from './_header_.vue';
 import XEditor from './roles.editor.vue';
@@ -39,8 +40,8 @@ const props = defineProps<{
 	id?: string;
 }>();
 
-const role = ref(null);
-const data = ref(null);
+const role = ref<Misskey.entities.Role | null>(null);
+const data = ref<any>(null);
 
 if (props.id) {
 	role.value = await os.api('admin/roles/show', {
diff --git a/packages/frontend/src/pages/admin/settings.vue b/packages/frontend/src/pages/admin/settings.vue
index f17284efa9..224028edf3 100644
--- a/packages/frontend/src/pages/admin/settings.vue
+++ b/packages/frontend/src/pages/admin/settings.vue
@@ -173,8 +173,8 @@ const pinnedUsers = ref<string>('');
 const cacheRemoteFiles = ref<boolean>(false);
 const cacheRemoteSensitiveFiles = ref<boolean>(false);
 const enableServiceWorker = ref<boolean>(false);
-const swPublicKey = ref<any>(null);
-const swPrivateKey = ref<any>(null);
+const swPublicKey = ref<string | null>(null);
+const swPrivateKey = ref<string | null>(null);
 const enableFanoutTimeline = ref<boolean>(false);
 const enableFanoutTimelineDbFallback = ref<boolean>(false);
 const perLocalUserUserTimelineCacheMax = ref<number>(0);
diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue
index 3d7ecdacf6..cba54790ce 100644
--- a/packages/frontend/src/pages/antenna-timeline.vue
+++ b/packages/frontend/src/pages/antenna-timeline.vue
@@ -25,6 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, watch, ref, shallowRef } from 'vue';
+import * as Misskey from 'misskey-js';
 import MkTimeline from '@/components/MkTimeline.vue';
 import { scroll } from '@/scripts/scroll.js';
 import * as os from '@/os.js';
@@ -38,7 +39,7 @@ const props = defineProps<{
 	antennaId: string;
 }>();
 
-const antenna = ref(null);
+const antenna = ref<Misskey.entities.Antenna | null>(null);
 const queue = ref(0);
 const rootEl = shallowRef<HTMLElement>();
 const tlEl = shallowRef<InstanceType<typeof MkTimeline>>();
diff --git a/packages/frontend/src/pages/api-console.vue b/packages/frontend/src/pages/api-console.vue
index 5374c220de..0cd4a8dae8 100644
--- a/packages/frontend/src/pages/api-console.vue
+++ b/packages/frontend/src/pages/api-console.vue
@@ -46,7 +46,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 
 const body = ref('{}');
 const endpoint = ref('');
-const endpoints = ref<any[]>([]);
+const endpoints = ref<string[]>([]);
 const sending = ref(false);
 const res = ref('');
 const withCredential = ref(true);
diff --git a/packages/frontend/src/pages/avatar-decorations.vue b/packages/frontend/src/pages/avatar-decorations.vue
index 9dedbccedc..87964ac697 100644
--- a/packages/frontend/src/pages/avatar-decorations.vue
+++ b/packages/frontend/src/pages/avatar-decorations.vue
@@ -35,6 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
+import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
@@ -43,7 +44,7 @@ import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkFolder from '@/components/MkFolder.vue';
 
-const avatarDecorations = ref<any[]>([]);
+const avatarDecorations = ref<Misskey.entities.AdminAvatarDecorationsListResponse>([]);
 
 function add() {
 	avatarDecorations.value.unshift({
diff --git a/packages/frontend/src/pages/channel-editor.vue b/packages/frontend/src/pages/channel-editor.vue
index f16b8709f3..cfcb645247 100644
--- a/packages/frontend/src/pages/channel-editor.vue
+++ b/packages/frontend/src/pages/channel-editor.vue
@@ -70,6 +70,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref, watch, defineAsyncComponent } from 'vue';
+import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkColorInput from '@/components/MkColorInput.vue';
@@ -90,15 +91,15 @@ const props = defineProps<{
 	channelId?: string;
 }>();
 
-const channel = ref(null);
-const name = ref(null);
-const description = ref(null);
+const channel = ref<Misskey.entities.Channel | null>(null);
+const name = ref<string | null>(null);
+const description = ref<string | null>(null);
 const bannerUrl = ref<string | null>(null);
 const bannerId = ref<string | null>(null);
 const color = ref('#000');
 const isSensitive = ref(false);
 const allowRenoteToExternal = ref(true);
-const pinnedNotes = ref([]);
+const pinnedNotes = ref<Partial<Misskey.entities.Note>[]>([]);
 
 watch(() => bannerId.value, async () => {
 	if (bannerId.value == null) {
diff --git a/packages/frontend/src/pages/custom-emojis-manager.vue b/packages/frontend/src/pages/custom-emojis-manager.vue
index 8b2179c6eb..011857688d 100644
--- a/packages/frontend/src/pages/custom-emojis-manager.vue
+++ b/packages/frontend/src/pages/custom-emojis-manager.vue
@@ -88,9 +88,9 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 const emojisPaginationComponent = shallowRef<InstanceType<typeof MkPagination>>();
 
 const tab = ref('local');
-const query = ref(null);
-const queryRemote = ref(null);
-const host = ref(null);
+const query = ref<string | null>(null);
+const queryRemote = ref<string | null>(null);
+const host = ref<string | null>(null);
 const selectMode = ref(false);
 const selectedEmojis = ref<string[]>([]);
 
diff --git a/packages/frontend/src/pages/drive.vue b/packages/frontend/src/pages/drive.vue
index 64fbd16971..f260ab0543 100644
--- a/packages/frontend/src/pages/drive.vue
+++ b/packages/frontend/src/pages/drive.vue
@@ -11,11 +11,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import XDrive from '@/components/MkDrive.vue';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
-const folder = ref(null);
+const folder = ref<Misskey.entities.DriveFolder | null>(null);
 
 const headerActions = computed(() => []);
 
diff --git a/packages/frontend/src/pages/emoji-edit-dialog.vue b/packages/frontend/src/pages/emoji-edit-dialog.vue
index 12928a25f8..07b44a1051 100644
--- a/packages/frontend/src/pages/emoji-edit-dialog.vue
+++ b/packages/frontend/src/pages/emoji-edit-dialog.vue
@@ -92,7 +92,7 @@ const props = defineProps<{
 	emoji?: any,
 }>();
 
-const dialog = ref(null);
+const dialog = ref<InstanceType<typeof MkModalWindow> | null>(null);
 const name = ref<string>(props.emoji ? props.emoji.name : '');
 const category = ref<string>(props.emoji ? props.emoji.category : '');
 const aliases = ref<string>(props.emoji ? props.emoji.aliases.join(' ') : '');
@@ -100,7 +100,7 @@ const license = ref<string>(props.emoji ? (props.emoji.license ?? '') : '');
 const isSensitive = ref(props.emoji ? props.emoji.isSensitive : false);
 const localOnly = ref(props.emoji ? props.emoji.localOnly : false);
 const roleIdsThatCanBeUsedThisEmojiAsReaction = ref(props.emoji ? props.emoji.roleIdsThatCanBeUsedThisEmojiAsReaction : []);
-const rolesThatCanBeUsedThisEmojiAsReaction = ref([]);
+const rolesThatCanBeUsedThisEmojiAsReaction = ref<Misskey.entities.Role[]>([]);
 const file = ref<Misskey.entities.DriveFile>();
 
 watch(roleIdsThatCanBeUsedThisEmojiAsReaction, async () => {
diff --git a/packages/frontend/src/pages/explore.roles.vue b/packages/frontend/src/pages/explore.roles.vue
index 929da19426..d30e107e97 100644
--- a/packages/frontend/src/pages/explore.roles.vue
+++ b/packages/frontend/src/pages/explore.roles.vue
@@ -13,10 +13,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import MkRolePreview from '@/components/MkRolePreview.vue';
 import * as os from '@/os.js';
 
-const roles = ref();
+const roles = ref<Misskey.entities.Role[] | null>(null);
 
 os.api('roles/list').then(res => {
 	roles.value = res.filter(x => x.target === 'manual').sort((a, b) => b.displayOrder - a.displayOrder);
diff --git a/packages/frontend/src/pages/explore.users.vue b/packages/frontend/src/pages/explore.users.vue
index ffebd4cd6c..73c2a94fc0 100644
--- a/packages/frontend/src/pages/explore.users.vue
+++ b/packages/frontend/src/pages/explore.users.vue
@@ -64,6 +64,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { watch, ref, shallowRef, computed } from 'vue';
+import * as Misskey from 'misskey-js';
 import MkUserList from '@/components/MkUserList.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
 import MkTab from '@/components/MkTab.vue';
@@ -76,8 +77,8 @@ const props = defineProps<{
 
 const origin = ref('local');
 const tagsEl = shallowRef<InstanceType<typeof MkFoldableSection>>();
-const tagsLocal = ref([]);
-const tagsRemote = ref([]);
+const tagsLocal = ref<Misskey.entities.Hashtag[]>([]);
+const tagsRemote = ref<Misskey.entities.Hashtag[]>([]);
 
 watch(() => props.tag, () => {
 	if (tagsEl.value) tagsEl.value.toggleContent(props.tag == null);
diff --git a/packages/frontend/src/pages/flash/flash-edit.vue b/packages/frontend/src/pages/flash/flash-edit.vue
index 67a655b677..147a381c98 100644
--- a/packages/frontend/src/pages/flash/flash-edit.vue
+++ b/packages/frontend/src/pages/flash/flash-edit.vue
@@ -35,6 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
@@ -364,8 +365,8 @@ const props = defineProps<{
 	id?: string;
 }>();
 
-const flash = ref(null);
-const visibility = ref('public');
+const flash = ref<Misskey.entities.Flash | null>(null);
+const visibility = ref<Misskey.entities.FlashUpdateRequest['visibility']>('public');
 
 if (props.id) {
 	flash.value = await os.api('flash/show', {
diff --git a/packages/frontend/src/pages/flash/flash.vue b/packages/frontend/src/pages/flash/flash.vue
index 8c5188a1e9..6df9bbc241 100644
--- a/packages/frontend/src/pages/flash/flash.vue
+++ b/packages/frontend/src/pages/flash/flash.vue
@@ -58,6 +58,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, onDeactivated, onUnmounted, Ref, ref, watch, shallowRef } from 'vue';
+import * as Misskey from 'misskey-js';
 import { Interpreter, Parser, values } from '@syuilo/aiscript';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
@@ -78,8 +79,8 @@ const props = defineProps<{
 	id: string;
 }>();
 
-const flash = ref(null);
-const error = ref(null);
+const flash = ref<Misskey.entities.Flash | null>(null);
+const error = ref<any>(null);
 
 function fetchFlash() {
 	flash.value = null;
diff --git a/packages/frontend/src/pages/gallery/edit.vue b/packages/frontend/src/pages/gallery/edit.vue
index 5761e8e32c..d711cb4e88 100644
--- a/packages/frontend/src/pages/gallery/edit.vue
+++ b/packages/frontend/src/pages/gallery/edit.vue
@@ -39,6 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, watch, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
@@ -56,10 +57,10 @@ const props = defineProps<{
 	postId?: string;
 }>();
 
-const init = ref(null);
-const files = ref([]);
-const description = ref(null);
-const title = ref(null);
+const init = ref<(() => Promise<any>) | null>(null);
+const files = ref<Misskey.entities.DriveFile[]>([]);
+const description = ref<string | null>(null);
+const title = ref<string | null>(null);
 const isSensitive = ref(false);
 
 function selectFile(evt) {
@@ -109,7 +110,7 @@ watch(() => props.postId, () => {
 	init.value = () => props.postId ? os.api('gallery/posts/show', {
 		postId: props.postId,
 	}).then(post => {
-		files.value = post.files;
+		files.value = post.files ?? [];
 		title.value = post.title;
 		description.value = post.description;
 		isSensitive.value = post.isSensitive;
diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue
index 3dd04ccb55..77af81cec1 100644
--- a/packages/frontend/src/pages/gallery/post.vue
+++ b/packages/frontend/src/pages/gallery/post.vue
@@ -63,6 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, watch, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import MkContainer from '@/components/MkContainer.vue';
@@ -84,8 +85,8 @@ const props = defineProps<{
 	postId: string;
 }>();
 
-const post = ref(null);
-const error = ref(null);
+const post = ref<Misskey.entities.GalleryPost | null>(null);
+const error = ref<any>(null);
 const otherPostsPagination = {
 	endpoint: 'users/gallery/posts' as const,
 	limit: 6,
diff --git a/packages/frontend/src/pages/list.vue b/packages/frontend/src/pages/list.vue
index d951e8ce07..936d078848 100644
--- a/packages/frontend/src/pages/list.vue
+++ b/packages/frontend/src/pages/list.vue
@@ -35,6 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { watch, computed, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
 import { userPage } from '@/filters/user.js';
 import { i18n } from '@/i18n.js';
@@ -47,9 +48,9 @@ const props = defineProps<{
 	listId: string;
 }>();
 
-const list = ref(null);
+const list = ref<Misskey.entities.UserList | null>(null);
 const error = ref();
-const users = ref([]);
+const users = ref<Misskey.entities.UserDetailed[]>([]);
 
 function fetchList(): void {
 	os.api('users/lists/show', {
diff --git a/packages/frontend/src/pages/my-antennas/edit.vue b/packages/frontend/src/pages/my-antennas/edit.vue
index c4a62e024b..9b3d56ee36 100644
--- a/packages/frontend/src/pages/my-antennas/edit.vue
+++ b/packages/frontend/src/pages/my-antennas/edit.vue
@@ -11,6 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import XAntenna from './editor.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
@@ -20,7 +21,7 @@ import { antennasCache } from '@/cache.js';
 
 const router = useRouter();
 
-const antenna = ref<any>(null);
+const antenna = ref<Misskey.entities.Antenna | null>(null);
 
 const props = defineProps<{
 	antennaId: string
diff --git a/packages/frontend/src/pages/my-antennas/editor.vue b/packages/frontend/src/pages/my-antennas/editor.vue
index 388096c7df..9b19206d96 100644
--- a/packages/frontend/src/pages/my-antennas/editor.vue
+++ b/packages/frontend/src/pages/my-antennas/editor.vue
@@ -60,7 +60,7 @@ import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
-	antenna: any
+	antenna: Misskey.entities.Antenna
 }>();
 
 const emit = defineEmits<{
@@ -70,8 +70,8 @@ const emit = defineEmits<{
 }>();
 
 const name = ref<string>(props.antenna.name);
-const src = ref<string>(props.antenna.src);
-const userListId = ref<any>(props.antenna.userListId);
+const src = ref<Misskey.entities.AntennasCreateRequest['src']>(props.antenna.src);
+const userListId = ref<string | null>(props.antenna.userListId);
 const users = ref<string>(props.antenna.users.join('\n'));
 const keywords = ref<string>(props.antenna.keywords.map(x => x.join(' ')).join('\n'));
 const excludeKeywords = ref<string>(props.antenna.excludeKeywords.map(x => x.join(' ')).join('\n'));
@@ -80,7 +80,7 @@ const localOnly = ref<boolean>(props.antenna.localOnly);
 const withReplies = ref<boolean>(props.antenna.withReplies);
 const withFile = ref<boolean>(props.antenna.withFile);
 const notify = ref<boolean>(props.antenna.notify);
-const userLists = ref<any>(null);
+const userLists = ref<Misskey.entities.UserList[] | null>(null);
 
 watch(() => src.value, async () => {
 	if (src.value === 'list' && userLists.value === null) {
@@ -107,8 +107,7 @@ async function saveAntenna() {
 		await os.apiWithDialog('antennas/create', antennaData);
 		emit('created');
 	} else {
-		antennaData['antennaId'] = props.antenna.id;
-		await os.apiWithDialog('antennas/update', antennaData);
+		await os.apiWithDialog('antennas/update', { ...antennaData, antennaId: props.antenna.id });
 		emit('updated');
 	}
 }
diff --git a/packages/frontend/src/pages/my-clips/index.vue b/packages/frontend/src/pages/my-clips/index.vue
index daa63d0085..bc09e916e3 100644
--- a/packages/frontend/src/pages/my-clips/index.vue
+++ b/packages/frontend/src/pages/my-clips/index.vue
@@ -27,6 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { watch, ref, shallowRef, computed } from 'vue';
+import * as Misskey from 'misskey-js';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkClipPreview from '@/components/MkClipPreview.vue';
@@ -42,7 +43,7 @@ const pagination = {
 };
 
 const tab = ref('my');
-const favorites = ref();
+const favorites = ref<Misskey.entities.Clip[] | null>(null);
 
 const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
 
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
index eee6dbfbb8..ff1e80aaab 100644
--- a/packages/frontend/src/pages/note.vue
+++ b/packages/frontend/src/pages/note.vue
@@ -62,7 +62,7 @@ const props = defineProps<{
 }>();
 
 const note = ref<null | Misskey.entities.Note>();
-const clips = ref();
+const clips = ref<Misskey.entities.Clip[]>();
 const showPrev = ref(false);
 const showNext = ref(false);
 const error = ref();
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
index e3f116dc6c..9d6da653b4 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
@@ -22,6 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
 import { onMounted, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import XContainer from '../page-editor.container.vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os.js';
@@ -35,7 +36,7 @@ const emit = defineEmits<{
 	(ev: 'update:modelValue', value: any): void;
 }>();
 
-const file = ref<any>(null);
+const file = ref<Misskey.entities.DriveFile | null>(null);
 
 async function choose() {
 	os.selectDriveFile(false).then((fileResponse) => {
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue
index ce3980ac8d..ea9d52c2be 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue
@@ -24,6 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
 import { watch, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
@@ -41,7 +42,7 @@ const emit = defineEmits<{
 }>();
 
 const id = ref<any>(props.modelValue.note);
-const note = ref<any>(null);
+const note = ref<Misskey.entities.Note | null>(null);
 
 watch(id, async () => {
 	if (id.value && (id.value.startsWith('http://') || id.value.startsWith('https://'))) {
diff --git a/packages/frontend/src/pages/page-editor/page-editor.blocks.vue b/packages/frontend/src/pages/page-editor/page-editor.blocks.vue
index 2a52d7611e..52220d36bb 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.blocks.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.blocks.vue
@@ -16,6 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue';
+import * as Misskey from 'misskey-js';
 import XSection from './els/page-editor.el.section.vue';
 import XText from './els/page-editor.el.text.vue';
 import XImage from './els/page-editor.el.image.vue';
@@ -34,11 +35,11 @@ function getComponent(type: string) {
 const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
 const props = defineProps<{
-	modelValue: any[];
+	modelValue: Misskey.entities.Page['content'];
 }>();
 
 const emit = defineEmits<{
-	(ev: 'update:modelValue', value: any[]): void;
+	(ev: 'update:modelValue', value: Misskey.entities.Page['content']): void;
 }>();
 
 function updateItem(v) {
diff --git a/packages/frontend/src/pages/page-editor/page-editor.vue b/packages/frontend/src/pages/page-editor/page-editor.vue
index e95dd1f39e..bcfbf5825f 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.vue
@@ -62,6 +62,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, provide, watch, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import { v4 as uuid } from 'uuid';
 import XBlocks from './page-editor.blocks.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -85,16 +86,16 @@ const props = defineProps<{
 const tab = ref('settings');
 const author = ref($i);
 const readonly = ref(false);
-const page = ref(null);
-const pageId = ref(null);
-const currentName = ref(null);
+const page = ref<Misskey.entities.Page | null>(null);
+const pageId = ref<string | null>(null);
+const currentName = ref<string | null>(null);
 const title = ref('');
-const summary = ref(null);
+const summary = ref<string | null>(null);
 const name = ref(Date.now().toString());
-const eyeCatchingImage = ref(null);
-const eyeCatchingImageId = ref(null);
+const eyeCatchingImage = ref<Misskey.entities.DriveFile | null>(null);
+const eyeCatchingImageId = ref<string | null>(null);
 const font = ref('sans-serif');
-const content = ref([]);
+const content = ref<Misskey.entities.Page['content']>([]);
 const alignCenter = ref(false);
 const hideTitleWhenPinned = ref(false);
 
diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue
index a342dff41f..11c8e15e14 100644
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@@ -77,6 +77,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, watch, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import XPage from '@/components/page/page.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
@@ -99,8 +100,8 @@ const props = defineProps<{
 	username: string;
 }>();
 
-const page = ref(null);
-const error = ref(null);
+const page = ref<Misskey.entities.Page | null>(null);
+const error = ref<any>(null);
 const otherPostsPagination = {
 	endpoint: 'users/pages' as const,
 	limit: 6,
diff --git a/packages/frontend/src/pages/registry.keys.vue b/packages/frontend/src/pages/registry.keys.vue
index 49a8642fc4..822a39c2e8 100644
--- a/packages/frontend/src/pages/registry.keys.vue
+++ b/packages/frontend/src/pages/registry.keys.vue
@@ -51,7 +51,7 @@ const props = defineProps<{
 
 const scope = computed(() => props.path ? props.path.split('/') : []);
 
-const keys = ref(null);
+const keys = ref<any>(null);
 
 function fetchKeys() {
 	os.api('i/registry/keys-with-type', {
diff --git a/packages/frontend/src/pages/registry.value.vue b/packages/frontend/src/pages/registry.value.vue
index 8efc0e0504..243c69eed5 100644
--- a/packages/frontend/src/pages/registry.value.vue
+++ b/packages/frontend/src/pages/registry.value.vue
@@ -64,8 +64,8 @@ const props = defineProps<{
 const scope = computed(() => props.path.split('/').slice(0, -1));
 const key = computed(() => props.path.split('/').at(-1));
 
-const value = ref(null);
-const valueForEditor = ref(null);
+const value = ref<any>(null);
+const valueForEditor = ref<string | null>(null);
 
 function fetchValue() {
 	os.api('i/registry/get-detail', {
diff --git a/packages/frontend/src/pages/registry.vue b/packages/frontend/src/pages/registry.vue
index e8bd006373..f45f8922ad 100644
--- a/packages/frontend/src/pages/registry.vue
+++ b/packages/frontend/src/pages/registry.vue
@@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
+import * as Misskey from 'misskey-js';
 import JSON5 from 'json5';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
@@ -31,7 +32,7 @@ import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
 import MkButton from '@/components/MkButton.vue';
 
-const scopesWithDomain = ref(null);
+const scopesWithDomain = ref<Misskey.entities.IRegistryScopesWithDomainResponse | null>(null);
 
 function fetchScopes() {
 	os.api('i/registry/scopes-with-domain').then(res => {
diff --git a/packages/frontend/src/pages/role.vue b/packages/frontend/src/pages/role.vue
index 7d8785218f..10642ddefe 100644
--- a/packages/frontend/src/pages/role.vue
+++ b/packages/frontend/src/pages/role.vue
@@ -37,6 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, watch, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
 import MkUserList from '@/components/MkUserList.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -53,7 +54,7 @@ const props = withDefaults(defineProps<{
 });
 
 const tab = ref(props.initialTab);
-const role = ref();
+const role = ref<Misskey.entities.Role>();
 const error = ref();
 const visible = ref(false);
 
@@ -62,7 +63,7 @@ watch(() => props.role, () => {
 		roleId: props.role,
 	}).then(res => {
 		role.value = res;
-		document.title = `${role.value?.name} | ${instanceName}`;
+		document.title = `${role.value.name} | ${instanceName}`;
 		visible.value = res.isExplorable && res.isPublic;
 	}).catch((err) => {
 		if (err.code === 'NO_SUCH_ROLE') {
diff --git a/packages/frontend/src/pages/search.note.vue b/packages/frontend/src/pages/search.note.vue
index 38692c4de3..e8918c8669 100644
--- a/packages/frontend/src/pages/search.note.vue
+++ b/packages/frontend/src/pages/search.note.vue
@@ -59,7 +59,7 @@ const key = ref(0);
 const searchQuery = ref('');
 const searchOrigin = ref('combined');
 const notePagination = ref();
-const user = ref(null);
+const user = ref<any>(null);
 const isLocalOnly = ref(false);
 
 function selectUser() {
diff --git a/packages/frontend/src/pages/settings/accounts.vue b/packages/frontend/src/pages/settings/accounts.vue
index 6ed04ecf9e..4320ad7e9e 100644
--- a/packages/frontend/src/pages/settings/accounts.vue
+++ b/packages/frontend/src/pages/settings/accounts.vue
@@ -29,7 +29,7 @@ import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
 
-const storedAccounts = ref<any>(null);
+const storedAccounts = ref<{ id: string, token: string }[] | null>(null);
 const accounts = ref<Misskey.entities.UserDetailed[]>([]);
 
 const init = async () => {
diff --git a/packages/frontend/src/pages/settings/apps.vue b/packages/frontend/src/pages/settings/apps.vue
index f461271f0b..419bcd6fee 100644
--- a/packages/frontend/src/pages/settings/apps.vue
+++ b/packages/frontend/src/pages/settings/apps.vue
@@ -54,7 +54,7 @@ import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkButton from '@/components/MkButton.vue';
 import { infoImageUrl } from '@/instance.js';
 
-const list = ref<any>(null);
+const list = ref<InstanceType<typeof FormPagination>>();
 
 const pagination = {
 	endpoint: 'i/apps' as const,
diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue
index 8f5c313d16..7857cf7125 100644
--- a/packages/frontend/src/pages/settings/drive.vue
+++ b/packages/frontend/src/pages/settings/drive.vue
@@ -58,6 +58,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import tinycolor from 'tinycolor2';
 import FormLink from '@/components/form/link.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
@@ -73,9 +74,9 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { $i } from '@/account.js';
 
 const fetching = ref(true);
-const usage = ref<any>(null);
-const capacity = ref<any>(null);
-const uploadFolder = ref<any>(null);
+const usage = ref<number | null>(null);
+const capacity = ref<number | null>(null);
+const uploadFolder = ref<Misskey.entities.DriveFolder | null>(null);
 const alwaysMarkNsfw = ref($i.alwaysMarkNsfw);
 const autoSensitive = ref($i.autoSensitive);
 
diff --git a/packages/frontend/src/pages/settings/index.vue b/packages/frontend/src/pages/settings/index.vue
index e533f4420b..ee0188873e 100644
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script setup lang="ts">
-import { computed, onActivated, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
+import { ComputedRef, Ref, computed, onActivated, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
 import { i18n } from '@/i18n.js';
 import MkInfo from '@/components/MkInfo.vue';
 import MkSuperMenu from '@/components/MkSuperMenu.vue';
@@ -36,7 +36,7 @@ import { signout, $i } from '@/account.js';
 import { clearCache } from '@/scripts/clear-cache.js';
 import { instance } from '@/instance.js';
 import { useRouter } from '@/router.js';
-import { definePageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
+import { PageMetadata, definePageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
 import * as os from '@/os.js';
 
 const indexInfo = {
@@ -46,7 +46,7 @@ const indexInfo = {
 };
 const INFO = ref(indexInfo);
 const el = shallowRef<HTMLElement | null>(null);
-const childInfo = ref(null);
+const childInfo: Ref<ComputedRef<PageMetadata> | null> = ref(null);
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/pages/settings/statusbar.statusbar.vue b/packages/frontend/src/pages/settings/statusbar.statusbar.vue
index f1b7dcc0a8..de5f1a3db9 100644
--- a/packages/frontend/src/pages/settings/statusbar.statusbar.vue
+++ b/packages/frontend/src/pages/settings/statusbar.statusbar.vue
@@ -87,6 +87,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { reactive, watch } from 'vue';
+import * as Misskey from 'misskey-js';
 import MkSelect from '@/components/MkSelect.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
@@ -99,7 +100,7 @@ import { deepClone } from '@/scripts/clone.js';
 
 const props = defineProps<{
 	_id: string;
-	userLists: any[] | null;
+	userLists: Misskey.entities.UserList[] | null;
 }>();
 
 const statusbar = reactive(deepClone(defaultStore.state.statusbars.find(x => x.id === props._id)));
diff --git a/packages/frontend/src/pages/settings/statusbar.vue b/packages/frontend/src/pages/settings/statusbar.vue
index b341e8488e..294da80bb5 100644
--- a/packages/frontend/src/pages/settings/statusbar.vue
+++ b/packages/frontend/src/pages/settings/statusbar.vue
@@ -16,6 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, ref, computed } from 'vue';
+import * as Misskey from 'misskey-js';
 import { v4 as uuid } from 'uuid';
 import XStatusbar from './statusbar.statusbar.vue';
 import MkFolder from '@/components/MkFolder.vue';
@@ -27,7 +28,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 
 const statusbars = defaultStore.reactiveState.statusbars;
 
-const userLists = ref();
+const userLists = ref<Misskey.entities.UserList[] | null>(null);
 
 onMounted(() => {
 	os.api('users/lists/list').then(res => {
diff --git a/packages/frontend/src/pages/settings/theme.install.vue b/packages/frontend/src/pages/settings/theme.install.vue
index f9be5720e0..45970c88e6 100644
--- a/packages/frontend/src/pages/settings/theme.install.vue
+++ b/packages/frontend/src/pages/settings/theme.install.vue
@@ -25,7 +25,7 @@ import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
-const installThemeCode = ref(null);
+const installThemeCode = ref<string | null>(null);
 
 async function install(code: string): Promise<void> {
 	try {
diff --git a/packages/frontend/src/pages/settings/theme.manage.vue b/packages/frontend/src/pages/settings/theme.manage.vue
index 2c53eaf130..7bacf41eec 100644
--- a/packages/frontend/src/pages/settings/theme.manage.vue
+++ b/packages/frontend/src/pages/settings/theme.manage.vue
@@ -46,7 +46,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 
 const installedThemes = ref(getThemes());
 const builtinThemes = getBuiltinThemesRef();
-const selectedThemeId = ref(null);
+const selectedThemeId = ref<string | null>(null);
 
 const themes = computed(() => [...installedThemes.value, ...builtinThemes.value]);
 
diff --git a/packages/frontend/src/pages/user-list-timeline.vue b/packages/frontend/src/pages/user-list-timeline.vue
index 5804a7e7da..ba22d784c7 100644
--- a/packages/frontend/src/pages/user-list-timeline.vue
+++ b/packages/frontend/src/pages/user-list-timeline.vue
@@ -25,6 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, watch, ref, shallowRef } from 'vue';
+import * as Misskey from 'misskey-js';
 import MkTimeline from '@/components/MkTimeline.vue';
 import { scroll } from '@/scripts/scroll.js';
 import * as os from '@/os.js';
@@ -38,7 +39,7 @@ const props = defineProps<{
 	listId: string;
 }>();
 
-const list = ref(null);
+const list = ref<Misskey.entities.UserList | null>(null);
 const queue = ref(0);
 const tlEl = shallowRef<InstanceType<typeof MkTimeline>>();
 const rootEl = shallowRef<HTMLElement>();
diff --git a/packages/frontend/src/pages/user/followers.vue b/packages/frontend/src/pages/user/followers.vue
index 7e893ae849..a4d516a1de 100644
--- a/packages/frontend/src/pages/user/followers.vue
+++ b/packages/frontend/src/pages/user/followers.vue
@@ -32,7 +32,7 @@ const props = withDefaults(defineProps<{
 });
 
 const user = ref<null | Misskey.entities.UserDetailed>(null);
-const error = ref(null);
+const error = ref<any>(null);
 
 function fetchUser(): void {
 	if (props.acct == null) return;
diff --git a/packages/frontend/src/pages/user/following.vue b/packages/frontend/src/pages/user/following.vue
index c5f51712f6..99cb098d65 100644
--- a/packages/frontend/src/pages/user/following.vue
+++ b/packages/frontend/src/pages/user/following.vue
@@ -32,7 +32,7 @@ const props = withDefaults(defineProps<{
 });
 
 const user = ref<null | Misskey.entities.UserDetailed>(null);
-const error = ref(null);
+const error = ref<any>(null);
 
 function fetchUser(): void {
 	if (props.acct == null) return;
diff --git a/packages/frontend/src/pages/user/index.vue b/packages/frontend/src/pages/user/index.vue
index 4efa834d14..1e9a860974 100644
--- a/packages/frontend/src/pages/user/index.vue
+++ b/packages/frontend/src/pages/user/index.vue
@@ -58,7 +58,7 @@ const props = withDefaults(defineProps<{
 
 const tab = ref(props.page);
 const user = ref<null | Misskey.entities.UserDetailed>(null);
-const error = ref(null);
+const error = ref<any>(null);
 
 function fetchUser(): void {
 	if (props.acct == null) return;
diff --git a/packages/frontend/src/pages/welcome.vue b/packages/frontend/src/pages/welcome.vue
index f7d262cc8a..7f0af1b83e 100644
--- a/packages/frontend/src/pages/welcome.vue
+++ b/packages/frontend/src/pages/welcome.vue
@@ -12,13 +12,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import XSetup from './welcome.setup.vue';
 import XEntrance from './welcome.entrance.a.vue';
 import { instanceName } from '@/config.js';
 import * as os from '@/os.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
-const meta = ref(null);
+const meta = ref<Misskey.entities.MetaResponse | null>(null);
 
 os.api('meta', { detail: true }).then(res => {
 	meta.value = res;
diff --git a/packages/frontend/src/scripts/get-note-menu.ts b/packages/frontend/src/scripts/get-note-menu.ts
index 50d76167fe..7130e69279 100644
--- a/packages/frontend/src/scripts/get-note-menu.ts
+++ b/packages/frontend/src/scripts/get-note-menu.ts
@@ -122,7 +122,7 @@ export function getCopyNoteLinkMenu(note: Misskey.entities.Note, text: string):
 export function getNoteMenu(props: {
 	note: Misskey.entities.Note;
 	menuButton: Ref<HTMLElement>;
-	translation: Ref<any>;
+	translation: Ref<Misskey.entities.NotesTranslateResponse | null>;
 	translating: Ref<boolean>;
 	isDeleted: Ref<boolean>;
 	currentClip?: Misskey.entities.Clip;
diff --git a/packages/frontend/src/scripts/use-chart-tooltip.ts b/packages/frontend/src/scripts/use-chart-tooltip.ts
index daf915c7e3..3d6489c3b8 100644
--- a/packages/frontend/src/scripts/use-chart-tooltip.ts
+++ b/packages/frontend/src/scripts/use-chart-tooltip.ts
@@ -11,8 +11,12 @@ export function useChartTooltip(opts: { position: 'top' | 'middle' } = { positio
 	const tooltipShowing = ref(false);
 	const tooltipX = ref(0);
 	const tooltipY = ref(0);
-	const tooltipTitle = ref(null);
-	const tooltipSeries = ref(null);
+	const tooltipTitle = ref<string | null>(null);
+	const tooltipSeries = ref<{
+		backgroundColor: string;
+		borderColor: string;
+		text: string;
+	}[] | null>(null);
 	let disposeTooltipComponent;
 
 	os.popup(MkChartTooltip, {
diff --git a/packages/frontend/src/ui/classic.vue b/packages/frontend/src/ui/classic.vue
index c8d15630ba..e0985fdb11 100644
--- a/packages/frontend/src/ui/classic.vue
+++ b/packages/frontend/src/ui/classic.vue
@@ -71,8 +71,8 @@ const globalHeaderHeight = ref(0);
 const wallpaper = miLocalStorage.getItem('wallpaper') != null;
 const showMenuOnTop = computed(() => defaultStore.state.menuDisplay === 'top');
 const live2d = shallowRef<HTMLIFrameElement>();
-const widgetsLeft = ref();
-const widgetsRight = ref();
+const widgetsLeft = ref<HTMLElement>();
+const widgetsRight = ref<HTMLElement>();
 
 provide('router', mainRouter);
 provideMetadataReceiver((info) => {
@@ -84,7 +84,7 @@ provideMetadataReceiver((info) => {
 provide('shouldHeaderThin', showMenuOnTop.value);
 provide('forceSpacerMin', true);
 
-function attachSticky(el) {
+function attachSticky(el: HTMLElement) {
 	const sticky = new StickySidebar(el, 0, defaultStore.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
 	window.addEventListener('scroll', () => {
 		sticky.calc(window.scrollY);
diff --git a/packages/frontend/src/ui/visitor.vue b/packages/frontend/src/ui/visitor.vue
index e0d54614b6..1fb77e42dc 100644
--- a/packages/frontend/src/ui/visitor.vue
+++ b/packages/frontend/src/ui/visitor.vue
@@ -70,6 +70,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ComputedRef, onMounted, provide, ref, computed } from 'vue';
+import * as Misskey from 'misskey-js';
 import XCommon from './_common_/common.vue';
 import { instanceName } from '@/config.js';
 import * as os from '@/os.js';
@@ -104,7 +105,7 @@ const isTimelineAvailable = ref(instance.policies?.ltlAvailable || instance.poli
 const showMenu = ref(false);
 const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
 const narrow = ref(window.innerWidth < 1280);
-const meta = ref();
+const meta = ref<Misskey.entities.MetaResponse>();
 
 const keymap = computed(() => {
 	return {
diff --git a/packages/frontend/src/widgets/WidgetActivity.calendar.vue b/packages/frontend/src/widgets/WidgetActivity.calendar.vue
index aa9fb0a106..bb5a2676dd 100644
--- a/packages/frontend/src/widgets/WidgetActivity.calendar.vue
+++ b/packages/frontend/src/widgets/WidgetActivity.calendar.vue
@@ -36,7 +36,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 const props = defineProps<{
-	activity: any[]
+	activity: {
+		total: number;
+		notes: number;
+		replies: number;
+		renotes: number;
+	}[]
 }>();
 
 for (const d of props.activity) {
diff --git a/packages/frontend/src/widgets/WidgetActivity.chart.vue b/packages/frontend/src/widgets/WidgetActivity.chart.vue
index a207071324..0e87ec3ec3 100644
--- a/packages/frontend/src/widgets/WidgetActivity.chart.vue
+++ b/packages/frontend/src/widgets/WidgetActivity.chart.vue
@@ -36,17 +36,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref } from 'vue';
 const props = defineProps<{
-	activity: any[]
+	activity: {
+		total: number;
+		notes: number;
+		replies: number;
+		renotes: number;
+	}[]
 }>();
 
 const viewBoxX = ref(147);
 const viewBoxY = ref(60);
 const zoom = ref(1);
 const pos = ref(0);
-const pointsNote = ref<any>(null);
-const pointsReply = ref<any>(null);
-const pointsRenote = ref<any>(null);
-const pointsTotal = ref<any>(null);
+const pointsNote = ref<string>();
+const pointsReply = ref<string>();
+const pointsRenote = ref<string>();
+const pointsTotal = ref<string>();
 
 function dragListen(fn) {
 	window.addEventListener('mousemove', fn);
diff --git a/packages/frontend/src/widgets/WidgetActivity.vue b/packages/frontend/src/widgets/WidgetActivity.vue
index db89265bff..7759986928 100644
--- a/packages/frontend/src/widgets/WidgetActivity.vue
+++ b/packages/frontend/src/widgets/WidgetActivity.vue
@@ -12,8 +12,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div>
 		<MkLoading v-if="fetching"/>
 		<template v-else>
-			<XCalendar v-show="widgetProps.view === 0" :activity="[].concat(activity)"/>
-			<XChart v-show="widgetProps.view === 1" :activity="[].concat(activity)"/>
+			<XCalendar v-show="widgetProps.view === 0" :activity="activity ?? []"/>
+			<XChart v-show="widgetProps.view === 1" :activity="activity ?? []"/>
 		</template>
 	</div>
 </MkContainer>
@@ -59,7 +59,12 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
 	emit,
 );
 
-const activity = ref(null);
+const activity = ref<{
+	total: number;
+	notes: number;
+	replies: number;
+	renotes: number;
+}[] | null>(null);
 const fetching = ref(true);
 
 const toggleView = () => {
diff --git a/packages/frontend/src/widgets/WidgetFederation.vue b/packages/frontend/src/widgets/WidgetFederation.vue
index d32a4e836b..cc3ad8ff7d 100644
--- a/packages/frontend/src/widgets/WidgetFederation.vue
+++ b/packages/frontend/src/widgets/WidgetFederation.vue
@@ -26,6 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
@@ -56,8 +57,8 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 	emit,
 );
 
-const instances = ref([]);
-const charts = ref([]);
+const instances = ref<Misskey.entities.FederationInstance[]>([]);
+const charts = ref<Misskey.entities.ChartsInstanceResponse[]>([]);
 const fetching = ref(true);
 
 const fetch = async () => {
diff --git a/packages/frontend/src/widgets/WidgetInstanceCloud.vue b/packages/frontend/src/widgets/WidgetInstanceCloud.vue
index 0fc96c0d35..38323ed040 100644
--- a/packages/frontend/src/widgets/WidgetInstanceCloud.vue
+++ b/packages/frontend/src/widgets/WidgetInstanceCloud.vue
@@ -19,6 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { shallowRef } from 'vue';
+import * as Misskey from 'misskey-js';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
@@ -48,7 +49,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 );
 
 const cloud = shallowRef<InstanceType<typeof MkTagCloud> | null>();
-const activeInstances = shallowRef(null);
+const activeInstances = shallowRef<Misskey.entities.FederationInstance[] | null>(null);
 
 function onInstanceClick(i) {
 	os.pageWindow(`/instance-info/${i.host}`);
diff --git a/packages/frontend/src/widgets/WidgetPhotos.vue b/packages/frontend/src/widgets/WidgetPhotos.vue
index b1c62caf4d..257753ef10 100644
--- a/packages/frontend/src/widgets/WidgetPhotos.vue
+++ b/packages/frontend/src/widgets/WidgetPhotos.vue
@@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onUnmounted, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import { useStream } from '@/stream.js';
@@ -57,7 +58,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 );
 
 const connection = useStream().useChannel('main');
-const images = ref([]);
+const images = ref<Misskey.entities.DriveFile[]>([]);
 const fetching = ref(true);
 
 const onDriveFileCreated = (file) => {
diff --git a/packages/frontend/src/widgets/WidgetSlideshow.vue b/packages/frontend/src/widgets/WidgetSlideshow.vue
index eccb9a00bf..7e39a05881 100644
--- a/packages/frontend/src/widgets/WidgetSlideshow.vue
+++ b/packages/frontend/src/widgets/WidgetSlideshow.vue
@@ -18,6 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, ref, shallowRef } from 'vue';
+import * as Misskey from 'misskey-js';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import * as os from '@/os.js';
@@ -49,7 +50,7 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
 	emit,
 );
 
-const images = ref([]);
+const images = ref<Misskey.entities.DriveFile[]>([]);
 const fetching = ref(true);
 const slideA = shallowRef<HTMLElement>();
 const slideB = shallowRef<HTMLElement>();
diff --git a/packages/frontend/src/widgets/WidgetTrends.vue b/packages/frontend/src/widgets/WidgetTrends.vue
index 51de02d308..ede7cb6f3b 100644
--- a/packages/frontend/src/widgets/WidgetTrends.vue
+++ b/packages/frontend/src/widgets/WidgetTrends.vue
@@ -25,6 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
@@ -54,7 +55,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 	emit,
 );
 
-const stats = ref([]);
+const stats = ref<Misskey.entities.HashtagsTrendResponse>([]);
 const fetching = ref(true);
 
 const fetch = () => {
diff --git a/packages/frontend/src/widgets/WidgetUserList.vue b/packages/frontend/src/widgets/WidgetUserList.vue
index 81b14fde3f..e17b2cba93 100644
--- a/packages/frontend/src/widgets/WidgetUserList.vue
+++ b/packages/frontend/src/widgets/WidgetUserList.vue
@@ -25,6 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
@@ -58,8 +59,8 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
 	emit,
 );
 
-const list = ref();
-const users = ref([]);
+const list = ref<Misskey.entities.UserList>();
+const users = ref<Misskey.entities.UserDetailed[]>([]);
 const fetching = ref(true);
 
 async function chooseList() {
diff --git a/packages/frontend/src/widgets/server-metric/cpu-mem.vue b/packages/frontend/src/widgets/server-metric/cpu-mem.vue
index 9196ae209f..f13b6a370d 100644
--- a/packages/frontend/src/widgets/server-metric/cpu-mem.vue
+++ b/packages/frontend/src/widgets/server-metric/cpu-mem.vue
@@ -76,11 +76,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, onBeforeUnmount, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import { v4 as uuid } from 'uuid';
 
 const props = defineProps<{
 	connection: any,
-	meta: any
+	meta: Misskey.entities.ServerInfoResponse
 }>();
 
 const viewBoxX = ref<number>(50);
@@ -94,10 +95,10 @@ const cpuPolylinePoints = ref<string>('');
 const memPolylinePoints = ref<string>('');
 const cpuPolygonPoints = ref<string>('');
 const memPolygonPoints = ref<string>('');
-const cpuHeadX = ref<any>(null);
-const cpuHeadY = ref<any>(null);
-const memHeadX = ref<any>(null);
-const memHeadY = ref<any>(null);
+const cpuHeadX = ref<number>();
+const cpuHeadY = ref<number>();
+const memHeadX = ref<number>();
+const memHeadY = ref<number>();
 const cpuP = ref<string>('');
 const memP = ref<string>('');
 
diff --git a/packages/frontend/src/widgets/server-metric/cpu.vue b/packages/frontend/src/widgets/server-metric/cpu.vue
index 0aeba518c0..c7fd0e9023 100644
--- a/packages/frontend/src/widgets/server-metric/cpu.vue
+++ b/packages/frontend/src/widgets/server-metric/cpu.vue
@@ -16,11 +16,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, onBeforeUnmount, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import XPie from './pie.vue';
 
 const props = defineProps<{
 	connection: any,
-	meta: any
+	meta: Misskey.entities.ServerInfoResponse
 }>();
 
 const usage = ref<number>(0);
diff --git a/packages/frontend/src/widgets/server-metric/disk.vue b/packages/frontend/src/widgets/server-metric/disk.vue
index ef88cae9f6..9299af450f 100644
--- a/packages/frontend/src/widgets/server-metric/disk.vue
+++ b/packages/frontend/src/widgets/server-metric/disk.vue
@@ -17,11 +17,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed } from 'vue';
+import * as Misskey from 'misskey-js';
 import XPie from './pie.vue';
 import bytes from '@/filters/bytes.js';
 
 const props = defineProps<{
-	meta: any; // TODO
+	meta: Misskey.entities.ServerInfoResponse;
 }>();
 
 const usage = computed(() => props.meta.fs.used / props.meta.fs.total);
diff --git a/packages/frontend/src/widgets/server-metric/index.vue b/packages/frontend/src/widgets/server-metric/index.vue
index 1cba51b714..b4a4182653 100644
--- a/packages/frontend/src/widgets/server-metric/index.vue
+++ b/packages/frontend/src/widgets/server-metric/index.vue
@@ -21,6 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onUnmounted, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import { useWidgetPropsManager, Widget, WidgetComponentExpose } from '../widget.js';
 import XCpuMemory from './cpu-mem.vue';
 import XNet from './net.vue';
@@ -65,7 +66,7 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
 	emit,
 );
 
-const meta = ref(null);
+const meta = ref<Misskey.entities.ServerInfoResponse | null>(null);
 
 os.apiGet('server-info', {}).then(res => {
 	meta.value = res;
diff --git a/packages/frontend/src/widgets/server-metric/mem.vue b/packages/frontend/src/widgets/server-metric/mem.vue
index 11d0c156c1..f51b2af390 100644
--- a/packages/frontend/src/widgets/server-metric/mem.vue
+++ b/packages/frontend/src/widgets/server-metric/mem.vue
@@ -17,12 +17,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, onBeforeUnmount, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import XPie from './pie.vue';
 import bytes from '@/filters/bytes.js';
 
 const props = defineProps<{
 	connection: any,
-	meta: any
+	meta: Misskey.entities.ServerInfoResponse
 }>();
 
 const usage = ref<number>(0);
diff --git a/packages/frontend/src/widgets/server-metric/net.vue b/packages/frontend/src/widgets/server-metric/net.vue
index e6a8bfc22a..7af88a94eb 100644
--- a/packages/frontend/src/widgets/server-metric/net.vue
+++ b/packages/frontend/src/widgets/server-metric/net.vue
@@ -50,11 +50,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, onBeforeUnmount, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import bytes from '@/filters/bytes.js';
 
 const props = defineProps<{
 	connection: any,
-	meta: any
+	meta: Misskey.entities.ServerInfoResponse
 }>();
 
 const viewBoxX = ref<number>(50);
@@ -64,10 +65,10 @@ const inPolylinePoints = ref<string>('');
 const outPolylinePoints = ref<string>('');
 const inPolygonPoints = ref<string>('');
 const outPolygonPoints = ref<string>('');
-const inHeadX = ref<any>(null);
-const inHeadY = ref<any>(null);
-const outHeadX = ref<any>(null);
-const outHeadY = ref<any>(null);
+const inHeadX = ref<number>();
+const inHeadY = ref<number>();
+const outHeadX = ref<number>();
+const outHeadY = ref<number>();
 const inRecent = ref<number>(0);
 const outRecent = ref<number>(0);
 
diff --git a/packages/misskey-js/src/autogen/apiClientJSDoc.ts b/packages/misskey-js/src/autogen/apiClientJSDoc.ts
index 436f76dbd6..7f4094845a 100644
--- a/packages/misskey-js/src/autogen/apiClientJSDoc.ts
+++ b/packages/misskey-js/src/autogen/apiClientJSDoc.ts
@@ -1,6 +1,6 @@
 /*
  * version: 2023.12.0
- * generatedAt: 2023-12-24T08:46:11.020Z
+ * generatedAt: 2023-12-25T03:48:32.008Z
  */
 
 import type { SwitchCaseResponseType } from '../api.js';
diff --git a/packages/misskey-js/src/autogen/endpoint.ts b/packages/misskey-js/src/autogen/endpoint.ts
index 00f2595e2c..5e05759047 100644
--- a/packages/misskey-js/src/autogen/endpoint.ts
+++ b/packages/misskey-js/src/autogen/endpoint.ts
@@ -1,6 +1,6 @@
 /*
  * version: 2023.12.0
- * generatedAt: 2023-12-24T08:46:11.016Z
+ * generatedAt: 2023-12-25T03:48:32.001Z
  */
 
 import type {
diff --git a/packages/misskey-js/src/autogen/entities.ts b/packages/misskey-js/src/autogen/entities.ts
index 0f03fd3446..ceb2f242ac 100644
--- a/packages/misskey-js/src/autogen/entities.ts
+++ b/packages/misskey-js/src/autogen/entities.ts
@@ -1,6 +1,6 @@
 /*
  * version: 2023.12.0
- * generatedAt: 2023-12-24T08:46:11.014Z
+ * generatedAt: 2023-12-25T03:48:31.996Z
  */
 
 import { operations } from './types.js';
diff --git a/packages/misskey-js/src/autogen/models.ts b/packages/misskey-js/src/autogen/models.ts
index 5ae7723630..a7fde6c1a3 100644
--- a/packages/misskey-js/src/autogen/models.ts
+++ b/packages/misskey-js/src/autogen/models.ts
@@ -1,6 +1,6 @@
 /*
  * version: 2023.12.0
- * generatedAt: 2023-12-24T08:46:11.013Z
+ * generatedAt: 2023-12-25T03:48:31.993Z
  */
 
 import { components } from './types.js';
diff --git a/packages/misskey-js/src/autogen/types.ts b/packages/misskey-js/src/autogen/types.ts
index 6ff98f5013..28fe5654e6 100644
--- a/packages/misskey-js/src/autogen/types.ts
+++ b/packages/misskey-js/src/autogen/types.ts
@@ -3,7 +3,7 @@
 
 /*
  * version: 2023.12.0
- * generatedAt: 2023-12-24T08:46:10.930Z
+ * generatedAt: 2023-12-25T03:48:31.850Z
  */
 
 /**
@@ -4474,6 +4474,7 @@ export type operations = {
             maintainerEmail: string | null;
             maintainerName: string | null;
             name: string | null;
+            shortName: string | null;
             objectStorageS3ForcePathStyle: boolean;
             privacyPolicyUrl: string | null;
             repositoryUrl: string;
@@ -13741,57 +13742,9 @@ export type operations = {
       200: {
         content: {
           'application/json': {
-            topSubInstances: ({
-                id?: string;
-                firstRetrievedAt?: string;
-                host?: string;
-                usersCount?: number;
-                notesCount?: number;
-                followingCount?: number;
-                followersCount?: number;
-                isNotResponding?: boolean;
-                isSuspended?: boolean;
-                isBlocked?: boolean;
-                softwareName?: string;
-                softwareVersion?: string;
-                openRegistrations?: boolean;
-                name?: string;
-                description?: string;
-                maintainerName?: string;
-                maintainerEmail?: string;
-                isSilenced?: boolean;
-                iconUrl?: string;
-                faviconUrl?: string;
-                themeColor?: string;
-                infoUpdatedAt?: string | null;
-                latestRequestReceivedAt?: string | null;
-              })[];
+            topSubInstances: components['schemas']['FederationInstance'][];
             otherFollowersCount: number;
-            topPubInstances: ({
-                id?: string;
-                firstRetrievedAt?: string;
-                host?: string;
-                usersCount?: number;
-                notesCount?: number;
-                followingCount?: number;
-                followersCount?: number;
-                isNotResponding?: boolean;
-                isSuspended?: boolean;
-                isBlocked?: boolean;
-                softwareName?: string;
-                softwareVersion?: string;
-                openRegistrations?: boolean;
-                name?: string;
-                description?: string;
-                maintainerName?: string;
-                maintainerEmail?: string;
-                isSilenced?: boolean;
-                iconUrl?: string;
-                faviconUrl?: string;
-                themeColor?: string;
-                infoUpdatedAt?: string | null;
-                latestRequestReceivedAt?: string | null;
-              })[];
+            topPubInstances: components['schemas']['FederationInstance'][];
             otherFollowingCount: number;
           };
         };
@@ -18752,11 +18705,18 @@ export type operations = {
             iconUrl: string | null;
             maxNoteTextLength: number;
             ads: {
-                place: string;
+                /**
+                 * Format: id
+                 * @example xxxxxxxxxx
+                 */
+                id: string;
                 /** Format: url */
                 url: string;
+                place: string;
+                ratio: number;
                 /** Format: url */
                 imageUrl: string;
+                dayOfWeek: number;
               }[];
             /** @default 0 */
             notesPerOneAd: number;
@@ -21057,7 +21017,10 @@ export type operations = {
       /** @description OK (with results) */
       200: {
         content: {
-          'application/json': Record<string, never>;
+          'application/json': {
+            sourceLang: string;
+            text: string;
+          };
         };
       };
       /** @description Client error */
-- 
cgit v1.2.3-freya


From 47558a6648ac6f53fb3c415fe353c45e21bb9b5d Mon Sep 17 00:00:00 2001
From: YAVIIGI <118232419+YAVIIGI@users.noreply.github.com>
Date: Wed, 27 Dec 2023 20:57:43 +0900
Subject: feat(frontend): 投稿ウインドウにMFM要素を追加するボタンの追加
 (#12788)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* functionPicker の追加

* Update CHANGELOG.md

* fix lint errors

* Add addMfmFunction

* add enableQuickAddMfmFunction setting

* Update CHANGELOG.md

issue 番号を追加

* Update index.d.ts

* change 'functionPicker' to 'mfmFunctionPicker'

* Change indent from 4 space to 1 tab

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 CHANGELOG.md                                       |  3 +-
 locales/index.d.ts                                 |  2 +
 locales/ja-JP.yml                                  |  2 +
 packages/frontend/src/components/MkPostForm.vue    | 12 +++++
 packages/frontend/src/pages/settings/general.vue   |  2 +
 .../frontend/src/scripts/mfm-function-picker.ts    | 61 ++++++++++++++++++++++
 packages/frontend/src/store.ts                     |  4 ++
 7 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 packages/frontend/src/scripts/mfm-function-picker.ts

(limited to 'packages/frontend/src/scripts')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1f65f62788..199a420f7b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,8 +19,9 @@
 - Fix: 自分のdirect noteがuser list timelineに追加されない
 
 ### Client
-- Fix: 一部のモデログ(logYellowでの表示対象)について、表示の色が変わらない問題を修正
 - Feat: AiScript専用のMFM構文`$[clickable.ev=EVENTNAME ...]`を追加。`Mk:C:mfm`のオプション`onClickEv`に関数を渡すと、クリック時に`EVENTNAME`を引数にして呼び出す
+- Enhance: MFM入力補助ボタンを投稿フォームに表示できるように #12787
+- Fix: 一部のモデログ(logYellowでの表示対象)について、表示の色が変わらない問題を修正
 - Fix: `fg`/`bg`MFMに長い単語を指定すると、オーバーフローされずはみ出る問題を修正
 
 ### Server
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 89bdddbdcf..60e88a2192 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1184,6 +1184,8 @@ export interface Locale {
     "overwriteContentConfirm": string;
     "seasonalScreenEffect": string;
     "decorate": string;
+    "addMfmFunction": string;
+    "enableQuickAddMfmFunction": string;
     "_announcement": {
         "forExistingUsers": string;
         "forExistingUsersDescription": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 7bc5889297..3d31dcef49 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1181,6 +1181,8 @@ remainingN: "残り: {n}"
 overwriteContentConfirm: "現在の内容に上書きされますがよろしいですか？"
 seasonalScreenEffect: "季節に応じた画面の演出"
 decorate: "デコる"
+addMfmFunction: "装飾を追加"
+enableQuickAddMfmFunction: "高度なMFMのピッカーを表示する"
 
 _announcement:
   forExistingUsers: "既存ユーザーのみ"
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 5e7ca5539e..3aacf4c2da 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -86,6 +86,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: withHashtags }]" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
 			<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" :class="$style.footerButton" @click="showActions"><i class="ti ti-plug"></i></button>
 			<button v-tooltip="i18n.ts.emoji" :class="['_button', $style.footerButton]" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
+			<button v-if="showAddMfmFunction" v-tooltip="i18n.ts.addMfmFunction" :class="['_button', $style.footerButton]" @click="insertMfmFunction"><i class="ti ti-palette"></i></button>
 		</div>
 		<div :class="$style.footerRight">
 			<button v-tooltip="i18n.ts.previewNoteText" class="_button" :class="[$style.footerButton, { [$style.previewButtonActive]: showPreview }]" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
@@ -126,6 +127,7 @@ import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { miLocalStorage } from '@/local-storage.js';
 import { claimAchievement } from '@/scripts/achievements.js';
 import { emojiPicker } from '@/scripts/emoji-picker.js';
+import { mfmFunctionPicker } from '@/scripts/mfm-function-picker.js';
 
 const modal = inject('modal');
 
@@ -182,6 +184,8 @@ const poll = ref<{
 const useCw = ref<boolean>(!!props.initialCw);
 const showPreview = ref(defaultStore.state.showPreview);
 watch(showPreview, () => defaultStore.set('showPreview', showPreview.value));
+const showAddMfmFunction = ref(defaultStore.state.enableQuickAddMfmFunction);
+watch(showAddMfmFunction, () => defaultStore.set('enableQuickAddMfmFunction', showAddMfmFunction.value));
 const cw = ref<string | null>(props.initialCw ?? null);
 const localOnly = ref<boolean>(props.initialLocalOnly ?? defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly);
 const visibility = ref(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility) as typeof Misskey.noteVisibilities[number]);
@@ -863,6 +867,14 @@ async function insertEmoji(ev: MouseEvent) {
 	);
 }
 
+async function insertMfmFunction(ev: MouseEvent) {
+	mfmFunctionPicker(
+		ev.currentTarget ?? ev.target,
+		textareaEl.value,
+		text,
+	);
+}
+
 function showActions(ev) {
 	os.popupMenu(postFormActions.map(action => ({
 		text: action.title,
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 826ede17e5..3e5f5cb8c8 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -48,6 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch>
 				<MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch>
 				<MkSwitch v-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</MkSwitch>
+				<MkSwitch v-if="advancedMfm" v-model="enableQuickAddMfmFunction">{{ i18n.ts.enableQuickAddMfmFunction }}</MkSwitch>
 				<MkSwitch v-model="showGapBetweenNotesInTimeline">{{ i18n.ts.showGapBetweenNotesInTimeline }}</MkSwitch>
 				<MkSwitch v-model="loadRawImages">{{ i18n.ts.loadRawImages }}</MkSwitch>
 				<MkRadios v-model="reactionsDisplaySize">
@@ -268,6 +269,7 @@ const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect'));
 const showGapBetweenNotesInTimeline = computed(defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline'));
 const animatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm'));
 const advancedMfm = computed(defaultStore.makeGetterSetter('advancedMfm'));
+const enableQuickAddMfmFunction = computed(defaultStore.makeGetterSetter('enableQuickAddMfmFunction'));
 const emojiStyle = computed(defaultStore.makeGetterSetter('emojiStyle'));
 const disableDrawer = computed(defaultStore.makeGetterSetter('disableDrawer'));
 const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));
diff --git a/packages/frontend/src/scripts/mfm-function-picker.ts b/packages/frontend/src/scripts/mfm-function-picker.ts
new file mode 100644
index 0000000000..465926fe04
--- /dev/null
+++ b/packages/frontend/src/scripts/mfm-function-picker.ts
@@ -0,0 +1,61 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Ref, nextTick } from 'vue';
+import * as os from '@/os.js';
+import { i18n } from '@/i18n.js';
+import { MFM_TAGS } from '@/const.js';
+
+/**
+ * MFMの装飾のリストを表示する
+ */
+export function mfmFunctionPicker(src: any, textArea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref<string>) {
+	return new Promise((res, rej) => {
+		os.popupMenu([{
+			text: i18n.ts.addMfmFunction,
+			type: 'label',
+		}, ...getFunctionList(textArea, textRef)], src);
+	});
+}
+
+function getFunctionList(textArea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref<string>) : object[] {
+	const ret: object[] = [];
+	MFM_TAGS.forEach(tag => {
+		ret.push({
+			text: tag,
+			icon: 'ti ti-icons',
+			action: () => add(textArea, textRef, tag),
+		});
+	});
+	return ret;
+}
+
+function add(textArea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref<string>, type: string) {
+	const caretStart: number = textArea.selectionStart as number;
+	const caretEnd: number = textArea.selectionEnd as number;
+
+	MFM_TAGS.forEach(tag => {
+		if (type === tag) {
+			if (caretStart === caretEnd) {
+				// 単純にFunctionを追加
+				const trimmedText = `${textRef.value.substring(0, caretStart)}$[${type} ]${textRef.value.substring(caretEnd)}`;
+				textRef.value = trimmedText;
+			} else {
+				// 選択範囲を囲むようにFunctionを追加
+				const trimmedText = `${textRef.value.substring(0, caretStart)}$[${type} ${textRef.value.substring(caretStart, caretEnd)}]${textRef.value.substring(caretEnd)}`;
+				textRef.value = trimmedText;
+			}
+		}
+	});
+
+	const nextCaretStart: number = caretStart + 3 + type.length;
+	const nextCaretEnd: number = caretEnd + 3 + type.length;
+
+	// キャレットを戻す
+	nextTick(() => {
+		textArea.focus();
+		textArea.setSelectionRange(nextCaretStart, nextCaretEnd);
+	});
+}
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 3f8a5f5a6f..46634af96b 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -219,6 +219,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+	enableQuickAddMfmFunction: {
+		where: 'device',
+		default: false,
+	},
 	loadRawImages: {
 		where: 'device',
 		default: false,
-- 
cgit v1.2.3-freya


From 2a3398181104e8cfa1aed84badd2fdf64428ec2b Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Dec 2023 09:45:35 +0900
Subject: chore: use summaly, browser-image-resizer, and sharp-read-bmp on
 registry.npmjs.org instead of git (#12856)

* chore: use @misskey-dev/summaly on registry.npmjs.org instead of git

* fix backend dependency

* fic backend dependency

* @misskey-dev/sharp-read-bmp

* fix

* use @misskey-dev/browser-image-resizer
---
 packages/backend/package.json                      |   4 +-
 packages/backend/src/core/DriveService.ts          |   2 +-
 packages/backend/src/server/FileServerService.ts   |   2 +-
 .../backend/src/server/web/UrlPreviewService.ts    |   2 +-
 packages/frontend/package.json                     |   4 +-
 packages/frontend/src/components/MkUrlPreview.vue  |   2 +-
 packages/frontend/src/scripts/upload.ts            |   2 +-
 .../frontend/src/scripts/upload/compress-config.ts |   4 +-
 packages/frontend/test/url-preview.test.ts         |   2 +-
 pnpm-lock.yaml                                     | 130 +++++++--------------
 10 files changed, 54 insertions(+), 100 deletions(-)

(limited to 'packages/frontend/src/scripts')

diff --git a/packages/backend/package.json b/packages/backend/package.json
index 4d1e9936aa..710412c43d 100644
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -74,6 +74,8 @@
 		"@fastify/multipart": "8.0.0",
 		"@fastify/static": "6.12.0",
 		"@fastify/view": "8.2.0",
+		"@misskey-dev/sharp-read-bmp": "^1.1.1",
+		"@misskey-dev/summaly": "^5.0.3",
 		"@nestjs/common": "10.2.10",
 		"@nestjs/core": "10.2.10",
 		"@nestjs/testing": "10.2.10",
@@ -157,11 +159,9 @@
 		"sanitize-html": "2.11.0",
 		"secure-json-parse": "2.7.0",
 		"sharp": "0.32.6",
-		"sharp-read-bmp": "github:misskey-dev/sharp-read-bmp",
 		"slacc": "0.0.10",
 		"strict-event-emitter-types": "2.0.0",
 		"stringz": "2.1.0",
-		"summaly": "github:misskey-dev/summaly",
 		"systeminformation": "5.21.20",
 		"tinycolor2": "1.6.0",
 		"tmp": "0.2.1",
diff --git a/packages/backend/src/core/DriveService.ts b/packages/backend/src/core/DriveService.ts
index 484f4fc52e..04f0e38e6f 100644
--- a/packages/backend/src/core/DriveService.ts
+++ b/packages/backend/src/core/DriveService.ts
@@ -7,7 +7,7 @@ import { randomUUID } from 'node:crypto';
 import * as fs from 'node:fs';
 import { Inject, Injectable } from '@nestjs/common';
 import sharp from 'sharp';
-import { sharpBmp } from 'sharp-read-bmp';
+import { sharpBmp } from '@misskey-dev/sharp-read-bmp';
 import { IsNull } from 'typeorm';
 import { DeleteObjectCommandInput, PutObjectCommandInput, NoSuchKey } from '@aws-sdk/client-s3';
 import { DI } from '@/di-symbols.js';
diff --git a/packages/backend/src/server/FileServerService.ts b/packages/backend/src/server/FileServerService.ts
index 0c7fc8cefe..f59996ce17 100644
--- a/packages/backend/src/server/FileServerService.ts
+++ b/packages/backend/src/server/FileServerService.ts
@@ -9,7 +9,7 @@ import { dirname } from 'node:path';
 import { Inject, Injectable } from '@nestjs/common';
 import rename from 'rename';
 import sharp from 'sharp';
-import { sharpBmp } from 'sharp-read-bmp';
+import { sharpBmp } from '@misskey-dev/sharp-read-bmp';
 import type { Config } from '@/config.js';
 import type { MiDriveFile, DriveFilesRepository } from '@/models/_.js';
 import { DI } from '@/di-symbols.js';
diff --git a/packages/backend/src/server/web/UrlPreviewService.ts b/packages/backend/src/server/web/UrlPreviewService.ts
index d590244e34..3fd88355dd 100644
--- a/packages/backend/src/server/web/UrlPreviewService.ts
+++ b/packages/backend/src/server/web/UrlPreviewService.ts
@@ -4,7 +4,7 @@
  */
 
 import { Inject, Injectable } from '@nestjs/common';
-import { summaly } from 'summaly';
+import { summaly } from '@misskey-dev/summaly';
 import { DI } from '@/di-symbols.js';
 import type { Config } from '@/config.js';
 import { MetaService } from '@/core/MetaService.js';
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 523fc281b3..d3c655b0db 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -19,6 +19,7 @@
 	"dependencies": {
 		"@discordapp/twemoji": "15.0.2",
 		"@github/webauthn-json": "2.1.1",
+		"@misskey-dev/browser-image-resizer": "2.2.1-misskey.10",
 		"@rollup/plugin-json": "6.1.0",
 		"@rollup/plugin-replace": "5.0.5",
 		"@rollup/pluginutils": "5.1.0",
@@ -30,7 +31,6 @@
 		"aiscript-vscode": "github:aiscript-dev/aiscript-vscode#v0.0.6",
 		"astring": "1.8.6",
 		"broadcast-channel": "7.0.0",
-		"browser-image-resizer": "github:misskey-dev/browser-image-resizer#v2.2.1-misskey.3",
 		"buraha": "0.0.1",
 		"canvas-confetti": "1.6.1",
 		"chart.js": "4.4.1",
@@ -74,6 +74,7 @@
 		"vuedraggable": "next"
 	},
 	"devDependencies": {
+		"@misskey-dev/summaly": "^5.0.3",
 		"@storybook/addon-actions": "7.6.5",
 		"@storybook/addon-essentials": "7.6.5",
 		"@storybook/addon-interactions": "7.6.5",
@@ -127,7 +128,6 @@
 		"start-server-and-test": "2.0.3",
 		"storybook": "7.6.5",
 		"storybook-addon-misskey-theme": "github:misskey-dev/storybook-addon-misskey-theme",
-		"summaly": "github:misskey-dev/summaly",
 		"vite-plugin-turbosnap": "1.0.3",
 		"vitest": "0.34.6",
 		"vitest-fetch-mock": "0.2.2",
diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index f0f1a13d0b..54f23780c2 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -84,7 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { defineAsyncComponent, onUnmounted, ref } from 'vue';
-import type { summaly } from 'summaly';
+import type { summaly } from '@misskey-dev/summaly';
 import { url as local } from '@/config.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
diff --git a/packages/frontend/src/scripts/upload.ts b/packages/frontend/src/scripts/upload.ts
index b896376ec8..14b667fd68 100644
--- a/packages/frontend/src/scripts/upload.ts
+++ b/packages/frontend/src/scripts/upload.ts
@@ -5,7 +5,7 @@
 
 import { reactive, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { readAndCompressImage } from 'browser-image-resizer';
+import { readAndCompressImage } from '@misskey-dev/browser-image-resizer';
 import { getCompressionConfig } from './upload/compress-config.js';
 import { defaultStore } from '@/store.js';
 import { apiUrl } from '@/config.js';
diff --git a/packages/frontend/src/scripts/upload/compress-config.ts b/packages/frontend/src/scripts/upload/compress-config.ts
index 2deb9cbb81..4775213c20 100644
--- a/packages/frontend/src/scripts/upload/compress-config.ts
+++ b/packages/frontend/src/scripts/upload/compress-config.ts
@@ -5,7 +5,7 @@
 
 import isAnimated from 'is-file-animated';
 import { isWebpSupported } from './isWebpSupported.js';
-import type { BrowserImageResizerConfig } from 'browser-image-resizer';
+import type { BrowserImageResizerConfigWithConvertedOutput } from '@misskey-dev/browser-image-resizer';
 
 const compressTypeMap = {
 	'image/jpeg': { quality: 0.90, mimeType: 'image/webp' },
@@ -21,7 +21,7 @@ const compressTypeMapFallback = {
 	'image/svg+xml': { quality: 1, mimeType: 'image/png' },
 } as const;
 
-export async function getCompressionConfig(file: File): Promise<BrowserImageResizerConfig | undefined> {
+export async function getCompressionConfig(file: File): Promise<BrowserImageResizerConfigWithConvertedOutput | undefined> {
 	const imgConfig = (isWebpSupported() ? compressTypeMap : compressTypeMapFallback)[file.type];
 	if (!imgConfig || await isAnimated(file)) {
 		return;
diff --git a/packages/frontend/test/url-preview.test.ts b/packages/frontend/test/url-preview.test.ts
index f760de9274..6cf8317c07 100644
--- a/packages/frontend/test/url-preview.test.ts
+++ b/packages/frontend/test/url-preview.test.ts
@@ -6,7 +6,7 @@
 import { describe, test, assert, afterEach } from 'vitest';
 import { render, cleanup, type RenderResult } from '@testing-library/vue';
 import './init';
-import type { summaly } from 'summaly';
+import type { summaly } from '@misskey-dev/summaly';
 import { components } from '@/components/index.js';
 import { directives } from '@/directives/index.js';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b46dcd0e7f..d6cd926e6e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -101,6 +101,12 @@ importers:
       '@fastify/view':
         specifier: 8.2.0
         version: 8.2.0
+      '@misskey-dev/sharp-read-bmp':
+        specifier: ^1.1.1
+        version: 1.1.1
+      '@misskey-dev/summaly':
+        specifier: ^5.0.3
+        version: 5.0.3
       '@nestjs/common':
         specifier: 10.2.10
         version: 10.2.10(reflect-metadata@0.1.14)(rxjs@7.8.1)
@@ -350,9 +356,6 @@ importers:
       sharp:
         specifier: 0.32.6
         version: 0.32.6
-      sharp-read-bmp:
-        specifier: github:misskey-dev/sharp-read-bmp
-        version: github.com/misskey-dev/sharp-read-bmp/02d9dc189fa7df0c4bea09330be26741772dac01
       slacc:
         specifier: 0.0.10
         version: 0.0.10
@@ -362,9 +365,6 @@ importers:
       stringz:
         specifier: 2.1.0
         version: 2.1.0
-      summaly:
-        specifier: github:misskey-dev/summaly
-        version: github.com/misskey-dev/summaly/d2a3e07205c3c9769bc5a7b42031c8884b5a25c8
       systeminformation:
         specifier: 5.21.20
         version: 5.21.20
@@ -658,6 +658,9 @@ importers:
       '@github/webauthn-json':
         specifier: 2.1.1
         version: 2.1.1
+      '@misskey-dev/browser-image-resizer':
+        specifier: 2.2.1-misskey.10
+        version: 2.2.1-misskey.10
       '@rollup/plugin-json':
         specifier: 6.1.0
         version: 6.1.0(rollup@4.9.1)
@@ -691,9 +694,6 @@ importers:
       broadcast-channel:
         specifier: 7.0.0
         version: 7.0.0
-      browser-image-resizer:
-        specifier: github:misskey-dev/browser-image-resizer#v2.2.1-misskey.3
-        version: github.com/misskey-dev/browser-image-resizer/0227e860621e55cbed0aabe6dc601096a7748c4a
       buraha:
         specifier: 0.0.1
         version: 0.0.1
@@ -818,6 +818,9 @@ importers:
         specifier: next
         version: 4.1.0(vue@3.3.12)
     devDependencies:
+      '@misskey-dev/summaly':
+        specifier: ^5.0.3
+        version: 5.0.3
       '@storybook/addon-actions':
         specifier: 7.6.5
         version: 7.6.5
@@ -977,9 +980,6 @@ importers:
       storybook-addon-misskey-theme:
         specifier: github:misskey-dev/storybook-addon-misskey-theme
         version: github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640(@storybook/blocks@7.6.5)(@storybook/components@7.6.5)(@storybook/core-events@7.6.5)(@storybook/manager-api@7.6.5)(@storybook/preview-api@7.6.5)(@storybook/theming@7.6.5)(@storybook/types@7.6.5)(react-dom@18.2.0)(react@18.2.0)
-      summaly:
-        specifier: github:misskey-dev/summaly
-        version: github.com/misskey-dev/summaly/d2a3e07205c3c9769bc5a7b42031c8884b5a25c8
       vite-plugin-turbosnap:
         specifier: 1.0.3
         version: 1.0.3
@@ -4935,6 +4935,30 @@ packages:
     resolution: {integrity: sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==}
     dev: true
 
+  /@misskey-dev/browser-image-resizer@2.2.1-misskey.10:
+    resolution: {integrity: sha512-Spjiwa8brffhz4FiYrZ8VoPRyPPRzcdaIzLVb8oMnD9YGU3uzcX/CcZ08okFhrUR/N6IlQM86r5dNH/yY5Uyjg==}
+    dev: false
+
+  /@misskey-dev/sharp-read-bmp@1.1.1:
+    resolution: {integrity: sha512-X52BQYL/I9mafypQ+wBhst+BUlYiPWnHhKGcF6ybcYSLl+zhcV0q5mezIXHozhM0Sv0A7xCdrWmR7TCNxHLrtQ==}
+    dependencies:
+      decode-bmp: 0.2.1
+      decode-ico: 0.4.1
+      sharp: 0.32.6
+    dev: false
+
+  /@misskey-dev/summaly@5.0.3:
+    resolution: {integrity: sha512-jVkuLEDrq2FaeHL8VY51LTqB6j0Jv5L7s0nmKGKMnE0jPBpSj6flswnZgntGmz5mbdCj47utEqu8FY43kH7PVg==}
+    dependencies:
+      cheerio: 1.0.0-rc.12
+      escape-regexp: 0.0.1
+      got: 12.6.1
+      html-entities: 2.3.2
+      iconv-lite: 0.6.3
+      jschardet: 3.0.0
+      private-ip: 2.3.3
+      trace-redirect: 1.0.6
+
   /@mole-inc/bin-wrapper@8.0.1:
     resolution: {integrity: sha512-sTGoeZnjI8N4KS+sW2AN95gDBErhAguvkw/tWdCjeM8bvxpz5lqrnd0vOJABA1A+Ic3zED7PYoLP/RANLgVotA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -8002,10 +8026,10 @@ packages:
 
   /@types/http-cache-semantics@4.0.1:
     resolution: {integrity: sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==}
+    dev: false
 
   /@types/http-cache-semantics@4.0.4:
     resolution: {integrity: sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA==}
-    dev: false
 
   /@types/http-link-header@1.0.5:
     resolution: {integrity: sha512-AxhIKR8UbyoqCTNp9rRepkktHuUOw3DjfOfDCaO9kwI8AYzjhxyrvZq4+mRw/2daD3hYDknrtSeV6SsPwmc71w==}
@@ -9918,19 +9942,6 @@ packages:
       mimic-response: 4.0.0
       normalize-url: 8.0.0
       responselike: 3.0.0
-    dev: false
-
-  /cacheable-request@10.2.8:
-    resolution: {integrity: sha512-IDVO5MJ4LItE6HKFQTqT2ocAQsisOoCTUDu1ddCmnhyiwFQjXNPp4081Xj23N4tO+AFEFNzGuNEf/c8Gwwt15A==}
-    engines: {node: '>=14.16'}
-    dependencies:
-      '@types/http-cache-semantics': 4.0.1
-      get-stream: 6.0.1
-      http-cache-semantics: 4.1.1
-      keyv: 4.5.2
-      mimic-response: 4.0.0
-      normalize-url: 8.0.0
-      responselike: 3.0.0
 
   /cacheable-request@7.0.2:
     resolution: {integrity: sha512-pouW8/FmiPQbuGpkXQ9BAPv/Mo5xDGANgSNXzTzJ8DrKGuXOssM4wIQRjfanNRh3Yu5cfYPvcorqbhg2KIJtew==}
@@ -12807,18 +12818,18 @@ packages:
       responselike: 2.0.1
     dev: false
 
-  /got@12.6.0:
-    resolution: {integrity: sha512-WTcaQ963xV97MN3x0/CbAriXFZcXCfgxVp91I+Ze6pawQOa7SgzwSx2zIJJsX+kTajMnVs0xcFD1TxZKFqhdnQ==}
+  /got@12.6.1:
+    resolution: {integrity: sha512-mThBblvlAF1d4O5oqyvN+ZxLAYwIJK7bpMxgYqPD9okW0C3qm5FFn7k811QrcuEBwaogR3ngOFoCfs6mRv7teQ==}
     engines: {node: '>=14.16'}
     dependencies:
       '@sindresorhus/is': 5.3.0
       '@szmarczak/http-timer': 5.0.1
       cacheable-lookup: 7.0.0
-      cacheable-request: 10.2.8
+      cacheable-request: 10.2.14
       decompress-response: 6.0.0
       form-data-encoder: 2.1.4
       get-stream: 6.0.1
-      http2-wrapper: 2.2.0
+      http2-wrapper: 2.2.1
       lowercase-keys: 3.0.0
       p-cancelable: 3.0.0
       responselike: 3.0.0
@@ -13089,20 +13100,12 @@ packages:
       resolve-alpn: 1.2.1
     dev: false
 
-  /http2-wrapper@2.2.0:
-    resolution: {integrity: sha512-kZB0wxMo0sh1PehyjJUWRFEd99KC5TLjZ2cULC4f9iqJBAmKQQXEICjxl5iPJRwP40dpeHFqqhm7tYCvODpqpQ==}
-    engines: {node: '>=10.19.0'}
-    dependencies:
-      quick-lru: 5.1.1
-      resolve-alpn: 1.2.1
-
   /http2-wrapper@2.2.1:
     resolution: {integrity: sha512-V5nVw1PAOgfI3Lmeaj2Exmeg7fenjhRUgz1lPSezy1CuhPYbgQtbQj4jZfEAEMlaL+vupsvhjqCyjzob0yxsmQ==}
     engines: {node: '>=10.19.0'}
     dependencies:
       quick-lru: 5.1.1
       resolve-alpn: 1.2.1
-    dev: false
 
   /http_ece@1.1.0:
     resolution: {integrity: sha512-bptAfCDdPJxOs5zYSe7Y3lpr772s1G346R4Td5LgRUeCwIGpCGDUTJxRrhTNcAXbx37spge0kWEIH7QAYWNTlA==}
@@ -14553,12 +14556,12 @@ packages:
     resolution: {integrity: sha512-5MHbFaKn8cNSmVW7BYnijeAVlE4cYA/SVkifVgrh7yotnfhKmjuXpDKjrABLnT0SfHWV21P8ow07OGfRrNDg8g==}
     dependencies:
       json-buffer: 3.0.1
+    dev: false
 
   /keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
     dependencies:
       json-buffer: 3.0.1
-    dev: false
 
   /kind-of@6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
@@ -15432,10 +15435,6 @@ packages:
     resolution: {integrity: sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==}
     dev: false
 
-  /node-addon-api@5.0.0:
-    resolution: {integrity: sha512-CvkDw2OEnme7ybCykJpVcKH+uAOLV2qLqiyla128dN9TkEWfrYmxG6C2boDe5KcNQqZF3orkqzGgOMvZ/JNekA==}
-    dev: false
-
   /node-addon-api@6.1.0:
     resolution: {integrity: sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==}
 
@@ -17919,21 +17918,6 @@ packages:
       kind-of: 6.0.3
     dev: true
 
-  /sharp@0.31.3:
-    resolution: {integrity: sha512-XcR4+FCLBFKw1bdB+GEhnUNXNXvnt0tDo4WsBsraKymuo/IAuPuCBVAL2wIkUw2r/dwFW5Q5+g66Kwl2dgDFVg==}
-    engines: {node: '>=14.15.0'}
-    requiresBuild: true
-    dependencies:
-      color: 4.2.3
-      detect-libc: 2.0.2
-      node-addon-api: 5.0.0
-      prebuild-install: 7.1.1
-      semver: 7.5.4
-      simple-get: 4.0.1
-      tar-fs: 2.1.1
-      tunnel-agent: 0.6.0
-    dev: false
-
   /sharp@0.32.6:
     resolution: {integrity: sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==}
     engines: {node: '>=14.15.0'}
@@ -20317,22 +20301,6 @@ packages:
     engines: {vscode: ^1.83.0}
     dev: false
 
-  github.com/misskey-dev/browser-image-resizer/0227e860621e55cbed0aabe6dc601096a7748c4a:
-    resolution: {tarball: https://codeload.github.com/misskey-dev/browser-image-resizer/tar.gz/0227e860621e55cbed0aabe6dc601096a7748c4a}
-    name: browser-image-resizer
-    version: 2.2.1-misskey.3
-    dev: false
-
-  github.com/misskey-dev/sharp-read-bmp/02d9dc189fa7df0c4bea09330be26741772dac01:
-    resolution: {tarball: https://codeload.github.com/misskey-dev/sharp-read-bmp/tar.gz/02d9dc189fa7df0c4bea09330be26741772dac01}
-    name: sharp-read-bmp
-    version: 1.0.0
-    dependencies:
-      decode-bmp: 0.2.1
-      decode-ico: 0.4.1
-      sharp: 0.31.3
-    dev: false
-
   github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640(@storybook/blocks@7.6.5)(@storybook/components@7.6.5)(@storybook/core-events@7.6.5)(@storybook/manager-api@7.6.5)(@storybook/preview-api@7.6.5)(@storybook/theming@7.6.5)(@storybook/types@7.6.5)(react-dom@18.2.0)(react@18.2.0):
     resolution: {tarball: https://codeload.github.com/misskey-dev/storybook-addon-misskey-theme/tar.gz/cf583db098365b2ccc81a82f63ca9c93bc32b640}
     id: github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640
@@ -20364,17 +20332,3 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: true
-
-  github.com/misskey-dev/summaly/d2a3e07205c3c9769bc5a7b42031c8884b5a25c8:
-    resolution: {tarball: https://codeload.github.com/misskey-dev/summaly/tar.gz/d2a3e07205c3c9769bc5a7b42031c8884b5a25c8}
-    name: summaly
-    version: 4.0.2
-    dependencies:
-      cheerio: 1.0.0-rc.12
-      escape-regexp: 0.0.1
-      got: 12.6.0
-      html-entities: 2.3.2
-      iconv-lite: 0.6.3
-      jschardet: 3.0.0
-      private-ip: 2.3.3
-      trace-redirect: 1.0.6
-- 
cgit v1.2.3-freya


From a9127e3ecd0c5789ba01123b8c4bbfc22c4e70e3 Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Wed, 3 Jan 2024 13:35:40 +0900
Subject: enhance(frontend):
 チャンネルノートのピン留めをノートメニューからできるように (#12887)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* enhance(frontend): チャンネルノートのピン留めをノートメニューからできるように

* Update Changelog
---
 CHANGELOG.md                                       |  1 +
 .../backend/src/core/entities/NoteEntityService.ts |  1 +
 packages/backend/src/models/json-schema/note.ts    |  4 +++
 packages/frontend/src/scripts/get-note-menu.ts     | 36 ++++++++++++++++++++++
 packages/misskey-js/src/autogen/apiClientJSDoc.ts  |  5 ++-
 packages/misskey-js/src/autogen/endpoint.ts        |  4 +--
 packages/misskey-js/src/autogen/entities.ts        |  4 +--
 packages/misskey-js/src/autogen/models.ts          |  4 +--
 packages/misskey-js/src/autogen/types.ts           | 17 ++++++----
 9 files changed, 61 insertions(+), 15 deletions(-)

(limited to 'packages/frontend/src/scripts')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea34fa9ef7..efd98ba31a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@
 
 ### Client
 - Enhance: ハッシュタグ入力時に、本文の末尾の行に何も書かれていない場合は新たにスペースを追加しないように
+- Enhance: チャンネルノートのピン留めをノートのメニューからできるように
 
 ## 2023.12.2
 
diff --git a/packages/backend/src/core/entities/NoteEntityService.ts b/packages/backend/src/core/entities/NoteEntityService.ts
index c49dad8e79..1777e2cf54 100644
--- a/packages/backend/src/core/entities/NoteEntityService.ts
+++ b/packages/backend/src/core/entities/NoteEntityService.ts
@@ -351,6 +351,7 @@ export class NoteEntityService implements OnModuleInit {
 				color: channel.color,
 				isSensitive: channel.isSensitive,
 				allowRenoteToExternal: channel.allowRenoteToExternal,
+				userId: channel.userId,
 			} : undefined,
 			mentions: note.mentions.length > 0 ? note.mentions : undefined,
 			uri: note.uri ?? undefined,
diff --git a/packages/backend/src/models/json-schema/note.ts b/packages/backend/src/models/json-schema/note.ts
index aa749943f0..2b7722129b 100644
--- a/packages/backend/src/models/json-schema/note.ts
+++ b/packages/backend/src/models/json-schema/note.ts
@@ -148,6 +148,10 @@ export const packedNoteSchema = {
 					type: 'boolean',
 					optional: false, nullable: false,
 				},
+				userId: {
+					type: 'string',
+					optional: false, nullable: true,
+				},
 			},
 		},
 		localOnly: {
diff --git a/packages/frontend/src/scripts/get-note-menu.ts b/packages/frontend/src/scripts/get-note-menu.ts
index 7130e69279..b9224c5595 100644
--- a/packages/frontend/src/scripts/get-note-menu.ts
+++ b/packages/frontend/src/scripts/get-note-menu.ts
@@ -352,6 +352,42 @@ export function getNoteMenu(props: {
 			]
 			: []
 			),
+			...(appearNote.channel && (appearNote.channel.userId === $i.id || $i.isModerator || $i.isAdmin) ? [
+				{ type: 'divider' },
+				{
+					type: 'parent' as const,
+					icon: 'ti ti-device-tv',
+					text: i18n.ts.channel,
+					children: async () => {
+						const channelChildMenu = [] as MenuItem[];
+
+						const channel = await os.api('channels/show', { channelId: appearNote.channel!.id });
+
+						if (channel.pinnedNoteIds.includes(appearNote.id)) {
+							channelChildMenu.push({
+								icon: 'ti ti-pinned-off',
+								text: i18n.ts.unpin,
+								action: () => os.apiWithDialog('channels/update', {
+									channelId: appearNote.channel!.id,
+									pinnedNoteIds: channel.pinnedNoteIds.filter(id => id !== appearNote.id),
+								}),
+							});
+						} else {
+							channelChildMenu.push({
+								icon: 'ti ti-pin',
+								text: i18n.ts.pin,
+								action: () => os.apiWithDialog('channels/update', {
+									channelId: appearNote.channel!.id,
+									pinnedNoteIds: [...channel.pinnedNoteIds, appearNote.id],
+								}),
+							});
+						}
+						return channelChildMenu;
+					},
+				},
+			]
+			: []
+			),
 			...(appearNote.userId === $i.id || $i.isModerator || $i.isAdmin ? [
 				{ type: 'divider' },
 				appearNote.userId === $i.id ? {
diff --git a/packages/misskey-js/src/autogen/apiClientJSDoc.ts b/packages/misskey-js/src/autogen/apiClientJSDoc.ts
index 758beaf3a0..e8722cab3b 100644
--- a/packages/misskey-js/src/autogen/apiClientJSDoc.ts
+++ b/packages/misskey-js/src/autogen/apiClientJSDoc.ts
@@ -1,6 +1,6 @@
 /*
- * version: 2023.12.0
- * generatedAt: 2023-12-26T23:35:09.494Z
+ * version: 2023.12.2
+ * generatedAt: 2024-01-02T08:53:57.449Z
  */
 
 import type { SwitchCaseResponseType } from '../api.js';
@@ -33,7 +33,6 @@ declare module '../api.js' {
     /**
      * No description provided.
      * 
-     * **Internal Endpoint**: This endpoint is an API for the misskey mainframe and is not intended for use by third parties.
      * **Credential required**: *No*
      */
     request<E extends 'admin/accounts/create', P extends Endpoints[E]['req']>(
diff --git a/packages/misskey-js/src/autogen/endpoint.ts b/packages/misskey-js/src/autogen/endpoint.ts
index 2ed76a22f9..192a1a31e0 100644
--- a/packages/misskey-js/src/autogen/endpoint.ts
+++ b/packages/misskey-js/src/autogen/endpoint.ts
@@ -1,6 +1,6 @@
 /*
- * version: 2023.12.0
- * generatedAt: 2023-12-26T23:35:09.491Z
+ * version: 2023.12.2
+ * generatedAt: 2024-01-02T08:53:57.445Z
  */
 
 import type {
diff --git a/packages/misskey-js/src/autogen/entities.ts b/packages/misskey-js/src/autogen/entities.ts
index c857e8e370..fd4d7372cc 100644
--- a/packages/misskey-js/src/autogen/entities.ts
+++ b/packages/misskey-js/src/autogen/entities.ts
@@ -1,6 +1,6 @@
 /*
- * version: 2023.12.0
- * generatedAt: 2023-12-26T23:35:09.489Z
+ * version: 2023.12.2
+ * generatedAt: 2024-01-02T08:53:57.443Z
  */
 
 import { operations } from './types.js';
diff --git a/packages/misskey-js/src/autogen/models.ts b/packages/misskey-js/src/autogen/models.ts
index c5b81a6b41..db0ada0f3b 100644
--- a/packages/misskey-js/src/autogen/models.ts
+++ b/packages/misskey-js/src/autogen/models.ts
@@ -1,6 +1,6 @@
 /*
- * version: 2023.12.0
- * generatedAt: 2023-12-26T23:35:09.485Z
+ * version: 2023.12.2
+ * generatedAt: 2024-01-02T08:53:57.441Z
  */
 
 import { components } from './types.js';
diff --git a/packages/misskey-js/src/autogen/types.ts b/packages/misskey-js/src/autogen/types.ts
index 94bb263980..37c8f58f58 100644
--- a/packages/misskey-js/src/autogen/types.ts
+++ b/packages/misskey-js/src/autogen/types.ts
@@ -2,8 +2,8 @@
 /* eslint @typescript-eslint/no-explicit-any: 0 */
 
 /*
- * version: 2023.12.0
- * generatedAt: 2023-12-26T23:35:09.389Z
+ * version: 2023.12.2
+ * generatedAt: 2024-01-02T08:53:56.447Z
  */
 
 /**
@@ -40,7 +40,6 @@ export type paths = {
      * admin/accounts/create
      * @description No description provided.
      *
-     * **Internal Endpoint**: This endpoint is an API for the misskey mainframe and is not intended for use by third parties.
      * **Credential required**: *No*
      */
     post: operations['admin/accounts/create'];
@@ -3788,13 +3787,14 @@ export type components = {
        * @example xxxxxxxxxx
        */
       channelId?: string | null;
-      channel?: {
+      channel?: ({
         id: string;
         name: string;
         color: string;
         isSensitive: boolean;
         allowRenoteToExternal: boolean;
-      } | null;
+        userId: string | null;
+      }) | null;
       localOnly?: boolean;
       reactionAcceptance: string | null;
       reactions: Record<string, never>;
@@ -4456,6 +4456,9 @@ export type operations = {
             enableActiveEmailValidation: boolean;
             enableVerifymailApi: boolean;
             verifymailAuthKey: string | null;
+            enableTruemailApi: boolean;
+            truemailInstance: string | null;
+            truemailAuthKey: string | null;
             enableChartsForRemoteUser: boolean;
             enableChartsForFederatedInstances: boolean;
             enableServerMachineStats: boolean;
@@ -4620,7 +4623,6 @@ export type operations = {
    * admin/accounts/create
    * @description No description provided.
    *
-   * **Internal Endpoint**: This endpoint is an API for the misskey mainframe and is not intended for use by third parties.
    * **Credential required**: *No*
    */
   'admin/accounts/create': {
@@ -8247,6 +8249,9 @@ export type operations = {
           enableActiveEmailValidation?: boolean;
           enableVerifymailApi?: boolean;
           verifymailAuthKey?: string | null;
+          enableTruemailApi?: boolean;
+          truemailInstance?: string | null;
+          truemailAuthKey?: string | null;
           enableChartsForRemoteUser?: boolean;
           enableChartsForFederatedInstances?: boolean;
           enableServerMachineStats?: boolean;
-- 
cgit v1.2.3-freya


From f8d5a46dbf8ad89e576dafa3ae776334ccbbf751 Mon Sep 17 00:00:00 2001
From: FineArchs <133759614+FineArchs@users.noreply.github.com>
Date: Thu, 4 Jan 2024 12:26:57 +0900
Subject: Fix: AiScriptのreadlineの修正をPlay以外にも適用 (#12841)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add AiScriptReadline() in api.ts

* apply AiScriptReadline on flash.vue

* AiScriptReadline → aiScriptReadline

* Update flash.vue

* Update scratchpad.vue

* Update WidgetAiscript.vue

* Update WidgetAiscriptApp.vue

* Update WidgetButton.vue

* Update plugin.ts
---
 packages/frontend/src/pages/flash/flash.vue         | 12 ++----------
 packages/frontend/src/pages/scratchpad.vue          | 16 ++--------------
 packages/frontend/src/plugin.ts                     | 16 ++--------------
 packages/frontend/src/scripts/aiscript/api.ts       | 10 ++++++++++
 packages/frontend/src/widgets/WidgetAiscript.vue    | 16 ++--------------
 packages/frontend/src/widgets/WidgetAiscriptApp.vue | 16 ++--------------
 packages/frontend/src/widgets/WidgetButton.vue      | 16 ++--------------
 7 files changed, 22 insertions(+), 80 deletions(-)

(limited to 'packages/frontend/src/scripts')

diff --git a/packages/frontend/src/pages/flash/flash.vue b/packages/frontend/src/pages/flash/flash.vue
index 6df9bbc241..13e8184c19 100644
--- a/packages/frontend/src/pages/flash/flash.vue
+++ b/packages/frontend/src/pages/flash/flash.vue
@@ -67,7 +67,7 @@ import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkAsUi from '@/components/MkAsUi.vue';
 import { AsUiComponent, AsUiRoot, registerAsUiLib } from '@/scripts/aiscript/ui.js';
-import { createAiScriptEnv } from '@/scripts/aiscript/api.js';
+import { aiScriptReadline, createAiScriptEnv } from '@/scripts/aiscript/api.js';
 import MkFolder from '@/components/MkFolder.vue';
 import MkCode from '@/components/MkCode.vue';
 import { defaultStore } from '@/store.js';
@@ -162,15 +162,7 @@ async function run() {
 		THIS_ID: values.STR(flash.value.id),
 		THIS_URL: values.STR(`${url}/play/${flash.value.id}`),
 	}, {
-		in: (q) => {
-			return new Promise(ok => {
-				os.inputText({
-					title: q,
-				}).then(({ result: a }) => {
-					ok(a ?? '');
-				});
-			});
-		},
+		in: aiScriptReadline,
 		out: (value) => {
 			// nop
 		},
diff --git a/packages/frontend/src/pages/scratchpad.vue b/packages/frontend/src/pages/scratchpad.vue
index 1453bc1658..31a3b4e91b 100644
--- a/packages/frontend/src/pages/scratchpad.vue
+++ b/packages/frontend/src/pages/scratchpad.vue
@@ -44,7 +44,7 @@ import { Interpreter, Parser, utils } from '@syuilo/aiscript';
 import MkContainer from '@/components/MkContainer.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkCodeEditor from '@/components/MkCodeEditor.vue';
-import { createAiScriptEnv } from '@/scripts/aiscript/api.js';
+import { aiScriptReadline, createAiScriptEnv } from '@/scripts/aiscript/api.js';
 import * as os from '@/os.js';
 import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
@@ -86,19 +86,7 @@ async function run() {
 			root.value = _root.value;
 		}),
 	}), {
-		in: (q) => {
-			return new Promise(ok => {
-				os.inputText({
-					title: q,
-				}).then(({ canceled, result: a }) => {
-					if (canceled) {
-						ok('');
-					} else {
-						ok(a);
-					}
-				});
-			});
-		},
+		in: aiScriptReadline,
 		out: (value) => {
 			if (value.type === 'str' && value.value.toLowerCase().replace(',', '').includes('hello world')) {
 				claimAchievement('outputHelloWorldOnScratchpad');
diff --git a/packages/frontend/src/plugin.ts b/packages/frontend/src/plugin.ts
index 5e49af4858..acc3e836fb 100644
--- a/packages/frontend/src/plugin.ts
+++ b/packages/frontend/src/plugin.ts
@@ -4,7 +4,7 @@
  */
 
 import { Interpreter, Parser, utils, values } from '@syuilo/aiscript';
-import { createAiScriptEnv } from '@/scripts/aiscript/api.js';
+import { aiScriptReadline, createAiScriptEnv } from '@/scripts/aiscript/api.js';
 import { inputText } from '@/os.js';
 import { Plugin, noteActions, notePostInterruptors, noteViewInterruptors, postFormActions, userActions, pageViewInterruptors } from '@/store.js';
 
@@ -19,19 +19,7 @@ export async function install(plugin: Plugin): Promise<void> {
 		plugin: plugin,
 		storageKey: 'plugins:' + plugin.id,
 	}), {
-		in: (q): Promise<string> => {
-			return new Promise(ok => {
-				inputText({
-					title: q,
-				}).then(({ canceled, result: a }) => {
-					if (canceled) {
-						ok('');
-					} else {
-						ok(a);
-					}
-				});
-			});
-		},
+		in: aiScriptReadline,
 		out: (value): void => {
 			console.log(value);
 		},
diff --git a/packages/frontend/src/scripts/aiscript/api.ts b/packages/frontend/src/scripts/aiscript/api.ts
index 038ae23109..f6f63bb59e 100644
--- a/packages/frontend/src/scripts/aiscript/api.ts
+++ b/packages/frontend/src/scripts/aiscript/api.ts
@@ -11,6 +11,16 @@ import { customEmojis } from '@/custom-emojis.js';
 import { url, lang } from '@/config.js';
 import { nyaize } from '@/scripts/nyaize.js';
 
+export function aiScriptReadline(q: string): Promise<string> {
+	return new Promise(ok => {
+		os.inputText({
+			title: q,
+		}).then(({ result: a }) => {
+			ok(a ?? '');
+		});
+	});
+}
+
 export function createAiScriptEnv(opts) {
 	return {
 		USER_ID: $i ? values.STR($i.id) : values.NULL,
diff --git a/packages/frontend/src/widgets/WidgetAiscript.vue b/packages/frontend/src/widgets/WidgetAiscript.vue
index 5968b54626..a4c1025265 100644
--- a/packages/frontend/src/widgets/WidgetAiscript.vue
+++ b/packages/frontend/src/widgets/WidgetAiscript.vue
@@ -25,7 +25,7 @@ import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, Wid
 import { GetFormResultType } from '@/scripts/form.js';
 import * as os from '@/os.js';
 import MkContainer from '@/components/MkContainer.vue';
-import { createAiScriptEnv } from '@/scripts/aiscript/api.js';
+import { aiScriptReadline, createAiScriptEnv } from '@/scripts/aiscript/api.js';
 import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
 
@@ -69,19 +69,7 @@ const run = async () => {
 		storageKey: 'widget',
 		token: $i?.token,
 	}), {
-		in: (q) => {
-			return new Promise(ok => {
-				os.inputText({
-					title: q,
-				}).then(({ canceled, result: a }) => {
-					if (canceled) {
-						ok('');
-					} else {
-						ok(a);
-					}
-				});
-			});
-		},
+		in: aiScriptReadline,
 		out: (value) => {
 			logs.value.push({
 				id: Math.random().toString(),
diff --git a/packages/frontend/src/widgets/WidgetAiscriptApp.vue b/packages/frontend/src/widgets/WidgetAiscriptApp.vue
index 10248a840a..e236253797 100644
--- a/packages/frontend/src/widgets/WidgetAiscriptApp.vue
+++ b/packages/frontend/src/widgets/WidgetAiscriptApp.vue
@@ -18,7 +18,7 @@ import { Interpreter, Parser } from '@syuilo/aiscript';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import * as os from '@/os.js';
-import { createAiScriptEnv } from '@/scripts/aiscript/api.js';
+import { aiScriptReadline, createAiScriptEnv } from '@/scripts/aiscript/api.js';
 import { $i } from '@/account.js';
 import MkAsUi from '@/components/MkAsUi.vue';
 import MkContainer from '@/components/MkContainer.vue';
@@ -64,19 +64,7 @@ async function run() {
 			root.value = _root.value;
 		}),
 	}, {
-		in: (q) => {
-			return new Promise(ok => {
-				os.inputText({
-					title: q,
-				}).then(({ canceled, result: a }) => {
-					if (canceled) {
-						ok('');
-					} else {
-						ok(a);
-					}
-				});
-			});
-		},
+		in: aiScriptReadline,
 		out: (value) => {
 			// nop
 		},
diff --git a/packages/frontend/src/widgets/WidgetButton.vue b/packages/frontend/src/widgets/WidgetButton.vue
index 11082c1e3f..80fd000d09 100644
--- a/packages/frontend/src/widgets/WidgetButton.vue
+++ b/packages/frontend/src/widgets/WidgetButton.vue
@@ -16,7 +16,7 @@ import { Interpreter, Parser } from '@syuilo/aiscript';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import * as os from '@/os.js';
-import { createAiScriptEnv } from '@/scripts/aiscript/api.js';
+import { aiScriptReadline, createAiScriptEnv } from '@/scripts/aiscript/api.js';
 import { $i } from '@/account.js';
 import MkButton from '@/components/MkButton.vue';
 
@@ -56,19 +56,7 @@ const run = async () => {
 		storageKey: 'widget',
 		token: $i?.token,
 	}), {
-		in: (q) => {
-			return new Promise(ok => {
-				os.inputText({
-					title: q,
-				}).then(({ canceled, result: a }) => {
-					if (canceled) {
-						ok('');
-					} else {
-						ok(a);
-					}
-				});
-			});
-		},
+		in: aiScriptReadline,
 		out: (value) => {
 			// nop
 		},
-- 
cgit v1.2.3-freya


From fa9c4a19b98167c7552bec8f4d791bd89db8fbbe Mon Sep 17 00:00:00 2001
From: おさむのひと <46447427+samunohito@users.noreply.github.com>
Date: Thu, 4 Jan 2024 18:32:46 +0900
Subject: refactor(frontend): os.tsに引き込んだscripts/api.tsの再exportをやめる
 (#12694)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(frontend): os.tsに引き込んだscripts/api.tsの再exportをやめる

* fix

* fix

* renate to "misskeyApi"

* rename file
---
 packages/frontend/src/account.ts                   |  5 +-
 packages/frontend/src/cache.ts                     | 10 +--
 .../frontend/src/components/MkAccountMoved.vue     |  4 +-
 .../frontend/src/components/MkAchievements.vue     |  3 +-
 .../src/components/MkAnnouncementDialog.vue        |  3 +-
 .../frontend/src/components/MkAutocomplete.vue     |  5 +-
 packages/frontend/src/components/MkAvatars.vue     |  4 +-
 .../src/components/MkChannelFollowButton.vue       |  6 +-
 packages/frontend/src/components/MkChart.vue       | 40 ++++-----
 .../frontend/src/components/MkDrive.folder.vue     |  9 ++-
 .../frontend/src/components/MkDrive.navFolder.vue  |  6 +-
 packages/frontend/src/components/MkDrive.vue       | 23 +++---
 .../frontend/src/components/MkFeaturedPhotos.vue   |  4 +-
 .../frontend/src/components/MkFollowButton.vue     | 11 +--
 packages/frontend/src/components/MkHeatmap.vue     | 12 +--
 .../frontend/src/components/MkInstanceCardMini.vue |  4 +-
 .../frontend/src/components/MkInstanceStats.vue    |  3 +-
 packages/frontend/src/components/MkNote.vue        | 15 ++--
 .../frontend/src/components/MkNoteDetailed.vue     | 17 ++--
 packages/frontend/src/components/MkNoteSub.vue     |  4 +-
 .../frontend/src/components/MkNotification.vue     |  6 +-
 packages/frontend/src/components/MkPagination.vue  |  7 +-
 packages/frontend/src/components/MkPoll.vue        |  3 +-
 packages/frontend/src/components/MkPostForm.vue    |  9 ++-
 .../frontend/src/components/MkPostFormAttaches.vue |  7 +-
 .../components/MkPushNotificationAllowButton.vue   |  7 +-
 .../src/components/MkReactionsViewer.reaction.vue  |  9 ++-
 .../frontend/src/components/MkRetentionHeatmap.vue |  4 +-
 .../src/components/MkRetentionLineChart.vue        |  4 +-
 packages/frontend/src/components/MkSignin.vue      |  9 ++-
 .../src/components/MkSignupDialog.form.vue         |  9 ++-
 .../components/MkUserAnnouncementEditDialog.vue    |  3 +-
 .../frontend/src/components/MkUserCardMini.vue     |  4 +-
 packages/frontend/src/components/MkUserPopup.vue   |  3 +-
 .../frontend/src/components/MkUserSelectDialog.vue |  6 +-
 .../src/components/MkUserSetupDialog.Privacy.vue   |  4 +-
 .../src/components/MkUserSetupDialog.User.vue      |  4 +-
 .../MkVisitorDashboard.ActiveUsersChart.vue        |  4 +-
 .../frontend/src/components/MkVisitorDashboard.vue |  5 +-
 .../frontend/src/components/page/page.note.vue     |  4 +-
 packages/frontend/src/custom-emojis.ts             |  6 +-
 packages/frontend/src/instance.ts                  |  4 +-
 packages/frontend/src/os.ts                        |  9 +--
 packages/frontend/src/pages/_error_.vue            |  4 +-
 packages/frontend/src/pages/about.vue              |  4 +-
 packages/frontend/src/pages/admin-file.vue         |  7 +-
 packages/frontend/src/pages/admin-user.vue         | 23 +++---
 packages/frontend/src/pages/admin/ads.vue          | 11 +--
 .../frontend/src/pages/admin/announcements.vue     |  9 ++-
 .../frontend/src/pages/admin/bot-protection.vue    |  3 +-
 packages/frontend/src/pages/admin/branding.vue     |  3 +-
 packages/frontend/src/pages/admin/database.vue     |  4 +-
 .../frontend/src/pages/admin/email-settings.vue    |  3 +-
 .../frontend/src/pages/admin/external-services.vue |  3 +-
 packages/frontend/src/pages/admin/files.vue        |  3 +-
 packages/frontend/src/pages/admin/index.vue        |  5 +-
 .../frontend/src/pages/admin/instance-block.vue    |  3 +-
 packages/frontend/src/pages/admin/invites.vue      |  7 +-
 packages/frontend/src/pages/admin/moderation.vue   |  3 +-
 .../frontend/src/pages/admin/object-storage.vue    |  3 +-
 .../frontend/src/pages/admin/other-settings.vue    |  3 +-
 .../src/pages/admin/overview.active-users.vue      |  4 +-
 .../src/pages/admin/overview.ap-requests.vue       |  4 +-
 .../src/pages/admin/overview.federation.vue        |  5 +-
 .../src/pages/admin/overview.instances.vue         |  4 +-
 .../src/pages/admin/overview.moderators.vue        |  4 +-
 .../frontend/src/pages/admin/overview.stats.vue    | 10 +--
 .../frontend/src/pages/admin/overview.users.vue    |  4 +-
 packages/frontend/src/pages/admin/overview.vue     | 11 +--
 .../frontend/src/pages/admin/proxy-account.vue     |  5 +-
 packages/frontend/src/pages/admin/queue.chart.vue  |  4 +-
 packages/frontend/src/pages/admin/relays.vue       |  7 +-
 packages/frontend/src/pages/admin/roles.edit.vue   |  3 +-
 packages/frontend/src/pages/admin/roles.role.vue   |  3 +-
 packages/frontend/src/pages/admin/roles.vue        |  3 +-
 packages/frontend/src/pages/admin/security.vue     |  3 +-
 packages/frontend/src/pages/admin/settings.vue     |  3 +-
 packages/frontend/src/pages/announcements.vue      |  3 +-
 packages/frontend/src/pages/antenna-timeline.vue   |  3 +-
 packages/frontend/src/pages/api-console.vue        |  8 +-
 packages/frontend/src/pages/auth.form.vue          |  6 +-
 packages/frontend/src/pages/auth.vue               |  6 +-
 packages/frontend/src/pages/avatar-decorations.vue |  5 +-
 packages/frontend/src/pages/channel-editor.vue     |  7 +-
 packages/frontend/src/pages/channel.vue            |  3 +-
 packages/frontend/src/pages/clip.vue               |  3 +-
 .../frontend/src/pages/custom-emojis-manager.vue   |  5 +-
 packages/frontend/src/pages/drive.file.info.vue    |  3 +-
 packages/frontend/src/pages/emoji-edit-dialog.vue  |  7 +-
 packages/frontend/src/pages/emojis.emoji.vue       |  3 +-
 packages/frontend/src/pages/explore.roles.vue      |  4 +-
 packages/frontend/src/pages/explore.users.vue      |  6 +-
 packages/frontend/src/pages/flash/flash-edit.vue   |  3 +-
 packages/frontend/src/pages/flash/flash.vue        |  3 +-
 packages/frontend/src/pages/follow-requests.vue    |  6 +-
 packages/frontend/src/pages/follow.vue             |  7 +-
 packages/frontend/src/pages/gallery/edit.vue       |  3 +-
 packages/frontend/src/pages/gallery/post.vue       |  3 +-
 packages/frontend/src/pages/install-extentions.vue |  3 +-
 packages/frontend/src/pages/instance-info.vue      | 13 +--
 packages/frontend/src/pages/invite.vue             |  5 +-
 packages/frontend/src/pages/list.vue               |  5 +-
 packages/frontend/src/pages/miauth.vue             |  4 +-
 packages/frontend/src/pages/my-antennas/edit.vue   |  4 +-
 packages/frontend/src/pages/my-antennas/editor.vue |  5 +-
 packages/frontend/src/pages/my-clips/index.vue     |  3 +-
 packages/frontend/src/pages/my-lists/list.vue      |  7 +-
 packages/frontend/src/pages/note.vue               |  6 +-
 .../pages/page-editor/els/page-editor.el.image.vue |  3 +-
 .../pages/page-editor/els/page-editor.el.note.vue  |  4 +-
 .../frontend/src/pages/page-editor/page-editor.vue | 15 ++--
 packages/frontend/src/pages/page.vue               |  3 +-
 packages/frontend/src/pages/registry.keys.vue      |  3 +-
 packages/frontend/src/pages/registry.value.vue     |  3 +-
 packages/frontend/src/pages/registry.vue           |  3 +-
 packages/frontend/src/pages/role.vue               |  4 +-
 packages/frontend/src/pages/search.note.vue        |  3 +-
 packages/frontend/src/pages/search.user.vue        |  3 +-
 packages/frontend/src/pages/settings/accounts.vue  |  3 +-
 packages/frontend/src/pages/settings/api.vue       |  3 +-
 packages/frontend/src/pages/settings/apps.vue      |  4 +-
 .../src/pages/settings/avatar-decoration.vue       |  3 +-
 .../frontend/src/pages/settings/drive-cleaner.vue  |  3 +-
 packages/frontend/src/pages/settings/drive.vue     |  9 ++-
 packages/frontend/src/pages/settings/email.vue     |  5 +-
 packages/frontend/src/pages/settings/general.vue   |  3 +-
 .../frontend/src/pages/settings/import-export.vue  | 25 +++---
 packages/frontend/src/pages/settings/migration.vue |  5 +-
 .../pages/settings/mute-block.instance-mute.vue    |  4 +-
 .../frontend/src/pages/settings/mute-block.vue     |  5 +-
 .../frontend/src/pages/settings/notifications.vue  |  5 +-
 packages/frontend/src/pages/settings/other.vue     |  3 +-
 .../src/pages/settings/preferences-backups.vue     |  3 +-
 packages/frontend/src/pages/settings/privacy.vue   |  4 +-
 packages/frontend/src/pages/settings/security.vue  |  3 +-
 .../frontend/src/pages/settings/sounds.sound.vue   |  3 +-
 packages/frontend/src/pages/settings/statusbar.vue |  4 +-
 .../frontend/src/pages/settings/webhook.edit.vue   |  3 +-
 packages/frontend/src/pages/share.vue              | 13 +--
 packages/frontend/src/pages/signup-complete.vue    |  3 +-
 packages/frontend/src/pages/timeline.vue           |  3 +-
 packages/frontend/src/pages/user-list-timeline.vue |  4 +-
 .../frontend/src/pages/user/activity.following.vue |  4 +-
 .../frontend/src/pages/user/activity.heatmap.vue   |  4 +-
 .../frontend/src/pages/user/activity.notes.vue     |  4 +-
 packages/frontend/src/pages/user/activity.pv.vue   |  4 +-
 packages/frontend/src/pages/user/followers.vue     |  4 +-
 packages/frontend/src/pages/user/following.vue     |  4 +-
 packages/frontend/src/pages/user/home.vue          |  6 +-
 packages/frontend/src/pages/user/index.files.vue   |  4 +-
 packages/frontend/src/pages/user/index.vue         |  4 +-
 packages/frontend/src/pages/welcome.entrance.a.vue |  6 +-
 packages/frontend/src/pages/welcome.setup.vue      |  3 +-
 packages/frontend/src/pages/welcome.timeline.vue   |  4 +-
 packages/frontend/src/pages/welcome.vue            |  4 +-
 packages/frontend/src/pizzax.ts                    |  6 +-
 packages/frontend/src/scripts/achievements.ts      |  4 +-
 packages/frontend/src/scripts/aiscript/api.ts      |  3 +-
 packages/frontend/src/scripts/api.ts               | 94 ----------------------
 packages/frontend/src/scripts/clicker-game.ts      |  6 +-
 packages/frontend/src/scripts/gen-search-query.ts  |  2 +-
 .../frontend/src/scripts/get-drive-file-menu.ts    |  9 ++-
 packages/frontend/src/scripts/get-note-menu.ts     | 23 +++---
 packages/frontend/src/scripts/get-user-menu.ts     |  3 +-
 packages/frontend/src/scripts/install-plugin.ts    |  3 +-
 packages/frontend/src/scripts/lookup-user.ts       |  5 +-
 packages/frontend/src/scripts/lookup.ts            |  3 +-
 packages/frontend/src/scripts/misskey-api.ts       | 94 ++++++++++++++++++++++
 packages/frontend/src/scripts/select-file.ts       |  3 +-
 packages/frontend/src/scripts/sound.ts             |  4 +-
 packages/frontend/src/theme-store.ts               |  8 +-
 packages/frontend/src/ui/_common_/common.vue       |  3 +-
 .../src/ui/_common_/statusbar-federation.vue       |  4 +-
 .../src/ui/_common_/statusbar-user-list.vue        |  4 +-
 packages/frontend/src/ui/_common_/sw-inject.ts     |  7 +-
 packages/frontend/src/ui/deck/antenna-column.vue   |  3 +-
 packages/frontend/src/ui/deck/channel-column.vue   |  5 +-
 packages/frontend/src/ui/deck/deck-store.ts        | 10 +--
 packages/frontend/src/ui/deck/list-column.vue      |  3 +-
 .../frontend/src/ui/deck/role-timeline-column.vue  |  3 +-
 packages/frontend/src/ui/visitor.vue               |  3 +-
 packages/frontend/src/widgets/WidgetActivity.vue   |  4 +-
 .../src/widgets/WidgetBirthdayFollowings.vue       |  4 +-
 packages/frontend/src/widgets/WidgetFederation.vue |  6 +-
 .../frontend/src/widgets/WidgetInstanceCloud.vue   |  3 +-
 .../frontend/src/widgets/WidgetOnlineUsers.vue     |  4 +-
 packages/frontend/src/widgets/WidgetPhotos.vue     |  4 +-
 packages/frontend/src/widgets/WidgetSlideshow.vue  |  3 +-
 packages/frontend/src/widgets/WidgetTimeline.vue   |  5 +-
 packages/frontend/src/widgets/WidgetTrends.vue     |  4 +-
 packages/frontend/src/widgets/WidgetUserList.vue   |  7 +-
 .../frontend/src/widgets/server-metric/index.vue   |  4 +-
 192 files changed, 673 insertions(+), 560 deletions(-)
 delete mode 100644 packages/frontend/src/scripts/api.ts
 create mode 100644 packages/frontend/src/scripts/misskey-api.ts

(limited to 'packages/frontend/src/scripts')

diff --git a/packages/frontend/src/account.ts b/packages/frontend/src/account.ts
index 25af298910..b01a80d137 100644
--- a/packages/frontend/src/account.ts
+++ b/packages/frontend/src/account.ts
@@ -11,7 +11,8 @@ import { miLocalStorage } from '@/local-storage.js';
 import { MenuButton } from '@/types/menu.js';
 import { del, get, set } from '@/scripts/idb-proxy.js';
 import { apiUrl } from '@/config.js';
-import { waiting, api, popup, popupMenu, success, alert } from '@/os.js';
+import { waiting, popup, popupMenu, success, alert } from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { unisonReload, reloadChannel } from '@/scripts/unison-reload.js';
 
 // TODO: 他のタブと永続化されたstateを同期
@@ -251,7 +252,7 @@ export async function openAccountMenu(opts: {
 	}
 
 	const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== $i.id));
-	const accountsPromise = api('users/show', { userIds: storedAccounts.map(x => x.id) });
+	const accountsPromise = misskeyApi('users/show', { userIds: storedAccounts.map(x => x.id) });
 
 	function createItem(account: Misskey.entities.UserDetailed) {
 		return {
diff --git a/packages/frontend/src/cache.ts b/packages/frontend/src/cache.ts
index 25d2b3c15f..20950add80 100644
--- a/packages/frontend/src/cache.ts
+++ b/packages/frontend/src/cache.ts
@@ -5,9 +5,9 @@
 
 import * as Misskey from 'misskey-js';
 import { Cache } from '@/scripts/cache.js';
-import { api } from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
-export const clipsCache = new Cache<Misskey.entities.Clip[]>(1000 * 60 * 30, () => api('clips/list'));
-export const rolesCache = new Cache(1000 * 60 * 30, () => api('admin/roles/list'));
-export const userListsCache = new Cache<Misskey.entities.UserList[]>(1000 * 60 * 30, () => api('users/lists/list'));
-export const antennasCache = new Cache<Misskey.entities.Antenna[]>(1000 * 60 * 30, () => api('antennas/list'));
+export const clipsCache = new Cache<Misskey.entities.Clip[]>(1000 * 60 * 30, () => misskeyApi('clips/list'));
+export const rolesCache = new Cache(1000 * 60 * 30, () => misskeyApi('admin/roles/list'));
+export const userListsCache = new Cache<Misskey.entities.UserList[]>(1000 * 60 * 30, () => misskeyApi('users/lists/list'));
+export const antennasCache = new Cache<Misskey.entities.Antenna[]>(1000 * 60 * 30, () => misskeyApi('antennas/list'));
diff --git a/packages/frontend/src/components/MkAccountMoved.vue b/packages/frontend/src/components/MkAccountMoved.vue
index 155d9fe3a9..a5b43d3c6c 100644
--- a/packages/frontend/src/components/MkAccountMoved.vue
+++ b/packages/frontend/src/components/MkAccountMoved.vue
@@ -17,7 +17,7 @@ import * as Misskey from 'misskey-js';
 import MkMention from './MkMention.vue';
 import { i18n } from '@/i18n.js';
 import { host as localHost } from '@/config.js';
-import { api } from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
 const user = ref<Misskey.entities.UserLite>();
 
@@ -25,7 +25,7 @@ const props = defineProps<{
 	movedTo: string; // user id
 }>();
 
-api('users/show', { userId: props.movedTo }).then(u => user.value = u);
+misskeyApi('users/show', { userId: props.movedTo }).then(u => user.value = u);
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/components/MkAchievements.vue b/packages/frontend/src/components/MkAchievements.vue
index d49eeb0329..1137eaf970 100644
--- a/packages/frontend/src/components/MkAchievements.vue
+++ b/packages/frontend/src/components/MkAchievements.vue
@@ -55,6 +55,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import * as Misskey from 'misskey-js';
 import { onMounted, ref, computed } from 'vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { ACHIEVEMENT_TYPES, ACHIEVEMENT_BADGES, claimAchievement } from '@/scripts/achievements.js';
 
@@ -71,7 +72,7 @@ const achievements = ref<Misskey.entities.UsersAchievementsResponse | null>(null
 const lockedAchievements = computed(() => ACHIEVEMENT_TYPES.filter(x => !(achievements.value ?? []).some(a => a.name === x)));
 
 function fetch() {
-	os.api('users/achievements', { userId: props.user.id }).then(res => {
+	misskeyApi('users/achievements', { userId: props.user.id }).then(res => {
 		achievements.value = [];
 		for (const t of ACHIEVEMENT_TYPES) {
 			const a = res.find(x => x.name === t);
diff --git a/packages/frontend/src/components/MkAnnouncementDialog.vue b/packages/frontend/src/components/MkAnnouncementDialog.vue
index aaac3dd29b..c649e69cd0 100644
--- a/packages/frontend/src/components/MkAnnouncementDialog.vue
+++ b/packages/frontend/src/components/MkAnnouncementDialog.vue
@@ -25,6 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { onMounted, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import MkModal from '@/components/MkModal.vue';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
@@ -49,7 +50,7 @@ async function ok() {
 	}
 
 	modal.value.close();
-	os.api('i/read-announcement', { announcementId: props.announcement.id });
+	misskeyApi('i/read-announcement', { announcementId: props.announcement.id });
 	updateAccount({
 		unreadAnnouncements: $i!.unreadAnnouncements.filter(a => a.id !== props.announcement.id),
 	});
diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue
index 494d120a93..49884c705f 100644
--- a/packages/frontend/src/components/MkAutocomplete.vue
+++ b/packages/frontend/src/components/MkAutocomplete.vue
@@ -45,6 +45,7 @@ import contains from '@/scripts/contains.js';
 import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base.js';
 import { acct } from '@/filters/user.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore } from '@/store.js';
 import { emojilist, getEmojiName } from '@/scripts/emojilist.js';
 import { i18n } from '@/i18n.js';
@@ -201,7 +202,7 @@ function exec() {
 			users.value = JSON.parse(cache);
 			fetching.value = false;
 		} else {
-			os.api('users/search-by-username-and-host', {
+			misskeyApi('users/search-by-username-and-host', {
 				username: props.q,
 				limit: 10,
 				detail: false,
@@ -224,7 +225,7 @@ function exec() {
 				hashtags.value = hashtags;
 				fetching.value = false;
 			} else {
-				os.api('hashtags/search', {
+				misskeyApi('hashtags/search', {
 					query: props.q,
 					limit: 30,
 				}).then(searchedHashtags => {
diff --git a/packages/frontend/src/components/MkAvatars.vue b/packages/frontend/src/components/MkAvatars.vue
index 5644a324cf..6ef4a7dfe2 100644
--- a/packages/frontend/src/components/MkAvatars.vue
+++ b/packages/frontend/src/components/MkAvatars.vue
@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
 const props = withDefaults(defineProps<{
 	userIds: string[];
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<{
 const users = ref<Misskey.entities.UserLite[]>([]);
 
 onMounted(async () => {
-	users.value = await os.api('users/show', {
+	users.value = await misskeyApi('users/show', {
 		userIds: props.userIds,
 	}) as unknown as Misskey.entities.UserLite[];
 });
diff --git a/packages/frontend/src/components/MkChannelFollowButton.vue b/packages/frontend/src/components/MkChannelFollowButton.vue
index 41b02a7e3f..8a1d04e9c3 100644
--- a/packages/frontend/src/components/MkChannelFollowButton.vue
+++ b/packages/frontend/src/components/MkChannelFollowButton.vue
@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 
 const props = withDefaults(defineProps<{
@@ -44,12 +44,12 @@ async function onClick() {
 
 	try {
 		if (isFollowing.value) {
-			await os.api('channels/unfollow', {
+			await misskeyApi('channels/unfollow', {
 				channelId: props.channel.id,
 			});
 			isFollowing.value = false;
 		} else {
-			await os.api('channels/follow', {
+			await misskeyApi('channels/follow', {
 				channelId: props.channel.id,
 			});
 			isFollowing.value = true;
diff --git a/packages/frontend/src/components/MkChart.vue b/packages/frontend/src/components/MkChart.vue
index adb3c134ae..82605123c5 100644
--- a/packages/frontend/src/components/MkChart.vue
+++ b/packages/frontend/src/components/MkChart.vue
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { onMounted, ref, shallowRef, watch, PropType } from 'vue';
 import { Chart } from 'chart.js';
 import gradient from 'chartjs-plugin-gradient';
-import * as os from '@/os.js';
+import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import { defaultStore } from '@/store.js';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
 import { chartVLine } from '@/scripts/chart-vline.js';
@@ -277,7 +277,7 @@ const exportData = () => {
 };
 
 const fetchFederationChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/federation', { limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/federation', { limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Received',
@@ -327,7 +327,7 @@ const fetchFederationChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchApRequestChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/ap-request', { limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/ap-request', { limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'In',
@@ -349,7 +349,7 @@ const fetchApRequestChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchNotesChart = async (type: string): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/notes', { limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/notes', { limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'All',
@@ -396,7 +396,7 @@ const fetchNotesChart = async (type: string): Promise<typeof chartData> => {
 };
 
 const fetchNotesTotalChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/notes', { limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/notes', { limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Combined',
@@ -415,7 +415,7 @@ const fetchNotesTotalChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchUsersChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/users', { limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/users', { limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Combined',
@@ -443,7 +443,7 @@ const fetchUsersChart = async (total: boolean): Promise<typeof chartData> => {
 };
 
 const fetchActiveUsersChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/active-users', { limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/active-users', { limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Read & Write',
@@ -495,7 +495,7 @@ const fetchActiveUsersChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchDriveChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/drive', { limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/drive', { limit: props.limit, span: props.span });
 	return {
 		bytes: true,
 		series: [{
@@ -531,7 +531,7 @@ const fetchDriveChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchDriveFilesChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/drive', { limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/drive', { limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'All',
@@ -566,7 +566,7 @@ const fetchDriveFilesChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchInstanceRequestsChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'In',
@@ -588,7 +588,7 @@ const fetchInstanceRequestsChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchInstanceUsersChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Users',
@@ -603,7 +603,7 @@ const fetchInstanceUsersChart = async (total: boolean): Promise<typeof chartData
 };
 
 const fetchInstanceNotesChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Notes',
@@ -618,7 +618,7 @@ const fetchInstanceNotesChart = async (total: boolean): Promise<typeof chartData
 };
 
 const fetchInstanceFfChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Following',
@@ -641,7 +641,7 @@ const fetchInstanceFfChart = async (total: boolean): Promise<typeof chartData> =
 };
 
 const fetchInstanceDriveUsageChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
 	return {
 		bytes: true,
 		series: [{
@@ -657,7 +657,7 @@ const fetchInstanceDriveUsageChart = async (total: boolean): Promise<typeof char
 };
 
 const fetchInstanceDriveFilesChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Drive files',
@@ -672,7 +672,7 @@ const fetchInstanceDriveFilesChart = async (total: boolean): Promise<typeof char
 };
 
 const fetchPerUserNotesChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/user/notes', { userId: props.args.user.id, limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/user/notes', { userId: props.args.user.id, limit: props.limit, span: props.span });
 	return {
 		series: [...(props.args.withoutAll ? [] : [{
 			name: 'All',
@@ -704,7 +704,7 @@ const fetchPerUserNotesChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchPerUserPvChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/user/pv', { userId: props.args.user.id, limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/user/pv', { userId: props.args.user.id, limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Unique PV (user)',
@@ -731,7 +731,7 @@ const fetchPerUserPvChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchPerUserFollowingChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/user/following', { userId: props.args.user.id, limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/user/following', { userId: props.args.user.id, limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Local',
@@ -746,7 +746,7 @@ const fetchPerUserFollowingChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchPerUserFollowersChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/user/following', { userId: props.args.user.id, limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/user/following', { userId: props.args.user.id, limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Local',
@@ -761,7 +761,7 @@ const fetchPerUserFollowersChart = async (): Promise<typeof chartData> => {
 };
 
 const fetchPerUserDriveChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/user/drive', { userId: props.args.user.id, limit: props.limit, span: props.span });
+	const raw = await misskeyApiGet('charts/user/drive', { userId: props.args.user.id, limit: props.limit, span: props.span });
 	return {
 		series: [{
 			name: 'Inc',
diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index b0c14d1f0b..0d02aa5cb7 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -35,6 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, defineAsyncComponent, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { defaultStore } from '@/store.js';
 import { claimAchievement } from '@/scripts/achievements.js';
@@ -144,7 +145,7 @@ function onDrop(ev: DragEvent) {
 	if (driveFile != null && driveFile !== '') {
 		const file = JSON.parse(driveFile);
 		emit('removeFile', file.id);
-		os.api('drive/files/update', {
+		misskeyApi('drive/files/update', {
 			fileId: file.id,
 			folderId: props.folder.id,
 		});
@@ -160,7 +161,7 @@ function onDrop(ev: DragEvent) {
 		if (folder.id === props.folder.id) return;
 
 		emit('removeFolder', folder.id);
-		os.api('drive/folders/update', {
+		misskeyApi('drive/folders/update', {
 			folderId: folder.id,
 			parentId: props.folder.id,
 		}).then(() => {
@@ -214,7 +215,7 @@ function rename() {
 		default: props.folder.name,
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
-		os.api('drive/folders/update', {
+		misskeyApi('drive/folders/update', {
 			folderId: props.folder.id,
 			name: name,
 		});
@@ -222,7 +223,7 @@ function rename() {
 }
 
 function deleteFolder() {
-	os.api('drive/folders/delete', {
+	misskeyApi('drive/folders/delete', {
 		folderId: props.folder.id,
 	}).then(() => {
 		if (defaultStore.state.uploadFolder === props.folder.id) {
diff --git a/packages/frontend/src/components/MkDrive.navFolder.vue b/packages/frontend/src/components/MkDrive.navFolder.vue
index 59458ad568..f66125e3d3 100644
--- a/packages/frontend/src/components/MkDrive.navFolder.vue
+++ b/packages/frontend/src/components/MkDrive.navFolder.vue
@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
@@ -112,7 +112,7 @@ function onDrop(ev: DragEvent) {
 	if (driveFile != null && driveFile !== '') {
 		const file = JSON.parse(driveFile);
 		emit('removeFile', file.id);
-		os.api('drive/files/update', {
+		misskeyApi('drive/files/update', {
 			fileId: file.id,
 			folderId: props.folder ? props.folder.id : null,
 		});
@@ -126,7 +126,7 @@ function onDrop(ev: DragEvent) {
 		// 移動先が自分自身ならreject
 		if (props.folder && folder.id === props.folder.id) return;
 		emit('removeFolder', folder.id);
-		os.api('drive/folders/update', {
+		misskeyApi('drive/folders/update', {
 			folderId: folder.id,
 			parentId: props.folder ? props.folder.id : null,
 		});
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 8dff73d994..dbf98cd622 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -102,6 +102,7 @@ import XNavFolder from '@/components/MkDrive.navFolder.vue';
 import XFolder from '@/components/MkDrive.folder.vue';
 import XFile from '@/components/MkDrive.file.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useStream } from '@/stream.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
@@ -254,7 +255,7 @@ function onDrop(ev: DragEvent): any {
 		const file = JSON.parse(driveFile);
 		if (files.value.some(f => f.id === file.id)) return;
 		removeFile(file.id);
-		os.api('drive/files/update', {
+		misskeyApi('drive/files/update', {
 			fileId: file.id,
 			folderId: folder.value ? folder.value.id : null,
 		});
@@ -270,7 +271,7 @@ function onDrop(ev: DragEvent): any {
 		if (folder.value && droppedFolder.id === folder.value.id) return false;
 		if (folders.value.some(f => f.id === droppedFolder.id)) return false;
 		removeFolder(droppedFolder.id);
-		os.api('drive/folders/update', {
+		misskeyApi('drive/folders/update', {
 			folderId: droppedFolder.id,
 			parentId: folder.value ? folder.value.id : null,
 		}).then(() => {
@@ -307,7 +308,7 @@ function urlUpload() {
 		placeholder: i18n.ts.uploadFromUrlDescription,
 	}).then(({ canceled, result: url }) => {
 		if (canceled || !url) return;
-		os.api('drive/files/upload-from-url', {
+		misskeyApi('drive/files/upload-from-url', {
 			url: url,
 			folderId: folder.value ? folder.value.id : undefined,
 		});
@@ -325,7 +326,7 @@ function createFolder() {
 		placeholder: i18n.ts.folderName,
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
-		os.api('drive/folders/create', {
+		misskeyApi('drive/folders/create', {
 			name: name,
 			parentId: folder.value ? folder.value.id : undefined,
 		}).then(createdFolder => {
@@ -341,7 +342,7 @@ function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
 		default: folderToRename.name,
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
-		os.api('drive/folders/update', {
+		misskeyApi('drive/folders/update', {
 			folderId: folderToRename.id,
 			name: name,
 		}).then(updatedFolder => {
@@ -352,7 +353,7 @@ function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
 }
 
 function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
-	os.api('drive/folders/delete', {
+	misskeyApi('drive/folders/delete', {
 		folderId: folderToDelete.id,
 	}).then(() => {
 		// 削除時に親フォルダに移動
@@ -436,7 +437,7 @@ function move(target?: Misskey.entities.DriveFolder) {
 
 	fetching.value = true;
 
-	os.api('drive/folders/show', {
+	misskeyApi('drive/folders/show', {
 		folderId: target,
 	}).then(folderToMove => {
 		folder.value = folderToMove;
@@ -535,7 +536,7 @@ async function fetch() {
 	const foldersMax = 30;
 	const filesMax = 30;
 
-	const foldersPromise = os.api('drive/folders', {
+	const foldersPromise = misskeyApi('drive/folders', {
 		folderId: folder.value ? folder.value.id : null,
 		limit: foldersMax + 1,
 	}).then(fetchedFolders => {
@@ -546,7 +547,7 @@ async function fetch() {
 		return fetchedFolders;
 	});
 
-	const filesPromise = os.api('drive/files', {
+	const filesPromise = misskeyApi('drive/files', {
 		folderId: folder.value ? folder.value.id : null,
 		type: props.type,
 		limit: filesMax + 1,
@@ -571,7 +572,7 @@ function fetchMoreFolders() {
 
 	const max = 30;
 
-	os.api('drive/folders', {
+	misskeyApi('drive/folders', {
 		folderId: folder.value ? folder.value.id : null,
 		type: props.type,
 		untilId: folders.value.at(-1)?.id,
@@ -594,7 +595,7 @@ function fetchMoreFiles() {
 	const max = 30;
 
 	// ファイル一覧取得
-	os.api('drive/files', {
+	misskeyApi('drive/files', {
 		folderId: folder.value ? folder.value.id : null,
 		type: props.type,
 		untilId: files.value.at(-1)?.id,
diff --git a/packages/frontend/src/components/MkFeaturedPhotos.vue b/packages/frontend/src/components/MkFeaturedPhotos.vue
index 6d1bad7433..8a23d7d4bf 100644
--- a/packages/frontend/src/components/MkFeaturedPhotos.vue
+++ b/packages/frontend/src/components/MkFeaturedPhotos.vue
@@ -10,11 +10,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
 const meta = ref<Misskey.entities.MetaResponse>();
 
-os.api('meta', { detail: true }).then(gotMeta => {
+misskeyApi('meta', { detail: true }).then(gotMeta => {
 	meta.value = gotMeta;
 });
 </script>
diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue
index eb5c54de6b..78c4fb3cd2 100644
--- a/packages/frontend/src/components/MkFollowButton.vue
+++ b/packages/frontend/src/components/MkFollowButton.vue
@@ -38,11 +38,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { onBeforeUnmount, onMounted, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
 import { claimAchievement } from '@/scripts/achievements.js';
 import { $i } from '@/account.js';
-import { defaultStore } from "@/store.js";
+import { defaultStore } from '@/store.js';
 
 const props = withDefaults(defineProps<{
 	user: Misskey.entities.UserDetailed,
@@ -63,7 +64,7 @@ const wait = ref(false);
 const connection = useStream().useChannel('main');
 
 if (props.user.isFollowing == null) {
-	os.api('users/show', {
+	misskeyApi('users/show', {
 		userId: props.user.id,
 	})
 		.then(onFollowChange);
@@ -88,17 +89,17 @@ async function onClick() {
 
 			if (canceled) return;
 
-			await os.api('following/delete', {
+			await misskeyApi('following/delete', {
 				userId: props.user.id,
 			});
 		} else {
 			if (hasPendingFollowRequestFromYou.value) {
-				await os.api('following/requests/cancel', {
+				await misskeyApi('following/requests/cancel', {
 					userId: props.user.id,
 				});
 				hasPendingFollowRequestFromYou.value = false;
 			} else {
-				await os.api('following/create', {
+				await misskeyApi('following/create', {
 					userId: props.user.id,
 					withReplies: defaultStore.state.defaultWithReplies,
 				});
diff --git a/packages/frontend/src/components/MkHeatmap.vue b/packages/frontend/src/components/MkHeatmap.vue
index a57e6c9292..f47b680f83 100644
--- a/packages/frontend/src/components/MkHeatmap.vue
+++ b/packages/frontend/src/components/MkHeatmap.vue
@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, nextTick, watch, shallowRef, ref } from 'vue';
 import { Chart } from 'chart.js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore } from '@/store.js';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
 import { alpha } from '@/scripts/color.js';
@@ -72,19 +72,19 @@ async function renderChart() {
 	let values;
 
 	if (props.src === 'active-users') {
-		const raw = await os.api('charts/active-users', { limit: chartLimit, span: 'day' });
+		const raw = await misskeyApi('charts/active-users', { limit: chartLimit, span: 'day' });
 		values = raw.readWrite;
 	} else if (props.src === 'notes') {
-		const raw = await os.api('charts/notes', { limit: chartLimit, span: 'day' });
+		const raw = await misskeyApi('charts/notes', { limit: chartLimit, span: 'day' });
 		values = raw.local.inc;
 	} else if (props.src === 'ap-requests-inbox-received') {
-		const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
+		const raw = await misskeyApi('charts/ap-request', { limit: chartLimit, span: 'day' });
 		values = raw.inboxReceived;
 	} else if (props.src === 'ap-requests-deliver-succeeded') {
-		const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
+		const raw = await misskeyApi('charts/ap-request', { limit: chartLimit, span: 'day' });
 		values = raw.deliverSucceeded;
 	} else if (props.src === 'ap-requests-deliver-failed') {
-		const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
+		const raw = await misskeyApi('charts/ap-request', { limit: chartLimit, span: 'day' });
 		values = raw.deliverFailed;
 	}
 
diff --git a/packages/frontend/src/components/MkInstanceCardMini.vue b/packages/frontend/src/components/MkInstanceCardMini.vue
index 8a63e0cced..ac9f673556 100644
--- a/packages/frontend/src/components/MkInstanceCardMini.vue
+++ b/packages/frontend/src/components/MkInstanceCardMini.vue
@@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os.js';
+import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
 
 const props = defineProps<{
@@ -27,7 +27,7 @@ const props = defineProps<{
 
 const chartValues = ref<number[] | null>(null);
 
-os.apiGet('charts/instance', { host: props.instance.host, limit: 16 + 1, span: 'day' }).then(res => {
+misskeyApiGet('charts/instance', { host: props.instance.host, limit: 16 + 1, span: 'day' }).then(res => {
 	// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
 	res['requests.received'].splice(0, 1);
 	chartValues.value = res['requests.received'];
diff --git a/packages/frontend/src/components/MkInstanceStats.vue b/packages/frontend/src/components/MkInstanceStats.vue
index 7b763ad385..1576089657 100644
--- a/packages/frontend/src/components/MkInstanceStats.vue
+++ b/packages/frontend/src/components/MkInstanceStats.vue
@@ -90,6 +90,7 @@ import MkSelect from '@/components/MkSelect.vue';
 import MkChart from '@/components/MkChart.vue';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
 import * as os from '@/os.js';
+import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import MkHeatmap from '@/components/MkHeatmap.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
@@ -162,7 +163,7 @@ function createDoughnut(chartEl, tooltip, data) {
 }
 
 onMounted(() => {
-	os.apiGet('federation/stats', { limit: 30 }).then(fedStats => {
+	misskeyApiGet('federation/stats', { limit: 30 }).then(fedStats => {
 		createDoughnut(subDoughnutEl.value, externalTooltipHandler1, fedStats.topSubInstances.map(x => ({
 			name: x.host,
 			color: x.themeColor,
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 7d4207f0fb..3ec9c3c46a 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -170,6 +170,7 @@ import { checkWordMute } from '@/scripts/check-word-mute.js';
 import { userPage } from '@/filters/user.js';
 import * as os from '@/os.js';
 import * as sound from '@/scripts/sound.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore, noteViewInterruptors } from '@/store.js';
 import { reactionPicker } from '@/scripts/reaction-picker.js';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js';
@@ -277,7 +278,7 @@ const keymap = {
 };
 
 provide('react', (reaction: string) => {
-	os.api('notes/reactions/create', {
+	misskeyApi('notes/reactions/create', {
 		noteId: appearNote.value.id,
 		reaction: reaction,
 	});
@@ -298,7 +299,7 @@ if (props.mock) {
 
 if (!props.mock) {
 	useTooltip(renoteButton, async (showing) => {
-		const renotes = await os.api('notes/renotes', {
+		const renotes = await misskeyApi('notes/renotes', {
 			noteId: appearNote.value.id,
 			limit: 11,
 		});
@@ -350,7 +351,7 @@ function react(viaKeyboard = false): void {
 			return;
 		}
 
-		os.api('notes/reactions/create', {
+		misskeyApi('notes/reactions/create', {
 			noteId: appearNote.value.id,
 			reaction: '❤️',
 		});
@@ -371,7 +372,7 @@ function react(viaKeyboard = false): void {
 				return;
 			}
 
-			os.api('notes/reactions/create', {
+			misskeyApi('notes/reactions/create', {
 				noteId: appearNote.value.id,
 				reaction: reaction,
 			});
@@ -393,7 +394,7 @@ function undoReact(note): void {
 		return;
 	}
 
-	os.api('notes/reactions/delete', {
+	misskeyApi('notes/reactions/delete', {
 		noteId: note.id,
 	});
 }
@@ -453,7 +454,7 @@ function showRenoteMenu(viaKeyboard = false): void {
 			icon: 'ti ti-trash',
 			danger: true,
 			action: () => {
-				os.api('notes/delete', {
+				misskeyApi('notes/delete', {
 					noteId: note.value.id,
 				});
 				isDeleted.value = true;
@@ -499,7 +500,7 @@ function focusAfter() {
 }
 
 function readPromo() {
-	os.api('promo/read', {
+	misskeyApi('promo/read', {
 		noteId: appearNote.value.id,
 	});
 	isDeleted.value = true;
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 33a6786d03..6f0c0323cc 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -210,6 +210,7 @@ import { checkWordMute } from '@/scripts/check-word-mute.js';
 import { userPage } from '@/filters/user.js';
 import { notePage } from '@/filters/note.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import * as sound from '@/scripts/sound.js';
 import { defaultStore, noteViewInterruptors } from '@/store.js';
 import { reactionPicker } from '@/scripts/reaction-picker.js';
@@ -292,7 +293,7 @@ const keymap = {
 };
 
 provide('react', (reaction: string) => {
-	os.api('notes/reactions/create', {
+	misskeyApi('notes/reactions/create', {
 		noteId: appearNote.value.id,
 		reaction: reaction,
 	});
@@ -326,7 +327,7 @@ useNoteCapture({
 });
 
 useTooltip(renoteButton, async (showing) => {
-	const renotes = await os.api('notes/renotes', {
+	const renotes = await misskeyApi('notes/renotes', {
 		noteId: appearNote.value.id,
 		limit: 11,
 	});
@@ -371,7 +372,7 @@ function react(viaKeyboard = false): void {
 	if (appearNote.value.reactionAcceptance === 'likeOnly') {
 		sound.play('reaction');
 
-		os.api('notes/reactions/create', {
+		misskeyApi('notes/reactions/create', {
 			noteId: appearNote.value.id,
 			reaction: '❤️',
 		});
@@ -387,7 +388,7 @@ function react(viaKeyboard = false): void {
 		reactionPicker.show(reactButton.value, reaction => {
 			sound.play('reaction');
 
-			os.api('notes/reactions/create', {
+			misskeyApi('notes/reactions/create', {
 				noteId: appearNote.value.id,
 				reaction: reaction,
 			});
@@ -403,7 +404,7 @@ function react(viaKeyboard = false): void {
 function undoReact(note): void {
 	const oldReaction = note.myReaction;
 	if (!oldReaction) return;
-	os.api('notes/reactions/delete', {
+	misskeyApi('notes/reactions/delete', {
 		noteId: note.id,
 	});
 }
@@ -446,7 +447,7 @@ function showRenoteMenu(viaKeyboard = false): void {
 		icon: 'ti ti-trash',
 		danger: true,
 		action: () => {
-			os.api('notes/delete', {
+			misskeyApi('notes/delete', {
 				noteId: note.value.id,
 			});
 			isDeleted.value = true;
@@ -468,7 +469,7 @@ const repliesLoaded = ref(false);
 
 function loadReplies() {
 	repliesLoaded.value = true;
-	os.api('notes/children', {
+	misskeyApi('notes/children', {
 		noteId: appearNote.value.id,
 		limit: 30,
 	}).then(res => {
@@ -480,7 +481,7 @@ const conversationLoaded = ref(false);
 
 function loadConversation() {
 	conversationLoaded.value = true;
-	os.api('notes/conversation', {
+	misskeyApi('notes/conversation', {
 		noteId: appearNote.value.replyId,
 	}).then(res => {
 		conversation.value = res.reverse();
diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue
index 40362a955a..c59d568dc2 100644
--- a/packages/frontend/src/components/MkNoteSub.vue
+++ b/packages/frontend/src/components/MkNoteSub.vue
@@ -46,7 +46,7 @@ import MkNoteHeader from '@/components/MkNoteHeader.vue';
 import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
 import MkCwButton from '@/components/MkCwButton.vue';
 import { notePage } from '@/filters/note.js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
 import { userPage } from '@/filters/user.js';
@@ -68,7 +68,7 @@ const showContent = ref(false);
 const replies = ref<Misskey.entities.Note[]>([]);
 
 if (props.detail) {
-	os.api('notes/children', {
+	misskeyApi('notes/children', {
 		noteId: props.note.id,
 		limit: 5,
 	}).then(res => {
diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index da7eb36d90..ce8b054b39 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -145,7 +145,7 @@ import { getNoteSummary } from '@/scripts/get-note-summary.js';
 import { notePage } from '@/filters/note.js';
 import { userPage } from '@/filters/user.js';
 import { i18n } from '@/i18n.js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { $i } from '@/account.js';
 import { infoImageUrl } from '@/instance.js';
 
@@ -162,12 +162,12 @@ const followRequestDone = ref(false);
 
 const acceptFollowRequest = () => {
 	followRequestDone.value = true;
-	os.api('following/requests/accept', { userId: props.notification.user.id });
+	misskeyApi('following/requests/accept', { userId: props.notification.user.id });
 };
 
 const rejectFollowRequest = () => {
 	followRequestDone.value = true;
-	os.api('following/requests/reject', { userId: props.notification.user.id });
+	misskeyApi('following/requests/reject', { userId: props.notification.user.id });
 };
 </script>
 
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index bdd96238d3..f5b238046a 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -46,6 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, ref, shallowRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottomVisible } from '@/scripts/scroll.js';
 import { useDocumentVisibility } from '@/scripts/use-document-visibility.js';
 import { defaultStore } from '@/store.js';
@@ -203,7 +204,7 @@ async function init(): Promise<void> {
 	queue.value = new Map();
 	fetching.value = true;
 	const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
-	await os.api(props.pagination.endpoint, {
+	await misskeyApi(props.pagination.endpoint, {
 		...params,
 		limit: props.pagination.limit ?? 10,
 		allowPartial: true,
@@ -239,7 +240,7 @@ const fetchMore = async (): Promise<void> => {
 	if (!more.value || fetching.value || moreFetching.value || items.value.size === 0) return;
 	moreFetching.value = true;
 	const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
-	await os.api(props.pagination.endpoint, {
+	await misskeyApi(props.pagination.endpoint, {
 		...params,
 		limit: SECOND_FETCH_LIMIT,
 		...(props.pagination.offsetMode ? {
@@ -303,7 +304,7 @@ const fetchMoreAhead = async (): Promise<void> => {
 	if (!more.value || fetching.value || moreFetching.value || items.value.size === 0) return;
 	moreFetching.value = true;
 	const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
-	await os.api(props.pagination.endpoint, {
+	await misskeyApi(props.pagination.endpoint, {
 		...params,
 		limit: SECOND_FETCH_LIMIT,
 		...(props.pagination.offsetMode ? {
diff --git a/packages/frontend/src/components/MkPoll.vue b/packages/frontend/src/components/MkPoll.vue
index 682f8e3060..a318799ade 100644
--- a/packages/frontend/src/components/MkPoll.vue
+++ b/packages/frontend/src/components/MkPoll.vue
@@ -32,6 +32,7 @@ import * as Misskey from 'misskey-js';
 import { sum } from '@/scripts/array.js';
 import { pleaseLogin } from '@/scripts/please-login.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { useInterval } from '@/scripts/use-interval.js';
 
@@ -83,7 +84,7 @@ const vote = async (id) => {
 	});
 	if (canceled) return;
 
-	await os.api('notes/polls/vote', {
+	await misskeyApi('notes/polls/vote', {
 		noteId: props.note.id,
 		choice: id,
 	});
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index b86f50eac6..8c6fba6637 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -115,6 +115,7 @@ import { extractMentions } from '@/scripts/extract-mentions.js';
 import { formatTimeString } from '@/scripts/format-time-string.js';
 import { Autocomplete } from '@/scripts/autocomplete.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { selectFiles } from '@/scripts/select-file.js';
 import { defaultStore, notePostInterruptors, postFormActions } from '@/store.js';
 import MkInfo from '@/components/MkInfo.vue';
@@ -328,7 +329,7 @@ if (props.reply && ['home', 'followers', 'specified'].includes(props.reply.visib
 
 	if (visibility.value === 'specified') {
 		if (props.reply.visibleUserIds) {
-			os.api('users/show', {
+			misskeyApi('users/show', {
 				userIds: props.reply.visibleUserIds.filter(uid => uid !== $i.id && uid !== props.reply.userId),
 			}).then(users => {
 				users.forEach(pushVisibleUser);
@@ -336,7 +337,7 @@ if (props.reply && ['home', 'followers', 'specified'].includes(props.reply.visib
 		}
 
 		if (props.reply.userId !== $i.id) {
-			os.api('users/show', { userId: props.reply.userId }).then(user => {
+			misskeyApi('users/show', { userId: props.reply.userId }).then(user => {
 				pushVisibleUser(user);
 			});
 		}
@@ -383,7 +384,7 @@ function addMissingMention() {
 
 	for (const x of extractMentions(ast)) {
 		if (!visibleUsers.value.some(u => (u.username === x.username) && (u.host === x.host))) {
-			os.api('users/show', { username: x.username, host: x.host }).then(user => {
+			misskeyApi('users/show', { username: x.username, host: x.host }).then(user => {
 				visibleUsers.value.push(user);
 			});
 		}
@@ -784,7 +785,7 @@ async function post(ev?: MouseEvent) {
 	}
 
 	posting.value = true;
-	os.api('notes/create', postData, token).then(() => {
+	misskeyApi('notes/create', postData, token).then(() => {
 		if (props.freezeAfterPosted) {
 			posted.value = true;
 		} else {
diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue
index 28a09c571f..31dc48194e 100644
--- a/packages/frontend/src/components/MkPostFormAttaches.vue
+++ b/packages/frontend/src/components/MkPostFormAttaches.vue
@@ -24,6 +24,7 @@ import { defineAsyncComponent, inject } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 
 const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
@@ -61,7 +62,7 @@ function toggleSensitive(file) {
 		return;
 	}
 
-	os.api('drive/files/update', {
+	misskeyApi('drive/files/update', {
 		fileId: file.id,
 		isSensitive: !file.isSensitive,
 	}).then(() => {
@@ -78,7 +79,7 @@ async function rename(file) {
 		allowEmpty: false,
 	});
 	if (canceled) return;
-	os.api('drive/files/update', {
+	misskeyApi('drive/files/update', {
 		fileId: file.id,
 		name: result,
 	}).then(() => {
@@ -96,7 +97,7 @@ async function describe(file) {
 	}, {
 		done: caption => {
 			let comment = caption.length === 0 ? null : caption;
-			os.api('drive/files/update', {
+			misskeyApi('drive/files/update', {
 				fileId: file.id,
 				comment: comment,
 			}).then(() => {
diff --git a/packages/frontend/src/components/MkPushNotificationAllowButton.vue b/packages/frontend/src/components/MkPushNotificationAllowButton.vue
index ebbd5e6cdc..1b8263ae67 100644
--- a/packages/frontend/src/components/MkPushNotificationAllowButton.vue
+++ b/packages/frontend/src/components/MkPushNotificationAllowButton.vue
@@ -45,7 +45,8 @@ import { ref } from 'vue';
 import { $i, getAccounts } from '@/account.js';
 import MkButton from '@/components/MkButton.vue';
 import { instance } from '@/instance.js';
-import { api, apiWithDialog, promiseDialog } from '@/os.js';
+import { apiWithDialog, promiseDialog } from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 
 defineProps<{
@@ -82,7 +83,7 @@ function subscribe() {
 			pushSubscription.value = subscription;
 
 			// Register
-			pushRegistrationInServer.value = await api('sw/register', {
+			pushRegistrationInServer.value = await misskeyApi('sw/register', {
 				endpoint: subscription.endpoint,
 				auth: encode(subscription.getKey('auth')),
 				publickey: encode(subscription.getKey('p256dh')),
@@ -159,7 +160,7 @@ if (navigator.serviceWorker == null) {
 			supported.value = true;
 
 			if (pushSubscription.value) {
-				const res = await api('sw/show-registration', {
+				const res = await misskeyApi('sw/show-registration', {
 					endpoint: pushSubscription.value.endpoint,
 				});
 
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index 250b7b96d5..2e75f444da 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -22,6 +22,7 @@ import * as Misskey from 'misskey-js';
 import XDetails from '@/components/MkReactionsViewer.details.vue';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import * as os from '@/os.js';
+import { misskeyApi, misskeyApiGet } from '@/scripts/misskey-api.js';
 import { useTooltip } from '@/scripts/use-tooltip.js';
 import { $i } from '@/account.js';
 import MkReactionEffect from '@/components/MkReactionEffect.vue';
@@ -69,11 +70,11 @@ async function toggleReaction() {
 			return;
 		}
 
-		os.api('notes/reactions/delete', {
+		misskeyApi('notes/reactions/delete', {
 			noteId: props.note.id,
 		}).then(() => {
 			if (oldReaction !== props.reaction) {
-				os.api('notes/reactions/create', {
+				misskeyApi('notes/reactions/create', {
 					noteId: props.note.id,
 					reaction: props.reaction,
 				});
@@ -87,7 +88,7 @@ async function toggleReaction() {
 			return;
 		}
 
-		os.api('notes/reactions/create', {
+		misskeyApi('notes/reactions/create', {
 			noteId: props.note.id,
 			reaction: props.reaction,
 		});
@@ -117,7 +118,7 @@ onMounted(() => {
 
 if (!mock) {
 	useTooltip(buttonEl, async (showing) => {
-		const reactions = await os.apiGet('notes/reactions', {
+		const reactions = await misskeyApiGet('notes/reactions', {
 			noteId: props.note.id,
 			type: props.reaction,
 			limit: 10,
diff --git a/packages/frontend/src/components/MkRetentionHeatmap.vue b/packages/frontend/src/components/MkRetentionHeatmap.vue
index e69aa1be80..ef497e0e82 100644
--- a/packages/frontend/src/components/MkRetentionHeatmap.vue
+++ b/packages/frontend/src/components/MkRetentionHeatmap.vue
@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, nextTick, shallowRef, ref } from 'vue';
 import { Chart } from 'chart.js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore } from '@/store.js';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
 import { alpha } from '@/scripts/color.js';
@@ -43,7 +43,7 @@ async function renderChart() {
 
 	const maxDays = wide ? 10 : narrow ? 5 : 7;
 
-	let raw = await os.api('retention', { });
+	let raw = await misskeyApi('retention', { });
 
 	raw = raw.slice(0, maxDays + 1);
 
diff --git a/packages/frontend/src/components/MkRetentionLineChart.vue b/packages/frontend/src/components/MkRetentionLineChart.vue
index e2682ec06b..eb05878ae8 100644
--- a/packages/frontend/src/components/MkRetentionLineChart.vue
+++ b/packages/frontend/src/components/MkRetentionLineChart.vue
@@ -16,7 +16,7 @@ import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
 import { chartVLine } from '@/scripts/chart-vline.js';
 import { alpha } from '@/scripts/color.js';
 import { initChart } from '@/scripts/init-chart.js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
 initChart();
 
@@ -40,7 +40,7 @@ const getDate = (ymd: string) => {
 };
 
 onMounted(async () => {
-	let raw = await os.api('retention', { });
+	let raw = await misskeyApi('retention', { });
 
 	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
 
diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index 2fc2c9ec5e..1c06cff9aa 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -59,6 +59,7 @@ import MkInput from '@/components/MkInput.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import { host as configHost } from '@/config.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { login } from '@/account.js';
 import { i18n } from '@/i18n.js';
 
@@ -95,7 +96,7 @@ const props = defineProps({
 });
 
 function onUsernameChange(): void {
-	os.api('users/show', {
+	misskeyApi('users/show', {
 		username: username.value,
 	}).then(userResponse => {
 		user.value = userResponse;
@@ -120,7 +121,7 @@ async function queryKey(): Promise<void> {
 			credentialRequest.value = null;
 			queryingKey.value = false;
 			signing.value = true;
-			return os.api('signin', {
+			return misskeyApi('signin', {
 				username: username.value,
 				password: password.value,
 				credential: credential.toJSON(),
@@ -142,7 +143,7 @@ function onSubmit(): void {
 	signing.value = true;
 	if (!totpLogin.value && user.value && user.value.twoFactorEnabled) {
 		if (webAuthnSupported() && user.value.securityKeys) {
-			os.api('signin', {
+			misskeyApi('signin', {
 				username: username.value,
 				password: password.value,
 			}).then(res => {
@@ -159,7 +160,7 @@ function onSubmit(): void {
 			signing.value = false;
 		}
 	} else {
-		os.api('signin', {
+		misskeyApi('signin', {
 			username: username.value,
 			password: password.value,
 			token: user.value?.twoFactorEnabled ? token.value : undefined,
diff --git a/packages/frontend/src/components/MkSignupDialog.form.vue b/packages/frontend/src/components/MkSignupDialog.form.vue
index 44cfb6f0fa..c71330d62c 100644
--- a/packages/frontend/src/components/MkSignupDialog.form.vue
+++ b/packages/frontend/src/components/MkSignupDialog.form.vue
@@ -84,6 +84,7 @@ import MkInput from './MkInput.vue';
 import MkCaptcha, { type Captcha } from '@/components/MkCaptcha.vue';
 import * as config from '@/config.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { login } from '@/account.js';
 import { instance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
@@ -180,7 +181,7 @@ function onChangeUsername(): void {
 	usernameState.value = 'wait';
 	usernameAbortController.value = new AbortController();
 
-	os.api('username/available', {
+	misskeyApi('username/available', {
 		username: username.value,
 	}, undefined, usernameAbortController.value.signal).then(result => {
 		usernameState.value = result.available ? 'ok' : 'unavailable';
@@ -203,7 +204,7 @@ function onChangeEmail(): void {
 	emailState.value = 'wait';
 	emailAbortController.value = new AbortController();
 
-	os.api('email-address/available', {
+	misskeyApi('email-address/available', {
 		emailAddress: email.value,
 	}, undefined, emailAbortController.value.signal).then(result => {
 		emailState.value = result.available ? 'ok' :
@@ -245,7 +246,7 @@ async function onSubmit(): Promise<void> {
 	submitting.value = true;
 
 	try {
-		await os.api('signup', {
+		await misskeyApi('signup', {
 			username: username.value,
 			password: password.value,
 			emailAddress: email.value,
@@ -262,7 +263,7 @@ async function onSubmit(): Promise<void> {
 			});
 			emit('signupEmailPending');
 		} else {
-			const res = await os.api('signin', {
+			const res = await misskeyApi('signin', {
 				username: username.value,
 				password: password.value,
 			});
diff --git a/packages/frontend/src/components/MkUserAnnouncementEditDialog.vue b/packages/frontend/src/components/MkUserAnnouncementEditDialog.vue
index b5489d8e59..af094a8e8c 100644
--- a/packages/frontend/src/components/MkUserAnnouncementEditDialog.vue
+++ b/packages/frontend/src/components/MkUserAnnouncementEditDialog.vue
@@ -56,6 +56,7 @@ import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import MkTextarea from '@/components/MkTextarea.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
@@ -121,7 +122,7 @@ async function del() {
 	});
 	if (canceled) return;
 
-	os.api('admin/announcements/delete', {
+	misskeyApi('admin/announcements/delete', {
 		id: props.announcement.id,
 	}).then(() => {
 		emit('done', {
diff --git a/packages/frontend/src/components/MkUserCardMini.vue b/packages/frontend/src/components/MkUserCardMini.vue
index 75288aac02..9ec5c7b5c7 100644
--- a/packages/frontend/src/components/MkUserCardMini.vue
+++ b/packages/frontend/src/components/MkUserCardMini.vue
@@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import * as Misskey from 'misskey-js';
 import { onMounted, ref } from 'vue';
 import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os.js';
+import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import { acct } from '@/filters/user.js';
 
 const props = withDefaults(defineProps<{
@@ -32,7 +32,7 @@ const chartValues = ref<number[] | null>(null);
 
 onMounted(() => {
 	if (props.withChart) {
-		os.apiGet('charts/user/notes', { userId: props.user.id, limit: 16 + 1, span: 'day' }).then(res => {
+		misskeyApiGet('charts/user/notes', { userId: props.user.id, limit: 16 + 1, span: 'day' }).then(res => {
 			// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
 			res.inc.splice(0, 1);
 			chartValues.value = res.inc;
diff --git a/packages/frontend/src/components/MkUserPopup.vue b/packages/frontend/src/components/MkUserPopup.vue
index df8252fb14..04244ac308 100644
--- a/packages/frontend/src/components/MkUserPopup.vue
+++ b/packages/frontend/src/components/MkUserPopup.vue
@@ -60,6 +60,7 @@ import * as Misskey from 'misskey-js';
 import MkFollowButton from '@/components/MkFollowButton.vue';
 import { userPage } from '@/filters/user.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { getUserMenu } from '@/scripts/get-user-menu.js';
 import number from '@/filters/number.js';
 import { i18n } from '@/i18n.js';
@@ -97,7 +98,7 @@ onMounted(() => {
 			Misskey.acct.parse(props.q.substring(1)) :
 			{ userId: props.q };
 
-		os.api('users/show', query).then(res => {
+		misskeyApi('users/show', query).then(res => {
 			if (!props.showing) return;
 			user.value = res;
 		});
diff --git a/packages/frontend/src/components/MkUserSelectDialog.vue b/packages/frontend/src/components/MkUserSelectDialog.vue
index 9d41147bd2..f4aa06950d 100644
--- a/packages/frontend/src/components/MkUserSelectDialog.vue
+++ b/packages/frontend/src/components/MkUserSelectDialog.vue
@@ -62,7 +62,7 @@ import * as Misskey from 'misskey-js';
 import MkInput from '@/components/MkInput.vue';
 import FormSplit from '@/components/form/split.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
@@ -90,7 +90,7 @@ const search = () => {
 		users.value = [];
 		return;
 	}
-	os.api('users/search-by-username-and-host', {
+	misskeyApi('users/search-by-username-and-host', {
 		username: username.value,
 		host: host.value,
 		limit: 10,
@@ -118,7 +118,7 @@ const cancel = () => {
 };
 
 onMounted(() => {
-	os.api('users/show', {
+	misskeyApi('users/show', {
 		userIds: defaultStore.state.recentlyUsedUsers,
 	}).then(users => {
 		if (props.includeSelf && users.find(x => $i ? x.id === $i.id : true) == null) {
diff --git a/packages/frontend/src/components/MkUserSetupDialog.Privacy.vue b/packages/frontend/src/components/MkUserSetupDialog.Privacy.vue
index ecdfbb4969..c933a14621 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.Privacy.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.Privacy.vue
@@ -49,7 +49,7 @@ import { i18n } from '@/i18n.js';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkFolder from '@/components/MkFolder.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
 const isLocked = ref(false);
 const hideOnlineStatus = ref(false);
@@ -57,7 +57,7 @@ const noCrawle = ref(false);
 const preventAiLearning = ref(true);
 
 watch([isLocked, hideOnlineStatus, noCrawle, preventAiLearning], () => {
-	os.api('i/update', {
+	misskeyApi('i/update', {
 		isLocked: !!isLocked.value,
 		hideOnlineStatus: !!hideOnlineStatus.value,
 		noCrawle: !!noCrawle.value,
diff --git a/packages/frontend/src/components/MkUserSetupDialog.User.vue b/packages/frontend/src/components/MkUserSetupDialog.User.vue
index 49476c7364..fe9b8930a1 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.User.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.User.vue
@@ -29,7 +29,7 @@ import * as Misskey from 'misskey-js';
 import { ref } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
 const props = defineProps<{
 	user: Misskey.entities.UserDetailed;
@@ -39,7 +39,7 @@ const isFollowing = ref(false);
 
 async function follow() {
 	isFollowing.value = true;
-	os.api('following/create', {
+	misskeyApi('following/create', {
 		userId: props.user.id,
 	});
 }
diff --git a/packages/frontend/src/components/MkVisitorDashboard.ActiveUsersChart.vue b/packages/frontend/src/components/MkVisitorDashboard.ActiveUsersChart.vue
index 746ed3e0de..e45d594f12 100644
--- a/packages/frontend/src/components/MkVisitorDashboard.ActiveUsersChart.vue
+++ b/packages/frontend/src/components/MkVisitorDashboard.ActiveUsersChart.vue
@@ -17,7 +17,7 @@ import { onMounted, shallowRef, ref } from 'vue';
 import { Chart } from 'chart.js';
 import gradient from 'chartjs-plugin-gradient';
 import tinycolor from 'tinycolor2';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore } from '@/store.js';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
 import { chartVLine } from '@/scripts/chart-vline.js';
@@ -53,7 +53,7 @@ async function renderChart() {
 		}));
 	};
 
-	const raw = await os.api('charts/active-users', { limit: chartLimit, span: 'day' });
+	const raw = await misskeyApi('charts/active-users', { limit: chartLimit, span: 'day' });
 
 	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
 
diff --git a/packages/frontend/src/components/MkVisitorDashboard.vue b/packages/frontend/src/components/MkVisitorDashboard.vue
index 9ed08ee372..ac3d6cabd8 100644
--- a/packages/frontend/src/components/MkVisitorDashboard.vue
+++ b/packages/frontend/src/components/MkVisitorDashboard.vue
@@ -60,6 +60,7 @@ import MkTimeline from '@/components/MkTimeline.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import { instanceName } from '@/config.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import MkNumber from '@/components/MkNumber.vue';
@@ -68,11 +69,11 @@ import XActiveUsersChart from '@/components/MkVisitorDashboard.ActiveUsersChart.
 const meta = ref<Misskey.entities.MetaResponse | null>(null);
 const stats = ref<Misskey.entities.StatsResponse | null>(null);
 
-os.api('meta', { detail: true }).then(_meta => {
+misskeyApi('meta', { detail: true }).then(_meta => {
 	meta.value = _meta;
 });
 
-os.api('stats', {}).then((res) => {
+misskeyApi('stats', {}).then((res) => {
 	stats.value = res;
 });
 
diff --git a/packages/frontend/src/components/page/page.note.vue b/packages/frontend/src/components/page/page.note.vue
index d885ebb1d6..83fdf24deb 100644
--- a/packages/frontend/src/components/page/page.note.vue
+++ b/packages/frontend/src/components/page/page.note.vue
@@ -16,7 +16,7 @@ import * as Misskey from 'misskey-js';
 import { NoteBlock } from './block.type.js';
 import MkNote from '@/components/MkNote.vue';
 import MkNoteDetailed from '@/components/MkNoteDetailed.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
 const props = defineProps<{
 	block: NoteBlock,
@@ -26,7 +26,7 @@ const props = defineProps<{
 const note = ref<Misskey.entities.Note | null>(null);
 
 onMounted(() => {
-	os.api('notes/show', { noteId: props.block.note })
+	misskeyApi('notes/show', { noteId: props.block.note })
 		.then(result => {
 			note.value = result;
 		});
diff --git a/packages/frontend/src/custom-emojis.ts b/packages/frontend/src/custom-emojis.ts
index 6a48159f13..e4ce9cb9cd 100644
--- a/packages/frontend/src/custom-emojis.ts
+++ b/packages/frontend/src/custom-emojis.ts
@@ -5,7 +5,7 @@
 
 import { shallowRef, computed, markRaw, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import { api, apiGet } from '@/os.js';
+import { misskeyApi, misskeyApiGet } from '@/scripts/misskey-api.js';
 import { useStream } from '@/stream.js';
 import { get, set } from '@/scripts/idb-proxy.js';
 
@@ -52,11 +52,11 @@ export async function fetchCustomEmojis(force = false) {
 
 	let res;
 	if (force) {
-		res = await api('emojis', {});
+		res = await misskeyApi('emojis', {});
 	} else {
 		const lastFetchedAt = await get('lastEmojisFetchedAt');
 		if (lastFetchedAt && (now - lastFetchedAt) < 1000 * 60 * 60) return;
-		res = await apiGet('emojis', {});
+		res = await misskeyApiGet('emojis', {});
 	}
 
 	customEmojis.value = res.emojis;
diff --git a/packages/frontend/src/instance.ts b/packages/frontend/src/instance.ts
index b09264dabb..739e90101b 100644
--- a/packages/frontend/src/instance.ts
+++ b/packages/frontend/src/instance.ts
@@ -5,7 +5,7 @@
 
 import { computed, reactive } from 'vue';
 import * as Misskey from 'misskey-js';
-import { api } from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { DEFAULT_INFO_IMAGE_URL, DEFAULT_NOT_FOUND_IMAGE_URL, DEFAULT_SERVER_ERROR_IMAGE_URL } from '@/const.js';
 
@@ -26,7 +26,7 @@ export const infoImageUrl = computed(() => instance.infoImageUrl ?? DEFAULT_INFO
 export const notFoundImageUrl = computed(() => instance.notFoundImageUrl ?? DEFAULT_NOT_FOUND_IMAGE_URL);
 
 export async function fetchInstance() {
-	const meta = await api('meta', {
+	const meta = await misskeyApi('meta', {
 		detail: false,
 	});
 
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index b02f6aa640..a63d61bb8f 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -5,12 +5,11 @@
 
 // TODO: なんでもかんでもos.tsに突っ込むのやめたいのでよしなに分割する
 
-import { pendingApiRequestsCount, api, apiGet } from '@/scripts/api.js';
-export { pendingApiRequestsCount, api, apiGet };
 import { Component, markRaw, Ref, ref, defineAsyncComponent } from 'vue';
 import { EventEmitter } from 'eventemitter3';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import * as Misskey from 'misskey-js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import MkPostFormDialog from '@/components/MkPostFormDialog.vue';
 import MkWaitingDialog from '@/components/MkWaitingDialog.vue';
@@ -33,7 +32,7 @@ export const apiWithDialog = ((
 	data: Record<string, any> = {},
 	token?: string | null | undefined,
 ) => {
-	const promise = api(endpoint, data, token);
+	const promise = misskeyApi(endpoint, data, token);
 	promiseDialog(promise, null, async (err) => {
 		let title = null;
 		let text = err.message + '\n' + (err as any).id;
@@ -83,7 +82,7 @@ export const apiWithDialog = ((
 	});
 
 	return promise;
-}) as typeof api;
+}) as typeof misskeyApi;
 
 export function promiseDialog<T extends Promise<any>>(
 	promise: T,
@@ -621,7 +620,7 @@ export function checkExistence(fileData: ArrayBuffer): Promise<any> {
 		const data = new FormData();
 		data.append('md5', getMD5(fileData));
 
-		os.api('drive/files/find-by-hash', {
+		api('drive/files/find-by-hash', {
 			md5: getMD5(fileData)
 		}).then(resp => {
 			resolve(resp.length > 0 ? resp[0] : null);
diff --git a/packages/frontend/src/pages/_error_.vue b/packages/frontend/src/pages/_error_.vue
index 72a12e3c7b..10e8ccda06 100644
--- a/packages/frontend/src/pages/_error_.vue
+++ b/packages/frontend/src/pages/_error_.vue
@@ -29,7 +29,7 @@ import { ref, computed } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import { version } from '@/config.js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { unisonReload } from '@/scripts/unison-reload.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -46,7 +46,7 @@ const loaded = ref(false);
 const serverIsDead = ref(false);
 const meta = ref<Misskey.entities.MetaResponse | null>(null);
 
-os.api('meta', {
+misskeyApi('meta', {
 	detail: false,
 }).then(res => {
 	loaded.value = true;
diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index 44095348f6..f402b26ad8 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -114,7 +114,7 @@ import FormSplit from '@/components/form/split.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkInstanceStats from '@/components/MkInstanceStats.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import number from '@/filters/number.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -136,7 +136,7 @@ watch(tab, () => {
 	}
 });
 
-const initStats = () => os.api('stats', {
+const initStats = () => misskeyApi('stats', {
 }).then((res) => {
 	stats.value = res;
 });
diff --git a/packages/frontend/src/pages/admin-file.vue b/packages/frontend/src/pages/admin-file.vue
index 56b5e7d926..4a9c659a97 100644
--- a/packages/frontend/src/pages/admin-file.vue
+++ b/packages/frontend/src/pages/admin-file.vue
@@ -79,6 +79,7 @@ import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import bytes from '@/filters/bytes.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { iAmAdmin, iAmModerator } from '@/account.js';
@@ -93,8 +94,8 @@ const props = defineProps<{
 }>();
 
 async function fetch() {
-	file.value = await os.api('drive/files/show', { fileId: props.fileId });
-	info.value = await os.api('admin/drive/show-file', { fileId: props.fileId });
+	file.value = await misskeyApi('drive/files/show', { fileId: props.fileId });
+	info.value = await misskeyApi('admin/drive/show-file', { fileId: props.fileId });
 	isSensitive.value = file.value.isSensitive;
 }
 
@@ -113,7 +114,7 @@ async function del() {
 }
 
 async function toggleIsSensitive(v) {
-	await os.api('drive/files/update', { fileId: props.fileId, isSensitive: v });
+	await misskeyApi('drive/files/update', { fileId: props.fileId, isSensitive: v });
 	isSensitive.value = v;
 }
 
diff --git a/packages/frontend/src/pages/admin-user.vue b/packages/frontend/src/pages/admin-user.vue
index ce820e10e8..85417f0ecb 100644
--- a/packages/frontend/src/pages/admin-user.vue
+++ b/packages/frontend/src/pages/admin-user.vue
@@ -219,6 +219,7 @@ import FormSuspense from '@/components/form/suspense.vue';
 import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { url } from '@/config.js';
 import { acct } from '@/filters/user.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -262,11 +263,11 @@ const announcementsPagination = {
 const expandedRoles = ref([]);
 
 function createFetcher() {
-	return () => Promise.all([os.api('users/show', {
+	return () => Promise.all([misskeyApi('users/show', {
 		userId: props.userId,
-	}), os.api('admin/show-user', {
+	}), misskeyApi('admin/show-user', {
 		userId: props.userId,
-	}), iAmAdmin ? os.api('admin/get-user-ips', {
+	}), iAmAdmin ? misskeyApi('admin/get-user-ips', {
 		userId: props.userId,
 	}) : Promise.resolve(null)]).then(([_user, _info, _ips]) => {
 		user.value = _user;
@@ -278,7 +279,7 @@ function createFetcher() {
 		moderationNote.value = info.value.moderationNote;
 
 		watch(moderationNote, async () => {
-			await os.api('admin/update-user-note', { userId: user.value.id, text: moderationNote.value });
+			await misskeyApi('admin/update-user-note', { userId: user.value.id, text: moderationNote.value });
 			await refreshUser();
 		});
 	});
@@ -301,7 +302,7 @@ async function resetPassword() {
 	if (confirm.canceled) {
 		return;
 	} else {
-		const { password } = await os.api('admin/reset-password', {
+		const { password } = await misskeyApi('admin/reset-password', {
 			userId: user.value.id,
 		});
 		os.alert({
@@ -319,7 +320,7 @@ async function toggleSuspend(v) {
 	if (confirm.canceled) {
 		suspended.value = !v;
 	} else {
-		await os.api(v ? 'admin/suspend-user' : 'admin/unsuspend-user', { userId: user.value.id });
+		await misskeyApi(v ? 'admin/suspend-user' : 'admin/unsuspend-user', { userId: user.value.id });
 		await refreshUser();
 	}
 }
@@ -331,7 +332,7 @@ async function unsetUserAvatar() {
 	});
 	if (confirm.canceled) return;
 	const process = async () => {
-		await os.api('admin/unset-user-avatar', { userId: user.value.id });
+		await misskeyApi('admin/unset-user-avatar', { userId: user.value.id });
 		os.success();
 	};
 	await process().catch(err => {
@@ -350,7 +351,7 @@ async function unsetUserBanner() {
 	});
 	if (confirm.canceled) return;
 	const process = async () => {
-		await os.api('admin/unset-user-banner', { userId: user.value.id });
+		await misskeyApi('admin/unset-user-banner', { userId: user.value.id });
 		os.success();
 	};
 	await process().catch(err => {
@@ -369,7 +370,7 @@ async function deleteAllFiles() {
 	});
 	if (confirm.canceled) return;
 	const process = async () => {
-		await os.api('admin/delete-all-files-of-a-user', { userId: user.value.id });
+		await misskeyApi('admin/delete-all-files-of-a-user', { userId: user.value.id });
 		os.success();
 	};
 	await process().catch(err => {
@@ -406,7 +407,7 @@ async function deleteAccount() {
 }
 
 async function assignRole() {
-	const roles = await os.api('admin/roles/list');
+	const roles = await misskeyApi('admin/roles/list');
 
 	const { canceled, result: roleId } = await os.select({
 		title: i18n.ts._role.chooseRoleToAssign,
@@ -482,7 +483,7 @@ watch(() => props.userId, () => {
 });
 
 watch(user, () => {
-	os.api('ap/get', {
+	misskeyApi('ap/get', {
 		uri: user.value.uri ?? `${url}/users/${user.value.id}`,
 	}).then(res => {
 		ap.value = res;
diff --git a/packages/frontend/src/pages/admin/ads.vue b/packages/frontend/src/pages/admin/ads.vue
index 5884ac74b5..eb9aef0e48 100644
--- a/packages/frontend/src/pages/admin/ads.vue
+++ b/packages/frontend/src/pages/admin/ads.vue
@@ -96,6 +96,7 @@ import MkFolder from '@/components/MkFolder.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import FormSplit from '@/components/form/split.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
@@ -108,7 +109,7 @@ const daysOfWeek: string[] = [i18n.ts._weekday.sunday, i18n.ts._weekday.monday,
 const filterType = ref('all');
 let publishing: boolean | null = null;
 
-os.api('admin/ad/list', { publishing: publishing }).then(adsResponse => {
+misskeyApi('admin/ad/list', { publishing: publishing }).then(adsResponse => {
 	if (adsResponse != null) {
 		ads.value = adsResponse.map(r => {
 			const exdate = new Date(r.expiresAt);
@@ -174,7 +175,7 @@ function remove(ad) {
 
 function save(ad) {
 	if (ad.id == null) {
-		os.api('admin/ad/create', {
+		misskeyApi('admin/ad/create', {
 			...ad,
 			expiresAt: new Date(ad.expiresAt).getTime(),
 			startsAt: new Date(ad.startsAt).getTime(),
@@ -191,7 +192,7 @@ function save(ad) {
 			});
 		});
 	} else {
-		os.api('admin/ad/update', {
+		misskeyApi('admin/ad/update', {
 			...ad,
 			expiresAt: new Date(ad.expiresAt).getTime(),
 			startsAt: new Date(ad.startsAt).getTime(),
@@ -210,7 +211,7 @@ function save(ad) {
 }
 
 function more() {
-	os.api('admin/ad/list', { untilId: ads.value.reduce((acc, ad) => ad.id != null ? ad : acc).id, publishing: publishing }).then(adsResponse => {
+	misskeyApi('admin/ad/list', { untilId: ads.value.reduce((acc, ad) => ad.id != null ? ad : acc).id, publishing: publishing }).then(adsResponse => {
 		if (adsResponse == null) return;
 		ads.value = ads.value.concat(adsResponse.map(r => {
 			const exdate = new Date(r.expiresAt);
@@ -227,7 +228,7 @@ function more() {
 }
 
 function refresh() {
-	os.api('admin/ad/list', { publishing: publishing }).then(adsResponse => {
+	misskeyApi('admin/ad/list', { publishing: publishing }).then(adsResponse => {
 		if (adsResponse == null) return;
 		ads.value = adsResponse.map(r => {
 			const exdate = new Date(r.expiresAt);
diff --git a/packages/frontend/src/pages/admin/announcements.vue b/packages/frontend/src/pages/admin/announcements.vue
index e4bbe15955..f941d512b3 100644
--- a/packages/frontend/src/pages/admin/announcements.vue
+++ b/packages/frontend/src/pages/admin/announcements.vue
@@ -79,6 +79,7 @@ import MkSwitch from '@/components/MkSwitch.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkFolder from '@/components/MkFolder.vue';
@@ -86,7 +87,7 @@ import MkTextarea from '@/components/MkTextarea.vue';
 
 const announcements = ref<any[]>([]);
 
-os.api('admin/announcements/list').then(announcementResponse => {
+misskeyApi('admin/announcements/list').then(announcementResponse => {
 	announcements.value = announcementResponse;
 });
 
@@ -112,7 +113,7 @@ function del(announcement) {
 	}).then(({ canceled }) => {
 		if (canceled) return;
 		announcements.value = announcements.value.filter(x => x !== announcement);
-		os.api('admin/announcements/delete', announcement);
+		misskeyApi('admin/announcements/delete', announcement);
 	});
 }
 
@@ -134,13 +135,13 @@ async function save(announcement) {
 }
 
 function more() {
-	os.api('admin/announcements/list', { untilId: announcements.value.reduce((acc, announcement) => announcement.id != null ? announcement : acc).id }).then(announcementResponse => {
+	misskeyApi('admin/announcements/list', { untilId: announcements.value.reduce((acc, announcement) => announcement.id != null ? announcement : acc).id }).then(announcementResponse => {
 		announcements.value = announcements.value.concat(announcementResponse);
 	});
 }
 
 function refresh() {
-	os.api('admin/announcements/list').then(announcementResponse => {
+	misskeyApi('admin/announcements/list').then(announcementResponse => {
 		announcements.value = announcementResponse;
 	});
 }
diff --git a/packages/frontend/src/pages/admin/bot-protection.vue b/packages/frontend/src/pages/admin/bot-protection.vue
index 8c9d670d11..99b8070b71 100644
--- a/packages/frontend/src/pages/admin/bot-protection.vue
+++ b/packages/frontend/src/pages/admin/bot-protection.vue
@@ -72,6 +72,7 @@ import MkButton from '@/components/MkButton.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import FormSlot from '@/components/form/slot.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { fetchInstance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 
@@ -86,7 +87,7 @@ const turnstileSiteKey = ref<string | null>(null);
 const turnstileSecretKey = ref<string | null>(null);
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await misskeyApi('admin/meta');
 	hcaptchaSiteKey.value = meta.hcaptchaSiteKey;
 	hcaptchaSecretKey.value = meta.hcaptchaSecretKey;
 	recaptchaSiteKey.value = meta.recaptchaSiteKey;
diff --git a/packages/frontend/src/pages/admin/branding.vue b/packages/frontend/src/pages/admin/branding.vue
index 38cce69735..72b47949e7 100644
--- a/packages/frontend/src/pages/admin/branding.vue
+++ b/packages/frontend/src/pages/admin/branding.vue
@@ -101,6 +101,7 @@ import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { instance, fetchInstance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -122,7 +123,7 @@ const notFoundImageUrl = ref<string | null>(null);
 const manifestJsonOverride = ref<string>('{}');
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await misskeyApi('admin/meta');
 	iconUrl.value = meta.iconUrl;
 	app192IconUrl.value = meta.app192IconUrl;
 	app512IconUrl.value = meta.app512IconUrl;
diff --git a/packages/frontend/src/pages/admin/database.vue b/packages/frontend/src/pages/admin/database.vue
index 53f556bb64..27541f576d 100644
--- a/packages/frontend/src/pages/admin/database.vue
+++ b/packages/frontend/src/pages/admin/database.vue
@@ -21,13 +21,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed } from 'vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import bytes from '@/filters/bytes.js';
 import number from '@/filters/number.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
-const databasePromiseFactory = () => os.api('admin/get-table-stats').then(res => Object.entries(res).sort((a, b) => b[1].size - a[1].size));
+const databasePromiseFactory = () => misskeyApi('admin/get-table-stats').then(res => Object.entries(res).sort((a, b) => b[1].size - a[1].size));
 
 const headerActions = computed(() => []);
 
diff --git a/packages/frontend/src/pages/admin/email-settings.vue b/packages/frontend/src/pages/admin/email-settings.vue
index 2e6ad3b1d3..c6fd02d67e 100644
--- a/packages/frontend/src/pages/admin/email-settings.vue
+++ b/packages/frontend/src/pages/admin/email-settings.vue
@@ -73,6 +73,7 @@ import FormSuspense from '@/components/form/suspense.vue';
 import FormSplit from '@/components/form/split.vue';
 import FormSection from '@/components/form/section.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { fetchInstance, instance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -87,7 +88,7 @@ const smtpUser = ref<string>('');
 const smtpPass = ref<string>('');
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await misskeyApi('admin/meta');
 	enableEmail.value = meta.enableEmail;
 	email.value = meta.email;
 	smtpSecure.value = meta.smtpSecure;
diff --git a/packages/frontend/src/pages/admin/external-services.vue b/packages/frontend/src/pages/admin/external-services.vue
index 22dc115fda..4468c8279f 100644
--- a/packages/frontend/src/pages/admin/external-services.vue
+++ b/packages/frontend/src/pages/admin/external-services.vue
@@ -42,6 +42,7 @@ import MkSwitch from '@/components/MkSwitch.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import FormSection from '@/components/form/section.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { fetchInstance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -50,7 +51,7 @@ const deeplAuthKey = ref<string>('');
 const deeplIsPro = ref<boolean>(false);
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await misskeyApi('admin/meta');
 	deeplAuthKey.value = meta.deeplAuthKey;
 	deeplIsPro.value = meta.deeplIsPro;
 }
diff --git a/packages/frontend/src/pages/admin/files.vue b/packages/frontend/src/pages/admin/files.vue
index a366b302c7..a614cacd45 100644
--- a/packages/frontend/src/pages/admin/files.vue
+++ b/packages/frontend/src/pages/admin/files.vue
@@ -42,6 +42,7 @@ import MkInput from '@/components/MkInput.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
@@ -83,7 +84,7 @@ async function find() {
 	});
 	if (canceled) return;
 
-	os.api('admin/drive/show-file', q.startsWith('http://') || q.startsWith('https://') ? { url: q.trim() } : { fileId: q.trim() }).then(file => {
+	misskeyApi('admin/drive/show-file', q.startsWith('http://') || q.startsWith('https://') ? { url: q.trim() } : { fileId: q.trim() }).then(file => {
 		show(file);
 	}).catch(err => {
 		if (err.code === 'NO_SUCH_FILE') {
diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index 5e92cbd600..333bac724b 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -34,6 +34,7 @@ import MkSuperMenu from '@/components/MkSuperMenu.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import { instance } from '@/instance.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { lookupUser, lookupUserByEmail } from '@/scripts/lookup-user.js';
 import { useRouter } from '@/router.js';
 import { PageMetadata, definePageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
@@ -62,7 +63,7 @@ let noEmailServer = !instance.enableEmail;
 const thereIsUnresolvedAbuseReport = ref(false);
 const currentPage = computed(() => router.currentRef.value.child);
 
-os.api('admin/abuse-user-reports', {
+misskeyApi('admin/abuse-user-reports', {
 	state: 'unresolved',
 	limit: 1,
 }).then(reports => {
@@ -266,7 +267,7 @@ provideMetadataReceiver((info) => {
 });
 
 function invite() {
-	os.api('admin/invite/create').then(x => {
+	misskeyApi('admin/invite/create').then(x => {
 		os.alert({
 			type: 'info',
 			text: x[0].code,
diff --git a/packages/frontend/src/pages/admin/instance-block.vue b/packages/frontend/src/pages/admin/instance-block.vue
index 356eca2af6..58e147f111 100644
--- a/packages/frontend/src/pages/admin/instance-block.vue
+++ b/packages/frontend/src/pages/admin/instance-block.vue
@@ -29,6 +29,7 @@ import MkButton from '@/components/MkButton.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { fetchInstance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -38,7 +39,7 @@ const silencedHosts = ref<string>('');
 const tab = ref('block');
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await misskeyApi('admin/meta');
 	blockedHosts.value = meta.blockedHosts.join('\n');
 	silencedHosts.value = meta.silencedHosts.join('\n');
 }
diff --git a/packages/frontend/src/pages/admin/invites.vue b/packages/frontend/src/pages/admin/invites.vue
index 838ef52b14..8b06ec59bd 100644
--- a/packages/frontend/src/pages/admin/invites.vue
+++ b/packages/frontend/src/pages/admin/invites.vue
@@ -59,6 +59,7 @@ import { computed, ref, shallowRef } from 'vue';
 import XHeader from './_header_.vue';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import MkButton from '@/components/MkButton.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkSelect from '@/components/MkSelect.vue';
@@ -93,14 +94,14 @@ async function createWithOptions() {
 		count: createCount.value,
 	};
 
-	const tickets = await os.api('admin/invite/create', options);
+	const tickets = await misskeyApi('admin/invite/create', options);
 	os.alert({
 		type: 'success',
 		title: i18n.ts.inviteCodeCreated,
-		text: tickets?.map(x => x.code).join('\n'),
+		text: tickets.map(x => x.code).join('\n'),
 	});
 
-	tickets?.forEach(ticket => pagingComponent.value?.prepend(ticket));
+	tickets.forEach(ticket => pagingComponent.value?.prepend(ticket));
 }
 
 function deleted(id: string) {
diff --git a/packages/frontend/src/pages/admin/moderation.vue b/packages/frontend/src/pages/admin/moderation.vue
index f6c0b29403..4915bee713 100644
--- a/packages/frontend/src/pages/admin/moderation.vue
+++ b/packages/frontend/src/pages/admin/moderation.vue
@@ -66,6 +66,7 @@ import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { fetchInstance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -81,7 +82,7 @@ const tosUrl = ref<string | null>(null);
 const privacyPolicyUrl = ref<string | null>(null);
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await misskeyApi('admin/meta');
 	enableRegistration.value = !meta.disableRegistration;
 	emailRequiredForSignup.value = meta.emailRequiredForSignup;
 	sensitiveWords.value = meta.sensitiveWords.join('\n');
diff --git a/packages/frontend/src/pages/admin/object-storage.vue b/packages/frontend/src/pages/admin/object-storage.vue
index 7019971e90..03b29f1873 100644
--- a/packages/frontend/src/pages/admin/object-storage.vue
+++ b/packages/frontend/src/pages/admin/object-storage.vue
@@ -90,6 +90,7 @@ import MkInput from '@/components/MkInput.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import FormSplit from '@/components/form/split.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { fetchInstance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -110,7 +111,7 @@ const objectStorageSetPublicRead = ref<boolean>(false);
 const objectStorageS3ForcePathStyle = ref<boolean>(true);
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await misskeyApi('admin/meta');
 	useObjectStorage.value = meta.useObjectStorage;
 	objectStorageBaseUrl.value = meta.objectStorageBaseUrl;
 	objectStorageBucket.value = meta.objectStorageBucket;
diff --git a/packages/frontend/src/pages/admin/other-settings.vue b/packages/frontend/src/pages/admin/other-settings.vue
index 5bb328ac92..bb0199eb40 100644
--- a/packages/frontend/src/pages/admin/other-settings.vue
+++ b/packages/frontend/src/pages/admin/other-settings.vue
@@ -47,6 +47,7 @@ import { ref, computed } from 'vue';
 import XHeader from './_header_.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { fetchInstance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -58,7 +59,7 @@ const enableChartsForRemoteUser = ref<boolean>(false);
 const enableChartsForFederatedInstances = ref<boolean>(false);
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await misskeyApi('admin/meta');
 	enableServerMachineStats.value = meta.enableServerMachineStats;
 	enableIdenticonGeneration.value = meta.enableIdenticonGeneration;
 	enableChartsForRemoteUser.value = meta.enableChartsForRemoteUser;
diff --git a/packages/frontend/src/pages/admin/overview.active-users.vue b/packages/frontend/src/pages/admin/overview.active-users.vue
index 5e67370c2b..8acc5786b2 100644
--- a/packages/frontend/src/pages/admin/overview.active-users.vue
+++ b/packages/frontend/src/pages/admin/overview.active-users.vue
@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { onMounted, shallowRef, ref } from 'vue';
 import { Chart } from 'chart.js';
 import gradient from 'chartjs-plugin-gradient';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore } from '@/store.js';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
 import { chartVLine } from '@/scripts/chart-vline.js';
@@ -52,7 +52,7 @@ async function renderChart() {
 		}));
 	};
 
-	const raw = await os.api('charts/active-users', { limit: chartLimit, span: 'day' });
+	const raw = await misskeyApi('charts/active-users', { limit: chartLimit, span: 'day' });
 
 	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
 
diff --git a/packages/frontend/src/pages/admin/overview.ap-requests.vue b/packages/frontend/src/pages/admin/overview.ap-requests.vue
index 0de62fadea..694be9a590 100644
--- a/packages/frontend/src/pages/admin/overview.ap-requests.vue
+++ b/packages/frontend/src/pages/admin/overview.ap-requests.vue
@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { onMounted, shallowRef, ref } from 'vue';
 import { Chart } from 'chart.js';
 import gradient from 'chartjs-plugin-gradient';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
 import { chartVLine } from '@/scripts/chart-vline.js';
 import { defaultStore } from '@/store.js';
@@ -65,7 +65,7 @@ onMounted(async () => {
 		}));
 	};
 
-	const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
+	const raw = await misskeyApi('charts/ap-request', { limit: chartLimit, span: 'day' });
 
 	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
 	const succColor = '#87e000';
diff --git a/packages/frontend/src/pages/admin/overview.federation.vue b/packages/frontend/src/pages/admin/overview.federation.vue
index cfd1c6a566..d3503bd462 100644
--- a/packages/frontend/src/pages/admin/overview.federation.vue
+++ b/packages/frontend/src/pages/admin/overview.federation.vue
@@ -49,6 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { onMounted, ref } from 'vue';
 import XPie, { type InstanceForPie } from './overview.pie.vue';
 import * as os from '@/os.js';
+import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import number from '@/filters/number.js';
 import MkNumberDiff from '@/components/MkNumberDiff.vue';
 import { i18n } from '@/i18n.js';
@@ -65,13 +66,13 @@ const fetching = ref(true);
 const { handler: externalTooltipHandler } = useChartTooltip();
 
 onMounted(async () => {
-	const chart = await os.apiGet('charts/federation', { limit: 2, span: 'day' });
+	const chart = await misskeyApiGet('charts/federation', { limit: 2, span: 'day' });
 	federationPubActive.value = chart.pubActive[0];
 	federationPubActiveDiff.value = chart.pubActive[0] - chart.pubActive[1];
 	federationSubActive.value = chart.subActive[0];
 	federationSubActiveDiff.value = chart.subActive[0] - chart.subActive[1];
 
-	os.apiGet('federation/stats', { limit: 10 }).then(res => {
+	misskeyApiGet('federation/stats', { limit: 10 }).then(res => {
 		topSubInstancesForPie.value = [
 			...res.topSubInstances.map(x => ({
 				name: x.host,
diff --git a/packages/frontend/src/pages/admin/overview.instances.vue b/packages/frontend/src/pages/admin/overview.instances.vue
index de34f0c09b..8d731cbc90 100644
--- a/packages/frontend/src/pages/admin/overview.instances.vue
+++ b/packages/frontend/src/pages/admin/overview.instances.vue
@@ -18,8 +18,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import * as Misskey from 'misskey-js';
-import * as os from '@/os.js';
 import { useInterval } from '@/scripts/use-interval.js';
 import MkInstanceCardMini from '@/components/MkInstanceCardMini.vue';
 import { defaultStore } from '@/store.js';
@@ -28,7 +28,7 @@ const instances = ref<Misskey.entities.FederationInstance[]>([]);
 const fetching = ref(true);
 
 const fetch = async () => {
-	const fetchedInstances = await os.api('federation/instances', {
+	const fetchedInstances = await misskeyApi('federation/instances', {
 		sort: '+latestRequestReceivedAt',
 		limit: 6,
 	});
diff --git a/packages/frontend/src/pages/admin/overview.moderators.vue b/packages/frontend/src/pages/admin/overview.moderators.vue
index 3034bdd57e..75b731996b 100644
--- a/packages/frontend/src/pages/admin/overview.moderators.vue
+++ b/packages/frontend/src/pages/admin/overview.moderators.vue
@@ -18,15 +18,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import * as Misskey from 'misskey-js';
-import * as os from '@/os.js';
 import { defaultStore } from '@/store.js';
 
 const moderators = ref<Misskey.entities.UserDetailed[] | null>(null);
 const fetching = ref(true);
 
 onMounted(async () => {
-	moderators.value = await os.api('admin/show-users', {
+	moderators.value = await misskeyApi('admin/show-users', {
 		sort: '+lastActiveDate',
 		state: 'adminOrModerator',
 		limit: 30,
diff --git a/packages/frontend/src/pages/admin/overview.stats.vue b/packages/frontend/src/pages/admin/overview.stats.vue
index 78f435e731..3fb24747cd 100644
--- a/packages/frontend/src/pages/admin/overview.stats.vue
+++ b/packages/frontend/src/pages/admin/overview.stats.vue
@@ -63,7 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import * as os from '@/os.js';
+import { misskeyApi, misskeyApiGet } from '@/scripts/misskey-api.js';
 import MkNumberDiff from '@/components/MkNumberDiff.vue';
 import MkNumber from '@/components/MkNumber.vue';
 import { i18n } from '@/i18n.js';
@@ -78,17 +78,17 @@ const fetching = ref(true);
 
 onMounted(async () => {
 	const [_stats, _onlineUsersCount] = await Promise.all([
-		os.api('stats', {}),
-		os.apiGet('get-online-users-count').then(res => res.count),
+		misskeyApi('stats', {}),
+		misskeyApiGet('get-online-users-count').then(res => res.count),
 	]);
 	stats.value = _stats;
 	onlineUsersCount.value = _onlineUsersCount;
 
-	os.apiGet('charts/users', { limit: 2, span: 'day' }).then(chart => {
+	misskeyApiGet('charts/users', { limit: 2, span: 'day' }).then(chart => {
 		usersComparedToThePrevDay.value = stats.value.originalUsersCount - chart.local.total[1];
 	});
 
-	os.apiGet('charts/notes', { limit: 2, span: 'day' }).then(chart => {
+	misskeyApiGet('charts/notes', { limit: 2, span: 'day' }).then(chart => {
 		notesComparedToThePrevDay.value = stats.value.originalNotesCount - chart.local.total[1];
 	});
 
diff --git a/packages/frontend/src/pages/admin/overview.users.vue b/packages/frontend/src/pages/admin/overview.users.vue
index 79579367c1..530ca0933e 100644
--- a/packages/frontend/src/pages/admin/overview.users.vue
+++ b/packages/frontend/src/pages/admin/overview.users.vue
@@ -18,8 +18,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import * as Misskey from 'misskey-js';
-import * as os from '@/os.js';
 import { useInterval } from '@/scripts/use-interval.js';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import { defaultStore } from '@/store.js';
@@ -28,7 +28,7 @@ const newUsers = ref<Misskey.entities.UserDetailed[] | null>(null);
 const fetching = ref(true);
 
 const fetch = async () => {
-	const _newUsers = await os.api('admin/show-users', {
+	const _newUsers = await misskeyApi('admin/show-users', {
 		limit: 5,
 		sort: '+createdAt',
 		origin: 'local',
diff --git a/packages/frontend/src/pages/admin/overview.vue b/packages/frontend/src/pages/admin/overview.vue
index 2e0791e24f..df058f6952 100644
--- a/packages/frontend/src/pages/admin/overview.vue
+++ b/packages/frontend/src/pages/admin/overview.vue
@@ -79,6 +79,7 @@ import XModerators from './overview.moderators.vue';
 import XHeatmap from './overview.heatmap.vue';
 import type { InstanceForPie } from './overview.pie.vue';
 import * as os from '@/os.js';
+import { misskeyApi, misskeyApiGet } from '@/scripts/misskey-api.js';
 import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -117,14 +118,14 @@ onMounted(async () => {
 	magicGrid.listen();
 	*/
 
-	os.apiGet('charts/federation', { limit: 2, span: 'day' }).then(chart => {
+	misskeyApiGet('charts/federation', { limit: 2, span: 'day' }).then(chart => {
 		federationPubActive.value = chart.pubActive[0];
 		federationPubActiveDiff.value = chart.pubActive[0] - chart.pubActive[1];
 		federationSubActive.value = chart.subActive[0];
 		federationSubActiveDiff.value = chart.subActive[0] - chart.subActive[1];
 	});
 
-	os.apiGet('federation/stats', { limit: 10 }).then(res => {
+	misskeyApiGet('federation/stats', { limit: 10 }).then(res => {
 		topSubInstancesForPie.value = [
 			...res.topSubInstances.map(x => ({
 				name: x.host,
@@ -149,18 +150,18 @@ onMounted(async () => {
 		];
 	});
 
-	os.api('admin/server-info').then(serverInfoResponse => {
+	misskeyApi('admin/server-info').then(serverInfoResponse => {
 		serverInfo.value = serverInfoResponse;
 	});
 
-	os.api('admin/show-users', {
+	misskeyApi('admin/show-users', {
 		limit: 5,
 		sort: '+createdAt',
 	}).then(res => {
 		newUsers.value = res;
 	});
 
-	os.api('federation/instances', {
+	misskeyApi('federation/instances', {
 		sort: '+latestRequestReceivedAt',
 		limit: 25,
 	}).then(res => {
diff --git a/packages/frontend/src/pages/admin/proxy-account.vue b/packages/frontend/src/pages/admin/proxy-account.vue
index 05e48f7ac1..8b1b3280f3 100644
--- a/packages/frontend/src/pages/admin/proxy-account.vue
+++ b/packages/frontend/src/pages/admin/proxy-account.vue
@@ -28,6 +28,7 @@ import MkButton from '@/components/MkButton.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { fetchInstance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -36,10 +37,10 @@ const proxyAccount = ref<Misskey.entities.UserDetailed | null>(null);
 const proxyAccountId = ref<string | null>(null);
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await misskeyApi('admin/meta');
 	proxyAccountId.value = meta.proxyAccountId;
 	if (proxyAccountId.value) {
-		proxyAccount.value = await os.api('users/show', { userId: proxyAccountId.value });
+		proxyAccount.value = await misskeyApi('users/show', { userId: proxyAccountId.value });
 	}
 }
 
diff --git a/packages/frontend/src/pages/admin/queue.chart.vue b/packages/frontend/src/pages/admin/queue.chart.vue
index 72276c1eed..085e5dbb7a 100644
--- a/packages/frontend/src/pages/admin/queue.chart.vue
+++ b/packages/frontend/src/pages/admin/queue.chart.vue
@@ -51,7 +51,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { markRaw, onMounted, onUnmounted, ref, shallowRef } from 'vue';
 import XChart from './queue.chart.chart.vue';
 import number from '@/filters/number.js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
 import MkFolder from '@/components/MkFolder.vue';
@@ -105,7 +105,7 @@ const onStatsLog = (statsLog) => {
 
 onMounted(() => {
 	if (props.domain === 'inbox' || props.domain === 'deliver') {
-		os.api(`admin/queue/${props.domain}-delayed`).then(result => {
+		misskeyApi(`admin/queue/${props.domain}-delayed`).then(result => {
 			jobs.value = result;
 		});
 	}
diff --git a/packages/frontend/src/pages/admin/relays.vue b/packages/frontend/src/pages/admin/relays.vue
index 0056f2bd9f..6811a8eba5 100644
--- a/packages/frontend/src/pages/admin/relays.vue
+++ b/packages/frontend/src/pages/admin/relays.vue
@@ -29,6 +29,7 @@ import * as Misskey from 'misskey-js';
 import XHeader from './_header_.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
@@ -41,7 +42,7 @@ async function addRelay() {
 		placeholder: i18n.ts.inboxUrl,
 	});
 	if (canceled) return;
-	os.api('admin/relays/add', {
+	misskeyApi('admin/relays/add', {
 		inbox,
 	}).then((relay: any) => {
 		refresh();
@@ -54,7 +55,7 @@ async function addRelay() {
 }
 
 function remove(inbox: string) {
-	os.api('admin/relays/remove', {
+	misskeyApi('admin/relays/remove', {
 		inbox,
 	}).then(() => {
 		refresh();
@@ -67,7 +68,7 @@ function remove(inbox: string) {
 }
 
 function refresh() {
-	os.api('admin/relays/list').then(relayList => {
+	misskeyApi('admin/relays/list').then(relayList => {
 		relays.value = relayList;
 	});
 }
diff --git a/packages/frontend/src/pages/admin/roles.edit.vue b/packages/frontend/src/pages/admin/roles.edit.vue
index 585b50aad6..db0acae24a 100644
--- a/packages/frontend/src/pages/admin/roles.edit.vue
+++ b/packages/frontend/src/pages/admin/roles.edit.vue
@@ -28,6 +28,7 @@ import { v4 as uuid } from 'uuid';
 import XHeader from './_header_.vue';
 import XEditor from './roles.editor.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { useRouter } from '@/router.js';
@@ -44,7 +45,7 @@ const role = ref<Misskey.entities.Role | null>(null);
 const data = ref<any>(null);
 
 if (props.id) {
-	role.value = await os.api('admin/roles/show', {
+	role.value = await misskeyApi('admin/roles/show', {
 		roleId: props.id,
 	});
 
diff --git a/packages/frontend/src/pages/admin/roles.role.vue b/packages/frontend/src/pages/admin/roles.role.vue
index 9aa7d8dd3c..d5ce190ef2 100644
--- a/packages/frontend/src/pages/admin/roles.role.vue
+++ b/packages/frontend/src/pages/admin/roles.role.vue
@@ -67,6 +67,7 @@ import XHeader from './_header_.vue';
 import XEditor from './roles.editor.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { useRouter } from '@/router.js';
@@ -92,7 +93,7 @@ const usersPagination = {
 
 const expandedItems = ref([]);
 
-const role = reactive(await os.api('admin/roles/show', {
+const role = reactive(await misskeyApi('admin/roles/show', {
 	roleId: props.id,
 }));
 
diff --git a/packages/frontend/src/pages/admin/roles.vue b/packages/frontend/src/pages/admin/roles.vue
index 3962e04218..f7c4048b23 100644
--- a/packages/frontend/src/pages/admin/roles.vue
+++ b/packages/frontend/src/pages/admin/roles.vue
@@ -233,6 +233,7 @@ import MkButton from '@/components/MkButton.vue';
 import MkRange from '@/components/MkRange.vue';
 import MkRolePreview from '@/components/MkRolePreview.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { instance } from '@/instance.js';
@@ -243,7 +244,7 @@ import { ROLE_POLICIES } from '@/const.js';
 const router = useRouter();
 const baseRoleQ = ref('');
 
-const roles = await os.api('admin/roles/list');
+const roles = await misskeyApi('admin/roles/list');
 
 const policies = reactive<Record<typeof ROLE_POLICIES[number], any>>({});
 for (const ROLE_POLICY of ROLE_POLICIES) {
diff --git a/packages/frontend/src/pages/admin/security.vue b/packages/frontend/src/pages/admin/security.vue
index 8d79dea20f..ec0c6166d0 100644
--- a/packages/frontend/src/pages/admin/security.vue
+++ b/packages/frontend/src/pages/admin/security.vue
@@ -148,6 +148,7 @@ import MkInput from '@/components/MkInput.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { fetchInstance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -170,7 +171,7 @@ const truemailAuthKey = ref<string | null>(null);
 const bannedEmailDomains = ref<string>('');
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await misskeyApi('admin/meta');
 	summalyProxy.value = meta.summalyProxy;
 	enableHcaptcha.value = meta.enableHcaptcha;
 	enableRecaptcha.value = meta.enableRecaptcha;
diff --git a/packages/frontend/src/pages/admin/settings.vue b/packages/frontend/src/pages/admin/settings.vue
index 224028edf3..45375764b7 100644
--- a/packages/frontend/src/pages/admin/settings.vue
+++ b/packages/frontend/src/pages/admin/settings.vue
@@ -158,6 +158,7 @@ import FormSection from '@/components/form/section.vue';
 import FormSplit from '@/components/form/split.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { fetchInstance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -184,7 +185,7 @@ const perUserListTimelineCacheMax = ref<number>(0);
 const notesPerOneAd = ref<number>(0);
 
 async function init(): Promise<void> {
-	const meta = await os.api('admin/meta');
+	const meta = await misskeyApi('admin/meta');
 	name.value = meta.name;
 	shortName.value = meta.shortName;
 	description.value = meta.description;
diff --git a/packages/frontend/src/pages/announcements.vue b/packages/frontend/src/pages/announcements.vue
index 8eca403707..5632bf7caf 100644
--- a/packages/frontend/src/pages/announcements.vue
+++ b/packages/frontend/src/pages/announcements.vue
@@ -45,6 +45,7 @@ import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { $i, updateAccount } from '@/account.js';
@@ -84,7 +85,7 @@ async function read(announcement) {
 		a.isRead = true;
 		return a;
 	});
-	os.api('i/read-announcement', { announcementId: announcement.id });
+	misskeyApi('i/read-announcement', { announcementId: announcement.id });
 	updateAccount({
 		unreadAnnouncements: $i!.unreadAnnouncements.filter(a => a.id !== announcement.id),
 	});
diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue
index cba54790ce..d96ca4208b 100644
--- a/packages/frontend/src/pages/antenna-timeline.vue
+++ b/packages/frontend/src/pages/antenna-timeline.vue
@@ -29,6 +29,7 @@ import * as Misskey from 'misskey-js';
 import MkTimeline from '@/components/MkTimeline.vue';
 import { scroll } from '@/scripts/scroll.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useRouter } from '@/router.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
@@ -73,7 +74,7 @@ function focus() {
 }
 
 watch(() => props.antennaId, async () => {
-	antenna.value = await os.api('antennas/show', {
+	antenna.value = await misskeyApi('antennas/show', {
 		antennaId: props.antennaId,
 	});
 }, { immediate: true });
diff --git a/packages/frontend/src/pages/api-console.vue b/packages/frontend/src/pages/api-console.vue
index 0cd4a8dae8..6456965499 100644
--- a/packages/frontend/src/pages/api-console.vue
+++ b/packages/frontend/src/pages/api-console.vue
@@ -41,7 +41,7 @@ import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
 const body = ref('{}');
@@ -51,14 +51,14 @@ const sending = ref(false);
 const res = ref('');
 const withCredential = ref(true);
 
-os.api('endpoints').then(endpointResponse => {
+misskeyApi('endpoints').then(endpointResponse => {
 	endpoints.value = endpointResponse;
 });
 
 function send() {
 	sending.value = true;
 	const requestBody = JSON5.parse(body.value);
-	os.api(endpoint.value as keyof Endpoints, requestBody, requestBody.i || (withCredential.value ? undefined : null)).then(resp => {
+	misskeyApi(endpoint.value as keyof Endpoints, requestBody, requestBody.i || (withCredential.value ? undefined : null)).then(resp => {
 		sending.value = false;
 		res.value = JSON5.stringify(resp, null, 2);
 	}, err => {
@@ -68,7 +68,7 @@ function send() {
 }
 
 function onEndpointChange() {
-	os.api('endpoint', { endpoint: endpoint.value }, withCredential.value ? undefined : null).then(resp => {
+	misskeyApi('endpoint', { endpoint: endpoint.value }, withCredential.value ? undefined : null).then(resp => {
 		const endpointBody = {};
 		for (const p of resp.params) {
 			endpointBody[p.name] =
diff --git a/packages/frontend/src/pages/auth.form.vue b/packages/frontend/src/pages/auth.form.vue
index 8a17e5895d..39a7924f94 100644
--- a/packages/frontend/src/pages/auth.form.vue
+++ b/packages/frontend/src/pages/auth.form.vue
@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
@@ -44,7 +44,7 @@ const name = computed(() => {
 });
 
 function cancel() {
-	os.api('auth/deny', {
+	misskeyApi('auth/deny', {
 		token: props.session.token,
 	}).then(() => {
 		emit('denied');
@@ -52,7 +52,7 @@ function cancel() {
 }
 
 function accept() {
-	os.api('auth/accept', {
+	misskeyApi('auth/accept', {
 		token: props.session.token,
 	}).then(() => {
 		emit('accepted');
diff --git a/packages/frontend/src/pages/auth.vue b/packages/frontend/src/pages/auth.vue
index 1b342647fb..fd38e22ce8 100644
--- a/packages/frontend/src/pages/auth.vue
+++ b/packages/frontend/src/pages/auth.vue
@@ -46,7 +46,7 @@ import { onMounted, ref, computed } from 'vue';
 import * as Misskey from 'misskey-js';
 import XForm from './auth.form.vue';
 import MkSignin from '@/components/MkSignin.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { $i, login } from '@/account.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
@@ -75,13 +75,13 @@ onMounted(async () => {
 	if (!$i) return;
 
 	try {
-		session.value = await os.api('auth/session/show', {
+		session.value = await misskeyApi('auth/session/show', {
 			token: props.token,
 		});
 
 		// 既に連携していた場合
 		if (session.value.app.isAuthorized) {
-			await os.api('auth/accept', {
+			await misskeyApi('auth/accept', {
 				token: session.value.token,
 			});
 			accepted();
diff --git a/packages/frontend/src/pages/avatar-decorations.vue b/packages/frontend/src/pages/avatar-decorations.vue
index 87964ac697..376679fd17 100644
--- a/packages/frontend/src/pages/avatar-decorations.vue
+++ b/packages/frontend/src/pages/avatar-decorations.vue
@@ -40,6 +40,7 @@ import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkFolder from '@/components/MkFolder.vue';
@@ -63,7 +64,7 @@ function del(avatarDecoration) {
 	}).then(({ canceled }) => {
 		if (canceled) return;
 		avatarDecorations.value = avatarDecorations.value.filter(x => x !== avatarDecoration);
-		os.api('admin/avatar-decorations/delete', avatarDecoration);
+		misskeyApi('admin/avatar-decorations/delete', avatarDecoration);
 	});
 }
 
@@ -77,7 +78,7 @@ async function save(avatarDecoration) {
 }
 
 function load() {
-	os.api('admin/avatar-decorations/list').then(_avatarDecorations => {
+	misskeyApi('admin/avatar-decorations/list').then(_avatarDecorations => {
 		avatarDecorations.value = _avatarDecorations;
 	});
 }
diff --git a/packages/frontend/src/pages/channel-editor.vue b/packages/frontend/src/pages/channel-editor.vue
index fcbd03553d..727778b6e6 100644
--- a/packages/frontend/src/pages/channel-editor.vue
+++ b/packages/frontend/src/pages/channel-editor.vue
@@ -76,6 +76,7 @@ import MkInput from '@/components/MkInput.vue';
 import MkColorInput from '@/components/MkColorInput.vue';
 import { selectFile } from '@/scripts/select-file.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useRouter } from '@/router.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
@@ -105,7 +106,7 @@ watch(() => bannerId.value, async () => {
 	if (bannerId.value == null) {
 		bannerUrl.value = null;
 	} else {
-		bannerUrl.value = (await os.api('drive/files/show', {
+		bannerUrl.value = (await misskeyApi('drive/files/show', {
 			fileId: bannerId.value,
 		})).url;
 	}
@@ -114,7 +115,7 @@ watch(() => bannerId.value, async () => {
 async function fetchChannel() {
 	if (props.channelId == null) return;
 
-	channel.value = await os.api('channels/show', {
+	channel.value = await misskeyApi('channels/show', {
 		channelId: props.channelId,
 	});
 
@@ -179,7 +180,7 @@ async function archive() {
 
 	if (canceled) return;
 
-	os.api('channels/update', {
+	misskeyApi('channels/update', {
 		channelId: props.channelId,
 		isArchived: true,
 	}).then(() => {
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index af09189654..667563bd16 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -74,6 +74,7 @@ import MkPostForm from '@/components/MkPostForm.vue';
 import MkTimeline from '@/components/MkTimeline.vue';
 import XChannelFollowButton from '@/components/MkChannelFollowButton.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useRouter } from '@/router.js';
 import { $i, iAmModerator } from '@/account.js';
 import { i18n } from '@/i18n.js';
@@ -113,7 +114,7 @@ const featuredPagination = computed(() => ({
 }));
 
 watch(() => props.channelId, async () => {
-	channel.value = await os.api('channels/show', {
+	channel.value = await misskeyApi('channels/show', {
 		channelId: props.channelId,
 	});
 	favorited.value = channel.value.isFavorited ?? false;
diff --git a/packages/frontend/src/pages/clip.vue b/packages/frontend/src/pages/clip.vue
index ec9876f70c..e55e99a6fa 100644
--- a/packages/frontend/src/pages/clip.vue
+++ b/packages/frontend/src/pages/clip.vue
@@ -32,6 +32,7 @@ import MkNotes from '@/components/MkNotes.vue';
 import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { url } from '@/config.js';
 import MkButton from '@/components/MkButton.vue';
@@ -56,7 +57,7 @@ const pagination = {
 const isOwned = computed<boolean | null>(() => $i && clip.value && ($i.id === clip.value.userId));
 
 watch(() => props.clipId, async () => {
-	clip.value = await os.api('clips/show', {
+	clip.value = await misskeyApi('clips/show', {
 		clipId: props.clipId,
 	});
 	favorited.value = clip.value.isFavorited;
diff --git a/packages/frontend/src/pages/custom-emojis-manager.vue b/packages/frontend/src/pages/custom-emojis-manager.vue
index 011857688d..47594bad4d 100644
--- a/packages/frontend/src/pages/custom-emojis-manager.vue
+++ b/packages/frontend/src/pages/custom-emojis-manager.vue
@@ -82,6 +82,7 @@ import MkSwitch from '@/components/MkSwitch.vue';
 import FormSplit from '@/components/form/split.vue';
 import { selectFile } from '@/scripts/select-file.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
@@ -177,7 +178,7 @@ const menu = (ev: MouseEvent) => {
 		icon: 'ti ti-download',
 		text: i18n.ts.export,
 		action: async () => {
-			os.api('export-custom-emojis', {
+			misskeyApi('export-custom-emojis', {
 			})
 				.then(() => {
 					os.alert({
@@ -196,7 +197,7 @@ const menu = (ev: MouseEvent) => {
 		text: i18n.ts.import,
 		action: async () => {
 			const file = await selectFile(ev.currentTarget ?? ev.target);
-			os.api('admin/emoji/import-zip', {
+			misskeyApi('admin/emoji/import-zip', {
 				fileId: file.id,
 			})
 				.then(() => {
diff --git a/packages/frontend/src/pages/drive.file.info.vue b/packages/frontend/src/pages/drive.file.info.vue
index 1a2fc197f9..4c635028f3 100644
--- a/packages/frontend/src/pages/drive.file.info.vue
+++ b/packages/frontend/src/pages/drive.file.info.vue
@@ -79,6 +79,7 @@ import bytes from '@/filters/bytes.js';
 import { infoImageUrl } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useRouter } from '@/router.js';
 
 const router = useRouter();
@@ -94,7 +95,7 @@ const isImage = computed(() => file.value?.type.startsWith('image/'));
 async function fetch() {
 	fetching.value = true;
 
-	file.value = await os.api('drive/files/show', {
+	file.value = await misskeyApi('drive/files/show', {
 		fileId: props.fileId,
 	}).catch((err) => {
 		console.error(err);
diff --git a/packages/frontend/src/pages/emoji-edit-dialog.vue b/packages/frontend/src/pages/emoji-edit-dialog.vue
index 474e63cb46..e00953c1ff 100644
--- a/packages/frontend/src/pages/emoji-edit-dialog.vue
+++ b/packages/frontend/src/pages/emoji-edit-dialog.vue
@@ -85,6 +85,7 @@ import MkInput from '@/components/MkInput.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { customEmojiCategories } from '@/custom-emojis.js';
 import MkSwitch from '@/components/MkSwitch.vue';
@@ -107,7 +108,7 @@ const rolesThatCanBeUsedThisEmojiAsReaction = ref<Misskey.entities.Role[]>([]);
 const file = ref<Misskey.entities.DriveFile>();
 
 watch(roleIdsThatCanBeUsedThisEmojiAsReaction, async () => {
-	rolesThatCanBeUsedThisEmojiAsReaction.value = (await Promise.all(roleIdsThatCanBeUsedThisEmojiAsReaction.value.map((id) => os.api('admin/roles/show', { roleId: id }).catch(() => null)))).filter(x => x != null);
+	rolesThatCanBeUsedThisEmojiAsReaction.value = (await Promise.all(roleIdsThatCanBeUsedThisEmojiAsReaction.value.map((id) => misskeyApi('admin/roles/show', { roleId: id }).catch(() => null)))).filter(x => x != null);
 }, { immediate: true });
 
 const imgUrl = computed(() => file.value ? file.value.url : props.emoji ? `/emoji/${props.emoji.name}.webp` : null);
@@ -126,7 +127,7 @@ async function changeImage(ev) {
 }
 
 async function addRole() {
-	const roles = await os.api('admin/roles/list');
+	const roles = await misskeyApi('admin/roles/list');
 	const currentRoleIds = rolesThatCanBeUsedThisEmojiAsReaction.value.map(x => x.id);
 
 	const { canceled, result: role } = await os.select({
@@ -188,7 +189,7 @@ async function del() {
 	});
 	if (canceled) return;
 
-	os.api('admin/emoji/delete', {
+	misskeyApi('admin/emoji/delete', {
 		id: props.emoji.id,
 	}).then(() => {
 		emit('done', {
diff --git a/packages/frontend/src/pages/emojis.emoji.vue b/packages/frontend/src/pages/emojis.emoji.vue
index 9ba9047ca3..ea6947bbba 100644
--- a/packages/frontend/src/pages/emojis.emoji.vue
+++ b/packages/frontend/src/pages/emojis.emoji.vue
@@ -16,6 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { } from 'vue';
 import * as os from '@/os.js';
+import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 import { i18n } from '@/i18n.js';
 
@@ -43,7 +44,7 @@ function menu(ev) {
 		text: i18n.ts.info,
 		icon: 'ti ti-info-circle',
 		action: () => {
-			os.apiGet('emoji', { name: props.emoji.name }).then(res => {
+			misskeyApiGet('emoji', { name: props.emoji.name }).then(res => {
 				os.alert({
 					type: 'info',
 					text: `Name: ${res.name}\nAliases: ${res.aliases.join(' ')}\nCategory: ${res.category}\nisSensitive: ${res.isSensitive}\nlocalOnly: ${res.localOnly}\nLicense: ${res.license}\nURL: ${res.url}`,
diff --git a/packages/frontend/src/pages/explore.roles.vue b/packages/frontend/src/pages/explore.roles.vue
index d30e107e97..f06bd0840c 100644
--- a/packages/frontend/src/pages/explore.roles.vue
+++ b/packages/frontend/src/pages/explore.roles.vue
@@ -15,11 +15,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkRolePreview from '@/components/MkRolePreview.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
 const roles = ref<Misskey.entities.Role[] | null>(null);
 
-os.api('roles/list').then(res => {
+misskeyApi('roles/list').then(res => {
 	roles.value = res.filter(x => x.target === 'manual').sort((a, b) => b.displayOrder - a.displayOrder);
 });
 </script>
diff --git a/packages/frontend/src/pages/explore.users.vue b/packages/frontend/src/pages/explore.users.vue
index 73c2a94fc0..440bd0b945 100644
--- a/packages/frontend/src/pages/explore.users.vue
+++ b/packages/frontend/src/pages/explore.users.vue
@@ -68,7 +68,7 @@ import * as Misskey from 'misskey-js';
 import MkUserList from '@/components/MkUserList.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
 import MkTab from '@/components/MkTab.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
@@ -123,14 +123,14 @@ const recentlyRegisteredUsersF = { endpoint: 'users', limit: 10, noPaging: true,
 	sort: '+createdAt',
 } };
 
-os.api('hashtags/list', {
+misskeyApi('hashtags/list', {
 	sort: '+attachedLocalUsers',
 	attachedToLocalUserOnly: true,
 	limit: 30,
 }).then(tags => {
 	tagsLocal.value = tags;
 });
-os.api('hashtags/list', {
+misskeyApi('hashtags/list', {
 	sort: '+attachedRemoteUsers',
 	attachedToRemoteUserOnly: true,
 	limit: 30,
diff --git a/packages/frontend/src/pages/flash/flash-edit.vue b/packages/frontend/src/pages/flash/flash-edit.vue
index 147a381c98..ce077779c8 100644
--- a/packages/frontend/src/pages/flash/flash-edit.vue
+++ b/packages/frontend/src/pages/flash/flash-edit.vue
@@ -38,6 +38,7 @@ import { computed, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkTextarea from '@/components/MkTextarea.vue';
@@ -369,7 +370,7 @@ const flash = ref<Misskey.entities.Flash | null>(null);
 const visibility = ref<Misskey.entities.FlashUpdateRequest['visibility']>('public');
 
 if (props.id) {
-	flash.value = await os.api('flash/show', {
+	flash.value = await misskeyApi('flash/show', {
 		flashId: props.id,
 	});
 }
diff --git a/packages/frontend/src/pages/flash/flash.vue b/packages/frontend/src/pages/flash/flash.vue
index 13e8184c19..bcffb5601a 100644
--- a/packages/frontend/src/pages/flash/flash.vue
+++ b/packages/frontend/src/pages/flash/flash.vue
@@ -62,6 +62,7 @@ import * as Misskey from 'misskey-js';
 import { Interpreter, Parser, values } from '@syuilo/aiscript';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { url } from '@/config.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -84,7 +85,7 @@ const error = ref<any>(null);
 
 function fetchFlash() {
 	flash.value = null;
-	os.api('flash/show', {
+	misskeyApi('flash/show', {
 		flashId: props.id,
 	}).then(_flash => {
 		flash.value = _flash;
diff --git a/packages/frontend/src/pages/follow-requests.vue b/packages/frontend/src/pages/follow-requests.vue
index 51f31b1ca5..902e6a4b51 100644
--- a/packages/frontend/src/pages/follow-requests.vue
+++ b/packages/frontend/src/pages/follow-requests.vue
@@ -41,7 +41,7 @@ import { shallowRef, computed } from 'vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
 import { userPage, acct } from '@/filters/user.js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { infoImageUrl } from '@/instance.js';
@@ -54,13 +54,13 @@ const pagination = {
 };
 
 function accept(user) {
-	os.api('following/requests/accept', { userId: user.id }).then(() => {
+	misskeyApi('following/requests/accept', { userId: user.id }).then(() => {
 		paginationComponent.value.reload();
 	});
 }
 
 function reject(user) {
-	os.api('following/requests/reject', { userId: user.id }).then(() => {
+	misskeyApi('following/requests/reject', { userId: user.id }).then(() => {
 		paginationComponent.value.reload();
 	});
 }
diff --git a/packages/frontend/src/pages/follow.vue b/packages/frontend/src/pages/follow.vue
index a0a4a480b5..5a21604080 100644
--- a/packages/frontend/src/pages/follow.vue
+++ b/packages/frontend/src/pages/follow.vue
@@ -12,9 +12,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { mainRouter } from '@/router.js';
 import { i18n } from '@/i18n.js';
-import { defaultStore } from "@/store.js";
+import { defaultStore } from '@/store.js';
 
 async function follow(user): Promise<void> {
 	const { canceled } = await os.confirm({
@@ -42,7 +43,7 @@ if (acct == null) {
 let promise;
 
 if (acct.startsWith('https://')) {
-	promise = os.api('ap/show', {
+	promise = misskeyApi('ap/show', {
 		uri: acct,
 	});
 	promise.then(res => {
@@ -60,7 +61,7 @@ if (acct.startsWith('https://')) {
 		}
 	});
 } else {
-	promise = os.api('users/show', Misskey.acct.parse(acct));
+	promise = misskeyApi('users/show', Misskey.acct.parse(acct));
 	promise.then(user => {
 		follow(user);
 	});
diff --git a/packages/frontend/src/pages/gallery/edit.vue b/packages/frontend/src/pages/gallery/edit.vue
index d711cb4e88..e0c7654531 100644
--- a/packages/frontend/src/pages/gallery/edit.vue
+++ b/packages/frontend/src/pages/gallery/edit.vue
@@ -47,6 +47,7 @@ import MkSwitch from '@/components/MkSwitch.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import { selectFiles } from '@/scripts/select-file.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useRouter } from '@/router.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
@@ -107,7 +108,7 @@ async function del() {
 }
 
 watch(() => props.postId, () => {
-	init.value = () => props.postId ? os.api('gallery/posts/show', {
+	init.value = () => props.postId ? misskeyApi('gallery/posts/show', {
 		postId: props.postId,
 	}).then(post => {
 		files.value = post.files ?? [];
diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue
index 77af81cec1..f71fe0f260 100644
--- a/packages/frontend/src/pages/gallery/post.vue
+++ b/packages/frontend/src/pages/gallery/post.vue
@@ -66,6 +66,7 @@ import { computed, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import MkContainer from '@/components/MkContainer.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
@@ -97,7 +98,7 @@ const otherPostsPagination = {
 
 function fetchPost() {
 	post.value = null;
-	os.api('gallery/posts/show', {
+	misskeyApi('gallery/posts/show', {
 		postId: props.postId,
 	}).then(_post => {
 		post.value = _post;
diff --git a/packages/frontend/src/pages/install-extentions.vue b/packages/frontend/src/pages/install-extentions.vue
index 8117699849..3815658bd4 100644
--- a/packages/frontend/src/pages/install-extentions.vue
+++ b/packages/frontend/src/pages/install-extentions.vue
@@ -105,6 +105,7 @@ import MkInfo from '@/components/MkInfo.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { AiScriptPluginMeta, parsePluginMeta, installPlugin } from '@/scripts/install-plugin.js';
 import { parseThemeCode, installTheme } from '@/scripts/install-theme.js';
 import { unisonReload } from '@/scripts/unison-reload.js';
@@ -159,7 +160,7 @@ async function fetch() {
 		uiPhase.value = 'error';
 		return;
 	}
-	const res = await os.api('fetch-external-resources', {
+	const res = await misskeyApi('fetch-external-resources', {
 		url: url.value,
 		hash: hash.value,
 	}).catch((err) => {
diff --git a/packages/frontend/src/pages/instance-info.vue b/packages/frontend/src/pages/instance-info.vue
index 97dc0a8633..c8a0eeeeaa 100644
--- a/packages/frontend/src/pages/instance-info.vue
+++ b/packages/frontend/src/pages/instance-info.vue
@@ -129,6 +129,7 @@ import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import number from '@/filters/number.js';
 import { iAmModerator, iAmAdmin } from '@/account.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -164,9 +165,9 @@ const usersPagination = {
 
 async function fetch(): Promise<void> {
 	if (iAmAdmin) {
-		meta.value = await os.api('admin/meta');
+		meta.value = await misskeyApi('admin/meta');
 	}
-	instance.value = await os.api('federation/show-instance', {
+	instance.value = await misskeyApi('federation/show-instance', {
 		host: props.host,
 	});
 	suspended.value = instance.value?.isSuspended ?? false;
@@ -179,7 +180,7 @@ async function toggleBlock(): Promise<void> {
 	if (!meta.value) throw new Error('No meta?');
 	if (!instance.value) throw new Error('No instance?');
 	const { host } = instance.value;
-	await os.api('admin/update-meta', {
+	await misskeyApi('admin/update-meta', {
 		blockedHosts: isBlocked.value ? meta.value.blockedHosts.concat([host]) : meta.value.blockedHosts.filter(x => x !== host),
 	});
 }
@@ -189,14 +190,14 @@ async function toggleSilenced(): Promise<void> {
 	if (!instance.value) throw new Error('No instance?');
 	const { host } = instance.value;
 	const silencedHosts = meta.value.silencedHosts ?? [];
-	await os.api('admin/update-meta', {
+	await misskeyApi('admin/update-meta', {
 		silencedHosts: isSilenced.value ? silencedHosts.concat([host]) : silencedHosts.filter(x => x !== host),
 	});
 }
 
 async function toggleSuspend(): Promise<void> {
 	if (!instance.value) throw new Error('No instance?');
-	await os.api('admin/federation/update-instance', {
+	await misskeyApi('admin/federation/update-instance', {
 		host: instance.value.host,
 		isSuspended: suspended.value,
 	});
@@ -204,7 +205,7 @@ async function toggleSuspend(): Promise<void> {
 
 function refreshMetadata(): void {
 	if (!instance.value) throw new Error('No instance?');
-	os.api('admin/federation/refresh-remote-instance-metadata', {
+	misskeyApi('admin/federation/refresh-remote-instance-metadata', {
 		host: instance.value.host,
 	});
 	os.alert({
diff --git a/packages/frontend/src/pages/invite.vue b/packages/frontend/src/pages/invite.vue
index 25ce38e0ef..61030741fa 100644
--- a/packages/frontend/src/pages/invite.vue
+++ b/packages/frontend/src/pages/invite.vue
@@ -40,6 +40,7 @@ import { computed, ref, shallowRef } from 'vue';
 import type * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import MkButton from '@/components/MkButton.vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import MkInviteCode from '@/components/MkInviteCode.vue';
@@ -68,7 +69,7 @@ const resetCycle = computed<null | string>(() => {
 });
 
 async function create() {
-	const ticket = await os.api('invite/create');
+	const ticket = await misskeyApi('invite/create');
 	os.alert({
 		type: 'success',
 		title: i18n.ts.inviteCodeCreated,
@@ -87,7 +88,7 @@ function deleted(id: string) {
 }
 
 async function update() {
-	currentInviteLimit.value = (await os.api('invite/limit')).remaining;
+	currentInviteLimit.value = (await misskeyApi('invite/limit')).remaining;
 }
 
 update();
diff --git a/packages/frontend/src/pages/list.vue b/packages/frontend/src/pages/list.vue
index 936d078848..03db02a350 100644
--- a/packages/frontend/src/pages/list.vue
+++ b/packages/frontend/src/pages/list.vue
@@ -37,6 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { watch, computed, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { userPage } from '@/filters/user.js';
 import { i18n } from '@/i18n.js';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
@@ -53,12 +54,12 @@ const error = ref();
 const users = ref<Misskey.entities.UserDetailed[]>([]);
 
 function fetchList(): void {
-	os.api('users/lists/show', {
+	misskeyApi('users/lists/show', {
 		listId: props.listId,
 		forPublic: true,
 	}).then(_list => {
 		list.value = _list;
-		os.api('users/show', {
+		misskeyApi('users/show', {
 			userIds: list.value.userIds,
 		}).then(_users => {
 			users.value = _users;
diff --git a/packages/frontend/src/pages/miauth.vue b/packages/frontend/src/pages/miauth.vue
index ad9bea4548..539cb462ad 100644
--- a/packages/frontend/src/pages/miauth.vue
+++ b/packages/frontend/src/pages/miauth.vue
@@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref, computed } from 'vue';
 import MkSignin from '@/components/MkSignin.vue';
 import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { $i, login } from '@/account.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -65,7 +65,7 @@ const state = ref<string | null>(null);
 
 async function accept(): Promise<void> {
 	state.value = 'waiting';
-	await os.api('miauth/gen-token', {
+	await misskeyApi('miauth/gen-token', {
 		session: props.session,
 		name: props.name,
 		iconUrl: props.icon,
diff --git a/packages/frontend/src/pages/my-antennas/edit.vue b/packages/frontend/src/pages/my-antennas/edit.vue
index 9b3d56ee36..0648f5340f 100644
--- a/packages/frontend/src/pages/my-antennas/edit.vue
+++ b/packages/frontend/src/pages/my-antennas/edit.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import XAntenna from './editor.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { useRouter } from '@/router.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -32,7 +32,7 @@ function onAntennaUpdated() {
 	router.push('/my/antennas');
 }
 
-os.api('antennas/show', { antennaId: props.antennaId }).then((antennaResponse) => {
+misskeyApi('antennas/show', { antennaId: props.antennaId }).then((antennaResponse) => {
 	antenna.value = antennaResponse;
 });
 
diff --git a/packages/frontend/src/pages/my-antennas/editor.vue b/packages/frontend/src/pages/my-antennas/editor.vue
index 9b19206d96..45acbb2158 100644
--- a/packages/frontend/src/pages/my-antennas/editor.vue
+++ b/packages/frontend/src/pages/my-antennas/editor.vue
@@ -57,6 +57,7 @@ import MkTextarea from '@/components/MkTextarea.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
@@ -84,7 +85,7 @@ const userLists = ref<Misskey.entities.UserList[] | null>(null);
 
 watch(() => src.value, async () => {
 	if (src.value === 'list' && userLists.value === null) {
-		userLists.value = await os.api('users/lists/list');
+		userLists.value = await misskeyApi('users/lists/list');
 	}
 });
 
@@ -119,7 +120,7 @@ async function deleteAntenna() {
 	});
 	if (canceled) return;
 
-	await os.api('antennas/delete', {
+	await misskeyApi('antennas/delete', {
 		antennaId: props.antenna.id,
 	});
 
diff --git a/packages/frontend/src/pages/my-clips/index.vue b/packages/frontend/src/pages/my-clips/index.vue
index bc09e916e3..850222708e 100644
--- a/packages/frontend/src/pages/my-clips/index.vue
+++ b/packages/frontend/src/pages/my-clips/index.vue
@@ -32,6 +32,7 @@ import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkClipPreview from '@/components/MkClipPreview.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { clipsCache } from '@/cache.js';
@@ -48,7 +49,7 @@ const favorites = ref<Misskey.entities.Clip[] | null>(null);
 const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
 
 watch(tab, async () => {
-	favorites.value = await os.api('clips/my-favorites');
+	favorites.value = await misskeyApi('clips/my-favorites');
 });
 
 async function create() {
diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue
index 482fdcd8f2..5798070ad8 100644
--- a/packages/frontend/src/pages/my-lists/list.vue
+++ b/packages/frontend/src/pages/my-lists/list.vue
@@ -57,6 +57,7 @@ import { computed, ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { mainRouter } from '@/router.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
@@ -93,7 +94,7 @@ const membershipsPagination = {
 };
 
 function fetchList() {
-	os.api('users/lists/show', {
+	misskeyApi('users/lists/show', {
 		listId: props.listId,
 	}).then(_list => {
 		list.value = _list;
@@ -121,7 +122,7 @@ async function removeUser(item, ev) {
 		danger: true,
 		action: async () => {
 			if (!list.value) return;
-			os.api('users/lists/pull', {
+			misskeyApi('users/lists/pull', {
 				listId: list.value.id,
 				userId: item.userId,
 			}).then(() => {
@@ -136,7 +137,7 @@ async function showMembershipMenu(item, ev) {
 		text: item.withReplies ? i18n.ts.hideRepliesToOthersInTimeline : i18n.ts.showRepliesToOthersInTimeline,
 		icon: item.withReplies ? 'ti ti-messages-off' : 'ti ti-messages',
 		action: async () => {
-			os.api('users/lists/update-membership', {
+			misskeyApi('users/lists/update-membership', {
 				listId: list.value.id,
 				userId: item.userId,
 				withReplies: !item.withReplies,
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
index ff1e80aaab..7e353e629c 100644
--- a/packages/frontend/src/pages/note.vue
+++ b/packages/frontend/src/pages/note.vue
@@ -50,7 +50,7 @@ import MkNoteDetailed from '@/components/MkNoteDetailed.vue';
 import MkNotes from '@/components/MkNotes.vue';
 import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
 import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { dateString } from '@/filters/date.js';
@@ -90,13 +90,13 @@ function fetchNote() {
 	showPrev.value = false;
 	showNext.value = false;
 	note.value = null;
-	os.api('notes/show', {
+	misskeyApi('notes/show', {
 		noteId: props.noteId,
 	}).then(res => {
 		note.value = res;
 		// 古いノートは被クリップ数をカウントしていないので、2023-10-01以前のものは強制的にnotes/clipsを叩く
 		if (note.value.clippedCount > 0 || new Date(note.value.createdAt).getTime() < new Date('2023-10-01').getTime()) {
-			os.api('notes/clips', {
+			misskeyApi('notes/clips', {
 				noteId: note.value.id,
 			}).then((_clips) => {
 				clips.value = _clips;
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
index 9d6da653b4..561b0142aa 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
@@ -26,6 +26,7 @@ import * as Misskey from 'misskey-js';
 import XContainer from '../page-editor.container.vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
@@ -52,7 +53,7 @@ onMounted(async () => {
 	if (props.modelValue.fileId == null) {
 		await choose();
 	} else {
-		os.api('drive/files/show', {
+		misskeyApi('drive/files/show', {
 			fileId: props.modelValue.fileId,
 		}).then(fileResponse => {
 			file.value = fileResponse;
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue
index ea9d52c2be..ebabc98d23 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue
@@ -30,7 +30,7 @@ import MkInput from '@/components/MkInput.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkNote from '@/components/MkNote.vue';
 import MkNoteDetailed from '@/components/MkNoteDetailed.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
@@ -53,7 +53,7 @@ watch(id, async () => {
 		...props.modelValue,
 		note: id.value,
 	});
-	note.value = await os.api('notes/show', { noteId: id.value });
+	note.value = await misskeyApi('notes/show', { noteId: id.value });
 }, {
 	immediate: true,
 });
diff --git a/packages/frontend/src/pages/page-editor/page-editor.vue b/packages/frontend/src/pages/page-editor/page-editor.vue
index bcfbf5825f..496a8c3274 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.vue
@@ -71,6 +71,7 @@ import MkSwitch from '@/components/MkSwitch.vue';
 import MkInput from '@/components/MkInput.vue';
 import { url } from '@/config.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { selectFile } from '@/scripts/select-file.js';
 import { mainRouter } from '@/router.js';
 import { i18n } from '@/i18n.js';
@@ -106,7 +107,7 @@ watch(eyeCatchingImageId, async () => {
 	if (eyeCatchingImageId.value == null) {
 		eyeCatchingImage.value = null;
 	} else {
-		eyeCatchingImage.value = await os.api('drive/files/show', {
+		eyeCatchingImage.value = await misskeyApi('drive/files/show', {
 			fileId: eyeCatchingImageId.value,
 		});
 	}
@@ -149,7 +150,7 @@ function save() {
 
 	if (pageId.value) {
 		options.pageId = pageId.value;
-		os.api('pages/update', options)
+		misskeyApi('pages/update', options)
 			.then(page => {
 				currentName.value = name.value.trim();
 				os.alert({
@@ -158,7 +159,7 @@ function save() {
 				});
 			}).catch(onError);
 	} else {
-		os.api('pages/create', options)
+		misskeyApi('pages/create', options)
 			.then(created => {
 				pageId.value = created.id;
 				currentName.value = name.value.trim();
@@ -177,7 +178,7 @@ function del() {
 		text: i18n.t('removeAreYouSure', { x: title.value.trim() }),
 	}).then(({ canceled }) => {
 		if (canceled) return;
-		os.api('pages/delete', {
+		misskeyApi('pages/delete', {
 			pageId: pageId.value,
 		}).then(() => {
 			os.alert({
@@ -192,7 +193,7 @@ function del() {
 function duplicate() {
 	title.value = title.value + ' - copy';
 	name.value = name.value + '-copy';
-	os.api('pages/create', getSaveOptions()).then(created => {
+	misskeyApi('pages/create', getSaveOptions()).then(created => {
 		pageId.value = created.id;
 		currentName.value = name.value.trim();
 		os.alert({
@@ -236,11 +237,11 @@ function removeEyeCatchingImage() {
 
 async function init() {
 	if (props.initPageId) {
-		page.value = await os.api('pages/show', {
+		page.value = await misskeyApi('pages/show', {
 			pageId: props.initPageId,
 		});
 	} else if (props.initPageName && props.initUser) {
-		page.value = await os.api('pages/show', {
+		page.value = await misskeyApi('pages/show', {
 			name: props.initPageName,
 			username: props.initUser,
 		});
diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue
index 11c8e15e14..7b4f06d5cf 100644
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@@ -81,6 +81,7 @@ import * as Misskey from 'misskey-js';
 import XPage from '@/components/page/page.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { url } from '@/config.js';
 import MkMediaImage from '@/components/MkMediaImage.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
@@ -113,7 +114,7 @@ const path = computed(() => props.username + '/' + props.pageName);
 
 function fetchPage() {
 	page.value = null;
-	os.api('pages/show', {
+	misskeyApi('pages/show', {
 		name: props.pageName,
 		username: props.username,
 	}).then(async _page => {
diff --git a/packages/frontend/src/pages/registry.keys.vue b/packages/frontend/src/pages/registry.keys.vue
index 822a39c2e8..8ae8495de3 100644
--- a/packages/frontend/src/pages/registry.keys.vue
+++ b/packages/frontend/src/pages/registry.keys.vue
@@ -36,6 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { watch, computed, ref } from 'vue';
 import JSON5 from 'json5';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import FormLink from '@/components/form/link.vue';
@@ -54,7 +55,7 @@ const scope = computed(() => props.path ? props.path.split('/') : []);
 const keys = ref<any>(null);
 
 function fetchKeys() {
-	os.api('i/registry/keys-with-type', {
+	misskeyApi('i/registry/keys-with-type', {
 		scope: scope.value,
 		domain: props.domain === '@' ? null : props.domain,
 	}).then(res => {
diff --git a/packages/frontend/src/pages/registry.value.vue b/packages/frontend/src/pages/registry.value.vue
index 243c69eed5..f355550209 100644
--- a/packages/frontend/src/pages/registry.value.vue
+++ b/packages/frontend/src/pages/registry.value.vue
@@ -48,6 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { watch, computed, ref } from 'vue';
 import JSON5 from 'json5';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkButton from '@/components/MkButton.vue';
@@ -68,7 +69,7 @@ const value = ref<any>(null);
 const valueForEditor = ref<string | null>(null);
 
 function fetchValue() {
-	os.api('i/registry/get-detail', {
+	misskeyApi('i/registry/get-detail', {
 		scope: scope.value,
 		key: key.value,
 		domain: props.domain === '@' ? null : props.domain,
diff --git a/packages/frontend/src/pages/registry.vue b/packages/frontend/src/pages/registry.vue
index f45f8922ad..ca54d23b6f 100644
--- a/packages/frontend/src/pages/registry.vue
+++ b/packages/frontend/src/pages/registry.vue
@@ -26,6 +26,7 @@ import { ref, computed } from 'vue';
 import * as Misskey from 'misskey-js';
 import JSON5 from 'json5';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import FormLink from '@/components/form/link.vue';
@@ -35,7 +36,7 @@ import MkButton from '@/components/MkButton.vue';
 const scopesWithDomain = ref<Misskey.entities.IRegistryScopesWithDomainResponse | null>(null);
 
 function fetchScopes() {
-	os.api('i/registry/scopes-with-domain').then(res => {
+	misskeyApi('i/registry/scopes-with-domain').then(res => {
 		scopesWithDomain.value = res;
 	});
 }
diff --git a/packages/frontend/src/pages/role.vue b/packages/frontend/src/pages/role.vue
index 10642ddefe..67f18ee87e 100644
--- a/packages/frontend/src/pages/role.vue
+++ b/packages/frontend/src/pages/role.vue
@@ -38,7 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import MkUserList from '@/components/MkUserList.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
@@ -59,7 +59,7 @@ const error = ref();
 const visible = ref(false);
 
 watch(() => props.role, () => {
-	os.api('roles/show', {
+	misskeyApi('roles/show', {
 		roleId: props.role,
 	}).then(res => {
 		role.value = res;
diff --git a/packages/frontend/src/pages/search.note.vue b/packages/frontend/src/pages/search.note.vue
index 5c0b54e2d9..1b12910a38 100644
--- a/packages/frontend/src/pages/search.note.vue
+++ b/packages/frontend/src/pages/search.note.vue
@@ -49,6 +49,7 @@ import MkButton from '@/components/MkButton.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
 import { useRouter } from '@/router.js';
 import MkFolder from '@/components/MkFolder.vue';
@@ -74,7 +75,7 @@ async function search() {
 	if (query == null || query === '') return;
 
 	if (query.startsWith('https://')) {
-		const promise = os.api('ap/show', {
+		const promise = misskeyApi('ap/show', {
 			uri: query,
 		});
 
diff --git a/packages/frontend/src/pages/search.user.vue b/packages/frontend/src/pages/search.user.vue
index 829c706e0e..5e9048ee57 100644
--- a/packages/frontend/src/pages/search.user.vue
+++ b/packages/frontend/src/pages/search.user.vue
@@ -33,6 +33,7 @@ import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useRouter } from '@/router.js';
 
 const router = useRouter();
@@ -48,7 +49,7 @@ async function search() {
 	if (query == null || query === '') return;
 
 	if (query.startsWith('https://')) {
-		const promise = os.api('ap/show', {
+		const promise = misskeyApi('ap/show', {
 			uri: query,
 		});
 
diff --git a/packages/frontend/src/pages/settings/accounts.vue b/packages/frontend/src/pages/settings/accounts.vue
index 4320ad7e9e..1c96773b9b 100644
--- a/packages/frontend/src/pages/settings/accounts.vue
+++ b/packages/frontend/src/pages/settings/accounts.vue
@@ -24,6 +24,7 @@ import type * as Misskey from 'misskey-js';
 import FormSuspense from '@/components/form/suspense.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { getAccounts, addAccount as addAccounts, removeAccount as _removeAccount, login, $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -36,7 +37,7 @@ const init = async () => {
 	getAccounts().then(accounts => {
 		storedAccounts.value = accounts.filter(x => x.id !== $i!.id);
 
-		return os.api('users/show', {
+		return misskeyApi('users/show', {
 			userIds: storedAccounts.value.map(x => x.id),
 		});
 	}).then(response => {
diff --git a/packages/frontend/src/pages/settings/api.vue b/packages/frontend/src/pages/settings/api.vue
index eee7884aaa..35275c7dcf 100644
--- a/packages/frontend/src/pages/settings/api.vue
+++ b/packages/frontend/src/pages/settings/api.vue
@@ -16,6 +16,7 @@ import { defineAsyncComponent, ref, computed } from 'vue';
 import FormLink from '@/components/form/link.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
@@ -25,7 +26,7 @@ function generateToken() {
 	os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, {
 		done: async result => {
 			const { name, permissions } = result;
-			const { token } = await os.api('miauth/gen-token', {
+			const { token } = await misskeyApi('miauth/gen-token', {
 				session: null,
 				name: name,
 				permission: permissions,
diff --git a/packages/frontend/src/pages/settings/apps.vue b/packages/frontend/src/pages/settings/apps.vue
index 419bcd6fee..4a778d4b38 100644
--- a/packages/frontend/src/pages/settings/apps.vue
+++ b/packages/frontend/src/pages/settings/apps.vue
@@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
 import FormPagination from '@/components/MkPagination.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkKeyValue from '@/components/MkKeyValue.vue';
@@ -66,7 +66,7 @@ const pagination = {
 };
 
 function revoke(token) {
-	os.api('i/revoke-token', { tokenId: token.id }).then(() => {
+	misskeyApi('i/revoke-token', { tokenId: token.id }).then(() => {
 		list.value.reload();
 	});
 }
diff --git a/packages/frontend/src/pages/settings/avatar-decoration.vue b/packages/frontend/src/pages/settings/avatar-decoration.vue
index eb25f25ec8..70565cc990 100644
--- a/packages/frontend/src/pages/settings/avatar-decoration.vue
+++ b/packages/frontend/src/pages/settings/avatar-decoration.vue
@@ -50,6 +50,7 @@ import * as Misskey from 'misskey-js';
 import XDecoration from './avatar-decoration.decoration.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { signinRequired } from '@/account.js';
 import MkInfo from '@/components/MkInfo.vue';
@@ -60,7 +61,7 @@ const $i = signinRequired();
 const loading = ref(true);
 const avatarDecorations = ref<Misskey.entities.GetAvatarDecorationsResponse>([]);
 
-os.api('get-avatar-decorations').then(_avatarDecorations => {
+misskeyApi('get-avatar-decorations').then(_avatarDecorations => {
 	avatarDecorations.value = _avatarDecorations;
 	loading.value = false;
 });
diff --git a/packages/frontend/src/pages/settings/drive-cleaner.vue b/packages/frontend/src/pages/settings/drive-cleaner.vue
index 4efcdb31da..496c8d94dc 100644
--- a/packages/frontend/src/pages/settings/drive-cleaner.vue
+++ b/packages/frontend/src/pages/settings/drive-cleaner.vue
@@ -51,6 +51,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, ref, watch } from 'vue';
 import tinycolor from 'tinycolor2';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import MkPagination from '@/components/MkPagination.vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import { i18n } from '@/i18n.js';
@@ -94,7 +95,7 @@ watch(sortModeSelect, () => {
 
 function fetchDriveInfo(): void {
 	fetching.value = true;
-	os.api('drive').then(info => {
+	misskeyApi('drive').then(info => {
 		capacity.value = info.capacity;
 		usage.value = info.usage;
 		fetching.value = false;
diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue
index e3a7b8ca80..d4b23f47c6 100644
--- a/packages/frontend/src/pages/settings/drive.vue
+++ b/packages/frontend/src/pages/settings/drive.vue
@@ -66,6 +66,7 @@ import FormSection from '@/components/form/section.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import FormSplit from '@/components/form/split.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import bytes from '@/filters/bytes.js';
 import { defaultStore } from '@/store.js';
 import MkChart from '@/components/MkChart.vue';
@@ -95,14 +96,14 @@ const meterStyle = computed(() => {
 
 const keepOriginalUploading = computed(defaultStore.makeGetterSetter('keepOriginalUploading'));
 
-os.api('drive').then(info => {
+misskeyApi('drive').then(info => {
 	capacity.value = info.capacity;
 	usage.value = info.usage;
 	fetching.value = false;
 });
 
 if (defaultStore.state.uploadFolder) {
-	os.api('drive/folders/show', {
+	misskeyApi('drive/folders/show', {
 		folderId: defaultStore.state.uploadFolder,
 	}).then(response => {
 		uploadFolder.value = response;
@@ -114,7 +115,7 @@ function chooseUploadFolder() {
 		defaultStore.set('uploadFolder', folder ? folder.id : null);
 		os.success();
 		if (defaultStore.state.uploadFolder) {
-			uploadFolder.value = await os.api('drive/folders/show', {
+			uploadFolder.value = await misskeyApi('drive/folders/show', {
 				folderId: defaultStore.state.uploadFolder,
 			});
 		} else {
@@ -124,7 +125,7 @@ function chooseUploadFolder() {
 }
 
 function saveProfile() {
-	os.api('i/update', {
+	misskeyApi('i/update', {
 		alwaysMarkNsfw: !!alwaysMarkNsfw.value,
 		autoSensitive: !!autoSensitive.value,
 	}).catch(err => {
diff --git a/packages/frontend/src/pages/settings/email.vue b/packages/frontend/src/pages/settings/email.vue
index 015152c50a..c2205dcb0e 100644
--- a/packages/frontend/src/pages/settings/email.vue
+++ b/packages/frontend/src/pages/settings/email.vue
@@ -54,6 +54,7 @@ import MkInfo from '@/components/MkInfo.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { signinRequired } from '@/account.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -64,7 +65,7 @@ const $i = signinRequired();
 const emailAddress = ref($i.email);
 
 const onChangeReceiveAnnouncementEmail = (v) => {
-	os.api('i/update', {
+	misskeyApi('i/update', {
 		receiveAnnouncementEmail: v,
 	});
 };
@@ -87,7 +88,7 @@ const emailNotification_follow = ref($i.emailNotificationTypes.includes('follow'
 const emailNotification_receiveFollowRequest = ref($i.emailNotificationTypes.includes('receiveFollowRequest'));
 
 const saveNotificationSettings = () => {
-	os.api('i/update', {
+	misskeyApi('i/update', {
 		emailNotificationTypes: [
 			...[emailNotification_mention.value ? 'mention' : null],
 			...[emailNotification_reply.value ? 'reply' : null],
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 3e5f5cb8c8..3d5fa66d9f 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -234,6 +234,7 @@ import MkInfo from '@/components/MkInfo.vue';
 import { langs } from '@/config.js';
 import { defaultStore } from '@/store.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { unisonReload } from '@/scripts/unison-reload.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -368,7 +369,7 @@ function removeEmojiIndex(lang: string) {
 }
 
 async function setPinnedList() {
-	const lists = await os.api('users/lists/list');
+	const lists = await misskeyApi('users/lists/list');
 	const { canceled, result: list } = await os.select({
 		title: i18n.ts.selectList,
 		items: lists.map(x => ({
diff --git a/packages/frontend/src/pages/settings/import-export.vue b/packages/frontend/src/pages/settings/import-export.vue
index d2dc3ea8bd..990eff99c1 100644
--- a/packages/frontend/src/pages/settings/import-export.vue
+++ b/packages/frontend/src/pages/settings/import-export.vue
@@ -117,6 +117,7 @@ import FormSection from '@/components/form/section.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { selectFile } from '@/scripts/select-file.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -149,15 +150,15 @@ const onError = (ev) => {
 };
 
 const exportNotes = () => {
-	os.api('i/export-notes', {}).then(onExportSuccess).catch(onError);
+	misskeyApi('i/export-notes', {}).then(onExportSuccess).catch(onError);
 };
 
 const exportFavorites = () => {
-	os.api('i/export-favorites', {}).then(onExportSuccess).catch(onError);
+	misskeyApi('i/export-favorites', {}).then(onExportSuccess).catch(onError);
 };
 
 const exportFollowing = () => {
-	os.api('i/export-following', {
+	misskeyApi('i/export-following', {
 		excludeMuting: excludeMutingUsers.value,
 		excludeInactive: excludeInactiveUsers.value,
 	})
@@ -165,24 +166,24 @@ const exportFollowing = () => {
 };
 
 const exportBlocking = () => {
-	os.api('i/export-blocking', {}).then(onExportSuccess).catch(onError);
+	misskeyApi('i/export-blocking', {}).then(onExportSuccess).catch(onError);
 };
 
 const exportUserLists = () => {
-	os.api('i/export-user-lists', {}).then(onExportSuccess).catch(onError);
+	misskeyApi('i/export-user-lists', {}).then(onExportSuccess).catch(onError);
 };
 
 const exportMuting = () => {
-	os.api('i/export-mute', {}).then(onExportSuccess).catch(onError);
+	misskeyApi('i/export-mute', {}).then(onExportSuccess).catch(onError);
 };
 
 const exportAntennas = () => {
-	os.api('i/export-antennas', {}).then(onExportSuccess).catch(onError);
+	misskeyApi('i/export-antennas', {}).then(onExportSuccess).catch(onError);
 };
 
 const importFollowing = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-following', {
+	misskeyApi('i/import-following', {
 		fileId: file.id,
 		withReplies: withReplies.value,
 	}).then(onImportSuccess).catch(onError);
@@ -190,22 +191,22 @@ const importFollowing = async (ev) => {
 
 const importUserLists = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-user-lists', { fileId: file.id }).then(onImportSuccess).catch(onError);
+	misskeyApi('i/import-user-lists', { fileId: file.id }).then(onImportSuccess).catch(onError);
 };
 
 const importMuting = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-muting', { fileId: file.id }).then(onImportSuccess).catch(onError);
+	misskeyApi('i/import-muting', { fileId: file.id }).then(onImportSuccess).catch(onError);
 };
 
 const importBlocking = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-blocking', { fileId: file.id }).then(onImportSuccess).catch(onError);
+	misskeyApi('i/import-blocking', { fileId: file.id }).then(onImportSuccess).catch(onError);
 };
 
 const importAntennas = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-antennas', { fileId: file.id }).then(onImportSuccess).catch(onError);
+	misskeyApi('i/import-antennas', { fileId: file.id }).then(onImportSuccess).catch(onError);
 };
 
 const headerActions = computed(() => []);
diff --git a/packages/frontend/src/pages/settings/migration.vue b/packages/frontend/src/pages/settings/migration.vue
index d4c51a7c80..2699f0ad63 100644
--- a/packages/frontend/src/pages/settings/migration.vue
+++ b/packages/frontend/src/pages/settings/migration.vue
@@ -66,6 +66,7 @@ import MkButton from '@/components/MkButton.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkUserInfo from '@/components/MkUserInfo.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { signinRequired } from '@/account.js';
@@ -79,13 +80,13 @@ const accountAliases = ref(['']);
 
 async function init() {
 	if ($i.movedTo) {
-		movedTo.value = await os.api('users/show', { userId: $i.movedTo });
+		movedTo.value = await misskeyApi('users/show', { userId: $i.movedTo });
 	} else {
 		moveToAccount.value = '';
 	}
 
 	if ($i.alsoKnownAs && $i.alsoKnownAs.length > 0) {
-		const alsoKnownAs = await os.api('users/show', { userIds: $i.alsoKnownAs });
+		const alsoKnownAs = await misskeyApi('users/show', { userIds: $i.alsoKnownAs });
 		accountAliases.value = (alsoKnownAs && alsoKnownAs.length > 0) ? alsoKnownAs.map(user => `@${Misskey.acct.toString(user)}`) : [''];
 	} else {
 		accountAliases.value = [''];
diff --git a/packages/frontend/src/pages/settings/mute-block.instance-mute.vue b/packages/frontend/src/pages/settings/mute-block.instance-mute.vue
index 8dc3e1acb4..f986be41c3 100644
--- a/packages/frontend/src/pages/settings/mute-block.instance-mute.vue
+++ b/packages/frontend/src/pages/settings/mute-block.instance-mute.vue
@@ -19,8 +19,8 @@ import { ref, watch } from 'vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os.js';
 import { signinRequired } from '@/account.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 
 const $i = signinRequired();
@@ -34,7 +34,7 @@ async function save() {
 		.map(el => el.trim())
 		.filter(el => el);
 
-	await os.api('i/update', {
+	await misskeyApi('i/update', {
 		mutedInstances: mutes,
 	});
 
diff --git a/packages/frontend/src/pages/settings/mute-block.vue b/packages/frontend/src/pages/settings/mute-block.vue
index dfb72a87dd..bc31025e59 100644
--- a/packages/frontend/src/pages/settings/mute-block.vue
+++ b/packages/frontend/src/pages/settings/mute-block.vue
@@ -135,6 +135,7 @@ import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { infoImageUrl } from '@/instance.js';
 import { signinRequired } from '@/account.js';
 import MkFolder from '@/components/MkFolder.vue';
@@ -218,11 +219,11 @@ async function toggleBlockItem(item) {
 }
 
 async function saveMutedWords(mutedWords: (string | string[])[]) {
-	await os.api('i/update', { mutedWords });
+	await misskeyApi('i/update', { mutedWords });
 }
 
 async function saveHardMutedWords(hardMutedWords: (string | string[])[]) {
-	await os.api('i/update', { hardMutedWords });
+	await misskeyApi('i/update', { hardMutedWords });
 }
 
 const headerActions = computed(() => []);
diff --git a/packages/frontend/src/pages/settings/notifications.vue b/packages/frontend/src/pages/settings/notifications.vue
index 1e9515e588..766f33ff65 100644
--- a/packages/frontend/src/pages/settings/notifications.vue
+++ b/packages/frontend/src/pages/settings/notifications.vue
@@ -63,6 +63,7 @@ import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import * as os from '@/os.js';
 import { signinRequired } from '@/account.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
@@ -75,7 +76,7 @@ const nonConfigurableNotificationTypes = ['note', 'roleAssigned', 'followRequest
 const allowButton = shallowRef<InstanceType<typeof MkPushNotificationAllowButton>>();
 const pushRegistrationInServer = computed(() => allowButton.value?.pushRegistrationInServer);
 const sendReadMessage = computed(() => pushRegistrationInServer.value?.sendReadMessage || false);
-const userLists = await os.api('users/lists/list');
+const userLists = await misskeyApi('users/lists/list');
 
 async function readAllUnreadNotes() {
 	await os.apiWithDialog('i/read-all-unread-notes');
@@ -109,7 +110,7 @@ function onChangeSendReadMessage(v: boolean) {
 }
 
 function testNotification(): void {
-	os.api('notifications/test-notification');
+	misskeyApi('notifications/test-notification');
 }
 
 const headerActions = computed(() => []);
diff --git a/packages/frontend/src/pages/settings/other.vue b/packages/frontend/src/pages/settings/other.vue
index f6f0b8daa4..c4367da1aa 100644
--- a/packages/frontend/src/pages/settings/other.vue
+++ b/packages/frontend/src/pages/settings/other.vue
@@ -93,6 +93,7 @@ import FormInfo from '@/components/MkInfo.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore } from '@/store.js';
 import { signout, signinRequired } from '@/account.js';
 import { i18n } from '@/i18n.js';
@@ -148,7 +149,7 @@ async function updateRepliesAll(withReplies: boolean) {
 	});
 	if (canceled) return;
 
-	os.api('following/update-all', { withReplies });
+	misskeyApi('following/update-all', { withReplies });
 }
 
 watch([
diff --git a/packages/frontend/src/pages/settings/preferences-backups.vue b/packages/frontend/src/pages/settings/preferences-backups.vue
index cc6223218f..ea9c5949ab 100644
--- a/packages/frontend/src/pages/settings/preferences-backups.vue
+++ b/packages/frontend/src/pages/settings/preferences-backups.vue
@@ -43,6 +43,7 @@ import FormSection from '@/components/form/section.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { ColdDeviceStorage, defaultStore } from '@/store.js';
 import { unisonReload } from '@/scripts/unison-reload.js';
 import { useStream } from '@/stream.js';
@@ -144,7 +145,7 @@ const connection = $i && useStream().useChannel('main');
 
 const profiles = ref<Record<string, Profile> | null>(null);
 
-os.api('i/registry/get-all', { scope })
+misskeyApi('i/registry/get-all', { scope })
 	.then(res => {
 		profiles.value = res || {};
 	});
diff --git a/packages/frontend/src/pages/settings/privacy.vue b/packages/frontend/src/pages/settings/privacy.vue
index 4f5bc847ac..3698590d51 100644
--- a/packages/frontend/src/pages/settings/privacy.vue
+++ b/packages/frontend/src/pages/settings/privacy.vue
@@ -77,7 +77,7 @@ import MkSwitch from '@/components/MkSwitch.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import FormSection from '@/components/form/section.vue';
 import MkFolder from '@/components/MkFolder.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { signinRequired } from '@/account.js';
@@ -101,7 +101,7 @@ const rememberNoteVisibility = computed(defaultStore.makeGetterSetter('rememberN
 const keepCw = computed(defaultStore.makeGetterSetter('keepCw'));
 
 function save() {
-	os.api('i/update', {
+	misskeyApi('i/update', {
 		isLocked: !!isLocked.value,
 		autoAcceptFollowed: !!autoAcceptFollowed.value,
 		noCrawle: !!noCrawle.value,
diff --git a/packages/frontend/src/pages/settings/security.vue b/packages/frontend/src/pages/settings/security.vue
index 3f85f27e47..0787e0c3a3 100644
--- a/packages/frontend/src/pages/settings/security.vue
+++ b/packages/frontend/src/pages/settings/security.vue
@@ -47,6 +47,7 @@ import FormSlot from '@/components/form/slot.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
@@ -92,7 +93,7 @@ async function regenerateToken() {
 	const auth = await os.authenticateDialog();
 	if (auth.canceled) return;
 
-	os.api('i/regenerate-token', {
+	misskeyApi('i/regenerate-token', {
 		password: auth.result.password,
 		token: auth.result.token,
 	});
diff --git a/packages/frontend/src/pages/settings/sounds.sound.vue b/packages/frontend/src/pages/settings/sounds.sound.vue
index 2f4cd1be2c..57bafce0ac 100644
--- a/packages/frontend/src/pages/settings/sounds.sound.vue
+++ b/packages/frontend/src/pages/settings/sounds.sound.vue
@@ -32,6 +32,7 @@ import MkButton from '@/components/MkButton.vue';
 import MkRange from '@/components/MkRange.vue';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { playFile, soundsTypes, getSoundDuration } from '@/scripts/sound.js';
 import { selectFile } from '@/scripts/select-file.js';
 
@@ -53,7 +54,7 @@ const fileName = ref<string>('');
 const volume = ref(props.volume);
 
 if (type.value === '_driveFile_' && fileId.value) {
-	const apiRes = await os.api('drive/files/show', {
+	const apiRes = await misskeyApi('drive/files/show', {
 		fileId: fileId.value,
 	});
 	fileName.value = apiRes.name;
diff --git a/packages/frontend/src/pages/settings/statusbar.vue b/packages/frontend/src/pages/settings/statusbar.vue
index 294da80bb5..b347a869f4 100644
--- a/packages/frontend/src/pages/settings/statusbar.vue
+++ b/packages/frontend/src/pages/settings/statusbar.vue
@@ -21,7 +21,7 @@ import { v4 as uuid } from 'uuid';
 import XStatusbar from './statusbar.statusbar.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -31,7 +31,7 @@ const statusbars = defaultStore.reactiveState.statusbars;
 const userLists = ref<Misskey.entities.UserList[] | null>(null);
 
 onMounted(() => {
-	os.api('users/lists/list').then(res => {
+	misskeyApi('users/lists/list').then(res => {
 		userLists.value = res;
 	});
 });
diff --git a/packages/frontend/src/pages/settings/webhook.edit.vue b/packages/frontend/src/pages/settings/webhook.edit.vue
index c1695dc6a5..9eb344bd46 100644
--- a/packages/frontend/src/pages/settings/webhook.edit.vue
+++ b/packages/frontend/src/pages/settings/webhook.edit.vue
@@ -48,6 +48,7 @@ import FormSection from '@/components/form/section.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { useRouter } from '@/router.js';
@@ -58,7 +59,7 @@ const props = defineProps<{
 	webhookId: string;
 }>();
 
-const webhook = await os.api('i/webhooks/show', {
+const webhook = await misskeyApi('i/webhooks/show', {
 	webhookId: props.webhookId,
 });
 
diff --git a/packages/frontend/src/pages/share.vue b/packages/frontend/src/pages/share.vue
index cb5acf3afa..030cfbb905 100644
--- a/packages/frontend/src/pages/share.vue
+++ b/packages/frontend/src/pages/share.vue
@@ -37,6 +37,7 @@ import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import MkPostForm from '@/components/MkPostForm.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { postMessageToParentWindow } from '@/scripts/post-message.js';
 import { i18n } from '@/i18n.js';
@@ -76,7 +77,7 @@ async function init() {
 			]
 			// TypeScriptの指示通りに変換する
 				.map(q => 'username' in q ? { username: q.username, host: q.host === null ? undefined : q.host } : q)
-				.map(q => os.api('users/show', q)
+				.map(q => misskeyApi('users/show', q)
 					.then(user => {
 						visibleUsers.value.push(user);
 					}, () => {
@@ -91,11 +92,11 @@ async function init() {
 		const replyId = urlParams.get('replyId');
 		const replyUri = urlParams.get('replyUri');
 		if (replyId) {
-			reply.value = await os.api('notes/show', {
+			reply.value = await misskeyApi('notes/show', {
 				noteId: replyId,
 			});
 		} else if (replyUri) {
-			const obj = await os.api('ap/show', {
+			const obj = await misskeyApi('ap/show', {
 				uri: replyUri,
 			});
 			if (obj.type === 'Note') {
@@ -108,11 +109,11 @@ async function init() {
 		const renoteId = urlParams.get('renoteId');
 		const renoteUri = urlParams.get('renoteUri');
 		if (renoteId) {
-			renote.value = await os.api('notes/show', {
+			renote.value = await misskeyApi('notes/show', {
 				noteId: renoteId,
 			});
 		} else if (renoteUri) {
-			const obj = await os.api('ap/show', {
+			const obj = await misskeyApi('ap/show', {
 				uri: renoteUri,
 			});
 			if (obj.type === 'Note') {
@@ -126,7 +127,7 @@ async function init() {
 		if (fileIds) {
 			await Promise.all(
 				fileIds.split(',')
-					.map(fileId => os.api('drive/files/show', { fileId })
+					.map(fileId => misskeyApi('drive/files/show', { fileId })
 						.then(file => {
 							files.value.push(file);
 						}, () => {
diff --git a/packages/frontend/src/pages/signup-complete.vue b/packages/frontend/src/pages/signup-complete.vue
index 638c7e8773..3f007b7afc 100644
--- a/packages/frontend/src/pages/signup-complete.vue
+++ b/packages/frontend/src/pages/signup-complete.vue
@@ -31,6 +31,7 @@ import MkAnimBg from '@/components/MkAnimBg.vue';
 import { login } from '@/account.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
 const submitting = ref(false);
 
@@ -42,7 +43,7 @@ function submit() {
 	if (submitting.value) return;
 	submitting.value = true;
 
-	os.api('signup-pending', {
+	misskeyApi('signup-pending', {
 		code: props.code,
 	}).then(res => {
 		return login(res.i, '/');
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index 1b24f98bdb..6fe8963f51 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -40,6 +40,7 @@ import MkInfo from '@/components/MkInfo.vue';
 import MkPostForm from '@/components/MkPostForm.vue';
 import { scroll } from '@/scripts/scroll.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
@@ -122,7 +123,7 @@ async function chooseAntenna(ev: MouseEvent): Promise<void> {
 }
 
 async function chooseChannel(ev: MouseEvent): Promise<void> {
-	const channels = await os.api('channels/my-favorites', {
+	const channels = await misskeyApi('channels/my-favorites', {
 		limit: 100,
 	});
 	const items: MenuItem[] = [
diff --git a/packages/frontend/src/pages/user-list-timeline.vue b/packages/frontend/src/pages/user-list-timeline.vue
index ba22d784c7..19c376c77b 100644
--- a/packages/frontend/src/pages/user-list-timeline.vue
+++ b/packages/frontend/src/pages/user-list-timeline.vue
@@ -28,7 +28,7 @@ import { computed, watch, ref, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkTimeline from '@/components/MkTimeline.vue';
 import { scroll } from '@/scripts/scroll.js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useRouter } from '@/router.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
@@ -45,7 +45,7 @@ const tlEl = shallowRef<InstanceType<typeof MkTimeline>>();
 const rootEl = shallowRef<HTMLElement>();
 
 watch(() => props.listId, async () => {
-	list.value = await os.api('users/lists/show', {
+	list.value = await misskeyApi('users/lists/show', {
 		listId: props.listId,
 	});
 }, { immediate: true });
diff --git a/packages/frontend/src/pages/user/activity.following.vue b/packages/frontend/src/pages/user/activity.following.vue
index bd1159cb32..798b640647 100644
--- a/packages/frontend/src/pages/user/activity.following.vue
+++ b/packages/frontend/src/pages/user/activity.following.vue
@@ -18,7 +18,7 @@ import { onMounted, shallowRef, ref } from 'vue';
 import { Chart, ChartDataset } from 'chart.js';
 import * as Misskey from 'misskey-js';
 import gradient from 'chartjs-plugin-gradient';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore } from '@/store.js';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
 import { chartVLine } from '@/scripts/chart-vline.js';
@@ -61,7 +61,7 @@ async function renderChart() {
 		}));
 	};
 
-	const raw = await os.api('charts/user/following', { userId: props.user.id, limit: chartLimit, span: 'day' });
+	const raw = await misskeyApi('charts/user/following', { userId: props.user.id, limit: chartLimit, span: 'day' });
 
 	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
 
diff --git a/packages/frontend/src/pages/user/activity.heatmap.vue b/packages/frontend/src/pages/user/activity.heatmap.vue
index ff46db9653..ea3276a890 100644
--- a/packages/frontend/src/pages/user/activity.heatmap.vue
+++ b/packages/frontend/src/pages/user/activity.heatmap.vue
@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { onMounted, nextTick, watch, shallowRef, ref } from 'vue';
 import { Chart } from 'chart.js';
 import * as Misskey from 'misskey-js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore } from '@/store.js';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
 import { alpha } from '@/scripts/color.js';
@@ -74,7 +74,7 @@ async function renderChart() {
 	let values;
 
 	if (props.src === 'notes') {
-		const raw = await os.api('charts/user/notes', { userId: props.user.id, limit: chartLimit, span: 'day' });
+		const raw = await misskeyApi('charts/user/notes', { userId: props.user.id, limit: chartLimit, span: 'day' });
 		values = raw.inc;
 	}
 
diff --git a/packages/frontend/src/pages/user/activity.notes.vue b/packages/frontend/src/pages/user/activity.notes.vue
index dd035641d8..a55d98d989 100644
--- a/packages/frontend/src/pages/user/activity.notes.vue
+++ b/packages/frontend/src/pages/user/activity.notes.vue
@@ -18,7 +18,7 @@ import { onMounted, shallowRef, ref } from 'vue';
 import { Chart, ChartDataset } from 'chart.js';
 import * as Misskey from 'misskey-js';
 import gradient from 'chartjs-plugin-gradient';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore } from '@/store.js';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
 import { chartVLine } from '@/scripts/chart-vline.js';
@@ -61,7 +61,7 @@ async function renderChart() {
 		}));
 	};
 
-	const raw = await os.api('charts/user/notes', { userId: props.user.id, limit: chartLimit, span: 'day' });
+	const raw = await misskeyApi('charts/user/notes', { userId: props.user.id, limit: chartLimit, span: 'day' });
 
 	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
 
diff --git a/packages/frontend/src/pages/user/activity.pv.vue b/packages/frontend/src/pages/user/activity.pv.vue
index 2dd9a1570f..fe9acd322c 100644
--- a/packages/frontend/src/pages/user/activity.pv.vue
+++ b/packages/frontend/src/pages/user/activity.pv.vue
@@ -18,7 +18,7 @@ import { onMounted, shallowRef, ref } from 'vue';
 import { Chart, ChartDataset } from 'chart.js';
 import * as Misskey from 'misskey-js';
 import gradient from 'chartjs-plugin-gradient';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore } from '@/store.js';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
 import { chartVLine } from '@/scripts/chart-vline.js';
@@ -61,7 +61,7 @@ async function renderChart() {
 		}));
 	};
 
-	const raw = await os.api('charts/user/pv', { userId: props.user.id, limit: chartLimit, span: 'day' });
+	const raw = await misskeyApi('charts/user/pv', { userId: props.user.id, limit: chartLimit, span: 'day' });
 
 	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
 
diff --git a/packages/frontend/src/pages/user/followers.vue b/packages/frontend/src/pages/user/followers.vue
index a4d516a1de..23c7fc0494 100644
--- a/packages/frontend/src/pages/user/followers.vue
+++ b/packages/frontend/src/pages/user/followers.vue
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import XFollowList from './follow-list.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 
@@ -37,7 +37,7 @@ const error = ref<any>(null);
 function fetchUser(): void {
 	if (props.acct == null) return;
 	user.value = null;
-	os.api('users/show', Misskey.acct.parse(props.acct)).then(u => {
+	misskeyApi('users/show', Misskey.acct.parse(props.acct)).then(u => {
 		user.value = u;
 	}).catch(err => {
 		error.value = err;
diff --git a/packages/frontend/src/pages/user/following.vue b/packages/frontend/src/pages/user/following.vue
index 99cb098d65..d1dc935884 100644
--- a/packages/frontend/src/pages/user/following.vue
+++ b/packages/frontend/src/pages/user/following.vue
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import XFollowList from './follow-list.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 
@@ -37,7 +37,7 @@ const error = ref<any>(null);
 function fetchUser(): void {
 	if (props.acct == null) return;
 	user.value = null;
-	os.api('users/show', Misskey.acct.parse(props.acct)).then(u => {
+	misskeyApi('users/show', Misskey.acct.parse(props.acct)).then(u => {
 		user.value = u;
 	}).catch(err => {
 		error.value = err;
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 2a9eb5f8e4..5258165d7c 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -171,7 +171,7 @@ import { i18n } from '@/i18n.js';
 import { $i, iAmModerator } from '@/account.js';
 import { dateString } from '@/filters/date.js';
 import { confetti } from '@/scripts/confetti.js';
-import { api } from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
 
 function calcAge(birthdate: string): number {
@@ -215,7 +215,7 @@ const moderationNote = ref(props.user.moderationNote);
 const editModerationNote = ref(false);
 
 watch(moderationNote, async () => {
-	await os.api('admin/update-user-note', { userId: props.user.id, text: moderationNote.value });
+	await misskeyApi('admin/update-user-note', { userId: props.user.id, text: moderationNote.value });
 });
 
 const style = computed(() => {
@@ -266,7 +266,7 @@ function adjustMemoTextarea() {
 }
 
 async function updateMemo() {
-	await api('users/update-memo', {
+	await misskeyApi('users/update-memo', {
 		memo: memoDraft.value,
 		userId: props.user.id,
 	});
diff --git a/packages/frontend/src/pages/user/index.files.vue b/packages/frontend/src/pages/user/index.files.vue
index 32561e6b0b..506d324683 100644
--- a/packages/frontend/src/pages/user/index.files.vue
+++ b/packages/frontend/src/pages/user/index.files.vue
@@ -37,7 +37,7 @@ import { onMounted, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { getStaticImageUrl } from '@/scripts/media-proxy.js';
 import { notePage } from '@/filters/note.js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import MkContainer from '@/components/MkContainer.vue';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { defaultStore } from '@/store.js';
@@ -61,7 +61,7 @@ function thumbnail(image: Misskey.entities.DriveFile): string {
 }
 
 onMounted(() => {
-	os.api('users/notes', {
+	misskeyApi('users/notes', {
 		userId: props.user.id,
 		withFiles: true,
 		limit: 15,
diff --git a/packages/frontend/src/pages/user/index.vue b/packages/frontend/src/pages/user/index.vue
index 1e9a860974..95869e7b8c 100644
--- a/packages/frontend/src/pages/user/index.vue
+++ b/packages/frontend/src/pages/user/index.vue
@@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { defineAsyncComponent, computed, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { acct as getAcct } from '@/filters/user.js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
@@ -63,7 +63,7 @@ const error = ref<any>(null);
 function fetchUser(): void {
 	if (props.acct == null) return;
 	user.value = null;
-	os.api('users/show', Misskey.acct.parse(props.acct)).then(u => {
+	misskeyApi('users/show', Misskey.acct.parse(props.acct)).then(u => {
 		user.value = u;
 	}).catch(err => {
 		error.value = err;
diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue
index 3ad34355f5..2bb9746bd6 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -39,7 +39,7 @@ import XTimeline from './welcome.timeline.vue';
 import MarqueeText from '@/components/MkMarquee.vue';
 import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
 import misskeysvg from '/client-assets/misskey.svg';
-import * as os from '@/os.js';
+import { misskeyApi, misskeyApiGet } from '@/scripts/misskey-api.js';
 import MkVisitorDashboard from '@/components/MkVisitorDashboard.vue';
 import { getProxiedImageUrl } from '@/scripts/media-proxy.js';
 
@@ -53,11 +53,11 @@ function getInstanceIcon(instance: Misskey.entities.FederationInstance): string
 	return getProxiedImageUrl(instance.iconUrl, 'preview');
 }
 
-os.api('meta', { detail: true }).then(_meta => {
+misskeyApi('meta', { detail: true }).then(_meta => {
 	meta.value = _meta;
 });
 
-os.apiGet('federation/instances', {
+misskeyApiGet('federation/instances', {
 	sort: '+pubSub',
 	limit: 20,
 }).then(_instances => {
diff --git a/packages/frontend/src/pages/welcome.setup.vue b/packages/frontend/src/pages/welcome.setup.vue
index 61b86f993d..40187b861e 100644
--- a/packages/frontend/src/pages/welcome.setup.vue
+++ b/packages/frontend/src/pages/welcome.setup.vue
@@ -40,6 +40,7 @@ import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import { host, version } from '@/config.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { login } from '@/account.js';
 import { i18n } from '@/i18n.js';
 import MkAnimBg from '@/components/MkAnimBg.vue';
@@ -52,7 +53,7 @@ function submit() {
 	if (submitting.value) return;
 	submitting.value = true;
 
-	os.api('admin/accounts/create', {
+	misskeyApi('admin/accounts/create', {
 		username: username.value,
 		password: password.value,
 	}).then(res => {
diff --git a/packages/frontend/src/pages/welcome.timeline.vue b/packages/frontend/src/pages/welcome.timeline.vue
index 92be80228a..07c98571e4 100644
--- a/packages/frontend/src/pages/welcome.timeline.vue
+++ b/packages/frontend/src/pages/welcome.timeline.vue
@@ -32,14 +32,14 @@ import { onUpdated, ref, shallowRef } from 'vue';
 import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
 import MkMediaList from '@/components/MkMediaList.vue';
 import MkPoll from '@/components/MkPoll.vue';
-import * as os from '@/os.js';
+import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import { getScrollContainer } from '@/scripts/scroll.js';
 
 const notes = ref<Misskey.entities.Note[]>([]);
 const isScrolling = ref(false);
 const scrollEl = shallowRef<HTMLElement>();
 
-os.apiGet('notes/featured').then(_notes => {
+misskeyApiGet('notes/featured').then(_notes => {
 	notes.value = _notes;
 });
 
diff --git a/packages/frontend/src/pages/welcome.vue b/packages/frontend/src/pages/welcome.vue
index 7f0af1b83e..225ab91514 100644
--- a/packages/frontend/src/pages/welcome.vue
+++ b/packages/frontend/src/pages/welcome.vue
@@ -16,12 +16,12 @@ import * as Misskey from 'misskey-js';
 import XSetup from './welcome.setup.vue';
 import XEntrance from './welcome.entrance.a.vue';
 import { instanceName } from '@/config.js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
 const meta = ref<Misskey.entities.MetaResponse | null>(null);
 
-os.api('meta', { detail: true }).then(res => {
+misskeyApi('meta', { detail: true }).then(res => {
 	meta.value = res;
 });
 
diff --git a/packages/frontend/src/pizzax.ts b/packages/frontend/src/pizzax.ts
index d26899dbde..c6fa89ea5b 100644
--- a/packages/frontend/src/pizzax.ts
+++ b/packages/frontend/src/pizzax.ts
@@ -8,7 +8,7 @@
 import { onUnmounted, Ref, ref, watch } from 'vue';
 import { BroadcastChannel } from 'broadcast-channel';
 import { $i } from '@/account.js';
-import { api } from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { get, set } from '@/scripts/idb-proxy.js';
 import { defaultStore } from '@/store.js';
 import { useStream } from '@/stream.js';
@@ -134,7 +134,7 @@ export class Storage<T extends StateDef> {
 				window.setTimeout(async () => {
 					await defaultStore.ready;
 
-					api('i/registry/get-all', { scope: ['client', this.key] })
+					misskeyApi('i/registry/get-all', { scope: ['client', this.key] })
 						.then(kvs => {
 							const cache: Partial<T> = {};
 							for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]['default']][]) {
@@ -199,7 +199,7 @@ export class Storage<T extends StateDef> {
 					const cache = await get(this.registryCacheKeyName) || {};
 					cache[key] = rawValue;
 					await set(this.registryCacheKeyName, cache);
-					await api('i/registry/set', {
+					await misskeyApi('i/registry/set', {
 						scope: ['client', this.key],
 						key: key.toString(),
 						value: rawValue,
diff --git a/packages/frontend/src/scripts/achievements.ts b/packages/frontend/src/scripts/achievements.ts
index e7585fcf81..4b6b044d8b 100644
--- a/packages/frontend/src/scripts/achievements.ts
+++ b/packages/frontend/src/scripts/achievements.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { $i } from '@/account.js';
 
 export const ACHIEVEMENT_TYPES = [
@@ -489,7 +489,7 @@ export async function claimAchievement(type: typeof ACHIEVEMENT_TYPES[number]) {
 	window.setTimeout(() => {
 		claimingQueue.delete(type);
 	}, 500);
-	os.api('i/claim-achievement', { name: type });
+	misskeyApi('i/claim-achievement', { name: type });
 }
 
 if (_DEV_) {
diff --git a/packages/frontend/src/scripts/aiscript/api.ts b/packages/frontend/src/scripts/aiscript/api.ts
index f6f63bb59e..c13849cc8f 100644
--- a/packages/frontend/src/scripts/aiscript/api.ts
+++ b/packages/frontend/src/scripts/aiscript/api.ts
@@ -5,6 +5,7 @@
 
 import { utils, values } from '@syuilo/aiscript';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { $i } from '@/account.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { customEmojis } from '@/custom-emojis.js';
@@ -54,7 +55,7 @@ export function createAiScriptEnv(opts) {
 				if (typeof token.value !== 'string') throw new Error('invalid token');
 			}
 			const actualToken: string|null = token?.value ?? opts.token ?? null;
-			return os.api(ep.value, utils.valToJs(param), actualToken).then(res => {
+			return misskeyApi(ep.value, utils.valToJs(param), actualToken).then(res => {
 				return utils.jsToVal(res);
 			}, err => {
 				return values.ERROR('request_failed', utils.jsToVal(err));
diff --git a/packages/frontend/src/scripts/api.ts b/packages/frontend/src/scripts/api.ts
deleted file mode 100644
index 8f3a163938..0000000000
--- a/packages/frontend/src/scripts/api.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and other misskey contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import * as Misskey from 'misskey-js';
-import { ref } from 'vue';
-import { apiUrl } from '@/config.js';
-import { $i } from '@/account.js';
-export const pendingApiRequestsCount = ref(0);
-
-// Implements Misskey.api.ApiClient.request
-export function api<E extends keyof Misskey.Endpoints, P extends Misskey.Endpoints[E]['req']>(
-	endpoint: E,
-	data: P = {} as any,
-	token?: string | null | undefined,
-	signal?: AbortSignal,
-): Promise<Misskey.api.SwitchCaseResponseType<E, P>> {
-	if (endpoint.includes('://')) throw new Error('invalid endpoint');
-	pendingApiRequestsCount.value++;
-
-	const onFinally = () => {
-		pendingApiRequestsCount.value--;
-	};
-
-	const promise = new Promise<Misskey.Endpoints[E]['res'] | void>((resolve, reject) => {
-		// Append a credential
-		if ($i) (data as any).i = $i.token;
-		if (token !== undefined) (data as any).i = token;
-
-		// Send request
-		window.fetch(`${apiUrl}/${endpoint}`, {
-			method: 'POST',
-			body: JSON.stringify(data),
-			credentials: 'omit',
-			cache: 'no-cache',
-			headers: {
-				'Content-Type': 'application/json',
-			},
-			signal,
-		}).then(async (res) => {
-			const body = res.status === 204 ? null : await res.json();
-
-			if (res.status === 200) {
-				resolve(body);
-			} else if (res.status === 204) {
-				resolve();
-			} else {
-				reject(body.error);
-			}
-		}).catch(reject);
-	});
-
-	promise.then(onFinally, onFinally);
-
-	return promise;
-}
-
-// Implements Misskey.api.ApiClient.request
-export function apiGet<E extends keyof Misskey.Endpoints, P extends Misskey.Endpoints[E]['req']>(
-	endpoint: E,
-	data: P = {} as any,
-): Promise<Misskey.api.SwitchCaseResponseType<E, P>> {
-	pendingApiRequestsCount.value++;
-
-	const onFinally = () => {
-		pendingApiRequestsCount.value--;
-	};
-
-	const query = new URLSearchParams(data as any);
-
-	const promise = new Promise<Misskey.Endpoints[E]['res'] | void>((resolve, reject) => {
-		// Send request
-		window.fetch(`${apiUrl}/${endpoint}?${query}`, {
-			method: 'GET',
-			credentials: 'omit',
-			cache: 'default',
-		}).then(async (res) => {
-			const body = res.status === 204 ? null : await res.json();
-
-			if (res.status === 200) {
-				resolve(body);
-			} else if (res.status === 204) {
-				resolve();
-			} else {
-				reject(body.error);
-			}
-		}).catch(reject);
-	});
-
-	promise.then(onFinally, onFinally);
-
-	return promise;
-}
diff --git a/packages/frontend/src/scripts/clicker-game.ts b/packages/frontend/src/scripts/clicker-game.ts
index 5ad076e5ef..360bea903c 100644
--- a/packages/frontend/src/scripts/clicker-game.ts
+++ b/packages/frontend/src/scripts/clicker-game.ts
@@ -4,7 +4,7 @@
  */
 
 import { ref, computed } from 'vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
 type SaveData = {
 	gameVersion: number;
@@ -23,7 +23,7 @@ let prev = '';
 
 export async function load() {
 	try {
-		saveData.value = await os.api('i/registry/get', {
+		saveData.value = await misskeyApi('i/registry/get', {
 			scope: ['clickerGame'],
 			key: 'saveData',
 		});
@@ -63,7 +63,7 @@ export async function save() {
 	const current = JSON.stringify(saveData.value);
 	if (current === prev) return;
 
-	await os.api('i/registry/set', {
+	await misskeyApi('i/registry/set', {
 		scope: ['clickerGame'],
 		key: 'saveData',
 		value: saveData.value,
diff --git a/packages/frontend/src/scripts/gen-search-query.ts b/packages/frontend/src/scripts/gen-search-query.ts
index 54654980f2..068cd9cd93 100644
--- a/packages/frontend/src/scripts/gen-search-query.ts
+++ b/packages/frontend/src/scripts/gen-search-query.ts
@@ -18,7 +18,7 @@ export async function genSearchQuery(v: any, q: string) {
 					host = at;
 				}
 			} else {
-				const user = await v.os.api('users/show', Misskey.acct.parse(at)).catch(x => null);
+				const user = await v.api('users/show', Misskey.acct.parse(at)).catch(x => null);
 				if (user) {
 					userId = user.id;
 				} else {
diff --git a/packages/frontend/src/scripts/get-drive-file-menu.ts b/packages/frontend/src/scripts/get-drive-file-menu.ts
index f8496f0711..59c46c2cbc 100644
--- a/packages/frontend/src/scripts/get-drive-file-menu.ts
+++ b/packages/frontend/src/scripts/get-drive-file-menu.ts
@@ -8,6 +8,7 @@ import { defineAsyncComponent } from 'vue';
 import { i18n } from '@/i18n.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { MenuItem } from '@/types/menu.js';
 import { defaultStore } from '@/store.js';
 
@@ -18,7 +19,7 @@ function rename(file: Misskey.entities.DriveFile) {
 		default: file.name,
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
-		os.api('drive/files/update', {
+		misskeyApi('drive/files/update', {
 			fileId: file.id,
 			name: name,
 		});
@@ -31,7 +32,7 @@ function describe(file: Misskey.entities.DriveFile) {
 		file: file,
 	}, {
 		done: caption => {
-			os.api('drive/files/update', {
+			misskeyApi('drive/files/update', {
 				fileId: file.id,
 				comment: caption.length === 0 ? null : caption,
 			});
@@ -40,7 +41,7 @@ function describe(file: Misskey.entities.DriveFile) {
 }
 
 function toggleSensitive(file: Misskey.entities.DriveFile) {
-	os.api('drive/files/update', {
+	misskeyApi('drive/files/update', {
 		fileId: file.id,
 		isSensitive: !file.isSensitive,
 	}).catch(err => {
@@ -69,7 +70,7 @@ async function deleteFile(file: Misskey.entities.DriveFile) {
 	});
 
 	if (canceled) return;
-	os.api('drive/files/delete', {
+	misskeyApi('drive/files/delete', {
 		fileId: file.id,
 	});
 }
diff --git a/packages/frontend/src/scripts/get-note-menu.ts b/packages/frontend/src/scripts/get-note-menu.ts
index b9224c5595..110be244cb 100644
--- a/packages/frontend/src/scripts/get-note-menu.ts
+++ b/packages/frontend/src/scripts/get-note-menu.ts
@@ -10,6 +10,7 @@ import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 import { url } from '@/config.js';
 import { defaultStore, noteActions } from '@/store.js';
@@ -40,7 +41,7 @@ export async function getNoteClipMenu(props: {
 		action: () => {
 			claimAchievement('noteClipped1');
 			os.promiseDialog(
-				os.api('clips/add-note', { clipId: clip.id, noteId: appearNote.id }),
+				misskeyApi('clips/add-note', { clipId: clip.id, noteId: appearNote.id }),
 				null,
 				async (err) => {
 					if (err.id === '734806c4-542c-463a-9311-15c512803965') {
@@ -145,7 +146,7 @@ export function getNoteMenu(props: {
 		}).then(({ canceled }) => {
 			if (canceled) return;
 
-			os.api('notes/delete', {
+			misskeyApi('notes/delete', {
 				noteId: appearNote.id,
 			});
 
@@ -162,7 +163,7 @@ export function getNoteMenu(props: {
 		}).then(({ canceled }) => {
 			if (canceled) return;
 
-			os.api('notes/delete', {
+			misskeyApi('notes/delete', {
 				noteId: appearNote.id,
 			});
 
@@ -243,7 +244,7 @@ export function getNoteMenu(props: {
 	async function translate(): Promise<void> {
 		if (props.translation.value != null) return;
 		props.translating.value = true;
-		const res = await os.api('notes/translate', {
+		const res = await misskeyApi('notes/translate', {
 			noteId: appearNote.id,
 			targetLang: miLocalStorage.getItem('lang') ?? navigator.language,
 		});
@@ -253,7 +254,7 @@ export function getNoteMenu(props: {
 
 	let menu: MenuItem[];
 	if ($i) {
-		const statePromise = os.api('notes/state', {
+		const statePromise = misskeyApi('notes/state', {
 			noteId: appearNote.id,
 		});
 
@@ -330,7 +331,7 @@ export function getNoteMenu(props: {
 				icon: 'ti ti-user',
 				text: i18n.ts.user,
 				children: async () => {
-					const user = appearNote.userId === $i?.id ? $i : await os.api('users/show', { userId: appearNote.userId });
+					const user = appearNote.userId === $i?.id ? $i : await misskeyApi('users/show', { userId: appearNote.userId });
 					const { menu, cleanup } = getUserMenu(user);
 					cleanups.push(cleanup);
 					return menu;
@@ -361,7 +362,7 @@ export function getNoteMenu(props: {
 					children: async () => {
 						const channelChildMenu = [] as MenuItem[];
 
-						const channel = await os.api('channels/show', { channelId: appearNote.channel!.id });
+						const channel = await misskeyApi('channels/show', { channelId: appearNote.channel!.id });
 
 						if (channel.pinnedNoteIds.includes(appearNote.id)) {
 							channelChildMenu.push({
@@ -425,7 +426,7 @@ export function getNoteMenu(props: {
 	}
 
 	if (noteActions.length > 0) {
-		menu = menu.concat([{ type: "divider" }, ...noteActions.map(action => ({
+		menu = menu.concat([{ type: 'divider' }, ...noteActions.map(action => ({
 			icon: 'ti ti-plug',
 			text: action.title,
 			action: () => {
@@ -435,7 +436,7 @@ export function getNoteMenu(props: {
 	}
 
 	if (defaultStore.state.devMode) {
-		menu = menu.concat([{ type: "divider" }, {
+		menu = menu.concat([{ type: 'divider' }, {
 			icon: 'ti ti-id',
 			text: i18n.ts.copyNoteId,
 			action: () => {
@@ -499,7 +500,7 @@ export function getRenoteMenu(props: {
 				}
 
 				if (!props.mock) {
-					os.api('notes/create', {
+					misskeyApi('notes/create', {
 						renoteId: appearNote.id,
 						channelId: appearNote.channelId,
 					}).then(() => {
@@ -544,7 +545,7 @@ export function getRenoteMenu(props: {
 				}
 
 				if (!props.mock) {
-					os.api('notes/create', {
+					misskeyApi('notes/create', {
 						localOnly,
 						visibility,
 						renoteId: appearNote.id,
diff --git a/packages/frontend/src/scripts/get-user-menu.ts b/packages/frontend/src/scripts/get-user-menu.ts
index 6e5c689d97..2735253b36 100644
--- a/packages/frontend/src/scripts/get-user-menu.ts
+++ b/packages/frontend/src/scripts/get-user-menu.ts
@@ -10,6 +10,7 @@ import { i18n } from '@/i18n.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 import { host, url } from '@/config.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore, userActions } from '@/store.js';
 import { $i, iAmModerator } from '@/account.js';
 import { mainRouter } from '@/router.js';
@@ -131,7 +132,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
 	}
 
 	async function editMemo(): Promise<void> {
-		const userDetailed = await os.api('users/show', {
+		const userDetailed = await misskeyApi('users/show', {
 			userId: user.id,
 		});
 		const { canceled, result } = await os.form(i18n.ts.editMemo, {
diff --git a/packages/frontend/src/scripts/install-plugin.ts b/packages/frontend/src/scripts/install-plugin.ts
index 1310a0dc73..ee218df018 100644
--- a/packages/frontend/src/scripts/install-plugin.ts
+++ b/packages/frontend/src/scripts/install-plugin.ts
@@ -10,6 +10,7 @@ import { Interpreter, Parser, utils } from '@syuilo/aiscript';
 import type { Plugin } from '@/store.js';
 import { ColdDeviceStorage } from '@/store.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 
 export type AiScriptPluginMeta = {
@@ -110,7 +111,7 @@ export async function installPlugin(code: string, meta?: AiScriptPluginMeta) {
 		}, {
 			done: async result => {
 				const { name, permissions } = result;
-				const { token } = await os.api('miauth/gen-token', {
+				const { token } = await misskeyApi('miauth/gen-token', {
 					session: null,
 					name: name,
 					permission: permissions,
diff --git a/packages/frontend/src/scripts/lookup-user.ts b/packages/frontend/src/scripts/lookup-user.ts
index a35fe898e4..9ae5eccb7c 100644
--- a/packages/frontend/src/scripts/lookup-user.ts
+++ b/packages/frontend/src/scripts/lookup-user.ts
@@ -6,6 +6,7 @@
 import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
 export async function lookupUser() {
 	const { canceled, result } = await os.inputText({
@@ -17,8 +18,8 @@ export async function lookupUser() {
 		os.pageWindow(`/admin/user/${user.id}`);
 	};
 
-	const usernamePromise = os.api('users/show', Misskey.acct.parse(result));
-	const idPromise = os.api('users/show', { userId: result });
+	const usernamePromise = misskeyApi('users/show', Misskey.acct.parse(result));
+	const idPromise = misskeyApi('users/show', { userId: result });
 	let _notFound = false;
 	const notFound = () => {
 		if (_notFound) {
diff --git a/packages/frontend/src/scripts/lookup.ts b/packages/frontend/src/scripts/lookup.ts
index 979f40f038..ff438af24f 100644
--- a/packages/frontend/src/scripts/lookup.ts
+++ b/packages/frontend/src/scripts/lookup.ts
@@ -4,6 +4,7 @@
  */
 
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { mainRouter } from '@/router.js';
 import { Router } from '@/nirax.js';
@@ -28,7 +29,7 @@ export async function lookup(router?: Router) {
 	}
 
 	if (query.startsWith('https://')) {
-		const promise = os.api('ap/show', {
+		const promise = misskeyApi('ap/show', {
 			uri: query,
 		});
 
diff --git a/packages/frontend/src/scripts/misskey-api.ts b/packages/frontend/src/scripts/misskey-api.ts
new file mode 100644
index 0000000000..e71c5dd592
--- /dev/null
+++ b/packages/frontend/src/scripts/misskey-api.ts
@@ -0,0 +1,94 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import * as Misskey from 'misskey-js';
+import { ref } from 'vue';
+import { apiUrl } from '@/config.js';
+import { $i } from '@/account.js';
+export const pendingApiRequestsCount = ref(0);
+
+// Implements Misskey.api.ApiClient.request
+export function misskeyApi<E extends keyof Misskey.Endpoints, P extends Misskey.Endpoints[E]['req']>(
+	endpoint: E,
+	data: P = {} as any,
+	token?: string | null | undefined,
+	signal?: AbortSignal,
+): Promise<Misskey.api.SwitchCaseResponseType<E, P>> {
+	if (endpoint.includes('://')) throw new Error('invalid endpoint');
+	pendingApiRequestsCount.value++;
+
+	const onFinally = () => {
+		pendingApiRequestsCount.value--;
+	};
+
+	const promise = new Promise<Misskey.Endpoints[E]['res'] | void>((resolve, reject) => {
+		// Append a credential
+		if ($i) (data as any).i = $i.token;
+		if (token !== undefined) (data as any).i = token;
+
+		// Send request
+		window.fetch(`${apiUrl}/${endpoint}`, {
+			method: 'POST',
+			body: JSON.stringify(data),
+			credentials: 'omit',
+			cache: 'no-cache',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			signal,
+		}).then(async (res) => {
+			const body = res.status === 204 ? null : await res.json();
+
+			if (res.status === 200) {
+				resolve(body);
+			} else if (res.status === 204) {
+				resolve();
+			} else {
+				reject(body.error);
+			}
+		}).catch(reject);
+	});
+
+	promise.then(onFinally, onFinally);
+
+	return promise;
+}
+
+// Implements Misskey.api.ApiClient.request
+export function misskeyApiGet<E extends keyof Misskey.Endpoints, P extends Misskey.Endpoints[E]['req']>(
+	endpoint: E,
+	data: P = {} as any,
+): Promise<Misskey.api.SwitchCaseResponseType<E, P>> {
+	pendingApiRequestsCount.value++;
+
+	const onFinally = () => {
+		pendingApiRequestsCount.value--;
+	};
+
+	const query = new URLSearchParams(data as any);
+
+	const promise = new Promise<Misskey.Endpoints[E]['res'] | void>((resolve, reject) => {
+		// Send request
+		window.fetch(`${apiUrl}/${endpoint}?${query}`, {
+			method: 'GET',
+			credentials: 'omit',
+			cache: 'default',
+		}).then(async (res) => {
+			const body = res.status === 204 ? null : await res.json();
+
+			if (res.status === 200) {
+				resolve(body);
+			} else if (res.status === 204) {
+				resolve();
+			} else {
+				reject(body.error);
+			}
+		}).catch(reject);
+	});
+
+	promise.then(onFinally, onFinally);
+
+	return promise;
+}
diff --git a/packages/frontend/src/scripts/select-file.ts b/packages/frontend/src/scripts/select-file.ts
index 53e2cd5b16..f6977eb1fb 100644
--- a/packages/frontend/src/scripts/select-file.ts
+++ b/packages/frontend/src/scripts/select-file.ts
@@ -6,6 +6,7 @@
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
 import { defaultStore } from '@/store.js';
@@ -65,7 +66,7 @@ export function chooseFileFromUrl(): Promise<Misskey.entities.DriveFile> {
 				}
 			});
 
-			os.api('drive/files/upload-from-url', {
+			misskeyApi('drive/files/upload-from-url', {
 				url: url,
 				folderId: defaultStore.state.uploadFolder,
 				marker,
diff --git a/packages/frontend/src/scripts/sound.ts b/packages/frontend/src/scripts/sound.ts
index 2f7545ef0d..0b966ff199 100644
--- a/packages/frontend/src/scripts/sound.ts
+++ b/packages/frontend/src/scripts/sound.ts
@@ -5,7 +5,7 @@
 
 import type { SoundStore } from '@/store.js';
 import { defaultStore } from '@/store.js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
 let ctx: AudioContext;
 const cache = new Map<string, AudioBuffer>();
@@ -120,7 +120,7 @@ export async function loadAudio(soundStore: SoundStore, options?: { useCache?: b
 		} catch (err) {
 			try {
 				// URLが変わっている可能性があるのでドライブ側からURLを取得するフォールバック
-				const apiRes = await os.api('drive/files/show', {
+				const apiRes = await misskeyApi('drive/files/show', {
 					fileId: soundStore.fileId,
 				});
 				response = await fetch(apiRes.url);
diff --git a/packages/frontend/src/theme-store.ts b/packages/frontend/src/theme-store.ts
index f37c01cca1..f96059b849 100644
--- a/packages/frontend/src/theme-store.ts
+++ b/packages/frontend/src/theme-store.ts
@@ -5,7 +5,7 @@
 
 import { Theme, getBuiltinThemes } from '@/scripts/theme.js';
 import { miLocalStorage } from '@/local-storage.js';
-import { api } from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { $i } from '@/account.js';
 
 const lsCacheKey = $i ? `themes:${$i.id}` as const : null;
@@ -19,7 +19,7 @@ export async function fetchThemes(): Promise<void> {
 	if ($i == null) return;
 
 	try {
-		const themes = await api('i/registry/get', { scope: ['client'], key: 'themes' });
+		const themes = await misskeyApi('i/registry/get', { scope: ['client'], key: 'themes' });
 		miLocalStorage.setItem(lsCacheKey!, JSON.stringify(themes));
 	} catch (err) {
 		if (err.code === 'NO_SUCH_KEY') return;
@@ -35,13 +35,13 @@ export async function addTheme(theme: Theme): Promise<void> {
 	}
 	await fetchThemes();
 	const themes = getThemes().concat(theme);
-	await api('i/registry/set', { scope: ['client'], key: 'themes', value: themes });
+	await misskeyApi('i/registry/set', { scope: ['client'], key: 'themes', value: themes });
 	miLocalStorage.setItem(lsCacheKey!, JSON.stringify(themes));
 }
 
 export async function removeTheme(theme: Theme): Promise<void> {
 	if ($i == null) return;
 	const themes = getThemes().filter(t => t.id !== theme.id);
-	await api('i/registry/set', { scope: ['client'], key: 'themes', value: themes });
+	await misskeyApi('i/registry/set', { scope: ['client'], key: 'themes', value: themes });
 	miLocalStorage.setItem(lsCacheKey!, JSON.stringify(themes));
 }
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index 6ece7d86d7..78af49cdc2 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -49,7 +49,8 @@ import { defineAsyncComponent, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { swInject } from './sw-inject.js';
 import XNotification from './notification.vue';
-import { popups, pendingApiRequestsCount } from '@/os.js';
+import { popups } from '@/os.js';
+import { pendingApiRequestsCount } from '@/scripts/misskey-api.js';
 import { uploads } from '@/scripts/upload.js';
 import * as sound from '@/scripts/sound.js';
 import { $i } from '@/account.js';
diff --git a/packages/frontend/src/ui/_common_/statusbar-federation.vue b/packages/frontend/src/ui/_common_/statusbar-federation.vue
index c92695afed..8df3b289de 100644
--- a/packages/frontend/src/ui/_common_/statusbar-federation.vue
+++ b/packages/frontend/src/ui/_common_/statusbar-federation.vue
@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import MarqueeText from '@/components/MkMarquee.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useInterval } from '@/scripts/use-interval.js';
 import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
 
@@ -52,7 +52,7 @@ const fetching = ref(true);
 const key = ref(0);
 
 const tick = () => {
-	os.api('federation/instances', {
+	misskeyApi('federation/instances', {
 		sort: '+latestRequestReceivedAt',
 		limit: 30,
 	}).then(res => {
diff --git a/packages/frontend/src/ui/_common_/statusbar-user-list.vue b/packages/frontend/src/ui/_common_/statusbar-user-list.vue
index 6057174ba8..34d7b0e4e5 100644
--- a/packages/frontend/src/ui/_common_/statusbar-user-list.vue
+++ b/packages/frontend/src/ui/_common_/statusbar-user-list.vue
@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import MarqueeText from '@/components/MkMarquee.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useInterval } from '@/scripts/use-interval.js';
 import { getNoteSummary } from '@/scripts/get-note-summary.js';
 import { notePage } from '@/filters/note.js';
@@ -54,7 +54,7 @@ const key = ref(0);
 
 const tick = () => {
 	if (props.userListId == null) return;
-	os.api('notes/user-list-timeline', {
+	misskeyApi('notes/user-list-timeline', {
 		listId: props.userListId,
 	}).then(res => {
 		notes.value = res;
diff --git a/packages/frontend/src/ui/_common_/sw-inject.ts b/packages/frontend/src/ui/_common_/sw-inject.ts
index 5239b76705..504484f8de 100644
--- a/packages/frontend/src/ui/_common_/sw-inject.ts
+++ b/packages/frontend/src/ui/_common_/sw-inject.ts
@@ -3,7 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { api, post } from '@/os.js';
+import { post } from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { $i, login } from '@/account.js';
 import { getAccountFromId } from '@/scripts/get-account-from-id.js';
 import { mainRouter } from '@/router.js';
@@ -30,10 +31,10 @@ export function swInject() {
 				// プッシュ通知から来たreply,renoteはtruncateBodyが通されているため、
 				// 完全なノートを取得しなおす
 				if (props.reply) {
-					props.reply = await api('notes/show', { noteId: props.reply.id });
+					props.reply = await misskeyApi('notes/show', { noteId: props.reply.id });
 				}
 				if (props.renote) {
-					props.renote = await api('notes/show', { noteId: props.renote.id });
+					props.renote = await misskeyApi('notes/show', { noteId: props.renote.id });
 				}
 				return post(props);
 			}
diff --git a/packages/frontend/src/ui/deck/antenna-column.vue b/packages/frontend/src/ui/deck/antenna-column.vue
index fe4d2a809c..ded24cdd26 100644
--- a/packages/frontend/src/ui/deck/antenna-column.vue
+++ b/packages/frontend/src/ui/deck/antenna-column.vue
@@ -19,6 +19,7 @@ import XColumn from './column.vue';
 import { updateColumn, Column } from './deck-store.js';
 import MkTimeline from '@/components/MkTimeline.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
@@ -35,7 +36,7 @@ onMounted(() => {
 });
 
 async function setAntenna() {
-	const antennas = await os.api('antennas/list');
+	const antennas = await misskeyApi('antennas/list');
 	const { canceled, result: antenna } = await os.select({
 		title: i18n.ts.selectAntenna,
 		items: antennas.map(x => ({
diff --git a/packages/frontend/src/ui/deck/channel-column.vue b/packages/frontend/src/ui/deck/channel-column.vue
index de5d94b4f7..ccb440edff 100644
--- a/packages/frontend/src/ui/deck/channel-column.vue
+++ b/packages/frontend/src/ui/deck/channel-column.vue
@@ -26,6 +26,7 @@ import { updateColumn, Column } from './deck-store.js';
 import MkTimeline from '@/components/MkTimeline.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
@@ -41,7 +42,7 @@ if (props.column.channelId == null) {
 }
 
 async function setChannel() {
-	const channels = await os.api('channels/my-favorites', {
+	const channels = await misskeyApi('channels/my-favorites', {
 		limit: 100,
 	});
 	const { canceled, result: channel } = await os.select({
@@ -60,7 +61,7 @@ async function setChannel() {
 
 async function post() {
 	if (!channel.value || channel.value.id !== props.column.channelId) {
-		channel.value = await os.api('channels/show', {
+		channel.value = await misskeyApi('channels/show', {
 			channelId: props.column.channelId,
 		});
 	}
diff --git a/packages/frontend/src/ui/deck/deck-store.ts b/packages/frontend/src/ui/deck/deck-store.ts
index 49fdf4d314..3a23cbdb4e 100644
--- a/packages/frontend/src/ui/deck/deck-store.ts
+++ b/packages/frontend/src/ui/deck/deck-store.ts
@@ -7,7 +7,7 @@ import { throttle } from 'throttle-debounce';
 import { markRaw } from 'vue';
 import { notificationTypes } from 'misskey-js';
 import { Storage } from '@/pizzax.js';
-import { api } from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { deepClone } from '@/scripts/clone.js';
 
 type ColumnWidget = {
@@ -70,7 +70,7 @@ export const loadDeck = async () => {
 	let deck;
 
 	try {
-		deck = await api('i/registry/get', {
+		deck = await misskeyApi('i/registry/get', {
 			scope: ['client', 'deck', 'profiles'],
 			key: deckStore.state.profile,
 		});
@@ -95,7 +95,7 @@ export const loadDeck = async () => {
 
 // TODO: deckがloadされていない状態でsaveすると意図せず上書きが発生するので対策する
 export const saveDeck = throttle(1000, () => {
-	api('i/registry/set', {
+	misskeyApi('i/registry/set', {
 		scope: ['client', 'deck', 'profiles'],
 		key: deckStore.state.profile,
 		value: {
@@ -106,13 +106,13 @@ export const saveDeck = throttle(1000, () => {
 });
 
 export async function getProfiles(): Promise<string[]> {
-	return await api('i/registry/keys', {
+	return await misskeyApi('i/registry/keys', {
 		scope: ['client', 'deck', 'profiles'],
 	});
 }
 
 export async function deleteProfile(key: string): Promise<void> {
-	return await api('i/registry/remove', {
+	return await misskeyApi('i/registry/remove', {
 		scope: ['client', 'deck', 'profiles'],
 		key: key,
 	});
diff --git a/packages/frontend/src/ui/deck/list-column.vue b/packages/frontend/src/ui/deck/list-column.vue
index 7166561c7a..84508ca78a 100644
--- a/packages/frontend/src/ui/deck/list-column.vue
+++ b/packages/frontend/src/ui/deck/list-column.vue
@@ -19,6 +19,7 @@ import XColumn from './column.vue';
 import { updateColumn, Column } from './deck-store.js';
 import MkTimeline from '@/components/MkTimeline.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
@@ -40,7 +41,7 @@ watch(withRenotes, v => {
 });
 
 async function setList() {
-	const lists = await os.api('users/lists/list');
+	const lists = await misskeyApi('users/lists/list');
 	const { canceled, result: list } = await os.select({
 		title: i18n.ts.selectList,
 		items: lists.map(x => ({
diff --git a/packages/frontend/src/ui/deck/role-timeline-column.vue b/packages/frontend/src/ui/deck/role-timeline-column.vue
index d9bcf8d95e..5ab5a93796 100644
--- a/packages/frontend/src/ui/deck/role-timeline-column.vue
+++ b/packages/frontend/src/ui/deck/role-timeline-column.vue
@@ -19,6 +19,7 @@ import XColumn from './column.vue';
 import { updateColumn, Column } from './deck-store.js';
 import MkTimeline from '@/components/MkTimeline.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
@@ -35,7 +36,7 @@ onMounted(() => {
 });
 
 async function setRole() {
-	const roles = (await os.api('roles/list')).filter(x => x.isExplorable);
+	const roles = (await misskeyApi('roles/list')).filter(x => x.isExplorable);
 	const { canceled, result: role } = await os.select({
 		title: i18n.ts.role,
 		items: roles.map(x => ({
diff --git a/packages/frontend/src/ui/visitor.vue b/packages/frontend/src/ui/visitor.vue
index 1fb77e42dc..5af6bc30a8 100644
--- a/packages/frontend/src/ui/visitor.vue
+++ b/packages/frontend/src/ui/visitor.vue
@@ -74,6 +74,7 @@ import * as Misskey from 'misskey-js';
 import XCommon from './_common_/common.vue';
 import { instanceName } from '@/config.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { instance } from '@/instance.js';
 import XSigninDialog from '@/components/MkSigninDialog.vue';
 import XSignupDialog from '@/components/MkSignupDialog.vue';
@@ -121,7 +122,7 @@ const keymap = computed(() => {
 
 const root = computed(() => mainRouter.currentRoute.value.name === 'index');
 
-os.api('meta', { detail: true }).then(res => {
+misskeyApi('meta', { detail: true }).then(res => {
 	meta.value = res;
 });
 
diff --git a/packages/frontend/src/widgets/WidgetActivity.vue b/packages/frontend/src/widgets/WidgetActivity.vue
index 7759986928..56364839be 100644
--- a/packages/frontend/src/widgets/WidgetActivity.vue
+++ b/packages/frontend/src/widgets/WidgetActivity.vue
@@ -25,7 +25,7 @@ import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, Wid
 import XCalendar from './WidgetActivity.calendar.vue';
 import XChart from './WidgetActivity.chart.vue';
 import { GetFormResultType } from '@/scripts/form.js';
-import * as os from '@/os.js';
+import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import MkContainer from '@/components/MkContainer.vue';
 import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
@@ -76,7 +76,7 @@ const toggleView = () => {
 	save();
 };
 
-os.apiGet('charts/user/notes', {
+misskeyApiGet('charts/user/notes', {
 	userId: $i.id,
 	span: 'day',
 	limit: 7 * 21,
diff --git a/packages/frontend/src/widgets/WidgetBirthdayFollowings.vue b/packages/frontend/src/widgets/WidgetBirthdayFollowings.vue
index 7c4455516d..9af139af6a 100644
--- a/packages/frontend/src/widgets/WidgetBirthdayFollowings.vue
+++ b/packages/frontend/src/widgets/WidgetBirthdayFollowings.vue
@@ -27,7 +27,7 @@ import * as Misskey from 'misskey-js';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useInterval } from '@/scripts/use-interval.js';
 import { i18n } from '@/i18n.js';
 import { infoImageUrl } from '@/instance.js';
@@ -70,7 +70,7 @@ const fetch = () => {
 	now.setHours(0, 0, 0, 0);
 
 	if (now > lfAtD) {
-		os.api('users/following', {
+		misskeyApi('users/following', {
 			limit: 18,
 			birthday: now.toISOString(),
 			userId: $i.id,
diff --git a/packages/frontend/src/widgets/WidgetFederation.vue b/packages/frontend/src/widgets/WidgetFederation.vue
index cc3ad8ff7d..bdc82a299e 100644
--- a/packages/frontend/src/widgets/WidgetFederation.vue
+++ b/packages/frontend/src/widgets/WidgetFederation.vue
@@ -31,7 +31,7 @@ import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, Wid
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
 import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os.js';
+import { misskeyApi, misskeyApiGet } from '@/scripts/misskey-api.js';
 import { useInterval } from '@/scripts/use-interval.js';
 import { i18n } from '@/i18n.js';
 import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
@@ -62,11 +62,11 @@ const charts = ref<Misskey.entities.ChartsInstanceResponse[]>([]);
 const fetching = ref(true);
 
 const fetch = async () => {
-	const fetchedInstances = await os.api('federation/instances', {
+	const fetchedInstances = await misskeyApi('federation/instances', {
 		sort: '+latestRequestReceivedAt',
 		limit: 5,
 	});
-	const fetchedCharts = await Promise.all(fetchedInstances.map(i => os.apiGet('charts/instance', { host: i.host, limit: 16, span: 'hour' })));
+	const fetchedCharts = await Promise.all(fetchedInstances.map(i => misskeyApiGet('charts/instance', { host: i.host, limit: 16, span: 'hour' })));
 	instances.value = fetchedInstances;
 	charts.value = fetchedCharts;
 	fetching.value = false;
diff --git a/packages/frontend/src/widgets/WidgetInstanceCloud.vue b/packages/frontend/src/widgets/WidgetInstanceCloud.vue
index 38323ed040..800cf71de0 100644
--- a/packages/frontend/src/widgets/WidgetInstanceCloud.vue
+++ b/packages/frontend/src/widgets/WidgetInstanceCloud.vue
@@ -25,6 +25,7 @@ import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
 import MkTagCloud from '@/components/MkTagCloud.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useInterval } from '@/scripts/use-interval.js';
 import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
 
@@ -56,7 +57,7 @@ function onInstanceClick(i) {
 }
 
 useInterval(() => {
-	os.api('federation/instances', {
+	misskeyApi('federation/instances', {
 		sort: '+latestRequestReceivedAt',
 		limit: 25,
 	}).then(res => {
diff --git a/packages/frontend/src/widgets/WidgetOnlineUsers.vue b/packages/frontend/src/widgets/WidgetOnlineUsers.vue
index 0a6fec7f2e..e544a39d55 100644
--- a/packages/frontend/src/widgets/WidgetOnlineUsers.vue
+++ b/packages/frontend/src/widgets/WidgetOnlineUsers.vue
@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref } from 'vue';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
-import * as os from '@/os.js';
+import { misskeyApi, misskeyApiGet } from '@/scripts/misskey-api.js';
 import { useInterval } from '@/scripts/use-interval.js';
 import { i18n } from '@/i18n.js';
 import number from '@/filters/number.js';
@@ -45,7 +45,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 const onlineUsersCount = ref(0);
 
 const tick = () => {
-	os.apiGet('get-online-users-count').then(res => {
+	misskeyApiGet('get-online-users-count').then(res => {
 		onlineUsersCount.value = res.count;
 	});
 };
diff --git a/packages/frontend/src/widgets/WidgetPhotos.vue b/packages/frontend/src/widgets/WidgetPhotos.vue
index 257753ef10..253c2b9817 100644
--- a/packages/frontend/src/widgets/WidgetPhotos.vue
+++ b/packages/frontend/src/widgets/WidgetPhotos.vue
@@ -28,7 +28,7 @@ import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, Wid
 import { GetFormResultType } from '@/scripts/form.js';
 import { useStream } from '@/stream.js';
 import { getStaticImageUrl } from '@/scripts/media-proxy.js';
-import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import MkContainer from '@/components/MkContainer.vue';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
@@ -74,7 +74,7 @@ const thumbnail = (image: any): string => {
 		: image.thumbnailUrl;
 };
 
-os.api('drive/stream', {
+misskeyApi('drive/stream', {
 	type: 'image/*',
 	limit: 9,
 }).then(res => {
diff --git a/packages/frontend/src/widgets/WidgetSlideshow.vue b/packages/frontend/src/widgets/WidgetSlideshow.vue
index 7e39a05881..94bf6d7eec 100644
--- a/packages/frontend/src/widgets/WidgetSlideshow.vue
+++ b/packages/frontend/src/widgets/WidgetSlideshow.vue
@@ -22,6 +22,7 @@ import * as Misskey from 'misskey-js';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useInterval } from '@/scripts/use-interval.js';
 import { i18n } from '@/i18n.js';
 
@@ -77,7 +78,7 @@ const change = () => {
 const fetch = () => {
 	fetching.value = true;
 
-	os.api('drive/files', {
+	misskeyApi('drive/files', {
 		folderId: widgetProps.folderId,
 		type: 'image/*',
 		limit: 100,
diff --git a/packages/frontend/src/widgets/WidgetTimeline.vue b/packages/frontend/src/widgets/WidgetTimeline.vue
index 4a7b06f1d9..8f46bc0206 100644
--- a/packages/frontend/src/widgets/WidgetTimeline.vue
+++ b/packages/frontend/src/widgets/WidgetTimeline.vue
@@ -38,6 +38,7 @@ import { ref } from 'vue';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import MkContainer from '@/components/MkContainer.vue';
 import MkTimeline from '@/components/MkTimeline.vue';
 import { i18n } from '@/i18n.js';
@@ -95,8 +96,8 @@ const setSrc = (src) => {
 const choose = async (ev) => {
 	menuOpened.value = true;
 	const [antennas, lists] = await Promise.all([
-		os.api('antennas/list'),
-		os.api('users/lists/list'),
+		misskeyApi('antennas/list'),
+		misskeyApi('users/lists/list'),
 	]);
 	const antennaItems = antennas.map(antenna => ({
 		text: antenna.name,
diff --git a/packages/frontend/src/widgets/WidgetTrends.vue b/packages/frontend/src/widgets/WidgetTrends.vue
index ede7cb6f3b..35925a9088 100644
--- a/packages/frontend/src/widgets/WidgetTrends.vue
+++ b/packages/frontend/src/widgets/WidgetTrends.vue
@@ -30,7 +30,7 @@ import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, Wid
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
 import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os.js';
+import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import { useInterval } from '@/scripts/use-interval.js';
 import { i18n } from '@/i18n.js';
 import { defaultStore } from '@/store.js';
@@ -59,7 +59,7 @@ const stats = ref<Misskey.entities.HashtagsTrendResponse>([]);
 const fetching = ref(true);
 
 const fetch = () => {
-	os.apiGet('hashtags/trend').then(res => {
+	misskeyApiGet('hashtags/trend').then(res => {
 		stats.value = res;
 		fetching.value = false;
 	});
diff --git a/packages/frontend/src/widgets/WidgetUserList.vue b/packages/frontend/src/widgets/WidgetUserList.vue
index e17b2cba93..af13e58989 100644
--- a/packages/frontend/src/widgets/WidgetUserList.vue
+++ b/packages/frontend/src/widgets/WidgetUserList.vue
@@ -30,6 +30,7 @@ import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, Wid
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
 import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useInterval } from '@/scripts/use-interval.js';
 import { i18n } from '@/i18n.js';
 import MkButton from '@/components/MkButton.vue';
@@ -64,7 +65,7 @@ const users = ref<Misskey.entities.UserDetailed[]>([]);
 const fetching = ref(true);
 
 async function chooseList() {
-	const lists = await os.api('users/lists/list');
+	const lists = await misskeyApi('users/lists/list');
 	const { canceled, result: list } = await os.select({
 		title: i18n.ts.selectList,
 		items: lists.map(x => ({
@@ -85,11 +86,11 @@ const fetch = () => {
 		return;
 	}
 
-	os.api('users/lists/show', {
+	misskeyApi('users/lists/show', {
 		listId: widgetProps.listId,
 	}).then(_list => {
 		list.value = _list;
-		os.api('users/show', {
+		misskeyApi('users/show', {
 			userIds: list.value.userIds,
 		}).then(_users => {
 			users.value = _users;
diff --git a/packages/frontend/src/widgets/server-metric/index.vue b/packages/frontend/src/widgets/server-metric/index.vue
index b4a4182653..f5e80b0d21 100644
--- a/packages/frontend/src/widgets/server-metric/index.vue
+++ b/packages/frontend/src/widgets/server-metric/index.vue
@@ -30,7 +30,7 @@ import XMemory from './mem.vue';
 import XDisk from './disk.vue';
 import MkContainer from '@/components/MkContainer.vue';
 import { GetFormResultType } from '@/scripts/form.js';
-import * as os from '@/os.js';
+import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
 
@@ -68,7 +68,7 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
 
 const meta = ref<Misskey.entities.ServerInfoResponse | null>(null);
 
-os.apiGet('server-info', {}).then(res => {
+misskeyApiGet('server-info', {}).then(res => {
 	meta.value = res;
 });
 
-- 
cgit v1.2.3-freya


From b55a6a80e17e99590c5f5204002b270e3a811176 Mon Sep 17 00:00:00 2001
From: zyoshoka <107108195+zyoshoka@users.noreply.github.com>
Date: Sat, 6 Jan 2024 18:43:28 +0900
Subject: refactor(frontend):
 `scripts/form.ts`の型定義を修正してTS2344/TS2345エラーを削減 (#12913)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/scripts/form.ts | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

(limited to 'packages/frontend/src/scripts')

diff --git a/packages/frontend/src/scripts/form.ts b/packages/frontend/src/scripts/form.ts
index 222fd9b0b7..f7e0369419 100644
--- a/packages/frontend/src/scripts/form.ts
+++ b/packages/frontend/src/scripts/form.ts
@@ -3,7 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-type EnumItem = string | {label: string; value: string;};
+type EnumItem = string | {
+	label: string;
+	value: string;
+};
+
 export type FormItem = {
 	label?: string;
 	type: 'string';
@@ -36,16 +40,23 @@ export type FormItem = {
 		label: string;
 		value: unknown;
 	}[];
+} | {
+	label?: string;
+	type: 'range';
+	default: number | null;
+	step: number;
+	min: number;
+	max: number;
 } | {
 	label?: string;
 	type: 'object';
 	default: Record<string, unknown> | null;
-	hidden: true;
+	hidden: boolean;
 } | {
 	label?: string;
 	type: 'array';
 	default: unknown[] | null;
-	hidden: true;
+	hidden: boolean;
 };
 
 export type Form = Record<string, FormItem>;
@@ -55,6 +66,7 @@ type GetItemType<Item extends FormItem> =
 	Item['type'] extends 'number' ? number :
 	Item['type'] extends 'boolean' ? boolean :
 	Item['type'] extends 'radio' ? unknown :
+	Item['type'] extends 'range' ? number :
 	Item['type'] extends 'enum' ? string :
 	Item['type'] extends 'array' ? unknown[] :
 	Item['type'] extends 'object' ? Record<string, unknown>
-- 
cgit v1.2.3-freya


From 746367004e99ca9c5da3de03a2bbcc545cf0c986 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 6 Jan 2024 20:15:28 +0900
Subject: feat(frontend): add new game

---
 CHANGELOG.md                                       |   1 +
 .../frontend/assets/drop-and-fusion/cold_face.png  | Bin 0 -> 40776 bytes
 .../frontend/assets/drop-and-fusion/drop-arrow.svg |   6 +
 .../assets/drop-and-fusion/exploding_head.png      | Bin 0 -> 47230 bytes
 .../drop-and-fusion/face_with_open_mouth.png       | Bin 0 -> 36399 bytes
 .../drop-and-fusion/face_with_symbols_on_mouth.png | Bin 0 -> 40322 bytes
 packages/frontend/assets/drop-and-fusion/frame.svg |  25 +
 .../drop-and-fusion/grinning_squinting_face.png    | Bin 0 -> 41020 bytes
 .../frontend/assets/drop-and-fusion/heart_suit.png | Bin 0 -> 22437 bytes
 .../assets/drop-and-fusion/pleading_face.png       | Bin 0 -> 44074 bytes
 .../drop-and-fusion/smiling_face_with_hearts.png   | Bin 0 -> 52432 bytes
 .../smiling_face_with_sunglasses.png               | Bin 0 -> 47859 bytes
 .../frontend/assets/drop-and-fusion/zany_face.png  | Bin 0 -> 44995 bytes
 .../frontend/src/components/MkPlusOneEffect.vue    |   4 +-
 packages/frontend/src/pages/drop-and-fusion.vue    | 761 +++++++++++++++++++++
 packages/frontend/src/router.ts                    |   4 +
 packages/frontend/src/scripts/sound.ts             |  25 +-
 packages/frontend/src/ui/_common_/common.ts        |   5 +
 18 files changed, 827 insertions(+), 4 deletions(-)
 create mode 100644 packages/frontend/assets/drop-and-fusion/cold_face.png
 create mode 100644 packages/frontend/assets/drop-and-fusion/drop-arrow.svg
 create mode 100644 packages/frontend/assets/drop-and-fusion/exploding_head.png
 create mode 100644 packages/frontend/assets/drop-and-fusion/face_with_open_mouth.png
 create mode 100644 packages/frontend/assets/drop-and-fusion/face_with_symbols_on_mouth.png
 create mode 100644 packages/frontend/assets/drop-and-fusion/frame.svg
 create mode 100644 packages/frontend/assets/drop-and-fusion/grinning_squinting_face.png
 create mode 100644 packages/frontend/assets/drop-and-fusion/heart_suit.png
 create mode 100644 packages/frontend/assets/drop-and-fusion/pleading_face.png
 create mode 100644 packages/frontend/assets/drop-and-fusion/smiling_face_with_hearts.png
 create mode 100644 packages/frontend/assets/drop-and-fusion/smiling_face_with_sunglasses.png
 create mode 100644 packages/frontend/assets/drop-and-fusion/zany_face.png
 create mode 100644 packages/frontend/src/pages/drop-and-fusion.vue

(limited to 'packages/frontend/src/scripts')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 34b598224a..3a6e2db950 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@
 - Feat: [mCaptcha](https://github.com/mCaptcha/mCaptcha)のサポートを追加
 
 ### Client
+- Feat: 新しいゲームを追加
 - Enhance: ハッシュタグ入力時に、本文の末尾の行に何も書かれていない場合は新たにスペースを追加しないように
 - Fix: v2023.12.0で追加された「モデレーターがユーザーのアイコンもしくはバナー画像を未設定状態にできる機能」が管理画面上で正しく表示されていない問題を修正
 - Enhance: チャンネルノートのピン留めをノートのメニューからできるよ
diff --git a/packages/frontend/assets/drop-and-fusion/cold_face.png b/packages/frontend/assets/drop-and-fusion/cold_face.png
new file mode 100644
index 0000000000..f5f53e9efc
Binary files /dev/null and b/packages/frontend/assets/drop-and-fusion/cold_face.png differ
diff --git a/packages/frontend/assets/drop-and-fusion/drop-arrow.svg b/packages/frontend/assets/drop-and-fusion/drop-arrow.svg
new file mode 100644
index 0000000000..f98bb8a1ac
--- /dev/null
+++ b/packages/frontend/assets/drop-and-fusion/drop-arrow.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M0,0L128,0L64,64L0,0Z" style="fill:rgb(255,61,0);"/>
+    <path d="M0,0L128,0L64,64L0,0ZM28.971,12L64,47.029C64,47.029 99.029,12 99.029,12L28.971,12Z" style="fill:rgb(255,122,0);"/>
+</svg>
diff --git a/packages/frontend/assets/drop-and-fusion/exploding_head.png b/packages/frontend/assets/drop-and-fusion/exploding_head.png
new file mode 100644
index 0000000000..e8ec5182c8
Binary files /dev/null and b/packages/frontend/assets/drop-and-fusion/exploding_head.png differ
diff --git a/packages/frontend/assets/drop-and-fusion/face_with_open_mouth.png b/packages/frontend/assets/drop-and-fusion/face_with_open_mouth.png
new file mode 100644
index 0000000000..c523020f62
Binary files /dev/null and b/packages/frontend/assets/drop-and-fusion/face_with_open_mouth.png differ
diff --git a/packages/frontend/assets/drop-and-fusion/face_with_symbols_on_mouth.png b/packages/frontend/assets/drop-and-fusion/face_with_symbols_on_mouth.png
new file mode 100644
index 0000000000..db9e839c84
Binary files /dev/null and b/packages/frontend/assets/drop-and-fusion/face_with_symbols_on_mouth.png differ
diff --git a/packages/frontend/assets/drop-and-fusion/frame.svg b/packages/frontend/assets/drop-and-fusion/frame.svg
new file mode 100644
index 0000000000..4276dae833
--- /dev/null
+++ b/packages/frontend/assets/drop-and-fusion/frame.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 450 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g>
+        <g transform="matrix(0.944444,0,0,0.875,12.5,62.5)">
+            <rect x="0" y="0" width="450" height="600" style="fill:rgb(241,232,220);"/>
+        </g>
+        <use xlink:href="#_Image1" x="0" y="49.048" width="450px" height="551px"/>
+    </g>
+    <g transform="matrix(0.755719,0.654896,-0.654896,0.755719,383.517,-217.265)">
+        <g transform="matrix(0.755719,-0.654896,0.654896,0.755719,-147.545,415.355)">
+            <use xlink:href="#_Image2" x="0" y="49" width="450px" height="551px"/>
+        </g>
+    </g>
+    <use xlink:href="#_Image3" x="25" y="74.5" width="400px" height="500px"/>
+    <g transform="matrix(1,0,0,2,1.13687e-13,-12.5)">
+        <rect x="25" y="37.5" width="400" height="12.5" style="fill:url(#_Linear4);"/>
+    </g>
+    <defs>
+        <image id="_Image1" width="450px" height="551px" xlink:href="data:image/png;base64,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CSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCpCSEAqQkhAKkJIQCp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"/>
+        <image id="_Image2" width="450px" height="551px" xlink:href="data:image/png;base64,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"/>
+        <image id="_Image3" width="400px" height="500px" xlink:href="data:image/png;base64,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"/>
+        <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(7.65404e-16,12.5,-0.390625,2.39189e-17,225,37.5)"><stop offset="0" style="stop-color:rgb(255,14,0);stop-opacity:0.5"/><stop offset="1" style="stop-color:rgb(255,13,0);stop-opacity:0"/></linearGradient>
+    </defs>
+</svg>
diff --git a/packages/frontend/assets/drop-and-fusion/grinning_squinting_face.png b/packages/frontend/assets/drop-and-fusion/grinning_squinting_face.png
new file mode 100644
index 0000000000..fd72d749a1
Binary files /dev/null and b/packages/frontend/assets/drop-and-fusion/grinning_squinting_face.png differ
diff --git a/packages/frontend/assets/drop-and-fusion/heart_suit.png b/packages/frontend/assets/drop-and-fusion/heart_suit.png
new file mode 100644
index 0000000000..b0105f8582
Binary files /dev/null and b/packages/frontend/assets/drop-and-fusion/heart_suit.png differ
diff --git a/packages/frontend/assets/drop-and-fusion/pleading_face.png b/packages/frontend/assets/drop-and-fusion/pleading_face.png
new file mode 100644
index 0000000000..42f58d411c
Binary files /dev/null and b/packages/frontend/assets/drop-and-fusion/pleading_face.png differ
diff --git a/packages/frontend/assets/drop-and-fusion/smiling_face_with_hearts.png b/packages/frontend/assets/drop-and-fusion/smiling_face_with_hearts.png
new file mode 100644
index 0000000000..416ef0410a
Binary files /dev/null and b/packages/frontend/assets/drop-and-fusion/smiling_face_with_hearts.png differ
diff --git a/packages/frontend/assets/drop-and-fusion/smiling_face_with_sunglasses.png b/packages/frontend/assets/drop-and-fusion/smiling_face_with_sunglasses.png
new file mode 100644
index 0000000000..c0f72254c2
Binary files /dev/null and b/packages/frontend/assets/drop-and-fusion/smiling_face_with_sunglasses.png differ
diff --git a/packages/frontend/assets/drop-and-fusion/zany_face.png b/packages/frontend/assets/drop-and-fusion/zany_face.png
new file mode 100644
index 0000000000..f14f9db20b
Binary files /dev/null and b/packages/frontend/assets/drop-and-fusion/zany_face.png differ
diff --git a/packages/frontend/src/components/MkPlusOneEffect.vue b/packages/frontend/src/components/MkPlusOneEffect.vue
index a741a3f7a8..6feb85d8de 100644
--- a/packages/frontend/src/components/MkPlusOneEffect.vue
+++ b/packages/frontend/src/components/MkPlusOneEffect.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
-	<span class="text" :class="{ up }">+1</span>
+	<span class="text" :class="{ up }">+{{ value }}</span>
 </div>
 </template>
 
@@ -16,7 +16,9 @@ import * as os from '@/os.js';
 const props = withDefaults(defineProps<{
 	x: number;
 	y: number;
+	value?: number;
 }>(), {
+	value: 1,
 });
 
 const emit = defineEmits<{
diff --git a/packages/frontend/src/pages/drop-and-fusion.vue b/packages/frontend/src/pages/drop-and-fusion.vue
new file mode 100644
index 0000000000..d0ca5157ef
--- /dev/null
+++ b/packages/frontend/src/pages/drop-and-fusion.vue
@@ -0,0 +1,761 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader/></template>
+	<MkSpacer :contentMax="800">
+		<div class="_gaps_s" :class="$style.root" style="margin: 0 auto;" :style="{ maxWidth: GAME_WIDTH + 'px' }">
+			<div style="display: flex;">
+				<div :class="$style.frame" style="flex: 1; margin-right: 10px;">
+					<div :class="$style.frameInner">
+						SCORE: <b><MkNumber :value="score"/></b>
+					</div>
+				</div>
+				<div :class="[$style.frame, $style.stock]" style="margin-left: auto;">
+					<div :class="$style.frameInner" style="text-align: center;">
+						NEXT >>>
+						<TransitionGroup
+							:enterActiveClass="$style.transition_stock_enterActive"
+							:leaveActiveClass="$style.transition_stock_leaveActive"
+							:enterFromClass="$style.transition_stock_enterFrom"
+							:leaveToClass="$style.transition_stock_leaveTo"
+							:moveClass="$style.transition_stock_move"
+						>
+							<div v-for="x in stock" :key="x.id" style="display: inline-block;">
+								<img :src="x.fruit.img" style="width: 32px;"/>
+							</div>
+						</TransitionGroup>
+					</div>
+				</div>
+			</div>
+			<div :class="$style.main">
+				<div ref="containerEl" :class="[$style.container, { [$style.gameOver]: gameOver }]" @click.stop.prevent="onClick" @touchmove="onTouchmove" @touchend="onTouchend" @mousemove="onMousemove">
+					<img src="/client-assets/drop-and-fusion/frame.svg" :class="$style.mainFrameImg"/>
+					<canvas ref="canvasEl" :class="$style.canvas"/>
+					<Transition
+						:enterActiveClass="$style.transition_combo_enterActive"
+						:leaveActiveClass="$style.transition_combo_leaveActive"
+						:enterFromClass="$style.transition_combo_enterFrom"
+						:leaveToClass="$style.transition_combo_leaveTo"
+						:moveClass="$style.transition_combo_move"
+					>
+						<div v-show="combo > 1" :class="$style.combo" :style="{ fontSize: `${100 + ((comboPrev - 2) * 15)}%` }">{{ comboPrev }} Chain!</div>
+					</Transition>
+					<Transition
+						:enterActiveClass="$style.transition_picked_enterActive"
+						:leaveActiveClass="$style.transition_picked_leaveActive"
+						:enterFromClass="$style.transition_picked_enterFrom"
+						:leaveToClass="$style.transition_picked_leaveTo"
+						:moveClass="$style.transition_picked_move"
+						mode="out-in"
+					>
+						<img v-if="currentPick" :key="currentPick.id" :src="currentPick?.fruit.img" :class="$style.currentFruit" :style="{ top: -(currentPick?.fruit.size / 2) + 'px', left: (mouseX - (currentPick?.fruit.size / 2)) + 'px', width: `${currentPick?.fruit.size}px` }"/>
+					</Transition>
+					<template v-if="dropReady">
+						<img src="/client-assets/drop-and-fusion/drop-arrow.svg" :class="$style.currentFruitArrow" :style="{ top: (currentPick?.fruit.size / 2) + 10 + 'px', left: (mouseX - 10) + 'px', width: `20px` }"/>
+						<div :class="$style.dropGuide" :style="{ left: (mouseX - 2) + 'px' }"/>
+					</template>
+					<div v-if="gameOver" :class="$style.gameOverLabel">
+						<div>GAME OVER!</div>
+						<div>SCORE: <MkNumber :value="score"/></div>
+					</div>
+				</div>
+			</div>
+			<MkButton @click="restart">Restart</MkButton>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import * as Matter from 'matter-js';
+import { Ref, onMounted, ref, shallowRef } from 'vue';
+import { EventEmitter } from 'eventemitter3';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+import * as sound from '@/scripts/sound.js';
+import MkRippleEffect from '@/components/MkRippleEffect.vue';
+import * as os from '@/os.js';
+import MkNumber from '@/components/MkNumber.vue';
+import MkPlusOneEffect from '@/components/MkPlusOneEffect.vue';
+import MkButton from '@/components/MkButton.vue';
+
+const containerEl = shallowRef<HTMLElement>();
+const canvasEl = shallowRef<HTMLCanvasElement>();
+const mouseX = ref(0);
+
+const BASE_SIZE = 30;
+const FRUITS = [{
+	id: '9377076d-c980-4d83-bdaf-175bc58275b7',
+	level: 10,
+	size: BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	score: 512,
+	available: false,
+	sfxPitch: 0.25,
+	img: '/client-assets/drop-and-fusion/exploding_head.png',
+	imgSize: 256,
+	spriteScale: 1.12,
+}, {
+	id: 'be9f38d2-b267-4b1a-b420-904e22e80568',
+	level: 9,
+	size: BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	score: 256,
+	available: false,
+	sfxPitch: 0.5,
+	img: '/client-assets/drop-and-fusion/face_with_symbols_on_mouth.png',
+	imgSize: 256,
+	spriteScale: 1.12,
+}, {
+	id: 'beb30459-b064-4888-926b-f572e4e72e0c',
+	level: 8,
+	size: BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	score: 128,
+	available: false,
+	sfxPitch: 0.75,
+	img: '/client-assets/drop-and-fusion/cold_face.png',
+	imgSize: 256,
+	spriteScale: 1.12,
+}, {
+	id: 'feab6426-d9d8-49ae-849c-048cdbb6cdf0',
+	level: 7,
+	size: BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	score: 64,
+	available: false,
+	sfxPitch: 1,
+	img: '/client-assets/drop-and-fusion/zany_face.png',
+	imgSize: 256,
+	spriteScale: 1.12,
+}, {
+	id: 'd6d8fed6-6d18-4726-81a1-6cf2c974df8a',
+	level: 6,
+	size: BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
+	score: 32,
+	available: false,
+	sfxPitch: 1.5,
+	img: '/client-assets/drop-and-fusion/pleading_face.png',
+	imgSize: 256,
+	spriteScale: 1.12,
+}, {
+	id: '249c728e-230f-4332-bbbf-281c271c75b2',
+	level: 5,
+	size: BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25,
+	score: 16,
+	available: true,
+	sfxPitch: 2,
+	img: '/client-assets/drop-and-fusion/face_with_open_mouth.png',
+	imgSize: 256,
+	spriteScale: 1.12,
+}, {
+	id: '23d67613-d484-4a93-b71e-3e81b19d6186',
+	level: 4,
+	size: BASE_SIZE * 1.25 * 1.25 * 1.25,
+	score: 8,
+	available: true,
+	sfxPitch: 2.5,
+	img: '/client-assets/drop-and-fusion/smiling_face_with_sunglasses.png',
+	imgSize: 256,
+	spriteScale: 1.12,
+}, {
+	id: '3cbd0add-ad7d-4685-bad0-29f6dddc0b99',
+	level: 3,
+	size: BASE_SIZE * 1.25 * 1.25,
+	score: 4,
+	available: true,
+	sfxPitch: 3,
+	img: '/client-assets/drop-and-fusion/grinning_squinting_face.png',
+	imgSize: 256,
+	spriteScale: 1.12,
+}, {
+	id: '8f86d4f4-ee02-41bf-ad38-1ce0ae457fb5',
+	level: 2,
+	size: BASE_SIZE * 1.25,
+	score: 2,
+	available: true,
+	sfxPitch: 3.5,
+	img: '/client-assets/drop-and-fusion/smiling_face_with_hearts.png',
+	imgSize: 256,
+	spriteScale: 1.12,
+}, {
+	id: '64ec4add-ce39-42b4-96cb-33908f3f118d',
+	level: 1,
+	size: BASE_SIZE,
+	score: 1,
+	available: true,
+	sfxPitch: 4,
+	img: '/client-assets/drop-and-fusion/heart_suit.png',
+	imgSize: 256,
+	spriteScale: 1.12,
+}] as const;
+
+const GAME_WIDTH = 450;
+const GAME_HEIGHT = 600;
+const PHYSICS_QUALITY_FACTOR = 32; // 低いほどパフォーマンスが高いがガタガタして安定しなくなる
+
+let viewScaleX = 1;
+let viewScaleY = 1;
+const currentPick = shallowRef<{ id: string; fruit: typeof FRUITS[number] } | null>(null);
+const stock = shallowRef<{ id: string; fruit: typeof FRUITS[number] }[]>([]);
+const score = ref(0);
+const combo = ref(0);
+const comboPrev = ref(0);
+const dropReady = ref(true);
+const gameOver = ref(false);
+const gameStarted = ref(false);
+
+class Game extends EventEmitter<{
+	changeScore: (score: number) => void;
+	changeCombo: (combo: number) => void;
+	changeStock: (stock: { id: string; fruit: typeof FRUITS[number] }[]) => void;
+	dropped: () => void;
+	fusioned: (x: number, y: number, score: number) => void;
+	gameOver: () => void;
+}> {
+	private COMBO_INTERVAL = 1000;
+	public readonly DROP_INTERVAL = 500;
+	private PLAYAREA_MARGIN = 25;
+	private engine: Matter.Engine;
+	private render: Matter.Render;
+	private runner: Matter.Runner;
+	private detector: Matter.Detector;
+	private overflowCollider: Matter.Body;
+	private isGameOver = false;
+
+	/**
+	 * フィールドに出ていて、かつ合体の対象となるアイテム
+	 */
+	private activeBodyIds: Matter.Body['id'][] = [];
+
+	private latestDroppedBodyId: Matter.Body['id'] | null = null;
+
+	private latestDroppedAt = 0;
+	private latestFusionedAt = 0;
+	private stock: { id: string; fruit: typeof FRUITS[number] }[] = [];
+
+	private _combo = 0;
+	private get combo() {
+		return this._combo;
+	}
+	private set combo(value: number) {
+		this._combo = value;
+		this.emit('changeCombo', value);
+	}
+
+	private _score = 0;
+	private get score() {
+		return this._score;
+	}
+	private set score(value: number) {
+		this._score = value;
+		this.emit('changeScore', value);
+	}
+
+	constructor() {
+		super();
+
+		this.engine = Matter.Engine.create({
+			constraintIterations: 2 * PHYSICS_QUALITY_FACTOR,
+			positionIterations: 6 * PHYSICS_QUALITY_FACTOR,
+			velocityIterations: 4 * PHYSICS_QUALITY_FACTOR,
+			gravity: {
+				x: 0,
+				y: 1,
+			},
+			timing: {
+				timeScale: 2,
+			},
+			enableSleeping: false,
+		});
+
+		this.render = Matter.Render.create({
+			engine: this.engine,
+			canvas: canvasEl.value,
+			options: {
+				width: GAME_WIDTH,
+				height: GAME_HEIGHT,
+				background: 'transparent', // transparent to hide
+				wireframeBackground: 'transparent', // transparent to hide
+				wireframes: false,
+				showSleeping: false,
+				pixelRatio: window.devicePixelRatio,
+			},
+		});
+
+		Matter.Render.run(this.render);
+
+		this.runner = Matter.Runner.create();
+		Matter.Runner.run(this.runner, this.engine);
+
+		this.detector = Matter.Detector.create();
+
+		this.engine.world.bodies = [];
+
+		//#region walls
+		const WALL_OPTIONS: Matter.IChamferableBodyDefinition = {
+			isStatic: true,
+			render: {
+				strokeStyle: 'transparent',
+				fillStyle: 'transparent',
+			},
+		};
+
+		const thickness = 100;
+		Matter.Composite.add(this.engine.world, [
+			Matter.Bodies.rectangle(GAME_WIDTH / 2, GAME_HEIGHT + (thickness / 2) - this.PLAYAREA_MARGIN, GAME_WIDTH, thickness, WALL_OPTIONS),
+			Matter.Bodies.rectangle(GAME_WIDTH + (thickness / 2) - this.PLAYAREA_MARGIN, GAME_HEIGHT / 2, thickness, GAME_HEIGHT, WALL_OPTIONS),
+			Matter.Bodies.rectangle(-((thickness / 2) - this.PLAYAREA_MARGIN), GAME_HEIGHT / 2, thickness, GAME_HEIGHT, WALL_OPTIONS),
+		]);
+		//#endregion
+
+		this.overflowCollider = Matter.Bodies.rectangle(GAME_WIDTH / 2, 0, GAME_WIDTH, 125, {
+			isStatic: true,
+			isSensor: true,
+			render: {
+				strokeStyle: 'transparent',
+				fillStyle: 'transparent',
+			},
+		});
+		Matter.Composite.add(this.engine.world, this.overflowCollider);
+
+		// fit the render viewport to the scene
+		Matter.Render.lookAt(this.render, {
+			min: { x: 0, y: 0 },
+			max: { x: GAME_WIDTH, y: GAME_HEIGHT },
+		});
+	}
+
+	private createBody(fruit: typeof FRUITS[number], x: number, y: number) {
+		return Matter.Bodies.circle(x, y, fruit.size / 2, {
+			label: fruit.id,
+			density: 0.0005,
+			frictionAir: 0.01,
+			restitution: 0.4,
+			friction: 0.5,
+			frictionStatic: 5,
+			//mass: 0,
+			render: {
+				sprite: {
+					texture: fruit.img,
+					xScale: (fruit.size / fruit.imgSize) * fruit.spriteScale,
+					yScale: (fruit.size / fruit.imgSize) * fruit.spriteScale,
+				},
+			},
+		});
+	}
+
+	private fusion(bodyA: Matter.Body, bodyB: Matter.Body) {
+		const now = Date.now();
+		if (this.latestFusionedAt > now - this.COMBO_INTERVAL) {
+			this.combo++;
+		} else {
+			this.combo = 1;
+		}
+		this.latestFusionedAt = now;
+
+		// TODO: 単に位置だけでなくそれぞれの動きベクトルも融合する
+		const newX = (bodyA.position.x + bodyB.position.x) / 2;
+		const newY = (bodyA.position.y + bodyB.position.y) / 2;
+
+		Matter.Composite.remove(this.engine.world, [bodyA, bodyB]);
+		this.activeBodyIds = this.activeBodyIds.filter(x => x !== bodyA.id && x !== bodyB.id);
+
+		const currentFruit = FRUITS.find(y => y.id === bodyA.label)!;
+		const nextFruit = FRUITS.find(x => x.level === currentFruit.level + 1);
+
+		if (nextFruit) {
+			const body = this.createBody(nextFruit, newX, newY);
+			Matter.Composite.add(this.engine.world, body);
+
+			// 連鎖してfusionした場合の分かりやすさのため少し間を置いてからfusion対象になるようにする
+			window.setTimeout(() => {
+				this.activeBodyIds.push(body.id);
+			}, 100);
+
+			const additionalScore = Math.round(currentFruit.score * (1 + (this.combo / 3)));
+			this.score += additionalScore;
+
+			const pan = ((newX / GAME_WIDTH) - 0.5) * 2;
+			sound.playRaw('syuilo/bubble2', 1, pan, nextFruit.sfxPitch);
+
+			this.emit('fusioned', newX, newY, additionalScore);
+		} else {
+			//const VELOCITY = 30;
+			//for (let i = 0; i < 10; i++) {
+			//	const body = createBody(FRUITS.find(x => x.level === (1 + Math.floor(Math.random() * 3)))!, x + ((Math.random() * VELOCITY) - (VELOCITY / 2)), y + ((Math.random() * VELOCITY) - (VELOCITY / 2)));
+			//	Matter.Composite.add(world, body);
+			//	bodies.push(body);
+			//}
+			//sound.playRaw({
+			//	type: 'syuilo/bubble2',
+			//	volume: 1,
+			//});
+		}
+	}
+
+	private gameOver() {
+		this.isGameOver = true;
+		Matter.Runner.stop(this.runner);
+		this.emit('gameOver');
+	}
+
+	public start() {
+		for (let i = 0; i < 4; i++) {
+			this.stock.push({
+				id: Math.random().toString(),
+				fruit: FRUITS.filter(x => x.available)[Math.floor(Math.random() * FRUITS.filter(x => x.available).length)],
+			});
+		}
+		this.emit('changeStock', this.stock);
+
+		// TODO: fusion予約状態のアイテムは光らせるなどの演出をすると楽しそう
+		let fusionReservedPairs: { bodyA: Matter.Body; bodyB: Matter.Body }[] = [];
+
+		const minCollisionDepthForSound = 2.5;
+		const maxCollisionDepthForSound = 9;
+		const soundPitchMax = 4;
+		const soundPitchMin = 0.5;
+
+		Matter.Events.on(this.engine, 'collisionStart', (event) => {
+			for (const pairs of event.pairs) {
+				const { bodyA, bodyB } = pairs;
+				if (bodyA.id === this.overflowCollider.id || bodyB.id === this.overflowCollider.id) {
+					if (bodyA.id === this.latestDroppedBodyId || bodyB.id === this.latestDroppedBodyId) {
+						continue;
+					}
+					this.gameOver();
+					break;
+				}
+				const shouldFusion = (bodyA.label === bodyB.label) && !fusionReservedPairs.some(x => x.bodyA.id === bodyA.id || x.bodyA.id === bodyB.id || x.bodyB.id === bodyA.id || x.bodyB.id === bodyB.id);
+				if (shouldFusion) {
+					if (this.activeBodyIds.includes(bodyA.id) && this.activeBodyIds.includes(bodyB.id)) {
+						this.fusion(bodyA, bodyB);
+					} else {
+						fusionReservedPairs.push({ bodyA, bodyB });
+						window.setTimeout(() => {
+							fusionReservedPairs = fusionReservedPairs.filter(x => x.bodyA.id !== bodyA.id && x.bodyB.id !== bodyB.id);
+							this.fusion(bodyA, bodyB);
+						}, 100);
+					}
+				} else {
+					const energy = pairs.collision.depth;
+					if (energy > minCollisionDepthForSound) {
+						const vol = (Math.min(maxCollisionDepthForSound, energy - minCollisionDepthForSound) / maxCollisionDepthForSound) / 4;
+						const pan = ((((bodyA.position.x + bodyB.position.x) / 2) / GAME_WIDTH) - 0.5) * 2;
+						const pitch = soundPitchMin + ((soundPitchMax - soundPitchMin) * (1 - (Math.min(10, energy) / 10)));
+						sound.playRaw('syuilo/poi1', vol, pan, pitch);
+					}
+				}
+			}
+		});
+
+		window.setInterval(() => {
+			if (this.latestFusionedAt < Date.now() - this.COMBO_INTERVAL) {
+				this.combo = 0;
+			}
+		}, 500);
+	}
+
+	public drop(_x: number) {
+		if (this.isGameOver) return;
+		if (Date.now() - this.latestDroppedAt < this.DROP_INTERVAL) {
+			return;
+		}
+		const st = this.stock.shift()!;
+		this.stock.push({
+			id: Math.random().toString(),
+			fruit: FRUITS.filter(x => x.available)[Math.floor(Math.random() * FRUITS.filter(x => x.available).length)],
+		});
+		this.emit('changeStock', this.stock);
+
+		const x = Math.min(GAME_WIDTH - this.PLAYAREA_MARGIN - (st.fruit.size / 2), Math.max(this.PLAYAREA_MARGIN + (st.fruit.size / 2), _x));
+		const body = this.createBody(st.fruit, x, st.fruit.size / 2);
+		Matter.Composite.add(this.engine.world, body);
+		this.activeBodyIds.push(body.id);
+		this.latestDroppedBodyId = body.id;
+		this.latestDroppedAt = Date.now();
+		this.emit('dropped');
+		const pan = ((x / GAME_WIDTH) - 0.5) * 2;
+		sound.playRaw('syuilo/poi2', 1, pan);
+	}
+
+	public dispose() {
+		Matter.Render.stop(this.render);
+		Matter.Runner.stop(this.runner);
+		Matter.World.clear(this.engine.world, false);
+		Matter.Engine.clear(this.engine);
+	}
+}
+
+let game: Game;
+
+function onClick(ev: MouseEvent) {
+	const rect = containerEl.value.getBoundingClientRect();
+
+	const x = (ev.clientX - rect.left) / viewScaleX;
+
+	game.drop(x);
+}
+
+function onTouchend(ev: TouchEvent) {
+	const rect = containerEl.value.getBoundingClientRect();
+
+	const x = (ev.changedTouches[0].clientX - rect.left) / viewScaleX;
+
+	game.drop(x);
+}
+
+function onMousemove(ev: MouseEvent) {
+	mouseX.value = ev.clientX - containerEl.value.getBoundingClientRect().left;
+}
+
+function onTouchmove(ev: TouchEvent) {
+	mouseX.value = ev.touches[0].clientX - containerEl.value.getBoundingClientRect().left;
+}
+
+function restart() {
+	game.dispose();
+	gameOver.value = false;
+	currentPick.value = null;
+	dropReady.value = true;
+	stock.value = [];
+	score.value = 0;
+	combo.value = 0;
+	comboPrev.value = 0;
+	game = new Game();
+	attachGame();
+	game.start();
+}
+
+function attachGame() {
+	game.addListener('changeScore', value => {
+		score.value = value;
+	});
+
+	game.addListener('changeCombo', value => {
+		if (value === 0) {
+			comboPrev.value = combo.value;
+		} else {
+			comboPrev.value = value;
+		}
+		combo.value = value;
+	});
+
+	game.addListener('changeStock', value => {
+		currentPick.value = JSON.parse(JSON.stringify(value[0]));
+		stock.value = JSON.parse(JSON.stringify(value.slice(1)));
+	});
+
+	game.addListener('dropped', () => {
+		dropReady.value = false;
+		window.setTimeout(() => {
+			if (!gameOver.value) {
+				dropReady.value = true;
+			}
+		}, game.DROP_INTERVAL);
+	});
+
+	game.addListener('fusioned', (x, y, score) => {
+		const rect = canvasEl.value.getBoundingClientRect();
+		const domX = rect.left + (x * viewScaleX);
+		const domY = rect.top + (y * viewScaleY);
+		os.popup(MkRippleEffect, { x: domX, y: domY }, {}, 'end');
+		os.popup(MkPlusOneEffect, { x: domX, y: domY, value: score }, {}, 'end');
+	});
+
+	game.addListener('gameOver', () => {
+		currentPick.value = null;
+		dropReady.value = false;
+		gameOver.value = true;
+	});
+}
+
+onMounted(() => {
+	game = new Game();
+
+	attachGame();
+
+	game.start();
+
+	const actualCanvasWidth = canvasEl.value.getBoundingClientRect().width;
+	const actualCanvasHeight = canvasEl.value.getBoundingClientRect().height;
+	viewScaleX = actualCanvasWidth / GAME_WIDTH;
+	viewScaleY = actualCanvasHeight / GAME_HEIGHT;
+});
+
+definePageMetadata({
+	title: 'Drop & Fusion',
+	icon: 'ti ti-apple',
+});
+</script>
+
+<style lang="scss" module>
+.transition_stock_move,
+.transition_stock_enterActive,
+.transition_stock_leaveActive {
+	transition: opacity 0.4s cubic-bezier(0,.5,.5,1), transform 0.4s cubic-bezier(0,.5,.5,1) !important;
+}
+.transition_stock_enterFrom,
+.transition_stock_leaveTo {
+	opacity: 0;
+	transform: scale(0.7);
+}
+.transition_stock_leaveActive {
+	position: absolute;
+}
+
+.transition_picked_move,
+.transition_picked_enterActive {
+	transition: opacity 0.5s cubic-bezier(0,.5,.5,1), transform 0.5s cubic-bezier(0,.5,.5,1) !important;
+}
+.transition_picked_leaveActive {
+	transition: all 0s !important;
+}
+.transition_picked_enterFrom,
+.transition_picked_leaveTo {
+	opacity: 0;
+	transform: translateY(-50px);
+}
+.transition_picked_leaveActive {
+	position: absolute;
+}
+
+.transition_combo_move,
+.transition_combo_enterActive {
+	transition: all 0s !important;
+}
+.transition_combo_leaveActive {
+	transition: opacity 0.4s cubic-bezier(0,.5,.5,1), transform 0.4s cubic-bezier(0,.5,.5,1) !important;
+}
+.transition_combo_enterFrom,
+.transition_combo_leaveTo {
+	opacity: 0;
+	transform: scale(0.7);
+}
+.transition_combo_leaveActive {
+	position: absolute;
+}
+
+.root {
+	user-select: none;
+
+	* {
+		user-select: none;
+	}
+}
+
+.frame {
+	padding: 7px;
+	background: #8C4F26;
+	box-shadow: 0 6px 16px #0007, 0 0 1px 1px #693410, inset 0 0 2px 1px #ce8a5c;
+	border-radius: 10px;
+}
+.frameInner {
+	padding: 4px 8px;
+	background: #F1E8DC;
+	box-shadow: 0 0 2px 1px #ce8a5c, inset 0 0 1px 1px #693410;
+	border-radius: 6px;
+	color: #693410;
+}
+
+.main {
+	position: relative;
+}
+
+.mainFrameImg {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	filter: drop-shadow(0 6px 16px #0007);
+	pointer-events: none;
+	user-select: none;
+}
+
+.canvas {
+	position: relative;
+	display: block;
+	z-index: 1;
+	margin-top: -50px;
+	max-width: 100%;
+	pointer-events: none;
+	user-select: none;
+}
+
+.container {
+	position: relative;
+}
+
+.stock {
+	pointer-events: none;
+	user-select: none;
+}
+
+.combo {
+	position: absolute;
+	z-index: 3;
+	top: 50%;
+	width: 100%;
+	text-align: center;
+	font-weight: bold;
+	font-style: oblique;
+	pointer-events: none;
+	user-select: none;
+}
+
+.currentFruit {
+	position: absolute;
+	margin-top: 20px;
+	z-index: 2;
+	filter: drop-shadow(0 6px 16px #0007);
+	pointer-events: none;
+	user-select: none;
+}
+
+.currentFruitArrow {
+	position: absolute;
+	margin-top: 20px;
+	z-index: 3;
+	animation: currentFruitArrow 2s ease infinite;
+	pointer-events: none;
+	user-select: none;
+}
+
+.dropGuide {
+	position: absolute;
+	top: 50px;
+	z-index: 3;
+	width: 3px;
+	height: calc(100% - 50px);
+	background: #f002;
+	pointer-events: none;
+	user-select: none;
+}
+
+.gameOverLabel {
+	position: absolute;
+	z-index: 10;
+	top: 50%;
+	width: 100%;
+	padding: 16px;
+	box-sizing: border-box;
+	background: #0007;
+	color: #fff;
+	text-align: center;
+	font-weight: bold;
+}
+
+.gameOver {
+	.canvas {
+		filter: grayscale(1);
+	}
+}
+
+@keyframes currentFruitArrow {
+	0% { transform: translateY(0); }
+	25% { transform: translateY(-8px); }
+	50% { transform: translateY(0); }
+	75% { transform: translateY(-8px); }
+	100% { transform: translateY(0); }
+}
+</style>
diff --git a/packages/frontend/src/router.ts b/packages/frontend/src/router.ts
index baee85866c..9cf4be778c 100644
--- a/packages/frontend/src/router.ts
+++ b/packages/frontend/src/router.ts
@@ -527,6 +527,10 @@ export const routes = [{
 	path: '/clicker',
 	component: page(() => import('./pages/clicker.vue')),
 	loginRequired: true,
+}, {
+	path: '/drop-and-fusion',
+	component: page(() => import('./pages/drop-and-fusion.vue')),
+	loginRequired: true,
 }, {
 	path: '/timeline',
 	component: page(() => import('./pages/timeline.vue')),
diff --git a/packages/frontend/src/scripts/sound.ts b/packages/frontend/src/scripts/sound.ts
index 0b966ff199..acde78f5fd 100644
--- a/packages/frontend/src/scripts/sound.ts
+++ b/packages/frontend/src/scripts/sound.ts
@@ -92,7 +92,13 @@ export type OperationType = typeof operationTypes[number];
  * @param soundStore サウンド設定
  * @param options `useCache`: デフォルトは`true` 一度再生した音声はキャッシュする
  */
-export async function loadAudio(soundStore: SoundStore, options?: { useCache?: boolean; }) {
+export async function loadAudio(soundStore: {
+	type: Exclude<SoundType, '_driveFile_'>;
+} | {
+	type: '_driveFile_';
+	fileId: string;
+	fileUrl: string;
+}, options?: { useCache?: boolean; }) {
 	if (_DEV_) console.log('loading audio. opts:', options);
 	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 	if (soundStore.type === null || (soundStore.type === '_driveFile_' && !soundStore.fileUrl)) {
@@ -179,18 +185,31 @@ export async function playFile(soundStore: SoundStore) {
 	createSourceNode(buffer, soundStore.volume)?.start();
 }
 
-export function createSourceNode(buffer: AudioBuffer, volume: number) : AudioBufferSourceNode | null {
+export async function playRaw(type: Exclude<SoundType, '_driveFile_'>, volume = 1, pan = 0, playbackRate = 1) {
+	const buffer = await loadAudio({ type });
+	if (!buffer) return;
+	createSourceNode(buffer, volume, pan, playbackRate)?.start();
+}
+
+export function createSourceNode(buffer: AudioBuffer, volume: number, pan = 0, playbackRate = 1) : AudioBufferSourceNode | null {
 	const masterVolume = defaultStore.state.sound_masterVolume;
 	if (isMute() || masterVolume === 0 || volume === 0) {
 		return null;
 	}
 
+	const panNode = ctx.createStereoPanner();
+	panNode.pan.value = pan;
+
 	const gainNode = ctx.createGain();
 	gainNode.gain.value = masterVolume * volume;
 
 	const soundSource = ctx.createBufferSource();
 	soundSource.buffer = buffer;
-	soundSource.connect(gainNode).connect(ctx.destination);
+	soundSource.playbackRate.value = playbackRate;
+	soundSource
+		.connect(panNode)
+		.connect(gainNode)
+		.connect(ctx.destination);
 
 	return soundSource;
 }
diff --git a/packages/frontend/src/ui/_common_/common.ts b/packages/frontend/src/ui/_common_/common.ts
index b970ff1df4..e50002dc2c 100644
--- a/packages/frontend/src/ui/_common_/common.ts
+++ b/packages/frontend/src/ui/_common_/common.ts
@@ -27,6 +27,11 @@ function toolsMenuItems(): MenuItem[] {
 		to: '/clicker',
 		text: '🍪👈',
 		icon: 'ti ti-cookie',
+	}, {
+		type: 'link',
+		to: '/drop-and-fusion',
+		text: 'Drop & Fusion',
+		icon: 'ti ti-apple',
 	}, ($i && ($i.isAdmin || $i.policies.canManageCustomEmojis)) ? {
 		type: 'link',
 		to: '/custom-emojis-manager',
-- 
cgit v1.2.3-freya


From 622a09f8ed2e94b5b89894f1f10745d53af45069 Mon Sep 17 00:00:00 2001
From: FineArchs <133759614+FineArchs@users.noreply.github.com>
Date: Sun, 7 Jan 2024 13:29:17 +0900
Subject: Fix: `Mk:C:mfm`の`onClickEv`が正常に呼び出されない問題を修正 (#12831)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix clickable api

* Update CHANGELOG.md

* revert CHANGELOG.md

* Update CHANGELOG.md
---
 packages/frontend/src/scripts/aiscript/ui.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/frontend/src/scripts')

diff --git a/packages/frontend/src/scripts/aiscript/ui.ts b/packages/frontend/src/scripts/aiscript/ui.ts
index 08ba1e6d9b..215ac4cc69 100644
--- a/packages/frontend/src/scripts/aiscript/ui.ts
+++ b/packages/frontend/src/scripts/aiscript/ui.ts
@@ -218,7 +218,7 @@ function getTextOptions(def: values.Value | undefined): Omit<AsUiText, 'id' | 't
 	};
 }
 
-function getMfmOptions(def: values.Value | undefined): Omit<AsUiMfm, 'id' | 'type'> {
+function getMfmOptions(def: values.Value | undefined, call: (fn: values.VFn, args: values.Value[]) => Promise<values.Value>): Omit<AsUiMfm, 'id' | 'type'> {
 	utils.assertObject(def);
 
 	const text = def.value.get('text');
@@ -241,7 +241,7 @@ function getMfmOptions(def: values.Value | undefined): Omit<AsUiMfm, 'id' | 'typ
 		color: color?.value,
 		font: font?.value,
 		onClickEv: (evId: string) => {
-			if (onClickEv) call(onClickEv, values.STR(evId));
+			if (onClickEv) call(onClickEv, [values.STR(evId)]);
 		},
 	};
 }
-- 
cgit v1.2.3-freya


From 5e71418d5caca1cea333ee1b8629987cc69c4fbc Mon Sep 17 00:00:00 2001
From: Kagami Sascha Rosylight <saschanaz@outlook.com>
Date: Sun, 7 Jan 2024 08:02:53 +0100
Subject: fix(frontend/emoji) restore U+FE0F for simple emojis (#12866)

* fix(frontend/emoji) restore U+FE0F for simple emojis

* Update CHANGELOG.md

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 CHANGELOG.md                                       |  1 +
 .../frontend/src/components/global/MkEmoji.vue     | 10 +++---
 packages/frontend/src/scripts/emojilist.ts         |  7 +++-
 packages/frontend/test/emoji.test.ts               | 41 ++++++++++++++++++++++
 packages/frontend/test/init.ts                     | 24 +++++++------
 5 files changed, 65 insertions(+), 18 deletions(-)
 create mode 100644 packages/frontend/test/emoji.test.ts

(limited to 'packages/frontend/src/scripts')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d2fb4ccd5..474fcad674 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@
 ### Client
 - Feat: 新しいゲームを追加
 - Enhance: ハッシュタグ入力時に、本文の末尾の行に何も書かれていない場合は新たにスペースを追加しないように
+- Fix: ネイティブモードの絵文字がモノクロにならないように
 - Fix: v2023.12.0で追加された「モデレーターがユーザーのアイコンもしくはバナー画像を未設定状態にできる機能」が管理画面上で正しく表示されていない問題を修正
 - Enhance: チャンネルノートのピン留めをノートのメニューからできるよ
 
diff --git a/packages/frontend/src/components/global/MkEmoji.vue b/packages/frontend/src/components/global/MkEmoji.vue
index 76ca8688d1..f6b21343b6 100644
--- a/packages/frontend/src/components/global/MkEmoji.vue
+++ b/packages/frontend/src/components/global/MkEmoji.vue
@@ -5,15 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <img v-if="!useOsNativeEmojis" :class="$style.root" :src="url" :alt="props.emoji" decoding="async" @pointerenter="computeTitle" @click="onClick"/>
-<span v-else-if="useOsNativeEmojis" :alt="props.emoji" @pointerenter="computeTitle" @click="onClick">{{ props.emoji }}</span>
-<span v-else>{{ emoji }}</span>
+<span v-else :alt="props.emoji" @pointerenter="computeTitle" @click="onClick">{{ colorizedNativeEmoji }}</span>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject } from 'vue';
 import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base.js';
 import { defaultStore } from '@/store.js';
-import { getEmojiName } from '@/scripts/emojilist.js';
+import { colorizeEmoji, getEmojiName } from '@/scripts/emojilist.js';
 import * as os from '@/os.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 import * as sound from '@/scripts/sound.js';
@@ -30,9 +29,8 @@ const react = inject<((name: string) => void) | null>('react', null);
 const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
 
 const useOsNativeEmojis = computed(() => defaultStore.state.emojiStyle === 'native');
-const url = computed(() => {
-	return char2path(props.emoji);
-});
+const url = computed(() => char2path(props.emoji));
+const colorizedNativeEmoji = computed(() => colorizeEmoji(props.emoji));
 
 // Searching from an array with 2000 items for every emoji felt like too energy-consuming, so I decided to do it lazily on pointerenter
 function computeTitle(event: PointerEvent): void {
diff --git a/packages/frontend/src/scripts/emojilist.ts b/packages/frontend/src/scripts/emojilist.ts
index 8885bf4b7f..4bd8bf94be 100644
--- a/packages/frontend/src/scripts/emojilist.ts
+++ b/packages/frontend/src/scripts/emojilist.ts
@@ -36,7 +36,8 @@ for (let i = 0; i < emojilist.length; i++) {
 export const emojiCharByCategory = _charGroupByCategory;
 
 export function getEmojiName(char: string): string | null {
-	const idx = _indexByChar.get(char);
+	// Colorize it because emojilist.json assumes that
+	const idx = _indexByChar.get(colorizeEmoji(char));
 	if (idx == null) {
 		return null;
 	} else {
@@ -44,6 +45,10 @@ export function getEmojiName(char: string): string | null {
 	}
 }
 
+export function colorizeEmoji(char: string) {
+	return char.length === 1 ? `${char}\uFE0F` : char;
+}
+
 export interface CustomEmojiFolderTree {
 	value: string;
 	category: string;
diff --git a/packages/frontend/test/emoji.test.ts b/packages/frontend/test/emoji.test.ts
new file mode 100644
index 0000000000..a1782a4913
--- /dev/null
+++ b/packages/frontend/test/emoji.test.ts
@@ -0,0 +1,41 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { describe, test, assert, afterEach } from 'vitest';
+import { render, cleanup, type RenderResult } from '@testing-library/vue';
+import { defaultStoreState } from './init.js';
+import { getEmojiName } from '@/scripts/emojilist.js';
+import { components } from '@/components/index.js';
+import { directives } from '@/directives/index.js';
+import MkEmoji from '@/components/global/MkEmoji.vue';
+
+describe('Emoji', () => {
+	const renderEmoji = (emoji: string): RenderResult => {
+		return render(MkEmoji, {
+			props: { emoji },
+			global: { directives, components },
+		});
+	};
+
+	afterEach(() => {
+		cleanup();
+		defaultStoreState.emojiStyle = '';
+	});
+
+	describe('MkEmoji', () => {
+		test('Should render selector-less heart with color in native mode', async () => {
+			defaultStoreState.emojiStyle = 'native';
+			const mkEmoji = await renderEmoji('\u2764'); // monochrome heart
+			assert.ok(mkEmoji.queryByText('\u2764\uFE0F')); // colored heart
+			assert.ok(!mkEmoji.queryByText('\u2764'));
+		});
+	});
+
+	describe('Emoji list', () => {
+		test('Should get the name of the heart', () => {
+			assert.strictEqual(getEmojiName('\u2764'), 'heart');
+		});
+	});
+});
diff --git a/packages/frontend/test/init.ts b/packages/frontend/test/init.ts
index 6d93ff8cb0..f21248cfee 100644
--- a/packages/frontend/test/init.ts
+++ b/packages/frontend/test/init.ts
@@ -17,21 +17,23 @@ updateI18n(locales['en-US']);
 // XXX: misskey-js panics if WebSocket is not defined
 vi.stubGlobal('WebSocket', class WebSocket extends EventTarget { static CLOSING = 2; });
 
+export const defaultStoreState: Record<string, unknown> = {
+
+	// なんかtestがうまいこと動かないのでここに書く
+	dataSaver: {
+		media: false,
+		avatar: false,
+		urlPreview: false,
+		code: false,
+	},
+
+};
+
 // XXX: defaultStore somehow becomes undefined in vitest?
 vi.mock('@/store.js', () => {
 	return {
 		defaultStore: {
-			state: {
-
-				// なんかtestがうまいこと動かないのでここに書く
-				dataSaver: {
-					media: false,
-					avatar: false,
-					urlPreview: false,
-					code: false,
-				},
-
-			},
+			state: defaultStoreState,
 		},
 	};
 });
-- 
cgit v1.2.3-freya


From 5251cd3aade295a533ee685e69b1dea35db97908 Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 8 Jan 2024 08:13:36 +0900
Subject: (refactor)
 api呼び出し関数のレスポンス型を必要に応じてオーバーライドできるように
 (#12936)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/scripts/misskey-api.ts | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

(limited to 'packages/frontend/src/scripts')

diff --git a/packages/frontend/src/scripts/misskey-api.ts b/packages/frontend/src/scripts/misskey-api.ts
index e71c5dd592..337fa15113 100644
--- a/packages/frontend/src/scripts/misskey-api.ts
+++ b/packages/frontend/src/scripts/misskey-api.ts
@@ -10,12 +10,17 @@ import { $i } from '@/account.js';
 export const pendingApiRequestsCount = ref(0);
 
 // Implements Misskey.api.ApiClient.request
-export function misskeyApi<E extends keyof Misskey.Endpoints, P extends Misskey.Endpoints[E]['req']>(
+export function misskeyApi<
+	ResT = void,
+	E extends keyof Misskey.Endpoints = keyof Misskey.Endpoints,
+	P extends Misskey.Endpoints[E]['req'] = Misskey.Endpoints[E]['req'],
+	_ResT = ResT extends void ? Misskey.api.SwitchCaseResponseType<E, P> : ResT,
+>(
 	endpoint: E,
 	data: P = {} as any,
 	token?: string | null | undefined,
 	signal?: AbortSignal,
-): Promise<Misskey.api.SwitchCaseResponseType<E, P>> {
+): Promise<_ResT> {
 	if (endpoint.includes('://')) throw new Error('invalid endpoint');
 	pendingApiRequestsCount.value++;
 
@@ -23,7 +28,7 @@ export function misskeyApi<E extends keyof Misskey.Endpoints, P extends Misskey.
 		pendingApiRequestsCount.value--;
 	};
 
-	const promise = new Promise<Misskey.Endpoints[E]['res'] | void>((resolve, reject) => {
+	const promise = new Promise<_ResT>((resolve, reject) => {
 		// Append a credential
 		if ($i) (data as any).i = $i.token;
 		if (token !== undefined) (data as any).i = token;
@@ -44,7 +49,7 @@ export function misskeyApi<E extends keyof Misskey.Endpoints, P extends Misskey.
 			if (res.status === 200) {
 				resolve(body);
 			} else if (res.status === 204) {
-				resolve();
+				resolve(undefined as _ResT); // void -> undefined
 			} else {
 				reject(body.error);
 			}
@@ -57,10 +62,15 @@ export function misskeyApi<E extends keyof Misskey.Endpoints, P extends Misskey.
 }
 
 // Implements Misskey.api.ApiClient.request
-export function misskeyApiGet<E extends keyof Misskey.Endpoints, P extends Misskey.Endpoints[E]['req']>(
+export function misskeyApiGet<
+	ResT = void,
+	E extends keyof Misskey.Endpoints = keyof Misskey.Endpoints,
+	P extends Misskey.Endpoints[E]['req'] = Misskey.Endpoints[E]['req'],
+	_ResT = ResT extends void ? Misskey.api.SwitchCaseResponseType<E, P> : ResT,
+>(
 	endpoint: E,
 	data: P = {} as any,
-): Promise<Misskey.api.SwitchCaseResponseType<E, P>> {
+): Promise<_ResT> {
 	pendingApiRequestsCount.value++;
 
 	const onFinally = () => {
@@ -69,7 +79,7 @@ export function misskeyApiGet<E extends keyof Misskey.Endpoints, P extends Missk
 
 	const query = new URLSearchParams(data as any);
 
-	const promise = new Promise<Misskey.Endpoints[E]['res'] | void>((resolve, reject) => {
+	const promise = new Promise<_ResT>((resolve, reject) => {
 		// Send request
 		window.fetch(`${apiUrl}/${endpoint}?${query}`, {
 			method: 'GET',
@@ -81,7 +91,7 @@ export function misskeyApiGet<E extends keyof Misskey.Endpoints, P extends Missk
 			if (res.status === 200) {
 				resolve(body);
 			} else if (res.status === 204) {
-				resolve();
+				resolve(undefined as _ResT); // void -> undefined
 			} else {
 				reject(body.error);
 			}
-- 
cgit v1.2.3-freya


From 6a02dfdd3b677f09c36506003db98b4638c3e84e Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 8 Jan 2024 11:02:05 +0900
Subject: enhance(frontend): バブルゲームの諸々を修正・改良 (#12938)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* enhance(frontend): バブルゲームのテクスチャをゲーム開始時にキャッシュするように

* (fix) カーソルが枠線内を動くように

* (add) 最大コンボ数を表示するように

* (add) 実績を追加

* Update ja-JP.yml

* tweak

* tweak flavor

* perf tweak

* refactor

* perf tweak

* lint

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 locales/index.d.ts                                |   9 +
 locales/ja-JP.yml                                 |   7 +
 packages/backend/src/core/AchievementService.ts   |   2 +
 packages/frontend/src/index.html                  |   2 +-
 packages/frontend/src/pages/drop-and-fusion.vue   | 216 ++++++++++++++++------
 packages/frontend/src/scripts/achievements.ts     |  12 ++
 packages/misskey-js/src/autogen/apiClientJSDoc.ts |   2 +-
 packages/misskey-js/src/autogen/endpoint.ts       |   2 +-
 packages/misskey-js/src/autogen/entities.ts       |   2 +-
 packages/misskey-js/src/autogen/models.ts         |   2 +-
 packages/misskey-js/src/autogen/types.ts          |   4 +-
 11 files changed, 199 insertions(+), 61 deletions(-)

(limited to 'packages/frontend/src/scripts')

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 8dfb81790e..7c73caaac9 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1657,6 +1657,15 @@ export interface Locale {
                 "title": string;
                 "description": string;
             };
+            "_bubbleGameExplodingHead": {
+                "title": string;
+                "description": string;
+            };
+            "_bubbleGameDoubleExplodingHead": {
+                "title": string;
+                "description": string;
+                "flavor": string;
+            };
         };
     };
     "_role": {
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index d92c5f9a14..55ff3201f0 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1568,6 +1568,13 @@ _achievements:
     _tutorialCompleted:
       title: "Misskey初心者講座 修了証"
       description: "チュートリアルを完了した"
+    _bubbleGameExplodingHead:
+      title: "🤯"
+      description: "バブルゲームで最も大きいモノを出した"
+    _bubbleGameDoubleExplodingHead:
+      title: "ダブル🤯"
+      description: "バブルゲームで最も大きいモノを2つ同時に出した"
+      flavor: "これくらいの　おべんとばこに　🤯　🤯　ちょっとつめて"
 
 _role:
   new: "ロールの作成"
diff --git a/packages/backend/src/core/AchievementService.ts b/packages/backend/src/core/AchievementService.ts
index 88fc033859..a28b68ee86 100644
--- a/packages/backend/src/core/AchievementService.ts
+++ b/packages/backend/src/core/AchievementService.ts
@@ -87,6 +87,8 @@ export const ACHIEVEMENT_TYPES = [
 	'brainDiver',
 	'smashTestNotificationButton',
 	'tutorialCompleted',
+	'bubbleGameExplodingHead',
+	'bubbleGameDoubleExplodingHead',
 ] as const;
 
 @Injectable()
diff --git a/packages/frontend/src/index.html b/packages/frontend/src/index.html
index 13f800c72f..11555ea18a 100644
--- a/packages/frontend/src/index.html
+++ b/packages/frontend/src/index.html
@@ -20,7 +20,7 @@
 			worker-src 'self';
 			script-src 'self' 'unsafe-eval' https://*.hcaptcha.com https://challenges.cloudflare.com;
 			style-src 'self' 'unsafe-inline';
-			img-src 'self' data: www.google.com xn--931a.moe localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000;
+			img-src 'self' data: blob: www.google.com xn--931a.moe localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000;
 			media-src 'self' localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000;
 			connect-src 'self' localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000 https://newassets.hcaptcha.com;"
 	/>
diff --git a/packages/frontend/src/pages/drop-and-fusion.vue b/packages/frontend/src/pages/drop-and-fusion.vue
index 4b5c3930ba..482ee7e004 100644
--- a/packages/frontend/src/pages/drop-and-fusion.vue
+++ b/packages/frontend/src/pages/drop-and-fusion.vue
@@ -46,13 +46,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 							:moveClass="$style.transition_stock_move"
 						>
 							<div v-for="x in stock" :key="x.id" style="display: inline-block;">
-								<img :src="x.mono.img" style="width: 32px;"/>
+								<img :src="game.getTextureImageUrl(x.mono)" style="width: 32px;"/>
 							</div>
 						</TransitionGroup>
 					</div>
 				</div>
 			</div>
-			<div :class="$style.main">
+			<div :class="$style.main" @contextmenu.stop.prevent>
 				<div ref="containerEl" :class="[$style.container, { [$style.gameOver]: gameOver }]" @click.stop.prevent="onClick" @touchmove.stop.prevent="onTouchmove" @touchend="onTouchend" @mousemove="onMousemove">
 					<img v-if="defaultStore.state.darkMode" src="/client-assets/drop-and-fusion/frame-dark.svg" :class="$style.mainFrameImg"/>
 					<img v-else src="/client-assets/drop-and-fusion/frame-light.svg" :class="$style.mainFrameImg"/>
@@ -66,7 +66,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					>
 						<div v-show="combo > 1" :class="$style.combo" :style="{ fontSize: `${100 + ((comboPrev - 2) * 15)}%` }">{{ comboPrev }} Chain!</div>
 					</Transition>
-					<img v-if="currentPick" src="/client-assets/drop-and-fusion/dropper.png" :class="$style.dropper" :style="{ left: mouseX + 'px' }"/>
+					<img v-if="currentPick" src="/client-assets/drop-and-fusion/dropper.png" :class="$style.dropper" :style="{ left: dropperX + 'px' }"/>
 					<Transition
 						:enterActiveClass="$style.transition_picked_enterActive"
 						:leaveActiveClass="$style.transition_picked_leaveActive"
@@ -75,16 +75,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 						:moveClass="$style.transition_picked_move"
 						mode="out-in"
 					>
-						<img v-if="currentPick" :key="currentPick.id" :src="currentPick?.mono.img" :class="$style.currentMono" :style="{ top: -(currentPick?.mono.size / 2) + 'px', left: (mouseX - (currentPick?.mono.size / 2)) + 'px', width: `${currentPick?.mono.size}px` }"/>
+						<img v-if="currentPick" :key="currentPick.id" :src="game.getTextureImageUrl(currentPick.mono)" :class="$style.currentMono" :style="{ top: -(currentPick?.mono.size / 2) + 'px', left: (dropperX - (currentPick?.mono.size / 2)) + 'px', width: `${currentPick?.mono.size}px` }"/>
 					</Transition>
-					<template v-if="dropReady">
-						<img src="/client-assets/drop-and-fusion/drop-arrow.svg" :class="$style.currentMonoArrow" :style="{ top: (currentPick?.mono.size / 2) + 10 + 'px', left: (mouseX - 10) + 'px', width: `20px` }"/>
-						<div :class="$style.dropGuide" :style="{ left: (mouseX - 2) + 'px' }"/>
+					<template v-if="dropReady && currentPick">
+						<img src="/client-assets/drop-and-fusion/drop-arrow.svg" :class="$style.currentMonoArrow" :style="{ top: (currentPick.mono.size / 2) + 10 + 'px', left: (dropperX - 10) + 'px', width: `20px` }"/>
+						<div :class="$style.dropGuide" :style="{ left: (dropperX - 2) + 'px' }"/>
 					</template>
 					<div v-if="gameOver" :class="$style.gameOverLabel">
 						<div class="_gaps_s">
 							<img src="/client-assets/drop-and-fusion/gameover.png" style="width: 200px; max-width: 100%; display: block; margin: auto; margin-bottom: -5px;"/>
 							<div>SCORE: <MkNumber :value="score"/></div>
+							<div>MAX CHAIN: <MkNumber :value="maxCombo"/></div>
 							<div class="_buttonsCenter">
 								<MkButton primary rounded @click="restart">Restart</MkButton>
 								<MkButton primary rounded @click="share">Share</MkButton>
@@ -96,7 +97,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div style="display: flex;">
 				<div :class="$style.frame" style="flex: 1; margin-right: 10px;">
 					<div :class="$style.frameInner">
-						<div>SCORE: <b><MkNumber :value="score"/></b></div>
+						<div>SCORE: <b><MkNumber :value="score"/></b> (MAX CHAIN: <b><MkNumber :value="maxCombo"/></b>)</div>
 						<div>HIGH SCORE: <b v-if="highScore"><MkNumber :value="highScore"/></b><b v-else>-</b></div>
 					</div>
 				</div>
@@ -117,7 +118,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import * as Matter from 'matter-js';
-import { onMounted, ref, shallowRef } from 'vue';
+import { onDeactivated, ref, shallowRef } from 'vue';
 import { EventEmitter } from 'eventemitter3';
 import * as Misskey from 'misskey-js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -127,6 +128,7 @@ import * as os from '@/os.js';
 import MkNumber from '@/components/MkNumber.vue';
 import MkPlusOneEffect from '@/components/MkPlusOneEffect.vue';
 import MkButton from '@/components/MkButton.vue';
+import { claimAchievement } from '@/scripts/achievements.js';
 import { defaultStore } from '@/store.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
@@ -150,7 +152,7 @@ type Mono = {
 
 const containerEl = shallowRef<HTMLElement>();
 const canvasEl = shallowRef<HTMLCanvasElement>();
-const mouseX = ref(0);
+const dropperX = ref(0);
 
 const NORMAL_BASE_SIZE = 30;
 const NORAML_MONOS: Mono[] = [{
@@ -389,6 +391,7 @@ const stock = shallowRef<{ id: string; mono: Mono }[]>([]);
 const score = ref(0);
 const combo = ref(0);
 const comboPrev = ref(0);
+const maxCombo = ref(0);
 const dropReady = ref(true);
 const gameMode = ref<'normal' | 'square'>('normal');
 const gameOver = ref(false);
@@ -396,17 +399,19 @@ const gameStarted = ref(false);
 const highScore = ref<number | null>(null);
 
 class Game extends EventEmitter<{
-	changeScore: (score: number) => void;
-	changeCombo: (combo: number) => void;
-	changeStock: (stock: { id: string; mono: Mono }[]) => void;
+	changeScore: (newScore: number) => void;
+	changeCombo: (newCombo: number) => void;
+	changeStock: (newStock: { id: string; mono: Mono }[]) => void;
 	dropped: () => void;
-	fusioned: (x: number, y: number, score: number) => void;
+	fusioned: (x: number, y: number, scoreDelta: number) => void;
+	monoAdded: (mono: Mono) => void;
 	gameOver: () => void;
 }> {
 	private COMBO_INTERVAL = 1000;
 	public readonly DROP_INTERVAL = 500;
-	private PLAYAREA_MARGIN = 25;
+	public readonly PLAYAREA_MARGIN = 25;
 	private STOCK_MAX = 4;
+	private loaded = false;
 	private engine: Matter.Engine;
 	private render: Matter.Render;
 	private runner: Matter.Runner;
@@ -414,6 +419,8 @@ class Game extends EventEmitter<{
 	private isGameOver = false;
 
 	private monoDefinitions: Mono[] = [];
+	private monoTextures: Record<string, Blob> = {};
+	private monoTextureUrls: Record<string, string> = {};
 
 	/**
 	 * フィールドに出ていて、かつ合体の対象となるアイテム
@@ -587,6 +594,7 @@ class Game extends EventEmitter<{
 			const pan = ((newX / GAME_WIDTH) - 0.5) * 2;
 			sound.playRaw('syuilo/bubble2', 1, pan, nextMono.sfxPitch);
 
+			this.emit('monoAdded', nextMono);
 			this.emit('fusioned', newX, newY, additionalScore);
 		} else {
 			//const VELOCITY = 30;
@@ -608,7 +616,40 @@ class Game extends EventEmitter<{
 		this.emit('gameOver');
 	}
 
+	/** テクスチャをすべてキャッシュする */
+	private async loadMonoTextures() {
+		async function loadSingleMonoTexture(mono: Mono, game: Game) {
+			// Matter-js内にキャッシュがある場合はスキップ
+			if (game.render.textures[mono.img]) return;
+			console.log('loading', mono.img);
+
+			let src = mono.img;
+			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+			if (game.monoTextureUrls[mono.img]) {
+				src = game.monoTextureUrls[mono.img];
+			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+			} else if (game.monoTextures[mono.img]) {
+				src = URL.createObjectURL(game.monoTextures[mono.img]);
+				game.monoTextureUrls[mono.img] = src;
+			} else {
+				const res = await fetch(mono.img);
+				const blob = await res.blob();
+				game.monoTextures[mono.img] = blob;
+				src = URL.createObjectURL(blob);
+				game.monoTextureUrls[mono.img] = src;
+			}
+
+			const image = new Image();
+			image.src = src;
+			game.render.textures[mono.img] = image;
+		}
+
+		return Promise.all(this.monoDefinitions.map(x => loadSingleMonoTexture(x, this)));
+	}
+
 	public start() {
+		if (!this.loaded) throw new Error('game is not loaded yet');
+
 		for (let i = 0; i < this.STOCK_MAX; i++) {
 			this.stock.push({
 				id: Math.random().toString(),
@@ -665,6 +706,31 @@ class Game extends EventEmitter<{
 		}, 500);
 	}
 
+	public async load() {
+		await this.loadMonoTextures();
+		this.loaded = true;
+	}
+
+	public getTextureImageUrl(mono: Mono) {
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+		if (this.monoTextureUrls[mono.img]) {
+			return this.monoTextureUrls[mono.img];
+
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+		} else if (this.monoTextures[mono.img]) {
+			// Gameクラス内にキャッシュがある場合はそれを使う
+			const out = URL.createObjectURL(this.monoTextures[mono.img]);
+			this.monoTextureUrls[mono.img] = out;
+			return out;
+		} else {
+			return mono.img;
+		}
+	}
+
+	public getActiveMonos() {
+		return this.engine.world.bodies.map(x => this.monoDefinitions.find((mono) => mono.id === x.label)!).filter(x => x !== undefined);
+	}
+
 	public drop(_x: number) {
 		if (this.isGameOver) return;
 		if (Date.now() - this.latestDroppedAt < this.DROP_INTERVAL) {
@@ -684,6 +750,7 @@ class Game extends EventEmitter<{
 		this.latestDroppedBodyId = body.id;
 		this.latestDroppedAt = Date.now();
 		this.emit('dropped');
+		this.emit('monoAdded', st.mono);
 		const pan = ((x / GAME_WIDTH) - 0.5) * 2;
 		sound.playRaw('syuilo/poi2', 1, pan);
 	}
@@ -698,29 +765,34 @@ class Game extends EventEmitter<{
 }
 
 let game: Game;
+let containerElRect: DOMRect | null = null;
 
 function onClick(ev: MouseEvent) {
-	const rect = containerEl.value!.getBoundingClientRect();
-
-	const x = (ev.clientX - rect.left) / viewScaleX;
-
+	if (!containerElRect) return;
+	const x = (ev.clientX - containerElRect.left) / viewScaleX;
 	game.drop(x);
 }
 
 function onTouchend(ev: TouchEvent) {
-	const rect = containerEl.value!.getBoundingClientRect();
-
-	const x = (ev.changedTouches[0].clientX - rect.left) / viewScaleX;
-
+	if (!containerElRect) return;
+	const x = (ev.changedTouches[0].clientX - containerElRect.left) / viewScaleX;
 	game.drop(x);
 }
 
 function onMousemove(ev: MouseEvent) {
-	mouseX.value = ev.clientX - containerEl.value!.getBoundingClientRect().left;
+	if (!containerElRect) return;
+	const x = (ev.clientX - containerElRect.left);
+	moveDropper(containerElRect, x);
 }
 
 function onTouchmove(ev: TouchEvent) {
-	mouseX.value = ev.touches[0].clientX - containerEl.value!.getBoundingClientRect().left;
+	if (!containerElRect) return;
+	const x = (ev.touches[0].clientX - containerElRect.left);
+	moveDropper(containerElRect, x);
+}
+
+function moveDropper(rect: DOMRect, x: number) {
+	dropperX.value = Math.min(rect.width * ((GAME_WIDTH - game.PLAYAREA_MARGIN) / GAME_WIDTH), Math.max(rect.width * (game.PLAYAREA_MARGIN / GAME_WIDTH), x));
 }
 
 function restart() {
@@ -735,7 +807,7 @@ function restart() {
 	gameStarted.value = false;
 }
 
-function attachGame() {
+function attachGameEvents() {
 	game.addListener('changeScore', value => {
 		score.value = value;
 	});
@@ -746,6 +818,7 @@ function attachGame() {
 		} else {
 			comboPrev.value = value;
 		}
+		maxCombo.value = Math.max(maxCombo.value, value);
 		combo.value = value;
 	});
 
@@ -763,12 +836,26 @@ function attachGame() {
 		}, game.DROP_INTERVAL);
 	});
 
-	game.addListener('fusioned', (x, y, score) => {
+	game.addListener('fusioned', (x, y, scoreDelta) => {
+		if (!canvasEl.value) return;
+
 		const rect = canvasEl.value.getBoundingClientRect();
 		const domX = rect.left + (x * viewScaleX);
 		const domY = rect.top + (y * viewScaleY);
 		os.popup(MkRippleEffect, { x: domX, y: domY }, {}, 'end');
-		os.popup(MkPlusOneEffect, { x: domX, y: domY, value: score }, {}, 'end');
+		os.popup(MkPlusOneEffect, { x: domX, y: domY, value: scoreDelta }, {}, 'end');
+	});
+
+	game.addListener('monoAdded', (mono) => {
+		// 実績関連
+		if (mono.level === 10) {
+			claimAchievement('bubbleGameExplodingHead');
+
+			const monos = game.getActiveMonos();
+			if (monos.filter(x => x.level === 10).length >= 2) {
+				claimAchievement('bubbleGameDoubleExplodingHead');
+			}
+		}
 	});
 
 	game.addListener('gameOver', () => {
@@ -795,42 +882,61 @@ async function start() {
 			key: 'highScore:' + gameMode.value,
 		});
 	} catch (err) {
+		highScore.value = null;
 	}
 
-	gameStarted.value = true;
 	game = new Game(gameMode.value === 'normal' ? {
 		monoDefinitions: NORAML_MONOS,
 	} : {
 		monoDefinitions: SQUARE_MONOS,
 	});
-	attachGame();
-	game.start();
+	attachGameEvents();
+	os.promiseDialog(game.load(), () => {
+		game.start();
+		gameStarted.value = true;
+	});
 }
 
 function getGameImageDriveFile() {
 	return new Promise<Misskey.entities.DriveFile | null>(res => {
-		canvasEl.value?.toBlob(blob => {
-			if (!blob) return res(null);
-			if ($i == null) return res(null);
-			const formData = new FormData();
-			formData.append('file', blob);
-			formData.append('name', `bubble-game-${Date.now()}.png`);
-			formData.append('isSensitive', 'false');
-			formData.append('comment', 'null');
-			formData.append('i', $i.token);
-			if (defaultStore.state.uploadFolder) {
-				formData.append('folderId', defaultStore.state.uploadFolder);
-			}
+		const dcanvas = document.createElement('canvas');
+		dcanvas.width = GAME_WIDTH;
+		dcanvas.height = GAME_HEIGHT;
+		const ctx = dcanvas.getContext('2d');
+		if (!ctx || !canvasEl.value) return res(null);
+		const dimage = new Image();
+		dimage.src = '/client-assets/drop-and-fusion/frame-light.svg';
+		dimage.addEventListener('load', () => {
+			ctx.fillStyle = '#fff';
+			ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
+			ctx.drawImage(dimage, 0, 0, GAME_WIDTH, GAME_HEIGHT);
+			ctx.drawImage(canvasEl.value!, 0, 0, GAME_WIDTH, GAME_HEIGHT);
+
+			dcanvas.toBlob(blob => {
+				if (!blob) return res(null);
+				if ($i == null) return res(null);
+				const formData = new FormData();
+				formData.append('file', blob);
+				formData.append('name', `bubble-game-${Date.now()}.png`);
+				formData.append('isSensitive', 'false');
+				formData.append('comment', 'null');
+				formData.append('i', $i.token);
+				if (defaultStore.state.uploadFolder) {
+					formData.append('folderId', defaultStore.state.uploadFolder);
+				}
 
-			window.fetch(apiUrl + '/drive/files/create', {
-				method: 'POST',
-				body: formData,
-			})
-				.then(response => response.json())
-				.then(f => {
-					res(f);
-				});
-		}, 'image/png');
+				window.fetch(apiUrl + '/drive/files/create', {
+					method: 'POST',
+					body: formData,
+				})
+					.then(response => response.json())
+					.then(f => {
+						res(f);
+					});
+			}, 'image/png');
+
+			dcanvas.remove();
+		});
 	});
 }
 
@@ -842,7 +948,7 @@ async function share() {
 	os.post({
 		initialText: `#BubbleGame
 MODE: ${gameMode.value}
-SCORE: ${score.value}`,
+SCORE: ${score.value} (MAX CHAIN: ${maxCombo.value})})`,
 		initialFiles: [file],
 	});
 }
@@ -853,9 +959,11 @@ useInterval(() => {
 	const actualCanvasHeight = canvasEl.value.getBoundingClientRect().height;
 	viewScaleX = actualCanvasWidth / GAME_WIDTH;
 	viewScaleY = actualCanvasHeight / GAME_HEIGHT;
+	containerElRect = containerEl.value?.getBoundingClientRect() ?? null;
 }, 1000, { immediate: false, afterMounted: true });
 
-onMounted(async () => {
+onDeactivated(() => {
+	game.dispose();
 });
 
 definePageMetadata({
diff --git a/packages/frontend/src/scripts/achievements.ts b/packages/frontend/src/scripts/achievements.ts
index 4b6b044d8b..67d997f09b 100644
--- a/packages/frontend/src/scripts/achievements.ts
+++ b/packages/frontend/src/scripts/achievements.ts
@@ -83,6 +83,8 @@ export const ACHIEVEMENT_TYPES = [
 	'brainDiver',
 	'smashTestNotificationButton',
 	'tutorialCompleted',
+	'bubbleGameExplodingHead',
+	'bubbleGameDoubleExplodingHead',
 ] as const;
 
 export const ACHIEVEMENT_BADGES = {
@@ -466,6 +468,16 @@ export const ACHIEVEMENT_BADGES = {
 		bg: 'linear-gradient(0deg, rgb(220 223 225), rgb(172 192 207))',
 		frame: 'bronze',
 	},
+	'bubbleGameExplodingHead': {
+		img: '/fluent-emoji/1f92f.png',
+		bg: 'linear-gradient(0deg, rgb(255 77 77), rgb(247 155 214))',
+		frame: 'bronze',
+	},
+	'bubbleGameDoubleExplodingHead': {
+		img: '/fluent-emoji/1f92f.png',
+		bg: 'linear-gradient(0deg, rgb(255 77 77), rgb(247 155 214))',
+		frame: 'silver',
+	},
 /* @see <https://github.com/misskey-dev/misskey/pull/10365#discussion_r1155511107>
 } as const satisfies Record<typeof ACHIEVEMENT_TYPES[number], {
 	img: string;
diff --git a/packages/misskey-js/src/autogen/apiClientJSDoc.ts b/packages/misskey-js/src/autogen/apiClientJSDoc.ts
index a26ab6b59e..9d0343c1e8 100644
--- a/packages/misskey-js/src/autogen/apiClientJSDoc.ts
+++ b/packages/misskey-js/src/autogen/apiClientJSDoc.ts
@@ -1,6 +1,6 @@
 /*
  * version: 2023.12.2
- * generatedAt: 2024-01-07T09:49:34.543Z
+ * generatedAt: 2024-01-07T15:22:15.630Z
  */
 
 import type { SwitchCaseResponseType } from '../api.js';
diff --git a/packages/misskey-js/src/autogen/endpoint.ts b/packages/misskey-js/src/autogen/endpoint.ts
index 8128c1275d..cc4d251f4d 100644
--- a/packages/misskey-js/src/autogen/endpoint.ts
+++ b/packages/misskey-js/src/autogen/endpoint.ts
@@ -1,6 +1,6 @@
 /*
  * version: 2023.12.2
- * generatedAt: 2024-01-07T09:49:34.533Z
+ * generatedAt: 2024-01-07T15:22:15.626Z
  */
 
 import type {
diff --git a/packages/misskey-js/src/autogen/entities.ts b/packages/misskey-js/src/autogen/entities.ts
index 064490cf50..1f3f55b2fd 100644
--- a/packages/misskey-js/src/autogen/entities.ts
+++ b/packages/misskey-js/src/autogen/entities.ts
@@ -1,6 +1,6 @@
 /*
  * version: 2023.12.2
- * generatedAt: 2024-01-07T09:49:34.526Z
+ * generatedAt: 2024-01-07T15:22:15.624Z
  */
 
 import { operations } from './types.js';
diff --git a/packages/misskey-js/src/autogen/models.ts b/packages/misskey-js/src/autogen/models.ts
index 7b224a1482..90e2bf660b 100644
--- a/packages/misskey-js/src/autogen/models.ts
+++ b/packages/misskey-js/src/autogen/models.ts
@@ -1,6 +1,6 @@
 /*
  * version: 2023.12.2
- * generatedAt: 2024-01-07T09:49:34.518Z
+ * generatedAt: 2024-01-07T15:22:15.623Z
  */
 
 import { components } from './types.js';
diff --git a/packages/misskey-js/src/autogen/types.ts b/packages/misskey-js/src/autogen/types.ts
index 4999857378..b2c34abf7b 100644
--- a/packages/misskey-js/src/autogen/types.ts
+++ b/packages/misskey-js/src/autogen/types.ts
@@ -3,7 +3,7 @@
 
 /*
  * version: 2023.12.2
- * generatedAt: 2024-01-07T09:49:34.268Z
+ * generatedAt: 2024-01-07T15:22:15.494Z
  */
 
 /**
@@ -15891,7 +15891,7 @@ export type operations = {
       content: {
         'application/json': {
           /** @enum {string} */
-          name: 'notes1' | 'notes10' | 'notes100' | 'notes500' | 'notes1000' | 'notes5000' | 'notes10000' | 'notes20000' | 'notes30000' | 'notes40000' | 'notes50000' | 'notes60000' | 'notes70000' | 'notes80000' | 'notes90000' | 'notes100000' | 'login3' | 'login7' | 'login15' | 'login30' | 'login60' | 'login100' | 'login200' | 'login300' | 'login400' | 'login500' | 'login600' | 'login700' | 'login800' | 'login900' | 'login1000' | 'passedSinceAccountCreated1' | 'passedSinceAccountCreated2' | 'passedSinceAccountCreated3' | 'loggedInOnBirthday' | 'loggedInOnNewYearsDay' | 'noteClipped1' | 'noteFavorited1' | 'myNoteFavorited1' | 'profileFilled' | 'markedAsCat' | 'following1' | 'following10' | 'following50' | 'following100' | 'following300' | 'followers1' | 'followers10' | 'followers50' | 'followers100' | 'followers300' | 'followers500' | 'followers1000' | 'collectAchievements30' | 'viewAchievements3min' | 'iLoveMisskey' | 'foundTreasure' | 'client30min' | 'client60min' | 'noteDeletedWithin1min' | 'postedAtLateNight' | 'postedAt0min0sec' | 'selfQuote' | 'htl20npm' | 'viewInstanceChart' | 'outputHelloWorldOnScratchpad' | 'open3windows' | 'driveFolderCircularReference' | 'reactWithoutRead' | 'clickedClickHere' | 'justPlainLucky' | 'setNameToSyuilo' | 'cookieClicked' | 'brainDiver' | 'smashTestNotificationButton' | 'tutorialCompleted';
+          name: 'notes1' | 'notes10' | 'notes100' | 'notes500' | 'notes1000' | 'notes5000' | 'notes10000' | 'notes20000' | 'notes30000' | 'notes40000' | 'notes50000' | 'notes60000' | 'notes70000' | 'notes80000' | 'notes90000' | 'notes100000' | 'login3' | 'login7' | 'login15' | 'login30' | 'login60' | 'login100' | 'login200' | 'login300' | 'login400' | 'login500' | 'login600' | 'login700' | 'login800' | 'login900' | 'login1000' | 'passedSinceAccountCreated1' | 'passedSinceAccountCreated2' | 'passedSinceAccountCreated3' | 'loggedInOnBirthday' | 'loggedInOnNewYearsDay' | 'noteClipped1' | 'noteFavorited1' | 'myNoteFavorited1' | 'profileFilled' | 'markedAsCat' | 'following1' | 'following10' | 'following50' | 'following100' | 'following300' | 'followers1' | 'followers10' | 'followers50' | 'followers100' | 'followers300' | 'followers500' | 'followers1000' | 'collectAchievements30' | 'viewAchievements3min' | 'iLoveMisskey' | 'foundTreasure' | 'client30min' | 'client60min' | 'noteDeletedWithin1min' | 'postedAtLateNight' | 'postedAt0min0sec' | 'selfQuote' | 'htl20npm' | 'viewInstanceChart' | 'outputHelloWorldOnScratchpad' | 'open3windows' | 'driveFolderCircularReference' | 'reactWithoutRead' | 'clickedClickHere' | 'justPlainLucky' | 'setNameToSyuilo' | 'cookieClicked' | 'brainDiver' | 'smashTestNotificationButton' | 'tutorialCompleted' | 'bubbleGameExplodingHead' | 'bubbleGameDoubleExplodingHead';
         };
       };
     };
-- 
cgit v1.2.3-freya


From 145d28a8e4923f1c33adf0aebd931f473cbf54fd Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 8 Jan 2024 11:13:20 +0900
Subject: refactor(frontend): extract game engine from vue component

---
 packages/frontend/src/pages/drop-and-fusion.vue    | 401 +--------------------
 .../frontend/src/scripts/drop-and-fusion-engine.ts | 396 ++++++++++++++++++++
 2 files changed, 409 insertions(+), 388 deletions(-)
 create mode 100644 packages/frontend/src/scripts/drop-and-fusion-engine.ts

(limited to 'packages/frontend/src/scripts')

diff --git a/packages/frontend/src/pages/drop-and-fusion.vue b/packages/frontend/src/pages/drop-and-fusion.vue
index 482ee7e004..1daf9ddc62 100644
--- a/packages/frontend/src/pages/drop-and-fusion.vue
+++ b/packages/frontend/src/pages/drop-and-fusion.vue
@@ -117,12 +117,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import * as Matter from 'matter-js';
 import { onDeactivated, ref, shallowRef } from 'vue';
-import { EventEmitter } from 'eventemitter3';
 import * as Misskey from 'misskey-js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
-import * as sound from '@/scripts/sound.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import * as os from '@/os.js';
 import MkNumber from '@/components/MkNumber.vue';
@@ -136,19 +133,7 @@ import { useInterval } from '@/scripts/use-interval.js';
 import MkSelect from '@/components/MkSelect.vue';
 import { apiUrl } from '@/config.js';
 import { $i } from '@/account.js';
-
-type Mono = {
-	id: string;
-	level: number;
-	size: number;
-	shape: 'circle' | 'rectangle';
-	score: number;
-	dropCandidate: boolean;
-	sfxPitch: number;
-	img: string;
-	imgSize: number;
-	spriteScale: number;
-};
+import { DropAndFusionGame, Mono } from '@/scripts/drop-and-fusion-engine.js';
 
 const containerEl = shallowRef<HTMLElement>();
 const canvasEl = shallowRef<HTMLCanvasElement>();
@@ -382,7 +367,6 @@ const SQUARE_MONOS: Mono[] = [{
 
 const GAME_WIDTH = 450;
 const GAME_HEIGHT = 600;
-const PHYSICS_QUALITY_FACTOR = 16; // 低いほどパフォーマンスが高いがガタガタして安定しなくなる、逆に高すぎても何故か不安定になる
 
 let viewScaleX = 1;
 let viewScaleY = 1;
@@ -398,373 +382,7 @@ const gameOver = ref(false);
 const gameStarted = ref(false);
 const highScore = ref<number | null>(null);
 
-class Game extends EventEmitter<{
-	changeScore: (newScore: number) => void;
-	changeCombo: (newCombo: number) => void;
-	changeStock: (newStock: { id: string; mono: Mono }[]) => void;
-	dropped: () => void;
-	fusioned: (x: number, y: number, scoreDelta: number) => void;
-	monoAdded: (mono: Mono) => void;
-	gameOver: () => void;
-}> {
-	private COMBO_INTERVAL = 1000;
-	public readonly DROP_INTERVAL = 500;
-	public readonly PLAYAREA_MARGIN = 25;
-	private STOCK_MAX = 4;
-	private loaded = false;
-	private engine: Matter.Engine;
-	private render: Matter.Render;
-	private runner: Matter.Runner;
-	private overflowCollider: Matter.Body;
-	private isGameOver = false;
-
-	private monoDefinitions: Mono[] = [];
-	private monoTextures: Record<string, Blob> = {};
-	private monoTextureUrls: Record<string, string> = {};
-
-	/**
-	 * フィールドに出ていて、かつ合体の対象となるアイテム
-	 */
-	private activeBodyIds: Matter.Body['id'][] = [];
-
-	private latestDroppedBodyId: Matter.Body['id'] | null = null;
-
-	private latestDroppedAt = 0;
-	private latestFusionedAt = 0;
-	private stock: { id: string; mono: Mono }[] = [];
-
-	private _combo = 0;
-	private get combo() {
-		return this._combo;
-	}
-	private set combo(value: number) {
-		this._combo = value;
-		this.emit('changeCombo', value);
-	}
-
-	private _score = 0;
-	private get score() {
-		return this._score;
-	}
-	private set score(value: number) {
-		this._score = value;
-		this.emit('changeScore', value);
-	}
-
-	private comboIntervalId: number | null = null;
-
-	constructor(opts: {
-		monoDefinitions: Mono[];
-	}) {
-		super();
-
-		this.monoDefinitions = opts.monoDefinitions;
-
-		this.engine = Matter.Engine.create({
-			constraintIterations: 2 * PHYSICS_QUALITY_FACTOR,
-			positionIterations: 6 * PHYSICS_QUALITY_FACTOR,
-			velocityIterations: 4 * PHYSICS_QUALITY_FACTOR,
-			gravity: {
-				x: 0,
-				y: 1,
-			},
-			timing: {
-				timeScale: 2,
-			},
-			enableSleeping: false,
-		});
-
-		this.render = Matter.Render.create({
-			engine: this.engine,
-			canvas: canvasEl.value,
-			options: {
-				width: GAME_WIDTH,
-				height: GAME_HEIGHT,
-				background: 'transparent', // transparent to hide
-				wireframeBackground: 'transparent', // transparent to hide
-				wireframes: false,
-				showSleeping: false,
-				pixelRatio: Math.max(2, window.devicePixelRatio),
-			},
-		});
-
-		Matter.Render.run(this.render);
-
-		this.runner = Matter.Runner.create();
-		Matter.Runner.run(this.runner, this.engine);
-
-		this.engine.world.bodies = [];
-
-		//#region walls
-		const WALL_OPTIONS: Matter.IChamferableBodyDefinition = {
-			isStatic: true,
-			friction: 0.7,
-			slop: 1.0,
-			render: {
-				strokeStyle: 'transparent',
-				fillStyle: 'transparent',
-			},
-		};
-
-		const thickness = 100;
-		Matter.Composite.add(this.engine.world, [
-			Matter.Bodies.rectangle(GAME_WIDTH / 2, GAME_HEIGHT + (thickness / 2) - this.PLAYAREA_MARGIN, GAME_WIDTH, thickness, WALL_OPTIONS),
-			Matter.Bodies.rectangle(GAME_WIDTH + (thickness / 2) - this.PLAYAREA_MARGIN, GAME_HEIGHT / 2, thickness, GAME_HEIGHT, WALL_OPTIONS),
-			Matter.Bodies.rectangle(-((thickness / 2) - this.PLAYAREA_MARGIN), GAME_HEIGHT / 2, thickness, GAME_HEIGHT, WALL_OPTIONS),
-		]);
-		//#endregion
-
-		this.overflowCollider = Matter.Bodies.rectangle(GAME_WIDTH / 2, 0, GAME_WIDTH, 200, {
-			isStatic: true,
-			isSensor: true,
-			render: {
-				strokeStyle: 'transparent',
-				fillStyle: 'transparent',
-			},
-		});
-		Matter.Composite.add(this.engine.world, this.overflowCollider);
-
-		// fit the render viewport to the scene
-		Matter.Render.lookAt(this.render, {
-			min: { x: 0, y: 0 },
-			max: { x: GAME_WIDTH, y: GAME_HEIGHT },
-		});
-	}
-
-	private createBody(mono: Mono, x: number, y: number) {
-		const options: Matter.IBodyDefinition = {
-			label: mono.id,
-			//density: 0.0005,
-			density: mono.size / 1000,
-			restitution: 0.2,
-			frictionAir: 0.01,
-			friction: 0.7,
-			frictionStatic: 5,
-			slop: 1.0,
-			//mass: 0,
-			render: {
-				sprite: {
-					texture: mono.img,
-					xScale: (mono.size / mono.imgSize) * mono.spriteScale,
-					yScale: (mono.size / mono.imgSize) * mono.spriteScale,
-				},
-			},
-		};
-		if (mono.shape === 'circle') {
-			return Matter.Bodies.circle(x, y, mono.size / 2, options);
-		} else if (mono.shape === 'rectangle') {
-			return Matter.Bodies.rectangle(x, y, mono.size, mono.size, options);
-		} else {
-			throw new Error('unrecognized shape');
-		}
-	}
-
-	private fusion(bodyA: Matter.Body, bodyB: Matter.Body) {
-		const now = Date.now();
-		if (this.latestFusionedAt > now - this.COMBO_INTERVAL) {
-			this.combo++;
-		} else {
-			this.combo = 1;
-		}
-		this.latestFusionedAt = now;
-
-		// TODO: 単に位置だけでなくそれぞれの動きベクトルも融合する
-		const newX = (bodyA.position.x + bodyB.position.x) / 2;
-		const newY = (bodyA.position.y + bodyB.position.y) / 2;
-
-		Matter.Composite.remove(this.engine.world, [bodyA, bodyB]);
-		this.activeBodyIds = this.activeBodyIds.filter(x => x !== bodyA.id && x !== bodyB.id);
-
-		const currentMono = this.monoDefinitions.find(y => y.id === bodyA.label)!;
-		const nextMono = this.monoDefinitions.find(x => x.level === currentMono.level + 1);
-
-		if (nextMono) {
-			const body = this.createBody(nextMono, newX, newY);
-			Matter.Composite.add(this.engine.world, body);
-
-			// 連鎖してfusionした場合の分かりやすさのため少し間を置いてからfusion対象になるようにする
-			window.setTimeout(() => {
-				this.activeBodyIds.push(body.id);
-			}, 100);
-
-			const comboBonus = 1 + ((this.combo - 1) / 5);
-			const additionalScore = Math.round(currentMono.score * comboBonus);
-			this.score += additionalScore;
-
-			const pan = ((newX / GAME_WIDTH) - 0.5) * 2;
-			sound.playRaw('syuilo/bubble2', 1, pan, nextMono.sfxPitch);
-
-			this.emit('monoAdded', nextMono);
-			this.emit('fusioned', newX, newY, additionalScore);
-		} else {
-			//const VELOCITY = 30;
-			//for (let i = 0; i < 10; i++) {
-			//	const body = createBody(FRUITS.find(x => x.level === (1 + Math.floor(Math.random() * 3)))!, x + ((Math.random() * VELOCITY) - (VELOCITY / 2)), y + ((Math.random() * VELOCITY) - (VELOCITY / 2)));
-			//	Matter.Composite.add(world, body);
-			//	bodies.push(body);
-			//}
-			//sound.playRaw({
-			//	type: 'syuilo/bubble2',
-			//	volume: 1,
-			//});
-		}
-	}
-
-	private gameOver() {
-		this.isGameOver = true;
-		Matter.Runner.stop(this.runner);
-		this.emit('gameOver');
-	}
-
-	/** テクスチャをすべてキャッシュする */
-	private async loadMonoTextures() {
-		async function loadSingleMonoTexture(mono: Mono, game: Game) {
-			// Matter-js内にキャッシュがある場合はスキップ
-			if (game.render.textures[mono.img]) return;
-			console.log('loading', mono.img);
-
-			let src = mono.img;
-			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-			if (game.monoTextureUrls[mono.img]) {
-				src = game.monoTextureUrls[mono.img];
-			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-			} else if (game.monoTextures[mono.img]) {
-				src = URL.createObjectURL(game.monoTextures[mono.img]);
-				game.monoTextureUrls[mono.img] = src;
-			} else {
-				const res = await fetch(mono.img);
-				const blob = await res.blob();
-				game.monoTextures[mono.img] = blob;
-				src = URL.createObjectURL(blob);
-				game.monoTextureUrls[mono.img] = src;
-			}
-
-			const image = new Image();
-			image.src = src;
-			game.render.textures[mono.img] = image;
-		}
-
-		return Promise.all(this.monoDefinitions.map(x => loadSingleMonoTexture(x, this)));
-	}
-
-	public start() {
-		if (!this.loaded) throw new Error('game is not loaded yet');
-
-		for (let i = 0; i < this.STOCK_MAX; i++) {
-			this.stock.push({
-				id: Math.random().toString(),
-				mono: this.monoDefinitions.filter(x => x.dropCandidate)[Math.floor(Math.random() * this.monoDefinitions.filter(x => x.dropCandidate).length)],
-			});
-		}
-		this.emit('changeStock', this.stock);
-
-		// TODO: fusion予約状態のアイテムは光らせるなどの演出をすると楽しそう
-		let fusionReservedPairs: { bodyA: Matter.Body; bodyB: Matter.Body }[] = [];
-
-		const minCollisionEnergyForSound = 2.5;
-		const maxCollisionEnergyForSound = 9;
-		const soundPitchMax = 4;
-		const soundPitchMin = 0.5;
-
-		Matter.Events.on(this.engine, 'collisionStart', (event) => {
-			for (const pairs of event.pairs) {
-				const { bodyA, bodyB } = pairs;
-				if (bodyA.id === this.overflowCollider.id || bodyB.id === this.overflowCollider.id) {
-					if (bodyA.id === this.latestDroppedBodyId || bodyB.id === this.latestDroppedBodyId) {
-						continue;
-					}
-					this.gameOver();
-					break;
-				}
-				const shouldFusion = (bodyA.label === bodyB.label) && !fusionReservedPairs.some(x => x.bodyA.id === bodyA.id || x.bodyA.id === bodyB.id || x.bodyB.id === bodyA.id || x.bodyB.id === bodyB.id);
-				if (shouldFusion) {
-					if (this.activeBodyIds.includes(bodyA.id) && this.activeBodyIds.includes(bodyB.id)) {
-						this.fusion(bodyA, bodyB);
-					} else {
-						fusionReservedPairs.push({ bodyA, bodyB });
-						window.setTimeout(() => {
-							fusionReservedPairs = fusionReservedPairs.filter(x => x.bodyA.id !== bodyA.id && x.bodyB.id !== bodyB.id);
-							this.fusion(bodyA, bodyB);
-						}, 100);
-					}
-				} else {
-					const energy = pairs.collision.depth;
-					if (energy > minCollisionEnergyForSound) {
-						const vol = (Math.min(maxCollisionEnergyForSound, energy - minCollisionEnergyForSound) / maxCollisionEnergyForSound) / 4;
-						const pan = ((((bodyA.position.x + bodyB.position.x) / 2) / GAME_WIDTH) - 0.5) * 2;
-						const pitch = soundPitchMin + ((soundPitchMax - soundPitchMin) * (1 - (Math.min(10, energy) / 10)));
-						sound.playRaw('syuilo/poi1', vol, pan, pitch);
-					}
-				}
-			}
-		});
-
-		this.comboIntervalId = window.setInterval(() => {
-			if (this.latestFusionedAt < Date.now() - this.COMBO_INTERVAL) {
-				this.combo = 0;
-			}
-		}, 500);
-	}
-
-	public async load() {
-		await this.loadMonoTextures();
-		this.loaded = true;
-	}
-
-	public getTextureImageUrl(mono: Mono) {
-		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-		if (this.monoTextureUrls[mono.img]) {
-			return this.monoTextureUrls[mono.img];
-
-		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-		} else if (this.monoTextures[mono.img]) {
-			// Gameクラス内にキャッシュがある場合はそれを使う
-			const out = URL.createObjectURL(this.monoTextures[mono.img]);
-			this.monoTextureUrls[mono.img] = out;
-			return out;
-		} else {
-			return mono.img;
-		}
-	}
-
-	public getActiveMonos() {
-		return this.engine.world.bodies.map(x => this.monoDefinitions.find((mono) => mono.id === x.label)!).filter(x => x !== undefined);
-	}
-
-	public drop(_x: number) {
-		if (this.isGameOver) return;
-		if (Date.now() - this.latestDroppedAt < this.DROP_INTERVAL) {
-			return;
-		}
-		const st = this.stock.shift()!;
-		this.stock.push({
-			id: Math.random().toString(),
-			mono: this.monoDefinitions.filter(x => x.dropCandidate)[Math.floor(Math.random() * this.monoDefinitions.filter(x => x.dropCandidate).length)],
-		});
-		this.emit('changeStock', this.stock);
-
-		const x = Math.min(GAME_WIDTH - this.PLAYAREA_MARGIN - (st.mono.size / 2), Math.max(this.PLAYAREA_MARGIN + (st.mono.size / 2), _x));
-		const body = this.createBody(st.mono, x, 50 + st.mono.size / 2);
-		Matter.Composite.add(this.engine.world, body);
-		this.activeBodyIds.push(body.id);
-		this.latestDroppedBodyId = body.id;
-		this.latestDroppedAt = Date.now();
-		this.emit('dropped');
-		this.emit('monoAdded', st.mono);
-		const pan = ((x / GAME_WIDTH) - 0.5) * 2;
-		sound.playRaw('syuilo/poi2', 1, pan);
-	}
-
-	public dispose() {
-		if (this.comboIntervalId) window.clearInterval(this.comboIntervalId);
-		Matter.Render.stop(this.render);
-		Matter.Runner.stop(this.runner);
-		Matter.World.clear(this.engine.world, false);
-		Matter.Engine.clear(this.engine);
-	}
-}
-
-let game: Game;
+let game: DropAndFusionGame;
 let containerElRect: DOMRect | null = null;
 
 function onClick(ev: MouseEvent) {
@@ -885,10 +503,17 @@ async function start() {
 		highScore.value = null;
 	}
 
-	game = new Game(gameMode.value === 'normal' ? {
-		monoDefinitions: NORAML_MONOS,
-	} : {
-		monoDefinitions: SQUARE_MONOS,
+	game = new DropAndFusionGame({
+		width: GAME_WIDTH,
+		height: GAME_HEIGHT,
+		canvas: canvasEl.value!,
+		...(
+			gameMode.value === 'normal' ? {
+				monoDefinitions: NORAML_MONOS,
+			} : {
+				monoDefinitions: SQUARE_MONOS,
+			}
+		),
 	});
 	attachGameEvents();
 	os.promiseDialog(game.load(), () => {
diff --git a/packages/frontend/src/scripts/drop-and-fusion-engine.ts b/packages/frontend/src/scripts/drop-and-fusion-engine.ts
new file mode 100644
index 0000000000..7241525a38
--- /dev/null
+++ b/packages/frontend/src/scripts/drop-and-fusion-engine.ts
@@ -0,0 +1,396 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { EventEmitter } from 'eventemitter3';
+import * as Matter from 'matter-js';
+import * as sound from '@/scripts/sound.js';
+
+export type Mono = {
+	id: string;
+	level: number;
+	size: number;
+	shape: 'circle' | 'rectangle';
+	score: number;
+	dropCandidate: boolean;
+	sfxPitch: number;
+	img: string;
+	imgSize: number;
+	spriteScale: number;
+};
+
+const PHYSICS_QUALITY_FACTOR = 16; // 低いほどパフォーマンスが高いがガタガタして安定しなくなる、逆に高すぎても何故か不安定になる
+
+export class DropAndFusionGame extends EventEmitter<{
+	changeScore: (newScore: number) => void;
+	changeCombo: (newCombo: number) => void;
+	changeStock: (newStock: { id: string; mono: Mono }[]) => void;
+	dropped: () => void;
+	fusioned: (x: number, y: number, scoreDelta: number) => void;
+	monoAdded: (mono: Mono) => void;
+	gameOver: () => void;
+}> {
+	private COMBO_INTERVAL = 1000;
+	public readonly DROP_INTERVAL = 500;
+	public readonly PLAYAREA_MARGIN = 25;
+	private STOCK_MAX = 4;
+	private loaded = false;
+	private engine: Matter.Engine;
+	private render: Matter.Render;
+	private runner: Matter.Runner;
+	private overflowCollider: Matter.Body;
+	private isGameOver = false;
+
+	private gameWidth: number;
+	private gameHeight: number;
+	private monoDefinitions: Mono[] = [];
+	private monoTextures: Record<string, Blob> = {};
+	private monoTextureUrls: Record<string, string> = {};
+
+	/**
+	 * フィールドに出ていて、かつ合体の対象となるアイテム
+	 */
+	private activeBodyIds: Matter.Body['id'][] = [];
+
+	private latestDroppedBodyId: Matter.Body['id'] | null = null;
+
+	private latestDroppedAt = 0;
+	private latestFusionedAt = 0;
+	private stock: { id: string; mono: Mono }[] = [];
+
+	private _combo = 0;
+	private get combo() {
+		return this._combo;
+	}
+	private set combo(value: number) {
+		this._combo = value;
+		this.emit('changeCombo', value);
+	}
+
+	private _score = 0;
+	private get score() {
+		return this._score;
+	}
+	private set score(value: number) {
+		this._score = value;
+		this.emit('changeScore', value);
+	}
+
+	private comboIntervalId: number | null = null;
+
+	constructor(opts: {
+		canvas: HTMLCanvasElement;
+		width: number;
+		height: number;
+		monoDefinitions: Mono[];
+	}) {
+		super();
+
+		this.gameWidth = opts.width;
+		this.gameHeight = opts.height;
+		this.monoDefinitions = opts.monoDefinitions;
+
+		this.engine = Matter.Engine.create({
+			constraintIterations: 2 * PHYSICS_QUALITY_FACTOR,
+			positionIterations: 6 * PHYSICS_QUALITY_FACTOR,
+			velocityIterations: 4 * PHYSICS_QUALITY_FACTOR,
+			gravity: {
+				x: 0,
+				y: 1,
+			},
+			timing: {
+				timeScale: 2,
+			},
+			enableSleeping: false,
+		});
+
+		this.render = Matter.Render.create({
+			engine: this.engine,
+			canvas: opts.canvas,
+			options: {
+				width: this.gameWidth,
+				height: this.gameHeight,
+				background: 'transparent', // transparent to hide
+				wireframeBackground: 'transparent', // transparent to hide
+				wireframes: false,
+				showSleeping: false,
+				pixelRatio: Math.max(2, window.devicePixelRatio),
+			},
+		});
+
+		Matter.Render.run(this.render);
+
+		this.runner = Matter.Runner.create();
+		Matter.Runner.run(this.runner, this.engine);
+
+		this.engine.world.bodies = [];
+
+		//#region walls
+		const WALL_OPTIONS: Matter.IChamferableBodyDefinition = {
+			isStatic: true,
+			friction: 0.7,
+			slop: 1.0,
+			render: {
+				strokeStyle: 'transparent',
+				fillStyle: 'transparent',
+			},
+		};
+
+		const thickness = 100;
+		Matter.Composite.add(this.engine.world, [
+			Matter.Bodies.rectangle(this.gameWidth / 2, this.gameHeight + (thickness / 2) - this.PLAYAREA_MARGIN, this.gameWidth, thickness, WALL_OPTIONS),
+			Matter.Bodies.rectangle(this.gameWidth + (thickness / 2) - this.PLAYAREA_MARGIN, this.gameHeight / 2, thickness, this.gameHeight, WALL_OPTIONS),
+			Matter.Bodies.rectangle(-((thickness / 2) - this.PLAYAREA_MARGIN), this.gameHeight / 2, thickness, this.gameHeight, WALL_OPTIONS),
+		]);
+		//#endregion
+
+		this.overflowCollider = Matter.Bodies.rectangle(this.gameWidth / 2, 0, this.gameWidth, 200, {
+			isStatic: true,
+			isSensor: true,
+			render: {
+				strokeStyle: 'transparent',
+				fillStyle: 'transparent',
+			},
+		});
+		Matter.Composite.add(this.engine.world, this.overflowCollider);
+
+		// fit the render viewport to the scene
+		Matter.Render.lookAt(this.render, {
+			min: { x: 0, y: 0 },
+			max: { x: this.gameWidth, y: this.gameHeight },
+		});
+	}
+
+	private createBody(mono: Mono, x: number, y: number) {
+		const options: Matter.IBodyDefinition = {
+			label: mono.id,
+			//density: 0.0005,
+			density: mono.size / 1000,
+			restitution: 0.2,
+			frictionAir: 0.01,
+			friction: 0.7,
+			frictionStatic: 5,
+			slop: 1.0,
+			//mass: 0,
+			render: {
+				sprite: {
+					texture: mono.img,
+					xScale: (mono.size / mono.imgSize) * mono.spriteScale,
+					yScale: (mono.size / mono.imgSize) * mono.spriteScale,
+				},
+			},
+		};
+		if (mono.shape === 'circle') {
+			return Matter.Bodies.circle(x, y, mono.size / 2, options);
+		} else if (mono.shape === 'rectangle') {
+			return Matter.Bodies.rectangle(x, y, mono.size, mono.size, options);
+		} else {
+			throw new Error('unrecognized shape');
+		}
+	}
+
+	private fusion(bodyA: Matter.Body, bodyB: Matter.Body) {
+		const now = Date.now();
+		if (this.latestFusionedAt > now - this.COMBO_INTERVAL) {
+			this.combo++;
+		} else {
+			this.combo = 1;
+		}
+		this.latestFusionedAt = now;
+
+		// TODO: 単に位置だけでなくそれぞれの動きベクトルも融合する
+		const newX = (bodyA.position.x + bodyB.position.x) / 2;
+		const newY = (bodyA.position.y + bodyB.position.y) / 2;
+
+		Matter.Composite.remove(this.engine.world, [bodyA, bodyB]);
+		this.activeBodyIds = this.activeBodyIds.filter(x => x !== bodyA.id && x !== bodyB.id);
+
+		const currentMono = this.monoDefinitions.find(y => y.id === bodyA.label)!;
+		const nextMono = this.monoDefinitions.find(x => x.level === currentMono.level + 1);
+
+		if (nextMono) {
+			const body = this.createBody(nextMono, newX, newY);
+			Matter.Composite.add(this.engine.world, body);
+
+			// 連鎖してfusionした場合の分かりやすさのため少し間を置いてからfusion対象になるようにする
+			window.setTimeout(() => {
+				this.activeBodyIds.push(body.id);
+			}, 100);
+
+			const comboBonus = 1 + ((this.combo - 1) / 5);
+			const additionalScore = Math.round(currentMono.score * comboBonus);
+			this.score += additionalScore;
+
+			const pan = ((newX / this.gameWidth) - 0.5) * 2;
+			sound.playRaw('syuilo/bubble2', 1, pan, nextMono.sfxPitch);
+
+			this.emit('monoAdded', nextMono);
+			this.emit('fusioned', newX, newY, additionalScore);
+		} else {
+			//const VELOCITY = 30;
+			//for (let i = 0; i < 10; i++) {
+			//	const body = createBody(FRUITS.find(x => x.level === (1 + Math.floor(Math.random() * 3)))!, x + ((Math.random() * VELOCITY) - (VELOCITY / 2)), y + ((Math.random() * VELOCITY) - (VELOCITY / 2)));
+			//	Matter.Composite.add(world, body);
+			//	bodies.push(body);
+			//}
+			//sound.playRaw({
+			//	type: 'syuilo/bubble2',
+			//	volume: 1,
+			//});
+		}
+	}
+
+	private gameOver() {
+		this.isGameOver = true;
+		Matter.Runner.stop(this.runner);
+		this.emit('gameOver');
+	}
+
+	/** テクスチャをすべてキャッシュする */
+	private async loadMonoTextures() {
+		async function loadSingleMonoTexture(mono: Mono, game: DropAndFusionGame) {
+			// Matter-js内にキャッシュがある場合はスキップ
+			if (game.render.textures[mono.img]) return;
+			console.log('loading', mono.img);
+
+			let src = mono.img;
+			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+			if (game.monoTextureUrls[mono.img]) {
+				src = game.monoTextureUrls[mono.img];
+			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+			} else if (game.monoTextures[mono.img]) {
+				src = URL.createObjectURL(game.monoTextures[mono.img]);
+				game.monoTextureUrls[mono.img] = src;
+			} else {
+				const res = await fetch(mono.img);
+				const blob = await res.blob();
+				game.monoTextures[mono.img] = blob;
+				src = URL.createObjectURL(blob);
+				game.monoTextureUrls[mono.img] = src;
+			}
+
+			const image = new Image();
+			image.src = src;
+			game.render.textures[mono.img] = image;
+		}
+
+		return Promise.all(this.monoDefinitions.map(x => loadSingleMonoTexture(x, this)));
+	}
+
+	public start() {
+		if (!this.loaded) throw new Error('game is not loaded yet');
+
+		for (let i = 0; i < this.STOCK_MAX; i++) {
+			this.stock.push({
+				id: Math.random().toString(),
+				mono: this.monoDefinitions.filter(x => x.dropCandidate)[Math.floor(Math.random() * this.monoDefinitions.filter(x => x.dropCandidate).length)],
+			});
+		}
+		this.emit('changeStock', this.stock);
+
+		// TODO: fusion予約状態のアイテムは光らせるなどの演出をすると楽しそう
+		let fusionReservedPairs: { bodyA: Matter.Body; bodyB: Matter.Body }[] = [];
+
+		const minCollisionEnergyForSound = 2.5;
+		const maxCollisionEnergyForSound = 9;
+		const soundPitchMax = 4;
+		const soundPitchMin = 0.5;
+
+		Matter.Events.on(this.engine, 'collisionStart', (event) => {
+			for (const pairs of event.pairs) {
+				const { bodyA, bodyB } = pairs;
+				if (bodyA.id === this.overflowCollider.id || bodyB.id === this.overflowCollider.id) {
+					if (bodyA.id === this.latestDroppedBodyId || bodyB.id === this.latestDroppedBodyId) {
+						continue;
+					}
+					this.gameOver();
+					break;
+				}
+				const shouldFusion = (bodyA.label === bodyB.label) && !fusionReservedPairs.some(x => x.bodyA.id === bodyA.id || x.bodyA.id === bodyB.id || x.bodyB.id === bodyA.id || x.bodyB.id === bodyB.id);
+				if (shouldFusion) {
+					if (this.activeBodyIds.includes(bodyA.id) && this.activeBodyIds.includes(bodyB.id)) {
+						this.fusion(bodyA, bodyB);
+					} else {
+						fusionReservedPairs.push({ bodyA, bodyB });
+						window.setTimeout(() => {
+							fusionReservedPairs = fusionReservedPairs.filter(x => x.bodyA.id !== bodyA.id && x.bodyB.id !== bodyB.id);
+							this.fusion(bodyA, bodyB);
+						}, 100);
+					}
+				} else {
+					const energy = pairs.collision.depth;
+					if (energy > minCollisionEnergyForSound) {
+						const vol = (Math.min(maxCollisionEnergyForSound, energy - minCollisionEnergyForSound) / maxCollisionEnergyForSound) / 4;
+						const pan = ((((bodyA.position.x + bodyB.position.x) / 2) / this.gameWidth) - 0.5) * 2;
+						const pitch = soundPitchMin + ((soundPitchMax - soundPitchMin) * (1 - (Math.min(10, energy) / 10)));
+						sound.playRaw('syuilo/poi1', vol, pan, pitch);
+					}
+				}
+			}
+		});
+
+		this.comboIntervalId = window.setInterval(() => {
+			if (this.latestFusionedAt < Date.now() - this.COMBO_INTERVAL) {
+				this.combo = 0;
+			}
+		}, 500);
+	}
+
+	public async load() {
+		await this.loadMonoTextures();
+		this.loaded = true;
+	}
+
+	public getTextureImageUrl(mono: Mono) {
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+		if (this.monoTextureUrls[mono.img]) {
+			return this.monoTextureUrls[mono.img];
+
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+		} else if (this.monoTextures[mono.img]) {
+			// Gameクラス内にキャッシュがある場合はそれを使う
+			const out = URL.createObjectURL(this.monoTextures[mono.img]);
+			this.monoTextureUrls[mono.img] = out;
+			return out;
+		} else {
+			return mono.img;
+		}
+	}
+
+	public getActiveMonos() {
+		return this.engine.world.bodies.map(x => this.monoDefinitions.find((mono) => mono.id === x.label)!).filter(x => x !== undefined);
+	}
+
+	public drop(_x: number) {
+		if (this.isGameOver) return;
+		if (Date.now() - this.latestDroppedAt < this.DROP_INTERVAL) {
+			return;
+		}
+		const st = this.stock.shift()!;
+		this.stock.push({
+			id: Math.random().toString(),
+			mono: this.monoDefinitions.filter(x => x.dropCandidate)[Math.floor(Math.random() * this.monoDefinitions.filter(x => x.dropCandidate).length)],
+		});
+		this.emit('changeStock', this.stock);
+
+		const x = Math.min(this.gameWidth - this.PLAYAREA_MARGIN - (st.mono.size / 2), Math.max(this.PLAYAREA_MARGIN + (st.mono.size / 2), _x));
+		const body = this.createBody(st.mono, x, 50 + st.mono.size / 2);
+		Matter.Composite.add(this.engine.world, body);
+		this.activeBodyIds.push(body.id);
+		this.latestDroppedBodyId = body.id;
+		this.latestDroppedAt = Date.now();
+		this.emit('dropped');
+		this.emit('monoAdded', st.mono);
+		const pan = ((x / this.gameWidth) - 0.5) * 2;
+		sound.playRaw('syuilo/poi2', 1, pan);
+	}
+
+	public dispose() {
+		if (this.comboIntervalId) window.clearInterval(this.comboIntervalId);
+		Matter.Render.stop(this.render);
+		Matter.Runner.stop(this.runner);
+		Matter.World.clear(this.engine.world, false);
+		Matter.Engine.clear(this.engine);
+	}
+}
-- 
cgit v1.2.3-freya


From e9c3fe12281b97e0d69e106be6de78f04c7b7a4e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 8 Jan 2024 12:46:20 +0900
Subject: enhance(frontend): add game bgm and refactor sound system

---
 packages/frontend/assets/drop-and-fusion/bgm_1.mp3 | Bin 0 -> 1637271 bytes
 .../frontend/assets/drop-and-fusion/bubble2.mp3    | Bin 0 -> 19328 bytes
 packages/frontend/assets/drop-and-fusion/poi1.mp3  | Bin 0 -> 18240 bytes
 packages/frontend/assets/drop-and-fusion/poi2.mp3  | Bin 0 -> 18240 bytes
 packages/frontend/src/pages/drop-and-fusion.vue    |  41 ++++++++++-
 .../frontend/src/scripts/drop-and-fusion-engine.ts |  14 ++--
 packages/frontend/src/scripts/sound.ts             |  75 +++++++--------------
 packages/frontend/src/widgets/WidgetJobQueue.vue   |   7 +-
 8 files changed, 74 insertions(+), 63 deletions(-)
 create mode 100644 packages/frontend/assets/drop-and-fusion/bgm_1.mp3
 create mode 100644 packages/frontend/assets/drop-and-fusion/bubble2.mp3
 create mode 100644 packages/frontend/assets/drop-and-fusion/poi1.mp3
 create mode 100644 packages/frontend/assets/drop-and-fusion/poi2.mp3

(limited to 'packages/frontend/src/scripts')

diff --git a/packages/frontend/assets/drop-and-fusion/bgm_1.mp3 b/packages/frontend/assets/drop-and-fusion/bgm_1.mp3
new file mode 100644
index 0000000000..cafc34ad9c
Binary files /dev/null and b/packages/frontend/assets/drop-and-fusion/bgm_1.mp3 differ
diff --git a/packages/frontend/assets/drop-and-fusion/bubble2.mp3 b/packages/frontend/assets/drop-and-fusion/bubble2.mp3
new file mode 100644
index 0000000000..8b4f8df6e9
Binary files /dev/null and b/packages/frontend/assets/drop-and-fusion/bubble2.mp3 differ
diff --git a/packages/frontend/assets/drop-and-fusion/poi1.mp3 b/packages/frontend/assets/drop-and-fusion/poi1.mp3
new file mode 100644
index 0000000000..59dae90965
Binary files /dev/null and b/packages/frontend/assets/drop-and-fusion/poi1.mp3 differ
diff --git a/packages/frontend/assets/drop-and-fusion/poi2.mp3 b/packages/frontend/assets/drop-and-fusion/poi2.mp3
new file mode 100644
index 0000000000..a65c653891
Binary files /dev/null and b/packages/frontend/assets/drop-and-fusion/poi2.mp3 differ
diff --git a/packages/frontend/src/pages/drop-and-fusion.vue b/packages/frontend/src/pages/drop-and-fusion.vue
index 1daf9ddc62..0ddee55f5f 100644
--- a/packages/frontend/src/pages/drop-and-fusion.vue
+++ b/packages/frontend/src/pages/drop-and-fusion.vue
@@ -103,9 +103,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 				<div :class="[$style.frame]" style="margin-left: auto;">
 					<div :class="$style.frameInner" style="text-align: center;">
+						<div @click="showConfig = !showConfig"><i class="ti ti-settings"></i></div>
 					</div>
 				</div>
 			</div>
+			<div v-if="showConfig" :class="$style.frame">
+				<div :class="$style.frameInner">
+					<MkRange v-model="bgmVolume" :min="0" :max="1" :step="0.0025" :textConverter="(v) => `${Math.floor(v * 100)}%`" :continuousUpdate="true">
+						<template #label>BGM {{ i18n.ts.volume }}</template>
+					</MkRange>
+				</div>
+			</div>
+			<div v-if="showConfig" :class="$style.frame">
+				<div :class="$style.frameInner">
+					<div>Credit</div>
+					<div>BGM: @ys@misskey.design</div>
+				</div>
+			</div>
 			<div :class="$style.frame">
 				<div :class="$style.frameInner">
 					<MkButton @click="restart">Restart</MkButton>
@@ -117,7 +131,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onDeactivated, ref, shallowRef } from 'vue';
+import { onDeactivated, ref, shallowRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
@@ -134,6 +148,8 @@ import MkSelect from '@/components/MkSelect.vue';
 import { apiUrl } from '@/config.js';
 import { $i } from '@/account.js';
 import { DropAndFusionGame, Mono } from '@/scripts/drop-and-fusion-engine.js';
+import * as sound from '@/scripts/sound.js';
+import MkRange from '@/components/MkRange.vue';
 
 const containerEl = shallowRef<HTMLElement>();
 const canvasEl = shallowRef<HTMLCanvasElement>();
@@ -381,6 +397,8 @@ const gameMode = ref<'normal' | 'square'>('normal');
 const gameOver = ref(false);
 const gameStarted = ref(false);
 const highScore = ref<number | null>(null);
+const showConfig = ref(false);
+const bgmVolume = ref(0.1);
 
 let game: DropAndFusionGame;
 let containerElRect: DOMRect | null = null;
@@ -493,6 +511,8 @@ function attachGameEvents() {
 	});
 }
 
+let bgmNodes: ReturnType<typeof sound.createSourceNode> = null;
+
 async function start() {
 	try {
 		highScore.value = await misskeyApi('i/registry/get', {
@@ -516,12 +536,29 @@ async function start() {
 		),
 	});
 	attachGameEvents();
-	os.promiseDialog(game.load(), () => {
+	os.promiseDialog(game.load(), async () => {
 		game.start();
 		gameStarted.value = true;
+
+		if (bgmNodes) {
+			bgmNodes.soundSource.stop();
+			bgmNodes = null;
+		}
+		const bgmBuffer = await sound.loadAudio('/client-assets/drop-and-fusion/bgm_1.mp3');
+		if (!bgmBuffer) return;
+		bgmNodes = sound.createSourceNode(bgmBuffer, bgmVolume.value);
+		if (!bgmNodes) return;
+		bgmNodes.soundSource.loop = true;
+		bgmNodes.soundSource.start();
 	});
 }
 
+watch(bgmVolume, (value) => {
+	if (bgmNodes) {
+		bgmNodes.gainNode.gain.value = value;
+	}
+});
+
 function getGameImageDriveFile() {
 	return new Promise<Misskey.entities.DriveFile | null>(res => {
 		const dcanvas = document.createElement('canvas');
diff --git a/packages/frontend/src/scripts/drop-and-fusion-engine.ts b/packages/frontend/src/scripts/drop-and-fusion-engine.ts
index 7241525a38..b6e735ddf2 100644
--- a/packages/frontend/src/scripts/drop-and-fusion-engine.ts
+++ b/packages/frontend/src/scripts/drop-and-fusion-engine.ts
@@ -199,7 +199,7 @@ export class DropAndFusionGame extends EventEmitter<{
 		}
 		this.latestFusionedAt = now;
 
-		// TODO: 単に位置だけでなくそれぞれの動きベクトルも融合する
+		// TODO: 単に位置だけでなくそれぞれの動きベクトルも融合する？
 		const newX = (bodyA.position.x + bodyB.position.x) / 2;
 		const newY = (bodyA.position.y + bodyB.position.y) / 2;
 
@@ -222,8 +222,9 @@ export class DropAndFusionGame extends EventEmitter<{
 			const additionalScore = Math.round(currentMono.score * comboBonus);
 			this.score += additionalScore;
 
+			// TODO: 効果音再生はコンポーネント側の責務なので移動する
 			const pan = ((newX / this.gameWidth) - 0.5) * 2;
-			sound.playRaw('syuilo/bubble2', 1, pan, nextMono.sfxPitch);
+			sound.playUrl('/client-assets/drop-and-fusion/bubble2.mp3', 1, pan, nextMono.sfxPitch);
 
 			this.emit('monoAdded', nextMono);
 			this.emit('fusioned', newX, newY, additionalScore);
@@ -234,7 +235,7 @@ export class DropAndFusionGame extends EventEmitter<{
 			//	Matter.Composite.add(world, body);
 			//	bodies.push(body);
 			//}
-			//sound.playRaw({
+			//sound.playUrl({
 			//	type: 'syuilo/bubble2',
 			//	volume: 1,
 			//});
@@ -321,10 +322,11 @@ export class DropAndFusionGame extends EventEmitter<{
 				} else {
 					const energy = pairs.collision.depth;
 					if (energy > minCollisionEnergyForSound) {
+						// TODO: 効果音再生はコンポーネント側の責務なので移動する
 						const vol = (Math.min(maxCollisionEnergyForSound, energy - minCollisionEnergyForSound) / maxCollisionEnergyForSound) / 4;
 						const pan = ((((bodyA.position.x + bodyB.position.x) / 2) / this.gameWidth) - 0.5) * 2;
 						const pitch = soundPitchMin + ((soundPitchMax - soundPitchMin) * (1 - (Math.min(10, energy) / 10)));
-						sound.playRaw('syuilo/poi1', vol, pan, pitch);
+						sound.playUrl('/client-assets/drop-and-fusion/poi1.mp3', vol, pan, pitch);
 					}
 				}
 			}
@@ -382,8 +384,10 @@ export class DropAndFusionGame extends EventEmitter<{
 		this.latestDroppedAt = Date.now();
 		this.emit('dropped');
 		this.emit('monoAdded', st.mono);
+
+		// TODO: 効果音再生はコンポーネント側の責務なので移動する
 		const pan = ((x / this.gameWidth) - 0.5) * 2;
-		sound.playRaw('syuilo/poi2', 1, pan);
+		sound.playUrl('/client-assets/drop-and-fusion/poi2.mp3', 1, pan);
 	}
 
 	public dispose() {
diff --git a/packages/frontend/src/scripts/sound.ts b/packages/frontend/src/scripts/sound.ts
index acde78f5fd..690c342c85 100644
--- a/packages/frontend/src/scripts/sound.ts
+++ b/packages/frontend/src/scripts/sound.ts
@@ -5,7 +5,6 @@
 
 import type { SoundStore } from '@/store.js';
 import { defaultStore } from '@/store.js';
-import { misskeyApi } from '@/scripts/misskey-api.js';
 
 let ctx: AudioContext;
 const cache = new Map<string, AudioBuffer>();
@@ -89,69 +88,35 @@ export type OperationType = typeof operationTypes[number];
 
 /**
  * 音声を読み込む
- * @param soundStore サウンド設定
+ * @param url url
  * @param options `useCache`: デフォルトは`true` 一度再生した音声はキャッシュする
  */
-export async function loadAudio(soundStore: {
-	type: Exclude<SoundType, '_driveFile_'>;
-} | {
-	type: '_driveFile_';
-	fileId: string;
-	fileUrl: string;
-}, options?: { useCache?: boolean; }) {
+export async function loadAudio(url: string, options?: { useCache?: boolean; }) {
 	if (_DEV_) console.log('loading audio. opts:', options);
 	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-	if (soundStore.type === null || (soundStore.type === '_driveFile_' && !soundStore.fileUrl)) {
-		return;
-	}
-	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 	if (ctx == null) {
 		ctx = new AudioContext();
 	}
 	if (options?.useCache ?? true) {
-		if (soundStore.type === '_driveFile_' && cache.has(soundStore.fileId)) {
-			if (_DEV_) console.log('use cache');
-			return cache.get(soundStore.fileId) as AudioBuffer;
-		} else if (cache.has(soundStore.type)) {
+		if (cache.has(url)) {
 			if (_DEV_) console.log('use cache');
-			return cache.get(soundStore.type) as AudioBuffer;
+			return cache.get(url) as AudioBuffer;
 		}
 	}
 
 	let response: Response;
 
-	if (soundStore.type === '_driveFile_') {
-		try {
-			response = await fetch(soundStore.fileUrl);
-		} catch (err) {
-			try {
-				// URLが変わっている可能性があるのでドライブ側からURLを取得するフォールバック
-				const apiRes = await misskeyApi('drive/files/show', {
-					fileId: soundStore.fileId,
-				});
-				response = await fetch(apiRes.url);
-			} catch (fbErr) {
-				// それでも無理なら諦める
-				return;
-			}
-		}
-	} else {
-		try {
-			response = await fetch(`/client-assets/sounds/${soundStore.type}.mp3`);
-		} catch (err) {
-			return;
-		}
+	try {
+		response = await fetch(url);
+	} catch (err) {
+		return;
 	}
 
 	const arrayBuffer = await response.arrayBuffer();
 	const audioBuffer = await ctx.decodeAudioData(arrayBuffer);
 
 	if (options?.useCache ?? true) {
-		if (soundStore.type === '_driveFile_') {
-			cache.set(soundStore.fileId, audioBuffer);
-		} else {
-			cache.set(soundStore.type, audioBuffer);
-		}
+		cache.set(url, audioBuffer);
 	}
 
 	return audioBuffer;
@@ -180,18 +145,26 @@ export function play(operationType: OperationType) {
  * @param soundStore サウンド設定
  */
 export async function playFile(soundStore: SoundStore) {
-	const buffer = await loadAudio(soundStore);
+	if (soundStore.type === null || (soundStore.type === '_driveFile_' && !soundStore.fileUrl)) {
+		return;
+	}
+	const url = soundStore.type === '_driveFile_' ? soundStore.fileUrl : `/client-assets/sounds/${soundStore.type}.mp3`;
+	const buffer = await loadAudio(url);
 	if (!buffer) return;
-	createSourceNode(buffer, soundStore.volume)?.start();
+	createSourceNode(buffer, soundStore.volume)?.soundSource.start();
 }
 
-export async function playRaw(type: Exclude<SoundType, '_driveFile_'>, volume = 1, pan = 0, playbackRate = 1) {
-	const buffer = await loadAudio({ type });
+export async function playUrl(url: string, volume = 1, pan = 0, playbackRate = 1) {
+	const buffer = await loadAudio(url);
 	if (!buffer) return;
-	createSourceNode(buffer, volume, pan, playbackRate)?.start();
+	createSourceNode(buffer, volume, pan, playbackRate)?.soundSource.start();
 }
 
-export function createSourceNode(buffer: AudioBuffer, volume: number, pan = 0, playbackRate = 1) : AudioBufferSourceNode | null {
+export function createSourceNode(buffer: AudioBuffer, volume: number, pan = 0, playbackRate = 1): {
+	soundSource: AudioBufferSourceNode;
+	panNode: StereoPannerNode;
+	gainNode: GainNode;
+} | null {
 	const masterVolume = defaultStore.state.sound_masterVolume;
 	if (isMute() || masterVolume === 0 || volume === 0) {
 		return null;
@@ -211,7 +184,7 @@ export function createSourceNode(buffer: AudioBuffer, volume: number, pan = 0, p
 		.connect(gainNode)
 		.connect(ctx.destination);
 
-	return soundSource;
+	return { soundSource, panNode, gainNode };
 }
 
 /**
diff --git a/packages/frontend/src/widgets/WidgetJobQueue.vue b/packages/frontend/src/widgets/WidgetJobQueue.vue
index 91983d8474..89ad3bf323 100644
--- a/packages/frontend/src/widgets/WidgetJobQueue.vue
+++ b/packages/frontend/src/widgets/WidgetJobQueue.vue
@@ -104,10 +104,7 @@ const jammedAudioBuffer = ref<AudioBuffer | null>(null);
 const jammedSoundNodePlaying = ref<boolean>(false);
 
 if (defaultStore.state.sound_masterVolume) {
-	sound.loadAudio({
-		type: 'syuilo/queue-jammed',
-		volume: 1,
-	}).then(buf => {
+	sound.loadAudio('/client-assets/sounds/syuilo/queue-jammed.mp3').then(buf => {
 		if (!buf) throw new Error('[WidgetJobQueue] Failed to initialize AudioBuffer');
 		jammedAudioBuffer.value = buf;
 	});
@@ -126,7 +123,7 @@ const onStats = (stats) => {
 		current[domain].delayed = stats[domain].delayed;
 
 		if (current[domain].waiting > 0 && widgetProps.sound && jammedAudioBuffer.value && !jammedSoundNodePlaying.value) {
-			const soundNode = sound.createSourceNode(jammedAudioBuffer.value, 1);
+			const soundNode = sound.createSourceNode(jammedAudioBuffer.value, 1)?.soundSource;
 			if (soundNode) {
 				jammedSoundNodePlaying.value = true;
 				soundNode.onended = () => jammedSoundNodePlaying.value = false;
-- 
cgit v1.2.3-freya


From 04f9147db6c0b3aff3347a62659f3dfb21fc3f94 Mon Sep 17 00:00:00 2001
From: おさむのひと <46447427+samunohito@users.noreply.github.com>
Date: Mon, 8 Jan 2024 14:44:43 +0900
Subject: refactor(frontend): router.ts解きほぐし  (#12907)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(frontend): router.ts解きほぐし

* add debug hmr option

* fix comment

* fix not working

* add comment

* fix name

* Update definition.ts

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 packages/frontend/package.json                     |   2 +-
 packages/frontend/src/boot/common.ts               |   3 +
 packages/frontend/src/boot/main-boot.ts            |  10 +-
 packages/frontend/src/components/MkDrive.file.vue  |   2 +-
 packages/frontend/src/components/MkPageWindow.vue  |  33 +-
 packages/frontend/src/components/global/MkA.vue    |   2 +-
 .../frontend/src/components/global/RouterView.vue  |   6 +-
 packages/frontend/src/global/router/definition.ts  | 571 +++++++++++++++++++++
 packages/frontend/src/global/router/main.ts        | 163 ++++++
 packages/frontend/src/global/router/supplier.ts    |  30 ++
 packages/frontend/src/nirax.ts                     | 126 ++++-
 packages/frontend/src/pages/admin/index.vue        |   2 +-
 packages/frontend/src/pages/admin/roles.edit.vue   |   2 +-
 packages/frontend/src/pages/admin/roles.role.vue   |   2 +-
 packages/frontend/src/pages/admin/roles.vue        |   2 +-
 packages/frontend/src/pages/antenna-timeline.vue   |   2 +-
 packages/frontend/src/pages/channel-editor.vue     |   2 +-
 packages/frontend/src/pages/channel.vue            |   2 +-
 packages/frontend/src/pages/channels.vue           |   2 +-
 packages/frontend/src/pages/drive.file.info.vue    |   2 +-
 packages/frontend/src/pages/flash/flash-edit.vue   |   2 +-
 packages/frontend/src/pages/flash/flash-index.vue  |   2 +-
 packages/frontend/src/pages/follow.vue             |   2 +-
 packages/frontend/src/pages/gallery/edit.vue       |   2 +-
 packages/frontend/src/pages/gallery/index.vue      |   2 +-
 packages/frontend/src/pages/gallery/post.vue       |   2 +-
 packages/frontend/src/pages/my-antennas/create.vue |   2 +-
 packages/frontend/src/pages/my-antennas/edit.vue   |   2 +-
 packages/frontend/src/pages/my-lists/list.vue      |   2 +-
 .../frontend/src/pages/page-editor/page-editor.vue |   2 +-
 packages/frontend/src/pages/pages.vue              |   2 +-
 packages/frontend/src/pages/reset-password.vue     |   2 +-
 packages/frontend/src/pages/search.note.vue        |   2 +-
 packages/frontend/src/pages/search.user.vue        |   2 +-
 packages/frontend/src/pages/settings/index.vue     |   2 +-
 .../frontend/src/pages/settings/webhook.edit.vue   |   2 +-
 packages/frontend/src/pages/user-list-timeline.vue |   2 +-
 packages/frontend/src/pages/user/home.vue          |   2 +-
 packages/frontend/src/router.ts                    | 561 --------------------
 packages/frontend/src/scripts/get-user-menu.ts     |   6 +-
 packages/frontend/src/scripts/lookup.ts            |   2 +-
 packages/frontend/src/ui/_common_/sw-inject.ts     |   2 +-
 packages/frontend/src/ui/classic.vue               |   2 +-
 packages/frontend/src/ui/deck.vue                  |   2 +-
 packages/frontend/src/ui/deck/main-column.vue      |   2 +-
 packages/frontend/src/ui/minimum.vue               |   2 +-
 packages/frontend/src/ui/universal.vue             |   2 +-
 packages/frontend/src/ui/visitor.vue               |   2 +-
 packages/frontend/src/ui/zen.vue                   |   2 +-
 49 files changed, 937 insertions(+), 650 deletions(-)
 create mode 100644 packages/frontend/src/global/router/definition.ts
 create mode 100644 packages/frontend/src/global/router/main.ts
 create mode 100644 packages/frontend/src/global/router/supplier.ts
 delete mode 100644 packages/frontend/src/router.ts

(limited to 'packages/frontend/src/scripts')

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 7e7559d825..9ef18a56a7 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -4,7 +4,7 @@
 	"type": "module",
 	"scripts": {
 		"watch": "vite",
-		"dev": "vite --config vite.config.local-dev.ts",
+		"dev": "vite --config vite.config.local-dev.ts --debug hmr",
 		"build": "vite build",
 		"storybook-dev": "nodemon --verbose --watch src --ext \"mdx,ts,vue\" --ignore \"*.stories.ts\" --exec \"pnpm build-storybook-pre && pnpm exec storybook dev -p 6006 --ci\"",
 		"build-storybook-pre": "(tsc -p .storybook || echo done.) && node .storybook/generate.js && node .storybook/preload-locale.js && node .storybook/preload-theme.js",
diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
index ef69eff764..c67911c9c3 100644
--- a/packages/frontend/src/boot/common.ts
+++ b/packages/frontend/src/boot/common.ts
@@ -22,6 +22,7 @@ import { getAccountFromId } from '@/scripts/get-account-from-id.js';
 import { deckStore } from '@/ui/deck/deck-store.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { fetchCustomEmojis } from '@/custom-emojis.js';
+import { setupRouter } from '@/global/router/definition.js';
 
 export async function common(createVue: () => App<Element>) {
 	console.info(`Misskey v${version}`);
@@ -241,6 +242,8 @@ export async function common(createVue: () => App<Element>) {
 
 	const app = createVue();
 
+	setupRouter(app);
+
 	if (_DEV_) {
 		app.config.performance = true;
 	}
diff --git a/packages/frontend/src/boot/main-boot.ts b/packages/frontend/src/boot/main-boot.ts
index 0159d0c032..5011ce9e74 100644
--- a/packages/frontend/src/boot/main-boot.ts
+++ b/packages/frontend/src/boot/main-boot.ts
@@ -3,23 +3,23 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { createApp, markRaw, defineAsyncComponent } from 'vue';
+import { createApp, defineAsyncComponent, markRaw } from 'vue';
 import { common } from './common.js';
 import { ui } from '@/config.js';
 import { i18n } from '@/i18n.js';
-import { confirm, alert, post, popup, toast } from '@/os.js';
+import { alert, confirm, popup, post, toast } from '@/os.js';
 import { useStream } from '@/stream.js';
 import * as sound from '@/scripts/sound.js';
-import { $i, updateAccount, signout } from '@/account.js';
-import { defaultStore, ColdDeviceStorage } from '@/store.js';
+import { $i, signout, updateAccount } from '@/account.js';
+import { ColdDeviceStorage, defaultStore } from '@/store.js';
 import { makeHotkey } from '@/scripts/hotkey.js';
 import { reactionPicker } from '@/scripts/reaction-picker.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { claimAchievement, claimedAchievements } from '@/scripts/achievements.js';
-import { mainRouter } from '@/router.js';
 import { initializeSw } from '@/scripts/initialize-sw.js';
 import { deckStore } from '@/ui/deck/deck-store.js';
 import { emojiPicker } from '@/scripts/emoji-picker.js';
+import { mainRouter } from '@/global/router/main.js';
 
 export async function mainBoot() {
 	const { isClientUpdated } = await common(() => createApp(
diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
index b46b25eba2..8a74319f29 100644
--- a/packages/frontend/src/components/MkDrive.file.vue
+++ b/packages/frontend/src/components/MkDrive.file.vue
@@ -45,9 +45,9 @@ import bytes from '@/filters/bytes.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
-import { useRouter } from '@/router.js';
 import { getDriveFileMenu } from '@/scripts/get-drive-file-menu.js';
 import { deviceKind } from '@/scripts/device-kind.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue
index 2647ace7db..28058c338b 100644
--- a/packages/frontend/src/components/MkPageWindow.vue
+++ b/packages/frontend/src/components/MkPageWindow.vue
@@ -23,26 +23,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</template>
 
 	<div ref="contents" :class="$style.root" style="container-type: inline-size;">
-		<RouterView :key="reloadCount" :router="router"/>
+		<RouterView :key="reloadCount" :router="windowRouter"/>
 	</div>
 </MkWindow>
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, onMounted, onUnmounted, provide, shallowRef, ref, computed } from 'vue';
+import { computed, ComputedRef, onMounted, onUnmounted, provide, ref, shallowRef } from 'vue';
 import RouterView from '@/components/global/RouterView.vue';
 import MkWindow from '@/components/MkWindow.vue';
 import { popout as _popout } from '@/scripts/popout.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 import { url } from '@/config.js';
-import { mainRouter, routes, page } from '@/router.js';
-import { $i } from '@/account.js';
-import { Router, useScrollPositionManager } from '@/nirax.js';
+import { useScrollPositionManager } from '@/nirax.js';
 import { i18n } from '@/i18n.js';
 import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
 import { openingWindowsCount } from '@/os.js';
 import { claimAchievement } from '@/scripts/achievements.js';
 import { getScrollContainer } from '@/scripts/scroll.js';
+import { useRouterFactory } from '@/global/router/supplier.js';
+import { mainRouter } from '@/global/router/main.js';
 
 const props = defineProps<{
 	initialPath: string;
@@ -52,14 +52,15 @@ defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const router = new Router(routes, props.initialPath, !!$i, page(() => import('@/pages/not-found.vue')));
+const routerFactory = useRouterFactory();
+const windowRouter = routerFactory(props.initialPath);
 
 const contents = shallowRef<HTMLElement>();
 const pageMetadata = ref<null | ComputedRef<PageMetadata>>();
 const windowEl = shallowRef<InstanceType<typeof MkWindow>>();
 const history = ref<{ path: string; key: any; }[]>([{
-	path: router.getCurrentPath(),
-	key: router.getCurrentKey(),
+	path: windowRouter.getCurrentPath(),
+	key: windowRouter.getCurrentKey(),
 }]);
 const buttonsLeft = computed(() => {
 	const buttons = [];
@@ -88,11 +89,11 @@ const buttonsRight = computed(() => {
 });
 const reloadCount = ref(0);
 
-router.addListener('push', ctx => {
+windowRouter.addListener('push', ctx => {
 	history.value.push({ path: ctx.path, key: ctx.key });
 });
 
-provide('router', router);
+provide('router', windowRouter);
 provideMetadataReceiver((info) => {
 	pageMetadata.value = info;
 });
@@ -112,20 +113,20 @@ const contextmenu = computed(() => ([{
 	icon: 'ti ti-external-link',
 	text: i18n.ts.openInNewTab,
 	action: () => {
-		window.open(url + router.getCurrentPath(), '_blank', 'noopener');
+		window.open(url + windowRouter.getCurrentPath(), '_blank', 'noopener');
 		windowEl.value.close();
 	},
 }, {
 	icon: 'ti ti-link',
 	text: i18n.ts.copyLink,
 	action: () => {
-		copyToClipboard(url + router.getCurrentPath());
+		copyToClipboard(url + windowRouter.getCurrentPath());
 	},
 }]));
 
 function back() {
 	history.value.pop();
-	router.replace(history.value.at(-1)!.path, history.value.at(-1)!.key);
+	windowRouter.replace(history.value.at(-1)!.path, history.value.at(-1)!.key);
 }
 
 function reload() {
@@ -137,16 +138,16 @@ function close() {
 }
 
 function expand() {
-	mainRouter.push(router.getCurrentPath(), 'forcePage');
+	mainRouter.push(windowRouter.getCurrentPath(), 'forcePage');
 	windowEl.value.close();
 }
 
 function popout() {
-	_popout(router.getCurrentPath(), windowEl.value.$el);
+	_popout(windowRouter.getCurrentPath(), windowEl.value.$el);
 	windowEl.value.close();
 }
 
-useScrollPositionManager(() => getScrollContainer(contents.value), router);
+useScrollPositionManager(() => getScrollContainer(contents.value), windowRouter);
 
 onMounted(() => {
 	openingWindowsCount.value++;
diff --git a/packages/frontend/src/components/global/MkA.vue b/packages/frontend/src/components/global/MkA.vue
index d34f47a68a..fbea279dbe 100644
--- a/packages/frontend/src/components/global/MkA.vue
+++ b/packages/frontend/src/components/global/MkA.vue
@@ -15,7 +15,7 @@ import * as os from '@/os.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 import { url } from '@/config.js';
 import { i18n } from '@/i18n.js';
-import { useRouter } from '@/router.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const props = withDefaults(defineProps<{
 	to: string;
diff --git a/packages/frontend/src/components/global/RouterView.vue b/packages/frontend/src/components/global/RouterView.vue
index 99ed8adbef..dc7474835d 100644
--- a/packages/frontend/src/components/global/RouterView.vue
+++ b/packages/frontend/src/components/global/RouterView.vue
@@ -16,12 +16,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { inject, onBeforeUnmount, provide, shallowRef, ref } from 'vue';
-import { Resolved, Router } from '@/nirax.js';
+import { inject, onBeforeUnmount, provide, ref, shallowRef } from 'vue';
+import { IRouter, Resolved } from '@/nirax.js';
 import { defaultStore } from '@/store.js';
 
 const props = defineProps<{
-	router?: Router;
+	router?: IRouter;
 }>();
 
 const router = props.router ?? inject('router');
diff --git a/packages/frontend/src/global/router/definition.ts b/packages/frontend/src/global/router/definition.ts
new file mode 100644
index 0000000000..727d6b1bb2
--- /dev/null
+++ b/packages/frontend/src/global/router/definition.ts
@@ -0,0 +1,571 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { App, AsyncComponentLoader, defineAsyncComponent, provide } from 'vue';
+import { IRouter, Router } from '@/nirax.js';
+import { $i, iAmModerator } from '@/account.js';
+import MkLoading from '@/pages/_loading_.vue';
+import MkError from '@/pages/_error_.vue';
+import { setMainRouter } from '@/global/router/main.js';
+
+const page = (loader: AsyncComponentLoader<any>) => defineAsyncComponent({
+	loader: loader,
+	loadingComponent: MkLoading,
+	errorComponent: MkError,
+});
+const routes = [{
+	path: '/@:initUser/pages/:initPageName/view-source',
+	component: page(() => import('@/pages/page-editor/page-editor.vue')),
+}, {
+	path: '/@:username/pages/:pageName',
+	component: page(() => import('@/pages/page.vue')),
+}, {
+	path: '/@:acct/following',
+	component: page(() => import('@/pages/user/following.vue')),
+}, {
+	path: '/@:acct/followers',
+	component: page(() => import('@/pages/user/followers.vue')),
+}, {
+	name: 'user',
+	path: '/@:acct/:page?',
+	component: page(() => import('@/pages/user/index.vue')),
+}, {
+	name: 'note',
+	path: '/notes/:noteId',
+	component: page(() => import('@/pages/note.vue')),
+}, {
+	name: 'list',
+	path: '/list/:listId',
+	component: page(() => import('@/pages/list.vue')),
+}, {
+	path: '/clips/:clipId',
+	component: page(() => import('@/pages/clip.vue')),
+}, {
+	path: '/instance-info/:host',
+	component: page(() => import('@/pages/instance-info.vue')),
+}, {
+	name: 'settings',
+	path: '/settings',
+	component: page(() => import('@/pages/settings/index.vue')),
+	loginRequired: true,
+	children: [{
+		path: '/profile',
+		name: 'profile',
+		component: page(() => import('@/pages/settings/profile.vue')),
+	}, {
+		path: '/avatar-decoration',
+		name: 'avatarDecoration',
+		component: page(() => import('@/pages/settings/avatar-decoration.vue')),
+	}, {
+		path: '/roles',
+		name: 'roles',
+		component: page(() => import('@/pages/settings/roles.vue')),
+	}, {
+		path: '/privacy',
+		name: 'privacy',
+		component: page(() => import('@/pages/settings/privacy.vue')),
+	}, {
+		path: '/emoji-picker',
+		name: 'emojiPicker',
+		component: page(() => import('@/pages/settings/emoji-picker.vue')),
+	}, {
+		path: '/drive',
+		name: 'drive',
+		component: page(() => import('@/pages/settings/drive.vue')),
+	}, {
+		path: '/drive/cleaner',
+		name: 'drive',
+		component: page(() => import('@/pages/settings/drive-cleaner.vue')),
+	}, {
+		path: '/notifications',
+		name: 'notifications',
+		component: page(() => import('@/pages/settings/notifications.vue')),
+	}, {
+		path: '/email',
+		name: 'email',
+		component: page(() => import('@/pages/settings/email.vue')),
+	}, {
+		path: '/security',
+		name: 'security',
+		component: page(() => import('@/pages/settings/security.vue')),
+	}, {
+		path: '/general',
+		name: 'general',
+		component: page(() => import('@/pages/settings/general.vue')),
+	}, {
+		path: '/theme/install',
+		name: 'theme',
+		component: page(() => import('@/pages/settings/theme.install.vue')),
+	}, {
+		path: '/theme/manage',
+		name: 'theme',
+		component: page(() => import('@/pages/settings/theme.manage.vue')),
+	}, {
+		path: '/theme',
+		name: 'theme',
+		component: page(() => import('@/pages/settings/theme.vue')),
+	}, {
+		path: '/navbar',
+		name: 'navbar',
+		component: page(() => import('@/pages/settings/navbar.vue')),
+	}, {
+		path: '/statusbar',
+		name: 'statusbar',
+		component: page(() => import('@/pages/settings/statusbar.vue')),
+	}, {
+		path: '/sounds',
+		name: 'sounds',
+		component: page(() => import('@/pages/settings/sounds.vue')),
+	}, {
+		path: '/plugin/install',
+		name: 'plugin',
+		component: page(() => import('@/pages/settings/plugin.install.vue')),
+	}, {
+		path: '/plugin',
+		name: 'plugin',
+		component: page(() => import('@/pages/settings/plugin.vue')),
+	}, {
+		path: '/import-export',
+		name: 'import-export',
+		component: page(() => import('@/pages/settings/import-export.vue')),
+	}, {
+		path: '/mute-block',
+		name: 'mute-block',
+		component: page(() => import('@/pages/settings/mute-block.vue')),
+	}, {
+		path: '/api',
+		name: 'api',
+		component: page(() => import('@/pages/settings/api.vue')),
+	}, {
+		path: '/apps',
+		name: 'api',
+		component: page(() => import('@/pages/settings/apps.vue')),
+	}, {
+		path: '/webhook/edit/:webhookId',
+		name: 'webhook',
+		component: page(() => import('@/pages/settings/webhook.edit.vue')),
+	}, {
+		path: '/webhook/new',
+		name: 'webhook',
+		component: page(() => import('@/pages/settings/webhook.new.vue')),
+	}, {
+		path: '/webhook',
+		name: 'webhook',
+		component: page(() => import('@/pages/settings/webhook.vue')),
+	}, {
+		path: '/deck',
+		name: 'deck',
+		component: page(() => import('@/pages/settings/deck.vue')),
+	}, {
+		path: '/preferences-backups',
+		name: 'preferences-backups',
+		component: page(() => import('@/pages/settings/preferences-backups.vue')),
+	}, {
+		path: '/migration',
+		name: 'migration',
+		component: page(() => import('@/pages/settings/migration.vue')),
+	}, {
+		path: '/custom-css',
+		name: 'general',
+		component: page(() => import('@/pages/settings/custom-css.vue')),
+	}, {
+		path: '/accounts',
+		name: 'profile',
+		component: page(() => import('@/pages/settings/accounts.vue')),
+	}, {
+		path: '/other',
+		name: 'other',
+		component: page(() => import('@/pages/settings/other.vue')),
+	}, {
+		path: '/',
+		component: page(() => import('@/pages/_empty_.vue')),
+	}],
+}, {
+	path: '/reset-password/:token?',
+	component: page(() => import('@/pages/reset-password.vue')),
+}, {
+	path: '/signup-complete/:code',
+	component: page(() => import('@/pages/signup-complete.vue')),
+}, {
+	path: '/announcements',
+	component: page(() => import('@/pages/announcements.vue')),
+}, {
+	path: '/about',
+	component: page(() => import('@/pages/about.vue')),
+	hash: 'initialTab',
+}, {
+	path: '/about-misskey',
+	component: page(() => import('@/pages/about-misskey.vue')),
+}, {
+	path: '/invite',
+	name: 'invite',
+	component: page(() => import('@/pages/invite.vue')),
+}, {
+	path: '/ads',
+	component: page(() => import('@/pages/ads.vue')),
+}, {
+	path: '/theme-editor',
+	component: page(() => import('@/pages/theme-editor.vue')),
+	loginRequired: true,
+}, {
+	path: '/roles/:role',
+	component: page(() => import('@/pages/role.vue')),
+}, {
+	path: '/user-tags/:tag',
+	component: page(() => import('@/pages/user-tag.vue')),
+}, {
+	path: '/explore',
+	component: page(() => import('@/pages/explore.vue')),
+	hash: 'initialTab',
+}, {
+	path: '/search',
+	component: page(() => import('@/pages/search.vue')),
+	query: {
+		q: 'query',
+		channel: 'channel',
+		type: 'type',
+		origin: 'origin',
+	},
+}, {
+	path: '/authorize-follow',
+	component: page(() => import('@/pages/follow.vue')),
+	loginRequired: true,
+}, {
+	path: '/share',
+	component: page(() => import('@/pages/share.vue')),
+	loginRequired: true,
+}, {
+	path: '/api-console',
+	component: page(() => import('@/pages/api-console.vue')),
+	loginRequired: true,
+}, {
+	path: '/scratchpad',
+	component: page(() => import('@/pages/scratchpad.vue')),
+}, {
+	path: '/auth/:token',
+	component: page(() => import('@/pages/auth.vue')),
+}, {
+	path: '/miauth/:session',
+	component: page(() => import('@/pages/miauth.vue')),
+	query: {
+		callback: 'callback',
+		name: 'name',
+		icon: 'icon',
+		permission: 'permission',
+	},
+}, {
+	path: '/oauth/authorize',
+	component: page(() => import('@/pages/oauth.vue')),
+}, {
+	path: '/tags/:tag',
+	component: page(() => import('@/pages/tag.vue')),
+}, {
+	path: '/pages/new',
+	component: page(() => import('@/pages/page-editor/page-editor.vue')),
+	loginRequired: true,
+}, {
+	path: '/pages/edit/:initPageId',
+	component: page(() => import('@/pages/page-editor/page-editor.vue')),
+	loginRequired: true,
+}, {
+	path: '/pages',
+	component: page(() => import('@/pages/pages.vue')),
+}, {
+	path: '/play/:id/edit',
+	component: page(() => import('@/pages/flash/flash-edit.vue')),
+	loginRequired: true,
+}, {
+	path: '/play/new',
+	component: page(() => import('@/pages/flash/flash-edit.vue')),
+	loginRequired: true,
+}, {
+	path: '/play/:id',
+	component: page(() => import('@/pages/flash/flash.vue')),
+}, {
+	path: '/play',
+	component: page(() => import('@/pages/flash/flash-index.vue')),
+}, {
+	path: '/gallery/:postId/edit',
+	component: page(() => import('@/pages/gallery/edit.vue')),
+	loginRequired: true,
+}, {
+	path: '/gallery/new',
+	component: page(() => import('@/pages/gallery/edit.vue')),
+	loginRequired: true,
+}, {
+	path: '/gallery/:postId',
+	component: page(() => import('@/pages/gallery/post.vue')),
+}, {
+	path: '/gallery',
+	component: page(() => import('@/pages/gallery/index.vue')),
+}, {
+	path: '/channels/:channelId/edit',
+	component: page(() => import('@/pages/channel-editor.vue')),
+	loginRequired: true,
+}, {
+	path: '/channels/new',
+	component: page(() => import('@/pages/channel-editor.vue')),
+	loginRequired: true,
+}, {
+	path: '/channels/:channelId',
+	component: page(() => import('@/pages/channel.vue')),
+}, {
+	path: '/channels',
+	component: page(() => import('@/pages/channels.vue')),
+}, {
+	path: '/custom-emojis-manager',
+	component: page(() => import('@/pages/custom-emojis-manager.vue')),
+}, {
+	path: '/avatar-decorations',
+	name: 'avatarDecorations',
+	component: page(() => import('@/pages/avatar-decorations.vue')),
+}, {
+	path: '/registry/keys/:domain/:path(*)?',
+	component: page(() => import('@/pages/registry.keys.vue')),
+}, {
+	path: '/registry/value/:domain/:path(*)?',
+	component: page(() => import('@/pages/registry.value.vue')),
+}, {
+	path: '/registry',
+	component: page(() => import('@/pages/registry.vue')),
+}, {
+	path: '/install-extentions',
+	component: page(() => import('@/pages/install-extentions.vue')),
+	loginRequired: true,
+}, {
+	path: '/admin/user/:userId',
+	component: iAmModerator ? page(() => import('@/pages/admin-user.vue')) : page(() => import('@/pages/not-found.vue')),
+}, {
+	path: '/admin/file/:fileId',
+	component: iAmModerator ? page(() => import('@/pages/admin-file.vue')) : page(() => import('@/pages/not-found.vue')),
+}, {
+	path: '/admin',
+	component: iAmModerator ? page(() => import('@/pages/admin/index.vue')) : page(() => import('@/pages/not-found.vue')),
+	children: [{
+		path: '/overview',
+		name: 'overview',
+		component: page(() => import('@/pages/admin/overview.vue')),
+	}, {
+		path: '/users',
+		name: 'users',
+		component: page(() => import('@/pages/admin/users.vue')),
+	}, {
+		path: '/emojis',
+		name: 'emojis',
+		component: page(() => import('@/pages/custom-emojis-manager.vue')),
+	}, {
+		path: '/avatar-decorations',
+		name: 'avatarDecorations',
+		component: page(() => import('@/pages/avatar-decorations.vue')),
+	}, {
+		path: '/queue',
+		name: 'queue',
+		component: page(() => import('@/pages/admin/queue.vue')),
+	}, {
+		path: '/files',
+		name: 'files',
+		component: page(() => import('@/pages/admin/files.vue')),
+	}, {
+		path: '/federation',
+		name: 'federation',
+		component: page(() => import('@/pages/admin/federation.vue')),
+	}, {
+		path: '/announcements',
+		name: 'announcements',
+		component: page(() => import('@/pages/admin/announcements.vue')),
+	}, {
+		path: '/ads',
+		name: 'ads',
+		component: page(() => import('@/pages/admin/ads.vue')),
+	}, {
+		path: '/roles/:id/edit',
+		name: 'roles',
+		component: page(() => import('@/pages/admin/roles.edit.vue')),
+	}, {
+		path: '/roles/new',
+		name: 'roles',
+		component: page(() => import('@/pages/admin/roles.edit.vue')),
+	}, {
+		path: '/roles/:id',
+		name: 'roles',
+		component: page(() => import('@/pages/admin/roles.role.vue')),
+	}, {
+		path: '/roles',
+		name: 'roles',
+		component: page(() => import('@/pages/admin/roles.vue')),
+	}, {
+		path: '/database',
+		name: 'database',
+		component: page(() => import('@/pages/admin/database.vue')),
+	}, {
+		path: '/abuses',
+		name: 'abuses',
+		component: page(() => import('@/pages/admin/abuses.vue')),
+	}, {
+		path: '/modlog',
+		name: 'modlog',
+		component: page(() => import('@/pages/admin/modlog.vue')),
+	}, {
+		path: '/settings',
+		name: 'settings',
+		component: page(() => import('@/pages/admin/settings.vue')),
+	}, {
+		path: '/branding',
+		name: 'branding',
+		component: page(() => import('@/pages/admin/branding.vue')),
+	}, {
+		path: '/moderation',
+		name: 'moderation',
+		component: page(() => import('@/pages/admin/moderation.vue')),
+	}, {
+		path: '/email-settings',
+		name: 'email-settings',
+		component: page(() => import('@/pages/admin/email-settings.vue')),
+	}, {
+		path: '/object-storage',
+		name: 'object-storage',
+		component: page(() => import('@/pages/admin/object-storage.vue')),
+	}, {
+		path: '/security',
+		name: 'security',
+		component: page(() => import('@/pages/admin/security.vue')),
+	}, {
+		path: '/relays',
+		name: 'relays',
+		component: page(() => import('@/pages/admin/relays.vue')),
+	}, {
+		path: '/instance-block',
+		name: 'instance-block',
+		component: page(() => import('@/pages/admin/instance-block.vue')),
+	}, {
+		path: '/proxy-account',
+		name: 'proxy-account',
+		component: page(() => import('@/pages/admin/proxy-account.vue')),
+	}, {
+		path: '/external-services',
+		name: 'external-services',
+		component: page(() => import('@/pages/admin/external-services.vue')),
+	}, {
+		path: '/other-settings',
+		name: 'other-settings',
+		component: page(() => import('@/pages/admin/other-settings.vue')),
+	}, {
+		path: '/server-rules',
+		name: 'server-rules',
+		component: page(() => import('@/pages/admin/server-rules.vue')),
+	}, {
+		path: '/invites',
+		name: 'invites',
+		component: page(() => import('@/pages/admin/invites.vue')),
+	}, {
+		path: '/',
+		component: page(() => import('@/pages/_empty_.vue')),
+	}],
+}, {
+	path: '/my/notifications',
+	component: page(() => import('@/pages/notifications.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/favorites',
+	component: page(() => import('@/pages/favorites.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/achievements',
+	component: page(() => import('@/pages/achievements.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/drive/folder/:folder',
+	component: page(() => import('@/pages/drive.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/drive',
+	component: page(() => import('@/pages/drive.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/drive/file/:fileId',
+	component: page(() => import('@/pages/drive.file.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/follow-requests',
+	component: page(() => import('@/pages/follow-requests.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/lists/:listId',
+	component: page(() => import('@/pages/my-lists/list.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/lists',
+	component: page(() => import('@/pages/my-lists/index.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/clips',
+	component: page(() => import('@/pages/my-clips/index.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/antennas/create',
+	component: page(() => import('@/pages/my-antennas/create.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/antennas/:antennaId',
+	component: page(() => import('@/pages/my-antennas/edit.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/antennas',
+	component: page(() => import('@/pages/my-antennas/index.vue')),
+	loginRequired: true,
+}, {
+	path: '/timeline/list/:listId',
+	component: page(() => import('@/pages/user-list-timeline.vue')),
+	loginRequired: true,
+}, {
+	path: '/timeline/antenna/:antennaId',
+	component: page(() => import('@/pages/antenna-timeline.vue')),
+	loginRequired: true,
+}, {
+	path: '/clicker',
+	component: page(() => import('@/pages/clicker.vue')),
+	loginRequired: true,
+}, {
+	path: '/bubble-game',
+	component: page(() => import('@/pages/drop-and-fusion.vue')),
+	loginRequired: true,
+}, {
+	path: '/timeline',
+	component: page(() => import('@/pages/timeline.vue')),
+}, {
+	name: 'index',
+	path: '/',
+	component: $i ? page(() => import('@/pages/timeline.vue')) : page(() => import('@/pages/welcome.vue')),
+	globalCacheKey: 'index',
+}, {
+	path: '/:(*)',
+	component: page(() => import('@/pages/not-found.vue')),
+}];
+
+function createRouterImpl(path: string): IRouter {
+	return new Router(routes, path, !!$i, page(() => import('@/pages/not-found.vue')));
+}
+
+/**
+ * {@link Router}による画面遷移を可能とするために{@link mainRouter}をセットアップする。
+ * また、{@link Router}のインスタンスを作成するためのファクトリも{@link provide}経由で公開する（`routerFactory`というキーで取得可能）
+ */
+export function setupRouter(app: App) {
+	app.provide('routerFactory', createRouterImpl);
+
+	const mainRouter = createRouterImpl(location.pathname + location.search + location.hash);
+
+	window.history.replaceState({ key: mainRouter.getCurrentKey() }, '', location.href);
+
+	window.addEventListener('popstate', (event) => {
+		mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key);
+	});
+
+	mainRouter.addListener('push', ctx => {
+		window.history.pushState({ key: ctx.key }, '', ctx.path);
+	});
+
+	setMainRouter(mainRouter);
+}
diff --git a/packages/frontend/src/global/router/main.ts b/packages/frontend/src/global/router/main.ts
new file mode 100644
index 0000000000..5adb3f606f
--- /dev/null
+++ b/packages/frontend/src/global/router/main.ts
@@ -0,0 +1,163 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { ShallowRef } from 'vue';
+import { EventEmitter } from 'eventemitter3';
+import { IRouter, Resolved, RouteDef, RouterEvent } from '@/nirax.js';
+
+function getMainRouter(): IRouter {
+	const router = mainRouterHolder;
+	if (!router) {
+		throw new Error('mainRouter is not found.');
+	}
+
+	return router;
+}
+
+/**
+ * メインルータを設定する。一度設定すると、それ以降は変更できない。
+ * {@link setupRouter}から呼び出されることのみを想定している。
+ */
+export function setMainRouter(router: IRouter) {
+	if (mainRouterHolder) {
+		throw new Error('mainRouter is already exists.');
+	}
+
+	mainRouterHolder = router;
+}
+
+/**
+ * {@link mainRouter}用のプロキシ実装。
+ * {@link mainRouter}は起動シーケンスの一部にて初期化されるため、僅かにundefinedになる期間がある。
+ * その僅かな期間のためだけに型をundefined込みにしたくないのでこのクラスを緩衝材として使用する。
+ */
+class MainRouterProxy implements IRouter {
+	private supplier: () => IRouter;
+
+	constructor(supplier: () => IRouter) {
+		this.supplier = supplier;
+	}
+
+	get current(): Resolved {
+		return this.supplier().current;
+	}
+
+	get currentRef(): ShallowRef<Resolved> {
+		return this.supplier().currentRef;
+	}
+
+	get currentRoute(): ShallowRef<RouteDef> {
+		return this.supplier().currentRoute;
+	}
+
+	get navHook(): ((path: string, flag?: any) => boolean) | null {
+		return this.supplier().navHook;
+	}
+
+	set navHook(value) {
+		this.supplier().navHook = value;
+	}
+
+	getCurrentKey(): string {
+		return this.supplier().getCurrentKey();
+	}
+
+	getCurrentPath(): any {
+		return this.supplier().getCurrentPath();
+	}
+
+	push(path: string, flag?: any): void {
+		this.supplier().push(path, flag);
+	}
+
+	replace(path: string, key?: string | null): void {
+		this.supplier().replace(path, key);
+	}
+
+	resolve(path: string): Resolved | null {
+		return this.supplier().resolve(path);
+	}
+
+	eventNames(): Array<EventEmitter.EventNames<RouterEvent>> {
+		return this.supplier().eventNames();
+	}
+
+	listeners<T extends EventEmitter.EventNames<RouterEvent>>(
+		event: T,
+	): Array<EventEmitter.EventListener<RouterEvent, T>> {
+		return this.supplier().listeners(event);
+	}
+
+	listenerCount(
+		event: EventEmitter.EventNames<RouterEvent>,
+	): number {
+		return this.supplier().listenerCount(event);
+	}
+
+	emit<T extends EventEmitter.EventNames<RouterEvent>>(
+		event: T,
+		...args: EventEmitter.EventArgs<RouterEvent, T>
+	): boolean {
+		return this.supplier().emit(event, ...args);
+	}
+
+	on<T extends EventEmitter.EventNames<RouterEvent>>(
+		event: T,
+		fn: EventEmitter.EventListener<RouterEvent, T>,
+		context?: any,
+	): this {
+		this.supplier().on(event, fn, context);
+		return this;
+	}
+
+	addListener<T extends EventEmitter.EventNames<RouterEvent>>(
+		event: T,
+		fn: EventEmitter.EventListener<RouterEvent, T>,
+		context?: any,
+	): this {
+		this.supplier().addListener(event, fn, context);
+		return this;
+	}
+
+	once<T extends EventEmitter.EventNames<RouterEvent>>(
+		event: T,
+		fn: EventEmitter.EventListener<RouterEvent, T>,
+		context?: any,
+	): this {
+		this.supplier().once(event, fn, context);
+		return this;
+	}
+
+	removeListener<T extends EventEmitter.EventNames<RouterEvent>>(
+		event: T,
+		fn?: EventEmitter.EventListener<RouterEvent, T>,
+		context?: any,
+		once?: boolean,
+	): this {
+		this.supplier().removeListener(event, fn, context, once);
+		return this;
+	}
+
+	off<T extends EventEmitter.EventNames<RouterEvent>>(
+		event: T,
+		fn?: EventEmitter.EventListener<RouterEvent, T>,
+		context?: any,
+		once?: boolean,
+	): this {
+		this.supplier().off(event, fn, context, once);
+		return this;
+	}
+
+	removeAllListeners(
+		event?: EventEmitter.EventNames<RouterEvent>,
+	): this {
+		this.supplier().removeAllListeners(event);
+		return this;
+	}
+}
+
+let mainRouterHolder: IRouter | null = null;
+
+export const mainRouter: IRouter = new MainRouterProxy(getMainRouter);
diff --git a/packages/frontend/src/global/router/supplier.ts b/packages/frontend/src/global/router/supplier.ts
new file mode 100644
index 0000000000..1e321ef21f
--- /dev/null
+++ b/packages/frontend/src/global/router/supplier.ts
@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { inject } from 'vue';
+import { IRouter, Router } from '@/nirax.js';
+import { mainRouter } from '@/global/router/main.js';
+
+/**
+ * メインの{@link Router}を取得する。
+ * あらかじめ{@link setupRouter}を実行しておく必要がある（{@link provide}により{@link IRouter}のインスタンスを注入可能であるならばこの限りではない）
+ */
+export function useRouter(): IRouter {
+	return inject<Router | null>('router', null) ?? mainRouter;
+}
+
+/**
+ * 任意の{@link Router}を取得するためのファクトリを取得する。
+ * あらかじめ{@link setupRouter}を実行しておく必要がある。
+ */
+export function useRouterFactory(): (path: string) => IRouter {
+	const factory = inject<(path: string) => IRouter>('routerFactory');
+	if (!factory) {
+		console.error('routerFactory is not defined.');
+		throw new Error('routerFactory is not defined.');
+	}
+
+	return factory;
+}
diff --git a/packages/frontend/src/nirax.ts b/packages/frontend/src/nirax.ts
index 9755bdcb18..a56aa6419e 100644
--- a/packages/frontend/src/nirax.ts
+++ b/packages/frontend/src/nirax.ts
@@ -5,11 +5,11 @@
 
 // NIRAX --- A lightweight router
 
-import { EventEmitter } from 'eventemitter3';
 import { Component, onMounted, shallowRef, ShallowRef } from 'vue';
+import { EventEmitter } from 'eventemitter3';
 import { safeURIDecode } from '@/scripts/safe-uri-decode.js';
 
-type RouteDef = {
+export type RouteDef = {
 	path: string;
 	component: Component;
 	query?: Record<string, string>;
@@ -27,6 +27,27 @@ type ParsedPath = (string | {
 	optional?: boolean;
 })[];
 
+export type RouterEvent = {
+	change: (ctx: {
+		beforePath: string;
+		path: string;
+		resolved: Resolved;
+		key: string;
+	}) => void;
+	replace: (ctx: {
+		path: string;
+		key: string;
+	}) => void;
+	push: (ctx: {
+		beforePath: string;
+		path: string;
+		route: RouteDef | null;
+		props: Map<string, string> | null;
+		key: string;
+	}) => void;
+	same: () => void;
+}
+
 export type Resolved = { route: RouteDef; props: Map<string, string | boolean>; child?: Resolved; };
 
 function parsePath(path: string): ParsedPath {
@@ -54,26 +75,85 @@ function parsePath(path: string): ParsedPath {
 	return res;
 }
 
-export class Router extends EventEmitter<{
-	change: (ctx: {
-		beforePath: string;
-		path: string;
-		resolved: Resolved;
-		key: string;
-	}) => void;
-	replace: (ctx: {
-		path: string;
-		key: string;
-	}) => void;
-	push: (ctx: {
-		beforePath: string;
-		path: string;
-		route: RouteDef | null;
-		props: Map<string, string> | null;
-		key: string;
-	}) => void;
-	same: () => void;
-}> {
+export interface IRouter extends EventEmitter<RouterEvent> {
+	current: Resolved;
+	currentRef: ShallowRef<Resolved>;
+	currentRoute: ShallowRef<RouteDef>;
+	navHook: ((path: string, flag?: any) => boolean) | null;
+
+	resolve(path: string): Resolved | null;
+
+	getCurrentPath(): any;
+
+	getCurrentKey(): string;
+
+	push(path: string, flag?: any): void;
+
+	replace(path: string, key?: string | null): void;
+
+	/** @see EventEmitter */
+	eventNames(): Array<EventEmitter.EventNames<RouterEvent>>;
+
+	/** @see EventEmitter */
+	listeners<T extends EventEmitter.EventNames<RouterEvent>>(
+		event: T
+	): Array<EventEmitter.EventListener<RouterEvent, T>>;
+
+	/** @see EventEmitter */
+	listenerCount(
+		event: EventEmitter.EventNames<RouterEvent>
+	): number;
+
+	/** @see EventEmitter */
+	emit<T extends EventEmitter.EventNames<RouterEvent>>(
+		event: T,
+		...args: EventEmitter.EventArgs<RouterEvent, T>
+	): boolean;
+
+	/** @see EventEmitter */
+	on<T extends EventEmitter.EventNames<RouterEvent>>(
+		event: T,
+		fn: EventEmitter.EventListener<RouterEvent, T>,
+		context?: any
+	): this;
+
+	/** @see EventEmitter */
+	addListener<T extends EventEmitter.EventNames<RouterEvent>>(
+		event: T,
+		fn: EventEmitter.EventListener<RouterEvent, T>,
+		context?: any
+	): this;
+
+	/** @see EventEmitter */
+	once<T extends EventEmitter.EventNames<RouterEvent>>(
+		event: T,
+		fn: EventEmitter.EventListener<RouterEvent, T>,
+		context?: any
+	): this;
+
+	/** @see EventEmitter */
+	removeListener<T extends EventEmitter.EventNames<RouterEvent>>(
+		event: T,
+		fn?: EventEmitter.EventListener<RouterEvent, T>,
+		context?: any,
+		once?: boolean | undefined
+	): this;
+
+	/** @see EventEmitter */
+	off<T extends EventEmitter.EventNames<RouterEvent>>(
+		event: T,
+		fn?: EventEmitter.EventListener<RouterEvent, T>,
+		context?: any,
+		once?: boolean | undefined
+	): this;
+
+	/** @see EventEmitter */
+	removeAllListeners(
+		event?: EventEmitter.EventNames<RouterEvent>
+	): this;
+}
+
+export class Router extends EventEmitter<RouterEvent> implements IRouter {
 	private routes: RouteDef[];
 	public current: Resolved;
 	public currentRef: ShallowRef<Resolved> = shallowRef();
@@ -277,7 +357,7 @@ export class Router extends EventEmitter<{
 	}
 }
 
-export function useScrollPositionManager(getScrollContainer: () => HTMLElement, router: Router) {
+export function useScrollPositionManager(getScrollContainer: () => HTMLElement, router: IRouter) {
 	const scrollPosStore = new Map<string, number>();
 
 	onMounted(() => {
diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index 333bac724b..7106ed7438 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -36,8 +36,8 @@ import { instance } from '@/instance.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { lookupUser, lookupUserByEmail } from '@/scripts/lookup-user.js';
-import { useRouter } from '@/router.js';
 import { PageMetadata, definePageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const isEmpty = (x: string | null) => x == null || x === '';
 
diff --git a/packages/frontend/src/pages/admin/roles.edit.vue b/packages/frontend/src/pages/admin/roles.edit.vue
index db0acae24a..82e230d6a6 100644
--- a/packages/frontend/src/pages/admin/roles.edit.vue
+++ b/packages/frontend/src/pages/admin/roles.edit.vue
@@ -31,9 +31,9 @@ import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
-import { useRouter } from '@/router.js';
 import MkButton from '@/components/MkButton.vue';
 import { rolesCache } from '@/cache.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/pages/admin/roles.role.vue b/packages/frontend/src/pages/admin/roles.role.vue
index d5ce190ef2..ff29f4ec1f 100644
--- a/packages/frontend/src/pages/admin/roles.role.vue
+++ b/packages/frontend/src/pages/admin/roles.role.vue
@@ -70,12 +70,12 @@ import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
-import { useRouter } from '@/router.js';
 import MkButton from '@/components/MkButton.vue';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import { infoImageUrl } from '@/instance.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/pages/admin/roles.vue b/packages/frontend/src/pages/admin/roles.vue
index f7c4048b23..732affd77d 100644
--- a/packages/frontend/src/pages/admin/roles.vue
+++ b/packages/frontend/src/pages/admin/roles.vue
@@ -237,9 +237,9 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { instance } from '@/instance.js';
-import { useRouter } from '@/router.js';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
 import { ROLE_POLICIES } from '@/const.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 const baseRoleQ = ref('');
diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue
index d96ca4208b..7f07ac4987 100644
--- a/packages/frontend/src/pages/antenna-timeline.vue
+++ b/packages/frontend/src/pages/antenna-timeline.vue
@@ -30,9 +30,9 @@ import MkTimeline from '@/components/MkTimeline.vue';
 import { scroll } from '@/scripts/scroll.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
-import { useRouter } from '@/router.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/pages/channel-editor.vue b/packages/frontend/src/pages/channel-editor.vue
index 727778b6e6..99b93444db 100644
--- a/packages/frontend/src/pages/channel-editor.vue
+++ b/packages/frontend/src/pages/channel-editor.vue
@@ -77,12 +77,12 @@ import MkColorInput from '@/components/MkColorInput.vue';
 import { selectFile } from '@/scripts/select-file.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
-import { useRouter } from '@/router.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
+import { useRouter } from '@/global/router/supplier.js';
 
 const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index 667563bd16..e698098f35 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -75,7 +75,6 @@ import MkTimeline from '@/components/MkTimeline.vue';
 import XChannelFollowButton from '@/components/MkChannelFollowButton.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
-import { useRouter } from '@/router.js';
 import { $i, iAmModerator } from '@/account.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -92,6 +91,7 @@ import { PageHeaderItem } from '@/types/page-header.js';
 import { isSupportShare } from '@/scripts/navigator.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 import { miLocalStorage } from '@/local-storage.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/pages/channels.vue b/packages/frontend/src/pages/channels.vue
index b7cc5cd36e..80a401eee7 100644
--- a/packages/frontend/src/pages/channels.vue
+++ b/packages/frontend/src/pages/channels.vue
@@ -58,9 +58,9 @@ import MkInput from '@/components/MkInput.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
-import { useRouter } from '@/router.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/pages/drive.file.info.vue b/packages/frontend/src/pages/drive.file.info.vue
index 4c635028f3..64c3ad70ba 100644
--- a/packages/frontend/src/pages/drive.file.info.vue
+++ b/packages/frontend/src/pages/drive.file.info.vue
@@ -80,7 +80,7 @@ import { infoImageUrl } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
-import { useRouter } from '@/router.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/pages/flash/flash-edit.vue b/packages/frontend/src/pages/flash/flash-edit.vue
index ce077779c8..8298dc6d79 100644
--- a/packages/frontend/src/pages/flash/flash-edit.vue
+++ b/packages/frontend/src/pages/flash/flash-edit.vue
@@ -45,7 +45,7 @@ import MkTextarea from '@/components/MkTextarea.vue';
 import MkCodeEditor from '@/components/MkCodeEditor.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkSelect from '@/components/MkSelect.vue';
-import { useRouter } from '@/router.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const PRESET_DEFAULT = `/// @ 0.16.0
 
diff --git a/packages/frontend/src/pages/flash/flash-index.vue b/packages/frontend/src/pages/flash/flash-index.vue
index e0b9f87d46..7852018894 100644
--- a/packages/frontend/src/pages/flash/flash-index.vue
+++ b/packages/frontend/src/pages/flash/flash-index.vue
@@ -42,9 +42,9 @@ import { computed, ref } from 'vue';
 import MkFlashPreview from '@/components/MkFlashPreview.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
-import { useRouter } from '@/router.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/pages/follow.vue b/packages/frontend/src/pages/follow.vue
index 5a21604080..eefef828bd 100644
--- a/packages/frontend/src/pages/follow.vue
+++ b/packages/frontend/src/pages/follow.vue
@@ -13,9 +13,9 @@ import { } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
-import { mainRouter } from '@/router.js';
 import { i18n } from '@/i18n.js';
 import { defaultStore } from '@/store.js';
+import { mainRouter } from '@/global/router/main.js';
 
 async function follow(user): Promise<void> {
 	const { canceled } = await os.confirm({
diff --git a/packages/frontend/src/pages/gallery/edit.vue b/packages/frontend/src/pages/gallery/edit.vue
index e0c7654531..f7db01ce95 100644
--- a/packages/frontend/src/pages/gallery/edit.vue
+++ b/packages/frontend/src/pages/gallery/edit.vue
@@ -48,9 +48,9 @@ import FormSuspense from '@/components/form/suspense.vue';
 import { selectFiles } from '@/scripts/select-file.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
-import { useRouter } from '@/router.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/pages/gallery/index.vue b/packages/frontend/src/pages/gallery/index.vue
index 8d9ac07805..0198ab9700 100644
--- a/packages/frontend/src/pages/gallery/index.vue
+++ b/packages/frontend/src/pages/gallery/index.vue
@@ -53,7 +53,7 @@ import MkPagination from '@/components/MkPagination.vue';
 import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
-import { useRouter } from '@/router.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue
index f71fe0f260..dcd427d6b4 100644
--- a/packages/frontend/src/pages/gallery/post.vue
+++ b/packages/frontend/src/pages/gallery/post.vue
@@ -72,13 +72,13 @@ import MkPagination from '@/components/MkPagination.vue';
 import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
 import { url } from '@/config.js';
-import { useRouter } from '@/router.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { defaultStore } from '@/store.js';
 import { $i } from '@/account.js';
 import { isSupportShare } from '@/scripts/navigator.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/pages/my-antennas/create.vue b/packages/frontend/src/pages/my-antennas/create.vue
index c5b1b54222..61b9424bdd 100644
--- a/packages/frontend/src/pages/my-antennas/create.vue
+++ b/packages/frontend/src/pages/my-antennas/create.vue
@@ -14,8 +14,8 @@ import { ref } from 'vue';
 import XAntenna from './editor.vue';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
-import { useRouter } from '@/router.js';
 import { antennasCache } from '@/cache.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/pages/my-antennas/edit.vue b/packages/frontend/src/pages/my-antennas/edit.vue
index 0648f5340f..b4ca7cc9f8 100644
--- a/packages/frontend/src/pages/my-antennas/edit.vue
+++ b/packages/frontend/src/pages/my-antennas/edit.vue
@@ -15,9 +15,9 @@ import * as Misskey from 'misskey-js';
 import XAntenna from './editor.vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
-import { useRouter } from '@/router.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { antennasCache } from '@/cache.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue
index 5798070ad8..85775a2fdd 100644
--- a/packages/frontend/src/pages/my-lists/list.vue
+++ b/packages/frontend/src/pages/my-lists/list.vue
@@ -58,7 +58,6 @@ import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
-import { mainRouter } from '@/router.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { userPage } from '@/filters/user.js';
@@ -70,6 +69,7 @@ import { userListsCache } from '@/cache.js';
 import { signinRequired } from '@/account.js';
 import { defaultStore } from '@/store.js';
 import MkPagination from '@/components/MkPagination.vue';
+import { mainRouter } from '@/global/router/main.js';
 
 const $i = signinRequired();
 
diff --git a/packages/frontend/src/pages/page-editor/page-editor.vue b/packages/frontend/src/pages/page-editor/page-editor.vue
index 496a8c3274..6db72dccba 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.vue
@@ -73,10 +73,10 @@ import { url } from '@/config.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { selectFile } from '@/scripts/select-file.js';
-import { mainRouter } from '@/router.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { $i } from '@/account.js';
+import { mainRouter } from '@/global/router/main.js';
 
 const props = defineProps<{
 	initPageId?: string;
diff --git a/packages/frontend/src/pages/pages.vue b/packages/frontend/src/pages/pages.vue
index bc51b55c7f..22ab9ced09 100644
--- a/packages/frontend/src/pages/pages.vue
+++ b/packages/frontend/src/pages/pages.vue
@@ -40,9 +40,9 @@ import { computed, ref } from 'vue';
 import MkPagePreview from '@/components/MkPagePreview.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
-import { useRouter } from '@/router.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/pages/reset-password.vue b/packages/frontend/src/pages/reset-password.vue
index c9d193b787..d8dec27513 100644
--- a/packages/frontend/src/pages/reset-password.vue
+++ b/packages/frontend/src/pages/reset-password.vue
@@ -25,8 +25,8 @@ import MkInput from '@/components/MkInput.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
-import { mainRouter } from '@/router.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { mainRouter } from '@/global/router/main.js';
 
 const props = defineProps<{
 	token?: string;
diff --git a/packages/frontend/src/pages/search.note.vue b/packages/frontend/src/pages/search.note.vue
index 1b12910a38..811218faf5 100644
--- a/packages/frontend/src/pages/search.note.vue
+++ b/packages/frontend/src/pages/search.note.vue
@@ -51,8 +51,8 @@ import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
-import { useRouter } from '@/router.js';
 import MkFolder from '@/components/MkFolder.vue';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/pages/search.user.vue b/packages/frontend/src/pages/search.user.vue
index 5e9048ee57..82cedc9833 100644
--- a/packages/frontend/src/pages/search.user.vue
+++ b/packages/frontend/src/pages/search.user.vue
@@ -34,7 +34,7 @@ import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
-import { useRouter } from '@/router.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/pages/settings/index.vue b/packages/frontend/src/pages/settings/index.vue
index ee0188873e..be443033bc 100644
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@@ -35,9 +35,9 @@ import MkSuperMenu from '@/components/MkSuperMenu.vue';
 import { signout, $i } from '@/account.js';
 import { clearCache } from '@/scripts/clear-cache.js';
 import { instance } from '@/instance.js';
-import { useRouter } from '@/router.js';
 import { PageMetadata, definePageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
 import * as os from '@/os.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const indexInfo = {
 	title: i18n.ts.settings,
diff --git a/packages/frontend/src/pages/settings/webhook.edit.vue b/packages/frontend/src/pages/settings/webhook.edit.vue
index 9eb344bd46..a122c4c819 100644
--- a/packages/frontend/src/pages/settings/webhook.edit.vue
+++ b/packages/frontend/src/pages/settings/webhook.edit.vue
@@ -51,7 +51,7 @@ import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
-import { useRouter } from '@/router.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/pages/user-list-timeline.vue b/packages/frontend/src/pages/user-list-timeline.vue
index 19c376c77b..10a21ef20d 100644
--- a/packages/frontend/src/pages/user-list-timeline.vue
+++ b/packages/frontend/src/pages/user-list-timeline.vue
@@ -29,9 +29,9 @@ import * as Misskey from 'misskey-js';
 import MkTimeline from '@/components/MkTimeline.vue';
 import { scroll } from '@/scripts/scroll.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
-import { useRouter } from '@/router.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 const router = useRouter();
 
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 5258165d7c..ed9722b7ed 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -166,13 +166,13 @@ import { getUserMenu } from '@/scripts/get-user-menu.js';
 import number from '@/filters/number.js';
 import { userPage } from '@/filters/user.js';
 import * as os from '@/os.js';
-import { useRouter } from '@/router.js';
 import { i18n } from '@/i18n.js';
 import { $i, iAmModerator } from '@/account.js';
 import { dateString } from '@/filters/date.js';
 import { confetti } from '@/scripts/confetti.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
+import { useRouter } from '@/global/router/supplier.js';
 
 function calcAge(birthdate: string): number {
 	const date = new Date(birthdate);
diff --git a/packages/frontend/src/router.ts b/packages/frontend/src/router.ts
deleted file mode 100644
index 35478a35a9..0000000000
--- a/packages/frontend/src/router.ts
+++ /dev/null
@@ -1,561 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and other misskey contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import { AsyncComponentLoader, defineAsyncComponent, inject } from 'vue';
-import { Router } from '@/nirax.js';
-import { $i, iAmModerator } from '@/account.js';
-import MkLoading from '@/pages/_loading_.vue';
-import MkError from '@/pages/_error_.vue';
-
-export const page = (loader: AsyncComponentLoader<any>) => defineAsyncComponent({
-	loader: loader,
-	loadingComponent: MkLoading,
-	errorComponent: MkError,
-});
-
-export const routes = [{
-	path: '/@:initUser/pages/:initPageName/view-source',
-	component: page(() => import('./pages/page-editor/page-editor.vue')),
-}, {
-	path: '/@:username/pages/:pageName',
-	component: page(() => import('./pages/page.vue')),
-}, {
-	path: '/@:acct/following',
-	component: page(() => import('./pages/user/following.vue')),
-}, {
-	path: '/@:acct/followers',
-	component: page(() => import('./pages/user/followers.vue')),
-}, {
-	name: 'user',
-	path: '/@:acct/:page?',
-	component: page(() => import('./pages/user/index.vue')),
-}, {
-	name: 'note',
-	path: '/notes/:noteId',
-	component: page(() => import('./pages/note.vue')),
-}, {
-	name: 'list',
-	path: '/list/:listId',
-	component: page(() => import('./pages/list.vue')),
-}, {
-	path: '/clips/:clipId',
-	component: page(() => import('./pages/clip.vue')),
-}, {
-	path: '/instance-info/:host',
-	component: page(() => import('./pages/instance-info.vue')),
-}, {
-	name: 'settings',
-	path: '/settings',
-	component: page(() => import('./pages/settings/index.vue')),
-	loginRequired: true,
-	children: [{
-		path: '/profile',
-		name: 'profile',
-		component: page(() => import('./pages/settings/profile.vue')),
-	}, {
-		path: '/avatar-decoration',
-		name: 'avatarDecoration',
-		component: page(() => import('./pages/settings/avatar-decoration.vue')),
-	}, {
-		path: '/roles',
-		name: 'roles',
-		component: page(() => import('./pages/settings/roles.vue')),
-	}, {
-		path: '/privacy',
-		name: 'privacy',
-		component: page(() => import('./pages/settings/privacy.vue')),
-	}, {
-		path: '/emoji-picker',
-		name: 'emojiPicker',
-		component: page(() => import('./pages/settings/emoji-picker.vue')),
-	}, {
-		path: '/drive',
-		name: 'drive',
-		component: page(() => import('./pages/settings/drive.vue')),
-	}, {
-		path: '/drive/cleaner',
-		name: 'drive',
-		component: page(() => import('./pages/settings/drive-cleaner.vue')),
-	}, {
-		path: '/notifications',
-		name: 'notifications',
-		component: page(() => import('./pages/settings/notifications.vue')),
-	}, {
-		path: '/email',
-		name: 'email',
-		component: page(() => import('./pages/settings/email.vue')),
-	}, {
-		path: '/security',
-		name: 'security',
-		component: page(() => import('./pages/settings/security.vue')),
-	}, {
-		path: '/general',
-		name: 'general',
-		component: page(() => import('./pages/settings/general.vue')),
-	}, {
-		path: '/theme/install',
-		name: 'theme',
-		component: page(() => import('./pages/settings/theme.install.vue')),
-	}, {
-		path: '/theme/manage',
-		name: 'theme',
-		component: page(() => import('./pages/settings/theme.manage.vue')),
-	}, {
-		path: '/theme',
-		name: 'theme',
-		component: page(() => import('./pages/settings/theme.vue')),
-	}, {
-		path: '/navbar',
-		name: 'navbar',
-		component: page(() => import('./pages/settings/navbar.vue')),
-	}, {
-		path: '/statusbar',
-		name: 'statusbar',
-		component: page(() => import('./pages/settings/statusbar.vue')),
-	}, {
-		path: '/sounds',
-		name: 'sounds',
-		component: page(() => import('./pages/settings/sounds.vue')),
-	}, {
-		path: '/plugin/install',
-		name: 'plugin',
-		component: page(() => import('./pages/settings/plugin.install.vue')),
-	}, {
-		path: '/plugin',
-		name: 'plugin',
-		component: page(() => import('./pages/settings/plugin.vue')),
-	}, {
-		path: '/import-export',
-		name: 'import-export',
-		component: page(() => import('./pages/settings/import-export.vue')),
-	}, {
-		path: '/mute-block',
-		name: 'mute-block',
-		component: page(() => import('./pages/settings/mute-block.vue')),
-	}, {
-		path: '/api',
-		name: 'api',
-		component: page(() => import('./pages/settings/api.vue')),
-	}, {
-		path: '/apps',
-		name: 'api',
-		component: page(() => import('./pages/settings/apps.vue')),
-	}, {
-		path: '/webhook/edit/:webhookId',
-		name: 'webhook',
-		component: page(() => import('./pages/settings/webhook.edit.vue')),
-	}, {
-		path: '/webhook/new',
-		name: 'webhook',
-		component: page(() => import('./pages/settings/webhook.new.vue')),
-	}, {
-		path: '/webhook',
-		name: 'webhook',
-		component: page(() => import('./pages/settings/webhook.vue')),
-	}, {
-		path: '/deck',
-		name: 'deck',
-		component: page(() => import('./pages/settings/deck.vue')),
-	}, {
-		path: '/preferences-backups',
-		name: 'preferences-backups',
-		component: page(() => import('./pages/settings/preferences-backups.vue')),
-	}, {
-		path: '/migration',
-		name: 'migration',
-		component: page(() => import('./pages/settings/migration.vue')),
-	}, {
-		path: '/custom-css',
-		name: 'general',
-		component: page(() => import('./pages/settings/custom-css.vue')),
-	}, {
-		path: '/accounts',
-		name: 'profile',
-		component: page(() => import('./pages/settings/accounts.vue')),
-	}, {
-		path: '/other',
-		name: 'other',
-		component: page(() => import('./pages/settings/other.vue')),
-	}, {
-		path: '/',
-		component: page(() => import('./pages/_empty_.vue')),
-	}],
-}, {
-	path: '/reset-password/:token?',
-	component: page(() => import('./pages/reset-password.vue')),
-}, {
-	path: '/signup-complete/:code',
-	component: page(() => import('./pages/signup-complete.vue')),
-}, {
-	path: '/announcements',
-	component: page(() => import('./pages/announcements.vue')),
-}, {
-	path: '/about',
-	component: page(() => import('./pages/about.vue')),
-	hash: 'initialTab',
-}, {
-	path: '/about-misskey',
-	component: page(() => import('./pages/about-misskey.vue')),
-}, {
-	path: '/invite',
-	name: 'invite',
-	component: page(() => import('./pages/invite.vue')),
-}, {
-	path: '/ads',
-	component: page(() => import('./pages/ads.vue')),
-}, {
-	path: '/theme-editor',
-	component: page(() => import('./pages/theme-editor.vue')),
-	loginRequired: true,
-}, {
-	path: '/roles/:role',
-	component: page(() => import('./pages/role.vue')),
-}, {
-	path: '/user-tags/:tag',
-	component: page(() => import('./pages/user-tag.vue')),
-}, {
-	path: '/explore',
-	component: page(() => import('./pages/explore.vue')),
-	hash: 'initialTab',
-}, {
-	path: '/search',
-	component: page(() => import('./pages/search.vue')),
-	query: {
-		q: 'query',
-		channel: 'channel',
-		type: 'type',
-		origin: 'origin',
-	},
-}, {
-	path: '/authorize-follow',
-	component: page(() => import('./pages/follow.vue')),
-	loginRequired: true,
-}, {
-	path: '/share',
-	component: page(() => import('./pages/share.vue')),
-	loginRequired: true,
-}, {
-	path: '/api-console',
-	component: page(() => import('./pages/api-console.vue')),
-	loginRequired: true,
-}, {
-	path: '/scratchpad',
-	component: page(() => import('./pages/scratchpad.vue')),
-}, {
-	path: '/auth/:token',
-	component: page(() => import('./pages/auth.vue')),
-}, {
-	path: '/miauth/:session',
-	component: page(() => import('./pages/miauth.vue')),
-	query: {
-		callback: 'callback',
-		name: 'name',
-		icon: 'icon',
-		permission: 'permission',
-	},
-}, {
-	path: '/oauth/authorize',
-	component: page(() => import('./pages/oauth.vue')),
-}, {
-	path: '/tags/:tag',
-	component: page(() => import('./pages/tag.vue')),
-}, {
-	path: '/pages/new',
-	component: page(() => import('./pages/page-editor/page-editor.vue')),
-	loginRequired: true,
-}, {
-	path: '/pages/edit/:initPageId',
-	component: page(() => import('./pages/page-editor/page-editor.vue')),
-	loginRequired: true,
-}, {
-	path: '/pages',
-	component: page(() => import('./pages/pages.vue')),
-}, {
-	path: '/play/:id/edit',
-	component: page(() => import('./pages/flash/flash-edit.vue')),
-	loginRequired: true,
-}, {
-	path: '/play/new',
-	component: page(() => import('./pages/flash/flash-edit.vue')),
-	loginRequired: true,
-}, {
-	path: '/play/:id',
-	component: page(() => import('./pages/flash/flash.vue')),
-}, {
-	path: '/play',
-	component: page(() => import('./pages/flash/flash-index.vue')),
-}, {
-	path: '/gallery/:postId/edit',
-	component: page(() => import('./pages/gallery/edit.vue')),
-	loginRequired: true,
-}, {
-	path: '/gallery/new',
-	component: page(() => import('./pages/gallery/edit.vue')),
-	loginRequired: true,
-}, {
-	path: '/gallery/:postId',
-	component: page(() => import('./pages/gallery/post.vue')),
-}, {
-	path: '/gallery',
-	component: page(() => import('./pages/gallery/index.vue')),
-}, {
-	path: '/channels/:channelId/edit',
-	component: page(() => import('./pages/channel-editor.vue')),
-	loginRequired: true,
-}, {
-	path: '/channels/new',
-	component: page(() => import('./pages/channel-editor.vue')),
-	loginRequired: true,
-}, {
-	path: '/channels/:channelId',
-	component: page(() => import('./pages/channel.vue')),
-}, {
-	path: '/channels',
-	component: page(() => import('./pages/channels.vue')),
-}, {
-	path: '/custom-emojis-manager',
-	component: page(() => import('./pages/custom-emojis-manager.vue')),
-}, {
-	path: '/avatar-decorations',
-	name: 'avatarDecorations',
-	component: page(() => import('./pages/avatar-decorations.vue')),
-}, {
-	path: '/registry/keys/:domain/:path(*)?',
-	component: page(() => import('./pages/registry.keys.vue')),
-}, {
-	path: '/registry/value/:domain/:path(*)?',
-	component: page(() => import('./pages/registry.value.vue')),
-}, {
-	path: '/registry',
-	component: page(() => import('./pages/registry.vue')),
-}, {
-	path: '/install-extentions',
-	component: page(() => import('./pages/install-extentions.vue')),
-	loginRequired: true,
-}, {
-	path: '/admin/user/:userId',
-	component: iAmModerator ? page(() => import('./pages/admin-user.vue')) : page(() => import('./pages/not-found.vue')),
-}, {
-	path: '/admin/file/:fileId',
-	component: iAmModerator ? page(() => import('./pages/admin-file.vue')) : page(() => import('./pages/not-found.vue')),
-}, {
-	path: '/admin',
-	component: iAmModerator ? page(() => import('./pages/admin/index.vue')) : page(() => import('./pages/not-found.vue')),
-	children: [{
-		path: '/overview',
-		name: 'overview',
-		component: page(() => import('./pages/admin/overview.vue')),
-	}, {
-		path: '/users',
-		name: 'users',
-		component: page(() => import('./pages/admin/users.vue')),
-	}, {
-		path: '/emojis',
-		name: 'emojis',
-		component: page(() => import('./pages/custom-emojis-manager.vue')),
-	}, {
-		path: '/avatar-decorations',
-		name: 'avatarDecorations',
-		component: page(() => import('./pages/avatar-decorations.vue')),
-	}, {
-		path: '/queue',
-		name: 'queue',
-		component: page(() => import('./pages/admin/queue.vue')),
-	}, {
-		path: '/files',
-		name: 'files',
-		component: page(() => import('./pages/admin/files.vue')),
-	}, {
-		path: '/federation',
-		name: 'federation',
-		component: page(() => import('./pages/admin/federation.vue')),
-	}, {
-		path: '/announcements',
-		name: 'announcements',
-		component: page(() => import('./pages/admin/announcements.vue')),
-	}, {
-		path: '/ads',
-		name: 'ads',
-		component: page(() => import('./pages/admin/ads.vue')),
-	}, {
-		path: '/roles/:id/edit',
-		name: 'roles',
-		component: page(() => import('./pages/admin/roles.edit.vue')),
-	}, {
-		path: '/roles/new',
-		name: 'roles',
-		component: page(() => import('./pages/admin/roles.edit.vue')),
-	}, {
-		path: '/roles/:id',
-		name: 'roles',
-		component: page(() => import('./pages/admin/roles.role.vue')),
-	}, {
-		path: '/roles',
-		name: 'roles',
-		component: page(() => import('./pages/admin/roles.vue')),
-	}, {
-		path: '/database',
-		name: 'database',
-		component: page(() => import('./pages/admin/database.vue')),
-	}, {
-		path: '/abuses',
-		name: 'abuses',
-		component: page(() => import('./pages/admin/abuses.vue')),
-	}, {
-		path: '/modlog',
-		name: 'modlog',
-		component: page(() => import('./pages/admin/modlog.vue')),
-	}, {
-		path: '/settings',
-		name: 'settings',
-		component: page(() => import('./pages/admin/settings.vue')),
-	}, {
-		path: '/branding',
-		name: 'branding',
-		component: page(() => import('./pages/admin/branding.vue')),
-	}, {
-		path: '/moderation',
-		name: 'moderation',
-		component: page(() => import('./pages/admin/moderation.vue')),
-	}, {
-		path: '/email-settings',
-		name: 'email-settings',
-		component: page(() => import('./pages/admin/email-settings.vue')),
-	}, {
-		path: '/object-storage',
-		name: 'object-storage',
-		component: page(() => import('./pages/admin/object-storage.vue')),
-	}, {
-		path: '/security',
-		name: 'security',
-		component: page(() => import('./pages/admin/security.vue')),
-	}, {
-		path: '/relays',
-		name: 'relays',
-		component: page(() => import('./pages/admin/relays.vue')),
-	}, {
-		path: '/instance-block',
-		name: 'instance-block',
-		component: page(() => import('./pages/admin/instance-block.vue')),
-	}, {
-		path: '/proxy-account',
-		name: 'proxy-account',
-		component: page(() => import('./pages/admin/proxy-account.vue')),
-	}, {
-		path: '/external-services',
-		name: 'external-services',
-		component: page(() => import('./pages/admin/external-services.vue')),
-	}, {
-		path: '/other-settings',
-		name: 'other-settings',
-		component: page(() => import('./pages/admin/other-settings.vue')),
-	}, {
-		path: '/server-rules',
-		name: 'server-rules',
-		component: page(() => import('./pages/admin/server-rules.vue')),
-	}, {
-		path: '/invites',
-		name: 'invites',
-		component: page(() => import('./pages/admin/invites.vue')),
-	}, {
-		path: '/',
-		component: page(() => import('./pages/_empty_.vue')),
-	}],
-}, {
-	path: '/my/notifications',
-	component: page(() => import('./pages/notifications.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/favorites',
-	component: page(() => import('./pages/favorites.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/achievements',
-	component: page(() => import('./pages/achievements.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/drive/folder/:folder',
-	component: page(() => import('./pages/drive.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/drive',
-	component: page(() => import('./pages/drive.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/drive/file/:fileId',
-	component: page(() => import('./pages/drive.file.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/follow-requests',
-	component: page(() => import('./pages/follow-requests.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/lists/:listId',
-	component: page(() => import('./pages/my-lists/list.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/lists',
-	component: page(() => import('./pages/my-lists/index.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/clips',
-	component: page(() => import('./pages/my-clips/index.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/antennas/create',
-	component: page(() => import('./pages/my-antennas/create.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/antennas/:antennaId',
-	component: page(() => import('./pages/my-antennas/edit.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/antennas',
-	component: page(() => import('./pages/my-antennas/index.vue')),
-	loginRequired: true,
-}, {
-	path: '/timeline/list/:listId',
-	component: page(() => import('./pages/user-list-timeline.vue')),
-	loginRequired: true,
-}, {
-	path: '/timeline/antenna/:antennaId',
-	component: page(() => import('./pages/antenna-timeline.vue')),
-	loginRequired: true,
-}, {
-	path: '/clicker',
-	component: page(() => import('./pages/clicker.vue')),
-	loginRequired: true,
-}, {
-	path: '/bubble-game',
-	component: page(() => import('./pages/drop-and-fusion.vue')),
-	loginRequired: true,
-}, {
-	path: '/timeline',
-	component: page(() => import('./pages/timeline.vue')),
-}, {
-	name: 'index',
-	path: '/',
-	component: $i ? page(() => import('./pages/timeline.vue')) : page(() => import('./pages/welcome.vue')),
-	globalCacheKey: 'index',
-}, {
-	path: '/:(*)',
-	component: page(() => import('./pages/not-found.vue')),
-}];
-
-export const mainRouter = new Router(routes, location.pathname + location.search + location.hash, !!$i, page(() => import('@/pages/not-found.vue')));
-
-window.history.replaceState({ key: mainRouter.getCurrentKey() }, '', location.href);
-
-mainRouter.addListener('push', ctx => {
-	window.history.pushState({ key: ctx.key }, '', ctx.path);
-});
-
-window.addEventListener('popstate', (event) => {
-	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key);
-});
-
-export function useRouter(): Router {
-	return inject<Router | null>('router', null) ?? mainRouter;
-}
diff --git a/packages/frontend/src/scripts/get-user-menu.ts b/packages/frontend/src/scripts/get-user-menu.ts
index 2735253b36..d9a52c3741 100644
--- a/packages/frontend/src/scripts/get-user-menu.ts
+++ b/packages/frontend/src/scripts/get-user-menu.ts
@@ -13,11 +13,11 @@ import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore, userActions } from '@/store.js';
 import { $i, iAmModerator } from '@/account.js';
-import { mainRouter } from '@/router.js';
-import { Router } from '@/nirax.js';
+import { IRouter } from '@/nirax.js';
 import { antennasCache, rolesCache, userListsCache } from '@/cache.js';
+import { mainRouter } from '@/global/router/main.js';
 
-export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router = mainRouter) {
+export function getUserMenu(user: Misskey.entities.UserDetailed, router: IRouter = mainRouter) {
 	const meId = $i ? $i.id : null;
 
 	const cleanups = [] as (() => void)[];
diff --git a/packages/frontend/src/scripts/lookup.ts b/packages/frontend/src/scripts/lookup.ts
index ff438af24f..ddcfd8852e 100644
--- a/packages/frontend/src/scripts/lookup.ts
+++ b/packages/frontend/src/scripts/lookup.ts
@@ -6,8 +6,8 @@
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
-import { mainRouter } from '@/router.js';
 import { Router } from '@/nirax.js';
+import { mainRouter } from '@/global/router/main.js';
 
 export async function lookup(router?: Router) {
 	const _router = router ?? mainRouter;
diff --git a/packages/frontend/src/ui/_common_/sw-inject.ts b/packages/frontend/src/ui/_common_/sw-inject.ts
index 504484f8de..4c77465eb1 100644
--- a/packages/frontend/src/ui/_common_/sw-inject.ts
+++ b/packages/frontend/src/ui/_common_/sw-inject.ts
@@ -7,8 +7,8 @@ import { post } from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { $i, login } from '@/account.js';
 import { getAccountFromId } from '@/scripts/get-account-from-id.js';
-import { mainRouter } from '@/router.js';
 import { deepClone } from '@/scripts/clone.js';
+import { mainRouter } from '@/global/router/main.js';
 
 export function swInject() {
 	navigator.serviceWorker.addEventListener('message', async ev => {
diff --git a/packages/frontend/src/ui/classic.vue b/packages/frontend/src/ui/classic.vue
index e0985fdb11..fdddc0bb69 100644
--- a/packages/frontend/src/ui/classic.vue
+++ b/packages/frontend/src/ui/classic.vue
@@ -52,11 +52,11 @@ import XCommon from './_common_/common.vue';
 import { instanceName } from '@/config.js';
 import { StickySidebar } from '@/scripts/sticky-sidebar.js';
 import * as os from '@/os.js';
-import { mainRouter } from '@/router.js';
 import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { miLocalStorage } from '@/local-storage.js';
+import { mainRouter } from '@/global/router/main.js';
 const XHeaderMenu = defineAsyncComponent(() => import('./classic.header.vue'));
 const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
 
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index d184764b82..304ebbf0b2 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -103,7 +103,6 @@ import * as os from '@/os.js';
 import { navbarItemDef } from '@/navbar.js';
 import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
-import { mainRouter } from '@/router.js';
 import { unisonReload } from '@/scripts/unison-reload.js';
 import { deviceKind } from '@/scripts/device-kind.js';
 import { defaultStore } from '@/store.js';
@@ -117,6 +116,7 @@ import XWidgetsColumn from '@/ui/deck/widgets-column.vue';
 import XMentionsColumn from '@/ui/deck/mentions-column.vue';
 import XDirectColumn from '@/ui/deck/direct-column.vue';
 import XRoleTimelineColumn from '@/ui/deck/role-timeline-column.vue';
+import { mainRouter } from '@/global/router/main.js';
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
 const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
 
diff --git a/packages/frontend/src/ui/deck/main-column.vue b/packages/frontend/src/ui/deck/main-column.vue
index c2b8f19079..674132e0d7 100644
--- a/packages/frontend/src/ui/deck/main-column.vue
+++ b/packages/frontend/src/ui/deck/main-column.vue
@@ -24,10 +24,10 @@ import XColumn from './column.vue';
 import { deckStore, Column } from '@/ui/deck/deck-store.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
-import { mainRouter } from '@/router.js';
 import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
 import { useScrollPositionManager } from '@/nirax.js';
 import { getScrollContainer } from '@/scripts/scroll.js';
+import { mainRouter } from '@/global/router/main.js';
 
 defineProps<{
 	column: Column;
diff --git a/packages/frontend/src/ui/minimum.vue b/packages/frontend/src/ui/minimum.vue
index f32f2de3df..b0a2aa35f9 100644
--- a/packages/frontend/src/ui/minimum.vue
+++ b/packages/frontend/src/ui/minimum.vue
@@ -16,9 +16,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { provide, ComputedRef, ref } from 'vue';
 import XCommon from './_common_/common.vue';
-import { mainRouter } from '@/router.js';
 import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
 import { instanceName } from '@/config.js';
+import { mainRouter } from '@/global/router/main.js';
 
 const pageMetadata = ref<null | ComputedRef<PageMetadata>>();
 
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index f46f55d988..6f13f3fe87 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -105,12 +105,12 @@ import { defaultStore } from '@/store.js';
 import { navbarItemDef } from '@/navbar.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
-import { mainRouter } from '@/router.js';
 import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
 import { deviceKind } from '@/scripts/device-kind.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { CURRENT_STICKY_BOTTOM } from '@/const.js';
 import { useScrollPositionManager } from '@/nirax.js';
+import { mainRouter } from '@/global/router/main.js';
 
 const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
 const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
diff --git a/packages/frontend/src/ui/visitor.vue b/packages/frontend/src/ui/visitor.vue
index 5af6bc30a8..d97c786d4a 100644
--- a/packages/frontend/src/ui/visitor.vue
+++ b/packages/frontend/src/ui/visitor.vue
@@ -79,10 +79,10 @@ import { instance } from '@/instance.js';
 import XSigninDialog from '@/components/MkSigninDialog.vue';
 import XSignupDialog from '@/components/MkSignupDialog.vue';
 import { ColdDeviceStorage, defaultStore } from '@/store.js';
-import { mainRouter } from '@/router.js';
 import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import MkVisitorDashboard from '@/components/MkVisitorDashboard.vue';
+import { mainRouter } from '@/global/router/main.js';
 
 const DESKTOP_THRESHOLD = 1100;
 
diff --git a/packages/frontend/src/ui/zen.vue b/packages/frontend/src/ui/zen.vue
index b819b6ca0a..957044c52b 100644
--- a/packages/frontend/src/ui/zen.vue
+++ b/packages/frontend/src/ui/zen.vue
@@ -24,10 +24,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { provide, ComputedRef, ref } from 'vue';
 import XCommon from './_common_/common.vue';
-import { mainRouter } from '@/router.js';
 import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata.js';
 import { instanceName, ui } from '@/config.js';
 import { i18n } from '@/i18n.js';
+import { mainRouter } from '@/global/router/main.js';
 
 const pageMetadata = ref<null | ComputedRef<PageMetadata>>();
 
-- 
cgit v1.2.3-freya