From cf33e483f7e6f40e8cbbbc0118a7df70bdaf651f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 29 Mar 2018 20:32:18 +0900
Subject: 整理した
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/desktop/api/choose-drive-file.ts    |  30 +
 src/client/app/desktop/api/choose-drive-folder.ts  |  17 +
 src/client/app/desktop/api/contextmenu.ts          |  16 +
 src/client/app/desktop/api/dialog.ts               |  19 +
 src/client/app/desktop/api/input.ts                |  20 +
 src/client/app/desktop/api/notify.ts               |  10 +
 src/client/app/desktop/api/post.ts                 |  21 +
 src/client/app/desktop/api/update-avatar.ts        |  98 +++
 src/client/app/desktop/api/update-banner.ts        |  98 +++
 src/client/app/desktop/assets/grid.svg             | 150 ++++
 .../app/desktop/assets/header-logo-white.svg       |  25 +
 src/client/app/desktop/assets/header-logo.svg      |  25 +
 src/client/app/desktop/assets/index.jpg            | Bin 0 -> 410409 bytes
 src/client/app/desktop/assets/remove.png           | Bin 0 -> 3115 bytes
 src/client/app/desktop/script.ts                   | 167 +++++
 src/client/app/desktop/style.styl                  |  50 ++
 src/client/app/desktop/ui.styl                     | 125 ++++
 .../desktop/views/components/activity.calendar.vue |  66 ++
 .../desktop/views/components/activity.chart.vue    | 103 +++
 .../app/desktop/views/components/activity.vue      | 116 ++++
 .../app/desktop/views/components/analog-clock.vue  | 108 +++
 .../app/desktop/views/components/calendar.vue      | 252 +++++++
 .../components/choose-file-from-drive-window.vue   | 180 +++++
 .../components/choose-folder-from-drive-window.vue | 114 +++
 .../desktop/views/components/context-menu.menu.vue | 121 ++++
 .../app/desktop/views/components/context-menu.vue  |  74 ++
 .../app/desktop/views/components/crop-window.vue   | 178 +++++
 src/client/app/desktop/views/components/dialog.vue | 170 +++++
 .../app/desktop/views/components/drive-window.vue  |  56 ++
 .../app/desktop/views/components/drive.file.vue    | 317 +++++++++
 .../app/desktop/views/components/drive.folder.vue  | 267 +++++++
 .../desktop/views/components/drive.nav-folder.vue  | 113 +++
 src/client/app/desktop/views/components/drive.vue  | 773 +++++++++++++++++++++
 .../app/desktop/views/components/ellipsis-icon.vue |  37 +
 .../app/desktop/views/components/follow-button.vue | 164 +++++
 .../desktop/views/components/followers-window.vue  |  26 +
 .../app/desktop/views/components/followers.vue     |  26 +
 .../desktop/views/components/following-window.vue  |  26 +
 .../app/desktop/views/components/following.vue     |  26 +
 .../app/desktop/views/components/friends-maker.vue | 171 +++++
 .../app/desktop/views/components/game-window.vue   |  37 +
 src/client/app/desktop/views/components/home.vue   | 357 ++++++++++
 src/client/app/desktop/views/components/index.ts   |  61 ++
 .../app/desktop/views/components/input-dialog.vue  | 180 +++++
 .../views/components/media-image-dialog.vue        |  69 ++
 .../app/desktop/views/components/media-image.vue   |  63 ++
 .../views/components/media-video-dialog.vue        |  70 ++
 .../app/desktop/views/components/media-video.vue   |  67 ++
 .../app/desktop/views/components/mentions.vue      | 125 ++++
 .../views/components/messaging-room-window.vue     |  32 +
 .../desktop/views/components/messaging-window.vue  |  32 +
 .../app/desktop/views/components/notifications.vue | 317 +++++++++
 .../desktop/views/components/post-detail.sub.vue   | 126 ++++
 .../app/desktop/views/components/post-detail.vue   | 433 ++++++++++++
 .../desktop/views/components/post-form-window.vue  |  76 ++
 .../app/desktop/views/components/post-form.vue     | 536 ++++++++++++++
 .../app/desktop/views/components/post-preview.vue  | 103 +++
 .../desktop/views/components/posts.post.sub.vue    | 112 +++
 .../app/desktop/views/components/posts.post.vue    | 582 ++++++++++++++++
 src/client/app/desktop/views/components/posts.vue  |  89 +++
 .../desktop/views/components/progress-dialog.vue   |  95 +++
 .../views/components/repost-form-window.vue        |  42 ++
 .../app/desktop/views/components/repost-form.vue   | 131 ++++
 .../desktop/views/components/settings-window.vue   |  24 +
 .../app/desktop/views/components/settings.2fa.vue  |  80 +++
 .../app/desktop/views/components/settings.api.vue  |  40 ++
 .../app/desktop/views/components/settings.apps.vue |  39 ++
 .../desktop/views/components/settings.drive.vue    |  35 +
 .../app/desktop/views/components/settings.mute.vue |  35 +
 .../desktop/views/components/settings.password.vue |  47 ++
 .../desktop/views/components/settings.profile.vue  |  87 +++
 .../desktop/views/components/settings.signins.vue  |  98 +++
 .../app/desktop/views/components/settings.vue      | 419 +++++++++++
 .../desktop/views/components/sub-post-content.vue  |  56 ++
 .../app/desktop/views/components/taskmanager.vue   | 219 ++++++
 .../app/desktop/views/components/timeline.vue      | 156 +++++
 .../desktop/views/components/ui-notification.vue   |  61 ++
 .../desktop/views/components/ui.header.account.vue | 225 ++++++
 .../desktop/views/components/ui.header.clock.vue   | 109 +++
 .../app/desktop/views/components/ui.header.nav.vue | 175 +++++
 .../views/components/ui.header.notifications.vue   | 158 +++++
 .../desktop/views/components/ui.header.post.vue    |  54 ++
 .../desktop/views/components/ui.header.search.vue  |  70 ++
 .../app/desktop/views/components/ui.header.vue     | 172 +++++
 src/client/app/desktop/views/components/ui.vue     |  37 +
 .../app/desktop/views/components/user-preview.vue  | 173 +++++
 .../desktop/views/components/users-list.item.vue   | 107 +++
 .../app/desktop/views/components/users-list.vue    | 143 ++++
 .../desktop/views/components/widget-container.vue  |  85 +++
 src/client/app/desktop/views/components/window.vue | 635 +++++++++++++++++
 src/client/app/desktop/views/directives/index.ts   |   6 +
 .../app/desktop/views/directives/user-preview.ts   |  72 ++
 src/client/app/desktop/views/pages/drive.vue       |  52 ++
 .../app/desktop/views/pages/home-customize.vue     |  12 +
 src/client/app/desktop/views/pages/home.vue        |  62 ++
 src/client/app/desktop/views/pages/index.vue       |  16 +
 .../app/desktop/views/pages/messaging-room.vue     |  54 ++
 src/client/app/desktop/views/pages/othello.vue     |  50 ++
 src/client/app/desktop/views/pages/post.vue        |  67 ++
 src/client/app/desktop/views/pages/search.vue      | 138 ++++
 src/client/app/desktop/views/pages/selectdrive.vue | 177 +++++
 .../views/pages/user/user.followers-you-know.vue   |  84 +++
 .../app/desktop/views/pages/user/user.friends.vue  | 124 ++++
 .../app/desktop/views/pages/user/user.header.vue   | 196 ++++++
 .../app/desktop/views/pages/user/user.home.vue     | 103 +++
 .../app/desktop/views/pages/user/user.photos.vue   |  88 +++
 .../app/desktop/views/pages/user/user.profile.vue  | 138 ++++
 .../app/desktop/views/pages/user/user.timeline.vue | 139 ++++
 src/client/app/desktop/views/pages/user/user.vue   |  53 ++
 src/client/app/desktop/views/pages/welcome.vue     | 319 +++++++++
 src/client/app/desktop/views/widgets/activity.vue  |  31 +
 .../desktop/views/widgets/channel.channel.form.vue |  67 ++
 .../desktop/views/widgets/channel.channel.post.vue |  71 ++
 .../app/desktop/views/widgets/channel.channel.vue  | 106 +++
 src/client/app/desktop/views/widgets/channel.vue   | 107 +++
 src/client/app/desktop/views/widgets/index.ts      |  23 +
 src/client/app/desktop/views/widgets/messaging.vue |  59 ++
 .../app/desktop/views/widgets/notifications.vue    |  70 ++
 src/client/app/desktop/views/widgets/polls.vue     | 129 ++++
 src/client/app/desktop/views/widgets/post-form.vue | 111 +++
 src/client/app/desktop/views/widgets/profile.vue   | 125 ++++
 .../app/desktop/views/widgets/timemachine.vue      |  28 +
 src/client/app/desktop/views/widgets/trends.vue    | 135 ++++
 src/client/app/desktop/views/widgets/users.vue     | 172 +++++
 124 files changed, 14813 insertions(+)
 create mode 100644 src/client/app/desktop/api/choose-drive-file.ts
 create mode 100644 src/client/app/desktop/api/choose-drive-folder.ts
 create mode 100644 src/client/app/desktop/api/contextmenu.ts
 create mode 100644 src/client/app/desktop/api/dialog.ts
 create mode 100644 src/client/app/desktop/api/input.ts
 create mode 100644 src/client/app/desktop/api/notify.ts
 create mode 100644 src/client/app/desktop/api/post.ts
 create mode 100644 src/client/app/desktop/api/update-avatar.ts
 create mode 100644 src/client/app/desktop/api/update-banner.ts
 create mode 100644 src/client/app/desktop/assets/grid.svg
 create mode 100644 src/client/app/desktop/assets/header-logo-white.svg
 create mode 100644 src/client/app/desktop/assets/header-logo.svg
 create mode 100644 src/client/app/desktop/assets/index.jpg
 create mode 100644 src/client/app/desktop/assets/remove.png
 create mode 100644 src/client/app/desktop/script.ts
 create mode 100644 src/client/app/desktop/style.styl
 create mode 100644 src/client/app/desktop/ui.styl
 create mode 100644 src/client/app/desktop/views/components/activity.calendar.vue
 create mode 100644 src/client/app/desktop/views/components/activity.chart.vue
 create mode 100644 src/client/app/desktop/views/components/activity.vue
 create mode 100644 src/client/app/desktop/views/components/analog-clock.vue
 create mode 100644 src/client/app/desktop/views/components/calendar.vue
 create mode 100644 src/client/app/desktop/views/components/choose-file-from-drive-window.vue
 create mode 100644 src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
 create mode 100644 src/client/app/desktop/views/components/context-menu.menu.vue
 create mode 100644 src/client/app/desktop/views/components/context-menu.vue
 create mode 100644 src/client/app/desktop/views/components/crop-window.vue
 create mode 100644 src/client/app/desktop/views/components/dialog.vue
 create mode 100644 src/client/app/desktop/views/components/drive-window.vue
 create mode 100644 src/client/app/desktop/views/components/drive.file.vue
 create mode 100644 src/client/app/desktop/views/components/drive.folder.vue
 create mode 100644 src/client/app/desktop/views/components/drive.nav-folder.vue
 create mode 100644 src/client/app/desktop/views/components/drive.vue
 create mode 100644 src/client/app/desktop/views/components/ellipsis-icon.vue
 create mode 100644 src/client/app/desktop/views/components/follow-button.vue
 create mode 100644 src/client/app/desktop/views/components/followers-window.vue
 create mode 100644 src/client/app/desktop/views/components/followers.vue
 create mode 100644 src/client/app/desktop/views/components/following-window.vue
 create mode 100644 src/client/app/desktop/views/components/following.vue
 create mode 100644 src/client/app/desktop/views/components/friends-maker.vue
 create mode 100644 src/client/app/desktop/views/components/game-window.vue
 create mode 100644 src/client/app/desktop/views/components/home.vue
 create mode 100644 src/client/app/desktop/views/components/index.ts
 create mode 100644 src/client/app/desktop/views/components/input-dialog.vue
 create mode 100644 src/client/app/desktop/views/components/media-image-dialog.vue
 create mode 100644 src/client/app/desktop/views/components/media-image.vue
 create mode 100644 src/client/app/desktop/views/components/media-video-dialog.vue
 create mode 100644 src/client/app/desktop/views/components/media-video.vue
 create mode 100644 src/client/app/desktop/views/components/mentions.vue
 create mode 100644 src/client/app/desktop/views/components/messaging-room-window.vue
 create mode 100644 src/client/app/desktop/views/components/messaging-window.vue
 create mode 100644 src/client/app/desktop/views/components/notifications.vue
 create mode 100644 src/client/app/desktop/views/components/post-detail.sub.vue
 create mode 100644 src/client/app/desktop/views/components/post-detail.vue
 create mode 100644 src/client/app/desktop/views/components/post-form-window.vue
 create mode 100644 src/client/app/desktop/views/components/post-form.vue
 create mode 100644 src/client/app/desktop/views/components/post-preview.vue
 create mode 100644 src/client/app/desktop/views/components/posts.post.sub.vue
 create mode 100644 src/client/app/desktop/views/components/posts.post.vue
 create mode 100644 src/client/app/desktop/views/components/posts.vue
 create mode 100644 src/client/app/desktop/views/components/progress-dialog.vue
 create mode 100644 src/client/app/desktop/views/components/repost-form-window.vue
 create mode 100644 src/client/app/desktop/views/components/repost-form.vue
 create mode 100644 src/client/app/desktop/views/components/settings-window.vue
 create mode 100644 src/client/app/desktop/views/components/settings.2fa.vue
 create mode 100644 src/client/app/desktop/views/components/settings.api.vue
 create mode 100644 src/client/app/desktop/views/components/settings.apps.vue
 create mode 100644 src/client/app/desktop/views/components/settings.drive.vue
 create mode 100644 src/client/app/desktop/views/components/settings.mute.vue
 create mode 100644 src/client/app/desktop/views/components/settings.password.vue
 create mode 100644 src/client/app/desktop/views/components/settings.profile.vue
 create mode 100644 src/client/app/desktop/views/components/settings.signins.vue
 create mode 100644 src/client/app/desktop/views/components/settings.vue
 create mode 100644 src/client/app/desktop/views/components/sub-post-content.vue
 create mode 100644 src/client/app/desktop/views/components/taskmanager.vue
 create mode 100644 src/client/app/desktop/views/components/timeline.vue
 create mode 100644 src/client/app/desktop/views/components/ui-notification.vue
 create mode 100644 src/client/app/desktop/views/components/ui.header.account.vue
 create mode 100644 src/client/app/desktop/views/components/ui.header.clock.vue
 create mode 100644 src/client/app/desktop/views/components/ui.header.nav.vue
 create mode 100644 src/client/app/desktop/views/components/ui.header.notifications.vue
 create mode 100644 src/client/app/desktop/views/components/ui.header.post.vue
 create mode 100644 src/client/app/desktop/views/components/ui.header.search.vue
 create mode 100644 src/client/app/desktop/views/components/ui.header.vue
 create mode 100644 src/client/app/desktop/views/components/ui.vue
 create mode 100644 src/client/app/desktop/views/components/user-preview.vue
 create mode 100644 src/client/app/desktop/views/components/users-list.item.vue
 create mode 100644 src/client/app/desktop/views/components/users-list.vue
 create mode 100644 src/client/app/desktop/views/components/widget-container.vue
 create mode 100644 src/client/app/desktop/views/components/window.vue
 create mode 100644 src/client/app/desktop/views/directives/index.ts
 create mode 100644 src/client/app/desktop/views/directives/user-preview.ts
 create mode 100644 src/client/app/desktop/views/pages/drive.vue
 create mode 100644 src/client/app/desktop/views/pages/home-customize.vue
 create mode 100644 src/client/app/desktop/views/pages/home.vue
 create mode 100644 src/client/app/desktop/views/pages/index.vue
 create mode 100644 src/client/app/desktop/views/pages/messaging-room.vue
 create mode 100644 src/client/app/desktop/views/pages/othello.vue
 create mode 100644 src/client/app/desktop/views/pages/post.vue
 create mode 100644 src/client/app/desktop/views/pages/search.vue
 create mode 100644 src/client/app/desktop/views/pages/selectdrive.vue
 create mode 100644 src/client/app/desktop/views/pages/user/user.followers-you-know.vue
 create mode 100644 src/client/app/desktop/views/pages/user/user.friends.vue
 create mode 100644 src/client/app/desktop/views/pages/user/user.header.vue
 create mode 100644 src/client/app/desktop/views/pages/user/user.home.vue
 create mode 100644 src/client/app/desktop/views/pages/user/user.photos.vue
 create mode 100644 src/client/app/desktop/views/pages/user/user.profile.vue
 create mode 100644 src/client/app/desktop/views/pages/user/user.timeline.vue
 create mode 100644 src/client/app/desktop/views/pages/user/user.vue
 create mode 100644 src/client/app/desktop/views/pages/welcome.vue
 create mode 100644 src/client/app/desktop/views/widgets/activity.vue
 create mode 100644 src/client/app/desktop/views/widgets/channel.channel.form.vue
 create mode 100644 src/client/app/desktop/views/widgets/channel.channel.post.vue
 create mode 100644 src/client/app/desktop/views/widgets/channel.channel.vue
 create mode 100644 src/client/app/desktop/views/widgets/channel.vue
 create mode 100644 src/client/app/desktop/views/widgets/index.ts
 create mode 100644 src/client/app/desktop/views/widgets/messaging.vue
 create mode 100644 src/client/app/desktop/views/widgets/notifications.vue
 create mode 100644 src/client/app/desktop/views/widgets/polls.vue
 create mode 100644 src/client/app/desktop/views/widgets/post-form.vue
 create mode 100644 src/client/app/desktop/views/widgets/profile.vue
 create mode 100644 src/client/app/desktop/views/widgets/timemachine.vue
 create mode 100644 src/client/app/desktop/views/widgets/trends.vue
 create mode 100644 src/client/app/desktop/views/widgets/users.vue

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/desktop/api/choose-drive-file.ts b/src/client/app/desktop/api/choose-drive-file.ts
new file mode 100644
index 0000000000..fbda600e6e
--- /dev/null
+++ b/src/client/app/desktop/api/choose-drive-file.ts
@@ -0,0 +1,30 @@
+import { url } from '../../config';
+import MkChooseFileFromDriveWindow from '../views/components/choose-file-from-drive-window.vue';
+
+export default function(opts) {
+	return new Promise((res, rej) => {
+		const o = opts || {};
+
+		if (document.body.clientWidth > 800) {
+			const w = new MkChooseFileFromDriveWindow({
+				propsData: {
+					title: o.title,
+					multiple: o.multiple,
+					initFolder: o.currentFolder
+				}
+			}).$mount();
+			w.$once('selected', file => {
+				res(file);
+			});
+			document.body.appendChild(w.$el);
+		} else {
+			window['cb'] = file => {
+				res(file);
+			};
+
+			window.open(url + '/selectdrive',
+				'choose_drive_window',
+				'height=500, width=800');
+		}
+	});
+}
diff --git a/src/client/app/desktop/api/choose-drive-folder.ts b/src/client/app/desktop/api/choose-drive-folder.ts
new file mode 100644
index 0000000000..9b33a20d9a
--- /dev/null
+++ b/src/client/app/desktop/api/choose-drive-folder.ts
@@ -0,0 +1,17 @@
+import MkChooseFolderFromDriveWindow from '../views/components/choose-folder-from-drive-window.vue';
+
+export default function(opts) {
+	return new Promise((res, rej) => {
+		const o = opts || {};
+		const w = new MkChooseFolderFromDriveWindow({
+			propsData: {
+				title: o.title,
+				initFolder: o.currentFolder
+			}
+		}).$mount();
+		w.$once('selected', folder => {
+			res(folder);
+		});
+		document.body.appendChild(w.$el);
+	});
+}
diff --git a/src/client/app/desktop/api/contextmenu.ts b/src/client/app/desktop/api/contextmenu.ts
new file mode 100644
index 0000000000..b70d7122d3
--- /dev/null
+++ b/src/client/app/desktop/api/contextmenu.ts
@@ -0,0 +1,16 @@
+import Ctx from '../views/components/context-menu.vue';
+
+export default function(e, menu, opts?) {
+	const o = opts || {};
+	const vm = new Ctx({
+		propsData: {
+			menu,
+			x: e.pageX - window.pageXOffset,
+			y: e.pageY - window.pageYOffset,
+		}
+	}).$mount();
+	vm.$once('closed', () => {
+		if (o.closed) o.closed();
+	});
+	document.body.appendChild(vm.$el);
+}
diff --git a/src/client/app/desktop/api/dialog.ts b/src/client/app/desktop/api/dialog.ts
new file mode 100644
index 0000000000..07935485b0
--- /dev/null
+++ b/src/client/app/desktop/api/dialog.ts
@@ -0,0 +1,19 @@
+import Dialog from '../views/components/dialog.vue';
+
+export default function(opts) {
+	return new Promise<string>((res, rej) => {
+		const o = opts || {};
+		const d = new Dialog({
+			propsData: {
+				title: o.title,
+				text: o.text,
+				modal: o.modal,
+				buttons: o.actions
+			}
+		}).$mount();
+		d.$once('clicked', id => {
+			res(id);
+		});
+		document.body.appendChild(d.$el);
+	});
+}
diff --git a/src/client/app/desktop/api/input.ts b/src/client/app/desktop/api/input.ts
new file mode 100644
index 0000000000..ce26a8112f
--- /dev/null
+++ b/src/client/app/desktop/api/input.ts
@@ -0,0 +1,20 @@
+import InputDialog from '../views/components/input-dialog.vue';
+
+export default function(opts) {
+	return new Promise<string>((res, rej) => {
+		const o = opts || {};
+		const d = new InputDialog({
+			propsData: {
+				title: o.title,
+				placeholder: o.placeholder,
+				default: o.default,
+				type: o.type || 'text',
+				allowEmpty: o.allowEmpty
+			}
+		}).$mount();
+		d.$once('done', text => {
+			res(text);
+		});
+		document.body.appendChild(d.$el);
+	});
+}
diff --git a/src/client/app/desktop/api/notify.ts b/src/client/app/desktop/api/notify.ts
new file mode 100644
index 0000000000..1f89f40ce6
--- /dev/null
+++ b/src/client/app/desktop/api/notify.ts
@@ -0,0 +1,10 @@
+import Notification from '../views/components/ui-notification.vue';
+
+export default function(message) {
+	const vm = new Notification({
+		propsData: {
+			message
+		}
+	}).$mount();
+	document.body.appendChild(vm.$el);
+}
diff --git a/src/client/app/desktop/api/post.ts b/src/client/app/desktop/api/post.ts
new file mode 100644
index 0000000000..cf49615df3
--- /dev/null
+++ b/src/client/app/desktop/api/post.ts
@@ -0,0 +1,21 @@
+import PostFormWindow from '../views/components/post-form-window.vue';
+import RepostFormWindow from '../views/components/repost-form-window.vue';
+
+export default function(opts) {
+	const o = opts || {};
+	if (o.repost) {
+		const vm = new RepostFormWindow({
+			propsData: {
+				repost: o.repost
+			}
+		}).$mount();
+		document.body.appendChild(vm.$el);
+	} else {
+		const vm = new PostFormWindow({
+			propsData: {
+				reply: o.reply
+			}
+		}).$mount();
+		document.body.appendChild(vm.$el);
+	}
+}
diff --git a/src/client/app/desktop/api/update-avatar.ts b/src/client/app/desktop/api/update-avatar.ts
new file mode 100644
index 0000000000..36a2ffe914
--- /dev/null
+++ b/src/client/app/desktop/api/update-avatar.ts
@@ -0,0 +1,98 @@
+import OS from '../../common/mios';
+import { apiUrl } from '../../config';
+import CropWindow from '../views/components/crop-window.vue';
+import ProgressDialog from '../views/components/progress-dialog.vue';
+
+export default (os: OS) => (cb, file = null) => {
+	const fileSelected = file => {
+
+		const w = new CropWindow({
+			propsData: {
+				image: file,
+				title: 'アバターとして表示する部分を選択',
+				aspectRatio: 1 / 1
+			}
+		}).$mount();
+
+		w.$once('cropped', blob => {
+			const data = new FormData();
+			data.append('i', os.i.account.token);
+			data.append('file', blob, file.name + '.cropped.png');
+
+			os.api('drive/folders/find', {
+				name: 'アイコン'
+			}).then(iconFolder => {
+				if (iconFolder.length === 0) {
+					os.api('drive/folders/create', {
+						name: 'アイコン'
+					}).then(iconFolder => {
+						upload(data, iconFolder);
+					});
+				} else {
+					upload(data, iconFolder[0]);
+				}
+			});
+		});
+
+		w.$once('skipped', () => {
+			set(file);
+		});
+
+		document.body.appendChild(w.$el);
+	};
+
+	const upload = (data, folder) => {
+		const dialog = new ProgressDialog({
+			propsData: {
+				title: '新しいアバターをアップロードしています'
+			}
+		}).$mount();
+		document.body.appendChild(dialog.$el);
+
+		if (folder) data.append('folderId', folder.id);
+
+		const xhr = new XMLHttpRequest();
+		xhr.open('POST', apiUrl + '/drive/files/create', true);
+		xhr.onload = e => {
+			const file = JSON.parse((e.target as any).response);
+			(dialog as any).close();
+			set(file);
+		};
+
+		xhr.upload.onprogress = e => {
+			if (e.lengthComputable) (dialog as any).update(e.loaded, e.total);
+		};
+
+		xhr.send(data);
+	};
+
+	const set = file => {
+		os.api('i/update', {
+			avatarId: file.id
+		}).then(i => {
+			os.i.avatarId = i.avatarId;
+			os.i.avatarUrl = i.avatarUrl;
+
+			os.apis.dialog({
+				title: '%fa:info-circle%アバターを更新しました',
+				text: '新しいアバターが反映されるまで時間がかかる場合があります。',
+				actions: [{
+					text: 'わかった'
+				}]
+			});
+
+			if (cb) cb(i);
+		});
+	};
+
+	if (file) {
+		fileSelected(file);
+	} else {
+		os.apis.chooseDriveFile({
+			multiple: false,
+			title: '%fa:image%アバターにする画像を選択'
+		}).then(file => {
+			fileSelected(file);
+		});
+	}
+};
diff --git a/src/client/app/desktop/api/update-banner.ts b/src/client/app/desktop/api/update-banner.ts
new file mode 100644
index 0000000000..e66dbf016b
--- /dev/null
+++ b/src/client/app/desktop/api/update-banner.ts
@@ -0,0 +1,98 @@
+import OS from '../../common/mios';
+import { apiUrl } from '../../config';
+import CropWindow from '../views/components/crop-window.vue';
+import ProgressDialog from '../views/components/progress-dialog.vue';
+
+export default (os: OS) => (cb, file = null) => {
+	const fileSelected = file => {
+
+		const w = new CropWindow({
+			propsData: {
+				image: file,
+				title: 'バナーとして表示する部分を選択',
+				aspectRatio: 16 / 9
+			}
+		}).$mount();
+
+		w.$once('cropped', blob => {
+			const data = new FormData();
+			data.append('i', os.i.account.token);
+			data.append('file', blob, file.name + '.cropped.png');
+
+			os.api('drive/folders/find', {
+				name: 'バナー'
+			}).then(bannerFolder => {
+				if (bannerFolder.length === 0) {
+					os.api('drive/folders/create', {
+						name: 'バナー'
+					}).then(iconFolder => {
+						upload(data, iconFolder);
+					});
+				} else {
+					upload(data, bannerFolder[0]);
+				}
+			});
+		});
+
+		w.$once('skipped', () => {
+			set(file);
+		});
+
+		document.body.appendChild(w.$el);
+	};
+
+	const upload = (data, folder) => {
+		const dialog = new ProgressDialog({
+			propsData: {
+				title: '新しいバナーをアップロードしています'
+			}
+		}).$mount();
+		document.body.appendChild(dialog.$el);
+
+		if (folder) data.append('folderId', folder.id);
+
+		const xhr = new XMLHttpRequest();
+		xhr.open('POST', apiUrl + '/drive/files/create', true);
+		xhr.onload = e => {
+			const file = JSON.parse((e.target as any).response);
+			(dialog as any).close();
+			set(file);
+		};
+
+		xhr.upload.onprogress = e => {
+			if (e.lengthComputable) (dialog as any).update(e.loaded, e.total);
+		};
+
+		xhr.send(data);
+	};
+
+	const set = file => {
+		os.api('i/update', {
+			bannerId: file.id
+		}).then(i => {
+			os.i.bannerId = i.bannerId;
+			os.i.bannerUrl = i.bannerUrl;
+
+			os.apis.dialog({
+				title: '%fa:info-circle%バナーを更新しました',
+				text: '新しいバナーが反映されるまで時間がかかる場合があります。',
+				actions: [{
+					text: 'わかった'
+				}]
+			});
+
+			if (cb) cb(i);
+		});
+	};
+
+	if (file) {
+		fileSelected(file);
+	} else {
+		os.apis.chooseDriveFile({
+			multiple: false,
+			title: '%fa:image%バナーにする画像を選択'
+		}).then(file => {
+			fileSelected(file);
+		});
+	}
+};
diff --git a/src/client/app/desktop/assets/grid.svg b/src/client/app/desktop/assets/grid.svg
new file mode 100644
index 0000000000..d1d72cd8ce
--- /dev/null
+++ b/src/client/app/desktop/assets/grid.svg
@@ -0,0 +1,150 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32"
+   height="32"
+   viewBox="0 0 8.4666665 8.4666669"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="grid.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.4"
+     inkscape:cx="14.687499"
+     inkscape:cy="14.558219"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="1072"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3680"
+       empspacing="8"
+       empcolor="#ff3fff"
+       empopacity="0.41176471" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="レイヤー 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-288.53331)">
+    <path
+       style="fill:#000000;fill-opacity:0.05;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 0,296.99998 v -8.46667 h 8.4666666 l 10e-8,0.26458 H 0.26458333 l 0,8.20209 z"
+       id="path3684"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <path
+       style="fill:#000000;fill-opacity:0.05;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 4.2333334,292.23748 h 0.2645833 v 0.52916 h 0.5291667 l 0,0.26459 H 4.4979167 v 0.52917 H 4.2333334 v -0.52917 H 3.7041667 l 0,-0.26459 h 0.5291667 z"
+       id="path4491"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccccccccc" />
+    <path
+       style="fill:#000000;fill-opacity:0.05;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 3.4395833,292.76664 0,0.26459 H 2.38125 l 0,-0.26459 z"
+       id="path4493"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="fill:#000000;fill-opacity:0.05;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 6.3499999,292.76664 10e-8,0.26459 H 5.2916667 l -1e-7,-0.26459 z"
+       id="path4493-2"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="fill:#000000;fill-opacity:0.05;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 7.6729167,292.76664 v 0.26459 H 6.6145834 v -0.26459 z"
+       id="path4493-6"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="fill:#000000;fill-opacity:0.05;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 2.1166666,292.76664 1e-7,0.26459 H 1.0583334 l -1e-7,-0.26459 z"
+       id="path4493-1"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="fill:#000000;fill-opacity:0.05;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 4.2333333,291.97289 0.2645834,0 v -1.05833 l -0.2645834,0 z"
+       id="path4522"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="fill:#000000;fill-opacity:0.05;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 4.2333334,290.64997 0.2645833,1e-5 v -1.05833 l -0.2645833,-1e-5 z"
+       id="path4522-7"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="fill:#000000;fill-opacity:0.05;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 4.2333334,294.88331 h 0.2645833 v -1.05833 H 4.2333334 Z"
+       id="path4522-5"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="fill:#000000;fill-opacity:0.05;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 4.2333333,296.20622 h 0.2645833 v -1.05833 H 4.2333333 Z"
+       id="path4522-74"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="fill:#000000;fill-opacity:0.05;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 4.2333334,289.32706 0.2645834,10e-6 -10e-8,-0.52918 -0.2645834,-10e-6 z"
+       id="path4522-7-4"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="fill:#000000;fill-opacity:0.05;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 4.2333332,296.99998 h 0.2645835 l 0,-0.52917 H 4.2333333 Z"
+       id="path4522-7-4-4"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="fill:#000000;fill-opacity:0.05;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 0.79375,292.76664 -3e-8,0.26459 -0.52916667,0 3e-8,-0.26459 z"
+       id="path4493-1-7"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="fill:#000000;fill-opacity:0.05;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 8.4666667,292.76664 v 0.26459 l -0.5291667,0 v -0.26459 z"
+       id="path4493-1-7-2"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+  </g>
+</svg>
diff --git a/src/client/app/desktop/assets/header-logo-white.svg b/src/client/app/desktop/assets/header-logo-white.svg
new file mode 100644
index 0000000000..8082edb30d
--- /dev/null
+++ b/src/client/app/desktop/assets/header-logo-white.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
+<circle fill="#FFFFFF" cx="128" cy="153.6" r="19.201"/>
+<circle fill="#FFFFFF" cx="51.2" cy="153.6" r="19.2"/>
+<circle fill="#FFFFFF" cx="204.8" cy="153.6" r="19.2"/>
+<polyline fill="none" stroke="#FFFFFF" stroke-width="16" stroke-linejoin="round" stroke-miterlimit="10" points="51.2,153.6 
+	89.601,102.4 128,153.6 166.4,102.4 204.799,153.6 "/>
+<circle fill="#FFFFFF" cx="89.6" cy="102.4" r="19.2"/>
+<circle fill="#FFFFFF" cx="166.4" cy="102.4" r="19.199"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/client/app/desktop/assets/header-logo.svg b/src/client/app/desktop/assets/header-logo.svg
new file mode 100644
index 0000000000..3a2207954a
--- /dev/null
+++ b/src/client/app/desktop/assets/header-logo.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
+<circle cx="128" cy="153.6" r="19.201"/>
+<circle cx="51.2" cy="153.6" r="19.2"/>
+<circle cx="204.8" cy="153.6" r="19.2"/>
+<polyline fill="none" stroke="#000000" stroke-width="16" stroke-linejoin="round" stroke-miterlimit="10" points="51.2,153.6 
+	89.601,102.4 128,153.6 166.4,102.4 204.799,153.6 "/>
+<circle cx="89.6" cy="102.4" r="19.2"/>
+<circle cx="166.4" cy="102.4" r="19.199"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/client/app/desktop/assets/index.jpg b/src/client/app/desktop/assets/index.jpg
new file mode 100644
index 0000000000..10c412efe2
Binary files /dev/null and b/src/client/app/desktop/assets/index.jpg differ
diff --git a/src/client/app/desktop/assets/remove.png b/src/client/app/desktop/assets/remove.png
new file mode 100644
index 0000000000..8b1f4c06c9
Binary files /dev/null and b/src/client/app/desktop/assets/remove.png differ
diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
new file mode 100644
index 0000000000..b95e168544
--- /dev/null
+++ b/src/client/app/desktop/script.ts
@@ -0,0 +1,167 @@
+/**
+ * Desktop Client
+ */
+
+import VueRouter from 'vue-router';
+
+// Style
+import './style.styl';
+import '../../element.scss';
+
+import init from '../init';
+import fuckAdBlock from '../common/scripts/fuck-ad-block';
+import { HomeStreamManager } from '../common/scripts/streaming/home';
+import composeNotification from '../common/scripts/compose-notification';
+
+import chooseDriveFolder from './api/choose-drive-folder';
+import chooseDriveFile from './api/choose-drive-file';
+import dialog from './api/dialog';
+import input from './api/input';
+import post from './api/post';
+import notify from './api/notify';
+import updateAvatar from './api/update-avatar';
+import updateBanner from './api/update-banner';
+
+import MkIndex from './views/pages/index.vue';
+import MkUser from './views/pages/user/user.vue';
+import MkSelectDrive from './views/pages/selectdrive.vue';
+import MkDrive from './views/pages/drive.vue';
+import MkHomeCustomize from './views/pages/home-customize.vue';
+import MkMessagingRoom from './views/pages/messaging-room.vue';
+import MkPost from './views/pages/post.vue';
+import MkSearch from './views/pages/search.vue';
+import MkOthello from './views/pages/othello.vue';
+
+/**
+ * init
+ */
+init(async (launch) => {
+	// Register directives
+	require('./views/directives');
+
+	// Register components
+	require('./views/components');
+	require('./views/widgets');
+
+	// Init router
+	const router = new VueRouter({
+		mode: 'history',
+		routes: [
+			{ path: '/', name: 'index', component: MkIndex },
+			{ path: '/i/customize-home', component: MkHomeCustomize },
+			{ path: '/i/messaging/:user', component: MkMessagingRoom },
+			{ path: '/i/drive', component: MkDrive },
+			{ path: '/i/drive/folder/:folder', component: MkDrive },
+			{ path: '/selectdrive', component: MkSelectDrive },
+			{ path: '/search', component: MkSearch },
+			{ path: '/othello', component: MkOthello },
+			{ path: '/othello/:game', component: MkOthello },
+			{ path: '/@:user', component: MkUser },
+			{ path: '/@:user/:post', component: MkPost }
+		]
+	});
+
+	// Launch the app
+	const [, os] = launch(router, os => ({
+		chooseDriveFolder,
+		chooseDriveFile,
+		dialog,
+		input,
+		post,
+		notify,
+		updateAvatar: updateAvatar(os),
+		updateBanner: updateBanner(os)
+	}));
+
+	/**
+	 * Fuck AD Block
+	 */
+	fuckAdBlock(os);
+
+	/**
+	 * Init Notification
+	 */
+	if ('Notification' in window) {
+		// 許可を得ていなかったらリクエスト
+		if ((Notification as any).permission == 'default') {
+			await Notification.requestPermission();
+		}
+
+		if ((Notification as any).permission == 'granted') {
+			registerNotifications(os.stream);
+		}
+	}
+}, true);
+
+function registerNotifications(stream: HomeStreamManager) {
+	if (stream == null) return;
+
+	if (stream.hasConnection) {
+		attach(stream.borrow());
+	}
+
+	stream.on('connected', connection => {
+		attach(connection);
+	});
+
+	function attach(connection) {
+		connection.on('drive_file_created', file => {
+			const _n = composeNotification('drive_file_created', file);
+			const n = new Notification(_n.title, {
+				body: _n.body,
+				icon: _n.icon
+			});
+			setTimeout(n.close.bind(n), 5000);
+		});
+
+		connection.on('mention', post => {
+			const _n = composeNotification('mention', post);
+			const n = new Notification(_n.title, {
+				body: _n.body,
+				icon: _n.icon
+			});
+			setTimeout(n.close.bind(n), 6000);
+		});
+
+		connection.on('reply', post => {
+			const _n = composeNotification('reply', post);
+			const n = new Notification(_n.title, {
+				body: _n.body,
+				icon: _n.icon
+			});
+			setTimeout(n.close.bind(n), 6000);
+		});
+
+		connection.on('quote', post => {
+			const _n = composeNotification('quote', post);
+			const n = new Notification(_n.title, {
+				body: _n.body,
+				icon: _n.icon
+			});
+			setTimeout(n.close.bind(n), 6000);
+		});
+
+		connection.on('unread_messaging_message', message => {
+			const _n = composeNotification('unread_messaging_message', message);
+			const n = new Notification(_n.title, {
+				body: _n.body,
+				icon: _n.icon
+			});
+			n.onclick = () => {
+				n.close();
+				/*(riot as any).mount(document.body.appendChild(document.createElement('mk-messaging-room-window')), {
+					user: message.user
+				});*/
+			};
+			setTimeout(n.close.bind(n), 7000);
+		});
+
+		connection.on('othello_invited', matching => {
+			const _n = composeNotification('othello_invited', matching);
+			const n = new Notification(_n.title, {
+				body: _n.body,
+				icon: _n.icon
+			});
+		});
+	}
+}
diff --git a/src/client/app/desktop/style.styl b/src/client/app/desktop/style.styl
new file mode 100644
index 0000000000..49f71fbde7
--- /dev/null
+++ b/src/client/app/desktop/style.styl
@@ -0,0 +1,50 @@
+@import "../app"
+@import "../reset"
+
+@import "./ui"
+
+*::input-placeholder
+	color #D8CBC5
+
+*
+	&:focus
+		outline none
+
+	&::scrollbar
+		width 5px
+		background transparent
+
+		&:horizontal
+			height 5px
+
+	&::scrollbar-button
+		width 0
+		height 0
+		background rgba(0, 0, 0, 0.2)
+
+	&::scrollbar-piece
+		background transparent
+
+		&:start
+			background transparent
+
+	&::scrollbar-thumb
+		background rgba(0, 0, 0, 0.2)
+
+		&:hover
+			background rgba(0, 0, 0, 0.4)
+
+		&:active
+			background $theme-color
+
+	&::scrollbar-corner
+		background rgba(0, 0, 0, 0.2)
+
+html
+	height 100%
+	background #f7f7f7
+
+body
+	display flex
+	flex-direction column
+	min-height 100%
diff --git a/src/client/app/desktop/ui.styl b/src/client/app/desktop/ui.styl
new file mode 100644
index 0000000000..5a8d1718e2
--- /dev/null
+++ b/src/client/app/desktop/ui.styl
@@ -0,0 +1,125 @@
+@import "../../const"
+
+button
+	font-family sans-serif
+
+	*
+		pointer-events none
+
+button.ui
+.button.ui
+	display inline-block
+	cursor pointer
+	padding 0 14px
+	margin 0
+	min-width 100px
+	line-height 38px
+	font-size 14px
+	color #888
+	text-decoration none
+	background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+	border solid 1px #e2e2e2
+	border-radius 4px
+	outline none
+
+	&.block
+		display block
+
+	&:focus
+		&:after
+			content ""
+			pointer-events none
+			position absolute
+			top -5px
+			right -5px
+			bottom -5px
+			left -5px
+			border 2px solid rgba($theme-color, 0.3)
+			border-radius 8px
+
+	&:disabled
+		opacity 0.7
+		cursor default
+
+	&:hover
+		background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+		border-color #dcdcdc
+
+	&:active
+		background #ececec
+		border-color #dcdcdc
+
+	&.primary
+		color $theme-color-foreground
+		background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+		border solid 1px lighten($theme-color, 15%)
+
+		&:not(:disabled)
+			font-weight bold
+
+		&:hover:not(:disabled)
+			background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+			border-color $theme-color
+
+		&:active:not(:disabled)
+			background $theme-color
+			border-color $theme-color
+
+input:not([type]).ui
+input[type='text'].ui
+input[type='password'].ui
+input[type='email'].ui
+input[type='date'].ui
+input[type='number'].ui
+textarea.ui
+	display block
+	padding 10px
+	width 100%
+	height 40px
+	font-family sans-serif
+	font-size 16px
+	color #55595c
+	border solid 1px #dadada
+	border-radius 4px
+
+	&:hover
+		border-color #b0b0b0
+
+	&:focus
+		border-color $theme-color
+
+textarea.ui
+	min-width 100%
+	max-width 100%
+	min-height 64px
+
+.ui.info
+	display block
+	margin 1em 0
+	padding 0 1em
+	font-size 90%
+	color rgba(#000, 0.87)
+	background #f8f8f9
+	border solid 1px rgba(34, 36, 38, 0.22)
+	border-radius 4px
+
+	> p
+		opacity 0.8
+
+		> [data-fa]:first-child
+			margin-right 0.25em
+
+	&.warn
+		color #573a08
+		background #FFFAF3
+		border-color #C9BA9B
+
+.ui.from.group
+	display block
+	margin 16px 0
+
+	> p:first-child
+		margin 0 0 6px 0
+		font-size 90%
+		font-weight bold
+		color rgba(#373a3c, 0.9)
diff --git a/src/client/app/desktop/views/components/activity.calendar.vue b/src/client/app/desktop/views/components/activity.calendar.vue
new file mode 100644
index 0000000000..72233e9aca
--- /dev/null
+++ b/src/client/app/desktop/views/components/activity.calendar.vue
@@ -0,0 +1,66 @@
+<template>
+<svg viewBox="0 0 21 7" preserveAspectRatio="none">
+	<rect v-for="record in data" class="day"
+		width="1" height="1"
+		:x="record.x" :y="record.date.weekday"
+		rx="1" ry="1"
+		fill="transparent">
+		<title>{{ record.date.year }}/{{ record.date.month }}/{{ record.date.day }}</title>
+	</rect>
+	<rect v-for="record in data" class="day"
+		:width="record.v" :height="record.v"
+		:x="record.x + ((1 - record.v) / 2)" :y="record.date.weekday + ((1 - record.v) / 2)"
+		rx="1" ry="1"
+		:fill="record.color"
+		style="pointer-events: none;"/>
+	<rect class="today"
+		width="1" height="1"
+		:x="data[data.length - 1].x" :y="data[data.length - 1].date.weekday"
+		rx="1" ry="1"
+		fill="none"
+		stroke-width="0.1"
+		stroke="#f73520"/>
+</svg>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['data'],
+	created() {
+		this.data.forEach(d => d.total = d.posts + d.replies + d.reposts);
+		const peak = Math.max.apply(null, this.data.map(d => d.total));
+
+		let x = 0;
+		this.data.reverse().forEach(d => {
+			d.x = x;
+			d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
+
+			d.v = peak == 0 ? 0 : d.total / (peak / 2);
+			if (d.v > 1) d.v = 1;
+			const ch = d.date.weekday == 0 || d.date.weekday == 6 ? 275 : 170;
+			const cs = d.v * 100;
+			const cl = 15 + ((1 - d.v) * 80);
+			d.color = `hsl(${ch}, ${cs}%, ${cl}%)`;
+
+			if (d.date.weekday == 6) x++;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+svg
+	display block
+	padding 10px
+	width 100%
+
+	> rect
+		transform-origin center
+
+		&.day
+			&:hover
+				fill rgba(0, 0, 0, 0.05)
+
+</style>
diff --git a/src/client/app/desktop/views/components/activity.chart.vue b/src/client/app/desktop/views/components/activity.chart.vue
new file mode 100644
index 0000000000..5057786ed4
--- /dev/null
+++ b/src/client/app/desktop/views/components/activity.chart.vue
@@ -0,0 +1,103 @@
+<template>
+<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" preserveAspectRatio="none" @mousedown.prevent="onMousedown">
+	<title>Black ... Total<br/>Blue ... Posts<br/>Red ... Replies<br/>Green ... Reposts</title>
+	<polyline
+		:points="pointsPost"
+		fill="none"
+		stroke-width="1"
+		stroke="#41ddde"/>
+	<polyline
+		:points="pointsReply"
+		fill="none"
+		stroke-width="1"
+		stroke="#f7796c"/>
+	<polyline
+		:points="pointsRepost"
+		fill="none"
+		stroke-width="1"
+		stroke="#a1de41"/>
+	<polyline
+		:points="pointsTotal"
+		fill="none"
+		stroke-width="1"
+		stroke="#555"
+		stroke-dasharray="2 2"/>
+</svg>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+function dragListen(fn) {
+	window.addEventListener('mousemove',  fn);
+	window.addEventListener('mouseleave', dragClear.bind(null, fn));
+	window.addEventListener('mouseup',    dragClear.bind(null, fn));
+}
+
+function dragClear(fn) {
+	window.removeEventListener('mousemove',  fn);
+	window.removeEventListener('mouseleave', dragClear);
+	window.removeEventListener('mouseup',    dragClear);
+}
+
+export default Vue.extend({
+	props: ['data'],
+	data() {
+		return {
+			viewBoxX: 140,
+			viewBoxY: 60,
+			zoom: 1,
+			pos: 0,
+			pointsPost: null,
+			pointsReply: null,
+			pointsRepost: null,
+			pointsTotal: null
+		};
+	},
+	created() {
+		this.data.reverse();
+		this.data.forEach(d => d.total = d.posts + d.replies + d.reposts);
+		this.render();
+	},
+	methods: {
+		render() {
+			const peak = Math.max.apply(null, this.data.map(d => d.total));
+			if (peak != 0) {
+				this.pointsPost = this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.posts / peak)) * this.viewBoxY}`).join(' ');
+				this.pointsReply = this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.replies / peak)) * this.viewBoxY}`).join(' ');
+				this.pointsRepost = this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.reposts / peak)) * this.viewBoxY}`).join(' ');
+				this.pointsTotal = this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' ');
+			}
+		},
+		onMousedown(e) {
+			const clickX = e.clientX;
+			const clickY = e.clientY;
+			const baseZoom = this.zoom;
+			const basePos = this.pos;
+
+			// 動かした時
+			dragListen(me => {
+				let moveLeft = me.clientX - clickX;
+				let moveTop = me.clientY - clickY;
+
+				this.zoom = baseZoom + (-moveTop / 20);
+				this.pos = basePos + moveLeft;
+				if (this.zoom < 1) this.zoom = 1;
+				if (this.pos > 0) this.pos = 0;
+				if (this.pos < -(((this.data.length - 1) * this.zoom) - this.viewBoxX)) this.pos = -(((this.data.length - 1) * this.zoom) - this.viewBoxX);
+
+				this.render();
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+svg
+	display block
+	padding 10px
+	width 100%
+	cursor all-scroll
+
+</style>
diff --git a/src/client/app/desktop/views/components/activity.vue b/src/client/app/desktop/views/components/activity.vue
new file mode 100644
index 0000000000..480b956ecc
--- /dev/null
+++ b/src/client/app/desktop/views/components/activity.vue
@@ -0,0 +1,116 @@
+<template>
+<div class="mk-activity" :data-melt="design == 2">
+	<template v-if="design == 0">
+		<p class="title">%fa:chart-bar%%i18n:desktop.tags.mk-activity-widget.title%</p>
+		<button @click="toggle" title="%i18n:desktop.tags.mk-activity-widget.toggle%">%fa:sort%</button>
+	</template>
+	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+	<template v-else>
+		<x-calendar v-show="view == 0" :data="[].concat(activity)"/>
+		<x-chart v-show="view == 1" :data="[].concat(activity)"/>
+	</template>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XCalendar from './activity.calendar.vue';
+import XChart from './activity.chart.vue';
+
+export default Vue.extend({
+	components: {
+		XCalendar,
+		XChart
+	},
+	props: {
+		design: {
+			default: 0
+		},
+		initView: {
+			default: 0
+		},
+		user: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			fetching: true,
+			activity: null,
+			view: this.initView
+		};
+	},
+	mounted() {
+		(this as any).api('aggregation/users/activity', {
+			userId: this.user.id,
+			limit: 20 * 7
+		}).then(activity => {
+			this.activity = activity;
+			this.fetching = false;
+		});
+	},
+	methods: {
+		toggle() {
+			if (this.view == 1) {
+				this.view = 0;
+				this.$emit('viewChanged', this.view);
+			} else {
+				this.view++;
+				this.$emit('viewChanged', this.view);
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-activity
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	&[data-melt]
+		background transparent !important
+		border none !important
+
+	> .title
+		z-index 1
+		margin 0
+		padding 0 16px
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		color #888
+		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+		> [data-fa]
+			margin-right 4px
+
+	> button
+		position absolute
+		z-index 2
+		top 0
+		right 0
+		padding 0
+		width 42px
+		font-size 0.9em
+		line-height 42px
+		color #ccc
+
+		&:hover
+			color #aaa
+
+		&:active
+			color #999
+
+	> .fetching
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+		> [data-fa]
+			margin-right 4px
+
+</style>
diff --git a/src/client/app/desktop/views/components/analog-clock.vue b/src/client/app/desktop/views/components/analog-clock.vue
new file mode 100644
index 0000000000..81eec81598
--- /dev/null
+++ b/src/client/app/desktop/views/components/analog-clock.vue
@@ -0,0 +1,108 @@
+<template>
+<canvas class="mk-analog-clock" ref="canvas" width="256" height="256"></canvas>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { themeColor } from '../../../config';
+
+const Vec2 = function(this: any, x, y) {
+	this.x = x;
+	this.y = y;
+};
+
+export default Vue.extend({
+	data() {
+		return {
+			clock: null
+		};
+	},
+	mounted() {
+		this.tick();
+		this.clock = setInterval(this.tick, 1000);
+	},
+	beforeDestroy() {
+		clearInterval(this.clock);
+	},
+	methods: {
+		tick() {
+			const canv = this.$refs.canvas as any;
+
+			const now = new Date();
+			const s = now.getSeconds();
+			const m = now.getMinutes();
+			const h = now.getHours();
+
+			const ctx = canv.getContext('2d');
+			const canvW = canv.width;
+			const canvH = canv.height;
+			ctx.clearRect(0, 0, canvW, canvH);
+
+			{ // 背景
+				const center = Math.min((canvW / 2), (canvH / 2));
+				const lineStart =    center * 0.90;
+				const shortLineEnd = center * 0.87;
+				const longLineEnd =  center * 0.84;
+				for (let i = 0; i < 60; i++) {
+					const angle = Math.PI * i / 30;
+					const uv = new Vec2(Math.sin(angle), -Math.cos(angle));
+					ctx.beginPath();
+					ctx.lineWidth = 1;
+					ctx.moveTo((canvW / 2) + uv.x * lineStart, (canvH / 2) + uv.y * lineStart);
+					if (i % 5 == 0) {
+						ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
+						ctx.lineTo((canvW / 2) + uv.x * longLineEnd, (canvH / 2) + uv.y * longLineEnd);
+					} else {
+						ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
+						ctx.lineTo((canvW / 2) + uv.x * shortLineEnd, (canvH / 2) + uv.y * shortLineEnd);
+					}
+					ctx.stroke();
+				}
+			}
+
+			{ // 分
+				const angle = Math.PI * (m + s / 60) / 30;
+				const length = Math.min(canvW, canvH) / 2.6;
+				const uv = new Vec2(Math.sin(angle), -Math.cos(angle));
+				ctx.beginPath();
+				ctx.strokeStyle = '#ffffff';
+				ctx.lineWidth = 2;
+				ctx.moveTo(canvW / 2 - uv.x * length / 5, canvH / 2 - uv.y * length / 5);
+				ctx.lineTo(canvW / 2 + uv.x * length,     canvH / 2 + uv.y * length);
+				ctx.stroke();
+			}
+
+			{ // 時
+				const angle = Math.PI * (h % 12 + m / 60) / 6;
+				const length = Math.min(canvW, canvH) / 4;
+				const uv = new Vec2(Math.sin(angle), -Math.cos(angle));
+				ctx.beginPath();
+				ctx.strokeStyle = themeColor;
+				ctx.lineWidth = 2;
+				ctx.moveTo(canvW / 2 - uv.x * length / 5, canvH / 2 - uv.y * length / 5);
+				ctx.lineTo(canvW / 2 + uv.x * length,     canvH / 2 + uv.y * length);
+				ctx.stroke();
+			}
+
+			{ // 秒
+				const angle = Math.PI * s / 30;
+				const length = Math.min(canvW, canvH) / 2.6;
+				const uv = new Vec2(Math.sin(angle), -Math.cos(angle));
+				ctx.beginPath();
+				ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
+				ctx.lineWidth = 1;
+				ctx.moveTo(canvW / 2 - uv.x * length / 5, canvH / 2 - uv.y * length / 5);
+				ctx.lineTo(canvW / 2 + uv.x * length,     canvH / 2 + uv.y * length);
+				ctx.stroke();
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-analog-clock
+	display block
+	width 256px
+	height 256px
+</style>
diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
new file mode 100644
index 0000000000..71aab2e8a5
--- /dev/null
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -0,0 +1,252 @@
+<template>
+<div class="mk-calendar" :data-melt="design == 4 || design == 5">
+	<template v-if="design == 0 || design == 1">
+		<button @click="prev" title="%i18n:desktop.tags.mk-calendar-widget.prev%">%fa:chevron-circle-left%</button>
+		<p class="title">{{ '%i18n:desktop.tags.mk-calendar-widget.title%'.replace('{1}', year).replace('{2}', month) }}</p>
+		<button @click="next" title="%i18n:desktop.tags.mk-calendar-widget.next%">%fa:chevron-circle-right%</button>
+	</template>
+
+	<div class="calendar">
+		<template v-if="design == 0 || design == 2 || design == 4">
+		<div class="weekday"
+			v-for="(day, i) in Array(7).fill(0)"
+			:data-today="year == today.getFullYear() && month == today.getMonth() + 1 && today.getDay() == i"
+			:data-is-donichi="i == 0 || i == 6"
+		>{{ weekdayText[i] }}</div>
+		</template>
+		<div v-for="n in paddingDays"></div>
+		<div class="day" v-for="(day, i) in days"
+			:data-today="isToday(i + 1)"
+			:data-selected="isSelected(i + 1)"
+			:data-is-out-of-range="isOutOfRange(i + 1)"
+			:data-is-donichi="isDonichi(i + 1)"
+			@click="go(i + 1)"
+			:title="isOutOfRange(i + 1) ? null : '%i18n:desktop.tags.mk-calendar-widget.go%'"
+		>
+			<div>{{ i + 1 }}</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+const eachMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+function isLeapYear(year) {
+	return (year % 400 == 0) ? true :
+		(year % 100 == 0) ? false :
+			(year % 4 == 0) ? true :
+				false;
+}
+
+export default Vue.extend({
+	props: {
+		design: {
+			default: 0
+		},
+		start: {
+			type: Date,
+			required: false
+		}
+	},
+	data() {
+		return {
+			today: new Date(),
+			year: new Date().getFullYear(),
+			month: new Date().getMonth() + 1,
+			selected: new Date(),
+			weekdayText: [
+				'%i18n:common.weekday-short.sunday%',
+				'%i18n:common.weekday-short.monday%',
+				'%i18n:common.weekday-short.tuesday%',
+				'%i18n:common.weekday-short.wednesday%',
+				'%i18n:common.weekday-short.thursday%',
+				'%i18n:common.weekday-short.friday%',
+				'%i18n:common.weekday-short.satruday%'
+			]
+		};
+	},
+	computed: {
+		paddingDays(): number {
+			const date = new Date(this.year, this.month - 1, 1);
+			return date.getDay();
+		},
+		days(): number {
+			let days = eachMonthDays[this.month - 1];
+
+			// うるう年なら+1日
+			if (this.month == 2 && isLeapYear(this.year)) days++;
+
+			return days;
+		}
+	},
+	methods: {
+		isToday(day) {
+			return this.year == this.today.getFullYear() && this.month == this.today.getMonth() + 1 && day == this.today.getDate();
+		},
+
+		isSelected(day) {
+			return this.year == this.selected.getFullYear() && this.month == this.selected.getMonth() + 1 && day == this.selected.getDate();
+		},
+
+		isOutOfRange(day) {
+			const test = (new Date(this.year, this.month - 1, day)).getTime();
+			return test > this.today.getTime() ||
+				(this.start ? test < (this.start as any).getTime() : false);
+		},
+
+		isDonichi(day) {
+			const weekday = (new Date(this.year, this.month - 1, day)).getDay();
+			return weekday == 0 || weekday == 6;
+		},
+
+		prev() {
+			if (this.month == 1) {
+				this.year = this.year - 1;
+				this.month = 12;
+			} else {
+				this.month--;
+			}
+		},
+
+		next() {
+			if (this.month == 12) {
+				this.year = this.year + 1;
+				this.month = 1;
+			} else {
+				this.month++;
+			}
+		},
+
+		go(day) {
+			if (this.isOutOfRange(day)) return;
+			const date = new Date(this.year, this.month - 1, day, 23, 59, 59, 999);
+			this.selected = date;
+			this.$emit('chosen', this.selected);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-calendar
+	color #777
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	&[data-melt]
+		background transparent !important
+		border none !important
+
+	> .title
+		z-index 1
+		margin 0
+		padding 0 16px
+		text-align center
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		color #888
+		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+		> [data-fa]
+			margin-right 4px
+
+	> button
+		position absolute
+		z-index 2
+		top 0
+		padding 0
+		width 42px
+		font-size 0.9em
+		line-height 42px
+		color #ccc
+
+		&:hover
+			color #aaa
+
+		&:active
+			color #999
+
+		&:first-of-type
+			left 0
+
+		&:last-of-type
+			right 0
+
+	> .calendar
+		display flex
+		flex-wrap wrap
+		padding 16px
+
+		*
+			user-select none
+
+		> div
+			width calc(100% * (1/7))
+			text-align center
+			line-height 32px
+			font-size 14px
+
+			&.weekday
+				color #19a2a9
+
+				&[data-is-donichi]
+					color #ef95a0
+
+				&[data-today]
+					box-shadow 0 0 0 1px #19a2a9 inset
+					border-radius 6px
+
+					&[data-is-donichi]
+						box-shadow 0 0 0 1px #ef95a0 inset
+
+			&.day
+				cursor pointer
+				color #777
+
+				> div
+					border-radius 6px
+
+				&:hover > div
+					background rgba(0, 0, 0, 0.025)
+
+				&:active > div
+					background rgba(0, 0, 0, 0.05)
+
+				&[data-is-donichi]
+					color #ef95a0
+
+				&[data-is-out-of-range]
+					cursor default
+					color rgba(#777, 0.5)
+
+					&[data-is-donichi]
+						color rgba(#ef95a0, 0.5)
+
+				&[data-selected]
+					font-weight bold
+
+					> div
+						background rgba(0, 0, 0, 0.025)
+
+					&:active > div
+						background rgba(0, 0, 0, 0.05)
+
+				&[data-today]
+					> div
+						color $theme-color-foreground
+						background $theme-color
+
+					&:hover > div
+						background lighten($theme-color, 10%)
+
+					&:active > div
+						background darken($theme-color, 10%)
+
+</style>
diff --git a/src/client/app/desktop/views/components/choose-file-from-drive-window.vue b/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
new file mode 100644
index 0000000000..9a1e9c958a
--- /dev/null
+++ b/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
@@ -0,0 +1,180 @@
+<template>
+<mk-window ref="window" is-modal width="800px" height="500px" @closed="$destroy">
+	<span slot="header">
+		<span v-html="title" :class="$style.title"></span>
+		<span :class="$style.count" v-if="multiple && files.length > 0">({{ files.length }}ファイル選択中)</span>
+	</span>
+
+	<mk-drive
+		ref="browser"
+		:class="$style.browser"
+		:multiple="multiple"
+		@selected="onSelected"
+		@change-selection="onChangeSelection"
+	/>
+	<div :class="$style.footer">
+		<button :class="$style.upload" title="PCからドライブにファイルをアップロード" @click="upload">%fa:upload%</button>
+		<button :class="$style.cancel" @click="cancel">キャンセル</button>
+		<button :class="$style.ok" :disabled="multiple && files.length == 0" @click="ok">決定</button>
+	</div>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: {
+		multiple: {
+			default: false
+		},
+		title: {
+			default: '%fa:R file%ファイルを選択'
+		}
+	},
+	data() {
+		return {
+			files: []
+		};
+	},
+	methods: {
+		onSelected(file) {
+			this.files = [file];
+			this.ok();
+		},
+		onChangeSelection(files) {
+			this.files = files;
+		},
+		upload() {
+			(this.$refs.browser as any).selectLocalFile();
+		},
+		ok() {
+			this.$emit('selected', this.multiple ? this.files : this.files[0]);
+			(this.$refs.window as any).close();
+		},
+		cancel() {
+			(this.$refs.window as any).close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+@import '~const.styl'
+
+.title
+	> [data-fa]
+		margin-right 4px
+
+.count
+	margin-left 8px
+	opacity 0.7
+
+.browser
+	height calc(100% - 72px)
+
+.footer
+	height 72px
+	background lighten($theme-color, 95%)
+
+.upload
+	display inline-block
+	position absolute
+	top 8px
+	left 16px
+	cursor pointer
+	padding 0
+	margin 8px 4px 0 0
+	width 40px
+	height 40px
+	font-size 1em
+	color rgba($theme-color, 0.5)
+	background transparent
+	outline none
+	border solid 1px transparent
+	border-radius 4px
+
+	&:hover
+		background transparent
+		border-color rgba($theme-color, 0.3)
+
+	&:active
+		color rgba($theme-color, 0.6)
+		background transparent
+		border-color rgba($theme-color, 0.5)
+		box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
+
+	&:focus
+		&:after
+			content ""
+			pointer-events none
+			position absolute
+			top -5px
+			right -5px
+			bottom -5px
+			left -5px
+			border 2px solid rgba($theme-color, 0.3)
+			border-radius 8px
+
+.ok
+.cancel
+	display block
+	position absolute
+	bottom 16px
+	cursor pointer
+	padding 0
+	margin 0
+	width 120px
+	height 40px
+	font-size 1em
+	outline none
+	border-radius 4px
+
+	&:focus
+		&:after
+			content ""
+			pointer-events none
+			position absolute
+			top -5px
+			right -5px
+			bottom -5px
+			left -5px
+			border 2px solid rgba($theme-color, 0.3)
+			border-radius 8px
+
+	&:disabled
+		opacity 0.7
+		cursor default
+
+.ok
+	right 16px
+	color $theme-color-foreground
+	background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+	border solid 1px lighten($theme-color, 15%)
+
+	&:not(:disabled)
+		font-weight bold
+
+	&:hover:not(:disabled)
+		background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+		border-color $theme-color
+
+	&:active:not(:disabled)
+		background $theme-color
+		border-color $theme-color
+
+.cancel
+	right 148px
+	color #888
+	background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+	border solid 1px #e2e2e2
+
+	&:hover
+		background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+		border-color #dcdcdc
+
+	&:active
+		background #ececec
+		border-color #dcdcdc
+
+</style>
+
diff --git a/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue b/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
new file mode 100644
index 0000000000..f99533176d
--- /dev/null
+++ b/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
@@ -0,0 +1,114 @@
+<template>
+<mk-window ref="window" is-modal width="800px" height="500px" @closed="$destroy">
+	<span slot="header">
+		<span v-html="title" :class="$style.title"></span>
+	</span>
+
+	<mk-drive
+		ref="browser"
+		:class="$style.browser"
+		:multiple="false"
+	/>
+	<div :class="$style.footer">
+		<button :class="$style.cancel" @click="cancel">キャンセル</button>
+		<button :class="$style.ok" @click="ok">決定</button>
+	</div>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: {
+		title: {
+			default: '%fa:R folder%フォルダを選択'
+		}
+	},
+	methods: {
+		ok() {
+			this.$emit('selected', (this.$refs.browser as any).folder);
+			(this.$refs.window as any).close();
+		},
+		cancel() {
+			(this.$refs.window as any).close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+@import '~const.styl'
+
+.title
+	> [data-fa]
+		margin-right 4px
+
+.browser
+	height calc(100% - 72px)
+
+.footer
+	height 72px
+	background lighten($theme-color, 95%)
+
+.ok
+.cancel
+	display block
+	position absolute
+	bottom 16px
+	cursor pointer
+	padding 0
+	margin 0
+	width 120px
+	height 40px
+	font-size 1em
+	outline none
+	border-radius 4px
+
+	&:focus
+		&:after
+			content ""
+			pointer-events none
+			position absolute
+			top -5px
+			right -5px
+			bottom -5px
+			left -5px
+			border 2px solid rgba($theme-color, 0.3)
+			border-radius 8px
+
+	&:disabled
+		opacity 0.7
+		cursor default
+
+.ok
+	right 16px
+	color $theme-color-foreground
+	background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+	border solid 1px lighten($theme-color, 15%)
+
+	&:not(:disabled)
+		font-weight bold
+
+	&:hover:not(:disabled)
+		background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+		border-color $theme-color
+
+	&:active:not(:disabled)
+		background $theme-color
+		border-color $theme-color
+
+.cancel
+	right 148px
+	color #888
+	background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+	border solid 1px #e2e2e2
+
+	&:hover
+		background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+		border-color #dcdcdc
+
+	&:active
+		background #ececec
+		border-color #dcdcdc
+
+</style>
diff --git a/src/client/app/desktop/views/components/context-menu.menu.vue b/src/client/app/desktop/views/components/context-menu.menu.vue
new file mode 100644
index 0000000000..6359dbf1b4
--- /dev/null
+++ b/src/client/app/desktop/views/components/context-menu.menu.vue
@@ -0,0 +1,121 @@
+<template>
+<ul class="menu">
+	<li v-for="(item, i) in menu" :class="item.type">
+		<template v-if="item.type == 'item'">
+			<p @click="click(item)"><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}</p>
+		</template>
+		<template v-if="item.type == 'link'">
+			<a :href="item.href" :target="item.target" @click="click(item)"><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}</a>
+		</template>
+		<template v-else-if="item.type == 'nest'">
+			<p><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}...<span class="caret">%fa:caret-right%</span></p>
+			<me-nu :menu="item.menu" @x="click"/>
+		</template>
+	</li>
+</ul>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	name: 'me-nu',
+	props: ['menu'],
+	methods: {
+		click(item) {
+			this.$emit('x', item);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.menu
+	$width = 240px
+	$item-height = 38px
+	$padding = 10px
+
+	margin 0
+	padding $padding 0
+	list-style none
+
+	li
+		display block
+
+		&.divider
+			margin-top $padding
+			padding-top $padding
+			border-top solid 1px #eee
+
+		&.nest
+			> p
+				cursor default
+
+				> .caret
+					position absolute
+					top 0
+					right 8px
+
+					> *
+						line-height $item-height
+						width 28px
+						text-align center
+
+			&:hover > ul
+				visibility visible
+
+			&:active
+				> p, a
+					background $theme-color
+
+		> p, a
+			display block
+			z-index 1
+			margin 0
+			padding 0 32px 0 38px
+			line-height $item-height
+			color #868C8C
+			text-decoration none
+			cursor pointer
+
+			&:hover
+				text-decoration none
+
+			*
+				pointer-events none
+
+		&:hover
+			> p, a
+				text-decoration none
+				background $theme-color
+				color $theme-color-foreground
+
+		&:active
+			> p, a
+				text-decoration none
+				background darken($theme-color, 10%)
+				color $theme-color-foreground
+
+	li > ul
+		visibility hidden
+		position absolute
+		top 0
+		left $width
+		margin-top -($padding)
+		width $width
+		background #fff
+		border-radius 0 4px 4px 4px
+		box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
+		transition visibility 0s linear 0.2s
+
+</style>
+
+<style lang="stylus" module>
+.icon
+	> *
+		width 28px
+		margin-left -28px
+		text-align center
+</style>
+
diff --git a/src/client/app/desktop/views/components/context-menu.vue b/src/client/app/desktop/views/components/context-menu.vue
new file mode 100644
index 0000000000..8bd9945840
--- /dev/null
+++ b/src/client/app/desktop/views/components/context-menu.vue
@@ -0,0 +1,74 @@
+<template>
+<div class="context-menu" :style="{ left: `${x}px`, top: `${y}px` }" @contextmenu.prevent="() => {}">
+	<x-menu :menu="menu" @x="click"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+import contains from '../../../common/scripts/contains';
+import XMenu from './context-menu.menu.vue';
+
+export default Vue.extend({
+	components: {
+		XMenu
+	},
+	props: ['x', 'y', 'menu'],
+	mounted() {
+		this.$nextTick(() => {
+			Array.from(document.querySelectorAll('body *')).forEach(el => {
+				el.addEventListener('mousedown', this.onMousedown);
+			});
+
+			this.$el.style.display = 'block';
+
+			anime({
+				targets: this.$el,
+				opacity: [0, 1],
+				duration: 100,
+				easing: 'linear'
+			});
+		});
+	},
+	methods: {
+		onMousedown(e) {
+			e.preventDefault();
+			if (!contains(this.$el, e.target) && (this.$el != e.target)) this.close();
+			return false;
+		},
+		click(item) {
+			if (item.onClick) item.onClick();
+			this.close();
+		},
+		close() {
+			Array.from(document.querySelectorAll('body *')).forEach(el => {
+				el.removeEventListener('mousedown', this.onMousedown);
+			});
+
+			this.$emit('closed');
+			this.$destroy();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.context-menu
+	$width = 240px
+	$item-height = 38px
+	$padding = 10px
+
+	display none
+	position fixed
+	top 0
+	left 0
+	z-index 4096
+	width $width
+	font-size 0.8em
+	background #fff
+	border-radius 0 4px 4px 4px
+	box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
+	opacity 0
+
+</style>
diff --git a/src/client/app/desktop/views/components/crop-window.vue b/src/client/app/desktop/views/components/crop-window.vue
new file mode 100644
index 0000000000..eb6a55d959
--- /dev/null
+++ b/src/client/app/desktop/views/components/crop-window.vue
@@ -0,0 +1,178 @@
+<template>
+	<mk-window ref="window" is-modal width="800px" :can-close="false">
+		<span slot="header">%fa:crop%{{ title }}</span>
+		<div class="body">
+			<vue-cropper ref="cropper"
+				:src="image.url"
+				:view-mode="1"
+				:aspect-ratio="aspectRatio"
+				:container-style="{ width: '100%', 'max-height': '400px' }"
+			/>
+		</div>
+		<div :class="$style.actions">
+			<button :class="$style.skip" @click="skip">クロップをスキップ</button>
+			<button :class="$style.cancel" @click="cancel">キャンセル</button>
+			<button :class="$style.ok" @click="ok">決定</button>
+		</div>
+	</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import VueCropper from 'vue-cropperjs';
+
+export default Vue.extend({
+	components: {
+		VueCropper
+	},
+	props: {
+		image: {
+			type: Object,
+			required: true
+		},
+		title: {
+			type: String,
+			required: true
+		},
+		aspectRatio: {
+			type: Number,
+			required: true
+		}
+	},
+	methods: {
+		ok() {
+			(this.$refs.cropper as any).getCroppedCanvas().toBlob(blob => {
+				this.$emit('cropped', blob);
+				(this.$refs.window as any).close();
+			});
+		},
+
+		skip() {
+			this.$emit('skipped');
+			(this.$refs.window as any).close();
+		},
+
+		cancel() {
+			this.$emit('canceled');
+			(this.$refs.window as any).close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+@import '~const.styl'
+
+.header
+	> [data-fa]
+		margin-right 4px
+
+.img
+	width 100%
+	max-height 400px
+
+.actions
+	height 72px
+	background lighten($theme-color, 95%)
+
+.ok
+.cancel
+.skip
+	display block
+	position absolute
+	bottom 16px
+	cursor pointer
+	padding 0
+	margin 0
+	height 40px
+	font-size 1em
+	outline none
+	border-radius 4px
+
+	&:focus
+		&:after
+			content ""
+			pointer-events none
+			position absolute
+			top -5px
+			right -5px
+			bottom -5px
+			left -5px
+			border 2px solid rgba($theme-color, 0.3)
+			border-radius 8px
+
+	&:disabled
+		opacity 0.7
+		cursor default
+
+.ok
+.cancel
+	width 120px
+
+.ok
+	right 16px
+	color $theme-color-foreground
+	background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+	border solid 1px lighten($theme-color, 15%)
+
+	&:not(:disabled)
+		font-weight bold
+
+	&:hover:not(:disabled)
+		background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+		border-color $theme-color
+
+	&:active:not(:disabled)
+		background $theme-color
+		border-color $theme-color
+
+.cancel
+.skip
+	color #888
+	background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+	border solid 1px #e2e2e2
+
+	&:hover
+		background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+		border-color #dcdcdc
+
+	&:active
+		background #ececec
+		border-color #dcdcdc
+
+.cancel
+	right 148px
+
+.skip
+	left 16px
+	width 150px
+
+</style>
+
+<style lang="stylus">
+.cropper-modal {
+	opacity: 0.8;
+}
+
+.cropper-view-box {
+	outline-color: $theme-color;
+}
+
+.cropper-line, .cropper-point {
+	background-color: $theme-color;
+}
+
+.cropper-bg {
+	animation: cropper-bg 0.5s linear infinite;
+}
+
+@keyframes cropper-bg {
+	0% {
+		background-position: 0 0;
+	}
+
+	100% {
+		background-position: -8px -8px;
+	}
+}
+</style>
diff --git a/src/client/app/desktop/views/components/dialog.vue b/src/client/app/desktop/views/components/dialog.vue
new file mode 100644
index 0000000000..fa17e4a9d2
--- /dev/null
+++ b/src/client/app/desktop/views/components/dialog.vue
@@ -0,0 +1,170 @@
+<template>
+<div class="mk-dialog">
+	<div class="bg" ref="bg" @click="onBgClick"></div>
+	<div class="main" ref="main">
+		<header v-html="title" :class="$style.header"></header>
+		<div class="body" v-html="text"></div>
+		<div class="buttons">
+			<button v-for="button in buttons" @click="click(button)">{{ button.text }}</button>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+
+export default Vue.extend({
+	props: {
+		title: {
+			type: String,
+			required: false
+		},
+		text: {
+			type: String,
+			required: true
+		},
+		buttons: {
+			type: Array,
+			default: () => {
+				return [{
+					text: 'OK'
+				}];
+			}
+		},
+		modal: {
+			type: Boolean,
+			default: false
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			(this.$refs.bg as any).style.pointerEvents = 'auto';
+			anime({
+				targets: this.$refs.bg,
+				opacity: 1,
+				duration: 100,
+				easing: 'linear'
+			});
+
+			anime({
+				targets: this.$refs.main,
+				opacity: 1,
+				scale: [1.2, 1],
+				duration: 300,
+				easing: [0, 0.5, 0.5, 1]
+			});
+		});
+	},
+	methods: {
+		click(button) {
+			this.$emit('clicked', button.id);
+			this.close();
+		},
+		close() {
+			(this.$refs.bg as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.bg,
+				opacity: 0,
+				duration: 300,
+				easing: 'linear'
+			});
+
+			(this.$refs.main as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.main,
+				opacity: 0,
+				scale: 0.8,
+				duration: 300,
+				easing: [ 0.5, -0.5, 1, 0.5 ],
+				complete: () => this.$destroy()
+			});
+		},
+		onBgClick() {
+			if (!this.modal) {
+				this.close();
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-dialog
+	> .bg
+		display block
+		position fixed
+		z-index 8192
+		top 0
+		left 0
+		width 100%
+		height 100%
+		background rgba(0, 0, 0, 0.7)
+		opacity 0
+		pointer-events none
+
+	> .main
+		display block
+		position fixed
+		z-index 8192
+		top 20%
+		left 0
+		right 0
+		margin 0 auto 0 auto
+		padding 32px 42px
+		width 480px
+		background #fff
+		opacity 0
+
+		> .body
+			margin 1em 0
+			color #888
+
+		> .buttons
+			> button
+				display inline-block
+				float right
+				margin 0
+				padding 10px 10px
+				font-size 1.1em
+				font-weight normal
+				text-decoration none
+				color #888
+				background transparent
+				outline none
+				border none
+				border-radius 0
+				cursor pointer
+				transition color 0.1s ease
+
+				i
+					margin 0 0.375em
+
+				&:hover
+					color $theme-color
+
+				&:active
+					color darken($theme-color, 10%)
+					transition color 0s ease
+
+</style>
+
+<style lang="stylus" module>
+@import '~const.styl'
+
+.header
+	margin 1em 0
+	color $theme-color
+	// color #43A4EC
+	font-weight bold
+
+	&:empty
+		display none
+
+	> i
+		margin-right 0.5em
+
+</style>
diff --git a/src/client/app/desktop/views/components/drive-window.vue b/src/client/app/desktop/views/components/drive-window.vue
new file mode 100644
index 0000000000..3a072f4794
--- /dev/null
+++ b/src/client/app/desktop/views/components/drive-window.vue
@@ -0,0 +1,56 @@
+<template>
+<mk-window ref="window" @closed="$destroy" width="800px" height="500px" :popout-url="popout">
+	<template slot="header">
+		<p v-if="usage" :class="$style.info"><b>{{ usage.toFixed(1) }}%</b> %i18n:desktop.tags.mk-drive-browser-window.used%</p>
+		<span :class="$style.title">%fa:cloud%%i18n:desktop.tags.mk-drive-browser-window.drive%</span>
+	</template>
+	<mk-drive :class="$style.browser" multiple :init-folder="folder" ref="browser"/>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { url } from '../../../config';
+
+export default Vue.extend({
+	props: ['folder'],
+	data() {
+		return {
+			usage: null
+		};
+	},
+	mounted() {
+		(this as any).api('drive').then(info => {
+			this.usage = info.usage / info.capacity * 100;
+		});
+	},
+	methods: {
+		popout() {
+			const folder = (this.$refs.browser as any) ? (this.$refs.browser as any).folder : null;
+			if (folder) {
+				return `${url}/i/drive/folder/${folder.id}`;
+			} else {
+				return `${url}/i/drive`;
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.title
+	> [data-fa]
+		margin-right 4px
+
+.info
+	position absolute
+	top 0
+	left 16px
+	margin 0
+	font-size 80%
+
+.browser
+	height 100%
+
+</style>
+
diff --git a/src/client/app/desktop/views/components/drive.file.vue b/src/client/app/desktop/views/components/drive.file.vue
new file mode 100644
index 0000000000..85f8361c9f
--- /dev/null
+++ b/src/client/app/desktop/views/components/drive.file.vue
@@ -0,0 +1,317 @@
+<template>
+<div class="root file"
+	:data-is-selected="isSelected"
+	:data-is-contextmenu-showing="isContextmenuShowing"
+	@click="onClick"
+	draggable="true"
+	@dragstart="onDragstart"
+	@dragend="onDragend"
+	@contextmenu.prevent.stop="onContextmenu"
+	:title="title"
+>
+	<div class="label" v-if="os.i.avatarId == file.id"><img src="/assets/label.svg"/>
+		<p>%i18n:desktop.tags.mk-drive-browser-file.avatar%</p>
+	</div>
+	<div class="label" v-if="os.i.bannerId == file.id"><img src="/assets/label.svg"/>
+		<p>%i18n:desktop.tags.mk-drive-browser-file.banner%</p>
+	</div>
+	<div class="thumbnail" ref="thumbnail" :style="`background-color: ${ background }`">
+		<img :src="`${file.url}?thumbnail&size=128`" alt="" @load="onThumbnailLoaded"/>
+	</div>
+	<p class="name">
+		<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
+		<span class="ext" v-if="file.name.lastIndexOf('.') != -1">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
+	</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+import contextmenu from '../../api/contextmenu';
+import copyToClipboard from '../../../common/scripts/copy-to-clipboard';
+
+export default Vue.extend({
+	props: ['file'],
+	data() {
+		return {
+			isContextmenuShowing: false,
+			isDragging: false
+		};
+	},
+	computed: {
+		browser(): any {
+			return this.$parent;
+		},
+		isSelected(): boolean {
+			return this.browser.selectedFiles.some(f => f.id == this.file.id);
+		},
+		title(): string {
+			return `${this.file.name}\n${this.file.type} ${Vue.filter('bytes')(this.file.datasize)}`;
+		},
+		background(): string {
+			return this.file.properties.avgColor
+				? `rgb(${this.file.properties.avgColor.join(',')})`
+				: 'transparent';
+		}
+	},
+	methods: {
+		onClick() {
+			this.browser.chooseFile(this.file);
+		},
+
+		onContextmenu(e) {
+			this.isContextmenuShowing = true;
+			contextmenu(e, [{
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename%',
+				icon: '%fa:i-cursor%',
+				onClick: this.rename
+			}, {
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copy-url%',
+				icon: '%fa:link%',
+				onClick: this.copyUrl
+			}, {
+				type: 'link',
+				href: `${this.file.url}?download`,
+				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.download%',
+				icon: '%fa:download%',
+			}, {
+				type: 'divider',
+			}, {
+				type: 'item',
+				text: '%i18n:common.delete%',
+				icon: '%fa:R trash-alt%',
+				onClick: this.deleteFile
+			}, {
+				type: 'divider',
+			}, {
+				type: 'nest',
+				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.else-files%',
+				menu: [{
+					type: 'item',
+					text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-avatar%',
+					onClick: this.setAsAvatar
+				}, {
+					type: 'item',
+					text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-banner%',
+					onClick: this.setAsBanner
+				}]
+			}, {
+				type: 'nest',
+				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.open-in-app%',
+				menu: [{
+					type: 'item',
+					text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.add-app%...',
+					onClick: this.addApp
+				}]
+			}], {
+				closed: () => {
+					this.isContextmenuShowing = false;
+				}
+			});
+		},
+
+		onDragstart(e) {
+			e.dataTransfer.effectAllowed = 'move';
+			e.dataTransfer.setData('mk_drive_file', JSON.stringify(this.file));
+			this.isDragging = true;
+
+			// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
+			// (=あなたの子供が、ドラッグを開始しましたよ)
+			this.browser.isDragSource = true;
+		},
+
+		onDragend(e) {
+			this.isDragging = false;
+			this.browser.isDragSource = false;
+		},
+
+		onThumbnailLoaded() {
+			if (this.file.properties.avgColor) {
+				anime({
+					targets: this.$refs.thumbnail,
+					backgroundColor: `rgba(${this.file.properties.avgColor.join(',')}, 0)`,
+					duration: 100,
+					easing: 'linear'
+				});
+			}
+		},
+
+		rename() {
+			(this as any).apis.input({
+				title: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename-file%',
+				placeholder: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.input-new-file-name%',
+				default: this.file.name,
+				allowEmpty: false
+			}).then(name => {
+				(this as any).api('drive/files/update', {
+					fileId: this.file.id,
+					name: name
+				})
+			});
+		},
+
+		copyUrl() {
+			copyToClipboard(this.file.url);
+			(this as any).apis.dialog({
+				title: '%fa:check%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied%',
+				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied-url-to-clipboard%',
+				actions: [{
+					text: '%i18n:common.ok%'
+				}]
+			});
+		},
+
+		setAsAvatar() {
+			(this as any).apis.updateAvatar(this.file);
+		},
+
+		setAsBanner() {
+			(this as any).apis.updateBanner(this.file);
+		},
+
+		addApp() {
+			alert('not implemented yet');
+		},
+
+		deleteFile() {
+			alert('not implemented yet');
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.root.file
+	padding 8px 0 0 0
+	height 180px
+	border-radius 4px
+
+	&, *
+		cursor pointer
+
+	&:hover
+		background rgba(0, 0, 0, 0.05)
+
+		> .label
+			&:before
+			&:after
+				background #0b65a5
+
+	&:active
+		background rgba(0, 0, 0, 0.1)
+
+		> .label
+			&:before
+			&:after
+				background #0b588c
+
+	&[data-is-selected]
+		background $theme-color
+
+		&:hover
+			background lighten($theme-color, 10%)
+
+		&:active
+			background darken($theme-color, 10%)
+
+		> .label
+			&:before
+			&:after
+				display none
+
+		> .name
+			color $theme-color-foreground
+
+	&[data-is-contextmenu-showing]
+		&:after
+			content ""
+			pointer-events none
+			position absolute
+			top -4px
+			right -4px
+			bottom -4px
+			left -4px
+			border 2px dashed rgba($theme-color, 0.3)
+			border-radius 4px
+
+	> .label
+		position absolute
+		top 0
+		left 0
+		pointer-events none
+
+		&:before
+			content ""
+			display block
+			position absolute
+			z-index 1
+			top 0
+			left 57px
+			width 28px
+			height 8px
+			background #0c7ac9
+
+		&:after
+			content ""
+			display block
+			position absolute
+			z-index 1
+			top 57px
+			left 0
+			width 8px
+			height 28px
+			background #0c7ac9
+
+		> img
+			position absolute
+			z-index 2
+			top 0
+			left 0
+
+		> p
+			position absolute
+			z-index 3
+			top 19px
+			left -28px
+			width 120px
+			margin 0
+			text-align center
+			line-height 28px
+			color #fff
+			transform rotate(-45deg)
+
+	> .thumbnail
+		width 128px
+		height 128px
+		margin auto
+
+		> img
+			display block
+			position absolute
+			top 0
+			left 0
+			right 0
+			bottom 0
+			margin auto
+			max-width 128px
+			max-height 128px
+			pointer-events none
+
+	> .name
+		display block
+		margin 4px 0 0 0
+		font-size 0.8em
+		text-align center
+		word-break break-all
+		color #444
+		overflow hidden
+
+		> .ext
+			opacity 0.5
+
+</style>
diff --git a/src/client/app/desktop/views/components/drive.folder.vue b/src/client/app/desktop/views/components/drive.folder.vue
new file mode 100644
index 0000000000..a926bf47b2
--- /dev/null
+++ b/src/client/app/desktop/views/components/drive.folder.vue
@@ -0,0 +1,267 @@
+<template>
+<div class="root folder"
+	:data-is-contextmenu-showing="isContextmenuShowing"
+	:data-draghover="draghover"
+	@click="onClick"
+	@mouseover="onMouseover"
+	@mouseout="onMouseout"
+	@dragover.prevent.stop="onDragover"
+	@dragenter.prevent="onDragenter"
+	@dragleave="onDragleave"
+	@drop.prevent.stop="onDrop"
+	draggable="true"
+	@dragstart="onDragstart"
+	@dragend="onDragend"
+	@contextmenu.prevent.stop="onContextmenu"
+	:title="title"
+>
+	<p class="name">
+		<template v-if="hover">%fa:R folder-open .fw%</template>
+		<template v-if="!hover">%fa:R folder .fw%</template>
+		{{ folder.name }}
+	</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import contextmenu from '../../api/contextmenu';
+
+export default Vue.extend({
+	props: ['folder'],
+	data() {
+		return {
+			hover: false,
+			draghover: false,
+			isDragging: false,
+			isContextmenuShowing: false
+		};
+	},
+	computed: {
+		browser(): any {
+			return this.$parent;
+		},
+		title(): string {
+			return this.folder.name;
+		}
+	},
+	methods: {
+		onClick() {
+			this.browser.move(this.folder);
+		},
+
+		onContextmenu(e) {
+			this.isContextmenuShowing = true;
+			contextmenu(e, [{
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.move-to-this-folder%',
+				icon: '%fa:arrow-right%',
+				onClick: this.go
+			}, {
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.show-in-new-window%',
+				icon: '%fa:R window-restore%',
+				onClick: this.newWindow
+			}, {
+				type: 'divider',
+			}, {
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename%',
+				icon: '%fa:i-cursor%',
+				onClick: this.rename
+			}, {
+				type: 'divider',
+			}, {
+				type: 'item',
+				text: '%i18n:common.delete%',
+				icon: '%fa:R trash-alt%',
+				onClick: this.deleteFolder
+			}], {
+				closed: () => {
+					this.isContextmenuShowing = false;
+				}
+			});
+		},
+
+		onMouseover() {
+			this.hover = true;
+		},
+
+		onMouseout() {
+			this.hover = false
+		},
+
+		onDragover(e) {
+			// 自分自身がドラッグされている場合
+			if (this.isDragging) {
+				// 自分自身にはドロップさせない
+				e.dataTransfer.dropEffect = 'none';
+				return;
+			}
+
+			const isFile = e.dataTransfer.items[0].kind == 'file';
+			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
+			const isDriveFolder = e.dataTransfer.types[0] == 'mk_drive_folder';
+
+			if (isFile || isDriveFile || isDriveFolder) {
+				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
+			} else {
+				e.dataTransfer.dropEffect = 'none';
+			}
+		},
+
+		onDragenter() {
+			if (!this.isDragging) this.draghover = true;
+		},
+
+		onDragleave() {
+			this.draghover = false;
+		},
+
+		onDrop(e) {
+			this.draghover = false;
+
+			// ファイルだったら
+			if (e.dataTransfer.files.length > 0) {
+				Array.from(e.dataTransfer.files).forEach(file => {
+					this.browser.upload(file, this.folder);
+				});
+				return;
+			}
+
+			//#region ドライブのファイル
+			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			if (driveFile != null && driveFile != '') {
+				const file = JSON.parse(driveFile);
+				this.browser.removeFile(file.id);
+				(this as any).api('drive/files/update', {
+					fileId: file.id,
+					folderId: this.folder.id
+				});
+			}
+			//#endregion
+
+			//#region ドライブのフォルダ
+			const driveFolder = e.dataTransfer.getData('mk_drive_folder');
+			if (driveFolder != null && driveFolder != '') {
+				const folder = JSON.parse(driveFolder);
+
+				// 移動先が自分自身ならreject
+				if (folder.id == this.folder.id) return;
+
+				this.browser.removeFolder(folder.id);
+				(this as any).api('drive/folders/update', {
+					folderId: folder.id,
+					parentId: this.folder.id
+				}).then(() => {
+					// noop
+				}).catch(err => {
+					switch (err) {
+						case 'detected-circular-definition':
+							(this as any).apis.dialog({
+								title: '%fa:exclamation-triangle%%i18n:desktop.tags.mk-drive-browser-folder.unable-to-process%',
+								text: '%i18n:desktop.tags.mk-drive-browser-folder.circular-reference-detected%',
+								actions: [{
+									text: '%i18n:common.ok%'
+								}]
+							});
+							break;
+						default:
+							alert('%i18n:desktop.tags.mk-drive-browser-folder.unhandled-error% ' + err);
+					}
+				});
+			}
+			//#endregion
+		},
+
+		onDragstart(e) {
+			e.dataTransfer.effectAllowed = 'move';
+			e.dataTransfer.setData('mk_drive_folder', JSON.stringify(this.folder));
+			this.isDragging = true;
+
+			// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
+			// (=あなたの子供が、ドラッグを開始しましたよ)
+			this.browser.isDragSource = true;
+		},
+
+		onDragend() {
+			this.isDragging = false;
+			this.browser.isDragSource = false;
+		},
+
+		go() {
+			this.browser.move(this.folder.id);
+		},
+
+		newWindow() {
+			this.browser.newWindow(this.folder);
+		},
+
+		rename() {
+			(this as any).apis.input({
+				title: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename-folder%',
+				placeholder: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.input-new-folder-name%',
+				default: this.folder.name
+			}).then(name => {
+				(this as any).api('drive/folders/update', {
+					folderId: this.folder.id,
+					name: name
+				});
+			});
+		},
+
+		deleteFolder() {
+			alert('not implemented yet');
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.root.folder
+	padding 8px
+	height 64px
+	background lighten($theme-color, 95%)
+	border-radius 4px
+
+	&, *
+		cursor pointer
+
+	*
+		pointer-events none
+
+	&:hover
+		background lighten($theme-color, 90%)
+
+	&:active
+		background lighten($theme-color, 85%)
+
+	&[data-is-contextmenu-showing]
+	&[data-draghover]
+		&:after
+			content ""
+			pointer-events none
+			position absolute
+			top -4px
+			right -4px
+			bottom -4px
+			left -4px
+			border 2px dashed rgba($theme-color, 0.3)
+			border-radius 4px
+
+	&[data-draghover]
+		background lighten($theme-color, 90%)
+
+	> .name
+		margin 0
+		font-size 0.9em
+		color darken($theme-color, 30%)
+
+		> [data-fa]
+			margin-right 4px
+			margin-left 2px
+			text-align left
+
+</style>
diff --git a/src/client/app/desktop/views/components/drive.nav-folder.vue b/src/client/app/desktop/views/components/drive.nav-folder.vue
new file mode 100644
index 0000000000..d885a72f7f
--- /dev/null
+++ b/src/client/app/desktop/views/components/drive.nav-folder.vue
@@ -0,0 +1,113 @@
+<template>
+<div class="root nav-folder"
+	:data-draghover="draghover"
+	@click="onClick"
+	@dragover.prevent.stop="onDragover"
+	@dragenter="onDragenter"
+	@dragleave="onDragleave"
+	@drop.stop="onDrop"
+>
+	<template v-if="folder == null">%fa:cloud%</template>
+	<span>{{ folder == null ? '%i18n:desktop.tags.mk-drive-browser-nav-folder.drive%' : folder.name }}</span>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['folder'],
+	data() {
+		return {
+			hover: false,
+			draghover: false
+		};
+	},
+	computed: {
+		browser(): any {
+			return this.$parent;
+		}
+	},
+	methods: {
+		onClick() {
+			this.browser.move(this.folder);
+		},
+		onMouseover() {
+			this.hover = true;
+		},
+		onMouseout() {
+			this.hover = false;
+		},
+		onDragover(e) {
+			// このフォルダがルートかつカレントディレクトリならドロップ禁止
+			if (this.folder == null && this.browser.folder == null) {
+				e.dataTransfer.dropEffect = 'none';
+			}
+
+			const isFile = e.dataTransfer.items[0].kind == 'file';
+			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
+			const isDriveFolder = e.dataTransfer.types[0] == 'mk_drive_folder';
+
+			if (isFile || isDriveFile || isDriveFolder) {
+				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
+			} else {
+				e.dataTransfer.dropEffect = 'none';
+			}
+
+			return false;
+		},
+		onDragenter() {
+			if (this.folder || this.browser.folder) this.draghover = true;
+		},
+		onDragleave() {
+			if (this.folder || this.browser.folder) this.draghover = false;
+		},
+		onDrop(e) {
+			this.draghover = false;
+
+			// ファイルだったら
+			if (e.dataTransfer.files.length > 0) {
+				Array.from(e.dataTransfer.files).forEach(file => {
+					this.browser.upload(file, this.folder);
+				});
+				return;
+			}
+
+			//#region ドライブのファイル
+			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			if (driveFile != null && driveFile != '') {
+				const file = JSON.parse(driveFile);
+				this.browser.removeFile(file.id);
+				(this as any).api('drive/files/update', {
+					fileId: file.id,
+					folderId: this.folder ? this.folder.id : null
+				});
+			}
+			//#endregion
+
+			//#region ドライブのフォルダ
+			const driveFolder = e.dataTransfer.getData('mk_drive_folder');
+			if (driveFolder != null && driveFolder != '') {
+				const folder = JSON.parse(driveFolder);
+				// 移動先が自分自身ならreject
+				if (this.folder && folder.id == this.folder.id) return;
+				this.browser.removeFolder(folder.id);
+				(this as any).api('drive/folders/update', {
+					folderId: folder.id,
+					parentId: this.folder ? this.folder.id : null
+				});
+			}
+			//#endregion
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.root.nav-folder
+	> *
+		pointer-events none
+
+	&[data-draghover]
+		background #eee
+
+</style>
diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue
new file mode 100644
index 0000000000..c766dfec12
--- /dev/null
+++ b/src/client/app/desktop/views/components/drive.vue
@@ -0,0 +1,773 @@
+<template>
+<div class="mk-drive">
+	<nav>
+		<div class="path" @contextmenu.prevent.stop="() => {}">
+			<x-nav-folder :class="{ current: folder == null }"/>
+			<template v-for="folder in hierarchyFolders">
+				<span class="separator">%fa:angle-right%</span>
+				<x-nav-folder :folder="folder" :key="folder.id"/>
+			</template>
+			<span class="separator" v-if="folder != null">%fa:angle-right%</span>
+			<span class="folder current" v-if="folder != null">{{ folder.name }}</span>
+		</div>
+		<input class="search" type="search" placeholder="&#xf002; %i18n:desktop.tags.mk-drive-browser.search%"/>
+	</nav>
+	<div class="main" :class="{ uploading: uploadings.length > 0, fetching }"
+		ref="main"
+		@mousedown="onMousedown"
+		@dragover.prevent.stop="onDragover"
+		@dragenter="onDragenter"
+		@dragleave="onDragleave"
+		@drop.prevent.stop="onDrop"
+		@contextmenu.prevent.stop="onContextmenu"
+	>
+		<div class="selection" ref="selection"></div>
+		<div class="contents" ref="contents">
+			<div class="folders" ref="foldersContainer" v-if="folders.length > 0">
+				<x-folder v-for="folder in folders" :key="folder.id" class="folder" :folder="folder"/>
+				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
+				<div class="padding" v-for="n in 16"></div>
+				<button v-if="moreFolders">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
+			</div>
+			<div class="files" ref="filesContainer" v-if="files.length > 0">
+				<x-file v-for="file in files" :key="file.id" class="file" :file="file"/>
+				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
+				<div class="padding" v-for="n in 16"></div>
+				<button v-if="moreFiles" @click="fetchMoreFiles">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
+			</div>
+			<div class="empty" v-if="files.length == 0 && folders.length == 0 && !fetching">
+				<p v-if="draghover">%i18n:desktop.tags.mk-drive-browser.empty-draghover%</p>
+				<p v-if="!draghover && folder == null"><strong>%i18n:desktop.tags.mk-drive-browser.empty-drive%</strong><br/>%i18n:desktop.tags.mk-drive-browser.empty-drive-description%</p>
+				<p v-if="!draghover && folder != null">%i18n:desktop.tags.mk-drive-browser.empty-folder%</p>
+			</div>
+		</div>
+		<div class="fetching" v-if="fetching">
+			<div class="spinner">
+				<div class="dot1"></div>
+				<div class="dot2"></div>
+			</div>
+		</div>
+	</div>
+	<div class="dropzone" v-if="draghover"></div>
+	<mk-uploader ref="uploader" @change="onChangeUploaderUploads" @uploaded="onUploaderUploaded"/>
+	<input ref="fileInput" type="file" accept="*/*" multiple="multiple" tabindex="-1" @change="onChangeFileInput"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import MkDriveWindow from './drive-window.vue';
+import XNavFolder from './drive.nav-folder.vue';
+import XFolder from './drive.folder.vue';
+import XFile from './drive.file.vue';
+import contains from '../../../common/scripts/contains';
+import contextmenu from '../../api/contextmenu';
+import { url } from '../../../config';
+
+export default Vue.extend({
+	components: {
+		XNavFolder,
+		XFolder,
+		XFile
+	},
+	props: {
+		initFolder: {
+			type: Object,
+			required: false
+		},
+		multiple: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			/**
+			 * 現在の階層(フォルダ)
+			 * * null でルートを表す
+			 */
+			folder: null,
+
+			files: [],
+			folders: [],
+			moreFiles: false,
+			moreFolders: false,
+			hierarchyFolders: [],
+			selectedFiles: [],
+			uploadings: [],
+			connection: null,
+			connectionId: null,
+
+			/**
+			 * ドロップされようとしているか
+			 */
+			draghover: false,
+
+			/**
+			 * 自信の所有するアイテムがドラッグをスタートさせたか
+			 * (自分自身の階層にドロップできないようにするためのフラグ)
+			 */
+			isDragSource: false,
+
+			fetching: true
+		};
+	},
+	mounted() {
+		this.connection = (this as any).os.streams.driveStream.getConnection();
+		this.connectionId = (this as any).os.streams.driveStream.use();
+
+		this.connection.on('file_created', this.onStreamDriveFileCreated);
+		this.connection.on('file_updated', this.onStreamDriveFileUpdated);
+		this.connection.on('folder_created', this.onStreamDriveFolderCreated);
+		this.connection.on('folder_updated', this.onStreamDriveFolderUpdated);
+
+		if (this.initFolder) {
+			this.move(this.initFolder);
+		} else {
+			this.fetch();
+		}
+	},
+	beforeDestroy() {
+		this.connection.off('file_created', this.onStreamDriveFileCreated);
+		this.connection.off('file_updated', this.onStreamDriveFileUpdated);
+		this.connection.off('folder_created', this.onStreamDriveFolderCreated);
+		this.connection.off('folder_updated', this.onStreamDriveFolderUpdated);
+		(this as any).os.streams.driveStream.dispose(this.connectionId);
+	},
+	methods: {
+		onContextmenu(e) {
+			contextmenu(e, [{
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-base-contextmenu.create-folder%',
+				icon: '%fa:R folder%',
+				onClick: this.createFolder
+			}, {
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-base-contextmenu.upload%',
+				icon: '%fa:upload%',
+				onClick: this.selectLocalFile
+			}, {
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-base-contextmenu.url-upload%',
+				icon: '%fa:cloud-upload-alt%',
+				onClick: this.urlUpload
+			}]);
+		},
+
+		onStreamDriveFileCreated(file) {
+			this.addFile(file, true);
+		},
+
+		onStreamDriveFileUpdated(file) {
+			const current = this.folder ? this.folder.id : null;
+			if (current != file.folderId) {
+				this.removeFile(file);
+			} else {
+				this.addFile(file, true);
+			}
+		},
+
+		onStreamDriveFolderCreated(folder) {
+			this.addFolder(folder, true);
+		},
+
+		onStreamDriveFolderUpdated(folder) {
+			const current = this.folder ? this.folder.id : null;
+			if (current != folder.parentId) {
+				this.removeFolder(folder);
+			} else {
+				this.addFolder(folder, true);
+			}
+		},
+
+		onChangeUploaderUploads(uploads) {
+			this.uploadings = uploads;
+		},
+
+		onUploaderUploaded(file) {
+			this.addFile(file, true);
+		},
+
+		onMousedown(e): any {
+			if (contains(this.$refs.foldersContainer, e.target) || contains(this.$refs.filesContainer, e.target)) return true;
+
+			const main = this.$refs.main as any;
+			const selection = this.$refs.selection as any;
+
+			const rect = main.getBoundingClientRect();
+
+			const left = e.pageX + main.scrollLeft - rect.left - window.pageXOffset
+			const top = e.pageY + main.scrollTop - rect.top - window.pageYOffset
+
+			const move = e => {
+				selection.style.display = 'block';
+
+				const cursorX = e.pageX + main.scrollLeft - rect.left - window.pageXOffset;
+				const cursorY = e.pageY + main.scrollTop - rect.top - window.pageYOffset;
+				const w = cursorX - left;
+				const h = cursorY - top;
+
+				if (w > 0) {
+					selection.style.width = w + 'px';
+					selection.style.left = left + 'px';
+				} else {
+					selection.style.width = -w + 'px';
+					selection.style.left = cursorX + 'px';
+				}
+
+				if (h > 0) {
+					selection.style.height = h + 'px';
+					selection.style.top = top + 'px';
+				} else {
+					selection.style.height = -h + 'px';
+					selection.style.top = cursorY + 'px';
+				}
+			};
+
+			const up = e => {
+				document.documentElement.removeEventListener('mousemove', move);
+				document.documentElement.removeEventListener('mouseup', up);
+
+				selection.style.display = 'none';
+			};
+
+			document.documentElement.addEventListener('mousemove', move);
+			document.documentElement.addEventListener('mouseup', up);
+		},
+
+		onDragover(e): any {
+			// ドラッグ元が自分自身の所有するアイテムだったら
+			if (this.isDragSource) {
+				// 自分自身にはドロップさせない
+				e.dataTransfer.dropEffect = 'none';
+				return;
+			}
+
+			const isFile = e.dataTransfer.items[0].kind == 'file';
+			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
+			const isDriveFolder = e.dataTransfer.types[0] == 'mk_drive_folder';
+
+			if (isFile || isDriveFile || isDriveFolder) {
+				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
+			} else {
+				e.dataTransfer.dropEffect = 'none';
+			}
+
+			return false;
+		},
+
+		onDragenter(e) {
+			if (!this.isDragSource) this.draghover = true;
+		},
+
+		onDragleave(e) {
+			this.draghover = false;
+		},
+
+		onDrop(e): any {
+			this.draghover = false;
+
+			// ドロップされてきたものがファイルだったら
+			if (e.dataTransfer.files.length > 0) {
+				Array.from(e.dataTransfer.files).forEach(file => {
+					this.upload(file, this.folder);
+				});
+				return;
+			}
+
+			//#region ドライブのファイル
+			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			if (driveFile != null && driveFile != '') {
+				const file = JSON.parse(driveFile);
+				if (this.files.some(f => f.id == file.id)) return;
+				this.removeFile(file.id);
+				(this as any).api('drive/files/update', {
+					fileId: file.id,
+					folderId: this.folder ? this.folder.id : null
+				});
+			}
+			//#endregion
+
+			//#region ドライブのフォルダ
+			const driveFolder = e.dataTransfer.getData('mk_drive_folder');
+			if (driveFolder != null && driveFolder != '') {
+				const folder = JSON.parse(driveFolder);
+
+				// 移動先が自分自身ならreject
+				if (this.folder && folder.id == this.folder.id) return false;
+				if (this.folders.some(f => f.id == folder.id)) return false;
+				this.removeFolder(folder.id);
+				(this as any).api('drive/folders/update', {
+					folderId: folder.id,
+					parentId: this.folder ? this.folder.id : null
+				}).then(() => {
+					// noop
+				}).catch(err => {
+					switch (err) {
+						case 'detected-circular-definition':
+							(this as any).apis.dialog({
+								title: '%fa:exclamation-triangle%%i18n:desktop.tags.mk-drive-browser.unable-to-process%',
+								text: '%i18n:desktop.tags.mk-drive-browser.circular-reference-detected%',
+								actions: [{
+									text: '%i18n:common.ok%'
+								}]
+							});
+							break;
+						default:
+							alert('%i18n:desktop.tags.mk-drive-browser.unhandled-error% ' + err);
+					}
+				});
+			}
+			//#endregion
+		},
+
+		selectLocalFile() {
+			(this.$refs.fileInput as any).click();
+		},
+
+		urlUpload() {
+			(this as any).apis.input({
+				title: '%i18n:desktop.tags.mk-drive-browser.url-upload%',
+				placeholder: '%i18n:desktop.tags.mk-drive-browser.url-of-file%'
+			}).then(url => {
+				(this as any).api('drive/files/upload_from_url', {
+					url: url,
+					folderId: this.folder ? this.folder.id : undefined
+				});
+
+				(this as any).apis.dialog({
+					title: '%fa:check%%i18n:desktop.tags.mk-drive-browser.url-upload-requested%',
+					text: '%i18n:desktop.tags.mk-drive-browser.may-take-time%',
+					actions: [{
+						text: '%i18n:common.ok%'
+					}]
+				});
+			});
+		},
+
+		createFolder() {
+			(this as any).apis.input({
+				title: '%i18n:desktop.tags.mk-drive-browser.create-folder%',
+				placeholder: '%i18n:desktop.tags.mk-drive-browser.folder-name%'
+			}).then(name => {
+				(this as any).api('drive/folders/create', {
+					name: name,
+					folderId: this.folder ? this.folder.id : undefined
+				}).then(folder => {
+					this.addFolder(folder, true);
+				});
+			});
+		},
+
+		onChangeFileInput() {
+			Array.from((this.$refs.fileInput as any).files).forEach(file => {
+				this.upload(file, this.folder);
+			});
+		},
+
+		upload(file, folder) {
+			if (folder && typeof folder == 'object') folder = folder.id;
+			(this.$refs.uploader as any).upload(file, folder);
+		},
+
+		chooseFile(file) {
+			const isAlreadySelected = this.selectedFiles.some(f => f.id == file.id);
+			if (this.multiple) {
+				if (isAlreadySelected) {
+					this.selectedFiles = this.selectedFiles.filter(f => f.id != file.id);
+				} else {
+					this.selectedFiles.push(file);
+				}
+				this.$emit('change-selection', this.selectedFiles);
+			} else {
+				if (isAlreadySelected) {
+					this.$emit('selected', file);
+				} else {
+					this.selectedFiles = [file];
+					this.$emit('change-selection', [file]);
+				}
+			}
+		},
+
+		newWindow(folder) {
+			if (document.body.clientWidth > 800) {
+				(this as any).os.new(MkDriveWindow, {
+					folder: folder
+				});
+			} else {
+				window.open(url + '/i/drive/folder/' + folder.id,
+					'drive_window',
+					'height=500, width=800');
+			}
+		},
+
+		move(target) {
+			if (target == null) {
+				this.goRoot();
+				return;
+			} else if (typeof target == 'object') {
+				target = target.id;
+			}
+
+			this.fetching = true;
+
+			(this as any).api('drive/folders/show', {
+				folderId: target
+			}).then(folder => {
+				this.folder = folder;
+				this.hierarchyFolders = [];
+
+				const dive = folder => {
+					this.hierarchyFolders.unshift(folder);
+					if (folder.parent) dive(folder.parent);
+				};
+
+				if (folder.parent) dive(folder.parent);
+
+				this.$emit('open-folder', folder);
+				this.fetch();
+			});
+		},
+
+		addFolder(folder, unshift = false) {
+			const current = this.folder ? this.folder.id : null;
+			if (current != folder.parentId) return;
+
+			if (this.folders.some(f => f.id == folder.id)) {
+				const exist = this.folders.map(f => f.id).indexOf(folder.id);
+				Vue.set(this.folders, exist, folder);
+				return;
+			}
+
+			if (unshift) {
+				this.folders.unshift(folder);
+			} else {
+				this.folders.push(folder);
+			}
+		},
+
+		addFile(file, unshift = false) {
+			const current = this.folder ? this.folder.id : null;
+			if (current != file.folderId) return;
+
+			if (this.files.some(f => f.id == file.id)) {
+				const exist = this.files.map(f => f.id).indexOf(file.id);
+				Vue.set(this.files, exist, file);
+				return;
+			}
+
+			if (unshift) {
+				this.files.unshift(file);
+			} else {
+				this.files.push(file);
+			}
+		},
+
+		removeFolder(folder) {
+			if (typeof folder == 'object') folder = folder.id;
+			this.folders = this.folders.filter(f => f.id != folder);
+		},
+
+		removeFile(file) {
+			if (typeof file == 'object') file = file.id;
+			this.files = this.files.filter(f => f.id != file);
+		},
+
+		appendFile(file) {
+			this.addFile(file);
+		},
+
+		appendFolder(folder) {
+			this.addFolder(folder);
+		},
+
+		prependFile(file) {
+			this.addFile(file, true);
+		},
+
+		prependFolder(folder) {
+			this.addFolder(folder, true);
+		},
+
+		goRoot() {
+			// 既にrootにいるなら何もしない
+			if (this.folder == null) return;
+
+			this.folder = null;
+			this.hierarchyFolders = [];
+			this.$emit('move-root');
+			this.fetch();
+		},
+
+		fetch() {
+			this.folders = [];
+			this.files = [];
+			this.moreFolders = false;
+			this.moreFiles = false;
+			this.fetching = true;
+
+			let fetchedFolders = null;
+			let fetchedFiles = null;
+
+			const foldersMax = 30;
+			const filesMax = 30;
+
+			// フォルダ一覧取得
+			(this as any).api('drive/folders', {
+				folderId: this.folder ? this.folder.id : null,
+				limit: foldersMax + 1
+			}).then(folders => {
+				if (folders.length == foldersMax + 1) {
+					this.moreFolders = true;
+					folders.pop();
+				}
+				fetchedFolders = folders;
+				complete();
+			});
+
+			// ファイル一覧取得
+			(this as any).api('drive/files', {
+				folderId: this.folder ? this.folder.id : null,
+				limit: filesMax + 1
+			}).then(files => {
+				if (files.length == filesMax + 1) {
+					this.moreFiles = true;
+					files.pop();
+				}
+				fetchedFiles = files;
+				complete();
+			});
+
+			let flag = false;
+			const complete = () => {
+				if (flag) {
+					fetchedFolders.forEach(this.appendFolder);
+					fetchedFiles.forEach(this.appendFile);
+					this.fetching = false;
+				} else {
+					flag = true;
+				}
+			};
+		},
+
+		fetchMoreFiles() {
+			this.fetching = true;
+
+			const max = 30;
+
+			// ファイル一覧取得
+			(this as any).api('drive/files', {
+				folderId: this.folder ? this.folder.id : null,
+				limit: max + 1
+			}).then(files => {
+				if (files.length == max + 1) {
+					this.moreFiles = true;
+					files.pop();
+				} else {
+					this.moreFiles = false;
+				}
+				files.forEach(this.appendFile);
+				this.fetching = false;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-drive
+
+	> nav
+		display block
+		z-index 2
+		width 100%
+		overflow auto
+		font-size 0.9em
+		color #555
+		background #fff
+		//border-bottom 1px solid #dfdfdf
+		box-shadow 0 1px 0 rgba(0, 0, 0, 0.05)
+
+		&, *
+			user-select none
+
+		> .path
+			display inline-block
+			vertical-align bottom
+			margin 0
+			padding 0 8px
+			width calc(100% - 200px)
+			line-height 38px
+			white-space nowrap
+
+			> *
+				display inline-block
+				margin 0
+				padding 0 8px
+				line-height 38px
+				cursor pointer
+
+				i
+					margin-right 4px
+
+				*
+					pointer-events none
+
+				&:hover
+					text-decoration underline
+
+				&.current
+					font-weight bold
+					cursor default
+
+					&:hover
+						text-decoration none
+
+				&.separator
+					margin 0
+					padding 0
+					opacity 0.5
+					cursor default
+
+					> [data-fa]
+						margin 0
+
+		> .search
+			display inline-block
+			vertical-align bottom
+			user-select text
+			cursor auto
+			margin 0
+			padding 0 18px
+			width 200px
+			font-size 1em
+			line-height 38px
+			background transparent
+			outline none
+			//border solid 1px #ddd
+			border none
+			border-radius 0
+			box-shadow none
+			transition color 0.5s ease, border 0.5s ease
+			font-family FontAwesome, sans-serif
+
+			&[data-active='true']
+				background #fff
+
+			&::-webkit-input-placeholder,
+			&:-ms-input-placeholder,
+			&:-moz-placeholder
+				color $ui-control-foreground-color
+
+	> .main
+		padding 8px
+		height calc(100% - 38px)
+		overflow auto
+
+		&, *
+			user-select none
+
+		&.fetching
+			cursor wait !important
+
+			*
+				pointer-events none
+
+			> .contents
+				opacity 0.5
+
+		&.uploading
+			height calc(100% - 38px - 100px)
+
+		> .selection
+			display none
+			position absolute
+			z-index 128
+			top 0
+			left 0
+			border solid 1px $theme-color
+			background rgba($theme-color, 0.5)
+			pointer-events none
+
+		> .contents
+
+			> .folders
+			> .files
+				display flex
+				flex-wrap wrap
+
+				> .folder
+				> .file
+					flex-grow 1
+					width 144px
+					margin 4px
+
+				> .padding
+					flex-grow 1
+					pointer-events none
+					width 144px + 8px // 8px is margin
+
+			> .empty
+				padding 16px
+				text-align center
+				color #999
+				pointer-events none
+
+				> p
+					margin 0
+
+		> .fetching
+			.spinner
+				margin 100px auto
+				width 40px
+				height 40px
+				text-align center
+
+				animation sk-rotate 2.0s infinite linear
+
+			.dot1, .dot2
+				width 60%
+				height 60%
+				display inline-block
+				position absolute
+				top 0
+				background-color rgba(0, 0, 0, 0.3)
+				border-radius 100%
+
+				animation sk-bounce 2.0s infinite ease-in-out
+
+			.dot2
+				top auto
+				bottom 0
+				animation-delay -1.0s
+
+			@keyframes sk-rotate { 100% { transform: rotate(360deg); }}
+
+			@keyframes sk-bounce {
+				0%, 100% {
+					transform: scale(0.0);
+				} 50% {
+					transform: scale(1.0);
+				}
+			}
+
+	> .dropzone
+		position absolute
+		left 0
+		top 38px
+		width 100%
+		height calc(100% - 38px)
+		border dashed 2px rgba($theme-color, 0.5)
+		pointer-events none
+
+	> .mk-uploader
+		height 100px
+		padding 16px
+		background #fff
+
+	> input
+		display none
+
+</style>
diff --git a/src/client/app/desktop/views/components/ellipsis-icon.vue b/src/client/app/desktop/views/components/ellipsis-icon.vue
new file mode 100644
index 0000000000..c54a7db29d
--- /dev/null
+++ b/src/client/app/desktop/views/components/ellipsis-icon.vue
@@ -0,0 +1,37 @@
+<template>
+<div class="mk-ellipsis-icon">
+	<div></div><div></div><div></div>
+</div>
+</template>
+
+<style lang="stylus" scoped>
+.mk-ellipsis-icon
+	width 70px
+	margin 0 auto
+	text-align center
+
+	> div
+		display inline-block
+		width 18px
+		height 18px
+		background-color rgba(0, 0, 0, 0.3)
+		border-radius 100%
+		animation bounce 1.4s infinite ease-in-out both
+
+		&:nth-child(1)
+			animation-delay 0s
+
+		&:nth-child(2)
+			margin 0 6px
+			animation-delay 0.16s
+
+		&:nth-child(3)
+			animation-delay 0.32s
+
+	@keyframes bounce
+		0%, 80%, 100%
+			transform scale(0)
+		40%
+			transform scale(1)
+
+</style>
diff --git a/src/client/app/desktop/views/components/follow-button.vue b/src/client/app/desktop/views/components/follow-button.vue
new file mode 100644
index 0000000000..9eb22b0fb8
--- /dev/null
+++ b/src/client/app/desktop/views/components/follow-button.vue
@@ -0,0 +1,164 @@
+<template>
+<button class="mk-follow-button"
+	:class="{ wait, follow: !user.isFollowing, unfollow: user.isFollowing, big: size == 'big' }"
+	@click="onClick"
+	:disabled="wait"
+	:title="user.isFollowing ? 'フォロー解除' : 'フォローする'"
+>
+	<template v-if="!wait && user.isFollowing">
+		<template v-if="size == 'compact'">%fa:minus%</template>
+		<template v-if="size == 'big'">%fa:minus%フォロー解除</template>
+	</template>
+	<template v-if="!wait && !user.isFollowing">
+		<template v-if="size == 'compact'">%fa:plus%</template>
+		<template v-if="size == 'big'">%fa:plus%フォロー</template>
+	</template>
+	<template v-if="wait">%fa:spinner .pulse .fw%</template>
+</button>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: {
+		user: {
+			type: Object,
+			required: true
+		},
+		size: {
+			type: String,
+			default: 'compact'
+		}
+	},
+	data() {
+		return {
+			wait: false,
+			connection: null,
+			connectionId: null
+		};
+	},
+	mounted() {
+		this.connection = (this as any).os.stream.getConnection();
+		this.connectionId = (this as any).os.stream.use();
+
+		this.connection.on('follow', this.onFollow);
+		this.connection.on('unfollow', this.onUnfollow);
+	},
+	beforeDestroy() {
+		this.connection.off('follow', this.onFollow);
+		this.connection.off('unfollow', this.onUnfollow);
+		(this as any).os.stream.dispose(this.connectionId);
+	},
+	methods: {
+
+		onFollow(user) {
+			if (user.id == this.user.id) {
+				this.user.isFollowing = user.isFollowing;
+			}
+		},
+
+		onUnfollow(user) {
+			if (user.id == this.user.id) {
+				this.user.isFollowing = user.isFollowing;
+			}
+		},
+
+		onClick() {
+			this.wait = true;
+			if (this.user.isFollowing) {
+				(this as any).api('following/delete', {
+					userId: this.user.id
+				}).then(() => {
+					this.user.isFollowing = false;
+				}).catch(err => {
+					console.error(err);
+				}).then(() => {
+					this.wait = false;
+				});
+			} else {
+				(this as any).api('following/create', {
+					userId: this.user.id
+				}).then(() => {
+					this.user.isFollowing = true;
+				}).catch(err => {
+					console.error(err);
+				}).then(() => {
+					this.wait = false;
+				});
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-follow-button
+	display block
+	cursor pointer
+	padding 0
+	margin 0
+	width 32px
+	height 32px
+	font-size 1em
+	outline none
+	border-radius 4px
+
+	*
+		pointer-events none
+
+	&:focus
+		&:after
+			content ""
+			pointer-events none
+			position absolute
+			top -5px
+			right -5px
+			bottom -5px
+			left -5px
+			border 2px solid rgba($theme-color, 0.3)
+			border-radius 8px
+
+	&.follow
+		color #888
+		background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+		border solid 1px #e2e2e2
+
+		&:hover
+			background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+			border-color #dcdcdc
+
+		&:active
+			background #ececec
+			border-color #dcdcdc
+
+	&.unfollow
+		color $theme-color-foreground
+		background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+		border solid 1px lighten($theme-color, 15%)
+
+		&:not(:disabled)
+			font-weight bold
+
+		&:hover:not(:disabled)
+			background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+			border-color $theme-color
+
+		&:active:not(:disabled)
+			background $theme-color
+			border-color $theme-color
+
+	&.wait
+		cursor wait !important
+		opacity 0.7
+
+	&.big
+		width 100%
+		height 38px
+		line-height 38px
+
+		i
+			margin-right 8px
+
+</style>
diff --git a/src/client/app/desktop/views/components/followers-window.vue b/src/client/app/desktop/views/components/followers-window.vue
new file mode 100644
index 0000000000..623971fa33
--- /dev/null
+++ b/src/client/app/desktop/views/components/followers-window.vue
@@ -0,0 +1,26 @@
+<template>
+<mk-window width="400px" height="550px" @closed="$destroy">
+	<span slot="header" :class="$style.header">
+		<img :src="`${user.avatarUrl}?thumbnail&size=64`" alt=""/>{{ user.name }}のフォロワー
+	</span>
+	<mk-followers :user="user"/>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['user']
+});
+</script>
+
+<style lang="stylus" module>
+.header
+	> img
+		display inline-block
+		vertical-align bottom
+		height calc(100% - 10px)
+		margin 5px
+		border-radius 4px
+
+</style>
diff --git a/src/client/app/desktop/views/components/followers.vue b/src/client/app/desktop/views/components/followers.vue
new file mode 100644
index 0000000000..a1b98995d8
--- /dev/null
+++ b/src/client/app/desktop/views/components/followers.vue
@@ -0,0 +1,26 @@
+<template>
+<mk-users-list
+	:fetch="fetch"
+	:count="user.followersCount"
+	:you-know-count="user.followersYouKnowCount"
+>
+	フォロワーはいないようです。
+</mk-users-list>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['user'],
+	methods: {
+		fetch(iknow, limit, cursor, cb) {
+			(this as any).api('users/followers', {
+				userId: this.user.id,
+				iknow: iknow,
+				limit: limit,
+				cursor: cursor ? cursor : undefined
+			}).then(cb);
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/components/following-window.vue b/src/client/app/desktop/views/components/following-window.vue
new file mode 100644
index 0000000000..612847b386
--- /dev/null
+++ b/src/client/app/desktop/views/components/following-window.vue
@@ -0,0 +1,26 @@
+<template>
+<mk-window width="400px" height="550px" @closed="$destroy">
+	<span slot="header" :class="$style.header">
+		<img :src="`${user.avatarUrl}?thumbnail&size=64`" alt=""/>{{ user.name }}のフォロー
+	</span>
+	<mk-following :user="user"/>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['user']
+});
+</script>
+
+<style lang="stylus" module>
+.header
+	> img
+		display inline-block
+		vertical-align bottom
+		height calc(100% - 10px)
+		margin 5px
+		border-radius 4px
+
+</style>
diff --git a/src/client/app/desktop/views/components/following.vue b/src/client/app/desktop/views/components/following.vue
new file mode 100644
index 0000000000..b7aedda84f
--- /dev/null
+++ b/src/client/app/desktop/views/components/following.vue
@@ -0,0 +1,26 @@
+<template>
+<mk-users-list
+	:fetch="fetch"
+	:count="user.followingCount"
+	:you-know-count="user.followingYouKnowCount"
+>
+	フォロー中のユーザーはいないようです。
+</mk-users-list>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['user'],
+	methods: {
+		fetch(iknow, limit, cursor, cb) {
+			(this as any).api('users/following', {
+				userId: this.user.id,
+				iknow: iknow,
+				limit: limit,
+				cursor: cursor ? cursor : undefined
+			}).then(cb);
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/components/friends-maker.vue b/src/client/app/desktop/views/components/friends-maker.vue
new file mode 100644
index 0000000000..fd9914b152
--- /dev/null
+++ b/src/client/app/desktop/views/components/friends-maker.vue
@@ -0,0 +1,171 @@
+<template>
+<div class="mk-friends-maker">
+	<p class="title">気になるユーザーをフォロー:</p>
+	<div class="users" v-if="!fetching && users.length > 0">
+		<div class="user" v-for="user in users" :key="user.id">
+			<router-link class="avatar-anchor" :to="`/@${getAcct(user)}`">
+				<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="user.id"/>
+			</router-link>
+			<div class="body">
+				<router-link class="name" :to="`/@${getAcct(user)}`" v-user-preview="user.id">{{ user.name }}</router-link>
+				<p class="username">@{{ getAcct(user) }}</p>
+			</div>
+			<mk-follow-button :user="user"/>
+		</div>
+	</div>
+	<p class="empty" v-if="!fetching && users.length == 0">おすすめのユーザーは見つかりませんでした。</p>
+	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%読み込んでいます<mk-ellipsis/></p>
+	<a class="refresh" @click="refresh">もっと見る</a>
+	<button class="close" @click="$destroy()" title="閉じる">%fa:times%</button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
+
+export default Vue.extend({
+	data() {
+		return {
+			users: [],
+			fetching: true,
+			limit: 6,
+			page: 0
+		};
+	},
+	mounted() {
+		this.fetch();
+	},
+	methods: {
+		getAcct,
+		fetch() {
+			this.fetching = true;
+			this.users = [];
+
+			(this as any).api('users/recommendation', {
+				limit: this.limit,
+				offset: this.limit * this.page
+			}).then(users => {
+				this.users = users;
+				this.fetching = false;
+			});
+		},
+		refresh() {
+			if (this.users.length < this.limit) {
+				this.page = 0;
+			} else {
+				this.page++;
+			}
+			this.fetch();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-friends-maker
+	padding 24px
+
+	> .title
+		margin 0 0 12px 0
+		font-size 1em
+		font-weight bold
+		color #888
+
+	> .users
+		&:after
+			content ""
+			display block
+			clear both
+
+		> .user
+			padding 16px
+			width 238px
+			float left
+
+			&:after
+				content ""
+				display block
+				clear both
+
+			> .avatar-anchor
+				display block
+				float left
+				margin 0 12px 0 0
+
+				> .avatar
+					display block
+					width 42px
+					height 42px
+					margin 0
+					border-radius 8px
+					vertical-align bottom
+
+			> .body
+				float left
+				width calc(100% - 54px)
+
+				> .name
+					margin 0
+					font-size 16px
+					line-height 24px
+					color #555
+
+				> .username
+					margin 0
+					font-size 15px
+					line-height 16px
+					color #ccc
+
+			> .mk-follow-button
+				position absolute
+				top 16px
+				right 16px
+
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+	> .fetching
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+		> [data-fa]
+			margin-right 4px
+
+	> .refresh
+		display block
+		margin 0 8px 0 0
+		text-align right
+		font-size 0.9em
+		color #999
+
+	> .close
+		cursor pointer
+		display block
+		position absolute
+		top 6px
+		right 6px
+		z-index 1
+		margin 0
+		padding 0
+		font-size 1.2em
+		color #999
+		border none
+		outline none
+		background transparent
+
+		&:hover
+			color #555
+
+		&:active
+			color #222
+
+		> [data-fa]
+			padding 14px
+
+</style>
diff --git a/src/client/app/desktop/views/components/game-window.vue b/src/client/app/desktop/views/components/game-window.vue
new file mode 100644
index 0000000000..3c8bf40e12
--- /dev/null
+++ b/src/client/app/desktop/views/components/game-window.vue
@@ -0,0 +1,37 @@
+<template>
+<mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="$destroy">
+	<span slot="header" :class="$style.header">%fa:gamepad%オセロ</span>
+	<mk-othello :class="$style.content" @gamed="g => game = g"/>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { url } from '../../../config';
+
+export default Vue.extend({
+	data() {
+		return {
+			game: null
+		};
+	},
+	computed: {
+		popout(): string {
+			return this.game
+				? `${url}/othello/${this.game.id}`
+				: `${url}/othello`;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.header
+	> [data-fa]
+		margin-right 4px
+
+.content
+	height 100%
+	overflow auto
+
+</style>
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
new file mode 100644
index 0000000000..7145ddce03
--- /dev/null
+++ b/src/client/app/desktop/views/components/home.vue
@@ -0,0 +1,357 @@
+<template>
+<div class="mk-home" :data-customize="customize">
+	<div class="customize" v-if="customize">
+		<router-link to="/">%fa:check%完了</router-link>
+		<div>
+			<div class="adder">
+				<p>ウィジェットを追加:</p>
+				<select v-model="widgetAdderSelected">
+					<option value="profile">プロフィール</option>
+					<option value="calendar">カレンダー</option>
+					<option value="timemachine">カレンダー(タイムマシン)</option>
+					<option value="activity">アクティビティ</option>
+					<option value="rss">RSSリーダー</option>
+					<option value="trends">トレンド</option>
+					<option value="photo-stream">フォトストリーム</option>
+					<option value="slideshow">スライドショー</option>
+					<option value="version">バージョン</option>
+					<option value="broadcast">ブロードキャスト</option>
+					<option value="notifications">通知</option>
+					<option value="users">おすすめユーザー</option>
+					<option value="polls">投票</option>
+					<option value="post-form">投稿フォーム</option>
+					<option value="messaging">メッセージ</option>
+					<option value="channel">チャンネル</option>
+					<option value="access-log">アクセスログ</option>
+					<option value="server">サーバー情報</option>
+					<option value="donation">寄付のお願い</option>
+					<option value="nav">ナビゲーション</option>
+					<option value="tips">ヒント</option>
+				</select>
+				<button @click="addWidget">追加</button>
+			</div>
+			<div class="trash">
+				<x-draggable v-model="trash" :options="{ group: 'x' }" @add="onTrash"></x-draggable>
+				<p>ゴミ箱</p>
+			</div>
+		</div>
+	</div>
+	<div class="main">
+		<template v-if="customize">
+			<x-draggable v-for="place in ['left', 'right']"
+				:list="widgets[place]"
+				:class="place"
+				:data-place="place"
+				:options="{ group: 'x', animation: 150 }"
+				@sort="onWidgetSort"
+				:key="place"
+			>
+				<div v-for="widget in widgets[place]" class="customize-container" :key="widget.id" @contextmenu.stop.prevent="onWidgetContextmenu(widget.id)">
+					<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true"/>
+				</div>
+			</x-draggable>
+			<div class="main">
+				<a @click="hint">カスタマイズのヒント</a>
+				<div>
+					<mk-post-form v-if="os.i.account.clientSettings.showPostFormOnTopOfTl"/>
+					<mk-timeline ref="tl" @loaded="onTlLoaded"/>
+				</div>
+			</div>
+		</template>
+		<template v-else>
+			<div v-for="place in ['left', 'right']" :class="place">
+				<component v-for="widget in widgets[place]" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" @chosen="warp"/>
+			</div>
+			<div class="main">
+				<mk-post-form v-if="os.i.account.clientSettings.showPostFormOnTopOfTl"/>
+				<mk-timeline ref="tl" @loaded="onTlLoaded" v-if="mode == 'timeline'"/>
+				<mk-mentions @loaded="onTlLoaded" v-if="mode == 'mentions'"/>
+			</div>
+		</template>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as XDraggable from 'vuedraggable';
+import * as uuid from 'uuid';
+
+export default Vue.extend({
+	components: {
+		XDraggable
+	},
+	props: {
+		customize: Boolean,
+		mode: {
+			type: String,
+			default: 'timeline'
+		}
+	},
+	data() {
+		return {
+			connection: null,
+			connectionId: null,
+			widgetAdderSelected: null,
+			trash: [],
+			widgets: {
+				left: [],
+				right: []
+			}
+		};
+	},
+	computed: {
+		home: {
+			get(): any[] {
+				//#region 互換性のため
+				(this as any).os.i.account.clientSettings.home.forEach(w => {
+					if (w.name == 'rss-reader') w.name = 'rss';
+					if (w.name == 'user-recommendation') w.name = 'users';
+					if (w.name == 'recommended-polls') w.name = 'polls';
+				});
+				//#endregion
+				return (this as any).os.i.account.clientSettings.home;
+			},
+			set(value) {
+				(this as any).os.i.account.clientSettings.home = value;
+			}
+		},
+		left(): any[] {
+			return this.home.filter(w => w.place == 'left');
+		},
+		right(): any[] {
+			return this.home.filter(w => w.place == 'right');
+		}
+	},
+	created() {
+		this.widgets.left = this.left;
+		this.widgets.right = this.right;
+		this.$watch('os.i.account.clientSettings', i => {
+			this.widgets.left = this.left;
+			this.widgets.right = this.right;
+		}, {
+			deep: true
+		});
+	},
+	mounted() {
+		this.connection = (this as any).os.stream.getConnection();
+		this.connectionId = (this as any).os.stream.use();
+
+		this.connection.on('home_updated', this.onHomeUpdated);
+	},
+	beforeDestroy() {
+		this.connection.off('home_updated', this.onHomeUpdated);
+		(this as any).os.stream.dispose(this.connectionId);
+	},
+	methods: {
+		hint() {
+			(this as any).apis.dialog({
+				title: '%fa:info-circle%カスタマイズのヒント',
+				text: '<p>ホームのカスタマイズでは、ウィジェットを追加/削除したり、ドラッグ&ドロップして並べ替えたりすることができます。</p>' +
+					'<p>一部のウィジェットは、<strong><strong>右</strong>クリック</strong>することで表示を変更することができます。</p>' +
+					'<p>ウィジェットを削除するには、ヘッダーの<strong>「ゴミ箱」</strong>と書かれたエリアにウィジェットをドラッグ&ドロップします。</p>' +
+					'<p>カスタマイズを終了するには、右上の「完了」をクリックします。</p>',
+				actions: [{
+					text: 'Got it!'
+				}]
+			});
+		},
+		onTlLoaded() {
+			this.$emit('loaded');
+		},
+		onHomeUpdated(data) {
+			if (data.home) {
+				(this as any).os.i.account.clientSettings.home = data.home;
+				this.widgets.left = data.home.filter(w => w.place == 'left');
+				this.widgets.right = data.home.filter(w => w.place == 'right');
+			} else {
+				const w = (this as any).os.i.account.clientSettings.home.find(w => w.id == data.id);
+				if (w != null) {
+					w.data = data.data;
+					this.$refs[w.id][0].preventSave = true;
+					this.$refs[w.id][0].props = w.data;
+					this.widgets.left = (this as any).os.i.account.clientSettings.home.filter(w => w.place == 'left');
+					this.widgets.right = (this as any).os.i.account.clientSettings.home.filter(w => w.place == 'right');
+				}
+			}
+		},
+		onWidgetContextmenu(widgetId) {
+			const w = (this.$refs[widgetId] as any)[0];
+			if (w.func) w.func();
+		},
+		onWidgetSort() {
+			this.saveHome();
+		},
+		onTrash(evt) {
+			this.saveHome();
+		},
+		addWidget() {
+			const widget = {
+				name: this.widgetAdderSelected,
+				id: uuid(),
+				place: 'left',
+				data: {}
+			};
+
+			this.widgets.left.unshift(widget);
+			this.saveHome();
+		},
+		saveHome() {
+			const left = this.widgets.left;
+			const right = this.widgets.right;
+			this.home = left.concat(right);
+			left.forEach(w => w.place = 'left');
+			right.forEach(w => w.place = 'right');
+			(this as any).api('i/update_home', {
+				home: this.home
+			});
+		},
+		warp(date) {
+			(this.$refs.tl as any).warp(date);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-home
+	display block
+
+	&[data-customize]
+		padding-top 48px
+		background-image url('/assets/desktop/grid.svg')
+
+		> .main > .main
+			> a
+				display block
+				margin-bottom 8px
+				text-align center
+
+			> div
+				cursor not-allowed !important
+
+				> *
+					pointer-events none
+
+	&:not([data-customize])
+		> .main > *:empty
+			display none
+
+	> .customize
+		position fixed
+		z-index 1000
+		top 0
+		left 0
+		width 100%
+		height 48px
+		background #f7f7f7
+		box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
+
+		> a
+			display block
+			position absolute
+			z-index 1001
+			top 0
+			right 0
+			padding 0 16px
+			line-height 48px
+			text-decoration none
+			color $theme-color-foreground
+			background $theme-color
+			transition background 0.1s ease
+
+			&:hover
+				background lighten($theme-color, 10%)
+
+			&:active
+				background darken($theme-color, 10%)
+				transition background 0s ease
+
+			> [data-fa]
+				margin-right 8px
+
+		> div
+			display flex
+			margin 0 auto
+			max-width 1200px - 32px
+
+			> div
+				width 50%
+
+				&.adder
+					> p
+						display inline
+						line-height 48px
+
+				&.trash
+					border-left solid 1px #ddd
+
+					> div
+						width 100%
+						height 100%
+
+					> p
+						position absolute
+						top 0
+						left 0
+						width 100%
+						line-height 48px
+						margin 0
+						text-align center
+						pointer-events none
+
+	> .main
+		display flex
+		justify-content center
+		margin 0 auto
+		max-width 1200px
+
+		> *
+			.customize-container
+				cursor move
+				border-radius 6px
+
+				&:hover
+					box-shadow 0 0 8px rgba(64, 120, 200, 0.3)
+
+				> *
+					pointer-events none
+
+		> .main
+			padding 16px
+			width calc(100% - 275px * 2)
+			order 2
+
+			.mk-post-form
+				margin-bottom 16px
+				border solid 1px #e5e5e5
+				border-radius 4px
+
+		> *:not(.main)
+			width 275px
+			padding 16px 0 16px 0
+
+			> *:not(:last-child)
+				margin-bottom 16px
+
+		> .left
+			padding-left 16px
+			order 1
+
+		> .right
+			padding-right 16px
+			order 3
+
+		@media (max-width 1100px)
+			> *:not(.main)
+				display none
+
+			> .main
+				float none
+				width 100%
+				max-width 700px
+				margin 0 auto
+
+</style>
diff --git a/src/client/app/desktop/views/components/index.ts b/src/client/app/desktop/views/components/index.ts
new file mode 100644
index 0000000000..3798bf6d2d
--- /dev/null
+++ b/src/client/app/desktop/views/components/index.ts
@@ -0,0 +1,61 @@
+import Vue from 'vue';
+
+import ui from './ui.vue';
+import uiNotification from './ui-notification.vue';
+import home from './home.vue';
+import timeline from './timeline.vue';
+import posts from './posts.vue';
+import subPostContent from './sub-post-content.vue';
+import window from './window.vue';
+import postFormWindow from './post-form-window.vue';
+import repostFormWindow from './repost-form-window.vue';
+import analogClock from './analog-clock.vue';
+import ellipsisIcon from './ellipsis-icon.vue';
+import mediaImage from './media-image.vue';
+import mediaImageDialog from './media-image-dialog.vue';
+import mediaVideo from './media-video.vue';
+import notifications from './notifications.vue';
+import postForm from './post-form.vue';
+import repostForm from './repost-form.vue';
+import followButton from './follow-button.vue';
+import postPreview from './post-preview.vue';
+import drive from './drive.vue';
+import postDetail from './post-detail.vue';
+import settings from './settings.vue';
+import calendar from './calendar.vue';
+import activity from './activity.vue';
+import friendsMaker from './friends-maker.vue';
+import followers from './followers.vue';
+import following from './following.vue';
+import usersList from './users-list.vue';
+import widgetContainer from './widget-container.vue';
+
+Vue.component('mk-ui', ui);
+Vue.component('mk-ui-notification', uiNotification);
+Vue.component('mk-home', home);
+Vue.component('mk-timeline', timeline);
+Vue.component('mk-posts', posts);
+Vue.component('mk-sub-post-content', subPostContent);
+Vue.component('mk-window', window);
+Vue.component('mk-post-form-window', postFormWindow);
+Vue.component('mk-repost-form-window', repostFormWindow);
+Vue.component('mk-analog-clock', analogClock);
+Vue.component('mk-ellipsis-icon', ellipsisIcon);
+Vue.component('mk-media-image', mediaImage);
+Vue.component('mk-media-image-dialog', mediaImageDialog);
+Vue.component('mk-media-video', mediaVideo);
+Vue.component('mk-notifications', notifications);
+Vue.component('mk-post-form', postForm);
+Vue.component('mk-repost-form', repostForm);
+Vue.component('mk-follow-button', followButton);
+Vue.component('mk-post-preview', postPreview);
+Vue.component('mk-drive', drive);
+Vue.component('mk-post-detail', postDetail);
+Vue.component('mk-settings', settings);
+Vue.component('mk-calendar', calendar);
+Vue.component('mk-activity', activity);
+Vue.component('mk-friends-maker', friendsMaker);
+Vue.component('mk-followers', followers);
+Vue.component('mk-following', following);
+Vue.component('mk-users-list', usersList);
+Vue.component('mk-widget-container', widgetContainer);
diff --git a/src/client/app/desktop/views/components/input-dialog.vue b/src/client/app/desktop/views/components/input-dialog.vue
new file mode 100644
index 0000000000..e939fc1903
--- /dev/null
+++ b/src/client/app/desktop/views/components/input-dialog.vue
@@ -0,0 +1,180 @@
+<template>
+<mk-window ref="window" is-modal width="500px" @before-close="beforeClose" @closed="$destroy">
+	<span slot="header" :class="$style.header">
+		%fa:i-cursor%{{ title }}
+	</span>
+
+	<div :class="$style.body">
+		<input ref="text" v-model="text" :type="type" @keydown="onKeydown" :placeholder="placeholder"/>
+	</div>
+	<div :class="$style.actions">
+		<button :class="$style.cancel" @click="cancel">キャンセル</button>
+		<button :class="$style.ok" :disabled="!allowEmpty && text.length == 0" @click="ok">決定</button>
+	</div>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: {
+		title: {
+			type: String
+		},
+		placeholder: {
+			type: String
+		},
+		default: {
+			type: String
+		},
+		allowEmpty: {
+			default: true
+		},
+		type: {
+			default: 'text'
+		}
+	},
+	data() {
+		return {
+			done: false,
+			text: ''
+		};
+	},
+	mounted() {
+		if (this.default) this.text = this.default;
+		this.$nextTick(() => {
+			(this.$refs.text as any).focus();
+		});
+	},
+	methods: {
+		ok() {
+			if (!this.allowEmpty && this.text == '') return;
+			this.done = true;
+			(this.$refs.window as any).close();
+		},
+		cancel() {
+			this.done = false;
+			(this.$refs.window as any).close();
+		},
+		beforeClose() {
+			if (this.done) {
+				this.$emit('done', this.text);
+			} else {
+				this.$emit('canceled');
+			}
+		},
+		onKeydown(e) {
+			if (e.which == 13) { // Enter
+				e.preventDefault();
+				e.stopPropagation();
+				this.ok();
+			}
+		}
+	}
+});
+</script>
+
+
+<style lang="stylus" module>
+@import '~const.styl'
+
+.header
+	> [data-fa]
+		margin-right 4px
+
+.body
+	padding 16px
+
+	> input
+		display block
+		padding 8px
+		margin 0
+		width 100%
+		max-width 100%
+		min-width 100%
+		font-size 1em
+		color #333
+		background #fff
+		outline none
+		border solid 1px rgba($theme-color, 0.1)
+		border-radius 4px
+		transition border-color .3s ease
+
+		&:hover
+			border-color rgba($theme-color, 0.2)
+			transition border-color .1s ease
+
+		&:focus
+			color $theme-color
+			border-color rgba($theme-color, 0.5)
+			transition border-color 0s ease
+
+		&::-webkit-input-placeholder
+			color rgba($theme-color, 0.3)
+
+.actions
+	height 72px
+	background lighten($theme-color, 95%)
+
+.ok
+.cancel
+	display block
+	position absolute
+	bottom 16px
+	cursor pointer
+	padding 0
+	margin 0
+	width 120px
+	height 40px
+	font-size 1em
+	outline none
+	border-radius 4px
+
+	&:focus
+		&:after
+			content ""
+			pointer-events none
+			position absolute
+			top -5px
+			right -5px
+			bottom -5px
+			left -5px
+			border 2px solid rgba($theme-color, 0.3)
+			border-radius 8px
+
+	&:disabled
+		opacity 0.7
+		cursor default
+
+.ok
+	right 16px
+	color $theme-color-foreground
+	background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+	border solid 1px lighten($theme-color, 15%)
+
+	&:not(:disabled)
+		font-weight bold
+
+	&:hover:not(:disabled)
+		background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+		border-color $theme-color
+
+	&:active:not(:disabled)
+		background $theme-color
+		border-color $theme-color
+
+.cancel
+	right 148px
+	color #888
+	background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+	border solid 1px #e2e2e2
+
+	&:hover
+		background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+		border-color #dcdcdc
+
+	&:active
+		background #ececec
+		border-color #dcdcdc
+
+</style>
diff --git a/src/client/app/desktop/views/components/media-image-dialog.vue b/src/client/app/desktop/views/components/media-image-dialog.vue
new file mode 100644
index 0000000000..dec140d1c9
--- /dev/null
+++ b/src/client/app/desktop/views/components/media-image-dialog.vue
@@ -0,0 +1,69 @@
+<template>
+<div class="mk-media-image-dialog">
+	<div class="bg" @click="close"></div>
+	<img :src="image.url" :alt="image.name" :title="image.name" @click="close"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+
+export default Vue.extend({
+	props: ['image'],
+	mounted() {
+		anime({
+			targets: this.$el,
+			opacity: 1,
+			duration: 100,
+			easing: 'linear'
+		});
+	},
+	methods: {
+		close() {
+			anime({
+				targets: this.$el,
+				opacity: 0,
+				duration: 100,
+				easing: 'linear',
+				complete: () => this.$destroy()
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-media-image-dialog
+	display block
+	position fixed
+	z-index 2048
+	top 0
+	left 0
+	width 100%
+	height 100%
+	opacity 0
+
+	> .bg
+		display block
+		position fixed
+		z-index 1
+		top 0
+		left 0
+		width 100%
+		height 100%
+		background rgba(0, 0, 0, 0.7)
+
+	> img
+		position fixed
+		z-index 2
+		top 0
+		right 0
+		bottom 0
+		left 0
+		max-width 100%
+		max-height 100%
+		margin auto
+		cursor zoom-out
+
+</style>
diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue
new file mode 100644
index 0000000000..51309a0578
--- /dev/null
+++ b/src/client/app/desktop/views/components/media-image.vue
@@ -0,0 +1,63 @@
+<template>
+<a class="mk-media-image"
+	:href="image.url"
+	@mousemove="onMousemove"
+	@mouseleave="onMouseleave"
+	@click.prevent="onClick"
+	:style="style"
+	:title="image.name"
+></a>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import MkMediaImageDialog from './media-image-dialog.vue';
+
+export default Vue.extend({
+	props: ['image'],
+	computed: {
+		style(): any {
+			return {
+				'background-color': this.image.properties.avgColor ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent',
+				'background-image': `url(${this.image.url}?thumbnail&size=512)`
+			};
+		}
+	},
+	methods: {
+		onMousemove(e) {
+			const rect = this.$el.getBoundingClientRect();
+			const mouseX = e.clientX - rect.left;
+			const mouseY = e.clientY - rect.top;
+			const xp = mouseX / this.$el.offsetWidth * 100;
+			const yp = mouseY / this.$el.offsetHeight * 100;
+			this.$el.style.backgroundPosition = xp + '% ' + yp + '%';
+			this.$el.style.backgroundImage = 'url("' + this.image.url + '?thumbnail")';
+		},
+
+		onMouseleave() {
+			this.$el.style.backgroundPosition = '';
+		},
+
+		onClick() {
+			(this as any).os.new(MkMediaImageDialog, {
+				image: this.image
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-media-image
+	display block
+	cursor zoom-in
+	overflow hidden
+	width 100%
+	height 100%
+	background-position center
+	border-radius 4px
+
+	&:not(:hover)
+		background-size cover
+
+</style>
diff --git a/src/client/app/desktop/views/components/media-video-dialog.vue b/src/client/app/desktop/views/components/media-video-dialog.vue
new file mode 100644
index 0000000000..cbf862cd1c
--- /dev/null
+++ b/src/client/app/desktop/views/components/media-video-dialog.vue
@@ -0,0 +1,70 @@
+<template>
+<div class="mk-media-video-dialog">
+	<div class="bg" @click="close"></div>
+	<video :src="video.url" :title="video.name" controls autoplay ref="video"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+
+export default Vue.extend({
+	props: ['video', 'start'],
+	mounted() {
+		anime({
+			targets: this.$el,
+			opacity: 1,
+			duration: 100,
+			easing: 'linear'
+		});
+		const videoTag = this.$refs.video as HTMLVideoElement
+		if (this.start) videoTag.currentTime = this.start
+	},
+	methods: {
+		close() {
+			anime({
+				targets: this.$el,
+				opacity: 0,
+				duration: 100,
+				easing: 'linear',
+				complete: () => this.$destroy()
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-media-video-dialog
+	display block
+	position fixed
+	z-index 2048
+	top 0
+	left 0
+	width 100%
+	height 100%
+	opacity 0
+
+	> .bg
+		display block
+		position fixed
+		z-index 1
+		top 0
+		left 0
+		width 100%
+		height 100%
+		background rgba(0, 0, 0, 0.7)
+
+	> video
+		position fixed
+		z-index 2
+		top 0
+		right 0
+		bottom 0
+		left 0
+		max-width 80vw
+		max-height 80vh
+		margin auto
+
+</style>
diff --git a/src/client/app/desktop/views/components/media-video.vue b/src/client/app/desktop/views/components/media-video.vue
new file mode 100644
index 0000000000..4fd955a821
--- /dev/null
+++ b/src/client/app/desktop/views/components/media-video.vue
@@ -0,0 +1,67 @@
+<template>
+	<video class="mk-media-video"
+		:src="video.url"
+		:title="video.name"
+		controls
+		@dblclick.prevent="onClick"
+		ref="video"
+		v-if="inlinePlayable" />
+	<a class="mk-media-video-thumbnail"
+		:href="video.url"
+		:style="imageStyle"
+		@click.prevent="onClick"
+		:title="video.name"
+		v-else>
+		%fa:R play-circle%
+	</a>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import MkMediaVideoDialog from './media-video-dialog.vue';
+
+export default Vue.extend({
+	props: ['video', 'inlinePlayable'],
+	computed: {
+		imageStyle(): any {
+			return {
+				'background-image': `url(${this.video.url}?thumbnail&size=512)`
+			};
+		}
+	},
+	methods: {
+		onClick() {
+			const videoTag = this.$refs.video as (HTMLVideoElement | null)
+			var start = 0
+			if (videoTag) {
+				start = videoTag.currentTime
+				videoTag.pause()
+			}
+			(this as any).os.new(MkMediaVideoDialog, {
+				video: this.video,
+				start,
+			})
+		}
+	}
+})
+</script>
+
+<style lang="stylus" scoped>
+.mk-media-video
+	display block
+	width 100%
+	height 100%
+	border-radius 4px
+.mk-media-video-thumbnail
+	display flex
+	justify-content center
+	align-items center
+	font-size 3.5em
+
+	cursor zoom-in
+	overflow hidden
+	background-position center
+	background-size cover
+	width 100%
+	height 100%
+</style>
diff --git a/src/client/app/desktop/views/components/mentions.vue b/src/client/app/desktop/views/components/mentions.vue
new file mode 100644
index 0000000000..90a92495b7
--- /dev/null
+++ b/src/client/app/desktop/views/components/mentions.vue
@@ -0,0 +1,125 @@
+<template>
+<div class="mk-mentions">
+	<header>
+		<span :data-is-active="mode == 'all'" @click="mode = 'all'">すべて</span>
+		<span :data-is-active="mode == 'following'" @click="mode = 'following'">フォロー中</span>
+	</header>
+	<div class="fetching" v-if="fetching">
+		<mk-ellipsis-icon/>
+	</div>
+	<p class="empty" v-if="posts.length == 0 && !fetching">
+		%fa:R comments%
+		<span v-if="mode == 'all'">あなた宛ての投稿はありません。</span>
+		<span v-if="mode == 'following'">あなたがフォローしているユーザーからの言及はありません。</span>
+	</p>
+	<mk-posts :posts="posts" ref="timeline"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			mode: 'all',
+			posts: []
+		};
+	},
+	watch: {
+		mode() {
+			this.fetch();
+		}
+	},
+	mounted() {
+		document.addEventListener('keydown', this.onDocumentKeydown);
+		window.addEventListener('scroll', this.onScroll);
+
+		this.fetch(() => this.$emit('loaded'));
+	},
+	beforeDestroy() {
+		document.removeEventListener('keydown', this.onDocumentKeydown);
+		window.removeEventListener('scroll', this.onScroll);
+	},
+	methods: {
+		onDocumentKeydown(e) {
+			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
+				if (e.which == 84) { // t
+					(this.$refs.timeline as any).focus();
+				}
+			}
+		},
+		onScroll() {
+			const current = window.scrollY + window.innerHeight;
+			if (current > document.body.offsetHeight - 8) this.more();
+		},
+		fetch(cb?) {
+			this.fetching = true;
+			this.posts =  [];
+			(this as any).api('posts/mentions', {
+				following: this.mode == 'following'
+			}).then(posts => {
+				this.posts = posts;
+				this.fetching = false;
+				if (cb) cb();
+			});
+		},
+		more() {
+			if (this.moreFetching || this.fetching || this.posts.length == 0) return;
+			this.moreFetching = true;
+			(this as any).api('posts/mentions', {
+				following: this.mode == 'following',
+				untilId: this.posts[this.posts.length - 1].id
+			}).then(posts => {
+				this.posts = this.posts.concat(posts);
+				this.moreFetching = false;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-mentions
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	> header
+		padding 8px 16px
+		border-bottom solid 1px #eee
+
+		> span
+			margin-right 16px
+			line-height 27px
+			font-size 18px
+			color #555
+
+			&:not([data-is-active])
+				color $theme-color
+				cursor pointer
+
+				&:hover
+					text-decoration underline
+
+	> .fetching
+		padding 64px 0
+
+	> .empty
+		display block
+		margin 0 auto
+		padding 32px
+		max-width 400px
+		text-align center
+		color #999
+
+		> [data-fa]
+			display block
+			margin-bottom 16px
+			font-size 3em
+			color #ccc
+
+</style>
diff --git a/src/client/app/desktop/views/components/messaging-room-window.vue b/src/client/app/desktop/views/components/messaging-room-window.vue
new file mode 100644
index 0000000000..3735267811
--- /dev/null
+++ b/src/client/app/desktop/views/components/messaging-room-window.vue
@@ -0,0 +1,32 @@
+<template>
+<mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="$destroy">
+	<span slot="header" :class="$style.header">%fa:comments%メッセージ: {{ user.name }}</span>
+	<mk-messaging-room :user="user" :class="$style.content"/>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { url } from '../../../config';
+import getAcct from '../../../../../common/user/get-acct';
+
+export default Vue.extend({
+	props: ['user'],
+	computed: {
+		popout(): string {
+			return `${url}/i/messaging/${getAcct(this.user)}`;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.header
+	> [data-fa]
+		margin-right 4px
+
+.content
+	height 100%
+	overflow auto
+
+</style>
diff --git a/src/client/app/desktop/views/components/messaging-window.vue b/src/client/app/desktop/views/components/messaging-window.vue
new file mode 100644
index 0000000000..ac27465987
--- /dev/null
+++ b/src/client/app/desktop/views/components/messaging-window.vue
@@ -0,0 +1,32 @@
+<template>
+<mk-window ref="window" width="500px" height="560px" @closed="$destroy">
+	<span slot="header" :class="$style.header">%fa:comments%メッセージ</span>
+	<mk-messaging :class="$style.content" @navigate="navigate"/>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import MkMessagingRoomWindow from './messaging-room-window.vue';
+
+export default Vue.extend({
+	methods: {
+		navigate(user) {
+			(this as any).os.new(MkMessagingRoomWindow, {
+				user: user
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.header
+	> [data-fa]
+		margin-right 4px
+
+.content
+	height 100%
+	overflow auto
+
+</style>
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
new file mode 100644
index 0000000000..5e6db08c12
--- /dev/null
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -0,0 +1,317 @@
+<template>
+<div class="mk-notifications">
+	<div class="notifications" v-if="notifications.length != 0">
+		<template v-for="(notification, i) in _notifications">
+			<div class="notification" :class="notification.type" :key="notification.id">
+				<mk-time :time="notification.createdAt"/>
+				<template v-if="notification.type == 'reaction'">
+					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">
+						<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
+					</router-link>
+					<div class="text">
+						<p>
+							<mk-reaction-icon :reaction="notification.reaction"/>
+							<router-link :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">{{ notification.user.name }}</router-link>
+						</p>
+						<router-link class="post-ref" :to="`/@${getAcct(notification.post.user)}/${notification.post.id}`">
+							%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
+						</router-link>
+					</div>
+				</template>
+				<template v-if="notification.type == 'repost'">
+					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">
+						<img class="avatar" :src="`${notification.post.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
+					</router-link>
+					<div class="text">
+						<p>%fa:retweet%
+							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">{{ notification.post.user.name }}</router-link>
+						</p>
+						<router-link class="post-ref" :to="`/@${getAcct(notification.post.user)}/${notification.post.id}`">
+							%fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right%
+						</router-link>
+					</div>
+				</template>
+				<template v-if="notification.type == 'quote'">
+					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">
+						<img class="avatar" :src="`${notification.post.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
+					</router-link>
+					<div class="text">
+						<p>%fa:quote-left%
+							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">{{ notification.post.user.name }}</router-link>
+						</p>
+						<router-link class="post-preview" :to="`/@${getAcct(notification.post.user)}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
+					</div>
+				</template>
+				<template v-if="notification.type == 'follow'">
+					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">
+						<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
+					</router-link>
+					<div class="text">
+						<p>%fa:user-plus%
+							<router-link :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">{{ notification.user.name }}</router-link>
+						</p>
+					</div>
+				</template>
+				<template v-if="notification.type == 'reply'">
+					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">
+						<img class="avatar" :src="`${notification.post.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
+					</router-link>
+					<div class="text">
+						<p>%fa:reply%
+							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">{{ notification.post.user.name }}</router-link>
+						</p>
+						<router-link class="post-preview" :to="`/@${getAcct(notification.post.user)}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
+					</div>
+				</template>
+				<template v-if="notification.type == 'mention'">
+					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">
+						<img class="avatar" :src="`${notification.post.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
+					</router-link>
+					<div class="text">
+						<p>%fa:at%
+							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">{{ notification.post.user.name }}</router-link>
+						</p>
+						<a class="post-preview" :href="`/@${getAcct(notification.post.user)}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a>
+					</div>
+				</template>
+				<template v-if="notification.type == 'poll_vote'">
+					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">
+						<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
+					</router-link>
+					<div class="text">
+						<p>%fa:chart-pie%<a :href="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">{{ notification.user.name }}</a></p>
+						<router-link class="post-ref" :to="`/@${getAcct(notification.post.user)}/${notification.post.id}`">
+							%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
+						</router-link>
+					</div>
+				</template>
+			</div>
+			<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
+				<span>%fa:angle-up%{{ notification._datetext }}</span>
+				<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
+			</p>
+		</template>
+	</div>
+	<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
+		<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:desktop.tags.mk-notifications.more%' }}
+	</button>
+	<p class="empty" v-if="notifications.length == 0 && !fetching">ありません！</p>
+	<p class="loading" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
+import getPostSummary from '../../../../../common/get-post-summary';
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			fetchingMoreNotifications: false,
+			notifications: [],
+			moreNotifications: false,
+			connection: null,
+			connectionId: null,
+			getPostSummary
+		};
+	},
+	computed: {
+		_notifications(): any[] {
+			return (this.notifications as any).map(notification => {
+				const date = new Date(notification.createdAt).getDate();
+				const month = new Date(notification.createdAt).getMonth() + 1;
+				notification._date = date;
+				notification._datetext = `${month}月 ${date}日`;
+				return notification;
+			});
+		}
+	},
+	mounted() {
+		this.connection = (this as any).os.stream.getConnection();
+		this.connectionId = (this as any).os.stream.use();
+
+		this.connection.on('notification', this.onNotification);
+
+		const max = 10;
+
+		(this as any).api('i/notifications', {
+			limit: max + 1
+		}).then(notifications => {
+			if (notifications.length == max + 1) {
+				this.moreNotifications = true;
+				notifications.pop();
+			}
+
+			this.notifications = notifications;
+			this.fetching = false;
+		});
+	},
+	beforeDestroy() {
+		this.connection.off('notification', this.onNotification);
+		(this as any).os.stream.dispose(this.connectionId);
+	},
+	methods: {
+		getAcct,
+		fetchMoreNotifications() {
+			this.fetchingMoreNotifications = true;
+
+			const max = 30;
+
+			(this as any).api('i/notifications', {
+				limit: max + 1,
+				untilId: this.notifications[this.notifications.length - 1].id
+			}).then(notifications => {
+				if (notifications.length == max + 1) {
+					this.moreNotifications = true;
+					notifications.pop();
+				} else {
+					this.moreNotifications = false;
+				}
+				this.notifications = this.notifications.concat(notifications);
+				this.fetchingMoreNotifications = false;
+			});
+		},
+		onNotification(notification) {
+			// TODO: ユーザーが画面を見てないと思われるとき(ブラウザやタブがアクティブじゃないなど)は送信しない
+			this.connection.send({
+				type: 'read_notification',
+				id: notification.id
+			});
+
+			this.notifications.unshift(notification);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-notifications
+	> .notifications
+		> .notification
+			margin 0
+			padding 16px
+			overflow-wrap break-word
+			font-size 0.9em
+			border-bottom solid 1px rgba(0, 0, 0, 0.05)
+
+			&:last-child
+				border-bottom none
+
+			> .mk-time
+				display inline
+				position absolute
+				top 16px
+				right 12px
+				vertical-align top
+				color rgba(0, 0, 0, 0.6)
+				font-size small
+
+			&:after
+				content ""
+				display block
+				clear both
+
+			> .avatar-anchor
+				display block
+				float left
+				position -webkit-sticky
+				position sticky
+				top 16px
+
+				> img
+					display block
+					min-width 36px
+					min-height 36px
+					max-width 36px
+					max-height 36px
+					border-radius 6px
+
+			> .text
+				float right
+				width calc(100% - 36px)
+				padding-left 8px
+
+				p
+					margin 0
+
+					i, .mk-reaction-icon
+						margin-right 4px
+
+			.post-preview
+				color rgba(0, 0, 0, 0.7)
+
+			.post-ref
+				color rgba(0, 0, 0, 0.7)
+
+				[data-fa]
+					font-size 1em
+					font-weight normal
+					font-style normal
+					display inline-block
+					margin-right 3px
+
+			&.repost, &.quote
+				.text p i
+					color #77B255
+
+			&.follow
+				.text p i
+					color #53c7ce
+
+			&.reply, &.mention
+				.text p i
+					color #555
+
+		> .date
+			display block
+			margin 0
+			line-height 32px
+			text-align center
+			font-size 0.8em
+			color #aaa
+			background #fdfdfd
+			border-bottom solid 1px rgba(0, 0, 0, 0.05)
+
+			span
+				margin 0 16px
+
+			[data-fa]
+				margin-right 8px
+
+	> .more
+		display block
+		width 100%
+		padding 16px
+		color #555
+		border-top solid 1px rgba(0, 0, 0, 0.05)
+
+		&:hover
+			background rgba(0, 0, 0, 0.025)
+
+		&:active
+			background rgba(0, 0, 0, 0.05)
+
+		&.fetching
+			cursor wait
+
+		> [data-fa]
+			margin-right 4px
+
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+	> .loading
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+		> [data-fa]
+			margin-right 4px
+
+</style>
diff --git a/src/client/app/desktop/views/components/post-detail.sub.vue b/src/client/app/desktop/views/components/post-detail.sub.vue
new file mode 100644
index 0000000000..35377e7c24
--- /dev/null
+++ b/src/client/app/desktop/views/components/post-detail.sub.vue
@@ -0,0 +1,126 @@
+<template>
+<div class="sub" :title="title">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
+		<img class="avatar" :src="`${post.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="post.userId"/>
+	</router-link>
+	<div class="main">
+		<header>
+			<div class="left">
+				<router-link class="name" :to="`/@${acct}`" v-user-preview="post.userId">{{ post.user.name }}</router-link>
+				<span class="username">@{{ acct }}</span>
+			</div>
+			<div class="right">
+				<router-link class="time" :to="`/@${acct}/${post.id}`">
+					<mk-time :time="post.createdAt"/>
+				</router-link>
+			</div>
+		</header>
+		<div class="body">
+			<mk-post-html v-if="post.ast" :ast="post.ast" :i="os.i" :class="$style.text"/>
+			<div class="media" v-if="post.media">
+				<mk-media-list :media-list="post.media"/>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import dateStringify from '../../../common/scripts/date-stringify';
+import getAcct from '../../../../../common/user/get-acct';
+
+export default Vue.extend({
+	props: ['post'],
+	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		},
+		title(): string {
+			return dateStringify(this.post.createdAt);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.sub
+	margin 0
+	padding 20px 32px
+	background #fdfdfd
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	&:hover
+		> .main > footer > button
+			color #888
+
+	> .avatar-anchor
+		display block
+		float left
+		margin 0 16px 0 0
+
+		> .avatar
+			display block
+			width 44px
+			height 44px
+			margin 0
+			border-radius 4px
+			vertical-align bottom
+
+	> .main
+		float left
+		width calc(100% - 60px)
+
+		> header
+			margin-bottom 4px
+			white-space nowrap
+
+			&:after
+				content ""
+				display block
+				clear both
+
+			> .left
+				float left
+
+				> .name
+					display inline
+					margin 0
+					padding 0
+					color #777
+					font-size 1em
+					font-weight 700
+					text-align left
+					text-decoration none
+
+					&:hover
+						text-decoration underline
+
+				> .username
+					text-align left
+					margin 0 0 0 8px
+					color #ccc
+
+			> .right
+				float right
+
+				> .time
+					font-size 0.9em
+					color #c0c0c0
+
+</style>
+
+<style lang="stylus" module>
+.text
+	cursor default
+	display block
+	margin 0
+	padding 0
+	overflow-wrap break-word
+	font-size 1em
+	color #717171
+</style>
diff --git a/src/client/app/desktop/views/components/post-detail.vue b/src/client/app/desktop/views/components/post-detail.vue
new file mode 100644
index 0000000000..5c7a7dfdbe
--- /dev/null
+++ b/src/client/app/desktop/views/components/post-detail.vue
@@ -0,0 +1,433 @@
+<template>
+<div class="mk-post-detail" :title="title">
+	<button
+		class="read-more"
+		v-if="p.reply && p.reply.replyId && context == null"
+		title="会話をもっと読み込む"
+		@click="fetchContext"
+		:disabled="contextFetching"
+	>
+		<template v-if="!contextFetching">%fa:ellipsis-v%</template>
+		<template v-if="contextFetching">%fa:spinner .pulse%</template>
+	</button>
+	<div class="context">
+		<x-sub v-for="post in context" :key="post.id" :post="post"/>
+	</div>
+	<div class="reply-to" v-if="p.reply">
+		<x-sub :post="p.reply"/>
+	</div>
+	<div class="repost" v-if="isRepost">
+		<p>
+			<router-link class="avatar-anchor" :to="`/@${acct}`" v-user-preview="post.userId">
+				<img class="avatar" :src="`${post.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
+			</router-link>
+			%fa:retweet%
+			<router-link class="name" :href="`/@${acct}`">{{ post.user.name }}</router-link>
+			がRepost
+		</p>
+	</div>
+	<article>
+		<router-link class="avatar-anchor" :to="`/@${acct}`">
+			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
+		</router-link>
+		<header>
+			<router-link class="name" :to="`/@${acct}`" v-user-preview="p.user.id">{{ p.user.name }}</router-link>
+			<span class="username">@{{ acct }}</span>
+			<router-link class="time" :to="`/@${acct}/${p.id}`">
+				<mk-time :time="p.createdAt"/>
+			</router-link>
+		</header>
+		<div class="body">
+			<mk-post-html :class="$style.text" v-if="p.ast" :ast="p.ast" :i="os.i"/>
+			<div class="media" v-if="p.media">
+				<mk-media-list :media-list="p.media"/>
+			</div>
+			<mk-poll v-if="p.poll" :post="p"/>
+			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+			<div class="tags" v-if="p.tags && p.tags.length > 0">
+				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
+			</div>
+			<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
+			<div class="map" v-if="p.geo" ref="map"></div>
+			<div class="repost" v-if="p.repost">
+				<mk-post-preview :post="p.repost"/>
+			</div>
+		</div>
+		<footer>
+			<mk-reactions-viewer :post="p"/>
+			<button @click="reply" title="返信">
+				%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
+			</button>
+			<button @click="repost" title="Repost">
+				%fa:retweet%<p class="count" v-if="p.repostCount > 0">{{ p.repostCount }}</p>
+			</button>
+			<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="リアクション">
+				%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
+			</button>
+			<button @click="menu" ref="menuButton">
+				%fa:ellipsis-h%
+			</button>
+		</footer>
+	</article>
+	<div class="replies" v-if="!compact">
+		<x-sub v-for="post in replies" :key="post.id" :post="post"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import dateStringify from '../../../common/scripts/date-stringify';
+import getAcct from '../../../../../common/user/get-acct';
+
+import MkPostFormWindow from './post-form-window.vue';
+import MkRepostFormWindow from './repost-form-window.vue';
+import MkPostMenu from '../../../common/views/components/post-menu.vue';
+import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
+import XSub from './post-detail.sub.vue';
+
+export default Vue.extend({
+	components: {
+		XSub
+	},
+	props: {
+		post: {
+			type: Object,
+			required: true
+		},
+		compact: {
+			default: false
+		}
+	},
+	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		}
+	},
+	data() {
+		return {
+			context: [],
+			contextFetching: false,
+			replies: [],
+		};
+	},
+	computed: {
+		isRepost(): boolean {
+			return (this.post.repost &&
+				this.post.text == null &&
+				this.post.mediaIds == null &&
+				this.post.poll == null);
+		},
+		p(): any {
+			return this.isRepost ? this.post.repost : this.post;
+		},
+		reactionsCount(): number {
+			return this.p.reactionCounts
+				? Object.keys(this.p.reactionCounts)
+					.map(key => this.p.reactionCounts[key])
+					.reduce((a, b) => a + b)
+				: 0;
+		},
+		title(): string {
+			return dateStringify(this.p.createdAt);
+		},
+		urls(): string[] {
+			if (this.p.ast) {
+				return this.p.ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
+		}
+	},
+	mounted() {
+		// Get replies
+		if (!this.compact) {
+			(this as any).api('posts/replies', {
+				postId: this.p.id,
+				limit: 8
+			}).then(replies => {
+				this.replies = replies;
+			});
+		}
+
+		// Draw map
+		if (this.p.geo) {
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.account.clientSettings.showMaps : true;
+			if (shouldShowMap) {
+				(this as any).os.getGoogleMaps().then(maps => {
+					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
+					const map = new maps.Map(this.$refs.map, {
+						center: uluru,
+						zoom: 15
+					});
+					new maps.Marker({
+						position: uluru,
+						map: map
+					});
+				});
+			}
+		}
+	},
+	methods: {
+		fetchContext() {
+			this.contextFetching = true;
+
+			// Fetch context
+			(this as any).api('posts/context', {
+				postId: this.p.replyId
+			}).then(context => {
+				this.contextFetching = false;
+				this.context = context.reverse();
+			});
+		},
+		reply() {
+			(this as any).os.new(MkPostFormWindow, {
+				reply: this.p
+			});
+		},
+		repost() {
+			(this as any).os.new(MkRepostFormWindow, {
+				post: this.p
+			});
+		},
+		react() {
+			(this as any).os.new(MkReactionPicker, {
+				source: this.$refs.reactButton,
+				post: this.p
+			});
+		},
+		menu() {
+			(this as any).os.new(MkPostMenu, {
+				source: this.$refs.menuButton,
+				post: this.p
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-post-detail
+	margin 0
+	padding 0
+	overflow hidden
+	text-align left
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.1)
+	border-radius 8px
+
+	> .read-more
+		display block
+		margin 0
+		padding 10px 0
+		width 100%
+		font-size 1em
+		text-align center
+		color #999
+		cursor pointer
+		background #fafafa
+		outline none
+		border none
+		border-bottom solid 1px #eef0f2
+		border-radius 6px 6px 0 0
+
+		&:hover
+			background #f6f6f6
+
+		&:active
+			background #f0f0f0
+
+		&:disabled
+			color #ccc
+
+	> .context
+		> *
+			border-bottom 1px solid #eef0f2
+
+	> .repost
+		color #9dbb00
+		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+
+		> p
+			margin 0
+			padding 16px 32px
+
+			.avatar-anchor
+				display inline-block
+
+				.avatar
+					vertical-align bottom
+					min-width 28px
+					min-height 28px
+					max-width 28px
+					max-height 28px
+					margin 0 8px 0 0
+					border-radius 6px
+
+			[data-fa]
+				margin-right 4px
+
+			.name
+				font-weight bold
+
+		& + article
+			padding-top 8px
+
+	> .reply-to
+		border-bottom 1px solid #eef0f2
+
+	> article
+		padding 28px 32px 18px 32px
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		&:hover
+			> .main > footer > button
+				color #888
+
+		> .avatar-anchor
+			display block
+			width 60px
+			height 60px
+
+			> .avatar
+				display block
+				width 60px
+				height 60px
+				margin 0
+				border-radius 8px
+				vertical-align bottom
+
+		> header
+			position absolute
+			top 28px
+			left 108px
+			width calc(100% - 108px)
+
+			> .name
+				display inline-block
+				margin 0
+				line-height 24px
+				color #777
+				font-size 18px
+				font-weight 700
+				text-align left
+				text-decoration none
+
+				&:hover
+					text-decoration underline
+
+			> .username
+				display block
+				text-align left
+				margin 0
+				color #ccc
+
+			> .time
+				position absolute
+				top 0
+				right 32px
+				font-size 1em
+				color #c0c0c0
+
+		> .body
+			padding 8px 0
+
+			> .repost
+				margin 8px 0
+
+				> .mk-post-preview
+					padding 16px
+					border dashed 1px #c0dac6
+					border-radius 8px
+
+			> .location
+				margin 4px 0
+				font-size 12px
+				color #ccc
+
+			> .map
+				width 100%
+				height 300px
+
+				&:empty
+					display none
+
+			> .mk-url-preview
+				margin-top 8px
+
+			> .tags
+				margin 4px 0 0 0
+
+				> *
+					display inline-block
+					margin 0 8px 0 0
+					padding 2px 8px 2px 16px
+					font-size 90%
+					color #8d969e
+					background #edf0f3
+					border-radius 4px
+
+					&:before
+						content ""
+						display block
+						position absolute
+						top 0
+						bottom 0
+						left 4px
+						width 8px
+						height 8px
+						margin auto 0
+						background #fff
+						border-radius 100%
+
+					&:hover
+						text-decoration none
+						background #e2e7ec
+
+		> footer
+			font-size 1.2em
+
+			> button
+				margin 0 28px 0 0
+				padding 8px
+				background transparent
+				border none
+				font-size 1em
+				color #ddd
+				cursor pointer
+
+				&:hover
+					color #666
+
+				> .count
+					display inline
+					margin 0 0 0 8px
+					color #999
+
+				&.reacted
+					color $theme-color
+
+	> .replies
+		> *
+			border-top 1px solid #eef0f2
+
+</style>
+
+<style lang="stylus" module>
+.text
+	cursor default
+	display block
+	margin 0
+	padding 0
+	overflow-wrap break-word
+	font-size 1.5em
+	color #717171
+</style>
diff --git a/src/client/app/desktop/views/components/post-form-window.vue b/src/client/app/desktop/views/components/post-form-window.vue
new file mode 100644
index 0000000000..d0b115e852
--- /dev/null
+++ b/src/client/app/desktop/views/components/post-form-window.vue
@@ -0,0 +1,76 @@
+<template>
+<mk-window ref="window" is-modal @closed="$destroy">
+	<span slot="header">
+		<span :class="$style.icon" v-if="geo">%fa:map-marker-alt%</span>
+		<span v-if="!reply">%i18n:desktop.tags.mk-post-form-window.post%</span>
+		<span v-if="reply">%i18n:desktop.tags.mk-post-form-window.reply%</span>
+		<span :class="$style.count" v-if="media.length != 0">{{ '%i18n:desktop.tags.mk-post-form-window.attaches%'.replace('{}', media.length) }}</span>
+		<span :class="$style.count" v-if="uploadings.length != 0">{{ '%i18n:desktop.tags.mk-post-form-window.uploading-media%'.replace('{}', uploadings.length) }}<mk-ellipsis/></span>
+	</span>
+
+	<mk-post-preview v-if="reply" :class="$style.postPreview" :post="reply"/>
+	<mk-post-form ref="form"
+		:reply="reply"
+		@posted="onPosted"
+		@change-uploadings="onChangeUploadings"
+		@change-attached-media="onChangeMedia"
+		@geo-attached="onGeoAttached"
+		@geo-dettached="onGeoDettached"/>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['reply'],
+	data() {
+		return {
+			uploadings: [],
+			media: [],
+			geo: null
+		};
+	},
+	mounted() {
+		this.$nextTick(() => {
+			(this.$refs.form as any).focus();
+		});
+	},
+	methods: {
+		onChangeUploadings(files) {
+			this.uploadings = files;
+		},
+		onChangeMedia(media) {
+			this.media = media;
+		},
+		onGeoAttached(geo) {
+			this.geo = geo;
+		},
+		onGeoDettached() {
+			this.geo = null;
+		},
+		onPosted() {
+			(this.$refs.window as any).close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.icon
+	margin-right 8px
+
+.count
+	margin-left 8px
+	opacity 0.8
+
+	&:before
+		content '('
+
+	&:after
+		content ')'
+
+.postPreview
+	margin 16px 22px
+
+</style>
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
new file mode 100644
index 0000000000..1c83a38b64
--- /dev/null
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -0,0 +1,536 @@
+<template>
+<div class="mk-post-form"
+	@dragover.stop="onDragover"
+	@dragenter="onDragenter"
+	@dragleave="onDragleave"
+	@drop.stop="onDrop"
+>
+	<div class="content">
+		<textarea :class="{ with: (files.length != 0 || poll) }"
+			ref="text" v-model="text" :disabled="posting"
+			@keydown="onKeydown" @paste="onPaste" :placeholder="placeholder"
+			v-autocomplete="'text'"
+		></textarea>
+		<div class="medias" :class="{ with: poll }" v-show="files.length != 0">
+			<x-draggable :list="files" :options="{ animation: 150 }">
+				<div v-for="file in files" :key="file.id">
+					<div class="img" :style="{ backgroundImage: `url(${file.url}?thumbnail&size=64)` }" :title="file.name"></div>
+					<img class="remove" @click="detachMedia(file.id)" src="/assets/desktop/remove.png" title="%i18n:desktop.tags.mk-post-form.attach-cancel%" alt=""/>
+				</div>
+			</x-draggable>
+			<p class="remain">{{ 4 - files.length }}/4</p>
+		</div>
+		<mk-poll-editor v-if="poll" ref="poll" @destroyed="poll = false" @updated="saveDraft()"/>
+	</div>
+	<mk-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/>
+	<button class="upload" title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" @click="chooseFile">%fa:upload%</button>
+	<button class="drive" title="%i18n:desktop.tags.mk-post-form.attach-media-from-drive%" @click="chooseFileFromDrive">%fa:cloud%</button>
+	<button class="kao" title="%i18n:desktop.tags.mk-post-form.insert-a-kao%" @click="kao">%fa:R smile%</button>
+	<button class="poll" title="%i18n:desktop.tags.mk-post-form.create-poll%" @click="poll = true">%fa:chart-pie%</button>
+	<button class="geo" title="位置情報を添付する" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
+	<p class="text-count" :class="{ over: text.length > 1000 }">{{ '%i18n:desktop.tags.mk-post-form.text-remain%'.replace('{}', 1000 - text.length) }}</p>
+	<button :class="{ posting }" class="submit" :disabled="!canPost" @click="post">
+		{{ posting ? '%i18n:desktop.tags.mk-post-form.posting%' : submitText }}<mk-ellipsis v-if="posting"/>
+	</button>
+	<input ref="file" type="file" accept="image/*" multiple="multiple" tabindex="-1" @change="onChangeFile"/>
+	<div class="dropzone" v-if="draghover"></div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as XDraggable from 'vuedraggable';
+import getKao from '../../../common/scripts/get-kao';
+
+export default Vue.extend({
+	components: {
+		XDraggable
+	},
+	props: ['reply', 'repost'],
+	data() {
+		return {
+			posting: false,
+			text: '',
+			files: [],
+			uploadings: [],
+			poll: false,
+			geo: null,
+			autocomplete: null,
+			draghover: false
+		};
+	},
+	computed: {
+		draftId(): string {
+			return this.repost
+				? 'repost:' + this.repost.id
+				: this.reply
+					? 'reply:' + this.reply.id
+					: 'post';
+		},
+		placeholder(): string {
+			return this.repost
+				? '%i18n:desktop.tags.mk-post-form.quote-placeholder%'
+				: this.reply
+					? '%i18n:desktop.tags.mk-post-form.reply-placeholder%'
+					: '%i18n:desktop.tags.mk-post-form.post-placeholder%';
+		},
+		submitText(): string {
+			return this.repost
+				? '%i18n:desktop.tags.mk-post-form.repost%'
+				: this.reply
+					? '%i18n:desktop.tags.mk-post-form.reply%'
+					: '%i18n:desktop.tags.mk-post-form.post%';
+		},
+		canPost(): boolean {
+			return !this.posting && (this.text.length != 0 || this.files.length != 0 || this.poll || this.repost);
+		}
+	},
+	watch: {
+		text() {
+			this.saveDraft();
+		},
+		poll() {
+			this.saveDraft();
+		},
+		files() {
+			this.saveDraft();
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			// 書きかけの投稿を復元
+			const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId];
+			if (draft) {
+				this.text = draft.data.text;
+				this.files = draft.data.files;
+				if (draft.data.poll) {
+					this.poll = true;
+					this.$nextTick(() => {
+						(this.$refs.poll as any).set(draft.data.poll);
+					});
+				}
+				this.$emit('change-attached-media', this.files);
+			}
+		});
+	},
+	methods: {
+		focus() {
+			(this.$refs.text as any).focus();
+		},
+		chooseFile() {
+			(this.$refs.file as any).click();
+		},
+		chooseFileFromDrive() {
+			(this as any).apis.chooseDriveFile({
+				multiple: true
+			}).then(files => {
+				files.forEach(this.attachMedia);
+			});
+		},
+		attachMedia(driveFile) {
+			this.files.push(driveFile);
+			this.$emit('change-attached-media', this.files);
+		},
+		detachMedia(id) {
+			this.files = this.files.filter(x => x.id != id);
+			this.$emit('change-attached-media', this.files);
+		},
+		onChangeFile() {
+			Array.from((this.$refs.file as any).files).forEach(this.upload);
+		},
+		upload(file) {
+			(this.$refs.uploader as any).upload(file);
+		},
+		onChangeUploadings(uploads) {
+			this.$emit('change-uploadings', uploads);
+		},
+		clear() {
+			this.text = '';
+			this.files = [];
+			this.poll = false;
+			this.$emit('change-attached-media', this.files);
+		},
+		onKeydown(e) {
+			if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey)) this.post();
+		},
+		onPaste(e) {
+			Array.from(e.clipboardData.items).forEach((item: any) => {
+				if (item.kind == 'file') {
+					this.upload(item.getAsFile());
+				}
+			});
+		},
+		onDragover(e) {
+			const isFile = e.dataTransfer.items[0].kind == 'file';
+			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
+			if (isFile || isDriveFile) {
+				e.preventDefault();
+				this.draghover = true;
+				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
+			}
+		},
+		onDragenter(e) {
+			this.draghover = true;
+		},
+		onDragleave(e) {
+			this.draghover = false;
+		},
+		onDrop(e): void {
+			this.draghover = false;
+
+			// ファイルだったら
+			if (e.dataTransfer.files.length > 0) {
+				e.preventDefault();
+				Array.from(e.dataTransfer.files).forEach(this.upload);
+				return;
+			}
+
+			//#region ドライブのファイル
+			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			if (driveFile != null && driveFile != '') {
+				const file = JSON.parse(driveFile);
+				this.files.push(file);
+				this.$emit('change-attached-media', this.files);
+				e.preventDefault();
+			}
+			//#endregion
+		},
+		setGeo() {
+			if (navigator.geolocation == null) {
+				alert('お使いの端末は位置情報に対応していません');
+				return;
+			}
+
+			navigator.geolocation.getCurrentPosition(pos => {
+				this.geo = pos.coords;
+				this.$emit('geo-attached', this.geo);
+			}, err => {
+				alert('エラー: ' + err.message);
+			}, {
+				enableHighAccuracy: true
+			});
+		},
+		removeGeo() {
+			this.geo = null;
+			this.$emit('geo-dettached');
+		},
+		post() {
+			this.posting = true;
+
+			(this as any).api('posts/create', {
+				text: this.text == '' ? undefined : this.text,
+				mediaIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
+				replyId: this.reply ? this.reply.id : undefined,
+				repostId: this.repost ? this.repost.id : undefined,
+				poll: this.poll ? (this.$refs.poll as any).get() : undefined,
+				geo: this.geo ? {
+					coordinates: [this.geo.longitude, this.geo.latitude],
+					altitude: this.geo.altitude,
+					accuracy: this.geo.accuracy,
+					altitudeAccuracy: this.geo.altitudeAccuracy,
+					heading: isNaN(this.geo.heading) ? null : this.geo.heading,
+					speed: this.geo.speed,
+				} : null
+			}).then(data => {
+				this.clear();
+				this.deleteDraft();
+				this.$emit('posted');
+				(this as any).apis.notify(this.repost
+					? '%i18n:desktop.tags.mk-post-form.reposted%'
+					: this.reply
+						? '%i18n:desktop.tags.mk-post-form.replied%'
+						: '%i18n:desktop.tags.mk-post-form.posted%');
+			}).catch(err => {
+				(this as any).apis.notify(this.repost
+					? '%i18n:desktop.tags.mk-post-form.repost-failed%'
+					: this.reply
+						? '%i18n:desktop.tags.mk-post-form.reply-failed%'
+						: '%i18n:desktop.tags.mk-post-form.post-failed%');
+			}).then(() => {
+				this.posting = false;
+			});
+		},
+		saveDraft() {
+			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
+
+			data[this.draftId] = {
+				updatedAt: new Date(),
+				data: {
+					text: this.text,
+					files: this.files,
+					poll: this.poll && this.$refs.poll ? (this.$refs.poll as any).get() : undefined
+				}
+			}
+
+			localStorage.setItem('drafts', JSON.stringify(data));
+		},
+		deleteDraft() {
+			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
+
+			delete data[this.draftId];
+
+			localStorage.setItem('drafts', JSON.stringify(data));
+		},
+		kao() {
+			this.text += getKao();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-post-form
+	display block
+	padding 16px
+	background lighten($theme-color, 95%)
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	> .content
+
+		textarea
+			display block
+			padding 12px
+			margin 0
+			width 100%
+			max-width 100%
+			min-width 100%
+			min-height calc(16px + 12px + 12px)
+			font-size 16px
+			color #333
+			background #fff
+			outline none
+			border solid 1px rgba($theme-color, 0.1)
+			border-radius 4px
+			transition border-color .3s ease
+
+			&:hover
+				border-color rgba($theme-color, 0.2)
+				transition border-color .1s ease
+
+				& + *
+				& + * + *
+					border-color rgba($theme-color, 0.2)
+					transition border-color .1s ease
+
+			&:focus
+				color $theme-color
+				border-color rgba($theme-color, 0.5)
+				transition border-color 0s ease
+
+				& + *
+				& + * + *
+					border-color rgba($theme-color, 0.5)
+					transition border-color 0s ease
+
+			&:disabled
+				opacity 0.5
+
+			&::-webkit-input-placeholder
+				color rgba($theme-color, 0.3)
+
+			&.with
+				border-bottom solid 1px rgba($theme-color, 0.1) !important
+				border-radius 4px 4px 0 0
+
+		> .medias
+			margin 0
+			padding 0
+			background lighten($theme-color, 98%)
+			border solid 1px rgba($theme-color, 0.1)
+			border-top none
+			border-radius 0 0 4px 4px
+			transition border-color .3s ease
+
+			&.with
+				border-bottom solid 1px rgba($theme-color, 0.1) !important
+				border-radius 0
+
+			> .remain
+				display block
+				position absolute
+				top 8px
+				right 8px
+				margin 0
+				padding 0
+				color rgba($theme-color, 0.4)
+
+			> div
+				padding 4px
+
+				&:after
+					content ""
+					display block
+					clear both
+
+				> div
+					float left
+					border solid 4px transparent
+					cursor move
+
+					&:hover > .remove
+						display block
+
+					> .img
+						width 64px
+						height 64px
+						background-size cover
+						background-position center center
+
+					> .remove
+						display none
+						position absolute
+						top -6px
+						right -6px
+						width 16px
+						height 16px
+						cursor pointer
+
+		> .mk-poll-editor
+			background lighten($theme-color, 98%)
+			border solid 1px rgba($theme-color, 0.1)
+			border-top none
+			border-radius 0 0 4px 4px
+			transition border-color .3s ease
+
+	> .mk-uploader
+		margin 8px 0 0 0
+		padding 8px
+		border solid 1px rgba($theme-color, 0.2)
+		border-radius 4px
+
+	input[type='file']
+		display none
+
+	.text-count
+		pointer-events none
+		display block
+		position absolute
+		bottom 16px
+		right 138px
+		margin 0
+		line-height 40px
+		color rgba($theme-color, 0.5)
+
+		&.over
+			color #ec3828
+
+	.submit
+		display block
+		position absolute
+		bottom 16px
+		right 16px
+		cursor pointer
+		padding 0
+		margin 0
+		width 110px
+		height 40px
+		font-size 1em
+		color $theme-color-foreground
+		background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+		outline none
+		border solid 1px lighten($theme-color, 15%)
+		border-radius 4px
+
+		&:not(:disabled)
+			font-weight bold
+
+		&:hover:not(:disabled)
+			background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+			border-color $theme-color
+
+		&:active:not(:disabled)
+			background $theme-color
+			border-color $theme-color
+
+		&:focus
+			&:after
+				content ""
+				pointer-events none
+				position absolute
+				top -5px
+				right -5px
+				bottom -5px
+				left -5px
+				border 2px solid rgba($theme-color, 0.3)
+				border-radius 8px
+
+		&:disabled
+			opacity 0.7
+			cursor default
+
+		&.wait
+			background linear-gradient(
+				45deg,
+				darken($theme-color, 10%) 25%,
+				$theme-color              25%,
+				$theme-color              50%,
+				darken($theme-color, 10%) 50%,
+				darken($theme-color, 10%) 75%,
+				$theme-color              75%,
+				$theme-color
+			)
+			background-size 32px 32px
+			animation stripe-bg 1.5s linear infinite
+			opacity 0.7
+			cursor wait
+
+			@keyframes stripe-bg
+				from {background-position: 0 0;}
+				to   {background-position: -64px 32px;}
+
+	> .upload
+	> .drive
+	> .kao
+	> .poll
+	> .geo
+		display inline-block
+		cursor pointer
+		padding 0
+		margin 8px 4px 0 0
+		width 40px
+		height 40px
+		font-size 1em
+		color rgba($theme-color, 0.5)
+		background transparent
+		outline none
+		border solid 1px transparent
+		border-radius 4px
+
+		&:hover
+			background transparent
+			border-color rgba($theme-color, 0.3)
+
+		&:active
+			color rgba($theme-color, 0.6)
+			background linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%)
+			border-color rgba($theme-color, 0.5)
+			box-shadow 0 2px 4px rgba(0, 0, 0, 0.15) inset
+
+		&:focus
+			&:after
+				content ""
+				pointer-events none
+				position absolute
+				top -5px
+				right -5px
+				bottom -5px
+				left -5px
+				border 2px solid rgba($theme-color, 0.3)
+				border-radius 8px
+
+	> .dropzone
+		position absolute
+		left 0
+		top 0
+		width 100%
+		height 100%
+		border dashed 2px rgba($theme-color, 0.5)
+		pointer-events none
+
+</style>
diff --git a/src/client/app/desktop/views/components/post-preview.vue b/src/client/app/desktop/views/components/post-preview.vue
new file mode 100644
index 0000000000..0ac3223be2
--- /dev/null
+++ b/src/client/app/desktop/views/components/post-preview.vue
@@ -0,0 +1,103 @@
+<template>
+<div class="mk-post-preview" :title="title">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
+		<img class="avatar" :src="`${post.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="post.userId"/>
+	</router-link>
+	<div class="main">
+		<header>
+			<router-link class="name" :to="`/@${acct}`" v-user-preview="post.userId">{{ post.user.name }}</router-link>
+			<span class="username">@{{ acct }}</span>
+			<router-link class="time" :to="`/@${acct}/${post.id}`">
+				<mk-time :time="post.createdAt"/>
+			</router-link>
+		</header>
+		<div class="body">
+			<mk-sub-post-content class="text" :post="post"/>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import dateStringify from '../../../common/scripts/date-stringify';
+import getAcct from '../../../../../common/user/get-acct';
+
+export default Vue.extend({
+	props: ['post'],
+	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		},
+		title(): string {
+			return dateStringify(this.post.createdAt);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-post-preview
+	font-size 0.9em
+	background #fff
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	&:hover
+		> .main > footer > button
+			color #888
+
+	> .avatar-anchor
+		display block
+		float left
+		margin 0 16px 0 0
+
+		> .avatar
+			display block
+			width 52px
+			height 52px
+			margin 0
+			border-radius 8px
+			vertical-align bottom
+
+	> .main
+		float left
+		width calc(100% - 68px)
+
+		> header
+			display flex
+			white-space nowrap
+
+			> .name
+				margin 0 .5em 0 0
+				padding 0
+				color #607073
+				font-size 1em
+				font-weight bold
+				text-decoration none
+				white-space normal
+
+				&:hover
+					text-decoration underline
+
+			> .username
+				margin 0 .5em 0 0
+				color #d1d8da
+
+			> .time
+				margin-left auto
+				color #b2b8bb
+
+		> .body
+
+			> .text
+				cursor default
+				margin 0
+				padding 0
+				font-size 1.1em
+				color #717171
+
+</style>
diff --git a/src/client/app/desktop/views/components/posts.post.sub.vue b/src/client/app/desktop/views/components/posts.post.sub.vue
new file mode 100644
index 0000000000..65d3017d3d
--- /dev/null
+++ b/src/client/app/desktop/views/components/posts.post.sub.vue
@@ -0,0 +1,112 @@
+<template>
+<div class="sub" :title="title">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
+		<img class="avatar" :src="`${post.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="post.userId"/>
+	</router-link>
+	<div class="main">
+		<header>
+			<router-link class="name" :to="`/@${acct}`" v-user-preview="post.userId">{{ post.user.name }}</router-link>
+			<span class="username">@{{ acct }}</span>
+			<router-link class="created-at" :to="`/@${acct}/${post.id}`">
+				<mk-time :time="post.createdAt"/>
+			</router-link>
+		</header>
+		<div class="body">
+			<mk-sub-post-content class="text" :post="post"/>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import dateStringify from '../../../common/scripts/date-stringify';
+import getAcct from '../../../../../common/user/get-acct';
+
+export default Vue.extend({
+	props: ['post'],
+	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		},
+		title(): string {
+			return dateStringify(this.post.createdAt);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.sub
+	margin 0
+	padding 16px
+	font-size 0.9em
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	&:hover
+		> .main > footer > button
+			color #888
+
+	> .avatar-anchor
+		display block
+		float left
+		margin 0 14px 0 0
+
+		> .avatar
+			display block
+			width 52px
+			height 52px
+			margin 0
+			border-radius 8px
+			vertical-align bottom
+
+	> .main
+		float left
+		width calc(100% - 66px)
+
+		> header
+			display flex
+			margin-bottom 2px
+			white-space nowrap
+			line-height 21px
+
+			> .name
+				display block
+				margin 0 .5em 0 0
+				padding 0
+				overflow hidden
+				color #607073
+				font-size 1em
+				font-weight bold
+				text-decoration none
+				text-overflow ellipsis
+
+				&:hover
+					text-decoration underline
+
+			> .username
+				margin 0 .5em 0 0
+				color #d1d8da
+
+			> .created-at
+				margin-left auto
+				color #b2b8bb
+
+		> .body
+
+			> .text
+				cursor default
+				margin 0
+				padding 0
+				font-size 1.1em
+				color #717171
+
+				pre
+					max-height 120px
+					font-size 80%
+
+</style>
diff --git a/src/client/app/desktop/views/components/posts.post.vue b/src/client/app/desktop/views/components/posts.post.vue
new file mode 100644
index 0000000000..37c6e63043
--- /dev/null
+++ b/src/client/app/desktop/views/components/posts.post.vue
@@ -0,0 +1,582 @@
+<template>
+<div class="post" tabindex="-1" :title="title" @keydown="onKeydown">
+	<div class="reply-to" v-if="p.reply">
+		<x-sub :post="p.reply"/>
+	</div>
+	<div class="repost" v-if="isRepost">
+		<p>
+			<router-link class="avatar-anchor" :to="`/@${acct}`" v-user-preview="post.userId">
+				<img class="avatar" :src="`${post.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
+			</router-link>
+			%fa:retweet%
+			<span>{{ '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('{')) }}</span>
+			<a class="name" :href="`/@${acct}`" v-user-preview="post.userId">{{ post.user.name }}</a>
+			<span>{{ '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1) }}</span>
+		</p>
+		<mk-time :time="post.createdAt"/>
+	</div>
+	<article>
+		<router-link class="avatar-anchor" :to="`/@${acct}`">
+			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
+		</router-link>
+		<div class="main">
+			<header>
+				<router-link class="name" :to="`/@${acct}`" v-user-preview="p.user.id">{{ acct }}</router-link>
+				<span class="is-bot" v-if="p.user.host === null && p.user.account.isBot">bot</span>
+				<span class="username">@{{ acct }}</span>
+				<div class="info">
+					<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
+					<span class="mobile" v-if="p.viaMobile">%fa:mobile-alt%</span>
+					<router-link class="created-at" :to="url">
+						<mk-time :time="p.createdAt"/>
+					</router-link>
+				</div>
+			</header>
+			<div class="body">
+				<p class="channel" v-if="p.channel">
+					<a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>:
+				</p>
+				<div class="text">
+					<a class="reply" v-if="p.reply">%fa:reply%</a>
+					<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i" :class="$style.text"/>
+					<a class="rp" v-if="p.repost">RP:</a>
+				</div>
+				<div class="media" v-if="p.media">
+					<mk-media-list :media-list="p.media"/>
+				</div>
+				<mk-poll v-if="p.poll" :post="p" ref="pollViewer"/>
+				<div class="tags" v-if="p.tags && p.tags.length > 0">
+					<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
+				</div>
+				<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
+				<div class="map" v-if="p.geo" ref="map"></div>
+				<div class="repost" v-if="p.repost">
+					<mk-post-preview :post="p.repost"/>
+				</div>
+				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+			</div>
+			<footer>
+				<mk-reactions-viewer :post="p" ref="reactionsViewer"/>
+				<button @click="reply" title="%i18n:desktop.tags.mk-timeline-post.reply%">
+					%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
+				</button>
+				<button @click="repost" title="%i18n:desktop.tags.mk-timeline-post.repost%">
+					%fa:retweet%<p class="count" v-if="p.repostCount > 0">{{ p.repostCount }}</p>
+				</button>
+				<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:desktop.tags.mk-timeline-post.add-reaction%">
+					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
+				</button>
+				<button @click="menu" ref="menuButton">
+					%fa:ellipsis-h%
+				</button>
+				<button title="%i18n:desktop.tags.mk-timeline-post.detail">
+					<template v-if="!isDetailOpened">%fa:caret-down%</template>
+					<template v-if="isDetailOpened">%fa:caret-up%</template>
+				</button>
+			</footer>
+		</div>
+	</article>
+	<div class="detail" v-if="isDetailOpened">
+		<mk-post-status-graph width="462" height="130" :post="p"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import dateStringify from '../../../common/scripts/date-stringify';
+import getAcct from '../../../../../common/user/get-acct';
+import MkPostFormWindow from './post-form-window.vue';
+import MkRepostFormWindow from './repost-form-window.vue';
+import MkPostMenu from '../../../common/views/components/post-menu.vue';
+import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
+import XSub from './posts.post.sub.vue';
+
+function focus(el, fn) {
+	const target = fn(el);
+	if (target) {
+		if (target.hasAttribute('tabindex')) {
+			target.focus();
+		} else {
+			focus(target, fn);
+		}
+	}
+}
+
+export default Vue.extend({
+	components: {
+		XSub
+	},
+	props: ['post'],
+	data() {
+		return {
+			isDetailOpened: false,
+			connection: null,
+			connectionId: null
+		};
+	},
+	computed: {
+		acct() {
+			return getAcct(this.p.user);
+		},
+		isRepost(): boolean {
+			return (this.post.repost &&
+				this.post.text == null &&
+				this.post.mediaIds == null &&
+				this.post.poll == null);
+		},
+		p(): any {
+			return this.isRepost ? this.post.repost : this.post;
+		},
+		reactionsCount(): number {
+			return this.p.reactionCounts
+				? Object.keys(this.p.reactionCounts)
+					.map(key => this.p.reactionCounts[key])
+					.reduce((a, b) => a + b)
+				: 0;
+		},
+		title(): string {
+			return dateStringify(this.p.createdAt);
+		},
+		url(): string {
+			return `/@${this.acct}/${this.p.id}`;
+		},
+		urls(): string[] {
+			if (this.p.ast) {
+				return this.p.ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
+		}
+	},
+	created() {
+		if ((this as any).os.isSignedIn) {
+			this.connection = (this as any).os.stream.getConnection();
+			this.connectionId = (this as any).os.stream.use();
+		}
+	},
+	mounted() {
+		this.capture(true);
+
+		if ((this as any).os.isSignedIn) {
+			this.connection.on('_connected_', this.onStreamConnected);
+		}
+
+		// Draw map
+		if (this.p.geo) {
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.account.clientSettings.showMaps : true;
+			if (shouldShowMap) {
+				(this as any).os.getGoogleMaps().then(maps => {
+					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
+					const map = new maps.Map(this.$refs.map, {
+						center: uluru,
+						zoom: 15
+					});
+					new maps.Marker({
+						position: uluru,
+						map: map
+					});
+				});
+			}
+		}
+	},
+	beforeDestroy() {
+		this.decapture(true);
+
+		if ((this as any).os.isSignedIn) {
+			this.connection.off('_connected_', this.onStreamConnected);
+			(this as any).os.stream.dispose(this.connectionId);
+		}
+	},
+	methods: {
+		capture(withHandler = false) {
+			if ((this as any).os.isSignedIn) {
+				this.connection.send({
+					type: 'capture',
+					id: this.p.id
+				});
+				if (withHandler) this.connection.on('post-updated', this.onStreamPostUpdated);
+			}
+		},
+		decapture(withHandler = false) {
+			if ((this as any).os.isSignedIn) {
+				this.connection.send({
+					type: 'decapture',
+					id: this.p.id
+				});
+				if (withHandler) this.connection.off('post-updated', this.onStreamPostUpdated);
+			}
+		},
+		onStreamConnected() {
+			this.capture();
+		},
+		onStreamPostUpdated(data) {
+			const post = data.post;
+			if (post.id == this.post.id) {
+				this.$emit('update:post', post);
+			} else if (post.id == this.post.repostId) {
+				this.post.repost = post;
+			}
+		},
+		reply() {
+			(this as any).os.new(MkPostFormWindow, {
+				reply: this.p
+			});
+		},
+		repost() {
+			(this as any).os.new(MkRepostFormWindow, {
+				post: this.p
+			});
+		},
+		react() {
+			(this as any).os.new(MkReactionPicker, {
+				source: this.$refs.reactButton,
+				post: this.p
+			});
+		},
+		menu() {
+			(this as any).os.new(MkPostMenu, {
+				source: this.$refs.menuButton,
+				post: this.p
+			});
+		},
+		onKeydown(e) {
+			let shouldBeCancel = true;
+
+			switch (true) {
+				case e.which == 38: // [↑]
+				case e.which == 74: // [j]
+				case e.which == 9 && e.shiftKey: // [Shift] + [Tab]
+					focus(this.$el, e => e.previousElementSibling);
+					break;
+
+				case e.which == 40: // [↓]
+				case e.which == 75: // [k]
+				case e.which == 9: // [Tab]
+					focus(this.$el, e => e.nextElementSibling);
+					break;
+
+				case e.which == 81: // [q]
+				case e.which == 69: // [e]
+					this.repost();
+					break;
+
+				case e.which == 70: // [f]
+				case e.which == 76: // [l]
+					//this.like();
+					break;
+
+				case e.which == 82: // [r]
+					this.reply();
+					break;
+
+				default:
+					shouldBeCancel = false;
+			}
+
+			if (shouldBeCancel) e.preventDefault();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.post
+	margin 0
+	padding 0
+	background #fff
+	border-bottom solid 1px #eaeaea
+
+	&:first-child
+		border-top-left-radius 6px
+		border-top-right-radius 6px
+
+		> .repost
+			border-top-left-radius 6px
+			border-top-right-radius 6px
+
+	&:last-of-type
+		border-bottom none
+
+	&:focus
+		z-index 1
+
+		&:after
+			content ""
+			pointer-events none
+			position absolute
+			top 2px
+			right 2px
+			bottom 2px
+			left 2px
+			border 2px solid rgba($theme-color, 0.3)
+			border-radius 4px
+
+	> .repost
+		color #9dbb00
+		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+
+		> p
+			margin 0
+			padding 16px 32px
+			line-height 28px
+
+			.avatar-anchor
+				display inline-block
+
+				.avatar
+					vertical-align bottom
+					width 28px
+					height 28px
+					margin 0 8px 0 0
+					border-radius 6px
+
+			[data-fa]
+				margin-right 4px
+
+			.name
+				font-weight bold
+
+		> .mk-time
+			position absolute
+			top 16px
+			right 32px
+			font-size 0.9em
+			line-height 28px
+
+		& + article
+			padding-top 8px
+
+	> .reply-to
+		padding 0 16px
+		background rgba(0, 0, 0, 0.0125)
+
+		> .mk-post-preview
+			background transparent
+
+	> article
+		padding 28px 32px 18px 32px
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		&:hover
+			> .main > footer > button
+				color #888
+
+		> .avatar-anchor
+			display block
+			float left
+			margin 0 16px 10px 0
+			//position -webkit-sticky
+			//position sticky
+			//top 74px
+
+			> .avatar
+				display block
+				width 58px
+				height 58px
+				margin 0
+				border-radius 8px
+				vertical-align bottom
+
+		> .main
+			float left
+			width calc(100% - 74px)
+
+			> header
+				display flex
+				align-items center
+				margin-bottom 4px
+				white-space nowrap
+
+				> .name
+					display block
+					margin 0 .5em 0 0
+					padding 0
+					overflow hidden
+					color #627079
+					font-size 1em
+					font-weight bold
+					text-decoration none
+					text-overflow ellipsis
+
+					&:hover
+						text-decoration underline
+
+				> .is-bot
+					margin 0 .5em 0 0
+					padding 1px 6px
+					font-size 12px
+					color #aaa
+					border solid 1px #ddd
+					border-radius 3px
+
+				> .username
+					margin 0 .5em 0 0
+					color #ccc
+
+				> .info
+					margin-left auto
+					font-size 0.9em
+
+					> .mobile
+						margin-right 8px
+						color #ccc
+
+					> .app
+						margin-right 8px
+						padding-right 8px
+						color #ccc
+						border-right solid 1px #eaeaea
+
+					> .created-at
+						color #c0c0c0
+
+			> .body
+
+				> .text
+					cursor default
+					display block
+					margin 0
+					padding 0
+					overflow-wrap break-word
+					font-size 1.1em
+					color #717171
+
+					>>> .quote
+						margin 8px
+						padding 6px 12px
+						color #aaa
+						border-left solid 3px #eee
+
+					> .reply
+						margin-right 8px
+						color #717171
+
+					> .rp
+						margin-left 4px
+						font-style oblique
+						color #a0bf46
+
+				> .location
+					margin 4px 0
+					font-size 12px
+					color #ccc
+
+				> .map
+					width 100%
+					height 300px
+
+					&:empty
+						display none
+
+				> .tags
+					margin 4px 0 0 0
+
+					> *
+						display inline-block
+						margin 0 8px 0 0
+						padding 2px 8px 2px 16px
+						font-size 90%
+						color #8d969e
+						background #edf0f3
+						border-radius 4px
+
+						&:before
+							content ""
+							display block
+							position absolute
+							top 0
+							bottom 0
+							left 4px
+							width 8px
+							height 8px
+							margin auto 0
+							background #fff
+							border-radius 100%
+
+						&:hover
+							text-decoration none
+							background #e2e7ec
+
+				.mk-url-preview
+					margin-top 8px
+
+				> .channel
+					margin 0
+
+				> .mk-poll
+					font-size 80%
+
+				> .repost
+					margin 8px 0
+
+					> .mk-post-preview
+						padding 16px
+						border dashed 1px #c0dac6
+						border-radius 8px
+
+			> footer
+				> button
+					margin 0 28px 0 0
+					padding 0 8px
+					line-height 32px
+					font-size 1em
+					color #ddd
+					background transparent
+					border none
+					cursor pointer
+
+					&:hover
+						color #666
+
+					> .count
+						display inline
+						margin 0 0 0 8px
+						color #999
+
+					&.reacted
+						color $theme-color
+
+					&:last-child
+						position absolute
+						right 0
+						margin 0
+
+	> .detail
+		padding-top 4px
+		background rgba(0, 0, 0, 0.0125)
+
+</style>
+
+<style lang="stylus" module>
+.text
+
+	code
+		padding 4px 8px
+		margin 0 0.5em
+		font-size 80%
+		color #525252
+		background #f8f8f8
+		border-radius 2px
+
+	pre > code
+		padding 16px
+		margin 0
+
+	[data-is-me]:after
+		content "you"
+		padding 0 4px
+		margin-left 4px
+		font-size 80%
+		color $theme-color-foreground
+		background $theme-color
+		border-radius 4px
+</style>
diff --git a/src/client/app/desktop/views/components/posts.vue b/src/client/app/desktop/views/components/posts.vue
new file mode 100644
index 0000000000..5031667c7c
--- /dev/null
+++ b/src/client/app/desktop/views/components/posts.vue
@@ -0,0 +1,89 @@
+<template>
+<div class="mk-posts">
+	<template v-for="(post, i) in _posts">
+		<x-post :post="post" :key="post.id" @update:post="onPostUpdated(i, $event)"/>
+		<p class="date" v-if="i != posts.length - 1 && post._date != _posts[i + 1]._date">
+			<span>%fa:angle-up%{{ post._datetext }}</span>
+			<span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span>
+		</p>
+	</template>
+	<footer>
+		<slot name="footer"></slot>
+	</footer>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XPost from './posts.post.vue';
+
+export default Vue.extend({
+	components: {
+		XPost
+	},
+	props: {
+		posts: {
+			type: Array,
+			default: () => []
+		}
+	},
+	computed: {
+		_posts(): any[] {
+			return (this.posts as any).map(post => {
+				const date = new Date(post.createdAt).getDate();
+				const month = new Date(post.createdAt).getMonth() + 1;
+				post._date = date;
+				post._datetext = `${month}月 ${date}日`;
+				return post;
+			});
+		}
+	},
+	methods: {
+		focus() {
+			(this.$el as any).children[0].focus();
+		},
+		onPostUpdated(i, post) {
+			Vue.set((this as any).posts, i, post);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-posts
+
+	> .date
+		display block
+		margin 0
+		line-height 32px
+		font-size 14px
+		text-align center
+		color #aaa
+		background #fdfdfd
+		border-bottom solid 1px #eaeaea
+
+		span
+			margin 0 16px
+
+		[data-fa]
+			margin-right 8px
+
+	> footer
+		> *
+			display block
+			margin 0
+			padding 16px
+			width 100%
+			text-align center
+			color #ccc
+			border-top solid 1px #eaeaea
+			border-bottom-left-radius 4px
+			border-bottom-right-radius 4px
+
+		> button
+			&:hover
+				background #f5f5f5
+
+			&:active
+				background #eee
+</style>
diff --git a/src/client/app/desktop/views/components/progress-dialog.vue b/src/client/app/desktop/views/components/progress-dialog.vue
new file mode 100644
index 0000000000..a4292e1aec
--- /dev/null
+++ b/src/client/app/desktop/views/components/progress-dialog.vue
@@ -0,0 +1,95 @@
+<template>
+<mk-window ref="window" :is-modal="false" :can-close="false" width="500px" @closed="$destroy">
+	<span slot="header">{{ title }}<mk-ellipsis/></span>
+	<div :class="$style.body">
+		<p :class="$style.init" v-if="isNaN(value)">待機中<mk-ellipsis/></p>
+		<p :class="$style.percentage" v-if="!isNaN(value)">{{ Math.floor((value / max) * 100) }}</p>
+		<progress :class="$style.progress"
+			v-if="!isNaN(value) && value < max"
+			:value="isNaN(value) ? 0 : value"
+			:max="max"
+		></progress>
+		<div :class="[$style.progress, $style.waiting]" v-if="value >= max"></div>
+	</div>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['title', 'initValue', 'initMax'],
+	data() {
+		return {
+			value: this.initValue,
+			max: this.initMax
+		};
+	},
+	methods: {
+		update(value, max) {
+			this.value = parseInt(value, 10);
+			this.max = parseInt(max, 10);
+		},
+		close() {
+			(this.$refs.window as any).close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+@import '~const.styl'
+
+.body
+	padding 18px 24px 24px 24px
+
+.init
+	display block
+	margin 0
+	text-align center
+	color rgba(#000, 0.7)
+
+.percentage
+	display block
+	margin 0 0 4px 0
+	text-align center
+	line-height 16px
+	color rgba($theme-color, 0.7)
+
+	&:after
+		content '%'
+
+.progress
+	display block
+	margin 0
+	width 100%
+	height 10px
+	background transparent
+	border none
+	border-radius 4px
+	overflow hidden
+
+	&::-webkit-progress-value
+		background $theme-color
+
+	&::-webkit-progress-bar
+		background rgba($theme-color, 0.1)
+
+.waiting
+	background linear-gradient(
+		45deg,
+		lighten($theme-color, 30%) 25%,
+		$theme-color               25%,
+		$theme-color               50%,
+		lighten($theme-color, 30%) 50%,
+		lighten($theme-color, 30%) 75%,
+		$theme-color               75%,
+		$theme-color
+	)
+	background-size 32px 32px
+	animation progress-dialog-tag-progress-waiting 1.5s linear infinite
+
+	@keyframes progress-dialog-tag-progress-waiting
+		from {background-position: 0 0;}
+		to   {background-position: -64px 32px;}
+
+</style>
diff --git a/src/client/app/desktop/views/components/repost-form-window.vue b/src/client/app/desktop/views/components/repost-form-window.vue
new file mode 100644
index 0000000000..7db5adbff3
--- /dev/null
+++ b/src/client/app/desktop/views/components/repost-form-window.vue
@@ -0,0 +1,42 @@
+<template>
+<mk-window ref="window" is-modal @closed="$destroy">
+	<span slot="header" :class="$style.header">%fa:retweet%%i18n:desktop.tags.mk-repost-form-window.title%</span>
+	<mk-repost-form ref="form" :post="post" @posted="onPosted" @canceled="onCanceled"/>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['post'],
+	mounted() {
+		document.addEventListener('keydown', this.onDocumentKeydown);
+	},
+	beforeDestroy() {
+		document.removeEventListener('keydown', this.onDocumentKeydown);
+	},
+	methods: {
+		onDocumentKeydown(e) {
+			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
+				if (e.which == 27) { // Esc
+					(this.$refs.window as any).close();
+				}
+			}
+		},
+		onPosted() {
+			(this.$refs.window as any).close();
+		},
+		onCanceled() {
+			(this.$refs.window as any).close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.header
+	> [data-fa]
+		margin-right 4px
+
+</style>
diff --git a/src/client/app/desktop/views/components/repost-form.vue b/src/client/app/desktop/views/components/repost-form.vue
new file mode 100644
index 0000000000..3a5e3a7c56
--- /dev/null
+++ b/src/client/app/desktop/views/components/repost-form.vue
@@ -0,0 +1,131 @@
+<template>
+<div class="mk-repost-form">
+	<mk-post-preview :post="post"/>
+	<template v-if="!quote">
+		<footer>
+			<a class="quote" v-if="!quote" @click="onQuote">%i18n:desktop.tags.mk-repost-form.quote%</a>
+			<button class="cancel" @click="cancel">%i18n:desktop.tags.mk-repost-form.cancel%</button>
+			<button class="ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:desktop.tags.mk-repost-form.reposting%' : '%i18n:desktop.tags.mk-repost-form.repost%' }}</button>
+		</footer>
+	</template>
+	<template v-if="quote">
+		<mk-post-form ref="form" :repost="post" @posted="onChildFormPosted"/>
+	</template>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['post'],
+	data() {
+		return {
+			wait: false,
+			quote: false
+		};
+	},
+	methods: {
+		ok() {
+			this.wait = true;
+			(this as any).api('posts/create', {
+				repostId: this.post.id
+			}).then(data => {
+				this.$emit('posted');
+				(this as any).apis.notify('%i18n:desktop.tags.mk-repost-form.success%');
+			}).catch(err => {
+				(this as any).apis.notify('%i18n:desktop.tags.mk-repost-form.failure%');
+			}).then(() => {
+				this.wait = false;
+			});
+		},
+		cancel() {
+			this.$emit('canceled');
+		},
+		onQuote() {
+			this.quote = true;
+
+			this.$nextTick(() => {
+				(this.$refs.form as any).focus();
+			});
+		},
+		onChildFormPosted() {
+			this.$emit('posted');
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-repost-form
+
+	> .mk-post-preview
+		margin 16px 22px
+
+	> footer
+		height 72px
+		background lighten($theme-color, 95%)
+
+		> .quote
+			position absolute
+			bottom 16px
+			left 28px
+			line-height 40px
+
+		button
+			display block
+			position absolute
+			bottom 16px
+			cursor pointer
+			padding 0
+			margin 0
+			width 120px
+			height 40px
+			font-size 1em
+			outline none
+			border-radius 4px
+
+			&:focus
+				&:after
+					content ""
+					pointer-events none
+					position absolute
+					top -5px
+					right -5px
+					bottom -5px
+					left -5px
+					border 2px solid rgba($theme-color, 0.3)
+					border-radius 8px
+
+		> .cancel
+			right 148px
+			color #888
+			background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+			border solid 1px #e2e2e2
+
+			&:hover
+				background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+				border-color #dcdcdc
+
+			&:active
+				background #ececec
+				border-color #dcdcdc
+
+		> .ok
+			right 16px
+			font-weight bold
+			color $theme-color-foreground
+			background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+			border solid 1px lighten($theme-color, 15%)
+
+			&:hover
+				background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+				border-color $theme-color
+
+			&:active
+				background $theme-color
+				border-color $theme-color
+
+</style>
diff --git a/src/client/app/desktop/views/components/settings-window.vue b/src/client/app/desktop/views/components/settings-window.vue
new file mode 100644
index 0000000000..d5be177dcc
--- /dev/null
+++ b/src/client/app/desktop/views/components/settings-window.vue
@@ -0,0 +1,24 @@
+<template>
+<mk-window ref="window" is-modal width="700px" height="550px" @closed="$destroy">
+	<span slot="header" :class="$style.header">%fa:cog%設定</span>
+	<mk-settings @done="close"/>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	methods: {
+		close() {
+			(this as any).$refs.window.close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.header
+	> [data-fa]
+		margin-right 4px
+
+</style>
diff --git a/src/client/app/desktop/views/components/settings.2fa.vue b/src/client/app/desktop/views/components/settings.2fa.vue
new file mode 100644
index 0000000000..b8dd1dfd9b
--- /dev/null
+++ b/src/client/app/desktop/views/components/settings.2fa.vue
@@ -0,0 +1,80 @@
+<template>
+<div class="2fa">
+	<p>%i18n:desktop.tags.mk-2fa-setting.intro%<a href="%i18n:desktop.tags.mk-2fa-setting.url%" target="_blank">%i18n:desktop.tags.mk-2fa-setting.detail%</a></p>
+	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-2fa-setting.caution%</p></div>
+	<p v-if="!data && !os.i.account.twoFactorEnabled"><button @click="register" class="ui primary">%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
+	<template v-if="os.i.account.twoFactorEnabled">
+		<p>%i18n:desktop.tags.mk-2fa-setting.already-registered%</p>
+		<button @click="unregister" class="ui">%i18n:desktop.tags.mk-2fa-setting.unregister%</button>
+	</template>
+	<div v-if="data">
+		<ol>
+			<li>%i18n:desktop.tags.mk-2fa-setting.authenticator% <a href="https://support.google.com/accounts/answer/1066447" target="_blank">%i18n:desktop.tags.mk-2fa-setting.howtoinstall%</a></li>
+			<li>%i18n:desktop.tags.mk-2fa-setting.scan%<br><img :src="data.qr"></li>
+			<li>%i18n:desktop.tags.mk-2fa-setting.done%<br>
+				<input type="number" v-model="token" class="ui">
+				<button @click="submit" class="ui primary">%i18n:desktop.tags.mk-2fa-setting.submit%</button>
+			</li>
+		</ol>
+		<div class="ui info"><p>%fa:info-circle%%i18n:desktop.tags.mk-2fa-setting.info%</p></div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			data: null,
+			token: null
+		};
+	},
+	methods: {
+		register() {
+			(this as any).apis.input({
+				title: '%i18n:desktop.tags.mk-2fa-setting.enter-password%',
+				type: 'password'
+			}).then(password => {
+				(this as any).api('i/2fa/register', {
+					password: password
+				}).then(data => {
+					this.data = data;
+				});
+			});
+		},
+
+		unregister() {
+			(this as any).apis.input({
+				title: '%i18n:desktop.tags.mk-2fa-setting.enter-password%',
+				type: 'password'
+			}).then(password => {
+				(this as any).api('i/2fa/unregister', {
+					password: password
+				}).then(() => {
+					(this as any).apis.notify('%i18n:desktop.tags.mk-2fa-setting.unregistered%');
+					(this as any).os.i.account.twoFactorEnabled = false;
+				});
+			});
+		},
+
+		submit() {
+			(this as any).api('i/2fa/done', {
+				token: this.token
+			}).then(() => {
+				(this as any).apis.notify('%i18n:desktop.tags.mk-2fa-setting.success%');
+				(this as any).os.i.account.twoFactorEnabled = true;
+			}).catch(() => {
+				(this as any).apis.notify('%i18n:desktop.tags.mk-2fa-setting.failed%');
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.2fa
+	color #4a535a
+
+</style>
diff --git a/src/client/app/desktop/views/components/settings.api.vue b/src/client/app/desktop/views/components/settings.api.vue
new file mode 100644
index 0000000000..0d5921ab7f
--- /dev/null
+++ b/src/client/app/desktop/views/components/settings.api.vue
@@ -0,0 +1,40 @@
+<template>
+<div class="root api">
+	<p>Token: <code>{{ os.i.account.token }}</code></p>
+	<p>%i18n:desktop.tags.mk-api-info.intro%</p>
+	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-api-info.caution%</p></div>
+	<p>%i18n:desktop.tags.mk-api-info.regeneration-of-token%</p>
+	<button class="ui" @click="regenerateToken">%i18n:desktop.tags.mk-api-info.regenerate-token%</button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	methods: {
+		regenerateToken() {
+			(this as any).apis.input({
+				title: '%i18n:desktop.tags.mk-api-info.enter-password%',
+				type: 'password'
+			}).then(password => {
+				(this as any).api('i/regenerate_token', {
+					password: password
+				});
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.root.api
+	color #4a535a
+
+	code
+		display inline-block
+		padding 4px 6px
+		color #555
+		background #eee
+		border-radius 2px
+</style>
diff --git a/src/client/app/desktop/views/components/settings.apps.vue b/src/client/app/desktop/views/components/settings.apps.vue
new file mode 100644
index 0000000000..0503b03abd
--- /dev/null
+++ b/src/client/app/desktop/views/components/settings.apps.vue
@@ -0,0 +1,39 @@
+<template>
+<div class="root">
+	<div class="none ui info" v-if="!fetching && apps.length == 0">
+		<p>%fa:info-circle%%i18n:common.tags.mk-authorized-apps.no-apps%</p>
+	</div>
+	<div class="apps" v-if="apps.length != 0">
+		<div v-for="app in apps">
+			<p><b>{{ app.name }}</b></p>
+			<p>{{ app.description }}</p>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			apps: []
+		};
+	},
+	mounted() {
+		(this as any).api('i/authorized_apps').then(apps => {
+			this.apps = apps;
+			this.fetching = false;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.root
+	> .apps
+		> div
+			padding 16px 0 0 0
+			border-bottom solid 1px #eee
+</style>
diff --git a/src/client/app/desktop/views/components/settings.drive.vue b/src/client/app/desktop/views/components/settings.drive.vue
new file mode 100644
index 0000000000..8bb0c760a7
--- /dev/null
+++ b/src/client/app/desktop/views/components/settings.drive.vue
@@ -0,0 +1,35 @@
+<template>
+<div class="root">
+	<template v-if="!fetching">
+		<el-progress :text-inside="true" :stroke-width="18" :percentage="Math.floor((usage / capacity) * 100)"/>
+		<p><b>{{ capacity | bytes }}</b>中<b>{{ usage | bytes }}</b>使用中</p>
+	</template>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			usage: null,
+			capacity: null
+		};
+	},
+	mounted() {
+		(this as any).api('drive').then(info => {
+			this.capacity = info.capacity;
+			this.usage = info.usage;
+			this.fetching = false;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.root
+	> p
+		> b
+			margin 0 8px
+</style>
diff --git a/src/client/app/desktop/views/components/settings.mute.vue b/src/client/app/desktop/views/components/settings.mute.vue
new file mode 100644
index 0000000000..a8dfe10604
--- /dev/null
+++ b/src/client/app/desktop/views/components/settings.mute.vue
@@ -0,0 +1,35 @@
+<template>
+<div>
+	<div class="none ui info" v-if="!fetching && users.length == 0">
+		<p>%fa:info-circle%%i18n:desktop.tags.mk-mute-setting.no-users%</p>
+	</div>
+	<div class="users" v-if="users.length != 0">
+		<div v-for="user in users" :key="user.id">
+			<p><b>{{ user.name }}</b> @{{ getAcct(user) }}</p>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			users: []
+		};
+	},
+	methods: {
+		getAcct
+	},
+	mounted() {
+		(this as any).api('mute/list').then(x => {
+			this.users = x.users;
+			this.fetching = false;
+		});
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/components/settings.password.vue b/src/client/app/desktop/views/components/settings.password.vue
new file mode 100644
index 0000000000..f883b54065
--- /dev/null
+++ b/src/client/app/desktop/views/components/settings.password.vue
@@ -0,0 +1,47 @@
+<template>
+<div>
+	<button @click="reset" class="ui primary">%i18n:desktop.tags.mk-password-setting.reset%</button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	methods: {
+		reset() {
+			(this as any).apis.input({
+				title: '%i18n:desktop.tags.mk-password-setting.enter-current-password%',
+				type: 'password'
+			}).then(currentPassword => {
+				(this as any).apis.input({
+					title: '%i18n:desktop.tags.mk-password-setting.enter-new-password%',
+					type: 'password'
+				}).then(newPassword => {
+					(this as any).apis.input({
+						title: '%i18n:desktop.tags.mk-password-setting.enter-new-password-again%',
+						type: 'password'
+					}).then(newPassword2 => {
+						if (newPassword !== newPassword2) {
+							(this as any).apis.dialog({
+								title: null,
+								text: '%i18n:desktop.tags.mk-password-setting.not-match%',
+								actions: [{
+									text: 'OK'
+								}]
+							});
+							return;
+						}
+						(this as any).api('i/change_password', {
+							currentPasword: currentPassword,
+							newPassword: newPassword
+						}).then(() => {
+							(this as any).apis.notify('%i18n:desktop.tags.mk-password-setting.changed%');
+						});
+					});
+				});
+			});
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/components/settings.profile.vue b/src/client/app/desktop/views/components/settings.profile.vue
new file mode 100644
index 0000000000..ba86286f87
--- /dev/null
+++ b/src/client/app/desktop/views/components/settings.profile.vue
@@ -0,0 +1,87 @@
+<template>
+<div class="profile">
+	<label class="avatar ui from group">
+		<p>%i18n:desktop.tags.mk-profile-setting.avatar%</p>
+		<img class="avatar" :src="`${os.i.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		<button class="ui" @click="updateAvatar">%i18n:desktop.tags.mk-profile-setting.choice-avatar%</button>
+	</label>
+	<label class="ui from group">
+		<p>%i18n:desktop.tags.mk-profile-setting.name%</p>
+		<input v-model="name" type="text" class="ui"/>
+	</label>
+	<label class="ui from group">
+		<p>%i18n:desktop.tags.mk-profile-setting.location%</p>
+		<input v-model="location" type="text" class="ui"/>
+	</label>
+	<label class="ui from group">
+		<p>%i18n:desktop.tags.mk-profile-setting.description%</p>
+		<textarea v-model="description" class="ui"></textarea>
+	</label>
+	<label class="ui from group">
+		<p>%i18n:desktop.tags.mk-profile-setting.birthday%</p>
+		<el-date-picker v-model="birthday" type="date" value-format="yyyy-MM-dd"/>
+	</label>
+	<button class="ui primary" @click="save">%i18n:desktop.tags.mk-profile-setting.save%</button>
+	<section>
+		<h2>その他</h2>
+		<mk-switch v-model="os.i.account.isBot" @change="onChangeIsBot" text="このアカウントはbotです"/>
+	</section>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			name: null,
+			location: null,
+			description: null,
+			birthday: null,
+		};
+	},
+	created() {
+		this.name = (this as any).os.i.name;
+		this.location = (this as any).os.i.account.profile.location;
+		this.description = (this as any).os.i.description;
+		this.birthday = (this as any).os.i.account.profile.birthday;
+	},
+	methods: {
+		updateAvatar() {
+			(this as any).apis.updateAvatar();
+		},
+		save() {
+			(this as any).api('i/update', {
+				name: this.name,
+				location: this.location || null,
+				description: this.description || null,
+				birthday: this.birthday || null
+			}).then(() => {
+				(this as any).apis.notify('プロフィールを更新しました');
+			});
+		},
+		onChangeIsBot() {
+			(this as any).api('i/update', {
+				isBot: (this as any).os.i.account.isBot
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.profile
+	> .avatar
+		> img
+			display inline-block
+			vertical-align top
+			width 64px
+			height 64px
+			border-radius 4px
+
+		> button
+			margin-left 8px
+
+</style>
+
diff --git a/src/client/app/desktop/views/components/settings.signins.vue b/src/client/app/desktop/views/components/settings.signins.vue
new file mode 100644
index 0000000000..a414c95c27
--- /dev/null
+++ b/src/client/app/desktop/views/components/settings.signins.vue
@@ -0,0 +1,98 @@
+<template>
+<div class="root">
+<div class="signins" v-if="signins.length != 0">
+	<div v-for="signin in signins">
+		<header @click="signin._show = !signin._show">
+			<template v-if="signin.success">%fa:check%</template>
+			<template v-else>%fa:times%</template>
+			<span class="ip">{{ signin.ip }}</span>
+			<mk-time :time="signin.createdAt"/>
+		</header>
+		<div class="headers" v-show="signin._show">
+			<tree-view :data="signin.headers"/>
+		</div>
+	</div>
+</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			signins: [],
+			connection: null,
+			connectionId: null
+		};
+	},
+	mounted() {
+		(this as any).api('i/signin_history').then(signins => {
+			this.signins = signins;
+			this.fetching = false;
+		});
+
+		this.connection = (this as any).os.stream.getConnection();
+		this.connectionId = (this as any).os.stream.use();
+
+		this.connection.on('signin', this.onSignin);
+	},
+	beforeDestroy() {
+		this.connection.off('signin', this.onSignin);
+		(this as any).os.stream.dispose(this.connectionId);
+	},
+	methods: {
+		onSignin(signin) {
+			this.signins.unshift(signin);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.root
+	> .signins
+		> div
+			border-bottom solid 1px #eee
+
+			> header
+				display flex
+				padding 8px 0
+				line-height 32px
+				cursor pointer
+
+				> [data-fa]
+					margin-right 8px
+					text-align left
+
+					&.check
+						color #0fda82
+
+					&.times
+						color #ff3100
+
+				> .ip
+					display inline-block
+					text-align left
+					padding 8px
+					line-height 16px
+					font-family monospace
+					font-size 14px
+					color #444
+					background #f8f8f8
+					border-radius 4px
+
+				> .mk-time
+					margin-left auto
+					text-align right
+					color #777
+
+			> .headers
+				overflow auto
+				margin 0 0 16px 0
+				max-height 100px
+				white-space pre-wrap
+				word-break break-all
+
+</style>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
new file mode 100644
index 0000000000..fd82c171c1
--- /dev/null
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -0,0 +1,419 @@
+<template>
+<div class="mk-settings">
+	<div class="nav">
+		<p :class="{ active: page == 'profile' }" @mousedown="page = 'profile'">%fa:user .fw%%i18n:desktop.tags.mk-settings.profile%</p>
+		<p :class="{ active: page == 'web' }" @mousedown="page = 'web'">%fa:desktop .fw%Web</p>
+		<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'">%fa:R bell .fw%通知</p>
+		<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'">%fa:cloud .fw%%i18n:desktop.tags.mk-settings.drive%</p>
+		<p :class="{ active: page == 'mute' }" @mousedown="page = 'mute'">%fa:ban .fw%%i18n:desktop.tags.mk-settings.mute%</p>
+		<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'">%fa:puzzle-piece .fw%アプリ</p>
+		<p :class="{ active: page == 'twitter' }" @mousedown="page = 'twitter'">%fa:B twitter .fw%Twitter</p>
+		<p :class="{ active: page == 'security' }" @mousedown="page = 'security'">%fa:unlock-alt .fw%%i18n:desktop.tags.mk-settings.security%</p>
+		<p :class="{ active: page == 'api' }" @mousedown="page = 'api'">%fa:key .fw%API</p>
+		<p :class="{ active: page == 'other' }" @mousedown="page = 'other'">%fa:cogs .fw%%i18n:desktop.tags.mk-settings.other%</p>
+	</div>
+	<div class="pages">
+		<section class="profile" v-show="page == 'profile'">
+			<h1>%i18n:desktop.tags.mk-settings.profile%</h1>
+			<x-profile/>
+		</section>
+
+		<section class="web" v-show="page == 'web'">
+			<h1>動作</h1>
+			<mk-switch v-model="os.i.account.clientSettings.fetchOnScroll" @change="onChangeFetchOnScroll" text="スクロールで自動読み込み">
+				<span>ページを下までスクロールしたときに自動で追加のコンテンツを読み込みます。</span>
+			</mk-switch>
+			<mk-switch v-model="autoPopout" text="ウィンドウの自動ポップアウト">
+				<span>ウィンドウが開かれるとき、ポップアウト(ブラウザ外に切り離す)可能なら自動でポップアウトします。この設定はブラウザに記憶されます。</span>
+			</mk-switch>
+		</section>
+
+		<section class="web" v-show="page == 'web'">
+			<h1>デザインと表示</h1>
+			<div class="div">
+				<button class="ui button" @click="customizeHome">ホームをカスタマイズ</button>
+			</div>
+			<mk-switch v-model="os.i.account.clientSettings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="タイムライン上部に投稿フォームを表示する"/>
+			<mk-switch v-model="os.i.account.clientSettings.showMaps" @change="onChangeShowMaps" text="マップの自動展開">
+				<span>位置情報が添付された投稿のマップを自動的に展開します。</span>
+			</mk-switch>
+			<mk-switch v-model="os.i.account.clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
+		</section>
+
+		<section class="web" v-show="page == 'web'">
+			<h1>サウンド</h1>
+			<mk-switch v-model="enableSounds" text="サウンドを有効にする">
+				<span>投稿やメッセージを送受信したときなどにサウンドを再生します。この設定はブラウザに記憶されます。</span>
+			</mk-switch>
+			<label>ボリューム</label>
+			<el-slider
+				v-model="soundVolume"
+				:show-input="true"
+				:format-tooltip="v => `${v}%`"
+				:disabled="!enableSounds"
+			/>
+			<button class="ui button" @click="soundTest">%fa:volume-up% テスト</button>
+		</section>
+
+		<section class="web" v-show="page == 'web'">
+			<h1>モバイル</h1>
+			<mk-switch v-model="os.i.account.clientSettings.disableViaMobile" @change="onChangeDisableViaMobile" text="「モバイルからの投稿」フラグを付けない"/>
+		</section>
+
+		<section class="web" v-show="page == 'web'">
+			<h1>言語</h1>
+			<el-select v-model="lang" placeholder="言語を選択">
+				<el-option-group label="推奨">
+					<el-option label="自動" value=""/>
+				</el-option-group>
+				<el-option-group label="言語を指定">
+					<el-option label="ja-JP" value="ja"/>
+					<el-option label="en-US" value="en"/>
+				</el-option-group>
+			</el-select>
+			<div class="none ui info">
+				<p>%fa:info-circle%変更はページの再度読み込み後に反映されます。</p>
+			</div>
+		</section>
+
+		<section class="web" v-show="page == 'web'">
+			<h1>キャッシュ</h1>
+			<button class="ui button" @click="clean">クリーンアップ</button>
+			<div class="none ui info warn">
+				<p>%fa:exclamation-triangle%クリーンアップを行うと、ブラウザに記憶されたアカウント情報のキャッシュ、書きかけの投稿・返信・メッセージ、およびその他のデータ(設定情報含む)が削除されます。クリーンアップを行った後はページを再度読み込みする必要があります。</p>
+			</div>
+		</section>
+
+		<section class="notification" v-show="page == 'notification'">
+			<h1>通知</h1>
+			<mk-switch v-model="os.i.account.settings.autoWatch" @change="onChangeAutoWatch" text="投稿の自動ウォッチ">
+				<span>リアクションしたり返信したりした投稿に関する通知を自動的に受け取るようにします。</span>
+			</mk-switch>
+		</section>
+
+		<section class="drive" v-show="page == 'drive'">
+			<h1>%i18n:desktop.tags.mk-settings.drive%</h1>
+			<x-drive/>
+		</section>
+
+		<section class="mute" v-show="page == 'mute'">
+			<h1>%i18n:desktop.tags.mk-settings.mute%</h1>
+			<x-mute/>
+		</section>
+
+		<section class="apps" v-show="page == 'apps'">
+			<h1>アプリケーション</h1>
+			<x-apps/>
+		</section>
+
+		<section class="twitter" v-show="page == 'twitter'">
+			<h1>Twitter</h1>
+			<mk-twitter-setting/>
+		</section>
+
+		<section class="password" v-show="page == 'security'">
+			<h1>%i18n:desktop.tags.mk-settings.password%</h1>
+			<x-password/>
+		</section>
+
+		<section class="2fa" v-show="page == 'security'">
+			<h1>%i18n:desktop.tags.mk-settings.2fa%</h1>
+			<x-2fa/>
+		</section>
+
+		<section class="signin" v-show="page == 'security'">
+			<h1>サインイン履歴</h1>
+			<x-signins/>
+		</section>
+
+		<section class="api" v-show="page == 'api'">
+			<h1>API</h1>
+			<x-api/>
+		</section>
+
+		<section class="other" v-show="page == 'other'">
+			<h1>Misskeyについて</h1>
+			<p v-if="meta">このサーバーの運営者: <i><a :href="meta.maintainer.url" target="_blank">{{ meta.maintainer.name }}</a></i></p>
+		</section>
+
+		<section class="other" v-show="page == 'other'">
+			<h1>Misskey Update</h1>
+			<p>
+				<span>バージョン: <i>{{ version }}</i></span>
+				<template v-if="latestVersion !== undefined">
+					<br>
+					<span>最新のバージョン: <i>{{ latestVersion ? latestVersion : version }}</i></span>
+				</template>
+			</p>
+			<button class="ui button block" @click="checkForUpdate" :disabled="checkingForUpdate">
+				<template v-if="checkingForUpdate">アップデートを確認中<mk-ellipsis/></template>
+				<template v-else>アップデートを確認</template>
+			</button>
+			<details>
+				<summary>詳細設定</summary>
+				<mk-switch v-model="preventUpdate" text="アップデートを延期する(非推奨)">
+					<span>この設定をオンにしてもアップデートが反映される場合があります。この設定はこのデバイスのみ有効です。</span>
+				</mk-switch>
+			</details>
+		</section>
+
+		<section class="other" v-show="page == 'other'">
+			<h1>高度な設定</h1>
+			<mk-switch v-model="debug" text="デバッグモードを有効にする">
+				<span>この設定はブラウザに記憶されます。</span>
+			</mk-switch>
+			<template v-if="debug">
+				<mk-switch v-model="useRawScript" text="生のスクリプトを読み込む">
+					<span>圧縮されていない「生の」スクリプトを使用します。サイズが大きいため、読み込みに時間がかかる場合があります。この設定はブラウザに記憶されます。</span>
+				</mk-switch>
+				<div class="none ui info">
+				<p>%fa:info-circle%Misskeyはソースマップも提供しています。</p>
+			</div>
+			</template>
+			<mk-switch v-model="enableExperimental" text="実験的機能を有効にする">
+				<span>実験的機能を有効にするとMisskeyの動作が不安定になる可能性があります。この設定はブラウザに記憶されます。</span>
+			</mk-switch>
+			<details v-if="debug">
+				<summary>ツール</summary>
+				<button class="ui button block" @click="taskmngr">タスクマネージャ</button>
+			</details>
+		</section>
+
+		<section class="other" v-show="page == 'other'">
+			<h1>%i18n:desktop.tags.mk-settings.license%</h1>
+			<div v-html="license"></div>
+			<a :href="licenseUrl" target="_blank">サードパーティ</a>
+		</section>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XProfile from './settings.profile.vue';
+import XMute from './settings.mute.vue';
+import XPassword from './settings.password.vue';
+import X2fa from './settings.2fa.vue';
+import XApi from './settings.api.vue';
+import XApps from './settings.apps.vue';
+import XSignins from './settings.signins.vue';
+import XDrive from './settings.drive.vue';
+import { url, docsUrl, license, lang, version } from '../../../config';
+import checkForUpdate from '../../../common/scripts/check-for-update';
+import MkTaskManager from './taskmanager.vue';
+
+export default Vue.extend({
+	components: {
+		XProfile,
+		XMute,
+		XPassword,
+		X2fa,
+		XApi,
+		XApps,
+		XSignins,
+		XDrive
+	},
+	data() {
+		return {
+			page: 'profile',
+			meta: null,
+			license,
+			version,
+			latestVersion: undefined,
+			checkingForUpdate: false,
+			enableSounds: localStorage.getItem('enableSounds') == 'true',
+			autoPopout: localStorage.getItem('autoPopout') == 'true',
+			soundVolume: localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) : 100,
+			lang: localStorage.getItem('lang') || '',
+			preventUpdate: localStorage.getItem('preventUpdate') == 'true',
+			debug: localStorage.getItem('debug') == 'true',
+			useRawScript: localStorage.getItem('useRawScript') == 'true',
+			enableExperimental: localStorage.getItem('enableExperimental') == 'true'
+		};
+	},
+	computed: {
+		licenseUrl(): string {
+			return `${docsUrl}/${lang}/license`;
+		}
+	},
+	watch: {
+		autoPopout() {
+			localStorage.setItem('autoPopout', this.autoPopout ? 'true' : 'false');
+		},
+		enableSounds() {
+			localStorage.setItem('enableSounds', this.enableSounds ? 'true' : 'false');
+		},
+		soundVolume() {
+			localStorage.setItem('soundVolume', this.soundVolume.toString());
+		},
+		lang() {
+			localStorage.setItem('lang', this.lang);
+		},
+		preventUpdate() {
+			localStorage.setItem('preventUpdate', this.preventUpdate ? 'true' : 'false');
+		},
+		debug() {
+			localStorage.setItem('debug', this.debug ? 'true' : 'false');
+		},
+		useRawScript() {
+			localStorage.setItem('useRawScript', this.useRawScript ? 'true' : 'false');
+		},
+		enableExperimental() {
+			localStorage.setItem('enableExperimental', this.enableExperimental ? 'true' : 'false');
+		}
+	},
+	created() {
+		(this as any).os.getMeta().then(meta => {
+			this.meta = meta;
+		});
+	},
+	methods: {
+		taskmngr() {
+			(this as any).os.new(MkTaskManager);
+		},
+		customizeHome() {
+			this.$router.push('/i/customize-home');
+			this.$emit('done');
+		},
+		onChangeFetchOnScroll(v) {
+			(this as any).api('i/update_client_setting', {
+				name: 'fetchOnScroll',
+				value: v
+			});
+		},
+		onChangeAutoWatch(v) {
+			(this as any).api('i/update', {
+				autoWatch: v
+			});
+		},
+		onChangeShowPostFormOnTopOfTl(v) {
+			(this as any).api('i/update_client_setting', {
+				name: 'showPostFormOnTopOfTl',
+				value: v
+			});
+		},
+		onChangeShowMaps(v) {
+			(this as any).api('i/update_client_setting', {
+				name: 'showMaps',
+				value: v
+			});
+		},
+		onChangeGradientWindowHeader(v) {
+			(this as any).api('i/update_client_setting', {
+				name: 'gradientWindowHeader',
+				value: v
+			});
+		},
+		onChangeDisableViaMobile(v) {
+			(this as any).api('i/update_client_setting', {
+				name: 'disableViaMobile',
+				value: v
+			});
+		},
+		checkForUpdate() {
+			this.checkingForUpdate = true;
+			checkForUpdate((this as any).os, true, true).then(newer => {
+				this.checkingForUpdate = false;
+				this.latestVersion = newer;
+				if (newer == null) {
+					(this as any).apis.dialog({
+						title: '利用可能な更新はありません',
+						text: 'お使いのMisskeyは最新です。'
+					});
+				} else {
+					(this as any).apis.dialog({
+						title: '新しいバージョンが利用可能です',
+						text: 'ページを再度読み込みすると更新が適用されます。'
+					});
+				}
+			});
+		},
+		clean() {
+			localStorage.clear();
+			(this as any).apis.dialog({
+				title: 'キャッシュを削除しました',
+				text: 'ページを再度読み込みしてください。'
+			});
+		},
+		soundTest() {
+			const sound = new Audio(`${url}/assets/message.mp3`);
+			sound.volume = localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) / 100 : 1;
+			sound.play();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-settings
+	display flex
+	width 100%
+	height 100%
+
+	> .nav
+		flex 0 0 200px
+		width 100%
+		height 100%
+		padding 16px 0 0 0
+		overflow auto
+		border-right solid 1px #ddd
+
+		> p
+			display block
+			padding 10px 16px
+			margin 0
+			color #666
+			cursor pointer
+			user-select none
+			transition margin-left 0.2s ease
+
+			> [data-fa]
+				margin-right 4px
+
+			&:hover
+				color #555
+
+			&.active
+				margin-left 8px
+				color $theme-color !important
+
+	> .pages
+		width 100%
+		height 100%
+		flex auto
+		overflow auto
+
+		> section
+			margin 32px
+			color #4a535a
+
+			> h1
+				margin 0 0 1em 0
+				padding 0 0 8px 0
+				font-size 1em
+				color #555
+				border-bottom solid 1px #eee
+
+			&, >>> *
+				.ui.button.block
+					margin 16px 0
+
+				> section
+					margin 32px 0
+
+					> h2
+						margin 0 0 1em 0
+						padding 0 0 8px 0
+						font-size 1em
+						color #555
+						border-bottom solid 1px #eee
+
+		> .web
+			> .div
+				border-bottom solid 1px #eee
+				padding 0 0 16px 0
+				margin 0 0 16px 0
+
+</style>
diff --git a/src/client/app/desktop/views/components/sub-post-content.vue b/src/client/app/desktop/views/components/sub-post-content.vue
new file mode 100644
index 0000000000..f13822331b
--- /dev/null
+++ b/src/client/app/desktop/views/components/sub-post-content.vue
@@ -0,0 +1,56 @@
+<template>
+<div class="mk-sub-post-content">
+	<div class="body">
+		<a class="reply" v-if="post.replyId">%fa:reply%</a>
+		<mk-post-html :ast="post.ast" :i="os.i"/>
+		<a class="rp" v-if="post.repostId" :href="`/post:${post.repostId}`">RP: ...</a>
+		<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+	</div>
+	<details v-if="post.media">
+		<summary>({{ post.media.length }}つのメディア)</summary>
+		<mk-media-list :media-list="post.media"/>
+	</details>
+	<details v-if="post.poll">
+		<summary>投票</summary>
+		<mk-poll :post="post"/>
+	</details>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['post'],
+	computed: {
+		urls(): string[] {
+			if (this.post.ast) {
+				return this.post.ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-sub-post-content
+	overflow-wrap break-word
+
+	> .body
+		> .reply
+			margin-right 6px
+			color #717171
+
+		> .rp
+			margin-left 4px
+			font-style oblique
+			color #a0bf46
+
+	mk-poll
+		font-size 80%
+
+</style>
diff --git a/src/client/app/desktop/views/components/taskmanager.vue b/src/client/app/desktop/views/components/taskmanager.vue
new file mode 100644
index 0000000000..a00fabb047
--- /dev/null
+++ b/src/client/app/desktop/views/components/taskmanager.vue
@@ -0,0 +1,219 @@
+<template>
+<mk-window ref="window" width="750px" height="500px" @closed="$destroy" name="TaskManager">
+	<span slot="header" :class="$style.header">%fa:stethoscope%タスクマネージャ</span>
+	<el-tabs :class="$style.content">
+		<el-tab-pane label="Requests">
+			<el-table
+				:data="os.requests"
+				style="width: 100%"
+				:default-sort="{prop: 'date', order: 'descending'}"
+			>
+				<el-table-column type="expand">
+					<template slot-scope="props">
+						<pre>{{ props.row.data }}</pre>
+						<pre>{{ props.row.res }}</pre>
+					</template>
+				</el-table-column>
+
+				<el-table-column
+					label="Requested at"
+					prop="date"
+					sortable
+				>
+					<template slot-scope="scope">
+						<b style="margin-right: 8px">{{ scope.row.date.getTime() }}</b>
+						<span>(<mk-time :time="scope.row.date"/>)</span>
+					</template>
+				</el-table-column>
+
+				<el-table-column
+					label="Name"
+				>
+					<template slot-scope="scope">
+						<b>{{ scope.row.name }}</b>
+					</template>
+				</el-table-column>
+
+				<el-table-column
+					label="Status"
+				>
+					<template slot-scope="scope">
+						<span>{{ scope.row.status || '(pending)' }}</span>
+					</template>
+				</el-table-column>
+			</el-table>
+		</el-tab-pane>
+
+		<el-tab-pane label="Streams">
+			<el-table
+				:data="os.connections"
+				style="width: 100%"
+			>
+				<el-table-column
+					label="Uptime"
+				>
+					<template slot-scope="scope">
+						<mk-timer v-if="scope.row.connectedAt" :time="scope.row.connectedAt"/>
+						<span v-else>-</span>
+					</template>
+				</el-table-column>
+
+				<el-table-column
+					label="Name"
+				>
+					<template slot-scope="scope">
+						<b>{{ scope.row.name == '' ? '[Home]' : scope.row.name }}</b>
+					</template>
+				</el-table-column>
+
+				<el-table-column
+					label="User"
+				>
+					<template slot-scope="scope">
+						<span>{{ scope.row.user || '(anonymous)' }}</span>
+					</template>
+				</el-table-column>
+
+				<el-table-column
+					prop="state"
+					label="State"
+				/>
+
+				<el-table-column
+					prop="in"
+					label="In"
+				/>
+
+				<el-table-column
+					prop="out"
+					label="Out"
+				/>
+			</el-table>
+		</el-tab-pane>
+
+		<el-tab-pane label="Streams (Inspect)">
+			<el-tabs type="card" style="height:50%">
+				<el-tab-pane v-for="c in os.connections" :label="c.name == '' ? '[Home]' : c.name" :key="c.id" :name="c.id" ref="connectionsTab">
+					<div style="padding: 12px 0 0 12px">
+					<el-button size="mini" @click="send(c)">Send</el-button>
+					<el-button size="mini" type="warning" @click="c.isSuspended = true" v-if="!c.isSuspended">Suspend</el-button>
+					<el-button size="mini" type="success" @click="c.isSuspended = false" v-else>Resume</el-button>
+					<el-button size="mini" type="danger" @click="c.close">Disconnect</el-button>
+				</div>
+
+					<el-table
+						:data="c.inout"
+						style="width: 100%"
+						:default-sort="{prop: 'at', order: 'descending'}"
+					>
+						<el-table-column type="expand">
+							<template slot-scope="props">
+								<pre>{{ props.row.data }}</pre>
+							</template>
+						</el-table-column>
+
+						<el-table-column
+							label="Date"
+							prop="at"
+							sortable
+						>
+							<template slot-scope="scope">
+								<b style="margin-right: 8px">{{ scope.row.at.getTime() }}</b>
+								<span>(<mk-time :time="scope.row.at"/>)</span>
+							</template>
+						</el-table-column>
+
+						<el-table-column
+							label="Type"
+						>
+							<template slot-scope="scope">
+								<span>{{ getMessageType(scope.row.data) }}</span>
+							</template>
+						</el-table-column>
+
+						<el-table-column
+							label="Incoming / Outgoing"
+							prop="type"
+						/>
+					</el-table>
+				</el-tab-pane>
+			</el-tabs>
+		</el-tab-pane>
+
+		<el-tab-pane label="Windows">
+			<el-table
+				:data="Array.from(os.windows.windows)"
+				style="width: 100%"
+			>
+				<el-table-column
+					label="Name"
+				>
+					<template slot-scope="scope">
+						<b>{{ scope.row.name || '(unknown)' }}</b>
+					</template>
+				</el-table-column>
+
+				<el-table-column
+					label="Operations"
+				>
+					<template slot-scope="scope">
+						<el-button size="mini" type="danger" @click="scope.row.close">Close</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+		</el-tab-pane>
+	</el-tabs>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	mounted() {
+		(this as any).os.windows.on('added', this.onWindowsChanged);
+		(this as any).os.windows.on('removed', this.onWindowsChanged);
+	},
+	beforeDestroy() {
+		(this as any).os.windows.off('added', this.onWindowsChanged);
+		(this as any).os.windows.off('removed', this.onWindowsChanged);
+	},
+	methods: {
+		getMessageType(data): string {
+			return data.type ? data.type : '-';
+		},
+		onWindowsChanged() {
+			this.$forceUpdate();
+		},
+		send(c) {
+			(this as any).apis.input({
+				title: 'Send a JSON message',
+				allowEmpty: false
+			}).then(json => {
+				c.send(JSON.parse(json));
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.header
+	> [data-fa]
+		margin-right 4px
+
+.content
+	height 100%
+	overflow auto
+
+</style>
+
+<style>
+.el-tabs__header {
+	margin-bottom: 0 !important;
+}
+
+.el-tabs__item {
+	padding: 0 20px !important;
+}
+</style>
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
new file mode 100644
index 0000000000..65b4bd1c7a
--- /dev/null
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -0,0 +1,156 @@
+<template>
+<div class="mk-timeline">
+	<mk-friends-maker v-if="alone"/>
+	<div class="fetching" v-if="fetching">
+		<mk-ellipsis-icon/>
+	</div>
+	<p class="empty" v-if="posts.length == 0 && !fetching">
+		%fa:R comments%自分の投稿や、自分がフォローしているユーザーの投稿が表示されます。
+	</p>
+	<mk-posts :posts="posts" ref="timeline">
+		<button slot="footer" @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+			<template v-if="!moreFetching">もっと見る</template>
+			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
+		</button>
+	</mk-posts>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { url } from '../../../config';
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			posts: [],
+			connection: null,
+			connectionId: null,
+			date: null
+		};
+	},
+	computed: {
+		alone(): boolean {
+			return (this as any).os.i.followingCount == 0;
+		}
+	},
+	mounted() {
+		this.connection = (this as any).os.stream.getConnection();
+		this.connectionId = (this as any).os.stream.use();
+
+		this.connection.on('post', this.onPost);
+		this.connection.on('follow', this.onChangeFollowing);
+		this.connection.on('unfollow', this.onChangeFollowing);
+
+		document.addEventListener('keydown', this.onKeydown);
+		window.addEventListener('scroll', this.onScroll);
+
+		this.fetch();
+	},
+	beforeDestroy() {
+		this.connection.off('post', this.onPost);
+		this.connection.off('follow', this.onChangeFollowing);
+		this.connection.off('unfollow', this.onChangeFollowing);
+		(this as any).os.stream.dispose(this.connectionId);
+
+		document.removeEventListener('keydown', this.onKeydown);
+		window.removeEventListener('scroll', this.onScroll);
+	},
+	methods: {
+		fetch(cb?) {
+			this.fetching = true;
+
+			(this as any).api('posts/timeline', {
+				limit: 11,
+				untilDate: this.date ? this.date.getTime() : undefined
+			}).then(posts => {
+				if (posts.length == 11) {
+					posts.pop();
+					this.existMore = true;
+				}
+				this.posts = posts;
+				this.fetching = false;
+				this.$emit('loaded');
+				if (cb) cb();
+			});
+		},
+		more() {
+			if (this.moreFetching || this.fetching || this.posts.length == 0 || !this.existMore) return;
+			this.moreFetching = true;
+			(this as any).api('posts/timeline', {
+				limit: 11,
+				untilId: this.posts[this.posts.length - 1].id
+			}).then(posts => {
+				if (posts.length == 11) {
+					posts.pop();
+				} else {
+					this.existMore = false;
+				}
+				this.posts = this.posts.concat(posts);
+				this.moreFetching = false;
+			});
+		},
+		onPost(post) {
+			// サウンドを再生する
+			if ((this as any).os.isEnableSounds) {
+				const sound = new Audio(`${url}/assets/post.mp3`);
+				sound.volume = localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) / 100 : 1;
+				sound.play();
+			}
+
+			this.posts.unshift(post);
+		},
+		onChangeFollowing() {
+			this.fetch();
+		},
+		onScroll() {
+			if ((this as any).os.i.account.clientSettings.fetchOnScroll !== false) {
+				const current = window.scrollY + window.innerHeight;
+				if (current > document.body.offsetHeight - 8) this.more();
+			}
+		},
+		onKeydown(e) {
+			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
+				if (e.which == 84) { // t
+					(this.$refs.timeline as any).focus();
+				}
+			}
+		},
+		warp(date) {
+			this.date = date;
+			this.fetch();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-timeline
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	> .mk-friends-maker
+		border-bottom solid 1px #eee
+
+	> .fetching
+		padding 64px 0
+
+	> .empty
+		display block
+		margin 0 auto
+		padding 32px
+		max-width 400px
+		text-align center
+		color #999
+
+		> [data-fa]
+			display block
+			margin-bottom 16px
+			font-size 3em
+			color #ccc
+
+</style>
diff --git a/src/client/app/desktop/views/components/ui-notification.vue b/src/client/app/desktop/views/components/ui-notification.vue
new file mode 100644
index 0000000000..9983f02c5e
--- /dev/null
+++ b/src/client/app/desktop/views/components/ui-notification.vue
@@ -0,0 +1,61 @@
+<template>
+<div class="mk-ui-notification">
+	<p>{{ message }}</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+
+export default Vue.extend({
+	props: ['message'],
+	mounted() {
+		this.$nextTick(() => {
+			anime({
+				targets: this.$el,
+				opacity: 1,
+				translateY: [-64, 0],
+				easing: 'easeOutElastic',
+				duration: 500
+			});
+
+			setTimeout(() => {
+				anime({
+					targets: this.$el,
+					opacity: 0,
+					translateY: -64,
+					duration: 500,
+					easing: 'easeInElastic',
+					complete: () => this.$destroy()
+				});
+			}, 6000);
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-ui-notification
+	display block
+	position fixed
+	z-index 10000
+	top -128px
+	left 0
+	right 0
+	margin 0 auto
+	padding 128px 0 0 0
+	width 500px
+	color rgba(#000, 0.6)
+	background rgba(#fff, 0.9)
+	border-radius 0 0 8px 8px
+	box-shadow 0 2px 4px rgba(#000, 0.2)
+	transform translateY(-64px)
+	opacity 0
+
+	> p
+		margin 0
+		line-height 64px
+		text-align center
+
+</style>
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
new file mode 100644
index 0000000000..ec4635f338
--- /dev/null
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -0,0 +1,225 @@
+<template>
+<div class="account">
+	<button class="header" :data-active="isOpen" @click="toggle">
+		<span class="username">{{ os.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
+		<img class="avatar" :src="`${ os.i.avatarUrl }?thumbnail&size=64`" alt="avatar"/>
+	</button>
+	<transition name="zoom-in-top">
+		<div class="menu" v-if="isOpen">
+			<ul>
+				<li>
+					<router-link :to="`/@${ os.i.username }`">%fa:user%%i18n:desktop.tags.mk-ui-header-account.profile%%fa:angle-right%</router-link>
+				</li>
+				<li @click="drive">
+					<p>%fa:cloud%%i18n:desktop.tags.mk-ui-header-account.drive%%fa:angle-right%</p>
+				</li>
+				<li>
+					<a href="/i/mentions">%fa:at%%i18n:desktop.tags.mk-ui-header-account.mentions%%fa:angle-right%</a>
+				</li>
+			</ul>
+			<ul>
+				<li @click="settings">
+					<p>%fa:cog%%i18n:desktop.tags.mk-ui-header-account.settings%%fa:angle-right%</p>
+				</li>
+			</ul>
+			<ul>
+				<li @click="signout">
+					<p>%fa:power-off%%i18n:desktop.tags.mk-ui-header-account.signout%%fa:angle-right%</p>
+				</li>
+			</ul>
+		</div>
+	</transition>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import MkSettingsWindow from './settings-window.vue';
+import MkDriveWindow from './drive-window.vue';
+import contains from '../../../common/scripts/contains';
+
+export default Vue.extend({
+	data() {
+		return {
+			isOpen: false
+		};
+	},
+	beforeDestroy() {
+		this.close();
+	},
+	methods: {
+		toggle() {
+			this.isOpen ? this.close() : this.open();
+		},
+		open() {
+			this.isOpen = true;
+			Array.from(document.querySelectorAll('body *')).forEach(el => {
+				el.addEventListener('mousedown', this.onMousedown);
+			});
+		},
+		close() {
+			this.isOpen = false;
+			Array.from(document.querySelectorAll('body *')).forEach(el => {
+				el.removeEventListener('mousedown', this.onMousedown);
+			});
+		},
+		onMousedown(e) {
+			e.preventDefault();
+			if (!contains(this.$el, e.target) && this.$el != e.target) this.close();
+			return false;
+		},
+		drive() {
+			this.close();
+			(this as any).os.new(MkDriveWindow);
+		},
+		settings() {
+			this.close();
+			(this as any).os.new(MkSettingsWindow);
+		},
+		signout() {
+			(this as any).os.signout();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.account
+	> .header
+		display block
+		margin 0
+		padding 0
+		color #9eaba8
+		border none
+		background transparent
+		cursor pointer
+
+		*
+			pointer-events none
+
+		&:hover
+		&[data-active='true']
+			color darken(#9eaba8, 20%)
+
+			> .avatar
+				filter saturate(150%)
+
+		&:active
+			color darken(#9eaba8, 30%)
+
+		> .username
+			display block
+			float left
+			margin 0 12px 0 16px
+			max-width 16em
+			line-height 48px
+			font-weight bold
+			font-family Meiryo, sans-serif
+			text-decoration none
+
+			[data-fa]
+				margin-left 8px
+
+		> .avatar
+			display block
+			float left
+			min-width 32px
+			max-width 32px
+			min-height 32px
+			max-height 32px
+			margin 8px 8px 8px 0
+			border-radius 4px
+			transition filter 100ms ease
+
+	> .menu
+		display block
+		position absolute
+		top 56px
+		right -2px
+		width 230px
+		font-size 0.8em
+		background #fff
+		border-radius 4px
+		box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
+
+		&:before
+			content ""
+			pointer-events none
+			display block
+			position absolute
+			top -28px
+			right 12px
+			border-top solid 14px transparent
+			border-right solid 14px transparent
+			border-bottom solid 14px rgba(0, 0, 0, 0.1)
+			border-left solid 14px transparent
+
+		&:after
+			content ""
+			pointer-events none
+			display block
+			position absolute
+			top -27px
+			right 12px
+			border-top solid 14px transparent
+			border-right solid 14px transparent
+			border-bottom solid 14px #fff
+			border-left solid 14px transparent
+
+		ul
+			display block
+			margin 10px 0
+			padding 0
+			list-style none
+
+			& + ul
+				padding-top 10px
+				border-top solid 1px #eee
+
+			> li
+				display block
+				margin 0
+				padding 0
+
+				> a
+				> p
+					display block
+					z-index 1
+					padding 0 28px
+					margin 0
+					line-height 40px
+					color #868C8C
+					cursor pointer
+
+					*
+						pointer-events none
+
+					> [data-fa]:first-of-type
+						margin-right 6px
+
+					> [data-fa]:last-of-type
+						display block
+						position absolute
+						top 0
+						right 8px
+						z-index 1
+						padding 0 20px
+						font-size 1.2em
+						line-height 40px
+
+					&:hover, &:active
+						text-decoration none
+						background $theme-color
+						color $theme-color-foreground
+
+					&:active
+						background darken($theme-color, 10%)
+
+.zoom-in-top-enter-active,
+.zoom-in-top-leave-active {
+	transform-origin: center -16px;
+}
+
+</style>
diff --git a/src/client/app/desktop/views/components/ui.header.clock.vue b/src/client/app/desktop/views/components/ui.header.clock.vue
new file mode 100644
index 0000000000..cd23a67506
--- /dev/null
+++ b/src/client/app/desktop/views/components/ui.header.clock.vue
@@ -0,0 +1,109 @@
+<template>
+<div class="clock">
+	<div class="header">
+		<time ref="time">
+			<span class="yyyymmdd">{{ yyyy }}/{{ mm }}/{{ dd }}</span>
+			<br>
+			<span class="hhnn">{{ hh }}<span :style="{ visibility: now.getSeconds() % 2 == 0 ? 'visible' : 'hidden' }">:</span>{{ nn }}</span>
+		</time>
+	</div>
+	<div class="content">
+		<mk-analog-clock/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			now: new Date(),
+			clock: null
+		};
+	},
+	computed: {
+		yyyy(): number {
+			return this.now.getFullYear();
+		},
+		mm(): string {
+			return ('0' + (this.now.getMonth() + 1)).slice(-2);
+		},
+		dd(): string {
+			return ('0' + this.now.getDate()).slice(-2);
+		},
+		hh(): string {
+			return ('0' + this.now.getHours()).slice(-2);
+		},
+		nn(): string {
+			return ('0' + this.now.getMinutes()).slice(-2);
+		}
+	},
+	mounted() {
+		this.tick();
+		this.clock = setInterval(this.tick, 1000);
+	},
+	beforeDestroy() {
+		clearInterval(this.clock);
+	},
+	methods: {
+		tick() {
+			this.now = new Date();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.clock
+	display inline-block
+	overflow visible
+
+	> .header
+		padding 0 12px
+		text-align center
+		font-size 10px
+
+		&, *
+			cursor: default
+
+		&:hover
+			background #899492
+
+			& + .content
+				visibility visible
+
+			> time
+				color #fff !important
+
+				*
+					color #fff !important
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		> time
+			display table-cell
+			vertical-align middle
+			height 48px
+			color #9eaba8
+
+			> .yyyymmdd
+				opacity 0.7
+
+	> .content
+		visibility hidden
+		display block
+		position absolute
+		top auto
+		right 0
+		z-index 3
+		margin 0
+		padding 0
+		width 256px
+		background #899492
+
+</style>
diff --git a/src/client/app/desktop/views/components/ui.header.nav.vue b/src/client/app/desktop/views/components/ui.header.nav.vue
new file mode 100644
index 0000000000..7582e8afce
--- /dev/null
+++ b/src/client/app/desktop/views/components/ui.header.nav.vue
@@ -0,0 +1,175 @@
+<template>
+<div class="nav">
+	<ul>
+		<template v-if="os.isSignedIn">
+			<li class="home" :class="{ active: $route.name == 'index' }">
+				<router-link to="/">
+					%fa:home%
+					<p>%i18n:desktop.tags.mk-ui-header-nav.home%</p>
+				</router-link>
+			</li>
+			<li class="messaging">
+				<a @click="messaging">
+					%fa:comments%
+					<p>%i18n:desktop.tags.mk-ui-header-nav.messaging%</p>
+					<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>
+				</a>
+			</li>
+			<li class="game">
+				<a @click="game">
+					%fa:gamepad%
+					<p>ゲーム</p>
+					<template v-if="hasGameInvitations">%fa:circle%</template>
+				</a>
+			</li>
+		</template>
+		<li class="ch">
+			<a :href="chUrl" target="_blank">
+				%fa:tv%
+				<p>%i18n:desktop.tags.mk-ui-header-nav.ch%</p>
+			</a>
+		</li>
+	</ul>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { chUrl } from '../../../config';
+import MkMessagingWindow from './messaging-window.vue';
+import MkGameWindow from './game-window.vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			hasUnreadMessagingMessages: false,
+			hasGameInvitations: false,
+			connection: null,
+			connectionId: null,
+			chUrl
+		};
+	},
+	mounted() {
+		if ((this as any).os.isSignedIn) {
+			this.connection = (this as any).os.stream.getConnection();
+			this.connectionId = (this as any).os.stream.use();
+
+			this.connection.on('read_all_messaging_messages', this.onReadAllMessagingMessages);
+			this.connection.on('unread_messaging_message', this.onUnreadMessagingMessage);
+			this.connection.on('othello_invited', this.onOthelloInvited);
+			this.connection.on('othello_no_invites', this.onOthelloNoInvites);
+
+			// Fetch count of unread messaging messages
+			(this as any).api('messaging/unread').then(res => {
+				if (res.count > 0) {
+					this.hasUnreadMessagingMessages = true;
+				}
+			});
+		}
+	},
+	beforeDestroy() {
+		if ((this as any).os.isSignedIn) {
+			this.connection.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
+			this.connection.off('unread_messaging_message', this.onUnreadMessagingMessage);
+			this.connection.off('othello_invited', this.onOthelloInvited);
+			this.connection.off('othello_no_invites', this.onOthelloNoInvites);
+			(this as any).os.stream.dispose(this.connectionId);
+		}
+	},
+	methods: {
+		onUnreadMessagingMessage() {
+			this.hasUnreadMessagingMessages = true;
+		},
+
+		onReadAllMessagingMessages() {
+			this.hasUnreadMessagingMessages = false;
+		},
+
+		onOthelloInvited() {
+			this.hasGameInvitations = true;
+		},
+
+		onOthelloNoInvites() {
+			this.hasGameInvitations = false;
+		},
+
+		messaging() {
+			(this as any).os.new(MkMessagingWindow);
+		},
+
+		game() {
+			(this as any).os.new(MkGameWindow);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.nav
+	display inline-block
+	margin 0
+	padding 0
+	line-height 3rem
+	vertical-align top
+
+	> ul
+		display inline-block
+		margin 0
+		padding 0
+		vertical-align top
+		line-height 3rem
+		list-style none
+
+		> li
+			display inline-block
+			vertical-align top
+			height 48px
+			line-height 48px
+
+			&.active
+				> a
+					border-bottom solid 3px $theme-color
+
+			> a
+				display inline-block
+				z-index 1
+				height 100%
+				padding 0 24px
+				font-size 13px
+				font-variant small-caps
+				color #9eaba8
+				text-decoration none
+				transition none
+				cursor pointer
+
+				*
+					pointer-events none
+
+				&:hover
+					color darken(#9eaba8, 20%)
+					text-decoration none
+
+				> [data-fa]:first-child
+					margin-right 8px
+
+				> [data-fa]:last-child
+					margin-left 5px
+					font-size 10px
+					color $theme-color
+
+					@media (max-width 1100px)
+						margin-left -5px
+
+				> p
+					display inline
+					margin 0
+
+					@media (max-width 1100px)
+						display none
+
+				@media (max-width 700px)
+					padding 0 12px
+
+</style>
diff --git a/src/client/app/desktop/views/components/ui.header.notifications.vue b/src/client/app/desktop/views/components/ui.header.notifications.vue
new file mode 100644
index 0000000000..e829418d18
--- /dev/null
+++ b/src/client/app/desktop/views/components/ui.header.notifications.vue
@@ -0,0 +1,158 @@
+<template>
+<div class="notifications">
+	<button :data-active="isOpen" @click="toggle" title="%i18n:desktop.tags.mk-ui-header-notifications.title%">
+		%fa:R bell%<template v-if="hasUnreadNotifications">%fa:circle%</template>
+	</button>
+	<div class="pop" v-if="isOpen">
+		<mk-notifications/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import contains from '../../../common/scripts/contains';
+
+export default Vue.extend({
+	data() {
+		return {
+			isOpen: false,
+			hasUnreadNotifications: false,
+			connection: null,
+			connectionId: null
+		};
+	},
+	mounted() {
+		if ((this as any).os.isSignedIn) {
+			this.connection = (this as any).os.stream.getConnection();
+			this.connectionId = (this as any).os.stream.use();
+
+			this.connection.on('read_all_notifications', this.onReadAllNotifications);
+			this.connection.on('unread_notification', this.onUnreadNotification);
+
+			// Fetch count of unread notifications
+			(this as any).api('notifications/get_unread_count').then(res => {
+				if (res.count > 0) {
+					this.hasUnreadNotifications = true;
+				}
+			});
+		}
+	},
+	beforeDestroy() {
+		if ((this as any).os.isSignedIn) {
+			this.connection.off('read_all_notifications', this.onReadAllNotifications);
+			this.connection.off('unread_notification', this.onUnreadNotification);
+			(this as any).os.stream.dispose(this.connectionId);
+		}
+	},
+	methods: {
+		onReadAllNotifications() {
+			this.hasUnreadNotifications = false;
+		},
+
+		onUnreadNotification() {
+			this.hasUnreadNotifications = true;
+		},
+
+		toggle() {
+			this.isOpen ? this.close() : this.open();
+		},
+
+		open() {
+			this.isOpen = true;
+			Array.from(document.querySelectorAll('body *')).forEach(el => {
+				el.addEventListener('mousedown', this.onMousedown);
+			});
+		},
+
+		close() {
+			this.isOpen = false;
+			Array.from(document.querySelectorAll('body *')).forEach(el => {
+				el.removeEventListener('mousedown', this.onMousedown);
+			});
+		},
+
+		onMousedown(e) {
+			e.preventDefault();
+			if (!contains(this.$el, e.target) && this.$el != e.target) this.close();
+			return false;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.notifications
+
+	> button
+		display block
+		margin 0
+		padding 0
+		width 32px
+		color #9eaba8
+		border none
+		background transparent
+		cursor pointer
+
+		*
+			pointer-events none
+
+		&:hover
+		&[data-active='true']
+			color darken(#9eaba8, 20%)
+
+		&:active
+			color darken(#9eaba8, 30%)
+
+		> [data-fa].bell
+			font-size 1.2em
+			line-height 48px
+
+		> [data-fa].circle
+			margin-left -5px
+			vertical-align super
+			font-size 10px
+			color $theme-color
+
+	> .pop
+		display block
+		position absolute
+		top 56px
+		right -72px
+		width 300px
+		background #fff
+		border-radius 4px
+		box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
+
+		&:before
+			content ""
+			pointer-events none
+			display block
+			position absolute
+			top -28px
+			right 74px
+			border-top solid 14px transparent
+			border-right solid 14px transparent
+			border-bottom solid 14px rgba(0, 0, 0, 0.1)
+			border-left solid 14px transparent
+
+		&:after
+			content ""
+			pointer-events none
+			display block
+			position absolute
+			top -27px
+			right 74px
+			border-top solid 14px transparent
+			border-right solid 14px transparent
+			border-bottom solid 14px #fff
+			border-left solid 14px transparent
+
+		> .mk-notifications
+			max-height 350px
+			font-size 1rem
+			overflow auto
+
+</style>
diff --git a/src/client/app/desktop/views/components/ui.header.post.vue b/src/client/app/desktop/views/components/ui.header.post.vue
new file mode 100644
index 0000000000..c2f0e07dd3
--- /dev/null
+++ b/src/client/app/desktop/views/components/ui.header.post.vue
@@ -0,0 +1,54 @@
+<template>
+<div class="post">
+	<button @click="post" title="%i18n:desktop.tags.mk-ui-header-post-button.post%">%fa:pencil-alt%</button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	methods: {
+		post() {
+			(this as any).apis.post();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.post
+	display inline-block
+	padding 8px
+	height 100%
+	vertical-align top
+
+	> button
+		display inline-block
+		margin 0
+		padding 0 10px
+		height 100%
+		font-size 1.2em
+		font-weight normal
+		text-decoration none
+		color $theme-color-foreground
+		background $theme-color !important
+		outline none
+		border none
+		border-radius 4px
+		transition background 0.1s ease
+		cursor pointer
+
+		*
+			pointer-events none
+
+		&:hover
+			background lighten($theme-color, 10%) !important
+
+		&:active
+			background darken($theme-color, 10%) !important
+			transition background 0s ease
+
+</style>
diff --git a/src/client/app/desktop/views/components/ui.header.search.vue b/src/client/app/desktop/views/components/ui.header.search.vue
new file mode 100644
index 0000000000..86215556ad
--- /dev/null
+++ b/src/client/app/desktop/views/components/ui.header.search.vue
@@ -0,0 +1,70 @@
+<template>
+<form class="search" @submit.prevent="onSubmit">
+	%fa:search%
+	<input v-model="q" type="search" placeholder="%i18n:desktop.tags.mk-ui-header-search.placeholder%"/>
+	<div class="result"></div>
+</form>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			q: ''
+		};
+	},
+	methods: {
+		onSubmit() {
+			location.href = `/search?q=${encodeURIComponent(this.q)}`;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.search
+
+	> [data-fa]
+		display block
+		position absolute
+		top 0
+		left 0
+		width 48px
+		text-align center
+		line-height 48px
+		color #9eaba8
+		pointer-events none
+
+		> *
+			vertical-align middle
+
+	> input
+		user-select text
+		cursor auto
+		margin 8px 0 0 0
+		padding 6px 18px 6px 36px
+		width 14em
+		height 32px
+		font-size 1em
+		background rgba(0, 0, 0, 0.05)
+		outline none
+		//border solid 1px #ddd
+		border none
+		border-radius 16px
+		transition color 0.5s ease, border 0.5s ease
+		font-family FontAwesome, sans-serif
+
+		&::placeholder
+			color #9eaba8
+
+		&:hover
+			background rgba(0, 0, 0, 0.08)
+
+		&:focus
+			box-shadow 0 0 0 2px rgba($theme-color, 0.5) !important
+
+</style>
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
new file mode 100644
index 0000000000..7e337d2ae5
--- /dev/null
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -0,0 +1,172 @@
+<template>
+<div class="header">
+	<mk-special-message/>
+	<div class="main" ref="main">
+		<div class="backdrop"></div>
+		<div class="main">
+			<p ref="welcomeback" v-if="os.isSignedIn">おかえりなさい、<b>{{ os.i.name }}</b>さん</p>
+			<div class="container" ref="mainContainer">
+				<div class="left">
+					<x-nav/>
+				</div>
+				<div class="right">
+					<x-search/>
+					<x-account v-if="os.isSignedIn"/>
+					<x-notifications v-if="os.isSignedIn"/>
+					<x-post v-if="os.isSignedIn"/>
+					<x-clock/>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+
+import XNav from './ui.header.nav.vue';
+import XSearch from './ui.header.search.vue';
+import XAccount from './ui.header.account.vue';
+import XNotifications from './ui.header.notifications.vue';
+import XPost from './ui.header.post.vue';
+import XClock from './ui.header.clock.vue';
+
+export default Vue.extend({
+	components: {
+		XNav,
+		XSearch,
+		XAccount,
+		XNotifications,
+		XPost,
+		XClock,
+	},
+	mounted() {
+		if ((this as any).os.isSignedIn) {
+			const ago = (new Date().getTime() - new Date((this as any).os.i.account.lastUsedAt).getTime()) / 1000
+			const isHisasiburi = ago >= 3600;
+			(this as any).os.i.account.lastUsedAt = new Date();
+			if (isHisasiburi) {
+				(this.$refs.welcomeback as any).style.display = 'block';
+				(this.$refs.main as any).style.overflow = 'hidden';
+
+				anime({
+					targets: this.$refs.welcomeback,
+					top: '0',
+					opacity: 1,
+					delay: 1000,
+					duration: 500,
+					easing: 'easeOutQuad'
+				});
+
+				anime({
+					targets: this.$refs.mainContainer,
+					opacity: 0,
+					delay: 1000,
+					duration: 500,
+					easing: 'easeOutQuad'
+				});
+
+				setTimeout(() => {
+					anime({
+						targets: this.$refs.welcomeback,
+						top: '-48px',
+						opacity: 0,
+						duration: 500,
+						complete: () => {
+							(this.$refs.welcomeback as any).style.display = 'none';
+							(this.$refs.main as any).style.overflow = 'initial';
+						},
+						easing: 'easeInQuad'
+					});
+
+					anime({
+						targets: this.$refs.mainContainer,
+						opacity: 1,
+						duration: 500,
+						easing: 'easeInQuad'
+					});
+				}, 2500);
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.header
+	position -webkit-sticky
+	position sticky
+	top 0
+	z-index 1000
+	width 100%
+	box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
+
+	> .main
+		height 48px
+
+		> .backdrop
+			position absolute
+			top 0
+			z-index 1000
+			width 100%
+			height 48px
+			background #f7f7f7
+
+		> .main
+			z-index 1001
+			margin 0
+			padding 0
+			background-clip content-box
+			font-size 0.9rem
+			user-select none
+
+			> p
+				display none
+				position absolute
+				top 48px
+				width 100%
+				line-height 48px
+				margin 0
+				text-align center
+				color #888
+				opacity 0
+
+			> .container
+				display flex
+				width 100%
+				max-width 1300px
+				margin 0 auto
+
+				&:before
+					content ""
+					position absolute
+					top 0
+					left 0
+					display block
+					width 100%
+					height 48px
+					background-image url(/assets/desktop/header-logo.svg)
+					background-size 46px
+					background-position center
+					background-repeat no-repeat
+					opacity 0.3
+
+				> .left
+					margin 0 auto 0 0
+					height 48px
+
+				> .right
+					margin 0 0 0 auto
+					height 48px
+
+					> *
+						display inline-block
+						vertical-align top
+
+					@media (max-width 1100px)
+						> .mk-ui-header-search
+							display none
+
+</style>
diff --git a/src/client/app/desktop/views/components/ui.vue b/src/client/app/desktop/views/components/ui.vue
new file mode 100644
index 0000000000..87f932ff14
--- /dev/null
+++ b/src/client/app/desktop/views/components/ui.vue
@@ -0,0 +1,37 @@
+<template>
+<div>
+	<x-header/>
+	<div class="content">
+		<slot></slot>
+	</div>
+	<mk-stream-indicator v-if="os.isSignedIn"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XHeader from './ui.header.vue';
+
+export default Vue.extend({
+	components: {
+		XHeader
+	},
+	mounted() {
+		document.addEventListener('keydown', this.onKeydown);
+	},
+	beforeDestroy() {
+		document.removeEventListener('keydown', this.onKeydown);
+	},
+	methods: {
+		onKeydown(e) {
+			if (e.target.tagName == 'INPUT' || e.target.tagName == 'TEXTAREA') return;
+
+			if (e.which == 80 || e.which == 78) { // p or n
+				e.preventDefault();
+				(this as any).apis.post();
+			}
+		}
+	}
+});
+</script>
+
diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
new file mode 100644
index 0000000000..8c86b2efe8
--- /dev/null
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -0,0 +1,173 @@
+<template>
+<div class="mk-user-preview">
+	<template v-if="u != null">
+		<div class="banner" :style="u.bannerUrl ? `background-image: url(${u.bannerUrl}?thumbnail&size=512)` : ''"></div>
+		<router-link class="avatar" :to="`/@${acct}`">
+			<img :src="`${u.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		</router-link>
+		<div class="title">
+			<router-link class="name" :to="`/@${acct}`">{{ u.name }}</router-link>
+			<p class="username">@{{ acct }}</p>
+		</div>
+		<div class="description">{{ u.description }}</div>
+		<div class="status">
+			<div>
+				<p>投稿</p><a>{{ u.postsCount }}</a>
+			</div>
+			<div>
+				<p>フォロー</p><a>{{ u.followingCount }}</a>
+			</div>
+			<div>
+				<p>フォロワー</p><a>{{ u.followersCount }}</a>
+			</div>
+		</div>
+		<mk-follow-button v-if="os.isSignedIn && user.id != os.i.id" :user="u"/>
+	</template>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+import getAcct from '../../../../../common/user/get-acct';
+import parseAcct from '../../../../../common/user/parse-acct';
+
+export default Vue.extend({
+	props: {
+		user: {
+			type: [Object, String],
+			required: true
+		}
+	},
+	computed: {
+		acct() {
+			return getAcct(this.u);
+		}
+	},
+	data() {
+		return {
+			u: null
+		};
+	},
+	mounted() {
+		if (typeof this.user == 'object') {
+			this.u = this.user;
+			this.$nextTick(() => {
+				this.open();
+			});
+		} else {
+			const query = this.user[0] == '@' ?
+				parseAcct(this.user[0].substr(1)) :
+				{ userId: this.user[0] };
+
+			(this as any).api('users/show', query).then(user => {
+				this.u = user;
+				this.open();
+			});
+		}
+	},
+	methods: {
+		open() {
+			anime({
+				targets: this.$el,
+				opacity: 1,
+				'margin-top': 0,
+				duration: 200,
+				easing: 'easeOutQuad'
+			});
+		},
+		close() {
+			anime({
+				targets: this.$el,
+				opacity: 0,
+				'margin-top': '-8px',
+				duration: 200,
+				easing: 'easeOutQuad',
+				complete: () => this.$destroy()
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-user-preview
+	position absolute
+	z-index 2048
+	margin-top -8px
+	width 250px
+	background #fff
+	background-clip content-box
+	border solid 1px rgba(0, 0, 0, 0.1)
+	border-radius 4px
+	overflow hidden
+	opacity 0
+
+	> .banner
+		height 84px
+		background-color #f5f5f5
+		background-size cover
+		background-position center
+
+	> .avatar
+		display block
+		position absolute
+		top 62px
+		left 13px
+		z-index 2
+
+		> img
+			display block
+			width 58px
+			height 58px
+			margin 0
+			border solid 3px #fff
+			border-radius 8px
+
+	> .title
+		display block
+		padding 8px 0 8px 82px
+
+		> .name
+			display inline-block
+			margin 0
+			font-weight bold
+			line-height 16px
+			color #656565
+
+		> .username
+			display block
+			margin 0
+			line-height 16px
+			font-size 0.8em
+			color #999
+
+	> .description
+		padding 0 16px
+		font-size 0.7em
+		color #555
+
+	> .status
+		padding 8px 16px
+
+		> div
+			display inline-block
+			width 33%
+
+			> p
+				margin 0
+				font-size 0.7em
+				color #aaa
+
+			> a
+				font-size 1em
+				color $theme-color
+
+	> .mk-follow-button
+		position absolute
+		top 92px
+		right 8px
+
+</style>
diff --git a/src/client/app/desktop/views/components/users-list.item.vue b/src/client/app/desktop/views/components/users-list.item.vue
new file mode 100644
index 0000000000..d2bfc117da
--- /dev/null
+++ b/src/client/app/desktop/views/components/users-list.item.vue
@@ -0,0 +1,107 @@
+<template>
+<div class="root item">
+	<router-link class="avatar-anchor" :to="`/@${acct}`" v-user-preview="user.id">
+		<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+	</router-link>
+	<div class="main">
+		<header>
+			<router-link class="name" :to="`/@${acct}`" v-user-preview="user.id">{{ user.name }}</router-link>
+			<span class="username">@{{ acct }}</span>
+		</header>
+		<div class="body">
+			<p class="followed" v-if="user.isFollowed">フォローされています</p>
+			<div class="description">{{ user.description }}</div>
+		</div>
+	</div>
+	<mk-follow-button :user="user"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
+
+export default Vue.extend({
+	props: ['user'],
+	computed: {
+		acct() {
+			return getAcct(this.user);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.root.item
+	padding 16px
+	font-size 16px
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	> .avatar-anchor
+		display block
+		float left
+		margin 0 16px 0 0
+
+		> .avatar
+			display block
+			width 58px
+			height 58px
+			margin 0
+			border-radius 8px
+			vertical-align bottom
+
+	> .main
+		float left
+		width calc(100% - 74px)
+
+		> header
+			margin-bottom 2px
+
+			> .name
+				display inline
+				margin 0
+				padding 0
+				color #777
+				font-size 1em
+				font-weight 700
+				text-align left
+				text-decoration none
+
+				&:hover
+					text-decoration underline
+
+			> .username
+				text-align left
+				margin 0 0 0 8px
+				color #ccc
+
+		> .body
+			> .followed
+				display inline-block
+				margin 0 0 4px 0
+				padding 2px 8px
+				vertical-align top
+				font-size 10px
+				color #71afc7
+				background #eefaff
+				border-radius 4px
+
+			> .description
+				cursor default
+				display block
+				margin 0
+				padding 0
+				overflow-wrap break-word
+				font-size 1.1em
+				color #717171
+
+	> .mk-follow-button
+		position absolute
+		top 16px
+		right 16px
+
+</style>
diff --git a/src/client/app/desktop/views/components/users-list.vue b/src/client/app/desktop/views/components/users-list.vue
new file mode 100644
index 0000000000..a08e76f573
--- /dev/null
+++ b/src/client/app/desktop/views/components/users-list.vue
@@ -0,0 +1,143 @@
+<template>
+<div class="mk-users-list">
+	<nav>
+		<div>
+			<span :data-is-active="mode == 'all'" @click="mode = 'all'">すべて<span>{{ count }}</span></span>
+			<span v-if="os.isSignedIn && youKnowCount" :data-is-active="mode == 'iknow'" @click="mode = 'iknow'">知り合い<span>{{ youKnowCount }}</span></span>
+		</div>
+	</nav>
+	<div class="users" v-if="!fetching && users.length != 0">
+		<div v-for="u in users" :key="u.id">
+			<x-item :user="u"/>
+		</div>
+	</div>
+	<button class="more" v-if="!fetching && next != null" @click="more" :disabled="moreFetching">
+		<span v-if="!moreFetching">もっと</span>
+		<span v-if="moreFetching">読み込み中<mk-ellipsis/></span>
+	</button>
+	<p class="no" v-if="!fetching && users.length == 0">
+		<slot></slot>
+	</p>
+	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%読み込んでいます<mk-ellipsis/></p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XItem from './users-list.item.vue';
+
+export default Vue.extend({
+	components: {
+		XItem
+	},
+	props: ['fetch', 'count', 'youKnowCount'],
+	data() {
+		return {
+			limit: 30,
+			mode: 'all',
+			fetching: true,
+			moreFetching: false,
+			users: [],
+			next: null
+		};
+	},
+	mounted() {
+		this._fetch(() => {
+			this.$emit('loaded');
+		});
+	},
+	methods: {
+		_fetch(cb) {
+			this.fetching = true;
+			this.fetch(this.mode == 'iknow', this.limit, null, obj => {
+				this.users = obj.users;
+				this.next = obj.next;
+				this.fetching = false;
+				if (cb) cb();
+			});
+		},
+		more() {
+			this.moreFetching = true;
+			this.fetch(this.mode == 'iknow', this.limit, this.next, obj => {
+				this.moreFetching = false;
+				this.users = this.users.concat(obj.users);
+				this.next = obj.next;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-users-list
+	height 100%
+	background #fff
+
+	> nav
+		z-index 1
+		box-shadow 0 1px 0 rgba(#000, 0.1)
+
+		> div
+			display flex
+			justify-content center
+			margin 0 auto
+			max-width 600px
+
+			> span
+				display block
+				flex 1 1
+				text-align center
+				line-height 52px
+				font-size 14px
+				color #657786
+				border-bottom solid 2px transparent
+				cursor pointer
+
+				*
+					pointer-events none
+
+				&[data-is-active]
+					font-weight bold
+					color $theme-color
+					border-color $theme-color
+					cursor default
+
+				> span
+					display inline-block
+					margin-left 4px
+					padding 2px 5px
+					font-size 12px
+					line-height 1
+					color #888
+					background #eee
+					border-radius 20px
+
+	> .users
+		height calc(100% - 54px)
+		overflow auto
+
+		> *
+			border-bottom solid 1px rgba(0, 0, 0, 0.05)
+
+			> *
+				max-width 600px
+				margin 0 auto
+
+	> .no
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+	> .fetching
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+		> [data-fa]
+			margin-right 4px
+
+</style>
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
new file mode 100644
index 0000000000..68c5bcb8dc
--- /dev/null
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -0,0 +1,85 @@
+<template>
+<div class="mk-widget-container" :class="{ naked }">
+	<header :class="{ withGradient }" v-if="showHeader">
+		<div class="title"><slot name="header"></slot></div>
+		<slot name="func"></slot>
+	</header>
+	<slot></slot>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: {
+		showHeader: {
+			type: Boolean,
+			default: true
+		},
+		naked: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		withGradient(): boolean {
+			return (this as any).os.isSignedIn
+				? (this as any).os.i.account.clientSettings.gradientWindowHeader != null
+					? (this as any).os.i.account.clientSettings.gradientWindowHeader
+					: false
+				: false;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-widget-container
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+	overflow hidden
+
+	&.naked
+		background transparent !important
+		border none !important
+
+	> header
+		> .title
+			z-index 1
+			margin 0
+			padding 0 16px
+			line-height 42px
+			font-size 0.9em
+			font-weight bold
+			color #888
+			box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+			> [data-fa]
+				margin-right 4px
+
+			&:empty
+				display none
+
+		> button
+			position absolute
+			z-index 2
+			top 0
+			right 0
+			padding 0
+			width 42px
+			font-size 0.9em
+			line-height 42px
+			color #ccc
+
+			&:hover
+				color #aaa
+
+			&:active
+				color #999
+
+		&.withGradient
+			> .title
+				background linear-gradient(to bottom, #fff, #ececec)
+				box-shadow 0 1px rgba(#000, 0.11)
+</style>
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
new file mode 100644
index 0000000000..48dc46febd
--- /dev/null
+++ b/src/client/app/desktop/views/components/window.vue
@@ -0,0 +1,635 @@
+<template>
+<div class="mk-window" :data-flexible="isFlexible" @dragover="onDragover">
+	<div class="bg" ref="bg" v-show="isModal" @click="onBgClick"></div>
+	<div class="main" ref="main" tabindex="-1" :data-is-modal="isModal" @mousedown="onBodyMousedown" @keydown="onKeydown" :style="{ width, height }">
+		<div class="body">
+			<header ref="header"
+				:class="{ withGradient }"
+				@contextmenu.prevent="() => {}" @mousedown.prevent="onHeaderMousedown"
+			>
+				<h1><slot name="header"></slot></h1>
+				<div>
+					<button class="popout" v-if="popoutUrl" @mousedown.stop="() => {}" @click="popout" title="ポップアウト">%fa:R window-restore%</button>
+					<button class="close" v-if="canClose" @mousedown.stop="() => {}" @click="close" title="閉じる">%fa:times%</button>
+				</div>
+			</header>
+			<div class="content">
+				<slot></slot>
+			</div>
+		</div>
+		<div class="handle top" v-if="canResize" @mousedown.prevent="onTopHandleMousedown"></div>
+		<div class="handle right" v-if="canResize" @mousedown.prevent="onRightHandleMousedown"></div>
+		<div class="handle bottom" v-if="canResize" @mousedown.prevent="onBottomHandleMousedown"></div>
+		<div class="handle left" v-if="canResize" @mousedown.prevent="onLeftHandleMousedown"></div>
+		<div class="handle top-left" v-if="canResize" @mousedown.prevent="onTopLeftHandleMousedown"></div>
+		<div class="handle top-right" v-if="canResize" @mousedown.prevent="onTopRightHandleMousedown"></div>
+		<div class="handle bottom-right" v-if="canResize" @mousedown.prevent="onBottomRightHandleMousedown"></div>
+		<div class="handle bottom-left" v-if="canResize" @mousedown.prevent="onBottomLeftHandleMousedown"></div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+import contains from '../../../common/scripts/contains';
+
+const minHeight = 40;
+const minWidth = 200;
+
+function dragListen(fn) {
+	window.addEventListener('mousemove',  fn);
+	window.addEventListener('mouseleave', dragClear.bind(null, fn));
+	window.addEventListener('mouseup',    dragClear.bind(null, fn));
+}
+
+function dragClear(fn) {
+	window.removeEventListener('mousemove',  fn);
+	window.removeEventListener('mouseleave', dragClear);
+	window.removeEventListener('mouseup',    dragClear);
+}
+
+export default Vue.extend({
+	props: {
+		isModal: {
+			type: Boolean,
+			default: false
+		},
+		canClose: {
+			type: Boolean,
+			default: true
+		},
+		width: {
+			type: String,
+			default: '530px'
+		},
+		height: {
+			type: String,
+			default: 'auto'
+		},
+		popoutUrl: {
+			type: [String, Function],
+			default: null
+		},
+		name: {
+			type: String,
+			default: null
+		}
+	},
+
+	data() {
+		return {
+			preventMount: false
+		};
+	},
+
+	computed: {
+		isFlexible(): boolean {
+			return this.height == null;
+		},
+		canResize(): boolean {
+			return !this.isFlexible;
+		},
+		withGradient(): boolean {
+			return (this as any).os.isSignedIn
+				? (this as any).os.i.account.clientSettings.gradientWindowHeader != null
+					? (this as any).os.i.account.clientSettings.gradientWindowHeader
+					: false
+				: false;
+		}
+	},
+
+	created() {
+		if (localStorage.getItem('autoPopout') == 'true' && this.popoutUrl) {
+			this.popout();
+			this.preventMount = true;
+		} else {
+			// ウィンドウをウィンドウシステムに登録
+			(this as any).os.windows.add(this);
+		}
+	},
+
+	mounted() {
+		if (this.preventMount) {
+			this.$destroy();
+			return;
+		}
+
+		this.$nextTick(() => {
+			const main = this.$refs.main as any;
+			main.style.top = '15%';
+			main.style.left = (window.innerWidth / 2) - (main.offsetWidth / 2) + 'px';
+
+			window.addEventListener('resize', this.onBrowserResize);
+
+			this.open();
+		});
+	},
+
+	destroyed() {
+		// ウィンドウをウィンドウシステムから削除
+		(this as any).os.windows.remove(this);
+
+		window.removeEventListener('resize', this.onBrowserResize);
+	},
+
+	methods: {
+		open() {
+			this.$emit('opening');
+
+			this.top();
+
+			const bg = this.$refs.bg as any;
+			const main = this.$refs.main as any;
+
+			if (this.isModal) {
+				bg.style.pointerEvents = 'auto';
+				anime({
+					targets: bg,
+					opacity: 1,
+					duration: 100,
+					easing: 'linear'
+				});
+			}
+
+			main.style.pointerEvents = 'auto';
+			anime({
+				targets: main,
+				opacity: 1,
+				scale: [1.1, 1],
+				duration: 200,
+				easing: 'easeOutQuad'
+			});
+
+			if (focus) main.focus();
+
+			setTimeout(() => {
+				this.$emit('opened');
+			}, 300);
+		},
+
+		close() {
+			this.$emit('before-close');
+
+			const bg = this.$refs.bg as any;
+			const main = this.$refs.main as any;
+
+			if (this.isModal) {
+				bg.style.pointerEvents = 'none';
+				anime({
+					targets: bg,
+					opacity: 0,
+					duration: 300,
+					easing: 'linear'
+				});
+			}
+
+			main.style.pointerEvents = 'none';
+
+			anime({
+				targets: main,
+				opacity: 0,
+				scale: 0.8,
+				duration: 300,
+				easing: [0.5, -0.5, 1, 0.5]
+			});
+
+			setTimeout(() => {
+				this.$destroy();
+				this.$emit('closed');
+			}, 300);
+		},
+
+		popout() {
+			const url = typeof this.popoutUrl == 'function' ? this.popoutUrl() : this.popoutUrl;
+
+			const main = this.$refs.main as any;
+
+			if (main) {
+				const position = main.getBoundingClientRect();
+
+				const width = parseInt(getComputedStyle(main, '').width, 10);
+				const height = parseInt(getComputedStyle(main, '').height, 10);
+				const x = window.screenX + position.left;
+				const y = window.screenY + position.top;
+
+				window.open(url, url,
+					`width=${width}, height=${height}, top=${y}, left=${x}`);
+
+				this.close();
+			} else {
+				const x = window.top.outerHeight / 2 + window.top.screenY - (parseInt(this.height, 10) / 2);
+				const y = window.top.outerWidth / 2 + window.top.screenX - (parseInt(this.width, 10) / 2);
+				window.open(url, url,
+					`width=${this.width}, height=${this.height}, top=${x}, left=${y}`);
+			}
+		},
+
+		// 最前面へ移動
+		top() {
+			let z = 0;
+
+			(this as any).os.windows.getAll().forEach(w => {
+				if (w == this) return;
+				const m = w.$refs.main;
+				const mz = Number(document.defaultView.getComputedStyle(m, null).zIndex);
+				if (mz > z) z = mz;
+			});
+
+			if (z > 0) {
+				(this.$refs.main as any).style.zIndex = z + 1;
+				if (this.isModal) (this.$refs.bg as any).style.zIndex = z + 1;
+			}
+		},
+
+		onBgClick() {
+			if (this.canClose) this.close();
+		},
+
+		onBodyMousedown() {
+			this.top();
+		},
+
+		onHeaderMousedown(e) {
+			const main = this.$refs.main as any;
+
+			if (!contains(main, document.activeElement)) main.focus();
+
+			const position = main.getBoundingClientRect();
+
+			const clickX = e.clientX;
+			const clickY = e.clientY;
+			const moveBaseX = clickX - position.left;
+			const moveBaseY = clickY - position.top;
+			const browserWidth = window.innerWidth;
+			const browserHeight = window.innerHeight;
+			const windowWidth = main.offsetWidth;
+			const windowHeight = main.offsetHeight;
+
+			// 動かした時
+			dragListen(me => {
+				let moveLeft = me.clientX - moveBaseX;
+				let moveTop = me.clientY - moveBaseY;
+
+				// 上はみ出し
+				if (moveTop < 0) moveTop = 0;
+
+				// 左はみ出し
+				if (moveLeft < 0) moveLeft = 0;
+
+				// 下はみ出し
+				if (moveTop + windowHeight > browserHeight) moveTop = browserHeight - windowHeight;
+
+				// 右はみ出し
+				if (moveLeft + windowWidth > browserWidth) moveLeft = browserWidth - windowWidth;
+
+				main.style.left = moveLeft + 'px';
+				main.style.top = moveTop + 'px';
+			});
+		},
+
+		// 上ハンドル掴み時
+		onTopHandleMousedown(e) {
+			const main = this.$refs.main as any;
+
+			const base = e.clientY;
+			const height = parseInt(getComputedStyle(main, '').height, 10);
+			const top = parseInt(getComputedStyle(main, '').top, 10);
+
+			// 動かした時
+			dragListen(me => {
+				const move = me.clientY - base;
+				if (top + move > 0) {
+					if (height + -move > minHeight) {
+						this.applyTransformHeight(height + -move);
+						this.applyTransformTop(top + move);
+					} else { // 最小の高さより小さくなろうとした時
+						this.applyTransformHeight(minHeight);
+						this.applyTransformTop(top + (height - minHeight));
+					}
+				} else { // 上のはみ出し時
+					this.applyTransformHeight(top + height);
+					this.applyTransformTop(0);
+				}
+			});
+		},
+
+		// 右ハンドル掴み時
+		onRightHandleMousedown(e) {
+			const main = this.$refs.main as any;
+
+			const base = e.clientX;
+			const width = parseInt(getComputedStyle(main, '').width, 10);
+			const left = parseInt(getComputedStyle(main, '').left, 10);
+			const browserWidth = window.innerWidth;
+
+			// 動かした時
+			dragListen(me => {
+				const move = me.clientX - base;
+				if (left + width + move < browserWidth) {
+					if (width + move > minWidth) {
+						this.applyTransformWidth(width + move);
+					} else { // 最小の幅より小さくなろうとした時
+						this.applyTransformWidth(minWidth);
+					}
+				} else { // 右のはみ出し時
+					this.applyTransformWidth(browserWidth - left);
+				}
+			});
+		},
+
+		// 下ハンドル掴み時
+		onBottomHandleMousedown(e) {
+			const main = this.$refs.main as any;
+
+			const base = e.clientY;
+			const height = parseInt(getComputedStyle(main, '').height, 10);
+			const top = parseInt(getComputedStyle(main, '').top, 10);
+			const browserHeight = window.innerHeight;
+
+			// 動かした時
+			dragListen(me => {
+				const move = me.clientY - base;
+				if (top + height + move < browserHeight) {
+					if (height + move > minHeight) {
+						this.applyTransformHeight(height + move);
+					} else { // 最小の高さより小さくなろうとした時
+						this.applyTransformHeight(minHeight);
+					}
+				} else { // 下のはみ出し時
+					this.applyTransformHeight(browserHeight - top);
+				}
+			});
+		},
+
+		// 左ハンドル掴み時
+		onLeftHandleMousedown(e) {
+			const main = this.$refs.main as any;
+
+			const base = e.clientX;
+			const width = parseInt(getComputedStyle(main, '').width, 10);
+			const left = parseInt(getComputedStyle(main, '').left, 10);
+
+			// 動かした時
+			dragListen(me => {
+				const move = me.clientX - base;
+				if (left + move > 0) {
+					if (width + -move > minWidth) {
+						this.applyTransformWidth(width + -move);
+						this.applyTransformLeft(left + move);
+					} else { // 最小の幅より小さくなろうとした時
+						this.applyTransformWidth(minWidth);
+						this.applyTransformLeft(left + (width - minWidth));
+					}
+				} else { // 左のはみ出し時
+					this.applyTransformWidth(left + width);
+					this.applyTransformLeft(0);
+				}
+			});
+		},
+
+		// 左上ハンドル掴み時
+		onTopLeftHandleMousedown(e) {
+			this.onTopHandleMousedown(e);
+			this.onLeftHandleMousedown(e);
+		},
+
+		// 右上ハンドル掴み時
+		onTopRightHandleMousedown(e) {
+			this.onTopHandleMousedown(e);
+			this.onRightHandleMousedown(e);
+		},
+
+		// 右下ハンドル掴み時
+		onBottomRightHandleMousedown(e) {
+			this.onBottomHandleMousedown(e);
+			this.onRightHandleMousedown(e);
+		},
+
+		// 左下ハンドル掴み時
+		onBottomLeftHandleMousedown(e) {
+			this.onBottomHandleMousedown(e);
+			this.onLeftHandleMousedown(e);
+		},
+
+		// 高さを適用
+		applyTransformHeight(height) {
+			(this.$refs.main as any).style.height = height + 'px';
+		},
+
+		// 幅を適用
+		applyTransformWidth(width) {
+			(this.$refs.main as any).style.width = width + 'px';
+		},
+
+		// Y座標を適用
+		applyTransformTop(top) {
+			(this.$refs.main as any).style.top = top + 'px';
+		},
+
+		// X座標を適用
+		applyTransformLeft(left) {
+			(this.$refs.main as any).style.left = left + 'px';
+		},
+
+		onDragover(e) {
+			e.dataTransfer.dropEffect = 'none';
+		},
+
+		onKeydown(e) {
+			if (e.which == 27) { // Esc
+				if (this.canClose) {
+					e.preventDefault();
+					e.stopPropagation();
+					this.close();
+				}
+			}
+		},
+
+		onBrowserResize() {
+			const main = this.$refs.main as any;
+			const position = main.getBoundingClientRect();
+			const browserWidth = window.innerWidth;
+			const browserHeight = window.innerHeight;
+			const windowWidth = main.offsetWidth;
+			const windowHeight = main.offsetHeight;
+			if (position.left < 0) main.style.left = 0;
+			if (position.top < 0) main.style.top = 0;
+			if (position.left + windowWidth > browserWidth) main.style.left = browserWidth - windowWidth + 'px';
+			if (position.top + windowHeight > browserHeight) main.style.top = browserHeight - windowHeight + 'px';
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-window
+	display block
+
+	> .bg
+		display block
+		position fixed
+		z-index 2000
+		top 0
+		left 0
+		width 100%
+		height 100%
+		background rgba(0, 0, 0, 0.7)
+		opacity 0
+		pointer-events none
+
+	> .main
+		display block
+		position fixed
+		z-index 2000
+		top 15%
+		left 0
+		margin 0
+		opacity 0
+		pointer-events none
+
+		&:focus
+			&:not([data-is-modal])
+				> .body
+					box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 6px 0 rgba(0, 0, 0, 0.2)
+
+		> .handle
+			$size = 8px
+
+			position absolute
+
+			&.top
+				top -($size)
+				left 0
+				width 100%
+				height $size
+				cursor ns-resize
+
+			&.right
+				top 0
+				right -($size)
+				width $size
+				height 100%
+				cursor ew-resize
+
+			&.bottom
+				bottom -($size)
+				left 0
+				width 100%
+				height $size
+				cursor ns-resize
+
+			&.left
+				top 0
+				left -($size)
+				width $size
+				height 100%
+				cursor ew-resize
+
+			&.top-left
+				top -($size)
+				left -($size)
+				width $size * 2
+				height $size * 2
+				cursor nwse-resize
+
+			&.top-right
+				top -($size)
+				right -($size)
+				width $size * 2
+				height $size * 2
+				cursor nesw-resize
+
+			&.bottom-right
+				bottom -($size)
+				right -($size)
+				width $size * 2
+				height $size * 2
+				cursor nwse-resize
+
+			&.bottom-left
+				bottom -($size)
+				left -($size)
+				width $size * 2
+				height $size * 2
+				cursor nesw-resize
+
+		> .body
+			height 100%
+			overflow hidden
+			background #fff
+			border-radius 6px
+			box-shadow 0 2px 6px 0 rgba(0, 0, 0, 0.2)
+
+			> header
+				$header-height = 40px
+
+				z-index 1001
+				height $header-height
+				overflow hidden
+				white-space nowrap
+				cursor move
+				background #fff
+				border-radius 6px 6px 0 0
+				box-shadow 0 1px 0 rgba(#000, 0.1)
+
+				&.withGradient
+					background linear-gradient(to bottom, #fff, #ececec)
+					box-shadow 0 1px 0 rgba(#000, 0.15)
+
+				&, *
+					user-select none
+
+				> h1
+					pointer-events none
+					display block
+					margin 0 auto
+					overflow hidden
+					height $header-height
+					text-overflow ellipsis
+					text-align center
+					font-size 1em
+					line-height $header-height
+					font-weight normal
+					color #666
+
+				> div:last-child
+					position absolute
+					top 0
+					right 0
+					display block
+					z-index 1
+
+					> *
+						display inline-block
+						margin 0
+						padding 0
+						cursor pointer
+						font-size 1em
+						color rgba(#000, 0.4)
+						border none
+						outline none
+						background transparent
+
+						&:hover
+							color rgba(#000, 0.6)
+
+						&:active
+							color darken(#000, 30%)
+
+						> [data-fa]
+							padding 0
+							width $header-height
+							line-height $header-height
+							text-align center
+
+			> .content
+				height 100%
+
+	&:not([flexible])
+		> .main > .body > .content
+			height calc(100% - 40px)
+
+</style>
diff --git a/src/client/app/desktop/views/directives/index.ts b/src/client/app/desktop/views/directives/index.ts
new file mode 100644
index 0000000000..324e07596d
--- /dev/null
+++ b/src/client/app/desktop/views/directives/index.ts
@@ -0,0 +1,6 @@
+import Vue from 'vue';
+
+import userPreview from './user-preview';
+
+Vue.directive('userPreview', userPreview);
+Vue.directive('user-preview', userPreview);
diff --git a/src/client/app/desktop/views/directives/user-preview.ts b/src/client/app/desktop/views/directives/user-preview.ts
new file mode 100644
index 0000000000..8a4035881a
--- /dev/null
+++ b/src/client/app/desktop/views/directives/user-preview.ts
@@ -0,0 +1,72 @@
+/**
+ * マウスオーバーするとユーザーがプレビューされる要素を設定します
+ */
+
+import MkUserPreview from '../components/user-preview.vue';
+
+export default {
+	bind(el, binding, vn) {
+		const self = el._userPreviewDirective_ = {} as any;
+
+		self.user = binding.value;
+		self.tag = null;
+		self.showTimer = null;
+		self.hideTimer = null;
+
+		self.close = () => {
+			if (self.tag) {
+				self.tag.close();
+				self.tag = null;
+			}
+		};
+
+		const show = () => {
+			if (self.tag) return;
+
+			self.tag = new MkUserPreview({
+				parent: vn.context,
+				propsData: {
+					user: self.user
+				}
+			}).$mount();
+
+			const preview = self.tag.$el;
+			const rect = el.getBoundingClientRect();
+			const x = rect.left + el.offsetWidth + window.pageXOffset;
+			const y = rect.top + window.pageYOffset;
+
+			preview.style.top = y + 'px';
+			preview.style.left = x + 'px';
+
+			preview.addEventListener('mouseover', () => {
+				clearTimeout(self.hideTimer);
+			});
+
+			preview.addEventListener('mouseleave', () => {
+				clearTimeout(self.showTimer);
+				self.hideTimer = setTimeout(self.close, 500);
+			});
+
+			document.body.appendChild(preview);
+		};
+
+		el.addEventListener('mouseover', () => {
+			clearTimeout(self.showTimer);
+			clearTimeout(self.hideTimer);
+			self.showTimer = setTimeout(show, 500);
+		});
+
+		el.addEventListener('mouseleave', () => {
+			clearTimeout(self.showTimer);
+			clearTimeout(self.hideTimer);
+			self.hideTimer = setTimeout(self.close, 500);
+		});
+	},
+
+	unbind(el, binding, vn) {
+		const self = el._userPreviewDirective_;
+		clearTimeout(self.showTimer);
+		clearTimeout(self.hideTimer);
+		self.close();
+	}
+};
diff --git a/src/client/app/desktop/views/pages/drive.vue b/src/client/app/desktop/views/pages/drive.vue
new file mode 100644
index 0000000000..353f59b703
--- /dev/null
+++ b/src/client/app/desktop/views/pages/drive.vue
@@ -0,0 +1,52 @@
+<template>
+<div class="mk-drive-page">
+	<mk-drive :init-folder="folder" @move-root="onMoveRoot" @open-folder="onOpenFolder"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	data() {
+		return {
+			folder: null
+		};
+	},
+	created() {
+		this.folder = this.$route.params.folder;
+	},
+	mounted() {
+		document.title = 'Misskey Drive';
+	},
+	methods: {
+		onMoveRoot() {
+			const title = 'Misskey Drive';
+
+			// Rewrite URL
+			history.pushState(null, title, '/i/drive');
+
+			document.title = title;
+		},
+		onOpenFolder(folder) {
+			const title = folder.name + ' | Misskey Drive';
+
+			// Rewrite URL
+			history.pushState(null, title, '/i/drive/folder/' + folder.id);
+
+			document.title = title;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-drive-page
+	position fixed
+	width 100%
+	height 100%
+	background #fff
+
+	> .mk-drive
+		height 100%
+</style>
+
diff --git a/src/client/app/desktop/views/pages/home-customize.vue b/src/client/app/desktop/views/pages/home-customize.vue
new file mode 100644
index 0000000000..8aa06be57f
--- /dev/null
+++ b/src/client/app/desktop/views/pages/home-customize.vue
@@ -0,0 +1,12 @@
+<template>
+<mk-home customize/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	mounted() {
+		document.title = 'Misskey - ホームのカスタマイズ';
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/pages/home.vue b/src/client/app/desktop/views/pages/home.vue
new file mode 100644
index 0000000000..69e134f79f
--- /dev/null
+++ b/src/client/app/desktop/views/pages/home.vue
@@ -0,0 +1,62 @@
+<template>
+<mk-ui>
+	<mk-home :mode="mode" @loaded="loaded"/>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+import getPostSummary from '../../../../../common/get-post-summary';
+
+export default Vue.extend({
+	props: {
+		mode: {
+			type: String,
+			default: 'timeline'
+		}
+	},
+	data() {
+		return {
+			connection: null,
+			connectionId: null,
+			unreadCount: 0
+		};
+	},
+	mounted() {
+		document.title = 'Misskey';
+
+		this.connection = (this as any).os.stream.getConnection();
+		this.connectionId = (this as any).os.stream.use();
+
+		this.connection.on('post', this.onStreamPost);
+		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
+
+		Progress.start();
+	},
+	beforeDestroy() {
+		this.connection.off('post', this.onStreamPost);
+		(this as any).os.stream.dispose(this.connectionId);
+		document.removeEventListener('visibilitychange', this.onVisibilitychange);
+	},
+	methods: {
+		loaded() {
+			Progress.done();
+		},
+
+		onStreamPost(post) {
+			if (document.hidden && post.userId != (this as any).os.i.id) {
+				this.unreadCount++;
+				document.title = `(${this.unreadCount}) ${getPostSummary(post)}`;
+			}
+		},
+
+		onVisibilitychange() {
+			if (!document.hidden) {
+				this.unreadCount = 0;
+				document.title = 'Misskey';
+			}
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/pages/index.vue b/src/client/app/desktop/views/pages/index.vue
new file mode 100644
index 0000000000..0ea47d913b
--- /dev/null
+++ b/src/client/app/desktop/views/pages/index.vue
@@ -0,0 +1,16 @@
+<template>
+<component :is="os.isSignedIn ? 'home' : 'welcome'"></component>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Home from './home.vue';
+import Welcome from './welcome.vue';
+
+export default Vue.extend({
+	components: {
+		Home,
+		Welcome
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/pages/messaging-room.vue b/src/client/app/desktop/views/pages/messaging-room.vue
new file mode 100644
index 0000000000..0cab1e0d10
--- /dev/null
+++ b/src/client/app/desktop/views/pages/messaging-room.vue
@@ -0,0 +1,54 @@
+<template>
+<div class="mk-messaging-room-page">
+	<mk-messaging-room v-if="user" :user="user" :is-naked="true"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+import parseAcct from '../../../../../common/user/parse-acct';
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			user: null
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	created() {
+		this.fetch();
+	},
+	mounted() {
+		document.documentElement.style.background = '#fff';
+	},
+	methods: {
+		fetch() {
+			Progress.start();
+			this.fetching = true;
+
+			(this as any).api('users/show', parseAcct(this.$route.params.user)).then(user => {
+				this.user = user;
+				this.fetching = false;
+
+				document.title = 'メッセージ: ' + this.user.name;
+
+				Progress.done();
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-messaging-room-page
+	display flex
+	flex 1
+	flex-direction column
+	min-height 100%
+	background #fff
+
+</style>
diff --git a/src/client/app/desktop/views/pages/othello.vue b/src/client/app/desktop/views/pages/othello.vue
new file mode 100644
index 0000000000..0d8e987dd9
--- /dev/null
+++ b/src/client/app/desktop/views/pages/othello.vue
@@ -0,0 +1,50 @@
+<template>
+<component :is="ui ? 'mk-ui' : 'div'">
+	<mk-othello v-if="!fetching" :init-game="game" @gamed="onGamed"/>
+</component>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+
+export default Vue.extend({
+	props: {
+		ui: {
+			default: false
+		}
+	},
+	data() {
+		return {
+			fetching: false,
+			game: null
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	created() {
+		this.fetch();
+	},
+	methods: {
+		fetch() {
+			if (this.$route.params.game == null) return;
+
+			Progress.start();
+			this.fetching = true;
+
+			(this as any).api('othello/games/show', {
+				gameId: this.$route.params.game
+			}).then(game => {
+				this.game = game;
+				this.fetching = false;
+
+				Progress.done();
+			});
+		},
+		onGamed(game) {
+			history.pushState(null, null, '/othello/' + game.id);
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/pages/post.vue b/src/client/app/desktop/views/pages/post.vue
new file mode 100644
index 0000000000..dbd707e049
--- /dev/null
+++ b/src/client/app/desktop/views/pages/post.vue
@@ -0,0 +1,67 @@
+<template>
+<mk-ui>
+	<main v-if="!fetching">
+		<a v-if="post.next" :href="post.next">%fa:angle-up%%i18n:desktop.tags.mk-post-page.next%</a>
+		<mk-post-detail :post="post"/>
+		<a v-if="post.prev" :href="post.prev">%fa:angle-down%%i18n:desktop.tags.mk-post-page.prev%</a>
+	</main>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			post: null
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	created() {
+		this.fetch();
+	},
+	methods: {
+		fetch() {
+			Progress.start();
+			this.fetching = true;
+
+			(this as any).api('posts/show', {
+				postId: this.$route.params.post
+			}).then(post => {
+				this.post = post;
+				this.fetching = false;
+
+				Progress.done();
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+main
+	padding 16px
+	text-align center
+
+	> a
+		display inline-block
+
+		&:first-child
+			margin-bottom 4px
+
+		&:last-child
+			margin-top 4px
+
+		> [data-fa]
+			margin-right 4px
+
+	> .mk-post-detail
+		margin 0 auto
+		width 640px
+
+</style>
diff --git a/src/client/app/desktop/views/pages/search.vue b/src/client/app/desktop/views/pages/search.vue
new file mode 100644
index 0000000000..afd37c8cee
--- /dev/null
+++ b/src/client/app/desktop/views/pages/search.vue
@@ -0,0 +1,138 @@
+<template>
+<mk-ui>
+	<header :class="$style.header">
+		<h1>{{ q }}</h1>
+	</header>
+	<div :class="$style.loading" v-if="fetching">
+		<mk-ellipsis-icon/>
+	</div>
+	<p :class="$style.empty" v-if="!fetching && empty">%fa:search%「{{ q }}」に関する投稿は見つかりませんでした。</p>
+	<mk-posts ref="timeline" :class="$style.posts" :posts="posts">
+		<div slot="footer">
+			<template v-if="!moreFetching">%fa:search%</template>
+			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
+		</div>
+	</mk-posts>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+import parse from '../../../common/scripts/parse-search-query';
+
+const limit = 20;
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			offset: 0,
+			posts: []
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	computed: {
+		empty(): boolean {
+			return this.posts.length == 0;
+		},
+		q(): string {
+			return this.$route.query.q;
+		}
+	},
+	mounted() {
+		document.addEventListener('keydown', this.onDocumentKeydown);
+		window.addEventListener('scroll', this.onScroll);
+
+		this.fetch();
+	},
+	beforeDestroy() {
+		document.removeEventListener('keydown', this.onDocumentKeydown);
+		window.removeEventListener('scroll', this.onScroll);
+	},
+	methods: {
+		onDocumentKeydown(e) {
+			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
+				if (e.which == 84) { // t
+					(this.$refs.timeline as any).focus();
+				}
+			}
+		},
+		fetch() {
+			this.fetching = true;
+			Progress.start();
+
+			(this as any).api('posts/search', Object.assign({
+				limit: limit + 1,
+				offset: this.offset
+			}, parse(this.q))).then(posts => {
+				if (posts.length == limit + 1) {
+					posts.pop();
+					this.existMore = true;
+				}
+				this.posts = posts;
+				this.fetching = false;
+				Progress.done();
+			});
+		},
+		more() {
+			if (this.moreFetching || this.fetching || this.posts.length == 0 || !this.existMore) return;
+			this.offset += limit;
+			this.moreFetching = true;
+			return (this as any).api('posts/search', Object.assign({
+				limit: limit + 1,
+				offset: this.offset
+			}, parse(this.q))).then(posts => {
+				if (posts.length == limit + 1) {
+					posts.pop();
+				} else {
+					this.existMore = false;
+				}
+				this.posts = this.posts.concat(posts);
+				this.moreFetching = false;
+			});
+		},
+		onScroll() {
+			const current = window.scrollY + window.innerHeight;
+			if (current > document.body.offsetHeight - 16) this.more();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.header
+	width 100%
+	max-width 600px
+	margin 0 auto
+	color #555
+
+.posts
+	max-width 600px
+	margin 0 auto
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+	overflow hidden
+
+.loading
+	padding 64px 0
+
+.empty
+	display block
+	margin 0 auto
+	padding 32px
+	max-width 400px
+	text-align center
+	color #999
+
+	> [data-fa]
+		display block
+		margin-bottom 16px
+		font-size 3em
+		color #ccc
+
+</style>
diff --git a/src/client/app/desktop/views/pages/selectdrive.vue b/src/client/app/desktop/views/pages/selectdrive.vue
new file mode 100644
index 0000000000..4f0b86014b
--- /dev/null
+++ b/src/client/app/desktop/views/pages/selectdrive.vue
@@ -0,0 +1,177 @@
+<template>
+<div class="mkp-selectdrive">
+	<mk-drive ref="browser"
+		:multiple="multiple"
+		@selected="onSelected"
+		@change-selection="onChangeSelection"
+	/>
+	<footer>
+		<button class="upload" title="%i18n:desktop.tags.mk-selectdrive-page.upload%" @click="upload">%fa:upload%</button>
+		<button class="cancel" @click="close">%i18n:desktop.tags.mk-selectdrive-page.cancel%</button>
+		<button class="ok" @click="ok">%i18n:desktop.tags.mk-selectdrive-page.ok%</button>
+	</footer>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			files: []
+		};
+	},
+	computed: {
+		multiple(): boolean {
+			const q = (new URL(location.toString())).searchParams;
+			return q.get('multiple') == 'true';
+		}
+	},
+	mounted() {
+		document.title = '%i18n:desktop.tags.mk-selectdrive-page.title%';
+	},
+	methods: {
+		onSelected(file) {
+			this.files = [file];
+			this.ok();
+		},
+		onChangeSelection(files) {
+			this.files = files;
+		},
+		upload() {
+			(this.$refs.browser as any).selectLocalFile();
+		},
+		close() {
+			window.close();
+		},
+		ok() {
+			window.opener.cb(this.multiple ? this.files : this.files[0]);
+			this.close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mkp-selectdrive
+	display block
+	position fixed
+	width 100%
+	height 100%
+	background #fff
+
+	> .mk-drive
+		height calc(100% - 72px)
+
+	> footer
+		position fixed
+		bottom 0
+		left 0
+		width 100%
+		height 72px
+		background lighten($theme-color, 95%)
+
+		.upload
+			display inline-block
+			position absolute
+			top 8px
+			left 16px
+			cursor pointer
+			padding 0
+			margin 8px 4px 0 0
+			width 40px
+			height 40px
+			font-size 1em
+			color rgba($theme-color, 0.5)
+			background transparent
+			outline none
+			border solid 1px transparent
+			border-radius 4px
+
+			&:hover
+				background transparent
+				border-color rgba($theme-color, 0.3)
+
+			&:active
+				color rgba($theme-color, 0.6)
+				background transparent
+				border-color rgba($theme-color, 0.5)
+				box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
+
+			&:focus
+				&:after
+					content ""
+					pointer-events none
+					position absolute
+					top -5px
+					right -5px
+					bottom -5px
+					left -5px
+					border 2px solid rgba($theme-color, 0.3)
+					border-radius 8px
+
+		.ok
+		.cancel
+			display block
+			position absolute
+			bottom 16px
+			cursor pointer
+			padding 0
+			margin 0
+			width 120px
+			height 40px
+			font-size 1em
+			outline none
+			border-radius 4px
+
+			&:focus
+				&:after
+					content ""
+					pointer-events none
+					position absolute
+					top -5px
+					right -5px
+					bottom -5px
+					left -5px
+					border 2px solid rgba($theme-color, 0.3)
+					border-radius 8px
+
+			&:disabled
+				opacity 0.7
+				cursor default
+
+		.ok
+			right 16px
+			color $theme-color-foreground
+			background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+			border solid 1px lighten($theme-color, 15%)
+
+			&:not(:disabled)
+				font-weight bold
+
+			&:hover:not(:disabled)
+				background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+				border-color $theme-color
+
+			&:active:not(:disabled)
+				background $theme-color
+				border-color $theme-color
+
+		.cancel
+			right 148px
+			color #888
+			background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+			border solid 1px #e2e2e2
+
+			&:hover
+				background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+				border-color #dcdcdc
+
+			&:active
+				background #ececec
+				border-color #dcdcdc
+
+</style>
diff --git a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
new file mode 100644
index 0000000000..d0dab6c3df
--- /dev/null
+++ b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
@@ -0,0 +1,84 @@
+<template>
+<div class="followers-you-know">
+	<p class="title">%fa:users%%i18n:desktop.tags.mk-user.followers-you-know.title%</p>
+	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.followers-you-know.loading%<mk-ellipsis/></p>
+	<div v-if="!fetching && users.length > 0">
+	<router-link v-for="user in users" :to="`/@${getAcct(user)}`" :key="user.id">
+		<img :src="`${user.avatarUrl}?thumbnail&size=64`" :alt="user.name" v-user-preview="user.id"/>
+	</router-link>
+	</div>
+	<p class="empty" v-if="!fetching && users.length == 0">%i18n:desktop.tags.mk-user.followers-you-know.no-users%</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import getAcct from '../../../../../../common/user/get-acct';
+
+export default Vue.extend({
+	props: ['user'],
+	data() {
+		return {
+			users: [],
+			fetching: true
+		};
+	},
+	method() {
+		getAcct
+	},
+	mounted() {
+		(this as any).api('users/followers', {
+			userId: this.user.id,
+			iknow: true,
+			limit: 16
+		}).then(x => {
+			this.users = x.users;
+			this.fetching = false;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.followers-you-know
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	> .title
+		z-index 1
+		margin 0
+		padding 0 16px
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		color #888
+		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+		> i
+			margin-right 4px
+
+	> div
+		padding 8px
+
+		> a
+			display inline-block
+			margin 4px
+
+			> img
+				width 48px
+				height 48px
+				vertical-align bottom
+				border-radius 100%
+
+	> .initializing
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+		> i
+			margin-right 4px
+
+</style>
diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue
new file mode 100644
index 0000000000..3ec30fb438
--- /dev/null
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -0,0 +1,124 @@
+<template>
+<div class="friends">
+	<p class="title">%fa:users%%i18n:desktop.tags.mk-user.frequently-replied-users.title%</p>
+	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.frequently-replied-users.loading%<mk-ellipsis/></p>
+	<template v-if="!fetching && users.length != 0">
+		<div class="user" v-for="friend in users">
+			<router-link class="avatar-anchor" :to="`/@${getAcct(friend)}`">
+				<img class="avatar" :src="`${friend.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="friend.id"/>
+			</router-link>
+			<div class="body">
+				<router-link class="name" :to="`/@${getAcct(friend)}`" v-user-preview="friend.id">{{ friend.name }}</router-link>
+				<p class="username">@{{ getAcct(friend) }}</p>
+			</div>
+			<mk-follow-button :user="friend"/>
+		</div>
+	</template>
+	<p class="empty" v-if="!fetching && users.length == 0">%i18n:desktop.tags.mk-user.frequently-replied-users.no-users%</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import getAcct from '../../../../../../common/user/get-acct';
+
+export default Vue.extend({
+	props: ['user'],
+	data() {
+		return {
+			users: [],
+			fetching: true
+		};
+	},
+	method() {
+		getAcct
+	},
+	mounted() {
+		(this as any).api('users/get_frequently_replied_users', {
+			userId: this.user.id,
+			limit: 4
+		}).then(docs => {
+			this.users = docs.map(doc => doc.user);
+			this.fetching = false;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.friends
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	> .title
+		z-index 1
+		margin 0
+		padding 0 16px
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		color #888
+		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+		> i
+			margin-right 4px
+
+	> .initializing
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+		> i
+			margin-right 4px
+
+	> .user
+		padding 16px
+		border-bottom solid 1px #eee
+
+		&:last-child
+			border-bottom none
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		> .avatar-anchor
+			display block
+			float left
+			margin 0 12px 0 0
+
+			> .avatar
+				display block
+				width 42px
+				height 42px
+				margin 0
+				border-radius 8px
+				vertical-align bottom
+
+		> .body
+			float left
+			width calc(100% - 54px)
+
+			> .name
+				margin 0
+				font-size 16px
+				line-height 24px
+				color #555
+
+			> .username
+				display block
+				margin 0
+				font-size 15px
+				line-height 16px
+				color #ccc
+
+		> .mk-follow-button
+			position absolute
+			top 16px
+			right 16px
+
+</style>
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
new file mode 100644
index 0000000000..54f431fd2e
--- /dev/null
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -0,0 +1,196 @@
+<template>
+<div class="header" :data-is-dark-background="user.bannerUrl != null">
+	<div class="banner-container" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''">
+		<div class="banner" ref="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''" @click="onBannerClick"></div>
+	</div>
+	<div class="fade"></div>
+	<div class="container">
+		<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=150`" alt="avatar"/>
+		<div class="title">
+			<p class="name">{{ user.name }}</p>
+			<p class="username">@{{ acct }}</p>
+			<p class="location" v-if="user.host === null && user.account.profile.location">%fa:map-marker%{{ user.account.profile.location }}</p>
+		</div>
+		<footer>
+			<router-link :to="`/@${acct}`" :data-active="$parent.page == 'home'">%fa:home%概要</router-link>
+			<router-link :to="`/@${acct}/media`" :data-active="$parent.page == 'media'">%fa:image%メディア</router-link>
+			<router-link :to="`/@${acct}/graphs`" :data-active="$parent.page == 'graphs'">%fa:chart-bar%グラフ</router-link>
+		</footer>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import getAcct from '../../../../../../common/user/get-acct';
+
+export default Vue.extend({
+	props: ['user'],
+	computed: {
+		acct() {
+			return getAcct(this.user);
+		}
+	},
+	mounted() {
+		window.addEventListener('load', this.onScroll);
+		window.addEventListener('scroll', this.onScroll);
+		window.addEventListener('resize', this.onScroll);
+	},
+	beforeDestroy() {
+		window.removeEventListener('load', this.onScroll);
+		window.removeEventListener('scroll', this.onScroll);
+		window.removeEventListener('resize', this.onScroll);
+	},
+	methods: {
+		onScroll() {
+			const banner = this.$refs.banner as any;
+
+			const top = window.scrollY;
+
+			const z = 1.25; // 奥行き(小さいほど奥)
+			const pos = -(top / z);
+			banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
+
+			const blur = top / 32
+			if (blur <= 10) banner.style.filter = `blur(${blur}px)`;
+		},
+
+		onBannerClick() {
+			if (!(this as any).os.isSignedIn || (this as any).os.i.id != this.user.id) return;
+
+			(this as any).apis.updateBanner((this as any).os.i, i => {
+				this.user.bannerUrl = i.bannerUrl;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.header
+	$banner-height = 320px
+	$footer-height = 58px
+
+	overflow hidden
+	background #f7f7f7
+	box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
+
+	&[data-is-dark-background]
+		> .banner-container
+			> .banner
+				background-color #383838
+
+		> .fade
+			background linear-gradient(transparent, rgba(0, 0, 0, 0.7))
+
+		> .container
+			> .title
+				color #fff
+
+				> .name
+					text-shadow 0 0 8px #000
+
+	> .banner-container
+		height $banner-height
+		overflow hidden
+		background-size cover
+		background-position center
+
+		> .banner
+			height 100%
+			background-color #f5f5f5
+			background-size cover
+			background-position center
+
+	> .fade
+		$fade-hight = 78px
+
+		position absolute
+		top ($banner-height - $fade-hight)
+		left 0
+		width 100%
+		height $fade-hight
+
+	> .container
+		max-width 1200px
+		margin 0 auto
+
+		> .avatar
+			display block
+			position absolute
+			bottom 16px
+			left 16px
+			z-index 2
+			width 160px
+			height 160px
+			margin 0
+			border solid 3px #fff
+			border-radius 8px
+			box-shadow 1px 1px 3px rgba(0, 0, 0, 0.2)
+
+		> .title
+			position absolute
+			bottom $footer-height
+			left 0
+			width 100%
+			padding 0 0 8px 195px
+			color #656565
+			font-family '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'メイリオ', sans-serif
+
+			> .name
+				display block
+				margin 0
+				line-height 40px
+				font-weight bold
+				font-size 2em
+
+			> .username
+			> .location
+				display inline-block
+				margin 0 16px 0 0
+				line-height 20px
+				opacity 0.8
+
+				> i
+					margin-right 4px
+
+		> footer
+			z-index 1
+			height $footer-height
+			padding-left 195px
+
+			> a
+				display inline-block
+				margin 0
+				padding 0 16px
+				height $footer-height
+				line-height $footer-height
+				color #555
+
+				&[data-active]
+					border-bottom solid 4px $theme-color
+
+				> i
+					margin-right 6px
+
+			> button
+				display block
+				position absolute
+				top 0
+				right 0
+				margin 8px
+				padding 0
+				width $footer-height - 16px
+				line-height $footer-height - 16px - 2px
+				font-size 1.2em
+				color #777
+				border solid 1px #eee
+				border-radius 4px
+
+				&:hover
+					color #555
+					border solid 1px #ddd
+
+</style>
diff --git a/src/client/app/desktop/views/pages/user/user.home.vue b/src/client/app/desktop/views/pages/user/user.home.vue
new file mode 100644
index 0000000000..071c9bb61c
--- /dev/null
+++ b/src/client/app/desktop/views/pages/user/user.home.vue
@@ -0,0 +1,103 @@
+<template>
+<div class="home">
+	<div>
+		<div ref="left">
+			<x-profile :user="user"/>
+			<x-photos :user="user"/>
+			<x-followers-you-know v-if="os.isSignedIn && os.i.id != user.id" :user="user"/>
+			<p v-if="user.host === null">%i18n:desktop.tags.mk-user.last-used-at%: <b><mk-time :time="user.account.lastUsedAt"/></b></p>
+		</div>
+	</div>
+	<main>
+		<mk-post-detail v-if="user.pinnedPost" :post="user.pinnedPost" :compact="true"/>
+		<x-timeline class="timeline" ref="tl" :user="user"/>
+	</main>
+	<div>
+		<div ref="right">
+			<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>
+			<mk-activity :user="user"/>
+			<x-friends :user="user"/>
+			<div class="nav"><mk-nav/></div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XTimeline from './user.timeline.vue';
+import XProfile from './user.profile.vue';
+import XPhotos from './user.photos.vue';
+import XFollowersYouKnow from './user.followers-you-know.vue';
+import XFriends from './user.friends.vue';
+
+export default Vue.extend({
+	components: {
+		XTimeline,
+		XProfile,
+		XPhotos,
+		XFollowersYouKnow,
+		XFriends
+	},
+	props: ['user'],
+	methods: {
+		warp(date) {
+			(this.$refs.tl as any).warp(date);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.home
+	display flex
+	justify-content center
+	margin 0 auto
+	max-width 1200px
+
+	> main
+	> div > div
+		> *:not(:last-child)
+			margin-bottom 16px
+
+	> main
+		padding 16px
+		width calc(100% - 275px * 2)
+
+		> .timeline
+			border solid 1px rgba(0, 0, 0, 0.075)
+			border-radius 6px
+
+	> div
+		width 275px
+		margin 0
+
+		&:first-child > div
+			padding 16px 0 16px 16px
+
+			> p
+				display block
+				margin 0
+				padding 0 12px
+				text-align center
+				font-size 0.8em
+				color #aaa
+
+		&:last-child > div
+			padding 16px 16px 16px 0
+
+			> .nav
+				padding 16px
+				font-size 12px
+				color #aaa
+				background #fff
+				border solid 1px rgba(0, 0, 0, 0.075)
+				border-radius 6px
+
+				a
+					color #999
+
+				i
+					color #ccc
+
+</style>
diff --git a/src/client/app/desktop/views/pages/user/user.photos.vue b/src/client/app/desktop/views/pages/user/user.photos.vue
new file mode 100644
index 0000000000..1ff79b4aee
--- /dev/null
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -0,0 +1,88 @@
+<template>
+<div class="photos">
+	<p class="title">%fa:camera%%i18n:desktop.tags.mk-user.photos.title%</p>
+	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.photos.loading%<mk-ellipsis/></p>
+	<div class="stream" v-if="!fetching && images.length > 0">
+		<div v-for="image in images" class="img"
+			:style="`background-image: url(${image.url}?thumbnail&size=256)`"
+		></div>
+	</div>
+	<p class="empty" v-if="!fetching && images.length == 0">%i18n:desktop.tags.mk-user.photos.no-photos%</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['user'],
+	data() {
+		return {
+			images: [],
+			fetching: true
+		};
+	},
+	mounted() {
+		(this as any).api('users/posts', {
+			userId: this.user.id,
+			withMedia: true,
+			limit: 9
+		}).then(posts => {
+			posts.forEach(post => {
+				post.media.forEach(media => {
+					if (this.images.length < 9) this.images.push(media);
+				});
+			});
+			this.fetching = false;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.photos
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	> .title
+		z-index 1
+		margin 0
+		padding 0 16px
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		color #888
+		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+		> i
+			margin-right 4px
+
+	> .stream
+		display -webkit-flex
+		display -moz-flex
+		display -ms-flex
+		display flex
+		justify-content center
+		flex-wrap wrap
+		padding 8px
+
+		> .img
+			flex 1 1 33%
+			width 33%
+			height 80px
+			background-position center center
+			background-size cover
+			background-clip content-box
+			border solid 2px transparent
+
+	> .initializing
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+		> i
+			margin-right 4px
+
+</style>
diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue
new file mode 100644
index 0000000000..f5562d0915
--- /dev/null
+++ b/src/client/app/desktop/views/pages/user/user.profile.vue
@@ -0,0 +1,138 @@
+<template>
+<div class="profile">
+	<div class="friend-form" v-if="os.isSignedIn && os.i.id != user.id">
+		<mk-follow-button :user="user" size="big"/>
+		<p class="followed" v-if="user.isFollowed">%i18n:desktop.tags.mk-user.follows-you%</p>
+		<p v-if="user.isMuted">%i18n:desktop.tags.mk-user.muted% <a @click="unmute">%i18n:desktop.tags.mk-user.unmute%</a></p>
+		<p v-if="!user.isMuted"><a @click="mute">%i18n:desktop.tags.mk-user.mute%</a></p>
+	</div>
+	<div class="description" v-if="user.description">{{ user.description }}</div>
+	<div class="birthday" v-if="user.host === null && user.account.profile.birthday">
+		<p>%fa:birthday-cake%{{ user.account.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)</p>
+	</div>
+	<div class="twitter" v-if="user.host === null && user.account.twitter">
+		<p>%fa:B twitter%<a :href="`https://twitter.com/${user.account.twitter.screenName}`" target="_blank">@{{ user.account.twitter.screenName }}</a></p>
+	</div>
+	<div class="status">
+		<p class="posts-count">%fa:angle-right%<a>{{ user.postsCount }}</a><b>投稿</b></p>
+		<p class="following">%fa:angle-right%<a @click="showFollowing">{{ user.followingCount }}</a>人を<b>フォロー</b></p>
+		<p class="followers">%fa:angle-right%<a @click="showFollowers">{{ user.followersCount }}</a>人の<b>フォロワー</b></p>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as age from 's-age';
+import MkFollowingWindow from '../../components/following-window.vue';
+import MkFollowersWindow from '../../components/followers-window.vue';
+
+export default Vue.extend({
+	props: ['user'],
+	computed: {
+		age(): number {
+			return age(this.user.account.profile.birthday);
+		}
+	},
+	methods: {
+		showFollowing() {
+			(this as any).os.new(MkFollowingWindow, {
+				user: this.user
+			});
+		},
+
+		showFollowers() {
+			(this as any).os.new(MkFollowersWindow, {
+				user: this.user
+			});
+		},
+
+		mute() {
+			(this as any).api('mute/create', {
+				userId: this.user.id
+			}).then(() => {
+				this.user.isMuted = true;
+			}, () => {
+				alert('error');
+			});
+		},
+
+		unmute() {
+			(this as any).api('mute/delete', {
+				userId: this.user.id
+			}).then(() => {
+				this.user.isMuted = false;
+			}, () => {
+				alert('error');
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.profile
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	> *:first-child
+		border-top none !important
+
+	> .friend-form
+		padding 16px
+		border-top solid 1px #eee
+
+		> .mk-big-follow-button
+			width 100%
+
+		> .followed
+			margin 12px 0 0 0
+			padding 0
+			text-align center
+			line-height 24px
+			font-size 0.8em
+			color #71afc7
+			background #eefaff
+			border-radius 4px
+
+	> .description
+		padding 16px
+		color #555
+		border-top solid 1px #eee
+
+	> .birthday
+		padding 16px
+		color #555
+		border-top solid 1px #eee
+
+		> p
+			margin 0
+
+			> i
+				margin-right 8px
+
+	> .twitter
+		padding 16px
+		color #555
+		border-top solid 1px #eee
+
+		> p
+			margin 0
+
+			> i
+				margin-right 8px
+
+	> .status
+		padding 16px
+		color #555
+		border-top solid 1px #eee
+
+		> p
+			margin 8px 0
+
+			> i
+				margin-left 8px
+				margin-right 8px
+
+</style>
diff --git a/src/client/app/desktop/views/pages/user/user.timeline.vue b/src/client/app/desktop/views/pages/user/user.timeline.vue
new file mode 100644
index 0000000000..134ad423ce
--- /dev/null
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@@ -0,0 +1,139 @@
+<template>
+<div class="timeline">
+	<header>
+		<span :data-is-active="mode == 'default'" @click="mode = 'default'">投稿</span>
+		<span :data-is-active="mode == 'with-replies'" @click="mode = 'with-replies'">投稿と返信</span>
+	</header>
+	<div class="loading" v-if="fetching">
+		<mk-ellipsis-icon/>
+	</div>
+	<p class="empty" v-if="empty">%fa:R comments%このユーザーはまだ何も投稿していないようです。</p>
+	<mk-posts ref="timeline" :posts="posts">
+		<div slot="footer">
+			<template v-if="!moreFetching">%fa:moon%</template>
+			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
+		</div>
+	</mk-posts>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['user'],
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			mode: 'default',
+			unreadCount: 0,
+			posts: [],
+			date: null
+		};
+	},
+	watch: {
+		mode() {
+			this.fetch();
+		}
+	},
+	computed: {
+		empty(): boolean {
+			return this.posts.length == 0;
+		}
+	},
+	mounted() {
+		document.addEventListener('keydown', this.onDocumentKeydown);
+		window.addEventListener('scroll', this.onScroll);
+
+		this.fetch(() => this.$emit('loaded'));
+	},
+	beforeDestroy() {
+		document.removeEventListener('keydown', this.onDocumentKeydown);
+		window.removeEventListener('scroll', this.onScroll);
+	},
+	methods: {
+		onDocumentKeydown(e) {
+			if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
+				if (e.which == 84) { // [t]
+					(this.$refs.timeline as any).focus();
+				}
+			}
+		},
+		fetch(cb?) {
+			(this as any).api('users/posts', {
+				userId: this.user.id,
+				untilDate: this.date ? this.date.getTime() : undefined,
+				with_replies: this.mode == 'with-replies'
+			}).then(posts => {
+				this.posts = posts;
+				this.fetching = false;
+				if (cb) cb();
+			});
+		},
+		more() {
+			if (this.moreFetching || this.fetching || this.posts.length == 0) return;
+			this.moreFetching = true;
+			(this as any).api('users/posts', {
+				userId: this.user.id,
+				with_replies: this.mode == 'with-replies',
+				untilId: this.posts[this.posts.length - 1].id
+			}).then(posts => {
+				this.moreFetching = false;
+				this.posts = this.posts.concat(posts);
+			});
+		},
+		onScroll() {
+			const current = window.scrollY + window.innerHeight;
+			if (current > document.body.offsetHeight - 16/*遊び*/) {
+				this.more();
+			}
+		},
+		warp(date) {
+			this.date = date;
+			this.fetch();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.timeline
+	background #fff
+
+	> header
+		padding 8px 16px
+		border-bottom solid 1px #eee
+
+		> span
+			margin-right 16px
+			line-height 27px
+			font-size 18px
+			color #555
+
+			&:not([data-is-active])
+				color $theme-color
+				cursor pointer
+
+				&:hover
+					text-decoration underline
+
+	> .loading
+		padding 64px 0
+
+	> .empty
+		display block
+		margin 0 auto
+		padding 32px
+		max-width 400px
+		text-align center
+		color #999
+
+		> [data-fa]
+			display block
+			margin-bottom 16px
+			font-size 3em
+			color #ccc
+
+</style>
diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
new file mode 100644
index 0000000000..67cef93269
--- /dev/null
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -0,0 +1,53 @@
+<template>
+<mk-ui>
+	<div class="user" v-if="!fetching">
+		<x-header :user="user"/>
+		<x-home v-if="page == 'home'" :user="user"/>
+	</div>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import parseAcct from '../../../../../../common/user/parse-acct';
+import Progress from '../../../../common/scripts/loading';
+import XHeader from './user.header.vue';
+import XHome from './user.home.vue';
+
+export default Vue.extend({
+	components: {
+		XHeader,
+		XHome
+	},
+	props: {
+		page: {
+			default: 'home'
+		}
+	},
+	data() {
+		return {
+			fetching: true,
+			user: null
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	created() {
+		this.fetch();
+	},
+	methods: {
+		fetch() {
+			this.fetching = true;
+			Progress.start();
+			(this as any).api('users/show', parseAcct(this.$route.params.user)).then(user => {
+				this.user = user;
+				this.fetching = false;
+				Progress.done();
+				document.title = user.name + ' | Misskey';
+			});
+		}
+	}
+});
+</script>
+
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
new file mode 100644
index 0000000000..34c28854b1
--- /dev/null
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -0,0 +1,319 @@
+<template>
+<div class="mk-welcome">
+	<main>
+		<div class="top">
+			<div>
+				<div>
+					<h1>Share<br><span ref="share">Everything!</span><span class="cursor">_</span></h1>
+					<p>ようこそ！ <b>Misskey</b>はTwitter風ミニブログSNSです。思ったことや皆と共有したいことを投稿しましょう。タイムラインを見れば、皆の関心事をすぐにチェックすることもできます。<a :href="aboutUrl">詳しく...</a></p>
+					<p><button class="signup" @click="signup">はじめる</button><button class="signin" @click="signin">ログイン</button></p>
+					<div class="users">
+						<router-link v-for="user in users" :key="user.id" class="avatar-anchor" :to="`/@${getAcct(user)}`" v-user-preview="user.id">
+							<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+						</router-link>
+					</div>
+				</div>
+				<div>
+					<div>
+						<header>%fa:comments R% タイムライン<div><span></span><span></span><span></span></div></header>
+						<mk-welcome-timeline/>
+					</div>
+				</div>
+			</div>
+		</div>
+	</main>
+	<mk-forkit/>
+	<footer>
+		<div>
+			<mk-nav :class="$style.nav"/>
+			<p class="c">{{ copyright }}</p>
+		</div>
+	</footer>
+	<modal name="signup" width="500px" height="auto" scrollable>
+		<header :class="$style.signupFormHeader">新規登録</header>
+		<mk-signup :class="$style.signupForm"/>
+	</modal>
+	<modal name="signin" width="500px" height="auto" scrollable>
+		<header :class="$style.signinFormHeader">ログイン</header>
+		<mk-signin :class="$style.signinForm"/>
+	</modal>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { docsUrl, copyright, lang } from '../../../config';
+import getAcct from '../../../../../common/user/get-acct';
+
+const shares = [
+	'Everything!',
+	'Webpages',
+	'Photos',
+	'Interests',
+	'Favorites'
+];
+
+export default Vue.extend({
+	data() {
+		return {
+			aboutUrl: `${docsUrl}/${lang}/about`,
+			copyright,
+			users: [],
+			clock: null,
+			i: 0
+		};
+	},
+	mounted() {
+		(this as any).api('users', {
+			sort: '+follower',
+			limit: 20
+		}).then(users => {
+			this.users = users;
+		});
+
+		this.clock = setInterval(() => {
+			if (++this.i == shares.length) this.i = 0;
+			const speed = 70;
+			const text = (this.$refs.share as any).innerText;
+			for (let i = 0; i < text.length; i++) {
+				setTimeout(() => {
+					if (this.$refs.share) {
+						(this.$refs.share as any).innerText = text.substr(0, text.length - i);
+					}
+				}, i * speed)
+			}
+			setTimeout(() => {
+				const newText = shares[this.i];
+				for (let i = 0; i <= newText.length; i++) {
+					setTimeout(() => {
+						if (this.$refs.share) {
+							(this.$refs.share as any).innerText = newText.substr(0, i);
+						}
+					}, i * speed)
+				}
+			}, text.length * speed);
+		}, 4000);
+	},
+	beforeDestroy() {
+		clearInterval(this.clock);
+	},
+	methods: {
+		getAcct,
+		signup() {
+			this.$modal.show('signup');
+		},
+		signin() {
+			this.$modal.show('signin');
+		}
+	}
+});
+</script>
+
+<style>
+#wait {
+	right: auto;
+	left: 15px;
+}
+</style>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+@import url('https://fonts.googleapis.com/css?family=Sarpanch:700')
+
+.mk-welcome
+	display flex
+	flex-direction column
+	flex 1
+	$width = 1000px
+
+	background-image url('/assets/welcome-bg.svg')
+	background-size cover
+	background-position top center
+
+	&:before
+		content ""
+		display block
+		position fixed
+		bottom 0
+		left 0
+		width 100%
+		height 100%
+		background-image url('/assets/welcome-fg.svg')
+		background-size cover
+		background-position bottom center
+
+	> main
+		display flex
+		flex 1
+
+		> .top
+			display flex
+			width 100%
+
+			> div
+				display flex
+				max-width $width + 64px
+				margin 0 auto
+				padding 80px 32px 0 32px
+
+				> *
+					margin-bottom 48px
+
+				> div:first-child
+					margin-right 48px
+					color #fff
+					text-shadow 0 0 12px #172062
+
+					> h1
+						margin 0
+						font-weight bold
+						//font-variant small-caps
+						letter-spacing 12px
+						font-family 'Sarpanch', sans-serif
+						font-size 42px
+						line-height 48px
+
+						> .cursor
+							animation cursor 1s infinite linear both
+
+							@keyframes cursor
+								0%
+									opacity 1
+								50%
+									opacity 0
+
+					> p
+						margin 1em 0
+						line-height 2em
+
+					button
+						padding 8px 16px
+						font-size inherit
+
+					.signup
+						color $theme-color
+						border solid 2px $theme-color
+						border-radius 4px
+
+						&:focus
+							box-shadow 0 0 0 3px rgba($theme-color, 0.2)
+
+						&:hover
+							color $theme-color-foreground
+							background $theme-color
+
+						&:active
+							color $theme-color-foreground
+							background darken($theme-color, 10%)
+							border-color darken($theme-color, 10%)
+
+					.signin
+						&:hover
+							color #fff
+
+					> .users
+						margin 16px 0 0 0
+
+						> *
+							display inline-block
+							margin 4px
+
+							> *
+								display inline-block
+								width 38px
+								height 38px
+								vertical-align top
+								border-radius 6px
+
+				> div:last-child
+
+					> div
+						width 410px
+						background #fff
+						border-radius 8px
+						box-shadow 0 0 0 12px rgba(0, 0, 0, 0.1)
+						overflow hidden
+
+						> header
+							z-index 1
+							padding 12px 16px
+							color #888d94
+							box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
+
+							> div
+								position absolute
+								top 0
+								right 0
+								padding inherit
+
+								> span
+									display inline-block
+									height 11px
+									width 11px
+									margin-left 6px
+									background #ccc
+									border-radius 100%
+									vertical-align middle
+
+									&:nth-child(1)
+										background #5BCC8B
+
+									&:nth-child(2)
+										background #E6BB46
+
+									&:nth-child(3)
+										background #DF7065
+
+						> .mk-welcome-timeline
+							max-height 350px
+							overflow auto
+
+	> footer
+		font-size 12px
+		color #949ea5
+
+		> div
+			max-width $width
+			margin 0 auto
+			padding 0 0 42px 0
+			text-align center
+
+			> .c
+				margin 16px 0 0 0
+				font-size 10px
+				opacity 0.7
+
+</style>
+
+<style lang="stylus" module>
+.signupForm
+	padding 24px 48px 48px 48px
+
+.signupFormHeader
+	padding 48px 0 12px 0
+	margin: 0 48px
+	font-size 1.5em
+	color #777
+	border-bottom solid 1px #eee
+
+.signinForm
+	padding 24px 48px 48px 48px
+
+.signinFormHeader
+	padding 48px 0 12px 0
+	margin: 0 48px
+	font-size 1.5em
+	color #777
+	border-bottom solid 1px #eee
+
+.nav
+	a
+		color #666
+</style>
+
+<style lang="stylus">
+html
+body
+	background linear-gradient(to bottom, #1e1d65, #bd6659)
+</style>
diff --git a/src/client/app/desktop/views/widgets/activity.vue b/src/client/app/desktop/views/widgets/activity.vue
new file mode 100644
index 0000000000..0bdf4622af
--- /dev/null
+++ b/src/client/app/desktop/views/widgets/activity.vue
@@ -0,0 +1,31 @@
+<template>
+<mk-activity
+	:design="props.design"
+	:init-view="props.view"
+	:user="os.i"
+	@view-changed="viewChanged"/>
+</template>
+
+<script lang="ts">
+import define from '../../../common/define-widget';
+export default define({
+	name: 'activity',
+	props: () => ({
+		design: 0,
+		view: 0
+	})
+}).extend({
+	methods: {
+		func() {
+			if (this.props.design == 2) {
+				this.props.design = 0;
+			} else {
+				this.props.design++;
+			}
+		},
+		viewChanged(view) {
+			this.props.view = view;
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/widgets/channel.channel.form.vue b/src/client/app/desktop/views/widgets/channel.channel.form.vue
new file mode 100644
index 0000000000..aaf327f1ef
--- /dev/null
+++ b/src/client/app/desktop/views/widgets/channel.channel.form.vue
@@ -0,0 +1,67 @@
+<template>
+<div class="form">
+	<input v-model="text" :disabled="wait" @keydown="onKeydown" placeholder="書いて">
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	data() {
+		return {
+			text: '',
+			wait: false
+		};
+	},
+	methods: {
+		onKeydown(e) {
+			if (e.which == 10 || e.which == 13) this.post();
+		},
+		post() {
+			this.wait = true;
+
+			let reply = null;
+
+			if (/^>>([0-9]+) /.test(this.text)) {
+				const index = this.text.match(/^>>([0-9]+) /)[1];
+				reply = (this.$parent as any).posts.find(p => p.index.toString() == index);
+				this.text = this.text.replace(/^>>([0-9]+) /, '');
+			}
+
+			(this as any).api('posts/create', {
+				text: this.text,
+				replyId: reply ? reply.id : undefined,
+				channelId: (this.$parent as any).channel.id
+			}).then(data => {
+				this.text = '';
+			}).catch(err => {
+				alert('失敗した');
+			}).then(() => {
+				this.wait = false;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.form
+	width 100%
+	height 38px
+	padding 4px
+	border-top solid 1px #ddd
+
+	> input
+		padding 0 8px
+		width 100%
+		height 100%
+		font-size 14px
+		color #55595c
+		border solid 1px #dadada
+		border-radius 4px
+
+		&:hover
+		&:focus
+			border-color #aeaeae
+
+</style>
diff --git a/src/client/app/desktop/views/widgets/channel.channel.post.vue b/src/client/app/desktop/views/widgets/channel.channel.post.vue
new file mode 100644
index 0000000000..433f9a00aa
--- /dev/null
+++ b/src/client/app/desktop/views/widgets/channel.channel.post.vue
@@ -0,0 +1,71 @@
+<template>
+<div class="post">
+	<header>
+		<a class="index" @click="reply">{{ post.index }}:</a>
+		<router-link class="name" :to="`/@${acct}`" v-user-preview="post.user.id"><b>{{ post.user.name }}</b></router-link>
+		<span>ID:<i>{{ acct }}</i></span>
+	</header>
+	<div>
+		<a v-if="post.reply">&gt;&gt;{{ post.reply.index }}</a>
+		{{ post.text }}
+		<div class="media" v-if="post.media">
+			<a v-for="file in post.media" :href="file.url" target="_blank">
+				<img :src="`${file.url}?thumbnail&size=512`" :alt="file.name" :title="file.name"/>
+			</a>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
+
+export default Vue.extend({
+	props: ['post'],
+	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		}
+	},
+	methods: {
+		reply() {
+			this.$emit('reply', this.post);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.post
+	margin 0
+	padding 0
+	color #444
+
+	> header
+		position -webkit-sticky
+		position sticky
+		z-index 1
+		top 0
+		padding 8px 4px 4px 16px
+		background rgba(255, 255, 255, 0.9)
+
+		> .index
+			margin-right 0.25em
+
+		> .name
+			margin-right 0.5em
+			color #008000
+
+	> div
+		padding 0 16px 16px 16px
+
+		> .media
+			> a
+				display inline-block
+
+				> img
+					max-width 100%
+					vertical-align bottom
+
+</style>
diff --git a/src/client/app/desktop/views/widgets/channel.channel.vue b/src/client/app/desktop/views/widgets/channel.channel.vue
new file mode 100644
index 0000000000..e9fb9e3fd7
--- /dev/null
+++ b/src/client/app/desktop/views/widgets/channel.channel.vue
@@ -0,0 +1,106 @@
+<template>
+<div class="channel">
+	<p v-if="fetching">読み込み中<mk-ellipsis/></p>
+	<div v-if="!fetching" ref="posts" class="posts">
+		<p v-if="posts.length == 0">まだ投稿がありません</p>
+		<x-post class="post" v-for="post in posts.slice().reverse()" :post="post" :key="post.id" @reply="reply"/>
+	</div>
+	<x-form class="form" ref="form"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import ChannelStream from '../../../common/scripts/streaming/channel';
+import XForm from './channel.channel.form.vue';
+import XPost from './channel.channel.post.vue';
+
+export default Vue.extend({
+	components: {
+		XForm,
+		XPost
+	},
+	props: ['channel'],
+	data() {
+		return {
+			fetching: true,
+			posts: [],
+			connection: null
+		};
+	},
+	watch: {
+		channel() {
+			this.zap();
+		}
+	},
+	mounted() {
+		this.zap();
+	},
+	beforeDestroy() {
+		this.disconnect();
+	},
+	methods: {
+		zap() {
+			this.fetching = true;
+
+			(this as any).api('channels/posts', {
+				channelId: this.channel.id
+			}).then(posts => {
+				this.posts = posts;
+				this.fetching = false;
+
+				this.$nextTick(() => {
+					this.scrollToBottom();
+				});
+
+				this.disconnect();
+				this.connection = new ChannelStream((this as any).os, this.channel.id);
+				this.connection.on('post', this.onPost);
+			});
+		},
+		disconnect() {
+			if (this.connection) {
+				this.connection.off('post', this.onPost);
+				this.connection.close();
+			}
+		},
+		onPost(post) {
+			this.posts.unshift(post);
+			this.scrollToBottom();
+		},
+		scrollToBottom() {
+			(this.$refs.posts as any).scrollTop = (this.$refs.posts as any).scrollHeight;
+		},
+		reply(post) {
+			(this.$refs.form as any).text = `>>${ post.index } `;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.channel
+
+	> p
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+	> .posts
+		height calc(100% - 38px)
+		overflow auto
+		font-size 0.9em
+
+		> .post
+			border-bottom solid 1px #eee
+
+			&:last-child
+				border-bottom none
+
+	> .form
+		position absolute
+		left 0
+		bottom 0
+
+</style>
diff --git a/src/client/app/desktop/views/widgets/channel.vue b/src/client/app/desktop/views/widgets/channel.vue
new file mode 100644
index 0000000000..c9b62dfeab
--- /dev/null
+++ b/src/client/app/desktop/views/widgets/channel.vue
@@ -0,0 +1,107 @@
+<template>
+<div class="mkw-channel">
+	<template v-if="!props.compact">
+		<p class="title">%fa:tv%{{ channel ? channel.title : '%i18n:desktop.tags.mk-channel-home-widget.title%' }}</p>
+		<button @click="settings" title="%i18n:desktop.tags.mk-channel-home-widget.settings%">%fa:cog%</button>
+	</template>
+	<p class="get-started" v-if="props.channel == null">%i18n:desktop.tags.mk-channel-home-widget.get-started%</p>
+	<x-channel class="channel" :channel="channel" v-if="channel != null"/>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../common/define-widget';
+import XChannel from './channel.channel.vue';
+
+export default define({
+	name: 'server',
+	props: () => ({
+		channel: null,
+		compact: false
+	})
+}).extend({
+	components: {
+		XChannel
+	},
+	data() {
+		return {
+			fetching: true,
+			channel: null
+		};
+	},
+	mounted() {
+		if (this.props.channel) {
+				this.zap();
+			}
+	},
+	methods: {
+		func() {
+			this.props.compact = !this.props.compact;
+		},
+		settings() {
+			const id = window.prompt('チャンネルID');
+			if (!id) return;
+			this.props.channel = id;
+			this.zap();
+		},
+		zap() {
+			this.fetching = true;
+
+			(this as any).api('channels/show', {
+				channelId: this.props.channel
+			}).then(channel => {
+				this.channel = channel;
+				this.fetching = false;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mkw-channel
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+	overflow hidden
+
+	> .title
+		z-index 2
+		margin 0
+		padding 0 16px
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		color #888
+		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+		> [data-fa]
+			margin-right 4px
+
+	> button
+		position absolute
+		z-index 2
+		top 0
+		right 0
+		padding 0
+		width 42px
+		font-size 0.9em
+		line-height 42px
+		color #ccc
+
+		&:hover
+			color #aaa
+
+		&:active
+			color #999
+
+	> .get-started
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+	> .channel
+		height 200px
+
+</style>
diff --git a/src/client/app/desktop/views/widgets/index.ts b/src/client/app/desktop/views/widgets/index.ts
new file mode 100644
index 0000000000..77d771d6b3
--- /dev/null
+++ b/src/client/app/desktop/views/widgets/index.ts
@@ -0,0 +1,23 @@
+import Vue from 'vue';
+
+import wNotifications from './notifications.vue';
+import wTimemachine from './timemachine.vue';
+import wActivity from './activity.vue';
+import wTrends from './trends.vue';
+import wUsers from './users.vue';
+import wPolls from './polls.vue';
+import wPostForm from './post-form.vue';
+import wMessaging from './messaging.vue';
+import wChannel from './channel.vue';
+import wProfile from './profile.vue';
+
+Vue.component('mkw-notifications', wNotifications);
+Vue.component('mkw-timemachine', wTimemachine);
+Vue.component('mkw-activity', wActivity);
+Vue.component('mkw-trends', wTrends);
+Vue.component('mkw-users', wUsers);
+Vue.component('mkw-polls', wPolls);
+Vue.component('mkw-post-form', wPostForm);
+Vue.component('mkw-messaging', wMessaging);
+Vue.component('mkw-channel', wChannel);
+Vue.component('mkw-profile', wProfile);
diff --git a/src/client/app/desktop/views/widgets/messaging.vue b/src/client/app/desktop/views/widgets/messaging.vue
new file mode 100644
index 0000000000..2c9f473bd1
--- /dev/null
+++ b/src/client/app/desktop/views/widgets/messaging.vue
@@ -0,0 +1,59 @@
+<template>
+<div class="mkw-messaging">
+	<p class="title" v-if="props.design == 0">%fa:comments%%i18n:desktop.tags.mk-messaging-home-widget.title%</p>
+	<mk-messaging ref="index" compact @navigate="navigate"/>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../common/define-widget';
+import MkMessagingRoomWindow from '../components/messaging-room-window.vue';
+
+export default define({
+	name: 'messaging',
+	props: () => ({
+		design: 0
+	})
+}).extend({
+	methods: {
+		navigate(user) {
+			(this as any).os.new(MkMessagingRoomWindow, {
+				user: user
+			});
+		},
+		func() {
+			if (this.props.design == 1) {
+				this.props.design = 0;
+			} else {
+				this.props.design++;
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mkw-messaging
+	overflow hidden
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	> .title
+		z-index 2
+		margin 0
+		padding 0 16px
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		color #888
+		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+		> [data-fa]
+			margin-right 4px
+
+	> .mk-messaging
+		max-height 250px
+		overflow auto
+
+</style>
diff --git a/src/client/app/desktop/views/widgets/notifications.vue b/src/client/app/desktop/views/widgets/notifications.vue
new file mode 100644
index 0000000000..1a2b3d3f89
--- /dev/null
+++ b/src/client/app/desktop/views/widgets/notifications.vue
@@ -0,0 +1,70 @@
+<template>
+<div class="mkw-notifications">
+	<template v-if="!props.compact">
+		<p class="title">%fa:R bell%%i18n:desktop.tags.mk-notifications-home-widget.title%</p>
+		<button @click="settings" title="%i18n:desktop.tags.mk-notifications-home-widget.settings%">%fa:cog%</button>
+	</template>
+	<mk-notifications/>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../common/define-widget';
+export default define({
+	name: 'notifications',
+	props: () => ({
+		compact: false
+	})
+}).extend({
+	methods: {
+		settings() {
+			alert('not implemented yet');
+		},
+		func() {
+			this.props.compact = !this.props.compact;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mkw-notifications
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	> .title
+		z-index 1
+		margin 0
+		padding 0 16px
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		color #888
+		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+		> [data-fa]
+			margin-right 4px
+
+	> button
+		position absolute
+		z-index 2
+		top 0
+		right 0
+		padding 0
+		width 42px
+		font-size 0.9em
+		line-height 42px
+		color #ccc
+
+		&:hover
+			color #aaa
+
+		&:active
+			color #999
+
+	> .mk-notifications
+		max-height 300px
+		overflow auto
+
+</style>
diff --git a/src/client/app/desktop/views/widgets/polls.vue b/src/client/app/desktop/views/widgets/polls.vue
new file mode 100644
index 0000000000..e5db34fc7a
--- /dev/null
+++ b/src/client/app/desktop/views/widgets/polls.vue
@@ -0,0 +1,129 @@
+<template>
+<div class="mkw-polls">
+	<template v-if="!props.compact">
+		<p class="title">%fa:chart-pie%%i18n:desktop.tags.mk-recommended-polls-home-widget.title%</p>
+		<button @click="fetch" title="%i18n:desktop.tags.mk-recommended-polls-home-widget.refresh%">%fa:sync%</button>
+	</template>
+	<div class="poll" v-if="!fetching && poll != null">
+		<p v-if="poll.text"><router-link to="`/@${ acct }/${ poll.id }`">{{ poll.text }}</router-link></p>
+		<p v-if="!poll.text"><router-link to="`/@${ acct }/${ poll.id }`">%fa:link%</router-link></p>
+		<mk-poll :post="poll"/>
+	</div>
+	<p class="empty" v-if="!fetching && poll == null">%i18n:desktop.tags.mk-recommended-polls-home-widget.nothing%</p>
+	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../common/define-widget';
+import getAcct from '../../../../../common/user/get-acct';
+
+export default define({
+	name: 'polls',
+	props: () => ({
+		compact: false
+	})
+}).extend({
+	computed: {
+		acct() {
+			return getAcct(this.poll.user);
+		},
+	},
+	data() {
+		return {
+			poll: null,
+			fetching: true,
+			offset: 0
+		};
+	},
+	mounted() {
+		this.fetch();
+	},
+	methods: {
+		func() {
+			this.props.compact = !this.props.compact;
+		},
+		fetch() {
+			this.fetching = true;
+			this.poll = null;
+
+			(this as any).api('posts/polls/recommendation', {
+				limit: 1,
+				offset: this.offset
+			}).then(posts => {
+				const poll = posts ? posts[0] : null;
+				if (poll == null) {
+					this.offset = 0;
+				} else {
+					this.offset++;
+				}
+				this.poll = poll;
+				this.fetching = false;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mkw-polls
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	> .title
+		margin 0
+		padding 0 16px
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		color #888
+		border-bottom solid 1px #eee
+
+		> [data-fa]
+			margin-right 4px
+
+	> button
+		position absolute
+		z-index 2
+		top 0
+		right 0
+		padding 0
+		width 42px
+		font-size 0.9em
+		line-height 42px
+		color #ccc
+
+		&:hover
+			color #aaa
+
+		&:active
+			color #999
+
+	> .poll
+		padding 16px
+		font-size 12px
+		color #555
+
+		> p
+			margin 0 0 8px 0
+
+			> a
+				color inherit
+
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+	> .fetching
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+		> [data-fa]
+			margin-right 4px
+
+</style>
diff --git a/src/client/app/desktop/views/widgets/post-form.vue b/src/client/app/desktop/views/widgets/post-form.vue
new file mode 100644
index 0000000000..cf7fd1f2b2
--- /dev/null
+++ b/src/client/app/desktop/views/widgets/post-form.vue
@@ -0,0 +1,111 @@
+<template>
+<div class="mkw-post-form">
+	<template v-if="props.design == 0">
+		<p class="title">%fa:pencil-alt%%i18n:desktop.tags.mk-post-form-home-widget.title%</p>
+	</template>
+	<textarea :disabled="posting" v-model="text" @keydown="onKeydown" placeholder="%i18n:desktop.tags.mk-post-form-home-widget.placeholder%"></textarea>
+	<button @click="post" :disabled="posting">%i18n:desktop.tags.mk-post-form-home-widget.post%</button>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../common/define-widget';
+export default define({
+	name: 'post-form',
+	props: () => ({
+		design: 0
+	})
+}).extend({
+	data() {
+		return {
+			posting: false,
+			text: ''
+		};
+	},
+	methods: {
+		func() {
+			if (this.props.design == 1) {
+				this.props.design = 0;
+			} else {
+				this.props.design++;
+			}
+		},
+		onKeydown(e) {
+			if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey)) this.post();
+		},
+		post() {
+			this.posting = true;
+
+			(this as any).api('posts/create', {
+				text: this.text
+			}).then(data => {
+				this.clear();
+			}).catch(err => {
+				alert('失敗した');
+			}).then(() => {
+				this.posting = false;
+			});
+		},
+		clear() {
+			this.text = '';
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mkw-post-form
+	background #fff
+	overflow hidden
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	> .title
+		z-index 1
+		margin 0
+		padding 0 16px
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		color #888
+		box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+		> [data-fa]
+			margin-right 4px
+
+	> textarea
+		display block
+		width 100%
+		max-width 100%
+		min-width 100%
+		padding 16px
+		margin-bottom 28px + 16px
+		border none
+		border-bottom solid 1px #eee
+
+	> button
+		display block
+		position absolute
+		bottom 8px
+		right 8px
+		margin 0
+		padding 0 10px
+		height 28px
+		color $theme-color-foreground
+		background $theme-color !important
+		outline none
+		border none
+		border-radius 4px
+		transition background 0.1s ease
+		cursor pointer
+
+		&:hover
+			background lighten($theme-color, 10%) !important
+
+		&:active
+			background darken($theme-color, 10%) !important
+			transition background 0s ease
+
+</style>
diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue
new file mode 100644
index 0000000000..83cd67b50c
--- /dev/null
+++ b/src/client/app/desktop/views/widgets/profile.vue
@@ -0,0 +1,125 @@
+<template>
+<div class="mkw-profile"
+	:data-compact="props.design == 1 || props.design == 2"
+	:data-melt="props.design == 2"
+>
+	<div class="banner"
+		:style="os.i.bannerUrl ? `background-image: url(${os.i.bannerUrl}?thumbnail&size=256)` : ''"
+		title="クリックでバナー編集"
+		@click="os.apis.updateBanner"
+	></div>
+	<img class="avatar"
+		:src="`${os.i.avatarUrl}?thumbnail&size=96`"
+		@click="os.apis.updateAvatar"
+		alt="avatar"
+		title="クリックでアバター編集"
+		v-user-preview="os.i.id"
+	/>
+	<router-link class="name" :to="`/@${os.i.username}`">{{ os.i.name }}</router-link>
+	<p class="username">@{{ os.i.username }}</p>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../common/define-widget';
+export default define({
+	name: 'profile',
+	props: () => ({
+		design: 0
+	})
+}).extend({
+	methods: {
+		func() {
+			if (this.props.design == 2) {
+				this.props.design = 0;
+			} else {
+				this.props.design++;
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mkw-profile
+	overflow hidden
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	&[data-compact]
+		> .banner:before
+			content ""
+			display block
+			width 100%
+			height 100%
+			background rgba(0, 0, 0, 0.5)
+
+		> .avatar
+			top ((100px - 58px) / 2)
+			left ((100px - 58px) / 2)
+			border none
+			border-radius 100%
+			box-shadow 0 0 16px rgba(0, 0, 0, 0.5)
+
+		> .name
+			position absolute
+			top 0
+			left 92px
+			margin 0
+			line-height 100px
+			color #fff
+			text-shadow 0 0 8px rgba(0, 0, 0, 0.5)
+
+		> .username
+			display none
+
+	&[data-melt]
+		background transparent !important
+		border none !important
+
+		> .banner
+			visibility hidden
+
+		> .avatar
+			box-shadow none
+
+		> .name
+			color #666
+			text-shadow none
+
+	> .banner
+		height 100px
+		background-color #f5f5f5
+		background-size cover
+		background-position center
+		cursor pointer
+
+	> .avatar
+		display block
+		position absolute
+		top 76px
+		left 16px
+		width 58px
+		height 58px
+		margin 0
+		border solid 3px #fff
+		border-radius 8px
+		vertical-align bottom
+		cursor pointer
+
+	> .name
+		display block
+		margin 10px 0 0 84px
+		line-height 16px
+		font-weight bold
+		color #555
+
+	> .username
+		display block
+		margin 4px 0 8px 84px
+		line-height 16px
+		font-size 0.9em
+		color #999
+
+</style>
diff --git a/src/client/app/desktop/views/widgets/timemachine.vue b/src/client/app/desktop/views/widgets/timemachine.vue
new file mode 100644
index 0000000000..6db3b14c62
--- /dev/null
+++ b/src/client/app/desktop/views/widgets/timemachine.vue
@@ -0,0 +1,28 @@
+<template>
+<div class="mkw-timemachine">
+	<mk-calendar :design="props.design" @chosen="chosen"/>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../common/define-widget';
+export default define({
+	name: 'timemachine',
+	props: () => ({
+		design: 0
+	})
+}).extend({
+	methods: {
+		chosen(date) {
+			this.$emit('chosen', date);
+		},
+		func() {
+			if (this.props.design == 5) {
+				this.props.design = 0;
+			} else {
+				this.props.design++;
+			}
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/widgets/trends.vue b/src/client/app/desktop/views/widgets/trends.vue
new file mode 100644
index 0000000000..77779787ee
--- /dev/null
+++ b/src/client/app/desktop/views/widgets/trends.vue
@@ -0,0 +1,135 @@
+<template>
+<div class="mkw-trends">
+	<template v-if="!props.compact">
+		<p class="title">%fa:fire%%i18n:desktop.tags.mk-trends-home-widget.title%</p>
+		<button @click="fetch" title="%i18n:desktop.tags.mk-trends-home-widget.refresh%">%fa:sync%</button>
+	</template>
+	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+	<div class="post" v-else-if="post != null">
+		<p class="text"><router-link :to="`/@${ acct }/${ post.id }`">{{ post.text }}</router-link></p>
+		<p class="author">―<router-link :to="`/@${ acct }`">@{{ acct }}</router-link></p>
+	</div>
+	<p class="empty" v-else>%i18n:desktop.tags.mk-trends-home-widget.nothing%</p>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../common/define-widget';
+import getAcct from '../../../../../common/user/get-acct';
+
+export default define({
+	name: 'trends',
+	props: () => ({
+		compact: false
+	})
+}).extend({
+	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		},
+	},
+	data() {
+		return {
+			post: null,
+			fetching: true,
+			offset: 0
+		};
+	},
+	mounted() {
+		this.fetch();
+	},
+	methods: {
+		func() {
+			this.props.compact = !this.props.compact;
+		},
+		fetch() {
+			this.fetching = true;
+			this.post = null;
+
+			(this as any).api('posts/trend', {
+				limit: 1,
+				offset: this.offset,
+				repost: false,
+				reply: false,
+				media: false,
+				poll: false
+			}).then(posts => {
+				const post = posts ? posts[0] : null;
+				if (post == null) {
+					this.offset = 0;
+				} else {
+					this.offset++;
+				}
+				this.post = post;
+				this.fetching = false;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mkw-trends
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	> .title
+		margin 0
+		padding 0 16px
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		color #888
+		border-bottom solid 1px #eee
+
+		> [data-fa]
+			margin-right 4px
+
+	> button
+		position absolute
+		z-index 2
+		top 0
+		right 0
+		padding 0
+		width 42px
+		font-size 0.9em
+		line-height 42px
+		color #ccc
+
+		&:hover
+			color #aaa
+
+		&:active
+			color #999
+
+	> .post
+		padding 16px
+		font-size 12px
+		font-style oblique
+		color #555
+
+		> p
+			margin 0
+
+		> .text,
+		> .author
+			> a
+				color inherit
+
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+	> .fetching
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+		> [data-fa]
+			margin-right 4px
+
+</style>
diff --git a/src/client/app/desktop/views/widgets/users.vue b/src/client/app/desktop/views/widgets/users.vue
new file mode 100644
index 0000000000..7b89441126
--- /dev/null
+++ b/src/client/app/desktop/views/widgets/users.vue
@@ -0,0 +1,172 @@
+<template>
+<div class="mkw-users">
+	<template v-if="!props.compact">
+		<p class="title">%fa:users%%i18n:desktop.tags.mk-user-recommendation-home-widget.title%</p>
+		<button @click="refresh" title="%i18n:desktop.tags.mk-user-recommendation-home-widget.refresh%">%fa:sync%</button>
+	</template>
+	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+	<template v-else-if="users.length != 0">
+		<div class="user" v-for="_user in users">
+			<router-link class="avatar-anchor" :to="`/@${getAcct(_user)}`">
+				<img class="avatar" :src="`${_user.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="_user.id"/>
+			</router-link>
+			<div class="body">
+				<router-link class="name" :to="`/@${getAcct(_user)}`" v-user-preview="_user.id">{{ _user.name }}</router-link>
+				<p class="username">@{{ getAcct(_user) }}</p>
+			</div>
+			<mk-follow-button :user="_user"/>
+		</div>
+	</template>
+	<p class="empty" v-else>%i18n:desktop.tags.mk-user-recommendation-home-widget.no-one%</p>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../common/define-widget';
+import getAcct from '../../../../../common/user/get-acct';
+
+const limit = 3;
+
+export default define({
+	name: 'users',
+	props: () => ({
+		compact: false
+	})
+}).extend({
+	data() {
+		return {
+			users: [],
+			fetching: true,
+			page: 0
+		};
+	},
+	mounted() {
+		this.fetch();
+	},
+	methods: {
+		getAcct,
+		func() {
+			this.props.compact = !this.props.compact;
+		},
+		fetch() {
+			this.fetching = true;
+			this.users = [];
+
+			(this as any).api('users/recommendation', {
+				limit: limit,
+				offset: limit * this.page
+			}).then(users => {
+				this.users = users;
+				this.fetching = false;
+			});
+		},
+		refresh() {
+			if (this.users.length < limit) {
+				this.page = 0;
+			} else {
+				this.page++;
+			}
+			this.fetch();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mkw-users
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.075)
+	border-radius 6px
+
+	> .title
+		margin 0
+		padding 0 16px
+		line-height 42px
+		font-size 0.9em
+		font-weight bold
+		color #888
+		border-bottom solid 1px #eee
+
+		> [data-fa]
+			margin-right 4px
+
+	> button
+		position absolute
+		z-index 2
+		top 0
+		right 0
+		padding 0
+		width 42px
+		font-size 0.9em
+		line-height 42px
+		color #ccc
+
+		&:hover
+			color #aaa
+
+		&:active
+			color #999
+
+	> .user
+		padding 16px
+		border-bottom solid 1px #eee
+
+		&:last-child
+			border-bottom none
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		> .avatar-anchor
+			display block
+			float left
+			margin 0 12px 0 0
+
+			> .avatar
+				display block
+				width 42px
+				height 42px
+				margin 0
+				border-radius 8px
+				vertical-align bottom
+
+		> .body
+			float left
+			width calc(100% - 54px)
+
+			> .name
+				margin 0
+				font-size 16px
+				line-height 24px
+				color #555
+
+			> .username
+				display block
+				margin 0
+				font-size 15px
+				line-height 16px
+				color #ccc
+
+		> .mk-follow-button
+			position absolute
+			top 16px
+			right 16px
+
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+	> .fetching
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+		> [data-fa]
+			margin-right 4px
+
+</style>
-- 
cgit v1.3.1-freya


From 1af9efe54ea2fb5b9f8a2ead1b089ca1670f53f6 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 30 Mar 2018 18:48:51 +0900
Subject: 返信先プレビューなどではURLプレビューを表示しないように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/desktop/views/components/sub-post-content.vue      | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/desktop/views/components/sub-post-content.vue b/src/client/app/desktop/views/components/sub-post-content.vue
index f13822331b..a79e5e0a4e 100644
--- a/src/client/app/desktop/views/components/sub-post-content.vue
+++ b/src/client/app/desktop/views/components/sub-post-content.vue
@@ -4,7 +4,6 @@
 		<a class="reply" v-if="post.replyId">%fa:reply%</a>
 		<mk-post-html :ast="post.ast" :i="os.i"/>
 		<a class="rp" v-if="post.repostId" :href="`/post:${post.repostId}`">RP: ...</a>
-		<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 	</div>
 	<details v-if="post.media">
 		<summary>({{ post.media.length }}つのメディア)</summary>
@@ -21,18 +20,7 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-	props: ['post'],
-	computed: {
-		urls(): string[] {
-			if (this.post.ast) {
-				return this.post.ast
-					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-					.map(t => t.url);
-			} else {
-				return null;
-			}
-		}
-	}
+	props: ['post']
 });
 </script>
 
-- 
cgit v1.3.1-freya


From 8c4143290735b39bc68bf98439b2735af1910518 Mon Sep 17 00:00:00 2001
From: Akihiko Odaki <nekomanma@pixiv.co.jp>
Date: Sat, 31 Mar 2018 19:45:56 +0900
Subject: Set empty array instead of null to mediaIds property of posts

---
 src/client/app/desktop/views/components/post-detail.sub.vue  | 2 +-
 src/client/app/desktop/views/components/post-detail.vue      | 2 +-
 src/client/app/desktop/views/components/posts.post.vue       | 2 +-
 src/client/app/desktop/views/components/sub-post-content.vue | 2 +-
 src/client/app/mobile/views/components/post-detail.vue       | 2 +-
 src/client/app/mobile/views/components/post.vue              | 2 +-
 src/client/app/mobile/views/components/sub-post-content.vue  | 2 +-
 src/client/docs/api/entities/post.yaml                       | 4 ++--
 src/server/api/endpoints/posts/create.ts                     | 2 +-
 tools/migration/nighthike/6.js                               | 1 +
 10 files changed, 11 insertions(+), 10 deletions(-)
 create mode 100644 tools/migration/nighthike/6.js

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/desktop/views/components/post-detail.sub.vue b/src/client/app/desktop/views/components/post-detail.sub.vue
index 35377e7c24..285b5dedee 100644
--- a/src/client/app/desktop/views/components/post-detail.sub.vue
+++ b/src/client/app/desktop/views/components/post-detail.sub.vue
@@ -17,7 +17,7 @@
 		</header>
 		<div class="body">
 			<mk-post-html v-if="post.ast" :ast="post.ast" :i="os.i" :class="$style.text"/>
-			<div class="media" v-if="post.media">
+			<div class="media" v-if="post.media > 0">
 				<mk-media-list :media-list="post.media"/>
 			</div>
 		</div>
diff --git a/src/client/app/desktop/views/components/post-detail.vue b/src/client/app/desktop/views/components/post-detail.vue
index 5c7a7dfdbe..1811e22bad 100644
--- a/src/client/app/desktop/views/components/post-detail.vue
+++ b/src/client/app/desktop/views/components/post-detail.vue
@@ -39,7 +39,7 @@
 		</header>
 		<div class="body">
 			<mk-post-html :class="$style.text" v-if="p.ast" :ast="p.ast" :i="os.i"/>
-			<div class="media" v-if="p.media">
+			<div class="media" v-if="p.media.length > 0">
 				<mk-media-list :media-list="p.media"/>
 			</div>
 			<mk-poll v-if="p.poll" :post="p"/>
diff --git a/src/client/app/desktop/views/components/posts.post.vue b/src/client/app/desktop/views/components/posts.post.vue
index 37c6e63043..aa1f1db41c 100644
--- a/src/client/app/desktop/views/components/posts.post.vue
+++ b/src/client/app/desktop/views/components/posts.post.vue
@@ -41,7 +41,7 @@
 					<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i" :class="$style.text"/>
 					<a class="rp" v-if="p.repost">RP:</a>
 				</div>
-				<div class="media" v-if="p.media">
+				<div class="media" v-if="p.media.length > 0">
 					<mk-media-list :media-list="p.media"/>
 				</div>
 				<mk-poll v-if="p.poll" :post="p" ref="pollViewer"/>
diff --git a/src/client/app/desktop/views/components/sub-post-content.vue b/src/client/app/desktop/views/components/sub-post-content.vue
index a79e5e0a4e..1f5ce38984 100644
--- a/src/client/app/desktop/views/components/sub-post-content.vue
+++ b/src/client/app/desktop/views/components/sub-post-content.vue
@@ -5,7 +5,7 @@
 		<mk-post-html :ast="post.ast" :i="os.i"/>
 		<a class="rp" v-if="post.repostId" :href="`/post:${post.repostId}`">RP: ...</a>
 	</div>
-	<details v-if="post.media">
+	<details v-if="post.media.length > 0">
 		<summary>({{ post.media.length }}つのメディア)</summary>
 		<mk-media-list :media-list="post.media"/>
 	</details>
diff --git a/src/client/app/mobile/views/components/post-detail.vue b/src/client/app/mobile/views/components/post-detail.vue
index f0af1a61aa..6411011b89 100644
--- a/src/client/app/mobile/views/components/post-detail.vue
+++ b/src/client/app/mobile/views/components/post-detail.vue
@@ -42,7 +42,7 @@
 			<div class="tags" v-if="p.tags && p.tags.length > 0">
 				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
 			</div>
-			<div class="media" v-if="p.media">
+			<div class="media" v-if="p.media.length > 0">
 				<mk-media-list :media-list="p.media"/>
 			</div>
 			<mk-poll v-if="p.poll" :post="p"/>
diff --git a/src/client/app/mobile/views/components/post.vue b/src/client/app/mobile/views/components/post.vue
index a01eb7669e..52fb095372 100644
--- a/src/client/app/mobile/views/components/post.vue
+++ b/src/client/app/mobile/views/components/post.vue
@@ -40,7 +40,7 @@
 					<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i" :class="$style.text"/>
 					<a class="rp" v-if="p.repost != null">RP:</a>
 				</div>
-				<div class="media" v-if="p.media">
+				<div class="media" v-if="p.media.length > 0">
 					<mk-media-list :media-list="p.media"/>
 				</div>
 				<mk-poll v-if="p.poll" :post="p" ref="pollViewer"/>
diff --git a/src/client/app/mobile/views/components/sub-post-content.vue b/src/client/app/mobile/views/components/sub-post-content.vue
index b95883de77..5ff88089aa 100644
--- a/src/client/app/mobile/views/components/sub-post-content.vue
+++ b/src/client/app/mobile/views/components/sub-post-content.vue
@@ -5,7 +5,7 @@
 		<mk-post-html v-if="post.ast" :ast="post.ast" :i="os.i"/>
 		<a class="rp" v-if="post.repostId">RP: ...</a>
 	</div>
-	<details v-if="post.media">
+	<details v-if="post.media.length > 0">
 		<summary>({{ post.media.length }}個のメディア)</summary>
 		<mk-media-list :media-list="post.media"/>
 	</details>
diff --git a/src/client/docs/api/entities/post.yaml b/src/client/docs/api/entities/post.yaml
index 74d7973e38..da79866ba1 100644
--- a/src/client/docs/api/entities/post.yaml
+++ b/src/client/docs/api/entities/post.yaml
@@ -33,8 +33,8 @@ props:
     type: "id(DriveFile)[]"
     optional: true
     desc:
-      ja: "添付されているメディアのID"
-      en: "The IDs of the attached media"
+      ja: "添付されているメディアのID (なければレスポンスでは空配列)"
+      en: "The IDs of the attached media (empty array for response if no media is attached)"
   - name: "media"
     type: "entity(DriveFile)[]"
     optional: true
diff --git a/src/server/api/endpoints/posts/create.ts b/src/server/api/endpoints/posts/create.ts
index 170b667191..aa7e93c28f 100644
--- a/src/server/api/endpoints/posts/create.ts
+++ b/src/server/api/endpoints/posts/create.ts
@@ -254,7 +254,7 @@ module.exports = (params, user: IUser, app) => new Promise(async (res, rej) => {
 		createdAt: new Date(),
 		channelId: channel ? channel._id : undefined,
 		index: channel ? channel.index + 1 : undefined,
-		mediaIds: files ? files.map(file => file._id) : undefined,
+		mediaIds: files ? files.map(file => file._id) : [],
 		replyId: reply ? reply._id : undefined,
 		repostId: repost ? repost._id : undefined,
 		poll: poll,
diff --git a/tools/migration/nighthike/6.js b/tools/migration/nighthike/6.js
new file mode 100644
index 0000000000..ff78df4e09
--- /dev/null
+++ b/tools/migration/nighthike/6.js
@@ -0,0 +1 @@
+db.posts.update({ mediaIds: null }, { $set: { mediaIds: [] } }, false, true);
-- 
cgit v1.3.1-freya


From 7da60a0147116130a94274e4a20ae54dd7d59dea Mon Sep 17 00:00:00 2001
From: Akihiko Odaki <nekomanma@pixiv.co.jp>
Date: Sat, 31 Mar 2018 19:53:30 +0900
Subject: Store texts as HTML

---
 src/client/app/common/views/components/index.ts    |   2 +-
 .../views/components/messaging-room.message.vue    |  33 +-
 .../app/common/views/components/post-html.ts       | 141 ---------
 .../app/common/views/components/post-html.vue      | 103 +++++++
 src/client/app/common/views/components/url.vue     |  66 ----
 .../common/views/components/welcome-timeline.vue   |   2 +-
 .../desktop/views/components/post-detail.sub.vue   |   2 +-
 .../app/desktop/views/components/post-detail.vue   |  27 +-
 .../app/desktop/views/components/posts.post.vue    |  31 +-
 .../desktop/views/components/sub-post-content.vue  |   2 +-
 .../app/mobile/views/components/post-detail.vue    |  27 +-
 src/client/app/mobile/views/components/post.vue    |  31 +-
 .../mobile/views/components/sub-post-content.vue   |   2 +-
 src/client/docs/api/entities/post.yaml             |  10 +-
 src/common/text/core/syntax-highlighter.ts         | 334 ---------------------
 src/common/text/elements/bold.ts                   |  14 -
 src/common/text/elements/code.ts                   |  17 --
 src/common/text/elements/emoji.ts                  |  14 -
 src/common/text/elements/hashtag.ts                |  19 --
 src/common/text/elements/inline-code.ts            |  17 --
 src/common/text/elements/link.ts                   |  19 --
 src/common/text/elements/mention.ts                |  17 --
 src/common/text/elements/quote.ts                  |  14 -
 src/common/text/elements/url.ts                    |  14 -
 src/common/text/html.ts                            |  83 +++++
 src/common/text/index.ts                           |  72 -----
 src/common/text/parse/core/syntax-highlighter.ts   | 334 +++++++++++++++++++++
 src/common/text/parse/elements/bold.ts             |  14 +
 src/common/text/parse/elements/code.ts             |  17 ++
 src/common/text/parse/elements/emoji.ts            |  14 +
 src/common/text/parse/elements/hashtag.ts          |  19 ++
 src/common/text/parse/elements/inline-code.ts      |  17 ++
 src/common/text/parse/elements/link.ts             |  19 ++
 src/common/text/parse/elements/mention.ts          |  17 ++
 src/common/text/parse/elements/quote.ts            |  14 +
 src/common/text/parse/elements/url.ts              |  14 +
 src/common/text/parse/index.ts                     |  72 +++++
 src/models/messaging-message.ts                    |   7 +-
 src/models/post.ts                                 |   7 +-
 .../api/endpoints/messaging/messages/create.ts     |   3 +
 src/server/api/endpoints/posts/create.ts           |   4 +-
 tools/migration/nighthike/7.js                     |  16 +
 42 files changed, 868 insertions(+), 833 deletions(-)
 delete mode 100644 src/client/app/common/views/components/post-html.ts
 create mode 100644 src/client/app/common/views/components/post-html.vue
 delete mode 100644 src/client/app/common/views/components/url.vue
 delete mode 100644 src/common/text/core/syntax-highlighter.ts
 delete mode 100644 src/common/text/elements/bold.ts
 delete mode 100644 src/common/text/elements/code.ts
 delete mode 100644 src/common/text/elements/emoji.ts
 delete mode 100644 src/common/text/elements/hashtag.ts
 delete mode 100644 src/common/text/elements/inline-code.ts
 delete mode 100644 src/common/text/elements/link.ts
 delete mode 100644 src/common/text/elements/mention.ts
 delete mode 100644 src/common/text/elements/quote.ts
 delete mode 100644 src/common/text/elements/url.ts
 create mode 100644 src/common/text/html.ts
 delete mode 100644 src/common/text/index.ts
 create mode 100644 src/common/text/parse/core/syntax-highlighter.ts
 create mode 100644 src/common/text/parse/elements/bold.ts
 create mode 100644 src/common/text/parse/elements/code.ts
 create mode 100644 src/common/text/parse/elements/emoji.ts
 create mode 100644 src/common/text/parse/elements/hashtag.ts
 create mode 100644 src/common/text/parse/elements/inline-code.ts
 create mode 100644 src/common/text/parse/elements/link.ts
 create mode 100644 src/common/text/parse/elements/mention.ts
 create mode 100644 src/common/text/parse/elements/quote.ts
 create mode 100644 src/common/text/parse/elements/url.ts
 create mode 100644 src/common/text/parse/index.ts
 create mode 100644 tools/migration/nighthike/7.js

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index b58ba37ecb..8c10bdee28 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -4,7 +4,7 @@ import signin from './signin.vue';
 import signup from './signup.vue';
 import forkit from './forkit.vue';
 import nav from './nav.vue';
-import postHtml from './post-html';
+import postHtml from './post-html.vue';
 import poll from './poll.vue';
 import pollEditor from './poll-editor.vue';
 import reactionIcon from './reaction-icon.vue';
diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue
index 94f87fd709..25ceab85a1 100644
--- a/src/client/app/common/views/components/messaging-room.message.vue
+++ b/src/client/app/common/views/components/messaging-room.message.vue
@@ -4,13 +4,13 @@
 		<img class="avatar" :src="`${message.user.avatarUrl}?thumbnail&size=80`" alt=""/>
 	</router-link>
 	<div class="content">
-		<div class="balloon" :data-no-text="message.text == null">
+		<div class="balloon" :data-no-text="message.textHtml == null">
 			<p class="read" v-if="isMe && message.isRead">%i18n:common.tags.mk-messaging-message.is-read%</p>
 			<button class="delete-button" v-if="isMe" title="%i18n:common.delete%">
 				<img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
 			</button>
 			<div class="content" v-if="!message.isDeleted">
-				<mk-post-html class="text" v-if="message.ast" :ast="message.ast" :i="os.i"/>
+				<mk-post-html class="text" v-if="message.textHtml" ref="text" :html="message.textHtml" :i="os.i"/>
 				<div class="file" v-if="message.file">
 					<a :href="message.file.url" target="_blank" :title="message.file.name">
 						<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"/>
@@ -38,21 +38,32 @@ import getAcct from '../../../../../common/user/get-acct';
 
 export default Vue.extend({
 	props: ['message'],
+	data() {
+		return {
+			urls: []
+		};
+	},
 	computed: {
 		acct() {
 			return getAcct(this.message.user);
 		},
 		isMe(): boolean {
 			return this.message.userId == (this as any).os.i.id;
-		},
-		urls(): string[] {
-			if (this.message.ast) {
-				return this.message.ast
-					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-					.map(t => t.url);
-			} else {
-				return null;
-			}
+		}
+	},
+	watch: {
+		message: {
+			handler(newMessage, oldMessage) {
+				if (!oldMessage || newMessage.textHtml !== oldMessage.textHtml) {
+					this.$nextTick(() => {
+						const elements = this.$refs.text.$el.getElementsByTagName('a');
+
+						this.urls = [].filter.call(elements, ({ origin }) => origin !== location.origin)
+							.map(({ href }) => href);
+					});
+				}
+			},
+			immediate: true
 		}
 	}
 });
diff --git a/src/client/app/common/views/components/post-html.ts b/src/client/app/common/views/components/post-html.ts
deleted file mode 100644
index 39d783aac5..0000000000
--- a/src/client/app/common/views/components/post-html.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import Vue from 'vue';
-import * as emojilib from 'emojilib';
-import getAcct from '../../../../../common/user/get-acct';
-import { url } from '../../../config';
-import MkUrl from './url.vue';
-
-const flatten = list => list.reduce(
-	(a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
-);
-
-export default Vue.component('mk-post-html', {
-	props: {
-		ast: {
-			type: Array,
-			required: true
-		},
-		shouldBreak: {
-			type: Boolean,
-			default: true
-		},
-		i: {
-			type: Object,
-			default: null
-		}
-	},
-	render(createElement) {
-		const els = flatten((this as any).ast.map(token => {
-			switch (token.type) {
-				case 'text':
-					const text = token.content.replace(/(\r\n|\n|\r)/g, '\n');
-
-					if ((this as any).shouldBreak) {
-						const x = text.split('\n')
-							.map(t => t == '' ? [createElement('br')] : [createElement('span', t), createElement('br')]);
-						x[x.length - 1].pop();
-						return x;
-					} else {
-						return createElement('span', text.replace(/\n/g, ' '));
-					}
-
-				case 'bold':
-					return createElement('strong', token.bold);
-
-				case 'url':
-					return createElement(MkUrl, {
-						props: {
-							url: token.content,
-							target: '_blank'
-						}
-					});
-
-				case 'link':
-					return createElement('a', {
-						attrs: {
-							class: 'link',
-							href: token.url,
-							target: '_blank',
-							title: token.url
-						}
-					}, token.title);
-
-				case 'mention':
-					return (createElement as any)('a', {
-						attrs: {
-							href: `${url}/@${getAcct(token)}`,
-							target: '_blank',
-							dataIsMe: (this as any).i && getAcct((this as any).i) == getAcct(token)
-						},
-						directives: [{
-							name: 'user-preview',
-							value: token.content
-						}]
-					}, token.content);
-
-				case 'hashtag':
-					return createElement('a', {
-						attrs: {
-							href: `${url}/search?q=${token.content}`,
-							target: '_blank'
-						}
-					}, token.content);
-
-				case 'code':
-					return createElement('pre', [
-						createElement('code', {
-							domProps: {
-								innerHTML: token.html
-							}
-						})
-					]);
-
-				case 'inline-code':
-					return createElement('code', {
-						domProps: {
-							innerHTML: token.html
-						}
-					});
-
-				case 'quote':
-					const text2 = token.quote.replace(/(\r\n|\n|\r)/g, '\n');
-
-					if ((this as any).shouldBreak) {
-						const x = text2.split('\n')
-							.map(t => [createElement('span', t), createElement('br')]);
-						x[x.length - 1].pop();
-						return createElement('div', {
-							attrs: {
-								class: 'quote'
-							}
-						}, x);
-					} else {
-						return createElement('span', {
-							attrs: {
-								class: 'quote'
-							}
-						}, text2.replace(/\n/g, ' '));
-					}
-
-				case 'emoji':
-					const emoji = emojilib.lib[token.emoji];
-					return createElement('span', emoji ? emoji.char : token.content);
-
-				default:
-					console.log('unknown ast type:', token.type);
-			}
-		}));
-
-		const _els = [];
-		els.forEach((el, i) => {
-			if (el.tag == 'br') {
-				if (els[i - 1].tag != 'div') {
-					_els.push(el);
-				}
-			} else {
-				_els.push(el);
-			}
-		});
-
-		return createElement('span', _els);
-	}
-});
diff --git a/src/client/app/common/views/components/post-html.vue b/src/client/app/common/views/components/post-html.vue
new file mode 100644
index 0000000000..1c949052b9
--- /dev/null
+++ b/src/client/app/common/views/components/post-html.vue
@@ -0,0 +1,103 @@
+<template><div class="mk-post-html" v-html="html"></div></template>
+
+<script lang="ts">
+import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
+import { url } from '../../../config';
+
+function markUrl(a) {
+	while (a.firstChild) {
+		a.removeChild(a.firstChild);
+	}
+
+	const schema = document.createElement('span');
+	const delimiter = document.createTextNode('//');
+	const host = document.createElement('span');
+	const pathname = document.createElement('span');
+	const query = document.createElement('span');
+	const hash = document.createElement('span');
+
+	schema.className = 'schema';
+	schema.textContent = a.protocol;
+
+	host.className = 'host';
+	host.textContent = a.host;
+
+	pathname.className = 'pathname';
+	pathname.textContent = a.pathname;
+
+	query.className = 'query';
+	query.textContent = a.search;
+
+	hash.className = 'hash';
+	hash.textContent = a.hash;
+
+	a.appendChild(schema);
+	a.appendChild(delimiter);
+	a.appendChild(host);
+	a.appendChild(pathname);
+	a.appendChild(query);
+	a.appendChild(hash);
+}
+
+function markMe(me, a) {
+	a.setAttribute("data-is-me", me && `${url}/@${getAcct(me)}` == a.href);
+}
+
+function markTarget(a) {
+	a.setAttribute("target", "_blank");
+}
+
+export default Vue.component('mk-post-html', {
+	props: {
+		html: {
+			type: String,
+			required: true
+		},
+		i: {
+			type: Object,
+			default: null
+		}
+	},
+	watch {
+		html: {
+			handler() {
+				this.$nextTick(() => [].forEach.call(this.$el.getElementsByTagName('a'), a => {
+					if (a.href === a.textContent) {
+						markUrl(a);
+					} else {
+						markMe((this as any).i, a);
+					}
+
+					markTarget(a);
+				}));
+			},
+			immediate: true,
+		}
+	}
+});
+</script>
+
+<style lang="stylus">
+.mk-post-html
+	a
+		word-break break-all
+
+		> .schema
+			opacity 0.5
+
+		> .host
+			font-weight bold
+
+		> .pathname
+			opacity 0.8
+
+		> .query
+			opacity 0.5
+
+		> .hash
+			font-style italic
+
+	p
+		margin 0
+</style>
diff --git a/src/client/app/common/views/components/url.vue b/src/client/app/common/views/components/url.vue
deleted file mode 100644
index 14d4fc82f3..0000000000
--- a/src/client/app/common/views/components/url.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-<a class="mk-url" :href="url" :target="target">
-	<span class="schema">{{ schema }}//</span>
-	<span class="hostname">{{ hostname }}</span>
-	<span class="port" v-if="port != ''">:{{ port }}</span>
-	<span class="pathname" v-if="pathname != ''">{{ pathname }}</span>
-	<span class="query">{{ query }}</span>
-	<span class="hash">{{ hash }}</span>
-	%fa:external-link-square-alt%
-</a>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['url', 'target'],
-	data() {
-		return {
-			schema: null,
-			hostname: null,
-			port: null,
-			pathname: null,
-			query: null,
-			hash: null
-		};
-	},
-	created() {
-		const url = new URL(this.url);
-
-		this.schema = url.protocol;
-		this.hostname = url.hostname;
-		this.port = url.port;
-		this.pathname = url.pathname;
-		this.query = url.search;
-		this.hash = url.hash;
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-url
-	word-break break-all
-
-	> [data-fa]
-		padding-left 2px
-		font-size .9em
-		font-weight 400
-		font-style normal
-
-	> .schema
-		opacity 0.5
-
-	> .hostname
-		font-weight bold
-
-	> .pathname
-		opacity 0.8
-
-	> .query
-		opacity 0.5
-
-	> .hash
-		font-style italic
-
-</style>
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index 8f6199732a..f379029f9f 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -15,7 +15,7 @@
 				</div>
 			</header>
 			<div class="text">
-				<mk-post-html :ast="post.ast"/>
+				<mk-post-html :html="post.textHtml"/>
 			</div>
 		</div>
 	</div>
diff --git a/src/client/app/desktop/views/components/post-detail.sub.vue b/src/client/app/desktop/views/components/post-detail.sub.vue
index 285b5dedee..b6148d9b28 100644
--- a/src/client/app/desktop/views/components/post-detail.sub.vue
+++ b/src/client/app/desktop/views/components/post-detail.sub.vue
@@ -16,7 +16,7 @@
 			</div>
 		</header>
 		<div class="body">
-			<mk-post-html v-if="post.ast" :ast="post.ast" :i="os.i" :class="$style.text"/>
+			<mk-post-html v-if="post.textHtml" :html="post.textHtml" :i="os.i" :class="$style.text"/>
 			<div class="media" v-if="post.media > 0">
 				<mk-media-list :media-list="post.media"/>
 			</div>
diff --git a/src/client/app/desktop/views/components/post-detail.vue b/src/client/app/desktop/views/components/post-detail.vue
index 1811e22bad..e75ebe34b4 100644
--- a/src/client/app/desktop/views/components/post-detail.vue
+++ b/src/client/app/desktop/views/components/post-detail.vue
@@ -38,7 +38,7 @@
 			</router-link>
 		</header>
 		<div class="body">
-			<mk-post-html :class="$style.text" v-if="p.ast" :ast="p.ast" :i="os.i"/>
+			<mk-post-html :class="$style.text" v-if="p.text" ref="text" :text="p.text" :i="os.i"/>
 			<div class="media" v-if="p.media.length > 0">
 				<mk-media-list :media-list="p.media"/>
 			</div>
@@ -109,6 +109,7 @@ export default Vue.extend({
 			context: [],
 			contextFetching: false,
 			replies: [],
+			urls: []
 		};
 	},
 	computed: {
@@ -130,15 +131,6 @@ export default Vue.extend({
 		},
 		title(): string {
 			return dateStringify(this.p.createdAt);
-		},
-		urls(): string[] {
-			if (this.p.ast) {
-				return this.p.ast
-					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-					.map(t => t.url);
-			} else {
-				return null;
-			}
 		}
 	},
 	mounted() {
@@ -170,6 +162,21 @@ export default Vue.extend({
 			}
 		}
 	},
+	watch: {
+		post: {
+			handler(newPost, oldPost) {
+				if (!oldPost || newPost.text !== oldPost.text) {
+					this.$nextTick(() => {
+						const elements = this.$refs.text.$el.getElementsByTagName('a');
+
+						this.urls = [].filter.call(elements, ({ origin }) => origin !== location.origin)
+							.map(({ href }) => href);
+					});
+				}
+			},
+			immediate: true
+		}
+	},
 	methods: {
 		fetchContext() {
 			this.contextFetching = true;
diff --git a/src/client/app/desktop/views/components/posts.post.vue b/src/client/app/desktop/views/components/posts.post.vue
index aa1f1db41c..f3566c81bf 100644
--- a/src/client/app/desktop/views/components/posts.post.vue
+++ b/src/client/app/desktop/views/components/posts.post.vue
@@ -38,7 +38,7 @@
 				</p>
 				<div class="text">
 					<a class="reply" v-if="p.reply">%fa:reply%</a>
-					<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i" :class="$style.text"/>
+					<mk-post-html v-if="p.textHtml" ref="text" :html="p.textHtml" :i="os.i" :class="$style.text"/>
 					<a class="rp" v-if="p.repost">RP:</a>
 				</div>
 				<div class="media" v-if="p.media.length > 0">
@@ -112,7 +112,8 @@ export default Vue.extend({
 		return {
 			isDetailOpened: false,
 			connection: null,
-			connectionId: null
+			connectionId: null,
+			urls: []
 		};
 	},
 	computed: {
@@ -140,15 +141,6 @@ export default Vue.extend({
 		},
 		url(): string {
 			return `/@${this.acct}/${this.p.id}`;
-		},
-		urls(): string[] {
-			if (this.p.ast) {
-				return this.p.ast
-					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-					.map(t => t.url);
-			} else {
-				return null;
-			}
 		}
 	},
 	created() {
@@ -190,6 +182,21 @@ export default Vue.extend({
 			(this as any).os.stream.dispose(this.connectionId);
 		}
 	},
+	watch: {
+		post: {
+			handler(newPost, oldPost) {
+				if (!oldPost || newPost.textHtml !== oldPost.textHtml) {
+					this.$nextTick(() => {
+						const elements = this.$refs.text.$el.getElementsByTagName('a');
+
+						this.urls = [].filter.call(elements, ({ origin }) => origin !== location.origin)
+							.map(({ href }) => href);
+					});
+				}
+			},
+			immediate: true
+		}
+	},
 	methods: {
 		capture(withHandler = false) {
 			if ((this as any).os.isSignedIn) {
@@ -450,7 +457,7 @@ export default Vue.extend({
 					font-size 1.1em
 					color #717171
 
-					>>> .quote
+					>>> blockquote
 						margin 8px
 						padding 6px 12px
 						color #aaa
diff --git a/src/client/app/desktop/views/components/sub-post-content.vue b/src/client/app/desktop/views/components/sub-post-content.vue
index 1f5ce38984..58c81e7552 100644
--- a/src/client/app/desktop/views/components/sub-post-content.vue
+++ b/src/client/app/desktop/views/components/sub-post-content.vue
@@ -2,7 +2,7 @@
 <div class="mk-sub-post-content">
 	<div class="body">
 		<a class="reply" v-if="post.replyId">%fa:reply%</a>
-		<mk-post-html :ast="post.ast" :i="os.i"/>
+		<mk-post-html ref="text" :html="post.textHtml" :i="os.i"/>
 		<a class="rp" v-if="post.repostId" :href="`/post:${post.repostId}`">RP: ...</a>
 	</div>
 	<details v-if="post.media.length > 0">
diff --git a/src/client/app/mobile/views/components/post-detail.vue b/src/client/app/mobile/views/components/post-detail.vue
index 6411011b89..77a73426f2 100644
--- a/src/client/app/mobile/views/components/post-detail.vue
+++ b/src/client/app/mobile/views/components/post-detail.vue
@@ -38,7 +38,7 @@
 			</div>
 		</header>
 		<div class="body">
-			<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i" :class="$style.text"/>
+			<mk-post-html v-if="p.text" :ast="p.text" :i="os.i" :class="$style.text"/>
 			<div class="tags" v-if="p.tags && p.tags.length > 0">
 				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
 			</div>
@@ -103,6 +103,7 @@ export default Vue.extend({
 			context: [],
 			contextFetching: false,
 			replies: [],
+			urls: []
 		};
 	},
 	computed: {
@@ -127,15 +128,6 @@ export default Vue.extend({
 					.map(key => this.p.reactionCounts[key])
 					.reduce((a, b) => a + b)
 				: 0;
-		},
-		urls(): string[] {
-			if (this.p.ast) {
-				return this.p.ast
-					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-					.map(t => t.url);
-			} else {
-				return null;
-			}
 		}
 	},
 	mounted() {
@@ -167,6 +159,21 @@ export default Vue.extend({
 			}
 		}
 	},
+	watch: {
+		post: {
+			handler(newPost, oldPost) {
+				if (!oldPost || newPost.text !== oldPost.text) {
+					this.$nextTick(() => {
+						const elements = this.$refs.text.$el.getElementsByTagName('a');
+
+						this.urls = [].filter.call(elements, ({ origin }) => origin !== location.origin)
+							.map(({ href }) => href);
+					});
+				}
+			},
+			immediate: true
+		}
+	},
 	methods: {
 		fetchContext() {
 			this.contextFetching = true;
diff --git a/src/client/app/mobile/views/components/post.vue b/src/client/app/mobile/views/components/post.vue
index 52fb095372..96ec9632f1 100644
--- a/src/client/app/mobile/views/components/post.vue
+++ b/src/client/app/mobile/views/components/post.vue
@@ -37,7 +37,7 @@
 					<a class="reply" v-if="p.reply">
 						%fa:reply%
 					</a>
-					<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i" :class="$style.text"/>
+					<mk-post-html v-if="p.text" ref="text" :text="p.text" :i="os.i" :class="$style.text"/>
 					<a class="rp" v-if="p.repost != null">RP:</a>
 				</div>
 				<div class="media" v-if="p.media.length > 0">
@@ -90,7 +90,8 @@ export default Vue.extend({
 	data() {
 		return {
 			connection: null,
-			connectionId: null
+			connectionId: null,
+			urls: []
 		};
 	},
 	computed: {
@@ -118,15 +119,6 @@ export default Vue.extend({
 		},
 		url(): string {
 			return `/@${this.pAcct}/${this.p.id}`;
-		},
-		urls(): string[] {
-			if (this.p.ast) {
-				return this.p.ast
-					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-					.map(t => t.url);
-			} else {
-				return null;
-			}
 		}
 	},
 	created() {
@@ -168,6 +160,21 @@ export default Vue.extend({
 			(this as any).os.stream.dispose(this.connectionId);
 		}
 	},
+	watch: {
+		post: {
+			handler(newPost, oldPost) {
+				if (!oldPost || newPost.text !== oldPost.text) {
+					this.$nextTick(() => {
+						const elements = this.$refs.text.$el.getElementsByTagName('a');
+
+						this.urls = [].filter.call(elements, ({ origin }) => origin !== location.origin)
+							.map(({ href }) => href);
+					});
+				}
+			},
+			immediate: true
+		}
+	},
 	methods: {
 		capture(withHandler = false) {
 			if ((this as any).os.isSignedIn) {
@@ -389,7 +396,7 @@ export default Vue.extend({
 					font-size 1.1em
 					color #717171
 
-					>>> .quote
+					>>> blockquote
 						margin 8px
 						padding 6px 12px
 						color #aaa
diff --git a/src/client/app/mobile/views/components/sub-post-content.vue b/src/client/app/mobile/views/components/sub-post-content.vue
index 5ff88089aa..955bb406b4 100644
--- a/src/client/app/mobile/views/components/sub-post-content.vue
+++ b/src/client/app/mobile/views/components/sub-post-content.vue
@@ -2,7 +2,7 @@
 <div class="mk-sub-post-content">
 	<div class="body">
 		<a class="reply" v-if="post.replyId">%fa:reply%</a>
-		<mk-post-html v-if="post.ast" :ast="post.ast" :i="os.i"/>
+		<mk-post-html v-if="post.text" :ast="post.text" :i="os.i"/>
 		<a class="rp" v-if="post.repostId">RP: ...</a>
 	</div>
 	<details v-if="post.media.length > 0">
diff --git a/src/client/docs/api/entities/post.yaml b/src/client/docs/api/entities/post.yaml
index da79866ba1..7077700129 100644
--- a/src/client/docs/api/entities/post.yaml
+++ b/src/client/docs/api/entities/post.yaml
@@ -27,8 +27,14 @@ props:
     type: "string"
     optional: true
     desc:
-      ja: "投稿の本文"
-      en: "The text of this post"
+      ja: "投稿の本文 (ローカルの場合Markdown風のフォーマット)"
+      en: "The text of this post (in Markdown like format if local)"
+  - name: "textHtml"
+    type: "string"
+    optional: true
+    desc:
+      ja: "投稿の本文 (HTML) (投稿時は無視)"
+      en: "The text of this post (in HTML. Ignored when posting.)"
   - name: "mediaIds"
     type: "id(DriveFile)[]"
     optional: true
diff --git a/src/common/text/core/syntax-highlighter.ts b/src/common/text/core/syntax-highlighter.ts
deleted file mode 100644
index c0396b1fc6..0000000000
--- a/src/common/text/core/syntax-highlighter.ts
+++ /dev/null
@@ -1,334 +0,0 @@
-function escape(text) {
-	return text
-		.replace(/>/g, '&gt;')
-		.replace(/</g, '&lt;');
-}
-
-// 文字数が多い順にソートします
-// そうしないと、「function」という文字列が与えられたときに「func」が先にマッチしてしまう可能性があるためです
-const _keywords = [
-	'true',
-	'false',
-	'null',
-	'nil',
-	'undefined',
-	'void',
-	'var',
-	'const',
-	'let',
-	'mut',
-	'dim',
-	'if',
-	'then',
-	'else',
-	'switch',
-	'match',
-	'case',
-	'default',
-	'for',
-	'each',
-	'in',
-	'while',
-	'loop',
-	'continue',
-	'break',
-	'do',
-	'goto',
-	'next',
-	'end',
-	'sub',
-	'throw',
-	'try',
-	'catch',
-	'finally',
-	'enum',
-	'delegate',
-	'function',
-	'func',
-	'fun',
-	'fn',
-	'return',
-	'yield',
-	'async',
-	'await',
-	'require',
-	'include',
-	'import',
-	'imports',
-	'export',
-	'exports',
-	'from',
-	'as',
-	'using',
-	'use',
-	'internal',
-	'module',
-	'namespace',
-	'where',
-	'select',
-	'struct',
-	'union',
-	'new',
-	'delete',
-	'this',
-	'super',
-	'base',
-	'class',
-	'interface',
-	'abstract',
-	'static',
-	'public',
-	'private',
-	'protected',
-	'virtual',
-	'partial',
-	'override',
-	'extends',
-	'implements',
-	'constructor'
-];
-
-const keywords = _keywords
-	.concat(_keywords.map(k => k[0].toUpperCase() + k.substr(1)))
-	.concat(_keywords.map(k => k.toUpperCase()))
-	.sort((a, b) => b.length - a.length);
-
-const symbols = [
-	'=',
-	'+',
-	'-',
-	'*',
-	'/',
-	'%',
-	'~',
-	'^',
-	'&',
-	'|',
-	'>',
-	'<',
-	'!',
-	'?'
-];
-
-const elements = [
-	// comment
-	code => {
-		if (code.substr(0, 2) != '//') return null;
-		const match = code.match(/^\/\/(.+?)(\n|$)/);
-		if (!match) return null;
-		const comment = match[0];
-		return {
-			html: `<span class="comment">${escape(comment)}</span>`,
-			next: comment.length
-		};
-	},
-
-	// block comment
-	code => {
-		const match = code.match(/^\/\*([\s\S]+?)\*\//);
-		if (!match) return null;
-		return {
-			html: `<span class="comment">${escape(match[0])}</span>`,
-			next: match[0].length
-		};
-	},
-
-	// string
-	code => {
-		if (!/^['"`]/.test(code)) return null;
-		const begin = code[0];
-		let str = begin;
-		let thisIsNotAString = false;
-		for (let i = 1; i < code.length; i++) {
-			const char = code[i];
-			if (char == '\\') {
-				str += char;
-				str += code[i + 1] || '';
-				i++;
-				continue;
-			} else if (char == begin) {
-				str += char;
-				break;
-			} else if (char == '\n' || i == (code.length - 1)) {
-				thisIsNotAString = true;
-				break;
-			} else {
-				str += char;
-			}
-		}
-		if (thisIsNotAString) {
-			return null;
-		} else {
-			return {
-				html: `<span class="string">${escape(str)}</span>`,
-				next: str.length
-			};
-		}
-	},
-
-	// regexp
-	code => {
-		if (code[0] != '/') return null;
-		let regexp = '';
-		let thisIsNotARegexp = false;
-		for (let i = 1; i < code.length; i++) {
-			const char = code[i];
-			if (char == '\\') {
-				regexp += char;
-				regexp += code[i + 1] || '';
-				i++;
-				continue;
-			} else if (char == '/') {
-				break;
-			} else if (char == '\n' || i == (code.length - 1)) {
-				thisIsNotARegexp = true;
-				break;
-			} else {
-				regexp += char;
-			}
-		}
-
-		if (thisIsNotARegexp) return null;
-		if (regexp == '') return null;
-		if (regexp[0] == ' ' && regexp[regexp.length - 1] == ' ') return null;
-
-		return {
-			html: `<span class="regexp">/${escape(regexp)}/</span>`,
-			next: regexp.length + 2
-		};
-	},
-
-	// label
-	code => {
-		if (code[0] != '@') return null;
-		const match = code.match(/^@([a-zA-Z_-]+?)\n/);
-		if (!match) return null;
-		const label = match[0];
-		return {
-			html: `<span class="label">${label}</span>`,
-			next: label.length
-		};
-	},
-
-	// number
-	(code, i, source) => {
-		const prev = source[i - 1];
-		if (prev && /[a-zA-Z]/.test(prev)) return null;
-		if (!/^[\-\+]?[0-9\.]+/.test(code)) return null;
-		const match = code.match(/^[\-\+]?[0-9\.]+/)[0];
-		if (match) {
-			return {
-				html: `<span class="number">${match}</span>`,
-				next: match.length
-			};
-		} else {
-			return null;
-		}
-	},
-
-	// nan
-	(code, i, source) => {
-		const prev = source[i - 1];
-		if (prev && /[a-zA-Z]/.test(prev)) return null;
-		if (code.substr(0, 3) == 'NaN') {
-			return {
-				html: `<span class="nan">NaN</span>`,
-				next: 3
-			};
-		} else {
-			return null;
-		}
-	},
-
-	// method
-	code => {
-		const match = code.match(/^([a-zA-Z_-]+?)\(/);
-		if (!match) return null;
-
-		if (match[1] == '-') return null;
-
-		return {
-			html: `<span class="method">${match[1]}</span>`,
-			next: match[1].length
-		};
-	},
-
-	// property
-	(code, i, source) => {
-		const prev = source[i - 1];
-		if (prev != '.') return null;
-
-		const match = code.match(/^[a-zA-Z0-9_-]+/);
-		if (!match) return null;
-
-		return {
-			html: `<span class="property">${match[0]}</span>`,
-			next: match[0].length
-		};
-	},
-
-	// keyword
-	(code, i, source) => {
-		const prev = source[i - 1];
-		if (prev && /[a-zA-Z]/.test(prev)) return null;
-
-		const match = keywords.filter(k => code.substr(0, k.length) == k)[0];
-		if (match) {
-			if (/^[a-zA-Z]/.test(code.substr(match.length))) return null;
-			return {
-				html: `<span class="keyword ${match}">${match}</span>`,
-				next: match.length
-			};
-		} else {
-			return null;
-		}
-	},
-
-	// symbol
-	code => {
-		const match = symbols.filter(s => code[0] == s)[0];
-		if (match) {
-			return {
-				html: `<span class="symbol">${match}</span>`,
-				next: 1
-			};
-		} else {
-			return null;
-		}
-	}
-];
-
-// specify lang is todo
-export default (source: string, lang?: string) => {
-	let code = source;
-	let html = '';
-
-	let i = 0;
-
-	function push(token) {
-		html += token.html;
-		code = code.substr(token.next);
-		i += token.next;
-	}
-
-	while (code != '') {
-		const parsed = elements.some(el => {
-			const e = el(code, i, source);
-			if (e) {
-				push(e);
-				return true;
-			} else {
-				return false;
-			}
-		});
-
-		if (!parsed) {
-			push({
-				html: escape(code[0]),
-				next: 1
-			});
-		}
-	}
-
-	return html;
-};
diff --git a/src/common/text/elements/bold.ts b/src/common/text/elements/bold.ts
deleted file mode 100644
index ce25764457..0000000000
--- a/src/common/text/elements/bold.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Bold
- */
-
-module.exports = text => {
-	const match = text.match(/^\*\*(.+?)\*\*/);
-	if (!match) return null;
-	const bold = match[0];
-	return {
-		type: 'bold',
-		content: bold,
-		bold: bold.substr(2, bold.length - 4)
-	};
-};
diff --git a/src/common/text/elements/code.ts b/src/common/text/elements/code.ts
deleted file mode 100644
index 4821e95fe2..0000000000
--- a/src/common/text/elements/code.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Code (block)
- */
-
-import genHtml from '../core/syntax-highlighter';
-
-module.exports = text => {
-	const match = text.match(/^```([\s\S]+?)```/);
-	if (!match) return null;
-	const code = match[0];
-	return {
-		type: 'code',
-		content: code,
-		code: code.substr(3, code.length - 6).trim(),
-		html: genHtml(code.substr(3, code.length - 6).trim())
-	};
-};
diff --git a/src/common/text/elements/emoji.ts b/src/common/text/elements/emoji.ts
deleted file mode 100644
index e24231a223..0000000000
--- a/src/common/text/elements/emoji.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Emoji
- */
-
-module.exports = text => {
-	const match = text.match(/^:[a-zA-Z0-9+-_]+:/);
-	if (!match) return null;
-	const emoji = match[0];
-	return {
-		type: 'emoji',
-		content: emoji,
-		emoji: emoji.substr(1, emoji.length - 2)
-	};
-};
diff --git a/src/common/text/elements/hashtag.ts b/src/common/text/elements/hashtag.ts
deleted file mode 100644
index ee57b140b8..0000000000
--- a/src/common/text/elements/hashtag.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Hashtag
- */
-
-module.exports = (text, i) => {
-	if (!(/^\s#[^\s]+/.test(text) || (i == 0 && /^#[^\s]+/.test(text)))) return null;
-	const isHead = text[0] == '#';
-	const hashtag = text.match(/^\s?#[^\s]+/)[0];
-	const res: any[] = !isHead ? [{
-		type: 'text',
-		content: text[0]
-	}] : [];
-	res.push({
-		type: 'hashtag',
-		content: isHead ? hashtag : hashtag.substr(1),
-		hashtag: isHead ? hashtag.substr(1) : hashtag.substr(2)
-	});
-	return res;
-};
diff --git a/src/common/text/elements/inline-code.ts b/src/common/text/elements/inline-code.ts
deleted file mode 100644
index 9f9ef51a2b..0000000000
--- a/src/common/text/elements/inline-code.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Code (inline)
- */
-
-import genHtml from '../core/syntax-highlighter';
-
-module.exports = text => {
-	const match = text.match(/^`(.+?)`/);
-	if (!match) return null;
-	const code = match[0];
-	return {
-		type: 'inline-code',
-		content: code,
-		code: code.substr(1, code.length - 2).trim(),
-		html: genHtml(code.substr(1, code.length - 2).trim())
-	};
-};
diff --git a/src/common/text/elements/link.ts b/src/common/text/elements/link.ts
deleted file mode 100644
index 35563ddc3d..0000000000
--- a/src/common/text/elements/link.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Link
- */
-
-module.exports = text => {
-	const match = text.match(/^\??\[([^\[\]]+?)\]\((https?:\/\/[\w\/:%#@\$&\?!\(\)\[\]~\.=\+\-]+?)\)/);
-	if (!match) return null;
-	const silent = text[0] == '?';
-	const link = match[0];
-	const title = match[1];
-	const url = match[2];
-	return {
-		type: 'link',
-		content: link,
-		title: title,
-		url: url,
-		silent: silent
-	};
-};
diff --git a/src/common/text/elements/mention.ts b/src/common/text/elements/mention.ts
deleted file mode 100644
index d05a76649d..0000000000
--- a/src/common/text/elements/mention.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Mention
- */
-import parseAcct from '../../../common/user/parse-acct';
-
-module.exports = text => {
-	const match = text.match(/^(?:@[a-zA-Z0-9\-]+){1,2}/);
-	if (!match) return null;
-	const mention = match[0];
-	const { username, host } = parseAcct(mention.substr(1));
-	return {
-		type: 'mention',
-		content: mention,
-		username,
-		host
-	};
-};
diff --git a/src/common/text/elements/quote.ts b/src/common/text/elements/quote.ts
deleted file mode 100644
index cc8cfffdc4..0000000000
--- a/src/common/text/elements/quote.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Quoted text
- */
-
-module.exports = text => {
-	const match = text.match(/^"([\s\S]+?)\n"/);
-	if (!match) return null;
-	const quote = match[0];
-	return {
-		type: 'quote',
-		content: quote,
-		quote: quote.substr(1, quote.length - 2).trim(),
-	};
-};
diff --git a/src/common/text/elements/url.ts b/src/common/text/elements/url.ts
deleted file mode 100644
index 1003aff9c3..0000000000
--- a/src/common/text/elements/url.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * URL
- */
-
-module.exports = text => {
-	const match = text.match(/^https?:\/\/[\w\/:%#@\$&\?!\(\)\[\]~\.=\+\-]+/);
-	if (!match) return null;
-	const url = match[0];
-	return {
-		type: 'url',
-		content: url,
-		url: url
-	};
-};
diff --git a/src/common/text/html.ts b/src/common/text/html.ts
new file mode 100644
index 0000000000..797f3b3f33
--- /dev/null
+++ b/src/common/text/html.ts
@@ -0,0 +1,83 @@
+import { lib as emojilib } from 'emojilib';
+import { JSDOM } from 'jsdom';
+
+const handlers = {
+	bold({ document }, { bold }) {
+		const b = document.createElement('b');
+		b.textContent = bold;
+		document.body.appendChild(b);
+	},
+
+	code({ document }, { code }) {
+		const pre = document.createElement('pre');
+		const inner = document.createElement('code');
+		inner.innerHTML = code;
+		pre.appendChild(inner);
+		document.body.appendChild(pre);
+	},
+
+	emoji({ document }, { content, emoji }) {
+		const found = emojilib[emoji];
+		const node = document.createTextNode(found ? found.char : content);
+		document.body.appendChild(node);
+	},
+
+	hashtag({ document }, { hashtag }) {
+		const a = document.createElement('a');
+		a.href = '/search?q=#' + hashtag;
+		a.textContent = hashtag;
+	},
+
+	'inline-code'({ document }, { code }) {
+		const element = document.createElement('code');
+		element.textContent = code;
+		document.body.appendChild(element);
+	},
+
+	link({ document }, { url, title }) {
+		const a = document.createElement('a');
+		a.href = url;
+		a.textContent = title;
+		document.body.appendChild(a);
+	},
+
+	mention({ document }, { content }) {
+		const a = document.createElement('a');
+		a.href = '/' + content;
+		a.textContent = content;
+		document.body.appendChild(a);
+	},
+
+	quote({ document }, { quote }) {
+		const blockquote = document.createElement('blockquote');
+		blockquote.textContent = quote;
+		document.body.appendChild(blockquote);
+	},
+
+	text({ document }, { content }) {
+		for (const text of content.split('\n')) {
+			const node = document.createTextNode(text);
+			document.body.appendChild(node);
+
+			const br = document.createElement('br');
+			document.body.appendChild(br);
+		}
+	},
+
+	url({ document }, { url }) {
+		const a = document.createElement('a');
+		a.href = url;
+		a.textContent = url;
+		document.body.appendChild(a);
+	}
+};
+
+export default tokens => {
+	const { window } = new JSDOM('');
+
+	for (const token of tokens) {
+		handlers[token.type](window, token);
+	}
+
+	return `<p>${window.document.body.innerHTML}</p>`;
+};
diff --git a/src/common/text/index.ts b/src/common/text/index.ts
deleted file mode 100644
index 1e2398dc38..0000000000
--- a/src/common/text/index.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Misskey Text Analyzer
- */
-
-const elements = [
-	require('./elements/bold'),
-	require('./elements/url'),
-	require('./elements/link'),
-	require('./elements/mention'),
-	require('./elements/hashtag'),
-	require('./elements/code'),
-	require('./elements/inline-code'),
-	require('./elements/quote'),
-	require('./elements/emoji')
-];
-
-export default (source: string) => {
-
-	if (source == '') {
-		return null;
-	}
-
-	const tokens = [];
-
-	function push(token) {
-		if (token != null) {
-			tokens.push(token);
-			source = source.substr(token.content.length);
-		}
-	}
-
-	let i = 0;
-
-	// パース
-	while (source != '') {
-		const parsed = elements.some(el => {
-			let _tokens = el(source, i);
-			if (_tokens) {
-				if (!Array.isArray(_tokens)) {
-					_tokens = [_tokens];
-				}
-				_tokens.forEach(push);
-				return true;
-			} else {
-				return false;
-			}
-		});
-
-		if (!parsed) {
-			push({
-				type: 'text',
-				content: source[0]
-			});
-		}
-
-		i++;
-	}
-
-	// テキストを纏める
-	tokens[0] = [tokens[0]];
-	return tokens.reduce((a, b) => {
-		if (a[a.length - 1].type == 'text' && b.type == 'text') {
-			const tail = a.pop();
-			return a.concat({
-				type: 'text',
-				content: tail.content + b.content
-			});
-		} else {
-			return a.concat(b);
-		}
-	});
-};
diff --git a/src/common/text/parse/core/syntax-highlighter.ts b/src/common/text/parse/core/syntax-highlighter.ts
new file mode 100644
index 0000000000..c0396b1fc6
--- /dev/null
+++ b/src/common/text/parse/core/syntax-highlighter.ts
@@ -0,0 +1,334 @@
+function escape(text) {
+	return text
+		.replace(/>/g, '&gt;')
+		.replace(/</g, '&lt;');
+}
+
+// 文字数が多い順にソートします
+// そうしないと、「function」という文字列が与えられたときに「func」が先にマッチしてしまう可能性があるためです
+const _keywords = [
+	'true',
+	'false',
+	'null',
+	'nil',
+	'undefined',
+	'void',
+	'var',
+	'const',
+	'let',
+	'mut',
+	'dim',
+	'if',
+	'then',
+	'else',
+	'switch',
+	'match',
+	'case',
+	'default',
+	'for',
+	'each',
+	'in',
+	'while',
+	'loop',
+	'continue',
+	'break',
+	'do',
+	'goto',
+	'next',
+	'end',
+	'sub',
+	'throw',
+	'try',
+	'catch',
+	'finally',
+	'enum',
+	'delegate',
+	'function',
+	'func',
+	'fun',
+	'fn',
+	'return',
+	'yield',
+	'async',
+	'await',
+	'require',
+	'include',
+	'import',
+	'imports',
+	'export',
+	'exports',
+	'from',
+	'as',
+	'using',
+	'use',
+	'internal',
+	'module',
+	'namespace',
+	'where',
+	'select',
+	'struct',
+	'union',
+	'new',
+	'delete',
+	'this',
+	'super',
+	'base',
+	'class',
+	'interface',
+	'abstract',
+	'static',
+	'public',
+	'private',
+	'protected',
+	'virtual',
+	'partial',
+	'override',
+	'extends',
+	'implements',
+	'constructor'
+];
+
+const keywords = _keywords
+	.concat(_keywords.map(k => k[0].toUpperCase() + k.substr(1)))
+	.concat(_keywords.map(k => k.toUpperCase()))
+	.sort((a, b) => b.length - a.length);
+
+const symbols = [
+	'=',
+	'+',
+	'-',
+	'*',
+	'/',
+	'%',
+	'~',
+	'^',
+	'&',
+	'|',
+	'>',
+	'<',
+	'!',
+	'?'
+];
+
+const elements = [
+	// comment
+	code => {
+		if (code.substr(0, 2) != '//') return null;
+		const match = code.match(/^\/\/(.+?)(\n|$)/);
+		if (!match) return null;
+		const comment = match[0];
+		return {
+			html: `<span class="comment">${escape(comment)}</span>`,
+			next: comment.length
+		};
+	},
+
+	// block comment
+	code => {
+		const match = code.match(/^\/\*([\s\S]+?)\*\//);
+		if (!match) return null;
+		return {
+			html: `<span class="comment">${escape(match[0])}</span>`,
+			next: match[0].length
+		};
+	},
+
+	// string
+	code => {
+		if (!/^['"`]/.test(code)) return null;
+		const begin = code[0];
+		let str = begin;
+		let thisIsNotAString = false;
+		for (let i = 1; i < code.length; i++) {
+			const char = code[i];
+			if (char == '\\') {
+				str += char;
+				str += code[i + 1] || '';
+				i++;
+				continue;
+			} else if (char == begin) {
+				str += char;
+				break;
+			} else if (char == '\n' || i == (code.length - 1)) {
+				thisIsNotAString = true;
+				break;
+			} else {
+				str += char;
+			}
+		}
+		if (thisIsNotAString) {
+			return null;
+		} else {
+			return {
+				html: `<span class="string">${escape(str)}</span>`,
+				next: str.length
+			};
+		}
+	},
+
+	// regexp
+	code => {
+		if (code[0] != '/') return null;
+		let regexp = '';
+		let thisIsNotARegexp = false;
+		for (let i = 1; i < code.length; i++) {
+			const char = code[i];
+			if (char == '\\') {
+				regexp += char;
+				regexp += code[i + 1] || '';
+				i++;
+				continue;
+			} else if (char == '/') {
+				break;
+			} else if (char == '\n' || i == (code.length - 1)) {
+				thisIsNotARegexp = true;
+				break;
+			} else {
+				regexp += char;
+			}
+		}
+
+		if (thisIsNotARegexp) return null;
+		if (regexp == '') return null;
+		if (regexp[0] == ' ' && regexp[regexp.length - 1] == ' ') return null;
+
+		return {
+			html: `<span class="regexp">/${escape(regexp)}/</span>`,
+			next: regexp.length + 2
+		};
+	},
+
+	// label
+	code => {
+		if (code[0] != '@') return null;
+		const match = code.match(/^@([a-zA-Z_-]+?)\n/);
+		if (!match) return null;
+		const label = match[0];
+		return {
+			html: `<span class="label">${label}</span>`,
+			next: label.length
+		};
+	},
+
+	// number
+	(code, i, source) => {
+		const prev = source[i - 1];
+		if (prev && /[a-zA-Z]/.test(prev)) return null;
+		if (!/^[\-\+]?[0-9\.]+/.test(code)) return null;
+		const match = code.match(/^[\-\+]?[0-9\.]+/)[0];
+		if (match) {
+			return {
+				html: `<span class="number">${match}</span>`,
+				next: match.length
+			};
+		} else {
+			return null;
+		}
+	},
+
+	// nan
+	(code, i, source) => {
+		const prev = source[i - 1];
+		if (prev && /[a-zA-Z]/.test(prev)) return null;
+		if (code.substr(0, 3) == 'NaN') {
+			return {
+				html: `<span class="nan">NaN</span>`,
+				next: 3
+			};
+		} else {
+			return null;
+		}
+	},
+
+	// method
+	code => {
+		const match = code.match(/^([a-zA-Z_-]+?)\(/);
+		if (!match) return null;
+
+		if (match[1] == '-') return null;
+
+		return {
+			html: `<span class="method">${match[1]}</span>`,
+			next: match[1].length
+		};
+	},
+
+	// property
+	(code, i, source) => {
+		const prev = source[i - 1];
+		if (prev != '.') return null;
+
+		const match = code.match(/^[a-zA-Z0-9_-]+/);
+		if (!match) return null;
+
+		return {
+			html: `<span class="property">${match[0]}</span>`,
+			next: match[0].length
+		};
+	},
+
+	// keyword
+	(code, i, source) => {
+		const prev = source[i - 1];
+		if (prev && /[a-zA-Z]/.test(prev)) return null;
+
+		const match = keywords.filter(k => code.substr(0, k.length) == k)[0];
+		if (match) {
+			if (/^[a-zA-Z]/.test(code.substr(match.length))) return null;
+			return {
+				html: `<span class="keyword ${match}">${match}</span>`,
+				next: match.length
+			};
+		} else {
+			return null;
+		}
+	},
+
+	// symbol
+	code => {
+		const match = symbols.filter(s => code[0] == s)[0];
+		if (match) {
+			return {
+				html: `<span class="symbol">${match}</span>`,
+				next: 1
+			};
+		} else {
+			return null;
+		}
+	}
+];
+
+// specify lang is todo
+export default (source: string, lang?: string) => {
+	let code = source;
+	let html = '';
+
+	let i = 0;
+
+	function push(token) {
+		html += token.html;
+		code = code.substr(token.next);
+		i += token.next;
+	}
+
+	while (code != '') {
+		const parsed = elements.some(el => {
+			const e = el(code, i, source);
+			if (e) {
+				push(e);
+				return true;
+			} else {
+				return false;
+			}
+		});
+
+		if (!parsed) {
+			push({
+				html: escape(code[0]),
+				next: 1
+			});
+		}
+	}
+
+	return html;
+};
diff --git a/src/common/text/parse/elements/bold.ts b/src/common/text/parse/elements/bold.ts
new file mode 100644
index 0000000000..ce25764457
--- /dev/null
+++ b/src/common/text/parse/elements/bold.ts
@@ -0,0 +1,14 @@
+/**
+ * Bold
+ */
+
+module.exports = text => {
+	const match = text.match(/^\*\*(.+?)\*\*/);
+	if (!match) return null;
+	const bold = match[0];
+	return {
+		type: 'bold',
+		content: bold,
+		bold: bold.substr(2, bold.length - 4)
+	};
+};
diff --git a/src/common/text/parse/elements/code.ts b/src/common/text/parse/elements/code.ts
new file mode 100644
index 0000000000..4821e95fe2
--- /dev/null
+++ b/src/common/text/parse/elements/code.ts
@@ -0,0 +1,17 @@
+/**
+ * Code (block)
+ */
+
+import genHtml from '../core/syntax-highlighter';
+
+module.exports = text => {
+	const match = text.match(/^```([\s\S]+?)```/);
+	if (!match) return null;
+	const code = match[0];
+	return {
+		type: 'code',
+		content: code,
+		code: code.substr(3, code.length - 6).trim(),
+		html: genHtml(code.substr(3, code.length - 6).trim())
+	};
+};
diff --git a/src/common/text/parse/elements/emoji.ts b/src/common/text/parse/elements/emoji.ts
new file mode 100644
index 0000000000..e24231a223
--- /dev/null
+++ b/src/common/text/parse/elements/emoji.ts
@@ -0,0 +1,14 @@
+/**
+ * Emoji
+ */
+
+module.exports = text => {
+	const match = text.match(/^:[a-zA-Z0-9+-_]+:/);
+	if (!match) return null;
+	const emoji = match[0];
+	return {
+		type: 'emoji',
+		content: emoji,
+		emoji: emoji.substr(1, emoji.length - 2)
+	};
+};
diff --git a/src/common/text/parse/elements/hashtag.ts b/src/common/text/parse/elements/hashtag.ts
new file mode 100644
index 0000000000..ee57b140b8
--- /dev/null
+++ b/src/common/text/parse/elements/hashtag.ts
@@ -0,0 +1,19 @@
+/**
+ * Hashtag
+ */
+
+module.exports = (text, i) => {
+	if (!(/^\s#[^\s]+/.test(text) || (i == 0 && /^#[^\s]+/.test(text)))) return null;
+	const isHead = text[0] == '#';
+	const hashtag = text.match(/^\s?#[^\s]+/)[0];
+	const res: any[] = !isHead ? [{
+		type: 'text',
+		content: text[0]
+	}] : [];
+	res.push({
+		type: 'hashtag',
+		content: isHead ? hashtag : hashtag.substr(1),
+		hashtag: isHead ? hashtag.substr(1) : hashtag.substr(2)
+	});
+	return res;
+};
diff --git a/src/common/text/parse/elements/inline-code.ts b/src/common/text/parse/elements/inline-code.ts
new file mode 100644
index 0000000000..9f9ef51a2b
--- /dev/null
+++ b/src/common/text/parse/elements/inline-code.ts
@@ -0,0 +1,17 @@
+/**
+ * Code (inline)
+ */
+
+import genHtml from '../core/syntax-highlighter';
+
+module.exports = text => {
+	const match = text.match(/^`(.+?)`/);
+	if (!match) return null;
+	const code = match[0];
+	return {
+		type: 'inline-code',
+		content: code,
+		code: code.substr(1, code.length - 2).trim(),
+		html: genHtml(code.substr(1, code.length - 2).trim())
+	};
+};
diff --git a/src/common/text/parse/elements/link.ts b/src/common/text/parse/elements/link.ts
new file mode 100644
index 0000000000..35563ddc3d
--- /dev/null
+++ b/src/common/text/parse/elements/link.ts
@@ -0,0 +1,19 @@
+/**
+ * Link
+ */
+
+module.exports = text => {
+	const match = text.match(/^\??\[([^\[\]]+?)\]\((https?:\/\/[\w\/:%#@\$&\?!\(\)\[\]~\.=\+\-]+?)\)/);
+	if (!match) return null;
+	const silent = text[0] == '?';
+	const link = match[0];
+	const title = match[1];
+	const url = match[2];
+	return {
+		type: 'link',
+		content: link,
+		title: title,
+		url: url,
+		silent: silent
+	};
+};
diff --git a/src/common/text/parse/elements/mention.ts b/src/common/text/parse/elements/mention.ts
new file mode 100644
index 0000000000..2025dfdaad
--- /dev/null
+++ b/src/common/text/parse/elements/mention.ts
@@ -0,0 +1,17 @@
+/**
+ * Mention
+ */
+import parseAcct from '../../../../common/user/parse-acct';
+
+module.exports = text => {
+	const match = text.match(/^(?:@[a-zA-Z0-9\-]+){1,2}/);
+	if (!match) return null;
+	const mention = match[0];
+	const { username, host } = parseAcct(mention.substr(1));
+	return {
+		type: 'mention',
+		content: mention,
+		username,
+		host
+	};
+};
diff --git a/src/common/text/parse/elements/quote.ts b/src/common/text/parse/elements/quote.ts
new file mode 100644
index 0000000000..cc8cfffdc4
--- /dev/null
+++ b/src/common/text/parse/elements/quote.ts
@@ -0,0 +1,14 @@
+/**
+ * Quoted text
+ */
+
+module.exports = text => {
+	const match = text.match(/^"([\s\S]+?)\n"/);
+	if (!match) return null;
+	const quote = match[0];
+	return {
+		type: 'quote',
+		content: quote,
+		quote: quote.substr(1, quote.length - 2).trim(),
+	};
+};
diff --git a/src/common/text/parse/elements/url.ts b/src/common/text/parse/elements/url.ts
new file mode 100644
index 0000000000..1003aff9c3
--- /dev/null
+++ b/src/common/text/parse/elements/url.ts
@@ -0,0 +1,14 @@
+/**
+ * URL
+ */
+
+module.exports = text => {
+	const match = text.match(/^https?:\/\/[\w\/:%#@\$&\?!\(\)\[\]~\.=\+\-]+/);
+	if (!match) return null;
+	const url = match[0];
+	return {
+		type: 'url',
+		content: url,
+		url: url
+	};
+};
diff --git a/src/common/text/parse/index.ts b/src/common/text/parse/index.ts
new file mode 100644
index 0000000000..1e2398dc38
--- /dev/null
+++ b/src/common/text/parse/index.ts
@@ -0,0 +1,72 @@
+/**
+ * Misskey Text Analyzer
+ */
+
+const elements = [
+	require('./elements/bold'),
+	require('./elements/url'),
+	require('./elements/link'),
+	require('./elements/mention'),
+	require('./elements/hashtag'),
+	require('./elements/code'),
+	require('./elements/inline-code'),
+	require('./elements/quote'),
+	require('./elements/emoji')
+];
+
+export default (source: string) => {
+
+	if (source == '') {
+		return null;
+	}
+
+	const tokens = [];
+
+	function push(token) {
+		if (token != null) {
+			tokens.push(token);
+			source = source.substr(token.content.length);
+		}
+	}
+
+	let i = 0;
+
+	// パース
+	while (source != '') {
+		const parsed = elements.some(el => {
+			let _tokens = el(source, i);
+			if (_tokens) {
+				if (!Array.isArray(_tokens)) {
+					_tokens = [_tokens];
+				}
+				_tokens.forEach(push);
+				return true;
+			} else {
+				return false;
+			}
+		});
+
+		if (!parsed) {
+			push({
+				type: 'text',
+				content: source[0]
+			});
+		}
+
+		i++;
+	}
+
+	// テキストを纏める
+	tokens[0] = [tokens[0]];
+	return tokens.reduce((a, b) => {
+		if (a[a.length - 1].type == 'text' && b.type == 'text') {
+			const tail = a.pop();
+			return a.concat({
+				type: 'text',
+				content: tail.content + b.content
+			});
+		} else {
+			return a.concat(b);
+		}
+	});
+};
diff --git a/src/models/messaging-message.ts b/src/models/messaging-message.ts
index 8bee657c34..974ee54ab8 100644
--- a/src/models/messaging-message.ts
+++ b/src/models/messaging-message.ts
@@ -3,7 +3,6 @@ import deepcopy = require('deepcopy');
 import { pack as packUser } from './user';
 import { pack as packFile } from './drive-file';
 import db from '../db/mongodb';
-import parse from '../common/text';
 
 const MessagingMessage = db.get<IMessagingMessage>('messagingMessages');
 export default MessagingMessage;
@@ -12,6 +11,7 @@ export interface IMessagingMessage {
 	_id: mongo.ObjectID;
 	createdAt: Date;
 	text: string;
+	textHtml: string;
 	userId: mongo.ObjectID;
 	recipientId: mongo.ObjectID;
 	isRead: boolean;
@@ -60,11 +60,6 @@ export const pack = (
 	_message.id = _message._id;
 	delete _message._id;
 
-	// Parse text
-	if (_message.text) {
-		_message.ast = parse(_message.text);
-	}
-
 	// Populate user
 	_message.user = await packUser(_message.userId, me);
 
diff --git a/src/models/post.ts b/src/models/post.ts
index 9bc0c1d3b9..6c853e4f81 100644
--- a/src/models/post.ts
+++ b/src/models/post.ts
@@ -8,7 +8,6 @@ import { pack as packChannel } from './channel';
 import Vote from './poll-vote';
 import Reaction from './post-reaction';
 import { pack as packFile } from './drive-file';
-import parse from '../common/text';
 
 const Post = db.get<IPost>('posts');
 
@@ -31,6 +30,7 @@ export type IPost = {
 	repostId: mongo.ObjectID;
 	poll: any; // todo
 	text: string;
+	textHtml: string;
 	cw: string;
 	userId: mongo.ObjectID;
 	appId: mongo.ObjectID;
@@ -103,11 +103,6 @@ export const pack = async (
 	delete _post.mentions;
 	if (_post.geo) delete _post.geo.type;
 
-	// Parse text
-	if (_post.text) {
-		_post.ast = parse(_post.text);
-	}
-
 	// Populate user
 	_post.user = packUser(_post.userId, meId);
 
diff --git a/src/server/api/endpoints/messaging/messages/create.ts b/src/server/api/endpoints/messaging/messages/create.ts
index d8ffa9fdec..3d3b204da5 100644
--- a/src/server/api/endpoints/messaging/messages/create.ts
+++ b/src/server/api/endpoints/messaging/messages/create.ts
@@ -11,6 +11,8 @@ import DriveFile from '../../../../../models/drive-file';
 import { pack } from '../../../../../models/messaging-message';
 import publishUserStream from '../../../event';
 import { publishMessagingStream, publishMessagingIndexStream, pushSw } from '../../../event';
+import html from '../../../../../common/text/html';
+import parse from '../../../../../common/text/parse';
 import config from '../../../../../conf';
 
 /**
@@ -74,6 +76,7 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 		fileId: file ? file._id : undefined,
 		recipientId: recipient._id,
 		text: text ? text : undefined,
+		textHtml: text ? html(parse(text)) : undefined,
 		userId: user._id,
 		isRead: false
 	});
diff --git a/src/server/api/endpoints/posts/create.ts b/src/server/api/endpoints/posts/create.ts
index aa7e93c28f..5342f77728 100644
--- a/src/server/api/endpoints/posts/create.ts
+++ b/src/server/api/endpoints/posts/create.ts
@@ -3,7 +3,8 @@
  */
 import $ from 'cafy';
 import deepEqual = require('deep-equal');
-import parse from '../../../../common/text';
+import html from '../../../../common/text/html';
+import parse from '../../../../common/text/parse';
 import { default as Post, IPost, isValidText, isValidCw } from '../../../../models/post';
 import { default as User, ILocalAccount, IUser } from '../../../../models/user';
 import { default as Channel, IChannel } from '../../../../models/channel';
@@ -259,6 +260,7 @@ module.exports = (params, user: IUser, app) => new Promise(async (res, rej) => {
 		repostId: repost ? repost._id : undefined,
 		poll: poll,
 		text: text,
+		textHtml: tokens === null ? null : html(tokens),
 		cw: cw,
 		tags: tags,
 		userId: user._id,
diff --git a/tools/migration/nighthike/7.js b/tools/migration/nighthike/7.js
new file mode 100644
index 0000000000..c5055da8ba
--- /dev/null
+++ b/tools/migration/nighthike/7.js
@@ -0,0 +1,16 @@
+// for Node.js interpretation
+
+const Message = require('../../../built/models/messaging-message').default;
+const Post = require('../../../built/models/post').default;
+const html = require('../../../built/common/text/html').default;
+const parse = require('../../../built/common/text/parse').default;
+
+Promise.all([Message, Post].map(async model => {
+	const documents = await model.find();
+
+	return Promise.all(documents.map(({ _id, text }) => model.update(_id, {
+		$set: {
+			textHtml: html(parse(text))
+		}
+	})));
+})).catch(console.error).then(process.exit);
-- 
cgit v1.3.1-freya


From 3178bb20c72380c4379e7b72afa7e468d24e3e97 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 31 Mar 2018 21:41:08 +0900
Subject: Use Vue rendering function

and some refactors
---
 src/client/app/common/views/components/index.ts    |   2 +-
 .../views/components/messaging-room.message.vue    |  41 +++---
 .../app/common/views/components/post-html.ts       | 157 +++++++++++++++++++++
 .../app/common/views/components/post-html.vue      | 103 --------------
 src/client/app/common/views/components/url.vue     |  57 ++++++++
 .../common/views/components/welcome-timeline.vue   |   2 +-
 .../desktop/views/components/post-detail.sub.vue   |   2 +-
 .../app/desktop/views/components/post-detail.vue   |  42 +++---
 .../app/desktop/views/components/posts.post.vue    |  43 +++---
 .../desktop/views/components/sub-post-content.vue  |   2 +-
 .../app/mobile/views/components/post-detail.vue    |  37 ++---
 src/client/app/mobile/views/components/post.vue    |  45 +++---
 .../mobile/views/components/sub-post-content.vue   |   2 +-
 src/common/text/parse/index.ts                     |   2 +-
 14 files changed, 324 insertions(+), 213 deletions(-)
 create mode 100644 src/client/app/common/views/components/post-html.ts
 delete mode 100644 src/client/app/common/views/components/post-html.vue
 create mode 100644 src/client/app/common/views/components/url.vue

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 8c10bdee28..b58ba37ecb 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -4,7 +4,7 @@ import signin from './signin.vue';
 import signup from './signup.vue';
 import forkit from './forkit.vue';
 import nav from './nav.vue';
-import postHtml from './post-html.vue';
+import postHtml from './post-html';
 import poll from './poll.vue';
 import pollEditor from './poll-editor.vue';
 import reactionIcon from './reaction-icon.vue';
diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue
index 25ceab85a1..91af26bffe 100644
--- a/src/client/app/common/views/components/messaging-room.message.vue
+++ b/src/client/app/common/views/components/messaging-room.message.vue
@@ -4,13 +4,13 @@
 		<img class="avatar" :src="`${message.user.avatarUrl}?thumbnail&size=80`" alt=""/>
 	</router-link>
 	<div class="content">
-		<div class="balloon" :data-no-text="message.textHtml == null">
+		<div class="balloon" :data-no-text="message.text == null">
 			<p class="read" v-if="isMe && message.isRead">%i18n:common.tags.mk-messaging-message.is-read%</p>
 			<button class="delete-button" v-if="isMe" title="%i18n:common.delete%">
 				<img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
 			</button>
 			<div class="content" v-if="!message.isDeleted">
-				<mk-post-html class="text" v-if="message.textHtml" ref="text" :html="message.textHtml" :i="os.i"/>
+				<mk-post-html class="text" v-if="message.text" ref="text" :text="message.text" :i="os.i"/>
 				<div class="file" v-if="message.file">
 					<a :href="message.file.url" target="_blank" :title="message.file.name">
 						<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"/>
@@ -35,35 +35,30 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../common/user/get-acct';
+import parse from '../../../../../common/text/parse';
 
 export default Vue.extend({
-	props: ['message'],
-	data() {
-		return {
-			urls: []
-		};
+	props: {
+		message: {
+			required: true
+		}
 	},
 	computed: {
-		acct() {
+		acct(): string {
 			return getAcct(this.message.user);
 		},
 		isMe(): boolean {
 			return this.message.userId == (this as any).os.i.id;
-		}
-	},
-	watch: {
-		message: {
-			handler(newMessage, oldMessage) {
-				if (!oldMessage || newMessage.textHtml !== oldMessage.textHtml) {
-					this.$nextTick(() => {
-						const elements = this.$refs.text.$el.getElementsByTagName('a');
-
-						this.urls = [].filter.call(elements, ({ origin }) => origin !== location.origin)
-							.map(({ href }) => href);
-					});
-				}
-			},
-			immediate: true
+		},
+		urls(): string[] {
+			if (this.message.text) {
+				const ast = parse(this.message.text);
+				return ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
 		}
 	}
 });
diff --git a/src/client/app/common/views/components/post-html.ts b/src/client/app/common/views/components/post-html.ts
new file mode 100644
index 0000000000..c5c3b72758
--- /dev/null
+++ b/src/client/app/common/views/components/post-html.ts
@@ -0,0 +1,157 @@
+import Vue from 'vue';
+import * as emojilib from 'emojilib';
+import parse from '../../../../../common/text/parse';
+import getAcct from '../../../../../common/user/get-acct';
+import { url } from '../../../config';
+import MkUrl from './url.vue';
+
+const flatten = list => list.reduce(
+	(a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
+);
+
+export default Vue.component('mk-post-html', {
+	props: {
+		text: {
+			type: String,
+			required: true
+		},
+		ast: {
+			type: [],
+			required: false
+		},
+		shouldBreak: {
+			type: Boolean,
+			default: true
+		},
+		i: {
+			type: Object,
+			default: null
+		}
+	},
+
+	render(createElement) {
+		let ast;
+
+		if (this.ast == null) {
+			// Parse text to ast
+			ast = parse(this.text);
+		} else {
+			ast = this.ast;
+		}
+
+		// Parse ast to DOM
+		const els = flatten(ast.map(token => {
+			switch (token.type) {
+				case 'text':
+					const text = token.content.replace(/(\r\n|\n|\r)/g, '\n');
+
+					if (this.shouldBreak) {
+						const x = text.split('\n')
+							.map(t => t == '' ? [createElement('br')] : [createElement('span', t), createElement('br')]);
+						x[x.length - 1].pop();
+						return x;
+					} else {
+						return createElement('span', text.replace(/\n/g, ' '));
+					}
+
+				case 'bold':
+					return createElement('strong', token.bold);
+
+				case 'url':
+					return createElement(MkUrl, {
+						props: {
+							url: token.content,
+							target: '_blank'
+						}
+					});
+
+				case 'link':
+					return createElement('a', {
+						attrs: {
+							class: 'link',
+							href: token.url,
+							target: '_blank',
+							title: token.url
+						}
+					}, token.title);
+
+				case 'mention':
+					return (createElement as any)('a', {
+						attrs: {
+							href: `${url}/@${getAcct(token)}`,
+							target: '_blank',
+							dataIsMe: (this as any).i && getAcct((this as any).i) == getAcct(token)
+						},
+						directives: [{
+							name: 'user-preview',
+							value: token.content
+						}]
+					}, token.content);
+
+				case 'hashtag':
+					return createElement('a', {
+						attrs: {
+							href: `${url}/search?q=${token.content}`,
+							target: '_blank'
+						}
+					}, token.content);
+
+				case 'code':
+					return createElement('pre', [
+						createElement('code', {
+							domProps: {
+								innerHTML: token.html
+							}
+						})
+					]);
+
+				case 'inline-code':
+					return createElement('code', {
+						domProps: {
+							innerHTML: token.html
+						}
+					});
+
+				case 'quote':
+					const text2 = token.quote.replace(/(\r\n|\n|\r)/g, '\n');
+
+					if (this.shouldBreak) {
+						const x = text2.split('\n')
+							.map(t => [createElement('span', t), createElement('br')]);
+						x[x.length - 1].pop();
+						return createElement('div', {
+							attrs: {
+								class: 'quote'
+							}
+						}, x);
+					} else {
+						return createElement('span', {
+							attrs: {
+								class: 'quote'
+							}
+						}, text2.replace(/\n/g, ' '));
+					}
+
+				case 'emoji':
+					const emoji = emojilib.lib[token.emoji];
+					return createElement('span', emoji ? emoji.char : token.content);
+
+				default:
+					console.log('unknown ast type:', token.type);
+			}
+		}));
+
+		const _els = [];
+		els.forEach((el, i) => {
+			if (el.tag == 'br') {
+				if (els[i - 1].tag != 'div') {
+					_els.push(el);
+				}
+			} else {
+				_els.push(el);
+			}
+		});
+
+		return createElement('span', _els);
+	}
+});
diff --git a/src/client/app/common/views/components/post-html.vue b/src/client/app/common/views/components/post-html.vue
deleted file mode 100644
index 1c949052b9..0000000000
--- a/src/client/app/common/views/components/post-html.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template><div class="mk-post-html" v-html="html"></div></template>
-
-<script lang="ts">
-import Vue from 'vue';
-import getAcct from '../../../../../common/user/get-acct';
-import { url } from '../../../config';
-
-function markUrl(a) {
-	while (a.firstChild) {
-		a.removeChild(a.firstChild);
-	}
-
-	const schema = document.createElement('span');
-	const delimiter = document.createTextNode('//');
-	const host = document.createElement('span');
-	const pathname = document.createElement('span');
-	const query = document.createElement('span');
-	const hash = document.createElement('span');
-
-	schema.className = 'schema';
-	schema.textContent = a.protocol;
-
-	host.className = 'host';
-	host.textContent = a.host;
-
-	pathname.className = 'pathname';
-	pathname.textContent = a.pathname;
-
-	query.className = 'query';
-	query.textContent = a.search;
-
-	hash.className = 'hash';
-	hash.textContent = a.hash;
-
-	a.appendChild(schema);
-	a.appendChild(delimiter);
-	a.appendChild(host);
-	a.appendChild(pathname);
-	a.appendChild(query);
-	a.appendChild(hash);
-}
-
-function markMe(me, a) {
-	a.setAttribute("data-is-me", me && `${url}/@${getAcct(me)}` == a.href);
-}
-
-function markTarget(a) {
-	a.setAttribute("target", "_blank");
-}
-
-export default Vue.component('mk-post-html', {
-	props: {
-		html: {
-			type: String,
-			required: true
-		},
-		i: {
-			type: Object,
-			default: null
-		}
-	},
-	watch {
-		html: {
-			handler() {
-				this.$nextTick(() => [].forEach.call(this.$el.getElementsByTagName('a'), a => {
-					if (a.href === a.textContent) {
-						markUrl(a);
-					} else {
-						markMe((this as any).i, a);
-					}
-
-					markTarget(a);
-				}));
-			},
-			immediate: true,
-		}
-	}
-});
-</script>
-
-<style lang="stylus">
-.mk-post-html
-	a
-		word-break break-all
-
-		> .schema
-			opacity 0.5
-
-		> .host
-			font-weight bold
-
-		> .pathname
-			opacity 0.8
-
-		> .query
-			opacity 0.5
-
-		> .hash
-			font-style italic
-
-	p
-		margin 0
-</style>
diff --git a/src/client/app/common/views/components/url.vue b/src/client/app/common/views/components/url.vue
new file mode 100644
index 0000000000..e6ffe4466d
--- /dev/null
+++ b/src/client/app/common/views/components/url.vue
@@ -0,0 +1,57 @@
+<template>
+<a class="mk-url" :href="url" :target="target">
+	<span class="schema">{{ schema }}//</span>
+	<span class="hostname">{{ hostname }}</span>
+	<span class="port" v-if="port != ''">:{{ port }}</span>
+	<span class="pathname" v-if="pathname != ''">{{ pathname }}</span>
+	<span class="query">{{ query }}</span>
+	<span class="hash">{{ hash }}</span>
+	%fa:external-link-square-alt%
+</a>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['url', 'target'],
+	data() {
+		return {
+			schema: null,
+			hostname: null,
+			port: null,
+			pathname: null,
+			query: null,
+			hash: null
+		};
+	},
+	created() {
+		const url = new URL(this.url);
+		this.schema = url.protocol;
+		this.hostname = url.hostname;
+		this.port = url.port;
+		this.pathname = url.pathname;
+		this.query = url.search;
+		this.hash = url.hash;
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-url
+	word-break break-all
+	> [data-fa]
+		padding-left 2px
+		font-size .9em
+		font-weight 400
+		font-style normal
+	> .schema
+		opacity 0.5
+	> .hostname
+		font-weight bold
+	> .pathname
+		opacity 0.8
+	> .query
+		opacity 0.5
+	> .hash
+		font-style italic
+</style>
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index f379029f9f..09b090bdc1 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -15,7 +15,7 @@
 				</div>
 			</header>
 			<div class="text">
-				<mk-post-html :html="post.textHtml"/>
+				<mk-post-html :text="post.text"/>
 			</div>
 		</div>
 	</div>
diff --git a/src/client/app/desktop/views/components/post-detail.sub.vue b/src/client/app/desktop/views/components/post-detail.sub.vue
index b6148d9b28..1d5649cf92 100644
--- a/src/client/app/desktop/views/components/post-detail.sub.vue
+++ b/src/client/app/desktop/views/components/post-detail.sub.vue
@@ -16,7 +16,7 @@
 			</div>
 		</header>
 		<div class="body">
-			<mk-post-html v-if="post.textHtml" :html="post.textHtml" :i="os.i" :class="$style.text"/>
+			<mk-post-html v-if="post.text" :text="post.text" :i="os.i" :class="$style.text"/>
 			<div class="media" v-if="post.media > 0">
 				<mk-media-list :media-list="post.media"/>
 			</div>
diff --git a/src/client/app/desktop/views/components/post-detail.vue b/src/client/app/desktop/views/components/post-detail.vue
index e75ebe34b4..70bfdbba35 100644
--- a/src/client/app/desktop/views/components/post-detail.vue
+++ b/src/client/app/desktop/views/components/post-detail.vue
@@ -38,7 +38,7 @@
 			</router-link>
 		</header>
 		<div class="body">
-			<mk-post-html :class="$style.text" v-if="p.text" ref="text" :text="p.text" :i="os.i"/>
+			<mk-post-html :class="$style.text" v-if="p.text" :text="p.text" :i="os.i"/>
 			<div class="media" v-if="p.media.length > 0">
 				<mk-media-list :media-list="p.media"/>
 			</div>
@@ -79,6 +79,7 @@
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
 import getAcct from '../../../../../common/user/get-acct';
+import parse from '../../../../../common/text/parse';
 
 import MkPostFormWindow from './post-form-window.vue';
 import MkRepostFormWindow from './repost-form-window.vue';
@@ -90,6 +91,7 @@ export default Vue.extend({
 	components: {
 		XSub
 	},
+
 	props: {
 		post: {
 			type: Object,
@@ -99,19 +101,15 @@ export default Vue.extend({
 			default: false
 		}
 	},
-	computed: {
-		acct() {
-			return getAcct(this.post.user);
-		}
-	},
+
 	data() {
 		return {
 			context: [],
 			contextFetching: false,
-			replies: [],
-			urls: []
+			replies: []
 		};
 	},
+
 	computed: {
 		isRepost(): boolean {
 			return (this.post.repost &&
@@ -131,8 +129,22 @@ export default Vue.extend({
 		},
 		title(): string {
 			return dateStringify(this.p.createdAt);
+		},
+		acct(): string {
+			return getAcct(this.p.user);
+		},
+		urls(): string[] {
+			if (this.p.text) {
+				const ast = parse(this.p.text);
+				return ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
 		}
 	},
+
 	mounted() {
 		// Get replies
 		if (!this.compact) {
@@ -162,21 +174,7 @@ export default Vue.extend({
 			}
 		}
 	},
-	watch: {
-		post: {
-			handler(newPost, oldPost) {
-				if (!oldPost || newPost.text !== oldPost.text) {
-					this.$nextTick(() => {
-						const elements = this.$refs.text.$el.getElementsByTagName('a');
 
-						this.urls = [].filter.call(elements, ({ origin }) => origin !== location.origin)
-							.map(({ href }) => href);
-					});
-				}
-			},
-			immediate: true
-		}
-	},
 	methods: {
 		fetchContext() {
 			this.contextFetching = true;
diff --git a/src/client/app/desktop/views/components/posts.post.vue b/src/client/app/desktop/views/components/posts.post.vue
index f3566c81bf..c31e28d67f 100644
--- a/src/client/app/desktop/views/components/posts.post.vue
+++ b/src/client/app/desktop/views/components/posts.post.vue
@@ -38,7 +38,7 @@
 				</p>
 				<div class="text">
 					<a class="reply" v-if="p.reply">%fa:reply%</a>
-					<mk-post-html v-if="p.textHtml" ref="text" :html="p.textHtml" :i="os.i" :class="$style.text"/>
+					<mk-post-html v-if="p.textHtml" :text="p.text" :i="os.i" :class="$style.text"/>
 					<a class="rp" v-if="p.repost">RP:</a>
 				</div>
 				<div class="media" v-if="p.media.length > 0">
@@ -86,6 +86,8 @@
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
 import getAcct from '../../../../../common/user/get-acct';
+import parse from '../../../../../common/text/parse';
+
 import MkPostFormWindow from './post-form-window.vue';
 import MkRepostFormWindow from './repost-form-window.vue';
 import MkPostMenu from '../../../common/views/components/post-menu.vue';
@@ -107,17 +109,19 @@ export default Vue.extend({
 	components: {
 		XSub
 	},
+
 	props: ['post'],
+
 	data() {
 		return {
 			isDetailOpened: false,
 			connection: null,
-			connectionId: null,
-			urls: []
+			connectionId: null
 		};
 	},
+
 	computed: {
-		acct() {
+		acct(): string {
 			return getAcct(this.p.user);
 		},
 		isRepost(): boolean {
@@ -141,14 +145,26 @@ export default Vue.extend({
 		},
 		url(): string {
 			return `/@${this.acct}/${this.p.id}`;
+		},
+		urls(): string[] {
+			if (this.p.text) {
+				const ast = parse(this.p.text);
+				return ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
 		}
 	},
+
 	created() {
 		if ((this as any).os.isSignedIn) {
 			this.connection = (this as any).os.stream.getConnection();
 			this.connectionId = (this as any).os.stream.use();
 		}
 	},
+
 	mounted() {
 		this.capture(true);
 
@@ -174,6 +190,7 @@ export default Vue.extend({
 			}
 		}
 	},
+
 	beforeDestroy() {
 		this.decapture(true);
 
@@ -182,21 +199,7 @@ export default Vue.extend({
 			(this as any).os.stream.dispose(this.connectionId);
 		}
 	},
-	watch: {
-		post: {
-			handler(newPost, oldPost) {
-				if (!oldPost || newPost.textHtml !== oldPost.textHtml) {
-					this.$nextTick(() => {
-						const elements = this.$refs.text.$el.getElementsByTagName('a');
-
-						this.urls = [].filter.call(elements, ({ origin }) => origin !== location.origin)
-							.map(({ href }) => href);
-					});
-				}
-			},
-			immediate: true
-		}
-	},
+
 	methods: {
 		capture(withHandler = false) {
 			if ((this as any).os.isSignedIn) {
@@ -457,7 +460,7 @@ export default Vue.extend({
 					font-size 1.1em
 					color #717171
 
-					>>> blockquote
+					>>> .quote
 						margin 8px
 						padding 6px 12px
 						color #aaa
diff --git a/src/client/app/desktop/views/components/sub-post-content.vue b/src/client/app/desktop/views/components/sub-post-content.vue
index 58c81e7552..17899af280 100644
--- a/src/client/app/desktop/views/components/sub-post-content.vue
+++ b/src/client/app/desktop/views/components/sub-post-content.vue
@@ -2,7 +2,7 @@
 <div class="mk-sub-post-content">
 	<div class="body">
 		<a class="reply" v-if="post.replyId">%fa:reply%</a>
-		<mk-post-html ref="text" :html="post.textHtml" :i="os.i"/>
+		<mk-post-html :text="post.text" :i="os.i"/>
 		<a class="rp" v-if="post.repostId" :href="`/post:${post.repostId}`">RP: ...</a>
 	</div>
 	<details v-if="post.media.length > 0">
diff --git a/src/client/app/mobile/views/components/post-detail.vue b/src/client/app/mobile/views/components/post-detail.vue
index 77a73426f2..0a4e36fc60 100644
--- a/src/client/app/mobile/views/components/post-detail.vue
+++ b/src/client/app/mobile/views/components/post-detail.vue
@@ -81,6 +81,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../common/user/get-acct';
+import parse from '../../../../../common/text/parse';
+
 import MkPostMenu from '../../../common/views/components/post-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
 import XSub from './post-detail.sub.vue';
@@ -89,6 +91,7 @@ export default Vue.extend({
 	components: {
 		XSub
 	},
+
 	props: {
 		post: {
 			type: Object,
@@ -98,19 +101,20 @@ export default Vue.extend({
 			default: false
 		}
 	},
+
 	data() {
 		return {
 			context: [],
 			contextFetching: false,
-			replies: [],
-			urls: []
+			replies: []
 		};
 	},
+
 	computed: {
-		acct() {
+		acct(): string {
 			return getAcct(this.post.user);
 		},
-		pAcct() {
+		pAcct(): string {
 			return getAcct(this.p.user);
 		},
 		isRepost(): boolean {
@@ -128,8 +132,19 @@ export default Vue.extend({
 					.map(key => this.p.reactionCounts[key])
 					.reduce((a, b) => a + b)
 				: 0;
+		},
+		urls(): string[] {
+			if (this.p.text) {
+				const ast = parse(this.p.text);
+				return ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
 		}
 	},
+
 	mounted() {
 		// Get replies
 		if (!this.compact) {
@@ -159,21 +174,7 @@ export default Vue.extend({
 			}
 		}
 	},
-	watch: {
-		post: {
-			handler(newPost, oldPost) {
-				if (!oldPost || newPost.text !== oldPost.text) {
-					this.$nextTick(() => {
-						const elements = this.$refs.text.$el.getElementsByTagName('a');
 
-						this.urls = [].filter.call(elements, ({ origin }) => origin !== location.origin)
-							.map(({ href }) => href);
-					});
-				}
-			},
-			immediate: true
-		}
-	},
 	methods: {
 		fetchContext() {
 			this.contextFetching = true;
diff --git a/src/client/app/mobile/views/components/post.vue b/src/client/app/mobile/views/components/post.vue
index 96ec9632f1..f4f845b49a 100644
--- a/src/client/app/mobile/views/components/post.vue
+++ b/src/client/app/mobile/views/components/post.vue
@@ -37,7 +37,7 @@
 					<a class="reply" v-if="p.reply">
 						%fa:reply%
 					</a>
-					<mk-post-html v-if="p.text" ref="text" :text="p.text" :i="os.i" :class="$style.text"/>
+					<mk-post-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
 					<a class="rp" v-if="p.repost != null">RP:</a>
 				</div>
 				<div class="media" v-if="p.media.length > 0">
@@ -78,6 +78,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../common/user/get-acct';
+import parse from '../../../../../common/text/parse';
+
 import MkPostMenu from '../../../common/views/components/post-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
 import XSub from './post.sub.vue';
@@ -86,19 +88,21 @@ export default Vue.extend({
 	components: {
 		XSub
 	},
+
 	props: ['post'],
+
 	data() {
 		return {
 			connection: null,
-			connectionId: null,
-			urls: []
+			connectionId: null
 		};
 	},
+
 	computed: {
-		acct() {
+		acct(): string {
 			return getAcct(this.post.user);
 		},
-		pAcct() {
+		pAcct(): string {
 			return getAcct(this.p.user);
 		},
 		isRepost(): boolean {
@@ -119,14 +123,26 @@ export default Vue.extend({
 		},
 		url(): string {
 			return `/@${this.pAcct}/${this.p.id}`;
+		},
+		urls(): string[] {
+			if (this.p.text) {
+				const ast = parse(this.p.text);
+				return ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
 		}
 	},
+
 	created() {
 		if ((this as any).os.isSignedIn) {
 			this.connection = (this as any).os.stream.getConnection();
 			this.connectionId = (this as any).os.stream.use();
 		}
 	},
+
 	mounted() {
 		this.capture(true);
 
@@ -152,6 +168,7 @@ export default Vue.extend({
 			}
 		}
 	},
+
 	beforeDestroy() {
 		this.decapture(true);
 
@@ -160,21 +177,7 @@ export default Vue.extend({
 			(this as any).os.stream.dispose(this.connectionId);
 		}
 	},
-	watch: {
-		post: {
-			handler(newPost, oldPost) {
-				if (!oldPost || newPost.text !== oldPost.text) {
-					this.$nextTick(() => {
-						const elements = this.$refs.text.$el.getElementsByTagName('a');
-
-						this.urls = [].filter.call(elements, ({ origin }) => origin !== location.origin)
-							.map(({ href }) => href);
-					});
-				}
-			},
-			immediate: true
-		}
-	},
+
 	methods: {
 		capture(withHandler = false) {
 			if ((this as any).os.isSignedIn) {
@@ -396,7 +399,7 @@ export default Vue.extend({
 					font-size 1.1em
 					color #717171
 
-					>>> blockquote
+					>>> .quote
 						margin 8px
 						padding 6px 12px
 						color #aaa
diff --git a/src/client/app/mobile/views/components/sub-post-content.vue b/src/client/app/mobile/views/components/sub-post-content.vue
index 955bb406b4..97dd987dd7 100644
--- a/src/client/app/mobile/views/components/sub-post-content.vue
+++ b/src/client/app/mobile/views/components/sub-post-content.vue
@@ -2,7 +2,7 @@
 <div class="mk-sub-post-content">
 	<div class="body">
 		<a class="reply" v-if="post.replyId">%fa:reply%</a>
-		<mk-post-html v-if="post.text" :ast="post.text" :i="os.i"/>
+		<mk-post-html v-if="post.text" :text="post.text" :i="os.i"/>
 		<a class="rp" v-if="post.repostId">RP: ...</a>
 	</div>
 	<details v-if="post.media.length > 0">
diff --git a/src/common/text/parse/index.ts b/src/common/text/parse/index.ts
index 1e2398dc38..b958da81b0 100644
--- a/src/common/text/parse/index.ts
+++ b/src/common/text/parse/index.ts
@@ -14,7 +14,7 @@ const elements = [
 	require('./elements/emoji')
 ];
 
-export default (source: string) => {
+export default (source: string): any[] => {
 
 	if (source == '') {
 		return null;
-- 
cgit v1.3.1-freya


From a09613cdd47dbe2b68a8bc7f339103af769aaefe Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 31 Mar 2018 21:46:58 +0900
Subject: Fix bug

---
 src/client/app/desktop/views/components/post-detail.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/desktop/views/components/post-detail.vue b/src/client/app/desktop/views/components/post-detail.vue
index 70bfdbba35..d6481e13d0 100644
--- a/src/client/app/desktop/views/components/post-detail.vue
+++ b/src/client/app/desktop/views/components/post-detail.vue
@@ -27,13 +27,13 @@
 		</p>
 	</div>
 	<article>
-		<router-link class="avatar-anchor" :to="`/@${acct}`">
+		<router-link class="avatar-anchor" :to="`/@${pAcct}`">
 			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
 		</router-link>
 		<header>
-			<router-link class="name" :to="`/@${acct}`" v-user-preview="p.user.id">{{ p.user.name }}</router-link>
-			<span class="username">@{{ acct }}</span>
-			<router-link class="time" :to="`/@${acct}/${p.id}`">
+			<router-link class="name" :to="`/@${pAcct}`" v-user-preview="p.user.id">{{ p.user.name }}</router-link>
+			<span class="username">@{{ pAcct }}</span>
+			<router-link class="time" :to="`/@${pAcct}/${p.id}`">
 				<mk-time :time="p.createdAt"/>
 			</router-link>
 		</header>
@@ -131,6 +131,9 @@ export default Vue.extend({
 			return dateStringify(this.p.createdAt);
 		},
 		acct(): string {
+			return getAcct(this.post.user);
+		},
+		pAcct(): string {
 			return getAcct(this.p.user);
 		},
 		urls(): string[] {
-- 
cgit v1.3.1-freya


From b42a915172534fb1bbe66de412335d539fbc76b0 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 1 Apr 2018 15:58:32 +0900
Subject: [wip] dark mode

---
 src/client/app/desktop/views/components/ui.header.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index 7e337d2ae5..448d04d261 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -95,7 +95,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.header
+root(isDark)
 	position -webkit-sticky
 	position sticky
 	top 0
@@ -112,7 +112,7 @@ export default Vue.extend({
 			z-index 1000
 			width 100%
 			height 48px
-			background #f7f7f7
+			background isDark ? #313543 : #f7f7f7
 
 		> .main
 			z-index 1001
@@ -169,4 +169,10 @@ export default Vue.extend({
 						> .mk-ui-header-search
 							display none
 
+.header[data-is-darkmode]
+	root(true)
+
+.header
+	root(false)
+
 </style>
-- 
cgit v1.3.1-freya


From cd2542e0fd8578f6e41114ffebbda1f16f7d04ce Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 2 Apr 2018 04:15:27 +0900
Subject: Refactor

---
 src/client/app/ch/tags/channel.tag                 |   2 +-
 .../app/common/scripts/compose-notification.ts     |   4 +-
 .../app/common/views/components/autocomplete.vue   |   2 +-
 .../views/components/messaging-room.message.vue    |   2 +-
 .../app/common/views/components/messaging.vue      |   2 +-
 .../app/common/views/components/othello.game.vue   |   2 +-
 .../app/common/views/components/othello.room.vue   |   2 +-
 .../app/common/views/components/post-html.ts       |   2 +-
 .../common/views/components/welcome-timeline.vue   |   2 +-
 .../app/desktop/views/components/friends-maker.vue |   2 +-
 .../views/components/messaging-room-window.vue     |   2 +-
 .../app/desktop/views/components/notifications.vue |   4 +-
 .../desktop/views/components/post-detail.sub.vue   |   2 +-
 .../app/desktop/views/components/post-detail.vue   |   2 +-
 .../app/desktop/views/components/post-preview.vue  |   2 +-
 .../desktop/views/components/posts.post.sub.vue    |   2 +-
 .../app/desktop/views/components/posts.post.vue    |   2 +-
 .../app/desktop/views/components/settings.mute.vue |   2 +-
 .../app/desktop/views/components/user-preview.vue  |   4 +-
 .../desktop/views/components/users-list.item.vue   |   2 +-
 src/client/app/desktop/views/pages/home.vue        |   2 +-
 .../app/desktop/views/pages/messaging-room.vue     |   2 +-
 .../views/pages/user/user.followers-you-know.vue   |   2 +-
 .../app/desktop/views/pages/user/user.friends.vue  |   2 +-
 .../app/desktop/views/pages/user/user.header.vue   |   2 +-
 src/client/app/desktop/views/pages/user/user.vue   |   2 +-
 src/client/app/desktop/views/pages/welcome.vue     |   2 +-
 .../desktop/views/widgets/channel.channel.post.vue |   2 +-
 src/client/app/desktop/views/widgets/polls.vue     |   2 +-
 src/client/app/desktop/views/widgets/trends.vue    |   2 +-
 src/client/app/desktop/views/widgets/users.vue     |   2 +-
 src/client/app/mobile/api/post.ts                  |   2 +-
 .../views/components/notification-preview.vue      |   2 +-
 .../app/mobile/views/components/notification.vue   |   4 +-
 .../app/mobile/views/components/post-card.vue      |   4 +-
 .../mobile/views/components/post-detail.sub.vue    |   2 +-
 .../app/mobile/views/components/post-detail.vue    |   2 +-
 .../app/mobile/views/components/post-preview.vue   |   2 +-
 .../app/mobile/views/components/post.sub.vue       |   2 +-
 src/client/app/mobile/views/components/post.vue    |   2 +-
 .../app/mobile/views/components/user-card.vue      |   2 +-
 .../app/mobile/views/components/user-preview.vue   |   2 +-
 src/client/app/mobile/views/pages/followers.vue    |   2 +-
 src/client/app/mobile/views/pages/following.vue    |   2 +-
 src/client/app/mobile/views/pages/home.vue         |   2 +-
 .../app/mobile/views/pages/messaging-room.vue      |   2 +-
 src/client/app/mobile/views/pages/messaging.vue    |   2 +-
 src/client/app/mobile/views/pages/user.vue         |   4 +-
 .../views/pages/user/home.followers-you-know.vue   |   2 +-
 .../app/mobile/views/pages/user/home.photos.vue    |   2 +-
 src/common/drive/add-file.ts                       |   2 +-
 src/common/drive/upload-from-url.ts                |  46 ++
 src/common/drive/upload_from_url.ts                |  46 --
 src/common/get-notification-summary.ts             |  27 -
 src/common/get-post-summary.ts                     |  45 -
 src/common/get-reaction-emoji.ts                   |  14 -
 src/common/othello/ai/back.ts                      | 376 ---------
 src/common/othello/ai/front.ts                     | 233 ------
 src/common/othello/ai/index.ts                     |   1 -
 src/common/othello/core.ts                         | 340 --------
 src/common/othello/maps.ts                         | 911 ---------------------
 src/common/remote/activitypub/act/create.ts        |   9 -
 src/common/remote/activitypub/act/index.ts         |  22 -
 src/common/remote/activitypub/create.ts            |  87 --
 src/common/remote/activitypub/renderer/context.ts  |   5 -
 src/common/remote/activitypub/renderer/document.ts |   7 -
 src/common/remote/activitypub/renderer/follow.ts   |   8 -
 src/common/remote/activitypub/renderer/hashtag.ts  |   7 -
 src/common/remote/activitypub/renderer/image.ts    |   6 -
 src/common/remote/activitypub/renderer/key.ts      |  10 -
 src/common/remote/activitypub/renderer/note.ts     |  44 -
 .../activitypub/renderer/ordered-collection.ts     |   6 -
 src/common/remote/activitypub/renderer/person.ts   |  20 -
 src/common/remote/activitypub/resolve-person.ts    | 109 ---
 src/common/remote/activitypub/resolver.ts          |  97 ---
 src/common/remote/activitypub/type.ts              |   3 -
 src/common/remote/resolve-user.ts                  |  26 -
 src/common/remote/webfinger.ts                     |  25 -
 src/common/text/parse/elements/mention.ts          |   2 +-
 src/common/user/get-acct.ts                        |   3 -
 src/common/user/get-summary.ts                     |  18 -
 src/common/user/parse-acct.ts                      |   4 -
 src/misc/get-notification-summary.ts               |  27 +
 src/misc/get-post-summary.ts                       |  45 +
 src/misc/get-reaction-emoji.ts                     |  14 +
 src/misc/othello/ai/back.ts                        | 376 +++++++++
 src/misc/othello/ai/front.ts                       | 233 ++++++
 src/misc/othello/ai/index.ts                       |   1 +
 src/misc/othello/core.ts                           | 340 ++++++++
 src/misc/othello/maps.ts                           | 911 +++++++++++++++++++++
 src/misc/user/get-acct.ts                          |   3 +
 src/misc/user/get-summary.ts                       |  18 +
 src/misc/user/parse-acct.ts                        |   4 +
 src/processor/http/follow.ts                       |   4 +-
 src/processor/http/perform-activitypub.ts          |   2 +-
 src/remote/activitypub/act/create.ts               |   9 +
 src/remote/activitypub/act/index.ts                |  22 +
 src/remote/activitypub/create.ts                   |  87 ++
 src/remote/activitypub/renderer/context.ts         |   5 +
 src/remote/activitypub/renderer/document.ts        |   7 +
 src/remote/activitypub/renderer/follow.ts          |   8 +
 src/remote/activitypub/renderer/hashtag.ts         |   7 +
 src/remote/activitypub/renderer/image.ts           |   6 +
 src/remote/activitypub/renderer/key.ts             |  10 +
 src/remote/activitypub/renderer/note.ts            |  44 +
 .../activitypub/renderer/ordered-collection.ts     |   6 +
 src/remote/activitypub/renderer/person.ts          |  20 +
 src/remote/activitypub/resolve-person.ts           | 109 +++
 src/remote/activitypub/resolver.ts                 |  97 +++
 src/remote/activitypub/type.ts                     |   3 +
 src/remote/resolve-user.ts                         |  26 +
 src/remote/webfinger.ts                            |  25 +
 src/server/activitypub/inbox.ts                    |   2 +-
 src/server/activitypub/outbox.ts                   |   6 +-
 src/server/activitypub/post.ts                     |   6 +-
 src/server/activitypub/publickey.ts                |   4 +-
 src/server/activitypub/user.ts                     |   4 +-
 src/server/activitypub/with-user.ts                |   2 +-
 src/server/api/bot/core.ts                         |   8 +-
 src/server/api/bot/interfaces/line.ts              |   6 +-
 .../api/endpoints/drive/files/upload_from_url.ts   |   2 +-
 src/server/api/endpoints/othello/games/show.ts     |   2 +-
 src/server/api/endpoints/othello/match.ts          |   2 +-
 src/server/api/endpoints/posts/create.ts           |   4 +-
 src/server/api/endpoints/users/show.ts             |   2 +-
 src/server/api/limitter.ts                         |   2 +-
 src/server/api/stream/othello-game.ts              |   4 +-
 src/server/webfinger.ts                            |   2 +-
 128 files changed, 2599 insertions(+), 2599 deletions(-)
 create mode 100644 src/common/drive/upload-from-url.ts
 delete mode 100644 src/common/drive/upload_from_url.ts
 delete mode 100644 src/common/get-notification-summary.ts
 delete mode 100644 src/common/get-post-summary.ts
 delete mode 100644 src/common/get-reaction-emoji.ts
 delete mode 100644 src/common/othello/ai/back.ts
 delete mode 100644 src/common/othello/ai/front.ts
 delete mode 100644 src/common/othello/ai/index.ts
 delete mode 100644 src/common/othello/core.ts
 delete mode 100644 src/common/othello/maps.ts
 delete mode 100644 src/common/remote/activitypub/act/create.ts
 delete mode 100644 src/common/remote/activitypub/act/index.ts
 delete mode 100644 src/common/remote/activitypub/create.ts
 delete mode 100644 src/common/remote/activitypub/renderer/context.ts
 delete mode 100644 src/common/remote/activitypub/renderer/document.ts
 delete mode 100644 src/common/remote/activitypub/renderer/follow.ts
 delete mode 100644 src/common/remote/activitypub/renderer/hashtag.ts
 delete mode 100644 src/common/remote/activitypub/renderer/image.ts
 delete mode 100644 src/common/remote/activitypub/renderer/key.ts
 delete mode 100644 src/common/remote/activitypub/renderer/note.ts
 delete mode 100644 src/common/remote/activitypub/renderer/ordered-collection.ts
 delete mode 100644 src/common/remote/activitypub/renderer/person.ts
 delete mode 100644 src/common/remote/activitypub/resolve-person.ts
 delete mode 100644 src/common/remote/activitypub/resolver.ts
 delete mode 100644 src/common/remote/activitypub/type.ts
 delete mode 100644 src/common/remote/resolve-user.ts
 delete mode 100644 src/common/remote/webfinger.ts
 delete mode 100644 src/common/user/get-acct.ts
 delete mode 100644 src/common/user/get-summary.ts
 delete mode 100644 src/common/user/parse-acct.ts
 create mode 100644 src/misc/get-notification-summary.ts
 create mode 100644 src/misc/get-post-summary.ts
 create mode 100644 src/misc/get-reaction-emoji.ts
 create mode 100644 src/misc/othello/ai/back.ts
 create mode 100644 src/misc/othello/ai/front.ts
 create mode 100644 src/misc/othello/ai/index.ts
 create mode 100644 src/misc/othello/core.ts
 create mode 100644 src/misc/othello/maps.ts
 create mode 100644 src/misc/user/get-acct.ts
 create mode 100644 src/misc/user/get-summary.ts
 create mode 100644 src/misc/user/parse-acct.ts
 create mode 100644 src/remote/activitypub/act/create.ts
 create mode 100644 src/remote/activitypub/act/index.ts
 create mode 100644 src/remote/activitypub/create.ts
 create mode 100644 src/remote/activitypub/renderer/context.ts
 create mode 100644 src/remote/activitypub/renderer/document.ts
 create mode 100644 src/remote/activitypub/renderer/follow.ts
 create mode 100644 src/remote/activitypub/renderer/hashtag.ts
 create mode 100644 src/remote/activitypub/renderer/image.ts
 create mode 100644 src/remote/activitypub/renderer/key.ts
 create mode 100644 src/remote/activitypub/renderer/note.ts
 create mode 100644 src/remote/activitypub/renderer/ordered-collection.ts
 create mode 100644 src/remote/activitypub/renderer/person.ts
 create mode 100644 src/remote/activitypub/resolve-person.ts
 create mode 100644 src/remote/activitypub/resolver.ts
 create mode 100644 src/remote/activitypub/type.ts
 create mode 100644 src/remote/resolve-user.ts
 create mode 100644 src/remote/webfinger.ts

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/ch/tags/channel.tag b/src/client/app/ch/tags/channel.tag
index 2abfb106a5..70e494aedd 100644
--- a/src/client/app/ch/tags/channel.tag
+++ b/src/client/app/ch/tags/channel.tag
@@ -229,7 +229,7 @@
 
 	</style>
 	<script lang="typescript">
-		import getAcct from '../../../../common/user/get-acct';
+		import getAcct from '../../../../misc/user/get-acct';
 
 		this.post = this.opts.post;
 		this.form = this.opts.form;
diff --git a/src/client/app/common/scripts/compose-notification.ts b/src/client/app/common/scripts/compose-notification.ts
index 273579cbc6..56fbcb94fc 100644
--- a/src/client/app/common/scripts/compose-notification.ts
+++ b/src/client/app/common/scripts/compose-notification.ts
@@ -1,5 +1,5 @@
-import getPostSummary from '../../../../common/get-post-summary';
-import getReactionEmoji from '../../../../common/get-reaction-emoji';
+import getPostSummary from '../../../../misc/get-post-summary';
+import getReactionEmoji from '../../../../misc/get-reaction-emoji';
 
 type Notification = {
 	title: string;
diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index 79bd2ba023..edba470581 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -21,7 +21,7 @@
 import Vue from 'vue';
 import * as emojilib from 'emojilib';
 import contains from '../../../common/scripts/contains';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 const lib = Object.entries(emojilib.lib).filter((x: any) => {
 	return x[1].category != 'flags';
diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue
index 91af26bffe..cad6825f38 100644
--- a/src/client/app/common/views/components/messaging-room.message.vue
+++ b/src/client/app/common/views/components/messaging-room.message.vue
@@ -34,7 +34,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 import parse from '../../../../../common/text/parse';
 
 export default Vue.extend({
diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index 8317c3738a..f6709d02b4 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -51,7 +51,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: {
diff --git a/src/client/app/common/views/components/othello.game.vue b/src/client/app/common/views/components/othello.game.vue
index f08742ad10..aa5798d717 100644
--- a/src/client/app/common/views/components/othello.game.vue
+++ b/src/client/app/common/views/components/othello.game.vue
@@ -43,7 +43,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as CRC32 from 'crc-32';
-import Othello, { Color } from '../../../../../common/othello/core';
+import Othello, { Color } from '../../../../../misc/othello/core';
 import { url } from '../../../config';
 
 export default Vue.extend({
diff --git a/src/client/app/common/views/components/othello.room.vue b/src/client/app/common/views/components/othello.room.vue
index a32be6b74f..eb1d3a0c6c 100644
--- a/src/client/app/common/views/components/othello.room.vue
+++ b/src/client/app/common/views/components/othello.room.vue
@@ -94,7 +94,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import * as maps from '../../../../../common/othello/maps';
+import * as maps from '../../../../../misc/othello/maps';
 
 export default Vue.extend({
 	props: ['game', 'connection'],
diff --git a/src/client/app/common/views/components/post-html.ts b/src/client/app/common/views/components/post-html.ts
index c5c3b72758..5670ce036a 100644
--- a/src/client/app/common/views/components/post-html.ts
+++ b/src/client/app/common/views/components/post-html.ts
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import * as emojilib from 'emojilib';
 import parse from '../../../../../common/text/parse';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 import { url } from '../../../config';
 import MkUrl from './url.vue';
 
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index 09b090bdc1..036a77b1ce 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -24,7 +24,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/desktop/views/components/friends-maker.vue b/src/client/app/desktop/views/components/friends-maker.vue
index fd9914b152..68ecc6ad46 100644
--- a/src/client/app/desktop/views/components/friends-maker.vue
+++ b/src/client/app/desktop/views/components/friends-maker.vue
@@ -22,7 +22,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/desktop/views/components/messaging-room-window.vue b/src/client/app/desktop/views/components/messaging-room-window.vue
index 3735267811..6106422046 100644
--- a/src/client/app/desktop/views/components/messaging-room-window.vue
+++ b/src/client/app/desktop/views/components/messaging-room-window.vue
@@ -8,7 +8,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { url } from '../../../config';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index 5e6db08c12..79b16d048d 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -102,8 +102,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../common/user/get-acct';
-import getPostSummary from '../../../../../common/get-post-summary';
+import getAcct from '../../../../../misc/user/get-acct';
+import getPostSummary from '../../../../../misc/get-post-summary';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/desktop/views/components/post-detail.sub.vue b/src/client/app/desktop/views/components/post-detail.sub.vue
index 1d5649cf92..6fc569adaf 100644
--- a/src/client/app/desktop/views/components/post-detail.sub.vue
+++ b/src/client/app/desktop/views/components/post-detail.sub.vue
@@ -28,7 +28,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/desktop/views/components/post-detail.vue b/src/client/app/desktop/views/components/post-detail.vue
index d6481e13d0..309c88e702 100644
--- a/src/client/app/desktop/views/components/post-detail.vue
+++ b/src/client/app/desktop/views/components/post-detail.vue
@@ -78,7 +78,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 import parse from '../../../../../common/text/parse';
 
 import MkPostFormWindow from './post-form-window.vue';
diff --git a/src/client/app/desktop/views/components/post-preview.vue b/src/client/app/desktop/views/components/post-preview.vue
index 0ac3223be2..eb62e4a634 100644
--- a/src/client/app/desktop/views/components/post-preview.vue
+++ b/src/client/app/desktop/views/components/post-preview.vue
@@ -21,7 +21,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/desktop/views/components/posts.post.sub.vue b/src/client/app/desktop/views/components/posts.post.sub.vue
index 65d3017d3d..d3af0fef6a 100644
--- a/src/client/app/desktop/views/components/posts.post.sub.vue
+++ b/src/client/app/desktop/views/components/posts.post.sub.vue
@@ -21,7 +21,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/desktop/views/components/posts.post.vue b/src/client/app/desktop/views/components/posts.post.vue
index c31e28d67f..1325e3e4f9 100644
--- a/src/client/app/desktop/views/components/posts.post.vue
+++ b/src/client/app/desktop/views/components/posts.post.vue
@@ -85,7 +85,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 import parse from '../../../../../common/text/parse';
 
 import MkPostFormWindow from './post-form-window.vue';
diff --git a/src/client/app/desktop/views/components/settings.mute.vue b/src/client/app/desktop/views/components/settings.mute.vue
index a8dfe10604..ce8f4b2737 100644
--- a/src/client/app/desktop/views/components/settings.mute.vue
+++ b/src/client/app/desktop/views/components/settings.mute.vue
@@ -13,7 +13,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index 8c86b2efe8..595926a819 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -29,8 +29,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as anime from 'animejs';
-import getAcct from '../../../../../common/user/get-acct';
-import parseAcct from '../../../../../common/user/parse-acct';
+import getAcct from '../../../../../misc/user/get-acct';
+import parseAcct from '../../../../../misc/user/parse-acct';
 
 export default Vue.extend({
 	props: {
diff --git a/src/client/app/desktop/views/components/users-list.item.vue b/src/client/app/desktop/views/components/users-list.item.vue
index d2bfc117da..1c40c247ba 100644
--- a/src/client/app/desktop/views/components/users-list.item.vue
+++ b/src/client/app/desktop/views/components/users-list.item.vue
@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/desktop/views/pages/home.vue b/src/client/app/desktop/views/pages/home.vue
index 69e134f79f..fa7c19510b 100644
--- a/src/client/app/desktop/views/pages/home.vue
+++ b/src/client/app/desktop/views/pages/home.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
-import getPostSummary from '../../../../../common/get-post-summary';
+import getPostSummary from '../../../../../misc/get-post-summary';
 
 export default Vue.extend({
 	props: {
diff --git a/src/client/app/desktop/views/pages/messaging-room.vue b/src/client/app/desktop/views/pages/messaging-room.vue
index 0cab1e0d10..244b0c9047 100644
--- a/src/client/app/desktop/views/pages/messaging-room.vue
+++ b/src/client/app/desktop/views/pages/messaging-room.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
-import parseAcct from '../../../../../common/user/parse-acct';
+import parseAcct from '../../../../../misc/user/parse-acct';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
index d0dab6c3df..e898b62a0c 100644
--- a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
+++ b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
@@ -13,7 +13,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../common/user/get-acct';
+import getAcct from '../../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue
index 3ec30fb438..b13eb528ac 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../common/user/get-acct';
+import getAcct from '../../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index 54f431fd2e..32e425f86d 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -22,7 +22,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../common/user/get-acct';
+import getAcct from '../../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
index 67cef93269..6e68171a67 100644
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import parseAcct from '../../../../../../common/user/parse-acct';
+import parseAcct from '../../../../../../misc/user/parse-acct';
 import Progress from '../../../../common/scripts/loading';
 import XHeader from './user.header.vue';
 import XHome from './user.home.vue';
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 34c28854b1..93bb59765c 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -43,7 +43,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { docsUrl, copyright, lang } from '../../../config';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 const shares = [
 	'Everything!',
diff --git a/src/client/app/desktop/views/widgets/channel.channel.post.vue b/src/client/app/desktop/views/widgets/channel.channel.post.vue
index 433f9a00aa..255d9a5e67 100644
--- a/src/client/app/desktop/views/widgets/channel.channel.post.vue
+++ b/src/client/app/desktop/views/widgets/channel.channel.post.vue
@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/desktop/views/widgets/polls.vue b/src/client/app/desktop/views/widgets/polls.vue
index e5db34fc7a..fd242a04bf 100644
--- a/src/client/app/desktop/views/widgets/polls.vue
+++ b/src/client/app/desktop/views/widgets/polls.vue
@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default define({
 	name: 'polls',
diff --git a/src/client/app/desktop/views/widgets/trends.vue b/src/client/app/desktop/views/widgets/trends.vue
index 77779787ee..6b22c123be 100644
--- a/src/client/app/desktop/views/widgets/trends.vue
+++ b/src/client/app/desktop/views/widgets/trends.vue
@@ -15,7 +15,7 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default define({
 	name: 'trends',
diff --git a/src/client/app/desktop/views/widgets/users.vue b/src/client/app/desktop/views/widgets/users.vue
index 7b89441126..102739bd0b 100644
--- a/src/client/app/desktop/views/widgets/users.vue
+++ b/src/client/app/desktop/views/widgets/users.vue
@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 const limit = 3;
 
diff --git a/src/client/app/mobile/api/post.ts b/src/client/app/mobile/api/post.ts
index 841103fee1..8090bbef28 100644
--- a/src/client/app/mobile/api/post.ts
+++ b/src/client/app/mobile/api/post.ts
@@ -1,6 +1,6 @@
 import PostForm from '../views/components/post-form.vue';
 //import RepostForm from '../views/components/repost-form.vue';
-import getPostSummary from '../../../../common/get-post-summary';
+import getPostSummary from '../../../../misc/get-post-summary';
 
 export default (os) => (opts) => {
 	const o = opts || {};
diff --git a/src/client/app/mobile/views/components/notification-preview.vue b/src/client/app/mobile/views/components/notification-preview.vue
index fce9ed82f9..2a06d399c8 100644
--- a/src/client/app/mobile/views/components/notification-preview.vue
+++ b/src/client/app/mobile/views/components/notification-preview.vue
@@ -59,7 +59,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getPostSummary from '../../../../../common/get-post-summary';
+import getPostSummary from '../../../../../misc/get-post-summary';
 
 export default Vue.extend({
 	props: ['notification'],
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index e221fb3ac4..93b1e84166 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -78,8 +78,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getPostSummary from '../../../../../common/get-post-summary';
-import getAcct from '../../../../../common/user/get-acct';
+import getPostSummary from '../../../../../misc/get-post-summary';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: ['notification'],
diff --git a/src/client/app/mobile/views/components/post-card.vue b/src/client/app/mobile/views/components/post-card.vue
index 10dfd92415..3f5beb9e0f 100644
--- a/src/client/app/mobile/views/components/post-card.vue
+++ b/src/client/app/mobile/views/components/post-card.vue
@@ -14,8 +14,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import summary from '../../../../../common/get-post-summary';
-import getAcct from '../../../../../common/user/get-acct';
+import summary from '../../../../../misc/get-post-summary';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/mobile/views/components/post-detail.sub.vue b/src/client/app/mobile/views/components/post-detail.sub.vue
index db7567834a..1fca0881d5 100644
--- a/src/client/app/mobile/views/components/post-detail.sub.vue
+++ b/src/client/app/mobile/views/components/post-detail.sub.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/mobile/views/components/post-detail.vue b/src/client/app/mobile/views/components/post-detail.vue
index 0a4e36fc60..a8ebb3b01b 100644
--- a/src/client/app/mobile/views/components/post-detail.vue
+++ b/src/client/app/mobile/views/components/post-detail.vue
@@ -80,7 +80,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 import parse from '../../../../../common/text/parse';
 
 import MkPostMenu from '../../../common/views/components/post-menu.vue';
diff --git a/src/client/app/mobile/views/components/post-preview.vue b/src/client/app/mobile/views/components/post-preview.vue
index a6141dc8e3..05dd4a004f 100644
--- a/src/client/app/mobile/views/components/post-preview.vue
+++ b/src/client/app/mobile/views/components/post-preview.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/mobile/views/components/post.sub.vue b/src/client/app/mobile/views/components/post.sub.vue
index adf444a2d6..cbd2fad889 100644
--- a/src/client/app/mobile/views/components/post.sub.vue
+++ b/src/client/app/mobile/views/components/post.sub.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/mobile/views/components/post.vue b/src/client/app/mobile/views/components/post.vue
index f4f845b49a..6cf24ed6ae 100644
--- a/src/client/app/mobile/views/components/post.vue
+++ b/src/client/app/mobile/views/components/post.vue
@@ -77,7 +77,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 import parse from '../../../../../common/text/parse';
 
 import MkPostMenu from '../../../common/views/components/post-menu.vue';
diff --git a/src/client/app/mobile/views/components/user-card.vue b/src/client/app/mobile/views/components/user-card.vue
index ffa1100519..fb1b12ce58 100644
--- a/src/client/app/mobile/views/components/user-card.vue
+++ b/src/client/app/mobile/views/components/user-card.vue
@@ -13,7 +13,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/mobile/views/components/user-preview.vue b/src/client/app/mobile/views/components/user-preview.vue
index e51e4353d3..4bb8303815 100644
--- a/src/client/app/mobile/views/components/user-preview.vue
+++ b/src/client/app/mobile/views/components/user-preview.vue
@@ -17,7 +17,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/mobile/views/pages/followers.vue b/src/client/app/mobile/views/pages/followers.vue
index 8c058eb4e6..28e866efb6 100644
--- a/src/client/app/mobile/views/pages/followers.vue
+++ b/src/client/app/mobile/views/pages/followers.vue
@@ -19,7 +19,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
-import parseAcct from '../../../../../common/user/parse-acct';
+import parseAcct from '../../../../../misc/user/parse-acct';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/mobile/views/pages/following.vue b/src/client/app/mobile/views/pages/following.vue
index a73c9d1710..7ee3b86287 100644
--- a/src/client/app/mobile/views/pages/following.vue
+++ b/src/client/app/mobile/views/pages/following.vue
@@ -19,7 +19,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
-import parseAcct from '../../../../../common/user/parse-acct';
+import parseAcct from '../../../../../misc/user/parse-acct';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index f1f65f90c3..f76fdbe19b 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -64,7 +64,7 @@ import Vue from 'vue';
 import * as XDraggable from 'vuedraggable';
 import * as uuid from 'uuid';
 import Progress from '../../../common/scripts/loading';
-import getPostSummary from '../../../../../common/get-post-summary';
+import getPostSummary from '../../../../../misc/get-post-summary';
 
 export default Vue.extend({
 	components: {
diff --git a/src/client/app/mobile/views/pages/messaging-room.vue b/src/client/app/mobile/views/pages/messaging-room.vue
index 193c41179c..400f5016e1 100644
--- a/src/client/app/mobile/views/pages/messaging-room.vue
+++ b/src/client/app/mobile/views/pages/messaging-room.vue
@@ -10,7 +10,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import parseAcct from '../../../../../common/user/parse-acct';
+import parseAcct from '../../../../../misc/user/parse-acct';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/mobile/views/pages/messaging.vue b/src/client/app/mobile/views/pages/messaging.vue
index e92068eda5..7ded67cdf3 100644
--- a/src/client/app/mobile/views/pages/messaging.vue
+++ b/src/client/app/mobile/views/pages/messaging.vue
@@ -7,7 +7,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../common/user/get-acct';
+import getAcct from '../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	mounted() {
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index 114decb8e4..01eb408e6d 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -60,8 +60,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as age from 's-age';
-import getAcct from '../../../../../common/user/get-acct';
-import getAcct from '../../../../../common/user/parse-acct';
+import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../misc/user/parse-acct';
 import Progress from '../../../common/scripts/loading';
 import XHome from './user/home.vue';
 
diff --git a/src/client/app/mobile/views/pages/user/home.followers-you-know.vue b/src/client/app/mobile/views/pages/user/home.followers-you-know.vue
index 8c84d2dbba..8dc4fbb855 100644
--- a/src/client/app/mobile/views/pages/user/home.followers-you-know.vue
+++ b/src/client/app/mobile/views/pages/user/home.followers-you-know.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../common/user/get-acct';
+import getAcct from '../../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/mobile/views/pages/user/home.photos.vue b/src/client/app/mobile/views/pages/user/home.photos.vue
index f703f8a740..cc35270370 100644
--- a/src/client/app/mobile/views/pages/user/home.photos.vue
+++ b/src/client/app/mobile/views/pages/user/home.photos.vue
@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../common/user/get-acct';
+import getAcct from '../../../../../../misc/user/get-acct';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/common/drive/add-file.ts b/src/common/drive/add-file.ts
index 52a7713dd9..af85a23d23 100644
--- a/src/common/drive/add-file.ts
+++ b/src/common/drive/add-file.ts
@@ -14,7 +14,7 @@ import DriveFile, { getGridFSBucket } from '../../models/drive-file';
 import DriveFolder from '../../models/drive-folder';
 import { pack } from '../../models/drive-file';
 import event, { publishDriveStream } from '../event';
-import getAcct from '../user/get-acct';
+import getAcct from '../../misc/user/get-acct';
 import config from '../../conf';
 
 const gm = _gm.subClass({
diff --git a/src/common/drive/upload-from-url.ts b/src/common/drive/upload-from-url.ts
new file mode 100644
index 0000000000..5dd9695936
--- /dev/null
+++ b/src/common/drive/upload-from-url.ts
@@ -0,0 +1,46 @@
+import * as URL from 'url';
+import { IDriveFile, validateFileName } from '../../models/drive-file';
+import create from './add-file';
+import * as debug from 'debug';
+import * as tmp from 'tmp';
+import * as fs from 'fs';
+import * as request from 'request';
+
+const log = debug('misskey:common:drive:upload_from_url');
+
+export default async (url, user, folderId = null): Promise<IDriveFile> => {
+	let name = URL.parse(url).pathname.split('/').pop();
+	if (!validateFileName(name)) {
+		name = null;
+	}
+
+	// Create temp file
+	const path = await new Promise((res: (string) => void, rej) => {
+		tmp.file((e, path) => {
+			if (e) return rej(e);
+			res(path);
+		});
+	});
+
+	// write content at URL to temp file
+	await new Promise((res, rej) => {
+		const writable = fs.createWriteStream(path);
+		request(url)
+			.on('error', rej)
+			.on('end', () => {
+				writable.close();
+				res(path);
+			})
+			.pipe(writable)
+			.on('error', rej);
+	});
+
+	const driveFile = await create(user, path, name, null, folderId);
+
+	// clean-up
+	fs.unlink(path, (e) => {
+		if (e) log(e.stack);
+	});
+
+	return driveFile;
+};
diff --git a/src/common/drive/upload_from_url.ts b/src/common/drive/upload_from_url.ts
deleted file mode 100644
index 5dd9695936..0000000000
--- a/src/common/drive/upload_from_url.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as URL from 'url';
-import { IDriveFile, validateFileName } from '../../models/drive-file';
-import create from './add-file';
-import * as debug from 'debug';
-import * as tmp from 'tmp';
-import * as fs from 'fs';
-import * as request from 'request';
-
-const log = debug('misskey:common:drive:upload_from_url');
-
-export default async (url, user, folderId = null): Promise<IDriveFile> => {
-	let name = URL.parse(url).pathname.split('/').pop();
-	if (!validateFileName(name)) {
-		name = null;
-	}
-
-	// Create temp file
-	const path = await new Promise((res: (string) => void, rej) => {
-		tmp.file((e, path) => {
-			if (e) return rej(e);
-			res(path);
-		});
-	});
-
-	// write content at URL to temp file
-	await new Promise((res, rej) => {
-		const writable = fs.createWriteStream(path);
-		request(url)
-			.on('error', rej)
-			.on('end', () => {
-				writable.close();
-				res(path);
-			})
-			.pipe(writable)
-			.on('error', rej);
-	});
-
-	const driveFile = await create(user, path, name, null, folderId);
-
-	// clean-up
-	fs.unlink(path, (e) => {
-		if (e) log(e.stack);
-	});
-
-	return driveFile;
-};
diff --git a/src/common/get-notification-summary.ts b/src/common/get-notification-summary.ts
deleted file mode 100644
index 03db722c84..0000000000
--- a/src/common/get-notification-summary.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import getPostSummary from './get-post-summary';
-import getReactionEmoji from './get-reaction-emoji';
-
-/**
- * 通知を表す文字列を取得します。
- * @param notification 通知
- */
-export default function(notification: any): string {
-	switch (notification.type) {
-		case 'follow':
-			return `${notification.user.name}にフォローされました`;
-		case 'mention':
-			return `言及されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
-		case 'reply':
-			return `返信されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
-		case 'repost':
-			return `Repostされました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
-		case 'quote':
-			return `引用されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
-		case 'reaction':
-			return `リアクションされました:\n${notification.user.name} <${getReactionEmoji(notification.reaction)}>「${getPostSummary(notification.post)}」`;
-		case 'poll_vote':
-			return `投票されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
-		default:
-			return `<不明な通知タイプ: ${notification.type}>`;
-	}
-}
diff --git a/src/common/get-post-summary.ts b/src/common/get-post-summary.ts
deleted file mode 100644
index 8d0033064f..0000000000
--- a/src/common/get-post-summary.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * 投稿を表す文字列を取得します。
- * @param {*} post 投稿
- */
-const summarize = (post: any): string => {
-	let summary = '';
-
-	// チャンネル
-	summary += post.channel ? `${post.channel.title}:` : '';
-
-	// 本文
-	summary += post.text ? post.text : '';
-
-	// メディアが添付されているとき
-	if (post.media) {
-		summary += ` (${post.media.length}つのメディア)`;
-	}
-
-	// 投票が添付されているとき
-	if (post.poll) {
-		summary += ' (投票)';
-	}
-
-	// 返信のとき
-	if (post.replyId) {
-		if (post.reply) {
-			summary += ` RE: ${summarize(post.reply)}`;
-		} else {
-			summary += ' RE: ...';
-		}
-	}
-
-	// Repostのとき
-	if (post.repostId) {
-		if (post.repost) {
-			summary += ` RP: ${summarize(post.repost)}`;
-		} else {
-			summary += ' RP: ...';
-		}
-	}
-
-	return summary.trim();
-};
-
-export default summarize;
diff --git a/src/common/get-reaction-emoji.ts b/src/common/get-reaction-emoji.ts
deleted file mode 100644
index c661205379..0000000000
--- a/src/common/get-reaction-emoji.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export default function(reaction: string): string {
-	switch (reaction) {
-		case 'like': return '👍';
-		case 'love': return '❤️';
-		case 'laugh': return '😆';
-		case 'hmm': return '🤔';
-		case 'surprise': return '😮';
-		case 'congrats': return '🎉';
-		case 'angry': return '💢';
-		case 'confused': return '😥';
-		case 'pudding': return '🍮';
-		default: return '';
-	}
-}
diff --git a/src/common/othello/ai/back.ts b/src/common/othello/ai/back.ts
deleted file mode 100644
index 0950adaa9f..0000000000
--- a/src/common/othello/ai/back.ts
+++ /dev/null
@@ -1,376 +0,0 @@
-/**
- * -AI-
- * Botのバックエンド(思考を担当)
- *
- * 対話と思考を同じプロセスで行うと、思考時間が長引いたときにストリームから
- * 切断されてしまうので、別々のプロセスで行うようにします
- */
-
-import * as request from 'request-promise-native';
-import Othello, { Color } from '../core';
-import conf from '../../../conf';
-
-let game;
-let form;
-
-/**
- * BotアカウントのユーザーID
- */
-const id = conf.othello_ai.id;
-
-/**
- * BotアカウントのAPIキー
- */
-const i = conf.othello_ai.i;
-
-let post;
-
-process.on('message', async msg => {
-	// 親プロセスからデータをもらう
-	if (msg.type == '_init_') {
-		game = msg.game;
-		form = msg.form;
-	}
-
-	// フォームが更新されたとき
-	if (msg.type == 'update-form') {
-		form.find(i => i.id == msg.body.id).value = msg.body.value;
-	}
-
-	// ゲームが始まったとき
-	if (msg.type == 'started') {
-		onGameStarted(msg.body);
-
-		//#region TLに投稿する
-		const game = msg.body;
-		const url = `${conf.url}/othello/${game.id}`;
-		const user = game.user1Id == id ? game.user2 : game.user1;
-		const isSettai = form[0].value === 0;
-		const text = isSettai
-			? `?[${user.name}](${conf.url}/@${user.username})さんの接待を始めました！`
-			: `対局を?[${user.name}](${conf.url}/@${user.username})さんと始めました！ (強さ${form[0].value})`;
-
-		const res = await request.post(`${conf.api_url}/posts/create`, {
-			json: { i,
-				text: `${text}\n→[観戦する](${url})`
-			}
-		});
-
-		post = res.createdPost;
-		//#endregion
-	}
-
-	// ゲームが終了したとき
-	if (msg.type == 'ended') {
-		// ストリームから切断
-		process.send({
-			type: 'close'
-		});
-
-		//#region TLに投稿する
-		const user = game.user1Id == id ? game.user2 : game.user1;
-		const isSettai = form[0].value === 0;
-		const text = isSettai
-			? msg.body.winnerId === null
-				? `?[${user.name}](${conf.url}/@${user.username})さんに接待で引き分けました...`
-				: msg.body.winnerId == id
-					? `?[${user.name}](${conf.url}/@${user.username})さんに接待で勝ってしまいました...`
-					: `?[${user.name}](${conf.url}/@${user.username})さんに接待で負けてあげました♪`
-			: msg.body.winnerId === null
-				? `?[${user.name}](${conf.url}/@${user.username})さんと引き分けました～`
-				: msg.body.winnerId == id
-					? `?[${user.name}](${conf.url}/@${user.username})さんに勝ちました♪`
-					: `?[${user.name}](${conf.url}/@${user.username})さんに負けました...`;
-
-		await request.post(`${conf.api_url}/posts/create`, {
-			json: { i,
-				repostId: post.id,
-				text: text
-			}
-		});
-		//#endregion
-
-		process.exit();
-	}
-
-	// 打たれたとき
-	if (msg.type == 'set') {
-		onSet(msg.body);
-	}
-});
-
-let o: Othello;
-let botColor: Color;
-
-// 各マスの強さ
-let cellWeights;
-
-/**
- * ゲーム開始時
- * @param g ゲーム情報
- */
-function onGameStarted(g) {
-	game = g;
-
-	// オセロエンジン初期化
-	o = new Othello(game.settings.map, {
-		isLlotheo: game.settings.isLlotheo,
-		canPutEverywhere: game.settings.canPutEverywhere,
-		loopedBoard: game.settings.loopedBoard
-	});
-
-	// 各マスの価値を計算しておく
-	cellWeights = o.map.map((pix, i) => {
-		if (pix == 'null') return 0;
-		const [x, y] = o.transformPosToXy(i);
-		let count = 0;
-		const get = (x, y) => {
-			if (x < 0 || y < 0 || x >= o.mapWidth || y >= o.mapHeight) return 'null';
-			return o.mapDataGet(o.transformXyToPos(x, y));
-		};
-
-		if (get(x    , y - 1) == 'null') count++;
-		if (get(x + 1, y - 1) == 'null') count++;
-		if (get(x + 1, y    ) == 'null') count++;
-		if (get(x + 1, y + 1) == 'null') count++;
-		if (get(x    , y + 1) == 'null') count++;
-		if (get(x - 1, y + 1) == 'null') count++;
-		if (get(x - 1, y    ) == 'null') count++;
-		if (get(x - 1, y - 1) == 'null') count++;
-		//return Math.pow(count, 3);
-		return count >= 4 ? 1 : 0;
-	});
-
-	botColor = game.user1Id == id && game.black == 1 || game.user2Id == id && game.black == 2;
-
-	if (botColor) {
-		think();
-	}
-}
-
-function onSet(x) {
-	o.put(x.color, x.pos);
-
-	if (x.next === botColor) {
-		think();
-	}
-}
-
-const db = {};
-
-function think() {
-	console.log('Thinking...');
-	console.time('think');
-
-	const isSettai = form[0].value === 0;
-
-	// 接待モードのときは、全力(5手先読みくらい)で負けるようにする
-	const maxDepth = isSettai ? 5 : form[0].value;
-
-	/**
-	 * Botにとってある局面がどれだけ有利か取得する
-	 */
-	function staticEval() {
-		let score = o.canPutSomewhere(botColor).length;
-
-		cellWeights.forEach((weight, i) => {
-			// 係数
-			const coefficient = 30;
-			weight = weight * coefficient;
-
-			const stone = o.board[i];
-			if (stone === botColor) {
-				// TODO: 価値のあるマスに設置されている自分の石に縦か横に接するマスは価値があると判断する
-				score += weight;
-			} else if (stone !== null) {
-				score -= weight;
-			}
-		});
-
-		// ロセオならスコアを反転
-		if (game.settings.isLlotheo) score = -score;
-
-		// 接待ならスコアを反転
-		if (isSettai) score = -score;
-
-		return score;
-	}
-
-	/**
-	 * αβ法での探索
-	 */
-	const dive = (pos: number, alpha = -Infinity, beta = Infinity, depth = 0): number => {
-		// 試し打ち
-		o.put(o.turn, pos);
-
-		const key = o.board.toString();
-		let cache = db[key];
-		if (cache) {
-			if (alpha >= cache.upper) {
-				o.undo();
-				return cache.upper;
-			}
-			if (beta <= cache.lower) {
-				o.undo();
-				return cache.lower;
-			}
-			alpha = Math.max(alpha, cache.lower);
-			beta = Math.min(beta, cache.upper);
-		} else {
-			cache = {
-				upper: Infinity,
-				lower: -Infinity
-			};
-		}
-
-		const isBotTurn = o.turn === botColor;
-
-		// 勝った
-		if (o.turn === null) {
-			const winner = o.winner;
-
-			// 勝つことによる基本スコア
-			const base = 10000;
-
-			let score;
-
-			if (game.settings.isLlotheo) {
-				// 勝ちは勝ちでも、より自分の石を少なくした方が美しい勝ちだと判定する
-				score = o.winner ? base - (o.blackCount * 100) : base - (o.whiteCount * 100);
-			} else {
-				// 勝ちは勝ちでも、より相手の石を少なくした方が美しい勝ちだと判定する
-				score = o.winner ? base + (o.blackCount * 100) : base + (o.whiteCount * 100);
-			}
-
-			// 巻き戻し
-			o.undo();
-
-			// 接待なら自分が負けた方が高スコア
-			return isSettai
-				? winner !== botColor ? score : -score
-				: winner === botColor ? score : -score;
-		}
-
-		if (depth === maxDepth) {
-			// 静的に評価
-			const score = staticEval();
-
-			// 巻き戻し
-			o.undo();
-
-			return score;
-		} else {
-			const cans = o.canPutSomewhere(o.turn);
-
-			let value = isBotTurn ? -Infinity : Infinity;
-			let a = alpha;
-			let b = beta;
-
-			// 次のターンのプレイヤーにとって最も良い手を取得
-			for (const p of cans) {
-				if (isBotTurn) {
-					const score = dive(p, a, beta, depth + 1);
-					value = Math.max(value, score);
-					a = Math.max(a, value);
-					if (value >= beta) break;
-				} else {
-					const score = dive(p, alpha, b, depth + 1);
-					value = Math.min(value, score);
-					b = Math.min(b, value);
-					if (value <= alpha) break;
-				}
-			}
-
-			// 巻き戻し
-			o.undo();
-
-			if (value <= alpha) {
-				cache.upper = value;
-			} else if (value >= beta) {
-				cache.lower = value;
-			} else {
-				cache.upper = value;
-				cache.lower = value;
-			}
-
-			db[key] = cache;
-
-			return value;
-		}
-	};
-
-	/**
-	 * αβ法での探索(キャッシュ無し)(デバッグ用)
-	 */
-	const dive2 = (pos: number, alpha = -Infinity, beta = Infinity, depth = 0): number => {
-		// 試し打ち
-		o.put(o.turn, pos);
-
-		const isBotTurn = o.turn === botColor;
-
-		// 勝った
-		if (o.turn === null) {
-			const winner = o.winner;
-
-			// 勝つことによる基本スコア
-			const base = 10000;
-
-			let score;
-
-			if (game.settings.isLlotheo) {
-				// 勝ちは勝ちでも、より自分の石を少なくした方が美しい勝ちだと判定する
-				score = o.winner ? base - (o.blackCount * 100) : base - (o.whiteCount * 100);
-			} else {
-				// 勝ちは勝ちでも、より相手の石を少なくした方が美しい勝ちだと判定する
-				score = o.winner ? base + (o.blackCount * 100) : base + (o.whiteCount * 100);
-			}
-
-			// 巻き戻し
-			o.undo();
-
-			// 接待なら自分が負けた方が高スコア
-			return isSettai
-				? winner !== botColor ? score : -score
-				: winner === botColor ? score : -score;
-		}
-
-		if (depth === maxDepth) {
-			// 静的に評価
-			const score = staticEval();
-
-			// 巻き戻し
-			o.undo();
-
-			return score;
-		} else {
-			const cans = o.canPutSomewhere(o.turn);
-
-			// 次のターンのプレイヤーにとって最も良い手を取得
-			for (const p of cans) {
-				if (isBotTurn) {
-					alpha = Math.max(alpha, dive2(p, alpha, beta, depth + 1));
-				} else {
-					beta = Math.min(beta, dive2(p, alpha, beta, depth + 1));
-				}
-				if (alpha >= beta) break;
-			}
-
-			// 巻き戻し
-			o.undo();
-
-			return isBotTurn ? alpha : beta;
-		}
-	};
-
-	const cans = o.canPutSomewhere(botColor);
-	const scores = cans.map(p => dive(p));
-	const pos = cans[scores.indexOf(Math.max(...scores))];
-
-	console.log('Thinked:', pos);
-	console.timeEnd('think');
-
-	process.send({
-		type: 'put',
-		pos
-	});
-}
diff --git a/src/common/othello/ai/front.ts b/src/common/othello/ai/front.ts
deleted file mode 100644
index e5496132f6..0000000000
--- a/src/common/othello/ai/front.ts
+++ /dev/null
@@ -1,233 +0,0 @@
-/**
- * -AI-
- * Botのフロントエンド(ストリームとの対話を担当)
- *
- * 対話と思考を同じプロセスで行うと、思考時間が長引いたときにストリームから
- * 切断されてしまうので、別々のプロセスで行うようにします
- */
-
-import * as childProcess from 'child_process';
-const WebSocket = require('ws');
-import * as ReconnectingWebSocket from 'reconnecting-websocket';
-import * as request from 'request-promise-native';
-import conf from '../../../conf';
-
-// 設定 ////////////////////////////////////////////////////////
-
-/**
- * BotアカウントのAPIキー
- */
-const i = conf.othello_ai.i;
-
-/**
- * BotアカウントのユーザーID
- */
-const id = conf.othello_ai.id;
-
-////////////////////////////////////////////////////////////////
-
-/**
- * ホームストリーム
- */
-const homeStream = new ReconnectingWebSocket(`${conf.ws_url}/?i=${i}`, undefined, {
-	constructor: WebSocket
-});
-
-homeStream.on('open', () => {
-	console.log('home stream opened');
-});
-
-homeStream.on('close', () => {
-	console.log('home stream closed');
-});
-
-homeStream.on('message', message => {
-	const msg = JSON.parse(message.toString());
-
-	// タイムライン上でなんか言われたまたは返信されたとき
-	if (msg.type == 'mention' || msg.type == 'reply') {
-		const post = msg.body;
-
-		if (post.userId == id) return;
-
-		// リアクションする
-		request.post(`${conf.api_url}/posts/reactions/create`, {
-			json: { i,
-				postId: post.id,
-				reaction: 'love'
-			}
-		});
-
-		if (post.text) {
-			if (post.text.indexOf('オセロ') > -1) {
-				request.post(`${conf.api_url}/posts/create`, {
-					json: { i,
-						replyId: post.id,
-						text: '良いですよ～'
-					}
-				});
-
-				invite(post.userId);
-			}
-		}
-	}
-
-	// メッセージでなんか言われたとき
-	if (msg.type == 'messaging_message') {
-		const message = msg.body;
-		if (message.text) {
-			if (message.text.indexOf('オセロ') > -1) {
-				request.post(`${conf.api_url}/messaging/messages/create`, {
-					json: { i,
-						userId: message.userId,
-						text: '良いですよ～'
-					}
-				});
-
-				invite(message.userId);
-			}
-		}
-	}
-});
-
-// ユーザーを対局に誘う
-function invite(userId) {
-	request.post(`${conf.api_url}/othello/match`, {
-		json: { i,
-			userId: userId
-		}
-	});
-}
-
-/**
- * オセロストリーム
- */
-const othelloStream = new ReconnectingWebSocket(`${conf.ws_url}/othello?i=${i}`, undefined, {
-	constructor: WebSocket
-});
-
-othelloStream.on('open', () => {
-	console.log('othello stream opened');
-});
-
-othelloStream.on('close', () => {
-	console.log('othello stream closed');
-});
-
-othelloStream.on('message', message => {
-	const msg = JSON.parse(message.toString());
-
-	// 招待されたとき
-	if (msg.type == 'invited') {
-		onInviteMe(msg.body.parent);
-	}
-
-	// マッチしたとき
-	if (msg.type == 'matched') {
-		gameStart(msg.body);
-	}
-});
-
-/**
- * ゲーム開始
- * @param game ゲーム情報
- */
-function gameStart(game) {
-	// ゲームストリームに接続
-	const gw = new ReconnectingWebSocket(`${conf.ws_url}/othello-game?i=${i}&game=${game.id}`, undefined, {
-		constructor: WebSocket
-	});
-
-	gw.on('open', () => {
-		console.log('othello game stream opened');
-
-		// フォーム
-		const form = [{
-			id: 'strength',
-			type: 'radio',
-			label: '強さ',
-			value: 2,
-			items: [{
-				label: '接待',
-				value: 0
-			}, {
-				label: '弱',
-				value: 1
-			}, {
-				label: '中',
-				value: 2
-			}, {
-				label: '強',
-				value: 3
-			}, {
-				label: '最強',
-				value: 5
-			}]
-		}];
-
-		//#region バックエンドプロセス開始
-		const ai = childProcess.fork(__dirname + '/back.js');
-
-		// バックエンドプロセスに情報を渡す
-		ai.send({
-			type: '_init_',
-			game,
-			form
-		});
-
-		ai.on('message', msg => {
-			if (msg.type == 'put') {
-				gw.send(JSON.stringify({
-					type: 'set',
-					pos: msg.pos
-				}));
-			} else if (msg.type == 'close') {
-				gw.close();
-			}
-		});
-
-		// ゲームストリームから情報が流れてきたらそのままバックエンドプロセスに伝える
-		gw.on('message', message => {
-			const msg = JSON.parse(message.toString());
-			ai.send(msg);
-		});
-		//#endregion
-
-		// フォーム初期化
-		setTimeout(() => {
-			gw.send(JSON.stringify({
-				type: 'init-form',
-				body: form
-			}));
-		}, 1000);
-
-		// どんな設定内容の対局でも受け入れる
-		setTimeout(() => {
-			gw.send(JSON.stringify({
-				type: 'accept'
-			}));
-		}, 2000);
-	});
-
-	gw.on('close', () => {
-		console.log('othello game stream closed');
-	});
-}
-
-/**
- * オセロの対局に招待されたとき
- * @param inviter 誘ってきたユーザー
- */
-async function onInviteMe(inviter) {
-	console.log(`Someone invited me: @${inviter.username}`);
-
-	// 承認
-	const game = await request.post(`${conf.api_url}/othello/match`, {
-		json: {
-			i,
-			userId: inviter.id
-		}
-	});
-
-	gameStart(game);
-}
diff --git a/src/common/othello/ai/index.ts b/src/common/othello/ai/index.ts
deleted file mode 100644
index 5cd1db82da..0000000000
--- a/src/common/othello/ai/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-require('./front');
diff --git a/src/common/othello/core.ts b/src/common/othello/core.ts
deleted file mode 100644
index 217066d375..0000000000
--- a/src/common/othello/core.ts
+++ /dev/null
@@ -1,340 +0,0 @@
-/**
- * true ... 黒
- * false ... 白
- */
-export type Color = boolean;
-const BLACK = true;
-const WHITE = false;
-
-export type MapPixel = 'null' | 'empty';
-
-export type Options = {
-	isLlotheo: boolean;
-	canPutEverywhere: boolean;
-	loopedBoard: boolean;
-};
-
-export type Undo = {
-	/**
-	 * 色
-	 */
-	color: Color,
-
-	/**
-	 * どこに打ったか
-	 */
-	pos: number;
-
-	/**
-	 * 反転した石の位置の配列
-	 */
-	effects: number[];
-
-	/**
-	 * ターン
-	 */
-	turn: Color;
-};
-
-/**
- * オセロエンジン
- */
-export default class Othello {
-	public map: MapPixel[];
-	public mapWidth: number;
-	public mapHeight: number;
-	public board: Color[];
-	public turn: Color = BLACK;
-	public opts: Options;
-
-	public prevPos = -1;
-	public prevColor: Color = null;
-
-	private logs: Undo[] = [];
-
-	/**
-	 * ゲームを初期化します
-	 */
-	constructor(map: string[], opts: Options) {
-		//#region binds
-		this.put = this.put.bind(this);
-		//#endregion
-
-		//#region Options
-		this.opts = opts;
-		if (this.opts.isLlotheo == null) this.opts.isLlotheo = false;
-		if (this.opts.canPutEverywhere == null) this.opts.canPutEverywhere = false;
-		if (this.opts.loopedBoard == null) this.opts.loopedBoard = false;
-		//#endregion
-
-		//#region Parse map data
-		this.mapWidth = map[0].length;
-		this.mapHeight = map.length;
-		const mapData = map.join('');
-
-		this.board = mapData.split('').map(d => {
-			if (d == '-') return null;
-			if (d == 'b') return BLACK;
-			if (d == 'w') return WHITE;
-			return undefined;
-		});
-
-		this.map = mapData.split('').map(d => {
-			if (d == '-' || d == 'b' || d == 'w') return 'empty';
-			return 'null';
-		});
-		//#endregion
-
-		// ゲームが始まった時点で片方の色の石しかないか、始まった時点で勝敗が決定するようなマップの場合がある
-		if (this.canPutSomewhere(BLACK).length == 0) {
-			if (this.canPutSomewhere(WHITE).length == 0) {
-				this.turn = null;
-			} else {
-				this.turn = WHITE;
-			}
-		}
-	}
-
-	/**
-	 * 黒石の数
-	 */
-	public get blackCount() {
-		return this.board.filter(x => x === BLACK).length;
-	}
-
-	/**
-	 * 白石の数
-	 */
-	public get whiteCount() {
-		return this.board.filter(x => x === WHITE).length;
-	}
-
-	/**
-	 * 黒石の比率
-	 */
-	public get blackP() {
-		if (this.blackCount == 0 && this.whiteCount == 0) return 0;
-		return this.blackCount / (this.blackCount + this.whiteCount);
-	}
-
-	/**
-	 * 白石の比率
-	 */
-	public get whiteP() {
-		if (this.blackCount == 0 && this.whiteCount == 0) return 0;
-		return this.whiteCount / (this.blackCount + this.whiteCount);
-	}
-
-	public transformPosToXy(pos: number): number[] {
-		const x = pos % this.mapWidth;
-		const y = Math.floor(pos / this.mapWidth);
-		return [x, y];
-	}
-
-	public transformXyToPos(x: number, y: number): number {
-		return x + (y * this.mapWidth);
-	}
-
-	/**
-	 * 指定のマスに石を打ちます
-	 * @param color 石の色
-	 * @param pos 位置
-	 */
-	public put(color: Color, pos: number) {
-		this.prevPos = pos;
-		this.prevColor = color;
-
-		this.board[pos] = color;
-
-		// 反転させられる石を取得
-		const effects = this.effects(color, pos);
-
-		// 反転させる
-		for (const pos of effects) {
-			this.board[pos] = color;
-		}
-
-		const turn = this.turn;
-
-		this.logs.push({
-			color,
-			pos,
-			effects,
-			turn
-		});
-
-		this.calcTurn();
-	}
-
-	private calcTurn() {
-		// ターン計算
-		if (this.canPutSomewhere(!this.prevColor).length > 0) {
-			this.turn = !this.prevColor;
-		} else if (this.canPutSomewhere(this.prevColor).length > 0) {
-			this.turn = this.prevColor;
-		} else {
-			this.turn = null;
-		}
-	}
-
-	public undo() {
-		const undo = this.logs.pop();
-		this.prevColor = undo.color;
-		this.prevPos = undo.pos;
-		this.board[undo.pos] = null;
-		for (const pos of undo.effects) {
-			const color = this.board[pos];
-			this.board[pos] = !color;
-		}
-		this.turn = undo.turn;
-	}
-
-	/**
-	 * 指定した位置のマップデータのマスを取得します
-	 * @param pos 位置
-	 */
-	public mapDataGet(pos: number): MapPixel {
-		const [x, y] = this.transformPosToXy(pos);
-		if (x < 0 || y < 0 || x >= this.mapWidth || y >= this.mapHeight) return 'null';
-		return this.map[pos];
-	}
-
-	/**
-	 * 打つことができる場所を取得します
-	 */
-	public canPutSomewhere(color: Color): number[] {
-		const result = [];
-
-		this.board.forEach((x, i) => {
-			if (this.canPut(color, i)) result.push(i);
-		});
-
-		return result;
-	}
-
-	/**
-	 * 指定のマスに石を打つことができるかどうかを取得します
-	 * @param color 自分の色
-	 * @param pos 位置
-	 */
-	public canPut(color: Color, pos: number): boolean {
-		// 既に石が置いてある場所には打てない
-		if (this.board[pos] !== null) return false;
-
-		if (this.opts.canPutEverywhere) {
-			// 挟んでなくても置けるモード
-			return this.mapDataGet(pos) == 'empty';
-		} else {
-			// 相手の石を1つでも反転させられるか
-			return this.effects(color, pos).length !== 0;
-		}
-	}
-
-	/**
-	 * 指定のマスに石を置いた時の、反転させられる石を取得します
-	 * @param color 自分の色
-	 * @param pos 位置
-	 */
-	public effects(color: Color, pos: number): number[] {
-		const enemyColor = !color;
-
-		// ひっくり返せる石(の位置)リスト
-		let stones = [];
-
-		const initPos = pos;
-
-		// 走査
-		const iterate = (fn: (i: number) => number[]) => {
-			let i = 1;
-			const found = [];
-
-			while (true) {
-				let [x, y] = fn(i);
-
-				// 座標が指し示す位置がボード外に出たとき
-				if (this.opts.loopedBoard) {
-					if (x <  0             ) x = this.mapWidth  - ((-x) % this.mapWidth);
-					if (y <  0             ) y = this.mapHeight - ((-y) % this.mapHeight);
-					if (x >= this.mapWidth ) x = x % this.mapWidth;
-					if (y >= this.mapHeight) y = y % this.mapHeight;
-
-					// for debug
-					//if (x < 0 || y < 0 || x >= this.mapWidth || y >= this.mapHeight) {
-					//	console.log(x, y);
-					//}
-
-					// 一周して自分に帰ってきたら
-					if (this.transformXyToPos(x, y) == initPos) {
-						// ↓のコメントアウトを外すと、「現時点で自分の石が隣接していないが、
-						// そこに置いたとするとループして最終的に挟んだことになる」というケースを有効化します。(Test4のマップで違いが分かります)
-						// このケースを有効にした方が良いのか無効にした方が良いのか判断がつかなかったためとりあえず無効としておきます
-						// (あと無効な方がゲームとしておもしろそうだった)
-						stones = stones.concat(found);
-						break;
-					}
-				} else {
-					if (x == -1 || y == -1 || x == this.mapWidth || y == this.mapHeight) break;
-				}
-
-				const pos = this.transformXyToPos(x, y);
-
-				//#region 「配置不能」マスに当たった場合走査終了
-				const pixel = this.mapDataGet(pos);
-				if (pixel == 'null') break;
-				//#endregion
-
-				// 石取得
-				const stone = this.board[pos];
-
-				// 石が置かれていないマスなら走査終了
-				if (stone === null) break;
-
-				// 相手の石なら「ひっくり返せるかもリスト」に入れておく
-				if (stone === enemyColor) found.push(pos);
-
-				// 自分の石なら「ひっくり返せるかもリスト」を「ひっくり返せるリスト」に入れ、走査終了
-				if (stone === color) {
-					stones = stones.concat(found);
-					break;
-				}
-
-				i++;
-			}
-		};
-
-		const [x, y] = this.transformPosToXy(pos);
-
-		iterate(i => [x    , y - i]); // 上
-		iterate(i => [x + i, y - i]); // 右上
-		iterate(i => [x + i, y    ]); // 右
-		iterate(i => [x + i, y + i]); // 右下
-		iterate(i => [x    , y + i]); // 下
-		iterate(i => [x - i, y + i]); // 左下
-		iterate(i => [x - i, y    ]); // 左
-		iterate(i => [x - i, y - i]); // 左上
-
-		return stones;
-	}
-
-	/**
-	 * ゲームが終了したか否か
-	 */
-	public get isEnded(): boolean {
-		return this.turn === null;
-	}
-
-	/**
-	 * ゲームの勝者 (null = 引き分け)
-	 */
-	public get winner(): Color {
-		if (!this.isEnded) return undefined;
-
-		if (this.blackCount == this.whiteCount) return null;
-
-		if (this.opts.isLlotheo) {
-			return this.blackCount > this.whiteCount ? WHITE : BLACK;
-		} else {
-			return this.blackCount > this.whiteCount ? BLACK : WHITE;
-		}
-	}
-}
diff --git a/src/common/othello/maps.ts b/src/common/othello/maps.ts
deleted file mode 100644
index 68e5a446f1..0000000000
--- a/src/common/othello/maps.ts
+++ /dev/null
@@ -1,911 +0,0 @@
-/**
- * 組み込みマップ定義
- *
- * データ値:
- * (スペース) ... マス無し
- * - ... マス
- * b ... 初期配置される黒石
- * w ... 初期配置される白石
- */
-
-export type Map = {
-	name?: string;
-	category?: string;
-	author?: string;
-	data: string[];
-};
-
-export const fourfour: Map = {
-	name: '4x4',
-	category: '4x4',
-	data: [
-		'----',
-		'-wb-',
-		'-bw-',
-		'----'
-	]
-};
-
-export const sixsix: Map = {
-	name: '6x6',
-	category: '6x6',
-	data: [
-		'------',
-		'------',
-		'--wb--',
-		'--bw--',
-		'------',
-		'------'
-	]
-};
-
-export const roundedSixsix: Map = {
-	name: '6x6 rounded',
-	category: '6x6',
-	author: 'syuilo',
-	data: [
-		' ---- ',
-		'------',
-		'--wb--',
-		'--bw--',
-		'------',
-		' ---- '
-	]
-};
-
-export const roundedSixsix2: Map = {
-	name: '6x6 rounded 2',
-	category: '6x6',
-	author: 'syuilo',
-	data: [
-		'  --  ',
-		' ---- ',
-		'--wb--',
-		'--bw--',
-		' ---- ',
-		'  --  '
-	]
-};
-
-export const eighteight: Map = {
-	name: '8x8',
-	category: '8x8',
-	data: [
-		'--------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const eighteightH1: Map = {
-	name: '8x8 handicap 1',
-	category: '8x8',
-	data: [
-		'b-------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const eighteightH2: Map = {
-	name: '8x8 handicap 2',
-	category: '8x8',
-	data: [
-		'b-------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'-------b'
-	]
-};
-
-export const eighteightH3: Map = {
-	name: '8x8 handicap 3',
-	category: '8x8',
-	data: [
-		'b------b',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'-------b'
-	]
-};
-
-export const eighteightH4: Map = {
-	name: '8x8 handicap 4',
-	category: '8x8',
-	data: [
-		'b------b',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'b------b'
-	]
-};
-
-export const eighteightH12: Map = {
-	name: '8x8 handicap 12',
-	category: '8x8',
-	data: [
-		'bb----bb',
-		'b------b',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'b------b',
-		'bb----bb'
-	]
-};
-
-export const eighteightH16: Map = {
-	name: '8x8 handicap 16',
-	category: '8x8',
-	data: [
-		'bbb---bb',
-		'b------b',
-		'-------b',
-		'---wb---',
-		'---bw---',
-		'b-------',
-		'b------b',
-		'bb---bbb'
-	]
-};
-
-export const eighteightH20: Map = {
-	name: '8x8 handicap 20',
-	category: '8x8',
-	data: [
-		'bbb--bbb',
-		'b------b',
-		'b------b',
-		'---wb---',
-		'---bw---',
-		'b------b',
-		'b------b',
-		'bbb---bb'
-	]
-};
-
-export const eighteightH28: Map = {
-	name: '8x8 handicap 28',
-	category: '8x8',
-	data: [
-		'bbbbbbbb',
-		'b------b',
-		'b------b',
-		'b--wb--b',
-		'b--bw--b',
-		'b------b',
-		'b------b',
-		'bbbbbbbb'
-	]
-};
-
-export const roundedEighteight: Map = {
-	name: '8x8 rounded',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		' ------ ',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		' ------ '
-	]
-};
-
-export const roundedEighteight2: Map = {
-	name: '8x8 rounded 2',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'  ----  ',
-		' ------ ',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		' ------ ',
-		'  ----  '
-	]
-};
-
-export const roundedEighteight3: Map = {
-	name: '8x8 rounded 3',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'   --   ',
-		'  ----  ',
-		' ------ ',
-		'---wb---',
-		'---bw---',
-		' ------ ',
-		'  ----  ',
-		'   --   '
-	]
-};
-
-export const eighteightWithNotch: Map = {
-	name: '8x8 with notch',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'---  ---',
-		'--------',
-		'--------',
-		' --wb-- ',
-		' --bw-- ',
-		'--------',
-		'--------',
-		'---  ---'
-	]
-};
-
-export const eighteightWithSomeHoles: Map = {
-	name: '8x8 with some holes',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'--- ----',
-		'----- --',
-		'-- -----',
-		'---wb---',
-		'---bw- -',
-		' -------',
-		'--- ----',
-		'--------'
-	]
-};
-
-export const circle: Map = {
-	name: 'Circle',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'   --   ',
-		' ------ ',
-		' ------ ',
-		'---wb---',
-		'---bw---',
-		' ------ ',
-		' ------ ',
-		'   --   '
-	]
-};
-
-export const smile: Map = {
-	name: 'Smile',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		' ------ ',
-		'--------',
-		'-- -- --',
-		'---wb---',
-		'-- bw --',
-		'---  ---',
-		'--------',
-		' ------ '
-	]
-};
-
-export const window: Map = {
-	name: 'Window',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'--------',
-		'-  --  -',
-		'-  --  -',
-		'---wb---',
-		'---bw---',
-		'-  --  -',
-		'-  --  -',
-		'--------'
-	]
-};
-
-export const reserved: Map = {
-	name: 'Reserved',
-	category: '8x8',
-	author: 'Aya',
-	data: [
-		'w------b',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'b------w'
-	]
-};
-
-export const x: Map = {
-	name: 'X',
-	category: '8x8',
-	author: 'Aya',
-	data: [
-		'w------b',
-		'-w----b-',
-		'--w--b--',
-		'---wb---',
-		'---bw---',
-		'--b--w--',
-		'-b----w-',
-		'b------w'
-	]
-};
-
-export const parallel: Map = {
-	name: 'Parallel',
-	category: '8x8',
-	author: 'Aya',
-	data: [
-		'--------',
-		'--------',
-		'--------',
-		'---bb---',
-		'---ww---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const lackOfBlack: Map = {
-	name: 'Lack of Black',
-	category: '8x8',
-	data: [
-		'--------',
-		'--------',
-		'--------',
-		'---w----',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const squareParty: Map = {
-	name: 'Square Party',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'--------',
-		'-wwwbbb-',
-		'-w-wb-b-',
-		'-wwwbbb-',
-		'-bbbwww-',
-		'-b-bw-w-',
-		'-bbbwww-',
-		'--------'
-	]
-};
-
-export const minesweeper: Map = {
-	name: 'Minesweeper',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'b-b--w-w',
-		'-w-wb-b-',
-		'w-b--w-b',
-		'-b-wb-w-',
-		'-w-bw-b-',
-		'b-w--b-w',
-		'-b-bw-w-',
-		'w-w--b-b'
-	]
-};
-
-export const tenthtenth: Map = {
-	name: '10x10',
-	category: '10x10',
-	data: [
-		'----------',
-		'----------',
-		'----------',
-		'----------',
-		'----wb----',
-		'----bw----',
-		'----------',
-		'----------',
-		'----------',
-		'----------'
-	]
-};
-
-export const hole: Map = {
-	name: 'The Hole',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'----------',
-		'----------',
-		'--wb--wb--',
-		'--bw--bw--',
-		'----  ----',
-		'----  ----',
-		'--wb--wb--',
-		'--bw--bw--',
-		'----------',
-		'----------'
-	]
-};
-
-export const grid: Map = {
-	name: 'Grid',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'----------',
-		'- - -- - -',
-		'----------',
-		'- - -- - -',
-		'----wb----',
-		'----bw----',
-		'- - -- - -',
-		'----------',
-		'- - -- - -',
-		'----------'
-	]
-};
-
-export const cross: Map = {
-	name: 'Cross',
-	category: '10x10',
-	author: 'Aya',
-	data: [
-		'   ----   ',
-		'   ----   ',
-		'   ----   ',
-		'----------',
-		'----wb----',
-		'----bw----',
-		'----------',
-		'   ----   ',
-		'   ----   ',
-		'   ----   '
-	]
-};
-
-export const charX: Map = {
-	name: 'Char X',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'---    ---',
-		'----  ----',
-		'----------',
-		' -------- ',
-		'  --wb--  ',
-		'  --bw--  ',
-		' -------- ',
-		'----------',
-		'----  ----',
-		'---    ---'
-	]
-};
-
-export const charY: Map = {
-	name: 'Char Y',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'---    ---',
-		'----  ----',
-		'----------',
-		' -------- ',
-		'  --wb--  ',
-		'  --bw--  ',
-		'  ------  ',
-		'  ------  ',
-		'  ------  ',
-		'  ------  '
-	]
-};
-
-export const walls: Map = {
-	name: 'Walls',
-	category: '10x10',
-	author: 'Aya',
-	data: [
-		' bbbbbbbb ',
-		'w--------w',
-		'w--------w',
-		'w--------w',
-		'w---wb---w',
-		'w---bw---w',
-		'w--------w',
-		'w--------w',
-		'w--------w',
-		' bbbbbbbb '
-	]
-};
-
-export const cpu: Map = {
-	name: 'CPU',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		' b b  b b ',
-		'w--------w',
-		' -------- ',
-		'w--------w',
-		' ---wb--- ',
-		' ---bw--- ',
-		'w--------w',
-		' -------- ',
-		'w--------w',
-		' b b  b b '
-	]
-};
-
-export const checker: Map = {
-	name: 'Checker',
-	category: '10x10',
-	author: 'Aya',
-	data: [
-		'----------',
-		'----------',
-		'----------',
-		'---wbwb---',
-		'---bwbw---',
-		'---wbwb---',
-		'---bwbw---',
-		'----------',
-		'----------',
-		'----------'
-	]
-};
-
-export const japaneseCurry: Map = {
-	name: 'Japanese curry',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'w-b-b-b-b-',
-		'-w-b-b-b-b',
-		'w-w-b-b-b-',
-		'-w-w-b-b-b',
-		'w-w-wwb-b-',
-		'-w-wbb-b-b',
-		'w-w-w-b-b-',
-		'-w-w-w-b-b',
-		'w-w-w-w-b-',
-		'-w-w-w-w-b'
-	]
-};
-
-export const mosaic: Map = {
-	name: 'Mosaic',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'- - - - - ',
-		' - - - - -',
-		'- - - - - ',
-		' - w w - -',
-		'- - b b - ',
-		' - w w - -',
-		'- - b b - ',
-		' - - - - -',
-		'- - - - - ',
-		' - - - - -',
-	]
-};
-
-export const arena: Map = {
-	name: 'Arena',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'- - -- - -',
-		' - -  - - ',
-		'- ------ -',
-		' -------- ',
-		'- --wb-- -',
-		'- --bw-- -',
-		' -------- ',
-		'- ------ -',
-		' - -  - - ',
-		'- - -- - -'
-	]
-};
-
-export const reactor: Map = {
-	name: 'Reactor',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'-w------b-',
-		'b- -  - -w',
-		'- --wb-- -',
-		'---b  w---',
-		'- b wb w -',
-		'- w bw b -',
-		'---w  b---',
-		'- --bw-- -',
-		'w- -  - -b',
-		'-b------w-'
-	]
-};
-
-export const sixeight: Map = {
-	name: '6x8',
-	category: 'Special',
-	data: [
-		'------',
-		'------',
-		'------',
-		'--wb--',
-		'--bw--',
-		'------',
-		'------',
-		'------'
-	]
-};
-
-export const spark: Map = {
-	name: 'Spark',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		' -      - ',
-		'----------',
-		' -------- ',
-		' -------- ',
-		' ---wb--- ',
-		' ---bw--- ',
-		' -------- ',
-		' -------- ',
-		'----------',
-		' -      - '
-	]
-};
-
-export const islands: Map = {
-	name: 'Islands',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'--------  ',
-		'---wb---  ',
-		'---bw---  ',
-		'--------  ',
-		'  -    -  ',
-		'  -    -  ',
-		'  --------',
-		'  --------',
-		'  --------',
-		'  --------'
-	]
-};
-
-export const galaxy: Map = {
-	name: 'Galaxy',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'   ------   ',
-		'  --www---  ',
-		' ------w--- ',
-		'---bbb--w---',
-		'--b---b-w-b-',
-		'-b--wwb-w-b-',
-		'-b-w-bww--b-',
-		'-b-w-b---b--',
-		'---w--bbb---',
-		' ---w------ ',
-		'  ---www--  ',
-		'   ------   '
-	]
-};
-
-export const triangle: Map = {
-	name: 'Triangle',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'    --    ',
-		'    --    ',
-		'   ----   ',
-		'   ----   ',
-		'  --wb--  ',
-		'  --bw--  ',
-		' -------- ',
-		' -------- ',
-		'----------',
-		'----------'
-	]
-};
-
-export const iphonex: Map = {
-	name: 'iPhone X',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		' --  -- ',
-		'--------',
-		'--------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------',
-		'--------',
-		' ------ '
-	]
-};
-
-export const dealWithIt: Map = {
-	name: 'Deal with it!',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'------------',
-		'--w-b-------',
-		' --b-w------',
-		'  --w-b---- ',
-		'   -------  '
-	]
-};
-
-export const experiment: Map = {
-	name: 'Let\'s experiment',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		' ------------ ',
-		'------wb------',
-		'------bw------',
-		'--------------',
-		'    -    -    ',
-		'------  ------',
-		'bbbbbb  wwwwww',
-		'bbbbbb  wwwwww',
-		'bbbbbb  wwwwww',
-		'bbbbbb  wwwwww',
-		'wwwwww  bbbbbb'
-	]
-};
-
-export const bigBoard: Map = {
-	name: 'Big board',
-	category: 'Special',
-	data: [
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'-------wb-------',
-		'-------bw-------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------'
-	]
-};
-
-export const twoBoard: Map = {
-	name: 'Two board',
-	category: 'Special',
-	author: 'Aya',
-	data: [
-		'-------- --------',
-		'-------- --------',
-		'-------- --------',
-		'---wb--- ---wb---',
-		'---bw--- ---bw---',
-		'-------- --------',
-		'-------- --------',
-		'-------- --------'
-	]
-};
-
-export const test1: Map = {
-	name: 'Test1',
-	category: 'Test',
-	data: [
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------'
-	]
-};
-
-export const test2: Map = {
-	name: 'Test2',
-	category: 'Test',
-	data: [
-		'------',
-		'------',
-		'-b--w-',
-		'-w--b-',
-		'-w--b-'
-	]
-};
-
-export const test3: Map = {
-	name: 'Test3',
-	category: 'Test',
-	data: [
-		'-w-',
-		'--w',
-		'w--',
-		'-w-',
-		'--w',
-		'w--',
-		'-w-',
-		'--w',
-		'w--',
-		'-w-',
-		'---',
-		'b--',
-	]
-};
-
-export const test4: Map = {
-	name: 'Test4',
-	category: 'Test',
-	data: [
-		'-w--b-',
-		'-w--b-',
-		'------',
-		'-w--b-',
-		'-w--b-'
-	]
-};
-
-// https://misskey.xyz/othello/5aaabf7fe126e10b5216ea09 64
-export const test5: Map = {
-	name: 'Test5',
-	category: 'Test',
-	data: [
-		'--wwwwww--',
-		'--wwwbwwww',
-		'-bwwbwbwww',
-		'-bwwwbwbww',
-		'-bwwbwbwbw',
-		'-bwbwbwb-w',
-		'bwbwwbbb-w',
-		'w-wbbbbb--',
-		'--w-b-w---',
-		'----------'
-	]
-};
diff --git a/src/common/remote/activitypub/act/create.ts b/src/common/remote/activitypub/act/create.ts
deleted file mode 100644
index 9eb74800ea..0000000000
--- a/src/common/remote/activitypub/act/create.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import create from '../create';
-
-export default (resolver, actor, activity) => {
-	if ('actor' in activity && actor.account.uri !== activity.actor) {
-		throw new Error();
-	}
-
-	return create(resolver, actor, activity.object);
-};
diff --git a/src/common/remote/activitypub/act/index.ts b/src/common/remote/activitypub/act/index.ts
deleted file mode 100644
index a76983638f..0000000000
--- a/src/common/remote/activitypub/act/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import create from './create';
-import createObject from '../create';
-import Resolver from '../resolver';
-
-export default (actor, value) => {
-	return new Resolver().resolve(value).then(resolved => Promise.all(resolved.map(async promisedResult => {
-		const { resolver, object } = await promisedResult;
-		const created = await (await createObject(resolver, actor, [object]))[0];
-
-		if (created !== null) {
-			return created;
-		}
-
-		switch (object.type) {
-		case 'Create':
-			return create(resolver, actor, object);
-
-		default:
-			return null;
-		}
-	})));
-};
diff --git a/src/common/remote/activitypub/create.ts b/src/common/remote/activitypub/create.ts
deleted file mode 100644
index ea780f01ea..0000000000
--- a/src/common/remote/activitypub/create.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { JSDOM } from 'jsdom';
-import config from '../../../conf';
-import Post from '../../../models/post';
-import RemoteUserObject, { IRemoteUserObject } from '../../../models/remote-user-object';
-import uploadFromUrl from '../../drive/upload_from_url';
-import Resolver from './resolver';
-const createDOMPurify = require('dompurify');
-
-function createRemoteUserObject($ref, $id, { id }) {
-	const object = { $ref, $id };
-
-	if (!id) {
-		return { object };
-	}
-
-	return RemoteUserObject.insert({ uri: id, object });
-}
-
-async function createImage(actor, object) {
-	if ('attributedTo' in object && actor.account.uri !== object.attributedTo) {
-		throw new Error();
-	}
-
-	const { _id } = await uploadFromUrl(object.url, actor);
-	return createRemoteUserObject('driveFiles.files', _id, object);
-}
-
-async function createNote(resolver, actor, object) {
-	if ('attributedTo' in object && actor.account.uri !== object.attributedTo) {
-		throw new Error();
-	}
-
-	const mediaIds = 'attachment' in object &&
-		(await Promise.all(await create(resolver, actor, object.attachment)))
-			.filter(media => media !== null && media.object.$ref === 'driveFiles.files')
-			.map(({ object }) => object.$id);
-
-	const { window } = new JSDOM(object.content);
-
-	const { _id } = await Post.insert({
-		channelId: undefined,
-		index: undefined,
-		createdAt: new Date(object.published),
-		mediaIds,
-		replyId: undefined,
-		repostId: undefined,
-		poll: undefined,
-		text: window.document.body.textContent,
-		textHtml: object.content && createDOMPurify(window).sanitize(object.content),
-		userId: actor._id,
-		appId: null,
-		viaMobile: false,
-		geo: undefined
-	});
-
-	// Register to search database
-	if (object.content && config.elasticsearch.enable) {
-		const es = require('../../db/elasticsearch');
-
-		es.index({
-			index: 'misskey',
-			type: 'post',
-			id: _id.toString(),
-			body: {
-				text: window.document.body.textContent
-			}
-		});
-	}
-
-	return createRemoteUserObject('posts', _id, object);
-}
-
-export default async function create(parentResolver: Resolver, actor, value): Promise<Array<Promise<IRemoteUserObject>>> {
-	const results = await parentResolver.resolveRemoteUserObjects(value);
-
-	return results.map(promisedResult => promisedResult.then(({ resolver, object }) => {
-		switch (object.type) {
-		case 'Image':
-			return createImage(actor, object);
-
-		case 'Note':
-			return createNote(resolver, actor, object);
-		}
-
-		return null;
-	}));
-}
diff --git a/src/common/remote/activitypub/renderer/context.ts b/src/common/remote/activitypub/renderer/context.ts
deleted file mode 100644
index b56f727ae7..0000000000
--- a/src/common/remote/activitypub/renderer/context.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export default [
-	'https://www.w3.org/ns/activitystreams',
-	'https://w3id.org/security/v1',
-	{ Hashtag: 'as:Hashtag' }
-];
diff --git a/src/common/remote/activitypub/renderer/document.ts b/src/common/remote/activitypub/renderer/document.ts
deleted file mode 100644
index 4a456416a9..0000000000
--- a/src/common/remote/activitypub/renderer/document.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import config from '../../../../conf';
-
-export default ({ _id, contentType }) => ({
-	type: 'Document',
-	mediaType: contentType,
-	url: `${config.drive_url}/${_id}`
-});
diff --git a/src/common/remote/activitypub/renderer/follow.ts b/src/common/remote/activitypub/renderer/follow.ts
deleted file mode 100644
index 86a3f8cede..0000000000
--- a/src/common/remote/activitypub/renderer/follow.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import config from '../../../../conf';
-import { IRemoteUser } from '../../../../models/user';
-
-export default ({ username }, followee: IRemoteUser) => ({
-	type: 'Follow',
-	actor: `${config.url}/@${username}`,
-	object: followee.account.uri
-});
diff --git a/src/common/remote/activitypub/renderer/hashtag.ts b/src/common/remote/activitypub/renderer/hashtag.ts
deleted file mode 100644
index ad42700204..0000000000
--- a/src/common/remote/activitypub/renderer/hashtag.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import config from '../../../../conf';
-
-export default tag => ({
-	type: 'Hashtag',
-	href: `${config.url}/search?q=#${encodeURIComponent(tag)}`,
-	name: '#' + tag
-});
diff --git a/src/common/remote/activitypub/renderer/image.ts b/src/common/remote/activitypub/renderer/image.ts
deleted file mode 100644
index 345fbbec59..0000000000
--- a/src/common/remote/activitypub/renderer/image.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import config from '../../../../conf';
-
-export default ({ _id }) => ({
-	type: 'Image',
-	url: `${config.drive_url}/${_id}`
-});
diff --git a/src/common/remote/activitypub/renderer/key.ts b/src/common/remote/activitypub/renderer/key.ts
deleted file mode 100644
index 3cac86b769..0000000000
--- a/src/common/remote/activitypub/renderer/key.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import config from '../../../../conf';
-import { extractPublic } from '../../../../crypto_key';
-import { ILocalUser } from '../../../../models/user';
-
-export default (user: ILocalUser) => ({
-	id: `${config.url}/@${user.username}/publickey`,
-	type: 'Key',
-	owner: `${config.url}/@${user.username}`,
-	publicKeyPem: extractPublic(user.account.keypair)
-});
diff --git a/src/common/remote/activitypub/renderer/note.ts b/src/common/remote/activitypub/renderer/note.ts
deleted file mode 100644
index 2fe20b2136..0000000000
--- a/src/common/remote/activitypub/renderer/note.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import renderDocument from './document';
-import renderHashtag from './hashtag';
-import config from '../../../../conf';
-import DriveFile from '../../../../models/drive-file';
-import Post from '../../../../models/post';
-import User from '../../../../models/user';
-
-export default async (user, post) => {
-	const promisedFiles = DriveFile.find({ _id: { $in: post.mediaIds } });
-	let inReplyTo;
-
-	if (post.replyId) {
-		const inReplyToPost = await Post.findOne({
-			_id: post.replyId,
-		});
-
-		if (inReplyToPost !== null) {
-			const inReplyToUser = await User.findOne({
-				_id: post.userId,
-			});
-
-			if (inReplyToUser !== null) {
-				inReplyTo = `${config.url}@${inReplyToUser.username}/${inReplyToPost._id}`;
-			}
-		}
-	} else {
-		inReplyTo = null;
-	}
-
-	const attributedTo = `${config.url}/@${user.username}`;
-
-	return {
-		id: `${attributedTo}/${post._id}`,
-		type: 'Note',
-		attributedTo,
-		content: post.textHtml,
-		published: post.createdAt.toISOString(),
-		to: 'https://www.w3.org/ns/activitystreams#Public',
-		cc: `${attributedTo}/followers`,
-		inReplyTo,
-		attachment: (await promisedFiles).map(renderDocument),
-		tag: post.tags.map(renderHashtag)
-	};
-};
diff --git a/src/common/remote/activitypub/renderer/ordered-collection.ts b/src/common/remote/activitypub/renderer/ordered-collection.ts
deleted file mode 100644
index 2ca0f77354..0000000000
--- a/src/common/remote/activitypub/renderer/ordered-collection.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export default (id, totalItems, orderedItems) => ({
-	id,
-	type: 'OrderedCollection',
-	totalItems,
-	orderedItems
-});
diff --git a/src/common/remote/activitypub/renderer/person.ts b/src/common/remote/activitypub/renderer/person.ts
deleted file mode 100644
index 7303b30385..0000000000
--- a/src/common/remote/activitypub/renderer/person.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import renderImage from './image';
-import renderKey from './key';
-import config from '../../../../conf';
-
-export default user => {
-	const id = `${config.url}/@${user.username}`;
-
-	return {
-		type: 'Person',
-		id,
-		inbox: `${id}/inbox`,
-		outbox: `${id}/outbox`,
-		preferredUsername: user.username,
-		name: user.name,
-		summary: user.description,
-		icon: user.avatarId && renderImage({ _id: user.avatarId }),
-		image: user.bannerId && renderImage({ _id: user.bannerId }),
-		publicKey: renderKey(user)
-	};
-};
diff --git a/src/common/remote/activitypub/resolve-person.ts b/src/common/remote/activitypub/resolve-person.ts
deleted file mode 100644
index 73584946e5..0000000000
--- a/src/common/remote/activitypub/resolve-person.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { JSDOM } from 'jsdom';
-import { toUnicode } from 'punycode';
-import User, { validateUsername, isValidName, isValidDescription } from '../../../models/user';
-import queue from '../../../queue';
-import webFinger from '../webfinger';
-import create from './create';
-import Resolver from './resolver';
-
-async function isCollection(collection) {
-	return ['Collection', 'OrderedCollection'].includes(collection.type);
-}
-
-export default async (value, usernameLower, hostLower, acctLower) => {
-	if (!validateUsername(usernameLower)) {
-		throw new Error();
-	}
-
-	const { resolver, object } = await new Resolver().resolveOne(value);
-
-	if (
-		object === null ||
-		object.type !== 'Person' ||
-		typeof object.preferredUsername !== 'string' ||
-		object.preferredUsername.toLowerCase() !== usernameLower ||
-		!isValidName(object.name) ||
-		!isValidDescription(object.summary)
-	) {
-		throw new Error();
-	}
-
-	const [followers, following, outbox, finger] = await Promise.all([
-		resolver.resolveOne(object.followers).then(
-			resolved => isCollection(resolved.object) ? resolved.object : null,
-			() => null
-		),
-		resolver.resolveOne(object.following).then(
-			resolved => isCollection(resolved.object) ? resolved.object : null,
-			() => null
-		),
-		resolver.resolveOne(object.outbox).then(
-			resolved => isCollection(resolved.object) ? resolved.object : null,
-			() => null
-		),
-		webFinger(object.id, acctLower),
-	]);
-
-	const summaryDOM = JSDOM.fragment(object.summary);
-
-	// Create user
-	const user = await User.insert({
-		avatarId: null,
-		bannerId: null,
-		createdAt: Date.parse(object.published),
-		description: summaryDOM.textContent,
-		followersCount: followers.totalItem,
-		followingCount: following.totalItem,
-		name: object.name,
-		postsCount: outbox.totalItem,
-		driveCapacity: 1024 * 1024 * 8, // 8MiB
-		username: object.preferredUsername,
-		usernameLower,
-		host: toUnicode(finger.subject.replace(/^.*?@/, '')),
-		hostLower,
-		account: {
-			publicKey: {
-				id: object.publicKey.id,
-				publicKeyPem: object.publicKey.publicKeyPem
-			},
-			inbox: object.inbox,
-			uri: object.id,
-		},
-	});
-
-	queue.create('http', {
-		type: 'performActivityPub',
-		actor: user._id,
-		outbox
-	}).save();
-
-	const [avatarId, bannerId] = await Promise.all([
-		object.icon,
-		object.image
-	].map(async value => {
-		if (value === undefined) {
-			return null;
-		}
-
-		try {
-			const created = await create(resolver, user, value);
-
-			await Promise.all(created.map(asyncCreated => asyncCreated.then(created => {
-				if (created !== null && created.object.$ref === 'driveFiles.files') {
-					throw created.object.$id;
-				}
-			}, () => {})));
-
-			return null;
-		} catch (id) {
-			return id;
-		}
-	}));
-
-	User.update({ _id: user._id }, { $set: { avatarId, bannerId } });
-
-	user.avatarId = avatarId;
-	user.bannerId = bannerId;
-
-	return user;
-};
diff --git a/src/common/remote/activitypub/resolver.ts b/src/common/remote/activitypub/resolver.ts
deleted file mode 100644
index a167fa1339..0000000000
--- a/src/common/remote/activitypub/resolver.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import RemoteUserObject from '../../../models/remote-user-object';
-import { IObject } from './type';
-const request = require('request-promise-native');
-
-type IResult = {
-  resolver: Resolver;
-  object: IObject;
-};
-
-export default class Resolver {
-	private requesting: Set<string>;
-
-	constructor(iterable?: Iterable<string>) {
-		this.requesting = new Set(iterable);
-	}
-
-	private async resolveUnrequestedOne(value) {
-		if (typeof value !== 'string') {
-			return { resolver: this, object: value };
-		}
-
-		const resolver = new Resolver(this.requesting);
-
-		resolver.requesting.add(value);
-
-		const object = await request({
-			url: value,
-			headers: {
-				Accept: 'application/activity+json, application/ld+json'
-			},
-			json: true
-		});
-
-		if (object === null || (
-			Array.isArray(object['@context']) ?
-				!object['@context'].includes('https://www.w3.org/ns/activitystreams') :
-				object['@context'] !== 'https://www.w3.org/ns/activitystreams'
-		)) {
-			throw new Error();
-		}
-
-		return { resolver, object };
-	}
-
-	private async resolveCollection(value) {
-		if (Array.isArray(value)) {
-			return value;
-		}
-
-		const resolved = typeof value === 'string' ?
-			await this.resolveUnrequestedOne(value) :
-			value;
-
-		switch (resolved.type) {
-		case 'Collection':
-			return resolved.items;
-
-		case 'OrderedCollection':
-			return resolved.orderedItems;
-
-		default:
-			return [resolved];
-		}
-	}
-
-	public async resolve(value): Promise<Array<Promise<IResult>>> {
-		const collection = await this.resolveCollection(value);
-
-		return collection
-			.filter(element => !this.requesting.has(element))
-			.map(this.resolveUnrequestedOne.bind(this));
-	}
-
-	public resolveOne(value) {
-		if (this.requesting.has(value)) {
-			throw new Error();
-		}
-
-		return this.resolveUnrequestedOne(value);
-	}
-
-	public async resolveRemoteUserObjects(value) {
-		const collection = await this.resolveCollection(value);
-
-		return collection.filter(element => !this.requesting.has(element)).map(element => {
-			if (typeof element === 'string') {
-				const object = RemoteUserObject.findOne({ uri: element });
-
-				if (object !== null) {
-					return object;
-				}
-			}
-
-			return this.resolveUnrequestedOne(element);
-		});
-	}
-}
diff --git a/src/common/remote/activitypub/type.ts b/src/common/remote/activitypub/type.ts
deleted file mode 100644
index 94e2c350a2..0000000000
--- a/src/common/remote/activitypub/type.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type IObject = {
-	type: string;
-};
diff --git a/src/common/remote/resolve-user.ts b/src/common/remote/resolve-user.ts
deleted file mode 100644
index 4959539da6..0000000000
--- a/src/common/remote/resolve-user.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { toUnicode, toASCII } from 'punycode';
-import User from '../../models/user';
-import resolvePerson from './activitypub/resolve-person';
-import webFinger from './webfinger';
-
-export default async (username, host, option) => {
-	const usernameLower = username.toLowerCase();
-	const hostLowerAscii = toASCII(host).toLowerCase();
-	const hostLower = toUnicode(hostLowerAscii);
-
-	let user = await User.findOne({ usernameLower, hostLower }, option);
-
-	if (user === null) {
-		const acctLower = `${usernameLower}@${hostLowerAscii}`;
-
-		const finger = await webFinger(acctLower, acctLower);
-		const self = finger.links.find(link => link.rel && link.rel.toLowerCase() === 'self');
-		if (!self) {
-			throw new Error();
-		}
-
-		user = await resolvePerson(self.href, usernameLower, hostLower, acctLower);
-	}
-
-	return user;
-};
diff --git a/src/common/remote/webfinger.ts b/src/common/remote/webfinger.ts
deleted file mode 100644
index fec5da689c..0000000000
--- a/src/common/remote/webfinger.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-const WebFinger = require('webfinger.js');
-
-const webFinger = new WebFinger({ });
-
-type ILink = {
-  href: string;
-  rel: string;
-};
-
-type IWebFinger = {
-  links: ILink[];
-  subject: string;
-};
-
-export default (query, verifier): Promise<IWebFinger> => new Promise((res, rej) => webFinger.lookup(query, (error, result) => {
-	if (error) {
-		return rej(error);
-	}
-
-	if (result.object.subject.toLowerCase().replace(/^acct:/, '') !== verifier) {
-		return rej('WebFinger verfification failed');
-	}
-
-	res(result.object);
-}));
diff --git a/src/common/text/parse/elements/mention.ts b/src/common/text/parse/elements/mention.ts
index 2025dfdaad..3c81979d0c 100644
--- a/src/common/text/parse/elements/mention.ts
+++ b/src/common/text/parse/elements/mention.ts
@@ -1,7 +1,7 @@
 /**
  * Mention
  */
-import parseAcct from '../../../../common/user/parse-acct';
+import parseAcct from '../../../../misc/user/parse-acct';
 
 module.exports = text => {
 	const match = text.match(/^(?:@[a-zA-Z0-9\-]+){1,2}/);
diff --git a/src/common/user/get-acct.ts b/src/common/user/get-acct.ts
deleted file mode 100644
index 9afb03d88b..0000000000
--- a/src/common/user/get-acct.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default user => {
-	return user.host === null ? user.username : `${user.username}@${user.host}`;
-};
diff --git a/src/common/user/get-summary.ts b/src/common/user/get-summary.ts
deleted file mode 100644
index 2c71d3eae9..0000000000
--- a/src/common/user/get-summary.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { IUser, isLocalUser } from '../../models/user';
-import getAcct from './get-acct';
-
-/**
- * ユーザーを表す文字列を取得します。
- * @param user ユーザー
- */
-export default function(user: IUser): string {
-	let string = `${user.name} (@${getAcct(user)})\n` +
-		`${user.postsCount}投稿、${user.followingCount}フォロー、${user.followersCount}フォロワー\n`;
-
-	if (isLocalUser(user)) {
-		const account = user.account;
-		string += `場所: ${account.profile.location}、誕生日: ${account.profile.birthday}\n`;
-	}
-
-	return string + `「${user.description}」`;
-}
diff --git a/src/common/user/parse-acct.ts b/src/common/user/parse-acct.ts
deleted file mode 100644
index ef1f55405d..0000000000
--- a/src/common/user/parse-acct.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export default acct => {
-	const splitted = acct.split('@', 2);
-	return { username: splitted[0], host: splitted[1] || null };
-};
diff --git a/src/misc/get-notification-summary.ts b/src/misc/get-notification-summary.ts
new file mode 100644
index 0000000000..03db722c84
--- /dev/null
+++ b/src/misc/get-notification-summary.ts
@@ -0,0 +1,27 @@
+import getPostSummary from './get-post-summary';
+import getReactionEmoji from './get-reaction-emoji';
+
+/**
+ * 通知を表す文字列を取得します。
+ * @param notification 通知
+ */
+export default function(notification: any): string {
+	switch (notification.type) {
+		case 'follow':
+			return `${notification.user.name}にフォローされました`;
+		case 'mention':
+			return `言及されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+		case 'reply':
+			return `返信されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+		case 'repost':
+			return `Repostされました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+		case 'quote':
+			return `引用されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+		case 'reaction':
+			return `リアクションされました:\n${notification.user.name} <${getReactionEmoji(notification.reaction)}>「${getPostSummary(notification.post)}」`;
+		case 'poll_vote':
+			return `投票されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+		default:
+			return `<不明な通知タイプ: ${notification.type}>`;
+	}
+}
diff --git a/src/misc/get-post-summary.ts b/src/misc/get-post-summary.ts
new file mode 100644
index 0000000000..8d0033064f
--- /dev/null
+++ b/src/misc/get-post-summary.ts
@@ -0,0 +1,45 @@
+/**
+ * 投稿を表す文字列を取得します。
+ * @param {*} post 投稿
+ */
+const summarize = (post: any): string => {
+	let summary = '';
+
+	// チャンネル
+	summary += post.channel ? `${post.channel.title}:` : '';
+
+	// 本文
+	summary += post.text ? post.text : '';
+
+	// メディアが添付されているとき
+	if (post.media) {
+		summary += ` (${post.media.length}つのメディア)`;
+	}
+
+	// 投票が添付されているとき
+	if (post.poll) {
+		summary += ' (投票)';
+	}
+
+	// 返信のとき
+	if (post.replyId) {
+		if (post.reply) {
+			summary += ` RE: ${summarize(post.reply)}`;
+		} else {
+			summary += ' RE: ...';
+		}
+	}
+
+	// Repostのとき
+	if (post.repostId) {
+		if (post.repost) {
+			summary += ` RP: ${summarize(post.repost)}`;
+		} else {
+			summary += ' RP: ...';
+		}
+	}
+
+	return summary.trim();
+};
+
+export default summarize;
diff --git a/src/misc/get-reaction-emoji.ts b/src/misc/get-reaction-emoji.ts
new file mode 100644
index 0000000000..c661205379
--- /dev/null
+++ b/src/misc/get-reaction-emoji.ts
@@ -0,0 +1,14 @@
+export default function(reaction: string): string {
+	switch (reaction) {
+		case 'like': return '👍';
+		case 'love': return '❤️';
+		case 'laugh': return '😆';
+		case 'hmm': return '🤔';
+		case 'surprise': return '😮';
+		case 'congrats': return '🎉';
+		case 'angry': return '💢';
+		case 'confused': return '😥';
+		case 'pudding': return '🍮';
+		default: return '';
+	}
+}
diff --git a/src/misc/othello/ai/back.ts b/src/misc/othello/ai/back.ts
new file mode 100644
index 0000000000..0950adaa9f
--- /dev/null
+++ b/src/misc/othello/ai/back.ts
@@ -0,0 +1,376 @@
+/**
+ * -AI-
+ * Botのバックエンド(思考を担当)
+ *
+ * 対話と思考を同じプロセスで行うと、思考時間が長引いたときにストリームから
+ * 切断されてしまうので、別々のプロセスで行うようにします
+ */
+
+import * as request from 'request-promise-native';
+import Othello, { Color } from '../core';
+import conf from '../../../conf';
+
+let game;
+let form;
+
+/**
+ * BotアカウントのユーザーID
+ */
+const id = conf.othello_ai.id;
+
+/**
+ * BotアカウントのAPIキー
+ */
+const i = conf.othello_ai.i;
+
+let post;
+
+process.on('message', async msg => {
+	// 親プロセスからデータをもらう
+	if (msg.type == '_init_') {
+		game = msg.game;
+		form = msg.form;
+	}
+
+	// フォームが更新されたとき
+	if (msg.type == 'update-form') {
+		form.find(i => i.id == msg.body.id).value = msg.body.value;
+	}
+
+	// ゲームが始まったとき
+	if (msg.type == 'started') {
+		onGameStarted(msg.body);
+
+		//#region TLに投稿する
+		const game = msg.body;
+		const url = `${conf.url}/othello/${game.id}`;
+		const user = game.user1Id == id ? game.user2 : game.user1;
+		const isSettai = form[0].value === 0;
+		const text = isSettai
+			? `?[${user.name}](${conf.url}/@${user.username})さんの接待を始めました！`
+			: `対局を?[${user.name}](${conf.url}/@${user.username})さんと始めました！ (強さ${form[0].value})`;
+
+		const res = await request.post(`${conf.api_url}/posts/create`, {
+			json: { i,
+				text: `${text}\n→[観戦する](${url})`
+			}
+		});
+
+		post = res.createdPost;
+		//#endregion
+	}
+
+	// ゲームが終了したとき
+	if (msg.type == 'ended') {
+		// ストリームから切断
+		process.send({
+			type: 'close'
+		});
+
+		//#region TLに投稿する
+		const user = game.user1Id == id ? game.user2 : game.user1;
+		const isSettai = form[0].value === 0;
+		const text = isSettai
+			? msg.body.winnerId === null
+				? `?[${user.name}](${conf.url}/@${user.username})さんに接待で引き分けました...`
+				: msg.body.winnerId == id
+					? `?[${user.name}](${conf.url}/@${user.username})さんに接待で勝ってしまいました...`
+					: `?[${user.name}](${conf.url}/@${user.username})さんに接待で負けてあげました♪`
+			: msg.body.winnerId === null
+				? `?[${user.name}](${conf.url}/@${user.username})さんと引き分けました～`
+				: msg.body.winnerId == id
+					? `?[${user.name}](${conf.url}/@${user.username})さんに勝ちました♪`
+					: `?[${user.name}](${conf.url}/@${user.username})さんに負けました...`;
+
+		await request.post(`${conf.api_url}/posts/create`, {
+			json: { i,
+				repostId: post.id,
+				text: text
+			}
+		});
+		//#endregion
+
+		process.exit();
+	}
+
+	// 打たれたとき
+	if (msg.type == 'set') {
+		onSet(msg.body);
+	}
+});
+
+let o: Othello;
+let botColor: Color;
+
+// 各マスの強さ
+let cellWeights;
+
+/**
+ * ゲーム開始時
+ * @param g ゲーム情報
+ */
+function onGameStarted(g) {
+	game = g;
+
+	// オセロエンジン初期化
+	o = new Othello(game.settings.map, {
+		isLlotheo: game.settings.isLlotheo,
+		canPutEverywhere: game.settings.canPutEverywhere,
+		loopedBoard: game.settings.loopedBoard
+	});
+
+	// 各マスの価値を計算しておく
+	cellWeights = o.map.map((pix, i) => {
+		if (pix == 'null') return 0;
+		const [x, y] = o.transformPosToXy(i);
+		let count = 0;
+		const get = (x, y) => {
+			if (x < 0 || y < 0 || x >= o.mapWidth || y >= o.mapHeight) return 'null';
+			return o.mapDataGet(o.transformXyToPos(x, y));
+		};
+
+		if (get(x    , y - 1) == 'null') count++;
+		if (get(x + 1, y - 1) == 'null') count++;
+		if (get(x + 1, y    ) == 'null') count++;
+		if (get(x + 1, y + 1) == 'null') count++;
+		if (get(x    , y + 1) == 'null') count++;
+		if (get(x - 1, y + 1) == 'null') count++;
+		if (get(x - 1, y    ) == 'null') count++;
+		if (get(x - 1, y - 1) == 'null') count++;
+		//return Math.pow(count, 3);
+		return count >= 4 ? 1 : 0;
+	});
+
+	botColor = game.user1Id == id && game.black == 1 || game.user2Id == id && game.black == 2;
+
+	if (botColor) {
+		think();
+	}
+}
+
+function onSet(x) {
+	o.put(x.color, x.pos);
+
+	if (x.next === botColor) {
+		think();
+	}
+}
+
+const db = {};
+
+function think() {
+	console.log('Thinking...');
+	console.time('think');
+
+	const isSettai = form[0].value === 0;
+
+	// 接待モードのときは、全力(5手先読みくらい)で負けるようにする
+	const maxDepth = isSettai ? 5 : form[0].value;
+
+	/**
+	 * Botにとってある局面がどれだけ有利か取得する
+	 */
+	function staticEval() {
+		let score = o.canPutSomewhere(botColor).length;
+
+		cellWeights.forEach((weight, i) => {
+			// 係数
+			const coefficient = 30;
+			weight = weight * coefficient;
+
+			const stone = o.board[i];
+			if (stone === botColor) {
+				// TODO: 価値のあるマスに設置されている自分の石に縦か横に接するマスは価値があると判断する
+				score += weight;
+			} else if (stone !== null) {
+				score -= weight;
+			}
+		});
+
+		// ロセオならスコアを反転
+		if (game.settings.isLlotheo) score = -score;
+
+		// 接待ならスコアを反転
+		if (isSettai) score = -score;
+
+		return score;
+	}
+
+	/**
+	 * αβ法での探索
+	 */
+	const dive = (pos: number, alpha = -Infinity, beta = Infinity, depth = 0): number => {
+		// 試し打ち
+		o.put(o.turn, pos);
+
+		const key = o.board.toString();
+		let cache = db[key];
+		if (cache) {
+			if (alpha >= cache.upper) {
+				o.undo();
+				return cache.upper;
+			}
+			if (beta <= cache.lower) {
+				o.undo();
+				return cache.lower;
+			}
+			alpha = Math.max(alpha, cache.lower);
+			beta = Math.min(beta, cache.upper);
+		} else {
+			cache = {
+				upper: Infinity,
+				lower: -Infinity
+			};
+		}
+
+		const isBotTurn = o.turn === botColor;
+
+		// 勝った
+		if (o.turn === null) {
+			const winner = o.winner;
+
+			// 勝つことによる基本スコア
+			const base = 10000;
+
+			let score;
+
+			if (game.settings.isLlotheo) {
+				// 勝ちは勝ちでも、より自分の石を少なくした方が美しい勝ちだと判定する
+				score = o.winner ? base - (o.blackCount * 100) : base - (o.whiteCount * 100);
+			} else {
+				// 勝ちは勝ちでも、より相手の石を少なくした方が美しい勝ちだと判定する
+				score = o.winner ? base + (o.blackCount * 100) : base + (o.whiteCount * 100);
+			}
+
+			// 巻き戻し
+			o.undo();
+
+			// 接待なら自分が負けた方が高スコア
+			return isSettai
+				? winner !== botColor ? score : -score
+				: winner === botColor ? score : -score;
+		}
+
+		if (depth === maxDepth) {
+			// 静的に評価
+			const score = staticEval();
+
+			// 巻き戻し
+			o.undo();
+
+			return score;
+		} else {
+			const cans = o.canPutSomewhere(o.turn);
+
+			let value = isBotTurn ? -Infinity : Infinity;
+			let a = alpha;
+			let b = beta;
+
+			// 次のターンのプレイヤーにとって最も良い手を取得
+			for (const p of cans) {
+				if (isBotTurn) {
+					const score = dive(p, a, beta, depth + 1);
+					value = Math.max(value, score);
+					a = Math.max(a, value);
+					if (value >= beta) break;
+				} else {
+					const score = dive(p, alpha, b, depth + 1);
+					value = Math.min(value, score);
+					b = Math.min(b, value);
+					if (value <= alpha) break;
+				}
+			}
+
+			// 巻き戻し
+			o.undo();
+
+			if (value <= alpha) {
+				cache.upper = value;
+			} else if (value >= beta) {
+				cache.lower = value;
+			} else {
+				cache.upper = value;
+				cache.lower = value;
+			}
+
+			db[key] = cache;
+
+			return value;
+		}
+	};
+
+	/**
+	 * αβ法での探索(キャッシュ無し)(デバッグ用)
+	 */
+	const dive2 = (pos: number, alpha = -Infinity, beta = Infinity, depth = 0): number => {
+		// 試し打ち
+		o.put(o.turn, pos);
+
+		const isBotTurn = o.turn === botColor;
+
+		// 勝った
+		if (o.turn === null) {
+			const winner = o.winner;
+
+			// 勝つことによる基本スコア
+			const base = 10000;
+
+			let score;
+
+			if (game.settings.isLlotheo) {
+				// 勝ちは勝ちでも、より自分の石を少なくした方が美しい勝ちだと判定する
+				score = o.winner ? base - (o.blackCount * 100) : base - (o.whiteCount * 100);
+			} else {
+				// 勝ちは勝ちでも、より相手の石を少なくした方が美しい勝ちだと判定する
+				score = o.winner ? base + (o.blackCount * 100) : base + (o.whiteCount * 100);
+			}
+
+			// 巻き戻し
+			o.undo();
+
+			// 接待なら自分が負けた方が高スコア
+			return isSettai
+				? winner !== botColor ? score : -score
+				: winner === botColor ? score : -score;
+		}
+
+		if (depth === maxDepth) {
+			// 静的に評価
+			const score = staticEval();
+
+			// 巻き戻し
+			o.undo();
+
+			return score;
+		} else {
+			const cans = o.canPutSomewhere(o.turn);
+
+			// 次のターンのプレイヤーにとって最も良い手を取得
+			for (const p of cans) {
+				if (isBotTurn) {
+					alpha = Math.max(alpha, dive2(p, alpha, beta, depth + 1));
+				} else {
+					beta = Math.min(beta, dive2(p, alpha, beta, depth + 1));
+				}
+				if (alpha >= beta) break;
+			}
+
+			// 巻き戻し
+			o.undo();
+
+			return isBotTurn ? alpha : beta;
+		}
+	};
+
+	const cans = o.canPutSomewhere(botColor);
+	const scores = cans.map(p => dive(p));
+	const pos = cans[scores.indexOf(Math.max(...scores))];
+
+	console.log('Thinked:', pos);
+	console.timeEnd('think');
+
+	process.send({
+		type: 'put',
+		pos
+	});
+}
diff --git a/src/misc/othello/ai/front.ts b/src/misc/othello/ai/front.ts
new file mode 100644
index 0000000000..e5496132f6
--- /dev/null
+++ b/src/misc/othello/ai/front.ts
@@ -0,0 +1,233 @@
+/**
+ * -AI-
+ * Botのフロントエンド(ストリームとの対話を担当)
+ *
+ * 対話と思考を同じプロセスで行うと、思考時間が長引いたときにストリームから
+ * 切断されてしまうので、別々のプロセスで行うようにします
+ */
+
+import * as childProcess from 'child_process';
+const WebSocket = require('ws');
+import * as ReconnectingWebSocket from 'reconnecting-websocket';
+import * as request from 'request-promise-native';
+import conf from '../../../conf';
+
+// 設定 ////////////////////////////////////////////////////////
+
+/**
+ * BotアカウントのAPIキー
+ */
+const i = conf.othello_ai.i;
+
+/**
+ * BotアカウントのユーザーID
+ */
+const id = conf.othello_ai.id;
+
+////////////////////////////////////////////////////////////////
+
+/**
+ * ホームストリーム
+ */
+const homeStream = new ReconnectingWebSocket(`${conf.ws_url}/?i=${i}`, undefined, {
+	constructor: WebSocket
+});
+
+homeStream.on('open', () => {
+	console.log('home stream opened');
+});
+
+homeStream.on('close', () => {
+	console.log('home stream closed');
+});
+
+homeStream.on('message', message => {
+	const msg = JSON.parse(message.toString());
+
+	// タイムライン上でなんか言われたまたは返信されたとき
+	if (msg.type == 'mention' || msg.type == 'reply') {
+		const post = msg.body;
+
+		if (post.userId == id) return;
+
+		// リアクションする
+		request.post(`${conf.api_url}/posts/reactions/create`, {
+			json: { i,
+				postId: post.id,
+				reaction: 'love'
+			}
+		});
+
+		if (post.text) {
+			if (post.text.indexOf('オセロ') > -1) {
+				request.post(`${conf.api_url}/posts/create`, {
+					json: { i,
+						replyId: post.id,
+						text: '良いですよ～'
+					}
+				});
+
+				invite(post.userId);
+			}
+		}
+	}
+
+	// メッセージでなんか言われたとき
+	if (msg.type == 'messaging_message') {
+		const message = msg.body;
+		if (message.text) {
+			if (message.text.indexOf('オセロ') > -1) {
+				request.post(`${conf.api_url}/messaging/messages/create`, {
+					json: { i,
+						userId: message.userId,
+						text: '良いですよ～'
+					}
+				});
+
+				invite(message.userId);
+			}
+		}
+	}
+});
+
+// ユーザーを対局に誘う
+function invite(userId) {
+	request.post(`${conf.api_url}/othello/match`, {
+		json: { i,
+			userId: userId
+		}
+	});
+}
+
+/**
+ * オセロストリーム
+ */
+const othelloStream = new ReconnectingWebSocket(`${conf.ws_url}/othello?i=${i}`, undefined, {
+	constructor: WebSocket
+});
+
+othelloStream.on('open', () => {
+	console.log('othello stream opened');
+});
+
+othelloStream.on('close', () => {
+	console.log('othello stream closed');
+});
+
+othelloStream.on('message', message => {
+	const msg = JSON.parse(message.toString());
+
+	// 招待されたとき
+	if (msg.type == 'invited') {
+		onInviteMe(msg.body.parent);
+	}
+
+	// マッチしたとき
+	if (msg.type == 'matched') {
+		gameStart(msg.body);
+	}
+});
+
+/**
+ * ゲーム開始
+ * @param game ゲーム情報
+ */
+function gameStart(game) {
+	// ゲームストリームに接続
+	const gw = new ReconnectingWebSocket(`${conf.ws_url}/othello-game?i=${i}&game=${game.id}`, undefined, {
+		constructor: WebSocket
+	});
+
+	gw.on('open', () => {
+		console.log('othello game stream opened');
+
+		// フォーム
+		const form = [{
+			id: 'strength',
+			type: 'radio',
+			label: '強さ',
+			value: 2,
+			items: [{
+				label: '接待',
+				value: 0
+			}, {
+				label: '弱',
+				value: 1
+			}, {
+				label: '中',
+				value: 2
+			}, {
+				label: '強',
+				value: 3
+			}, {
+				label: '最強',
+				value: 5
+			}]
+		}];
+
+		//#region バックエンドプロセス開始
+		const ai = childProcess.fork(__dirname + '/back.js');
+
+		// バックエンドプロセスに情報を渡す
+		ai.send({
+			type: '_init_',
+			game,
+			form
+		});
+
+		ai.on('message', msg => {
+			if (msg.type == 'put') {
+				gw.send(JSON.stringify({
+					type: 'set',
+					pos: msg.pos
+				}));
+			} else if (msg.type == 'close') {
+				gw.close();
+			}
+		});
+
+		// ゲームストリームから情報が流れてきたらそのままバックエンドプロセスに伝える
+		gw.on('message', message => {
+			const msg = JSON.parse(message.toString());
+			ai.send(msg);
+		});
+		//#endregion
+
+		// フォーム初期化
+		setTimeout(() => {
+			gw.send(JSON.stringify({
+				type: 'init-form',
+				body: form
+			}));
+		}, 1000);
+
+		// どんな設定内容の対局でも受け入れる
+		setTimeout(() => {
+			gw.send(JSON.stringify({
+				type: 'accept'
+			}));
+		}, 2000);
+	});
+
+	gw.on('close', () => {
+		console.log('othello game stream closed');
+	});
+}
+
+/**
+ * オセロの対局に招待されたとき
+ * @param inviter 誘ってきたユーザー
+ */
+async function onInviteMe(inviter) {
+	console.log(`Someone invited me: @${inviter.username}`);
+
+	// 承認
+	const game = await request.post(`${conf.api_url}/othello/match`, {
+		json: {
+			i,
+			userId: inviter.id
+		}
+	});
+
+	gameStart(game);
+}
diff --git a/src/misc/othello/ai/index.ts b/src/misc/othello/ai/index.ts
new file mode 100644
index 0000000000..5cd1db82da
--- /dev/null
+++ b/src/misc/othello/ai/index.ts
@@ -0,0 +1 @@
+require('./front');
diff --git a/src/misc/othello/core.ts b/src/misc/othello/core.ts
new file mode 100644
index 0000000000..217066d375
--- /dev/null
+++ b/src/misc/othello/core.ts
@@ -0,0 +1,340 @@
+/**
+ * true ... 黒
+ * false ... 白
+ */
+export type Color = boolean;
+const BLACK = true;
+const WHITE = false;
+
+export type MapPixel = 'null' | 'empty';
+
+export type Options = {
+	isLlotheo: boolean;
+	canPutEverywhere: boolean;
+	loopedBoard: boolean;
+};
+
+export type Undo = {
+	/**
+	 * 色
+	 */
+	color: Color,
+
+	/**
+	 * どこに打ったか
+	 */
+	pos: number;
+
+	/**
+	 * 反転した石の位置の配列
+	 */
+	effects: number[];
+
+	/**
+	 * ターン
+	 */
+	turn: Color;
+};
+
+/**
+ * オセロエンジン
+ */
+export default class Othello {
+	public map: MapPixel[];
+	public mapWidth: number;
+	public mapHeight: number;
+	public board: Color[];
+	public turn: Color = BLACK;
+	public opts: Options;
+
+	public prevPos = -1;
+	public prevColor: Color = null;
+
+	private logs: Undo[] = [];
+
+	/**
+	 * ゲームを初期化します
+	 */
+	constructor(map: string[], opts: Options) {
+		//#region binds
+		this.put = this.put.bind(this);
+		//#endregion
+
+		//#region Options
+		this.opts = opts;
+		if (this.opts.isLlotheo == null) this.opts.isLlotheo = false;
+		if (this.opts.canPutEverywhere == null) this.opts.canPutEverywhere = false;
+		if (this.opts.loopedBoard == null) this.opts.loopedBoard = false;
+		//#endregion
+
+		//#region Parse map data
+		this.mapWidth = map[0].length;
+		this.mapHeight = map.length;
+		const mapData = map.join('');
+
+		this.board = mapData.split('').map(d => {
+			if (d == '-') return null;
+			if (d == 'b') return BLACK;
+			if (d == 'w') return WHITE;
+			return undefined;
+		});
+
+		this.map = mapData.split('').map(d => {
+			if (d == '-' || d == 'b' || d == 'w') return 'empty';
+			return 'null';
+		});
+		//#endregion
+
+		// ゲームが始まった時点で片方の色の石しかないか、始まった時点で勝敗が決定するようなマップの場合がある
+		if (this.canPutSomewhere(BLACK).length == 0) {
+			if (this.canPutSomewhere(WHITE).length == 0) {
+				this.turn = null;
+			} else {
+				this.turn = WHITE;
+			}
+		}
+	}
+
+	/**
+	 * 黒石の数
+	 */
+	public get blackCount() {
+		return this.board.filter(x => x === BLACK).length;
+	}
+
+	/**
+	 * 白石の数
+	 */
+	public get whiteCount() {
+		return this.board.filter(x => x === WHITE).length;
+	}
+
+	/**
+	 * 黒石の比率
+	 */
+	public get blackP() {
+		if (this.blackCount == 0 && this.whiteCount == 0) return 0;
+		return this.blackCount / (this.blackCount + this.whiteCount);
+	}
+
+	/**
+	 * 白石の比率
+	 */
+	public get whiteP() {
+		if (this.blackCount == 0 && this.whiteCount == 0) return 0;
+		return this.whiteCount / (this.blackCount + this.whiteCount);
+	}
+
+	public transformPosToXy(pos: number): number[] {
+		const x = pos % this.mapWidth;
+		const y = Math.floor(pos / this.mapWidth);
+		return [x, y];
+	}
+
+	public transformXyToPos(x: number, y: number): number {
+		return x + (y * this.mapWidth);
+	}
+
+	/**
+	 * 指定のマスに石を打ちます
+	 * @param color 石の色
+	 * @param pos 位置
+	 */
+	public put(color: Color, pos: number) {
+		this.prevPos = pos;
+		this.prevColor = color;
+
+		this.board[pos] = color;
+
+		// 反転させられる石を取得
+		const effects = this.effects(color, pos);
+
+		// 反転させる
+		for (const pos of effects) {
+			this.board[pos] = color;
+		}
+
+		const turn = this.turn;
+
+		this.logs.push({
+			color,
+			pos,
+			effects,
+			turn
+		});
+
+		this.calcTurn();
+	}
+
+	private calcTurn() {
+		// ターン計算
+		if (this.canPutSomewhere(!this.prevColor).length > 0) {
+			this.turn = !this.prevColor;
+		} else if (this.canPutSomewhere(this.prevColor).length > 0) {
+			this.turn = this.prevColor;
+		} else {
+			this.turn = null;
+		}
+	}
+
+	public undo() {
+		const undo = this.logs.pop();
+		this.prevColor = undo.color;
+		this.prevPos = undo.pos;
+		this.board[undo.pos] = null;
+		for (const pos of undo.effects) {
+			const color = this.board[pos];
+			this.board[pos] = !color;
+		}
+		this.turn = undo.turn;
+	}
+
+	/**
+	 * 指定した位置のマップデータのマスを取得します
+	 * @param pos 位置
+	 */
+	public mapDataGet(pos: number): MapPixel {
+		const [x, y] = this.transformPosToXy(pos);
+		if (x < 0 || y < 0 || x >= this.mapWidth || y >= this.mapHeight) return 'null';
+		return this.map[pos];
+	}
+
+	/**
+	 * 打つことができる場所を取得します
+	 */
+	public canPutSomewhere(color: Color): number[] {
+		const result = [];
+
+		this.board.forEach((x, i) => {
+			if (this.canPut(color, i)) result.push(i);
+		});
+
+		return result;
+	}
+
+	/**
+	 * 指定のマスに石を打つことができるかどうかを取得します
+	 * @param color 自分の色
+	 * @param pos 位置
+	 */
+	public canPut(color: Color, pos: number): boolean {
+		// 既に石が置いてある場所には打てない
+		if (this.board[pos] !== null) return false;
+
+		if (this.opts.canPutEverywhere) {
+			// 挟んでなくても置けるモード
+			return this.mapDataGet(pos) == 'empty';
+		} else {
+			// 相手の石を1つでも反転させられるか
+			return this.effects(color, pos).length !== 0;
+		}
+	}
+
+	/**
+	 * 指定のマスに石を置いた時の、反転させられる石を取得します
+	 * @param color 自分の色
+	 * @param pos 位置
+	 */
+	public effects(color: Color, pos: number): number[] {
+		const enemyColor = !color;
+
+		// ひっくり返せる石(の位置)リスト
+		let stones = [];
+
+		const initPos = pos;
+
+		// 走査
+		const iterate = (fn: (i: number) => number[]) => {
+			let i = 1;
+			const found = [];
+
+			while (true) {
+				let [x, y] = fn(i);
+
+				// 座標が指し示す位置がボード外に出たとき
+				if (this.opts.loopedBoard) {
+					if (x <  0             ) x = this.mapWidth  - ((-x) % this.mapWidth);
+					if (y <  0             ) y = this.mapHeight - ((-y) % this.mapHeight);
+					if (x >= this.mapWidth ) x = x % this.mapWidth;
+					if (y >= this.mapHeight) y = y % this.mapHeight;
+
+					// for debug
+					//if (x < 0 || y < 0 || x >= this.mapWidth || y >= this.mapHeight) {
+					//	console.log(x, y);
+					//}
+
+					// 一周して自分に帰ってきたら
+					if (this.transformXyToPos(x, y) == initPos) {
+						// ↓のコメントアウトを外すと、「現時点で自分の石が隣接していないが、
+						// そこに置いたとするとループして最終的に挟んだことになる」というケースを有効化します。(Test4のマップで違いが分かります)
+						// このケースを有効にした方が良いのか無効にした方が良いのか判断がつかなかったためとりあえず無効としておきます
+						// (あと無効な方がゲームとしておもしろそうだった)
+						stones = stones.concat(found);
+						break;
+					}
+				} else {
+					if (x == -1 || y == -1 || x == this.mapWidth || y == this.mapHeight) break;
+				}
+
+				const pos = this.transformXyToPos(x, y);
+
+				//#region 「配置不能」マスに当たった場合走査終了
+				const pixel = this.mapDataGet(pos);
+				if (pixel == 'null') break;
+				//#endregion
+
+				// 石取得
+				const stone = this.board[pos];
+
+				// 石が置かれていないマスなら走査終了
+				if (stone === null) break;
+
+				// 相手の石なら「ひっくり返せるかもリスト」に入れておく
+				if (stone === enemyColor) found.push(pos);
+
+				// 自分の石なら「ひっくり返せるかもリスト」を「ひっくり返せるリスト」に入れ、走査終了
+				if (stone === color) {
+					stones = stones.concat(found);
+					break;
+				}
+
+				i++;
+			}
+		};
+
+		const [x, y] = this.transformPosToXy(pos);
+
+		iterate(i => [x    , y - i]); // 上
+		iterate(i => [x + i, y - i]); // 右上
+		iterate(i => [x + i, y    ]); // 右
+		iterate(i => [x + i, y + i]); // 右下
+		iterate(i => [x    , y + i]); // 下
+		iterate(i => [x - i, y + i]); // 左下
+		iterate(i => [x - i, y    ]); // 左
+		iterate(i => [x - i, y - i]); // 左上
+
+		return stones;
+	}
+
+	/**
+	 * ゲームが終了したか否か
+	 */
+	public get isEnded(): boolean {
+		return this.turn === null;
+	}
+
+	/**
+	 * ゲームの勝者 (null = 引き分け)
+	 */
+	public get winner(): Color {
+		if (!this.isEnded) return undefined;
+
+		if (this.blackCount == this.whiteCount) return null;
+
+		if (this.opts.isLlotheo) {
+			return this.blackCount > this.whiteCount ? WHITE : BLACK;
+		} else {
+			return this.blackCount > this.whiteCount ? BLACK : WHITE;
+		}
+	}
+}
diff --git a/src/misc/othello/maps.ts b/src/misc/othello/maps.ts
new file mode 100644
index 0000000000..68e5a446f1
--- /dev/null
+++ b/src/misc/othello/maps.ts
@@ -0,0 +1,911 @@
+/**
+ * 組み込みマップ定義
+ *
+ * データ値:
+ * (スペース) ... マス無し
+ * - ... マス
+ * b ... 初期配置される黒石
+ * w ... 初期配置される白石
+ */
+
+export type Map = {
+	name?: string;
+	category?: string;
+	author?: string;
+	data: string[];
+};
+
+export const fourfour: Map = {
+	name: '4x4',
+	category: '4x4',
+	data: [
+		'----',
+		'-wb-',
+		'-bw-',
+		'----'
+	]
+};
+
+export const sixsix: Map = {
+	name: '6x6',
+	category: '6x6',
+	data: [
+		'------',
+		'------',
+		'--wb--',
+		'--bw--',
+		'------',
+		'------'
+	]
+};
+
+export const roundedSixsix: Map = {
+	name: '6x6 rounded',
+	category: '6x6',
+	author: 'syuilo',
+	data: [
+		' ---- ',
+		'------',
+		'--wb--',
+		'--bw--',
+		'------',
+		' ---- '
+	]
+};
+
+export const roundedSixsix2: Map = {
+	name: '6x6 rounded 2',
+	category: '6x6',
+	author: 'syuilo',
+	data: [
+		'  --  ',
+		' ---- ',
+		'--wb--',
+		'--bw--',
+		' ---- ',
+		'  --  '
+	]
+};
+
+export const eighteight: Map = {
+	name: '8x8',
+	category: '8x8',
+	data: [
+		'--------',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'--------'
+	]
+};
+
+export const eighteightH1: Map = {
+	name: '8x8 handicap 1',
+	category: '8x8',
+	data: [
+		'b-------',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'--------'
+	]
+};
+
+export const eighteightH2: Map = {
+	name: '8x8 handicap 2',
+	category: '8x8',
+	data: [
+		'b-------',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'-------b'
+	]
+};
+
+export const eighteightH3: Map = {
+	name: '8x8 handicap 3',
+	category: '8x8',
+	data: [
+		'b------b',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'-------b'
+	]
+};
+
+export const eighteightH4: Map = {
+	name: '8x8 handicap 4',
+	category: '8x8',
+	data: [
+		'b------b',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'b------b'
+	]
+};
+
+export const eighteightH12: Map = {
+	name: '8x8 handicap 12',
+	category: '8x8',
+	data: [
+		'bb----bb',
+		'b------b',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'b------b',
+		'bb----bb'
+	]
+};
+
+export const eighteightH16: Map = {
+	name: '8x8 handicap 16',
+	category: '8x8',
+	data: [
+		'bbb---bb',
+		'b------b',
+		'-------b',
+		'---wb---',
+		'---bw---',
+		'b-------',
+		'b------b',
+		'bb---bbb'
+	]
+};
+
+export const eighteightH20: Map = {
+	name: '8x8 handicap 20',
+	category: '8x8',
+	data: [
+		'bbb--bbb',
+		'b------b',
+		'b------b',
+		'---wb---',
+		'---bw---',
+		'b------b',
+		'b------b',
+		'bbb---bb'
+	]
+};
+
+export const eighteightH28: Map = {
+	name: '8x8 handicap 28',
+	category: '8x8',
+	data: [
+		'bbbbbbbb',
+		'b------b',
+		'b------b',
+		'b--wb--b',
+		'b--bw--b',
+		'b------b',
+		'b------b',
+		'bbbbbbbb'
+	]
+};
+
+export const roundedEighteight: Map = {
+	name: '8x8 rounded',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		' ------ ',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		' ------ '
+	]
+};
+
+export const roundedEighteight2: Map = {
+	name: '8x8 rounded 2',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'  ----  ',
+		' ------ ',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		' ------ ',
+		'  ----  '
+	]
+};
+
+export const roundedEighteight3: Map = {
+	name: '8x8 rounded 3',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'   --   ',
+		'  ----  ',
+		' ------ ',
+		'---wb---',
+		'---bw---',
+		' ------ ',
+		'  ----  ',
+		'   --   '
+	]
+};
+
+export const eighteightWithNotch: Map = {
+	name: '8x8 with notch',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'---  ---',
+		'--------',
+		'--------',
+		' --wb-- ',
+		' --bw-- ',
+		'--------',
+		'--------',
+		'---  ---'
+	]
+};
+
+export const eighteightWithSomeHoles: Map = {
+	name: '8x8 with some holes',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'--- ----',
+		'----- --',
+		'-- -----',
+		'---wb---',
+		'---bw- -',
+		' -------',
+		'--- ----',
+		'--------'
+	]
+};
+
+export const circle: Map = {
+	name: 'Circle',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'   --   ',
+		' ------ ',
+		' ------ ',
+		'---wb---',
+		'---bw---',
+		' ------ ',
+		' ------ ',
+		'   --   '
+	]
+};
+
+export const smile: Map = {
+	name: 'Smile',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		' ------ ',
+		'--------',
+		'-- -- --',
+		'---wb---',
+		'-- bw --',
+		'---  ---',
+		'--------',
+		' ------ '
+	]
+};
+
+export const window: Map = {
+	name: 'Window',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'--------',
+		'-  --  -',
+		'-  --  -',
+		'---wb---',
+		'---bw---',
+		'-  --  -',
+		'-  --  -',
+		'--------'
+	]
+};
+
+export const reserved: Map = {
+	name: 'Reserved',
+	category: '8x8',
+	author: 'Aya',
+	data: [
+		'w------b',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'b------w'
+	]
+};
+
+export const x: Map = {
+	name: 'X',
+	category: '8x8',
+	author: 'Aya',
+	data: [
+		'w------b',
+		'-w----b-',
+		'--w--b--',
+		'---wb---',
+		'---bw---',
+		'--b--w--',
+		'-b----w-',
+		'b------w'
+	]
+};
+
+export const parallel: Map = {
+	name: 'Parallel',
+	category: '8x8',
+	author: 'Aya',
+	data: [
+		'--------',
+		'--------',
+		'--------',
+		'---bb---',
+		'---ww---',
+		'--------',
+		'--------',
+		'--------'
+	]
+};
+
+export const lackOfBlack: Map = {
+	name: 'Lack of Black',
+	category: '8x8',
+	data: [
+		'--------',
+		'--------',
+		'--------',
+		'---w----',
+		'---bw---',
+		'--------',
+		'--------',
+		'--------'
+	]
+};
+
+export const squareParty: Map = {
+	name: 'Square Party',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'--------',
+		'-wwwbbb-',
+		'-w-wb-b-',
+		'-wwwbbb-',
+		'-bbbwww-',
+		'-b-bw-w-',
+		'-bbbwww-',
+		'--------'
+	]
+};
+
+export const minesweeper: Map = {
+	name: 'Minesweeper',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'b-b--w-w',
+		'-w-wb-b-',
+		'w-b--w-b',
+		'-b-wb-w-',
+		'-w-bw-b-',
+		'b-w--b-w',
+		'-b-bw-w-',
+		'w-w--b-b'
+	]
+};
+
+export const tenthtenth: Map = {
+	name: '10x10',
+	category: '10x10',
+	data: [
+		'----------',
+		'----------',
+		'----------',
+		'----------',
+		'----wb----',
+		'----bw----',
+		'----------',
+		'----------',
+		'----------',
+		'----------'
+	]
+};
+
+export const hole: Map = {
+	name: 'The Hole',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'----------',
+		'----------',
+		'--wb--wb--',
+		'--bw--bw--',
+		'----  ----',
+		'----  ----',
+		'--wb--wb--',
+		'--bw--bw--',
+		'----------',
+		'----------'
+	]
+};
+
+export const grid: Map = {
+	name: 'Grid',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'----------',
+		'- - -- - -',
+		'----------',
+		'- - -- - -',
+		'----wb----',
+		'----bw----',
+		'- - -- - -',
+		'----------',
+		'- - -- - -',
+		'----------'
+	]
+};
+
+export const cross: Map = {
+	name: 'Cross',
+	category: '10x10',
+	author: 'Aya',
+	data: [
+		'   ----   ',
+		'   ----   ',
+		'   ----   ',
+		'----------',
+		'----wb----',
+		'----bw----',
+		'----------',
+		'   ----   ',
+		'   ----   ',
+		'   ----   '
+	]
+};
+
+export const charX: Map = {
+	name: 'Char X',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'---    ---',
+		'----  ----',
+		'----------',
+		' -------- ',
+		'  --wb--  ',
+		'  --bw--  ',
+		' -------- ',
+		'----------',
+		'----  ----',
+		'---    ---'
+	]
+};
+
+export const charY: Map = {
+	name: 'Char Y',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'---    ---',
+		'----  ----',
+		'----------',
+		' -------- ',
+		'  --wb--  ',
+		'  --bw--  ',
+		'  ------  ',
+		'  ------  ',
+		'  ------  ',
+		'  ------  '
+	]
+};
+
+export const walls: Map = {
+	name: 'Walls',
+	category: '10x10',
+	author: 'Aya',
+	data: [
+		' bbbbbbbb ',
+		'w--------w',
+		'w--------w',
+		'w--------w',
+		'w---wb---w',
+		'w---bw---w',
+		'w--------w',
+		'w--------w',
+		'w--------w',
+		' bbbbbbbb '
+	]
+};
+
+export const cpu: Map = {
+	name: 'CPU',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		' b b  b b ',
+		'w--------w',
+		' -------- ',
+		'w--------w',
+		' ---wb--- ',
+		' ---bw--- ',
+		'w--------w',
+		' -------- ',
+		'w--------w',
+		' b b  b b '
+	]
+};
+
+export const checker: Map = {
+	name: 'Checker',
+	category: '10x10',
+	author: 'Aya',
+	data: [
+		'----------',
+		'----------',
+		'----------',
+		'---wbwb---',
+		'---bwbw---',
+		'---wbwb---',
+		'---bwbw---',
+		'----------',
+		'----------',
+		'----------'
+	]
+};
+
+export const japaneseCurry: Map = {
+	name: 'Japanese curry',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'w-b-b-b-b-',
+		'-w-b-b-b-b',
+		'w-w-b-b-b-',
+		'-w-w-b-b-b',
+		'w-w-wwb-b-',
+		'-w-wbb-b-b',
+		'w-w-w-b-b-',
+		'-w-w-w-b-b',
+		'w-w-w-w-b-',
+		'-w-w-w-w-b'
+	]
+};
+
+export const mosaic: Map = {
+	name: 'Mosaic',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'- - - - - ',
+		' - - - - -',
+		'- - - - - ',
+		' - w w - -',
+		'- - b b - ',
+		' - w w - -',
+		'- - b b - ',
+		' - - - - -',
+		'- - - - - ',
+		' - - - - -',
+	]
+};
+
+export const arena: Map = {
+	name: 'Arena',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'- - -- - -',
+		' - -  - - ',
+		'- ------ -',
+		' -------- ',
+		'- --wb-- -',
+		'- --bw-- -',
+		' -------- ',
+		'- ------ -',
+		' - -  - - ',
+		'- - -- - -'
+	]
+};
+
+export const reactor: Map = {
+	name: 'Reactor',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'-w------b-',
+		'b- -  - -w',
+		'- --wb-- -',
+		'---b  w---',
+		'- b wb w -',
+		'- w bw b -',
+		'---w  b---',
+		'- --bw-- -',
+		'w- -  - -b',
+		'-b------w-'
+	]
+};
+
+export const sixeight: Map = {
+	name: '6x8',
+	category: 'Special',
+	data: [
+		'------',
+		'------',
+		'------',
+		'--wb--',
+		'--bw--',
+		'------',
+		'------',
+		'------'
+	]
+};
+
+export const spark: Map = {
+	name: 'Spark',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		' -      - ',
+		'----------',
+		' -------- ',
+		' -------- ',
+		' ---wb--- ',
+		' ---bw--- ',
+		' -------- ',
+		' -------- ',
+		'----------',
+		' -      - '
+	]
+};
+
+export const islands: Map = {
+	name: 'Islands',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		'--------  ',
+		'---wb---  ',
+		'---bw---  ',
+		'--------  ',
+		'  -    -  ',
+		'  -    -  ',
+		'  --------',
+		'  --------',
+		'  --------',
+		'  --------'
+	]
+};
+
+export const galaxy: Map = {
+	name: 'Galaxy',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		'   ------   ',
+		'  --www---  ',
+		' ------w--- ',
+		'---bbb--w---',
+		'--b---b-w-b-',
+		'-b--wwb-w-b-',
+		'-b-w-bww--b-',
+		'-b-w-b---b--',
+		'---w--bbb---',
+		' ---w------ ',
+		'  ---www--  ',
+		'   ------   '
+	]
+};
+
+export const triangle: Map = {
+	name: 'Triangle',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		'    --    ',
+		'    --    ',
+		'   ----   ',
+		'   ----   ',
+		'  --wb--  ',
+		'  --bw--  ',
+		' -------- ',
+		' -------- ',
+		'----------',
+		'----------'
+	]
+};
+
+export const iphonex: Map = {
+	name: 'iPhone X',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		' --  -- ',
+		'--------',
+		'--------',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'--------',
+		'--------',
+		' ------ '
+	]
+};
+
+export const dealWithIt: Map = {
+	name: 'Deal with it!',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		'------------',
+		'--w-b-------',
+		' --b-w------',
+		'  --w-b---- ',
+		'   -------  '
+	]
+};
+
+export const experiment: Map = {
+	name: 'Let\'s experiment',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		' ------------ ',
+		'------wb------',
+		'------bw------',
+		'--------------',
+		'    -    -    ',
+		'------  ------',
+		'bbbbbb  wwwwww',
+		'bbbbbb  wwwwww',
+		'bbbbbb  wwwwww',
+		'bbbbbb  wwwwww',
+		'wwwwww  bbbbbb'
+	]
+};
+
+export const bigBoard: Map = {
+	name: 'Big board',
+	category: 'Special',
+	data: [
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'-------wb-------',
+		'-------bw-------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------'
+	]
+};
+
+export const twoBoard: Map = {
+	name: 'Two board',
+	category: 'Special',
+	author: 'Aya',
+	data: [
+		'-------- --------',
+		'-------- --------',
+		'-------- --------',
+		'---wb--- ---wb---',
+		'---bw--- ---bw---',
+		'-------- --------',
+		'-------- --------',
+		'-------- --------'
+	]
+};
+
+export const test1: Map = {
+	name: 'Test1',
+	category: 'Test',
+	data: [
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------'
+	]
+};
+
+export const test2: Map = {
+	name: 'Test2',
+	category: 'Test',
+	data: [
+		'------',
+		'------',
+		'-b--w-',
+		'-w--b-',
+		'-w--b-'
+	]
+};
+
+export const test3: Map = {
+	name: 'Test3',
+	category: 'Test',
+	data: [
+		'-w-',
+		'--w',
+		'w--',
+		'-w-',
+		'--w',
+		'w--',
+		'-w-',
+		'--w',
+		'w--',
+		'-w-',
+		'---',
+		'b--',
+	]
+};
+
+export const test4: Map = {
+	name: 'Test4',
+	category: 'Test',
+	data: [
+		'-w--b-',
+		'-w--b-',
+		'------',
+		'-w--b-',
+		'-w--b-'
+	]
+};
+
+// https://misskey.xyz/othello/5aaabf7fe126e10b5216ea09 64
+export const test5: Map = {
+	name: 'Test5',
+	category: 'Test',
+	data: [
+		'--wwwwww--',
+		'--wwwbwwww',
+		'-bwwbwbwww',
+		'-bwwwbwbww',
+		'-bwwbwbwbw',
+		'-bwbwbwb-w',
+		'bwbwwbbb-w',
+		'w-wbbbbb--',
+		'--w-b-w---',
+		'----------'
+	]
+};
diff --git a/src/misc/user/get-acct.ts b/src/misc/user/get-acct.ts
new file mode 100644
index 0000000000..9afb03d88b
--- /dev/null
+++ b/src/misc/user/get-acct.ts
@@ -0,0 +1,3 @@
+export default user => {
+	return user.host === null ? user.username : `${user.username}@${user.host}`;
+};
diff --git a/src/misc/user/get-summary.ts b/src/misc/user/get-summary.ts
new file mode 100644
index 0000000000..2c71d3eae9
--- /dev/null
+++ b/src/misc/user/get-summary.ts
@@ -0,0 +1,18 @@
+import { IUser, isLocalUser } from '../../models/user';
+import getAcct from './get-acct';
+
+/**
+ * ユーザーを表す文字列を取得します。
+ * @param user ユーザー
+ */
+export default function(user: IUser): string {
+	let string = `${user.name} (@${getAcct(user)})\n` +
+		`${user.postsCount}投稿、${user.followingCount}フォロー、${user.followersCount}フォロワー\n`;
+
+	if (isLocalUser(user)) {
+		const account = user.account;
+		string += `場所: ${account.profile.location}、誕生日: ${account.profile.birthday}\n`;
+	}
+
+	return string + `「${user.description}」`;
+}
diff --git a/src/misc/user/parse-acct.ts b/src/misc/user/parse-acct.ts
new file mode 100644
index 0000000000..ef1f55405d
--- /dev/null
+++ b/src/misc/user/parse-acct.ts
@@ -0,0 +1,4 @@
+export default acct => {
+	const splitted = acct.split('@', 2);
+	return { username: splitted[0], host: splitted[1] || null };
+};
diff --git a/src/processor/http/follow.ts b/src/processor/http/follow.ts
index 9b8337f2e7..4804657fd6 100644
--- a/src/processor/http/follow.ts
+++ b/src/processor/http/follow.ts
@@ -5,8 +5,8 @@ import User, { isLocalUser, pack as packUser, ILocalUser } from '../../models/us
 import Following from '../../models/following';
 import event from '../../common/event';
 import notify from '../../common/notify';
-import context from '../../common/remote/activitypub/renderer/context';
-import render from '../../common/remote/activitypub/renderer/follow';
+import context from '../../remote/activitypub/renderer/context';
+import render from '../../remote/activitypub/renderer/follow';
 import config from '../../conf';
 
 export default ({ data }, done) => Following.findOne({ _id: data.following }).then(({ followerId, followeeId }) => {
diff --git a/src/processor/http/perform-activitypub.ts b/src/processor/http/perform-activitypub.ts
index 5b1a02173d..51e1ede145 100644
--- a/src/processor/http/perform-activitypub.ts
+++ b/src/processor/http/perform-activitypub.ts
@@ -1,5 +1,5 @@
 import User from '../../models/user';
-import act from '../../common/remote/activitypub/act';
+import act from '../../remote/activitypub/act';
 
 export default ({ data }, done) => User.findOne({ _id: data.actor })
 	.then(actor => act(actor, data.outbox))
diff --git a/src/remote/activitypub/act/create.ts b/src/remote/activitypub/act/create.ts
new file mode 100644
index 0000000000..9eb74800ea
--- /dev/null
+++ b/src/remote/activitypub/act/create.ts
@@ -0,0 +1,9 @@
+import create from '../create';
+
+export default (resolver, actor, activity) => {
+	if ('actor' in activity && actor.account.uri !== activity.actor) {
+		throw new Error();
+	}
+
+	return create(resolver, actor, activity.object);
+};
diff --git a/src/remote/activitypub/act/index.ts b/src/remote/activitypub/act/index.ts
new file mode 100644
index 0000000000..a76983638f
--- /dev/null
+++ b/src/remote/activitypub/act/index.ts
@@ -0,0 +1,22 @@
+import create from './create';
+import createObject from '../create';
+import Resolver from '../resolver';
+
+export default (actor, value) => {
+	return new Resolver().resolve(value).then(resolved => Promise.all(resolved.map(async promisedResult => {
+		const { resolver, object } = await promisedResult;
+		const created = await (await createObject(resolver, actor, [object]))[0];
+
+		if (created !== null) {
+			return created;
+		}
+
+		switch (object.type) {
+		case 'Create':
+			return create(resolver, actor, object);
+
+		default:
+			return null;
+		}
+	})));
+};
diff --git a/src/remote/activitypub/create.ts b/src/remote/activitypub/create.ts
new file mode 100644
index 0000000000..e610232f51
--- /dev/null
+++ b/src/remote/activitypub/create.ts
@@ -0,0 +1,87 @@
+import { JSDOM } from 'jsdom';
+import config from '../../conf';
+import Post from '../../models/post';
+import RemoteUserObject, { IRemoteUserObject } from '../../models/remote-user-object';
+import uploadFromUrl from '../../common/drive/upload-from-url';
+import Resolver from './resolver';
+const createDOMPurify = require('dompurify');
+
+function createRemoteUserObject($ref, $id, { id }) {
+	const object = { $ref, $id };
+
+	if (!id) {
+		return { object };
+	}
+
+	return RemoteUserObject.insert({ uri: id, object });
+}
+
+async function createImage(actor, object) {
+	if ('attributedTo' in object && actor.account.uri !== object.attributedTo) {
+		throw new Error();
+	}
+
+	const { _id } = await uploadFromUrl(object.url, actor);
+	return createRemoteUserObject('driveFiles.files', _id, object);
+}
+
+async function createNote(resolver, actor, object) {
+	if ('attributedTo' in object && actor.account.uri !== object.attributedTo) {
+		throw new Error();
+	}
+
+	const mediaIds = 'attachment' in object &&
+		(await Promise.all(await create(resolver, actor, object.attachment)))
+			.filter(media => media !== null && media.object.$ref === 'driveFiles.files')
+			.map(({ object }) => object.$id);
+
+	const { window } = new JSDOM(object.content);
+
+	const { _id } = await Post.insert({
+		channelId: undefined,
+		index: undefined,
+		createdAt: new Date(object.published),
+		mediaIds,
+		replyId: undefined,
+		repostId: undefined,
+		poll: undefined,
+		text: window.document.body.textContent,
+		textHtml: object.content && createDOMPurify(window).sanitize(object.content),
+		userId: actor._id,
+		appId: null,
+		viaMobile: false,
+		geo: undefined
+	});
+
+	// Register to search database
+	if (object.content && config.elasticsearch.enable) {
+		const es = require('../../db/elasticsearch');
+
+		es.index({
+			index: 'misskey',
+			type: 'post',
+			id: _id.toString(),
+			body: {
+				text: window.document.body.textContent
+			}
+		});
+	}
+
+	return createRemoteUserObject('posts', _id, object);
+}
+
+export default async function create(parentResolver: Resolver, actor, value): Promise<Array<Promise<IRemoteUserObject>>> {
+	const results = await parentResolver.resolveRemoteUserObjects(value);
+
+	return results.map(promisedResult => promisedResult.then(({ resolver, object }) => {
+		switch (object.type) {
+		case 'Image':
+			return createImage(actor, object);
+
+		case 'Note':
+			return createNote(resolver, actor, object);
+		}
+
+		return null;
+	}));
+}
diff --git a/src/remote/activitypub/renderer/context.ts b/src/remote/activitypub/renderer/context.ts
new file mode 100644
index 0000000000..b56f727ae7
--- /dev/null
+++ b/src/remote/activitypub/renderer/context.ts
@@ -0,0 +1,5 @@
+export default [
+	'https://www.w3.org/ns/activitystreams',
+	'https://w3id.org/security/v1',
+	{ Hashtag: 'as:Hashtag' }
+];
diff --git a/src/remote/activitypub/renderer/document.ts b/src/remote/activitypub/renderer/document.ts
new file mode 100644
index 0000000000..fdd52c1b6c
--- /dev/null
+++ b/src/remote/activitypub/renderer/document.ts
@@ -0,0 +1,7 @@
+import config from '../../../conf';
+
+export default ({ _id, contentType }) => ({
+	type: 'Document',
+	mediaType: contentType,
+	url: `${config.drive_url}/${_id}`
+});
diff --git a/src/remote/activitypub/renderer/follow.ts b/src/remote/activitypub/renderer/follow.ts
new file mode 100644
index 0000000000..c99bc375a2
--- /dev/null
+++ b/src/remote/activitypub/renderer/follow.ts
@@ -0,0 +1,8 @@
+import config from '../../../conf';
+import { IRemoteUser } from '../../../models/user';
+
+export default ({ username }, followee: IRemoteUser) => ({
+	type: 'Follow',
+	actor: `${config.url}/@${username}`,
+	object: followee.account.uri
+});
diff --git a/src/remote/activitypub/renderer/hashtag.ts b/src/remote/activitypub/renderer/hashtag.ts
new file mode 100644
index 0000000000..c2d261ed21
--- /dev/null
+++ b/src/remote/activitypub/renderer/hashtag.ts
@@ -0,0 +1,7 @@
+import config from '../../../conf';
+
+export default tag => ({
+	type: 'Hashtag',
+	href: `${config.url}/search?q=#${encodeURIComponent(tag)}`,
+	name: '#' + tag
+});
diff --git a/src/remote/activitypub/renderer/image.ts b/src/remote/activitypub/renderer/image.ts
new file mode 100644
index 0000000000..3d1c71cb95
--- /dev/null
+++ b/src/remote/activitypub/renderer/image.ts
@@ -0,0 +1,6 @@
+import config from '../../../conf';
+
+export default ({ _id }) => ({
+	type: 'Image',
+	url: `${config.drive_url}/${_id}`
+});
diff --git a/src/remote/activitypub/renderer/key.ts b/src/remote/activitypub/renderer/key.ts
new file mode 100644
index 0000000000..904a69e081
--- /dev/null
+++ b/src/remote/activitypub/renderer/key.ts
@@ -0,0 +1,10 @@
+import config from '../../../conf';
+import { extractPublic } from '../../../crypto_key';
+import { ILocalUser } from '../../../models/user';
+
+export default (user: ILocalUser) => ({
+	id: `${config.url}/@${user.username}/publickey`,
+	type: 'Key',
+	owner: `${config.url}/@${user.username}`,
+	publicKeyPem: extractPublic(user.account.keypair)
+});
diff --git a/src/remote/activitypub/renderer/note.ts b/src/remote/activitypub/renderer/note.ts
new file mode 100644
index 0000000000..74806f14b4
--- /dev/null
+++ b/src/remote/activitypub/renderer/note.ts
@@ -0,0 +1,44 @@
+import renderDocument from './document';
+import renderHashtag from './hashtag';
+import config from '../../../conf';
+import DriveFile from '../../../models/drive-file';
+import Post from '../../../models/post';
+import User from '../../../models/user';
+
+export default async (user, post) => {
+	const promisedFiles = DriveFile.find({ _id: { $in: post.mediaIds } });
+	let inReplyTo;
+
+	if (post.replyId) {
+		const inReplyToPost = await Post.findOne({
+			_id: post.replyId,
+		});
+
+		if (inReplyToPost !== null) {
+			const inReplyToUser = await User.findOne({
+				_id: post.userId,
+			});
+
+			if (inReplyToUser !== null) {
+				inReplyTo = `${config.url}@${inReplyToUser.username}/${inReplyToPost._id}`;
+			}
+		}
+	} else {
+		inReplyTo = null;
+	}
+
+	const attributedTo = `${config.url}/@${user.username}`;
+
+	return {
+		id: `${attributedTo}/${post._id}`,
+		type: 'Note',
+		attributedTo,
+		content: post.textHtml,
+		published: post.createdAt.toISOString(),
+		to: 'https://www.w3.org/ns/activitystreams#Public',
+		cc: `${attributedTo}/followers`,
+		inReplyTo,
+		attachment: (await promisedFiles).map(renderDocument),
+		tag: post.tags.map(renderHashtag)
+	};
+};
diff --git a/src/remote/activitypub/renderer/ordered-collection.ts b/src/remote/activitypub/renderer/ordered-collection.ts
new file mode 100644
index 0000000000..2ca0f77354
--- /dev/null
+++ b/src/remote/activitypub/renderer/ordered-collection.ts
@@ -0,0 +1,6 @@
+export default (id, totalItems, orderedItems) => ({
+	id,
+	type: 'OrderedCollection',
+	totalItems,
+	orderedItems
+});
diff --git a/src/remote/activitypub/renderer/person.ts b/src/remote/activitypub/renderer/person.ts
new file mode 100644
index 0000000000..c6c7893165
--- /dev/null
+++ b/src/remote/activitypub/renderer/person.ts
@@ -0,0 +1,20 @@
+import renderImage from './image';
+import renderKey from './key';
+import config from '../../../conf';
+
+export default user => {
+	const id = `${config.url}/@${user.username}`;
+
+	return {
+		type: 'Person',
+		id,
+		inbox: `${id}/inbox`,
+		outbox: `${id}/outbox`,
+		preferredUsername: user.username,
+		name: user.name,
+		summary: user.description,
+		icon: user.avatarId && renderImage({ _id: user.avatarId }),
+		image: user.bannerId && renderImage({ _id: user.bannerId }),
+		publicKey: renderKey(user)
+	};
+};
diff --git a/src/remote/activitypub/resolve-person.ts b/src/remote/activitypub/resolve-person.ts
new file mode 100644
index 0000000000..d928e7ce19
--- /dev/null
+++ b/src/remote/activitypub/resolve-person.ts
@@ -0,0 +1,109 @@
+import { JSDOM } from 'jsdom';
+import { toUnicode } from 'punycode';
+import User, { validateUsername, isValidName, isValidDescription } from '../../models/user';
+import queue from '../../queue';
+import webFinger from '../webfinger';
+import create from './create';
+import Resolver from './resolver';
+
+async function isCollection(collection) {
+	return ['Collection', 'OrderedCollection'].includes(collection.type);
+}
+
+export default async (value, usernameLower, hostLower, acctLower) => {
+	if (!validateUsername(usernameLower)) {
+		throw new Error();
+	}
+
+	const { resolver, object } = await new Resolver().resolveOne(value);
+
+	if (
+		object === null ||
+		object.type !== 'Person' ||
+		typeof object.preferredUsername !== 'string' ||
+		object.preferredUsername.toLowerCase() !== usernameLower ||
+		!isValidName(object.name) ||
+		!isValidDescription(object.summary)
+	) {
+		throw new Error();
+	}
+
+	const [followers, following, outbox, finger] = await Promise.all([
+		resolver.resolveOne(object.followers).then(
+			resolved => isCollection(resolved.object) ? resolved.object : null,
+			() => null
+		),
+		resolver.resolveOne(object.following).then(
+			resolved => isCollection(resolved.object) ? resolved.object : null,
+			() => null
+		),
+		resolver.resolveOne(object.outbox).then(
+			resolved => isCollection(resolved.object) ? resolved.object : null,
+			() => null
+		),
+		webFinger(object.id, acctLower),
+	]);
+
+	const summaryDOM = JSDOM.fragment(object.summary);
+
+	// Create user
+	const user = await User.insert({
+		avatarId: null,
+		bannerId: null,
+		createdAt: Date.parse(object.published),
+		description: summaryDOM.textContent,
+		followersCount: followers.totalItem,
+		followingCount: following.totalItem,
+		name: object.name,
+		postsCount: outbox.totalItem,
+		driveCapacity: 1024 * 1024 * 8, // 8MiB
+		username: object.preferredUsername,
+		usernameLower,
+		host: toUnicode(finger.subject.replace(/^.*?@/, '')),
+		hostLower,
+		account: {
+			publicKey: {
+				id: object.publicKey.id,
+				publicKeyPem: object.publicKey.publicKeyPem
+			},
+			inbox: object.inbox,
+			uri: object.id,
+		},
+	});
+
+	queue.create('http', {
+		type: 'performActivityPub',
+		actor: user._id,
+		outbox
+	}).save();
+
+	const [avatarId, bannerId] = await Promise.all([
+		object.icon,
+		object.image
+	].map(async value => {
+		if (value === undefined) {
+			return null;
+		}
+
+		try {
+			const created = await create(resolver, user, value);
+
+			await Promise.all(created.map(asyncCreated => asyncCreated.then(created => {
+				if (created !== null && created.object.$ref === 'driveFiles.files') {
+					throw created.object.$id;
+				}
+			}, () => {})));
+
+			return null;
+		} catch (id) {
+			return id;
+		}
+	}));
+
+	User.update({ _id: user._id }, { $set: { avatarId, bannerId } });
+
+	user.avatarId = avatarId;
+	user.bannerId = bannerId;
+
+	return user;
+};
diff --git a/src/remote/activitypub/resolver.ts b/src/remote/activitypub/resolver.ts
new file mode 100644
index 0000000000..ebfe25fe7e
--- /dev/null
+++ b/src/remote/activitypub/resolver.ts
@@ -0,0 +1,97 @@
+import RemoteUserObject from '../../models/remote-user-object';
+import { IObject } from './type';
+const request = require('request-promise-native');
+
+type IResult = {
+  resolver: Resolver;
+  object: IObject;
+};
+
+export default class Resolver {
+	private requesting: Set<string>;
+
+	constructor(iterable?: Iterable<string>) {
+		this.requesting = new Set(iterable);
+	}
+
+	private async resolveUnrequestedOne(value) {
+		if (typeof value !== 'string') {
+			return { resolver: this, object: value };
+		}
+
+		const resolver = new Resolver(this.requesting);
+
+		resolver.requesting.add(value);
+
+		const object = await request({
+			url: value,
+			headers: {
+				Accept: 'application/activity+json, application/ld+json'
+			},
+			json: true
+		});
+
+		if (object === null || (
+			Array.isArray(object['@context']) ?
+				!object['@context'].includes('https://www.w3.org/ns/activitystreams') :
+				object['@context'] !== 'https://www.w3.org/ns/activitystreams'
+		)) {
+			throw new Error();
+		}
+
+		return { resolver, object };
+	}
+
+	private async resolveCollection(value) {
+		if (Array.isArray(value)) {
+			return value;
+		}
+
+		const resolved = typeof value === 'string' ?
+			await this.resolveUnrequestedOne(value) :
+			value;
+
+		switch (resolved.type) {
+		case 'Collection':
+			return resolved.items;
+
+		case 'OrderedCollection':
+			return resolved.orderedItems;
+
+		default:
+			return [resolved];
+		}
+	}
+
+	public async resolve(value): Promise<Array<Promise<IResult>>> {
+		const collection = await this.resolveCollection(value);
+
+		return collection
+			.filter(element => !this.requesting.has(element))
+			.map(this.resolveUnrequestedOne.bind(this));
+	}
+
+	public resolveOne(value) {
+		if (this.requesting.has(value)) {
+			throw new Error();
+		}
+
+		return this.resolveUnrequestedOne(value);
+	}
+
+	public async resolveRemoteUserObjects(value) {
+		const collection = await this.resolveCollection(value);
+
+		return collection.filter(element => !this.requesting.has(element)).map(element => {
+			if (typeof element === 'string') {
+				const object = RemoteUserObject.findOne({ uri: element });
+
+				if (object !== null) {
+					return object;
+				}
+			}
+
+			return this.resolveUnrequestedOne(element);
+		});
+	}
+}
diff --git a/src/remote/activitypub/type.ts b/src/remote/activitypub/type.ts
new file mode 100644
index 0000000000..94e2c350a2
--- /dev/null
+++ b/src/remote/activitypub/type.ts
@@ -0,0 +1,3 @@
+export type IObject = {
+	type: string;
+};
diff --git a/src/remote/resolve-user.ts b/src/remote/resolve-user.ts
new file mode 100644
index 0000000000..a393092839
--- /dev/null
+++ b/src/remote/resolve-user.ts
@@ -0,0 +1,26 @@
+import { toUnicode, toASCII } from 'punycode';
+import User from '../models/user';
+import resolvePerson from './activitypub/resolve-person';
+import webFinger from './webfinger';
+
+export default async (username, host, option) => {
+	const usernameLower = username.toLowerCase();
+	const hostLowerAscii = toASCII(host).toLowerCase();
+	const hostLower = toUnicode(hostLowerAscii);
+
+	let user = await User.findOne({ usernameLower, hostLower }, option);
+
+	if (user === null) {
+		const acctLower = `${usernameLower}@${hostLowerAscii}`;
+
+		const finger = await webFinger(acctLower, acctLower);
+		const self = finger.links.find(link => link.rel && link.rel.toLowerCase() === 'self');
+		if (!self) {
+			throw new Error();
+		}
+
+		user = await resolvePerson(self.href, usernameLower, hostLower, acctLower);
+	}
+
+	return user;
+};
diff --git a/src/remote/webfinger.ts b/src/remote/webfinger.ts
new file mode 100644
index 0000000000..fec5da689c
--- /dev/null
+++ b/src/remote/webfinger.ts
@@ -0,0 +1,25 @@
+const WebFinger = require('webfinger.js');
+
+const webFinger = new WebFinger({ });
+
+type ILink = {
+  href: string;
+  rel: string;
+};
+
+type IWebFinger = {
+  links: ILink[];
+  subject: string;
+};
+
+export default (query, verifier): Promise<IWebFinger> => new Promise((res, rej) => webFinger.lookup(query, (error, result) => {
+	if (error) {
+		return rej(error);
+	}
+
+	if (result.object.subject.toLowerCase().replace(/^acct:/, '') !== verifier) {
+		return rej('WebFinger verfification failed');
+	}
+
+	res(result.object);
+}));
diff --git a/src/server/activitypub/inbox.ts b/src/server/activitypub/inbox.ts
index cb679dbf0e..31a47e2761 100644
--- a/src/server/activitypub/inbox.ts
+++ b/src/server/activitypub/inbox.ts
@@ -3,7 +3,7 @@ import * as express from 'express';
 import { parseRequest, verifySignature } from 'http-signature';
 import User, { IRemoteUser } from '../../models/user';
 import queue from '../../queue';
-import parseAcct from '../../common/user/parse-acct';
+import parseAcct from '../../misc/user/parse-acct';
 
 const app = express();
 app.disable('x-powered-by');
diff --git a/src/server/activitypub/outbox.ts b/src/server/activitypub/outbox.ts
index c26c4df75d..2018d8797b 100644
--- a/src/server/activitypub/outbox.ts
+++ b/src/server/activitypub/outbox.ts
@@ -1,7 +1,7 @@
 import * as express from 'express';
-import context from '../../common/remote/activitypub/renderer/context';
-import renderNote from '../../common/remote/activitypub/renderer/note';
-import renderOrderedCollection from '../../common/remote/activitypub/renderer/ordered-collection';
+import context from '../../remote/activitypub/renderer/context';
+import renderNote from '../../remote/activitypub/renderer/note';
+import renderOrderedCollection from '../../remote/activitypub/renderer/ordered-collection';
 import config from '../../conf';
 import Post from '../../models/post';
 import withUser from './with-user';
diff --git a/src/server/activitypub/post.ts b/src/server/activitypub/post.ts
index 6644563d8c..ecbf9671fa 100644
--- a/src/server/activitypub/post.ts
+++ b/src/server/activitypub/post.ts
@@ -1,7 +1,7 @@
 import * as express from 'express';
-import context from '../../common/remote/activitypub/renderer/context';
-import render from '../../common/remote/activitypub/renderer/note';
-import parseAcct from '../../common/user/parse-acct';
+import context from '../../remote/activitypub/renderer/context';
+import render from '../../remote/activitypub/renderer/note';
+import parseAcct from '../../misc/user/parse-acct';
 import Post from '../../models/post';
 import User from '../../models/user';
 
diff --git a/src/server/activitypub/publickey.ts b/src/server/activitypub/publickey.ts
index e380309dc4..a23d11c156 100644
--- a/src/server/activitypub/publickey.ts
+++ b/src/server/activitypub/publickey.ts
@@ -1,6 +1,6 @@
 import * as express from 'express';
-import context from '../../common/remote/activitypub/renderer/context';
-import render from '../../common/remote/activitypub/renderer/key';
+import context from '../../remote/activitypub/renderer/context';
+import render from '../../remote/activitypub/renderer/key';
 import config from '../../conf';
 import withUser from './with-user';
 
diff --git a/src/server/activitypub/user.ts b/src/server/activitypub/user.ts
index cfda409e2c..0d0b84bad4 100644
--- a/src/server/activitypub/user.ts
+++ b/src/server/activitypub/user.ts
@@ -1,7 +1,7 @@
 import * as express from 'express';
 import config from '../../conf';
-import context from '../../common/remote/activitypub/renderer/context';
-import render from '../../common/remote/activitypub/renderer/person';
+import context from '../../remote/activitypub/renderer/context';
+import render from '../../remote/activitypub/renderer/person';
 import withUser from './with-user';
 
 const respond = withUser(username => `${config.url}/@${username}`, (user, req, res) => {
diff --git a/src/server/activitypub/with-user.ts b/src/server/activitypub/with-user.ts
index ed289b641b..18f2e50ffd 100644
--- a/src/server/activitypub/with-user.ts
+++ b/src/server/activitypub/with-user.ts
@@ -1,4 +1,4 @@
-import parseAcct from '../../common/user/parse-acct';
+import parseAcct from '../../misc/user/parse-acct';
 import User from '../../models/user';
 
 export default (redirect, respond) => async (req, res, next) => {
diff --git a/src/server/api/bot/core.ts b/src/server/api/bot/core.ts
index d636cc26e7..0faf9b4e4c 100644
--- a/src/server/api/bot/core.ts
+++ b/src/server/api/bot/core.ts
@@ -3,10 +3,10 @@ import * as bcrypt from 'bcryptjs';
 
 import User, { IUser, init as initUser, ILocalUser } from '../../../models/user';
 
-import getPostSummary from '../../../common/get-post-summary';
-import getUserSummary from '../../../common/user/get-summary';
-import parseAcct from '../../../common/user/parse-acct';
-import getNotificationSummary from '../../../common/get-notification-summary';
+import getPostSummary from '../../../misc/get-post-summary';
+import getUserSummary from '../../../misc/user/get-summary';
+import parseAcct from '../../../misc/user/parse-acct';
+import getNotificationSummary from '../../../misc/get-notification-summary';
 
 const hmm = [
 	'？',
diff --git a/src/server/api/bot/interfaces/line.ts b/src/server/api/bot/interfaces/line.ts
index 58fbb217bc..a6e70a138f 100644
--- a/src/server/api/bot/interfaces/line.ts
+++ b/src/server/api/bot/interfaces/line.ts
@@ -7,9 +7,9 @@ import config from '../../../../conf';
 import BotCore from '../core';
 import _redis from '../../../../db/redis';
 import prominence = require('prominence');
-import getAcct from '../../../../common/user/get-acct';
-import parseAcct from '../../../../common/user/parse-acct';
-import getPostSummary from '../../../../common/get-post-summary';
+import getAcct from '../../../../misc/user/get-acct';
+import parseAcct from '../../../../misc/user/parse-acct';
+import getPostSummary from '../../../../misc/get-post-summary';
 
 const redis = prominence(_redis);
 
diff --git a/src/server/api/endpoints/drive/files/upload_from_url.ts b/src/server/api/endpoints/drive/files/upload_from_url.ts
index 01d8750553..ceb751a144 100644
--- a/src/server/api/endpoints/drive/files/upload_from_url.ts
+++ b/src/server/api/endpoints/drive/files/upload_from_url.ts
@@ -3,7 +3,7 @@
  */
 import $ from 'cafy';
 import { pack } from '../../../../../models/drive-file';
-import uploadFromUrl from '../../../../../common/drive/upload_from_url';
+import uploadFromUrl from '../../../../../common/drive/upload-from-url';
 
 /**
  * Create a file from a URL
diff --git a/src/server/api/endpoints/othello/games/show.ts b/src/server/api/endpoints/othello/games/show.ts
index 0d3b539652..0b1c9bc356 100644
--- a/src/server/api/endpoints/othello/games/show.ts
+++ b/src/server/api/endpoints/othello/games/show.ts
@@ -1,6 +1,6 @@
 import $ from 'cafy';
 import OthelloGame, { pack } from '../../../../../models/othello-game';
-import Othello from '../../../../../common/othello/core';
+import Othello from '../../../../../misc/othello/core';
 
 module.exports = (params, user) => new Promise(async (res, rej) => {
 	// Get 'gameId' parameter
diff --git a/src/server/api/endpoints/othello/match.ts b/src/server/api/endpoints/othello/match.ts
index 992b93d418..d9c46aae13 100644
--- a/src/server/api/endpoints/othello/match.ts
+++ b/src/server/api/endpoints/othello/match.ts
@@ -3,7 +3,7 @@ import Matching, { pack as packMatching } from '../../../../models/othello-match
 import OthelloGame, { pack as packGame } from '../../../../models/othello-game';
 import User from '../../../../models/user';
 import publishUserStream, { publishOthelloStream } from '../../../../common/event';
-import { eighteight } from '../../../../common/othello/maps';
+import { eighteight } from '../../../../misc/othello/maps';
 
 module.exports = (params, user) => new Promise(async (res, rej) => {
 	// Get 'userId' parameter
diff --git a/src/server/api/endpoints/posts/create.ts b/src/server/api/endpoints/posts/create.ts
index 4de9176947..c2e790a241 100644
--- a/src/server/api/endpoints/posts/create.ts
+++ b/src/server/api/endpoints/posts/create.ts
@@ -17,8 +17,8 @@ import { pack } from '../../../../models/post';
 import watch from '../../common/watch-post';
 import event, { pushSw, publishChannelStream } from '../../../../common/event';
 import notify from '../../../../common/notify';
-import getAcct from '../../../../common/user/get-acct';
-import parseAcct from '../../../../common/user/parse-acct';
+import getAcct from '../../../../misc/user/get-acct';
+import parseAcct from '../../../../misc/user/parse-acct';
 import config from '../../../../conf';
 
 /**
diff --git a/src/server/api/endpoints/users/show.ts b/src/server/api/endpoints/users/show.ts
index f7b37193b8..2b02799378 100644
--- a/src/server/api/endpoints/users/show.ts
+++ b/src/server/api/endpoints/users/show.ts
@@ -3,7 +3,7 @@
  */
 import $ from 'cafy';
 import User, { pack } from '../../../../models/user';
-import resolveRemoteUser from '../../../../common/remote/resolve-user';
+import resolveRemoteUser from '../../../../remote/resolve-user';
 
 const cursorOption = { fields: { data: false } };
 
diff --git a/src/server/api/limitter.ts b/src/server/api/limitter.ts
index 88ea6c3679..93e03f5e4f 100644
--- a/src/server/api/limitter.ts
+++ b/src/server/api/limitter.ts
@@ -3,7 +3,7 @@ import * as debug from 'debug';
 import limiterDB from '../../db/redis';
 import { Endpoint } from './endpoints';
 import { IAuthContext } from './authenticate';
-import getAcct from '../../common/user/get-acct';
+import getAcct from '../../misc/user/get-acct';
 
 const log = debug('misskey:limitter');
 
diff --git a/src/server/api/stream/othello-game.ts b/src/server/api/stream/othello-game.ts
index b11915f8ff..00367a824e 100644
--- a/src/server/api/stream/othello-game.ts
+++ b/src/server/api/stream/othello-game.ts
@@ -3,8 +3,8 @@ import * as redis from 'redis';
 import * as CRC32 from 'crc-32';
 import OthelloGame, { pack } from '../../../models/othello-game';
 import { publishOthelloGameStream } from '../../../common/event';
-import Othello from '../../../common/othello/core';
-import * as maps from '../../../common/othello/maps';
+import Othello from '../../../misc/othello/core';
+import * as maps from '../../../misc/othello/maps';
 import { ParsedUrlQuery } from 'querystring';
 
 export default function(request: websocket.request, connection: websocket.connection, subscriber: redis.RedisClient, user?: any): void {
diff --git a/src/server/webfinger.ts b/src/server/webfinger.ts
index 864bb4af52..41aeb5642d 100644
--- a/src/server/webfinger.ts
+++ b/src/server/webfinger.ts
@@ -1,5 +1,5 @@
 import config from '../conf';
-import parseAcct from '../common/user/parse-acct';
+import parseAcct from '../misc/user/parse-acct';
 import User from '../models/user';
 const express = require('express');
 
-- 
cgit v1.3.1-freya


From 5b9f3701f58ca00c151498d16b6a839a91ba8643 Mon Sep 17 00:00:00 2001
From: Akihiko Odaki <nekomanma@pixiv.co.jp>
Date: Mon, 2 Apr 2018 12:58:53 +0900
Subject: Abolish common and misc directories

---
 src/client/app/ch/tags/channel.tag                 |   2 +-
 .../app/common/scripts/compose-notification.ts     |   4 +-
 .../app/common/views/components/autocomplete.vue   |   2 +-
 .../views/components/messaging-room.message.vue    |   4 +-
 .../app/common/views/components/messaging.vue      |   2 +-
 .../app/common/views/components/othello.game.vue   |   2 +-
 .../app/common/views/components/othello.room.vue   |   2 +-
 .../app/common/views/components/post-html.ts       |   4 +-
 .../common/views/components/welcome-timeline.vue   |   2 +-
 .../app/desktop/views/components/friends-maker.vue |   2 +-
 .../views/components/messaging-room-window.vue     |   2 +-
 .../app/desktop/views/components/notifications.vue |   4 +-
 .../desktop/views/components/post-detail.sub.vue   |   2 +-
 .../app/desktop/views/components/post-detail.vue   |   4 +-
 .../app/desktop/views/components/post-preview.vue  |   2 +-
 .../desktop/views/components/posts.post.sub.vue    |   2 +-
 .../app/desktop/views/components/posts.post.vue    |   4 +-
 .../app/desktop/views/components/settings.mute.vue |   2 +-
 .../app/desktop/views/components/user-preview.vue  |   4 +-
 .../desktop/views/components/users-list.item.vue   |   2 +-
 src/client/app/desktop/views/pages/home.vue        |   2 +-
 .../app/desktop/views/pages/messaging-room.vue     |   2 +-
 .../views/pages/user/user.followers-you-know.vue   |   2 +-
 .../app/desktop/views/pages/user/user.friends.vue  |   2 +-
 .../app/desktop/views/pages/user/user.header.vue   |   2 +-
 src/client/app/desktop/views/pages/user/user.vue   |   2 +-
 src/client/app/desktop/views/pages/welcome.vue     |   2 +-
 .../desktop/views/widgets/channel.channel.post.vue |   2 +-
 src/client/app/desktop/views/widgets/polls.vue     |   2 +-
 src/client/app/desktop/views/widgets/trends.vue    |   2 +-
 src/client/app/desktop/views/widgets/users.vue     |   2 +-
 src/client/app/mobile/api/post.ts                  |   2 +-
 .../views/components/notification-preview.vue      |   2 +-
 .../app/mobile/views/components/notification.vue   |   4 +-
 .../app/mobile/views/components/post-card.vue      |   4 +-
 .../mobile/views/components/post-detail.sub.vue    |   2 +-
 .../app/mobile/views/components/post-detail.vue    |   4 +-
 .../app/mobile/views/components/post-preview.vue   |   2 +-
 .../app/mobile/views/components/post.sub.vue       |   2 +-
 src/client/app/mobile/views/components/post.vue    |   4 +-
 .../app/mobile/views/components/user-card.vue      |   2 +-
 .../app/mobile/views/components/user-preview.vue   |   2 +-
 src/client/app/mobile/views/pages/followers.vue    |   2 +-
 src/client/app/mobile/views/pages/following.vue    |   2 +-
 src/client/app/mobile/views/pages/home.vue         |   2 +-
 .../app/mobile/views/pages/messaging-room.vue      |   2 +-
 src/client/app/mobile/views/pages/messaging.vue    |   2 +-
 src/client/app/mobile/views/pages/user.vue         |   4 +-
 .../views/pages/user/home.followers-you-know.vue   |   2 +-
 .../app/mobile/views/pages/user/home.photos.vue    |   2 +-
 src/common/drive/add-file.ts                       | 307 -------
 src/common/drive/upload-from-url.ts                |  46 --
 src/common/event.ts                                |  80 --
 src/common/notify.ts                               |  50 --
 src/common/push-sw.ts                              |  52 --
 src/common/text/html.ts                            |  83 --
 src/common/text/parse/core/syntax-highlighter.ts   | 334 --------
 src/common/text/parse/elements/bold.ts             |  14 -
 src/common/text/parse/elements/code.ts             |  17 -
 src/common/text/parse/elements/emoji.ts            |  14 -
 src/common/text/parse/elements/hashtag.ts          |  19 -
 src/common/text/parse/elements/inline-code.ts      |  17 -
 src/common/text/parse/elements/link.ts             |  19 -
 src/common/text/parse/elements/mention.ts          |  17 -
 src/common/text/parse/elements/quote.ts            |  14 -
 src/common/text/parse/elements/url.ts              |  14 -
 src/common/text/parse/index.ts                     |  72 --
 src/drive/add-file.ts                              | 307 +++++++
 src/drive/upload-from-url.ts                       |  46 ++
 src/event.ts                                       |  80 ++
 src/get-notification-summary.ts                    |  27 +
 src/get-post-summary.ts                            |  45 +
 src/get-reaction-emoji.ts                          |  14 +
 src/misc/get-notification-summary.ts               |  27 -
 src/misc/get-post-summary.ts                       |  45 -
 src/misc/get-reaction-emoji.ts                     |  14 -
 src/misc/othello/ai/back.ts                        | 376 ---------
 src/misc/othello/ai/front.ts                       | 233 ------
 src/misc/othello/ai/index.ts                       |   1 -
 src/misc/othello/core.ts                           | 340 --------
 src/misc/othello/maps.ts                           | 911 ---------------------
 src/misc/user/get-acct.ts                          |   3 -
 src/misc/user/get-summary.ts                       |  18 -
 src/misc/user/parse-acct.ts                        |   4 -
 src/notify.ts                                      |  50 ++
 src/othello/ai/back.ts                             | 376 +++++++++
 src/othello/ai/front.ts                            | 233 ++++++
 src/othello/ai/index.ts                            |   1 +
 src/othello/core.ts                                | 340 ++++++++
 src/othello/maps.ts                                | 911 +++++++++++++++++++++
 src/processor/http/follow.ts                       |   4 +-
 src/push-sw.ts                                     |  52 ++
 src/remote/activitypub/create.ts                   |   2 +-
 src/server/activitypub/inbox.ts                    |   2 +-
 src/server/activitypub/post.ts                     |   2 +-
 src/server/activitypub/with-user.ts                |   2 +-
 src/server/api/bot/core.ts                         |   8 +-
 src/server/api/bot/interfaces/line.ts              |   6 +-
 src/server/api/common/read-messaging-message.ts    |   6 +-
 src/server/api/common/read-notification.ts         |   2 +-
 src/server/api/endpoints/drive/files/create.ts     |   2 +-
 src/server/api/endpoints/drive/files/update.ts     |   2 +-
 .../api/endpoints/drive/files/upload_from_url.ts   |   2 +-
 src/server/api/endpoints/drive/folders/create.ts   |   2 +-
 src/server/api/endpoints/drive/folders/update.ts   |   2 +-
 src/server/api/endpoints/following/delete.ts       |   2 +-
 src/server/api/endpoints/i/regenerate_token.ts     |   2 +-
 src/server/api/endpoints/i/update.ts               |   2 +-
 .../api/endpoints/i/update_client_setting.ts       |   2 +-
 src/server/api/endpoints/i/update_home.ts          |   2 +-
 src/server/api/endpoints/i/update_mobile_home.ts   |   2 +-
 .../api/endpoints/messaging/messages/create.ts     |   8 +-
 .../endpoints/notifications/mark_as_read_all.ts    |   2 +-
 src/server/api/endpoints/othello/games/show.ts     |   2 +-
 src/server/api/endpoints/othello/match.ts          |   4 +-
 src/server/api/endpoints/posts/create.ts           |  12 +-
 src/server/api/endpoints/posts/polls/vote.ts       |   4 +-
 src/server/api/endpoints/posts/reactions/create.ts |   4 +-
 src/server/api/limitter.ts                         |   2 +-
 src/server/api/private/signin.ts                   |   2 +-
 src/server/api/service/twitter.ts                  |   2 +-
 src/server/api/stream/othello-game.ts              |   6 +-
 src/server/api/stream/othello.ts                   |   2 +-
 src/server/webfinger.ts                            |   2 +-
 src/text/html.ts                                   |  83 ++
 src/text/parse/core/syntax-highlighter.ts          | 334 ++++++++
 src/text/parse/elements/bold.ts                    |  14 +
 src/text/parse/elements/code.ts                    |  17 +
 src/text/parse/elements/emoji.ts                   |  14 +
 src/text/parse/elements/hashtag.ts                 |  19 +
 src/text/parse/elements/inline-code.ts             |  17 +
 src/text/parse/elements/link.ts                    |  19 +
 src/text/parse/elements/mention.ts                 |  17 +
 src/text/parse/elements/quote.ts                   |  14 +
 src/text/parse/elements/url.ts                     |  14 +
 src/text/parse/index.ts                            |  72 ++
 src/user/get-acct.ts                               |   3 +
 src/user/get-summary.ts                            |  18 +
 src/user/parse-acct.ts                             |   4 +
 139 files changed, 3257 insertions(+), 3257 deletions(-)
 delete mode 100644 src/common/drive/add-file.ts
 delete mode 100644 src/common/drive/upload-from-url.ts
 delete mode 100644 src/common/event.ts
 delete mode 100644 src/common/notify.ts
 delete mode 100644 src/common/push-sw.ts
 delete mode 100644 src/common/text/html.ts
 delete mode 100644 src/common/text/parse/core/syntax-highlighter.ts
 delete mode 100644 src/common/text/parse/elements/bold.ts
 delete mode 100644 src/common/text/parse/elements/code.ts
 delete mode 100644 src/common/text/parse/elements/emoji.ts
 delete mode 100644 src/common/text/parse/elements/hashtag.ts
 delete mode 100644 src/common/text/parse/elements/inline-code.ts
 delete mode 100644 src/common/text/parse/elements/link.ts
 delete mode 100644 src/common/text/parse/elements/mention.ts
 delete mode 100644 src/common/text/parse/elements/quote.ts
 delete mode 100644 src/common/text/parse/elements/url.ts
 delete mode 100644 src/common/text/parse/index.ts
 create mode 100644 src/drive/add-file.ts
 create mode 100644 src/drive/upload-from-url.ts
 create mode 100644 src/event.ts
 create mode 100644 src/get-notification-summary.ts
 create mode 100644 src/get-post-summary.ts
 create mode 100644 src/get-reaction-emoji.ts
 delete mode 100644 src/misc/get-notification-summary.ts
 delete mode 100644 src/misc/get-post-summary.ts
 delete mode 100644 src/misc/get-reaction-emoji.ts
 delete mode 100644 src/misc/othello/ai/back.ts
 delete mode 100644 src/misc/othello/ai/front.ts
 delete mode 100644 src/misc/othello/ai/index.ts
 delete mode 100644 src/misc/othello/core.ts
 delete mode 100644 src/misc/othello/maps.ts
 delete mode 100644 src/misc/user/get-acct.ts
 delete mode 100644 src/misc/user/get-summary.ts
 delete mode 100644 src/misc/user/parse-acct.ts
 create mode 100644 src/notify.ts
 create mode 100644 src/othello/ai/back.ts
 create mode 100644 src/othello/ai/front.ts
 create mode 100644 src/othello/ai/index.ts
 create mode 100644 src/othello/core.ts
 create mode 100644 src/othello/maps.ts
 create mode 100644 src/push-sw.ts
 create mode 100644 src/text/html.ts
 create mode 100644 src/text/parse/core/syntax-highlighter.ts
 create mode 100644 src/text/parse/elements/bold.ts
 create mode 100644 src/text/parse/elements/code.ts
 create mode 100644 src/text/parse/elements/emoji.ts
 create mode 100644 src/text/parse/elements/hashtag.ts
 create mode 100644 src/text/parse/elements/inline-code.ts
 create mode 100644 src/text/parse/elements/link.ts
 create mode 100644 src/text/parse/elements/mention.ts
 create mode 100644 src/text/parse/elements/quote.ts
 create mode 100644 src/text/parse/elements/url.ts
 create mode 100644 src/text/parse/index.ts
 create mode 100644 src/user/get-acct.ts
 create mode 100644 src/user/get-summary.ts
 create mode 100644 src/user/parse-acct.ts

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/ch/tags/channel.tag b/src/client/app/ch/tags/channel.tag
index 70e494aedd..0c139ba267 100644
--- a/src/client/app/ch/tags/channel.tag
+++ b/src/client/app/ch/tags/channel.tag
@@ -229,7 +229,7 @@
 
 	</style>
 	<script lang="typescript">
-		import getAcct from '../../../../misc/user/get-acct';
+		import getAcct from '../../../../user/get-acct';
 
 		this.post = this.opts.post;
 		this.form = this.opts.form;
diff --git a/src/client/app/common/scripts/compose-notification.ts b/src/client/app/common/scripts/compose-notification.ts
index 56fbcb94fc..4030d61ac7 100644
--- a/src/client/app/common/scripts/compose-notification.ts
+++ b/src/client/app/common/scripts/compose-notification.ts
@@ -1,5 +1,5 @@
-import getPostSummary from '../../../../misc/get-post-summary';
-import getReactionEmoji from '../../../../misc/get-reaction-emoji';
+import getPostSummary from '../../../../get-post-summary';
+import getReactionEmoji from '../../../../get-reaction-emoji';
 
 type Notification = {
 	title: string;
diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index edba470581..7bcfc07e91 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -21,7 +21,7 @@
 import Vue from 'vue';
 import * as emojilib from 'emojilib';
 import contains from '../../../common/scripts/contains';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 const lib = Object.entries(emojilib.lib).filter((x: any) => {
 	return x[1].category != 'flags';
diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue
index cad6825f38..3de8321f82 100644
--- a/src/client/app/common/views/components/messaging-room.message.vue
+++ b/src/client/app/common/views/components/messaging-room.message.vue
@@ -34,8 +34,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../misc/user/get-acct';
-import parse from '../../../../../common/text/parse';
+import getAcct from '../../../../../user/get-acct';
+import parse from '../../../../../text/parse';
 
 export default Vue.extend({
 	props: {
diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index f6709d02b4..bde2b2b903 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -51,7 +51,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: {
diff --git a/src/client/app/common/views/components/othello.game.vue b/src/client/app/common/views/components/othello.game.vue
index aa5798d717..b9d946de96 100644
--- a/src/client/app/common/views/components/othello.game.vue
+++ b/src/client/app/common/views/components/othello.game.vue
@@ -43,7 +43,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as CRC32 from 'crc-32';
-import Othello, { Color } from '../../../../../misc/othello/core';
+import Othello, { Color } from '../../../../../othello/core';
 import { url } from '../../../config';
 
 export default Vue.extend({
diff --git a/src/client/app/common/views/components/othello.room.vue b/src/client/app/common/views/components/othello.room.vue
index eb1d3a0c6c..86368b3cc3 100644
--- a/src/client/app/common/views/components/othello.room.vue
+++ b/src/client/app/common/views/components/othello.room.vue
@@ -94,7 +94,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import * as maps from '../../../../../misc/othello/maps';
+import * as maps from '../../../../../othello/maps';
 
 export default Vue.extend({
 	props: ['game', 'connection'],
diff --git a/src/client/app/common/views/components/post-html.ts b/src/client/app/common/views/components/post-html.ts
index 5670ce036a..4018a966e9 100644
--- a/src/client/app/common/views/components/post-html.ts
+++ b/src/client/app/common/views/components/post-html.ts
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import * as emojilib from 'emojilib';
-import parse from '../../../../../common/text/parse';
-import getAcct from '../../../../../misc/user/get-acct';
+import parse from '../../../../../text/parse';
+import getAcct from '../../../../../user/get-acct';
 import { url } from '../../../config';
 import MkUrl from './url.vue';
 
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index 036a77b1ce..94b7f5889e 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -24,7 +24,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/desktop/views/components/friends-maker.vue b/src/client/app/desktop/views/components/friends-maker.vue
index 68ecc6ad46..bfa7503d23 100644
--- a/src/client/app/desktop/views/components/friends-maker.vue
+++ b/src/client/app/desktop/views/components/friends-maker.vue
@@ -22,7 +22,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/desktop/views/components/messaging-room-window.vue b/src/client/app/desktop/views/components/messaging-room-window.vue
index 6106422046..88eb285781 100644
--- a/src/client/app/desktop/views/components/messaging-room-window.vue
+++ b/src/client/app/desktop/views/components/messaging-room-window.vue
@@ -8,7 +8,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { url } from '../../../config';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index 79b16d048d..8c4102494f 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -102,8 +102,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../misc/user/get-acct';
-import getPostSummary from '../../../../../misc/get-post-summary';
+import getAcct from '../../../../../user/get-acct';
+import getPostSummary from '../../../../../get-post-summary';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/desktop/views/components/post-detail.sub.vue b/src/client/app/desktop/views/components/post-detail.sub.vue
index 6fc569adaf..2719fee9dc 100644
--- a/src/client/app/desktop/views/components/post-detail.sub.vue
+++ b/src/client/app/desktop/views/components/post-detail.sub.vue
@@ -28,7 +28,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/desktop/views/components/post-detail.vue b/src/client/app/desktop/views/components/post-detail.vue
index 309c88e702..5911a267fe 100644
--- a/src/client/app/desktop/views/components/post-detail.vue
+++ b/src/client/app/desktop/views/components/post-detail.vue
@@ -78,8 +78,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../misc/user/get-acct';
-import parse from '../../../../../common/text/parse';
+import getAcct from '../../../../../user/get-acct';
+import parse from '../../../../../text/parse';
 
 import MkPostFormWindow from './post-form-window.vue';
 import MkRepostFormWindow from './repost-form-window.vue';
diff --git a/src/client/app/desktop/views/components/post-preview.vue b/src/client/app/desktop/views/components/post-preview.vue
index eb62e4a634..e27f0b4ccd 100644
--- a/src/client/app/desktop/views/components/post-preview.vue
+++ b/src/client/app/desktop/views/components/post-preview.vue
@@ -21,7 +21,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/desktop/views/components/posts.post.sub.vue b/src/client/app/desktop/views/components/posts.post.sub.vue
index d3af0fef6a..16f5c4beee 100644
--- a/src/client/app/desktop/views/components/posts.post.sub.vue
+++ b/src/client/app/desktop/views/components/posts.post.sub.vue
@@ -21,7 +21,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/desktop/views/components/posts.post.vue b/src/client/app/desktop/views/components/posts.post.vue
index 1325e3e4f9..b32ebe944f 100644
--- a/src/client/app/desktop/views/components/posts.post.vue
+++ b/src/client/app/desktop/views/components/posts.post.vue
@@ -85,8 +85,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../misc/user/get-acct';
-import parse from '../../../../../common/text/parse';
+import getAcct from '../../../../../user/get-acct';
+import parse from '../../../../../text/parse';
 
 import MkPostFormWindow from './post-form-window.vue';
 import MkRepostFormWindow from './repost-form-window.vue';
diff --git a/src/client/app/desktop/views/components/settings.mute.vue b/src/client/app/desktop/views/components/settings.mute.vue
index ce8f4b2737..5c8c86222d 100644
--- a/src/client/app/desktop/views/components/settings.mute.vue
+++ b/src/client/app/desktop/views/components/settings.mute.vue
@@ -13,7 +13,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index 595926a819..cad7d455fe 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -29,8 +29,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as anime from 'animejs';
-import getAcct from '../../../../../misc/user/get-acct';
-import parseAcct from '../../../../../misc/user/parse-acct';
+import getAcct from '../../../../../user/get-acct';
+import parseAcct from '../../../../../user/parse-acct';
 
 export default Vue.extend({
 	props: {
diff --git a/src/client/app/desktop/views/components/users-list.item.vue b/src/client/app/desktop/views/components/users-list.item.vue
index 1c40c247ba..a25d68c44a 100644
--- a/src/client/app/desktop/views/components/users-list.item.vue
+++ b/src/client/app/desktop/views/components/users-list.item.vue
@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/desktop/views/pages/home.vue b/src/client/app/desktop/views/pages/home.vue
index fa7c19510b..ad9e2bc9d1 100644
--- a/src/client/app/desktop/views/pages/home.vue
+++ b/src/client/app/desktop/views/pages/home.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
-import getPostSummary from '../../../../../misc/get-post-summary';
+import getPostSummary from '../../../../../get-post-summary';
 
 export default Vue.extend({
 	props: {
diff --git a/src/client/app/desktop/views/pages/messaging-room.vue b/src/client/app/desktop/views/pages/messaging-room.vue
index 244b0c9047..b3d0ff1490 100644
--- a/src/client/app/desktop/views/pages/messaging-room.vue
+++ b/src/client/app/desktop/views/pages/messaging-room.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
-import parseAcct from '../../../../../misc/user/parse-acct';
+import parseAcct from '../../../../../user/parse-acct';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
index e898b62a0c..a8bc67d3a6 100644
--- a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
+++ b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
@@ -13,7 +13,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../misc/user/get-acct';
+import getAcct from '../../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue
index b13eb528ac..6710e37933 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../misc/user/get-acct';
+import getAcct from '../../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index 32e425f86d..7b051224d4 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -22,7 +22,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../misc/user/get-acct';
+import getAcct from '../../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
index 6e68171a67..54d675bbd8 100644
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import parseAcct from '../../../../../../misc/user/parse-acct';
+import parseAcct from '../../../../../../user/parse-acct';
 import Progress from '../../../../common/scripts/loading';
 import XHeader from './user.header.vue';
 import XHome from './user.home.vue';
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 93bb59765c..1e1c490190 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -43,7 +43,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { docsUrl, copyright, lang } from '../../../config';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 const shares = [
 	'Everything!',
diff --git a/src/client/app/desktop/views/widgets/channel.channel.post.vue b/src/client/app/desktop/views/widgets/channel.channel.post.vue
index 255d9a5e67..587371a765 100644
--- a/src/client/app/desktop/views/widgets/channel.channel.post.vue
+++ b/src/client/app/desktop/views/widgets/channel.channel.post.vue
@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/desktop/views/widgets/polls.vue b/src/client/app/desktop/views/widgets/polls.vue
index fd242a04bf..ad7101e0de 100644
--- a/src/client/app/desktop/views/widgets/polls.vue
+++ b/src/client/app/desktop/views/widgets/polls.vue
@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 export default define({
 	name: 'polls',
diff --git a/src/client/app/desktop/views/widgets/trends.vue b/src/client/app/desktop/views/widgets/trends.vue
index 6b22c123be..be62faa42c 100644
--- a/src/client/app/desktop/views/widgets/trends.vue
+++ b/src/client/app/desktop/views/widgets/trends.vue
@@ -15,7 +15,7 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 export default define({
 	name: 'trends',
diff --git a/src/client/app/desktop/views/widgets/users.vue b/src/client/app/desktop/views/widgets/users.vue
index 102739bd0b..c4643f485e 100644
--- a/src/client/app/desktop/views/widgets/users.vue
+++ b/src/client/app/desktop/views/widgets/users.vue
@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 const limit = 3;
 
diff --git a/src/client/app/mobile/api/post.ts b/src/client/app/mobile/api/post.ts
index 8090bbef28..6580cbf4b1 100644
--- a/src/client/app/mobile/api/post.ts
+++ b/src/client/app/mobile/api/post.ts
@@ -1,6 +1,6 @@
 import PostForm from '../views/components/post-form.vue';
 //import RepostForm from '../views/components/repost-form.vue';
-import getPostSummary from '../../../../misc/get-post-summary';
+import getPostSummary from '../../../../get-post-summary';
 
 export default (os) => (opts) => {
 	const o = opts || {};
diff --git a/src/client/app/mobile/views/components/notification-preview.vue b/src/client/app/mobile/views/components/notification-preview.vue
index 2a06d399c8..e7e1f75a87 100644
--- a/src/client/app/mobile/views/components/notification-preview.vue
+++ b/src/client/app/mobile/views/components/notification-preview.vue
@@ -59,7 +59,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getPostSummary from '../../../../../misc/get-post-summary';
+import getPostSummary from '../../../../../get-post-summary';
 
 export default Vue.extend({
 	props: ['notification'],
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index 93b1e84166..d92b019447 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -78,8 +78,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getPostSummary from '../../../../../misc/get-post-summary';
-import getAcct from '../../../../../misc/user/get-acct';
+import getPostSummary from '../../../../../get-post-summary';
+import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: ['notification'],
diff --git a/src/client/app/mobile/views/components/post-card.vue b/src/client/app/mobile/views/components/post-card.vue
index 3f5beb9e0f..893e4c3071 100644
--- a/src/client/app/mobile/views/components/post-card.vue
+++ b/src/client/app/mobile/views/components/post-card.vue
@@ -14,8 +14,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import summary from '../../../../../misc/get-post-summary';
-import getAcct from '../../../../../misc/user/get-acct';
+import summary from '../../../../../get-post-summary';
+import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/mobile/views/components/post-detail.sub.vue b/src/client/app/mobile/views/components/post-detail.sub.vue
index 1fca0881d5..c8e06e26ff 100644
--- a/src/client/app/mobile/views/components/post-detail.sub.vue
+++ b/src/client/app/mobile/views/components/post-detail.sub.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/mobile/views/components/post-detail.vue b/src/client/app/mobile/views/components/post-detail.vue
index a8ebb3b01b..4a293562ee 100644
--- a/src/client/app/mobile/views/components/post-detail.vue
+++ b/src/client/app/mobile/views/components/post-detail.vue
@@ -80,8 +80,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../misc/user/get-acct';
-import parse from '../../../../../common/text/parse';
+import getAcct from '../../../../../user/get-acct';
+import parse from '../../../../../text/parse';
 
 import MkPostMenu from '../../../common/views/components/post-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
diff --git a/src/client/app/mobile/views/components/post-preview.vue b/src/client/app/mobile/views/components/post-preview.vue
index 05dd4a004f..b6916edb43 100644
--- a/src/client/app/mobile/views/components/post-preview.vue
+++ b/src/client/app/mobile/views/components/post-preview.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/mobile/views/components/post.sub.vue b/src/client/app/mobile/views/components/post.sub.vue
index cbd2fad889..7f132b0a4d 100644
--- a/src/client/app/mobile/views/components/post.sub.vue
+++ b/src/client/app/mobile/views/components/post.sub.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/mobile/views/components/post.vue b/src/client/app/mobile/views/components/post.vue
index 6cf24ed6ae..7cfb97425e 100644
--- a/src/client/app/mobile/views/components/post.vue
+++ b/src/client/app/mobile/views/components/post.vue
@@ -77,8 +77,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../misc/user/get-acct';
-import parse from '../../../../../common/text/parse';
+import getAcct from '../../../../../user/get-acct';
+import parse from '../../../../../text/parse';
 
 import MkPostMenu from '../../../common/views/components/post-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
diff --git a/src/client/app/mobile/views/components/user-card.vue b/src/client/app/mobile/views/components/user-card.vue
index fb1b12ce58..542ad20317 100644
--- a/src/client/app/mobile/views/components/user-card.vue
+++ b/src/client/app/mobile/views/components/user-card.vue
@@ -13,7 +13,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/mobile/views/components/user-preview.vue b/src/client/app/mobile/views/components/user-preview.vue
index 4bb8303815..51c32b9fde 100644
--- a/src/client/app/mobile/views/components/user-preview.vue
+++ b/src/client/app/mobile/views/components/user-preview.vue
@@ -17,7 +17,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/mobile/views/pages/followers.vue b/src/client/app/mobile/views/pages/followers.vue
index 28e866efb6..2e984508d5 100644
--- a/src/client/app/mobile/views/pages/followers.vue
+++ b/src/client/app/mobile/views/pages/followers.vue
@@ -19,7 +19,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
-import parseAcct from '../../../../../misc/user/parse-acct';
+import parseAcct from '../../../../../user/parse-acct';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/mobile/views/pages/following.vue b/src/client/app/mobile/views/pages/following.vue
index 7ee3b86287..f5c7223a1b 100644
--- a/src/client/app/mobile/views/pages/following.vue
+++ b/src/client/app/mobile/views/pages/following.vue
@@ -19,7 +19,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
-import parseAcct from '../../../../../misc/user/parse-acct';
+import parseAcct from '../../../../../user/parse-acct';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index f76fdbe19b..b2edf59561 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -64,7 +64,7 @@ import Vue from 'vue';
 import * as XDraggable from 'vuedraggable';
 import * as uuid from 'uuid';
 import Progress from '../../../common/scripts/loading';
-import getPostSummary from '../../../../../misc/get-post-summary';
+import getPostSummary from '../../../../../get-post-summary';
 
 export default Vue.extend({
 	components: {
diff --git a/src/client/app/mobile/views/pages/messaging-room.vue b/src/client/app/mobile/views/pages/messaging-room.vue
index 400f5016e1..14f12a99b9 100644
--- a/src/client/app/mobile/views/pages/messaging-room.vue
+++ b/src/client/app/mobile/views/pages/messaging-room.vue
@@ -10,7 +10,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import parseAcct from '../../../../../misc/user/parse-acct';
+import parseAcct from '../../../../../user/parse-acct';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/mobile/views/pages/messaging.vue b/src/client/app/mobile/views/pages/messaging.vue
index 7ded67cdf3..f3f6f9f9b5 100644
--- a/src/client/app/mobile/views/pages/messaging.vue
+++ b/src/client/app/mobile/views/pages/messaging.vue
@@ -7,7 +7,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../misc/user/get-acct';
+import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
 	mounted() {
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index 01eb408e6d..2d8f9f8ec8 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -60,8 +60,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as age from 's-age';
-import getAcct from '../../../../../misc/user/get-acct';
-import getAcct from '../../../../../misc/user/parse-acct';
+import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../user/parse-acct';
 import Progress from '../../../common/scripts/loading';
 import XHome from './user/home.vue';
 
diff --git a/src/client/app/mobile/views/pages/user/home.followers-you-know.vue b/src/client/app/mobile/views/pages/user/home.followers-you-know.vue
index 8dc4fbb855..04d8538f71 100644
--- a/src/client/app/mobile/views/pages/user/home.followers-you-know.vue
+++ b/src/client/app/mobile/views/pages/user/home.followers-you-know.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../misc/user/get-acct';
+import getAcct from '../../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/mobile/views/pages/user/home.photos.vue b/src/client/app/mobile/views/pages/user/home.photos.vue
index cc35270370..491660711d 100644
--- a/src/client/app/mobile/views/pages/user/home.photos.vue
+++ b/src/client/app/mobile/views/pages/user/home.photos.vue
@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../misc/user/get-acct';
+import getAcct from '../../../../../../user/get-acct';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/common/drive/add-file.ts b/src/common/drive/add-file.ts
deleted file mode 100644
index af85a23d23..0000000000
--- a/src/common/drive/add-file.ts
+++ /dev/null
@@ -1,307 +0,0 @@
-import { Buffer } from 'buffer';
-import * as fs from 'fs';
-import * as tmp from 'tmp';
-import * as stream from 'stream';
-
-import * as mongodb from 'mongodb';
-import * as crypto from 'crypto';
-import * as _gm from 'gm';
-import * as debug from 'debug';
-import fileType = require('file-type');
-import prominence = require('prominence');
-
-import DriveFile, { getGridFSBucket } from '../../models/drive-file';
-import DriveFolder from '../../models/drive-folder';
-import { pack } from '../../models/drive-file';
-import event, { publishDriveStream } from '../event';
-import getAcct from '../../misc/user/get-acct';
-import config from '../../conf';
-
-const gm = _gm.subClass({
-	imageMagick: true
-});
-
-const log = debug('misskey:drive:add-file');
-
-const tmpFile = (): Promise<string> => new Promise((resolve, reject) => {
-	tmp.file((e, path) => {
-		if (e) return reject(e);
-		resolve(path);
-	});
-});
-
-const addToGridFS = (name: string, readable: stream.Readable, type: string, metadata: any): Promise<any> =>
-	getGridFSBucket()
-		.then(bucket => new Promise((resolve, reject) => {
-			const writeStream = bucket.openUploadStream(name, { contentType: type, metadata });
-			writeStream.once('finish', (doc) => { resolve(doc); });
-			writeStream.on('error', reject);
-			readable.pipe(writeStream);
-		}));
-
-const addFile = async (
-	user: any,
-	path: string,
-	name: string = null,
-	comment: string = null,
-	folderId: mongodb.ObjectID = null,
-	force: boolean = false
-) => {
-	log(`registering ${name} (user: ${getAcct(user)}, path: ${path})`);
-
-	// Calculate hash, get content type and get file size
-	const [hash, [mime, ext], size] = await Promise.all([
-		// hash
-		((): Promise<string> => new Promise((res, rej) => {
-			const readable = fs.createReadStream(path);
-			const hash = crypto.createHash('md5');
-			const chunks = [];
-			readable
-				.on('error', rej)
-				.pipe(hash)
-				.on('error', rej)
-				.on('data', (chunk) => chunks.push(chunk))
-				.on('end', () => {
-					const buffer = Buffer.concat(chunks);
-					res(buffer.toString('hex'));
-				});
-		}))(),
-		// mime
-		((): Promise<[string, string | null]> => new Promise((res, rej) => {
-			const readable = fs.createReadStream(path);
-			readable
-				.on('error', rej)
-				.once('data', (buffer: Buffer) => {
-					readable.destroy();
-					const type = fileType(buffer);
-					if (type) {
-						return res([type.mime, type.ext]);
-					} else {
-						// 種類が同定できなかったら application/octet-stream にする
-						return res(['application/octet-stream', null]);
-					}
-				});
-		}))(),
-		// size
-		((): Promise<number> => new Promise((res, rej) => {
-			fs.stat(path, (err, stats) => {
-				if (err) return rej(err);
-				res(stats.size);
-			});
-		}))()
-	]);
-
-	log(`hash: ${hash}, mime: ${mime}, ext: ${ext}, size: ${size}`);
-
-	// detect name
-	const detectedName: string = name || (ext ? `untitled.${ext}` : 'untitled');
-
-	if (!force) {
-		// Check if there is a file with the same hash
-		const much = await DriveFile.findOne({
-			md5: hash,
-			'metadata.userId': user._id
-		});
-
-		if (much !== null) {
-			log('file with same hash is found');
-			return much;
-		} else {
-			log('file with same hash is not found');
-		}
-	}
-
-	const [wh, averageColor, folder] = await Promise.all([
-		// Width and height (when image)
-		(async () => {
-			// 画像かどうか
-			if (!/^image\/.*$/.test(mime)) {
-				return null;
-			}
-
-			const imageType = mime.split('/')[1];
-
-			// 画像でもPNGかJPEGかGIFでないならスキップ
-			if (imageType != 'png' && imageType != 'jpeg' && imageType != 'gif') {
-				return null;
-			}
-
-			log('calculate image width and height...');
-
-			// Calculate width and height
-			const g = gm(fs.createReadStream(path), name);
-			const size = await prominence(g).size();
-
-			log(`image width and height is calculated: ${size.width}, ${size.height}`);
-
-			return [size.width, size.height];
-		})(),
-		// average color (when image)
-		(async () => {
-			// 画像かどうか
-			if (!/^image\/.*$/.test(mime)) {
-				return null;
-			}
-
-			const imageType = mime.split('/')[1];
-
-			// 画像でもPNGかJPEGでないならスキップ
-			if (imageType != 'png' && imageType != 'jpeg') {
-				return null;
-			}
-
-			log('calculate average color...');
-
-			const buffer = await prominence(gm(fs.createReadStream(path), name)
-				.setFormat('ppm')
-				.resize(1, 1)) // 1pxのサイズに縮小して平均色を取得するというハック
-				.toBuffer();
-
-			const r = buffer.readUInt8(buffer.length - 3);
-			const g = buffer.readUInt8(buffer.length - 2);
-			const b = buffer.readUInt8(buffer.length - 1);
-
-			log(`average color is calculated: ${r}, ${g}, ${b}`);
-
-			return [r, g, b];
-		})(),
-		// folder
-		(async () => {
-			if (!folderId) {
-				return null;
-			}
-			const driveFolder = await DriveFolder.findOne({
-				_id: folderId,
-				userId: user._id
-			});
-			if (!driveFolder) {
-				throw 'folder-not-found';
-			}
-			return driveFolder;
-		})(),
-		// usage checker
-		(async () => {
-			// Calculate drive usage
-			const usage = await DriveFile
-				.aggregate([{
-					$match: { 'metadata.userId': user._id }
-				}, {
-					$project: {
-						length: true
-					}
-				}, {
-					$group: {
-						_id: null,
-						usage: { $sum: '$length' }
-					}
-				}])
-				.then((aggregates: any[]) => {
-					if (aggregates.length > 0) {
-						return aggregates[0].usage;
-					}
-					return 0;
-				});
-
-			log(`drive usage is ${usage}`);
-
-			// If usage limit exceeded
-			if (usage + size > user.driveCapacity) {
-				throw 'no-free-space';
-			}
-		})()
-	]);
-
-	const readable = fs.createReadStream(path);
-
-	const properties = {};
-
-	if (wh) {
-		properties['width'] = wh[0];
-		properties['height'] = wh[1];
-	}
-
-	if (averageColor) {
-		properties['avgColor'] = averageColor;
-	}
-
-	return addToGridFS(detectedName, readable, mime, {
-		userId: user._id,
-		folderId: folder !== null ? folder._id : null,
-		comment: comment,
-		properties: properties
-	});
-};
-
-/**
- * Add file to drive
- *
- * @param user User who wish to add file
- * @param file File path or readableStream
- * @param comment Comment
- * @param type File type
- * @param folderId Folder ID
- * @param force If set to true, forcibly upload the file even if there is a file with the same hash.
- * @return Object that represents added file
- */
-export default (user: any, file: string | stream.Readable, ...args) => new Promise<any>((resolve, reject) => {
-	// Get file path
-	new Promise((res: (v: [string, boolean]) => void, rej) => {
-		if (typeof file === 'string') {
-			res([file, false]);
-			return;
-		}
-		if (typeof file === 'object' && typeof file.read === 'function') {
-			tmpFile()
-				.then(path => {
-					const readable: stream.Readable = file;
-					const writable = fs.createWriteStream(path);
-					readable
-						.on('error', rej)
-						.on('end', () => {
-							res([path, true]);
-						})
-						.pipe(writable)
-						.on('error', rej);
-				})
-				.catch(rej);
-		}
-		rej(new Error('un-compatible file.'));
-	})
-	.then(([path, shouldCleanup]): Promise<any> => new Promise((res, rej) => {
-		addFile(user, path, ...args)
-			.then(file => {
-				res(file);
-				if (shouldCleanup) {
-					fs.unlink(path, (e) => {
-						if (e) log(e.stack);
-					});
-				}
-			})
-			.catch(rej);
-	}))
-	.then(file => {
-		log(`drive file has been created ${file._id}`);
-		resolve(file);
-
-		pack(file).then(serializedFile => {
-			// Publish drive_file_created event
-			event(user._id, 'drive_file_created', serializedFile);
-			publishDriveStream(user._id, 'file_created', serializedFile);
-
-			// Register to search database
-			if (config.elasticsearch.enable) {
-				const es = require('../../db/elasticsearch');
-				es.index({
-					index: 'misskey',
-					type: 'drive_file',
-					id: file._id.toString(),
-					body: {
-						name: file.name,
-						userId: user._id.toString()
-					}
-				});
-			}
-		});
-	})
-	.catch(reject);
-});
diff --git a/src/common/drive/upload-from-url.ts b/src/common/drive/upload-from-url.ts
deleted file mode 100644
index 5dd9695936..0000000000
--- a/src/common/drive/upload-from-url.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as URL from 'url';
-import { IDriveFile, validateFileName } from '../../models/drive-file';
-import create from './add-file';
-import * as debug from 'debug';
-import * as tmp from 'tmp';
-import * as fs from 'fs';
-import * as request from 'request';
-
-const log = debug('misskey:common:drive:upload_from_url');
-
-export default async (url, user, folderId = null): Promise<IDriveFile> => {
-	let name = URL.parse(url).pathname.split('/').pop();
-	if (!validateFileName(name)) {
-		name = null;
-	}
-
-	// Create temp file
-	const path = await new Promise((res: (string) => void, rej) => {
-		tmp.file((e, path) => {
-			if (e) return rej(e);
-			res(path);
-		});
-	});
-
-	// write content at URL to temp file
-	await new Promise((res, rej) => {
-		const writable = fs.createWriteStream(path);
-		request(url)
-			.on('error', rej)
-			.on('end', () => {
-				writable.close();
-				res(path);
-			})
-			.pipe(writable)
-			.on('error', rej);
-	});
-
-	const driveFile = await create(user, path, name, null, folderId);
-
-	// clean-up
-	fs.unlink(path, (e) => {
-		if (e) log(e.stack);
-	});
-
-	return driveFile;
-};
diff --git a/src/common/event.ts b/src/common/event.ts
deleted file mode 100644
index 53520f11ce..0000000000
--- a/src/common/event.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import * as mongo from 'mongodb';
-import * as redis from 'redis';
-import swPush from './push-sw';
-import config from '../conf';
-
-type ID = string | mongo.ObjectID;
-
-class MisskeyEvent {
-	private redisClient: redis.RedisClient;
-
-	constructor() {
-		// Connect to Redis
-		this.redisClient = redis.createClient(
-			config.redis.port, config.redis.host);
-	}
-
-	public publishUserStream(userId: ID, type: string, value?: any): void {
-		this.publish(`user-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
-	}
-
-	public publishSw(userId: ID, type: string, value?: any): void {
-		swPush(userId, type, value);
-	}
-
-	public publishDriveStream(userId: ID, type: string, value?: any): void {
-		this.publish(`drive-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
-	}
-
-	public publishPostStream(postId: ID, type: string, value?: any): void {
-		this.publish(`post-stream:${postId}`, type, typeof value === 'undefined' ? null : value);
-	}
-
-	public publishMessagingStream(userId: ID, otherpartyId: ID, type: string, value?: any): void {
-		this.publish(`messaging-stream:${userId}-${otherpartyId}`, type, typeof value === 'undefined' ? null : value);
-	}
-
-	public publishMessagingIndexStream(userId: ID, type: string, value?: any): void {
-		this.publish(`messaging-index-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
-	}
-
-	public publishOthelloStream(userId: ID, type: string, value?: any): void {
-		this.publish(`othello-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
-	}
-
-	public publishOthelloGameStream(gameId: ID, type: string, value?: any): void {
-		this.publish(`othello-game-stream:${gameId}`, type, typeof value === 'undefined' ? null : value);
-	}
-
-	public publishChannelStream(channelId: ID, type: string, value?: any): void {
-		this.publish(`channel-stream:${channelId}`, type, typeof value === 'undefined' ? null : value);
-	}
-
-	private publish(channel: string, type: string, value?: any): void {
-		const message = value == null ?
-			{ type: type } :
-			{ type: type, body: value };
-
-		this.redisClient.publish(`misskey:${channel}`, JSON.stringify(message));
-	}
-}
-
-const ev = new MisskeyEvent();
-
-export default ev.publishUserStream.bind(ev);
-
-export const pushSw = ev.publishSw.bind(ev);
-
-export const publishDriveStream = ev.publishDriveStream.bind(ev);
-
-export const publishPostStream = ev.publishPostStream.bind(ev);
-
-export const publishMessagingStream = ev.publishMessagingStream.bind(ev);
-
-export const publishMessagingIndexStream = ev.publishMessagingIndexStream.bind(ev);
-
-export const publishOthelloStream = ev.publishOthelloStream.bind(ev);
-
-export const publishOthelloGameStream = ev.publishOthelloGameStream.bind(ev);
-
-export const publishChannelStream = ev.publishChannelStream.bind(ev);
diff --git a/src/common/notify.ts b/src/common/notify.ts
deleted file mode 100644
index fc65820d3b..0000000000
--- a/src/common/notify.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as mongo from 'mongodb';
-import Notification from '../models/notification';
-import Mute from '../models/mute';
-import event from './event';
-import { pack } from '../models/notification';
-
-export default (
-	notifiee: mongo.ObjectID,
-	notifier: mongo.ObjectID,
-	type: string,
-	content?: any
-) => new Promise<any>(async (resolve, reject) => {
-	if (notifiee.equals(notifier)) {
-		return resolve();
-	}
-
-	// Create notification
-	const notification = await Notification.insert(Object.assign({
-		createdAt: new Date(),
-		notifieeId: notifiee,
-		notifierId: notifier,
-		type: type,
-		isRead: false
-	}, content));
-
-	resolve(notification);
-
-	// Publish notification event
-	event(notifiee, 'notification',
-		await pack(notification));
-
-	// 3秒経っても(今回作成した)通知が既読にならなかったら「未読の通知がありますよ」イベントを発行する
-	setTimeout(async () => {
-		const fresh = await Notification.findOne({ _id: notification._id }, { isRead: true });
-		if (!fresh.isRead) {
-			//#region ただしミュートしているユーザーからの通知なら無視
-			const mute = await Mute.find({
-				muterId: notifiee,
-				deletedAt: { $exists: false }
-			});
-			const mutedUserIds = mute.map(m => m.muteeId.toString());
-			if (mutedUserIds.indexOf(notifier.toString()) != -1) {
-				return;
-			}
-			//#endregion
-
-			event(notifiee, 'unread_notification', await pack(notification));
-		}
-	}, 3000);
-});
diff --git a/src/common/push-sw.ts b/src/common/push-sw.ts
deleted file mode 100644
index 44c328e833..0000000000
--- a/src/common/push-sw.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-const push = require('web-push');
-import * as mongo from 'mongodb';
-import Subscription from '../models/sw-subscription';
-import config from '../conf';
-
-if (config.sw) {
-	// アプリケーションの連絡先と、サーバーサイドの鍵ペアの情報を登録
-	push.setVapidDetails(
-		config.maintainer.url,
-		config.sw.public_key,
-		config.sw.private_key);
-}
-
-export default async function(userId: mongo.ObjectID | string, type, body?) {
-	if (!config.sw) return;
-
-	if (typeof userId === 'string') {
-		userId = new mongo.ObjectID(userId);
-	}
-
-	// Fetch
-	const subscriptions = await Subscription.find({
-		userId: userId
-	});
-
-	subscriptions.forEach(subscription => {
-		const pushSubscription = {
-			endpoint: subscription.endpoint,
-			keys: {
-				auth: subscription.auth,
-				p256dh: subscription.publickey
-			}
-		};
-
-		push.sendNotification(pushSubscription, JSON.stringify({
-			type, body
-		})).catch(err => {
-			//console.log(err.statusCode);
-			//console.log(err.headers);
-			//console.log(err.body);
-
-			if (err.statusCode == 410) {
-				Subscription.remove({
-					userId: userId,
-					endpoint: subscription.endpoint,
-					auth: subscription.auth,
-					publickey: subscription.publickey
-				});
-			}
-		});
-	});
-}
diff --git a/src/common/text/html.ts b/src/common/text/html.ts
deleted file mode 100644
index 797f3b3f33..0000000000
--- a/src/common/text/html.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { lib as emojilib } from 'emojilib';
-import { JSDOM } from 'jsdom';
-
-const handlers = {
-	bold({ document }, { bold }) {
-		const b = document.createElement('b');
-		b.textContent = bold;
-		document.body.appendChild(b);
-	},
-
-	code({ document }, { code }) {
-		const pre = document.createElement('pre');
-		const inner = document.createElement('code');
-		inner.innerHTML = code;
-		pre.appendChild(inner);
-		document.body.appendChild(pre);
-	},
-
-	emoji({ document }, { content, emoji }) {
-		const found = emojilib[emoji];
-		const node = document.createTextNode(found ? found.char : content);
-		document.body.appendChild(node);
-	},
-
-	hashtag({ document }, { hashtag }) {
-		const a = document.createElement('a');
-		a.href = '/search?q=#' + hashtag;
-		a.textContent = hashtag;
-	},
-
-	'inline-code'({ document }, { code }) {
-		const element = document.createElement('code');
-		element.textContent = code;
-		document.body.appendChild(element);
-	},
-
-	link({ document }, { url, title }) {
-		const a = document.createElement('a');
-		a.href = url;
-		a.textContent = title;
-		document.body.appendChild(a);
-	},
-
-	mention({ document }, { content }) {
-		const a = document.createElement('a');
-		a.href = '/' + content;
-		a.textContent = content;
-		document.body.appendChild(a);
-	},
-
-	quote({ document }, { quote }) {
-		const blockquote = document.createElement('blockquote');
-		blockquote.textContent = quote;
-		document.body.appendChild(blockquote);
-	},
-
-	text({ document }, { content }) {
-		for (const text of content.split('\n')) {
-			const node = document.createTextNode(text);
-			document.body.appendChild(node);
-
-			const br = document.createElement('br');
-			document.body.appendChild(br);
-		}
-	},
-
-	url({ document }, { url }) {
-		const a = document.createElement('a');
-		a.href = url;
-		a.textContent = url;
-		document.body.appendChild(a);
-	}
-};
-
-export default tokens => {
-	const { window } = new JSDOM('');
-
-	for (const token of tokens) {
-		handlers[token.type](window, token);
-	}
-
-	return `<p>${window.document.body.innerHTML}</p>`;
-};
diff --git a/src/common/text/parse/core/syntax-highlighter.ts b/src/common/text/parse/core/syntax-highlighter.ts
deleted file mode 100644
index c0396b1fc6..0000000000
--- a/src/common/text/parse/core/syntax-highlighter.ts
+++ /dev/null
@@ -1,334 +0,0 @@
-function escape(text) {
-	return text
-		.replace(/>/g, '&gt;')
-		.replace(/</g, '&lt;');
-}
-
-// 文字数が多い順にソートします
-// そうしないと、「function」という文字列が与えられたときに「func」が先にマッチしてしまう可能性があるためです
-const _keywords = [
-	'true',
-	'false',
-	'null',
-	'nil',
-	'undefined',
-	'void',
-	'var',
-	'const',
-	'let',
-	'mut',
-	'dim',
-	'if',
-	'then',
-	'else',
-	'switch',
-	'match',
-	'case',
-	'default',
-	'for',
-	'each',
-	'in',
-	'while',
-	'loop',
-	'continue',
-	'break',
-	'do',
-	'goto',
-	'next',
-	'end',
-	'sub',
-	'throw',
-	'try',
-	'catch',
-	'finally',
-	'enum',
-	'delegate',
-	'function',
-	'func',
-	'fun',
-	'fn',
-	'return',
-	'yield',
-	'async',
-	'await',
-	'require',
-	'include',
-	'import',
-	'imports',
-	'export',
-	'exports',
-	'from',
-	'as',
-	'using',
-	'use',
-	'internal',
-	'module',
-	'namespace',
-	'where',
-	'select',
-	'struct',
-	'union',
-	'new',
-	'delete',
-	'this',
-	'super',
-	'base',
-	'class',
-	'interface',
-	'abstract',
-	'static',
-	'public',
-	'private',
-	'protected',
-	'virtual',
-	'partial',
-	'override',
-	'extends',
-	'implements',
-	'constructor'
-];
-
-const keywords = _keywords
-	.concat(_keywords.map(k => k[0].toUpperCase() + k.substr(1)))
-	.concat(_keywords.map(k => k.toUpperCase()))
-	.sort((a, b) => b.length - a.length);
-
-const symbols = [
-	'=',
-	'+',
-	'-',
-	'*',
-	'/',
-	'%',
-	'~',
-	'^',
-	'&',
-	'|',
-	'>',
-	'<',
-	'!',
-	'?'
-];
-
-const elements = [
-	// comment
-	code => {
-		if (code.substr(0, 2) != '//') return null;
-		const match = code.match(/^\/\/(.+?)(\n|$)/);
-		if (!match) return null;
-		const comment = match[0];
-		return {
-			html: `<span class="comment">${escape(comment)}</span>`,
-			next: comment.length
-		};
-	},
-
-	// block comment
-	code => {
-		const match = code.match(/^\/\*([\s\S]+?)\*\//);
-		if (!match) return null;
-		return {
-			html: `<span class="comment">${escape(match[0])}</span>`,
-			next: match[0].length
-		};
-	},
-
-	// string
-	code => {
-		if (!/^['"`]/.test(code)) return null;
-		const begin = code[0];
-		let str = begin;
-		let thisIsNotAString = false;
-		for (let i = 1; i < code.length; i++) {
-			const char = code[i];
-			if (char == '\\') {
-				str += char;
-				str += code[i + 1] || '';
-				i++;
-				continue;
-			} else if (char == begin) {
-				str += char;
-				break;
-			} else if (char == '\n' || i == (code.length - 1)) {
-				thisIsNotAString = true;
-				break;
-			} else {
-				str += char;
-			}
-		}
-		if (thisIsNotAString) {
-			return null;
-		} else {
-			return {
-				html: `<span class="string">${escape(str)}</span>`,
-				next: str.length
-			};
-		}
-	},
-
-	// regexp
-	code => {
-		if (code[0] != '/') return null;
-		let regexp = '';
-		let thisIsNotARegexp = false;
-		for (let i = 1; i < code.length; i++) {
-			const char = code[i];
-			if (char == '\\') {
-				regexp += char;
-				regexp += code[i + 1] || '';
-				i++;
-				continue;
-			} else if (char == '/') {
-				break;
-			} else if (char == '\n' || i == (code.length - 1)) {
-				thisIsNotARegexp = true;
-				break;
-			} else {
-				regexp += char;
-			}
-		}
-
-		if (thisIsNotARegexp) return null;
-		if (regexp == '') return null;
-		if (regexp[0] == ' ' && regexp[regexp.length - 1] == ' ') return null;
-
-		return {
-			html: `<span class="regexp">/${escape(regexp)}/</span>`,
-			next: regexp.length + 2
-		};
-	},
-
-	// label
-	code => {
-		if (code[0] != '@') return null;
-		const match = code.match(/^@([a-zA-Z_-]+?)\n/);
-		if (!match) return null;
-		const label = match[0];
-		return {
-			html: `<span class="label">${label}</span>`,
-			next: label.length
-		};
-	},
-
-	// number
-	(code, i, source) => {
-		const prev = source[i - 1];
-		if (prev && /[a-zA-Z]/.test(prev)) return null;
-		if (!/^[\-\+]?[0-9\.]+/.test(code)) return null;
-		const match = code.match(/^[\-\+]?[0-9\.]+/)[0];
-		if (match) {
-			return {
-				html: `<span class="number">${match}</span>`,
-				next: match.length
-			};
-		} else {
-			return null;
-		}
-	},
-
-	// nan
-	(code, i, source) => {
-		const prev = source[i - 1];
-		if (prev && /[a-zA-Z]/.test(prev)) return null;
-		if (code.substr(0, 3) == 'NaN') {
-			return {
-				html: `<span class="nan">NaN</span>`,
-				next: 3
-			};
-		} else {
-			return null;
-		}
-	},
-
-	// method
-	code => {
-		const match = code.match(/^([a-zA-Z_-]+?)\(/);
-		if (!match) return null;
-
-		if (match[1] == '-') return null;
-
-		return {
-			html: `<span class="method">${match[1]}</span>`,
-			next: match[1].length
-		};
-	},
-
-	// property
-	(code, i, source) => {
-		const prev = source[i - 1];
-		if (prev != '.') return null;
-
-		const match = code.match(/^[a-zA-Z0-9_-]+/);
-		if (!match) return null;
-
-		return {
-			html: `<span class="property">${match[0]}</span>`,
-			next: match[0].length
-		};
-	},
-
-	// keyword
-	(code, i, source) => {
-		const prev = source[i - 1];
-		if (prev && /[a-zA-Z]/.test(prev)) return null;
-
-		const match = keywords.filter(k => code.substr(0, k.length) == k)[0];
-		if (match) {
-			if (/^[a-zA-Z]/.test(code.substr(match.length))) return null;
-			return {
-				html: `<span class="keyword ${match}">${match}</span>`,
-				next: match.length
-			};
-		} else {
-			return null;
-		}
-	},
-
-	// symbol
-	code => {
-		const match = symbols.filter(s => code[0] == s)[0];
-		if (match) {
-			return {
-				html: `<span class="symbol">${match}</span>`,
-				next: 1
-			};
-		} else {
-			return null;
-		}
-	}
-];
-
-// specify lang is todo
-export default (source: string, lang?: string) => {
-	let code = source;
-	let html = '';
-
-	let i = 0;
-
-	function push(token) {
-		html += token.html;
-		code = code.substr(token.next);
-		i += token.next;
-	}
-
-	while (code != '') {
-		const parsed = elements.some(el => {
-			const e = el(code, i, source);
-			if (e) {
-				push(e);
-				return true;
-			} else {
-				return false;
-			}
-		});
-
-		if (!parsed) {
-			push({
-				html: escape(code[0]),
-				next: 1
-			});
-		}
-	}
-
-	return html;
-};
diff --git a/src/common/text/parse/elements/bold.ts b/src/common/text/parse/elements/bold.ts
deleted file mode 100644
index ce25764457..0000000000
--- a/src/common/text/parse/elements/bold.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Bold
- */
-
-module.exports = text => {
-	const match = text.match(/^\*\*(.+?)\*\*/);
-	if (!match) return null;
-	const bold = match[0];
-	return {
-		type: 'bold',
-		content: bold,
-		bold: bold.substr(2, bold.length - 4)
-	};
-};
diff --git a/src/common/text/parse/elements/code.ts b/src/common/text/parse/elements/code.ts
deleted file mode 100644
index 4821e95fe2..0000000000
--- a/src/common/text/parse/elements/code.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Code (block)
- */
-
-import genHtml from '../core/syntax-highlighter';
-
-module.exports = text => {
-	const match = text.match(/^```([\s\S]+?)```/);
-	if (!match) return null;
-	const code = match[0];
-	return {
-		type: 'code',
-		content: code,
-		code: code.substr(3, code.length - 6).trim(),
-		html: genHtml(code.substr(3, code.length - 6).trim())
-	};
-};
diff --git a/src/common/text/parse/elements/emoji.ts b/src/common/text/parse/elements/emoji.ts
deleted file mode 100644
index e24231a223..0000000000
--- a/src/common/text/parse/elements/emoji.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Emoji
- */
-
-module.exports = text => {
-	const match = text.match(/^:[a-zA-Z0-9+-_]+:/);
-	if (!match) return null;
-	const emoji = match[0];
-	return {
-		type: 'emoji',
-		content: emoji,
-		emoji: emoji.substr(1, emoji.length - 2)
-	};
-};
diff --git a/src/common/text/parse/elements/hashtag.ts b/src/common/text/parse/elements/hashtag.ts
deleted file mode 100644
index ee57b140b8..0000000000
--- a/src/common/text/parse/elements/hashtag.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Hashtag
- */
-
-module.exports = (text, i) => {
-	if (!(/^\s#[^\s]+/.test(text) || (i == 0 && /^#[^\s]+/.test(text)))) return null;
-	const isHead = text[0] == '#';
-	const hashtag = text.match(/^\s?#[^\s]+/)[0];
-	const res: any[] = !isHead ? [{
-		type: 'text',
-		content: text[0]
-	}] : [];
-	res.push({
-		type: 'hashtag',
-		content: isHead ? hashtag : hashtag.substr(1),
-		hashtag: isHead ? hashtag.substr(1) : hashtag.substr(2)
-	});
-	return res;
-};
diff --git a/src/common/text/parse/elements/inline-code.ts b/src/common/text/parse/elements/inline-code.ts
deleted file mode 100644
index 9f9ef51a2b..0000000000
--- a/src/common/text/parse/elements/inline-code.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Code (inline)
- */
-
-import genHtml from '../core/syntax-highlighter';
-
-module.exports = text => {
-	const match = text.match(/^`(.+?)`/);
-	if (!match) return null;
-	const code = match[0];
-	return {
-		type: 'inline-code',
-		content: code,
-		code: code.substr(1, code.length - 2).trim(),
-		html: genHtml(code.substr(1, code.length - 2).trim())
-	};
-};
diff --git a/src/common/text/parse/elements/link.ts b/src/common/text/parse/elements/link.ts
deleted file mode 100644
index 35563ddc3d..0000000000
--- a/src/common/text/parse/elements/link.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Link
- */
-
-module.exports = text => {
-	const match = text.match(/^\??\[([^\[\]]+?)\]\((https?:\/\/[\w\/:%#@\$&\?!\(\)\[\]~\.=\+\-]+?)\)/);
-	if (!match) return null;
-	const silent = text[0] == '?';
-	const link = match[0];
-	const title = match[1];
-	const url = match[2];
-	return {
-		type: 'link',
-		content: link,
-		title: title,
-		url: url,
-		silent: silent
-	};
-};
diff --git a/src/common/text/parse/elements/mention.ts b/src/common/text/parse/elements/mention.ts
deleted file mode 100644
index 3c81979d0c..0000000000
--- a/src/common/text/parse/elements/mention.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Mention
- */
-import parseAcct from '../../../../misc/user/parse-acct';
-
-module.exports = text => {
-	const match = text.match(/^(?:@[a-zA-Z0-9\-]+){1,2}/);
-	if (!match) return null;
-	const mention = match[0];
-	const { username, host } = parseAcct(mention.substr(1));
-	return {
-		type: 'mention',
-		content: mention,
-		username,
-		host
-	};
-};
diff --git a/src/common/text/parse/elements/quote.ts b/src/common/text/parse/elements/quote.ts
deleted file mode 100644
index cc8cfffdc4..0000000000
--- a/src/common/text/parse/elements/quote.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Quoted text
- */
-
-module.exports = text => {
-	const match = text.match(/^"([\s\S]+?)\n"/);
-	if (!match) return null;
-	const quote = match[0];
-	return {
-		type: 'quote',
-		content: quote,
-		quote: quote.substr(1, quote.length - 2).trim(),
-	};
-};
diff --git a/src/common/text/parse/elements/url.ts b/src/common/text/parse/elements/url.ts
deleted file mode 100644
index 1003aff9c3..0000000000
--- a/src/common/text/parse/elements/url.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * URL
- */
-
-module.exports = text => {
-	const match = text.match(/^https?:\/\/[\w\/:%#@\$&\?!\(\)\[\]~\.=\+\-]+/);
-	if (!match) return null;
-	const url = match[0];
-	return {
-		type: 'url',
-		content: url,
-		url: url
-	};
-};
diff --git a/src/common/text/parse/index.ts b/src/common/text/parse/index.ts
deleted file mode 100644
index b958da81b0..0000000000
--- a/src/common/text/parse/index.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Misskey Text Analyzer
- */
-
-const elements = [
-	require('./elements/bold'),
-	require('./elements/url'),
-	require('./elements/link'),
-	require('./elements/mention'),
-	require('./elements/hashtag'),
-	require('./elements/code'),
-	require('./elements/inline-code'),
-	require('./elements/quote'),
-	require('./elements/emoji')
-];
-
-export default (source: string): any[] => {
-
-	if (source == '') {
-		return null;
-	}
-
-	const tokens = [];
-
-	function push(token) {
-		if (token != null) {
-			tokens.push(token);
-			source = source.substr(token.content.length);
-		}
-	}
-
-	let i = 0;
-
-	// パース
-	while (source != '') {
-		const parsed = elements.some(el => {
-			let _tokens = el(source, i);
-			if (_tokens) {
-				if (!Array.isArray(_tokens)) {
-					_tokens = [_tokens];
-				}
-				_tokens.forEach(push);
-				return true;
-			} else {
-				return false;
-			}
-		});
-
-		if (!parsed) {
-			push({
-				type: 'text',
-				content: source[0]
-			});
-		}
-
-		i++;
-	}
-
-	// テキストを纏める
-	tokens[0] = [tokens[0]];
-	return tokens.reduce((a, b) => {
-		if (a[a.length - 1].type == 'text' && b.type == 'text') {
-			const tail = a.pop();
-			return a.concat({
-				type: 'text',
-				content: tail.content + b.content
-			});
-		} else {
-			return a.concat(b);
-		}
-	});
-};
diff --git a/src/drive/add-file.ts b/src/drive/add-file.ts
new file mode 100644
index 0000000000..f356af00d8
--- /dev/null
+++ b/src/drive/add-file.ts
@@ -0,0 +1,307 @@
+import { Buffer } from 'buffer';
+import * as fs from 'fs';
+import * as tmp from 'tmp';
+import * as stream from 'stream';
+
+import * as mongodb from 'mongodb';
+import * as crypto from 'crypto';
+import * as _gm from 'gm';
+import * as debug from 'debug';
+import fileType = require('file-type');
+import prominence = require('prominence');
+
+import DriveFile, { getGridFSBucket } from '../models/drive-file';
+import DriveFolder from '../models/drive-folder';
+import { pack } from '../models/drive-file';
+import event, { publishDriveStream } from '../event';
+import getAcct from '../user/get-acct';
+import config from '../conf';
+
+const gm = _gm.subClass({
+	imageMagick: true
+});
+
+const log = debug('misskey:drive:add-file');
+
+const tmpFile = (): Promise<string> => new Promise((resolve, reject) => {
+	tmp.file((e, path) => {
+		if (e) return reject(e);
+		resolve(path);
+	});
+});
+
+const addToGridFS = (name: string, readable: stream.Readable, type: string, metadata: any): Promise<any> =>
+	getGridFSBucket()
+		.then(bucket => new Promise((resolve, reject) => {
+			const writeStream = bucket.openUploadStream(name, { contentType: type, metadata });
+			writeStream.once('finish', (doc) => { resolve(doc); });
+			writeStream.on('error', reject);
+			readable.pipe(writeStream);
+		}));
+
+const addFile = async (
+	user: any,
+	path: string,
+	name: string = null,
+	comment: string = null,
+	folderId: mongodb.ObjectID = null,
+	force: boolean = false
+) => {
+	log(`registering ${name} (user: ${getAcct(user)}, path: ${path})`);
+
+	// Calculate hash, get content type and get file size
+	const [hash, [mime, ext], size] = await Promise.all([
+		// hash
+		((): Promise<string> => new Promise((res, rej) => {
+			const readable = fs.createReadStream(path);
+			const hash = crypto.createHash('md5');
+			const chunks = [];
+			readable
+				.on('error', rej)
+				.pipe(hash)
+				.on('error', rej)
+				.on('data', (chunk) => chunks.push(chunk))
+				.on('end', () => {
+					const buffer = Buffer.concat(chunks);
+					res(buffer.toString('hex'));
+				});
+		}))(),
+		// mime
+		((): Promise<[string, string | null]> => new Promise((res, rej) => {
+			const readable = fs.createReadStream(path);
+			readable
+				.on('error', rej)
+				.once('data', (buffer: Buffer) => {
+					readable.destroy();
+					const type = fileType(buffer);
+					if (type) {
+						return res([type.mime, type.ext]);
+					} else {
+						// 種類が同定できなかったら application/octet-stream にする
+						return res(['application/octet-stream', null]);
+					}
+				});
+		}))(),
+		// size
+		((): Promise<number> => new Promise((res, rej) => {
+			fs.stat(path, (err, stats) => {
+				if (err) return rej(err);
+				res(stats.size);
+			});
+		}))()
+	]);
+
+	log(`hash: ${hash}, mime: ${mime}, ext: ${ext}, size: ${size}`);
+
+	// detect name
+	const detectedName: string = name || (ext ? `untitled.${ext}` : 'untitled');
+
+	if (!force) {
+		// Check if there is a file with the same hash
+		const much = await DriveFile.findOne({
+			md5: hash,
+			'metadata.userId': user._id
+		});
+
+		if (much !== null) {
+			log('file with same hash is found');
+			return much;
+		} else {
+			log('file with same hash is not found');
+		}
+	}
+
+	const [wh, averageColor, folder] = await Promise.all([
+		// Width and height (when image)
+		(async () => {
+			// 画像かどうか
+			if (!/^image\/.*$/.test(mime)) {
+				return null;
+			}
+
+			const imageType = mime.split('/')[1];
+
+			// 画像でもPNGかJPEGかGIFでないならスキップ
+			if (imageType != 'png' && imageType != 'jpeg' && imageType != 'gif') {
+				return null;
+			}
+
+			log('calculate image width and height...');
+
+			// Calculate width and height
+			const g = gm(fs.createReadStream(path), name);
+			const size = await prominence(g).size();
+
+			log(`image width and height is calculated: ${size.width}, ${size.height}`);
+
+			return [size.width, size.height];
+		})(),
+		// average color (when image)
+		(async () => {
+			// 画像かどうか
+			if (!/^image\/.*$/.test(mime)) {
+				return null;
+			}
+
+			const imageType = mime.split('/')[1];
+
+			// 画像でもPNGかJPEGでないならスキップ
+			if (imageType != 'png' && imageType != 'jpeg') {
+				return null;
+			}
+
+			log('calculate average color...');
+
+			const buffer = await prominence(gm(fs.createReadStream(path), name)
+				.setFormat('ppm')
+				.resize(1, 1)) // 1pxのサイズに縮小して平均色を取得するというハック
+				.toBuffer();
+
+			const r = buffer.readUInt8(buffer.length - 3);
+			const g = buffer.readUInt8(buffer.length - 2);
+			const b = buffer.readUInt8(buffer.length - 1);
+
+			log(`average color is calculated: ${r}, ${g}, ${b}`);
+
+			return [r, g, b];
+		})(),
+		// folder
+		(async () => {
+			if (!folderId) {
+				return null;
+			}
+			const driveFolder = await DriveFolder.findOne({
+				_id: folderId,
+				userId: user._id
+			});
+			if (!driveFolder) {
+				throw 'folder-not-found';
+			}
+			return driveFolder;
+		})(),
+		// usage checker
+		(async () => {
+			// Calculate drive usage
+			const usage = await DriveFile
+				.aggregate([{
+					$match: { 'metadata.userId': user._id }
+				}, {
+					$project: {
+						length: true
+					}
+				}, {
+					$group: {
+						_id: null,
+						usage: { $sum: '$length' }
+					}
+				}])
+				.then((aggregates: any[]) => {
+					if (aggregates.length > 0) {
+						return aggregates[0].usage;
+					}
+					return 0;
+				});
+
+			log(`drive usage is ${usage}`);
+
+			// If usage limit exceeded
+			if (usage + size > user.driveCapacity) {
+				throw 'no-free-space';
+			}
+		})()
+	]);
+
+	const readable = fs.createReadStream(path);
+
+	const properties = {};
+
+	if (wh) {
+		properties['width'] = wh[0];
+		properties['height'] = wh[1];
+	}
+
+	if (averageColor) {
+		properties['avgColor'] = averageColor;
+	}
+
+	return addToGridFS(detectedName, readable, mime, {
+		userId: user._id,
+		folderId: folder !== null ? folder._id : null,
+		comment: comment,
+		properties: properties
+	});
+};
+
+/**
+ * Add file to drive
+ *
+ * @param user User who wish to add file
+ * @param file File path or readableStream
+ * @param comment Comment
+ * @param type File type
+ * @param folderId Folder ID
+ * @param force If set to true, forcibly upload the file even if there is a file with the same hash.
+ * @return Object that represents added file
+ */
+export default (user: any, file: string | stream.Readable, ...args) => new Promise<any>((resolve, reject) => {
+	// Get file path
+	new Promise((res: (v: [string, boolean]) => void, rej) => {
+		if (typeof file === 'string') {
+			res([file, false]);
+			return;
+		}
+		if (typeof file === 'object' && typeof file.read === 'function') {
+			tmpFile()
+				.then(path => {
+					const readable: stream.Readable = file;
+					const writable = fs.createWriteStream(path);
+					readable
+						.on('error', rej)
+						.on('end', () => {
+							res([path, true]);
+						})
+						.pipe(writable)
+						.on('error', rej);
+				})
+				.catch(rej);
+		}
+		rej(new Error('un-compatible file.'));
+	})
+	.then(([path, shouldCleanup]): Promise<any> => new Promise((res, rej) => {
+		addFile(user, path, ...args)
+			.then(file => {
+				res(file);
+				if (shouldCleanup) {
+					fs.unlink(path, (e) => {
+						if (e) log(e.stack);
+					});
+				}
+			})
+			.catch(rej);
+	}))
+	.then(file => {
+		log(`drive file has been created ${file._id}`);
+		resolve(file);
+
+		pack(file).then(serializedFile => {
+			// Publish drive_file_created event
+			event(user._id, 'drive_file_created', serializedFile);
+			publishDriveStream(user._id, 'file_created', serializedFile);
+
+			// Register to search database
+			if (config.elasticsearch.enable) {
+				const es = require('../db/elasticsearch');
+				es.index({
+					index: 'misskey',
+					type: 'drive_file',
+					id: file._id.toString(),
+					body: {
+						name: file.name,
+						userId: user._id.toString()
+					}
+				});
+			}
+		});
+	})
+	.catch(reject);
+});
diff --git a/src/drive/upload-from-url.ts b/src/drive/upload-from-url.ts
new file mode 100644
index 0000000000..7ff16e9e4d
--- /dev/null
+++ b/src/drive/upload-from-url.ts
@@ -0,0 +1,46 @@
+import * as URL from 'url';
+import { IDriveFile, validateFileName } from '../models/drive-file';
+import create from './add-file';
+import * as debug from 'debug';
+import * as tmp from 'tmp';
+import * as fs from 'fs';
+import * as request from 'request';
+
+const log = debug('misskey:common:drive:upload_from_url');
+
+export default async (url, user, folderId = null): Promise<IDriveFile> => {
+	let name = URL.parse(url).pathname.split('/').pop();
+	if (!validateFileName(name)) {
+		name = null;
+	}
+
+	// Create temp file
+	const path = await new Promise((res: (string) => void, rej) => {
+		tmp.file((e, path) => {
+			if (e) return rej(e);
+			res(path);
+		});
+	});
+
+	// write content at URL to temp file
+	await new Promise((res, rej) => {
+		const writable = fs.createWriteStream(path);
+		request(url)
+			.on('error', rej)
+			.on('end', () => {
+				writable.close();
+				res(path);
+			})
+			.pipe(writable)
+			.on('error', rej);
+	});
+
+	const driveFile = await create(user, path, name, null, folderId);
+
+	// clean-up
+	fs.unlink(path, (e) => {
+		if (e) log(e.stack);
+	});
+
+	return driveFile;
+};
diff --git a/src/event.ts b/src/event.ts
new file mode 100644
index 0000000000..df79f0c90d
--- /dev/null
+++ b/src/event.ts
@@ -0,0 +1,80 @@
+import * as mongo from 'mongodb';
+import * as redis from 'redis';
+import swPush from './push-sw';
+import config from './conf';
+
+type ID = string | mongo.ObjectID;
+
+class MisskeyEvent {
+	private redisClient: redis.RedisClient;
+
+	constructor() {
+		// Connect to Redis
+		this.redisClient = redis.createClient(
+			config.redis.port, config.redis.host);
+	}
+
+	public publishUserStream(userId: ID, type: string, value?: any): void {
+		this.publish(`user-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishSw(userId: ID, type: string, value?: any): void {
+		swPush(userId, type, value);
+	}
+
+	public publishDriveStream(userId: ID, type: string, value?: any): void {
+		this.publish(`drive-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishPostStream(postId: ID, type: string, value?: any): void {
+		this.publish(`post-stream:${postId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishMessagingStream(userId: ID, otherpartyId: ID, type: string, value?: any): void {
+		this.publish(`messaging-stream:${userId}-${otherpartyId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishMessagingIndexStream(userId: ID, type: string, value?: any): void {
+		this.publish(`messaging-index-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishOthelloStream(userId: ID, type: string, value?: any): void {
+		this.publish(`othello-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishOthelloGameStream(gameId: ID, type: string, value?: any): void {
+		this.publish(`othello-game-stream:${gameId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishChannelStream(channelId: ID, type: string, value?: any): void {
+		this.publish(`channel-stream:${channelId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	private publish(channel: string, type: string, value?: any): void {
+		const message = value == null ?
+			{ type: type } :
+			{ type: type, body: value };
+
+		this.redisClient.publish(`misskey:${channel}`, JSON.stringify(message));
+	}
+}
+
+const ev = new MisskeyEvent();
+
+export default ev.publishUserStream.bind(ev);
+
+export const pushSw = ev.publishSw.bind(ev);
+
+export const publishDriveStream = ev.publishDriveStream.bind(ev);
+
+export const publishPostStream = ev.publishPostStream.bind(ev);
+
+export const publishMessagingStream = ev.publishMessagingStream.bind(ev);
+
+export const publishMessagingIndexStream = ev.publishMessagingIndexStream.bind(ev);
+
+export const publishOthelloStream = ev.publishOthelloStream.bind(ev);
+
+export const publishOthelloGameStream = ev.publishOthelloGameStream.bind(ev);
+
+export const publishChannelStream = ev.publishChannelStream.bind(ev);
diff --git a/src/get-notification-summary.ts b/src/get-notification-summary.ts
new file mode 100644
index 0000000000..03db722c84
--- /dev/null
+++ b/src/get-notification-summary.ts
@@ -0,0 +1,27 @@
+import getPostSummary from './get-post-summary';
+import getReactionEmoji from './get-reaction-emoji';
+
+/**
+ * 通知を表す文字列を取得します。
+ * @param notification 通知
+ */
+export default function(notification: any): string {
+	switch (notification.type) {
+		case 'follow':
+			return `${notification.user.name}にフォローされました`;
+		case 'mention':
+			return `言及されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+		case 'reply':
+			return `返信されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+		case 'repost':
+			return `Repostされました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+		case 'quote':
+			return `引用されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+		case 'reaction':
+			return `リアクションされました:\n${notification.user.name} <${getReactionEmoji(notification.reaction)}>「${getPostSummary(notification.post)}」`;
+		case 'poll_vote':
+			return `投票されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+		default:
+			return `<不明な通知タイプ: ${notification.type}>`;
+	}
+}
diff --git a/src/get-post-summary.ts b/src/get-post-summary.ts
new file mode 100644
index 0000000000..8d0033064f
--- /dev/null
+++ b/src/get-post-summary.ts
@@ -0,0 +1,45 @@
+/**
+ * 投稿を表す文字列を取得します。
+ * @param {*} post 投稿
+ */
+const summarize = (post: any): string => {
+	let summary = '';
+
+	// チャンネル
+	summary += post.channel ? `${post.channel.title}:` : '';
+
+	// 本文
+	summary += post.text ? post.text : '';
+
+	// メディアが添付されているとき
+	if (post.media) {
+		summary += ` (${post.media.length}つのメディア)`;
+	}
+
+	// 投票が添付されているとき
+	if (post.poll) {
+		summary += ' (投票)';
+	}
+
+	// 返信のとき
+	if (post.replyId) {
+		if (post.reply) {
+			summary += ` RE: ${summarize(post.reply)}`;
+		} else {
+			summary += ' RE: ...';
+		}
+	}
+
+	// Repostのとき
+	if (post.repostId) {
+		if (post.repost) {
+			summary += ` RP: ${summarize(post.repost)}`;
+		} else {
+			summary += ' RP: ...';
+		}
+	}
+
+	return summary.trim();
+};
+
+export default summarize;
diff --git a/src/get-reaction-emoji.ts b/src/get-reaction-emoji.ts
new file mode 100644
index 0000000000..c661205379
--- /dev/null
+++ b/src/get-reaction-emoji.ts
@@ -0,0 +1,14 @@
+export default function(reaction: string): string {
+	switch (reaction) {
+		case 'like': return '👍';
+		case 'love': return '❤️';
+		case 'laugh': return '😆';
+		case 'hmm': return '🤔';
+		case 'surprise': return '😮';
+		case 'congrats': return '🎉';
+		case 'angry': return '💢';
+		case 'confused': return '😥';
+		case 'pudding': return '🍮';
+		default: return '';
+	}
+}
diff --git a/src/misc/get-notification-summary.ts b/src/misc/get-notification-summary.ts
deleted file mode 100644
index 03db722c84..0000000000
--- a/src/misc/get-notification-summary.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import getPostSummary from './get-post-summary';
-import getReactionEmoji from './get-reaction-emoji';
-
-/**
- * 通知を表す文字列を取得します。
- * @param notification 通知
- */
-export default function(notification: any): string {
-	switch (notification.type) {
-		case 'follow':
-			return `${notification.user.name}にフォローされました`;
-		case 'mention':
-			return `言及されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
-		case 'reply':
-			return `返信されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
-		case 'repost':
-			return `Repostされました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
-		case 'quote':
-			return `引用されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
-		case 'reaction':
-			return `リアクションされました:\n${notification.user.name} <${getReactionEmoji(notification.reaction)}>「${getPostSummary(notification.post)}」`;
-		case 'poll_vote':
-			return `投票されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
-		default:
-			return `<不明な通知タイプ: ${notification.type}>`;
-	}
-}
diff --git a/src/misc/get-post-summary.ts b/src/misc/get-post-summary.ts
deleted file mode 100644
index 8d0033064f..0000000000
--- a/src/misc/get-post-summary.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * 投稿を表す文字列を取得します。
- * @param {*} post 投稿
- */
-const summarize = (post: any): string => {
-	let summary = '';
-
-	// チャンネル
-	summary += post.channel ? `${post.channel.title}:` : '';
-
-	// 本文
-	summary += post.text ? post.text : '';
-
-	// メディアが添付されているとき
-	if (post.media) {
-		summary += ` (${post.media.length}つのメディア)`;
-	}
-
-	// 投票が添付されているとき
-	if (post.poll) {
-		summary += ' (投票)';
-	}
-
-	// 返信のとき
-	if (post.replyId) {
-		if (post.reply) {
-			summary += ` RE: ${summarize(post.reply)}`;
-		} else {
-			summary += ' RE: ...';
-		}
-	}
-
-	// Repostのとき
-	if (post.repostId) {
-		if (post.repost) {
-			summary += ` RP: ${summarize(post.repost)}`;
-		} else {
-			summary += ' RP: ...';
-		}
-	}
-
-	return summary.trim();
-};
-
-export default summarize;
diff --git a/src/misc/get-reaction-emoji.ts b/src/misc/get-reaction-emoji.ts
deleted file mode 100644
index c661205379..0000000000
--- a/src/misc/get-reaction-emoji.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export default function(reaction: string): string {
-	switch (reaction) {
-		case 'like': return '👍';
-		case 'love': return '❤️';
-		case 'laugh': return '😆';
-		case 'hmm': return '🤔';
-		case 'surprise': return '😮';
-		case 'congrats': return '🎉';
-		case 'angry': return '💢';
-		case 'confused': return '😥';
-		case 'pudding': return '🍮';
-		default: return '';
-	}
-}
diff --git a/src/misc/othello/ai/back.ts b/src/misc/othello/ai/back.ts
deleted file mode 100644
index 0950adaa9f..0000000000
--- a/src/misc/othello/ai/back.ts
+++ /dev/null
@@ -1,376 +0,0 @@
-/**
- * -AI-
- * Botのバックエンド(思考を担当)
- *
- * 対話と思考を同じプロセスで行うと、思考時間が長引いたときにストリームから
- * 切断されてしまうので、別々のプロセスで行うようにします
- */
-
-import * as request from 'request-promise-native';
-import Othello, { Color } from '../core';
-import conf from '../../../conf';
-
-let game;
-let form;
-
-/**
- * BotアカウントのユーザーID
- */
-const id = conf.othello_ai.id;
-
-/**
- * BotアカウントのAPIキー
- */
-const i = conf.othello_ai.i;
-
-let post;
-
-process.on('message', async msg => {
-	// 親プロセスからデータをもらう
-	if (msg.type == '_init_') {
-		game = msg.game;
-		form = msg.form;
-	}
-
-	// フォームが更新されたとき
-	if (msg.type == 'update-form') {
-		form.find(i => i.id == msg.body.id).value = msg.body.value;
-	}
-
-	// ゲームが始まったとき
-	if (msg.type == 'started') {
-		onGameStarted(msg.body);
-
-		//#region TLに投稿する
-		const game = msg.body;
-		const url = `${conf.url}/othello/${game.id}`;
-		const user = game.user1Id == id ? game.user2 : game.user1;
-		const isSettai = form[0].value === 0;
-		const text = isSettai
-			? `?[${user.name}](${conf.url}/@${user.username})さんの接待を始めました！`
-			: `対局を?[${user.name}](${conf.url}/@${user.username})さんと始めました！ (強さ${form[0].value})`;
-
-		const res = await request.post(`${conf.api_url}/posts/create`, {
-			json: { i,
-				text: `${text}\n→[観戦する](${url})`
-			}
-		});
-
-		post = res.createdPost;
-		//#endregion
-	}
-
-	// ゲームが終了したとき
-	if (msg.type == 'ended') {
-		// ストリームから切断
-		process.send({
-			type: 'close'
-		});
-
-		//#region TLに投稿する
-		const user = game.user1Id == id ? game.user2 : game.user1;
-		const isSettai = form[0].value === 0;
-		const text = isSettai
-			? msg.body.winnerId === null
-				? `?[${user.name}](${conf.url}/@${user.username})さんに接待で引き分けました...`
-				: msg.body.winnerId == id
-					? `?[${user.name}](${conf.url}/@${user.username})さんに接待で勝ってしまいました...`
-					: `?[${user.name}](${conf.url}/@${user.username})さんに接待で負けてあげました♪`
-			: msg.body.winnerId === null
-				? `?[${user.name}](${conf.url}/@${user.username})さんと引き分けました～`
-				: msg.body.winnerId == id
-					? `?[${user.name}](${conf.url}/@${user.username})さんに勝ちました♪`
-					: `?[${user.name}](${conf.url}/@${user.username})さんに負けました...`;
-
-		await request.post(`${conf.api_url}/posts/create`, {
-			json: { i,
-				repostId: post.id,
-				text: text
-			}
-		});
-		//#endregion
-
-		process.exit();
-	}
-
-	// 打たれたとき
-	if (msg.type == 'set') {
-		onSet(msg.body);
-	}
-});
-
-let o: Othello;
-let botColor: Color;
-
-// 各マスの強さ
-let cellWeights;
-
-/**
- * ゲーム開始時
- * @param g ゲーム情報
- */
-function onGameStarted(g) {
-	game = g;
-
-	// オセロエンジン初期化
-	o = new Othello(game.settings.map, {
-		isLlotheo: game.settings.isLlotheo,
-		canPutEverywhere: game.settings.canPutEverywhere,
-		loopedBoard: game.settings.loopedBoard
-	});
-
-	// 各マスの価値を計算しておく
-	cellWeights = o.map.map((pix, i) => {
-		if (pix == 'null') return 0;
-		const [x, y] = o.transformPosToXy(i);
-		let count = 0;
-		const get = (x, y) => {
-			if (x < 0 || y < 0 || x >= o.mapWidth || y >= o.mapHeight) return 'null';
-			return o.mapDataGet(o.transformXyToPos(x, y));
-		};
-
-		if (get(x    , y - 1) == 'null') count++;
-		if (get(x + 1, y - 1) == 'null') count++;
-		if (get(x + 1, y    ) == 'null') count++;
-		if (get(x + 1, y + 1) == 'null') count++;
-		if (get(x    , y + 1) == 'null') count++;
-		if (get(x - 1, y + 1) == 'null') count++;
-		if (get(x - 1, y    ) == 'null') count++;
-		if (get(x - 1, y - 1) == 'null') count++;
-		//return Math.pow(count, 3);
-		return count >= 4 ? 1 : 0;
-	});
-
-	botColor = game.user1Id == id && game.black == 1 || game.user2Id == id && game.black == 2;
-
-	if (botColor) {
-		think();
-	}
-}
-
-function onSet(x) {
-	o.put(x.color, x.pos);
-
-	if (x.next === botColor) {
-		think();
-	}
-}
-
-const db = {};
-
-function think() {
-	console.log('Thinking...');
-	console.time('think');
-
-	const isSettai = form[0].value === 0;
-
-	// 接待モードのときは、全力(5手先読みくらい)で負けるようにする
-	const maxDepth = isSettai ? 5 : form[0].value;
-
-	/**
-	 * Botにとってある局面がどれだけ有利か取得する
-	 */
-	function staticEval() {
-		let score = o.canPutSomewhere(botColor).length;
-
-		cellWeights.forEach((weight, i) => {
-			// 係数
-			const coefficient = 30;
-			weight = weight * coefficient;
-
-			const stone = o.board[i];
-			if (stone === botColor) {
-				// TODO: 価値のあるマスに設置されている自分の石に縦か横に接するマスは価値があると判断する
-				score += weight;
-			} else if (stone !== null) {
-				score -= weight;
-			}
-		});
-
-		// ロセオならスコアを反転
-		if (game.settings.isLlotheo) score = -score;
-
-		// 接待ならスコアを反転
-		if (isSettai) score = -score;
-
-		return score;
-	}
-
-	/**
-	 * αβ法での探索
-	 */
-	const dive = (pos: number, alpha = -Infinity, beta = Infinity, depth = 0): number => {
-		// 試し打ち
-		o.put(o.turn, pos);
-
-		const key = o.board.toString();
-		let cache = db[key];
-		if (cache) {
-			if (alpha >= cache.upper) {
-				o.undo();
-				return cache.upper;
-			}
-			if (beta <= cache.lower) {
-				o.undo();
-				return cache.lower;
-			}
-			alpha = Math.max(alpha, cache.lower);
-			beta = Math.min(beta, cache.upper);
-		} else {
-			cache = {
-				upper: Infinity,
-				lower: -Infinity
-			};
-		}
-
-		const isBotTurn = o.turn === botColor;
-
-		// 勝った
-		if (o.turn === null) {
-			const winner = o.winner;
-
-			// 勝つことによる基本スコア
-			const base = 10000;
-
-			let score;
-
-			if (game.settings.isLlotheo) {
-				// 勝ちは勝ちでも、より自分の石を少なくした方が美しい勝ちだと判定する
-				score = o.winner ? base - (o.blackCount * 100) : base - (o.whiteCount * 100);
-			} else {
-				// 勝ちは勝ちでも、より相手の石を少なくした方が美しい勝ちだと判定する
-				score = o.winner ? base + (o.blackCount * 100) : base + (o.whiteCount * 100);
-			}
-
-			// 巻き戻し
-			o.undo();
-
-			// 接待なら自分が負けた方が高スコア
-			return isSettai
-				? winner !== botColor ? score : -score
-				: winner === botColor ? score : -score;
-		}
-
-		if (depth === maxDepth) {
-			// 静的に評価
-			const score = staticEval();
-
-			// 巻き戻し
-			o.undo();
-
-			return score;
-		} else {
-			const cans = o.canPutSomewhere(o.turn);
-
-			let value = isBotTurn ? -Infinity : Infinity;
-			let a = alpha;
-			let b = beta;
-
-			// 次のターンのプレイヤーにとって最も良い手を取得
-			for (const p of cans) {
-				if (isBotTurn) {
-					const score = dive(p, a, beta, depth + 1);
-					value = Math.max(value, score);
-					a = Math.max(a, value);
-					if (value >= beta) break;
-				} else {
-					const score = dive(p, alpha, b, depth + 1);
-					value = Math.min(value, score);
-					b = Math.min(b, value);
-					if (value <= alpha) break;
-				}
-			}
-
-			// 巻き戻し
-			o.undo();
-
-			if (value <= alpha) {
-				cache.upper = value;
-			} else if (value >= beta) {
-				cache.lower = value;
-			} else {
-				cache.upper = value;
-				cache.lower = value;
-			}
-
-			db[key] = cache;
-
-			return value;
-		}
-	};
-
-	/**
-	 * αβ法での探索(キャッシュ無し)(デバッグ用)
-	 */
-	const dive2 = (pos: number, alpha = -Infinity, beta = Infinity, depth = 0): number => {
-		// 試し打ち
-		o.put(o.turn, pos);
-
-		const isBotTurn = o.turn === botColor;
-
-		// 勝った
-		if (o.turn === null) {
-			const winner = o.winner;
-
-			// 勝つことによる基本スコア
-			const base = 10000;
-
-			let score;
-
-			if (game.settings.isLlotheo) {
-				// 勝ちは勝ちでも、より自分の石を少なくした方が美しい勝ちだと判定する
-				score = o.winner ? base - (o.blackCount * 100) : base - (o.whiteCount * 100);
-			} else {
-				// 勝ちは勝ちでも、より相手の石を少なくした方が美しい勝ちだと判定する
-				score = o.winner ? base + (o.blackCount * 100) : base + (o.whiteCount * 100);
-			}
-
-			// 巻き戻し
-			o.undo();
-
-			// 接待なら自分が負けた方が高スコア
-			return isSettai
-				? winner !== botColor ? score : -score
-				: winner === botColor ? score : -score;
-		}
-
-		if (depth === maxDepth) {
-			// 静的に評価
-			const score = staticEval();
-
-			// 巻き戻し
-			o.undo();
-
-			return score;
-		} else {
-			const cans = o.canPutSomewhere(o.turn);
-
-			// 次のターンのプレイヤーにとって最も良い手を取得
-			for (const p of cans) {
-				if (isBotTurn) {
-					alpha = Math.max(alpha, dive2(p, alpha, beta, depth + 1));
-				} else {
-					beta = Math.min(beta, dive2(p, alpha, beta, depth + 1));
-				}
-				if (alpha >= beta) break;
-			}
-
-			// 巻き戻し
-			o.undo();
-
-			return isBotTurn ? alpha : beta;
-		}
-	};
-
-	const cans = o.canPutSomewhere(botColor);
-	const scores = cans.map(p => dive(p));
-	const pos = cans[scores.indexOf(Math.max(...scores))];
-
-	console.log('Thinked:', pos);
-	console.timeEnd('think');
-
-	process.send({
-		type: 'put',
-		pos
-	});
-}
diff --git a/src/misc/othello/ai/front.ts b/src/misc/othello/ai/front.ts
deleted file mode 100644
index e5496132f6..0000000000
--- a/src/misc/othello/ai/front.ts
+++ /dev/null
@@ -1,233 +0,0 @@
-/**
- * -AI-
- * Botのフロントエンド(ストリームとの対話を担当)
- *
- * 対話と思考を同じプロセスで行うと、思考時間が長引いたときにストリームから
- * 切断されてしまうので、別々のプロセスで行うようにします
- */
-
-import * as childProcess from 'child_process';
-const WebSocket = require('ws');
-import * as ReconnectingWebSocket from 'reconnecting-websocket';
-import * as request from 'request-promise-native';
-import conf from '../../../conf';
-
-// 設定 ////////////////////////////////////////////////////////
-
-/**
- * BotアカウントのAPIキー
- */
-const i = conf.othello_ai.i;
-
-/**
- * BotアカウントのユーザーID
- */
-const id = conf.othello_ai.id;
-
-////////////////////////////////////////////////////////////////
-
-/**
- * ホームストリーム
- */
-const homeStream = new ReconnectingWebSocket(`${conf.ws_url}/?i=${i}`, undefined, {
-	constructor: WebSocket
-});
-
-homeStream.on('open', () => {
-	console.log('home stream opened');
-});
-
-homeStream.on('close', () => {
-	console.log('home stream closed');
-});
-
-homeStream.on('message', message => {
-	const msg = JSON.parse(message.toString());
-
-	// タイムライン上でなんか言われたまたは返信されたとき
-	if (msg.type == 'mention' || msg.type == 'reply') {
-		const post = msg.body;
-
-		if (post.userId == id) return;
-
-		// リアクションする
-		request.post(`${conf.api_url}/posts/reactions/create`, {
-			json: { i,
-				postId: post.id,
-				reaction: 'love'
-			}
-		});
-
-		if (post.text) {
-			if (post.text.indexOf('オセロ') > -1) {
-				request.post(`${conf.api_url}/posts/create`, {
-					json: { i,
-						replyId: post.id,
-						text: '良いですよ～'
-					}
-				});
-
-				invite(post.userId);
-			}
-		}
-	}
-
-	// メッセージでなんか言われたとき
-	if (msg.type == 'messaging_message') {
-		const message = msg.body;
-		if (message.text) {
-			if (message.text.indexOf('オセロ') > -1) {
-				request.post(`${conf.api_url}/messaging/messages/create`, {
-					json: { i,
-						userId: message.userId,
-						text: '良いですよ～'
-					}
-				});
-
-				invite(message.userId);
-			}
-		}
-	}
-});
-
-// ユーザーを対局に誘う
-function invite(userId) {
-	request.post(`${conf.api_url}/othello/match`, {
-		json: { i,
-			userId: userId
-		}
-	});
-}
-
-/**
- * オセロストリーム
- */
-const othelloStream = new ReconnectingWebSocket(`${conf.ws_url}/othello?i=${i}`, undefined, {
-	constructor: WebSocket
-});
-
-othelloStream.on('open', () => {
-	console.log('othello stream opened');
-});
-
-othelloStream.on('close', () => {
-	console.log('othello stream closed');
-});
-
-othelloStream.on('message', message => {
-	const msg = JSON.parse(message.toString());
-
-	// 招待されたとき
-	if (msg.type == 'invited') {
-		onInviteMe(msg.body.parent);
-	}
-
-	// マッチしたとき
-	if (msg.type == 'matched') {
-		gameStart(msg.body);
-	}
-});
-
-/**
- * ゲーム開始
- * @param game ゲーム情報
- */
-function gameStart(game) {
-	// ゲームストリームに接続
-	const gw = new ReconnectingWebSocket(`${conf.ws_url}/othello-game?i=${i}&game=${game.id}`, undefined, {
-		constructor: WebSocket
-	});
-
-	gw.on('open', () => {
-		console.log('othello game stream opened');
-
-		// フォーム
-		const form = [{
-			id: 'strength',
-			type: 'radio',
-			label: '強さ',
-			value: 2,
-			items: [{
-				label: '接待',
-				value: 0
-			}, {
-				label: '弱',
-				value: 1
-			}, {
-				label: '中',
-				value: 2
-			}, {
-				label: '強',
-				value: 3
-			}, {
-				label: '最強',
-				value: 5
-			}]
-		}];
-
-		//#region バックエンドプロセス開始
-		const ai = childProcess.fork(__dirname + '/back.js');
-
-		// バックエンドプロセスに情報を渡す
-		ai.send({
-			type: '_init_',
-			game,
-			form
-		});
-
-		ai.on('message', msg => {
-			if (msg.type == 'put') {
-				gw.send(JSON.stringify({
-					type: 'set',
-					pos: msg.pos
-				}));
-			} else if (msg.type == 'close') {
-				gw.close();
-			}
-		});
-
-		// ゲームストリームから情報が流れてきたらそのままバックエンドプロセスに伝える
-		gw.on('message', message => {
-			const msg = JSON.parse(message.toString());
-			ai.send(msg);
-		});
-		//#endregion
-
-		// フォーム初期化
-		setTimeout(() => {
-			gw.send(JSON.stringify({
-				type: 'init-form',
-				body: form
-			}));
-		}, 1000);
-
-		// どんな設定内容の対局でも受け入れる
-		setTimeout(() => {
-			gw.send(JSON.stringify({
-				type: 'accept'
-			}));
-		}, 2000);
-	});
-
-	gw.on('close', () => {
-		console.log('othello game stream closed');
-	});
-}
-
-/**
- * オセロの対局に招待されたとき
- * @param inviter 誘ってきたユーザー
- */
-async function onInviteMe(inviter) {
-	console.log(`Someone invited me: @${inviter.username}`);
-
-	// 承認
-	const game = await request.post(`${conf.api_url}/othello/match`, {
-		json: {
-			i,
-			userId: inviter.id
-		}
-	});
-
-	gameStart(game);
-}
diff --git a/src/misc/othello/ai/index.ts b/src/misc/othello/ai/index.ts
deleted file mode 100644
index 5cd1db82da..0000000000
--- a/src/misc/othello/ai/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-require('./front');
diff --git a/src/misc/othello/core.ts b/src/misc/othello/core.ts
deleted file mode 100644
index 217066d375..0000000000
--- a/src/misc/othello/core.ts
+++ /dev/null
@@ -1,340 +0,0 @@
-/**
- * true ... 黒
- * false ... 白
- */
-export type Color = boolean;
-const BLACK = true;
-const WHITE = false;
-
-export type MapPixel = 'null' | 'empty';
-
-export type Options = {
-	isLlotheo: boolean;
-	canPutEverywhere: boolean;
-	loopedBoard: boolean;
-};
-
-export type Undo = {
-	/**
-	 * 色
-	 */
-	color: Color,
-
-	/**
-	 * どこに打ったか
-	 */
-	pos: number;
-
-	/**
-	 * 反転した石の位置の配列
-	 */
-	effects: number[];
-
-	/**
-	 * ターン
-	 */
-	turn: Color;
-};
-
-/**
- * オセロエンジン
- */
-export default class Othello {
-	public map: MapPixel[];
-	public mapWidth: number;
-	public mapHeight: number;
-	public board: Color[];
-	public turn: Color = BLACK;
-	public opts: Options;
-
-	public prevPos = -1;
-	public prevColor: Color = null;
-
-	private logs: Undo[] = [];
-
-	/**
-	 * ゲームを初期化します
-	 */
-	constructor(map: string[], opts: Options) {
-		//#region binds
-		this.put = this.put.bind(this);
-		//#endregion
-
-		//#region Options
-		this.opts = opts;
-		if (this.opts.isLlotheo == null) this.opts.isLlotheo = false;
-		if (this.opts.canPutEverywhere == null) this.opts.canPutEverywhere = false;
-		if (this.opts.loopedBoard == null) this.opts.loopedBoard = false;
-		//#endregion
-
-		//#region Parse map data
-		this.mapWidth = map[0].length;
-		this.mapHeight = map.length;
-		const mapData = map.join('');
-
-		this.board = mapData.split('').map(d => {
-			if (d == '-') return null;
-			if (d == 'b') return BLACK;
-			if (d == 'w') return WHITE;
-			return undefined;
-		});
-
-		this.map = mapData.split('').map(d => {
-			if (d == '-' || d == 'b' || d == 'w') return 'empty';
-			return 'null';
-		});
-		//#endregion
-
-		// ゲームが始まった時点で片方の色の石しかないか、始まった時点で勝敗が決定するようなマップの場合がある
-		if (this.canPutSomewhere(BLACK).length == 0) {
-			if (this.canPutSomewhere(WHITE).length == 0) {
-				this.turn = null;
-			} else {
-				this.turn = WHITE;
-			}
-		}
-	}
-
-	/**
-	 * 黒石の数
-	 */
-	public get blackCount() {
-		return this.board.filter(x => x === BLACK).length;
-	}
-
-	/**
-	 * 白石の数
-	 */
-	public get whiteCount() {
-		return this.board.filter(x => x === WHITE).length;
-	}
-
-	/**
-	 * 黒石の比率
-	 */
-	public get blackP() {
-		if (this.blackCount == 0 && this.whiteCount == 0) return 0;
-		return this.blackCount / (this.blackCount + this.whiteCount);
-	}
-
-	/**
-	 * 白石の比率
-	 */
-	public get whiteP() {
-		if (this.blackCount == 0 && this.whiteCount == 0) return 0;
-		return this.whiteCount / (this.blackCount + this.whiteCount);
-	}
-
-	public transformPosToXy(pos: number): number[] {
-		const x = pos % this.mapWidth;
-		const y = Math.floor(pos / this.mapWidth);
-		return [x, y];
-	}
-
-	public transformXyToPos(x: number, y: number): number {
-		return x + (y * this.mapWidth);
-	}
-
-	/**
-	 * 指定のマスに石を打ちます
-	 * @param color 石の色
-	 * @param pos 位置
-	 */
-	public put(color: Color, pos: number) {
-		this.prevPos = pos;
-		this.prevColor = color;
-
-		this.board[pos] = color;
-
-		// 反転させられる石を取得
-		const effects = this.effects(color, pos);
-
-		// 反転させる
-		for (const pos of effects) {
-			this.board[pos] = color;
-		}
-
-		const turn = this.turn;
-
-		this.logs.push({
-			color,
-			pos,
-			effects,
-			turn
-		});
-
-		this.calcTurn();
-	}
-
-	private calcTurn() {
-		// ターン計算
-		if (this.canPutSomewhere(!this.prevColor).length > 0) {
-			this.turn = !this.prevColor;
-		} else if (this.canPutSomewhere(this.prevColor).length > 0) {
-			this.turn = this.prevColor;
-		} else {
-			this.turn = null;
-		}
-	}
-
-	public undo() {
-		const undo = this.logs.pop();
-		this.prevColor = undo.color;
-		this.prevPos = undo.pos;
-		this.board[undo.pos] = null;
-		for (const pos of undo.effects) {
-			const color = this.board[pos];
-			this.board[pos] = !color;
-		}
-		this.turn = undo.turn;
-	}
-
-	/**
-	 * 指定した位置のマップデータのマスを取得します
-	 * @param pos 位置
-	 */
-	public mapDataGet(pos: number): MapPixel {
-		const [x, y] = this.transformPosToXy(pos);
-		if (x < 0 || y < 0 || x >= this.mapWidth || y >= this.mapHeight) return 'null';
-		return this.map[pos];
-	}
-
-	/**
-	 * 打つことができる場所を取得します
-	 */
-	public canPutSomewhere(color: Color): number[] {
-		const result = [];
-
-		this.board.forEach((x, i) => {
-			if (this.canPut(color, i)) result.push(i);
-		});
-
-		return result;
-	}
-
-	/**
-	 * 指定のマスに石を打つことができるかどうかを取得します
-	 * @param color 自分の色
-	 * @param pos 位置
-	 */
-	public canPut(color: Color, pos: number): boolean {
-		// 既に石が置いてある場所には打てない
-		if (this.board[pos] !== null) return false;
-
-		if (this.opts.canPutEverywhere) {
-			// 挟んでなくても置けるモード
-			return this.mapDataGet(pos) == 'empty';
-		} else {
-			// 相手の石を1つでも反転させられるか
-			return this.effects(color, pos).length !== 0;
-		}
-	}
-
-	/**
-	 * 指定のマスに石を置いた時の、反転させられる石を取得します
-	 * @param color 自分の色
-	 * @param pos 位置
-	 */
-	public effects(color: Color, pos: number): number[] {
-		const enemyColor = !color;
-
-		// ひっくり返せる石(の位置)リスト
-		let stones = [];
-
-		const initPos = pos;
-
-		// 走査
-		const iterate = (fn: (i: number) => number[]) => {
-			let i = 1;
-			const found = [];
-
-			while (true) {
-				let [x, y] = fn(i);
-
-				// 座標が指し示す位置がボード外に出たとき
-				if (this.opts.loopedBoard) {
-					if (x <  0             ) x = this.mapWidth  - ((-x) % this.mapWidth);
-					if (y <  0             ) y = this.mapHeight - ((-y) % this.mapHeight);
-					if (x >= this.mapWidth ) x = x % this.mapWidth;
-					if (y >= this.mapHeight) y = y % this.mapHeight;
-
-					// for debug
-					//if (x < 0 || y < 0 || x >= this.mapWidth || y >= this.mapHeight) {
-					//	console.log(x, y);
-					//}
-
-					// 一周して自分に帰ってきたら
-					if (this.transformXyToPos(x, y) == initPos) {
-						// ↓のコメントアウトを外すと、「現時点で自分の石が隣接していないが、
-						// そこに置いたとするとループして最終的に挟んだことになる」というケースを有効化します。(Test4のマップで違いが分かります)
-						// このケースを有効にした方が良いのか無効にした方が良いのか判断がつかなかったためとりあえず無効としておきます
-						// (あと無効な方がゲームとしておもしろそうだった)
-						stones = stones.concat(found);
-						break;
-					}
-				} else {
-					if (x == -1 || y == -1 || x == this.mapWidth || y == this.mapHeight) break;
-				}
-
-				const pos = this.transformXyToPos(x, y);
-
-				//#region 「配置不能」マスに当たった場合走査終了
-				const pixel = this.mapDataGet(pos);
-				if (pixel == 'null') break;
-				//#endregion
-
-				// 石取得
-				const stone = this.board[pos];
-
-				// 石が置かれていないマスなら走査終了
-				if (stone === null) break;
-
-				// 相手の石なら「ひっくり返せるかもリスト」に入れておく
-				if (stone === enemyColor) found.push(pos);
-
-				// 自分の石なら「ひっくり返せるかもリスト」を「ひっくり返せるリスト」に入れ、走査終了
-				if (stone === color) {
-					stones = stones.concat(found);
-					break;
-				}
-
-				i++;
-			}
-		};
-
-		const [x, y] = this.transformPosToXy(pos);
-
-		iterate(i => [x    , y - i]); // 上
-		iterate(i => [x + i, y - i]); // 右上
-		iterate(i => [x + i, y    ]); // 右
-		iterate(i => [x + i, y + i]); // 右下
-		iterate(i => [x    , y + i]); // 下
-		iterate(i => [x - i, y + i]); // 左下
-		iterate(i => [x - i, y    ]); // 左
-		iterate(i => [x - i, y - i]); // 左上
-
-		return stones;
-	}
-
-	/**
-	 * ゲームが終了したか否か
-	 */
-	public get isEnded(): boolean {
-		return this.turn === null;
-	}
-
-	/**
-	 * ゲームの勝者 (null = 引き分け)
-	 */
-	public get winner(): Color {
-		if (!this.isEnded) return undefined;
-
-		if (this.blackCount == this.whiteCount) return null;
-
-		if (this.opts.isLlotheo) {
-			return this.blackCount > this.whiteCount ? WHITE : BLACK;
-		} else {
-			return this.blackCount > this.whiteCount ? BLACK : WHITE;
-		}
-	}
-}
diff --git a/src/misc/othello/maps.ts b/src/misc/othello/maps.ts
deleted file mode 100644
index 68e5a446f1..0000000000
--- a/src/misc/othello/maps.ts
+++ /dev/null
@@ -1,911 +0,0 @@
-/**
- * 組み込みマップ定義
- *
- * データ値:
- * (スペース) ... マス無し
- * - ... マス
- * b ... 初期配置される黒石
- * w ... 初期配置される白石
- */
-
-export type Map = {
-	name?: string;
-	category?: string;
-	author?: string;
-	data: string[];
-};
-
-export const fourfour: Map = {
-	name: '4x4',
-	category: '4x4',
-	data: [
-		'----',
-		'-wb-',
-		'-bw-',
-		'----'
-	]
-};
-
-export const sixsix: Map = {
-	name: '6x6',
-	category: '6x6',
-	data: [
-		'------',
-		'------',
-		'--wb--',
-		'--bw--',
-		'------',
-		'------'
-	]
-};
-
-export const roundedSixsix: Map = {
-	name: '6x6 rounded',
-	category: '6x6',
-	author: 'syuilo',
-	data: [
-		' ---- ',
-		'------',
-		'--wb--',
-		'--bw--',
-		'------',
-		' ---- '
-	]
-};
-
-export const roundedSixsix2: Map = {
-	name: '6x6 rounded 2',
-	category: '6x6',
-	author: 'syuilo',
-	data: [
-		'  --  ',
-		' ---- ',
-		'--wb--',
-		'--bw--',
-		' ---- ',
-		'  --  '
-	]
-};
-
-export const eighteight: Map = {
-	name: '8x8',
-	category: '8x8',
-	data: [
-		'--------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const eighteightH1: Map = {
-	name: '8x8 handicap 1',
-	category: '8x8',
-	data: [
-		'b-------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const eighteightH2: Map = {
-	name: '8x8 handicap 2',
-	category: '8x8',
-	data: [
-		'b-------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'-------b'
-	]
-};
-
-export const eighteightH3: Map = {
-	name: '8x8 handicap 3',
-	category: '8x8',
-	data: [
-		'b------b',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'-------b'
-	]
-};
-
-export const eighteightH4: Map = {
-	name: '8x8 handicap 4',
-	category: '8x8',
-	data: [
-		'b------b',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'b------b'
-	]
-};
-
-export const eighteightH12: Map = {
-	name: '8x8 handicap 12',
-	category: '8x8',
-	data: [
-		'bb----bb',
-		'b------b',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'b------b',
-		'bb----bb'
-	]
-};
-
-export const eighteightH16: Map = {
-	name: '8x8 handicap 16',
-	category: '8x8',
-	data: [
-		'bbb---bb',
-		'b------b',
-		'-------b',
-		'---wb---',
-		'---bw---',
-		'b-------',
-		'b------b',
-		'bb---bbb'
-	]
-};
-
-export const eighteightH20: Map = {
-	name: '8x8 handicap 20',
-	category: '8x8',
-	data: [
-		'bbb--bbb',
-		'b------b',
-		'b------b',
-		'---wb---',
-		'---bw---',
-		'b------b',
-		'b------b',
-		'bbb---bb'
-	]
-};
-
-export const eighteightH28: Map = {
-	name: '8x8 handicap 28',
-	category: '8x8',
-	data: [
-		'bbbbbbbb',
-		'b------b',
-		'b------b',
-		'b--wb--b',
-		'b--bw--b',
-		'b------b',
-		'b------b',
-		'bbbbbbbb'
-	]
-};
-
-export const roundedEighteight: Map = {
-	name: '8x8 rounded',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		' ------ ',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		' ------ '
-	]
-};
-
-export const roundedEighteight2: Map = {
-	name: '8x8 rounded 2',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'  ----  ',
-		' ------ ',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		' ------ ',
-		'  ----  '
-	]
-};
-
-export const roundedEighteight3: Map = {
-	name: '8x8 rounded 3',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'   --   ',
-		'  ----  ',
-		' ------ ',
-		'---wb---',
-		'---bw---',
-		' ------ ',
-		'  ----  ',
-		'   --   '
-	]
-};
-
-export const eighteightWithNotch: Map = {
-	name: '8x8 with notch',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'---  ---',
-		'--------',
-		'--------',
-		' --wb-- ',
-		' --bw-- ',
-		'--------',
-		'--------',
-		'---  ---'
-	]
-};
-
-export const eighteightWithSomeHoles: Map = {
-	name: '8x8 with some holes',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'--- ----',
-		'----- --',
-		'-- -----',
-		'---wb---',
-		'---bw- -',
-		' -------',
-		'--- ----',
-		'--------'
-	]
-};
-
-export const circle: Map = {
-	name: 'Circle',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'   --   ',
-		' ------ ',
-		' ------ ',
-		'---wb---',
-		'---bw---',
-		' ------ ',
-		' ------ ',
-		'   --   '
-	]
-};
-
-export const smile: Map = {
-	name: 'Smile',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		' ------ ',
-		'--------',
-		'-- -- --',
-		'---wb---',
-		'-- bw --',
-		'---  ---',
-		'--------',
-		' ------ '
-	]
-};
-
-export const window: Map = {
-	name: 'Window',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'--------',
-		'-  --  -',
-		'-  --  -',
-		'---wb---',
-		'---bw---',
-		'-  --  -',
-		'-  --  -',
-		'--------'
-	]
-};
-
-export const reserved: Map = {
-	name: 'Reserved',
-	category: '8x8',
-	author: 'Aya',
-	data: [
-		'w------b',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'b------w'
-	]
-};
-
-export const x: Map = {
-	name: 'X',
-	category: '8x8',
-	author: 'Aya',
-	data: [
-		'w------b',
-		'-w----b-',
-		'--w--b--',
-		'---wb---',
-		'---bw---',
-		'--b--w--',
-		'-b----w-',
-		'b------w'
-	]
-};
-
-export const parallel: Map = {
-	name: 'Parallel',
-	category: '8x8',
-	author: 'Aya',
-	data: [
-		'--------',
-		'--------',
-		'--------',
-		'---bb---',
-		'---ww---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const lackOfBlack: Map = {
-	name: 'Lack of Black',
-	category: '8x8',
-	data: [
-		'--------',
-		'--------',
-		'--------',
-		'---w----',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const squareParty: Map = {
-	name: 'Square Party',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'--------',
-		'-wwwbbb-',
-		'-w-wb-b-',
-		'-wwwbbb-',
-		'-bbbwww-',
-		'-b-bw-w-',
-		'-bbbwww-',
-		'--------'
-	]
-};
-
-export const minesweeper: Map = {
-	name: 'Minesweeper',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'b-b--w-w',
-		'-w-wb-b-',
-		'w-b--w-b',
-		'-b-wb-w-',
-		'-w-bw-b-',
-		'b-w--b-w',
-		'-b-bw-w-',
-		'w-w--b-b'
-	]
-};
-
-export const tenthtenth: Map = {
-	name: '10x10',
-	category: '10x10',
-	data: [
-		'----------',
-		'----------',
-		'----------',
-		'----------',
-		'----wb----',
-		'----bw----',
-		'----------',
-		'----------',
-		'----------',
-		'----------'
-	]
-};
-
-export const hole: Map = {
-	name: 'The Hole',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'----------',
-		'----------',
-		'--wb--wb--',
-		'--bw--bw--',
-		'----  ----',
-		'----  ----',
-		'--wb--wb--',
-		'--bw--bw--',
-		'----------',
-		'----------'
-	]
-};
-
-export const grid: Map = {
-	name: 'Grid',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'----------',
-		'- - -- - -',
-		'----------',
-		'- - -- - -',
-		'----wb----',
-		'----bw----',
-		'- - -- - -',
-		'----------',
-		'- - -- - -',
-		'----------'
-	]
-};
-
-export const cross: Map = {
-	name: 'Cross',
-	category: '10x10',
-	author: 'Aya',
-	data: [
-		'   ----   ',
-		'   ----   ',
-		'   ----   ',
-		'----------',
-		'----wb----',
-		'----bw----',
-		'----------',
-		'   ----   ',
-		'   ----   ',
-		'   ----   '
-	]
-};
-
-export const charX: Map = {
-	name: 'Char X',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'---    ---',
-		'----  ----',
-		'----------',
-		' -------- ',
-		'  --wb--  ',
-		'  --bw--  ',
-		' -------- ',
-		'----------',
-		'----  ----',
-		'---    ---'
-	]
-};
-
-export const charY: Map = {
-	name: 'Char Y',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'---    ---',
-		'----  ----',
-		'----------',
-		' -------- ',
-		'  --wb--  ',
-		'  --bw--  ',
-		'  ------  ',
-		'  ------  ',
-		'  ------  ',
-		'  ------  '
-	]
-};
-
-export const walls: Map = {
-	name: 'Walls',
-	category: '10x10',
-	author: 'Aya',
-	data: [
-		' bbbbbbbb ',
-		'w--------w',
-		'w--------w',
-		'w--------w',
-		'w---wb---w',
-		'w---bw---w',
-		'w--------w',
-		'w--------w',
-		'w--------w',
-		' bbbbbbbb '
-	]
-};
-
-export const cpu: Map = {
-	name: 'CPU',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		' b b  b b ',
-		'w--------w',
-		' -------- ',
-		'w--------w',
-		' ---wb--- ',
-		' ---bw--- ',
-		'w--------w',
-		' -------- ',
-		'w--------w',
-		' b b  b b '
-	]
-};
-
-export const checker: Map = {
-	name: 'Checker',
-	category: '10x10',
-	author: 'Aya',
-	data: [
-		'----------',
-		'----------',
-		'----------',
-		'---wbwb---',
-		'---bwbw---',
-		'---wbwb---',
-		'---bwbw---',
-		'----------',
-		'----------',
-		'----------'
-	]
-};
-
-export const japaneseCurry: Map = {
-	name: 'Japanese curry',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'w-b-b-b-b-',
-		'-w-b-b-b-b',
-		'w-w-b-b-b-',
-		'-w-w-b-b-b',
-		'w-w-wwb-b-',
-		'-w-wbb-b-b',
-		'w-w-w-b-b-',
-		'-w-w-w-b-b',
-		'w-w-w-w-b-',
-		'-w-w-w-w-b'
-	]
-};
-
-export const mosaic: Map = {
-	name: 'Mosaic',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'- - - - - ',
-		' - - - - -',
-		'- - - - - ',
-		' - w w - -',
-		'- - b b - ',
-		' - w w - -',
-		'- - b b - ',
-		' - - - - -',
-		'- - - - - ',
-		' - - - - -',
-	]
-};
-
-export const arena: Map = {
-	name: 'Arena',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'- - -- - -',
-		' - -  - - ',
-		'- ------ -',
-		' -------- ',
-		'- --wb-- -',
-		'- --bw-- -',
-		' -------- ',
-		'- ------ -',
-		' - -  - - ',
-		'- - -- - -'
-	]
-};
-
-export const reactor: Map = {
-	name: 'Reactor',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'-w------b-',
-		'b- -  - -w',
-		'- --wb-- -',
-		'---b  w---',
-		'- b wb w -',
-		'- w bw b -',
-		'---w  b---',
-		'- --bw-- -',
-		'w- -  - -b',
-		'-b------w-'
-	]
-};
-
-export const sixeight: Map = {
-	name: '6x8',
-	category: 'Special',
-	data: [
-		'------',
-		'------',
-		'------',
-		'--wb--',
-		'--bw--',
-		'------',
-		'------',
-		'------'
-	]
-};
-
-export const spark: Map = {
-	name: 'Spark',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		' -      - ',
-		'----------',
-		' -------- ',
-		' -------- ',
-		' ---wb--- ',
-		' ---bw--- ',
-		' -------- ',
-		' -------- ',
-		'----------',
-		' -      - '
-	]
-};
-
-export const islands: Map = {
-	name: 'Islands',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'--------  ',
-		'---wb---  ',
-		'---bw---  ',
-		'--------  ',
-		'  -    -  ',
-		'  -    -  ',
-		'  --------',
-		'  --------',
-		'  --------',
-		'  --------'
-	]
-};
-
-export const galaxy: Map = {
-	name: 'Galaxy',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'   ------   ',
-		'  --www---  ',
-		' ------w--- ',
-		'---bbb--w---',
-		'--b---b-w-b-',
-		'-b--wwb-w-b-',
-		'-b-w-bww--b-',
-		'-b-w-b---b--',
-		'---w--bbb---',
-		' ---w------ ',
-		'  ---www--  ',
-		'   ------   '
-	]
-};
-
-export const triangle: Map = {
-	name: 'Triangle',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'    --    ',
-		'    --    ',
-		'   ----   ',
-		'   ----   ',
-		'  --wb--  ',
-		'  --bw--  ',
-		' -------- ',
-		' -------- ',
-		'----------',
-		'----------'
-	]
-};
-
-export const iphonex: Map = {
-	name: 'iPhone X',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		' --  -- ',
-		'--------',
-		'--------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------',
-		'--------',
-		' ------ '
-	]
-};
-
-export const dealWithIt: Map = {
-	name: 'Deal with it!',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'------------',
-		'--w-b-------',
-		' --b-w------',
-		'  --w-b---- ',
-		'   -------  '
-	]
-};
-
-export const experiment: Map = {
-	name: 'Let\'s experiment',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		' ------------ ',
-		'------wb------',
-		'------bw------',
-		'--------------',
-		'    -    -    ',
-		'------  ------',
-		'bbbbbb  wwwwww',
-		'bbbbbb  wwwwww',
-		'bbbbbb  wwwwww',
-		'bbbbbb  wwwwww',
-		'wwwwww  bbbbbb'
-	]
-};
-
-export const bigBoard: Map = {
-	name: 'Big board',
-	category: 'Special',
-	data: [
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'-------wb-------',
-		'-------bw-------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------'
-	]
-};
-
-export const twoBoard: Map = {
-	name: 'Two board',
-	category: 'Special',
-	author: 'Aya',
-	data: [
-		'-------- --------',
-		'-------- --------',
-		'-------- --------',
-		'---wb--- ---wb---',
-		'---bw--- ---bw---',
-		'-------- --------',
-		'-------- --------',
-		'-------- --------'
-	]
-};
-
-export const test1: Map = {
-	name: 'Test1',
-	category: 'Test',
-	data: [
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------'
-	]
-};
-
-export const test2: Map = {
-	name: 'Test2',
-	category: 'Test',
-	data: [
-		'------',
-		'------',
-		'-b--w-',
-		'-w--b-',
-		'-w--b-'
-	]
-};
-
-export const test3: Map = {
-	name: 'Test3',
-	category: 'Test',
-	data: [
-		'-w-',
-		'--w',
-		'w--',
-		'-w-',
-		'--w',
-		'w--',
-		'-w-',
-		'--w',
-		'w--',
-		'-w-',
-		'---',
-		'b--',
-	]
-};
-
-export const test4: Map = {
-	name: 'Test4',
-	category: 'Test',
-	data: [
-		'-w--b-',
-		'-w--b-',
-		'------',
-		'-w--b-',
-		'-w--b-'
-	]
-};
-
-// https://misskey.xyz/othello/5aaabf7fe126e10b5216ea09 64
-export const test5: Map = {
-	name: 'Test5',
-	category: 'Test',
-	data: [
-		'--wwwwww--',
-		'--wwwbwwww',
-		'-bwwbwbwww',
-		'-bwwwbwbww',
-		'-bwwbwbwbw',
-		'-bwbwbwb-w',
-		'bwbwwbbb-w',
-		'w-wbbbbb--',
-		'--w-b-w---',
-		'----------'
-	]
-};
diff --git a/src/misc/user/get-acct.ts b/src/misc/user/get-acct.ts
deleted file mode 100644
index 9afb03d88b..0000000000
--- a/src/misc/user/get-acct.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default user => {
-	return user.host === null ? user.username : `${user.username}@${user.host}`;
-};
diff --git a/src/misc/user/get-summary.ts b/src/misc/user/get-summary.ts
deleted file mode 100644
index 2c71d3eae9..0000000000
--- a/src/misc/user/get-summary.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { IUser, isLocalUser } from '../../models/user';
-import getAcct from './get-acct';
-
-/**
- * ユーザーを表す文字列を取得します。
- * @param user ユーザー
- */
-export default function(user: IUser): string {
-	let string = `${user.name} (@${getAcct(user)})\n` +
-		`${user.postsCount}投稿、${user.followingCount}フォロー、${user.followersCount}フォロワー\n`;
-
-	if (isLocalUser(user)) {
-		const account = user.account;
-		string += `場所: ${account.profile.location}、誕生日: ${account.profile.birthday}\n`;
-	}
-
-	return string + `「${user.description}」`;
-}
diff --git a/src/misc/user/parse-acct.ts b/src/misc/user/parse-acct.ts
deleted file mode 100644
index ef1f55405d..0000000000
--- a/src/misc/user/parse-acct.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export default acct => {
-	const splitted = acct.split('@', 2);
-	return { username: splitted[0], host: splitted[1] || null };
-};
diff --git a/src/notify.ts b/src/notify.ts
new file mode 100644
index 0000000000..228317b88f
--- /dev/null
+++ b/src/notify.ts
@@ -0,0 +1,50 @@
+import * as mongo from 'mongodb';
+import Notification from './models/notification';
+import Mute from './models/mute';
+import event from './event';
+import { pack } from './models/notification';
+
+export default (
+	notifiee: mongo.ObjectID,
+	notifier: mongo.ObjectID,
+	type: string,
+	content?: any
+) => new Promise<any>(async (resolve, reject) => {
+	if (notifiee.equals(notifier)) {
+		return resolve();
+	}
+
+	// Create notification
+	const notification = await Notification.insert(Object.assign({
+		createdAt: new Date(),
+		notifieeId: notifiee,
+		notifierId: notifier,
+		type: type,
+		isRead: false
+	}, content));
+
+	resolve(notification);
+
+	// Publish notification event
+	event(notifiee, 'notification',
+		await pack(notification));
+
+	// 3秒経っても(今回作成した)通知が既読にならなかったら「未読の通知がありますよ」イベントを発行する
+	setTimeout(async () => {
+		const fresh = await Notification.findOne({ _id: notification._id }, { isRead: true });
+		if (!fresh.isRead) {
+			//#region ただしミュートしているユーザーからの通知なら無視
+			const mute = await Mute.find({
+				muterId: notifiee,
+				deletedAt: { $exists: false }
+			});
+			const mutedUserIds = mute.map(m => m.muteeId.toString());
+			if (mutedUserIds.indexOf(notifier.toString()) != -1) {
+				return;
+			}
+			//#endregion
+
+			event(notifiee, 'unread_notification', await pack(notification));
+		}
+	}, 3000);
+});
diff --git a/src/othello/ai/back.ts b/src/othello/ai/back.ts
new file mode 100644
index 0000000000..a67f6fe835
--- /dev/null
+++ b/src/othello/ai/back.ts
@@ -0,0 +1,376 @@
+/**
+ * -AI-
+ * Botのバックエンド(思考を担当)
+ *
+ * 対話と思考を同じプロセスで行うと、思考時間が長引いたときにストリームから
+ * 切断されてしまうので、別々のプロセスで行うようにします
+ */
+
+import * as request from 'request-promise-native';
+import Othello, { Color } from '../core';
+import conf from '../../conf';
+
+let game;
+let form;
+
+/**
+ * BotアカウントのユーザーID
+ */
+const id = conf.othello_ai.id;
+
+/**
+ * BotアカウントのAPIキー
+ */
+const i = conf.othello_ai.i;
+
+let post;
+
+process.on('message', async msg => {
+	// 親プロセスからデータをもらう
+	if (msg.type == '_init_') {
+		game = msg.game;
+		form = msg.form;
+	}
+
+	// フォームが更新されたとき
+	if (msg.type == 'update-form') {
+		form.find(i => i.id == msg.body.id).value = msg.body.value;
+	}
+
+	// ゲームが始まったとき
+	if (msg.type == 'started') {
+		onGameStarted(msg.body);
+
+		//#region TLに投稿する
+		const game = msg.body;
+		const url = `${conf.url}/othello/${game.id}`;
+		const user = game.user1Id == id ? game.user2 : game.user1;
+		const isSettai = form[0].value === 0;
+		const text = isSettai
+			? `?[${user.name}](${conf.url}/@${user.username})さんの接待を始めました！`
+			: `対局を?[${user.name}](${conf.url}/@${user.username})さんと始めました！ (強さ${form[0].value})`;
+
+		const res = await request.post(`${conf.api_url}/posts/create`, {
+			json: { i,
+				text: `${text}\n→[観戦する](${url})`
+			}
+		});
+
+		post = res.createdPost;
+		//#endregion
+	}
+
+	// ゲームが終了したとき
+	if (msg.type == 'ended') {
+		// ストリームから切断
+		process.send({
+			type: 'close'
+		});
+
+		//#region TLに投稿する
+		const user = game.user1Id == id ? game.user2 : game.user1;
+		const isSettai = form[0].value === 0;
+		const text = isSettai
+			? msg.body.winnerId === null
+				? `?[${user.name}](${conf.url}/@${user.username})さんに接待で引き分けました...`
+				: msg.body.winnerId == id
+					? `?[${user.name}](${conf.url}/@${user.username})さんに接待で勝ってしまいました...`
+					: `?[${user.name}](${conf.url}/@${user.username})さんに接待で負けてあげました♪`
+			: msg.body.winnerId === null
+				? `?[${user.name}](${conf.url}/@${user.username})さんと引き分けました～`
+				: msg.body.winnerId == id
+					? `?[${user.name}](${conf.url}/@${user.username})さんに勝ちました♪`
+					: `?[${user.name}](${conf.url}/@${user.username})さんに負けました...`;
+
+		await request.post(`${conf.api_url}/posts/create`, {
+			json: { i,
+				repostId: post.id,
+				text: text
+			}
+		});
+		//#endregion
+
+		process.exit();
+	}
+
+	// 打たれたとき
+	if (msg.type == 'set') {
+		onSet(msg.body);
+	}
+});
+
+let o: Othello;
+let botColor: Color;
+
+// 各マスの強さ
+let cellWeights;
+
+/**
+ * ゲーム開始時
+ * @param g ゲーム情報
+ */
+function onGameStarted(g) {
+	game = g;
+
+	// オセロエンジン初期化
+	o = new Othello(game.settings.map, {
+		isLlotheo: game.settings.isLlotheo,
+		canPutEverywhere: game.settings.canPutEverywhere,
+		loopedBoard: game.settings.loopedBoard
+	});
+
+	// 各マスの価値を計算しておく
+	cellWeights = o.map.map((pix, i) => {
+		if (pix == 'null') return 0;
+		const [x, y] = o.transformPosToXy(i);
+		let count = 0;
+		const get = (x, y) => {
+			if (x < 0 || y < 0 || x >= o.mapWidth || y >= o.mapHeight) return 'null';
+			return o.mapDataGet(o.transformXyToPos(x, y));
+		};
+
+		if (get(x    , y - 1) == 'null') count++;
+		if (get(x + 1, y - 1) == 'null') count++;
+		if (get(x + 1, y    ) == 'null') count++;
+		if (get(x + 1, y + 1) == 'null') count++;
+		if (get(x    , y + 1) == 'null') count++;
+		if (get(x - 1, y + 1) == 'null') count++;
+		if (get(x - 1, y    ) == 'null') count++;
+		if (get(x - 1, y - 1) == 'null') count++;
+		//return Math.pow(count, 3);
+		return count >= 4 ? 1 : 0;
+	});
+
+	botColor = game.user1Id == id && game.black == 1 || game.user2Id == id && game.black == 2;
+
+	if (botColor) {
+		think();
+	}
+}
+
+function onSet(x) {
+	o.put(x.color, x.pos);
+
+	if (x.next === botColor) {
+		think();
+	}
+}
+
+const db = {};
+
+function think() {
+	console.log('Thinking...');
+	console.time('think');
+
+	const isSettai = form[0].value === 0;
+
+	// 接待モードのときは、全力(5手先読みくらい)で負けるようにする
+	const maxDepth = isSettai ? 5 : form[0].value;
+
+	/**
+	 * Botにとってある局面がどれだけ有利か取得する
+	 */
+	function staticEval() {
+		let score = o.canPutSomewhere(botColor).length;
+
+		cellWeights.forEach((weight, i) => {
+			// 係数
+			const coefficient = 30;
+			weight = weight * coefficient;
+
+			const stone = o.board[i];
+			if (stone === botColor) {
+				// TODO: 価値のあるマスに設置されている自分の石に縦か横に接するマスは価値があると判断する
+				score += weight;
+			} else if (stone !== null) {
+				score -= weight;
+			}
+		});
+
+		// ロセオならスコアを反転
+		if (game.settings.isLlotheo) score = -score;
+
+		// 接待ならスコアを反転
+		if (isSettai) score = -score;
+
+		return score;
+	}
+
+	/**
+	 * αβ法での探索
+	 */
+	const dive = (pos: number, alpha = -Infinity, beta = Infinity, depth = 0): number => {
+		// 試し打ち
+		o.put(o.turn, pos);
+
+		const key = o.board.toString();
+		let cache = db[key];
+		if (cache) {
+			if (alpha >= cache.upper) {
+				o.undo();
+				return cache.upper;
+			}
+			if (beta <= cache.lower) {
+				o.undo();
+				return cache.lower;
+			}
+			alpha = Math.max(alpha, cache.lower);
+			beta = Math.min(beta, cache.upper);
+		} else {
+			cache = {
+				upper: Infinity,
+				lower: -Infinity
+			};
+		}
+
+		const isBotTurn = o.turn === botColor;
+
+		// 勝った
+		if (o.turn === null) {
+			const winner = o.winner;
+
+			// 勝つことによる基本スコア
+			const base = 10000;
+
+			let score;
+
+			if (game.settings.isLlotheo) {
+				// 勝ちは勝ちでも、より自分の石を少なくした方が美しい勝ちだと判定する
+				score = o.winner ? base - (o.blackCount * 100) : base - (o.whiteCount * 100);
+			} else {
+				// 勝ちは勝ちでも、より相手の石を少なくした方が美しい勝ちだと判定する
+				score = o.winner ? base + (o.blackCount * 100) : base + (o.whiteCount * 100);
+			}
+
+			// 巻き戻し
+			o.undo();
+
+			// 接待なら自分が負けた方が高スコア
+			return isSettai
+				? winner !== botColor ? score : -score
+				: winner === botColor ? score : -score;
+		}
+
+		if (depth === maxDepth) {
+			// 静的に評価
+			const score = staticEval();
+
+			// 巻き戻し
+			o.undo();
+
+			return score;
+		} else {
+			const cans = o.canPutSomewhere(o.turn);
+
+			let value = isBotTurn ? -Infinity : Infinity;
+			let a = alpha;
+			let b = beta;
+
+			// 次のターンのプレイヤーにとって最も良い手を取得
+			for (const p of cans) {
+				if (isBotTurn) {
+					const score = dive(p, a, beta, depth + 1);
+					value = Math.max(value, score);
+					a = Math.max(a, value);
+					if (value >= beta) break;
+				} else {
+					const score = dive(p, alpha, b, depth + 1);
+					value = Math.min(value, score);
+					b = Math.min(b, value);
+					if (value <= alpha) break;
+				}
+			}
+
+			// 巻き戻し
+			o.undo();
+
+			if (value <= alpha) {
+				cache.upper = value;
+			} else if (value >= beta) {
+				cache.lower = value;
+			} else {
+				cache.upper = value;
+				cache.lower = value;
+			}
+
+			db[key] = cache;
+
+			return value;
+		}
+	};
+
+	/**
+	 * αβ法での探索(キャッシュ無し)(デバッグ用)
+	 */
+	const dive2 = (pos: number, alpha = -Infinity, beta = Infinity, depth = 0): number => {
+		// 試し打ち
+		o.put(o.turn, pos);
+
+		const isBotTurn = o.turn === botColor;
+
+		// 勝った
+		if (o.turn === null) {
+			const winner = o.winner;
+
+			// 勝つことによる基本スコア
+			const base = 10000;
+
+			let score;
+
+			if (game.settings.isLlotheo) {
+				// 勝ちは勝ちでも、より自分の石を少なくした方が美しい勝ちだと判定する
+				score = o.winner ? base - (o.blackCount * 100) : base - (o.whiteCount * 100);
+			} else {
+				// 勝ちは勝ちでも、より相手の石を少なくした方が美しい勝ちだと判定する
+				score = o.winner ? base + (o.blackCount * 100) : base + (o.whiteCount * 100);
+			}
+
+			// 巻き戻し
+			o.undo();
+
+			// 接待なら自分が負けた方が高スコア
+			return isSettai
+				? winner !== botColor ? score : -score
+				: winner === botColor ? score : -score;
+		}
+
+		if (depth === maxDepth) {
+			// 静的に評価
+			const score = staticEval();
+
+			// 巻き戻し
+			o.undo();
+
+			return score;
+		} else {
+			const cans = o.canPutSomewhere(o.turn);
+
+			// 次のターンのプレイヤーにとって最も良い手を取得
+			for (const p of cans) {
+				if (isBotTurn) {
+					alpha = Math.max(alpha, dive2(p, alpha, beta, depth + 1));
+				} else {
+					beta = Math.min(beta, dive2(p, alpha, beta, depth + 1));
+				}
+				if (alpha >= beta) break;
+			}
+
+			// 巻き戻し
+			o.undo();
+
+			return isBotTurn ? alpha : beta;
+		}
+	};
+
+	const cans = o.canPutSomewhere(botColor);
+	const scores = cans.map(p => dive(p));
+	const pos = cans[scores.indexOf(Math.max(...scores))];
+
+	console.log('Thinked:', pos);
+	console.timeEnd('think');
+
+	process.send({
+		type: 'put',
+		pos
+	});
+}
diff --git a/src/othello/ai/front.ts b/src/othello/ai/front.ts
new file mode 100644
index 0000000000..3414d64340
--- /dev/null
+++ b/src/othello/ai/front.ts
@@ -0,0 +1,233 @@
+/**
+ * -AI-
+ * Botのフロントエンド(ストリームとの対話を担当)
+ *
+ * 対話と思考を同じプロセスで行うと、思考時間が長引いたときにストリームから
+ * 切断されてしまうので、別々のプロセスで行うようにします
+ */
+
+import * as childProcess from 'child_process';
+const WebSocket = require('ws');
+import * as ReconnectingWebSocket from 'reconnecting-websocket';
+import * as request from 'request-promise-native';
+import conf from '../../conf';
+
+// 設定 ////////////////////////////////////////////////////////
+
+/**
+ * BotアカウントのAPIキー
+ */
+const i = conf.othello_ai.i;
+
+/**
+ * BotアカウントのユーザーID
+ */
+const id = conf.othello_ai.id;
+
+////////////////////////////////////////////////////////////////
+
+/**
+ * ホームストリーム
+ */
+const homeStream = new ReconnectingWebSocket(`${conf.ws_url}/?i=${i}`, undefined, {
+	constructor: WebSocket
+});
+
+homeStream.on('open', () => {
+	console.log('home stream opened');
+});
+
+homeStream.on('close', () => {
+	console.log('home stream closed');
+});
+
+homeStream.on('message', message => {
+	const msg = JSON.parse(message.toString());
+
+	// タイムライン上でなんか言われたまたは返信されたとき
+	if (msg.type == 'mention' || msg.type == 'reply') {
+		const post = msg.body;
+
+		if (post.userId == id) return;
+
+		// リアクションする
+		request.post(`${conf.api_url}/posts/reactions/create`, {
+			json: { i,
+				postId: post.id,
+				reaction: 'love'
+			}
+		});
+
+		if (post.text) {
+			if (post.text.indexOf('オセロ') > -1) {
+				request.post(`${conf.api_url}/posts/create`, {
+					json: { i,
+						replyId: post.id,
+						text: '良いですよ～'
+					}
+				});
+
+				invite(post.userId);
+			}
+		}
+	}
+
+	// メッセージでなんか言われたとき
+	if (msg.type == 'messaging_message') {
+		const message = msg.body;
+		if (message.text) {
+			if (message.text.indexOf('オセロ') > -1) {
+				request.post(`${conf.api_url}/messaging/messages/create`, {
+					json: { i,
+						userId: message.userId,
+						text: '良いですよ～'
+					}
+				});
+
+				invite(message.userId);
+			}
+		}
+	}
+});
+
+// ユーザーを対局に誘う
+function invite(userId) {
+	request.post(`${conf.api_url}/othello/match`, {
+		json: { i,
+			userId: userId
+		}
+	});
+}
+
+/**
+ * オセロストリーム
+ */
+const othelloStream = new ReconnectingWebSocket(`${conf.ws_url}/othello?i=${i}`, undefined, {
+	constructor: WebSocket
+});
+
+othelloStream.on('open', () => {
+	console.log('othello stream opened');
+});
+
+othelloStream.on('close', () => {
+	console.log('othello stream closed');
+});
+
+othelloStream.on('message', message => {
+	const msg = JSON.parse(message.toString());
+
+	// 招待されたとき
+	if (msg.type == 'invited') {
+		onInviteMe(msg.body.parent);
+	}
+
+	// マッチしたとき
+	if (msg.type == 'matched') {
+		gameStart(msg.body);
+	}
+});
+
+/**
+ * ゲーム開始
+ * @param game ゲーム情報
+ */
+function gameStart(game) {
+	// ゲームストリームに接続
+	const gw = new ReconnectingWebSocket(`${conf.ws_url}/othello-game?i=${i}&game=${game.id}`, undefined, {
+		constructor: WebSocket
+	});
+
+	gw.on('open', () => {
+		console.log('othello game stream opened');
+
+		// フォーム
+		const form = [{
+			id: 'strength',
+			type: 'radio',
+			label: '強さ',
+			value: 2,
+			items: [{
+				label: '接待',
+				value: 0
+			}, {
+				label: '弱',
+				value: 1
+			}, {
+				label: '中',
+				value: 2
+			}, {
+				label: '強',
+				value: 3
+			}, {
+				label: '最強',
+				value: 5
+			}]
+		}];
+
+		//#region バックエンドプロセス開始
+		const ai = childProcess.fork(__dirname + '/back.js');
+
+		// バックエンドプロセスに情報を渡す
+		ai.send({
+			type: '_init_',
+			game,
+			form
+		});
+
+		ai.on('message', msg => {
+			if (msg.type == 'put') {
+				gw.send(JSON.stringify({
+					type: 'set',
+					pos: msg.pos
+				}));
+			} else if (msg.type == 'close') {
+				gw.close();
+			}
+		});
+
+		// ゲームストリームから情報が流れてきたらそのままバックエンドプロセスに伝える
+		gw.on('message', message => {
+			const msg = JSON.parse(message.toString());
+			ai.send(msg);
+		});
+		//#endregion
+
+		// フォーム初期化
+		setTimeout(() => {
+			gw.send(JSON.stringify({
+				type: 'init-form',
+				body: form
+			}));
+		}, 1000);
+
+		// どんな設定内容の対局でも受け入れる
+		setTimeout(() => {
+			gw.send(JSON.stringify({
+				type: 'accept'
+			}));
+		}, 2000);
+	});
+
+	gw.on('close', () => {
+		console.log('othello game stream closed');
+	});
+}
+
+/**
+ * オセロの対局に招待されたとき
+ * @param inviter 誘ってきたユーザー
+ */
+async function onInviteMe(inviter) {
+	console.log(`Someone invited me: @${inviter.username}`);
+
+	// 承認
+	const game = await request.post(`${conf.api_url}/othello/match`, {
+		json: {
+			i,
+			userId: inviter.id
+		}
+	});
+
+	gameStart(game);
+}
diff --git a/src/othello/ai/index.ts b/src/othello/ai/index.ts
new file mode 100644
index 0000000000..5cd1db82da
--- /dev/null
+++ b/src/othello/ai/index.ts
@@ -0,0 +1 @@
+require('./front');
diff --git a/src/othello/core.ts b/src/othello/core.ts
new file mode 100644
index 0000000000..217066d375
--- /dev/null
+++ b/src/othello/core.ts
@@ -0,0 +1,340 @@
+/**
+ * true ... 黒
+ * false ... 白
+ */
+export type Color = boolean;
+const BLACK = true;
+const WHITE = false;
+
+export type MapPixel = 'null' | 'empty';
+
+export type Options = {
+	isLlotheo: boolean;
+	canPutEverywhere: boolean;
+	loopedBoard: boolean;
+};
+
+export type Undo = {
+	/**
+	 * 色
+	 */
+	color: Color,
+
+	/**
+	 * どこに打ったか
+	 */
+	pos: number;
+
+	/**
+	 * 反転した石の位置の配列
+	 */
+	effects: number[];
+
+	/**
+	 * ターン
+	 */
+	turn: Color;
+};
+
+/**
+ * オセロエンジン
+ */
+export default class Othello {
+	public map: MapPixel[];
+	public mapWidth: number;
+	public mapHeight: number;
+	public board: Color[];
+	public turn: Color = BLACK;
+	public opts: Options;
+
+	public prevPos = -1;
+	public prevColor: Color = null;
+
+	private logs: Undo[] = [];
+
+	/**
+	 * ゲームを初期化します
+	 */
+	constructor(map: string[], opts: Options) {
+		//#region binds
+		this.put = this.put.bind(this);
+		//#endregion
+
+		//#region Options
+		this.opts = opts;
+		if (this.opts.isLlotheo == null) this.opts.isLlotheo = false;
+		if (this.opts.canPutEverywhere == null) this.opts.canPutEverywhere = false;
+		if (this.opts.loopedBoard == null) this.opts.loopedBoard = false;
+		//#endregion
+
+		//#region Parse map data
+		this.mapWidth = map[0].length;
+		this.mapHeight = map.length;
+		const mapData = map.join('');
+
+		this.board = mapData.split('').map(d => {
+			if (d == '-') return null;
+			if (d == 'b') return BLACK;
+			if (d == 'w') return WHITE;
+			return undefined;
+		});
+
+		this.map = mapData.split('').map(d => {
+			if (d == '-' || d == 'b' || d == 'w') return 'empty';
+			return 'null';
+		});
+		//#endregion
+
+		// ゲームが始まった時点で片方の色の石しかないか、始まった時点で勝敗が決定するようなマップの場合がある
+		if (this.canPutSomewhere(BLACK).length == 0) {
+			if (this.canPutSomewhere(WHITE).length == 0) {
+				this.turn = null;
+			} else {
+				this.turn = WHITE;
+			}
+		}
+	}
+
+	/**
+	 * 黒石の数
+	 */
+	public get blackCount() {
+		return this.board.filter(x => x === BLACK).length;
+	}
+
+	/**
+	 * 白石の数
+	 */
+	public get whiteCount() {
+		return this.board.filter(x => x === WHITE).length;
+	}
+
+	/**
+	 * 黒石の比率
+	 */
+	public get blackP() {
+		if (this.blackCount == 0 && this.whiteCount == 0) return 0;
+		return this.blackCount / (this.blackCount + this.whiteCount);
+	}
+
+	/**
+	 * 白石の比率
+	 */
+	public get whiteP() {
+		if (this.blackCount == 0 && this.whiteCount == 0) return 0;
+		return this.whiteCount / (this.blackCount + this.whiteCount);
+	}
+
+	public transformPosToXy(pos: number): number[] {
+		const x = pos % this.mapWidth;
+		const y = Math.floor(pos / this.mapWidth);
+		return [x, y];
+	}
+
+	public transformXyToPos(x: number, y: number): number {
+		return x + (y * this.mapWidth);
+	}
+
+	/**
+	 * 指定のマスに石を打ちます
+	 * @param color 石の色
+	 * @param pos 位置
+	 */
+	public put(color: Color, pos: number) {
+		this.prevPos = pos;
+		this.prevColor = color;
+
+		this.board[pos] = color;
+
+		// 反転させられる石を取得
+		const effects = this.effects(color, pos);
+
+		// 反転させる
+		for (const pos of effects) {
+			this.board[pos] = color;
+		}
+
+		const turn = this.turn;
+
+		this.logs.push({
+			color,
+			pos,
+			effects,
+			turn
+		});
+
+		this.calcTurn();
+	}
+
+	private calcTurn() {
+		// ターン計算
+		if (this.canPutSomewhere(!this.prevColor).length > 0) {
+			this.turn = !this.prevColor;
+		} else if (this.canPutSomewhere(this.prevColor).length > 0) {
+			this.turn = this.prevColor;
+		} else {
+			this.turn = null;
+		}
+	}
+
+	public undo() {
+		const undo = this.logs.pop();
+		this.prevColor = undo.color;
+		this.prevPos = undo.pos;
+		this.board[undo.pos] = null;
+		for (const pos of undo.effects) {
+			const color = this.board[pos];
+			this.board[pos] = !color;
+		}
+		this.turn = undo.turn;
+	}
+
+	/**
+	 * 指定した位置のマップデータのマスを取得します
+	 * @param pos 位置
+	 */
+	public mapDataGet(pos: number): MapPixel {
+		const [x, y] = this.transformPosToXy(pos);
+		if (x < 0 || y < 0 || x >= this.mapWidth || y >= this.mapHeight) return 'null';
+		return this.map[pos];
+	}
+
+	/**
+	 * 打つことができる場所を取得します
+	 */
+	public canPutSomewhere(color: Color): number[] {
+		const result = [];
+
+		this.board.forEach((x, i) => {
+			if (this.canPut(color, i)) result.push(i);
+		});
+
+		return result;
+	}
+
+	/**
+	 * 指定のマスに石を打つことができるかどうかを取得します
+	 * @param color 自分の色
+	 * @param pos 位置
+	 */
+	public canPut(color: Color, pos: number): boolean {
+		// 既に石が置いてある場所には打てない
+		if (this.board[pos] !== null) return false;
+
+		if (this.opts.canPutEverywhere) {
+			// 挟んでなくても置けるモード
+			return this.mapDataGet(pos) == 'empty';
+		} else {
+			// 相手の石を1つでも反転させられるか
+			return this.effects(color, pos).length !== 0;
+		}
+	}
+
+	/**
+	 * 指定のマスに石を置いた時の、反転させられる石を取得します
+	 * @param color 自分の色
+	 * @param pos 位置
+	 */
+	public effects(color: Color, pos: number): number[] {
+		const enemyColor = !color;
+
+		// ひっくり返せる石(の位置)リスト
+		let stones = [];
+
+		const initPos = pos;
+
+		// 走査
+		const iterate = (fn: (i: number) => number[]) => {
+			let i = 1;
+			const found = [];
+
+			while (true) {
+				let [x, y] = fn(i);
+
+				// 座標が指し示す位置がボード外に出たとき
+				if (this.opts.loopedBoard) {
+					if (x <  0             ) x = this.mapWidth  - ((-x) % this.mapWidth);
+					if (y <  0             ) y = this.mapHeight - ((-y) % this.mapHeight);
+					if (x >= this.mapWidth ) x = x % this.mapWidth;
+					if (y >= this.mapHeight) y = y % this.mapHeight;
+
+					// for debug
+					//if (x < 0 || y < 0 || x >= this.mapWidth || y >= this.mapHeight) {
+					//	console.log(x, y);
+					//}
+
+					// 一周して自分に帰ってきたら
+					if (this.transformXyToPos(x, y) == initPos) {
+						// ↓のコメントアウトを外すと、「現時点で自分の石が隣接していないが、
+						// そこに置いたとするとループして最終的に挟んだことになる」というケースを有効化します。(Test4のマップで違いが分かります)
+						// このケースを有効にした方が良いのか無効にした方が良いのか判断がつかなかったためとりあえず無効としておきます
+						// (あと無効な方がゲームとしておもしろそうだった)
+						stones = stones.concat(found);
+						break;
+					}
+				} else {
+					if (x == -1 || y == -1 || x == this.mapWidth || y == this.mapHeight) break;
+				}
+
+				const pos = this.transformXyToPos(x, y);
+
+				//#region 「配置不能」マスに当たった場合走査終了
+				const pixel = this.mapDataGet(pos);
+				if (pixel == 'null') break;
+				//#endregion
+
+				// 石取得
+				const stone = this.board[pos];
+
+				// 石が置かれていないマスなら走査終了
+				if (stone === null) break;
+
+				// 相手の石なら「ひっくり返せるかもリスト」に入れておく
+				if (stone === enemyColor) found.push(pos);
+
+				// 自分の石なら「ひっくり返せるかもリスト」を「ひっくり返せるリスト」に入れ、走査終了
+				if (stone === color) {
+					stones = stones.concat(found);
+					break;
+				}
+
+				i++;
+			}
+		};
+
+		const [x, y] = this.transformPosToXy(pos);
+
+		iterate(i => [x    , y - i]); // 上
+		iterate(i => [x + i, y - i]); // 右上
+		iterate(i => [x + i, y    ]); // 右
+		iterate(i => [x + i, y + i]); // 右下
+		iterate(i => [x    , y + i]); // 下
+		iterate(i => [x - i, y + i]); // 左下
+		iterate(i => [x - i, y    ]); // 左
+		iterate(i => [x - i, y - i]); // 左上
+
+		return stones;
+	}
+
+	/**
+	 * ゲームが終了したか否か
+	 */
+	public get isEnded(): boolean {
+		return this.turn === null;
+	}
+
+	/**
+	 * ゲームの勝者 (null = 引き分け)
+	 */
+	public get winner(): Color {
+		if (!this.isEnded) return undefined;
+
+		if (this.blackCount == this.whiteCount) return null;
+
+		if (this.opts.isLlotheo) {
+			return this.blackCount > this.whiteCount ? WHITE : BLACK;
+		} else {
+			return this.blackCount > this.whiteCount ? BLACK : WHITE;
+		}
+	}
+}
diff --git a/src/othello/maps.ts b/src/othello/maps.ts
new file mode 100644
index 0000000000..68e5a446f1
--- /dev/null
+++ b/src/othello/maps.ts
@@ -0,0 +1,911 @@
+/**
+ * 組み込みマップ定義
+ *
+ * データ値:
+ * (スペース) ... マス無し
+ * - ... マス
+ * b ... 初期配置される黒石
+ * w ... 初期配置される白石
+ */
+
+export type Map = {
+	name?: string;
+	category?: string;
+	author?: string;
+	data: string[];
+};
+
+export const fourfour: Map = {
+	name: '4x4',
+	category: '4x4',
+	data: [
+		'----',
+		'-wb-',
+		'-bw-',
+		'----'
+	]
+};
+
+export const sixsix: Map = {
+	name: '6x6',
+	category: '6x6',
+	data: [
+		'------',
+		'------',
+		'--wb--',
+		'--bw--',
+		'------',
+		'------'
+	]
+};
+
+export const roundedSixsix: Map = {
+	name: '6x6 rounded',
+	category: '6x6',
+	author: 'syuilo',
+	data: [
+		' ---- ',
+		'------',
+		'--wb--',
+		'--bw--',
+		'------',
+		' ---- '
+	]
+};
+
+export const roundedSixsix2: Map = {
+	name: '6x6 rounded 2',
+	category: '6x6',
+	author: 'syuilo',
+	data: [
+		'  --  ',
+		' ---- ',
+		'--wb--',
+		'--bw--',
+		' ---- ',
+		'  --  '
+	]
+};
+
+export const eighteight: Map = {
+	name: '8x8',
+	category: '8x8',
+	data: [
+		'--------',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'--------'
+	]
+};
+
+export const eighteightH1: Map = {
+	name: '8x8 handicap 1',
+	category: '8x8',
+	data: [
+		'b-------',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'--------'
+	]
+};
+
+export const eighteightH2: Map = {
+	name: '8x8 handicap 2',
+	category: '8x8',
+	data: [
+		'b-------',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'-------b'
+	]
+};
+
+export const eighteightH3: Map = {
+	name: '8x8 handicap 3',
+	category: '8x8',
+	data: [
+		'b------b',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'-------b'
+	]
+};
+
+export const eighteightH4: Map = {
+	name: '8x8 handicap 4',
+	category: '8x8',
+	data: [
+		'b------b',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'b------b'
+	]
+};
+
+export const eighteightH12: Map = {
+	name: '8x8 handicap 12',
+	category: '8x8',
+	data: [
+		'bb----bb',
+		'b------b',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'b------b',
+		'bb----bb'
+	]
+};
+
+export const eighteightH16: Map = {
+	name: '8x8 handicap 16',
+	category: '8x8',
+	data: [
+		'bbb---bb',
+		'b------b',
+		'-------b',
+		'---wb---',
+		'---bw---',
+		'b-------',
+		'b------b',
+		'bb---bbb'
+	]
+};
+
+export const eighteightH20: Map = {
+	name: '8x8 handicap 20',
+	category: '8x8',
+	data: [
+		'bbb--bbb',
+		'b------b',
+		'b------b',
+		'---wb---',
+		'---bw---',
+		'b------b',
+		'b------b',
+		'bbb---bb'
+	]
+};
+
+export const eighteightH28: Map = {
+	name: '8x8 handicap 28',
+	category: '8x8',
+	data: [
+		'bbbbbbbb',
+		'b------b',
+		'b------b',
+		'b--wb--b',
+		'b--bw--b',
+		'b------b',
+		'b------b',
+		'bbbbbbbb'
+	]
+};
+
+export const roundedEighteight: Map = {
+	name: '8x8 rounded',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		' ------ ',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		' ------ '
+	]
+};
+
+export const roundedEighteight2: Map = {
+	name: '8x8 rounded 2',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'  ----  ',
+		' ------ ',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		' ------ ',
+		'  ----  '
+	]
+};
+
+export const roundedEighteight3: Map = {
+	name: '8x8 rounded 3',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'   --   ',
+		'  ----  ',
+		' ------ ',
+		'---wb---',
+		'---bw---',
+		' ------ ',
+		'  ----  ',
+		'   --   '
+	]
+};
+
+export const eighteightWithNotch: Map = {
+	name: '8x8 with notch',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'---  ---',
+		'--------',
+		'--------',
+		' --wb-- ',
+		' --bw-- ',
+		'--------',
+		'--------',
+		'---  ---'
+	]
+};
+
+export const eighteightWithSomeHoles: Map = {
+	name: '8x8 with some holes',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'--- ----',
+		'----- --',
+		'-- -----',
+		'---wb---',
+		'---bw- -',
+		' -------',
+		'--- ----',
+		'--------'
+	]
+};
+
+export const circle: Map = {
+	name: 'Circle',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'   --   ',
+		' ------ ',
+		' ------ ',
+		'---wb---',
+		'---bw---',
+		' ------ ',
+		' ------ ',
+		'   --   '
+	]
+};
+
+export const smile: Map = {
+	name: 'Smile',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		' ------ ',
+		'--------',
+		'-- -- --',
+		'---wb---',
+		'-- bw --',
+		'---  ---',
+		'--------',
+		' ------ '
+	]
+};
+
+export const window: Map = {
+	name: 'Window',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'--------',
+		'-  --  -',
+		'-  --  -',
+		'---wb---',
+		'---bw---',
+		'-  --  -',
+		'-  --  -',
+		'--------'
+	]
+};
+
+export const reserved: Map = {
+	name: 'Reserved',
+	category: '8x8',
+	author: 'Aya',
+	data: [
+		'w------b',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'b------w'
+	]
+};
+
+export const x: Map = {
+	name: 'X',
+	category: '8x8',
+	author: 'Aya',
+	data: [
+		'w------b',
+		'-w----b-',
+		'--w--b--',
+		'---wb---',
+		'---bw---',
+		'--b--w--',
+		'-b----w-',
+		'b------w'
+	]
+};
+
+export const parallel: Map = {
+	name: 'Parallel',
+	category: '8x8',
+	author: 'Aya',
+	data: [
+		'--------',
+		'--------',
+		'--------',
+		'---bb---',
+		'---ww---',
+		'--------',
+		'--------',
+		'--------'
+	]
+};
+
+export const lackOfBlack: Map = {
+	name: 'Lack of Black',
+	category: '8x8',
+	data: [
+		'--------',
+		'--------',
+		'--------',
+		'---w----',
+		'---bw---',
+		'--------',
+		'--------',
+		'--------'
+	]
+};
+
+export const squareParty: Map = {
+	name: 'Square Party',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'--------',
+		'-wwwbbb-',
+		'-w-wb-b-',
+		'-wwwbbb-',
+		'-bbbwww-',
+		'-b-bw-w-',
+		'-bbbwww-',
+		'--------'
+	]
+};
+
+export const minesweeper: Map = {
+	name: 'Minesweeper',
+	category: '8x8',
+	author: 'syuilo',
+	data: [
+		'b-b--w-w',
+		'-w-wb-b-',
+		'w-b--w-b',
+		'-b-wb-w-',
+		'-w-bw-b-',
+		'b-w--b-w',
+		'-b-bw-w-',
+		'w-w--b-b'
+	]
+};
+
+export const tenthtenth: Map = {
+	name: '10x10',
+	category: '10x10',
+	data: [
+		'----------',
+		'----------',
+		'----------',
+		'----------',
+		'----wb----',
+		'----bw----',
+		'----------',
+		'----------',
+		'----------',
+		'----------'
+	]
+};
+
+export const hole: Map = {
+	name: 'The Hole',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'----------',
+		'----------',
+		'--wb--wb--',
+		'--bw--bw--',
+		'----  ----',
+		'----  ----',
+		'--wb--wb--',
+		'--bw--bw--',
+		'----------',
+		'----------'
+	]
+};
+
+export const grid: Map = {
+	name: 'Grid',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'----------',
+		'- - -- - -',
+		'----------',
+		'- - -- - -',
+		'----wb----',
+		'----bw----',
+		'- - -- - -',
+		'----------',
+		'- - -- - -',
+		'----------'
+	]
+};
+
+export const cross: Map = {
+	name: 'Cross',
+	category: '10x10',
+	author: 'Aya',
+	data: [
+		'   ----   ',
+		'   ----   ',
+		'   ----   ',
+		'----------',
+		'----wb----',
+		'----bw----',
+		'----------',
+		'   ----   ',
+		'   ----   ',
+		'   ----   '
+	]
+};
+
+export const charX: Map = {
+	name: 'Char X',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'---    ---',
+		'----  ----',
+		'----------',
+		' -------- ',
+		'  --wb--  ',
+		'  --bw--  ',
+		' -------- ',
+		'----------',
+		'----  ----',
+		'---    ---'
+	]
+};
+
+export const charY: Map = {
+	name: 'Char Y',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'---    ---',
+		'----  ----',
+		'----------',
+		' -------- ',
+		'  --wb--  ',
+		'  --bw--  ',
+		'  ------  ',
+		'  ------  ',
+		'  ------  ',
+		'  ------  '
+	]
+};
+
+export const walls: Map = {
+	name: 'Walls',
+	category: '10x10',
+	author: 'Aya',
+	data: [
+		' bbbbbbbb ',
+		'w--------w',
+		'w--------w',
+		'w--------w',
+		'w---wb---w',
+		'w---bw---w',
+		'w--------w',
+		'w--------w',
+		'w--------w',
+		' bbbbbbbb '
+	]
+};
+
+export const cpu: Map = {
+	name: 'CPU',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		' b b  b b ',
+		'w--------w',
+		' -------- ',
+		'w--------w',
+		' ---wb--- ',
+		' ---bw--- ',
+		'w--------w',
+		' -------- ',
+		'w--------w',
+		' b b  b b '
+	]
+};
+
+export const checker: Map = {
+	name: 'Checker',
+	category: '10x10',
+	author: 'Aya',
+	data: [
+		'----------',
+		'----------',
+		'----------',
+		'---wbwb---',
+		'---bwbw---',
+		'---wbwb---',
+		'---bwbw---',
+		'----------',
+		'----------',
+		'----------'
+	]
+};
+
+export const japaneseCurry: Map = {
+	name: 'Japanese curry',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'w-b-b-b-b-',
+		'-w-b-b-b-b',
+		'w-w-b-b-b-',
+		'-w-w-b-b-b',
+		'w-w-wwb-b-',
+		'-w-wbb-b-b',
+		'w-w-w-b-b-',
+		'-w-w-w-b-b',
+		'w-w-w-w-b-',
+		'-w-w-w-w-b'
+	]
+};
+
+export const mosaic: Map = {
+	name: 'Mosaic',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'- - - - - ',
+		' - - - - -',
+		'- - - - - ',
+		' - w w - -',
+		'- - b b - ',
+		' - w w - -',
+		'- - b b - ',
+		' - - - - -',
+		'- - - - - ',
+		' - - - - -',
+	]
+};
+
+export const arena: Map = {
+	name: 'Arena',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'- - -- - -',
+		' - -  - - ',
+		'- ------ -',
+		' -------- ',
+		'- --wb-- -',
+		'- --bw-- -',
+		' -------- ',
+		'- ------ -',
+		' - -  - - ',
+		'- - -- - -'
+	]
+};
+
+export const reactor: Map = {
+	name: 'Reactor',
+	category: '10x10',
+	author: 'syuilo',
+	data: [
+		'-w------b-',
+		'b- -  - -w',
+		'- --wb-- -',
+		'---b  w---',
+		'- b wb w -',
+		'- w bw b -',
+		'---w  b---',
+		'- --bw-- -',
+		'w- -  - -b',
+		'-b------w-'
+	]
+};
+
+export const sixeight: Map = {
+	name: '6x8',
+	category: 'Special',
+	data: [
+		'------',
+		'------',
+		'------',
+		'--wb--',
+		'--bw--',
+		'------',
+		'------',
+		'------'
+	]
+};
+
+export const spark: Map = {
+	name: 'Spark',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		' -      - ',
+		'----------',
+		' -------- ',
+		' -------- ',
+		' ---wb--- ',
+		' ---bw--- ',
+		' -------- ',
+		' -------- ',
+		'----------',
+		' -      - '
+	]
+};
+
+export const islands: Map = {
+	name: 'Islands',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		'--------  ',
+		'---wb---  ',
+		'---bw---  ',
+		'--------  ',
+		'  -    -  ',
+		'  -    -  ',
+		'  --------',
+		'  --------',
+		'  --------',
+		'  --------'
+	]
+};
+
+export const galaxy: Map = {
+	name: 'Galaxy',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		'   ------   ',
+		'  --www---  ',
+		' ------w--- ',
+		'---bbb--w---',
+		'--b---b-w-b-',
+		'-b--wwb-w-b-',
+		'-b-w-bww--b-',
+		'-b-w-b---b--',
+		'---w--bbb---',
+		' ---w------ ',
+		'  ---www--  ',
+		'   ------   '
+	]
+};
+
+export const triangle: Map = {
+	name: 'Triangle',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		'    --    ',
+		'    --    ',
+		'   ----   ',
+		'   ----   ',
+		'  --wb--  ',
+		'  --bw--  ',
+		' -------- ',
+		' -------- ',
+		'----------',
+		'----------'
+	]
+};
+
+export const iphonex: Map = {
+	name: 'iPhone X',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		' --  -- ',
+		'--------',
+		'--------',
+		'--------',
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------',
+		'--------',
+		'--------',
+		'--------',
+		' ------ '
+	]
+};
+
+export const dealWithIt: Map = {
+	name: 'Deal with it!',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		'------------',
+		'--w-b-------',
+		' --b-w------',
+		'  --w-b---- ',
+		'   -------  '
+	]
+};
+
+export const experiment: Map = {
+	name: 'Let\'s experiment',
+	category: 'Special',
+	author: 'syuilo',
+	data: [
+		' ------------ ',
+		'------wb------',
+		'------bw------',
+		'--------------',
+		'    -    -    ',
+		'------  ------',
+		'bbbbbb  wwwwww',
+		'bbbbbb  wwwwww',
+		'bbbbbb  wwwwww',
+		'bbbbbb  wwwwww',
+		'wwwwww  bbbbbb'
+	]
+};
+
+export const bigBoard: Map = {
+	name: 'Big board',
+	category: 'Special',
+	data: [
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'-------wb-------',
+		'-------bw-------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------',
+		'----------------'
+	]
+};
+
+export const twoBoard: Map = {
+	name: 'Two board',
+	category: 'Special',
+	author: 'Aya',
+	data: [
+		'-------- --------',
+		'-------- --------',
+		'-------- --------',
+		'---wb--- ---wb---',
+		'---bw--- ---bw---',
+		'-------- --------',
+		'-------- --------',
+		'-------- --------'
+	]
+};
+
+export const test1: Map = {
+	name: 'Test1',
+	category: 'Test',
+	data: [
+		'--------',
+		'---wb---',
+		'---bw---',
+		'--------'
+	]
+};
+
+export const test2: Map = {
+	name: 'Test2',
+	category: 'Test',
+	data: [
+		'------',
+		'------',
+		'-b--w-',
+		'-w--b-',
+		'-w--b-'
+	]
+};
+
+export const test3: Map = {
+	name: 'Test3',
+	category: 'Test',
+	data: [
+		'-w-',
+		'--w',
+		'w--',
+		'-w-',
+		'--w',
+		'w--',
+		'-w-',
+		'--w',
+		'w--',
+		'-w-',
+		'---',
+		'b--',
+	]
+};
+
+export const test4: Map = {
+	name: 'Test4',
+	category: 'Test',
+	data: [
+		'-w--b-',
+		'-w--b-',
+		'------',
+		'-w--b-',
+		'-w--b-'
+	]
+};
+
+// https://misskey.xyz/othello/5aaabf7fe126e10b5216ea09 64
+export const test5: Map = {
+	name: 'Test5',
+	category: 'Test',
+	data: [
+		'--wwwwww--',
+		'--wwwbwwww',
+		'-bwwbwbwww',
+		'-bwwwbwbww',
+		'-bwwbwbwbw',
+		'-bwbwbwb-w',
+		'bwbwwbbb-w',
+		'w-wbbbbb--',
+		'--w-b-w---',
+		'----------'
+	]
+};
diff --git a/src/processor/http/follow.ts b/src/processor/http/follow.ts
index 4804657fd6..e81b410cb7 100644
--- a/src/processor/http/follow.ts
+++ b/src/processor/http/follow.ts
@@ -3,8 +3,8 @@ import { sign } from 'http-signature';
 import { URL } from 'url';
 import User, { isLocalUser, pack as packUser, ILocalUser } from '../../models/user';
 import Following from '../../models/following';
-import event from '../../common/event';
-import notify from '../../common/notify';
+import event from '../../event';
+import notify from '../../notify';
 import context from '../../remote/activitypub/renderer/context';
 import render from '../../remote/activitypub/renderer/follow';
 import config from '../../conf';
diff --git a/src/push-sw.ts b/src/push-sw.ts
new file mode 100644
index 0000000000..5b5ec52071
--- /dev/null
+++ b/src/push-sw.ts
@@ -0,0 +1,52 @@
+const push = require('web-push');
+import * as mongo from 'mongodb';
+import Subscription from './models/sw-subscription';
+import config from './conf';
+
+if (config.sw) {
+	// アプリケーションの連絡先と、サーバーサイドの鍵ペアの情報を登録
+	push.setVapidDetails(
+		config.maintainer.url,
+		config.sw.public_key,
+		config.sw.private_key);
+}
+
+export default async function(userId: mongo.ObjectID | string, type, body?) {
+	if (!config.sw) return;
+
+	if (typeof userId === 'string') {
+		userId = new mongo.ObjectID(userId);
+	}
+
+	// Fetch
+	const subscriptions = await Subscription.find({
+		userId: userId
+	});
+
+	subscriptions.forEach(subscription => {
+		const pushSubscription = {
+			endpoint: subscription.endpoint,
+			keys: {
+				auth: subscription.auth,
+				p256dh: subscription.publickey
+			}
+		};
+
+		push.sendNotification(pushSubscription, JSON.stringify({
+			type, body
+		})).catch(err => {
+			//console.log(err.statusCode);
+			//console.log(err.headers);
+			//console.log(err.body);
+
+			if (err.statusCode == 410) {
+				Subscription.remove({
+					userId: userId,
+					endpoint: subscription.endpoint,
+					auth: subscription.auth,
+					publickey: subscription.publickey
+				});
+			}
+		});
+	});
+}
diff --git a/src/remote/activitypub/create.ts b/src/remote/activitypub/create.ts
index e610232f51..6d135685ef 100644
--- a/src/remote/activitypub/create.ts
+++ b/src/remote/activitypub/create.ts
@@ -2,7 +2,7 @@ import { JSDOM } from 'jsdom';
 import config from '../../conf';
 import Post from '../../models/post';
 import RemoteUserObject, { IRemoteUserObject } from '../../models/remote-user-object';
-import uploadFromUrl from '../../common/drive/upload-from-url';
+import uploadFromUrl from '../../drive/upload-from-url';
 import Resolver from './resolver';
 const createDOMPurify = require('dompurify');
 
diff --git a/src/server/activitypub/inbox.ts b/src/server/activitypub/inbox.ts
index 31a47e2761..865797faee 100644
--- a/src/server/activitypub/inbox.ts
+++ b/src/server/activitypub/inbox.ts
@@ -3,7 +3,7 @@ import * as express from 'express';
 import { parseRequest, verifySignature } from 'http-signature';
 import User, { IRemoteUser } from '../../models/user';
 import queue from '../../queue';
-import parseAcct from '../../misc/user/parse-acct';
+import parseAcct from '../../user/parse-acct';
 
 const app = express();
 app.disable('x-powered-by');
diff --git a/src/server/activitypub/post.ts b/src/server/activitypub/post.ts
index ecbf9671fa..2962a9b965 100644
--- a/src/server/activitypub/post.ts
+++ b/src/server/activitypub/post.ts
@@ -1,7 +1,7 @@
 import * as express from 'express';
 import context from '../../remote/activitypub/renderer/context';
 import render from '../../remote/activitypub/renderer/note';
-import parseAcct from '../../misc/user/parse-acct';
+import parseAcct from '../../user/parse-acct';
 import Post from '../../models/post';
 import User from '../../models/user';
 
diff --git a/src/server/activitypub/with-user.ts b/src/server/activitypub/with-user.ts
index 18f2e50ffd..b4090786bd 100644
--- a/src/server/activitypub/with-user.ts
+++ b/src/server/activitypub/with-user.ts
@@ -1,4 +1,4 @@
-import parseAcct from '../../misc/user/parse-acct';
+import parseAcct from '../../user/parse-acct';
 import User from '../../models/user';
 
 export default (redirect, respond) => async (req, res, next) => {
diff --git a/src/server/api/bot/core.ts b/src/server/api/bot/core.ts
index 0faf9b4e4c..3beec33d11 100644
--- a/src/server/api/bot/core.ts
+++ b/src/server/api/bot/core.ts
@@ -3,10 +3,10 @@ import * as bcrypt from 'bcryptjs';
 
 import User, { IUser, init as initUser, ILocalUser } from '../../../models/user';
 
-import getPostSummary from '../../../misc/get-post-summary';
-import getUserSummary from '../../../misc/user/get-summary';
-import parseAcct from '../../../misc/user/parse-acct';
-import getNotificationSummary from '../../../misc/get-notification-summary';
+import getPostSummary from '../../../get-post-summary';
+import getUserSummary from '../../../user/get-summary';
+import parseAcct from '../../../user/parse-acct';
+import getNotificationSummary from '../../../get-notification-summary';
 
 const hmm = [
 	'？',
diff --git a/src/server/api/bot/interfaces/line.ts b/src/server/api/bot/interfaces/line.ts
index a6e70a138f..847b13aa78 100644
--- a/src/server/api/bot/interfaces/line.ts
+++ b/src/server/api/bot/interfaces/line.ts
@@ -7,9 +7,9 @@ import config from '../../../../conf';
 import BotCore from '../core';
 import _redis from '../../../../db/redis';
 import prominence = require('prominence');
-import getAcct from '../../../../misc/user/get-acct';
-import parseAcct from '../../../../misc/user/parse-acct';
-import getPostSummary from '../../../../misc/get-post-summary';
+import getAcct from '../../../../user/get-acct';
+import parseAcct from '../../../../user/parse-acct';
+import getPostSummary from '../../../../get-post-summary';
 
 const redis = prominence(_redis);
 
diff --git a/src/server/api/common/read-messaging-message.ts b/src/server/api/common/read-messaging-message.ts
index 127ea18651..755cf1f502 100644
--- a/src/server/api/common/read-messaging-message.ts
+++ b/src/server/api/common/read-messaging-message.ts
@@ -1,9 +1,9 @@
 import * as mongo from 'mongodb';
 import Message from '../../../models/messaging-message';
 import { IMessagingMessage as IMessage } from '../../../models/messaging-message';
-import publishUserStream from '../../../common/event';
-import { publishMessagingStream } from '../../../common/event';
-import { publishMessagingIndexStream } from '../../../common/event';
+import publishUserStream from '../../../event';
+import { publishMessagingStream } from '../../../event';
+import { publishMessagingIndexStream } from '../../../event';
 
 /**
  * Mark as read message(s)
diff --git a/src/server/api/common/read-notification.ts b/src/server/api/common/read-notification.ts
index 9b2012182d..b51c0ca004 100644
--- a/src/server/api/common/read-notification.ts
+++ b/src/server/api/common/read-notification.ts
@@ -1,6 +1,6 @@
 import * as mongo from 'mongodb';
 import { default as Notification, INotification } from '../../../models/notification';
-import publishUserStream from '../../../common/event';
+import publishUserStream from '../../../event';
 
 /**
  * Mark as read notification(s)
diff --git a/src/server/api/endpoints/drive/files/create.ts b/src/server/api/endpoints/drive/files/create.ts
index cf4e35cd1e..10ced1d8b8 100644
--- a/src/server/api/endpoints/drive/files/create.ts
+++ b/src/server/api/endpoints/drive/files/create.ts
@@ -3,7 +3,7 @@
  */
 import $ from 'cafy';
 import { validateFileName, pack } from '../../../../../models/drive-file';
-import create from '../../../../../common/drive/add-file';
+import create from '../../../../../drive/add-file';
 
 /**
  * Create a file
diff --git a/src/server/api/endpoints/drive/files/update.ts b/src/server/api/endpoints/drive/files/update.ts
index 5d0b915f95..85bd2110f2 100644
--- a/src/server/api/endpoints/drive/files/update.ts
+++ b/src/server/api/endpoints/drive/files/update.ts
@@ -4,7 +4,7 @@
 import $ from 'cafy';
 import DriveFolder from '../../../../../models/drive-folder';
 import DriveFile, { validateFileName, pack } from '../../../../../models/drive-file';
-import { publishDriveStream } from '../../../../../common/event';
+import { publishDriveStream } from '../../../../../event';
 
 /**
  * Update a file
diff --git a/src/server/api/endpoints/drive/files/upload_from_url.ts b/src/server/api/endpoints/drive/files/upload_from_url.ts
index ceb751a144..acb67b2e00 100644
--- a/src/server/api/endpoints/drive/files/upload_from_url.ts
+++ b/src/server/api/endpoints/drive/files/upload_from_url.ts
@@ -3,7 +3,7 @@
  */
 import $ from 'cafy';
 import { pack } from '../../../../../models/drive-file';
-import uploadFromUrl from '../../../../../common/drive/upload-from-url';
+import uploadFromUrl from '../../../../../drive/upload-from-url';
 
 /**
  * Create a file from a URL
diff --git a/src/server/api/endpoints/drive/folders/create.ts b/src/server/api/endpoints/drive/folders/create.ts
index bd3b0a0b1d..d9d39a9184 100644
--- a/src/server/api/endpoints/drive/folders/create.ts
+++ b/src/server/api/endpoints/drive/folders/create.ts
@@ -3,7 +3,7 @@
  */
 import $ from 'cafy';
 import DriveFolder, { isValidFolderName, pack } from '../../../../../models/drive-folder';
-import { publishDriveStream } from '../../../../../common/event';
+import { publishDriveStream } from '../../../../../event';
 
 /**
  * Create drive folder
diff --git a/src/server/api/endpoints/drive/folders/update.ts b/src/server/api/endpoints/drive/folders/update.ts
index 5ac81e5b50..1cea05d71c 100644
--- a/src/server/api/endpoints/drive/folders/update.ts
+++ b/src/server/api/endpoints/drive/folders/update.ts
@@ -3,7 +3,7 @@
  */
 import $ from 'cafy';
 import DriveFolder, { isValidFolderName, pack } from '../../../../../models/drive-folder';
-import { publishDriveStream } from '../../../../../common/event';
+import { publishDriveStream } from '../../../../../event';
 
 /**
  * Update a folder
diff --git a/src/server/api/endpoints/following/delete.ts b/src/server/api/endpoints/following/delete.ts
index ecca27d57d..77a6cebee0 100644
--- a/src/server/api/endpoints/following/delete.ts
+++ b/src/server/api/endpoints/following/delete.ts
@@ -4,7 +4,7 @@
 import $ from 'cafy';
 import User, { pack as packUser } from '../../../../models/user';
 import Following from '../../../../models/following';
-import event from '../../../../common/event';
+import event from '../../../../event';
 
 /**
  * Unfollow a user
diff --git a/src/server/api/endpoints/i/regenerate_token.ts b/src/server/api/endpoints/i/regenerate_token.ts
index 0af622fd90..d7cb697848 100644
--- a/src/server/api/endpoints/i/regenerate_token.ts
+++ b/src/server/api/endpoints/i/regenerate_token.ts
@@ -4,7 +4,7 @@
 import $ from 'cafy';
 import * as bcrypt from 'bcryptjs';
 import User from '../../../../models/user';
-import event from '../../../../common/event';
+import event from '../../../../event';
 import generateUserToken from '../../common/generate-native-user-token';
 
 /**
diff --git a/src/server/api/endpoints/i/update.ts b/src/server/api/endpoints/i/update.ts
index b465e763e1..76ceede8d9 100644
--- a/src/server/api/endpoints/i/update.ts
+++ b/src/server/api/endpoints/i/update.ts
@@ -3,7 +3,7 @@
  */
 import $ from 'cafy';
 import User, { isValidName, isValidDescription, isValidLocation, isValidBirthday, pack } from '../../../../models/user';
-import event from '../../../../common/event';
+import event from '../../../../event';
 import config from '../../../../conf';
 
 /**
diff --git a/src/server/api/endpoints/i/update_client_setting.ts b/src/server/api/endpoints/i/update_client_setting.ts
index 79789e6640..263ac6d07d 100644
--- a/src/server/api/endpoints/i/update_client_setting.ts
+++ b/src/server/api/endpoints/i/update_client_setting.ts
@@ -3,7 +3,7 @@
  */
 import $ from 'cafy';
 import User, { pack } from '../../../../models/user';
-import event from '../../../../common/event';
+import event from '../../../../event';
 
 /**
  * Update myself
diff --git a/src/server/api/endpoints/i/update_home.ts b/src/server/api/endpoints/i/update_home.ts
index 437f51d6fb..227b8dd5a4 100644
--- a/src/server/api/endpoints/i/update_home.ts
+++ b/src/server/api/endpoints/i/update_home.ts
@@ -3,7 +3,7 @@
  */
 import $ from 'cafy';
 import User from '../../../../models/user';
-import event from '../../../../common/event';
+import event from '../../../../event';
 
 module.exports = async (params, user) => new Promise(async (res, rej) => {
 	// Get 'home' parameter
diff --git a/src/server/api/endpoints/i/update_mobile_home.ts b/src/server/api/endpoints/i/update_mobile_home.ts
index 783ca09d1d..007eb2eab3 100644
--- a/src/server/api/endpoints/i/update_mobile_home.ts
+++ b/src/server/api/endpoints/i/update_mobile_home.ts
@@ -3,7 +3,7 @@
  */
 import $ from 'cafy';
 import User from '../../../../models/user';
-import event from '../../../../common/event';
+import event from '../../../../event';
 
 module.exports = async (params, user) => new Promise(async (res, rej) => {
 	// Get 'home' parameter
diff --git a/src/server/api/endpoints/messaging/messages/create.ts b/src/server/api/endpoints/messaging/messages/create.ts
index b2b6c971db..e0ec1f216d 100644
--- a/src/server/api/endpoints/messaging/messages/create.ts
+++ b/src/server/api/endpoints/messaging/messages/create.ts
@@ -9,10 +9,10 @@ import User from '../../../../../models/user';
 import Mute from '../../../../../models/mute';
 import DriveFile from '../../../../../models/drive-file';
 import { pack } from '../../../../../models/messaging-message';
-import publishUserStream from '../../../../../common/event';
-import { publishMessagingStream, publishMessagingIndexStream, pushSw } from '../../../../../common/event';
-import html from '../../../../../common/text/html';
-import parse from '../../../../../common/text/parse';
+import publishUserStream from '../../../../../event';
+import { publishMessagingStream, publishMessagingIndexStream, pushSw } from '../../../../../event';
+import html from '../../../../../text/html';
+import parse from '../../../../../text/parse';
 import config from '../../../../../conf';
 
 /**
diff --git a/src/server/api/endpoints/notifications/mark_as_read_all.ts b/src/server/api/endpoints/notifications/mark_as_read_all.ts
index f9bc6ebf70..3ba00a9070 100644
--- a/src/server/api/endpoints/notifications/mark_as_read_all.ts
+++ b/src/server/api/endpoints/notifications/mark_as_read_all.ts
@@ -2,7 +2,7 @@
  * Module dependencies
  */
 import Notification from '../../../../models/notification';
-import event from '../../../../common/event';
+import event from '../../../../event';
 
 /**
  * Mark as read all notifications
diff --git a/src/server/api/endpoints/othello/games/show.ts b/src/server/api/endpoints/othello/games/show.ts
index 0b1c9bc356..dd886936d4 100644
--- a/src/server/api/endpoints/othello/games/show.ts
+++ b/src/server/api/endpoints/othello/games/show.ts
@@ -1,6 +1,6 @@
 import $ from 'cafy';
 import OthelloGame, { pack } from '../../../../../models/othello-game';
-import Othello from '../../../../../misc/othello/core';
+import Othello from '../../../../../othello/core';
 
 module.exports = (params, user) => new Promise(async (res, rej) => {
 	// Get 'gameId' parameter
diff --git a/src/server/api/endpoints/othello/match.ts b/src/server/api/endpoints/othello/match.ts
index d9c46aae13..1fc46ab908 100644
--- a/src/server/api/endpoints/othello/match.ts
+++ b/src/server/api/endpoints/othello/match.ts
@@ -2,8 +2,8 @@ import $ from 'cafy';
 import Matching, { pack as packMatching } from '../../../../models/othello-matching';
 import OthelloGame, { pack as packGame } from '../../../../models/othello-game';
 import User from '../../../../models/user';
-import publishUserStream, { publishOthelloStream } from '../../../../common/event';
-import { eighteight } from '../../../../misc/othello/maps';
+import publishUserStream, { publishOthelloStream } from '../../../../event';
+import { eighteight } from '../../../../othello/maps';
 
 module.exports = (params, user) => new Promise(async (res, rej) => {
 	// Get 'userId' parameter
diff --git a/src/server/api/endpoints/posts/create.ts b/src/server/api/endpoints/posts/create.ts
index c2e790a241..e74ac7582e 100644
--- a/src/server/api/endpoints/posts/create.ts
+++ b/src/server/api/endpoints/posts/create.ts
@@ -3,8 +3,8 @@
  */
 import $ from 'cafy';
 import deepEqual = require('deep-equal');
-import html from '../../../../common/text/html';
-import parse from '../../../../common/text/parse';
+import html from '../../../../text/html';
+import parse from '../../../../text/parse';
 import Post, { IPost, isValidText, isValidCw } from '../../../../models/post';
 import User, { ILocalUser } from '../../../../models/user';
 import Channel, { IChannel } from '../../../../models/channel';
@@ -15,10 +15,10 @@ import Watching from '../../../../models/post-watching';
 import ChannelWatching from '../../../../models/channel-watching';
 import { pack } from '../../../../models/post';
 import watch from '../../common/watch-post';
-import event, { pushSw, publishChannelStream } from '../../../../common/event';
-import notify from '../../../../common/notify';
-import getAcct from '../../../../misc/user/get-acct';
-import parseAcct from '../../../../misc/user/parse-acct';
+import event, { pushSw, publishChannelStream } from '../../../../event';
+import notify from '../../../../notify';
+import getAcct from '../../../../user/get-acct';
+import parseAcct from '../../../../user/parse-acct';
 import config from '../../../../conf';
 
 /**
diff --git a/src/server/api/endpoints/posts/polls/vote.ts b/src/server/api/endpoints/posts/polls/vote.ts
index 59b1f099fb..be1fd7b5d0 100644
--- a/src/server/api/endpoints/posts/polls/vote.ts
+++ b/src/server/api/endpoints/posts/polls/vote.ts
@@ -6,8 +6,8 @@ import Vote from '../../../../../models/poll-vote';
 import Post from '../../../../../models/post';
 import Watching from '../../../../../models/post-watching';
 import watch from '../../../common/watch-post';
-import { publishPostStream } from '../../../../../common/event';
-import notify from '../../../../../common/notify';
+import { publishPostStream } from '../../../../../event';
+import notify from '../../../../../notify';
 
 /**
  * Vote poll of a post
diff --git a/src/server/api/endpoints/posts/reactions/create.ts b/src/server/api/endpoints/posts/reactions/create.ts
index 441d563835..408b2483af 100644
--- a/src/server/api/endpoints/posts/reactions/create.ts
+++ b/src/server/api/endpoints/posts/reactions/create.ts
@@ -7,8 +7,8 @@ import Post, { pack as packPost } from '../../../../../models/post';
 import { pack as packUser } from '../../../../../models/user';
 import Watching from '../../../../../models/post-watching';
 import watch from '../../../common/watch-post';
-import { publishPostStream, pushSw } from '../../../../../common/event';
-import notify from '../../../../../common/notify';
+import { publishPostStream, pushSw } from '../../../../../event';
+import notify from '../../../../../notify';
 
 /**
  * React to a post
diff --git a/src/server/api/limitter.ts b/src/server/api/limitter.ts
index 93e03f5e4f..81016457dc 100644
--- a/src/server/api/limitter.ts
+++ b/src/server/api/limitter.ts
@@ -3,7 +3,7 @@ import * as debug from 'debug';
 import limiterDB from '../../db/redis';
 import { Endpoint } from './endpoints';
 import { IAuthContext } from './authenticate';
-import getAcct from '../../misc/user/get-acct';
+import getAcct from '../../user/get-acct';
 
 const log = debug('misskey:limitter');
 
diff --git a/src/server/api/private/signin.ts b/src/server/api/private/signin.ts
index 4ad5097e59..99ba51b416 100644
--- a/src/server/api/private/signin.ts
+++ b/src/server/api/private/signin.ts
@@ -3,7 +3,7 @@ import * as bcrypt from 'bcryptjs';
 import * as speakeasy from 'speakeasy';
 import User, { ILocalUser } from '../../../models/user';
 import Signin, { pack } from '../../../models/signin';
-import event from '../../../common/event';
+import event from '../../../event';
 import signin from '../common/signin';
 import config from '../../../conf';
 
diff --git a/src/server/api/service/twitter.ts b/src/server/api/service/twitter.ts
index 73822b0bd2..61a1d56397 100644
--- a/src/server/api/service/twitter.ts
+++ b/src/server/api/service/twitter.ts
@@ -6,7 +6,7 @@ import * as uuid from 'uuid';
 import autwh from 'autwh';
 import redis from '../../../db/redis';
 import User, { pack } from '../../../models/user';
-import event from '../../../common/event';
+import event from '../../../event';
 import config from '../../../conf';
 import signin from '../common/signin';
 
diff --git a/src/server/api/stream/othello-game.ts b/src/server/api/stream/othello-game.ts
index 00367a824e..6eb610331c 100644
--- a/src/server/api/stream/othello-game.ts
+++ b/src/server/api/stream/othello-game.ts
@@ -2,9 +2,9 @@ import * as websocket from 'websocket';
 import * as redis from 'redis';
 import * as CRC32 from 'crc-32';
 import OthelloGame, { pack } from '../../../models/othello-game';
-import { publishOthelloGameStream } from '../../../common/event';
-import Othello from '../../../misc/othello/core';
-import * as maps from '../../../misc/othello/maps';
+import { publishOthelloGameStream } from '../../../event';
+import Othello from '../../../othello/core';
+import * as maps from '../../../othello/maps';
 import { ParsedUrlQuery } from 'querystring';
 
 export default function(request: websocket.request, connection: websocket.connection, subscriber: redis.RedisClient, user?: any): void {
diff --git a/src/server/api/stream/othello.ts b/src/server/api/stream/othello.ts
index 1cf9a1494f..4c292056da 100644
--- a/src/server/api/stream/othello.ts
+++ b/src/server/api/stream/othello.ts
@@ -2,7 +2,7 @@ import * as mongo from 'mongodb';
 import * as websocket from 'websocket';
 import * as redis from 'redis';
 import Matching, { pack } from '../../../models/othello-matching';
-import publishUserStream from '../../../common/event';
+import publishUserStream from '../../../event';
 
 export default function(request: websocket.request, connection: websocket.connection, subscriber: redis.RedisClient, user: any): void {
 	// Subscribe othello stream
diff --git a/src/server/webfinger.ts b/src/server/webfinger.ts
index 41aeb5642d..7a28b1bec8 100644
--- a/src/server/webfinger.ts
+++ b/src/server/webfinger.ts
@@ -1,5 +1,5 @@
 import config from '../conf';
-import parseAcct from '../misc/user/parse-acct';
+import parseAcct from '../user/parse-acct';
 import User from '../models/user';
 const express = require('express');
 
diff --git a/src/text/html.ts b/src/text/html.ts
new file mode 100644
index 0000000000..797f3b3f33
--- /dev/null
+++ b/src/text/html.ts
@@ -0,0 +1,83 @@
+import { lib as emojilib } from 'emojilib';
+import { JSDOM } from 'jsdom';
+
+const handlers = {
+	bold({ document }, { bold }) {
+		const b = document.createElement('b');
+		b.textContent = bold;
+		document.body.appendChild(b);
+	},
+
+	code({ document }, { code }) {
+		const pre = document.createElement('pre');
+		const inner = document.createElement('code');
+		inner.innerHTML = code;
+		pre.appendChild(inner);
+		document.body.appendChild(pre);
+	},
+
+	emoji({ document }, { content, emoji }) {
+		const found = emojilib[emoji];
+		const node = document.createTextNode(found ? found.char : content);
+		document.body.appendChild(node);
+	},
+
+	hashtag({ document }, { hashtag }) {
+		const a = document.createElement('a');
+		a.href = '/search?q=#' + hashtag;
+		a.textContent = hashtag;
+	},
+
+	'inline-code'({ document }, { code }) {
+		const element = document.createElement('code');
+		element.textContent = code;
+		document.body.appendChild(element);
+	},
+
+	link({ document }, { url, title }) {
+		const a = document.createElement('a');
+		a.href = url;
+		a.textContent = title;
+		document.body.appendChild(a);
+	},
+
+	mention({ document }, { content }) {
+		const a = document.createElement('a');
+		a.href = '/' + content;
+		a.textContent = content;
+		document.body.appendChild(a);
+	},
+
+	quote({ document }, { quote }) {
+		const blockquote = document.createElement('blockquote');
+		blockquote.textContent = quote;
+		document.body.appendChild(blockquote);
+	},
+
+	text({ document }, { content }) {
+		for (const text of content.split('\n')) {
+			const node = document.createTextNode(text);
+			document.body.appendChild(node);
+
+			const br = document.createElement('br');
+			document.body.appendChild(br);
+		}
+	},
+
+	url({ document }, { url }) {
+		const a = document.createElement('a');
+		a.href = url;
+		a.textContent = url;
+		document.body.appendChild(a);
+	}
+};
+
+export default tokens => {
+	const { window } = new JSDOM('');
+
+	for (const token of tokens) {
+		handlers[token.type](window, token);
+	}
+
+	return `<p>${window.document.body.innerHTML}</p>`;
+};
diff --git a/src/text/parse/core/syntax-highlighter.ts b/src/text/parse/core/syntax-highlighter.ts
new file mode 100644
index 0000000000..c0396b1fc6
--- /dev/null
+++ b/src/text/parse/core/syntax-highlighter.ts
@@ -0,0 +1,334 @@
+function escape(text) {
+	return text
+		.replace(/>/g, '&gt;')
+		.replace(/</g, '&lt;');
+}
+
+// 文字数が多い順にソートします
+// そうしないと、「function」という文字列が与えられたときに「func」が先にマッチしてしまう可能性があるためです
+const _keywords = [
+	'true',
+	'false',
+	'null',
+	'nil',
+	'undefined',
+	'void',
+	'var',
+	'const',
+	'let',
+	'mut',
+	'dim',
+	'if',
+	'then',
+	'else',
+	'switch',
+	'match',
+	'case',
+	'default',
+	'for',
+	'each',
+	'in',
+	'while',
+	'loop',
+	'continue',
+	'break',
+	'do',
+	'goto',
+	'next',
+	'end',
+	'sub',
+	'throw',
+	'try',
+	'catch',
+	'finally',
+	'enum',
+	'delegate',
+	'function',
+	'func',
+	'fun',
+	'fn',
+	'return',
+	'yield',
+	'async',
+	'await',
+	'require',
+	'include',
+	'import',
+	'imports',
+	'export',
+	'exports',
+	'from',
+	'as',
+	'using',
+	'use',
+	'internal',
+	'module',
+	'namespace',
+	'where',
+	'select',
+	'struct',
+	'union',
+	'new',
+	'delete',
+	'this',
+	'super',
+	'base',
+	'class',
+	'interface',
+	'abstract',
+	'static',
+	'public',
+	'private',
+	'protected',
+	'virtual',
+	'partial',
+	'override',
+	'extends',
+	'implements',
+	'constructor'
+];
+
+const keywords = _keywords
+	.concat(_keywords.map(k => k[0].toUpperCase() + k.substr(1)))
+	.concat(_keywords.map(k => k.toUpperCase()))
+	.sort((a, b) => b.length - a.length);
+
+const symbols = [
+	'=',
+	'+',
+	'-',
+	'*',
+	'/',
+	'%',
+	'~',
+	'^',
+	'&',
+	'|',
+	'>',
+	'<',
+	'!',
+	'?'
+];
+
+const elements = [
+	// comment
+	code => {
+		if (code.substr(0, 2) != '//') return null;
+		const match = code.match(/^\/\/(.+?)(\n|$)/);
+		if (!match) return null;
+		const comment = match[0];
+		return {
+			html: `<span class="comment">${escape(comment)}</span>`,
+			next: comment.length
+		};
+	},
+
+	// block comment
+	code => {
+		const match = code.match(/^\/\*([\s\S]+?)\*\//);
+		if (!match) return null;
+		return {
+			html: `<span class="comment">${escape(match[0])}</span>`,
+			next: match[0].length
+		};
+	},
+
+	// string
+	code => {
+		if (!/^['"`]/.test(code)) return null;
+		const begin = code[0];
+		let str = begin;
+		let thisIsNotAString = false;
+		for (let i = 1; i < code.length; i++) {
+			const char = code[i];
+			if (char == '\\') {
+				str += char;
+				str += code[i + 1] || '';
+				i++;
+				continue;
+			} else if (char == begin) {
+				str += char;
+				break;
+			} else if (char == '\n' || i == (code.length - 1)) {
+				thisIsNotAString = true;
+				break;
+			} else {
+				str += char;
+			}
+		}
+		if (thisIsNotAString) {
+			return null;
+		} else {
+			return {
+				html: `<span class="string">${escape(str)}</span>`,
+				next: str.length
+			};
+		}
+	},
+
+	// regexp
+	code => {
+		if (code[0] != '/') return null;
+		let regexp = '';
+		let thisIsNotARegexp = false;
+		for (let i = 1; i < code.length; i++) {
+			const char = code[i];
+			if (char == '\\') {
+				regexp += char;
+				regexp += code[i + 1] || '';
+				i++;
+				continue;
+			} else if (char == '/') {
+				break;
+			} else if (char == '\n' || i == (code.length - 1)) {
+				thisIsNotARegexp = true;
+				break;
+			} else {
+				regexp += char;
+			}
+		}
+
+		if (thisIsNotARegexp) return null;
+		if (regexp == '') return null;
+		if (regexp[0] == ' ' && regexp[regexp.length - 1] == ' ') return null;
+
+		return {
+			html: `<span class="regexp">/${escape(regexp)}/</span>`,
+			next: regexp.length + 2
+		};
+	},
+
+	// label
+	code => {
+		if (code[0] != '@') return null;
+		const match = code.match(/^@([a-zA-Z_-]+?)\n/);
+		if (!match) return null;
+		const label = match[0];
+		return {
+			html: `<span class="label">${label}</span>`,
+			next: label.length
+		};
+	},
+
+	// number
+	(code, i, source) => {
+		const prev = source[i - 1];
+		if (prev && /[a-zA-Z]/.test(prev)) return null;
+		if (!/^[\-\+]?[0-9\.]+/.test(code)) return null;
+		const match = code.match(/^[\-\+]?[0-9\.]+/)[0];
+		if (match) {
+			return {
+				html: `<span class="number">${match}</span>`,
+				next: match.length
+			};
+		} else {
+			return null;
+		}
+	},
+
+	// nan
+	(code, i, source) => {
+		const prev = source[i - 1];
+		if (prev && /[a-zA-Z]/.test(prev)) return null;
+		if (code.substr(0, 3) == 'NaN') {
+			return {
+				html: `<span class="nan">NaN</span>`,
+				next: 3
+			};
+		} else {
+			return null;
+		}
+	},
+
+	// method
+	code => {
+		const match = code.match(/^([a-zA-Z_-]+?)\(/);
+		if (!match) return null;
+
+		if (match[1] == '-') return null;
+
+		return {
+			html: `<span class="method">${match[1]}</span>`,
+			next: match[1].length
+		};
+	},
+
+	// property
+	(code, i, source) => {
+		const prev = source[i - 1];
+		if (prev != '.') return null;
+
+		const match = code.match(/^[a-zA-Z0-9_-]+/);
+		if (!match) return null;
+
+		return {
+			html: `<span class="property">${match[0]}</span>`,
+			next: match[0].length
+		};
+	},
+
+	// keyword
+	(code, i, source) => {
+		const prev = source[i - 1];
+		if (prev && /[a-zA-Z]/.test(prev)) return null;
+
+		const match = keywords.filter(k => code.substr(0, k.length) == k)[0];
+		if (match) {
+			if (/^[a-zA-Z]/.test(code.substr(match.length))) return null;
+			return {
+				html: `<span class="keyword ${match}">${match}</span>`,
+				next: match.length
+			};
+		} else {
+			return null;
+		}
+	},
+
+	// symbol
+	code => {
+		const match = symbols.filter(s => code[0] == s)[0];
+		if (match) {
+			return {
+				html: `<span class="symbol">${match}</span>`,
+				next: 1
+			};
+		} else {
+			return null;
+		}
+	}
+];
+
+// specify lang is todo
+export default (source: string, lang?: string) => {
+	let code = source;
+	let html = '';
+
+	let i = 0;
+
+	function push(token) {
+		html += token.html;
+		code = code.substr(token.next);
+		i += token.next;
+	}
+
+	while (code != '') {
+		const parsed = elements.some(el => {
+			const e = el(code, i, source);
+			if (e) {
+				push(e);
+				return true;
+			} else {
+				return false;
+			}
+		});
+
+		if (!parsed) {
+			push({
+				html: escape(code[0]),
+				next: 1
+			});
+		}
+	}
+
+	return html;
+};
diff --git a/src/text/parse/elements/bold.ts b/src/text/parse/elements/bold.ts
new file mode 100644
index 0000000000..ce25764457
--- /dev/null
+++ b/src/text/parse/elements/bold.ts
@@ -0,0 +1,14 @@
+/**
+ * Bold
+ */
+
+module.exports = text => {
+	const match = text.match(/^\*\*(.+?)\*\*/);
+	if (!match) return null;
+	const bold = match[0];
+	return {
+		type: 'bold',
+		content: bold,
+		bold: bold.substr(2, bold.length - 4)
+	};
+};
diff --git a/src/text/parse/elements/code.ts b/src/text/parse/elements/code.ts
new file mode 100644
index 0000000000..4821e95fe2
--- /dev/null
+++ b/src/text/parse/elements/code.ts
@@ -0,0 +1,17 @@
+/**
+ * Code (block)
+ */
+
+import genHtml from '../core/syntax-highlighter';
+
+module.exports = text => {
+	const match = text.match(/^```([\s\S]+?)```/);
+	if (!match) return null;
+	const code = match[0];
+	return {
+		type: 'code',
+		content: code,
+		code: code.substr(3, code.length - 6).trim(),
+		html: genHtml(code.substr(3, code.length - 6).trim())
+	};
+};
diff --git a/src/text/parse/elements/emoji.ts b/src/text/parse/elements/emoji.ts
new file mode 100644
index 0000000000..e24231a223
--- /dev/null
+++ b/src/text/parse/elements/emoji.ts
@@ -0,0 +1,14 @@
+/**
+ * Emoji
+ */
+
+module.exports = text => {
+	const match = text.match(/^:[a-zA-Z0-9+-_]+:/);
+	if (!match) return null;
+	const emoji = match[0];
+	return {
+		type: 'emoji',
+		content: emoji,
+		emoji: emoji.substr(1, emoji.length - 2)
+	};
+};
diff --git a/src/text/parse/elements/hashtag.ts b/src/text/parse/elements/hashtag.ts
new file mode 100644
index 0000000000..ee57b140b8
--- /dev/null
+++ b/src/text/parse/elements/hashtag.ts
@@ -0,0 +1,19 @@
+/**
+ * Hashtag
+ */
+
+module.exports = (text, i) => {
+	if (!(/^\s#[^\s]+/.test(text) || (i == 0 && /^#[^\s]+/.test(text)))) return null;
+	const isHead = text[0] == '#';
+	const hashtag = text.match(/^\s?#[^\s]+/)[0];
+	const res: any[] = !isHead ? [{
+		type: 'text',
+		content: text[0]
+	}] : [];
+	res.push({
+		type: 'hashtag',
+		content: isHead ? hashtag : hashtag.substr(1),
+		hashtag: isHead ? hashtag.substr(1) : hashtag.substr(2)
+	});
+	return res;
+};
diff --git a/src/text/parse/elements/inline-code.ts b/src/text/parse/elements/inline-code.ts
new file mode 100644
index 0000000000..9f9ef51a2b
--- /dev/null
+++ b/src/text/parse/elements/inline-code.ts
@@ -0,0 +1,17 @@
+/**
+ * Code (inline)
+ */
+
+import genHtml from '../core/syntax-highlighter';
+
+module.exports = text => {
+	const match = text.match(/^`(.+?)`/);
+	if (!match) return null;
+	const code = match[0];
+	return {
+		type: 'inline-code',
+		content: code,
+		code: code.substr(1, code.length - 2).trim(),
+		html: genHtml(code.substr(1, code.length - 2).trim())
+	};
+};
diff --git a/src/text/parse/elements/link.ts b/src/text/parse/elements/link.ts
new file mode 100644
index 0000000000..35563ddc3d
--- /dev/null
+++ b/src/text/parse/elements/link.ts
@@ -0,0 +1,19 @@
+/**
+ * Link
+ */
+
+module.exports = text => {
+	const match = text.match(/^\??\[([^\[\]]+?)\]\((https?:\/\/[\w\/:%#@\$&\?!\(\)\[\]~\.=\+\-]+?)\)/);
+	if (!match) return null;
+	const silent = text[0] == '?';
+	const link = match[0];
+	const title = match[1];
+	const url = match[2];
+	return {
+		type: 'link',
+		content: link,
+		title: title,
+		url: url,
+		silent: silent
+	};
+};
diff --git a/src/text/parse/elements/mention.ts b/src/text/parse/elements/mention.ts
new file mode 100644
index 0000000000..732554d8be
--- /dev/null
+++ b/src/text/parse/elements/mention.ts
@@ -0,0 +1,17 @@
+/**
+ * Mention
+ */
+import parseAcct from '../../../user/parse-acct';
+
+module.exports = text => {
+	const match = text.match(/^(?:@[a-zA-Z0-9\-]+){1,2}/);
+	if (!match) return null;
+	const mention = match[0];
+	const { username, host } = parseAcct(mention.substr(1));
+	return {
+		type: 'mention',
+		content: mention,
+		username,
+		host
+	};
+};
diff --git a/src/text/parse/elements/quote.ts b/src/text/parse/elements/quote.ts
new file mode 100644
index 0000000000..cc8cfffdc4
--- /dev/null
+++ b/src/text/parse/elements/quote.ts
@@ -0,0 +1,14 @@
+/**
+ * Quoted text
+ */
+
+module.exports = text => {
+	const match = text.match(/^"([\s\S]+?)\n"/);
+	if (!match) return null;
+	const quote = match[0];
+	return {
+		type: 'quote',
+		content: quote,
+		quote: quote.substr(1, quote.length - 2).trim(),
+	};
+};
diff --git a/src/text/parse/elements/url.ts b/src/text/parse/elements/url.ts
new file mode 100644
index 0000000000..1003aff9c3
--- /dev/null
+++ b/src/text/parse/elements/url.ts
@@ -0,0 +1,14 @@
+/**
+ * URL
+ */
+
+module.exports = text => {
+	const match = text.match(/^https?:\/\/[\w\/:%#@\$&\?!\(\)\[\]~\.=\+\-]+/);
+	if (!match) return null;
+	const url = match[0];
+	return {
+		type: 'url',
+		content: url,
+		url: url
+	};
+};
diff --git a/src/text/parse/index.ts b/src/text/parse/index.ts
new file mode 100644
index 0000000000..b958da81b0
--- /dev/null
+++ b/src/text/parse/index.ts
@@ -0,0 +1,72 @@
+/**
+ * Misskey Text Analyzer
+ */
+
+const elements = [
+	require('./elements/bold'),
+	require('./elements/url'),
+	require('./elements/link'),
+	require('./elements/mention'),
+	require('./elements/hashtag'),
+	require('./elements/code'),
+	require('./elements/inline-code'),
+	require('./elements/quote'),
+	require('./elements/emoji')
+];
+
+export default (source: string): any[] => {
+
+	if (source == '') {
+		return null;
+	}
+
+	const tokens = [];
+
+	function push(token) {
+		if (token != null) {
+			tokens.push(token);
+			source = source.substr(token.content.length);
+		}
+	}
+
+	let i = 0;
+
+	// パース
+	while (source != '') {
+		const parsed = elements.some(el => {
+			let _tokens = el(source, i);
+			if (_tokens) {
+				if (!Array.isArray(_tokens)) {
+					_tokens = [_tokens];
+				}
+				_tokens.forEach(push);
+				return true;
+			} else {
+				return false;
+			}
+		});
+
+		if (!parsed) {
+			push({
+				type: 'text',
+				content: source[0]
+			});
+		}
+
+		i++;
+	}
+
+	// テキストを纏める
+	tokens[0] = [tokens[0]];
+	return tokens.reduce((a, b) => {
+		if (a[a.length - 1].type == 'text' && b.type == 'text') {
+			const tail = a.pop();
+			return a.concat({
+				type: 'text',
+				content: tail.content + b.content
+			});
+		} else {
+			return a.concat(b);
+		}
+	});
+};
diff --git a/src/user/get-acct.ts b/src/user/get-acct.ts
new file mode 100644
index 0000000000..9afb03d88b
--- /dev/null
+++ b/src/user/get-acct.ts
@@ -0,0 +1,3 @@
+export default user => {
+	return user.host === null ? user.username : `${user.username}@${user.host}`;
+};
diff --git a/src/user/get-summary.ts b/src/user/get-summary.ts
new file mode 100644
index 0000000000..8220817025
--- /dev/null
+++ b/src/user/get-summary.ts
@@ -0,0 +1,18 @@
+import { IUser, isLocalUser } from '../models/user';
+import getAcct from './get-acct';
+
+/**
+ * ユーザーを表す文字列を取得します。
+ * @param user ユーザー
+ */
+export default function(user: IUser): string {
+	let string = `${user.name} (@${getAcct(user)})\n` +
+		`${user.postsCount}投稿、${user.followingCount}フォロー、${user.followersCount}フォロワー\n`;
+
+	if (isLocalUser(user)) {
+		const account = user.account;
+		string += `場所: ${account.profile.location}、誕生日: ${account.profile.birthday}\n`;
+	}
+
+	return string + `「${user.description}」`;
+}
diff --git a/src/user/parse-acct.ts b/src/user/parse-acct.ts
new file mode 100644
index 0000000000..ef1f55405d
--- /dev/null
+++ b/src/user/parse-acct.ts
@@ -0,0 +1,4 @@
+export default acct => {
+	const splitted = acct.split('@', 2);
+	return { username: splitted[0], host: splitted[1] || null };
+};
-- 
cgit v1.3.1-freya


From 4ef3d3a6d2865e8bb486d74c8fb3b6fdfde699ff Mon Sep 17 00:00:00 2001
From: Akihiko Odaki <nekomanma@pixiv.co.jp>
Date: Mon, 2 Apr 2018 13:41:25 +0900
Subject: Introduce renderers directory

---
 .../app/common/scripts/compose-notification.ts     |  4 +-
 .../app/desktop/views/components/notifications.vue |  2 +-
 src/client/app/desktop/views/pages/home.vue        |  2 +-
 src/client/app/mobile/api/post.ts                  |  2 +-
 .../views/components/notification-preview.vue      |  2 +-
 .../app/mobile/views/components/notification.vue   |  2 +-
 .../app/mobile/views/components/post-card.vue      |  2 +-
 src/client/app/mobile/views/pages/home.vue         |  2 +-
 src/get-notification-summary.ts                    | 27 -------------
 src/get-post-summary.ts                            | 45 ----------------------
 src/get-reaction-emoji.ts                          | 14 -------
 src/renderers/get-notification-summary.ts          | 27 +++++++++++++
 src/renderers/get-post-summary.ts                  | 45 ++++++++++++++++++++++
 src/renderers/get-reaction-emoji.ts                | 14 +++++++
 src/renderers/get-user-summary.ts                  | 18 +++++++++
 src/server/api/bot/core.ts                         |  6 +--
 src/server/api/bot/interfaces/line.ts              |  2 +-
 src/user/get-summary.ts                            | 18 ---------
 18 files changed, 117 insertions(+), 117 deletions(-)
 delete mode 100644 src/get-notification-summary.ts
 delete mode 100644 src/get-post-summary.ts
 delete mode 100644 src/get-reaction-emoji.ts
 create mode 100644 src/renderers/get-notification-summary.ts
 create mode 100644 src/renderers/get-post-summary.ts
 create mode 100644 src/renderers/get-reaction-emoji.ts
 create mode 100644 src/renderers/get-user-summary.ts
 delete mode 100644 src/user/get-summary.ts

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/common/scripts/compose-notification.ts b/src/client/app/common/scripts/compose-notification.ts
index 4030d61ac7..ebc15952f6 100644
--- a/src/client/app/common/scripts/compose-notification.ts
+++ b/src/client/app/common/scripts/compose-notification.ts
@@ -1,5 +1,5 @@
-import getPostSummary from '../../../../get-post-summary';
-import getReactionEmoji from '../../../../get-reaction-emoji';
+import getPostSummary from '../../../../renderers/get-post-summary';
+import getReactionEmoji from '../../../../renderers/get-reaction-emoji';
 
 type Notification = {
 	title: string;
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index 8c4102494f..9bfe1560ba 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -103,7 +103,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../user/get-acct';
-import getPostSummary from '../../../../../get-post-summary';
+import getPostSummary from '../../../../../renderers/get-post-summary';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/desktop/views/pages/home.vue b/src/client/app/desktop/views/pages/home.vue
index ad9e2bc9d1..c209af4e43 100644
--- a/src/client/app/desktop/views/pages/home.vue
+++ b/src/client/app/desktop/views/pages/home.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
-import getPostSummary from '../../../../../get-post-summary';
+import getPostSummary from '../../../../../renderers/get-post-summary';
 
 export default Vue.extend({
 	props: {
diff --git a/src/client/app/mobile/api/post.ts b/src/client/app/mobile/api/post.ts
index 6580cbf4b1..98309ba8de 100644
--- a/src/client/app/mobile/api/post.ts
+++ b/src/client/app/mobile/api/post.ts
@@ -1,6 +1,6 @@
 import PostForm from '../views/components/post-form.vue';
 //import RepostForm from '../views/components/repost-form.vue';
-import getPostSummary from '../../../../get-post-summary';
+import getPostSummary from '../../../../renderers/get-post-summary';
 
 export default (os) => (opts) => {
 	const o = opts || {};
diff --git a/src/client/app/mobile/views/components/notification-preview.vue b/src/client/app/mobile/views/components/notification-preview.vue
index e7e1f75a87..77abd3c0ea 100644
--- a/src/client/app/mobile/views/components/notification-preview.vue
+++ b/src/client/app/mobile/views/components/notification-preview.vue
@@ -59,7 +59,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getPostSummary from '../../../../../get-post-summary';
+import getPostSummary from '../../../../../renderers/get-post-summary';
 
 export default Vue.extend({
 	props: ['notification'],
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index d92b019447..d3e313756f 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -78,7 +78,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getPostSummary from '../../../../../get-post-summary';
+import getPostSummary from '../../../../../renderers/get-post-summary';
 import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
diff --git a/src/client/app/mobile/views/components/post-card.vue b/src/client/app/mobile/views/components/post-card.vue
index 893e4c3071..de42a01f78 100644
--- a/src/client/app/mobile/views/components/post-card.vue
+++ b/src/client/app/mobile/views/components/post-card.vue
@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import summary from '../../../../../get-post-summary';
+import summary from '../../../../../renderers/get-post-summary';
 import getAcct from '../../../../../user/get-acct';
 
 export default Vue.extend({
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index b2edf59561..6fb1c6d4fa 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -64,7 +64,7 @@ import Vue from 'vue';
 import * as XDraggable from 'vuedraggable';
 import * as uuid from 'uuid';
 import Progress from '../../../common/scripts/loading';
-import getPostSummary from '../../../../../get-post-summary';
+import getPostSummary from '../../../../../renderers/get-post-summary';
 
 export default Vue.extend({
 	components: {
diff --git a/src/get-notification-summary.ts b/src/get-notification-summary.ts
deleted file mode 100644
index 03db722c84..0000000000
--- a/src/get-notification-summary.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import getPostSummary from './get-post-summary';
-import getReactionEmoji from './get-reaction-emoji';
-
-/**
- * 通知を表す文字列を取得します。
- * @param notification 通知
- */
-export default function(notification: any): string {
-	switch (notification.type) {
-		case 'follow':
-			return `${notification.user.name}にフォローされました`;
-		case 'mention':
-			return `言及されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
-		case 'reply':
-			return `返信されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
-		case 'repost':
-			return `Repostされました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
-		case 'quote':
-			return `引用されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
-		case 'reaction':
-			return `リアクションされました:\n${notification.user.name} <${getReactionEmoji(notification.reaction)}>「${getPostSummary(notification.post)}」`;
-		case 'poll_vote':
-			return `投票されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
-		default:
-			return `<不明な通知タイプ: ${notification.type}>`;
-	}
-}
diff --git a/src/get-post-summary.ts b/src/get-post-summary.ts
deleted file mode 100644
index 8d0033064f..0000000000
--- a/src/get-post-summary.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * 投稿を表す文字列を取得します。
- * @param {*} post 投稿
- */
-const summarize = (post: any): string => {
-	let summary = '';
-
-	// チャンネル
-	summary += post.channel ? `${post.channel.title}:` : '';
-
-	// 本文
-	summary += post.text ? post.text : '';
-
-	// メディアが添付されているとき
-	if (post.media) {
-		summary += ` (${post.media.length}つのメディア)`;
-	}
-
-	// 投票が添付されているとき
-	if (post.poll) {
-		summary += ' (投票)';
-	}
-
-	// 返信のとき
-	if (post.replyId) {
-		if (post.reply) {
-			summary += ` RE: ${summarize(post.reply)}`;
-		} else {
-			summary += ' RE: ...';
-		}
-	}
-
-	// Repostのとき
-	if (post.repostId) {
-		if (post.repost) {
-			summary += ` RP: ${summarize(post.repost)}`;
-		} else {
-			summary += ' RP: ...';
-		}
-	}
-
-	return summary.trim();
-};
-
-export default summarize;
diff --git a/src/get-reaction-emoji.ts b/src/get-reaction-emoji.ts
deleted file mode 100644
index c661205379..0000000000
--- a/src/get-reaction-emoji.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export default function(reaction: string): string {
-	switch (reaction) {
-		case 'like': return '👍';
-		case 'love': return '❤️';
-		case 'laugh': return '😆';
-		case 'hmm': return '🤔';
-		case 'surprise': return '😮';
-		case 'congrats': return '🎉';
-		case 'angry': return '💢';
-		case 'confused': return '😥';
-		case 'pudding': return '🍮';
-		default: return '';
-	}
-}
diff --git a/src/renderers/get-notification-summary.ts b/src/renderers/get-notification-summary.ts
new file mode 100644
index 0000000000..03db722c84
--- /dev/null
+++ b/src/renderers/get-notification-summary.ts
@@ -0,0 +1,27 @@
+import getPostSummary from './get-post-summary';
+import getReactionEmoji from './get-reaction-emoji';
+
+/**
+ * 通知を表す文字列を取得します。
+ * @param notification 通知
+ */
+export default function(notification: any): string {
+	switch (notification.type) {
+		case 'follow':
+			return `${notification.user.name}にフォローされました`;
+		case 'mention':
+			return `言及されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+		case 'reply':
+			return `返信されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+		case 'repost':
+			return `Repostされました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+		case 'quote':
+			return `引用されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+		case 'reaction':
+			return `リアクションされました:\n${notification.user.name} <${getReactionEmoji(notification.reaction)}>「${getPostSummary(notification.post)}」`;
+		case 'poll_vote':
+			return `投票されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+		default:
+			return `<不明な通知タイプ: ${notification.type}>`;
+	}
+}
diff --git a/src/renderers/get-post-summary.ts b/src/renderers/get-post-summary.ts
new file mode 100644
index 0000000000..8d0033064f
--- /dev/null
+++ b/src/renderers/get-post-summary.ts
@@ -0,0 +1,45 @@
+/**
+ * 投稿を表す文字列を取得します。
+ * @param {*} post 投稿
+ */
+const summarize = (post: any): string => {
+	let summary = '';
+
+	// チャンネル
+	summary += post.channel ? `${post.channel.title}:` : '';
+
+	// 本文
+	summary += post.text ? post.text : '';
+
+	// メディアが添付されているとき
+	if (post.media) {
+		summary += ` (${post.media.length}つのメディア)`;
+	}
+
+	// 投票が添付されているとき
+	if (post.poll) {
+		summary += ' (投票)';
+	}
+
+	// 返信のとき
+	if (post.replyId) {
+		if (post.reply) {
+			summary += ` RE: ${summarize(post.reply)}`;
+		} else {
+			summary += ' RE: ...';
+		}
+	}
+
+	// Repostのとき
+	if (post.repostId) {
+		if (post.repost) {
+			summary += ` RP: ${summarize(post.repost)}`;
+		} else {
+			summary += ' RP: ...';
+		}
+	}
+
+	return summary.trim();
+};
+
+export default summarize;
diff --git a/src/renderers/get-reaction-emoji.ts b/src/renderers/get-reaction-emoji.ts
new file mode 100644
index 0000000000..c661205379
--- /dev/null
+++ b/src/renderers/get-reaction-emoji.ts
@@ -0,0 +1,14 @@
+export default function(reaction: string): string {
+	switch (reaction) {
+		case 'like': return '👍';
+		case 'love': return '❤️';
+		case 'laugh': return '😆';
+		case 'hmm': return '🤔';
+		case 'surprise': return '😮';
+		case 'congrats': return '🎉';
+		case 'angry': return '💢';
+		case 'confused': return '😥';
+		case 'pudding': return '🍮';
+		default: return '';
+	}
+}
diff --git a/src/renderers/get-user-summary.ts b/src/renderers/get-user-summary.ts
new file mode 100644
index 0000000000..2a9e8a5d04
--- /dev/null
+++ b/src/renderers/get-user-summary.ts
@@ -0,0 +1,18 @@
+import { IUser, isLocalUser } from '../models/user';
+import getAcct from '../user/get-acct';
+
+/**
+ * ユーザーを表す文字列を取得します。
+ * @param user ユーザー
+ */
+export default function(user: IUser): string {
+	let string = `${user.name} (@${getAcct(user)})\n` +
+		`${user.postsCount}投稿、${user.followingCount}フォロー、${user.followersCount}フォロワー\n`;
+
+	if (isLocalUser(user)) {
+		const account = user.account;
+		string += `場所: ${account.profile.location}、誕生日: ${account.profile.birthday}\n`;
+	}
+
+	return string + `「${user.description}」`;
+}
diff --git a/src/server/api/bot/core.ts b/src/server/api/bot/core.ts
index 3beec33d11..7f9409660a 100644
--- a/src/server/api/bot/core.ts
+++ b/src/server/api/bot/core.ts
@@ -3,10 +3,10 @@ import * as bcrypt from 'bcryptjs';
 
 import User, { IUser, init as initUser, ILocalUser } from '../../../models/user';
 
-import getPostSummary from '../../../get-post-summary';
-import getUserSummary from '../../../user/get-summary';
+import getPostSummary from '../../../renderers/get-post-summary';
+import getUserSummary from '../../../renderers/get-user-summary';
 import parseAcct from '../../../user/parse-acct';
-import getNotificationSummary from '../../../get-notification-summary';
+import getNotificationSummary from '../../../renderers/get-notification-summary';
 
 const hmm = [
 	'？',
diff --git a/src/server/api/bot/interfaces/line.ts b/src/server/api/bot/interfaces/line.ts
index 27248c9b9d..17841a9f09 100644
--- a/src/server/api/bot/interfaces/line.ts
+++ b/src/server/api/bot/interfaces/line.ts
@@ -9,7 +9,7 @@ import _redis from '../../../../db/redis';
 import prominence = require('prominence');
 import getAcct from '../../../../user/get-acct';
 import parseAcct from '../../../../user/parse-acct';
-import getPostSummary from '../../../../get-post-summary';
+import getPostSummary from '../../../../renderers/get-post-summary';
 
 const redis = prominence(_redis);
 
diff --git a/src/user/get-summary.ts b/src/user/get-summary.ts
deleted file mode 100644
index 8220817025..0000000000
--- a/src/user/get-summary.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { IUser, isLocalUser } from '../models/user';
-import getAcct from './get-acct';
-
-/**
- * ユーザーを表す文字列を取得します。
- * @param user ユーザー
- */
-export default function(user: IUser): string {
-	let string = `${user.name} (@${getAcct(user)})\n` +
-		`${user.postsCount}投稿、${user.followingCount}フォロー、${user.followersCount}フォロワー\n`;
-
-	if (isLocalUser(user)) {
-		const account = user.account;
-		string += `場所: ${account.profile.location}、誕生日: ${account.profile.birthday}\n`;
-	}
-
-	return string + `「${user.description}」`;
-}
-- 
cgit v1.3.1-freya


From aa94035987926f47b037c32b3c89ac470a40dc40 Mon Sep 17 00:00:00 2001
From: Akihiko Odaki <nekomanma@pixiv.co.jp>
Date: Mon, 2 Apr 2018 13:44:32 +0900
Subject: Introduce acct directory

---
 src/acct/parse.ts                                                   | 4 ++++
 src/acct/render.ts                                                  | 3 +++
 src/client/app/ch/tags/channel.tag                                  | 2 +-
 src/client/app/common/views/components/autocomplete.vue             | 2 +-
 src/client/app/common/views/components/messaging-room.message.vue   | 2 +-
 src/client/app/common/views/components/messaging.vue                | 2 +-
 src/client/app/common/views/components/post-html.ts                 | 2 +-
 src/client/app/common/views/components/welcome-timeline.vue         | 2 +-
 src/client/app/desktop/views/components/friends-maker.vue           | 2 +-
 src/client/app/desktop/views/components/messaging-room-window.vue   | 2 +-
 src/client/app/desktop/views/components/notifications.vue           | 2 +-
 src/client/app/desktop/views/components/post-detail.sub.vue         | 2 +-
 src/client/app/desktop/views/components/post-detail.vue             | 2 +-
 src/client/app/desktop/views/components/post-preview.vue            | 2 +-
 src/client/app/desktop/views/components/posts.post.sub.vue          | 2 +-
 src/client/app/desktop/views/components/posts.post.vue              | 2 +-
 src/client/app/desktop/views/components/settings.mute.vue           | 2 +-
 src/client/app/desktop/views/components/user-preview.vue            | 4 ++--
 src/client/app/desktop/views/components/users-list.item.vue         | 2 +-
 src/client/app/desktop/views/pages/messaging-room.vue               | 2 +-
 src/client/app/desktop/views/pages/user/user.followers-you-know.vue | 2 +-
 src/client/app/desktop/views/pages/user/user.friends.vue            | 2 +-
 src/client/app/desktop/views/pages/user/user.header.vue             | 2 +-
 src/client/app/desktop/views/pages/user/user.vue                    | 2 +-
 src/client/app/desktop/views/pages/welcome.vue                      | 2 +-
 src/client/app/desktop/views/widgets/channel.channel.post.vue       | 2 +-
 src/client/app/desktop/views/widgets/polls.vue                      | 2 +-
 src/client/app/desktop/views/widgets/trends.vue                     | 2 +-
 src/client/app/desktop/views/widgets/users.vue                      | 2 +-
 src/client/app/mobile/views/components/notification.vue             | 2 +-
 src/client/app/mobile/views/components/post-card.vue                | 2 +-
 src/client/app/mobile/views/components/post-detail.sub.vue          | 2 +-
 src/client/app/mobile/views/components/post-detail.vue              | 2 +-
 src/client/app/mobile/views/components/post-preview.vue             | 2 +-
 src/client/app/mobile/views/components/post.sub.vue                 | 2 +-
 src/client/app/mobile/views/components/post.vue                     | 2 +-
 src/client/app/mobile/views/components/user-card.vue                | 2 +-
 src/client/app/mobile/views/components/user-preview.vue             | 2 +-
 src/client/app/mobile/views/pages/followers.vue                     | 2 +-
 src/client/app/mobile/views/pages/following.vue                     | 2 +-
 src/client/app/mobile/views/pages/messaging-room.vue                | 2 +-
 src/client/app/mobile/views/pages/messaging.vue                     | 2 +-
 src/client/app/mobile/views/pages/user.vue                          | 4 ++--
 src/client/app/mobile/views/pages/user/home.followers-you-know.vue  | 2 +-
 src/client/app/mobile/views/pages/user/home.photos.vue              | 2 +-
 src/drive/add-file.ts                                               | 2 +-
 src/renderers/get-user-summary.ts                                   | 2 +-
 src/server/activitypub/inbox.ts                                     | 2 +-
 src/server/activitypub/post.ts                                      | 2 +-
 src/server/activitypub/with-user.ts                                 | 2 +-
 src/server/api/bot/core.ts                                          | 2 +-
 src/server/api/bot/interfaces/line.ts                               | 4 ++--
 src/server/api/endpoints/posts/create.ts                            | 4 ++--
 src/server/api/limitter.ts                                          | 2 +-
 src/server/webfinger.ts                                             | 2 +-
 src/text/parse/elements/mention.ts                                  | 2 +-
 src/user/get-acct.ts                                                | 3 ---
 src/user/parse-acct.ts                                              | 4 ----
 58 files changed, 65 insertions(+), 65 deletions(-)
 create mode 100644 src/acct/parse.ts
 create mode 100644 src/acct/render.ts
 delete mode 100644 src/user/get-acct.ts
 delete mode 100644 src/user/parse-acct.ts

(limited to 'src/client/app/desktop')

diff --git a/src/acct/parse.ts b/src/acct/parse.ts
new file mode 100644
index 0000000000..ef1f55405d
--- /dev/null
+++ b/src/acct/parse.ts
@@ -0,0 +1,4 @@
+export default acct => {
+	const splitted = acct.split('@', 2);
+	return { username: splitted[0], host: splitted[1] || null };
+};
diff --git a/src/acct/render.ts b/src/acct/render.ts
new file mode 100644
index 0000000000..9afb03d88b
--- /dev/null
+++ b/src/acct/render.ts
@@ -0,0 +1,3 @@
+export default user => {
+	return user.host === null ? user.username : `${user.username}@${user.host}`;
+};
diff --git a/src/client/app/ch/tags/channel.tag b/src/client/app/ch/tags/channel.tag
index 0c139ba267..1ebc3ccebc 100644
--- a/src/client/app/ch/tags/channel.tag
+++ b/src/client/app/ch/tags/channel.tag
@@ -229,7 +229,7 @@
 
 	</style>
 	<script lang="typescript">
-		import getAcct from '../../../../user/get-acct';
+		import getAcct from '../../../../acct/render';
 
 		this.post = this.opts.post;
 		this.form = this.opts.form;
diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index 7bcfc07e91..38eaf86508 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -21,7 +21,7 @@
 import Vue from 'vue';
 import * as emojilib from 'emojilib';
 import contains from '../../../common/scripts/contains';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 const lib = Object.entries(emojilib.lib).filter((x: any) => {
 	return x[1].category != 'flags';
diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue
index 3de8321f82..1518602c63 100644
--- a/src/client/app/common/views/components/messaging-room.message.vue
+++ b/src/client/app/common/views/components/messaging-room.message.vue
@@ -34,7 +34,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 import parse from '../../../../../text/parse';
 
 export default Vue.extend({
diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index bde2b2b903..4ab3e46e89 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -51,7 +51,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	props: {
diff --git a/src/client/app/common/views/components/post-html.ts b/src/client/app/common/views/components/post-html.ts
index 4018a966e9..8d85316523 100644
--- a/src/client/app/common/views/components/post-html.ts
+++ b/src/client/app/common/views/components/post-html.ts
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import * as emojilib from 'emojilib';
 import parse from '../../../../../text/parse';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 import { url } from '../../../config';
 import MkUrl from './url.vue';
 
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index 94b7f5889e..ef0c7beaad 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -24,7 +24,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/desktop/views/components/friends-maker.vue b/src/client/app/desktop/views/components/friends-maker.vue
index bfa7503d23..351e9e1c5c 100644
--- a/src/client/app/desktop/views/components/friends-maker.vue
+++ b/src/client/app/desktop/views/components/friends-maker.vue
@@ -22,7 +22,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/desktop/views/components/messaging-room-window.vue b/src/client/app/desktop/views/components/messaging-room-window.vue
index 88eb285781..f29f9b74e7 100644
--- a/src/client/app/desktop/views/components/messaging-room-window.vue
+++ b/src/client/app/desktop/views/components/messaging-room-window.vue
@@ -8,7 +8,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { url } from '../../../config';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index 9bfe1560ba..c5ab284df9 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -102,7 +102,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 import getPostSummary from '../../../../../renderers/get-post-summary';
 
 export default Vue.extend({
diff --git a/src/client/app/desktop/views/components/post-detail.sub.vue b/src/client/app/desktop/views/components/post-detail.sub.vue
index 2719fee9dc..59bc9ce0cf 100644
--- a/src/client/app/desktop/views/components/post-detail.sub.vue
+++ b/src/client/app/desktop/views/components/post-detail.sub.vue
@@ -28,7 +28,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/desktop/views/components/post-detail.vue b/src/client/app/desktop/views/components/post-detail.vue
index 5911a267fe..8000ce2e6f 100644
--- a/src/client/app/desktop/views/components/post-detail.vue
+++ b/src/client/app/desktop/views/components/post-detail.vue
@@ -78,7 +78,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 import parse from '../../../../../text/parse';
 
 import MkPostFormWindow from './post-form-window.vue';
diff --git a/src/client/app/desktop/views/components/post-preview.vue b/src/client/app/desktop/views/components/post-preview.vue
index e27f0b4ccd..7129f67b39 100644
--- a/src/client/app/desktop/views/components/post-preview.vue
+++ b/src/client/app/desktop/views/components/post-preview.vue
@@ -21,7 +21,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/desktop/views/components/posts.post.sub.vue b/src/client/app/desktop/views/components/posts.post.sub.vue
index 16f5c4beee..dffecb89cc 100644
--- a/src/client/app/desktop/views/components/posts.post.sub.vue
+++ b/src/client/app/desktop/views/components/posts.post.sub.vue
@@ -21,7 +21,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/desktop/views/components/posts.post.vue b/src/client/app/desktop/views/components/posts.post.vue
index b32ebe944f..9a13dd6872 100644
--- a/src/client/app/desktop/views/components/posts.post.vue
+++ b/src/client/app/desktop/views/components/posts.post.vue
@@ -85,7 +85,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 import parse from '../../../../../text/parse';
 
 import MkPostFormWindow from './post-form-window.vue';
diff --git a/src/client/app/desktop/views/components/settings.mute.vue b/src/client/app/desktop/views/components/settings.mute.vue
index 5c8c86222d..c87f973faf 100644
--- a/src/client/app/desktop/views/components/settings.mute.vue
+++ b/src/client/app/desktop/views/components/settings.mute.vue
@@ -13,7 +13,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index cad7d455fe..2f2e78ec6d 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -29,8 +29,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as anime from 'animejs';
-import getAcct from '../../../../../user/get-acct';
-import parseAcct from '../../../../../user/parse-acct';
+import getAcct from '../../../../../acct/render';
+import parseAcct from '../../../../../acct/parse';
 
 export default Vue.extend({
 	props: {
diff --git a/src/client/app/desktop/views/components/users-list.item.vue b/src/client/app/desktop/views/components/users-list.item.vue
index a25d68c44a..2d7d4dc72d 100644
--- a/src/client/app/desktop/views/components/users-list.item.vue
+++ b/src/client/app/desktop/views/components/users-list.item.vue
@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/desktop/views/pages/messaging-room.vue b/src/client/app/desktop/views/pages/messaging-room.vue
index b3d0ff1490..1e61f3ce17 100644
--- a/src/client/app/desktop/views/pages/messaging-room.vue
+++ b/src/client/app/desktop/views/pages/messaging-room.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
-import parseAcct from '../../../../../user/parse-acct';
+import parseAcct from '../../../../../acct/parse';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
index a8bc67d3a6..7497acd0e0 100644
--- a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
+++ b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
@@ -13,7 +13,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../user/get-acct';
+import getAcct from '../../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue
index 6710e37933..a726e2565c 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../user/get-acct';
+import getAcct from '../../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index 7b051224d4..d30f423d53 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -22,7 +22,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../user/get-acct';
+import getAcct from '../../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
index 54d675bbd8..02ddc2421d 100644
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import parseAcct from '../../../../../../user/parse-acct';
+import parseAcct from '../../../../../../acct/parse';
 import Progress from '../../../../common/scripts/loading';
 import XHeader from './user.header.vue';
 import XHome from './user.home.vue';
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 1e1c490190..41b015b8a3 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -43,7 +43,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { docsUrl, copyright, lang } from '../../../config';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 const shares = [
 	'Everything!',
diff --git a/src/client/app/desktop/views/widgets/channel.channel.post.vue b/src/client/app/desktop/views/widgets/channel.channel.post.vue
index 587371a765..e10e9c4f76 100644
--- a/src/client/app/desktop/views/widgets/channel.channel.post.vue
+++ b/src/client/app/desktop/views/widgets/channel.channel.post.vue
@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/desktop/views/widgets/polls.vue b/src/client/app/desktop/views/widgets/polls.vue
index ad7101e0de..c8ba17bd4b 100644
--- a/src/client/app/desktop/views/widgets/polls.vue
+++ b/src/client/app/desktop/views/widgets/polls.vue
@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default define({
 	name: 'polls',
diff --git a/src/client/app/desktop/views/widgets/trends.vue b/src/client/app/desktop/views/widgets/trends.vue
index be62faa42c..27c1860b32 100644
--- a/src/client/app/desktop/views/widgets/trends.vue
+++ b/src/client/app/desktop/views/widgets/trends.vue
@@ -15,7 +15,7 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default define({
 	name: 'trends',
diff --git a/src/client/app/desktop/views/widgets/users.vue b/src/client/app/desktop/views/widgets/users.vue
index c4643f485e..6f6a101577 100644
--- a/src/client/app/desktop/views/widgets/users.vue
+++ b/src/client/app/desktop/views/widgets/users.vue
@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 const limit = 3;
 
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index d3e313756f..189d7195fb 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -79,7 +79,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import getPostSummary from '../../../../../renderers/get-post-summary';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['notification'],
diff --git a/src/client/app/mobile/views/components/post-card.vue b/src/client/app/mobile/views/components/post-card.vue
index de42a01f78..38d4522d26 100644
--- a/src/client/app/mobile/views/components/post-card.vue
+++ b/src/client/app/mobile/views/components/post-card.vue
@@ -15,7 +15,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import summary from '../../../../../renderers/get-post-summary';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/mobile/views/components/post-detail.sub.vue b/src/client/app/mobile/views/components/post-detail.sub.vue
index c8e06e26ff..7ff9f1aabd 100644
--- a/src/client/app/mobile/views/components/post-detail.sub.vue
+++ b/src/client/app/mobile/views/components/post-detail.sub.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/mobile/views/components/post-detail.vue b/src/client/app/mobile/views/components/post-detail.vue
index 4a293562ee..ed394acd36 100644
--- a/src/client/app/mobile/views/components/post-detail.vue
+++ b/src/client/app/mobile/views/components/post-detail.vue
@@ -80,7 +80,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 import parse from '../../../../../text/parse';
 
 import MkPostMenu from '../../../common/views/components/post-menu.vue';
diff --git a/src/client/app/mobile/views/components/post-preview.vue b/src/client/app/mobile/views/components/post-preview.vue
index b6916edb43..81b0c22bfb 100644
--- a/src/client/app/mobile/views/components/post-preview.vue
+++ b/src/client/app/mobile/views/components/post-preview.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/mobile/views/components/post.sub.vue b/src/client/app/mobile/views/components/post.sub.vue
index 7f132b0a4d..85ddb91880 100644
--- a/src/client/app/mobile/views/components/post.sub.vue
+++ b/src/client/app/mobile/views/components/post.sub.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['post'],
diff --git a/src/client/app/mobile/views/components/post.vue b/src/client/app/mobile/views/components/post.vue
index 7cfb97425e..1454bc939f 100644
--- a/src/client/app/mobile/views/components/post.vue
+++ b/src/client/app/mobile/views/components/post.vue
@@ -77,7 +77,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 import parse from '../../../../../text/parse';
 
 import MkPostMenu from '../../../common/views/components/post-menu.vue';
diff --git a/src/client/app/mobile/views/components/user-card.vue b/src/client/app/mobile/views/components/user-card.vue
index 542ad20317..46fa3b4732 100644
--- a/src/client/app/mobile/views/components/user-card.vue
+++ b/src/client/app/mobile/views/components/user-card.vue
@@ -13,7 +13,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/mobile/views/components/user-preview.vue b/src/client/app/mobile/views/components/user-preview.vue
index 51c32b9fde..00f87e5549 100644
--- a/src/client/app/mobile/views/components/user-preview.vue
+++ b/src/client/app/mobile/views/components/user-preview.vue
@@ -17,7 +17,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/mobile/views/pages/followers.vue b/src/client/app/mobile/views/pages/followers.vue
index 2e984508d5..d2e6a9aea5 100644
--- a/src/client/app/mobile/views/pages/followers.vue
+++ b/src/client/app/mobile/views/pages/followers.vue
@@ -19,7 +19,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
-import parseAcct from '../../../../../user/parse-acct';
+import parseAcct from '../../../../../acct/parse';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/mobile/views/pages/following.vue b/src/client/app/mobile/views/pages/following.vue
index f5c7223a1b..3690536cf5 100644
--- a/src/client/app/mobile/views/pages/following.vue
+++ b/src/client/app/mobile/views/pages/following.vue
@@ -19,7 +19,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
-import parseAcct from '../../../../../user/parse-acct';
+import parseAcct from '../../../../../acct/parse';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/mobile/views/pages/messaging-room.vue b/src/client/app/mobile/views/pages/messaging-room.vue
index 14f12a99b9..172666eea5 100644
--- a/src/client/app/mobile/views/pages/messaging-room.vue
+++ b/src/client/app/mobile/views/pages/messaging-room.vue
@@ -10,7 +10,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import parseAcct from '../../../../../user/parse-acct';
+import parseAcct from '../../../../../acct/parse';
 
 export default Vue.extend({
 	data() {
diff --git a/src/client/app/mobile/views/pages/messaging.vue b/src/client/app/mobile/views/pages/messaging.vue
index f3f6f9f9b5..fa735a2530 100644
--- a/src/client/app/mobile/views/pages/messaging.vue
+++ b/src/client/app/mobile/views/pages/messaging.vue
@@ -7,7 +7,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../user/get-acct';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	mounted() {
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index 2d8f9f8ec8..be696484b6 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -60,8 +60,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as age from 's-age';
-import getAcct from '../../../../../user/get-acct';
-import getAcct from '../../../../../user/parse-acct';
+import getAcct from '../../../../../acct/render';
+import getAcct from '../../../../../acct/parse';
 import Progress from '../../../common/scripts/loading';
 import XHome from './user/home.vue';
 
diff --git a/src/client/app/mobile/views/pages/user/home.followers-you-know.vue b/src/client/app/mobile/views/pages/user/home.followers-you-know.vue
index 04d8538f71..ffdd9f178d 100644
--- a/src/client/app/mobile/views/pages/user/home.followers-you-know.vue
+++ b/src/client/app/mobile/views/pages/user/home.followers-you-know.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../user/get-acct';
+import getAcct from '../../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/client/app/mobile/views/pages/user/home.photos.vue b/src/client/app/mobile/views/pages/user/home.photos.vue
index 491660711d..ecf5082072 100644
--- a/src/client/app/mobile/views/pages/user/home.photos.vue
+++ b/src/client/app/mobile/views/pages/user/home.photos.vue
@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../user/get-acct';
+import getAcct from '../../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['user'],
diff --git a/src/drive/add-file.ts b/src/drive/add-file.ts
index 4a718a9da0..f48fada7eb 100644
--- a/src/drive/add-file.ts
+++ b/src/drive/add-file.ts
@@ -14,7 +14,7 @@ import DriveFile, { getGridFSBucket } from '../models/drive-file';
 import DriveFolder from '../models/drive-folder';
 import { pack } from '../models/drive-file';
 import event, { publishDriveStream } from '../publishers/stream';
-import getAcct from '../user/get-acct';
+import getAcct from '../acct/render';
 import config from '../config';
 
 const gm = _gm.subClass({
diff --git a/src/renderers/get-user-summary.ts b/src/renderers/get-user-summary.ts
index 2a9e8a5d04..2089871130 100644
--- a/src/renderers/get-user-summary.ts
+++ b/src/renderers/get-user-summary.ts
@@ -1,5 +1,5 @@
 import { IUser, isLocalUser } from '../models/user';
-import getAcct from '../user/get-acct';
+import getAcct from '../acct/render';
 
 /**
  * ユーザーを表す文字列を取得します。
diff --git a/src/server/activitypub/inbox.ts b/src/server/activitypub/inbox.ts
index 865797faee..6df636f898 100644
--- a/src/server/activitypub/inbox.ts
+++ b/src/server/activitypub/inbox.ts
@@ -3,7 +3,7 @@ import * as express from 'express';
 import { parseRequest, verifySignature } from 'http-signature';
 import User, { IRemoteUser } from '../../models/user';
 import queue from '../../queue';
-import parseAcct from '../../user/parse-acct';
+import parseAcct from '../../acct/parse';
 
 const app = express();
 app.disable('x-powered-by');
diff --git a/src/server/activitypub/post.ts b/src/server/activitypub/post.ts
index 2962a9b965..91d91aeb95 100644
--- a/src/server/activitypub/post.ts
+++ b/src/server/activitypub/post.ts
@@ -1,7 +1,7 @@
 import * as express from 'express';
 import context from '../../remote/activitypub/renderer/context';
 import render from '../../remote/activitypub/renderer/note';
-import parseAcct from '../../user/parse-acct';
+import parseAcct from '../../acct/parse';
 import Post from '../../models/post';
 import User from '../../models/user';
 
diff --git a/src/server/activitypub/with-user.ts b/src/server/activitypub/with-user.ts
index b4090786bd..bdbbefb429 100644
--- a/src/server/activitypub/with-user.ts
+++ b/src/server/activitypub/with-user.ts
@@ -1,4 +1,4 @@
-import parseAcct from '../../user/parse-acct';
+import parseAcct from '../../acct/parse';
 import User from '../../models/user';
 
 export default (redirect, respond) => async (req, res, next) => {
diff --git a/src/server/api/bot/core.ts b/src/server/api/bot/core.ts
index 7f9409660a..7e80f31e5e 100644
--- a/src/server/api/bot/core.ts
+++ b/src/server/api/bot/core.ts
@@ -5,7 +5,7 @@ import User, { IUser, init as initUser, ILocalUser } from '../../../models/user'
 
 import getPostSummary from '../../../renderers/get-post-summary';
 import getUserSummary from '../../../renderers/get-user-summary';
-import parseAcct from '../../../user/parse-acct';
+import parseAcct from '../../../acct/parse';
 import getNotificationSummary from '../../../renderers/get-notification-summary';
 
 const hmm = [
diff --git a/src/server/api/bot/interfaces/line.ts b/src/server/api/bot/interfaces/line.ts
index 17841a9f09..7847cbdeaa 100644
--- a/src/server/api/bot/interfaces/line.ts
+++ b/src/server/api/bot/interfaces/line.ts
@@ -7,8 +7,8 @@ import config from '../../../../config';
 import BotCore from '../core';
 import _redis from '../../../../db/redis';
 import prominence = require('prominence');
-import getAcct from '../../../../user/get-acct';
-import parseAcct from '../../../../user/parse-acct';
+import getAcct from '../../../../acct/render';
+import parseAcct from '../../../../acct/parse';
 import getPostSummary from '../../../../renderers/get-post-summary';
 
 const redis = prominence(_redis);
diff --git a/src/server/api/endpoints/posts/create.ts b/src/server/api/endpoints/posts/create.ts
index 34a3aa1901..7c44e6f084 100644
--- a/src/server/api/endpoints/posts/create.ts
+++ b/src/server/api/endpoints/posts/create.ts
@@ -18,8 +18,8 @@ import watch from '../../common/watch-post';
 import stream, { publishChannelStream } from '../../../../publishers/stream';
 import notify from '../../../../publishers/notify';
 import pushSw from '../../../../publishers/push-sw';
-import getAcct from '../../../../user/get-acct';
-import parseAcct from '../../../../user/parse-acct';
+import getAcct from '../../../../acct/render';
+import parseAcct from '../../../../acct/parse';
 import config from '../../../../config';
 
 /**
diff --git a/src/server/api/limitter.ts b/src/server/api/limitter.ts
index 81016457dc..638fac78be 100644
--- a/src/server/api/limitter.ts
+++ b/src/server/api/limitter.ts
@@ -3,7 +3,7 @@ import * as debug from 'debug';
 import limiterDB from '../../db/redis';
 import { Endpoint } from './endpoints';
 import { IAuthContext } from './authenticate';
-import getAcct from '../../user/get-acct';
+import getAcct from '../../acct/render';
 
 const log = debug('misskey:limitter');
 
diff --git a/src/server/webfinger.ts b/src/server/webfinger.ts
index 3b0f416d6f..20057da31f 100644
--- a/src/server/webfinger.ts
+++ b/src/server/webfinger.ts
@@ -1,5 +1,5 @@
 import config from '../config';
-import parseAcct from '../user/parse-acct';
+import parseAcct from '../acct/parse';
 import User from '../models/user';
 const express = require('express');
 
diff --git a/src/text/parse/elements/mention.ts b/src/text/parse/elements/mention.ts
index 732554d8be..4f2997b39f 100644
--- a/src/text/parse/elements/mention.ts
+++ b/src/text/parse/elements/mention.ts
@@ -1,7 +1,7 @@
 /**
  * Mention
  */
-import parseAcct from '../../../user/parse-acct';
+import parseAcct from '../../../acct/parse';
 
 module.exports = text => {
 	const match = text.match(/^(?:@[a-zA-Z0-9\-]+){1,2}/);
diff --git a/src/user/get-acct.ts b/src/user/get-acct.ts
deleted file mode 100644
index 9afb03d88b..0000000000
--- a/src/user/get-acct.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default user => {
-	return user.host === null ? user.username : `${user.username}@${user.host}`;
-};
diff --git a/src/user/parse-acct.ts b/src/user/parse-acct.ts
deleted file mode 100644
index ef1f55405d..0000000000
--- a/src/user/parse-acct.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export default acct => {
-	const splitted = acct.split('@', 2);
-	return { username: splitted[0], host: splitted[1] || null };
-};
-- 
cgit v1.3.1-freya


From f0e8e6392b5ef99488ea0bbecbf9029e30ef0cfa Mon Sep 17 00:00:00 2001
From: Akihiko Odaki <nekomanma@pixiv.co.jp>
Date: Fri, 6 Apr 2018 01:36:34 +0900
Subject: Allow name property of user to be null

---
 src/client/app/ch/tags/channel.tag                 | 10 ++++++++--
 .../app/common/scripts/compose-notification.ts     | 13 ++++++------
 .../app/common/views/components/autocomplete.vue   |  4 +++-
 .../app/common/views/components/messaging.vue      |  6 ++++--
 .../common/views/components/welcome-timeline.vue   |  4 +++-
 .../desktop/views/components/followers-window.vue  | 11 +++++++++--
 .../desktop/views/components/following-window.vue  | 11 +++++++++--
 .../app/desktop/views/components/friends-maker.vue |  4 +++-
 .../views/components/messaging-room-window.vue     |  6 +++++-
 .../app/desktop/views/components/notifications.vue | 16 ++++++++-------
 .../desktop/views/components/post-detail.sub.vue   |  6 +++++-
 .../app/desktop/views/components/post-detail.vue   | 11 +++++++++--
 .../app/desktop/views/components/post-preview.vue  |  6 +++++-
 .../desktop/views/components/posts.post.sub.vue    |  6 +++++-
 .../app/desktop/views/components/posts.post.vue    |  6 +++++-
 .../app/desktop/views/components/settings.mute.vue |  6 ++++--
 .../desktop/views/components/settings.profile.vue  |  4 ++--
 .../app/desktop/views/components/ui.header.vue     |  9 ++++++++-
 .../desktop/views/components/users-list.item.vue   |  6 +++++-
 .../app/desktop/views/pages/messaging-room.vue     |  3 ++-
 .../views/pages/user/user.followers-you-know.vue   |  6 ++++--
 .../app/desktop/views/pages/user/user.header.vue   |  6 +++++-
 src/client/app/desktop/views/pages/user/user.vue   |  3 ++-
 .../desktop/views/widgets/channel.channel.post.vue |  6 +++++-
 src/client/app/desktop/views/widgets/profile.vue   |  9 ++++++++-
 src/client/app/desktop/views/widgets/users.vue     |  4 +++-
 .../views/components/notification-preview.vue      | 23 +++++++++++++++-------
 .../app/mobile/views/components/notification.vue   | 15 ++++++++++----
 .../app/mobile/views/components/post-card.vue      |  6 +++++-
 .../mobile/views/components/post-detail.sub.vue    |  6 +++++-
 .../app/mobile/views/components/post-detail.vue    | 11 +++++++++--
 .../app/mobile/views/components/post-preview.vue   |  6 +++++-
 .../app/mobile/views/components/post.sub.vue       |  6 +++++-
 src/client/app/mobile/views/components/post.vue    | 11 +++++++++--
 .../app/mobile/views/components/ui.header.vue      |  8 +++++++-
 src/client/app/mobile/views/components/ui.nav.vue  |  8 +++++++-
 .../app/mobile/views/components/user-card.vue      |  6 +++++-
 .../app/mobile/views/components/user-preview.vue   |  6 +++++-
 src/client/app/mobile/views/pages/followers.vue    | 10 ++++++++--
 src/client/app/mobile/views/pages/following.vue    | 10 ++++++++--
 .../app/mobile/views/pages/messaging-room.vue      | 10 ++++++++--
 .../app/mobile/views/pages/profile-setting.vue     |  4 ++--
 src/client/app/mobile/views/pages/settings.vue     |  8 +++++++-
 src/client/app/mobile/views/pages/user.vue         | 11 +++++++----
 .../views/pages/user/home.followers-you-know.vue   |  8 +++++++-
 src/client/app/mobile/views/widgets/profile.vue    | 10 +++++++++-
 src/models/user.ts                                 |  6 +++---
 src/othello/ai/back.ts                             | 17 ++++++++--------
 src/renderers/get-notification-summary.ts          | 15 +++++++-------
 src/renderers/get-user-summary.ts                  |  3 ++-
 src/server/api/bot/core.ts                         |  7 ++++---
 src/server/api/bot/interfaces/line.ts              |  5 +++--
 52 files changed, 311 insertions(+), 107 deletions(-)

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/ch/tags/channel.tag b/src/client/app/ch/tags/channel.tag
index 1ebc3ccebc..4856728dec 100644
--- a/src/client/app/ch/tags/channel.tag
+++ b/src/client/app/ch/tags/channel.tag
@@ -165,7 +165,7 @@
 <mk-channel-post>
 	<header>
 		<a class="index" @click="reply">{ post.index }:</a>
-		<a class="name" href={ _URL_ + '/@' + acct }><b>{ post.user.name }</b></a>
+		<a class="name" href={ _URL_ + '/@' + acct }><b>{ getUserName(post.user) }</b></a>
 		<mk-time time={ post.createdAt }/>
 		<mk-time time={ post.createdAt } mode="detail"/>
 		<span>ID:<i>{ acct }</i></span>
@@ -230,10 +230,12 @@
 	</style>
 	<script lang="typescript">
 		import getAcct from '../../../../acct/render';
+		import getUserName from '../../../../renderers/get-user-name';
 
 		this.post = this.opts.post;
 		this.form = this.opts.form;
 		this.acct = getAcct(this.post.user);
+		this.name = getUserName(this.post.user);
 
 		this.reply = () => {
 			this.form.update({
@@ -244,7 +246,7 @@
 </mk-channel-post>
 
 <mk-channel-form>
-	<p v-if="reply"><b>&gt;&gt;{ reply.index }</b> ({ reply.user.name }): <a @click="clearReply">[x]</a></p>
+	<p v-if="reply"><b>&gt;&gt;{ reply.index }</b> ({ getUserName(reply.user) }): <a @click="clearReply">[x]</a></p>
 	<textarea ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder="%i18n:ch.tags.mk-channel-form.textarea%"></textarea>
 	<div class="actions">
 		<button @click="selectFile">%fa:upload%%i18n:ch.tags.mk-channel-form.upload%</button>
@@ -286,6 +288,8 @@
 
 	</style>
 	<script lang="typescript">
+		import getUserName from '../../../../renderers/get-user-name';
+
 		this.mixin('api');
 
 		this.channel = this.opts.channel;
@@ -373,6 +377,8 @@
 				}
 			});
 		};
+
+		this.getUserName = getUserName;
 	</script>
 </mk-channel-form>
 
diff --git a/src/client/app/common/scripts/compose-notification.ts b/src/client/app/common/scripts/compose-notification.ts
index ebc15952f6..e99d502960 100644
--- a/src/client/app/common/scripts/compose-notification.ts
+++ b/src/client/app/common/scripts/compose-notification.ts
@@ -1,5 +1,6 @@
 import getPostSummary from '../../../../renderers/get-post-summary';
 import getReactionEmoji from '../../../../renderers/get-reaction-emoji';
+import getUserName from '../../../../renderers/get-user-name';
 
 type Notification = {
 	title: string;
@@ -21,35 +22,35 @@ export default function(type, data): Notification {
 
 		case 'mention':
 			return {
-				title: `${data.user.name}さんから:`,
+				title: `${getUserName(data.user)}さんから:`,
 				body: getPostSummary(data),
 				icon: data.user.avatarUrl + '?thumbnail&size=64'
 			};
 
 		case 'reply':
 			return {
-				title: `${data.user.name}さんから返信:`,
+				title: `${getUserName(data.user)}さんから返信:`,
 				body: getPostSummary(data),
 				icon: data.user.avatarUrl + '?thumbnail&size=64'
 			};
 
 		case 'quote':
 			return {
-				title: `${data.user.name}さんが引用:`,
+				title: `${getUserName(data.user)}さんが引用:`,
 				body: getPostSummary(data),
 				icon: data.user.avatarUrl + '?thumbnail&size=64'
 			};
 
 		case 'reaction':
 			return {
-				title: `${data.user.name}: ${getReactionEmoji(data.reaction)}:`,
+				title: `${getUserName(data.user)}: ${getReactionEmoji(data.reaction)}:`,
 				body: getPostSummary(data.post),
 				icon: data.user.avatarUrl + '?thumbnail&size=64'
 			};
 
 		case 'unread_messaging_message':
 			return {
-				title: `${data.user.name}さんからメッセージ:`,
+				title: `${getUserName(data.user)}さんからメッセージ:`,
 				body: data.text, // TODO: getMessagingMessageSummary(data),
 				icon: data.user.avatarUrl + '?thumbnail&size=64'
 			};
@@ -57,7 +58,7 @@ export default function(type, data): Notification {
 		case 'othello_invited':
 			return {
 				title: '対局への招待があります',
-				body: `${data.parent.name}さんから`,
+				body: `${getUserName(data.parent)}さんから`,
 				icon: data.parent.avatarUrl + '?thumbnail&size=64'
 			};
 
diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index 38eaf86508..8837fde6be 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -3,7 +3,7 @@
 	<ol class="users" ref="suggests" v-if="users.length > 0">
 		<li v-for="user in users" @click="complete(type, user)" @keydown="onKeydown" tabindex="-1">
 			<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=32`" alt=""/>
-			<span class="name">{{ user.name }}</span>
+			<span class="name">{{ getUserName(user) }}</span>
 			<span class="username">@{{ getAcct(user) }}</span>
 		</li>
 	</ol>
@@ -22,6 +22,7 @@ import Vue from 'vue';
 import * as emojilib from 'emojilib';
 import contains from '../../../common/scripts/contains';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 const lib = Object.entries(emojilib.lib).filter((x: any) => {
 	return x[1].category != 'flags';
@@ -107,6 +108,7 @@ export default Vue.extend({
 	},
 	methods: {
 		getAcct,
+		getUserName,
 		exec() {
 			this.select = -1;
 			if (this.$refs.suggests) {
diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index 4ab3e46e89..9b1449daa5 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -14,7 +14,7 @@
 					tabindex="-1"
 				>
 					<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=32`" alt=""/>
-					<span class="name">{{ user.name }}</span>
+					<span class="name">{{ getUserName(user) }}</span>
 					<span class="username">@{{ getAcct(user) }}</span>
 				</li>
 			</ol>
@@ -33,7 +33,7 @@
 				<div>
 					<img class="avatar" :src="`${isMe(message) ? message.recipient.avatarUrl : message.user.avatarUrl}?thumbnail&size=64`" alt=""/>
 					<header>
-						<span class="name">{{ isMe(message) ? message.recipient.name : message.user.name }}</span>
+						<span class="name">{{ getUserName(isMe(message) ? message.recipient : message.user) }}</span>
 						<span class="username">@{{ getAcct(isMe(message) ? message.recipient : message.user) }}</span>
 						<mk-time :time="message.createdAt"/>
 					</header>
@@ -52,6 +52,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: {
@@ -94,6 +95,7 @@ export default Vue.extend({
 	},
 	methods: {
 		getAcct,
+		getUserName,
 		isMe(message) {
 			return message.userId == (this as any).os.i.id;
 		},
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index ef0c7beaad..bfb4b2bbe0 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -6,7 +6,7 @@
 		</router-link>
 		<div class="body">
 			<header>
-				<router-link class="name" :to="`/@${getAcct(post.user)}`" v-user-preview="post.user.id">{{ post.user.name }}</router-link>
+				<router-link class="name" :to="`/@${getAcct(post.user)}`" v-user-preview="post.user.id">{{ getUserName(post.user) }}</router-link>
 				<span class="username">@{{ getAcct(post.user) }}</span>
 				<div class="info">
 					<router-link class="created-at" :to="`/@${getAcct(post.user)}/${post.id}`">
@@ -25,6 +25,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -38,6 +39,7 @@ export default Vue.extend({
 	},
 	methods: {
 		getAcct,
+		getUserName,
 		fetch(cb?) {
 			this.fetching = true;
 			(this as any).api('posts', {
diff --git a/src/client/app/desktop/views/components/followers-window.vue b/src/client/app/desktop/views/components/followers-window.vue
index 623971fa33..d37ca745af 100644
--- a/src/client/app/desktop/views/components/followers-window.vue
+++ b/src/client/app/desktop/views/components/followers-window.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-window width="400px" height="550px" @closed="$destroy">
 	<span slot="header" :class="$style.header">
-		<img :src="`${user.avatarUrl}?thumbnail&size=64`" alt=""/>{{ user.name }}のフォロワー
+		<img :src="`${user.avatarUrl}?thumbnail&size=64`" alt=""/>{{ name }}のフォロワー
 	</span>
 	<mk-followers :user="user"/>
 </mk-window>
@@ -9,8 +9,15 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getUserName from '../../../../../renderers/get-user-name';
+
 export default Vue.extend({
-	props: ['user']
+	props: ['user'],
+	computed {
+		name() {
+			return getUserName(this.user);
+		}
+	}
 });
 </script>
 
diff --git a/src/client/app/desktop/views/components/following-window.vue b/src/client/app/desktop/views/components/following-window.vue
index 612847b386..cbd8ec5f94 100644
--- a/src/client/app/desktop/views/components/following-window.vue
+++ b/src/client/app/desktop/views/components/following-window.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-window width="400px" height="550px" @closed="$destroy">
 	<span slot="header" :class="$style.header">
-		<img :src="`${user.avatarUrl}?thumbnail&size=64`" alt=""/>{{ user.name }}のフォロー
+		<img :src="`${user.avatarUrl}?thumbnail&size=64`" alt=""/>{{ name }}のフォロー
 	</span>
 	<mk-following :user="user"/>
 </mk-window>
@@ -9,8 +9,15 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getUserName from '../../../../../renderers/get-user-name';
+
 export default Vue.extend({
-	props: ['user']
+	props: ['user'],
+	computed: {
+		name() {
+			return getUserName(this.user);
+		}
+	}
 });
 </script>
 
diff --git a/src/client/app/desktop/views/components/friends-maker.vue b/src/client/app/desktop/views/components/friends-maker.vue
index 351e9e1c5c..acc4542d95 100644
--- a/src/client/app/desktop/views/components/friends-maker.vue
+++ b/src/client/app/desktop/views/components/friends-maker.vue
@@ -7,7 +7,7 @@
 				<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="user.id"/>
 			</router-link>
 			<div class="body">
-				<router-link class="name" :to="`/@${getAcct(user)}`" v-user-preview="user.id">{{ user.name }}</router-link>
+				<router-link class="name" :to="`/@${getAcct(user)}`" v-user-preview="user.id">{{ getUserName(user) }}</router-link>
 				<p class="username">@{{ getAcct(user) }}</p>
 			</div>
 			<mk-follow-button :user="user"/>
@@ -23,6 +23,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -38,6 +39,7 @@ export default Vue.extend({
 	},
 	methods: {
 		getAcct,
+		getUserName,
 		fetch() {
 			this.fetching = true;
 			this.users = [];
diff --git a/src/client/app/desktop/views/components/messaging-room-window.vue b/src/client/app/desktop/views/components/messaging-room-window.vue
index f29f9b74e7..7f8c35c2f8 100644
--- a/src/client/app/desktop/views/components/messaging-room-window.vue
+++ b/src/client/app/desktop/views/components/messaging-room-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="$destroy">
-	<span slot="header" :class="$style.header">%fa:comments%メッセージ: {{ user.name }}</span>
+	<span slot="header" :class="$style.header">%fa:comments%メッセージ: {{ name }}</span>
 	<mk-messaging-room :user="user" :class="$style.content"/>
 </mk-window>
 </template>
@@ -9,10 +9,14 @@
 import Vue from 'vue';
 import { url } from '../../../config';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['user'],
 	computed: {
+		name(): string {
+			return getUserName(this.user);
+		},
 		popout(): string {
 			return `${url}/i/messaging/${getAcct(this.user)}`;
 		}
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index c5ab284df9..d8b8eab212 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -11,7 +11,7 @@
 					<div class="text">
 						<p>
 							<mk-reaction-icon :reaction="notification.reaction"/>
-							<router-link :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">{{ notification.user.name }}</router-link>
+							<router-link :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">{{ getUserName(notification.user) }}</router-link>
 						</p>
 						<router-link class="post-ref" :to="`/@${getAcct(notification.post.user)}/${notification.post.id}`">
 							%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
@@ -24,7 +24,7 @@
 					</router-link>
 					<div class="text">
 						<p>%fa:retweet%
-							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">{{ notification.post.user.name }}</router-link>
+							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">{{ getUserName(notification.post.user) }}</router-link>
 						</p>
 						<router-link class="post-ref" :to="`/@${getAcct(notification.post.user)}/${notification.post.id}`">
 							%fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right%
@@ -37,7 +37,7 @@
 					</router-link>
 					<div class="text">
 						<p>%fa:quote-left%
-							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">{{ notification.post.user.name }}</router-link>
+							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">{{ getUserName(notification.post.user) }}</router-link>
 						</p>
 						<router-link class="post-preview" :to="`/@${getAcct(notification.post.user)}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
 					</div>
@@ -48,7 +48,7 @@
 					</router-link>
 					<div class="text">
 						<p>%fa:user-plus%
-							<router-link :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">{{ notification.user.name }}</router-link>
+							<router-link :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">{{ getUserName(notification.user) }}</router-link>
 						</p>
 					</div>
 				</template>
@@ -58,7 +58,7 @@
 					</router-link>
 					<div class="text">
 						<p>%fa:reply%
-							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">{{ notification.post.user.name }}</router-link>
+							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">{{ getUserName(notification.post.user) }}</router-link>
 						</p>
 						<router-link class="post-preview" :to="`/@${getAcct(notification.post.user)}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
 					</div>
@@ -69,7 +69,7 @@
 					</router-link>
 					<div class="text">
 						<p>%fa:at%
-							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">{{ notification.post.user.name }}</router-link>
+							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">{{ getUserName(notification.post.user) }}</router-link>
 						</p>
 						<a class="post-preview" :href="`/@${getAcct(notification.post.user)}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a>
 					</div>
@@ -79,7 +79,7 @@
 						<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
-						<p>%fa:chart-pie%<a :href="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">{{ notification.user.name }}</a></p>
+						<p>%fa:chart-pie%<a :href="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">{{ getUserName(notification.user) }}</a></p>
 						<router-link class="post-ref" :to="`/@${getAcct(notification.post.user)}/${notification.post.id}`">
 							%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
 						</router-link>
@@ -104,6 +104,7 @@
 import Vue from 'vue';
 import getAcct from '../../../../../acct/render';
 import getPostSummary from '../../../../../renderers/get-post-summary';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -154,6 +155,7 @@ export default Vue.extend({
 	},
 	methods: {
 		getAcct,
+		getUserName,
 		fetchMoreNotifications() {
 			this.fetchingMoreNotifications = true;
 
diff --git a/src/client/app/desktop/views/components/post-detail.sub.vue b/src/client/app/desktop/views/components/post-detail.sub.vue
index 59bc9ce0cf..496003eb8b 100644
--- a/src/client/app/desktop/views/components/post-detail.sub.vue
+++ b/src/client/app/desktop/views/components/post-detail.sub.vue
@@ -6,7 +6,7 @@
 	<div class="main">
 		<header>
 			<div class="left">
-				<router-link class="name" :to="`/@${acct}`" v-user-preview="post.userId">{{ post.user.name }}</router-link>
+				<router-link class="name" :to="`/@${acct}`" v-user-preview="post.userId">{{ getUserName(post.user) }}</router-link>
 				<span class="username">@{{ acct }}</span>
 			</div>
 			<div class="right">
@@ -29,6 +29,7 @@
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['post'],
@@ -36,6 +37,9 @@ export default Vue.extend({
 		acct() {
 			return getAcct(this.post.user);
 		},
+		name() {
+			return getUserName(this.post.user);
+		},
 		title(): string {
 			return dateStringify(this.post.createdAt);
 		}
diff --git a/src/client/app/desktop/views/components/post-detail.vue b/src/client/app/desktop/views/components/post-detail.vue
index 8000ce2e6f..1a3c0d1b68 100644
--- a/src/client/app/desktop/views/components/post-detail.vue
+++ b/src/client/app/desktop/views/components/post-detail.vue
@@ -22,7 +22,7 @@
 				<img class="avatar" :src="`${post.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
 			</router-link>
 			%fa:retweet%
-			<router-link class="name" :href="`/@${acct}`">{{ post.user.name }}</router-link>
+			<router-link class="name" :href="`/@${acct}`">{{ getUserName(post.user) }}</router-link>
 			がRepost
 		</p>
 	</div>
@@ -31,7 +31,7 @@
 			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
 		</router-link>
 		<header>
-			<router-link class="name" :to="`/@${pAcct}`" v-user-preview="p.user.id">{{ p.user.name }}</router-link>
+			<router-link class="name" :to="`/@${pAcct}`" v-user-preview="p.user.id">{{ getUserName(p.user) }}</router-link>
 			<span class="username">@{{ pAcct }}</span>
 			<router-link class="time" :to="`/@${pAcct}/${p.id}`">
 				<mk-time :time="p.createdAt"/>
@@ -79,6 +79,7 @@
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 import parse from '../../../../../text/parse';
 
 import MkPostFormWindow from './post-form-window.vue';
@@ -133,9 +134,15 @@ export default Vue.extend({
 		acct(): string {
 			return getAcct(this.post.user);
 		},
+		name(): string {
+			return getUserName(this.post.user);
+		},
 		pAcct(): string {
 			return getAcct(this.p.user);
 		},
+		pName(): string {
+			return getUserName(this.p.user);
+		},
 		urls(): string[] {
 			if (this.p.text) {
 				const ast = parse(this.p.text);
diff --git a/src/client/app/desktop/views/components/post-preview.vue b/src/client/app/desktop/views/components/post-preview.vue
index 7129f67b39..99d9442d93 100644
--- a/src/client/app/desktop/views/components/post-preview.vue
+++ b/src/client/app/desktop/views/components/post-preview.vue
@@ -5,7 +5,7 @@
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${acct}`" v-user-preview="post.userId">{{ post.user.name }}</router-link>
+			<router-link class="name" :to="`/@${acct}`" v-user-preview="post.userId">{{ name }}</router-link>
 			<span class="username">@{{ acct }}</span>
 			<router-link class="time" :to="`/@${acct}/${post.id}`">
 				<mk-time :time="post.createdAt"/>
@@ -22,6 +22,7 @@
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['post'],
@@ -29,6 +30,9 @@ export default Vue.extend({
 		acct() {
 			return getAcct(this.post.user);
 		},
+		name() {
+			return getUserName(this.post.user);
+		},
 		title(): string {
 			return dateStringify(this.post.createdAt);
 		}
diff --git a/src/client/app/desktop/views/components/posts.post.sub.vue b/src/client/app/desktop/views/components/posts.post.sub.vue
index dffecb89cc..a9cd0a9279 100644
--- a/src/client/app/desktop/views/components/posts.post.sub.vue
+++ b/src/client/app/desktop/views/components/posts.post.sub.vue
@@ -5,7 +5,7 @@
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${acct}`" v-user-preview="post.userId">{{ post.user.name }}</router-link>
+			<router-link class="name" :to="`/@${acct}`" v-user-preview="post.userId">{{ name }}</router-link>
 			<span class="username">@{{ acct }}</span>
 			<router-link class="created-at" :to="`/@${acct}/${post.id}`">
 				<mk-time :time="post.createdAt"/>
@@ -22,6 +22,7 @@
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['post'],
@@ -29,6 +30,9 @@ export default Vue.extend({
 		acct() {
 			return getAcct(this.post.user);
 		},
+		name(): string {
+			return getUserName(this.post.user);
+		},
 		title(): string {
 			return dateStringify(this.post.createdAt);
 		}
diff --git a/src/client/app/desktop/views/components/posts.post.vue b/src/client/app/desktop/views/components/posts.post.vue
index 9a13dd6872..17fe330420 100644
--- a/src/client/app/desktop/views/components/posts.post.vue
+++ b/src/client/app/desktop/views/components/posts.post.vue
@@ -10,7 +10,7 @@
 			</router-link>
 			%fa:retweet%
 			<span>{{ '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('{')) }}</span>
-			<a class="name" :href="`/@${acct}`" v-user-preview="post.userId">{{ post.user.name }}</a>
+			<a class="name" :href="`/@${acct}`" v-user-preview="post.userId">{{ getUserName(post.user) }}</a>
 			<span>{{ '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1) }}</span>
 		</p>
 		<mk-time :time="post.createdAt"/>
@@ -86,6 +86,7 @@
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 import parse from '../../../../../text/parse';
 
 import MkPostFormWindow from './post-form-window.vue';
@@ -124,6 +125,9 @@ export default Vue.extend({
 		acct(): string {
 			return getAcct(this.p.user);
 		},
+		name(): string {
+			return getUserName(this.p.user);
+		},
 		isRepost(): boolean {
 			return (this.post.repost &&
 				this.post.text == null &&
diff --git a/src/client/app/desktop/views/components/settings.mute.vue b/src/client/app/desktop/views/components/settings.mute.vue
index c87f973faf..6bdc766538 100644
--- a/src/client/app/desktop/views/components/settings.mute.vue
+++ b/src/client/app/desktop/views/components/settings.mute.vue
@@ -5,7 +5,7 @@
 	</div>
 	<div class="users" v-if="users.length != 0">
 		<div v-for="user in users" :key="user.id">
-			<p><b>{{ user.name }}</b> @{{ getAcct(user) }}</p>
+			<p><b>{{ getUserName(user) }}</b> @{{ getAcct(user) }}</p>
 		</div>
 	</div>
 </div>
@@ -14,6 +14,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -23,7 +24,8 @@ export default Vue.extend({
 		};
 	},
 	methods: {
-		getAcct
+		getAcct,
+		getUserName
 	},
 	mounted() {
 		(this as any).api('mute/list').then(x => {
diff --git a/src/client/app/desktop/views/components/settings.profile.vue b/src/client/app/desktop/views/components/settings.profile.vue
index ba86286f87..28be48e0a8 100644
--- a/src/client/app/desktop/views/components/settings.profile.vue
+++ b/src/client/app/desktop/views/components/settings.profile.vue
@@ -42,7 +42,7 @@ export default Vue.extend({
 		};
 	},
 	created() {
-		this.name = (this as any).os.i.name;
+		this.name = (this as any).os.i.name || '';
 		this.location = (this as any).os.i.account.profile.location;
 		this.description = (this as any).os.i.description;
 		this.birthday = (this as any).os.i.account.profile.birthday;
@@ -53,7 +53,7 @@ export default Vue.extend({
 		},
 		save() {
 			(this as any).api('i/update', {
-				name: this.name,
+				name: this.name || null,
 				location: this.location || null,
 				description: this.description || null,
 				birthday: this.birthday || null
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index 448d04d261..7d93847fab 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -4,7 +4,7 @@
 	<div class="main" ref="main">
 		<div class="backdrop"></div>
 		<div class="main">
-			<p ref="welcomeback" v-if="os.isSignedIn">おかえりなさい、<b>{{ os.i.name }}</b>さん</p>
+			<p ref="welcomeback" v-if="os.isSignedIn">おかえりなさい、<b>{{ name }}</b>さん</p>
 			<div class="container" ref="mainContainer">
 				<div class="left">
 					<x-nav/>
@@ -33,7 +33,14 @@ import XNotifications from './ui.header.notifications.vue';
 import XPost from './ui.header.post.vue';
 import XClock from './ui.header.clock.vue';
 
+import getUserName from '../../../../../renderers/get-user-name';
+
 export default Vue.extend({
+	computed: {
+		name() {
+			return getUserName(this.os.i);
+		}
+	},
 	components: {
 		XNav,
 		XSearch,
diff --git a/src/client/app/desktop/views/components/users-list.item.vue b/src/client/app/desktop/views/components/users-list.item.vue
index 2d7d4dc72d..c7a132ecfb 100644
--- a/src/client/app/desktop/views/components/users-list.item.vue
+++ b/src/client/app/desktop/views/components/users-list.item.vue
@@ -5,7 +5,7 @@
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${acct}`" v-user-preview="user.id">{{ user.name }}</router-link>
+			<router-link class="name" :to="`/@${acct}`" v-user-preview="user.id">{{ name }}</router-link>
 			<span class="username">@{{ acct }}</span>
 		</header>
 		<div class="body">
@@ -20,12 +20,16 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['user'],
 	computed: {
 		acct() {
 			return getAcct(this.user);
+		},
+		name() {
+			return getUserName(this.user);
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/pages/messaging-room.vue b/src/client/app/desktop/views/pages/messaging-room.vue
index 1e61f3ce17..1cc8d8a778 100644
--- a/src/client/app/desktop/views/pages/messaging-room.vue
+++ b/src/client/app/desktop/views/pages/messaging-room.vue
@@ -8,6 +8,7 @@
 import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
 import parseAcct from '../../../../../acct/parse';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -34,7 +35,7 @@ export default Vue.extend({
 				this.user = user;
 				this.fetching = false;
 
-				document.title = 'メッセージ: ' + this.user.name;
+				document.title = 'メッセージ: ' + getUserName(this.user);
 
 				Progress.done();
 			});
diff --git a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
index 7497acd0e0..16625b6899 100644
--- a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
+++ b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
@@ -4,7 +4,7 @@
 	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.followers-you-know.loading%<mk-ellipsis/></p>
 	<div v-if="!fetching && users.length > 0">
 	<router-link v-for="user in users" :to="`/@${getAcct(user)}`" :key="user.id">
-		<img :src="`${user.avatarUrl}?thumbnail&size=64`" :alt="user.name" v-user-preview="user.id"/>
+		<img :src="`${user.avatarUrl}?thumbnail&size=64`" :alt="getUserName(user)" v-user-preview="user.id"/>
 	</router-link>
 	</div>
 	<p class="empty" v-if="!fetching && users.length == 0">%i18n:desktop.tags.mk-user.followers-you-know.no-users%</p>
@@ -14,6 +14,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../../acct/render';
+import getUserName from '../../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['user'],
@@ -24,7 +25,8 @@ export default Vue.extend({
 		};
 	},
 	method() {
-		getAcct
+		getAcct,
+		getUserName
 	},
 	mounted() {
 		(this as any).api('users/followers', {
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index d30f423d53..5c6746d5dc 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -7,7 +7,7 @@
 	<div class="container">
 		<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=150`" alt="avatar"/>
 		<div class="title">
-			<p class="name">{{ user.name }}</p>
+			<p class="name">{{ name }}</p>
 			<p class="username">@{{ acct }}</p>
 			<p class="location" v-if="user.host === null && user.account.profile.location">%fa:map-marker%{{ user.account.profile.location }}</p>
 		</div>
@@ -23,12 +23,16 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../../acct/render';
+import getUserName from '../../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['user'],
 	computed: {
 		acct() {
 			return getAcct(this.user);
+		},
+		name() {
+			return getUserName(this.user);
 		}
 	},
 	mounted() {
diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
index 02ddc2421d..d07b462b59 100644
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -10,6 +10,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import parseAcct from '../../../../../../acct/parse';
+import getUserName from '../../../../../../renderers/get-user-name';
 import Progress from '../../../../common/scripts/loading';
 import XHeader from './user.header.vue';
 import XHome from './user.home.vue';
@@ -44,7 +45,7 @@ export default Vue.extend({
 				this.user = user;
 				this.fetching = false;
 				Progress.done();
-				document.title = user.name + ' | Misskey';
+				document.title = getUserName(user) + ' | Misskey';
 			});
 		}
 	}
diff --git a/src/client/app/desktop/views/widgets/channel.channel.post.vue b/src/client/app/desktop/views/widgets/channel.channel.post.vue
index e10e9c4f76..fa6d8c34a5 100644
--- a/src/client/app/desktop/views/widgets/channel.channel.post.vue
+++ b/src/client/app/desktop/views/widgets/channel.channel.post.vue
@@ -2,7 +2,7 @@
 <div class="post">
 	<header>
 		<a class="index" @click="reply">{{ post.index }}:</a>
-		<router-link class="name" :to="`/@${acct}`" v-user-preview="post.user.id"><b>{{ post.user.name }}</b></router-link>
+		<router-link class="name" :to="`/@${acct}`" v-user-preview="post.user.id"><b>{{ name }}</b></router-link>
 		<span>ID:<i>{{ acct }}</i></span>
 	</header>
 	<div>
@@ -20,12 +20,16 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['post'],
 	computed: {
 		acct() {
 			return getAcct(this.post.user);
+		},
+		name() {
+			return getUserName(this.post.user);
 		}
 	},
 	methods: {
diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue
index 83cd67b50c..98e42222ec 100644
--- a/src/client/app/desktop/views/widgets/profile.vue
+++ b/src/client/app/desktop/views/widgets/profile.vue
@@ -15,19 +15,26 @@
 		title="クリックでアバター編集"
 		v-user-preview="os.i.id"
 	/>
-	<router-link class="name" :to="`/@${os.i.username}`">{{ os.i.name }}</router-link>
+	<router-link class="name" :to="`/@${os.i.username}`">{{ name }}</router-link>
 	<p class="username">@{{ os.i.username }}</p>
 </div>
 </template>
 
 <script lang="ts">
 import define from '../../../common/define-widget';
+import getUserName from '../../../../../renderers/get-user-name';
+
 export default define({
 	name: 'profile',
 	props: () => ({
 		design: 0
 	})
 }).extend({
+	computed: {
+		name() {
+			return getUserName(this.os.i);
+		}
+	},
 	methods: {
 		func() {
 			if (this.props.design == 2) {
diff --git a/src/client/app/desktop/views/widgets/users.vue b/src/client/app/desktop/views/widgets/users.vue
index 6f6a101577..a5dabb68fc 100644
--- a/src/client/app/desktop/views/widgets/users.vue
+++ b/src/client/app/desktop/views/widgets/users.vue
@@ -11,7 +11,7 @@
 				<img class="avatar" :src="`${_user.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="_user.id"/>
 			</router-link>
 			<div class="body">
-				<router-link class="name" :to="`/@${getAcct(_user)}`" v-user-preview="_user.id">{{ _user.name }}</router-link>
+				<router-link class="name" :to="`/@${getAcct(_user)}`" v-user-preview="_user.id">{{ getUserName(_user) }}</router-link>
 				<p class="username">@{{ getAcct(_user) }}</p>
 			</div>
 			<mk-follow-button :user="_user"/>
@@ -24,6 +24,7 @@
 <script lang="ts">
 import define from '../../../common/define-widget';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 const limit = 3;
 
@@ -45,6 +46,7 @@ export default define({
 	},
 	methods: {
 		getAcct,
+		getUserName,
 		func() {
 			this.props.compact = !this.props.compact;
 		},
diff --git a/src/client/app/mobile/views/components/notification-preview.vue b/src/client/app/mobile/views/components/notification-preview.vue
index 77abd3c0ea..0492c5d86c 100644
--- a/src/client/app/mobile/views/components/notification-preview.vue
+++ b/src/client/app/mobile/views/components/notification-preview.vue
@@ -3,7 +3,7 @@
 	<template v-if="notification.type == 'reaction'">
 		<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
-			<p><mk-reaction-icon :reaction="notification.reaction"/>{{ notification.user.name }}</p>
+			<p><mk-reaction-icon :reaction="notification.reaction"/>{{ name }}</p>
 			<p class="post-ref">%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%</p>
 		</div>
 	</template>
@@ -11,7 +11,7 @@
 	<template v-if="notification.type == 'repost'">
 		<img class="avatar" :src="`${notification.post.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
-			<p>%fa:retweet%{{ notification.post.user.name }}</p>
+			<p>%fa:retweet%{{ posterName }}</p>
 			<p class="post-ref">%fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right%</p>
 		</div>
 	</template>
@@ -19,7 +19,7 @@
 	<template v-if="notification.type == 'quote'">
 		<img class="avatar" :src="`${notification.post.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
-			<p>%fa:quote-left%{{ notification.post.user.name }}</p>
+			<p>%fa:quote-left%{{ posterName }}</p>
 			<p class="post-preview">{{ getPostSummary(notification.post) }}</p>
 		</div>
 	</template>
@@ -27,14 +27,14 @@
 	<template v-if="notification.type == 'follow'">
 		<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
-			<p>%fa:user-plus%{{ notification.user.name }}</p>
+			<p>%fa:user-plus%{{ name }}</p>
 		</div>
 	</template>
 
 	<template v-if="notification.type == 'reply'">
 		<img class="avatar" :src="`${notification.post.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
-			<p>%fa:reply%{{ notification.post.user.name }}</p>
+			<p>%fa:reply%{{ posterName }}</p>
 			<p class="post-preview">{{ getPostSummary(notification.post) }}</p>
 		</div>
 	</template>
@@ -42,7 +42,7 @@
 	<template v-if="notification.type == 'mention'">
 		<img class="avatar" :src="`${notification.post.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
-			<p>%fa:at%{{ notification.post.user.name }}</p>
+			<p>%fa:at%{{ posterName }}</p>
 			<p class="post-preview">{{ getPostSummary(notification.post) }}</p>
 		</div>
 	</template>
@@ -50,7 +50,7 @@
 	<template v-if="notification.type == 'poll_vote'">
 		<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
-			<p>%fa:chart-pie%{{ notification.user.name }}</p>
+			<p>%fa:chart-pie%{{ name }}</p>
 			<p class="post-ref">%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%</p>
 		</div>
 	</template>
@@ -60,9 +60,18 @@
 <script lang="ts">
 import Vue from 'vue';
 import getPostSummary from '../../../../../renderers/get-post-summary';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['notification'],
+	computed: {
+		name() {
+			return getUserName(this.notification.user);
+		},
+		posterName() {
+			return getUserName(this.notification.post.user);
+		}
+	},
 	data() {
 		return {
 			getPostSummary
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index 189d7195fb..62a0e6425e 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -8,7 +8,7 @@
 		<div class="text">
 			<p>
 				<mk-reaction-icon :reaction="notification.reaction"/>
-				<router-link :to="`/@${acct}`">{{ notification.user.name }}</router-link>
+				<router-link :to="`/@${acct}`">{{ getUserName(notification.user) }}</router-link>
 			</p>
 			<router-link class="post-ref" :to="`/@${acct}/${notification.post.id}`">
 				%fa:quote-left%{{ getPostSummary(notification.post) }}
@@ -25,7 +25,7 @@
 		<div class="text">
 			<p>
 				%fa:retweet%
-				<router-link :to="`/@${acct}`">{{ notification.post.user.name }}</router-link>
+				<router-link :to="`/@${acct}`">{{ getUserName(notification.post.user) }}</router-link>
 			</p>
 			<router-link class="post-ref" :to="`/@${acct}/${notification.post.id}`">
 				%fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right%
@@ -45,7 +45,7 @@
 		<div class="text">
 			<p>
 				%fa:user-plus%
-				<router-link :to="`/@${acct}`">{{ notification.user.name }}</router-link>
+				<router-link :to="`/@${acct}`">{{ getUserName(notification.user) }}</router-link>
 			</p>
 		</div>
 	</div>
@@ -66,7 +66,7 @@
 		<div class="text">
 			<p>
 				%fa:chart-pie%
-				<router-link :to="`/@${acct}`">{{ notification.user.name }}</router-link>
+				<router-link :to="`/@${acct}`">{{ getUserName(notification.user) }}</router-link>
 			</p>
 			<router-link class="post-ref" :to="`/@${acct}/${notification.post.id}`">
 				%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
@@ -80,12 +80,19 @@
 import Vue from 'vue';
 import getPostSummary from '../../../../../renderers/get-post-summary';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['notification'],
 	computed: {
 		acct() {
 			return getAcct(this.notification.user);
+		},
+		name() {
+			return getUserName(this.notification.user);
+		},
+		posterName() {
+ 			return getUserName(this.notification.post.user);
 		}
 	},
 	data() {
diff --git a/src/client/app/mobile/views/components/post-card.vue b/src/client/app/mobile/views/components/post-card.vue
index 38d4522d26..68a42ef249 100644
--- a/src/client/app/mobile/views/components/post-card.vue
+++ b/src/client/app/mobile/views/components/post-card.vue
@@ -2,7 +2,7 @@
 <div class="mk-post-card">
 	<a :href="`/@${acct}/${post.id}`">
 		<header>
-			<img :src="`${acct}?thumbnail&size=64`" alt="avatar"/><h3>{{ post.user.name }}</h3>
+			<img :src="`${acct}?thumbnail&size=64`" alt="avatar"/><h3>{{ name }}</h3>
 		</header>
 		<div>
 			{{ text }}
@@ -16,6 +16,7 @@
 import Vue from 'vue';
 import summary from '../../../../../renderers/get-post-summary';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['post'],
@@ -23,6 +24,9 @@ export default Vue.extend({
 		acct() {
 			return getAcct(this.post.user);
 		},
+		name() {
+			return getUserName(this.post.user);
+		},
 		text(): string {
 			return summary(this.post);
 		}
diff --git a/src/client/app/mobile/views/components/post-detail.sub.vue b/src/client/app/mobile/views/components/post-detail.sub.vue
index 7ff9f1aabd..98d6a14cac 100644
--- a/src/client/app/mobile/views/components/post-detail.sub.vue
+++ b/src/client/app/mobile/views/components/post-detail.sub.vue
@@ -5,7 +5,7 @@
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${acct}`">{{ post.user.name }}</router-link>
+			<router-link class="name" :to="`/@${acct}`">{{ getUserName(post.user) }}</router-link>
 			<span class="username">@{{ acct }}</span>
 			<router-link class="time" :to="`/@${acct}/${post.id}`">
 				<mk-time :time="post.createdAt"/>
@@ -21,12 +21,16 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['post'],
 	computed: {
 		acct() {
 			return getAcct(this.post.user);
+		},
+		name() {
+			return getUserName(this.post.user);
 		}
 	}
 });
diff --git a/src/client/app/mobile/views/components/post-detail.vue b/src/client/app/mobile/views/components/post-detail.vue
index ed394acd36..0226ce081a 100644
--- a/src/client/app/mobile/views/components/post-detail.vue
+++ b/src/client/app/mobile/views/components/post-detail.vue
@@ -22,7 +22,7 @@
 			</router-link>
 			%fa:retweet%
 			<router-link class="name" :to="`/@${acct}`">
-				{{ post.user.name }}
+				{{ name }}
 			</router-link>
 			がRepost
 		</p>
@@ -33,7 +33,7 @@
 				<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 			</router-link>
 			<div>
-				<router-link class="name" :to="`/@${pAcct}`">{{ p.user.name }}</router-link>
+				<router-link class="name" :to="`/@${pAcct}`">{{ pName }}</router-link>
 				<span class="username">@{{ pAcct }}</span>
 			</div>
 		</header>
@@ -81,6 +81,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 import parse from '../../../../../text/parse';
 
 import MkPostMenu from '../../../common/views/components/post-menu.vue';
@@ -114,9 +115,15 @@ export default Vue.extend({
 		acct(): string {
 			return getAcct(this.post.user);
 		},
+		name(): string {
+			return getUserName(this.post.user);
+		},
 		pAcct(): string {
 			return getAcct(this.p.user);
 		},
+		pName(): string {
+			return getUserName(this.p.user);
+		},
 		isRepost(): boolean {
 			return (this.post.repost &&
 				this.post.text == null &&
diff --git a/src/client/app/mobile/views/components/post-preview.vue b/src/client/app/mobile/views/components/post-preview.vue
index 81b0c22bfb..96bd4d5c15 100644
--- a/src/client/app/mobile/views/components/post-preview.vue
+++ b/src/client/app/mobile/views/components/post-preview.vue
@@ -5,7 +5,7 @@
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${acct}`">{{ post.user.name }}</router-link>
+			<router-link class="name" :to="`/@${acct}`">{{ name }}</router-link>
 			<span class="username">@{{ acct }}</span>
 			<router-link class="time" :to="`/@${acct}/${post.id}`">
 				<mk-time :time="post.createdAt"/>
@@ -21,12 +21,16 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['post'],
 	computed: {
 		acct() {
 			return getAcct(this.post.user);
+		},
+		name() {
+			return getUserName(this.post.user);
 		}
 	}
 });
diff --git a/src/client/app/mobile/views/components/post.sub.vue b/src/client/app/mobile/views/components/post.sub.vue
index 85ddb91880..909d5cb597 100644
--- a/src/client/app/mobile/views/components/post.sub.vue
+++ b/src/client/app/mobile/views/components/post.sub.vue
@@ -5,7 +5,7 @@
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${acct}`">{{ post.user.name }}</router-link>
+			<router-link class="name" :to="`/@${acct}`">{{ getUserName(post.user) }}</router-link>
 			<span class="username">@{{ acct }}</span>
 			<router-link class="created-at" :to="`/@${acct}/${post.id}`">
 				<mk-time :time="post.createdAt"/>
@@ -21,12 +21,16 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['post'],
 	computed: {
 		acct() {
 			return getAcct(this.post.user);
+		},
+		name() {
+			return getUserName(this.post.user);
 		}
 	}
 });
diff --git a/src/client/app/mobile/views/components/post.vue b/src/client/app/mobile/views/components/post.vue
index 1454bc939f..eee1e80fd3 100644
--- a/src/client/app/mobile/views/components/post.vue
+++ b/src/client/app/mobile/views/components/post.vue
@@ -10,7 +10,7 @@
 			</router-link>
 			%fa:retweet%
 			<span>{{ '%i18n:mobile.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:mobile.tags.mk-timeline-post.reposted-by%'.indexOf('{')) }}</span>
-			<router-link class="name" :to="`/@${acct}`">{{ post.user.name }}</router-link>
+			<router-link class="name" :to="`/@${acct}`">{{ name }}</router-link>
 			<span>{{ '%i18n:mobile.tags.mk-timeline-post.reposted-by%'.substr('%i18n:mobile.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1) }}</span>
 		</p>
 		<mk-time :time="post.createdAt"/>
@@ -21,7 +21,7 @@
 		</router-link>
 		<div class="main">
 			<header>
-				<router-link class="name" :to="`/@${pAcct}`">{{ p.user.name }}</router-link>
+				<router-link class="name" :to="`/@${pAcct}`">{{ pName }}</router-link>
 				<span class="is-bot" v-if="p.user.host === null && p.user.account.isBot">bot</span>
 				<span class="username">@{{ pAcct }}</span>
 				<div class="info">
@@ -78,6 +78,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 import parse from '../../../../../text/parse';
 
 import MkPostMenu from '../../../common/views/components/post-menu.vue';
@@ -102,9 +103,15 @@ export default Vue.extend({
 		acct(): string {
 			return getAcct(this.post.user);
 		},
+		name(): string {
+			return getUserName(this.post.user);
+		},
 		pAcct(): string {
 			return getAcct(this.p.user);
 		},
+		pName(): string {
+			return getUserName(this.p.user);
+		},
 		isRepost(): boolean {
 			return (this.post.repost &&
 				this.post.text == null &&
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index 2bf47a90a9..fd4f31fd98 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -3,7 +3,7 @@
 	<mk-special-message/>
 	<div class="main" ref="main">
 		<div class="backdrop"></div>
-		<p ref="welcomeback" v-if="os.isSignedIn">おかえりなさい、<b>{{ os.i.name }}</b>さん</p>
+		<p ref="welcomeback" v-if="os.isSignedIn">おかえりなさい、<b>{{ name }}</b>さん</p>
 		<div class="content" ref="mainContainer">
 			<button class="nav" @click="$parent.isDrawerOpening = true">%fa:bars%</button>
 			<template v-if="hasUnreadNotifications || hasUnreadMessagingMessages || hasGameInvitations">%fa:circle%</template>
@@ -19,9 +19,15 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as anime from 'animejs';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['func'],
+	computed: {
+		name() {
+			return getUserName(this.os.i);
+		}
+	},
 	data() {
 		return {
 			hasUnreadNotifications: false,
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index a923774a73..61dd8ca9de 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -11,7 +11,7 @@
 		<div class="body" v-if="isOpen">
 			<router-link class="me" v-if="os.isSignedIn" :to="`/@${os.i.username}`">
 				<img class="avatar" :src="`${os.i.avatarUrl}?thumbnail&size=128`" alt="avatar"/>
-				<p class="name">{{ os.i.name }}</p>
+				<p class="name">{{ name }}</p>
 			</router-link>
 			<div class="links">
 				<ul>
@@ -40,9 +40,15 @@
 <script lang="ts">
 import Vue from 'vue';
 import { docsUrl, chUrl, lang } from '../../../config';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['isOpen'],
+	computed: {
+		name() {
+			return getUserName(this.os.i);
+		}
+	},
 	data() {
 		return {
 			hasUnreadNotifications: false,
diff --git a/src/client/app/mobile/views/components/user-card.vue b/src/client/app/mobile/views/components/user-card.vue
index 46fa3b4732..e8698a62f0 100644
--- a/src/client/app/mobile/views/components/user-card.vue
+++ b/src/client/app/mobile/views/components/user-card.vue
@@ -5,7 +5,7 @@
 			<img :src="`${user.avatarUrl}?thumbnail&size=200`" alt="avatar"/>
 		</a>
 	</header>
-	<a class="name" :href="`/@${acct}`" target="_blank">{{ user.name }}</a>
+	<a class="name" :href="`/@${acct}`" target="_blank">{{ name }}</a>
 	<p class="username">@{{ acct }}</p>
 	<mk-follow-button :user="user"/>
 </div>
@@ -14,12 +14,16 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['user'],
 	computed: {
 		acct() {
 			return getAcct(this.user);
+		},
+		name() {
+			return getUserName(this.user);
 		}
 	}
 });
diff --git a/src/client/app/mobile/views/components/user-preview.vue b/src/client/app/mobile/views/components/user-preview.vue
index 00f87e5549..72a6bcf8ad 100644
--- a/src/client/app/mobile/views/components/user-preview.vue
+++ b/src/client/app/mobile/views/components/user-preview.vue
@@ -5,7 +5,7 @@
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${acct}`">{{ user.name }}</router-link>
+			<router-link class="name" :to="`/@${acct}`">{{ name }}</router-link>
 			<span class="username">@{{ acct }}</span>
 		</header>
 		<div class="body">
@@ -18,12 +18,16 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['user'],
 	computed: {
 		acct() {
 			return getAcct(this.user);
+		},
+		name() {
+			return getUserName(this.user);
 		}
 	}
 });
diff --git a/src/client/app/mobile/views/pages/followers.vue b/src/client/app/mobile/views/pages/followers.vue
index d2e6a9aea5..f4225d556d 100644
--- a/src/client/app/mobile/views/pages/followers.vue
+++ b/src/client/app/mobile/views/pages/followers.vue
@@ -2,7 +2,7 @@
 <mk-ui>
 	<template slot="header" v-if="!fetching">
 		<img :src="`${user.avatarUrl}?thumbnail&size=64`" alt="">
-		{{ '%i18n:mobile.tags.mk-user-followers-page.followers-of%'.replace('{}', user.name) }}
+		{{ '%i18n:mobile.tags.mk-user-followers-page.followers-of%'.replace('{}', name) }}
 	</template>
 	<mk-users-list
 		v-if="!fetching"
@@ -20,6 +20,7 @@
 import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
 import parseAcct from '../../../../../acct/parse';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -28,6 +29,11 @@ export default Vue.extend({
 			user: null
 		};
 	},
+	computed: {
+		name() {
+			return getUserName(this.user);
+		}
+	},
 	watch: {
 		$route: 'fetch'
 	},
@@ -46,7 +52,7 @@ export default Vue.extend({
 				this.user = user;
 				this.fetching = false;
 
-				document.title = '%i18n:mobile.tags.mk-user-followers-page.followers-of%'.replace('{}', user.name) + ' | Misskey';
+				document.title = '%i18n:mobile.tags.mk-user-followers-page.followers-of%'.replace('{}', this.name) + ' | Misskey';
 			});
 		},
 		onLoaded() {
diff --git a/src/client/app/mobile/views/pages/following.vue b/src/client/app/mobile/views/pages/following.vue
index 3690536cf5..cc2442e476 100644
--- a/src/client/app/mobile/views/pages/following.vue
+++ b/src/client/app/mobile/views/pages/following.vue
@@ -2,7 +2,7 @@
 <mk-ui>
 	<template slot="header" v-if="!fetching">
 		<img :src="`${user.avatarUrl}?thumbnail&size=64`" alt="">
-		{{ '%i18n:mobile.tags.mk-user-following-page.following-of%'.replace('{}', user.name) }}
+		{{ '%i18n:mobile.tags.mk-user-following-page.following-of%'.replace('{}', name) }}
 	</template>
 	<mk-users-list
 		v-if="!fetching"
@@ -20,6 +20,7 @@
 import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
 import parseAcct from '../../../../../acct/parse';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -28,6 +29,11 @@ export default Vue.extend({
 			user: null
 		};
 	},
+	computed: {
+		name() {
+			return getUserName(this.user);
+		}
+	},
 	watch: {
 		$route: 'fetch'
 	},
@@ -46,7 +52,7 @@ export default Vue.extend({
 				this.user = user;
 				this.fetching = false;
 
-				document.title = '%i18n:mobile.tags.mk-user-followers-page.followers-of%'.replace('{}', user.name) + ' | Misskey';
+				document.title = '%i18n:mobile.tags.mk-user-followers-page.followers-of%'.replace('{}', this.name) + ' | Misskey';
 			});
 		},
 		onLoaded() {
diff --git a/src/client/app/mobile/views/pages/messaging-room.vue b/src/client/app/mobile/views/pages/messaging-room.vue
index 172666eea5..ae6662dc04 100644
--- a/src/client/app/mobile/views/pages/messaging-room.vue
+++ b/src/client/app/mobile/views/pages/messaging-room.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
 	<span slot="header">
-		<template v-if="user">%fa:R comments%{{ user.name }}</template>
+		<template v-if="user">%fa:R comments%{{ name }}</template>
 		<template v-else><mk-ellipsis/></template>
 	</span>
 	<mk-messaging-room v-if="!fetching" :user="user" :is-naked="true"/>
@@ -11,6 +11,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import parseAcct from '../../../../../acct/parse';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -19,6 +20,11 @@ export default Vue.extend({
 			user: null
 		};
 	},
+	computed: {
+		name() {
+			return getUserName(this.user);
+		}
+	},
 	watch: {
 		$route: 'fetch'
 	},
@@ -33,7 +39,7 @@ export default Vue.extend({
 				this.user = user;
 				this.fetching = false;
 
-				document.title = `%i18n:mobile.tags.mk-messaging-room-page.message%: ${user.name} | Misskey`;
+				document.title = `%i18n:mobile.tags.mk-messaging-room-page.message%: ${this.name} | Misskey`;
 			});
 		}
 	}
diff --git a/src/client/app/mobile/views/pages/profile-setting.vue b/src/client/app/mobile/views/pages/profile-setting.vue
index 15f9bc9b68..4a560c0272 100644
--- a/src/client/app/mobile/views/pages/profile-setting.vue
+++ b/src/client/app/mobile/views/pages/profile-setting.vue
@@ -52,7 +52,7 @@ export default Vue.extend({
 		};
 	},
 	created() {
-		this.name = (this as any).os.i.name;
+		this.name = (this as any).os.i.name || '';
 		this.location = (this as any).os.i.account.profile.location;
 		this.description = (this as any).os.i.description;
 		this.birthday = (this as any).os.i.account.profile.birthday;
@@ -94,7 +94,7 @@ export default Vue.extend({
 			this.saving = true;
 
 			(this as any).api('i/update', {
-				name: this.name,
+				name: this.name || null,
 				location: this.location || null,
 				description: this.description || null,
 				birthday: this.birthday || null
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index a945a21c5c..58a9d4e37e 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -2,7 +2,7 @@
 <mk-ui>
 	<span slot="header">%fa:cog%%i18n:mobile.tags.mk-settings-page.settings%</span>
 	<div :class="$style.content">
-		<p v-html="'%i18n:mobile.tags.mk-settings.signed-in-as%'.replace('{}', '<b>' + os.i.name + '</b>')"></p>
+		<p v-html="'%i18n:mobile.tags.mk-settings.signed-in-as%'.replace('{}', '<b>' + name + '</b>')"></p>
 		<ul>
 			<li><router-link to="./settings/profile">%fa:user%%i18n:mobile.tags.mk-settings-page.profile%%fa:angle-right%</router-link></li>
 			<li><router-link to="./settings/authorized-apps">%fa:puzzle-piece%%i18n:mobile.tags.mk-settings-page.applications%%fa:angle-right%</router-link></li>
@@ -20,6 +20,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { version, codename } from '../../../config';
+import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -28,6 +29,11 @@ export default Vue.extend({
 			codename
 		};
 	},
+	computed: {
+		name() {
+			return getUserName(this.os.i);
+		}
+	},
 	mounted() {
 		document.title = 'Misskey | %i18n:mobile.tags.mk-settings-page.settings%';
 		document.documentElement.style.background = '#313a42';
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index be696484b6..3b7b4d6c28 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header" v-if="!fetching">%fa:user% {{ user.name }}</span>
+	<span slot="header" v-if="!fetching">%fa:user% {{ user }}</span>
 	<main v-if="!fetching">
 		<header>
 			<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=1024)` : ''"></div>
@@ -12,7 +12,7 @@
 					<mk-follow-button v-if="os.isSignedIn && os.i.id != user.id" :user="user"/>
 				</div>
 				<div class="title">
-					<h1>{{ user.name }}</h1>
+					<h1>{{ user }}</h1>
 					<span class="username">@{{ acct }}</span>
 					<span class="followed" v-if="user.isFollowed">%i18n:mobile.tags.mk-user.follows-you%</span>
 				</div>
@@ -61,7 +61,7 @@
 import Vue from 'vue';
 import * as age from 's-age';
 import getAcct from '../../../../../acct/render';
-import getAcct from '../../../../../acct/parse';
+import getUserName from '../../../../../renderers/get-user-name';
 import Progress from '../../../common/scripts/loading';
 import XHome from './user/home.vue';
 
@@ -82,6 +82,9 @@ export default Vue.extend({
 		},
 		age(): number {
 			return age(this.user.account.profile.birthday);
+		},
+		name() {
+			return getUserName(this.user);
 		}
 	},
 	watch: {
@@ -102,7 +105,7 @@ export default Vue.extend({
 				this.fetching = false;
 
 				Progress.done();
-				document.title = user.name + ' | Misskey';
+				document.title = this.name + ' | Misskey';
 			});
 		}
 	}
diff --git a/src/client/app/mobile/views/pages/user/home.followers-you-know.vue b/src/client/app/mobile/views/pages/user/home.followers-you-know.vue
index ffdd9f178d..1b128e2f24 100644
--- a/src/client/app/mobile/views/pages/user/home.followers-you-know.vue
+++ b/src/client/app/mobile/views/pages/user/home.followers-you-know.vue
@@ -3,7 +3,7 @@
 	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-followers-you-know.loading%<mk-ellipsis/></p>
 	<div v-if="!fetching && users.length > 0">
 		<a v-for="user in users" :key="user.id" :href="`/@${getAcct(user)}`">
-			<img :src="`${user.avatarUrl}?thumbnail&size=64`" :alt="user.name"/>
+			<img :src="`${user.avatarUrl}?thumbnail&size=64`" :alt="getUserName(user)"/>
 		</a>
 	</div>
 	<p class="empty" v-if="!fetching && users.length == 0">%i18n:mobile.tags.mk-user-overview-followers-you-know.no-users%</p>
@@ -13,6 +13,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../../acct/render';
+import getUserName from '../../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['user'],
@@ -22,6 +23,11 @@ export default Vue.extend({
 			users: []
 		};
 	},
+	computed: {
+		name() {
+			return getUserName(this.user);
+		}
+	},
 	methods: {
 		getAcct
 	},
diff --git a/src/client/app/mobile/views/widgets/profile.vue b/src/client/app/mobile/views/widgets/profile.vue
index f1d283e45a..bd257a3ff3 100644
--- a/src/client/app/mobile/views/widgets/profile.vue
+++ b/src/client/app/mobile/views/widgets/profile.vue
@@ -8,15 +8,23 @@
 			:src="`${os.i.avatarUrl}?thumbnail&size=96`"
 			alt="avatar"
 		/>
-		<router-link :class="$style.name" :to="`/@${os.i.username}`">{{ os.i.name }}</router-link>
+		<router-link :class="$style.name" :to="`/@${os.i.username}`">{{ name }}</router-link>
 	</mk-widget-container>
 </div>
 </template>
 
 <script lang="ts">
 import define from '../../../common/define-widget';
+import getUserName from '../../../../../renderers/get-user-name';
+
 export default define({
 	name: 'profile'
+}).extend({
+	computed: {
+		name() {
+			return getUserName(this.os.i);
+		}
+	}
 });
 </script>
 
diff --git a/src/models/user.ts b/src/models/user.ts
index f817c33aa2..92091c6879 100644
--- a/src/models/user.ts
+++ b/src/models/user.ts
@@ -21,7 +21,7 @@ type IUserBase = {
 	deletedAt: Date;
 	followersCount: number;
 	followingCount: number;
-	name: string;
+	name?: string;
 	postsCount: number;
 	driveCapacity: number;
 	username: string;
@@ -99,8 +99,8 @@ export function validatePassword(password: string): boolean {
 	return typeof password == 'string' && password != '';
 }
 
-export function isValidName(name: string): boolean {
-	return typeof name == 'string' && name.length < 30 && name.trim() != '';
+export function isValidName(name?: string): boolean {
+	return name === null || (typeof name == 'string' && name.length < 30 && name.trim() != '');
 }
 
 export function isValidDescription(description: string): boolean {
diff --git a/src/othello/ai/back.ts b/src/othello/ai/back.ts
index d6704b1750..4d06ed9565 100644
--- a/src/othello/ai/back.ts
+++ b/src/othello/ai/back.ts
@@ -9,6 +9,7 @@
 import * as request from 'request-promise-native';
 import Othello, { Color } from '../core';
 import conf from '../../config';
+import getUserName from '../../renderers/get-user-name';
 
 let game;
 let form;
@@ -47,8 +48,8 @@ process.on('message', async msg => {
 		const user = game.user1Id == id ? game.user2 : game.user1;
 		const isSettai = form[0].value === 0;
 		const text = isSettai
-			? `?[${user.name}](${conf.url}/@${user.username})さんの接待を始めました！`
-			: `対局を?[${user.name}](${conf.url}/@${user.username})さんと始めました！ (強さ${form[0].value})`;
+			? `?[${getUserName(user)}](${conf.url}/@${user.username})さんの接待を始めました！`
+			: `対局を?[${getUserName(user)}](${conf.url}/@${user.username})さんと始めました！ (強さ${form[0].value})`;
 
 		const res = await request.post(`${conf.api_url}/posts/create`, {
 			json: { i,
@@ -72,15 +73,15 @@ process.on('message', async msg => {
 		const isSettai = form[0].value === 0;
 		const text = isSettai
 			? msg.body.winnerId === null
-				? `?[${user.name}](${conf.url}/@${user.username})さんに接待で引き分けました...`
+				? `?[${getUserName(user)}](${conf.url}/@${user.username})さんに接待で引き分けました...`
 				: msg.body.winnerId == id
-					? `?[${user.name}](${conf.url}/@${user.username})さんに接待で勝ってしまいました...`
-					: `?[${user.name}](${conf.url}/@${user.username})さんに接待で負けてあげました♪`
+					? `?[${getUserName(user)}](${conf.url}/@${user.username})さんに接待で勝ってしまいました...`
+					: `?[${getUserName(user)}](${conf.url}/@${user.username})さんに接待で負けてあげました♪`
 			: msg.body.winnerId === null
-				? `?[${user.name}](${conf.url}/@${user.username})さんと引き分けました～`
+				? `?[${getUserName(user)}](${conf.url}/@${user.username})さんと引き分けました～`
 				: msg.body.winnerId == id
-					? `?[${user.name}](${conf.url}/@${user.username})さんに勝ちました♪`
-					: `?[${user.name}](${conf.url}/@${user.username})さんに負けました...`;
+					? `?[${getUserName(user)}](${conf.url}/@${user.username})さんに勝ちました♪`
+					: `?[${getUserName(user)}](${conf.url}/@${user.username})さんに負けました...`;
 
 		await request.post(`${conf.api_url}/posts/create`, {
 			json: { i,
diff --git a/src/renderers/get-notification-summary.ts b/src/renderers/get-notification-summary.ts
index 03db722c84..f5e38faf99 100644
--- a/src/renderers/get-notification-summary.ts
+++ b/src/renderers/get-notification-summary.ts
@@ -1,3 +1,4 @@
+import getUserName from '../renderers/get-user-name';
 import getPostSummary from './get-post-summary';
 import getReactionEmoji from './get-reaction-emoji';
 
@@ -8,19 +9,19 @@ import getReactionEmoji from './get-reaction-emoji';
 export default function(notification: any): string {
 	switch (notification.type) {
 		case 'follow':
-			return `${notification.user.name}にフォローされました`;
+			return `${getUserName(notification.user)}にフォローされました`;
 		case 'mention':
-			return `言及されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+			return `言及されました:\n${getUserName(notification.user)}「${getPostSummary(notification.post)}」`;
 		case 'reply':
-			return `返信されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+			return `返信されました:\n${getUserName(notification.user)}「${getPostSummary(notification.post)}」`;
 		case 'repost':
-			return `Repostされました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+			return `Repostされました:\n${getUserName(notification.user)}「${getPostSummary(notification.post)}」`;
 		case 'quote':
-			return `引用されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+			return `引用されました:\n${getUserName(notification.user)}「${getPostSummary(notification.post)}」`;
 		case 'reaction':
-			return `リアクションされました:\n${notification.user.name} <${getReactionEmoji(notification.reaction)}>「${getPostSummary(notification.post)}」`;
+			return `リアクションされました:\n${getUserName(notification.user)} <${getReactionEmoji(notification.reaction)}>「${getPostSummary(notification.post)}」`;
 		case 'poll_vote':
-			return `投票されました:\n${notification.user.name}「${getPostSummary(notification.post)}」`;
+			return `投票されました:\n${getUserName(notification.user)}「${getPostSummary(notification.post)}」`;
 		default:
 			return `<不明な通知タイプ: ${notification.type}>`;
 	}
diff --git a/src/renderers/get-user-summary.ts b/src/renderers/get-user-summary.ts
index 2089871130..d002933b6d 100644
--- a/src/renderers/get-user-summary.ts
+++ b/src/renderers/get-user-summary.ts
@@ -1,12 +1,13 @@
 import { IUser, isLocalUser } from '../models/user';
 import getAcct from '../acct/render';
+import getUserName from './get-user-name';
 
 /**
  * ユーザーを表す文字列を取得します。
  * @param user ユーザー
  */
 export default function(user: IUser): string {
-	let string = `${user.name} (@${getAcct(user)})\n` +
+	let string = `${getUserName(user)} (@${getAcct(user)})\n` +
 		`${user.postsCount}投稿、${user.followingCount}フォロー、${user.followersCount}フォロワー\n`;
 
 	if (isLocalUser(user)) {
diff --git a/src/server/api/bot/core.ts b/src/server/api/bot/core.ts
index 7e80f31e5e..a44aa9d7bc 100644
--- a/src/server/api/bot/core.ts
+++ b/src/server/api/bot/core.ts
@@ -4,6 +4,7 @@ import * as bcrypt from 'bcryptjs';
 import User, { IUser, init as initUser, ILocalUser } from '../../../models/user';
 
 import getPostSummary from '../../../renderers/get-post-summary';
+import getUserName from '../../../renderers/get-user-name';
 import getUserSummary from '../../../renderers/get-user-summary';
 import parseAcct from '../../../acct/parse';
 import getNotificationSummary from '../../../renderers/get-notification-summary';
@@ -90,7 +91,7 @@ export default class BotCore extends EventEmitter {
 					'タイムラインや通知を見た後、「次」というとさらに遡ることができます。';
 
 			case 'me':
-				return this.user ? `${this.user.name}としてサインインしています。\n\n${getUserSummary(this.user)}` : 'サインインしていません';
+				return this.user ? `${getUserName(this.user)}としてサインインしています。\n\n${getUserSummary(this.user)}` : 'サインインしていません';
 
 			case 'login':
 			case 'signin':
@@ -230,7 +231,7 @@ class SigninContext extends Context {
 			if (same) {
 				this.bot.signin(this.temporaryUser);
 				this.bot.clearContext();
-				return `${this.temporaryUser.name}さん、おかえりなさい！`;
+				return `${getUserName(this.temporaryUser)}さん、おかえりなさい！`;
 			} else {
 				return `パスワードが違います... もう一度教えてください:`;
 			}
@@ -305,7 +306,7 @@ class TlContext extends Context {
 			this.emit('updated');
 
 			const text = tl
-				.map(post => `${post.user.name}\n「${getPostSummary(post)}」`)
+				.map(post => `${getUserName(post.user)}\n「${getPostSummary(post)}」`)
 				.join('\n-----\n');
 
 			return text;
diff --git a/src/server/api/bot/interfaces/line.ts b/src/server/api/bot/interfaces/line.ts
index 7847cbdeaa..1191aaf391 100644
--- a/src/server/api/bot/interfaces/line.ts
+++ b/src/server/api/bot/interfaces/line.ts
@@ -10,6 +10,7 @@ import prominence = require('prominence');
 import getAcct from '../../../../acct/render';
 import parseAcct from '../../../../acct/parse';
 import getPostSummary from '../../../../renderers/get-post-summary';
+import getUserName from '../../../../renderers/get-user-name';
 
 const redis = prominence(_redis);
 
@@ -131,7 +132,7 @@ class LineBot extends BotCore {
 			template: {
 				type: 'buttons',
 				thumbnailImageUrl: `${user.avatarUrl}?thumbnail&size=1024`,
-				title: `${user.name} (@${acct})`,
+				title: `${getUserName(user)} (@${acct})`,
 				text: user.description || '(no description)',
 				actions: actions
 			}
@@ -146,7 +147,7 @@ class LineBot extends BotCore {
 			limit: 5
 		}, this.user);
 
-		const text = `${tl[0].user.name}さんのタイムラインはこちらです:\n\n` + tl
+		const text = `${getUserName(tl[0].user)}さんのタイムラインはこちらです:\n\n` + tl
 			.map(post => getPostSummary(post))
 			.join('\n-----\n');
 
-- 
cgit v1.3.1-freya


From a1b490afa756a71b9cef4afa424575bc223bc612 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 8 Apr 2018 02:30:37 +0900
Subject: Post --> Note

Closes #1411
---
 locales/en.yml                                     |  86 +--
 locales/ja.yml                                     |  74 +--
 src/client/app/auth/views/form.vue                 |   2 +-
 src/client/app/ch/tags/channel.tag                 |  68 +--
 src/client/app/common/mios.ts                      |   4 +-
 .../app/common/scripts/compose-notification.ts     |  10 +-
 .../app/common/scripts/parse-search-query.ts       |   4 +-
 src/client/app/common/views/components/index.ts    |   4 +-
 .../views/components/messaging-room.message.vue    |   2 +-
 .../app/common/views/components/note-html.ts       | 157 ++++++
 .../app/common/views/components/note-menu.vue      | 141 +++++
 src/client/app/common/views/components/poll.vue    |   8 +-
 .../app/common/views/components/post-html.ts       | 157 ------
 .../app/common/views/components/post-menu.vue      | 141 -----
 .../common/views/components/reaction-picker.vue    |   6 +-
 .../common/views/components/reactions-viewer.vue   |   4 +-
 .../common/views/components/welcome-timeline.vue   |  26 +-
 src/client/app/desktop/api/post.ts                 |   8 +-
 src/client/app/desktop/script.ts                   |  16 +-
 .../desktop/views/components/activity.calendar.vue |   2 +-
 .../desktop/views/components/activity.chart.vue    |  16 +-
 src/client/app/desktop/views/components/index.ts   |  32 +-
 .../app/desktop/views/components/mentions.vue      |  24 +-
 .../desktop/views/components/note-detail.sub.vue   | 130 +++++
 .../app/desktop/views/components/note-detail.vue   | 448 ++++++++++++++++
 .../app/desktop/views/components/note-preview.vue  | 107 ++++
 .../desktop/views/components/notes.note.sub.vue    | 116 ++++
 .../app/desktop/views/components/notes.note.vue    | 596 +++++++++++++++++++++
 src/client/app/desktop/views/components/notes.vue  |  89 +++
 .../app/desktop/views/components/notifications.vue |  54 +-
 .../desktop/views/components/post-detail.sub.vue   | 130 -----
 .../app/desktop/views/components/post-detail.vue   |  84 +--
 .../desktop/views/components/post-form-window.vue  |   6 +-
 .../app/desktop/views/components/post-form.vue     |  32 +-
 .../app/desktop/views/components/post-preview.vue  | 107 ----
 .../desktop/views/components/posts.post.sub.vue    | 116 ----
 .../app/desktop/views/components/posts.post.vue    | 104 ++--
 src/client/app/desktop/views/components/posts.vue  |  89 ---
 .../views/components/renote-form-window.vue        |  42 ++
 .../app/desktop/views/components/renote-form.vue   | 131 +++++
 .../views/components/repost-form-window.vue        |   6 +-
 .../app/desktop/views/components/repost-form.vue   |  26 +-
 .../desktop/views/components/sub-note-content.vue  |  44 ++
 .../desktop/views/components/sub-post-content.vue  |  44 --
 .../app/desktop/views/components/timeline.vue      |  42 +-
 .../desktop/views/components/ui.header.post.vue    |   6 +-
 .../app/desktop/views/components/user-preview.vue  |   2 +-
 src/client/app/desktop/views/pages/home.vue        |  12 +-
 src/client/app/desktop/views/pages/note.vue        |  67 +++
 src/client/app/desktop/views/pages/post.vue        |  67 ---
 src/client/app/desktop/views/pages/search.vue      |  32 +-
 .../app/desktop/views/pages/user/user.home.vue     |   2 +-
 .../app/desktop/views/pages/user/user.photos.vue   |   8 +-
 .../app/desktop/views/pages/user/user.profile.vue  |   2 +-
 .../app/desktop/views/pages/user/user.timeline.vue |  24 +-
 .../desktop/views/widgets/channel.channel.form.vue |   4 +-
 .../desktop/views/widgets/channel.channel.note.vue |  75 +++
 .../desktop/views/widgets/channel.channel.post.vue |  75 ---
 .../app/desktop/views/widgets/channel.channel.vue  |  36 +-
 src/client/app/desktop/views/widgets/polls.vue     |   8 +-
 src/client/app/desktop/views/widgets/post-form.vue |   4 +-
 src/client/app/desktop/views/widgets/trends.vue    |  24 +-
 src/client/app/dev/views/new-app.vue               |   2 +-
 src/client/app/mobile/api/post.ts                  |  20 +-
 src/client/app/mobile/script.ts                    |   4 +-
 .../app/mobile/views/components/activity.vue       |  16 +-
 src/client/app/mobile/views/components/index.ts    |  24 +-
 .../app/mobile/views/components/note-card.vue      |  93 ++++
 .../mobile/views/components/note-detail.sub.vue    | 113 ++++
 .../app/mobile/views/components/note-detail.vue    | 462 ++++++++++++++++
 .../app/mobile/views/components/note-preview.vue   | 110 ++++
 .../app/mobile/views/components/note.sub.vue       | 119 ++++
 src/client/app/mobile/views/components/note.vue    | 540 +++++++++++++++++++
 src/client/app/mobile/views/components/notes.vue   | 111 ++++
 .../views/components/notification-preview.vue      |  42 +-
 .../app/mobile/views/components/notification.vue   |  38 +-
 .../app/mobile/views/components/post-card.vue      |  93 ----
 .../mobile/views/components/post-detail.sub.vue    | 113 ----
 .../app/mobile/views/components/post-detail.vue    |  80 +--
 .../app/mobile/views/components/post-form.vue      |  10 +-
 .../app/mobile/views/components/post-preview.vue   | 110 ----
 .../app/mobile/views/components/post.sub.vue       | 119 ----
 src/client/app/mobile/views/components/post.vue    |  90 ++--
 src/client/app/mobile/views/components/posts.vue   | 111 ----
 .../mobile/views/components/sub-note-content.vue   |  43 ++
 .../mobile/views/components/sub-post-content.vue   |  43 --
 .../app/mobile/views/components/timeline.vue       |  38 +-
 .../app/mobile/views/components/user-timeline.vue  |  32 +-
 src/client/app/mobile/views/pages/home.vue         |  12 +-
 src/client/app/mobile/views/pages/note.vue         |  85 +++
 src/client/app/mobile/views/pages/post.vue         |  85 ---
 src/client/app/mobile/views/pages/search.vue       |  30 +-
 src/client/app/mobile/views/pages/user.vue         |   8 +-
 .../app/mobile/views/pages/user/home.notes.vue     |  57 ++
 .../app/mobile/views/pages/user/home.photos.vue    |  12 +-
 .../app/mobile/views/pages/user/home.posts.vue     |  57 --
 src/client/app/mobile/views/pages/user/home.vue    |  14 +-
 src/client/app/stats/tags/index.tag                |  28 +-
 src/client/docs/api/endpoints/notes/create.yaml    |  59 ++
 src/client/docs/api/endpoints/notes/timeline.yaml  |  32 ++
 src/client/docs/api/endpoints/posts/create.yaml    |  59 --
 src/client/docs/api/endpoints/posts/timeline.yaml  |  32 --
 src/client/docs/api/entities/note.yaml             | 174 ++++++
 src/client/docs/api/entities/post.yaml             |  40 +-
 src/client/docs/api/entities/user.yaml             |  16 +-
 src/client/docs/mute.ja.pug                        |   2 +-
 src/client/docs/search.ja.pug                      |  16 +-
 src/models/favorite.ts                             |   2 +-
 src/models/note-reaction.ts                        |  53 ++
 src/models/note-watching.ts                        |  13 +
 src/models/note.ts                                 | 241 +++++++++
 src/models/notification.ts                         |  14 +-
 src/models/poll-vote.ts                            |   2 +-
 src/models/post-reaction.ts                        |  53 --
 src/models/post-watching.ts                        |  13 -
 src/models/post.ts                                 | 241 ---------
 src/models/user.ts                                 |  18 +-
 src/othello/ai/back.ts                             |  10 +-
 src/othello/ai/front.ts                            |  18 +-
 src/publishers/stream.ts                           |   6 +-
 src/queue/processors/http/report-github-failure.ts |   4 +-
 src/remote/activitypub/act/create/note.ts          |  22 +-
 src/remote/activitypub/act/delete/index.ts         |   6 +-
 src/remote/activitypub/act/delete/note.ts          |  12 +-
 src/remote/activitypub/act/like.ts                 |  12 +-
 src/remote/activitypub/renderer/like.ts            |   4 +-
 src/remote/activitypub/renderer/note.ts            |  28 +-
 src/remote/activitypub/resolve-person.ts           |   4 +-
 src/renderers/get-note-summary.ts                  |  45 ++
 src/renderers/get-notification-summary.ts          |  16 +-
 src/renderers/get-post-summary.ts                  |  45 --
 src/renderers/get-user-summary.ts                  |   2 +-
 src/server/activitypub/index.ts                    |   4 +-
 src/server/activitypub/note.ts                     |  43 ++
 src/server/activitypub/outbox.ts                   |   8 +-
 src/server/activitypub/post.ts                     |  43 --
 src/server/api/bot/core.ts                         |  22 +-
 src/server/api/bot/interfaces/line.ts              |  18 +-
 src/server/api/endpoints.ts                        |  54 +-
 .../api/endpoints/aggregation/notes/reaction.ts    |  76 +++
 .../api/endpoints/aggregation/notes/reactions.ts   |  72 +++
 .../api/endpoints/aggregation/notes/reply.ts       |  75 +++
 .../api/endpoints/aggregation/notes/repost.ts      |  75 +++
 src/server/api/endpoints/aggregation/posts.ts      |  22 +-
 .../api/endpoints/aggregation/posts/reaction.ts    |  76 ---
 .../api/endpoints/aggregation/posts/reactions.ts   |  72 ---
 .../api/endpoints/aggregation/posts/reply.ts       |  75 ---
 .../api/endpoints/aggregation/posts/repost.ts      |  75 ---
 .../api/endpoints/aggregation/users/activity.ts    |  20 +-
 src/server/api/endpoints/aggregation/users/post.ts |  22 +-
 .../api/endpoints/aggregation/users/reaction.ts    |   2 +-
 src/server/api/endpoints/app/create.ts             |   2 +-
 src/server/api/endpoints/app/name_id/available.ts  |   2 +-
 src/server/api/endpoints/app/show.ts               |   2 +-
 src/server/api/endpoints/auth/accept.ts            |   2 +-
 src/server/api/endpoints/auth/session/generate.ts  |   2 +-
 src/server/api/endpoints/auth/session/show.ts      |   2 +-
 src/server/api/endpoints/auth/session/userkey.ts   |   2 +-
 src/server/api/endpoints/channels/posts.ts         |  10 +-
 src/server/api/endpoints/i/favorites.ts            |   4 +-
 src/server/api/endpoints/i/pin.ts                  |  20 +-
 src/server/api/endpoints/meta.ts                   |   2 +-
 src/server/api/endpoints/notes/context.ts          |  63 +++
 src/server/api/endpoints/notes/create.ts           | 251 +++++++++
 src/server/api/endpoints/notes/favorites/create.ts |  48 ++
 src/server/api/endpoints/notes/favorites/delete.ts |  46 ++
 src/server/api/endpoints/notes/mentions.ts         |  78 +++
 .../api/endpoints/notes/polls/recommendation.ts    |  59 ++
 src/server/api/endpoints/notes/polls/vote.ts       | 115 ++++
 src/server/api/endpoints/notes/reactions.ts        |  57 ++
 src/server/api/endpoints/notes/reactions/create.ts |  47 ++
 src/server/api/endpoints/notes/reactions/delete.ts |  60 +++
 src/server/api/endpoints/notes/replies.ts          |  53 ++
 src/server/api/endpoints/notes/reposts.ts          |  73 +++
 src/server/api/endpoints/notes/search.ts           | 364 +++++++++++++
 src/server/api/endpoints/notes/show.ts             |  32 ++
 src/server/api/endpoints/notes/timeline.ts         | 132 +++++
 src/server/api/endpoints/notes/trend.ts            |  79 +++
 src/server/api/endpoints/posts.ts                  |  18 +-
 src/server/api/endpoints/posts/context.ts          |  63 ---
 src/server/api/endpoints/posts/create.ts           | 108 ++--
 src/server/api/endpoints/posts/favorites/create.ts |  48 --
 src/server/api/endpoints/posts/favorites/delete.ts |  46 --
 src/server/api/endpoints/posts/mentions.ts         |  78 ---
 .../api/endpoints/posts/polls/recommendation.ts    |  59 --
 src/server/api/endpoints/posts/polls/vote.ts       | 115 ----
 src/server/api/endpoints/posts/reactions.ts        |  57 --
 src/server/api/endpoints/posts/reactions/create.ts |  47 --
 src/server/api/endpoints/posts/reactions/delete.ts |  60 ---
 src/server/api/endpoints/posts/replies.ts          |  53 --
 src/server/api/endpoints/posts/reposts.ts          |  73 ---
 src/server/api/endpoints/posts/search.ts           | 364 -------------
 src/server/api/endpoints/posts/show.ts             |  32 --
 src/server/api/endpoints/posts/timeline.ts         | 132 -----
 src/server/api/endpoints/posts/trend.ts            |  79 ---
 src/server/api/endpoints/stats.ts                  |  12 +-
 .../users/get_frequently_replied_users.ts          |  18 +-
 src/server/api/endpoints/users/posts.ts            |  10 +-
 src/server/api/private/signup.ts                   |   2 +-
 src/server/api/service/github.ts                   |   2 +-
 src/server/api/stream/home.ts                      |  24 +-
 src/services/note/create.ts                        | 357 ++++++++++++
 src/services/note/reaction/create.ts               |  94 ++++
 src/services/note/watch.ts                         |  26 +
 src/services/post/create.ts                        | 358 -------------
 src/services/post/reaction/create.ts               |  94 ----
 src/services/post/watch.ts                         |  26 -
 tools/migration/nighthike/11.js                    |  35 ++
 208 files changed, 7945 insertions(+), 5267 deletions(-)
 create mode 100644 src/client/app/common/views/components/note-html.ts
 create mode 100644 src/client/app/common/views/components/note-menu.vue
 delete mode 100644 src/client/app/common/views/components/post-html.ts
 delete mode 100644 src/client/app/common/views/components/post-menu.vue
 create mode 100644 src/client/app/desktop/views/components/note-detail.sub.vue
 create mode 100644 src/client/app/desktop/views/components/note-detail.vue
 create mode 100644 src/client/app/desktop/views/components/note-preview.vue
 create mode 100644 src/client/app/desktop/views/components/notes.note.sub.vue
 create mode 100644 src/client/app/desktop/views/components/notes.note.vue
 create mode 100644 src/client/app/desktop/views/components/notes.vue
 delete mode 100644 src/client/app/desktop/views/components/post-detail.sub.vue
 delete mode 100644 src/client/app/desktop/views/components/post-preview.vue
 delete mode 100644 src/client/app/desktop/views/components/posts.post.sub.vue
 delete mode 100644 src/client/app/desktop/views/components/posts.vue
 create mode 100644 src/client/app/desktop/views/components/renote-form-window.vue
 create mode 100644 src/client/app/desktop/views/components/renote-form.vue
 create mode 100644 src/client/app/desktop/views/components/sub-note-content.vue
 delete mode 100644 src/client/app/desktop/views/components/sub-post-content.vue
 create mode 100644 src/client/app/desktop/views/pages/note.vue
 delete mode 100644 src/client/app/desktop/views/pages/post.vue
 create mode 100644 src/client/app/desktop/views/widgets/channel.channel.note.vue
 delete mode 100644 src/client/app/desktop/views/widgets/channel.channel.post.vue
 create mode 100644 src/client/app/mobile/views/components/note-card.vue
 create mode 100644 src/client/app/mobile/views/components/note-detail.sub.vue
 create mode 100644 src/client/app/mobile/views/components/note-detail.vue
 create mode 100644 src/client/app/mobile/views/components/note-preview.vue
 create mode 100644 src/client/app/mobile/views/components/note.sub.vue
 create mode 100644 src/client/app/mobile/views/components/note.vue
 create mode 100644 src/client/app/mobile/views/components/notes.vue
 delete mode 100644 src/client/app/mobile/views/components/post-card.vue
 delete mode 100644 src/client/app/mobile/views/components/post-detail.sub.vue
 delete mode 100644 src/client/app/mobile/views/components/post-preview.vue
 delete mode 100644 src/client/app/mobile/views/components/post.sub.vue
 delete mode 100644 src/client/app/mobile/views/components/posts.vue
 create mode 100644 src/client/app/mobile/views/components/sub-note-content.vue
 delete mode 100644 src/client/app/mobile/views/components/sub-post-content.vue
 create mode 100644 src/client/app/mobile/views/pages/note.vue
 delete mode 100644 src/client/app/mobile/views/pages/post.vue
 create mode 100644 src/client/app/mobile/views/pages/user/home.notes.vue
 delete mode 100644 src/client/app/mobile/views/pages/user/home.posts.vue
 create mode 100644 src/client/docs/api/endpoints/notes/create.yaml
 create mode 100644 src/client/docs/api/endpoints/notes/timeline.yaml
 delete mode 100644 src/client/docs/api/endpoints/posts/create.yaml
 delete mode 100644 src/client/docs/api/endpoints/posts/timeline.yaml
 create mode 100644 src/client/docs/api/entities/note.yaml
 create mode 100644 src/models/note-reaction.ts
 create mode 100644 src/models/note-watching.ts
 create mode 100644 src/models/note.ts
 delete mode 100644 src/models/post-reaction.ts
 delete mode 100644 src/models/post-watching.ts
 delete mode 100644 src/models/post.ts
 create mode 100644 src/renderers/get-note-summary.ts
 delete mode 100644 src/renderers/get-post-summary.ts
 create mode 100644 src/server/activitypub/note.ts
 delete mode 100644 src/server/activitypub/post.ts
 create mode 100644 src/server/api/endpoints/aggregation/notes/reaction.ts
 create mode 100644 src/server/api/endpoints/aggregation/notes/reactions.ts
 create mode 100644 src/server/api/endpoints/aggregation/notes/reply.ts
 create mode 100644 src/server/api/endpoints/aggregation/notes/repost.ts
 delete mode 100644 src/server/api/endpoints/aggregation/posts/reaction.ts
 delete mode 100644 src/server/api/endpoints/aggregation/posts/reactions.ts
 delete mode 100644 src/server/api/endpoints/aggregation/posts/reply.ts
 delete mode 100644 src/server/api/endpoints/aggregation/posts/repost.ts
 create mode 100644 src/server/api/endpoints/notes/context.ts
 create mode 100644 src/server/api/endpoints/notes/create.ts
 create mode 100644 src/server/api/endpoints/notes/favorites/create.ts
 create mode 100644 src/server/api/endpoints/notes/favorites/delete.ts
 create mode 100644 src/server/api/endpoints/notes/mentions.ts
 create mode 100644 src/server/api/endpoints/notes/polls/recommendation.ts
 create mode 100644 src/server/api/endpoints/notes/polls/vote.ts
 create mode 100644 src/server/api/endpoints/notes/reactions.ts
 create mode 100644 src/server/api/endpoints/notes/reactions/create.ts
 create mode 100644 src/server/api/endpoints/notes/reactions/delete.ts
 create mode 100644 src/server/api/endpoints/notes/replies.ts
 create mode 100644 src/server/api/endpoints/notes/reposts.ts
 create mode 100644 src/server/api/endpoints/notes/search.ts
 create mode 100644 src/server/api/endpoints/notes/show.ts
 create mode 100644 src/server/api/endpoints/notes/timeline.ts
 create mode 100644 src/server/api/endpoints/notes/trend.ts
 delete mode 100644 src/server/api/endpoints/posts/context.ts
 delete mode 100644 src/server/api/endpoints/posts/favorites/create.ts
 delete mode 100644 src/server/api/endpoints/posts/favorites/delete.ts
 delete mode 100644 src/server/api/endpoints/posts/mentions.ts
 delete mode 100644 src/server/api/endpoints/posts/polls/recommendation.ts
 delete mode 100644 src/server/api/endpoints/posts/polls/vote.ts
 delete mode 100644 src/server/api/endpoints/posts/reactions.ts
 delete mode 100644 src/server/api/endpoints/posts/reactions/create.ts
 delete mode 100644 src/server/api/endpoints/posts/reactions/delete.ts
 delete mode 100644 src/server/api/endpoints/posts/replies.ts
 delete mode 100644 src/server/api/endpoints/posts/reposts.ts
 delete mode 100644 src/server/api/endpoints/posts/search.ts
 delete mode 100644 src/server/api/endpoints/posts/show.ts
 delete mode 100644 src/server/api/endpoints/posts/timeline.ts
 delete mode 100644 src/server/api/endpoints/posts/trend.ts
 create mode 100644 src/services/note/create.ts
 create mode 100644 src/services/note/reaction/create.ts
 create mode 100644 src/services/note/watch.ts
 delete mode 100644 src/services/post/create.ts
 delete mode 100644 src/services/post/reaction/create.ts
 delete mode 100644 src/services/post/watch.ts
 create mode 100644 tools/migration/nighthike/11.js

(limited to 'src/client/app/desktop')

diff --git a/locales/en.yml b/locales/en.yml
index 2cc857f698..900571124f 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -33,7 +33,7 @@ common:
     confused: "Confused"
     pudding: "Pudding"
 
-  post_categories:
+  note_categories:
     music: "Music"
     game: "Video Game"
     anime: "Anime"
@@ -124,7 +124,7 @@ common:
       show-result: "Show result"
       voted: "Voted"
 
-    mk-post-menu:
+    mk-note-menu:
       pin: "Pin"
       pinned: "Pinned"
       select: "Select category"
@@ -211,7 +211,7 @@ ch:
       textarea: "Write here"
       upload: "Upload"
       drive: "Drive"
-      post: "Do"
+      note: "Do"
       posting: "Doing"
 
 desktop:
@@ -304,8 +304,8 @@ desktop:
       settings: "Settings"
       signout: "Sign out"
 
-    mk-ui-header-post-button:
-      post: "Compose new Post"
+    mk-ui-header-note-button:
+      note: "Compose new Post"
 
     mk-ui-header-notifications:
       title: "Notifications"
@@ -350,18 +350,18 @@ desktop:
       no-users: "No muted users"
 
     mk-post-form:
-      post-placeholder: "What's happening?"
-      reply-placeholder: "Reply to this post..."
-      quote-placeholder: "Quote this post..."
-      post: "Post"
+      note-placeholder: "What's happening?"
+      reply-placeholder: "Reply to this note..."
+      quote-placeholder: "Quote this note..."
+      note: "Post"
       reply: "Reply"
-      repost: "Repost"
+      renote: "Renote"
       posted: "Posted!"
       replied: "Replied!"
       reposted: "Reposted!"
-      post-failed: "Failed to post"
+      note-failed: "Failed to note"
       reply-failed: "Failed to reply"
-      repost-failed: "Failed to repost"
+      renote-failed: "Failed to renote"
       posting: "Posting"
       attach-media-from-local: "Attach media from your pc"
       attach-media-from-drive: "Attach media from the drive"
@@ -371,14 +371,14 @@ desktop:
       text-remain: "{} chars remaining"
 
     mk-post-form-window:
-      post: "New post"
+      note: "New note"
       reply: "Reply"
       attaches: "{} media attached"
       uploading-media: "Uploading {} media"
 
-    mk-post-page:
-      prev: "Previous post"
-      next: "Next post"
+    mk-note-page:
+      prev: "Previous note"
+      next: "Next note"
 
     mk-settings:
       profile: "Profile"
@@ -390,10 +390,10 @@ desktop:
       other: "Other"
       license: "License"
 
-    mk-timeline-post:
+    mk-timeline-note:
       reposted-by: "Reposted by {}"
       reply: "Reply"
-      repost: "Repost"
+      renote: "Renote"
       add-reaction: "Add your reaction"
       detail: "Show detail"
 
@@ -448,7 +448,7 @@ desktop:
 
     mk-post-form-home-widget:
       title: "Post"
-      post: "Post"
+      note: "Post"
       placeholder: "What's happening?"
 
     mk-access-log-home-widget:
@@ -463,16 +463,16 @@ desktop:
       have-a-nice-day: "Have a nice day!"
       next: "Next"
 
-    mk-repost-form:
+    mk-renote-form:
       quote: "Quote..."
       cancel: "Cancel"
-      repost: "Repost"
+      renote: "Renote"
       reposting: "Reposting..."
       success: "Reposted!"
-      failure: "Failed to Repost"
+      failure: "Failed to Renote"
 
-    mk-repost-form-window:
-      title: "Are you sure you want to repost this post?"
+    mk-renote-form-window:
+      title: "Are you sure you want to renote this note?"
 
     mk-user:
       last-used-at: "Last used at"
@@ -541,10 +541,10 @@ mobile:
       notifications: "Notifications"
       read-all: "Are you sure you want to mark all unread notifications as read?"
 
-    mk-post-page:
+    mk-note-page:
       title: "Post"
-      prev: "Previous post"
-      next: "Next post"
+      prev: "Previous note"
+      next: "Next note"
 
     mk-search-page:
       search: "Search"
@@ -606,33 +606,33 @@ mobile:
       unfollow: "Unfollow"
 
     mk-home-timeline:
-      empty-timeline: "There is no posts"
+      empty-timeline: "There is no notes"
 
     mk-notifications:
       more: "More"
       empty: "No notifications"
 
-    mk-post-detail:
+    mk-note-detail:
       reply: "Reply"
       reaction: "Reaction"
 
     mk-post-form:
       submit: "Post"
-      reply-placeholder: "Reply to this post..."
-      post-placeholder: "What's happening?"
+      reply-placeholder: "Reply to this note..."
+      note-placeholder: "What's happening?"
 
-    mk-search-posts:
-      empty: "There is no post related to the 「{}」"
+    mk-search-notes:
+      empty: "There is no note related to the 「{}」"
 
-    mk-sub-post-content:
+    mk-sub-note-content:
       media-count: "{} media"
       poll: "Poll"
 
-    mk-timeline-post:
+    mk-timeline-note:
       reposted-by: "Reposted by {}"
 
     mk-timeline:
-      empty: "No posts"
+      empty: "No notes"
       load-more: "More"
 
     mk-ui-nav:
@@ -652,21 +652,21 @@ mobile:
       no-users: "No following."
 
     mk-user-timeline:
-      no-posts: "This user seems never post"
-      no-posts-with-media: "There is no posts with media"
+      no-notes: "This user seems never note"
+      no-notes-with-media: "There is no notes with media"
       load-more: "More"
 
     mk-user:
       follows-you: "Follows you"
       following: "Following"
       followers: "Followers"
-      posts: "Posts"
+      notes: "Posts"
       overview: "Overview"
       timeline: "Timeline"
       media: "Media"
 
     mk-user-overview:
-      recent-posts: "Recent posts"
+      recent-notes: "Recent notes"
       images: "Images"
       activity: "Activity"
       keywords: "Keywords"
@@ -675,9 +675,9 @@ mobile:
       followers-you-know: "Followers you know"
       last-used-at: "Last used at"
 
-    mk-user-overview-posts:
+    mk-user-overview-notes:
       loading: "Loading"
-      no-posts: "No posts"
+      no-notes: "No notes"
 
     mk-user-overview-photos:
       loading: "Loading"
@@ -703,7 +703,7 @@ mobile:
       load-more: "More"
 
 stats:
-  posts-count: "Number of all posts"
+  notes-count: "Number of all notes"
   users-count: "Number of all users"
 
 status:
diff --git a/locales/ja.yml b/locales/ja.yml
index fd140ecc30..84694e3c74 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -33,7 +33,7 @@ common:
     confused: "こまこまのこまり"
     pudding: "Pudding"
 
-  post_categories:
+  note_categories:
     music: "音楽"
     game: "ゲーム"
     anime: "アニメ"
@@ -124,7 +124,7 @@ common:
       show-result: "結果を見る"
       voted: "投票済み"
 
-    mk-post-menu:
+    mk-note-menu:
       pin: "ピン留め"
       pinned: "ピン留めしました"
       select: "カテゴリを選択"
@@ -211,7 +211,7 @@ ch:
       textarea: "書いて"
       upload: "アップロード"
       drive: "ドライブ"
-      post: "やる"
+      note: "やる"
       posting: "やってます"
 
 desktop:
@@ -304,8 +304,8 @@ desktop:
       settings: "設定"
       signout: "サインアウト"
 
-    mk-ui-header-post-button:
-      post: "新規投稿"
+    mk-ui-header-note-button:
+      note: "新規投稿"
 
     mk-ui-header-notifications:
       title: "通知"
@@ -350,18 +350,18 @@ desktop:
       no-users: "ミュートしているユーザーはいません"
 
     mk-post-form:
-      post-placeholder: "いまどうしてる？"
+      note-placeholder: "いまどうしてる？"
       reply-placeholder: "この投稿への返信..."
       quote-placeholder: "この投稿を引用..."
-      post: "投稿"
+      note: "投稿"
       reply: "返信"
-      repost: "Repost"
+      renote: "Renote"
       posted: "投稿しました！"
       replied: "返信しました！"
-      reposted: "Repostしました！"
-      post-failed: "投稿に失敗しました"
+      reposted: "Renoteしました！"
+      note-failed: "投稿に失敗しました"
       reply-failed: "返信に失敗しました"
-      repost-failed: "Repostに失敗しました"
+      renote-failed: "Renoteに失敗しました"
       posting: "投稿中"
       attach-media-from-local: "PCからメディアを添付"
       attach-media-from-drive: "ドライブからメディアを添付"
@@ -371,12 +371,12 @@ desktop:
       text-remain: "のこり{}文字"
 
     mk-post-form-window:
-      post: "新規投稿"
+      note: "新規投稿"
       reply: "返信"
       attaches: "添付: {}メディア"
       uploading-media: "{}個のメディアをアップロード中"
 
-    mk-post-page:
+    mk-note-page:
       prev: "前の投稿"
       next: "次の投稿"
 
@@ -390,10 +390,10 @@ desktop:
       other: "その他"
       license: "ライセンス"
 
-    mk-timeline-post:
-      reposted-by: "{}がRepost"
+    mk-timeline-note:
+      reposted-by: "{}がRenote"
       reply: "返信"
-      repost: "Repost"
+      renote: "Renote"
       add-reaction: "リアクション"
       detail: "詳細"
 
@@ -448,7 +448,7 @@ desktop:
 
     mk-post-form-home-widget:
       title: "投稿"
-      post: "投稿"
+      note: "投稿"
       placeholder: "いまどうしてる？"
 
     mk-access-log-home-widget:
@@ -463,16 +463,16 @@ desktop:
       have-a-nice-day: "良い一日を！"
       next: "次"
 
-    mk-repost-form:
+    mk-renote-form:
       quote: "引用する..."
       cancel: "キャンセル"
-      repost: "Repost"
+      renote: "Renote"
       reposting: "しています..."
-      success: "Repostしました！"
-      failure: "Repostに失敗しました"
+      success: "Renoteしました！"
+      failure: "Renoteに失敗しました"
 
-    mk-repost-form-window:
-      title: "この投稿をRepostしますか？"
+    mk-renote-form-window:
+      title: "この投稿をRenoteしますか？"
 
     mk-user:
       last-used-at: "最終アクセス"
@@ -541,7 +541,7 @@ mobile:
       notifications: "通知"
       read-all: "すべての通知を既読にしますか？"
 
-    mk-post-page:
+    mk-note-page:
       title: "投稿"
       prev: "前の投稿"
       next: "次の投稿"
@@ -612,24 +612,24 @@ mobile:
       more: "もっと見る"
       empty: "ありません！"
 
-    mk-post-detail:
+    mk-note-detail:
       reply: "返信"
       reaction: "リアクション"
 
     mk-post-form:
       submit: "投稿"
       reply-placeholder: "この投稿への返信..."
-      post-placeholder: "いまどうしてる？"
+      note-placeholder: "いまどうしてる？"
 
-    mk-search-posts:
+    mk-search-notes:
       empty: "「{}」に関する投稿は見つかりませんでした。"
 
-    mk-sub-post-content:
+    mk-sub-note-content:
       media-count: "{}個のメディア"
       poll: "投票"
 
-    mk-timeline-post:
-      reposted-by: "{}がRepost"
+    mk-timeline-note:
+      reposted-by: "{}がRenote"
 
     mk-timeline:
       empty: "表示するものがありません"
@@ -652,21 +652,21 @@ mobile:
       no-users: "フォロー中のユーザーはいないようです。"
 
     mk-user-timeline:
-      no-posts: "このユーザーはまだ投稿していないようです。"
-      no-posts-with-media: "メディア付き投稿はありません。"
+      no-notes: "このユーザーはまだ投稿していないようです。"
+      no-notes-with-media: "メディア付き投稿はありません。"
       load-more: "もっとみる"
 
     mk-user:
       follows-you: "フォローされています"
       following: "フォロー"
       followers: "フォロワー"
-      posts: "投稿"
+      notes: "投稿"
       overview: "概要"
       timeline: "タイムライン"
       media: "メディア"
 
     mk-user-overview:
-      recent-posts: "最近の投稿"
+      recent-notes: "最近の投稿"
       images: "画像"
       activity: "アクティビティ"
       keywords: "キーワード"
@@ -675,9 +675,9 @@ mobile:
       followers-you-know: "知り合いのフォロワー"
       last-used-at: "最終ログイン"
 
-    mk-user-overview-posts:
+    mk-user-overview-notes:
       loading: "読み込み中"
-      no-posts: "投稿はありません"
+      no-notes: "投稿はありません"
 
     mk-user-overview-photos:
       loading: "読み込み中"
@@ -703,7 +703,7 @@ mobile:
       load-more: "もっと"
 
 stats:
-  posts-count: "投稿の数"
+  notes-count: "投稿の数"
   users-count: "アカウントの数"
 
 status:
diff --git a/src/client/app/auth/views/form.vue b/src/client/app/auth/views/form.vue
index eb55b9035b..b323907eb0 100644
--- a/src/client/app/auth/views/form.vue
+++ b/src/client/app/auth/views/form.vue
@@ -16,7 +16,7 @@
 				<template v-for="p in app.permission">
 					<li v-if="p == 'account-read'">アカウントの情報を見る。</li>
 					<li v-if="p == 'account-write'">アカウントの情報を操作する。</li>
-					<li v-if="p == 'post-write'">投稿する。</li>
+					<li v-if="p == 'note-write'">投稿する。</li>
 					<li v-if="p == 'like-write'">いいねしたりいいね解除する。</li>
 					<li v-if="p == 'following-write'">フォローしたりフォロー解除する。</li>
 					<li v-if="p == 'drive-read'">ドライブを見る。</li>
diff --git a/src/client/app/ch/tags/channel.tag b/src/client/app/ch/tags/channel.tag
index 4856728dec..c0561c9b92 100644
--- a/src/client/app/ch/tags/channel.tag
+++ b/src/client/app/ch/tags/channel.tag
@@ -15,11 +15,11 @@
 		</div>
 
 		<div class="body">
-			<p v-if="postsFetching">読み込み中<mk-ellipsis/></p>
-			<div v-if="!postsFetching">
-				<p v-if="posts == null || posts.length == 0">まだ投稿がありません</p>
-				<template v-if="posts != null">
-					<mk-channel-post each={ post in posts.slice().reverse() } post={ post } form={ parent.refs.form }/>
+			<p v-if="notesFetching">読み込み中<mk-ellipsis/></p>
+			<div v-if="!notesFetching">
+				<p v-if="notes == null || notes.length == 0">まだ投稿がありません</p>
+				<template v-if="notes != null">
+					<mk-channel-note each={ note in notes.slice().reverse() } note={ note } form={ parent.refs.form }/>
 				</template>
 			</div>
 		</div>
@@ -62,9 +62,9 @@
 
 		this.id = this.opts.id;
 		this.fetching = true;
-		this.postsFetching = true;
+		this.notesFetching = true;
 		this.channel = null;
-		this.posts = null;
+		this.notes = null;
 		this.connection = new ChannelStream(this.id);
 		this.unreadCount = 0;
 
@@ -95,9 +95,9 @@
 			});
 
 			// 投稿読み込み
-			this.$root.$data.os.api('channels/posts', {
+			this.$root.$data.os.api('channels/notes', {
 				channelId: this.id
-			}).then(posts => {
+			}).then(notes => {
 				if (fetched) {
 					Progress.done();
 				} else {
@@ -106,26 +106,26 @@
 				}
 
 				this.update({
-					postsFetching: false,
-					posts: posts
+					notesFetching: false,
+					notes: notes
 				});
 			});
 
-			this.connection.on('post', this.onPost);
+			this.connection.on('note', this.onNote);
 			document.addEventListener('visibilitychange', this.onVisibilitychange, false);
 		});
 
 		this.on('unmount', () => {
-			this.connection.off('post', this.onPost);
+			this.connection.off('note', this.onNote);
 			this.connection.close();
 			document.removeEventListener('visibilitychange', this.onVisibilitychange);
 		});
 
-		this.onPost = post => {
-			this.posts.unshift(post);
+		this.onNote = note => {
+			this.notes.unshift(note);
 			this.update();
 
-			if (document.hidden && this.$root.$data.os.isSignedIn && post.userId !== this.$root.$data.os.i.id) {
+			if (document.hidden && this.$root.$data.os.isSignedIn && note.userId !== this.$root.$data.os.i.id) {
 				this.unreadCount++;
 				document.title = `(${this.unreadCount}) ${this.channel.title} | Misskey`;
 			}
@@ -162,19 +162,19 @@
 	</script>
 </mk-channel>
 
-<mk-channel-post>
+<mk-channel-note>
 	<header>
-		<a class="index" @click="reply">{ post.index }:</a>
-		<a class="name" href={ _URL_ + '/@' + acct }><b>{ getUserName(post.user) }</b></a>
-		<mk-time time={ post.createdAt }/>
-		<mk-time time={ post.createdAt } mode="detail"/>
+		<a class="index" @click="reply">{ note.index }:</a>
+		<a class="name" href={ _URL_ + '/@' + acct }><b>{ getUserName(note.user) }</b></a>
+		<mk-time time={ note.createdAt }/>
+		<mk-time time={ note.createdAt } mode="detail"/>
 		<span>ID:<i>{ acct }</i></span>
 	</header>
 	<div>
-		<a v-if="post.reply">&gt;&gt;{ post.reply.index }</a>
-		{ post.text }
-		<div class="media" v-if="post.media">
-			<template each={ file in post.media }>
+		<a v-if="note.reply">&gt;&gt;{ note.reply.index }</a>
+		{ note.text }
+		<div class="media" v-if="note.media">
+			<template each={ file in note.media }>
 				<a href={ file.url } target="_blank">
 					<img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/>
 				</a>
@@ -232,18 +232,18 @@
 		import getAcct from '../../../../acct/render';
 		import getUserName from '../../../../renderers/get-user-name';
 
-		this.post = this.opts.post;
+		this.note = this.opts.note;
 		this.form = this.opts.form;
-		this.acct = getAcct(this.post.user);
-		this.name = getUserName(this.post.user);
+		this.acct = getAcct(this.note.user);
+		this.name = getUserName(this.note.user);
 
 		this.reply = () => {
 			this.form.update({
-				reply: this.post
+				reply: this.note
 			});
 		};
 	</script>
-</mk-channel-post>
+</mk-channel-note>
 
 <mk-channel-form>
 	<p v-if="reply"><b>&gt;&gt;{ reply.index }</b> ({ getUserName(reply.user) }): <a @click="clearReply">[x]</a></p>
@@ -251,8 +251,8 @@
 	<div class="actions">
 		<button @click="selectFile">%fa:upload%%i18n:ch.tags.mk-channel-form.upload%</button>
 		<button @click="drive">%fa:cloud%%i18n:ch.tags.mk-channel-form.drive%</button>
-		<button :class="{ wait: wait }" ref="submit" disabled={ wait || (refs.text.value.length == 0) } @click="post">
-			<template v-if="!wait">%fa:paper-plane%</template>{ wait ? '%i18n:ch.tags.mk-channel-form.posting%' : '%i18n:ch.tags.mk-channel-form.post%' }<mk-ellipsis v-if="wait"/>
+		<button :class="{ wait: wait }" ref="submit" disabled={ wait || (refs.text.value.length == 0) } @click="note">
+			<template v-if="!wait">%fa:paper-plane%</template>{ wait ? '%i18n:ch.tags.mk-channel-form.posting%' : '%i18n:ch.tags.mk-channel-form.note%' }<mk-ellipsis v-if="wait"/>
 		</button>
 	</div>
 	<mk-uploader ref="uploader"/>
@@ -321,7 +321,7 @@
 			this.$refs.text.value = '';
 		};
 
-		this.post = () => {
+		this.note = () => {
 			this.update({
 				wait: true
 			});
@@ -330,7 +330,7 @@
 				? this.files.map(f => f.id)
 				: undefined;
 
-			this.$root.$data.os.api('posts/create', {
+			this.$root.$data.os.api('notes/create', {
 				text: this.$refs.text.value == '' ? undefined : this.$refs.text.value,
 				mediaIds: files,
 				replyId: this.reply ? this.reply.id : undefined,
diff --git a/src/client/app/common/mios.ts b/src/client/app/common/mios.ts
index bcb8b60678..48e830810c 100644
--- a/src/client/app/common/mios.ts
+++ b/src/client/app/common/mios.ts
@@ -49,7 +49,7 @@ export type API = {
 
 	post: (opts?: {
 		reply?: any;
-		repost?: any;
+		renote?: any;
 	}) => void;
 
 	notify: (message: string) => void;
@@ -312,7 +312,7 @@ export default class MiOS extends EventEmitter {
 			// Finish init
 			callback();
 
-			//#region Post
+			//#region Note
 
 			// Init service worker
 			if (this.shouldRegisterSw) this.registerSw();
diff --git a/src/client/app/common/scripts/compose-notification.ts b/src/client/app/common/scripts/compose-notification.ts
index e99d502960..c19b1c5ad0 100644
--- a/src/client/app/common/scripts/compose-notification.ts
+++ b/src/client/app/common/scripts/compose-notification.ts
@@ -1,4 +1,4 @@
-import getPostSummary from '../../../../renderers/get-post-summary';
+import getNoteSummary from '../../../../renderers/get-note-summary';
 import getReactionEmoji from '../../../../renderers/get-reaction-emoji';
 import getUserName from '../../../../renderers/get-user-name';
 
@@ -23,28 +23,28 @@ export default function(type, data): Notification {
 		case 'mention':
 			return {
 				title: `${getUserName(data.user)}さんから:`,
-				body: getPostSummary(data),
+				body: getNoteSummary(data),
 				icon: data.user.avatarUrl + '?thumbnail&size=64'
 			};
 
 		case 'reply':
 			return {
 				title: `${getUserName(data.user)}さんから返信:`,
-				body: getPostSummary(data),
+				body: getNoteSummary(data),
 				icon: data.user.avatarUrl + '?thumbnail&size=64'
 			};
 
 		case 'quote':
 			return {
 				title: `${getUserName(data.user)}さんが引用:`,
-				body: getPostSummary(data),
+				body: getNoteSummary(data),
 				icon: data.user.avatarUrl + '?thumbnail&size=64'
 			};
 
 		case 'reaction':
 			return {
 				title: `${getUserName(data.user)}: ${getReactionEmoji(data.reaction)}:`,
-				body: getPostSummary(data.post),
+				body: getNoteSummary(data.note),
 				icon: data.user.avatarUrl + '?thumbnail&size=64'
 			};
 
diff --git a/src/client/app/common/scripts/parse-search-query.ts b/src/client/app/common/scripts/parse-search-query.ts
index 4f09d2b93f..5f6ae3320a 100644
--- a/src/client/app/common/scripts/parse-search-query.ts
+++ b/src/client/app/common/scripts/parse-search-query.ts
@@ -19,8 +19,8 @@ export default function(qs: string) {
 				case 'reply':
 					q['reply'] = value == 'null' ? null : value == 'true';
 					break;
-				case 'repost':
-					q['repost'] = value == 'null' ? null : value == 'true';
+				case 'renote':
+					q['renote'] = value == 'null' ? null : value == 'true';
 					break;
 				case 'media':
 					q['media'] = value == 'null' ? null : value == 'true';
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index b58ba37ecb..6bfe43a800 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -4,7 +4,7 @@ import signin from './signin.vue';
 import signup from './signup.vue';
 import forkit from './forkit.vue';
 import nav from './nav.vue';
-import postHtml from './post-html';
+import noteHtml from './note-html';
 import poll from './poll.vue';
 import pollEditor from './poll-editor.vue';
 import reactionIcon from './reaction-icon.vue';
@@ -29,7 +29,7 @@ Vue.component('mk-signin', signin);
 Vue.component('mk-signup', signup);
 Vue.component('mk-forkit', forkit);
 Vue.component('mk-nav', nav);
-Vue.component('mk-post-html', postHtml);
+Vue.component('mk-note-html', noteHtml);
 Vue.component('mk-poll', poll);
 Vue.component('mk-poll-editor', pollEditor);
 Vue.component('mk-reaction-icon', reactionIcon);
diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue
index 1518602c63..7200b59bb2 100644
--- a/src/client/app/common/views/components/messaging-room.message.vue
+++ b/src/client/app/common/views/components/messaging-room.message.vue
@@ -10,7 +10,7 @@
 				<img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
 			</button>
 			<div class="content" v-if="!message.isDeleted">
-				<mk-post-html class="text" v-if="message.text" ref="text" :text="message.text" :i="os.i"/>
+				<mk-note-html class="text" v-if="message.text" ref="text" :text="message.text" :i="os.i"/>
 				<div class="file" v-if="message.file">
 					<a :href="message.file.url" target="_blank" :title="message.file.name">
 						<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"/>
diff --git a/src/client/app/common/views/components/note-html.ts b/src/client/app/common/views/components/note-html.ts
new file mode 100644
index 0000000000..24e750a671
--- /dev/null
+++ b/src/client/app/common/views/components/note-html.ts
@@ -0,0 +1,157 @@
+import Vue from 'vue';
+import * as emojilib from 'emojilib';
+import parse from '../../../../../text/parse';
+import getAcct from '../../../../../acct/render';
+import { url } from '../../../config';
+import MkUrl from './url.vue';
+
+const flatten = list => list.reduce(
+	(a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
+);
+
+export default Vue.component('mk-note-html', {
+	props: {
+		text: {
+			type: String,
+			required: true
+		},
+		ast: {
+			type: [],
+			required: false
+		},
+		shouldBreak: {
+			type: Boolean,
+			default: true
+		},
+		i: {
+			type: Object,
+			default: null
+		}
+	},
+
+	render(createElement) {
+		let ast;
+
+		if (this.ast == null) {
+			// Parse text to ast
+			ast = parse(this.text);
+		} else {
+			ast = this.ast;
+		}
+
+		// Parse ast to DOM
+		const els = flatten(ast.map(token => {
+			switch (token.type) {
+				case 'text':
+					const text = token.content.replace(/(\r\n|\n|\r)/g, '\n');
+
+					if (this.shouldBreak) {
+						const x = text.split('\n')
+							.map(t => t == '' ? [createElement('br')] : [createElement('span', t), createElement('br')]);
+						x[x.length - 1].pop();
+						return x;
+					} else {
+						return createElement('span', text.replace(/\n/g, ' '));
+					}
+
+				case 'bold':
+					return createElement('strong', token.bold);
+
+				case 'url':
+					return createElement(MkUrl, {
+						props: {
+							url: token.content,
+							target: '_blank'
+						}
+					});
+
+				case 'link':
+					return createElement('a', {
+						attrs: {
+							class: 'link',
+							href: token.url,
+							target: '_blank',
+							title: token.url
+						}
+					}, token.title);
+
+				case 'mention':
+					return (createElement as any)('a', {
+						attrs: {
+							href: `${url}/@${getAcct(token)}`,
+							target: '_blank',
+							dataIsMe: (this as any).i && getAcct((this as any).i) == getAcct(token)
+						},
+						directives: [{
+							name: 'user-preview',
+							value: token.content
+						}]
+					}, token.content);
+
+				case 'hashtag':
+					return createElement('a', {
+						attrs: {
+							href: `${url}/search?q=${token.content}`,
+							target: '_blank'
+						}
+					}, token.content);
+
+				case 'code':
+					return createElement('pre', [
+						createElement('code', {
+							domProps: {
+								innerHTML: token.html
+							}
+						})
+					]);
+
+				case 'inline-code':
+					return createElement('code', {
+						domProps: {
+							innerHTML: token.html
+						}
+					});
+
+				case 'quote':
+					const text2 = token.quote.replace(/(\r\n|\n|\r)/g, '\n');
+
+					if (this.shouldBreak) {
+						const x = text2.split('\n')
+							.map(t => [createElement('span', t), createElement('br')]);
+						x[x.length - 1].pop();
+						return createElement('div', {
+							attrs: {
+								class: 'quote'
+							}
+						}, x);
+					} else {
+						return createElement('span', {
+							attrs: {
+								class: 'quote'
+							}
+						}, text2.replace(/\n/g, ' '));
+					}
+
+				case 'emoji':
+					const emoji = emojilib.lib[token.emoji];
+					return createElement('span', emoji ? emoji.char : token.content);
+
+				default:
+					console.log('unknown ast type:', token.type);
+			}
+		}));
+
+		const _els = [];
+		els.forEach((el, i) => {
+			if (el.tag == 'br') {
+				if (els[i - 1].tag != 'div') {
+					_els.push(el);
+				}
+			} else {
+				_els.push(el);
+			}
+		});
+
+		return createElement('span', _els);
+	}
+});
diff --git a/src/client/app/common/views/components/note-menu.vue b/src/client/app/common/views/components/note-menu.vue
new file mode 100644
index 0000000000..d053748728
--- /dev/null
+++ b/src/client/app/common/views/components/note-menu.vue
@@ -0,0 +1,141 @@
+<template>
+<div class="mk-note-menu">
+	<div class="backdrop" ref="backdrop" @click="close"></div>
+	<div class="popover" :class="{ compact }" ref="popover">
+		<button v-if="note.userId == os.i.id" @click="pin">%i18n:common.tags.mk-note-menu.pin%</button>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+
+export default Vue.extend({
+	props: ['note', 'source', 'compact'],
+	mounted() {
+		this.$nextTick(() => {
+			const popover = this.$refs.popover as any;
+
+			const rect = this.source.getBoundingClientRect();
+			const width = popover.offsetWidth;
+			const height = popover.offsetHeight;
+
+			if (this.compact) {
+				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
+				const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
+				popover.style.left = (x - (width / 2)) + 'px';
+				popover.style.top = (y - (height / 2)) + 'px';
+			} else {
+				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
+				const y = rect.top + window.pageYOffset + this.source.offsetHeight;
+				popover.style.left = (x - (width / 2)) + 'px';
+				popover.style.top = y + 'px';
+			}
+
+			anime({
+				targets: this.$refs.backdrop,
+				opacity: 1,
+				duration: 100,
+				easing: 'linear'
+			});
+
+			anime({
+				targets: this.$refs.popover,
+				opacity: 1,
+				scale: [0.5, 1],
+				duration: 500
+			});
+		});
+	},
+	methods: {
+		pin() {
+			(this as any).api('i/pin', {
+				noteId: this.note.id
+			}).then(() => {
+				this.$destroy();
+			});
+		},
+
+		close() {
+			(this.$refs.backdrop as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.backdrop,
+				opacity: 0,
+				duration: 200,
+				easing: 'linear'
+			});
+
+			(this.$refs.popover as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.popover,
+				opacity: 0,
+				scale: 0.5,
+				duration: 200,
+				easing: 'easeInBack',
+				complete: () => this.$destroy()
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+$border-color = rgba(27, 31, 35, 0.15)
+
+.mk-note-menu
+	position initial
+
+	> .backdrop
+		position fixed
+		top 0
+		left 0
+		z-index 10000
+		width 100%
+		height 100%
+		background rgba(0, 0, 0, 0.1)
+		opacity 0
+
+	> .popover
+		position absolute
+		z-index 10001
+		background #fff
+		border 1px solid $border-color
+		border-radius 4px
+		box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
+		transform scale(0.5)
+		opacity 0
+
+		$balloon-size = 16px
+
+		&:not(.compact)
+			margin-top $balloon-size
+			transform-origin center -($balloon-size)
+
+			&:before
+				content ""
+				display block
+				position absolute
+				top -($balloon-size * 2)
+				left s('calc(50% - %s)', $balloon-size)
+				border-top solid $balloon-size transparent
+				border-left solid $balloon-size transparent
+				border-right solid $balloon-size transparent
+				border-bottom solid $balloon-size $border-color
+
+			&:after
+				content ""
+				display block
+				position absolute
+				top -($balloon-size * 2) + 1.5px
+				left s('calc(50% - %s)', $balloon-size)
+				border-top solid $balloon-size transparent
+				border-left solid $balloon-size transparent
+				border-right solid $balloon-size transparent
+				border-bottom solid $balloon-size #fff
+
+		> button
+			display block
+			padding 16px
+
+</style>
diff --git a/src/client/app/common/views/components/poll.vue b/src/client/app/common/views/components/poll.vue
index 711d89720e..eb29aa8837 100644
--- a/src/client/app/common/views/components/poll.vue
+++ b/src/client/app/common/views/components/poll.vue
@@ -22,7 +22,7 @@
 <script lang="ts">
 import Vue from 'vue';
 export default Vue.extend({
-	props: ['post'],
+	props: ['note'],
 	data() {
 		return {
 			showResult: false
@@ -30,7 +30,7 @@ export default Vue.extend({
 	},
 	computed: {
 		poll(): any {
-			return this.post.poll;
+			return this.note.poll;
 		},
 		total(): number {
 			return this.poll.choices.reduce((a, b) => a + b.votes, 0);
@@ -48,8 +48,8 @@ export default Vue.extend({
 		},
 		vote(id) {
 			if (this.poll.choices.some(c => c.isVoted)) return;
-			(this as any).api('posts/polls/vote', {
-				postId: this.post.id,
+			(this as any).api('notes/polls/vote', {
+				noteId: this.note.id,
 				choice: id
 			}).then(() => {
 				this.poll.choices.forEach(c => {
diff --git a/src/client/app/common/views/components/post-html.ts b/src/client/app/common/views/components/post-html.ts
deleted file mode 100644
index 8d85316523..0000000000
--- a/src/client/app/common/views/components/post-html.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-import Vue from 'vue';
-import * as emojilib from 'emojilib';
-import parse from '../../../../../text/parse';
-import getAcct from '../../../../../acct/render';
-import { url } from '../../../config';
-import MkUrl from './url.vue';
-
-const flatten = list => list.reduce(
-	(a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
-);
-
-export default Vue.component('mk-post-html', {
-	props: {
-		text: {
-			type: String,
-			required: true
-		},
-		ast: {
-			type: [],
-			required: false
-		},
-		shouldBreak: {
-			type: Boolean,
-			default: true
-		},
-		i: {
-			type: Object,
-			default: null
-		}
-	},
-
-	render(createElement) {
-		let ast;
-
-		if (this.ast == null) {
-			// Parse text to ast
-			ast = parse(this.text);
-		} else {
-			ast = this.ast;
-		}
-
-		// Parse ast to DOM
-		const els = flatten(ast.map(token => {
-			switch (token.type) {
-				case 'text':
-					const text = token.content.replace(/(\r\n|\n|\r)/g, '\n');
-
-					if (this.shouldBreak) {
-						const x = text.split('\n')
-							.map(t => t == '' ? [createElement('br')] : [createElement('span', t), createElement('br')]);
-						x[x.length - 1].pop();
-						return x;
-					} else {
-						return createElement('span', text.replace(/\n/g, ' '));
-					}
-
-				case 'bold':
-					return createElement('strong', token.bold);
-
-				case 'url':
-					return createElement(MkUrl, {
-						props: {
-							url: token.content,
-							target: '_blank'
-						}
-					});
-
-				case 'link':
-					return createElement('a', {
-						attrs: {
-							class: 'link',
-							href: token.url,
-							target: '_blank',
-							title: token.url
-						}
-					}, token.title);
-
-				case 'mention':
-					return (createElement as any)('a', {
-						attrs: {
-							href: `${url}/@${getAcct(token)}`,
-							target: '_blank',
-							dataIsMe: (this as any).i && getAcct((this as any).i) == getAcct(token)
-						},
-						directives: [{
-							name: 'user-preview',
-							value: token.content
-						}]
-					}, token.content);
-
-				case 'hashtag':
-					return createElement('a', {
-						attrs: {
-							href: `${url}/search?q=${token.content}`,
-							target: '_blank'
-						}
-					}, token.content);
-
-				case 'code':
-					return createElement('pre', [
-						createElement('code', {
-							domProps: {
-								innerHTML: token.html
-							}
-						})
-					]);
-
-				case 'inline-code':
-					return createElement('code', {
-						domProps: {
-							innerHTML: token.html
-						}
-					});
-
-				case 'quote':
-					const text2 = token.quote.replace(/(\r\n|\n|\r)/g, '\n');
-
-					if (this.shouldBreak) {
-						const x = text2.split('\n')
-							.map(t => [createElement('span', t), createElement('br')]);
-						x[x.length - 1].pop();
-						return createElement('div', {
-							attrs: {
-								class: 'quote'
-							}
-						}, x);
-					} else {
-						return createElement('span', {
-							attrs: {
-								class: 'quote'
-							}
-						}, text2.replace(/\n/g, ' '));
-					}
-
-				case 'emoji':
-					const emoji = emojilib.lib[token.emoji];
-					return createElement('span', emoji ? emoji.char : token.content);
-
-				default:
-					console.log('unknown ast type:', token.type);
-			}
-		}));
-
-		const _els = [];
-		els.forEach((el, i) => {
-			if (el.tag == 'br') {
-				if (els[i - 1].tag != 'div') {
-					_els.push(el);
-				}
-			} else {
-				_els.push(el);
-			}
-		});
-
-		return createElement('span', _els);
-	}
-});
diff --git a/src/client/app/common/views/components/post-menu.vue b/src/client/app/common/views/components/post-menu.vue
deleted file mode 100644
index 35116db7e2..0000000000
--- a/src/client/app/common/views/components/post-menu.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<template>
-<div class="mk-post-menu">
-	<div class="backdrop" ref="backdrop" @click="close"></div>
-	<div class="popover" :class="{ compact }" ref="popover">
-		<button v-if="post.userId == os.i.id" @click="pin">%i18n:common.tags.mk-post-menu.pin%</button>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import * as anime from 'animejs';
-
-export default Vue.extend({
-	props: ['post', 'source', 'compact'],
-	mounted() {
-		this.$nextTick(() => {
-			const popover = this.$refs.popover as any;
-
-			const rect = this.source.getBoundingClientRect();
-			const width = popover.offsetWidth;
-			const height = popover.offsetHeight;
-
-			if (this.compact) {
-				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
-				const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
-				popover.style.left = (x - (width / 2)) + 'px';
-				popover.style.top = (y - (height / 2)) + 'px';
-			} else {
-				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
-				const y = rect.top + window.pageYOffset + this.source.offsetHeight;
-				popover.style.left = (x - (width / 2)) + 'px';
-				popover.style.top = y + 'px';
-			}
-
-			anime({
-				targets: this.$refs.backdrop,
-				opacity: 1,
-				duration: 100,
-				easing: 'linear'
-			});
-
-			anime({
-				targets: this.$refs.popover,
-				opacity: 1,
-				scale: [0.5, 1],
-				duration: 500
-			});
-		});
-	},
-	methods: {
-		pin() {
-			(this as any).api('i/pin', {
-				postId: this.post.id
-			}).then(() => {
-				this.$destroy();
-			});
-		},
-
-		close() {
-			(this.$refs.backdrop as any).style.pointerEvents = 'none';
-			anime({
-				targets: this.$refs.backdrop,
-				opacity: 0,
-				duration: 200,
-				easing: 'linear'
-			});
-
-			(this.$refs.popover as any).style.pointerEvents = 'none';
-			anime({
-				targets: this.$refs.popover,
-				opacity: 0,
-				scale: 0.5,
-				duration: 200,
-				easing: 'easeInBack',
-				complete: () => this.$destroy()
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-$border-color = rgba(27, 31, 35, 0.15)
-
-.mk-post-menu
-	position initial
-
-	> .backdrop
-		position fixed
-		top 0
-		left 0
-		z-index 10000
-		width 100%
-		height 100%
-		background rgba(0, 0, 0, 0.1)
-		opacity 0
-
-	> .popover
-		position absolute
-		z-index 10001
-		background #fff
-		border 1px solid $border-color
-		border-radius 4px
-		box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
-		transform scale(0.5)
-		opacity 0
-
-		$balloon-size = 16px
-
-		&:not(.compact)
-			margin-top $balloon-size
-			transform-origin center -($balloon-size)
-
-			&:before
-				content ""
-				display block
-				position absolute
-				top -($balloon-size * 2)
-				left s('calc(50% - %s)', $balloon-size)
-				border-top solid $balloon-size transparent
-				border-left solid $balloon-size transparent
-				border-right solid $balloon-size transparent
-				border-bottom solid $balloon-size $border-color
-
-			&:after
-				content ""
-				display block
-				position absolute
-				top -($balloon-size * 2) + 1.5px
-				left s('calc(50% - %s)', $balloon-size)
-				border-top solid $balloon-size transparent
-				border-left solid $balloon-size transparent
-				border-right solid $balloon-size transparent
-				border-bottom solid $balloon-size #fff
-
-		> button
-			display block
-			padding 16px
-
-</style>
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index bcb6b2b965..fa1998dca9 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -25,7 +25,7 @@ import * as anime from 'animejs';
 const placeholder = '%i18n:common.tags.mk-reaction-picker.choose-reaction%';
 
 export default Vue.extend({
-	props: ['post', 'source', 'compact', 'cb'],
+	props: ['note', 'source', 'compact', 'cb'],
 	data() {
 		return {
 			title: placeholder
@@ -68,8 +68,8 @@ export default Vue.extend({
 	},
 	methods: {
 		react(reaction) {
-			(this as any).api('posts/reactions/create', {
-				postId: this.post.id,
+			(this as any).api('notes/reactions/create', {
+				noteId: this.note.id,
 				reaction: reaction
 			}).then(() => {
 				if (this.cb) this.cb();
diff --git a/src/client/app/common/views/components/reactions-viewer.vue b/src/client/app/common/views/components/reactions-viewer.vue
index 246451008f..1afcf525d2 100644
--- a/src/client/app/common/views/components/reactions-viewer.vue
+++ b/src/client/app/common/views/components/reactions-viewer.vue
@@ -17,10 +17,10 @@
 <script lang="ts">
 import Vue from 'vue';
 export default Vue.extend({
-	props: ['post'],
+	props: ['note'],
 	computed: {
 		reactions(): number {
-			return this.post.reactionCounts;
+			return this.note.reactionCounts;
 		}
 	}
 });
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index bfb4b2bbe0..61616da14c 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -1,21 +1,21 @@
 <template>
 <div class="mk-welcome-timeline">
-	<div v-for="post in posts">
-		<router-link class="avatar-anchor" :to="`/@${getAcct(post.user)}`" v-user-preview="post.user.id">
-			<img class="avatar" :src="`${post.user.avatarUrl}?thumbnail&size=96`" alt="avatar"/>
+	<div v-for="note in notes">
+		<router-link class="avatar-anchor" :to="`/@${getAcct(note.user)}`" v-user-preview="note.user.id">
+			<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=96`" alt="avatar"/>
 		</router-link>
 		<div class="body">
 			<header>
-				<router-link class="name" :to="`/@${getAcct(post.user)}`" v-user-preview="post.user.id">{{ getUserName(post.user) }}</router-link>
-				<span class="username">@{{ getAcct(post.user) }}</span>
+				<router-link class="name" :to="`/@${getAcct(note.user)}`" v-user-preview="note.user.id">{{ getUserName(note.user) }}</router-link>
+				<span class="username">@{{ getAcct(note.user) }}</span>
 				<div class="info">
-					<router-link class="created-at" :to="`/@${getAcct(post.user)}/${post.id}`">
-						<mk-time :time="post.createdAt"/>
+					<router-link class="created-at" :to="`/@${getAcct(note.user)}/${note.id}`">
+						<mk-time :time="note.createdAt"/>
 					</router-link>
 				</div>
 			</header>
 			<div class="text">
-				<mk-post-html :text="post.text"/>
+				<mk-note-html :text="note.text"/>
 			</div>
 		</div>
 	</div>
@@ -31,7 +31,7 @@ export default Vue.extend({
 	data() {
 		return {
 			fetching: true,
-			posts: []
+			notes: []
 		};
 	},
 	mounted() {
@@ -42,14 +42,14 @@ export default Vue.extend({
 		getUserName,
 		fetch(cb?) {
 			this.fetching = true;
-			(this as any).api('posts', {
+			(this as any).api('notes', {
 				reply: false,
-				repost: false,
+				renote: false,
 				media: false,
 				poll: false,
 				bot: false
-			}).then(posts => {
-				this.posts = posts;
+			}).then(notes => {
+				this.notes = notes;
 				this.fetching = false;
 			});
 		}
diff --git a/src/client/app/desktop/api/post.ts b/src/client/app/desktop/api/post.ts
index cf49615df3..b569610e1d 100644
--- a/src/client/app/desktop/api/post.ts
+++ b/src/client/app/desktop/api/post.ts
@@ -1,12 +1,12 @@
 import PostFormWindow from '../views/components/post-form-window.vue';
-import RepostFormWindow from '../views/components/repost-form-window.vue';
+import RenoteFormWindow from '../views/components/renote-form-window.vue';
 
 export default function(opts) {
 	const o = opts || {};
-	if (o.repost) {
-		const vm = new RepostFormWindow({
+	if (o.renote) {
+		const vm = new RenoteFormWindow({
 			propsData: {
-				repost: o.repost
+				renote: o.renote
 			}
 		}).$mount();
 		document.body.appendChild(vm.$el);
diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index b95e168544..f57d42aa6f 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -28,7 +28,7 @@ import MkSelectDrive from './views/pages/selectdrive.vue';
 import MkDrive from './views/pages/drive.vue';
 import MkHomeCustomize from './views/pages/home-customize.vue';
 import MkMessagingRoom from './views/pages/messaging-room.vue';
-import MkPost from './views/pages/post.vue';
+import MkNote from './views/pages/note.vue';
 import MkSearch from './views/pages/search.vue';
 import MkOthello from './views/pages/othello.vue';
 
@@ -57,7 +57,7 @@ init(async (launch) => {
 			{ path: '/othello', component: MkOthello },
 			{ path: '/othello/:game', component: MkOthello },
 			{ path: '/@:user', component: MkUser },
-			{ path: '/@:user/:post', component: MkPost }
+			{ path: '/@:user/:note', component: MkNote }
 		]
 	});
 
@@ -114,8 +114,8 @@ function registerNotifications(stream: HomeStreamManager) {
 			setTimeout(n.close.bind(n), 5000);
 		});
 
-		connection.on('mention', post => {
-			const _n = composeNotification('mention', post);
+		connection.on('mention', note => {
+			const _n = composeNotification('mention', note);
 			const n = new Notification(_n.title, {
 				body: _n.body,
 				icon: _n.icon
@@ -123,8 +123,8 @@ function registerNotifications(stream: HomeStreamManager) {
 			setTimeout(n.close.bind(n), 6000);
 		});
 
-		connection.on('reply', post => {
-			const _n = composeNotification('reply', post);
+		connection.on('reply', note => {
+			const _n = composeNotification('reply', note);
 			const n = new Notification(_n.title, {
 				body: _n.body,
 				icon: _n.icon
@@ -132,8 +132,8 @@ function registerNotifications(stream: HomeStreamManager) {
 			setTimeout(n.close.bind(n), 6000);
 		});
 
-		connection.on('quote', post => {
-			const _n = composeNotification('quote', post);
+		connection.on('quote', note => {
+			const _n = composeNotification('quote', note);
 			const n = new Notification(_n.title, {
 				body: _n.body,
 				icon: _n.icon
diff --git a/src/client/app/desktop/views/components/activity.calendar.vue b/src/client/app/desktop/views/components/activity.calendar.vue
index 72233e9aca..8b43536c2b 100644
--- a/src/client/app/desktop/views/components/activity.calendar.vue
+++ b/src/client/app/desktop/views/components/activity.calendar.vue
@@ -29,7 +29,7 @@ import Vue from 'vue';
 export default Vue.extend({
 	props: ['data'],
 	created() {
-		this.data.forEach(d => d.total = d.posts + d.replies + d.reposts);
+		this.data.forEach(d => d.total = d.notes + d.replies + d.renotes);
 		const peak = Math.max.apply(null, this.data.map(d => d.total));
 
 		let x = 0;
diff --git a/src/client/app/desktop/views/components/activity.chart.vue b/src/client/app/desktop/views/components/activity.chart.vue
index 5057786ed4..175c5d37ed 100644
--- a/src/client/app/desktop/views/components/activity.chart.vue
+++ b/src/client/app/desktop/views/components/activity.chart.vue
@@ -1,8 +1,8 @@
 <template>
 <svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" preserveAspectRatio="none" @mousedown.prevent="onMousedown">
-	<title>Black ... Total<br/>Blue ... Posts<br/>Red ... Replies<br/>Green ... Reposts</title>
+	<title>Black ... Total<br/>Blue ... Notes<br/>Red ... Replies<br/>Green ... Renotes</title>
 	<polyline
-		:points="pointsPost"
+		:points="pointsNote"
 		fill="none"
 		stroke-width="1"
 		stroke="#41ddde"/>
@@ -12,7 +12,7 @@
 		stroke-width="1"
 		stroke="#f7796c"/>
 	<polyline
-		:points="pointsRepost"
+		:points="pointsRenote"
 		fill="none"
 		stroke-width="1"
 		stroke="#a1de41"/>
@@ -48,24 +48,24 @@ export default Vue.extend({
 			viewBoxY: 60,
 			zoom: 1,
 			pos: 0,
-			pointsPost: null,
+			pointsNote: null,
 			pointsReply: null,
-			pointsRepost: null,
+			pointsRenote: null,
 			pointsTotal: null
 		};
 	},
 	created() {
 		this.data.reverse();
-		this.data.forEach(d => d.total = d.posts + d.replies + d.reposts);
+		this.data.forEach(d => d.total = d.notes + d.replies + d.renotes);
 		this.render();
 	},
 	methods: {
 		render() {
 			const peak = Math.max.apply(null, this.data.map(d => d.total));
 			if (peak != 0) {
-				this.pointsPost = this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.posts / peak)) * this.viewBoxY}`).join(' ');
+				this.pointsNote = this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.notes / peak)) * this.viewBoxY}`).join(' ');
 				this.pointsReply = this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.replies / peak)) * this.viewBoxY}`).join(' ');
-				this.pointsRepost = this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.reposts / peak)) * this.viewBoxY}`).join(' ');
+				this.pointsRenote = this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.renotes / peak)) * this.viewBoxY}`).join(' ');
 				this.pointsTotal = this.data.map((d, i) => `${(i * this.zoom) + this.pos},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' ');
 			}
 		},
diff --git a/src/client/app/desktop/views/components/index.ts b/src/client/app/desktop/views/components/index.ts
index 3798bf6d2d..4f61f43692 100644
--- a/src/client/app/desktop/views/components/index.ts
+++ b/src/client/app/desktop/views/components/index.ts
@@ -4,23 +4,23 @@ import ui from './ui.vue';
 import uiNotification from './ui-notification.vue';
 import home from './home.vue';
 import timeline from './timeline.vue';
-import posts from './posts.vue';
-import subPostContent from './sub-post-content.vue';
+import notes from './notes.vue';
+import subNoteContent from './sub-note-content.vue';
 import window from './window.vue';
-import postFormWindow from './post-form-window.vue';
-import repostFormWindow from './repost-form-window.vue';
+import noteFormWindow from './post-form-window.vue';
+import renoteFormWindow from './renote-form-window.vue';
 import analogClock from './analog-clock.vue';
 import ellipsisIcon from './ellipsis-icon.vue';
 import mediaImage from './media-image.vue';
 import mediaImageDialog from './media-image-dialog.vue';
 import mediaVideo from './media-video.vue';
 import notifications from './notifications.vue';
-import postForm from './post-form.vue';
-import repostForm from './repost-form.vue';
+import noteForm from './post-form.vue';
+import renoteForm from './renote-form.vue';
 import followButton from './follow-button.vue';
-import postPreview from './post-preview.vue';
+import notePreview from './note-preview.vue';
 import drive from './drive.vue';
-import postDetail from './post-detail.vue';
+import noteDetail from './note-detail.vue';
 import settings from './settings.vue';
 import calendar from './calendar.vue';
 import activity from './activity.vue';
@@ -34,23 +34,23 @@ Vue.component('mk-ui', ui);
 Vue.component('mk-ui-notification', uiNotification);
 Vue.component('mk-home', home);
 Vue.component('mk-timeline', timeline);
-Vue.component('mk-posts', posts);
-Vue.component('mk-sub-post-content', subPostContent);
+Vue.component('mk-notes', notes);
+Vue.component('mk-sub-note-content', subNoteContent);
 Vue.component('mk-window', window);
-Vue.component('mk-post-form-window', postFormWindow);
-Vue.component('mk-repost-form-window', repostFormWindow);
+Vue.component('mk-post-form-window', noteFormWindow);
+Vue.component('mk-renote-form-window', renoteFormWindow);
 Vue.component('mk-analog-clock', analogClock);
 Vue.component('mk-ellipsis-icon', ellipsisIcon);
 Vue.component('mk-media-image', mediaImage);
 Vue.component('mk-media-image-dialog', mediaImageDialog);
 Vue.component('mk-media-video', mediaVideo);
 Vue.component('mk-notifications', notifications);
-Vue.component('mk-post-form', postForm);
-Vue.component('mk-repost-form', repostForm);
+Vue.component('mk-post-form', noteForm);
+Vue.component('mk-renote-form', renoteForm);
 Vue.component('mk-follow-button', followButton);
-Vue.component('mk-post-preview', postPreview);
+Vue.component('mk-note-preview', notePreview);
 Vue.component('mk-drive', drive);
-Vue.component('mk-post-detail', postDetail);
+Vue.component('mk-note-detail', noteDetail);
 Vue.component('mk-settings', settings);
 Vue.component('mk-calendar', calendar);
 Vue.component('mk-activity', activity);
diff --git a/src/client/app/desktop/views/components/mentions.vue b/src/client/app/desktop/views/components/mentions.vue
index 90a92495b7..fc3a7af75d 100644
--- a/src/client/app/desktop/views/components/mentions.vue
+++ b/src/client/app/desktop/views/components/mentions.vue
@@ -7,12 +7,12 @@
 	<div class="fetching" v-if="fetching">
 		<mk-ellipsis-icon/>
 	</div>
-	<p class="empty" v-if="posts.length == 0 && !fetching">
+	<p class="empty" v-if="notes.length == 0 && !fetching">
 		%fa:R comments%
 		<span v-if="mode == 'all'">あなた宛ての投稿はありません。</span>
 		<span v-if="mode == 'following'">あなたがフォローしているユーザーからの言及はありません。</span>
 	</p>
-	<mk-posts :posts="posts" ref="timeline"/>
+	<mk-notes :notes="notes" ref="timeline"/>
 </div>
 </template>
 
@@ -24,7 +24,7 @@ export default Vue.extend({
 			fetching: true,
 			moreFetching: false,
 			mode: 'all',
-			posts: []
+			notes: []
 		};
 	},
 	watch: {
@@ -56,23 +56,23 @@ export default Vue.extend({
 		},
 		fetch(cb?) {
 			this.fetching = true;
-			this.posts =  [];
-			(this as any).api('posts/mentions', {
+			this.notes =  [];
+			(this as any).api('notes/mentions', {
 				following: this.mode == 'following'
-			}).then(posts => {
-				this.posts = posts;
+			}).then(notes => {
+				this.notes = notes;
 				this.fetching = false;
 				if (cb) cb();
 			});
 		},
 		more() {
-			if (this.moreFetching || this.fetching || this.posts.length == 0) return;
+			if (this.moreFetching || this.fetching || this.notes.length == 0) return;
 			this.moreFetching = true;
-			(this as any).api('posts/mentions', {
+			(this as any).api('notes/mentions', {
 				following: this.mode == 'following',
-				untilId: this.posts[this.posts.length - 1].id
-			}).then(posts => {
-				this.posts = this.posts.concat(posts);
+				untilId: this.notes[this.notes.length - 1].id
+			}).then(notes => {
+				this.notes = this.notes.concat(notes);
 				this.moreFetching = false;
 			});
 		}
diff --git a/src/client/app/desktop/views/components/note-detail.sub.vue b/src/client/app/desktop/views/components/note-detail.sub.vue
new file mode 100644
index 0000000000..0159d1ad47
--- /dev/null
+++ b/src/client/app/desktop/views/components/note-detail.sub.vue
@@ -0,0 +1,130 @@
+<template>
+<div class="sub" :title="title">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
+		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
+	</router-link>
+	<div class="main">
+		<header>
+			<div class="left">
+				<router-link class="name" :to="`/@${acct}`" v-user-preview="note.userId">{{ getUserName(note.user) }}</router-link>
+				<span class="username">@{{ acct }}</span>
+			</div>
+			<div class="right">
+				<router-link class="time" :to="`/@${acct}/${note.id}`">
+					<mk-time :time="note.createdAt"/>
+				</router-link>
+			</div>
+		</header>
+		<div class="body">
+			<mk-note-html v-if="note.text" :text="note.text" :i="os.i" :class="$style.text"/>
+			<div class="media" v-if="note.media > 0">
+				<mk-media-list :media-list="note.media"/>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import dateStringify from '../../../common/scripts/date-stringify';
+import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
+
+export default Vue.extend({
+	props: ['note'],
+	computed: {
+		acct() {
+			return getAcct(this.note.user);
+		},
+		name() {
+			return getUserName(this.note.user);
+		},
+		title(): string {
+			return dateStringify(this.note.createdAt);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.sub
+	margin 0
+	padding 20px 32px
+	background #fdfdfd
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	&:hover
+		> .main > footer > button
+			color #888
+
+	> .avatar-anchor
+		display block
+		float left
+		margin 0 16px 0 0
+
+		> .avatar
+			display block
+			width 44px
+			height 44px
+			margin 0
+			border-radius 4px
+			vertical-align bottom
+
+	> .main
+		float left
+		width calc(100% - 60px)
+
+		> header
+			margin-bottom 4px
+			white-space nowrap
+
+			&:after
+				content ""
+				display block
+				clear both
+
+			> .left
+				float left
+
+				> .name
+					display inline
+					margin 0
+					padding 0
+					color #777
+					font-size 1em
+					font-weight 700
+					text-align left
+					text-decoration none
+
+					&:hover
+						text-decoration underline
+
+				> .username
+					text-align left
+					margin 0 0 0 8px
+					color #ccc
+
+			> .right
+				float right
+
+				> .time
+					font-size 0.9em
+					color #c0c0c0
+
+</style>
+
+<style lang="stylus" module>
+.text
+	cursor default
+	display block
+	margin 0
+	padding 0
+	overflow-wrap break-word
+	font-size 1em
+	color #717171
+</style>
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
new file mode 100644
index 0000000000..790f797ad6
--- /dev/null
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -0,0 +1,448 @@
+<template>
+<div class="mk-note-detail" :title="title">
+	<button
+		class="read-more"
+		v-if="p.reply && p.reply.replyId && context == null"
+		title="会話をもっと読み込む"
+		@click="fetchContext"
+		:disabled="contextFetching"
+	>
+		<template v-if="!contextFetching">%fa:ellipsis-v%</template>
+		<template v-if="contextFetching">%fa:spinner .pulse%</template>
+	</button>
+	<div class="context">
+		<x-sub v-for="note in context" :key="note.id" :note="note"/>
+	</div>
+	<div class="reply-to" v-if="p.reply">
+		<x-sub :note="p.reply"/>
+	</div>
+	<div class="renote" v-if="isRenote">
+		<p>
+			<router-link class="avatar-anchor" :to="`/@${acct}`" v-user-preview="note.userId">
+				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
+			</router-link>
+			%fa:retweet%
+			<router-link class="name" :href="`/@${acct}`">{{ getUserName(note.user) }}</router-link>
+			がRenote
+		</p>
+	</div>
+	<article>
+		<router-link class="avatar-anchor" :to="`/@${pAcct}`">
+			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
+		</router-link>
+		<header>
+			<router-link class="name" :to="`/@${pAcct}`" v-user-preview="p.user.id">{{ getUserName(p.user) }}</router-link>
+			<span class="username">@{{ pAcct }}</span>
+			<router-link class="time" :to="`/@${pAcct}/${p.id}`">
+				<mk-time :time="p.createdAt"/>
+			</router-link>
+		</header>
+		<div class="body">
+			<mk-note-html :class="$style.text" v-if="p.text" :text="p.text" :i="os.i"/>
+			<div class="media" v-if="p.media.length > 0">
+				<mk-media-list :media-list="p.media"/>
+			</div>
+			<mk-poll v-if="p.poll" :note="p"/>
+			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+			<div class="tags" v-if="p.tags && p.tags.length > 0">
+				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
+			</div>
+			<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
+			<div class="map" v-if="p.geo" ref="map"></div>
+			<div class="renote" v-if="p.renote">
+				<mk-note-preview :note="p.renote"/>
+			</div>
+		</div>
+		<footer>
+			<mk-reactions-viewer :note="p"/>
+			<button @click="reply" title="返信">
+				%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
+			</button>
+			<button @click="renote" title="Renote">
+				%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
+			</button>
+			<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="リアクション">
+				%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
+			</button>
+			<button @click="menu" ref="menuButton">
+				%fa:ellipsis-h%
+			</button>
+		</footer>
+	</article>
+	<div class="replies" v-if="!compact">
+		<x-sub v-for="note in replies" :key="note.id" :note="note"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import dateStringify from '../../../common/scripts/date-stringify';
+import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
+import parse from '../../../../../text/parse';
+
+import MkPostFormWindow from './post-form-window.vue';
+import MkRenoteFormWindow from './renote-form-window.vue';
+import MkNoteMenu from '../../../common/views/components/note-menu.vue';
+import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
+import XSub from './note-detail.sub.vue';
+
+export default Vue.extend({
+	components: {
+		XSub
+	},
+
+	props: {
+		note: {
+			type: Object,
+			required: true
+		},
+		compact: {
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			context: [],
+			contextFetching: false,
+			replies: []
+		};
+	},
+
+	computed: {
+		isRenote(): boolean {
+			return (this.note.renote &&
+				this.note.text == null &&
+				this.note.mediaIds == null &&
+				this.note.poll == null);
+		},
+		p(): any {
+			return this.isRenote ? this.note.renote : this.note;
+		},
+		reactionsCount(): number {
+			return this.p.reactionCounts
+				? Object.keys(this.p.reactionCounts)
+					.map(key => this.p.reactionCounts[key])
+					.reduce((a, b) => a + b)
+				: 0;
+		},
+		title(): string {
+			return dateStringify(this.p.createdAt);
+		},
+		acct(): string {
+			return getAcct(this.note.user);
+		},
+		name(): string {
+			return getUserName(this.note.user);
+		},
+		pAcct(): string {
+			return getAcct(this.p.user);
+		},
+		pName(): string {
+			return getUserName(this.p.user);
+		},
+		urls(): string[] {
+			if (this.p.text) {
+				const ast = parse(this.p.text);
+				return ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
+		}
+	},
+
+	mounted() {
+		// Get replies
+		if (!this.compact) {
+			(this as any).api('notes/replies', {
+				noteId: this.p.id,
+				limit: 8
+			}).then(replies => {
+				this.replies = replies;
+			});
+		}
+
+		// Draw map
+		if (this.p.geo) {
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.account.clientSettings.showMaps : true;
+			if (shouldShowMap) {
+				(this as any).os.getGoogleMaps().then(maps => {
+					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
+					const map = new maps.Map(this.$refs.map, {
+						center: uluru,
+						zoom: 15
+					});
+					new maps.Marker({
+						position: uluru,
+						map: map
+					});
+				});
+			}
+		}
+	},
+
+	methods: {
+		fetchContext() {
+			this.contextFetching = true;
+
+			// Fetch context
+			(this as any).api('notes/context', {
+				noteId: this.p.replyId
+			}).then(context => {
+				this.contextFetching = false;
+				this.context = context.reverse();
+			});
+		},
+		reply() {
+			(this as any).os.new(MkPostFormWindow, {
+				reply: this.p
+			});
+		},
+		renote() {
+			(this as any).os.new(MkRenoteFormWindow, {
+				note: this.p
+			});
+		},
+		react() {
+			(this as any).os.new(MkReactionPicker, {
+				source: this.$refs.reactButton,
+				note: this.p
+			});
+		},
+		menu() {
+			(this as any).os.new(MkNoteMenu, {
+				source: this.$refs.menuButton,
+				note: this.p
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-note-detail
+	margin 0
+	padding 0
+	overflow hidden
+	text-align left
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.1)
+	border-radius 8px
+
+	> .read-more
+		display block
+		margin 0
+		padding 10px 0
+		width 100%
+		font-size 1em
+		text-align center
+		color #999
+		cursor pointer
+		background #fafafa
+		outline none
+		border none
+		border-bottom solid 1px #eef0f2
+		border-radius 6px 6px 0 0
+
+		&:hover
+			background #f6f6f6
+
+		&:active
+			background #f0f0f0
+
+		&:disabled
+			color #ccc
+
+	> .context
+		> *
+			border-bottom 1px solid #eef0f2
+
+	> .renote
+		color #9dbb00
+		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+
+		> p
+			margin 0
+			padding 16px 32px
+
+			.avatar-anchor
+				display inline-block
+
+				.avatar
+					vertical-align bottom
+					min-width 28px
+					min-height 28px
+					max-width 28px
+					max-height 28px
+					margin 0 8px 0 0
+					border-radius 6px
+
+			[data-fa]
+				margin-right 4px
+
+			.name
+				font-weight bold
+
+		& + article
+			padding-top 8px
+
+	> .reply-to
+		border-bottom 1px solid #eef0f2
+
+	> article
+		padding 28px 32px 18px 32px
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		&:hover
+			> .main > footer > button
+				color #888
+
+		> .avatar-anchor
+			display block
+			width 60px
+			height 60px
+
+			> .avatar
+				display block
+				width 60px
+				height 60px
+				margin 0
+				border-radius 8px
+				vertical-align bottom
+
+		> header
+			position absolute
+			top 28px
+			left 108px
+			width calc(100% - 108px)
+
+			> .name
+				display inline-block
+				margin 0
+				line-height 24px
+				color #777
+				font-size 18px
+				font-weight 700
+				text-align left
+				text-decoration none
+
+				&:hover
+					text-decoration underline
+
+			> .username
+				display block
+				text-align left
+				margin 0
+				color #ccc
+
+			> .time
+				position absolute
+				top 0
+				right 32px
+				font-size 1em
+				color #c0c0c0
+
+		> .body
+			padding 8px 0
+
+			> .renote
+				margin 8px 0
+
+				> .mk-note-preview
+					padding 16px
+					border dashed 1px #c0dac6
+					border-radius 8px
+
+			> .location
+				margin 4px 0
+				font-size 12px
+				color #ccc
+
+			> .map
+				width 100%
+				height 300px
+
+				&:empty
+					display none
+
+			> .mk-url-preview
+				margin-top 8px
+
+			> .tags
+				margin 4px 0 0 0
+
+				> *
+					display inline-block
+					margin 0 8px 0 0
+					padding 2px 8px 2px 16px
+					font-size 90%
+					color #8d969e
+					background #edf0f3
+					border-radius 4px
+
+					&:before
+						content ""
+						display block
+						position absolute
+						top 0
+						bottom 0
+						left 4px
+						width 8px
+						height 8px
+						margin auto 0
+						background #fff
+						border-radius 100%
+
+					&:hover
+						text-decoration none
+						background #e2e7ec
+
+		> footer
+			font-size 1.2em
+
+			> button
+				margin 0 28px 0 0
+				padding 8px
+				background transparent
+				border none
+				font-size 1em
+				color #ddd
+				cursor pointer
+
+				&:hover
+					color #666
+
+				> .count
+					display inline
+					margin 0 0 0 8px
+					color #999
+
+				&.reacted
+					color $theme-color
+
+	> .replies
+		> *
+			border-top 1px solid #eef0f2
+
+</style>
+
+<style lang="stylus" module>
+.text
+	cursor default
+	display block
+	margin 0
+	padding 0
+	overflow-wrap break-word
+	font-size 1.5em
+	color #717171
+</style>
diff --git a/src/client/app/desktop/views/components/note-preview.vue b/src/client/app/desktop/views/components/note-preview.vue
new file mode 100644
index 0000000000..bff199c09d
--- /dev/null
+++ b/src/client/app/desktop/views/components/note-preview.vue
@@ -0,0 +1,107 @@
+<template>
+<div class="mk-note-preview" :title="title">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
+		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
+	</router-link>
+	<div class="main">
+		<header>
+			<router-link class="name" :to="`/@${acct}`" v-user-preview="note.userId">{{ name }}</router-link>
+			<span class="username">@{{ acct }}</span>
+			<router-link class="time" :to="`/@${acct}/${note.id}`">
+				<mk-time :time="note.createdAt"/>
+			</router-link>
+		</header>
+		<div class="body">
+			<mk-sub-note-content class="text" :note="note"/>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import dateStringify from '../../../common/scripts/date-stringify';
+import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
+
+export default Vue.extend({
+	props: ['note'],
+	computed: {
+		acct() {
+			return getAcct(this.note.user);
+		},
+		name() {
+			return getUserName(this.note.user);
+		},
+		title(): string {
+			return dateStringify(this.note.createdAt);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-note-preview
+	font-size 0.9em
+	background #fff
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	&:hover
+		> .main > footer > button
+			color #888
+
+	> .avatar-anchor
+		display block
+		float left
+		margin 0 16px 0 0
+
+		> .avatar
+			display block
+			width 52px
+			height 52px
+			margin 0
+			border-radius 8px
+			vertical-align bottom
+
+	> .main
+		float left
+		width calc(100% - 68px)
+
+		> header
+			display flex
+			white-space nowrap
+
+			> .name
+				margin 0 .5em 0 0
+				padding 0
+				color #607073
+				font-size 1em
+				font-weight bold
+				text-decoration none
+				white-space normal
+
+				&:hover
+					text-decoration underline
+
+			> .username
+				margin 0 .5em 0 0
+				color #d1d8da
+
+			> .time
+				margin-left auto
+				color #b2b8bb
+
+		> .body
+
+			> .text
+				cursor default
+				margin 0
+				padding 0
+				font-size 1.1em
+				color #717171
+
+</style>
diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue
new file mode 100644
index 0000000000..b49d12b92e
--- /dev/null
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -0,0 +1,116 @@
+<template>
+<div class="sub" :title="title">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
+		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
+	</router-link>
+	<div class="main">
+		<header>
+			<router-link class="name" :to="`/@${acct}`" v-user-preview="note.userId">{{ name }}</router-link>
+			<span class="username">@{{ acct }}</span>
+			<router-link class="created-at" :to="`/@${acct}/${note.id}`">
+				<mk-time :time="note.createdAt"/>
+			</router-link>
+		</header>
+		<div class="body">
+			<mk-sub-note-content class="text" :note="note"/>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import dateStringify from '../../../common/scripts/date-stringify';
+import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
+
+export default Vue.extend({
+	props: ['note'],
+	computed: {
+		acct() {
+			return getAcct(this.note.user);
+		},
+		name(): string {
+			return getUserName(this.note.user);
+		},
+		title(): string {
+			return dateStringify(this.note.createdAt);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.sub
+	margin 0
+	padding 16px
+	font-size 0.9em
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	&:hover
+		> .main > footer > button
+			color #888
+
+	> .avatar-anchor
+		display block
+		float left
+		margin 0 14px 0 0
+
+		> .avatar
+			display block
+			width 52px
+			height 52px
+			margin 0
+			border-radius 8px
+			vertical-align bottom
+
+	> .main
+		float left
+		width calc(100% - 66px)
+
+		> header
+			display flex
+			margin-bottom 2px
+			white-space nowrap
+			line-height 21px
+
+			> .name
+				display block
+				margin 0 .5em 0 0
+				padding 0
+				overflow hidden
+				color #607073
+				font-size 1em
+				font-weight bold
+				text-decoration none
+				text-overflow ellipsis
+
+				&:hover
+					text-decoration underline
+
+			> .username
+				margin 0 .5em 0 0
+				color #d1d8da
+
+			> .created-at
+				margin-left auto
+				color #b2b8bb
+
+		> .body
+
+			> .text
+				cursor default
+				margin 0
+				padding 0
+				font-size 1.1em
+				color #717171
+
+				pre
+					max-height 120px
+					font-size 80%
+
+</style>
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
new file mode 100644
index 0000000000..924642c01a
--- /dev/null
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -0,0 +1,596 @@
+<template>
+<div class="note" tabindex="-1" :title="title" @keydown="onKeydown">
+	<div class="reply-to" v-if="p.reply">
+		<x-sub :note="p.reply"/>
+	</div>
+	<div class="renote" v-if="isRenote">
+		<p>
+			<router-link class="avatar-anchor" :to="`/@${acct}`" v-user-preview="note.userId">
+				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
+			</router-link>
+			%fa:retweet%
+			<span>{{ '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.indexOf('{')) }}</span>
+			<a class="name" :href="`/@${acct}`" v-user-preview="note.userId">{{ getUserName(note.user) }}</a>
+			<span>{{ '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-note.reposted-by%'.indexOf('}') + 1) }}</span>
+		</p>
+		<mk-time :time="note.createdAt"/>
+	</div>
+	<article>
+		<router-link class="avatar-anchor" :to="`/@${acct}`">
+			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
+		</router-link>
+		<div class="main">
+			<header>
+				<router-link class="name" :to="`/@${acct}`" v-user-preview="p.user.id">{{ acct }}</router-link>
+				<span class="is-bot" v-if="p.user.host === null && p.user.account.isBot">bot</span>
+				<span class="username">@{{ acct }}</span>
+				<div class="info">
+					<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
+					<span class="mobile" v-if="p.viaMobile">%fa:mobile-alt%</span>
+					<router-link class="created-at" :to="url">
+						<mk-time :time="p.createdAt"/>
+					</router-link>
+				</div>
+			</header>
+			<div class="body">
+				<p class="channel" v-if="p.channel">
+					<a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>:
+				</p>
+				<div class="text">
+					<a class="reply" v-if="p.reply">%fa:reply%</a>
+					<mk-note-html v-if="p.textHtml" :text="p.text" :i="os.i" :class="$style.text"/>
+					<a class="rp" v-if="p.renote">RP:</a>
+				</div>
+				<div class="media" v-if="p.media.length > 0">
+					<mk-media-list :media-list="p.media"/>
+				</div>
+				<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
+				<div class="tags" v-if="p.tags && p.tags.length > 0">
+					<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
+				</div>
+				<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
+				<div class="map" v-if="p.geo" ref="map"></div>
+				<div class="renote" v-if="p.renote">
+					<mk-note-preview :note="p.renote"/>
+				</div>
+				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+			</div>
+			<footer>
+				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
+				<button @click="reply" title="%i18n:desktop.tags.mk-timeline-note.reply%">
+					%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
+				</button>
+				<button @click="renote" title="%i18n:desktop.tags.mk-timeline-note.renote%">
+					%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
+				</button>
+				<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:desktop.tags.mk-timeline-note.add-reaction%">
+					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
+				</button>
+				<button @click="menu" ref="menuButton">
+					%fa:ellipsis-h%
+				</button>
+				<button title="%i18n:desktop.tags.mk-timeline-note.detail">
+					<template v-if="!isDetailOpened">%fa:caret-down%</template>
+					<template v-if="isDetailOpened">%fa:caret-up%</template>
+				</button>
+			</footer>
+		</div>
+	</article>
+	<div class="detail" v-if="isDetailOpened">
+		<mk-note-status-graph width="462" height="130" :note="p"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import dateStringify from '../../../common/scripts/date-stringify';
+import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
+import parse from '../../../../../text/parse';
+
+import MkPostFormWindow from './post-form-window.vue';
+import MkRenoteFormWindow from './renote-form-window.vue';
+import MkNoteMenu from '../../../common/views/components/note-menu.vue';
+import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
+import XSub from './notes.note.sub.vue';
+
+function focus(el, fn) {
+	const target = fn(el);
+	if (target) {
+		if (target.hasAttribute('tabindex')) {
+			target.focus();
+		} else {
+			focus(target, fn);
+		}
+	}
+}
+
+export default Vue.extend({
+	components: {
+		XSub
+	},
+
+	props: ['note'],
+
+	data() {
+		return {
+			isDetailOpened: false,
+			connection: null,
+			connectionId: null
+		};
+	},
+
+	computed: {
+		acct(): string {
+			return getAcct(this.p.user);
+		},
+		name(): string {
+			return getUserName(this.p.user);
+		},
+		isRenote(): boolean {
+			return (this.note.renote &&
+				this.note.text == null &&
+				this.note.mediaIds == null &&
+				this.note.poll == null);
+		},
+		p(): any {
+			return this.isRenote ? this.note.renote : this.note;
+		},
+		reactionsCount(): number {
+			return this.p.reactionCounts
+				? Object.keys(this.p.reactionCounts)
+					.map(key => this.p.reactionCounts[key])
+					.reduce((a, b) => a + b)
+				: 0;
+		},
+		title(): string {
+			return dateStringify(this.p.createdAt);
+		},
+		url(): string {
+			return `/@${this.acct}/${this.p.id}`;
+		},
+		urls(): string[] {
+			if (this.p.text) {
+				const ast = parse(this.p.text);
+				return ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
+		}
+	},
+
+	created() {
+		if ((this as any).os.isSignedIn) {
+			this.connection = (this as any).os.stream.getConnection();
+			this.connectionId = (this as any).os.stream.use();
+		}
+	},
+
+	mounted() {
+		this.capture(true);
+
+		if ((this as any).os.isSignedIn) {
+			this.connection.on('_connected_', this.onStreamConnected);
+		}
+
+		// Draw map
+		if (this.p.geo) {
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.account.clientSettings.showMaps : true;
+			if (shouldShowMap) {
+				(this as any).os.getGoogleMaps().then(maps => {
+					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
+					const map = new maps.Map(this.$refs.map, {
+						center: uluru,
+						zoom: 15
+					});
+					new maps.Marker({
+						position: uluru,
+						map: map
+					});
+				});
+			}
+		}
+	},
+
+	beforeDestroy() {
+		this.decapture(true);
+
+		if ((this as any).os.isSignedIn) {
+			this.connection.off('_connected_', this.onStreamConnected);
+			(this as any).os.stream.dispose(this.connectionId);
+		}
+	},
+
+	methods: {
+		capture(withHandler = false) {
+			if ((this as any).os.isSignedIn) {
+				this.connection.send({
+					type: 'capture',
+					id: this.p.id
+				});
+				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
+			}
+		},
+		decapture(withHandler = false) {
+			if ((this as any).os.isSignedIn) {
+				this.connection.send({
+					type: 'decapture',
+					id: this.p.id
+				});
+				if (withHandler) this.connection.off('note-updated', this.onStreamNoteUpdated);
+			}
+		},
+		onStreamConnected() {
+			this.capture();
+		},
+		onStreamNoteUpdated(data) {
+			const note = data.note;
+			if (note.id == this.note.id) {
+				this.$emit('update:note', note);
+			} else if (note.id == this.note.renoteId) {
+				this.note.renote = note;
+			}
+		},
+		reply() {
+			(this as any).os.new(MkPostFormWindow, {
+				reply: this.p
+			});
+		},
+		renote() {
+			(this as any).os.new(MkRenoteFormWindow, {
+				note: this.p
+			});
+		},
+		react() {
+			(this as any).os.new(MkReactionPicker, {
+				source: this.$refs.reactButton,
+				note: this.p
+			});
+		},
+		menu() {
+			(this as any).os.new(MkNoteMenu, {
+				source: this.$refs.menuButton,
+				note: this.p
+			});
+		},
+		onKeydown(e) {
+			let shouldBeCancel = true;
+
+			switch (true) {
+				case e.which == 38: // [↑]
+				case e.which == 74: // [j]
+				case e.which == 9 && e.shiftKey: // [Shift] + [Tab]
+					focus(this.$el, e => e.previousElementSibling);
+					break;
+
+				case e.which == 40: // [↓]
+				case e.which == 75: // [k]
+				case e.which == 9: // [Tab]
+					focus(this.$el, e => e.nextElementSibling);
+					break;
+
+				case e.which == 81: // [q]
+				case e.which == 69: // [e]
+					this.renote();
+					break;
+
+				case e.which == 70: // [f]
+				case e.which == 76: // [l]
+					//this.like();
+					break;
+
+				case e.which == 82: // [r]
+					this.reply();
+					break;
+
+				default:
+					shouldBeCancel = false;
+			}
+
+			if (shouldBeCancel) e.preventDefault();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.note
+	margin 0
+	padding 0
+	background #fff
+	border-bottom solid 1px #eaeaea
+
+	&:first-child
+		border-top-left-radius 6px
+		border-top-right-radius 6px
+
+		> .renote
+			border-top-left-radius 6px
+			border-top-right-radius 6px
+
+	&:last-of-type
+		border-bottom none
+
+	&:focus
+		z-index 1
+
+		&:after
+			content ""
+			pointer-events none
+			position absolute
+			top 2px
+			right 2px
+			bottom 2px
+			left 2px
+			border 2px solid rgba($theme-color, 0.3)
+			border-radius 4px
+
+	> .renote
+		color #9dbb00
+		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+
+		> p
+			margin 0
+			padding 16px 32px
+			line-height 28px
+
+			.avatar-anchor
+				display inline-block
+
+				.avatar
+					vertical-align bottom
+					width 28px
+					height 28px
+					margin 0 8px 0 0
+					border-radius 6px
+
+			[data-fa]
+				margin-right 4px
+
+			.name
+				font-weight bold
+
+		> .mk-time
+			position absolute
+			top 16px
+			right 32px
+			font-size 0.9em
+			line-height 28px
+
+		& + article
+			padding-top 8px
+
+	> .reply-to
+		padding 0 16px
+		background rgba(0, 0, 0, 0.0125)
+
+		> .mk-note-preview
+			background transparent
+
+	> article
+		padding 28px 32px 18px 32px
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		&:hover
+			> .main > footer > button
+				color #888
+
+		> .avatar-anchor
+			display block
+			float left
+			margin 0 16px 10px 0
+			//position -webkit-sticky
+			//position sticky
+			//top 74px
+
+			> .avatar
+				display block
+				width 58px
+				height 58px
+				margin 0
+				border-radius 8px
+				vertical-align bottom
+
+		> .main
+			float left
+			width calc(100% - 74px)
+
+			> header
+				display flex
+				align-items center
+				margin-bottom 4px
+				white-space nowrap
+
+				> .name
+					display block
+					margin 0 .5em 0 0
+					padding 0
+					overflow hidden
+					color #627079
+					font-size 1em
+					font-weight bold
+					text-decoration none
+					text-overflow ellipsis
+
+					&:hover
+						text-decoration underline
+
+				> .is-bot
+					margin 0 .5em 0 0
+					padding 1px 6px
+					font-size 12px
+					color #aaa
+					border solid 1px #ddd
+					border-radius 3px
+
+				> .username
+					margin 0 .5em 0 0
+					color #ccc
+
+				> .info
+					margin-left auto
+					font-size 0.9em
+
+					> .mobile
+						margin-right 8px
+						color #ccc
+
+					> .app
+						margin-right 8px
+						padding-right 8px
+						color #ccc
+						border-right solid 1px #eaeaea
+
+					> .created-at
+						color #c0c0c0
+
+			> .body
+
+				> .text
+					cursor default
+					display block
+					margin 0
+					padding 0
+					overflow-wrap break-word
+					font-size 1.1em
+					color #717171
+
+					>>> .quote
+						margin 8px
+						padding 6px 12px
+						color #aaa
+						border-left solid 3px #eee
+
+					> .reply
+						margin-right 8px
+						color #717171
+
+					> .rp
+						margin-left 4px
+						font-style oblique
+						color #a0bf46
+
+				> .location
+					margin 4px 0
+					font-size 12px
+					color #ccc
+
+				> .map
+					width 100%
+					height 300px
+
+					&:empty
+						display none
+
+				> .tags
+					margin 4px 0 0 0
+
+					> *
+						display inline-block
+						margin 0 8px 0 0
+						padding 2px 8px 2px 16px
+						font-size 90%
+						color #8d969e
+						background #edf0f3
+						border-radius 4px
+
+						&:before
+							content ""
+							display block
+							position absolute
+							top 0
+							bottom 0
+							left 4px
+							width 8px
+							height 8px
+							margin auto 0
+							background #fff
+							border-radius 100%
+
+						&:hover
+							text-decoration none
+							background #e2e7ec
+
+				.mk-url-preview
+					margin-top 8px
+
+				> .channel
+					margin 0
+
+				> .mk-poll
+					font-size 80%
+
+				> .renote
+					margin 8px 0
+
+					> .mk-note-preview
+						padding 16px
+						border dashed 1px #c0dac6
+						border-radius 8px
+
+			> footer
+				> button
+					margin 0 28px 0 0
+					padding 0 8px
+					line-height 32px
+					font-size 1em
+					color #ddd
+					background transparent
+					border none
+					cursor pointer
+
+					&:hover
+						color #666
+
+					> .count
+						display inline
+						margin 0 0 0 8px
+						color #999
+
+					&.reacted
+						color $theme-color
+
+					&:last-child
+						position absolute
+						right 0
+						margin 0
+
+	> .detail
+		padding-top 4px
+		background rgba(0, 0, 0, 0.0125)
+
+</style>
+
+<style lang="stylus" module>
+.text
+
+	code
+		padding 4px 8px
+		margin 0 0.5em
+		font-size 80%
+		color #525252
+		background #f8f8f8
+		border-radius 2px
+
+	pre > code
+		padding 16px
+		margin 0
+
+	[data-is-me]:after
+		content "you"
+		padding 0 4px
+		margin-left 4px
+		font-size 80%
+		color $theme-color-foreground
+		background $theme-color
+		border-radius 4px
+</style>
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
new file mode 100644
index 0000000000..b5f6957a16
--- /dev/null
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -0,0 +1,89 @@
+<template>
+<div class="mk-notes">
+	<template v-for="(note, i) in _notes">
+		<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
+		<p class="date" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
+			<span>%fa:angle-up%{{ note._datetext }}</span>
+			<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
+		</p>
+	</template>
+	<footer>
+		<slot name="footer"></slot>
+	</footer>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XNote from './notes.note.vue';
+
+export default Vue.extend({
+	components: {
+		XNote
+	},
+	props: {
+		notes: {
+			type: Array,
+			default: () => []
+		}
+	},
+	computed: {
+		_notes(): any[] {
+			return (this.notes as any).map(note => {
+				const date = new Date(note.createdAt).getDate();
+				const month = new Date(note.createdAt).getMonth() + 1;
+				note._date = date;
+				note._datetext = `${month}月 ${date}日`;
+				return note;
+			});
+		}
+	},
+	methods: {
+		focus() {
+			(this.$el as any).children[0].focus();
+		},
+		onNoteUpdated(i, note) {
+			Vue.set((this as any).notes, i, note);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-notes
+
+	> .date
+		display block
+		margin 0
+		line-height 32px
+		font-size 14px
+		text-align center
+		color #aaa
+		background #fdfdfd
+		border-bottom solid 1px #eaeaea
+
+		span
+			margin 0 16px
+
+		[data-fa]
+			margin-right 8px
+
+	> footer
+		> *
+			display block
+			margin 0
+			padding 16px
+			width 100%
+			text-align center
+			color #ccc
+			border-top solid 1px #eaeaea
+			border-bottom-left-radius 4px
+			border-bottom-right-radius 4px
+
+		> button
+			&:hover
+				background #f5f5f5
+
+			&:active
+				background #eee
+</style>
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index d8b8eab212..100a803cc2 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -13,33 +13,33 @@
 							<mk-reaction-icon :reaction="notification.reaction"/>
 							<router-link :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">{{ getUserName(notification.user) }}</router-link>
 						</p>
-						<router-link class="post-ref" :to="`/@${getAcct(notification.post.user)}/${notification.post.id}`">
-							%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
+						<router-link class="note-ref" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">
+							%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
 						</router-link>
 					</div>
 				</template>
-				<template v-if="notification.type == 'repost'">
-					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">
-						<img class="avatar" :src="`${notification.post.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
+				<template v-if="notification.type == 'renote'">
+					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.note.user)}`" v-user-preview="notification.note.userId">
+						<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
 						<p>%fa:retweet%
-							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">{{ getUserName(notification.post.user) }}</router-link>
+							<router-link :to="`/@${getAcct(notification.note.user)}`" v-user-preview="notification.note.userId">{{ getUserName(notification.note.user) }}</router-link>
 						</p>
-						<router-link class="post-ref" :to="`/@${getAcct(notification.post.user)}/${notification.post.id}`">
-							%fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right%
+						<router-link class="note-ref" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">
+							%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
 						</router-link>
 					</div>
 				</template>
 				<template v-if="notification.type == 'quote'">
-					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">
-						<img class="avatar" :src="`${notification.post.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
+					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.note.user)}`" v-user-preview="notification.note.userId">
+						<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
 						<p>%fa:quote-left%
-							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">{{ getUserName(notification.post.user) }}</router-link>
+							<router-link :to="`/@${getAcct(notification.note.user)}`" v-user-preview="notification.note.userId">{{ getUserName(notification.note.user) }}</router-link>
 						</p>
-						<router-link class="post-preview" :to="`/@${getAcct(notification.post.user)}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
+						<router-link class="note-preview" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">{{ getNoteSummary(notification.note) }}</router-link>
 					</div>
 				</template>
 				<template v-if="notification.type == 'follow'">
@@ -53,25 +53,25 @@
 					</div>
 				</template>
 				<template v-if="notification.type == 'reply'">
-					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">
-						<img class="avatar" :src="`${notification.post.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
+					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.note.user)}`" v-user-preview="notification.note.userId">
+						<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
 						<p>%fa:reply%
-							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">{{ getUserName(notification.post.user) }}</router-link>
+							<router-link :to="`/@${getAcct(notification.note.user)}`" v-user-preview="notification.note.userId">{{ getUserName(notification.note.user) }}</router-link>
 						</p>
-						<router-link class="post-preview" :to="`/@${getAcct(notification.post.user)}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
+						<router-link class="note-preview" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">{{ getNoteSummary(notification.note) }}</router-link>
 					</div>
 				</template>
 				<template v-if="notification.type == 'mention'">
-					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">
-						<img class="avatar" :src="`${notification.post.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
+					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.note.user)}`" v-user-preview="notification.note.userId">
+						<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
 						<p>%fa:at%
-							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.userId">{{ getUserName(notification.post.user) }}</router-link>
+							<router-link :to="`/@${getAcct(notification.note.user)}`" v-user-preview="notification.note.userId">{{ getUserName(notification.note.user) }}</router-link>
 						</p>
-						<a class="post-preview" :href="`/@${getAcct(notification.post.user)}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a>
+						<a class="note-preview" :href="`/@${getAcct(notification.note.user)}/${notification.note.id}`">{{ getNoteSummary(notification.note) }}</a>
 					</div>
 				</template>
 				<template v-if="notification.type == 'poll_vote'">
@@ -80,8 +80,8 @@
 					</router-link>
 					<div class="text">
 						<p>%fa:chart-pie%<a :href="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">{{ getUserName(notification.user) }}</a></p>
-						<router-link class="post-ref" :to="`/@${getAcct(notification.post.user)}/${notification.post.id}`">
-							%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
+						<router-link class="note-ref" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">
+							%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
 						</router-link>
 					</div>
 				</template>
@@ -103,7 +103,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import getAcct from '../../../../../acct/render';
-import getPostSummary from '../../../../../renderers/get-post-summary';
+import getNoteSummary from '../../../../../renderers/get-note-summary';
 import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
@@ -115,7 +115,7 @@ export default Vue.extend({
 			moreNotifications: false,
 			connection: null,
 			connectionId: null,
-			getPostSummary
+			getNoteSummary
 		};
 	},
 	computed: {
@@ -241,10 +241,10 @@ export default Vue.extend({
 					i, .mk-reaction-icon
 						margin-right 4px
 
-			.post-preview
+			.note-preview
 				color rgba(0, 0, 0, 0.7)
 
-			.post-ref
+			.note-ref
 				color rgba(0, 0, 0, 0.7)
 
 				[data-fa]
@@ -254,7 +254,7 @@ export default Vue.extend({
 					display inline-block
 					margin-right 3px
 
-			&.repost, &.quote
+			&.renote, &.quote
 				.text p i
 					color #77B255
 
diff --git a/src/client/app/desktop/views/components/post-detail.sub.vue b/src/client/app/desktop/views/components/post-detail.sub.vue
deleted file mode 100644
index 496003eb8b..0000000000
--- a/src/client/app/desktop/views/components/post-detail.sub.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-<div class="sub" :title="title">
-	<router-link class="avatar-anchor" :to="`/@${acct}`">
-		<img class="avatar" :src="`${post.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="post.userId"/>
-	</router-link>
-	<div class="main">
-		<header>
-			<div class="left">
-				<router-link class="name" :to="`/@${acct}`" v-user-preview="post.userId">{{ getUserName(post.user) }}</router-link>
-				<span class="username">@{{ acct }}</span>
-			</div>
-			<div class="right">
-				<router-link class="time" :to="`/@${acct}/${post.id}`">
-					<mk-time :time="post.createdAt"/>
-				</router-link>
-			</div>
-		</header>
-		<div class="body">
-			<mk-post-html v-if="post.text" :text="post.text" :i="os.i" :class="$style.text"/>
-			<div class="media" v-if="post.media > 0">
-				<mk-media-list :media-list="post.media"/>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
-
-export default Vue.extend({
-	props: ['post'],
-	computed: {
-		acct() {
-			return getAcct(this.post.user);
-		},
-		name() {
-			return getUserName(this.post.user);
-		},
-		title(): string {
-			return dateStringify(this.post.createdAt);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.sub
-	margin 0
-	padding 20px 32px
-	background #fdfdfd
-
-	&:after
-		content ""
-		display block
-		clear both
-
-	&:hover
-		> .main > footer > button
-			color #888
-
-	> .avatar-anchor
-		display block
-		float left
-		margin 0 16px 0 0
-
-		> .avatar
-			display block
-			width 44px
-			height 44px
-			margin 0
-			border-radius 4px
-			vertical-align bottom
-
-	> .main
-		float left
-		width calc(100% - 60px)
-
-		> header
-			margin-bottom 4px
-			white-space nowrap
-
-			&:after
-				content ""
-				display block
-				clear both
-
-			> .left
-				float left
-
-				> .name
-					display inline
-					margin 0
-					padding 0
-					color #777
-					font-size 1em
-					font-weight 700
-					text-align left
-					text-decoration none
-
-					&:hover
-						text-decoration underline
-
-				> .username
-					text-align left
-					margin 0 0 0 8px
-					color #ccc
-
-			> .right
-				float right
-
-				> .time
-					font-size 0.9em
-					color #c0c0c0
-
-</style>
-
-<style lang="stylus" module>
-.text
-	cursor default
-	display block
-	margin 0
-	padding 0
-	overflow-wrap break-word
-	font-size 1em
-	color #717171
-</style>
diff --git a/src/client/app/desktop/views/components/post-detail.vue b/src/client/app/desktop/views/components/post-detail.vue
index 1a3c0d1b68..790f797ad6 100644
--- a/src/client/app/desktop/views/components/post-detail.vue
+++ b/src/client/app/desktop/views/components/post-detail.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-post-detail" :title="title">
+<div class="mk-note-detail" :title="title">
 	<button
 		class="read-more"
 		v-if="p.reply && p.reply.replyId && context == null"
@@ -11,19 +11,19 @@
 		<template v-if="contextFetching">%fa:spinner .pulse%</template>
 	</button>
 	<div class="context">
-		<x-sub v-for="post in context" :key="post.id" :post="post"/>
+		<x-sub v-for="note in context" :key="note.id" :note="note"/>
 	</div>
 	<div class="reply-to" v-if="p.reply">
-		<x-sub :post="p.reply"/>
+		<x-sub :note="p.reply"/>
 	</div>
-	<div class="repost" v-if="isRepost">
+	<div class="renote" v-if="isRenote">
 		<p>
-			<router-link class="avatar-anchor" :to="`/@${acct}`" v-user-preview="post.userId">
-				<img class="avatar" :src="`${post.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
+			<router-link class="avatar-anchor" :to="`/@${acct}`" v-user-preview="note.userId">
+				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
 			</router-link>
 			%fa:retweet%
-			<router-link class="name" :href="`/@${acct}`">{{ getUserName(post.user) }}</router-link>
-			がRepost
+			<router-link class="name" :href="`/@${acct}`">{{ getUserName(note.user) }}</router-link>
+			がRenote
 		</p>
 	</div>
 	<article>
@@ -38,28 +38,28 @@
 			</router-link>
 		</header>
 		<div class="body">
-			<mk-post-html :class="$style.text" v-if="p.text" :text="p.text" :i="os.i"/>
+			<mk-note-html :class="$style.text" v-if="p.text" :text="p.text" :i="os.i"/>
 			<div class="media" v-if="p.media.length > 0">
 				<mk-media-list :media-list="p.media"/>
 			</div>
-			<mk-poll v-if="p.poll" :post="p"/>
+			<mk-poll v-if="p.poll" :note="p"/>
 			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 			<div class="tags" v-if="p.tags && p.tags.length > 0">
 				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
 			</div>
 			<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
 			<div class="map" v-if="p.geo" ref="map"></div>
-			<div class="repost" v-if="p.repost">
-				<mk-post-preview :post="p.repost"/>
+			<div class="renote" v-if="p.renote">
+				<mk-note-preview :note="p.renote"/>
 			</div>
 		</div>
 		<footer>
-			<mk-reactions-viewer :post="p"/>
+			<mk-reactions-viewer :note="p"/>
 			<button @click="reply" title="返信">
 				%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
 			</button>
-			<button @click="repost" title="Repost">
-				%fa:retweet%<p class="count" v-if="p.repostCount > 0">{{ p.repostCount }}</p>
+			<button @click="renote" title="Renote">
+				%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
 			</button>
 			<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="リアクション">
 				%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
@@ -70,7 +70,7 @@
 		</footer>
 	</article>
 	<div class="replies" v-if="!compact">
-		<x-sub v-for="post in replies" :key="post.id" :post="post"/>
+		<x-sub v-for="note in replies" :key="note.id" :note="note"/>
 	</div>
 </div>
 </template>
@@ -83,10 +83,10 @@ import getUserName from '../../../../../renderers/get-user-name';
 import parse from '../../../../../text/parse';
 
 import MkPostFormWindow from './post-form-window.vue';
-import MkRepostFormWindow from './repost-form-window.vue';
-import MkPostMenu from '../../../common/views/components/post-menu.vue';
+import MkRenoteFormWindow from './renote-form-window.vue';
+import MkNoteMenu from '../../../common/views/components/note-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
-import XSub from './post-detail.sub.vue';
+import XSub from './note-detail.sub.vue';
 
 export default Vue.extend({
 	components: {
@@ -94,7 +94,7 @@ export default Vue.extend({
 	},
 
 	props: {
-		post: {
+		note: {
 			type: Object,
 			required: true
 		},
@@ -112,14 +112,14 @@ export default Vue.extend({
 	},
 
 	computed: {
-		isRepost(): boolean {
-			return (this.post.repost &&
-				this.post.text == null &&
-				this.post.mediaIds == null &&
-				this.post.poll == null);
+		isRenote(): boolean {
+			return (this.note.renote &&
+				this.note.text == null &&
+				this.note.mediaIds == null &&
+				this.note.poll == null);
 		},
 		p(): any {
-			return this.isRepost ? this.post.repost : this.post;
+			return this.isRenote ? this.note.renote : this.note;
 		},
 		reactionsCount(): number {
 			return this.p.reactionCounts
@@ -132,10 +132,10 @@ export default Vue.extend({
 			return dateStringify(this.p.createdAt);
 		},
 		acct(): string {
-			return getAcct(this.post.user);
+			return getAcct(this.note.user);
 		},
 		name(): string {
-			return getUserName(this.post.user);
+			return getUserName(this.note.user);
 		},
 		pAcct(): string {
 			return getAcct(this.p.user);
@@ -158,8 +158,8 @@ export default Vue.extend({
 	mounted() {
 		// Get replies
 		if (!this.compact) {
-			(this as any).api('posts/replies', {
-				postId: this.p.id,
+			(this as any).api('notes/replies', {
+				noteId: this.p.id,
 				limit: 8
 			}).then(replies => {
 				this.replies = replies;
@@ -190,8 +190,8 @@ export default Vue.extend({
 			this.contextFetching = true;
 
 			// Fetch context
-			(this as any).api('posts/context', {
-				postId: this.p.replyId
+			(this as any).api('notes/context', {
+				noteId: this.p.replyId
 			}).then(context => {
 				this.contextFetching = false;
 				this.context = context.reverse();
@@ -202,21 +202,21 @@ export default Vue.extend({
 				reply: this.p
 			});
 		},
-		repost() {
-			(this as any).os.new(MkRepostFormWindow, {
-				post: this.p
+		renote() {
+			(this as any).os.new(MkRenoteFormWindow, {
+				note: this.p
 			});
 		},
 		react() {
 			(this as any).os.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
-				post: this.p
+				note: this.p
 			});
 		},
 		menu() {
-			(this as any).os.new(MkPostMenu, {
+			(this as any).os.new(MkNoteMenu, {
 				source: this.$refs.menuButton,
-				post: this.p
+				note: this.p
 			});
 		}
 	}
@@ -226,7 +226,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-post-detail
+.mk-note-detail
 	margin 0
 	padding 0
 	overflow hidden
@@ -263,7 +263,7 @@ export default Vue.extend({
 		> *
 			border-bottom 1px solid #eef0f2
 
-	> .repost
+	> .renote
 		color #9dbb00
 		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
 
@@ -355,10 +355,10 @@ export default Vue.extend({
 		> .body
 			padding 8px 0
 
-			> .repost
+			> .renote
 				margin 8px 0
 
-				> .mk-post-preview
+				> .mk-note-preview
 					padding 16px
 					border dashed 1px #c0dac6
 					border-radius 8px
diff --git a/src/client/app/desktop/views/components/post-form-window.vue b/src/client/app/desktop/views/components/post-form-window.vue
index d0b115e852..c890592a5e 100644
--- a/src/client/app/desktop/views/components/post-form-window.vue
+++ b/src/client/app/desktop/views/components/post-form-window.vue
@@ -2,13 +2,13 @@
 <mk-window ref="window" is-modal @closed="$destroy">
 	<span slot="header">
 		<span :class="$style.icon" v-if="geo">%fa:map-marker-alt%</span>
-		<span v-if="!reply">%i18n:desktop.tags.mk-post-form-window.post%</span>
+		<span v-if="!reply">%i18n:desktop.tags.mk-post-form-window.note%</span>
 		<span v-if="reply">%i18n:desktop.tags.mk-post-form-window.reply%</span>
 		<span :class="$style.count" v-if="media.length != 0">{{ '%i18n:desktop.tags.mk-post-form-window.attaches%'.replace('{}', media.length) }}</span>
 		<span :class="$style.count" v-if="uploadings.length != 0">{{ '%i18n:desktop.tags.mk-post-form-window.uploading-media%'.replace('{}', uploadings.length) }}<mk-ellipsis/></span>
 	</span>
 
-	<mk-post-preview v-if="reply" :class="$style.postPreview" :post="reply"/>
+	<mk-note-preview v-if="reply" :class="$style.notePreview" :note="reply"/>
 	<mk-post-form ref="form"
 		:reply="reply"
 		@posted="onPosted"
@@ -70,7 +70,7 @@ export default Vue.extend({
 	&:after
 		content ')'
 
-.postPreview
+.notePreview
 	margin 16px 22px
 
 </style>
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 1c83a38b64..8e3ec24bc8 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -46,7 +46,7 @@ export default Vue.extend({
 	components: {
 		XDraggable
 	},
-	props: ['reply', 'repost'],
+	props: ['reply', 'renote'],
 	data() {
 		return {
 			posting: false,
@@ -61,28 +61,28 @@ export default Vue.extend({
 	},
 	computed: {
 		draftId(): string {
-			return this.repost
-				? 'repost:' + this.repost.id
+			return this.renote
+				? 'renote:' + this.renote.id
 				: this.reply
 					? 'reply:' + this.reply.id
-					: 'post';
+					: 'note';
 		},
 		placeholder(): string {
-			return this.repost
+			return this.renote
 				? '%i18n:desktop.tags.mk-post-form.quote-placeholder%'
 				: this.reply
 					? '%i18n:desktop.tags.mk-post-form.reply-placeholder%'
-					: '%i18n:desktop.tags.mk-post-form.post-placeholder%';
+					: '%i18n:desktop.tags.mk-post-form.note-placeholder%';
 		},
 		submitText(): string {
-			return this.repost
-				? '%i18n:desktop.tags.mk-post-form.repost%'
+			return this.renote
+				? '%i18n:desktop.tags.mk-post-form.renote%'
 				: this.reply
 					? '%i18n:desktop.tags.mk-post-form.reply%'
-					: '%i18n:desktop.tags.mk-post-form.post%';
+					: '%i18n:desktop.tags.mk-post-form.note%';
 		},
 		canPost(): boolean {
-			return !this.posting && (this.text.length != 0 || this.files.length != 0 || this.poll || this.repost);
+			return !this.posting && (this.text.length != 0 || this.files.length != 0 || this.poll || this.renote);
 		}
 	},
 	watch: {
@@ -217,11 +217,11 @@ export default Vue.extend({
 		post() {
 			this.posting = true;
 
-			(this as any).api('posts/create', {
+			(this as any).api('notes/create', {
 				text: this.text == '' ? undefined : this.text,
 				mediaIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
 				replyId: this.reply ? this.reply.id : undefined,
-				repostId: this.repost ? this.repost.id : undefined,
+				renoteId: this.renote ? this.renote.id : undefined,
 				poll: this.poll ? (this.$refs.poll as any).get() : undefined,
 				geo: this.geo ? {
 					coordinates: [this.geo.longitude, this.geo.latitude],
@@ -235,17 +235,17 @@ export default Vue.extend({
 				this.clear();
 				this.deleteDraft();
 				this.$emit('posted');
-				(this as any).apis.notify(this.repost
+				(this as any).apis.notify(this.renote
 					? '%i18n:desktop.tags.mk-post-form.reposted%'
 					: this.reply
 						? '%i18n:desktop.tags.mk-post-form.replied%'
 						: '%i18n:desktop.tags.mk-post-form.posted%');
 			}).catch(err => {
-				(this as any).apis.notify(this.repost
-					? '%i18n:desktop.tags.mk-post-form.repost-failed%'
+				(this as any).apis.notify(this.renote
+					? '%i18n:desktop.tags.mk-post-form.renote-failed%'
 					: this.reply
 						? '%i18n:desktop.tags.mk-post-form.reply-failed%'
-						: '%i18n:desktop.tags.mk-post-form.post-failed%');
+						: '%i18n:desktop.tags.mk-post-form.note-failed%');
 			}).then(() => {
 				this.posting = false;
 			});
diff --git a/src/client/app/desktop/views/components/post-preview.vue b/src/client/app/desktop/views/components/post-preview.vue
deleted file mode 100644
index 99d9442d93..0000000000
--- a/src/client/app/desktop/views/components/post-preview.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-<div class="mk-post-preview" :title="title">
-	<router-link class="avatar-anchor" :to="`/@${acct}`">
-		<img class="avatar" :src="`${post.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="post.userId"/>
-	</router-link>
-	<div class="main">
-		<header>
-			<router-link class="name" :to="`/@${acct}`" v-user-preview="post.userId">{{ name }}</router-link>
-			<span class="username">@{{ acct }}</span>
-			<router-link class="time" :to="`/@${acct}/${post.id}`">
-				<mk-time :time="post.createdAt"/>
-			</router-link>
-		</header>
-		<div class="body">
-			<mk-sub-post-content class="text" :post="post"/>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
-
-export default Vue.extend({
-	props: ['post'],
-	computed: {
-		acct() {
-			return getAcct(this.post.user);
-		},
-		name() {
-			return getUserName(this.post.user);
-		},
-		title(): string {
-			return dateStringify(this.post.createdAt);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-post-preview
-	font-size 0.9em
-	background #fff
-
-	&:after
-		content ""
-		display block
-		clear both
-
-	&:hover
-		> .main > footer > button
-			color #888
-
-	> .avatar-anchor
-		display block
-		float left
-		margin 0 16px 0 0
-
-		> .avatar
-			display block
-			width 52px
-			height 52px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
-
-	> .main
-		float left
-		width calc(100% - 68px)
-
-		> header
-			display flex
-			white-space nowrap
-
-			> .name
-				margin 0 .5em 0 0
-				padding 0
-				color #607073
-				font-size 1em
-				font-weight bold
-				text-decoration none
-				white-space normal
-
-				&:hover
-					text-decoration underline
-
-			> .username
-				margin 0 .5em 0 0
-				color #d1d8da
-
-			> .time
-				margin-left auto
-				color #b2b8bb
-
-		> .body
-
-			> .text
-				cursor default
-				margin 0
-				padding 0
-				font-size 1.1em
-				color #717171
-
-</style>
diff --git a/src/client/app/desktop/views/components/posts.post.sub.vue b/src/client/app/desktop/views/components/posts.post.sub.vue
deleted file mode 100644
index a9cd0a9279..0000000000
--- a/src/client/app/desktop/views/components/posts.post.sub.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-<div class="sub" :title="title">
-	<router-link class="avatar-anchor" :to="`/@${acct}`">
-		<img class="avatar" :src="`${post.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="post.userId"/>
-	</router-link>
-	<div class="main">
-		<header>
-			<router-link class="name" :to="`/@${acct}`" v-user-preview="post.userId">{{ name }}</router-link>
-			<span class="username">@{{ acct }}</span>
-			<router-link class="created-at" :to="`/@${acct}/${post.id}`">
-				<mk-time :time="post.createdAt"/>
-			</router-link>
-		</header>
-		<div class="body">
-			<mk-sub-post-content class="text" :post="post"/>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
-
-export default Vue.extend({
-	props: ['post'],
-	computed: {
-		acct() {
-			return getAcct(this.post.user);
-		},
-		name(): string {
-			return getUserName(this.post.user);
-		},
-		title(): string {
-			return dateStringify(this.post.createdAt);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.sub
-	margin 0
-	padding 16px
-	font-size 0.9em
-
-	&:after
-		content ""
-		display block
-		clear both
-
-	&:hover
-		> .main > footer > button
-			color #888
-
-	> .avatar-anchor
-		display block
-		float left
-		margin 0 14px 0 0
-
-		> .avatar
-			display block
-			width 52px
-			height 52px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
-
-	> .main
-		float left
-		width calc(100% - 66px)
-
-		> header
-			display flex
-			margin-bottom 2px
-			white-space nowrap
-			line-height 21px
-
-			> .name
-				display block
-				margin 0 .5em 0 0
-				padding 0
-				overflow hidden
-				color #607073
-				font-size 1em
-				font-weight bold
-				text-decoration none
-				text-overflow ellipsis
-
-				&:hover
-					text-decoration underline
-
-			> .username
-				margin 0 .5em 0 0
-				color #d1d8da
-
-			> .created-at
-				margin-left auto
-				color #b2b8bb
-
-		> .body
-
-			> .text
-				cursor default
-				margin 0
-				padding 0
-				font-size 1.1em
-				color #717171
-
-				pre
-					max-height 120px
-					font-size 80%
-
-</style>
diff --git a/src/client/app/desktop/views/components/posts.post.vue b/src/client/app/desktop/views/components/posts.post.vue
index 17fe330420..924642c01a 100644
--- a/src/client/app/desktop/views/components/posts.post.vue
+++ b/src/client/app/desktop/views/components/posts.post.vue
@@ -1,19 +1,19 @@
 <template>
-<div class="post" tabindex="-1" :title="title" @keydown="onKeydown">
+<div class="note" tabindex="-1" :title="title" @keydown="onKeydown">
 	<div class="reply-to" v-if="p.reply">
-		<x-sub :post="p.reply"/>
+		<x-sub :note="p.reply"/>
 	</div>
-	<div class="repost" v-if="isRepost">
+	<div class="renote" v-if="isRenote">
 		<p>
-			<router-link class="avatar-anchor" :to="`/@${acct}`" v-user-preview="post.userId">
-				<img class="avatar" :src="`${post.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
+			<router-link class="avatar-anchor" :to="`/@${acct}`" v-user-preview="note.userId">
+				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
 			</router-link>
 			%fa:retweet%
-			<span>{{ '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('{')) }}</span>
-			<a class="name" :href="`/@${acct}`" v-user-preview="post.userId">{{ getUserName(post.user) }}</a>
-			<span>{{ '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1) }}</span>
+			<span>{{ '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.indexOf('{')) }}</span>
+			<a class="name" :href="`/@${acct}`" v-user-preview="note.userId">{{ getUserName(note.user) }}</a>
+			<span>{{ '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-note.reposted-by%'.indexOf('}') + 1) }}</span>
 		</p>
-		<mk-time :time="post.createdAt"/>
+		<mk-time :time="note.createdAt"/>
 	</div>
 	<article>
 		<router-link class="avatar-anchor" :to="`/@${acct}`">
@@ -38,38 +38,38 @@
 				</p>
 				<div class="text">
 					<a class="reply" v-if="p.reply">%fa:reply%</a>
-					<mk-post-html v-if="p.textHtml" :text="p.text" :i="os.i" :class="$style.text"/>
-					<a class="rp" v-if="p.repost">RP:</a>
+					<mk-note-html v-if="p.textHtml" :text="p.text" :i="os.i" :class="$style.text"/>
+					<a class="rp" v-if="p.renote">RP:</a>
 				</div>
 				<div class="media" v-if="p.media.length > 0">
 					<mk-media-list :media-list="p.media"/>
 				</div>
-				<mk-poll v-if="p.poll" :post="p" ref="pollViewer"/>
+				<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
 				<div class="tags" v-if="p.tags && p.tags.length > 0">
 					<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
 				</div>
 				<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
 				<div class="map" v-if="p.geo" ref="map"></div>
-				<div class="repost" v-if="p.repost">
-					<mk-post-preview :post="p.repost"/>
+				<div class="renote" v-if="p.renote">
+					<mk-note-preview :note="p.renote"/>
 				</div>
 				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 			</div>
 			<footer>
-				<mk-reactions-viewer :post="p" ref="reactionsViewer"/>
-				<button @click="reply" title="%i18n:desktop.tags.mk-timeline-post.reply%">
+				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
+				<button @click="reply" title="%i18n:desktop.tags.mk-timeline-note.reply%">
 					%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
 				</button>
-				<button @click="repost" title="%i18n:desktop.tags.mk-timeline-post.repost%">
-					%fa:retweet%<p class="count" v-if="p.repostCount > 0">{{ p.repostCount }}</p>
+				<button @click="renote" title="%i18n:desktop.tags.mk-timeline-note.renote%">
+					%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
 				</button>
-				<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:desktop.tags.mk-timeline-post.add-reaction%">
+				<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:desktop.tags.mk-timeline-note.add-reaction%">
 					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
 				</button>
 				<button @click="menu" ref="menuButton">
 					%fa:ellipsis-h%
 				</button>
-				<button title="%i18n:desktop.tags.mk-timeline-post.detail">
+				<button title="%i18n:desktop.tags.mk-timeline-note.detail">
 					<template v-if="!isDetailOpened">%fa:caret-down%</template>
 					<template v-if="isDetailOpened">%fa:caret-up%</template>
 				</button>
@@ -77,7 +77,7 @@
 		</div>
 	</article>
 	<div class="detail" v-if="isDetailOpened">
-		<mk-post-status-graph width="462" height="130" :post="p"/>
+		<mk-note-status-graph width="462" height="130" :note="p"/>
 	</div>
 </div>
 </template>
@@ -90,10 +90,10 @@ import getUserName from '../../../../../renderers/get-user-name';
 import parse from '../../../../../text/parse';
 
 import MkPostFormWindow from './post-form-window.vue';
-import MkRepostFormWindow from './repost-form-window.vue';
-import MkPostMenu from '../../../common/views/components/post-menu.vue';
+import MkRenoteFormWindow from './renote-form-window.vue';
+import MkNoteMenu from '../../../common/views/components/note-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
-import XSub from './posts.post.sub.vue';
+import XSub from './notes.note.sub.vue';
 
 function focus(el, fn) {
 	const target = fn(el);
@@ -111,7 +111,7 @@ export default Vue.extend({
 		XSub
 	},
 
-	props: ['post'],
+	props: ['note'],
 
 	data() {
 		return {
@@ -128,14 +128,14 @@ export default Vue.extend({
 		name(): string {
 			return getUserName(this.p.user);
 		},
-		isRepost(): boolean {
-			return (this.post.repost &&
-				this.post.text == null &&
-				this.post.mediaIds == null &&
-				this.post.poll == null);
+		isRenote(): boolean {
+			return (this.note.renote &&
+				this.note.text == null &&
+				this.note.mediaIds == null &&
+				this.note.poll == null);
 		},
 		p(): any {
-			return this.isRepost ? this.post.repost : this.post;
+			return this.isRenote ? this.note.renote : this.note;
 		},
 		reactionsCount(): number {
 			return this.p.reactionCounts
@@ -211,7 +211,7 @@ export default Vue.extend({
 					type: 'capture',
 					id: this.p.id
 				});
-				if (withHandler) this.connection.on('post-updated', this.onStreamPostUpdated);
+				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
 			}
 		},
 		decapture(withHandler = false) {
@@ -220,18 +220,18 @@ export default Vue.extend({
 					type: 'decapture',
 					id: this.p.id
 				});
-				if (withHandler) this.connection.off('post-updated', this.onStreamPostUpdated);
+				if (withHandler) this.connection.off('note-updated', this.onStreamNoteUpdated);
 			}
 		},
 		onStreamConnected() {
 			this.capture();
 		},
-		onStreamPostUpdated(data) {
-			const post = data.post;
-			if (post.id == this.post.id) {
-				this.$emit('update:post', post);
-			} else if (post.id == this.post.repostId) {
-				this.post.repost = post;
+		onStreamNoteUpdated(data) {
+			const note = data.note;
+			if (note.id == this.note.id) {
+				this.$emit('update:note', note);
+			} else if (note.id == this.note.renoteId) {
+				this.note.renote = note;
 			}
 		},
 		reply() {
@@ -239,21 +239,21 @@ export default Vue.extend({
 				reply: this.p
 			});
 		},
-		repost() {
-			(this as any).os.new(MkRepostFormWindow, {
-				post: this.p
+		renote() {
+			(this as any).os.new(MkRenoteFormWindow, {
+				note: this.p
 			});
 		},
 		react() {
 			(this as any).os.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
-				post: this.p
+				note: this.p
 			});
 		},
 		menu() {
-			(this as any).os.new(MkPostMenu, {
+			(this as any).os.new(MkNoteMenu, {
 				source: this.$refs.menuButton,
-				post: this.p
+				note: this.p
 			});
 		},
 		onKeydown(e) {
@@ -274,7 +274,7 @@ export default Vue.extend({
 
 				case e.which == 81: // [q]
 				case e.which == 69: // [e]
-					this.repost();
+					this.renote();
 					break;
 
 				case e.which == 70: // [f]
@@ -299,7 +299,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.post
+.note
 	margin 0
 	padding 0
 	background #fff
@@ -309,7 +309,7 @@ export default Vue.extend({
 		border-top-left-radius 6px
 		border-top-right-radius 6px
 
-		> .repost
+		> .renote
 			border-top-left-radius 6px
 			border-top-right-radius 6px
 
@@ -330,7 +330,7 @@ export default Vue.extend({
 			border 2px solid rgba($theme-color, 0.3)
 			border-radius 4px
 
-	> .repost
+	> .renote
 		color #9dbb00
 		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
 
@@ -369,7 +369,7 @@ export default Vue.extend({
 		padding 0 16px
 		background rgba(0, 0, 0, 0.0125)
 
-		> .mk-post-preview
+		> .mk-note-preview
 			background transparent
 
 	> article
@@ -529,10 +529,10 @@ export default Vue.extend({
 				> .mk-poll
 					font-size 80%
 
-				> .repost
+				> .renote
 					margin 8px 0
 
-					> .mk-post-preview
+					> .mk-note-preview
 						padding 16px
 						border dashed 1px #c0dac6
 						border-radius 8px
diff --git a/src/client/app/desktop/views/components/posts.vue b/src/client/app/desktop/views/components/posts.vue
deleted file mode 100644
index 5031667c7c..0000000000
--- a/src/client/app/desktop/views/components/posts.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-<div class="mk-posts">
-	<template v-for="(post, i) in _posts">
-		<x-post :post="post" :key="post.id" @update:post="onPostUpdated(i, $event)"/>
-		<p class="date" v-if="i != posts.length - 1 && post._date != _posts[i + 1]._date">
-			<span>%fa:angle-up%{{ post._datetext }}</span>
-			<span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span>
-		</p>
-	</template>
-	<footer>
-		<slot name="footer"></slot>
-	</footer>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XPost from './posts.post.vue';
-
-export default Vue.extend({
-	components: {
-		XPost
-	},
-	props: {
-		posts: {
-			type: Array,
-			default: () => []
-		}
-	},
-	computed: {
-		_posts(): any[] {
-			return (this.posts as any).map(post => {
-				const date = new Date(post.createdAt).getDate();
-				const month = new Date(post.createdAt).getMonth() + 1;
-				post._date = date;
-				post._datetext = `${month}月 ${date}日`;
-				return post;
-			});
-		}
-	},
-	methods: {
-		focus() {
-			(this.$el as any).children[0].focus();
-		},
-		onPostUpdated(i, post) {
-			Vue.set((this as any).posts, i, post);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-posts
-
-	> .date
-		display block
-		margin 0
-		line-height 32px
-		font-size 14px
-		text-align center
-		color #aaa
-		background #fdfdfd
-		border-bottom solid 1px #eaeaea
-
-		span
-			margin 0 16px
-
-		[data-fa]
-			margin-right 8px
-
-	> footer
-		> *
-			display block
-			margin 0
-			padding 16px
-			width 100%
-			text-align center
-			color #ccc
-			border-top solid 1px #eaeaea
-			border-bottom-left-radius 4px
-			border-bottom-right-radius 4px
-
-		> button
-			&:hover
-				background #f5f5f5
-
-			&:active
-				background #eee
-</style>
diff --git a/src/client/app/desktop/views/components/renote-form-window.vue b/src/client/app/desktop/views/components/renote-form-window.vue
new file mode 100644
index 0000000000..09176b5ba7
--- /dev/null
+++ b/src/client/app/desktop/views/components/renote-form-window.vue
@@ -0,0 +1,42 @@
+<template>
+<mk-window ref="window" is-modal @closed="$destroy">
+	<span slot="header" :class="$style.header">%fa:retweet%%i18n:desktop.tags.mk-renote-form-window.title%</span>
+	<mk-renote-form ref="form" :note="note" @posted="onPosted" @canceled="onCanceled"/>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['note'],
+	mounted() {
+		document.addEventListener('keydown', this.onDocumentKeydown);
+	},
+	beforeDestroy() {
+		document.removeEventListener('keydown', this.onDocumentKeydown);
+	},
+	methods: {
+		onDocumentKeydown(e) {
+			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
+				if (e.which == 27) { // Esc
+					(this.$refs.window as any).close();
+				}
+			}
+		},
+		onPosted() {
+			(this.$refs.window as any).close();
+		},
+		onCanceled() {
+			(this.$refs.window as any).close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.header
+	> [data-fa]
+		margin-right 4px
+
+</style>
diff --git a/src/client/app/desktop/views/components/renote-form.vue b/src/client/app/desktop/views/components/renote-form.vue
new file mode 100644
index 0000000000..c6b9074156
--- /dev/null
+++ b/src/client/app/desktop/views/components/renote-form.vue
@@ -0,0 +1,131 @@
+<template>
+<div class="mk-renote-form">
+	<mk-note-preview :note="note"/>
+	<template v-if="!quote">
+		<footer>
+			<a class="quote" v-if="!quote" @click="onQuote">%i18n:desktop.tags.mk-renote-form.quote%</a>
+			<button class="cancel" @click="cancel">%i18n:desktop.tags.mk-renote-form.cancel%</button>
+			<button class="ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:desktop.tags.mk-renote-form.reposting%' : '%i18n:desktop.tags.mk-renote-form.renote%' }}</button>
+		</footer>
+	</template>
+	<template v-if="quote">
+		<mk-post-form ref="form" :renote="note" @posted="onChildFormPosted"/>
+	</template>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['note'],
+	data() {
+		return {
+			wait: false,
+			quote: false
+		};
+	},
+	methods: {
+		ok() {
+			this.wait = true;
+			(this as any).api('notes/create', {
+				renoteId: this.note.id
+			}).then(data => {
+				this.$emit('posted');
+				(this as any).apis.notify('%i18n:desktop.tags.mk-renote-form.success%');
+			}).catch(err => {
+				(this as any).apis.notify('%i18n:desktop.tags.mk-renote-form.failure%');
+			}).then(() => {
+				this.wait = false;
+			});
+		},
+		cancel() {
+			this.$emit('canceled');
+		},
+		onQuote() {
+			this.quote = true;
+
+			this.$nextTick(() => {
+				(this.$refs.form as any).focus();
+			});
+		},
+		onChildFormPosted() {
+			this.$emit('posted');
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-renote-form
+
+	> .mk-note-preview
+		margin 16px 22px
+
+	> footer
+		height 72px
+		background lighten($theme-color, 95%)
+
+		> .quote
+			position absolute
+			bottom 16px
+			left 28px
+			line-height 40px
+
+		button
+			display block
+			position absolute
+			bottom 16px
+			cursor pointer
+			padding 0
+			margin 0
+			width 120px
+			height 40px
+			font-size 1em
+			outline none
+			border-radius 4px
+
+			&:focus
+				&:after
+					content ""
+					pointer-events none
+					position absolute
+					top -5px
+					right -5px
+					bottom -5px
+					left -5px
+					border 2px solid rgba($theme-color, 0.3)
+					border-radius 8px
+
+		> .cancel
+			right 148px
+			color #888
+			background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+			border solid 1px #e2e2e2
+
+			&:hover
+				background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+				border-color #dcdcdc
+
+			&:active
+				background #ececec
+				border-color #dcdcdc
+
+		> .ok
+			right 16px
+			font-weight bold
+			color $theme-color-foreground
+			background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+			border solid 1px lighten($theme-color, 15%)
+
+			&:hover
+				background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+				border-color $theme-color
+
+			&:active
+				background $theme-color
+				border-color $theme-color
+
+</style>
diff --git a/src/client/app/desktop/views/components/repost-form-window.vue b/src/client/app/desktop/views/components/repost-form-window.vue
index 7db5adbff3..09176b5ba7 100644
--- a/src/client/app/desktop/views/components/repost-form-window.vue
+++ b/src/client/app/desktop/views/components/repost-form-window.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-window ref="window" is-modal @closed="$destroy">
-	<span slot="header" :class="$style.header">%fa:retweet%%i18n:desktop.tags.mk-repost-form-window.title%</span>
-	<mk-repost-form ref="form" :post="post" @posted="onPosted" @canceled="onCanceled"/>
+	<span slot="header" :class="$style.header">%fa:retweet%%i18n:desktop.tags.mk-renote-form-window.title%</span>
+	<mk-renote-form ref="form" :note="note" @posted="onPosted" @canceled="onCanceled"/>
 </mk-window>
 </template>
 
@@ -9,7 +9,7 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-	props: ['post'],
+	props: ['note'],
 	mounted() {
 		document.addEventListener('keydown', this.onDocumentKeydown);
 	},
diff --git a/src/client/app/desktop/views/components/repost-form.vue b/src/client/app/desktop/views/components/repost-form.vue
index 3a5e3a7c56..c6b9074156 100644
--- a/src/client/app/desktop/views/components/repost-form.vue
+++ b/src/client/app/desktop/views/components/repost-form.vue
@@ -1,15 +1,15 @@
 <template>
-<div class="mk-repost-form">
-	<mk-post-preview :post="post"/>
+<div class="mk-renote-form">
+	<mk-note-preview :note="note"/>
 	<template v-if="!quote">
 		<footer>
-			<a class="quote" v-if="!quote" @click="onQuote">%i18n:desktop.tags.mk-repost-form.quote%</a>
-			<button class="cancel" @click="cancel">%i18n:desktop.tags.mk-repost-form.cancel%</button>
-			<button class="ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:desktop.tags.mk-repost-form.reposting%' : '%i18n:desktop.tags.mk-repost-form.repost%' }}</button>
+			<a class="quote" v-if="!quote" @click="onQuote">%i18n:desktop.tags.mk-renote-form.quote%</a>
+			<button class="cancel" @click="cancel">%i18n:desktop.tags.mk-renote-form.cancel%</button>
+			<button class="ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:desktop.tags.mk-renote-form.reposting%' : '%i18n:desktop.tags.mk-renote-form.renote%' }}</button>
 		</footer>
 	</template>
 	<template v-if="quote">
-		<mk-post-form ref="form" :repost="post" @posted="onChildFormPosted"/>
+		<mk-post-form ref="form" :renote="note" @posted="onChildFormPosted"/>
 	</template>
 </div>
 </template>
@@ -18,7 +18,7 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-	props: ['post'],
+	props: ['note'],
 	data() {
 		return {
 			wait: false,
@@ -28,13 +28,13 @@ export default Vue.extend({
 	methods: {
 		ok() {
 			this.wait = true;
-			(this as any).api('posts/create', {
-				repostId: this.post.id
+			(this as any).api('notes/create', {
+				renoteId: this.note.id
 			}).then(data => {
 				this.$emit('posted');
-				(this as any).apis.notify('%i18n:desktop.tags.mk-repost-form.success%');
+				(this as any).apis.notify('%i18n:desktop.tags.mk-renote-form.success%');
 			}).catch(err => {
-				(this as any).apis.notify('%i18n:desktop.tags.mk-repost-form.failure%');
+				(this as any).apis.notify('%i18n:desktop.tags.mk-renote-form.failure%');
 			}).then(() => {
 				this.wait = false;
 			});
@@ -59,9 +59,9 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-repost-form
+.mk-renote-form
 
-	> .mk-post-preview
+	> .mk-note-preview
 		margin 16px 22px
 
 	> footer
diff --git a/src/client/app/desktop/views/components/sub-note-content.vue b/src/client/app/desktop/views/components/sub-note-content.vue
new file mode 100644
index 0000000000..51ee93cba6
--- /dev/null
+++ b/src/client/app/desktop/views/components/sub-note-content.vue
@@ -0,0 +1,44 @@
+<template>
+<div class="mk-sub-note-content">
+	<div class="body">
+		<a class="reply" v-if="note.replyId">%fa:reply%</a>
+		<mk-note-html :text="note.text" :i="os.i"/>
+		<a class="rp" v-if="note.renoteId" :href="`/note:${note.renoteId}`">RP: ...</a>
+	</div>
+	<details v-if="note.media.length > 0">
+		<summary>({{ note.media.length }}つのメディア)</summary>
+		<mk-media-list :media-list="note.media"/>
+	</details>
+	<details v-if="note.poll">
+		<summary>投票</summary>
+		<mk-poll :note="note"/>
+	</details>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['note']
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-sub-note-content
+	overflow-wrap break-word
+
+	> .body
+		> .reply
+			margin-right 6px
+			color #717171
+
+		> .rp
+			margin-left 4px
+			font-style oblique
+			color #a0bf46
+
+	mk-poll
+		font-size 80%
+
+</style>
diff --git a/src/client/app/desktop/views/components/sub-post-content.vue b/src/client/app/desktop/views/components/sub-post-content.vue
deleted file mode 100644
index 17899af280..0000000000
--- a/src/client/app/desktop/views/components/sub-post-content.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-<div class="mk-sub-post-content">
-	<div class="body">
-		<a class="reply" v-if="post.replyId">%fa:reply%</a>
-		<mk-post-html :text="post.text" :i="os.i"/>
-		<a class="rp" v-if="post.repostId" :href="`/post:${post.repostId}`">RP: ...</a>
-	</div>
-	<details v-if="post.media.length > 0">
-		<summary>({{ post.media.length }}つのメディア)</summary>
-		<mk-media-list :media-list="post.media"/>
-	</details>
-	<details v-if="post.poll">
-		<summary>投票</summary>
-		<mk-poll :post="post"/>
-	</details>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['post']
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-sub-post-content
-	overflow-wrap break-word
-
-	> .body
-		> .reply
-			margin-right 6px
-			color #717171
-
-		> .rp
-			margin-left 4px
-			font-style oblique
-			color #a0bf46
-
-	mk-poll
-		font-size 80%
-
-</style>
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 65b4bd1c7a..6d049eee9c 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -4,15 +4,15 @@
 	<div class="fetching" v-if="fetching">
 		<mk-ellipsis-icon/>
 	</div>
-	<p class="empty" v-if="posts.length == 0 && !fetching">
+	<p class="empty" v-if="notes.length == 0 && !fetching">
 		%fa:R comments%自分の投稿や、自分がフォローしているユーザーの投稿が表示されます。
 	</p>
-	<mk-posts :posts="posts" ref="timeline">
+	<mk-notes :notes="notes" ref="timeline">
 		<button slot="footer" @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">もっと見る</template>
 			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
 		</button>
-	</mk-posts>
+	</mk-notes>
 </div>
 </template>
 
@@ -26,7 +26,7 @@ export default Vue.extend({
 			fetching: true,
 			moreFetching: false,
 			existMore: false,
-			posts: [],
+			notes: [],
 			connection: null,
 			connectionId: null,
 			date: null
@@ -41,7 +41,7 @@ export default Vue.extend({
 		this.connection = (this as any).os.stream.getConnection();
 		this.connectionId = (this as any).os.stream.use();
 
-		this.connection.on('post', this.onPost);
+		this.connection.on('note', this.onNote);
 		this.connection.on('follow', this.onChangeFollowing);
 		this.connection.on('unfollow', this.onChangeFollowing);
 
@@ -51,7 +51,7 @@ export default Vue.extend({
 		this.fetch();
 	},
 	beforeDestroy() {
-		this.connection.off('post', this.onPost);
+		this.connection.off('note', this.onNote);
 		this.connection.off('follow', this.onChangeFollowing);
 		this.connection.off('unfollow', this.onChangeFollowing);
 		(this as any).os.stream.dispose(this.connectionId);
@@ -63,45 +63,45 @@ export default Vue.extend({
 		fetch(cb?) {
 			this.fetching = true;
 
-			(this as any).api('posts/timeline', {
+			(this as any).api('notes/timeline', {
 				limit: 11,
 				untilDate: this.date ? this.date.getTime() : undefined
-			}).then(posts => {
-				if (posts.length == 11) {
-					posts.pop();
+			}).then(notes => {
+				if (notes.length == 11) {
+					notes.pop();
 					this.existMore = true;
 				}
-				this.posts = posts;
+				this.notes = notes;
 				this.fetching = false;
 				this.$emit('loaded');
 				if (cb) cb();
 			});
 		},
 		more() {
-			if (this.moreFetching || this.fetching || this.posts.length == 0 || !this.existMore) return;
+			if (this.moreFetching || this.fetching || this.notes.length == 0 || !this.existMore) return;
 			this.moreFetching = true;
-			(this as any).api('posts/timeline', {
+			(this as any).api('notes/timeline', {
 				limit: 11,
-				untilId: this.posts[this.posts.length - 1].id
-			}).then(posts => {
-				if (posts.length == 11) {
-					posts.pop();
+				untilId: this.notes[this.notes.length - 1].id
+			}).then(notes => {
+				if (notes.length == 11) {
+					notes.pop();
 				} else {
 					this.existMore = false;
 				}
-				this.posts = this.posts.concat(posts);
+				this.notes = this.notes.concat(notes);
 				this.moreFetching = false;
 			});
 		},
-		onPost(post) {
+		onNote(note) {
 			// サウンドを再生する
 			if ((this as any).os.isEnableSounds) {
-				const sound = new Audio(`${url}/assets/post.mp3`);
+				const sound = new Audio(`${url}/assets/note.mp3`);
 				sound.volume = localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) / 100 : 1;
 				sound.play();
 			}
 
-			this.posts.unshift(post);
+			this.notes.unshift(note);
 		},
 		onChangeFollowing() {
 			this.fetch();
diff --git a/src/client/app/desktop/views/components/ui.header.post.vue b/src/client/app/desktop/views/components/ui.header.post.vue
index c2f0e07dd3..5c1756b756 100644
--- a/src/client/app/desktop/views/components/ui.header.post.vue
+++ b/src/client/app/desktop/views/components/ui.header.post.vue
@@ -1,6 +1,6 @@
 <template>
-<div class="post">
-	<button @click="post" title="%i18n:desktop.tags.mk-ui-header-post-button.post%">%fa:pencil-alt%</button>
+<div class="note">
+	<button @click="post" title="%i18n:desktop.tags.mk-ui-header-note-button.note%">%fa:pencil-alt%</button>
 </div>
 </template>
 
@@ -19,7 +19,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.post
+.note
 	display inline-block
 	padding 8px
 	height 100%
diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index 2f2e78ec6d..3cbaa2816e 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -12,7 +12,7 @@
 		<div class="description">{{ u.description }}</div>
 		<div class="status">
 			<div>
-				<p>投稿</p><a>{{ u.postsCount }}</a>
+				<p>投稿</p><a>{{ u.notesCount }}</a>
 			</div>
 			<div>
 				<p>フォロー</p><a>{{ u.followingCount }}</a>
diff --git a/src/client/app/desktop/views/pages/home.vue b/src/client/app/desktop/views/pages/home.vue
index c209af4e43..e4caa2022e 100644
--- a/src/client/app/desktop/views/pages/home.vue
+++ b/src/client/app/desktop/views/pages/home.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
-import getPostSummary from '../../../../../renderers/get-post-summary';
+import getNoteSummary from '../../../../../renderers/get-note-summary';
 
 export default Vue.extend({
 	props: {
@@ -29,13 +29,13 @@ export default Vue.extend({
 		this.connection = (this as any).os.stream.getConnection();
 		this.connectionId = (this as any).os.stream.use();
 
-		this.connection.on('post', this.onStreamPost);
+		this.connection.on('note', this.onStreamNote);
 		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
 
 		Progress.start();
 	},
 	beforeDestroy() {
-		this.connection.off('post', this.onStreamPost);
+		this.connection.off('note', this.onStreamNote);
 		(this as any).os.stream.dispose(this.connectionId);
 		document.removeEventListener('visibilitychange', this.onVisibilitychange);
 	},
@@ -44,10 +44,10 @@ export default Vue.extend({
 			Progress.done();
 		},
 
-		onStreamPost(post) {
-			if (document.hidden && post.userId != (this as any).os.i.id) {
+		onStreamNote(note) {
+			if (document.hidden && note.userId != (this as any).os.i.id) {
 				this.unreadCount++;
-				document.title = `(${this.unreadCount}) ${getPostSummary(post)}`;
+				document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
 			}
 		},
 
diff --git a/src/client/app/desktop/views/pages/note.vue b/src/client/app/desktop/views/pages/note.vue
new file mode 100644
index 0000000000..17c2b1e954
--- /dev/null
+++ b/src/client/app/desktop/views/pages/note.vue
@@ -0,0 +1,67 @@
+<template>
+<mk-ui>
+	<main v-if="!fetching">
+		<a v-if="note.next" :href="note.next">%fa:angle-up%%i18n:desktop.tags.mk-note-page.next%</a>
+		<mk-note-detail :note="note"/>
+		<a v-if="note.prev" :href="note.prev">%fa:angle-down%%i18n:desktop.tags.mk-note-page.prev%</a>
+	</main>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			note: null
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	created() {
+		this.fetch();
+	},
+	methods: {
+		fetch() {
+			Progress.start();
+			this.fetching = true;
+
+			(this as any).api('notes/show', {
+				noteId: this.$route.params.note
+			}).then(note => {
+				this.note = note;
+				this.fetching = false;
+
+				Progress.done();
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+main
+	padding 16px
+	text-align center
+
+	> a
+		display inline-block
+
+		&:first-child
+			margin-bottom 4px
+
+		&:last-child
+			margin-top 4px
+
+		> [data-fa]
+			margin-right 4px
+
+	> .mk-note-detail
+		margin 0 auto
+		width 640px
+
+</style>
diff --git a/src/client/app/desktop/views/pages/post.vue b/src/client/app/desktop/views/pages/post.vue
deleted file mode 100644
index dbd707e049..0000000000
--- a/src/client/app/desktop/views/pages/post.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-<mk-ui>
-	<main v-if="!fetching">
-		<a v-if="post.next" :href="post.next">%fa:angle-up%%i18n:desktop.tags.mk-post-page.next%</a>
-		<mk-post-detail :post="post"/>
-		<a v-if="post.prev" :href="post.prev">%fa:angle-down%%i18n:desktop.tags.mk-post-page.prev%</a>
-	</main>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import Progress from '../../../common/scripts/loading';
-
-export default Vue.extend({
-	data() {
-		return {
-			fetching: true,
-			post: null
-		};
-	},
-	watch: {
-		$route: 'fetch'
-	},
-	created() {
-		this.fetch();
-	},
-	methods: {
-		fetch() {
-			Progress.start();
-			this.fetching = true;
-
-			(this as any).api('posts/show', {
-				postId: this.$route.params.post
-			}).then(post => {
-				this.post = post;
-				this.fetching = false;
-
-				Progress.done();
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-main
-	padding 16px
-	text-align center
-
-	> a
-		display inline-block
-
-		&:first-child
-			margin-bottom 4px
-
-		&:last-child
-			margin-top 4px
-
-		> [data-fa]
-			margin-right 4px
-
-	> .mk-post-detail
-		margin 0 auto
-		width 640px
-
-</style>
diff --git a/src/client/app/desktop/views/pages/search.vue b/src/client/app/desktop/views/pages/search.vue
index afd37c8cee..698154e667 100644
--- a/src/client/app/desktop/views/pages/search.vue
+++ b/src/client/app/desktop/views/pages/search.vue
@@ -7,12 +7,12 @@
 		<mk-ellipsis-icon/>
 	</div>
 	<p :class="$style.empty" v-if="!fetching && empty">%fa:search%「{{ q }}」に関する投稿は見つかりませんでした。</p>
-	<mk-posts ref="timeline" :class="$style.posts" :posts="posts">
+	<mk-notes ref="timeline" :class="$style.notes" :notes="notes">
 		<div slot="footer">
 			<template v-if="!moreFetching">%fa:search%</template>
 			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
 		</div>
-	</mk-posts>
+	</mk-notes>
 </mk-ui>
 </template>
 
@@ -30,7 +30,7 @@ export default Vue.extend({
 			moreFetching: false,
 			existMore: false,
 			offset: 0,
-			posts: []
+			notes: []
 		};
 	},
 	watch: {
@@ -38,7 +38,7 @@ export default Vue.extend({
 	},
 	computed: {
 		empty(): boolean {
-			return this.posts.length == 0;
+			return this.notes.length == 0;
 		},
 		q(): string {
 			return this.$route.query.q;
@@ -66,33 +66,33 @@ export default Vue.extend({
 			this.fetching = true;
 			Progress.start();
 
-			(this as any).api('posts/search', Object.assign({
+			(this as any).api('notes/search', Object.assign({
 				limit: limit + 1,
 				offset: this.offset
-			}, parse(this.q))).then(posts => {
-				if (posts.length == limit + 1) {
-					posts.pop();
+			}, parse(this.q))).then(notes => {
+				if (notes.length == limit + 1) {
+					notes.pop();
 					this.existMore = true;
 				}
-				this.posts = posts;
+				this.notes = notes;
 				this.fetching = false;
 				Progress.done();
 			});
 		},
 		more() {
-			if (this.moreFetching || this.fetching || this.posts.length == 0 || !this.existMore) return;
+			if (this.moreFetching || this.fetching || this.notes.length == 0 || !this.existMore) return;
 			this.offset += limit;
 			this.moreFetching = true;
-			return (this as any).api('posts/search', Object.assign({
+			return (this as any).api('notes/search', Object.assign({
 				limit: limit + 1,
 				offset: this.offset
-			}, parse(this.q))).then(posts => {
-				if (posts.length == limit + 1) {
-					posts.pop();
+			}, parse(this.q))).then(notes => {
+				if (notes.length == limit + 1) {
+					notes.pop();
 				} else {
 					this.existMore = false;
 				}
-				this.posts = this.posts.concat(posts);
+				this.notes = this.notes.concat(notes);
 				this.moreFetching = false;
 			});
 		},
@@ -111,7 +111,7 @@ export default Vue.extend({
 	margin 0 auto
 	color #555
 
-.posts
+.notes
 	max-width 600px
 	margin 0 auto
 	border solid 1px rgba(0, 0, 0, 0.075)
diff --git a/src/client/app/desktop/views/pages/user/user.home.vue b/src/client/app/desktop/views/pages/user/user.home.vue
index 071c9bb61c..ed3b1c7104 100644
--- a/src/client/app/desktop/views/pages/user/user.home.vue
+++ b/src/client/app/desktop/views/pages/user/user.home.vue
@@ -9,7 +9,7 @@
 		</div>
 	</div>
 	<main>
-		<mk-post-detail v-if="user.pinnedPost" :post="user.pinnedPost" :compact="true"/>
+		<mk-note-detail v-if="user.pinnedNote" :note="user.pinnedNote" :compact="true"/>
 		<x-timeline class="timeline" ref="tl" :user="user"/>
 	</main>
 	<div>
diff --git a/src/client/app/desktop/views/pages/user/user.photos.vue b/src/client/app/desktop/views/pages/user/user.photos.vue
index 1ff79b4aee..99a1a8d707 100644
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -22,13 +22,13 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		(this as any).api('users/posts', {
+		(this as any).api('users/notes', {
 			userId: this.user.id,
 			withMedia: true,
 			limit: 9
-		}).then(posts => {
-			posts.forEach(post => {
-				post.media.forEach(media => {
+		}).then(notes => {
+			notes.forEach(note => {
+				note.media.forEach(media => {
 					if (this.images.length < 9) this.images.push(media);
 				});
 			});
diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue
index f5562d0915..2a82ba7861 100644
--- a/src/client/app/desktop/views/pages/user/user.profile.vue
+++ b/src/client/app/desktop/views/pages/user/user.profile.vue
@@ -14,7 +14,7 @@
 		<p>%fa:B twitter%<a :href="`https://twitter.com/${user.account.twitter.screenName}`" target="_blank">@{{ user.account.twitter.screenName }}</a></p>
 	</div>
 	<div class="status">
-		<p class="posts-count">%fa:angle-right%<a>{{ user.postsCount }}</a><b>投稿</b></p>
+		<p class="notes-count">%fa:angle-right%<a>{{ user.notesCount }}</a><b>投稿</b></p>
 		<p class="following">%fa:angle-right%<a @click="showFollowing">{{ user.followingCount }}</a>人を<b>フォロー</b></p>
 		<p class="followers">%fa:angle-right%<a @click="showFollowers">{{ user.followersCount }}</a>人の<b>フォロワー</b></p>
 	</div>
diff --git a/src/client/app/desktop/views/pages/user/user.timeline.vue b/src/client/app/desktop/views/pages/user/user.timeline.vue
index 134ad423ce..87d133174b 100644
--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@@ -8,12 +8,12 @@
 		<mk-ellipsis-icon/>
 	</div>
 	<p class="empty" v-if="empty">%fa:R comments%このユーザーはまだ何も投稿していないようです。</p>
-	<mk-posts ref="timeline" :posts="posts">
+	<mk-notes ref="timeline" :notes="notes">
 		<div slot="footer">
 			<template v-if="!moreFetching">%fa:moon%</template>
 			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
 		</div>
-	</mk-posts>
+	</mk-notes>
 </div>
 </template>
 
@@ -27,7 +27,7 @@ export default Vue.extend({
 			moreFetching: false,
 			mode: 'default',
 			unreadCount: 0,
-			posts: [],
+			notes: [],
 			date: null
 		};
 	},
@@ -38,7 +38,7 @@ export default Vue.extend({
 	},
 	computed: {
 		empty(): boolean {
-			return this.posts.length == 0;
+			return this.notes.length == 0;
 		}
 	},
 	mounted() {
@@ -60,26 +60,26 @@ export default Vue.extend({
 			}
 		},
 		fetch(cb?) {
-			(this as any).api('users/posts', {
+			(this as any).api('users/notes', {
 				userId: this.user.id,
 				untilDate: this.date ? this.date.getTime() : undefined,
 				with_replies: this.mode == 'with-replies'
-			}).then(posts => {
-				this.posts = posts;
+			}).then(notes => {
+				this.notes = notes;
 				this.fetching = false;
 				if (cb) cb();
 			});
 		},
 		more() {
-			if (this.moreFetching || this.fetching || this.posts.length == 0) return;
+			if (this.moreFetching || this.fetching || this.notes.length == 0) return;
 			this.moreFetching = true;
-			(this as any).api('users/posts', {
+			(this as any).api('users/notes', {
 				userId: this.user.id,
 				with_replies: this.mode == 'with-replies',
-				untilId: this.posts[this.posts.length - 1].id
-			}).then(posts => {
+				untilId: this.notes[this.notes.length - 1].id
+			}).then(notes => {
 				this.moreFetching = false;
-				this.posts = this.posts.concat(posts);
+				this.notes = this.notes.concat(notes);
 			});
 		},
 		onScroll() {
diff --git a/src/client/app/desktop/views/widgets/channel.channel.form.vue b/src/client/app/desktop/views/widgets/channel.channel.form.vue
index aaf327f1ef..f2744268bb 100644
--- a/src/client/app/desktop/views/widgets/channel.channel.form.vue
+++ b/src/client/app/desktop/views/widgets/channel.channel.form.vue
@@ -24,11 +24,11 @@ export default Vue.extend({
 
 			if (/^>>([0-9]+) /.test(this.text)) {
 				const index = this.text.match(/^>>([0-9]+) /)[1];
-				reply = (this.$parent as any).posts.find(p => p.index.toString() == index);
+				reply = (this.$parent as any).notes.find(p => p.index.toString() == index);
 				this.text = this.text.replace(/^>>([0-9]+) /, '');
 			}
 
-			(this as any).api('posts/create', {
+			(this as any).api('notes/create', {
 				text: this.text,
 				replyId: reply ? reply.id : undefined,
 				channelId: (this.$parent as any).channel.id
diff --git a/src/client/app/desktop/views/widgets/channel.channel.note.vue b/src/client/app/desktop/views/widgets/channel.channel.note.vue
new file mode 100644
index 0000000000..313a2e3f4f
--- /dev/null
+++ b/src/client/app/desktop/views/widgets/channel.channel.note.vue
@@ -0,0 +1,75 @@
+<template>
+<div class="note">
+	<header>
+		<a class="index" @click="reply">{{ note.index }}:</a>
+		<router-link class="name" :to="`/@${acct}`" v-user-preview="note.user.id"><b>{{ name }}</b></router-link>
+		<span>ID:<i>{{ acct }}</i></span>
+	</header>
+	<div>
+		<a v-if="note.reply">&gt;&gt;{{ note.reply.index }}</a>
+		{{ note.text }}
+		<div class="media" v-if="note.media">
+			<a v-for="file in note.media" :href="file.url" target="_blank">
+				<img :src="`${file.url}?thumbnail&size=512`" :alt="file.name" :title="file.name"/>
+			</a>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
+
+export default Vue.extend({
+	props: ['note'],
+	computed: {
+		acct() {
+			return getAcct(this.note.user);
+		},
+		name() {
+			return getUserName(this.note.user);
+		}
+	},
+	methods: {
+		reply() {
+			this.$emit('reply', this.note);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.note
+	margin 0
+	padding 0
+	color #444
+
+	> header
+		position -webkit-sticky
+		position sticky
+		z-index 1
+		top 0
+		padding 8px 4px 4px 16px
+		background rgba(255, 255, 255, 0.9)
+
+		> .index
+			margin-right 0.25em
+
+		> .name
+			margin-right 0.5em
+			color #008000
+
+	> div
+		padding 0 16px 16px 16px
+
+		> .media
+			> a
+				display inline-block
+
+				> img
+					max-width 100%
+					vertical-align bottom
+
+</style>
diff --git a/src/client/app/desktop/views/widgets/channel.channel.post.vue b/src/client/app/desktop/views/widgets/channel.channel.post.vue
deleted file mode 100644
index fa6d8c34a5..0000000000
--- a/src/client/app/desktop/views/widgets/channel.channel.post.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-<div class="post">
-	<header>
-		<a class="index" @click="reply">{{ post.index }}:</a>
-		<router-link class="name" :to="`/@${acct}`" v-user-preview="post.user.id"><b>{{ name }}</b></router-link>
-		<span>ID:<i>{{ acct }}</i></span>
-	</header>
-	<div>
-		<a v-if="post.reply">&gt;&gt;{{ post.reply.index }}</a>
-		{{ post.text }}
-		<div class="media" v-if="post.media">
-			<a v-for="file in post.media" :href="file.url" target="_blank">
-				<img :src="`${file.url}?thumbnail&size=512`" :alt="file.name" :title="file.name"/>
-			</a>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
-
-export default Vue.extend({
-	props: ['post'],
-	computed: {
-		acct() {
-			return getAcct(this.post.user);
-		},
-		name() {
-			return getUserName(this.post.user);
-		}
-	},
-	methods: {
-		reply() {
-			this.$emit('reply', this.post);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.post
-	margin 0
-	padding 0
-	color #444
-
-	> header
-		position -webkit-sticky
-		position sticky
-		z-index 1
-		top 0
-		padding 8px 4px 4px 16px
-		background rgba(255, 255, 255, 0.9)
-
-		> .index
-			margin-right 0.25em
-
-		> .name
-			margin-right 0.5em
-			color #008000
-
-	> div
-		padding 0 16px 16px 16px
-
-		> .media
-			> a
-				display inline-block
-
-				> img
-					max-width 100%
-					vertical-align bottom
-
-</style>
diff --git a/src/client/app/desktop/views/widgets/channel.channel.vue b/src/client/app/desktop/views/widgets/channel.channel.vue
index e9fb9e3fd7..ea4d8f8454 100644
--- a/src/client/app/desktop/views/widgets/channel.channel.vue
+++ b/src/client/app/desktop/views/widgets/channel.channel.vue
@@ -1,9 +1,9 @@
 <template>
 <div class="channel">
 	<p v-if="fetching">読み込み中<mk-ellipsis/></p>
-	<div v-if="!fetching" ref="posts" class="posts">
-		<p v-if="posts.length == 0">まだ投稿がありません</p>
-		<x-post class="post" v-for="post in posts.slice().reverse()" :post="post" :key="post.id" @reply="reply"/>
+	<div v-if="!fetching" ref="notes" class="notes">
+		<p v-if="notes.length == 0">まだ投稿がありません</p>
+		<x-note class="note" v-for="note in notes.slice().reverse()" :note="note" :key="note.id" @reply="reply"/>
 	</div>
 	<x-form class="form" ref="form"/>
 </div>
@@ -13,18 +13,18 @@
 import Vue from 'vue';
 import ChannelStream from '../../../common/scripts/streaming/channel';
 import XForm from './channel.channel.form.vue';
-import XPost from './channel.channel.post.vue';
+import XNote from './channel.channel.note.vue';
 
 export default Vue.extend({
 	components: {
 		XForm,
-		XPost
+		XNote
 	},
 	props: ['channel'],
 	data() {
 		return {
 			fetching: true,
-			posts: [],
+			notes: [],
 			connection: null
 		};
 	},
@@ -43,10 +43,10 @@ export default Vue.extend({
 		zap() {
 			this.fetching = true;
 
-			(this as any).api('channels/posts', {
+			(this as any).api('channels/notes', {
 				channelId: this.channel.id
-			}).then(posts => {
-				this.posts = posts;
+			}).then(notes => {
+				this.notes = notes;
 				this.fetching = false;
 
 				this.$nextTick(() => {
@@ -55,24 +55,24 @@ export default Vue.extend({
 
 				this.disconnect();
 				this.connection = new ChannelStream((this as any).os, this.channel.id);
-				this.connection.on('post', this.onPost);
+				this.connection.on('note', this.onNote);
 			});
 		},
 		disconnect() {
 			if (this.connection) {
-				this.connection.off('post', this.onPost);
+				this.connection.off('note', this.onNote);
 				this.connection.close();
 			}
 		},
-		onPost(post) {
-			this.posts.unshift(post);
+		onNote(note) {
+			this.notes.unshift(note);
 			this.scrollToBottom();
 		},
 		scrollToBottom() {
-			(this.$refs.posts as any).scrollTop = (this.$refs.posts as any).scrollHeight;
+			(this.$refs.notes as any).scrollTop = (this.$refs.notes as any).scrollHeight;
 		},
-		reply(post) {
-			(this.$refs.form as any).text = `>>${ post.index } `;
+		reply(note) {
+			(this.$refs.form as any).text = `>>${ note.index } `;
 		}
 	}
 });
@@ -87,12 +87,12 @@ export default Vue.extend({
 		text-align center
 		color #aaa
 
-	> .posts
+	> .notes
 		height calc(100% - 38px)
 		overflow auto
 		font-size 0.9em
 
-		> .post
+		> .note
 			border-bottom solid 1px #eee
 
 			&:last-child
diff --git a/src/client/app/desktop/views/widgets/polls.vue b/src/client/app/desktop/views/widgets/polls.vue
index c8ba17bd4b..eb49a4cd5c 100644
--- a/src/client/app/desktop/views/widgets/polls.vue
+++ b/src/client/app/desktop/views/widgets/polls.vue
@@ -7,7 +7,7 @@
 	<div class="poll" v-if="!fetching && poll != null">
 		<p v-if="poll.text"><router-link to="`/@${ acct }/${ poll.id }`">{{ poll.text }}</router-link></p>
 		<p v-if="!poll.text"><router-link to="`/@${ acct }/${ poll.id }`">%fa:link%</router-link></p>
-		<mk-poll :post="poll"/>
+		<mk-poll :note="poll"/>
 	</div>
 	<p class="empty" v-if="!fetching && poll == null">%i18n:desktop.tags.mk-recommended-polls-home-widget.nothing%</p>
 	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
@@ -47,11 +47,11 @@ export default define({
 			this.fetching = true;
 			this.poll = null;
 
-			(this as any).api('posts/polls/recommendation', {
+			(this as any).api('notes/polls/recommendation', {
 				limit: 1,
 				offset: this.offset
-			}).then(posts => {
-				const poll = posts ? posts[0] : null;
+			}).then(notes => {
+				const poll = notes ? notes[0] : null;
 				if (poll == null) {
 					this.offset = 0;
 				} else {
diff --git a/src/client/app/desktop/views/widgets/post-form.vue b/src/client/app/desktop/views/widgets/post-form.vue
index cf7fd1f2b2..5e59582a0f 100644
--- a/src/client/app/desktop/views/widgets/post-form.vue
+++ b/src/client/app/desktop/views/widgets/post-form.vue
@@ -4,7 +4,7 @@
 		<p class="title">%fa:pencil-alt%%i18n:desktop.tags.mk-post-form-home-widget.title%</p>
 	</template>
 	<textarea :disabled="posting" v-model="text" @keydown="onKeydown" placeholder="%i18n:desktop.tags.mk-post-form-home-widget.placeholder%"></textarea>
-	<button @click="post" :disabled="posting">%i18n:desktop.tags.mk-post-form-home-widget.post%</button>
+	<button @click="post" :disabled="posting">%i18n:desktop.tags.mk-post-form-home-widget.note%</button>
 </div>
 </template>
 
@@ -36,7 +36,7 @@ export default define({
 		post() {
 			this.posting = true;
 
-			(this as any).api('posts/create', {
+			(this as any).api('notes/create', {
 				text: this.text
 			}).then(data => {
 				this.clear();
diff --git a/src/client/app/desktop/views/widgets/trends.vue b/src/client/app/desktop/views/widgets/trends.vue
index 27c1860b32..c2c7636bb3 100644
--- a/src/client/app/desktop/views/widgets/trends.vue
+++ b/src/client/app/desktop/views/widgets/trends.vue
@@ -5,8 +5,8 @@
 		<button @click="fetch" title="%i18n:desktop.tags.mk-trends-home-widget.refresh%">%fa:sync%</button>
 	</template>
 	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-	<div class="post" v-else-if="post != null">
-		<p class="text"><router-link :to="`/@${ acct }/${ post.id }`">{{ post.text }}</router-link></p>
+	<div class="note" v-else-if="note != null">
+		<p class="text"><router-link :to="`/@${ acct }/${ note.id }`">{{ note.text }}</router-link></p>
 		<p class="author">―<router-link :to="`/@${ acct }`">@{{ acct }}</router-link></p>
 	</div>
 	<p class="empty" v-else>%i18n:desktop.tags.mk-trends-home-widget.nothing%</p>
@@ -25,12 +25,12 @@ export default define({
 }).extend({
 	computed: {
 		acct() {
-			return getAcct(this.post.user);
+			return getAcct(this.note.user);
 		},
 	},
 	data() {
 		return {
-			post: null,
+			note: null,
 			fetching: true,
 			offset: 0
 		};
@@ -44,23 +44,23 @@ export default define({
 		},
 		fetch() {
 			this.fetching = true;
-			this.post = null;
+			this.note = null;
 
-			(this as any).api('posts/trend', {
+			(this as any).api('notes/trend', {
 				limit: 1,
 				offset: this.offset,
-				repost: false,
+				renote: false,
 				reply: false,
 				media: false,
 				poll: false
-			}).then(posts => {
-				const post = posts ? posts[0] : null;
-				if (post == null) {
+			}).then(notes => {
+				const note = notes ? notes[0] : null;
+				if (note == null) {
 					this.offset = 0;
 				} else {
 					this.offset++;
 				}
-				this.post = post;
+				this.note = note;
 				this.fetching = false;
 			});
 		}
@@ -103,7 +103,7 @@ export default define({
 		&:active
 			color #999
 
-	> .post
+	> .note
 		padding 16px
 		font-size 12px
 		font-style oblique
diff --git a/src/client/app/dev/views/new-app.vue b/src/client/app/dev/views/new-app.vue
index e407ca00d7..c9d5971395 100644
--- a/src/client/app/dev/views/new-app.vue
+++ b/src/client/app/dev/views/new-app.vue
@@ -27,7 +27,7 @@
 					<b-form-checkbox-group v-model="permission" stacked>
 						<b-form-checkbox value="account-read">アカウントの情報を見る。</b-form-checkbox>
 						<b-form-checkbox value="account-write">アカウントの情報を操作する。</b-form-checkbox>
-						<b-form-checkbox value="post-write">投稿する。</b-form-checkbox>
+						<b-form-checkbox value="note-write">投稿する。</b-form-checkbox>
 						<b-form-checkbox value="reaction-write">リアクションしたりリアクションをキャンセルする。</b-form-checkbox>
 						<b-form-checkbox value="following-write">フォローしたりフォロー解除する。</b-form-checkbox>
 						<b-form-checkbox value="drive-read">ドライブを見る。</b-form-checkbox>
diff --git a/src/client/app/mobile/api/post.ts b/src/client/app/mobile/api/post.ts
index 98309ba8de..72919c6505 100644
--- a/src/client/app/mobile/api/post.ts
+++ b/src/client/app/mobile/api/post.ts
@@ -1,24 +1,24 @@
 import PostForm from '../views/components/post-form.vue';
-//import RepostForm from '../views/components/repost-form.vue';
-import getPostSummary from '../../../../renderers/get-post-summary';
+//import RenoteForm from '../views/components/renote-form.vue';
+import getNoteSummary from '../../../../renderers/get-note-summary';
 
 export default (os) => (opts) => {
 	const o = opts || {};
 
-	if (o.repost) {
-		/*const vm = new RepostForm({
+	if (o.renote) {
+		/*const vm = new RenoteForm({
 			propsData: {
-				repost: o.repost
+				renote: o.renote
 			}
 		}).$mount();
 		vm.$once('cancel', recover);
-		vm.$once('post', recover);
+		vm.$once('note', recover);
 		document.body.appendChild(vm.$el);*/
 
-		const text = window.prompt(`「${getPostSummary(o.repost)}」をRepost`);
+		const text = window.prompt(`「${getNoteSummary(o.renote)}」をRenote`);
 		if (text == null) return;
-		os.api('posts/create', {
-			repostId: o.repost.id,
+		os.api('notes/create', {
+			renoteId: o.renote.id,
 			text: text == '' ? undefined : text
 		});
 	} else {
@@ -36,7 +36,7 @@ export default (os) => (opts) => {
 			}
 		}).$mount();
 		vm.$once('cancel', recover);
-		vm.$once('post', recover);
+		vm.$once('note', recover);
 		document.body.appendChild(vm.$el);
 		(vm as any).focus();
 	}
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index 4776fccddb..6265d0d45f 100644
--- a/src/client/app/mobile/script.ts
+++ b/src/client/app/mobile/script.ts
@@ -25,7 +25,7 @@ import MkDrive from './views/pages/drive.vue';
 import MkNotifications from './views/pages/notifications.vue';
 import MkMessaging from './views/pages/messaging.vue';
 import MkMessagingRoom from './views/pages/messaging-room.vue';
-import MkPost from './views/pages/post.vue';
+import MkNote from './views/pages/note.vue';
 import MkSearch from './views/pages/search.vue';
 import MkFollowers from './views/pages/followers.vue';
 import MkFollowing from './views/pages/following.vue';
@@ -68,7 +68,7 @@ init((launch) => {
 			{ path: '/@:user', component: MkUser },
 			{ path: '/@:user/followers', component: MkFollowers },
 			{ path: '/@:user/following', component: MkFollowing },
-			{ path: '/@:user/:post', component: MkPost }
+			{ path: '/@:user/:note', component: MkNote }
 		]
 	});
 
diff --git a/src/client/app/mobile/views/components/activity.vue b/src/client/app/mobile/views/components/activity.vue
index 2e44017e77..dcd319cb69 100644
--- a/src/client/app/mobile/views/components/activity.vue
+++ b/src/client/app/mobile/views/components/activity.vue
@@ -2,14 +2,14 @@
 <div class="mk-activity">
 	<svg v-if="data" ref="canvas" viewBox="0 0 30 1" preserveAspectRatio="none">
 		<g v-for="(d, i) in data">
-			<rect width="0.8" :height="d.postsH"
-				:x="i + 0.1" :y="1 - d.postsH - d.repliesH - d.repostsH"
+			<rect width="0.8" :height="d.notesH"
+				:x="i + 0.1" :y="1 - d.notesH - d.repliesH - d.renotesH"
 				fill="#41ddde"/>
 			<rect width="0.8" :height="d.repliesH"
-				:x="i + 0.1" :y="1 - d.repliesH - d.repostsH"
+				:x="i + 0.1" :y="1 - d.repliesH - d.renotesH"
 				fill="#f7796c"/>
-			<rect width="0.8" :height="d.repostsH"
-				:x="i + 0.1" :y="1 - d.repostsH"
+			<rect width="0.8" :height="d.renotesH"
+				:x="i + 0.1" :y="1 - d.renotesH"
 				fill="#a1de41"/>
 			</g>
 	</svg>
@@ -32,12 +32,12 @@ export default Vue.extend({
 			userId: this.user.id,
 			limit: 30
 		}).then(data => {
-			data.forEach(d => d.total = d.posts + d.replies + d.reposts);
+			data.forEach(d => d.total = d.notes + d.replies + d.renotes);
 			this.peak = Math.max.apply(null, data.map(d => d.total));
 			data.forEach(d => {
-				d.postsH = d.posts / this.peak;
+				d.notesH = d.notes / this.peak;
 				d.repliesH = d.replies / this.peak;
-				d.repostsH = d.reposts / this.peak;
+				d.renotesH = d.renotes / this.peak;
 			});
 			data.reverse();
 			this.data = data;
diff --git a/src/client/app/mobile/views/components/index.ts b/src/client/app/mobile/views/components/index.ts
index fb8f65f47d..9346700304 100644
--- a/src/client/app/mobile/views/components/index.ts
+++ b/src/client/app/mobile/views/components/index.ts
@@ -2,16 +2,16 @@ import Vue from 'vue';
 
 import ui from './ui.vue';
 import timeline from './timeline.vue';
-import post from './post.vue';
-import posts from './posts.vue';
+import note from './note.vue';
+import notes from './notes.vue';
 import mediaImage from './media-image.vue';
 import mediaVideo from './media-video.vue';
 import drive from './drive.vue';
-import postPreview from './post-preview.vue';
-import subPostContent from './sub-post-content.vue';
-import postCard from './post-card.vue';
+import notePreview from './note-preview.vue';
+import subNoteContent from './sub-note-content.vue';
+import noteCard from './note-card.vue';
 import userCard from './user-card.vue';
-import postDetail from './post-detail.vue';
+import noteDetail from './note-detail.vue';
 import followButton from './follow-button.vue';
 import friendsMaker from './friends-maker.vue';
 import notification from './notification.vue';
@@ -25,16 +25,16 @@ import widgetContainer from './widget-container.vue';
 
 Vue.component('mk-ui', ui);
 Vue.component('mk-timeline', timeline);
-Vue.component('mk-post', post);
-Vue.component('mk-posts', posts);
+Vue.component('mk-note', note);
+Vue.component('mk-notes', notes);
 Vue.component('mk-media-image', mediaImage);
 Vue.component('mk-media-video', mediaVideo);
 Vue.component('mk-drive', drive);
-Vue.component('mk-post-preview', postPreview);
-Vue.component('mk-sub-post-content', subPostContent);
-Vue.component('mk-post-card', postCard);
+Vue.component('mk-note-preview', notePreview);
+Vue.component('mk-sub-note-content', subNoteContent);
+Vue.component('mk-note-card', noteCard);
 Vue.component('mk-user-card', userCard);
-Vue.component('mk-post-detail', postDetail);
+Vue.component('mk-note-detail', noteDetail);
 Vue.component('mk-follow-button', followButton);
 Vue.component('mk-friends-maker', friendsMaker);
 Vue.component('mk-notification', notification);
diff --git a/src/client/app/mobile/views/components/note-card.vue b/src/client/app/mobile/views/components/note-card.vue
new file mode 100644
index 0000000000..9ad0d3e294
--- /dev/null
+++ b/src/client/app/mobile/views/components/note-card.vue
@@ -0,0 +1,93 @@
+<template>
+<div class="mk-note-card">
+	<a :href="`/@${acct}/${note.id}`">
+		<header>
+			<img :src="`${acct}?thumbnail&size=64`" alt="avatar"/><h3>{{ name }}</h3>
+		</header>
+		<div>
+			{{ text }}
+		</div>
+		<mk-time :time="note.createdAt"/>
+	</a>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import summary from '../../../../../renderers/get-note-summary';
+import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
+
+export default Vue.extend({
+	props: ['note'],
+	computed: {
+		acct() {
+			return getAcct(this.note.user);
+		},
+		name() {
+			return getUserName(this.note.user);
+		},
+		text(): string {
+			return summary(this.note);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-note-card
+	display inline-block
+	width 150px
+	//height 120px
+	font-size 12px
+	background #fff
+	border-radius 4px
+
+	> a
+		display block
+		color #2c3940
+
+		&:hover
+			text-decoration none
+
+		> header
+			> img
+				position absolute
+				top 8px
+				left 8px
+				width 28px
+				height 28px
+				border-radius 6px
+
+			> h3
+				display inline-block
+				overflow hidden
+				width calc(100% - 45px)
+				margin 8px 0 0 42px
+				line-height 28px
+				white-space nowrap
+				text-overflow ellipsis
+				font-size 12px
+
+		> div
+			padding 2px 8px 8px 8px
+			height 60px
+			overflow hidden
+			white-space normal
+
+			&:after
+				content ""
+				display block
+				position absolute
+				top 40px
+				left 0
+				width 100%
+				height 20px
+				background linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%)
+
+		> .mk-time
+			display inline-block
+			padding 8px
+			color #aaa
+
+</style>
diff --git a/src/client/app/mobile/views/components/note-detail.sub.vue b/src/client/app/mobile/views/components/note-detail.sub.vue
new file mode 100644
index 0000000000..38aea4ba20
--- /dev/null
+++ b/src/client/app/mobile/views/components/note-detail.sub.vue
@@ -0,0 +1,113 @@
+<template>
+<div class="root sub">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
+		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+	</router-link>
+	<div class="main">
+		<header>
+			<router-link class="name" :to="`/@${acct}`">{{ getUserName(note.user) }}</router-link>
+			<span class="username">@{{ acct }}</span>
+			<router-link class="time" :to="`/@${acct}/${note.id}`">
+				<mk-time :time="note.createdAt"/>
+			</router-link>
+		</header>
+		<div class="body">
+			<mk-sub-note-content class="text" :note="note"/>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
+
+export default Vue.extend({
+	props: ['note'],
+	computed: {
+		acct() {
+			return getAcct(this.note.user);
+		},
+		name() {
+			return getUserName(this.note.user);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.root.sub
+	padding 8px
+	font-size 0.9em
+	background #fdfdfd
+
+	@media (min-width 500px)
+		padding 12px
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	&:hover
+		> .main > footer > button
+			color #888
+
+	> .avatar-anchor
+		display block
+		float left
+		margin 0 12px 0 0
+
+		> .avatar
+			display block
+			width 48px
+			height 48px
+			margin 0
+			border-radius 8px
+			vertical-align bottom
+
+	> .main
+		float left
+		width calc(100% - 60px)
+
+		> header
+			display flex
+			margin-bottom 4px
+			white-space nowrap
+
+			> .name
+				display block
+				margin 0 .5em 0 0
+				padding 0
+				overflow hidden
+				color #607073
+				font-size 1em
+				font-weight 700
+				text-align left
+				text-decoration none
+				text-overflow ellipsis
+
+				&:hover
+					text-decoration underline
+
+			> .username
+				text-align left
+				margin 0 .5em 0 0
+				color #d1d8da
+
+			> .time
+				margin-left auto
+				color #b2b8bb
+
+		> .body
+
+			> .text
+				cursor default
+				margin 0
+				padding 0
+				font-size 1.1em
+				color #717171
+
+</style>
+
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
new file mode 100644
index 0000000000..e1682e58ed
--- /dev/null
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -0,0 +1,462 @@
+<template>
+<div class="mk-note-detail">
+	<button
+		class="more"
+		v-if="p.reply && p.reply.replyId && context == null"
+		@click="fetchContext"
+		:disabled="fetchingContext"
+	>
+		<template v-if="!contextFetching">%fa:ellipsis-v%</template>
+		<template v-if="contextFetching">%fa:spinner .pulse%</template>
+	</button>
+	<div class="context">
+		<x-sub v-for="note in context" :key="note.id" :note="note"/>
+	</div>
+	<div class="reply-to" v-if="p.reply">
+		<x-sub :note="p.reply"/>
+	</div>
+	<div class="renote" v-if="isRenote">
+		<p>
+			<router-link class="avatar-anchor" :to="`/@${acct}`">
+				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
+			</router-link>
+			%fa:retweet%
+			<router-link class="name" :to="`/@${acct}`">
+				{{ name }}
+			</router-link>
+			がRenote
+		</p>
+	</div>
+	<article>
+		<header>
+			<router-link class="avatar-anchor" :to="`/@${pAcct}`">
+				<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+			</router-link>
+			<div>
+				<router-link class="name" :to="`/@${pAcct}`">{{ pName }}</router-link>
+				<span class="username">@{{ pAcct }}</span>
+			</div>
+		</header>
+		<div class="body">
+			<mk-note-html v-if="p.text" :ast="p.text" :i="os.i" :class="$style.text"/>
+			<div class="tags" v-if="p.tags && p.tags.length > 0">
+				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
+			</div>
+			<div class="media" v-if="p.media.length > 0">
+				<mk-media-list :media-list="p.media"/>
+			</div>
+			<mk-poll v-if="p.poll" :note="p"/>
+			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+			<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
+			<div class="map" v-if="p.geo" ref="map"></div>
+			<div class="renote" v-if="p.renote">
+				<mk-note-preview :note="p.renote"/>
+			</div>
+		</div>
+		<router-link class="time" :to="`/@${pAcct}/${p.id}`">
+			<mk-time :time="p.createdAt" mode="detail"/>
+		</router-link>
+		<footer>
+			<mk-reactions-viewer :note="p"/>
+			<button @click="reply" title="%i18n:mobile.tags.mk-note-detail.reply%">
+				%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
+			</button>
+			<button @click="renote" title="Renote">
+				%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
+			</button>
+			<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:mobile.tags.mk-note-detail.reaction%">
+				%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
+			</button>
+			<button @click="menu" ref="menuButton">
+				%fa:ellipsis-h%
+			</button>
+		</footer>
+	</article>
+	<div class="replies" v-if="!compact">
+		<x-sub v-for="note in replies" :key="note.id" :note="note"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
+import parse from '../../../../../text/parse';
+
+import MkNoteMenu from '../../../common/views/components/note-menu.vue';
+import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
+import XSub from './note-detail.sub.vue';
+
+export default Vue.extend({
+	components: {
+		XSub
+	},
+
+	props: {
+		note: {
+			type: Object,
+			required: true
+		},
+		compact: {
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			context: [],
+			contextFetching: false,
+			replies: []
+		};
+	},
+
+	computed: {
+		acct(): string {
+			return getAcct(this.note.user);
+		},
+		name(): string {
+			return getUserName(this.note.user);
+		},
+		pAcct(): string {
+			return getAcct(this.p.user);
+		},
+		pName(): string {
+			return getUserName(this.p.user);
+		},
+		isRenote(): boolean {
+			return (this.note.renote &&
+				this.note.text == null &&
+				this.note.mediaIds == null &&
+				this.note.poll == null);
+		},
+		p(): any {
+			return this.isRenote ? this.note.renote : this.note;
+		},
+		reactionsCount(): number {
+			return this.p.reactionCounts
+				? Object.keys(this.p.reactionCounts)
+					.map(key => this.p.reactionCounts[key])
+					.reduce((a, b) => a + b)
+				: 0;
+		},
+		urls(): string[] {
+			if (this.p.text) {
+				const ast = parse(this.p.text);
+				return ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
+		}
+	},
+
+	mounted() {
+		// Get replies
+		if (!this.compact) {
+			(this as any).api('notes/replies', {
+				noteId: this.p.id,
+				limit: 8
+			}).then(replies => {
+				this.replies = replies;
+			});
+		}
+
+		// Draw map
+		if (this.p.geo) {
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.account.clientSettings.showMaps : true;
+			if (shouldShowMap) {
+				(this as any).os.getGoogleMaps().then(maps => {
+					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
+					const map = new maps.Map(this.$refs.map, {
+						center: uluru,
+						zoom: 15
+					});
+					new maps.Marker({
+						position: uluru,
+						map: map
+					});
+				});
+			}
+		}
+	},
+
+	methods: {
+		fetchContext() {
+			this.contextFetching = true;
+
+			// Fetch context
+			(this as any).api('notes/context', {
+				noteId: this.p.replyId
+			}).then(context => {
+				this.contextFetching = false;
+				this.context = context.reverse();
+			});
+		},
+		reply() {
+			(this as any).apis.post({
+				reply: this.p
+			});
+		},
+		renote() {
+			(this as any).apis.post({
+				renote: this.p
+			});
+		},
+		react() {
+			(this as any).os.new(MkReactionPicker, {
+				source: this.$refs.reactButton,
+				note: this.p,
+				compact: true
+			});
+		},
+		menu() {
+			(this as any).os.new(MkNoteMenu, {
+				source: this.$refs.menuButton,
+				note: this.p,
+				compact: true
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-note-detail
+	overflow hidden
+	margin 0 auto
+	padding 0
+	width 100%
+	text-align left
+	background #fff
+	border-radius 8px
+	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+
+	> .fetching
+		padding 64px 0
+
+	> .more
+		display block
+		margin 0
+		padding 10px 0
+		width 100%
+		font-size 1em
+		text-align center
+		color #999
+		cursor pointer
+		background #fafafa
+		outline none
+		border none
+		border-bottom solid 1px #eef0f2
+		border-radius 6px 6px 0 0
+		box-shadow none
+
+		&:hover
+			background #f6f6f6
+
+		&:active
+			background #f0f0f0
+
+		&:disabled
+			color #ccc
+
+	> .context
+		> *
+			border-bottom 1px solid #eef0f2
+
+	> .renote
+		color #9dbb00
+		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+
+		> p
+			margin 0
+			padding 16px 32px
+
+			.avatar-anchor
+				display inline-block
+
+				.avatar
+					vertical-align bottom
+					min-width 28px
+					min-height 28px
+					max-width 28px
+					max-height 28px
+					margin 0 8px 0 0
+					border-radius 6px
+
+			[data-fa]
+				margin-right 4px
+
+			.name
+				font-weight bold
+
+		& + article
+			padding-top 8px
+
+	> .reply-to
+		border-bottom 1px solid #eef0f2
+
+	> article
+		padding 14px 16px 9px 16px
+
+		@media (min-width 500px)
+			padding 28px 32px 18px 32px
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		&:hover
+			> .main > footer > button
+				color #888
+
+		> header
+			display flex
+			line-height 1.1
+
+			> .avatar-anchor
+				display block
+				padding 0 .5em 0 0
+
+				> .avatar
+					display block
+					width 54px
+					height 54px
+					margin 0
+					border-radius 8px
+					vertical-align bottom
+
+					@media (min-width 500px)
+						width 60px
+						height 60px
+
+			> div
+
+				> .name
+					display inline-block
+					margin .4em 0
+					color #777
+					font-size 16px
+					font-weight bold
+					text-align left
+					text-decoration none
+
+					&:hover
+						text-decoration underline
+
+				> .username
+					display block
+					text-align left
+					margin 0
+					color #ccc
+
+		> .body
+			padding 8px 0
+
+			> .renote
+				margin 8px 0
+
+				> .mk-note-preview
+					padding 16px
+					border dashed 1px #c0dac6
+					border-radius 8px
+
+			> .location
+				margin 4px 0
+				font-size 12px
+				color #ccc
+
+			> .map
+				width 100%
+				height 200px
+
+				&:empty
+					display none
+
+			> .mk-url-preview
+				margin-top 8px
+
+			> .media
+				> img
+					display block
+					max-width 100%
+
+			> .tags
+				margin 4px 0 0 0
+
+				> *
+					display inline-block
+					margin 0 8px 0 0
+					padding 2px 8px 2px 16px
+					font-size 90%
+					color #8d969e
+					background #edf0f3
+					border-radius 4px
+
+					&:before
+						content ""
+						display block
+						position absolute
+						top 0
+						bottom 0
+						left 4px
+						width 8px
+						height 8px
+						margin auto 0
+						background #fff
+						border-radius 100%
+
+		> .time
+			font-size 16px
+			color #c0c0c0
+
+		> footer
+			font-size 1.2em
+
+			> button
+				margin 0
+				padding 8px
+				background transparent
+				border none
+				box-shadow none
+				font-size 1em
+				color #ddd
+				cursor pointer
+
+				&:not(:last-child)
+					margin-right 28px
+
+				&:hover
+					color #666
+
+				> .count
+					display inline
+					margin 0 0 0 8px
+					color #999
+
+				&.reacted
+					color $theme-color
+
+	> .replies
+		> *
+			border-top 1px solid #eef0f2
+
+</style>
+
+<style lang="stylus" module>
+.text
+	display block
+	margin 0
+	padding 0
+	overflow-wrap break-word
+	font-size 16px
+	color #717171
+
+	@media (min-width 500px)
+		font-size 24px
+
+</style>
diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue
new file mode 100644
index 0000000000..8c8d8645bb
--- /dev/null
+++ b/src/client/app/mobile/views/components/note-preview.vue
@@ -0,0 +1,110 @@
+<template>
+<div class="mk-note-preview">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
+		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+	</router-link>
+	<div class="main">
+		<header>
+			<router-link class="name" :to="`/@${acct}`">{{ name }}</router-link>
+			<span class="username">@{{ acct }}</span>
+			<router-link class="time" :to="`/@${acct}/${note.id}`">
+				<mk-time :time="note.createdAt"/>
+			</router-link>
+		</header>
+		<div class="body">
+			<mk-sub-note-content class="text" :note="note"/>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
+
+export default Vue.extend({
+	props: ['note'],
+	computed: {
+		acct() {
+			return getAcct(this.note.user);
+		},
+		name() {
+			return getUserName(this.note.user);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-note-preview
+	margin 0
+	padding 0
+	font-size 0.9em
+	background #fff
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	&:hover
+		> .main > footer > button
+			color #888
+
+	> .avatar-anchor
+		display block
+		float left
+		margin 0 12px 0 0
+
+		> .avatar
+			display block
+			width 48px
+			height 48px
+			margin 0
+			border-radius 8px
+			vertical-align bottom
+
+	> .main
+		float left
+		width calc(100% - 60px)
+
+		> header
+			display flex
+			margin-bottom 4px
+			white-space nowrap
+
+			> .name
+				display block
+				margin 0 .5em 0 0
+				padding 0
+				overflow hidden
+				color #607073
+				font-size 1em
+				font-weight 700
+				text-align left
+				text-decoration none
+				text-overflow ellipsis
+
+				&:hover
+					text-decoration underline
+
+			> .username
+				text-align left
+				margin 0 .5em 0 0
+				color #d1d8da
+
+			> .time
+				margin-left auto
+				color #b2b8bb
+
+		> .body
+
+			> .text
+				cursor default
+				margin 0
+				padding 0
+				font-size 1.1em
+				color #717171
+
+</style>
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
new file mode 100644
index 0000000000..a37d0dea08
--- /dev/null
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -0,0 +1,119 @@
+<template>
+<div class="sub">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
+		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=96`" alt="avatar"/>
+	</router-link>
+	<div class="main">
+		<header>
+			<router-link class="name" :to="`/@${acct}`">{{ getUserName(note.user) }}</router-link>
+			<span class="username">@{{ acct }}</span>
+			<router-link class="created-at" :to="`/@${acct}/${note.id}`">
+				<mk-time :time="note.createdAt"/>
+			</router-link>
+		</header>
+		<div class="body">
+			<mk-sub-note-content class="text" :note="note"/>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
+
+export default Vue.extend({
+	props: ['note'],
+	computed: {
+		acct() {
+			return getAcct(this.note.user);
+		},
+		name() {
+			return getUserName(this.note.user);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.sub
+	font-size 0.9em
+	padding 16px
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	> .avatar-anchor
+		display block
+		float left
+		margin 0 10px 0 0
+
+		@media (min-width 500px)
+			margin-right 16px
+
+		> .avatar
+			display block
+			width 44px
+			height 44px
+			margin 0
+			border-radius 8px
+			vertical-align bottom
+
+			@media (min-width 500px)
+				width 52px
+				height 52px
+
+	> .main
+		float left
+		width calc(100% - 54px)
+
+		@media (min-width 500px)
+			width calc(100% - 68px)
+
+		> header
+			display flex
+			margin-bottom 2px
+			white-space nowrap
+
+			> .name
+				display block
+				margin 0 0.5em 0 0
+				padding 0
+				overflow hidden
+				color #607073
+				font-size 1em
+				font-weight 700
+				text-align left
+				text-decoration none
+				text-overflow ellipsis
+
+				&:hover
+					text-decoration underline
+
+			> .username
+				text-align left
+				margin 0
+				color #d1d8da
+
+			> .created-at
+				margin-left auto
+				color #b2b8bb
+
+		> .body
+
+			> .text
+				cursor default
+				margin 0
+				padding 0
+				font-size 1.1em
+				color #717171
+
+				pre
+					max-height 120px
+					font-size 80%
+
+</style>
+
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
new file mode 100644
index 0000000000..4b33c6f071
--- /dev/null
+++ b/src/client/app/mobile/views/components/note.vue
@@ -0,0 +1,540 @@
+<template>
+<div class="note" :class="{ renote: isRenote }">
+	<div class="reply-to" v-if="p.reply">
+		<x-sub :note="p.reply"/>
+	</div>
+	<div class="renote" v-if="isRenote">
+		<p>
+			<router-link class="avatar-anchor" :to="`/@${acct}`">
+				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+			</router-link>
+			%fa:retweet%
+			<span>{{ '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.substr(0, '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.indexOf('{')) }}</span>
+			<router-link class="name" :to="`/@${acct}`">{{ name }}</router-link>
+			<span>{{ '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.substr('%i18n:mobile.tags.mk-timeline-note.reposted-by%'.indexOf('}') + 1) }}</span>
+		</p>
+		<mk-time :time="note.createdAt"/>
+	</div>
+	<article>
+		<router-link class="avatar-anchor" :to="`/@${pAcct}`">
+			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=96`" alt="avatar"/>
+		</router-link>
+		<div class="main">
+			<header>
+				<router-link class="name" :to="`/@${pAcct}`">{{ pName }}</router-link>
+				<span class="is-bot" v-if="p.user.host === null && p.user.account.isBot">bot</span>
+				<span class="username">@{{ pAcct }}</span>
+				<div class="info">
+					<span class="mobile" v-if="p.viaMobile">%fa:mobile-alt%</span>
+					<router-link class="created-at" :to="url">
+						<mk-time :time="p.createdAt"/>
+					</router-link>
+				</div>
+			</header>
+			<div class="body">
+				<p class="channel" v-if="p.channel != null"><a target="_blank">{{ p.channel.title }}</a>:</p>
+				<div class="text">
+					<a class="reply" v-if="p.reply">
+						%fa:reply%
+					</a>
+					<mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
+					<a class="rp" v-if="p.renote != null">RP:</a>
+				</div>
+				<div class="media" v-if="p.media.length > 0">
+					<mk-media-list :media-list="p.media"/>
+				</div>
+				<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
+				<div class="tags" v-if="p.tags && p.tags.length > 0">
+					<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
+				</div>
+				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+				<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
+				<div class="map" v-if="p.geo" ref="map"></div>
+				<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
+				<div class="renote" v-if="p.renote">
+					<mk-note-preview :note="p.renote"/>
+				</div>
+			</div>
+			<footer>
+				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
+				<button @click="reply">
+					%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
+				</button>
+				<button @click="renote" title="Renote">
+					%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
+				</button>
+				<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton">
+					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
+				</button>
+				<button class="menu" @click="menu" ref="menuButton">
+					%fa:ellipsis-h%
+				</button>
+			</footer>
+		</div>
+	</article>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
+import parse from '../../../../../text/parse';
+
+import MkNoteMenu from '../../../common/views/components/note-menu.vue';
+import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
+import XSub from './note.sub.vue';
+
+export default Vue.extend({
+	components: {
+		XSub
+	},
+
+	props: ['note'],
+
+	data() {
+		return {
+			connection: null,
+			connectionId: null
+		};
+	},
+
+	computed: {
+		acct(): string {
+			return getAcct(this.note.user);
+		},
+		name(): string {
+			return getUserName(this.note.user);
+		},
+		pAcct(): string {
+			return getAcct(this.p.user);
+		},
+		pName(): string {
+			return getUserName(this.p.user);
+		},
+		isRenote(): boolean {
+			return (this.note.renote &&
+				this.note.text == null &&
+				this.note.mediaIds == null &&
+				this.note.poll == null);
+		},
+		p(): any {
+			return this.isRenote ? this.note.renote : this.note;
+		},
+		reactionsCount(): number {
+			return this.p.reactionCounts
+				? Object.keys(this.p.reactionCounts)
+					.map(key => this.p.reactionCounts[key])
+					.reduce((a, b) => a + b)
+				: 0;
+		},
+		url(): string {
+			return `/@${this.pAcct}/${this.p.id}`;
+		},
+		urls(): string[] {
+			if (this.p.text) {
+				const ast = parse(this.p.text);
+				return ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
+		}
+	},
+
+	created() {
+		if ((this as any).os.isSignedIn) {
+			this.connection = (this as any).os.stream.getConnection();
+			this.connectionId = (this as any).os.stream.use();
+		}
+	},
+
+	mounted() {
+		this.capture(true);
+
+		if ((this as any).os.isSignedIn) {
+			this.connection.on('_connected_', this.onStreamConnected);
+		}
+
+		// Draw map
+		if (this.p.geo) {
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.account.clientSettings.showMaps : true;
+			if (shouldShowMap) {
+				(this as any).os.getGoogleMaps().then(maps => {
+					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
+					const map = new maps.Map(this.$refs.map, {
+						center: uluru,
+						zoom: 15
+					});
+					new maps.Marker({
+						position: uluru,
+						map: map
+					});
+				});
+			}
+		}
+	},
+
+	beforeDestroy() {
+		this.decapture(true);
+
+		if ((this as any).os.isSignedIn) {
+			this.connection.off('_connected_', this.onStreamConnected);
+			(this as any).os.stream.dispose(this.connectionId);
+		}
+	},
+
+	methods: {
+		capture(withHandler = false) {
+			if ((this as any).os.isSignedIn) {
+				this.connection.send({
+					type: 'capture',
+					id: this.p.id
+				});
+				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
+			}
+		},
+		decapture(withHandler = false) {
+			if ((this as any).os.isSignedIn) {
+				this.connection.send({
+					type: 'decapture',
+					id: this.p.id
+				});
+				if (withHandler) this.connection.off('note-updated', this.onStreamNoteUpdated);
+			}
+		},
+		onStreamConnected() {
+			this.capture();
+		},
+		onStreamNoteUpdated(data) {
+			const note = data.note;
+			if (note.id == this.note.id) {
+				this.$emit('update:note', note);
+			} else if (note.id == this.note.renoteId) {
+				this.note.renote = note;
+			}
+		},
+		reply() {
+			(this as any).apis.post({
+				reply: this.p
+			});
+		},
+		renote() {
+			(this as any).apis.post({
+				renote: this.p
+			});
+		},
+		react() {
+			(this as any).os.new(MkReactionPicker, {
+				source: this.$refs.reactButton,
+				note: this.p,
+				compact: true
+			});
+		},
+		menu() {
+			(this as any).os.new(MkNoteMenu, {
+				source: this.$refs.menuButton,
+				note: this.p,
+				compact: true
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.note
+	font-size 12px
+	border-bottom solid 1px #eaeaea
+
+	&:first-child
+		border-radius 8px 8px 0 0
+
+		> .renote
+			border-radius 8px 8px 0 0
+
+	&:last-of-type
+		border-bottom none
+
+	@media (min-width 350px)
+		font-size 14px
+
+	@media (min-width 500px)
+		font-size 16px
+
+	> .renote
+		color #9dbb00
+		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+
+		> p
+			margin 0
+			padding 8px 16px
+			line-height 28px
+
+			@media (min-width 500px)
+				padding 16px
+
+			.avatar-anchor
+				display inline-block
+
+				.avatar
+					vertical-align bottom
+					width 28px
+					height 28px
+					margin 0 8px 0 0
+					border-radius 6px
+
+			[data-fa]
+				margin-right 4px
+
+			.name
+				font-weight bold
+
+		> .mk-time
+			position absolute
+			top 8px
+			right 16px
+			font-size 0.9em
+			line-height 28px
+
+			@media (min-width 500px)
+				top 16px
+
+		& + article
+			padding-top 8px
+
+	> .reply-to
+		background rgba(0, 0, 0, 0.0125)
+
+		> .mk-note-preview
+			background transparent
+
+	> article
+		padding 14px 16px 9px 16px
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		> .avatar-anchor
+			display block
+			float left
+			margin 0 10px 8px 0
+			position -webkit-sticky
+			position sticky
+			top 62px
+
+			@media (min-width 500px)
+				margin-right 16px
+
+			> .avatar
+				display block
+				width 48px
+				height 48px
+				margin 0
+				border-radius 6px
+				vertical-align bottom
+
+				@media (min-width 500px)
+					width 58px
+					height 58px
+					border-radius 8px
+
+		> .main
+			float left
+			width calc(100% - 58px)
+
+			@media (min-width 500px)
+				width calc(100% - 74px)
+
+			> header
+				display flex
+				align-items center
+				white-space nowrap
+
+				@media (min-width 500px)
+					margin-bottom 2px
+
+				> .name
+					display block
+					margin 0 0.5em 0 0
+					padding 0
+					overflow hidden
+					color #627079
+					font-size 1em
+					font-weight bold
+					text-decoration none
+					text-overflow ellipsis
+
+					&:hover
+						text-decoration underline
+
+				> .is-bot
+					margin 0 0.5em 0 0
+					padding 1px 6px
+					font-size 12px
+					color #aaa
+					border solid 1px #ddd
+					border-radius 3px
+
+				> .username
+					margin 0 0.5em 0 0
+					color #ccc
+
+				> .info
+					margin-left auto
+					font-size 0.9em
+
+					> .mobile
+						margin-right 6px
+						color #c0c0c0
+
+					> .created-at
+						color #c0c0c0
+
+			> .body
+
+				> .text
+					display block
+					margin 0
+					padding 0
+					overflow-wrap break-word
+					font-size 1.1em
+					color #717171
+
+					>>> .quote
+						margin 8px
+						padding 6px 12px
+						color #aaa
+						border-left solid 3px #eee
+
+					> .reply
+						margin-right 8px
+						color #717171
+
+					> .rp
+						margin-left 4px
+						font-style oblique
+						color #a0bf46
+
+					[data-is-me]:after
+						content "you"
+						padding 0 4px
+						margin-left 4px
+						font-size 80%
+						color $theme-color-foreground
+						background $theme-color
+						border-radius 4px
+
+				.mk-url-preview
+					margin-top 8px
+
+				> .channel
+					margin 0
+
+				> .tags
+					margin 4px 0 0 0
+
+					> *
+						display inline-block
+						margin 0 8px 0 0
+						padding 2px 8px 2px 16px
+						font-size 90%
+						color #8d969e
+						background #edf0f3
+						border-radius 4px
+
+						&:before
+							content ""
+							display block
+							position absolute
+							top 0
+							bottom 0
+							left 4px
+							width 8px
+							height 8px
+							margin auto 0
+							background #fff
+							border-radius 100%
+
+				> .media
+					> img
+						display block
+						max-width 100%
+
+				> .location
+					margin 4px 0
+					font-size 12px
+					color #ccc
+
+				> .map
+					width 100%
+					height 200px
+
+					&:empty
+						display none
+
+				> .app
+					font-size 12px
+					color #ccc
+
+				> .mk-poll
+					font-size 80%
+
+				> .renote
+					margin 8px 0
+
+					> .mk-note-preview
+						padding 16px
+						border dashed 1px #c0dac6
+						border-radius 8px
+
+			> footer
+				> button
+					margin 0
+					padding 8px
+					background transparent
+					border none
+					box-shadow none
+					font-size 1em
+					color #ddd
+					cursor pointer
+
+					&:not(:last-child)
+						margin-right 28px
+
+					&:hover
+						color #666
+
+					> .count
+						display inline
+						margin 0 0 0 8px
+						color #999
+
+					&.reacted
+						color $theme-color
+
+					&.menu
+						@media (max-width 350px)
+							display none
+
+</style>
+
+<style lang="stylus" module>
+.text
+	code
+		padding 4px 8px
+		margin 0 0.5em
+		font-size 80%
+		color #525252
+		background #f8f8f8
+		border-radius 2px
+
+	pre > code
+		padding 16px
+		margin 0
+</style>
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
new file mode 100644
index 0000000000..573026d53e
--- /dev/null
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -0,0 +1,111 @@
+<template>
+<div class="mk-notes">
+	<slot name="head"></slot>
+	<slot></slot>
+	<template v-for="(note, i) in _notes">
+		<mk-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
+		<p class="date" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
+			<span>%fa:angle-up%{{ note._datetext }}</span>
+			<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
+		</p>
+	</template>
+	<footer>
+		<slot name="tail"></slot>
+	</footer>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		notes: {
+			type: Array,
+			default: () => []
+		}
+	},
+	computed: {
+		_notes(): any[] {
+			return (this.notes as any).map(note => {
+				const date = new Date(note.createdAt).getDate();
+				const month = new Date(note.createdAt).getMonth() + 1;
+				note._date = date;
+				note._datetext = `${month}月 ${date}日`;
+				return note;
+			});
+		}
+	},
+	methods: {
+		onNoteUpdated(i, note) {
+			Vue.set((this as any).notes, i, note);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-notes
+	background #fff
+	border-radius 8px
+	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+
+	> .init
+		padding 64px 0
+		text-align center
+		color #999
+
+		> [data-fa]
+			margin-right 4px
+
+	> .empty
+		margin 0 auto
+		padding 32px
+		max-width 400px
+		text-align center
+		color #999
+
+		> [data-fa]
+			display block
+			margin-bottom 16px
+			font-size 3em
+			color #ccc
+
+	> .date
+		display block
+		margin 0
+		line-height 32px
+		text-align center
+		font-size 0.9em
+		color #aaa
+		background #fdfdfd
+		border-bottom solid 1px #eaeaea
+
+		span
+			margin 0 16px
+
+		[data-fa]
+			margin-right 8px
+
+	> footer
+		text-align center
+		border-top solid 1px #eaeaea
+		border-bottom-left-radius 4px
+		border-bottom-right-radius 4px
+
+		&:empty
+			display none
+
+		> button
+			margin 0
+			padding 16px
+			width 100%
+			color $theme-color
+			border-radius 0 0 8px 8px
+
+			&:disabled
+				opacity 0.7
+
+</style>
diff --git a/src/client/app/mobile/views/components/notification-preview.vue b/src/client/app/mobile/views/components/notification-preview.vue
index 0492c5d86c..79ca3321e4 100644
--- a/src/client/app/mobile/views/components/notification-preview.vue
+++ b/src/client/app/mobile/views/components/notification-preview.vue
@@ -4,23 +4,23 @@
 		<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
 			<p><mk-reaction-icon :reaction="notification.reaction"/>{{ name }}</p>
-			<p class="post-ref">%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%</p>
+			<p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%</p>
 		</div>
 	</template>
 
-	<template v-if="notification.type == 'repost'">
-		<img class="avatar" :src="`${notification.post.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+	<template v-if="notification.type == 'renote'">
+		<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
-			<p>%fa:retweet%{{ posterName }}</p>
-			<p class="post-ref">%fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right%</p>
+			<p>%fa:retweet%{{ noteerName }}</p>
+			<p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%</p>
 		</div>
 	</template>
 
 	<template v-if="notification.type == 'quote'">
-		<img class="avatar" :src="`${notification.post.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
-			<p>%fa:quote-left%{{ posterName }}</p>
-			<p class="post-preview">{{ getPostSummary(notification.post) }}</p>
+			<p>%fa:quote-left%{{ noteerName }}</p>
+			<p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
 		</div>
 	</template>
 
@@ -32,18 +32,18 @@
 	</template>
 
 	<template v-if="notification.type == 'reply'">
-		<img class="avatar" :src="`${notification.post.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
-			<p>%fa:reply%{{ posterName }}</p>
-			<p class="post-preview">{{ getPostSummary(notification.post) }}</p>
+			<p>%fa:reply%{{ noteerName }}</p>
+			<p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
 		</div>
 	</template>
 
 	<template v-if="notification.type == 'mention'">
-		<img class="avatar" :src="`${notification.post.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
-			<p>%fa:at%{{ posterName }}</p>
-			<p class="post-preview">{{ getPostSummary(notification.post) }}</p>
+			<p>%fa:at%{{ noteerName }}</p>
+			<p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
 		</div>
 	</template>
 
@@ -51,7 +51,7 @@
 		<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
 			<p>%fa:chart-pie%{{ name }}</p>
-			<p class="post-ref">%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%</p>
+			<p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%</p>
 		</div>
 	</template>
 </div>
@@ -59,7 +59,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getPostSummary from '../../../../../renderers/get-post-summary';
+import getNoteSummary from '../../../../../renderers/get-note-summary';
 import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
@@ -68,13 +68,13 @@ export default Vue.extend({
 		name() {
 			return getUserName(this.notification.user);
 		},
-		posterName() {
-			return getUserName(this.notification.post.user);
+		noteerName() {
+			return getUserName(this.notification.note.user);
 		}
 	},
 	data() {
 		return {
-			getPostSummary
+			getNoteSummary
 		};
 	}
 });
@@ -112,7 +112,7 @@ export default Vue.extend({
 			i, mk-reaction-icon
 				margin-right 4px
 
-	.post-ref
+	.note-ref
 
 		[data-fa]
 			font-size 1em
@@ -121,7 +121,7 @@ export default Vue.extend({
 			display inline-block
 			margin-right 3px
 
-	&.repost, &.quote
+	&.renote, &.quote
 		.text p i
 			color #77B255
 
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index 62a0e6425e..e1294a8778 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -10,31 +10,31 @@
 				<mk-reaction-icon :reaction="notification.reaction"/>
 				<router-link :to="`/@${acct}`">{{ getUserName(notification.user) }}</router-link>
 			</p>
-			<router-link class="post-ref" :to="`/@${acct}/${notification.post.id}`">
-				%fa:quote-left%{{ getPostSummary(notification.post) }}
+			<router-link class="note-ref" :to="`/@${acct}/${notification.note.id}`">
+				%fa:quote-left%{{ getNoteSummary(notification.note) }}
 				%fa:quote-right%
 			</router-link>
 		</div>
 	</div>
 
-	<div class="notification repost" v-if="notification.type == 'repost'">
+	<div class="notification renote" v-if="notification.type == 'renote'">
 		<mk-time :time="notification.createdAt"/>
 		<router-link class="avatar-anchor" :to="`/@${acct}`">
-			<img class="avatar" :src="`${notification.post.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+			<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
 		<div class="text">
 			<p>
 				%fa:retweet%
-				<router-link :to="`/@${acct}`">{{ getUserName(notification.post.user) }}</router-link>
+				<router-link :to="`/@${acct}`">{{ getUserName(notification.note.user) }}</router-link>
 			</p>
-			<router-link class="post-ref" :to="`/@${acct}/${notification.post.id}`">
-				%fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right%
+			<router-link class="note-ref" :to="`/@${acct}/${notification.note.id}`">
+				%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
 			</router-link>
 		</div>
 	</div>
 
 	<template v-if="notification.type == 'quote'">
-		<mk-post :post="notification.post"/>
+		<mk-note :note="notification.note"/>
 	</template>
 
 	<div class="notification follow" v-if="notification.type == 'follow'">
@@ -51,11 +51,11 @@
 	</div>
 
 	<template v-if="notification.type == 'reply'">
-		<mk-post :post="notification.post"/>
+		<mk-note :note="notification.note"/>
 	</template>
 
 	<template v-if="notification.type == 'mention'">
-		<mk-post :post="notification.post"/>
+		<mk-note :note="notification.note"/>
 	</template>
 
 	<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
@@ -68,8 +68,8 @@
 				%fa:chart-pie%
 				<router-link :to="`/@${acct}`">{{ getUserName(notification.user) }}</router-link>
 			</p>
-			<router-link class="post-ref" :to="`/@${acct}/${notification.post.id}`">
-				%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
+			<router-link class="note-ref" :to="`/@${acct}/${notification.note.id}`">
+				%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
 			</router-link>
 		</div>
 	</div>
@@ -78,7 +78,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getPostSummary from '../../../../../renderers/get-post-summary';
+import getNoteSummary from '../../../../../renderers/get-note-summary';
 import getAcct from '../../../../../acct/render';
 import getUserName from '../../../../../renderers/get-user-name';
 
@@ -91,13 +91,13 @@ export default Vue.extend({
 		name() {
 			return getUserName(this.notification.user);
 		},
-		posterName() {
- 			return getUserName(this.notification.post.user);
+		noteerName() {
+ 			return getUserName(this.notification.note.user);
 		}
 	},
 	data() {
 		return {
-			getPostSummary
+			getNoteSummary
 		};
 	}
 });
@@ -146,10 +146,10 @@ export default Vue.extend({
 				i, .mk-reaction-icon
 					margin-right 4px
 
-			> .post-preview
+			> .note-preview
 				color rgba(0, 0, 0, 0.7)
 
-			> .post-ref
+			> .note-ref
 				color rgba(0, 0, 0, 0.7)
 
 				[data-fa]
@@ -159,7 +159,7 @@ export default Vue.extend({
 					display inline-block
 					margin-right 3px
 
-		&.repost
+		&.renote
 			.text p i
 				color #77B255
 
diff --git a/src/client/app/mobile/views/components/post-card.vue b/src/client/app/mobile/views/components/post-card.vue
deleted file mode 100644
index 68a42ef249..0000000000
--- a/src/client/app/mobile/views/components/post-card.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-<div class="mk-post-card">
-	<a :href="`/@${acct}/${post.id}`">
-		<header>
-			<img :src="`${acct}?thumbnail&size=64`" alt="avatar"/><h3>{{ name }}</h3>
-		</header>
-		<div>
-			{{ text }}
-		</div>
-		<mk-time :time="post.createdAt"/>
-	</a>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import summary from '../../../../../renderers/get-post-summary';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
-
-export default Vue.extend({
-	props: ['post'],
-	computed: {
-		acct() {
-			return getAcct(this.post.user);
-		},
-		name() {
-			return getUserName(this.post.user);
-		},
-		text(): string {
-			return summary(this.post);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-post-card
-	display inline-block
-	width 150px
-	//height 120px
-	font-size 12px
-	background #fff
-	border-radius 4px
-
-	> a
-		display block
-		color #2c3940
-
-		&:hover
-			text-decoration none
-
-		> header
-			> img
-				position absolute
-				top 8px
-				left 8px
-				width 28px
-				height 28px
-				border-radius 6px
-
-			> h3
-				display inline-block
-				overflow hidden
-				width calc(100% - 45px)
-				margin 8px 0 0 42px
-				line-height 28px
-				white-space nowrap
-				text-overflow ellipsis
-				font-size 12px
-
-		> div
-			padding 2px 8px 8px 8px
-			height 60px
-			overflow hidden
-			white-space normal
-
-			&:after
-				content ""
-				display block
-				position absolute
-				top 40px
-				left 0
-				width 100%
-				height 20px
-				background linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%)
-
-		> .mk-time
-			display inline-block
-			padding 8px
-			color #aaa
-
-</style>
diff --git a/src/client/app/mobile/views/components/post-detail.sub.vue b/src/client/app/mobile/views/components/post-detail.sub.vue
deleted file mode 100644
index 98d6a14cac..0000000000
--- a/src/client/app/mobile/views/components/post-detail.sub.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-<div class="root sub">
-	<router-link class="avatar-anchor" :to="`/@${acct}`">
-		<img class="avatar" :src="`${post.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-	</router-link>
-	<div class="main">
-		<header>
-			<router-link class="name" :to="`/@${acct}`">{{ getUserName(post.user) }}</router-link>
-			<span class="username">@{{ acct }}</span>
-			<router-link class="time" :to="`/@${acct}/${post.id}`">
-				<mk-time :time="post.createdAt"/>
-			</router-link>
-		</header>
-		<div class="body">
-			<mk-sub-post-content class="text" :post="post"/>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
-
-export default Vue.extend({
-	props: ['post'],
-	computed: {
-		acct() {
-			return getAcct(this.post.user);
-		},
-		name() {
-			return getUserName(this.post.user);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.root.sub
-	padding 8px
-	font-size 0.9em
-	background #fdfdfd
-
-	@media (min-width 500px)
-		padding 12px
-
-	&:after
-		content ""
-		display block
-		clear both
-
-	&:hover
-		> .main > footer > button
-			color #888
-
-	> .avatar-anchor
-		display block
-		float left
-		margin 0 12px 0 0
-
-		> .avatar
-			display block
-			width 48px
-			height 48px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
-
-	> .main
-		float left
-		width calc(100% - 60px)
-
-		> header
-			display flex
-			margin-bottom 4px
-			white-space nowrap
-
-			> .name
-				display block
-				margin 0 .5em 0 0
-				padding 0
-				overflow hidden
-				color #607073
-				font-size 1em
-				font-weight 700
-				text-align left
-				text-decoration none
-				text-overflow ellipsis
-
-				&:hover
-					text-decoration underline
-
-			> .username
-				text-align left
-				margin 0 .5em 0 0
-				color #d1d8da
-
-			> .time
-				margin-left auto
-				color #b2b8bb
-
-		> .body
-
-			> .text
-				cursor default
-				margin 0
-				padding 0
-				font-size 1.1em
-				color #717171
-
-</style>
-
diff --git a/src/client/app/mobile/views/components/post-detail.vue b/src/client/app/mobile/views/components/post-detail.vue
index 0226ce081a..e1682e58ed 100644
--- a/src/client/app/mobile/views/components/post-detail.vue
+++ b/src/client/app/mobile/views/components/post-detail.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-post-detail">
+<div class="mk-note-detail">
 	<button
 		class="more"
 		v-if="p.reply && p.reply.replyId && context == null"
@@ -10,21 +10,21 @@
 		<template v-if="contextFetching">%fa:spinner .pulse%</template>
 	</button>
 	<div class="context">
-		<x-sub v-for="post in context" :key="post.id" :post="post"/>
+		<x-sub v-for="note in context" :key="note.id" :note="note"/>
 	</div>
 	<div class="reply-to" v-if="p.reply">
-		<x-sub :post="p.reply"/>
+		<x-sub :note="p.reply"/>
 	</div>
-	<div class="repost" v-if="isRepost">
+	<div class="renote" v-if="isRenote">
 		<p>
 			<router-link class="avatar-anchor" :to="`/@${acct}`">
-				<img class="avatar" :src="`${post.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
+				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
 			</router-link>
 			%fa:retweet%
 			<router-link class="name" :to="`/@${acct}`">
 				{{ name }}
 			</router-link>
-			がRepost
+			がRenote
 		</p>
 	</div>
 	<article>
@@ -38,33 +38,33 @@
 			</div>
 		</header>
 		<div class="body">
-			<mk-post-html v-if="p.text" :ast="p.text" :i="os.i" :class="$style.text"/>
+			<mk-note-html v-if="p.text" :ast="p.text" :i="os.i" :class="$style.text"/>
 			<div class="tags" v-if="p.tags && p.tags.length > 0">
 				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
 			</div>
 			<div class="media" v-if="p.media.length > 0">
 				<mk-media-list :media-list="p.media"/>
 			</div>
-			<mk-poll v-if="p.poll" :post="p"/>
+			<mk-poll v-if="p.poll" :note="p"/>
 			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 			<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
 			<div class="map" v-if="p.geo" ref="map"></div>
-			<div class="repost" v-if="p.repost">
-				<mk-post-preview :post="p.repost"/>
+			<div class="renote" v-if="p.renote">
+				<mk-note-preview :note="p.renote"/>
 			</div>
 		</div>
 		<router-link class="time" :to="`/@${pAcct}/${p.id}`">
 			<mk-time :time="p.createdAt" mode="detail"/>
 		</router-link>
 		<footer>
-			<mk-reactions-viewer :post="p"/>
-			<button @click="reply" title="%i18n:mobile.tags.mk-post-detail.reply%">
+			<mk-reactions-viewer :note="p"/>
+			<button @click="reply" title="%i18n:mobile.tags.mk-note-detail.reply%">
 				%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
 			</button>
-			<button @click="repost" title="Repost">
-				%fa:retweet%<p class="count" v-if="p.repostCount > 0">{{ p.repostCount }}</p>
+			<button @click="renote" title="Renote">
+				%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
 			</button>
-			<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:mobile.tags.mk-post-detail.reaction%">
+			<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:mobile.tags.mk-note-detail.reaction%">
 				%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
 			</button>
 			<button @click="menu" ref="menuButton">
@@ -73,7 +73,7 @@
 		</footer>
 	</article>
 	<div class="replies" v-if="!compact">
-		<x-sub v-for="post in replies" :key="post.id" :post="post"/>
+		<x-sub v-for="note in replies" :key="note.id" :note="note"/>
 	</div>
 </div>
 </template>
@@ -84,9 +84,9 @@ import getAcct from '../../../../../acct/render';
 import getUserName from '../../../../../renderers/get-user-name';
 import parse from '../../../../../text/parse';
 
-import MkPostMenu from '../../../common/views/components/post-menu.vue';
+import MkNoteMenu from '../../../common/views/components/note-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
-import XSub from './post-detail.sub.vue';
+import XSub from './note-detail.sub.vue';
 
 export default Vue.extend({
 	components: {
@@ -94,7 +94,7 @@ export default Vue.extend({
 	},
 
 	props: {
-		post: {
+		note: {
 			type: Object,
 			required: true
 		},
@@ -113,10 +113,10 @@ export default Vue.extend({
 
 	computed: {
 		acct(): string {
-			return getAcct(this.post.user);
+			return getAcct(this.note.user);
 		},
 		name(): string {
-			return getUserName(this.post.user);
+			return getUserName(this.note.user);
 		},
 		pAcct(): string {
 			return getAcct(this.p.user);
@@ -124,14 +124,14 @@ export default Vue.extend({
 		pName(): string {
 			return getUserName(this.p.user);
 		},
-		isRepost(): boolean {
-			return (this.post.repost &&
-				this.post.text == null &&
-				this.post.mediaIds == null &&
-				this.post.poll == null);
+		isRenote(): boolean {
+			return (this.note.renote &&
+				this.note.text == null &&
+				this.note.mediaIds == null &&
+				this.note.poll == null);
 		},
 		p(): any {
-			return this.isRepost ? this.post.repost : this.post;
+			return this.isRenote ? this.note.renote : this.note;
 		},
 		reactionsCount(): number {
 			return this.p.reactionCounts
@@ -155,8 +155,8 @@ export default Vue.extend({
 	mounted() {
 		// Get replies
 		if (!this.compact) {
-			(this as any).api('posts/replies', {
-				postId: this.p.id,
+			(this as any).api('notes/replies', {
+				noteId: this.p.id,
 				limit: 8
 			}).then(replies => {
 				this.replies = replies;
@@ -187,8 +187,8 @@ export default Vue.extend({
 			this.contextFetching = true;
 
 			// Fetch context
-			(this as any).api('posts/context', {
-				postId: this.p.replyId
+			(this as any).api('notes/context', {
+				noteId: this.p.replyId
 			}).then(context => {
 				this.contextFetching = false;
 				this.context = context.reverse();
@@ -199,22 +199,22 @@ export default Vue.extend({
 				reply: this.p
 			});
 		},
-		repost() {
+		renote() {
 			(this as any).apis.post({
-				repost: this.p
+				renote: this.p
 			});
 		},
 		react() {
 			(this as any).os.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
-				post: this.p,
+				note: this.p,
 				compact: true
 			});
 		},
 		menu() {
-			(this as any).os.new(MkPostMenu, {
+			(this as any).os.new(MkNoteMenu, {
 				source: this.$refs.menuButton,
-				post: this.p,
+				note: this.p,
 				compact: true
 			});
 		}
@@ -225,7 +225,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.mk-post-detail
+.mk-note-detail
 	overflow hidden
 	margin 0 auto
 	padding 0
@@ -267,7 +267,7 @@ export default Vue.extend({
 		> *
 			border-bottom 1px solid #eef0f2
 
-	> .repost
+	> .renote
 		color #9dbb00
 		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
 
@@ -357,10 +357,10 @@ export default Vue.extend({
 		> .body
 			padding 8px 0
 
-			> .repost
+			> .renote
 				margin 8px 0
 
-				> .mk-post-preview
+				> .mk-note-preview
 					padding 16px
 					border dashed 1px #c0dac6
 					border-radius 8px
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 5b78a25710..6fcbbb47e8 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -9,8 +9,8 @@
 		</div>
 	</header>
 	<div class="form">
-		<mk-post-preview v-if="reply" :post="reply"/>
-		<textarea v-model="text" ref="text" :disabled="posting" :placeholder="reply ? '%i18n:mobile.tags.mk-post-form.reply-placeholder%' : '%i18n:mobile.tags.mk-post-form.post-placeholder%'"></textarea>
+		<mk-note-preview v-if="reply" :note="reply"/>
+		<textarea v-model="text" ref="text" :disabled="posting" :placeholder="reply ? '%i18n:mobile.tags.mk-post-form.reply-placeholder%' : '%i18n:mobile.tags.mk-post-form.note-placeholder%'"></textarea>
 		<div class="attaches" v-show="files.length != 0">
 			<x-draggable class="files" :list="files" :options="{ animation: 150 }">
 				<div class="file" v-for="file in files" :key="file.id">
@@ -112,7 +112,7 @@ export default Vue.extend({
 		post() {
 			this.posting = true;
 			const viaMobile = (this as any).os.i.account.clientSettings.disableViaMobile !== true;
-			(this as any).api('posts/create', {
+			(this as any).api('notes/create', {
 				text: this.text == '' ? undefined : this.text,
 				mediaIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
 				replyId: this.reply ? this.reply.id : undefined,
@@ -127,7 +127,7 @@ export default Vue.extend({
 				} : null,
 				viaMobile: viaMobile
 			}).then(data => {
-				this.$emit('post');
+				this.$emit('note');
 				this.$destroy();
 			}).catch(err => {
 				this.posting = false;
@@ -200,7 +200,7 @@ export default Vue.extend({
 		max-width 500px
 		margin 0 auto
 
-		> .mk-post-preview
+		> .mk-note-preview
 			padding 16px
 
 		> .attaches
diff --git a/src/client/app/mobile/views/components/post-preview.vue b/src/client/app/mobile/views/components/post-preview.vue
deleted file mode 100644
index 96bd4d5c15..0000000000
--- a/src/client/app/mobile/views/components/post-preview.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-<div class="mk-post-preview">
-	<router-link class="avatar-anchor" :to="`/@${acct}`">
-		<img class="avatar" :src="`${post.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-	</router-link>
-	<div class="main">
-		<header>
-			<router-link class="name" :to="`/@${acct}`">{{ name }}</router-link>
-			<span class="username">@{{ acct }}</span>
-			<router-link class="time" :to="`/@${acct}/${post.id}`">
-				<mk-time :time="post.createdAt"/>
-			</router-link>
-		</header>
-		<div class="body">
-			<mk-sub-post-content class="text" :post="post"/>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
-
-export default Vue.extend({
-	props: ['post'],
-	computed: {
-		acct() {
-			return getAcct(this.post.user);
-		},
-		name() {
-			return getUserName(this.post.user);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-post-preview
-	margin 0
-	padding 0
-	font-size 0.9em
-	background #fff
-
-	&:after
-		content ""
-		display block
-		clear both
-
-	&:hover
-		> .main > footer > button
-			color #888
-
-	> .avatar-anchor
-		display block
-		float left
-		margin 0 12px 0 0
-
-		> .avatar
-			display block
-			width 48px
-			height 48px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
-
-	> .main
-		float left
-		width calc(100% - 60px)
-
-		> header
-			display flex
-			margin-bottom 4px
-			white-space nowrap
-
-			> .name
-				display block
-				margin 0 .5em 0 0
-				padding 0
-				overflow hidden
-				color #607073
-				font-size 1em
-				font-weight 700
-				text-align left
-				text-decoration none
-				text-overflow ellipsis
-
-				&:hover
-					text-decoration underline
-
-			> .username
-				text-align left
-				margin 0 .5em 0 0
-				color #d1d8da
-
-			> .time
-				margin-left auto
-				color #b2b8bb
-
-		> .body
-
-			> .text
-				cursor default
-				margin 0
-				padding 0
-				font-size 1.1em
-				color #717171
-
-</style>
diff --git a/src/client/app/mobile/views/components/post.sub.vue b/src/client/app/mobile/views/components/post.sub.vue
deleted file mode 100644
index 909d5cb597..0000000000
--- a/src/client/app/mobile/views/components/post.sub.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-<div class="sub">
-	<router-link class="avatar-anchor" :to="`/@${acct}`">
-		<img class="avatar" :src="`${post.user.avatarUrl}?thumbnail&size=96`" alt="avatar"/>
-	</router-link>
-	<div class="main">
-		<header>
-			<router-link class="name" :to="`/@${acct}`">{{ getUserName(post.user) }}</router-link>
-			<span class="username">@{{ acct }}</span>
-			<router-link class="created-at" :to="`/@${acct}/${post.id}`">
-				<mk-time :time="post.createdAt"/>
-			</router-link>
-		</header>
-		<div class="body">
-			<mk-sub-post-content class="text" :post="post"/>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
-
-export default Vue.extend({
-	props: ['post'],
-	computed: {
-		acct() {
-			return getAcct(this.post.user);
-		},
-		name() {
-			return getUserName(this.post.user);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.sub
-	font-size 0.9em
-	padding 16px
-
-	&:after
-		content ""
-		display block
-		clear both
-
-	> .avatar-anchor
-		display block
-		float left
-		margin 0 10px 0 0
-
-		@media (min-width 500px)
-			margin-right 16px
-
-		> .avatar
-			display block
-			width 44px
-			height 44px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
-
-			@media (min-width 500px)
-				width 52px
-				height 52px
-
-	> .main
-		float left
-		width calc(100% - 54px)
-
-		@media (min-width 500px)
-			width calc(100% - 68px)
-
-		> header
-			display flex
-			margin-bottom 2px
-			white-space nowrap
-
-			> .name
-				display block
-				margin 0 0.5em 0 0
-				padding 0
-				overflow hidden
-				color #607073
-				font-size 1em
-				font-weight 700
-				text-align left
-				text-decoration none
-				text-overflow ellipsis
-
-				&:hover
-					text-decoration underline
-
-			> .username
-				text-align left
-				margin 0
-				color #d1d8da
-
-			> .created-at
-				margin-left auto
-				color #b2b8bb
-
-		> .body
-
-			> .text
-				cursor default
-				margin 0
-				padding 0
-				font-size 1.1em
-				color #717171
-
-				pre
-					max-height 120px
-					font-size 80%
-
-</style>
-
diff --git a/src/client/app/mobile/views/components/post.vue b/src/client/app/mobile/views/components/post.vue
index eee1e80fd3..4b33c6f071 100644
--- a/src/client/app/mobile/views/components/post.vue
+++ b/src/client/app/mobile/views/components/post.vue
@@ -1,19 +1,19 @@
 <template>
-<div class="post" :class="{ repost: isRepost }">
+<div class="note" :class="{ renote: isRenote }">
 	<div class="reply-to" v-if="p.reply">
-		<x-sub :post="p.reply"/>
+		<x-sub :note="p.reply"/>
 	</div>
-	<div class="repost" v-if="isRepost">
+	<div class="renote" v-if="isRenote">
 		<p>
 			<router-link class="avatar-anchor" :to="`/@${acct}`">
-				<img class="avatar" :src="`${post.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 			</router-link>
 			%fa:retweet%
-			<span>{{ '%i18n:mobile.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:mobile.tags.mk-timeline-post.reposted-by%'.indexOf('{')) }}</span>
+			<span>{{ '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.substr(0, '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.indexOf('{')) }}</span>
 			<router-link class="name" :to="`/@${acct}`">{{ name }}</router-link>
-			<span>{{ '%i18n:mobile.tags.mk-timeline-post.reposted-by%'.substr('%i18n:mobile.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1) }}</span>
+			<span>{{ '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.substr('%i18n:mobile.tags.mk-timeline-note.reposted-by%'.indexOf('}') + 1) }}</span>
 		</p>
-		<mk-time :time="post.createdAt"/>
+		<mk-time :time="note.createdAt"/>
 	</div>
 	<article>
 		<router-link class="avatar-anchor" :to="`/@${pAcct}`">
@@ -37,13 +37,13 @@
 					<a class="reply" v-if="p.reply">
 						%fa:reply%
 					</a>
-					<mk-post-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
-					<a class="rp" v-if="p.repost != null">RP:</a>
+					<mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
+					<a class="rp" v-if="p.renote != null">RP:</a>
 				</div>
 				<div class="media" v-if="p.media.length > 0">
 					<mk-media-list :media-list="p.media"/>
 				</div>
-				<mk-poll v-if="p.poll" :post="p" ref="pollViewer"/>
+				<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
 				<div class="tags" v-if="p.tags && p.tags.length > 0">
 					<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
 				</div>
@@ -51,17 +51,17 @@
 				<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
 				<div class="map" v-if="p.geo" ref="map"></div>
 				<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
-				<div class="repost" v-if="p.repost">
-					<mk-post-preview :post="p.repost"/>
+				<div class="renote" v-if="p.renote">
+					<mk-note-preview :note="p.renote"/>
 				</div>
 			</div>
 			<footer>
-				<mk-reactions-viewer :post="p" ref="reactionsViewer"/>
+				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
 				<button @click="reply">
 					%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
 				</button>
-				<button @click="repost" title="Repost">
-					%fa:retweet%<p class="count" v-if="p.repostCount > 0">{{ p.repostCount }}</p>
+				<button @click="renote" title="Renote">
+					%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
 				</button>
 				<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton">
 					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
@@ -81,16 +81,16 @@ import getAcct from '../../../../../acct/render';
 import getUserName from '../../../../../renderers/get-user-name';
 import parse from '../../../../../text/parse';
 
-import MkPostMenu from '../../../common/views/components/post-menu.vue';
+import MkNoteMenu from '../../../common/views/components/note-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
-import XSub from './post.sub.vue';
+import XSub from './note.sub.vue';
 
 export default Vue.extend({
 	components: {
 		XSub
 	},
 
-	props: ['post'],
+	props: ['note'],
 
 	data() {
 		return {
@@ -101,10 +101,10 @@ export default Vue.extend({
 
 	computed: {
 		acct(): string {
-			return getAcct(this.post.user);
+			return getAcct(this.note.user);
 		},
 		name(): string {
-			return getUserName(this.post.user);
+			return getUserName(this.note.user);
 		},
 		pAcct(): string {
 			return getAcct(this.p.user);
@@ -112,14 +112,14 @@ export default Vue.extend({
 		pName(): string {
 			return getUserName(this.p.user);
 		},
-		isRepost(): boolean {
-			return (this.post.repost &&
-				this.post.text == null &&
-				this.post.mediaIds == null &&
-				this.post.poll == null);
+		isRenote(): boolean {
+			return (this.note.renote &&
+				this.note.text == null &&
+				this.note.mediaIds == null &&
+				this.note.poll == null);
 		},
 		p(): any {
-			return this.isRepost ? this.post.repost : this.post;
+			return this.isRenote ? this.note.renote : this.note;
 		},
 		reactionsCount(): number {
 			return this.p.reactionCounts
@@ -192,7 +192,7 @@ export default Vue.extend({
 					type: 'capture',
 					id: this.p.id
 				});
-				if (withHandler) this.connection.on('post-updated', this.onStreamPostUpdated);
+				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
 			}
 		},
 		decapture(withHandler = false) {
@@ -201,18 +201,18 @@ export default Vue.extend({
 					type: 'decapture',
 					id: this.p.id
 				});
-				if (withHandler) this.connection.off('post-updated', this.onStreamPostUpdated);
+				if (withHandler) this.connection.off('note-updated', this.onStreamNoteUpdated);
 			}
 		},
 		onStreamConnected() {
 			this.capture();
 		},
-		onStreamPostUpdated(data) {
-			const post = data.post;
-			if (post.id == this.post.id) {
-				this.$emit('update:post', post);
-			} else if (post.id == this.post.repostId) {
-				this.post.repost = post;
+		onStreamNoteUpdated(data) {
+			const note = data.note;
+			if (note.id == this.note.id) {
+				this.$emit('update:note', note);
+			} else if (note.id == this.note.renoteId) {
+				this.note.renote = note;
 			}
 		},
 		reply() {
@@ -220,22 +220,22 @@ export default Vue.extend({
 				reply: this.p
 			});
 		},
-		repost() {
+		renote() {
 			(this as any).apis.post({
-				repost: this.p
+				renote: this.p
 			});
 		},
 		react() {
 			(this as any).os.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
-				post: this.p,
+				note: this.p,
 				compact: true
 			});
 		},
 		menu() {
-			(this as any).os.new(MkPostMenu, {
+			(this as any).os.new(MkNoteMenu, {
 				source: this.$refs.menuButton,
-				post: this.p,
+				note: this.p,
 				compact: true
 			});
 		}
@@ -246,14 +246,14 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.post
+.note
 	font-size 12px
 	border-bottom solid 1px #eaeaea
 
 	&:first-child
 		border-radius 8px 8px 0 0
 
-		> .repost
+		> .renote
 			border-radius 8px 8px 0 0
 
 	&:last-of-type
@@ -265,7 +265,7 @@ export default Vue.extend({
 	@media (min-width 500px)
 		font-size 16px
 
-	> .repost
+	> .renote
 		color #9dbb00
 		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
 
@@ -309,7 +309,7 @@ export default Vue.extend({
 	> .reply-to
 		background rgba(0, 0, 0, 0.0125)
 
-		> .mk-post-preview
+		> .mk-note-preview
 			background transparent
 
 	> article
@@ -485,10 +485,10 @@ export default Vue.extend({
 				> .mk-poll
 					font-size 80%
 
-				> .repost
+				> .renote
 					margin 8px 0
 
-					> .mk-post-preview
+					> .mk-note-preview
 						padding 16px
 						border dashed 1px #c0dac6
 						border-radius 8px
diff --git a/src/client/app/mobile/views/components/posts.vue b/src/client/app/mobile/views/components/posts.vue
deleted file mode 100644
index 4695f1beaa..0000000000
--- a/src/client/app/mobile/views/components/posts.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-<div class="mk-posts">
-	<slot name="head"></slot>
-	<slot></slot>
-	<template v-for="(post, i) in _posts">
-		<mk-post :post="post" :key="post.id" @update:post="onPostUpdated(i, $event)"/>
-		<p class="date" v-if="i != posts.length - 1 && post._date != _posts[i + 1]._date">
-			<span>%fa:angle-up%{{ post._datetext }}</span>
-			<span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span>
-		</p>
-	</template>
-	<footer>
-		<slot name="tail"></slot>
-	</footer>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: {
-		posts: {
-			type: Array,
-			default: () => []
-		}
-	},
-	computed: {
-		_posts(): any[] {
-			return (this.posts as any).map(post => {
-				const date = new Date(post.createdAt).getDate();
-				const month = new Date(post.createdAt).getMonth() + 1;
-				post._date = date;
-				post._datetext = `${month}月 ${date}日`;
-				return post;
-			});
-		}
-	},
-	methods: {
-		onPostUpdated(i, post) {
-			Vue.set((this as any).posts, i, post);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-.mk-posts
-	background #fff
-	border-radius 8px
-	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
-
-	> .init
-		padding 64px 0
-		text-align center
-		color #999
-
-		> [data-fa]
-			margin-right 4px
-
-	> .empty
-		margin 0 auto
-		padding 32px
-		max-width 400px
-		text-align center
-		color #999
-
-		> [data-fa]
-			display block
-			margin-bottom 16px
-			font-size 3em
-			color #ccc
-
-	> .date
-		display block
-		margin 0
-		line-height 32px
-		text-align center
-		font-size 0.9em
-		color #aaa
-		background #fdfdfd
-		border-bottom solid 1px #eaeaea
-
-		span
-			margin 0 16px
-
-		[data-fa]
-			margin-right 8px
-
-	> footer
-		text-align center
-		border-top solid 1px #eaeaea
-		border-bottom-left-radius 4px
-		border-bottom-right-radius 4px
-
-		&:empty
-			display none
-
-		> button
-			margin 0
-			padding 16px
-			width 100%
-			color $theme-color
-			border-radius 0 0 8px 8px
-
-			&:disabled
-				opacity 0.7
-
-</style>
diff --git a/src/client/app/mobile/views/components/sub-note-content.vue b/src/client/app/mobile/views/components/sub-note-content.vue
new file mode 100644
index 0000000000..22e6ebe3f1
--- /dev/null
+++ b/src/client/app/mobile/views/components/sub-note-content.vue
@@ -0,0 +1,43 @@
+<template>
+<div class="mk-sub-note-content">
+	<div class="body">
+		<a class="reply" v-if="note.replyId">%fa:reply%</a>
+		<mk-note-html v-if="note.text" :text="note.text" :i="os.i"/>
+		<a class="rp" v-if="note.renoteId">RP: ...</a>
+	</div>
+	<details v-if="note.media.length > 0">
+		<summary>({{ note.media.length }}個のメディア)</summary>
+		<mk-media-list :media-list="note.media"/>
+	</details>
+	<details v-if="note.poll">
+		<summary>%i18n:mobile.tags.mk-sub-note-content.poll%</summary>
+		<mk-poll :note="note"/>
+	</details>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['note']
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-sub-note-content
+	overflow-wrap break-word
+
+	> .body
+		> .reply
+			margin-right 6px
+			color #717171
+
+		> .rp
+			margin-left 4px
+			font-style oblique
+			color #a0bf46
+
+	mk-poll
+		font-size 80%
+
+</style>
diff --git a/src/client/app/mobile/views/components/sub-post-content.vue b/src/client/app/mobile/views/components/sub-post-content.vue
deleted file mode 100644
index 97dd987dd7..0000000000
--- a/src/client/app/mobile/views/components/sub-post-content.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-<div class="mk-sub-post-content">
-	<div class="body">
-		<a class="reply" v-if="post.replyId">%fa:reply%</a>
-		<mk-post-html v-if="post.text" :text="post.text" :i="os.i"/>
-		<a class="rp" v-if="post.repostId">RP: ...</a>
-	</div>
-	<details v-if="post.media.length > 0">
-		<summary>({{ post.media.length }}個のメディア)</summary>
-		<mk-media-list :media-list="post.media"/>
-	</details>
-	<details v-if="post.poll">
-		<summary>%i18n:mobile.tags.mk-sub-post-content.poll%</summary>
-		<mk-poll :post="post"/>
-	</details>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	props: ['post']
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-sub-post-content
-	overflow-wrap break-word
-
-	> .body
-		> .reply
-			margin-right 6px
-			color #717171
-
-		> .rp
-			margin-left 4px
-			font-style oblique
-			color #a0bf46
-
-	mk-poll
-		font-size 80%
-
-</style>
diff --git a/src/client/app/mobile/views/components/timeline.vue b/src/client/app/mobile/views/components/timeline.vue
index 7b5948faf1..4d6abcd167 100644
--- a/src/client/app/mobile/views/components/timeline.vue
+++ b/src/client/app/mobile/views/components/timeline.vue
@@ -1,11 +1,11 @@
 <template>
 <div class="mk-timeline">
 	<mk-friends-maker v-if="alone"/>
-	<mk-posts :posts="posts">
+	<mk-notes :notes="notes">
 		<div class="init" v-if="fetching">
 			%fa:spinner .pulse%%i18n:common.loading%
 		</div>
-		<div class="empty" v-if="!fetching && posts.length == 0">
+		<div class="empty" v-if="!fetching && notes.length == 0">
 			%fa:R comments%
 			%i18n:mobile.tags.mk-home-timeline.empty-timeline%
 		</div>
@@ -13,7 +13,7 @@
 			<span v-if="!moreFetching">%i18n:mobile.tags.mk-timeline.load-more%</span>
 			<span v-if="moreFetching">%i18n:common.loading%<mk-ellipsis/></span>
 		</button>
-	</mk-posts>
+	</mk-notes>
 </div>
 </template>
 
@@ -33,7 +33,7 @@ export default Vue.extend({
 		return {
 			fetching: true,
 			moreFetching: false,
-			posts: [],
+			notes: [],
 			existMore: false,
 			connection: null,
 			connectionId: null
@@ -48,14 +48,14 @@ export default Vue.extend({
 		this.connection = (this as any).os.stream.getConnection();
 		this.connectionId = (this as any).os.stream.use();
 
-		this.connection.on('post', this.onPost);
+		this.connection.on('note', this.onNote);
 		this.connection.on('follow', this.onChangeFollowing);
 		this.connection.on('unfollow', this.onChangeFollowing);
 
 		this.fetch();
 	},
 	beforeDestroy() {
-		this.connection.off('post', this.onPost);
+		this.connection.off('note', this.onNote);
 		this.connection.off('follow', this.onChangeFollowing);
 		this.connection.off('unfollow', this.onChangeFollowing);
 		(this as any).os.stream.dispose(this.connectionId);
@@ -63,15 +63,15 @@ export default Vue.extend({
 	methods: {
 		fetch(cb?) {
 			this.fetching = true;
-			(this as any).api('posts/timeline', {
+			(this as any).api('notes/timeline', {
 				limit: limit + 1,
 				untilDate: this.date ? (this.date as any).getTime() : undefined
-			}).then(posts => {
-				if (posts.length == limit + 1) {
-					posts.pop();
+			}).then(notes => {
+				if (notes.length == limit + 1) {
+					notes.pop();
 					this.existMore = true;
 				}
-				this.posts = posts;
+				this.notes = notes;
 				this.fetching = false;
 				this.$emit('loaded');
 				if (cb) cb();
@@ -79,22 +79,22 @@ export default Vue.extend({
 		},
 		more() {
 			this.moreFetching = true;
-			(this as any).api('posts/timeline', {
+			(this as any).api('notes/timeline', {
 				limit: limit + 1,
-				untilId: this.posts[this.posts.length - 1].id
-			}).then(posts => {
-				if (posts.length == limit + 1) {
-					posts.pop();
+				untilId: this.notes[this.notes.length - 1].id
+			}).then(notes => {
+				if (notes.length == limit + 1) {
+					notes.pop();
 					this.existMore = true;
 				} else {
 					this.existMore = false;
 				}
-				this.posts = this.posts.concat(posts);
+				this.notes = this.notes.concat(notes);
 				this.moreFetching = false;
 			});
 		},
-		onPost(post) {
-			this.posts.unshift(post);
+		onNote(note) {
+			this.notes.unshift(note);
 		},
 		onChangeFollowing() {
 			this.fetch();
diff --git a/src/client/app/mobile/views/components/user-timeline.vue b/src/client/app/mobile/views/components/user-timeline.vue
index bd3e3d0c87..7a04441f76 100644
--- a/src/client/app/mobile/views/components/user-timeline.vue
+++ b/src/client/app/mobile/views/components/user-timeline.vue
@@ -1,18 +1,18 @@
 <template>
 <div class="mk-user-timeline">
-	<mk-posts :posts="posts">
+	<mk-notes :notes="notes">
 		<div class="init" v-if="fetching">
 			%fa:spinner .pulse%%i18n:common.loading%
 		</div>
-		<div class="empty" v-if="!fetching && posts.length == 0">
+		<div class="empty" v-if="!fetching && notes.length == 0">
 			%fa:R comments%
-			{{ withMedia ? '%i18n:mobile.tags.mk-user-timeline.no-posts-with-media%' : '%i18n:mobile.tags.mk-user-timeline.no-posts%' }}
+			{{ withMedia ? '%i18n:mobile.tags.mk-user-timeline.no-notes-with-media%' : '%i18n:mobile.tags.mk-user-timeline.no-notes%' }}
 		</div>
 		<button v-if="!fetching && existMore" @click="more" :disabled="moreFetching" slot="tail">
 			<span v-if="!moreFetching">%i18n:mobile.tags.mk-user-timeline.load-more%</span>
 			<span v-if="moreFetching">%i18n:common.loading%<mk-ellipsis/></span>
 		</button>
-	</mk-posts>
+	</mk-notes>
 </div>
 </template>
 
@@ -26,22 +26,22 @@ export default Vue.extend({
 	data() {
 		return {
 			fetching: true,
-			posts: [],
+			notes: [],
 			existMore: false,
 			moreFetching: false
 		};
 	},
 	mounted() {
-		(this as any).api('users/posts', {
+		(this as any).api('users/notes', {
 			userId: this.user.id,
 			withMedia: this.withMedia,
 			limit: limit + 1
-		}).then(posts => {
-			if (posts.length == limit + 1) {
-				posts.pop();
+		}).then(notes => {
+			if (notes.length == limit + 1) {
+				notes.pop();
 				this.existMore = true;
 			}
-			this.posts = posts;
+			this.notes = notes;
 			this.fetching = false;
 			this.$emit('loaded');
 		});
@@ -49,19 +49,19 @@ export default Vue.extend({
 	methods: {
 		more() {
 			this.moreFetching = true;
-			(this as any).api('users/posts', {
+			(this as any).api('users/notes', {
 				userId: this.user.id,
 				withMedia: this.withMedia,
 				limit: limit + 1,
-				untilId: this.posts[this.posts.length - 1].id
-			}).then(posts => {
-				if (posts.length == limit + 1) {
-					posts.pop();
+				untilId: this.notes[this.notes.length - 1].id
+			}).then(notes => {
+				if (notes.length == limit + 1) {
+					notes.pop();
 					this.existMore = true;
 				} else {
 					this.existMore = false;
 				}
-				this.posts = this.posts.concat(posts);
+				this.notes = this.notes.concat(notes);
 				this.moreFetching = false;
 			});
 		}
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index 6fb1c6d4fa..ab61166cf3 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -64,7 +64,7 @@ import Vue from 'vue';
 import * as XDraggable from 'vuedraggable';
 import * as uuid from 'uuid';
 import Progress from '../../../common/scripts/loading';
-import getPostSummary from '../../../../../renderers/get-post-summary';
+import getNoteSummary from '../../../../../renderers/get-note-summary';
 
 export default Vue.extend({
 	components: {
@@ -124,14 +124,14 @@ export default Vue.extend({
 		this.connection = (this as any).os.stream.getConnection();
 		this.connectionId = (this as any).os.stream.use();
 
-		this.connection.on('post', this.onStreamPost);
+		this.connection.on('note', this.onStreamNote);
 		this.connection.on('mobile_home_updated', this.onHomeUpdated);
 		document.addEventListener('visibilitychange', this.onVisibilitychange, false);
 
 		Progress.start();
 	},
 	beforeDestroy() {
-		this.connection.off('post', this.onStreamPost);
+		this.connection.off('note', this.onStreamNote);
 		this.connection.off('mobile_home_updated', this.onHomeUpdated);
 		(this as any).os.stream.dispose(this.connectionId);
 		document.removeEventListener('visibilitychange', this.onVisibilitychange);
@@ -143,10 +143,10 @@ export default Vue.extend({
 		onLoaded() {
 			Progress.done();
 		},
-		onStreamPost(post) {
-			if (document.hidden && post.userId !== (this as any).os.i.id) {
+		onStreamNote(note) {
+			if (document.hidden && note.userId !== (this as any).os.i.id) {
 				this.unreadCount++;
-				document.title = `(${this.unreadCount}) ${getPostSummary(post)}`;
+				document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
 			}
 		},
 		onVisibilitychange() {
diff --git a/src/client/app/mobile/views/pages/note.vue b/src/client/app/mobile/views/pages/note.vue
new file mode 100644
index 0000000000..89b8c776f2
--- /dev/null
+++ b/src/client/app/mobile/views/pages/note.vue
@@ -0,0 +1,85 @@
+<template>
+<mk-ui>
+	<span slot="header">%fa:R sticky-note%%i18n:mobile.tags.mk-note-page.title%</span>
+	<main v-if="!fetching">
+		<a v-if="note.next" :href="note.next">%fa:angle-up%%i18n:mobile.tags.mk-note-page.next%</a>
+		<div>
+			<mk-note-detail :note="note"/>
+		</div>
+		<a v-if="note.prev" :href="note.prev">%fa:angle-down%%i18n:mobile.tags.mk-note-page.prev%</a>
+	</main>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			note: null
+		};
+	},
+	watch: {
+		$route: 'fetch'
+	},
+	created() {
+		this.fetch();
+	},
+	mounted() {
+		document.title = 'Misskey';
+		document.documentElement.style.background = '#313a42';
+	},
+	methods: {
+		fetch() {
+			Progress.start();
+			this.fetching = true;
+
+			(this as any).api('notes/show', {
+				noteId: this.$route.params.note
+			}).then(note => {
+				this.note = note;
+				this.fetching = false;
+
+				Progress.done();
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+main
+	text-align center
+
+	> div
+		margin 8px auto
+		padding 0
+		max-width 500px
+		width calc(100% - 16px)
+
+		@media (min-width 500px)
+			margin 16px auto
+			width calc(100% - 32px)
+
+	> a
+		display inline-block
+
+		&:first-child
+			margin-top 8px
+
+			@media (min-width 500px)
+				margin-top 16px
+
+		&:last-child
+			margin-bottom 8px
+
+			@media (min-width 500px)
+				margin-bottom 16px
+
+		> [data-fa]
+			margin-right 4px
+
+</style>
diff --git a/src/client/app/mobile/views/pages/post.vue b/src/client/app/mobile/views/pages/post.vue
deleted file mode 100644
index 49a4bfd9dc..0000000000
--- a/src/client/app/mobile/views/pages/post.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-<mk-ui>
-	<span slot="header">%fa:R sticky-note%%i18n:mobile.tags.mk-post-page.title%</span>
-	<main v-if="!fetching">
-		<a v-if="post.next" :href="post.next">%fa:angle-up%%i18n:mobile.tags.mk-post-page.next%</a>
-		<div>
-			<mk-post-detail :post="post"/>
-		</div>
-		<a v-if="post.prev" :href="post.prev">%fa:angle-down%%i18n:mobile.tags.mk-post-page.prev%</a>
-	</main>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import Progress from '../../../common/scripts/loading';
-
-export default Vue.extend({
-	data() {
-		return {
-			fetching: true,
-			post: null
-		};
-	},
-	watch: {
-		$route: 'fetch'
-	},
-	created() {
-		this.fetch();
-	},
-	mounted() {
-		document.title = 'Misskey';
-		document.documentElement.style.background = '#313a42';
-	},
-	methods: {
-		fetch() {
-			Progress.start();
-			this.fetching = true;
-
-			(this as any).api('posts/show', {
-				postId: this.$route.params.post
-			}).then(post => {
-				this.post = post;
-				this.fetching = false;
-
-				Progress.done();
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-main
-	text-align center
-
-	> div
-		margin 8px auto
-		padding 0
-		max-width 500px
-		width calc(100% - 16px)
-
-		@media (min-width 500px)
-			margin 16px auto
-			width calc(100% - 32px)
-
-	> a
-		display inline-block
-
-		&:first-child
-			margin-top 8px
-
-			@media (min-width 500px)
-				margin-top 16px
-
-		&:last-child
-			margin-bottom 8px
-
-			@media (min-width 500px)
-				margin-bottom 16px
-
-		> [data-fa]
-			margin-right 4px
-
-</style>
diff --git a/src/client/app/mobile/views/pages/search.vue b/src/client/app/mobile/views/pages/search.vue
index cbab504e3c..a96832beec 100644
--- a/src/client/app/mobile/views/pages/search.vue
+++ b/src/client/app/mobile/views/pages/search.vue
@@ -2,13 +2,13 @@
 <mk-ui>
 	<span slot="header">%fa:search% {{ q }}</span>
 	<main v-if="!fetching">
-		<mk-posts :class="$style.posts" :posts="posts">
-			<span v-if="posts.length == 0">{{ '%i18n:mobile.tags.mk-search-posts.empty%'.replace('{}', q) }}</span>
+		<mk-notes :class="$style.notes" :notes="notes">
+			<span v-if="notes.length == 0">{{ '%i18n:mobile.tags.mk-search-notes.empty%'.replace('{}', q) }}</span>
 			<button v-if="existMore" @click="more" :disabled="fetching" slot="tail">
 				<span v-if="!fetching">%i18n:mobile.tags.mk-timeline.load-more%</span>
 				<span v-if="fetching">%i18n:common.loading%<mk-ellipsis/></span>
 			</button>
-		</mk-posts>
+		</mk-notes>
 	</main>
 </mk-ui>
 </template>
@@ -25,7 +25,7 @@ export default Vue.extend({
 		return {
 			fetching: true,
 			existMore: false,
-			posts: [],
+			notes: [],
 			offset: 0
 		};
 	},
@@ -48,30 +48,30 @@ export default Vue.extend({
 			this.fetching = true;
 			Progress.start();
 
-			(this as any).api('posts/search', Object.assign({
+			(this as any).api('notes/search', Object.assign({
 				limit: limit + 1
-			}, parse(this.q))).then(posts => {
-				if (posts.length == limit + 1) {
-					posts.pop();
+			}, parse(this.q))).then(notes => {
+				if (notes.length == limit + 1) {
+					notes.pop();
 					this.existMore = true;
 				}
-				this.posts = posts;
+				this.notes = notes;
 				this.fetching = false;
 				Progress.done();
 			});
 		},
 		more() {
 			this.offset += limit;
-			(this as any).api('posts/search', Object.assign({
+			(this as any).api('notes/search', Object.assign({
 				limit: limit + 1,
 				offset: this.offset
-			}, parse(this.q))).then(posts => {
-				if (posts.length == limit + 1) {
-					posts.pop();
+			}, parse(this.q))).then(notes => {
+				if (notes.length == limit + 1) {
+					notes.pop();
 				} else {
 					this.existMore = false;
 				}
-				this.posts = this.posts.concat(posts);
+				this.notes = this.notes.concat(notes);
 			});
 		}
 	}
@@ -79,7 +79,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" module>
-.posts
+.notes
 	margin 8px auto
 	max-width 500px
 	width calc(100% - 16px)
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index 3b7b4d6c28..08fa4e2774 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -27,8 +27,8 @@
 				</div>
 				<div class="status">
 					<a>
-						<b>{{ user.postsCount | number }}</b>
-						<i>%i18n:mobile.tags.mk-user.posts%</i>
+						<b>{{ user.notesCount | number }}</b>
+						<i>%i18n:mobile.tags.mk-user.notes%</i>
 					</a>
 					<a :href="`@${acct}/following`">
 						<b>{{ user.followingCount | number }}</b>
@@ -44,13 +44,13 @@
 		<nav>
 			<div class="nav-container">
 				<a :data-is-active=" page == 'home' " @click="page = 'home'">%i18n:mobile.tags.mk-user.overview%</a>
-				<a :data-is-active=" page == 'posts' " @click="page = 'posts'">%i18n:mobile.tags.mk-user.timeline%</a>
+				<a :data-is-active=" page == 'notes' " @click="page = 'notes'">%i18n:mobile.tags.mk-user.timeline%</a>
 				<a :data-is-active=" page == 'media' " @click="page = 'media'">%i18n:mobile.tags.mk-user.media%</a>
 			</div>
 		</nav>
 		<div class="body">
 			<x-home v-if="page == 'home'" :user="user"/>
-			<mk-user-timeline v-if="page == 'posts'" :user="user"/>
+			<mk-user-timeline v-if="page == 'notes'" :user="user"/>
 			<mk-user-timeline v-if="page == 'media'" :user="user" with-media/>
 		</div>
 	</main>
diff --git a/src/client/app/mobile/views/pages/user/home.notes.vue b/src/client/app/mobile/views/pages/user/home.notes.vue
new file mode 100644
index 0000000000..02afed9b88
--- /dev/null
+++ b/src/client/app/mobile/views/pages/user/home.notes.vue
@@ -0,0 +1,57 @@
+<template>
+<div class="root notes">
+	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-notes.loading%<mk-ellipsis/></p>
+	<div v-if="!fetching && notes.length > 0">
+		<mk-note-card v-for="note in notes" :key="note.id" :note="note"/>
+	</div>
+	<p class="empty" v-if="!fetching && notes.length == 0">%i18n:mobile.tags.mk-user-overview-notes.no-notes%</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['user'],
+	data() {
+		return {
+			fetching: true,
+			notes: []
+		};
+	},
+	mounted() {
+		(this as any).api('users/notes', {
+			userId: this.user.id
+		}).then(notes => {
+			this.notes = notes;
+			this.fetching = false;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.root.notes
+
+	> div
+		overflow-x scroll
+		-webkit-overflow-scrolling touch
+		white-space nowrap
+		padding 8px
+
+		> *
+			vertical-align top
+
+			&:not(:last-child)
+				margin-right 8px
+
+	> .fetching
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+		> i
+			margin-right 4px
+
+</style>
diff --git a/src/client/app/mobile/views/pages/user/home.photos.vue b/src/client/app/mobile/views/pages/user/home.photos.vue
index ecf5082072..1c59260812 100644
--- a/src/client/app/mobile/views/pages/user/home.photos.vue
+++ b/src/client/app/mobile/views/pages/user/home.photos.vue
@@ -5,7 +5,7 @@
 		<a v-for="image in images"
 			class="img"
 			:style="`background-image: url(${image.media.url}?thumbnail&size=256)`"
-			:href="`/@${getAcct(image.post.user)}/${image.post.id}`"
+			:href="`/@${getAcct(image.note.user)}/${image.note.id}`"
 		></a>
 	</div>
 	<p class="empty" v-if="!fetching && images.length == 0">%i18n:mobile.tags.mk-user-overview-photos.no-photos%</p>
@@ -28,15 +28,15 @@ export default Vue.extend({
 		getAcct
 	},
 	mounted() {
-		(this as any).api('users/posts', {
+		(this as any).api('users/notes', {
 			userId: this.user.id,
 			withMedia: true,
 			limit: 6
-		}).then(posts => {
-			posts.forEach(post => {
-				post.media.forEach(media => {
+		}).then(notes => {
+			notes.forEach(note => {
+				note.media.forEach(media => {
 					if (this.images.length < 9) this.images.push({
-						post,
+						note,
 						media
 					});
 				});
diff --git a/src/client/app/mobile/views/pages/user/home.posts.vue b/src/client/app/mobile/views/pages/user/home.posts.vue
deleted file mode 100644
index 654f7f63e0..0000000000
--- a/src/client/app/mobile/views/pages/user/home.posts.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-<div class="root posts">
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-posts.loading%<mk-ellipsis/></p>
-	<div v-if="!fetching && posts.length > 0">
-		<mk-post-card v-for="post in posts" :key="post.id" :post="post"/>
-	</div>
-	<p class="empty" v-if="!fetching && posts.length == 0">%i18n:mobile.tags.mk-user-overview-posts.no-posts%</p>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	props: ['user'],
-	data() {
-		return {
-			fetching: true,
-			posts: []
-		};
-	},
-	mounted() {
-		(this as any).api('users/posts', {
-			userId: this.user.id
-		}).then(posts => {
-			this.posts = posts;
-			this.fetching = false;
-		});
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.root.posts
-
-	> div
-		overflow-x scroll
-		-webkit-overflow-scrolling touch
-		white-space nowrap
-		padding 8px
-
-		> *
-			vertical-align top
-
-			&:not(:last-child)
-				margin-right 8px
-
-	> .fetching
-	> .empty
-		margin 0
-		padding 16px
-		text-align center
-		color #aaa
-
-		> i
-			margin-right 4px
-
-</style>
diff --git a/src/client/app/mobile/views/pages/user/home.vue b/src/client/app/mobile/views/pages/user/home.vue
index 1afcd1f5ba..2554084969 100644
--- a/src/client/app/mobile/views/pages/user/home.vue
+++ b/src/client/app/mobile/views/pages/user/home.vue
@@ -1,10 +1,10 @@
 <template>
 <div class="root home">
-	<mk-post-detail v-if="user.pinnedPost" :post="user.pinnedPost" :compact="true"/>
-	<section class="recent-posts">
-		<h2>%fa:R comments%%i18n:mobile.tags.mk-user-overview.recent-posts%</h2>
+	<mk-note-detail v-if="user.pinnedNote" :note="user.pinnedNote" :compact="true"/>
+	<section class="recent-notes">
+		<h2>%fa:R comments%%i18n:mobile.tags.mk-user-overview.recent-notes%</h2>
 		<div>
-			<x-posts :user="user"/>
+			<x-notes :user="user"/>
 		</div>
 	</section>
 	<section class="images">
@@ -37,14 +37,14 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import XPosts from './home.posts.vue';
+import XNotes from './home.notes.vue';
 import XPhotos from './home.photos.vue';
 import XFriends from './home.friends.vue';
 import XFollowersYouKnow from './home.followers-you-know.vue';
 
 export default Vue.extend({
 	components: {
-		XPosts,
+		XNotes,
 		XPhotos,
 		XFriends,
 		XFollowersYouKnow
@@ -58,7 +58,7 @@ export default Vue.extend({
 	max-width 600px
 	margin 0 auto
 
-	> .mk-post-detail
+	> .mk-note-detail
 		margin 0 0 8px 0
 
 	> section
diff --git a/src/client/app/stats/tags/index.tag b/src/client/app/stats/tags/index.tag
index 63fdd24044..f8944c0832 100644
--- a/src/client/app/stats/tags/index.tag
+++ b/src/client/app/stats/tags/index.tag
@@ -2,7 +2,7 @@
 	<h1>Misskey<i>Statistics</i></h1>
 	<main v-if="!initializing">
 		<mk-users stats={ stats }/>
-		<mk-posts stats={ stats }/>
+		<mk-notes stats={ stats }/>
 	</main>
 	<footer><a href={ _URL_ }>{ _HOST_ }</a></footer>
 	<style lang="stylus" scoped>
@@ -56,9 +56,9 @@
 	</script>
 </mk-index>
 
-<mk-posts>
-	<h2>%i18n:stats.posts-count% <b>{ stats.postsCount }</b></h2>
-	<mk-posts-chart v-if="!initializing" data={ data }/>
+<mk-notes>
+	<h2>%i18n:stats.notes-count% <b>{ stats.notesCount }</b></h2>
+	<mk-notes-chart v-if="!initializing" data={ data }/>
 	<style lang="stylus" scoped>
 		:scope
 			display block
@@ -70,7 +70,7 @@
 		this.stats = this.opts.stats;
 
 		this.on('mount', () => {
-			this.$root.$data.os.api('aggregation/posts', {
+			this.$root.$data.os.api('aggregation/notes', {
 				limit: 365
 			}).then(data => {
 				this.update({
@@ -80,7 +80,7 @@
 			});
 		});
 	</script>
-</mk-posts>
+</mk-notes>
 
 <mk-users>
 	<h2>%i18n:stats.users-count% <b>{ stats.usersCount }</b></h2>
@@ -108,11 +108,11 @@
 	</script>
 </mk-users>
 
-<mk-posts-chart>
+<mk-notes-chart>
 	<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
-		<title>Black ... Total<br/>Blue ... Posts<br/>Red ... Replies<br/>Green ... Reposts</title>
+		<title>Black ... Total<br/>Blue ... Notes<br/>Red ... Replies<br/>Green ... Renotes</title>
 		<polyline
-			riot-points={ pointsPost }
+			riot-points={ pointsNote }
 			fill="none"
 			stroke-width="1"
 			stroke="#41ddde"/>
@@ -122,7 +122,7 @@
 			stroke-width="1"
 			stroke="#f7796c"/>
 		<polyline
-			riot-points={ pointsRepost }
+			riot-points={ pointsRenote }
 			fill="none"
 			stroke-width="1"
 			stroke="#a1de41"/>
@@ -147,7 +147,7 @@
 		this.viewBoxY = 80;
 
 		this.data = this.opts.data.reverse();
-		this.data.forEach(d => d.total = d.posts + d.replies + d.reposts);
+		this.data.forEach(d => d.total = d.notes + d.replies + d.renotes);
 		const peak = Math.max.apply(null, this.data.map(d => d.total));
 
 		this.on('mount', () => {
@@ -156,14 +156,14 @@
 
 		this.render = () => {
 			this.update({
-				pointsPost: this.data.map((d, i) => `${i},${(1 - (d.posts / peak)) * this.viewBoxY}`).join(' '),
+				pointsNote: this.data.map((d, i) => `${i},${(1 - (d.notes / peak)) * this.viewBoxY}`).join(' '),
 				pointsReply: this.data.map((d, i) => `${i},${(1 - (d.replies / peak)) * this.viewBoxY}`).join(' '),
-				pointsRepost: this.data.map((d, i) => `${i},${(1 - (d.reposts / peak)) * this.viewBoxY}`).join(' '),
+				pointsRenote: this.data.map((d, i) => `${i},${(1 - (d.renotes / peak)) * this.viewBoxY}`).join(' '),
 				pointsTotal: this.data.map((d, i) => `${i},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' ')
 			});
 		};
 	</script>
-</mk-posts-chart>
+</mk-notes-chart>
 
 <mk-users-chart>
 	<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
diff --git a/src/client/docs/api/endpoints/notes/create.yaml b/src/client/docs/api/endpoints/notes/create.yaml
new file mode 100644
index 0000000000..04ada2ecd5
--- /dev/null
+++ b/src/client/docs/api/endpoints/notes/create.yaml
@@ -0,0 +1,59 @@
+endpoint: "notes/create"
+
+desc:
+  ja: "投稿します。"
+  en: "Compose new note."
+
+params:
+  - name: "text"
+    type: "string"
+    optional: true
+    desc:
+      ja: "投稿の本文"
+      en: "The text of your note"
+  - name: "cw"
+    type: "string"
+    optional: true
+    desc:
+      ja: "コンテンツの警告。このパラメータを指定すると設定したテキストで投稿のコンテンツを隠す事が出来ます。"
+      en: "Content Warning"
+  - name: "mediaIds"
+    type: "id(DriveFile)[]"
+    optional: true
+    desc:
+      ja: "添付するメディア(1~4つ)"
+      en: "Media you want to attach (1~4)"
+  - name: "replyId"
+    type: "id(Note)"
+    optional: true
+    desc:
+      ja: "返信する投稿"
+      en: "The note you want to reply"
+  - name: "renoteId"
+    type: "id(Note)"
+    optional: true
+    desc:
+      ja: "引用する投稿"
+      en: "The note you want to quote"
+  - name: "poll"
+    type: "object"
+    optional: true
+    desc:
+      ja: "投票"
+      en: "The poll"
+    defName: "poll"
+    def:
+      - name: "choices"
+        type: "string[]"
+        optional: false
+        desc:
+          ja: "投票の選択肢"
+          en: "Choices of a poll"
+
+res:
+  - name: "createdNote"
+    type: "entity(Note)"
+    optional: false
+    desc:
+      ja: "作成した投稿"
+      en: "A note that created"
diff --git a/src/client/docs/api/endpoints/notes/timeline.yaml b/src/client/docs/api/endpoints/notes/timeline.yaml
new file mode 100644
index 0000000000..71c346f355
--- /dev/null
+++ b/src/client/docs/api/endpoints/notes/timeline.yaml
@@ -0,0 +1,32 @@
+endpoint: "notes/timeline"
+
+desc:
+  ja: "タイムラインを取得します。"
+  en: "Get your timeline."
+
+params:
+  - name: "limit"
+    type: "number"
+    optional: true
+    desc:
+      ja: "取得する最大の数"
+  - name: "sinceId"
+    type: "id(Note)"
+    optional: true
+    desc:
+      ja: "指定すると、この投稿を基点としてより新しい投稿を取得します"
+  - name: "untilId"
+    type: "id(Note)"
+    optional: true
+    desc:
+      ja: "指定すると、この投稿を基点としてより古い投稿を取得します"
+  - name: "sinceDate"
+    type: "number"
+    optional: true
+    desc:
+      ja: "指定した時間を基点としてより新しい投稿を取得します。数値は、1970 年 1 月 1 日 00:00:00 UTC から指定した日時までの経過時間をミリ秒単位で表します。"
+  - name: "untilDate"
+    type: "number"
+    optional: true
+    desc:
+      ja: "指定した時間を基点としてより古い投稿を取得します。数値は、1970 年 1 月 1 日 00:00:00 UTC から指定した日時までの経過時間をミリ秒単位で表します。"
diff --git a/src/client/docs/api/endpoints/posts/create.yaml b/src/client/docs/api/endpoints/posts/create.yaml
deleted file mode 100644
index d2d6e27fc7..0000000000
--- a/src/client/docs/api/endpoints/posts/create.yaml
+++ /dev/null
@@ -1,59 +0,0 @@
-endpoint: "posts/create"
-
-desc:
-  ja: "投稿します。"
-  en: "Compose new post."
-
-params:
-  - name: "text"
-    type: "string"
-    optional: true
-    desc:
-      ja: "投稿の本文"
-      en: "The text of your post"
-  - name: "cw"
-    type: "string"
-    optional: true
-    desc:
-      ja: "コンテンツの警告。このパラメータを指定すると設定したテキストで投稿のコンテンツを隠す事が出来ます。"
-      en: "Content Warning"
-  - name: "mediaIds"
-    type: "id(DriveFile)[]"
-    optional: true
-    desc:
-      ja: "添付するメディア(1~4つ)"
-      en: "Media you want to attach (1~4)"
-  - name: "replyId"
-    type: "id(Post)"
-    optional: true
-    desc:
-      ja: "返信する投稿"
-      en: "The post you want to reply"
-  - name: "repostId"
-    type: "id(Post)"
-    optional: true
-    desc:
-      ja: "引用する投稿"
-      en: "The post you want to quote"
-  - name: "poll"
-    type: "object"
-    optional: true
-    desc:
-      ja: "投票"
-      en: "The poll"
-    defName: "poll"
-    def:
-      - name: "choices"
-        type: "string[]"
-        optional: false
-        desc:
-          ja: "投票の選択肢"
-          en: "Choices of a poll"
-
-res:
-  - name: "createdPost"
-    type: "entity(Post)"
-    optional: false
-    desc:
-      ja: "作成した投稿"
-      en: "A post that created"
diff --git a/src/client/docs/api/endpoints/posts/timeline.yaml b/src/client/docs/api/endpoints/posts/timeline.yaml
deleted file mode 100644
index 9c44dd736a..0000000000
--- a/src/client/docs/api/endpoints/posts/timeline.yaml
+++ /dev/null
@@ -1,32 +0,0 @@
-endpoint: "posts/timeline"
-
-desc:
-  ja: "タイムラインを取得します。"
-  en: "Get your timeline."
-
-params:
-  - name: "limit"
-    type: "number"
-    optional: true
-    desc:
-      ja: "取得する最大の数"
-  - name: "sinceId"
-    type: "id(Post)"
-    optional: true
-    desc:
-      ja: "指定すると、この投稿を基点としてより新しい投稿を取得します"
-  - name: "untilId"
-    type: "id(Post)"
-    optional: true
-    desc:
-      ja: "指定すると、この投稿を基点としてより古い投稿を取得します"
-  - name: "sinceDate"
-    type: "number"
-    optional: true
-    desc:
-      ja: "指定した時間を基点としてより新しい投稿を取得します。数値は、1970 年 1 月 1 日 00:00:00 UTC から指定した日時までの経過時間をミリ秒単位で表します。"
-  - name: "untilDate"
-    type: "number"
-    optional: true
-    desc:
-      ja: "指定した時間を基点としてより古い投稿を取得します。数値は、1970 年 1 月 1 日 00:00:00 UTC から指定した日時までの経過時間をミリ秒単位で表します。"
diff --git a/src/client/docs/api/entities/note.yaml b/src/client/docs/api/entities/note.yaml
new file mode 100644
index 0000000000..718d331d13
--- /dev/null
+++ b/src/client/docs/api/entities/note.yaml
@@ -0,0 +1,174 @@
+name: "Note"
+
+desc:
+  ja: "投稿。"
+  en: "A note."
+
+props:
+  - name: "id"
+    type: "id"
+    optional: false
+    desc:
+      ja: "投稿ID"
+      en: "The ID of this note"
+  - name: "createdAt"
+    type: "date"
+    optional: false
+    desc:
+      ja: "投稿日時"
+      en: "The posted date of this note"
+  - name: "viaMobile"
+    type: "boolean"
+    optional: true
+    desc:
+      ja: "モバイル端末から投稿したか否か(自己申告であることに留意)"
+      en: "Whether this note sent via a mobile device"
+  - name: "text"
+    type: "string"
+    optional: true
+    desc:
+      ja: "投稿の本文 (ローカルの場合Markdown風のフォーマット)"
+      en: "The text of this note (in Markdown like format if local)"
+  - name: "textHtml"
+    type: "string"
+    optional: true
+    desc:
+      ja: "投稿の本文 (HTML) (投稿時は無視)"
+      en: "The text of this note (in HTML. Ignored when posting.)"
+  - name: "mediaIds"
+    type: "id(DriveFile)[]"
+    optional: true
+    desc:
+      ja: "添付されているメディアのID (なければレスポンスでは空配列)"
+      en: "The IDs of the attached media (empty array for response if no media is attached)"
+  - name: "media"
+    type: "entity(DriveFile)[]"
+    optional: true
+    desc:
+      ja: "添付されているメディア"
+      en: "The attached media"
+  - name: "userId"
+    type: "id(User)"
+    optional: false
+    desc:
+      ja: "投稿者ID"
+      en: "The ID of author of this note"
+  - name: "user"
+    type: "entity(User)"
+    optional: true
+    desc:
+      ja: "投稿者"
+      en: "The author of this note"
+  - name: "myReaction"
+    type: "string"
+    optional: true
+    desc:
+      ja: "この投稿に対する自分の<a href='/docs/api/reactions'>リアクション</a>"
+      en: "The your <a href='/docs/api/reactions'>reaction</a> of this note"
+  - name: "reactionCounts"
+    type: "object"
+    optional: false
+    desc:
+      ja: "<a href='/docs/api/reactions'>リアクション</a>をキーとし、この投稿に対するそのリアクションの数を値としたオブジェクト"
+  - name: "replyId"
+    type: "id(Note)"
+    optional: true
+    desc:
+      ja: "返信した投稿のID"
+      en: "The ID of the replyed note"
+  - name: "reply"
+    type: "entity(Note)"
+    optional: true
+    desc:
+      ja: "返信した投稿"
+      en: "The replyed note"
+  - name: "renoteId"
+    type: "id(Note)"
+    optional: true
+    desc:
+      ja: "引用した投稿のID"
+      en: "The ID of the quoted note"
+  - name: "renote"
+    type: "entity(Note)"
+    optional: true
+    desc:
+      ja: "引用した投稿"
+      en: "The quoted note"
+  - name: "poll"
+    type: "object"
+    optional: true
+    desc:
+      ja: "投票"
+      en: "The poll"
+    defName: "poll"
+    def:
+      - name: "choices"
+        type: "object[]"
+        optional: false
+        desc:
+          ja: "投票の選択肢"
+          en: "The choices of this poll"
+        defName: "choice"
+        def:
+          - name: "id"
+            type: "number"
+            optional: false
+            desc:
+              ja: "選択肢ID"
+              en: "The ID of this choice"
+          - name: "isVoted"
+            type: "boolean"
+            optional: true
+            desc:
+              ja: "自分がこの選択肢に投票したかどうか"
+              en: "Whether you voted to this choice"
+          - name: "text"
+            type: "string"
+            optional: false
+            desc:
+              ja: "選択肢本文"
+              en: "The text of this choice"
+          - name: "votes"
+            type: "number"
+            optional: false
+            desc:
+              ja: "この選択肢に投票された数"
+              en: "The number voted for this choice"
+  - name: "geo"
+    type: "object"
+    optional: true
+    desc:
+      ja: "位置情報"
+      en: "Geo location"
+    defName: "geo"
+    def:
+      - name: "coordinates"
+        type: "number[]"
+        optional: false
+        desc:
+          ja: "座標。最初に経度：-180〜180で表す。最後に緯度：-90〜90で表す。"
+      - name: "altitude"
+        type: "number"
+        optional: false
+        desc:
+          ja: "高度。メートル単位で表す。"
+      - name: "accuracy"
+        type: "number"
+        optional: false
+        desc:
+          ja: "緯度、経度の精度。メートル単位で表す。"
+      - name: "altitudeAccuracy"
+        type: "number"
+        optional: false
+        desc:
+          ja: "高度の精度。メートル単位で表す。"
+      - name: "heading"
+        type: "number"
+        optional: false
+        desc:
+          ja: "方角。0〜360の角度で表す。0が北、90が東、180が南、270が西。"
+      - name: "speed"
+        type: "number"
+        optional: false
+        desc:
+          ja: "速度。メートル / 秒数で表す。"
diff --git a/src/client/docs/api/entities/post.yaml b/src/client/docs/api/entities/post.yaml
index 7077700129..718d331d13 100644
--- a/src/client/docs/api/entities/post.yaml
+++ b/src/client/docs/api/entities/post.yaml
@@ -1,8 +1,8 @@
-name: "Post"
+name: "Note"
 
 desc:
   ja: "投稿。"
-  en: "A post."
+  en: "A note."
 
 props:
   - name: "id"
@@ -10,31 +10,31 @@ props:
     optional: false
     desc:
       ja: "投稿ID"
-      en: "The ID of this post"
+      en: "The ID of this note"
   - name: "createdAt"
     type: "date"
     optional: false
     desc:
       ja: "投稿日時"
-      en: "The posted date of this post"
+      en: "The posted date of this note"
   - name: "viaMobile"
     type: "boolean"
     optional: true
     desc:
       ja: "モバイル端末から投稿したか否か(自己申告であることに留意)"
-      en: "Whether this post sent via a mobile device"
+      en: "Whether this note sent via a mobile device"
   - name: "text"
     type: "string"
     optional: true
     desc:
       ja: "投稿の本文 (ローカルの場合Markdown風のフォーマット)"
-      en: "The text of this post (in Markdown like format if local)"
+      en: "The text of this note (in Markdown like format if local)"
   - name: "textHtml"
     type: "string"
     optional: true
     desc:
       ja: "投稿の本文 (HTML) (投稿時は無視)"
-      en: "The text of this post (in HTML. Ignored when posting.)"
+      en: "The text of this note (in HTML. Ignored when posting.)"
   - name: "mediaIds"
     type: "id(DriveFile)[]"
     optional: true
@@ -52,48 +52,48 @@ props:
     optional: false
     desc:
       ja: "投稿者ID"
-      en: "The ID of author of this post"
+      en: "The ID of author of this note"
   - name: "user"
     type: "entity(User)"
     optional: true
     desc:
       ja: "投稿者"
-      en: "The author of this post"
+      en: "The author of this note"
   - name: "myReaction"
     type: "string"
     optional: true
     desc:
       ja: "この投稿に対する自分の<a href='/docs/api/reactions'>リアクション</a>"
-      en: "The your <a href='/docs/api/reactions'>reaction</a> of this post"
+      en: "The your <a href='/docs/api/reactions'>reaction</a> of this note"
   - name: "reactionCounts"
     type: "object"
     optional: false
     desc:
       ja: "<a href='/docs/api/reactions'>リアクション</a>をキーとし、この投稿に対するそのリアクションの数を値としたオブジェクト"
   - name: "replyId"
-    type: "id(Post)"
+    type: "id(Note)"
     optional: true
     desc:
       ja: "返信した投稿のID"
-      en: "The ID of the replyed post"
+      en: "The ID of the replyed note"
   - name: "reply"
-    type: "entity(Post)"
+    type: "entity(Note)"
     optional: true
     desc:
       ja: "返信した投稿"
-      en: "The replyed post"
-  - name: "repostId"
-    type: "id(Post)"
+      en: "The replyed note"
+  - name: "renoteId"
+    type: "id(Note)"
     optional: true
     desc:
       ja: "引用した投稿のID"
-      en: "The ID of the quoted post"
-  - name: "repost"
-    type: "entity(Post)"
+      en: "The ID of the quoted note"
+  - name: "renote"
+    type: "entity(Note)"
     optional: true
     desc:
       ja: "引用した投稿"
-      en: "The quoted post"
+      en: "The quoted note"
   - name: "poll"
     type: "object"
     optional: true
diff --git a/src/client/docs/api/entities/user.yaml b/src/client/docs/api/entities/user.yaml
index a1fae1482b..cccf42f221 100644
--- a/src/client/docs/api/entities/user.yaml
+++ b/src/client/docs/api/entities/user.yaml
@@ -81,24 +81,24 @@ props:
     desc:
       ja: "自分がこのユーザーをミュートしているか"
       en: "Whether you muted this user"
-  - name: "postsCount"
+  - name: "notesCount"
     type: "number"
     optional: false
     desc:
       ja: "投稿の数"
-      en: "The number of the posts of this user"
-  - name: "pinnedPost"
-    type: "entity(Post)"
+      en: "The number of the notes of this user"
+  - name: "pinnedNote"
+    type: "entity(Note)"
     optional: true
     desc:
       ja: "ピン留めされた投稿"
-      en: "The pinned post of this user"
-  - name: "pinnedPostId"
-    type: "id(Post)"
+      en: "The pinned note of this user"
+  - name: "pinnedNoteId"
+    type: "id(Note)"
     optional: true
     desc:
       ja: "ピン留めされた投稿のID"
-      en: "The ID of the pinned post of this user"
+      en: "The ID of the pinned note of this user"
   - name: "driveCapacity"
     type: "number"
     optional: false
diff --git a/src/client/docs/mute.ja.pug b/src/client/docs/mute.ja.pug
index 5e79af5f8c..807f7b67a7 100644
--- a/src/client/docs/mute.ja.pug
+++ b/src/client/docs/mute.ja.pug
@@ -4,7 +4,7 @@ p ユーザーページから、そのユーザーをミュートすることが
 
 p ユーザーをミュートすると、そのユーザーに関する次のコンテンツがMisskeyに表示されなくなります:
 ul
-	li タイムラインや投稿の検索結果内の、そのユーザーの投稿(およびそれらの投稿に対する返信やRepost)
+	li タイムラインや投稿の検索結果内の、そのユーザーの投稿(およびそれらの投稿に対する返信やRenote)
 	li そのユーザーからの通知
 	li メッセージ履歴一覧内の、そのユーザーとのメッセージ履歴
 
diff --git a/src/client/docs/search.ja.pug b/src/client/docs/search.ja.pug
index e14e8c867e..fc62d16cae 100644
--- a/src/client/docs/search.ja.pug
+++ b/src/client/docs/search.ja.pug
@@ -64,19 +64,19 @@ section
 			tr
 				td mute
 				td
-					| mute_all ... ミュートしているユーザーの投稿とその投稿に対する返信やRepostを除外する(デフォルト)
+					| mute_all ... ミュートしているユーザーの投稿とその投稿に対する返信やRenoteを除外する(デフォルト)
 					br
-					| mute_related ... ミュートしているユーザーの投稿に対する返信やRepostだけ除外する
+					| mute_related ... ミュートしているユーザーの投稿に対する返信やRenoteだけ除外する
 					br
 					| mute_direct ... ミュートしているユーザーの投稿だけ除外する
 					br
-					| disabled ... ミュートしているユーザーの投稿とその投稿に対する返信やRepostも含める
+					| disabled ... ミュートしているユーザーの投稿とその投稿に対する返信やRenoteも含める
 					br
 					| direct_only ... ミュートしているユーザーの投稿だけに限定
 					br
-					| related_only ... ミュートしているユーザーの投稿に対する返信やRepostだけに限定
+					| related_only ... ミュートしているユーザーの投稿に対する返信やRenoteだけに限定
 					br
-					| all_only ... ミュートしているユーザーの投稿とその投稿に対する返信やRepostに限定
+					| all_only ... ミュートしているユーザーの投稿とその投稿に対する返信やRenoteに限定
 			tr
 				td reply
 				td
@@ -86,11 +86,11 @@ section
 					br
 					| null ... 特に限定しない(デフォルト)
 			tr
-				td repost
+				td renote
 				td
-					| true ... Repostに限定。
+					| true ... Renoteに限定。
 					br
-					| false ... Repostでない投稿に限定。
+					| false ... Renoteでない投稿に限定。
 					br
 					| null ... 特に限定しない(デフォルト)
 			tr
diff --git a/src/models/favorite.ts b/src/models/favorite.ts
index 2fa00e99c4..73f8881926 100644
--- a/src/models/favorite.ts
+++ b/src/models/favorite.ts
@@ -8,5 +8,5 @@ export type IFavorite = {
 	_id: mongo.ObjectID;
 	createdAt: Date;
 	userId: mongo.ObjectID;
-	postId: mongo.ObjectID;
+	noteId: mongo.ObjectID;
 };
diff --git a/src/models/note-reaction.ts b/src/models/note-reaction.ts
new file mode 100644
index 0000000000..d499442de9
--- /dev/null
+++ b/src/models/note-reaction.ts
@@ -0,0 +1,53 @@
+import * as mongo from 'mongodb';
+import deepcopy = require('deepcopy');
+import db from '../db/mongodb';
+import Reaction from './note-reaction';
+import { pack as packUser } from './user';
+
+const NoteReaction = db.get<INoteReaction>('noteReactions');
+NoteReaction.createIndex(['userId', 'noteId'], { unique: true });
+export default NoteReaction;
+
+export interface INoteReaction {
+	_id: mongo.ObjectID;
+	createdAt: Date;
+	noteId: mongo.ObjectID;
+	userId: mongo.ObjectID;
+	reaction: string;
+}
+
+/**
+ * Pack a reaction for API response
+ *
+ * @param {any} reaction
+ * @param {any} me?
+ * @return {Promise<any>}
+ */
+export const pack = (
+	reaction: any,
+	me?: any
+) => new Promise<any>(async (resolve, reject) => {
+	let _reaction: any;
+
+	// Populate the reaction if 'reaction' is ID
+	if (mongo.ObjectID.prototype.isPrototypeOf(reaction)) {
+		_reaction = await Reaction.findOne({
+			_id: reaction
+		});
+	} else if (typeof reaction === 'string') {
+		_reaction = await Reaction.findOne({
+			_id: new mongo.ObjectID(reaction)
+		});
+	} else {
+		_reaction = deepcopy(reaction);
+	}
+
+	// Rename _id to id
+	_reaction.id = _reaction._id;
+	delete _reaction._id;
+
+	// Populate user
+	_reaction.user = await packUser(_reaction.userId, me);
+
+	resolve(_reaction);
+});
diff --git a/src/models/note-watching.ts b/src/models/note-watching.ts
new file mode 100644
index 0000000000..b5ef3b61b7
--- /dev/null
+++ b/src/models/note-watching.ts
@@ -0,0 +1,13 @@
+import * as mongo from 'mongodb';
+import db from '../db/mongodb';
+
+const NoteWatching = db.get<INoteWatching>('noteWatching');
+NoteWatching.createIndex(['userId', 'noteId'], { unique: true });
+export default NoteWatching;
+
+export interface INoteWatching {
+	_id: mongo.ObjectID;
+	createdAt: Date;
+	userId: mongo.ObjectID;
+	noteId: mongo.ObjectID;
+}
diff --git a/src/models/note.ts b/src/models/note.ts
new file mode 100644
index 0000000000..9b33bb76f1
--- /dev/null
+++ b/src/models/note.ts
@@ -0,0 +1,241 @@
+import * as mongo from 'mongodb';
+import deepcopy = require('deepcopy');
+import rap from '@prezzemolo/rap';
+import db from '../db/mongodb';
+import { IUser, pack as packUser } from './user';
+import { pack as packApp } from './app';
+import { pack as packChannel } from './channel';
+import Vote from './poll-vote';
+import Reaction from './note-reaction';
+import { pack as packFile } from './drive-file';
+
+const Note = db.get<INote>('notes');
+
+Note.createIndex('uri', { sparse: true, unique: true });
+
+export default Note;
+
+export function isValidText(text: string): boolean {
+	return text.length <= 1000 && text.trim() != '';
+}
+
+export function isValidCw(text: string): boolean {
+	return text.length <= 100 && text.trim() != '';
+}
+
+export type INote = {
+	_id: mongo.ObjectID;
+	channelId: mongo.ObjectID;
+	createdAt: Date;
+	deletedAt: Date;
+	mediaIds: mongo.ObjectID[];
+	replyId: mongo.ObjectID;
+	renoteId: mongo.ObjectID;
+	poll: any; // todo
+	text: string;
+	tags: string[];
+	textHtml: string;
+	cw: string;
+	userId: mongo.ObjectID;
+	appId: mongo.ObjectID;
+	viaMobile: boolean;
+	renoteCount: number;
+	repliesCount: number;
+	reactionCounts: any;
+	mentions: mongo.ObjectID[];
+	visibility: 'public' | 'unlisted' | 'private' | 'direct';
+	geo: {
+		coordinates: number[];
+		altitude: number;
+		accuracy: number;
+		altitudeAccuracy: number;
+		heading: number;
+		speed: number;
+	};
+	uri: string;
+
+	_reply?: {
+		userId: mongo.ObjectID;
+	};
+	_renote?: {
+		userId: mongo.ObjectID;
+	};
+	_user: {
+		host: string;
+		hostLower: string;
+		account: {
+			inbox?: string;
+		};
+	};
+};
+
+/**
+ * Pack a note for API response
+ *
+ * @param note target
+ * @param me? serializee
+ * @param options? serialize options
+ * @return response
+ */
+export const pack = async (
+	note: string | mongo.ObjectID | INote,
+	me?: string | mongo.ObjectID | IUser,
+	options?: {
+		detail: boolean
+	}
+) => {
+	const opts = options || {
+		detail: true,
+	};
+
+	// Me
+	const meId: mongo.ObjectID = me
+		? mongo.ObjectID.prototype.isPrototypeOf(me)
+			? me as mongo.ObjectID
+			: typeof me === 'string'
+				? new mongo.ObjectID(me)
+				: (me as IUser)._id
+		: null;
+
+	let _note: any;
+
+	// Populate the note if 'note' is ID
+	if (mongo.ObjectID.prototype.isPrototypeOf(note)) {
+		_note = await Note.findOne({
+			_id: note
+		});
+	} else if (typeof note === 'string') {
+		_note = await Note.findOne({
+			_id: new mongo.ObjectID(note)
+		});
+	} else {
+		_note = deepcopy(note);
+	}
+
+	if (!_note) throw 'invalid note arg.';
+
+	const id = _note._id;
+
+	// Rename _id to id
+	_note.id = _note._id;
+	delete _note._id;
+
+	delete _note.mentions;
+	if (_note.geo) delete _note.geo.type;
+
+	// Populate user
+	_note.user = packUser(_note.userId, meId);
+
+	// Populate app
+	if (_note.appId) {
+		_note.app = packApp(_note.appId);
+	}
+
+	// Populate channel
+	if (_note.channelId) {
+		_note.channel = packChannel(_note.channelId);
+	}
+
+	// Populate media
+	if (_note.mediaIds) {
+		_note.media = Promise.all(_note.mediaIds.map(fileId =>
+			packFile(fileId)
+		));
+	}
+
+	// When requested a detailed note data
+	if (opts.detail) {
+		// Get previous note info
+		_note.prev = (async () => {
+			const prev = await Note.findOne({
+				userId: _note.userId,
+				_id: {
+					$lt: id
+				}
+			}, {
+				fields: {
+					_id: true
+				},
+				sort: {
+					_id: -1
+				}
+			});
+			return prev ? prev._id : null;
+		})();
+
+		// Get next note info
+		_note.next = (async () => {
+			const next = await Note.findOne({
+				userId: _note.userId,
+				_id: {
+					$gt: id
+				}
+			}, {
+				fields: {
+					_id: true
+				},
+				sort: {
+					_id: 1
+				}
+			});
+			return next ? next._id : null;
+		})();
+
+		if (_note.replyId) {
+			// Populate reply to note
+			_note.reply = pack(_note.replyId, meId, {
+				detail: false
+			});
+		}
+
+		if (_note.renoteId) {
+			// Populate renote
+			_note.renote = pack(_note.renoteId, meId, {
+				detail: _note.text == null
+			});
+		}
+
+		// Poll
+		if (meId && _note.poll) {
+			_note.poll = (async (poll) => {
+				const vote = await Vote
+					.findOne({
+						userId: meId,
+						noteId: id
+					});
+
+				if (vote != null) {
+					const myChoice = poll.choices
+						.filter(c => c.id == vote.choice)[0];
+
+					myChoice.isVoted = true;
+				}
+
+				return poll;
+			})(_note.poll);
+		}
+
+		// Fetch my reaction
+		if (meId) {
+			_note.myReaction = (async () => {
+				const reaction = await Reaction
+					.findOne({
+						userId: meId,
+						noteId: id,
+						deletedAt: { $exists: false }
+					});
+
+				if (reaction) {
+					return reaction.reaction;
+				}
+
+				return null;
+			})();
+		}
+	}
+
+	// resolve promises in _note object
+	_note = await rap(_note);
+
+	return _note;
+};
diff --git a/src/models/notification.ts b/src/models/notification.ts
index 078c8d5118..17144d7ee8 100644
--- a/src/models/notification.ts
+++ b/src/models/notification.ts
@@ -2,7 +2,7 @@ import * as mongo from 'mongodb';
 import deepcopy = require('deepcopy');
 import db from '../db/mongodb';
 import { IUser, pack as packUser } from './user';
-import { pack as packPost } from './post';
+import { pack as packNote } from './note';
 
 const Notification = db.get<INotification>('notifications');
 export default Notification;
@@ -36,12 +36,12 @@ export interface INotification {
 	 * follow - フォローされた
 	 * mention - 投稿で自分が言及された
 	 * reply - (自分または自分がWatchしている)投稿が返信された
-	 * repost - (自分または自分がWatchしている)投稿がRepostされた
-	 * quote - (自分または自分がWatchしている)投稿が引用Repostされた
+	 * renote - (自分または自分がWatchしている)投稿がRenoteされた
+	 * quote - (自分または自分がWatchしている)投稿が引用Renoteされた
 	 * reaction - (自分または自分がWatchしている)投稿にリアクションされた
 	 * poll_vote - (自分または自分がWatchしている)投稿の投票に投票された
 	 */
-	type: 'follow' | 'mention' | 'reply' | 'repost' | 'quote' | 'reaction' | 'poll_vote';
+	type: 'follow' | 'mention' | 'reply' | 'renote' | 'quote' | 'reaction' | 'poll_vote';
 
 	/**
 	 * 通知が読まれたかどうか
@@ -91,12 +91,12 @@ export const pack = (notification: any) => new Promise<any>(async (resolve, reje
 			break;
 		case 'mention':
 		case 'reply':
-		case 'repost':
+		case 'renote':
 		case 'quote':
 		case 'reaction':
 		case 'poll_vote':
-			// Populate post
-			_notification.post = await packPost(_notification.postId, me);
+			// Populate note
+			_notification.note = await packNote(_notification.noteId, me);
 			break;
 		default:
 			console.error(`Unknown type: ${_notification.type}`);
diff --git a/src/models/poll-vote.ts b/src/models/poll-vote.ts
index cd18ffd5f8..4d33b100e7 100644
--- a/src/models/poll-vote.ts
+++ b/src/models/poll-vote.ts
@@ -8,6 +8,6 @@ export interface IPollVote {
 	_id: mongo.ObjectID;
 	createdAt: Date;
 	userId: mongo.ObjectID;
-	postId: mongo.ObjectID;
+	noteId: mongo.ObjectID;
 	choice: number;
 }
diff --git a/src/models/post-reaction.ts b/src/models/post-reaction.ts
deleted file mode 100644
index 81be95b8d8..0000000000
--- a/src/models/post-reaction.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as mongo from 'mongodb';
-import deepcopy = require('deepcopy');
-import db from '../db/mongodb';
-import Reaction from './post-reaction';
-import { pack as packUser } from './user';
-
-const PostReaction = db.get<IPostReaction>('postReactions');
-PostReaction.createIndex(['userId', 'postId'], { unique: true });
-export default PostReaction;
-
-export interface IPostReaction {
-	_id: mongo.ObjectID;
-	createdAt: Date;
-	postId: mongo.ObjectID;
-	userId: mongo.ObjectID;
-	reaction: string;
-}
-
-/**
- * Pack a reaction for API response
- *
- * @param {any} reaction
- * @param {any} me?
- * @return {Promise<any>}
- */
-export const pack = (
-	reaction: any,
-	me?: any
-) => new Promise<any>(async (resolve, reject) => {
-	let _reaction: any;
-
-	// Populate the reaction if 'reaction' is ID
-	if (mongo.ObjectID.prototype.isPrototypeOf(reaction)) {
-		_reaction = await Reaction.findOne({
-			_id: reaction
-		});
-	} else if (typeof reaction === 'string') {
-		_reaction = await Reaction.findOne({
-			_id: new mongo.ObjectID(reaction)
-		});
-	} else {
-		_reaction = deepcopy(reaction);
-	}
-
-	// Rename _id to id
-	_reaction.id = _reaction._id;
-	delete _reaction._id;
-
-	// Populate user
-	_reaction.user = await packUser(_reaction.userId, me);
-
-	resolve(_reaction);
-});
diff --git a/src/models/post-watching.ts b/src/models/post-watching.ts
deleted file mode 100644
index 032b9d10fa..0000000000
--- a/src/models/post-watching.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as mongo from 'mongodb';
-import db from '../db/mongodb';
-
-const PostWatching = db.get<IPostWatching>('postWatching');
-PostWatching.createIndex(['userId', 'postId'], { unique: true });
-export default PostWatching;
-
-export interface IPostWatching {
-	_id: mongo.ObjectID;
-	createdAt: Date;
-	userId: mongo.ObjectID;
-	postId: mongo.ObjectID;
-}
diff --git a/src/models/post.ts b/src/models/post.ts
deleted file mode 100644
index ac7890d2e6..0000000000
--- a/src/models/post.ts
+++ /dev/null
@@ -1,241 +0,0 @@
-import * as mongo from 'mongodb';
-import deepcopy = require('deepcopy');
-import rap from '@prezzemolo/rap';
-import db from '../db/mongodb';
-import { IUser, pack as packUser } from './user';
-import { pack as packApp } from './app';
-import { pack as packChannel } from './channel';
-import Vote from './poll-vote';
-import Reaction from './post-reaction';
-import { pack as packFile } from './drive-file';
-
-const Post = db.get<IPost>('posts');
-
-Post.createIndex('uri', { sparse: true, unique: true });
-
-export default Post;
-
-export function isValidText(text: string): boolean {
-	return text.length <= 1000 && text.trim() != '';
-}
-
-export function isValidCw(text: string): boolean {
-	return text.length <= 100 && text.trim() != '';
-}
-
-export type IPost = {
-	_id: mongo.ObjectID;
-	channelId: mongo.ObjectID;
-	createdAt: Date;
-	deletedAt: Date;
-	mediaIds: mongo.ObjectID[];
-	replyId: mongo.ObjectID;
-	repostId: mongo.ObjectID;
-	poll: any; // todo
-	text: string;
-	tags: string[];
-	textHtml: string;
-	cw: string;
-	userId: mongo.ObjectID;
-	appId: mongo.ObjectID;
-	viaMobile: boolean;
-	repostCount: number;
-	repliesCount: number;
-	reactionCounts: any;
-	mentions: mongo.ObjectID[];
-	visibility: 'public' | 'unlisted' | 'private' | 'direct';
-	geo: {
-		coordinates: number[];
-		altitude: number;
-		accuracy: number;
-		altitudeAccuracy: number;
-		heading: number;
-		speed: number;
-	};
-	uri: string;
-
-	_reply?: {
-		userId: mongo.ObjectID;
-	};
-	_repost?: {
-		userId: mongo.ObjectID;
-	};
-	_user: {
-		host: string;
-		hostLower: string;
-		account: {
-			inbox?: string;
-		};
-	};
-};
-
-/**
- * Pack a post for API response
- *
- * @param post target
- * @param me? serializee
- * @param options? serialize options
- * @return response
- */
-export const pack = async (
-	post: string | mongo.ObjectID | IPost,
-	me?: string | mongo.ObjectID | IUser,
-	options?: {
-		detail: boolean
-	}
-) => {
-	const opts = options || {
-		detail: true,
-	};
-
-	// Me
-	const meId: mongo.ObjectID = me
-		? mongo.ObjectID.prototype.isPrototypeOf(me)
-			? me as mongo.ObjectID
-			: typeof me === 'string'
-				? new mongo.ObjectID(me)
-				: (me as IUser)._id
-		: null;
-
-	let _post: any;
-
-	// Populate the post if 'post' is ID
-	if (mongo.ObjectID.prototype.isPrototypeOf(post)) {
-		_post = await Post.findOne({
-			_id: post
-		});
-	} else if (typeof post === 'string') {
-		_post = await Post.findOne({
-			_id: new mongo.ObjectID(post)
-		});
-	} else {
-		_post = deepcopy(post);
-	}
-
-	if (!_post) throw 'invalid post arg.';
-
-	const id = _post._id;
-
-	// Rename _id to id
-	_post.id = _post._id;
-	delete _post._id;
-
-	delete _post.mentions;
-	if (_post.geo) delete _post.geo.type;
-
-	// Populate user
-	_post.user = packUser(_post.userId, meId);
-
-	// Populate app
-	if (_post.appId) {
-		_post.app = packApp(_post.appId);
-	}
-
-	// Populate channel
-	if (_post.channelId) {
-		_post.channel = packChannel(_post.channelId);
-	}
-
-	// Populate media
-	if (_post.mediaIds) {
-		_post.media = Promise.all(_post.mediaIds.map(fileId =>
-			packFile(fileId)
-		));
-	}
-
-	// When requested a detailed post data
-	if (opts.detail) {
-		// Get previous post info
-		_post.prev = (async () => {
-			const prev = await Post.findOne({
-				userId: _post.userId,
-				_id: {
-					$lt: id
-				}
-			}, {
-				fields: {
-					_id: true
-				},
-				sort: {
-					_id: -1
-				}
-			});
-			return prev ? prev._id : null;
-		})();
-
-		// Get next post info
-		_post.next = (async () => {
-			const next = await Post.findOne({
-				userId: _post.userId,
-				_id: {
-					$gt: id
-				}
-			}, {
-				fields: {
-					_id: true
-				},
-				sort: {
-					_id: 1
-				}
-			});
-			return next ? next._id : null;
-		})();
-
-		if (_post.replyId) {
-			// Populate reply to post
-			_post.reply = pack(_post.replyId, meId, {
-				detail: false
-			});
-		}
-
-		if (_post.repostId) {
-			// Populate repost
-			_post.repost = pack(_post.repostId, meId, {
-				detail: _post.text == null
-			});
-		}
-
-		// Poll
-		if (meId && _post.poll) {
-			_post.poll = (async (poll) => {
-				const vote = await Vote
-					.findOne({
-						userId: meId,
-						postId: id
-					});
-
-				if (vote != null) {
-					const myChoice = poll.choices
-						.filter(c => c.id == vote.choice)[0];
-
-					myChoice.isVoted = true;
-				}
-
-				return poll;
-			})(_post.poll);
-		}
-
-		// Fetch my reaction
-		if (meId) {
-			_post.myReaction = (async () => {
-				const reaction = await Reaction
-					.findOne({
-						userId: meId,
-						postId: id,
-						deletedAt: { $exists: false }
-					});
-
-				if (reaction) {
-					return reaction.reaction;
-				}
-
-				return null;
-			})();
-		}
-	}
-
-	// resolve promises in _post object
-	_post = await rap(_post);
-
-	return _post;
-};
diff --git a/src/models/user.ts b/src/models/user.ts
index 92091c6879..f86aefe9a4 100644
--- a/src/models/user.ts
+++ b/src/models/user.ts
@@ -2,7 +2,7 @@ import * as mongo from 'mongodb';
 import deepcopy = require('deepcopy');
 import rap from '@prezzemolo/rap';
 import db from '../db/mongodb';
-import { IPost, pack as packPost } from './post';
+import { INote, pack as packNote } from './note';
 import Following from './following';
 import Mute from './mute';
 import getFriends from '../server/api/common/get-friends';
@@ -22,7 +22,7 @@ type IUserBase = {
 	followersCount: number;
 	followingCount: number;
 	name?: string;
-	postsCount: number;
+	notesCount: number;
 	driveCapacity: number;
 	username: string;
 	usernameLower: string;
@@ -30,8 +30,8 @@ type IUserBase = {
 	bannerId: mongo.ObjectID;
 	data: any;
 	description: string;
-	latestPost: IPost;
-	pinnedPostId: mongo.ObjectID;
+	latestNote: INote;
+	pinnedNoteId: mongo.ObjectID;
 	isSuspended: boolean;
 	keywords: string[];
 	host: string;
@@ -120,7 +120,7 @@ export function init(user): IUser {
 	user._id = new mongo.ObjectID(user._id);
 	user.avatarId = new mongo.ObjectID(user.avatarId);
 	user.bannerId = new mongo.ObjectID(user.bannerId);
-	user.pinnedPostId = new mongo.ObjectID(user.pinnedPostId);
+	user.pinnedNoteId = new mongo.ObjectID(user.pinnedNoteId);
 	return user;
 }
 
@@ -186,7 +186,7 @@ export const pack = (
 	delete _user._id;
 
 	// Remove needless properties
-	delete _user.latestPost;
+	delete _user.latestNote;
 
 	if (!_user.host) {
 		// Remove private properties
@@ -260,9 +260,9 @@ export const pack = (
 	}
 
 	if (opts.detail) {
-		if (_user.pinnedPostId) {
-			// Populate pinned post
-			_user.pinnedPost = packPost(_user.pinnedPostId, meId, {
+		if (_user.pinnedNoteId) {
+			// Populate pinned note
+			_user.pinnedNote = packNote(_user.pinnedNoteId, meId, {
 				detail: true
 			});
 		}
diff --git a/src/othello/ai/back.ts b/src/othello/ai/back.ts
index 4d06ed9565..e4d0cfdd33 100644
--- a/src/othello/ai/back.ts
+++ b/src/othello/ai/back.ts
@@ -24,7 +24,7 @@ const id = conf.othello_ai.id;
  */
 const i = conf.othello_ai.i;
 
-let post;
+let note;
 
 process.on('message', async msg => {
 	// 親プロセスからデータをもらう
@@ -51,13 +51,13 @@ process.on('message', async msg => {
 			? `?[${getUserName(user)}](${conf.url}/@${user.username})さんの接待を始めました！`
 			: `対局を?[${getUserName(user)}](${conf.url}/@${user.username})さんと始めました！ (強さ${form[0].value})`;
 
-		const res = await request.post(`${conf.api_url}/posts/create`, {
+		const res = await request.post(`${conf.api_url}/notes/create`, {
 			json: { i,
 				text: `${text}\n→[観戦する](${url})`
 			}
 		});
 
-		post = res.createdPost;
+		note = res.createdNote;
 		//#endregion
 	}
 
@@ -83,9 +83,9 @@ process.on('message', async msg => {
 					? `?[${getUserName(user)}](${conf.url}/@${user.username})さんに勝ちました♪`
 					: `?[${getUserName(user)}](${conf.url}/@${user.username})さんに負けました...`;
 
-		await request.post(`${conf.api_url}/posts/create`, {
+		await request.post(`${conf.api_url}/notes/create`, {
 			json: { i,
-				repostId: post.id,
+				renoteId: note.id,
 				text: text
 			}
 		});
diff --git a/src/othello/ai/front.ts b/src/othello/ai/front.ts
index 9d0b5f9800..ff74b7216e 100644
--- a/src/othello/ai/front.ts
+++ b/src/othello/ai/front.ts
@@ -46,28 +46,28 @@ homeStream.on('message', message => {
 
 	// タイムライン上でなんか言われたまたは返信されたとき
 	if (msg.type == 'mention' || msg.type == 'reply') {
-		const post = msg.body;
+		const note = msg.body;
 
-		if (post.userId == id) return;
+		if (note.userId == id) return;
 
 		// リアクションする
-		request.post(`${conf.api_url}/posts/reactions/create`, {
+		request.post(`${conf.api_url}/notes/reactions/create`, {
 			json: { i,
-				postId: post.id,
+				noteId: note.id,
 				reaction: 'love'
 			}
 		});
 
-		if (post.text) {
-			if (post.text.indexOf('オセロ') > -1) {
-				request.post(`${conf.api_url}/posts/create`, {
+		if (note.text) {
+			if (note.text.indexOf('オセロ') > -1) {
+				request.post(`${conf.api_url}/notes/create`, {
 					json: { i,
-						replyId: post.id,
+						replyId: note.id,
 						text: '良いですよ～'
 					}
 				});
 
-				invite(post.userId);
+				invite(note.userId);
 			}
 		}
 	}
diff --git a/src/publishers/stream.ts b/src/publishers/stream.ts
index 498ff33f31..a6d2c2277c 100644
--- a/src/publishers/stream.ts
+++ b/src/publishers/stream.ts
@@ -21,8 +21,8 @@ class MisskeyEvent {
 		this.publish(`drive-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
 	}
 
-	public publishPostStream(postId: ID, type: string, value?: any): void {
-		this.publish(`post-stream:${postId}`, type, typeof value === 'undefined' ? null : value);
+	public publishNoteStream(noteId: ID, type: string, value?: any): void {
+		this.publish(`note-stream:${noteId}`, type, typeof value === 'undefined' ? null : value);
 	}
 
 	public publishMessagingStream(userId: ID, otherpartyId: ID, type: string, value?: any): void {
@@ -60,7 +60,7 @@ export default ev.publishUserStream.bind(ev);
 
 export const publishDriveStream = ev.publishDriveStream.bind(ev);
 
-export const publishPostStream = ev.publishPostStream.bind(ev);
+export const publishNoteStream = ev.publishNoteStream.bind(ev);
 
 export const publishMessagingStream = ev.publishMessagingStream.bind(ev);
 
diff --git a/src/queue/processors/http/report-github-failure.ts b/src/queue/processors/http/report-github-failure.ts
index 1e0b51f89f..13f9afadd3 100644
--- a/src/queue/processors/http/report-github-failure.ts
+++ b/src/queue/processors/http/report-github-failure.ts
@@ -1,6 +1,6 @@
 import * as request from 'request-promise-native';
 import User from '../../../models/user';
-import createPost from '../../../services/post/create';
+import createNote from '../../../services/note/create';
 
 export default async ({ data }) => {
 	const asyncBot = User.findOne({ _id: data.userId });
@@ -20,5 +20,5 @@ export default async ({ data }) => {
 		`**⚠️BUILD STILL FAILED⚠️**: ?[${data.message}](${data.htmlUrl})` :
 		`**🚨BUILD FAILED🚨**: →→→?[${data.message}](${data.htmlUrl})←←←`;
 
-	createPost(await asyncBot, { text });
+	createNote(await asyncBot, { text });
 };
diff --git a/src/remote/activitypub/act/create/note.ts b/src/remote/activitypub/act/create/note.ts
index 82a6207038..572a293ab4 100644
--- a/src/remote/activitypub/act/create/note.ts
+++ b/src/remote/activitypub/act/create/note.ts
@@ -2,8 +2,8 @@ import { JSDOM } from 'jsdom';
 import * as debug from 'debug';
 
 import Resolver from '../../resolver';
-import Post, { IPost } from '../../../../models/post';
-import createPost from '../../../../services/post/create';
+import Note, { INote } from '../../../../models/note';
+import post from '../../../../services/note/create';
 import { IRemoteUser } from '../../../../models/user';
 import resolvePerson from '../../resolve-person';
 import createImage from './image';
@@ -14,14 +14,14 @@ const log = debug('misskey:activitypub');
 /**
  * 投稿作成アクティビティを捌きます
  */
-export default async function createNote(resolver: Resolver, actor: IRemoteUser, note, silent = false): Promise<IPost> {
+export default async function createNote(resolver: Resolver, actor: IRemoteUser, note, silent = false): Promise<INote> {
 	if (typeof note.id !== 'string') {
 		log(`invalid note: ${JSON.stringify(note, null, 2)}`);
 		throw new Error('invalid note');
 	}
 
 	// 既に同じURIを持つものが登録されていないかチェックし、登録されていたらそれを返す
-	const exist = await Post.findOne({ uri: note.id });
+	const exist = await Note.findOne({ uri: note.id });
 	if (exist) {
 		return exist;
 	}
@@ -54,12 +54,12 @@ export default async function createNote(resolver: Resolver, actor: IRemoteUser,
 	if ('inReplyTo' in note && note.inReplyTo != null) {
 		// リプライ先の投稿がMisskeyに登録されているか調べる
 		const uri: string = note.inReplyTo.id || note.inReplyTo;
-		const inReplyToPost = uri.startsWith(config.url + '/')
-			? await Post.findOne({ _id: uri.split('/').pop() })
-			: await Post.findOne({ uri });
+		const inReplyToNote = uri.startsWith(config.url + '/')
+			? await Note.findOne({ _id: uri.split('/').pop() })
+			: await Note.findOne({ uri });
 
-		if (inReplyToPost) {
-			reply = inReplyToPost;
+		if (inReplyToNote) {
+			reply = inReplyToNote;
 		} else {
 			// 無かったらフェッチ
 			const inReplyTo = await resolver.resolve(note.inReplyTo) as any;
@@ -75,11 +75,11 @@ export default async function createNote(resolver: Resolver, actor: IRemoteUser,
 
 	const { window } = new JSDOM(note.content);
 
-	return await createPost(actor, {
+	return await post(actor, {
 		createdAt: new Date(note.published),
 		media,
 		reply,
-		repost: undefined,
+		renote: undefined,
 		text: window.document.body.textContent,
 		viaMobile: false,
 		geo: undefined,
diff --git a/src/remote/activitypub/act/delete/index.ts b/src/remote/activitypub/act/delete/index.ts
index e34577b310..6c6faa1ae5 100644
--- a/src/remote/activitypub/act/delete/index.ts
+++ b/src/remote/activitypub/act/delete/index.ts
@@ -1,6 +1,6 @@
 import Resolver from '../../resolver';
 import deleteNote from './note';
-import Post from '../../../../models/post';
+import Note from '../../../../models/note';
 import { IRemoteUser } from '../../../../models/user';
 
 /**
@@ -23,8 +23,8 @@ export default async (actor: IRemoteUser, activity): Promise<void> => {
 		break;
 
 	case 'Tombstone':
-		const post = await Post.findOne({ uri });
-		if (post != null) {
+		const note = await Note.findOne({ uri });
+		if (note != null) {
 			deleteNote(actor, uri);
 		}
 		break;
diff --git a/src/remote/activitypub/act/delete/note.ts b/src/remote/activitypub/act/delete/note.ts
index 8e9447b481..64c342d39b 100644
--- a/src/remote/activitypub/act/delete/note.ts
+++ b/src/remote/activitypub/act/delete/note.ts
@@ -1,6 +1,6 @@
 import * as debug from 'debug';
 
-import Post from '../../../../models/post';
+import Note from '../../../../models/note';
 import { IRemoteUser } from '../../../../models/user';
 
 const log = debug('misskey:activitypub');
@@ -8,17 +8,17 @@ const log = debug('misskey:activitypub');
 export default async function(actor: IRemoteUser, uri: string): Promise<void> {
 	log(`Deleting the Note: ${uri}`);
 
-	const post = await Post.findOne({ uri });
+	const note = await Note.findOne({ uri });
 
-	if (post == null) {
-		throw new Error('post not found');
+	if (note == null) {
+		throw new Error('note not found');
 	}
 
-	if (!post.userId.equals(actor._id)) {
+	if (!note.userId.equals(actor._id)) {
 		throw new Error('投稿を削除しようとしているユーザーは投稿の作成者ではありません');
 	}
 
-	Post.update({ _id: post._id }, {
+	Note.update({ _id: note._id }, {
 		$set: {
 			deletedAt: new Date(),
 			text: null,
diff --git a/src/remote/activitypub/act/like.ts b/src/remote/activitypub/act/like.ts
index 2f5e3f807d..a3243948ba 100644
--- a/src/remote/activitypub/act/like.ts
+++ b/src/remote/activitypub/act/like.ts
@@ -1,7 +1,7 @@
-import Post from '../../../models/post';
+import Note from '../../../models/note';
 import { IRemoteUser } from '../../../models/user';
 import { ILike } from '../type';
-import create from '../../../services/post/reaction/create';
+import create from '../../../services/note/reaction/create';
 
 export default async (actor: IRemoteUser, activity: ILike) => {
 	const id = typeof activity.object == 'string' ? activity.object : activity.object.id;
@@ -9,12 +9,12 @@ export default async (actor: IRemoteUser, activity: ILike) => {
 	// Transform:
 	// https://misskey.ex/@syuilo/xxxx to
 	// xxxx
-	const postId = id.split('/').pop();
+	const noteId = id.split('/').pop();
 
-	const post = await Post.findOne({ _id: postId });
-	if (post === null) {
+	const note = await Note.findOne({ _id: noteId });
+	if (note === null) {
 		throw new Error();
 	}
 
-	await create(actor, post, 'pudding');
+	await create(actor, note, 'pudding');
 };
diff --git a/src/remote/activitypub/renderer/like.ts b/src/remote/activitypub/renderer/like.ts
index 903b10789e..fe36c7094d 100644
--- a/src/remote/activitypub/renderer/like.ts
+++ b/src/remote/activitypub/renderer/like.ts
@@ -1,9 +1,9 @@
 import config from '../../../config';
 
-export default (user, post) => {
+export default (user, note) => {
 	return {
 		type: 'Like',
 		actor: `${config.url}/@${user.username}`,
-		object: post.uri ? post.uri : `${config.url}/posts/${post._id}`
+		object: note.uri ? note.uri : `${config.url}/notes/${note._id}`
 	};
 };
diff --git a/src/remote/activitypub/renderer/note.ts b/src/remote/activitypub/renderer/note.ts
index bbab63db36..244aecf6a3 100644
--- a/src/remote/activitypub/renderer/note.ts
+++ b/src/remote/activitypub/renderer/note.ts
@@ -2,28 +2,28 @@ import renderDocument from './document';
 import renderHashtag from './hashtag';
 import config from '../../../config';
 import DriveFile from '../../../models/drive-file';
-import Post, { IPost } from '../../../models/post';
+import Note, { INote } from '../../../models/note';
 import User, { IUser } from '../../../models/user';
 
-export default async (user: IUser, post: IPost) => {
-	const promisedFiles = post.mediaIds
-		? DriveFile.find({ _id: { $in: post.mediaIds } })
+export default async (user: IUser, note: INote) => {
+	const promisedFiles = note.mediaIds
+		? DriveFile.find({ _id: { $in: note.mediaIds } })
 		: Promise.resolve([]);
 
 	let inReplyTo;
 
-	if (post.replyId) {
-		const inReplyToPost = await Post.findOne({
-			_id: post.replyId,
+	if (note.replyId) {
+		const inReplyToNote = await Note.findOne({
+			_id: note.replyId,
 		});
 
-		if (inReplyToPost !== null) {
+		if (inReplyToNote !== null) {
 			const inReplyToUser = await User.findOne({
-				_id: inReplyToPost.userId,
+				_id: inReplyToNote.userId,
 			});
 
 			if (inReplyToUser !== null) {
-				inReplyTo = inReplyToPost.uri || `${config.url}/posts/${inReplyToPost._id}`;
+				inReplyTo = inReplyToNote.uri || `${config.url}/notes/${inReplyToNote._id}`;
 			}
 		}
 	} else {
@@ -33,15 +33,15 @@ export default async (user: IUser, post: IPost) => {
 	const attributedTo = `${config.url}/@${user.username}`;
 
 	return {
-		id: `${config.url}/posts/${post._id}`,
+		id: `${config.url}/notes/${note._id}`,
 		type: 'Note',
 		attributedTo,
-		content: post.textHtml,
-		published: post.createdAt.toISOString(),
+		content: note.textHtml,
+		published: note.createdAt.toISOString(),
 		to: 'https://www.w3.org/ns/activitystreams#Public',
 		cc: `${attributedTo}/followers`,
 		inReplyTo,
 		attachment: (await promisedFiles).map(renderDocument),
-		tag: (post.tags || []).map(renderHashtag)
+		tag: (note.tags || []).map(renderHashtag)
 	};
 };
diff --git a/src/remote/activitypub/resolve-person.ts b/src/remote/activitypub/resolve-person.ts
index b3bac3cd3f..ac0900307f 100644
--- a/src/remote/activitypub/resolve-person.ts
+++ b/src/remote/activitypub/resolve-person.ts
@@ -31,7 +31,7 @@ export default async (value, verifier?: string) => {
 		throw new Error('invalid person');
 	}
 
-	const [followersCount = 0, followingCount = 0, postsCount = 0, finger] = await Promise.all([
+	const [followersCount = 0, followingCount = 0, notesCount = 0, finger] = await Promise.all([
 		resolver.resolve(object.followers).then(
 			resolved => isCollectionOrOrderedCollection(resolved) ? resolved.totalItems : undefined,
 			() => undefined
@@ -59,7 +59,7 @@ export default async (value, verifier?: string) => {
 		description: summaryDOM.textContent,
 		followersCount,
 		followingCount,
-		postsCount,
+		notesCount,
 		name: object.name,
 		driveCapacity: 1024 * 1024 * 8, // 8MiB
 		username: object.preferredUsername,
diff --git a/src/renderers/get-note-summary.ts b/src/renderers/get-note-summary.ts
new file mode 100644
index 0000000000..13859439a8
--- /dev/null
+++ b/src/renderers/get-note-summary.ts
@@ -0,0 +1,45 @@
+/**
+ * 投稿を表す文字列を取得します。
+ * @param {*} note 投稿
+ */
+const summarize = (note: any): string => {
+	let summary = '';
+
+	// チャンネル
+	summary += note.channel ? `${note.channel.title}:` : '';
+
+	// 本文
+	summary += note.text ? note.text : '';
+
+	// メディアが添付されているとき
+	if (note.media) {
+		summary += ` (${note.media.length}つのメディア)`;
+	}
+
+	// 投票が添付されているとき
+	if (note.poll) {
+		summary += ' (投票)';
+	}
+
+	// 返信のとき
+	if (note.replyId) {
+		if (note.reply) {
+			summary += ` RE: ${summarize(note.reply)}`;
+		} else {
+			summary += ' RE: ...';
+		}
+	}
+
+	// Renoteのとき
+	if (note.renoteId) {
+		if (note.renote) {
+			summary += ` RP: ${summarize(note.renote)}`;
+		} else {
+			summary += ' RP: ...';
+		}
+	}
+
+	return summary.trim();
+};
+
+export default summarize;
diff --git a/src/renderers/get-notification-summary.ts b/src/renderers/get-notification-summary.ts
index f5e38faf99..f9c5a55879 100644
--- a/src/renderers/get-notification-summary.ts
+++ b/src/renderers/get-notification-summary.ts
@@ -1,5 +1,5 @@
 import getUserName from '../renderers/get-user-name';
-import getPostSummary from './get-post-summary';
+import getNoteSummary from './get-note-summary';
 import getReactionEmoji from './get-reaction-emoji';
 
 /**
@@ -11,17 +11,17 @@ export default function(notification: any): string {
 		case 'follow':
 			return `${getUserName(notification.user)}にフォローされました`;
 		case 'mention':
-			return `言及されました:\n${getUserName(notification.user)}「${getPostSummary(notification.post)}」`;
+			return `言及されました:\n${getUserName(notification.user)}「${getNoteSummary(notification.note)}」`;
 		case 'reply':
-			return `返信されました:\n${getUserName(notification.user)}「${getPostSummary(notification.post)}」`;
-		case 'repost':
-			return `Repostされました:\n${getUserName(notification.user)}「${getPostSummary(notification.post)}」`;
+			return `返信されました:\n${getUserName(notification.user)}「${getNoteSummary(notification.note)}」`;
+		case 'renote':
+			return `Renoteされました:\n${getUserName(notification.user)}「${getNoteSummary(notification.note)}」`;
 		case 'quote':
-			return `引用されました:\n${getUserName(notification.user)}「${getPostSummary(notification.post)}」`;
+			return `引用されました:\n${getUserName(notification.user)}「${getNoteSummary(notification.note)}」`;
 		case 'reaction':
-			return `リアクションされました:\n${getUserName(notification.user)} <${getReactionEmoji(notification.reaction)}>「${getPostSummary(notification.post)}」`;
+			return `リアクションされました:\n${getUserName(notification.user)} <${getReactionEmoji(notification.reaction)}>「${getNoteSummary(notification.note)}」`;
 		case 'poll_vote':
-			return `投票されました:\n${getUserName(notification.user)}「${getPostSummary(notification.post)}」`;
+			return `投票されました:\n${getUserName(notification.user)}「${getNoteSummary(notification.note)}」`;
 		default:
 			return `<不明な通知タイプ: ${notification.type}>`;
 	}
diff --git a/src/renderers/get-post-summary.ts b/src/renderers/get-post-summary.ts
deleted file mode 100644
index 8d0033064f..0000000000
--- a/src/renderers/get-post-summary.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * 投稿を表す文字列を取得します。
- * @param {*} post 投稿
- */
-const summarize = (post: any): string => {
-	let summary = '';
-
-	// チャンネル
-	summary += post.channel ? `${post.channel.title}:` : '';
-
-	// 本文
-	summary += post.text ? post.text : '';
-
-	// メディアが添付されているとき
-	if (post.media) {
-		summary += ` (${post.media.length}つのメディア)`;
-	}
-
-	// 投票が添付されているとき
-	if (post.poll) {
-		summary += ' (投票)';
-	}
-
-	// 返信のとき
-	if (post.replyId) {
-		if (post.reply) {
-			summary += ` RE: ${summarize(post.reply)}`;
-		} else {
-			summary += ' RE: ...';
-		}
-	}
-
-	// Repostのとき
-	if (post.repostId) {
-		if (post.repost) {
-			summary += ` RP: ${summarize(post.repost)}`;
-		} else {
-			summary += ' RP: ...';
-		}
-	}
-
-	return summary.trim();
-};
-
-export default summarize;
diff --git a/src/renderers/get-user-summary.ts b/src/renderers/get-user-summary.ts
index d002933b6d..52309954d3 100644
--- a/src/renderers/get-user-summary.ts
+++ b/src/renderers/get-user-summary.ts
@@ -8,7 +8,7 @@ import getUserName from './get-user-name';
  */
 export default function(user: IUser): string {
 	let string = `${getUserName(user)} (@${getAcct(user)})\n` +
-		`${user.postsCount}投稿、${user.followingCount}フォロー、${user.followersCount}フォロワー\n`;
+		`${user.notesCount}投稿、${user.followingCount}フォロー、${user.followersCount}フォロワー\n`;
 
 	if (isLocalUser(user)) {
 		const account = user.account;
diff --git a/src/server/activitypub/index.ts b/src/server/activitypub/index.ts
index ac7a184f2a..042579db9d 100644
--- a/src/server/activitypub/index.ts
+++ b/src/server/activitypub/index.ts
@@ -4,7 +4,7 @@ import user from './user';
 import inbox from './inbox';
 import outbox from './outbox';
 import publicKey from './publickey';
-import post from './post';
+import note from './note';
 
 const app = express();
 app.disable('x-powered-by');
@@ -13,6 +13,6 @@ app.use(user);
 app.use(inbox);
 app.use(outbox);
 app.use(publicKey);
-app.use(post);
+app.use(note);
 
 export default app;
diff --git a/src/server/activitypub/note.ts b/src/server/activitypub/note.ts
new file mode 100644
index 0000000000..cea9be52da
--- /dev/null
+++ b/src/server/activitypub/note.ts
@@ -0,0 +1,43 @@
+import * as express from 'express';
+import context from '../../remote/activitypub/renderer/context';
+import render from '../../remote/activitypub/renderer/note';
+import parseAcct from '../../acct/parse';
+import Note from '../../models/note';
+import User from '../../models/user';
+
+const app = express.Router();
+
+app.get('/@:user/:note', async (req, res, next) => {
+	const accepted = req.accepts(['html', 'application/activity+json', 'application/ld+json']);
+	if (!(['application/activity+json', 'application/ld+json'] as any[]).includes(accepted)) {
+		return next();
+	}
+
+	const { username, host } = parseAcct(req.params.user);
+	if (host !== null) {
+		return res.sendStatus(422);
+	}
+
+	const user = await User.findOne({
+		usernameLower: username.toLowerCase(),
+		host: null
+	});
+	if (user === null) {
+		return res.sendStatus(404);
+	}
+
+	const note = await Note.findOne({
+		_id: req.params.note,
+		userId: user._id
+	});
+	if (note === null) {
+		return res.sendStatus(404);
+	}
+
+	const rendered = await render(user, note);
+	rendered['@context'] = context;
+
+	res.json(rendered);
+});
+
+export default app;
diff --git a/src/server/activitypub/outbox.ts b/src/server/activitypub/outbox.ts
index 976908d1f3..b6f3a3f9db 100644
--- a/src/server/activitypub/outbox.ts
+++ b/src/server/activitypub/outbox.ts
@@ -3,7 +3,7 @@ import context from '../../remote/activitypub/renderer/context';
 import renderNote from '../../remote/activitypub/renderer/note';
 import renderOrderedCollection from '../../remote/activitypub/renderer/ordered-collection';
 import config from '../../config';
-import Post from '../../models/post';
+import Note from '../../models/note';
 import withUser from './with-user';
 
 const app = express.Router();
@@ -11,13 +11,13 @@ const app = express.Router();
 app.get('/@:user/outbox', withUser(username => {
 	return `${config.url}/@${username}/inbox`;
 }, async (user, req, res) => {
-	const posts = await Post.find({ userId: user._id }, {
+	const notes = await Note.find({ userId: user._id }, {
 		limit: 20,
 		sort: { _id: -1 }
 	});
 
-	const renderedPosts = await Promise.all(posts.map(post => renderNote(user, post)));
-	const rendered = renderOrderedCollection(`${config.url}/@${user.username}/inbox`, user.postsCount, renderedPosts);
+	const renderedNotes = await Promise.all(notes.map(note => renderNote(user, note)));
+	const rendered = renderOrderedCollection(`${config.url}/@${user.username}/inbox`, user.notesCount, renderedNotes);
 	rendered['@context'] = context;
 
 	res.json(rendered);
diff --git a/src/server/activitypub/post.ts b/src/server/activitypub/post.ts
deleted file mode 100644
index 355c603563..0000000000
--- a/src/server/activitypub/post.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as express from 'express';
-import context from '../../remote/activitypub/renderer/context';
-import render from '../../remote/activitypub/renderer/note';
-import parseAcct from '../../acct/parse';
-import Post from '../../models/post';
-import User from '../../models/user';
-
-const app = express.Router();
-
-app.get('/@:user/:post', async (req, res, next) => {
-	const accepted = req.accepts(['html', 'application/activity+json', 'application/ld+json']);
-	if (!(['application/activity+json', 'application/ld+json'] as any[]).includes(accepted)) {
-		return next();
-	}
-
-	const { username, host } = parseAcct(req.params.user);
-	if (host !== null) {
-		return res.sendStatus(422);
-	}
-
-	const user = await User.findOne({
-		usernameLower: username.toLowerCase(),
-		host: null
-	});
-	if (user === null) {
-		return res.sendStatus(404);
-	}
-
-	const post = await Post.findOne({
-		_id: req.params.post,
-		userId: user._id
-	});
-	if (post === null) {
-		return res.sendStatus(404);
-	}
-
-	const rendered = await render(user, post);
-	rendered['@context'] = context;
-
-	res.json(rendered);
-});
-
-export default app;
diff --git a/src/server/api/bot/core.ts b/src/server/api/bot/core.ts
index a44aa9d7bc..1cf0522349 100644
--- a/src/server/api/bot/core.ts
+++ b/src/server/api/bot/core.ts
@@ -3,7 +3,7 @@ import * as bcrypt from 'bcryptjs';
 
 import User, { IUser, init as initUser, ILocalUser } from '../../../models/user';
 
-import getPostSummary from '../../../renderers/get-post-summary';
+import getNoteSummary from '../../../renderers/get-note-summary';
 import getUserName from '../../../renderers/get-user-name';
 import getUserSummary from '../../../renderers/get-user-summary';
 import parseAcct from '../../../acct/parse';
@@ -83,7 +83,7 @@ export default class BotCore extends EventEmitter {
 					'me: アカウント情報を見ます\n' +
 					'login, signin: サインインします\n' +
 					'logout, signout: サインアウトします\n' +
-					'post: 投稿します\n' +
+					'note: 投稿します\n' +
 					'tl: タイムラインを見ます\n' +
 					'no: 通知を見ます\n' +
 					'@<ユーザー名>: ユーザーを表示します\n' +
@@ -109,10 +109,10 @@ export default class BotCore extends EventEmitter {
 				this.signout();
 				return 'ご利用ありがとうございました <3';
 
-			case 'post':
+			case 'note':
 			case '投稿':
 				if (this.user == null) return 'まずサインインしてください。';
-				this.setContext(new PostContext(this));
+				this.setContext(new NoteContext(this));
 				return await this.context.greet();
 
 			case 'tl':
@@ -190,7 +190,7 @@ abstract class Context extends EventEmitter {
 
 	public static import(bot: BotCore, data: any) {
 		if (data.type == 'guessing-game') return GuessingGameContext.import(bot, data.content);
-		if (data.type == 'post') return PostContext.import(bot, data.content);
+		if (data.type == 'note') return NoteContext.import(bot, data.content);
 		if (data.type == 'tl') return TlContext.import(bot, data.content);
 		if (data.type == 'notifications') return NotificationsContext.import(bot, data.content);
 		if (data.type == 'signin') return SigninContext.import(bot, data.content);
@@ -254,13 +254,13 @@ class SigninContext extends Context {
 	}
 }
 
-class PostContext extends Context {
+class NoteContext extends Context {
 	public async greet(): Promise<string> {
 		return '内容:';
 	}
 
 	public async q(query: string): Promise<string> {
-		await require('../endpoints/posts/create')({
+		await require('../endpoints/notes/create')({
 			text: query
 		}, this.bot.user);
 		this.bot.clearContext();
@@ -269,12 +269,12 @@ class PostContext extends Context {
 
 	public export() {
 		return {
-			type: 'post'
+			type: 'note'
 		};
 	}
 
 	public static import(bot: BotCore, data: any) {
-		const context = new PostContext(bot);
+		const context = new NoteContext(bot);
 		return context;
 	}
 }
@@ -296,7 +296,7 @@ class TlContext extends Context {
 	}
 
 	private async getTl() {
-		const tl = await require('../endpoints/posts/timeline')({
+		const tl = await require('../endpoints/notes/timeline')({
 			limit: 5,
 			untilId: this.next ? this.next : undefined
 		}, this.bot.user);
@@ -306,7 +306,7 @@ class TlContext extends Context {
 			this.emit('updated');
 
 			const text = tl
-				.map(post => `${getUserName(post.user)}\n「${getPostSummary(post)}」`)
+				.map(note => `${getUserName(note.user)}\n「${getNoteSummary(note)}」`)
 				.join('\n-----\n');
 
 			return text;
diff --git a/src/server/api/bot/interfaces/line.ts b/src/server/api/bot/interfaces/line.ts
index 1191aaf391..b6b0c257e9 100644
--- a/src/server/api/bot/interfaces/line.ts
+++ b/src/server/api/bot/interfaces/line.ts
@@ -9,7 +9,7 @@ import _redis from '../../../../db/redis';
 import prominence = require('prominence');
 import getAcct from '../../../../acct/render';
 import parseAcct from '../../../../acct/parse';
-import getPostSummary from '../../../../renderers/get-post-summary';
+import getNoteSummary from '../../../../renderers/get-note-summary';
 import getUserName from '../../../../renderers/get-user-name';
 
 const redis = prominence(_redis);
@@ -80,14 +80,14 @@ class LineBot extends BotCore {
 				}
 				break;
 
-			// postback
-			case 'postback':
-				const data = ev.postback.data;
+			// noteback
+			case 'noteback':
+				const data = ev.noteback.data;
 				const cmd = data.split('|')[0];
 				const arg = data.split('|')[1];
 				switch (cmd) {
 					case 'showtl':
-						this.showUserTimelinePostback(arg);
+						this.showUserTimelineNoteback(arg);
 						break;
 				}
 				break;
@@ -107,7 +107,7 @@ class LineBot extends BotCore {
 		const actions = [];
 
 		actions.push({
-			type: 'postback',
+			type: 'noteback',
 			label: 'タイムラインを見る',
 			data: `showtl|${user.id}`
 		});
@@ -141,14 +141,14 @@ class LineBot extends BotCore {
 		return null;
 	}
 
-	public async showUserTimelinePostback(userId: string) {
-		const tl = await require('../../endpoints/users/posts')({
+	public async showUserTimelineNoteback(userId: string) {
+		const tl = await require('../../endpoints/users/notes')({
 			userId: userId,
 			limit: 5
 		}, this.user);
 
 		const text = `${getUserName(tl[0].user)}さんのタイムラインはこちらです:\n\n` + tl
-			.map(post => getPostSummary(post))
+			.map(note => getNoteSummary(note))
 			.join('\n-----\n');
 
 		this.reply([{
diff --git a/src/server/api/endpoints.ts b/src/server/api/endpoints.ts
index c7100bd036..67f3217faf 100644
--- a/src/server/api/endpoints.ts
+++ b/src/server/api/endpoints.ts
@@ -113,7 +113,7 @@ const endpoints: Endpoint[] = [
 		secure: true
 	},
 	{
-		name: 'aggregation/posts',
+		name: 'aggregation/notes',
 	},
 	{
 		name: 'aggregation/users',
@@ -122,7 +122,7 @@ const endpoints: Endpoint[] = [
 		name: 'aggregation/users/activity',
 	},
 	{
-		name: 'aggregation/users/post',
+		name: 'aggregation/users/note',
 	},
 	{
 		name: 'aggregation/users/followers'
@@ -134,16 +134,16 @@ const endpoints: Endpoint[] = [
 		name: 'aggregation/users/reaction'
 	},
 	{
-		name: 'aggregation/posts/repost'
+		name: 'aggregation/notes/renote'
 	},
 	{
-		name: 'aggregation/posts/reply'
+		name: 'aggregation/notes/reply'
 	},
 	{
-		name: 'aggregation/posts/reaction'
+		name: 'aggregation/notes/reaction'
 	},
 	{
-		name: 'aggregation/posts/reactions'
+		name: 'aggregation/notes/reactions'
 	},
 
 	{
@@ -391,7 +391,7 @@ const endpoints: Endpoint[] = [
 		name: 'users/search_by_username'
 	},
 	{
-		name: 'users/posts'
+		name: 'users/notes'
 	},
 	{
 		name: 'users/following'
@@ -428,35 +428,35 @@ const endpoints: Endpoint[] = [
 	},
 
 	{
-		name: 'posts'
+		name: 'notes'
 	},
 	{
-		name: 'posts/show'
+		name: 'notes/show'
 	},
 	{
-		name: 'posts/replies'
+		name: 'notes/replies'
 	},
 	{
-		name: 'posts/context'
+		name: 'notes/context'
 	},
 	{
-		name: 'posts/create',
+		name: 'notes/create',
 		withCredential: true,
 		limit: {
 			duration: ms('1hour'),
 			max: 120,
 			minInterval: ms('1second')
 		},
-		kind: 'post-write'
+		kind: 'note-write'
 	},
 	{
-		name: 'posts/reposts'
+		name: 'notes/renotes'
 	},
 	{
-		name: 'posts/search'
+		name: 'notes/search'
 	},
 	{
-		name: 'posts/timeline',
+		name: 'notes/timeline',
 		withCredential: true,
 		limit: {
 			duration: ms('10minutes'),
@@ -464,7 +464,7 @@ const endpoints: Endpoint[] = [
 		}
 	},
 	{
-		name: 'posts/mentions',
+		name: 'notes/mentions',
 		withCredential: true,
 		limit: {
 			duration: ms('10minutes'),
@@ -472,19 +472,19 @@ const endpoints: Endpoint[] = [
 		}
 	},
 	{
-		name: 'posts/trend',
+		name: 'notes/trend',
 		withCredential: true
 	},
 	{
-		name: 'posts/categorize',
+		name: 'notes/categorize',
 		withCredential: true
 	},
 	{
-		name: 'posts/reactions',
+		name: 'notes/reactions',
 		withCredential: true
 	},
 	{
-		name: 'posts/reactions/create',
+		name: 'notes/reactions/create',
 		withCredential: true,
 		limit: {
 			duration: ms('1hour'),
@@ -493,7 +493,7 @@ const endpoints: Endpoint[] = [
 		kind: 'reaction-write'
 	},
 	{
-		name: 'posts/reactions/delete',
+		name: 'notes/reactions/delete',
 		withCredential: true,
 		limit: {
 			duration: ms('1hour'),
@@ -502,7 +502,7 @@ const endpoints: Endpoint[] = [
 		kind: 'reaction-write'
 	},
 	{
-		name: 'posts/favorites/create',
+		name: 'notes/favorites/create',
 		withCredential: true,
 		limit: {
 			duration: ms('1hour'),
@@ -511,7 +511,7 @@ const endpoints: Endpoint[] = [
 		kind: 'favorite-write'
 	},
 	{
-		name: 'posts/favorites/delete',
+		name: 'notes/favorites/delete',
 		withCredential: true,
 		limit: {
 			duration: ms('1hour'),
@@ -520,7 +520,7 @@ const endpoints: Endpoint[] = [
 		kind: 'favorite-write'
 	},
 	{
-		name: 'posts/polls/vote',
+		name: 'notes/polls/vote',
 		withCredential: true,
 		limit: {
 			duration: ms('1hour'),
@@ -529,7 +529,7 @@ const endpoints: Endpoint[] = [
 		kind: 'vote-write'
 	},
 	{
-		name: 'posts/polls/recommendation',
+		name: 'notes/polls/recommendation',
 		withCredential: true
 	},
 
@@ -566,7 +566,7 @@ const endpoints: Endpoint[] = [
 		name: 'channels/show'
 	},
 	{
-		name: 'channels/posts'
+		name: 'channels/notes'
 	},
 	{
 		name: 'channels/watch',
diff --git a/src/server/api/endpoints/aggregation/notes/reaction.ts b/src/server/api/endpoints/aggregation/notes/reaction.ts
new file mode 100644
index 0000000000..586e8c2d85
--- /dev/null
+++ b/src/server/api/endpoints/aggregation/notes/reaction.ts
@@ -0,0 +1,76 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import Note from '../../../../../models/note';
+import Reaction from '../../../../../models/note-reaction';
+
+/**
+ * Aggregate reaction of a note
+ *
+ * @param {any} params
+ * @return {Promise<any>}
+ */
+module.exports = (params) => new Promise(async (res, rej) => {
+	// Get 'noteId' parameter
+	const [noteId, noteIdErr] = $(params.noteId).id().$;
+	if (noteIdErr) return rej('invalid noteId param');
+
+	// Lookup note
+	const note = await Note.findOne({
+		_id: noteId
+	});
+
+	if (note === null) {
+		return rej('note not found');
+	}
+
+	const datas = await Reaction
+		.aggregate([
+			{ $match: { noteId: note._id } },
+			{ $project: {
+				createdAt: { $add: ['$createdAt', 9 * 60 * 60 * 1000] } // Convert into JST
+			}},
+			{ $project: {
+				date: {
+					year: { $year: '$createdAt' },
+					month: { $month: '$createdAt' },
+					day: { $dayOfMonth: '$createdAt' }
+				}
+			}},
+			{ $group: {
+				_id: '$date',
+				count: { $sum: 1 }
+			}}
+		]);
+
+	datas.forEach(data => {
+		data.date = data._id;
+		delete data._id;
+	});
+
+	const graph = [];
+
+	for (let i = 0; i < 30; i++) {
+		const day = new Date(new Date().setDate(new Date().getDate() - i));
+
+		const data = datas.filter(d =>
+			d.date.year == day.getFullYear() && d.date.month == day.getMonth() + 1 && d.date.day == day.getDate()
+		)[0];
+
+		if (data) {
+			graph.push(data);
+		} else {
+			graph.push({
+				date: {
+					year: day.getFullYear(),
+					month: day.getMonth() + 1, // In JavaScript, month is zero-based.
+					day: day.getDate()
+				},
+				count: 0
+			});
+		}
+	}
+
+	res(graph);
+});
diff --git a/src/server/api/endpoints/aggregation/notes/reactions.ts b/src/server/api/endpoints/aggregation/notes/reactions.ts
new file mode 100644
index 0000000000..ff9491292e
--- /dev/null
+++ b/src/server/api/endpoints/aggregation/notes/reactions.ts
@@ -0,0 +1,72 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import Note from '../../../../../models/note';
+import Reaction from '../../../../../models/note-reaction';
+
+/**
+ * Aggregate reactions of a note
+ *
+ * @param {any} params
+ * @return {Promise<any>}
+ */
+module.exports = (params) => new Promise(async (res, rej) => {
+	// Get 'noteId' parameter
+	const [noteId, noteIdErr] = $(params.noteId).id().$;
+	if (noteIdErr) return rej('invalid noteId param');
+
+	// Lookup note
+	const note = await Note.findOne({
+		_id: noteId
+	});
+
+	if (note === null) {
+		return rej('note not found');
+	}
+
+	const startTime = new Date(new Date().setMonth(new Date().getMonth() - 1));
+
+	const reactions = await Reaction
+		.find({
+			noteId: note._id,
+			$or: [
+				{ deletedAt: { $exists: false } },
+				{ deletedAt: { $gt: startTime } }
+			]
+		}, {
+			sort: {
+				_id: -1
+			},
+			fields: {
+				_id: false,
+				noteId: false
+			}
+		});
+
+	const graph = [];
+
+	for (let i = 0; i < 30; i++) {
+		let day = new Date(new Date().setDate(new Date().getDate() - i));
+		day = new Date(day.setMilliseconds(999));
+		day = new Date(day.setSeconds(59));
+		day = new Date(day.setMinutes(59));
+		day = new Date(day.setHours(23));
+		// day = day.getTime();
+
+		const count = reactions.filter(r =>
+			r.createdAt < day && (r.deletedAt == null || r.deletedAt > day)
+		).length;
+
+		graph.push({
+			date: {
+				year: day.getFullYear(),
+				month: day.getMonth() + 1, // In JavaScript, month is zero-based.
+				day: day.getDate()
+			},
+			count: count
+		});
+	}
+
+	res(graph);
+});
diff --git a/src/server/api/endpoints/aggregation/notes/reply.ts b/src/server/api/endpoints/aggregation/notes/reply.ts
new file mode 100644
index 0000000000..42df95a9a5
--- /dev/null
+++ b/src/server/api/endpoints/aggregation/notes/reply.ts
@@ -0,0 +1,75 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import Note from '../../../../../models/note';
+
+/**
+ * Aggregate reply of a note
+ *
+ * @param {any} params
+ * @return {Promise<any>}
+ */
+module.exports = (params) => new Promise(async (res, rej) => {
+	// Get 'noteId' parameter
+	const [noteId, noteIdErr] = $(params.noteId).id().$;
+	if (noteIdErr) return rej('invalid noteId param');
+
+	// Lookup note
+	const note = await Note.findOne({
+		_id: noteId
+	});
+
+	if (note === null) {
+		return rej('note not found');
+	}
+
+	const datas = await Note
+		.aggregate([
+			{ $match: { reply: note._id } },
+			{ $project: {
+				createdAt: { $add: ['$createdAt', 9 * 60 * 60 * 1000] } // Convert into JST
+			}},
+			{ $project: {
+				date: {
+					year: { $year: '$createdAt' },
+					month: { $month: '$createdAt' },
+					day: { $dayOfMonth: '$createdAt' }
+				}
+			}},
+			{ $group: {
+				_id: '$date',
+				count: { $sum: 1 }
+			}}
+		]);
+
+	datas.forEach(data => {
+		data.date = data._id;
+		delete data._id;
+	});
+
+	const graph = [];
+
+	for (let i = 0; i < 30; i++) {
+		const day = new Date(new Date().setDate(new Date().getDate() - i));
+
+		const data = datas.filter(d =>
+			d.date.year == day.getFullYear() && d.date.month == day.getMonth() + 1 && d.date.day == day.getDate()
+		)[0];
+
+		if (data) {
+			graph.push(data);
+		} else {
+			graph.push({
+				date: {
+					year: day.getFullYear(),
+					month: day.getMonth() + 1, // In JavaScript, month is zero-based.
+					day: day.getDate()
+				},
+				count: 0
+			});
+		}
+	}
+
+	res(graph);
+});
diff --git a/src/server/api/endpoints/aggregation/notes/repost.ts b/src/server/api/endpoints/aggregation/notes/repost.ts
new file mode 100644
index 0000000000..feb3348a7e
--- /dev/null
+++ b/src/server/api/endpoints/aggregation/notes/repost.ts
@@ -0,0 +1,75 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import Note from '../../../../../models/note';
+
+/**
+ * Aggregate renote of a note
+ *
+ * @param {any} params
+ * @return {Promise<any>}
+ */
+module.exports = (params) => new Promise(async (res, rej) => {
+	// Get 'noteId' parameter
+	const [noteId, noteIdErr] = $(params.noteId).id().$;
+	if (noteIdErr) return rej('invalid noteId param');
+
+	// Lookup note
+	const note = await Note.findOne({
+		_id: noteId
+	});
+
+	if (note === null) {
+		return rej('note not found');
+	}
+
+	const datas = await Note
+		.aggregate([
+			{ $match: { renoteId: note._id } },
+			{ $project: {
+				createdAt: { $add: ['$createdAt', 9 * 60 * 60 * 1000] } // Convert into JST
+			}},
+			{ $project: {
+				date: {
+					year: { $year: '$createdAt' },
+					month: { $month: '$createdAt' },
+					day: { $dayOfMonth: '$createdAt' }
+				}
+			}},
+			{ $group: {
+				_id: '$date',
+				count: { $sum: 1 }
+			}}
+		]);
+
+	datas.forEach(data => {
+		data.date = data._id;
+		delete data._id;
+	});
+
+	const graph = [];
+
+	for (let i = 0; i < 30; i++) {
+		const day = new Date(new Date().setDate(new Date().getDate() - i));
+
+		const data = datas.filter(d =>
+			d.date.year == day.getFullYear() && d.date.month == day.getMonth() + 1 && d.date.day == day.getDate()
+		)[0];
+
+		if (data) {
+			graph.push(data);
+		} else {
+			graph.push({
+				date: {
+					year: day.getFullYear(),
+					month: day.getMonth() + 1, // In JavaScript, month is zero-based.
+					day: day.getDate()
+				},
+				count: 0
+			});
+		}
+	}
+
+	res(graph);
+});
diff --git a/src/server/api/endpoints/aggregation/posts.ts b/src/server/api/endpoints/aggregation/posts.ts
index f4d401eda0..cc2a48b53d 100644
--- a/src/server/api/endpoints/aggregation/posts.ts
+++ b/src/server/api/endpoints/aggregation/posts.ts
@@ -2,10 +2,10 @@
  * Module dependencies
  */
 import $ from 'cafy';
-import Post from '../../../../models/post';
+import Note from '../../../../models/note';
 
 /**
- * Aggregate posts
+ * Aggregate notes
  *
  * @param {any} params
  * @return {Promise<any>}
@@ -15,10 +15,10 @@ module.exports = params => new Promise(async (res, rej) => {
 	const [limit = 365, limitErr] = $(params.limit).optional.number().range(1, 365).$;
 	if (limitErr) return rej('invalid limit param');
 
-	const datas = await Post
+	const datas = await Note
 		.aggregate([
 			{ $project: {
-				repostId: '$repostId',
+				renoteId: '$renoteId',
 				replyId: '$replyId',
 				createdAt: { $add: ['$createdAt', 9 * 60 * 60 * 1000] } // Convert into JST
 			}},
@@ -30,13 +30,13 @@ module.exports = params => new Promise(async (res, rej) => {
 				},
 				type: {
 					$cond: {
-						if: { $ne: ['$repostId', null] },
-						then: 'repost',
+						if: { $ne: ['$renoteId', null] },
+						then: 'renote',
 						else: {
 							$cond: {
 								if: { $ne: ['$replyId', null] },
 								then: 'reply',
-								else: 'post'
+								else: 'note'
 							}
 						}
 					}
@@ -59,8 +59,8 @@ module.exports = params => new Promise(async (res, rej) => {
 		data.date = data._id;
 		delete data._id;
 
-		data.posts = (data.data.filter(x => x.type == 'post')[0] || { count: 0 }).count;
-		data.reposts = (data.data.filter(x => x.type == 'repost')[0] || { count: 0 }).count;
+		data.notes = (data.data.filter(x => x.type == 'note')[0] || { count: 0 }).count;
+		data.renotes = (data.data.filter(x => x.type == 'renote')[0] || { count: 0 }).count;
 		data.replies = (data.data.filter(x => x.type == 'reply')[0] || { count: 0 }).count;
 
 		delete data.data;
@@ -79,8 +79,8 @@ module.exports = params => new Promise(async (res, rej) => {
 			graph.push(data);
 		} else {
 			graph.push({
-				posts: 0,
-				reposts: 0,
+				notes: 0,
+				renotes: 0,
 				replies: 0
 			});
 		}
diff --git a/src/server/api/endpoints/aggregation/posts/reaction.ts b/src/server/api/endpoints/aggregation/posts/reaction.ts
deleted file mode 100644
index e622745337..0000000000
--- a/src/server/api/endpoints/aggregation/posts/reaction.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-import Post from '../../../../../models/post';
-import Reaction from '../../../../../models/post-reaction';
-
-/**
- * Aggregate reaction of a post
- *
- * @param {any} params
- * @return {Promise<any>}
- */
-module.exports = (params) => new Promise(async (res, rej) => {
-	// Get 'postId' parameter
-	const [postId, postIdErr] = $(params.postId).id().$;
-	if (postIdErr) return rej('invalid postId param');
-
-	// Lookup post
-	const post = await Post.findOne({
-		_id: postId
-	});
-
-	if (post === null) {
-		return rej('post not found');
-	}
-
-	const datas = await Reaction
-		.aggregate([
-			{ $match: { postId: post._id } },
-			{ $project: {
-				createdAt: { $add: ['$createdAt', 9 * 60 * 60 * 1000] } // Convert into JST
-			}},
-			{ $project: {
-				date: {
-					year: { $year: '$createdAt' },
-					month: { $month: '$createdAt' },
-					day: { $dayOfMonth: '$createdAt' }
-				}
-			}},
-			{ $group: {
-				_id: '$date',
-				count: { $sum: 1 }
-			}}
-		]);
-
-	datas.forEach(data => {
-		data.date = data._id;
-		delete data._id;
-	});
-
-	const graph = [];
-
-	for (let i = 0; i < 30; i++) {
-		const day = new Date(new Date().setDate(new Date().getDate() - i));
-
-		const data = datas.filter(d =>
-			d.date.year == day.getFullYear() && d.date.month == day.getMonth() + 1 && d.date.day == day.getDate()
-		)[0];
-
-		if (data) {
-			graph.push(data);
-		} else {
-			graph.push({
-				date: {
-					year: day.getFullYear(),
-					month: day.getMonth() + 1, // In JavaScript, month is zero-based.
-					day: day.getDate()
-				},
-				count: 0
-			});
-		}
-	}
-
-	res(graph);
-});
diff --git a/src/server/api/endpoints/aggregation/posts/reactions.ts b/src/server/api/endpoints/aggregation/posts/reactions.ts
deleted file mode 100644
index 5f23e296fd..0000000000
--- a/src/server/api/endpoints/aggregation/posts/reactions.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-import Post from '../../../../../models/post';
-import Reaction from '../../../../../models/post-reaction';
-
-/**
- * Aggregate reactions of a post
- *
- * @param {any} params
- * @return {Promise<any>}
- */
-module.exports = (params) => new Promise(async (res, rej) => {
-	// Get 'postId' parameter
-	const [postId, postIdErr] = $(params.postId).id().$;
-	if (postIdErr) return rej('invalid postId param');
-
-	// Lookup post
-	const post = await Post.findOne({
-		_id: postId
-	});
-
-	if (post === null) {
-		return rej('post not found');
-	}
-
-	const startTime = new Date(new Date().setMonth(new Date().getMonth() - 1));
-
-	const reactions = await Reaction
-		.find({
-			postId: post._id,
-			$or: [
-				{ deletedAt: { $exists: false } },
-				{ deletedAt: { $gt: startTime } }
-			]
-		}, {
-			sort: {
-				_id: -1
-			},
-			fields: {
-				_id: false,
-				postId: false
-			}
-		});
-
-	const graph = [];
-
-	for (let i = 0; i < 30; i++) {
-		let day = new Date(new Date().setDate(new Date().getDate() - i));
-		day = new Date(day.setMilliseconds(999));
-		day = new Date(day.setSeconds(59));
-		day = new Date(day.setMinutes(59));
-		day = new Date(day.setHours(23));
-		// day = day.getTime();
-
-		const count = reactions.filter(r =>
-			r.createdAt < day && (r.deletedAt == null || r.deletedAt > day)
-		).length;
-
-		graph.push({
-			date: {
-				year: day.getFullYear(),
-				month: day.getMonth() + 1, // In JavaScript, month is zero-based.
-				day: day.getDate()
-			},
-			count: count
-		});
-	}
-
-	res(graph);
-});
diff --git a/src/server/api/endpoints/aggregation/posts/reply.ts b/src/server/api/endpoints/aggregation/posts/reply.ts
deleted file mode 100644
index c76191e86b..0000000000
--- a/src/server/api/endpoints/aggregation/posts/reply.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-import Post from '../../../../../models/post';
-
-/**
- * Aggregate reply of a post
- *
- * @param {any} params
- * @return {Promise<any>}
- */
-module.exports = (params) => new Promise(async (res, rej) => {
-	// Get 'postId' parameter
-	const [postId, postIdErr] = $(params.postId).id().$;
-	if (postIdErr) return rej('invalid postId param');
-
-	// Lookup post
-	const post = await Post.findOne({
-		_id: postId
-	});
-
-	if (post === null) {
-		return rej('post not found');
-	}
-
-	const datas = await Post
-		.aggregate([
-			{ $match: { reply: post._id } },
-			{ $project: {
-				createdAt: { $add: ['$createdAt', 9 * 60 * 60 * 1000] } // Convert into JST
-			}},
-			{ $project: {
-				date: {
-					year: { $year: '$createdAt' },
-					month: { $month: '$createdAt' },
-					day: { $dayOfMonth: '$createdAt' }
-				}
-			}},
-			{ $group: {
-				_id: '$date',
-				count: { $sum: 1 }
-			}}
-		]);
-
-	datas.forEach(data => {
-		data.date = data._id;
-		delete data._id;
-	});
-
-	const graph = [];
-
-	for (let i = 0; i < 30; i++) {
-		const day = new Date(new Date().setDate(new Date().getDate() - i));
-
-		const data = datas.filter(d =>
-			d.date.year == day.getFullYear() && d.date.month == day.getMonth() + 1 && d.date.day == day.getDate()
-		)[0];
-
-		if (data) {
-			graph.push(data);
-		} else {
-			graph.push({
-				date: {
-					year: day.getFullYear(),
-					month: day.getMonth() + 1, // In JavaScript, month is zero-based.
-					day: day.getDate()
-				},
-				count: 0
-			});
-		}
-	}
-
-	res(graph);
-});
diff --git a/src/server/api/endpoints/aggregation/posts/repost.ts b/src/server/api/endpoints/aggregation/posts/repost.ts
deleted file mode 100644
index a203605ebf..0000000000
--- a/src/server/api/endpoints/aggregation/posts/repost.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-import Post from '../../../../../models/post';
-
-/**
- * Aggregate repost of a post
- *
- * @param {any} params
- * @return {Promise<any>}
- */
-module.exports = (params) => new Promise(async (res, rej) => {
-	// Get 'postId' parameter
-	const [postId, postIdErr] = $(params.postId).id().$;
-	if (postIdErr) return rej('invalid postId param');
-
-	// Lookup post
-	const post = await Post.findOne({
-		_id: postId
-	});
-
-	if (post === null) {
-		return rej('post not found');
-	}
-
-	const datas = await Post
-		.aggregate([
-			{ $match: { repostId: post._id } },
-			{ $project: {
-				createdAt: { $add: ['$createdAt', 9 * 60 * 60 * 1000] } // Convert into JST
-			}},
-			{ $project: {
-				date: {
-					year: { $year: '$createdAt' },
-					month: { $month: '$createdAt' },
-					day: { $dayOfMonth: '$createdAt' }
-				}
-			}},
-			{ $group: {
-				_id: '$date',
-				count: { $sum: 1 }
-			}}
-		]);
-
-	datas.forEach(data => {
-		data.date = data._id;
-		delete data._id;
-	});
-
-	const graph = [];
-
-	for (let i = 0; i < 30; i++) {
-		const day = new Date(new Date().setDate(new Date().getDate() - i));
-
-		const data = datas.filter(d =>
-			d.date.year == day.getFullYear() && d.date.month == day.getMonth() + 1 && d.date.day == day.getDate()
-		)[0];
-
-		if (data) {
-			graph.push(data);
-		} else {
-			graph.push({
-				date: {
-					year: day.getFullYear(),
-					month: day.getMonth() + 1, // In JavaScript, month is zero-based.
-					day: day.getDate()
-				},
-				count: 0
-			});
-		}
-	}
-
-	res(graph);
-});
diff --git a/src/server/api/endpoints/aggregation/users/activity.ts b/src/server/api/endpoints/aggregation/users/activity.ts
index cef0072296..318cce77a5 100644
--- a/src/server/api/endpoints/aggregation/users/activity.ts
+++ b/src/server/api/endpoints/aggregation/users/activity.ts
@@ -3,7 +3,7 @@
  */
 import $ from 'cafy';
 import User from '../../../../../models/user';
-import Post from '../../../../../models/post';
+import Note from '../../../../../models/note';
 
 // TODO: likeやfollowも集計
 
@@ -35,11 +35,11 @@ module.exports = (params) => new Promise(async (res, rej) => {
 		return rej('user not found');
 	}
 
-	const datas = await Post
+	const datas = await Note
 		.aggregate([
 			{ $match: { userId: user._id } },
 			{ $project: {
-				repostId: '$repostId',
+				renoteId: '$renoteId',
 				replyId: '$replyId',
 				createdAt: { $add: ['$createdAt', 9 * 60 * 60 * 1000] } // Convert into JST
 			}},
@@ -51,13 +51,13 @@ module.exports = (params) => new Promise(async (res, rej) => {
 				},
 				type: {
 					$cond: {
-						if: { $ne: ['$repostId', null] },
-						then: 'repost',
+						if: { $ne: ['$renoteId', null] },
+						then: 'renote',
 						else: {
 							$cond: {
 								if: { $ne: ['$replyId', null] },
 								then: 'reply',
-								else: 'post'
+								else: 'note'
 							}
 						}
 					}
@@ -80,8 +80,8 @@ module.exports = (params) => new Promise(async (res, rej) => {
 		data.date = data._id;
 		delete data._id;
 
-		data.posts = (data.data.filter(x => x.type == 'post')[0] || { count: 0 }).count;
-		data.reposts = (data.data.filter(x => x.type == 'repost')[0] || { count: 0 }).count;
+		data.notes = (data.data.filter(x => x.type == 'note')[0] || { count: 0 }).count;
+		data.renotes = (data.data.filter(x => x.type == 'renote')[0] || { count: 0 }).count;
 		data.replies = (data.data.filter(x => x.type == 'reply')[0] || { count: 0 }).count;
 
 		delete data.data;
@@ -105,8 +105,8 @@ module.exports = (params) => new Promise(async (res, rej) => {
 					month: day.getMonth() + 1, // In JavaScript, month is zero-based.
 					day: day.getDate()
 				},
-				posts: 0,
-				reposts: 0,
+				notes: 0,
+				renotes: 0,
 				replies: 0
 			});
 		}
diff --git a/src/server/api/endpoints/aggregation/users/post.ts b/src/server/api/endpoints/aggregation/users/post.ts
index 13617cf639..e6170d83e2 100644
--- a/src/server/api/endpoints/aggregation/users/post.ts
+++ b/src/server/api/endpoints/aggregation/users/post.ts
@@ -3,10 +3,10 @@
  */
 import $ from 'cafy';
 import User from '../../../../../models/user';
-import Post from '../../../../../models/post';
+import Note from '../../../../../models/note';
 
 /**
- * Aggregate post of a user
+ * Aggregate note of a user
  *
  * @param {any} params
  * @return {Promise<any>}
@@ -29,11 +29,11 @@ module.exports = (params) => new Promise(async (res, rej) => {
 		return rej('user not found');
 	}
 
-	const datas = await Post
+	const datas = await Note
 		.aggregate([
 			{ $match: { userId: user._id } },
 			{ $project: {
-				repostId: '$repostId',
+				renoteId: '$renoteId',
 				replyId: '$replyId',
 				createdAt: { $add: ['$createdAt', 9 * 60 * 60 * 1000] } // Convert into JST
 			}},
@@ -45,13 +45,13 @@ module.exports = (params) => new Promise(async (res, rej) => {
 				},
 				type: {
 					$cond: {
-						if: { $ne: ['$repostId', null] },
-						then: 'repost',
+						if: { $ne: ['$renoteId', null] },
+						then: 'renote',
 						else: {
 							$cond: {
 								if: { $ne: ['$replyId', null] },
 								then: 'reply',
-								else: 'post'
+								else: 'note'
 							}
 						}
 					}
@@ -74,8 +74,8 @@ module.exports = (params) => new Promise(async (res, rej) => {
 		data.date = data._id;
 		delete data._id;
 
-		data.posts = (data.data.filter(x => x.type == 'post')[0] || { count: 0 }).count;
-		data.reposts = (data.data.filter(x => x.type == 'repost')[0] || { count: 0 }).count;
+		data.notes = (data.data.filter(x => x.type == 'note')[0] || { count: 0 }).count;
+		data.renotes = (data.data.filter(x => x.type == 'renote')[0] || { count: 0 }).count;
 		data.replies = (data.data.filter(x => x.type == 'reply')[0] || { count: 0 }).count;
 
 		delete data.data;
@@ -99,8 +99,8 @@ module.exports = (params) => new Promise(async (res, rej) => {
 					month: day.getMonth() + 1, // In JavaScript, month is zero-based.
 					day: day.getDate()
 				},
-				posts: 0,
-				reposts: 0,
+				notes: 0,
+				renotes: 0,
 				replies: 0
 			});
 		}
diff --git a/src/server/api/endpoints/aggregation/users/reaction.ts b/src/server/api/endpoints/aggregation/users/reaction.ts
index 0c42ba3360..881c7ea693 100644
--- a/src/server/api/endpoints/aggregation/users/reaction.ts
+++ b/src/server/api/endpoints/aggregation/users/reaction.ts
@@ -3,7 +3,7 @@
  */
 import $ from 'cafy';
 import User from '../../../../../models/user';
-import Reaction from '../../../../../models/post-reaction';
+import Reaction from '../../../../../models/note-reaction';
 
 /**
  * Aggregate reaction of a user
diff --git a/src/server/api/endpoints/app/create.ts b/src/server/api/endpoints/app/create.ts
index f2033d33f6..4a55d33f2d 100644
--- a/src/server/api/endpoints/app/create.ts
+++ b/src/server/api/endpoints/app/create.ts
@@ -8,7 +8,7 @@ import App, { isValidNameId, pack } from '../../../../models/app';
 /**
  * @swagger
  * /app/create:
- *   post:
+ *   note:
  *     summary: Create an application
  *     parameters:
  *       - $ref: "#/parameters/AccessToken"
diff --git a/src/server/api/endpoints/app/name_id/available.ts b/src/server/api/endpoints/app/name_id/available.ts
index 93b33cfa20..ec2d692412 100644
--- a/src/server/api/endpoints/app/name_id/available.ts
+++ b/src/server/api/endpoints/app/name_id/available.ts
@@ -8,7 +8,7 @@ import { isValidNameId } from '../../../../../models/app';
 /**
  * @swagger
  * /app/nameId/available:
- *   post:
+ *   note:
  *     summary: Check available nameId on creation an application
  *     parameters:
  *       -
diff --git a/src/server/api/endpoints/app/show.ts b/src/server/api/endpoints/app/show.ts
index 7c8d2881d5..3a3c25f47c 100644
--- a/src/server/api/endpoints/app/show.ts
+++ b/src/server/api/endpoints/app/show.ts
@@ -7,7 +7,7 @@ import App, { pack } from '../../../../models/app';
 /**
  * @swagger
  * /app/show:
- *   post:
+ *   note:
  *     summary: Show an application's information
  *     description: Require appId or nameId
  *     parameters:
diff --git a/src/server/api/endpoints/auth/accept.ts b/src/server/api/endpoints/auth/accept.ts
index aeabac2db8..b6297d663d 100644
--- a/src/server/api/endpoints/auth/accept.ts
+++ b/src/server/api/endpoints/auth/accept.ts
@@ -11,7 +11,7 @@ import AccessToken from '../../../../models/access-token';
 /**
  * @swagger
  * /auth/accept:
- *   post:
+ *   note:
  *     summary: Accept a session
  *     parameters:
  *       - $ref: "#/parameters/NativeToken"
diff --git a/src/server/api/endpoints/auth/session/generate.ts b/src/server/api/endpoints/auth/session/generate.ts
index 9857b31d87..7c475dbe26 100644
--- a/src/server/api/endpoints/auth/session/generate.ts
+++ b/src/server/api/endpoints/auth/session/generate.ts
@@ -10,7 +10,7 @@ import config from '../../../../../config';
 /**
  * @swagger
  * /auth/session/generate:
- *   post:
+ *   note:
  *     summary: Generate a session
  *     parameters:
  *       -
diff --git a/src/server/api/endpoints/auth/session/show.ts b/src/server/api/endpoints/auth/session/show.ts
index f473d73973..f7f0b087b7 100644
--- a/src/server/api/endpoints/auth/session/show.ts
+++ b/src/server/api/endpoints/auth/session/show.ts
@@ -7,7 +7,7 @@ import AuthSess, { pack } from '../../../../../models/auth-session';
 /**
  * @swagger
  * /auth/session/show:
- *   post:
+ *   note:
  *     summary: Show a session information
  *     parameters:
  *       -
diff --git a/src/server/api/endpoints/auth/session/userkey.ts b/src/server/api/endpoints/auth/session/userkey.ts
index 7dbb5ea6e8..ddb67cb451 100644
--- a/src/server/api/endpoints/auth/session/userkey.ts
+++ b/src/server/api/endpoints/auth/session/userkey.ts
@@ -10,7 +10,7 @@ import { pack } from '../../../../../models/user';
 /**
  * @swagger
  * /auth/session/userkey:
- *   post:
+ *   note:
  *     summary: Get an access token(userkey)
  *     parameters:
  *       -
diff --git a/src/server/api/endpoints/channels/posts.ts b/src/server/api/endpoints/channels/posts.ts
index e48f96da7e..d636aa0d10 100644
--- a/src/server/api/endpoints/channels/posts.ts
+++ b/src/server/api/endpoints/channels/posts.ts
@@ -3,10 +3,10 @@
  */
 import $ from 'cafy';
 import { default as Channel, IChannel } from '../../../../models/channel';
-import Post, { pack } from '../../../../models/post';
+import Note, { pack } from '../../../../models/note';
 
 /**
- * Show a posts of a channel
+ * Show a notes of a channel
  *
  * @param {any} params
  * @param {any} user
@@ -65,14 +65,14 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	//#endregion Construct query
 
 	// Issue query
-	const posts = await Post
+	const notes = await Note
 		.find(query, {
 			limit: limit,
 			sort: sort
 		});
 
 	// Serialize
-	res(await Promise.all(posts.map(async (post) =>
-		await pack(post, user)
+	res(await Promise.all(notes.map(async (note) =>
+		await pack(note, user)
 	)));
 });
diff --git a/src/server/api/endpoints/i/favorites.ts b/src/server/api/endpoints/i/favorites.ts
index 0b594e3180..b40f2b3887 100644
--- a/src/server/api/endpoints/i/favorites.ts
+++ b/src/server/api/endpoints/i/favorites.ts
@@ -3,7 +3,7 @@
  */
 import $ from 'cafy';
 import Favorite from '../../../../models/favorite';
-import { pack } from '../../../../models/post';
+import { pack } from '../../../../models/note';
 
 /**
  * Get followers of a user
@@ -39,6 +39,6 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 
 	// Serialize
 	res(await Promise.all(favorites.map(async favorite =>
-		await pack(favorite.postId)
+		await pack(favorite.noteId)
 	)));
 });
diff --git a/src/server/api/endpoints/i/pin.ts b/src/server/api/endpoints/i/pin.ts
index 2a57579772..909a6fdbde 100644
--- a/src/server/api/endpoints/i/pin.ts
+++ b/src/server/api/endpoints/i/pin.ts
@@ -3,34 +3,34 @@
  */
 import $ from 'cafy';
 import User from '../../../../models/user';
-import Post from '../../../../models/post';
+import Note from '../../../../models/note';
 import { pack } from '../../../../models/user';
 
 /**
- * Pin post
+ * Pin note
  *
  * @param {any} params
  * @param {any} user
  * @return {Promise<any>}
  */
 module.exports = async (params, user) => new Promise(async (res, rej) => {
-	// Get 'postId' parameter
-	const [postId, postIdErr] = $(params.postId).id().$;
-	if (postIdErr) return rej('invalid postId param');
+	// Get 'noteId' parameter
+	const [noteId, noteIdErr] = $(params.noteId).id().$;
+	if (noteIdErr) return rej('invalid noteId param');
 
 	// Fetch pinee
-	const post = await Post.findOne({
-		_id: postId,
+	const note = await Note.findOne({
+		_id: noteId,
 		userId: user._id
 	});
 
-	if (post === null) {
-		return rej('post not found');
+	if (note === null) {
+		return rej('note not found');
 	}
 
 	await User.update(user._id, {
 		$set: {
-			pinnedPostId: post._id
+			pinnedNoteId: note._id
 		}
 	});
 
diff --git a/src/server/api/endpoints/meta.ts b/src/server/api/endpoints/meta.ts
index 70ae7e99cc..8574362fc8 100644
--- a/src/server/api/endpoints/meta.ts
+++ b/src/server/api/endpoints/meta.ts
@@ -9,7 +9,7 @@ import Meta from '../../../models/meta';
 /**
  * @swagger
  * /meta:
- *   post:
+ *   note:
  *     summary: Show the misskey's information
  *     responses:
  *       200:
diff --git a/src/server/api/endpoints/notes/context.ts b/src/server/api/endpoints/notes/context.ts
new file mode 100644
index 0000000000..2caf742d26
--- /dev/null
+++ b/src/server/api/endpoints/notes/context.ts
@@ -0,0 +1,63 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import Note, { pack } from '../../../../models/note';
+
+/**
+ * Show a context of a note
+ *
+ * @param {any} params
+ * @param {any} user
+ * @return {Promise<any>}
+ */
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'noteId' parameter
+	const [noteId, noteIdErr] = $(params.noteId).id().$;
+	if (noteIdErr) return rej('invalid noteId param');
+
+	// Get 'limit' parameter
+	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
+	if (limitErr) return rej('invalid limit param');
+
+	// Get 'offset' parameter
+	const [offset = 0, offsetErr] = $(params.offset).optional.number().min(0).$;
+	if (offsetErr) return rej('invalid offset param');
+
+	// Lookup note
+	const note = await Note.findOne({
+		_id: noteId
+	});
+
+	if (note === null) {
+		return rej('note not found');
+	}
+
+	const context = [];
+	let i = 0;
+
+	async function get(id) {
+		i++;
+		const p = await Note.findOne({ _id: id });
+
+		if (i > offset) {
+			context.push(p);
+		}
+
+		if (context.length == limit) {
+			return;
+		}
+
+		if (p.replyId) {
+			await get(p.replyId);
+		}
+	}
+
+	if (note.replyId) {
+		await get(note.replyId);
+	}
+
+	// Serialize
+	res(await Promise.all(context.map(async note =>
+		await pack(note, user))));
+});
diff --git a/src/server/api/endpoints/notes/create.ts b/src/server/api/endpoints/notes/create.ts
new file mode 100644
index 0000000000..7e79912b1b
--- /dev/null
+++ b/src/server/api/endpoints/notes/create.ts
@@ -0,0 +1,251 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import deepEqual = require('deep-equal');
+import Note, { INote, isValidText, isValidCw, pack } from '../../../../models/note';
+import { ILocalUser } from '../../../../models/user';
+import Channel, { IChannel } from '../../../../models/channel';
+import DriveFile from '../../../../models/drive-file';
+import create from '../../../../services/note/create';
+import { IApp } from '../../../../models/app';
+
+/**
+ * Create a note
+ *
+ * @param {any} params
+ * @param {any} user
+ * @param {any} app
+ * @return {Promise<any>}
+ */
+module.exports = (params, user: ILocalUser, app: IApp) => new Promise(async (res, rej) => {
+	// Get 'visibility' parameter
+	const [visibility = 'public', visibilityErr] = $(params.visibility).optional.string().or(['public', 'unlisted', 'private', 'direct']).$;
+	if (visibilityErr) return rej('invalid visibility');
+
+	// Get 'text' parameter
+	const [text, textErr] = $(params.text).optional.string().pipe(isValidText).$;
+	if (textErr) return rej('invalid text');
+
+	// Get 'cw' parameter
+	const [cw, cwErr] = $(params.cw).optional.string().pipe(isValidCw).$;
+	if (cwErr) return rej('invalid cw');
+
+	// Get 'viaMobile' parameter
+	const [viaMobile = false, viaMobileErr] = $(params.viaMobile).optional.boolean().$;
+	if (viaMobileErr) return rej('invalid viaMobile');
+
+	// Get 'tags' parameter
+	const [tags = [], tagsErr] = $(params.tags).optional.array('string').unique().eachQ(t => t.range(1, 32)).$;
+	if (tagsErr) return rej('invalid tags');
+
+	// Get 'geo' parameter
+	const [geo, geoErr] = $(params.geo).optional.nullable.strict.object()
+		.have('coordinates', $().array().length(2)
+			.item(0, $().number().range(-180, 180))
+			.item(1, $().number().range(-90, 90)))
+		.have('altitude', $().nullable.number())
+		.have('accuracy', $().nullable.number())
+		.have('altitudeAccuracy', $().nullable.number())
+		.have('heading', $().nullable.number().range(0, 360))
+		.have('speed', $().nullable.number())
+		.$;
+	if (geoErr) return rej('invalid geo');
+
+	// Get 'mediaIds' parameter
+	const [mediaIds, mediaIdsErr] = $(params.mediaIds).optional.array('id').unique().range(1, 4).$;
+	if (mediaIdsErr) return rej('invalid mediaIds');
+
+	let files = [];
+	if (mediaIds !== undefined) {
+		// Fetch files
+		// forEach だと途中でエラーなどがあっても return できないので
+		// 敢えて for を使っています。
+		for (const mediaId of mediaIds) {
+			// Fetch file
+			// SELECT _id
+			const entity = await DriveFile.findOne({
+				_id: mediaId,
+				'metadata.userId': user._id
+			});
+
+			if (entity === null) {
+				return rej('file not found');
+			} else {
+				files.push(entity);
+			}
+		}
+	} else {
+		files = null;
+	}
+
+	// Get 'renoteId' parameter
+	const [renoteId, renoteIdErr] = $(params.renoteId).optional.id().$;
+	if (renoteIdErr) return rej('invalid renoteId');
+
+	let renote: INote = null;
+	let isQuote = false;
+	if (renoteId !== undefined) {
+		// Fetch renote to note
+		renote = await Note.findOne({
+			_id: renoteId
+		});
+
+		if (renote == null) {
+			return rej('renoteee is not found');
+		} else if (renote.renoteId && !renote.text && !renote.mediaIds) {
+			return rej('cannot renote to renote');
+		}
+
+		// Fetch recently note
+		const latestNote = await Note.findOne({
+			userId: user._id
+		}, {
+			sort: {
+				_id: -1
+			}
+		});
+
+		isQuote = text != null || files != null;
+
+		// 直近と同じRenote対象かつ引用じゃなかったらエラー
+		if (latestNote &&
+			latestNote.renoteId &&
+			latestNote.renoteId.equals(renote._id) &&
+			!isQuote) {
+			return rej('cannot renote same note that already reposted in your latest note');
+		}
+
+		// 直近がRenote対象かつ引用じゃなかったらエラー
+		if (latestNote &&
+			latestNote._id.equals(renote._id) &&
+			!isQuote) {
+			return rej('cannot renote your latest note');
+		}
+	}
+
+	// Get 'replyId' parameter
+	const [replyId, replyIdErr] = $(params.replyId).optional.id().$;
+	if (replyIdErr) return rej('invalid replyId');
+
+	let reply: INote = null;
+	if (replyId !== undefined) {
+		// Fetch reply
+		reply = await Note.findOne({
+			_id: replyId
+		});
+
+		if (reply === null) {
+			return rej('in reply to note is not found');
+		}
+
+		// 返信対象が引用でないRenoteだったらエラー
+		if (reply.renoteId && !reply.text && !reply.mediaIds) {
+			return rej('cannot reply to renote');
+		}
+	}
+
+	// Get 'channelId' parameter
+	const [channelId, channelIdErr] = $(params.channelId).optional.id().$;
+	if (channelIdErr) return rej('invalid channelId');
+
+	let channel: IChannel = null;
+	if (channelId !== undefined) {
+		// Fetch channel
+		channel = await Channel.findOne({
+			_id: channelId
+		});
+
+		if (channel === null) {
+			return rej('channel not found');
+		}
+
+		// 返信対象の投稿がこのチャンネルじゃなかったらダメ
+		if (reply && !channelId.equals(reply.channelId)) {
+			return rej('チャンネル内部からチャンネル外部の投稿に返信することはできません');
+		}
+
+		// Renote対象の投稿がこのチャンネルじゃなかったらダメ
+		if (renote && !channelId.equals(renote.channelId)) {
+			return rej('チャンネル内部からチャンネル外部の投稿をRenoteすることはできません');
+		}
+
+		// 引用ではないRenoteはダメ
+		if (renote && !isQuote) {
+			return rej('チャンネル内部では引用ではないRenoteをすることはできません');
+		}
+	} else {
+		// 返信対象の投稿がチャンネルへの投稿だったらダメ
+		if (reply && reply.channelId != null) {
+			return rej('チャンネル外部からチャンネル内部の投稿に返信することはできません');
+		}
+
+		// Renote対象の投稿がチャンネルへの投稿だったらダメ
+		if (renote && renote.channelId != null) {
+			return rej('チャンネル外部からチャンネル内部の投稿をRenoteすることはできません');
+		}
+	}
+
+	// Get 'poll' parameter
+	const [poll, pollErr] = $(params.poll).optional.strict.object()
+		.have('choices', $().array('string')
+			.unique()
+			.range(2, 10)
+			.each(c => c.length > 0 && c.length < 50))
+		.$;
+	if (pollErr) return rej('invalid poll');
+
+	if (poll) {
+		(poll as any).choices = (poll as any).choices.map((choice, i) => ({
+			id: i, // IDを付与
+			text: choice.trim(),
+			votes: 0
+		}));
+	}
+
+	// テキストが無いかつ添付ファイルが無いかつRenoteも無いかつ投票も無かったらエラー
+	if (text === undefined && files === null && renote === null && poll === undefined) {
+		return rej('text, mediaIds, renoteId or poll is required');
+	}
+
+	// 直近の投稿と重複してたらエラー
+	// TODO: 直近の投稿が一日前くらいなら重複とは見なさない
+	if (user.latestNote) {
+		if (deepEqual({
+			text: user.latestNote.text,
+			reply: user.latestNote.replyId ? user.latestNote.replyId.toString() : null,
+			renote: user.latestNote.renoteId ? user.latestNote.renoteId.toString() : null,
+			mediaIds: (user.latestNote.mediaIds || []).map(id => id.toString())
+		}, {
+			text: text,
+			reply: reply ? reply._id.toString() : null,
+			renote: renote ? renote._id.toString() : null,
+			mediaIds: (files || []).map(file => file._id.toString())
+		})) {
+			return rej('duplicate');
+		}
+	}
+
+	// 投稿を作成
+	const note = await create(user, {
+		createdAt: new Date(),
+		media: files,
+		poll: poll,
+		text: text,
+		reply,
+		renote,
+		cw: cw,
+		tags: tags,
+		app: app,
+		viaMobile: viaMobile,
+		visibility,
+		geo
+	});
+
+	const noteObj = await pack(note, user);
+
+	// Reponse
+	res({
+		createdNote: noteObj
+	});
+});
diff --git a/src/server/api/endpoints/notes/favorites/create.ts b/src/server/api/endpoints/notes/favorites/create.ts
new file mode 100644
index 0000000000..c8e7f52426
--- /dev/null
+++ b/src/server/api/endpoints/notes/favorites/create.ts
@@ -0,0 +1,48 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import Favorite from '../../../../../models/favorite';
+import Note from '../../../../../models/note';
+
+/**
+ * Favorite a note
+ *
+ * @param {any} params
+ * @param {any} user
+ * @return {Promise<any>}
+ */
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'noteId' parameter
+	const [noteId, noteIdErr] = $(params.noteId).id().$;
+	if (noteIdErr) return rej('invalid noteId param');
+
+	// Get favoritee
+	const note = await Note.findOne({
+		_id: noteId
+	});
+
+	if (note === null) {
+		return rej('note not found');
+	}
+
+	// if already favorited
+	const exist = await Favorite.findOne({
+		noteId: note._id,
+		userId: user._id
+	});
+
+	if (exist !== null) {
+		return rej('already favorited');
+	}
+
+	// Create favorite
+	await Favorite.insert({
+		createdAt: new Date(),
+		noteId: note._id,
+		userId: user._id
+	});
+
+	// Send response
+	res();
+});
diff --git a/src/server/api/endpoints/notes/favorites/delete.ts b/src/server/api/endpoints/notes/favorites/delete.ts
new file mode 100644
index 0000000000..92aceb343b
--- /dev/null
+++ b/src/server/api/endpoints/notes/favorites/delete.ts
@@ -0,0 +1,46 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import Favorite from '../../../../../models/favorite';
+import Note from '../../../../../models/note';
+
+/**
+ * Unfavorite a note
+ *
+ * @param {any} params
+ * @param {any} user
+ * @return {Promise<any>}
+ */
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'noteId' parameter
+	const [noteId, noteIdErr] = $(params.noteId).id().$;
+	if (noteIdErr) return rej('invalid noteId param');
+
+	// Get favoritee
+	const note = await Note.findOne({
+		_id: noteId
+	});
+
+	if (note === null) {
+		return rej('note not found');
+	}
+
+	// if already favorited
+	const exist = await Favorite.findOne({
+		noteId: note._id,
+		userId: user._id
+	});
+
+	if (exist === null) {
+		return rej('already not favorited');
+	}
+
+	// Delete favorite
+	await Favorite.remove({
+		_id: exist._id
+	});
+
+	// Send response
+	res();
+});
diff --git a/src/server/api/endpoints/notes/mentions.ts b/src/server/api/endpoints/notes/mentions.ts
new file mode 100644
index 0000000000..c507acbaec
--- /dev/null
+++ b/src/server/api/endpoints/notes/mentions.ts
@@ -0,0 +1,78 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import Note from '../../../../models/note';
+import getFriends from '../../common/get-friends';
+import { pack } from '../../../../models/note';
+
+/**
+ * Get mentions of myself
+ *
+ * @param {any} params
+ * @param {any} user
+ * @return {Promise<any>}
+ */
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'following' parameter
+	const [following = false, followingError] =
+		$(params.following).optional.boolean().$;
+	if (followingError) return rej('invalid following param');
+
+	// Get 'limit' parameter
+	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
+	if (limitErr) return rej('invalid limit param');
+
+	// Get 'sinceId' parameter
+	const [sinceId, sinceIdErr] = $(params.sinceId).optional.id().$;
+	if (sinceIdErr) return rej('invalid sinceId param');
+
+	// Get 'untilId' parameter
+	const [untilId, untilIdErr] = $(params.untilId).optional.id().$;
+	if (untilIdErr) return rej('invalid untilId param');
+
+	// Check if both of sinceId and untilId is specified
+	if (sinceId && untilId) {
+		return rej('cannot set sinceId and untilId');
+	}
+
+	// Construct query
+	const query = {
+		mentions: user._id
+	} as any;
+
+	const sort = {
+		_id: -1
+	};
+
+	if (following) {
+		const followingIds = await getFriends(user._id);
+
+		query.userId = {
+			$in: followingIds
+		};
+	}
+
+	if (sinceId) {
+		sort._id = 1;
+		query._id = {
+			$gt: sinceId
+		};
+	} else if (untilId) {
+		query._id = {
+			$lt: untilId
+		};
+	}
+
+	// Issue query
+	const mentions = await Note
+		.find(query, {
+			limit: limit,
+			sort: sort
+		});
+
+	// Serialize
+	res(await Promise.all(mentions.map(async mention =>
+		await pack(mention, user)
+	)));
+});
diff --git a/src/server/api/endpoints/notes/polls/recommendation.ts b/src/server/api/endpoints/notes/polls/recommendation.ts
new file mode 100644
index 0000000000..cb530ea2cf
--- /dev/null
+++ b/src/server/api/endpoints/notes/polls/recommendation.ts
@@ -0,0 +1,59 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import Vote from '../../../../../models/poll-vote';
+import Note, { pack } from '../../../../../models/note';
+
+/**
+ * Get recommended polls
+ *
+ * @param {any} params
+ * @param {any} user
+ * @return {Promise<any>}
+ */
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'limit' parameter
+	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
+	if (limitErr) return rej('invalid limit param');
+
+	// Get 'offset' parameter
+	const [offset = 0, offsetErr] = $(params.offset).optional.number().min(0).$;
+	if (offsetErr) return rej('invalid offset param');
+
+	// Get votes
+	const votes = await Vote.find({
+		userId: user._id
+	}, {
+		fields: {
+			_id: false,
+			noteId: true
+		}
+	});
+
+	const nin = votes && votes.length != 0 ? votes.map(v => v.noteId) : [];
+
+	const notes = await Note
+		.find({
+			_id: {
+				$nin: nin
+			},
+			userId: {
+				$ne: user._id
+			},
+			poll: {
+				$exists: true,
+				$ne: null
+			}
+		}, {
+			limit: limit,
+			skip: offset,
+			sort: {
+				_id: -1
+			}
+		});
+
+	// Serialize
+	res(await Promise.all(notes.map(async note =>
+		await pack(note, user, { detail: true }))));
+});
diff --git a/src/server/api/endpoints/notes/polls/vote.ts b/src/server/api/endpoints/notes/polls/vote.ts
new file mode 100644
index 0000000000..0e27f87ee2
--- /dev/null
+++ b/src/server/api/endpoints/notes/polls/vote.ts
@@ -0,0 +1,115 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import Vote from '../../../../../models/poll-vote';
+import Note from '../../../../../models/note';
+import Watching from '../../../../../models/note-watching';
+import watch from '../../../../../note/watch';
+import { publishNoteStream } from '../../../../../publishers/stream';
+import notify from '../../../../../publishers/notify';
+
+/**
+ * Vote poll of a note
+ *
+ * @param {any} params
+ * @param {any} user
+ * @return {Promise<any>}
+ */
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'noteId' parameter
+	const [noteId, noteIdErr] = $(params.noteId).id().$;
+	if (noteIdErr) return rej('invalid noteId param');
+
+	// Get votee
+	const note = await Note.findOne({
+		_id: noteId
+	});
+
+	if (note === null) {
+		return rej('note not found');
+	}
+
+	if (note.poll == null) {
+		return rej('poll not found');
+	}
+
+	// Get 'choice' parameter
+	const [choice, choiceError] =
+		$(params.choice).number()
+			.pipe(c => note.poll.choices.some(x => x.id == c))
+			.$;
+	if (choiceError) return rej('invalid choice param');
+
+	// if already voted
+	const exist = await Vote.findOne({
+		noteId: note._id,
+		userId: user._id
+	});
+
+	if (exist !== null) {
+		return rej('already voted');
+	}
+
+	// Create vote
+	await Vote.insert({
+		createdAt: new Date(),
+		noteId: note._id,
+		userId: user._id,
+		choice: choice
+	});
+
+	// Send response
+	res();
+
+	const inc = {};
+	inc[`poll.choices.${findWithAttr(note.poll.choices, 'id', choice)}.votes`] = 1;
+
+	// Increment votes count
+	await Note.update({ _id: note._id }, {
+		$inc: inc
+	});
+
+	publishNoteStream(note._id, 'poll_voted');
+
+	// Notify
+	notify(note.userId, user._id, 'poll_vote', {
+		noteId: note._id,
+		choice: choice
+	});
+
+	// Fetch watchers
+	Watching
+		.find({
+			noteId: note._id,
+			userId: { $ne: user._id },
+			// 削除されたドキュメントは除く
+			deletedAt: { $exists: false }
+		}, {
+			fields: {
+				userId: true
+			}
+		})
+		.then(watchers => {
+			watchers.forEach(watcher => {
+				notify(watcher.userId, user._id, 'poll_vote', {
+					noteId: note._id,
+					choice: choice
+				});
+			});
+		});
+
+	// この投稿をWatchする
+	if (user.account.settings.autoWatch !== false) {
+		watch(user._id, note);
+	}
+});
+
+function findWithAttr(array, attr, value) {
+	for (let i = 0; i < array.length; i += 1) {
+		if (array[i][attr] === value) {
+			return i;
+		}
+	}
+	return -1;
+}
diff --git a/src/server/api/endpoints/notes/reactions.ts b/src/server/api/endpoints/notes/reactions.ts
new file mode 100644
index 0000000000..bbff97bb0a
--- /dev/null
+++ b/src/server/api/endpoints/notes/reactions.ts
@@ -0,0 +1,57 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import Note from '../../../../models/note';
+import Reaction, { pack } from '../../../../models/note-reaction';
+
+/**
+ * Show reactions of a note
+ *
+ * @param {any} params
+ * @param {any} user
+ * @return {Promise<any>}
+ */
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'noteId' parameter
+	const [noteId, noteIdErr] = $(params.noteId).id().$;
+	if (noteIdErr) return rej('invalid noteId param');
+
+	// Get 'limit' parameter
+	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
+	if (limitErr) return rej('invalid limit param');
+
+	// Get 'offset' parameter
+	const [offset = 0, offsetErr] = $(params.offset).optional.number().min(0).$;
+	if (offsetErr) return rej('invalid offset param');
+
+	// Get 'sort' parameter
+	const [sort = 'desc', sortError] = $(params.sort).optional.string().or('desc asc').$;
+	if (sortError) return rej('invalid sort param');
+
+	// Lookup note
+	const note = await Note.findOne({
+		_id: noteId
+	});
+
+	if (note === null) {
+		return rej('note not found');
+	}
+
+	// Issue query
+	const reactions = await Reaction
+		.find({
+			noteId: note._id,
+			deletedAt: { $exists: false }
+		}, {
+			limit: limit,
+			skip: offset,
+			sort: {
+				_id: sort == 'asc' ? 1 : -1
+			}
+		});
+
+	// Serialize
+	res(await Promise.all(reactions.map(async reaction =>
+		await pack(reaction, user))));
+});
diff --git a/src/server/api/endpoints/notes/reactions/create.ts b/src/server/api/endpoints/notes/reactions/create.ts
new file mode 100644
index 0000000000..ffb7bcc35b
--- /dev/null
+++ b/src/server/api/endpoints/notes/reactions/create.ts
@@ -0,0 +1,47 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import Reaction from '../../../../../models/note-reaction';
+import Note from '../../../../../models/note';
+import create from '../../../../../services/note/reaction/create';
+
+/**
+ * React to a note
+ */
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'noteId' parameter
+	const [noteId, noteIdErr] = $(params.noteId).id().$;
+	if (noteIdErr) return rej('invalid noteId param');
+
+	// Get 'reaction' parameter
+	const [reaction, reactionErr] = $(params.reaction).string().or([
+		'like',
+		'love',
+		'laugh',
+		'hmm',
+		'surprise',
+		'congrats',
+		'angry',
+		'confused',
+		'pudding'
+	]).$;
+	if (reactionErr) return rej('invalid reaction param');
+
+	// Fetch reactee
+	const note = await Note.findOne({
+		_id: noteId
+	});
+
+	if (note === null) {
+		return rej('note not found');
+	}
+
+	try {
+		await create(user, note, reaction);
+	} catch (e) {
+		rej(e);
+	}
+
+	res();
+});
diff --git a/src/server/api/endpoints/notes/reactions/delete.ts b/src/server/api/endpoints/notes/reactions/delete.ts
new file mode 100644
index 0000000000..b5d738b8ff
--- /dev/null
+++ b/src/server/api/endpoints/notes/reactions/delete.ts
@@ -0,0 +1,60 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import Reaction from '../../../../../models/note-reaction';
+import Note from '../../../../../models/note';
+// import event from '../../../publishers/stream';
+
+/**
+ * Unreact to a note
+ *
+ * @param {any} params
+ * @param {any} user
+ * @return {Promise<any>}
+ */
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'noteId' parameter
+	const [noteId, noteIdErr] = $(params.noteId).id().$;
+	if (noteIdErr) return rej('invalid noteId param');
+
+	// Fetch unreactee
+	const note = await Note.findOne({
+		_id: noteId
+	});
+
+	if (note === null) {
+		return rej('note not found');
+	}
+
+	// if already unreacted
+	const exist = await Reaction.findOne({
+		noteId: note._id,
+		userId: user._id,
+		deletedAt: { $exists: false }
+	});
+
+	if (exist === null) {
+		return rej('never reacted');
+	}
+
+	// Delete reaction
+	await Reaction.update({
+		_id: exist._id
+	}, {
+			$set: {
+				deletedAt: new Date()
+			}
+		});
+
+	// Send response
+	res();
+
+	const dec = {};
+	dec[`reactionCounts.${exist.reaction}`] = -1;
+
+	// Decrement reactions count
+	Note.update({ _id: note._id }, {
+		$inc: dec
+	});
+});
diff --git a/src/server/api/endpoints/notes/replies.ts b/src/server/api/endpoints/notes/replies.ts
new file mode 100644
index 0000000000..88d9ff329a
--- /dev/null
+++ b/src/server/api/endpoints/notes/replies.ts
@@ -0,0 +1,53 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import Note, { pack } from '../../../../models/note';
+
+/**
+ * Show a replies of a note
+ *
+ * @param {any} params
+ * @param {any} user
+ * @return {Promise<any>}
+ */
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'noteId' parameter
+	const [noteId, noteIdErr] = $(params.noteId).id().$;
+	if (noteIdErr) return rej('invalid noteId param');
+
+	// Get 'limit' parameter
+	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
+	if (limitErr) return rej('invalid limit param');
+
+	// Get 'offset' parameter
+	const [offset = 0, offsetErr] = $(params.offset).optional.number().min(0).$;
+	if (offsetErr) return rej('invalid offset param');
+
+	// Get 'sort' parameter
+	const [sort = 'desc', sortError] = $(params.sort).optional.string().or('desc asc').$;
+	if (sortError) return rej('invalid sort param');
+
+	// Lookup note
+	const note = await Note.findOne({
+		_id: noteId
+	});
+
+	if (note === null) {
+		return rej('note not found');
+	}
+
+	// Issue query
+	const replies = await Note
+		.find({ replyId: note._id }, {
+			limit: limit,
+			skip: offset,
+			sort: {
+				_id: sort == 'asc' ? 1 : -1
+			}
+		});
+
+	// Serialize
+	res(await Promise.all(replies.map(async note =>
+		await pack(note, user))));
+});
diff --git a/src/server/api/endpoints/notes/reposts.ts b/src/server/api/endpoints/notes/reposts.ts
new file mode 100644
index 0000000000..9dfc2c3cb5
--- /dev/null
+++ b/src/server/api/endpoints/notes/reposts.ts
@@ -0,0 +1,73 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import Note, { pack } from '../../../../models/note';
+
+/**
+ * Show a renotes of a note
+ *
+ * @param {any} params
+ * @param {any} user
+ * @return {Promise<any>}
+ */
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'noteId' parameter
+	const [noteId, noteIdErr] = $(params.noteId).id().$;
+	if (noteIdErr) return rej('invalid noteId param');
+
+	// Get 'limit' parameter
+	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
+	if (limitErr) return rej('invalid limit param');
+
+	// Get 'sinceId' parameter
+	const [sinceId, sinceIdErr] = $(params.sinceId).optional.id().$;
+	if (sinceIdErr) return rej('invalid sinceId param');
+
+	// Get 'untilId' parameter
+	const [untilId, untilIdErr] = $(params.untilId).optional.id().$;
+	if (untilIdErr) return rej('invalid untilId param');
+
+	// Check if both of sinceId and untilId is specified
+	if (sinceId && untilId) {
+		return rej('cannot set sinceId and untilId');
+	}
+
+	// Lookup note
+	const note = await Note.findOne({
+		_id: noteId
+	});
+
+	if (note === null) {
+		return rej('note not found');
+	}
+
+	// Construct query
+	const sort = {
+		_id: -1
+	};
+	const query = {
+		renoteId: note._id
+	} as any;
+	if (sinceId) {
+		sort._id = 1;
+		query._id = {
+			$gt: sinceId
+		};
+	} else if (untilId) {
+		query._id = {
+			$lt: untilId
+		};
+	}
+
+	// Issue query
+	const renotes = await Note
+		.find(query, {
+			limit: limit,
+			sort: sort
+		});
+
+	// Serialize
+	res(await Promise.all(renotes.map(async note =>
+		await pack(note, user))));
+});
diff --git a/src/server/api/endpoints/notes/search.ts b/src/server/api/endpoints/notes/search.ts
new file mode 100644
index 0000000000..bfa17b000e
--- /dev/null
+++ b/src/server/api/endpoints/notes/search.ts
@@ -0,0 +1,364 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+const escapeRegexp = require('escape-regexp');
+import Note from '../../../../models/note';
+import User from '../../../../models/user';
+import Mute from '../../../../models/mute';
+import getFriends from '../../common/get-friends';
+import { pack } from '../../../../models/note';
+
+/**
+ * Search a note
+ *
+ * @param {any} params
+ * @param {any} me
+ * @return {Promise<any>}
+ */
+module.exports = (params, me) => new Promise(async (res, rej) => {
+	// Get 'text' parameter
+	const [text, textError] = $(params.text).optional.string().$;
+	if (textError) return rej('invalid text param');
+
+	// Get 'includeUserIds' parameter
+	const [includeUserIds = [], includeUserIdsErr] = $(params.includeUserIds).optional.array('id').$;
+	if (includeUserIdsErr) return rej('invalid includeUserIds param');
+
+	// Get 'excludeUserIds' parameter
+	const [excludeUserIds = [], excludeUserIdsErr] = $(params.excludeUserIds).optional.array('id').$;
+	if (excludeUserIdsErr) return rej('invalid excludeUserIds param');
+
+	// Get 'includeUserUsernames' parameter
+	const [includeUserUsernames = [], includeUserUsernamesErr] = $(params.includeUserUsernames).optional.array('string').$;
+	if (includeUserUsernamesErr) return rej('invalid includeUserUsernames param');
+
+	// Get 'excludeUserUsernames' parameter
+	const [excludeUserUsernames = [], excludeUserUsernamesErr] = $(params.excludeUserUsernames).optional.array('string').$;
+	if (excludeUserUsernamesErr) return rej('invalid excludeUserUsernames param');
+
+	// Get 'following' parameter
+	const [following = null, followingErr] = $(params.following).optional.nullable.boolean().$;
+	if (followingErr) return rej('invalid following param');
+
+	// Get 'mute' parameter
+	const [mute = 'mute_all', muteErr] = $(params.mute).optional.string().$;
+	if (muteErr) return rej('invalid mute param');
+
+	// Get 'reply' parameter
+	const [reply = null, replyErr] = $(params.reply).optional.nullable.boolean().$;
+	if (replyErr) return rej('invalid reply param');
+
+	// Get 'renote' parameter
+	const [renote = null, renoteErr] = $(params.renote).optional.nullable.boolean().$;
+	if (renoteErr) return rej('invalid renote param');
+
+	// Get 'media' parameter
+	const [media = null, mediaErr] = $(params.media).optional.nullable.boolean().$;
+	if (mediaErr) return rej('invalid media param');
+
+	// Get 'poll' parameter
+	const [poll = null, pollErr] = $(params.poll).optional.nullable.boolean().$;
+	if (pollErr) return rej('invalid poll param');
+
+	// Get 'sinceDate' parameter
+	const [sinceDate, sinceDateErr] = $(params.sinceDate).optional.number().$;
+	if (sinceDateErr) throw 'invalid sinceDate param';
+
+	// Get 'untilDate' parameter
+	const [untilDate, untilDateErr] = $(params.untilDate).optional.number().$;
+	if (untilDateErr) throw 'invalid untilDate param';
+
+	// Get 'offset' parameter
+	const [offset = 0, offsetErr] = $(params.offset).optional.number().min(0).$;
+	if (offsetErr) return rej('invalid offset param');
+
+	// Get 'limit' parameter
+	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 30).$;
+	if (limitErr) return rej('invalid limit param');
+
+	let includeUsers = includeUserIds;
+	if (includeUserUsernames != null) {
+		const ids = (await Promise.all(includeUserUsernames.map(async (username) => {
+			const _user = await User.findOne({
+				usernameLower: username.toLowerCase()
+			});
+			return _user ? _user._id : null;
+		}))).filter(id => id != null);
+		includeUsers = includeUsers.concat(ids);
+	}
+
+	let excludeUsers = excludeUserIds;
+	if (excludeUserUsernames != null) {
+		const ids = (await Promise.all(excludeUserUsernames.map(async (username) => {
+			const _user = await User.findOne({
+				usernameLower: username.toLowerCase()
+			});
+			return _user ? _user._id : null;
+		}))).filter(id => id != null);
+		excludeUsers = excludeUsers.concat(ids);
+	}
+
+	search(res, rej, me, text, includeUsers, excludeUsers, following,
+			mute, reply, renote, media, poll, sinceDate, untilDate, offset, limit);
+});
+
+async function search(
+	res, rej, me, text, includeUserIds, excludeUserIds, following,
+	mute, reply, renote, media, poll, sinceDate, untilDate, offset, max) {
+
+	let q: any = {
+		$and: []
+	};
+
+	const push = x => q.$and.push(x);
+
+	if (text) {
+		// 完全一致検索
+		if (/"""(.+?)"""/.test(text)) {
+			const x = text.match(/"""(.+?)"""/)[1];
+			push({
+				text: x
+			});
+		} else {
+			const tags = text.split(' ').filter(x => x[0] == '#');
+			if (tags) {
+				push({
+					$and: tags.map(x => ({
+						tags: x
+					}))
+				});
+			}
+
+			push({
+				$and: text.split(' ').map(x => ({
+					// キーワードが-で始まる場合そのキーワードを除外する
+					text: x[0] == '-' ? {
+						$not: new RegExp(escapeRegexp(x.substr(1)))
+					} : new RegExp(escapeRegexp(x))
+				}))
+			});
+		}
+	}
+
+	if (includeUserIds && includeUserIds.length != 0) {
+		push({
+			userId: {
+				$in: includeUserIds
+			}
+		});
+	} else if (excludeUserIds && excludeUserIds.length != 0) {
+		push({
+			userId: {
+				$nin: excludeUserIds
+			}
+		});
+	}
+
+	if (following != null && me != null) {
+		const ids = await getFriends(me._id, false);
+		push({
+			userId: following ? {
+				$in: ids
+			} : {
+				$nin: ids.concat(me._id)
+			}
+		});
+	}
+
+	if (me != null) {
+		const mutes = await Mute.find({
+			muterId: me._id,
+			deletedAt: { $exists: false }
+		});
+		const mutedUserIds = mutes.map(m => m.muteeId);
+
+		switch (mute) {
+			case 'mute_all':
+				push({
+					userId: {
+						$nin: mutedUserIds
+					},
+					'_reply.userId': {
+						$nin: mutedUserIds
+					},
+					'_renote.userId': {
+						$nin: mutedUserIds
+					}
+				});
+				break;
+			case 'mute_related':
+				push({
+					'_reply.userId': {
+						$nin: mutedUserIds
+					},
+					'_renote.userId': {
+						$nin: mutedUserIds
+					}
+				});
+				break;
+			case 'mute_direct':
+				push({
+					userId: {
+						$nin: mutedUserIds
+					}
+				});
+				break;
+			case 'direct_only':
+				push({
+					userId: {
+						$in: mutedUserIds
+					}
+				});
+				break;
+			case 'related_only':
+				push({
+					$or: [{
+						'_reply.userId': {
+							$in: mutedUserIds
+						}
+					}, {
+						'_renote.userId': {
+							$in: mutedUserIds
+						}
+					}]
+				});
+				break;
+			case 'all_only':
+				push({
+					$or: [{
+						userId: {
+							$in: mutedUserIds
+						}
+					}, {
+						'_reply.userId': {
+							$in: mutedUserIds
+						}
+					}, {
+						'_renote.userId': {
+							$in: mutedUserIds
+						}
+					}]
+				});
+				break;
+		}
+	}
+
+	if (reply != null) {
+		if (reply) {
+			push({
+				replyId: {
+					$exists: true,
+					$ne: null
+				}
+			});
+		} else {
+			push({
+				$or: [{
+					replyId: {
+						$exists: false
+					}
+				}, {
+					replyId: null
+				}]
+			});
+		}
+	}
+
+	if (renote != null) {
+		if (renote) {
+			push({
+				renoteId: {
+					$exists: true,
+					$ne: null
+				}
+			});
+		} else {
+			push({
+				$or: [{
+					renoteId: {
+						$exists: false
+					}
+				}, {
+					renoteId: null
+				}]
+			});
+		}
+	}
+
+	if (media != null) {
+		if (media) {
+			push({
+				mediaIds: {
+					$exists: true,
+					$ne: null
+				}
+			});
+		} else {
+			push({
+				$or: [{
+					mediaIds: {
+						$exists: false
+					}
+				}, {
+					mediaIds: null
+				}]
+			});
+		}
+	}
+
+	if (poll != null) {
+		if (poll) {
+			push({
+				poll: {
+					$exists: true,
+					$ne: null
+				}
+			});
+		} else {
+			push({
+				$or: [{
+					poll: {
+						$exists: false
+					}
+				}, {
+					poll: null
+				}]
+			});
+		}
+	}
+
+	if (sinceDate) {
+		push({
+			createdAt: {
+				$gt: new Date(sinceDate)
+			}
+		});
+	}
+
+	if (untilDate) {
+		push({
+			createdAt: {
+				$lt: new Date(untilDate)
+			}
+		});
+	}
+
+	if (q.$and.length == 0) {
+		q = {};
+	}
+
+	// Search notes
+	const notes = await Note
+		.find(q, {
+			sort: {
+				_id: -1
+			},
+			limit: max,
+			skip: offset
+		});
+
+	// Serialize
+	res(await Promise.all(notes.map(async note =>
+		await pack(note, me))));
+}
diff --git a/src/server/api/endpoints/notes/show.ts b/src/server/api/endpoints/notes/show.ts
new file mode 100644
index 0000000000..67cdc3038b
--- /dev/null
+++ b/src/server/api/endpoints/notes/show.ts
@@ -0,0 +1,32 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import Note, { pack } from '../../../../models/note';
+
+/**
+ * Show a note
+ *
+ * @param {any} params
+ * @param {any} user
+ * @return {Promise<any>}
+ */
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'noteId' parameter
+	const [noteId, noteIdErr] = $(params.noteId).id().$;
+	if (noteIdErr) return rej('invalid noteId param');
+
+	// Get note
+	const note = await Note.findOne({
+		_id: noteId
+	});
+
+	if (note === null) {
+		return rej('note not found');
+	}
+
+	// Serialize
+	res(await pack(note, user, {
+		detail: true
+	}));
+});
diff --git a/src/server/api/endpoints/notes/timeline.ts b/src/server/api/endpoints/notes/timeline.ts
new file mode 100644
index 0000000000..5263cfb2aa
--- /dev/null
+++ b/src/server/api/endpoints/notes/timeline.ts
@@ -0,0 +1,132 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import rap from '@prezzemolo/rap';
+import Note from '../../../../models/note';
+import Mute from '../../../../models/mute';
+import ChannelWatching from '../../../../models/channel-watching';
+import getFriends from '../../common/get-friends';
+import { pack } from '../../../../models/note';
+
+/**
+ * Get timeline of myself
+ *
+ * @param {any} params
+ * @param {any} user
+ * @param {any} app
+ * @return {Promise<any>}
+ */
+module.exports = async (params, user, app) => {
+	// Get 'limit' parameter
+	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
+	if (limitErr) throw 'invalid limit param';
+
+	// Get 'sinceId' parameter
+	const [sinceId, sinceIdErr] = $(params.sinceId).optional.id().$;
+	if (sinceIdErr) throw 'invalid sinceId param';
+
+	// Get 'untilId' parameter
+	const [untilId, untilIdErr] = $(params.untilId).optional.id().$;
+	if (untilIdErr) throw 'invalid untilId param';
+
+	// Get 'sinceDate' parameter
+	const [sinceDate, sinceDateErr] = $(params.sinceDate).optional.number().$;
+	if (sinceDateErr) throw 'invalid sinceDate param';
+
+	// Get 'untilDate' parameter
+	const [untilDate, untilDateErr] = $(params.untilDate).optional.number().$;
+	if (untilDateErr) throw 'invalid untilDate param';
+
+	// Check if only one of sinceId, untilId, sinceDate, untilDate specified
+	if ([sinceId, untilId, sinceDate, untilDate].filter(x => x != null).length > 1) {
+		throw 'only one of sinceId, untilId, sinceDate, untilDate can be specified';
+	}
+
+	const { followingIds, watchingChannelIds, mutedUserIds } = await rap({
+		// ID list of the user itself and other users who the user follows
+		followingIds: getFriends(user._id),
+
+		// Watchしているチャンネルを取得
+		watchingChannelIds: ChannelWatching.find({
+			userId: user._id,
+			// 削除されたドキュメントは除く
+			deletedAt: { $exists: false }
+		}).then(watches => watches.map(w => w.channelId)),
+
+		// ミュートしているユーザーを取得
+		mutedUserIds: Mute.find({
+			muterId: user._id,
+			// 削除されたドキュメントは除く
+			deletedAt: { $exists: false }
+		}).then(ms => ms.map(m => m.muteeId))
+	});
+
+	//#region Construct query
+	const sort = {
+		_id: -1
+	};
+
+	const query = {
+		$or: [{
+			// フォローしている人のタイムラインへの投稿
+			userId: {
+				$in: followingIds
+			},
+			// 「タイムラインへの」投稿に限定するためにチャンネルが指定されていないもののみに限る
+			$or: [{
+				channelId: {
+					$exists: false
+				}
+			}, {
+				channelId: null
+			}]
+		}, {
+			// Watchしているチャンネルへの投稿
+			channelId: {
+				$in: watchingChannelIds
+			}
+		}],
+		// mute
+		userId: {
+			$nin: mutedUserIds
+		},
+		'_reply.userId': {
+			$nin: mutedUserIds
+		},
+		'_renote.userId': {
+			$nin: mutedUserIds
+		},
+	} as any;
+
+	if (sinceId) {
+		sort._id = 1;
+		query._id = {
+			$gt: sinceId
+		};
+	} else if (untilId) {
+		query._id = {
+			$lt: untilId
+		};
+	} else if (sinceDate) {
+		sort._id = 1;
+		query.createdAt = {
+			$gt: new Date(sinceDate)
+		};
+	} else if (untilDate) {
+		query.createdAt = {
+			$lt: new Date(untilDate)
+		};
+	}
+	//#endregion
+
+	// Issue query
+	const timeline = await Note
+		.find(query, {
+			limit: limit,
+			sort: sort
+		});
+
+	// Serialize
+	return await Promise.all(timeline.map(note => pack(note, user)));
+};
diff --git a/src/server/api/endpoints/notes/trend.ts b/src/server/api/endpoints/notes/trend.ts
new file mode 100644
index 0000000000..48ecd5b843
--- /dev/null
+++ b/src/server/api/endpoints/notes/trend.ts
@@ -0,0 +1,79 @@
+/**
+ * Module dependencies
+ */
+const ms = require('ms');
+import $ from 'cafy';
+import Note, { pack } from '../../../../models/note';
+
+/**
+ * Get trend notes
+ *
+ * @param {any} params
+ * @param {any} user
+ * @return {Promise<any>}
+ */
+module.exports = (params, user) => new Promise(async (res, rej) => {
+	// Get 'limit' parameter
+	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
+	if (limitErr) return rej('invalid limit param');
+
+	// Get 'offset' parameter
+	const [offset = 0, offsetErr] = $(params.offset).optional.number().min(0).$;
+	if (offsetErr) return rej('invalid offset param');
+
+	// Get 'reply' parameter
+	const [reply, replyErr] = $(params.reply).optional.boolean().$;
+	if (replyErr) return rej('invalid reply param');
+
+	// Get 'renote' parameter
+	const [renote, renoteErr] = $(params.renote).optional.boolean().$;
+	if (renoteErr) return rej('invalid renote param');
+
+	// Get 'media' parameter
+	const [media, mediaErr] = $(params.media).optional.boolean().$;
+	if (mediaErr) return rej('invalid media param');
+
+	// Get 'poll' parameter
+	const [poll, pollErr] = $(params.poll).optional.boolean().$;
+	if (pollErr) return rej('invalid poll param');
+
+	const query = {
+		createdAt: {
+			$gte: new Date(Date.now() - ms('1days'))
+		},
+		renoteCount: {
+			$gt: 0
+		}
+	} as any;
+
+	if (reply != undefined) {
+		query.replyId = reply ? { $exists: true, $ne: null } : null;
+	}
+
+	if (renote != undefined) {
+		query.renoteId = renote ? { $exists: true, $ne: null } : null;
+	}
+
+	if (media != undefined) {
+		query.mediaIds = media ? { $exists: true, $ne: null } : null;
+	}
+
+	if (poll != undefined) {
+		query.poll = poll ? { $exists: true, $ne: null } : null;
+	}
+
+	// Issue query
+	const notes = await Note
+		.find(query, {
+			limit: limit,
+			skip: offset,
+			sort: {
+				renoteCount: -1,
+				_id: -1
+			}
+		});
+
+	// Serialize
+	res(await Promise.all(notes.map(async note =>
+		await pack(note, user, { detail: true }))));
+});
diff --git a/src/server/api/endpoints/posts.ts b/src/server/api/endpoints/posts.ts
index 7af8cff671..3e3b67a66c 100644
--- a/src/server/api/endpoints/posts.ts
+++ b/src/server/api/endpoints/posts.ts
@@ -2,10 +2,10 @@
  * Module dependencies
  */
 import $ from 'cafy';
-import Post, { pack } from '../../../models/post';
+import Note, { pack } from '../../../models/note';
 
 /**
- * Lists all posts
+ * Lists all notes
  *
  * @param {any} params
  * @return {Promise<any>}
@@ -15,9 +15,9 @@ module.exports = (params) => new Promise(async (res, rej) => {
 	const [reply, replyErr] = $(params.reply).optional.boolean().$;
 	if (replyErr) return rej('invalid reply param');
 
-	// Get 'repost' parameter
-	const [repost, repostErr] = $(params.repost).optional.boolean().$;
-	if (repostErr) return rej('invalid repost param');
+	// Get 'renote' parameter
+	const [renote, renoteErr] = $(params.renote).optional.boolean().$;
+	if (renoteErr) return rej('invalid renote param');
 
 	// Get 'media' parameter
 	const [media, mediaErr] = $(params.media).optional.boolean().$;
@@ -68,8 +68,8 @@ module.exports = (params) => new Promise(async (res, rej) => {
 		query.replyId = reply ? { $exists: true, $ne: null } : null;
 	}
 
-	if (repost != undefined) {
-		query.repostId = repost ? { $exists: true, $ne: null } : null;
+	if (renote != undefined) {
+		query.renoteId = renote ? { $exists: true, $ne: null } : null;
 	}
 
 	if (media != undefined) {
@@ -86,12 +86,12 @@ module.exports = (params) => new Promise(async (res, rej) => {
 	//}
 
 	// Issue query
-	const posts = await Post
+	const notes = await Note
 		.find(query, {
 			limit: limit,
 			sort: sort
 		});
 
 	// Serialize
-	res(await Promise.all(posts.map(async post => await pack(post))));
+	res(await Promise.all(notes.map(async note => await pack(note))));
 });
diff --git a/src/server/api/endpoints/posts/context.ts b/src/server/api/endpoints/posts/context.ts
deleted file mode 100644
index 7abb045a49..0000000000
--- a/src/server/api/endpoints/posts/context.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-import Post, { pack } from '../../../../models/post';
-
-/**
- * Show a context of a post
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
- */
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// Get 'postId' parameter
-	const [postId, postIdErr] = $(params.postId).id().$;
-	if (postIdErr) return rej('invalid postId param');
-
-	// Get 'limit' parameter
-	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
-	if (limitErr) return rej('invalid limit param');
-
-	// Get 'offset' parameter
-	const [offset = 0, offsetErr] = $(params.offset).optional.number().min(0).$;
-	if (offsetErr) return rej('invalid offset param');
-
-	// Lookup post
-	const post = await Post.findOne({
-		_id: postId
-	});
-
-	if (post === null) {
-		return rej('post not found');
-	}
-
-	const context = [];
-	let i = 0;
-
-	async function get(id) {
-		i++;
-		const p = await Post.findOne({ _id: id });
-
-		if (i > offset) {
-			context.push(p);
-		}
-
-		if (context.length == limit) {
-			return;
-		}
-
-		if (p.replyId) {
-			await get(p.replyId);
-		}
-	}
-
-	if (post.replyId) {
-		await get(post.replyId);
-	}
-
-	// Serialize
-	res(await Promise.all(context.map(async post =>
-		await pack(post, user))));
-});
diff --git a/src/server/api/endpoints/posts/create.ts b/src/server/api/endpoints/posts/create.ts
index 003a892bc0..7e79912b1b 100644
--- a/src/server/api/endpoints/posts/create.ts
+++ b/src/server/api/endpoints/posts/create.ts
@@ -3,15 +3,15 @@
  */
 import $ from 'cafy';
 import deepEqual = require('deep-equal');
-import Post, { IPost, isValidText, isValidCw, pack } from '../../../../models/post';
+import Note, { INote, isValidText, isValidCw, pack } from '../../../../models/note';
 import { ILocalUser } from '../../../../models/user';
 import Channel, { IChannel } from '../../../../models/channel';
 import DriveFile from '../../../../models/drive-file';
-import create from '../../../../services/post/create';
+import create from '../../../../services/note/create';
 import { IApp } from '../../../../models/app';
 
 /**
- * Create a post
+ * Create a note
  *
  * @param {any} params
  * @param {any} user
@@ -79,26 +79,26 @@ module.exports = (params, user: ILocalUser, app: IApp) => new Promise(async (res
 		files = null;
 	}
 
-	// Get 'repostId' parameter
-	const [repostId, repostIdErr] = $(params.repostId).optional.id().$;
-	if (repostIdErr) return rej('invalid repostId');
+	// Get 'renoteId' parameter
+	const [renoteId, renoteIdErr] = $(params.renoteId).optional.id().$;
+	if (renoteIdErr) return rej('invalid renoteId');
 
-	let repost: IPost = null;
+	let renote: INote = null;
 	let isQuote = false;
-	if (repostId !== undefined) {
-		// Fetch repost to post
-		repost = await Post.findOne({
-			_id: repostId
+	if (renoteId !== undefined) {
+		// Fetch renote to note
+		renote = await Note.findOne({
+			_id: renoteId
 		});
 
-		if (repost == null) {
-			return rej('repostee is not found');
-		} else if (repost.repostId && !repost.text && !repost.mediaIds) {
-			return rej('cannot repost to repost');
+		if (renote == null) {
+			return rej('renoteee is not found');
+		} else if (renote.renoteId && !renote.text && !renote.mediaIds) {
+			return rej('cannot renote to renote');
 		}
 
-		// Fetch recently post
-		const latestPost = await Post.findOne({
+		// Fetch recently note
+		const latestNote = await Note.findOne({
 			userId: user._id
 		}, {
 			sort: {
@@ -108,19 +108,19 @@ module.exports = (params, user: ILocalUser, app: IApp) => new Promise(async (res
 
 		isQuote = text != null || files != null;
 
-		// 直近と同じRepost対象かつ引用じゃなかったらエラー
-		if (latestPost &&
-			latestPost.repostId &&
-			latestPost.repostId.equals(repost._id) &&
+		// 直近と同じRenote対象かつ引用じゃなかったらエラー
+		if (latestNote &&
+			latestNote.renoteId &&
+			latestNote.renoteId.equals(renote._id) &&
 			!isQuote) {
-			return rej('cannot repost same post that already reposted in your latest post');
+			return rej('cannot renote same note that already reposted in your latest note');
 		}
 
-		// 直近がRepost対象かつ引用じゃなかったらエラー
-		if (latestPost &&
-			latestPost._id.equals(repost._id) &&
+		// 直近がRenote対象かつ引用じゃなかったらエラー
+		if (latestNote &&
+			latestNote._id.equals(renote._id) &&
 			!isQuote) {
-			return rej('cannot repost your latest post');
+			return rej('cannot renote your latest note');
 		}
 	}
 
@@ -128,20 +128,20 @@ module.exports = (params, user: ILocalUser, app: IApp) => new Promise(async (res
 	const [replyId, replyIdErr] = $(params.replyId).optional.id().$;
 	if (replyIdErr) return rej('invalid replyId');
 
-	let reply: IPost = null;
+	let reply: INote = null;
 	if (replyId !== undefined) {
 		// Fetch reply
-		reply = await Post.findOne({
+		reply = await Note.findOne({
 			_id: replyId
 		});
 
 		if (reply === null) {
-			return rej('in reply to post is not found');
+			return rej('in reply to note is not found');
 		}
 
-		// 返信対象が引用でないRepostだったらエラー
-		if (reply.repostId && !reply.text && !reply.mediaIds) {
-			return rej('cannot reply to repost');
+		// 返信対象が引用でないRenoteだったらエラー
+		if (reply.renoteId && !reply.text && !reply.mediaIds) {
+			return rej('cannot reply to renote');
 		}
 	}
 
@@ -165,14 +165,14 @@ module.exports = (params, user: ILocalUser, app: IApp) => new Promise(async (res
 			return rej('チャンネル内部からチャンネル外部の投稿に返信することはできません');
 		}
 
-		// Repost対象の投稿がこのチャンネルじゃなかったらダメ
-		if (repost && !channelId.equals(repost.channelId)) {
-			return rej('チャンネル内部からチャンネル外部の投稿をRepostすることはできません');
+		// Renote対象の投稿がこのチャンネルじゃなかったらダメ
+		if (renote && !channelId.equals(renote.channelId)) {
+			return rej('チャンネル内部からチャンネル外部の投稿をRenoteすることはできません');
 		}
 
-		// 引用ではないRepostはダメ
-		if (repost && !isQuote) {
-			return rej('チャンネル内部では引用ではないRepostをすることはできません');
+		// 引用ではないRenoteはダメ
+		if (renote && !isQuote) {
+			return rej('チャンネル内部では引用ではないRenoteをすることはできません');
 		}
 	} else {
 		// 返信対象の投稿がチャンネルへの投稿だったらダメ
@@ -180,9 +180,9 @@ module.exports = (params, user: ILocalUser, app: IApp) => new Promise(async (res
 			return rej('チャンネル外部からチャンネル内部の投稿に返信することはできません');
 		}
 
-		// Repost対象の投稿がチャンネルへの投稿だったらダメ
-		if (repost && repost.channelId != null) {
-			return rej('チャンネル外部からチャンネル内部の投稿をRepostすることはできません');
+		// Renote対象の投稿がチャンネルへの投稿だったらダメ
+		if (renote && renote.channelId != null) {
+			return rej('チャンネル外部からチャンネル内部の投稿をRenoteすることはできません');
 		}
 	}
 
@@ -203,23 +203,23 @@ module.exports = (params, user: ILocalUser, app: IApp) => new Promise(async (res
 		}));
 	}
 
-	// テキストが無いかつ添付ファイルが無いかつRepostも無いかつ投票も無かったらエラー
-	if (text === undefined && files === null && repost === null && poll === undefined) {
-		return rej('text, mediaIds, repostId or poll is required');
+	// テキストが無いかつ添付ファイルが無いかつRenoteも無いかつ投票も無かったらエラー
+	if (text === undefined && files === null && renote === null && poll === undefined) {
+		return rej('text, mediaIds, renoteId or poll is required');
 	}
 
 	// 直近の投稿と重複してたらエラー
 	// TODO: 直近の投稿が一日前くらいなら重複とは見なさない
-	if (user.latestPost) {
+	if (user.latestNote) {
 		if (deepEqual({
-			text: user.latestPost.text,
-			reply: user.latestPost.replyId ? user.latestPost.replyId.toString() : null,
-			repost: user.latestPost.repostId ? user.latestPost.repostId.toString() : null,
-			mediaIds: (user.latestPost.mediaIds || []).map(id => id.toString())
+			text: user.latestNote.text,
+			reply: user.latestNote.replyId ? user.latestNote.replyId.toString() : null,
+			renote: user.latestNote.renoteId ? user.latestNote.renoteId.toString() : null,
+			mediaIds: (user.latestNote.mediaIds || []).map(id => id.toString())
 		}, {
 			text: text,
 			reply: reply ? reply._id.toString() : null,
-			repost: repost ? repost._id.toString() : null,
+			renote: renote ? renote._id.toString() : null,
 			mediaIds: (files || []).map(file => file._id.toString())
 		})) {
 			return rej('duplicate');
@@ -227,13 +227,13 @@ module.exports = (params, user: ILocalUser, app: IApp) => new Promise(async (res
 	}
 
 	// 投稿を作成
-	const post = await create(user, {
+	const note = await create(user, {
 		createdAt: new Date(),
 		media: files,
 		poll: poll,
 		text: text,
 		reply,
-		repost,
+		renote,
 		cw: cw,
 		tags: tags,
 		app: app,
@@ -242,10 +242,10 @@ module.exports = (params, user: ILocalUser, app: IApp) => new Promise(async (res
 		geo
 	});
 
-	const postObj = await pack(post, user);
+	const noteObj = await pack(note, user);
 
 	// Reponse
 	res({
-		createdPost: postObj
+		createdNote: noteObj
 	});
 });
diff --git a/src/server/api/endpoints/posts/favorites/create.ts b/src/server/api/endpoints/posts/favorites/create.ts
deleted file mode 100644
index f537fb7ddf..0000000000
--- a/src/server/api/endpoints/posts/favorites/create.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-import Favorite from '../../../../../models/favorite';
-import Post from '../../../../../models/post';
-
-/**
- * Favorite a post
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
- */
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// Get 'postId' parameter
-	const [postId, postIdErr] = $(params.postId).id().$;
-	if (postIdErr) return rej('invalid postId param');
-
-	// Get favoritee
-	const post = await Post.findOne({
-		_id: postId
-	});
-
-	if (post === null) {
-		return rej('post not found');
-	}
-
-	// if already favorited
-	const exist = await Favorite.findOne({
-		postId: post._id,
-		userId: user._id
-	});
-
-	if (exist !== null) {
-		return rej('already favorited');
-	}
-
-	// Create favorite
-	await Favorite.insert({
-		createdAt: new Date(),
-		postId: post._id,
-		userId: user._id
-	});
-
-	// Send response
-	res();
-});
diff --git a/src/server/api/endpoints/posts/favorites/delete.ts b/src/server/api/endpoints/posts/favorites/delete.ts
deleted file mode 100644
index 28930337a3..0000000000
--- a/src/server/api/endpoints/posts/favorites/delete.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-import Favorite from '../../../../../models/favorite';
-import Post from '../../../../../models/post';
-
-/**
- * Unfavorite a post
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
- */
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// Get 'postId' parameter
-	const [postId, postIdErr] = $(params.postId).id().$;
-	if (postIdErr) return rej('invalid postId param');
-
-	// Get favoritee
-	const post = await Post.findOne({
-		_id: postId
-	});
-
-	if (post === null) {
-		return rej('post not found');
-	}
-
-	// if already favorited
-	const exist = await Favorite.findOne({
-		postId: post._id,
-		userId: user._id
-	});
-
-	if (exist === null) {
-		return rej('already not favorited');
-	}
-
-	// Delete favorite
-	await Favorite.remove({
-		_id: exist._id
-	});
-
-	// Send response
-	res();
-});
diff --git a/src/server/api/endpoints/posts/mentions.ts b/src/server/api/endpoints/posts/mentions.ts
deleted file mode 100644
index d7302c0620..0000000000
--- a/src/server/api/endpoints/posts/mentions.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-import Post from '../../../../models/post';
-import getFriends from '../../common/get-friends';
-import { pack } from '../../../../models/post';
-
-/**
- * Get mentions of myself
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
- */
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// Get 'following' parameter
-	const [following = false, followingError] =
-		$(params.following).optional.boolean().$;
-	if (followingError) return rej('invalid following param');
-
-	// Get 'limit' parameter
-	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
-	if (limitErr) return rej('invalid limit param');
-
-	// Get 'sinceId' parameter
-	const [sinceId, sinceIdErr] = $(params.sinceId).optional.id().$;
-	if (sinceIdErr) return rej('invalid sinceId param');
-
-	// Get 'untilId' parameter
-	const [untilId, untilIdErr] = $(params.untilId).optional.id().$;
-	if (untilIdErr) return rej('invalid untilId param');
-
-	// Check if both of sinceId and untilId is specified
-	if (sinceId && untilId) {
-		return rej('cannot set sinceId and untilId');
-	}
-
-	// Construct query
-	const query = {
-		mentions: user._id
-	} as any;
-
-	const sort = {
-		_id: -1
-	};
-
-	if (following) {
-		const followingIds = await getFriends(user._id);
-
-		query.userId = {
-			$in: followingIds
-		};
-	}
-
-	if (sinceId) {
-		sort._id = 1;
-		query._id = {
-			$gt: sinceId
-		};
-	} else if (untilId) {
-		query._id = {
-			$lt: untilId
-		};
-	}
-
-	// Issue query
-	const mentions = await Post
-		.find(query, {
-			limit: limit,
-			sort: sort
-		});
-
-	// Serialize
-	res(await Promise.all(mentions.map(async mention =>
-		await pack(mention, user)
-	)));
-});
diff --git a/src/server/api/endpoints/posts/polls/recommendation.ts b/src/server/api/endpoints/posts/polls/recommendation.ts
deleted file mode 100644
index d706742618..0000000000
--- a/src/server/api/endpoints/posts/polls/recommendation.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-import Vote from '../../../../../models/poll-vote';
-import Post, { pack } from '../../../../../models/post';
-
-/**
- * Get recommended polls
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
- */
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// Get 'limit' parameter
-	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
-	if (limitErr) return rej('invalid limit param');
-
-	// Get 'offset' parameter
-	const [offset = 0, offsetErr] = $(params.offset).optional.number().min(0).$;
-	if (offsetErr) return rej('invalid offset param');
-
-	// Get votes
-	const votes = await Vote.find({
-		userId: user._id
-	}, {
-		fields: {
-			_id: false,
-			postId: true
-		}
-	});
-
-	const nin = votes && votes.length != 0 ? votes.map(v => v.postId) : [];
-
-	const posts = await Post
-		.find({
-			_id: {
-				$nin: nin
-			},
-			userId: {
-				$ne: user._id
-			},
-			poll: {
-				$exists: true,
-				$ne: null
-			}
-		}, {
-			limit: limit,
-			skip: offset,
-			sort: {
-				_id: -1
-			}
-		});
-
-	// Serialize
-	res(await Promise.all(posts.map(async post =>
-		await pack(post, user, { detail: true }))));
-});
diff --git a/src/server/api/endpoints/posts/polls/vote.ts b/src/server/api/endpoints/posts/polls/vote.ts
deleted file mode 100644
index c270cd09ab..0000000000
--- a/src/server/api/endpoints/posts/polls/vote.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-import Vote from '../../../../../models/poll-vote';
-import Post from '../../../../../models/post';
-import Watching from '../../../../../models/post-watching';
-import watch from '../../../../../post/watch';
-import { publishPostStream } from '../../../../../publishers/stream';
-import notify from '../../../../../publishers/notify';
-
-/**
- * Vote poll of a post
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
- */
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// Get 'postId' parameter
-	const [postId, postIdErr] = $(params.postId).id().$;
-	if (postIdErr) return rej('invalid postId param');
-
-	// Get votee
-	const post = await Post.findOne({
-		_id: postId
-	});
-
-	if (post === null) {
-		return rej('post not found');
-	}
-
-	if (post.poll == null) {
-		return rej('poll not found');
-	}
-
-	// Get 'choice' parameter
-	const [choice, choiceError] =
-		$(params.choice).number()
-			.pipe(c => post.poll.choices.some(x => x.id == c))
-			.$;
-	if (choiceError) return rej('invalid choice param');
-
-	// if already voted
-	const exist = await Vote.findOne({
-		postId: post._id,
-		userId: user._id
-	});
-
-	if (exist !== null) {
-		return rej('already voted');
-	}
-
-	// Create vote
-	await Vote.insert({
-		createdAt: new Date(),
-		postId: post._id,
-		userId: user._id,
-		choice: choice
-	});
-
-	// Send response
-	res();
-
-	const inc = {};
-	inc[`poll.choices.${findWithAttr(post.poll.choices, 'id', choice)}.votes`] = 1;
-
-	// Increment votes count
-	await Post.update({ _id: post._id }, {
-		$inc: inc
-	});
-
-	publishPostStream(post._id, 'poll_voted');
-
-	// Notify
-	notify(post.userId, user._id, 'poll_vote', {
-		postId: post._id,
-		choice: choice
-	});
-
-	// Fetch watchers
-	Watching
-		.find({
-			postId: post._id,
-			userId: { $ne: user._id },
-			// 削除されたドキュメントは除く
-			deletedAt: { $exists: false }
-		}, {
-			fields: {
-				userId: true
-			}
-		})
-		.then(watchers => {
-			watchers.forEach(watcher => {
-				notify(watcher.userId, user._id, 'poll_vote', {
-					postId: post._id,
-					choice: choice
-				});
-			});
-		});
-
-	// この投稿をWatchする
-	if (user.account.settings.autoWatch !== false) {
-		watch(user._id, post);
-	}
-});
-
-function findWithAttr(array, attr, value) {
-	for (let i = 0; i < array.length; i += 1) {
-		if (array[i][attr] === value) {
-			return i;
-		}
-	}
-	return -1;
-}
diff --git a/src/server/api/endpoints/posts/reactions.ts b/src/server/api/endpoints/posts/reactions.ts
deleted file mode 100644
index da733f5337..0000000000
--- a/src/server/api/endpoints/posts/reactions.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-import Post from '../../../../models/post';
-import Reaction, { pack } from '../../../../models/post-reaction';
-
-/**
- * Show reactions of a post
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
- */
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// Get 'postId' parameter
-	const [postId, postIdErr] = $(params.postId).id().$;
-	if (postIdErr) return rej('invalid postId param');
-
-	// Get 'limit' parameter
-	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
-	if (limitErr) return rej('invalid limit param');
-
-	// Get 'offset' parameter
-	const [offset = 0, offsetErr] = $(params.offset).optional.number().min(0).$;
-	if (offsetErr) return rej('invalid offset param');
-
-	// Get 'sort' parameter
-	const [sort = 'desc', sortError] = $(params.sort).optional.string().or('desc asc').$;
-	if (sortError) return rej('invalid sort param');
-
-	// Lookup post
-	const post = await Post.findOne({
-		_id: postId
-	});
-
-	if (post === null) {
-		return rej('post not found');
-	}
-
-	// Issue query
-	const reactions = await Reaction
-		.find({
-			postId: post._id,
-			deletedAt: { $exists: false }
-		}, {
-			limit: limit,
-			skip: offset,
-			sort: {
-				_id: sort == 'asc' ? 1 : -1
-			}
-		});
-
-	// Serialize
-	res(await Promise.all(reactions.map(async reaction =>
-		await pack(reaction, user))));
-});
diff --git a/src/server/api/endpoints/posts/reactions/create.ts b/src/server/api/endpoints/posts/reactions/create.ts
deleted file mode 100644
index 71fa6a2955..0000000000
--- a/src/server/api/endpoints/posts/reactions/create.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-import Reaction from '../../../../../models/post-reaction';
-import Post from '../../../../../models/post';
-import create from '../../../../../services/post/reaction/create';
-
-/**
- * React to a post
- */
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// Get 'postId' parameter
-	const [postId, postIdErr] = $(params.postId).id().$;
-	if (postIdErr) return rej('invalid postId param');
-
-	// Get 'reaction' parameter
-	const [reaction, reactionErr] = $(params.reaction).string().or([
-		'like',
-		'love',
-		'laugh',
-		'hmm',
-		'surprise',
-		'congrats',
-		'angry',
-		'confused',
-		'pudding'
-	]).$;
-	if (reactionErr) return rej('invalid reaction param');
-
-	// Fetch reactee
-	const post = await Post.findOne({
-		_id: postId
-	});
-
-	if (post === null) {
-		return rej('post not found');
-	}
-
-	try {
-		await create(user, post, reaction);
-	} catch (e) {
-		rej(e);
-	}
-
-	res();
-});
diff --git a/src/server/api/endpoints/posts/reactions/delete.ts b/src/server/api/endpoints/posts/reactions/delete.ts
deleted file mode 100644
index 3a88bbd7ca..0000000000
--- a/src/server/api/endpoints/posts/reactions/delete.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-import Reaction from '../../../../../models/post-reaction';
-import Post from '../../../../../models/post';
-// import event from '../../../publishers/stream';
-
-/**
- * Unreact to a post
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
- */
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// Get 'postId' parameter
-	const [postId, postIdErr] = $(params.postId).id().$;
-	if (postIdErr) return rej('invalid postId param');
-
-	// Fetch unreactee
-	const post = await Post.findOne({
-		_id: postId
-	});
-
-	if (post === null) {
-		return rej('post not found');
-	}
-
-	// if already unreacted
-	const exist = await Reaction.findOne({
-		postId: post._id,
-		userId: user._id,
-		deletedAt: { $exists: false }
-	});
-
-	if (exist === null) {
-		return rej('never reacted');
-	}
-
-	// Delete reaction
-	await Reaction.update({
-		_id: exist._id
-	}, {
-			$set: {
-				deletedAt: new Date()
-			}
-		});
-
-	// Send response
-	res();
-
-	const dec = {};
-	dec[`reactionCounts.${exist.reaction}`] = -1;
-
-	// Decrement reactions count
-	Post.update({ _id: post._id }, {
-		$inc: dec
-	});
-});
diff --git a/src/server/api/endpoints/posts/replies.ts b/src/server/api/endpoints/posts/replies.ts
deleted file mode 100644
index dd5a95c173..0000000000
--- a/src/server/api/endpoints/posts/replies.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-import Post, { pack } from '../../../../models/post';
-
-/**
- * Show a replies of a post
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
- */
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// Get 'postId' parameter
-	const [postId, postIdErr] = $(params.postId).id().$;
-	if (postIdErr) return rej('invalid postId param');
-
-	// Get 'limit' parameter
-	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
-	if (limitErr) return rej('invalid limit param');
-
-	// Get 'offset' parameter
-	const [offset = 0, offsetErr] = $(params.offset).optional.number().min(0).$;
-	if (offsetErr) return rej('invalid offset param');
-
-	// Get 'sort' parameter
-	const [sort = 'desc', sortError] = $(params.sort).optional.string().or('desc asc').$;
-	if (sortError) return rej('invalid sort param');
-
-	// Lookup post
-	const post = await Post.findOne({
-		_id: postId
-	});
-
-	if (post === null) {
-		return rej('post not found');
-	}
-
-	// Issue query
-	const replies = await Post
-		.find({ replyId: post._id }, {
-			limit: limit,
-			skip: offset,
-			sort: {
-				_id: sort == 'asc' ? 1 : -1
-			}
-		});
-
-	// Serialize
-	res(await Promise.all(replies.map(async post =>
-		await pack(post, user))));
-});
diff --git a/src/server/api/endpoints/posts/reposts.ts b/src/server/api/endpoints/posts/reposts.ts
deleted file mode 100644
index ec6218ca38..0000000000
--- a/src/server/api/endpoints/posts/reposts.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-import Post, { pack } from '../../../../models/post';
-
-/**
- * Show a reposts of a post
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
- */
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// Get 'postId' parameter
-	const [postId, postIdErr] = $(params.postId).id().$;
-	if (postIdErr) return rej('invalid postId param');
-
-	// Get 'limit' parameter
-	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
-	if (limitErr) return rej('invalid limit param');
-
-	// Get 'sinceId' parameter
-	const [sinceId, sinceIdErr] = $(params.sinceId).optional.id().$;
-	if (sinceIdErr) return rej('invalid sinceId param');
-
-	// Get 'untilId' parameter
-	const [untilId, untilIdErr] = $(params.untilId).optional.id().$;
-	if (untilIdErr) return rej('invalid untilId param');
-
-	// Check if both of sinceId and untilId is specified
-	if (sinceId && untilId) {
-		return rej('cannot set sinceId and untilId');
-	}
-
-	// Lookup post
-	const post = await Post.findOne({
-		_id: postId
-	});
-
-	if (post === null) {
-		return rej('post not found');
-	}
-
-	// Construct query
-	const sort = {
-		_id: -1
-	};
-	const query = {
-		repostId: post._id
-	} as any;
-	if (sinceId) {
-		sort._id = 1;
-		query._id = {
-			$gt: sinceId
-		};
-	} else if (untilId) {
-		query._id = {
-			$lt: untilId
-		};
-	}
-
-	// Issue query
-	const reposts = await Post
-		.find(query, {
-			limit: limit,
-			sort: sort
-		});
-
-	// Serialize
-	res(await Promise.all(reposts.map(async post =>
-		await pack(post, user))));
-});
diff --git a/src/server/api/endpoints/posts/search.ts b/src/server/api/endpoints/posts/search.ts
deleted file mode 100644
index 21c4e77fdd..0000000000
--- a/src/server/api/endpoints/posts/search.ts
+++ /dev/null
@@ -1,364 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-const escapeRegexp = require('escape-regexp');
-import Post from '../../../../models/post';
-import User from '../../../../models/user';
-import Mute from '../../../../models/mute';
-import getFriends from '../../common/get-friends';
-import { pack } from '../../../../models/post';
-
-/**
- * Search a post
- *
- * @param {any} params
- * @param {any} me
- * @return {Promise<any>}
- */
-module.exports = (params, me) => new Promise(async (res, rej) => {
-	// Get 'text' parameter
-	const [text, textError] = $(params.text).optional.string().$;
-	if (textError) return rej('invalid text param');
-
-	// Get 'includeUserIds' parameter
-	const [includeUserIds = [], includeUserIdsErr] = $(params.includeUserIds).optional.array('id').$;
-	if (includeUserIdsErr) return rej('invalid includeUserIds param');
-
-	// Get 'excludeUserIds' parameter
-	const [excludeUserIds = [], excludeUserIdsErr] = $(params.excludeUserIds).optional.array('id').$;
-	if (excludeUserIdsErr) return rej('invalid excludeUserIds param');
-
-	// Get 'includeUserUsernames' parameter
-	const [includeUserUsernames = [], includeUserUsernamesErr] = $(params.includeUserUsernames).optional.array('string').$;
-	if (includeUserUsernamesErr) return rej('invalid includeUserUsernames param');
-
-	// Get 'excludeUserUsernames' parameter
-	const [excludeUserUsernames = [], excludeUserUsernamesErr] = $(params.excludeUserUsernames).optional.array('string').$;
-	if (excludeUserUsernamesErr) return rej('invalid excludeUserUsernames param');
-
-	// Get 'following' parameter
-	const [following = null, followingErr] = $(params.following).optional.nullable.boolean().$;
-	if (followingErr) return rej('invalid following param');
-
-	// Get 'mute' parameter
-	const [mute = 'mute_all', muteErr] = $(params.mute).optional.string().$;
-	if (muteErr) return rej('invalid mute param');
-
-	// Get 'reply' parameter
-	const [reply = null, replyErr] = $(params.reply).optional.nullable.boolean().$;
-	if (replyErr) return rej('invalid reply param');
-
-	// Get 'repost' parameter
-	const [repost = null, repostErr] = $(params.repost).optional.nullable.boolean().$;
-	if (repostErr) return rej('invalid repost param');
-
-	// Get 'media' parameter
-	const [media = null, mediaErr] = $(params.media).optional.nullable.boolean().$;
-	if (mediaErr) return rej('invalid media param');
-
-	// Get 'poll' parameter
-	const [poll = null, pollErr] = $(params.poll).optional.nullable.boolean().$;
-	if (pollErr) return rej('invalid poll param');
-
-	// Get 'sinceDate' parameter
-	const [sinceDate, sinceDateErr] = $(params.sinceDate).optional.number().$;
-	if (sinceDateErr) throw 'invalid sinceDate param';
-
-	// Get 'untilDate' parameter
-	const [untilDate, untilDateErr] = $(params.untilDate).optional.number().$;
-	if (untilDateErr) throw 'invalid untilDate param';
-
-	// Get 'offset' parameter
-	const [offset = 0, offsetErr] = $(params.offset).optional.number().min(0).$;
-	if (offsetErr) return rej('invalid offset param');
-
-	// Get 'limit' parameter
-	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 30).$;
-	if (limitErr) return rej('invalid limit param');
-
-	let includeUsers = includeUserIds;
-	if (includeUserUsernames != null) {
-		const ids = (await Promise.all(includeUserUsernames.map(async (username) => {
-			const _user = await User.findOne({
-				usernameLower: username.toLowerCase()
-			});
-			return _user ? _user._id : null;
-		}))).filter(id => id != null);
-		includeUsers = includeUsers.concat(ids);
-	}
-
-	let excludeUsers = excludeUserIds;
-	if (excludeUserUsernames != null) {
-		const ids = (await Promise.all(excludeUserUsernames.map(async (username) => {
-			const _user = await User.findOne({
-				usernameLower: username.toLowerCase()
-			});
-			return _user ? _user._id : null;
-		}))).filter(id => id != null);
-		excludeUsers = excludeUsers.concat(ids);
-	}
-
-	search(res, rej, me, text, includeUsers, excludeUsers, following,
-			mute, reply, repost, media, poll, sinceDate, untilDate, offset, limit);
-});
-
-async function search(
-	res, rej, me, text, includeUserIds, excludeUserIds, following,
-	mute, reply, repost, media, poll, sinceDate, untilDate, offset, max) {
-
-	let q: any = {
-		$and: []
-	};
-
-	const push = x => q.$and.push(x);
-
-	if (text) {
-		// 完全一致検索
-		if (/"""(.+?)"""/.test(text)) {
-			const x = text.match(/"""(.+?)"""/)[1];
-			push({
-				text: x
-			});
-		} else {
-			const tags = text.split(' ').filter(x => x[0] == '#');
-			if (tags) {
-				push({
-					$and: tags.map(x => ({
-						tags: x
-					}))
-				});
-			}
-
-			push({
-				$and: text.split(' ').map(x => ({
-					// キーワードが-で始まる場合そのキーワードを除外する
-					text: x[0] == '-' ? {
-						$not: new RegExp(escapeRegexp(x.substr(1)))
-					} : new RegExp(escapeRegexp(x))
-				}))
-			});
-		}
-	}
-
-	if (includeUserIds && includeUserIds.length != 0) {
-		push({
-			userId: {
-				$in: includeUserIds
-			}
-		});
-	} else if (excludeUserIds && excludeUserIds.length != 0) {
-		push({
-			userId: {
-				$nin: excludeUserIds
-			}
-		});
-	}
-
-	if (following != null && me != null) {
-		const ids = await getFriends(me._id, false);
-		push({
-			userId: following ? {
-				$in: ids
-			} : {
-				$nin: ids.concat(me._id)
-			}
-		});
-	}
-
-	if (me != null) {
-		const mutes = await Mute.find({
-			muterId: me._id,
-			deletedAt: { $exists: false }
-		});
-		const mutedUserIds = mutes.map(m => m.muteeId);
-
-		switch (mute) {
-			case 'mute_all':
-				push({
-					userId: {
-						$nin: mutedUserIds
-					},
-					'_reply.userId': {
-						$nin: mutedUserIds
-					},
-					'_repost.userId': {
-						$nin: mutedUserIds
-					}
-				});
-				break;
-			case 'mute_related':
-				push({
-					'_reply.userId': {
-						$nin: mutedUserIds
-					},
-					'_repost.userId': {
-						$nin: mutedUserIds
-					}
-				});
-				break;
-			case 'mute_direct':
-				push({
-					userId: {
-						$nin: mutedUserIds
-					}
-				});
-				break;
-			case 'direct_only':
-				push({
-					userId: {
-						$in: mutedUserIds
-					}
-				});
-				break;
-			case 'related_only':
-				push({
-					$or: [{
-						'_reply.userId': {
-							$in: mutedUserIds
-						}
-					}, {
-						'_repost.userId': {
-							$in: mutedUserIds
-						}
-					}]
-				});
-				break;
-			case 'all_only':
-				push({
-					$or: [{
-						userId: {
-							$in: mutedUserIds
-						}
-					}, {
-						'_reply.userId': {
-							$in: mutedUserIds
-						}
-					}, {
-						'_repost.userId': {
-							$in: mutedUserIds
-						}
-					}]
-				});
-				break;
-		}
-	}
-
-	if (reply != null) {
-		if (reply) {
-			push({
-				replyId: {
-					$exists: true,
-					$ne: null
-				}
-			});
-		} else {
-			push({
-				$or: [{
-					replyId: {
-						$exists: false
-					}
-				}, {
-					replyId: null
-				}]
-			});
-		}
-	}
-
-	if (repost != null) {
-		if (repost) {
-			push({
-				repostId: {
-					$exists: true,
-					$ne: null
-				}
-			});
-		} else {
-			push({
-				$or: [{
-					repostId: {
-						$exists: false
-					}
-				}, {
-					repostId: null
-				}]
-			});
-		}
-	}
-
-	if (media != null) {
-		if (media) {
-			push({
-				mediaIds: {
-					$exists: true,
-					$ne: null
-				}
-			});
-		} else {
-			push({
-				$or: [{
-					mediaIds: {
-						$exists: false
-					}
-				}, {
-					mediaIds: null
-				}]
-			});
-		}
-	}
-
-	if (poll != null) {
-		if (poll) {
-			push({
-				poll: {
-					$exists: true,
-					$ne: null
-				}
-			});
-		} else {
-			push({
-				$or: [{
-					poll: {
-						$exists: false
-					}
-				}, {
-					poll: null
-				}]
-			});
-		}
-	}
-
-	if (sinceDate) {
-		push({
-			createdAt: {
-				$gt: new Date(sinceDate)
-			}
-		});
-	}
-
-	if (untilDate) {
-		push({
-			createdAt: {
-				$lt: new Date(untilDate)
-			}
-		});
-	}
-
-	if (q.$and.length == 0) {
-		q = {};
-	}
-
-	// Search posts
-	const posts = await Post
-		.find(q, {
-			sort: {
-				_id: -1
-			},
-			limit: max,
-			skip: offset
-		});
-
-	// Serialize
-	res(await Promise.all(posts.map(async post =>
-		await pack(post, me))));
-}
diff --git a/src/server/api/endpoints/posts/show.ts b/src/server/api/endpoints/posts/show.ts
deleted file mode 100644
index e1781b545c..0000000000
--- a/src/server/api/endpoints/posts/show.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-import Post, { pack } from '../../../../models/post';
-
-/**
- * Show a post
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
- */
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// Get 'postId' parameter
-	const [postId, postIdErr] = $(params.postId).id().$;
-	if (postIdErr) return rej('invalid postId param');
-
-	// Get post
-	const post = await Post.findOne({
-		_id: postId
-	});
-
-	if (post === null) {
-		return rej('post not found');
-	}
-
-	// Serialize
-	res(await pack(post, user, {
-		detail: true
-	}));
-});
diff --git a/src/server/api/endpoints/posts/timeline.ts b/src/server/api/endpoints/posts/timeline.ts
deleted file mode 100644
index b58d25fa80..0000000000
--- a/src/server/api/endpoints/posts/timeline.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * Module dependencies
- */
-import $ from 'cafy';
-import rap from '@prezzemolo/rap';
-import Post from '../../../../models/post';
-import Mute from '../../../../models/mute';
-import ChannelWatching from '../../../../models/channel-watching';
-import getFriends from '../../common/get-friends';
-import { pack } from '../../../../models/post';
-
-/**
- * Get timeline of myself
- *
- * @param {any} params
- * @param {any} user
- * @param {any} app
- * @return {Promise<any>}
- */
-module.exports = async (params, user, app) => {
-	// Get 'limit' parameter
-	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
-	if (limitErr) throw 'invalid limit param';
-
-	// Get 'sinceId' parameter
-	const [sinceId, sinceIdErr] = $(params.sinceId).optional.id().$;
-	if (sinceIdErr) throw 'invalid sinceId param';
-
-	// Get 'untilId' parameter
-	const [untilId, untilIdErr] = $(params.untilId).optional.id().$;
-	if (untilIdErr) throw 'invalid untilId param';
-
-	// Get 'sinceDate' parameter
-	const [sinceDate, sinceDateErr] = $(params.sinceDate).optional.number().$;
-	if (sinceDateErr) throw 'invalid sinceDate param';
-
-	// Get 'untilDate' parameter
-	const [untilDate, untilDateErr] = $(params.untilDate).optional.number().$;
-	if (untilDateErr) throw 'invalid untilDate param';
-
-	// Check if only one of sinceId, untilId, sinceDate, untilDate specified
-	if ([sinceId, untilId, sinceDate, untilDate].filter(x => x != null).length > 1) {
-		throw 'only one of sinceId, untilId, sinceDate, untilDate can be specified';
-	}
-
-	const { followingIds, watchingChannelIds, mutedUserIds } = await rap({
-		// ID list of the user itself and other users who the user follows
-		followingIds: getFriends(user._id),
-
-		// Watchしているチャンネルを取得
-		watchingChannelIds: ChannelWatching.find({
-			userId: user._id,
-			// 削除されたドキュメントは除く
-			deletedAt: { $exists: false }
-		}).then(watches => watches.map(w => w.channelId)),
-
-		// ミュートしているユーザーを取得
-		mutedUserIds: Mute.find({
-			muterId: user._id,
-			// 削除されたドキュメントは除く
-			deletedAt: { $exists: false }
-		}).then(ms => ms.map(m => m.muteeId))
-	});
-
-	//#region Construct query
-	const sort = {
-		_id: -1
-	};
-
-	const query = {
-		$or: [{
-			// フォローしている人のタイムラインへの投稿
-			userId: {
-				$in: followingIds
-			},
-			// 「タイムラインへの」投稿に限定するためにチャンネルが指定されていないもののみに限る
-			$or: [{
-				channelId: {
-					$exists: false
-				}
-			}, {
-				channelId: null
-			}]
-		}, {
-			// Watchしているチャンネルへの投稿
-			channelId: {
-				$in: watchingChannelIds
-			}
-		}],
-		// mute
-		userId: {
-			$nin: mutedUserIds
-		},
-		'_reply.userId': {
-			$nin: mutedUserIds
-		},
-		'_repost.userId': {
-			$nin: mutedUserIds
-		},
-	} as any;
-
-	if (sinceId) {
-		sort._id = 1;
-		query._id = {
-			$gt: sinceId
-		};
-	} else if (untilId) {
-		query._id = {
-			$lt: untilId
-		};
-	} else if (sinceDate) {
-		sort._id = 1;
-		query.createdAt = {
-			$gt: new Date(sinceDate)
-		};
-	} else if (untilDate) {
-		query.createdAt = {
-			$lt: new Date(untilDate)
-		};
-	}
-	//#endregion
-
-	// Issue query
-	const timeline = await Post
-		.find(query, {
-			limit: limit,
-			sort: sort
-		});
-
-	// Serialize
-	return await Promise.all(timeline.map(post => pack(post, user)));
-};
diff --git a/src/server/api/endpoints/posts/trend.ts b/src/server/api/endpoints/posts/trend.ts
deleted file mode 100644
index dbee169138..0000000000
--- a/src/server/api/endpoints/posts/trend.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * Module dependencies
- */
-const ms = require('ms');
-import $ from 'cafy';
-import Post, { pack } from '../../../../models/post';
-
-/**
- * Get trend posts
- *
- * @param {any} params
- * @param {any} user
- * @return {Promise<any>}
- */
-module.exports = (params, user) => new Promise(async (res, rej) => {
-	// Get 'limit' parameter
-	const [limit = 10, limitErr] = $(params.limit).optional.number().range(1, 100).$;
-	if (limitErr) return rej('invalid limit param');
-
-	// Get 'offset' parameter
-	const [offset = 0, offsetErr] = $(params.offset).optional.number().min(0).$;
-	if (offsetErr) return rej('invalid offset param');
-
-	// Get 'reply' parameter
-	const [reply, replyErr] = $(params.reply).optional.boolean().$;
-	if (replyErr) return rej('invalid reply param');
-
-	// Get 'repost' parameter
-	const [repost, repostErr] = $(params.repost).optional.boolean().$;
-	if (repostErr) return rej('invalid repost param');
-
-	// Get 'media' parameter
-	const [media, mediaErr] = $(params.media).optional.boolean().$;
-	if (mediaErr) return rej('invalid media param');
-
-	// Get 'poll' parameter
-	const [poll, pollErr] = $(params.poll).optional.boolean().$;
-	if (pollErr) return rej('invalid poll param');
-
-	const query = {
-		createdAt: {
-			$gte: new Date(Date.now() - ms('1days'))
-		},
-		repostCount: {
-			$gt: 0
-		}
-	} as any;
-
-	if (reply != undefined) {
-		query.replyId = reply ? { $exists: true, $ne: null } : null;
-	}
-
-	if (repost != undefined) {
-		query.repostId = repost ? { $exists: true, $ne: null } : null;
-	}
-
-	if (media != undefined) {
-		query.mediaIds = media ? { $exists: true, $ne: null } : null;
-	}
-
-	if (poll != undefined) {
-		query.poll = poll ? { $exists: true, $ne: null } : null;
-	}
-
-	// Issue query
-	const posts = await Post
-		.find(query, {
-			limit: limit,
-			skip: offset,
-			sort: {
-				repostCount: -1,
-				_id: -1
-			}
-		});
-
-	// Serialize
-	res(await Promise.all(posts.map(async post =>
-		await pack(post, user, { detail: true }))));
-});
diff --git a/src/server/api/endpoints/stats.ts b/src/server/api/endpoints/stats.ts
index 0fb0c44b0f..52e5195484 100644
--- a/src/server/api/endpoints/stats.ts
+++ b/src/server/api/endpoints/stats.ts
@@ -1,13 +1,13 @@
 /**
  * Module dependencies
  */
-import Post from '../../../models/post';
+import Note from '../../../models/note';
 import User from '../../../models/user';
 
 /**
  * @swagger
  * /stats:
- *   post:
+ *   note:
  *     summary: Show the misskey's statistics
  *     responses:
  *       200:
@@ -15,8 +15,8 @@ import User from '../../../models/user';
  *         schema:
  *           type: object
  *           properties:
- *             postsCount:
- *               description: count of all posts of misskey
+ *             notesCount:
+ *               description: count of all notes of misskey
  *               type: number
  *             usersCount:
  *               description: count of all users of misskey
@@ -35,14 +35,14 @@ import User from '../../../models/user';
  * @return {Promise<any>}
  */
 module.exports = params => new Promise(async (res, rej) => {
-	const postsCount = await Post
+	const notesCount = await Note
 		.count();
 
 	const usersCount = await User
 		.count();
 
 	res({
-		postsCount: postsCount,
+		notesCount: notesCount,
 		usersCount: usersCount
 	});
 });
diff --git a/src/server/api/endpoints/users/get_frequently_replied_users.ts b/src/server/api/endpoints/users/get_frequently_replied_users.ts
index 3a116c8e26..7a98f44e98 100644
--- a/src/server/api/endpoints/users/get_frequently_replied_users.ts
+++ b/src/server/api/endpoints/users/get_frequently_replied_users.ts
@@ -2,7 +2,7 @@
  * Module dependencies
  */
 import $ from 'cafy';
-import Post from '../../../../models/post';
+import Note from '../../../../models/note';
 import User, { pack } from '../../../../models/user';
 
 module.exports = (params, me) => new Promise(async (res, rej) => {
@@ -27,8 +27,8 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 		return rej('user not found');
 	}
 
-	// Fetch recent posts
-	const recentPosts = await Post.find({
+	// Fetch recent notes
+	const recentNotes = await Note.find({
 		userId: user._id,
 		replyId: {
 			$exists: true,
@@ -46,13 +46,13 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 	});
 
 	// 投稿が少なかったら中断
-	if (recentPosts.length === 0) {
+	if (recentNotes.length === 0) {
 		return res([]);
 	}
 
-	const replyTargetPosts = await Post.find({
+	const replyTargetNotes = await Note.find({
 		_id: {
-			$in: recentPosts.map(p => p.replyId)
+			$in: recentNotes.map(p => p.replyId)
 		},
 		userId: {
 			$ne: user._id
@@ -66,9 +66,9 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 
 	const repliedUsers = {};
 
-	// Extract replies from recent posts
-	replyTargetPosts.forEach(post => {
-		const userId = post.userId.toString();
+	// Extract replies from recent notes
+	replyTargetNotes.forEach(note => {
+		const userId = note.userId.toString();
 		if (repliedUsers[userId]) {
 			repliedUsers[userId]++;
 		} else {
diff --git a/src/server/api/endpoints/users/posts.ts b/src/server/api/endpoints/users/posts.ts
index b6c533fb5b..f9f6345e34 100644
--- a/src/server/api/endpoints/users/posts.ts
+++ b/src/server/api/endpoints/users/posts.ts
@@ -3,11 +3,11 @@
  */
 import $ from 'cafy';
 import getHostLower from '../../common/get-host-lower';
-import Post, { pack } from '../../../../models/post';
+import Note, { pack } from '../../../../models/note';
 import User from '../../../../models/user';
 
 /**
- * Get posts of a user
+ * Get notes of a user
  *
  * @param {any} params
  * @param {any} me
@@ -124,14 +124,14 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 	//#endregion
 
 	// Issue query
-	const posts = await Post
+	const notes = await Note
 		.find(query, {
 			limit: limit,
 			sort: sort
 		});
 
 	// Serialize
-	res(await Promise.all(posts.map(async (post) =>
-		await pack(post, me)
+	res(await Promise.all(notes.map(async (note) =>
+		await pack(note, me)
 	)));
 });
diff --git a/src/server/api/private/signup.ts b/src/server/api/private/signup.ts
index c54d6f1a1b..5818ba25cd 100644
--- a/src/server/api/private/signup.ts
+++ b/src/server/api/private/signup.ts
@@ -113,7 +113,7 @@ export default async (req: express.Request, res: express.Response) => {
 		followersCount: 0,
 		followingCount: 0,
 		name: null,
-		postsCount: 0,
+		notesCount: 0,
 		driveCapacity: 1024 * 1024 * 128, // 128MiB
 		username: username,
 		usernameLower: username.toLowerCase(),
diff --git a/src/server/api/service/github.ts b/src/server/api/service/github.ts
index 5fc4a92f57..6a327f1f76 100644
--- a/src/server/api/service/github.ts
+++ b/src/server/api/service/github.ts
@@ -18,7 +18,7 @@ module.exports = async (app: express.Application) => {
 		return;
 	}
 
-	const post = text => require('../endpoints/posts/create')({ text }, bot);
+	const post = text => require('../endpoints/notes/create')({ text }, bot);
 
 	const handler = new EventEmitter();
 
diff --git a/src/server/api/stream/home.ts b/src/server/api/stream/home.ts
index 648bd7c3c2..313558851b 100644
--- a/src/server/api/stream/home.ts
+++ b/src/server/api/stream/home.ts
@@ -4,7 +4,7 @@ import * as debug from 'debug';
 
 import User from '../../../models/user';
 import Mute from '../../../models/mute';
-import { pack as packPost } from '../../../models/post';
+import { pack as packNote } from '../../../models/note';
 import readNotification from '../common/read-notification';
 
 const log = debug('misskey');
@@ -25,14 +25,14 @@ export default async function(request: websocket.request, connection: websocket.
 				try {
 					const x = JSON.parse(data);
 
-					if (x.type == 'post') {
+					if (x.type == 'note') {
 						if (mutedUserIds.indexOf(x.body.userId) != -1) {
 							return;
 						}
 						if (x.body.reply != null && mutedUserIds.indexOf(x.body.reply.userId) != -1) {
 							return;
 						}
-						if (x.body.repost != null && mutedUserIds.indexOf(x.body.repost.userId) != -1) {
+						if (x.body.renote != null && mutedUserIds.indexOf(x.body.renote.userId) != -1) {
 							return;
 						}
 					} else if (x.type == 'notification') {
@@ -46,16 +46,16 @@ export default async function(request: websocket.request, connection: websocket.
 					connection.send(data);
 				}
 				break;
-			case 'post-stream':
-				const postId = channel.split(':')[2];
-				log(`RECEIVED: ${postId} ${data} by @${user.username}`);
-				const post = await packPost(postId, user, {
+			case 'note-stream':
+				const noteId = channel.split(':')[2];
+				log(`RECEIVED: ${noteId} ${data} by @${user.username}`);
+				const note = await packNote(noteId, user, {
 					detail: true
 				});
 				connection.send(JSON.stringify({
-					type: 'post-updated',
+					type: 'note-updated',
 					body: {
-						post: post
+						note: note
 					}
 				}));
 				break;
@@ -86,9 +86,9 @@ export default async function(request: websocket.request, connection: websocket.
 
 			case 'capture':
 				if (!msg.id) return;
-				const postId = msg.id;
-				log(`CAPTURE: ${postId} by @${user.username}`);
-				subscriber.subscribe(`misskey:post-stream:${postId}`);
+				const noteId = msg.id;
+				log(`CAPTURE: ${noteId} by @${user.username}`);
+				subscriber.subscribe(`misskey:note-stream:${noteId}`);
 				break;
 		}
 	});
diff --git a/src/services/note/create.ts b/src/services/note/create.ts
new file mode 100644
index 0000000000..8eee8f44af
--- /dev/null
+++ b/src/services/note/create.ts
@@ -0,0 +1,357 @@
+import Note, { pack, INote } from '../../models/note';
+import User, { isLocalUser, IUser, isRemoteUser } from '../../models/user';
+import stream from '../../publishers/stream';
+import Following from '../../models/following';
+import { deliver } from '../../queue';
+import renderNote from '../../remote/activitypub/renderer/note';
+import renderCreate from '../../remote/activitypub/renderer/create';
+import context from '../../remote/activitypub/renderer/context';
+import { IDriveFile } from '../../models/drive-file';
+import notify from '../../publishers/notify';
+import NoteWatching from '../../models/note-watching';
+import watch from './watch';
+import Mute from '../../models/mute';
+import pushSw from '../../publishers/push-sw';
+import event from '../../publishers/stream';
+import parse from '../../text/parse';
+import html from '../../text/html';
+import { IApp } from '../../models/app';
+
+export default async (user: IUser, data: {
+	createdAt?: Date;
+	text?: string;
+	reply?: INote;
+	renote?: INote;
+	media?: IDriveFile[];
+	geo?: any;
+	poll?: any;
+	viaMobile?: boolean;
+	tags?: string[];
+	cw?: string;
+	visibility?: string;
+	uri?: string;
+	app?: IApp;
+}, silent = false) => new Promise<INote>(async (res, rej) => {
+	if (data.createdAt == null) data.createdAt = new Date();
+	if (data.visibility == null) data.visibility = 'public';
+
+	const tags = data.tags || [];
+
+	let tokens = null;
+
+	if (data.text) {
+		// Analyze
+		tokens = parse(data.text);
+
+		// Extract hashtags
+		const hashtags = tokens
+			.filter(t => t.type == 'hashtag')
+			.map(t => t.hashtag);
+
+		hashtags.forEach(tag => {
+			if (tags.indexOf(tag) == -1) {
+				tags.push(tag);
+			}
+		});
+	}
+
+	const insert: any = {
+		createdAt: data.createdAt,
+		mediaIds: data.media ? data.media.map(file => file._id) : [],
+		replyId: data.reply ? data.reply._id : null,
+		renoteId: data.renote ? data.renote._id : null,
+		text: data.text,
+		textHtml: tokens === null ? null : html(tokens),
+		poll: data.poll,
+		cw: data.cw,
+		tags,
+		userId: user._id,
+		viaMobile: data.viaMobile,
+		geo: data.geo || null,
+		appId: data.app ? data.app._id : null,
+		visibility: data.visibility,
+
+		// 以下非正規化データ
+		_reply: data.reply ? { userId: data.reply.userId } : null,
+		_renote: data.renote ? { userId: data.renote.userId } : null,
+		_user: {
+			host: user.host,
+			hostLower: user.hostLower,
+			account: isLocalUser(user) ? {} : {
+				inbox: user.account.inbox
+			}
+		}
+	};
+
+	if (data.uri != null) insert.uri = data.uri;
+
+	// 投稿を作成
+	const note = await Note.insert(insert);
+
+	res(note);
+
+	User.update({ _id: user._id }, {
+		// Increment notes count
+		$inc: {
+			notesCount: 1
+		},
+		// Update latest note
+		$set: {
+			latestNote: note
+		}
+	});
+
+	// Serialize
+	const noteObj = await pack(note);
+
+	// タイムラインへの投稿
+	if (note.channelId == null) {
+		// Publish event to myself's stream
+		if (isLocalUser(user)) {
+			stream(note.userId, 'note', noteObj);
+		}
+
+		// Fetch all followers
+		const followers = await Following.aggregate([{
+			$lookup: {
+				from: 'users',
+				localField: 'followerId',
+				foreignField: '_id',
+				as: 'user'
+			}
+		}, {
+			$match: {
+				followeeId: note.userId
+			}
+		}], {
+			_id: false
+		});
+
+		if (!silent) {
+			const content = renderCreate(await renderNote(user, note));
+			content['@context'] = context;
+
+			// 投稿がリプライかつ投稿者がローカルユーザーかつリプライ先の投稿の投稿者がリモートユーザーなら配送
+			if (data.reply && isLocalUser(user) && isRemoteUser(data.reply._user)) {
+				deliver(user, content, data.reply._user.account.inbox).save();
+			}
+
+			Promise.all(followers.map(follower => {
+				follower = follower.user[0];
+
+				if (isLocalUser(follower)) {
+					// Publish event to followers stream
+					stream(follower._id, 'note', noteObj);
+				} else {
+					// フォロワーがリモートユーザーかつ投稿者がローカルユーザーなら投稿を配信
+					if (isLocalUser(user)) {
+						deliver(user, content, follower.account.inbox).save();
+					}
+				}
+			}));
+		}
+	}
+
+	// チャンネルへの投稿
+	/* TODO
+	if (note.channelId) {
+		promises.push(
+			// Increment channel index(notes count)
+			Channel.update({ _id: note.channelId }, {
+				$inc: {
+					index: 1
+				}
+			}),
+
+			// Publish event to channel
+			promisedNoteObj.then(noteObj => {
+				publishChannelStream(note.channelId, 'note', noteObj);
+			}),
+
+			Promise.all([
+				promisedNoteObj,
+
+				// Get channel watchers
+				ChannelWatching.find({
+					channelId: note.channelId,
+					// 削除されたドキュメントは除く
+					deletedAt: { $exists: false }
+				})
+			]).then(([noteObj, watches]) => {
+				// チャンネルの視聴者(のタイムライン)に配信
+				watches.forEach(w => {
+					stream(w.userId, 'note', noteObj);
+				});
+			})
+		);
+	}*/
+
+	const mentions = [];
+
+	async function addMention(mentionee, reason) {
+		// Reject if already added
+		if (mentions.some(x => x.equals(mentionee))) return;
+
+		// Add mention
+		mentions.push(mentionee);
+
+		// Publish event
+		if (!user._id.equals(mentionee)) {
+			const mentioneeMutes = await Mute.find({
+				muter_id: mentionee,
+				deleted_at: { $exists: false }
+			});
+			const mentioneesMutedUserIds = mentioneeMutes.map(m => m.muteeId.toString());
+			if (mentioneesMutedUserIds.indexOf(user._id.toString()) == -1) {
+				event(mentionee, reason, noteObj);
+				pushSw(mentionee, reason, noteObj);
+			}
+		}
+	}
+
+	// If has in reply to note
+	if (data.reply) {
+		// Increment replies count
+		Note.update({ _id: data.reply._id }, {
+			$inc: {
+				repliesCount: 1
+			}
+		});
+
+		// (自分自身へのリプライでない限りは)通知を作成
+		notify(data.reply.userId, user._id, 'reply', {
+			noteId: note._id
+		});
+
+		// Fetch watchers
+		NoteWatching.find({
+			noteId: data.reply._id,
+			userId: { $ne: user._id },
+			// 削除されたドキュメントは除く
+			deletedAt: { $exists: false }
+		}, {
+			fields: {
+				userId: true
+			}
+		}).then(watchers => {
+			watchers.forEach(watcher => {
+				notify(watcher.userId, user._id, 'reply', {
+					noteId: note._id
+				});
+			});
+		});
+
+		// この投稿をWatchする
+		if (isLocalUser(user) && user.account.settings.autoWatch !== false) {
+			watch(user._id, data.reply);
+		}
+
+		// Add mention
+		addMention(data.reply.userId, 'reply');
+	}
+
+	// If it is renote
+	if (data.renote) {
+		// Notify
+		const type = data.text ? 'quote' : 'renote';
+		notify(data.renote.userId, user._id, type, {
+			note_id: note._id
+		});
+
+		// Fetch watchers
+		NoteWatching.find({
+			noteId: data.renote._id,
+			userId: { $ne: user._id },
+			// 削除されたドキュメントは除く
+			deletedAt: { $exists: false }
+		}, {
+			fields: {
+				userId: true
+			}
+		}).then(watchers => {
+			watchers.forEach(watcher => {
+				notify(watcher.userId, user._id, type, {
+					noteId: note._id
+				});
+			});
+		});
+
+		// この投稿をWatchする
+		if (isLocalUser(user) && user.account.settings.autoWatch !== false) {
+			watch(user._id, data.renote);
+		}
+
+		// If it is quote renote
+		if (data.text) {
+			// Add mention
+			addMention(data.renote.userId, 'quote');
+		} else {
+			// Publish event
+			if (!user._id.equals(data.renote.userId)) {
+				event(data.renote.userId, 'renote', noteObj);
+			}
+		}
+
+		// 今までで同じ投稿をRenoteしているか
+		const existRenote = await Note.findOne({
+			userId: user._id,
+			renoteId: data.renote._id,
+			_id: {
+				$ne: note._id
+			}
+		});
+
+		if (!existRenote) {
+			// Update renoteee status
+			Note.update({ _id: data.renote._id }, {
+				$inc: {
+					renoteCount: 1
+				}
+			});
+		}
+	}
+
+	// If has text content
+	if (data.text) {
+		// Extract an '@' mentions
+		const atMentions = tokens
+			.filter(t => t.type == 'mention')
+			.map(m => m.username)
+			// Drop dupulicates
+			.filter((v, i, s) => s.indexOf(v) == i);
+
+		// Resolve all mentions
+		await Promise.all(atMentions.map(async mention => {
+			// Fetch mentioned user
+			// SELECT _id
+			const mentionee = await User
+				.findOne({
+					usernameLower: mention.toLowerCase()
+				}, { _id: true });
+
+			// When mentioned user not found
+			if (mentionee == null) return;
+
+			// 既に言及されたユーザーに対する返信や引用renoteの場合も無視
+			if (data.reply && data.reply.userId.equals(mentionee._id)) return;
+			if (data.renote && data.renote.userId.equals(mentionee._id)) return;
+
+			// Add mention
+			addMention(mentionee._id, 'mention');
+
+			// Create notification
+			notify(mentionee._id, user._id, 'mention', {
+				note_id: note._id
+			});
+		}));
+	}
+
+	// Append mentions data
+	if (mentions.length > 0) {
+		Note.update({ _id: note._id }, {
+			$set: {
+				mentions
+			}
+		});
+	}
+});
diff --git a/src/services/note/reaction/create.ts b/src/services/note/reaction/create.ts
new file mode 100644
index 0000000000..d0ce65ee54
--- /dev/null
+++ b/src/services/note/reaction/create.ts
@@ -0,0 +1,94 @@
+import { IUser, pack as packUser, isLocalUser, isRemoteUser } from '../../../models/user';
+import Note, { INote, pack as packNote } from '../../../models/note';
+import NoteReaction from '../../../models/note-reaction';
+import { publishNoteStream } from '../../../publishers/stream';
+import notify from '../../../publishers/notify';
+import pushSw from '../../../publishers/push-sw';
+import NoteWatching from '../../../models/note-watching';
+import watch from '../watch';
+import renderLike from '../../../remote/activitypub/renderer/like';
+import { deliver } from '../../../queue';
+import context from '../../../remote/activitypub/renderer/context';
+
+export default async (user: IUser, note: INote, reaction: string) => new Promise(async (res, rej) => {
+	// Myself
+	if (note.userId.equals(user._id)) {
+		return rej('cannot react to my note');
+	}
+
+	// if already reacted
+	const exist = await NoteReaction.findOne({
+		noteId: note._id,
+		userId: user._id
+	});
+
+	if (exist !== null) {
+		return rej('already reacted');
+	}
+
+	// Create reaction
+	await NoteReaction.insert({
+		createdAt: new Date(),
+		noteId: note._id,
+		userId: user._id,
+		reaction
+	});
+
+	res();
+
+	const inc = {};
+	inc[`reactionCounts.${reaction}`] = 1;
+
+	// Increment reactions count
+	await Note.update({ _id: note._id }, {
+		$inc: inc
+	});
+
+	publishNoteStream(note._id, 'reacted');
+
+	// Notify
+	notify(note.userId, user._id, 'reaction', {
+		noteId: note._id,
+		reaction: reaction
+	});
+
+	pushSw(note.userId, 'reaction', {
+		user: await packUser(user, note.userId),
+		note: await packNote(note, note.userId),
+		reaction: reaction
+	});
+
+	// Fetch watchers
+	NoteWatching
+		.find({
+			noteId: note._id,
+			userId: { $ne: user._id }
+		}, {
+			fields: {
+				userId: true
+			}
+		})
+		.then(watchers => {
+			watchers.forEach(watcher => {
+				notify(watcher.userId, user._id, 'reaction', {
+					noteId: note._id,
+					reaction: reaction
+				});
+			});
+		});
+
+	// ユーザーがローカルユーザーかつ自動ウォッチ設定がオンならばこの投稿をWatchする
+	if (isLocalUser(user) && user.account.settings.autoWatch !== false) {
+		watch(user._id, note);
+	}
+
+	//#region 配信
+	const content = renderLike(user, note);
+	content['@context'] = context;
+
+	// リアクターがローカルユーザーかつリアクション対象がリモートユーザーの投稿なら配送
+	if (isLocalUser(user) && isRemoteUser(note._user)) {
+		deliver(user, content, note._user.account.inbox).save();
+	}
+	//#endregion
+});
diff --git a/src/services/note/watch.ts b/src/services/note/watch.ts
new file mode 100644
index 0000000000..28fb7a32c2
--- /dev/null
+++ b/src/services/note/watch.ts
@@ -0,0 +1,26 @@
+import * as mongodb from 'mongodb';
+import Watching from '../../models/note-watching';
+
+export default async (me: mongodb.ObjectID, note: object) => {
+	// 自分の投稿はwatchできない
+	if (me.equals((note as any).userId)) {
+		return;
+	}
+
+	// if watching now
+	const exist = await Watching.findOne({
+		noteId: (note as any)._id,
+		userId: me,
+		deletedAt: { $exists: false }
+	});
+
+	if (exist !== null) {
+		return;
+	}
+
+	await Watching.insert({
+		createdAt: new Date(),
+		noteId: (note as any)._id,
+		userId: me
+	});
+};
diff --git a/src/services/post/create.ts b/src/services/post/create.ts
deleted file mode 100644
index 745683b518..0000000000
--- a/src/services/post/create.ts
+++ /dev/null
@@ -1,358 +0,0 @@
-import Post, { pack, IPost } from '../../models/post';
-import User, { isLocalUser, IUser, isRemoteUser } from '../../models/user';
-import stream from '../../publishers/stream';
-import Following from '../../models/following';
-import { deliver } from '../../queue';
-import renderNote from '../../remote/activitypub/renderer/note';
-import renderCreate from '../../remote/activitypub/renderer/create';
-import context from '../../remote/activitypub/renderer/context';
-import { IDriveFile } from '../../models/drive-file';
-import notify from '../../publishers/notify';
-import PostWatching from '../../models/post-watching';
-import watch from './watch';
-import Mute from '../../models/mute';
-import pushSw from '../../publishers/push-sw';
-import event from '../../publishers/stream';
-import parse from '../../text/parse';
-import html from '../../text/html';
-import { IApp } from '../../models/app';
-
-export default async (user: IUser, data: {
-	createdAt?: Date;
-	text?: string;
-	reply?: IPost;
-	repost?: IPost;
-	media?: IDriveFile[];
-	geo?: any;
-	poll?: any;
-	viaMobile?: boolean;
-	tags?: string[];
-	cw?: string;
-	visibility?: string;
-	uri?: string;
-	app?: IApp;
-}, silent = false) => new Promise<IPost>(async (res, rej) => {
-	if (data.createdAt == null) data.createdAt = new Date();
-	if (data.visibility == null) data.visibility = 'public';
-
-	const tags = data.tags || [];
-
-	let tokens = null;
-
-	if (data.text) {
-		// Analyze
-		tokens = parse(data.text);
-
-		// Extract hashtags
-		const hashtags = tokens
-			.filter(t => t.type == 'hashtag')
-			.map(t => t.hashtag);
-
-		hashtags.forEach(tag => {
-			if (tags.indexOf(tag) == -1) {
-				tags.push(tag);
-			}
-		});
-	}
-
-	const insert: any = {
-		createdAt: data.createdAt,
-		mediaIds: data.media ? data.media.map(file => file._id) : [],
-		replyId: data.reply ? data.reply._id : null,
-		repostId: data.repost ? data.repost._id : null,
-		text: data.text,
-		textHtml: tokens === null ? null : html(tokens),
-		poll: data.poll,
-		cw: data.cw,
-		tags,
-		userId: user._id,
-		viaMobile: data.viaMobile,
-		geo: data.geo || null,
-		appId: data.app ? data.app._id : null,
-		visibility: data.visibility,
-
-		// 以下非正規化データ
-		_reply: data.reply ? { userId: data.reply.userId } : null,
-		_repost: data.repost ? { userId: data.repost.userId } : null,
-		_user: {
-			host: user.host,
-			hostLower: user.hostLower,
-			account: isLocalUser(user) ? {} : {
-				inbox: user.account.inbox
-			}
-		}
-	};
-
-	if (data.uri != null) insert.uri = data.uri;
-
-	// 投稿を作成
-	const post = await Post.insert(insert);
-
-	res(post);
-
-	User.update({ _id: user._id }, {
-		// Increment posts count
-		$inc: {
-			postsCount: 1
-		},
-		// Update latest post
-		$set: {
-			latestPost: post
-		}
-	});
-
-	// Serialize
-	const postObj = await pack(post);
-
-	// タイムラインへの投稿
-	if (post.channelId == null) {
-		// Publish event to myself's stream
-		if (isLocalUser(user)) {
-			stream(post.userId, 'post', postObj);
-		}
-
-		// Fetch all followers
-		const followers = await Following.aggregate([{
-			$lookup: {
-				from: 'users',
-				localField: 'followerId',
-				foreignField: '_id',
-				as: 'user'
-			}
-		}, {
-			$match: {
-				followeeId: post.userId
-			}
-		}], {
-			_id: false
-		});
-
-		if (!silent) {
-			const note = await renderNote(user, post);
-			const content = renderCreate(note);
-			content['@context'] = context;
-
-			// 投稿がリプライかつ投稿者がローカルユーザーかつリプライ先の投稿の投稿者がリモートユーザーなら配送
-			if (data.reply && isLocalUser(user) && isRemoteUser(data.reply._user)) {
-				deliver(user, content, data.reply._user.account.inbox).save();
-			}
-
-			Promise.all(followers.map(follower => {
-				follower = follower.user[0];
-
-				if (isLocalUser(follower)) {
-					// Publish event to followers stream
-					stream(follower._id, 'post', postObj);
-				} else {
-					// フォロワーがリモートユーザーかつ投稿者がローカルユーザーなら投稿を配信
-					if (isLocalUser(user)) {
-						deliver(user, content, follower.account.inbox).save();
-					}
-				}
-			}));
-		}
-	}
-
-	// チャンネルへの投稿
-	/* TODO
-	if (post.channelId) {
-		promises.push(
-			// Increment channel index(posts count)
-			Channel.update({ _id: post.channelId }, {
-				$inc: {
-					index: 1
-				}
-			}),
-
-			// Publish event to channel
-			promisedPostObj.then(postObj => {
-				publishChannelStream(post.channelId, 'post', postObj);
-			}),
-
-			Promise.all([
-				promisedPostObj,
-
-				// Get channel watchers
-				ChannelWatching.find({
-					channelId: post.channelId,
-					// 削除されたドキュメントは除く
-					deletedAt: { $exists: false }
-				})
-			]).then(([postObj, watches]) => {
-				// チャンネルの視聴者(のタイムライン)に配信
-				watches.forEach(w => {
-					stream(w.userId, 'post', postObj);
-				});
-			})
-		);
-	}*/
-
-	const mentions = [];
-
-	async function addMention(mentionee, reason) {
-		// Reject if already added
-		if (mentions.some(x => x.equals(mentionee))) return;
-
-		// Add mention
-		mentions.push(mentionee);
-
-		// Publish event
-		if (!user._id.equals(mentionee)) {
-			const mentioneeMutes = await Mute.find({
-				muter_id: mentionee,
-				deleted_at: { $exists: false }
-			});
-			const mentioneesMutedUserIds = mentioneeMutes.map(m => m.muteeId.toString());
-			if (mentioneesMutedUserIds.indexOf(user._id.toString()) == -1) {
-				event(mentionee, reason, postObj);
-				pushSw(mentionee, reason, postObj);
-			}
-		}
-	}
-
-	// If has in reply to post
-	if (data.reply) {
-		// Increment replies count
-		Post.update({ _id: data.reply._id }, {
-			$inc: {
-				repliesCount: 1
-			}
-		});
-
-		// (自分自身へのリプライでない限りは)通知を作成
-		notify(data.reply.userId, user._id, 'reply', {
-			postId: post._id
-		});
-
-		// Fetch watchers
-		PostWatching.find({
-			postId: data.reply._id,
-			userId: { $ne: user._id },
-			// 削除されたドキュメントは除く
-			deletedAt: { $exists: false }
-		}, {
-			fields: {
-				userId: true
-			}
-		}).then(watchers => {
-			watchers.forEach(watcher => {
-				notify(watcher.userId, user._id, 'reply', {
-					postId: post._id
-				});
-			});
-		});
-
-		// この投稿をWatchする
-		if (isLocalUser(user) && user.account.settings.autoWatch !== false) {
-			watch(user._id, data.reply);
-		}
-
-		// Add mention
-		addMention(data.reply.userId, 'reply');
-	}
-
-	// If it is repost
-	if (data.repost) {
-		// Notify
-		const type = data.text ? 'quote' : 'repost';
-		notify(data.repost.userId, user._id, type, {
-			post_id: post._id
-		});
-
-		// Fetch watchers
-		PostWatching.find({
-			postId: data.repost._id,
-			userId: { $ne: user._id },
-			// 削除されたドキュメントは除く
-			deletedAt: { $exists: false }
-		}, {
-			fields: {
-				userId: true
-			}
-		}).then(watchers => {
-			watchers.forEach(watcher => {
-				notify(watcher.userId, user._id, type, {
-					postId: post._id
-				});
-			});
-		});
-
-		// この投稿をWatchする
-		if (isLocalUser(user) && user.account.settings.autoWatch !== false) {
-			watch(user._id, data.repost);
-		}
-
-		// If it is quote repost
-		if (data.text) {
-			// Add mention
-			addMention(data.repost.userId, 'quote');
-		} else {
-			// Publish event
-			if (!user._id.equals(data.repost.userId)) {
-				event(data.repost.userId, 'repost', postObj);
-			}
-		}
-
-		// 今までで同じ投稿をRepostしているか
-		const existRepost = await Post.findOne({
-			userId: user._id,
-			repostId: data.repost._id,
-			_id: {
-				$ne: post._id
-			}
-		});
-
-		if (!existRepost) {
-			// Update repostee status
-			Post.update({ _id: data.repost._id }, {
-				$inc: {
-					repostCount: 1
-				}
-			});
-		}
-	}
-
-	// If has text content
-	if (data.text) {
-		// Extract an '@' mentions
-		const atMentions = tokens
-			.filter(t => t.type == 'mention')
-			.map(m => m.username)
-			// Drop dupulicates
-			.filter((v, i, s) => s.indexOf(v) == i);
-
-		// Resolve all mentions
-		await Promise.all(atMentions.map(async mention => {
-			// Fetch mentioned user
-			// SELECT _id
-			const mentionee = await User
-				.findOne({
-					usernameLower: mention.toLowerCase()
-				}, { _id: true });
-
-			// When mentioned user not found
-			if (mentionee == null) return;
-
-			// 既に言及されたユーザーに対する返信や引用repostの場合も無視
-			if (data.reply && data.reply.userId.equals(mentionee._id)) return;
-			if (data.repost && data.repost.userId.equals(mentionee._id)) return;
-
-			// Add mention
-			addMention(mentionee._id, 'mention');
-
-			// Create notification
-			notify(mentionee._id, user._id, 'mention', {
-				post_id: post._id
-			});
-		}));
-	}
-
-	// Append mentions data
-	if (mentions.length > 0) {
-		Post.update({ _id: post._id }, {
-			$set: {
-				mentions
-			}
-		});
-	}
-});
diff --git a/src/services/post/reaction/create.ts b/src/services/post/reaction/create.ts
deleted file mode 100644
index c26efcfc75..0000000000
--- a/src/services/post/reaction/create.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { IUser, pack as packUser, isLocalUser, isRemoteUser } from '../../../models/user';
-import Post, { IPost, pack as packPost } from '../../../models/post';
-import PostReaction from '../../../models/post-reaction';
-import { publishPostStream } from '../../../publishers/stream';
-import notify from '../../../publishers/notify';
-import pushSw from '../../../publishers/push-sw';
-import PostWatching from '../../../models/post-watching';
-import watch from '../watch';
-import renderLike from '../../../remote/activitypub/renderer/like';
-import { deliver } from '../../../queue';
-import context from '../../../remote/activitypub/renderer/context';
-
-export default async (user: IUser, post: IPost, reaction: string) => new Promise(async (res, rej) => {
-	// Myself
-	if (post.userId.equals(user._id)) {
-		return rej('cannot react to my post');
-	}
-
-	// if already reacted
-	const exist = await PostReaction.findOne({
-		postId: post._id,
-		userId: user._id
-	});
-
-	if (exist !== null) {
-		return rej('already reacted');
-	}
-
-	// Create reaction
-	await PostReaction.insert({
-		createdAt: new Date(),
-		postId: post._id,
-		userId: user._id,
-		reaction
-	});
-
-	res();
-
-	const inc = {};
-	inc[`reactionCounts.${reaction}`] = 1;
-
-	// Increment reactions count
-	await Post.update({ _id: post._id }, {
-		$inc: inc
-	});
-
-	publishPostStream(post._id, 'reacted');
-
-	// Notify
-	notify(post.userId, user._id, 'reaction', {
-		postId: post._id,
-		reaction: reaction
-	});
-
-	pushSw(post.userId, 'reaction', {
-		user: await packUser(user, post.userId),
-		post: await packPost(post, post.userId),
-		reaction: reaction
-	});
-
-	// Fetch watchers
-	PostWatching
-		.find({
-			postId: post._id,
-			userId: { $ne: user._id }
-		}, {
-			fields: {
-				userId: true
-			}
-		})
-		.then(watchers => {
-			watchers.forEach(watcher => {
-				notify(watcher.userId, user._id, 'reaction', {
-					postId: post._id,
-					reaction: reaction
-				});
-			});
-		});
-
-	// ユーザーがローカルユーザーかつ自動ウォッチ設定がオンならばこの投稿をWatchする
-	if (isLocalUser(user) && user.account.settings.autoWatch !== false) {
-		watch(user._id, post);
-	}
-
-	//#region 配信
-	const content = renderLike(user, post);
-	content['@context'] = context;
-
-	// リアクターがローカルユーザーかつリアクション対象がリモートユーザーの投稿なら配送
-	if (isLocalUser(user) && isRemoteUser(post._user)) {
-		deliver(user, content, post._user.account.inbox).save();
-	}
-	//#endregion
-});
diff --git a/src/services/post/watch.ts b/src/services/post/watch.ts
deleted file mode 100644
index bbd9976f40..0000000000
--- a/src/services/post/watch.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as mongodb from 'mongodb';
-import Watching from '../../models/post-watching';
-
-export default async (me: mongodb.ObjectID, post: object) => {
-	// 自分の投稿はwatchできない
-	if (me.equals((post as any).userId)) {
-		return;
-	}
-
-	// if watching now
-	const exist = await Watching.findOne({
-		postId: (post as any)._id,
-		userId: me,
-		deletedAt: { $exists: false }
-	});
-
-	if (exist !== null) {
-		return;
-	}
-
-	await Watching.insert({
-		createdAt: new Date(),
-		postId: (post as any)._id,
-		userId: me
-	});
-};
diff --git a/tools/migration/nighthike/11.js b/tools/migration/nighthike/11.js
new file mode 100644
index 0000000000..979e5bdc5b
--- /dev/null
+++ b/tools/migration/nighthike/11.js
@@ -0,0 +1,35 @@
+db.pollVotes.update({}, {
+	$rename: {
+		postId: 'noteId',
+	}
+}, false, true);
+
+db.postReactions.renameCollection('noteReactions');
+db.noteReactions.update({}, {
+	$rename: {
+		postId: 'noteId',
+	}
+}, false, true);
+
+db.postWatching.renameCollection('noteWatching');
+db.noteWatching.update({}, {
+	$rename: {
+		postId: 'noteId',
+	}
+}, false, true);
+
+db.posts.renameCollection('notes');
+db.notes.update({}, {
+	$rename: {
+		_repost: '_renote',
+		repostId: 'renoteId',
+	}
+}, false, true);
+
+db.users.update({}, {
+	$rename: {
+		postsCount: 'notesCount',
+		pinnedPostId: 'pinnedNoteId',
+		latestPost: 'latestNote'
+	}
+}, false, true);
-- 
cgit v1.3.1-freya


From a02ee3a08bac55c9f0b29cb6bc0a15726b7cc3c8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 8 Apr 2018 03:58:11 +0900
Subject: Some bug fixes

---
 src/client/app/common/define-widget.ts             |   4 +-
 src/client/app/common/mios.ts                      |  10 +-
 src/client/app/common/scripts/streaming/drive.ts   |   2 +-
 src/client/app/common/scripts/streaming/home.ts    |   4 +-
 .../common/scripts/streaming/messaging-index.ts    |   2 +-
 .../app/common/scripts/streaming/messaging.ts      |   4 +-
 .../app/common/scripts/streaming/othello-game.ts   |   2 +-
 src/client/app/common/scripts/streaming/othello.ts |   2 +-
 src/client/app/common/views/components/signin.vue  |   4 +-
 .../common/views/components/twitter-setting.vue    |  12 +-
 .../app/common/views/components/uploader.vue       |   2 +-
 src/client/app/desktop/api/update-avatar.ts        |   2 +-
 src/client/app/desktop/api/update-banner.ts        |   2 +-
 src/client/app/desktop/views/components/home.vue   |  25 +-
 .../app/desktop/views/components/note-detail.vue   |   4 +-
 .../app/desktop/views/components/notes.note.vue    |  27 +-
 .../app/desktop/views/components/post-detail.vue   |   4 +-
 .../app/desktop/views/components/posts.post.vue    |   6 +-
 .../app/desktop/views/components/settings.2fa.vue  |   8 +-
 .../app/desktop/views/components/settings.api.vue  |   2 +-
 .../desktop/views/components/settings.profile.vue  |   8 +-
 .../app/desktop/views/components/settings.vue      |  12 +-
 .../app/desktop/views/components/timeline.vue      |   2 +-
 .../app/desktop/views/components/ui.header.vue     |   8 +-
 .../desktop/views/components/widget-container.vue  |   4 +-
 src/client/app/desktop/views/components/window.vue |   4 +-
 .../app/desktop/views/pages/user/user.header.vue   |   2 +-
 .../app/desktop/views/pages/user/user.home.vue     |   2 +-
 .../app/desktop/views/pages/user/user.profile.vue  |  10 +-
 .../app/mobile/views/components/note-detail.vue    |   4 +-
 src/client/app/mobile/views/components/note.vue    |  32 +-
 .../app/mobile/views/components/post-detail.vue    | 462 ------------------
 .../app/mobile/views/components/post-form.vue      |   2 +-
 src/client/app/mobile/views/components/post.vue    | 540 ---------------------
 .../app/mobile/views/components/ui.header.vue      |   4 +-
 src/client/app/mobile/views/pages/home.vue         |  20 +-
 .../app/mobile/views/pages/profile-setting.vue     |   4 +-
 src/client/app/mobile/views/pages/user.vue         |  10 +-
 src/client/app/mobile/views/pages/user/home.vue    |   2 +-
 src/client/app/mobile/views/pages/welcome.vue      |   4 +-
 src/models/user.ts                                 | 106 ++--
 src/queue/processors/http/process-inbox.ts         |   4 +-
 src/remote/activitypub/act/create/image.ts         |   2 +-
 src/remote/activitypub/act/create/index.ts         |   2 +-
 src/remote/activitypub/act/delete/index.ts         |   2 +-
 src/remote/activitypub/act/undo/index.ts           |   2 +-
 src/remote/activitypub/renderer/follow.ts          |   2 +-
 src/remote/activitypub/renderer/key.ts             |   2 +-
 src/remote/request.ts                              |   7 +-
 src/renderers/get-user-summary.ts                  |   3 +-
 src/server/api/authenticate.ts                     |   2 +-
 src/server/api/bot/core.ts                         |   2 +-
 src/server/api/bot/interfaces/line.ts              |  10 +-
 src/server/api/common/signin.ts                    |   2 +-
 src/server/api/endpoints/following/create.ts       |   2 +-
 src/server/api/endpoints/following/delete.ts       |   2 +-
 src/server/api/endpoints/i.ts                      |   8 +-
 src/server/api/endpoints/i/2fa/done.ts             |   4 +-
 src/server/api/endpoints/i/2fa/register.ts         |   2 +-
 src/server/api/endpoints/i/2fa/unregister.ts       |   6 +-
 src/server/api/endpoints/i/change_password.ts      |   4 +-
 src/server/api/endpoints/i/regenerate_token.ts     |   4 +-
 src/server/api/endpoints/i/update.ts               |  14 +-
 .../api/endpoints/i/update_client_setting.ts       |   4 +-
 src/server/api/endpoints/i/update_home.ts          |   6 +-
 src/server/api/endpoints/i/update_mobile_home.ts   |   6 +-
 src/server/api/endpoints/mute/create.ts            |   2 +-
 src/server/api/endpoints/mute/delete.ts            |   2 +-
 src/server/api/endpoints/notes/polls/vote.ts       |   2 +-
 src/server/api/endpoints/users/recommendation.ts   |   2 +-
 src/server/api/private/signin.ts                   |  10 +-
 src/server/api/private/signup.ts                   |  55 +--
 src/server/api/service/twitter.ts                  |  10 +-
 src/server/api/stream/home.ts                      |   2 +-
 src/server/api/streaming.ts                        |   2 +-
 src/services/following/create.ts                   |   4 +-
 src/services/following/delete.ts                   |   2 +-
 src/services/note/create.ts                        |  10 +-
 src/services/note/reaction/create.ts               |   4 +-
 test/api.ts                                        |  16 +-
 tools/migration/nighthike/12.js                    |  58 +++
 81 files changed, 337 insertions(+), 1318 deletions(-)
 delete mode 100644 src/client/app/mobile/views/components/post-detail.vue
 delete mode 100644 src/client/app/mobile/views/components/post.vue
 create mode 100644 tools/migration/nighthike/12.js

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/common/define-widget.ts b/src/client/app/common/define-widget.ts
index 9f8dcfc7ea..7b98c0903f 100644
--- a/src/client/app/common/define-widget.ts
+++ b/src/client/app/common/define-widget.ts
@@ -56,14 +56,14 @@ export default function<T extends object>(data: {
 						id: this.id,
 						data: newProps
 					}).then(() => {
-						(this as any).os.i.account.clientSettings.mobileHome.find(w => w.id == this.id).data = newProps;
+						(this as any).os.i.clientSettings.mobileHome.find(w => w.id == this.id).data = newProps;
 					});
 				} else {
 					(this as any).api('i/update_home', {
 						id: this.id,
 						data: newProps
 					}).then(() => {
-						(this as any).os.i.account.clientSettings.home.find(w => w.id == this.id).data = newProps;
+						(this as any).os.i.clientSettings.home.find(w => w.id == this.id).data = newProps;
 					});
 				}
 			}, {
diff --git a/src/client/app/common/mios.ts b/src/client/app/common/mios.ts
index 48e830810c..fd267bc3f8 100644
--- a/src/client/app/common/mios.ts
+++ b/src/client/app/common/mios.ts
@@ -270,7 +270,7 @@ export default class MiOS extends EventEmitter {
 				// Parse response
 				res.json().then(i => {
 					me = i;
-					me.account.token = token;
+					me.token = token;
 					done();
 				});
 			})
@@ -294,12 +294,12 @@ export default class MiOS extends EventEmitter {
 		const fetched = me => {
 			if (me) {
 				// デフォルトの設定をマージ
-				me.account.clientSettings = Object.assign({
+				me.clientSettings = Object.assign({
 					fetchOnScroll: true,
 					showMaps: true,
 					showPostFormOnTopOfTl: false,
 					gradientWindowHeader: false
-				}, me.account.clientSettings);
+				}, me.clientSettings);
 
 				// ローカルストレージにキャッシュ
 				localStorage.setItem('me', JSON.stringify(me));
@@ -329,7 +329,7 @@ export default class MiOS extends EventEmitter {
 			fetched(cachedMe);
 
 			// 後から新鮮なデータをフェッチ
-			fetchme(cachedMe.account.token, freshData => {
+			fetchme(cachedMe.token, freshData => {
 				merge(cachedMe, freshData);
 			});
 		} else {
@@ -437,7 +437,7 @@ export default class MiOS extends EventEmitter {
 		}
 
 		// Append a credential
-		if (this.isSignedIn) (data as any).i = this.i.account.token;
+		if (this.isSignedIn) (data as any).i = this.i.token;
 
 		// TODO
 		//const viaStream = localStorage.getItem('enableExperimental') == 'true';
diff --git a/src/client/app/common/scripts/streaming/drive.ts b/src/client/app/common/scripts/streaming/drive.ts
index f11573685e..7ff85b5946 100644
--- a/src/client/app/common/scripts/streaming/drive.ts
+++ b/src/client/app/common/scripts/streaming/drive.ts
@@ -8,7 +8,7 @@ import MiOS from '../../mios';
 export class DriveStream extends Stream {
 	constructor(os: MiOS, me) {
 		super(os, 'drive', {
-			i: me.account.token
+			i: me.token
 		});
 	}
 }
diff --git a/src/client/app/common/scripts/streaming/home.ts b/src/client/app/common/scripts/streaming/home.ts
index c198619400..e085801e15 100644
--- a/src/client/app/common/scripts/streaming/home.ts
+++ b/src/client/app/common/scripts/streaming/home.ts
@@ -10,13 +10,13 @@ import MiOS from '../../mios';
 export class HomeStream extends Stream {
 	constructor(os: MiOS, me) {
 		super(os, '', {
-			i: me.account.token
+			i: me.token
 		});
 
 		// 最終利用日時を更新するため定期的にaliveメッセージを送信
 		setInterval(() => {
 			this.send({ type: 'alive' });
-			me.account.lastUsedAt = new Date();
+			me.lastUsedAt = new Date();
 		}, 1000 * 60);
 
 		// 自分の情報が更新されたとき
diff --git a/src/client/app/common/scripts/streaming/messaging-index.ts b/src/client/app/common/scripts/streaming/messaging-index.ts
index 24f0ce0c9f..84e2174ec4 100644
--- a/src/client/app/common/scripts/streaming/messaging-index.ts
+++ b/src/client/app/common/scripts/streaming/messaging-index.ts
@@ -8,7 +8,7 @@ import MiOS from '../../mios';
 export class MessagingIndexStream extends Stream {
 	constructor(os: MiOS, me) {
 		super(os, 'messaging-index', {
-			i: me.account.token
+			i: me.token
 		});
 	}
 }
diff --git a/src/client/app/common/scripts/streaming/messaging.ts b/src/client/app/common/scripts/streaming/messaging.ts
index 4c593deb31..c1b5875cfb 100644
--- a/src/client/app/common/scripts/streaming/messaging.ts
+++ b/src/client/app/common/scripts/streaming/messaging.ts
@@ -7,13 +7,13 @@ import MiOS from '../../mios';
 export class MessagingStream extends Stream {
 	constructor(os: MiOS, me, otherparty) {
 		super(os, 'messaging', {
-			i: me.account.token,
+			i: me.token,
 			otherparty
 		});
 
 		(this as any).on('_connected_', () => {
 			this.send({
-				i: me.account.token
+				i: me.token
 			});
 		});
 	}
diff --git a/src/client/app/common/scripts/streaming/othello-game.ts b/src/client/app/common/scripts/streaming/othello-game.ts
index f34ef35147..b85af8f72b 100644
--- a/src/client/app/common/scripts/streaming/othello-game.ts
+++ b/src/client/app/common/scripts/streaming/othello-game.ts
@@ -4,7 +4,7 @@ import MiOS from '../../mios';
 export class OthelloGameStream extends Stream {
 	constructor(os: MiOS, me, game) {
 		super(os, 'othello-game', {
-			i: me ? me.account.token : null,
+			i: me ? me.token : null,
 			game: game.id
 		});
 	}
diff --git a/src/client/app/common/scripts/streaming/othello.ts b/src/client/app/common/scripts/streaming/othello.ts
index 8c6f4b9c3c..f5d47431cd 100644
--- a/src/client/app/common/scripts/streaming/othello.ts
+++ b/src/client/app/common/scripts/streaming/othello.ts
@@ -5,7 +5,7 @@ import MiOS from '../../mios';
 export class OthelloStream extends Stream {
 	constructor(os: MiOS, me) {
 		super(os, 'othello', {
-			i: me.account.token
+			i: me.token
 		});
 	}
 }
diff --git a/src/client/app/common/views/components/signin.vue b/src/client/app/common/views/components/signin.vue
index 17154e6b31..da7472b8c7 100644
--- a/src/client/app/common/views/components/signin.vue
+++ b/src/client/app/common/views/components/signin.vue
@@ -6,7 +6,7 @@
 	<label class="password">
 		<input v-model="password" type="password" placeholder="%i18n:common.tags.mk-signin.password%" required/>%fa:lock%
 	</label>
-	<label class="token" v-if="user && user.account.twoFactorEnabled">
+	<label class="token" v-if="user && user.twoFactorEnabled">
 		<input v-model="token" type="number" placeholder="%i18n:common.tags.mk-signin.token%" required/>%fa:lock%
 	</label>
 	<button type="submit" :disabled="signing">{{ signing ? '%i18n:common.tags.mk-signin.signing-in%' : '%i18n:common.tags.mk-signin.signin%' }}</button>
@@ -43,7 +43,7 @@ export default Vue.extend({
 			(this as any).api('signin', {
 				username: this.username,
 				password: this.password,
-				token: this.user && this.user.account.twoFactorEnabled ? this.token : undefined
+				token: this.user && this.user.twoFactorEnabled ? this.token : undefined
 			}).then(() => {
 				location.reload();
 			}).catch(() => {
diff --git a/src/client/app/common/views/components/twitter-setting.vue b/src/client/app/common/views/components/twitter-setting.vue
index 082d2b435d..00669cd833 100644
--- a/src/client/app/common/views/components/twitter-setting.vue
+++ b/src/client/app/common/views/components/twitter-setting.vue
@@ -1,13 +1,13 @@
 <template>
 <div class="mk-twitter-setting">
 	<p>%i18n:common.tags.mk-twitter-setting.description%<a :href="`${docsUrl}/link-to-twitter`" target="_blank">%i18n:common.tags.mk-twitter-setting.detail%</a></p>
-	<p class="account" v-if="os.i.account.twitter" :title="`Twitter ID: ${os.i.account.twitter.userId}`">%i18n:common.tags.mk-twitter-setting.connected-to%: <a :href="`https://twitter.com/${os.i.account.twitter.screenName}`" target="_blank">@{{ os.i.account.twitter.screenName }}</a></p>
+	<p class="account" v-if="os.i.twitter" :title="`Twitter ID: ${os.i.twitter.userId}`">%i18n:common.tags.mk-twitter-setting.connected-to%: <a :href="`https://twitter.com/${os.i.twitter.screenName}`" target="_blank">@{{ os.i.twitter.screenName }}</a></p>
 	<p>
-		<a :href="`${apiUrl}/connect/twitter`" target="_blank" @click.prevent="connect">{{ os.i.account.twitter ? '%i18n:common.tags.mk-twitter-setting.reconnect%' : '%i18n:common.tags.mk-twitter-setting.connect%' }}</a>
-		<span v-if="os.i.account.twitter"> or </span>
-		<a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="os.i.account.twitter" @click.prevent="disconnect">%i18n:common.tags.mk-twitter-setting.disconnect%</a>
+		<a :href="`${apiUrl}/connect/twitter`" target="_blank" @click.prevent="connect">{{ os.i.twitter ? '%i18n:common.tags.mk-twitter-setting.reconnect%' : '%i18n:common.tags.mk-twitter-setting.connect%' }}</a>
+		<span v-if="os.i.twitter"> or </span>
+		<a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="os.i.twitter" @click.prevent="disconnect">%i18n:common.tags.mk-twitter-setting.disconnect%</a>
 	</p>
-	<p class="id" v-if="os.i.account.twitter">Twitter ID: {{ os.i.account.twitter.userId }}</p>
+	<p class="id" v-if="os.i.twitter">Twitter ID: {{ os.i.twitter.userId }}</p>
 </div>
 </template>
 
@@ -25,7 +25,7 @@ export default Vue.extend({
 	},
 	mounted() {
 		this.$watch('os.i', () => {
-			if ((this as any).os.i.account.twitter) {
+			if ((this as any).os.i.twitter) {
 				if (this.form) this.form.close();
 			}
 		}, {
diff --git a/src/client/app/common/views/components/uploader.vue b/src/client/app/common/views/components/uploader.vue
index c74a1edb41..ccad50dc37 100644
--- a/src/client/app/common/views/components/uploader.vue
+++ b/src/client/app/common/views/components/uploader.vue
@@ -50,7 +50,7 @@ export default Vue.extend({
 			reader.readAsDataURL(file);
 
 			const data = new FormData();
-			data.append('i', (this as any).os.i.account.token);
+			data.append('i', (this as any).os.i.token);
 			data.append('file', file);
 
 			if (folder) data.append('folderId', folder);
diff --git a/src/client/app/desktop/api/update-avatar.ts b/src/client/app/desktop/api/update-avatar.ts
index 36a2ffe914..dc89adeb86 100644
--- a/src/client/app/desktop/api/update-avatar.ts
+++ b/src/client/app/desktop/api/update-avatar.ts
@@ -16,7 +16,7 @@ export default (os: OS) => (cb, file = null) => {
 
 		w.$once('cropped', blob => {
 			const data = new FormData();
-			data.append('i', os.i.account.token);
+			data.append('i', os.i.token);
 			data.append('file', blob, file.name + '.cropped.png');
 
 			os.api('drive/folders/find', {
diff --git a/src/client/app/desktop/api/update-banner.ts b/src/client/app/desktop/api/update-banner.ts
index e66dbf016b..5f10bf2856 100644
--- a/src/client/app/desktop/api/update-banner.ts
+++ b/src/client/app/desktop/api/update-banner.ts
@@ -16,7 +16,7 @@ export default (os: OS) => (cb, file = null) => {
 
 		w.$once('cropped', blob => {
 			const data = new FormData();
-			data.append('i', os.i.account.token);
+			data.append('i', os.i.token);
 			data.append('file', blob, file.name + '.cropped.png');
 
 			os.api('drive/folders/find', {
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index 7145ddce03..90e9d1b785 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -53,7 +53,7 @@
 			<div class="main">
 				<a @click="hint">カスタマイズのヒント</a>
 				<div>
-					<mk-post-form v-if="os.i.account.clientSettings.showPostFormOnTopOfTl"/>
+					<mk-post-form v-if="os.i.clientSettings.showPostFormOnTopOfTl"/>
 					<mk-timeline ref="tl" @loaded="onTlLoaded"/>
 				</div>
 			</div>
@@ -63,7 +63,7 @@
 				<component v-for="widget in widgets[place]" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" @chosen="warp"/>
 			</div>
 			<div class="main">
-				<mk-post-form v-if="os.i.account.clientSettings.showPostFormOnTopOfTl"/>
+				<mk-post-form v-if="os.i.clientSettings.showPostFormOnTopOfTl"/>
 				<mk-timeline ref="tl" @loaded="onTlLoaded" v-if="mode == 'timeline'"/>
 				<mk-mentions @loaded="onTlLoaded" v-if="mode == 'mentions'"/>
 			</div>
@@ -82,7 +82,10 @@ export default Vue.extend({
 		XDraggable
 	},
 	props: {
-		customize: Boolean,
+		customize: {
+			type: Boolean,
+			default: false
+		},
 		mode: {
 			type: String,
 			default: 'timeline'
@@ -104,16 +107,16 @@ export default Vue.extend({
 		home: {
 			get(): any[] {
 				//#region 互換性のため
-				(this as any).os.i.account.clientSettings.home.forEach(w => {
+				(this as any).os.i.clientSettings.home.forEach(w => {
 					if (w.name == 'rss-reader') w.name = 'rss';
 					if (w.name == 'user-recommendation') w.name = 'users';
 					if (w.name == 'recommended-polls') w.name = 'polls';
 				});
 				//#endregion
-				return (this as any).os.i.account.clientSettings.home;
+				return (this as any).os.i.clientSettings.home;
 			},
 			set(value) {
-				(this as any).os.i.account.clientSettings.home = value;
+				(this as any).os.i.clientSettings.home = value;
 			}
 		},
 		left(): any[] {
@@ -126,7 +129,7 @@ export default Vue.extend({
 	created() {
 		this.widgets.left = this.left;
 		this.widgets.right = this.right;
-		this.$watch('os.i.account.clientSettings', i => {
+		this.$watch('os.i.clientSettings', i => {
 			this.widgets.left = this.left;
 			this.widgets.right = this.right;
 		}, {
@@ -161,17 +164,17 @@ export default Vue.extend({
 		},
 		onHomeUpdated(data) {
 			if (data.home) {
-				(this as any).os.i.account.clientSettings.home = data.home;
+				(this as any).os.i.clientSettings.home = data.home;
 				this.widgets.left = data.home.filter(w => w.place == 'left');
 				this.widgets.right = data.home.filter(w => w.place == 'right');
 			} else {
-				const w = (this as any).os.i.account.clientSettings.home.find(w => w.id == data.id);
+				const w = (this as any).os.i.clientSettings.home.find(w => w.id == data.id);
 				if (w != null) {
 					w.data = data.data;
 					this.$refs[w.id][0].preventSave = true;
 					this.$refs[w.id][0].props = w.data;
-					this.widgets.left = (this as any).os.i.account.clientSettings.home.filter(w => w.place == 'left');
-					this.widgets.right = (this as any).os.i.account.clientSettings.home.filter(w => w.place == 'right');
+					this.widgets.left = (this as any).os.i.clientSettings.home.filter(w => w.place == 'left');
+					this.widgets.right = (this as any).os.i.clientSettings.home.filter(w => w.place == 'right');
 				}
 			}
 		},
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 790f797ad6..df7c33dfa8 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -115,7 +115,7 @@ export default Vue.extend({
 		isRenote(): boolean {
 			return (this.note.renote &&
 				this.note.text == null &&
-				this.note.mediaIds == null &&
+				this.note.mediaIds.length == 0 &&
 				this.note.poll == null);
 		},
 		p(): any {
@@ -168,7 +168,7 @@ export default Vue.extend({
 
 		// Draw map
 		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.account.clientSettings.showMaps : true;
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
 			if (shouldShowMap) {
 				(this as any).os.getGoogleMaps().then(maps => {
 					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 924642c01a..4547ac58bb 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -5,25 +5,25 @@
 	</div>
 	<div class="renote" v-if="isRenote">
 		<p>
-			<router-link class="avatar-anchor" :to="`/@${acct}`" v-user-preview="note.userId">
+			<router-link class="avatar-anchor" :to="`/@${getAcct(note.user)}`" v-user-preview="note.userId">
 				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
 			</router-link>
 			%fa:retweet%
 			<span>{{ '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.indexOf('{')) }}</span>
-			<a class="name" :href="`/@${acct}`" v-user-preview="note.userId">{{ getUserName(note.user) }}</a>
+			<a class="name" :href="`/@${getAcct(note.user)}`" v-user-preview="note.userId">{{ getUserName(note.user) }}</a>
 			<span>{{ '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-note.reposted-by%'.indexOf('}') + 1) }}</span>
 		</p>
 		<mk-time :time="note.createdAt"/>
 	</div>
 	<article>
-		<router-link class="avatar-anchor" :to="`/@${acct}`">
+		<router-link class="avatar-anchor" :to="`/@${getAcct(p.user)}`">
 			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
 		</router-link>
 		<div class="main">
 			<header>
-				<router-link class="name" :to="`/@${acct}`" v-user-preview="p.user.id">{{ acct }}</router-link>
-				<span class="is-bot" v-if="p.user.host === null && p.user.account.isBot">bot</span>
-				<span class="username">@{{ acct }}</span>
+				<router-link class="name" :to="`/@${getAcct(p.user)}`" v-user-preview="p.user.id">{{ getUserName(p) }}</router-link>
+				<span class="is-bot" v-if="p.user.host === null && p.user.isBot">bot</span>
+				<span class="username">@{{ getAcct(p.user) }}</span>
 				<div class="info">
 					<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
 					<span class="mobile" v-if="p.viaMobile">%fa:mobile-alt%</span>
@@ -117,21 +117,18 @@ export default Vue.extend({
 		return {
 			isDetailOpened: false,
 			connection: null,
-			connectionId: null
+			connectionId: null,
+			getAcct,
+			getUserName
 		};
 	},
 
 	computed: {
-		acct(): string {
-			return getAcct(this.p.user);
-		},
-		name(): string {
-			return getUserName(this.p.user);
-		},
+
 		isRenote(): boolean {
 			return (this.note.renote &&
 				this.note.text == null &&
-				this.note.mediaIds == null &&
+				this.note.mediaIds.length == 0 &&
 				this.note.poll == null);
 		},
 		p(): any {
@@ -178,7 +175,7 @@ export default Vue.extend({
 
 		// Draw map
 		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.account.clientSettings.showMaps : true;
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
 			if (shouldShowMap) {
 				(this as any).os.getGoogleMaps().then(maps => {
 					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
diff --git a/src/client/app/desktop/views/components/post-detail.vue b/src/client/app/desktop/views/components/post-detail.vue
index 790f797ad6..df7c33dfa8 100644
--- a/src/client/app/desktop/views/components/post-detail.vue
+++ b/src/client/app/desktop/views/components/post-detail.vue
@@ -115,7 +115,7 @@ export default Vue.extend({
 		isRenote(): boolean {
 			return (this.note.renote &&
 				this.note.text == null &&
-				this.note.mediaIds == null &&
+				this.note.mediaIds.length == 0 &&
 				this.note.poll == null);
 		},
 		p(): any {
@@ -168,7 +168,7 @@ export default Vue.extend({
 
 		// Draw map
 		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.account.clientSettings.showMaps : true;
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
 			if (shouldShowMap) {
 				(this as any).os.getGoogleMaps().then(maps => {
 					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
diff --git a/src/client/app/desktop/views/components/posts.post.vue b/src/client/app/desktop/views/components/posts.post.vue
index 924642c01a..d7c21dfa07 100644
--- a/src/client/app/desktop/views/components/posts.post.vue
+++ b/src/client/app/desktop/views/components/posts.post.vue
@@ -22,7 +22,7 @@
 		<div class="main">
 			<header>
 				<router-link class="name" :to="`/@${acct}`" v-user-preview="p.user.id">{{ acct }}</router-link>
-				<span class="is-bot" v-if="p.user.host === null && p.user.account.isBot">bot</span>
+				<span class="is-bot" v-if="p.user.host === null && p.user.isBot">bot</span>
 				<span class="username">@{{ acct }}</span>
 				<div class="info">
 					<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
@@ -131,7 +131,7 @@ export default Vue.extend({
 		isRenote(): boolean {
 			return (this.note.renote &&
 				this.note.text == null &&
-				this.note.mediaIds == null &&
+				this.note.mediaIds.length == 0 &&
 				this.note.poll == null);
 		},
 		p(): any {
@@ -178,7 +178,7 @@ export default Vue.extend({
 
 		// Draw map
 		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.account.clientSettings.showMaps : true;
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
 			if (shouldShowMap) {
 				(this as any).os.getGoogleMaps().then(maps => {
 					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
diff --git a/src/client/app/desktop/views/components/settings.2fa.vue b/src/client/app/desktop/views/components/settings.2fa.vue
index b8dd1dfd9b..fb2dc30f2a 100644
--- a/src/client/app/desktop/views/components/settings.2fa.vue
+++ b/src/client/app/desktop/views/components/settings.2fa.vue
@@ -2,8 +2,8 @@
 <div class="2fa">
 	<p>%i18n:desktop.tags.mk-2fa-setting.intro%<a href="%i18n:desktop.tags.mk-2fa-setting.url%" target="_blank">%i18n:desktop.tags.mk-2fa-setting.detail%</a></p>
 	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-2fa-setting.caution%</p></div>
-	<p v-if="!data && !os.i.account.twoFactorEnabled"><button @click="register" class="ui primary">%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
-	<template v-if="os.i.account.twoFactorEnabled">
+	<p v-if="!data && !os.i.twoFactorEnabled"><button @click="register" class="ui primary">%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
+	<template v-if="os.i.twoFactorEnabled">
 		<p>%i18n:desktop.tags.mk-2fa-setting.already-registered%</p>
 		<button @click="unregister" class="ui">%i18n:desktop.tags.mk-2fa-setting.unregister%</button>
 	</template>
@@ -54,7 +54,7 @@ export default Vue.extend({
 					password: password
 				}).then(() => {
 					(this as any).apis.notify('%i18n:desktop.tags.mk-2fa-setting.unregistered%');
-					(this as any).os.i.account.twoFactorEnabled = false;
+					(this as any).os.i.twoFactorEnabled = false;
 				});
 			});
 		},
@@ -64,7 +64,7 @@ export default Vue.extend({
 				token: this.token
 			}).then(() => {
 				(this as any).apis.notify('%i18n:desktop.tags.mk-2fa-setting.success%');
-				(this as any).os.i.account.twoFactorEnabled = true;
+				(this as any).os.i.twoFactorEnabled = true;
 			}).catch(() => {
 				(this as any).apis.notify('%i18n:desktop.tags.mk-2fa-setting.failed%');
 			});
diff --git a/src/client/app/desktop/views/components/settings.api.vue b/src/client/app/desktop/views/components/settings.api.vue
index 0d5921ab7f..5831f82075 100644
--- a/src/client/app/desktop/views/components/settings.api.vue
+++ b/src/client/app/desktop/views/components/settings.api.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="root api">
-	<p>Token: <code>{{ os.i.account.token }}</code></p>
+	<p>Token: <code>{{ os.i.token }}</code></p>
 	<p>%i18n:desktop.tags.mk-api-info.intro%</p>
 	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-api-info.caution%</p></div>
 	<p>%i18n:desktop.tags.mk-api-info.regeneration-of-token%</p>
diff --git a/src/client/app/desktop/views/components/settings.profile.vue b/src/client/app/desktop/views/components/settings.profile.vue
index 28be48e0a8..324a939f95 100644
--- a/src/client/app/desktop/views/components/settings.profile.vue
+++ b/src/client/app/desktop/views/components/settings.profile.vue
@@ -24,7 +24,7 @@
 	<button class="ui primary" @click="save">%i18n:desktop.tags.mk-profile-setting.save%</button>
 	<section>
 		<h2>その他</h2>
-		<mk-switch v-model="os.i.account.isBot" @change="onChangeIsBot" text="このアカウントはbotです"/>
+		<mk-switch v-model="os.i.isBot" @change="onChangeIsBot" text="このアカウントはbotです"/>
 	</section>
 </div>
 </template>
@@ -43,9 +43,9 @@ export default Vue.extend({
 	},
 	created() {
 		this.name = (this as any).os.i.name || '';
-		this.location = (this as any).os.i.account.profile.location;
+		this.location = (this as any).os.i.profile.location;
 		this.description = (this as any).os.i.description;
-		this.birthday = (this as any).os.i.account.profile.birthday;
+		this.birthday = (this as any).os.i.profile.birthday;
 	},
 	methods: {
 		updateAvatar() {
@@ -63,7 +63,7 @@ export default Vue.extend({
 		},
 		onChangeIsBot() {
 			(this as any).api('i/update', {
-				isBot: (this as any).os.i.account.isBot
+				isBot: (this as any).os.i.isBot
 			});
 		}
 	}
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index fd82c171c1..4184ae82c7 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -20,7 +20,7 @@
 
 		<section class="web" v-show="page == 'web'">
 			<h1>動作</h1>
-			<mk-switch v-model="os.i.account.clientSettings.fetchOnScroll" @change="onChangeFetchOnScroll" text="スクロールで自動読み込み">
+			<mk-switch v-model="os.i.clientSettings.fetchOnScroll" @change="onChangeFetchOnScroll" text="スクロールで自動読み込み">
 				<span>ページを下までスクロールしたときに自動で追加のコンテンツを読み込みます。</span>
 			</mk-switch>
 			<mk-switch v-model="autoPopout" text="ウィンドウの自動ポップアウト">
@@ -33,11 +33,11 @@
 			<div class="div">
 				<button class="ui button" @click="customizeHome">ホームをカスタマイズ</button>
 			</div>
-			<mk-switch v-model="os.i.account.clientSettings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="タイムライン上部に投稿フォームを表示する"/>
-			<mk-switch v-model="os.i.account.clientSettings.showMaps" @change="onChangeShowMaps" text="マップの自動展開">
+			<mk-switch v-model="os.i.clientSettings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="タイムライン上部に投稿フォームを表示する"/>
+			<mk-switch v-model="os.i.clientSettings.showMaps" @change="onChangeShowMaps" text="マップの自動展開">
 				<span>位置情報が添付された投稿のマップを自動的に展開します。</span>
 			</mk-switch>
-			<mk-switch v-model="os.i.account.clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
+			<mk-switch v-model="os.i.clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
 		</section>
 
 		<section class="web" v-show="page == 'web'">
@@ -57,7 +57,7 @@
 
 		<section class="web" v-show="page == 'web'">
 			<h1>モバイル</h1>
-			<mk-switch v-model="os.i.account.clientSettings.disableViaMobile" @change="onChangeDisableViaMobile" text="「モバイルからの投稿」フラグを付けない"/>
+			<mk-switch v-model="os.i.clientSettings.disableViaMobile" @change="onChangeDisableViaMobile" text="「モバイルからの投稿」フラグを付けない"/>
 		</section>
 
 		<section class="web" v-show="page == 'web'">
@@ -86,7 +86,7 @@
 
 		<section class="notification" v-show="page == 'notification'">
 			<h1>通知</h1>
-			<mk-switch v-model="os.i.account.settings.autoWatch" @change="onChangeAutoWatch" text="投稿の自動ウォッチ">
+			<mk-switch v-model="os.i.settings.autoWatch" @change="onChangeAutoWatch" text="投稿の自動ウォッチ">
 				<span>リアクションしたり返信したりした投稿に関する通知を自動的に受け取るようにします。</span>
 			</mk-switch>
 		</section>
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 6d049eee9c..ea8f0053bc 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -107,7 +107,7 @@ export default Vue.extend({
 			this.fetch();
 		},
 		onScroll() {
-			if ((this as any).os.i.account.clientSettings.fetchOnScroll !== false) {
+			if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
 				const current = window.scrollY + window.innerHeight;
 				if (current > document.body.offsetHeight - 8) this.more();
 			}
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index 7d93847fab..527d10843a 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -37,8 +37,8 @@ import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	computed: {
-		name() {
-			return getUserName(this.os.i);
+		name(): string {
+			return getUserName((this as any).os.i);
 		}
 	},
 	components: {
@@ -51,9 +51,9 @@ export default Vue.extend({
 	},
 	mounted() {
 		if ((this as any).os.isSignedIn) {
-			const ago = (new Date().getTime() - new Date((this as any).os.i.account.lastUsedAt).getTime()) / 1000
+			const ago = (new Date().getTime() - new Date((this as any).os.i.lastUsedAt).getTime()) / 1000
 			const isHisasiburi = ago >= 3600;
-			(this as any).os.i.account.lastUsedAt = new Date();
+			(this as any).os.i.lastUsedAt = new Date();
 			if (isHisasiburi) {
 				(this.$refs.welcomeback as any).style.display = 'block';
 				(this.$refs.main as any).style.overflow = 'hidden';
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index 68c5bcb8dc..188a67313e 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -24,8 +24,8 @@ export default Vue.extend({
 	computed: {
 		withGradient(): boolean {
 			return (this as any).os.isSignedIn
-				? (this as any).os.i.account.clientSettings.gradientWindowHeader != null
-					? (this as any).os.i.account.clientSettings.gradientWindowHeader
+				? (this as any).os.i.clientSettings.gradientWindowHeader != null
+					? (this as any).os.i.clientSettings.gradientWindowHeader
 					: false
 				: false;
 		}
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index 48dc46febd..e2cab21799 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -92,8 +92,8 @@ export default Vue.extend({
 		},
 		withGradient(): boolean {
 			return (this as any).os.isSignedIn
-				? (this as any).os.i.account.clientSettings.gradientWindowHeader != null
-					? (this as any).os.i.account.clientSettings.gradientWindowHeader
+				? (this as any).os.i.clientSettings.gradientWindowHeader != null
+					? (this as any).os.i.clientSettings.gradientWindowHeader
 					: false
 				: false;
 		}
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index 5c6746d5dc..ceeb784315 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -9,7 +9,7 @@
 		<div class="title">
 			<p class="name">{{ name }}</p>
 			<p class="username">@{{ acct }}</p>
-			<p class="location" v-if="user.host === null && user.account.profile.location">%fa:map-marker%{{ user.account.profile.location }}</p>
+			<p class="location" v-if="user.host === null && user.profile.location">%fa:map-marker%{{ user.profile.location }}</p>
 		</div>
 		<footer>
 			<router-link :to="`/@${acct}`" :data-active="$parent.page == 'home'">%fa:home%概要</router-link>
diff --git a/src/client/app/desktop/views/pages/user/user.home.vue b/src/client/app/desktop/views/pages/user/user.home.vue
index ed3b1c7104..c254a320ce 100644
--- a/src/client/app/desktop/views/pages/user/user.home.vue
+++ b/src/client/app/desktop/views/pages/user/user.home.vue
@@ -5,7 +5,7 @@
 			<x-profile :user="user"/>
 			<x-photos :user="user"/>
 			<x-followers-you-know v-if="os.isSignedIn && os.i.id != user.id" :user="user"/>
-			<p v-if="user.host === null">%i18n:desktop.tags.mk-user.last-used-at%: <b><mk-time :time="user.account.lastUsedAt"/></b></p>
+			<p v-if="user.host === null">%i18n:desktop.tags.mk-user.last-used-at%: <b><mk-time :time="user.lastUsedAt"/></b></p>
 		</div>
 	</div>
 	<main>
diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue
index 2a82ba7861..44f20c2bc0 100644
--- a/src/client/app/desktop/views/pages/user/user.profile.vue
+++ b/src/client/app/desktop/views/pages/user/user.profile.vue
@@ -7,11 +7,11 @@
 		<p v-if="!user.isMuted"><a @click="mute">%i18n:desktop.tags.mk-user.mute%</a></p>
 	</div>
 	<div class="description" v-if="user.description">{{ user.description }}</div>
-	<div class="birthday" v-if="user.host === null && user.account.profile.birthday">
-		<p>%fa:birthday-cake%{{ user.account.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)</p>
+	<div class="birthday" v-if="user.host === null && user.profile.birthday">
+		<p>%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)</p>
 	</div>
-	<div class="twitter" v-if="user.host === null && user.account.twitter">
-		<p>%fa:B twitter%<a :href="`https://twitter.com/${user.account.twitter.screenName}`" target="_blank">@{{ user.account.twitter.screenName }}</a></p>
+	<div class="twitter" v-if="user.host === null && user.twitter">
+		<p>%fa:B twitter%<a :href="`https://twitter.com/${user.twitter.screenName}`" target="_blank">@{{ user.twitter.screenName }}</a></p>
 	</div>
 	<div class="status">
 		<p class="notes-count">%fa:angle-right%<a>{{ user.notesCount }}</a><b>投稿</b></p>
@@ -31,7 +31,7 @@ export default Vue.extend({
 	props: ['user'],
 	computed: {
 		age(): number {
-			return age(this.user.account.profile.birthday);
+			return age(this.user.profile.birthday);
 		}
 	},
 	methods: {
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index e1682e58ed..483f5aaf3b 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -127,7 +127,7 @@ export default Vue.extend({
 		isRenote(): boolean {
 			return (this.note.renote &&
 				this.note.text == null &&
-				this.note.mediaIds == null &&
+				this.note.mediaIds.length == 0 &&
 				this.note.poll == null);
 		},
 		p(): any {
@@ -165,7 +165,7 @@ export default Vue.extend({
 
 		// Draw map
 		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.account.clientSettings.showMaps : true;
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
 			if (shouldShowMap) {
 				(this as any).os.getGoogleMaps().then(maps => {
 					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 4b33c6f071..295fe4d6a8 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -5,25 +5,25 @@
 	</div>
 	<div class="renote" v-if="isRenote">
 		<p>
-			<router-link class="avatar-anchor" :to="`/@${acct}`">
+			<router-link class="avatar-anchor" :to="`/@${getAcct(note.user)}`">
 				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 			</router-link>
 			%fa:retweet%
 			<span>{{ '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.substr(0, '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.indexOf('{')) }}</span>
-			<router-link class="name" :to="`/@${acct}`">{{ name }}</router-link>
+			<router-link class="name" :to="`/@${getAcct(note.user)}`">{{ getUserName(note.user) }}</router-link>
 			<span>{{ '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.substr('%i18n:mobile.tags.mk-timeline-note.reposted-by%'.indexOf('}') + 1) }}</span>
 		</p>
 		<mk-time :time="note.createdAt"/>
 	</div>
 	<article>
-		<router-link class="avatar-anchor" :to="`/@${pAcct}`">
+		<router-link class="avatar-anchor" :to="`/@${getAcct(p.user)}`">
 			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=96`" alt="avatar"/>
 		</router-link>
 		<div class="main">
 			<header>
-				<router-link class="name" :to="`/@${pAcct}`">{{ pName }}</router-link>
-				<span class="is-bot" v-if="p.user.host === null && p.user.account.isBot">bot</span>
-				<span class="username">@{{ pAcct }}</span>
+				<router-link class="name" :to="`/@${getAcct(p.user)}`">{{ getUserName(p.user) }}</router-link>
+				<span class="is-bot" v-if="p.user.host === null && p.user.isBot">bot</span>
+				<span class="username">@{{ getAcct(p.user) }}</span>
 				<div class="info">
 					<span class="mobile" v-if="p.viaMobile">%fa:mobile-alt%</span>
 					<router-link class="created-at" :to="url">
@@ -95,27 +95,17 @@ export default Vue.extend({
 	data() {
 		return {
 			connection: null,
-			connectionId: null
+			connectionId: null,
+			getAcct,
+			getUserName
 		};
 	},
 
 	computed: {
-		acct(): string {
-			return getAcct(this.note.user);
-		},
-		name(): string {
-			return getUserName(this.note.user);
-		},
-		pAcct(): string {
-			return getAcct(this.p.user);
-		},
-		pName(): string {
-			return getUserName(this.p.user);
-		},
 		isRenote(): boolean {
 			return (this.note.renote &&
 				this.note.text == null &&
-				this.note.mediaIds == null &&
+				this.note.mediaIds.length == 0 &&
 				this.note.poll == null);
 		},
 		p(): any {
@@ -159,7 +149,7 @@ export default Vue.extend({
 
 		// Draw map
 		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.account.clientSettings.showMaps : true;
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
 			if (shouldShowMap) {
 				(this as any).os.getGoogleMaps().then(maps => {
 					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
diff --git a/src/client/app/mobile/views/components/post-detail.vue b/src/client/app/mobile/views/components/post-detail.vue
deleted file mode 100644
index e1682e58ed..0000000000
--- a/src/client/app/mobile/views/components/post-detail.vue
+++ /dev/null
@@ -1,462 +0,0 @@
-<template>
-<div class="mk-note-detail">
-	<button
-		class="more"
-		v-if="p.reply && p.reply.replyId && context == null"
-		@click="fetchContext"
-		:disabled="fetchingContext"
-	>
-		<template v-if="!contextFetching">%fa:ellipsis-v%</template>
-		<template v-if="contextFetching">%fa:spinner .pulse%</template>
-	</button>
-	<div class="context">
-		<x-sub v-for="note in context" :key="note.id" :note="note"/>
-	</div>
-	<div class="reply-to" v-if="p.reply">
-		<x-sub :note="p.reply"/>
-	</div>
-	<div class="renote" v-if="isRenote">
-		<p>
-			<router-link class="avatar-anchor" :to="`/@${acct}`">
-				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
-			</router-link>
-			%fa:retweet%
-			<router-link class="name" :to="`/@${acct}`">
-				{{ name }}
-			</router-link>
-			がRenote
-		</p>
-	</div>
-	<article>
-		<header>
-			<router-link class="avatar-anchor" :to="`/@${pAcct}`">
-				<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-			</router-link>
-			<div>
-				<router-link class="name" :to="`/@${pAcct}`">{{ pName }}</router-link>
-				<span class="username">@{{ pAcct }}</span>
-			</div>
-		</header>
-		<div class="body">
-			<mk-note-html v-if="p.text" :ast="p.text" :i="os.i" :class="$style.text"/>
-			<div class="tags" v-if="p.tags && p.tags.length > 0">
-				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
-			</div>
-			<div class="media" v-if="p.media.length > 0">
-				<mk-media-list :media-list="p.media"/>
-			</div>
-			<mk-poll v-if="p.poll" :note="p"/>
-			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
-			<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
-			<div class="map" v-if="p.geo" ref="map"></div>
-			<div class="renote" v-if="p.renote">
-				<mk-note-preview :note="p.renote"/>
-			</div>
-		</div>
-		<router-link class="time" :to="`/@${pAcct}/${p.id}`">
-			<mk-time :time="p.createdAt" mode="detail"/>
-		</router-link>
-		<footer>
-			<mk-reactions-viewer :note="p"/>
-			<button @click="reply" title="%i18n:mobile.tags.mk-note-detail.reply%">
-				%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
-			</button>
-			<button @click="renote" title="Renote">
-				%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
-			</button>
-			<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:mobile.tags.mk-note-detail.reaction%">
-				%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
-			</button>
-			<button @click="menu" ref="menuButton">
-				%fa:ellipsis-h%
-			</button>
-		</footer>
-	</article>
-	<div class="replies" v-if="!compact">
-		<x-sub v-for="note in replies" :key="note.id" :note="note"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
-import parse from '../../../../../text/parse';
-
-import MkNoteMenu from '../../../common/views/components/note-menu.vue';
-import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
-import XSub from './note-detail.sub.vue';
-
-export default Vue.extend({
-	components: {
-		XSub
-	},
-
-	props: {
-		note: {
-			type: Object,
-			required: true
-		},
-		compact: {
-			default: false
-		}
-	},
-
-	data() {
-		return {
-			context: [],
-			contextFetching: false,
-			replies: []
-		};
-	},
-
-	computed: {
-		acct(): string {
-			return getAcct(this.note.user);
-		},
-		name(): string {
-			return getUserName(this.note.user);
-		},
-		pAcct(): string {
-			return getAcct(this.p.user);
-		},
-		pName(): string {
-			return getUserName(this.p.user);
-		},
-		isRenote(): boolean {
-			return (this.note.renote &&
-				this.note.text == null &&
-				this.note.mediaIds == null &&
-				this.note.poll == null);
-		},
-		p(): any {
-			return this.isRenote ? this.note.renote : this.note;
-		},
-		reactionsCount(): number {
-			return this.p.reactionCounts
-				? Object.keys(this.p.reactionCounts)
-					.map(key => this.p.reactionCounts[key])
-					.reduce((a, b) => a + b)
-				: 0;
-		},
-		urls(): string[] {
-			if (this.p.text) {
-				const ast = parse(this.p.text);
-				return ast
-					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-					.map(t => t.url);
-			} else {
-				return null;
-			}
-		}
-	},
-
-	mounted() {
-		// Get replies
-		if (!this.compact) {
-			(this as any).api('notes/replies', {
-				noteId: this.p.id,
-				limit: 8
-			}).then(replies => {
-				this.replies = replies;
-			});
-		}
-
-		// Draw map
-		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.account.clientSettings.showMaps : true;
-			if (shouldShowMap) {
-				(this as any).os.getGoogleMaps().then(maps => {
-					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
-					const map = new maps.Map(this.$refs.map, {
-						center: uluru,
-						zoom: 15
-					});
-					new maps.Marker({
-						position: uluru,
-						map: map
-					});
-				});
-			}
-		}
-	},
-
-	methods: {
-		fetchContext() {
-			this.contextFetching = true;
-
-			// Fetch context
-			(this as any).api('notes/context', {
-				noteId: this.p.replyId
-			}).then(context => {
-				this.contextFetching = false;
-				this.context = context.reverse();
-			});
-		},
-		reply() {
-			(this as any).apis.post({
-				reply: this.p
-			});
-		},
-		renote() {
-			(this as any).apis.post({
-				renote: this.p
-			});
-		},
-		react() {
-			(this as any).os.new(MkReactionPicker, {
-				source: this.$refs.reactButton,
-				note: this.p,
-				compact: true
-			});
-		},
-		menu() {
-			(this as any).os.new(MkNoteMenu, {
-				source: this.$refs.menuButton,
-				note: this.p,
-				compact: true
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-.mk-note-detail
-	overflow hidden
-	margin 0 auto
-	padding 0
-	width 100%
-	text-align left
-	background #fff
-	border-radius 8px
-	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
-
-	> .fetching
-		padding 64px 0
-
-	> .more
-		display block
-		margin 0
-		padding 10px 0
-		width 100%
-		font-size 1em
-		text-align center
-		color #999
-		cursor pointer
-		background #fafafa
-		outline none
-		border none
-		border-bottom solid 1px #eef0f2
-		border-radius 6px 6px 0 0
-		box-shadow none
-
-		&:hover
-			background #f6f6f6
-
-		&:active
-			background #f0f0f0
-
-		&:disabled
-			color #ccc
-
-	> .context
-		> *
-			border-bottom 1px solid #eef0f2
-
-	> .renote
-		color #9dbb00
-		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
-
-		> p
-			margin 0
-			padding 16px 32px
-
-			.avatar-anchor
-				display inline-block
-
-				.avatar
-					vertical-align bottom
-					min-width 28px
-					min-height 28px
-					max-width 28px
-					max-height 28px
-					margin 0 8px 0 0
-					border-radius 6px
-
-			[data-fa]
-				margin-right 4px
-
-			.name
-				font-weight bold
-
-		& + article
-			padding-top 8px
-
-	> .reply-to
-		border-bottom 1px solid #eef0f2
-
-	> article
-		padding 14px 16px 9px 16px
-
-		@media (min-width 500px)
-			padding 28px 32px 18px 32px
-
-		&:after
-			content ""
-			display block
-			clear both
-
-		&:hover
-			> .main > footer > button
-				color #888
-
-		> header
-			display flex
-			line-height 1.1
-
-			> .avatar-anchor
-				display block
-				padding 0 .5em 0 0
-
-				> .avatar
-					display block
-					width 54px
-					height 54px
-					margin 0
-					border-radius 8px
-					vertical-align bottom
-
-					@media (min-width 500px)
-						width 60px
-						height 60px
-
-			> div
-
-				> .name
-					display inline-block
-					margin .4em 0
-					color #777
-					font-size 16px
-					font-weight bold
-					text-align left
-					text-decoration none
-
-					&:hover
-						text-decoration underline
-
-				> .username
-					display block
-					text-align left
-					margin 0
-					color #ccc
-
-		> .body
-			padding 8px 0
-
-			> .renote
-				margin 8px 0
-
-				> .mk-note-preview
-					padding 16px
-					border dashed 1px #c0dac6
-					border-radius 8px
-
-			> .location
-				margin 4px 0
-				font-size 12px
-				color #ccc
-
-			> .map
-				width 100%
-				height 200px
-
-				&:empty
-					display none
-
-			> .mk-url-preview
-				margin-top 8px
-
-			> .media
-				> img
-					display block
-					max-width 100%
-
-			> .tags
-				margin 4px 0 0 0
-
-				> *
-					display inline-block
-					margin 0 8px 0 0
-					padding 2px 8px 2px 16px
-					font-size 90%
-					color #8d969e
-					background #edf0f3
-					border-radius 4px
-
-					&:before
-						content ""
-						display block
-						position absolute
-						top 0
-						bottom 0
-						left 4px
-						width 8px
-						height 8px
-						margin auto 0
-						background #fff
-						border-radius 100%
-
-		> .time
-			font-size 16px
-			color #c0c0c0
-
-		> footer
-			font-size 1.2em
-
-			> button
-				margin 0
-				padding 8px
-				background transparent
-				border none
-				box-shadow none
-				font-size 1em
-				color #ddd
-				cursor pointer
-
-				&:not(:last-child)
-					margin-right 28px
-
-				&:hover
-					color #666
-
-				> .count
-					display inline
-					margin 0 0 0 8px
-					color #999
-
-				&.reacted
-					color $theme-color
-
-	> .replies
-		> *
-			border-top 1px solid #eef0f2
-
-</style>
-
-<style lang="stylus" module>
-.text
-	display block
-	margin 0
-	padding 0
-	overflow-wrap break-word
-	font-size 16px
-	color #717171
-
-	@media (min-width 500px)
-		font-size 24px
-
-</style>
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 6fcbbb47e8..70be6db7b2 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -111,7 +111,7 @@ export default Vue.extend({
 		},
 		post() {
 			this.posting = true;
-			const viaMobile = (this as any).os.i.account.clientSettings.disableViaMobile !== true;
+			const viaMobile = (this as any).os.i.clientSettings.disableViaMobile !== true;
 			(this as any).api('notes/create', {
 				text: this.text == '' ? undefined : this.text,
 				mediaIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
diff --git a/src/client/app/mobile/views/components/post.vue b/src/client/app/mobile/views/components/post.vue
deleted file mode 100644
index 4b33c6f071..0000000000
--- a/src/client/app/mobile/views/components/post.vue
+++ /dev/null
@@ -1,540 +0,0 @@
-<template>
-<div class="note" :class="{ renote: isRenote }">
-	<div class="reply-to" v-if="p.reply">
-		<x-sub :note="p.reply"/>
-	</div>
-	<div class="renote" v-if="isRenote">
-		<p>
-			<router-link class="avatar-anchor" :to="`/@${acct}`">
-				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-			</router-link>
-			%fa:retweet%
-			<span>{{ '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.substr(0, '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.indexOf('{')) }}</span>
-			<router-link class="name" :to="`/@${acct}`">{{ name }}</router-link>
-			<span>{{ '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.substr('%i18n:mobile.tags.mk-timeline-note.reposted-by%'.indexOf('}') + 1) }}</span>
-		</p>
-		<mk-time :time="note.createdAt"/>
-	</div>
-	<article>
-		<router-link class="avatar-anchor" :to="`/@${pAcct}`">
-			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=96`" alt="avatar"/>
-		</router-link>
-		<div class="main">
-			<header>
-				<router-link class="name" :to="`/@${pAcct}`">{{ pName }}</router-link>
-				<span class="is-bot" v-if="p.user.host === null && p.user.account.isBot">bot</span>
-				<span class="username">@{{ pAcct }}</span>
-				<div class="info">
-					<span class="mobile" v-if="p.viaMobile">%fa:mobile-alt%</span>
-					<router-link class="created-at" :to="url">
-						<mk-time :time="p.createdAt"/>
-					</router-link>
-				</div>
-			</header>
-			<div class="body">
-				<p class="channel" v-if="p.channel != null"><a target="_blank">{{ p.channel.title }}</a>:</p>
-				<div class="text">
-					<a class="reply" v-if="p.reply">
-						%fa:reply%
-					</a>
-					<mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
-					<a class="rp" v-if="p.renote != null">RP:</a>
-				</div>
-				<div class="media" v-if="p.media.length > 0">
-					<mk-media-list :media-list="p.media"/>
-				</div>
-				<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
-				<div class="tags" v-if="p.tags && p.tags.length > 0">
-					<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
-				</div>
-				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
-				<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
-				<div class="map" v-if="p.geo" ref="map"></div>
-				<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
-				<div class="renote" v-if="p.renote">
-					<mk-note-preview :note="p.renote"/>
-				</div>
-			</div>
-			<footer>
-				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
-				<button @click="reply">
-					%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
-				</button>
-				<button @click="renote" title="Renote">
-					%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
-				</button>
-				<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton">
-					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
-				</button>
-				<button class="menu" @click="menu" ref="menuButton">
-					%fa:ellipsis-h%
-				</button>
-			</footer>
-		</div>
-	</article>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
-import parse from '../../../../../text/parse';
-
-import MkNoteMenu from '../../../common/views/components/note-menu.vue';
-import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
-import XSub from './note.sub.vue';
-
-export default Vue.extend({
-	components: {
-		XSub
-	},
-
-	props: ['note'],
-
-	data() {
-		return {
-			connection: null,
-			connectionId: null
-		};
-	},
-
-	computed: {
-		acct(): string {
-			return getAcct(this.note.user);
-		},
-		name(): string {
-			return getUserName(this.note.user);
-		},
-		pAcct(): string {
-			return getAcct(this.p.user);
-		},
-		pName(): string {
-			return getUserName(this.p.user);
-		},
-		isRenote(): boolean {
-			return (this.note.renote &&
-				this.note.text == null &&
-				this.note.mediaIds == null &&
-				this.note.poll == null);
-		},
-		p(): any {
-			return this.isRenote ? this.note.renote : this.note;
-		},
-		reactionsCount(): number {
-			return this.p.reactionCounts
-				? Object.keys(this.p.reactionCounts)
-					.map(key => this.p.reactionCounts[key])
-					.reduce((a, b) => a + b)
-				: 0;
-		},
-		url(): string {
-			return `/@${this.pAcct}/${this.p.id}`;
-		},
-		urls(): string[] {
-			if (this.p.text) {
-				const ast = parse(this.p.text);
-				return ast
-					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-					.map(t => t.url);
-			} else {
-				return null;
-			}
-		}
-	},
-
-	created() {
-		if ((this as any).os.isSignedIn) {
-			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = (this as any).os.stream.use();
-		}
-	},
-
-	mounted() {
-		this.capture(true);
-
-		if ((this as any).os.isSignedIn) {
-			this.connection.on('_connected_', this.onStreamConnected);
-		}
-
-		// Draw map
-		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.account.clientSettings.showMaps : true;
-			if (shouldShowMap) {
-				(this as any).os.getGoogleMaps().then(maps => {
-					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
-					const map = new maps.Map(this.$refs.map, {
-						center: uluru,
-						zoom: 15
-					});
-					new maps.Marker({
-						position: uluru,
-						map: map
-					});
-				});
-			}
-		}
-	},
-
-	beforeDestroy() {
-		this.decapture(true);
-
-		if ((this as any).os.isSignedIn) {
-			this.connection.off('_connected_', this.onStreamConnected);
-			(this as any).os.stream.dispose(this.connectionId);
-		}
-	},
-
-	methods: {
-		capture(withHandler = false) {
-			if ((this as any).os.isSignedIn) {
-				this.connection.send({
-					type: 'capture',
-					id: this.p.id
-				});
-				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
-			}
-		},
-		decapture(withHandler = false) {
-			if ((this as any).os.isSignedIn) {
-				this.connection.send({
-					type: 'decapture',
-					id: this.p.id
-				});
-				if (withHandler) this.connection.off('note-updated', this.onStreamNoteUpdated);
-			}
-		},
-		onStreamConnected() {
-			this.capture();
-		},
-		onStreamNoteUpdated(data) {
-			const note = data.note;
-			if (note.id == this.note.id) {
-				this.$emit('update:note', note);
-			} else if (note.id == this.note.renoteId) {
-				this.note.renote = note;
-			}
-		},
-		reply() {
-			(this as any).apis.post({
-				reply: this.p
-			});
-		},
-		renote() {
-			(this as any).apis.post({
-				renote: this.p
-			});
-		},
-		react() {
-			(this as any).os.new(MkReactionPicker, {
-				source: this.$refs.reactButton,
-				note: this.p,
-				compact: true
-			});
-		},
-		menu() {
-			(this as any).os.new(MkNoteMenu, {
-				source: this.$refs.menuButton,
-				note: this.p,
-				compact: true
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-.note
-	font-size 12px
-	border-bottom solid 1px #eaeaea
-
-	&:first-child
-		border-radius 8px 8px 0 0
-
-		> .renote
-			border-radius 8px 8px 0 0
-
-	&:last-of-type
-		border-bottom none
-
-	@media (min-width 350px)
-		font-size 14px
-
-	@media (min-width 500px)
-		font-size 16px
-
-	> .renote
-		color #9dbb00
-		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
-
-		> p
-			margin 0
-			padding 8px 16px
-			line-height 28px
-
-			@media (min-width 500px)
-				padding 16px
-
-			.avatar-anchor
-				display inline-block
-
-				.avatar
-					vertical-align bottom
-					width 28px
-					height 28px
-					margin 0 8px 0 0
-					border-radius 6px
-
-			[data-fa]
-				margin-right 4px
-
-			.name
-				font-weight bold
-
-		> .mk-time
-			position absolute
-			top 8px
-			right 16px
-			font-size 0.9em
-			line-height 28px
-
-			@media (min-width 500px)
-				top 16px
-
-		& + article
-			padding-top 8px
-
-	> .reply-to
-		background rgba(0, 0, 0, 0.0125)
-
-		> .mk-note-preview
-			background transparent
-
-	> article
-		padding 14px 16px 9px 16px
-
-		&:after
-			content ""
-			display block
-			clear both
-
-		> .avatar-anchor
-			display block
-			float left
-			margin 0 10px 8px 0
-			position -webkit-sticky
-			position sticky
-			top 62px
-
-			@media (min-width 500px)
-				margin-right 16px
-
-			> .avatar
-				display block
-				width 48px
-				height 48px
-				margin 0
-				border-radius 6px
-				vertical-align bottom
-
-				@media (min-width 500px)
-					width 58px
-					height 58px
-					border-radius 8px
-
-		> .main
-			float left
-			width calc(100% - 58px)
-
-			@media (min-width 500px)
-				width calc(100% - 74px)
-
-			> header
-				display flex
-				align-items center
-				white-space nowrap
-
-				@media (min-width 500px)
-					margin-bottom 2px
-
-				> .name
-					display block
-					margin 0 0.5em 0 0
-					padding 0
-					overflow hidden
-					color #627079
-					font-size 1em
-					font-weight bold
-					text-decoration none
-					text-overflow ellipsis
-
-					&:hover
-						text-decoration underline
-
-				> .is-bot
-					margin 0 0.5em 0 0
-					padding 1px 6px
-					font-size 12px
-					color #aaa
-					border solid 1px #ddd
-					border-radius 3px
-
-				> .username
-					margin 0 0.5em 0 0
-					color #ccc
-
-				> .info
-					margin-left auto
-					font-size 0.9em
-
-					> .mobile
-						margin-right 6px
-						color #c0c0c0
-
-					> .created-at
-						color #c0c0c0
-
-			> .body
-
-				> .text
-					display block
-					margin 0
-					padding 0
-					overflow-wrap break-word
-					font-size 1.1em
-					color #717171
-
-					>>> .quote
-						margin 8px
-						padding 6px 12px
-						color #aaa
-						border-left solid 3px #eee
-
-					> .reply
-						margin-right 8px
-						color #717171
-
-					> .rp
-						margin-left 4px
-						font-style oblique
-						color #a0bf46
-
-					[data-is-me]:after
-						content "you"
-						padding 0 4px
-						margin-left 4px
-						font-size 80%
-						color $theme-color-foreground
-						background $theme-color
-						border-radius 4px
-
-				.mk-url-preview
-					margin-top 8px
-
-				> .channel
-					margin 0
-
-				> .tags
-					margin 4px 0 0 0
-
-					> *
-						display inline-block
-						margin 0 8px 0 0
-						padding 2px 8px 2px 16px
-						font-size 90%
-						color #8d969e
-						background #edf0f3
-						border-radius 4px
-
-						&:before
-							content ""
-							display block
-							position absolute
-							top 0
-							bottom 0
-							left 4px
-							width 8px
-							height 8px
-							margin auto 0
-							background #fff
-							border-radius 100%
-
-				> .media
-					> img
-						display block
-						max-width 100%
-
-				> .location
-					margin 4px 0
-					font-size 12px
-					color #ccc
-
-				> .map
-					width 100%
-					height 200px
-
-					&:empty
-						display none
-
-				> .app
-					font-size 12px
-					color #ccc
-
-				> .mk-poll
-					font-size 80%
-
-				> .renote
-					margin 8px 0
-
-					> .mk-note-preview
-						padding 16px
-						border dashed 1px #c0dac6
-						border-radius 8px
-
-			> footer
-				> button
-					margin 0
-					padding 8px
-					background transparent
-					border none
-					box-shadow none
-					font-size 1em
-					color #ddd
-					cursor pointer
-
-					&:not(:last-child)
-						margin-right 28px
-
-					&:hover
-						color #666
-
-					> .count
-						display inline
-						margin 0 0 0 8px
-						color #999
-
-					&.reacted
-						color $theme-color
-
-					&.menu
-						@media (max-width 350px)
-							display none
-
-</style>
-
-<style lang="stylus" module>
-.text
-	code
-		padding 4px 8px
-		margin 0 0.5em
-		font-size 80%
-		color #525252
-		background #f8f8f8
-		border-radius 2px
-
-	pre > code
-		padding 16px
-		margin 0
-</style>
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index fd4f31fd98..f664341cdd 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -63,9 +63,9 @@ export default Vue.extend({
 				}
 			});
 
-			const ago = (new Date().getTime() - new Date((this as any).os.i.account.lastUsedAt).getTime()) / 1000
+			const ago = (new Date().getTime() - new Date((this as any).os.i.lastUsedAt).getTime()) / 1000
 			const isHisasiburi = ago >= 3600;
-			(this as any).os.i.account.lastUsedAt = new Date();
+			(this as any).os.i.lastUsedAt = new Date();
 			if (isHisasiburi) {
 				(this.$refs.welcomeback as any).style.display = 'block';
 				(this.$refs.main as any).style.overflow = 'hidden';
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index ab61166cf3..3de2ba1c3e 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -82,8 +82,8 @@ export default Vue.extend({
 		};
 	},
 	created() {
-		if ((this as any).os.i.account.clientSettings.mobileHome == null) {
-			Vue.set((this as any).os.i.account.clientSettings, 'mobileHome', [{
+		if ((this as any).os.i.clientSettings.mobileHome == null) {
+			Vue.set((this as any).os.i.clientSettings, 'mobileHome', [{
 				name: 'calendar',
 				id: 'a', data: {}
 			}, {
@@ -105,14 +105,14 @@ export default Vue.extend({
 				name: 'version',
 				id: 'g', data: {}
 			}]);
-			this.widgets = (this as any).os.i.account.clientSettings.mobileHome;
+			this.widgets = (this as any).os.i.clientSettings.mobileHome;
 			this.saveHome();
 		} else {
-			this.widgets = (this as any).os.i.account.clientSettings.mobileHome;
+			this.widgets = (this as any).os.i.clientSettings.mobileHome;
 		}
 
-		this.$watch('os.i.account.clientSettings', i => {
-			this.widgets = (this as any).os.i.account.clientSettings.mobileHome;
+		this.$watch('os.i.clientSettings', i => {
+			this.widgets = (this as any).os.i.clientSettings.mobileHome;
 		}, {
 			deep: true
 		});
@@ -157,15 +157,15 @@ export default Vue.extend({
 		},
 		onHomeUpdated(data) {
 			if (data.home) {
-				(this as any).os.i.account.clientSettings.mobileHome = data.home;
+				(this as any).os.i.clientSettings.mobileHome = data.home;
 				this.widgets = data.home;
 			} else {
-				const w = (this as any).os.i.account.clientSettings.mobileHome.find(w => w.id == data.id);
+				const w = (this as any).os.i.clientSettings.mobileHome.find(w => w.id == data.id);
 				if (w != null) {
 					w.data = data.data;
 					this.$refs[w.id][0].preventSave = true;
 					this.$refs[w.id][0].props = w.data;
-					this.widgets = (this as any).os.i.account.clientSettings.mobileHome;
+					this.widgets = (this as any).os.i.clientSettings.mobileHome;
 				}
 			}
 		},
@@ -194,7 +194,7 @@ export default Vue.extend({
 			this.saveHome();
 		},
 		saveHome() {
-			(this as any).os.i.account.clientSettings.mobileHome = this.widgets;
+			(this as any).os.i.clientSettings.mobileHome = this.widgets;
 			(this as any).api('i/update_mobile_home', {
 				home: this.widgets
 			});
diff --git a/src/client/app/mobile/views/pages/profile-setting.vue b/src/client/app/mobile/views/pages/profile-setting.vue
index 4a560c0272..7f0ff5aad7 100644
--- a/src/client/app/mobile/views/pages/profile-setting.vue
+++ b/src/client/app/mobile/views/pages/profile-setting.vue
@@ -53,9 +53,9 @@ export default Vue.extend({
 	},
 	created() {
 		this.name = (this as any).os.i.name || '';
-		this.location = (this as any).os.i.account.profile.location;
+		this.location = (this as any).os.i.profile.location;
 		this.description = (this as any).os.i.description;
-		this.birthday = (this as any).os.i.account.profile.birthday;
+		this.birthday = (this as any).os.i.profile.birthday;
 	},
 	mounted() {
 		document.title = 'Misskey | %i18n:mobile.tags.mk-profile-setting-page.title%';
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index 08fa4e2774..f33f209db1 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -18,11 +18,11 @@
 				</div>
 				<div class="description">{{ user.description }}</div>
 				<div class="info">
-					<p class="location" v-if="user.host === null && user.account.profile.location">
-						%fa:map-marker%{{ user.account.profile.location }}
+					<p class="location" v-if="user.host === null && user.profile.location">
+						%fa:map-marker%{{ user.profile.location }}
 					</p>
-					<p class="birthday" v-if="user.host === null && user.account.profile.birthday">
-						%fa:birthday-cake%{{ user.account.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)
+					<p class="birthday" v-if="user.host === null && user.profile.birthday">
+						%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)
 					</p>
 				</div>
 				<div class="status">
@@ -81,7 +81,7 @@ export default Vue.extend({
 			return this.getAcct(this.user);
 		},
 		age(): number {
-			return age(this.user.account.profile.birthday);
+			return age(this.user.profile.birthday);
 		},
 		name() {
 			return getUserName(this.user);
diff --git a/src/client/app/mobile/views/pages/user/home.vue b/src/client/app/mobile/views/pages/user/home.vue
index 2554084969..c0cd9b8da8 100644
--- a/src/client/app/mobile/views/pages/user/home.vue
+++ b/src/client/app/mobile/views/pages/user/home.vue
@@ -31,7 +31,7 @@
 			<x-followers-you-know :user="user"/>
 		</div>
 	</section>
-	<p v-if="user.host === null">%i18n:mobile.tags.mk-user-overview.last-used-at%: <b><mk-time :time="user.account.lastUsedAt"/></b></p>
+	<p v-if="user.host === null">%i18n:mobile.tags.mk-user-overview.last-used-at%: <b><mk-time :time="user.lastUsedAt"/></b></p>
 </div>
 </template>
 
diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index 17cdf93065..27baf8bee4 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -8,7 +8,7 @@
 			<form @submit.prevent="onSubmit">
 				<input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange"/>
 				<input v-model="password" type="password" placeholder="パスワード" required/>
-				<input v-if="user && user.account.twoFactorEnabled" v-model="token" type="number" placeholder="トークン" required/>
+				<input v-if="user && user.twoFactorEnabled" v-model="token" type="number" placeholder="トークン" required/>
 				<button type="submit" :disabled="signing">{{ signing ? 'ログインしています' : 'ログイン' }}</button>
 			</form>
 			<div>
@@ -70,7 +70,7 @@ export default Vue.extend({
 			(this as any).api('signin', {
 				username: this.username,
 				password: this.password,
-				token: this.user && this.user.account.twoFactorEnabled ? this.token : undefined
+				token: this.user && this.user.twoFactorEnabled ? this.token : undefined
 			}).then(() => {
 				location.reload();
 			}).catch(() => {
diff --git a/src/models/user.ts b/src/models/user.ts
index f86aefe9a4..906bcb533b 100644
--- a/src/models/user.ts
+++ b/src/models/user.ts
@@ -11,7 +11,7 @@ import config from '../config';
 const User = db.get<IUser>('users');
 
 User.createIndex('username');
-User.createIndex('account.token');
+User.createIndex('token');
 
 export default User;
 
@@ -40,45 +40,41 @@ type IUserBase = {
 
 export interface ILocalUser extends IUserBase {
 	host: null;
-	account: {
-		keypair: string;
-		email: string;
-		links: string[];
-		password: string;
-		token: string;
-		twitter: {
-			accessToken: string;
-			accessTokenSecret: string;
-			userId: string;
-			screenName: string;
-		};
-		line: {
-			userId: string;
-		};
-		profile: {
-			location: string;
-			birthday: string; // 'YYYY-MM-DD'
-			tags: string[];
-		};
-		lastUsedAt: Date;
-		isBot: boolean;
-		isPro: boolean;
-		twoFactorSecret: string;
-		twoFactorEnabled: boolean;
-		twoFactorTempSecret: string;
-		clientSettings: any;
-		settings: any;
+	keypair: string;
+	email: string;
+	links: string[];
+	password: string;
+	token: string;
+	twitter: {
+		accessToken: string;
+		accessTokenSecret: string;
+		userId: string;
+		screenName: string;
 	};
+	line: {
+		userId: string;
+	};
+	profile: {
+		location: string;
+		birthday: string; // 'YYYY-MM-DD'
+		tags: string[];
+	};
+	lastUsedAt: Date;
+	isBot: boolean;
+	isPro: boolean;
+	twoFactorSecret: string;
+	twoFactorEnabled: boolean;
+	twoFactorTempSecret: string;
+	clientSettings: any;
+	settings: any;
 }
 
 export interface IRemoteUser extends IUserBase {
-	account: {
-		inbox: string;
-		uri: string;
-		publicKey: {
-			id: string;
-			publicKeyPem: string;
-		};
+	inbox: string;
+	uri: string;
+	publicKey: {
+		id: string;
+		publicKeyPem: string;
 	};
 }
 
@@ -150,11 +146,11 @@ export const pack = (
 
 	const fields = opts.detail ? {
 	} : {
-		'account.settings': false,
-		'account.clientSettings': false,
-		'account.profile': false,
-		'account.keywords': false,
-		'account.domains': false
+		settings: false,
+		clientSettings: false,
+		profile: false,
+		keywords: false,
+		domains: false
 	};
 
 	// Populate the user if 'user' is ID
@@ -188,29 +184,29 @@ export const pack = (
 	// Remove needless properties
 	delete _user.latestNote;
 
-	if (!_user.host) {
+	if (_user.host == null) {
 		// Remove private properties
-		delete _user.account.keypair;
-		delete _user.account.password;
-		delete _user.account.token;
-		delete _user.account.twoFactorTempSecret;
-		delete _user.account.twoFactorSecret;
+		delete _user.keypair;
+		delete _user.password;
+		delete _user.token;
+		delete _user.twoFactorTempSecret;
+		delete _user.twoFactorSecret;
 		delete _user.usernameLower;
-		if (_user.account.twitter) {
-			delete _user.account.twitter.accessToken;
-			delete _user.account.twitter.accessTokenSecret;
+		if (_user.twitter) {
+			delete _user.twitter.accessToken;
+			delete _user.twitter.accessTokenSecret;
 		}
-		delete _user.account.line;
+		delete _user.line;
 
 		// Visible via only the official client
 		if (!opts.includeSecrets) {
-			delete _user.account.email;
-			delete _user.account.settings;
-			delete _user.account.clientSettings;
+			delete _user.email;
+			delete _user.settings;
+			delete _user.clientSettings;
 		}
 
 		if (!opts.detail) {
-			delete _user.account.twoFactorEnabled;
+			delete _user.twoFactorEnabled;
 		}
 	}
 
diff --git a/src/queue/processors/http/process-inbox.ts b/src/queue/processors/http/process-inbox.ts
index eb4b62d37f..6608907a7a 100644
--- a/src/queue/processors/http/process-inbox.ts
+++ b/src/queue/processors/http/process-inbox.ts
@@ -36,7 +36,7 @@ export default async (job: kue.Job, done): Promise<void> => {
 	} else {
 		user = await User.findOne({
 			host: { $ne: null },
-			'account.publicKey.id': signature.keyId
+			'publicKey.id': signature.keyId
 		}) as IRemoteUser;
 
 		// アクティビティを送信してきたユーザーがまだMisskeyサーバーに登録されていなかったら登録する
@@ -50,7 +50,7 @@ export default async (job: kue.Job, done): Promise<void> => {
 		return;
 	}
 
-	if (!verifySignature(signature, user.account.publicKey.publicKeyPem)) {
+	if (!verifySignature(signature, user.publicKey.publicKeyPem)) {
 		console.warn('signature verification failed');
 		done();
 		return;
diff --git a/src/remote/activitypub/act/create/image.ts b/src/remote/activitypub/act/create/image.ts
index 30a75e7377..c87423c5fd 100644
--- a/src/remote/activitypub/act/create/image.ts
+++ b/src/remote/activitypub/act/create/image.ts
@@ -7,7 +7,7 @@ import { IDriveFile } from '../../../../models/drive-file';
 const log = debug('misskey:activitypub');
 
 export default async function(actor: IRemoteUser, image): Promise<IDriveFile> {
-	if ('attributedTo' in image && actor.account.uri !== image.attributedTo) {
+	if ('attributedTo' in image && actor.uri !== image.attributedTo) {
 		log(`invalid image: ${JSON.stringify(image, null, 2)}`);
 		throw new Error('invalid image');
 	}
diff --git a/src/remote/activitypub/act/create/index.ts b/src/remote/activitypub/act/create/index.ts
index dd0b112141..7cb9b08449 100644
--- a/src/remote/activitypub/act/create/index.ts
+++ b/src/remote/activitypub/act/create/index.ts
@@ -9,7 +9,7 @@ import { ICreate } from '../../type';
 const log = debug('misskey:activitypub');
 
 export default async (actor: IRemoteUser, activity: ICreate): Promise<void> => {
-	if ('actor' in activity && actor.account.uri !== activity.actor) {
+	if ('actor' in activity && actor.uri !== activity.actor) {
 		throw new Error('invalid actor');
 	}
 
diff --git a/src/remote/activitypub/act/delete/index.ts b/src/remote/activitypub/act/delete/index.ts
index 6c6faa1ae5..10b47dc4ca 100644
--- a/src/remote/activitypub/act/delete/index.ts
+++ b/src/remote/activitypub/act/delete/index.ts
@@ -7,7 +7,7 @@ import { IRemoteUser } from '../../../../models/user';
  * 削除アクティビティを捌きます
  */
 export default async (actor: IRemoteUser, activity): Promise<void> => {
-	if ('actor' in activity && actor.account.uri !== activity.actor) {
+	if ('actor' in activity && actor.uri !== activity.actor) {
 		throw new Error('invalid actor');
 	}
 
diff --git a/src/remote/activitypub/act/undo/index.ts b/src/remote/activitypub/act/undo/index.ts
index 3ede9fcfb8..71f547aeb9 100644
--- a/src/remote/activitypub/act/undo/index.ts
+++ b/src/remote/activitypub/act/undo/index.ts
@@ -8,7 +8,7 @@ import Resolver from '../../resolver';
 const log = debug('misskey:activitypub');
 
 export default async (actor: IRemoteUser, activity: IUndo): Promise<void> => {
-	if ('actor' in activity && actor.account.uri !== activity.actor) {
+	if ('actor' in activity && actor.uri !== activity.actor) {
 		throw new Error('invalid actor');
 	}
 
diff --git a/src/remote/activitypub/renderer/follow.ts b/src/remote/activitypub/renderer/follow.ts
index 6d1ded9a95..0a1ae1a4b2 100644
--- a/src/remote/activitypub/renderer/follow.ts
+++ b/src/remote/activitypub/renderer/follow.ts
@@ -4,5 +4,5 @@ import { IRemoteUser } from '../../../models/user';
 export default ({ username }, followee: IRemoteUser) => ({
 	type: 'Follow',
 	actor: `${config.url}/@${username}`,
-	object: followee.account.uri
+	object: followee.uri
 });
diff --git a/src/remote/activitypub/renderer/key.ts b/src/remote/activitypub/renderer/key.ts
index 85be7b1367..76e2f13bcc 100644
--- a/src/remote/activitypub/renderer/key.ts
+++ b/src/remote/activitypub/renderer/key.ts
@@ -6,5 +6,5 @@ export default (user: ILocalUser) => ({
 	id: `${config.url}/@${user.username}/publickey`,
 	type: 'Key',
 	owner: `${config.url}/@${user.username}`,
-	publicKeyPem: extractPublic(user.account.keypair)
+	publicKeyPem: extractPublic(user.keypair)
 });
diff --git a/src/remote/request.ts b/src/remote/request.ts
index a375aebfbb..a0c69cf4ef 100644
--- a/src/remote/request.ts
+++ b/src/remote/request.ts
@@ -4,10 +4,11 @@ import { URL } from 'url';
 import * as debug from 'debug';
 
 import config from '../config';
+import { ILocalUser } from '../models/user';
 
 const log = debug('misskey:activitypub:deliver');
 
-export default ({ account, username }, url, object) => new Promise((resolve, reject) => {
+export default (user: ILocalUser, url, object) => new Promise((resolve, reject) => {
 	log(`--> ${url}`);
 
 	const { protocol, hostname, port, pathname, search } = new URL(url);
@@ -35,8 +36,8 @@ export default ({ account, username }, url, object) => new Promise((resolve, rej
 
 	sign(req, {
 		authorizationHeaderName: 'Signature',
-		key: account.keypair,
-		keyId: `acct:${username}@${config.host}`
+		key: user.keypair,
+		keyId: `acct:${user.username}@${config.host}`
 	});
 
 	req.end(JSON.stringify(object));
diff --git a/src/renderers/get-user-summary.ts b/src/renderers/get-user-summary.ts
index 52309954d3..1bd9a7fb47 100644
--- a/src/renderers/get-user-summary.ts
+++ b/src/renderers/get-user-summary.ts
@@ -11,8 +11,7 @@ export default function(user: IUser): string {
 		`${user.notesCount}投稿、${user.followingCount}フォロー、${user.followersCount}フォロワー\n`;
 
 	if (isLocalUser(user)) {
-		const account = user.account;
-		string += `場所: ${account.profile.location}、誕生日: ${account.profile.birthday}\n`;
+		string += `場所: ${user.profile.location}、誕生日: ${user.profile.birthday}\n`;
 	}
 
 	return string + `「${user.description}」`;
diff --git a/src/server/api/authenticate.ts b/src/server/api/authenticate.ts
index 8566744831..adbeeb3b34 100644
--- a/src/server/api/authenticate.ts
+++ b/src/server/api/authenticate.ts
@@ -34,7 +34,7 @@ export default (req: express.Request) => new Promise<IAuthContext>(async (resolv
 
 	if (isNativeToken(token)) {
 		const user: IUser = await User
-			.findOne({ 'account.token': token });
+			.findOne({ 'token': token });
 
 		if (user === null) {
 			return reject('user not found');
diff --git a/src/server/api/bot/core.ts b/src/server/api/bot/core.ts
index 1cf0522349..d41af48057 100644
--- a/src/server/api/bot/core.ts
+++ b/src/server/api/bot/core.ts
@@ -226,7 +226,7 @@ class SigninContext extends Context {
 			}
 		} else {
 			// Compare password
-			const same = await bcrypt.compare(query, this.temporaryUser.account.password);
+			const same = await bcrypt.compare(query, this.temporaryUser.password);
 
 			if (same) {
 				this.bot.signin(this.temporaryUser);
diff --git a/src/server/api/bot/interfaces/line.ts b/src/server/api/bot/interfaces/line.ts
index b6b0c257e9..be3bfe33d3 100644
--- a/src/server/api/bot/interfaces/line.ts
+++ b/src/server/api/bot/interfaces/line.ts
@@ -112,11 +112,11 @@ class LineBot extends BotCore {
 			data: `showtl|${user.id}`
 		});
 
-		if (user.account.twitter) {
+		if (user.twitter) {
 			actions.push({
 				type: 'uri',
 				label: 'Twitterアカウントを見る',
-				uri: `https://twitter.com/${user.account.twitter.screenName}`
+				uri: `https://twitter.com/${user.twitter.screenName}`
 			});
 		}
 
@@ -174,7 +174,7 @@ module.exports = async (app: express.Application) => {
 		if (session == null) {
 			const user = await User.findOne({
 				host: null,
-				'account.line': {
+				'line': {
 					userId: sourceId
 				}
 			});
@@ -184,7 +184,7 @@ module.exports = async (app: express.Application) => {
 			bot.on('signin', user => {
 				User.update(user._id, {
 					$set: {
-						'account.line': {
+						'line': {
 							userId: sourceId
 						}
 					}
@@ -194,7 +194,7 @@ module.exports = async (app: express.Application) => {
 			bot.on('signout', user => {
 				User.update(user._id, {
 					$set: {
-						'account.line': {
+						'line': {
 							userId: null
 						}
 					}
diff --git a/src/server/api/common/signin.ts b/src/server/api/common/signin.ts
index f9688790c4..8bb327694d 100644
--- a/src/server/api/common/signin.ts
+++ b/src/server/api/common/signin.ts
@@ -2,7 +2,7 @@ import config from '../../../config';
 
 export default function(res, user, redirect: boolean) {
 	const expires = 1000 * 60 * 60 * 24 * 365; // One Year
-	res.cookie('i', user.account.token, {
+	res.cookie('i', user.token, {
 		path: '/',
 		domain: `.${config.hostname}`,
 		secure: config.url.substr(0, 5) === 'https',
diff --git a/src/server/api/endpoints/following/create.ts b/src/server/api/endpoints/following/create.ts
index 0ccac8d83d..d3cc549ca7 100644
--- a/src/server/api/endpoints/following/create.ts
+++ b/src/server/api/endpoints/following/create.ts
@@ -31,7 +31,7 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	}, {
 		fields: {
 			data: false,
-			'account.profile': false
+			'profile': false
 		}
 	});
 
diff --git a/src/server/api/endpoints/following/delete.ts b/src/server/api/endpoints/following/delete.ts
index 0684b87504..0d0a6c7132 100644
--- a/src/server/api/endpoints/following/delete.ts
+++ b/src/server/api/endpoints/following/delete.ts
@@ -31,7 +31,7 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	}, {
 		fields: {
 			data: false,
-			'account.profile': false
+			'profile': false
 		}
 	});
 
diff --git a/src/server/api/endpoints/i.ts b/src/server/api/endpoints/i.ts
index 44de71d162..0be30500c4 100644
--- a/src/server/api/endpoints/i.ts
+++ b/src/server/api/endpoints/i.ts
@@ -5,12 +5,6 @@ import User, { pack } from '../../../models/user';
 
 /**
  * Show myself
- *
- * @param {any} params
- * @param {any} user
- * @param {any} app
- * @param {Boolean} isSecure
- * @return {Promise<any>}
  */
 module.exports = (params, user, _, isSecure) => new Promise(async (res, rej) => {
 	// Serialize
@@ -22,7 +16,7 @@ module.exports = (params, user, _, isSecure) => new Promise(async (res, rej) =>
 	// Update lastUsedAt
 	User.update({ _id: user._id }, {
 		$set: {
-			'account.lastUsedAt': new Date()
+			lastUsedAt: new Date()
 		}
 	});
 });
diff --git a/src/server/api/endpoints/i/2fa/done.ts b/src/server/api/endpoints/i/2fa/done.ts
index 0b2e32c13f..3e824feffd 100644
--- a/src/server/api/endpoints/i/2fa/done.ts
+++ b/src/server/api/endpoints/i/2fa/done.ts
@@ -28,8 +28,8 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
 
 	await User.update(user._id, {
 		$set: {
-			'account.twoFactorSecret': user.twoFactorTempSecret,
-			'account.twoFactorEnabled': true
+			'twoFactorSecret': user.twoFactorTempSecret,
+			'twoFactorEnabled': true
 		}
 	});
 
diff --git a/src/server/api/endpoints/i/2fa/register.ts b/src/server/api/endpoints/i/2fa/register.ts
index dc7fb959bb..bed64a2545 100644
--- a/src/server/api/endpoints/i/2fa/register.ts
+++ b/src/server/api/endpoints/i/2fa/register.ts
@@ -14,7 +14,7 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
 	if (passwordErr) return rej('invalid password param');
 
 	// Compare password
-	const same = await bcrypt.compare(password, user.account.password);
+	const same = await bcrypt.compare(password, user.password);
 
 	if (!same) {
 		return rej('incorrect password');
diff --git a/src/server/api/endpoints/i/2fa/unregister.ts b/src/server/api/endpoints/i/2fa/unregister.ts
index ff2a435fee..f9d7a25f53 100644
--- a/src/server/api/endpoints/i/2fa/unregister.ts
+++ b/src/server/api/endpoints/i/2fa/unregister.ts
@@ -11,7 +11,7 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
 	if (passwordErr) return rej('invalid password param');
 
 	// Compare password
-	const same = await bcrypt.compare(password, user.account.password);
+	const same = await bcrypt.compare(password, user.password);
 
 	if (!same) {
 		return rej('incorrect password');
@@ -19,8 +19,8 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
 
 	await User.update(user._id, {
 		$set: {
-			'account.twoFactorSecret': null,
-			'account.twoFactorEnabled': false
+			'twoFactorSecret': null,
+			'twoFactorEnabled': false
 		}
 	});
 
diff --git a/src/server/api/endpoints/i/change_password.ts b/src/server/api/endpoints/i/change_password.ts
index a38b56a216..57415083f1 100644
--- a/src/server/api/endpoints/i/change_password.ts
+++ b/src/server/api/endpoints/i/change_password.ts
@@ -22,7 +22,7 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
 	if (newPasswordErr) return rej('invalid newPassword param');
 
 	// Compare password
-	const same = await bcrypt.compare(currentPassword, user.account.password);
+	const same = await bcrypt.compare(currentPassword, user.password);
 
 	if (!same) {
 		return rej('incorrect password');
@@ -34,7 +34,7 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
 
 	await User.update(user._id, {
 		$set: {
-			'account.password': hash
+			'password': hash
 		}
 	});
 
diff --git a/src/server/api/endpoints/i/regenerate_token.ts b/src/server/api/endpoints/i/regenerate_token.ts
index 9aa6725f8c..f9e92c1797 100644
--- a/src/server/api/endpoints/i/regenerate_token.ts
+++ b/src/server/api/endpoints/i/regenerate_token.ts
@@ -20,7 +20,7 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
 	if (passwordErr) return rej('invalid password param');
 
 	// Compare password
-	const same = await bcrypt.compare(password, user.account.password);
+	const same = await bcrypt.compare(password, user.password);
 
 	if (!same) {
 		return rej('incorrect password');
@@ -31,7 +31,7 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
 
 	await User.update(user._id, {
 		$set: {
-			'account.token': secret
+			'token': secret
 		}
 	});
 
diff --git a/src/server/api/endpoints/i/update.ts b/src/server/api/endpoints/i/update.ts
index 279b062f52..a8caa0ebc4 100644
--- a/src/server/api/endpoints/i/update.ts
+++ b/src/server/api/endpoints/i/update.ts
@@ -29,12 +29,12 @@ module.exports = async (params, user, _, isSecure) => new Promise(async (res, re
 	// Get 'location' parameter
 	const [location, locationErr] = $(params.location).optional.nullable.string().pipe(isValidLocation).$;
 	if (locationErr) return rej('invalid location param');
-	if (location !== undefined) user.account.profile.location = location;
+	if (location !== undefined) user.profile.location = location;
 
 	// Get 'birthday' parameter
 	const [birthday, birthdayErr] = $(params.birthday).optional.nullable.string().pipe(isValidBirthday).$;
 	if (birthdayErr) return rej('invalid birthday param');
-	if (birthday !== undefined) user.account.profile.birthday = birthday;
+	if (birthday !== undefined) user.profile.birthday = birthday;
 
 	// Get 'avatarId' parameter
 	const [avatarId, avatarIdErr] = $(params.avatarId).optional.id().$;
@@ -49,12 +49,12 @@ module.exports = async (params, user, _, isSecure) => new Promise(async (res, re
 	// Get 'isBot' parameter
 	const [isBot, isBotErr] = $(params.isBot).optional.boolean().$;
 	if (isBotErr) return rej('invalid isBot param');
-	if (isBot != null) user.account.isBot = isBot;
+	if (isBot != null) user.isBot = isBot;
 
 	// Get 'autoWatch' parameter
 	const [autoWatch, autoWatchErr] = $(params.autoWatch).optional.boolean().$;
 	if (autoWatchErr) return rej('invalid autoWatch param');
-	if (autoWatch != null) user.account.settings.autoWatch = autoWatch;
+	if (autoWatch != null) user.settings.autoWatch = autoWatch;
 
 	await User.update(user._id, {
 		$set: {
@@ -62,9 +62,9 @@ module.exports = async (params, user, _, isSecure) => new Promise(async (res, re
 			description: user.description,
 			avatarId: user.avatarId,
 			bannerId: user.bannerId,
-			'account.profile': user.account.profile,
-			'account.isBot': user.account.isBot,
-			'account.settings': user.account.settings
+			'profile': user.profile,
+			'isBot': user.isBot,
+			'settings': user.settings
 		}
 	});
 
diff --git a/src/server/api/endpoints/i/update_client_setting.ts b/src/server/api/endpoints/i/update_client_setting.ts
index 10741aceba..b0d5db5ec2 100644
--- a/src/server/api/endpoints/i/update_client_setting.ts
+++ b/src/server/api/endpoints/i/update_client_setting.ts
@@ -22,14 +22,14 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
 	if (valueErr) return rej('invalid value param');
 
 	const x = {};
-	x[`account.clientSettings.${name}`] = value;
+	x[`clientSettings.${name}`] = value;
 
 	await User.update(user._id, {
 		$set: x
 	});
 
 	// Serialize
-	user.account.clientSettings[name] = value;
+	user.clientSettings[name] = value;
 	const iObj = await pack(user, user, {
 		detail: true,
 		includeSecrets: true
diff --git a/src/server/api/endpoints/i/update_home.ts b/src/server/api/endpoints/i/update_home.ts
index 91be0714d7..ce7661ede0 100644
--- a/src/server/api/endpoints/i/update_home.ts
+++ b/src/server/api/endpoints/i/update_home.ts
@@ -26,7 +26,7 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
 	if (home) {
 		await User.update(user._id, {
 			$set: {
-				'account.clientSettings.home': home
+				'clientSettings.home': home
 			}
 		});
 
@@ -38,7 +38,7 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
 	} else {
 		if (id == null && data == null) return rej('you need to set id and data params if home param unset');
 
-		const _home = user.account.clientSettings.home;
+		const _home = user.clientSettings.home;
 		const widget = _home.find(w => w.id == id);
 
 		if (widget == null) return rej('widget not found');
@@ -47,7 +47,7 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
 
 		await User.update(user._id, {
 			$set: {
-				'account.clientSettings.home': _home
+				'clientSettings.home': _home
 			}
 		});
 
diff --git a/src/server/api/endpoints/i/update_mobile_home.ts b/src/server/api/endpoints/i/update_mobile_home.ts
index 1efda120d5..b710e2f330 100644
--- a/src/server/api/endpoints/i/update_mobile_home.ts
+++ b/src/server/api/endpoints/i/update_mobile_home.ts
@@ -25,7 +25,7 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
 	if (home) {
 		await User.update(user._id, {
 			$set: {
-				'account.clientSettings.mobileHome': home
+				'clientSettings.mobileHome': home
 			}
 		});
 
@@ -37,7 +37,7 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
 	} else {
 		if (id == null && data == null) return rej('you need to set id and data params if home param unset');
 
-		const _home = user.account.clientSettings.mobileHome || [];
+		const _home = user.clientSettings.mobileHome || [];
 		const widget = _home.find(w => w.id == id);
 
 		if (widget == null) return rej('widget not found');
@@ -46,7 +46,7 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
 
 		await User.update(user._id, {
 			$set: {
-				'account.clientSettings.mobileHome': _home
+				'clientSettings.mobileHome': _home
 			}
 		});
 
diff --git a/src/server/api/endpoints/mute/create.ts b/src/server/api/endpoints/mute/create.ts
index a7fa5f7b4b..19894d07af 100644
--- a/src/server/api/endpoints/mute/create.ts
+++ b/src/server/api/endpoints/mute/create.ts
@@ -30,7 +30,7 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	}, {
 		fields: {
 			data: false,
-			'account.profile': false
+			'profile': false
 		}
 	});
 
diff --git a/src/server/api/endpoints/mute/delete.ts b/src/server/api/endpoints/mute/delete.ts
index 687f010336..10096352ba 100644
--- a/src/server/api/endpoints/mute/delete.ts
+++ b/src/server/api/endpoints/mute/delete.ts
@@ -30,7 +30,7 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	}, {
 		fields: {
 			data: false,
-			'account.profile': false
+			'profile': false
 		}
 	});
 
diff --git a/src/server/api/endpoints/notes/polls/vote.ts b/src/server/api/endpoints/notes/polls/vote.ts
index 0e27f87ee2..fd4412ad35 100644
--- a/src/server/api/endpoints/notes/polls/vote.ts
+++ b/src/server/api/endpoints/notes/polls/vote.ts
@@ -100,7 +100,7 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 		});
 
 	// この投稿をWatchする
-	if (user.account.settings.autoWatch !== false) {
+	if (user.settings.autoWatch !== false) {
 		watch(user._id, note);
 	}
 });
diff --git a/src/server/api/endpoints/users/recommendation.ts b/src/server/api/endpoints/users/recommendation.ts
index 60483936fb..2de22da13e 100644
--- a/src/server/api/endpoints/users/recommendation.ts
+++ b/src/server/api/endpoints/users/recommendation.ts
@@ -32,7 +32,7 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 			},
 			$or: [
 				{
-					'account.lastUsedAt': {
+					'lastUsedAt': {
 						$gte: new Date(Date.now() - ms('7days'))
 					}
 				}, {
diff --git a/src/server/api/private/signin.ts b/src/server/api/private/signin.ts
index e0bd67d1ca..d7c4832c95 100644
--- a/src/server/api/private/signin.ts
+++ b/src/server/api/private/signin.ts
@@ -37,7 +37,7 @@ export default async (req: express.Request, res: express.Response) => {
 	}, {
 		fields: {
 			data: false,
-			'account.profile': false
+			'profile': false
 		}
 	}) as ILocalUser;
 
@@ -48,15 +48,13 @@ export default async (req: express.Request, res: express.Response) => {
 		return;
 	}
 
-	const account = user.account;
-
 	// Compare password
-	const same = await bcrypt.compare(password, account.password);
+	const same = await bcrypt.compare(password, password);
 
 	if (same) {
-		if (account.twoFactorEnabled) {
+		if (user.twoFactorEnabled) {
 			const verified = (speakeasy as any).totp.verify({
-				secret: account.twoFactorSecret,
+				secret: user.twoFactorSecret,
 				encoding: 'base32',
 				token: token
 			});
diff --git a/src/server/api/private/signup.ts b/src/server/api/private/signup.ts
index 5818ba25cd..f441e1b754 100644
--- a/src/server/api/private/signup.ts
+++ b/src/server/api/private/signup.ts
@@ -119,44 +119,29 @@ export default async (req: express.Request, res: express.Response) => {
 		usernameLower: username.toLowerCase(),
 		host: null,
 		hostLower: null,
-		account: {
-			keypair: generateKeypair(),
-			token: secret,
-			email: null,
-			links: null,
-			password: hash,
-			profile: {
-				bio: null,
-				birthday: null,
-				blood: null,
-				gender: null,
-				handedness: null,
-				height: null,
-				location: null,
-				weight: null
-			},
-			settings: {
-				autoWatch: true
-			},
-			clientSettings: {
-				home: homeData
-			}
+		keypair: generateKeypair(),
+		token: secret,
+		email: null,
+		links: null,
+		password: hash,
+		profile: {
+			bio: null,
+			birthday: null,
+			blood: null,
+			gender: null,
+			handedness: null,
+			height: null,
+			location: null,
+			weight: null
+		},
+		settings: {
+			autoWatch: true
+		},
+		clientSettings: {
+			home: homeData
 		}
 	});
 
 	// Response
 	res.send(await pack(account));
-
-	// Create search index
-	if (config.elasticsearch.enable) {
-		const es = require('../../db/elasticsearch');
-		es.index({
-			index: 'misskey',
-			type: 'user',
-			id: account._id.toString(),
-			body: {
-				username: username
-			}
-		});
-	}
 };
diff --git a/src/server/api/service/twitter.ts b/src/server/api/service/twitter.ts
index 77b932b13b..da48e30a8a 100644
--- a/src/server/api/service/twitter.ts
+++ b/src/server/api/service/twitter.ts
@@ -40,10 +40,10 @@ module.exports = (app: express.Application) => {
 
 		const user = await User.findOneAndUpdate({
 			host: null,
-			'account.token': userToken
+			'token': userToken
 		}, {
 			$set: {
-				'account.twitter': null
+				'twitter': null
 			}
 		});
 
@@ -128,7 +128,7 @@ module.exports = (app: express.Application) => {
 
 				const user = await User.findOne({
 					host: null,
-					'account.twitter.userId': result.userId
+					'twitter.userId': result.userId
 				});
 
 				if (user == null) {
@@ -151,10 +151,10 @@ module.exports = (app: express.Application) => {
 
 				const user = await User.findOneAndUpdate({
 					host: null,
-					'account.token': userToken
+					'token': userToken
 				}, {
 					$set: {
-						'account.twitter': {
+						'twitter': {
 							accessToken: result.accessToken,
 							accessTokenSecret: result.accessTokenSecret,
 							userId: result.userId,
diff --git a/src/server/api/stream/home.ts b/src/server/api/stream/home.ts
index 313558851b..359ef74aff 100644
--- a/src/server/api/stream/home.ts
+++ b/src/server/api/stream/home.ts
@@ -74,7 +74,7 @@ export default async function(request: websocket.request, connection: websocket.
 				// Update lastUsedAt
 				User.update({ _id: user._id }, {
 					$set: {
-						'account.lastUsedAt': new Date()
+						'lastUsedAt': new Date()
 					}
 				});
 				break;
diff --git a/src/server/api/streaming.ts b/src/server/api/streaming.ts
index edcf505d24..26946b524e 100644
--- a/src/server/api/streaming.ts
+++ b/src/server/api/streaming.ts
@@ -97,7 +97,7 @@ function authenticate(token: string): Promise<IUser> {
 			const user: IUser = await User
 				.findOne({
 					host: null,
-					'account.token': token
+					'token': token
 				});
 
 			resolve(user);
diff --git a/src/services/following/create.ts b/src/services/following/create.ts
index d919f4487f..31e3be19ed 100644
--- a/src/services/following/create.ts
+++ b/src/services/following/create.ts
@@ -60,13 +60,13 @@ export default async function(follower: IUser, followee: IUser, activity?) {
 		const content = renderFollow(follower, followee);
 		content['@context'] = context;
 
-		deliver(follower, content, followee.account.inbox).save();
+		deliver(follower, content, followee.inbox).save();
 	}
 
 	if (isRemoteUser(follower) && isLocalUser(followee)) {
 		const content = renderAccept(activity);
 		content['@context'] = context;
 
-		deliver(followee, content, follower.account.inbox).save();
+		deliver(followee, content, follower.inbox).save();
 	}
 }
diff --git a/src/services/following/delete.ts b/src/services/following/delete.ts
index 364a4803b9..d79bf64f53 100644
--- a/src/services/following/delete.ts
+++ b/src/services/following/delete.ts
@@ -59,6 +59,6 @@ export default async function(follower: IUser, followee: IUser, activity?) {
 		const content = renderUndo(renderFollow(follower, followee));
 		content['@context'] = context;
 
-		deliver(follower, content, followee.account.inbox).save();
+		deliver(follower, content, followee.inbox).save();
 	}
 }
diff --git a/src/services/note/create.ts b/src/services/note/create.ts
index 8eee8f44af..551d618569 100644
--- a/src/services/note/create.ts
+++ b/src/services/note/create.ts
@@ -78,7 +78,7 @@ export default async (user: IUser, data: {
 			host: user.host,
 			hostLower: user.hostLower,
 			account: isLocalUser(user) ? {} : {
-				inbox: user.account.inbox
+				inbox: user.inbox
 			}
 		}
 	};
@@ -133,7 +133,7 @@ export default async (user: IUser, data: {
 
 			// 投稿がリプライかつ投稿者がローカルユーザーかつリプライ先の投稿の投稿者がリモートユーザーなら配送
 			if (data.reply && isLocalUser(user) && isRemoteUser(data.reply._user)) {
-				deliver(user, content, data.reply._user.account.inbox).save();
+				deliver(user, content, data.reply._user.inbox).save();
 			}
 
 			Promise.all(followers.map(follower => {
@@ -145,7 +145,7 @@ export default async (user: IUser, data: {
 				} else {
 					// フォロワーがリモートユーザーかつ投稿者がローカルユーザーなら投稿を配信
 					if (isLocalUser(user)) {
-						deliver(user, content, follower.account.inbox).save();
+						deliver(user, content, follower.inbox).save();
 					}
 				}
 			}));
@@ -242,7 +242,7 @@ export default async (user: IUser, data: {
 		});
 
 		// この投稿をWatchする
-		if (isLocalUser(user) && user.account.settings.autoWatch !== false) {
+		if (isLocalUser(user) && user.settings.autoWatch !== false) {
 			watch(user._id, data.reply);
 		}
 
@@ -277,7 +277,7 @@ export default async (user: IUser, data: {
 		});
 
 		// この投稿をWatchする
-		if (isLocalUser(user) && user.account.settings.autoWatch !== false) {
+		if (isLocalUser(user) && user.settings.autoWatch !== false) {
 			watch(user._id, data.renote);
 		}
 
diff --git a/src/services/note/reaction/create.ts b/src/services/note/reaction/create.ts
index d0ce65ee54..ea51b205d0 100644
--- a/src/services/note/reaction/create.ts
+++ b/src/services/note/reaction/create.ts
@@ -78,7 +78,7 @@ export default async (user: IUser, note: INote, reaction: string) => new Promise
 		});
 
 	// ユーザーがローカルユーザーかつ自動ウォッチ設定がオンならばこの投稿をWatchする
-	if (isLocalUser(user) && user.account.settings.autoWatch !== false) {
+	if (isLocalUser(user) && user.settings.autoWatch !== false) {
 		watch(user._id, note);
 	}
 
@@ -88,7 +88,7 @@ export default async (user: IUser, note: INote, reaction: string) => new Promise
 
 	// リアクターがローカルユーザーかつリアクション対象がリモートユーザーの投稿なら配送
 	if (isLocalUser(user) && isRemoteUser(note._user)) {
-		deliver(user, content, note._user.account.inbox).save();
+		deliver(user, content, note._user.inbox).save();
 	}
 	//#endregion
 });
diff --git a/test/api.ts b/test/api.ts
index 953c5aea0d..87bbb8ee16 100644
--- a/test/api.ts
+++ b/test/api.ts
@@ -32,7 +32,7 @@ const async = fn => (done) => {
 
 const request = (endpoint, params, me?) => new Promise<any>((ok, ng) => {
 	const auth = me ? {
-		i: me.account.token
+		i: me.token
 	} : {};
 
 	_chai.request(server)
@@ -157,10 +157,10 @@ describe('API', () => {
 			res.should.have.status(200);
 			res.body.should.be.a('object');
 			res.body.should.have.property('name').eql(myName);
-			res.body.should.have.nested.property('account.profile').a('object');
-			res.body.should.have.nested.property('account.profile.location').eql(myLocation);
-			res.body.should.have.nested.property('account.profile.birthday').eql(myBirthday);
-			res.body.should.have.nested.property('account.profile.gender').eql('female');
+			res.body.should.have.nested.property('profile').a('object');
+			res.body.should.have.nested.property('profile.location').eql(myLocation);
+			res.body.should.have.nested.property('profile.birthday').eql(myBirthday);
+			res.body.should.have.nested.property('profile.gender').eql('female');
 		}));
 
 		it('名前を空白にできない', async(async () => {
@@ -180,8 +180,8 @@ describe('API', () => {
 			}, me);
 			res.should.have.status(200);
 			res.body.should.be.a('object');
-			res.body.should.have.nested.property('account.profile').a('object');
-			res.body.should.have.nested.property('account.profile.birthday').eql(null);
+			res.body.should.have.nested.property('profile').a('object');
+			res.body.should.have.nested.property('profile.birthday').eql(null);
 		}));
 
 		it('不正な誕生日の形式で怒られる', async(async () => {
@@ -736,7 +736,7 @@ describe('API', () => {
 			const me = await insertSakurako();
 			const res = await _chai.request(server)
 				.post('/drive/files/create')
-				.field('i', me.account.token)
+				.field('i', me.token)
 				.attach('file', fs.readFileSync(__dirname + '/resources/Lenna.png'), 'Lenna.png');
 			res.should.have.status(200);
 			res.body.should.be.a('object');
diff --git a/tools/migration/nighthike/12.js b/tools/migration/nighthike/12.js
new file mode 100644
index 0000000000..f4b61e2ee8
--- /dev/null
+++ b/tools/migration/nighthike/12.js
@@ -0,0 +1,58 @@
+// for Node.js interpret
+
+const { default: User } = require('../../../built/models/user');
+const { generate } = require('../../../built/crypto_key');
+const { default: zip } = require('@prezzemolo/zip')
+
+const migrate = async (user) => {
+	const result = await User.update(user._id, {
+		$unset: {
+			account: ''
+		},
+		$set: {
+			host: null,
+			hostLower: null,
+			email: user.account.email,
+			links: user.account.links,
+			password: user.account.password,
+			token: user.account.token,
+			twitter: user.account.twitter,
+			line: user.account.line,
+			profile: user.account.profile,
+			lastUsedAt: user.account.lastUsedAt,
+			isBot: user.account.isBot,
+			isPro: user.account.isPro,
+			twoFactorSecret: user.account.twoFactorSecret,
+			twoFactorEnabled: user.account.twoFactorEnabled,
+			clientSettings: user.account.clientSettings,
+			settings: user.account.settings,
+			keypair: user.account.keypair
+		}
+	});
+	return result.ok === 1;
+}
+
+async function main() {
+	const count = await User.count({});
+
+	const dop = Number.parseInt(process.argv[2]) || 5
+	const idop = ((count - (count % dop)) / dop) + 1
+
+	return zip(
+		1,
+		async (time) => {
+			console.log(`${time} / ${idop}`)
+			const doc = await User.find({}, {
+				limit: dop, skip: time * dop
+			})
+			return Promise.all(doc.map(migrate))
+		},
+		idop
+	).then(a => {
+		const rv = []
+		a.forEach(e => rv.push(...e))
+		return rv
+	})
+}
+
+main().then(console.dir).catch(console.error)
-- 
cgit v1.3.1-freya


From 4753dfa4d9c872f4cde02b0d16736890475ba7ff Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 8 Apr 2018 17:15:07 +0900
Subject: oops

---
 src/client/app/desktop/views/components/timeline.vue |  2 +-
 tools/migration/nighthike/4.js                       | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index ea8f0053bc..e1f88b62f3 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -96,7 +96,7 @@ export default Vue.extend({
 		onNote(note) {
 			// サウンドを再生する
 			if ((this as any).os.isEnableSounds) {
-				const sound = new Audio(`${url}/assets/note.mp3`);
+				const sound = new Audio(`${url}/assets/post.mp3`);
 				sound.volume = localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) / 100 : 1;
 				sound.play();
 			}
diff --git a/tools/migration/nighthike/4.js b/tools/migration/nighthike/4.js
index d77c91ca80..5e12e64055 100644
--- a/tools/migration/nighthike/4.js
+++ b/tools/migration/nighthike/4.js
@@ -50,8 +50,20 @@ db.drive_files.files.renameCollection('driveFiles.files');
 db.drive_files.chunks.renameCollection('driveFiles.chunks');
 db.driveFiles.files.update({}, {
 	$rename: {
-		'metadata.user_id': 'metadata.userId',
+		'metadata.user_id': 'metadata.userId'
+	}
+}, false, true);
+db.driveFiles.files.update({
+	'metadata.folder_id': { $ne: null }
+}, {
+	$rename: {
 		'metadata.folder_id': 'metadata.folderId',
+	}
+}, false, true);
+db.driveFiles.files.update({
+	'metadata.properties.average_color': { $ne: null }
+}, {
+	$rename: {
 		'metadata.properties.average_color': 'metadata.properties.avgColor'
 	}
 }, false, true);
-- 
cgit v1.3.1-freya


From 6089169a3ce59ec35488c3517280b90b751c8a56 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 8 Apr 2018 17:20:46 +0900
Subject: oops

---
 .../app/desktop/views/components/post-detail.vue   | 448 ----------------
 .../app/desktop/views/components/posts.post.vue    | 596 ---------------------
 2 files changed, 1044 deletions(-)
 delete mode 100644 src/client/app/desktop/views/components/post-detail.vue
 delete mode 100644 src/client/app/desktop/views/components/posts.post.vue

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/desktop/views/components/post-detail.vue b/src/client/app/desktop/views/components/post-detail.vue
deleted file mode 100644
index df7c33dfa8..0000000000
--- a/src/client/app/desktop/views/components/post-detail.vue
+++ /dev/null
@@ -1,448 +0,0 @@
-<template>
-<div class="mk-note-detail" :title="title">
-	<button
-		class="read-more"
-		v-if="p.reply && p.reply.replyId && context == null"
-		title="会話をもっと読み込む"
-		@click="fetchContext"
-		:disabled="contextFetching"
-	>
-		<template v-if="!contextFetching">%fa:ellipsis-v%</template>
-		<template v-if="contextFetching">%fa:spinner .pulse%</template>
-	</button>
-	<div class="context">
-		<x-sub v-for="note in context" :key="note.id" :note="note"/>
-	</div>
-	<div class="reply-to" v-if="p.reply">
-		<x-sub :note="p.reply"/>
-	</div>
-	<div class="renote" v-if="isRenote">
-		<p>
-			<router-link class="avatar-anchor" :to="`/@${acct}`" v-user-preview="note.userId">
-				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
-			</router-link>
-			%fa:retweet%
-			<router-link class="name" :href="`/@${acct}`">{{ getUserName(note.user) }}</router-link>
-			がRenote
-		</p>
-	</div>
-	<article>
-		<router-link class="avatar-anchor" :to="`/@${pAcct}`">
-			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
-		</router-link>
-		<header>
-			<router-link class="name" :to="`/@${pAcct}`" v-user-preview="p.user.id">{{ getUserName(p.user) }}</router-link>
-			<span class="username">@{{ pAcct }}</span>
-			<router-link class="time" :to="`/@${pAcct}/${p.id}`">
-				<mk-time :time="p.createdAt"/>
-			</router-link>
-		</header>
-		<div class="body">
-			<mk-note-html :class="$style.text" v-if="p.text" :text="p.text" :i="os.i"/>
-			<div class="media" v-if="p.media.length > 0">
-				<mk-media-list :media-list="p.media"/>
-			</div>
-			<mk-poll v-if="p.poll" :note="p"/>
-			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
-			<div class="tags" v-if="p.tags && p.tags.length > 0">
-				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
-			</div>
-			<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
-			<div class="map" v-if="p.geo" ref="map"></div>
-			<div class="renote" v-if="p.renote">
-				<mk-note-preview :note="p.renote"/>
-			</div>
-		</div>
-		<footer>
-			<mk-reactions-viewer :note="p"/>
-			<button @click="reply" title="返信">
-				%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
-			</button>
-			<button @click="renote" title="Renote">
-				%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
-			</button>
-			<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="リアクション">
-				%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
-			</button>
-			<button @click="menu" ref="menuButton">
-				%fa:ellipsis-h%
-			</button>
-		</footer>
-	</article>
-	<div class="replies" v-if="!compact">
-		<x-sub v-for="note in replies" :key="note.id" :note="note"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
-import parse from '../../../../../text/parse';
-
-import MkPostFormWindow from './post-form-window.vue';
-import MkRenoteFormWindow from './renote-form-window.vue';
-import MkNoteMenu from '../../../common/views/components/note-menu.vue';
-import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
-import XSub from './note-detail.sub.vue';
-
-export default Vue.extend({
-	components: {
-		XSub
-	},
-
-	props: {
-		note: {
-			type: Object,
-			required: true
-		},
-		compact: {
-			default: false
-		}
-	},
-
-	data() {
-		return {
-			context: [],
-			contextFetching: false,
-			replies: []
-		};
-	},
-
-	computed: {
-		isRenote(): boolean {
-			return (this.note.renote &&
-				this.note.text == null &&
-				this.note.mediaIds.length == 0 &&
-				this.note.poll == null);
-		},
-		p(): any {
-			return this.isRenote ? this.note.renote : this.note;
-		},
-		reactionsCount(): number {
-			return this.p.reactionCounts
-				? Object.keys(this.p.reactionCounts)
-					.map(key => this.p.reactionCounts[key])
-					.reduce((a, b) => a + b)
-				: 0;
-		},
-		title(): string {
-			return dateStringify(this.p.createdAt);
-		},
-		acct(): string {
-			return getAcct(this.note.user);
-		},
-		name(): string {
-			return getUserName(this.note.user);
-		},
-		pAcct(): string {
-			return getAcct(this.p.user);
-		},
-		pName(): string {
-			return getUserName(this.p.user);
-		},
-		urls(): string[] {
-			if (this.p.text) {
-				const ast = parse(this.p.text);
-				return ast
-					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-					.map(t => t.url);
-			} else {
-				return null;
-			}
-		}
-	},
-
-	mounted() {
-		// Get replies
-		if (!this.compact) {
-			(this as any).api('notes/replies', {
-				noteId: this.p.id,
-				limit: 8
-			}).then(replies => {
-				this.replies = replies;
-			});
-		}
-
-		// Draw map
-		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
-			if (shouldShowMap) {
-				(this as any).os.getGoogleMaps().then(maps => {
-					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
-					const map = new maps.Map(this.$refs.map, {
-						center: uluru,
-						zoom: 15
-					});
-					new maps.Marker({
-						position: uluru,
-						map: map
-					});
-				});
-			}
-		}
-	},
-
-	methods: {
-		fetchContext() {
-			this.contextFetching = true;
-
-			// Fetch context
-			(this as any).api('notes/context', {
-				noteId: this.p.replyId
-			}).then(context => {
-				this.contextFetching = false;
-				this.context = context.reverse();
-			});
-		},
-		reply() {
-			(this as any).os.new(MkPostFormWindow, {
-				reply: this.p
-			});
-		},
-		renote() {
-			(this as any).os.new(MkRenoteFormWindow, {
-				note: this.p
-			});
-		},
-		react() {
-			(this as any).os.new(MkReactionPicker, {
-				source: this.$refs.reactButton,
-				note: this.p
-			});
-		},
-		menu() {
-			(this as any).os.new(MkNoteMenu, {
-				source: this.$refs.menuButton,
-				note: this.p
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-.mk-note-detail
-	margin 0
-	padding 0
-	overflow hidden
-	text-align left
-	background #fff
-	border solid 1px rgba(0, 0, 0, 0.1)
-	border-radius 8px
-
-	> .read-more
-		display block
-		margin 0
-		padding 10px 0
-		width 100%
-		font-size 1em
-		text-align center
-		color #999
-		cursor pointer
-		background #fafafa
-		outline none
-		border none
-		border-bottom solid 1px #eef0f2
-		border-radius 6px 6px 0 0
-
-		&:hover
-			background #f6f6f6
-
-		&:active
-			background #f0f0f0
-
-		&:disabled
-			color #ccc
-
-	> .context
-		> *
-			border-bottom 1px solid #eef0f2
-
-	> .renote
-		color #9dbb00
-		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
-
-		> p
-			margin 0
-			padding 16px 32px
-
-			.avatar-anchor
-				display inline-block
-
-				.avatar
-					vertical-align bottom
-					min-width 28px
-					min-height 28px
-					max-width 28px
-					max-height 28px
-					margin 0 8px 0 0
-					border-radius 6px
-
-			[data-fa]
-				margin-right 4px
-
-			.name
-				font-weight bold
-
-		& + article
-			padding-top 8px
-
-	> .reply-to
-		border-bottom 1px solid #eef0f2
-
-	> article
-		padding 28px 32px 18px 32px
-
-		&:after
-			content ""
-			display block
-			clear both
-
-		&:hover
-			> .main > footer > button
-				color #888
-
-		> .avatar-anchor
-			display block
-			width 60px
-			height 60px
-
-			> .avatar
-				display block
-				width 60px
-				height 60px
-				margin 0
-				border-radius 8px
-				vertical-align bottom
-
-		> header
-			position absolute
-			top 28px
-			left 108px
-			width calc(100% - 108px)
-
-			> .name
-				display inline-block
-				margin 0
-				line-height 24px
-				color #777
-				font-size 18px
-				font-weight 700
-				text-align left
-				text-decoration none
-
-				&:hover
-					text-decoration underline
-
-			> .username
-				display block
-				text-align left
-				margin 0
-				color #ccc
-
-			> .time
-				position absolute
-				top 0
-				right 32px
-				font-size 1em
-				color #c0c0c0
-
-		> .body
-			padding 8px 0
-
-			> .renote
-				margin 8px 0
-
-				> .mk-note-preview
-					padding 16px
-					border dashed 1px #c0dac6
-					border-radius 8px
-
-			> .location
-				margin 4px 0
-				font-size 12px
-				color #ccc
-
-			> .map
-				width 100%
-				height 300px
-
-				&:empty
-					display none
-
-			> .mk-url-preview
-				margin-top 8px
-
-			> .tags
-				margin 4px 0 0 0
-
-				> *
-					display inline-block
-					margin 0 8px 0 0
-					padding 2px 8px 2px 16px
-					font-size 90%
-					color #8d969e
-					background #edf0f3
-					border-radius 4px
-
-					&:before
-						content ""
-						display block
-						position absolute
-						top 0
-						bottom 0
-						left 4px
-						width 8px
-						height 8px
-						margin auto 0
-						background #fff
-						border-radius 100%
-
-					&:hover
-						text-decoration none
-						background #e2e7ec
-
-		> footer
-			font-size 1.2em
-
-			> button
-				margin 0 28px 0 0
-				padding 8px
-				background transparent
-				border none
-				font-size 1em
-				color #ddd
-				cursor pointer
-
-				&:hover
-					color #666
-
-				> .count
-					display inline
-					margin 0 0 0 8px
-					color #999
-
-				&.reacted
-					color $theme-color
-
-	> .replies
-		> *
-			border-top 1px solid #eef0f2
-
-</style>
-
-<style lang="stylus" module>
-.text
-	cursor default
-	display block
-	margin 0
-	padding 0
-	overflow-wrap break-word
-	font-size 1.5em
-	color #717171
-</style>
diff --git a/src/client/app/desktop/views/components/posts.post.vue b/src/client/app/desktop/views/components/posts.post.vue
deleted file mode 100644
index d7c21dfa07..0000000000
--- a/src/client/app/desktop/views/components/posts.post.vue
+++ /dev/null
@@ -1,596 +0,0 @@
-<template>
-<div class="note" tabindex="-1" :title="title" @keydown="onKeydown">
-	<div class="reply-to" v-if="p.reply">
-		<x-sub :note="p.reply"/>
-	</div>
-	<div class="renote" v-if="isRenote">
-		<p>
-			<router-link class="avatar-anchor" :to="`/@${acct}`" v-user-preview="note.userId">
-				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
-			</router-link>
-			%fa:retweet%
-			<span>{{ '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.indexOf('{')) }}</span>
-			<a class="name" :href="`/@${acct}`" v-user-preview="note.userId">{{ getUserName(note.user) }}</a>
-			<span>{{ '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-note.reposted-by%'.indexOf('}') + 1) }}</span>
-		</p>
-		<mk-time :time="note.createdAt"/>
-	</div>
-	<article>
-		<router-link class="avatar-anchor" :to="`/@${acct}`">
-			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
-		</router-link>
-		<div class="main">
-			<header>
-				<router-link class="name" :to="`/@${acct}`" v-user-preview="p.user.id">{{ acct }}</router-link>
-				<span class="is-bot" v-if="p.user.host === null && p.user.isBot">bot</span>
-				<span class="username">@{{ acct }}</span>
-				<div class="info">
-					<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
-					<span class="mobile" v-if="p.viaMobile">%fa:mobile-alt%</span>
-					<router-link class="created-at" :to="url">
-						<mk-time :time="p.createdAt"/>
-					</router-link>
-				</div>
-			</header>
-			<div class="body">
-				<p class="channel" v-if="p.channel">
-					<a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>:
-				</p>
-				<div class="text">
-					<a class="reply" v-if="p.reply">%fa:reply%</a>
-					<mk-note-html v-if="p.textHtml" :text="p.text" :i="os.i" :class="$style.text"/>
-					<a class="rp" v-if="p.renote">RP:</a>
-				</div>
-				<div class="media" v-if="p.media.length > 0">
-					<mk-media-list :media-list="p.media"/>
-				</div>
-				<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
-				<div class="tags" v-if="p.tags && p.tags.length > 0">
-					<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
-				</div>
-				<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
-				<div class="map" v-if="p.geo" ref="map"></div>
-				<div class="renote" v-if="p.renote">
-					<mk-note-preview :note="p.renote"/>
-				</div>
-				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
-			</div>
-			<footer>
-				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
-				<button @click="reply" title="%i18n:desktop.tags.mk-timeline-note.reply%">
-					%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
-				</button>
-				<button @click="renote" title="%i18n:desktop.tags.mk-timeline-note.renote%">
-					%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
-				</button>
-				<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:desktop.tags.mk-timeline-note.add-reaction%">
-					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
-				</button>
-				<button @click="menu" ref="menuButton">
-					%fa:ellipsis-h%
-				</button>
-				<button title="%i18n:desktop.tags.mk-timeline-note.detail">
-					<template v-if="!isDetailOpened">%fa:caret-down%</template>
-					<template v-if="isDetailOpened">%fa:caret-up%</template>
-				</button>
-			</footer>
-		</div>
-	</article>
-	<div class="detail" v-if="isDetailOpened">
-		<mk-note-status-graph width="462" height="130" :note="p"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
-import parse from '../../../../../text/parse';
-
-import MkPostFormWindow from './post-form-window.vue';
-import MkRenoteFormWindow from './renote-form-window.vue';
-import MkNoteMenu from '../../../common/views/components/note-menu.vue';
-import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
-import XSub from './notes.note.sub.vue';
-
-function focus(el, fn) {
-	const target = fn(el);
-	if (target) {
-		if (target.hasAttribute('tabindex')) {
-			target.focus();
-		} else {
-			focus(target, fn);
-		}
-	}
-}
-
-export default Vue.extend({
-	components: {
-		XSub
-	},
-
-	props: ['note'],
-
-	data() {
-		return {
-			isDetailOpened: false,
-			connection: null,
-			connectionId: null
-		};
-	},
-
-	computed: {
-		acct(): string {
-			return getAcct(this.p.user);
-		},
-		name(): string {
-			return getUserName(this.p.user);
-		},
-		isRenote(): boolean {
-			return (this.note.renote &&
-				this.note.text == null &&
-				this.note.mediaIds.length == 0 &&
-				this.note.poll == null);
-		},
-		p(): any {
-			return this.isRenote ? this.note.renote : this.note;
-		},
-		reactionsCount(): number {
-			return this.p.reactionCounts
-				? Object.keys(this.p.reactionCounts)
-					.map(key => this.p.reactionCounts[key])
-					.reduce((a, b) => a + b)
-				: 0;
-		},
-		title(): string {
-			return dateStringify(this.p.createdAt);
-		},
-		url(): string {
-			return `/@${this.acct}/${this.p.id}`;
-		},
-		urls(): string[] {
-			if (this.p.text) {
-				const ast = parse(this.p.text);
-				return ast
-					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-					.map(t => t.url);
-			} else {
-				return null;
-			}
-		}
-	},
-
-	created() {
-		if ((this as any).os.isSignedIn) {
-			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = (this as any).os.stream.use();
-		}
-	},
-
-	mounted() {
-		this.capture(true);
-
-		if ((this as any).os.isSignedIn) {
-			this.connection.on('_connected_', this.onStreamConnected);
-		}
-
-		// Draw map
-		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
-			if (shouldShowMap) {
-				(this as any).os.getGoogleMaps().then(maps => {
-					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
-					const map = new maps.Map(this.$refs.map, {
-						center: uluru,
-						zoom: 15
-					});
-					new maps.Marker({
-						position: uluru,
-						map: map
-					});
-				});
-			}
-		}
-	},
-
-	beforeDestroy() {
-		this.decapture(true);
-
-		if ((this as any).os.isSignedIn) {
-			this.connection.off('_connected_', this.onStreamConnected);
-			(this as any).os.stream.dispose(this.connectionId);
-		}
-	},
-
-	methods: {
-		capture(withHandler = false) {
-			if ((this as any).os.isSignedIn) {
-				this.connection.send({
-					type: 'capture',
-					id: this.p.id
-				});
-				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
-			}
-		},
-		decapture(withHandler = false) {
-			if ((this as any).os.isSignedIn) {
-				this.connection.send({
-					type: 'decapture',
-					id: this.p.id
-				});
-				if (withHandler) this.connection.off('note-updated', this.onStreamNoteUpdated);
-			}
-		},
-		onStreamConnected() {
-			this.capture();
-		},
-		onStreamNoteUpdated(data) {
-			const note = data.note;
-			if (note.id == this.note.id) {
-				this.$emit('update:note', note);
-			} else if (note.id == this.note.renoteId) {
-				this.note.renote = note;
-			}
-		},
-		reply() {
-			(this as any).os.new(MkPostFormWindow, {
-				reply: this.p
-			});
-		},
-		renote() {
-			(this as any).os.new(MkRenoteFormWindow, {
-				note: this.p
-			});
-		},
-		react() {
-			(this as any).os.new(MkReactionPicker, {
-				source: this.$refs.reactButton,
-				note: this.p
-			});
-		},
-		menu() {
-			(this as any).os.new(MkNoteMenu, {
-				source: this.$refs.menuButton,
-				note: this.p
-			});
-		},
-		onKeydown(e) {
-			let shouldBeCancel = true;
-
-			switch (true) {
-				case e.which == 38: // [↑]
-				case e.which == 74: // [j]
-				case e.which == 9 && e.shiftKey: // [Shift] + [Tab]
-					focus(this.$el, e => e.previousElementSibling);
-					break;
-
-				case e.which == 40: // [↓]
-				case e.which == 75: // [k]
-				case e.which == 9: // [Tab]
-					focus(this.$el, e => e.nextElementSibling);
-					break;
-
-				case e.which == 81: // [q]
-				case e.which == 69: // [e]
-					this.renote();
-					break;
-
-				case e.which == 70: // [f]
-				case e.which == 76: // [l]
-					//this.like();
-					break;
-
-				case e.which == 82: // [r]
-					this.reply();
-					break;
-
-				default:
-					shouldBeCancel = false;
-			}
-
-			if (shouldBeCancel) e.preventDefault();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-.note
-	margin 0
-	padding 0
-	background #fff
-	border-bottom solid 1px #eaeaea
-
-	&:first-child
-		border-top-left-radius 6px
-		border-top-right-radius 6px
-
-		> .renote
-			border-top-left-radius 6px
-			border-top-right-radius 6px
-
-	&:last-of-type
-		border-bottom none
-
-	&:focus
-		z-index 1
-
-		&:after
-			content ""
-			pointer-events none
-			position absolute
-			top 2px
-			right 2px
-			bottom 2px
-			left 2px
-			border 2px solid rgba($theme-color, 0.3)
-			border-radius 4px
-
-	> .renote
-		color #9dbb00
-		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
-
-		> p
-			margin 0
-			padding 16px 32px
-			line-height 28px
-
-			.avatar-anchor
-				display inline-block
-
-				.avatar
-					vertical-align bottom
-					width 28px
-					height 28px
-					margin 0 8px 0 0
-					border-radius 6px
-
-			[data-fa]
-				margin-right 4px
-
-			.name
-				font-weight bold
-
-		> .mk-time
-			position absolute
-			top 16px
-			right 32px
-			font-size 0.9em
-			line-height 28px
-
-		& + article
-			padding-top 8px
-
-	> .reply-to
-		padding 0 16px
-		background rgba(0, 0, 0, 0.0125)
-
-		> .mk-note-preview
-			background transparent
-
-	> article
-		padding 28px 32px 18px 32px
-
-		&:after
-			content ""
-			display block
-			clear both
-
-		&:hover
-			> .main > footer > button
-				color #888
-
-		> .avatar-anchor
-			display block
-			float left
-			margin 0 16px 10px 0
-			//position -webkit-sticky
-			//position sticky
-			//top 74px
-
-			> .avatar
-				display block
-				width 58px
-				height 58px
-				margin 0
-				border-radius 8px
-				vertical-align bottom
-
-		> .main
-			float left
-			width calc(100% - 74px)
-
-			> header
-				display flex
-				align-items center
-				margin-bottom 4px
-				white-space nowrap
-
-				> .name
-					display block
-					margin 0 .5em 0 0
-					padding 0
-					overflow hidden
-					color #627079
-					font-size 1em
-					font-weight bold
-					text-decoration none
-					text-overflow ellipsis
-
-					&:hover
-						text-decoration underline
-
-				> .is-bot
-					margin 0 .5em 0 0
-					padding 1px 6px
-					font-size 12px
-					color #aaa
-					border solid 1px #ddd
-					border-radius 3px
-
-				> .username
-					margin 0 .5em 0 0
-					color #ccc
-
-				> .info
-					margin-left auto
-					font-size 0.9em
-
-					> .mobile
-						margin-right 8px
-						color #ccc
-
-					> .app
-						margin-right 8px
-						padding-right 8px
-						color #ccc
-						border-right solid 1px #eaeaea
-
-					> .created-at
-						color #c0c0c0
-
-			> .body
-
-				> .text
-					cursor default
-					display block
-					margin 0
-					padding 0
-					overflow-wrap break-word
-					font-size 1.1em
-					color #717171
-
-					>>> .quote
-						margin 8px
-						padding 6px 12px
-						color #aaa
-						border-left solid 3px #eee
-
-					> .reply
-						margin-right 8px
-						color #717171
-
-					> .rp
-						margin-left 4px
-						font-style oblique
-						color #a0bf46
-
-				> .location
-					margin 4px 0
-					font-size 12px
-					color #ccc
-
-				> .map
-					width 100%
-					height 300px
-
-					&:empty
-						display none
-
-				> .tags
-					margin 4px 0 0 0
-
-					> *
-						display inline-block
-						margin 0 8px 0 0
-						padding 2px 8px 2px 16px
-						font-size 90%
-						color #8d969e
-						background #edf0f3
-						border-radius 4px
-
-						&:before
-							content ""
-							display block
-							position absolute
-							top 0
-							bottom 0
-							left 4px
-							width 8px
-							height 8px
-							margin auto 0
-							background #fff
-							border-radius 100%
-
-						&:hover
-							text-decoration none
-							background #e2e7ec
-
-				.mk-url-preview
-					margin-top 8px
-
-				> .channel
-					margin 0
-
-				> .mk-poll
-					font-size 80%
-
-				> .renote
-					margin 8px 0
-
-					> .mk-note-preview
-						padding 16px
-						border dashed 1px #c0dac6
-						border-radius 8px
-
-			> footer
-				> button
-					margin 0 28px 0 0
-					padding 0 8px
-					line-height 32px
-					font-size 1em
-					color #ddd
-					background transparent
-					border none
-					cursor pointer
-
-					&:hover
-						color #666
-
-					> .count
-						display inline
-						margin 0 0 0 8px
-						color #999
-
-					&.reacted
-						color $theme-color
-
-					&:last-child
-						position absolute
-						right 0
-						margin 0
-
-	> .detail
-		padding-top 4px
-		background rgba(0, 0, 0, 0.0125)
-
-</style>
-
-<style lang="stylus" module>
-.text
-
-	code
-		padding 4px 8px
-		margin 0 0.5em
-		font-size 80%
-		color #525252
-		background #f8f8f8
-		border-radius 2px
-
-	pre > code
-		padding 16px
-		margin 0
-
-	[data-is-me]:after
-		content "you"
-		padding 0 4px
-		margin-left 4px
-		font-size 80%
-		color $theme-color-foreground
-		background $theme-color
-		border-radius 4px
-</style>
-- 
cgit v1.3.1-freya


From 6eefdfcb17e403b10f9be26f9d882d74726e4123 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 8 Apr 2018 17:37:16 +0900
Subject: Fix bug

---
 src/client/app/desktop/views/components/notes.note.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 4547ac58bb..0712069e50 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -21,7 +21,7 @@
 		</router-link>
 		<div class="main">
 			<header>
-				<router-link class="name" :to="`/@${getAcct(p.user)}`" v-user-preview="p.user.id">{{ getUserName(p) }}</router-link>
+				<router-link class="name" :to="`/@${getAcct(p.user)}`" v-user-preview="p.user.id">{{ getUserName(p.user) }}</router-link>
 				<span class="is-bot" v-if="p.user.host === null && p.user.isBot">bot</span>
 				<span class="username">@{{ getAcct(p.user) }}</span>
 				<div class="info">
-- 
cgit v1.3.1-freya


From ba280ac380923af7b455bacdf7c717694a4065e5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 8 Apr 2018 19:30:19 +0900
Subject: Fix bug

---
 .../app/desktop/views/components/user-preview.vue      | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index 3cbaa2816e..1cc53743aa 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -2,12 +2,12 @@
 <div class="mk-user-preview">
 	<template v-if="u != null">
 		<div class="banner" :style="u.bannerUrl ? `background-image: url(${u.bannerUrl}?thumbnail&size=512)` : ''"></div>
-		<router-link class="avatar" :to="`/@${acct}`">
+		<router-link class="avatar" :to="`/@${getAcct(u)}`">
 			<img :src="`${u.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
 		<div class="title">
-			<router-link class="name" :to="`/@${acct}`">{{ u.name }}</router-link>
-			<p class="username">@{{ acct }}</p>
+			<router-link class="name" :to="`/@${getAcct(u)}`">{{ u.name }}</router-link>
+			<p class="username">@{{ getAcct(u) }}</p>
 		</div>
 		<div class="description">{{ u.description }}</div>
 		<div class="status">
@@ -39,14 +39,10 @@ export default Vue.extend({
 			required: true
 		}
 	},
-	computed: {
-		acct() {
-			return getAcct(this.u);
-		}
-	},
 	data() {
 		return {
-			u: null
+			u: null,
+			getAcct
 		};
 	},
 	mounted() {
@@ -57,8 +53,8 @@ export default Vue.extend({
 			});
 		} else {
 			const query = this.user[0] == '@' ?
-				parseAcct(this.user[0].substr(1)) :
-				{ userId: this.user[0] };
+				parseAcct(this.user.substr(1)) :
+				{ userId: this.user };
 
 			(this as any).api('users/show', query).then(user => {
 				this.u = user;
-- 
cgit v1.3.1-freya


From c087edd33a76599efd5bb528a0c0775b1b755392 Mon Sep 17 00:00:00 2001
From: unarist <m.unarist@gmail.com>
Date: Sun, 8 Apr 2018 20:48:01 +0900
Subject: Fix model method definitions on profile page components

---
 src/client/app/desktop/views/pages/user/user.followers-you-know.vue | 2 +-
 src/client/app/desktop/views/pages/user/user.friends.vue            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
index 16625b6899..351b1264fa 100644
--- a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
+++ b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
@@ -24,7 +24,7 @@ export default Vue.extend({
 			fetching: true
 		};
 	},
-	method() {
+	methods: {
 		getAcct,
 		getUserName
 	},
diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue
index a726e2565c..c9213cb508 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -30,7 +30,7 @@ export default Vue.extend({
 			fetching: true
 		};
 	},
-	method() {
+	methods: {
 		getAcct
 	},
 	mounted() {
-- 
cgit v1.3.1-freya


From 0d036100eedd49a803b928c5d13c86b0a5f22884 Mon Sep 17 00:00:00 2001
From: unarist <m.unarist@gmail.com>
Date: Sun, 8 Apr 2018 20:53:48 +0900
Subject: Fix errors related to getUserName on NoteDetail component

---
 src/client/app/desktop/views/components/note-detail.sub.vue | 2 +-
 src/client/app/desktop/views/components/note-detail.vue     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/desktop/views/components/note-detail.sub.vue b/src/client/app/desktop/views/components/note-detail.sub.vue
index 0159d1ad47..79f5de1f83 100644
--- a/src/client/app/desktop/views/components/note-detail.sub.vue
+++ b/src/client/app/desktop/views/components/note-detail.sub.vue
@@ -6,7 +6,7 @@
 	<div class="main">
 		<header>
 			<div class="left">
-				<router-link class="name" :to="`/@${acct}`" v-user-preview="note.userId">{{ getUserName(note.user) }}</router-link>
+				<router-link class="name" :to="`/@${acct}`" v-user-preview="note.userId">{{ name }}</router-link>
 				<span class="username">@{{ acct }}</span>
 			</div>
 			<div class="right">
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index df7c33dfa8..eead82dd04 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -22,7 +22,7 @@
 				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
 			</router-link>
 			%fa:retweet%
-			<router-link class="name" :href="`/@${acct}`">{{ getUserName(note.user) }}</router-link>
+			<router-link class="name" :href="`/@${acct}`">{{ name }}</router-link>
 			がRenote
 		</p>
 	</div>
@@ -31,7 +31,7 @@
 			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
 		</router-link>
 		<header>
-			<router-link class="name" :to="`/@${pAcct}`" v-user-preview="p.user.id">{{ getUserName(p.user) }}</router-link>
+			<router-link class="name" :to="`/@${pAcct}`" v-user-preview="p.user.id">{{ name }}</router-link>
 			<span class="username">@{{ pAcct }}</span>
 			<router-link class="time" :to="`/@${pAcct}/${p.id}`">
 				<mk-time :time="p.createdAt"/>
-- 
cgit v1.3.1-freya


From 8a37227907b415cfed8da75584a7126c853d2fd9 Mon Sep 17 00:00:00 2001
From: unarist <m.unarist@gmail.com>
Date: Mon, 9 Apr 2018 00:33:56 +0900
Subject: Fix banner selection from user page and drives

Previously, updateBanner takes a callback as a first argument of the function, but some calls passes a file object.

I've refactored it with Promise to avoid those misuses (although it should have type definitions :/)
---
 src/client/app/desktop/api/update-banner.ts        | 50 ++++++++++++----------
 .../app/desktop/views/pages/user/user.header.vue   |  2 +-
 2 files changed, 29 insertions(+), 23 deletions(-)

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/desktop/api/update-banner.ts b/src/client/app/desktop/api/update-banner.ts
index 5f10bf2856..bc3f783e35 100644
--- a/src/client/app/desktop/api/update-banner.ts
+++ b/src/client/app/desktop/api/update-banner.ts
@@ -3,9 +3,9 @@ import { apiUrl } from '../../config';
 import CropWindow from '../views/components/crop-window.vue';
 import ProgressDialog from '../views/components/progress-dialog.vue';
 
-export default (os: OS) => (cb, file = null) => {
-	const fileSelected = file => {
+export default (os: OS) => {
 
+	const cropImage = file => new Promise((resolve, reject) => {
 		const w = new CropWindow({
 			propsData: {
 				image: file,
@@ -26,22 +26,24 @@ export default (os: OS) => (cb, file = null) => {
 					os.api('drive/folders/create', {
 						name: 'バナー'
 					}).then(iconFolder => {
-						upload(data, iconFolder);
+						resolve(upload(data, iconFolder));
 					});
 				} else {
-					upload(data, bannerFolder[0]);
+					resolve(upload(data, bannerFolder[0]));
 				}
 			});
 		});
 
 		w.$once('skipped', () => {
-			set(file);
+			resolve(file);
 		});
 
+		w.$once('cancelled', reject);
+
 		document.body.appendChild(w.$el);
-	};
+	});
 
-	const upload = (data, folder) => {
+	const upload = (data, folder) => new Promise((resolve, reject) => {
 		const dialog = new ProgressDialog({
 			propsData: {
 				title: '新しいバナーをアップロードしています'
@@ -56,18 +58,19 @@ export default (os: OS) => (cb, file = null) => {
 		xhr.onload = e => {
 			const file = JSON.parse((e.target as any).response);
 			(dialog as any).close();
-			set(file);
+			resolve(file);
 		};
+		xhr.onerror = reject;
 
 		xhr.upload.onprogress = e => {
 			if (e.lengthComputable) (dialog as any).update(e.loaded, e.total);
 		};
 
 		xhr.send(data);
-	};
+	});
 
-	const set = file => {
-		os.api('i/update', {
+	const setBanner = file => {
+		return os.api('i/update', {
 			bannerId: file.id
 		}).then(i => {
 			os.i.bannerId = i.bannerId;
@@ -81,18 +84,21 @@ export default (os: OS) => (cb, file = null) => {
 				}]
 			});
 
-			if (cb) cb(i);
+			return i;
 		});
 	};
 
-	if (file) {
-		fileSelected(file);
-	} else {
-		os.apis.chooseDriveFile({
-			multiple: false,
-			title: '%fa:image%バナーにする画像を選択'
-		}).then(file => {
-			fileSelected(file);
-		});
-	}
+	return (file = null) => {
+		const selectedFile = file
+			? Promise.resolve(file)
+			: os.apis.chooseDriveFile({
+				multiple: false,
+				title: '%fa:image%バナーにする画像を選択'
+			});
+		
+		return selectedFile
+			.then(cropImage)
+			.then(setBanner)
+			.catch(err => err && console.warn(err));
+	};
 };
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index ceeb784315..f67bf5da21 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -62,7 +62,7 @@ export default Vue.extend({
 		onBannerClick() {
 			if (!(this as any).os.isSignedIn || (this as any).os.i.id != this.user.id) return;
 
-			(this as any).apis.updateBanner((this as any).os.i, i => {
+			(this as any).apis.updateBanner().then(i => {
 				this.user.bannerUrl = i.bannerUrl;
 			});
 		}
-- 
cgit v1.3.1-freya


From 98fe9c39ebd23bc6359960cf56e51604050f5b6c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 9 Apr 2018 18:52:29 +0900
Subject: Refactor

---
 .../app/common/views/components/autocomplete.vue   |  11 +-
 .../app/common/views/components/messaging.vue      |  12 +-
 .../common/views/components/welcome-timeline.vue   |  10 +-
 src/client/app/common/views/filters/index.ts       |   2 +
 src/client/app/common/views/filters/note.ts        |   5 +
 src/client/app/common/views/filters/user.ts        |  15 +
 .../desktop/views/components/followers-window.vue  |  10 +-
 .../desktop/views/components/following-window.vue  |  10 +-
 .../app/desktop/views/components/friends-maker.vue |  10 +-
 .../views/components/messaging-room-window.vue     |   6 +-
 .../desktop/views/components/note-detail.sub.vue   |  16 +-
 .../app/desktop/views/components/note-detail.vue   |  26 +-
 .../app/desktop/views/components/note-preview.vue  |  16 +-
 .../desktop/views/components/notes.note.sub.vue    |  16 +-
 .../app/desktop/views/components/notes.note.vue    |  21 +-
 .../app/desktop/views/components/notifications.vue |  32 +-
 .../desktop/views/components/post-detail.sub.vue   | 122 +++++
 .../app/desktop/views/components/post-detail.vue   | 434 +++++++++++++++
 .../app/desktop/views/components/post-preview.vue  |  99 ++++
 .../desktop/views/components/posts.post.sub.vue    | 108 ++++
 .../app/desktop/views/components/posts.post.vue    | 585 +++++++++++++++++++++
 .../app/desktop/views/components/settings.mute.vue |   8 +-
 .../app/desktop/views/components/ui.header.vue     |   9 +-
 .../app/desktop/views/components/user-preview.vue  |   6 +-
 .../desktop/views/components/users-list.item.vue   |  18 +-
 .../views/pages/user/user.followers-you-know.vue   |  10 +-
 .../app/desktop/views/pages/user/user.friends.vue  |   6 +-
 .../app/desktop/views/pages/user/user.header.vue   |  14 +-
 src/client/app/desktop/views/pages/user/user.vue   |   2 +-
 src/client/app/desktop/views/pages/welcome.vue     |   2 +-
 .../desktop/views/widgets/channel.channel.note.vue |  14 +-
 .../desktop/views/widgets/channel.channel.post.vue |  65 +++
 src/client/app/desktop/views/widgets/profile.vue   |  10 +-
 src/client/app/desktop/views/widgets/users.vue     |  10 +-
 .../app/mobile/views/components/note-card.vue      |  12 +-
 .../mobile/views/components/note-detail.sub.vue    |  20 +-
 .../app/mobile/views/components/note-detail.vue    |  28 +-
 .../app/mobile/views/components/note-preview.vue   |  20 +-
 .../app/mobile/views/components/note.sub.vue       |  18 +-
 src/client/app/mobile/views/components/note.vue    |  21 +-
 .../views/components/notification-preview.vue      |  18 +-
 .../app/mobile/views/components/notification.vue   |  22 +-
 .../app/mobile/views/components/post-card.vue      |  85 +++
 .../mobile/views/components/post-detail.sub.vue    | 103 ++++
 .../app/mobile/views/components/post-detail.vue    | 444 ++++++++++++++++
 .../app/mobile/views/components/post-preview.vue   | 100 ++++
 src/client/app/mobile/views/components/post.vue    | 523 ++++++++++++++++++
 .../app/mobile/views/components/ui.header.vue      |   8 +-
 src/client/app/mobile/views/components/ui.nav.vue  |  13 +-
 .../app/mobile/views/components/user-card.vue      |  18 +-
 .../app/mobile/views/components/user-preview.vue   |  18 +-
 src/client/app/mobile/views/pages/following.vue    |   5 +-
 .../app/mobile/views/pages/messaging-room.vue      |  10 +-
 src/client/app/mobile/views/pages/settings.vue     |   5 +-
 src/client/app/mobile/views/pages/user.vue         |  14 +-
 .../views/pages/user/home.followers-you-know.vue   |  14 +-
 src/client/app/mobile/views/widgets/profile.vue    |   9 +-
 57 files changed, 2846 insertions(+), 422 deletions(-)
 create mode 100644 src/client/app/common/views/filters/note.ts
 create mode 100644 src/client/app/common/views/filters/user.ts
 create mode 100644 src/client/app/desktop/views/components/post-detail.sub.vue
 create mode 100644 src/client/app/desktop/views/components/post-detail.vue
 create mode 100644 src/client/app/desktop/views/components/post-preview.vue
 create mode 100644 src/client/app/desktop/views/components/posts.post.sub.vue
 create mode 100644 src/client/app/desktop/views/components/posts.post.vue
 create mode 100644 src/client/app/desktop/views/widgets/channel.channel.post.vue
 create mode 100644 src/client/app/mobile/views/components/post-card.vue
 create mode 100644 src/client/app/mobile/views/components/post-detail.sub.vue
 create mode 100644 src/client/app/mobile/views/components/post-detail.vue
 create mode 100644 src/client/app/mobile/views/components/post-preview.vue
 create mode 100644 src/client/app/mobile/views/components/post.vue

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index 8837fde6be..5c8f61a2a2 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -3,8 +3,8 @@
 	<ol class="users" ref="suggests" v-if="users.length > 0">
 		<li v-for="user in users" @click="complete(type, user)" @keydown="onKeydown" tabindex="-1">
 			<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=32`" alt=""/>
-			<span class="name">{{ getUserName(user) }}</span>
-			<span class="username">@{{ getAcct(user) }}</span>
+			<span class="name">{{ user | userName }}</span>
+			<span class="username">@{{ user | acct }}</span>
 		</li>
 	</ol>
 	<ol class="emojis" ref="suggests" v-if="emojis.length > 0">
@@ -21,17 +21,17 @@
 import Vue from 'vue';
 import * as emojilib from 'emojilib';
 import contains from '../../../common/scripts/contains';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 const lib = Object.entries(emojilib.lib).filter((x: any) => {
 	return x[1].category != 'flags';
 });
+
 const emjdb = lib.map((x: any) => ({
 	emoji: x[1].char,
 	name: x[0],
 	alias: null
 }));
+
 lib.forEach((x: any) => {
 	if (x[1].keywords) {
 		x[1].keywords.forEach(k => {
@@ -43,6 +43,7 @@ lib.forEach((x: any) => {
 		});
 	}
 });
+
 emjdb.sort((a, b) => a.name.length - b.name.length);
 
 export default Vue.extend({
@@ -107,8 +108,6 @@ export default Vue.extend({
 		});
 	},
 	methods: {
-		getAcct,
-		getUserName,
 		exec() {
 			this.select = -1;
 			if (this.$refs.suggests) {
diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index 9b1449daa5..751e4de50d 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -14,8 +14,8 @@
 					tabindex="-1"
 				>
 					<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=32`" alt=""/>
-					<span class="name">{{ getUserName(user) }}</span>
-					<span class="username">@{{ getAcct(user) }}</span>
+					<span class="name">{{ user | userName }}</span>
+					<span class="username">@{{ user | acct }}</span>
 				</li>
 			</ol>
 		</div>
@@ -33,8 +33,8 @@
 				<div>
 					<img class="avatar" :src="`${isMe(message) ? message.recipient.avatarUrl : message.user.avatarUrl}?thumbnail&size=64`" alt=""/>
 					<header>
-						<span class="name">{{ getUserName(isMe(message) ? message.recipient : message.user) }}</span>
-						<span class="username">@{{ getAcct(isMe(message) ? message.recipient : message.user) }}</span>
+						<span class="name">{{ isMe(message) ? message.recipient : message.use | userName }}</span>
+						<span class="username">@{{ isMe(message) ? message.recipient : message.user | acct }}</span>
 						<mk-time :time="message.createdAt"/>
 					</header>
 					<div class="body">
@@ -51,8 +51,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: {
@@ -94,8 +92,6 @@ export default Vue.extend({
 		(this as any).os.streams.messagingIndexStream.dispose(this.connectionId);
 	},
 	methods: {
-		getAcct,
-		getUserName,
 		isMe(message) {
 			return message.userId == (this as any).os.i.id;
 		},
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index 61616da14c..7571cfc5fd 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -1,13 +1,13 @@
 <template>
 <div class="mk-welcome-timeline">
 	<div v-for="note in notes">
-		<router-link class="avatar-anchor" :to="`/@${getAcct(note.user)}`" v-user-preview="note.user.id">
+		<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.user.id">
 			<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=96`" alt="avatar"/>
 		</router-link>
 		<div class="body">
 			<header>
-				<router-link class="name" :to="`/@${getAcct(note.user)}`" v-user-preview="note.user.id">{{ getUserName(note.user) }}</router-link>
-				<span class="username">@{{ getAcct(note.user) }}</span>
+				<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">{{ note.user | userName }}</router-link>
+				<span class="username">@{{ note.user | acct }}</span>
 				<div class="info">
 					<router-link class="created-at" :to="`/@${getAcct(note.user)}/${note.id}`">
 						<mk-time :time="note.createdAt"/>
@@ -24,8 +24,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -38,8 +36,6 @@ export default Vue.extend({
 		this.fetch();
 	},
 	methods: {
-		getAcct,
-		getUserName,
 		fetch(cb?) {
 			this.fetching = true;
 			(this as any).api('notes', {
diff --git a/src/client/app/common/views/filters/index.ts b/src/client/app/common/views/filters/index.ts
index 3a1d1ac235..1759c19c2c 100644
--- a/src/client/app/common/views/filters/index.ts
+++ b/src/client/app/common/views/filters/index.ts
@@ -1,2 +1,4 @@
 require('./bytes');
 require('./number');
+require('./user');
+require('./note');
diff --git a/src/client/app/common/views/filters/note.ts b/src/client/app/common/views/filters/note.ts
new file mode 100644
index 0000000000..a611dc8685
--- /dev/null
+++ b/src/client/app/common/views/filters/note.ts
@@ -0,0 +1,5 @@
+import Vue from 'vue';
+
+Vue.filter('notePage', note => {
+	return '/notes/' + note.id;
+});
diff --git a/src/client/app/common/views/filters/user.ts b/src/client/app/common/views/filters/user.ts
new file mode 100644
index 0000000000..167bb7758a
--- /dev/null
+++ b/src/client/app/common/views/filters/user.ts
@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import getAcct from '../../../../../acct/render';
+import getUserName from '../../../../../renderers/get-user-name';
+
+Vue.filter('acct', user => {
+	return getAcct(user);
+});
+
+Vue.filter('userName', user => {
+	return getUserName(user);
+});
+
+Vue.filter('userPage', user => {
+	return '/@' + Vue.filter('acct')(user);
+});
diff --git a/src/client/app/desktop/views/components/followers-window.vue b/src/client/app/desktop/views/components/followers-window.vue
index d37ca745af..16206299d7 100644
--- a/src/client/app/desktop/views/components/followers-window.vue
+++ b/src/client/app/desktop/views/components/followers-window.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-window width="400px" height="550px" @closed="$destroy">
 	<span slot="header" :class="$style.header">
-		<img :src="`${user.avatarUrl}?thumbnail&size=64`" alt=""/>{{ name }}のフォロワー
+		<img :src="`${user.avatarUrl}?thumbnail&size=64`" alt=""/>{{ user | userName }}のフォロワー
 	</span>
 	<mk-followers :user="user"/>
 </mk-window>
@@ -9,15 +9,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
-	props: ['user'],
-	computed {
-		name() {
-			return getUserName(this.user);
-		}
-	}
+	props: ['user']
 });
 </script>
 
diff --git a/src/client/app/desktop/views/components/following-window.vue b/src/client/app/desktop/views/components/following-window.vue
index cbd8ec5f94..cc3d77198e 100644
--- a/src/client/app/desktop/views/components/following-window.vue
+++ b/src/client/app/desktop/views/components/following-window.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-window width="400px" height="550px" @closed="$destroy">
 	<span slot="header" :class="$style.header">
-		<img :src="`${user.avatarUrl}?thumbnail&size=64`" alt=""/>{{ name }}のフォロー
+		<img :src="`${user.avatarUrl}?thumbnail&size=64`" alt=""/>{{ user | userName }}のフォロー
 	</span>
 	<mk-following :user="user"/>
 </mk-window>
@@ -9,15 +9,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
-	props: ['user'],
-	computed: {
-		name() {
-			return getUserName(this.user);
-		}
-	}
+	props: ['user']
 });
 </script>
 
diff --git a/src/client/app/desktop/views/components/friends-maker.vue b/src/client/app/desktop/views/components/friends-maker.vue
index acc4542d95..af5bde3ad5 100644
--- a/src/client/app/desktop/views/components/friends-maker.vue
+++ b/src/client/app/desktop/views/components/friends-maker.vue
@@ -3,12 +3,12 @@
 	<p class="title">気になるユーザーをフォロー:</p>
 	<div class="users" v-if="!fetching && users.length > 0">
 		<div class="user" v-for="user in users" :key="user.id">
-			<router-link class="avatar-anchor" :to="`/@${getAcct(user)}`">
+			<router-link class="avatar-anchor" :to="user | userPage">
 				<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="user.id"/>
 			</router-link>
 			<div class="body">
-				<router-link class="name" :to="`/@${getAcct(user)}`" v-user-preview="user.id">{{ getUserName(user) }}</router-link>
-				<p class="username">@{{ getAcct(user) }}</p>
+				<router-link class="name" :to="user | userPage" v-user-preview="user.id">{{ user | userName }}</router-link>
+				<p class="username">@{{ user | acct }}</p>
 			</div>
 			<mk-follow-button :user="user"/>
 		</div>
@@ -22,8 +22,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -38,8 +36,6 @@ export default Vue.extend({
 		this.fetch();
 	},
 	methods: {
-		getAcct,
-		getUserName,
 		fetch() {
 			this.fetching = true;
 			this.users = [];
diff --git a/src/client/app/desktop/views/components/messaging-room-window.vue b/src/client/app/desktop/views/components/messaging-room-window.vue
index 7f8c35c2f8..dbe3266734 100644
--- a/src/client/app/desktop/views/components/messaging-room-window.vue
+++ b/src/client/app/desktop/views/components/messaging-room-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="$destroy">
-	<span slot="header" :class="$style.header">%fa:comments%メッセージ: {{ name }}</span>
+	<span slot="header" :class="$style.header">%fa:comments%メッセージ: {{ user | userName }}</span>
 	<mk-messaging-room :user="user" :class="$style.content"/>
 </mk-window>
 </template>
@@ -9,14 +9,10 @@
 import Vue from 'vue';
 import { url } from '../../../config';
 import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['user'],
 	computed: {
-		name(): string {
-			return getUserName(this.user);
-		},
 		popout(): string {
 			return `${url}/i/messaging/${getAcct(this.user)}`;
 		}
diff --git a/src/client/app/desktop/views/components/note-detail.sub.vue b/src/client/app/desktop/views/components/note-detail.sub.vue
index 79f5de1f83..16bc2a1d98 100644
--- a/src/client/app/desktop/views/components/note-detail.sub.vue
+++ b/src/client/app/desktop/views/components/note-detail.sub.vue
@@ -1,16 +1,16 @@
 <template>
 <div class="sub" :title="title">
-	<router-link class="avatar-anchor" :to="`/@${acct}`">
+	<router-link class="avatar-anchor" :to="note.user | userPage">
 		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
 	</router-link>
 	<div class="main">
 		<header>
 			<div class="left">
-				<router-link class="name" :to="`/@${acct}`" v-user-preview="note.userId">{{ name }}</router-link>
-				<span class="username">@{{ acct }}</span>
+				<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
+				<span class="username">@{{ note.user | acct }}</span>
 			</div>
 			<div class="right">
-				<router-link class="time" :to="`/@${acct}/${note.id}`">
+				<router-link class="time" :to="note | notePage">
 					<mk-time :time="note.createdAt"/>
 				</router-link>
 			</div>
@@ -28,18 +28,10 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['note'],
 	computed: {
-		acct() {
-			return getAcct(this.note.user);
-		},
-		name() {
-			return getUserName(this.note.user);
-		},
 		title(): string {
 			return dateStringify(this.note.createdAt);
 		}
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index eead82dd04..50bbb76988 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -18,22 +18,22 @@
 	</div>
 	<div class="renote" v-if="isRenote">
 		<p>
-			<router-link class="avatar-anchor" :to="`/@${acct}`" v-user-preview="note.userId">
+			<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.userId">
 				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
 			</router-link>
 			%fa:retweet%
-			<router-link class="name" :href="`/@${acct}`">{{ name }}</router-link>
+			<router-link class="name" :href="note.user | userPage">{{ note.user | userName }}</router-link>
 			がRenote
 		</p>
 	</div>
 	<article>
-		<router-link class="avatar-anchor" :to="`/@${pAcct}`">
+		<router-link class="avatar-anchor" :to="p.user | userPage">
 			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
 		</router-link>
 		<header>
-			<router-link class="name" :to="`/@${pAcct}`" v-user-preview="p.user.id">{{ name }}</router-link>
-			<span class="username">@{{ pAcct }}</span>
-			<router-link class="time" :to="`/@${pAcct}/${p.id}`">
+			<router-link class="name" :to="p.user | userPage" v-user-preview="p.user.id">{{ p.user | userName }}</router-link>
+			<span class="username">@{{ p.user | acct }}</span>
+			<router-link class="time" :to="p | notePage">
 				<mk-time :time="p.createdAt"/>
 			</router-link>
 		</header>
@@ -78,8 +78,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 import parse from '../../../../../text/parse';
 
 import MkPostFormWindow from './post-form-window.vue';
@@ -131,18 +129,6 @@ export default Vue.extend({
 		title(): string {
 			return dateStringify(this.p.createdAt);
 		},
-		acct(): string {
-			return getAcct(this.note.user);
-		},
-		name(): string {
-			return getUserName(this.note.user);
-		},
-		pAcct(): string {
-			return getAcct(this.p.user);
-		},
-		pName(): string {
-			return getUserName(this.p.user);
-		},
 		urls(): string[] {
 			if (this.p.text) {
 				const ast = parse(this.p.text);
diff --git a/src/client/app/desktop/views/components/note-preview.vue b/src/client/app/desktop/views/components/note-preview.vue
index bff199c09d..ff3ecadc20 100644
--- a/src/client/app/desktop/views/components/note-preview.vue
+++ b/src/client/app/desktop/views/components/note-preview.vue
@@ -1,13 +1,13 @@
 <template>
 <div class="mk-note-preview" :title="title">
-	<router-link class="avatar-anchor" :to="`/@${acct}`">
+	<router-link class="avatar-anchor" :to="note.user | userPage">
 		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${acct}`" v-user-preview="note.userId">{{ name }}</router-link>
-			<span class="username">@{{ acct }}</span>
-			<router-link class="time" :to="`/@${acct}/${note.id}`">
+			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
+			<span class="username">@{{ note.user | acct }}</span>
+			<router-link class="time" :to="note | notePage">
 				<mk-time :time="note.createdAt"/>
 			</router-link>
 		</header>
@@ -21,18 +21,10 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['note'],
 	computed: {
-		acct() {
-			return getAcct(this.note.user);
-		},
-		name() {
-			return getUserName(this.note.user);
-		},
 		title(): string {
 			return dateStringify(this.note.createdAt);
 		}
diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue
index b49d12b92e..e854785783 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -1,13 +1,13 @@
 <template>
 <div class="sub" :title="title">
-	<router-link class="avatar-anchor" :to="`/@${acct}`">
+	<router-link class="avatar-anchor" :to="note.user | userPage">
 		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${acct}`" v-user-preview="note.userId">{{ name }}</router-link>
-			<span class="username">@{{ acct }}</span>
-			<router-link class="created-at" :to="`/@${acct}/${note.id}`">
+			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
+			<span class="username">@{{ note.user | acct }}</span>
+			<router-link class="created-at" :to="note | notePage">
 				<mk-time :time="note.createdAt"/>
 			</router-link>
 		</header>
@@ -21,18 +21,10 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['note'],
 	computed: {
-		acct() {
-			return getAcct(this.note.user);
-		},
-		name(): string {
-			return getUserName(this.note.user);
-		},
 		title(): string {
 			return dateStringify(this.note.createdAt);
 		}
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 0712069e50..8561643c9c 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -5,29 +5,29 @@
 	</div>
 	<div class="renote" v-if="isRenote">
 		<p>
-			<router-link class="avatar-anchor" :to="`/@${getAcct(note.user)}`" v-user-preview="note.userId">
+			<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.userId">
 				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
 			</router-link>
 			%fa:retweet%
 			<span>{{ '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.indexOf('{')) }}</span>
-			<a class="name" :href="`/@${getAcct(note.user)}`" v-user-preview="note.userId">{{ getUserName(note.user) }}</a>
+			<a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
 			<span>{{ '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-note.reposted-by%'.indexOf('}') + 1) }}</span>
 		</p>
 		<mk-time :time="note.createdAt"/>
 	</div>
 	<article>
-		<router-link class="avatar-anchor" :to="`/@${getAcct(p.user)}`">
+		<router-link class="avatar-anchor" :to="p.user | userPage">
 			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
 		</router-link>
 		<div class="main">
 			<header>
-				<router-link class="name" :to="`/@${getAcct(p.user)}`" v-user-preview="p.user.id">{{ getUserName(p.user) }}</router-link>
+				<router-link class="name" :to="p.user | userPage" v-user-preview="p.user.id">{{ p.user | userName }}</router-link>
 				<span class="is-bot" v-if="p.user.host === null && p.user.isBot">bot</span>
-				<span class="username">@{{ getAcct(p.user) }}</span>
+				<span class="username">@{{ p.user | acct }}</span>
 				<div class="info">
 					<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
 					<span class="mobile" v-if="p.viaMobile">%fa:mobile-alt%</span>
-					<router-link class="created-at" :to="url">
+					<router-link class="created-at" :to="p | notePage">
 						<mk-time :time="p.createdAt"/>
 					</router-link>
 				</div>
@@ -85,8 +85,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 import parse from '../../../../../text/parse';
 
 import MkPostFormWindow from './post-form-window.vue';
@@ -117,9 +115,7 @@ export default Vue.extend({
 		return {
 			isDetailOpened: false,
 			connection: null,
-			connectionId: null,
-			getAcct,
-			getUserName
+			connectionId: null
 		};
 	},
 
@@ -144,9 +140,6 @@ export default Vue.extend({
 		title(): string {
 			return dateStringify(this.p.createdAt);
 		},
-		url(): string {
-			return `/@${this.acct}/${this.p.id}`;
-		},
 		urls(): string[] {
 			if (this.p.text) {
 				const ast = parse(this.p.text);
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index 100a803cc2..8b17c8c430 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -5,13 +5,13 @@
 			<div class="notification" :class="notification.type" :key="notification.id">
 				<mk-time :time="notification.createdAt"/>
 				<template v-if="notification.type == 'reaction'">
-					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">
+					<router-link class="avatar-anchor" :to="notification.user | userPage" v-user-preview="notification.user.id">
 						<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
 						<p>
 							<mk-reaction-icon :reaction="notification.reaction"/>
-							<router-link :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">{{ getUserName(notification.user) }}</router-link>
+							<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
 						</p>
 						<router-link class="note-ref" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">
 							%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
@@ -19,12 +19,12 @@
 					</div>
 				</template>
 				<template v-if="notification.type == 'renote'">
-					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.note.user)}`" v-user-preview="notification.note.userId">
+					<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
 						<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
 						<p>%fa:retweet%
-							<router-link :to="`/@${getAcct(notification.note.user)}`" v-user-preview="notification.note.userId">{{ getUserName(notification.note.user) }}</router-link>
+							<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
 						</p>
 						<router-link class="note-ref" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">
 							%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
@@ -32,54 +32,54 @@
 					</div>
 				</template>
 				<template v-if="notification.type == 'quote'">
-					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.note.user)}`" v-user-preview="notification.note.userId">
+					<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
 						<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
 						<p>%fa:quote-left%
-							<router-link :to="`/@${getAcct(notification.note.user)}`" v-user-preview="notification.note.userId">{{ getUserName(notification.note.user) }}</router-link>
+							<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
 						</p>
 						<router-link class="note-preview" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">{{ getNoteSummary(notification.note) }}</router-link>
 					</div>
 				</template>
 				<template v-if="notification.type == 'follow'">
-					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">
+					<router-link class="avatar-anchor" :to="notification.user | userPage" v-user-preview="notification.user.id">
 						<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
 						<p>%fa:user-plus%
-							<router-link :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">{{ getUserName(notification.user) }}</router-link>
+							<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
 						</p>
 					</div>
 				</template>
 				<template v-if="notification.type == 'reply'">
-					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.note.user)}`" v-user-preview="notification.note.userId">
+					<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
 						<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
 						<p>%fa:reply%
-							<router-link :to="`/@${getAcct(notification.note.user)}`" v-user-preview="notification.note.userId">{{ getUserName(notification.note.user) }}</router-link>
+							<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
 						</p>
 						<router-link class="note-preview" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">{{ getNoteSummary(notification.note) }}</router-link>
 					</div>
 				</template>
 				<template v-if="notification.type == 'mention'">
-					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.note.user)}`" v-user-preview="notification.note.userId">
+					<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
 						<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
 						<p>%fa:at%
-							<router-link :to="`/@${getAcct(notification.note.user)}`" v-user-preview="notification.note.userId">{{ getUserName(notification.note.user) }}</router-link>
+							<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
 						</p>
 						<a class="note-preview" :href="`/@${getAcct(notification.note.user)}/${notification.note.id}`">{{ getNoteSummary(notification.note) }}</a>
 					</div>
 				</template>
 				<template v-if="notification.type == 'poll_vote'">
-					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">
+					<router-link class="avatar-anchor" :to="notification.user | userPage" v-user-preview="notification.user.id">
 						<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
-						<p>%fa:chart-pie%<a :href="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">{{ getUserName(notification.user) }}</a></p>
+						<p>%fa:chart-pie%<a :href="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</a></p>
 						<router-link class="note-ref" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">
 							%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
 						</router-link>
@@ -102,9 +102,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
 import getNoteSummary from '../../../../../renderers/get-note-summary';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -154,8 +152,6 @@ export default Vue.extend({
 		(this as any).os.stream.dispose(this.connectionId);
 	},
 	methods: {
-		getAcct,
-		getUserName,
 		fetchMoreNotifications() {
 			this.fetchingMoreNotifications = true;
 
diff --git a/src/client/app/desktop/views/components/post-detail.sub.vue b/src/client/app/desktop/views/components/post-detail.sub.vue
new file mode 100644
index 0000000000..16bc2a1d98
--- /dev/null
+++ b/src/client/app/desktop/views/components/post-detail.sub.vue
@@ -0,0 +1,122 @@
+<template>
+<div class="sub" :title="title">
+	<router-link class="avatar-anchor" :to="note.user | userPage">
+		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
+	</router-link>
+	<div class="main">
+		<header>
+			<div class="left">
+				<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
+				<span class="username">@{{ note.user | acct }}</span>
+			</div>
+			<div class="right">
+				<router-link class="time" :to="note | notePage">
+					<mk-time :time="note.createdAt"/>
+				</router-link>
+			</div>
+		</header>
+		<div class="body">
+			<mk-note-html v-if="note.text" :text="note.text" :i="os.i" :class="$style.text"/>
+			<div class="media" v-if="note.media > 0">
+				<mk-media-list :media-list="note.media"/>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import dateStringify from '../../../common/scripts/date-stringify';
+
+export default Vue.extend({
+	props: ['note'],
+	computed: {
+		title(): string {
+			return dateStringify(this.note.createdAt);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.sub
+	margin 0
+	padding 20px 32px
+	background #fdfdfd
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	&:hover
+		> .main > footer > button
+			color #888
+
+	> .avatar-anchor
+		display block
+		float left
+		margin 0 16px 0 0
+
+		> .avatar
+			display block
+			width 44px
+			height 44px
+			margin 0
+			border-radius 4px
+			vertical-align bottom
+
+	> .main
+		float left
+		width calc(100% - 60px)
+
+		> header
+			margin-bottom 4px
+			white-space nowrap
+
+			&:after
+				content ""
+				display block
+				clear both
+
+			> .left
+				float left
+
+				> .name
+					display inline
+					margin 0
+					padding 0
+					color #777
+					font-size 1em
+					font-weight 700
+					text-align left
+					text-decoration none
+
+					&:hover
+						text-decoration underline
+
+				> .username
+					text-align left
+					margin 0 0 0 8px
+					color #ccc
+
+			> .right
+				float right
+
+				> .time
+					font-size 0.9em
+					color #c0c0c0
+
+</style>
+
+<style lang="stylus" module>
+.text
+	cursor default
+	display block
+	margin 0
+	padding 0
+	overflow-wrap break-word
+	font-size 1em
+	color #717171
+</style>
diff --git a/src/client/app/desktop/views/components/post-detail.vue b/src/client/app/desktop/views/components/post-detail.vue
new file mode 100644
index 0000000000..50bbb76988
--- /dev/null
+++ b/src/client/app/desktop/views/components/post-detail.vue
@@ -0,0 +1,434 @@
+<template>
+<div class="mk-note-detail" :title="title">
+	<button
+		class="read-more"
+		v-if="p.reply && p.reply.replyId && context == null"
+		title="会話をもっと読み込む"
+		@click="fetchContext"
+		:disabled="contextFetching"
+	>
+		<template v-if="!contextFetching">%fa:ellipsis-v%</template>
+		<template v-if="contextFetching">%fa:spinner .pulse%</template>
+	</button>
+	<div class="context">
+		<x-sub v-for="note in context" :key="note.id" :note="note"/>
+	</div>
+	<div class="reply-to" v-if="p.reply">
+		<x-sub :note="p.reply"/>
+	</div>
+	<div class="renote" v-if="isRenote">
+		<p>
+			<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.userId">
+				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
+			</router-link>
+			%fa:retweet%
+			<router-link class="name" :href="note.user | userPage">{{ note.user | userName }}</router-link>
+			がRenote
+		</p>
+	</div>
+	<article>
+		<router-link class="avatar-anchor" :to="p.user | userPage">
+			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
+		</router-link>
+		<header>
+			<router-link class="name" :to="p.user | userPage" v-user-preview="p.user.id">{{ p.user | userName }}</router-link>
+			<span class="username">@{{ p.user | acct }}</span>
+			<router-link class="time" :to="p | notePage">
+				<mk-time :time="p.createdAt"/>
+			</router-link>
+		</header>
+		<div class="body">
+			<mk-note-html :class="$style.text" v-if="p.text" :text="p.text" :i="os.i"/>
+			<div class="media" v-if="p.media.length > 0">
+				<mk-media-list :media-list="p.media"/>
+			</div>
+			<mk-poll v-if="p.poll" :note="p"/>
+			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+			<div class="tags" v-if="p.tags && p.tags.length > 0">
+				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
+			</div>
+			<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
+			<div class="map" v-if="p.geo" ref="map"></div>
+			<div class="renote" v-if="p.renote">
+				<mk-note-preview :note="p.renote"/>
+			</div>
+		</div>
+		<footer>
+			<mk-reactions-viewer :note="p"/>
+			<button @click="reply" title="返信">
+				%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
+			</button>
+			<button @click="renote" title="Renote">
+				%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
+			</button>
+			<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="リアクション">
+				%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
+			</button>
+			<button @click="menu" ref="menuButton">
+				%fa:ellipsis-h%
+			</button>
+		</footer>
+	</article>
+	<div class="replies" v-if="!compact">
+		<x-sub v-for="note in replies" :key="note.id" :note="note"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import dateStringify from '../../../common/scripts/date-stringify';
+import parse from '../../../../../text/parse';
+
+import MkPostFormWindow from './post-form-window.vue';
+import MkRenoteFormWindow from './renote-form-window.vue';
+import MkNoteMenu from '../../../common/views/components/note-menu.vue';
+import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
+import XSub from './note-detail.sub.vue';
+
+export default Vue.extend({
+	components: {
+		XSub
+	},
+
+	props: {
+		note: {
+			type: Object,
+			required: true
+		},
+		compact: {
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			context: [],
+			contextFetching: false,
+			replies: []
+		};
+	},
+
+	computed: {
+		isRenote(): boolean {
+			return (this.note.renote &&
+				this.note.text == null &&
+				this.note.mediaIds.length == 0 &&
+				this.note.poll == null);
+		},
+		p(): any {
+			return this.isRenote ? this.note.renote : this.note;
+		},
+		reactionsCount(): number {
+			return this.p.reactionCounts
+				? Object.keys(this.p.reactionCounts)
+					.map(key => this.p.reactionCounts[key])
+					.reduce((a, b) => a + b)
+				: 0;
+		},
+		title(): string {
+			return dateStringify(this.p.createdAt);
+		},
+		urls(): string[] {
+			if (this.p.text) {
+				const ast = parse(this.p.text);
+				return ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
+		}
+	},
+
+	mounted() {
+		// Get replies
+		if (!this.compact) {
+			(this as any).api('notes/replies', {
+				noteId: this.p.id,
+				limit: 8
+			}).then(replies => {
+				this.replies = replies;
+			});
+		}
+
+		// Draw map
+		if (this.p.geo) {
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
+			if (shouldShowMap) {
+				(this as any).os.getGoogleMaps().then(maps => {
+					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
+					const map = new maps.Map(this.$refs.map, {
+						center: uluru,
+						zoom: 15
+					});
+					new maps.Marker({
+						position: uluru,
+						map: map
+					});
+				});
+			}
+		}
+	},
+
+	methods: {
+		fetchContext() {
+			this.contextFetching = true;
+
+			// Fetch context
+			(this as any).api('notes/context', {
+				noteId: this.p.replyId
+			}).then(context => {
+				this.contextFetching = false;
+				this.context = context.reverse();
+			});
+		},
+		reply() {
+			(this as any).os.new(MkPostFormWindow, {
+				reply: this.p
+			});
+		},
+		renote() {
+			(this as any).os.new(MkRenoteFormWindow, {
+				note: this.p
+			});
+		},
+		react() {
+			(this as any).os.new(MkReactionPicker, {
+				source: this.$refs.reactButton,
+				note: this.p
+			});
+		},
+		menu() {
+			(this as any).os.new(MkNoteMenu, {
+				source: this.$refs.menuButton,
+				note: this.p
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-note-detail
+	margin 0
+	padding 0
+	overflow hidden
+	text-align left
+	background #fff
+	border solid 1px rgba(0, 0, 0, 0.1)
+	border-radius 8px
+
+	> .read-more
+		display block
+		margin 0
+		padding 10px 0
+		width 100%
+		font-size 1em
+		text-align center
+		color #999
+		cursor pointer
+		background #fafafa
+		outline none
+		border none
+		border-bottom solid 1px #eef0f2
+		border-radius 6px 6px 0 0
+
+		&:hover
+			background #f6f6f6
+
+		&:active
+			background #f0f0f0
+
+		&:disabled
+			color #ccc
+
+	> .context
+		> *
+			border-bottom 1px solid #eef0f2
+
+	> .renote
+		color #9dbb00
+		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+
+		> p
+			margin 0
+			padding 16px 32px
+
+			.avatar-anchor
+				display inline-block
+
+				.avatar
+					vertical-align bottom
+					min-width 28px
+					min-height 28px
+					max-width 28px
+					max-height 28px
+					margin 0 8px 0 0
+					border-radius 6px
+
+			[data-fa]
+				margin-right 4px
+
+			.name
+				font-weight bold
+
+		& + article
+			padding-top 8px
+
+	> .reply-to
+		border-bottom 1px solid #eef0f2
+
+	> article
+		padding 28px 32px 18px 32px
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		&:hover
+			> .main > footer > button
+				color #888
+
+		> .avatar-anchor
+			display block
+			width 60px
+			height 60px
+
+			> .avatar
+				display block
+				width 60px
+				height 60px
+				margin 0
+				border-radius 8px
+				vertical-align bottom
+
+		> header
+			position absolute
+			top 28px
+			left 108px
+			width calc(100% - 108px)
+
+			> .name
+				display inline-block
+				margin 0
+				line-height 24px
+				color #777
+				font-size 18px
+				font-weight 700
+				text-align left
+				text-decoration none
+
+				&:hover
+					text-decoration underline
+
+			> .username
+				display block
+				text-align left
+				margin 0
+				color #ccc
+
+			> .time
+				position absolute
+				top 0
+				right 32px
+				font-size 1em
+				color #c0c0c0
+
+		> .body
+			padding 8px 0
+
+			> .renote
+				margin 8px 0
+
+				> .mk-note-preview
+					padding 16px
+					border dashed 1px #c0dac6
+					border-radius 8px
+
+			> .location
+				margin 4px 0
+				font-size 12px
+				color #ccc
+
+			> .map
+				width 100%
+				height 300px
+
+				&:empty
+					display none
+
+			> .mk-url-preview
+				margin-top 8px
+
+			> .tags
+				margin 4px 0 0 0
+
+				> *
+					display inline-block
+					margin 0 8px 0 0
+					padding 2px 8px 2px 16px
+					font-size 90%
+					color #8d969e
+					background #edf0f3
+					border-radius 4px
+
+					&:before
+						content ""
+						display block
+						position absolute
+						top 0
+						bottom 0
+						left 4px
+						width 8px
+						height 8px
+						margin auto 0
+						background #fff
+						border-radius 100%
+
+					&:hover
+						text-decoration none
+						background #e2e7ec
+
+		> footer
+			font-size 1.2em
+
+			> button
+				margin 0 28px 0 0
+				padding 8px
+				background transparent
+				border none
+				font-size 1em
+				color #ddd
+				cursor pointer
+
+				&:hover
+					color #666
+
+				> .count
+					display inline
+					margin 0 0 0 8px
+					color #999
+
+				&.reacted
+					color $theme-color
+
+	> .replies
+		> *
+			border-top 1px solid #eef0f2
+
+</style>
+
+<style lang="stylus" module>
+.text
+	cursor default
+	display block
+	margin 0
+	padding 0
+	overflow-wrap break-word
+	font-size 1.5em
+	color #717171
+</style>
diff --git a/src/client/app/desktop/views/components/post-preview.vue b/src/client/app/desktop/views/components/post-preview.vue
new file mode 100644
index 0000000000..ff3ecadc20
--- /dev/null
+++ b/src/client/app/desktop/views/components/post-preview.vue
@@ -0,0 +1,99 @@
+<template>
+<div class="mk-note-preview" :title="title">
+	<router-link class="avatar-anchor" :to="note.user | userPage">
+		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
+	</router-link>
+	<div class="main">
+		<header>
+			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
+			<span class="username">@{{ note.user | acct }}</span>
+			<router-link class="time" :to="note | notePage">
+				<mk-time :time="note.createdAt"/>
+			</router-link>
+		</header>
+		<div class="body">
+			<mk-sub-note-content class="text" :note="note"/>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import dateStringify from '../../../common/scripts/date-stringify';
+
+export default Vue.extend({
+	props: ['note'],
+	computed: {
+		title(): string {
+			return dateStringify(this.note.createdAt);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-note-preview
+	font-size 0.9em
+	background #fff
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	&:hover
+		> .main > footer > button
+			color #888
+
+	> .avatar-anchor
+		display block
+		float left
+		margin 0 16px 0 0
+
+		> .avatar
+			display block
+			width 52px
+			height 52px
+			margin 0
+			border-radius 8px
+			vertical-align bottom
+
+	> .main
+		float left
+		width calc(100% - 68px)
+
+		> header
+			display flex
+			white-space nowrap
+
+			> .name
+				margin 0 .5em 0 0
+				padding 0
+				color #607073
+				font-size 1em
+				font-weight bold
+				text-decoration none
+				white-space normal
+
+				&:hover
+					text-decoration underline
+
+			> .username
+				margin 0 .5em 0 0
+				color #d1d8da
+
+			> .time
+				margin-left auto
+				color #b2b8bb
+
+		> .body
+
+			> .text
+				cursor default
+				margin 0
+				padding 0
+				font-size 1.1em
+				color #717171
+
+</style>
diff --git a/src/client/app/desktop/views/components/posts.post.sub.vue b/src/client/app/desktop/views/components/posts.post.sub.vue
new file mode 100644
index 0000000000..e854785783
--- /dev/null
+++ b/src/client/app/desktop/views/components/posts.post.sub.vue
@@ -0,0 +1,108 @@
+<template>
+<div class="sub" :title="title">
+	<router-link class="avatar-anchor" :to="note.user | userPage">
+		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
+	</router-link>
+	<div class="main">
+		<header>
+			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
+			<span class="username">@{{ note.user | acct }}</span>
+			<router-link class="created-at" :to="note | notePage">
+				<mk-time :time="note.createdAt"/>
+			</router-link>
+		</header>
+		<div class="body">
+			<mk-sub-note-content class="text" :note="note"/>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import dateStringify from '../../../common/scripts/date-stringify';
+
+export default Vue.extend({
+	props: ['note'],
+	computed: {
+		title(): string {
+			return dateStringify(this.note.createdAt);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.sub
+	margin 0
+	padding 16px
+	font-size 0.9em
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	&:hover
+		> .main > footer > button
+			color #888
+
+	> .avatar-anchor
+		display block
+		float left
+		margin 0 14px 0 0
+
+		> .avatar
+			display block
+			width 52px
+			height 52px
+			margin 0
+			border-radius 8px
+			vertical-align bottom
+
+	> .main
+		float left
+		width calc(100% - 66px)
+
+		> header
+			display flex
+			margin-bottom 2px
+			white-space nowrap
+			line-height 21px
+
+			> .name
+				display block
+				margin 0 .5em 0 0
+				padding 0
+				overflow hidden
+				color #607073
+				font-size 1em
+				font-weight bold
+				text-decoration none
+				text-overflow ellipsis
+
+				&:hover
+					text-decoration underline
+
+			> .username
+				margin 0 .5em 0 0
+				color #d1d8da
+
+			> .created-at
+				margin-left auto
+				color #b2b8bb
+
+		> .body
+
+			> .text
+				cursor default
+				margin 0
+				padding 0
+				font-size 1.1em
+				color #717171
+
+				pre
+					max-height 120px
+					font-size 80%
+
+</style>
diff --git a/src/client/app/desktop/views/components/posts.post.vue b/src/client/app/desktop/views/components/posts.post.vue
new file mode 100644
index 0000000000..322bf29221
--- /dev/null
+++ b/src/client/app/desktop/views/components/posts.post.vue
@@ -0,0 +1,585 @@
+<template>
+<div class="note" tabindex="-1" :title="title" @keydown="onKeydown">
+	<div class="reply-to" v-if="p.reply">
+		<x-sub :note="p.reply"/>
+	</div>
+	<div class="renote" v-if="isRenote">
+		<p>
+			<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.userId">
+				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
+			</router-link>
+			%fa:retweet%
+			<span>{{ '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.indexOf('{')) }}</span>
+			<a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
+			<span>{{ '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-note.reposted-by%'.indexOf('}') + 1) }}</span>
+		</p>
+		<mk-time :time="note.createdAt"/>
+	</div>
+	<article>
+		<router-link class="avatar-anchor" :to="p.user | userPage">
+			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
+		</router-link>
+		<div class="main">
+			<header>
+				<router-link class="name" :to="p.user | userPage" v-user-preview="p.user.id">{{ p.user | userName }}</router-link>
+				<span class="is-bot" v-if="p.user.host === null && p.user.isBot">bot</span>
+				<span class="username">@{{ p.user | acct }}</span>
+				<div class="info">
+					<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
+					<span class="mobile" v-if="p.viaMobile">%fa:mobile-alt%</span>
+					<router-link class="created-at" :to="url">
+						<mk-time :time="p.createdAt"/>
+					</router-link>
+				</div>
+			</header>
+			<div class="body">
+				<p class="channel" v-if="p.channel">
+					<a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>:
+				</p>
+				<div class="text">
+					<a class="reply" v-if="p.reply">%fa:reply%</a>
+					<mk-note-html v-if="p.textHtml" :text="p.text" :i="os.i" :class="$style.text"/>
+					<a class="rp" v-if="p.renote">RP:</a>
+				</div>
+				<div class="media" v-if="p.media.length > 0">
+					<mk-media-list :media-list="p.media"/>
+				</div>
+				<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
+				<div class="tags" v-if="p.tags && p.tags.length > 0">
+					<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
+				</div>
+				<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
+				<div class="map" v-if="p.geo" ref="map"></div>
+				<div class="renote" v-if="p.renote">
+					<mk-note-preview :note="p.renote"/>
+				</div>
+				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+			</div>
+			<footer>
+				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
+				<button @click="reply" title="%i18n:desktop.tags.mk-timeline-note.reply%">
+					%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
+				</button>
+				<button @click="renote" title="%i18n:desktop.tags.mk-timeline-note.renote%">
+					%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
+				</button>
+				<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:desktop.tags.mk-timeline-note.add-reaction%">
+					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
+				</button>
+				<button @click="menu" ref="menuButton">
+					%fa:ellipsis-h%
+				</button>
+				<button title="%i18n:desktop.tags.mk-timeline-note.detail">
+					<template v-if="!isDetailOpened">%fa:caret-down%</template>
+					<template v-if="isDetailOpened">%fa:caret-up%</template>
+				</button>
+			</footer>
+		</div>
+	</article>
+	<div class="detail" v-if="isDetailOpened">
+		<mk-note-status-graph width="462" height="130" :note="p"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import dateStringify from '../../../common/scripts/date-stringify';
+import parse from '../../../../../text/parse';
+
+import MkPostFormWindow from './post-form-window.vue';
+import MkRenoteFormWindow from './renote-form-window.vue';
+import MkNoteMenu from '../../../common/views/components/note-menu.vue';
+import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
+import XSub from './notes.note.sub.vue';
+
+function focus(el, fn) {
+	const target = fn(el);
+	if (target) {
+		if (target.hasAttribute('tabindex')) {
+			target.focus();
+		} else {
+			focus(target, fn);
+		}
+	}
+}
+
+export default Vue.extend({
+	components: {
+		XSub
+	},
+
+	props: ['note'],
+
+	data() {
+		return {
+			isDetailOpened: false,
+			connection: null,
+			connectionId: null
+		};
+	},
+
+	computed: {
+		isRenote(): boolean {
+			return (this.note.renote &&
+				this.note.text == null &&
+				this.note.mediaIds.length == 0 &&
+				this.note.poll == null);
+		},
+		p(): any {
+			return this.isRenote ? this.note.renote : this.note;
+		},
+		reactionsCount(): number {
+			return this.p.reactionCounts
+				? Object.keys(this.p.reactionCounts)
+					.map(key => this.p.reactionCounts[key])
+					.reduce((a, b) => a + b)
+				: 0;
+		},
+		title(): string {
+			return dateStringify(this.p.createdAt);
+		},
+		urls(): string[] {
+			if (this.p.text) {
+				const ast = parse(this.p.text);
+				return ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
+		}
+	},
+
+	created() {
+		if ((this as any).os.isSignedIn) {
+			this.connection = (this as any).os.stream.getConnection();
+			this.connectionId = (this as any).os.stream.use();
+		}
+	},
+
+	mounted() {
+		this.capture(true);
+
+		if ((this as any).os.isSignedIn) {
+			this.connection.on('_connected_', this.onStreamConnected);
+		}
+
+		// Draw map
+		if (this.p.geo) {
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
+			if (shouldShowMap) {
+				(this as any).os.getGoogleMaps().then(maps => {
+					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
+					const map = new maps.Map(this.$refs.map, {
+						center: uluru,
+						zoom: 15
+					});
+					new maps.Marker({
+						position: uluru,
+						map: map
+					});
+				});
+			}
+		}
+	},
+
+	beforeDestroy() {
+		this.decapture(true);
+
+		if ((this as any).os.isSignedIn) {
+			this.connection.off('_connected_', this.onStreamConnected);
+			(this as any).os.stream.dispose(this.connectionId);
+		}
+	},
+
+	methods: {
+		capture(withHandler = false) {
+			if ((this as any).os.isSignedIn) {
+				this.connection.send({
+					type: 'capture',
+					id: this.p.id
+				});
+				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
+			}
+		},
+		decapture(withHandler = false) {
+			if ((this as any).os.isSignedIn) {
+				this.connection.send({
+					type: 'decapture',
+					id: this.p.id
+				});
+				if (withHandler) this.connection.off('note-updated', this.onStreamNoteUpdated);
+			}
+		},
+		onStreamConnected() {
+			this.capture();
+		},
+		onStreamNoteUpdated(data) {
+			const note = data.note;
+			if (note.id == this.note.id) {
+				this.$emit('update:note', note);
+			} else if (note.id == this.note.renoteId) {
+				this.note.renote = note;
+			}
+		},
+		reply() {
+			(this as any).os.new(MkPostFormWindow, {
+				reply: this.p
+			});
+		},
+		renote() {
+			(this as any).os.new(MkRenoteFormWindow, {
+				note: this.p
+			});
+		},
+		react() {
+			(this as any).os.new(MkReactionPicker, {
+				source: this.$refs.reactButton,
+				note: this.p
+			});
+		},
+		menu() {
+			(this as any).os.new(MkNoteMenu, {
+				source: this.$refs.menuButton,
+				note: this.p
+			});
+		},
+		onKeydown(e) {
+			let shouldBeCancel = true;
+
+			switch (true) {
+				case e.which == 38: // [↑]
+				case e.which == 74: // [j]
+				case e.which == 9 && e.shiftKey: // [Shift] + [Tab]
+					focus(this.$el, e => e.previousElementSibling);
+					break;
+
+				case e.which == 40: // [↓]
+				case e.which == 75: // [k]
+				case e.which == 9: // [Tab]
+					focus(this.$el, e => e.nextElementSibling);
+					break;
+
+				case e.which == 81: // [q]
+				case e.which == 69: // [e]
+					this.renote();
+					break;
+
+				case e.which == 70: // [f]
+				case e.which == 76: // [l]
+					//this.like();
+					break;
+
+				case e.which == 82: // [r]
+					this.reply();
+					break;
+
+				default:
+					shouldBeCancel = false;
+			}
+
+			if (shouldBeCancel) e.preventDefault();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.note
+	margin 0
+	padding 0
+	background #fff
+	border-bottom solid 1px #eaeaea
+
+	&:first-child
+		border-top-left-radius 6px
+		border-top-right-radius 6px
+
+		> .renote
+			border-top-left-radius 6px
+			border-top-right-radius 6px
+
+	&:last-of-type
+		border-bottom none
+
+	&:focus
+		z-index 1
+
+		&:after
+			content ""
+			pointer-events none
+			position absolute
+			top 2px
+			right 2px
+			bottom 2px
+			left 2px
+			border 2px solid rgba($theme-color, 0.3)
+			border-radius 4px
+
+	> .renote
+		color #9dbb00
+		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+
+		> p
+			margin 0
+			padding 16px 32px
+			line-height 28px
+
+			.avatar-anchor
+				display inline-block
+
+				.avatar
+					vertical-align bottom
+					width 28px
+					height 28px
+					margin 0 8px 0 0
+					border-radius 6px
+
+			[data-fa]
+				margin-right 4px
+
+			.name
+				font-weight bold
+
+		> .mk-time
+			position absolute
+			top 16px
+			right 32px
+			font-size 0.9em
+			line-height 28px
+
+		& + article
+			padding-top 8px
+
+	> .reply-to
+		padding 0 16px
+		background rgba(0, 0, 0, 0.0125)
+
+		> .mk-note-preview
+			background transparent
+
+	> article
+		padding 28px 32px 18px 32px
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		&:hover
+			> .main > footer > button
+				color #888
+
+		> .avatar-anchor
+			display block
+			float left
+			margin 0 16px 10px 0
+			//position -webkit-sticky
+			//position sticky
+			//top 74px
+
+			> .avatar
+				display block
+				width 58px
+				height 58px
+				margin 0
+				border-radius 8px
+				vertical-align bottom
+
+		> .main
+			float left
+			width calc(100% - 74px)
+
+			> header
+				display flex
+				align-items center
+				margin-bottom 4px
+				white-space nowrap
+
+				> .name
+					display block
+					margin 0 .5em 0 0
+					padding 0
+					overflow hidden
+					color #627079
+					font-size 1em
+					font-weight bold
+					text-decoration none
+					text-overflow ellipsis
+
+					&:hover
+						text-decoration underline
+
+				> .is-bot
+					margin 0 .5em 0 0
+					padding 1px 6px
+					font-size 12px
+					color #aaa
+					border solid 1px #ddd
+					border-radius 3px
+
+				> .username
+					margin 0 .5em 0 0
+					color #ccc
+
+				> .info
+					margin-left auto
+					font-size 0.9em
+
+					> .mobile
+						margin-right 8px
+						color #ccc
+
+					> .app
+						margin-right 8px
+						padding-right 8px
+						color #ccc
+						border-right solid 1px #eaeaea
+
+					> .created-at
+						color #c0c0c0
+
+			> .body
+
+				> .text
+					cursor default
+					display block
+					margin 0
+					padding 0
+					overflow-wrap break-word
+					font-size 1.1em
+					color #717171
+
+					>>> .quote
+						margin 8px
+						padding 6px 12px
+						color #aaa
+						border-left solid 3px #eee
+
+					> .reply
+						margin-right 8px
+						color #717171
+
+					> .rp
+						margin-left 4px
+						font-style oblique
+						color #a0bf46
+
+				> .location
+					margin 4px 0
+					font-size 12px
+					color #ccc
+
+				> .map
+					width 100%
+					height 300px
+
+					&:empty
+						display none
+
+				> .tags
+					margin 4px 0 0 0
+
+					> *
+						display inline-block
+						margin 0 8px 0 0
+						padding 2px 8px 2px 16px
+						font-size 90%
+						color #8d969e
+						background #edf0f3
+						border-radius 4px
+
+						&:before
+							content ""
+							display block
+							position absolute
+							top 0
+							bottom 0
+							left 4px
+							width 8px
+							height 8px
+							margin auto 0
+							background #fff
+							border-radius 100%
+
+						&:hover
+							text-decoration none
+							background #e2e7ec
+
+				.mk-url-preview
+					margin-top 8px
+
+				> .channel
+					margin 0
+
+				> .mk-poll
+					font-size 80%
+
+				> .renote
+					margin 8px 0
+
+					> .mk-note-preview
+						padding 16px
+						border dashed 1px #c0dac6
+						border-radius 8px
+
+			> footer
+				> button
+					margin 0 28px 0 0
+					padding 0 8px
+					line-height 32px
+					font-size 1em
+					color #ddd
+					background transparent
+					border none
+					cursor pointer
+
+					&:hover
+						color #666
+
+					> .count
+						display inline
+						margin 0 0 0 8px
+						color #999
+
+					&.reacted
+						color $theme-color
+
+					&:last-child
+						position absolute
+						right 0
+						margin 0
+
+	> .detail
+		padding-top 4px
+		background rgba(0, 0, 0, 0.0125)
+
+</style>
+
+<style lang="stylus" module>
+.text
+
+	code
+		padding 4px 8px
+		margin 0 0.5em
+		font-size 80%
+		color #525252
+		background #f8f8f8
+		border-radius 2px
+
+	pre > code
+		padding 16px
+		margin 0
+
+	[data-is-me]:after
+		content "you"
+		padding 0 4px
+		margin-left 4px
+		font-size 80%
+		color $theme-color-foreground
+		background $theme-color
+		border-radius 4px
+</style>
diff --git a/src/client/app/desktop/views/components/settings.mute.vue b/src/client/app/desktop/views/components/settings.mute.vue
index 6bdc766538..94492ad262 100644
--- a/src/client/app/desktop/views/components/settings.mute.vue
+++ b/src/client/app/desktop/views/components/settings.mute.vue
@@ -5,7 +5,7 @@
 	</div>
 	<div class="users" v-if="users.length != 0">
 		<div v-for="user in users" :key="user.id">
-			<p><b>{{ getUserName(user) }}</b> @{{ getAcct(user) }}</p>
+			<p><b>{{ user | userName }}</b> @{{ user | acct }}</p>
 		</div>
 	</div>
 </div>
@@ -13,8 +13,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -23,10 +21,6 @@ export default Vue.extend({
 			users: []
 		};
 	},
-	methods: {
-		getAcct,
-		getUserName
-	},
 	mounted() {
 		(this as any).api('mute/list').then(x => {
 			this.users = x.users;
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index 527d10843a..2b63030cd2 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -4,7 +4,7 @@
 	<div class="main" ref="main">
 		<div class="backdrop"></div>
 		<div class="main">
-			<p ref="welcomeback" v-if="os.isSignedIn">おかえりなさい、<b>{{ name }}</b>さん</p>
+			<p ref="welcomeback" v-if="os.isSignedIn">おかえりなさい、<b>{{ os.i | userName }}</b>さん</p>
 			<div class="container" ref="mainContainer">
 				<div class="left">
 					<x-nav/>
@@ -33,14 +33,7 @@ import XNotifications from './ui.header.notifications.vue';
 import XPost from './ui.header.post.vue';
 import XClock from './ui.header.clock.vue';
 
-import getUserName from '../../../../../renderers/get-user-name';
-
 export default Vue.extend({
-	computed: {
-		name(): string {
-			return getUserName((this as any).os.i);
-		}
-	},
 	components: {
 		XNav,
 		XSearch,
diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index 1cc53743aa..24337eea24 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -2,12 +2,12 @@
 <div class="mk-user-preview">
 	<template v-if="u != null">
 		<div class="banner" :style="u.bannerUrl ? `background-image: url(${u.bannerUrl}?thumbnail&size=512)` : ''"></div>
-		<router-link class="avatar" :to="`/@${getAcct(u)}`">
+		<router-link class="avatar" :to="u | userPage">
 			<img :src="`${u.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
 		<div class="title">
-			<router-link class="name" :to="`/@${getAcct(u)}`">{{ u.name }}</router-link>
-			<p class="username">@{{ getAcct(u) }}</p>
+			<router-link class="name" :to="u | userPage">{{ u.name }}</router-link>
+			<p class="username">@{{ u | acct }}</p>
 		</div>
 		<div class="description">{{ u.description }}</div>
 		<div class="status">
diff --git a/src/client/app/desktop/views/components/users-list.item.vue b/src/client/app/desktop/views/components/users-list.item.vue
index c7a132ecfb..005c9cd6d3 100644
--- a/src/client/app/desktop/views/components/users-list.item.vue
+++ b/src/client/app/desktop/views/components/users-list.item.vue
@@ -1,12 +1,12 @@
 <template>
 <div class="root item">
-	<router-link class="avatar-anchor" :to="`/@${acct}`" v-user-preview="user.id">
+	<router-link class="avatar-anchor" :to="user | userPage" v-user-preview="user.id">
 		<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${acct}`" v-user-preview="user.id">{{ name }}</router-link>
-			<span class="username">@{{ acct }}</span>
+			<router-link class="name" :to="user | userPage" v-user-preview="user.id">{{ user | userName }}</router-link>
+			<span class="username">@{{ user | acct }}</span>
 		</header>
 		<div class="body">
 			<p class="followed" v-if="user.isFollowed">フォローされています</p>
@@ -19,19 +19,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
-	props: ['user'],
-	computed: {
-		acct() {
-			return getAcct(this.user);
-		},
-		name() {
-			return getUserName(this.user);
-		}
-	}
+	props: ['user']
 });
 </script>
 
diff --git a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
index 351b1264fa..4113ef13ab 100644
--- a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
+++ b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
@@ -3,8 +3,8 @@
 	<p class="title">%fa:users%%i18n:desktop.tags.mk-user.followers-you-know.title%</p>
 	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.followers-you-know.loading%<mk-ellipsis/></p>
 	<div v-if="!fetching && users.length > 0">
-	<router-link v-for="user in users" :to="`/@${getAcct(user)}`" :key="user.id">
-		<img :src="`${user.avatarUrl}?thumbnail&size=64`" :alt="getUserName(user)" v-user-preview="user.id"/>
+	<router-link v-for="user in users" :to="user | userPage" :key="user.id">
+		<img :src="`${user.avatarUrl}?thumbnail&size=64`" :alt="user | userName" v-user-preview="user.id"/>
 	</router-link>
 	</div>
 	<p class="empty" v-if="!fetching && users.length == 0">%i18n:desktop.tags.mk-user.followers-you-know.no-users%</p>
@@ -13,8 +13,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../acct/render';
-import getUserName from '../../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['user'],
@@ -24,10 +22,6 @@ export default Vue.extend({
 			fetching: true
 		};
 	},
-	methods: {
-		getAcct,
-		getUserName
-	},
 	mounted() {
 		(this as any).api('users/followers', {
 			userId: this.user.id,
diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue
index c9213cb508..8512e8027e 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -4,12 +4,12 @@
 	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.frequently-replied-users.loading%<mk-ellipsis/></p>
 	<template v-if="!fetching && users.length != 0">
 		<div class="user" v-for="friend in users">
-			<router-link class="avatar-anchor" :to="`/@${getAcct(friend)}`">
+			<router-link class="avatar-anchor" :to="friend | userPage">
 				<img class="avatar" :src="`${friend.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="friend.id"/>
 			</router-link>
 			<div class="body">
-				<router-link class="name" :to="`/@${getAcct(friend)}`" v-user-preview="friend.id">{{ friend.name }}</router-link>
-				<p class="username">@{{ getAcct(friend) }}</p>
+				<router-link class="name" :to="friend | userPage" v-user-preview="friend.id">{{ friend.name }}</router-link>
+				<p class="username">@{{ friend | acct }}</p>
 			</div>
 			<mk-follow-button :user="friend"/>
 		</div>
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index f67bf5da21..67e52d1737 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -7,8 +7,8 @@
 	<div class="container">
 		<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=150`" alt="avatar"/>
 		<div class="title">
-			<p class="name">{{ name }}</p>
-			<p class="username">@{{ acct }}</p>
+			<p class="name">{{ user | userName }}</p>
+			<p class="username">@{{ user | acct }}</p>
 			<p class="location" v-if="user.host === null && user.profile.location">%fa:map-marker%{{ user.profile.location }}</p>
 		</div>
 		<footer>
@@ -22,19 +22,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../acct/render';
-import getUserName from '../../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['user'],
-	computed: {
-		acct() {
-			return getAcct(this.user);
-		},
-		name() {
-			return getUserName(this.user);
-		}
-	},
 	mounted() {
 		window.addEventListener('load', this.onScroll);
 		window.addEventListener('scroll', this.onScroll);
diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
index d07b462b59..3644286fbc 100644
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -45,7 +45,7 @@ export default Vue.extend({
 				this.user = user;
 				this.fetching = false;
 				Progress.done();
-				document.title = getUserName(user) + ' | Misskey';
+				document.title = getUserName(this.user) + ' | Misskey';
 			});
 		}
 	}
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 41b015b8a3..bc6ebae774 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -8,7 +8,7 @@
 					<p>ようこそ！ <b>Misskey</b>はTwitter風ミニブログSNSです。思ったことや皆と共有したいことを投稿しましょう。タイムラインを見れば、皆の関心事をすぐにチェックすることもできます。<a :href="aboutUrl">詳しく...</a></p>
 					<p><button class="signup" @click="signup">はじめる</button><button class="signin" @click="signin">ログイン</button></p>
 					<div class="users">
-						<router-link v-for="user in users" :key="user.id" class="avatar-anchor" :to="`/@${getAcct(user)}`" v-user-preview="user.id">
+						<router-link v-for="user in users" :key="user.id" class="avatar-anchor" :to="user | userPage" v-user-preview="user.id">
 							<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 						</router-link>
 					</div>
diff --git a/src/client/app/desktop/views/widgets/channel.channel.note.vue b/src/client/app/desktop/views/widgets/channel.channel.note.vue
index 313a2e3f4f..7767919066 100644
--- a/src/client/app/desktop/views/widgets/channel.channel.note.vue
+++ b/src/client/app/desktop/views/widgets/channel.channel.note.vue
@@ -2,8 +2,8 @@
 <div class="note">
 	<header>
 		<a class="index" @click="reply">{{ note.index }}:</a>
-		<router-link class="name" :to="`/@${acct}`" v-user-preview="note.user.id"><b>{{ name }}</b></router-link>
-		<span>ID:<i>{{ acct }}</i></span>
+		<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id"><b>{{ note.user | userName }}</b></router-link>
+		<span>ID:<i>{{ note.user | acct }}</i></span>
 	</header>
 	<div>
 		<a v-if="note.reply">&gt;&gt;{{ note.reply.index }}</a>
@@ -19,19 +19,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['note'],
-	computed: {
-		acct() {
-			return getAcct(this.note.user);
-		},
-		name() {
-			return getUserName(this.note.user);
-		}
-	},
 	methods: {
 		reply() {
 			this.$emit('reply', this.note);
diff --git a/src/client/app/desktop/views/widgets/channel.channel.post.vue b/src/client/app/desktop/views/widgets/channel.channel.post.vue
new file mode 100644
index 0000000000..7767919066
--- /dev/null
+++ b/src/client/app/desktop/views/widgets/channel.channel.post.vue
@@ -0,0 +1,65 @@
+<template>
+<div class="note">
+	<header>
+		<a class="index" @click="reply">{{ note.index }}:</a>
+		<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id"><b>{{ note.user | userName }}</b></router-link>
+		<span>ID:<i>{{ note.user | acct }}</i></span>
+	</header>
+	<div>
+		<a v-if="note.reply">&gt;&gt;{{ note.reply.index }}</a>
+		{{ note.text }}
+		<div class="media" v-if="note.media">
+			<a v-for="file in note.media" :href="file.url" target="_blank">
+				<img :src="`${file.url}?thumbnail&size=512`" :alt="file.name" :title="file.name"/>
+			</a>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['note'],
+	methods: {
+		reply() {
+			this.$emit('reply', this.note);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.note
+	margin 0
+	padding 0
+	color #444
+
+	> header
+		position -webkit-sticky
+		position sticky
+		z-index 1
+		top 0
+		padding 8px 4px 4px 16px
+		background rgba(255, 255, 255, 0.9)
+
+		> .index
+			margin-right 0.25em
+
+		> .name
+			margin-right 0.5em
+			color #008000
+
+	> div
+		padding 0 16px 16px 16px
+
+		> .media
+			> a
+				display inline-block
+
+				> img
+					max-width 100%
+					vertical-align bottom
+
+</style>
diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue
index 98e42222ec..1b4b11de3c 100644
--- a/src/client/app/desktop/views/widgets/profile.vue
+++ b/src/client/app/desktop/views/widgets/profile.vue
@@ -15,14 +15,13 @@
 		title="クリックでアバター編集"
 		v-user-preview="os.i.id"
 	/>
-	<router-link class="name" :to="`/@${os.i.username}`">{{ name }}</router-link>
-	<p class="username">@{{ os.i.username }}</p>
+	<router-link class="name" :to="os.i | userPage">{{ os.i | userName }}</router-link>
+	<p class="username">@{{ os.i | acct }}</p>
 </div>
 </template>
 
 <script lang="ts">
 import define from '../../../common/define-widget';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default define({
 	name: 'profile',
@@ -30,11 +29,6 @@ export default define({
 		design: 0
 	})
 }).extend({
-	computed: {
-		name() {
-			return getUserName(this.os.i);
-		}
-	},
 	methods: {
 		func() {
 			if (this.props.design == 2) {
diff --git a/src/client/app/desktop/views/widgets/users.vue b/src/client/app/desktop/views/widgets/users.vue
index a5dabb68fc..c7075d9a57 100644
--- a/src/client/app/desktop/views/widgets/users.vue
+++ b/src/client/app/desktop/views/widgets/users.vue
@@ -7,12 +7,12 @@
 	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<template v-else-if="users.length != 0">
 		<div class="user" v-for="_user in users">
-			<router-link class="avatar-anchor" :to="`/@${getAcct(_user)}`">
+			<router-link class="avatar-anchor" :to="_user | userPage">
 				<img class="avatar" :src="`${_user.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="_user.id"/>
 			</router-link>
 			<div class="body">
-				<router-link class="name" :to="`/@${getAcct(_user)}`" v-user-preview="_user.id">{{ getUserName(_user) }}</router-link>
-				<p class="username">@{{ getAcct(_user) }}</p>
+				<router-link class="name" :to="_user | userPage" v-user-preview="_user.id">{{ _user | userName }}</router-link>
+				<p class="username">@{{ _user | acct }}</p>
 			</div>
 			<mk-follow-button :user="_user"/>
 		</div>
@@ -23,8 +23,6 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 const limit = 3;
 
@@ -45,8 +43,6 @@ export default define({
 		this.fetch();
 	},
 	methods: {
-		getAcct,
-		getUserName,
 		func() {
 			this.props.compact = !this.props.compact;
 		},
diff --git a/src/client/app/mobile/views/components/note-card.vue b/src/client/app/mobile/views/components/note-card.vue
index 9ad0d3e294..393fa9b831 100644
--- a/src/client/app/mobile/views/components/note-card.vue
+++ b/src/client/app/mobile/views/components/note-card.vue
@@ -1,8 +1,8 @@
 <template>
 <div class="mk-note-card">
-	<a :href="`/@${acct}/${note.id}`">
+	<a :href="note | notePage">
 		<header>
-			<img :src="`${acct}?thumbnail&size=64`" alt="avatar"/><h3>{{ name }}</h3>
+			<img :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/><h3>{{ note.user | userName }}</h3>
 		</header>
 		<div>
 			{{ text }}
@@ -15,18 +15,10 @@
 <script lang="ts">
 import Vue from 'vue';
 import summary from '../../../../../renderers/get-note-summary';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['note'],
 	computed: {
-		acct() {
-			return getAcct(this.note.user);
-		},
-		name() {
-			return getUserName(this.note.user);
-		},
 		text(): string {
 			return summary(this.note);
 		}
diff --git a/src/client/app/mobile/views/components/note-detail.sub.vue b/src/client/app/mobile/views/components/note-detail.sub.vue
index 38aea4ba20..06f442d308 100644
--- a/src/client/app/mobile/views/components/note-detail.sub.vue
+++ b/src/client/app/mobile/views/components/note-detail.sub.vue
@@ -1,13 +1,13 @@
 <template>
 <div class="root sub">
-	<router-link class="avatar-anchor" :to="`/@${acct}`">
+	<router-link class="avatar-anchor" :to="note.user | userPage">
 		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${acct}`">{{ getUserName(note.user) }}</router-link>
-			<span class="username">@{{ acct }}</span>
-			<router-link class="time" :to="`/@${acct}/${note.id}`">
+			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
+			<span class="username">@{{ note.user | acct }}</span>
+			<router-link class="time" :to="note | notePage">
 				<mk-time :time="note.createdAt"/>
 			</router-link>
 		</header>
@@ -20,19 +20,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
-	props: ['note'],
-	computed: {
-		acct() {
-			return getAcct(this.note.user);
-		},
-		name() {
-			return getUserName(this.note.user);
-		}
-	}
+	props: ['note']
 });
 </script>
 
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 483f5aaf3b..de32f0a748 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -17,24 +17,20 @@
 	</div>
 	<div class="renote" v-if="isRenote">
 		<p>
-			<router-link class="avatar-anchor" :to="`/@${acct}`">
+			<router-link class="avatar-anchor" :to="note.user | userPage">
 				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
 			</router-link>
-			%fa:retweet%
-			<router-link class="name" :to="`/@${acct}`">
-				{{ name }}
-			</router-link>
-			がRenote
+			%fa:retweet%<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>がRenote
 		</p>
 	</div>
 	<article>
 		<header>
-			<router-link class="avatar-anchor" :to="`/@${pAcct}`">
+			<router-link class="avatar-anchor" :to="p.user | userPage">
 				<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 			</router-link>
 			<div>
-				<router-link class="name" :to="`/@${pAcct}`">{{ pName }}</router-link>
-				<span class="username">@{{ pAcct }}</span>
+				<router-link class="name" :to="p.user | userPage">{{ p.user | userName }}</router-link>
+				<span class="username">@{{ p.user | acct }}</span>
 			</div>
 		</header>
 		<div class="body">
@@ -80,8 +76,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 import parse from '../../../../../text/parse';
 
 import MkNoteMenu from '../../../common/views/components/note-menu.vue';
@@ -112,18 +106,6 @@ export default Vue.extend({
 	},
 
 	computed: {
-		acct(): string {
-			return getAcct(this.note.user);
-		},
-		name(): string {
-			return getUserName(this.note.user);
-		},
-		pAcct(): string {
-			return getAcct(this.p.user);
-		},
-		pName(): string {
-			return getUserName(this.p.user);
-		},
 		isRenote(): boolean {
 			return (this.note.renote &&
 				this.note.text == null &&
diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue
index 8c8d8645bb..b9a6db315d 100644
--- a/src/client/app/mobile/views/components/note-preview.vue
+++ b/src/client/app/mobile/views/components/note-preview.vue
@@ -1,13 +1,13 @@
 <template>
 <div class="mk-note-preview">
-	<router-link class="avatar-anchor" :to="`/@${acct}`">
+	<router-link class="avatar-anchor" :to="note.user | userPage">
 		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${acct}`">{{ name }}</router-link>
-			<span class="username">@{{ acct }}</span>
-			<router-link class="time" :to="`/@${acct}/${note.id}`">
+			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
+			<span class="username">@{{ note.user | acct }}</span>
+			<router-link class="time" :to="note | notePage">
 				<mk-time :time="note.createdAt"/>
 			</router-link>
 		</header>
@@ -20,19 +20,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
-	props: ['note'],
-	computed: {
-		acct() {
-			return getAcct(this.note.user);
-		},
-		name() {
-			return getUserName(this.note.user);
-		}
-	}
+	props: ['note']
 });
 </script>
 
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index 96f8265cc2..d489f3a053 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -1,13 +1,13 @@
 <template>
 <div class="sub">
-	<router-link class="avatar-anchor" :to="`/@${getAcct(note.user)}`">
+	<router-link class="avatar-anchor" :to="note.user | userPage">
 		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=96`" alt="avatar"/>
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${getAcct(note.user)}`">{{ getUserName(note.user) }}</router-link>
-			<span class="username">@{{ getAcct(note.user) }}</span>
-			<router-link class="created-at" :to="`/@${getAcct(note.user)}/${note.id}`">
+			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
+			<span class="username">@{{ note.user | acct }}</span>
+			<router-link class="created-at" :to="note | notePage">
 				<mk-time :time="note.createdAt"/>
 			</router-link>
 		</header>
@@ -20,17 +20,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
-	props: ['note'],
-	data() {
-		return {
-			getAcct,
-			getUserName
-		};
-	}
+	props: ['note']
 });
 </script>
 
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 295fe4d6a8..033de4f429 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -5,28 +5,28 @@
 	</div>
 	<div class="renote" v-if="isRenote">
 		<p>
-			<router-link class="avatar-anchor" :to="`/@${getAcct(note.user)}`">
+			<router-link class="avatar-anchor" :to="note.user | userPage">
 				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 			</router-link>
 			%fa:retweet%
 			<span>{{ '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.substr(0, '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.indexOf('{')) }}</span>
-			<router-link class="name" :to="`/@${getAcct(note.user)}`">{{ getUserName(note.user) }}</router-link>
+			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
 			<span>{{ '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.substr('%i18n:mobile.tags.mk-timeline-note.reposted-by%'.indexOf('}') + 1) }}</span>
 		</p>
 		<mk-time :time="note.createdAt"/>
 	</div>
 	<article>
-		<router-link class="avatar-anchor" :to="`/@${getAcct(p.user)}`">
+		<router-link class="avatar-anchor" :to="p.user | userPage">
 			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=96`" alt="avatar"/>
 		</router-link>
 		<div class="main">
 			<header>
-				<router-link class="name" :to="`/@${getAcct(p.user)}`">{{ getUserName(p.user) }}</router-link>
+				<router-link class="name" :to="p.user | userPage">{{ p.user | userName }}</router-link>
 				<span class="is-bot" v-if="p.user.host === null && p.user.isBot">bot</span>
-				<span class="username">@{{ getAcct(p.user) }}</span>
+				<span class="username">@{{ p.user | acct }}</span>
 				<div class="info">
 					<span class="mobile" v-if="p.viaMobile">%fa:mobile-alt%</span>
-					<router-link class="created-at" :to="url">
+					<router-link class="created-at" :to="p | notePage">
 						<mk-time :time="p.createdAt"/>
 					</router-link>
 				</div>
@@ -77,8 +77,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 import parse from '../../../../../text/parse';
 
 import MkNoteMenu from '../../../common/views/components/note-menu.vue';
@@ -95,9 +93,7 @@ export default Vue.extend({
 	data() {
 		return {
 			connection: null,
-			connectionId: null,
-			getAcct,
-			getUserName
+			connectionId: null
 		};
 	},
 
@@ -118,9 +114,6 @@ export default Vue.extend({
 					.reduce((a, b) => a + b)
 				: 0;
 		},
-		url(): string {
-			return `/@${this.pAcct}/${this.p.id}`;
-		},
 		urls(): string[] {
 			if (this.p.text) {
 				const ast = parse(this.p.text);
diff --git a/src/client/app/mobile/views/components/notification-preview.vue b/src/client/app/mobile/views/components/notification-preview.vue
index f0921f91d6..d39b2fbf9f 100644
--- a/src/client/app/mobile/views/components/notification-preview.vue
+++ b/src/client/app/mobile/views/components/notification-preview.vue
@@ -3,7 +3,7 @@
 	<template v-if="notification.type == 'reaction'">
 		<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
-			<p><mk-reaction-icon :reaction="notification.reaction"/>{{ getUserName(notification.user) }}</p>
+			<p><mk-reaction-icon :reaction="notification.reaction"/>{{ notification.user | userName }}</p>
 			<p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%</p>
 		</div>
 	</template>
@@ -11,7 +11,7 @@
 	<template v-if="notification.type == 'renote'">
 		<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
-			<p>%fa:retweet%{{ getUserName(notification.note.user) }}</p>
+			<p>%fa:retweet%{{ notification.note.user | userName }}</p>
 			<p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%</p>
 		</div>
 	</template>
@@ -19,7 +19,7 @@
 	<template v-if="notification.type == 'quote'">
 		<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
-			<p>%fa:quote-left%{{ getUserName(notification.note.user) }}</p>
+			<p>%fa:quote-left%{{ notification.note.user | userName }}</p>
 			<p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
 		</div>
 	</template>
@@ -27,14 +27,14 @@
 	<template v-if="notification.type == 'follow'">
 		<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
-			<p>%fa:user-plus%{{ getUserName(notification.user) }}</p>
+			<p>%fa:user-plus%{{ notification.user | userName }}</p>
 		</div>
 	</template>
 
 	<template v-if="notification.type == 'reply'">
 		<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
-			<p>%fa:reply%{{ getUserName(notification.note.user) }}</p>
+			<p>%fa:reply%{{ notification.note.user | userName }}</p>
 			<p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
 		</div>
 	</template>
@@ -42,7 +42,7 @@
 	<template v-if="notification.type == 'mention'">
 		<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
-			<p>%fa:at%{{ getUserName(notification.note.user) }}</p>
+			<p>%fa:at%{{ notification.note.user | userName }}</p>
 			<p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
 		</div>
 	</template>
@@ -50,7 +50,7 @@
 	<template v-if="notification.type == 'poll_vote'">
 		<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		<div class="text">
-			<p>%fa:chart-pie%{{ getUserName(notification.user) }}</p>
+			<p>%fa:chart-pie%{{ notification.user | userName }}</p>
 			<p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%</p>
 		</div>
 	</template>
@@ -60,14 +60,12 @@
 <script lang="ts">
 import Vue from 'vue';
 import getNoteSummary from '../../../../../renderers/get-note-summary';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['notification'],
 	data() {
 		return {
-			getNoteSummary,
-			getUserName
+			getNoteSummary
 		};
 	}
 });
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index 4c98e19901..5456c2c174 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -2,13 +2,13 @@
 <div class="mk-notification">
 	<div class="notification reaction" v-if="notification.type == 'reaction'">
 		<mk-time :time="notification.createdAt"/>
-		<router-link class="avatar-anchor" :to="`/@${getAcct(notification.user)}`">
+		<router-link class="avatar-anchor" :to="notification.user | userPage">
 			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
 		<div class="text">
 			<p>
 				<mk-reaction-icon :reaction="notification.reaction"/>
-				<router-link :to="`/@${getAcct(notification.user)}`">{{ getUserName(notification.user) }}</router-link>
+				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 			</p>
 			<router-link class="note-ref" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">
 				%fa:quote-left%{{ getNoteSummary(notification.note) }}
@@ -19,13 +19,13 @@
 
 	<div class="notification renote" v-if="notification.type == 'renote'">
 		<mk-time :time="notification.createdAt"/>
-		<router-link class="avatar-anchor" :to="`/@${getAcct(notification.user)}`">
+		<router-link class="avatar-anchor" :to="notification.user | userPage">
 			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
 		<div class="text">
 			<p>
 				%fa:retweet%
-				<router-link :to="`/@${getAcct(notification.user)}`">{{ getUserName(notification.user) }}</router-link>
+				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 			</p>
 			<router-link class="note-ref" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">
 				%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
@@ -39,13 +39,13 @@
 
 	<div class="notification follow" v-if="notification.type == 'follow'">
 		<mk-time :time="notification.createdAt"/>
-		<router-link class="avatar-anchor" :to="`/@${getAcct(notification.user)}`">
+		<router-link class="avatar-anchor" :to="notification.user | userPage">
 			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
 		<div class="text">
 			<p>
 				%fa:user-plus%
-				<router-link :to="`/@${getAcct(notification.user)}`">{{ getUserName(notification.user) }}</router-link>
+				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 			</p>
 		</div>
 	</div>
@@ -60,13 +60,13 @@
 
 	<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
 		<mk-time :time="notification.createdAt"/>
-		<router-link class="avatar-anchor" :to="`/@${getAcct(notification.user)}`">
+		<router-link class="avatar-anchor" :to="notification.user | userPage">
 			<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
 		<div class="text">
 			<p>
 				%fa:chart-pie%
-				<router-link :to="`/@${getAcct(notification.user)}`">{{ getUserName(notification.user) }}</router-link>
+				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 			</p>
 			<router-link class="note-ref" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">
 				%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
@@ -79,16 +79,12 @@
 <script lang="ts">
 import Vue from 'vue';
 import getNoteSummary from '../../../../../renderers/get-note-summary';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['notification'],
 	data() {
 		return {
-			getNoteSummary,
-			getAcct,
-			getUserName
+			getNoteSummary
 		};
 	}
 });
diff --git a/src/client/app/mobile/views/components/post-card.vue b/src/client/app/mobile/views/components/post-card.vue
new file mode 100644
index 0000000000..393fa9b831
--- /dev/null
+++ b/src/client/app/mobile/views/components/post-card.vue
@@ -0,0 +1,85 @@
+<template>
+<div class="mk-note-card">
+	<a :href="note | notePage">
+		<header>
+			<img :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/><h3>{{ note.user | userName }}</h3>
+		</header>
+		<div>
+			{{ text }}
+		</div>
+		<mk-time :time="note.createdAt"/>
+	</a>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import summary from '../../../../../renderers/get-note-summary';
+
+export default Vue.extend({
+	props: ['note'],
+	computed: {
+		text(): string {
+			return summary(this.note);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-note-card
+	display inline-block
+	width 150px
+	//height 120px
+	font-size 12px
+	background #fff
+	border-radius 4px
+
+	> a
+		display block
+		color #2c3940
+
+		&:hover
+			text-decoration none
+
+		> header
+			> img
+				position absolute
+				top 8px
+				left 8px
+				width 28px
+				height 28px
+				border-radius 6px
+
+			> h3
+				display inline-block
+				overflow hidden
+				width calc(100% - 45px)
+				margin 8px 0 0 42px
+				line-height 28px
+				white-space nowrap
+				text-overflow ellipsis
+				font-size 12px
+
+		> div
+			padding 2px 8px 8px 8px
+			height 60px
+			overflow hidden
+			white-space normal
+
+			&:after
+				content ""
+				display block
+				position absolute
+				top 40px
+				left 0
+				width 100%
+				height 20px
+				background linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%)
+
+		> .mk-time
+			display inline-block
+			padding 8px
+			color #aaa
+
+</style>
diff --git a/src/client/app/mobile/views/components/post-detail.sub.vue b/src/client/app/mobile/views/components/post-detail.sub.vue
new file mode 100644
index 0000000000..06f442d308
--- /dev/null
+++ b/src/client/app/mobile/views/components/post-detail.sub.vue
@@ -0,0 +1,103 @@
+<template>
+<div class="root sub">
+	<router-link class="avatar-anchor" :to="note.user | userPage">
+		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+	</router-link>
+	<div class="main">
+		<header>
+			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
+			<span class="username">@{{ note.user | acct }}</span>
+			<router-link class="time" :to="note | notePage">
+				<mk-time :time="note.createdAt"/>
+			</router-link>
+		</header>
+		<div class="body">
+			<mk-sub-note-content class="text" :note="note"/>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['note']
+});
+</script>
+
+<style lang="stylus" scoped>
+.root.sub
+	padding 8px
+	font-size 0.9em
+	background #fdfdfd
+
+	@media (min-width 500px)
+		padding 12px
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	&:hover
+		> .main > footer > button
+			color #888
+
+	> .avatar-anchor
+		display block
+		float left
+		margin 0 12px 0 0
+
+		> .avatar
+			display block
+			width 48px
+			height 48px
+			margin 0
+			border-radius 8px
+			vertical-align bottom
+
+	> .main
+		float left
+		width calc(100% - 60px)
+
+		> header
+			display flex
+			margin-bottom 4px
+			white-space nowrap
+
+			> .name
+				display block
+				margin 0 .5em 0 0
+				padding 0
+				overflow hidden
+				color #607073
+				font-size 1em
+				font-weight 700
+				text-align left
+				text-decoration none
+				text-overflow ellipsis
+
+				&:hover
+					text-decoration underline
+
+			> .username
+				text-align left
+				margin 0 .5em 0 0
+				color #d1d8da
+
+			> .time
+				margin-left auto
+				color #b2b8bb
+
+		> .body
+
+			> .text
+				cursor default
+				margin 0
+				padding 0
+				font-size 1.1em
+				color #717171
+
+</style>
+
diff --git a/src/client/app/mobile/views/components/post-detail.vue b/src/client/app/mobile/views/components/post-detail.vue
new file mode 100644
index 0000000000..de32f0a748
--- /dev/null
+++ b/src/client/app/mobile/views/components/post-detail.vue
@@ -0,0 +1,444 @@
+<template>
+<div class="mk-note-detail">
+	<button
+		class="more"
+		v-if="p.reply && p.reply.replyId && context == null"
+		@click="fetchContext"
+		:disabled="fetchingContext"
+	>
+		<template v-if="!contextFetching">%fa:ellipsis-v%</template>
+		<template v-if="contextFetching">%fa:spinner .pulse%</template>
+	</button>
+	<div class="context">
+		<x-sub v-for="note in context" :key="note.id" :note="note"/>
+	</div>
+	<div class="reply-to" v-if="p.reply">
+		<x-sub :note="p.reply"/>
+	</div>
+	<div class="renote" v-if="isRenote">
+		<p>
+			<router-link class="avatar-anchor" :to="note.user | userPage">
+				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
+			</router-link>
+			%fa:retweet%<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>がRenote
+		</p>
+	</div>
+	<article>
+		<header>
+			<router-link class="avatar-anchor" :to="p.user | userPage">
+				<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+			</router-link>
+			<div>
+				<router-link class="name" :to="p.user | userPage">{{ p.user | userName }}</router-link>
+				<span class="username">@{{ p.user | acct }}</span>
+			</div>
+		</header>
+		<div class="body">
+			<mk-note-html v-if="p.text" :ast="p.text" :i="os.i" :class="$style.text"/>
+			<div class="tags" v-if="p.tags && p.tags.length > 0">
+				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
+			</div>
+			<div class="media" v-if="p.media.length > 0">
+				<mk-media-list :media-list="p.media"/>
+			</div>
+			<mk-poll v-if="p.poll" :note="p"/>
+			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+			<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
+			<div class="map" v-if="p.geo" ref="map"></div>
+			<div class="renote" v-if="p.renote">
+				<mk-note-preview :note="p.renote"/>
+			</div>
+		</div>
+		<router-link class="time" :to="`/@${pAcct}/${p.id}`">
+			<mk-time :time="p.createdAt" mode="detail"/>
+		</router-link>
+		<footer>
+			<mk-reactions-viewer :note="p"/>
+			<button @click="reply" title="%i18n:mobile.tags.mk-note-detail.reply%">
+				%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
+			</button>
+			<button @click="renote" title="Renote">
+				%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
+			</button>
+			<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:mobile.tags.mk-note-detail.reaction%">
+				%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
+			</button>
+			<button @click="menu" ref="menuButton">
+				%fa:ellipsis-h%
+			</button>
+		</footer>
+	</article>
+	<div class="replies" v-if="!compact">
+		<x-sub v-for="note in replies" :key="note.id" :note="note"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import parse from '../../../../../text/parse';
+
+import MkNoteMenu from '../../../common/views/components/note-menu.vue';
+import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
+import XSub from './note-detail.sub.vue';
+
+export default Vue.extend({
+	components: {
+		XSub
+	},
+
+	props: {
+		note: {
+			type: Object,
+			required: true
+		},
+		compact: {
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			context: [],
+			contextFetching: false,
+			replies: []
+		};
+	},
+
+	computed: {
+		isRenote(): boolean {
+			return (this.note.renote &&
+				this.note.text == null &&
+				this.note.mediaIds.length == 0 &&
+				this.note.poll == null);
+		},
+		p(): any {
+			return this.isRenote ? this.note.renote : this.note;
+		},
+		reactionsCount(): number {
+			return this.p.reactionCounts
+				? Object.keys(this.p.reactionCounts)
+					.map(key => this.p.reactionCounts[key])
+					.reduce((a, b) => a + b)
+				: 0;
+		},
+		urls(): string[] {
+			if (this.p.text) {
+				const ast = parse(this.p.text);
+				return ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
+		}
+	},
+
+	mounted() {
+		// Get replies
+		if (!this.compact) {
+			(this as any).api('notes/replies', {
+				noteId: this.p.id,
+				limit: 8
+			}).then(replies => {
+				this.replies = replies;
+			});
+		}
+
+		// Draw map
+		if (this.p.geo) {
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
+			if (shouldShowMap) {
+				(this as any).os.getGoogleMaps().then(maps => {
+					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
+					const map = new maps.Map(this.$refs.map, {
+						center: uluru,
+						zoom: 15
+					});
+					new maps.Marker({
+						position: uluru,
+						map: map
+					});
+				});
+			}
+		}
+	},
+
+	methods: {
+		fetchContext() {
+			this.contextFetching = true;
+
+			// Fetch context
+			(this as any).api('notes/context', {
+				noteId: this.p.replyId
+			}).then(context => {
+				this.contextFetching = false;
+				this.context = context.reverse();
+			});
+		},
+		reply() {
+			(this as any).apis.post({
+				reply: this.p
+			});
+		},
+		renote() {
+			(this as any).apis.post({
+				renote: this.p
+			});
+		},
+		react() {
+			(this as any).os.new(MkReactionPicker, {
+				source: this.$refs.reactButton,
+				note: this.p,
+				compact: true
+			});
+		},
+		menu() {
+			(this as any).os.new(MkNoteMenu, {
+				source: this.$refs.menuButton,
+				note: this.p,
+				compact: true
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-note-detail
+	overflow hidden
+	margin 0 auto
+	padding 0
+	width 100%
+	text-align left
+	background #fff
+	border-radius 8px
+	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
+
+	> .fetching
+		padding 64px 0
+
+	> .more
+		display block
+		margin 0
+		padding 10px 0
+		width 100%
+		font-size 1em
+		text-align center
+		color #999
+		cursor pointer
+		background #fafafa
+		outline none
+		border none
+		border-bottom solid 1px #eef0f2
+		border-radius 6px 6px 0 0
+		box-shadow none
+
+		&:hover
+			background #f6f6f6
+
+		&:active
+			background #f0f0f0
+
+		&:disabled
+			color #ccc
+
+	> .context
+		> *
+			border-bottom 1px solid #eef0f2
+
+	> .renote
+		color #9dbb00
+		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+
+		> p
+			margin 0
+			padding 16px 32px
+
+			.avatar-anchor
+				display inline-block
+
+				.avatar
+					vertical-align bottom
+					min-width 28px
+					min-height 28px
+					max-width 28px
+					max-height 28px
+					margin 0 8px 0 0
+					border-radius 6px
+
+			[data-fa]
+				margin-right 4px
+
+			.name
+				font-weight bold
+
+		& + article
+			padding-top 8px
+
+	> .reply-to
+		border-bottom 1px solid #eef0f2
+
+	> article
+		padding 14px 16px 9px 16px
+
+		@media (min-width 500px)
+			padding 28px 32px 18px 32px
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		&:hover
+			> .main > footer > button
+				color #888
+
+		> header
+			display flex
+			line-height 1.1
+
+			> .avatar-anchor
+				display block
+				padding 0 .5em 0 0
+
+				> .avatar
+					display block
+					width 54px
+					height 54px
+					margin 0
+					border-radius 8px
+					vertical-align bottom
+
+					@media (min-width 500px)
+						width 60px
+						height 60px
+
+			> div
+
+				> .name
+					display inline-block
+					margin .4em 0
+					color #777
+					font-size 16px
+					font-weight bold
+					text-align left
+					text-decoration none
+
+					&:hover
+						text-decoration underline
+
+				> .username
+					display block
+					text-align left
+					margin 0
+					color #ccc
+
+		> .body
+			padding 8px 0
+
+			> .renote
+				margin 8px 0
+
+				> .mk-note-preview
+					padding 16px
+					border dashed 1px #c0dac6
+					border-radius 8px
+
+			> .location
+				margin 4px 0
+				font-size 12px
+				color #ccc
+
+			> .map
+				width 100%
+				height 200px
+
+				&:empty
+					display none
+
+			> .mk-url-preview
+				margin-top 8px
+
+			> .media
+				> img
+					display block
+					max-width 100%
+
+			> .tags
+				margin 4px 0 0 0
+
+				> *
+					display inline-block
+					margin 0 8px 0 0
+					padding 2px 8px 2px 16px
+					font-size 90%
+					color #8d969e
+					background #edf0f3
+					border-radius 4px
+
+					&:before
+						content ""
+						display block
+						position absolute
+						top 0
+						bottom 0
+						left 4px
+						width 8px
+						height 8px
+						margin auto 0
+						background #fff
+						border-radius 100%
+
+		> .time
+			font-size 16px
+			color #c0c0c0
+
+		> footer
+			font-size 1.2em
+
+			> button
+				margin 0
+				padding 8px
+				background transparent
+				border none
+				box-shadow none
+				font-size 1em
+				color #ddd
+				cursor pointer
+
+				&:not(:last-child)
+					margin-right 28px
+
+				&:hover
+					color #666
+
+				> .count
+					display inline
+					margin 0 0 0 8px
+					color #999
+
+				&.reacted
+					color $theme-color
+
+	> .replies
+		> *
+			border-top 1px solid #eef0f2
+
+</style>
+
+<style lang="stylus" module>
+.text
+	display block
+	margin 0
+	padding 0
+	overflow-wrap break-word
+	font-size 16px
+	color #717171
+
+	@media (min-width 500px)
+		font-size 24px
+
+</style>
diff --git a/src/client/app/mobile/views/components/post-preview.vue b/src/client/app/mobile/views/components/post-preview.vue
new file mode 100644
index 0000000000..b9a6db315d
--- /dev/null
+++ b/src/client/app/mobile/views/components/post-preview.vue
@@ -0,0 +1,100 @@
+<template>
+<div class="mk-note-preview">
+	<router-link class="avatar-anchor" :to="note.user | userPage">
+		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+	</router-link>
+	<div class="main">
+		<header>
+			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
+			<span class="username">@{{ note.user | acct }}</span>
+			<router-link class="time" :to="note | notePage">
+				<mk-time :time="note.createdAt"/>
+			</router-link>
+		</header>
+		<div class="body">
+			<mk-sub-note-content class="text" :note="note"/>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['note']
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-note-preview
+	margin 0
+	padding 0
+	font-size 0.9em
+	background #fff
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	&:hover
+		> .main > footer > button
+			color #888
+
+	> .avatar-anchor
+		display block
+		float left
+		margin 0 12px 0 0
+
+		> .avatar
+			display block
+			width 48px
+			height 48px
+			margin 0
+			border-radius 8px
+			vertical-align bottom
+
+	> .main
+		float left
+		width calc(100% - 60px)
+
+		> header
+			display flex
+			margin-bottom 4px
+			white-space nowrap
+
+			> .name
+				display block
+				margin 0 .5em 0 0
+				padding 0
+				overflow hidden
+				color #607073
+				font-size 1em
+				font-weight 700
+				text-align left
+				text-decoration none
+				text-overflow ellipsis
+
+				&:hover
+					text-decoration underline
+
+			> .username
+				text-align left
+				margin 0 .5em 0 0
+				color #d1d8da
+
+			> .time
+				margin-left auto
+				color #b2b8bb
+
+		> .body
+
+			> .text
+				cursor default
+				margin 0
+				padding 0
+				font-size 1.1em
+				color #717171
+
+</style>
diff --git a/src/client/app/mobile/views/components/post.vue b/src/client/app/mobile/views/components/post.vue
new file mode 100644
index 0000000000..033de4f429
--- /dev/null
+++ b/src/client/app/mobile/views/components/post.vue
@@ -0,0 +1,523 @@
+<template>
+<div class="note" :class="{ renote: isRenote }">
+	<div class="reply-to" v-if="p.reply">
+		<x-sub :note="p.reply"/>
+	</div>
+	<div class="renote" v-if="isRenote">
+		<p>
+			<router-link class="avatar-anchor" :to="note.user | userPage">
+				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+			</router-link>
+			%fa:retweet%
+			<span>{{ '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.substr(0, '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.indexOf('{')) }}</span>
+			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
+			<span>{{ '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.substr('%i18n:mobile.tags.mk-timeline-note.reposted-by%'.indexOf('}') + 1) }}</span>
+		</p>
+		<mk-time :time="note.createdAt"/>
+	</div>
+	<article>
+		<router-link class="avatar-anchor" :to="p.user | userPage">
+			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=96`" alt="avatar"/>
+		</router-link>
+		<div class="main">
+			<header>
+				<router-link class="name" :to="p.user | userPage">{{ p.user | userName }}</router-link>
+				<span class="is-bot" v-if="p.user.host === null && p.user.isBot">bot</span>
+				<span class="username">@{{ p.user | acct }}</span>
+				<div class="info">
+					<span class="mobile" v-if="p.viaMobile">%fa:mobile-alt%</span>
+					<router-link class="created-at" :to="p | notePage">
+						<mk-time :time="p.createdAt"/>
+					</router-link>
+				</div>
+			</header>
+			<div class="body">
+				<p class="channel" v-if="p.channel != null"><a target="_blank">{{ p.channel.title }}</a>:</p>
+				<div class="text">
+					<a class="reply" v-if="p.reply">
+						%fa:reply%
+					</a>
+					<mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
+					<a class="rp" v-if="p.renote != null">RP:</a>
+				</div>
+				<div class="media" v-if="p.media.length > 0">
+					<mk-media-list :media-list="p.media"/>
+				</div>
+				<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
+				<div class="tags" v-if="p.tags && p.tags.length > 0">
+					<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
+				</div>
+				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+				<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
+				<div class="map" v-if="p.geo" ref="map"></div>
+				<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
+				<div class="renote" v-if="p.renote">
+					<mk-note-preview :note="p.renote"/>
+				</div>
+			</div>
+			<footer>
+				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
+				<button @click="reply">
+					%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
+				</button>
+				<button @click="renote" title="Renote">
+					%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
+				</button>
+				<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton">
+					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
+				</button>
+				<button class="menu" @click="menu" ref="menuButton">
+					%fa:ellipsis-h%
+				</button>
+			</footer>
+		</div>
+	</article>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import parse from '../../../../../text/parse';
+
+import MkNoteMenu from '../../../common/views/components/note-menu.vue';
+import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
+import XSub from './note.sub.vue';
+
+export default Vue.extend({
+	components: {
+		XSub
+	},
+
+	props: ['note'],
+
+	data() {
+		return {
+			connection: null,
+			connectionId: null
+		};
+	},
+
+	computed: {
+		isRenote(): boolean {
+			return (this.note.renote &&
+				this.note.text == null &&
+				this.note.mediaIds.length == 0 &&
+				this.note.poll == null);
+		},
+		p(): any {
+			return this.isRenote ? this.note.renote : this.note;
+		},
+		reactionsCount(): number {
+			return this.p.reactionCounts
+				? Object.keys(this.p.reactionCounts)
+					.map(key => this.p.reactionCounts[key])
+					.reduce((a, b) => a + b)
+				: 0;
+		},
+		urls(): string[] {
+			if (this.p.text) {
+				const ast = parse(this.p.text);
+				return ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
+		}
+	},
+
+	created() {
+		if ((this as any).os.isSignedIn) {
+			this.connection = (this as any).os.stream.getConnection();
+			this.connectionId = (this as any).os.stream.use();
+		}
+	},
+
+	mounted() {
+		this.capture(true);
+
+		if ((this as any).os.isSignedIn) {
+			this.connection.on('_connected_', this.onStreamConnected);
+		}
+
+		// Draw map
+		if (this.p.geo) {
+			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
+			if (shouldShowMap) {
+				(this as any).os.getGoogleMaps().then(maps => {
+					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
+					const map = new maps.Map(this.$refs.map, {
+						center: uluru,
+						zoom: 15
+					});
+					new maps.Marker({
+						position: uluru,
+						map: map
+					});
+				});
+			}
+		}
+	},
+
+	beforeDestroy() {
+		this.decapture(true);
+
+		if ((this as any).os.isSignedIn) {
+			this.connection.off('_connected_', this.onStreamConnected);
+			(this as any).os.stream.dispose(this.connectionId);
+		}
+	},
+
+	methods: {
+		capture(withHandler = false) {
+			if ((this as any).os.isSignedIn) {
+				this.connection.send({
+					type: 'capture',
+					id: this.p.id
+				});
+				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
+			}
+		},
+		decapture(withHandler = false) {
+			if ((this as any).os.isSignedIn) {
+				this.connection.send({
+					type: 'decapture',
+					id: this.p.id
+				});
+				if (withHandler) this.connection.off('note-updated', this.onStreamNoteUpdated);
+			}
+		},
+		onStreamConnected() {
+			this.capture();
+		},
+		onStreamNoteUpdated(data) {
+			const note = data.note;
+			if (note.id == this.note.id) {
+				this.$emit('update:note', note);
+			} else if (note.id == this.note.renoteId) {
+				this.note.renote = note;
+			}
+		},
+		reply() {
+			(this as any).apis.post({
+				reply: this.p
+			});
+		},
+		renote() {
+			(this as any).apis.post({
+				renote: this.p
+			});
+		},
+		react() {
+			(this as any).os.new(MkReactionPicker, {
+				source: this.$refs.reactButton,
+				note: this.p,
+				compact: true
+			});
+		},
+		menu() {
+			(this as any).os.new(MkNoteMenu, {
+				source: this.$refs.menuButton,
+				note: this.p,
+				compact: true
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.note
+	font-size 12px
+	border-bottom solid 1px #eaeaea
+
+	&:first-child
+		border-radius 8px 8px 0 0
+
+		> .renote
+			border-radius 8px 8px 0 0
+
+	&:last-of-type
+		border-bottom none
+
+	@media (min-width 350px)
+		font-size 14px
+
+	@media (min-width 500px)
+		font-size 16px
+
+	> .renote
+		color #9dbb00
+		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+
+		> p
+			margin 0
+			padding 8px 16px
+			line-height 28px
+
+			@media (min-width 500px)
+				padding 16px
+
+			.avatar-anchor
+				display inline-block
+
+				.avatar
+					vertical-align bottom
+					width 28px
+					height 28px
+					margin 0 8px 0 0
+					border-radius 6px
+
+			[data-fa]
+				margin-right 4px
+
+			.name
+				font-weight bold
+
+		> .mk-time
+			position absolute
+			top 8px
+			right 16px
+			font-size 0.9em
+			line-height 28px
+
+			@media (min-width 500px)
+				top 16px
+
+		& + article
+			padding-top 8px
+
+	> .reply-to
+		background rgba(0, 0, 0, 0.0125)
+
+		> .mk-note-preview
+			background transparent
+
+	> article
+		padding 14px 16px 9px 16px
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		> .avatar-anchor
+			display block
+			float left
+			margin 0 10px 8px 0
+			position -webkit-sticky
+			position sticky
+			top 62px
+
+			@media (min-width 500px)
+				margin-right 16px
+
+			> .avatar
+				display block
+				width 48px
+				height 48px
+				margin 0
+				border-radius 6px
+				vertical-align bottom
+
+				@media (min-width 500px)
+					width 58px
+					height 58px
+					border-radius 8px
+
+		> .main
+			float left
+			width calc(100% - 58px)
+
+			@media (min-width 500px)
+				width calc(100% - 74px)
+
+			> header
+				display flex
+				align-items center
+				white-space nowrap
+
+				@media (min-width 500px)
+					margin-bottom 2px
+
+				> .name
+					display block
+					margin 0 0.5em 0 0
+					padding 0
+					overflow hidden
+					color #627079
+					font-size 1em
+					font-weight bold
+					text-decoration none
+					text-overflow ellipsis
+
+					&:hover
+						text-decoration underline
+
+				> .is-bot
+					margin 0 0.5em 0 0
+					padding 1px 6px
+					font-size 12px
+					color #aaa
+					border solid 1px #ddd
+					border-radius 3px
+
+				> .username
+					margin 0 0.5em 0 0
+					color #ccc
+
+				> .info
+					margin-left auto
+					font-size 0.9em
+
+					> .mobile
+						margin-right 6px
+						color #c0c0c0
+
+					> .created-at
+						color #c0c0c0
+
+			> .body
+
+				> .text
+					display block
+					margin 0
+					padding 0
+					overflow-wrap break-word
+					font-size 1.1em
+					color #717171
+
+					>>> .quote
+						margin 8px
+						padding 6px 12px
+						color #aaa
+						border-left solid 3px #eee
+
+					> .reply
+						margin-right 8px
+						color #717171
+
+					> .rp
+						margin-left 4px
+						font-style oblique
+						color #a0bf46
+
+					[data-is-me]:after
+						content "you"
+						padding 0 4px
+						margin-left 4px
+						font-size 80%
+						color $theme-color-foreground
+						background $theme-color
+						border-radius 4px
+
+				.mk-url-preview
+					margin-top 8px
+
+				> .channel
+					margin 0
+
+				> .tags
+					margin 4px 0 0 0
+
+					> *
+						display inline-block
+						margin 0 8px 0 0
+						padding 2px 8px 2px 16px
+						font-size 90%
+						color #8d969e
+						background #edf0f3
+						border-radius 4px
+
+						&:before
+							content ""
+							display block
+							position absolute
+							top 0
+							bottom 0
+							left 4px
+							width 8px
+							height 8px
+							margin auto 0
+							background #fff
+							border-radius 100%
+
+				> .media
+					> img
+						display block
+						max-width 100%
+
+				> .location
+					margin 4px 0
+					font-size 12px
+					color #ccc
+
+				> .map
+					width 100%
+					height 200px
+
+					&:empty
+						display none
+
+				> .app
+					font-size 12px
+					color #ccc
+
+				> .mk-poll
+					font-size 80%
+
+				> .renote
+					margin 8px 0
+
+					> .mk-note-preview
+						padding 16px
+						border dashed 1px #c0dac6
+						border-radius 8px
+
+			> footer
+				> button
+					margin 0
+					padding 8px
+					background transparent
+					border none
+					box-shadow none
+					font-size 1em
+					color #ddd
+					cursor pointer
+
+					&:not(:last-child)
+						margin-right 28px
+
+					&:hover
+						color #666
+
+					> .count
+						display inline
+						margin 0 0 0 8px
+						color #999
+
+					&.reacted
+						color $theme-color
+
+					&.menu
+						@media (max-width 350px)
+							display none
+
+</style>
+
+<style lang="stylus" module>
+.text
+	code
+		padding 4px 8px
+		margin 0 0.5em
+		font-size 80%
+		color #525252
+		background #f8f8f8
+		border-radius 2px
+
+	pre > code
+		padding 16px
+		margin 0
+</style>
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index f664341cdd..f1b24bf2da 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -3,7 +3,7 @@
 	<mk-special-message/>
 	<div class="main" ref="main">
 		<div class="backdrop"></div>
-		<p ref="welcomeback" v-if="os.isSignedIn">おかえりなさい、<b>{{ name }}</b>さん</p>
+		<p ref="welcomeback" v-if="os.isSignedIn">おかえりなさい、<b>{{ os.i | userName }}</b>さん</p>
 		<div class="content" ref="mainContainer">
 			<button class="nav" @click="$parent.isDrawerOpening = true">%fa:bars%</button>
 			<template v-if="hasUnreadNotifications || hasUnreadMessagingMessages || hasGameInvitations">%fa:circle%</template>
@@ -19,15 +19,9 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as anime from 'animejs';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['func'],
-	computed: {
-		name() {
-			return getUserName(this.os.i);
-		}
-	},
 	data() {
 		return {
 			hasUnreadNotifications: false,
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index 61dd8ca9de..764f9374e6 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -11,7 +11,7 @@
 		<div class="body" v-if="isOpen">
 			<router-link class="me" v-if="os.isSignedIn" :to="`/@${os.i.username}`">
 				<img class="avatar" :src="`${os.i.avatarUrl}?thumbnail&size=128`" alt="avatar"/>
-				<p class="name">{{ name }}</p>
+				<p class="name">{{ os.i | userName }}</p>
 			</router-link>
 			<div class="links">
 				<ul>
@@ -39,16 +39,10 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { docsUrl, chUrl, lang } from '../../../config';
-import getUserName from '../../../../../renderers/get-user-name';
+import { docsUrl, lang } from '../../../config';
 
 export default Vue.extend({
 	props: ['isOpen'],
-	computed: {
-		name() {
-			return getUserName(this.os.i);
-		}
-	},
 	data() {
 		return {
 			hasUnreadNotifications: false,
@@ -56,8 +50,7 @@ export default Vue.extend({
 			hasGameInvitations: false,
 			connection: null,
 			connectionId: null,
-			aboutUrl: `${docsUrl}/${lang}/about`,
-			chUrl
+			aboutUrl: `${docsUrl}/${lang}/about`
 		};
 	},
 	mounted() {
diff --git a/src/client/app/mobile/views/components/user-card.vue b/src/client/app/mobile/views/components/user-card.vue
index e8698a62f0..432560a54a 100644
--- a/src/client/app/mobile/views/components/user-card.vue
+++ b/src/client/app/mobile/views/components/user-card.vue
@@ -1,31 +1,21 @@
 <template>
 <div class="mk-user-card">
 	<header :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=1024)` : ''">
-		<a :href="`/@${acct}`">
+		<a :href="user | userPage">
 			<img :src="`${user.avatarUrl}?thumbnail&size=200`" alt="avatar"/>
 		</a>
 	</header>
-	<a class="name" :href="`/@${acct}`" target="_blank">{{ name }}</a>
-	<p class="username">@{{ acct }}</p>
+	<a class="name" :href="user | userPage" target="_blank">{{ user | userName }}</a>
+	<p class="username">@{{ user | acct }}</p>
 	<mk-follow-button :user="user"/>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
-	props: ['user'],
-	computed: {
-		acct() {
-			return getAcct(this.user);
-		},
-		name() {
-			return getUserName(this.user);
-		}
-	}
+	props: ['user']
 });
 </script>
 
diff --git a/src/client/app/mobile/views/components/user-preview.vue b/src/client/app/mobile/views/components/user-preview.vue
index 72a6bcf8ad..23a83b5e3a 100644
--- a/src/client/app/mobile/views/components/user-preview.vue
+++ b/src/client/app/mobile/views/components/user-preview.vue
@@ -1,12 +1,12 @@
 <template>
 <div class="mk-user-preview">
-	<router-link class="avatar-anchor" :to="`/@${acct}`">
+	<router-link class="avatar-anchor" :to="user | userPage">
 		<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${acct}`">{{ name }}</router-link>
-			<span class="username">@{{ acct }}</span>
+			<router-link class="name" :to="user | userPage">{{ user | userName }}</router-link>
+			<span class="username">@{{ user | acct }}</span>
 		</header>
 		<div class="body">
 			<div class="description">{{ user.description }}</div>
@@ -17,19 +17,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
-	props: ['user'],
-	computed: {
-		acct() {
-			return getAcct(this.user);
-		},
-		name() {
-			return getUserName(this.user);
-		}
-	}
+	props: ['user']
 });
 </script>
 
diff --git a/src/client/app/mobile/views/pages/following.vue b/src/client/app/mobile/views/pages/following.vue
index cc2442e476..d0dcc117c2 100644
--- a/src/client/app/mobile/views/pages/following.vue
+++ b/src/client/app/mobile/views/pages/following.vue
@@ -20,7 +20,6 @@
 import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
 import parseAcct from '../../../../../acct/parse';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -30,8 +29,8 @@ export default Vue.extend({
 		};
 	},
 	computed: {
-		name() {
-			return getUserName(this.user);
+		name(): string {
+			return Vue.filter('userName')(this.user);
 		}
 	},
 	watch: {
diff --git a/src/client/app/mobile/views/pages/messaging-room.vue b/src/client/app/mobile/views/pages/messaging-room.vue
index ae6662dc04..3b6fb11db5 100644
--- a/src/client/app/mobile/views/pages/messaging-room.vue
+++ b/src/client/app/mobile/views/pages/messaging-room.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
 	<span slot="header">
-		<template v-if="user">%fa:R comments%{{ name }}</template>
+		<template v-if="user">%fa:R comments%{{ user | userName }}</template>
 		<template v-else><mk-ellipsis/></template>
 	</span>
 	<mk-messaging-room v-if="!fetching" :user="user" :is-naked="true"/>
@@ -11,7 +11,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import parseAcct from '../../../../../acct/parse';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -20,11 +19,6 @@ export default Vue.extend({
 			user: null
 		};
 	},
-	computed: {
-		name() {
-			return getUserName(this.user);
-		}
-	},
 	watch: {
 		$route: 'fetch'
 	},
@@ -39,7 +33,7 @@ export default Vue.extend({
 				this.user = user;
 				this.fetching = false;
 
-				document.title = `%i18n:mobile.tags.mk-messaging-room-page.message%: ${this.name} | Misskey`;
+				document.title = `%i18n:mobile.tags.mk-messaging-room-page.message%: ${Vue.filter('userName')(this.user)} | Misskey`;
 			});
 		}
 	}
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 58a9d4e37e..8d248f5cbf 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -20,7 +20,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import { version, codename } from '../../../config';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -30,8 +29,8 @@ export default Vue.extend({
 		};
 	},
 	computed: {
-		name() {
-			return getUserName(this.os.i);
+		name(): string {
+			return Vue.filter('userName')((this as any).os.i);
 		}
 	},
 	mounted() {
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index aac8b628bc..fb9220ee86 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header" v-if="!fetching">%fa:user% {{ user }}</span>
+	<span slot="header" v-if="!fetching">%fa:user% {{ user | userName }}</span>
 	<main v-if="!fetching">
 		<header>
 			<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=1024)` : ''"></div>
@@ -12,8 +12,8 @@
 					<mk-follow-button v-if="os.isSignedIn && os.i.id != user.id" :user="user"/>
 				</div>
 				<div class="title">
-					<h1>{{ getUserName(user) }}</h1>
-					<span class="username">@{{ getAcct(user) }}</span>
+					<h1>{{ user | userName }}</h1>
+					<span class="username">@{{ user | acct }}</span>
 					<span class="followed" v-if="user.isFollowed">%i18n:mobile.tags.mk-user.follows-you%</span>
 				</div>
 				<div class="description">{{ user.description }}</div>
@@ -61,8 +61,6 @@
 import Vue from 'vue';
 import * as age from 's-age';
 import parseAcct from '../../../../../acct/parse';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 import Progress from '../../../common/scripts/loading';
 import XHome from './user/home.vue';
 
@@ -74,9 +72,7 @@ export default Vue.extend({
 		return {
 			fetching: true,
 			user: null,
-			page: 'home',
-			getAcct,
-			getUserName
+			page: 'home'
 		};
 	},
 	computed: {
@@ -102,7 +98,7 @@ export default Vue.extend({
 				this.fetching = false;
 
 				Progress.done();
-				document.title = this.getUserName(this.user) + ' | Misskey';
+				document.title = Vue.filter('userName')(this.user) + ' | Misskey';
 			});
 		}
 	}
diff --git a/src/client/app/mobile/views/pages/user/home.followers-you-know.vue b/src/client/app/mobile/views/pages/user/home.followers-you-know.vue
index 1b128e2f24..2841c0d63a 100644
--- a/src/client/app/mobile/views/pages/user/home.followers-you-know.vue
+++ b/src/client/app/mobile/views/pages/user/home.followers-you-know.vue
@@ -2,8 +2,8 @@
 <div class="root followers-you-know">
 	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-followers-you-know.loading%<mk-ellipsis/></p>
 	<div v-if="!fetching && users.length > 0">
-		<a v-for="user in users" :key="user.id" :href="`/@${getAcct(user)}`">
-			<img :src="`${user.avatarUrl}?thumbnail&size=64`" :alt="getUserName(user)"/>
+		<a v-for="user in users" :key="user.id" :href="user | userPage">
+			<img :src="`${user.avatarUrl}?thumbnail&size=64`" :alt="user | userName"/>
 		</a>
 	</div>
 	<p class="empty" v-if="!fetching && users.length == 0">%i18n:mobile.tags.mk-user-overview-followers-you-know.no-users%</p>
@@ -12,8 +12,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../acct/render';
-import getUserName from '../../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['user'],
@@ -23,14 +21,6 @@ export default Vue.extend({
 			users: []
 		};
 	},
-	computed: {
-		name() {
-			return getUserName(this.user);
-		}
-	},
-	methods: {
-		getAcct
-	},
 	mounted() {
 		(this as any).api('users/followers', {
 			userId: this.user.id,
diff --git a/src/client/app/mobile/views/widgets/profile.vue b/src/client/app/mobile/views/widgets/profile.vue
index bd257a3ff3..502f886ceb 100644
--- a/src/client/app/mobile/views/widgets/profile.vue
+++ b/src/client/app/mobile/views/widgets/profile.vue
@@ -8,23 +8,16 @@
 			:src="`${os.i.avatarUrl}?thumbnail&size=96`"
 			alt="avatar"
 		/>
-		<router-link :class="$style.name" :to="`/@${os.i.username}`">{{ name }}</router-link>
+		<router-link :class="$style.name" :to="os.i | userPage">{{ os.i | userName }}</router-link>
 	</mk-widget-container>
 </div>
 </template>
 
 <script lang="ts">
 import define from '../../../common/define-widget';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default define({
 	name: 'profile'
-}).extend({
-	computed: {
-		name() {
-			return getUserName(this.os.i);
-		}
-	}
 });
 </script>
 
-- 
cgit v1.3.1-freya


From 47fc8f63be28b264aef9957ea57ef440c3e30e5f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 9 Apr 2018 18:56:31 +0900
Subject: oops

---
 .../desktop/views/components/post-detail.sub.vue   | 122 -----
 .../app/desktop/views/components/post-detail.vue   | 434 ---------------
 .../app/desktop/views/components/post-preview.vue  |  99 ----
 .../desktop/views/components/posts.post.sub.vue    | 108 ----
 .../app/desktop/views/components/posts.post.vue    | 585 ---------------------
 .../desktop/views/widgets/channel.channel.post.vue |  65 ---
 .../app/mobile/views/components/post-card.vue      |  85 ---
 .../mobile/views/components/post-detail.sub.vue    | 103 ----
 .../app/mobile/views/components/post-detail.vue    | 444 ----------------
 .../app/mobile/views/components/post-preview.vue   | 100 ----
 src/client/app/mobile/views/components/post.vue    | 523 ------------------
 11 files changed, 2668 deletions(-)
 delete mode 100644 src/client/app/desktop/views/components/post-detail.sub.vue
 delete mode 100644 src/client/app/desktop/views/components/post-detail.vue
 delete mode 100644 src/client/app/desktop/views/components/post-preview.vue
 delete mode 100644 src/client/app/desktop/views/components/posts.post.sub.vue
 delete mode 100644 src/client/app/desktop/views/components/posts.post.vue
 delete mode 100644 src/client/app/desktop/views/widgets/channel.channel.post.vue
 delete mode 100644 src/client/app/mobile/views/components/post-card.vue
 delete mode 100644 src/client/app/mobile/views/components/post-detail.sub.vue
 delete mode 100644 src/client/app/mobile/views/components/post-detail.vue
 delete mode 100644 src/client/app/mobile/views/components/post-preview.vue
 delete mode 100644 src/client/app/mobile/views/components/post.vue

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/desktop/views/components/post-detail.sub.vue b/src/client/app/desktop/views/components/post-detail.sub.vue
deleted file mode 100644
index 16bc2a1d98..0000000000
--- a/src/client/app/desktop/views/components/post-detail.sub.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-<div class="sub" :title="title">
-	<router-link class="avatar-anchor" :to="note.user | userPage">
-		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
-	</router-link>
-	<div class="main">
-		<header>
-			<div class="left">
-				<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
-				<span class="username">@{{ note.user | acct }}</span>
-			</div>
-			<div class="right">
-				<router-link class="time" :to="note | notePage">
-					<mk-time :time="note.createdAt"/>
-				</router-link>
-			</div>
-		</header>
-		<div class="body">
-			<mk-note-html v-if="note.text" :text="note.text" :i="os.i" :class="$style.text"/>
-			<div class="media" v-if="note.media > 0">
-				<mk-media-list :media-list="note.media"/>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import dateStringify from '../../../common/scripts/date-stringify';
-
-export default Vue.extend({
-	props: ['note'],
-	computed: {
-		title(): string {
-			return dateStringify(this.note.createdAt);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.sub
-	margin 0
-	padding 20px 32px
-	background #fdfdfd
-
-	&:after
-		content ""
-		display block
-		clear both
-
-	&:hover
-		> .main > footer > button
-			color #888
-
-	> .avatar-anchor
-		display block
-		float left
-		margin 0 16px 0 0
-
-		> .avatar
-			display block
-			width 44px
-			height 44px
-			margin 0
-			border-radius 4px
-			vertical-align bottom
-
-	> .main
-		float left
-		width calc(100% - 60px)
-
-		> header
-			margin-bottom 4px
-			white-space nowrap
-
-			&:after
-				content ""
-				display block
-				clear both
-
-			> .left
-				float left
-
-				> .name
-					display inline
-					margin 0
-					padding 0
-					color #777
-					font-size 1em
-					font-weight 700
-					text-align left
-					text-decoration none
-
-					&:hover
-						text-decoration underline
-
-				> .username
-					text-align left
-					margin 0 0 0 8px
-					color #ccc
-
-			> .right
-				float right
-
-				> .time
-					font-size 0.9em
-					color #c0c0c0
-
-</style>
-
-<style lang="stylus" module>
-.text
-	cursor default
-	display block
-	margin 0
-	padding 0
-	overflow-wrap break-word
-	font-size 1em
-	color #717171
-</style>
diff --git a/src/client/app/desktop/views/components/post-detail.vue b/src/client/app/desktop/views/components/post-detail.vue
deleted file mode 100644
index 50bbb76988..0000000000
--- a/src/client/app/desktop/views/components/post-detail.vue
+++ /dev/null
@@ -1,434 +0,0 @@
-<template>
-<div class="mk-note-detail" :title="title">
-	<button
-		class="read-more"
-		v-if="p.reply && p.reply.replyId && context == null"
-		title="会話をもっと読み込む"
-		@click="fetchContext"
-		:disabled="contextFetching"
-	>
-		<template v-if="!contextFetching">%fa:ellipsis-v%</template>
-		<template v-if="contextFetching">%fa:spinner .pulse%</template>
-	</button>
-	<div class="context">
-		<x-sub v-for="note in context" :key="note.id" :note="note"/>
-	</div>
-	<div class="reply-to" v-if="p.reply">
-		<x-sub :note="p.reply"/>
-	</div>
-	<div class="renote" v-if="isRenote">
-		<p>
-			<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.userId">
-				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
-			</router-link>
-			%fa:retweet%
-			<router-link class="name" :href="note.user | userPage">{{ note.user | userName }}</router-link>
-			がRenote
-		</p>
-	</div>
-	<article>
-		<router-link class="avatar-anchor" :to="p.user | userPage">
-			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
-		</router-link>
-		<header>
-			<router-link class="name" :to="p.user | userPage" v-user-preview="p.user.id">{{ p.user | userName }}</router-link>
-			<span class="username">@{{ p.user | acct }}</span>
-			<router-link class="time" :to="p | notePage">
-				<mk-time :time="p.createdAt"/>
-			</router-link>
-		</header>
-		<div class="body">
-			<mk-note-html :class="$style.text" v-if="p.text" :text="p.text" :i="os.i"/>
-			<div class="media" v-if="p.media.length > 0">
-				<mk-media-list :media-list="p.media"/>
-			</div>
-			<mk-poll v-if="p.poll" :note="p"/>
-			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
-			<div class="tags" v-if="p.tags && p.tags.length > 0">
-				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
-			</div>
-			<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
-			<div class="map" v-if="p.geo" ref="map"></div>
-			<div class="renote" v-if="p.renote">
-				<mk-note-preview :note="p.renote"/>
-			</div>
-		</div>
-		<footer>
-			<mk-reactions-viewer :note="p"/>
-			<button @click="reply" title="返信">
-				%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
-			</button>
-			<button @click="renote" title="Renote">
-				%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
-			</button>
-			<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="リアクション">
-				%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
-			</button>
-			<button @click="menu" ref="menuButton">
-				%fa:ellipsis-h%
-			</button>
-		</footer>
-	</article>
-	<div class="replies" v-if="!compact">
-		<x-sub v-for="note in replies" :key="note.id" :note="note"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import dateStringify from '../../../common/scripts/date-stringify';
-import parse from '../../../../../text/parse';
-
-import MkPostFormWindow from './post-form-window.vue';
-import MkRenoteFormWindow from './renote-form-window.vue';
-import MkNoteMenu from '../../../common/views/components/note-menu.vue';
-import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
-import XSub from './note-detail.sub.vue';
-
-export default Vue.extend({
-	components: {
-		XSub
-	},
-
-	props: {
-		note: {
-			type: Object,
-			required: true
-		},
-		compact: {
-			default: false
-		}
-	},
-
-	data() {
-		return {
-			context: [],
-			contextFetching: false,
-			replies: []
-		};
-	},
-
-	computed: {
-		isRenote(): boolean {
-			return (this.note.renote &&
-				this.note.text == null &&
-				this.note.mediaIds.length == 0 &&
-				this.note.poll == null);
-		},
-		p(): any {
-			return this.isRenote ? this.note.renote : this.note;
-		},
-		reactionsCount(): number {
-			return this.p.reactionCounts
-				? Object.keys(this.p.reactionCounts)
-					.map(key => this.p.reactionCounts[key])
-					.reduce((a, b) => a + b)
-				: 0;
-		},
-		title(): string {
-			return dateStringify(this.p.createdAt);
-		},
-		urls(): string[] {
-			if (this.p.text) {
-				const ast = parse(this.p.text);
-				return ast
-					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-					.map(t => t.url);
-			} else {
-				return null;
-			}
-		}
-	},
-
-	mounted() {
-		// Get replies
-		if (!this.compact) {
-			(this as any).api('notes/replies', {
-				noteId: this.p.id,
-				limit: 8
-			}).then(replies => {
-				this.replies = replies;
-			});
-		}
-
-		// Draw map
-		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
-			if (shouldShowMap) {
-				(this as any).os.getGoogleMaps().then(maps => {
-					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
-					const map = new maps.Map(this.$refs.map, {
-						center: uluru,
-						zoom: 15
-					});
-					new maps.Marker({
-						position: uluru,
-						map: map
-					});
-				});
-			}
-		}
-	},
-
-	methods: {
-		fetchContext() {
-			this.contextFetching = true;
-
-			// Fetch context
-			(this as any).api('notes/context', {
-				noteId: this.p.replyId
-			}).then(context => {
-				this.contextFetching = false;
-				this.context = context.reverse();
-			});
-		},
-		reply() {
-			(this as any).os.new(MkPostFormWindow, {
-				reply: this.p
-			});
-		},
-		renote() {
-			(this as any).os.new(MkRenoteFormWindow, {
-				note: this.p
-			});
-		},
-		react() {
-			(this as any).os.new(MkReactionPicker, {
-				source: this.$refs.reactButton,
-				note: this.p
-			});
-		},
-		menu() {
-			(this as any).os.new(MkNoteMenu, {
-				source: this.$refs.menuButton,
-				note: this.p
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-.mk-note-detail
-	margin 0
-	padding 0
-	overflow hidden
-	text-align left
-	background #fff
-	border solid 1px rgba(0, 0, 0, 0.1)
-	border-radius 8px
-
-	> .read-more
-		display block
-		margin 0
-		padding 10px 0
-		width 100%
-		font-size 1em
-		text-align center
-		color #999
-		cursor pointer
-		background #fafafa
-		outline none
-		border none
-		border-bottom solid 1px #eef0f2
-		border-radius 6px 6px 0 0
-
-		&:hover
-			background #f6f6f6
-
-		&:active
-			background #f0f0f0
-
-		&:disabled
-			color #ccc
-
-	> .context
-		> *
-			border-bottom 1px solid #eef0f2
-
-	> .renote
-		color #9dbb00
-		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
-
-		> p
-			margin 0
-			padding 16px 32px
-
-			.avatar-anchor
-				display inline-block
-
-				.avatar
-					vertical-align bottom
-					min-width 28px
-					min-height 28px
-					max-width 28px
-					max-height 28px
-					margin 0 8px 0 0
-					border-radius 6px
-
-			[data-fa]
-				margin-right 4px
-
-			.name
-				font-weight bold
-
-		& + article
-			padding-top 8px
-
-	> .reply-to
-		border-bottom 1px solid #eef0f2
-
-	> article
-		padding 28px 32px 18px 32px
-
-		&:after
-			content ""
-			display block
-			clear both
-
-		&:hover
-			> .main > footer > button
-				color #888
-
-		> .avatar-anchor
-			display block
-			width 60px
-			height 60px
-
-			> .avatar
-				display block
-				width 60px
-				height 60px
-				margin 0
-				border-radius 8px
-				vertical-align bottom
-
-		> header
-			position absolute
-			top 28px
-			left 108px
-			width calc(100% - 108px)
-
-			> .name
-				display inline-block
-				margin 0
-				line-height 24px
-				color #777
-				font-size 18px
-				font-weight 700
-				text-align left
-				text-decoration none
-
-				&:hover
-					text-decoration underline
-
-			> .username
-				display block
-				text-align left
-				margin 0
-				color #ccc
-
-			> .time
-				position absolute
-				top 0
-				right 32px
-				font-size 1em
-				color #c0c0c0
-
-		> .body
-			padding 8px 0
-
-			> .renote
-				margin 8px 0
-
-				> .mk-note-preview
-					padding 16px
-					border dashed 1px #c0dac6
-					border-radius 8px
-
-			> .location
-				margin 4px 0
-				font-size 12px
-				color #ccc
-
-			> .map
-				width 100%
-				height 300px
-
-				&:empty
-					display none
-
-			> .mk-url-preview
-				margin-top 8px
-
-			> .tags
-				margin 4px 0 0 0
-
-				> *
-					display inline-block
-					margin 0 8px 0 0
-					padding 2px 8px 2px 16px
-					font-size 90%
-					color #8d969e
-					background #edf0f3
-					border-radius 4px
-
-					&:before
-						content ""
-						display block
-						position absolute
-						top 0
-						bottom 0
-						left 4px
-						width 8px
-						height 8px
-						margin auto 0
-						background #fff
-						border-radius 100%
-
-					&:hover
-						text-decoration none
-						background #e2e7ec
-
-		> footer
-			font-size 1.2em
-
-			> button
-				margin 0 28px 0 0
-				padding 8px
-				background transparent
-				border none
-				font-size 1em
-				color #ddd
-				cursor pointer
-
-				&:hover
-					color #666
-
-				> .count
-					display inline
-					margin 0 0 0 8px
-					color #999
-
-				&.reacted
-					color $theme-color
-
-	> .replies
-		> *
-			border-top 1px solid #eef0f2
-
-</style>
-
-<style lang="stylus" module>
-.text
-	cursor default
-	display block
-	margin 0
-	padding 0
-	overflow-wrap break-word
-	font-size 1.5em
-	color #717171
-</style>
diff --git a/src/client/app/desktop/views/components/post-preview.vue b/src/client/app/desktop/views/components/post-preview.vue
deleted file mode 100644
index ff3ecadc20..0000000000
--- a/src/client/app/desktop/views/components/post-preview.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-<div class="mk-note-preview" :title="title">
-	<router-link class="avatar-anchor" :to="note.user | userPage">
-		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
-	</router-link>
-	<div class="main">
-		<header>
-			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
-			<span class="username">@{{ note.user | acct }}</span>
-			<router-link class="time" :to="note | notePage">
-				<mk-time :time="note.createdAt"/>
-			</router-link>
-		</header>
-		<div class="body">
-			<mk-sub-note-content class="text" :note="note"/>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import dateStringify from '../../../common/scripts/date-stringify';
-
-export default Vue.extend({
-	props: ['note'],
-	computed: {
-		title(): string {
-			return dateStringify(this.note.createdAt);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-note-preview
-	font-size 0.9em
-	background #fff
-
-	&:after
-		content ""
-		display block
-		clear both
-
-	&:hover
-		> .main > footer > button
-			color #888
-
-	> .avatar-anchor
-		display block
-		float left
-		margin 0 16px 0 0
-
-		> .avatar
-			display block
-			width 52px
-			height 52px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
-
-	> .main
-		float left
-		width calc(100% - 68px)
-
-		> header
-			display flex
-			white-space nowrap
-
-			> .name
-				margin 0 .5em 0 0
-				padding 0
-				color #607073
-				font-size 1em
-				font-weight bold
-				text-decoration none
-				white-space normal
-
-				&:hover
-					text-decoration underline
-
-			> .username
-				margin 0 .5em 0 0
-				color #d1d8da
-
-			> .time
-				margin-left auto
-				color #b2b8bb
-
-		> .body
-
-			> .text
-				cursor default
-				margin 0
-				padding 0
-				font-size 1.1em
-				color #717171
-
-</style>
diff --git a/src/client/app/desktop/views/components/posts.post.sub.vue b/src/client/app/desktop/views/components/posts.post.sub.vue
deleted file mode 100644
index e854785783..0000000000
--- a/src/client/app/desktop/views/components/posts.post.sub.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-<div class="sub" :title="title">
-	<router-link class="avatar-anchor" :to="note.user | userPage">
-		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="note.userId"/>
-	</router-link>
-	<div class="main">
-		<header>
-			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
-			<span class="username">@{{ note.user | acct }}</span>
-			<router-link class="created-at" :to="note | notePage">
-				<mk-time :time="note.createdAt"/>
-			</router-link>
-		</header>
-		<div class="body">
-			<mk-sub-note-content class="text" :note="note"/>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import dateStringify from '../../../common/scripts/date-stringify';
-
-export default Vue.extend({
-	props: ['note'],
-	computed: {
-		title(): string {
-			return dateStringify(this.note.createdAt);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.sub
-	margin 0
-	padding 16px
-	font-size 0.9em
-
-	&:after
-		content ""
-		display block
-		clear both
-
-	&:hover
-		> .main > footer > button
-			color #888
-
-	> .avatar-anchor
-		display block
-		float left
-		margin 0 14px 0 0
-
-		> .avatar
-			display block
-			width 52px
-			height 52px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
-
-	> .main
-		float left
-		width calc(100% - 66px)
-
-		> header
-			display flex
-			margin-bottom 2px
-			white-space nowrap
-			line-height 21px
-
-			> .name
-				display block
-				margin 0 .5em 0 0
-				padding 0
-				overflow hidden
-				color #607073
-				font-size 1em
-				font-weight bold
-				text-decoration none
-				text-overflow ellipsis
-
-				&:hover
-					text-decoration underline
-
-			> .username
-				margin 0 .5em 0 0
-				color #d1d8da
-
-			> .created-at
-				margin-left auto
-				color #b2b8bb
-
-		> .body
-
-			> .text
-				cursor default
-				margin 0
-				padding 0
-				font-size 1.1em
-				color #717171
-
-				pre
-					max-height 120px
-					font-size 80%
-
-</style>
diff --git a/src/client/app/desktop/views/components/posts.post.vue b/src/client/app/desktop/views/components/posts.post.vue
deleted file mode 100644
index 322bf29221..0000000000
--- a/src/client/app/desktop/views/components/posts.post.vue
+++ /dev/null
@@ -1,585 +0,0 @@
-<template>
-<div class="note" tabindex="-1" :title="title" @keydown="onKeydown">
-	<div class="reply-to" v-if="p.reply">
-		<x-sub :note="p.reply"/>
-	</div>
-	<div class="renote" v-if="isRenote">
-		<p>
-			<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.userId">
-				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
-			</router-link>
-			%fa:retweet%
-			<span>{{ '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.indexOf('{')) }}</span>
-			<a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
-			<span>{{ '%i18n:desktop.tags.mk-timeline-note.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-note.reposted-by%'.indexOf('}') + 1) }}</span>
-		</p>
-		<mk-time :time="note.createdAt"/>
-	</div>
-	<article>
-		<router-link class="avatar-anchor" :to="p.user | userPage">
-			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
-		</router-link>
-		<div class="main">
-			<header>
-				<router-link class="name" :to="p.user | userPage" v-user-preview="p.user.id">{{ p.user | userName }}</router-link>
-				<span class="is-bot" v-if="p.user.host === null && p.user.isBot">bot</span>
-				<span class="username">@{{ p.user | acct }}</span>
-				<div class="info">
-					<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
-					<span class="mobile" v-if="p.viaMobile">%fa:mobile-alt%</span>
-					<router-link class="created-at" :to="url">
-						<mk-time :time="p.createdAt"/>
-					</router-link>
-				</div>
-			</header>
-			<div class="body">
-				<p class="channel" v-if="p.channel">
-					<a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>:
-				</p>
-				<div class="text">
-					<a class="reply" v-if="p.reply">%fa:reply%</a>
-					<mk-note-html v-if="p.textHtml" :text="p.text" :i="os.i" :class="$style.text"/>
-					<a class="rp" v-if="p.renote">RP:</a>
-				</div>
-				<div class="media" v-if="p.media.length > 0">
-					<mk-media-list :media-list="p.media"/>
-				</div>
-				<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
-				<div class="tags" v-if="p.tags && p.tags.length > 0">
-					<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
-				</div>
-				<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
-				<div class="map" v-if="p.geo" ref="map"></div>
-				<div class="renote" v-if="p.renote">
-					<mk-note-preview :note="p.renote"/>
-				</div>
-				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
-			</div>
-			<footer>
-				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
-				<button @click="reply" title="%i18n:desktop.tags.mk-timeline-note.reply%">
-					%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
-				</button>
-				<button @click="renote" title="%i18n:desktop.tags.mk-timeline-note.renote%">
-					%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
-				</button>
-				<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:desktop.tags.mk-timeline-note.add-reaction%">
-					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
-				</button>
-				<button @click="menu" ref="menuButton">
-					%fa:ellipsis-h%
-				</button>
-				<button title="%i18n:desktop.tags.mk-timeline-note.detail">
-					<template v-if="!isDetailOpened">%fa:caret-down%</template>
-					<template v-if="isDetailOpened">%fa:caret-up%</template>
-				</button>
-			</footer>
-		</div>
-	</article>
-	<div class="detail" v-if="isDetailOpened">
-		<mk-note-status-graph width="462" height="130" :note="p"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import dateStringify from '../../../common/scripts/date-stringify';
-import parse from '../../../../../text/parse';
-
-import MkPostFormWindow from './post-form-window.vue';
-import MkRenoteFormWindow from './renote-form-window.vue';
-import MkNoteMenu from '../../../common/views/components/note-menu.vue';
-import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
-import XSub from './notes.note.sub.vue';
-
-function focus(el, fn) {
-	const target = fn(el);
-	if (target) {
-		if (target.hasAttribute('tabindex')) {
-			target.focus();
-		} else {
-			focus(target, fn);
-		}
-	}
-}
-
-export default Vue.extend({
-	components: {
-		XSub
-	},
-
-	props: ['note'],
-
-	data() {
-		return {
-			isDetailOpened: false,
-			connection: null,
-			connectionId: null
-		};
-	},
-
-	computed: {
-		isRenote(): boolean {
-			return (this.note.renote &&
-				this.note.text == null &&
-				this.note.mediaIds.length == 0 &&
-				this.note.poll == null);
-		},
-		p(): any {
-			return this.isRenote ? this.note.renote : this.note;
-		},
-		reactionsCount(): number {
-			return this.p.reactionCounts
-				? Object.keys(this.p.reactionCounts)
-					.map(key => this.p.reactionCounts[key])
-					.reduce((a, b) => a + b)
-				: 0;
-		},
-		title(): string {
-			return dateStringify(this.p.createdAt);
-		},
-		urls(): string[] {
-			if (this.p.text) {
-				const ast = parse(this.p.text);
-				return ast
-					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-					.map(t => t.url);
-			} else {
-				return null;
-			}
-		}
-	},
-
-	created() {
-		if ((this as any).os.isSignedIn) {
-			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = (this as any).os.stream.use();
-		}
-	},
-
-	mounted() {
-		this.capture(true);
-
-		if ((this as any).os.isSignedIn) {
-			this.connection.on('_connected_', this.onStreamConnected);
-		}
-
-		// Draw map
-		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
-			if (shouldShowMap) {
-				(this as any).os.getGoogleMaps().then(maps => {
-					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
-					const map = new maps.Map(this.$refs.map, {
-						center: uluru,
-						zoom: 15
-					});
-					new maps.Marker({
-						position: uluru,
-						map: map
-					});
-				});
-			}
-		}
-	},
-
-	beforeDestroy() {
-		this.decapture(true);
-
-		if ((this as any).os.isSignedIn) {
-			this.connection.off('_connected_', this.onStreamConnected);
-			(this as any).os.stream.dispose(this.connectionId);
-		}
-	},
-
-	methods: {
-		capture(withHandler = false) {
-			if ((this as any).os.isSignedIn) {
-				this.connection.send({
-					type: 'capture',
-					id: this.p.id
-				});
-				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
-			}
-		},
-		decapture(withHandler = false) {
-			if ((this as any).os.isSignedIn) {
-				this.connection.send({
-					type: 'decapture',
-					id: this.p.id
-				});
-				if (withHandler) this.connection.off('note-updated', this.onStreamNoteUpdated);
-			}
-		},
-		onStreamConnected() {
-			this.capture();
-		},
-		onStreamNoteUpdated(data) {
-			const note = data.note;
-			if (note.id == this.note.id) {
-				this.$emit('update:note', note);
-			} else if (note.id == this.note.renoteId) {
-				this.note.renote = note;
-			}
-		},
-		reply() {
-			(this as any).os.new(MkPostFormWindow, {
-				reply: this.p
-			});
-		},
-		renote() {
-			(this as any).os.new(MkRenoteFormWindow, {
-				note: this.p
-			});
-		},
-		react() {
-			(this as any).os.new(MkReactionPicker, {
-				source: this.$refs.reactButton,
-				note: this.p
-			});
-		},
-		menu() {
-			(this as any).os.new(MkNoteMenu, {
-				source: this.$refs.menuButton,
-				note: this.p
-			});
-		},
-		onKeydown(e) {
-			let shouldBeCancel = true;
-
-			switch (true) {
-				case e.which == 38: // [↑]
-				case e.which == 74: // [j]
-				case e.which == 9 && e.shiftKey: // [Shift] + [Tab]
-					focus(this.$el, e => e.previousElementSibling);
-					break;
-
-				case e.which == 40: // [↓]
-				case e.which == 75: // [k]
-				case e.which == 9: // [Tab]
-					focus(this.$el, e => e.nextElementSibling);
-					break;
-
-				case e.which == 81: // [q]
-				case e.which == 69: // [e]
-					this.renote();
-					break;
-
-				case e.which == 70: // [f]
-				case e.which == 76: // [l]
-					//this.like();
-					break;
-
-				case e.which == 82: // [r]
-					this.reply();
-					break;
-
-				default:
-					shouldBeCancel = false;
-			}
-
-			if (shouldBeCancel) e.preventDefault();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-.note
-	margin 0
-	padding 0
-	background #fff
-	border-bottom solid 1px #eaeaea
-
-	&:first-child
-		border-top-left-radius 6px
-		border-top-right-radius 6px
-
-		> .renote
-			border-top-left-radius 6px
-			border-top-right-radius 6px
-
-	&:last-of-type
-		border-bottom none
-
-	&:focus
-		z-index 1
-
-		&:after
-			content ""
-			pointer-events none
-			position absolute
-			top 2px
-			right 2px
-			bottom 2px
-			left 2px
-			border 2px solid rgba($theme-color, 0.3)
-			border-radius 4px
-
-	> .renote
-		color #9dbb00
-		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
-
-		> p
-			margin 0
-			padding 16px 32px
-			line-height 28px
-
-			.avatar-anchor
-				display inline-block
-
-				.avatar
-					vertical-align bottom
-					width 28px
-					height 28px
-					margin 0 8px 0 0
-					border-radius 6px
-
-			[data-fa]
-				margin-right 4px
-
-			.name
-				font-weight bold
-
-		> .mk-time
-			position absolute
-			top 16px
-			right 32px
-			font-size 0.9em
-			line-height 28px
-
-		& + article
-			padding-top 8px
-
-	> .reply-to
-		padding 0 16px
-		background rgba(0, 0, 0, 0.0125)
-
-		> .mk-note-preview
-			background transparent
-
-	> article
-		padding 28px 32px 18px 32px
-
-		&:after
-			content ""
-			display block
-			clear both
-
-		&:hover
-			> .main > footer > button
-				color #888
-
-		> .avatar-anchor
-			display block
-			float left
-			margin 0 16px 10px 0
-			//position -webkit-sticky
-			//position sticky
-			//top 74px
-
-			> .avatar
-				display block
-				width 58px
-				height 58px
-				margin 0
-				border-radius 8px
-				vertical-align bottom
-
-		> .main
-			float left
-			width calc(100% - 74px)
-
-			> header
-				display flex
-				align-items center
-				margin-bottom 4px
-				white-space nowrap
-
-				> .name
-					display block
-					margin 0 .5em 0 0
-					padding 0
-					overflow hidden
-					color #627079
-					font-size 1em
-					font-weight bold
-					text-decoration none
-					text-overflow ellipsis
-
-					&:hover
-						text-decoration underline
-
-				> .is-bot
-					margin 0 .5em 0 0
-					padding 1px 6px
-					font-size 12px
-					color #aaa
-					border solid 1px #ddd
-					border-radius 3px
-
-				> .username
-					margin 0 .5em 0 0
-					color #ccc
-
-				> .info
-					margin-left auto
-					font-size 0.9em
-
-					> .mobile
-						margin-right 8px
-						color #ccc
-
-					> .app
-						margin-right 8px
-						padding-right 8px
-						color #ccc
-						border-right solid 1px #eaeaea
-
-					> .created-at
-						color #c0c0c0
-
-			> .body
-
-				> .text
-					cursor default
-					display block
-					margin 0
-					padding 0
-					overflow-wrap break-word
-					font-size 1.1em
-					color #717171
-
-					>>> .quote
-						margin 8px
-						padding 6px 12px
-						color #aaa
-						border-left solid 3px #eee
-
-					> .reply
-						margin-right 8px
-						color #717171
-
-					> .rp
-						margin-left 4px
-						font-style oblique
-						color #a0bf46
-
-				> .location
-					margin 4px 0
-					font-size 12px
-					color #ccc
-
-				> .map
-					width 100%
-					height 300px
-
-					&:empty
-						display none
-
-				> .tags
-					margin 4px 0 0 0
-
-					> *
-						display inline-block
-						margin 0 8px 0 0
-						padding 2px 8px 2px 16px
-						font-size 90%
-						color #8d969e
-						background #edf0f3
-						border-radius 4px
-
-						&:before
-							content ""
-							display block
-							position absolute
-							top 0
-							bottom 0
-							left 4px
-							width 8px
-							height 8px
-							margin auto 0
-							background #fff
-							border-radius 100%
-
-						&:hover
-							text-decoration none
-							background #e2e7ec
-
-				.mk-url-preview
-					margin-top 8px
-
-				> .channel
-					margin 0
-
-				> .mk-poll
-					font-size 80%
-
-				> .renote
-					margin 8px 0
-
-					> .mk-note-preview
-						padding 16px
-						border dashed 1px #c0dac6
-						border-radius 8px
-
-			> footer
-				> button
-					margin 0 28px 0 0
-					padding 0 8px
-					line-height 32px
-					font-size 1em
-					color #ddd
-					background transparent
-					border none
-					cursor pointer
-
-					&:hover
-						color #666
-
-					> .count
-						display inline
-						margin 0 0 0 8px
-						color #999
-
-					&.reacted
-						color $theme-color
-
-					&:last-child
-						position absolute
-						right 0
-						margin 0
-
-	> .detail
-		padding-top 4px
-		background rgba(0, 0, 0, 0.0125)
-
-</style>
-
-<style lang="stylus" module>
-.text
-
-	code
-		padding 4px 8px
-		margin 0 0.5em
-		font-size 80%
-		color #525252
-		background #f8f8f8
-		border-radius 2px
-
-	pre > code
-		padding 16px
-		margin 0
-
-	[data-is-me]:after
-		content "you"
-		padding 0 4px
-		margin-left 4px
-		font-size 80%
-		color $theme-color-foreground
-		background $theme-color
-		border-radius 4px
-</style>
diff --git a/src/client/app/desktop/views/widgets/channel.channel.post.vue b/src/client/app/desktop/views/widgets/channel.channel.post.vue
deleted file mode 100644
index 7767919066..0000000000
--- a/src/client/app/desktop/views/widgets/channel.channel.post.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-<div class="note">
-	<header>
-		<a class="index" @click="reply">{{ note.index }}:</a>
-		<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id"><b>{{ note.user | userName }}</b></router-link>
-		<span>ID:<i>{{ note.user | acct }}</i></span>
-	</header>
-	<div>
-		<a v-if="note.reply">&gt;&gt;{{ note.reply.index }}</a>
-		{{ note.text }}
-		<div class="media" v-if="note.media">
-			<a v-for="file in note.media" :href="file.url" target="_blank">
-				<img :src="`${file.url}?thumbnail&size=512`" :alt="file.name" :title="file.name"/>
-			</a>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['note'],
-	methods: {
-		reply() {
-			this.$emit('reply', this.note);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.note
-	margin 0
-	padding 0
-	color #444
-
-	> header
-		position -webkit-sticky
-		position sticky
-		z-index 1
-		top 0
-		padding 8px 4px 4px 16px
-		background rgba(255, 255, 255, 0.9)
-
-		> .index
-			margin-right 0.25em
-
-		> .name
-			margin-right 0.5em
-			color #008000
-
-	> div
-		padding 0 16px 16px 16px
-
-		> .media
-			> a
-				display inline-block
-
-				> img
-					max-width 100%
-					vertical-align bottom
-
-</style>
diff --git a/src/client/app/mobile/views/components/post-card.vue b/src/client/app/mobile/views/components/post-card.vue
deleted file mode 100644
index 393fa9b831..0000000000
--- a/src/client/app/mobile/views/components/post-card.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-<div class="mk-note-card">
-	<a :href="note | notePage">
-		<header>
-			<img :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/><h3>{{ note.user | userName }}</h3>
-		</header>
-		<div>
-			{{ text }}
-		</div>
-		<mk-time :time="note.createdAt"/>
-	</a>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import summary from '../../../../../renderers/get-note-summary';
-
-export default Vue.extend({
-	props: ['note'],
-	computed: {
-		text(): string {
-			return summary(this.note);
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-note-card
-	display inline-block
-	width 150px
-	//height 120px
-	font-size 12px
-	background #fff
-	border-radius 4px
-
-	> a
-		display block
-		color #2c3940
-
-		&:hover
-			text-decoration none
-
-		> header
-			> img
-				position absolute
-				top 8px
-				left 8px
-				width 28px
-				height 28px
-				border-radius 6px
-
-			> h3
-				display inline-block
-				overflow hidden
-				width calc(100% - 45px)
-				margin 8px 0 0 42px
-				line-height 28px
-				white-space nowrap
-				text-overflow ellipsis
-				font-size 12px
-
-		> div
-			padding 2px 8px 8px 8px
-			height 60px
-			overflow hidden
-			white-space normal
-
-			&:after
-				content ""
-				display block
-				position absolute
-				top 40px
-				left 0
-				width 100%
-				height 20px
-				background linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%)
-
-		> .mk-time
-			display inline-block
-			padding 8px
-			color #aaa
-
-</style>
diff --git a/src/client/app/mobile/views/components/post-detail.sub.vue b/src/client/app/mobile/views/components/post-detail.sub.vue
deleted file mode 100644
index 06f442d308..0000000000
--- a/src/client/app/mobile/views/components/post-detail.sub.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-<div class="root sub">
-	<router-link class="avatar-anchor" :to="note.user | userPage">
-		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-	</router-link>
-	<div class="main">
-		<header>
-			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
-			<span class="username">@{{ note.user | acct }}</span>
-			<router-link class="time" :to="note | notePage">
-				<mk-time :time="note.createdAt"/>
-			</router-link>
-		</header>
-		<div class="body">
-			<mk-sub-note-content class="text" :note="note"/>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['note']
-});
-</script>
-
-<style lang="stylus" scoped>
-.root.sub
-	padding 8px
-	font-size 0.9em
-	background #fdfdfd
-
-	@media (min-width 500px)
-		padding 12px
-
-	&:after
-		content ""
-		display block
-		clear both
-
-	&:hover
-		> .main > footer > button
-			color #888
-
-	> .avatar-anchor
-		display block
-		float left
-		margin 0 12px 0 0
-
-		> .avatar
-			display block
-			width 48px
-			height 48px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
-
-	> .main
-		float left
-		width calc(100% - 60px)
-
-		> header
-			display flex
-			margin-bottom 4px
-			white-space nowrap
-
-			> .name
-				display block
-				margin 0 .5em 0 0
-				padding 0
-				overflow hidden
-				color #607073
-				font-size 1em
-				font-weight 700
-				text-align left
-				text-decoration none
-				text-overflow ellipsis
-
-				&:hover
-					text-decoration underline
-
-			> .username
-				text-align left
-				margin 0 .5em 0 0
-				color #d1d8da
-
-			> .time
-				margin-left auto
-				color #b2b8bb
-
-		> .body
-
-			> .text
-				cursor default
-				margin 0
-				padding 0
-				font-size 1.1em
-				color #717171
-
-</style>
-
diff --git a/src/client/app/mobile/views/components/post-detail.vue b/src/client/app/mobile/views/components/post-detail.vue
deleted file mode 100644
index de32f0a748..0000000000
--- a/src/client/app/mobile/views/components/post-detail.vue
+++ /dev/null
@@ -1,444 +0,0 @@
-<template>
-<div class="mk-note-detail">
-	<button
-		class="more"
-		v-if="p.reply && p.reply.replyId && context == null"
-		@click="fetchContext"
-		:disabled="fetchingContext"
-	>
-		<template v-if="!contextFetching">%fa:ellipsis-v%</template>
-		<template v-if="contextFetching">%fa:spinner .pulse%</template>
-	</button>
-	<div class="context">
-		<x-sub v-for="note in context" :key="note.id" :note="note"/>
-	</div>
-	<div class="reply-to" v-if="p.reply">
-		<x-sub :note="p.reply"/>
-	</div>
-	<div class="renote" v-if="isRenote">
-		<p>
-			<router-link class="avatar-anchor" :to="note.user | userPage">
-				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
-			</router-link>
-			%fa:retweet%<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>がRenote
-		</p>
-	</div>
-	<article>
-		<header>
-			<router-link class="avatar-anchor" :to="p.user | userPage">
-				<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-			</router-link>
-			<div>
-				<router-link class="name" :to="p.user | userPage">{{ p.user | userName }}</router-link>
-				<span class="username">@{{ p.user | acct }}</span>
-			</div>
-		</header>
-		<div class="body">
-			<mk-note-html v-if="p.text" :ast="p.text" :i="os.i" :class="$style.text"/>
-			<div class="tags" v-if="p.tags && p.tags.length > 0">
-				<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
-			</div>
-			<div class="media" v-if="p.media.length > 0">
-				<mk-media-list :media-list="p.media"/>
-			</div>
-			<mk-poll v-if="p.poll" :note="p"/>
-			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
-			<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
-			<div class="map" v-if="p.geo" ref="map"></div>
-			<div class="renote" v-if="p.renote">
-				<mk-note-preview :note="p.renote"/>
-			</div>
-		</div>
-		<router-link class="time" :to="`/@${pAcct}/${p.id}`">
-			<mk-time :time="p.createdAt" mode="detail"/>
-		</router-link>
-		<footer>
-			<mk-reactions-viewer :note="p"/>
-			<button @click="reply" title="%i18n:mobile.tags.mk-note-detail.reply%">
-				%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
-			</button>
-			<button @click="renote" title="Renote">
-				%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
-			</button>
-			<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:mobile.tags.mk-note-detail.reaction%">
-				%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
-			</button>
-			<button @click="menu" ref="menuButton">
-				%fa:ellipsis-h%
-			</button>
-		</footer>
-	</article>
-	<div class="replies" v-if="!compact">
-		<x-sub v-for="note in replies" :key="note.id" :note="note"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import parse from '../../../../../text/parse';
-
-import MkNoteMenu from '../../../common/views/components/note-menu.vue';
-import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
-import XSub from './note-detail.sub.vue';
-
-export default Vue.extend({
-	components: {
-		XSub
-	},
-
-	props: {
-		note: {
-			type: Object,
-			required: true
-		},
-		compact: {
-			default: false
-		}
-	},
-
-	data() {
-		return {
-			context: [],
-			contextFetching: false,
-			replies: []
-		};
-	},
-
-	computed: {
-		isRenote(): boolean {
-			return (this.note.renote &&
-				this.note.text == null &&
-				this.note.mediaIds.length == 0 &&
-				this.note.poll == null);
-		},
-		p(): any {
-			return this.isRenote ? this.note.renote : this.note;
-		},
-		reactionsCount(): number {
-			return this.p.reactionCounts
-				? Object.keys(this.p.reactionCounts)
-					.map(key => this.p.reactionCounts[key])
-					.reduce((a, b) => a + b)
-				: 0;
-		},
-		urls(): string[] {
-			if (this.p.text) {
-				const ast = parse(this.p.text);
-				return ast
-					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-					.map(t => t.url);
-			} else {
-				return null;
-			}
-		}
-	},
-
-	mounted() {
-		// Get replies
-		if (!this.compact) {
-			(this as any).api('notes/replies', {
-				noteId: this.p.id,
-				limit: 8
-			}).then(replies => {
-				this.replies = replies;
-			});
-		}
-
-		// Draw map
-		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
-			if (shouldShowMap) {
-				(this as any).os.getGoogleMaps().then(maps => {
-					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
-					const map = new maps.Map(this.$refs.map, {
-						center: uluru,
-						zoom: 15
-					});
-					new maps.Marker({
-						position: uluru,
-						map: map
-					});
-				});
-			}
-		}
-	},
-
-	methods: {
-		fetchContext() {
-			this.contextFetching = true;
-
-			// Fetch context
-			(this as any).api('notes/context', {
-				noteId: this.p.replyId
-			}).then(context => {
-				this.contextFetching = false;
-				this.context = context.reverse();
-			});
-		},
-		reply() {
-			(this as any).apis.post({
-				reply: this.p
-			});
-		},
-		renote() {
-			(this as any).apis.post({
-				renote: this.p
-			});
-		},
-		react() {
-			(this as any).os.new(MkReactionPicker, {
-				source: this.$refs.reactButton,
-				note: this.p,
-				compact: true
-			});
-		},
-		menu() {
-			(this as any).os.new(MkNoteMenu, {
-				source: this.$refs.menuButton,
-				note: this.p,
-				compact: true
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-.mk-note-detail
-	overflow hidden
-	margin 0 auto
-	padding 0
-	width 100%
-	text-align left
-	background #fff
-	border-radius 8px
-	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
-
-	> .fetching
-		padding 64px 0
-
-	> .more
-		display block
-		margin 0
-		padding 10px 0
-		width 100%
-		font-size 1em
-		text-align center
-		color #999
-		cursor pointer
-		background #fafafa
-		outline none
-		border none
-		border-bottom solid 1px #eef0f2
-		border-radius 6px 6px 0 0
-		box-shadow none
-
-		&:hover
-			background #f6f6f6
-
-		&:active
-			background #f0f0f0
-
-		&:disabled
-			color #ccc
-
-	> .context
-		> *
-			border-bottom 1px solid #eef0f2
-
-	> .renote
-		color #9dbb00
-		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
-
-		> p
-			margin 0
-			padding 16px 32px
-
-			.avatar-anchor
-				display inline-block
-
-				.avatar
-					vertical-align bottom
-					min-width 28px
-					min-height 28px
-					max-width 28px
-					max-height 28px
-					margin 0 8px 0 0
-					border-radius 6px
-
-			[data-fa]
-				margin-right 4px
-
-			.name
-				font-weight bold
-
-		& + article
-			padding-top 8px
-
-	> .reply-to
-		border-bottom 1px solid #eef0f2
-
-	> article
-		padding 14px 16px 9px 16px
-
-		@media (min-width 500px)
-			padding 28px 32px 18px 32px
-
-		&:after
-			content ""
-			display block
-			clear both
-
-		&:hover
-			> .main > footer > button
-				color #888
-
-		> header
-			display flex
-			line-height 1.1
-
-			> .avatar-anchor
-				display block
-				padding 0 .5em 0 0
-
-				> .avatar
-					display block
-					width 54px
-					height 54px
-					margin 0
-					border-radius 8px
-					vertical-align bottom
-
-					@media (min-width 500px)
-						width 60px
-						height 60px
-
-			> div
-
-				> .name
-					display inline-block
-					margin .4em 0
-					color #777
-					font-size 16px
-					font-weight bold
-					text-align left
-					text-decoration none
-
-					&:hover
-						text-decoration underline
-
-				> .username
-					display block
-					text-align left
-					margin 0
-					color #ccc
-
-		> .body
-			padding 8px 0
-
-			> .renote
-				margin 8px 0
-
-				> .mk-note-preview
-					padding 16px
-					border dashed 1px #c0dac6
-					border-radius 8px
-
-			> .location
-				margin 4px 0
-				font-size 12px
-				color #ccc
-
-			> .map
-				width 100%
-				height 200px
-
-				&:empty
-					display none
-
-			> .mk-url-preview
-				margin-top 8px
-
-			> .media
-				> img
-					display block
-					max-width 100%
-
-			> .tags
-				margin 4px 0 0 0
-
-				> *
-					display inline-block
-					margin 0 8px 0 0
-					padding 2px 8px 2px 16px
-					font-size 90%
-					color #8d969e
-					background #edf0f3
-					border-radius 4px
-
-					&:before
-						content ""
-						display block
-						position absolute
-						top 0
-						bottom 0
-						left 4px
-						width 8px
-						height 8px
-						margin auto 0
-						background #fff
-						border-radius 100%
-
-		> .time
-			font-size 16px
-			color #c0c0c0
-
-		> footer
-			font-size 1.2em
-
-			> button
-				margin 0
-				padding 8px
-				background transparent
-				border none
-				box-shadow none
-				font-size 1em
-				color #ddd
-				cursor pointer
-
-				&:not(:last-child)
-					margin-right 28px
-
-				&:hover
-					color #666
-
-				> .count
-					display inline
-					margin 0 0 0 8px
-					color #999
-
-				&.reacted
-					color $theme-color
-
-	> .replies
-		> *
-			border-top 1px solid #eef0f2
-
-</style>
-
-<style lang="stylus" module>
-.text
-	display block
-	margin 0
-	padding 0
-	overflow-wrap break-word
-	font-size 16px
-	color #717171
-
-	@media (min-width 500px)
-		font-size 24px
-
-</style>
diff --git a/src/client/app/mobile/views/components/post-preview.vue b/src/client/app/mobile/views/components/post-preview.vue
deleted file mode 100644
index b9a6db315d..0000000000
--- a/src/client/app/mobile/views/components/post-preview.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-<div class="mk-note-preview">
-	<router-link class="avatar-anchor" :to="note.user | userPage">
-		<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-	</router-link>
-	<div class="main">
-		<header>
-			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
-			<span class="username">@{{ note.user | acct }}</span>
-			<router-link class="time" :to="note | notePage">
-				<mk-time :time="note.createdAt"/>
-			</router-link>
-		</header>
-		<div class="body">
-			<mk-sub-note-content class="text" :note="note"/>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['note']
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-note-preview
-	margin 0
-	padding 0
-	font-size 0.9em
-	background #fff
-
-	&:after
-		content ""
-		display block
-		clear both
-
-	&:hover
-		> .main > footer > button
-			color #888
-
-	> .avatar-anchor
-		display block
-		float left
-		margin 0 12px 0 0
-
-		> .avatar
-			display block
-			width 48px
-			height 48px
-			margin 0
-			border-radius 8px
-			vertical-align bottom
-
-	> .main
-		float left
-		width calc(100% - 60px)
-
-		> header
-			display flex
-			margin-bottom 4px
-			white-space nowrap
-
-			> .name
-				display block
-				margin 0 .5em 0 0
-				padding 0
-				overflow hidden
-				color #607073
-				font-size 1em
-				font-weight 700
-				text-align left
-				text-decoration none
-				text-overflow ellipsis
-
-				&:hover
-					text-decoration underline
-
-			> .username
-				text-align left
-				margin 0 .5em 0 0
-				color #d1d8da
-
-			> .time
-				margin-left auto
-				color #b2b8bb
-
-		> .body
-
-			> .text
-				cursor default
-				margin 0
-				padding 0
-				font-size 1.1em
-				color #717171
-
-</style>
diff --git a/src/client/app/mobile/views/components/post.vue b/src/client/app/mobile/views/components/post.vue
deleted file mode 100644
index 033de4f429..0000000000
--- a/src/client/app/mobile/views/components/post.vue
+++ /dev/null
@@ -1,523 +0,0 @@
-<template>
-<div class="note" :class="{ renote: isRenote }">
-	<div class="reply-to" v-if="p.reply">
-		<x-sub :note="p.reply"/>
-	</div>
-	<div class="renote" v-if="isRenote">
-		<p>
-			<router-link class="avatar-anchor" :to="note.user | userPage">
-				<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
-			</router-link>
-			%fa:retweet%
-			<span>{{ '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.substr(0, '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.indexOf('{')) }}</span>
-			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
-			<span>{{ '%i18n:mobile.tags.mk-timeline-note.reposted-by%'.substr('%i18n:mobile.tags.mk-timeline-note.reposted-by%'.indexOf('}') + 1) }}</span>
-		</p>
-		<mk-time :time="note.createdAt"/>
-	</div>
-	<article>
-		<router-link class="avatar-anchor" :to="p.user | userPage">
-			<img class="avatar" :src="`${p.user.avatarUrl}?thumbnail&size=96`" alt="avatar"/>
-		</router-link>
-		<div class="main">
-			<header>
-				<router-link class="name" :to="p.user | userPage">{{ p.user | userName }}</router-link>
-				<span class="is-bot" v-if="p.user.host === null && p.user.isBot">bot</span>
-				<span class="username">@{{ p.user | acct }}</span>
-				<div class="info">
-					<span class="mobile" v-if="p.viaMobile">%fa:mobile-alt%</span>
-					<router-link class="created-at" :to="p | notePage">
-						<mk-time :time="p.createdAt"/>
-					</router-link>
-				</div>
-			</header>
-			<div class="body">
-				<p class="channel" v-if="p.channel != null"><a target="_blank">{{ p.channel.title }}</a>:</p>
-				<div class="text">
-					<a class="reply" v-if="p.reply">
-						%fa:reply%
-					</a>
-					<mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
-					<a class="rp" v-if="p.renote != null">RP:</a>
-				</div>
-				<div class="media" v-if="p.media.length > 0">
-					<mk-media-list :media-list="p.media"/>
-				</div>
-				<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
-				<div class="tags" v-if="p.tags && p.tags.length > 0">
-					<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
-				</div>
-				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
-				<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
-				<div class="map" v-if="p.geo" ref="map"></div>
-				<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
-				<div class="renote" v-if="p.renote">
-					<mk-note-preview :note="p.renote"/>
-				</div>
-			</div>
-			<footer>
-				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
-				<button @click="reply">
-					%fa:reply%<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
-				</button>
-				<button @click="renote" title="Renote">
-					%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
-				</button>
-				<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton">
-					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
-				</button>
-				<button class="menu" @click="menu" ref="menuButton">
-					%fa:ellipsis-h%
-				</button>
-			</footer>
-		</div>
-	</article>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import parse from '../../../../../text/parse';
-
-import MkNoteMenu from '../../../common/views/components/note-menu.vue';
-import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
-import XSub from './note.sub.vue';
-
-export default Vue.extend({
-	components: {
-		XSub
-	},
-
-	props: ['note'],
-
-	data() {
-		return {
-			connection: null,
-			connectionId: null
-		};
-	},
-
-	computed: {
-		isRenote(): boolean {
-			return (this.note.renote &&
-				this.note.text == null &&
-				this.note.mediaIds.length == 0 &&
-				this.note.poll == null);
-		},
-		p(): any {
-			return this.isRenote ? this.note.renote : this.note;
-		},
-		reactionsCount(): number {
-			return this.p.reactionCounts
-				? Object.keys(this.p.reactionCounts)
-					.map(key => this.p.reactionCounts[key])
-					.reduce((a, b) => a + b)
-				: 0;
-		},
-		urls(): string[] {
-			if (this.p.text) {
-				const ast = parse(this.p.text);
-				return ast
-					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-					.map(t => t.url);
-			} else {
-				return null;
-			}
-		}
-	},
-
-	created() {
-		if ((this as any).os.isSignedIn) {
-			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = (this as any).os.stream.use();
-		}
-	},
-
-	mounted() {
-		this.capture(true);
-
-		if ((this as any).os.isSignedIn) {
-			this.connection.on('_connected_', this.onStreamConnected);
-		}
-
-		// Draw map
-		if (this.p.geo) {
-			const shouldShowMap = (this as any).os.isSignedIn ? (this as any).os.i.clientSettings.showMaps : true;
-			if (shouldShowMap) {
-				(this as any).os.getGoogleMaps().then(maps => {
-					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
-					const map = new maps.Map(this.$refs.map, {
-						center: uluru,
-						zoom: 15
-					});
-					new maps.Marker({
-						position: uluru,
-						map: map
-					});
-				});
-			}
-		}
-	},
-
-	beforeDestroy() {
-		this.decapture(true);
-
-		if ((this as any).os.isSignedIn) {
-			this.connection.off('_connected_', this.onStreamConnected);
-			(this as any).os.stream.dispose(this.connectionId);
-		}
-	},
-
-	methods: {
-		capture(withHandler = false) {
-			if ((this as any).os.isSignedIn) {
-				this.connection.send({
-					type: 'capture',
-					id: this.p.id
-				});
-				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
-			}
-		},
-		decapture(withHandler = false) {
-			if ((this as any).os.isSignedIn) {
-				this.connection.send({
-					type: 'decapture',
-					id: this.p.id
-				});
-				if (withHandler) this.connection.off('note-updated', this.onStreamNoteUpdated);
-			}
-		},
-		onStreamConnected() {
-			this.capture();
-		},
-		onStreamNoteUpdated(data) {
-			const note = data.note;
-			if (note.id == this.note.id) {
-				this.$emit('update:note', note);
-			} else if (note.id == this.note.renoteId) {
-				this.note.renote = note;
-			}
-		},
-		reply() {
-			(this as any).apis.post({
-				reply: this.p
-			});
-		},
-		renote() {
-			(this as any).apis.post({
-				renote: this.p
-			});
-		},
-		react() {
-			(this as any).os.new(MkReactionPicker, {
-				source: this.$refs.reactButton,
-				note: this.p,
-				compact: true
-			});
-		},
-		menu() {
-			(this as any).os.new(MkNoteMenu, {
-				source: this.$refs.menuButton,
-				note: this.p,
-				compact: true
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-.note
-	font-size 12px
-	border-bottom solid 1px #eaeaea
-
-	&:first-child
-		border-radius 8px 8px 0 0
-
-		> .renote
-			border-radius 8px 8px 0 0
-
-	&:last-of-type
-		border-bottom none
-
-	@media (min-width 350px)
-		font-size 14px
-
-	@media (min-width 500px)
-		font-size 16px
-
-	> .renote
-		color #9dbb00
-		background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
-
-		> p
-			margin 0
-			padding 8px 16px
-			line-height 28px
-
-			@media (min-width 500px)
-				padding 16px
-
-			.avatar-anchor
-				display inline-block
-
-				.avatar
-					vertical-align bottom
-					width 28px
-					height 28px
-					margin 0 8px 0 0
-					border-radius 6px
-
-			[data-fa]
-				margin-right 4px
-
-			.name
-				font-weight bold
-
-		> .mk-time
-			position absolute
-			top 8px
-			right 16px
-			font-size 0.9em
-			line-height 28px
-
-			@media (min-width 500px)
-				top 16px
-
-		& + article
-			padding-top 8px
-
-	> .reply-to
-		background rgba(0, 0, 0, 0.0125)
-
-		> .mk-note-preview
-			background transparent
-
-	> article
-		padding 14px 16px 9px 16px
-
-		&:after
-			content ""
-			display block
-			clear both
-
-		> .avatar-anchor
-			display block
-			float left
-			margin 0 10px 8px 0
-			position -webkit-sticky
-			position sticky
-			top 62px
-
-			@media (min-width 500px)
-				margin-right 16px
-
-			> .avatar
-				display block
-				width 48px
-				height 48px
-				margin 0
-				border-radius 6px
-				vertical-align bottom
-
-				@media (min-width 500px)
-					width 58px
-					height 58px
-					border-radius 8px
-
-		> .main
-			float left
-			width calc(100% - 58px)
-
-			@media (min-width 500px)
-				width calc(100% - 74px)
-
-			> header
-				display flex
-				align-items center
-				white-space nowrap
-
-				@media (min-width 500px)
-					margin-bottom 2px
-
-				> .name
-					display block
-					margin 0 0.5em 0 0
-					padding 0
-					overflow hidden
-					color #627079
-					font-size 1em
-					font-weight bold
-					text-decoration none
-					text-overflow ellipsis
-
-					&:hover
-						text-decoration underline
-
-				> .is-bot
-					margin 0 0.5em 0 0
-					padding 1px 6px
-					font-size 12px
-					color #aaa
-					border solid 1px #ddd
-					border-radius 3px
-
-				> .username
-					margin 0 0.5em 0 0
-					color #ccc
-
-				> .info
-					margin-left auto
-					font-size 0.9em
-
-					> .mobile
-						margin-right 6px
-						color #c0c0c0
-
-					> .created-at
-						color #c0c0c0
-
-			> .body
-
-				> .text
-					display block
-					margin 0
-					padding 0
-					overflow-wrap break-word
-					font-size 1.1em
-					color #717171
-
-					>>> .quote
-						margin 8px
-						padding 6px 12px
-						color #aaa
-						border-left solid 3px #eee
-
-					> .reply
-						margin-right 8px
-						color #717171
-
-					> .rp
-						margin-left 4px
-						font-style oblique
-						color #a0bf46
-
-					[data-is-me]:after
-						content "you"
-						padding 0 4px
-						margin-left 4px
-						font-size 80%
-						color $theme-color-foreground
-						background $theme-color
-						border-radius 4px
-
-				.mk-url-preview
-					margin-top 8px
-
-				> .channel
-					margin 0
-
-				> .tags
-					margin 4px 0 0 0
-
-					> *
-						display inline-block
-						margin 0 8px 0 0
-						padding 2px 8px 2px 16px
-						font-size 90%
-						color #8d969e
-						background #edf0f3
-						border-radius 4px
-
-						&:before
-							content ""
-							display block
-							position absolute
-							top 0
-							bottom 0
-							left 4px
-							width 8px
-							height 8px
-							margin auto 0
-							background #fff
-							border-radius 100%
-
-				> .media
-					> img
-						display block
-						max-width 100%
-
-				> .location
-					margin 4px 0
-					font-size 12px
-					color #ccc
-
-				> .map
-					width 100%
-					height 200px
-
-					&:empty
-						display none
-
-				> .app
-					font-size 12px
-					color #ccc
-
-				> .mk-poll
-					font-size 80%
-
-				> .renote
-					margin 8px 0
-
-					> .mk-note-preview
-						padding 16px
-						border dashed 1px #c0dac6
-						border-radius 8px
-
-			> footer
-				> button
-					margin 0
-					padding 8px
-					background transparent
-					border none
-					box-shadow none
-					font-size 1em
-					color #ddd
-					cursor pointer
-
-					&:not(:last-child)
-						margin-right 28px
-
-					&:hover
-						color #666
-
-					> .count
-						display inline
-						margin 0 0 0 8px
-						color #999
-
-					&.reacted
-						color $theme-color
-
-					&.menu
-						@media (max-width 350px)
-							display none
-
-</style>
-
-<style lang="stylus" module>
-.text
-	code
-		padding 4px 8px
-		margin 0 0.5em
-		font-size 80%
-		color #525252
-		background #f8f8f8
-		border-radius 2px
-
-	pre > code
-		padding 16px
-		margin 0
-</style>
-- 
cgit v1.3.1-freya


From 2560d3d1c18b474700e8f1ed76da0d71bd332b07 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 9 Apr 2018 19:18:15 +0900
Subject: Fix bug

---
 .../app/common/views/components/messaging-room.message.vue   |  6 +-----
 src/client/app/common/views/components/messaging.vue         |  2 +-
 src/client/app/common/views/components/welcome-timeline.vue  |  2 +-
 src/client/app/desktop/views/components/notifications.vue    | 12 ++++++------
 src/client/app/desktop/views/components/user-preview.vue     |  4 +---
 src/client/app/desktop/views/pages/user/user.friends.vue     |  4 ----
 src/client/app/desktop/views/pages/welcome.vue               |  2 --
 src/client/app/desktop/views/widgets/polls.vue               | 10 ++--------
 src/client/app/desktop/views/widgets/trends.vue              | 10 ++--------
 src/client/app/mobile/views/components/notification.vue      |  6 +++---
 src/client/app/mobile/views/pages/user.vue                   |  4 ++--
 src/client/app/mobile/views/pages/user/home.photos.vue       |  6 +-----
 12 files changed, 20 insertions(+), 48 deletions(-)

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue
index 7200b59bb2..fdb820a4ab 100644
--- a/src/client/app/common/views/components/messaging-room.message.vue
+++ b/src/client/app/common/views/components/messaging-room.message.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="message" :data-is-me="isMe">
-	<router-link class="avatar-anchor" :to="`/@${acct}`" :title="acct" target="_blank">
+	<router-link class="avatar-anchor" :to="message.user | userPage" :title="acct" target="_blank">
 		<img class="avatar" :src="`${message.user.avatarUrl}?thumbnail&size=80`" alt=""/>
 	</router-link>
 	<div class="content">
@@ -34,7 +34,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../acct/render';
 import parse from '../../../../../text/parse';
 
 export default Vue.extend({
@@ -44,9 +43,6 @@ export default Vue.extend({
 		}
 	},
 	computed: {
-		acct(): string {
-			return getAcct(this.message.user);
-		},
 		isMe(): boolean {
 			return this.message.userId == (this as any).os.i.id;
 		},
diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index 751e4de50d..05bf889746 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -24,7 +24,7 @@
 		<template>
 			<a v-for="message in messages"
 				class="user"
-				:href="`/i/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
+				:href="`/i/messaging/${isMe(message) ? message.recipient : message.user | acct}`"
 				:data-is-me="isMe(message)"
 				:data-is-read="message.isRead"
 				@click.prevent="navigate(isMe(message) ? message.recipient : message.user)"
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index 7571cfc5fd..a80bc04f7f 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -9,7 +9,7 @@
 				<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">{{ note.user | userName }}</router-link>
 				<span class="username">@{{ note.user | acct }}</span>
 				<div class="info">
-					<router-link class="created-at" :to="`/@${getAcct(note.user)}/${note.id}`">
+					<router-link class="created-at" :to="note | notePage">
 						<mk-time :time="note.createdAt"/>
 					</router-link>
 				</div>
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index 8b17c8c430..598c2ad2fa 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -13,7 +13,7 @@
 							<mk-reaction-icon :reaction="notification.reaction"/>
 							<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
 						</p>
-						<router-link class="note-ref" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">
+						<router-link class="note-ref" :to="notification.note | notePage">
 							%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
 						</router-link>
 					</div>
@@ -26,7 +26,7 @@
 						<p>%fa:retweet%
 							<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
 						</p>
-						<router-link class="note-ref" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">
+						<router-link class="note-ref" :to="notification.note | notePage">
 							%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
 						</router-link>
 					</div>
@@ -39,7 +39,7 @@
 						<p>%fa:quote-left%
 							<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
 						</p>
-						<router-link class="note-preview" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">{{ getNoteSummary(notification.note) }}</router-link>
+						<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
 					</div>
 				</template>
 				<template v-if="notification.type == 'follow'">
@@ -60,7 +60,7 @@
 						<p>%fa:reply%
 							<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
 						</p>
-						<router-link class="note-preview" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">{{ getNoteSummary(notification.note) }}</router-link>
+						<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
 					</div>
 				</template>
 				<template v-if="notification.type == 'mention'">
@@ -71,7 +71,7 @@
 						<p>%fa:at%
 							<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
 						</p>
-						<a class="note-preview" :href="`/@${getAcct(notification.note.user)}/${notification.note.id}`">{{ getNoteSummary(notification.note) }}</a>
+						<a class="note-preview" :href="notification.note | notePage">{{ getNoteSummary(notification.note) }}</a>
 					</div>
 				</template>
 				<template v-if="notification.type == 'poll_vote'">
@@ -80,7 +80,7 @@
 					</router-link>
 					<div class="text">
 						<p>%fa:chart-pie%<a :href="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</a></p>
-						<router-link class="note-ref" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">
+						<router-link class="note-ref" :to="notification.note | notePage">
 							%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
 						</router-link>
 					</div>
diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index 24337eea24..bcd79dc2af 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -29,7 +29,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as anime from 'animejs';
-import getAcct from '../../../../../acct/render';
 import parseAcct from '../../../../../acct/parse';
 
 export default Vue.extend({
@@ -41,8 +40,7 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			u: null,
-			getAcct
+			u: null
 		};
 	},
 	mounted() {
diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue
index 8512e8027e..4b5ec88d52 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -20,7 +20,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['user'],
@@ -30,9 +29,6 @@ export default Vue.extend({
 			fetching: true
 		};
 	},
-	methods: {
-		getAcct
-	},
 	mounted() {
 		(this as any).api('users/get_frequently_replied_users', {
 			userId: this.user.id,
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index bc6ebae774..93d17b58fe 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -43,7 +43,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import { docsUrl, copyright, lang } from '../../../config';
-import getAcct from '../../../../../acct/render';
 
 const shares = [
 	'Everything!',
@@ -98,7 +97,6 @@ export default Vue.extend({
 		clearInterval(this.clock);
 	},
 	methods: {
-		getAcct,
 		signup() {
 			this.$modal.show('signup');
 		},
diff --git a/src/client/app/desktop/views/widgets/polls.vue b/src/client/app/desktop/views/widgets/polls.vue
index eb49a4cd5c..6ce980821a 100644
--- a/src/client/app/desktop/views/widgets/polls.vue
+++ b/src/client/app/desktop/views/widgets/polls.vue
@@ -5,8 +5,8 @@
 		<button @click="fetch" title="%i18n:desktop.tags.mk-recommended-polls-home-widget.refresh%">%fa:sync%</button>
 	</template>
 	<div class="poll" v-if="!fetching && poll != null">
-		<p v-if="poll.text"><router-link to="`/@${ acct }/${ poll.id }`">{{ poll.text }}</router-link></p>
-		<p v-if="!poll.text"><router-link to="`/@${ acct }/${ poll.id }`">%fa:link%</router-link></p>
+		<p v-if="poll.text"><router-link to="poll | notePage">{{ poll.text }}</router-link></p>
+		<p v-if="!poll.text"><router-link to="poll | notePage">%fa:link%</router-link></p>
 		<mk-poll :note="poll"/>
 	</div>
 	<p class="empty" v-if="!fetching && poll == null">%i18n:desktop.tags.mk-recommended-polls-home-widget.nothing%</p>
@@ -16,7 +16,6 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
-import getAcct from '../../../../../acct/render';
 
 export default define({
 	name: 'polls',
@@ -24,11 +23,6 @@ export default define({
 		compact: false
 	})
 }).extend({
-	computed: {
-		acct() {
-			return getAcct(this.poll.user);
-		},
-	},
 	data() {
 		return {
 			poll: null,
diff --git a/src/client/app/desktop/views/widgets/trends.vue b/src/client/app/desktop/views/widgets/trends.vue
index c2c7636bb3..20e298730f 100644
--- a/src/client/app/desktop/views/widgets/trends.vue
+++ b/src/client/app/desktop/views/widgets/trends.vue
@@ -6,8 +6,8 @@
 	</template>
 	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<div class="note" v-else-if="note != null">
-		<p class="text"><router-link :to="`/@${ acct }/${ note.id }`">{{ note.text }}</router-link></p>
-		<p class="author">―<router-link :to="`/@${ acct }`">@{{ acct }}</router-link></p>
+		<p class="text"><router-link :to="note | notePage">{{ note.text }}</router-link></p>
+		<p class="author">―<router-link :to="note.user | userPage">@{{ note.user | acct }}</router-link></p>
 	</div>
 	<p class="empty" v-else>%i18n:desktop.tags.mk-trends-home-widget.nothing%</p>
 </div>
@@ -15,7 +15,6 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
-import getAcct from '../../../../../acct/render';
 
 export default define({
 	name: 'trends',
@@ -23,11 +22,6 @@ export default define({
 		compact: false
 	})
 }).extend({
-	computed: {
-		acct() {
-			return getAcct(this.note.user);
-		},
-	},
 	data() {
 		return {
 			note: null,
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index 5456c2c174..4f7c8968b2 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -10,7 +10,7 @@
 				<mk-reaction-icon :reaction="notification.reaction"/>
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 			</p>
-			<router-link class="note-ref" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">
+			<router-link class="note-ref" :to="notification.note | notePage">
 				%fa:quote-left%{{ getNoteSummary(notification.note) }}
 				%fa:quote-right%
 			</router-link>
@@ -27,7 +27,7 @@
 				%fa:retweet%
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 			</p>
-			<router-link class="note-ref" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">
+			<router-link class="note-ref" :to="notification.note | notePage">
 				%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
 			</router-link>
 		</div>
@@ -68,7 +68,7 @@
 				%fa:chart-pie%
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 			</p>
-			<router-link class="note-ref" :to="`/@${getAcct(notification.note.user)}/${notification.note.id}`">
+			<router-link class="note-ref" :to="notification.note | notePage">
 				%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
 			</router-link>
 		</div>
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index fb9220ee86..f650f8aa82 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -30,11 +30,11 @@
 						<b>{{ user.notesCount | number }}</b>
 						<i>%i18n:mobile.tags.mk-user.notes%</i>
 					</a>
-					<a :href="`@${getAcct(user)}/following`">
+					<a :href="`${user | userPage}/following`">
 						<b>{{ user.followingCount | number }}</b>
 						<i>%i18n:mobile.tags.mk-user.following%</i>
 					</a>
-					<a :href="`@${getAcct(user)}/followers`">
+					<a :href="`${user | userPage}/followers`">
 						<b>{{ user.followersCount | number }}</b>
 						<i>%i18n:mobile.tags.mk-user.followers%</i>
 					</a>
diff --git a/src/client/app/mobile/views/pages/user/home.photos.vue b/src/client/app/mobile/views/pages/user/home.photos.vue
index 1c59260812..0e0d6926a1 100644
--- a/src/client/app/mobile/views/pages/user/home.photos.vue
+++ b/src/client/app/mobile/views/pages/user/home.photos.vue
@@ -5,7 +5,7 @@
 		<a v-for="image in images"
 			class="img"
 			:style="`background-image: url(${image.media.url}?thumbnail&size=256)`"
-			:href="`/@${getAcct(image.note.user)}/${image.note.id}`"
+			:href="image.note | notePage"
 		></a>
 	</div>
 	<p class="empty" v-if="!fetching && images.length == 0">%i18n:mobile.tags.mk-user-overview-photos.no-photos%</p>
@@ -14,7 +14,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../acct/render';
 
 export default Vue.extend({
 	props: ['user'],
@@ -24,9 +23,6 @@ export default Vue.extend({
 			images: []
 		};
 	},
-	methods: {
-		getAcct
-	},
 	mounted() {
 		(this as any).api('users/notes', {
 			userId: this.user.id,
-- 
cgit v1.3.1-freya


From 48d540e9f4cb820ab21c2a33eb68267442bea96b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 9 Apr 2018 19:23:52 +0900
Subject: Fix bug

---
 src/client/app/common/views/filters/user.ts | 4 ++--
 src/client/app/desktop/script.ts            | 2 +-
 src/client/app/mobile/script.ts             | 2 +-
 src/client/app/mobile/views/pages/user.vue  | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/common/views/filters/user.ts b/src/client/app/common/views/filters/user.ts
index 167bb7758a..c5bb39f674 100644
--- a/src/client/app/common/views/filters/user.ts
+++ b/src/client/app/common/views/filters/user.ts
@@ -10,6 +10,6 @@ Vue.filter('userName', user => {
 	return getUserName(user);
 });
 
-Vue.filter('userPage', user => {
-	return '/@' + Vue.filter('acct')(user);
+Vue.filter('userPage', (user, path?) => {
+	return '/@' + Vue.filter('acct')(user) + (path ? '/' + path : '');
 });
diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index f57d42aa6f..b3152e708b 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -57,7 +57,7 @@ init(async (launch) => {
 			{ path: '/othello', component: MkOthello },
 			{ path: '/othello/:game', component: MkOthello },
 			{ path: '/@:user', component: MkUser },
-			{ path: '/@:user/:note', component: MkNote }
+			{ path: '/notes/:note', component: MkNote }
 		]
 	});
 
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index 6265d0d45f..1de4891973 100644
--- a/src/client/app/mobile/script.ts
+++ b/src/client/app/mobile/script.ts
@@ -68,7 +68,7 @@ init((launch) => {
 			{ path: '/@:user', component: MkUser },
 			{ path: '/@:user/followers', component: MkFollowers },
 			{ path: '/@:user/following', component: MkFollowing },
-			{ path: '/@:user/:note', component: MkNote }
+			{ path: '/notes/:note', component: MkNote }
 		]
 	});
 
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index f650f8aa82..d30fae7ba1 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -30,11 +30,11 @@
 						<b>{{ user.notesCount | number }}</b>
 						<i>%i18n:mobile.tags.mk-user.notes%</i>
 					</a>
-					<a :href="`${user | userPage}/following`">
+					<a :href="user | userPage('following')">
 						<b>{{ user.followingCount | number }}</b>
 						<i>%i18n:mobile.tags.mk-user.following%</i>
 					</a>
-					<a :href="`${user | userPage}/followers`">
+					<a :href="user | userPage('followers')">
 						<b>{{ user.followersCount | number }}</b>
 						<i>%i18n:mobile.tags.mk-user.followers%</i>
 					</a>
-- 
cgit v1.3.1-freya


From b4d806033ca505e55a825a8fc3e36ef826482c47 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 9 Apr 2018 19:52:17 +0900
Subject: Fix bug

---
 src/client/app/common/views/components/messaging.vue    | 4 +++-
 src/client/app/desktop/views/pages/user/user.header.vue | 6 +++---
 2 files changed, 6 insertions(+), 4 deletions(-)

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index 05bf889746..4da842f5d8 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -24,7 +24,7 @@
 		<template>
 			<a v-for="message in messages"
 				class="user"
-				:href="`/i/messaging/${isMe(message) ? message.recipient : message.user | acct}`"
+				:href="`/i/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
 				:data-is-me="isMe(message)"
 				:data-is-read="message.isRead"
 				@click.prevent="navigate(isMe(message) ? message.recipient : message.user)"
@@ -51,6 +51,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../acct/render';
 
 export default Vue.extend({
 	props: {
@@ -92,6 +93,7 @@ export default Vue.extend({
 		(this as any).os.streams.messagingIndexStream.dispose(this.connectionId);
 	},
 	methods: {
+		getAcct,
 		isMe(message) {
 			return message.userId == (this as any).os.i.id;
 		},
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index 67e52d1737..e026820b39 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -12,9 +12,9 @@
 			<p class="location" v-if="user.host === null && user.profile.location">%fa:map-marker%{{ user.profile.location }}</p>
 		</div>
 		<footer>
-			<router-link :to="`/@${acct}`" :data-active="$parent.page == 'home'">%fa:home%概要</router-link>
-			<router-link :to="`/@${acct}/media`" :data-active="$parent.page == 'media'">%fa:image%メディア</router-link>
-			<router-link :to="`/@${acct}/graphs`" :data-active="$parent.page == 'graphs'">%fa:chart-bar%グラフ</router-link>
+			<router-link :to="user | userPage" :data-active="$parent.page == 'home'">%fa:home%概要</router-link>
+			<router-link :to="user | userPage('media')" :data-active="$parent.page == 'media'">%fa:image%メディア</router-link>
+			<router-link :to="user | userPage('graphs')" :data-active="$parent.page == 'graphs'">%fa:chart-bar%グラフ</router-link>
 		</footer>
 	</div>
 </div>
-- 
cgit v1.3.1-freya


From 84ffcb967267b36bf8eff50a77c5b89b698f648c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 9 Apr 2018 19:53:15 +0900
Subject: Clean up

---
 src/client/app/desktop/views/components/ui.header.nav.vue | 10 +---------
 src/client/app/mobile/views/components/ui.nav.vue         |  1 -
 2 files changed, 1 insertion(+), 10 deletions(-)

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/desktop/views/components/ui.header.nav.vue b/src/client/app/desktop/views/components/ui.header.nav.vue
index 7582e8afce..5d7ae0a4e6 100644
--- a/src/client/app/desktop/views/components/ui.header.nav.vue
+++ b/src/client/app/desktop/views/components/ui.header.nav.vue
@@ -23,19 +23,12 @@
 				</a>
 			</li>
 		</template>
-		<li class="ch">
-			<a :href="chUrl" target="_blank">
-				%fa:tv%
-				<p>%i18n:desktop.tags.mk-ui-header-nav.ch%</p>
-			</a>
-		</li>
 	</ul>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { chUrl } from '../../../config';
 import MkMessagingWindow from './messaging-window.vue';
 import MkGameWindow from './game-window.vue';
 
@@ -45,8 +38,7 @@ export default Vue.extend({
 			hasUnreadMessagingMessages: false,
 			hasGameInvitations: false,
 			connection: null,
-			connectionId: null,
-			chUrl
+			connectionId: null
 		};
 	},
 	mounted() {
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index 764f9374e6..f96e285407 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -21,7 +21,6 @@
 					<li><router-link to="/othello">%fa:gamepad%ゲーム<template v-if="hasGameInvitations">%fa:circle%</template>%fa:angle-right%</router-link></li>
 				</ul>
 				<ul>
-					<li><a :href="chUrl" target="_blank">%fa:tv%%i18n:mobile.tags.mk-ui-nav.ch%%fa:angle-right%</a></li>
 					<li><router-link to="/i/drive">%fa:cloud%%i18n:mobile.tags.mk-ui-nav.drive%%fa:angle-right%</router-link></li>
 				</ul>
 				<ul>
-- 
cgit v1.3.1-freya