:sushi:

Closes #12, #227 and #58

36 files changed, 178 insertions, 173 deletions

diff --git a/src/web/app/mobile/mixins.js b/src/web/app/mobile/mixins.js
deleted file mode 100644
index 98601a1072..0000000000
--- a/src/web/app/mobile/mixins.js
+++ /dev/null
@@ -1,25 +0,0 @@
-const riot = require('riot');
-
-module.exports = me => {
-	if (me) {
-		require('./scripts/stream')(me);
-	}
-
-	require('./scripts/ui');
-
-	riot.mixin('open-post-form', {
-		openPostForm: opts => {
-			const app = document.getElementById('app');
-			app.style.display = 'none';
-
-			function recover() {
-				app.style.display = 'block';
-			}
-
-			const form = riot.mount(document.body.appendChild(document.createElement('mk-post-form')), opts)[0];
-			form
-				.on('cancel', recover)
-				.on('post', recover);
-		}
-	});
-};
diff --git a/src/web/app/mobile/router.js b/src/web/app/mobile/router.js
index df4871f292..d0b45d9614 100644
--- a/src/web/app/mobile/router.js
+++ b/src/web/app/mobile/router.js
@@ -2,11 +2,11 @@
  * Mobile App Router
  */
 
-const riot = require('riot');
+import * as riot from 'riot';
 const route = require('page');
 let page = null;
 
-module.exports = me => {
+export default me => {
 	route('/',                           index);
 	route('/i/notifications',            notifications);
 	route('/i/messaging',                messaging);
diff --git a/src/web/app/mobile/script.js b/src/web/app/mobile/script.js
index 53f4d9f524..22150f46ad 100644
--- a/src/web/app/mobile/script.js
+++ b/src/web/app/mobile/script.js
@@ -6,9 +6,8 @@
 import './style.styl';
 
 require('./tags');
-const boot = require('../boot');
-const mixins = require('./mixins');
-const route = require('./router');
+import boot from '../boot';
+import route from './router';
 
 /**
  * Boot
@@ -17,9 +16,6 @@ boot(me => {
 	// http://qiita.com/junya/items/3ff380878f26ca447f85
 	document.body.setAttribute('ontouchstart', '');
 
-	// Register mixins
-	mixins(me);
-
 	// Start routing
 	route(me);
 });
diff --git a/src/web/app/mobile/scripts/open-post-form.js b/src/web/app/mobile/scripts/open-post-form.js
new file mode 100644
index 0000000000..e0fae4d8ca
--- /dev/null
+++ b/src/web/app/mobile/scripts/open-post-form.js
@@ -0,0 +1,15 @@
+import * as riot from 'riot';
+
+export default opts => {
+	const app = document.getElementById('app');
+	app.style.display = 'none';
+
+	function recover() {
+		app.style.display = 'block';
+	}
+
+	const form = riot.mount(document.body.appendChild(document.createElement('mk-post-form')), opts)[0];
+	form
+		.on('cancel', recover)
+		.on('post', recover);
+};
diff --git a/src/web/app/mobile/scripts/stream.js b/src/web/app/mobile/scripts/stream.js
deleted file mode 100644
index e12788f60b..0000000000
--- a/src/web/app/mobile/scripts/stream.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const stream = require('../../common/scripts/stream');
-const riot = require('riot');
-
-module.exports = me => {
-	const s = stream(me);
-	riot.mixin('stream', {
-		stream: s.event,
-		getStreamState: s.getState,
-		streamStateEv: s.stateEv
-	});
-};
diff --git a/src/web/app/mobile/scripts/ui-event.js b/src/web/app/mobile/scripts/ui-event.js
new file mode 100644
index 0000000000..2e406549a4
--- /dev/null
+++ b/src/web/app/mobile/scripts/ui-event.js
@@ -0,0 +1,5 @@
+import * as riot from 'riot';
+
+const ev = riot.observable();
+
+export default ev;
diff --git a/src/web/app/mobile/scripts/ui.js b/src/web/app/mobile/scripts/ui.js
deleted file mode 100644
index 51ab6acd2d..0000000000
--- a/src/web/app/mobile/scripts/ui.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const riot = require('riot');
-
-const ui = riot.observable();
-
-riot.mixin('ui', {
-	ui: ui
-});
diff --git a/src/web/app/mobile/tags/drive.tag b/src/web/app/mobile/tags/drive.tag
index 9dc2fbe4ca..adf1bf01ac 100644
--- a/src/web/app/mobile/tags/drive.tag
+++ b/src/web/app/mobile/tags/drive.tag
@@ -133,9 +133,12 @@
 
 	</style>
 	<script>
+		this.mixin('i');
 		this.mixin('api');
 		this.mixin('stream');
 
+		const stream = this.stream.event;
+
 		this.files = [];
 		this.folders = [];
 		this.hierarchyFolders = [];
@@ -151,10 +154,10 @@
 		this.multiple =this.opts.multiple;
 
 		this.on('mount', () => {
-			this.stream.on('drive_file_created', this.onStreamDriveFileCreated);
-			this.stream.on('drive_file_updated', this.onStreamDriveFileUpdated);
-			this.stream.on('drive_folder_created', this.onStreamDriveFolderCreated);
-			this.stream.on('drive_folder_updated', this.onStreamDriveFolderUpdated);
+			stream.on('drive_file_created', this.onStreamDriveFileCreated);
+			stream.on('drive_file_updated', this.onStreamDriveFileUpdated);
+			stream.on('drive_folder_created', this.onStreamDriveFolderCreated);
+			stream.on('drive_folder_updated', this.onStreamDriveFolderUpdated);
 
 			// Riotのバグでnullを渡しても""になる
 			// https://github.com/riot/riot/issues/2080
@@ -170,10 +173,10 @@
 		});
 
 		this.on('unmount', () => {
-			this.stream.off('drive_file_created', this.onStreamDriveFileCreated);
-			this.stream.off('drive_file_updated', this.onStreamDriveFileUpdated);
-			this.stream.off('drive_folder_created', this.onStreamDriveFolderCreated);
-			this.stream.off('drive_folder_updated', this.onStreamDriveFolderUpdated);
+			stream.off('drive_file_created', this.onStreamDriveFileCreated);
+			stream.off('drive_file_updated', this.onStreamDriveFileUpdated);
+			stream.off('drive_folder_created', this.onStreamDriveFolderCreated);
+			stream.off('drive_folder_updated', this.onStreamDriveFolderUpdated);
 		});
 
 		this.onStreamDriveFileCreated = file => {
diff --git a/src/web/app/mobile/tags/drive/file-viewer.tag b/src/web/app/mobile/tags/drive/file-viewer.tag
index ac3a120b4d..2d5c722552 100644
--- a/src/web/app/mobile/tags/drive/file-viewer.tag
+++ b/src/web/app/mobile/tags/drive/file-viewer.tag
@@ -11,9 +11,9 @@
 			</span>
 			<span class="separator"></span>
 			<span class="aspect-ratio">
-				<span class="width">{ file.properties.width / getGcd(file.properties.width, file.properties.height) }</span>
+				<span class="width">{ file.properties.width / gcd(file.properties.width, file.properties.height) }</span>
 				<span class="colon">:</span>
-				<span class="height">{ file.properties.height / getGcd(file.properties.width, file.properties.height) }</span>
+				<span class="height">{ file.properties.height / gcd(file.properties.width, file.properties.height) }</span>
 			</span>
 		</footer>
 	</div>
@@ -184,8 +184,11 @@
 
 	</style>
 	<script>
-		this.bytesToSize = require('../../../common/scripts/bytes-to-size.js');
-		this.getGcd = require('../../../common/scripts/gcd.js');
+		import bytesToSize from '../../../common/scripts/bytes-to-size';
+		import gcd from '../../../common/scripts/gcd';
+
+		this.bytesToSize = bytesToSize;
+		this.gcd = gcd;
 
 		this.mixin('api');
 
diff --git a/src/web/app/mobile/tags/drive/file.tag b/src/web/app/mobile/tags/drive/file.tag
index a6b81f19c6..618ed911cf 100644
--- a/src/web/app/mobile/tags/drive/file.tag
+++ b/src/web/app/mobile/tags/drive/file.tag
@@ -122,7 +122,8 @@
 
 	</style>
 	<script>
-		this.bytesToSize = require('../../../common/scripts/bytes-to-size');
+		import bytesToSize from '../../../common/scripts/bytes-to-size';
+		this.bytesToSize = bytesToSize;
 
 		this.browser = this.parent;
 		this.file = this.opts.file;
diff --git a/src/web/app/mobile/tags/follow-button.tag b/src/web/app/mobile/tags/follow-button.tag
index ae6d19f593..cae466150d 100644
--- a/src/web/app/mobile/tags/follow-button.tag
+++ b/src/web/app/mobile/tags/follow-button.tag
@@ -48,12 +48,16 @@
 
 	</style>
 	<script>
+		this.mixin('i');
 		this.mixin('api');
-		this.mixin('is-promise');
 		this.mixin('stream');
 
+		const stream = this.stream.event;
+
+		const isPromise = require('../../common/scripts/is-promise');
+
 		this.user = null;
-		this.userPromise = this.isPromise(this.opts.user)
+		this.userPromise = isPromise(this.opts.user)
 			? this.opts.user
 			: Promise.resolve(this.opts.user);
 		this.init = true;
@@ -65,14 +69,14 @@
 					init: false,
 					user: user
 				});
-				this.stream.on('follow', this.onStreamFollow);
-				this.stream.on('unfollow', this.onStreamUnfollow);
+				stream.on('follow', this.onStreamFollow);
+				stream.on('unfollow', this.onStreamUnfollow);
 			});
 		});
 
 		this.on('unmount', () => {
-			this.stream.off('follow', this.onStreamFollow);
-			this.stream.off('unfollow', this.onStreamUnfollow);
+			stream.off('follow', this.onStreamFollow);
+			stream.off('unfollow', this.onStreamUnfollow);
 		});
 
 		this.onStreamFollow = user => {
diff --git a/src/web/app/mobile/tags/home-timeline.tag b/src/web/app/mobile/tags/home-timeline.tag
index 9a8ab9b743..7c929fc5ad 100644
--- a/src/web/app/mobile/tags/home-timeline.tag
+++ b/src/web/app/mobile/tags/home-timeline.tag
@@ -5,9 +5,12 @@
 			display block
 	</style>
 	<script>
+		this.mixin('i');
 		this.mixin('api');
 		this.mixin('stream');
 
+		const stream = this.stream.event;
+
 		this.init = new Promise((res, rej) => {
 			this.api('posts/timeline').then(posts => {
 				res(posts);
@@ -16,15 +19,15 @@
 		});
 
 		this.on('mount', () => {
-			this.stream.on('post', this.onStreamPost);
-			this.stream.on('follow', this.onStreamFollow);
-			this.stream.on('unfollow', this.onStreamUnfollow);
+			stream.on('post', this.onStreamPost);
+			stream.on('follow', this.onStreamFollow);
+			stream.on('unfollow', this.onStreamUnfollow);
 		});
 
 		this.on('unmount', () => {
-			this.stream.off('post', this.onStreamPost);
-			this.stream.off('follow', this.onStreamFollow);
-			this.stream.off('unfollow', this.onStreamUnfollow);
+			stream.off('post', this.onStreamPost);
+			stream.off('follow', this.onStreamFollow);
+			stream.off('unfollow', this.onStreamUnfollow);
 		});
 
 		this.more = () => {
diff --git a/src/web/app/mobile/tags/notification-preview.tag b/src/web/app/mobile/tags/notification-preview.tag
index b93b92d919..e20307ebc5 100644
--- a/src/web/app/mobile/tags/notification-preview.tag
+++ b/src/web/app/mobile/tags/notification-preview.tag
@@ -107,7 +107,8 @@
 
 	</style>
 	<script>
-		this.mixin('get-post-summary');
+		import getPostSummary from '../../common/scripts/get-post-summary';
+		this.getPostSummary = getPostSummary;
 		this.notification = this.opts.notification;
 	</script>
 </mk-notification-preview>
diff --git a/src/web/app/mobile/tags/notification.tag b/src/web/app/mobile/tags/notification.tag
index d32e6b40ae..591638858d 100644
--- a/src/web/app/mobile/tags/notification.tag
+++ b/src/web/app/mobile/tags/notification.tag
@@ -167,7 +167,8 @@
 
 	</style>
 	<script>
-		this.mixin('get-post-summary');
+		import getPostSummary from '../../common/scripts/get-post-summary';
+		this.getPostSummary = getPostSummary;
 		this.notification = this.opts.notification;
 	</script>
 </mk-notification>
diff --git a/src/web/app/mobile/tags/notifications.tag b/src/web/app/mobile/tags/notifications.tag
index 039a9a4b07..4f49edd5ac 100644
--- a/src/web/app/mobile/tags/notifications.tag
+++ b/src/web/app/mobile/tags/notifications.tag
@@ -57,9 +57,13 @@
 
 	</style>
 	<script>
+		import getPostSummary from '../../common/scripts/get-post-summary';
+		this.getPostSummary = getPostSummary;
+
 		this.mixin('api');
 		this.mixin('stream');
-		this.mixin('get-post-summary');
+
+		const stream = this.stream.event;
 
 		this.notifications = [];
 		this.loading = true;
@@ -74,11 +78,11 @@
 				this.trigger('fetched');
 			});
 
-			this.stream.on('notification', this.onNotification);
+			stream.on('notification', this.onNotification);
 		});
 
 		this.on('unmount', () => {
-			this.stream.off('notification', this.onNotification);
+			stream.off('notification', this.onNotification);
 		});
 
 		this.onNotification = notification => {
diff --git a/src/web/app/mobile/tags/page/drive.tag b/src/web/app/mobile/tags/page/drive.tag
index bacfa25826..1042c061da 100644
--- a/src/web/app/mobile/tags/page/drive.tag
+++ b/src/web/app/mobile/tags/page/drive.tag
@@ -7,27 +7,27 @@
 			display block
 	</style>
 	<script>
-		this.mixin('ui');
-		this.mixin('ui-progress');
+		import ui from '../../scripts/ui-event';
+		import Progress from '../../../common/scripts/loading';
 
 		this.on('mount', () => {
 			document.title = 'Misskey Drive';
-			this.ui.trigger('title', '<i class="fa fa-cloud"></i>ドライブ');
+			ui.trigger('title', '<i class="fa fa-cloud"></i>ドライブ');
 
-			this.ui.trigger('func', () => {
+			ui.trigger('func', () => {
 				this.refs.ui.refs.browser.openContextMenu();
 			}, 'ellipsis-h');
 
 			this.refs.ui.refs.browser.on('begin-fetch', () => {
-				this.Progress.start();
+				Progress.start();
 			});
 
 			this.refs.ui.refs.browser.on('fetched-mid', () => {
-				this.Progress.set(0.5);
+				Progress.set(0.5);
 			});
 
 			this.refs.ui.refs.browser.on('fetched', () => {
-				this.Progress.done();
+				Progress.done();
 			});
 
 			this.refs.ui.refs.browser.on('move-root', () => {
@@ -37,7 +37,7 @@
 				history.pushState(null, title, '/i/drive');
 
 				document.title = title;
-				this.ui.trigger('title', '<i class="fa fa-cloud"></i>ドライブ');
+				ui.trigger('title', '<i class="fa fa-cloud"></i>ドライブ');
 			});
 
 			this.refs.ui.refs.browser.on('open-folder', (folder, silent) => {
@@ -50,7 +50,7 @@
 
 				document.title = title;
 				// TODO: escape html characters in folder.name
-				this.ui.trigger('title', '<i class="fa fa-folder-open"></i>' + folder.name);
+				ui.trigger('title', '<i class="fa fa-folder-open"></i>' + folder.name);
 			});
 
 			this.refs.ui.refs.browser.on('open-file', (file, silent) => {
@@ -63,7 +63,7 @@
 
 				document.title = title;
 				// TODO: escape html characters in file.name
-				this.ui.trigger('title', '<mk-file-type-icon class="icon"></mk-file-type-icon>' + file.name);
+				ui.trigger('title', '<mk-file-type-icon class="icon"></mk-file-type-icon>' + file.name);
 				riot.mount('mk-file-type-icon', {
 					type: file.type
 				});
diff --git a/src/web/app/mobile/tags/page/home.tag b/src/web/app/mobile/tags/page/home.tag
index 68178aa991..561e0be5f7 100644
--- a/src/web/app/mobile/tags/page/home.tag
+++ b/src/web/app/mobile/tags/page/home.tag
@@ -7,42 +7,45 @@
 			display block
 	</style>
 	<script>
+		import ui from '../../scripts/ui-event';
+		import Progress from '../../../common/scripts/loading';
+		import getPostSummary from '../../../common/scripts/get-post-summary';
+		import openPostForm from '../../scripts/open-post-form';
+
 		this.mixin('i');
-		this.mixin('ui');
-		this.mixin('ui-progress');
 		this.mixin('stream');
-		this.mixin('get-post-summary');
-		this.mixin('open-post-form');
+
+		const stream = this.stream.event;
 
 		this.unreadCount = 0;
 
 		this.on('mount', () => {
 			document.title = 'Misskey'
-			this.ui.trigger('title', '<i class="fa fa-home"></i>ホーム');
+			ui.trigger('title', '<i class="fa fa-home"></i>ホーム');
 
-			this.ui.trigger('func', () => {
-				this.openPostForm();
+			ui.trigger('func', () => {
+				openPostForm();
 			}, 'pencil');
 
-			this.Progress.start();
+			Progress.start();
 
-			this.stream.on('post', this.onStreamPost);
+			stream.on('post', this.onStreamPost);
 			document.addEventListener('visibilitychange', this.onVisibilitychange, false);
 
 			this.refs.ui.refs.home.on('loaded', () => {
-				this.Progress.done();
+				Progress.done();
 			});
 		});
 
 		this.on('unmount', () => {
-			this.stream.off('post', this.onStreamPost);
+			stream.off('post', this.onStreamPost);
 			document.removeEventListener('visibilitychange', this.onVisibilitychange);
 		});
 
 		this.onStreamPost = post => {
 			if (document.hidden && post.user_id !== this.I.id) {
 				this.unreadCount++;
-				document.title = `(${this.unreadCount}) ${this.getPostSummary(post)}`;
+				document.title = `(${this.unreadCount}) ${getPostSummary(post)}`;
 			}
 		};
 
diff --git a/src/web/app/mobile/tags/page/messaging-room.tag b/src/web/app/mobile/tags/page/messaging-room.tag
index 8ba5bd2c2a..fbfa9c51d6 100644
--- a/src/web/app/mobile/tags/page/messaging-room.tag
+++ b/src/web/app/mobile/tags/page/messaging-room.tag
@@ -7,8 +7,9 @@
 			display block
 	</style>
 	<script>
+		import ui from '../../scripts/ui-event';
+
 		this.mixin('api');
-		this.mixin('ui');
 
 		this.fetching = true;
 
@@ -23,7 +24,7 @@
 
 				document.title = `メッセージ: ${user.name} | Misskey`;
 				// TODO: ユーザー名をエスケープ
-				this.ui.trigger('title', '<i class="fa fa-comments-o"></i>' + user.name);
+				ui.trigger('title', '<i class="fa fa-comments-o"></i>' + user.name);
 			});
 		});
 	</script>
diff --git a/src/web/app/mobile/tags/page/messaging.tag b/src/web/app/mobile/tags/page/messaging.tag
index fd94cbfa4a..30b2b39891 100644
--- a/src/web/app/mobile/tags/page/messaging.tag
+++ b/src/web/app/mobile/tags/page/messaging.tag
@@ -7,12 +7,13 @@
 			display block
 	</style>
 	<script>
-		this.mixin('ui');
+		import ui from '../../scripts/ui-event';
+
 		this.mixin('page');
 
 		this.on('mount', () => {
 			document.title = 'Misskey | メッセージ';
-			this.ui.trigger('title', '<i class="fa fa-comments-o"></i>メッセージ');
+			ui.trigger('title', '<i class="fa fa-comments-o"></i>メッセージ');
 
 			this.refs.ui.refs.index.on('navigate-user', user => {
 				this.page('/i/messaging/' + user.username);
diff --git a/src/web/app/mobile/tags/page/notifications.tag b/src/web/app/mobile/tags/page/notifications.tag
index ae19303e5f..90baf82e9b 100644
--- a/src/web/app/mobile/tags/page/notifications.tag
+++ b/src/web/app/mobile/tags/page/notifications.tag
@@ -5,20 +5,19 @@
 	<style>
 		:scope
 			display block
-
 	</style>
 	<script>
-		this.mixin('ui');
-		this.mixin('ui-progress');
+		import ui from '../../scripts/ui-event';
+		import Progress from '../../../common/scripts/loading';
 
 		this.on('mount', () => {
 			document.title = 'Misskey | 通知';
-			this.ui.trigger('title', '<i class="fa fa-bell-o"></i>通知');
+			ui.trigger('title', '<i class="fa fa-bell-o"></i>通知');
 
-			this.Progress.start();
+			Progress.start();
 
 			this.refs.ui.refs.notifications.on('fetched', () => {
-				this.Progress.done();
+				Progress.done();
 			});
 		});
 	</script>
diff --git a/src/web/app/mobile/tags/page/post.tag b/src/web/app/mobile/tags/page/post.tag
index 2c4eba37a0..dae9bf84be 100644
--- a/src/web/app/mobile/tags/page/post.tag
+++ b/src/web/app/mobile/tags/page/post.tag
@@ -18,23 +18,23 @@
 
 	</style>
 	<script>
-		this.mixin('ui');
-		this.mixin('ui-progress');
+		import ui from '../../scripts/ui-event';
+		import Progress from '../../../common/scripts/loading';
 
 		this.post = this.opts.post;
 
 		this.on('mount', () => {
 			document.title = 'Misskey';
-			this.ui.trigger('title', '<i class="fa fa-sticky-note-o"></i>投稿');
+			ui.trigger('title', '<i class="fa fa-sticky-note-o"></i>投稿');
 
-			this.Progress.start();
+			Progress.start();
 
 			this.refs.ui.refs.post.on('post-fetched', () => {
-				this.Progress.set(0.5);
+				Progress.set(0.5);
 			});
 
 			this.refs.ui.refs.post.on('loaded', () => {
-				this.Progress.done();
+				Progress.done();
 			});
 		});
 	</script>
diff --git a/src/web/app/mobile/tags/page/search.tag b/src/web/app/mobile/tags/page/search.tag
index fbf741f2e6..b5be30ae82 100644
--- a/src/web/app/mobile/tags/page/search.tag
+++ b/src/web/app/mobile/tags/page/search.tag
@@ -7,18 +7,18 @@
 			display block
 	</style>
 	<script>
-		this.mixin('ui');
-		this.mixin('ui-progress');
+		import ui from '../../scripts/ui-event';
+		import Progress from '../../../common/scripts/loading';
 
 		this.on('mount', () => {
 			document.title = `検索: ${this.opts.query} | Misskey`
 			// TODO: クエリをHTMLエスケープ
-			this.ui.trigger('title', '<i class="fa fa-search"></i>' + this.opts.query);
+			ui.trigger('title', '<i class="fa fa-search"></i>' + this.opts.query);
 
-			this.Progress.start();
+			Progress.start();
 
 			this.refs.ui.refs.search.on('loaded', () => {
-				this.Progress.done();
+				Progress.done();
 			});
 		});
 	</script>
diff --git a/src/web/app/mobile/tags/page/settings.tag b/src/web/app/mobile/tags/page/settings.tag
index 59974e8cb6..0185260ca1 100644
--- a/src/web/app/mobile/tags/page/settings.tag
+++ b/src/web/app/mobile/tags/page/settings.tag
@@ -13,11 +13,11 @@
 			display block
 	</style>
 	<script>
-		this.mixin('ui');
+		import ui from '../../scripts/ui-event';
 
 		this.on('mount', () => {
 			document.title = 'Misskey | 設定';
-			this.ui.trigger('title', '<i class="fa fa-cog"></i>設定');
+			ui.trigger('title', '<i class="fa fa-cog"></i>設定');
 		});
 	</script>
 </mk-settings-page>
diff --git a/src/web/app/mobile/tags/page/settings/api.tag b/src/web/app/mobile/tags/page/settings/api.tag
index e4f954f51a..5725bcb4c1 100644
--- a/src/web/app/mobile/tags/page/settings/api.tag
+++ b/src/web/app/mobile/tags/page/settings/api.tag
@@ -7,11 +7,11 @@
 			display block
 	</style>
 	<script>
-		this.mixin('ui');
+		const ui = require('../../../scripts/ui-event');
 
 		this.on('mount', () => {
 			document.title = 'Misskey | API';
-			this.ui.trigger('title', '<i class="fa fa-key"></i>API');
+			ui.trigger('title', '<i class="fa fa-key"></i>API');
 		});
 	</script>
 </mk-api-info-page>
diff --git a/src/web/app/mobile/tags/page/settings/authorized-apps.tag b/src/web/app/mobile/tags/page/settings/authorized-apps.tag
index 84904c91e5..8fc62214ad 100644
--- a/src/web/app/mobile/tags/page/settings/authorized-apps.tag
+++ b/src/web/app/mobile/tags/page/settings/authorized-apps.tag
@@ -7,11 +7,11 @@
 			display block
 	</style>
 	<script>
-		this.mixin('ui');
+		const ui = require('../../../scripts/ui-event');
 
 		this.on('mount', () => {
 			document.title = 'Misskey | アプリケーション';
-			this.ui.trigger('title', '<i class="fa fa-puzzle-piece"></i>アプリケーション');
+			ui.trigger('title', '<i class="fa fa-puzzle-piece"></i>アプリケーション');
 		});
 	</script>
 </mk-authorized-apps-page>
diff --git a/src/web/app/mobile/tags/page/settings/signin.tag b/src/web/app/mobile/tags/page/settings/signin.tag
index 874cdf4856..7ada9717c3 100644
--- a/src/web/app/mobile/tags/page/settings/signin.tag
+++ b/src/web/app/mobile/tags/page/settings/signin.tag
@@ -7,11 +7,11 @@
 			display block
 	</style>
 	<script>
-		this.mixin('ui');
+		const ui = require('../../../scripts/ui-event');
 
 		this.on('mount', () => {
 			document.title = 'Misskey | ログイン履歴';
-			this.ui.trigger('title', '<i class="fa fa-sign-in"></i>ログイン履歴');
+			ui.trigger('title', '<i class="fa fa-sign-in"></i>ログイン履歴');
 		});
 	</script>
 </mk-signin-history-page>
diff --git a/src/web/app/mobile/tags/page/settings/twitter.tag b/src/web/app/mobile/tags/page/settings/twitter.tag
index 2026ab7daf..5a3be10f5c 100644
--- a/src/web/app/mobile/tags/page/settings/twitter.tag
+++ b/src/web/app/mobile/tags/page/settings/twitter.tag
@@ -7,11 +7,11 @@
 			display block
 	</style>
 	<script>
-		this.mixin('ui');
+		const ui = require('../../../scripts/ui-event');
 
 		this.on('mount', () => {
 			document.title = 'Misskey | Twitter連携';
-			this.ui.trigger('title', '<i class="fa fa-twitter"></i>Twitter連携');
+			ui.trigger('title', '<i class="fa fa-twitter"></i>Twitter連携');
 		});
 	</script>
 </mk-twitter-setting-page>
diff --git a/src/web/app/mobile/tags/page/user-followers.tag b/src/web/app/mobile/tags/page/user-followers.tag
index 249897be2c..5ecf58fd61 100644
--- a/src/web/app/mobile/tags/page/user-followers.tag
+++ b/src/web/app/mobile/tags/page/user-followers.tag
@@ -7,15 +7,16 @@
 			display block
 	</style>
 	<script>
-		this.mixin('ui');
-		this.mixin('ui-progress');
+		import ui from '../../scripts/ui-event';
+		import Progress from '../../../common/scripts/loading';
+
 		this.mixin('api');
 
 		this.fetching = true;
 		this.user = null;
 
 		this.on('mount', () => {
-			this.Progress.start();
+			Progress.start();
 
 			this.api('users/show', {
 				username: this.opts.user
@@ -27,10 +28,10 @@
 
 				document.title = user.name + 'のフォロワー | Misskey';
 				// TODO: ユーザー名をエスケープ
-				this.ui.trigger('title', '<img src="' + user.avatar_url + '?thumbnail&size=64">' + user.name + 'のフォロワー');
+				ui.trigger('title', '<img src="' + user.avatar_url + '?thumbnail&size=64">' + user.name + 'のフォロワー');
 
 				this.refs.ui.refs.list.on('loaded', () => {
-					this.Progress.done();
+					Progress.done();
 				});
 			});
 		});
diff --git a/src/web/app/mobile/tags/page/user-following.tag b/src/web/app/mobile/tags/page/user-following.tag
index a682715a02..27d7961da2 100644
--- a/src/web/app/mobile/tags/page/user-following.tag
+++ b/src/web/app/mobile/tags/page/user-following.tag
@@ -7,15 +7,16 @@
 			display block
 	</style>
 	<script>
-		this.mixin('ui');
-		this.mixin('ui-progress');
+		import ui from '../../scripts/ui-event';
+		import Progress from '../../../common/scripts/loading';
+
 		this.mixin('api');
 
 		this.fetching = true;
 		this.user = null;
 
 		this.on('mount', () => {
-			this.Progress.start();
+			Progress.start();
 
 			this.api('users/show', {
 				username: this.opts.user
@@ -27,10 +28,10 @@
 
 				document.title = user.name + 'のフォロー | Misskey';
 				// TODO: ユーザー名をエスケープ
-				this.ui.trigger('title', '<img src="' + user.avatar_url + '?thumbnail&size=64">' + user.name + 'のフォロー');
+				ui.trigger('title', '<img src="' + user.avatar_url + '?thumbnail&size=64">' + user.name + 'のフォロー');
 
 				this.refs.ui.refs.list.on('loaded', () => {
-					this.Progress.done();
+					Progress.done();
 				});
 			});
 		});
diff --git a/src/web/app/mobile/tags/page/user.tag b/src/web/app/mobile/tags/page/user.tag
index 2a0e48426f..3826beecff 100644
--- a/src/web/app/mobile/tags/page/user.tag
+++ b/src/web/app/mobile/tags/page/user.tag
@@ -5,22 +5,21 @@
 	<style>
 		:scope
 			display block
-
 	</style>
 	<script>
-		this.mixin('ui');
-		this.mixin('ui-progress');
+		import ui from '../../scripts/ui-event';
+		import Progress from '../../../common/scripts/loading';
 
 		this.user = this.opts.user;
 
 		this.on('mount', () => {
-			this.Progress.start();
+			Progress.start();
 
 			this.refs.ui.refs.user.on('loaded', user => {
-				this.Progress.done();
+				Progress.done();
 				document.title = user.name + ' | Misskey';
 				// TODO: ユーザー名をエスケープ
-				this.ui.trigger('title', '<i class="fa fa-user"></i>' + user.name);
+				ui.trigger('title', '<i class="fa fa-user"></i>' + user.name);
 			});
 		});
 	</script>
diff --git a/src/web/app/mobile/tags/post-detail.tag b/src/web/app/mobile/tags/post-detail.tag
index f6f6bb62db..107fca5938 100644
--- a/src/web/app/mobile/tags/post-detail.tag
+++ b/src/web/app/mobile/tags/post-detail.tag
@@ -342,9 +342,11 @@
 	</style>
 	<script>
 		this.mixin('api');
-		this.mixin('text');
-		this.mixin('get-post-summary');
-		this.mixin('open-post-form');
+
+		import compile from '../../common/scripts/text-compiler';
+
+		this.getPostSummary = require('../../common/scripts/get-post-summary');
+		this.openPostForm = require('../scripts/open-post-form');
 
 		this.fetching = true;
 		this.loadingContext = false;
@@ -368,9 +370,9 @@
 				this.trigger('loaded');
 
 				if (this.p.text) {
-					const tokens = this.analyze(this.p.text);
+					const tokens = this.p.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/mobile/tags/post-form.tag b/src/web/app/mobile/tags/post-form.tag
index a3208efe37..ae3f444c15 100644
--- a/src/web/app/mobile/tags/post-form.tag
+++ b/src/web/app/mobile/tags/post-form.tag
@@ -182,7 +182,7 @@
 
 	</style>
 	<script>
-		const getCat = require('../../common/scripts/get-cat');
+		import getCat from '../../common/scripts/get-cat';
 
 		this.mixin('api');
 
diff --git a/src/web/app/mobile/tags/sub-post-content.tag b/src/web/app/mobile/tags/sub-post-content.tag
index 5ff01c5020..beb524061b 100644
--- a/src/web/app/mobile/tags/sub-post-content.tag
+++ b/src/web/app/mobile/tags/sub-post-content.tag
@@ -28,14 +28,14 @@
 
 	</style>
 	<script>
-		this.mixin('text');
+		import compile from '../../common/scripts/text-compiler';
 
 		this.post = this.opts.post;
 
 		this.on('mount', () => {
 			if (this.post.text) {
-				const tokens = this.analyze(this.post.text);
-				this.refs.text.innerHTML = this.compile(tokens, false);
+				const tokens = this.post.ast;
+				this.refs.text.innerHTML = compile(tokens, false);
 
 				this.refs.text.children.forEach(e => {
 					if (e.tagName == 'MK-URL') riot.mount(e);
diff --git a/src/web/app/mobile/tags/timeline-post.tag b/src/web/app/mobile/tags/timeline-post.tag
index f706dc7de6..c861130b66 100644
--- a/src/web/app/mobile/tags/timeline-post.tag
+++ b/src/web/app/mobile/tags/timeline-post.tag
@@ -306,21 +306,22 @@
 	</style>
 	<script>
 		this.mixin('api');
-		this.mixin('text');
-		this.mixin('get-post-summary');
-		this.mixin('open-post-form');
+
+		import compile from '../../common/scripts/text-compiler';
+		import getPostSummary from '../../common/scripts/get-post-summary';
+		import openPostForm from '../scripts/open-post-form';
 
 		this.post = this.opts.post;
 		this.isRepost = this.post.repost != null && this.post.text == null;
 		this.p = this.isRepost ? this.post.repost : this.post;
-		this.summary = this.getPostSummary(this.p);
+		this.summary = getPostSummary(this.p);
 		this.url = `/${this.p.user.username}/${this.p.id}`;
 
 		this.on('mount', () => {
 			if (this.p.text) {
-				const tokens = this.analyze(this.p.text);
+				const tokens = this.p.ast;
 
-				this.refs.text.innerHTML = this.refs.text.innerHTML.replace('<p class="dummy"></p>', this.compile(tokens));
+				this.refs.text.innerHTML = this.refs.text.innerHTML.replace('<p class="dummy"></p>', compile(tokens));
 
 				this.refs.text.children.forEach(e => {
 					if (e.tagName == 'MK-URL') riot.mount(e);
@@ -338,7 +339,7 @@
 		});
 
 		this.reply = () => {
-			this.openPostForm({
+			openPostForm({
 				reply: this.p
 			});
 		};
diff --git a/src/web/app/mobile/tags/ui-header.tag b/src/web/app/mobile/tags/ui-header.tag
index 265f12fd45..7d822cf6c8 100644
--- a/src/web/app/mobile/tags/ui-header.tag
+++ b/src/web/app/mobile/tags/ui-header.tag
@@ -88,14 +88,14 @@
 
 	</style>
 	<script>
-		this.mixin('ui');
+		import ui from '../scripts/ui-event';
 
 		this.func = null;
 		this.funcIcon = null;
 
 		this.on('unmount', () => {
-			this.ui.off('title', this.setTitle);
-			this.ui.off('func', this.setFunc);
+			ui.off('title', this.setTitle);
+			ui.off('func', this.setFunc);
 		});
 
 		this.setTitle = title => {
@@ -109,7 +109,7 @@
 			});
 		};
 
-		this.ui.on('title', this.setTitle);
-		this.ui.on('func', this.setFunc);
+		ui.on('title', this.setTitle);
+		ui.on('func', this.setFunc);
 	</script>
 </mk-ui-header>
diff --git a/src/web/app/mobile/tags/ui.tag b/src/web/app/mobile/tags/ui.tag
index 3e76733324..4c0e825a71 100644
--- a/src/web/app/mobile/tags/ui.tag
+++ b/src/web/app/mobile/tags/ui.tag
@@ -11,16 +11,20 @@
 			padding-top 48px
 	</style>
 	<script>
+		this.mixin('i');
+
 		this.mixin('stream');
 
+		const stream = this.stream.event;
+
 		this.isDrawerOpening = false;
 
 		this.on('mount', () => {
-			this.stream.on('notification', this.onStreamNotification);
+			stream.on('notification', this.onStreamNotification);
 		});
 
 		this.on('unmount', () => {
-			this.stream.off('notification', this.onStreamNotification);
+			stream.off('notification', this.onStreamNotification);
 		});
 
 		this.toggleDrawer = () => {