:sushi:

Closes #12, #227 and #58

33 files changed, 156 insertions, 152 deletions

diff --git a/src/web/app/common/mixins.js b/src/web/app/common/mixins.js
deleted file mode 100644
index 220e033846..0000000000
--- a/src/web/app/common/mixins.js
+++ /dev/null
@@ -1,48 +0,0 @@
-const riot = require('riot');
-
-module.exports = me => {
-	const i = me ? me.token : null;
-
-	require('./scripts/i')(me);
-
-	riot.mixin('api', {
-		api: require('./scripts/api').bind(null, i)
-	});
-
-	riot.mixin('cropper', {
-		Cropper: require('cropperjs')
-	});
-
-	riot.mixin('signout', {
-		signout: require('./scripts/signout')
-	});
-
-	riot.mixin('messaging-stream', {
-		MessagingStreamConnection: require('./scripts/messaging-stream')
-	});
-
-	riot.mixin('is-promise', {
-		isPromise: require('./scripts/is-promise')
-	});
-
-	riot.mixin('get-post-summary', {
-		getPostSummary: require('./scripts/get-post-summary')
-	});
-
-	riot.mixin('date-stringify', {
-		dateStringify: require('./scripts/date-stringify')
-	});
-
-	riot.mixin('text', {
-		analyze: require('../../../common/text/index'),
-		compile: require('./scripts/text-compiler')
-	});
-
-	riot.mixin('get-password-strength', {
-		getPasswordStrength: require('syuilo-password-strength')
-	});
-
-	riot.mixin('ui-progress', {
-		Progress: require('./scripts/loading')
-	});
-};
diff --git a/src/web/app/common/mixins/api.js b/src/web/app/common/mixins/api.js
new file mode 100644
index 0000000000..42d96db559
--- /dev/null
+++ b/src/web/app/common/mixins/api.js
@@ -0,0 +1,8 @@
+import * as riot from 'riot';
+import api from '../scripts/api';
+
+export default me => {
+	riot.mixin('api', {
+		api: api.bind(null, me ? me.token : null)
+	});
+};
diff --git a/src/web/app/common/scripts/i.js b/src/web/app/common/mixins/i.js
index 20c33c6402..5225147766 100644
--- a/src/web/app/common/scripts/i.js
+++ b/src/web/app/common/mixins/i.js
@@ -1,6 +1,6 @@
-const riot = require('riot');
+import * as riot from 'riot';
 
-module.exports = me => {
+export default me => {
 	riot.mixin('i', {
 		init: function() {
 			this.I = me;
diff --git a/src/web/app/common/mixins/index.js b/src/web/app/common/mixins/index.js
new file mode 100644
index 0000000000..29cb6c9b6a
--- /dev/null
+++ b/src/web/app/common/mixins/index.js
@@ -0,0 +1,9 @@
+import activateMe from './i';
+import activateApi from './api';
+import activateStream from './stream';
+
+export default me => {
+	activateMe(me);
+	activateApi(me);
+	activateStream(me);
+};
diff --git a/src/web/app/common/mixins/stream.js b/src/web/app/common/mixins/stream.js
new file mode 100644
index 0000000000..e3b616a1a5
--- /dev/null
+++ b/src/web/app/common/mixins/stream.js
@@ -0,0 +1,9 @@
+import * as riot from 'riot';
+import Connection from '../scripts/stream';
+
+export default me => {
+	const stream = me ? new Connection(me) : null;
+	riot.mixin('stream', {
+		stream: stream
+	});
+};
diff --git a/src/web/app/common/scripts/api.js b/src/web/app/common/scripts/api.js
index 3df54b645a..4855f736c7 100644
--- a/src/web/app/common/scripts/api.js
+++ b/src/web/app/common/scripts/api.js
@@ -2,7 +2,7 @@
  * API Request
  */
 
-const CONFIG = require('./config');
+import CONFIG from './config';
 
 let spinner = null;
 let pending = 0;
@@ -14,7 +14,7 @@ let pending = 0;
  * @param  {any} [data={}] Data
  * @return {Promise<any>} Response
  */
-module.exports = (i, endpoint, data = {}) => {
+export default (i, endpoint, data = {}) => {
 	if (++pending === 1) {
 		spinner = document.createElement('div');
 		spinner.setAttribute('id', 'wait');
diff --git a/src/web/app/common/scripts/bytes-to-size.js b/src/web/app/common/scripts/bytes-to-size.js
index 717f9ad507..e143387141 100644
--- a/src/web/app/common/scripts/bytes-to-size.js
+++ b/src/web/app/common/scripts/bytes-to-size.js
@@ -1,6 +1,6 @@
-module.exports = function(bytes) {
+export default bytes => {
 	var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
 	if (bytes == 0) return '0Byte';
 	var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
 	return Math.round(bytes / Math.pow(1024, i), 2) + sizes[i];
-}
+};
diff --git a/src/web/app/common/scripts/check-for-update.js b/src/web/app/common/scripts/check-for-update.js
new file mode 100644
index 0000000000..637e6a9fb8
--- /dev/null
+++ b/src/web/app/common/scripts/check-for-update.js
@@ -0,0 +1,14 @@
+import CONFIG from './config';
+
+export default function() {
+	fetch(CONFIG.apiUrl + '/meta', {
+		method: 'POST'
+	}).then(res => {
+		res.json().then(meta => {
+			if (meta.version != VERSION) {
+				localStorage.setItem('should-refresh', 'true');
+				alert('Misskeyの新しいバージョンがあります。ページを再度読み込みすると更新が適用されます。');
+			}
+		});
+	});
+};
diff --git a/src/web/app/common/scripts/config.js b/src/web/app/common/scripts/config.js
index 4203431bd0..16f75d6e16 100644
--- a/src/web/app/common/scripts/config.js
+++ b/src/web/app/common/scripts/config.js
@@ -9,7 +9,7 @@ const apiUrl = `${scheme}//api.${host}`;
 const devUrl = `${scheme}//dev.${host}`;
 const aboutUrl = `${scheme}//about.${host}`;
 
-module.exports = {
+export default {
 	host,
 	scheme,
 	url,
diff --git a/src/web/app/common/scripts/contains.js b/src/web/app/common/scripts/contains.js
index fe73666193..a5071b3f25 100644
--- a/src/web/app/common/scripts/contains.js
+++ b/src/web/app/common/scripts/contains.js
@@ -1,8 +1,8 @@
-module.exports = function(parent, child) {
+export default (parent, child) => {
 	let node = child.parentNode;
 	while (node) {
 		if (node == parent) return true;
 		node = node.parentNode;
 	}
 	return false;
-}
+};
diff --git a/src/web/app/common/scripts/copy-to-clipboard.js b/src/web/app/common/scripts/copy-to-clipboard.js
index 2e67024c85..3d2741f8d7 100644
--- a/src/web/app/common/scripts/copy-to-clipboard.js
+++ b/src/web/app/common/scripts/copy-to-clipboard.js
@@ -1,7 +1,7 @@
 /**
  * Clipboardに値をコピー(TODO: 文字列以外も対応)
  */
-module.exports = val => {
+export default val => {
 	const form = document.createElement('textarea');
 	form.textContent = val;
 	document.body.appendChild(form);
diff --git a/src/web/app/common/scripts/date-stringify.js b/src/web/app/common/scripts/date-stringify.js
index d803587f2c..e51de8833d 100644
--- a/src/web/app/common/scripts/date-stringify.js
+++ b/src/web/app/common/scripts/date-stringify.js
@@ -1,12 +1,12 @@
-module.exports = date => {
+export default date => {
 	if (typeof date == 'string') date = new Date(date);
 	return (
-		date.getFullYear()    + '年' + 
-		(date.getMonth() + 1) + '月' + 
+		date.getFullYear()    + '年' +
+		(date.getMonth() + 1) + '月' +
 		date.getDate()        + '日' +
 		' ' +
-		date.getHours()       + '時' + 
-		date.getMinutes()     + '分' + 
+		date.getHours()       + '時' +
+		date.getMinutes()     + '分' +
 		' ' +
 		`(${['日', '月', '火', '水', '木', '金', '土'][date.getDay()]})`
 	);
diff --git a/src/web/app/common/scripts/gcd.js b/src/web/app/common/scripts/gcd.js
index 43bfbc57ae..9a19f9da66 100644
--- a/src/web/app/common/scripts/gcd.js
+++ b/src/web/app/common/scripts/gcd.js
@@ -1,2 +1,2 @@
 const gcd = (a, b) => !b ? a : gcd(b, a % b);
-module.exports = gcd;
+export default gcd;
diff --git a/src/web/app/common/scripts/generate-default-userdata.js b/src/web/app/common/scripts/generate-default-userdata.js
index fbe2e99075..c19228dd49 100644
--- a/src/web/app/common/scripts/generate-default-userdata.js
+++ b/src/web/app/common/scripts/generate-default-userdata.js
@@ -1,4 +1,4 @@
-const uuid = require('./uuid.js');
+import uuid from './uuid';
 
 const home = {
 	left: [
@@ -17,7 +17,7 @@ const home = {
 	]
 };
 
-module.exports = () => {
+export default () => {
 	const homeData = [];
 
 	home.left.forEach(widget => {
diff --git a/src/web/app/common/scripts/get-cat.js b/src/web/app/common/scripts/get-cat.js
index cd28c7bdaa..cad42c88c8 100644
--- a/src/web/app/common/scripts/get-cat.js
+++ b/src/web/app/common/scripts/get-cat.js
@@ -1,3 +1 @@
-module.exports = () => {
-	return '(=^・・^=)';
-};
+export default () => '(=^・・^=)';
diff --git a/src/web/app/common/scripts/get-post-summary.js b/src/web/app/common/scripts/get-post-summary.js
index 5e8319b61c..83eda8f6b4 100644
--- a/src/web/app/common/scripts/get-post-summary.js
+++ b/src/web/app/common/scripts/get-post-summary.js
@@ -32,4 +32,4 @@ const summarize = post => {
 	return summary.trim();
 };
 
-module.exports = summarize;
+export default summarize;
diff --git a/src/web/app/common/scripts/is-promise.js b/src/web/app/common/scripts/is-promise.js
index fd3dc42da3..3b4cd70b49 100644
--- a/src/web/app/common/scripts/is-promise.js
+++ b/src/web/app/common/scripts/is-promise.js
@@ -1 +1 @@
-module.exports = x => typeof x.then == 'function';
+export default x => typeof x.then == 'function';
diff --git a/src/web/app/common/scripts/loading.js b/src/web/app/common/scripts/loading.js
index fa7eafaf96..c48e626648 100644
--- a/src/web/app/common/scripts/loading.js
+++ b/src/web/app/common/scripts/loading.js
@@ -6,7 +6,7 @@ NProgress.configure({
 
 const root = document.getElementsByTagName('html')[0];
 
-module.exports = {
+export default {
 	start: () => {
 		root.classList.add('progress');
 		NProgress.start();
diff --git a/src/web/app/common/scripts/messaging-stream.js b/src/web/app/common/scripts/messaging-stream.js
index 0c8ce3c9d2..50d41c2be9 100644
--- a/src/web/app/common/scripts/messaging-stream.js
+++ b/src/web/app/common/scripts/messaging-stream.js
@@ -1,6 +1,6 @@
 const ReconnectingWebSocket = require('reconnecting-websocket');
-const riot = require('riot');
-const CONFIG = require('./config');
+import * as riot from 'riot';
+import CONFIG from './config';
 
 class Connection {
 	constructor(me, otherparty) {
@@ -40,4 +40,4 @@ class Connection {
 	}
 }
 
-module.exports = Connection;
+export default Connection;
diff --git a/src/web/app/common/scripts/signout.js b/src/web/app/common/scripts/signout.js
index 7242ebc5b0..6c95cfbc9c 100644
--- a/src/web/app/common/scripts/signout.js
+++ b/src/web/app/common/scripts/signout.js
@@ -1,6 +1,6 @@
-const CONFIG = require('./config');
+import CONFIG from './config';
 
-module.exports = () => {
+export default () => {
 	localStorage.removeItem('me');
 	document.cookie = `i=; domain=.${CONFIG.host}; expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
 	location.href = '/';
diff --git a/src/web/app/common/scripts/stream.js b/src/web/app/common/scripts/stream.js
index fd7bac7faa..d6e6bf8aa5 100644
--- a/src/web/app/common/scripts/stream.js
+++ b/src/web/app/common/scripts/stream.js
@@ -1,40 +1,53 @@
 const ReconnectingWebSocket = require('reconnecting-websocket');
-const riot = require('riot');
-const CONFIG = require('./config');
+import * as riot from 'riot';
+import CONFIG from './config';
 
-module.exports = me => {
-	let state = 'initializing';
-	const stateEv = riot.observable();
-	const event = riot.observable();
-	const host = CONFIG.apiUrl.replace('http', 'ws');
-	const socket = new ReconnectingWebSocket(`${host}?i=${me.token}`);
+class Connection {
+	constructor(me) {
+		// BIND -----------------------------------
+		this.onOpen =    this.onOpen.bind(this);
+		this.onClose =   this.onClose.bind(this);
+		this.onMessage = this.onMessage.bind(this);
+		this.close =     this.close.bind(this);
+		// ----------------------------------------
 
-	socket.onopen = () => {
-		state = 'connected';
-		stateEv.trigger('connected');
-	};
+		this.state = 'initializing';
+		this.stateEv = riot.observable();
+		this.event = riot.observable();
+		this.me = me;
 
-	socket.onclose = () => {
-		state = 'reconnecting';
-		stateEv.trigger('closed');
-	};
+		const host = CONFIG.apiUrl.replace('http', 'ws');
+		this.socket = new ReconnectingWebSocket(`${host}?i=${me.token}`);
+		this.socket.addEventListener('open', this.onOpen);
+		this.socket.addEventListener('close', this.onClose);
+		this.socket.addEventListener('message', this.onMessage);
 
-	socket.onmessage = message => {
+		this.event.on('i_updated', me.update);
+	}
+
+	onOpen() {
+		this.state = 'connected';
+		this.stateEv.trigger('connected');
+	}
+
+	onClose() {
+		this.state = 'reconnecting';
+		this.stateEv.trigger('closed');
+	}
+
+	onMessage(message) {
 		try {
 			const msg = JSON.parse(message.data);
-			if (msg.type) {
-				event.trigger(msg.type, msg.body);
-			}
-		} catch (e) {
+			if (msg.type) this.event.trigger(msg.type, msg.body);
+		} catch(e) {
 			// noop
 		}
-	};
+	}
 
-	event.on('i_updated', me.update);
+	close() {
+		this.socket.removeEventListener('open', this.onOpen);
+		this.socket.removeEventListener('message', this.onMessage);
+	}
+}
 
-	return {
-		stateEv: stateEv,
-		getState: () => state,
-		event: event
-	};
-};
+export default Connection;
diff --git a/src/web/app/common/scripts/text-compiler.js b/src/web/app/common/scripts/text-compiler.js
index d4570ca923..1743a549aa 100644
--- a/src/web/app/common/scripts/text-compiler.js
+++ b/src/web/app/common/scripts/text-compiler.js
@@ -1,13 +1,13 @@
-const riot = require('riot');
+import * as riot from 'riot';
 //const emojinize = require('emojinize');
-const CONFIG = require('./config');
+import CONFIG from './config';
 
 const escape = text =>
 	text
 		.replace(/>/g, '&gt;')
 		.replace(/</g, '&lt;');
 
-module.exports = (tokens, shouldBreak) => {
+export default (tokens, shouldBreak) => {
 	if (shouldBreak == null) {
 		shouldBreak = true;
 	}
@@ -20,21 +20,21 @@ module.exports = (tokens, shouldBreak) => {
 				return escape(token.content)
 					.replace(/(\r\n|\n|\r)/g, shouldBreak ? '<br>' : ' ');
 			case 'bold':
-				return '<strong>' + escape(token.bold) + '</strong>';
+				return `<strong>${escape(token.bold)}</strong>`;
 			case 'url':
-				return '<mk-url href="' + escape(token.content) + '" target="_blank"></mk-url>';
+				return `<mk-url href="${escape(token.content)}" target="_blank"></mk-url>`;
 			case 'link':
-				return '<a class="link" href="' + escape(token.url) + '" target="_blank">' + escape(token.title) + '</a>';
+				return `<a class="link" href="${escape(token.url)}" target="_blank" title="${escape(token.url)}">${escape(token.title)}</a>`;
 			case 'mention':
-				return '<a href="' + CONFIG.url + '/' + escape(token.username) + '" target="_blank" data-user-preview="' + token.content + '" ' + (me && me.username == token.username ? 'data-is-me' : '') + '>' + token.content + '</a>';
+				return `<a href="${CONFIG.url + '/' + escape(token.username)}" target="_blank" data-user-preview="${token.content}" ${me && me.username == token.username ? 'data-is-me' : ''}>${token.content}</a>`;
 			case 'hashtag': // TODO
-				return '<a>' + escape(token.content) + '</a>';
+				return `<a>${escape(token.content)}</a>`;
 			case 'code':
-				return '<pre><code>' + token.html + '</code></pre>';
+				return `<pre><code>${token.html}</code></pre>`;
 			case 'inline-code':
-				return '<code>' + token.html + '</code>';
+				return `<code>${token.html}</code>`;
 			case 'emoji':
-				return '<i>' + token.content + '</i>';
+				return `<i>${token.content}</i>`;
 				//return emojinize.encode(token.content)
 		}
 	}).join('');
diff --git a/src/web/app/common/scripts/uuid.js b/src/web/app/common/scripts/uuid.js
index 6161190d63..6a103d6e04 100644
--- a/src/web/app/common/scripts/uuid.js
+++ b/src/web/app/common/scripts/uuid.js
@@ -1,12 +1,12 @@
-module.exports = function () {
+export default () => {
 	var uuid = '', i, random;
 	for (i = 0; i < 32; i++) {
 		random = Math.random() * 16 | 0;
 
 		if (i == 8 || i == 12 || i == 16 || i == 20) {
-			uuid += '-'
+			uuid += '-';
 		}
 		uuid += (i == 12 ? 4 : (i == 16 ? (random & 3 | 8) : random)).toString(16);
 	}
 	return uuid;
-}
+};
diff --git a/src/web/app/common/tags/introduction.tag b/src/web/app/common/tags/introduction.tag
index fda011efff..fa1b1e247a 100644
--- a/src/web/app/common/tags/introduction.tag
+++ b/src/web/app/common/tags/introduction.tag
@@ -1,9 +1,9 @@
 <mk-introduction>
 	<article>
-		<h1>Misskeyとは？</h1><p><ruby>Misskey<rt>みすきー</rt></ruby>は、<a href="http://syuilo.com" target="_blank">syuilo</a>が2014年くらいから<a href="https://github.com/syuilo/misskey" target="_blank">オープンソースで</a>開発・運営を行っている、ミニブログベースのSNSです。</p>
-<p>Twitter, Facebook, LINE, Google+ などを<del>パクって</del><i>参考にして</i>います。</p>
-<p>無料で誰でも利用でき、広告は一切掲載していません。</p>
-<p><a href={ CONFIG.aboutUrl } target="_blank">もっと知りたい方はこちら</a></p>
+		<h1>Misskeyとは？</h1>
+		<p><ruby>Misskey<rt>みすきー</rt></ruby>は、<a href="http://syuilo.com" target="_blank">syuilo</a>が2014年くらいから<a href="https://github.com/syuilo/misskey" target="_blank">オープンソースで</a>開発・運営を行っている、ミニブログベースのSNSです。</p>
+		<p>無料で誰でも利用でき、広告も掲載していません。</p>
+		<p><a href={ CONFIG.aboutUrl } target="_blank">もっと知りたい方はこちら</a></p>
 	</article>
 	<style>
 		:scope
diff --git a/src/web/app/common/tags/messaging/form.tag b/src/web/app/common/tags/messaging/form.tag
index 4e5f5262af..41a3599f68 100644
--- a/src/web/app/common/tags/messaging/form.tag
+++ b/src/web/app/common/tags/messaging/form.tag
@@ -119,7 +119,7 @@
 	<script>
 		this.mixin('api');
 
-		this.onpaste = (e) => {
+		this.onpaste = e => {
 			const data = e.clipboardData;
 			const items = data.items;
 			for (let i = 0; i < items.length; i++) {
@@ -130,7 +130,7 @@
 			}
 		};
 
-		this.onkeypress = (e) => {
+		this.onkeypress = e => {
 			if ((e.which == 10 || e.which == 13) && e.ctrlKey) {
 				this.send();
 			}
diff --git a/src/web/app/common/tags/messaging/message.tag b/src/web/app/common/tags/messaging/message.tag
index 8657d2ffdd..6d2651e5a1 100644
--- a/src/web/app/common/tags/messaging/message.tag
+++ b/src/web/app/common/tags/messaging/message.tag
@@ -203,17 +203,18 @@
 
 	</style>
 	<script>
+		import compile from '../../../common/scripts/text-compiler';
+
 		this.mixin('i');
-		this.mixin('text');
 
 		this.message = this.opts.message;
 		this.message.is_me = this.message.user.id == this.I.id;
 
 		this.on('mount', () => {
 			if (this.message.text) {
-				const tokens = this.analyze(this.message.text);
+				const tokens = this.message.ast;
 
-				this.refs.text.innerHTML = this.compile(tokens);
+				this.refs.text.innerHTML = compile(tokens);
 
 				this.refs.text.children.forEach(e => {
 					if (e.tagName == 'MK-URL') riot.mount(e);
diff --git a/src/web/app/common/tags/messaging/room.tag b/src/web/app/common/tags/messaging/room.tag
index 4393ea9b86..d34a019fe0 100644
--- a/src/web/app/common/tags/messaging/room.tag
+++ b/src/web/app/common/tags/messaging/room.tag
@@ -123,9 +123,10 @@
 
 	</style>
 	<script>
+		import MessagingStreamConnection from '../../scripts/messaging-stream';
+
 		this.mixin('i');
 		this.mixin('api');
-		this.mixin('messaging-stream');
 
 		this.user = this.opts.user;
 		this.init = true;
@@ -133,7 +134,7 @@
 		this.messages = [];
 		this.isNaked = this.opts.isNaked;
 
-		this.connection = new this.MessagingStreamConnection(this.I, this.user.id);
+		this.connection = new MessagingStreamConnection(this.I, this.user.id);
 
 		this.on('mount', () => {
 			this.connection.event.on('message', this.onMessage);
diff --git a/src/web/app/common/tags/public-timeline.tag b/src/web/app/common/tags/public-timeline.tag
index 7efdb2886c..c39a231813 100644
--- a/src/web/app/common/tags/public-timeline.tag
+++ b/src/web/app/common/tags/public-timeline.tag
@@ -87,12 +87,10 @@
 
 	</style>
 	<script>
-		this.mixin('text');
+		import compile from '../../common/scripts/text-compiler';
 
 		this.on('mount', () => {
-			this.mixin('text');
-			const tokens = this.analyze(this.text);
-			const text = this.compile(tokens);
+			const text = compile(this.ast);
 			this.refs.text.innerHTML = text;
 		});
 	</script>
diff --git a/src/web/app/common/tags/raw.tag b/src/web/app/common/tags/raw.tag
index 0637675c45..e1285694e4 100644
--- a/src/web/app/common/tags/raw.tag
+++ b/src/web/app/common/tags/raw.tag
@@ -2,7 +2,8 @@
 	<style>
 		:scope
 			display inline
-
 	</style>
-	<script>this.root.innerHTML = this.opts.content</script>
+	<script>
+		this.root.innerHTML = this.opts.content;
+	</script>
 </mk-raw>
diff --git a/src/web/app/common/tags/signin-history.tag b/src/web/app/common/tags/signin-history.tag
index 3868980058..00b0cecced 100644
--- a/src/web/app/common/tags/signin-history.tag
+++ b/src/web/app/common/tags/signin-history.tag
@@ -48,9 +48,12 @@
 
 	</style>
 	<script>
+		this.mixin('i');
 		this.mixin('api');
 		this.mixin('stream');
 
+		const stream = this.stream.event;
+
 		this.history = [];
 		this.fetching = true;
 
@@ -62,11 +65,11 @@
 				});
 			});
 
-			this.stream.on('signin', this.onSignin);
+			stream.on('signin', this.onSignin);
 		});
 
 		this.on('unmount', () => {
-			this.stream.off('signin', this.onSignin);
+			stream.off('signin', this.onSignin);
 		});
 
 		this.onSignin = signin => {
diff --git a/src/web/app/common/tags/signup.tag b/src/web/app/common/tags/signup.tag
index d5c7889bb1..9f81801694 100644
--- a/src/web/app/common/tags/signup.tag
+++ b/src/web/app/common/tags/signup.tag
@@ -175,7 +175,7 @@
 	</style>
 	<script>
 		this.mixin('api');
-		this.mixin('get-password-strength');
+		const getPasswordStrength = require('syuilo-password-strength');
 
 		this.usernameState = null;
 		this.passwordStrength = '';
@@ -257,7 +257,7 @@
 				return;
 			}
 
-			const strength = this.getPasswordStrength(password);
+			const strength = getPasswordStrength(password);
 			this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
 			this.update();
 			this.refs.passwordMetar.style.width = `${strength * 100}%`;
diff --git a/src/web/app/common/tags/stream-indicator.tag b/src/web/app/common/tags/stream-indicator.tag
index 7d343a438a..9c348b3987 100644
--- a/src/web/app/common/tags/stream-indicator.tag
+++ b/src/web/app/common/tags/stream-indicator.tag
@@ -1,13 +1,13 @@
 <mk-stream-indicator>
-	<p if={ state == 'initializing' }>
+	<p if={ stream.state == 'initializing' }>
 		<i class="fa fa-spinner fa-spin"></i>
 		<span>接続中<mk-ellipsis></mk-ellipsis></span>
 	</p>
-	<p if={ state == 'reconnecting' }>
+	<p if={ stream.state == 'reconnecting' }>
 		<i class="fa fa-spinner fa-spin"></i>
 		<span>切断されました 接続中<mk-ellipsis></mk-ellipsis></span>
 	</p>
-	<p if={ state == 'connected' }>
+	<p if={ stream.state == 'connected' }>
 		<i class="fa fa-check"></i>
 		<span>接続完了</span>
 	</p>
@@ -34,18 +34,16 @@
 
 	</style>
 	<script>
+		this.mixin('i');
 		this.mixin('stream');
 
 		this.on('before-mount', () => {
-			this.state = this.getStreamState();
-
-			if (this.state == 'connected') {
+			if (this.stream.state == 'connected') {
 				this.root.style.opacity = 0;
 			}
 		});
 
-		this.streamStateEv.on('connected', () => {
-			this.state = this.getStreamState();
+		this.stream.stateEv.on('connected', () => {
 			this.update();
 			setTimeout(() => {
 				Velocity(this.root, {
@@ -54,8 +52,7 @@
 			}, 1000);
 		});
 
-		this.streamStateEv.on('closed', () => {
-			this.state = this.getStreamState();
+		this.stream.stateEv.on('closed', () => {
 			this.update();
 			Velocity(this.root, {
 				opacity: 1
diff --git a/src/web/app/common/tags/url-preview.tag b/src/web/app/common/tags/url-preview.tag
index c21e431e5e..bc86f441f2 100644
--- a/src/web/app/common/tags/url-preview.tag
+++ b/src/web/app/common/tags/url-preview.tag
@@ -97,7 +97,7 @@
 		this.loading = true;
 
 		this.on('mount', () => {
-			fetch(CONFIG.url + '/api:url?url=' + this.url).then(res => {
+			fetch('/api:url?url=' + this.url).then(res => {
 				res.json().then(info => {
 					this.title = info.title;
 					this.description = info.description;