splash animation

2020-05-10 13:26:07 +09:00 · 2020-05-10 13:26:07 +09:00 · a4582bb18a
commit a4582bb18a
parent 25e99725d2
12 changed files with 403 additions and 308 deletions
--- a/app/about.html
+++ b/app/about.html
@ -1,15 +1,14 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="ja">
-
 	<head>
 		<title>TheDesk</title>
-    <meta content="width=device-width,initial-scale=1.0" name="viewport">
-    <link href="./node_modules/materialize-css/dist/css/materialize.css" type="text/css" rel="stylesheet">
-    <link href='./css/font-awesome.css' rel='stylesheet' type='text/css'>
-    <link href="./css/themes.css" type="text/css" rel="stylesheet">
-    <link href="./css/master.css" type="text/css" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans:300|Baloo+Bhai" rel="stylesheet">
-    <meta charset="utf-8">
+		<meta content="width=device-width,initial-scale=1.0" name="viewport" />
+		<link href="./node_modules/materialize-css/dist/css/materialize.css" type="text/css" rel="stylesheet" />
+		<link href="./css/font-awesome.css" rel="stylesheet" type="text/css" />
+		<link href="./css/themes.css" type="text/css" rel="stylesheet" />
+		<link href="./css/master.css" type="text/css" rel="stylesheet" />
+		<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans:300|Baloo+Bhai" rel="stylesheet" />
+		<meta charset="utf-8" />
 		<style>
 			body {
 				font-family: 'Open Sans';
@ -84,11 +83,11 @@
 		</style>
 	</head>

-<body class="center " style="overflow:hidden">
+	<body class="center" style="overflow: hidden;">
 		<script type="text/javascript" src="./node_modules/jquery/dist/jquery.js"></script>
 		<script type="text/javascript" src="./js/platform/first-not-view.js"></script>
 		<script type="text/javascript" src="./node_modules/materialize-css/dist/js/materialize.js"></script>
-    <img src="./img/desk.svg" style="max-width:62%;">
+		<img src="./img/desk.svg" style="max-width: 62%;" />
 		<h5>TheDesk</h5>
 		<div class="container">
 			<div class="area-name1">Display version</div>
@ -104,32 +103,37 @@
 			<div class="area-name6">Node.js</div>
 			<div class="area-data6" id="node"></div>
 		</div>
-    <div class="cp">Copyright &copy; TheDesk 2018<br>
-        Main developer(author): <a href="https://cutls.com/@Cutls" target="_blank">Cutls P</a><br>
-        Thanks:<a href="https://minohdon.jp/@toneji" target="_blank">toneji</a>/<a
-            href="https://popon.pptdn.jp/@popn_ja" target="_blank">popn_ja</a>/<a href="https://pl.kpherox.dev/kPherox"
-            target="_blank">kPherox</a> and all users
-        <img draggable="false" style="width:0.8rem;top: 1px;margin-left: 1px;position: relative;" alt="❤️"
-            title=":heart:" src="https://twemoji.maxcdn.com/2/72x72/2764.png">
-        <br><a href="https://thedesk.top" target="_blank">Web site</a></div>
-    <button onclick="window.close()" class="btn waves-effect indigo" style="width:calc(100% - 10px);"><i
-            class="material-icons left">close</i>Close</button>
+		<div class="cp">
+			Copyright &copy; TheDesk 2018<br />
+			Main developer(author): <a href="https://cutls.com/@Cutls" target="_blank">Cutls P</a><br />
+			Thanks:<a href="https://minohdon.jp/@toneji" target="_blank">toneji</a>/<a href="https://popon.pptdn.jp/@popn_ja" target="_blank">popn_ja</a>/<a
+				href="https://pl.kpherox.dev/kPherox"
+				target="_blank"
+				>kPherox</a
+			>
+			and all users
+			<img draggable="false" style="width: 0.8rem; top: 1px; margin-left: 1px; position: relative;" alt="❤️" title=":heart:" src="https://twemoji.maxcdn.com/2/72x72/2764.png" />
+			<br /><a href="https://thedesk.top" target="_blank">Web site</a>
+		</div>
+		<button onclick="window.close()" class="btn waves-effect indigo" style="width: calc(100% - 10px);"><i class="material-icons left">close</i>Close</button>
 		<script type="text/javascript" src="./js/ui/theme.js"></script>
 		<script>
-        var about = JSON.parse(localStorage.getItem("about"));
-        $("#now").text(localStorage.getItem("ver"));
-        $("#node").text(about[0]);
-        $("#chrome").text(about[1]);
-        $("#electron").text(about[2]);
+			var about = JSON.parse(localStorage.getItem('about'))
+			$('#now').text(localStorage.getItem('ver'))
+			$('#node').text(about[0])
+			$('#chrome').text(about[1])
+			$('#electron').text(about[2])
 			if (location.search) {
-            var m = location.search.match(/\?ver=([a-zA-Z-0-9.]+)/);
-            var ver = m[1];
-            $("#ver").text(ver);
+				var m = location.search.match(/\?ver=([a-zA-Z-0-9.]+)/)
+				var ver = m[1]
+				$('#ver').text(ver)
 			}
-        $("#hash").html('<a href="https://github.com/cutls/TheDesk/commits/' + about[3] + '" target="_blank">' + about[3].slice(0, 7) + '</a>');
-        $(document).on('click', 'a', e => {
-            var url = $(e.target).attr('href');
-            postMessage(["openUrl", url], "*")
-            return false;
-        });
+			$('#hash').html('<a href="https://github.com/cutls/TheDesk/commits/' + about[3] + '" target="_blank">' + about[3].slice(0, 7) + '</a>')
+			$(document).on('click', 'a', (e) => {
+				var url = $(e.target).attr('href')
+				postMessage(['openUrl', url], '*')
+				return false
+			})
 		</script>
+	</body>
+</html>
--- a/app/css/master.css
+++ b/app/css/master.css
@ -563,7 +563,7 @@ textarea {
 	font-family: 'Open Sans';
 	font-style: normal;
 	font-weight: 300;
-	src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN_r8OUuhp.woff2) format('woff2');
+	src: local('Open Sans Light'), local('OpenSans-Light'), url('./fonts/OpenSans-Light.ttf') format('truetype');
 	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
@font-face {
--- a/app/css/userdata.css
+++ b/app/css/userdata.css
@ -1,7 +1,7 @@
 /*アイコンをクリックした時とかにでてくるユーザーデータ*/
 #his-data {
  background-repeat: no-repeat;
-  background-image: url("../../loading.svg");
+  background-image: url("../img/loading.svg");
  overflow-y: hidden;
 }
 #his-data .btn .material-icons{
--- a/app/fonts/OpenSans-Light.ttf
+++ b/app/fonts/OpenSans-Light.ttf
--- a/app/img/desk-animation.svg
+++ b/app/img/desk-animation.svg
@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 4096 4096" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="TheDesk">
+        <g id="back">
+            <g transform="matrix(1,0,0,1.53232,-11.8871,-1144.65)">
+                <rect x="1044.02" y="1686.36" width="2335.77" height="782.558" style="fill:rgba(255,255,255,0);">
+                    <animate attributeName="fill" begin="0.5s" dur="0.1s" fill="freeze" values="rgba(255,255,255,0);rgba(255,255,255,1)" />
+                </rect>
+            </g>
+            <rect x="1058.89" y="609.971" width="711.146" height="2885.69" style="fill:rgba(255,255,255,0);">
+                <animate attributeName="fill" begin="0.5s" dur="0.1s" fill="freeze" values="rgba(255,255,255,0);rgba(255,255,255,1)" />
+            </rect>
+            <g transform="matrix(1.08582,0,0,1,-142.973,0)">
+                <rect x="1665.9" y="1021.89" width="776.607" height="2050.26" style="fill:rgba(255,255,255,0);">
+                    <animate attributeName="fill" begin="0.5s" dur="0.1s" fill="freeze" values="rgba(255,255,255,0);rgba(255,255,255,1)" />
+                </rect>
+            </g>
+        </g>
+        <g transform="matrix(1,0,0,0.998821,0,4.65666)" id="gray">
+            <rect x="678.5" y="128.48" width="450" height="3821.5" style="fill:rgb(84,82,81);"/>
+        </g>
+        <g transform="matrix(0.999978,-5.55112e-17,-2.20005e-08,0.996112,-1237.17,972.039)" id="orange">
+            <rect x="1915.71" y="-583.55" width="450" height="3117.62" style="fill:rgb(240,132,46);" r="3117.62">
+                <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0,1915.71,-583.55" to="-60,1915.71,-583.55" dur="0.5s" repeatCount="1" fill="freeze" />
+            </rect>
+        </g>
+        <g transform="matrix(0.999978,5.55112e-17,-5.55112e-17,0.999978,-1236.96,-1164.58)" id="blue">
+            <rect x="1915.5" y="1775.41" width="450" height="3105.58" style="fill:rgb(54,76,159);" r="3117.62">
+                <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0,1915.71,4881" to="60,1915.71,4881" dur="0.5s" repeatCount="1" fill="freeze" />
+            </rect>
+        </g>
+        <path id="cat" d="M1592.47,2584L2048.94,2584C2048.94,2519.11 2044.31,2506.24 1936.84,2506.24C1954.01,2454.74 2023.79,2330.13 2062.57,2330.13C2096.88,2330.13 2137.81,2332.02 2137.81,2410.3C2137.81,2499.17 2287.37,2642.46 2323.63,2584C2377.67,2496.88 2230.72,2523.45 2230.72,2313.35C2230.72,2025.92 2398.46,2066.84 2398.46,1905.36C2398.46,1824.57 2376.14,1813.66 2376.14,1755.9C2376.14,1679.56 2443.39,1683.99 2430.31,1620.7C2421.27,1576.98 2414.2,1541.92 2408.93,1489.05C2405.19,1451.54 2404,1411.55 2365.03,1413.16C2319.25,1415.05 2301.88,1495.63 2230.72,1501.41C2159.7,1507.18 2099.15,1440.95 2071.66,1450.41C2044.41,1459.79 2052.98,1533.73 2069.14,1586.24C2094.54,1668.78 2149.93,1776.1 2048.94,1792.26C1947.95,1808.42 1774.25,1824.58 1649.02,1990.2C1523.79,2155.82 1528.42,2350.19 1479.36,2410.31C1314.72,2612.08 1146,2529.23 1146,2697.11C1146,2772.27 1273.35,2826.38 1293.55,2802.14C1313.75,2777.9 1121.93,2705.68 1336.56,2620.36C1519.91,2547.46 1536.28,2532.58 1592.47,2584Z" style="fill:rgba(0,0,0,0);">
+            <animate attributeName="fill" begin="0.6s" dur="0.5s" fill="freeze" values="rgba(0,0,0,0);rgba(0,0,0,1)" repeatCount="1" />
+        </path>
+    </g>
+</svg>
--- a/app/img/desk.png
+++ b/app/img/desk.png
--- a/app/img/desk.svg
+++ b/app/img/desk.svg
@ -1,39 +1,26 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-	TheDesk icon, Cutls P.
-	This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/ or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
-->
-<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 4096 4096" style="enable-background:new 0 0 4096 4096;" xml:space="preserve">
-<style type="text/css">
-	.st0{display:none;}
-	.st1{fill:#FFFFFF;}
-	.st2{fill:#545251;stroke:#040000;stroke-miterlimit:10;}
-	.st3{fill:#F0842E;}
-	.st4{fill:#364C9F;}
-	.st5{fill:#FFFFFF;stroke:#040000;stroke-miterlimit:10;}
-	.st6{fill-rule:evenodd;clip-rule:evenodd;fill:#040000;}
-	.st7{fill-rule:evenodd;clip-rule:evenodd;fill:none;}
-</style>
-<g id="レイヤー_1" class="st0">
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 4096 4096" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="TheDesk">
+        <g>
+            <g transform="matrix(1,0,0,1.53232,-11.8871,-1144.65)">
+                <rect x="1044.02" y="1686.36" width="2335.77" height="782.558" style="fill:white;"/>
            </g>
-<g id="レイヤー_2">
-	<polyline class="st1" points="1128.5,650.67 3378,1950 3378,2137 1128.5,3432.67 	"/>
-	<rect x="678.5" y="128.48" class="st2" width="450" height="3821.5"/>
-	
-		<rect x="1915.71" y="-583.55" transform="matrix(0.5 -0.866 0.866 0.5 225.753 2341.5386)" class="st3" width="450" height="3117.62"/>
-	
-		<rect x="1915.5" y="1555.41" transform="matrix(0.5 0.866 -0.866 0.5 3762.031 -299.6245)" class="st4" width="450" height="3105.58"/>
-	<path class="st5" d="M714.5,2953.5"/>
-	<path id="path1891" class="st6" d="M1592.47,2584h456.47c0-64.89-4.63-77.76-112.1-77.76c17.17-51.5,86.95-176.11,125.73-176.11
-		c34.31,0,75.24,1.89,75.24,80.17c0,88.87,149.56,232.16,185.82,173.7c54.04-87.12-92.91-60.55-92.91-270.65
-		c0-287.43,167.74-246.51,167.74-407.99c0-80.79-22.32-91.7-22.32-149.46c0-76.34,67.25-71.91,54.17-135.2
-		c-9.04-43.72-16.11-78.78-21.38-131.65c-3.74-37.51-4.93-77.5-43.9-75.89c-45.78,1.89-63.15,82.47-134.31,88.25
-		c-71.02,5.77-131.57-60.46-159.06-51c-27.25,9.38-18.68,83.32-2.52,135.83c25.4,82.54,80.79,189.86-20.2,206.02
-		c-100.99,16.16-274.69,32.32-399.92,197.94s-120.6,359.99-169.66,420.11C1314.72,2612.08,1146,2529.23,1146,2697.11
-		c0,75.16,127.35,129.27,147.55,105.03c20.2-24.24-171.62-96.46,43.01-181.78C1519.91,2547.46,1536.28,2532.58,1592.47,2584z"/>
-	<rect class="st7" width="4096" height="4096"/>
-	<path class="st1" d="M-58,1122"/>
+            <rect x="1058.89" y="609.971" width="711.146" height="2885.69" style="fill:white;"/>
+            <g transform="matrix(1.08582,0,0,1,-142.973,0)">
+                <rect x="1665.9" y="1021.89" width="776.607" height="2050.26" style="fill:white;"/>
+            </g>
+        </g>
+        <g transform="matrix(1,0,0,0.998821,0,4.65666)">
+            <rect x="678.5" y="128.48" width="450" height="3821.5" style="fill:rgb(84,82,81);"/>
+        </g>
+        <g transform="matrix(0.5,-0.866,0.862652,0.498067,224.046,2340.41)">
+            <rect x="1915.71" y="-583.55" width="450" height="3117.62" style="fill:rgb(240,132,46);"/>
+        </g>
+        <g transform="matrix(0.5,0.866,-0.866,0.5,3757.17,-299.625)">
+            <rect x="1915.5" y="1555.41" width="450" height="3105.58" style="fill:rgb(54,76,159);"/>
+        </g>
+        <path id="cat" d="M1592.47,2584L2048.94,2584C2048.94,2519.11 2044.31,2506.24 1936.84,2506.24C1954.01,2454.74 2023.79,2330.13 2062.57,2330.13C2096.88,2330.13 2137.81,2332.02 2137.81,2410.3C2137.81,2499.17 2287.37,2642.46 2323.63,2584C2377.67,2496.88 2230.72,2523.45 2230.72,2313.35C2230.72,2025.92 2398.46,2066.84 2398.46,1905.36C2398.46,1824.57 2376.14,1813.66 2376.14,1755.9C2376.14,1679.56 2443.39,1683.99 2430.31,1620.7C2421.27,1576.98 2414.2,1541.92 2408.93,1489.05C2405.19,1451.54 2404,1411.55 2365.03,1413.16C2319.25,1415.05 2301.88,1495.63 2230.72,1501.41C2159.7,1507.18 2099.15,1440.95 2071.66,1450.41C2044.41,1459.79 2052.98,1533.73 2069.14,1586.24C2094.54,1668.78 2149.93,1776.1 2048.94,1792.26C1947.95,1808.42 1774.25,1824.58 1649.02,1990.2C1523.79,2155.82 1528.42,2350.19 1479.36,2410.31C1314.72,2612.08 1146,2529.23 1146,2697.11C1146,2772.27 1273.35,2826.38 1293.55,2802.14C1313.75,2777.9 1121.93,2705.68 1336.56,2620.36C1519.91,2547.46 1536.28,2532.58 1592.47,2584Z" style="fill:rgb(4,0,0);"/>
+        <rect x="0" y="0" width="4096" height="4096" style="fill:none;"/>
    </g>
 </svg>
--- a/app/img/desk512.png
+++ b/app/img/desk512.png
--- a/app/js/platform/first.js
+++ b/app/js/platform/first.js
@ -1,4 +1,3 @@
-document.title = 'TheDesk'
 $.strip_tags = function(str, allowed) {
 	if (!str) {
 		return ''
--- a/app/js/platform/preload.js
+++ b/app/js/platform/preload.js
@ -4,6 +4,7 @@ var ipc = electron.ipcRenderer
 //title bar
 const customTitlebar = require('custom-electron-titlebar')
 window.addEventListener('DOMContentLoaded', () => {
+	document.title = 'TheDesk'
 	ipc.send('acsCheck', '')
 	ipc.send('frameCheck', '')
 	ipc.on('frame', function(event, args) {
--- a/app/main.js
+++ b/app/main.js
@ -3,6 +3,10 @@ var dir = 'file://' + __dirname
 var base = dir + '/view/'
 // Electronのモジュール
 const electron = require('electron')
+// アプリケーションをコントロールするモジュール
+const app = electron.app
+// Electronの初期化完了後に実行
+app.on('ready', createWindow)
 const fs = require('fs')
 const language = require('./main/language.js')
 const css = require('./main/css.js')
@ -12,9 +16,6 @@ const np = require('./main/np.js')
 const systemFunc = require('./main/system.js')
 const Menu = electron.Menu
 const join = require('path').join
-
-// アプリケーションをコントロールするモジュール
-const app = electron.app
 // ウィンドウを作成するモジュール
 const BrowserWindow = electron.BrowserWindow
 // メインウィンドウはGCされないようにグローバル宣言
@ -36,6 +37,34 @@ if (!gotTheLock) {
 	})
 }

+// 全てのウィンドウが閉じたら終了
+app.on('window-all-closed', function () {
+	electron.session.defaultSession.clearCache(() => {})
+	app.quit()
+})
+function isFile(file) {
+	try {
+		fs.statSync(file)
+		return true
+	} catch (err) {
+		if (err.code === 'ENOENT') return false
+	}
+}
+function createWindow() {
+	//Opening
+	const package = fs.readFileSync(__dirname + '/package.json')
+	const data = JSON.parse(package)
+	const version = data.version
+	const codename = data.codename
+	var openingWindow = new BrowserWindow({
+		width: 300,
+		height: 400,
+		transparent: false,
+		frame: false,
+		resizable: false,
+	})
+	openingWindow.loadURL(`${__dirname}/opening.html?ver=${version}&codename=${codename}`)
+
 	if (process.argv.indexOf('--dev') === -1) {
 		var packaged = true
 	} else {
@ -57,6 +86,7 @@ if (process.argv.indexOf('--dev') === -1) {
 		)
 		console.log('If it does not show the window, you might forget `npm run construct`.')
 	}
+
 	var info_path = join(app.getPath('userData'), 'window-size.json')
 	var max_info_path = join(app.getPath('userData'), 'max-window-size.json')
 	var lang_path = join(app.getPath('userData'), 'language')
@ -76,7 +106,7 @@ try {
 	} catch (e) {
 		window_size = {
 			width: 1000,
-		height: 750
+			height: 750,
 		} // デフォルトバリュー
 	}
 	var max_window_size
@ -87,17 +117,10 @@ try {
 			width: 'string',
 			height: 'string',
 			x: 'string',
-		y: 'string'
+			y: 'string',
 		} // デフォルトバリュー
 	}
-function isFile(file) {
-	try {
-		fs.statSync(file)
-		return true
-	} catch (err) {
-		if (err.code === 'ENOENT') return false
-	}
-}
+
 	try {
 		var frameRaw = fs.readFileSync(frame_path, 'utf8')
 		if (frameRaw == 'false') {
@ -110,12 +133,7 @@ try {
 	} catch {
 		var frame = true
 	}
-// 全てのウィンドウが閉じたら終了
-app.on('window-all-closed', function() {
-	electron.session.defaultSession.clearCache(() => {})
-	app.quit()
-})
-function createWindow() {
+
 	if (isFile(lang_path)) {
 		var lang = fs.readFileSync(lang_path, 'utf8')
 	} else {
@ -141,59 +159,32 @@ function createWindow() {
 	// メイン画面の表示。ウィンドウの幅、高さを指定できる
 	var platform = process.platform
 	var bit = process.arch
+	var arg = {
+		webPreferences: {
+			webviewTag: true,
+			nodeIntegration: false,
+			contextIsolation: true,
+			preload: join(__dirname, 'js', 'platform', 'preload.js'),
+		},
+		width: window_size.width,
+		height: window_size.height,
+		x: window_size.x,
+		y: window_size.y,
+		show: false,
+		frame: frame,
+	}
 	if (platform == 'linux') {
-		var arg = {
-			webPreferences: {
-				webviewTag: true,
-				nodeIntegration: false,
-				contextIsolation: true,
-				preload: join(__dirname, 'js', 'platform', 'preload.js')
-			},
-			width: window_size.width,
-			height: window_size.height,
-			x: window_size.x,
-			y: window_size.y,
-			icon: __dirname + '/desk.png',
-			show: false,
-			frame: frame,
-			resizable: true
-		}
+		arg.resizable = true
+		arg.icon = __dirname + '/desk.png'
 	} else if (platform == 'win32') {
-		var arg = {
-			webPreferences: {
-				webviewTag: true,
-				nodeIntegration: false,
-				contextIsolation: true,
-				preload: join(__dirname, 'js', 'platform', 'preload.js')
-			},
-			width: window_size.width,
-			height: window_size.height,
-			x: window_size.x,
-			y: window_size.y,
-			simpleFullscreen: true,
-			show: false,
-			frame: frame
-		}
+		arg.simpleFullscreen = true
 	} else if (platform == 'darwin') {
-		var arg = {
-			webPreferences: {
-				webviewTag: true,
-				nodeIntegration: false,
-				contextIsolation: true,
-				preload: join(__dirname, 'js', 'platform', 'preload.js')
-			},
-			width: window_size.width,
-			height: window_size.height,
-			x: window_size.x,
-			y: window_size.y,
-			simpleFullscreen: true,
-			show: false,
-			titleBarStyle: frameTitle,
-			frame: frame,
-		}
+		arg.simpleFullscreen = true
+		arg.titleBarStyle = frameTitle
 	}
 	mainWindow = new BrowserWindow(arg)
 	mainWindow.once('page-title-updated', () => {
+		openingWindow.close()
 		mainWindow.show()
 		console.log('Accessibility: ' + app.accessibilitySupportEnabled)
 		if (window_size.max) {
@ -226,12 +217,7 @@ function createWindow() {
 		// Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) thedesk/18.11.3 Chrome/76.0.3809.146 Electron/6.0.12 Safari/537.36
 		const crypto = require('crypto')
 		const N = 100
-		var ua =
-			'Mastodon client: ' +
-			crypto
-				.randomBytes(N)
-				.toString('base64')
-				.substring(0, N)
+		var ua = 'Mastodon client: ' + crypto.randomBytes(N).toString('base64').substring(0, N)
 	}
 	mainWindow.loadURL(base + lang + '/index.html' + plus, { userAgent: ua })
 	if (!window_size.x && !window_size.y) {
@ -275,14 +261,14 @@ function createWindow() {
 				height: mainWindow.getBounds().height,
 				x: mainWindow.getBounds().x,
 				y: mainWindow.getBounds().y,
-				max: true
+				max: true,
 			}
 		} else {
 			var size = {
 				width: mainWindow.getBounds().width,
 				height: mainWindow.getBounds().height,
 				x: mainWindow.getBounds().x,
-				y: mainWindow.getBounds().y
+				y: mainWindow.getBounds().y,
 			}
 		}
 		fs.writeFileSync(info_path, JSON.stringify(size))
@ -298,9 +284,7 @@ function createWindow() {

 	var platform = process.platform
 	var bit = process.arch
-	Menu.setApplicationMenu(
-		Menu.buildFromTemplate(language.template(lang, mainWindow, packaged, dir, dirname, frame))
-	)
+	Menu.setApplicationMenu(Menu.buildFromTemplate(language.template(lang, mainWindow, packaged, dir, dirname, frame)))
 	if (!frame) {
 		mainWindow.setMenu(null)
 	}
@ -340,10 +324,5 @@ function mouseTrack(mainWindow) {
 	x = xNow
 	y = yNow
 }
-// Electronの初期化完了後に実行
-app.on('ready', createWindow)
-var onError = function(err, response) {
-	console.error(err, response)
-}

 app.setAsDefaultProtocolClient('thedesk')
--- a/app/opening.html
+++ b/app/opening.html
@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="ja">
+	<head>
+		<title>TheDesk</title>
+		<meta content="width=device-width,initial-scale=1.0" name="viewport" />
+		<meta charset="utf-8" />
+		<style>
+			@font-face {
+				font-family: 'Open Sans';
+				font-style: normal;
+				font-weight: 300;
+				src: local('Open Sans Light'), local('OpenSans-Light'), url('./fonts/OpenSans-Light.ttf') format('truetype');
+			}
+			body {
+				font-family: 'Open Sans';
+				-webkit-app-region: drag;
+				cursor: move;
+				padding: 5px;
+				padding-top: 15px;
+				background-color: #222222;
+				color: white;
+				text-align: center;
+			}
+			.loading {
+				animation: throbber-loader 1000ms 300ms infinite ease-out;
+				background: #3d3d3d;
+				display: inline-block;
+				position: relative;
+				text-indent: -9999px;
+				width: 0.9em;
+				height: 1.5em;
+				margin: 0 1.6em;
+			}
+			.loading:before,
+			.loading:after {
+				background: #3d3d3d;
+				content: '\x200B';
+				display: inline-block;
+				width: 0.9em;
+				height: 1.5em;
+				position: absolute;
+				top: 0;
+			}
+			.loading:before {
+				animation: throbber-loader 1000ms 150ms infinite ease-out;
+				left: -1.6em;
+			}
+			.loading:after {
+				animation: throbber-loader 1000ms 450ms infinite ease-out;
+				right: -1.6em;
+			}
+			@keyframes throbber-loader {
+				0% {
+					background: #3d3d3d;
+				}
+				10% {
+					background: #6b9dc8;
+				}
+				40% {
+					background: #3d3d3d;
+				}
+			}
+
+			a,
+			button {
+				-webkit-app-region: no-drag;
+			}
+		</style>
+	</head>
+
+	<body class="center" style="overflow: hidden;">
+		<img src="./img/desk-animation.svg" style="max-width: 62%;" />
+		<h1>TheDesk</h1>
+		<span class="loading"></span>
+		<div class="cp">
+			<span id="ver"></span><br />
+			Copyright &copy; TheDesk 2018
+			<script>
+				if (location.search) {
+					var m = location.search.match(/\?ver=([0-9.]+)&codename=([a-zA-Z]+)/)
+					var ver = m[1]
+					var code = m[2]
+					document.getElementById('ver').innerText = `${ver}(${code})`
+				}
+			</script>
+		</div>
+	</body>
+</html>