Implement remote account resolution

71 files changed, 729 insertions, 331 deletions

diff --git a/src/api/bot/core.ts b/src/api/bot/core.ts
index ad29f1003e..77a68aaee6 100644
--- a/src/api/bot/core.ts
+++ b/src/api/bot/core.ts
@@ -1,10 +1,11 @@
 import * as EventEmitter from 'events';
 import * as bcrypt from 'bcryptjs';
 
-import User, { IUser, init as initUser } from '../models/user';
+import User, { ILocalAccount, IUser, init as initUser } from '../models/user';
 
 import getPostSummary from '../../common/get-post-summary';
-import getUserSummary from '../../common/get-user-summary';
+import getUserSummary from '../../common/user/get-summary';
+import parseAcct from '../../common/user/parse-acct';
 import getNotificationSummary from '../../common/get-notification-summary';
 
 const hmm = [
@@ -163,9 +164,7 @@ export default class BotCore extends EventEmitter {
 
 	public async showUserCommand(q: string): Promise<string> {
 		try {
-			const user = await require('../endpoints/users/show')({
-				username: q.substr(1)
-			}, this.user);
+			const user = await require('../endpoints/users/show')(parseAcct(q.substr(1)), this.user);
 
 			const text = getUserSummary(user);
 
@@ -209,7 +208,8 @@ class SigninContext extends Context {
 		if (this.temporaryUser == null) {
 			// Fetch user
 			const user: IUser = await User.findOne({
-				username_lower: query.toLowerCase()
+				username_lower: query.toLowerCase(),
+				host: null
 			}, {
 				fields: {
 					data: false
@@ -225,7 +225,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.account as ILocalAccount).password);
 
 			if (same) {
 				this.bot.signin(this.temporaryUser);
diff --git a/src/api/bot/interfaces/line.ts b/src/api/bot/interfaces/line.ts
index 6b2ebdec88..8036b2fde4 100644
--- a/src/api/bot/interfaces/line.ts
+++ b/src/api/bot/interfaces/line.ts
@@ -7,6 +7,8 @@ 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';
 
 const redis = prominence(_redis);
@@ -98,10 +100,9 @@ class LineBot extends BotCore {
 	}
 
 	public async showUserCommand(q: string) {
-		const user = await require('../../endpoints/users/show')({
-			username: q.substr(1)
-		}, this.user);
+		const user = await require('../../endpoints/users/show')(parseAcct(q.substr(1)), this.user);
 
+		const acct = getAcct(user);
 		const actions = [];
 
 		actions.push({
@@ -121,7 +122,7 @@ class LineBot extends BotCore {
 		actions.push({
 			type: 'uri',
 			label: 'Webで見る',
-			uri: `${config.url}/@${user.username}`
+			uri: `${config.url}/@${acct}`
 		});
 
 		this.reply([{
@@ -130,7 +131,7 @@ class LineBot extends BotCore {
 			template: {
 				type: 'buttons',
 				thumbnailImageUrl: `${user.avatar_url}?thumbnail&size=1024`,
-				title: `${user.name} (@${user.username})`,
+				title: `${user.name} (@${acct})`,
 				text: user.description || '(no description)',
 				actions: actions
 			}
@@ -171,6 +172,7 @@ module.exports = async (app: express.Application) => {
 
 		if (session == null) {
 			const user = await User.findOne({
+				host: null,
 				'account.line': {
 					user_id: sourceId
 				}
diff --git a/src/api/common/add-file-to-drive.ts b/src/api/common/drive/add-file.ts
index 1ee455c092..c4f2f212ac 100644
--- a/src/api/common/add-file-to-drive.ts
+++ b/src/api/common/drive/add-file.ts
@@ -10,17 +10,18 @@ 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 config from '../../conf';
+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 '../../../common/user/get-acct';
+import config from '../../../conf';
 
 const gm = _gm.subClass({
 	imageMagick: true
 });
 
-const log = debug('misskey:register-drive-file');
+const log = debug('misskey:drive:add-file');
 
 const tmpFile = (): Promise<string> => new Promise((resolve, reject) => {
 	tmp.file((e, path) => {
@@ -46,7 +47,7 @@ const addFile = async (
 	folderId: mongodb.ObjectID = null,
 	force: boolean = false
 ) => {
-	log(`registering ${name} (user: ${user.username}, path: ${path})`);
+	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([
diff --git a/src/api/common/drive/upload_from_url.ts b/src/api/common/drive/upload_from_url.ts
new file mode 100644
index 0000000000..5dd9695936
--- /dev/null
+++ b/src/api/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/api/common/get-host-lower.ts b/src/api/common/get-host-lower.ts
new file mode 100644
index 0000000000..fc4b30439e
--- /dev/null
+++ b/src/api/common/get-host-lower.ts
@@ -0,0 +1,5 @@
+import { toUnicode } from 'punycode';
+
+export default host => {
+	return toUnicode(host).replace(/[A-Z]+/, match => match.toLowerCase());
+};
diff --git a/src/api/common/text/elements/mention.ts b/src/api/common/text/elements/mention.ts
index e0fac4dd76..2025dfdaad 100644
--- a/src/api/common/text/elements/mention.ts
+++ b/src/api/common/text/elements/mention.ts
@@ -1,14 +1,17 @@
 /**
  * Mention
  */
+import parseAcct from '../../../../common/user/parse-acct';
 
 module.exports = text => {
-	const match = text.match(/^@[a-zA-Z0-9\-]+/);
+	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: mention.substr(1)
+		username,
+		host
 	};
 };
diff --git a/src/api/endpoints/drive/files/create.ts b/src/api/endpoints/drive/files/create.ts
index 96bcace886..db801b61fe 100644
--- a/src/api/endpoints/drive/files/create.ts
+++ b/src/api/endpoints/drive/files/create.ts
@@ -3,7 +3,7 @@
  */
 import $ from 'cafy';
 import { validateFileName, pack } from '../../../models/drive-file';
-import create from '../../../common/add-file-to-drive';
+import create from '../../../common/drive/add-file';
 
 /**
  * Create a file
diff --git a/src/api/endpoints/drive/files/upload_from_url.ts b/src/api/endpoints/drive/files/upload_from_url.ts
index 68428747ef..346633c616 100644
--- a/src/api/endpoints/drive/files/upload_from_url.ts
+++ b/src/api/endpoints/drive/files/upload_from_url.ts
@@ -1,16 +1,9 @@
 /**
  * Module dependencies
  */
-import * as URL from 'url';
 import $ from 'cafy';
-import { validateFileName, pack } from '../../../models/drive-file';
-import create from '../../../common/add-file-to-drive';
-import * as debug from 'debug';
-import * as tmp from 'tmp';
-import * as fs from 'fs';
-import * as request from 'request';
-
-const log = debug('misskey:endpoint:upload_from_url');
+import { pack } from '../../../models/drive-file';
+import uploadFromUrl from '../../../common/drive/upload_from_url';
 
 /**
  * Create a file from a URL
@@ -25,42 +18,9 @@ module.exports = async (params, user): Promise<any> => {
 	const [url, urlErr] = $(params.url).string().$;
 	if (urlErr) throw 'invalid url param';
 
-	let name = URL.parse(url).pathname.split('/').pop();
-	if (!validateFileName(name)) {
-		name = null;
-	}
-
 	// Get 'folder_id' parameter
 	const [folderId = null, folderIdErr] = $(params.folder_id).optional.nullable.id().$;
 	if (folderIdErr) throw 'invalid folder_id param';
 
-	// 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 pack(driveFile);
+	return pack(await uploadFromUrl(url, user, folderId));
 };
diff --git a/src/api/endpoints/posts/create.ts b/src/api/endpoints/posts/create.ts
index f46a84e1f1..286e18bb76 100644
--- a/src/api/endpoints/posts/create.ts
+++ b/src/api/endpoints/posts/create.ts
@@ -5,7 +5,7 @@ import $ from 'cafy';
 import deepEqual = require('deep-equal');
 import parse from '../../common/text';
 import { default as Post, IPost, isValidText } from '../../models/post';
-import { default as User, IUser } from '../../models/user';
+import { default as User, ILocalAccount, IUser } from '../../models/user';
 import { default as Channel, IChannel } from '../../models/channel';
 import Following from '../../models/following';
 import Mute from '../../models/mute';
@@ -16,6 +16,8 @@ import { pack } from '../../models/post';
 import notify from '../../common/notify';
 import watch from '../../common/watch-post';
 import event, { pushSw, publishChannelStream } from '../../event';
+import getAcct from '../../../common/user/get-acct';
+import parseAcct from '../../../common/user/parse-acct';
 import config from '../../../conf';
 
 /**
@@ -390,7 +392,7 @@ module.exports = (params, user: IUser, app) => new Promise(async (res, rej) => {
 			});
 
 		// この投稿をWatchする
-		if (user.account.settings.auto_watch !== false) {
+		if ((user.account as ILocalAccount).settings.auto_watch !== false) {
 			watch(user._id, reply);
 		}
 
@@ -477,7 +479,7 @@ module.exports = (params, user: IUser, app) => new Promise(async (res, rej) => {
 		// Extract an '@' mentions
 		const atMentions = tokens
 			.filter(t => t.type == 'mention')
-			.map(m => m.username)
+			.map(getAcct)
 			// Drop dupulicates
 			.filter((v, i, s) => s.indexOf(v) == i);
 
@@ -486,9 +488,7 @@ module.exports = (params, user: IUser, app) => new Promise(async (res, rej) => {
 			// Fetch mentioned user
 			// SELECT _id
 			const mentionee = await User
-				.findOne({
-					username_lower: mention.toLowerCase()
-				}, { _id: true });
+				.findOne(parseAcct(mention), { _id: true });
 
 			// When mentioned user not found
 			if (mentionee == null) return;
diff --git a/src/api/endpoints/username/available.ts b/src/api/endpoints/username/available.ts
index 3be7bcba32..aac7fadf5a 100644
--- a/src/api/endpoints/username/available.ts
+++ b/src/api/endpoints/username/available.ts
@@ -19,6 +19,7 @@ module.exports = async (params) => new Promise(async (res, rej) => {
 	// Get exist
 	const exist = await User
 		.count({
+			host: null,
 			username_lower: username.toLowerCase()
 		}, {
 			limit: 1
diff --git a/src/api/endpoints/users/posts.ts b/src/api/endpoints/users/posts.ts
index 0c8bceee3d..3c84bf0d80 100644
--- a/src/api/endpoints/users/posts.ts
+++ b/src/api/endpoints/users/posts.ts
@@ -2,6 +2,7 @@
  * Module dependencies
  */
 import $ from 'cafy';
+import getHostLower from '../../common/get-host-lower';
 import Post, { pack } from '../../models/post';
 import User from '../../models/user';
 
@@ -22,7 +23,15 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 	if (usernameErr) return rej('invalid username param');
 
 	if (userId === undefined && username === undefined) {
-		return rej('user_id or username is required');
+		return rej('user_id or pair of username and host is required');
+	}
+
+	// Get 'host' parameter
+	const [host, hostErr] = $(params.host).optional.string().$;
+	if (hostErr) return rej('invalid host param');
+
+	if (userId === undefined && host === undefined) {
+		return rej('user_id or pair of username and host is required');
 	}
 
 	// Get 'include_replies' parameter
@@ -60,7 +69,7 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 
 	const q = userId !== undefined
 		? { _id: userId }
-		: { username_lower: username.toLowerCase() } ;
+		: { username_lower: username.toLowerCase(), host_lower: getHostLower(host) } ;
 
 	// Lookup user
 	const user = await User.findOne(q, {
diff --git a/src/api/endpoints/users/recommendation.ts b/src/api/endpoints/users/recommendation.ts
index f1f5bcd0ac..45d90f422b 100644
--- a/src/api/endpoints/users/recommendation.ts
+++ b/src/api/endpoints/users/recommendation.ts
@@ -30,9 +30,15 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 			_id: {
 				$nin: followingIds
 			},
-			'account.last_used_at': {
-				$gte: new Date(Date.now() - ms('7days'))
-			}
+			$or: [
+				{
+					'account.last_used_at': {
+						$gte: new Date(Date.now() - ms('7days'))
+					}
+				}, {
+					host: { $not: null }
+				}
+			]
 		}, {
 			limit: limit,
 			skip: offset,
diff --git a/src/api/endpoints/users/show.ts b/src/api/endpoints/users/show.ts
index 7aea59296a..78df23f339 100644
--- a/src/api/endpoints/users/show.ts
+++ b/src/api/endpoints/users/show.ts
@@ -2,7 +2,49 @@
  * Module dependencies
  */
 import $ from 'cafy';
-import User, { pack } from '../../models/user';
+import { JSDOM } from 'jsdom';
+import { toUnicode, toASCII } from 'punycode';
+import uploadFromUrl from '../../common/drive/upload_from_url';
+import User, { pack, validateUsername, isValidName, isValidDescription } from '../../models/user';
+const request = require('request-promise-native');
+const WebFinger = require('webfinger.js');
+
+const webFinger = new WebFinger({});
+
+async function getCollectionCount(url) {
+	if (!url) {
+		return null;
+	}
+
+	try {
+		const collection = await request({ url, json: true });
+		return collection ? collection.totalItems : null;
+	} catch (exception) {
+		return null;
+	}
+}
+
+function findUser(q) {
+	return User.findOne(q, {
+		fields: {
+			data: false
+		}
+	});
+}
+
+function webFingerAndVerify(query, verifier) {
+	return 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);
+	}));
+}
 
 /**
  * Show a user
@@ -12,6 +54,8 @@ import User, { pack } from '../../models/user';
  * @return {Promise<any>}
  */
 module.exports = (params, me) => new Promise(async (res, rej) => {
+	let user;
+
 	// Get 'user_id' parameter
 	const [userId, userIdErr] = $(params.user_id).optional.id().$;
 	if (userIdErr) return rej('invalid user_id param');
@@ -20,23 +64,142 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
 	const [username, usernameErr] = $(params.username).optional.string().$;
 	if (usernameErr) return rej('invalid username param');
 
-	if (userId === undefined && username === undefined) {
-		return rej('user_id or username is required');
-	}
+	// Get 'host' parameter
+	const [host, hostErr] = $(params.host).optional.string().$;
+	if (hostErr) return rej('invalid username param');
 
-	const q = userId !== undefined
-		? { _id: userId }
-		: { username_lower: username.toLowerCase() };
+	if (userId === undefined && typeof username !== 'string') {
+		return rej('user_id or pair of username and host is required');
+	}
 
 	// Lookup user
-	const user = await User.findOne(q, {
-		fields: {
-			data: false
+	if (typeof host === 'string') {
+		const username_lower = username.toLowerCase();
+		const host_lower_ascii = toASCII(host).toLowerCase();
+		const host_lower = toUnicode(host_lower_ascii);
+
+		user = await findUser({ username_lower, host_lower });
+
+		if (user === null) {
+			const acct_lower = `${username_lower}@${host_lower_ascii}`;
+			let activityStreams;
+			let finger;
+			let followers_count;
+			let following_count;
+			let likes_count;
+			let posts_count;
+
+			if (!validateUsername(username)) {
+				return rej('username validation failed');
+			}
+
+			try {
+				finger = await webFingerAndVerify(acct_lower, acct_lower);
+			} catch (exception) {
+				return rej('WebFinger lookup failed');
+			}
+
+			const self = finger.links.find(link => link.rel && link.rel.toLowerCase() === 'self');
+			if (!self) {
+				return rej('WebFinger has no reference to self representation');
+			}
+
+			try {
+				activityStreams = await request({
+					url: self.href,
+					headers: {
+						Accept: 'application/activity+json, application/ld+json'
+					},
+					json: true
+				});
+			} catch (exception) {
+				return rej('failed to retrieve ActivityStreams representation');
+			}
+
+			if (!(activityStreams &&
+				(Array.isArray(activityStreams['@context']) ?
+					activityStreams['@context'].includes('https://www.w3.org/ns/activitystreams') :
+					activityStreams['@context'] === 'https://www.w3.org/ns/activitystreams') &&
+				activityStreams.type === 'Person' &&
+				typeof activityStreams.preferredUsername === 'string' &&
+				activityStreams.preferredUsername.toLowerCase() === username_lower &&
+				isValidName(activityStreams.name) &&
+				isValidDescription(activityStreams.summary)
+			)) {
+				return rej('failed ActivityStreams validation');
+			}
+
+			try {
+				[followers_count, following_count, likes_count, posts_count] = await Promise.all([
+					getCollectionCount(activityStreams.followers),
+					getCollectionCount(activityStreams.following),
+					getCollectionCount(activityStreams.liked),
+					getCollectionCount(activityStreams.outbox),
+					webFingerAndVerify(activityStreams.id, acct_lower),
+				]);
+			} catch (exception) {
+				return rej('failed to fetch assets');
+			}
+
+			const summaryDOM = JSDOM.fragment(activityStreams.summary);
+
+			// Create user
+			user = await User.insert({
+				avatar_id: null,
+				banner_id: null,
+				created_at: new Date(),
+				description: summaryDOM.textContent,
+				followers_count,
+				following_count,
+				name: activityStreams.name,
+				posts_count,
+				likes_count,
+				liked_count: 0,
+				drive_capacity: 1073741824, // 1GB
+				username: username,
+				username_lower,
+				host: toUnicode(finger.subject.replace(/^.*?@/, '')),
+				host_lower,
+				account: {
+					uri: activityStreams.id,
+				},
+			});
+
+			const [icon, image] = await Promise.all([
+				activityStreams.icon,
+				activityStreams.image,
+			].map(async image => {
+				if (!image || image.type !== 'Image') {
+					return { _id: null };
+				}
+
+				try {
+					return await uploadFromUrl(image.url, user);
+				} catch (exception) {
+					return { _id: null };
+				}
+			}));
+
+			User.update({ _id: user._id }, {
+				$set: {
+					avatar_id: icon._id,
+					banner_id: image._id,
+				},
+			});
+
+			user.avatar_id = icon._id;
+			user.banner_id = icon._id;
 		}
-	});
+	} else {
+		const q = userId !== undefined
+			? { _id: userId }
+			: { username_lower: username.toLowerCase(), host: null };
 
-	if (user === null) {
-		return rej('user not found');
+		user = await findUser(q);
+
+		if (user === null) {
+			return rej('user not found');
+		}
 	}
 
 	// Send response
diff --git a/src/api/limitter.ts b/src/api/limitter.ts
index 10c50c3403..9d2c42d335 100644
--- a/src/api/limitter.ts
+++ b/src/api/limitter.ts
@@ -3,6 +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';
 
 const log = debug('misskey:limitter');
 
@@ -42,7 +43,7 @@ export default (endpoint: Endpoint, ctx: IAuthContext) => new Promise((ok, rejec
 				return reject('ERR');
 			}
 
-			log(`@${ctx.user.username} ${endpoint.name} min remaining: ${info.remaining}`);
+			log(`@${getAcct(ctx.user)} ${endpoint.name} min remaining: ${info.remaining}`);
 
 			if (info.remaining === 0) {
 				reject('BRIEF_REQUEST_INTERVAL');
@@ -70,7 +71,7 @@ export default (endpoint: Endpoint, ctx: IAuthContext) => new Promise((ok, rejec
 				return reject('ERR');
 			}
 
-			log(`@${ctx.user.username} ${endpoint.name} max remaining: ${info.remaining}`);
+			log(`@${getAcct(ctx.user)} ${endpoint.name} max remaining: ${info.remaining}`);
 
 			if (info.remaining === 0) {
 				reject('RATE_LIMIT_EXCEEDED');
diff --git a/src/api/models/user.ts b/src/api/models/user.ts
index 46d32963bc..e73c95faf2 100644
--- a/src/api/models/user.ts
+++ b/src/api/models/user.ts
@@ -39,6 +39,39 @@ export function isValidBirthday(birthday: string): boolean {
 	return typeof birthday == 'string' && /^([0-9]{4})\-([0-9]{2})-([0-9]{2})$/.test(birthday);
 }
 
+export type ILocalAccount = {
+	keypair: string;
+	email: string;
+	links: string[];
+	password: string;
+	token: string;
+	twitter: {
+		access_token: string;
+		access_token_secret: string;
+		user_id: string;
+		screen_name: string;
+	};
+	line: {
+		user_id: string;
+	};
+	profile: {
+		location: string;
+		birthday: string; // 'YYYY-MM-DD'
+		tags: string[];
+	};
+	last_used_at: Date;
+	is_bot: boolean;
+	is_pro: boolean;
+	two_factor_secret: string;
+	two_factor_enabled: boolean;
+	client_settings: any;
+	settings: any;
+};
+
+export type IRemoteAccount = {
+	uri: string;
+};
+
 export type IUser = {
 	_id: mongo.ObjectID;
 	created_at: Date;
@@ -60,34 +93,7 @@ export type IUser = {
 	keywords: string[];
 	host: string;
 	host_lower: string;
-	account: {
-		keypair: string;
-		email: string;
-		links: string[];
-		password: string;
-		token: string;
-		twitter: {
-			access_token: string;
-			access_token_secret: string;
-			user_id: string;
-			screen_name: string;
-		};
-		line: {
-			user_id: string;
-		};
-		profile: {
-			location: string;
-			birthday: string; // 'YYYY-MM-DD'
-			tags: string[];
-		};
-		last_used_at: Date;
-		is_bot: boolean;
-		is_pro: boolean;
-		two_factor_secret: string;
-		two_factor_enabled: boolean;
-		client_settings: any;
-		settings: any;
-	};
+	account: ILocalAccount | IRemoteAccount;
 };
 
 export function init(user): IUser {
@@ -162,28 +168,30 @@ export const pack = (
 	// Remove needless properties
 	delete _user.latest_post;
 
-	// Remove private properties
-	delete _user.account.keypair;
-	delete _user.account.password;
-	delete _user.account.token;
-	delete _user.account.two_factor_temp_secret;
-	delete _user.account.two_factor_secret;
-	delete _user.username_lower;
-	if (_user.account.twitter) {
-		delete _user.account.twitter.access_token;
-		delete _user.account.twitter.access_token_secret;
-	}
-	delete _user.account.line;
+	if (!_user.host) {
+		// Remove private properties
+		delete _user.account.keypair;
+		delete _user.account.password;
+		delete _user.account.token;
+		delete _user.account.two_factor_temp_secret;
+		delete _user.account.two_factor_secret;
+		delete _user.username_lower;
+		if (_user.account.twitter) {
+			delete _user.account.twitter.access_token;
+			delete _user.account.twitter.access_token_secret;
+		}
+		delete _user.account.line;
 
-	// Visible via only the official client
-	if (!opts.includeSecrets) {
-		delete _user.account.email;
-		delete _user.account.settings;
-		delete _user.account.client_settings;
-	}
+		// Visible via only the official client
+		if (!opts.includeSecrets) {
+			delete _user.account.email;
+			delete _user.account.settings;
+			delete _user.account.client_settings;
+		}
 
-	if (!opts.detail) {
-		delete _user.account.two_factor_enabled;
+		if (!opts.detail) {
+			delete _user.account.two_factor_enabled;
+		}
 	}
 
 	_user.avatar_url = _user.avatar_id != null
diff --git a/src/api/private/signin.ts b/src/api/private/signin.ts
index ae0be03c73..00dcb8afc8 100644
--- a/src/api/private/signin.ts
+++ b/src/api/private/signin.ts
@@ -1,7 +1,7 @@
 import * as express from 'express';
 import * as bcrypt from 'bcryptjs';
 import * as speakeasy from 'speakeasy';
-import { default as User, IUser } from '../models/user';
+import { default as User, ILocalAccount, IUser } from '../models/user';
 import Signin, { pack } from '../models/signin';
 import event from '../event';
 import signin from '../common/signin';
@@ -32,7 +32,8 @@ export default async (req: express.Request, res: express.Response) => {
 
 	// Fetch user
 	const user: IUser = await User.findOne({
-		username_lower: username.toLowerCase()
+		username_lower: username.toLowerCase(),
+		host: null
 	}, {
 		fields: {
 			data: false,
@@ -47,13 +48,15 @@ export default async (req: express.Request, res: express.Response) => {
 		return;
 	}
 
+	const account = user.account as ILocalAccount;
+
 	// Compare password
-	const same = await bcrypt.compare(password, user.account.password);
+	const same = await bcrypt.compare(password, account.password);
 
 	if (same) {
-		if (user.account.two_factor_enabled) {
+		if (account.two_factor_enabled) {
 			const verified = (speakeasy as any).totp.verify({
-				secret: user.account.two_factor_secret,
+				secret: account.two_factor_secret,
 				encoding: 'base32',
 				token: token
 			});
diff --git a/src/api/private/signup.ts b/src/api/private/signup.ts
index 280153d4f5..96e0495709 100644
--- a/src/api/private/signup.ts
+++ b/src/api/private/signup.ts
@@ -64,7 +64,8 @@ export default async (req: express.Request, res: express.Response) => {
 	// Fetch exist user that same username
 	const usernameExist = await User
 		.count({
-			username_lower: username.toLowerCase()
+			username_lower: username.toLowerCase(),
+			host: null
 		}, {
 			limit: 1
 		});
diff --git a/src/api/service/twitter.ts b/src/api/service/twitter.ts
index 02b613454c..c1f2e48a63 100644
--- a/src/api/service/twitter.ts
+++ b/src/api/service/twitter.ts
@@ -39,6 +39,7 @@ module.exports = (app: express.Application) => {
 		if (userToken == null) return res.send('plz signin');
 
 		const user = await User.findOneAndUpdate({
+			host: null,
 			'account.token': userToken
 		}, {
 			$set: {
@@ -126,6 +127,7 @@ module.exports = (app: express.Application) => {
 				const result = await twAuth.done(JSON.parse(ctx), req.query.oauth_verifier);
 
 				const user = await User.findOne({
+					host: null,
 					'account.twitter.user_id': result.userId
 				});
 
@@ -148,6 +150,7 @@ module.exports = (app: express.Application) => {
 				const result = await twAuth.done(JSON.parse(ctx), verifier);
 
 				const user = await User.findOneAndUpdate({
+					host: null,
 					'account.token': userToken
 				}, {
 					$set: {
diff --git a/src/api/streaming.ts b/src/api/streaming.ts
index 427e01afdd..a6759e414c 100644
--- a/src/api/streaming.ts
+++ b/src/api/streaming.ts
@@ -94,6 +94,7 @@ function authenticate(token: string): Promise<IUser> {
 			// Fetch user
 			const user: IUser = await User
 				.findOne({
+					host: null,
 					'account.token': token
 				});
 
diff --git a/src/common/get-user-summary.ts b/src/common/get-user-summary.ts
deleted file mode 100644
index 619814e8a8..0000000000
--- a/src/common/get-user-summary.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { IUser } from '../api/models/user';
-
-/**
- * ユーザーを表す文字列を取得します。
- * @param user ユーザー
- */
-export default function(user: IUser): string {
-	return `${user.name} (@${user.username})\n` +
-		`${user.posts_count}投稿、${user.following_count}フォロー、${user.followers_count}フォロワー\n` +
-		`場所: ${user.account.profile.location}、誕生日: ${user.account.profile.birthday}\n` +
-		`「${user.description}」`;
-}
diff --git a/src/common/user/get-acct.ts b/src/common/user/get-acct.ts
new file mode 100644
index 0000000000..9afb03d88b
--- /dev/null
+++ b/src/common/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/common/user/get-summary.ts b/src/common/user/get-summary.ts
new file mode 100644
index 0000000000..f9b7125e30
--- /dev/null
+++ b/src/common/user/get-summary.ts
@@ -0,0 +1,18 @@
+import { ILocalAccount, IUser } from '../../api/models/user';
+import getAcct from './get-acct';
+
+/**
+ * ユーザーを表す文字列を取得します。
+ * @param user ユーザー
+ */
+export default function(user: IUser): string {
+	let string = `${user.name} (@${getAcct(user)})\n` +
+		`${user.posts_count}投稿、${user.following_count}フォロー、${user.followers_count}フォロワー\n`;
+
+	if (user.host === null) {
+		const account = user.account as ILocalAccount;
+		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
new file mode 100644
index 0000000000..ef1f55405d
--- /dev/null
+++ b/src/common/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/web/app/ch/tags/channel.tag b/src/web/app/ch/tags/channel.tag
index face824cfc..dc4b8e1426 100644
--- a/src/web/app/ch/tags/channel.tag
+++ b/src/web/app/ch/tags/channel.tag
@@ -165,10 +165,10 @@
 <mk-channel-post>
 	<header>
 		<a class="index" @click="reply">{ post.index }:</a>
-		<a class="name" href={ _URL_ + '/@' + post.user.username }><b>{ post.user.name }</b></a>
+		<a class="name" href={ _URL_ + '/@' + acct }><b>{ post.user.name }</b></a>
 		<mk-time time={ post.created_at }/>
 		<mk-time time={ post.created_at } mode="detail"/>
-		<span>ID:<i>{ post.user.username }</i></span>
+		<span>ID:<i>{ acct }</i></span>
 	</header>
 	<div>
 		<a v-if="post.reply">&gt;&gt;{ post.reply.index }</a>
@@ -229,8 +229,11 @@
 
 	</style>
 	<script lang="typescript">
+		import getAcct from '../../../../common/user/get-acct';
+
 		this.post = this.opts.post;
 		this.form = this.opts.form;
+		this.acct = getAcct(this.post.user);
 
 		this.reply = () => {
 			this.form.update({
diff --git a/src/web/app/common/views/components/autocomplete.vue b/src/web/app/common/views/components/autocomplete.vue
index 6d7d5cd1b1..8afa291e3c 100644
--- a/src/web/app/common/views/components/autocomplete.vue
+++ b/src/web/app/common/views/components/autocomplete.vue
@@ -4,7 +4,7 @@
 		<li v-for="user in users" @click="complete(type, user)" @keydown="onKeydown" tabindex="-1">
 			<img class="avatar" :src="`${user.avatar_url}?thumbnail&size=32`" alt=""/>
 			<span class="name">{{ user.name }}</span>
-			<span class="username">@{{ user.username }}</span>
+			<span class="username">@{{ getAcct(user) }}</span>
 		</li>
 	</ol>
 	<ol class="emojis" ref="suggests" v-if="emojis.length > 0">
@@ -21,6 +21,7 @@
 import Vue from 'vue';
 import * as emojilib from 'emojilib';
 import contains from '../../../common/scripts/contains';
+import getAcct from '../../../../../common/user/get-acct';
 
 const lib = Object.entries(emojilib.lib).filter((x: any) => {
 	return x[1].category != 'flags';
@@ -105,6 +106,7 @@ export default Vue.extend({
 		});
 	},
 	methods: {
+		getAcct,
 		exec() {
 			this.select = -1;
 			if (this.$refs.suggests) {
diff --git a/src/web/app/common/views/components/messaging-room.message.vue b/src/web/app/common/views/components/messaging-room.message.vue
index 647e39a756..5f2eb1ba86 100644
--- a/src/web/app/common/views/components/messaging-room.message.vue
+++ b/src/web/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="`/@${message.user.username}`" :title="message.user.username" target="_blank">
+	<router-link class="avatar-anchor" :to="`/@${acct}`" :title="acct" target="_blank">
 		<img class="avatar" :src="`${message.user.avatar_url}?thumbnail&size=80`" alt=""/>
 	</router-link>
 	<div class="content">
@@ -34,10 +34,14 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
 
 export default Vue.extend({
 	props: ['message'],
 	computed: {
+		acct() {
+			return getAcct(this.message.user);
+		},
 		isMe(): boolean {
 			return this.message.user_id == (this as any).os.i.id;
 		},
diff --git a/src/web/app/common/views/components/messaging.vue b/src/web/app/common/views/components/messaging.vue
index db60e9259a..88574b94d1 100644
--- a/src/web/app/common/views/components/messaging.vue
+++ b/src/web/app/common/views/components/messaging.vue
@@ -15,7 +15,7 @@
 				>
 					<img class="avatar" :src="`${user.avatar_url}?thumbnail&size=32`" alt=""/>
 					<span class="name">{{ user.name }}</span>
-					<span class="username">@{{ user.username }}</span>
+					<span class="username">@{{ getAcct(user) }}</span>
 				</li>
 			</ol>
 		</div>
@@ -24,7 +24,7 @@
 		<template>
 			<a v-for="message in messages"
 				class="user"
-				:href="`/i/messaging/${isMe(message) ? message.recipient.username : message.user.username}`"
+				:href="`/i/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
 				:data-is-me="isMe(message)"
 				:data-is-read="message.is_read"
 				@click.prevent="navigate(isMe(message) ? message.recipient : message.user)"
@@ -34,7 +34,7 @@
 					<img class="avatar" :src="`${isMe(message) ? message.recipient.avatar_url : message.user.avatar_url}?thumbnail&size=64`" alt=""/>
 					<header>
 						<span class="name">{{ isMe(message) ? message.recipient.name : message.user.name }}</span>
-						<span class="username">@{{ isMe(message) ? message.recipient.username : message.user.username }}</span>
+						<span class="username">@{{ getAcct(isMe(message) ? message.recipient : message.user) }}</span>
 						<mk-time :time="message.created_at"/>
 					</header>
 					<div class="body">
@@ -51,6 +51,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
 
 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.user_id == (this as any).os.i.id;
 		},
diff --git a/src/web/app/common/views/components/post-html.ts b/src/web/app/common/views/components/post-html.ts
index 56ee97d388..98da86617d 100644
--- a/src/web/app/common/views/components/post-html.ts
+++ b/src/web/app/common/views/components/post-html.ts
@@ -1,5 +1,6 @@
 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';
 
@@ -61,9 +62,9 @@ export default Vue.component('mk-post-html', {
 				case 'mention':
 					return (createElement as any)('a', {
 						attrs: {
-							href: `${url}/@${token.username}`,
+							href: `${url}/@${getAcct(token)}`,
 							target: '_blank',
-							dataIsMe: (this as any).i && (this as any).i.username == token.username
+							dataIsMe: (this as any).i && getAcct((this as any).i) == getAcct(token)
 						},
 						directives: [{
 							name: 'user-preview',
diff --git a/src/web/app/common/views/components/welcome-timeline.vue b/src/web/app/common/views/components/welcome-timeline.vue
index 062ccda324..7586e9264e 100644
--- a/src/web/app/common/views/components/welcome-timeline.vue
+++ b/src/web/app/common/views/components/welcome-timeline.vue
@@ -1,15 +1,15 @@
 <template>
 <div class="mk-welcome-timeline">
 	<div v-for="post in posts">
-		<router-link class="avatar-anchor" :to="`/@${post.user.username}`" v-user-preview="post.user.id">
+		<router-link class="avatar-anchor" :to="`/@${getAcct(post.user)}`" v-user-preview="post.user.id">
 			<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=96`" alt="avatar"/>
 		</router-link>
 		<div class="body">
 			<header>
-				<router-link class="name" :to="`/@${post.user.username}`" v-user-preview="post.user.id">{{ post.user.name }}</router-link>
-				<span class="username">@{{ post.user.username }}</span>
+				<router-link class="name" :to="`/@${getAcct(post.user)}`" v-user-preview="post.user.id">{{ post.user.name }}</router-link>
+				<span class="username">@{{ getAcct(post.user) }}</span>
 				<div class="info">
-					<router-link class="created-at" :to="`/@${post.user.username}/${post.id}`">
+					<router-link class="created-at" :to="`/@${getAcct(post.user)}/${post.id}`">
 						<mk-time :time="post.created_at"/>
 					</router-link>
 				</div>
@@ -24,6 +24,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
 
 export default Vue.extend({
 	data() {
@@ -36,6 +37,7 @@ export default Vue.extend({
 		this.fetch();
 	},
 	methods: {
+		getAcct,
 		fetch(cb?) {
 			this.fetching = true;
 			(this as any).api('posts', {
diff --git a/src/web/app/desktop/script.ts b/src/web/app/desktop/script.ts
index 145cc45db2..b95e168544 100644
--- a/src/web/app/desktop/script.ts
+++ b/src/web/app/desktop/script.ts
@@ -49,7 +49,7 @@ init(async (launch) => {
 		routes: [
 			{ path: '/', name: 'index', component: MkIndex },
 			{ path: '/i/customize-home', component: MkHomeCustomize },
-			{ path: '/i/messaging/:username', component: MkMessagingRoom },
+			{ path: '/i/messaging/:user', component: MkMessagingRoom },
 			{ path: '/i/drive', component: MkDrive },
 			{ path: '/i/drive/folder/:folder', component: MkDrive },
 			{ path: '/selectdrive', component: MkSelectDrive },
diff --git a/src/web/app/desktop/views/components/friends-maker.vue b/src/web/app/desktop/views/components/friends-maker.vue
index 65adff7cec..eed15e0773 100644
--- a/src/web/app/desktop/views/components/friends-maker.vue
+++ b/src/web/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="`/@${user.username}`">
+			<router-link class="avatar-anchor" :to="`/@${getAcct(user)}`">
 				<img class="avatar" :src="`${user.avatar_url}?thumbnail&size=42`" alt="" v-user-preview="user.id"/>
 			</router-link>
 			<div class="body">
-				<router-link class="name" :to="`/@${user.username}`" v-user-preview="user.id">{{ user.name }}</router-link>
-				<p class="username">@{{ user.username }}</p>
+				<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>
@@ -22,6 +22,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
+
 export default Vue.extend({
 	data() {
 		return {
@@ -35,6 +37,7 @@ export default Vue.extend({
 		this.fetch();
 	},
 	methods: {
+		getAcct,
 		fetch() {
 			this.fetching = true;
 			this.users = [];
diff --git a/src/web/app/desktop/views/components/messaging-room-window.vue b/src/web/app/desktop/views/components/messaging-room-window.vue
index 66a9aa0036..3735267811 100644
--- a/src/web/app/desktop/views/components/messaging-room-window.vue
+++ b/src/web/app/desktop/views/components/messaging-room-window.vue
@@ -8,12 +8,13 @@
 <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/${this.user.username}`;
+			return `${url}/i/messaging/${getAcct(this.user)}`;
 		}
 	}
 });
diff --git a/src/web/app/desktop/views/components/notifications.vue b/src/web/app/desktop/views/components/notifications.vue
index 86cd1ba4f6..b48ffc1746 100644
--- a/src/web/app/desktop/views/components/notifications.vue
+++ b/src/web/app/desktop/views/components/notifications.vue
@@ -5,82 +5,82 @@
 			<div class="notification" :class="notification.type" :key="notification.id">
 				<mk-time :time="notification.created_at"/>
 				<template v-if="notification.type == 'reaction'">
-					<router-link class="avatar-anchor" :to="`/@${notification.user.username}`" v-user-preview="notification.user.id">
+					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">
 						<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
 						<p>
 							<mk-reaction-icon :reaction="notification.reaction"/>
-							<router-link :to="`/@${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</router-link>
+							<router-link :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">{{ notification.user.name }}</router-link>
 						</p>
-						<router-link class="post-ref" :to="`/@${notification.post.user.username}/${notification.post.id}`">
+						<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="`/@${notification.post.user.username}`" v-user-preview="notification.post.user_id">
+					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.user_id">
 						<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
 						<p>%fa:retweet%
-							<router-link :to="`/@${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</router-link>
+							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</router-link>
 						</p>
-						<router-link class="post-ref" :to="`/@${notification.post.user.username}/${notification.post.id}`">
+						<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="`/@${notification.post.user.username}`" v-user-preview="notification.post.user_id">
+					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.user_id">
 						<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
 						<p>%fa:quote-left%
-							<router-link :to="`/@${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</router-link>
+							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</router-link>
 						</p>
-						<router-link class="post-preview" :to="`/@${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
+						<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="`/@${notification.user.username}`" v-user-preview="notification.user.id">
+					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">
 						<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
 						<p>%fa:user-plus%
-							<router-link :to="`/@${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</router-link>
+							<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="`/@${notification.post.user.username}`" v-user-preview="notification.post.user_id">
+					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.user_id">
 						<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
 						<p>%fa:reply%
-							<router-link :to="`/@${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</router-link>
+							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</router-link>
 						</p>
-						<router-link class="post-preview" :to="`/@${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</router-link>
+						<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="`/@${notification.post.user.username}`" v-user-preview="notification.post.user_id">
+					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.user_id">
 						<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
 						<p>%fa:at%
-							<router-link :to="`/@${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</router-link>
+							<router-link :to="`/@${getAcct(notification.post.user)}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</router-link>
 						</p>
-						<a class="post-preview" :href="`/@${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a>
+						<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="`/@${notification.user.username}`" v-user-preview="notification.user.id">
+					<router-link class="avatar-anchor" :to="`/@${getAcct(notification.user)}`" v-user-preview="notification.user.id">
 						<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
 					</router-link>
 					<div class="text">
-						<p>%fa:chart-pie%<a :href="`/@${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</a></p>
-						<router-link class="post-ref" :to="`/@${notification.post.user.username}/${notification.post.id}`">
+						<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>
@@ -102,6 +102,7 @@
 
 <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({
@@ -152,6 +153,7 @@ export default Vue.extend({
 		(this as any).os.stream.dispose(this.connectionId);
 	},
 	methods: {
+		getAcct,
 		fetchMoreNotifications() {
 			this.fetchingMoreNotifications = true;
 
diff --git a/src/web/app/desktop/views/components/post-detail.sub.vue b/src/web/app/desktop/views/components/post-detail.sub.vue
index 53fc724fc6..59d8db04ce 100644
--- a/src/web/app/desktop/views/components/post-detail.sub.vue
+++ b/src/web/app/desktop/views/components/post-detail.sub.vue
@@ -1,16 +1,16 @@
 <template>
 <div class="sub" :title="title">
-	<router-link class="avatar-anchor" :to="`/@${post.user.username}`">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
 		<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="post.user_id"/>
 	</router-link>
 	<div class="main">
 		<header>
 			<div class="left">
-				<router-link class="name" :to="`/@${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</router-link>
-				<span class="username">@{{ post.user.username }}</span>
+				<router-link class="name" :to="`/@${acct}`" v-user-preview="post.user_id">{{ post.user.name }}</router-link>
+				<span class="username">@{{ acct }}</span>
 			</div>
 			<div class="right">
-				<router-link class="time" :to="`/@${post.user.username}/${post.id}`">
+				<router-link class="time" :to="`/@${acct}/${post.id}`">
 					<mk-time :time="post.created_at"/>
 				</router-link>
 			</div>
@@ -28,10 +28,14 @@
 <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.created_at);
 		}
diff --git a/src/web/app/desktop/views/components/post-detail.vue b/src/web/app/desktop/views/components/post-detail.vue
index 9a8958679c..f09bf4cbd5 100644
--- a/src/web/app/desktop/views/components/post-detail.vue
+++ b/src/web/app/desktop/views/components/post-detail.vue
@@ -18,22 +18,22 @@
 	</div>
 	<div class="repost" v-if="isRepost">
 		<p>
-			<router-link class="avatar-anchor" :to="`/@${post.user.username}`" v-user-preview="post.user_id">
+			<router-link class="avatar-anchor" :to="`/@${acct}`" v-user-preview="post.user_id">
 				<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=32`" alt="avatar"/>
 			</router-link>
 			%fa:retweet%
-			<router-link class="name" :href="`/@${post.user.username}`">{{ post.user.name }}</router-link>
+			<router-link class="name" :href="`/@${acct}`">{{ post.user.name }}</router-link>
 			がRepost
 		</p>
 	</div>
 	<article>
-		<router-link class="avatar-anchor" :to="`/@${p.user.username}`">
+		<router-link class="avatar-anchor" :to="`/@${acct}`">
 			<img class="avatar" :src="`${p.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
 		</router-link>
 		<header>
-			<router-link class="name" :to="`/@${p.user.username}`" v-user-preview="p.user.id">{{ p.user.name }}</router-link>
-			<span class="username">@{{ p.user.username }}</span>
-			<router-link class="time" :to="`/@${p.user.username}/${p.id}`">
+			<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.created_at"/>
 			</router-link>
 		</header>
@@ -78,6 +78,7 @@
 <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';
@@ -98,6 +99,11 @@ export default Vue.extend({
 			default: false
 		}
 	},
+	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		}
+	},
 	data() {
 		return {
 			context: [],
diff --git a/src/web/app/desktop/views/components/post-preview.vue b/src/web/app/desktop/views/components/post-preview.vue
index edb593457e..808220c0e0 100644
--- a/src/web/app/desktop/views/components/post-preview.vue
+++ b/src/web/app/desktop/views/components/post-preview.vue
@@ -1,13 +1,13 @@
 <template>
 <div class="mk-post-preview" :title="title">
-	<router-link class="avatar-anchor" :to="`/@${post.user.username}`">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
 		<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="post.user_id"/>
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</router-link>
-			<span class="username">@{{ post.user.username }}</span>
-			<router-link class="time" :to="`/@${post.user.username}/${post.id}`">
+			<router-link class="name" :to="`/@${acct}`" v-user-preview="post.user_id">{{ post.user.name }}</router-link>
+			<span class="username">@{{ acct }}</span>
+			<router-link class="time" :to="`/@${acct}/${post.id}`">
 				<mk-time :time="post.created_at"/>
 			</router-link>
 		</header>
@@ -21,10 +21,14 @@
 <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.created_at);
 		}
diff --git a/src/web/app/desktop/views/components/posts.post.sub.vue b/src/web/app/desktop/views/components/posts.post.sub.vue
index 2fd8a9865f..120700877c 100644
--- a/src/web/app/desktop/views/components/posts.post.sub.vue
+++ b/src/web/app/desktop/views/components/posts.post.sub.vue
@@ -1,13 +1,13 @@
 <template>
 <div class="sub" :title="title">
-	<router-link class="avatar-anchor" :to="`/@${post.user.username}`">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
 		<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="post.user_id"/>
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</router-link>
-			<span class="username">@{{ post.user.username }}</span>
-			<router-link class="created-at" :to="`/@${post.user.username}/${post.id}`">
+			<router-link class="name" :to="`/@${acct}`" v-user-preview="post.user_id">{{ post.user.name }}</router-link>
+			<span class="username">@{{ acct }}</span>
+			<router-link class="created-at" :to="`/@${acct}/${post.id}`">
 				<mk-time :time="post.created_at"/>
 			</router-link>
 		</header>
@@ -21,10 +21,14 @@
 <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.created_at);
 		}
diff --git a/src/web/app/desktop/views/components/posts.post.vue b/src/web/app/desktop/views/components/posts.post.vue
index a525900b95..6b4d3d2789 100644
--- a/src/web/app/desktop/views/components/posts.post.vue
+++ b/src/web/app/desktop/views/components/posts.post.vue
@@ -5,25 +5,25 @@
 	</div>
 	<div class="repost" v-if="isRepost">
 		<p>
-			<router-link class="avatar-anchor" :to="`/@${post.user.username}`" v-user-preview="post.user_id">
+			<router-link class="avatar-anchor" :to="`/@${acct}`" v-user-preview="post.user_id">
 				<img class="avatar" :src="`${post.user.avatar_url}?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="`/@${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</a>
+			<a class="name" :href="`/@${acct}`" v-user-preview="post.user_id">{{ 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.created_at"/>
 	</div>
 	<article>
-		<router-link class="avatar-anchor" :to="`/@${p.user.username}`">
+		<router-link class="avatar-anchor" :to="`/@${acct}`">
 			<img class="avatar" :src="`${p.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
 		</router-link>
 		<div class="main">
 			<header>
-				<router-link class="name" :to="`/@${p.user.username}`" v-user-preview="p.user.id">{{ p.user.name }}</router-link>
-				<span class="is-bot" v-if="p.user.account.is_bot">bot</span>
-				<span class="username">@{{ p.user.username }}</span>
+				<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.is_bot">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.via_mobile">%fa:mobile-alt%</span>
@@ -85,6 +85,7 @@
 <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';
@@ -115,6 +116,9 @@ export default Vue.extend({
 		};
 	},
 	computed: {
+		acct() {
+			return getAcct(this.p.user);
+		},
 		isRepost(): boolean {
 			return (this.post.repost &&
 				this.post.text == null &&
@@ -135,7 +139,7 @@ export default Vue.extend({
 			return dateStringify(this.p.created_at);
 		},
 		url(): string {
-			return `/@${this.p.user.username}/${this.p.id}`;
+			return `/@${this.acct}/${this.p.id}`;
 		},
 		urls(): string[] {
 			if (this.p.ast) {
diff --git a/src/web/app/desktop/views/components/settings.mute.vue b/src/web/app/desktop/views/components/settings.mute.vue
index 0768b54ef8..a8dfe10604 100644
--- a/src/web/app/desktop/views/components/settings.mute.vue
+++ b/src/web/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> @{{ user.username }}</p>
+			<p><b>{{ user.name }}</b> @{{ getAcct(user) }}</p>
 		</div>
 	</div>
 </div>
@@ -13,6 +13,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
 
 export default Vue.extend({
 	data() {
@@ -21,6 +22,9 @@ export default Vue.extend({
 			users: []
 		};
 	},
+	methods: {
+		getAcct
+	},
 	mounted() {
 		(this as any).api('mute/list').then(x => {
 			this.users = x.users;
diff --git a/src/web/app/desktop/views/components/user-preview.vue b/src/web/app/desktop/views/components/user-preview.vue
index ffc959fac5..24d613f120 100644
--- a/src/web/app/desktop/views/components/user-preview.vue
+++ b/src/web/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.banner_url ? `background-image: url(${u.banner_url}?thumbnail&size=512)` : ''"></div>
-		<router-link class="avatar" :to="`/@${u.username}`">
+		<router-link class="avatar" :to="`/@${acct}`">
 			<img :src="`${u.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
 		<div class="title">
-			<router-link class="name" :to="`/@${u.username}`">{{ u.name }}</router-link>
-			<p class="username">@{{ u.username }}</p>
+			<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">
@@ -29,6 +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';
 
 export default Vue.extend({
 	props: {
@@ -37,6 +39,11 @@ export default Vue.extend({
 			required: true
 		}
 	},
+	computed: {
+		acct() {
+			return getAcct(this.u);
+		}
+	},
 	data() {
 		return {
 			u: null
@@ -49,10 +56,11 @@ export default Vue.extend({
 				this.open();
 			});
 		} else {
-			(this as any).api('users/show', {
-				user_id: this.user[0] == '@' ? undefined : this.user,
-				username: this.user[0] == '@' ? this.user.substr(1) : undefined
-			}).then(user => {
+			const query = this.user[0] == '@' ?
+				parseAcct(this.user[0].substr(1)) :
+				{ user_id: this.user[0] };
+
+			(this as any).api('users/show', query).then(user => {
 				this.u = user;
 				this.open();
 			});
diff --git a/src/web/app/desktop/views/components/users-list.item.vue b/src/web/app/desktop/views/components/users-list.item.vue
index 2d1e133473..e02d1311d2 100644
--- a/src/web/app/desktop/views/components/users-list.item.vue
+++ b/src/web/app/desktop/views/components/users-list.item.vue
@@ -1,12 +1,12 @@
 <template>
 <div class="root item">
-	<router-link class="avatar-anchor" :to="`/@${user.username}`" v-user-preview="user.id">
+	<router-link class="avatar-anchor" :to="`/@${acct}`" v-user-preview="user.id">
 		<img class="avatar" :src="`${user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${user.username}`" v-user-preview="user.id">{{ user.name }}</router-link>
-			<span class="username">@{{ user.username }}</span>
+			<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.is_followed">フォローされています</p>
@@ -19,8 +19,15 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
+
 export default Vue.extend({
-	props: ['user']
+	props: ['user'],
+	computed: {
+		acct() {
+			return getAcct(this.user);
+		}
+	}
 });
 </script>
 
diff --git a/src/web/app/desktop/views/pages/messaging-room.vue b/src/web/app/desktop/views/pages/messaging-room.vue
index 99279dc07b..0cab1e0d10 100644
--- a/src/web/app/desktop/views/pages/messaging-room.vue
+++ b/src/web/app/desktop/views/pages/messaging-room.vue
@@ -7,6 +7,7 @@
 <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() {
@@ -29,9 +30,7 @@ export default Vue.extend({
 			Progress.start();
 			this.fetching = true;
 
-			(this as any).api('users/show', {
-				username: this.$route.params.username
-			}).then(user => {
+			(this as any).api('users/show', parseAcct(this.$route.params.user)).then(user => {
 				this.user = user;
 				this.fetching = false;
 
diff --git a/src/web/app/desktop/views/pages/user/user.followers-you-know.vue b/src/web/app/desktop/views/pages/user/user.followers-you-know.vue
index 20675c454e..80b38e8acc 100644
--- a/src/web/app/desktop/views/pages/user/user.followers-you-know.vue
+++ b/src/web/app/desktop/views/pages/user/user.followers-you-know.vue
@@ -3,7 +3,7 @@
 	<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="`/@${user.username}`" :key="user.id">
+	<router-link v-for="user in users" :to="`/@${getAcct(user)}`" :key="user.id">
 		<img :src="`${user.avatar_url}?thumbnail&size=64`" :alt="user.name" v-user-preview="user.id"/>
 	</router-link>
 	</div>
@@ -13,6 +13,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../../common/user/get-acct';
+
 export default Vue.extend({
 	props: ['user'],
 	data() {
@@ -21,6 +23,9 @@ export default Vue.extend({
 			fetching: true
 		};
 	},
+	method() {
+		getAcct
+	},
 	mounted() {
 		(this as any).api('users/followers', {
 			user_id: this.user.id,
diff --git a/src/web/app/desktop/views/pages/user/user.friends.vue b/src/web/app/desktop/views/pages/user/user.friends.vue
index a60020f59a..57e6def27b 100644
--- a/src/web/app/desktop/views/pages/user/user.friends.vue
+++ b/src/web/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="`/@${friend.username}`">
+			<router-link class="avatar-anchor" :to="`/@${getAcct(friend)}`">
 				<img class="avatar" :src="`${friend.avatar_url}?thumbnail&size=42`" alt="" v-user-preview="friend.id"/>
 			</router-link>
 			<div class="body">
-				<router-link class="name" :to="`/@${friend.username}`" v-user-preview="friend.id">{{ friend.name }}</router-link>
-				<p class="username">@{{ friend.username }}</p>
+				<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>
@@ -20,6 +20,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../../common/user/get-acct';
+
 export default Vue.extend({
 	props: ['user'],
 	data() {
@@ -28,6 +30,9 @@ export default Vue.extend({
 			fetching: true
 		};
 	},
+	method() {
+		getAcct
+	},
 	mounted() {
 		(this as any).api('users/get_frequently_replied_users', {
 			user_id: this.user.id,
diff --git a/src/web/app/desktop/views/pages/user/user.header.vue b/src/web/app/desktop/views/pages/user/user.header.vue
index e60b312ca8..3522e76bdb 100644
--- a/src/web/app/desktop/views/pages/user/user.header.vue
+++ b/src/web/app/desktop/views/pages/user/user.header.vue
@@ -8,13 +8,13 @@
 		<img class="avatar" :src="`${user.avatar_url}?thumbnail&size=150`" alt="avatar"/>
 		<div class="title">
 			<p class="name">{{ user.name }}</p>
-			<p class="username">@{{ user.username }}</p>
-			<p class="location" v-if="user.account.profile.location">%fa:map-marker%{{ user.account.profile.location }}</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="`/@${user.username}`" :data-active="$parent.page == 'home'">%fa:home%概要</router-link>
-			<router-link :to="`/@${user.username}/media`" :data-active="$parent.page == 'media'">%fa:image%メディア</router-link>
-			<router-link :to="`/@${user.username}/graphs`" :data-active="$parent.page == 'graphs'">%fa:chart-bar%グラフ</router-link>
+			<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>
@@ -22,9 +22,15 @@
 
 <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);
diff --git a/src/web/app/desktop/views/pages/user/user.home.vue b/src/web/app/desktop/views/pages/user/user.home.vue
index 592d5cca62..2483a6c726 100644
--- a/src/web/app/desktop/views/pages/user/user.home.vue
+++ b/src/web/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>%i18n:desktop.tags.mk-user.last-used-at%: <b><mk-time :time="user.account.last_used_at"/></b></p>
+			<p v-if="user.host === null">%i18n:desktop.tags.mk-user.last-used-at%: <b><mk-time :time="user.account.last_used_at"/></b></p>
 		</div>
 	</div>
 	<main>
diff --git a/src/web/app/desktop/views/pages/user/user.profile.vue b/src/web/app/desktop/views/pages/user/user.profile.vue
index 1e7cb455b0..b51aae18fa 100644
--- a/src/web/app/desktop/views/pages/user/user.profile.vue
+++ b/src/web/app/desktop/views/pages/user/user.profile.vue
@@ -7,10 +7,10 @@
 		<p v-if="!user.is_muted"><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.account.profile.birthday">
+	<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.account.twitter">
+	<div class="twitter" v-if="user.host === null && user.account.twitter">
 		<p>%fa:B twitter%<a :href="`https://twitter.com/${user.account.twitter.screen_name}`" target="_blank">@{{ user.account.twitter.screen_name }}</a></p>
 	</div>
 	<div class="status">
diff --git a/src/web/app/desktop/views/pages/user/user.vue b/src/web/app/desktop/views/pages/user/user.vue
index 1ce3fa27e7..67cef93269 100644
--- a/src/web/app/desktop/views/pages/user/user.vue
+++ b/src/web/app/desktop/views/pages/user/user.vue
@@ -9,6 +9,7 @@
 
 <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';
@@ -39,9 +40,7 @@ export default Vue.extend({
 		fetch() {
 			this.fetching = true;
 			Progress.start();
-			(this as any).api('users/show', {
-				username: this.$route.params.user
-			}).then(user => {
+			(this as any).api('users/show', parseAcct(this.$route.params.user)).then(user => {
 				this.user = user;
 				this.fetching = false;
 				Progress.done();
diff --git a/src/web/app/desktop/views/pages/welcome.vue b/src/web/app/desktop/views/pages/welcome.vue
index c514500b2d..927ddf575b 100644
--- a/src/web/app/desktop/views/pages/welcome.vue
+++ b/src/web/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="`/@${user.username}`" v-user-preview="user.id">
+						<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.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 						</router-link>
 					</div>
@@ -43,6 +43,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { docsUrl, copyright, lang } from '../../../config';
+import getAcct from '../../../../../common/user/get-acct';
 
 const shares = [
 	'Everything!',
@@ -97,6 +98,7 @@ export default Vue.extend({
 		clearInterval(this.clock);
 	},
 	methods: {
+		getAcct,
 		signup() {
 			this.$modal.show('signup');
 		},
diff --git a/src/web/app/desktop/views/widgets/channel.channel.post.vue b/src/web/app/desktop/views/widgets/channel.channel.post.vue
index b2fa92ad43..433f9a00aa 100644
--- a/src/web/app/desktop/views/widgets/channel.channel.post.vue
+++ b/src/web/app/desktop/views/widgets/channel.channel.post.vue
@@ -2,8 +2,8 @@
 <div class="post">
 	<header>
 		<a class="index" @click="reply">{{ post.index }}:</a>
-		<router-link class="name" :to="`/@${post.user.username}`" v-user-preview="post.user.id"><b>{{ post.user.name }}</b></router-link>
-		<span>ID:<i>{{ post.user.username }}</i></span>
+		<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>
@@ -19,8 +19,15 @@
 
 <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);
diff --git a/src/web/app/desktop/views/widgets/polls.vue b/src/web/app/desktop/views/widgets/polls.vue
index 636378d0bb..e5db34fc7a 100644
--- a/src/web/app/desktop/views/widgets/polls.vue
+++ b/src/web/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="`/@${ poll.user.username }/${ poll.id }`">{{ poll.text }}</router-link></p>
-		<p v-if="!poll.text"><router-link to="`/@${ poll.user.username }/${ poll.id }`">%fa:link%</router-link></p>
+		<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>
@@ -16,12 +16,19 @@
 
 <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,
diff --git a/src/web/app/desktop/views/widgets/trends.vue b/src/web/app/desktop/views/widgets/trends.vue
index c006c811d6..77779787ee 100644
--- a/src/web/app/desktop/views/widgets/trends.vue
+++ b/src/web/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="post" v-else-if="post != null">
-		<p class="text"><router-link :to="`/@${ post.user.username }/${ post.id }`">{{ post.text }}</router-link></p>
-		<p class="author">―<router-link :to="`/@${ post.user.username }`">@{{ post.user.username }}</router-link></p>
+		<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>
@@ -15,12 +15,19 @@
 
 <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,
diff --git a/src/web/app/desktop/views/widgets/users.vue b/src/web/app/desktop/views/widgets/users.vue
index c0a85a08e2..10e3c529ee 100644
--- a/src/web/app/desktop/views/widgets/users.vue
+++ b/src/web/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="`/@${_user.username}`">
+			<router-link class="avatar-anchor" :to="`/@${getAcct(_user)}`">
 				<img class="avatar" :src="`${_user.avatar_url}?thumbnail&size=42`" alt="" v-user-preview="_user.id"/>
 			</router-link>
 			<div class="body">
-				<router-link class="name" :to="`/@${_user.username}`" v-user-preview="_user.id">{{ _user.name }}</router-link>
-				<p class="username">@{{ _user.username }}</p>
+				<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>
@@ -23,6 +23,7 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
+import getAcct from '../../../../../common/user/get-acct';
 
 const limit = 3;
 
@@ -43,6 +44,7 @@ export default define({
 		this.fetch();
 	},
 	methods: {
+		getAcct,
 		func() {
 			this.props.compact = !this.props.compact;
 		},
diff --git a/src/web/app/mobile/script.ts b/src/web/app/mobile/script.ts
index 062a6d83d4..4776fccddb 100644
--- a/src/web/app/mobile/script.ts
+++ b/src/web/app/mobile/script.ts
@@ -57,7 +57,7 @@ init((launch) => {
 			{ path: '/i/settings/profile', component: MkProfileSetting },
 			{ path: '/i/notifications', component: MkNotifications },
 			{ path: '/i/messaging', component: MkMessaging },
-			{ path: '/i/messaging/:username', component: MkMessagingRoom },
+			{ path: '/i/messaging/:user', component: MkMessagingRoom },
 			{ path: '/i/drive', component: MkDrive },
 			{ path: '/i/drive/folder/:folder', component: MkDrive },
 			{ path: '/i/drive/file/:file', component: MkDrive },
diff --git a/src/web/app/mobile/views/components/notification.vue b/src/web/app/mobile/views/components/notification.vue
index 301fb81ddb..150ac0fd8b 100644
--- a/src/web/app/mobile/views/components/notification.vue
+++ b/src/web/app/mobile/views/components/notification.vue
@@ -2,15 +2,15 @@
 <div class="mk-notification">
 	<div class="notification reaction" v-if="notification.type == 'reaction'">
 		<mk-time :time="notification.created_at"/>
-		<router-link class="avatar-anchor" :to="`/@${notification.user.username}`">
+		<router-link class="avatar-anchor" :to="`/@${acct}`">
 			<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
 		<div class="text">
 			<p>
 				<mk-reaction-icon :reaction="notification.reaction"/>
-				<router-link :to="`/@${notification.user.username}`">{{ notification.user.name }}</router-link>
+				<router-link :to="`/@${acct}`">{{ notification.user.name }}</router-link>
 			</p>
-			<router-link class="post-ref" :to="`/@${notification.post.user.username}/${notification.post.id}`">
+			<router-link class="post-ref" :to="`/@${acct}/${notification.post.id}`">
 				%fa:quote-left%{{ getPostSummary(notification.post) }}
 				%fa:quote-right%
 			</router-link>
@@ -19,15 +19,15 @@
 
 	<div class="notification repost" v-if="notification.type == 'repost'">
 		<mk-time :time="notification.created_at"/>
-		<router-link class="avatar-anchor" :to="`/@${notification.post.user.username}`">
+		<router-link class="avatar-anchor" :to="`/@${acct}`">
 			<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
 		<div class="text">
 			<p>
 				%fa:retweet%
-				<router-link :to="`/@${notification.post.user.username}`">{{ notification.post.user.name }}</router-link>
+				<router-link :to="`/@${acct}`">{{ notification.post.user.name }}</router-link>
 			</p>
-			<router-link class="post-ref" :to="`/@${notification.post.user.username}/${notification.post.id}`">
+			<router-link class="post-ref" :to="`/@${acct}/${notification.post.id}`">
 				%fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right%
 			</router-link>
 		</div>
@@ -39,13 +39,13 @@
 
 	<div class="notification follow" v-if="notification.type == 'follow'">
 		<mk-time :time="notification.created_at"/>
-		<router-link class="avatar-anchor" :to="`/@${notification.user.username}`">
+		<router-link class="avatar-anchor" :to="`/@${acct}`">
 			<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
 		<div class="text">
 			<p>
 				%fa:user-plus%
-				<router-link :to="`/@${notification.user.username}`">{{ notification.user.name }}</router-link>
+				<router-link :to="`/@${acct}`">{{ notification.user.name }}</router-link>
 			</p>
 		</div>
 	</div>
@@ -60,15 +60,15 @@
 
 	<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
 		<mk-time :time="notification.created_at"/>
-		<router-link class="avatar-anchor" :to="`/@${notification.user.username}`">
+		<router-link class="avatar-anchor" :to="`/@${acct}`">
 			<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 		</router-link>
 		<div class="text">
 			<p>
 				%fa:chart-pie%
-				<router-link :to="`/@${notification.user.username}`">{{ notification.user.name }}</router-link>
+				<router-link :to="`/@${acct}`">{{ notification.user.name }}</router-link>
 			</p>
-			<router-link class="post-ref" :to="`/@${notification.post.user.username}/${notification.post.id}`">
+			<router-link class="post-ref" :to="`/@${acct}/${notification.post.id}`">
 				%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
 			</router-link>
 		</div>
@@ -79,9 +79,15 @@
 <script lang="ts">
 import Vue from 'vue';
 import getPostSummary from '../../../../../common/get-post-summary';
+import getAcct from '../../../../../common/user/get-acct';
 
 export default Vue.extend({
 	props: ['notification'],
+	computed: {
+		acct() {
+			return getAcct(this.notification.user);
+		}
+	},
 	data() {
 		return {
 			getPostSummary
diff --git a/src/web/app/mobile/views/components/post-card.vue b/src/web/app/mobile/views/components/post-card.vue
index 1b3b20d88f..8ca7550c2e 100644
--- a/src/web/app/mobile/views/components/post-card.vue
+++ b/src/web/app/mobile/views/components/post-card.vue
@@ -1,8 +1,8 @@
 <template>
 <div class="mk-post-card">
-	<a :href="`/@${post.user.username}/${post.id}`">
+	<a :href="`/@${acct}/${post.id}`">
 		<header>
-			<img :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/><h3>{{ post.user.name }}</h3>
+			<img :src="`${acct}?thumbnail&size=64`" alt="avatar"/><h3>{{ post.user.name }}</h3>
 		</header>
 		<div>
 			{{ text }}
@@ -15,10 +15,14 @@
 <script lang="ts">
 import Vue from 'vue';
 import summary from '../../../../../common/get-post-summary';
+import getAcct from '../../../../../common/user/get-acct';
 
 export default Vue.extend({
 	props: ['post'],
 	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		},
 		text(): string {
 			return summary(this.post);
 		}
diff --git a/src/web/app/mobile/views/components/post-detail.sub.vue b/src/web/app/mobile/views/components/post-detail.sub.vue
index 153acf78e7..6906cf570e 100644
--- a/src/web/app/mobile/views/components/post-detail.sub.vue
+++ b/src/web/app/mobile/views/components/post-detail.sub.vue
@@ -1,13 +1,13 @@
 <template>
 <div class="root sub">
-	<router-link class="avatar-anchor" :to="`/@${post.user.username}`">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
 		<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${post.user.username}`">{{ post.user.name }}</router-link>
-			<span class="username">@{{ post.user.username }}</span>
-			<router-link class="time" :to="`/@${post.user.username}/${post.id}`">
+			<router-link class="name" :to="`/@${acct}`">{{ post.user.name }}</router-link>
+			<span class="username">@{{ acct }}</span>
+			<router-link class="time" :to="`/@${acct}/${post.id}`">
 				<mk-time :time="post.created_at"/>
 			</router-link>
 		</header>
@@ -20,8 +20,15 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
+
 export default Vue.extend({
-	props: ['post']
+	props: ['post'],
+	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		}
+	}
 });
 </script>
 
diff --git a/src/web/app/mobile/views/components/post-detail.vue b/src/web/app/mobile/views/components/post-detail.vue
index f7af71eea5..b5c9158300 100644
--- a/src/web/app/mobile/views/components/post-detail.vue
+++ b/src/web/app/mobile/views/components/post-detail.vue
@@ -17,11 +17,11 @@
 	</div>
 	<div class="repost" v-if="isRepost">
 		<p>
-			<router-link class="avatar-anchor" :to="`/@${post.user.username}`">
+			<router-link class="avatar-anchor" :to="`/@${acct}`">
 				<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=32`" alt="avatar"/>
 			</router-link>
 			%fa:retweet%
-			<router-link class="name" :to="`/@${post.user.username}`">
+			<router-link class="name" :to="`/@${acct}`">
 				{{ post.user.name }}
 			</router-link>
 			がRepost
@@ -29,12 +29,12 @@
 	</div>
 	<article>
 		<header>
-			<router-link class="avatar-anchor" :to="`/@${p.user.username}`">
+			<router-link class="avatar-anchor" :to="`/@${pAcct}`">
 				<img class="avatar" :src="`${p.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 			</router-link>
 			<div>
-				<router-link class="name" :to="`/@${p.user.username}`">{{ p.user.name }}</router-link>
-				<span class="username">@{{ p.user.username }}</span>
+				<router-link class="name" :to="`/@${pAcct}`">{{ p.user.name }}</router-link>
+				<span class="username">@{{ pAcct }}</span>
 			</div>
 		</header>
 		<div class="body">
@@ -53,7 +53,7 @@
 				<mk-post-preview :post="p.repost"/>
 			</div>
 		</div>
-		<router-link class="time" :to="`/@${p.user.username}/${p.id}`">
+		<router-link class="time" :to="`/@${pAcct}/${p.id}`">
 			<mk-time :time="p.created_at" mode="detail"/>
 		</router-link>
 		<footer>
@@ -80,6 +80,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
 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';
@@ -105,6 +106,12 @@ export default Vue.extend({
 		};
 	},
 	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		},
+		pAcct() {
+			return getAcct(this.p.user);
+		},
 		isRepost(): boolean {
 			return (this.post.repost &&
 				this.post.text == null &&
diff --git a/src/web/app/mobile/views/components/post-preview.vue b/src/web/app/mobile/views/components/post-preview.vue
index 787e1a3a74..0bd0a355b3 100644
--- a/src/web/app/mobile/views/components/post-preview.vue
+++ b/src/web/app/mobile/views/components/post-preview.vue
@@ -1,13 +1,13 @@
 <template>
 <div class="mk-post-preview">
-	<router-link class="avatar-anchor" :to="`/@${post.user.username}`">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
 		<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${post.user.username}`">{{ post.user.name }}</router-link>
-			<span class="username">@{{ post.user.username }}</span>
-			<router-link class="time" :to="`/@${post.user.username}/${post.id}`">
+			<router-link class="name" :to="`/@${acct}`">{{ post.user.name }}</router-link>
+			<span class="username">@{{ acct }}</span>
+			<router-link class="time" :to="`/@${acct}/${post.id}`">
 				<mk-time :time="post.created_at"/>
 			</router-link>
 		</header>
@@ -20,8 +20,15 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
+
 export default Vue.extend({
-	props: ['post']
+	props: ['post'],
+	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		}
+	}
 });
 </script>
 
diff --git a/src/web/app/mobile/views/components/post.sub.vue b/src/web/app/mobile/views/components/post.sub.vue
index 2427cefeb6..b6ee7c1e08 100644
--- a/src/web/app/mobile/views/components/post.sub.vue
+++ b/src/web/app/mobile/views/components/post.sub.vue
@@ -1,13 +1,13 @@
 <template>
 <div class="sub">
-	<router-link class="avatar-anchor" :to="`/@${post.user.username}`">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
 		<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=96`" alt="avatar"/>
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${post.user.username}`">{{ post.user.name }}</router-link>
-			<span class="username">@{{ post.user.username }}</span>
-			<router-link class="created-at" :to="`/@${post.user.username}/${post.id}`">
+			<router-link class="name" :to="`/@${acct}`">{{ post.user.name }}</router-link>
+			<span class="username">@{{ acct }}</span>
+			<router-link class="created-at" :to="`/@${acct}/${post.id}`">
 				<mk-time :time="post.created_at"/>
 			</router-link>
 		</header>
@@ -20,8 +20,15 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
+
 export default Vue.extend({
-	props: ['post']
+	props: ['post'],
+	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		}
+	}
 });
 </script>
 
diff --git a/src/web/app/mobile/views/components/post.vue b/src/web/app/mobile/views/components/post.vue
index b8f9e95eee..e5bc964792 100644
--- a/src/web/app/mobile/views/components/post.vue
+++ b/src/web/app/mobile/views/components/post.vue
@@ -5,25 +5,25 @@
 	</div>
 	<div class="repost" v-if="isRepost">
 		<p>
-			<router-link class="avatar-anchor" :to="`/@${post.user.username}`">
+			<router-link class="avatar-anchor" :to="`/@${acct}`">
 				<img class="avatar" :src="`${post.user.avatar_url}?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>
-			<router-link class="name" :to="`/@${post.user.username}`">{{ post.user.name }}</router-link>
+			<router-link class="name" :to="`/@${acct}`">{{ post.user.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.created_at"/>
 	</div>
 	<article>
-		<router-link class="avatar-anchor" :to="`/@${p.user.username}`">
+		<router-link class="avatar-anchor" :to="`/@${pAcct}`">
 			<img class="avatar" :src="`${p.user.avatar_url}?thumbnail&size=96`" alt="avatar"/>
 		</router-link>
 		<div class="main">
 			<header>
-				<router-link class="name" :to="`/@${p.user.username}`">{{ p.user.name }}</router-link>
-				<span class="is-bot" v-if="p.user.account.is_bot">bot</span>
-				<span class="username">@{{ p.user.username }}</span>
+				<router-link class="name" :to="`/@${pAcct}`">{{ p.user.name }}</router-link>
+				<span class="is-bot" v-if="p.user.host === null && p.user.account.is_bot">bot</span>
+				<span class="username">@{{ pAcct }}</span>
 				<div class="info">
 					<span class="mobile" v-if="p.via_mobile">%fa:mobile-alt%</span>
 					<router-link class="created-at" :to="url">
@@ -77,6 +77,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
 import MkPostMenu from '../../../common/views/components/post-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
 import XSub from './post.sub.vue';
@@ -93,6 +94,12 @@ export default Vue.extend({
 		};
 	},
 	computed: {
+		acct() {
+			return getAcct(this.post.user);
+		},
+		pAcct() {
+			return getAcct(this.p.user);
+		},
 		isRepost(): boolean {
 			return (this.post.repost &&
 				this.post.text == null &&
@@ -110,7 +117,7 @@ export default Vue.extend({
 				: 0;
 		},
 		url(): string {
-			return `/@${this.p.user.username}/${this.p.id}`;
+			return `/@${this.pAcct}/${this.p.id}`;
 		},
 		urls(): string[] {
 			if (this.p.ast) {
diff --git a/src/web/app/mobile/views/components/user-card.vue b/src/web/app/mobile/views/components/user-card.vue
index bfc748866a..5a7309cfd3 100644
--- a/src/web/app/mobile/views/components/user-card.vue
+++ b/src/web/app/mobile/views/components/user-card.vue
@@ -1,20 +1,27 @@
 <template>
 <div class="mk-user-card">
 	<header :style="user.banner_url ? `background-image: url(${user.banner_url}?thumbnail&size=1024)` : ''">
-		<a :href="`/@${user.username}`">
+		<a :href="`/@${acct}`">
 			<img :src="`${user.avatar_url}?thumbnail&size=200`" alt="avatar"/>
 		</a>
 	</header>
-	<a class="name" :href="`/@${user.username}`" target="_blank">{{ user.name }}</a>
-	<p class="username">@{{ user.username }}</p>
+	<a class="name" :href="`/@${acct}`" target="_blank">{{ user.name }}</a>
+	<p class="username">@{{ acct }}</p>
 	<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']
+	props: ['user'],
+	computed: {
+		acct() {
+			return getAcct(this.user);
+		}
+	}
 });
 </script>
 
diff --git a/src/web/app/mobile/views/components/user-preview.vue b/src/web/app/mobile/views/components/user-preview.vue
index a3db311d12..be80582cac 100644
--- a/src/web/app/mobile/views/components/user-preview.vue
+++ b/src/web/app/mobile/views/components/user-preview.vue
@@ -1,12 +1,12 @@
 <template>
 <div class="mk-user-preview">
-	<router-link class="avatar-anchor" :to="`/@${user.username}`">
+	<router-link class="avatar-anchor" :to="`/@${acct}`">
 		<img class="avatar" :src="`${user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
 	</router-link>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="`/@${user.username}`">{{ user.name }}</router-link>
-			<span class="username">@{{ user.username }}</span>
+			<router-link class="name" :to="`/@${acct}`">{{ user.name }}</router-link>
+			<span class="username">@{{ acct }}</span>
 		</header>
 		<div class="body">
 			<div class="description">{{ user.description }}</div>
@@ -17,8 +17,15 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
+
 export default Vue.extend({
-	props: ['user']
+	props: ['user'],
+	computed: {
+		acct() {
+			return getAcct(this.user);
+		}
+	}
 });
 </script>
 
diff --git a/src/web/app/mobile/views/pages/followers.vue b/src/web/app/mobile/views/pages/followers.vue
index c2b6b90e29..1edf4e38ad 100644
--- a/src/web/app/mobile/views/pages/followers.vue
+++ b/src/web/app/mobile/views/pages/followers.vue
@@ -19,6 +19,7 @@
 <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() {
@@ -41,9 +42,7 @@ export default Vue.extend({
 			Progress.start();
 			this.fetching = true;
 
-			(this as any).api('users/show', {
-				username: this.$route.params.user
-			}).then(user => {
+			(this as any).api('users/show', parseAcct(this.$route.params.user)).then(user => {
 				this.user = user;
 				this.fetching = false;
 
diff --git a/src/web/app/mobile/views/pages/following.vue b/src/web/app/mobile/views/pages/following.vue
index 6365d3b370..0dd171cce1 100644
--- a/src/web/app/mobile/views/pages/following.vue
+++ b/src/web/app/mobile/views/pages/following.vue
@@ -19,6 +19,7 @@
 <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() {
@@ -41,9 +42,7 @@ export default Vue.extend({
 			Progress.start();
 			this.fetching = true;
 
-			(this as any).api('users/show', {
-				username: this.$route.params.user
-			}).then(user => {
+			(this as any).api('users/show', parseAcct(this.$route.params.user)).then(user => {
 				this.user = user;
 				this.fetching = false;
 
diff --git a/src/web/app/mobile/views/pages/messaging-room.vue b/src/web/app/mobile/views/pages/messaging-room.vue
index eb5439915a..193c41179c 100644
--- a/src/web/app/mobile/views/pages/messaging-room.vue
+++ b/src/web/app/mobile/views/pages/messaging-room.vue
@@ -10,6 +10,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import parseAcct from '../../../../../common/user/parse-acct';
+
 export default Vue.extend({
 	data() {
 		return {
@@ -27,9 +29,7 @@ export default Vue.extend({
 	methods: {
 		fetch() {
 			this.fetching = true;
-			(this as any).api('users/show', {
-				username: (this as any).$route.params.username
-			}).then(user => {
+			(this as any).api('users/show', parseAcct(this.$route.params.user)).then(user => {
 				this.user = user;
 				this.fetching = false;
 
diff --git a/src/web/app/mobile/views/pages/messaging.vue b/src/web/app/mobile/views/pages/messaging.vue
index e0fdb4944d..e92068eda5 100644
--- a/src/web/app/mobile/views/pages/messaging.vue
+++ b/src/web/app/mobile/views/pages/messaging.vue
@@ -7,6 +7,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../common/user/get-acct';
+
 export default Vue.extend({
 	mounted() {
 		document.title = 'Misskey %i18n:mobile.tags.mk-messaging-page.message%';
@@ -14,7 +16,7 @@ export default Vue.extend({
 	},
 	methods: {
 		navigate(user) {
-			(this as any).$router.push(`/i/messaging/${user.username}`);
+			(this as any).$router.push(`/i/messaging/${getAcct(user)}`);
 		}
 	}
 });
diff --git a/src/web/app/mobile/views/pages/user.vue b/src/web/app/mobile/views/pages/user.vue
index ba66052e04..7ff897e42d 100644
--- a/src/web/app/mobile/views/pages/user.vue
+++ b/src/web/app/mobile/views/pages/user.vue
@@ -13,15 +13,15 @@
 				</div>
 				<div class="title">
 					<h1>{{ user.name }}</h1>
-					<span class="username">@{{ user.username }}</span>
+					<span class="username">@{{ acct }}</span>
 					<span class="followed" v-if="user.is_followed">%i18n:mobile.tags.mk-user.follows-you%</span>
 				</div>
 				<div class="description">{{ user.description }}</div>
 				<div class="info">
-					<p class="location" v-if="user.account.profile.location">
+					<p class="location" v-if="user.host === null && user.account.profile.location">
 						%fa:map-marker%{{ user.account.profile.location }}
 					</p>
-					<p class="birthday" v-if="user.account.profile.birthday">
+					<p class="birthday" v-if="user.host === null && user.account.profile.birthday">
 						%fa:birthday-cake%{{ user.account.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)
 					</p>
 				</div>
@@ -30,11 +30,11 @@
 						<b>{{ user.posts_count | number }}</b>
 						<i>%i18n:mobile.tags.mk-user.posts%</i>
 					</a>
-					<a :href="`@${user.username}/following`">
+					<a :href="`@${acct}/following`">
 						<b>{{ user.following_count | number }}</b>
 						<i>%i18n:mobile.tags.mk-user.following%</i>
 					</a>
-					<a :href="`@${user.username}/followers`">
+					<a :href="`@${acct}/followers`">
 						<b>{{ user.followers_count | number }}</b>
 						<i>%i18n:mobile.tags.mk-user.followers%</i>
 					</a>
@@ -60,6 +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 Progress from '../../../common/scripts/loading';
 import XHome from './user/home.vue';
 
@@ -75,6 +77,9 @@ export default Vue.extend({
 		};
 	},
 	computed: {
+		acct() {
+			return this.getAcct(this.user);
+		},
 		age(): number {
 			return age(this.user.account.profile.birthday);
 		}
@@ -92,9 +97,7 @@ export default Vue.extend({
 		fetch() {
 			Progress.start();
 
-			(this as any).api('users/show', {
-				username: this.$route.params.user
-			}).then(user => {
+			(this as any).api('users/show', parseAcct(this.$route.params.user)).then(user => {
 				this.user = user;
 				this.fetching = false;
 
diff --git a/src/web/app/mobile/views/pages/user/home.followers-you-know.vue b/src/web/app/mobile/views/pages/user/home.followers-you-know.vue
index 7b02020b10..1a2b8f7083 100644
--- a/src/web/app/mobile/views/pages/user/home.followers-you-know.vue
+++ b/src/web/app/mobile/views/pages/user/home.followers-you-know.vue
@@ -2,7 +2,7 @@
 <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="`/@${user.username}`">
+		<a v-for="user in users" :key="user.id" :href="`/@${getAcct(user)}`">
 			<img :src="`${user.avatar_url}?thumbnail&size=64`" :alt="user.name"/>
 		</a>
 	</div>
@@ -12,6 +12,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../../common/user/get-acct';
+
 export default Vue.extend({
 	props: ['user'],
 	data() {
@@ -20,6 +22,9 @@ export default Vue.extend({
 			users: []
 		};
 	},
+	methods: {
+		getAcct
+	},
 	mounted() {
 		(this as any).api('users/followers', {
 			user_id: this.user.id,
diff --git a/src/web/app/mobile/views/pages/user/home.photos.vue b/src/web/app/mobile/views/pages/user/home.photos.vue
index 385e5b8dd6..f12f59a407 100644
--- a/src/web/app/mobile/views/pages/user/home.photos.vue
+++ b/src/web/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="`/@${image.post.user.username}/${image.post.id}`"
+			:href="`/@${getAcct(image.post.user)}/${image.post.id}`"
 		></a>
 	</div>
 	<p class="empty" v-if="!fetching && images.length == 0">%i18n:mobile.tags.mk-user-overview-photos.no-photos%</p>
@@ -14,6 +14,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import getAcct from '../../../../../../common/user/get-acct';
+
 export default Vue.extend({
 	props: ['user'],
 	data() {
@@ -22,6 +24,9 @@ export default Vue.extend({
 			images: []
 		};
 	},
+	methods: {
+		getAcct
+	},
 	mounted() {
 		(this as any).api('users/posts', {
 			user_id: this.user.id,
diff --git a/src/web/app/mobile/views/pages/user/home.vue b/src/web/app/mobile/views/pages/user/home.vue
index dabb3f60b8..e3def61512 100644
--- a/src/web/app/mobile/views/pages/user/home.vue
+++ b/src/web/app/mobile/views/pages/user/home.vue
@@ -31,7 +31,7 @@
 			<x-followers-you-know :user="user"/>
 		</div>
 	</section>
-	<p>%i18n:mobile.tags.mk-user-overview.last-used-at%: <b><mk-time :time="user.account.last_used_at"/></b></p>
+	<p v-if="user.host === null">%i18n:mobile.tags.mk-user-overview.last-used-at%: <b><mk-time :time="user.account.last_used_at"/></b></p>
 </div>
 </template>