Merge pull request #62 from kaizumaki/feature/i18n

vue-i18nを導入、多言語対応

frontend/.eslintrc.js

@@ -3,12 +3,17 @@ module.exports = {
   env: {
     node: true
   },
-  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
+  extends: [
+    'plugin:vue/essential',
+    'plugin:prettier/recommended',
+    'eslint:recommended',
+    '@vue/prettier'
+  ],
   parserOptions: {
     ecmaVersion: 2020
   },
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
   }
-};
+}

frontend/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

frontend/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
-};
+  presets: ['@vue/cli-plugin-babel/preset']
+}

frontend/package.json

@@ -19,6 +19,7 @@
     "html2canvas": "^1.0.0-rc.7",
     "vue": "^2.6.11",
     "vue-gtag": "^1.11.0",
+    "vue-i18n": "^8.22.4",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },

frontend/src/App.vue

@@ -6,13 +6,13 @@
 </template>
 
 <script>
-import CommonFooter from "@/components/CommonFooter";
+import CommonFooter from '@/components/CommonFooter'
 
 export default {
   components: {
     CommonFooter
   }
-};
+}
 </script>
 
 <style>

frontend/src/assets/i18n/ja.json

@@ -0,0 +1,38 @@
+{
+  "title": "発言が終わらないメーター",
+  "lead": "“女性が多い会議”は本当に“時間がかかる”のか？",
+  "lead_sub": "会議中の発言時間を計測・可視化します。",
+  "title_result": "みんなの会議の集計結果",
+  "result_total": "これまでの集計",
+  "result_people": "参加人数",
+  "result_composition": "参加者の構成",
+  "title_meter": "会議中の発言時間を計測・可視化します。",
+  "request_for_measurement": "男性・女性それぞれのスタート、ストップを押して、会議中の発言時間を計測してください。",
+  "consent_to_send_to_server": "統計情報の収集のため、計測結果をサーバに送信します。（会議名は送信されません）。計測ボタンを押すと同意したことになります。",
+  "how_to_use": "使い方",
+  "men": "男性",
+  "women": "女性",
+  "meeting_of": "の会議",
+  "alert_number": "人数の値が不正です。合計して1以上か、0〜500の数値を入力してください。",
+  "your_meeting": "あなたの会議",
+  "title_completed": "結果の送信が完了しました！",
+  "reflected_total": "全体の集計結果に反映されました。",
+  "tweet": "Tweet",
+  "unit": {
+    "meeting": "会議",
+    "people": "人",
+    "minutes": "分",
+    "seconds": "秒"
+  },
+  "button": {
+    "measure": "計測する",
+    "start_meeting": "会議開始",
+    "stop_meeting": "会議終了",
+    "reset_meeting": "リセット",
+    "show_result_again": "もう一度結果を見る",
+    "close": "CLOSE",
+    "download": "画像をDL",
+    "send_data": "結果を送信する",
+    "go_total_result": "集計結果を見る"
+  }
+}

frontend/src/components/CommonFooter.vue

@@ -17,6 +17,6 @@
 
 <script>
 export default {
-  name: "CommonFooter"
-};
+  name: 'CommonFooter'
+}
 </script>

frontend/src/i18n.js

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+const locales = [
+  { //default
+    code: 'ja',
+    iso: 'ja-JP',
+    displayName: '日本語',
+    file: 'ja.json'
+  }
+]
+
+let message = {}
+const locale = locales.filter(
+  v => v.code === window.navigator.language.toLowerCase().split('-')[0]
+)[0] || locales[0]
+
+message[locale.code] = require(`./assets/i18n/${locale.file}`)
+
+Vue.use(VueI18n)
+
+export const i18n = new VueI18n({
+  locale: locale.code,
+  fallbackLocale: 'ja',
+  messages: message
+})

frontend/src/main.js

@@ -1,34 +1,36 @@
-import Vue from "vue";
-import VueGtag from "vue-gtag";
-import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";
-import "@/assets/global.scss";
-import "@/assets/custom.scss";
+import Vue from 'vue'
+import VueGtag from 'vue-gtag'
+import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
+import '@/assets/global.scss'
+import '@/assets/custom.scss'
 
-import App from "./App.vue";
-import router from "./router";
-import store from "./store";
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import { i18n } from '@/i18n'
 
-Vue.config.productionTip = process.env.NODE_ENV === "production";
+Vue.config.productionTip = process.env.NODE_ENV === 'production'
 
-Vue.use(BootstrapVue);
-Vue.use(BootstrapVueIcons);
+Vue.use(BootstrapVue)
+Vue.use(BootstrapVueIcons)
 
 Vue.use(
   VueGtag,
   {
     config: { id: process.env.VUE_APP_GOOGLE_ANALYTICS },
     pageTrackerTemplate(to) {
       return {
-        page_title: "try meter",
+        page_title: 'try meter',
         page_path: to.path
-      };
+      }
     }
   },
   router
-);
+)
 
 new Vue({
   router,
   store,
+  i18n,
   render: h => h(App)
-}).$mount("#app");
+}).$mount('#app')