開発モードで警告を表示するようにするなど

locales/ja-JP.yml

@@ -94,6 +94,8 @@ common:
   verified-user: "公式アカウント"
   disable-animated-mfm: "投稿内の動きのあるテキストを無効にする"
 
+  do-not-use-in-production: 'これは開発ビルドです。本番環境で使用しないでください。'
+
   reversi:
     drawn: "引き分け"
     my-turn: "あなたのターンです"

src/client/app/config.ts

@@ -4,6 +4,7 @@ declare const _THEME_COLOR_: string;
 declare const _COPYRIGHT_: string;
 declare const _VERSION_: string;
 declare const _CODENAME_: string;
+declare const _ENV_: string;
 
 const address = new URL(location.href);
 
@@ -18,3 +19,4 @@ export const themeColor = _THEME_COLOR_;
 export const copyright = _COPYRIGHT_;
 export const version = _VERSION_;
 export const codename = _CODENAME_;
+export const env = _ENV_;

src/client/app/desktop/views/components/ui.header.vue

@@ -1,5 +1,6 @@
 <template>
 <div class="header">
+	<p class="warn" v-if="env != 'production'">%i18n:common.do-not-use-in-production%</p>
 	<mk-special-message/>
 	<div class="main" ref="main">
 		<div class="backdrop"></div>
@@ -28,6 +29,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as anime from 'animejs';
+import { env } from '../../../config';
 
 import XNav from './ui.header.nav.vue';
 import XSearch from './ui.header.search.vue';
@@ -43,7 +45,13 @@ export default Vue.extend({
 		XAccount,
 		XNotifications,
 		XPost,
-		XClock,
+		XClock
+	},
+
+	data() {
+		return {
+			env: env
+		};
 	},
 
 	mounted() {
@@ -119,6 +127,15 @@ root(isDark)
 	width 100%
 	box-shadow 0 1px 1px rgba(#000, 0.075)
 
+	> .warn
+		display block
+		margin 0
+		padding 4px
+		text-align center
+		font-size 12px
+		background #f00
+		color #fff
+
 	> .main
 		height 48px
 

src/client/app/mobile/views/components/ui.header.vue

@@ -1,5 +1,6 @@
 <template>
-<div class="header">
+<div class="header" ref="root">
+	<p class="warn" v-if="env != 'production'">%i18n:common.do-not-use-in-production%</p>
 	<mk-special-message/>
 	<div class="main" ref="main">
 		<div class="backdrop"></div>
@@ -20,6 +21,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as anime from 'animejs';
+import { env } from '../../../config';
 
 export default Vue.extend({
 	props: ['func'],
@@ -27,7 +29,8 @@ export default Vue.extend({
 		return {
 			hasGameInvitation: false,
 			connection: null,
-			connectionId: null
+			connectionId: null,
+			env: env
 		};
 	},
 	computed: {
@@ -39,7 +42,7 @@ export default Vue.extend({
 		}
 	},
 	mounted() {
-		this.$store.commit('setUiHeaderHeight', 48);
+		this.$store.commit('setUiHeaderHeight', this.$refs.root.offsetHeight);
 
 		if (this.$store.getters.isSignedIn) {
 			this.connection = (this as any).os.stream.getConnection();
@@ -133,6 +136,15 @@ root(isDark)
 		height 3px
 		background $theme-color
 
+	> .warn
+		display block
+		margin 0
+		padding 4px
+		text-align center
+		font-size 12px
+		background #f00
+		color #fff
+
 	> .main
 		color rgba(#fff, 0.9)
 

src/client/app/mobile/views/components/ui.vue

@@ -31,7 +31,14 @@ export default Vue.extend({
 			connectionId: null
 		};
 	},
+	watch: {
+		'$store.state.uiHeaderHeight'() {
+			this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
+		}
+	},
 	mounted() {
+		this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
+
 		if (this.$store.getters.isSignedIn) {
 			this.connection = (this as any).os.stream.getConnection();
 			this.connectionId = (this as any).os.stream.use();

webpack.config.ts

@@ -73,7 +73,8 @@ const consts = {
 	_VERSION_: version,
 	_CODENAME_: codename,
 	_LANG_: '%lang%',
-	_LANGS_: Object.keys(locales).map(l => [l, locales[l].meta.lang])
+	_LANGS_: Object.keys(locales).map(l => [l, locales[l].meta.lang]),
+	_ENV_: process.env.NODE_ENV
 };
 
 const _consts: { [ key: string ]: any } = {};