10.46.0

* Resolve #3160

* Fix bug

* Fix bug

.circleci/config.yml

@@ -1,11 +1,5 @@
 version: 2.1
 
-general:
-  branches:
-    ignore:
-      - l10n_develop
-      - imgbot
-
 executors:
   default:
     working_directory: /tmp/workspace
@@ -17,8 +11,20 @@ executors:
     working_directory: /tmp/workspace
     docker:
       - image: docker:latest
+  alpine:
+    working_directory: /tmp/workspace
+    docker:
+      - image: alpine:latest
 
 jobs:
+  ok:
+    executor: alpine
+    steps:
+      - run:
+          name: OK
+          command: |
+            echo -e '\033[0;32mOK\033[0;39m'
+
   build:
     executor: default
     steps:
@@ -111,6 +117,9 @@ jobs:
                 command: |
                   if [ "$DOCKERHUB_USERNAME$DOCKERHUB_PASSWORD" ]
                    then
+                    curl -LSs 'https://github.com/stedolan/jq/releases/download/jq-1.6/jq-linux64' > jq
+                    chmod +x jq
+                    docker tag misskey/misskey misskey/misskey:$(cat package.json | jq -r .version)
                     docker login -u $DOCKERHUB_USERNAME -p $DOCKERHUB_PASSWORD
                     docker push misskey/misskey
                    else
@@ -121,10 +130,27 @@ workflows:
   version: 2
   build-and-test:
     jobs:
-      - build
+      - ok:
+          filters:
+            branches:
+              only:
+                - l10n_develop
+                - imgbot
+      - build:
+          filters:
+            branches:
+              ignore:
+                - l10n_develop
+                - imgbot
       - test:
           requires:
             - build
+          filters:
+            branches:
+              ignore:
+#                - master
+                - l10n_develop
+                - imgbot
       - test:
           without_redis: "true"
           requires:

.config/example.yml

@@ -116,18 +116,6 @@ autoAdmin: true
 #  # Private key of VAPID
 #  private_key: example-sw-private-key
 
-# Twitter integration
-# You need to set the oauth callback url as : https://<your-misskey-instance>/api/tw/cb
-#twitter:
-#  consumer_key: example-twitter-consumer-key
-#  consumer_secret: example-twitter-consumer-secret-key
-
-# GitHub integration
-# You need to set the oauth callback url as : https://<your-misskey-instance>/api/gh/cb
-#github:
-#  client_id: example-github-client-id
-#  client_secret: example-github-client-secret
-
 # Clustering
 #clusterLimit: 1
 

CONTRIBUTING.md

@@ -6,9 +6,6 @@ Feature suggestions and bug reports are filed in https://github.com/syuilo/missk
 Before creating a new issue, please search existing issues to avoid duplication.
 If you find the existing issue, please add your reaction or comment to the issue.
 
-## Internationalization (i18n)
-Please see [Translation guide](./docs/translate.en.md).
-
 ## Localization (l10n)
 Please use [Crowdin](https://crowdin.com/project/misskey) for localization.
 

README.md

@@ -9,10 +9,12 @@
 
 **Sophisticated microblogging platform, evolving forever.**
 
-[Misskey](https://misskey.xyz) is a decentralized microblogging platform born on Earth.
+<p align="justify">
+<a href="https://misskey.xyz">Misskey</a> is a decentralized microblogging platform born on Earth.
 Since it exists within the Fediverse (a universe where various social media platforms are organized),
 it is mutually linked with other social media platforms.
-Why don't you take a short break from the hustle and bustle of the city, and dive into a new Internet? [Find instance!](https://joinmisskey.github.io/)
+Why don't you take a short break from the hustle and bustle of the city, and dive into a new Internet? <a href="https://joinmisskey.github.io/">Find instance!</a>
+</p>
 
 <a href="https://www.patreon.com/syuilo"><img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" alt="Become a Patron!" width="160" /></a>
 
@@ -24,8 +26,8 @@ Why don't you take a short break from the hustle and bustle of the city, and div
 <img src="/assets/about/post.png" align="left" height="200px"/>
 
 <h3 align="left">Posting</h3>
-<p align="left">
-Just post your idea, hot topics and anything you want to share. You may want to decorate your words, attach your favorite pictures, send files including movies and create a poll - those are the things you can do on Misskey!
+<p align="justify">
+Just post your idea, hot topics and anything you want to share. You may decorate your words, attach your favorite pictures or movies, and create a poll - those are all supported in Misskey!
 </p>
 
 ---
@@ -33,8 +35,8 @@ Just post your idea, hot topics and anything you want to share. You may want to
 <img src="/assets/about/reaction.png" align="right" height="200px"/>
 
 <h3 align="right">Reactions</h3>
-<p align="right">
-Easiest way to tell your emotions. Misskey allows you to add various type of reactions to other’s post. The emotional experience on Misskey will never be on other SNSs which only able to push “likes”.
+<p align="justify">
+The simplest way to tell your emotions to the posts. You can choose the best reaction from various reactions. Reactions on Misskey has much more expressive than other social media which only allows pushing “likes”.
 </p>
 
 ---
@@ -42,8 +44,8 @@ Easiest way to tell your emotions. Misskey allows you to add various type of rea
 <img src="/assets/about/ui.png" align="left" height="200px"/>
 
 <h3 align="left">Interface</h3>
-<p align="left">
-Highly customizable UI for your taste. We understand no UI fits for everyone. You can edit layouts of your timeline, place selectable widgets you can easily move and create your unique home as this place will be your home.
+<p align="justify">
+Highly customizable UI for your taste. We understand no UI fits for everyone. Make your graceful home by editing, adjusting layouts of timeline, and placing widgets.
 </p>
 
 ---
@@ -51,13 +53,13 @@ Highly customizable UI for your taste. We understand no UI fits for everyone. Yo
 <img src="/assets/about/drive.png" align="right" width="300px"/>
 
 <h3 align="right">Misskey Drive</h3>
-<p align="right">
-Wanna post a picture you have already uploaded? Wish to organize, name and create a folder for your uploaded files? Misskey Drive is the best solution for you. Very easy to share your files online.
+<p align="justify">
+Organized uploaded files. Wanna post a picture you have already uploaded? Wish to create a folder for your files? Misskey Drive is the best solution for you.
 </p>
 
 ---
 
-and more! You can see it with your own eyes at [misskey.xyz](https://misskey.xyz) or [other instances](https://joinmisskey.github.io/).
+and more! Now it's time to experience the world with your own eyes at [misskey.xyz](https://misskey.xyz) or [other instances](https://joinmisskey.github.io/).
 
 :package: Create your own instance
 ----------------------------------------------------------------

cli/update-remote-user.js

@@ -1,12 +0,0 @@
-const updatePerson = require('../built/remote/activitypub/models/person').updatePerson;
-
-const args = process.argv.slice(2);
-const user = args[0];
-
-console.log(`Updating ${user}...`);
-
-updatePerson(user).then(() => {
-	console.log(`Updated ${user}`);
-}, e => {
-	console.error(e);
-});

docs/setup.en.md

@@ -57,13 +57,6 @@ npm install web-push -g
 web-push generate-vapid-keys
 ```
 
-*(optional)* Create a twitter application
-----------------------------------------------------------------
-If you want to enable the twitter integration, you need to create a twitter app at [https://developer.twitter.com/en/apply/user](https://developer.twitter.com/en/apply/user).
-
-In the app you need to set the oauth callback url as : https://misskey-instance/api/tw/cb
-
-
 *5.* Make configuration file
 ----------------------------------------------------------------
 1. `cp .config/example.yml .config/default.yml` Copy the `.config/example.yml` and rename it to `default.yml`.

docs/translate.en.md

@@ -1,27 +0,0 @@
-Misskey's Translation
-=====================
-
-If you find an untranslated part on Misskey:
---------------------------------------------
-
-1. Look for untranslated parts in the misskey's source code.
-	- For instance, if you find an untranslated part in: `src/client/app/mobile/views/pages/home.vue`.
-
-2. Replace the untranslated portion with a character string of the form `%i18n:@foo%`.
-	- In fact, `foo` should be a word that is appropriate for the situation and is easy to understand in English.
-	- For example, if the untranslated portion is the following "タイムライン" you must write: `%i18n:@timeline%`.
-
-3. Open the `locales/ja-JP.yml`, check whether the <strong>file name (path)</strong> found in step 1 exists, if not, create it.
-	- Do not put the beginning of the path `src/client/app/` in the locale file.
-	- For example, in this case we want to modify untranslated parts of `src/client/app/mobile/views/pages/home.vue`, so the key is `mobile/views/pages/home.vue`.
-
-4. Add the text property using the `foo` keyword below the path that you found or created in step 2. Make sure to type your text in quotation marks. Text should always be inside of quotes.
-	-   For example, in this case we add timeline: `timeline: "タイムライン"` to `locales/ja-JP.yml`.
-
-5. When you add text to the ja-JP file (of syuilo/misskey), it will automatically be applied to all other local language files within 24-48 hours. Translations added in ja-JP file should contain the original Japanese strings (example see step 4). 
-
-6. The new strings will automatically appear in the localized language files in the original Japanese text. After that, please go to [CrowdIn](https://crowdin.com/project/misskey) to do the localized translations in your language.
-
-7. And done！
-
-For more details, please refer to this [commit](https://github.com/syuilo/misskey/commit/10f6d5980fa7692ccb45fbc5f843458b69b7607c).

docs/translate.fr.md

@@ -1,23 +0,0 @@
-Traduction de Misskey
-=====================
-
-Si vous trouvez un segment non-traduit sur Misskey :
-----------------------------------------------------
-
-1. Veuillez chercher des parties non-traduites dans le code source de Misskey.
-	- Par exemple, supposons que vous trouviez un segment non-traduit dans : `src/client/app/mobile/views/pages/home.vue`.
-
-2. Remplacez la portion non-traduite par une chaîne de caractères de type `%i18n:@foo%`.
-	- En fait, `foo` doit être un mot approprié à la situation et facile à comprendre en français.
-	- Par exemple, si le segment non-traduit est「タイムライン」on peut écrire : `%i18n:@timeline%`.
-
-3. Ouvrez chaque fichier linguistique dans /locales, vérifiez si le <strong>nom du fichier (chemin)</strong> trouvé dans l'étape 1 existe, sinon créez-le.
-	- Ne mettez pas le début du chemin `src/client/app/` dans les fichiers /locales.
-	- Par exemple, dans ce cas de figure, nous voulons modifier le segment non-traduit de : `src/client/app/mobile/views/pages/home.vue`donc il faut juste écrire : `mobile/views/pages/home.vue` dans les fichiers linguistiques.
-
-4. Ajoutez la propriété du texte traduit grâce à la clef `foo`, en-dessous du chemin correspondant à votre modification que vous avez trouvé ou créé dans l'étape 2. À côté, veuillez indiquer entre "guillemets" la valeur de votre traduction.
-	- Par exemple, dans ce cas de figure, nous ajoutons la propriété et la traduction `timeline: "Timeline"` à `locales/fr.yml`, mais aussi la propriété et la version originale `timeline: "タイムライン"` à `locales/ja-JP.yml`.
-
-5. Vous avez réussi à traduire une portion de misskey ！
-
-Pour plus de détails, veuillez vous référer à ce  [commit](https://github.com/syuilo/misskey/commit/10f6d5980fa7692ccb45fbc5f843458b69b7607c).

docs/translate.ja.md

@@ -1,23 +0,0 @@
-Misskeyの翻訳
-============
-
-Misskey内の未翻訳箇所を見つけたら
--------------------------------
-
-1. Misskeyのソースコード内から未翻訳箇所を探してください。
-	- 例えば`src/client/app/mobile/views/pages/home.vue`で未翻訳箇所を見つけたとします。
-
-2. 未翻訳箇所を`%i18n:@foo%`のような形式の文字列に置換してください。
-	- `foo`は実際にはその場に適したわかりやすい(英語の)名前にしてください。
-	- 例えば未翻訳箇所が「タイムライン」というテキストだった場合、`%i18n:@timeline%`のようにします。
-
-3. `locales/ja-JP.yml`を開き、1.で見つけた<strong>ファイル名(パス)</strong>のキーが存在するか確認し、無ければ作成してください。
-	- パスの`src/client/app/`は省略してください。
-	- 例えば、今回の例では`src/client/app/mobile/views/pages/home.vue`の未翻訳箇所を修正したいので、キーは`mobile/views/pages/home.vue`になります。
-
-4. そのキーの直下に2.で置換した`foo`の部分をキーとし、テキストを値とするプロパティを追加します。
-	- 例えば、今回の例で言うと`locales/ja-JP.yml`に`timeline: "タイムライン"`を追加します。
-
-5. 完了です！
-
-詳しくは、[このコミット](https://github.com/syuilo/misskey/commit/10f6d5980fa7692ccb45fbc5f843458b69b7607c)などを参考にしてください。

locales/ja-JP.yml

@@ -25,22 +25,12 @@ common:
   application-authorization: "アプリの連携"
   close: "閉じる"
   do-not-copy-paste: "ここにコードを入力したり張り付けたりしないでください。アカウントが不正利用される可能性があります。"
-  BSoD:
-    fatal-error: ":( 致命的な問題が発生しました。"
-    update-browser-os: "お使いのブラウザ(またはOS)のバージョンを更新すると解決する可能性があります。"
-    error-code: "エラーコード"
-    browser-version: "ブラウザ バージョン"
-    client-version: "クライアント バージョン"
-    email-support: "問題が解決しない場合は、上記の情報をお書き添えの上 syuilotan@yahoo.co.jp までご連絡ください。"
-    thanks: "Thank you for using Misskey."
+  load-more: "もっと読み込む"
 
   got-it: "わかった"
   customization-tips:
     title: "カスタマイズのヒント"
-    paragraph1: "ホームのカスタマイズでは、ウィジェットを追加/削除したり、ドラッグ&ドロップして並べ替えたりすることができます。"
-    paragraph2: "一部のウィジェットは、<strong><strong>右</strong>クリック</strong>することで表示を変更することができます。"
-    paragraph3: "ウィジェットを削除するには、ヘッダーの<strong>「ゴミ箱」</strong>と書かれたエリアにウィジェットをドラッグ&ドロップします。"
-    paragraph4: "カスタマイズを終了するには、右上の「完了」をクリックします。"
+    paragraph: "<p>ホームのカスタマイズでは、ウィジェットを追加/削除したり、ドラッグ&ドロップして並べ替えたりすることができます。</p><p>一部のウィジェットは、<strong><strong>右</strong>クリック</strong>することで表示を変更することができます。</p><p>ウィジェットを削除するには、ヘッダーの<strong>「ゴミ箱」</strong>と書かれたエリアにウィジェットをドラッグ&ドロップします。</p><p>カスタマイズを終了するには、右上の「完了」をクリックします。</p>"
     gotit: "Got it!"
   notification:
     file-uploaded: "ファイルがアップロードされました"
@@ -65,6 +55,7 @@ common:
 
   trash: "ゴミ箱"
   drive: "ドライブ"
+  messaging: "トーク"
 
   weekday-short:
     sunday: "日"
@@ -129,6 +120,7 @@ common:
   always-show-nsfw: "常に閲覧注意のメディアを表示する"
   always-mark-nsfw: "常にメディアを閲覧注意として投稿"
   show-full-acct: "ユーザー名のホストを省略しない"
+  show-via: "viaを表示する"
   reduce-motion: "UIの動きを減らす"
   this-setting-is-this-device-only: "このデバイスのみ"
   use-os-default-emojis: "OS標準の絵文字を使用"
@@ -147,13 +139,13 @@ common:
     drawn: "引き分け"
     my-turn: "あなたのターンです"
     opponent-turn: "相手のターンです"
-    turn-of: "{}のターンです"
-    past-turn-of: "{}のターン"
-    won: "{}の勝ち"
+    turn-of: "{name}のターンです"
+    past-turn-of: "{name}のターン"
+    won: "{name}の勝ち"
     black: "黒"
     white: "白"
     total: "合計"
-    this-turn: "{}ターン目"
+    this-turn: "{count}ターン目"
 
   widgets:
     analog-clock: "アナログ時計"
@@ -173,39 +165,17 @@ common:
     users: "おすすめユーザー"
     polls: "アンケート"
     post-form: "投稿フォーム"
-    messaging: "メッセージ"
     server: "サーバー情報"
     donation: "寄付のお願い"
     nav: "ナビゲーション"
     tips: "ヒント"
     hashtags: "ハッシュタグ"
 
-  deck:
-    widgets: "ウィジェット"
-    home: "ホーム"
-    local: "ローカル"
-    hybrid: "ソーシャル"
-    hashtag: "ハッシュタグ"
-    global: "グローバル"
-    mentions: "あなた宛て"
-    direct: "ダイレクト投稿"
-    notifications: "通知"
-    list: "リスト"
-    swap-left: "左に移動"
-    swap-right: "右に移動"
-    swap-up: "上に移動"
-    swap-down: "下に移動"
-    remove: "カラムを削除"
-    add-column: "カラムを追加"
-    rename: "名前を変更"
-    stack-left: "左に重ねる"
-    pop-right: "右に出す"
-
   dev: "アプリの作成に失敗しました。再度お試しください。"
   ai-chan-kawaii: "藍ちゃかわいい"
 
 auth/views/form.vue:
-  share-access: "<i>{{ app.name }}</i>があなたのアカウントにアクセスすることを<b>許可</b>しますか？"
+  share-access: "<i>{{name}}</i>があなたのアカウントにアクセスすることを許可しますか？"
   permission-ask: "このアプリは次の権限を要求しています:"
   account-read: "アカウントの情報を見る。"
   account-write: "アカウントの情報を操作する。"
@@ -354,7 +324,6 @@ common/views/components/messaging.vue:
 
 common/views/components/messaging-room.vue:
   empty: "このユーザーと話したことはありません"
-  more: "もっと読む"
   no-history: "これより過去の履歴はありません"
   resize-form: "ドラッグしてフォームの広さを調整"
   new-message: "新しいメッセージがあります"
@@ -604,13 +573,13 @@ desktop/views/components/activity.vue:
   toggle: "表示を切り替え"
 
 desktop/views/components/calendar.vue:
-  title: "{1}年 {2}月"
+  title: "{year}年 {month}月"
   prev: "前の月"
   next: "次の月"
   go: "クリックして時間遡行"
 
 desktop/views/components/choose-file-from-drive-window.vue:
-  choose-file: "ファイル選択中"
+  chosen-files: "{count}ファイル選択中"
   upload: "PCからドライブにファイルをアップロード"
   cancel: "キャンセル"
   ok: "決定"
@@ -662,7 +631,6 @@ desktop/views/components/drive.folder.vue:
 
 desktop/views/components/drive.vue:
   search: "検索"
-  load-more: "もっと読み込む"
   empty-draghover: "ドロップですか？いいですよ、ボクはカワイイですからね"
   empty-drive: "ドライブには何もありません。"
   empty-drive-description: "右クリックして「ファイルをアップロード」を選んだり、ファイルをドラッグ&ドロップすることでもアップロードできます。"
@@ -734,7 +702,6 @@ desktop/views/components/messaging-window.vue:
   title: "メッセージ"
 
 desktop/views/components/note-detail.vue:
-  more: "会話をもっと読み込む"
   private: "この投稿は非公開です"
   deleted: "この投稿は削除されました"
   reposted-by: "{}がRenote"
@@ -754,10 +721,8 @@ desktop/views/components/note.vue:
 desktop/views/components/notes.vue:
   error: "読み込みに失敗しました。"
   retry: "リトライ"
-  load-more: "もっと読み込む"
 
 desktop/views/components/notifications.vue:
-  more: "もっと見る"
   empty: "ありません！"
 
 desktop/views/components/post-form.vue:
@@ -810,6 +775,10 @@ desktop/views/components/renote-form.vue:
 desktop/views/components/renote-form-window.vue:
   title: "この投稿をRenoteしますか？"
 
+desktop/views/pages/user-following-or-followers.vue:
+  following: "{user}のフォロー"
+  followers: "{user}のフォロワー"
+
 desktop/views/components/settings-window.vue:
   settings: "設定"
 
@@ -1015,7 +984,6 @@ desktop/views/components/ui.header.account.vue:
 desktop/views/components/ui.header.nav.vue:
   home: "ホーム"
   deck: "デッキ"
-  messaging: "メッセージ"
   game: "ゲーム"
 
 desktop/views/components/ui.header.notifications.vue:
@@ -1045,7 +1013,6 @@ desktop/views/components/user-preview.vue:
 desktop/views/components/users-list.vue:
   all: "すべて"
   iknow: "知り合い"
-  load-more: "もっと"
   fetching: "読み込んでいます"
 
 desktop/views/components/users-list-item.vue:
@@ -1079,6 +1046,8 @@ admin/views/instance.vue:
   instance-name: "インスタンス名"
   instance-description: "インスタンスの紹介"
   banner-url: "バナー画像URL"
+  languages: "インスタンスの対象言語"
+  languages-desc: "スペースで区切って複数設定できます。"
   maintainer-config: "管理者情報"
   maintainer-name: "管理者名"
   maintainer-email: "管理者の連絡先"
@@ -1093,6 +1062,16 @@ admin/views/instance.vue:
   enable-recaptcha: "reCAPTCHAを有効にする"
   recaptcha-site-key: "reCAPTCHA site key"
   recaptcha-secret-key: "reCAPTCHA secret key"
+  twitter-integration-config: "Twitter連携の設定"
+  twitter-integration-info: "コールバックURLは /api/tw/cb に設定します。"
+  enable-twitter-integration: "Twitter連携を有効にする"
+  twitter-integration-consumer-key: "Consumer key"
+  twitter-integration-consumer-secret: "Consumer secret"
+  github-integration-config: "GitHub連携の設定"
+  github-integration-info: "コールバックURLは /api/gh/cb に設定します。"
+  enable-github-integration: "GitHub連携を有効にする"
+  github-integration-client-id: "Client ID"
+  github-integration-client-secret: "Client secret"
   proxy-account-config: "プロキシアカウントの設定"
   proxy-account-info: "プロキシアカウントは、特定の条件下でユーザーのリモートフォローを代行するアカウントです。例えば、ユーザーがリモートユーザーをリストに入れたとき、リストに入れられたユーザーを誰もフォローしていないとアクティビティがサーバーに配達されないため、代わりにプロキシアカウントがフォローするようにします。"
   proxy-account-username: "プロキシアカウントのユーザー名"
@@ -1180,21 +1159,6 @@ admin/views/announcements.vue:
 admin/views/hashtags.vue:
   hided-tags: "Hidden Tags"
 
-desktop/views/pages/deck/deck.tl-column.vue:
-  is-media-only: "メディア投稿のみ"
-  is-media-view: "メディアビュー"
-  edit: "オプション"
-
-desktop/views/pages/deck/deck.user-column.vue:
-  posts: "投稿"
-  following: "フォロー"
-  followers: "フォロワー"
-  images: "画像"
-  activity: "アクティビティ"
-  timeline: "タイムライン"
-  pinned-notes: "ピン留めされた投稿"
-  push-to-a-list: "リストに追加"
-
 desktop/views/pages/welcome.vue:
   about: "詳しく..."
   gotit: "わかった"
@@ -1211,9 +1175,6 @@ desktop/views/pages/welcome.vue:
 desktop/views/pages/drive.vue:
   title: "Misskey Drive"
 
-desktop/views/pages/favorites.vue:
-  more: "さらに読み込む"
-
 desktop/views/pages/home-customize.vue:
   title: "ホームのカスタマイズ"
 
@@ -1229,13 +1190,13 @@ desktop/views/pages/selectdrive.vue:
 
 desktop/views/pages/search.vue:
   not-available: "検索機能はインスタンスの設定で無効になっています。"
-  not-found: "「{}」に関する投稿は見つかりませんでした。"
+  not-found: "「{q}」に関する投稿は見つかりませんでした。"
 
 desktop/views/pages/share.vue:
-  share-with: "{}で共有"
+  share-with: "{name}で共有"
 
 desktop/views/pages/tag.vue:
-  no-posts-found: "ハッシュタグ「{}」が付けられた投稿は見つかりませんでした。"
+  no-posts-found: "ハッシュタグ「{q}」が付けられた投稿は見つかりませんでした。"
 
 desktop/views/pages/user-list.users.vue:
   users: "ユーザー"
@@ -1252,10 +1213,6 @@ desktop/views/pages/user/user.friends.vue:
   loading: "読み込み中"
   no-users: "よく話すユーザーはいません"
 
-desktop/views/pages/user/user.vue:
-  is-suspended: "このユーザーは凍結されています。"
-  last-used-at: "最終アクセス"
-
 desktop/views/pages/user/user.photos.vue:
   title: "フォト"
   loading: "読み込み中"
@@ -1326,7 +1283,6 @@ mobile/views/components/drive.vue:
   folder-count: "フォルダ"
   count-separator: "、"
   file-count: "ファイル"
-  load-more: "もっと読み込む"
   nothing-in-drive: "ドライブには何もありません"
   folder-is-empty: "このフォルダは空です"
   prompt: "何をしますか？(数字を入力してください): <1 → ファイルをアップロード | 2 → ファイルをURLでアップロード | 3 → フォルダ作成 | 4 → このフォルダ名を変更 | 5 → このフォルダを移動 | 6 → このフォルダを削除>"
@@ -1337,9 +1293,6 @@ mobile/views/components/drive.vue:
   url-prompt: "アップロードしたいファイルのURL"
   uploading: "アップロードをリクエストしました。アップロードが完了するまで時間がかかる場合があります。"
 
-mobile/views/components/drive-file-detail.vue:
-  rename: "名前を変更"
-
 mobile/views/components/drive-file-chooser.vue:
   select-file: "ファイルを選択"
 
@@ -1405,12 +1358,7 @@ mobile/views/components/note-sub.vue:
   bot: "bot"
   cat: "cat"
 
-mobile/views/components/notes.vue:
-  failed: "読み込みに失敗しました。"
-  retry: "リトライ"
-
 mobile/views/components/notifications.vue:
-  more: "もっと見る"
   empty: "ありません！"
 
 mobile/views/components/post-form.vue:
@@ -1433,7 +1381,6 @@ mobile/views/components/sub-note-content.vue:
 
 mobile/views/components/timeline.vue:
   empty: "投稿がありません"
-  load-more: "もっと"
 
 mobile/views/components/ui.header.vue:
   welcome-back: "おかえりなさい、"
@@ -1442,7 +1389,6 @@ mobile/views/components/ui.header.vue:
 mobile/views/components/ui.nav.vue:
   timeline: "タイムライン"
   notifications: "通知"
-  messaging: "メッセージ"
   follow-requests: "フォロー申請"
   search: "検索"
   favorites: "お気に入り"
@@ -1457,12 +1403,10 @@ mobile/views/components/ui.nav.vue:
 mobile/views/components/user-timeline.vue:
   no-notes: "このユーザーは投稿していないようです。"
   no-notes-with-media: "メディア付き投稿はありません。"
-  load-more: "もっと"
 
 mobile/views/components/users-list.vue:
   all: "すべて"
   known: "知り合い"
-  load-more: "もっと"
 
 mobile/views/pages/favorites.vue:
   title: "お気に入り"
@@ -1471,17 +1415,14 @@ mobile/views/pages/user-lists.vue:
   title: "リスト"
   enter-list-name: "リスト名を入力してください"
 
-mobile/views/pages/drive.vue:
-  more: "もっと見る"
-
 mobile/views/pages/signup.vue:
   lets-start: "📦 始めましょう"
 
 mobile/views/pages/followers.vue:
-  followers-of: "{}のフォロワー"
+  followers-of: "{name}のフォロワー"
 
 mobile/views/pages/following.vue:
-  following-of: "{}のフォロー"
+  following-of: "{name}のフォロー"
 
 mobile/views/pages/home.vue:
   home: "ホーム"
@@ -1492,7 +1433,7 @@ mobile/views/pages/home.vue:
   messages: "メッセージ"
 
 mobile/views/pages/tag.vue:
-  no-posts-found: "ハッシュタグ「{}」が付けられた投稿は見つかりませんでした。"
+  no-posts-found: "ハッシュタグ「{q}」が付けられた投稿は見つかりませんでした。"
 
 mobile/views/pages/welcome.vue:
   signup: "新規登録"
@@ -1507,13 +1448,7 @@ mobile/views/pages/widgets/activity.vue:
   activity: "アクティビティ"
 
 mobile/views/pages/share.vue:
-  share-with: "{}で共有"
-
-mobile/views/pages/messaging.vue:
-  messaging: "メッセージ"
-
-mobile/views/pages/messaging-room.vue:
-  messaging: "メッセージ"
+  share-with: "{name}で共有"
 
 mobile/views/pages/received-follow-requests.vue:
   title: "フォロー申請"
@@ -1534,8 +1469,7 @@ mobile/views/pages/games/reversi.vue:
 
 mobile/views/pages/search.vue:
   search: "検索"
-  empty: "「{}」に関する投稿は見つかりませんでした。"
-  not-found: "「{}」に関する投稿は見つかりませんでした。"
+  not-found: "「{q}」に関する投稿は見つかりませんでした。"
 
 mobile/views/pages/selectdrive.vue:
   select-file: "ファイルを選択"
@@ -1621,21 +1555,53 @@ mobile/views/pages/user/home.vue:
   last-used-at: "最終ログイン"
 
 mobile/views/pages/user/home.followers-you-know.vue:
-  loading: "読み込み中"
   no-users: "知り合いのユーザーはいません"
 
 mobile/views/pages/user/home.friends.vue:
-  loading: "読み込み中"
   no-users: "よく会話するユーザーはいません"
 
 mobile/views/pages/user/home.notes.vue:
-  loading: "読み込み中"
   no-notes: "投稿はありません"
 
 mobile/views/pages/user/home.photos.vue:
-  loading: "読み込み中"
   no-photos: "写真はありません"
 
+deck:
+  widgets: "ウィジェット"
+  home: "ホーム"
+  local: "ローカル"
+  hybrid: "ソーシャル"
+  hashtag: "ハッシュタグ"
+  global: "グローバル"
+  mentions: "あなた宛て"
+  direct: "ダイレクト投稿"
+  notifications: "通知"
+  list: "リスト"
+  swap-left: "左に移動"
+  swap-right: "右に移動"
+  swap-up: "上に移動"
+  swap-down: "下に移動"
+  remove: "カラムを削除"
+  add-column: "カラムを追加"
+  rename: "名前を変更"
+  stack-left: "左に重ねる"
+  pop-right: "右に出す"
+
+deck/deck.tl-column.vue:
+  is-media-only: "メディア投稿のみ"
+  is-media-view: "メディアビュー"
+  edit: "オプション"
+
+deck/deck.user-column.vue:
+  posts: "投稿"
+  following: "フォロー"
+  followers: "フォロワー"
+  images: "画像"
+  activity: "アクティビティ"
+  timeline: "タイムライン"
+  pinned-notes: "ピン留めされた投稿"
+  push-to-a-list: "リストに追加"
+
 docs:
   edit-this-page-on-github: "間違いや改善点を見つけましたか？"
   edit-this-page-on-github-link: "このページをGitHubで編集"

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "10.43.1",
-	"clientVersion": "1.0.11616",
+	"version": "10.46.0",
+	"clientVersion": "1.0.11687",
 	"codename": "nighthike",
 	"main": "./built/index.js",
 	"private": true,
@@ -53,11 +53,11 @@
 		"@types/koa-logger": "3.1.1",
 		"@types/koa-mount": "3.0.1",
 		"@types/koa-multer": "1.0.0",
-		"@types/koa-router": "7.0.32",
+		"@types/koa-router": "7.0.33",
 		"@types/koa-send": "4.1.1",
 		"@types/koa-views": "2.0.3",
 		"@types/koa__cors": "2.2.3",
-		"@types/minio": "7.0.0",
+		"@types/minio": "7.0.1",
 		"@types/mkdirp": "0.5.2",
 		"@types/mocha": "5.2.5",
 		"@types/mongodb": "3.1.12",
@@ -69,7 +69,7 @@
 		"@types/qrcode": "1.3.0",
 		"@types/ratelimiter": "2.1.28",
 		"@types/redis": "2.8.7",
-		"@types/request": "2.48.0",
+		"@types/request": "2.48.1",
 		"@types/request-promise-native": "1.0.15",
 		"@types/rimraf": "2.0.2",
 		"@types/seedrandom": "2.4.27",
@@ -86,8 +86,8 @@
 		"@types/websocket": "0.0.40",
 		"@types/ws": "6.0.1",
 		"animejs": "2.2.0",
-		"apexcharts": "2.1.9",
-		"autobind-decorator": "2.1.0",
+		"apexcharts": "2.2.0",
+		"autobind-decorator": "2.2.1",
 		"autosize": "4.0.2",
 		"autwh": "0.1.0",
 		"bcryptjs": "2.4.3",
@@ -174,7 +174,7 @@
 		"promise-sequential": "1.1.1",
 		"pug": "2.0.3",
 		"punycode": "2.1.1",
-		"qrcode": "1.3.0",
+		"qrcode": "1.3.2",
 		"ratelimiter": "3.2.0",
 		"recaptcha-promise": "0.1.3",
 		"reconnecting-websocket": "4.1.10",
@@ -197,7 +197,7 @@
 		"stylus": "0.54.5",
 		"stylus-loader": "3.0.2",
 		"summaly": "2.2.0",
-		"systeminformation": "3.45.9",
+		"systeminformation": "3.47.0",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
 		"tinycolor2": "1.4.1",
@@ -205,7 +205,7 @@
 		"ts-loader": "5.3.0",
 		"ts-node": "7.0.1",
 		"tslint": "5.10.0",
-		"typescript": "3.1.5",
+		"typescript": "3.1.6",
 		"typescript-eslint-parser": "20.1.1",
 		"uglify-es": "3.3.9",
 		"url-loader": "1.1.2",
@@ -215,12 +215,13 @@
 		"vue-color": "2.7.0",
 		"vue-content-loading": "1.5.3",
 		"vue-cropperjs": "2.2.2",
+		"vue-i18n": "8.3.1",
 		"vue-js-modal": "1.3.26",
 		"vue-loader": "15.4.2",
 		"vue-router": "3.0.1",
 		"vue-style-loader": "4.1.2",
 		"vue-svg-inline-loader": "1.2.1",
-		"vue-sweetalert2": "1.5.6",
+		"vue-sweetalert2": "1.5.7",
 		"vue-template-compiler": "2.5.17",
 		"vuedraggable": "2.16.0",
 		"vuewordcloud": "18.7.11",

src/client/app/admin/views/announcements.vue

@@ -1,30 +1,32 @@
 <template>
 <div class="cdeuzmsthagexbkpofbmatmugjuvogfb">
 	<ui-card>
-		<div slot="title"><fa icon="broadcast-tower"/> %i18n:@announcements%</div>
+		<div slot="title"><fa icon="broadcast-tower"/> {{ $t('announcements') }}</div>
 		<section v-for="(announcement, i) in announcements" class="fit-top">
 			<ui-input v-model="announcement.title" @change="save">
-				<span>%i18n:@title%</span>
+				<span>{{ $t('title') }}</span>
 			</ui-input>
 			<ui-textarea v-model="announcement.text">
-				<span>%i18n:@text%</span>
+				<span>{{ $t('text') }}</span>
 			</ui-textarea>
 			<ui-horizon-group>
-				<ui-button @click="save()"><fa :icon="['far', 'save']"/> %i18n:@save%</ui-button>
-				<ui-button @click="remove(i)"><fa :icon="['far', 'trash-alt']"/> %i18n:@remove%</ui-button>
+				<ui-button @click="save()"><fa :icon="['far', 'save']"/> {{ $t('save') }}</ui-button>
+				<ui-button @click="remove(i)"><fa :icon="['far', 'trash-alt']"/> {{ $t('remove') }}</ui-button>
 			</ui-horizon-group>
 		</section>
 		<section>
-			<ui-button @click="add"><fa icon="plus"/> %i18n:@add%</ui-button>
+			<ui-button @click="add"><fa icon="plus"/> {{ $t('add') }}</ui-button>
 		</section>
 	</ui-card>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue from 'vue';
+import i18n from '../../i18n';
 
 export default Vue.extend({
+	i18n: i18n('admin/views/announcements.vue'),
 	data() {
 		return {
 			announcements: [],
@@ -32,7 +34,7 @@ export default Vue.extend({
 	},
 
 	created() {
-		(this as any).os.getMeta().then(meta => {
+		this.$root.getMeta().then(meta => {
 			this.announcements = meta.broadcasts;
 		});
 	},
@@ -48,7 +50,7 @@ export default Vue.extend({
 		remove(i) {
 			this.$swal({
 				type: 'warning',
-				text: '%i18n:@_remove.are-you-sure%'.replace('$1', this.announcements.find((_, j) => j == i).title),
+				text: this.$t('_remove.are-you-sure').replace('$1', this.announcements.find((_, j) => j == i).title),
 				showCancelButton: true
 			}).then(res => {
 				if (!res.value) return;
@@ -56,19 +58,19 @@ export default Vue.extend({
 				this.save(true);
 				this.$swal({
 					type: 'success',
-					text: '%i18n:@_remove.removed%'
+					text: this.$t('_remove.removed')
 				});
 			});
 		},
 
 		save(silent) {
-			(this as any).api('admin/update-meta', {
+			this.$root.api('admin/update-meta', {
 				broadcasts: this.announcements
 			}).then(() => {
 				if (!silent) {
 					this.$swal({
 						type: 'success',
-						text: '%i18n:@saved%'
+						text: this.$t('saved')
 					});
 				}
 			}).catch(e => {

src/client/app/admin/views/ap-log.vue

@@ -33,7 +33,7 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		this.connection = (this as any).os.stream.useSharedConnection('apLog');
+		this.connection = this.$root.stream.useSharedConnection('apLog');
 		this.connection.on('log', this.onLog);
 		this.connection.on('logs', this.onLogs);
 		this.connection.send('requestLog', {

src/client/app/admin/views/charts.vue

@@ -1,36 +1,36 @@
 <template>
 <div class="qvgidhudpqhjttdhxubzuyrhyzgslujw">
 	<header>
-		<b><fa :icon="['far', 'chart-bar']"/> %i18n:@title%:</b>
+		<b><fa :icon="['far', 'chart-bar']"/> {{ $t('title') }}:</b>
 		<select v-model="src">
-			<optgroup label="%i18n:@federation%">
-				<option value="federation-instances">%i18n:@charts.federation-instances%</option>
-				<option value="federation-instances-total">%i18n:@charts.federation-instances-total%</option>
+			<optgroup :label="$t('federation')">
+				<option value="federation-instances">{{ $t('charts.federation-instances') }}</option>
+				<option value="federation-instances-total">{{ $t('charts.federation-instances-total') }}</option>
 			</optgroup>
-			<optgroup label="%i18n:@users%">
-				<option value="users">%i18n:@charts.users%</option>
-				<option value="users-total">%i18n:@charts.users-total%</option>
+			<optgroup :label="$t('users')">
+				<option value="users">{{ $t('charts.users') }}</option>
+				<option value="users-total">{{ $t('charts.users-total') }}</option>
 			</optgroup>
-			<optgroup label="%i18n:@notes%">
-				<option value="notes">%i18n:@charts.notes%</option>
-				<option value="local-notes">%i18n:@charts.local-notes%</option>
-				<option value="remote-notes">%i18n:@charts.remote-notes%</option>
-				<option value="notes-total">%i18n:@charts.notes-total%</option>
+			<optgroup :label="$t('notes')">
+				<option value="notes">{{ $t('charts.notes') }}</option>
+				<option value="local-notes">{{ $t('charts.local-notes') }}</option>
+				<option value="remote-notes">{{ $t('charts.remote-notes') }}</option>
+				<option value="notes-total">{{ $t('charts.notes-total') }}</option>
 			</optgroup>
-			<optgroup label="%i18n:@drive%">
-				<option value="drive-files">%i18n:@charts.drive-files%</option>
-				<option value="drive-files-total">%i18n:@charts.drive-files-total%</option>
-				<option value="drive">%i18n:@charts.drive%</option>
-				<option value="drive-total">%i18n:@charts.drive-total%</option>
+			<optgroup :label="$t('drive')">
+				<option value="drive-files">{{ $t('charts.drive-files') }}</option>
+				<option value="drive-files-total">{{ $t('charts.drive-files-total') }}</option>
+				<option value="drive">{{ $t('charts.drive') }}</option>
+				<option value="drive-total">{{ $t('charts.drive-total') }}</option>
 			</optgroup>
-			<optgroup label="%i18n:@network%">
-				<option value="network-requests">%i18n:@charts.network-requests%</option>
-				<option value="network-time">%i18n:@charts.network-time%</option>
-				<option value="network-usage">%i18n:@charts.network-usage%</option>
+			<optgroup :label="$t('network')">
+				<option value="network-requests">{{ $t('charts.network-requests') }}</option>
+				<option value="network-time">{{ $t('charts.network-time') }}</option>
+				<option value="network-usage">{{ $t('charts.network-usage') }}</option>
 			</optgroup>
 		</select>
 		<div>
-			<span @click="span = 'day'" :class="{ active: span == 'day' }">%i18n:@per-day%</span> | <span @click="span = 'hour'" :class="{ active: span == 'hour' }">%i18n:@per-hour%</span>
+			<span @click="span = 'day'" :class="{ active: span == 'day' }">{{ $t('per-day') }}</span> | <span @click="span = 'hour'" :class="{ active: span == 'hour' }">{{ $t('per-hour') }}</span>
 		</div>
 	</header>
 	<div ref="chart"></div>
@@ -39,6 +39,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../i18n';
 import * as tinycolor from 'tinycolor2';
 import * as ApexCharts from 'apexcharts';
 
@@ -48,6 +49,7 @@ const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
 const negate = arr => arr.map(x => -x);
 
 export default Vue.extend({
+	i18n: i18n('admin/views/charts.vue'),
 	data() {
 		return {
 			chart: null,
@@ -103,17 +105,17 @@ export default Vue.extend({
 		this.now = new Date();
 
 		const [perHour, perDay] = await Promise.all([Promise.all([
-			(this as any).api('charts/federation', { limit: limit, span: 'hour' }),
-			(this as any).api('charts/users', { limit: limit, span: 'hour' }),
-			(this as any).api('charts/notes', { limit: limit, span: 'hour' }),
-			(this as any).api('charts/drive', { limit: limit, span: 'hour' }),
-			(this as any).api('charts/network', { limit: limit, span: 'hour' })
+			this.$root.api('charts/federation', { limit: limit, span: 'hour' }),
+			this.$root.api('charts/users', { limit: limit, span: 'hour' }),
+			this.$root.api('charts/notes', { limit: limit, span: 'hour' }),
+			this.$root.api('charts/drive', { limit: limit, span: 'hour' }),
+			this.$root.api('charts/network', { limit: limit, span: 'hour' })
 		]), Promise.all([
-			(this as any).api('charts/federation', { limit: limit, span: 'day' }),
-			(this as any).api('charts/users', { limit: limit, span: 'day' }),
-			(this as any).api('charts/notes', { limit: limit, span: 'day' }),
-			(this as any).api('charts/drive', { limit: limit, span: 'day' }),
-			(this as any).api('charts/network', { limit: limit, span: 'day' })
+			this.$root.api('charts/federation', { limit: limit, span: 'day' }),
+			this.$root.api('charts/users', { limit: limit, span: 'day' }),
+			this.$root.api('charts/notes', { limit: limit, span: 'day' }),
+			this.$root.api('charts/drive', { limit: limit, span: 'day' }),
+			this.$root.api('charts/network', { limit: limit, span: 'day' })
 		])]);
 
 		const chart = {
@@ -138,6 +140,10 @@ export default Vue.extend({
 		this.render();
 	},
 
+	beforeDestroy() {
+		this.chartInstance.destroy();
+	},
+
 	methods: {
 		setSrc(src) {
 			this.src = src;

src/client/app/admin/views/cpu-memory.vue

@@ -47,7 +47,7 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		(this as any).os.getMeta().then(meta => {
+		this.$root.getMeta().then(meta => {
 			this.meta = meta;
 		});
 
@@ -117,6 +117,9 @@ export default Vue.extend({
 	beforeDestroy() {
 		this.connection.off('stats', this.onStats);
 		this.connection.off('statsLog', this.onStatsLog);
+
+		this.cpuChart.destroy();
+		this.memChart.destroy();
 	},
 
 	methods: {

src/client/app/admin/views/dashboard.vue

@@ -5,7 +5,7 @@
 		<p><b>Machine</b><span>{{ meta.machine }}</span></p>
 		<p><b>OS</b><span>{{ meta.os }}</span></p>
 		<p><b>Node</b><span>{{ meta.node }}</span></p>
-		<p>%i18n:common.ai-chan-kawaii%</p>
+		<p>{{ $t('@.ai-chan-kawaii') }}</p>
 	</header>
 
 	<div v-if="stats" class="stats">
@@ -13,12 +13,12 @@
 			<div>
 				<div><fa icon="user"/></div>
 				<div>
-					<span>%i18n:@accounts%</span>
+					<span>{{ $t('accounts') }}</span>
 					<b class="primary">{{ stats.originalUsersCount | number }}</b>
 				</div>
 			</div>
 			<div>
-				<span><fa icon="home"/> %i18n:@this-instance%</span>
+				<span><fa icon="home"/> {{ $t('this-instance') }}</span>
 				<span @click="setChartSrc('users')"><fa :icon="['far', 'chart-bar']"/></span>
 			</div>
 		</div>
@@ -26,12 +26,12 @@
 			<div>
 				<div><fa icon="pencil-alt"/></div>
 				<div>
-					<span>%i18n:@notes%</span>
+					<span>{{ $t('notes') }}</span>
 					<b class="primary">{{ stats.originalNotesCount | number }}</b>
 				</div>
 			</div>
 			<div>
-				<span><fa icon="home"/> %i18n:@this-instance%</span>
+				<span><fa icon="home"/> {{ $t('this-instance') }}</span>
 				<span @click="setChartSrc('notes')"><fa :icon="['far', 'chart-bar']"/></span>
 			</div>
 		</div>
@@ -39,12 +39,12 @@
 			<div>
 				<div><fa icon="database"/></div>
 				<div>
-					<span>%i18n:@drive%</span>
+					<span>{{ $t('drive') }}</span>
 					<b>{{ stats.driveUsageLocal | bytes }}</b>
 				</div>
 			</div>
 			<div>
-				<span><fa icon="home"/> %i18n:@this-instance%</span>
+				<span><fa icon="home"/> {{ $t('this-instance') }}</span>
 				<span @click="setChartSrc('drive')"><fa :icon="['far', 'chart-bar']"/></span>
 			</div>
 		</div>
@@ -52,12 +52,12 @@
 			<div>
 				<div><fa :icon="['far', 'hdd']"/></div>
 				<div>
-					<span>%i18n:@instances%</span>
+					<span>{{ $t('instances') }}</span>
 					<b>{{ stats.instances | number }}</b>
 				</div>
 			</div>
 			<div>
-				<span><fa icon="globe"/> %i18n:@federated%</span>
+				<span><fa icon="globe"/> {{ $t('federated') }}</span>
 				<span @click="setChartSrc('federation-instances-total')"><fa :icon="['far', 'chart-bar']"/></span>
 			</div>
 		</div>
@@ -78,12 +78,14 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue from 'vue';
+import i18n from '../../i18n';
 import XCpuMemory from "./cpu-memory.vue";
 import XCharts from "./charts.vue";
 import XApLog from "./ap-log.vue";
 
 export default Vue.extend({
+	i18n: i18n('admin/views/dashboard.vue'),
 	components: {
 		XCpuMemory,
 		XCharts,
@@ -99,13 +101,13 @@ export default Vue.extend({
 	},
 
 	created() {
-		this.connection = (this as any).os.stream.useSharedConnection('serverStats');
+		this.connection = this.$root.stream.useSharedConnection('serverStats');
 
-		(this as any).os.getMeta().then(meta => {
+		this.$root.getMeta().then(meta => {
 			this.meta = meta;
 		});
 
-		(this as any).api('stats').then(stats => {
+		this.$root.api('stats').then(stats => {
 			this.stats = stats;
 		});
 	},

src/client/app/admin/views/emoji.vue

@@ -1,46 +1,46 @@
 <template>
 <div class="tumhkfkmgtvzljezfvmgkeurkfncshbe">
 	<ui-card>
-		<div slot="title"><fa icon="plus"/> %i18n:@add-emoji.title%</div>
+		<div slot="title"><fa icon="plus"/> {{ $t('add-emoji.title') }}</div>
 		<section class="fit-top">
 			<ui-horizon-group inputs>
 				<ui-input v-model="name">
-					<span>%i18n:@add-emoji.name%</span>
-					<span slot="desc">%i18n:@add-emoji.name-desc%</span>
+					<span>{{ $t('add-emoji.name') }}</span>
+					<span slot="desc">{{ $t('add-emoji.name-desc') }}</span>
 				</ui-input>
 				<ui-input v-model="aliases">
-					<span>%i18n:@add-emoji.aliases%</span>
-					<span slot="desc">%i18n:@add-emoji.aliases-desc%</span>
+					<span>{{ $t('add-emoji.aliases') }}</span>
+					<span slot="desc">{{ $t('add-emoji.aliases-desc') }}</span>
 				</ui-input>
 			</ui-horizon-group>
 			<ui-input v-model="url">
 				<i slot="icon"><fa icon="link"/></i>
-				<span>%i18n:@add-emoji.url%</span>
+				<span>{{ $t('add-emoji.url') }}</span>
 			</ui-input>
-			<ui-info>%i18n:@add-emoji.info%</ui-info>
-			<ui-button @click="add">%i18n:@add-emoji.add%</ui-button>
+			<ui-info>{{ $t('add-emoji.info') }}</ui-info>
+			<ui-button @click="add">{{ $t('add-emoji.add') }}</ui-button>
 		</section>
 	</ui-card>
 
 	<ui-card>
-		<div slot="title"><fa :icon="['far', 'grin']"/> %i18n:@emojis.title%</div>
+		<div slot="title"><fa :icon="['far', 'grin']"/> {{ $t('emojis.title') }}</div>
 		<section v-for="emoji in emojis">
 			<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
 			<ui-horizon-group inputs>
 				<ui-input v-model="emoji.name">
-					<span>%i18n:@add-emoji.name%</span>
+					<span>{{ $t('add-emoji.name') }}</span>
 				</ui-input>
 				<ui-input v-model="emoji.aliases">
-					<span>%i18n:@add-emoji.aliases%</span>
+					<span>{{ $t('add-emoji.aliases') }}</span>
 				</ui-input>
 			</ui-horizon-group>
 			<ui-input v-model="emoji.url">
 				<i slot="icon"><fa icon="link"/></i>
-				<span>%i18n:@add-emoji.url%</span>
+				<span>{{ $t('add-emoji.url') }}</span>
 			</ui-input>
 			<ui-horizon-group>
-				<ui-button @click="updateEmoji(emoji)"><fa :icon="['far', 'save']"/> %i18n:@emojis.update%</ui-button>
-				<ui-button @click="removeEmoji(emoji)"><fa :icon="['far', 'trash-alt']"/> %i18n:@emojis.remove%</ui-button>
+				<ui-button @click="updateEmoji(emoji)"><fa :icon="['far', 'save']"/> {{ $t('emojis.update') }}</ui-button>
+				<ui-button @click="removeEmoji(emoji)"><fa :icon="['far', 'trash-alt']"/> {{ $t('emojis.remove') }}</ui-button>
 			</ui-horizon-group>
 		</section>
 	</ui-card>
@@ -48,9 +48,11 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue from 'vue';
+import i18n from '../../i18n';
 
 export default Vue.extend({
+	i18n: i18n('admin/views/emoji.vue'),
 	data() {
 		return {
 			name: '',
@@ -66,14 +68,14 @@ export default Vue.extend({
 
 	methods: {
 		add() {
-			(this as any).api('admin/emoji/add', {
+			this.$root.api('admin/emoji/add', {
 				name: this.name,
 				url: this.url,
 				aliases: this.aliases.split(' ').filter(x => x.length > 0)
 			}).then(() => {
 				this.$swal({
 					type: 'success',
-					text: '%i18n:@add-emoji.added%'
+					text: this.$t('add-emoji.added')
 				});
 				this.fetchEmojis();
 			}).catch(e => {
@@ -85,7 +87,7 @@ export default Vue.extend({
 		},
 
 		fetchEmojis() {
-			(this as any).api('admin/emoji/list').then(emojis => {
+			this.$root.api('admin/emoji/list').then(emojis => {
 				emojis.reverse();
 				emojis.forEach(e => e.aliases = (e.aliases || []).join(' '));
 				this.emojis = emojis;
@@ -93,7 +95,7 @@ export default Vue.extend({
 		},
 
 		updateEmoji(emoji) {
-			(this as any).api('admin/emoji/update', {
+			this.$root.api('admin/emoji/update', {
 				id: emoji.id,
 				name: emoji.name,
 				url: emoji.url,
@@ -101,7 +103,7 @@ export default Vue.extend({
 			}).then(() => {
 				this.$swal({
 					type: 'success',
-					text: '%i18n:@updated%'
+					text: this.$t('updated')
 				});
 			}).catch(e => {
 				this.$swal({
@@ -114,17 +116,17 @@ export default Vue.extend({
 		removeEmoji(emoji) {
 			this.$swal({
 				type: 'warning',
-				text: '%i18n:@remove-emoji.are-you-sure%'.replace('$1', emoji.name),
+				text: this.$t('remove-emoji.are-you-sure').replace('$1', emoji.name),
 				showCancelButton: true
 			}).then(res => {
 				if (!res.value) return;
 
-				(this as any).api('admin/emoji/remove', {
+				this.$root.api('admin/emoji/remove', {
 					id: emoji.id
 				}).then(() => {
 					this.$swal({
 						type: 'success',
-						text: '%i18n:@remove-emoji.removed%'
+						text: this.$t('remove-emoji.removed')
 					});
 					this.fetchEmojis();
 				}).catch(e => {

src/client/app/admin/views/hashtags.vue

@@ -1,37 +1,39 @@
 <template>
 <div>
 	<ui-card>
-		<div slot="title">%i18n:@hided-tags%</div>
+		<div slot="title">{{ $t('hided-tags') }}</div>
 		<section>
 			<textarea class="jdnqwkzlnxcfftthoybjxrebyolvoucw" v-model="hidedTags"></textarea>
-			<ui-button @click="save">%i18n:@save%</ui-button>
+			<ui-button @click="save">{{ $t('save') }}</ui-button>
 		</section>
 	</ui-card>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue from 'vue';
+import i18n from '../../i18n';
 
 export default Vue.extend({
+	i18n: i18n('admin/views/hashtags.vue'),
 	data() {
 		return {
 			hidedTags: '',
 		};
 	},
 	created() {
-		(this as any).os.getMeta().then(meta => {
+		this.$root.getMeta().then(meta => {
 			this.hidedTags = meta.hidedTags.join('\n');
 		});
 	},
 	methods: {
 		save() {
-			(this as any).api('admin/update-meta', {
+			this.$root.api('admin/update-meta', {
 				hidedTags: this.hidedTags.split('\n')
 			}).then(() => {
-				//(this as any).os.apis.dialog({ text: `Saved` });
+				//this.$root.os.apis.dialog({ text: `Saved` });
 			}).catch(e => {
-				//(this as any).os.apis.dialog({ text: `Failed ${e}` });
+				//this.$root.os.apis.dialog({ text: `Failed ${e}` });
 			});
 		}
 	}

src/client/app/admin/views/index.vue

@@ -18,18 +18,18 @@
 			<p class="name">{{ $store.state.i | userName }}</p>
 		</div>
 		<ul>
-			<li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }"><fa icon="home" fixed-width/>%i18n:@dashboard%</li>
-			<li @click="nav('instance')" :class="{ active: page == 'instance' }"><fa icon="cog" fixed-width/>%i18n:@instance%</li>
-			<li @click="nav('users')" :class="{ active: page == 'users' }"><fa icon="users" fixed-width/>%i18n:@users%</li>
-			<li @click="nav('emoji')" :class="{ active: page == 'emoji' }"><fa :icon="['far', 'grin']" fixed-width/>%i18n:@emoji%</li>
-			<li @click="nav('announcements')" :class="{ active: page == 'announcements' }"><fa icon="broadcast-tower" fixed-width/>%i18n:@announcements%</li>
-			<li @click="nav('hashtags')" :class="{ active: page == 'hashtags' }"><fa icon="hashtag" fixed-width/>%i18n:@hashtags%</li>
+			<li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }"><fa icon="home" fixed-width/>{{ $t('dashboard') }}</li>
+			<li @click="nav('instance')" :class="{ active: page == 'instance' }"><fa icon="cog" fixed-width/>{{ $t('instance') }}</li>
+			<li @click="nav('users')" :class="{ active: page == 'users' }"><fa icon="users" fixed-width/>{{ $t('users') }}</li>
+			<li @click="nav('emoji')" :class="{ active: page == 'emoji' }"><fa :icon="['far', 'grin']" fixed-width/>{{ $t('emoji') }}</li>
+			<li @click="nav('announcements')" :class="{ active: page == 'announcements' }"><fa icon="broadcast-tower" fixed-width/>{{ $t('announcements') }}</li>
+			<li @click="nav('hashtags')" :class="{ active: page == 'hashtags' }"><fa icon="hashtag" fixed-width/>{{ $t('hashtags') }}</li>
 
-			<!-- <li @click="nav('drive')" :class="{ active: page == 'drive' }"><fa icon="cloud" fixed-width/>%i18n:common.drive%</li> -->
-			<!-- <li @click="nav('update')" :class="{ active: page == 'update' }">%i18n:@update%</li> -->
+			<!-- <li @click="nav('drive')" :class="{ active: page == 'drive' }"><fa icon="cloud" fixed-width/>{{ $t('@.drive') }}</li> -->
+			<!-- <li @click="nav('update')" :class="{ active: page == 'update' }">{{ $t('update') }}</li> -->
 		</ul>
 		<div class="back-to-misskey">
-			<a href="/"><fa icon="arrow-left"/> %i18n:@back-to-misskey%</a>
+			<a href="/"><fa icon="arrow-left"/> {{ $t('back-to-misskey') }}</a>
 		</div>
 		<div class="version">
 			<small>Misskey {{ version }}</small>
@@ -49,7 +49,8 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue from 'vue';
+import i18n from '../../i18n';
 import { version } from '../../config';
 import XDashboard from "./dashboard.vue";
 import XInstance from "./instance.vue";
@@ -63,6 +64,7 @@ const ua = navigator.userAgent.toLowerCase();
 const isMobile = /mobile|iphone|ipad|android/.test(ua);
 
 export default Vue.extend({
+	i18n: i18n('admin/views/index.vue'),
 	components: {
 		XDashboard,
 		XInstance,

src/client/app/admin/views/instance.vue

@@ -1,64 +1,89 @@
 <template>
 <div class="axbwjelsbymowqjyywpirzhdlszoncqs">
 	<ui-card>
-		<div slot="title"><fa icon="cog"/> %i18n:@instance%</div>
+		<div slot="title"><fa icon="cog"/> {{ $t('instance') }}</div>
 		<section class="fit-top fit-bottom">
-			<ui-input v-model="name">%i18n:@instance-name%</ui-input>
-			<ui-textarea v-model="description">%i18n:@instance-description%</ui-textarea>
-			<ui-input v-model="bannerUrl"><i slot="icon"><fa icon="link"/></i>%i18n:@banner-url%</ui-input>
+			<ui-input v-model="name">{{ $t('instance-name') }}</ui-input>
+			<ui-textarea v-model="description">{{ $t('instance-description') }}</ui-textarea>
+			<ui-input v-model="bannerUrl"><i slot="icon"><fa icon="link"/></i>{{ $t('banner-url') }}</ui-input>
+			<ui-input v-model="languages"><i slot="icon"><fa icon="language"/></i>{{ $t('languages') }}<span slot="desc">{{ $t('languages-desc') }}</span></ui-input>
 		</section>
 		<section class="fit-bottom">
-			<header><fa icon="headset"/> %i18n:@maintainer-config%</header>
-			<ui-input v-model="maintainerName">%i18n:@maintainer-name%</ui-input>
-			<ui-input v-model="maintainerEmail" type="email"><i slot="icon"><fa :icon="['far', 'envelope']"/></i>%i18n:@maintainer-email%</ui-input>
+			<header><fa icon="headset"/> {{ $t('maintainer-config') }}</header>
+			<ui-input v-model="maintainerName">{{ $t('maintainer-name') }}</ui-input>
+			<ui-input v-model="maintainerEmail" type="email"><i slot="icon"><fa :icon="['far', 'envelope']"/></i>{{ $t('maintainer-email') }}</ui-input>
 		</section>
 		<section class="fit-top fit-bottom">
-			<ui-input v-model="maxNoteTextLength">%i18n:@max-note-text-length%</ui-input>
+			<ui-input v-model="maxNoteTextLength">{{ $t('max-note-text-length') }}</ui-input>
 		</section>
 		<section class="fit-bottom">
-			<header><fa icon="cloud"/> %i18n:@drive-config%</header>
-			<ui-switch v-model="cacheRemoteFiles">%i18n:@cache-remote-files%<span slot="desc">%i18n:@cache-remote-files-desc%</span></ui-switch>
-			<ui-input v-model="localDriveCapacityMb">%i18n:@local-drive-capacity-mb%<span slot="suffix">MB</span><span slot="desc">%i18n:@mb%</span></ui-input>
-			<ui-input v-model="remoteDriveCapacityMb" :disabled="!cacheRemoteFiles">%i18n:@remote-drive-capacity-mb%<span slot="suffix">MB</span><span slot="desc">%i18n:@mb%</span></ui-input>
+			<header><fa icon="cloud"/> {{ $t('drive-config') }}</header>
+			<ui-switch v-model="cacheRemoteFiles">{{ $t('cache-remote-files') }}<span slot="desc">{{ $t('cache-remote-files-desc') }}</span></ui-switch>
+			<ui-input v-model="localDriveCapacityMb" type="number">{{ $t('local-drive-capacity-mb') }}<span slot="suffix">MB</span><span slot="desc">{{ $t('mb') }}</span></ui-input>
+			<ui-input v-model="remoteDriveCapacityMb" type="number" :disabled="!cacheRemoteFiles">{{ $t('remote-drive-capacity-mb') }}<span slot="suffix">MB</span><span slot="desc">{{ $t('mb') }}</span></ui-input>
 		</section>
 		<section class="fit-bottom">
-			<header><fa icon="shield-alt"/> %i18n:@recaptcha-config%</header>
-			<ui-switch v-model="enableRecaptcha">%i18n:@enable-recaptcha%</ui-switch>
-			<ui-info>%i18n:@recaptcha-info%</ui-info>
-			<ui-input v-model="recaptchaSiteKey" :disabled="!enableRecaptcha"><i slot="icon"><fa icon="key"/></i>%i18n:@recaptcha-site-key%</ui-input>
-			<ui-input v-model="recaptchaSecretKey" :disabled="!enableRecaptcha"><i slot="icon"><fa icon="key"/></i>%i18n:@recaptcha-secret-key%</ui-input>
+			<header><fa icon="shield-alt"/> {{ $t('recaptcha-config') }}</header>
+			<ui-switch v-model="enableRecaptcha">{{ $t('enable-recaptcha') }}</ui-switch>
+			<ui-info>{{ $t('recaptcha-info') }}</ui-info>
+			<ui-input v-model="recaptchaSiteKey" :disabled="!enableRecaptcha"><i slot="icon"><fa icon="key"/></i>{{ $t('recaptcha-site-key') }}</ui-input>
+			<ui-input v-model="recaptchaSecretKey" :disabled="!enableRecaptcha"><i slot="icon"><fa icon="key"/></i>{{ $t('recaptcha-secret-key') }}</ui-input>
 		</section>
 		<section>
-			<header><fa icon="ghost"/> %i18n:@proxy-account-config%</header>
-			<ui-info>%i18n:@proxy-account-info%</ui-info>
-			<ui-input v-model="proxyAccount"><i slot="prefix">@</i>%i18n:@proxy-account-username%<span slot="desc">%i18n:@proxy-account-username-desc%</span></ui-input>
-			<ui-info warn>%i18n:@proxy-account-warn%</ui-info>
+			<header><fa icon="ghost"/> {{ $t('proxy-account-config') }}</header>
+			<ui-info>{{ $t('proxy-account-info') }}</ui-info>
+			<ui-input v-model="proxyAccount"><span slot="prefix">@</span>{{ $t('proxy-account-username') }}<span slot="desc">{{ $t('proxy-account-username-desc') }}</span></ui-input>
+			<ui-info warn>{{ $t('proxy-account-warn') }}</ui-info>
 		</section>
 		<section>
-			<ui-switch v-model="disableRegistration">%i18n:@disable-registration%</ui-switch>
+			<ui-switch v-model="disableRegistration">{{ $t('disable-registration') }}</ui-switch>
 		</section>
 		<section>
-			<ui-switch v-model="disableLocalTimeline">%i18n:@disable-local-timeline%</ui-switch>
+			<ui-switch v-model="disableLocalTimeline">{{ $t('disable-local-timeline') }}</ui-switch>
 		</section>
 		<section>
-			<ui-button @click="updateMeta">%i18n:@save%</ui-button>
+			<ui-button @click="updateMeta">{{ $t('save') }}</ui-button>
 		</section>
 	</ui-card>
 
 	<ui-card>
-		<div slot="title">%i18n:@invite%</div>
+		<div slot="title">{{ $t('invite') }}</div>
 		<section>
-			<ui-button @click="invite">%i18n:@invite%</ui-button>
+			<ui-button @click="invite">{{ $t('invite') }}</ui-button>
 			<p v-if="inviteCode">Code: <code>{{ inviteCode }}</code></p>
 		</section>
 	</ui-card>
+
+	<ui-card>
+		<div slot="title"><fa :icon="['fab', 'twitter']"/> {{ $t('twitter-integration-config') }}</div>
+		<section>
+			<ui-switch v-model="enableTwitterIntegration">{{ $t('enable-twitter-integration') }}</ui-switch>
+			<ui-info>{{ $t('twitter-integration-info') }}</ui-info>
+			<ui-input v-model="twitterConsumerKey" :disabled="!enableTwitterIntegration"><i slot="icon"><fa icon="key"/></i>{{ $t('twitter-integration-consumer-key') }}</ui-input>
+			<ui-input v-model="twitterConsumerSecret" :disabled="!enableTwitterIntegration"><i slot="icon"><fa icon="key"/></i>{{ $t('twitter-integration-consumer-secret') }}</ui-input>
+			<ui-button @click="updateMeta">{{ $t('save') }}</ui-button>
+		</section>
+	</ui-card>
+
+	<ui-card>
+		<div slot="title"><fa :icon="['fab', 'github']"/> {{ $t('github-integration-config') }}</div>
+		<section>
+			<ui-switch v-model="enableGithubIntegration">{{ $t('enable-github-integration') }}</ui-switch>
+			<ui-info>{{ $t('github-integration-info') }}</ui-info>
+			<ui-input v-model="githubClientId" :disabled="!enableGithubIntegration"><i slot="icon"><fa icon="key"/></i>{{ $t('github-integration-client-id') }}</ui-input>
+			<ui-input v-model="githubClientSecret" :disabled="!enableGithubIntegration"><i slot="icon"><fa icon="key"/></i>{{ $t('github-integration-client-secret') }}</ui-input>
+			<ui-button @click="updateMeta">{{ $t('save') }}</ui-button>
+		</section>
+	</ui-card>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue from 'vue';
+import i18n from '../../i18n';
 
 export default Vue.extend({
+	i18n: i18n('admin/views/instance.vue'),
 	data() {
 		return {
 			maintainerName: null,
@@ -68,6 +93,7 @@ export default Vue.extend({
 			bannerUrl: null,
 			name: null,
 			description: null,
+			languages: null,
 			cacheRemoteFiles: false,
 			localDriveCapacityMb: null,
 			remoteDriveCapacityMb: null,
@@ -75,18 +101,25 @@ export default Vue.extend({
 			enableRecaptcha: false,
 			recaptchaSiteKey: null,
 			recaptchaSecretKey: null,
+			enableTwitterIntegration: false,
+			twitterConsumerKey: null,
+			twitterConsumerSecret: null,
+			enableGithubIntegration: false,
+			githubClientId: null,
+			githubClientSecret: null,
 			proxyAccount: null,
 			inviteCode: null,
 		};
 	},
 
 	created() {
-		(this as any).os.getMeta().then(meta => {
+		this.$root.getMeta().then(meta => {
 			this.maintainerName = meta.maintainer.name;
 			this.maintainerEmail = meta.maintainer.email;
 			this.bannerUrl = meta.bannerUrl;
 			this.name = meta.name;
 			this.description = meta.description;
+			this.languages = meta.langs.join(' ');
 			this.cacheRemoteFiles = meta.cacheRemoteFiles;
 			this.localDriveCapacityMb = meta.driveCapacityPerLocalUserMb;
 			this.remoteDriveCapacityMb = meta.driveCapacityPerRemoteUserMb;
@@ -95,12 +128,18 @@ export default Vue.extend({
 			this.recaptchaSiteKey = meta.recaptchaSiteKey;
 			this.recaptchaSecretKey = meta.recaptchaSecretKey;
 			this.proxyAccount = meta.proxyAccount;
+			this.enableTwitterIntegration = meta.enableTwitterIntegration;
+			this.twitterConsumerKey = meta.twitterConsumerKey;
+			this.twitterConsumerSecret = meta.twitterConsumerSecret;
+			this.enableGithubIntegration = meta.enableGithubIntegration;
+			this.githubClientId = meta.githubClientId;
+			this.githubClientSecret = meta.githubClientSecret;
 		});
 	},
 
 	methods: {
 		invite() {
-			(this as any).api('admin/invite').then(x => {
+			this.$root.api('admin/invite').then(x => {
 				this.inviteCode = x.code;
 			}).catch(e => {
 				this.$swal({
@@ -111,7 +150,7 @@ export default Vue.extend({
 		},
 
 		updateMeta() {
-			(this as any).api('admin/update-meta', {
+			this.$root.api('admin/update-meta', {
 				maintainerName: this.maintainerName,
 				maintainerEmail: this.maintainerEmail,
 				disableRegistration: this.disableRegistration,
@@ -119,6 +158,7 @@ export default Vue.extend({
 				bannerUrl: this.bannerUrl,
 				name: this.name,
 				description: this.description,
+				langs: this.languages.split(' '),
 				cacheRemoteFiles: this.cacheRemoteFiles,
 				localDriveCapacityMb: parseInt(this.localDriveCapacityMb, 10),
 				remoteDriveCapacityMb: parseInt(this.remoteDriveCapacityMb, 10),
@@ -127,10 +167,16 @@ export default Vue.extend({
 				recaptchaSiteKey: this.recaptchaSiteKey,
 				recaptchaSecretKey: this.recaptchaSecretKey,
 				proxyAccount: this.proxyAccount,
+				enableTwitterIntegration: this.enableTwitterIntegration,
+				twitterConsumerKey: this.twitterConsumerKey,
+				twitterConsumerSecret: this.twitterConsumerSecret,
+				enableGithubIntegration: this.enableGithubIntegration,
+				githubClientId: this.githubClientId,
+				githubClientSecret: this.githubClientSecret,
 			}).then(() => {
 				this.$swal({
 					type: 'success',
-					text: '%i18n:@saved%'
+					text: this.$t('saved')
 				});
 			}).catch(e => {
 				this.$swal({

src/client/app/admin/views/users.vue

@@ -1,52 +1,54 @@
 <template>
 <div class="ucnffhbtogqgscfmqcymwmmupoknpfsw">
 	<ui-card>
-		<div slot="title">%i18n:@verify-user%</div>
+		<div slot="title">{{ $t('verify-user') }}</div>
 		<section class="fit-top">
 			<ui-input v-model="verifyUsername" type="text">
 				<span slot="prefix">@</span>
 			</ui-input>
-			<ui-button @click="verifyUser" :disabled="verifying">%i18n:@verify%</ui-button>
+			<ui-button @click="verifyUser" :disabled="verifying">{{ $t('verify') }}</ui-button>
 		</section>
 	</ui-card>
 
 	<ui-card>
-		<div slot="title">%i18n:@unverify-user%</div>
+		<div slot="title">{{ $t('unverify-user') }}</div>
 		<section class="fit-top">
 			<ui-input v-model="unverifyUsername" type="text">
 				<span slot="prefix">@</span>
 			</ui-input>
-			<ui-button @click="unverifyUser" :disabled="unverifying">%i18n:@unverify%</ui-button>
+			<ui-button @click="unverifyUser" :disabled="unverifying">{{ $t('unverify') }}</ui-button>
 		</section>
 	</ui-card>
 
 	<ui-card>
-		<div slot="title">%i18n:@suspend-user%</div>
+		<div slot="title">{{ $t('suspend-user') }}</div>
 		<section class="fit-top">
 			<ui-input v-model="suspendUsername" type="text">
 				<span slot="prefix">@</span>
 			</ui-input>
-			<ui-button @click="suspendUser" :disabled="suspending">%i18n:@suspend%</ui-button>
+			<ui-button @click="suspendUser" :disabled="suspending">{{ $t('suspend') }}</ui-button>
 		</section>
 	</ui-card>
 
 	<ui-card>
-		<div slot="title">%i18n:@unsuspend-user%</div>
+		<div slot="title">{{ $t('unsuspend-user') }}</div>
 		<section class="fit-top">
 			<ui-input v-model="unsuspendUsername" type="text">
 				<span slot="prefix">@</span>
 			</ui-input>
-			<ui-button @click="unsuspendUser" :disabled="unsuspending">%i18n:@unsuspend%</ui-button>
+			<ui-button @click="unsuspendUser" :disabled="unsuspending">{{ $t('unsuspend') }}</ui-button>
 		</section>
 	</ui-card>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue from 'vue';
+import i18n from '../../i18n';
 import parseAcct from "../../../../misc/acct/parse";
 
 export default Vue.extend({
+	i18n: i18n('admin/views/users.vue'),
 	data() {
 		return {
 			verifyUsername: null,
@@ -65,13 +67,13 @@ export default Vue.extend({
 			this.verifying = true;
 
 			const process = async () => {
-				const user = await (this as any).os.api('users/show', parseAcct(this.verifyUsername));
-				await (this as any).os.api('admin/verify-user', { userId: user.id });
-				//(this as any).os.apis.dialog({ text: '%i18n:@verified%' });
+				const user = await this.$root.os.api('users/show', parseAcct(this.verifyUsername));
+				await this.$root.os.api('admin/verify-user', { userId: user.id });
+				//this.$root.os.apis.dialog({ text: this.$t('verified') });
 			};
 
 			await process().catch(e => {
-				//(this as any).os.apis.dialog({ text: `Failed: ${e}` });
+				//this.$root.os.apis.dialog({ text: `Failed: ${e}` });
 			});
 
 			this.verifying = false;
@@ -81,13 +83,13 @@ export default Vue.extend({
 			this.unverifying = true;
 
 			const process = async () => {
-				const user = await (this as any).os.api('users/show', parseAcct(this.unverifyUsername));
-				await (this as any).os.api('admin/unverify-user', { userId: user.id });
-				//(this as any).os.apis.dialog({ text: '%i18n:@unverified%' });
+				const user = await this.$root.os.api('users/show', parseAcct(this.unverifyUsername));
+				await this.$root.os.api('admin/unverify-user', { userId: user.id });
+				//this.$root.os.apis.dialog({ text: this.$t('unverified') });
 			};
 
 			await process().catch(e => {
-				//(this as any).os.apis.dialog({ text: `Failed: ${e}` });
+				//this.$root.os.apis.dialog({ text: `Failed: ${e}` });
 			});
 
 			this.unverifying = false;
@@ -97,13 +99,13 @@ export default Vue.extend({
 			this.suspending = true;
 
 			const process = async () => {
-				const user = await (this as any).os.api('users/show', parseAcct(this.suspendUsername));
-				await (this as any).os.api('admin/suspend-user', { userId: user.id });
-				//(this as any).os.apis.dialog({ text: '%i18n:@suspended%' });
+				const user = await this.$root.os.api('users/show', parseAcct(this.suspendUsername));
+				await this.$root.os.api('admin/suspend-user', { userId: user.id });
+				//this.$root.os.apis.dialog({ text: this.$t('suspended') });
 			};
 
 			await process().catch(e => {
-				//(this as any).os.apis.dialog({ text: `Failed: ${e}` });
+				//this.$root.os.apis.dialog({ text: `Failed: ${e}` });
 			});
 
 			this.suspending = false;
@@ -113,13 +115,13 @@ export default Vue.extend({
 			this.unsuspending = true;
 
 			const process = async () => {
-				const user = await (this as any).os.api('users/show', parseAcct(this.unsuspendUsername));
-				await (this as any).os.api('admin/unsuspend-user', { userId: user.id });
-				//(this as any).os.apis.dialog({ text: '%i18n:@unsuspended%' });
+				const user = await this.$root.os.api('users/show', parseAcct(this.unsuspendUsername));
+				await this.$root.os.api('admin/unsuspend-user', { userId: user.id });
+				//this.$root.os.apis.dialog({ text: this.$t('unsuspended') });
 			};
 
 			await process().catch(e => {
-				//(this as any).os.apis.dialog({ text: `Failed: ${e}` });
+				//this.$root.os.apis.dialog({ text: `Failed: ${e}` });
 			});
 
 			this.unsuspending = false;

src/client/app/app.styl

@@ -13,13 +13,6 @@ html
 body
 	overflow-wrap break-word
 
-#error
-	padding 32px
-	color #fff
-
-	hr
-		border solid 1px #fff
-
 #nprogress
 	pointer-events none
 

src/client/app/auth/views/form.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="form">
 	<header>
-		<h1>%i18n:@share-access%</h1>
+		<h1 v-html="$t('share-access', { name: app.name })"></h1>
 		<img :src="app.iconUrl"/>
 	</header>
 	<div class="app">
@@ -11,32 +11,35 @@
 			<p class="description">{{ app.description }}</p>
 		</section>
 		<section>
-			<h2>%i18n:@permission-ask%</h2>
+			<h2>{{ $t('permission-ask') }}</h2>
 			<ul>
 				<template v-for="p in app.permission">
-					<li v-if="p == 'account-read'">%i18n:@account-read%</li>
-					<li v-if="p == 'account-write'">%i18n:@account-write%</li>
-					<li v-if="p == 'note-write'">%i18n:@note-write%</li>
-					<li v-if="p == 'like-write'">%i18n:@like-write%</li>
-					<li v-if="p == 'following-write'">%i18n:@following-write%</li>
-					<li v-if="p == 'drive-read'">%i18n:@drive-read%</li>
-					<li v-if="p == 'drive-write'">%i18n:@drive-write%</li>
-					<li v-if="p == 'notification-read'">%i18n:@notification-read%</li>
-					<li v-if="p == 'notification-write'">%i18n:@notification-write%</li>
+					<li v-if="p == 'account-read'">{{ $t('account-read') }}</li>
+					<li v-if="p == 'account-write'">{{ $t('account-write') }}</li>
+					<li v-if="p == 'note-write'">{{ $t('note-write') }}</li>
+					<li v-if="p == 'like-write'">{{ $t('like-write') }}</li>
+					<li v-if="p == 'following-write'">{{ $t('following-write') }}</li>
+					<li v-if="p == 'drive-read'">{{ $t('drive-read') }}</li>
+					<li v-if="p == 'drive-write'">{{ $t('drive-write') }}</li>
+					<li v-if="p == 'notification-read'">{{ $t('notification-read') }}</li>
+					<li v-if="p == 'notification-write'">{{ $t('notification-write') }}</li>
 				</template>
 			</ul>
 		</section>
 	</div>
 	<div class="action">
-		<button @click="cancel">%i18n:@cancel%</button>
-		<button @click="accept">%i18n:@accept%</button>
+		<button @click="cancel">{{ $t('cancel') }}</button>
+		<button @click="accept">{{ $t('accept') }}</button>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../i18n';
+
 export default Vue.extend({
+	i18n: i18n('auth/views/form.vue'),
 	props: ['session'],
 	computed: {
 		app(): any {
@@ -45,7 +48,7 @@ export default Vue.extend({
 	},
 	methods: {
 		cancel() {
-			(this as any).api('auth/deny', {
+			this.$root.api('auth/deny', {
 				token: this.session.token
 			}).then(() => {
 				this.$emit('denied');
@@ -53,7 +56,7 @@ export default Vue.extend({
 		},
 
 		accept() {
-			(this as any).api('auth/accept', {
+			this.$root.api('auth/accept', {
 				token: this.session.token
 			}).then(() => {
 				this.$emit('accepted');

src/client/app/auth/views/index.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="index">
 	<main v-if="$store.getters.isSignedIn">
-		<p class="fetching" v-if="fetching">%i18n:@loading%<mk-ellipsis/></p>
+		<p class="fetching" v-if="fetching">{{ $t('loading') }}<mk-ellipsis/></p>
 		<x-form
 			class="form"
 			ref="form"
@@ -11,20 +11,20 @@
 			@accepted="accepted"
 		/>
 		<div class="denied" v-if="state == 'denied'">
-			<h1>%i18n:@denied%</h1>
-			<p>%i18n:@denied-paragraph%</p>
+			<h1>{{ $t('denied') }}</h1>
+			<p>{{ $t('denied-paragraph') }}</p>
 		</div>
 		<div class="accepted" v-if="state == 'accepted'">
-			<h1>{{ session.app.isAuthorized ? '%i18n:@already-authorized%' : '%i18n:@allowed%' }}</h1>
-			<p v-if="session.app.callbackUrl">%i18n:@callback-url%<mk-ellipsis/></p>
-			<p v-if="!session.app.callbackUrl">%i18n:@please-go-back%</p>
+			<h1>{{ session.app.isAuthorized ? this.$t('already-authorized') : this.$t('allowed') }}</h1>
+			<p v-if="session.app.callbackUrl">{{ $t('callback-url') }}<mk-ellipsis/></p>
+			<p v-if="!session.app.callbackUrl">{{ $t('please-go-back') }}</p>
 		</div>
 		<div class="error" v-if="state == 'fetch-session-error'">
-			<p>%i18n:@error%</p>
+			<p>{{ $t('error') }}</p>
 		</div>
 	</main>
 	<main class="signin" v-if="!$store.getters.isSignedIn">
-		<h1>%i18n:@sign-in%</h1>
+		<h1>{{ $t('sign-in') }}</h1>
 		<mk-signin/>
 	</main>
 	<footer><img src="/assets/auth/icon.svg" alt="Misskey"/></footer>
@@ -33,9 +33,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../i18n';
 import XForm from './form.vue';
 
 export default Vue.extend({
+	i18n: i18n('auth/views/index.vue'),
 	components: {
 		XForm
 	},
@@ -55,7 +57,7 @@ export default Vue.extend({
 		if (!this.$store.getters.isSignedIn) return;
 
 		// Fetch session
-		(this as any).api('auth/session/show', {
+		this.$root.api('auth/session/show', {
 			token: this.token
 		}).then(session => {
 			this.session = session;
@@ -63,7 +65,7 @@ export default Vue.extend({
 
 			// 既に連携していた場合
 			if (this.session.app.isAuthorized) {
-				(this as any).api('auth/accept', {
+				this.$root.api('auth/accept', {
 					token: this.session.token
 				}).then(() => {
 					this.accepted();

src/client/app/common/scripts/check-for-update.ts

@@ -1,8 +1,7 @@
-import MiOS from '../../mios';
 import { clientVersion as current } from '../../config';
 
-export default async function(mios: MiOS, force = false, silent = false) {
-	const meta = await mios.getMeta(force);
+export default async function($root: any, force = false, silent = false) {
+	const meta = await $root.getMeta(force);
 	const newer = meta.clientVersion;
 
 	if (newer != current) {
@@ -23,7 +22,7 @@ export default async function(mios: MiOS, force = false, silent = false) {
 		}
 
 		if (!silent) {
-			mios.apis.dialog({
+			$root.$dialog({
 				title: '%i18n:common.update-available-title%',
 				text: '%i18n:common.update-available%'.replace('{newer}', newer).replace('{current}', current)
 			});

src/client/app/common/scripts/fuck-ad-block.ts

@@ -1,10 +1,10 @@
 declare const fuckAdBlock: any;
 
-export default (os) => {
+export default ($root: any) => {
 	require('fuckadblock');
 
 	function adBlockDetected() {
-		os.apis.dialog({
+		$root.$dialog({
 			title: '%fa:exclamation-triangle%%i18n:common.adblock.detected%',
 			text: '%i18n:common.adblock.warning%',
 			actins: [{

src/client/app/common/scripts/note-mixin.ts

@@ -88,7 +88,7 @@ export default (opts: Opts = {}) => ({
 
 	methods: {
 		reply(viaKeyboard = false) {
-			(this as any).apis.post({
+			this.$root.$post({
 				reply: this.appearNote,
 				animation: !viaKeyboard,
 				cb: () => {
@@ -98,7 +98,7 @@ export default (opts: Opts = {}) => ({
 		},
 
 		renote(viaKeyboard = false) {
-			(this as any).apis.post({
+			this.$root.$post({
 				renote: this.appearNote,
 				animation: !viaKeyboard,
 				cb: () => {
@@ -115,7 +115,7 @@ export default (opts: Opts = {}) => ({
 
 		react(viaKeyboard = false) {
 			this.blur();
-			(this as any).os.new(MkReactionPicker, {
+			this.$root.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
 				note: this.appearNote,
 				showFocus: viaKeyboard,
@@ -126,28 +126,28 @@ export default (opts: Opts = {}) => ({
 		},
 
 		reactDirectly(reaction) {
-			(this as any).api('notes/reactions/create', {
+			(this.$root.api('notes/reactions/create', {
 				noteId: this.appearNote.id,
 				reaction: reaction
 			});
 		},
 
 		favorite() {
-			(this as any).api('notes/favorites/create', {
+			this.$root.api('notes/favorites/create', {
 				noteId: this.appearNote.id
 			}).then(() => {
-				(this as any).os.new(Ok);
+				this.$root.new(Ok);
 			});
 		},
 
 		del() {
-			(this as any).api('notes/delete', {
+			this.$root.api('notes/delete', {
 				noteId: this.appearNote.id
 			});
 		},
 
 		menu(viaKeyboard = false) {
-			(this as any).os.new(MkNoteMenu, {
+			this.$root.new(MkNoteMenu, {
 				source: this.$refs.menuButton,
 				note: this.appearNote,
 				animation: !viaKeyboard,

src/client/app/common/scripts/note-subscriber.ts

@@ -26,7 +26,7 @@ export default prop => ({
 
 	created() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection = (this as any).os.stream;
+			this.connection = this.$root.stream;
 		}
 	},
 

src/client/app/common/views/components/api-settings.vue

@@ -4,29 +4,29 @@
 
 	<section class="fit-top">
 		<ui-input :value="$store.state.i.token" readonly>
-			<span>%i18n:@token%</span>
+			<span>{{ $t('token') }}</span>
 		</ui-input>
-		<p>%i18n:@intro%</p>
-		<ui-info warn>%i18n:@caution%</ui-info>
-		<p>%i18n:@regeneration-of-token%</p>
-		<ui-button @click="regenerateToken"><fa icon="sync-alt"/> %i18n:@regenerate-token%</ui-button>
+		<p>{{ $t('intro') }}</p>
+		<ui-info warn>{{ $t('caution') }}</ui-info>
+		<p>{{ $t('regeneration-of-token') }}</p>
+		<ui-button @click="regenerateToken"><fa icon="sync-alt"/> {{ $t('regenerate-token') }}</ui-button>
 	</section>
 
 	<section>
-		<header><fa icon="terminal"/> %i18n:@console.title%</header>
+		<header><fa icon="terminal"/> {{ $t('console.title') }}</header>
 		<ui-input v-model="endpoint">
-			<span>%i18n:@console.endpoint%</span>
+			<span>{{ $t('console.endpoint') }}</span>
 		</ui-input>
 		<ui-textarea v-model="body">
-			<span>%i18n:@console.parameter% (JSON or JSON5)</span>
-			<span slot="desc">%i18n:@console.credential-info%</span>
+			<span>{{ $t('console.parameter') }} (JSON or JSON5)</span>
+			<span slot="desc">{{ $t('console.credential-info') }}</span>
 		</ui-textarea>
 		<ui-button @click="send" :disabled="sending">
-			<template v-if="sending">%i18n:@console.sending%</template>
-			<template v-else><fa icon="paper-plane"/> %i18n:@console.send%</template>
+			<template v-if="sending">{{ $t('console.sending') }}</template>
+			<template v-else><fa icon="paper-plane"/> {{ $t('console.send') }}</template>
 		</ui-button>
 		<ui-textarea v-if="res" v-model="res" readonly tall>
-			<span>%i18n:@console.response%</span>
+			<span>{{ $t('console.response') }}</span>
 		</ui-textarea>
 	</section>
 </ui-card>
@@ -34,9 +34,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import * as JSON5 from 'json5';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/api-settings.vue'),
 	data() {
 		return {
 			endpoint: '',
@@ -48,11 +50,11 @@ export default Vue.extend({
 
 	methods: {
 		regenerateToken() {
-			(this as any).apis.input({
-				title: '%i18n:@enter-password%',
+			this.$input({
+				title: this.$t('enter-password'),
 				type: 'password'
 			}).then(password => {
-				(this as any).api('i/regenerate_token', {
+				this.$root.api('i/regenerate_token', {
 					password: password
 				});
 			});
@@ -60,7 +62,7 @@ export default Vue.extend({
 
 		send() {
 			this.sending = true;
-			(this as any).api(this.endpoint, JSON5.parse(this.body)).then(res => {
+			this.$root.api(this.endpoint, JSON5.parse(this.body)).then(res => {
 				this.sending = false;
 				this.res = JSON5.stringify(res, null, 2);
 			}, err => {

src/client/app/common/views/components/autocomplete.vue

@@ -114,7 +114,7 @@ export default Vue.extend({
 
 	mounted() {
 		//#region Construct Emoji DB
-		const customEmojis = (this.os.getMetaSync() || { emojis: [] }).emojis || [];
+		const customEmojis = (this.$root.getMetaSync() || { emojis: [] }).emojis || [];
 		const emojiDefinitions: EmojiDef[] = [];
 
 		customEmojis.forEach(x => {
@@ -185,7 +185,7 @@ export default Vue.extend({
 					this.users = users;
 					this.fetching = false;
 				} else {
-					(this as any).api('users/search', {
+					this.$root.api('users/search', {
 						query: this.q,
 						limit: 30
 					}).then(users => {
@@ -208,7 +208,7 @@ export default Vue.extend({
 						this.hashtags = hashtags;
 						this.fetching = false;
 					} else {
-						(this as any).api('hashtags/search', {
+						this.$root.api('hashtags/search', {
 							query: this.q,
 							limit: 30
 						}).then(hashtags => {

src/client/app/common/views/components/avatar.vue

@@ -15,6 +15,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+
 export default Vue.extend({
 	props: {
 		user: {

src/client/app/common/views/components/connect-failed.troubleshooter.vue

@@ -1,47 +1,49 @@
 <template>
 <div class="troubleshooter">
 	<div class="body">
-		<h1><fa icon="wrench"/>%i18n:@title%</h1>
+		<h1><fa icon="wrench"/>{{ $t('title') }}</h1>
 		<div>
 			<p :data-wip="network == null">
 				<template v-if="network != null">
 					<template v-if="network"><fa icon="check"/></template>
 					<template v-if="!network"><fa icon="times"/></template>
 				</template>
-				{{ network == null ? '%i18n:@checking-network%' : '%i18n:@network%' }}<mk-ellipsis v-if="network == null"/>
+				{{ network == null ? this.$t('checking-network') : this.$t('network') }}<mk-ellipsis v-if="network == null"/>
 			</p>
 			<p v-if="network == true" :data-wip="internet == null">
 				<template v-if="internet != null">
 					<template v-if="internet"><fa icon="check"/></template>
 					<template v-if="!internet"><fa icon="times"/></template>
 				</template>
-				{{ internet == null ? '%i18n:@checking-internet%' : '%i18n:@internet%' }}<mk-ellipsis v-if="internet == null"/>
+				{{ internet == null ? this.$t('checking-internet') : this.$t('internet') }}<mk-ellipsis v-if="internet == null"/>
 			</p>
 			<p v-if="internet == true" :data-wip="server == null">
 				<template v-if="server != null">
 					<template v-if="server"><fa icon="check"/></template>
 					<template v-if="!server"><fa icon="times"/></template>
 				</template>
-				{{ server == null ? '%i18n:@checking-server%' : '%i18n:@server%' }}<mk-ellipsis v-if="server == null"/>
+				{{ server == null ? this.$t('checking-server') : this.$t('server') }}<mk-ellipsis v-if="server == null"/>
 			</p>
 		</div>
-		<p v-if="!end">%i18n:@finding%<mk-ellipsis/></p>
-		<p v-if="network === false"><b><fa icon="exclamation-triangle"/>%i18n:@no-network%</b><br>%i18n:@no-network-desc%</p>
-		<p v-if="internet === false"><b><fa icon="exclamation-triangle"/>%i18n:@no-internet%</b><br>%i18n:@no-internet-desc%</p>
-		<p v-if="server === false"><b><fa icon="exclamation-triangle"/>%i18n:@no-server%</b><br>%i18n:@no-server-desc%</p>
-		<p v-if="server === true" class="success"><b><fa icon="info-circle"/>%i18n:@success%</b><br>%i18n:@success-desc%</p>
+		<p v-if="!end">{{ $t('finding') }}<mk-ellipsis/></p>
+		<p v-if="network === false"><b><fa icon="exclamation-triangle"/>{{ $t('no-network') }}</b><br>{{ $t('no-network-desc') }}</p>
+		<p v-if="internet === false"><b><fa icon="exclamation-triangle"/>{{ $t('no-internet') }}</b><br>{{ $t('no-internet-desc') }}</p>
+		<p v-if="server === false"><b><fa icon="exclamation-triangle"/>{{ $t('no-server') }}</b><br>{{ $t('no-server-desc') }}</p>
+		<p v-if="server === true" class="success"><b><fa icon="info-circle"/>{{ $t('success') }}</b><br>{{ $t('success-desc') }}</p>
 	</div>
 	<footer>
-		<a href="/assets/flush.html">%i18n:@flush%</a> | <a href="/assets/version.html">%i18n:@set-version%</a>
+		<a href="/assets/flush.html">{{ $t('flush') }}</a> | <a href="/assets/version.html">{{ $t('set-version') }}</a>
 	</footer>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { apiUrl } from '../../../config';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/connect-failed.troubleshooter.vue'),
 	data() {
 		return {
 			network: navigator.onLine,

src/client/app/common/views/components/connect-failed.vue

@@ -1,23 +1,25 @@
 <template>
 <div class="mk-connect-failed">
 	<img src="https://raw.githubusercontent.com/syuilo/misskey/develop/src/client/assets/error.jpg" alt=""/>
-	<h1>%i18n:@title%</h1>
+	<h1>{{ $t('title') }}</h1>
 	<p class="text">
-		<span>{{ '%i18n:@description%'.substr(0, '%i18n:@description%'.indexOf('{')) }}</span>
-		<a @click="reload">{{ '%i18n:@description%'.match(/\{(.+?)\}/)[1] }}</a>
-		<span>{{ '%i18n:@description%'.substr('%i18n:@description%'.indexOf('}') + 1) }}</span>
+		<span>{{ this.$t('description').substr(0, this.$t('description').indexOf('{')) }}</span>
+		<a @click="reload">{{ this.$t('description').match(/\{(.+?)\}/)[1] }}</a>
+		<span>{{ this.$t('description').substr(this.$t('description').indexOf('}') + 1) }}</span>
 	</p>
-	<button v-if="!troubleshooting" @click="troubleshooting = true">%i18n:@troubleshoot%</button>
+	<button v-if="!troubleshooting" @click="troubleshooting = true">{{ $t('troubleshoot') }}</button>
 	<x-troubleshooter v-if="troubleshooting"/>
-	<p class="thanks">%i18n:@thanks%</p>
+	<p class="thanks">{{ $t('thanks') }}</p>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import XTroubleshooter from './connect-failed.troubleshooter.vue';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/connect-failed.vue'),
 	components: {
 		XTroubleshooter
 	},

src/client/app/common/views/components/cw-button.vue

@@ -1,11 +1,13 @@
 <template>
-<button class="nrvgflfuaxwgkxoynpnumyookecqrrvh" @click="toggle">{{ value ? '%i18n:@hide%' : '%i18n:@show%' }}</button>
+<button class="nrvgflfuaxwgkxoynpnumyookecqrrvh" @click="toggle">{{ value ? this.$t('hide') : this.$t('show') }}</button>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/cw-button.vue'),
 	props: {
 		value: {
 			type: Boolean,

src/client/app/common/views/components/drive-settings.vue

@@ -1,25 +1,27 @@
 <template>
 <ui-card>
-	<div slot="title"><fa icon="cloud"/> %i18n:common.drive%</div>
+	<div slot="title"><fa icon="cloud"/> {{ $t('@.drive') }}</div>
 
 	<section v-if="!fetching" class="juakhbxthdewydyreaphkepoxgxvfogn">
 		<div class="meter"><div :style="meterStyle"></div></div>
-		<p>%i18n:@max%: <b>{{ capacity | bytes }}</b> %i18n:@in-use%: <b>{{ usage | bytes }}</b></p>
+		<p>{{ $t('max') }}: <b>{{ capacity | bytes }}</b> {{ $t('in-use') }}: <b>{{ usage | bytes }}</b></p>
 	</section>
 
 	<section>
-		<header>%i18n:@stats%</header>
-		<div ref="chart" style="margin-bottom: -16px; color: #000;"></div>
+		<header>{{ $t('stats') }}</header>
+		<div ref="chart" style="margin-bottom: -16px; margin-left: -8px; color: #000;"></div>
 	</section>
 </ui-card>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import * as tinycolor from 'tinycolor2';
 import * as ApexCharts from 'apexcharts';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/drive-settings.vue'),
 	data() {
 		return {
 			fetching: true,
@@ -42,7 +44,7 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		(this as any).api('drive').then(info => {
+		this.$root.api('drive').then(info => {
 			this.capacity = info.capacity;
 			this.usage = info.usage;
 			this.fetching = false;
@@ -55,7 +57,7 @@ export default Vue.extend({
 
 	methods: {
 		renderChart() {
-			(this as any).api('charts/user/drive', {
+			this.$root.api('charts/user/drive', {
 				userId: this.$store.state.i.id,
 				span: 'day',
 				limit: 21

src/client/app/common/views/components/error.vue

@@ -1,10 +1,19 @@
 <template>
 <div class="wjqjnyhzogztorhrdgcpqlkxhkmuetgj">
-	<p><fa icon="exclamation-triangle"/> %i18n:common.error.title%</p>
-	<ui-button @click="() => $emit('retry')">%i18n:common.error.retry%</ui-button>
+	<p><fa icon="exclamation-triangle"/> {{ $t('@.error.title') }}</p>
+	<ui-button @click="() => $emit('retry')">{{ $t('@.error.retry') }}</ui-button>
 </div>
 </template>
 
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+
+export default Vue.extend({
+	i18n: i18n()
+});
+</script>
+
 <style lang="stylus" scoped>
 .wjqjnyhzogztorhrdgcpqlkxhkmuetgj
 	max-width 350px

src/client/app/common/views/components/games/reversi/reversi.game.vue

@@ -1,19 +1,19 @@
 <template>
 <div class="xqnhankfuuilcwvhgsopeqncafzsquya">
 	<button class="go-index" v-if="selfNav" @click="goIndex"><fa icon="arrow-left"/></button>
-	<header><b><router-link :to="blackUser | userPage">{{ blackUser | userName }}</router-link></b>(%i18n:common.reversi.black%) vs <b><router-link :to="whiteUser | userPage">{{ whiteUser | userName }}</router-link></b>(%i18n:common.reversi.white%)</header>
+	<header><b><router-link :to="blackUser | userPage">{{ blackUser | userName }}</router-link></b>({{ $t('@.reversi.black') }}) vs <b><router-link :to="whiteUser | userPage">{{ whiteUser | userName }}</router-link></b>({{ $t('@.reversi.white') }})</header>
 
 	<div style="overflow: hidden; line-height: 28px;">
-		<p class="turn" v-if="!iAmPlayer && !game.isEnded">{{ '%i18n:common.reversi.turn-of%'.replace('{}', $options.filters.userName(turnUser)) }}<mk-ellipsis/></p>
-		<p class="turn" v-if="logPos != logs.length">{{ '%i18n:common.reversi.past-turn-of%'.replace('{}', $options.filters.userName(turnUser)) }}</p>
-		<p class="turn1" v-if="iAmPlayer && !game.isEnded && !isMyTurn">%i18n:common.reversi.opponent-turn%<mk-ellipsis/></p>
-		<p class="turn2" v-if="iAmPlayer && !game.isEnded && isMyTurn" v-animate-css="{ classes: 'tada', iteration: 'infinite' }">%i18n:common.reversi.my-turn%</p>
+		<p class="turn" v-if="!iAmPlayer && !game.isEnded">{{ $t('@.reversi.turn-of', { name: $options.filters.userName(turnUser) }) }}<mk-ellipsis/></p>
+		<p class="turn" v-if="logPos != logs.length">{{ $t('@.reversi.past-turn-of', { name: $options.filters.userName(turnUser) }) }}</p>
+		<p class="turn1" v-if="iAmPlayer && !game.isEnded && !isMyTurn">{{ $t('@.reversi.opponent-turn') }}<mk-ellipsis/></p>
+		<p class="turn2" v-if="iAmPlayer && !game.isEnded && isMyTurn" v-animate-css="{ classes: 'tada', iteration: 'infinite' }">{{ $t('@.reversi.my-turn') }}</p>
 		<p class="result" v-if="game.isEnded && logPos == logs.length">
 			<template v-if="game.winner">
-				<span>{{ '%i18n:common.reversi.won%'.replace('{}', $options.filters.userName(game.winner)) }}</span>
-				<span v-if="game.surrendered != null"> (%i18n:@surrendered%)</span>
+				<span>{{ $t('@.reversi.won', { name: $options.filters.userName(game.winner) }) }}</span>
+				<span v-if="game.surrendered != null"> ({{ $t('surrendered') }})</span>
 			</template>
-			<template v-else>%i18n:common.reversi.drawn%</template>
+			<template v-else>{{ $t('@.reversi.drawn') }}</template>
 		</p>
 	</div>
 
@@ -43,10 +43,10 @@
 		</div>
 	</div>
 
-	<p class="status"><b>{{ '%i18n:common.reversi.this-turn%'.split('{}')[0] }}{{ logPos }}{{ '%i18n:common.reversi.this-turn%'.split('{}')[1] }}</b> %i18n:common.reversi.black%:{{ o.blackCount }} %i18n:common.reversi.white%:{{ o.whiteCount }} %i18n:common.reversi.total%:{{ o.blackCount + o.whiteCount }}</p>
+	<p class="status"><b>{{ $t('@.reversi.this-turn', { count: logPos }) }}</b> {{ $t('@.reversi.black') }}:{{ o.blackCount }} {{ $t('@.reversi.white') }}:{{ o.whiteCount }} {{ $t('@.reversi.total') }}:{{ o.blackCount + o.whiteCount }}</p>
 
 	<div class="actions" v-if="!game.isEnded && iAmPlayer">
-		<form-button @click="surrender">%i18n:@surrender%</form-button>
+		<form-button @click="surrender">{{ $t('surrender') }}</form-button>
 	</div>
 
 	<div class="player" v-if="game.isEnded">
@@ -62,20 +62,22 @@
 	</div>
 
 	<div class="info">
-		<p v-if="game.settings.isLlotheo">%i18n:@is-llotheo%</p>
-		<p v-if="game.settings.loopedBoard">%i18n:@looped-map%</p>
-		<p v-if="game.settings.canPutEverywhere">%i18n:@can-put-everywhere%</p>
+		<p v-if="game.settings.isLlotheo">{{ $t('is-llotheo') }}</p>
+		<p v-if="game.settings.loopedBoard">{{ $t('looped-map') }}</p>
+		<p v-if="game.settings.canPutEverywhere">{{ $t('can-put-everywhere') }}</p>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../../i18n';
 import * as CRC32 from 'crc-32';
 import Reversi, { Color } from '../../../../../../../games/reversi/core';
 import { url } from '../../../../../config';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/games/reversi/reversi.game.vue'),
 	props: {
 		initGame: {
 			type: Object,
@@ -289,7 +291,7 @@ export default Vue.extend({
 		},
 
 		surrender() {
-			(this as any).api('games/reversi/games/surrender', {
+			this.$root.api('games/reversi/games/surrender', {
 				gameId: this.game.id
 			});
 		},

src/client/app/common/views/components/games/reversi/reversi.gameroom.vue

@@ -7,10 +7,12 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../../i18n';
 import XGame from './reversi.game.vue';
 import XRoom from './reversi.room.vue';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/games/reversi/reversi.gameroom.vue'),
 	components: {
 		XGame,
 		XRoom
@@ -33,7 +35,7 @@ export default Vue.extend({
 	},
 	created() {
 		this.g = this.game;
-		this.connection = (this as any).os.stream.connectToChannel('gamesReversiGame', {
+		this.connection = this.$root.stream.connectToChannel('gamesReversiGame', {
 			gameId: this.game.id
 		});
 		this.connection.on('started', this.onStarted);

src/client/app/common/views/components/games/reversi/reversi.index.vue

@@ -1,22 +1,22 @@
 <template>
 <div class="phgnkghfpyvkrvwiajkiuoxyrdaqpzcx">
-	<h1>%i18n:@title%</h1>
-	<p>%i18n:@sub-title%</p>
+	<h1>{{ $t('title') }}</h1>
+	<p>{{ $t('sub-title') }}</p>
 	<div class="play">
-		<form-button primary round @click="match">%i18n:@invite%</form-button>
+		<form-button primary round @click="match">{{ $t('invite') }}</form-button>
 		<details>
-			<summary>%i18n:@rule%</summary>
+			<summary>{{ $t('rule') }}</summary>
 			<div>
-				<p>%i18n:@rule-desc%</p>
+				<p>{{ $t('rule-desc') }}</p>
 				<dl>
-					<dt><b>%i18n:@mode-invite%</b></dt>
-					<dd>%i18n:@mode-invite-desc%</dd>
+					<dt><b>{{ $t('mode-invite') }}</b></dt>
+					<dd>{{ $t('mode-invite-desc') }}</dd>
 				</dl>
 			</div>
 		</details>
 	</div>
 	<section v-if="invitations.length > 0">
-		<h2>%i18n:@invitations%</h2>
+		<h2>{{ $t('invitations') }}</h2>
 		<div class="invitation" v-for="i in invitations" tabindex="-1" @click="accept(i)">
 			<mk-avatar class="avatar" :user="i.parent"/>
 			<span class="name"><b>{{ i.parent | userName }}</b></span>
@@ -25,22 +25,22 @@
 		</div>
 	</section>
 	<section v-if="myGames.length > 0">
-		<h2>%i18n:@my-games%</h2>
+		<h2>{{ $t('my-games') }}</h2>
 		<a class="game" v-for="g in myGames" tabindex="-1" @click.prevent="go(g)" :href="`/reversi/${g.id}`">
 			<mk-avatar class="avatar" :user="g.user1"/>
 			<mk-avatar class="avatar" :user="g.user2"/>
 			<span><b>{{ g.user1 | userName }}</b> vs <b>{{ g.user2 | userName }}</b></span>
-			<span class="state">{{ g.isEnded ? '%i18n:@game-state.ended%' : '%i18n:@game-state.playing%' }}</span>
+			<span class="state">{{ g.isEnded ? $t('game-state.ended') : $t('game-state.playing') }}</span>
 			<mk-time :time="g.createdAt" />
 		</a>
 	</section>
 	<section v-if="games.length > 0">
-		<h2>%i18n:@all-games%</h2>
+		<h2>{{ $t('all-games') }}</h2>
 		<a class="game" v-for="g in games" tabindex="-1" @click.prevent="go(g)" :href="`/reversi/${g.id}`">
 			<mk-avatar class="avatar" :user="g.user1"/>
 			<mk-avatar class="avatar" :user="g.user2"/>
 			<span><b>{{ g.user1 | userName }}</b> vs <b>{{ g.user2 | userName }}</b></span>
-			<span class="state">{{ g.isEnded ? '%i18n:@game-state.ended%' : '%i18n:@game-state.playing%' }}</span>
+			<span class="state">{{ g.isEnded ? $t('game-state.ended') : $t('game-state.playing') }}</span>
 			<mk-time :time="g.createdAt" />
 		</a>
 	</section>
@@ -49,8 +49,10 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../../i18n';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/games/reversi/reversi.index.vue'),
 	data() {
 		return {
 			games: [],
@@ -65,22 +67,22 @@ export default Vue.extend({
 
 	mounted() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection = (this as any).os.stream.useSharedConnection('gamesReversi');
+			this.connection = this.$root.stream.useSharedConnection('gamesReversi');
 
 			this.connection.on('invited', this.onInvited);
 
-			(this as any).api('games/reversi/games', {
+			this.$root.api('games/reversi/games', {
 				my: true
 			}).then(games => {
 				this.myGames = games;
 			});
 
-			(this as any).api('games/reversi/invitations').then(invitations => {
+			this.$root.api('games/reversi/invitations').then(invitations => {
 				this.invitations = this.invitations.concat(invitations);
 			});
 		}
 
-		(this as any).api('games/reversi/games').then(games => {
+		this.$root.api('games/reversi/games').then(games => {
 			this.games = games;
 			this.gamesFetching = false;
 		});
@@ -98,13 +100,13 @@ export default Vue.extend({
 		},
 
 		match() {
-			(this as any).apis.input({
-				title: '%i18n:@enter-username%'
+			this.$input({
+				title: this.$t('enter-username')
 			}).then(username => {
-				(this as any).api('users/show', {
+				this.$root.api('users/show', {
 					username
 				}).then(user => {
-					(this as any).api('games/reversi/match', {
+					this.$root.api('games/reversi/match', {
 						userId: user.id
 					}).then(res => {
 						if (res == null) {
@@ -118,7 +120,7 @@ export default Vue.extend({
 		},
 
 		accept(invitation) {
-			(this as any).api('games/reversi/match', {
+			this.$root.api('games/reversi/match', {
 				userId: invitation.parent.id
 			}).then(game => {
 				if (game) {

src/client/app/common/views/components/games/reversi/reversi.room.vue

@@ -3,13 +3,13 @@
 	<header><b>{{ game.user1 | userName }}</b> vs <b>{{ game.user2 | userName }}</b></header>
 
 	<div>
-		<p>%i18n:@settings-of-the-game%</p>
+		<p>{{ $t('settings-of-the-game') }}</p>
 
 		<div class="card map">
 			<header>
-				<select v-model="mapName" placeholder="%i18n:@choose-map%" @change="onMapChange">
+				<select v-model="mapName" :placeholder="$t('choose-map')" @change="onMapChange">
 					<option label="-Custom-" :value="mapName" v-if="mapName == '-Custom-'"/>
-					<option label="%i18n:@random%" :value="null"/>
+					<option :label="$t('random')" :value="null"/>
 					<optgroup v-for="c in mapCategories" :key="c" :label="c">
 						<option v-for="m in maps" v-if="m.category == c" :key="m.name" :label="m.name" :value="m.name">{{ m.name }}</option>
 					</optgroup>
@@ -31,31 +31,31 @@
 
 		<div class="card">
 			<header>
-				<span>%i18n:@black-or-white%</span>
+				<span>{{ $t('black-or-white') }}</span>
 			</header>
 
 			<div>
-				<form-radio v-model="game.settings.bw" value="random" @change="updateSettings">%i18n:@random%</form-radio>
-				<form-radio v-model="game.settings.bw" :value="1" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}<b>{{ game.user1 | userName }}</b>{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio>
-				<form-radio v-model="game.settings.bw" :value="2" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}<b>{{ game.user2 | userName }}</b>{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio>
+				<form-radio v-model="game.settings.bw" value="random" @change="updateSettings">{{ $t('random') }}</form-radio>
+				<form-radio v-model="game.settings.bw" :value="1" @change="updateSettings">{{ this.$t('black-is').split('{}')[0] }}<b>{{ game.user1 | userName }}</b>{{ this.$t('black-is').split('{}')[1] }}</form-radio>
+				<form-radio v-model="game.settings.bw" :value="2" @change="updateSettings">{{ this.$t('black-is').split('{}')[0] }}<b>{{ game.user2 | userName }}</b>{{ this.$t('black-is').split('{}')[1] }}</form-radio>
 			</div>
 		</div>
 
 		<div class="card">
 			<header>
-				<span>%i18n:@rules%</span>
+				<span>{{ $t('rules') }}</span>
 			</header>
 
 			<div>
-				<ui-switch v-model="game.settings.isLlotheo" @change="updateSettings">%i18n:@is-llotheo%</ui-switch>
-				<ui-switch v-model="game.settings.loopedBoard" @change="updateSettings">%i18n:@looped-map%</ui-switch>
-				<ui-switch v-model="game.settings.canPutEverywhere" @change="updateSettings">%i18n:@can-put-everywhere%</ui-switch>
+				<ui-switch v-model="game.settings.isLlotheo" @change="updateSettings">{{ $t('is-llotheo') }}</ui-switch>
+				<ui-switch v-model="game.settings.loopedBoard" @change="updateSettings">{{ $t('looped-map') }}</ui-switch>
+				<ui-switch v-model="game.settings.canPutEverywhere" @change="updateSettings">{{ $t('can-put-everywhere') }}</ui-switch>
 			</div>
 		</div>
 
 		<div class="card form" v-if="form">
 			<header>
-				<span>%i18n:@settings-of-the-bot%</span>
+				<span>{{ $t('settings-of-the-bot') }}</span>
 			</header>
 
 			<div>
@@ -98,16 +98,16 @@
 
 	<footer>
 		<p class="status">
-			<template v-if="isAccepted && isOpAccepted">%i18n:@this-game-is-started-soon%<mk-ellipsis/></template>
-			<template v-if="isAccepted && !isOpAccepted">%i18n:@waiting-for-other%<mk-ellipsis/></template>
-			<template v-if="!isAccepted && isOpAccepted">%i18n:@waiting-for-me%</template>
-			<template v-if="!isAccepted && !isOpAccepted">%i18n:@waiting-for-both%<mk-ellipsis/></template>
+			<template v-if="isAccepted && isOpAccepted">{{ $t('this-game-is-started-soon') }}<mk-ellipsis/></template>
+			<template v-if="isAccepted && !isOpAccepted">{{ $t('waiting-for-other') }}<mk-ellipsis/></template>
+			<template v-if="!isAccepted && isOpAccepted">{{ $t('waiting-for-me') }}</template>
+			<template v-if="!isAccepted && !isOpAccepted">{{ $t('waiting-for-both') }}<mk-ellipsis/></template>
 		</p>
 
 		<div class="actions">
-			<form-button @click="exit">%i18n:@cancel%</form-button>
-			<form-button primary @click="accept" v-if="!isAccepted">%i18n:@ready%</form-button>
-			<form-button primary @click="cancel" v-if="isAccepted">%i18n:@cancel-ready%</form-button>
+			<form-button @click="exit">{{ $t('cancel') }}</form-button>
+			<form-button primary @click="accept" v-if="!isAccepted">{{ $t('ready') }}</form-button>
+			<form-button primary @click="cancel" v-if="isAccepted">{{ $t('cancel-ready') }}</form-button>
 		</div>
 	</footer>
 </div>
@@ -115,9 +115,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../../i18n';
 import * as maps from '../../../../../../../games/reversi/maps';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/games/reversi/reversi.room.vue'),
 	props: ['game', 'connection'],
 
 	data() {

src/client/app/common/views/components/games/reversi/reversi.vue

@@ -4,9 +4,9 @@
 		<x-gameroom :game="game" :self-nav="selfNav" @go-index="goIndex"/>
 	</div>
 	<div class="matching" v-else-if="matching">
-		<h1>{{ '%i18n:@matching.waiting-for%'.split('{}')[0] }}<b>{{ matching | userName }}</b>{{ '%i18n:@matching.waiting-for%'.split('{}')[1] }}<mk-ellipsis/></h1>
+		<h1>{{ this.$t('matching.waiting-for').split('{}')[0] }}<b>{{ matching | userName }}</b>{{ this.$t('matching.waiting-for').split('{}')[1] }}<mk-ellipsis/></h1>
 		<div class="cancel">
-			<form-button round @click="cancel">%i18n:@matching.cancel%</form-button>
+			<form-button round @click="cancel">{{ $t('matching.cancel') }}</form-button>
 		</div>
 	</div>
 	<div v-else-if="gameId">
@@ -20,11 +20,13 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../../i18n';
 import XGameroom from './reversi.gameroom.vue';
 import XIndex from './reversi.index.vue';
 import Progress from '../../../../scripts/loading';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/games/reversi/reversi.vue'),
 	components: {
 		XGameroom,
 		XIndex
@@ -65,7 +67,7 @@ export default Vue.extend({
 		this.fetch();
 
 		if (this.$store.getters.isSignedIn) {
-			this.connection = (this as any).os.stream.useSharedConnection('gamesReversi');
+			this.connection = this.$root.stream.useSharedConnection('gamesReversi');
 
 			this.connection.on('matched', this.onMatched);
 
@@ -92,7 +94,7 @@ export default Vue.extend({
 				this.game = null;
 			} else {
 				Progress.start();
-				(this as any).api('games/reversi/games/show', {
+				this.$root.api('games/reversi/games/show', {
 					gameId: this.gameId
 				}).then(game => {
 					this.game = game;
@@ -105,7 +107,7 @@ export default Vue.extend({
 			if (this.selfNav) {
 				// 受け取ったゲーム情報が省略されたものなら完全な情報を取得する
 				if (game != null && (game.settings == null || game.settings.map == null)) {
-					game = await (this as any).api('games/reversi/games/show', {
+					game = await this.$root.api('games/reversi/games/show', {
 						gameId: game.id
 					});
 				}
@@ -122,11 +124,11 @@ export default Vue.extend({
 
 		cancel() {
 			this.matching = null;
-			(this as any).api('games/reversi/match/cancel');
+			this.$root.api('games/reversi/match/cancel');
 		},
 
 		accept(invitation) {
-			(this as any).api('games/reversi/match', {
+			this.$root.api('games/reversi/match', {
 				userId: invitation.parent.id
 			}).then(game => {
 				if (game) {

src/client/app/common/views/components/github-setting.vue

@@ -1,11 +1,11 @@
 <template>
 <div class="mk-github-setting">
-	<p>%i18n:@description%<a :href="`${docsUrl}/link-to-github`" target="_blank">%i18n:@detail%</a></p>
-	<p class="account" v-if="$store.state.i.github" :title="`GitHub ID: ${$store.state.i.github.id}`">%i18n:@connected-to%: <a :href="`https://github.com/${$store.state.i.github.login}`" target="_blank">@{{ $store.state.i.github.login }}</a></p>
+	<p>{{ $t('description') }}<a :href="`${docsUrl}/link-to-github`" target="_blank">{{ $t('detail') }}</a></p>
+	<p class="account" v-if="$store.state.i.github" :title="`GitHub ID: ${$store.state.i.github.id}`">{{ $t('connected-to') }}: <a :href="`https://github.com/${$store.state.i.github.login}`" target="_blank">@{{ $store.state.i.github.login }}</a></p>
 	<p>
-		<a :href="`${apiUrl}/connect/github`" target="_blank" @click.prevent="connect">{{ $store.state.i.github ? '%i18n:@reconnect%' : '%i18n:@connect%' }}</a>
+		<a :href="`${apiUrl}/connect/github`" target="_blank" @click.prevent="connect">{{ $store.state.i.github ? this.$t('reconnect') : this.$t('connect') }}</a>
 		<span v-if="$store.state.i.github"> or </span>
-		<a :href="`${apiUrl}/disconnect/github`" target="_blank" v-if="$store.state.i.github" @click.prevent="disconnect">%i18n:@disconnect%</a>
+		<a :href="`${apiUrl}/disconnect/github`" target="_blank" v-if="$store.state.i.github" @click.prevent="disconnect">{{ $t('disconnect') }}</a>
 	</p>
 	<p class="id" v-if="$store.state.i.github">GitHub ID: {{ $store.state.i.github.id }}</p>
 </div>
@@ -13,9 +13,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { apiUrl, docsUrl } from '../../../config';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/github-setting.vue'),
 	data() {
 		return {
 			form: null,

src/client/app/common/views/components/google.vue

@@ -1,13 +1,16 @@
 <template>
 <div class="mk-google">
 	<input type="search" v-model="query" :placeholder="q">
-	<button @click="search"><fa icon="search"/> %i18n:common.search%</button>
+	<button @click="search"><fa icon="search"/> {{ $t('@.search') }}</button>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
+
 export default Vue.extend({
+	i18n: i18n(),
 	props: ['q'],
 	data() {
 		return {

src/client/app/common/views/components/image-viewer.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-media-image-dialog">
+<div class="dkjvrdxtkvqrwmhfickhndpmnncsgacq">
 	<div class="bg" @click="close"></div>
 	<img :src="image.url" :alt="image.name" :title="image.name" @click="close"/>
 </div>
@@ -34,7 +34,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-media-image-dialog
+.dkjvrdxtkvqrwmhfickhndpmnncsgacq
 	display block
 	position fixed
 	z-index 2048

src/client/app/common/views/components/index.ts

@@ -30,7 +30,6 @@ import time from './time.vue';
 import timer from './timer.vue';
 import mediaList from './media-list.vue';
 import uploader from './uploader.vue';
-import specialMessage from './special-message.vue';
 import streamIndicator from './stream-indicator.vue';
 import ellipsis from './ellipsis.vue';
 import messaging from './messaging.vue';
@@ -84,7 +83,6 @@ Vue.component('mk-time', time);
 Vue.component('mk-timer', timer);
 Vue.component('mk-media-list', mediaList);
 Vue.component('mk-uploader', uploader);
-Vue.component('mk-special-message', specialMessage);
 Vue.component('mk-stream-indicator', streamIndicator);
 Vue.component('mk-ellipsis', ellipsis);
 Vue.component('mk-messaging', messaging);

src/client/app/common/views/components/instance.vue

@@ -3,22 +3,24 @@
 	<div class="banner" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }"></div>
 
 	<h1>{{ meta.name }}</h1>
-	<p v-html="meta.description || '%i18n:common.about%'"></p>
-	<router-link to="/">%i18n:@start%</router-link>
+	<p v-html="meta.description || this.$t('@.about')"></p>
+	<router-link to="/">{{ $t('start') }}</router-link>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/instance.vue'),
 	data() {
 		return {
 			meta: null
 		}
 	},
 	created() {
-		(this as any).os.getMeta().then(meta => {
+		this.$root.getMeta().then(meta => {
 			this.meta = meta;
 		});
 	}

src/client/app/common/views/components/media-banner.vue

@@ -2,8 +2,8 @@
 <div class="mk-media-banner">
 	<div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false">
 		<span class="icon"><fa icon="exclamation-triangle"/></span>
-		<b>%i18n:@sensitive%</b>
-		<span>%i18n:@click-to-show%</span>
+		<b>{{ $t('sensitive') }}</b>
+		<span>{{ $t('click-to-show') }}</span>
 	</div>
 	<div class="audio" v-else-if="media.type.startsWith('audio')">
 		<audio class="audio"
@@ -26,8 +26,10 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/media-banner.vue'),
 	props: {
 		media: {
 			type: Object,

src/client/app/common/views/components/messaging-room.form.vue

@@ -8,18 +8,18 @@
 		ref="textarea"
 		@keypress="onKeypress"
 		@paste="onPaste"
-		placeholder="%i18n:@input-message-here%"
+		:placeholder="$t('input-message-here')"
 		v-autocomplete="'text'"
 	></textarea>
 	<div class="file" @click="file = null" v-if="file">{{ file.name }}</div>
 	<mk-uploader ref="uploader" @uploaded="onUploaded"/>
-	<button class="send" @click="send" :disabled="!canSend || sending" title="%i18n:@send%">
+	<button class="send" @click="send" :disabled="!canSend || sending" :title="$t('send')">
 		<template v-if="!sending"><fa icon="paper-plane"/></template><template v-if="sending"><fa icon="spinner .spin"/></template>
 	</button>
-	<button class="attach-from-local" @click="chooseFile" title="%i18n:@attach-from-local%">
+	<button class="attach-from-local" @click="chooseFile" :title="$t('attach-from-local')">
 		<fa icon="upload"/>
 	</button>
-	<button class="attach-from-drive" @click="chooseFileFromDrive" title="%i18n:@attach-from-drive%">
+	<button class="attach-from-drive" @click="chooseFileFromDrive" :title="$t('attach-from-drive')">
 		<fa :icon="['far', 'folder-open']"/>
 	</button>
 	<input ref="file" type="file" @change="onChangeFile"/>
@@ -28,9 +28,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import * as autosize from 'autosize';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/messaging-room.form.vue'),
 	props: ['user'],
 	data() {
 		return {
@@ -129,7 +131,7 @@ export default Vue.extend({
 		},
 
 		chooseFileFromDrive() {
-			(this as any).apis.chooseDriveFile({
+			this.$chooseDriveFile({
 				multiple: false
 			}).then(file => {
 				this.file = file;
@@ -150,7 +152,7 @@ export default Vue.extend({
 
 		send() {
 			this.sending = true;
-			(this as any).api('messaging/messages/create', {
+			this.$root.api('messaging/messages/create', {
 				userId: this.user.id,
 				text: this.text ? this.text : undefined,
 				fileId: this.file ? this.file.id : undefined

src/client/app/common/views/components/messaging-room.message.vue

@@ -3,7 +3,7 @@
 	<mk-avatar class="avatar" :user="message.user" target="_blank"/>
 	<div class="content">
 		<div class="balloon" :data-no-text="message.text == null">
-			<!-- <button class="delete-button" v-if="isMe" title="%i18n:common.delete%">
+			<!-- <button class="delete-button" v-if="isMe" :title="$t('@.delete')">
 				<img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
 			</button> -->
 			<div class="content" v-if="!message.isDeleted">
@@ -16,13 +16,13 @@
 				</div>
 			</div>
 			<div class="content" v-if="message.isDeleted">
-				<p class="is-deleted">%i18n:@deleted%</p>
+				<p class="is-deleted">{{ $t('deleted') }}</p>
 			</div>
 		</div>
 		<div></div>
 		<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 		<footer>
-			<span class="read" v-if="isMe && message.isRead">%i18n:@is-read%</span>
+			<span class="read" v-if="isMe && message.isRead">{{ $t('is-read') }}</span>
 			<mk-time :time="message.createdAt"/>
 			<template v-if="message.is_edited"><fa icon="pencil-alt"/></template>
 		</footer>
@@ -32,9 +32,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import parse from '../../../../../mfm/parse';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/messaging-room.message.vue'),
 	props: {
 		message: {
 			required: true
@@ -179,6 +181,9 @@ export default Vue.extend({
 			font-size 10px
 			color var(--messagingRoomMessageInfo)
 
+			> .read
+				margin 0 8px
+
 			> [data-icon]
 				margin-left 4px
 

src/client/app/common/views/components/messaging-room.vue

@@ -4,11 +4,11 @@
 	@drop.prevent.stop="onDrop"
 >
 	<div class="body">
-		<p class="init" v-if="init"><fa icon="spinner .spin"/>%i18n:common.loading%</p>
-		<p class="empty" v-if="!init && messages.length == 0"><fa icon="info-circle"/>%i18n:@empty%</p>
-		<p class="no-history" v-if="!init && messages.length > 0 && !existMoreMessages"><fa icon="flag"/>%i18n:@no-history%</p>
+		<p class="init" v-if="init"><fa icon="spinner .spin"/>{{ $t('@.loading') }}</p>
+		<p class="empty" v-if="!init && messages.length == 0"><fa icon="info-circle"/>{{ $t('empty') }}</p>
+		<p class="no-history" v-if="!init && messages.length > 0 && !existMoreMessages"><fa icon="flag"/>{{ $t('no-history') }}</p>
 		<button class="more" :class="{ fetching: fetchingMoreMessages }" v-if="existMoreMessages" @click="fetchMoreMessages" :disabled="fetchingMoreMessages">
-			<template v-if="fetchingMoreMessages"><fa icon="spinner .pulse" fixed-width/></template>{{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:@more%' }}
+			<template v-if="fetchingMoreMessages"><fa icon="spinner .pulse" fixed-width/></template>{{ fetchingMoreMessages ? $t('@.loading') : $t('@.load-more') }}
 		</button>
 		<template v-for="(message, i) in _messages">
 			<x-message :message="message" :key="message.id"/>
@@ -20,7 +20,7 @@
 	<footer>
 		<transition name="fade">
 			<div class="new-message" v-show="showIndicator">
-				<button @click="onIndicatorClick"><i><fa icon="arrow-circle-down"/></i>%i18n:@new-message%</button>
+				<button @click="onIndicatorClick"><i><fa icon="arrow-circle-down"/></i>{{ $t('new-message') }}</button>
 			</div>
 		</transition>
 		<x-form :user="user" ref="form"/>
@@ -30,11 +30,13 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
 import { url } from '../../../config';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/messaging-room.vue'),
 	components: {
 		XMessage,
 		XForm
@@ -60,7 +62,7 @@ export default Vue.extend({
 				const date = new Date(message.createdAt).getDate();
 				const month = new Date(message.createdAt).getMonth() + 1;
 				message._date = date;
-				message._datetext = '%i18n:common.month-and-day%'.replace('{month}', month.toString()).replace('{day}', date.toString());
+				message._datetext = this.$t('@.month-and-day').replace('{month}', month.toString()).replace('{day}', date.toString());
 				return message;
 			});
 		},
@@ -71,7 +73,7 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		this.connection = (this as any).os.stream.connectToChannel('messaging', { otherparty: this.user.id });
+		this.connection = this.$root.stream.connectToChannel('messaging', { otherparty: this.user.id });
 
 		this.connection.on('message', this.onMessage);
 		this.connection.on('read', this.onRead);
@@ -120,7 +122,7 @@ export default Vue.extend({
 				this.form.upload(e.dataTransfer.files[0]);
 				return;
 			} else if (e.dataTransfer.files.length > 1) {
-				alert('%i18n:@only-one-file-attached%');
+				alert(this.$t('only-one-file-attached'));
 				return;
 			}
 
@@ -137,7 +139,7 @@ export default Vue.extend({
 			return new Promise((resolve, reject) => {
 				const max = this.existMoreMessages ? 20 : 10;
 
-				(this as any).api('messaging/messages', {
+				this.$root.api('messaging/messages', {
 					userId: this.user.id,
 					limit: max + 1,
 					untilId: this.existMoreMessages ? this.messages[0].id : undefined

src/client/app/common/views/components/messaging.vue

@@ -3,7 +3,7 @@
 	<div class="search" v-if="!compact" :style="{ top: headerTop + 'px' }">
 		<div class="form">
 			<label for="search-input"><i><fa icon="search"/></i></label>
-			<input v-model="q" type="search" @input="search" @keydown="onSearchKeydown" placeholder="%i18n:@search-user%"/>
+			<input v-model="q" type="search" @input="search" @keydown="onSearchKeydown" :placeholder="$t('search-user')"/>
 		</div>
 		<div class="result">
 			<ol class="users" v-if="result.length > 0" ref="searchResult">
@@ -38,22 +38,24 @@
 						<mk-time :time="message.createdAt"/>
 					</header>
 					<div class="body">
-						<p class="text"><span class="me" v-if="isMe(message)">%i18n:@you%:</span>{{ message.text }}</p>
+						<p class="text"><span class="me" v-if="isMe(message)">{{ $t('you') }}:</span>{{ message.text }}</p>
 					</div>
 				</div>
 			</a>
 		</template>
 	</div>
-	<p class="no-history" v-if="!fetching && messages.length == 0">%i18n:@no-history%</p>
-	<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:common.loading%<mk-ellipsis/></p>
+	<p class="no-history" v-if="!fetching && messages.length == 0">{{ $t('no-history') }}</p>
+	<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import getAcct from '../../../../../misc/acct/render';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/messaging.vue'),
 	props: {
 		compact: {
 			type: Boolean,
@@ -75,12 +77,12 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		this.connection = (this as any).os.stream.useSharedConnection('messagingIndex');
+		this.connection = this.$root.stream.useSharedConnection('messagingIndex');
 
 		this.connection.on('message', this.onMessage);
 		this.connection.on('read', this.onRead);
 
-		(this as any).api('messaging/history').then(messages => {
+		this.$root.api('messaging/history').then(messages => {
 			this.messages = messages;
 			this.fetching = false;
 		});
@@ -111,7 +113,7 @@ export default Vue.extend({
 				this.result = [];
 				return;
 			}
-			(this as any).api('users/search', {
+			this.$root.api('users/search', {
 				query: this.q,
 				max: 5
 			}).then(users => {

src/client/app/common/views/components/misskey-flavored-markdown.ts

@@ -187,7 +187,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'emoji': {
-					const customEmojis = (this.os.getMetaSync() || { emojis: [] }).emojis || [];
+					const customEmojis = (this.$root.getMetaSync() || { emojis: [] }).emojis || [];
 					return [createElement('mk-emoji', {
 						attrs: {
 							emoji: token.emoji,

src/client/app/common/views/components/mute-and-block.vue

@@ -1,10 +1,10 @@
 <template>
 <ui-card>
-	<div slot="title"><fa icon="ban"/> %i18n:@mute-and-block%</div>
+	<div slot="title"><fa icon="ban"/> {{ $t('mute-and-block') }}</div>
 
 	<section>
-		<header>%i18n:@mute%</header>
-		<ui-info v-if="!muteFetching && mute.length == 0">%i18n:@no-muted-users%</ui-info>
+		<header>{{ $t('mute') }}</header>
+		<ui-info v-if="!muteFetching && mute.length == 0">{{ $t('no-muted-users') }}</ui-info>
 		<div class="users" v-if="mute.length != 0">
 			<div v-for="user in mute" :key="user.id">
 				<p><b>{{ user | userName }}</b> @{{ user | acct }}</p>
@@ -13,8 +13,8 @@
 	</section>
 
 	<section>
-		<header>%i18n:@block%</header>
-		<ui-info v-if="!blockFetching && block.length == 0">%i18n:@no-blocked-users%</ui-info>
+		<header>{{ $t('block') }}</header>
+		<ui-info v-if="!blockFetching && block.length == 0">{{ $t('no-blocked-users') }}</ui-info>
 		<div class="users" v-if="block.length != 0">
 			<div v-for="user in block" :key="user.id">
 				<p><b>{{ user | userName }}</b> @{{ user | acct }}</p>
@@ -26,8 +26,10 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/mute-and-block.vue'),
 	data() {
 		return {
 			muteFetching: true,
@@ -38,12 +40,12 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		(this as any).api('mute/list').then(mute => {
+		this.$root.api('mute/list').then(mute => {
 			this.mute = mute.map(x => x.mutee);
 			this.muteFetching = false;
 		});
 
-		(this as any).api('blocking/list').then(blocking => {
+		this.$root.api('blocking/list').then(blocking => {
 			this.block = blocking.map(x => x.blockee);
 			this.blockFetching = false;
 		});

src/client/app/common/views/components/nav.vue

@@ -1,20 +1,22 @@
 <template>
 <span class="mk-nav">
-	<a :href="aboutUrl">%i18n:@about%</a>
+	<a :href="aboutUrl">{{ $t('about') }}</a>
 	<i>・</i>
-	<a :href="repositoryUrl">%i18n:@repository%</a>
+	<a :href="repositoryUrl">{{ $t('repository') }}</a>
 	<i>・</i>
-	<a :href="feedbackUrl" target="_blank">%i18n:@feedback%</a>
+	<a :href="feedbackUrl" target="_blank">{{ $t('feedback') }}</a>
 	<i>・</i>
-	<a href="/dev">%i18n:@develop%</a>
+	<a href="/dev">{{ $t('develop') }}</a>
 </span>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { lang } from '../../../config';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/nav.vue'),
 	data() {
 		return {
 			aboutUrl: `/docs/${lang}/about`,
@@ -23,7 +25,7 @@ export default Vue.extend({
 		}
 	},
 	created() {
-		(this as any).os.getMeta().then(meta => {
+		this.$root.getMeta().then(meta => {
 			if (meta.maintainer.repository_url) this.repositoryUrl = meta.maintainer.repository_url;
 			if (meta.maintainer.feedback_url) this.feedbackUrl = meta.maintainer.feedback_url;
 		});

src/client/app/common/views/components/note-header.vue

@@ -6,9 +6,9 @@
 	<span class="is-bot" v-if="note.user.isBot">bot</span>
 	<span class="is-cat" v-if="note.user.isCat">cat</span>
 	<span class="username"><mk-acct :user="note.user"/></span>
-	<span class="is-verified" v-if="note.user.isVerified" title="%i18n:common.verified-user%"><fa icon="star"/></span>
+	<span class="is-verified" v-if="note.user.isVerified" :title="$t('@.verified-user')"><fa icon="star"/></span>
 	<div class="info">
-		<span class="app" v-if="note.app && !mini">via <b>{{ note.app.name }}</b></span>
+		<span class="app" v-if="note.app && !mini && $store.state.settings.showVia">via <b>{{ note.app.name }}</b></span>
 		<span class="mobile" v-if="note.viaMobile"><fa icon="mobile-alt"/></span>
 		<router-link class="created-at" :to="note | notePage">
 			<mk-time :time="note.createdAt"/>
@@ -25,8 +25,10 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 
 export default Vue.extend({
+	i18n: i18n(),
 	props: {
 		note: {
 			type: Object,

src/client/app/common/views/components/note-menu.vue

@@ -6,28 +6,30 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { url } from '../../../config';
 import copyToClipboard from '../../../common/scripts/copy-to-clipboard';
 import Ok from './ok.vue';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/note-menu.vue'),
 	props: ['note', 'source', 'compact'],
 	computed: {
 		items() {
 			const items = [{
 				icon: 'info-circle',
-				text: '%i18n:@detail%',
+				text: this.$t('detail'),
 				action: this.detail
 			}, {
 				icon: 'link',
-				text: '%i18n:@copy-link%',
+				text: this.$t('copy-link'),
 				action: this.copyLink
 			}];
 
 			if (this.note.uri) {
 				items.push({
 					icon: 'external-link-square-alt',
-					text: '%i18n:@remote%',
+					text: this.$t('remote'),
 					action: () => {
 						window.open(this.note.uri, '_blank');
 					}
@@ -39,13 +41,13 @@ export default Vue.extend({
 			if (this.note.isFavorited) {
 				items.push({
 					icon: 'star',
-					text: '%i18n:@unfavorite%',
+					text: this.$t('unfavorite'),
 					action: this.unfavorite
 				});
 			} else {
 				items.push({
 					icon: 'star',
-					text: '%i18n:@favorite%',
+					text: this.$t('favorite'),
 					action: this.favorite
 				});
 			}
@@ -54,13 +56,13 @@ export default Vue.extend({
 				if ((this.$store.state.i.pinnedNoteIds || []).includes(this.note.id)) {
 					items.push({
 						icon: 'thumbtack',
-						text: '%i18n:@unpin%',
+						text: this.$t('unpin'),
 						action: this.unpin
 					});
 				} else {
 					items.push({
 						icon: 'thumbtack',
-						text: '%i18n:@pin%',
+						text: this.$t('pin'),
 						action: this.pin
 					});
 				}
@@ -70,7 +72,7 @@ export default Vue.extend({
 				items.push(null);
 				items.push({
 					icon: ['far', 'trash-alt'],
-					text: '%i18n:@delete%',
+					text: this.$t('delete'),
 					action: this.del
 				});
 			}
@@ -89,16 +91,16 @@ export default Vue.extend({
 		},
 
 		pin() {
-			(this as any).api('i/pin', {
+			this.$root.api('i/pin', {
 				noteId: this.note.id
 			}).then(() => {
-				(this as any).os.new(Ok);
+				this.$root.new(Ok);
 				this.destroyDom();
 			});
 		},
 
 		unpin() {
-			(this as any).api('i/unpin', {
+			this.$root.api('i/unpin', {
 				noteId: this.note.id
 			}).then(() => {
 				this.destroyDom();
@@ -106,8 +108,8 @@ export default Vue.extend({
 		},
 
 		del() {
-			if (!window.confirm('%i18n:@delete-confirm%')) return;
-			(this as any).api('notes/delete', {
+			if (!window.confirm(this.$t('delete-confirm'))) return;
+			this.$root.api('notes/delete', {
 				noteId: this.note.id
 			}).then(() => {
 				this.destroyDom();
@@ -115,19 +117,19 @@ export default Vue.extend({
 		},
 
 		favorite() {
-			(this as any).api('notes/favorites/create', {
+			this.$root.api('notes/favorites/create', {
 				noteId: this.note.id
 			}).then(() => {
-				(this as any).os.new(Ok);
+				this.$root.new(Ok);
 				this.destroyDom();
 			});
 		},
 
 		unfavorite() {
-			(this as any).api('notes/favorites/delete', {
+			this.$root.api('notes/favorites/delete', {
 				noteId: this.note.id
 			}).then(() => {
-				(this as any).os.new(Ok);
+				this.$root.new(Ok);
 				this.destroyDom();
 			});
 		},

src/client/app/common/views/components/password-settings.vue

@@ -1,42 +1,44 @@
 <template>
 <div>
-	<ui-button @click="reset">%i18n:@reset%</ui-button>
+	<ui-button @click="reset">{{ $t('reset') }}</ui-button>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/password-settings.vue'),
 	methods: {
 		reset() {
-			(this as any).apis.input({
-				title: '%i18n:@enter-current-password%',
+			this.$input({
+				title: this.$t('enter-current-password'),
 				type: 'password'
 			}).then(currentPassword => {
-				(this as any).apis.input({
-					title: '%i18n:@enter-new-password%',
+				this.$input({
+					title: this.$t('enter-new-password'),
 					type: 'password'
 				}).then(newPassword => {
-					(this as any).apis.input({
-						title: '%i18n:@enter-new-password-again%',
+					this.$input({
+						title: this.$t('enter-new-password-again'),
 						type: 'password'
 					}).then(newPassword2 => {
 						if (newPassword !== newPassword2) {
-							(this as any).apis.dialog({
+							this.$dialog({
 								title: null,
-								text: '%i18n:@not-match%',
+								text: this.$t('not-match'),
 								actions: [{
 									text: 'OK'
 								}]
 							});
 							return;
 						}
-						(this as any).api('i/change_password', {
+						this.$root.api('i/change_password', {
 							currentPasword: currentPassword,
 							newPassword: newPassword
 						}).then(() => {
-							(this as any).apis.notify('%i18n:@changed%');
+							this.$notify(this.$t('changed'));
 						});
 					});
 				});

src/client/app/common/views/components/poll-editor.vue

@@ -1,18 +1,18 @@
 <template>
 <div class="mk-poll-editor">
 	<p class="caution" v-if="choices.length < 2">
-		<fa icon="exclamation-triangle"/>%i18n:@no-only-one-choice%
+		<fa icon="exclamation-triangle"/>{{ $t('no-only-one-choice') }}
 	</p>
 	<ul ref="choices">
 		<li v-for="(choice, i) in choices">
-			<input :value="choice" @input="onInput(i, $event)" :placeholder="'%i18n:@choice-n%'.replace('{}', i + 1)">
-			<button @click="remove(i)" title="%i18n:@remove%">
+			<input :value="choice" @input="onInput(i, $event)" :placeholder="this.$t('choice-n').replace('{}', i + 1)">
+			<button @click="remove(i)" :title="$t('remove')">
 				<fa icon="times"/>
 			</button>
 		</li>
 	</ul>
-	<button class="add" v-if="choices.length < 10" @click="add">%i18n:@add%</button>
-	<button class="destroy" @click="destroy" title="%i18n:@destroy%">
+	<button class="add" v-if="choices.length < 10" @click="add">{{ $t('add') }}</button>
+	<button class="destroy" @click="destroy" :title="$t('destroy')">
 		<fa icon="times"/>
 	</button>
 </div>
@@ -20,8 +20,10 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { erase } from '../../../../../prelude/array';
 export default Vue.extend({
+	i18n: i18n('common/views/components/poll-editor.vue'),
 	data() {
 		return {
 			choices: ['', '']

src/client/app/common/views/components/poll.vue

@@ -1,28 +1,30 @@
 <template>
 <div class="mk-poll" :data-is-voted="isVoted">
 	<ul>
-		<li v-for="choice in poll.choices" :key="choice.id" @click="vote(choice.id)" :class="{ voted: choice.voted }" :title="!isVoted ? '%i18n:@vote-to%'.replace('{}', choice.text) : ''">
+		<li v-for="choice in poll.choices" :key="choice.id" @click="vote(choice.id)" :class="{ voted: choice.voted }" :title="!isVoted ? $t('vote-to').replace('{}', choice.text) : ''">
 			<div class="backdrop" :style="{ 'width': (showResult ? (choice.votes / total * 100) : 0) + '%' }"></div>
 			<span>
 				<template v-if="choice.isVoted"><fa icon="check"/></template>
 				<span>{{ choice.text }}</span>
-				<span class="votes" v-if="showResult">({{ '%i18n:@vote-count%'.replace('{}', choice.votes) }})</span>
+				<span class="votes" v-if="showResult">({{ $t('vote-count').replace('{}', choice.votes) }})</span>
 			</span>
 		</li>
 	</ul>
 	<p v-if="total > 0">
-		<span>{{ '%i18n:@total-users%'.replace('{}', total) }}</span>
+		<span>{{ $t('total-users').replace('{}', total) }}</span>
 		<span>・</span>
-		<a v-if="!isVoted" @click="toggleShowResult">{{ showResult ? '%i18n:@vote%' : '%i18n:@show-result%' }}</a>
-		<span v-if="isVoted">%i18n:@voted%</span>
+		<a v-if="!isVoted" @click="toggleShowResult">{{ showResult ? $t('vote') : $t('show-result') }}</a>
+		<span v-if="isVoted">{{ $t('voted') }}</span>
 	</p>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { sum } from '../../../../../prelude/array';
 export default Vue.extend({
+	i18n: i18n('common/views/components/poll.vue'),
 	props: ['note'],
 	data() {
 		return {
@@ -49,7 +51,7 @@ export default Vue.extend({
 		},
 		vote(id) {
 			if (this.poll.choices.some(c => c.isVoted)) return;
-			(this as any).api('notes/polls/vote', {
+			this.$root.api('notes/polls/vote', {
 				noteId: this.note.id,
 				choice: id
 			}).then(() => {

src/client/app/common/views/components/profile-editor.vue

@@ -1,65 +1,69 @@
 <template>
 <ui-card>
-	<div slot="title"><fa icon="user"/> %i18n:@title%</div>
+	<div slot="title"><fa icon="user"/> {{ $t('title') }}</div>
+
+	<section class="esokaraujimuwfttfzgocmutcihewscl">
+		<div class="header" :style="bannerStyle">
+			<mk-avatar class="avatar" :user="$store.state.i" :disable-preview="true" :disable-link="true"/>
+		</div>
 
-	<section class="fit-top">
 		<ui-form :disabled="saving">
 			<ui-input v-model="name" :max="30">
-				<span>%i18n:@name%</span>
+				<span>{{ $t('name') }}</span>
 			</ui-input>
 
 			<ui-input v-model="username" readonly>
-				<span>%i18n:@account%</span>
+				<span>{{ $t('account') }}</span>
 				<span slot="prefix">@</span>
 				<span slot="suffix">@{{ host }}</span>
 			</ui-input>
 
 			<ui-input v-model="location">
-				<span>%i18n:@location%</span>
+				<span>{{ $t('location') }}</span>
 				<span slot="prefix"><fa icon="map-marker-alt"/></span>
 			</ui-input>
 
 			<ui-input v-model="birthday" type="date">
-				<span>%i18n:@birthday%</span>
+				<span>{{ $t('birthday') }}</span>
 				<span slot="prefix"><fa icon="birthday-cake"/></span>
 			</ui-input>
 
 			<ui-textarea v-model="description" :max="500">
-				<span>%i18n:@description%</span>
+				<span>{{ $t('description') }}</span>
 			</ui-textarea>
 
 			<ui-input type="file" @change="onAvatarChange">
-				<span>%i18n:@avatar%</span>
+				<span>{{ $t('avatar') }}</span>
 				<span slot="icon"><fa icon="image"/></span>
-				<span slot="desc" v-if="avatarUploading">%i18n:@uploading%<mk-ellipsis/></span>
+				<span slot="desc" v-if="avatarUploading">{{ $t('uploading') }}<mk-ellipsis/></span>
 			</ui-input>
 
 			<ui-input type="file" @change="onBannerChange">
-				<span>%i18n:@banner%</span>
+				<span>{{ $t('banner') }}</span>
 				<span slot="icon"><fa icon="image"/></span>
-				<span slot="desc" v-if="bannerUploading">%i18n:@uploading%<mk-ellipsis/></span>
+				<span slot="desc" v-if="bannerUploading">{{ $t('uploading') }}<mk-ellipsis/></span>
 			</ui-input>
 
-			<ui-button @click="save(true)">%i18n:@save%</ui-button>
+			<ui-button @click="save(true)">{{ $t('save') }}</ui-button>
 		</ui-form>
 	</section>
 
 	<section>
-		<header>%i18n:@advanced%</header>
+		<header>{{ $t('advanced') }}</header>
 
 		<div>
-			<ui-switch v-model="isCat" @change="save(false)">%i18n:@is-cat%</ui-switch>
-			<ui-switch v-model="isBot" @change="save(false)">%i18n:@is-bot%</ui-switch>
-			<ui-switch v-model="alwaysMarkNsfw">%i18n:common.always-mark-nsfw%</ui-switch>
+			<ui-switch v-model="isCat" @change="save(false)">{{ $t('is-cat') }}</ui-switch>
+			<ui-switch v-model="isBot" @change="save(false)">{{ $t('is-bot') }}</ui-switch>
+			<ui-switch v-model="alwaysMarkNsfw">{{ $t('@.always-mark-nsfw') }}</ui-switch>
 		</div>
 	</section>
 
 	<section>
-		<header>%i18n:@privacy%</header>
+		<header>{{ $t('privacy') }}</header>
 
 		<div>
-			<ui-switch v-model="isLocked" @change="save(false)">%i18n:@is-locked%</ui-switch>
-			<ui-switch v-model="carefulBot" @change="save(false)">%i18n:@careful-bot%</ui-switch>
+			<ui-switch v-model="isLocked" @change="save(false)">{{ $t('is-locked') }}</ui-switch>
+			<ui-switch v-model="carefulBot" @change="save(false)">{{ $t('careful-bot') }}</ui-switch>
 		</div>
 	</section>
 </ui-card>
@@ -67,9 +71,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { apiUrl, host } from '../../../config';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/profile-editor.vue'),
 	data() {
 		return {
 			host,
@@ -93,7 +99,15 @@ export default Vue.extend({
 	computed: {
 		alwaysMarkNsfw: {
 			get() { return this.$store.state.i.settings.alwaysMarkNsfw; },
-			set(value) { (this as any).api('i/update', { alwaysMarkNsfw: value }); }
+			set(value) { this.$root.api('i/update', { alwaysMarkNsfw: value }); }
+		},
+
+		bannerStyle(): any {
+			if (this.$store.state.i.bannerUrl == null) return {};
+			return {
+				backgroundColor: this.$store.state.i.bannerColor && this.$store.state.i.bannerColor.length == 3 ? `rgb(${ this.$store.state.i.bannerColor.join(',') })` : null,
+				backgroundImage: `url(${ this.$store.state.i.bannerUrl })`
+			};
 		},
 	},
 
@@ -159,17 +173,17 @@ export default Vue.extend({
 		save(notify) {
 			this.saving = true;
 
-			(this as any).api('i/update', {
+			this.$root.api('i/update', {
 				name: this.name || null,
 				location: this.location || null,
 				description: this.description || null,
 				birthday: this.birthday || null,
 				avatarId: this.avatarId,
 				bannerId: this.bannerId,
-				isCat: this.isCat,
-				isBot: this.isBot,
-				isLocked: this.isLocked,
-				carefulBot: this.carefulBot
+				isCat: !!this.isCat,
+				isBot: !!this.isBot,
+				isLocked: !!this.isLocked,
+				carefulBot: !!this.carefulBot
 			}).then(i => {
 				this.saving = false;
 				this.$store.state.i.avatarId = i.avatarId;
@@ -180,7 +194,7 @@ export default Vue.extend({
 				if (notify) {
 					this.$swal({
 						type: 'success',
-						text: '%i18n:@saved%'
+						text: this.$t('saved')
 					});
 				}
 			});
@@ -188,3 +202,26 @@ export default Vue.extend({
 	}
 });
 </script>
+
+<style lang="stylus" scoped>
+.esokaraujimuwfttfzgocmutcihewscl
+	> .header
+		height 150px
+		overflow hidden
+		background-size cover
+		background-position center
+		border-radius 4px
+
+		> .avatar
+			position absolute
+			top 0
+			bottom 0
+			left 0
+			right 0
+			display block
+			width 72px
+			height 72px
+			margin auto
+			box-shadow 0 0 16px rgba(0, 0, 0, 0.5)
+
+</style>

src/client/app/common/views/components/reaction-icon.vue

@@ -1,24 +1,26 @@
 <template>
 <span class="mk-reaction-icon">
-	<img v-if="reaction == 'like'" src="https://twemoji.maxcdn.com/2/svg/1f44d.svg" alt="%i18n:common.reactions.like%">
-	<img v-if="reaction == 'love'" src="https://twemoji.maxcdn.com/2/svg/2764.svg" alt="%i18n:common.reactions.love%">
-	<img v-if="reaction == 'laugh'" src="https://twemoji.maxcdn.com/2/svg/1f606.svg" alt="%i18n:common.reactions.laugh%">
-	<img v-if="reaction == 'hmm'" src="https://twemoji.maxcdn.com/2/svg/1f914.svg" alt="%i18n:common.reactions.hmm%">
-	<img v-if="reaction == 'surprise'" src="https://twemoji.maxcdn.com/2/svg/1f62e.svg" alt="%i18n:common.reactions.surprise%">
-	<img v-if="reaction == 'congrats'" src="https://twemoji.maxcdn.com/2/svg/1f389.svg" alt="%i18n:common.reactions.congrats%">
-	<img v-if="reaction == 'angry'" src="https://twemoji.maxcdn.com/2/svg/1f4a2.svg" alt="%i18n:common.reactions.angry%">
-	<img v-if="reaction == 'confused'" src="https://twemoji.maxcdn.com/2/svg/1f625.svg" alt="%i18n:common.reactions.confused%">
-	<img v-if="reaction == 'rip'" src="https://twemoji.maxcdn.com/2/svg/1f607.svg" alt="%i18n:common.reactions.rip%">
+	<img v-if="reaction == 'like'" src="https://twemoji.maxcdn.com/2/svg/1f44d.svg" :alt="$t('@.reactions.like')">
+	<img v-if="reaction == 'love'" src="https://twemoji.maxcdn.com/2/svg/2764.svg" :alt="$t('@.reactions.love')">
+	<img v-if="reaction == 'laugh'" src="https://twemoji.maxcdn.com/2/svg/1f606.svg" :alt="$t('@.reactions.laugh')">
+	<img v-if="reaction == 'hmm'" src="https://twemoji.maxcdn.com/2/svg/1f914.svg" :alt="$t('@.reactions.hmm')">
+	<img v-if="reaction == 'surprise'" src="https://twemoji.maxcdn.com/2/svg/1f62e.svg" :alt="$t('@.reactions.surprise')">
+	<img v-if="reaction == 'congrats'" src="https://twemoji.maxcdn.com/2/svg/1f389.svg" :alt="$t('@.reactions.congrats')">
+	<img v-if="reaction == 'angry'" src="https://twemoji.maxcdn.com/2/svg/1f4a2.svg" :alt="$t('@.reactions.angry')">
+	<img v-if="reaction == 'confused'" src="https://twemoji.maxcdn.com/2/svg/1f625.svg" :alt="$t('@.reactions.confused')">
+	<img v-if="reaction == 'rip'" src="https://twemoji.maxcdn.com/2/svg/1f607.svg" :alt="$t('@.reactions.rip')">
 	<template v-if="reaction == 'pudding'">
-		<img v-if="$store.getters.isSignedIn && $store.state.settings.iLikeSushi" src="https://twemoji.maxcdn.com/2/svg/1f363.svg" alt="%i18n:common.reactions.pudding%">
-		<img v-else src="https://twemoji.maxcdn.com/2/svg/1f36e.svg" alt="%i18n:common.reactions.pudding%">
+		<img v-if="$store.getters.isSignedIn && $store.state.settings.iLikeSushi" src="https://twemoji.maxcdn.com/2/svg/1f363.svg" :alt="$t('@.reactions.pudding')">
+		<img v-else src="https://twemoji.maxcdn.com/2/svg/1f36e.svg" :alt="$t('@.reactions.pudding')">
 	</template>
 </span>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 export default Vue.extend({
+	i18n: i18n(),
 	props: ['reaction']
 });
 </script>

src/client/app/common/views/components/reaction-picker.vue

@@ -4,16 +4,16 @@
 	<div class="popover" :class="{ compact, big }" ref="popover">
 		<p v-if="!compact">{{ title }}</p>
 		<div ref="buttons" :class="{ showFocus }">
-			<button @click="react('like')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="1" title="%i18n:common.reactions.like%"><mk-reaction-icon reaction='like'/></button>
-			<button @click="react('love')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="2" title="%i18n:common.reactions.love%"><mk-reaction-icon reaction='love'/></button>
-			<button @click="react('laugh')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="3" title="%i18n:common.reactions.laugh%"><mk-reaction-icon reaction='laugh'/></button>
-			<button @click="react('hmm')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="4" title="%i18n:common.reactions.hmm%"><mk-reaction-icon reaction='hmm'/></button>
-			<button @click="react('surprise')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="5" title="%i18n:common.reactions.surprise%"><mk-reaction-icon reaction='surprise'/></button>
-			<button @click="react('congrats')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="6" title="%i18n:common.reactions.congrats%"><mk-reaction-icon reaction='congrats'/></button>
-			<button @click="react('angry')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="7" title="%i18n:common.reactions.angry%"><mk-reaction-icon reaction='angry'/></button>
-			<button @click="react('confused')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="8" title="%i18n:common.reactions.confused%"><mk-reaction-icon reaction='confused'/></button>
-			<button @click="react('rip')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="9" title="%i18n:common.reactions.rip%"><mk-reaction-icon reaction='rip'/></button>
-			<button @click="react('pudding')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="10" title="%i18n:common.reactions.pudding%"><mk-reaction-icon reaction='pudding'/></button>
+			<button @click="react('like')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="1" :title="$t('@.reactions.like')"><mk-reaction-icon reaction='like'/></button>
+			<button @click="react('love')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="2" :title="$t('@.reactions.love')"><mk-reaction-icon reaction='love'/></button>
+			<button @click="react('laugh')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="3" :title="$t('@.reactions.laugh')"><mk-reaction-icon reaction='laugh'/></button>
+			<button @click="react('hmm')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="4" :title="$t('@.reactions.hmm')"><mk-reaction-icon reaction='hmm'/></button>
+			<button @click="react('surprise')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="5" :title="$t('@.reactions.surprise')"><mk-reaction-icon reaction='surprise'/></button>
+			<button @click="react('congrats')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="6" :title="$t('@.reactions.congrats')"><mk-reaction-icon reaction='congrats'/></button>
+			<button @click="react('angry')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="7" :title="$t('@.reactions.angry')"><mk-reaction-icon reaction='angry'/></button>
+			<button @click="react('confused')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="8" :title="$t('@.reactions.confused')"><mk-reaction-icon reaction='confused'/></button>
+			<button @click="react('rip')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="9" :title="$t('@.reactions.rip')"><mk-reaction-icon reaction='rip'/></button>
+			<button @click="react('pudding')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="10" :title="$t('@.reactions.pudding')"><mk-reaction-icon reaction='pudding'/></button>
 		</div>
 	</div>
 </div>
@@ -21,11 +21,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import * as anime from 'animejs';
 
-const placeholder = '%i18n:@choose-reaction%';
-
 export default Vue.extend({
+	i18n: i18n('common/views/components/reaction-picker.vue'),
 	props: {
 		note: {
 			type: Object,
@@ -67,7 +67,7 @@ export default Vue.extend({
 
 	data() {
 		return {
-			title: placeholder,
+			title: this.$t('choose-reaction'),
 			focus: null
 		};
 	},
@@ -145,7 +145,7 @@ export default Vue.extend({
 
 	methods: {
 		react(reaction) {
-			(this as any).api('notes/reactions/create', {
+			this.$root.api('notes/reactions/create', {
 				noteId: this.note.id,
 				reaction: reaction
 			}).then(() => {
@@ -160,7 +160,7 @@ export default Vue.extend({
 		},
 
 		onMouseout(e) {
-			this.title = placeholder;
+			this.title = this.$t('choose-reaction');
 		},
 
 		close() {

src/client/app/common/views/components/reactions-viewer.vue

@@ -17,6 +17,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+
 export default Vue.extend({
 	props: ['note'],
 	computed: {
@@ -26,7 +27,7 @@ export default Vue.extend({
 	},
 	methods: {
 		react(reaction: string) {
-			(this as any).api('notes/reactions/create', {
+			this.$root.api('notes/reactions/create', {
 				noteId: this.note.id,
 				reaction: reaction
 			});

src/client/app/common/views/components/signin.vue

@@ -2,26 +2,28 @@
 <form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit">
 	<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
 	<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @input="onUsernameChange" styl="fill">
-		<span>%i18n:@username%</span>
+		<span>{{ $t('username') }}</span>
 		<span slot="prefix">@</span>
 		<span slot="suffix">@{{ host }}</span>
 	</ui-input>
 	<ui-input v-model="password" type="password" required styl="fill">
-		<span>%i18n:@password%</span>
+		<span>{{ $t('password') }}</span>
 		<span slot="prefix"><fa icon="lock"/></span>
 	</ui-input>
 	<ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required styl="fill"/>
-	<ui-button type="submit" :disabled="signing">{{ signing ? '%i18n:@signing-in%' : '%i18n:@signin%' }}</ui-button>
-	<p style="margin: 8px 0;">%i18n:@or% <a :href="`${apiUrl}/signin/twitter`">%i18n:@signin-with-twitter%</a></p>
-	<p style="margin: 8px 0;">%i18n:@or% <a :href="`${apiUrl}/signin/github`">%i18n:@signin-with-github%</a></p>
+	<ui-button type="submit" :disabled="signing">{{ signing ? $t('signing-in') : $t('signin') }}</ui-button>
+	<p style="margin: 8px 0;"><a :href="`${apiUrl}/signin/twitter`">{{ $t('signin-with-twitter') }}</a></p>
+	<p style="margin: 8px 0;"><a :href="`${apiUrl}/signin/github`">{{ $t('signin-with-github') }}</a></p>
 </form>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { apiUrl, host } from '../../../config';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/signin.vue'),
 	props: {
 		withAvatar: {
 			type: Boolean,
@@ -42,7 +44,7 @@ export default Vue.extend({
 	},
 	methods: {
 		onUsernameChange() {
-			(this as any).api('users/show', {
+			this.$root.api('users/show', {
 				username: this.username
 			}).then(user => {
 				this.user = user;
@@ -53,14 +55,14 @@ export default Vue.extend({
 		onSubmit() {
 			this.signing = true;
 
-			(this as any).api('signin', {
+			this.$root.api('signin', {
 				username: this.username,
 				password: this.password,
 				token: this.user && this.user.twoFactorEnabled ? this.token : undefined
 			}, true).then(() => {
 				location.reload();
 			}).catch(() => {
-				alert('%i18n:@login-failed%');
+				alert(this.$t('login-failed'));
 				this.signing = false;
 			});
 		}

src/client/app/common/views/components/signup.vue

@@ -2,51 +2,53 @@
 <form class="mk-signup" @submit.prevent="onSubmit" :autocomplete="Math.random()">
 	<template v-if="meta">
 		<ui-input v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required styl="fill">
-			<span>%i18n:@invitation-code%</span>
+			<span>{{ $t('invitation-code') }}</span>
 			<span slot="prefix"><fa icon="id-card-alt"/></span>
-			<p slot="desc" v-html="'%i18n:@invitation-info%'.replace('{}', 'mailto:' + meta.maintainer.email)"></p>
+			<p slot="desc" v-html="this.$t('invitation-info').replace('{}', 'mailto:' + meta.maintainer.email)"></p>
 		</ui-input>
 		<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @input="onChangeUsername" styl="fill">
-			<span>%i18n:@username%</span>
+			<span>{{ $t('username') }}</span>
 			<span slot="prefix">@</span>
 			<span slot="suffix">@{{ host }}</span>
-			<p slot="desc" v-if="usernameState == 'wait'" style="color:#999"><fa icon="spinner .pulse" fixed-width/> %i18n:@checking%</p>
-			<p slot="desc" v-if="usernameState == 'ok'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@available%</p>
-			<p slot="desc" v-if="usernameState == 'unavailable'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@unavailable%</p>
-			<p slot="desc" v-if="usernameState == 'error'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@error%</p>
-			<p slot="desc" v-if="usernameState == 'invalid-format'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@invalid-format%</p>
-			<p slot="desc" v-if="usernameState == 'min-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@too-short%</p>
-			<p slot="desc" v-if="usernameState == 'max-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@too-long%</p>
+			<p slot="desc" v-if="usernameState == 'wait'" style="color:#999"><fa icon="spinner .pulse" fixed-width/> {{ $t('checking') }}</p>
+			<p slot="desc" v-if="usernameState == 'ok'" style="color:#3CB7B5"><fa icon="check" fixed-width/> {{ $t('available') }}</p>
+			<p slot="desc" v-if="usernameState == 'unavailable'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('unavailable') }}</p>
+			<p slot="desc" v-if="usernameState == 'error'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('error') }}</p>
+			<p slot="desc" v-if="usernameState == 'invalid-format'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('invalid-format') }}</p>
+			<p slot="desc" v-if="usernameState == 'min-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('too-short') }}</p>
+			<p slot="desc" v-if="usernameState == 'max-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('too-long') }}</p>
 		</ui-input>
 		<ui-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword" :with-password-meter="true" styl="fill">
-			<span>%i18n:@password%</span>
+			<span>{{ $t('password') }}</span>
 			<span slot="prefix"><fa icon="lock"/></span>
 			<div slot="desc">
-				<p v-if="passwordStrength == 'low'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@weak-password%</p>
-				<p v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@normal-password%</p>
-				<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@strong-password%</p>
+				<p v-if="passwordStrength == 'low'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('weak-password') }}</p>
+				<p v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><fa icon="check" fixed-width/> {{ $t('normal-password') }}</p>
+				<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><fa icon="check" fixed-width/> {{ $t('strong-password') }}</p>
 			</div>
 		</ui-input>
 		<ui-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype" styl="fill">
-			<span>%i18n:@password% (%i18n:@retype%)</span>
+			<span>{{ $t('password') }} ({{ $t('retype') }})</span>
 			<span slot="prefix"><fa icon="lock"/></span>
 			<div slot="desc">
-				<p v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@password-matched%</p>
-				<p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@password-not-matched%</p>
+				<p v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><fa icon="check" fixed-width/> {{ $t('password-matched') }}</p>
+				<p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('password-not-matched') }}</p>
 			</div>
 		</ui-input>
-		<div v-if="meta.recaptchaSiteKey != null" class="g-recaptcha" :data-sitekey="meta.recaptchaSiteKey" style="margin: 16px 0;"></div>
-		<ui-button type="submit">%i18n:@create%</ui-button>
+		<div v-if="meta.enableRecaptcha" class="g-recaptcha" :data-sitekey="meta.recaptchaSiteKey" style="margin: 16px 0;"></div>
+		<ui-button type="submit">{{ $t('create') }}</ui-button>
 	</template>
 </form>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 const getPasswordStrength = require('syuilo-password-strength');
 import { host, url } from '../../../config';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/signup.vue'),
 	data() {
 		return {
 			host,
@@ -70,7 +72,7 @@ export default Vue.extend({
 		}
 	},
 	created() {
-		(this as any).os.getMeta().then(meta => {
+		this.$root.getMeta().then(meta => {
 			this.meta = meta;
 		});
 	},
@@ -100,7 +102,7 @@ export default Vue.extend({
 
 			this.usernameState = 'wait';
 
-			(this as any).api('username/available', {
+			this.$root.api('username/available', {
 				username: this.username
 			}).then(result => {
 				this.usernameState = result.available ? 'ok' : 'unavailable';
@@ -126,22 +128,22 @@ export default Vue.extend({
 			this.passwordRetypeState = this.password == this.retypedPassword ? 'match' : 'not-match';
 		},
 		onSubmit() {
-			(this as any).api('signup', {
+			this.$root.api('signup', {
 				username: this.username,
 				password: this.password,
 				invitationCode: this.invitationCode,
-				'g-recaptcha-response': this.meta.recaptchaSiteKey != null ? (window as any).grecaptcha.getResponse() : null
+				'g-recaptcha-response': this.meta.enableRecaptcha ? (window as any).grecaptcha.getResponse() : null
 			}, true).then(() => {
-				(this as any).api('signin', {
+				this.$root.api('signin', {
 					username: this.username,
 					password: this.password
 				}, true).then(() => {
 					location.href = '/';
 				});
 			}).catch(() => {
-				alert('%i18n:@some-error%');
+				alert(this.$t('some-error'));
 
-				if (this.meta.recaptchaSiteKey != null) {
+				if (this.meta.enableRecaptcha) {
 					(window as any).grecaptcha.reset();
 				}
 			});

src/client/app/common/views/components/special-message.vue

@@ -1,42 +0,0 @@
-<template>
-<div class="mk-special-message">
-	<p v-if="m == 1 && d == 1">%i18n:@new-year%</p>
-	<p v-if="m == 12 && d == 25">%i18n:@christmas%</p>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	data() {
-		return {
-			now: new Date()
-		};
-	},
-	computed: {
-		d(): number {
-			return this.now.getDate();
-		},
-		m(): number {
-			return this.now.getMonth() + 1;
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-special-message
-	&:empty
-		display none
-
-	> p
-		margin 0
-		padding 4px
-		text-align center
-		font-size 14px
-		font-weight bold
-		text-transform uppercase
-		color #fff
-		background #ff1036
-
-</style>

src/client/app/common/views/components/stream-indicator.vue

@@ -2,32 +2,34 @@
 <div class="mk-stream-indicator">
 	<p v-if="stream.state == 'initializing'">
 		<fa icon="spinner .pulse"/>
-		<span>%i18n:@connecting%<mk-ellipsis/></span>
+		<span>{{ $t('connecting') }}<mk-ellipsis/></span>
 	</p>
 	<p v-if="stream.state == 'reconnecting'">
 		<fa icon="spinner .pulse"/>
-		<span>%i18n:@reconnecting%<mk-ellipsis/></span>
+		<span>{{ $t('reconnecting') }}<mk-ellipsis/></span>
 	</p>
 	<p v-if="stream.state == 'connected'">
 		<fa icon="check"/>
-		<span>%i18n:@connected%</span>
+		<span>{{ $t('connected') }}</span>
 	</p>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import * as anime from 'animejs';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/stream-indicator.vue'),
 	computed: {
 		stream() {
-			return (this as any).os.stream;
+			return this.$root.stream;
 		}
 	},
 	created() {
-		(this as any).os.stream.on('_connected_', this.onConnected);
-		(this as any).os.stream.on('_disconnected_', this.onDisconnected);
+		this.$root.stream.on('_connected_', this.onConnected);
+		this.$root.stream.on('_disconnected_', this.onDisconnected);
 
 		this.$nextTick(() => {
 			if (this.stream.state == 'connected') {
@@ -36,8 +38,8 @@ export default Vue.extend({
 		});
 	},
 	beforeDestroy() {
-		(this as any).os.stream.off('_connected_', this.onConnected);
-		(this as any).os.stream.off('_disconnected_', this.onDisconnected);
+		this.$root.stream.off('_connected_', this.onConnected);
+		this.$root.stream.off('_disconnected_', this.onDisconnected);
 	},
 	methods: {
 		onConnected() {

src/client/app/common/views/components/tag-cloud.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="jtivnzhfwquxpsfidertopbmwmchmnmo">
-	<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:common.loading%<mk-ellipsis/></p>
-	<p class="empty" v-else-if="tags.length == 0"><fa icon="exclamation-circle"/>%i18n:@empty%</p>
+	<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
+	<p class="empty" v-else-if="tags.length == 0"><fa icon="exclamation-circle"/>{{ $t('empty') }}</p>
 	<div v-else>
 		<vue-word-cloud
 				:words="tags.slice(0, 20).map(x => [x.name, x.count])"
@@ -19,9 +19,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import * as VueWordCloud from 'vuewordcloud';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/tag-cloud.vue'),
 	components: {
 		[VueWordCloud.name]: VueWordCloud
 	},
@@ -41,7 +43,7 @@ export default Vue.extend({
 	},
 	methods: {
 		fetch() {
-			(this as any).api('aggregation/hashtags').then(tags => {
+			this.$root.api('aggregation/hashtags').then(tags => {
 				this.tags = tags;
 				this.fetching = false;
 			});

src/client/app/common/views/components/theme.vue

@@ -1,96 +1,96 @@
 <template>
 <div class="nicnklzforebnpfgasiypmpdaaglujqm">
 	<label>
-		<span>%i18n:@light-theme%</span>
-		<ui-select v-model="light" placeholder="%i18n:@light-theme%">
-			<optgroup label="%i18n:@light-themes%">
+		<span>{{ $t('light-theme') }}</span>
+		<ui-select v-model="light" :placeholder="$t('light-theme')">
+			<optgroup :label="$t('light-themes')">
 				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
-			<optgroup label="%i18n:@dark-themes%">
+			<optgroup :label="$t('dark-themes')">
 				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
 		</ui-select>
 	</label>
 
 	<label>
-		<span>%i18n:@dark-theme%</span>
-		<ui-select v-model="dark" placeholder="%i18n:@dark-theme%">
-			<optgroup label="%i18n:@dark-themes%">
+		<span>{{ $t('dark-theme') }}</span>
+		<ui-select v-model="dark" :placeholder="$t('dark-theme')">
+			<optgroup :label="$t('dark-themes')">
 				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
-			<optgroup label="%i18n:@light-themes%">
+			<optgroup :label="$t('light-themes')">
 				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
 		</ui-select>
 	</label>
 
 	<details class="creator">
-		<summary><fa icon="palette"/> %i18n:@create-a-theme%</summary>
+		<summary><fa icon="palette"/> {{ $t('create-a-theme') }}</summary>
 		<div>
-			<span>%i18n:@base-theme%:</span>
-			<ui-radio v-model="myThemeBase" value="light">%i18n:@base-theme-light%</ui-radio>
-			<ui-radio v-model="myThemeBase" value="dark">%i18n:@base-theme-dark%</ui-radio>
+			<span>{{ $t('base-theme') }}:</span>
+			<ui-radio v-model="myThemeBase" value="light">{{ $t('base-theme-light') }}</ui-radio>
+			<ui-radio v-model="myThemeBase" value="dark">{{ $t('base-theme-dark') }}</ui-radio>
 		</div>
 		<div>
 			<ui-input v-model="myThemeName">
-				<span>%i18n:@theme-name%</span>
+				<span>{{ $t('theme-name') }}</span>
 			</ui-input>
 			<ui-textarea v-model="myThemeDesc">
-				<span>%i18n:@desc%</span>
+				<span>{{ $t('desc') }}</span>
 			</ui-textarea>
 		</div>
 		<div>
-			<div style="padding-bottom:8px;">%i18n:@primary-color%:</div>
+			<div style="padding-bottom:8px;">{{ $t('primary-color') }}:</div>
 			<color-picker v-model="myThemePrimary"/>
 		</div>
 		<div>
-			<div style="padding-bottom:8px;">%i18n:@secondary-color%:</div>
+			<div style="padding-bottom:8px;">{{ $t('secondary-color') }}:</div>
 			<color-picker v-model="myThemeSecondary"/>
 		</div>
 		<div>
-			<div style="padding-bottom:8px;">%i18n:@text-color%:</div>
+			<div style="padding-bottom:8px;">{{ $t('text-color') }}:</div>
 			<color-picker v-model="myThemeText"/>
 		</div>
-		<ui-button @click="preview()"><fa icon="eye"/> %i18n:@preview-created-theme%</ui-button>
-		<ui-button primary @click="gen()"><fa :icon="['far', 'save']"/> %i18n:@save-created-theme%</ui-button>
+		<ui-button @click="preview()"><fa icon="eye"/> {{ $t('preview-created-theme') }}</ui-button>
+		<ui-button primary @click="gen()"><fa :icon="['far', 'save']"/> {{ $t('save-created-theme') }}</ui-button>
 	</details>
 
 	<details>
-		<summary><fa icon="download"/> %i18n:@install-a-theme%</summary>
-		<ui-button @click="import_()"><fa icon="file-import"/> %i18n:@import%</ui-button>
+		<summary><fa icon="download"/> {{ $t('install-a-theme') }}</summary>
+		<ui-button @click="import_()"><fa icon="file-import"/> {{ $t('import') }}</ui-button>
 		<input ref="file" type="file" accept=".misskeytheme" style="display:none;" @change="onUpdateImportFile"/>
-		<p>%i18n:@import-by-code%:</p>
+		<p>{{ $t('import-by-code') }}:</p>
 		<ui-textarea v-model="installThemeCode">
-			<span>%i18n:@theme-code%</span>
+			<span>{{ $t('theme-code') }}</span>
 		</ui-textarea>
-		<ui-button @click="() => install(this.installThemeCode)"><fa icon="check"/> %i18n:@install%</ui-button>
+		<ui-button @click="() => install(this.installThemeCode)"><fa icon="check"/> {{ $t('install') }}</ui-button>
 	</details>
 
 	<details>
-		<summary><fa icon="folder-open"/> %i18n:@manage-themes%</summary>
-		<ui-select v-model="selectedThemeId" placeholder="%i18n:@select-theme%">
-			<optgroup label="%i18n:@builtin-themes%">
+		<summary><fa icon="folder-open"/> {{ $t('manage-themes') }}</summary>
+		<ui-select v-model="selectedThemeId" :placeholder="$t('select-theme')">
+			<optgroup :label="$t('builtin-themes')">
 				<option v-for="x in builtinThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
-			<optgroup label="%i18n:@my-themes%">
+			<optgroup :label="$t('my-themes')">
 				<option v-for="x in installedThemes.filter(t => t.author == this.$store.state.i.username)" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
-			<optgroup label="%i18n:@installed-themes%">
+			<optgroup :label="$t('installed-themes')">
 				<option v-for="x in installedThemes.filter(t => t.author != this.$store.state.i.username)" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
 		</ui-select>
 		<template v-if="selectedTheme">
 			<ui-input readonly :value="selectedTheme.author">
-				<span>%i18n:@author%</span>
+				<span>{{ $t('author') }}</span>
 			</ui-input>
 			<ui-textarea v-if="selectedTheme.desc" readonly :value="selectedTheme.desc">
-				<span>%i18n:@desc%</span>
+				<span>{{ $t('desc') }}</span>
 			</ui-textarea>
 			<ui-textarea readonly :value="selectedThemeCode">
-				<span>%i18n:@theme-code%</span>
+				<span>{{ $t('theme-code') }}</span>
 			</ui-textarea>
-			<ui-button @click="export_()" link :download="`${selectedTheme.name}.misskeytheme`" ref="export"><fa icon="box"/> %i18n:@export%</ui-button>
-			<ui-button @click="uninstall()" v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><fa :icon="['far', 'trash-alt']"/> %i18n:@uninstall%</ui-button>
+			<ui-button @click="export_()" link :download="`${selectedTheme.name}.misskeytheme`" ref="export"><fa icon="box"/> {{ $t('export') }}</ui-button>
+			<ui-button @click="uninstall()" v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><fa :icon="['far', 'trash-alt']"/> {{ $t('uninstall') }}</ui-button>
 		</template>
 	</details>
 </div>
@@ -98,6 +98,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { lightTheme, darkTheme, builtinThemes, applyTheme, Theme } from '../../../theme';
 import { Chrome } from 'vue-color';
 import * as uuid from 'uuid';
@@ -119,6 +120,7 @@ function convertOldThemedefinition(t) {
 }
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/theme.vue'),
 	components: {
 		ColorPicker: Chrome
 	},
@@ -221,7 +223,7 @@ export default Vue.extend({
 			} catch (e) {
 				this.$swal({
 					type: 'error',
-					text: '%i18n:@invalid-theme%'
+					text: this.$t('invalid-theme')
 				});
 				return;
 			}
@@ -234,7 +236,7 @@ export default Vue.extend({
 			if (theme.id == null) {
 				this.$swal({
 					type: 'error',
-					text: '%i18n:@invalid-theme%'
+					text: this.$t('invalid-theme')
 				});
 				return;
 			}
@@ -242,7 +244,7 @@ export default Vue.extend({
 			if (this.$store.state.device.themes.some(t => t.id == theme.id)) {
 				this.$swal({
 					type: 'info',
-					text: '%i18n:@already-installed%'
+					text: this.$t('already-installed')
 				});
 				return;
 			}
@@ -254,7 +256,7 @@ export default Vue.extend({
 
 			this.$swal({
 				type: 'success',
-				text: '%i18n:@installed%'.replace('{}', theme.name)
+				text: this.$t('installed').replace('{}', theme.name)
 			});
 		},
 
@@ -267,7 +269,7 @@ export default Vue.extend({
 
 			this.$swal({
 				type: 'info',
-				text: '%i18n:@uninstalled%'.replace('{}', theme.name)
+				text: this.$t('uninstalled').replace('{}', theme.name)
 			});
 		},
 
@@ -304,7 +306,7 @@ export default Vue.extend({
 			if (theme.name == null || theme.name.trim() == '') {
 				this.$swal({
 					type: 'warning',
-					text: '%i18n:@theme-name-required%'
+					text: this.$t('theme-name-required')
 				});
 				return;
 			}
@@ -318,7 +320,7 @@ export default Vue.extend({
 
 			this.$swal({
 				type: 'success',
-				text: '%i18n:@saved%'
+				text: this.$t('saved')
 			});
 		}
 	}

src/client/app/common/views/components/time.vue

@@ -8,8 +8,10 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 
 export default Vue.extend({
+	i18n: i18n(),
 	props: {
 		time: {
 			type: [Date, String],
@@ -44,16 +46,16 @@ export default Vue.extend({
 			const time = this._time;
 			const ago = (this.now.getTime() - time.getTime()) / 1000/*ms*/;
 			return (
-				ago >= 31536000 ? '%i18n:common.time.years_ago%'  .replace('{}', (~~(ago / 31536000)).toString()) :
-				ago >= 2592000  ? '%i18n:common.time.months_ago%' .replace('{}', (~~(ago / 2592000)).toString()) :
-				ago >= 604800   ? '%i18n:common.time.weeks_ago%'  .replace('{}', (~~(ago / 604800)).toString()) :
-				ago >= 86400    ? '%i18n:common.time.days_ago%'   .replace('{}', (~~(ago / 86400)).toString()) :
-				ago >= 3600     ? '%i18n:common.time.hours_ago%'  .replace('{}', (~~(ago / 3600)).toString()) :
-				ago >= 60       ? '%i18n:common.time.minutes_ago%'.replace('{}', (~~(ago / 60)).toString()) :
-				ago >= 10       ? '%i18n:common.time.seconds_ago%'.replace('{}', (~~(ago % 60)).toString()) :
-				ago >= 0        ? '%i18n:common.time.just_now%' :
-				ago <  0        ? '%i18n:common.time.future%' :
-				'%i18n:common.time.unknown%');
+				ago >= 31536000 ? this.$t('@.time.years_ago')  .replace('{}', (~~(ago / 31536000)).toString()) :
+				ago >= 2592000  ? this.$t('@.time.months_ago') .replace('{}', (~~(ago / 2592000)).toString()) :
+				ago >= 604800   ? this.$t('@.time.weeks_ago')  .replace('{}', (~~(ago / 604800)).toString()) :
+				ago >= 86400    ? this.$t('@.time.days_ago')   .replace('{}', (~~(ago / 86400)).toString()) :
+				ago >= 3600     ? this.$t('@.time.hours_ago')  .replace('{}', (~~(ago / 3600)).toString()) :
+				ago >= 60       ? this.$t('@.time.minutes_ago').replace('{}', (~~(ago / 60)).toString()) :
+				ago >= 10       ? this.$t('@.time.seconds_ago').replace('{}', (~~(ago % 60)).toString()) :
+				ago >= 0        ? this.$t('@.time.just_now') :
+				ago <  0        ? this.$t('@.time.future') :
+				this.$t('@.time.unknown'));
 		}
 	},
 	created() {

src/client/app/common/views/components/trends.vue

@@ -1,13 +1,13 @@
 <template>
 <div class="csqvmxybqbycalfhkxvyfrgbrdalkaoc">
-	<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:common.loading%<mk-ellipsis/></p>
-	<p class="empty" v-else-if="stats.length == 0"><fa icon="exclamation-circle"/>%i18n:@empty%</p>
+	<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
+	<p class="empty" v-else-if="stats.length == 0"><fa icon="exclamation-circle"/>{{ $t('empty') }}</p>
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
 	<transition-group v-else tag="div" name="chart">
 		<div v-for="stat in stats" :key="stat.tag">
 			<div class="tag">
 				<router-link :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link>
-				<p>{{ '%i18n:@count%'.replace('{}', stat.usersCount) }}</p>
+				<p>{{ this.$t('count').replace('{}', stat.usersCount) }}</p>
 			</div>
 			<x-chart class="chart" :src="stat.chart"/>
 		</div>
@@ -17,9 +17,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import XChart from './trends.chart.vue';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/trends.vue'),
 	components: {
 		XChart
 	},
@@ -39,7 +41,7 @@ export default Vue.extend({
 	},
 	methods: {
 		fetch() {
-			(this as any).api('hashtags/trend').then(stats => {
+			this.$root.api('hashtags/trend').then(stats => {
 				this.stats = stats;
 				this.fetching = false;
 			});

src/client/app/common/views/components/twitter-setting.vue

@@ -1,11 +1,11 @@
 <template>
 <div class="mk-twitter-setting">
-	<p>%i18n:@description%<a :href="`${docsUrl}/link-to-twitter`" target="_blank">%i18n:@detail%</a></p>
-	<p class="account" v-if="$store.state.i.twitter" :title="`Twitter ID: ${$store.state.i.twitter.userId}`">%i18n:@connected-to%: <a :href="`https://twitter.com/${$store.state.i.twitter.screenName}`" target="_blank">@{{ $store.state.i.twitter.screenName }}</a></p>
+	<p>{{ $t('description') }}<a :href="`${docsUrl}/link-to-twitter`" target="_blank">{{ $t('detail') }}</a></p>
+	<p class="account" v-if="$store.state.i.twitter" :title="`Twitter ID: ${$store.state.i.twitter.userId}`">{{ $t('connected-to') }}: <a :href="`https://twitter.com/${$store.state.i.twitter.screenName}`" target="_blank">@{{ $store.state.i.twitter.screenName }}</a></p>
 	<p>
-		<a :href="`${apiUrl}/connect/twitter`" target="_blank" @click.prevent="connect">{{ $store.state.i.twitter ? '%i18n:@reconnect%' : '%i18n:@connect%' }}</a>
+		<a :href="`${apiUrl}/connect/twitter`" target="_blank" @click.prevent="connect">{{ $store.state.i.twitter ? this.$t('reconnect') : this.$t('connect') }}</a>
 		<span v-if="$store.state.i.twitter"> or </span>
-		<a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="$store.state.i.twitter" @click.prevent="disconnect">%i18n:@disconnect%</a>
+		<a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="$store.state.i.twitter" @click.prevent="disconnect">{{ $t('disconnect') }}</a>
 	</p>
 	<p class="id" v-if="$store.state.i.twitter">Twitter ID: {{ $store.state.i.twitter.userId }}</p>
 </div>
@@ -13,9 +13,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { apiUrl, docsUrl } from '../../../config';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/twitter-setting.vue'),
 	data() {
 		return {
 			form: null,

src/client/app/common/views/components/ui/button.vue

@@ -53,7 +53,7 @@ export default Vue.extend({
 	display block
 	width 100%
 	margin 0
-	padding 8px
+	padding 8px 10px
 	text-align center
 	font-weight normal
 	font-size 16px

src/client/app/common/views/components/ui/textarea.vue

@@ -19,7 +19,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-const getPasswordStrength = require('syuilo-password-strength');
 
 export default Vue.extend({
 	props: {

src/client/app/common/views/components/uploader.vue

@@ -5,7 +5,7 @@
 			<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
 			<p class="name"><fa icon="spinner .pulse"/>{{ ctx.name }}</p>
 			<p class="status">
-				<span class="initing" v-if="ctx.progress == undefined">%i18n:@waiting%<mk-ellipsis/></span>
+				<span class="initing" v-if="ctx.progress == undefined">{{ $t('waiting') }}<mk-ellipsis/></span>
 				<span class="kb" v-if="ctx.progress != undefined">{{ String(Math.floor(ctx.progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
 				<span class="percentage" v-if="ctx.progress != undefined">{{ Math.floor((ctx.progress.value / ctx.progress.max) * 100) }}</span>
 			</p>
@@ -19,10 +19,12 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { apiUrl } from '../../../config';
 import getMD5 from '../../scripts/get-md5';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/uploader.vue'),
 	data() {
 		return {
 			uploads: []
@@ -34,7 +36,7 @@ export default Vue.extend({
 				const data = new FormData();
 				data.append('md5', getMD5(fileData));
 
-				(this as any).api('drive/files/check_existence', {
+				this.$root.api('drive/files/check_existence', {
 					md5: getMD5(fileData)
 				}).then(resp => {
 					resolve(resp.file);

src/client/app/common/views/components/url.vue

@@ -13,6 +13,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { toUnicode as decodePunycode } from 'punycode';
+
 export default Vue.extend({
 	props: ['url', 'target'],
 	data() {

src/client/app/common/views/components/visibility-chooser.vue

@@ -5,34 +5,34 @@
 		<div @click="choose('public')" :class="{ active: v == 'public' }">
 			<div><fa icon="globe"/></div>
 			<div>
-				<span>%i18n:@public%</span>
+				<span>{{ $t('public') }}</span>
 			</div>
 		</div>
 		<div @click="choose('home')" :class="{ active: v == 'home' }">
 			<div><fa icon="home"/></div>
 			<div>
-				<span>%i18n:@home%</span>
-				<span>%i18n:@home-desc%</span>
+				<span>{{ $t('home') }}</span>
+				<span>{{ $t('home-desc') }}</span>
 			</div>
 		</div>
 		<div @click="choose('followers')" :class="{ active: v == 'followers' }">
 			<div><fa icon="unlock"/></div>
 			<div>
-				<span>%i18n:@followers%</span>
-				<span>%i18n:@followers-desc%</span>
+				<span>{{ $t('followers') }}</span>
+				<span>{{ $t('followers-desc') }}</span>
 			</div>
 		</div>
 		<div @click="choose('specified')" :class="{ active: v == 'specified' }">
 			<div><fa icon="envelope"/></div>
 			<div>
-				<span>%i18n:@specified%</span>
-				<span>%i18n:@specified-desc%</span>
+				<span>{{ $t('specified') }}</span>
+				<span>{{ $t('specified-desc') }}</span>
 			</div>
 		</div>
 		<div @click="choose('private')" :class="{ active: v == 'private' }">
 			<div><fa icon="lock"/></div>
 			<div>
-				<span>%i18n:@private%</span>
+				<span>{{ $t('private') }}</span>
 			</div>
 		</div>
 	</div>
@@ -41,9 +41,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import * as anime from 'animejs';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/visibility-chooser.vue'),
 	props: ['source', 'compact'],
 	data() {
 		return {

src/client/app/common/views/components/welcome-timeline.vue

@@ -45,7 +45,7 @@ export default Vue.extend({
 	mounted() {
 		this.fetch();
 
-		this.connection = (this as any).os.stream.useSharedConnection('localTimeline');
+		this.connection = this.$root.stream.useSharedConnection('localTimeline');
 
 		this.connection.on('note', this.onNote);
 	},
@@ -57,7 +57,7 @@ export default Vue.extend({
 	methods: {
 		fetch(cb?) {
 			this.fetching = true;
-			(this as any).api('notes', {
+			this.$root.api('notes', {
 				limit: this.max,
 				local: true,
 				reply: false,

src/client/app/common/views/pages/follow.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="syxhndwprovvuqhmyvveewmbqayniwkv" v-if="!fetching">
-	<div class="signed-in-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${myName}`)"></div>
+	<div class="signed-in-as" v-html="this.$t('signed-in-as').replace('{}', `<b>${myName}`)"></div>
 
 	<main>
 		<div class="banner" :style="bannerStyle"></div>
@@ -19,11 +19,11 @@
 			@click="onClick"
 			:disabled="followWait">
 		<template v-if="!followWait">
-			<template v-if="user.hasPendingFollowRequestFromYou && user.isLocked"><fa icon="hourglass-half"/> %i18n:@request-pending%</template>
-			<template v-else-if="user.hasPendingFollowRequestFromYou && !user.isLocked"><fa icon="hourglass-start"/> %i18n:@follow-processing%</template>
-			<template v-else-if="user.isFollowing"><fa icon="minus"/> %i18n:@following%</template>
-			<template v-else-if="!user.isFollowing && user.isLocked"><fa icon="plus"/> %i18n:@follow-request%</template>
-			<template v-else-if="!user.isFollowing && !user.isLocked"><fa icon="plus"/> %i18n:@follow%</template>
+			<template v-if="user.hasPendingFollowRequestFromYou && user.isLocked"><fa icon="hourglass-half"/> {{ $t('request-pending') }}</template>
+			<template v-else-if="user.hasPendingFollowRequestFromYou && !user.isLocked"><fa icon="hourglass-start"/> {{ $t('follow-processing') }}</template>
+			<template v-else-if="user.isFollowing"><fa icon="minus"/> {{ $t('following') }}</template>
+			<template v-else-if="!user.isFollowing && user.isLocked"><fa icon="plus"/> {{ $t('follow-request') }}</template>
+			<template v-else-if="!user.isFollowing && !user.isLocked"><fa icon="plus"/> {{ $t('follow') }}</template>
 		</template>
 		<template v-else><fa icon="spinner .pulse" fixed-width/></template>
 	</button>
@@ -32,10 +32,12 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import parseAcct from '../../../../../misc/acct/parse';
 import Progress from '../../../common/scripts/loading';
 
 export default Vue.extend({
+	i18n: i18n('common/views/pages/follow.vue'),
 	data() {
 		return {
 			fetching: true,
@@ -67,7 +69,7 @@ export default Vue.extend({
 			const acct = new URL(location.href).searchParams.get('acct');
 			this.fetching = true;
 			Progress.start();
-			(this as any).api('users/show', parseAcct(acct)).then(user => {
+			this.$root.api('users/show', parseAcct(acct)).then(user => {
 				this.user = user;
 				this.fetching = false;
 				Progress.done();
@@ -79,20 +81,20 @@ export default Vue.extend({
 
 			try {
 				if (this.user.isFollowing) {
-					this.user = await (this as any).api('following/delete', {
+					this.user = await this.$root.api('following/delete', {
 						userId: this.user.id
 					});
 				} else {
 					if (this.user.hasPendingFollowRequestFromYou) {
-						this.user = await (this as any).api('following/requests/cancel', {
+						this.user = await this.$root.api('following/requests/cancel', {
 							userId: this.user.id
 						});
 					} else if (this.user.isLocked) {
-						this.user = await (this as any).api('following/create', {
+						this.user = await this.$root.api('following/create', {
 							userId: this.user.id
 						});
 					} else {
-						this.user = await (this as any).api('following/create', {
+						this.user = await this.$root.api('following/create', {
 							userId: this.user.id
 						});
 					}

src/client/app/common/views/widgets/broadcast.vue

@@ -15,13 +15,13 @@
 					<path class="wave d" d="M29.18,1.06c-0.479-0.502-1.273-0.522-1.775-0.044c-0.016,0.015-0.029,0.029-0.045,0.044c-0.5,0.52-0.5,1.36,0,1.88 c1.361,1.4,2.041,3.24,2.041,5.08s-0.68,3.66-2.041,5.08c-0.5,0.52-0.5,1.36,0,1.88c0.509,0.508,1.332,0.508,1.841,0 c1.86-1.92,2.8-4.44,2.8-6.96C31.99,5.424,30.98,2.931,29.18,1.06z"></path>
 				</svg>
 			</div>
-			<p class="fetching" v-if="fetching">%i18n:@fetching%<mk-ellipsis/></p>
-			<h1 v-if="!fetching">{{ announcements.length == 0 ? '%i18n:@no-broadcasts%' : announcements[i].title }}</h1>
+			<p class="fetching" v-if="fetching">{{ $t('fetching') }}<mk-ellipsis/></p>
+			<h1 v-if="!fetching">{{ announcements.length == 0 ? this.$t('no-broadcasts') : announcements[i].title }}</h1>
 			<p v-if="!fetching">
 				<span v-if="announcements.length != 0" v-html="announcements[i].text"></span>
-				<template v-if="announcements.length == 0">%i18n:@have-a-nice-day%</template>
+				<template v-if="announcements.length == 0">{{ $t('have-a-nice-day') }}</template>
 			</p>
-			<a v-if="announcements.length > 1" @click="next">%i18n:@next% &gt;&gt;</a>
+			<a v-if="announcements.length > 1" @click="next">{{ $t('next') }} &gt;&gt;</a>
 		</div>
 	</mk-widget-container>
 </div>
@@ -29,6 +29,7 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
+import i18n from '../../../i18n';
 
 export default define({
 	name: 'broadcast',
@@ -36,6 +37,7 @@ export default define({
 		design: 0
 	})
 }).extend({
+	i18n: i18n('common/views/widgets/broadcast.vue'),
 	data() {
 		return {
 			i: 0,
@@ -44,7 +46,7 @@ export default define({
 		};
 	},
 	mounted() {
-		(this as any).os.getMeta().then(meta => {
+		this.$root.getMeta().then(meta => {
 			this.announcements = meta.broadcasts;
 			this.fetching = false;
 		});

src/client/app/common/views/widgets/calendar.vue

@@ -4,27 +4,27 @@
 		<div class="mkw-calendar--body">
 			<div class="calendar" :data-is-holiday="isHoliday">
 				<p class="month-and-year">
-					<span class="year">{{ '%i18n:@year%'.split('{}')[0] }}{{ year }}{{ '%i18n:@year%'.split('{}')[1] }}</span>
-					<span class="month">{{ '%i18n:@month%'.split('{}')[0] }}{{ month }}{{ '%i18n:@month%'.split('{}')[1] }}</span>
+					<span class="year">{{ this.$t('year').split('{}')[0] }}{{ year }}{{ this.$t('year').split('{}')[1] }}</span>
+					<span class="month">{{ this.$t('month').split('{}')[0] }}{{ month }}{{ this.$t('month').split('{}')[1] }}</span>
 				</p>
-				<p class="day">{{ '%i18n:@day%'.split('{}')[0] }}{{ day }}{{ '%i18n:@day%'.split('{}')[1] }}</p>
+				<p class="day">{{ this.$t('day').split('{}')[0] }}{{ day }}{{ this.$t('day').split('{}')[1] }}</p>
 				<p class="week-day">{{ weekDay }}</p>
 			</div>
 			<div class="info">
 				<div>
-					<p>%i18n:@today%<b>{{ dayP.toFixed(1) }}%</b></p>
+					<p>{{ $t('today') }}<b>{{ dayP.toFixed(1) }}%</b></p>
 					<div class="meter">
 						<div class="val" :style="{ width: `${dayP}%` }"></div>
 					</div>
 				</div>
 				<div>
-					<p>%i18n:@this-month%<b>{{ monthP.toFixed(1) }}%</b></p>
+					<p>{{ $t('this-month') }}<b>{{ monthP.toFixed(1) }}%</b></p>
 					<div class="meter">
 						<div class="val" :style="{ width: `${monthP}%` }"></div>
 					</div>
 				</div>
 				<div>
-					<p>%i18n:@this-year%<b>{{ yearP.toFixed(1) }}%</b></p>
+					<p>{{ $t('this-year') }}<b>{{ yearP.toFixed(1) }}%</b></p>
 					<div class="meter">
 						<div class="val" :style="{ width: `${yearP}%` }"></div>
 					</div>
@@ -37,12 +37,15 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
+import i18n from '../../../i18n';
+
 export default define({
 	name: 'calendar',
 	props: () => ({
 		design: 0
 	})
 }).extend({
+	i18n: i18n('common/views/widgets/calendar.vue'),
 	data() {
 		return {
 			now: new Date(),
@@ -85,13 +88,13 @@ export default define({
 			this.month = nm + 1;
 			this.day = nd;
 			this.weekDay = [
-				'%i18n:common.weekday.sunday%',
-				'%i18n:common.weekday.monday%',
-				'%i18n:common.weekday.tuesday%',
-				'%i18n:common.weekday.wednesday%',
-				'%i18n:common.weekday.thursday%',
-				'%i18n:common.weekday.friday%',
-				'%i18n:common.weekday.saturday%'
+				this.$t('@.weekday.sunday'),
+				this.$t('@.weekday.monday'),
+				this.$t('@.weekday.tuesday'),
+				this.$t('@.weekday.wednesday'),
+				this.$t('@.weekday.thursday'),
+				this.$t('@.weekday.friday'),
+				this.$t('@.weekday.saturday')
 			][now.getDay()];
 
 			const dayNumer   = now.getTime() - new Date(ny, nm, nd).getTime();

src/client/app/common/views/widgets/donation.vue

@@ -2,11 +2,11 @@
 <div>
 	<mk-widget-container :show-header="false">
 		<article class="dolfvtibguprpxxhfndqaosjitixjohx">
-			<h1><fa icon="heart"/>%i18n:@title%</h1>
+			<h1><fa icon="heart"/>{{ $t('title') }}</h1>
 			<p v-if="meta">
-				{{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }}
+				{{ this.$t('text').substr(0, this.$t('text').indexOf('{')) }}
 				<a :href="'mailto:' + meta.maintainer.email">{{ meta.maintainer.name }}</a>
-				{{ '%i18n:@text%'.substr('%i18n:@text%'.indexOf('}') + 1) }}
+				{{ this.$t('text').substr(this.$t('text').indexOf('}') + 1) }}
 			</p>
 		</article>
 	</mk-widget-container>
@@ -15,16 +15,19 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
+import i18n from '../../../i18n';
+
 export default define({
 	name: 'donation'
 }).extend({
+	i18n: i18n('common/views/widgets/donation.vue'),
 	data() {
 		return {
 			meta: null
 		};
 	},
 	created() {
-		(this as any).os.getMeta().then(meta => {
+		this.$root.getMeta().then(meta => {
 			this.meta = meta;
 		});
 	}

src/client/app/common/views/widgets/hashtags.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mkw-hashtags">
 	<mk-widget-container :show-header="!props.compact">
-		<template slot="header"><fa icon="hashtag"/>%i18n:@title%</template>
+		<template slot="header"><fa icon="hashtag"/>{{ $t('title') }}</template>
 
 		<div class="mkw-hashtags--body" :data-mobile="platform == 'mobile'">
 			<mk-trends/>
@@ -12,6 +12,7 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
+import i18n from '../../../i18n';
 
 export default define({
 	name: 'hashtags',
@@ -19,6 +20,7 @@ export default define({
 		compact: false
 	})
 }).extend({
+	i18n: i18n('common/views/widgets/hashtags.vue'),
 	methods: {
 		func() {
 			this.props.compact = !this.props.compact;

src/client/app/common/views/widgets/memo.vue

@@ -1,11 +1,11 @@
 <template>
 <div class="mkw-memo">
 	<mk-widget-container :show-header="!props.compact">
-		<template slot="header"><fa :icon="['far', 'sticky-note']"/>%i18n:@title%</template>
+		<template slot="header"><fa :icon="['far', 'sticky-note']"/>{{ $t('title') }}</template>
 
 		<div class="mkw-memo--body">
-			<textarea v-model="text" placeholder="%i18n:@memo%" @input="onChange"></textarea>
-			<button @click="saveMemo" :disabled="!changed">%i18n:@save%</button>
+			<textarea v-model="text" :placeholder="$t('placeholder')" @input="onChange"></textarea>
+			<button @click="saveMemo" :disabled="!changed">{{ $t('save') }}</button>
 		</div>
 	</mk-widget-container>
 </div>
@@ -13,6 +13,7 @@
 
 <script lang="ts">
 import define from '../../define-widget';
+import i18n from '../../../i18n';
 
 export default define({
 	name: 'memo',
@@ -20,6 +21,7 @@ export default define({
 		compact: false
 	})
 }).extend({
+	i18n: i18n('common/views/widgets/memo.vue'),
 	data() {
 		return {
 			text: null,

src/client/app/common/views/widgets/photo-stream.vue

@@ -1,25 +1,29 @@
 <template>
 <div class="mkw-photo-stream" :class="$style.root" :data-melt="props.design == 2">
 	<mk-widget-container :show-header="props.design == 0" :naked="props.design == 2">
-		<template slot="header"><fa icon="camera"/>%i18n:@title%</template>
+		<template slot="header"><fa icon="camera"/>{{ $t('title') }}</template>
 
-		<p :class="$style.fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:common.loading%<mk-ellipsis/></p>
+		<p :class="$style.fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
 		<div :class="$style.stream" v-if="!fetching && images.length > 0">
 			<div v-for="image in images" :class="$style.img" :style="`background-image: url(${image.thumbnailUrl || image.url})`"></div>
 		</div>
-		<p :class="$style.empty" v-if="!fetching && images.length == 0">%i18n:@no-photos%</p>
+		<p :class="$style.empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p>
 	</mk-widget-container>
 </div>
 </template>
 
 <script lang="ts">
 import define from '../../../common/define-widget';
+import i18n from '../../../i18n';
+
 export default define({
 	name: 'photo-stream',
 	props: () => ({
 		design: 0
 	})
 }).extend({
+	i18n: i18n('common/views/widgets/photo-stream.vue'),
+
 	data() {
 		return {
 			images: [],
@@ -28,11 +32,11 @@ export default define({
 		};
 	},
 	mounted() {
-		this.connection = (this as any).os.stream.useSharedConnection('main');
+		this.connection = this.$root.stream.useSharedConnection('main');
 
 		this.connection.on('driveFileCreated', this.onDriveFileCreated);
 
-		(this as any).api('drive/stream', {
+		this.$root.api('drive/stream', {
 			type: 'image/*',
 			limit: 9
 		}).then(images => {

src/client/app/common/views/widgets/posts-monitor.vue

@@ -1,8 +1,8 @@
 <template>
 <div class="mkw-posts-monitor">
 	<mk-widget-container :show-header="props.design == 0" :naked="props.design == 2">
-		<template slot="header"><fa icon="chart-line"/>%i18n:@title%</template>
-		<button slot="func" @click="toggle" title="%i18n:@toggle%"><fa icon="sort"/></button>
+		<template slot="header"><fa icon="chart-line"/>{{ $t('title') }}</template>
+		<button slot="func" @click="toggle" :title="$t('toggle')"><fa icon="sort"/></button>
 
 		<div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }">
 			<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" v-show="props.view != 2">
@@ -70,15 +70,18 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
+import i18n from '../../../i18n';
 import * as uuid from 'uuid';
 
 export default define({
-	name: 'server',
+	name: 'posts-monitor',
 	props: () => ({
 		design: 0,
 		view: 0
 	})
 }).extend({
+	i18n: i18n('common/views/widgets/posts-monitor.vue'),
+
 	data() {
 		return {
 			connection: null,
@@ -109,7 +112,7 @@ export default define({
 		}
 	},
 	mounted() {
-		this.connection = (this as any).os.stream.useSharedConnection('notesStats');
+		this.connection = this.$root.stream.useSharedConnection('notesStats');
 
 		this.connection.on('stats', this.onStats);
 		this.connection.on('statsLog', this.onStatsLog);

src/client/app/common/views/widgets/rss.vue

@@ -5,7 +5,7 @@
 		<button slot="func" title="設定" @click="setting"><fa icon="cog"/></button>
 
 		<div class="mkw-rss--body" :data-mobile="platform == 'mobile'">
-			<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:common.loading%<mk-ellipsis/></p>
+			<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
 			<div class="feed" v-else>
 				<a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
 			</div>
@@ -16,6 +16,8 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
+import i18n from '../../../i18n';
+
 export default define({
 	name: 'rss',
 	props: () => ({
@@ -23,6 +25,7 @@ export default define({
 		url: 'http://news.yahoo.co.jp/pickup/rss.xml'
 	})
 }).extend({
+	i18n: i18n(),
 	data() {
 		return {
 			items: [],

src/client/app/common/views/widgets/server.vue

@@ -1,10 +1,10 @@
 <template>
 <div class="mkw-server">
 	<mk-widget-container :show-header="props.design == 0" :naked="props.design == 2">
-		<template slot="header"><fa icon="server"/>%i18n:@title%</template>
-		<button slot="func" @click="toggle" title="%i18n:@toggle%"><fa icon="sort"/></button>
+		<template slot="header"><fa icon="server"/>{{ $t('title') }}</template>
+		<button slot="func" @click="toggle" :title="$t('toggle')"><fa icon="sort"/></button>
 
-		<p :class="$style.fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:common.loading%<mk-ellipsis/></p>
+		<p :class="$style.fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
 		<template v-if="!fetching">
 			<x-cpu-memory v-show="props.view == 0" :connection="connection"/>
 			<x-cpu v-show="props.view == 1" :connection="connection" :meta="meta"/>
@@ -19,6 +19,7 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
+import i18n from '../../../i18n';
 import XCpuMemory from './server.cpu-memory.vue';
 import XCpu from './server.cpu.vue';
 import XMemory from './server.memory.vue';
@@ -33,6 +34,8 @@ export default define({
 		view: 0
 	})
 }).extend({
+	i18n: i18n('common/views/widgets/server.vue'),
+
 	components: {
 		XCpuMemory,
 		XCpu,
@@ -49,12 +52,12 @@ export default define({
 		};
 	},
 	mounted() {
-		(this as any).os.getMeta().then(meta => {
+		this.$root.getMeta().then(meta => {
 			this.meta = meta;
 			this.fetching = false;
 		});
 
-		this.connection = (this as any).os.stream.useSharedConnection('serverStats');
+		this.connection = this.$root.stream.useSharedConnection('serverStats');
 	},
 	beforeDestroy() {
 		this.connection.dispose();

src/client/app/common/views/widgets/slideshow.vue

@@ -2,10 +2,10 @@
 <div class="mkw-slideshow" :data-mobile="platform == 'mobile'">
 	<div @click="choose">
 		<p v-if="props.folder === undefined">
-			<template v-if="isCustomizeMode">%i18n:@folder-customize-mode%</template>
-			<template v-else>%i18n:@folder%</template>
+			<template v-if="isCustomizeMode">{{ $t('folder-customize-mode') }}</template>
+			<template v-else>{{ $t('folder') }}</template>
 		</p>
-		<p v-if="props.folder !== undefined && images.length == 0 && !fetching">%i18n:@no-image%</p>
+		<p v-if="props.folder !== undefined && images.length == 0 && !fetching">{{ $t('no-image') }}</p>
 		<div ref="slideA" class="slide a"></div>
 		<div ref="slideB" class="slide b"></div>
 	</div>
@@ -15,6 +15,8 @@
 <script lang="ts">
 import * as anime from 'animejs';
 import define from '../../../common/define-widget';
+import i18n from '../../../i18n';
+
 export default define({
 	name: 'slideshow',
 	props: () => ({
@@ -22,6 +24,8 @@ export default define({
 		size: 0
 	})
 }).extend({
+	i18n: i18n('common/views/widgets/slideshow.vue'),
+
 	data() {
 		return {
 			images: [],
@@ -97,7 +101,7 @@ export default define({
 		fetch() {
 			this.fetching = true;
 
-			(this as any).api('drive/files', {
+			this.$root.api('drive/files', {
 				folderId: this.props.folder,
 				type: 'image/*',
 				limit: 100
@@ -110,7 +114,7 @@ export default define({
 			});
 		},
 		choose() {
-			(this as any).apis.chooseDriveFolder().then(folder => {
+			this.$chooseDriveFolder().then(folder => {
 				this.props.folder = folder ? folder.id : null;
 				this.save();
 				this.fetch();

src/client/app/common/views/widgets/tips.vue

@@ -7,39 +7,44 @@
 <script lang="ts">
 import * as anime from 'animejs';
 import define from '../../../common/define-widget';
-
-const tips = [
-	'%i18n:@tips-line1%',
-	'%i18n:@tips-line2%',
-	'%i18n:@tips-line3%',
-	'%i18n:@tips-line4%',
-	'%i18n:@tips-line5%',
-	'%i18n:@tips-line6%',
-	'%i18n:@tips-line7%',
-	'%i18n:@tips-line8%',
-	'%i18n:@tips-line9%',
-	'%i18n:@tips-line10%',
-	'%i18n:@tips-line11%',
-	'%i18n:@tips-line13%',
-	'%i18n:@tips-line14%',
-	'%i18n:@tips-line17%',
-	'%i18n:@tips-line19%',
-	'%i18n:@tips-line20%',
-	'%i18n:@tips-line21%',
-	'%i18n:@tips-line23%',
-	'%i18n:@tips-line24%',
-	'%i18n:@tips-line25%'
-]
+import i18n from '../../../i18n';
 
 export default define({
 	name: 'tips'
 }).extend({
+	i18n: i18n('common/views/widgets/tips.vue'),
+
 	data() {
 		return {
+			tips: [],
 			tip: null,
 			clock: null
 		};
 	},
+	created() {
+		this.tips =  [
+			this.$t('tips-line1'),
+			this.$t('tips-line2'),
+			this.$t('tips-line3'),
+			this.$t('tips-line4'),
+			this.$t('tips-line5'),
+			this.$t('tips-line6'),
+			this.$t('tips-line7'),
+			this.$t('tips-line8'),
+			this.$t('tips-line9'),
+			this.$t('tips-line10'),
+			this.$t('tips-line11'),
+			this.$t('tips-line13'),
+			this.$t('tips-line14'),
+			this.$t('tips-line17'),
+			this.$t('tips-line19'),
+			this.$t('tips-line20'),
+			this.$t('tips-line21'),
+			this.$t('tips-line23'),
+			this.$t('tips-line24'),
+			this.$t('tips-line25')
+		];
+	},
 	mounted() {
 		this.$nextTick(() => {
 			this.set();
@@ -52,7 +57,7 @@ export default define({
 	},
 	methods: {
 		set() {
-			this.tip = tips[Math.floor(Math.random() * tips.length)];
+			this.tip = this.tips[Math.floor(Math.random() * this.tips.length)];
 		},
 		change() {
 			anime({

src/client/app/config.ts

@@ -1,5 +1,6 @@
 declare const _LANG_: string;
 declare const _LANGS_: string;
+declare const _LOCALE_: { [key: string]: any };
 declare const _THEME_COLOR_: string;
 declare const _COPYRIGHT_: string;
 declare const _VERSION_: string;
@@ -16,6 +17,7 @@ export const apiUrl = url + '/api';
 export const wsUrl = url.replace('http://', 'ws://').replace('https://', 'wss://') + '/streaming';
 export const lang = _LANG_;
 export const langs = _LANGS_;
+export const locale = _LOCALE_;
 export const themeColor = _THEME_COLOR_;
 export const copyright = _COPYRIGHT_;
 export const version = _VERSION_;

src/client/app/desktop/api/choose-drive-file.ts

@@ -1,29 +0,0 @@
-import OS from '../../mios';
-import { url } from '../../config';
-import MkChooseFileFromDriveWindow from '../views/components/choose-file-from-drive-window.vue';
-
-export default (os: OS) => opts => {
-	return new Promise((res, rej) => {
-		const o = opts || {};
-
-		if (document.body.clientWidth > 800) {
-			const w = os.new(MkChooseFileFromDriveWindow, {
-				title: o.title,
-				multiple: o.multiple,
-				initFolder: o.currentFolder
-			});
-			w.$once('selected', file => {
-				res(file);
-			});
-			document.body.appendChild(w.$el);
-		} else {
-			window['cb'] = file => {
-				res(file);
-			};
-
-			window.open(url + `/selectdrive?multiple=${o.multiple}`,
-				'choose_drive_window',
-				'height=500, width=800');
-		}
-	});
-};

src/client/app/desktop/api/choose-drive-folder.ts

@@ -1,16 +0,0 @@
-import OS from '../../mios';
-import MkChooseFolderFromDriveWindow from '../views/components/choose-folder-from-drive-window.vue';
-
-export default (os: OS) => opts => {
-	return new Promise((res, rej) => {
-		const o = opts || {};
-		const w = os.new(MkChooseFolderFromDriveWindow, {
-			title: o.title,
-			initFolder: o.currentFolder
-		});
-		w.$once('selected', folder => {
-			res(folder);
-		});
-		document.body.appendChild(w.$el);
-	});
-};

src/client/app/desktop/api/contextmenu.ts

@@ -1,15 +0,0 @@
-import OS from '../../mios';
-import Ctx from '../views/components/context-menu.vue';
-
-export default (os: OS) => (e, menu, opts?) => {
-	const o = opts || {};
-	const vm = os.new(Ctx, {
-		menu,
-		x: e.pageX - window.pageXOffset,
-		y: e.pageY - window.pageYOffset,
-	});
-	vm.$once('closed', () => {
-		if (o.closed) o.closed();
-	});
-	document.body.appendChild(vm.$el);
-};

src/client/app/desktop/api/dialog.ts

@@ -1,18 +0,0 @@
-import OS from '../../mios';
-import Dialog from '../views/components/dialog.vue';
-
-export default (os: OS) => opts => {
-	return new Promise<string>((res, rej) => {
-		const o = opts || {};
-		const d = os.new(Dialog, {
-			title: o.title,
-			text: o.text,
-			modal: o.modal,
-			buttons: o.actions
-		});
-		d.$once('clicked', id => {
-			res(id);
-		});
-		document.body.appendChild(d.$el);
-	});
-};

src/client/app/desktop/api/input.ts

@@ -1,19 +0,0 @@
-import OS from '../../mios';
-import InputDialog from '../views/components/input-dialog.vue';
-
-export default (os: OS) => opts => {
-	return new Promise<string>((res, rej) => {
-		const o = opts || {};
-		const d = os.new(InputDialog, {
-			title: o.title,
-			placeholder: o.placeholder,
-			default: o.default,
-			type: o.type || 'text',
-			allowEmpty: o.allowEmpty
-		});
-		d.$once('done', text => {
-			res(text);
-		});
-		document.body.appendChild(d.$el);
-	});
-};

src/client/app/desktop/api/notify.ts

@@ -1,9 +0,0 @@
-import OS from '../../mios';
-import Notification from '../views/components/ui-notification.vue';
-
-export default (os: OS) => message => {
-	const vm = os.new(Notification, {
-		message
-	});
-	document.body.appendChild(vm.$el);
-};

src/client/app/desktop/api/post.ts

@@ -1,22 +0,0 @@
-import OS from '../../mios';
-import PostFormWindow from '../views/components/post-form-window.vue';
-import RenoteFormWindow from '../views/components/renote-form-window.vue';
-
-export default (os: OS) => opts => {
-	const o = opts || {};
-	if (o.renote) {
-		const vm = os.new(RenoteFormWindow, {
-			note: o.renote,
-			animation: o.animation == null ? true : o.animation
-		});
-		if (o.cb) vm.$once('closed', o.cb);
-		document.body.appendChild(vm.$el);
-	} else {
-		const vm = os.new(PostFormWindow, {
-			reply: o.reply,
-			animation: o.animation == null ? true : o.animation
-		});
-		if (o.cb) vm.$once('closed', o.cb);
-		document.body.appendChild(vm.$el);
-	}
-};

src/client/app/desktop/api/update-avatar.ts

@@ -1,15 +1,14 @@
-import OS from '../../mios';
 import { apiUrl } from '../../config';
 import CropWindow from '../views/components/crop-window.vue';
 import ProgressDialog from '../views/components/progress-dialog.vue';
 
-export default (os: OS) => {
+export default ($root: any) => {
 
 	const cropImage = file => new Promise((resolve, reject) => {
 
 		const regex = RegExp('\.(jpg|jpeg|png|gif|webp|bmp|tiff)$');
 		if (!regex.test(file.name) ) {
-			os.apis.dialog({
+			$root.$dialog({
 				title: '%fa:info-circle% %i18n:desktop.invalid-filetype%',
 				text: null,
 				actions: [{
@@ -19,7 +18,7 @@ export default (os: OS) => {
 			return reject('invalid-filetype');
 		}
 
-		const w = os.new(CropWindow, {
+		const w = $root.new(CropWindow, {
 			image: file,
 			title: '%i18n:desktop.avatar-crop-title%',
 			aspectRatio: 1 / 1
@@ -27,14 +26,14 @@ export default (os: OS) => {
 
 		w.$once('cropped', blob => {
 			const data = new FormData();
-			data.append('i', os.store.state.i.token);
+			data.append('i', $root.$store.state.i.token);
 			data.append('file', blob, file.name + '.cropped.png');
 
-			os.api('drive/folders/find', {
+			$root.api('drive/folders/find', {
 				name: '%i18n:desktop.avatar%'
 			}).then(avatarFolder => {
 				if (avatarFolder.length === 0) {
-					os.api('drive/folders/create', {
+					$root.api('drive/folders/create', {
 						name: '%i18n:desktop.avatar%'
 					}).then(iconFolder => {
 						resolve(upload(data, iconFolder));
@@ -55,7 +54,7 @@ export default (os: OS) => {
 	});
 
 	const upload = (data, folder) => new Promise((resolve, reject) => {
-		const dialog = os.new(ProgressDialog, {
+		const dialog = $root.new(ProgressDialog, {
 			title: '%i18n:desktop.uploading-avatar%'
 		});
 		document.body.appendChild(dialog.$el);
@@ -79,19 +78,19 @@ export default (os: OS) => {
 	});
 
 	const setAvatar = file => {
-		return os.api('i/update', {
+		return $root.api('i/update', {
 			avatarId: file.id
 		}).then(i => {
-			os.store.commit('updateIKeyValue', {
+			$root.$store.commit('updateIKeyValue', {
 				key: 'avatarId',
 				value: i.avatarId
 			});
-			os.store.commit('updateIKeyValue', {
+			$root.$store.commit('updateIKeyValue', {
 				key: 'avatarUrl',
 				value: i.avatarUrl
 			});
 
-			os.apis.dialog({
+			$root.$dialog({
 				title: '%fa:info-circle% %i18n:desktop.avatar-updated%',
 				text: null,
 				actions: [{
@@ -106,7 +105,7 @@ export default (os: OS) => {
 	return (file = null) => {
 		const selectedFile = file
 			? Promise.resolve(file)
-			: os.apis.chooseDriveFile({
+			: $root.$chooseDriveFile({
 				multiple: false,
 				title: '%fa:image% %i18n:desktop.choose-avatar%'
 			});

src/client/app/desktop/api/update-banner.ts

@@ -1,15 +1,14 @@
-import OS from '../../mios';
 import { apiUrl } from '../../config';
 import CropWindow from '../views/components/crop-window.vue';
 import ProgressDialog from '../views/components/progress-dialog.vue';
 
-export default (os: OS) => {
+export default ($root: any) => {
 
 	const cropImage = file => new Promise((resolve, reject) => {
 
 		const regex = RegExp('\.(jpg|jpeg|png|gif|webp|bmp|tiff)$');
 		if (!regex.test(file.name) ) {
-			os.apis.dialog({
+			$root.dialog({
 				title: '%fa:info-circle% %i18n:desktop.invalid-filetype%',
 				text: null,
 				actions: [{
@@ -19,7 +18,7 @@ export default (os: OS) => {
 			return reject('invalid-filetype');
 		}
 
-		const w = os.new(CropWindow, {
+		const w = $root.new(CropWindow, {
 			image: file,
 			title: '%i18n:desktop.banner-crop-title%',
 			aspectRatio: 16 / 9
@@ -27,14 +26,14 @@ export default (os: OS) => {
 
 		w.$once('cropped', blob => {
 			const data = new FormData();
-			data.append('i', os.store.state.i.token);
+			data.append('i', $root.$store.state.i.token);
 			data.append('file', blob, file.name + '.cropped.png');
 
-			os.api('drive/folders/find', {
+			$root.api('drive/folders/find', {
 				name: '%i18n:desktop.banner%'
 			}).then(bannerFolder => {
 				if (bannerFolder.length === 0) {
-					os.api('drive/folders/create', {
+					$root.api('drive/folders/create', {
 						name: '%i18n:desktop.banner%'
 					}).then(iconFolder => {
 						resolve(upload(data, iconFolder));
@@ -55,7 +54,7 @@ export default (os: OS) => {
 	});
 
 	const upload = (data, folder) => new Promise((resolve, reject) => {
-		const dialog = os.new(ProgressDialog, {
+		const dialog = $root.new(ProgressDialog, {
 			title: '%i18n:desktop.uploading-banner%'
 		});
 		document.body.appendChild(dialog.$el);
@@ -79,19 +78,19 @@ export default (os: OS) => {
 	});
 
 	const setBanner = file => {
-		return os.api('i/update', {
+		return $root.api('i/update', {
 			bannerId: file.id
 		}).then(i => {
-			os.store.commit('updateIKeyValue', {
+			$root.$store.commit('updateIKeyValue', {
 				key: 'bannerId',
 				value: i.bannerId
 			});
-			os.store.commit('updateIKeyValue', {
+			$root.$store.commit('updateIKeyValue', {
 				key: 'bannerUrl',
 				value: i.bannerUrl
 			});
 
-			os.apis.dialog({
+			$root.$dialog({
 				title: '%fa:info-circle% %i18n:desktop.banner-updated%',
 				text: null,
 				actions: [{
@@ -106,7 +105,7 @@ export default (os: OS) => {
 	return (file = null) => {
 		const selectedFile = file
 			? Promise.resolve(file)
-			: os.apis.chooseDriveFile({
+			: $root.$chooseDriveFile({
 				multiple: false,
 				title: '%fa:image% %i18n:desktop.choose-banner%'
 			});