Merge pull request #52 from cutls/WIP-(before-CI)

travis

.gitignore

@@ -6,6 +6,7 @@ TheDesk-*
 app/build
 build
 make.js
+make_js.js
 app/.DS_Store
 .DS_Store
 .vs/*

.travis.yml

@@ -1,31 +1,27 @@
-os: windows
+os: osx
 language: node_js
 node_js:
 - '10.15.2'
 script: node -v
 before_deploy:
-  - cd app
+  - brew update
   - npm install electron-builder -g
+  - cd app
   - npm install
-  - electron-builder --win --ia32
-  - mv ../build/TheDesk-setup.exe ../TheDesk-setup-ia32.exe
-  - mv ../build/TheDesk*.exe ../TheDesk-ia32.exe
-  - electron-builder --win --x64
-  - mv ../build/TheDesk-setup.exe ../TheDesk-setup.exe
-  - mv ../build/TheDesk*.exe ../TheDesk.exe
+  - electron-builder --mac --x64
+  - mv ../build/TheDesk*.dmg ../TheDesk.dmg
+  - mv ../build/TheDesk*.zip ../TheDesk-darwin-x64.zip
   - cd ../
-  - ls
-after_deploy: ls
 deploy:
-  skip_cleanup: true
   provider: releases
+  # GitHub にリリースするための API KEY を暗号化した値
   api_key:
     secure: jndR02p5KRTtcJk18b3YsXL2cC+yzEf1AOqXdpWciF8f3lO5oY01jlxd17xdHIcK7VywSsLVZpLToSdqAoIEhJ5OxEQ/FmA3FlmbwwD6ou13gLa4VGIvsBHveCmKGjVu0Z++atIy76tZYU1SOWFWv4B0ZhnVz2ca2VZynvLgw3YNsPJH7rHO966GXgRkGYJAJ4UvLg3sj/iztVh2FSfbUj5IGO1e/JHJO63wAo1MSQtRjkutVgl/djnBLC6vbL4YHkM3Ynpkx/YQEcxwrmeY0Ra8D5yYDq4MNIDMmZahWC+k4u2eA2Cj2ifBFNxbZvTN75vLwRBp6DsTNHsiqkXrSPDBdNeet31RbwTQ6LtsK8jqmL4S/59dmLcj7uCU2WxyBLPbJdbdZWlqW2ZQvfQY8QVAYy7S3MiHQWQN0oP5wqXk89jcgR42ig/zsqFNPpXHM4mExR7l/gDLPg0j9c3XEF6sWtk3FmJN1i4+B+9kn09b6UKlV7EFPKp8XcFNrz4ZcE9/I8lKwsqLVG2jAXIk7Z9LwDRcAmK5eG348X5zwFtOY6raKIvRw2cn92bPnEI+55v8A4WANS2647GFTgxHj30D0d/sOZmJ5BS34zpdWTgE0AlKg7sOqkncjqoW5J5zCh5Ow7b3KXvEvlAts44mAag8tZTectxMP4iguXvTnv4=
-  file: 
-    - TheDesk.exe
-    - TheDesk-setup.exe
-    - TheDesk-ia32.exe
-    - TheDesk-setup-ia32.exe
+  # Releases ページにアップロードするファイル
+  file:
+    - TheDesk.dmg
+    - TheDesk-darwin-x64.zip
+  skip_cleanup: true
   on:
     repo: cutls/TheDesk
 branches:

README.md

@@ -2,7 +2,6 @@
 
 [![Build Status](https://travis-ci.org/cutls/TheDesk.svg?branch=master)](https://travis-ci.org/cutls/TheDesk)
 [![Crowdin](https://d322cqt584bo4o.cloudfront.net/thedesk/localized.svg)](https://translate.thedesk.top/project/thedesk)  
-[![Server-up time](https://status.cutls.com/badge/?site=thedesk.top)](https://status.cutls.com/)  
 Mastodon/Misskey client for PC(Windows/Linux/macOS)  
 オープンソースSNSマストドン/MisskeyのWindows/Linuxクライアント  
 Download:[TheDesk](https://thedesk.top)  
@@ -11,6 +10,11 @@ Contact me(bug report...):GitHub Issues, mention to [Cutls@kirishima.cloud](http
 
 バグレポートなど:GitHub Issuesや[Cutls@kirishima.cloud](https://kirishima.cloud/@Cutls)へのリプ,または#Deskでトゥートして下さい.  
 
+### Contribute/コントリビュート
+
+Please make a pull request to ***WIP(before CI)*** brunch  
+***WIP(before CI)*** ブランチにプルリクエストをお願いします。
+
 ## License/ライセンス
 
 [GNU General Public License v3.0](https://github.com/cutls/TheDesk/blob/master/LICENSE)  
@@ -52,7 +56,7 @@ Crowdinから翻訳に参加してみませんか？: https://translate.thedesk.
 * sumchecker(in package.json)
 * Ability to read unformated files!(install yourself)
 
-## Contributors/コントリビューター
+## Contributors/主なコントリビューター
 
 macOSビルダー  
 
@@ -62,6 +66,10 @@ Linuxビルダー
 
 * [ぽぷんじゃ](https://popon.pptdn.jp/@popn_ja)
 
+iTunes NowPlayingにアルバムアートワークを付けてくれた人
+
+* [kPherox](https://www.kr-kp.com/)
+
 ## Build/ビルド
 
 Misskey(misskey.xyz) application token is not in cutls/TheDesk  

app/about.html

@@ -76,7 +76,7 @@ a,button{
 <img src="./img/desk.png" style="max-width:70%;">
 <h5>TheDesk</h5>
 <div class='container'>
-    <div class='area-name1'>バージョン</div>
+    <div class='area-name1'>External version</div>
     <div class='area-data1' id="now"></div>
     <div class='area-name2'>Internal version</div>
     <div class='area-data2' id="ver"></div>

app/css/master.css

@@ -9,6 +9,9 @@ html,body{
   background-color: var(--bg);
   color: var(--color);
 }
+body{
+  border: thin solid gray;
+}
 .btn {
   margin: 5px;
   text-transform: none;
@@ -49,6 +52,7 @@ option {
 }
 #imagemodal .modal-content {
   overflow: hidden;
+  padding:0;
 }
 #imagemodal .modal-footer{
   overflow-x:scroll;
@@ -302,7 +306,92 @@ blockquote:before, .quote:before {
   display:flex;
   flex-wrap: wrap;
 }
+#menu{
+  position:fixed;
+  z-index:9999;
+  background-color: var(--box);
+  width:540px;
+  top:calc(50% - 150px);
+  left:calc(50% - 250px);
+  padding: 5px;
+  border: thin solid gray;
+  border-radius:5px;
+}
+#menu-wrapper{
+  margin-left:-5px;
+  display:flex;
+}
+#left-menu{
+  width:170px;
+}
+#left-menu div{
+  padding-left:5px;
+  width:100%;
+  height:50px;
+  display:flex;
+  align-items:center;
+  cursor:pointer;
+}
+#left-menu div:hover {
+  background-color: var(--beforehover);
+}
+#left-menu span{
+  margin-left:5px;
+}
+#left-menu div.active{
+  background-color: var(--emphasized);
+}
+#right-menu{
+  width:380px;
+  max-height:375px;
+  overflow-y:scroll;
+  overflow-x:hidden;
+  padding:5px;
+}
+#tltype{
+  display:flex;
+  flex-wrap: wrap;
+  
+}
+#tltype .type{
+  display:flex;
+  flex-wrap: wrap;
+  align-items:center;
+  width:170px;
+  height:40px;
+  cursor:pointer;
+}
+#tltype .type:hover {
+  background-color: var(--beforehover);
+}
+#tltype .active{
+  background-color: var(--emphasized);
+}
+#tltype i{
+  font-size:30px;
+}
+#tltype i.sub-icon{
+  font-size: 20px;
+  position: relative;
+  color: var(--beforehover);
+  left: -15px;
 
+}
+.drag-bar{
+  cursor:move;
+  text-align:center;
+  width:calc(100% + 10px);
+  border-radius: 5px;
+  background-color: var(--bg);
+  margin-left:-5px;
+  margin-right:-5px;
+  margin-top:-5px;
+  font-size:16px;
+  padding:4px;
+}
+#something-wrong{
+  width:100%; height:100%; position:absolute; display:flex; justify-content: center; align-items:center
+}
 
 /*スクロールバー*/
 ::-webkit-scrollbar {

app/css/post.css

@@ -10,18 +10,9 @@
   min-width:300px;
   max-width:100%;
   padding: 5px;
+  border-radius:5px;
 }
-#post-bar{
-  cursor:move;
-  text-align:center;
-  width:calc(100% + 10px);
-  background-color: var(--bg);
-  margin-left:-5px;
-  margin-right:-5px;
-  margin-top:-5px;
-  font-size:16px;
-  padding:4px;
-}
+
 .cancel {
   font-size: 0.5rem;
   color: gray;
@@ -64,6 +55,10 @@
 }
 #emoji {
   
+}
+#suggest{
+  max-height:300px;
+  overflow-y: scroll;
 }
 #emoji-list {
   width: 100%;
@@ -73,6 +68,15 @@
 #preview-field {
   display: none;
 }
+.preview-img{
+  width:50px;
+  max-height:100px;
+}
+.pi-wrap{
+  display:inline-block;
+  width:50px;
+  max-height:100px;
+}
 #default-emoji a{
   color:white;
   margin-right:2px;

app/css/sort.css

@@ -1,7 +1,5 @@
+
 .drag-content{
-	width:300px;
-	max-width:100%;
-	height:300px;
 	text-overflow: ellipsis;
 	cursor:move;
 	user-select: none;
@@ -10,32 +8,25 @@
 	border-radius:5px;
 	color:var(--color);
 	padding:3px;
-	font-family:Open Sans;
-	font-size:20px;
-	flex-grow:1;
-	text-align: center;
-	padding:10px;
+	display:grid;
+	grid-template-columns: 43px 1fr 60px;
+    grid-template-areas: 'sorticon sorttitle sorttitle' 'sorticon sortacct sortaction';
 }
-#sort{
-	display:flex;
-	flex-direction:row;
-	overflow-x:scroll;
-	display: flex;
-	width:100vw;
-  	
+.sorticon {
+	grid-area:sorticon;
 }
-#sort-box{
-	position:absolute;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	width:100vw; 
-	height:calc(100vh - 40px);
-	background-color: rgba(0, 0, 0, 0.8);
-	z-index:10002;
+.sorticon i{
+	font-size:43px;
 }
-#sort-box button{
-	background-color: var(--notfbox);
-	color:var(--color);
+.sorttitle {
+	margin-left:5px;
+	grid-area:sorttitle;
+}
+.sortacct {
+	margin-left:5px;
+	grid-area:sortacct;
+}
+.sortaction {
+	margin-left:5px;
+	grid-area:sortaction;
 }

app/css/tl.css

@@ -86,7 +86,7 @@
   font-family:Open Sans;
   font-size:15px;
 }
-@media screen and (max-width: 1344px) {
+@media screen and (max-width: 890px) {
   .btnsgroup .grouptitle{ display: none; }
   #tips,#tips-menu{ display: none; }
 }
@@ -108,9 +108,22 @@ iframe {
 .box {
   overflow: hidden;
   min-width: 300px;
-  height: 100vh;
   flex: 1;
+  border-top:none;
+  display:flex;
+  flex-direction: column;
+  margin-bottom: -10px;
+}
+.img_FTL{
+  display:none;
+}
+.bbcode_FTL{
+  display:none;
+}
+.boxIn{
+  height:100%;
   border: thin solid gray;
+  overflow: hidden;
 }
 .box .pin,#his-data .pin{
   display:none;
@@ -130,7 +143,11 @@ iframe {
 .faicon_FTL{
   display:none;
 }
-.tl-box{ height:calc(100% - 40px); overflow-y:scroll; overflow-x:hidden }
+.tl-box{
+  position:relative;
+  height:calc(100% - 40px);
+  overflow-y:scroll;
+  overflow-x:hidden }
 .additional {
   overflow-x: scroll;
   width: 100%;
@@ -207,7 +224,10 @@ grid-area: toot;
   cursor:text;
   user-select: auto;
   grid-area: additional;
-  }
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 
 .area-actions {
   padding:0; 
@@ -242,6 +262,9 @@ grid-area: toot;
   font-size:1.2rem;
   margin-right:2px;
 }
+.action .fa-quote-right{
+  margin-top: 2px;
+}
 .actct{
   color:var(--beforehover);
 }
@@ -262,6 +285,7 @@ grid-area: toot;
 .toot-img {
   object-fit: cover;
   width: 100%;
+  margin-right:1px;
 }
 .toot img:not(.emoji-img) {
   max-width: 100%;
@@ -313,6 +337,7 @@ p:not(:last-child){
 .notice-box {
   top: 0;
   background-color:var(--notfbox);
+  filter: brightness(110%);
   position: relative;
   margin-right: 10px;
   width:100%;
@@ -415,10 +440,6 @@ p:not(:last-child){
   max-height: 190px;
   overflow-y: scroll;
 }
-.u-url {
-  color: var(--color);
-  cursor: text;
-}
 .type-b{
   display:none;
 }
@@ -484,6 +505,26 @@ p:not(:last-child){
 .votebtn:hover{
   background-color:var(--color);
 }
+.jump{
+  display: inline-block; animation: jump 0.75s linear infinite;
+}
+@keyframes jump {
+  0% {
+    transform: translateY(0);
+}
+25% {
+  transform: translateY(-16px);
+}
+50% {
+  transform: translateY(0);
+}
+75% {
+  transform: translateY(-8px);
+}
+100% {
+  transform: translateY(0);
+}
+}
 @keyframes fadeInDown {
   from {
     opacity: 0;
@@ -518,4 +559,5 @@ p:not(:last-child){
 .cvo-anime {
   animation-duration: 0.1s;
   animation-name: fadeInDown;
-}
+}
+

app/css/userdata.css

@@ -45,6 +45,7 @@
   height:1.5rem; padding:0; background-color:#757575; text-align:center; 
   padding:5px;
   margin-bottom:1px;
+  width:30%;
 }
 .his-field-content{
   height:1.5rem; padding:0; padding-left:5px;
@@ -89,4 +90,11 @@
 #his-des .mention{
   color: #039be5;
   cursor: pointer;
+}
+#his-float-blocked{
+  display:flex; justify-content: center; align-items:center;
+  font-size:2rem;
+  width: 90%;
+  height: 100%;
+  position: absolute;
 }

app/index.start.html

@@ -1,5 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-	<meta http-equiv="refresh" content="0;URL='language.html?mode=redirect'" />
-</head>

app/js/common/keyshortcut.js

@@ -29,6 +29,13 @@ $(function($) {
 				return false;
 			}
 		}
+		//Alt+Enter:セカンダリー
+		if (event.metaKey || event.altKey && wv) {
+			if (e.keyCode === 13) {
+				sec();
+				return false;
+			}
+		}
 		
 		//Shift+Space:Markdownゼロ幅スペース
 		if (event.shiftKey) {
@@ -85,6 +92,7 @@ $(function($) {
 			if (e.keyCode === 88) {
 				if (!$("#post-box").hasClass("appear")) {
 					show();
+					$('textarea').focus();
 				} else {
 					hide();
 				}

app/js/common/version.js

@@ -1,5 +1,6 @@
 //バージョンチェッカー
-function verck(ver,winstore) {
+function verck(ver) {
+	console.log("Welcome")
 	if(localStorage.getItem("ver")!=ver){
 		localStorage.setItem("ver", ver);
 		console.log("Thank you for your update");
@@ -13,21 +14,25 @@ function verck(ver,winstore) {
 			verp=verp.replace( ')', '');
 			verp=verp.replace( ' ', '_');
 			console.log(verp);
-			$("#release-"+verp).show();
+			if(lang.language=="ja"){
+				$("#release-"+verp).show();
+			}else{
+				$("#release-en").show();
+			}
+			
 		  });
 	}
 	var electron = require("electron");
 	var remote=electron.remote;
 	var dialog=remote.dialog;
-	const options = {
-		type: 'info',
-		title: "Select your platform",
-		message: lang.lang_version_platform,
-		buttons: [lang.lang_no,lang.lang_yesno]
-	  }
 	  var platform=remote.process.platform;
 	  if(platform=="win32"){
-		  console.log(localStorage.getItem("winstore"))
+		const options = {
+			type: 'info',
+			title: "Select your platform",
+			message: lang.lang_version_platform,
+			buttons: [lang.lang_no,lang.lang_yesno]
+		  }
 		  if(!localStorage.getItem("winstore")){
 			  
 				dialog.showMessageBox(options, function(arg) {
@@ -38,9 +43,52 @@ function verck(ver,winstore) {
 					}
 			  });
 		  }
-	  }else{
+	  }else if(platform=="linux"){
+		if(localStorage.getItem("winstore")=="unix"){
+			localStorage.removeItem("winstore")
+		}
+		if(!localStorage.getItem("winstore")){
+			const options = {
+				type: 'info',
+				title: "Select your platform",
+				message: lang.lang_version_platform_linux,
+				buttons: [lang.lang_no,lang.lang_yesno]
+			  }
+			  dialog.showMessageBox(options, function(arg) {
+				if(arg==1){
+					localStorage.setItem("winstore","snapcraft")
+				  }else{
+					localStorage.setItem("winstore","localinstall")
+				  }
+			});
+		}
+	  }else if(platform=="darwin"){
+		if(localStorage.getItem("winstore")=="unix"){
+			localStorage.removeItem("winstore")
+		}
+		if(!localStorage.getItem("winstore")){
+			const options = {
+				type: 'info',
+				title: "Select your platform",
+				message: lang.lang_version_platform_mac,
+				buttons: [lang.lang_no,lang.lang_yesno]
+			  }
+			  dialog.showMessageBox(options, function(arg) {
+				if(arg==1){
+					localStorage.setItem("winstore","brewcask")
+				  }else{
+					localStorage.setItem("winstore","localinstall")
+				  }
+			});
+		}
+	}else{
 		  localStorage.setItem("winstore","unix")
 	  }
+	  if(localStorage.getItem("winstore")=="brewcask" || localStorage.getItem("winstore")=="snapcraft" || localStorage.getItem("winstore")=="winstore"){
+		var winstore=true;
+	  }else{
+		  var winstore=false;
+	  }
 	var l = 5;
 	// 生成する文字列に含める文字セット
 	var c = "abcdefghijklmnopqrstuvwxyz0123456789";
@@ -70,7 +118,7 @@ function verck(ver,winstore) {
 			}
 			if (newest == ver) {
 				todo(lang.lang_version_usever.replace("{{ver}}" ,mess.desk));
-				//betaかWInstoreならアプデチェックしない
+				//betaかWinstoreならアプデチェックしない
 			} else if (ver.indexOf("beta")!=-1 || winstore) {
 				
 			}else{
@@ -80,6 +128,7 @@ function verck(ver,winstore) {
 						var ipc = electron.ipcRenderer;
 						ipc.send('update', "true");
 					}else{
+						console.log(lang.lang_version_skipver);
 						todo(lang.lang_version_skipver);
 					}
 				}else{
@@ -148,10 +197,14 @@ function verck(ver,winstore) {
 		}
 	}
 	});
+}
+var infostreaming=false;
+function infowebsocket(){
 	infows = new WebSocket("wss://thedesk.top/ws/");
 	infows.onopen = function(mess) {
 		console.log(tlid + ":Connect Streaming Info:");
 		console.log(mess);
+		infostreaming=true;
 	}
 	infows.onmessage = function(mess) {
 		console.log(":Receive Streaming:");
@@ -197,11 +250,19 @@ function verck(ver,winstore) {
 	}
 	}
 	infows.onerror = function(error) {
+		infostreaming=false;
 		console.error("Error closing:info");
 		console.error(error);
 		return false;
 	};
 	infows.onclose = function() {
+		infostreaming=false;
 		console.error("Closing:info");
 	};
-}
+}
+setInterval(function(){
+    if(!infostreaming){
+		console.log("try to connect")
+		infowebsocket();
+	}
+}, 10000);

app/js/lang/lang.en.js

@@ -22,6 +22,8 @@ var lang={
     "lang_version_usever":"No update is found({{ver}})",
     "lang_version_skipver":"Update was ignored.",
     "lang_version_platform":"Was this software installed at Microsoft Store? When select 'yes', any update was ignored.",
+    "lang_version_platform_linux":"Was this software installed at Snapcraft(snapd)? When select 'yes', any update was ignored.",
+    "lang_version_platform_mac":"Was this software installed at Homebrew Cask? When select 'yes', any update was ignored.",
     //login
     //login/login.js
     "lang_login_noauth":"Show TL of unlogined accounts",
@@ -44,6 +46,7 @@ var lang={
     //post/img.js
     "lang_postimg_previewdis":"cannot preview",
     "lang_postimg_aftupload":"You cannot change accounts after uploading.",
+    "lang_postimg_delete":"Delete this image.",
     //post/post.js
     "lang_post_tagTL":"This toot does not contain a default tag. This toot will not be shown on Local TL. Continue?",
     "lang_post_tagVis":"This toot(not 'public' toot) is not shown on this tag's TL.",
@@ -88,6 +91,7 @@ var lang={
     "lang_list_users":"Users list",
     "lang_list_nouser":"No users in this list.",
     "lang_list_add":"Add to the list",
+    "lang_list_add_misskey":"(perhaps this user has been listed)",
     "lang_list_remove":"Remove from the list",
     //tl/notification.js
     "lang_notf_new":" new notifications",
@@ -100,7 +104,8 @@ var lang={
     "lang_tags_always":"Always toots with ",
     "lang_tags_realtime":"Tag-stream toot",
     "lang_tags_tagunpin":"Unpin {{tag}}",
-    "lang_tags_tagwarn":"When you toot without {{tag}}, tag-streaming mode will be off.",
+    "lang_tags_unrealtime":"Disable TsT",
+    "lang_tags_tagwarn":"Auto complete {{tag}}, if toot without {{tag}}",
     //tl/tl.js
     "lang_tl_media":"Media",
     "lang_tl_reconnect":"Reconnect to streaming API",
@@ -120,6 +125,11 @@ var lang={
     "lang_layout_webviewmode":"Prefer WebView",
     "lang_excluded":"Excluded type of notification",
     "lang_layout_excludingbt":"Show BT mode(OFF/Exclude BT/Only BT)",
+    "lang_layout_leftFold":"Stack to the left",
+    "lang_layout_leftUnfold":"Dock on the right",
+    //ui/sort.js
+    "lang_sort_gothis":"Go to this column",
+    "lang_sort_remthis":"Delete this column",
     //ui/spotify.js
     "lang_spotify_img":"Attach an album artwork",
     "lang_spotify_imgno":"Not attach an album artwork",
@@ -139,11 +149,13 @@ var lang={
     "lang_showontl_notf":"Notification ",
     "lang_showontl_domain":"Domain ",
     "lang_showontl_listwarn":"Follow to add this user to lists.",
+    "lang_showontl_verified":"This website is verified by owner at ",
 //parse
     "lang_parse_mentioned":" replied to you",
     "lang_parse_faved":" favourited your toot",
     "lang_parse_bted":" boosted your toot",
     "lang_parse_btedsimple":" boosted",
+    "lang_parse_polled":"'s poll",
     "lang_parse_notftime":"Actioned at",
     "lang_parse_cwshow":"Show",
     "lang_parse_fulltext":"Full size text:",
@@ -179,6 +191,7 @@ var lang={
     "lang_parse_vote":"Voted",
     "lang_parse_unvoted":"Show the result without voting",
     "lang_parse_endedvote":"Expired",
+    "lang_parse_thread":"Show thread",
     //misskey
     "lang_misskeyparse_renote":"Repost",
     "lang_misskeyparse_renoteqt":"Renote",

app/js/lang/lang.ja.js

@@ -1,7 +1,6 @@
     //commonError
 var lang={
     "language":"ja",
-    //commonError
     "lang_toot":"トゥート",
     "lang_there":"あり",
     "lang_nothing":"なし",
@@ -23,6 +22,8 @@ var lang={
     "lang_version_usever":"お使いのバージョン{{ver}}は最新です。",
     "lang_version_skipver":"アップデートはスキップされました。",
     "lang_version_platform":"このソフトウェアはMicrosoft Storeからダウンロードされましたか？(「はい」を選択すると次回からアップデート通知を無視します。)",
+    "lang_version_platform_linux":"このソフトウェアはSnapcraft(snapd)からインストールしましたか？(「はい」を選択すると次回からアップデート通知を無視します。)",
+    "lang_version_platform_mac":"このソフトウェアはHomebrew Caskからインストールしましたか？(「はい」を選択すると次回からアップデート通知を無視します。)",
 //login
 //login/login.js
     "lang_login_noauth":"認証せずに見る",
@@ -45,6 +46,7 @@ var lang={
 //post/img.js
     "lang_postimg_previewdis":"プレビューできません。",
     "lang_postimg_aftupload":"アップロード後はアカウントを切り替えられません。",
+    "lang_postimg_delete":"この画像を削除します",
 //post/post.js
     "lang_post_tagTL":"デフォルトタグが挿入されていません。このまま投稿するとローカルには表示されません。",
     "lang_post_tagVis":"公開範囲が「公開」以外だと、タグTLに表示されません。(一部インスタンスを除く)",
@@ -89,6 +91,7 @@ var lang={
     "lang_list_users":"ユーザー一覧",
     "lang_list_nouser":"ユーザーはいません",
     "lang_list_add":"リストに追加",
+    "lang_list_add_misskey":"(重複追加の可能性があります)",
     "lang_list_remove":"リストから削除",
 //tl/notification.js
     "lang_notf_new":"件の新しい通知",
@@ -101,10 +104,13 @@ var lang={
     "lang_tags_always":"常に",
     "lang_tags_realtime":"実況",
     "lang_tags_tagunpin":"{{tag}}をよく使うタグから削除",
-    "lang_tags_tagwarn":"次に{{tag}}なしでトゥートするまで全てのトゥートに{{tag}}が付与されます。",
+    "lang_tags_unrealtime":"実況解除",
+    "lang_tags_tagwarn":"{{tag}}がない場合自動で補完されます。",
 //tl/tl.js
     "lang_tl_media":"メディア",
     "lang_tl_reconnect":"Streamingに再接続しました",
+//ui/img.js
+    "lang_img_DLDone":"ダウンロード先:",
 //ui/layout.js
     "lang_layout_gotop":"一番上へ。アイコンが赤のときはストリーミングに接続できていません。F5等で再読込をお試し下さい。",
     "lang_layout_thisacct":"このアカウントの{{notf}}",
@@ -121,6 +127,11 @@ var lang={
     "lang_layout_webviewmode":"WebView優先",
     "lang_excluded":"除外する通知",
     "lang_layout_excludingbt":"BT表示(OFF/BT除外/BTのみ)",
+    "lang_layout_leftFold":"左へ重ねる",
+    "lang_layout_leftUnfold":"右へ出す",
+//ui/sort.js
+    "lang_sort_gothis":"このカラムへ",
+    "lang_sort_remthis":"このカラムを削除",
 //ui/spotify.js
     "lang_spotify_img":"アルバムアートワークを添付します。",
     "lang_spotify_imgno":"アルバムアートワークを添付しません。",
@@ -140,11 +151,13 @@ var lang={
     "lang_showontl_notf":"通知",
     "lang_showontl_domain":"ドメイン",
     "lang_showontl_listwarn":"リストに追加するためにはフォローが必要です。",
+    "lang_showontl_verified":"このユーザーの所持するWebサイトであると証明されています。",
 //parse
    "lang_parse_mentioned":"が返信しました",
     "lang_parse_faved":"がお気に入り登録しました",
     "lang_parse_bted":"がブーストしました",
     "lang_parse_btedsimple":"がブースト",
+    "lang_parse_polled":"のアンケート",
     "lang_parse_notftime":"通知された時間",
     "lang_parse_cwshow":"見る",
     "lang_parse_fulltext":"以下全文",
@@ -180,6 +193,7 @@ var lang={
     "lang_parse_vote":"投票",
     "lang_parse_unvoted":"結果だけ見る",
     "lang_parse_endedvote":"終了済み",
+    "lang_parse_thread":"会話を表示",
     //misskey
     "lang_misskeyparse_renote":"再投稿",
     "lang_misskeyparse_renoteqt":"引用",

app/js/lang/parse.lang.js

@@ -1,189 +0,0 @@
-var lang_parse_mentioned={
-    "ja":"が返信しました",
-    "en":" replied to you" 
-}
-var lang_parse_faved={
-    "ja":"がお気に入り登録しました",
-    "en":" favourited your toot" 
-}
-var lang_parse_bted={
-    "ja":"がブーストしました",
-    "en":" boosted your toot" 
-}
-var lang_parse_btedsimple={
-    "ja":"がブースト",
-    "en":" boosted" 
-}
-var lang_parse_notftime={
-    "ja":"通知された時間",
-    "en":"Actioned at"
-}
-var lang_parse_cwshow={
-    "ja":"見る",
-    "en":"Show"
-}
-var lang_parse_fulltext={
-    "ja":"以下全文",
-    "en":"Full size text:"
-}
-var lang_parse_autofold={
-    "ja":"自動折り畳み",
-    "en":"Auto folded"
-}
-var lang_parse_more={
-    "ja":"続き...",
-    "en":"More"
-}
-var lang_parse_url={
-    "ja":"URL解析",
-    "en":"URL Analyzer"
-}
-var lang_parse_tagTL={
-    "ja":"{{tag}}のタイムライン",
-    "en":"Timeline of {{tag}}"
-}
-var lang_parse_tagtoot={
-    "ja":"{{tag}}でトゥート",
-    "en":"Toot with {{tag}}"
-}
-var lang_parse_tagpin={
-    "ja":"{{tag}}をよく使うタグへ",
-    "en":"Pin {{tag}}"
-}
-var lang_parse_public={
-    "ja":"公開",
-    "en":"Public"
-}
-var lang_parse_unlisted={
-    "ja":"未収載",
-    "en":"Unlisted"
-}
-var lang_parse_private={
-    "ja":"非公開",
-    "en":"Private"
-}
-var lang_parse_direct={
-    "ja":"ダイレクト",
-    "en":"Direct"
-}
-var lang_parse_clickcopy={
-    "ja":"クリックして本文をコピー",
-    "en":"Click to copy text of this toot"
-}
-var lang_parse_clickcopyurl={
-    "ja":"クリックしてトゥートURLをコピー",
-    "en":"Click to copy URL of this toot"
-}
-var lang_parse_trans={
-    "ja":"このトゥートを日本語に翻訳",
-    "en":"Translate to Japanese"
-}
-var lang_parse_replyto={
-    "ja":"このトゥートに返信",
-    "en":"Reply to this toot"
-}
-var lang_parse_bt={
-    "ja":"このトゥートをブースト",
-    "en":"Boost this toot"
-}
-var lang_parse_fav={
-    "ja":"このトゥートをお気に入り登録",
-    "en":"Favourite this toot"
-}
-var lang_parse_quote={
-    "ja":"このトゥートを引用",
-    "en":"Quote this toot"
-}
-var lang_parse_del={
-    "ja":"このトゥートを削除",
-    "en":"Delete this toot"
-}
-var lang_parse_pin={
-    "ja":"このトゥートをピン留め",
-    "en":"Pin this toot"
-}
-var lang_parse_det={
-    "ja":"詳細(メインアカウント経由)",
-    "en":"Details via your main account."
-}
-var lang_parse_redraft={
-    "ja":"このトゥートを削除して再編集",
-    "en":"Delete & re-draft"
-}
-var lang_parse_followed={
-    "ja":"フォローされました。",
-    "en":"Followed you"
-}
-var lang_parse_clientop={
-    "ja":"クライアント処理",
-    "en":"Operation of this client"
-}
-var lang_parse_clienttxt={
-    "ja":"に対する処理を選択してください。",
-    "en":" will be"
-}
-var lang_parse_clientno={
-    "ja":"何もしない",
-    "en":"done nothing"
-}
-var lang_parse_clientemp={
-    "ja":"強調表示/解除",
-    "en":"emphasized(/not emphasized)"
-}
-var lang_parse_clientmute={
-    "ja":"ミュート",
-    "en":"muted"
-}
-var lang_parse_mute={
-    "ja":"ミュートします。設定から解除できます。",
-    "en":" will be muted. You can remove on preferences."
-}
-//misskey
-var lang_misskeyparse_renote={
-    "ja":"再投稿",
-    "en":"Repost"
-}
-var lang_misskeyparse_renoteqt={
-    "ja":"引用",
-    "en":"Renote"
-}
-var lang_misskeyparse_reaction={
-    "ja":"リアクション",
-    "en":"Reaction"
-}
-var lang_misskeyparse_tagnostr={
-    "ja":"タグTLはストリーミング非対応です。",
-    "en":"No streaming API on Tag TLs"
-}
-var lang_misskeyparse_listnostr={
-    "ja":"リストTLはストリーミング非対応です。",
-    "en":"No streaming API on List TLs"
-}
-var lang_misskeyparse_home={
-    "ja":"ホーム",
-    "en":"Home"
-}
-var lang_misskeyparse_followers={
-    "ja":"フォロワー",
-    "en":"Follower"
-}
-var lang_misskeyparse_specified={
-    "ja":"ユーザー指定",
-    "en":"Specified User"
-}
-var lang_misskeyparse_qt={
-    "ja":"MisskeyのRenote(引用モード)中:Ctrl+Shift+Cでクリア",
-    "en":"Misskey renote(quote) mode:Ctrl+Shift+Enter to clear"
-}
-var lang_misskeyparse_renoted={
-    "ja":"がRepost",
-    "en":" renoted your following post."
-}
-var lang_misskeyparse_quoted={
-    "ja":"が引用",
-    "en":" quoted your following post."
-}
-var lang_misskeyparse_reaction={
-    "ja":"がリアクション",
-    "en":" reacted your following post."
-}

app/js/lang/setting.lang.js

@@ -1,152 +0,0 @@
-var lang_setting_time={
-    "ja":"時間設定を{{set}}に設定しました。",
-    "en":"Time format:{{set}}"
-}
-var lang_setting_theme={
-    "ja":"テーマ設定を{{set}}に設定しました。",
-    "en":"Theme:{{set}}"
-}
-var lang_setting_nsfw={
-    "ja":"画像表示設定を{{set}}に設定しました。",
-    "en":"NSFW:{{set}}"
-}
-var lang_setting_cw={
-    "ja":"テキスト表示設定を{{set}}に設定しました。",
-    "en":"CW:{{set}}"
-}
-var lang_setting_cwtext={
-    "ja":"デフォルトの警告文を「{{set}}」に設定しました。",
-    "en":"Default CW text:{{set}}"
-}
-var lang_setting_cws={
-    "ja":"標準でCW:{{set}}",
-    "en":"Always CW on:{{set}}"
-}
-var lang_setting_rp={
-    "ja":"リプライ数表示:{{set}}",
-    "en":"Reply counter:{{set}}"
-}
-var lang_setting_vis={
-    "ja":"デフォルトの公開設定を{{set}}に設定しました。",
-    "en":"Default visibility:{{set}}"
-}
-var lang_setting_popup={
-    "ja":"ポップアップお知らせを{{set}}に設定しました。",
-    "en":"Popup notification:{{set}}"
-}
-var lang_setting_off={
-    "ja":"オフ",
-    "en":"Off"
-}
-var lang_setting_s={
-    "ja":"秒",
-    "en":"s"
-}
-var lang_setting_box={
-    "ja":"デフォルトでのボックスの挙動を{{set}}に設定しました。",
-    "en":"Default toot box action:{{set}}"
-}
-var lang_setting_gif={
-    "ja":"アイコンアニメーション再生を{{set}}に設定しました。",
-    "en":"GIF:{{set}}"
-}
-var lang_setting_selt={
-    "ja":"{{set1}}行以上または{{set2}}文字以上でテキストを隠します。",
-    "en":"Auto fold:{{set1}} lines and above, {{set2}} letters and above"
-}
-var lang_setting_autocw={
-    "ja":"{{set1}}行以上または{{set2}}文字以上で警告を表示します。",
-    "en":"Auto CW:{{set1}} lines and above, {{set2}} letters and above"
-}
-var lang_setting_width={
-    "ja":"横幅最低を{{set}}pxに設定しました。",
-    "en":"Minimam width:{{set}}"
-}
-var lang_setting_img={
-    "ja":"画像投稿後の設定を「{{set}}」に設定しました。",
-    "en":"After posting an image:{{set}}"
-}
-var lang_setting_font={
-    "ja":"フォントを{{set}}に設定しました。",
-    "en":"Fonts:{{set}}"
-}
-var lang_setting_default={
-    "ja":"デフォルト",
-    "en":"default font"
-}
-var lang_setting_size={
-    "ja":"フォントサイズを{{set}}pxに設定しました。",
-    "en":"Font size:{{set}}px"
-}
-var lang_setting_imgheight={
-    "ja":"画像高さを{{set}}pxに設定しました。",
-    "en":"Image height:{{set}}px"
-}
-var lang_setting_ticker={
-    "ja":"#InstanceTicker使用を{{set}}に設定しました。",
-    "en":"#InstanceTicker:{{set}}px"
-}
-var lang_setting_tag={
-    "ja":"タグの取得範囲を「{{set}}」に設定しました。",
-    "en":"Tag TL:{{set}}"
-}
-var lang_setting_box={
-    "ja":"投稿ボックスを{{set}}",
-    "en":"Post box:{{set}}"
-}
-var lang_setting_ul={
-    "ja":"独自ロケール設定を{{set}}に設定しました。",
-    "en":"Native locale:{{set}}"
-}
-var lang_setting_notf={
-    "ja":"ネイティブ通知を{{set}}に設定しました。",
-    "en":"Native notification:{{set}}"
-}
-var lang_setting_quote={
-    "ja":"引用形式を{{set}}に設定しました。",
-    "en":"Quote format:{{set}}"
-}
-var lang_setting_via={
-    "ja":"via表示を{{set}}に設定しました。",
-    "en":"Via:{{set}}"
-}
-var lang_setting_mov={
-    "ja":"アクションボタン非表示を{{set}}に設定しました。",
-    "en":"Action buttons hiding:{{set}}"
-}
-var lang_setting_setasread={
-    "ja":"通知カラム存在時新着非表示を{{set}}に設定しました。",
-    "en":"Notification markers:{{set}}"
-}
-var lang_setting_main={
-    "ja":"起動時・投稿時のアカウントを{{set}}に設定しました。",
-    "en":"Default account:{{set}}"
-}
-var lang_setting_sec={
-    "ja":"セカンダリートゥートボタン:{{set}}",
-    "en":"Secondary toot button:{{set}}"
-}
-var lang_setting_ksref={
-    "ja":"キーボードショートカットが更新されました。",
-    "en":"Keyboard shortcuts are refreshed."
-}
-var lang_setting_nomuting={
-    "ja":"ミュートしているクライアントはありません。",
-    "en":"No client is muted."
-}
-var lang_setting_notftest={
-    "ja":"通知テスト",
-    "en":" Notification test "
-}
-var lang_setting_notftestprof={
-    "ja":"アイコンはあなたのアカウントのものです。",
-    "en":"Your icon is shown."
-}
-var lang_setting_exportwarn={
-    "ja":"重要なデータのみエクスポートされます。エクスポートされたデータは外部に公開しないでください。全ての認証データが含まれています。",
-    "en":"Only important data will be exported. You must keep this data secure."
-}
-var lang_setting_importwarn={
-    "ja":"全てのデータがリセットされます。",
-    "en":"All data will be deleted."
-}

app/js/login/instance.js

@@ -8,17 +8,17 @@ var idata={
 	"kirishima.cloud_glitch":"enabled",
 	"kirishima.cloud_public":"パブリックタイムライン",
 	"minohdon.jp":"instance",
-	"minohdon.jp_name":"箕面丼",
+	"minohdon.jp_name":"箕面どん",
 	"minohdon.jp_letters":"500",
 	"minohdon.jp_bbcode":"disabled",
 	"minohdon.jp_markdown":"disabled",
 	"minohdon.jp_glitch":"disabled",
 	"knzk.me":"instance",
-	"knzk.me_name":"神崎丼",
+	"knzk.me_name":"Knzk",
 	"knzk.me_letters":"5000",
 	"knzk.me_bbcode":"disabled",
 	"knzk.me_markdown":"disabled",
-	"knzk.me_glitch":"enabled",
+	"knzk.me_glitch":"disabled",
 	"mastodos.com":"instance",
 	"mastodos.com_name":"マストどす",
 	"mastodos.com_letters":"500",
@@ -32,7 +32,7 @@ var idata={
 	"dev.kirishima.cloud_markdown":"enabled",
 	"dev.kirishima.cloud_glitch":"enabled",
 	"mstdn.y-zu.org":"instance",
-	"mstdn.y-zu.org_name":"Yづドン!(502 BadGateway)",
+	"mstdn.y-zu.org_name":"Yづドン(Y-zuDon)",
 	"mstdn.y-zu.org_letters":"500",
 	"mstdn.y-zu.org_bbcode":"disabled",
 	"mstdn.y-zu.org_markdown":"enabled",
@@ -84,20 +84,14 @@ var idata={
 	"itabashi.0j0.jp_bbcode":"disabled",
 	"itabashi.0j0.jp_markdown":"disabled",
 	"itabashi.0j0.jp_glitch":"disabled",
-	"theboss.tech":"instance",
-	"theboss.tech_name":"theboss.tech",
-	"theboss.tech_letters":"1000",
-	"theboss.tech_bbcode":"disabled",
-	"theboss.tech_markdown":"disabled",
-	"theboss.tech_glitch":"disabled",
 	"dtp-mstdn.jp":"instance",
 	"dtp-mstdn.jp_name":"DTP鯖",
 	"dtp-mstdn.jp_letters":"500",
 	"dtp-mstdn.jp_bbcode":"disabled",
 	"dtp-mstdn.jp_markdown":"disabled",
 	"dtp-mstdn.jp_glitch":"disabled",
-	"misskey.xyz":"instance",
-	"misskey.xyz_name":"Misskey",
+	"misskey.xyz":"misskey",
+	"misskey.xyz_name":"misskey.xyz",
 	"misskey.xyz_letters":"1000",
 	"misskey.xyz_bbcode":"disabled",
 	"misskey.xyz_markdown":"enabled",
@@ -105,6 +99,28 @@ var idata={
 	"misskey.xyz_post":"Post",
 	"misskey.xyz_fav":" reacted your post.",
 	"misskey.xyz_bt":" reposted your post.",
+	"misskey.dev":"misskey",
+	"misskey.dev_name":"misskey.dev",
+	"misskey.dev_letters":"1024",
+	"misskey.dev_bbcode":"disabled",
+	"misskey.dev_markdown":"enabled",
+	"misskey.dev_public":"Global",
+	"misskey.dev_post":"Post",
+	"misskey.dev_fav":" reacted your post.",
+	"misskey.dev_bt":" reposted your post.",
+	"precure.ml":"instance",
+	"precure.ml_name":"キュアスタ！",
+	"precure.ml_letters":"1024",
+	"precure.ml_bbcode":"disabled",
+	"precure.ml_markdown":"disabled",
+	"precure.ml_post":"キュア！",
+	"precure.ml_glitch":"disabled",
+	"best-friends.chat":"instance",
+	"best-friends.chat_name":"Best Friends",
+	"best-friends.chat_letters":"500",
+	"best-friends.chat_bbcode":"disabled",
+	"best-friends.chat_markdown":"disabled",
+	"best-friends.chat_glitch":"disabled",
 };
 
 localStorage.setItem("instance", JSON.stringify(idata));

app/js/login/login.js

@@ -5,6 +5,7 @@
 localStorage.removeItem("kirishima")
 localStorage.removeItem("imas")
 localStorage.removeItem("image");
+localStorage.removeItem("stable")
 localStorage.setItem("mode_misskey.xyz","misskey")
 function ck() {
 	var main = localStorage.getItem("main");
@@ -41,29 +42,24 @@ function ck() {
 		}
 	}
 	var multi = localStorage.getItem("multi");
-	if (!multi) {
-		var obj = [];
-		var json = JSON.stringify(obj);
-		localStorage.setItem("multi", json);
-	} else {
+	if(!multi || multi=="[]"){
+		location.href="acct.html?mode=first&code=true"
+	}else{
 		var obj = JSON.parse(multi);
-	}
 	Object.keys(obj).forEach(function(key) {
 		var acct=obj[key];
 		if(acct.domain){
 			refresh(key,true)
 		}
 	});
-	console.log(obj);
-	if (obj[0].domain) {
+if (obj[0].domain) {
 		$("#tl").show();
 		ticker();
 		multiSelector();
-	} else {
-		$("#tl").show();
-		$("#post-box").hide();
+		verck(ver);
 	}
 }
+}
 ck();
 //ログインポップアップ
 function login(url) {

app/js/login/manager.js

@@ -2,6 +2,15 @@
 //最初に読むやつ
 function load() {
 	$("#acct-list").html("");
+	if(location.search){
+		var m = location.search.match(/\?mode=([a-zA-Z-0-9]+)\&code=(.+)/);
+		var mode=m[1];
+		var codex=m[2];
+		if(mode=="first" && codex=="true"){
+			$("body").addClass("first")
+		}else{	
+		}
+	}
 	var prof = localStorage.getItem("prof");
 	$(".my-prof").attr("src", prof);
 	var name = localStorage.getItem("name");
@@ -57,14 +66,8 @@ function load() {
 		localStorage.setItem("acct", 0);
 		var acctN = 0;
 	}
-	var electron = require("electron");
-          var remote=electron.remote;
-          var platform=remote.process.platform;
-	    if(localStorage.getItem("winstore")!="localinstall"){
-			$("#linux").prop("checked", false);
-        }else{
-			$("#linux").prop("checked", true);
-		}
+	//全部チェックアリでいいと思うの
+	$("#linux").prop("checked", true);
 
 }
 //最初に読む
@@ -262,6 +265,10 @@ function support() {
 				templete = '<a onclick="login(\'' + key +
 					'\')" class="collection-item pointer transparent">' + idata[key + "_name"] + '(' + key + ')</a>';
 				$("#support").append(templete);
+			}else if (instance == "misskey") {
+				templete = '<a onclick="misskeyLogin(\'' + key +
+					'\')" class="collection-item pointer transparent">' + idata[key + "_name"] + '(' + key + ')</a>';
+				$("#support").append(templete);
 			}
 		});
 }
@@ -270,7 +277,7 @@ function support() {
 function login(url) {
 	var multi = localStorage.getItem("multi");
 	var obj = JSON.parse(multi);
-	if($('#misskey:checked').val()=="on" || url=="misskey.xyz"){
+	if($('#misskey:checked').val()=="on"){
 		$("#misskey").prop("checked", true);
 		misskeyLogin(url);
 		return;
@@ -335,7 +342,29 @@ function misskeyLogin(url) {
 	httpreq.send(JSON.stringify({
 			name: "TheDesk(PC)",
 			description: "Mastodon client for PC",
-			permission: ["read","write","follow"]
+			permission: [
+				"account-read",
+				"account-write",
+				"account/read",
+				"account/write",
+				"drive-read",
+				"drive-write",
+				"favorite-read",
+				"favorite-write",
+				"favorites-read",
+				"following-read",
+				"following-write",
+				"messaging-read",
+				"messaging-write",
+				"note-read",
+				"note-write",
+				"notification-read",
+				"notification-write",
+				"reaction-read",
+				"reaction-write",
+				"vote-read",
+				"vote-write"
+			]
 	}));
     httpreq.onreadystatechange = function() {
 		if (httpreq.readyState === 4) {
@@ -436,7 +465,9 @@ function code(code) {
 				console.log(obj);
 				var json = JSON.stringify(obj);
 				localStorage.setItem("multi", json);
-
+				if($("body").hasClass("first")){
+					location.href="index.html"
+				}
 				load();
 				return;
 			}
@@ -524,6 +555,9 @@ function getdata(domain, at) {
 		console.log(obj);
 		var json = JSON.stringify(obj);
 		localStorage.setItem("multi", json);
+		if($("body").hasClass("first")){
+			location.href="index.html"
+		}
 		load();
 	});
 }

app/js/platform/end.js

@@ -19,7 +19,7 @@
 		//メンションっぽかったら
 		var ats=[];
 			ats = url.match(
-				/https:\/\/([-a-zA-Z0-9@.]+)\/@([-_.!~*\'()a-zA-Z0-9;\/?:\&=+\$,%#]+)/
+				/https:\/\/([-a-zA-Z0-9.]+)\/@([-_.!~*\'()a-zA-Z0-9;\/?:\&=+\$,%#@]+)/
 			);
 		console.log(toot);
 		if(toot){
@@ -41,7 +41,8 @@
 		}else if(ats){
 			console.log(ats);
 			if(ats[2]){
-				if(ats[1]!="quesdon.rinsuki.net"){
+				//Quesdon判定
+				if(!~ats[2].indexOf("@")){
 					udgEx(ats[2]+"@"+ats[1],"main");
 					return false
 				}else{
@@ -171,10 +172,10 @@ function opendev(){
 	  */
 }
 
-var webview = document.getElementById('webview');
+var webviewDom = document.getElementById('webview');
 const {
 	shell
 } = require('electron');
-webview.addEventListener('new-window', function(e) {
+webviewDom.addEventListener('new-window', function(e) {
     shell.openExternal(e.url);
 });

app/js/post/emoji.js

@@ -4,27 +4,29 @@ $("#emoji-before").addClass("disabled");
 $("#emoji-next").addClass("disabled");
 
 //絵文字ボタンのトグル
-function emojiToggle() {
+function emojiToggle(reaction) {
 	var acct_id = $("#post-acct-sel").val();
 	var selin = $("#textarea").prop('selectionStart');
-	if(!selin){
-		selin=0;
+	if (!selin) {
+		selin = 0;
 	}
 	localStorage.setItem("cursor", selin);
 
 	if ($("#emoji").hasClass("hide")) {
 		$("#emoji").removeClass("hide")
 		$("#right-side").show()
+		$("#suggest").html("");
 		if (!localStorage.getItem("emoji_" + acct_id)) {
 			var html =
-				'<button class="btn waves-effect green" style="width:100%; padding:0; margin-top:0;" onclick="emojiGet(\'true\');">'+lang.lang_emoji_get+'</button>';
+				'<button class="btn waves-effect green" style="width:100%; padding:0; margin-top:0;" onclick="emojiGet(\'true\');">' + lang.lang_emoji_get + '</button>';
 			$("#emoji-list").html(html);
 		} else {
-			emojiList('home');
+			emojiList('home', reaction);
 		}
 	} else {
 		$("#poll").addClass("hide")
 		$("#emoji").addClass("hide")
+		$("#suggest").html("");
 		$("#right-side").hide()
 	}
 
@@ -32,43 +34,97 @@ function emojiToggle() {
 }
 
 //絵文字リスト挿入
-function emojiGet(parse) {
+function emojiGet(parse, started) {
 	$('#emoji-list').html('Loading...');
 	var acct_id = $("#post-acct-sel").val();
 	var domain = localStorage.getItem("domain_" + acct_id);
-	var start = "https://" + domain + "/api/v1/custom_emojis";
-	fetch(start, {
-		method: 'GET',
-		headers: {
-			'content-type': 'application/json'
-		},
-	}).then(function(response) {
-		return response.json();
-	}).catch(function(error) {
-		todo(error);
-		console.error(error);
-	}).then(function(json) {
-		if (parse == "true") {
-			$('#emoji-list').html('Parsing...');
-			//絵文字をマストドン公式と同順にソート
-			json.sort(function(a, b) {
-				if (a.shortcode < b.shortcode) return -1;
-				if (a.shortcode > b.shortcode) return 1;
-				return 0;
+	if (localStorage.getItem("mode_" + domain) != "misskey") {
+		var start = "https://" + domain + "/api/v1/custom_emojis";
+		fetch(start, {
+			method: 'GET',
+			headers: {
+				'content-type': 'application/json'
+			},
+		}).then(function (response) {
+			return response.json();
+		}).catch(function (error) {
+			todo(error);
+			console.error(error);
+		}).then(function (json) {
+			if (parse == "true") {
+				$('#emoji-list').html('Parsing...');
+				//絵文字をマストドン公式と同順にソート
+				json.sort(function (a, b) {
+					if (a.shortcode < b.shortcode) return -1;
+					if (a.shortcode > b.shortcode) return 1;
+					return 0;
+				});
+				localStorage.setItem("emoji_" + acct_id, JSON.stringify(json));
+			} else {
+				localStorage.setItem("emoji_" + acct_id, JSON.stringify(json));
+			}
+			localStorage.setItem("emojiseek", 0);
+			if (!started) {
+				emojiList('home')
+			}
+		});
+	} else {
+		var start = "https://" + domain + "/api/meta";
+		fetch(start, {
+			method: 'POST',
+			headers: {
+				'content-type': 'application/json'
+			},
+		}).then(function (response) {
+			return response.json();
+		}).catch(function (error) {
+			todo(error);
+			console.error(error);
+		}).then(function (json) {
+			if (json.enableEmojiReaction) {
+				localStorage.setItem("emojiReaction_" + acct_id, "true");
+			} else {
+				localStorage.setItem("emojiReaction_" + acct_id, "disabled");
+			}
+			var emojis = json.emojis;
+			var md = [];
+			Object.keys(emojis).forEach(function (key) {
+				var emoji = emojis[key];
+				md.push({
+					"shortcode": emoji.name,
+					"url": emoji.url
+				})
 			});
-			localStorage.setItem("emoji_" + acct_id, JSON.stringify(json));
-		} else {
-			localStorage.setItem("emoji_" + acct_id, JSON.stringify(json));
-		}
-		localStorage.setItem("emojiseek", 0);
-		emojiList('home')
-	});
+			if (parse == "true") {
+				$('#emoji-list').html('Parsing...');
+				//絵文字をマストドン公式と同順にソート
+				md.sort(function (a, b) {
+					if (a.shortcode < b.shortcode) return -1;
+					if (a.shortcode > b.shortcode) return 1;
+					return 0;
+				});
+				localStorage.setItem("emoji_" + acct_id, JSON.stringify(md));
+			} else {
+				localStorage.setItem("emoji_" + acct_id, JSON.stringify(md));
+			}
+			localStorage.setItem("emojiseek", 0);
+			if (!started) {
+				emojiList('home')
+			}
+		});
+	}
 }
 
 //リストの描画
-function emojiList(target) {
+function emojiList(target, reaction) {
 	$("#now-emoji").text(lang.lang_emoji_custom);
 	var acct_id = $("#post-acct-sel").val();
+	if (reaction && localStorage.getItem("emojiReaction_" + acct_id) != "true") {
+		console.error("Disabled")
+		clear()
+		hide();
+		return false;
+	}
 	var start = localStorage.getItem("emojiseek");
 	if (target == "next") {
 		var start = start * 1 + 127;
@@ -101,8 +157,14 @@ function emojiList(target) {
 	for (i = start; i < start + 126; i++) {
 		var emoji = obj[i];
 		if (emoji) {
-			html = html + '<a onclick="emojiInsert(\':' + emoji.shortcode +
-				': \')" class="pointer"><img src="' + emoji.url + '" width="20"></a>';
+			if (reaction) {
+				html = html + '<a onclick="emojiReaction(\':' + emoji.shortcode +
+					':\')" class="pointer"><img src="' + emoji.url + '" width="20"></a>';
+			} else {
+				html = html + '<a onclick="emojiInsert(\':' + emoji.shortcode +
+					':\')" class="pointer"><img src="' + emoji.url + '" width="20"></a>';
+			}
+
 		}
 	}
 	$("#emoji-list").html(html);
@@ -112,14 +174,19 @@ function emojiList(target) {
 function emojiInsert(code, del) {
 	var now = $("#textarea").val();
 	var selin = localStorage.getItem("cursor");
+	if (localStorage.getItem("emoji-zero-width") == "yes") {
+		var brank = "​";
+	} else {
+		var brank = " ";
+	}
 	console.log(selin);
 	var now = $("#textarea").val();
-	if(selin>0){
-		var before   = now.substr(0, selin);
-		var after    = now.substr(selin, now.length);
-		newt = before + " "+ code+" " + after;
-	}else{
-		newt = code+" ";
+	if (selin > 0) {
+		var before = now.substr(0, selin);
+		var after = now.substr(selin, now.length);
+		newt = before + brank + code + brank + after;
+	} else {
+		newt = code + brank;
 	}
 	if (!del) {
 		$("#textarea").val(newt);
@@ -127,20 +194,20 @@ function emojiInsert(code, del) {
 	} else {
 		var regExp = new RegExp(del, "g");
 		var now = now.replace(regExp, "");
-		$("#textarea").val(now + " " + code);
+		$("#textarea").val(now + brank + code);
 	}
-	
+
 	$("#textarea").focus();
 	var selin = $("#textarea").prop('selectionStart');
-	if(!selin){
-		selin=0;
+	if (!selin) {
+		selin = 0;
 	}
 	localStorage.setItem("cursor", selin);
 }
 //改行挿入
 function brInsert(code) {
-	if(!$('#post-box').hasClass("appear")){
-		localStorage.setItem("nohide",true);
+	if (!$('#post-box').hasClass("appear")) {
+		localStorage.setItem("nohide", true);
 		show();
 	}
 	var now = $("#textarea").val();

app/js/post/img.js

@@ -131,7 +131,7 @@ function media(b64, type, no) {
 			console.log(json);
 			var img = localStorage.getItem("img");
 			if (json.type.indexOf("image")!=-1) {
-				var html = '<img src="' + json[previewer] + '" style="width:50px; max-height:100px;">';
+				var html = '<img src="' + json[previewer] + '" class="preview-img pointer" data-media="'+json["id"]+'" onclick="deleteImage(\''+json["id"]+'\')" title="'+lang.lang_postimg_delete+'">';
 				$('#preview').append(html);
 			} else {
 				$('#preview').append(lang.lang_postimg_previewdis);
@@ -183,22 +183,20 @@ function toBlob(base64, type) {
 var element =  document.querySelector("#textarea");
 element.addEventListener("paste", function(e){
 	console.log(e)
-    // 画像の場合
-    // e.clipboardData.types.length == 0
-    // かつ
-    // e.clipboardData.types[0] == "Files"
-    // となっているので、それ以外を弾く
-    if (!e.clipboardData 
-            || !e.clipboardData.types
-            || (e.clipboardData.types.length != 1)
-            || (e.clipboardData.types[0] != "Files")) {
-				console.log("not image")
-            return true;
+    if (!e.clipboardData || !e.clipboardData.items) {
+        return true;
+    }
+    // DataTransferItemList に画像が含まれいない場合は終了する
+	var imageItems = [...e.clipboardData.items].filter(i => i.type.startsWith('image'));
+    if (imageItems.length == 0) {
+		console.log("not image")
+        return true;
     }
 
     // ファイルとして得る
-    // (なぜかgetAsStringでは上手くいかなかった)
-    var imageFile = e.clipboardData.items[0].getAsFile();
+    // DataTransferItem の kind は file なので getAsString ではなく getAsFile を呼ぶ
+    var imageFile = imageItems[0].getAsFile();
+    var imageType = imageItems[0].type;
 
     // FileReaderで読み込む
     var fr = new FileReader();
@@ -209,7 +207,8 @@ element.addEventListener("paste", function(e){
 		if(mediav){
 			var i=mediav.split(",").length;
 		}
-		media(base64, "image/png", i)
+        // DataTransferItem の type に mime tipes があるのでそれを使う
+		media(base64, imageType, i)
     };
     fr.readAsDataURL(imageFile);
 
@@ -222,4 +221,20 @@ function adobe(){
 }
 ipc.on('adobeagree', function (event, arg) {
 	localStorage.setItem("adobeagree",arg);
-  });
+	});
+function deleteImage(key){
+	console.log(key);
+	if(!confirm(lang.lang_postimg_delete)){
+		return false;
+	}
+	var media = $("#media").val();
+	var arr=media.split(",");
+	for(var i=0;i<media.length;i++){
+		if(arr[i]==key){
+				arr.splice(i, 1);
+				break;
+		}
+	}
+	$("#media").val(arr.join(","));
+	$('#preview [data-media='+key+']').remove();
+}

app/js/post/misskeystatus.js

@@ -65,7 +65,7 @@ function reactiontoggle(id,acct_id,tlid){
             var json = httpreq.response;
             console.log(json);
             if(json.reactionCounts){
-                var reactions=["like","love","laugh","hmm","surprise","congrats","angry","confused","pudding"];
+                var reactions=["like","love","laugh","hmm","surprise","congrats","angry","confused","pudding","star"];
                 for(var i=0;i<reactions.length;i++){
                     if(json.reactionCounts[reactions[i]]){
                         $("#pub_" + id +" .re-"+reactions[i]+"ct").text(json.reactionCounts[reactions[i]])
@@ -93,7 +93,21 @@ function reactiontoggle(id,acct_id,tlid){
                 }
             }
 		}
-	}
+    }
+    $("#pub_" + id +" .freeReact").toggleClass("hide");
+}
+//reactioncustom
+function reactioncustom(acct_id,id){
+    $("#reply").val(id);
+    $("#unreact").hide();
+    $("#addreact").removeClass("hide");
+	$("#post-acct-sel").val(acct_id);
+	$('select').material_select();
+    localStorage.setItem("nohide",true);
+    show()
+    emojiToggle(true)
+    $("#left-side").hide();
+    $("#default-emoji").hide();
 }
 function reactRefresh(acct_id,id){
     var domain = localStorage.getItem("domain_" + acct_id);
@@ -119,30 +133,42 @@ function reactRefresh(acct_id,id){
             return false;
         }
         var poll="";
-        console.log(json);
-        reactRefreshCore(json)
+        if(json.error){
+            $("[toot-id=" + id + "]").hide();
+			$("[toot-id=" + id + "]").remove();
+        }else{
+            reactRefreshCore(json)
+        }
     });
 }
 function reactRefreshCore(json){
     var id=json.id;
     if(json.reactionCounts){
-        var reactions=["like","love","laugh","hmm","surprise","congrats","angry","confused","pudding"];
         $("#pub_" + id +" .reactions").removeClass("hide")
-        for(var i=0;i<reactions.length;i++){
-            if(json.reactionCounts[reactions[i]]){
-                console.log(json.reactionCounts[reactions[i]])
-                $("#pub_" + id +" .re-"+reactions[i]+"ct").text(json.reactionCounts[reactions[i]])
-                $("#pub_" + id +" .re-"+reactions[i]).removeClass("hide")
+        var regExp = new RegExp( ":", "g" ) ;
+        Object.keys(json.reactionCounts).forEach(function(keye) {
+            keyeClass=keye.replace(regExp,'');
+            if(json.reactionCounts[keye]){
+                console.log(json.reactionCounts[keye])
+                $("#pub_" + id +" .re-"+keyeClass+"ct").text(json.reactionCounts[keye])
+                $("#pub_" + id +" .re-"+keyeClass).removeClass("hide")
             }else{
-                $("#pub_" + id +" .re-"+reactions[i]+"ct").text(0)
+                $("#pub_" + id +" .re-"+keyeClass+"ct").text(0)
                 if($("#pub_" + id +" .reactions").hasClass("fullreact")){
-                    $("#pub_" + id +" .re-"+reactions[i]).addClass("hide")
+                    $("#pub_" + id +" .re-"+keyeClass).addClass("hide")
                 }
-                $("#pub_" + id +" .re-"+reactions[i]+"ct").text(json.reactionCounts[reactions[i]])
+                $("#pub_" + id +" .re-"+keyeClass+"ct").text(json.reactionCounts[keye])
             }
-        }
+        });
     }
 }
+function emojiReaction(emoji){
+    var acct_id = $("#post-acct-sel").val();
+    var id = $("#reply").val();
+    reaction(emoji,id,acct_id,null)
+    clear();
+    hide();
+}
 function reaction(mode,id,acct_id,tlid){
     var domain = localStorage.getItem("domain_" + acct_id);
     var at = localStorage.getItem("acct_"+ acct_id + "_at");

app/js/post/post.js

@@ -45,6 +45,7 @@ function post(mode,postvis) {
 	}else{
 		var cw_ltres=localStorage.getItem("cw_letters");
 	}
+	if(domain!="kirishima.cloud"){
 	if(mode!="pass" && !$("#cw").hasClass("cw-avail") && (str.length>cw_sent || (str.split("\n").length - 1)>cw_ltres)){
 		var electron = require("electron");
 		var remote=electron.remote;
@@ -69,6 +70,7 @@ function post(mode,postvis) {
 	  	})
 		  return false;
 	}
+}
 	if(localStorage.getItem("mode_" + domain)=="misskey"){
 		misskeyPost();
 		return;
@@ -78,6 +80,9 @@ function post(mode,postvis) {
 	var at = localStorage.getItem("acct_"+ acct_id + "_at");
 	var start = "https://" + domain + "/api/v1/statuses";
 	var reply = $("#reply").val();
+	if(str.indexOf(localStorage.getItem("stable"))==-1){
+		str+" #"+localStorage.getItem("stable");
+	}
 	var toot={
 		status: str
 	}
@@ -106,6 +111,7 @@ function post(mode,postvis) {
 		toot.status=str+"👁️";
 	}
 	//ここに非公開・未収載タグについてwarn
+	if(domain!="kirishima.cloud" && domain!="imastodon.net"){
 	if(~str.indexOf("#")){
 		if(vis == "local" || vis=="unlisted" || vis=="direct" || vis=="private"){
 			if(!confirm(lang.lang_post_tagVis)){
@@ -113,6 +119,7 @@ function post(mode,postvis) {
 			}
 		}
 	}
+}
 	if ($("#cw").hasClass("cw-avail")) {
 		var spo = $("#cw-text").val();
 		cw();
@@ -166,11 +173,7 @@ function post(mode,postvis) {
 	httpreq.send(JSON.stringify(toot));
     httpreq.onreadystatechange = function() {
 		if (httpreq.readyState === 4) {
-			if(str.indexOf(localStorage.getItem("stable"))==-1){
-				localStorage.removeItem("stable")
-			}
 			var json = httpreq.response;
-			console.log(json);
 			var box = localStorage.getItem("box");
 			if (box == "yes" || !box) {
 				$("#textarea").blur();
@@ -261,7 +264,7 @@ function misskeyPost(){
 function clear() {
 	$("#textarea").val("");
 	if(localStorage.getItem("stable")){
-		$("#textarea").val(localStorage.getItem("stable"));
+		$("#textarea").val("#"+localStorage.getItem("stable")+" ")
 	}
 	$("#textarea").attr("placeholder", lang.lang_toot);
 	$("#reply").val("");
@@ -304,4 +307,8 @@ function clear() {
 		$("#post-acct-sel").val(localStorage.getItem("main"));
 	}
 	$('select').material_select();
+	$("#left-side").show();
+	$("#default-emoji").show();
+	$("#unreact").show();
+	$("#addreact").addClass("hide");
 }

app/js/post/secure.js

@@ -60,7 +60,7 @@ function loadVis(){
 					memory = "public";
 				}
 				vis(memory);
-			} else if(vist == "server") {
+			} else if(vist == "useapi") {
 				var acct_id = $("#post-acct-sel").val();
 				var multi = localStorage.getItem("multi");
 				var obj = JSON.parse(multi);

app/js/post/status.js

@@ -236,6 +236,8 @@ function del(id, acct_id) {
 		httpreq.setRequestHeader('Content-Type', 'application/json');
 		httpreq.responseType = "json";
 		httpreq.send(JSON.stringify({i:at,noteId:id}));
+		$("[toot-id=" + id+ "]").hide();
+					$("[toot-id=" + id + "]").remove();
 	}else{
 		var start = "https://" + domain + "/api/v1/statuses/" + id;
 		var httpreq = new XMLHttpRequest();

app/js/post/suggest.js

@@ -13,6 +13,13 @@ input.addEventListener("focus", function() {
 	window.clearInterval(timer);
 	timer = window.setInterval(function() {
 		var new_val = input.value;
+		if(new_val==""){
+			$("#suggest").html("");
+			if($("#poll").hasClass("hide") && $("#emoji").hasClass("hide")){
+				$("#right-side").hide()
+			}
+			return;
+		}
 		if (prev_val != new_val) {
 			var semoji = new_val.match(/:(\S{3,})/);
 			if(semoji){
@@ -32,27 +39,29 @@ input.addEventListener("focus", function() {
 						}
 						}
 				}
-				
+				if(ehtml!=""){
+					$("#right-side").show()
+					$("#poll").addClass("hide")
+					$("#emoji").addClass("hide")
+				}else{
+					if($("#poll").hasClass("hide") && $("#emoji").hasClass("hide")){
+						$("#right-side").hide()
+					}
+				}
 				$("#suggest").html(ehtml);
 			}
 			
 			var tag = new_val.match(/#(\S{3,})/);
 			var acct = new_val.match(/@(\S{3,})/);
-			if(localStorage.getItem("imas")){
-				//セルフNP
-				var cpnp = new_val.match(/^(?!.*http)\/\/(\S{1,})/);
-			}else{
-				var cpnp=[];
-			}
-			if (cpnp && cpnp[1]) {
-				var q = cpnp[1];
-				cgNPs(q);
-			} else if (tag && tag[1]) {
+			if (tag && tag[1]) {
 				var q = tag[1];
 			} else if (acct && acct[1]) {
 				var q = acct[1];
 			}else  {
-				//$("#suggest").html("");
+				$("#suggest").html("");
+				if($("#poll").hasClass("hide") && $("#emoji").hasClass("hide")){
+					$("#right-side").hide()
+				}
 				return;
 			}
 			var domain = localStorage.getItem("domain_" + acct_id);
@@ -72,24 +81,38 @@ input.addEventListener("focus", function() {
 					todo(error);
 					console.error(error);
 				}).then(function(json) {
-					if (json.hashtags[0] && tag[1]) {
+					if (json.hashtags[0] && tag) {
+						if(tag[1]){
 						var tags = "";
 						Object.keys(json.hashtags).forEach(function(key4) {
 							var tag = json.hashtags[key4];
-							tags = tags + '<a onclick="tagInsert(\'#' + tag + '\',\'#' + q +
-								'\')" class="pointer">#' + tag + '</a>  ';
+							if(tag!=q){
+								tags = tags + '<a onclick="tagInsert(\'#' + tag + '\',\'#' + q +
+								'\')" class="pointer">#' + tag + '</a><br>';
+							}
 						});
-						$("#suggest").html("Tags:" + tags);
+						$("#right-side").show()
+						$("#suggest").html("Tags:<br>" + tags);
+						$("#poll").addClass("hide")
+						$("#emoji").addClass("hide")
+						}
 					} else if (json.accounts[0] && acct[1]) {
 						var accts = "";
 						Object.keys(json.accounts).forEach(function(key3) {
 							var acct = json.accounts[key3];
-							accts = accts + '<a onclick="tagInsert(\'@' + acct.acct +
-								'\',\'@' + q + '\')" class="pointer">@' + acct.acct + '</a>  ';
+							if(acct.acct!=q){
+								accts = accts + '<a onclick="tagInsert(\'@' + acct.acct +
+								'\',\'@' + q + '\')" class="pointer">@' + acct.acct + '</a><br>';
+							}
 						});
-						$("#suggest").html("@:" + accts);
+						$("#right-side").show()
+						$("#suggest").html(accts);
+						$("#poll").addClass("hide")
+						$("#emoji").addClass("hide")
 					} else {
-						$("#suggest").html("Not Found");
+						if($("#poll").hasClass("hide") && $("#emoji").hasClass("hide")){
+							$("#right-side").hide()
+						}
 					}
 				});
 			}
@@ -121,6 +144,9 @@ function tagInsert(code, del) {
 	}
 	$("#textarea").val(newt);
 	$("#textarea").focus();
+	if($("#poll").hasClass("hide") && $("#emoji").hasClass("hide")){
+		$("#right-side").hide()
+	}
 	$("#suggest").html("");
 }
 function cgNPs(q){

app/js/post/use-txtbox.js

@@ -1,10 +1,17 @@
 /*リプライ*/
-function re(id,at,acct_id,mode){
+function re(id,ats_cm,acct_id,mode){
+	clear();
+	var ats=ats_cm.split(',');
 	localStorage.setItem("nohide",true);
 	show();
 	$("#reply").val(id);
-	var te=$("#textarea").val();
-	$("#textarea").val("@"+at+" "+te);
+	for(var i=0;i<ats.length;i++){
+		var at=ats[i];
+		var te=$("#textarea").val();
+		if(at!=localStorage.getItem("user_"+acct_id)){
+			$("#textarea").val("@"+at+" "+te);
+		}
+	}
 	$("#rec").text(lang.lang_yesno);
 	$("#post-acct-sel").val(acct_id);
 	$("#post-acct-sel").prop("disabled", true);
@@ -32,6 +39,9 @@ function qt(id,acct_id,at,url){
 	if(!qt){
 		var qt="simple";
 	}
+	if(qt=="nothing"){
+		return false;
+	}
 	if(qt=="simple"){
 		show();
 		$("#textarea").val("\n"+url);

app/js/tl/datails.js

@@ -1,6 +1,11 @@
 //トゥートの詳細
-function details(id, acct_id, tlid) {
-	$(".toot-reset").html(lang.lang_details_nodata);
+function details(id, acct_id, tlid, mode) {
+	if(mode=="dm"){
+		$(".dm-hide").hide();
+	}else{
+		$(".dm-hide").show();
+	}
+	$(".toot-reset").html('<span class="no-data">'+lang.lang_details_nodata+'</span>');
 	var html = $("#timeline_"+tlid+" [toot-id=" + id + "]").html();
 	$("#toot-this").html(html);
 	$('#tootmodal').modal('open');
@@ -149,6 +154,9 @@ function replyTL(id, acct_id) {
 			}
 		}else{
 			var templete = parse([json], '', acct_id,"","",mute);
+			if(templete!=""){
+				$("#toot-reply .no-data").hide();
+			}
 			$("#toot-reply").prepend(templete);
 			$("#toot-reply .hide").html(lang.lang_details_filtered);
 			$("#toot-reply .by_filter").css("display","block");
@@ -211,6 +219,9 @@ function context(id, acct_id) {
 				var mute=[];
 			}
 			var templete = parse(json.descendants, '', acct_id,"","",mute);
+			if(templete!=""){
+				$("#toot-after .no-data").hide();
+			}
 			$("#toot-after").html(templete);
 			$("#toot-after .hide").html(lang.lang_details_filtered);
 			$("#toot-after .by_filter").css("display","block");
@@ -262,6 +273,9 @@ function beforeToot(id, acct_id, domain) {
 			console.error(error);
 		}).then(function(json) {
 			var templete = parse(json, 'noauth', acct_id);
+			if(templete!=""){
+				$("#toot-before .no-data").hide();
+			}
 			$("#toot-before").html(templete);
 			jQuery("time.timeago").timeago();
 		});
@@ -309,6 +323,9 @@ function userToot(id, acct_id, user) {
 			console.error(error);
 		}).then(function(json) {
 			var templete = parse(json, '', acct_id);
+			if(templete!=""){
+				$("#user-before .no-data").hide();
+			}
 			$("#user-before").html(templete);
 			jQuery("time.timeago").timeago();
 		});
@@ -335,6 +352,9 @@ function faved(id, acct_id) {
 		console.error(error);
 	}).then(function(json) {
 		var templete = userparse(json, '', acct_id);
+		if(templete!=""){
+			$("#toot-fav .no-data").hide();
+		}
 		$("#toot-fav").html(templete);
 	});
 }
@@ -392,62 +412,6 @@ function staCopy(id){
 	}
 	
 }
-//魚拓
-function shot(){
-	var title=$("#tootmodal").attr("data-id");
-	var off = $('#toot-this').offset();
-	var w=$("#toot-this").width()+50;
-	var h=$("#toot-this").height()+50;
-	var electron = require("electron");
-	const fs = require("fs");
-	const os = require('os')
-	const shell = electron.shell;
-	const path = require('path')
-	var ipc = electron.ipcRenderer;
-	let options = {
-        types: ['screen'],
-        thumbnailSize: {
-            width: window.parent.screen.width,
-            height: window.parent.screen.height
-          }
-	}
-	const desktopCapturer = electron.desktopCapturer;
-	desktopCapturer.getSources(options, function(error, sources) {
-		if (error) return console.log(error)
-
-		sources.forEach(function(source) {
-			if (source.name === 'Screen 1' || source.name === 'TheDesk') {
-                var durl=source.thumbnail.toDataURL();
-                var b64 = durl.match(
-                    /data:image\/png;base64,(.+)/
-                );
-                const screenshotPath = path.join(os.tmpdir(), 'screenshot.png');
-                const savePath = path.join(os.tmpdir(), 'screenshot.png');
-					var ipc = electron.ipcRenderer;
-					if(localStorage.getItem("savefolder")){
-						var save=localStorage.getItem("savefolder");
-					}else{
-						var save="";
-					}
-                    ipc.send('shot', ['file://' + screenshotPath,w,h,b64[1],title,off.top+50,off.left,save]);
-                    if($("#toot-this .img-parsed").length>0){
-                        for(i=0;i<$("#toot-this .img-parsed").length;i++){
-							var url=$("#toot-this .img-parsed").eq(i).attr("data-url");
-							if(localStorage.getItem("savefolder")){
-								var save=localStorage.getItem("savefolder");
-							}else{
-								var save="";
-							}
-                            ipc.send('shot-img-dl', [url,title+"_img"+i+".png",save]);
-                        }
-                    }
-                    return;
-					const message = `Saved screenshot to: ${screenshotPath}`
-					//screenshotMsg.textContent = message
-			}
-		})
-	})
-}
 //翻訳
 function trans(tar,to){
 	var html=$("#toot-this .toot").html();

app/js/tl/dm.js

@@ -16,7 +16,7 @@ function dm(acct_id, tlid, type,delc,voice) {
 		todo(error);
 		console.error(error);
 	}).then(function(json) {
-        var templete = dmParse(json, type, acct_id, tlid, "", mute);
+        var templete = '<div id="convList'+tlid+'">'+dmListParse(json, type, acct_id, tlid, "", mute)+'</div>';
         localStorage.setItem("lastobj_"+ tlid,json[0].id)
         $("#timeline_" + tlid).html(templete);
 	    additional(acct_id, tlid);
@@ -27,9 +27,37 @@ function dm(acct_id, tlid, type,delc,voice) {
     });
     
 }
+function dmmore(tlid){
+	var multi = localStorage.getItem("column");
+	var obj = JSON.parse(multi);
+	var acct_id = obj[tlid].domain;
+	var domain = localStorage.getItem("domain_" + acct_id);
+	var at = localStorage.getItem("acct_"+ acct_id + "_at");
+	var sid = $("#timeline_" + tlid + " .cvo").last().attr("unique-id");
+	var start = "https://" + domain + "/api/v1/conversations?max_id="+sid;
+	var type="dm";
+	fetch(start, {
+		method: 'GET',
+		headers: {
+			'content-type': 'application/json',
+			'Authorization': 'Bearer ' + at
+		},
+	}).then(function(response) {
+		return response.json();
+	}).catch(function(error) {
+		todo(error);
+		console.error(error);
+	}).then(function(json) {
+		var templete = '<div id="convList'+tlid+'">'+dmListParse(json, type, acct_id, tlid, "", mute)+'</div>';
+        $("#timeline_" + tlid).append(templete);
+			additional(acct_id, tlid);
+			jQuery("time.timeago").timeago();
+			moreloading=false;
+	})
+}
 //DMオブジェクトパーサー(トゥート)
-function dmParse(obj, mix, acct_id, tlid, popup, mutefilter) {
-    console.log(obj);
+function dmListParse(obj, mix, acct_id, tlid, popup, mutefilter) {
+	console.log(obj);
 	var templete = '';
 	if(obj[0]){
 		localStorage.setItem("lastunix_"+ tlid,date(obj[0].created_at, 'unix'));
@@ -172,6 +200,7 @@ function dmParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 	var local = [];
 	var times=[];
 	Object.keys(obj).forEach(function(key) {
+		var conv_id=obj[key].id;
 		var toot = obj[key].last_status;
 		var dis_name=escapeHTML(toot.account.display_name);
 		if(toot.account.emojis){
@@ -373,60 +402,6 @@ function dmParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			});
 			tags = '<div style="float:right">' + tags + '</div>';
 		}
-		//リプ数
-		if(toot.replies_count || toot.replies_count===0){
-			var replyct=toot.replies_count;
-		}else{
-			var replyct="";
-        }
-		//公開範囲を取得
-		var vis = "";
-		var visen = toot.visibility;
-		if (visen == "public") {
-			var vis =
-				'<i class="text-darken-3 material-icons gray sml vis-data pointer" title="'+lang.lang_parse_public+'('+lang.lang_parse_clickcopy+')" data-vis="public" onclick="staCopy(\''+id+'\')" style="font-size:1rem;">public</i>';
-			var can_rt = "";
-		} else if (visen == "unlisted") {
-			var vis =
-				'<i class="text-darken-3 material-icons blue-text vis-data pointer" title="'+lang.lang_parse_unlisted+'('+lang.lang_parse_clickcopy+')" data-vis="unlisted" onclick="staCopy(\''+id+'\')" style="font-size:1rem;">lock_open</i>';
-			var can_rt = "";
-		} else if (visen == "private") {
-			var vis =
-				'<i class="text-darken-3 material-icons orange-text vis-data pointer" title="'+lang.lang_parse_private+'('+lang.lang_parse_clickcopy+')" data-vis="private" onclick="staCopy(\''+id+'\')" style="font-size:1rem;">lock</i>';
-			var can_rt = "hide";
-		} else if (visen == "direct") {
-			var vis =
-				'<i class="text-darken-3 material-icons red-text vis-data pointer" title="'+lang.lang_parse_direct+'('+lang.lang_parse_clickcopy+')" data-vis="direct" onclick="staCopy(\''+id+'\')" style="font-size:1rem;">mail</i>';
-			var can_rt = "hide";
-		}
-		if (toot.account.acct == localStorage.getItem("user_" + acct_id)) {
-			var if_mine = "";
-			var mine_via="type-b";
-		} else {
-			var if_mine = "hide";
-			var mine_via="";
-		}
-		if (toot.favourited) {
-			var if_fav = " yellow-text";
-			var fav_app = "faved";
-		} else {
-			var if_fav = "";
-			var fav_app = "";
-		}
-		if (toot.reblogged) {
-			var if_rt = "teal-text";
-			var rt_app = "rted";
-		} else {
-			var if_rt = "";
-			var rt_app = "";
-		}
-		if (toot.pinned) {
-			var if_pin = "blue-text";
-			var pin_app = "pinned";
-		} else {
-			var if_pin = "";
-			var pin_app = "";
-		}
 		//アニメ再生
 		if (gif == "yes") {
 			var avatar = toot.account.avatar;
@@ -467,6 +442,13 @@ function dmParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 		}else{
 			var trans="";
 		}
+		if (toot.favourited) {
+			var if_fav = " yellow-text";
+			var fav_app = "faved";
+		} else {
+			var if_fav = "";
+			var fav_app = "";
+		}
 		//Cards
 		if (!card && toot.card) {
 			var cards=toot.card;
@@ -508,7 +490,7 @@ function dmParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 		}
 		}
 		templete = templete + '<div id="pub_' + toot.id + '" class="cvo ' +
-			boostback + ' ' + fav_app + ' ' + rt_app + ' ' + pin_app +
+			boostback + ' ' + fav_app + 
 			' ' + hasmedia + '" toot-id="' + id + '" unique-id="' + uniqueid + '" data-medias="'+media_ids+' " unixtime="' + date(obj[
 				key].created_at, 'unix') + '" '+if_notf+' onclick="dmStatus()">' +
 			'<div class="area-notice"><span class="gray sharesta">' + notice + home +
@@ -532,9 +514,10 @@ function dmParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			'</span><span class="toot ' + spoiler + '">' + content +
 			'</span>' +
 			'' + viewer + '' +
-			'</div>'+
+			'<br><a onclick="details(\'' + toot.id + '\',' + acct_id +
+			',\''+tlid+'\',\'dm\')" class="pointer waves-effect">'+lang.lang_parse_thread+'</a></div>'+
 			'<div class="area-vis"></div>'+
 			'</div></div>';
 	});
 	return templete;
-}
+}

app/js/tl/filter.js

@@ -101,17 +101,11 @@ function delreset(tlid){
 
 }
 /*ワードフィルター機能*/
-function filterToggle(){
-    if ($("#filter-box").hasClass("hide")) {
-        $("#filter-box").removeClass("hide");
-        $("#filter-box").addClass("show");
-		$("#filter-box").css("bottom","40px");
-		$("#filter-box").css("left",$('#filter-tgl').offset().left-$('#filter-box').width()/2+"px");
-		//フィルターロード
-	} else {
-        $("#filter-box").removeClass("show");
-		$("#filter-box").addClass("hide")
-	}
+function filterMenu(){
+    $("#left-menu div").removeClass("active");
+	$("#filterMenu").addClass("active");
+	$(".menu-content").addClass("hide");
+    $("#filter-box").removeClass("hide");
 }
 function filter(){
 	$("#filtered-words").html("");
@@ -140,18 +134,23 @@ function filter(){
 				var filterword = json[key];
 				var context = filterword.context.join(',');
 				filters = filters + escapeHTML(filterword.phrase)+'<span class="sml">(for '+context+')</span>:<a onclick="filterEdit(\'' + filterword.id + '\',\'' + acct_id +
-					'\')" class="pointer">'+lang_edit[lang]+'</a>/<a onclick="filterDel(' + filterword.id + ',' + acct_id +
-					')" class="pointer">'+lang_del[lang]+'</a><br> ';
+					'\')" class="pointer">'+lang.lang_edit+'</a>/<a onclick="filterDel(' + filterword.id + ',' + acct_id +
+					')" class="pointer">'+lang.lang_del+'</a><br> ';
 			});
 			if(filters==""){
-				filters=lang_filter_nodata[lang]+"<br>";
+				filters=lang.lang_filter_nodata+"<br>";
 			}
 			$("#filtered-words").html(filters);
 		}else{
-            $("#filtered-words").html(lang_filter_nodata[lang]);
+            $("#filtered-words").html(lang_filter_nodata);
         }
 	});
 }
+function filterTime(day,hour,min){
+	$("#days_filter").val(day)
+	$("#hours_filter").val(hour)
+	$("#mins_filter").val(min)
+}
 function makeNewFilter(){
 	var acct_id = $("#filter-acct-sel").val();
 	var phr=$("#filter-add-word").val();
@@ -170,7 +169,7 @@ function makeNewFilter(){
 	}
 	console.log(cont);
 	if(!cont.length){
-		$("#filtered-words").html('Error:'+lang_filter_errordegree[lang]);
+		$("#filtered-words").html('Error:'+lang.lang_filter_errordegree);
 	}
 	var exc=$("#except_filter:checked").val();
 	var who=$("#wholeword_filter:checked").val();
@@ -215,7 +214,7 @@ function makeNewFilter(){
 			$("#days_filter").val("0");
 			$("#hours_filter").val("0");
 			$("#mins_filter").val("0");
-			$("#add-filter-btn").text(lang_add[lang]);
+			$("#add-filter-btn").text(lang.lang_add);
 			$("#filter-edit-id").val("")
 		}
 	}
@@ -231,7 +230,7 @@ function filterEdit(id,acct_id){
 		$("#days_filter").val("0");
 		$("#hours_filter").val("0");
 		$("#mins_filter").val("0");
-	$("#add-filter-btn").text(lang_edit[lang]);
+	$("#add-filter-btn").text(lang.lang_edit);
 	$("#filter-edit-id").val(id);
 	var domain = localStorage.getItem("domain_" + acct_id);
     var at = localStorage.getItem("acct_"+ acct_id + "_at");
@@ -427,6 +426,16 @@ function exclude(key){
 		}else{
 			excludetxt="?exclude_types[]=follow"
 		}
+		var follow=true;
+	}else{
+		var follow=false;
+	}
+	if($('#exc-poll-'+key+':checked').val()){
+		if(reply || bt || fav || follow){
+			excludetxt=excludetxt+"&exclude_types[]=poll"
+		}else{
+			excludetxt="?exclude_types[]=poll"
+		}
 	}else{
 	}
 	localStorage.setItem("exclude-"+key,excludetxt)

app/js/tl/list.js

@@ -1,14 +1,10 @@
-function listToggle(){
-    if ($("#list-box").hasClass("hide")) {
-        $("#list-box").removeClass("hide");
-        $("#list-box").addClass("show");
-		$("#list-box").css("bottom","40px");
-		$("#list-box").css("left",$('#list-tgl').offset().left-$('#list-box').width()/2+"px");
-		//リストロード
-	} else {
-        $("#list-box").removeClass("show");
-		$("#list-box").addClass("hide")
-	}
+function listMenu(){
+    $("#left-menu div").removeClass("active");
+	$("#listMenu").addClass("active");
+	$(".menu-content").addClass("hide");
+    $("#list-box").removeClass("hide");
+	$('ul.tabs').tabs('select_tab', 'src-sta');
+	$("#src-contents").html("");
 }
 
 
@@ -16,40 +12,68 @@ function list(){
     $("#lists-user").html("");
     var acct_id = $("#list-acct-sel").val();
     var domain = localStorage.getItem("domain_" + acct_id);
-    var at = localStorage.getItem("acct_"+ acct_id + "_at");
-    var start = "https://" + domain + "/api/v1/lists"
-	console.log(start)
-	fetch(start, {
-		method: 'GET',
-		headers: {
-			'content-type': 'application/json',
-			'Authorization': 'Bearer ' + at
-		},
-	}).then(function(response) {
-		return response.json();
-	}).catch(function(error) {
-		todo(error);
-		console.error(error);
-	}).then(function(json) {
-		if (json) {
-			var lists = "";
-			Object.keys(json).forEach(function(key) {
-                var list = json[key];
-				lists = lists + list.title+':<a onclick="listShow(' + list.id + ',\'' + list.title + '\',\'' + acct_id +
-					'\')" class="pointer">'+lang.lang_list_show+'</a>/<a onclick="listUser(' + list.id + ',' + acct_id +
-					')" class="pointer">'+lang.lang_list_users+'</a><br> ';
-			});
-			$("#lists").html(lists);
-		}else{
-            $("#lists").html(lang.lang_list_nodata);
-        }
-	});
+	var at = localStorage.getItem("acct_"+ acct_id + "_at");
+	if(localStorage.getItem("mode_" + domain)=="misskey"){
+		var start = "https://" + domain + "/api/users/lists/list"
+		fetch(start, {
+			method: 'POST',
+			body: JSON.stringify({
+				i:at
+			}),
+		}).then(function(response) {
+			return response.json();
+		}).catch(function(error) {
+			todo(error);
+			console.error(error);
+		}).then(function(json) {
+			if (json) {
+				var lists = "";
+				Object.keys(json).forEach(function(key) {
+					var list = json[key];
+					lists = lists + list.title+':<a onclick="listShow(\'' + list.id + '\',\'' + list.title + '\',\'' + acct_id +
+						'\')" class="pointer">'+lang.lang_list_show+'</a><br>';
+				});
+				$("#lists").html(lists);
+			}else{
+				$("#lists").html(lang.lang_list_nodata);
+			}
+		});
+    }else{
+		var start = "https://" + domain + "/api/v1/lists"
+		console.log(start)
+		fetch(start, {
+			method: 'GET',
+			headers: {
+				'content-type': 'application/json',
+				'Authorization': 'Bearer ' + at
+			},
+		}).then(function(response) {
+			return response.json();
+		}).catch(function(error) {
+			todo(error);
+			console.error(error);
+		}).then(function(json) {
+			if (json) {
+				var lists = "";
+				Object.keys(json).forEach(function(key) {
+					var list = json[key];
+					lists = lists + list.title+':<a onclick="listShow(\'' + list.id + '\',\'' + list.title + '\',\'' + acct_id +
+						'\')" class="pointer">'+lang.lang_list_show+'</a>/<a onclick="listUser(\'' + list.id + '\',' + acct_id +
+						')" class="pointer">'+lang.lang_list_users+'</a><br>';
+				});
+				$("#lists").html(lists);
+			}else{
+				$("#lists").html(lang.lang_list_nodata);
+			}
+		});
+	}
 }
 function makeNewList(){
     var acct_id = $("#list-acct-sel").val();
     var text=$("#list-add").val();
     var domain = localStorage.getItem("domain_" + acct_id);
-    var at = localStorage.getItem("acct_"+ acct_id + "_at");
+	var at = localStorage.getItem("acct_"+ acct_id + "_at");
+	if(localStorage.getItem("mode_" + domain)!="misskey"){
     var start = "https://" + domain + "/api/v1/lists"
 	console.log(start)
 	var httpreq = new XMLHttpRequest();
@@ -67,6 +91,25 @@ function makeNewList(){
 			$("#list-add").val("")
 		}
 	}
+}else{
+	var start = "https://" + domain + "/api/users/lists/create"
+	console.log(start)
+	var httpreq = new XMLHttpRequest();
+	httpreq.open('POST', start, true);
+	httpreq.setRequestHeader('Content-Type', 'application/json');
+	httpreq.responseType = "json";
+	httpreq.send(JSON.stringify({
+		i:at,
+		title: text
+	}));
+    httpreq.onreadystatechange = function() {
+		if (httpreq.readyState === 4) {
+			var json = httpreq.response;
+			list();
+			$("#list-add").val("")
+		}
+	}
+}
 }
 function listShow(id,title,acct_id){
     localStorage.setItem("list_"+id+"_"+acct_id,title);
@@ -74,8 +117,8 @@ function listShow(id,title,acct_id){
 }
 function listUser(id,acct_id){
     var domain = localStorage.getItem("domain_" + acct_id);
-    var at = localStorage.getItem("acct_"+ acct_id + "_at");
-    var start = "https://" + domain + "/api/v1/lists/"+id+"/accounts"
+	var at = localStorage.getItem("acct_"+ acct_id + "_at");
+	var start = "https://" + domain + "/api/v1/lists/"+id+"/accounts"
 	console.log(start)
 	fetch(start, {
 		method: 'GET',
@@ -103,7 +146,8 @@ function listUser(id,acct_id){
 }
 function hisList(user,acct_id){
     var domain = localStorage.getItem("domain_" + acct_id);
-    var at = localStorage.getItem("acct_"+ acct_id + "_at");
+	var at = localStorage.getItem("acct_"+ acct_id + "_at");
+	if(localStorage.getItem("mode_" + domain)!="misskey"){
     var start = "https://" + domain + "/api/v1/lists"
 	console.log(start)
 	fetch(start, {
@@ -122,7 +166,7 @@ function hisList(user,acct_id){
 			var lists = lang.lang_list_add+"<br>";
 			Object.keys(json).forEach(function(key) {
                 var list = json[key];
-				lists = lists + '<a onclick="listAdd(' + list.id + ',\'' + user + '\',\'' + acct_id +
+				lists = lists + '<a onclick="listAdd(\'' + list.id + '\',\'' + user + '\',\'' + acct_id +
 					'\')" class="pointer">'+escapeHTML(list.title)+'</a><br> ';
 			});
 			$("#his-lists-a").html(lists);
@@ -148,28 +192,66 @@ function hisList(user,acct_id){
 			var lists = lang.lang_list_remove+"<br>";
 			Object.keys(json).forEach(function(key) {
                 var list = json[key];
-				lists = lists + '<a onclick="listRemove(' + list.id + ',\'' + user + '\',\'' + acct_id +
+				lists = lists + '<a onclick="listRemove(\'' + list.id + '\',\'' + user + '\',\'' + acct_id +
 					'\')" class="pointer">'+list.title+'</a><br> ';
 			});
 			$("#his-lists-b").html(lists);
 		}else{
             $("#his-lists-b").html(lang.lang_list_nodata);
         }
-    });
+	});
+}else{
+	var start = "https://" + domain + "/api/users/lists/list"
+		fetch(start, {
+			method: 'POST',
+			body: JSON.stringify({
+				i:at
+			}),
+		}).then(function(response) {
+			return response.json();
+		}).catch(function(error) {
+			todo(error);
+			console.error(error);
+		}).then(function(json) {
+			if (json) {
+				var lists = "";
+				Object.keys(json).forEach(function(key) {
+					var list = json[key];
+					lists = lists + list.title+':<a onclick="listShow(\'' + list.id + '\',\'' + list.title + '\',\'' + acct_id +
+						'\')" class="pointer">'+lang.lang_list_show+'</a>/<a onclick="listAdd(\'' + list.id + '\',\'' + user + '\',\'' + acct_id +
+						'\')" class="pointer">'+lang.lang_list_add+lang.lang_list_add_misskey+'</a><br>';
+				});
+				$("#his-lists-a").html(lists);
+			}else{
+				$("#his-lists-a").html(lang.lang_list_nodata);
+			}
+		});
+		$("#his-lists-b").html("");
+}
 }
 function listAdd(id,user,acct_id){
     var domain = localStorage.getItem("domain_" + acct_id);
-    var at = localStorage.getItem("acct_"+ acct_id + "_at");
-    var start = "https://" + domain + "/api/v1/lists/"+id+"/accounts"
+	var at = localStorage.getItem("acct_"+ acct_id + "_at");
+	if(localStorage.getItem("mode_" + domain)=="misskey"){
+		var start = "https://" + domain + "/api/users/lists/push"
+		var i={
+			i:at,
+			listId:id,
+			userId:user
+		}
+	}else{
+		var start = "https://" + domain + "/api/v1/lists/"+id+"/accounts"
+		var i={
+			account_ids: [user]
+		}
+	}
 	console.log(start)
 	var httpreq = new XMLHttpRequest();
 	httpreq.open('POST', start, true);
 	httpreq.setRequestHeader('Content-Type', 'application/json');
 	httpreq.setRequestHeader('Authorization', 'Bearer ' + at);
 	httpreq.responseType = "json";
-	httpreq.send(JSON.stringify({
-		account_ids: [user]
-	}));
+	httpreq.send(JSON.stringify(i));
     httpreq.onreadystatechange = function() {
 		if (httpreq.readyState === 4) {
 			var json = httpreq.response;
@@ -180,16 +262,28 @@ function listAdd(id,user,acct_id){
 function listRemove(id,user,acct_id){
     var domain = localStorage.getItem("domain_" + acct_id);
     var at = localStorage.getItem("acct_"+ acct_id + "_at");
-    var start = "https://" + domain + "/api/v1/lists/"+id+"/accounts"
+    if(localStorage.getItem("mode_" + domain)=="misskey"){
+		var start = "https://" + domain + "/api/users/lists/push"
+		var method='POST'
+		var i={
+			i:at,
+			listId:id,
+			userId:user
+		}
+	}else{
+		var start = "https://" + domain + "/api/v1/lists/"+id+"/accounts"
+		var method='DELETE'
+		var i={
+			account_ids: [user]
+		}
+	}
 	console.log(start)
 	var httpreq = new XMLHttpRequest();
-	httpreq.open('DELETE', start, true);
+	httpreq.open(method, start, true);
 	httpreq.setRequestHeader('Content-Type', 'application/json');
 	httpreq.setRequestHeader('Authorization', 'Bearer ' + at);
 	httpreq.responseType = "json";
-	httpreq.send(JSON.stringify({
-		account_ids: [user]
-	}));
+	httpreq.send(JSON.stringify(i));
     httpreq.onreadystatechange = function() {
 		if (httpreq.readyState === 4) {
 			var json = httpreq.response;

app/js/tl/misskeyparse.js

@@ -160,6 +160,15 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
         }else{
 			disname="";
 		}
+		//絵文字があれば
+		Object.keys(toot.user.emojis).forEach(function(key5) {
+			var emoji = toot.user.emojis[key5];
+			var shortcode = emoji.name;
+			var emoji_url = '<img draggable="false" src="' + emoji.url +
+				'" class="emoji-img" data-emoji="'+shortcode+'" alt=" :'+shortcode+': ">';
+			var regExp = new RegExp(":" + shortcode + ":", "g");
+			dis_name = dis_name.replace(regExp, emoji_url);
+		});
 		if (mix == "notf") {
 			if (gif == "yes") {
 				noticeavatar = toot.user.avatarUrl;
@@ -192,24 +201,25 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 					"congrats":"🎉",
 					"amgry":"💢",
 					"confused":"😥",
-					"pudding":"🍮"
+					"pudding":"🍮",
+					"star":"⭐"
 				}
 				var icon=reactions[toot.reaction];
-				var reactions=["like","love","laugh","hmm","surprise","congrats","angry","confused","pudding"];
-                for(var i=0;i<reactions.length;i++){
-                    if(toot.note.reactionCounts[reactions[i]]){
-                        $("#pub_" + id +" .re-"+reactions[i]+"ct").text(toot.note.reactionCounts[reactions[i]])
-                        $("#pub_" + id +" .re-"+reactions[i]).removeClass("hide")
-                    }else{
-                        $("#pub_" + id +" .re-"+reactions[i]+"ct").text(0)
-                        if($("#pub_" + id +" .reactions").hasClass("fullreact")){
-                            $("#pub_" + id +" .re-"+reactions[i]).addClass("hide")
-                        }else{
-                            $("#pub_" + id +" .re-"+reactions[i]).removeClass("hide")
-                        }
-                        $("#pub_" + id +" .re-"+reactions[i]+"ct").text(toot.note.reactionCounts[reactions[i]])
-                    }
-                }
+				var emojisData = JSON.parse(localStorage.getItem("emoji_" + acct_id));
+				if(!icon){
+						if(emojisData){
+							var num = emojisData.length;
+							var ehtml="";
+							for (i = 0; i < num; i++) {
+								var emoji = emojisData[i];
+								if (":"+emoji.shortcode+":"==toot.reaction) {
+									if (emoji) {
+										icon='<img src="'+emoji.url+'" style="width:1rem">';
+									}
+								}
+								}
+						}
+				}
 			}else{
 				var icon = '<i class="big-text material-icons indigo-text" style="font-size:17px">info</i>';
 			}
@@ -250,19 +260,19 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 					var ipc = electron.ipcRenderer;
 					var os = electron.remote.process.platform;
 					var options = {
-						body: toot.account.display_name+"(" + toot.account.acct +")"+what+"\n\n"+$.strip_tagstemp(toot.status.content),
-						icon: toot.account.avatar
+						body: toot.user.name+"(" + toot.user.username +")"+what+"\n\n"+$.strip_tagstemp(toot.note.text),
+						icon: toot.user.avatarUrl
 					  };
 					if(os=="darwin"){
 						var n = new Notification('TheDesk:'+domain, options);
 					}else{
 						ipc.send('native-notf', [
 							'TheDesk:'+domain,
-							toot.account.display_name+"(" + toot.account.acct +")"+what+"\n\n"+$.strip_tagstemp(toot.status.content),
-							toot.account.avatar,
+							toot.user.name+"(" + toot.user.username +")"+what+"\n\n"+$.strip_tagstemp(toot.note.text),
+							toot.user.avatarUrl,
 							"toot",
 							acct_id,
-							toot.status.id
+							toot.note.id
 						]);
 					}
 				}
@@ -395,7 +405,7 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			var emojick = toot.emojis[0];
 		}else{
 			var emojick=false;
-        }
+		}
         //デフォ絵文字
         if(content){
 			//MFM
@@ -403,17 +413,35 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			content=content.replace(/`(.+)`/gi, '<code>$1</code>')
 			content=content.replace(/(http(s)?:\/\/[\x21-\x7e]+)/gi, '<a href="$1" target="_blank">$1</a>')
 			content=content.replace(/\(\(\((.+)\)\)\)/gi, '<span class="shake">$1</span>')
-			content=content.replace(/<motion>(.+)<\/motion>/gi, '<span class="shake">$1</span>')
+			content=content.replace(/&lt;motion&gt;(.+)&lt;\/motion&gt;/gi, '<span class="shake">$1</span>')
 			content=content.replace(/\*\*\*([^*]+)\*\*\*/gi, '<span class="shake" style="font-size:200%">$1</span>')
 			content=content.replace(/\*\*([^*]+)\*\*/gi, '<b>$1</b>')
 			content=content.replace(/^(.+)\s(検索|search)$/gmi, '<div class="input-field"><i class="material-icons prefix">search</i><input type="text" style="width:calc( 60% - 80px);" name="q" value="$1" id="srcbox_'+toot.id+'"><label for="src" data-trans="src" class="">検索</label><button class="btn waves-effect indigo" style="width:40%;" data-trans-i="src" onclick="goGoogle(\''+toot.id+'\')">検索</button></div>')
 			content=content.replace(/\[(.+)\]\(<a href="(http(s)?:\/\/[\x21-\x7e]+)".+\)/gi,'<a href="$2" target="_blank">$1</a>');
-			
+			content=content.replace(/&lt;center&gt;/gi, '<div class="center">')
+			content=content.replace(/&lt;\/center&gt;/gi, '</div>')
+			content=content.replace(/&lt;flip&gt;(.+)&lt;\/flip&gt;/gi, '<span class="fa fa-flip-horizontal">$1</span>')
+			content=content.replace(/&lt;small&gt;(.+)&lt;\/small&gt;/gi, '<small>$1</small>')
+			content=content.replace(/&lt;i&gt;(.+)&lt;\/i&gt;/gi, '<i>$1</i>')
+			content=content.replace(/&lt;spin&gt;(.+)&lt;\/spin&gt;/gi, '<span class="fa fa-spin">$1</span>')
+			content=content.replace(/\*\*(.+)\*\*/gi, '<b>$1</b>')
+			content=content.replace(/&lt;jump&gt;(.+)&lt;\/jump&gt;/gi, '<span class="jump">$1</jump>')
             content=twemoji.parse(content);
         }else{
             content="";
         }
-		
+		//絵文字があれば
+		if (emojick) {
+			Object.keys(toot.emojis).forEach(function(key5) {
+				var emoji = toot.emojis[key5];
+				var shortcode = emoji.name;
+				var emoji_url = '<img draggable="false" src="' + emoji.url +
+					'" class="emoji-img" data-emoji="'+shortcode+'" alt=" :'+shortcode+': ">';
+				var regExp = new RegExp(":" + shortcode + ":", "g");
+				content = content.replace(regExp, emoji_url);
+				spoil = spoil.replace(regExp, emoji_url);
+			});
+		}
 		if(dis_name){
 			dis_name=twemoji.parse(dis_name);
 		}else{
@@ -606,8 +634,46 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			});
 			poll='<div class="vote_'+toot.id+'">'+poll+'</div>';
 		}
-        //Reactions
+		/*
+		
+			*/
+			if(localStorage.getItem("emojiReaction_" + acct_id)=="disabled"){
+				var freeReact="hide";
+			}else{
+				var freeReact="";
+			}
+		//Reactions
         if(toot.reactionCounts){
+			var addReact="";
+			Object.keys(toot.reactionCounts).forEach(function(keye) {
+				var thisReact=toot.reactionCounts[keye];
+					 if(keye=="like"){ var defaultEmoji=true;}
+				else if(keye=="love"){ var defaultEmoji=true; }
+				else if(keye=="laugh"){ var defaultEmoji=true; }
+				else if(keye=="hmm"){ var defaultEmoji=true; }
+				else if(keye=="surprise"){ var defaultEmoji=true; }
+				else if(keye=="congrats"){ var defaultEmoji=true; }
+				else if(keye=="angry"){ var defaultEmoji=true; }
+				else if(keye=="confused"){ var defaultEmoji=true; }
+				else if(keye=="pudding"){ var defaultEmoji=true; }
+				else{
+					var obj = JSON.parse(localStorage.getItem("emoji_" + acct_id));
+				if(obj){
+					var num = obj.length;
+					var ehtml="";
+					for (i = 0; i < num; i++) {
+						var emoji = obj[i];
+						if (":"+emoji.shortcode+":"==keye) {
+							if (emoji) {
+								addReact=addReact+	'<span class="reaction "><a onclick="reaction(\''+keye+'\',\'' + toot.id + '\',' + acct_id +
+								',\'' + tlid +'\')" class="waves-effect waves-dark btn-flat pointer" style="padding:0;margin-left:3px;"><img src="'+emoji.url+'" style="width:13px;"></a><span class="re-'+emoji.shortcode+'ct">'+thisReact+
+								'</span></span>';
+							}
+						}
+						}
+				}
+				}
+			});
         if(toot.reactionCounts.like){
             var like=toot.reactionCounts.like;
             var likehide="";
@@ -676,7 +742,10 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
             var like=0;var love=0;var laugh=0;var hmm=0;var surprise=0;var congrats=0;var angry=0;var confused=0;var pudding=0;
             var likehide="hide";var lovehide="hide";var laughhide="hide";var hmmhide="hide";var suphide="hide";var conghide="hide";var anghide="hide";var confhide="hide";var pudhide="hide";
             var fullhide="hide";
-        }
+		}
+		if(!addReact && likehide=="hide"&& lovehide=="hide"&& laughhide=="hide"&&  hmmhide=="hide"&&  suphide=="hide"&& conghide=="hide"&&  anghide=="hide"&&  confhide=="hide"&& pudhide=="hide"){
+			var fullhide="hide";
+		}
         if(toot.myReaction){
             var reacted=toot.myReaction;
         }else{
@@ -687,6 +756,11 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			content='<span class="gray">This post has no content. It may be media-only, private or deleted.</span>';
 		}
 		var trans="";
+		if(toot.user.emojis){
+			var actemojick = toot.user.emojis[0];
+		}else{
+			var actemojick=false;
+		}
 		templete = templete + '<div id="pub_' + toot.id + '" class="cvo ' +
 			boostback + ' ' + fav_app + ' ' + rt_app + '  ' + hasmedia + '" toot-id="' + id + '" unique-id="' + uniqueid + '" data-medias="'+media_ids+' " unixtime="' + date(obj[
 				key].created_at, 'unix') + '" '+if_notf+' onmouseover="mov(\'' + toot.id + '\',\''+tlid+'\',\'mv\')" onclick="mov(\'' + toot.id + '\',\''+tlid+'\',\'cl\')" onmouseout="resetmv(\'mv\')" reacted="'+reacted+'">' +
@@ -711,8 +785,8 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			api_spoil + ' cw_text_' + toot.id + '">' + spoil + spoiler_show +
 			'</span>' +
 			'' + viewer + '' +
-            '</div><div class="area-additional"><span class="additional">'+analyze+
-            '<div class="reactions '+fullhide+'" style="height: 25px;"><span class="'+likehide+' reaction re-like"><a onclick="reaction(\'like\',\'' + toot.id + '\',' + acct_id +
+			'</div><div class="area-additional"><span class="additional">'+analyze+
+			'<div class="reactions '+fullhide+'" style="height: 25px;"><span class="'+likehide+' reaction re-like"><a onclick="reaction(\'like\',\'' + toot.id + '\',' + acct_id +
             ',\'' + tlid +'\')" class="waves-effect waves-dark btn-flat" style="padding:0;margin-left:3px;">'+twemoji.parse("👍")+'</a><span class="re-likect">'+like+
             '</span></span><span class="'+lovehide+' reaction re-love"><a onclick="reaction(\'love\',\'' + toot.id + '\',' + acct_id +
             ',\'' + tlid +'\')" class="waves-effect waves-dark btn-flat pointer" style="padding:0;margin-left:3px;">'+twemoji.parse("💓")+'</a><span class="re-lovect">'+love+
@@ -730,7 +804,9 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
             ',\'' + tlid +'\')" class="waves-effect waves-dark btn-flat pointer" style="padding:0;margin-left:3px;">'+twemoji.parse("😥")+'</a><span class="re-confusedct">'+confused+
             '</span></span><span class="'+pudhide+' reaction re-pudding"><a onclick="reaction(\'pudding\',\'' + toot.id + '\',' + acct_id +
             ',\'' + tlid +'\')" class="waves-effect waves-dark btn-flat pointer" style="padding:0;margin-left:3px;">'+twemoji.parse("🍮")+'</a><span class="re-puddingct">'+pudding+
-			'</span></div>'+poll + mentions + tags + '</div>' +
+			'</span></span>'+addReact+
+			'<i class="material-icons pointer hide freeReact '+freeReact+'" style="font-size:1.0rem; padding-left:5px;position: relative;top: 3px;" onclick="reactioncustom(\''+acct_id+'\',\''+id+'\')">add_box</i></div>'
+			+poll + mentions + tags + '</div>' +
 			'<div class="area-vis"></div>'+
 			'<div class="area-actions '+mouseover+'">' +
 			'<div class="action">'+vis+'</div>'+

app/js/tl/mix.js

@@ -54,13 +54,12 @@ function mixtl(acct_id, tlid, type,delc,voice) {
 							var mute=[];
 						}
 						if(type=="integrated"){
-							templete = templete+parse([timeline[key]], '', acct_id, tlid, "", mute);
+							templete = templete+parse([timeline[key]], '', acct_id, tlid, "", mute, "mix");
 						}else if(type=="plus"){
 							if(timeline[key].account.acct==timeline[key].account.username){
-								templete = templete+parse([timeline[key]], '', acct_id, tlid, "", mute);
+								templete = templete+parse([timeline[key]], '', acct_id, tlid, "", mute, "plus");
 							}
 						}
-                        
                     }
                 }
 
@@ -124,7 +123,7 @@ function mixre(acct_id, tlid, TLtype, mute,delc,voice,mode) {
 				if(voice){
 					say(obj.content)
 				}	
-				var templete = parse([obj], type, acct_id, tlid,"",mute);
+				var templete = parse([obj], type, acct_id, tlid,"",mute, "mix");
 				var pool = localStorage.getItem("pool_" + tlid);
 				if (pool) {
 					pool = templete + pool;
@@ -168,7 +167,7 @@ function mixre(acct_id, tlid, TLtype, mute,delc,voice,mode) {
 				var templete = parse([obj], '', acct_id, tlid);
 			}else if(TLtype=="plus"){
 				if(obj.account.acct==obj.account.username){
-					var templete = parse([obj], '', acct_id, tlid,"",mute);
+					var templete = parse([obj], '', acct_id, tlid,"",mute, "mix");
 				}else{
 					var templete="";
 				}
@@ -177,7 +176,7 @@ function mixre(acct_id, tlid, TLtype, mute,delc,voice,mode) {
 				if(voice){
 					say(obj.content)
 				}	
-				var templete = parse([obj], type, acct_id, tlid,"",mute);
+				var templete = parse([obj], type, acct_id, tlid,"",mute,"mix");
 				var pool = localStorage.getItem("pool_" + tlid);
 				if (pool) {
 					pool = templete + pool;
@@ -240,6 +239,7 @@ function mixmore(tlid,type) {
 	var multi = localStorage.getItem("column");
 	var obj = JSON.parse(multi);
 	var acct_id = obj[tlid].domain;
+	moreloading=true;
 	todo("Integrated TL MoreLoading...(Local)");
 	var domain = localStorage.getItem("domain_" + acct_id);
 	var at = localStorage.getItem("acct_"+ acct_id + "_at");
@@ -291,10 +291,10 @@ function mixmore(tlid,type) {
 							var mute=[];
 						}
                         if(type=="integrated"){
-							templete = templete+parse([timeline[key]], '', acct_id, tlid,"",mute);
+							templete = templete+parse([timeline[key]], '', acct_id, tlid,"",mute,"mix");
 						}else if(type=="plus"){
 							if(timeline[key].account.acct==timeline[key].account.username){
-								templete = templete+parse([timeline[key]], '', acct_id, tlid,"",mute);
+								templete = templete+parse([timeline[key]], '', acct_id, tlid,"",mute,"mix");
 							}
 						}
                     }
@@ -303,9 +303,9 @@ function mixmore(tlid,type) {
             });
             
              $("#timeline_" + tlid).append(templete);
-            mixre(acct_id, tlid);
 			additional(acct_id, tlid);
 			jQuery("time.timeago").timeago();
+			moreloading=false;
 			todc();
         });
 	});

app/js/tl/notification.js

@@ -44,7 +44,7 @@ function notfColumn(acct_id, tlid, sys){
     httpreq.onreadystatechange = function() {
 		if (httpreq.readyState === 4) {
 			var json = httpreq.response;
-			var max_id = httpreq.getResponseHeader("link").match(/\?max_id=([0-9]+)/)[1];
+			var max_id = httpreq.getResponseHeader("link").match(/[?&]{1}max_id=([0-9]+)/)[1];
 			if(json[0]){
 				var templete="";
 				var lastnotf=localStorage.getItem("lastnotf_" + acct_id);
@@ -60,13 +60,13 @@ function notfColumn(acct_id, tlid, sys){
 						var ipc = electron.ipcRenderer;
 						var os = electron.remote.process.platform;
 							var options = {
-								body: ct+lang_notf_new[lang],
+								body: ct+lang.lang_notf_new,
 								icon: localStorage.getItem("prof_"+acct_id)
 							  };
 							if(os=="darwin"){
 								var n = new Notification('TheDesk:'+domain, options);
 							}else{
-								ipc.send('native-notf', ['TheDesk:'+domain,ct+lang_notf_new[lang],localStorage.getItem("prof_"+acct_id)]);
+								ipc.send('native-notf', ['TheDesk:'+domain,ct+lang.lang_notf_new,localStorage.getItem("prof_"+acct_id)]);
 							}
 						
 					}
@@ -233,13 +233,13 @@ function notfCommon(acct_id, tlid, sys) {
 				var ipc = electron.ipcRenderer;
 				var os = electron.remote.process.platform;
 					var options = {
-						body: ct+lang_notf_new[lang],
+						body: ct+lang.lang_notf_new[lang],
 						icon: localStorage.getItem("prof_"+acct_id)
 					  };
 					if(os=="darwin"){
 						var n = new Notification('TheDesk:'+domain, options);
 					}else{
-						ipc.send('native-notf', ['TheDesk:'+domain,ct+lang_notf_new[lang],localStorage.getItem("prof_"+acct_id)]);
+						ipc.send('native-notf', ['TheDesk:'+domain,ct+lang.lang_notf_new[lang],localStorage.getItem("prof_"+acct_id)]);
 					}
 				
 			}
@@ -397,7 +397,7 @@ function notfmore(tlid) {
 		if (httpreq.readyState === 4) {
 			var json = httpreq.response;
 			console.log(json);
-			var max_id = httpreq.getResponseHeader("link").match(/\?max_id=([0-9]+)/)[1];
+			var max_id = httpreq.getResponseHeader("link").match(/[?&]{1}max_id=([0-9]+)/)[1];
 			if(json[0]){
 				var templete="";
 				var lastnotf=localStorage.getItem("lastnotf_" + acct_id);
@@ -482,23 +482,12 @@ function notfCanceler(acct){
 function allNotfRead(){
 	console.log(localStorage.getItem("notf-fav_2"));
 	var multi = localStorage.getItem("multi");
-	if (!multi) {
-		var obj = [{
-			at: localStorage.getItem("acct_0_at"),
-			name: localStorage.getItem("name_0"),
-			domain: localStorage.getItem("domain_0"),
-			user: localStorage.getItem("user_0"),
-			prof: localStorage.getItem("prof_0"),
-			id: localStorage.getItem("user-id_0")
-		}];
-		var json = JSON.stringify(obj);
-		localStorage.setItem("multi", json);
-	} else {
+	if (multi) {
 		var obj = JSON.parse(multi);
-	}
 	Object.keys(obj).forEach(function(key) {
 		console.log(key);
 		notfCanceler(key)
 	});
 }
+}
 allNotfRead()

app/js/tl/parse.js

@@ -1,5 +1,5 @@
 //オブジェクトパーサー(トゥート)
-function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
+function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 	var templete = '';
 	if(obj[0]){
 		if(tlid===1){
@@ -8,7 +8,6 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 		localStorage.setItem("lastunix_"+ tlid,date(obj[0].created_at, 'unix'));
 	}
 	
-	var actb = localStorage.getItem("action_btns");
 	var actb='re,rt,fav,qt,del,pin,red';
 	if(actb){
 		var actb = actb.split(',');
@@ -22,12 +21,26 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			disp[actb[k]]=tp;
 		}
 	}
+	var qt = localStorage.getItem("quote");
+	if(qt=="nothing" || !qt){
+		var qtClass="hide";
+	}else{
+		var qtClass="";
+	}
 	var datetype = localStorage.getItem("datetype");
 	var nsfwtype = localStorage.getItem("nsfw");
 	var sent = localStorage.getItem("sentence");
 	var ltr = localStorage.getItem("letters");
 	var gif = localStorage.getItem("gif");
 	var imh = localStorage.getItem("img-height");
+	if(!imh){
+		imh=200;
+	}
+	if(imh=="full"){
+		imh="auto";
+	}else{
+		imh=imh+"px";
+	}
 	//独自ロケール
 	var locale = localStorage.getItem("locale");
 	if(locale=="yes"){
@@ -140,6 +153,16 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 		var noauth="";
 		var antinoauth="hide";
 	}
+	//DMTL
+	if(type=="dm"){
+		var dmHide="hide";
+		var antidmHide="";
+	}else{
+		var dmHide="";
+		var antidmHide="hide";
+	}
+
+
 	//マウスオーバーのみ
 	var mouseover=localStorage.getItem("mouseover");
 	if(!mouseover){
@@ -158,6 +181,10 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 	var times=[];
 	Object.keys(obj).forEach(function(key) {
 		var toot = obj[key];
+		if(type=="dm"){
+			var dmid=toot.id;
+			toot=toot.last_status;
+		}
 		var dis_name=escapeHTML(toot.account.display_name);
 		if(toot.account.emojis){
 			var actemojick = toot.account.emojis[0];
@@ -204,6 +231,9 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 				if(!locale && localStorage.getItem("fav_" + acct_id)){
 					what = localStorage.getItem("fav_" + acct_id);
 				}
+			} else if (toot.type == "poll") {
+				var what = lang.lang_parse_polled;
+				var icon = "fa-tasks  purple-text";
 			}
 			var noticetext = '<span class="cbadge cbadge-hover"title="' + date(toot.created_at,
 				'absolute') + '('+lang.lang_parse_notftime+')"><i class="fa fa-clock-o"></i>' + date(toot.created_at,
@@ -445,7 +475,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 		}else{
 			var nicoemojick=false;
 		}
-		//絵文字があれば
+		//絵文字があれば(nico)
 		if (nicoemojick) {
 			Object.keys(toot.profile_emojis).forEach(function(keynico) {
 				var emoji = toot.profile_emojis[keynico];
@@ -491,7 +521,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 					acct_id + '\')" id="' + id + '-image-' + key2 + '" data-url="' + url +
 					'" data-type="' + media.type + '" class="img-parsed"><img draggable="false" src="' +
 					purl + '" class="' + sense +
-					' toot-img pointer" style="width:' + cwdt + '%; height:'+imh+'px;"></a></span>';
+					' toot-img pointer" style="width:calc(' + cwdt + '% - 1px); height:'+imh+';"></a></span>';
 			});
 			media_ids = media_ids.slice(0, -1) ;
 		} else {
@@ -503,12 +533,27 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 		//メンションであれば
 		if (menck) {
 			mentions = "";
+			var to_mention=[];
 			Object.keys(toot.mentions).forEach(function(key3) {
 				var mention = toot.mentions[key3];
 				mentions = mentions + '<a onclick="udg(\'' + mention.id + '\',' +
 					acct_id + ')" class="pointer">@' + mention.acct + '</a> ';
+					//自分は除外
+					//自インスタンスかどうかを確認し、IDの一致
+				if(mention.acct==mention.username && mention.id==localStorage.getItem("user-id_" + acct_id)){
+					//自分
+				}else{
+					//そのトゥの人NG
+					if(toot.account.acct!=mention.acct){
+						to_mention.push(mention.acct);
+					}
+				}
+				
 			});
+			to_mention.push(toot.account.acct);
 			mentions = '<div style="float:right">' + mentions + '</div>';
+		}else{
+			var to_mention=[toot.account.acct];
 		}
 		var tagck = toot.tags[0];
 		var tags = "";
@@ -687,7 +732,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 					var votesel="";
 					var voteclass="";
 				}
-				poll=poll+'<div class="'+voteclass+' vote vote_'+acct_id+'_'+toot.poll.id+'_'+keyc+'" onclick="'+votesel+'">'+choice.title+'<span class="vote_'+acct_id+'_'+toot.poll.id+'_result '+result_hide+'">('+choice.votes_count+')</span></div>';
+				poll=poll+'<div class="'+voteclass+' vote vote_'+acct_id+'_'+toot.poll.id+'_'+keyc+'" onclick="'+votesel+'">'+escapeHTML(choice.title)+'<span class="vote_'+acct_id+'_'+toot.poll.id+'_result '+result_hide+'">('+choice.votes_count+')</span></div>';
 			});
 			poll='<div class="vote_'+acct_id+'_'+toot.poll.id+'">'+poll+myvote+'<span class="cbadge cbadge-hover" title="' + date(toot.poll.expires_at, 'absolute') +
 			'"><i class="fa fa-calendar-times-o"></i>' +
@@ -715,18 +760,19 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			'</div></div>' +
 			'<div class="area-toot">'+tickerdom+'<span class="' +
 			api_spoil + ' cw_text_' + toot.id + '"><span class="cw_text">' + spoil + "</span>" + spoiler_show +
-			'</span><span class="toot ' + spoiler + '">' + content +
+			'</span><span class="toot ' + spoiler + '">' + content +poll+
 			'</span>' +
 			'' + viewer + '' +
 			'</div><div class="area-additional"><span class="additional">' + analyze +
 			'</span>' +
-			'' +poll+ mentions + tags + '</div>' +
+			'' + mentions + tags + '</div>' +
 			'<div class="area-vis"></div>'+
 			'<div class="area-actions '+mouseover+'">' +
 			'<div class="action">'+vis+'</div>'+
 			'<div class="action '+antinoauth+'"><a onclick="detEx(\''+toot.url+'\',\'main\')" class="waves-effect waves-dark details" style="padding:0">'+lang.lang_parse_det+'</a></div>' +
+			'<div class="action '+antidmHide+'"><a onclick="details(\'' + toot.id + '\',' + acct_id +',\''+tlid+'\',\'normal\')" class="waves-effect waves-dark details" style="padding:0">'+lang.lang_parse_thread+'</a></div>' +
 			'<div class="action '+disp["re"]+' '+noauth+'"><a onclick="re(\'' + toot.id +
-			'\',\'' + toot.account.acct + '\',' +
+			'\',\'' + to_mention + '\',' +
 			acct_id + ',\''+visen+
 			'\')" class="waves-effect waves-dark btn-flat actct" style="padding:0" title="'+lang.lang_parse_replyto+'"><i class="fa fa-share"></i><span class="rep_ct">' + replyct +
 			'</a></span></a></div>' +
@@ -735,7 +781,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			'\')" class="waves-effect waves-dark btn-flat actct" style="padding:0" title="'+lang.lang_parse_bt+'"><i class="fa fa-retweet ' +
 			if_rt + ' rt_' + toot.id + '"></i><span class="rt_ct">' + toot.reblogs_count +
 			'</span></a></div>' +
-			'<div class="action '+can_rt+' '+disp["qt"]+' '+noauth+'"><a onclick="qt(\'' + toot.id + '\',' + acct_id +
+			'<div class="action '+can_rt+' '+disp["qt"]+' '+noauth+' '+qtClass+'"><a onclick="qt(\'' + toot.id + '\',' + acct_id +
 			',\'' + toot.account.acct +'\',\''+toot.url+
 			'\')" class="waves-effect waves-dark btn-flat actct" style="padding:0" title="'+lang.lang_parse_quote+'"><i class="text-darken-3 fa fa-quote-right"></i></a></div>' +
 			'<div class="action '+disp["fav"]+' '+noauth+'"><a onclick="fav(\'' + toot.id + '\',' + acct_id +
@@ -757,7 +803,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			'</span>'+
 			'</div><div class="area-side '+mouseover+'"><div class="action ' + if_mine + ' '+noauth+'"><a onclick="toggleAction(\'' + toot.id + '\',\''+tlid+'\',\''+acct_id+'\')" class="waves-effect waves-dark btn-flat" style="padding:0"><i class="text-darken-3 material-icons act-icon">expand_more</i></a></div>' +
 			'<div class="action '+noauth+'"><a onclick="details(\'' + toot.id + '\',' + acct_id +
-			',\''+tlid+'\')" class="waves-effect waves-dark btn-flat details" style="padding:0"><i class="text-darken-3 material-icons">more_vert</i></a></div>' +
+			',\''+tlid+'\',\'normal\')" class="waves-effect waves-dark btn-flat details '+dmHide+'" style="padding:0"><i class="text-darken-3 material-icons">more_vert</i></a></div>' +
 			'</div></div>' +
 			'</div></div>';
 	});

app/js/tl/src.js

@@ -1,10 +1,10 @@
 //検索
 //検索ボックストグル
-function srcToggle() {
-	$("#src-box").toggleClass("hide");
-	$("#src-box").toggleClass("show");
-	$("#src-box").css("bottom","40px");
-	$("#src-box").css("left",$('#src-tgl').offset().left-$('#src-box').width()/2+"px");
+function searchMenu() {
+	$("#left-menu div").removeClass("active");
+	$("#searchMenu").addClass("active");
+	$(".menu-content").addClass("hide");
+    $("#src-box").removeClass("hide");
 	$('ul.tabs').tabs('select_tab', 'src-sta');
 	$("#src-contents").html("");
 }
@@ -15,7 +15,7 @@ function src(mode) {
 	var q = $("#src").val();
 	var acct_id = $("#src-acct-sel").val();
 	if(acct_id=="tootsearch"){
-		tootsearch(q);
+		tsAdd(q)
 		return false;
 	}
 	localStorage.setItem("last-use", acct_id);
@@ -73,9 +73,26 @@ function src(mode) {
 		jQuery("time.timeago").timeago();
 	});
 }
-function tootsearch(q){
+function tsAdd(q){
+		var add = {
+			domain: acct_id,
+			type: "tootsearch",
+			data: q
+		};
+		var multi = localStorage.getItem("column");
+		var obj = JSON.parse(multi);
+		localStorage.setItem("card_" + obj.length,"true");
+		obj.push(add);
+		console.log(obj);
+		var json = JSON.stringify(obj);
+		localStorage.setItem("column", json);
+		parseColumn();
+}
+function tootsearch(tlid,q){
 	var start = "https://tootsearch.chotto.moe/api/v1/search?from=0&sort=created_at%3Adesc&q=" + q
 	console.log(start)
+	$("#notice_" + tlid).text("tootsearch("+q+")");
+	$("#notice_icon_" + tlid).text("search");
 	fetch(start, {
 		method: 'GET',
 		headers: {
@@ -90,17 +107,68 @@ function tootsearch(q){
 			var templete="";
 			var json=raw.hits.hits;
 			console.log(json);
-			Object.keys(json).forEach(function(key5) {
-				var toot = json[key5]["_source"];
-				console.log(toot);
-				if(toot && toot.account){
-					templete = templete+parse([toot],'noauth');
+			var max_id = raw["hits"].length;
+			for(var i=0;i<json.length;i++){
+				var toot = json[i]["_source"];
+				console.log(lastid)
+				if(lastid!=toot.uri){
+					console.log(toot);
+					if(toot && toot.account){
+						templete = templete+parse([toot], "noauth", null, tlid, 0, [], "tootsearch")
+					}
 				}
-			});
+				var lastid=toot.uri;
+			}
 			if(!templete){
 				templete=lang.lang_details_nodata;
+			}else{
+				templete=templete+'<div class="hide ts-marker" data-maxid="'+max_id+'"></div>';
 			}
-			$("#src-contents").html("Tootsearch("+lang.lang_src_ts+")<br>" + templete);
+			$("#timeline_" + tlid).html(templete);
+
+		jQuery("time.timeago").timeago();
+	});
+}
+function moreTs(tlid,q){
+	var sid = $("#timeline_" + tlid + " .ts-marker").last().attr("data-maxid");
+	moreloading=true;
+	var start = "https://tootsearch.chotto.moe/api/v1/search?from="+sid+"&sort=created_at%3Adesc&q=" + q
+	console.log(start)
+	$("#notice_" + tlid).text("tootsearch("+q+")");
+	$("#notice_icon_" + tlid).text("search");
+	fetch(start, {
+		method: 'GET',
+		headers: {
+			'content-type': 'application/json'
+		},
+	}).then(function(response) {
+		return response.json();
+	}).catch(function(error) {
+		todo(error);
+		console.error(error);
+	}).then(function(raw) {
+			var templete="";
+			var json=raw.hits.hits;
+			console.log(json);
+			var max_id = raw["hits"].length;
+			for(var i=0;i<json.length;i++){
+				var toot = json[i]["_source"];
+				console.log(lastid)
+				if(lastid!=toot.uri){
+					console.log(toot);
+					if(toot && toot.account){
+						templete = templete+parse([toot], "noauth", null, tlid, 0, [], "tootsearch")
+					}
+				}
+				var lastid=toot.uri;
+			}
+			if(!templete){
+				templete=lang.lang_details_nodata;
+			}else{
+				templete=templete+'<div class="hide ts-marker" data-maxid="'+max_id+'"></div>';
+			}
+			$("#timeline_" + tlid).append(templete);
+
 		jQuery("time.timeago").timeago();
 	});
 }

app/js/tl/tag.js

@@ -54,10 +54,19 @@ function favTag(){
         var obj = JSON.parse(tagarr);
     }
     var tags="";
+    var nowPT=localStorage.getItem("stable")
     Object.keys(obj).forEach(function(key) {
         var tag = obj[key];
-        tags = tags + '<a onclick="tagShow(\'' + tag + '\')" class="pointer">#' + tag + '</a><span class="hide" data-tag="' + tag + '">　<a onclick="tagTL(\'tag\',\'' + tag + '\',false,\'add\')" class="pointer" title="' +lang.lang_parse_tagTL.replace("{{tag}}" ,'#'+tag)+ '">TL</a>　<a onclick="brInsert(\'#' + tag + '\')" class="pointer" title="' + lang.lang_parse_tagtoot.replace("{{tag}}" ,'#'+tag) + '">Toot</a>　'+
-            '<a onclick="autoToot(\'#' + tag + ' \');brInsert(\'#' + tag + ' \')" class="pointer" title="'+lang.lang_tags_always + lang.lang_parse_tagtoot.replace("{{tag}}" ,'#'+tag) + '">'+lang.lang_tags_realtime+'</a>　<a onclick="tagRemove(\'' + key + '\')" class="pointer" title="' +lang.lang_tags_tagunpin.replace("{{tag}}" ,'#'+tag)+ '">'+lang.lang_del+'</a></span> ';
+        if(nowPT!=tag){
+            console.log(nowPT+"/"+tag);
+            var ptt=lang.lang_tags_realtime;
+            var nowon="";
+        }else{
+            var ptt=lang.lang_tags_unrealtime;
+            var nowon="("+lang.lang_tags_realtime+")";
+        }
+        tags = tags + '<a onclick="tagShow(\'' + tag + '\')" class="pointer">#' + tag + '</a>'+nowon+'<span class="hide" data-tag="' + tag + '">　<a onclick="tagTL(\'tag\',\'' + tag + '\',false,\'add\')" class="pointer" title="' +lang.lang_parse_tagTL.replace("{{tag}}" ,'#'+tag)+ '">TL</a>　<a onclick="brInsert(\'#' + tag + '\')" class="pointer" title="' + lang.lang_parse_tagtoot.replace("{{tag}}" ,'#'+tag) + '">Toot</a>　'+
+            '<a onclick="autoToot(\'' + tag + '\');" class="pointer" title="'+lang.lang_tags_always + lang.lang_parse_tagtoot.replace("{{tag}}" ,'#'+tag) + '">'+ptt+'</a>　<a onclick="tagRemove(\'' + key + '\')" class="pointer" title="' +lang.lang_tags_tagunpin.replace("{{tag}}" ,'#'+tag)+ '">'+lang.lang_del+'</a></span> ';
     });
     if(obj.length>0){
         $("#taglist").append("My Tags:" + tags);
@@ -106,6 +115,14 @@ function tagTL(a,b,c,d){
     tl(a,b,acct_id,d);
 }
 function autoToot(tag){
-    localStorage.setItem("stable",tag);
-    Materialize.toast(lang.lang_tags_tagwarn +replace("{{tag}}" ,tag).replace("{{tag}}" ,tag),3000);
+    var nowPT=localStorage.getItem("stable")
+    if(nowPT==tag){
+        localStorage.removeItem("stable");
+        Materialize.toast(lang.lang_tags_unrealtime,3000);
+    }else{
+        localStorage.setItem("stable",tag);
+        Materialize.toast(lang.lang_tags_tagwarn.replace("{{tag}}" ,tag).replace("{{tag}}" ,tag),3000);
+        brInsert('#' + tag+" ")
+    }
+    favTag();
 }

app/js/tl/tl.js

@@ -58,7 +58,7 @@ function tl(type, data, acct_id, tlid, delc, voice, mode) {
 		dm(acct_id, tlid, "plus",delc,voice);
 		$("#notice_" + tlid).text(cap(type, data, acct_id) + "(" + localStorage.getItem(
 			"user_" + acct_id) + "@" + domain + ")");
-			$("#notice_icon_" + tlid).text("notifications");
+			$("#notice_icon_" + tlid).text("mail_outline");
 		return;
 	}*/
 	localStorage.setItem("now", type);
@@ -113,7 +113,11 @@ function tl(type, data, acct_id, tlid, delc, voice, mode) {
 					url=url+"local=true";
 				}
 			}
-			var start = "https://" + domain + "/api/v1/timelines/" + url;
+			if(type=="dm"){
+				var start = "https://" + domain + "/api/v1/conversations";
+			}else{
+				var start = "https://" + domain + "/api/v1/timelines/" + url;
+			}
 			var method="GET";
 			var i={
 				method: method,
@@ -138,7 +142,7 @@ function tl(type, data, acct_id, tlid, delc, voice, mode) {
 		if(misskey){
 			var templete = misskeyParse(json, type, acct_id, tlid, "", mute);
 		}else{
-			var templete = parse(json, type, acct_id, tlid, "", mute);
+			var templete = parse(json, type, acct_id, tlid, "", mute, type);
 			localStorage.setItem("lastobj_"+ tlid,json[0].id)
 		}
 		$("#timeline_" + tlid).html(templete);
@@ -160,6 +164,7 @@ function reload(type, cc, acct_id, tlid, data, mute, delc, voice, mode) {
 	localStorage.setItem("now", type);
 	if(localStorage.getItem("mode_" + domain)=="misskey"){
 		var misskey=true;
+		console.log(type);
 		if (type == "home") {
 			var start = "wss://" + domain +
 				"/?i=" + at;
@@ -179,12 +184,13 @@ function reload(type, cc, acct_id, tlid, data, mute, delc, voice, mode) {
 			var start = "wss://" + domain +
 			"/hybrid-timeline?i=" + at;
 		} else if (type == "tag") {
-			Materialize.toast(lang_misskeyparse_tagnostr[lang], 1000);
+			Materialize.toast(lang.lang_misskeyparse_tagnostr, 3000);
 		} else if (type == "noauth") {
 			var start = "wss://" + acct_id +
 			"/local-timeline?i=" + at;
 		} else if (type=="list"){
-			Materialize.toast(lang_misskeyparse_listnostr[lang], 1000);
+			var start = "wss://" + domain +
+			"/user-list?i=" + at+"&listId="+data;
 		}
 	}else{
 		var misskey=false;
@@ -288,7 +294,7 @@ function reload(type, cc, acct_id, tlid, data, mute, delc, voice, mode) {
 					if(voice){
 						say(obj.content)
 					}	
-					var templete = parse([obj], type, acct_id, tlid,"",mute);
+					var templete = parse([obj], type, acct_id, tlid,"",mute, type);
 					if ($("timeline_box_"+tlid+"_box .tl-box").scrollTop() === 0) {
 						$("#timeline_" + tlid).prepend(templete);
 					}else{
@@ -378,6 +384,10 @@ function moreload(type, tlid) {
 		}else if (type == "notf") {
 			notfmore(tlid);
 			return;
+		}else if (type == "tootsearch") {
+			var data=obj[tlid].data;
+			moreTs(tlid,data);
+			return;
 		}
 		moreloading=true;
 		localStorage.setItem("now", type);
@@ -427,6 +437,117 @@ function moreload(type, tlid) {
 			var misskey=false;
 			var start = "https://" + domain + "/api/v1/timelines/" + com(type,data) +
 			"max_id=" + sid;
+			if(type=="dm"){
+				var start = "https://" + domain + "/api/v1/conversations?" +
+					"max_id=" + sid;
+			}
+			var method="GET";
+			var i={
+				method: method,
+				headers: hdr
+			};
+		}
+		fetch(start, i).then(function(response) {
+			return response.json();
+		}).catch(function(error) {
+			todo(error);
+			console.error(error);
+		}).then(function(json) {
+			console.log(json);
+			if(misskey){
+				var templete = misskeyParse(json, '', acct_id, tlid,"",mute);
+			}else{
+				var templete = parse(json, '', acct_id, tlid,"",mute, type);
+			}
+			$("#timeline_" + tlid).append(templete);
+			additional(acct_id, tlid);
+			jQuery("time.timeago").timeago();
+			moreloading=false;
+			todc();
+		});
+	}
+}
+//TL差分取得
+function tlDiff(type, data, acct_id, tlid, delc, voice, mode) {
+	console.log("sabun")
+	var multi = localStorage.getItem("column");
+	var obj = JSON.parse(multi);
+	var acct_id = obj[tlid].domain;
+	if (!type) {
+		var type = obj[tlid].type;
+	}else{
+		var data;
+	}
+	if(type=="tag"){
+		var data=obj[tlid].data;
+		var tag = localStorage.getItem("tag-range");
+		if(tag=="local"){
+			data=data+"&local=true";
+		}
+	}else if(type=="list"){
+		var data=obj[tlid].data;
+	}
+	var sid = $("#timeline_" + tlid + " .cvo").first().attr("unique-id");
+	if (sid && !moreloading) {
+		if (type == "mix" && localStorage.getItem("mode_" + localStorage.getItem("domain_" + acct_id))!="misskey") {
+			return;
+		}else if (type == "plus" && localStorage.getItem("mode_" + localStorage.getItem("domain_" + acct_id))!="misskey") {
+			return;
+		}else if (type == "notf") {
+			return;
+		}
+		moreloading=true;
+		localStorage.setItem("now", type);
+		todo(cap(type) + " TL MoreLoading");
+		if(type!="noauth"){
+			var at = localStorage.getItem("acct_"+ acct_id + "_at");
+			var hdr={
+				'content-type': 'application/json',
+				'Authorization': 'Bearer ' + at
+			};
+				var domain = localStorage.getItem("domain_" + acct_id);
+		}else{
+			var hdr={
+				'content-type': 'application/json'
+			};
+			domain=acct_id;
+		}
+		if(localStorage.getItem("mode_" + domain)=="misskey"){
+			var misskey=true;
+			hdr={
+				'content-type': 'application/json'
+			};
+			var url=misskeycom(type, data);
+			var start = "https://" + domain + "/api/notes/"+url;
+			var method="POST";
+			var req={};
+			if(type!="noauth"){
+				req.i=at;
+			}
+			if(type=="local-media"||type=="pub-media"){
+				req.mediaOnly=true;
+			}
+			if(type=="tag"){
+				req.tag=data;
+			}
+			if(type=="list"){
+				req.listId=data;
+			}
+			req.sinceId=sid;
+			req.limit=20;
+			var i={
+				method: method,
+				headers: hdr,
+				body: JSON.stringify(req),
+			}
+		}else{
+			var misskey=false;
+			var start = "https://" + domain + "/api/v1/timelines/" + com(type,data) +
+			"since_id=" + sid;
+			if(type=="dm"){
+				var start = "https://" + domain + "/api/v1/conversations?" +
+					"since_id=" + sid;
+			}
 			var method="GET";
 			var i={
 				method: method,
@@ -441,12 +562,13 @@ function moreload(type, tlid) {
 			todo(error);
 			console.error(error);
 		}).then(function(json) {
+			console.log(json);
 			if(misskey){
 				var templete = misskeyParse(json, '', acct_id, tlid,"",mute);
 			}else{
-				var templete = parse(json, '', acct_id, tlid,"",mute);
+				var templete = parse(json, '', acct_id, tlid,"",mute, type);
 			}
-			$("#timeline_" + tlid).append(templete);
+			$("#timeline_" + tlid).prepend(templete);
 			additional(acct_id, tlid);
 			jQuery("time.timeago").timeago();
 			moreloading=false;
@@ -454,6 +576,10 @@ function moreload(type, tlid) {
 		});
 	}
 }
+//TL再取得
+function reloadTL(type, data, acct_id, key, delc,voice){
+	tl(type, data, acct_id, key, delc,voice,"");
+}
 
 //WebSocket切断
 function tlCloser() {
@@ -558,6 +684,8 @@ function cap(type, data, acct_id) {
 		var response= "Local+"
 	}else if (type == "webview") {
 		var response="Twitter"
+	}else if (type == "tootsearch") {
+		var response="tootsearch(" + data + ")";
 	}
 	return response;
 }
@@ -605,22 +733,35 @@ function misskeycom(type, data) {
 //TLのアイコン
 function icon(type) {
 	if (type == "home") {
-		return "home"
-	} else if (type == "local" || type == "noauth" || type == "local-media") {
-		return "people_outline"
-	} else if (type == "pub" || type == "pub-media") {
-		return "language"
+		var response="home";
+	} else if (type == "local") {
+		var response="people_outline";
+	} else if (type == "local-media") {
+		var response="people_outline";
+	} else if (type == "pub") {
+		var response="language";
+	} else if (type == "pub-media") {
+		var response="language";
 	} else if (type == "tag") {
-		return "search"
+		var response="whatshot";
 	} else if (type == "list") {
-		return "view_headline"
-	}else if (type == "list") {
-		return "subject"
-	}else if (type == "dm") {
-		return "mail"
-	}else if (type == "mix") {
-		return "share"
+		var response="view_headline";
+	} else if (type == "notf") {
+		var response="notifications";
+	} else if (type == "noauth") {
+		var response="people_outline";
+	} else if (type == "dm") {
+		var response="mail_outline";
+	} else if (type == "mix") {
+		var response="merge_type";
+	} else if (type == "plus") {
+		var response="merge_type";
+	}else if (type == "webview") {
+		var response="language";
+	}else if (type == "tootsearch") {
+		var response="search";
 	}
+	return response;
 }
 function strAlive(){
     var date = new Date() ;

app/js/ui/img.js

@@ -10,6 +10,7 @@ function imgv(id, key, acct_id) {
 	$("#imagemodal").attr("data-acct",acct_id);
 	$(document).ready(function() {
 		if (type == "image") {
+			$('#imagemodal').modal('open');
   			xhr = new XMLHttpRequest;
 			xhr.open('GET', murl, true);
 			xhr.addEventListener('progress', function (event) {
@@ -29,7 +30,6 @@ function imgv(id, key, acct_id) {
 			xhr.send();
 			$('#imgmodal').attr('src', murl);
 			$('#imagewrap').dragScroll(); // ドラッグスクロール設定
-			$('#imagemodal').modal('open');
 			$('#imgmodal').show();
 			$('#imagemodal').attr('data-key', key);
 			$('#imagemodal').attr('data-id', id);
@@ -45,61 +45,31 @@ function imgv(id, key, acct_id) {
 			var height = element.naturalHeight;
 			var windowH = $(window).height();
 			var windowW = $(window).width();
-			//小さい画像
-			if(width<(windowW - 50) && height<(windowH-1000)){
-				$("#imgmodal").css('height',height+"px");
-				$("#imgmodal").css('width',width+"px");
-				$("#imagewrap").css('height',height+"px");
-				$("#imagemodal").css('height',height+100+"px");
-				$("#imagewrap").css('width',width+"px");
-				$("#imagemodal").css('width',width+"px");
-				$("#imagemodal").css('margin-top',(windowH /2) - (height / 2) +"px");
-			}else{
-				$("#imagemodal").css('margin-top',0);
-				var aspect = width/height;
-				if (aspect < 2.8 && aspect > 0.3){
-					//moderate
-					if(windowW > windowH){
-						//画面が横長(縦幅基準)
-						$("#imgmodal").css('height',windowH/1.2-70+"px");
-						var imgW = (windowH/1.2-70)/height*width;
-						$("#imgmodal").css('width',imgW+"px");
-						$("#imagewrap").css('height',windowH/1.2-60+"px");
-						$("#imagemodal").css('height',windowH/1.2+"px");
-						$("#imagewrap").css('width',imgW+50+"px");
-						$("#imagemodal").css('width',imgW+50+"px");
-					}else{
-						//画面が縦長・正方形(横幅基準)
-						$("#imgmodal").css('width',windowW/1.2-30+"px");
-						var imgH = (windowW/1.2-30)/width*height;
-						$("#imgmodal").css('height',imgH+"px");
-						$("#imagewrap").css('width',windowW/1.2+"px");
-						$("#imagemodal").css('width',windowW/1.2+"px");
-						$("#imagewrap").css('height',imgH+60+"px");
-						$("#imagemodal").css('height',imgH+120+"px");
-					}
+			$("#imagemodal").css("bottom","0")
+			$("#imagemodal img").css("width","auto")
+			if(height<windowH){
+				$("#imagemodal").css("height",height+60+"px")
+				$("#imagemodal img").css("height","100%")
+				if(width>windowW*0.8){
+					$("#imagemodal").css("width","80vw")
+					$("#imagemodal img").css("width","100%")
+					var heightS=windowW*0.8/width*height;
+					$("#imagemodal").css("height",heightS+60+"px")
 				}else{
-					//極端な画像
-					if(height > width){
-						//縦長
-						$("#imgmodal").css('height',windowH-60+"px");
-						var imgW = (windowH-50)/height*width;
-						$("#imgmodal").css('width',imgW+"px");
-						$("#imagewrap").css('height',windowH-50+"px");
-						$("#imagemodal").css('height',windowH+"px");
-						$("#imagewrap").css('width',imgW+50+"px");
-						$("#imagemodal").css('width',imgW+50+"px");
-					}else{
-						//横長・正方形
-						$("#imgmodal").css('width',windowW-30+"px");
-						var imgH = (windowW-50)/width*height;
-						$("#imgmodal").css('height',imgH+"px");
-						$("#imagewrap").css('width',windowW+"px");
-						$("#imagemodal").css('width',windowW+"px");
-						$("#imagewrap").css('height',imgH+60+"px");
-						$("#imagemodal").css('height',imgH+120+"px");
-					}
+					$("#imagemodal").css("width",width+"px")
 				}
+			}else{
+				console.log("long")
+				$("#imagemodal img").css("width","auto")
+				var widthS=windowH/height*width;
+				if(widthS<windowW){
+					$("#imagemodal").css("width",widthS+"px")
+				}else{
+					$("#imagemodal").css("width","100vw")
+				}
+				
+				$("#imagemodal").css("height","100vh")
+				$("#imagemodal img").css("height","calc(100vh - 60px)")
 			}
 			
 		}
@@ -165,61 +135,31 @@ function imgCont(type) {
 			var height = element.naturalHeight;
 			var windowH = $(window).height();
 			var windowW = $(window).width();
-			//小さい画像
-			if(width<(windowW - 50) && height<(windowH-1000)){
-				$("#imgmodal").css('height',height+"px");
-				$("#imgmodal").css('width',width+"px");
-				$("#imagewrap").css('height',height+"px");
-				$("#imagemodal").css('height',height+100+"px");
-				$("#imagewrap").css('width',width+"px");
-				$("#imagemodal").css('width',width+"px");
-				$("#imagemodal").css('margin-top',(windowH /2) - (height / 2) +"px");
-			}else{
-				$("#imagemodal").css('margin-top',0);
-				var aspect = width/height;
-				if (aspect < 2.8 && aspect > 0.3){
-					//moderate
-					if(windowW > windowH){
-						//画面が横長(縦幅基準)
-						$("#imgmodal").css('height',windowH/1.2-70+"px");
-						var imgW = (windowH/1.2-70)/height*width;
-						$("#imgmodal").css('width',imgW+"px");
-						$("#imagewrap").css('height',windowH/1.2-60+"px");
-						$("#imagemodal").css('height',windowH/1.2+"px");
-						$("#imagewrap").css('width',imgW+50+"px");
-						$("#imagemodal").css('width',imgW+50+"px");
-					}else{
-						//画面が縦長・正方形(横幅基準)
-						$("#imgmodal").css('width',windowW/1.2-30+"px");
-						var imgH = (windowW/1.2-30)/width*height;
-						$("#imgmodal").css('height',imgH+"px");
-						$("#imagewrap").css('width',windowW/1.2+"px");
-						$("#imagemodal").css('width',windowW/1.2+"px");
-						$("#imagewrap").css('height',imgH+60+"px");
-						$("#imagemodal").css('height',imgH+120+"px");
-					}
+			$("#imagemodal").css("bottom","0")
+			$("#imagemodal img").css("width","auto")
+			if(height<windowH){
+				$("#imagemodal").css("height",height+60+"px")
+				$("#imagemodal img").css("height","100%")
+				if(width>windowW*0.8){
+					$("#imagemodal").css("width","80vw")
+					$("#imagemodal img").css("width","100%")
+					var heightS=windowW*0.8/width*height;
+					$("#imagemodal").css("height",heightS+60+"px")
 				}else{
-					//極端な画像
-					if(height > width){
-						//縦長
-						$("#imgmodal").css('height',windowH-60+"px");
-						var imgW = (windowH-50)/height*width;
-						$("#imgmodal").css('width',imgW+"px");
-						$("#imagewrap").css('height',windowH-50+"px");
-						$("#imagemodal").css('height',windowH+"px");
-						$("#imagewrap").css('width',imgW+50+"px");
-						$("#imagemodal").css('width',imgW+50+"px");
-					}else{
-						//横長・正方形
-						$("#imgmodal").css('width',windowW-30+"px");
-						var imgH = (windowW-50)/width*height;
-						$("#imgmodal").css('height',imgH+"px");
-						$("#imagewrap").css('width',windowW+"px");
-						$("#imagemodal").css('width',windowW+"px");
-						$("#imagewrap").css('height',imgH+60+"px");
-						$("#imagemodal").css('height',imgH+120+"px");
-					}
+					$("#imagemodal").css("width",width+"px")
 				}
+			}else{
+				console.log("long")
+				$("#imagemodal img").css("width","auto")
+				var widthS=windowH/height*width;
+				if(widthS<windowW){
+					$("#imagemodal").css("width",widthS+"px")
+				}else{
+					$("#imagemodal").css("width","100vw")
+				}
+				
+				$("#imagemodal").css("height","100vh")
+				$("#imagemodal img").css("height","calc(100vh - 60px)")
 			}
 		}
 		if ($("#" + id + "-image-" + (key * 1 + 1)).length === 0) {
@@ -347,6 +287,10 @@ function dlImg(){
 		console.log(arg);
 	})
 	ipc.on('general-dl-message', function (event, arg) {
-		console.log(arg);
+		var argC=arg.replace(/\\/g,"\\\\")+"\\\\.";
+		Materialize.toast(lang.lang_img_DLDone+arg+'<button class="btn-flat toast-action" onclick="openFinder(\''+argC+'\')">Show</button>', 5000);
 	})
+}
+function openFinder(dir){
+	ipc.send('open-finder', dir);
 }

app/js/ui/layout.js

@@ -7,13 +7,18 @@ var websocketLocal = [];
 var websocketNotf = [];
 
 //カラム追加ボックストグル
-function addToggle() {
-	$("#add-box").toggleClass("hide");
+function addColumnMenu() {
+	$("#left-menu div").removeClass("active");
+	$("#addColumnMenu").addClass("active");
+	$(".menu-content").addClass("hide");
+    $("#add-box").removeClass("hide");
 	addselCk()
-	$("#add-box").css("bottom","40px");
-	$("#add-box").css("left",$('#add-tgl').offset().left-$('#add-box').width()/2+"px");
-	$("#add-box").toggleClass("show");
 }
+$('.type').click(function() {
+	$(".type").removeClass("active");
+	$(this).addClass("active");
+	$("#type-sel").val($(this).attr("data-type"))
+})
 //最初、カラム変更時に発火
 function parseColumn() {
 	console.log("parse");
@@ -25,11 +30,7 @@ function parseColumn() {
 	}
 	tlCloser();
 	var multi = localStorage.getItem("multi");
-	if (!multi) {
-		var obj = [];
-		var json = JSON.stringify(obj);
-		localStorage.setItem("multi", json);
-	} else {
+	if (multi) {
 		var obj = JSON.parse(multi);
 
 		var templete;
@@ -49,10 +50,10 @@ function parseColumn() {
 	}
 	var acctlist=obj;
 	console.log(obj);
-	var xed=localStorage.getItem("xed");
+	/*var xed=localStorage.getItem("xed");
 	if(xed){
 		xpand();
-	}
+	}*/
 	var col = localStorage.getItem("column");
 	if (!col) {
 		var obj = [{
@@ -67,7 +68,9 @@ function parseColumn() {
 	if ($("#timeline-container").length) {
 		$("#timeline-container").html("");
 	}
-	Object.keys(obj).forEach(function(key) {
+	var basekey=0;
+	for(var key=0;key<obj.length;key++){
+		var next=key+1;
 		var acct = obj[key];
 		if(acct.type=="notf"){
 			var notf_attr=' data-notf='+acct.domain;
@@ -103,7 +106,7 @@ function parseColumn() {
 			icnsert=' style="color: #'+ichex+'" ';
 			}
 		}
-		console.log(acct.domain);
+		console.log(acct);
 		if(acctlist[acct.domain]){
 			if(acctlist[acct.domain].background!="def"){
 				insert=insert+" border-bottom:medium solid #"+acctlist[acct.domain].background+";";
@@ -121,8 +124,23 @@ function parseColumn() {
 			}else{
 				var css="";
 			}
-			var html =webview("https://tweetdeck.twitter.com",key,insert,icnsert,css);
+			var html =webviewParse("https://tweetdeck.twitter.com",key,insert,icnsert,css);
 			$("#timeline-container").append(html);
+		}else if(acct.type=="tootsearch"){
+			if(!acct.left_fold){
+				basekey=key;
+			}
+			var width = localStorage.getItem("width");
+			if (width) {
+				var css=" min-width:"+width+"px;"
+			}
+			var anime = localStorage.getItem("animation");
+			if (anime=="yes" || !anime) {
+				var animecss="box-anime";
+			}else{
+				var animecss="";
+			}
+			unstreamingTL(acct.type,key,basekey,insert,icnsert,acct.left_fold,css,animecss,acct.data);
 		}else{
 			var width = localStorage.getItem("width");
 		if (width) {
@@ -139,6 +157,7 @@ function parseColumn() {
 			'<input type="checkbox" class="filled-in" id="exc-fav-'+key+'"  '+excludeCk(key,"favourite")+' /><label for="exc-fav-'+key+'" class="exc-chb"><i class="fa fa-star exc-icons"></i></label> '+
 			'<input type="checkbox" class="filled-in" id="exc-bt-'+key+'" '+excludeCk(key,"reblog")+' /><label for="exc-bt-'+key+'" class="exc-chb" ><i class="fa fa-retweet exc-icons"></i></label> '+
 			'<input type="checkbox" class="filled-in" id="exc-follow-'+key+'" '+excludeCk(key,"follow")+' /><label for="exc-follow-'+key+'" class="exc-chb" ><i class="fa fa-users exc-icons"></i></label> '+
+			'<input type="checkbox" class="filled-in" id="exc-follow-'+key+'" '+excludeCk(key,"poll")+' /><label for="exc-poll-'+key+'" class="exc-chb" ><i class="fa fa-tasks exc-icons"></i></label> '+
 			'<button class="btn waves-effect" style="width:60px; padding:0;" onclick="exclude('+key+')">Filter</button><br>';
 		}else if(acct.type=="home"){
 			var exclude='<a onclick="ebtToggle(' + key +
@@ -147,9 +166,20 @@ function parseColumn() {
 		}else{
 			var exclude="";
 		}
-		var html = '<div style="'+css+'" class="box '+animecss+'" id="timeline_box_' + key + '_box" tlid="' + key +
+			if(!acct.left_fold){
+				basekey=key;
+				var basehtml = '<div style="'+css+'" class="box '+animecss+'" id="timeline_box_' + basekey + '_parentBox"></div>';
+				$("#timeline-container").append(basehtml);
+				var left_hold='<a onclick="leftFoldSet(' + key +')" class="setting nex"><i class="material-icons waves-effect nex" title="'+lang.lang_layout_leftFold+'">view_agenda</i></a>'+lang.lang_layout_leftFold+'</span><br>';
+			}else{
+				var left_hold='<a onclick="leftFoldRemove(' + key +')" class="setting nex"><i class="material-icons waves-effect nex" title="'+lang.lang_layout_leftUnfold+'">view_column</i></a>'+lang.lang_layout_leftUnfold+'</span><br>';
+			}
+			if(key===0){
+				left_hold='';
+			}
+			var html='<div class="boxIn" id="timeline_box_' + key + '_box" tlid="' + key +
 			'" data-acct="'+acct.domain+'"><div class="notice-box z-depth-2" id="menu_'+key+'" style="'+insert+' ">'+
-			'<div class="area-notice"><i class="material-icons waves-effect red-text" id="notice_icon_' + key + '"'+notf_attr+' style="font-size:40px; padding-top:25%;" onclick="goTop(' + key + ')" title="'+lang.lang_layout_gotop +'"></i></div>'+
+			'<div class="area-notice"><i class="material-icons waves-effect red-text" id="notice_icon_' + key + '"'+notf_attr+' style="font-size:40px; padding-top:25%;" onclick="checkStr(\''+acct.type+'\', \''+data+'\', \''+acct.domain+'\', \''+key+'\', \''+delc+'\',\''+voice+'\',null)" title="'+lang.lang_layout_gotop +'"></i></div>'+
 			'<div class="area-notice_name"><span id="notice_' + key + '" class="tl-title"></span></div>'+
 			'<div class="area-a1"><a onclick="notfToggle(' + acct.domain + ',' + key +
 						  ')" class="setting nex '+if_notf+'" title="'+unique_notf+'"'+icnsert+'><i class="material-icons waves-effect nex notf-icon_' +
@@ -160,8 +190,8 @@ function parseColumn() {
 		  ')" class="setting nex" title="'+lang.lang_layout_setthis +'"'+icnsert+'><i class="material-icons waves-effect nex">settings</i></a></div></div>'+
 		  '<div class="column-hide notf-indv-box z-depth-4" id="notf-box_' + key +
 		  '"><div id="notifications_' + key +
-		  '" data-notf="' + acct.domain + '" data-type="notf"></div></div><div class="column-hide notf-indv-box" id="util-box_' + key +
-		  '" style="padding:5px;">'+exclude+'<a onclick="mediaToggle(' + key +
+		  '" data-notf="' + acct.domain + '" data-type="notf" class="notf-timeline"></div></div><div class="column-hide notf-indv-box" id="util-box_' + key +
+		  '" style="padding:5px;">'+exclude+left_hold+'<a onclick="mediaToggle(' + key +
 		  ')" class="setting nex"><i class="material-icons waves-effect nex" title="'+lang.lang_layout_mediafil +'">perm_media</i><span id="sta-media-' +
 		  key + '">On</span></a>'+lang.lang_layout_mediafil +'<br><a onclick="cardToggle(' + key +
 		  ')" class="setting nex"><i class="material-icons waves-effect nex" title="'+lang.lang_layout_linkanades +'">link</i><span id="sta-card-' +
@@ -169,8 +199,8 @@ function parseColumn() {
 		  ')" class="setting nex"><i class="material-icons waves-effect nex" title="'+lang.lang_layout_tts +'">hearing</i><span id="sta-voice-' +
 		  key + '">On</span></a>'+lang.lang_layout_tts +'TL<br><a onclick="reconnector(' + key +
 		  ',\''+acct.type+'\',\''+acct.domain+'\',\''+acct.data+'\')" class="setting nex '+if_notf+'"><i class="material-icons waves-effect nex '+if_notf+'" title="'+lang.lang_layout_reconnect+'">low_priority</i></a><span class="'+if_notf+'">'+lang.lang_layout_reconnect+'</span><br>'+lang.lang_layout_headercolor +'<br><div id="picker_'+key+'" class="color-picker"></div></div><div class="tl-box" tlid="' + key + '"><div id="timeline_' + key +
-			'" class="tl '+acct.type+'-timeline " tlid="' + key + '" data-type="' + acct.type + '" data-acct="'+acct.domain+'"><div id="landing_'+key+'" style="text-align:center">'+lang.lang_layout_nodata +'</div></div></div></div>';
-		$("#timeline-container").append(html);
+			'" class="tl '+acct.type+'-timeline " tlid="' + key + '" data-type="' + acct.type + '" data-acct="'+acct.domain+'"><div id="landing_'+key+'" style="text-align:center">'+lang.lang_layout_nodata +'</div></div></div>'
+			$('#timeline_box_' + basekey + '_parentBox').append(html);
 		localStorage.removeItem("pool_" + key);
 		if (acct.data) {
 			var data = acct.data;
@@ -195,7 +225,7 @@ function parseColumn() {
 		catchCheck(key);
 		voiceCheck(key);
 		}
-	});
+	}
 	var box = localStorage.getItem("box");
 	if (box == "absolute") {
 		setTimeout(show, 1000);
@@ -221,6 +251,15 @@ function parseColumn() {
 		}
 	}
 }
+function checkStr(type, data, acct_id, key, delc,voice){
+	if($('#notice_icon_' + key).hasClass("red-text") && type!="notf" && type!="mix"){
+		console.log("sabun-get")
+		goTop(key);
+		tlDiff(type, data, acct_id, key, delc,voice,"");
+	}else{
+		goTop(key);
+	}
+}
 //セカンダリートゥートボタン
 function secvis(set){
 	if(set=="public"){
@@ -293,10 +332,8 @@ function addselCk(){
 	}
 	if(domain=="knzk.me" || domain=="mstdn.y-zu.org"){
 		$("#type-sel").append('<option value="dm" data-trans="dm" id="direct-add">'+lang.layout_dm +'</option>');
-		$('#type-sel').material_select('update');
 	}else{
 		$("#direct-add").remove();
-		$('#type-sel').material_select('update');
 	}
 }
 //カラム削除
@@ -405,7 +442,7 @@ function coloradd(key,bg,txt){
 	}
 }
 //禁断のTwitter
-function webview(url,key,insert,icnsert,css){
+function webviewParse(url,key,insert,icnsert,css){
 	var html = '<div class="box" id="timeline_box_' + key + '_box" tlid="' + key +
 			'" style="'+css+'"><div class="notice-box z-depth-2" id="menu_'+key+'" style="'+insert+'">'+
 			'<div class="area-notice"><i class="fa fa-twitter waves-effect" id="notice_icon_' + key + '" style="font-size:40px; padding-top:25%;"></i></div>'+
@@ -417,8 +454,55 @@ function webview(url,key,insert,icnsert,css){
 		  ')" class="setting nex" title="'+lang.lang_layout_setthis +'"'+icnsert+'><i class="material-icons waves-effect nex">settings</i></a></div></div>'+
 		  '<div class="column-hide notf-indv-box z-depth-4" id="notf-box_' + key +
 		  '"></div><div class="column-hide notf-indv-box" id="util-box_' + key +
-		  '" style="padding:5px;">'+lang.lang_layout_headercolor +'<br><div id="picker_'+key+'" class="color-picker"></div></div><div class="tl-box" tlid="' + key + '" style="width:100%;height:calc(100% - 110px);"><div id="timeline_' + key +
+		  '" style="padding:5px;">'+lang.lang_layout_headercolor +'<br><div id="picker_'+key+'" class="color-picker"></div></div><div class="tl-box" tlid="' + key + '" style="width:100%;height:100%;"><div id="timeline_' + key +
 			'" class="tl" tlid="' + key + '" data-type="webview" style="width:100%;height:100%;"><webview src="'+url+'" style="width:100%;height:100%;" id="webview" preload="./js/platform/twitter.js"></webview></div></div></div>';
 	
 	return html;
-}
+}
+function unstreamingTL(type,key,basekey,insert,icnsert,left_fold,css,animecss,q){
+	if(!left_fold){
+		var basehtml = '<div style="'+css+'" class="box '+animecss+'" id="timeline_box_' + basekey + '_parentBox"></div>';
+		$("#timeline-container").append(basehtml);
+		var left_hold='<a onclick="leftFoldSet(' + key +')" class="setting nex"><i class="material-icons waves-effect nex" title="'+lang.lang_layout_leftFold+'">view_agenda</i></a>'+lang.lang_layout_leftFold+'</span><br>';
+	}else{
+		var left_hold='<a onclick="leftFoldRemove(' + key +')" class="setting nex"><i class="material-icons waves-effect nex" title="'+lang.lang_layout_leftUnfold+'">view_column</i></a>'+lang.lang_layout_leftUnfold+'</span><br>';
+	}
+	var html='<div class="boxIn" id="timeline_box_' + key + '_box" tlid="' + key +
+	'"><div class="notice-box z-depth-2" id="menu_'+key+'" style="'+insert+' ">'+
+	'<div class="area-notice"><i class="material-icons waves-effect" id="notice_icon_' + key + '" style="font-size:40px; padding-top:25%;" onclick="tootsearch('+key+',\''+q+'\');" title="'+lang.lang_layout_gotop +'"></i></div>'+
+	'<div class="area-notice_name"><span id="notice_' + key + '" class="tl-title"></span></div>'+
+	'<div class="area-a1"></div><div class="area-sta"></div>'+
+	'<div class="area-a2"><a onclick="removeColumn(' + key +
+					')" class="setting nex"><i class="material-icons waves-effect nex" title="'+lang.lang_layout_delthis +'"'+icnsert+'>cancel</i></a></div>'+
+	'<div class="area-a3"><a onclick="setToggle(' + key +
+	')" class="setting nex" title="'+lang.lang_layout_setthis +'"'+icnsert+'><i class="material-icons waves-effect nex">settings</i></a></div></div>'+
+	'<div class="column-hide notf-indv-box" id="util-box_' + key +
+	'" style="padding:5px;">'+left_hold+'<a onclick="mediaToggle(' + key +
+	')" class="setting nex"><i class="material-icons waves-effect nex" title="'+lang.lang_layout_mediafil +'">perm_media</i><span id="sta-media-' +
+	key + '">On</span></a>'+lang.lang_layout_mediafil +'<br>'+lang.lang_layout_headercolor +'<br><div id="picker_'+key+'" class="color-picker"></div></div><div class="tl-box" tlid="' + key + '"><div id="timeline_' + key +
+	'" class="tl '+type+'-timeline " tlid="' + key + '" data-type="' + type + '" data-acct="nostr"><div id="landing_'+key+'" style="text-align:center">'+lang.lang_layout_nodata +'</div></div></div>'
+	$('#timeline_box_' + basekey + '_parentBox').append(html);
+	tootsearch(key,q);
+	cardCheck(key);
+	ebtCheck(key);
+	mediaCheck(key);
+	catchCheck(key);
+	voiceCheck(key);
+	return true;
+}
+function leftFoldSet(key){
+	var multi = localStorage.getItem("column");
+	var obj = JSON.parse(multi);
+	obj[key].left_fold=true;
+	var json = JSON.stringify(obj);
+	localStorage.setItem("column", json);
+	parseColumn();
+}
+function leftFoldRemove(key){
+	var multi = localStorage.getItem("column");
+	var obj = JSON.parse(multi);
+	obj[key].left_fold=false;
+	var json = JSON.stringify(obj);
+	localStorage.setItem("column", json);
+	parseColumn();
+}

app/js/ui/menu.js

@@ -0,0 +1,53 @@
+function menu(){
+    if(!$("#menu").hasClass("appear")){
+        $("#menu").addClass("appear")
+        var left=localStorage.getItem("menu-left");
+        if(left>$('body').width()-$('#menu').width()){
+          left=$('body').width()-$('#menu').width();
+        }else if(left<0){
+            left=0;
+        }
+        var top=localStorage.getItem("menu-top");
+        if(top>$('body').height()-$('#menu').height()){
+            top=$('body').height()-$('#menu').height();
+        }else if(top<0){
+            top=0;
+        }
+        $('#menu').css("left",left+"px")
+        $('#menu').css("top",top+"px")
+        $('#menu').fadeIn();
+        $("#menu-bar").html("TheDesk "+localStorage.getItem("ver"));
+        $(".menu-content").addClass("hide");
+        $("#add-box").removeClass("hide");
+        $("#left-menu div").removeClass("active");
+	    $("#addColumnMenu").addClass("active");
+    }else{
+        $('#menu').fadeOut()
+        $("#menu").removeClass("appear")
+    }
+    
+}
+$(function() {
+    $( "#menu" ).draggable({handle: "#menu-bar",
+      stop: function() {
+      var left=$('#menu').offset().left;
+      if(left>$('body').width()-$('#menu').width()){
+        left=$('body').width()-$('#menu').width();
+      }else if(left<0){
+          left=0;
+      }
+      var top=$('#menu').offset().top;
+      if(top>$('body').height()-$('#menu').height()){
+          top=$('body').height()-$('#menu').height();
+      }else if(top<0){
+          top=0;
+      }
+        localStorage.setItem("menu-left",left);
+        localStorage.setItem("menu-top",top);
+      }
+    });
+  });
+function help(){
+    const {shell} = require('electron');
+	shell.openExternal("https://docs.thedesk.top");
+}

app/js/ui/post-box.js

@@ -1,9 +1,14 @@
 /*ささやきボックス(Cr民並感)*/
 //✕隠す
 function hide() {
+	$("#right-side").hide()
 	$('#post-box').fadeOut()
 	$("#post-box").removeClass("appear")
 	$("#emoji").addClass("hide")
+	$("#left-side").show();
+	$("#default-emoji").show();
+	$("#unreact").show();
+	$("#addreact").addClass("hide");
 }
 //最小化
 function mini() {
@@ -19,17 +24,40 @@ function show() {
 	$("#post-box").addClass("appear")
 	$("#textarea").focus();
 	console.log("show"+localStorage.getItem("postbox-left"));
-	$('#post-box').css("left",localStorage.getItem("postbox-left")+"px")
-	$('#post-box').css("top",localStorage.getItem("postbox-top")+"px")
+	var left=localStorage.getItem("postbox-left");
+	if(left>$('body').width()-$('#post-box').width()){
+	  left=$('body').width()-$('#post-box').width();
+	}else if(left<0){
+		left=0;
+	}
+	var top=localStorage.getItem("postbox-top");
+	if(top>$('body').height()-$('#post-box').height()){
+		top=$('body').height()-$('#post-box').height();
+	}else if(top<0){
+		top=0;
+	}
+	$('#post-box').css("left",left+"px")
+	$('#post-box').css("top",top+"px")
 	$('#post-box').fadeIn();
 }
 
 $(function() {
   $( "#post-box" ).draggable({handle: "#post-bar",
 	stop: function() {
-		console.log("stopped");
-	  localStorage.setItem("postbox-left",$('#post-box').offset().left);
-	  localStorage.setItem("postbox-top",$('#post-box').offset().top);
+	var left=$('#post-box').offset().left;
+	if(left>$('body').width()-$('#post-box').width()){
+	  left=$('body').width()-$('#post-box').width();
+	}else if(left<0){
+		left=0;
+	}
+	var top=$('#post-box').offset().top;
+	if(top>$('body').height()-$('#post-box').height()){
+		top=$('body').height()-$('#post-box').height();
+	}else if(top<0){
+		top=0;
+	}
+	  localStorage.setItem("postbox-left",left);
+	  localStorage.setItem("postbox-top",top);
 	}
   });
 });
@@ -71,23 +99,4 @@ $('#textarea,#cw-text').focusout(function(e) {
 		localStorage.removeItem("nohide")
 	} 
 	//setTimeout(remove, 100);
-});
-
-$("#timeline-container").click(function(e) {
-	if(!$('#list-box').hasClass("hide")){
-		$("#list-box").removeClass("show");
-		$("#list-box").addClass("hide")
-	}
-	if(!$('#src-box').hasClass("hide")){
-		$("#src-box").removeClass("show");
-		$("#src-box").addClass("hide")
-	}
-	if(!$('#filter-box').hasClass("hide")){
-		$("#filter-box").removeClass("show");
-		$("#filter-box").addClass("hide")
-	}
-	if(!$('#add-box').hasClass("hide")){
-		$("#add-box").removeClass("show");
-		$("#add-box").addClass("hide")
-	}
-});
+});

app/js/ui/settings.js

@@ -1,13 +1,57 @@
 //設定(setting.html)で読む
+var envView = new Vue({
+	el: '#envView',
+	data: {config:envConstruction},
+	methods: {
+		complete: function (i,val) {
+			var ls=envView.config[i].storage;
+			Materialize.toast("Complete", 3000);
+			if(!val){
+				var id=envView.config[i].id;
+				var val=$("#"+id).val()
+			}
+			localStorage.setItem(ls,val)
+			if(ls=="ha"){
+				hardwareAcceleration(val)
+			}
+			return true
+		}
+	}
+});
+var tlView = new Vue({
+	el: '#tlView',
+	data: {config:tlConstruction},
+	methods: {
+		complete: function (i,val) {
+			var ls=tlView.config[i].storage;
+			if(!val){
+				var id=tlView.config[i].id;
+				var val=$("#"+id).val()
+			}
+			Materialize.toast("Complete", 3000);
+			localStorage.setItem(ls,val)
+			return true
+		}
+	}
+});
+var postView = new Vue({
+	el: '#postView',
+	data: {config:postConstruction,kirishima:localStorage.getItem('kirishima')},
+	methods: {
+		complete: function (i,val) {
+			var ls=postView.config[i].storage;
+			Materialize.toast("Complete", 3000);
+			if(!val){
+				var id=postView.config[i].id;
+				var val=$("#"+id).val()
+			}
+			localStorage.setItem(ls,val)
+			return true
+		}
+	}
+});
 //設定ボタン押した。
 function settings() {
-	var dd = $("[name=time]:checked").val();
-	var dt = $("[for="+dd+"]").text();
-		if (dd != localStorage.getItem("datetype")) {
-		Materialize.toast(lang.lang_setting_time.replace("{{set}}" ,dt), 3000);
-	}
-	localStorage.setItem("datetype", dd);
-
 	var cd = $("[name=theme]:checked").val();
 	var ct = $("[for="+cd+"]").html();
 	if(cd=="custom" && !$("#custom-sel-sel").val()){
@@ -24,97 +68,6 @@ function settings() {
 		themes(cd);
 		localStorage.setItem("theme", cd);
 	}
-	var nd = $("[name=nsfw]:checked").val();
-	var nt = $("[for=n_"+nd+"]").text();
-	if (nd != localStorage.getItem("nsfw")) {
-		Materialize.toast(lang.lang_setting_nsfw.replace("{{set}}" ,nt), 3000);
-	}
-	localStorage.setItem("nsfw", nd);
-
-	var cwd = $("[name=cw]:checked").val();
-	var cwt = $("[for=c_"+cwd+"]").text();
-	if (cwd != localStorage.getItem("cw")) {
-		Materialize.toast(lang.lang_setting_cw.replace("{{set}}" ,cwt), 3000);
-	}
-	localStorage.setItem("cw", cwd);
-
-	var cwtd = $("#cw-text").val();
-	if (cwtd != localStorage.getItem("cw-text")) {
-		Materialize.toast(lang.lang_setting_cwtext.replace("{{set}}" ,cwtd), 3000);
-	}
-	localStorage.setItem("cw-text", cwtd);
-
-	var cwsd = $("[name=cws]:checked").val();
-	var cwst = $("[for=cws_"+cwsd+"]").text();
-	if (cwsd != localStorage.getItem("always-cw")) {
-		Materialize.toast(lang.lang_setting_cws.replace("{{set}}" ,cwst), 3000);
-	}
-	localStorage.setItem("always-cw", cwsd);
-
-	var rpd = $("[name=rp]:checked").val();
-	var rpt = $("[for=c_"+cwd+"]").text();
-	if (rpd != localStorage.getItem("replyct")) {
-		Materialize.toast(lang.lang_setting_rp.replace("{{set}}" ,rpt), 3000);
-	}
-	localStorage.setItem("replyct", rpd);
-
-	var visd = $("[name=vis]:checked").val();
-	var vist = $("[for="+visd+"]").text();
-	if (visd != localStorage.getItem("vis")) {
-		Materialize.toast(lang.lang_setting_vis.replace("{{set}}" ,vist), 3000);
-	}
-	localStorage.setItem("vis", visd);
-
-	var popd = $("#popup").val();
-	if (popd > 0 && popd != localStorage.getItem("popup")) {
-		Materialize.toast(lang.lang_setting_popup.replace("{{set}}" ,popd+lang.lang_setting_s), 3000);
-	} else if (popd != localStorage.getItem("popup")) {
-		Materialize.toast(lang.lang_setting_popup.replace("{{set}}" ,lang.lang_setting_off), 3000);
-	}
-	localStorage.setItem("popup", popd);
-
-	var gifd = $("[name=gif]:checked").val();
-	var gift = $("[for=g_"+gifd+"]").text();
-	if (gifd != localStorage.getItem("gif")) {
-		Materialize.toast(lang.lang_setting_gif.replace("{{set}}" ,gift), 3000);
-	}
-	localStorage.setItem("gif", gifd);
-
-	var sentd = $("#sentence").val();
-	var ltrd = $("#letters").val();
-	if (sentd != localStorage.getItem("sentence") || ltrd != localStorage.getItem("letters")) {
-		Materialize.toast(lang.lang_setting_selt.replace("{{set1}}" ,sentd).replace("{{set2}}" ,ltrd), 3000);
-	}
-	localStorage.setItem("sentence", sentd);
-	localStorage.setItem("letters", ltrd);
-
-	var csentd = $("#cw_sentence").val();
-	var cltrd = $("#cw_letters").val();
-	if (csentd != localStorage.getItem("cw_sentence") || cltrd != localStorage.getItem("cw_letters")) {
-		Materialize.toast(lang.lang_setting_autocw.replace("{{set1}}" ,csentd).replace("{{set2}}" ,cltrd), 3000);
-	}
-	localStorage.setItem("cw_sentence", csentd);
-	localStorage.setItem("cw_letters", cltrd);
-
-	var widthd = $("#width").val();
-	if (widthd != localStorage.getItem("width")) {
-		Materialize.toast(lang.lang_setting_width.replace("{{set}}" ,widthd), 3000);
-	}
-	localStorage.setItem("width", widthd);
-
-	var fwidthd = $("#fixwidth").val();
-	if (fwidthd != localStorage.getItem("fixwidth")) {
-		Materialize.toast(lang.lang_setting_fixwidth.replace("{{set}}" ,fwidthd), 3000);
-	}
-	localStorage.setItem("fixwidth", fwidthd);
-
-	var imgd = $("[name=img]:checked").val();
-	var imgt = $("[for=i_"+imgd+"]").text();
-	if (imgd != localStorage.getItem("img")) {
-		Materialize.toast(lang.lang_setting_img.replace("{{set}}" ,imgt), 3000);
-	}
-	localStorage.setItem("img", imgd);
-
 	var fontd = $("#font").val();
 	if(fontd){
 		if (fontd != localStorage.getItem("font")) {
@@ -129,320 +82,47 @@ function settings() {
 			themes();
 		}
 	}
-	
-
-	var sized = $("#size").val();
-	if (sized != localStorage.getItem("size")) {
-		Materialize.toast(lang.lang_setting_size.replace("{{set}}" ,sized), 3000);
-	}
-	localStorage.setItem("size", sized);
-
-	var heid = $("#img-height").val();
-	if (heid != localStorage.getItem("img-height")) {
-		Materialize.toast(lang.lang_setting_imgheight.replace("{{set}}" ,heid), 3000);
-	}
-	localStorage.setItem("img-height", heid);
-
-	var tckrd = $("[name=ticker]:checked").val();
-	var tckrt = $("[for=ticker_"+tckrd+"]").text();
-	if (tckrd != localStorage.getItem("ticker_ok")) {
-		Materialize.toast(lang.lang_setting_ticker.replace("{{set}}" ,tckrt), 3000);
-	}
-	localStorage.setItem("ticker_ok", tckrd);
-
-	var animed = $("[name=anime]:checked").val();
-	var animet = $("[for=anime_"+animed+"]").text();
-	if (animed != localStorage.getItem("animation")) {
-		Materialize.toast(lang.lang_setting_animation.replace("{{set}}" ,animet), 3000);
-	}
-	localStorage.setItem("animation", animed);
-
-	var boxd = $("[name=box]:checked").val();
-	var boxt = $("[for=bx_"+boxd+"]").text();
-	if (boxd != localStorage.getItem("box")) {
-		Materialize.toast(lang.lang_setting_boxConfirm.replace("{{set}}" ,boxt), 3000);
-	}
-	localStorage.setItem("box", boxd);
-
-	var tagd = $("[name=tag]:checked").val();
-	var tagt = $("[for=t_"+tagd+"]").text();
-	if (tagd != localStorage.getItem("tag-range")) {
-		Materialize.toast(lang.lang_setting_tag.replace("{{set}}" ,tagt), 3000);
-	}
-	localStorage.setItem("tag-range", tagd);
-
-	var uld = $("[name=ul]:checked").val();
-	var ult = $("[for=ul_"+uld+"]").text();
-	if (uld != localStorage.getItem("locale")) {
-		Materialize.toast(lang.lang_setting_ul.replace("{{set}}" ,ult), 3000);
-	}
-	localStorage.setItem("locale", uld);
-
-	var ntd = $("[name=notf]:checked").val();
-	var ntt = $("[for=ntf_"+ntd+"]").text();
-	if (ntd != localStorage.getItem("nativenotf")) {
-		Materialize.toast(lang.lang_setting_notf.replace("{{set}}" ,ntt), 3000);
-	}
-	localStorage.setItem("nativenotf", ntd);
-
-	var qtd = $("[name=quote]:checked").val();
-	var qtt = $("[for=q_"+qtd+"]").text();
-	if (qtd != localStorage.getItem("quote")) {
-		Materialize.toast(lang.lang_setting_quote.replace("{{set}}" ,qtt), 3000);
-	}
-	localStorage.setItem("quote", qtd);
-	
-	var viad = $("[name=via]:checked").val();
-	var viat = $("[for=via_"+viad+"]").text();
-	if (viad != localStorage.getItem("viashow")) {
-		Materialize.toast(lang.lang_setting_via.replace("{{set}}" ,viat), 3000);
-	}
-	localStorage.setItem("viashow", viad);
-
-	var notfmd = $("[name=notfm]:checked").val();
-	var notfmt = $("[for=notfm_"+notfmd+"]").text();
-	if (notfmd != localStorage.getItem("setasread")) {
-		Materialize.toast(lang.lang_setting_setasread.replace("{{set}}" ,notfmt), 3000);
-	}
-	localStorage.setItem("setasread", notfmd);
-
-	var movd = $("[name=mov]:checked").val();
-	var movt = $("[for=mov_"+movd+"]").text();
-	if (movd != localStorage.getItem("mouseover")) {
-		Materialize.toast(lang.lang_setting_mov.replace("{{set}}" ,movt), 3000);
-	}
-	localStorage.setItem("mouseover", movd);
-
-	var maind = $("[name=main]:checked").val();
-	var maint = $("[for=mn_"+maind+"]").text();
-	if (maind != localStorage.getItem("mainuse")) {
-		Materialize.toast(lang.lang_setting_main.replace("{{set}}" ,maint), 3000);
-	}
-	localStorage.setItem("mainuse", maind);
-
-	var secd = $("[name=sec]:checked").val();
-	var sect = $("[for=sec-"+secd+"]").text();
-	if (secd != localStorage.getItem("sec")) {
-		Materialize.toast(lang.lang_setting_sec.replace("{{set}}" ,sect), 3000);
-	}
-	localStorage.setItem("sec", secd);
 }
 
 //読み込み時の設定ロード
 function load() {
+	var max=envView.config.length;
+	for(var i=0;i<max;i++){
+		var ls=envView.config[i].storage;
+		if(localStorage.getItem(ls)){
+			envView.config[i].setValue=localStorage.getItem(ls)
+		}
+	}
+	var max=tlView.config.length;
+	for(var i=0;i<max;i++){
+		var ls=tlView.config[i].storage;
+		if(localStorage.getItem(ls)){
+			tlView.config[i].setValue=localStorage.getItem(ls)
+		}
+	}
+	var max=postView.config.length;
+	for(var i=0;i<max;i++){
+		var ls=postView.config[i].storage;
+		if(localStorage.getItem(ls)){
+			postView.config[i].setValue=localStorage.getItem(ls)
+		}
+	}
 	if(localStorage.getItem("imas")){
 		$(".imas").removeClass("hide");
 	}
 	if(localStorage.getItem("kirishima")){
 		$(".kirishima").removeClass("hide");
 	}
-	var prof = localStorage.getItem("prof");
-	$("#my-prof").attr("src", prof);
-	var datetype = localStorage.getItem("datetype");
-	if (!datetype) {
-		var datetype = "absolute";
-	}
-	$("#" + datetype).prop("checked", true);
-
 	var theme = localStorage.getItem("theme");
 	if (!theme) {
 		var theme = "white";
 	}
 	$("#" + theme).prop("checked", true);
-
-	var nsfw = localStorage.getItem("nsfw");
-	if (!nsfw) {
-		var nsfw = "yes";
-	}
-	$("#n_" + nsfw).prop("checked", true);
-
-	var cw = localStorage.getItem("cw");
-	if (!cw) {
-		var cw = "yes";
-	}
-	$("#c_" + cw).prop("checked", true);
-
-	var cws = localStorage.getItem("always-cw");
-	if (!cws) {
-		var cws = "no";
-	}
-	$("#cws_" + cws).prop("checked", true);
-
-	var popup = localStorage.getItem("popup");
-	if (!popup) {
-		var popup = "0";
-	}
-	$("#popup").val(popup);
-
-	var box = localStorage.getItem("box");
-	if (!box) {
-		var box = "no";
-	}
-	if(box=="absolute"){
-		var box = "abs";
-	}
-	$("#bx_" + box).prop("checked", true);
-
-	var gif = localStorage.getItem("gif");
-	if (!gif) {
-		var gif = "yes";
-	}
-	$("#g_" + gif).prop("checked", true);
-
-	var sent = localStorage.getItem("sentence");
-	if (!sent) {
-		var sent = "500";
-	}
-	$("#sentence").val(sent);
-	var ltrs = localStorage.getItem("letters");
-	if (!ltrs) {
-		var ltrs = "500";
-	}
-	$("#letters").val(ltrs);
-
-	var csent = localStorage.getItem("cw_sentence");
-	if (!csent) {
-		var csent = "500";
-	}
-	$("#cw_sentence").val(csent);
-	var cltrs = localStorage.getItem("cw_letters");
-	if (!cltrs) {
-		var cltrs = "500";
-	}
-	$("#cw_letters").val(cltrs);
-
-	var width = localStorage.getItem("width");
-	if (!width) {
-		var width = "300";
-	}
-	$("#width").val(width);
-
-	var fwidth = localStorage.getItem("fixwidth");
-	if (!fwidth) {
-		var fwidth = "0";
-	}
-	$("#fixwidth").val(fwidth);
-
-	var cwt = localStorage.getItem("cw-text");
-	if (!cwt) {
-		var cwt = "";
-	}
-	$("#cw-text").val(cwt);
-
-	var cws = localStorage.getItem("always-cw");
-	if (!cws) {
-		var cws = "no";
-	}
-	$("#cws_" + cws).prop("checked", true);
-
-	var rps = localStorage.getItem("replyct");
-	if (!rps) {
-		var rps = "hidden";
-	}
-	$("#rp_" + rps).prop("checked", true);
-
-	var vis = localStorage.getItem("vis");
-	if (!vis) {
-		var vis = "public";
-	}
-	$("#" + vis).prop("checked", true);
-
-	var img = localStorage.getItem("img");
-	if (!img) {
-		var img = "no-act";
-	}
-	$("#i_" + img).prop("checked", true);
-	
 	var font = localStorage.getItem("font");
 	if (!font) {
 		var font = "";
 	}
 	$("#font").val(font);
-
-	var size = localStorage.getItem("size");
-	if (!size) {
-		var size = "13";
-	}
-	$("#size").val(size);
-
-	var imh = localStorage.getItem("img-height");
-	if (!imh) {
-		var imh = "200";
-	}
-	$("#img-height").val(imh);
-
-	var ticker = localStorage.getItem("ticker_ok");
-	if (!ticker) {
-		var ticker = "no";
-	}
-	$("#ticker_" + ticker).prop("checked", true);
-
-	var animation = localStorage.getItem("animation");
-	if (!animation) {
-		var animation = "yes";
-	}
-	$("#anime_" + animation).prop("checked", true);
-
-	var tag = localStorage.getItem("tag-range");
-	if (!tag) {
-		var tag = "all";
-	}
-	$("#t_" + tag).prop("checked", true);
-
-	var box = localStorage.getItem("box");
-	if (!box) {
-		var box = "yes";
-	}
-	$("#bx_" + box).prop("checked", true);
-
-	var uld = localStorage.getItem("locale");
-	if (!uld) {
-		var uld = "yes";
-	}
-	$("#ul_" + uld).prop("checked", true);
-
-	var nnd = localStorage.getItem("nativenotf");
-	if (!nnd) {
-		var nnd = "yes";
-	}
-	$("#ntf_" + nnd).prop("checked", true);
-
-	var qt = localStorage.getItem("quote");
-	if (!qt) {
-		var qt = "simple";
-	}
-	$("#q_" + qt).prop("checked", true);
-
-	var viat = localStorage.getItem("viashow");
-	if (!viat) {
-		var viat = "hide";
-	}
-	$("#via_" + viat).prop("checked", true);
-
-	var movt = localStorage.getItem("mouseover");
-	if (!movt) {
-		var movt = "no";
-	}
-	$("#mov_" + movt).prop("checked", true);
-
-	var notfmt = localStorage.getItem("setasread");
-	if (!notfmt) {
-		var notfmt = "yes";
-	}
-	$("#notfm_" + notfmt).prop("checked", true);
-
-	var maint = localStorage.getItem("mainuse");
-	if (!maint) {
-		var maint = "remain";
-	}
-	$("#mn_" + maint).prop("checked", true);
-
-	var sect = localStorage.getItem("sec");
-	if (!sect) {
-		var sect = "nothing";
-	}
-	$("#sec-" + sect).prop("checked", true);
-	
 }
 
 function climute(){
@@ -546,7 +226,7 @@ function exportSettings(){
 	dialog.showSaveDialog(null, {
 		title: 'Export',
 		properties: ['openFile', 'createDirectory'],
-		defaultPath: "export.thedeskconfig"
+		defaultPath: "export.thedeskconfigv2"
 	}, (savedFiles) => {
 		console.log(savedFiles);
 		if(!savedFiles){
@@ -562,20 +242,27 @@ function exportSettings(){
 		var column = JSON.parse(multi);
 		exp.columns=column;
 		//Themes
-		exp.theme=localStorage.getItem("theme");
-		//Min width
-		exp.minwidth=localStorage.getItem("width");
+		var config={};
+		config.theme=localStorage.getItem("theme");
+		//Other configs
+		var max=envView.config.length;
+		for(var i=0;i<max;i++){
+			var ls=envView.config[i].storage;
+			config[ls]=localStorage.getItem(ls)
+		}
+		var max=tlView.config.length;
+		for(var i=0;i<max;i++){
+			var ls=tlView.config[i].storage;
+			config[ls]=localStorage.getItem(ls)
+		}
+		var max=postView.config.length;
+		for(var i=0;i<max;i++){
+			var ls=postView.config[i].storage;
+			config[ls]=localStorage.getItem(ls)
+		}
 		//Font
-		exp.font=localStorage.getItem("font");
-		exp.size=localStorage.getItem("size");
-		//Img height
-		exp.imgheight=localStorage.getItem("img-height");
-		//Main
-		exp.mainuse=localStorage.getItem("mainuse");
-		//CW text
-		exp.cw=localStorage.getItem("cw-text");
-		//vis
-		exp.vis=localStorage.getItem("vis");
+		config.font=localStorage.getItem("font");
+		exp.config=config;
 		//keysc
 		exp.ksc=[
 			localStorage.getItem("oks-1"),
@@ -621,7 +308,7 @@ function importSettings(){
 		title: 'Import',
 		properties: ['openFile'],
 		filters: [
-			{name: 'TheDesk Config', extensions: ['thedeskconfig']},
+			{name: 'TheDesk Config', extensions: ['thedeskconfig','thedeskconfigv2']},
 		]
 	}, (fileNames) => {
 		console.log(fileNames);
@@ -644,26 +331,53 @@ function importSettings(){
 					localStorage.setItem("acct_"+ key + "_at", acct.at);
 				}
 				localStorage.setItem("column",JSON.stringify(obj.columns));
-				localStorage.setItem("theme",obj.theme);
-				if(obj.width){
-					console.log(obj.width)
-					localStorage.setItem("width",obj.width);
+				if(obj.config){
+					//Version 2
+					var max=envView.config.length;
+					for(var i=0;i<max;i++){
+						var ls=envView.config[i].storage;
+						if(obj.config[ls]){
+							localStorage.setItem(ls,obj.config[ls])
+						}
+					}
+					var max=tlView.config.length;
+					for(var i=0;i<max;i++){
+						var ls=tlView.config[i].storage;
+						if(obj.config[ls]){
+							localStorage.setItem(ls,obj.config[ls])
+						}
+					}
+					var max=postView.config.length;
+					for(var i=0;i<max;i++){
+						var ls=postView.config[i].storage;
+						if(obj.config[ls]){
+							localStorage.setItem(ls,obj.config[ls])
+						}
+					}
+				}else{
+					//Version 1
+					localStorage.setItem("theme",obj.theme);
+					if(obj.width){
+						console.log(obj.width)
+						localStorage.setItem("width",obj.width);
+					}
+					if(obj.font){
+						localStorage.setItem("font",obj.font);
+					}
+					if(obj.size){
+						localStorage.setItem("size",obj.size);
+					}
+					themes(obj.theme);
+					if(obj.imgheight){
+						localStorage.setItem("img-height",obj.imgheight);
+					}
+					localStorage.setItem("mainuse",obj.mainuse);
+					if(obj.cw){
+						localStorage.setItem("cwtext",obj.cw);
+					}
+					localStorage.setItem("vis",obj.vis);
+					//End
 				}
-				if(obj.font){
-					localStorage.setItem("font",obj.font);
-				}
-				if(obj.size){
-					localStorage.setItem("size",obj.size);
-				}
-				themes(obj.theme);
-				if(obj.imgheight){
-					localStorage.setItem("img-height",obj.imgheight);
-				}
-				localStorage.setItem("mainuse",obj.mainuse);
-				if(obj.cw){
-					localStorage.setItem("cwtext",obj.cw);
-				}
-				localStorage.setItem("vis",obj.vis);
 				if(obj.ksc[0]){
 					localStorage.setItem("oks-1",obj.ksc[0]);
 				}
@@ -688,7 +402,7 @@ function importSettings(){
 					localStorage.setItem("card_" + i,"true");
 					localStorage.removeItem("catch_" + i);
 				}
-				location.href="language.html";
+				location.href="index.html";
 			}else{
 				alert("Error.")
 			}
@@ -913,12 +627,17 @@ function customImp(){
 		alert("Error")
 	}
 }
+function hardwareAcceleration(had){
+	console.log("ha");
+	ipc.send('ha', had);
+}
 
 ipc.on('theme-json-create-complete', function (event, args) {
 	$("#custom_import").val("");
 	ctLoad()
 });
-//最初に読む
+window.onload = function() {
+	//最初に読む
 load();
 climute();
 wordmute();
@@ -927,4 +646,5 @@ checkSpotify();
 voiceSettingLoad();
 oksload();
 npprovider();
-ctLoad()
+ctLoad()
+  };

app/js/ui/settings.old.js

@@ -0,0 +1,953 @@
+//設定(setting.html)で読む
+var envView = new Vue({
+	el: '#env-view',
+	data: {config:envConstruction,value:envValue},
+	method: {
+		settings: function (index) {
+			return true
+		}
+	}
+});
+
+//設定ボタン押した。
+function settings() {
+	var dd = $("[name=time]:checked").val();
+	var dt = $("[for="+dd+"]").text();
+		if (dd != localStorage.getItem("datetype")) {
+		Materialize.toast(lang.lang_setting_time.replace("{{set}}" ,dt), 3000);
+	}
+	localStorage.setItem("datetype", dd);
+
+	var cd = $("[name=theme]:checked").val();
+	var ct = $("[for="+cd+"]").html();
+	if(cd=="custom" && !$("#custom-sel-sel").val()){
+		var theme = localStorage.getItem("theme");
+		if (!theme) {
+			var theme = "white";
+		}
+		$("#" + theme).prop("checked", true);
+	}else{
+		if (cd != localStorage.getItem("theme")) {
+			Materialize.toast(lang.lang_setting_theme.replace("{{set}}" ,ct), 3000);
+		}
+		//テーマはこの場で設定
+		themes(cd);
+		localStorage.setItem("theme", cd);
+	}
+
+	var nd = $("[name=nsfw]:checked").val();
+	var nt = $("[for=n_"+nd+"]").text();
+	if (nd != localStorage.getItem("nsfw")) {
+		Materialize.toast(lang.lang_setting_nsfw.replace("{{set}}" ,nt), 3000);
+	}
+	localStorage.setItem("nsfw", nd);
+
+	var cwd = $("[name=cw]:checked").val();
+	var cwt = $("[for=c_"+cwd+"]").text();
+	if (cwd != localStorage.getItem("cw")) {
+		Materialize.toast(lang.lang_setting_cw.replace("{{set}}" ,cwt), 3000);
+	}
+	localStorage.setItem("cw", cwd);
+
+	var cwtd = $("#cw-text").val();
+	if (cwtd != localStorage.getItem("cw-text")) {
+		Materialize.toast(lang.lang_setting_cwtext.replace("{{set}}" ,cwtd), 3000);
+	}
+	localStorage.setItem("cw-text", cwtd);
+
+	var cwsd = $("[name=cws]:checked").val();
+	var cwst = $("[for=cws_"+cwsd+"]").text();
+	if (cwsd != localStorage.getItem("always-cw")) {
+		Materialize.toast(lang.lang_setting_cws.replace("{{set}}" ,cwst), 3000);
+	}
+	localStorage.setItem("always-cw", cwsd);
+
+	var rpd = $("[name=rp]:checked").val();
+	var rpt = $("[for=c_"+cwd+"]").text();
+	if (rpd != localStorage.getItem("replyct")) {
+		Materialize.toast(lang.lang_setting_rp.replace("{{set}}" ,rpt), 3000);
+	}
+	localStorage.setItem("replyct", rpd);
+
+	var visd = $("[name=vis]:checked").val();
+	var vist = $("[for="+visd+"]").text();
+	if (visd != localStorage.getItem("vis")) {
+		Materialize.toast(lang.lang_setting_vis.replace("{{set}}" ,vist), 3000);
+	}
+	localStorage.setItem("vis", visd);
+
+	var popd = $("#popup").val();
+	if (popd > 0 && popd != localStorage.getItem("popup")) {
+		Materialize.toast(lang.lang_setting_popup.replace("{{set}}" ,popd+lang.lang_setting_s), 3000);
+	} else if (popd != localStorage.getItem("popup")) {
+		Materialize.toast(lang.lang_setting_popup.replace("{{set}}" ,lang.lang_setting_off), 3000);
+	}
+	localStorage.setItem("popup", popd);
+
+	var gifd = $("[name=gif]:checked").val();
+	var gift = $("[for=g_"+gifd+"]").text();
+	if (gifd != localStorage.getItem("gif")) {
+		Materialize.toast(lang.lang_setting_gif.replace("{{set}}" ,gift), 3000);
+	}
+	localStorage.setItem("gif", gifd);
+
+	var sentd = $("#sentence").val();
+	var ltrd = $("#letters").val();
+	if (sentd != localStorage.getItem("sentence") || ltrd != localStorage.getItem("letters")) {
+		Materialize.toast(lang.lang_setting_selt.replace("{{set1}}" ,sentd).replace("{{set2}}" ,ltrd), 3000);
+	}
+	localStorage.setItem("sentence", sentd);
+	localStorage.setItem("letters", ltrd);
+
+	var csentd = $("#cw_sentence").val();
+	var cltrd = $("#cw_letters").val();
+	if (csentd != localStorage.getItem("cw_sentence") || cltrd != localStorage.getItem("cw_letters")) {
+		Materialize.toast(lang.lang_setting_autocw.replace("{{set1}}" ,csentd).replace("{{set2}}" ,cltrd), 3000);
+	}
+	localStorage.setItem("cw_sentence", csentd);
+	localStorage.setItem("cw_letters", cltrd);
+
+	var widthd = $("#width").val();
+	if (widthd != localStorage.getItem("width")) {
+		Materialize.toast(lang.lang_setting_width.replace("{{set}}" ,widthd), 3000);
+	}
+	localStorage.setItem("width", widthd);
+
+	var fwidthd = $("#fixwidth").val();
+	if (fwidthd != localStorage.getItem("fixwidth")) {
+		Materialize.toast(lang.lang_setting_fixwidth.replace("{{set}}" ,fwidthd), 3000);
+	}
+	localStorage.setItem("fixwidth", fwidthd);
+
+	var imgd = $("[name=img]:checked").val();
+	var imgt = $("[for=i_"+imgd+"]").text();
+	if (imgd != localStorage.getItem("img")) {
+		Materialize.toast(lang.lang_setting_img.replace("{{set}}" ,imgt), 3000);
+	}
+	localStorage.setItem("img", imgd);
+
+	var fontd = $("#font").val();
+	if(fontd){
+		if (fontd != localStorage.getItem("font")) {
+			Materialize.toast(lang.lang_setting_font.replace("{{set}}" ,fontd), 3000);
+		}
+		localStorage.setItem("font", fontd);
+		themes();
+	}else{
+		if(localStorage.getItem("font")){
+			localStorage.removeItem("font");
+			Materialize.toast(lang.lang_setting_font.replace("{{set}}" ,lang.lang_setting_default), 3000);
+			themes();
+		}
+	}
+	
+
+	var sized = $("#size").val();
+	if (sized != localStorage.getItem("size")) {
+		Materialize.toast(lang.lang_setting_size.replace("{{set}}" ,sized), 3000);
+	}
+	localStorage.setItem("size", sized);
+
+	var heid = $("#img-height").val();
+	if (heid != localStorage.getItem("img-height")) {
+		Materialize.toast(lang.lang_setting_imgheight.replace("{{set}}" ,heid), 3000);
+	}
+	localStorage.setItem("img-height", heid);
+
+	var tckrd = $("[name=ticker]:checked").val();
+	var tckrt = $("[for=ticker_"+tckrd+"]").text();
+	if (tckrd != localStorage.getItem("ticker_ok")) {
+		Materialize.toast(lang.lang_setting_ticker.replace("{{set}}" ,tckrt), 3000);
+	}
+	localStorage.setItem("ticker_ok", tckrd);
+
+	var animed = $("[name=anime]:checked").val();
+	var animet = $("[for=anime_"+animed+"]").text();
+	if (animed != localStorage.getItem("animation")) {
+		Materialize.toast(lang.lang_setting_animation.replace("{{set}}" ,animet), 3000);
+	}
+	localStorage.setItem("animation", animed);
+
+	var boxd = $("[name=box]:checked").val();
+	var boxt = $("[for=bx_"+boxd+"]").text();
+	if (boxd != localStorage.getItem("box")) {
+		Materialize.toast(lang.lang_setting_boxConfirm.replace("{{set}}" ,boxt), 3000);
+	}
+	localStorage.setItem("box", boxd);
+
+	var tagd = $("[name=tag]:checked").val();
+	var tagt = $("[for=t_"+tagd+"]").text();
+	if (tagd != localStorage.getItem("tag-range")) {
+		Materialize.toast(lang.lang_setting_tag.replace("{{set}}" ,tagt), 3000);
+	}
+	localStorage.setItem("tag-range", tagd);
+
+	var uld = $("[name=ul]:checked").val();
+	var ult = $("[for=ul_"+uld+"]").text();
+	if (uld != localStorage.getItem("locale")) {
+		Materialize.toast(lang.lang_setting_ul.replace("{{set}}" ,ult), 3000);
+	}
+	localStorage.setItem("locale", uld);
+
+	var ntd = $("[name=notf]:checked").val();
+	var ntt = $("[for=ntf_"+ntd+"]").text();
+	if (ntd != localStorage.getItem("nativenotf")) {
+		Materialize.toast(lang.lang_setting_notf.replace("{{set}}" ,ntt), 3000);
+	}
+	localStorage.setItem("nativenotf", ntd);
+
+	var qtd = $("[name=quote]:checked").val();
+	var qtt = $("[for=q_"+qtd+"]").text();
+	if (qtd != localStorage.getItem("quote")) {
+		Materialize.toast(lang.lang_setting_quote.replace("{{set}}" ,qtt), 3000);
+	}
+	localStorage.setItem("quote", qtd);
+	
+	var viad = $("[name=via]:checked").val();
+	var viat = $("[for=via_"+viad+"]").text();
+	if (viad != localStorage.getItem("viashow")) {
+		Materialize.toast(lang.lang_setting_via.replace("{{set}}" ,viat), 3000);
+	}
+	localStorage.setItem("viashow", viad);
+
+	var notfmd = $("[name=notfm]:checked").val();
+	var notfmt = $("[for=notfm_"+notfmd+"]").text();
+	if (notfmd != localStorage.getItem("setasread")) {
+		Materialize.toast(lang.lang_setting_setasread.replace("{{set}}" ,notfmt), 3000);
+	}
+	localStorage.setItem("setasread", notfmd);
+
+	var movd = $("[name=mov]:checked").val();
+	var movt = $("[for=mov_"+movd+"]").text();
+	if (movd != localStorage.getItem("mouseover")) {
+		Materialize.toast(lang.lang_setting_mov.replace("{{set}}" ,movt), 3000);
+	}
+	localStorage.setItem("mouseover", movd);
+
+	var maind = $("[name=main]:checked").val();
+	var maint = $("[for=mn_"+maind+"]").text();
+	if (maind != localStorage.getItem("mainuse")) {
+		Materialize.toast(lang.lang_setting_main.replace("{{set}}" ,maint), 3000);
+	}
+	localStorage.setItem("mainuse", maind);
+
+	var secd = $("[name=sec]:checked").val();
+	var sect = $("[for=sec-"+secd+"]").text();
+	if (secd != localStorage.getItem("sec")) {
+		Materialize.toast(lang.lang_setting_sec.replace("{{set}}" ,sect), 3000);
+	}
+	localStorage.setItem("sec", secd);
+}
+
+//読み込み時の設定ロード
+function load() {
+	if(localStorage.getItem("imas")){
+		$(".imas").removeClass("hide");
+	}
+	if(localStorage.getItem("kirishima")){
+		$(".kirishima").removeClass("hide");
+	}
+	var prof = localStorage.getItem("prof");
+	$("#my-prof").attr("src", prof);
+	var datetype = localStorage.getItem("datetype");
+	if (!datetype) {
+		var datetype = "absolute";
+	}
+	$("#" + datetype).prop("checked", true);
+
+	var theme = localStorage.getItem("theme");
+	if (!theme) {
+		var theme = "white";
+	}
+	$("#" + theme).prop("checked", true);
+
+	var ha = localStorage.getItem("ha");
+	if (!ha) {
+		var ha = "false";
+	}
+	$("#ha_" + ha).prop("checked", true);
+
+	var nsfw = localStorage.getItem("nsfw");
+	if (!nsfw) {
+		var nsfw = "yes";
+	}
+	$("#n_" + nsfw).prop("checked", true);
+
+	var cw = localStorage.getItem("cw");
+	if (!cw) {
+		var cw = "yes";
+	}
+	$("#c_" + cw).prop("checked", true);
+
+	var cws = localStorage.getItem("always-cw");
+	if (!cws) {
+		var cws = "no";
+	}
+	$("#cws_" + cws).prop("checked", true);
+
+	var popup = localStorage.getItem("popup");
+	if (!popup) {
+		var popup = "0";
+	}
+	$("#popup").val(popup);
+
+	var box = localStorage.getItem("box");
+	if (!box) {
+		var box = "no";
+	}
+	if(box=="absolute"){
+		var box = "abs";
+	}
+	$("#bx_" + box).prop("checked", true);
+
+	var gif = localStorage.getItem("gif");
+	if (!gif) {
+		var gif = "yes";
+	}
+	$("#g_" + gif).prop("checked", true);
+
+	var sent = localStorage.getItem("sentence");
+	if (!sent) {
+		var sent = "500";
+	}
+	$("#sentence").val(sent);
+	var ltrs = localStorage.getItem("letters");
+	if (!ltrs) {
+		var ltrs = "500";
+	}
+	$("#letters").val(ltrs);
+
+	var csent = localStorage.getItem("cw_sentence");
+	if (!csent) {
+		var csent = "500";
+	}
+	$("#cw_sentence").val(csent);
+	var cltrs = localStorage.getItem("cw_letters");
+	if (!cltrs) {
+		var cltrs = "500";
+	}
+	$("#cw_letters").val(cltrs);
+
+	var width = localStorage.getItem("width");
+	if (!width) {
+		var width = "300";
+	}
+	$("#width").val(width);
+
+	var fwidth = localStorage.getItem("fixwidth");
+	if (!fwidth) {
+		var fwidth = "300";
+	}
+	$("#fixwidth").val(fwidth);
+
+	var cwt = localStorage.getItem("cw-text");
+	if (!cwt) {
+		var cwt = "";
+	}
+	$("#cw-text").val(cwt);
+
+	var cws = localStorage.getItem("always-cw");
+	if (!cws) {
+		var cws = "no";
+	}
+	$("#cws_" + cws).prop("checked", true);
+
+	var rps = localStorage.getItem("replyct");
+	if (!rps) {
+		var rps = "hidden";
+	}
+	$("#rp_" + rps).prop("checked", true);
+
+	var vis = localStorage.getItem("vis");
+	if (!vis) {
+		var vis = "public";
+	}
+	$("#" + vis).prop("checked", true);
+
+	var img = localStorage.getItem("img");
+	if (!img) {
+		var img = "no-act";
+	}
+	$("#i_" + img).prop("checked", true);
+	
+	var font = localStorage.getItem("font");
+	if (!font) {
+		var font = "";
+	}
+	$("#font").val(font);
+
+	var size = localStorage.getItem("size");
+	if (!size) {
+		var size = "13";
+	}
+	$("#size").val(size);
+
+	var imh = localStorage.getItem("img-height");
+	if (!imh) {
+		var imh = "200";
+	}
+	$("#img-height").val(imh);
+
+	var ticker = localStorage.getItem("ticker_ok");
+	if (!ticker) {
+		var ticker = "no";
+	}
+	$("#ticker_" + ticker).prop("checked", true);
+
+	var animation = localStorage.getItem("animation");
+	if (!animation) {
+		var animation = "yes";
+	}
+	$("#anime_" + animation).prop("checked", true);
+
+	var tag = localStorage.getItem("tag-range");
+	if (!tag) {
+		var tag = "all";
+	}
+	$("#t_" + tag).prop("checked", true);
+
+	var box = localStorage.getItem("box");
+	if (!box) {
+		var box = "yes";
+	}
+	$("#bx_" + box).prop("checked", true);
+
+	var uld = localStorage.getItem("locale");
+	if (!uld) {
+		var uld = "yes";
+	}
+	$("#ul_" + uld).prop("checked", true);
+
+	var nnd = localStorage.getItem("nativenotf");
+	if (!nnd) {
+		var nnd = "yes";
+	}
+	$("#ntf_" + nnd).prop("checked", true);
+
+	var qt = localStorage.getItem("quote");
+	if (!qt) {
+		var qt = "simple";
+	}
+	$("#q_" + qt).prop("checked", true);
+
+	var viat = localStorage.getItem("viashow");
+	if (!viat) {
+		var viat = "hide";
+	}
+	$("#via_" + viat).prop("checked", true);
+
+	var movt = localStorage.getItem("mouseover");
+	if (!movt) {
+		var movt = "no";
+	}
+	$("#mov_" + movt).prop("checked", true);
+
+	var notfmt = localStorage.getItem("setasread");
+	if (!notfmt) {
+		var notfmt = "yes";
+	}
+	$("#notfm_" + notfmt).prop("checked", true);
+
+	var maint = localStorage.getItem("mainuse");
+	if (!maint) {
+		var maint = "remain";
+	}
+	$("#mn_" + maint).prop("checked", true);
+
+	var sect = localStorage.getItem("sec");
+	if (!sect) {
+		var sect = "nothing";
+	}
+	$("#sec-" + sect).prop("checked", true);
+	
+}
+
+function climute(){
+	//クライアントミュート
+	var cli = localStorage.getItem("client_mute");
+	var obj = JSON.parse(cli);
+	if(!obj){
+		$("#mute-cli").html(lang.lang_setting_nomuting);
+	}else{
+		if(!obj[0]){
+			$("#mute-cli").html(lang.lang_setting_nomuting);
+			return;
+		}
+	var templete;
+	Object.keys(obj).forEach(function(key) {
+		var cli = obj[key];
+		var list = key * 1 + 1;
+		templete = '<div class="acct" id="acct_' + key + '">' + list +
+			'.' +
+			cli + '<button class="btn waves-effect red disTar" onclick="cliMuteDel(' +
+			key + ')">'+lang.lang_del+'</button><br></div>';
+		$("#mute-cli").append(templete);
+	});
+}
+}
+function cliMuteDel(key){
+	var cli = localStorage.getItem("client_mute");
+	var obj = JSON.parse(cli);
+	obj.splice(key, 1);
+	var json = JSON.stringify(obj);
+	localStorage.setItem("client_mute", json);
+	mute();
+}
+
+function wordmute(){
+	var word = localStorage.getItem("word_mute");
+	var obj = JSON.parse(word);
+	$('#wordmute').material_chip({
+		data: obj,
+	  });
+}
+function wordmuteSave(){
+	var word=$('#wordmute').material_chip('data');
+	var json = JSON.stringify(word);
+	localStorage.setItem("word_mute", json);
+}
+
+function wordemp(){
+	var word = localStorage.getItem("word_emp");
+	var obj = JSON.parse(word);
+	$('#wordemp').material_chip({
+		data: obj,
+	});
+}
+function wordempSave(){
+	var word=$('#wordemp').material_chip('data');
+	var json = JSON.stringify(word);
+	localStorage.setItem("word_emp", json);
+}
+function notftest(){
+		var electron = require("electron");
+		var ipc = electron.ipcRenderer;
+		var os = electron.remote.process.platform;
+		var options = {
+				body: lang.lang_setting_notftest+'('+lang.lang_setting_notftestprof+')',
+				icon: localStorage.getItem("prof_0")
+		  };
+		if(os=="darwin"){
+			var n = new Notification('TheDesk'+lang.lang_setting_notftest, options);
+		}else{
+			ipc.send('native-notf', ['TheDesk'+lang.lang_setting_notftest,lang.lang_setting_notftest+'('+lang.lang_setting_notftestprof+')',localStorage.getItem('prof_0'),"",""]);
+		}
+	
+}
+function oks(no){
+	var txt=$("#oks-"+no).val();
+	localStorage.setItem("oks-"+no, txt);
+	Materialize.toast(lang.lang_setting_ksref, 3000);
+}
+function oksload(){
+	if(localStorage.getItem("oks-1")){$("#oks-1").val(localStorage.getItem("oks-1"))}
+	if(localStorage.getItem("oks-2")){$("#oks-2").val(localStorage.getItem("oks-2"))}
+	if(localStorage.getItem("oks-3")){$("#oks-3").val(localStorage.getItem("oks-3"))}
+}
+function changelang(lang){
+	var electron = require("electron");
+	var ipc = electron.ipcRenderer;
+	ipc.send('lang',lang);
+	ipc.on('langres', function (event, arg) {
+		location.href="../"+lang+"/setting.html"
+	});
+}
+function exportSettings(){
+	if(!confirm(lang.lang_setting_exportwarn)){
+		return false;
+	}
+	var electron = require("electron");
+	var remote=electron.remote;
+	var dialog=remote.dialog;
+	var ipc = electron.ipcRenderer;
+	dialog.showSaveDialog(null, {
+		title: 'Export',
+		properties: ['openFile', 'createDirectory'],
+		defaultPath: "export.thedeskconfig"
+	}, (savedFiles) => {
+		console.log(savedFiles);
+		if(!savedFiles){
+			return false;
+		}
+		var exp={};
+		//Accounts
+		var multi = localStorage.getItem("multi");
+		var acct = JSON.parse(multi);
+		exp.accts=acct;
+		//Columns
+		var multi = localStorage.getItem("column");
+		var column = JSON.parse(multi);
+		exp.columns=column;
+		//Themes
+		exp.theme=localStorage.getItem("theme");
+		//Min width
+		exp.minwidth=localStorage.getItem("width");
+		//Font
+		exp.font=localStorage.getItem("font");
+		exp.size=localStorage.getItem("size");
+		//Img height
+		exp.imgheight=localStorage.getItem("img-height");
+		//Main
+		exp.mainuse=localStorage.getItem("mainuse");
+		//CW text
+		exp.cw=localStorage.getItem("cw-text");
+		//vis
+		exp.vis=localStorage.getItem("vis");
+		//keysc
+		exp.ksc=[
+			localStorage.getItem("oks-1"),
+			localStorage.getItem("oks-2"),
+			localStorage.getItem("oks-3")
+		];
+		//climu
+		var cli = localStorage.getItem("client_mute");
+		var climu = JSON.parse(cli);
+		exp.clientMute=climu;
+		//wordmu
+		var wdm = localStorage.getItem("word_mute");
+		var wordmu = JSON.parse(wdm);
+		exp.wordMute=wordmu;
+		//spotify
+		exp.spotifyArtwork=localStorage.getItem("artwork")
+		var content=localStorage.getItem("np-temp");
+		if(content || content=="" || content=="null"){
+			exp.spotifyTemplete=content;
+		}else{
+			exp.spotifyTemplete=null;
+		}
+		//tags
+		var tagarr = localStorage.getItem("tag");
+		var favtag = JSON.parse(tagarr);
+		exp.favoriteTags=favtag;
+		console.log(exp);
+		ipc.send('export', [savedFiles,JSON.stringify(exp)]);
+		alert("Done.")
+		//cards
+		//lang
+	});
+}
+function importSettings(){
+	if(!confirm(lang.lang_setting_importwarn)){
+		return false;
+	}
+	var electron = require("electron");
+	var remote=electron.remote;
+	var dialog=remote.dialog;
+	var ipc = electron.ipcRenderer;
+	dialog.showOpenDialog(null, {
+		title: 'Import',
+		properties: ['openFile'],
+		filters: [
+			{name: 'TheDesk Config', extensions: ['thedeskconfig']},
+		]
+	}, (fileNames) => {
+		console.log(fileNames);
+		if(!fileNames){
+			return false;
+		}
+		ipc.send('import', fileNames[0]);
+		ipc.on('config', function (event, arg) {
+			var obj = JSON.parse(arg);
+			if(obj){
+				localStorage.clear();
+				localStorage.setItem("multi",JSON.stringify(obj.accts));
+				for(var key=0;key<obj.accts.length;key++){
+					var acct=obj.accts[key];
+					localStorage.setItem("name_" + key, acct.name);
+					localStorage.setItem("user_" + key, acct.user);
+					localStorage.setItem("user-id_" + key, acct.id);
+					localStorage.setItem("prof_" + key, acct.prof);
+					localStorage.setItem("domain_" + key, acct.domain);
+					localStorage.setItem("acct_"+ key + "_at", acct.at);
+				}
+				localStorage.setItem("column",JSON.stringify(obj.columns));
+				localStorage.setItem("theme",obj.theme);
+				if(obj.width){
+					console.log(obj.width)
+					localStorage.setItem("width",obj.width);
+				}
+				if(obj.font){
+					localStorage.setItem("font",obj.font);
+				}
+				if(obj.size){
+					localStorage.setItem("size",obj.size);
+				}
+				themes(obj.theme);
+				if(obj.imgheight){
+					localStorage.setItem("img-height",obj.imgheight);
+				}
+				localStorage.setItem("mainuse",obj.mainuse);
+				if(obj.cw){
+					localStorage.setItem("cwtext",obj.cw);
+				}
+				localStorage.setItem("vis",obj.vis);
+				if(obj.ksc[0]){
+					localStorage.setItem("oks-1",obj.ksc[0]);
+				}
+				if(obj.ksc[1]){
+					localStorage.setItem("oks-2",obj.ksc[1]);
+				}
+				if(obj.ksc[2]){
+					localStorage.setItem("oks-3",obj.ksc[2]);
+				}
+				if(obj.clientMute){
+					localStorage.setItem("client_mute",JSON.stringify(obj.clientMute));
+				}
+				if(obj.wordMute){
+					localStorage.setItem("word_mute",JSON.stringify(obj.wordMute));
+				}
+				if(obj.favoriteTags){
+					localStorage.setItem("tag",JSON.stringify(obj.favoriteTags));
+				}
+				
+				localStorage.setItem("np-temp",obj.spotifyTemplete);
+				for(var i=0;i<obj.columns.length;i++){
+					localStorage.setItem("card_" + i,"true");
+					localStorage.removeItem("catch_" + i);
+				}
+				location.href="language.html";
+			}else{
+				alert("Error.")
+			}
+		})
+		//cards
+		//lang
+	});
+}
+function savefolder(){
+	var electron = require("electron");
+	var remote=electron.remote;
+	var dialog=remote.dialog;
+	dialog.showOpenDialog(null, {
+		title: 'Save folder',
+		properties: ['openDirectory'],
+	}, (fileNames) => {
+		localStorage.setItem("savefolder",fileNames[0]);
+	});
+}
+
+function font(){
+	var electron = require("electron");
+	var ipc = electron.ipcRenderer;
+	ipc.send('fonts', []);
+	ipc.on('font-list', function (event, arg) {
+		$("#fonts").removeClass("hide");
+		for( var i=0; i<arg.length; i++) {
+			var font=arg[i];
+			$("#fonts").append('<div class="font pointer" style="font-family:'+font.family+'" onclick="insertFont(\''+font.family+'\')">'+font.family+"</div>")
+		}
+	});
+}
+function insertFont(name){
+	$("#font").val(name);
+}
+$(".color-picker").each(function(i, elem) {
+	pickerDefine(i,"fff");
+});
+function pickerDefine(i,color){
+	var pickr = new Pickr({
+		el: '#color-picker'+i,
+		default: color,
+		showAlways: true,
+		appendToBody: true,
+		closeWithKey: 'Escape',
+		comparison: false,
+		components: {
+			preview: true, // Left side color comparison
+			opacity: false, // Opacity slider
+			hue: true,     // Hue slider
+			interaction: {
+				rgba: false, // rgba option (red green blue and alpha)
+				input: true, // input / output element
+			}
+		},
+		strings: {
+		   save: 'Save',  // Default for save button
+		   clear: 'Clear' // Default for clear button
+		}
+	   });
+		   pickr.on('change', (...args) => {
+			 	var rgb='rgb('+args[0].toRGBA()[0]+','+args[0].toRGBA()[1]+','+args[0].toRGBA()[2]+')';
+				$("#color-picker"+i+"_value").val(rgb)
+			});
+}
+function customComp(){
+	var nameC=$("#custom_name").val();
+	if(!nameC){return false;}
+	var descC=$("#custom_desc").val();
+	var primaryC=$("#color-picker0_value").val();
+	if(!primaryC){primaryC="rgb(255,255,255)"}
+	var secondaryC=$("#color-picker1_value").val();
+	if(!secondaryC){secondaryC="rgb(255,255,255)"}
+	var textC=$("#color-picker2_value").val();
+	if(!textC){textC="rgb(255,255,255)"}
+	var accentC=$("#color-picker3_value").val();
+	if(!accentC){accentC="rgb(255,255,255)"}
+	var multi = localStorage.getItem("multi");
+	var my=JSON.parse(multi)[0].name;
+	var id=$("#custom-edit-sel").val();
+	if(id=="add_new"){
+		id=makeCID();
+	}
+	var json={
+		"name": nameC,
+		"author": my,
+		"desc": descC,
+		"base": $("[name=direction]:checked").val(),
+		"vars": {
+		  "primary": primaryC,
+		  "secondary": secondaryC,
+		  "text": textC
+		},
+		"props": {
+			"TheDeskAccent": accentC
+		},
+		"id": id
+	  }
+	  $("#custom_json").val(JSON.stringify(json));
+	  themes();
+	  $("#custom_name").val("");
+	  $("#custom_desc").val("");
+	  $("#dark").prop("checked", true);
+	  $("#custom_json").val("");
+	  $("#color-picker0-wrap").html('<div class="color-picker" id="color-picker0"></div>')
+	  $("#color-picker1-wrap").html('<div class="color-picker" id="color-picker1"></div>')
+	  $("#color-picker2-wrap").html('<div class="color-picker" id="color-picker2"></div>')
+	  $("#color-picker3-wrap").html('<div class="color-picker" id="color-picker3"></div>')
+	  $("#color-picker0_value").val("");
+	  $("#color-picker1_value").val("");
+	  $("#color-picker2_value").val("");
+	  $("#color-picker3_value").val("");
+	  pickerDefine(0,"fff");
+	  pickerDefine(1,"fff");
+	  pickerDefine(2,"fff");
+	  pickerDefine(3,"fff");
+	  ipc.send('theme-json-create', JSON.stringify(json));
+}
+function deleteIt(){
+	var id=$("#custom-sel-sel").val();
+	$("#custom_name").val("");
+	$("#custom_desc").val("");
+	$("#dark").prop("checked", true);
+	$("#custom_json").val("");
+	$("#color-picker0-wrap").html('<div class="color-picker" id="color-picker0"></div>')
+	$("#color-picker1-wrap").html('<div class="color-picker" id="color-picker1"></div>')
+	$("#color-picker2-wrap").html('<div class="color-picker" id="color-picker2"></div>')
+	$("#color-picker3-wrap").html('<div class="color-picker" id="color-picker3"></div>')
+	$("#color-picker0_value").val("");
+	$("#color-picker1_value").val("");
+	$("#color-picker2_value").val("");
+	$("#color-picker3_value").val("");
+	pickerDefine(0,"fff");
+	pickerDefine(1,"fff");
+	pickerDefine(2,"fff");
+	pickerDefine(3,"fff");
+	ipc.on('theme-json-delete-complete', function (event, args) {
+		ctLoad()
+	});
+	ipc.send('theme-json-delete', id);
+}
+function ctLoad(){
+	ipc.send('theme-json-list', "");
+	ipc.on('theme-json-list-response', function (event, args) {
+		console.log(args);
+		var templete="";
+		Object.keys(args).forEach(function(key) {
+			var theme = args[key];
+			var themeid=theme.id
+			templete = templete+'<option value="'+themeid+'">' + theme.name +'</option>';
+		});
+		if(args[0]){
+			localStorage.setItem("customtheme-id",args[0].id)
+		}
+		$("#custom-sel-sel").html(templete);
+		templete='<option value="add_new">'+$("#edit-selector").attr("data-add")+'</option>'+templete;
+		$("#custom-edit-sel").html(templete);
+		$('select').material_select('update');
+	});
+}
+function customSel(){
+	var id=$("#custom-sel-sel").val();
+	localStorage.setItem("customtheme-id",id)
+}
+function custom(){
+	var id=$("#custom-edit-sel").val();
+	if(id=="add_new"){
+		$("#custom_name").val("");
+		$("#custom_desc").val("");
+		$("#dark").prop("checked", true);
+		$("#custom_json").val("");
+		$("#color-picker0-wrap").html('<div class="color-picker" id="color-picker0"></div>')
+		$("#color-picker1-wrap").html('<div class="color-picker" id="color-picker1"></div>')
+		$("#color-picker2-wrap").html('<div class="color-picker" id="color-picker2"></div>')
+		$("#color-picker3-wrap").html('<div class="color-picker" id="color-picker3"></div>')
+		$("#color-picker0_value").val("");
+		$("#color-picker1_value").val("");
+		$("#color-picker2_value").val("");
+		$("#color-picker3_value").val("");
+		pickerDefine(0,"fff");
+		pickerDefine(1,"fff");
+		pickerDefine(2,"fff");
+		pickerDefine(3,"fff");
+		$("#delTheme").addClass("disabled")
+	}else{
+		$("#delTheme").removeClass("disabled")
+		ipc.send('theme-json-request', id);
+		ipc.on('theme-json-response', function (event, args) {
+			console.log(args);
+			$("#custom_name").val(args.name);
+			$("#custom_desc").val(args.desc);
+			$("#"+args.base).prop("checked", true);
+			$("#color-picker0-wrap").html('<div class="color-picker" id="color-picker0"></div>')
+			pickerDefine(0,rgbToHex(args.vars.primary))
+			$("#color-picker0_value").val(args.vars.primary);
+			$("#color-picker1-wrap").html('<div class="color-picker" id="color-picker1"></div>')
+			pickerDefine(1,rgbToHex(args.vars.secondary))
+			$("#color-picker1_value").val(args.vars.secondary);
+			$("#color-picker2-wrap").html('<div class="color-picker" id="color-picker2"></div>')
+			$("#color-picker2_value").val(args.vars.text);
+			pickerDefine(2,rgbToHex(args.vars.text))
+			if(args.props){
+				if(args.props.TheDeskAccent){
+					var accent=args.props.TheDeskAccent;
+				}else{
+					var accent=args.vars.secondary;
+				}
+			}else{
+				var accent=args.vars.secondary;
+			}
+			$("#color-picker3-wrap").html('<div class="color-picker" id="color-picker3"></div>')
+			pickerDefine(3,rgbToHex(accent))
+			$("#custom_json").val(JSON.stringify(args));
+		});
+	}
+}
+function customImp(){
+	var json=$("#custom_import").val();
+	if(JSON5.parse(json)){
+		ipc.send('theme-json-create', json);
+	}else{
+		alert("Error")
+	}
+}
+function hardwareAcceleration(){
+	var had = $("[name=ha]:checked").val();
+	localStorage.setItem("ha", had);
+	console.log("ha");
+	ipc.send('ha', had);
+}
+
+ipc.on('theme-json-create-complete', function (event, args) {
+	$("#custom_import").val("");
+	ctLoad()
+});
+//最初に読む
+load();
+climute();
+wordmute();
+wordemp();
+checkSpotify();
+voiceSettingLoad();
+oksload();
+npprovider();
+ctLoad()

app/js/ui/sort.js

@@ -32,9 +32,9 @@ function sortload(){
 				var acctdata=user+"@"+domain;
 			}
 			
-			var html='<li class="drag-content" data-id="'+key+'" data-flag="'+flag+'"'+insert+'><a onclick="goColumn(' + key +
-			')" class="setting nex"><i class="material-icons waves-effect nex" title="このカラムへ">forward</i></a> <a onclick="removeColumn(' + key +
-			')" class="setting nex"><i class="material-icons waves-effect nex" title="このカラムを削除">cancel</i></a><br>'+acctdata+" "+cap(acct.type, acct.data,acct.domain)+'</li>';
+			var html='<li class="drag-content" data-id="'+key+'" data-flag="'+flag+'"'+insert+'><div class="sorticon"><i class="material-icons">'+icon(acct.type)+'</i></div><div class="sorttitle">'+cap(acct.type, acct.data,acct.domain)+'</div><div class="sortaction"><a onclick="goColumn(' + key +
+			')" class="setting nex"><i class="material-icons waves-effect nex" title="'+lang.lang_sort_gothis+'">forward</i></a> <a onclick="removeColumn(' + key +
+			')" class="setting nex"><i class="material-icons waves-effect nex" title="このカラムを削除">cancel</i></a></div><div class="sortacct">'+acctdata+'</div></li>';
 			$("#sort").append(html);
 		});
 		drag();
@@ -58,6 +58,8 @@ function Scap(type, data) {
 		return "Integrated"
 	}else if (type == "webview") {
 		return "Twitter"
+	}else if (type == "tootsearch") {
+		return "tootsearch(" + data + ")"
 	}else{
 		console.log(type);
 	}
@@ -104,18 +106,14 @@ function sort(){
 	Materialize.toast("並べ替え完了。", 3000);
 	sortload();
 	parseColumn();
-	sortToggle()
+	sortMenu()
 }
 //ソートボタントグル
-function sortToggle(){
+function sortMenu(){
+	$("#left-menu div").removeClass("active");
+	$("#sortMenu").addClass("active");
+	$(".menu-content").addClass("hide");
+    $("#sort-box").removeClass("hide");
 	$("#sort").html("");
-	if ($("#sort-box").hasClass("hide")) {
-		$("#sort-box").removeClass("hide");
-		$("#sort-box").addClass("show");
-		//並べ替え
-		sortload();
-	} else {
-		$("#sort-box").addClass("hide");
-		$("#sort-box").removeClass("show");
-	}
+	sortload();
 }

app/js/ui/spotify.js

@@ -123,16 +123,28 @@ function nowplaying(mode){
     }else if(mode=="itunes"){
         var electron = require("electron");
 	    var ipc = electron.ipcRenderer;
+        if (ipc.listenerCount('itunes-np') > 0) {
+            return false;
+        }
+
 	    ipc.send('itunes', "");
-	    ipc.on('itunes-np', function (event, arg) {
+	    ipc.once('itunes-np', function (event, arg) {
             console.log(arg);
             var content=localStorage.getItem("np-temp");
             if(!content || content=="" || content=="null"){
                 var content="#NowPlaying {song} / {album} / {artist}\n{url}";
             }
             var flag=localStorage.getItem("artwork");
-            if(flag && arg.path){
-                media(arg.path,"image/png","new");
+            var remote=electron.remote;
+            var platform=remote.process.platform;
+            if(platform=="win32"){
+                if(flag && arg.path){
+                    media(arg.path,"image/png","new");
+                }
+            }else if(platform=="darwin"){
+                if(flag && arg.artworks[0]){
+                    ipc.send('bmp-image', [arg.artworks[0].path,0]);
+                }
             }
             var regExp = new RegExp("{song}", "g");
             content = content.replace(regExp, arg.name);
@@ -145,11 +157,11 @@ function nowplaying(mode){
             var regExp = new RegExp("{composer}", "g");
             content = content.replace(regExp, arg.composer);
             var regExp = new RegExp("{hz}", "g");
+            content = content.replace(regExp, arg.sampleRate/1000+"kHz");
             var regExp = new RegExp("{lyricist}", "g");
             content = content.replace(regExp, "");
             var regExp = new RegExp("{bpm}", "g");
             content = content.replace(regExp, "");
-            content = content.replace(regExp, arg.sampleRate/1000+"kHz");
             var regExp = new RegExp("{bitRate}", "g");
             content = content.replace(regExp, arg.bitRate+"kbps");
             var regExp = new RegExp("{genre}", "g");
@@ -202,50 +214,4 @@ $("#npbtn").click(function() {
 $("#npbtn").bind('contextmenu', function() {
     nowplaying('itunes');
     return false;
-});
-/*cinderella NP*/
-function cgNP(q){
-    suggest = "https://cg.toot.app/api/v1/?song=" + q
-		console.log(suggest)
-		fetch(suggest, {
-			method: 'GET',
-			headers: {
-				'content-type': 'application/json'
-			},
-		}).then(function(response) {
-			return response.json();
-		}).catch(function(error) {
-			todo(error);
-			console.error(error);
-		}).then(function(json) {
-			console.log(json);
-			var electron = require("electron");
-            var ipc = electron.ipcRenderer;
-            var flag=localStorage.getItem("artwork");
-            if(flag){
-                  var img=json.album.artwork;
-                ipc.send('bmp-image', [img,0]);
-             }
-            var content=localStorage.getItem("np-temp");
-             if(!content || content==""){
-                   var content="#NowPlaying {song} / {album} / {artist}\n{url}";
-             }
-            var regExp = new RegExp("{song}", "g");
-            content = content.replace(regExp, json.name);
-            var regExp = new RegExp("{album}", "g");
-            content = content.replace(regExp, json.album.name);
-            var regExp = new RegExp("{artist}", "g");
-            content = content.replace(regExp, json.artist.text);
-            var regExp = new RegExp("{composer}", "g");
-            content = content.replace(regExp, json.composer);
-            var regExp = new RegExp("{lyricist}", "g");
-            content = content.replace(regExp, json.lyricist);
-            var regExp = new RegExp("{bpm}", "g");
-            content = content.replace(regExp, json.bpm);
-            var regExp = new RegExp("{genre}", "g");
-            content = content.replace(regExp, "");
-            var regExp = new RegExp("{url}", "g");
-            content = content.replace(regExp, "");
-            $("#textarea").val(content);
-				});
-}
+});

app/js/userdata/showOnTL.js

@@ -117,7 +117,7 @@ function udg(user, acct_id) {
 					var emoji = json.emojis[key5];
 					var shortcode = emoji.shortcode;
 					var emoji_url = '<img src="' + emoji.url +
-					'" class="emoji-img" data-emoji="'+shortcode+'">';
+					'" class="emoji-img" data-emoji="'+shortcode+'" draggable="false">';
 					var regExp = new RegExp(":" + shortcode + ":", "g");
 					dis_name = dis_name.replace(regExp, emoji_url);
 					note = note.replace(regExp, emoji_url);
@@ -130,7 +130,11 @@ function udg(user, acct_id) {
 			$('#his-data').css('background-image', 'url(' + json.header + ')');
 			$("#his-sta").text(json.statuses_count);
 			$("#his-follow").text(json.following_count);
-			$("#his-follower").text(json.followers_count);
+			var flerc=json.followers_count;
+			if(flerc<0){
+				flerc="-";
+			}
+			$("#his-follower").text(flerc);
 			$("#his-since").text(crat(json.created_at));
 			$("#his-openin").attr("data-href", json.url);
 			if(json.fields){
@@ -139,8 +143,15 @@ function udg(user, acct_id) {
 					for(var i=0;i<json.fields.length;i++){
 						var fname=json.fields[i].name;
 						var fval=json.fields[i].value;
+						if(json.fields[i].verified_at){
+							var when=lang.lang_showontl_verified+":"+crat(json.fields[i].verified_at);
+							var color="rgba(121,189,154,.25);"
+						}else{
+							var when="";
+							var color="inherit"
+						}
 						fval=twemoji.parse(fval);
-						note=note+'<tr><td class="his-field-title">'+fname+'</td><td class="his-field-content">'+fval+'</td></tr>';
+						note=note+'<tr><td class="his-field-title">'+fname+'</td><td class="his-field-content" title="'+when+'" style="background-color:'+color+'">'+fval+'</td></tr>';
 					}
 					note=note+'</table>'
 					$("#his-des").html(twemoji.parse(note));
@@ -388,6 +399,12 @@ function relations(user, acct_id) {
 			$("#his-end-btn").removeClass("endorsed");
 			$("#his-end-btn").text(lang.lang_status_endorse)
 		}
+		//Blocked
+		if(json.blocked_by){
+			$("#his-float-timeline").hide();
+			$("#his-float-blocked").show();
+			$("#his-follow-btn").hide()
+		}
 
 	});
 }
@@ -449,6 +466,8 @@ function reset(){
 	$("#his-f4-name").val(""); $("#his-f4-val").val("");
 	$("#his-endorse").html("");
 	$("#his-openin").attr("data-href", "");
+	$("#his-float-timeline").show();
+	$("#his-float-blocked").hide();
 }
 $('#my-data-nav .custom-tab').on('click',function(){
 	var target=$(this).find("a").attr("go");

app/language.html

@@ -1,75 +0,0 @@
-<!doctype html>
-<html lang="ja">
-<head>
-	<title>Languages - TheDesk</title>
-	<meta content="width=device-width,initial-scale=1.0" name="viewport">
-	<link href="./css/materialize.css" type="text/css" rel="stylesheet">
-	<link href="./css/themes.css" type="text/css" rel="stylesheet">
-	<link href="./css/master.css" type="text/css" rel="stylesheet">
-	<link href='./css/font-awesome.css' rel='stylesheet' type='text/css'>
-	<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans" rel="stylesheet">
-	<meta charset="utf-8">
-</head>
-<body style="max-width:100vw; width:500px; padding:10px;">
-<script type="text/javascript" src="./js/common/jquery.js"></script>
-<script type="text/javascript" src="./js/platform/first.js"></script>
-<script type="text/javascript" src="./js/common/materialize.js"></script>
-<script type="text/javascript" src="./js/lang/lang.js"></script>
-<script type="text/javascript" src="./js/ui/theme.js"></script>
-<h3 id="language"></h3>
-<select id="language-sel" style="color:black" onchange="btn();"></select>
-<button class="btn waves-effect indigo nex" style="width:100%; max-width:200px;" onclick="sel()" id="sel"></button>
-<a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;" id="back"></a><br>
-<br>
-<span id="notice"></span>
-<script>
-    //コード受信
-    if(location.search){
-	    var m = location.search.match(/\?mode=([a-zA-Z-0-9]+)/);
-	    var mode=m[1];
-	    if(mode=="redirect"){
-		    if(localStorage.getItem("lang")){
-                changelang(localStorage.getItem("lang"))
-            }
-	    }
-    }
-    var fstlang="";
-    var langtxt="";
-    var addit="";
-    Object.keys(lang_lang).forEach(function(i) {
-        if(langtxt==""){
-            langtxt=lang_lang[i];
-            $("#sel").text(lang_set[i]);
-            $("#back").text(lang_back[i]);
-        }else{
-            langtxt=langtxt+"/"+lang_lang[i];
-        }
-        addit=addit+"<br>"+lang_langadd[i];
-        var loc=lang_langlocale[i];
-        $("#language-sel").append('<option value="'+i+'">'+loc+'</option>');
-    });
-    
-$("#language").text(langtxt)
-$("#notice").html(addit)
-$('select').material_select('update');
-function sel(){
-    var val=$("#language-sel").val();
-    changelang(val);
-}
-function changelang(val){
-    var electron = require("electron");
-    var ipc = electron.ipcRenderer;
-    localStorage.setItem("lang",val);
-    ipc.send('lang', val);
-	ipc.on('langres', function (event, arg) {
-        location.href="index.html";
-	})
-
-}
-function btn(){
-    var val=$("#language-sel").val();
-    $("#sel").text(lang_set[val]);
-    $("#back").text(lang_back[val]);
-}
-</script>
-<script type="text/javascript" src="./js/platform/end.js"></script>

app/main.js

@@ -1,34 +1,34 @@
-'use strict';
 
+var dir='file://' + __dirname;
+var base=dir + '/view/';
 // Electronのモジュール
 const electron = require("electron");
 const fs = require("fs");
-const dialog = require('electron').dialog;
-var Jimp = require("jimp");
-const shell = electron.shell;
-const os = require('os')
-const path = require('path')
-const fm = require('font-manager');
-const language = require('./language.js');
+const language = require('./main/language.js');
+const css = require('./main/css.js');
+const dl = require('./main/dl.js');
+const img = require('./main/img.js');
+const np = require('./main/np.js');
+const systemFunc = require('./main/system.js');
 const Menu=electron.Menu
-var updatewin=null;
 const join = require('path').join;
-var JSON5 = require('json5');
 // アプリケーションをコントロールするモジュール
 const app = electron.app;
 // ウィンドウを作成するモジュール
 const BrowserWindow = electron.BrowserWindow;
-const {
-	download
-} = require('electron-dl');
 // メインウィンドウはGCされないようにグローバル宣言
 let mainWindow;
 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");
-var customcss=join(app.getPath("userData"), "custom.css");
-
-var tmp_img = join(app.getPath("userData"), "tmp.png");
+var ha_path=join(app.getPath("userData"), "hardwareAcceleration");
+try{
+	fs.readFileSync(ha_path, 'utf8');
+	app.disableHardwareAcceleration()
+	console.log("disabled: HA");
+}catch{
+	console.log("enabled: HA");
+}
 var window_size;
 try {
 	window_size = JSON.parse(fs.readFileSync(info_path, 'utf8'));
@@ -50,18 +50,14 @@ try {
 
 	}; // デフォルトバリュー
 }
-try {
-	var lang = fs.readFileSync(lang_path, 'utf8');
-} catch (e) {
-	var lang=app.getLocale();
-	if(~lang.indexOf("ja")){
-		lang="ja";
-	}else{
-		lang="en";
+function isFile(file){
+	try {
+		fs.statSync(file);
+		return true
+	} catch (err) {
+		if (err.code === 'ENOENT') return false
 	}
-	fs.writeFileSync(lang_path,lang);
 }
-console.log("launch:"+lang);
 // 全てのウィンドウが閉じたら終了
 app.on('window-all-closed', function() {
 	if (process.platform != 'darwin') {
@@ -69,14 +65,39 @@ app.on('window-all-closed', function() {
 		app.quit();
 	}
 });
+// macOSでウィンドウを閉じた後に再度開けるようにする
+app.on('activate', function() {
+	if (mainWindow == null) {
+		createWindow();
+	}
+});
 
 function createWindow() {
+	if(isFile(lang_path)) {
+		console.log("exist");
+		var lang = fs.readFileSync(lang_path, 'utf8');
+	} else {
+		var langs=app.getLocale();
+		console.log(langs);
+		if(~langs.indexOf("ja")){
+			lang="ja";
+		}else{
+			lang="en";
+		}
+		fs.mkdir(app.getPath("userData"), function (err) {
+			fs.writeFileSync(lang_path,lang);
+		});
+	}
+	console.log(app.getLocale());
+	console.log("launch:"+lang);
 	// メイン画面の表示。ウィンドウの幅、高さを指定できる
 	var platform=process.platform;
 	var bit=process.arch;
 	if(platform=="linux"){
 		var arg={width:window_size.width,height:window_size.height,x:window_size.x,y:window_size.y,icon: __dirname + '/desk.png'}
-	}else{
+	}else if(platform=="win32"){
+		var arg={width:window_size.width,height:window_size.height,x:window_size.x,y:window_size.y,simpleFullscreen:true}
+	}else if(platform=="darwin"){
 		var arg={width:window_size.width,height:window_size.height,x:window_size.x,y:window_size.y,simpleFullscreen:true}
 	}
 	mainWindow = new BrowserWindow(arg);
@@ -97,7 +118,7 @@ function createWindow() {
 	}else{
 		var plus="";
 	}
-	mainWindow.loadURL('file://' + __dirname + '/view/'+lang+'/index.html'+plus);
+	mainWindow.loadURL(base+lang+'/index.html'+plus);
 	if(!window_size.x && !window_size.y){
 		mainWindow.center();
 	}
@@ -106,6 +127,7 @@ function createWindow() {
 	}
 	// ウィンドウが閉じられたらアプリも終了
 	mainWindow.on('closed', function() {
+		electron.ipcMain.removeAllListeners();
 		mainWindow = null;
 	});
 	mainWindow.on('close', function() {
@@ -128,8 +150,18 @@ function createWindow() {
 	var platform=process.platform;
 	var bit=process.arch;
 	if(platform=="darwin"){
-		Menu.setApplicationMenu(Menu.buildFromTemplate(language.template(lang)));
+		Menu.setApplicationMenu(Menu.buildFromTemplate(language.template(lang,mainWindow,false,dir)));
 	}
+	//CSS
+	css.css(mainWindow);
+	//アップデータとダウンロード
+	dl.dl(mainWindow,lang_path,base);
+	//画像選択と画像処理
+	img.img(mainWindow,dir);
+	//NowPlaying
+	np.TheDeskNowPlaying(mainWindow);
+	//その他system
+	systemFunc.system(mainWindow,dir,lang);
 }
 // Electronの初期化完了後に実行
 app.on('ready', createWindow);
@@ -137,505 +169,4 @@ var onError = function(err,response){
     console.error(err,response);
 };
 
-var ipc = electron.ipcMain;
-ipc.on('native-notf', function(e, args) {
-	var platform=process.platform;
-	var bit=process.arch;
-	if(platform=="win32"){
-		const notifier = require('node-notifier')
-		var tmp_imge=tmp_img;
-	Jimp.read(args[2], function (err, lenna) {
-		if(!err && lenna){
-			lenna.write(tmp_img);
-			var tmp_imge=tmp_img;
-		}else{
-			var tmp_imge="";
-		}
-		notifier.notify({
-			appID: "top.thedesk",
-			message: args[1],
-			title: args[0],
-			icon : tmp_imge,
-			sound: false,
-			wait: true,
-		},
-		function(err, response) {
-		  console.log(err, response)
-		});	
-	});
-	}
-});
-//言語
-ipc.on('lang', function(e, arg) {
-	console.log("set:"+arg);
-	fs.writeFileSync(lang_path,arg);
-	mainWindow.webContents.send('langres', "");
-})
-//CSS
-ipc.on('custom-css-create', function(e, arg) {
-	fs.writeFileSync(customcss,arg);
-	mainWindow.webContents.send('custom-css-create-complete', "");
-})
-ipc.on('custom-css-request', function(e, arg) {
-	try {
-		var css = fs.readFileSync(customcss, 'utf8');
-	} catch (e) {
-		var css="";
-	}
-	mainWindow.webContents.send('custom-css-response', css);
-})
-ipc.on('theme-json-create', function(e, arg) {
-	var themecss=join(app.getPath("userData"), JSON5.parse(arg)["id"]+".thedesktheme");
-	fs.writeFileSync(themecss,JSON.stringify(JSON5.parse(arg)));
-	if(JSON5.parse(arg)["id"]){
-		mainWindow.webContents.send('theme-json-create-complete', "");
-	}else{
-		mainWindow.webContents.send('theme-json-create-complete', "error");	
-	}
-})
-ipc.on('theme-json-delete', function(e, arg) {
-	var themecss=join(app.getPath("userData"), arg+".thedesktheme");
-	console.log(themecss);
-	fs.unlink(themecss, function (err) {
-		mainWindow.webContents.send('theme-json-delete-complete', "");
-	});
-})
-ipc.on('theme-json-request', function(e, arg) {
-	var themecss=join(app.getPath("userData"), arg+".thedesktheme");
-	var json = JSON.parse(fs.readFileSync(themecss, 'utf8'));
-	mainWindow.webContents.send('theme-json-response', json);
-})
-ipc.on('theme-css-request', function(e, arg) {
-	var themecss=join(app.getPath("userData"), arg+".thedesktheme");
-	try {
-		var json = JSON.parse(fs.readFileSync(themecss, 'utf8'));
-		
-		var primary=json.vars.primary;
-		var secondary=json.vars.secondary;
-		var text=json.vars.text;
-		if(json.base=="light"){
-			var drag="rgba(255, 255, 255, 0.8)";
-			var beforehover="#757575";
-		}else{
-			var drag="rgba(0, 0, 0, 0.8)";
-			var beforehover="#9e9e9e";
-		}
-		if(json.props){
-			if(json.props.TheDeskAccent){
-				var emphasized=json.props.TheDeskAccent
-			}else{
-				var emphasized=secondary;
-			}
-		}else{
-			var emphasized=primary;
-		}
-		
-		var css=".customtheme {--bg:"+secondary+";--drag:"+drag+";"+
-			"--color:"+text+";--beforehover:"+beforehover+";--modal:"+secondary+";--subcolor:"+primary+";--box:"+primary+";--sidebar:"+primary+";--shared:"+emphasized+";"+
-			"--notfbox:"+secondary+";--emphasized:"+primary+";--his-data:"+secondary+
-			+"--active:"+primary+";--postbox:"+primary+";--modalfooter:"+primary+";}.blacktheme #imagemodal{background: url(\"../img/pixel.svg\");}";
-			mainWindow.webContents.send('theme-css-response', css);
-	} catch (e) {
-		var css="";
-	}
-	
-})
-ipc.on('theme-json-list', function(e, arg) {
-	fs.readdir(app.getPath("userData"), function(err, files){
-		if (err) throw err;
-		var fileList = files.filter(function(file){
-			var tfile=join(app.getPath("userData"), file);
-			return fs.statSync(tfile).isFile() && /.*\.thedesktheme$/.test(tfile); //絞り込み
-		})
-		var themes=[];
-		for(var i=0;i<fileList.length;i++){
-			var themecss=join(app.getPath("userData"), fileList[i]);
-			var json = JSON.parse(fs.readFileSync(themecss, 'utf8'));
-			themes.push({
-				name:json.name,
-				id:json.id
-			})
-		}
-		mainWindow.webContents.send('theme-json-list-response', themes);
-	});
-})
-
-
-ipc.on('update', function(e, x, y) {
-	var platform=process.platform;
-	var bit=process.arch;
-	if(platform!="others"){
-	updatewin = new BrowserWindow({
-		width: 600,
-		height: 400,
-		"transparent": false, // ウィンドウの背景を透過
-		"frame": false, // 枠の無いウィンドウ
-		"resizable": false,
-		"modal":true
-	});
-	var lang = fs.readFileSync(lang_path, 'utf8');
-	updatewin.loadURL('file://' + __dirname + '/view/'+lang+'/update.html');
-
-	return "true"
-	}else{
-		return false;
-	}
-})
-//Web魚拓
-ipc.on('shot', function(e, args) {
-	console.log("link:"+args[0]+" width:"+args[1]+" height:"+args[2]+" title:"+args[4]+" top:"+args[5]+" left:"+args[6]);
-	var platform=process.platform;
-	var bit=process.arch;
-	if(args[7]==""){
-		if(platform=="win32"){
-			var dir=app.getPath('home')+"\\Pictures\\TheDesk\\Screenshots\\"+args[4]+"-toot.png";
-			var folder=app.getPath('home')+"\\Pictures\\TheDesk\\Screenshots\\";
-		}else if(platform=="linux" || platform=="darwin" ){
-			var dir=app.getPath('home')+"/Pictures/TheDesk/Screenshots/"+args[4]+"-toot.png";
-			var folder=app.getPath('home')+"/Pictures/TheDesk/Screenshots/";
-		}
-	}else{
-		var folder=args[7];
-		var dir=folder+args[4]+"-toot.png";
-	}
-	
-	Jimp.read(Buffer.from( args[3],'base64'), function (err, lenna) {
-		if (err) throw err;
-		lenna.crop( args[6], args[5], args[1], args[2] ).write(dir);
-	});
-	shell.showItemInFolder(folder);
-})
-ipc.on('shot-img-dl', (e, args) => {
-	Jimp.read(args[0], function (err, lenna) {
-		if (err) throw err;
-		if(args[1]==""){
-			if(process.platform=="win32"){
-				var folder=app.getPath('home')+"\\Pictures\\TheDesk\\Screenshots\\";
-			}else if(process.platform=="linux" || process.platform=="darwin" ){
-				var folder=app.getPath('home')+"/Pictures/TheDesk/Screenshots/";
-			}
-		}else{
-			var folder=args[2];
-		}
-		
-		lenna.write(folder+args[1]);
-	});
-})
-//アプデDL
-ipc.on('download-btn', (e, args) => {
-	//console.log(args[1]);
-	var platform=process.platform;
-	var bit=process.arch;
-		dialog.showSaveDialog(null, {
-      title: 'Save',
-			defaultPath: app.getPath('home')+"/"+args[1]
-        }, (savedFiles) => {
-			console.log(savedFiles);
-			if(!savedFiles){
-				return false;
-			}
-			if(platform=="win32"){
-				var m = savedFiles.match(/(.+)\\(.+)$/);
-			}else{
-				var m = savedFiles.match(/(.+)\/(.+)$/);
-			}
-			//console.log(m);
-			  if(isExistFile(savedFiles)){
-					fs.unlinkSync(savedFiles);
-			  }
-              dl(args[0],args[1],m[1]);
-        });
-});
-function isExistFile(file) {
-	try {
-	  fs.statSync(file);
-	  return true
-	} catch(err) {
-	  if(err.code === 'ENOENT') return false
-	}
-  }
-function dl(url,file,dir){
-	updatewin.webContents.send('mess', "ダウンロードを開始します。");
-	const opts = {
-		directory:dir,
-		openFolderWhenDone: true,
-		onProgress: function(e) {
-			updatewin.webContents.send('prog', e);
-		},
-		saveAs: false
-	};
-	download(BrowserWindow.getFocusedWindow(),
-			url, opts)
-		.then(dl => {
-			updatewin.webContents.send('mess', "ダウンロードが完了しました。");
-			app.quit();
-			
-		})
-		.catch(console.error);
-}
-ipc.on('general-dl', (e, args) => {
-	var name="";
-	var platform=process.platform;
-	var bit=process.arch;
-	if(args[1]==""){
-		if(platform=="win32"){
-			var dir=app.getPath('home')+"\\Pictures\\TheDesk";
-		}else if(platform=="linux" || platform=="darwin" ){
-			var dir=app.getPath('home')+"/Pictures/TheDesk";
-		}
-	}else{
-		var dir=args[1];
-	}	
-	mainWindow.webContents.send('general-dl-message', "ダウンロードを開始します。");
-	const opts = {
-		directory: dir,
-		filename:name,
-		openFolderWhenDone: true,
-		onProgress: function(e) {
-			mainWindow.webContents.send('general-dl-prog', e);
-		},
-		saveAs: false
-	};
-	download(BrowserWindow.getFocusedWindow(),
-			args[0], opts)
-		.then(dl => {
-			mainWindow.webContents.send('general-dl-message', "ダウンロードが完了しました。");
-		})
-		.catch(console.error);
-});
-ipc.on('quit', (e, args) => {
-	app.quit();
-});
-ipc.on('about', (e, args) => {
-	about();
-});
-function about(){
-	var ver=app.getVersion()
-	var window = new BrowserWindow({width: 300, height: 460,
-			"transparent": false,    // ウィンドウの背景を透過
-			"frame": false,     // 枠の無いウィンドウ
-			"resizable": false });
-	   window.loadURL('file://' + __dirname + '/about.html?ver='+ver);
-	   return "true"
-}
-
-ipc.on('itunes', (e, args) => {
-	console.log("Access");
-	if(args[0]=="set"){
-		var {NowPlaying,PlayerName} = require("nowplaying-node");
-		var nppath=join(app.getPath("userData"), "nowplaying");
-		var npProvider;
-		try {
-			npProvider = args[1];
-		} catch (e) {
-			npProvider="AIMP";
-		}
-		var myAIMP = new NowPlaying({
-			fetchCover: true,
-			player: PlayerName[npProvider],
-		});
-		fs.writeFileSync(nppath, npProvider);
-	}else{
-		var platform=process.platform;
-		var bit=process.arch;
-		if(platform=="darwin"){
-		const nowplaying = require("itunes-nowplaying-mac")
-		nowplaying.getRawData().then(function (value) {
-		mainWindow.webContents.send('itunes-np', value);
-		}).catch(function (error) {
-			// 非同期処理失敗。呼ばれない
-			console.log(error);
-		});
-		}else{
-			var {NowPlaying,PlayerName} = require("nowplaying-node");
-			var nppath=join(app.getPath("userData"), "nowplaying");
-			var npProvider;
-			try {
-				npProvider = fs.readFileSync(nppath, 'utf8');
-			} catch (e) {
-				npProvider="AIMP";
-			}
-			var myAIMP = new NowPlaying({
-				fetchCover: true,
-				player: PlayerName[npProvider],
-			});
-			myAIMP.update();
-			var path=myAIMP.getCoverPath();
-			if(path){
-				var bin = fs.readFileSync(path, 'base64');
-			}else{
-				var bin=false;
-			}
-			
-			var value={
-				name:myAIMP.getTitle(),
-				artist:myAIMP.getArtist(),
-				album:myAIMP.getAlbum(),
-				path:bin
-			}
-			mainWindow.webContents.send('itunes-np', value);
-		}
-		}
-	
-});
-ipc.on('file-select', (e, args) => {
-	dialog.showOpenDialog(null, {
-		properties: ['openFile', 'multiSelections'],
-		title: '添付ファイルを選択',
-		defaultPath: '.',
-		filters: [
-			{name: 'メディアファイル', extensions: ['jpg', 'png', 'gif', 'bmp', 'jpeg','mp4','webm']},
-			{name: '画像', extensions: ['jpg', 'png', 'gif', 'bmp', 'jpeg']},
-      		{name: '動画', extensions: ['mp4','webm']},
-      		{name: '全てのファイル', extensions: ['*']}
-		]
-	}, (fileNames) => {
-		if(!fileNames){
-			return false;
-		}
-		for(var i=0;i<fileNames.length;i++){
-			var path=fileNames[i];
-			var bin = fs.readFileSync(path, 'base64');
-			mainWindow.webContents.send('bmp-img-comp', [bin,'new']);
-		}
-	});
-});
-
-ipc.on('column-del', (e, args) => {
-	console.log(lang);
-	var options=language.delsel(lang)
-  dialog.showMessageBox(options, function(index) {
-    mainWindow.webContents.send('column-del-reply', index);
-  })
-});
-ipc.on('bmp-image', (e, args) => {
-	var m = args[0].match(/(.+)\\(.+)\.(.+)$/);
-	Jimp.read(args[0], function (err, lenna) {
-		if (err) throw err;
-		lenna.getBase64(Jimp.MIME_PNG, function (err, src) {
-			mainWindow.webContents.send('bmp-img-comp', [src,args[1]]);
-	   });
-	});
-	
-});
-ipc.on('nano', function (e, x, y) {
-	var nano_info_path = join(app.getPath("userData"), "nano-window-position.json");
-	var window_pos;
-	try {
-		window_pos = JSON.parse(fs.readFileSync(nano_info_path, 'utf8'));
-	} catch (e) {
-	window_pos = [0,0]; // デフォルトバリュー
-	}
-	var nanowindow = new BrowserWindow({width: 350, height: 200,
-	"transparent": false,    // ウィンドウの背景を透過
-		 "frame": false,     // 枠の無いウィンドウ
-		 "resizable": false });
-	nanowindow.loadURL('file://' + __dirname + '/nano.html');
-	nanowindow.setAlwaysOnTop(true);
-
-	nanowindow.setPosition(window_pos[0], window_pos[1]);
-   nanowindow.on('close', function() {
-		fs.writeFileSync(nano_info_path, JSON.stringify(nanowindow.getPosition()));
-	});
-	return true;
- })
- ipc.on('adobe', (e, arg) => {
-	 if(!arg){
-		const options = {
-			type: 'info',
-			title: 'Adobeフォトエディタ',
-			message: "「許可」または「永続的に許可」をクリックするとTheDeskとAdobeで情報を共有します。\n次のウィンドウを開いている時以外は一切提供しません。",
-			buttons: ['拒否', '許可','永続的に許可']
-		  }
-		  dialog.showMessageBox(options, function(index) {
-			if(index===2){
-				mainWindow.webContents.send('adobeagree', "true");
-			}
-			if(index>0){
-				adobeWindow();
-			}
-		  })
-	 }else{
-		adobeWindow();
-	 }
-});
-function adobeWindow(){
-	var window = new BrowserWindow({
-		width: 1000,
-		height: 750
-	});
-	window.loadURL('file://' + __dirname + '/adobe.html');
-}
-var cbTimer1;
-ipc.on('startmem', (e, arg) => {
-	cbTimer1 = setInterval(mems, 1000);
-});
-ipc.on('endmem', (e, arg) => {
-	if(cbTimer1){
-		clearInterval(cbTimer1);
-	}
-});
-function mems(){
-	var mem=os.totalmem()-os.freemem();
-	if(mainWindow){
-		mainWindow.webContents.send('memory', [mem,os.cpus()[0].model,os.totalmem()]);
-	}
-}
-ipc.on('mkc', (e, arg) => {
-	var platform=process.platform;
-	if(platform=="linux" || platform=="win32" ){
-		var mkc = fs.readFileSync(__dirname + '/.tkn', 'utf8');
-		
-	}else{
-		var mkc = "";
-	}
-	mainWindow.webContents.send('mkcr', mkc);
-});
-ipc.on('export', (e, args) => {
-	fs.writeFileSync(args[0], args[1]);
-});
-ipc.on('import', (e, arg) => {
-	mainWindow.webContents.send('config', fs.readFileSync(arg, 'utf8'));
-});
-//フォント
-function object_array_sort(data,key,order,fn){
-	//デフォは降順(DESC)
-	var num_a = -1;
-	var num_b = 1;
-   
-	if(order === 'asc'){//指定があれば昇順(ASC)
-	  num_a = 1;
-	  num_b = -1;
-	}
-   
-	data = data.sort(function(a, b){
-	  var x = a[key];
-	  var y = b[key];
-	  if (x > y) return num_a;
-	  if (x < y) return num_b;
-	  return 0;
-	});
-   
-	//重複排除
-	var arrObj = {};
-	for (var i = 0; i < data.length; i++) {
-	  arrObj[data[i]['family']] = data[i];
-	}
-   
-	data = [];
-	for (var key in arrObj) {
-	  data.push(arrObj[key]);
-	}
-   
-	fn(data); // ソート後の配列を返す
-  }
-ipc.on('fonts', (e, arg) => {
-	var fonts = fm.getAvailableFontsSync();
-object_array_sort(fonts, 'family', 'asc', function(fonts_sorted){
-	mainWindow.webContents.send('font-list', fonts_sorted);
-});
-});
-
-
-
 app.setAsDefaultProtocolClient('thedesk')

app/main/css.js

@@ -0,0 +1,105 @@
+function css(mainWindow) {
+	const electron = require("electron");
+	const fs = require("fs");
+	const path = require('path')
+	var ipc = electron.ipcMain;
+	var JSON5 = require('json5');
+	const app = electron.app;
+	const join = require('path').join;
+	var customcss = join(app.getPath("userData"), "custom.css");
+
+	ipc.on('custom-css-create', function(e, arg) {
+		fs.writeFileSync(customcss, arg);
+		mainWindow.webContents.send('custom-css-create-complete', "");
+	})
+	ipc.on('custom-css-request', function(e, arg) {
+		try {
+			var css = fs.readFileSync(customcss, 'utf8');
+		} catch (e) {
+			var css = "";
+		}
+		mainWindow.webContents.send('custom-css-response', css);
+	})
+	ipc.on('theme-json-create', function(e, arg) {
+		var themecss = join(app.getPath("userData"), JSON5.parse(arg)["id"] +
+			".thedesktheme");
+		fs.writeFileSync(themecss, JSON.stringify(JSON5.parse(arg)));
+		if (JSON5.parse(arg)["id"]) {
+			mainWindow.webContents.send('theme-json-create-complete', "");
+		} else {
+			mainWindow.webContents.send('theme-json-create-complete', "error");
+		}
+	})
+	ipc.on('theme-json-delete', function(e, arg) {
+		var themecss = join(app.getPath("userData"), arg + ".thedesktheme");
+		console.log(themecss);
+		fs.unlink(themecss, function(err) {
+			mainWindow.webContents.send('theme-json-delete-complete', "");
+		});
+	})
+	ipc.on('theme-json-request', function(e, arg) {
+		var themecss = join(app.getPath("userData"), arg + ".thedesktheme");
+		var json = JSON.parse(fs.readFileSync(themecss, 'utf8'));
+		mainWindow.webContents.send('theme-json-response', json);
+	})
+	ipc.on('theme-css-request', function(e, arg) {
+		var themecss = join(app.getPath("userData"), arg + ".thedesktheme");
+		try {
+			var json = JSON.parse(fs.readFileSync(themecss, 'utf8'));
+
+			var primary = json.vars.primary;
+			var secondary = json.vars.secondary;
+			var text = json.vars.text;
+			if (json.base == "light") {
+				var drag = "rgba(255, 255, 255, 0.8)";
+				var beforehover = "#757575";
+			} else {
+				var drag = "rgba(0, 0, 0, 0.8)";
+				var beforehover = "#9e9e9e";
+			}
+			if (json.props) {
+				if (json.props.TheDeskAccent) {
+					var emphasized = json.props.TheDeskAccent
+				} else {
+					var emphasized = secondary;
+				}
+			} else {
+				var emphasized = primary;
+			}
+
+			var css = ".customtheme {--bg:" + secondary + ";--drag:" + drag + ";" +
+				"--color:" + text + ";--beforehover:" + beforehover + ";--modal:" +
+				secondary + ";--subcolor:" + primary + ";--box:" + primary +
+				";--sidebar:" + primary + ";--shared:" + emphasized + ";" +
+				"--notfbox:" + secondary + ";--emphasized:" + primary + ";--his-data:" +
+				secondary +
+				";--active:" + primary + ";--postbox:" + primary + ";--modalfooter:" +
+				primary +
+				";}.blacktheme #imagemodal{background: url(\"../img/pixel.svg\");}";
+			mainWindow.webContents.send('theme-css-response', css);
+		} catch (e) {
+			var css = "";
+		}
+
+	})
+	ipc.on('theme-json-list', function(e, arg) {
+		fs.readdir(app.getPath("userData"), function(err, files) {
+			if (err) throw err;
+			var fileList = files.filter(function(file) {
+				var tfile = join(app.getPath("userData"), file);
+				return fs.statSync(tfile).isFile() && /.*\.thedesktheme$/.test(tfile); //絞り込み
+			})
+			var themes = [];
+			for (var i = 0; i < fileList.length; i++) {
+				var themecss = join(app.getPath("userData"), fileList[i]);
+				var json = JSON.parse(fs.readFileSync(themecss, 'utf8'));
+				themes.push({
+					name: json.name,
+					id: json.id
+				})
+			}
+			mainWindow.webContents.send('theme-json-list-response', themes);
+		});
+	})
+}
+exports.css = css;

app/main/dl.js

@@ -0,0 +1,123 @@
+function dl(mainWindow,lang_path,base) {
+    const electron = require("electron");
+    const shell=electron.shell;
+	const fs = require("fs");
+	const {download} = require('electron-dl');
+    const BrowserWindow = electron.BrowserWindow;
+    const dialog = electron.dialog;
+	var updatewin = null;
+    var ipc = electron.ipcMain;
+    const app = electron.app;
+    const join = require('path').join;
+	ipc.on('update', function(e, x, y) {
+            
+			var platform = process.platform;
+			var bit = process.arch;
+			if (platform != "others") {
+				updatewin = new BrowserWindow({
+					width: 600,
+					height: 400,
+					"transparent": false, // ウィンドウの背景を透過
+					"frame": false, // 枠の無いウィンドウ
+					"resizable": false,
+					"modal": true
+				});
+				var lang = fs.readFileSync(lang_path, 'utf8');
+				updatewin.loadURL(base + lang + '/update.html');
+
+				return "true"
+			} else {
+				return false;
+			}
+		})
+		//アプデDL
+	ipc.on('download-btn', (e, args) => {
+		
+		var platform = process.platform;
+		var bit = process.arch;
+		dialog.showSaveDialog(null, {
+			title: 'Save',
+			defaultPath: app.getPath('home') + "/" + args[1]
+		}, (savedFiles) => {
+			console.log(savedFiles);
+			if (!savedFiles) {
+				return false;
+			}
+			if (platform == "win32") {
+				var m = savedFiles.match(/(.+)\\(.+)$/);
+			} else {
+				var m = savedFiles.match(/(.+)\/(.+)$/);
+			}
+			//console.log(m);
+			if (isExistFile(savedFiles)) {
+				fs.unlinkSync(savedFiles);
+			}
+			dl(args[0], args[1], m[1]);
+		});
+	});
+
+	function isExistFile(file) {
+		try {
+			fs.statSync(file);
+			return true
+		} catch (err) {
+			if (err.code === 'ENOENT') return false
+		}
+	}
+
+	function dl(url, file, dir) {
+        
+		updatewin.webContents.send('mess', "ダウンロードを開始します。");
+		const opts = {
+			directory: dir,
+			openFolderWhenDone: true,
+			onProgress: function(e) {
+				updatewin.webContents.send('prog', e);
+			},
+			saveAs: false
+		};
+		download(BrowserWindow.getFocusedWindow(),
+				url, opts)
+			.then(dl => {
+				updatewin.webContents.send('mess', "ダウンロードが完了しました。");
+				app.quit();
+
+			})
+			.catch(console.error);
+	}
+	ipc.on('general-dl', (e, args) => {
+        
+		var name = "";
+		var platform = process.platform;
+		var bit = process.arch;
+		if (args[1] == "") {
+			if (platform == "win32") {
+				var dir = app.getPath('home') + "\\Pictures\\TheDesk";
+			} else if (platform == "linux" || platform == "darwin") {
+				var dir = app.getPath('home') + "/Pictures/TheDesk";
+			}
+		} else {
+			var dir = args[1];
+		}
+		const opts = {
+			directory: dir,
+			filename: name,
+			openFolderWhenDone: false,
+			onProgress: function(e) {
+				mainWindow.webContents.send('general-dl-prog', e);
+			},
+			saveAs: false
+		};
+		download(BrowserWindow.getFocusedWindow(),
+				args[0], opts)
+			.then(dl => {
+				mainWindow.webContents.send('general-dl-message', dir);
+			})
+			.catch(console.error);
+    });
+    ipc.on('open-finder', (e, folder) => {
+        
+		shell.showItemInFolder(folder)
+    });
+}
+exports.dl = dl;

app/main/img.js

@@ -0,0 +1,71 @@
+function img(mainWindow,dir){
+    const electron = require("electron");
+    const dialog = electron.dialog;
+    const fs = require("fs");
+    var Jimp = require("jimp");
+    var ipc = electron.ipcMain;
+    const BrowserWindow = electron.BrowserWindow;
+    ipc.on('file-select', (e, args) => {
+        
+        dialog.showOpenDialog(null, {
+            properties: ['openFile', 'multiSelections'],
+            title: '添付ファイルを選択',
+            defaultPath: '.',
+            filters: [
+                {name: 'メディアファイル', extensions: ['jpg', 'png', 'gif', 'bmp', 'jpeg','mp4','webm']},
+                {name: '画像', extensions: ['jpg', 'png', 'gif', 'bmp', 'jpeg']},
+                  {name: '動画', extensions: ['mp4','webm']},
+                  {name: '全てのファイル', extensions: ['*']}
+            ]
+        }, (fileNames) => {
+            if(!fileNames){
+                return false;
+            }
+            for(var i=0;i<fileNames.length;i++){
+                var path=fileNames[i];
+                var bin = fs.readFileSync(path, 'base64');
+                mainWindow.webContents.send('bmp-img-comp', [bin,'new']);
+            }
+        });
+    });
+    ipc.on('adobe', (e, arg) => {
+        
+        if(!arg){
+           const options = {
+               type: 'info',
+               title: 'Adobeフォトエディタ',
+               message: "「許可」または「永続的に許可」をクリックするとTheDeskとAdobeで情報を共有します。\n次のウィンドウを開いている時以外は一切提供しません。",
+               buttons: ['拒否', '許可','永続的に許可']
+             }
+             dialog.showMessageBox(options, function(index) {
+               if(index===2){
+                   mainWindow.webContents.send('adobeagree', "true");
+               }
+               if(index>0){
+                   adobeWindow();
+               }
+             })
+        }else{
+           adobeWindow();
+        }
+   });
+   function adobeWindow(){
+       var window = new BrowserWindow({
+           width: 1000,
+           height: 750
+       });
+       window.loadURL(dir + '/adobe.html');
+   }
+   ipc.on('bmp-image', (e, args) => {
+       
+	var m = args[0].match(/(.+)\\(.+)\.(.+)$/);
+	Jimp.read(args[0], function (err, lenna) {
+		if (err) throw err;
+		lenna.getBase64(Jimp.MIME_PNG, function (err, src) {
+			mainWindow.webContents.send('bmp-img-comp', [src,args[1]]);
+	   });
+	});
+	
+});
+}
+exports.img = img;

app/main/language.js

@@ -1,5 +1,5 @@
 // Create the Application's main menu
-function templete(lang){
+function templete(lang,mainWindow,packaged,dir){
     const electron = require("electron");
     const app = electron.app;
     const BrowserWindow = electron.BrowserWindow;
@@ -74,7 +74,7 @@ function templete(lang){
 			        "transparent": false,    // ウィンドウの背景を透過
 			        "frame": false,     // 枠の無いウィンドウ
 			        "resizable": false });
-	             window.loadURL('file://' + __dirname + '/about.html?ver='+ver);
+	             window.loadURL(dir + '/about.html?ver='+ver);
              } },
             { type: "separator" },
             { label: dict.quit[lang], accelerator: "Command+Q", click: function() { app.quit(); }}
@@ -95,7 +95,7 @@ function templete(lang){
             {
                 label: 'Toggle Developer Tools',
                 accelerator: 'Alt+Command+I',
-                click: function() { mainWindow.toggleDevTools(); }
+                click: function() { if(!packaged){mainWindow.toggleDevTools();} }
               },
           {
             label: dict.reload[lang],

app/main/np.js

@@ -0,0 +1,69 @@
+function np(mainWindow){
+    const electron = require("electron");
+    const join = require('path').join;
+    const app = electron.app;
+    const fs = require("fs");
+    var ipc = electron.ipcMain;
+    ipc.on('itunes', (e, args) => {
+        //Verified on Windows
+        console.log("Access");
+        if(args[0]=="set"){
+            var {NowPlaying,PlayerName} = require("nowplaying-node");
+            var nppath=join(app.getPath("userData"), "nowplaying");
+            var npProvider;
+            try {
+                npProvider = args[1];
+            } catch (e) {
+                npProvider="AIMP";
+            }
+            var myAIMP = new NowPlaying({
+                fetchCover: true,
+                player: PlayerName[npProvider],
+            });
+            fs.writeFileSync(nppath, npProvider);
+        }else{
+            var platform=process.platform;
+            var bit=process.arch;
+            if(platform=="darwin"){
+            const nowplaying = require("itunes-nowplaying-mac")
+            nowplaying.getRawData().then(function (value) {
+                mainWindow.webContents.send('itunes-np', value);
+            }).catch(function (error) {
+                // 非同期処理失敗。呼ばれない
+                console.log(error);
+            });
+            }else{
+                var {NowPlaying,PlayerName} = require("nowplaying-node");
+                var nppath=join(app.getPath("userData"), "nowplaying");
+                var npProvider;
+                try {
+                    npProvider = fs.readFileSync(nppath, 'utf8');
+                } catch (e) {
+                    npProvider="AIMP";
+                }
+                var myAIMP = new NowPlaying({
+                    fetchCover: true,
+                    player: PlayerName[npProvider],
+                });
+                myAIMP.update();
+                var path=myAIMP.getCoverPath();
+                if(path){
+                    var bin = fs.readFileSync(path, 'base64');
+                }else{
+                    var bin=false;
+                }
+                
+                var value={
+                    win:true,
+                    name:myAIMP.getTitle(),
+                    artist:myAIMP.getArtist(),
+                    album:myAIMP.getAlbum(),
+                    path:bin
+                }
+                mainWindow.webContents.send('itunes-np', value);
+            }
+            }
+        
+    });
+}
+exports.TheDeskNowPlaying = np;

app/main/system.js

@@ -0,0 +1,181 @@
+function system(mainWindow, dir, lang) {
+    const electron = require("electron");
+    const app = electron.app;
+	const join = require('path').join;
+	var Jimp = require("jimp");
+	const fs = require("fs");
+	var ipc = electron.ipcMain;
+	var tmp_img = join(app.getPath("userData"), "tmp.png");
+	var ha_path = join(app.getPath("userData"), "hardwareAcceleration");
+	var lang_path = join(app.getPath("userData"), "language");
+	const BrowserWindow = electron.BrowserWindow;
+	const dialog = electron.dialog;
+	const os = require('os')
+    const fm = require('font-manager');
+    const language=require("../main/language.js");
+	ipc.on('native-notf', function(e, args) {
+        
+		var platform = process.platform;
+		var bit = process.arch;
+		if (platform == "win32") {
+			const notifier = require('node-notifier')
+			var tmp_imge = tmp_img;
+			Jimp.read(args[2], function(err, lenna) {
+				if (!err && lenna) {
+					lenna.write(tmp_img);
+					var tmp_imge = tmp_img;
+				} else {
+					var tmp_imge = "";
+				}
+				notifier.notify({
+						appID: "top.thedesk",
+						message: args[1],
+						title: args[0],
+						icon: tmp_imge,
+						sound: false,
+						wait: true,
+					},
+					function(err, response) {
+						console.log(err, response)
+					});
+			});
+		}
+	});
+	//言語
+	ipc.on('lang', function(e, arg) {
+            
+			console.log("set:" + arg);
+			fs.writeFileSync(lang_path, arg);
+			mainWindow.webContents.send('langres', "");
+		})
+		//ハードウェアアクセラレーションの無効化
+	ipc.on('ha', function(e, arg) {
+        
+		if (arg == "true") {
+			fs.writeFileSync(ha_path, arg);
+		} else {
+			fs.unlink(ha_path, function(err) {});
+		}
+		app.relaunch()
+		app.exit()
+	})
+
+	ipc.on('quit', (e, args) => {
+        
+		app.quit();
+	});
+	ipc.on('about', (e, args) => {
+        
+		about();
+	});
+
+	function about() {
+        
+		var ver = app.getVersion()
+		var window = new BrowserWindow({
+			width: 300,
+			height: 460,
+			"transparent": false, // ウィンドウの背景を透過
+			"frame": false, // 枠の無いウィンドウ
+			"resizable": false
+		});
+		window.loadURL(dir + '/about.html?ver=' + ver);
+		return "true"
+	}
+	ipc.on('column-del', (e, args) => {
+         
+		console.log(lang);
+		var options = language.delsel(lang)
+		dialog.showMessageBox(options, function(index) {
+			mainWindow.webContents.send('column-del-reply', index);
+		})
+	});
+	ipc.on('nano', function(e, x, y) {
+        
+		var nano_info_path = join(app.getPath("userData"),
+			"nano-window-position.json");
+		var window_pos;
+		try {
+			window_pos = JSON.parse(fs.readFileSync(nano_info_path, 'utf8'));
+		} catch (e) {
+			window_pos = [0, 0]; // デフォルトバリュー
+		}
+		var nanowindow = new BrowserWindow({
+			width: 350,
+			height: 200,
+			"transparent": false, // ウィンドウの背景を透過
+			"frame": false, // 枠の無いウィンドウ
+			"resizable": false
+		});
+		nanowindow.loadURL(dir + '/nano.html');
+		nanowindow.setAlwaysOnTop(true);
+
+		nanowindow.setPosition(window_pos[0], window_pos[1]);
+		nanowindow.on('close', function() {
+			fs.writeFileSync(nano_info_path, JSON.stringify(nanowindow.getPosition()));
+		});
+		return true;
+	})
+
+	var cbTimer1;
+	ipc.on('startmem', (e, arg) => {
+		cbTimer1 = setInterval(mems, 1000);
+	});
+	ipc.on('endmem', (e, arg) => {
+		if (cbTimer1) {
+			clearInterval(cbTimer1);
+		}
+	});
+
+	function mems() {
+		var mem = os.totalmem() - os.freemem();
+		if (mainWindow) {
+			mainWindow.webContents.send('memory', [mem, os.cpus()[0].model, os.totalmem()]);
+		}
+	}
+	ipc.on('export', (e, args) => {
+		fs.writeFileSync(args[0], args[1]);
+	});
+	ipc.on('import', (e, arg) => {
+		mainWindow.webContents.send('config', fs.readFileSync(arg, 'utf8'));
+	});
+	//フォント
+	function object_array_sort(data, key, order, fn) {
+		//デフォは降順(DESC)
+		var num_a = -1;
+		var num_b = 1;
+
+		if (order === 'asc') { //指定があれば昇順(ASC)
+			num_a = 1;
+			num_b = -1;
+		}
+
+		data = data.sort(function(a, b) {
+			var x = a[key];
+			var y = b[key];
+			if (x > y) return num_a;
+			if (x < y) return num_b;
+			return 0;
+		});
+
+		//重複排除
+		var arrObj = {};
+		for (var i = 0; i < data.length; i++) {
+			arrObj[data[i]['family']] = data[i];
+		}
+
+		data = [];
+		for (var key in arrObj) {
+			data.push(arrObj[key]);
+		}
+
+		fn(data); // ソート後の配列を返す
+	}
+	ipc.on('fonts', (e, arg) => {
+		var fonts = fm.getAvailableFontsSync();
+		object_array_sort(fonts, 'family', 'asc', function(fonts_sorted) {
+			mainWindow.webContents.send('font-list', fonts_sorted);
+		});
+	});
+}
+exports.system = system;

app/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "thedesk",
-  "version": "17.2.0",
+  "version": "18.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -15,14 +15,14 @@
       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
     },
     "ajv": {
-      "version": "5.5.2",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
-      "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz",
+      "integrity": "sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==",
       "requires": {
-        "co": "^4.6.0",
-        "fast-deep-equal": "^1.0.0",
+        "fast-deep-equal": "^2.0.1",
         "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.3.0"
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
       }
     },
     "ansi-regex": {
@@ -60,40 +60,36 @@
       "dev": true
     },
     "asar": {
-      "version": "0.14.6",
-      "resolved": "https://registry.npmjs.org/asar/-/asar-0.14.6.tgz",
-      "integrity": "sha512-ZqybKcdO5At6y3ge2RHxVImc6Eltb2t3sxT7lk4T4zjZBSFUuIGCIZY6f41dCjlvJSizN5QPRr8YTgMhpgBjLg==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/asar/-/asar-1.0.0.tgz",
+      "integrity": "sha512-MBiDU5cDr9UWuY2F0zq2fZlnyRq1aOPmJGMas22Qa14K1odpRXL3xkMHPN3uw2hAK5mD89Q+/KidOUtpi4V0Cg==",
       "dev": true,
       "requires": {
         "chromium-pickle-js": "^0.2.0",
-        "commander": "^2.9.0",
-        "cuint": "^0.2.1",
-        "glob": "^6.0.4",
-        "minimatch": "^3.0.3",
-        "mkdirp": "^0.5.0",
-        "mksnapshot": "^0.3.4",
-        "tmp": "0.0.28"
+        "commander": "^2.19.0",
+        "cuint": "^0.2.2",
+        "glob": "^7.1.3",
+        "minimatch": "^3.0.4",
+        "mkdirp": "^0.5.1",
+        "pify": "^4.0.1",
+        "tmp-promise": "^1.0.5"
       },
       "dependencies": {
-        "glob": {
-          "version": "6.0.4",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz",
-          "integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=",
-          "dev": true,
-          "requires": {
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "2 || 3",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+          "dev": true
         }
       }
     },
     "asn1": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
-      "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y="
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
+      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
+      "requires": {
+        "safer-buffer": "~2.1.0"
+      }
     },
     "assert-plus": {
       "version": "1.0.0",
@@ -117,9 +113,9 @@
       "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
     },
     "aws4": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
-      "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4="
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
+      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
     },
     "balanced-match": {
       "version": "1.0.0",
@@ -133,10 +129,9 @@
       "dev": true
     },
     "bcrypt-pbkdf": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
-      "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=",
-      "optional": true,
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
       "requires": {
         "tweetnacl": "^0.14.3"
       }
@@ -146,16 +141,6 @@
       "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-2.4.0.tgz",
       "integrity": "sha1-g4qZLan51zfg9LLbC+YrsJ3Qxeg="
     },
-    "binary": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",
-      "integrity": "sha1-n2BVO8XOjDOG87VTz/R0Yq3sqnk=",
-      "dev": true,
-      "requires": {
-        "buffers": "~0.1.1",
-        "chainsaw": "~0.1.0"
-      }
-    },
     "block-stream": {
       "version": "0.0.9",
       "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
@@ -175,14 +160,6 @@
       "resolved": "https://registry.npmjs.org/bmp-js/-/bmp-js-0.0.3.tgz",
       "integrity": "sha1-ZBE+nHzxICs3btYHvzBibr5XsYo="
     },
-    "boom": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/boom/-/boom-4.3.1.tgz",
-      "integrity": "sha1-T4owBctKfjiJ90kDD9JbluAdLjE=",
-      "requires": {
-        "hoek": "4.x.x"
-      }
-    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -225,12 +202,6 @@
       "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
       "dev": true
     },
-    "buffers": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
-      "integrity": "sha1-skV5w77U1tOWru5tmorn9Ugqt7s=",
-      "dev": true
-    },
     "builtin-modules": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
@@ -266,15 +237,6 @@
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
     },
-    "chainsaw": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
-      "integrity": "sha1-XqtQsor+WAdNDVgpE4iCi15fvJg=",
-      "dev": true,
-      "requires": {
-        "traverse": ">=0.3.0 <0.4"
-      }
-    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -357,11 +319,6 @@
       "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
       "dev": true
     },
-    "co": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ="
-    },
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -397,9 +354,9 @@
       }
     },
     "commander": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz",
-      "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==",
+      "version": "2.20.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
+      "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==",
       "dev": true
     },
     "compare-version": {
@@ -448,24 +405,6 @@
         "which": "^1.2.9"
       }
     },
-    "cryptiles": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-3.1.2.tgz",
-      "integrity": "sha1-qJ+7Ig9c4l7FboxKqKT9e1sNKf4=",
-      "requires": {
-        "boom": "5.x.x"
-      },
-      "dependencies": {
-        "boom": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/boom/-/boom-5.2.0.tgz",
-          "integrity": "sha1-XdnabuOl8wIHdDYpDLcX0/SlTgI=",
-          "requires": {
-            "hoek": "4.x.x"
-          }
-        }
-      }
-    },
     "cuint": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",
@@ -503,47 +442,6 @@
       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
       "dev": true
     },
-    "decompress-zip": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/decompress-zip/-/decompress-zip-0.3.0.tgz",
-      "integrity": "sha1-rjvLfjTGWHmt/nfhnDD4ZgK0vbA=",
-      "dev": true,
-      "requires": {
-        "binary": "^0.3.0",
-        "graceful-fs": "^4.1.3",
-        "mkpath": "^0.1.0",
-        "nopt": "^3.0.1",
-        "q": "^1.1.2",
-        "readable-stream": "^1.1.8",
-        "touch": "0.0.3"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "1.1.14",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
-          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
-          "dev": true,
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.1",
-            "isarray": "0.0.1",
-            "string_decoder": "~0.10.x"
-          }
-        },
-        "string_decoder": {
-          "version": "0.10.31",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
-          "dev": true
-        }
-      }
-    },
     "deep-extend": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
@@ -581,12 +479,12 @@
       "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
     },
     "ecc-jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
-      "integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=",
-      "optional": true,
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
       "requires": {
-        "jsbn": "~0.1.0"
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
       }
     },
     "electron": {
@@ -662,48 +560,40 @@
       }
     },
     "electron-download": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/electron-download/-/electron-download-3.3.0.tgz",
-      "integrity": "sha1-LP1U1pZsAZxNSa1l++Zcyc3vaMg=",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/electron-download/-/electron-download-4.1.1.tgz",
+      "integrity": "sha512-FjEWG9Jb/ppK/2zToP+U5dds114fM1ZOJqMAR4aXXL5CvyPE9fiqBK/9YcwC9poIFQTEJk/EM/zyRwziziRZrg==",
       "dev": true,
       "requires": {
-        "debug": "^2.2.0",
-        "fs-extra": "^0.30.0",
-        "home-path": "^1.0.1",
+        "debug": "^3.0.0",
+        "env-paths": "^1.0.0",
+        "fs-extra": "^4.0.1",
         "minimist": "^1.2.0",
-        "nugget": "^2.0.0",
-        "path-exists": "^2.1.0",
-        "rc": "^1.1.2",
-        "semver": "^5.3.0",
-        "sumchecker": "^1.2.0"
+        "nugget": "^2.0.1",
+        "path-exists": "^3.0.0",
+        "rc": "^1.2.1",
+        "semver": "^5.4.1",
+        "sumchecker": "^2.0.2"
       },
       "dependencies": {
-        "es6-promise": {
-          "version": "4.2.5",
-          "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.5.tgz",
-          "integrity": "sha512-n6wvpdE43VFtJq+lUDYDBFUwV8TZbuGXLV4D6wKafg13ldznKsyEvatubnmUe31zcvelSzOHF+XbaT+Bl9ObDg==",
-          "dev": true
+        "debug": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
         },
         "fs-extra": {
-          "version": "0.30.0",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.30.0.tgz",
-          "integrity": "sha1-8jP/zAjU2n1DLapEl3aYnbHfk/A=",
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
+          "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.1.2",
-            "jsonfile": "^2.1.0",
-            "klaw": "^1.0.0",
-            "path-is-absolute": "^1.0.0",
-            "rimraf": "^2.2.8"
-          }
-        },
-        "jsonfile": {
-          "version": "2.4.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
-          "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.6"
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
           }
         },
         "minimist": {
@@ -712,24 +602,11 @@
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },
-        "path-exists": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
-          "dev": true,
-          "requires": {
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "sumchecker": {
-          "version": "1.3.1",
-          "resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-1.3.1.tgz",
-          "integrity": "sha1-ebs7RFbdBPGOvbwNcDodHa7FEF0=",
-          "dev": true,
-          "requires": {
-            "debug": "^2.2.0",
-            "es6-promise": "^4.0.5"
-          }
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+          "dev": true
         }
       }
     },
@@ -752,26 +629,6 @@
             "ms": "^2.1.1"
           }
         },
-        "fs-extra": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
-          "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "jsonfile": "^4.0.0",
-            "universalify": "^0.1.0"
-          }
-        },
-        "jsonfile": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.6"
-          }
-        },
         "ms": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
@@ -803,12 +660,12 @@
       }
     },
     "electron-packager": {
-      "version": "13.0.1",
-      "resolved": "https://registry.npmjs.org/electron-packager/-/electron-packager-13.0.1.tgz",
-      "integrity": "sha512-fXfldaZ1wihpPaMTSGMxvCeETJwVArlnMmKafVXLJbbZwS+WTjY4iL7ju9WMQ0LNGuiiIwSMCQFxt5iA087mqg==",
+      "version": "13.1.1",
+      "resolved": "https://registry.npmjs.org/electron-packager/-/electron-packager-13.1.1.tgz",
+      "integrity": "sha512-3Drgcw8OEOP3Psw/PprloAFJSkSUSQgjUq3AmWffJGB3Kj5WXmZl6A3GOUs8aT7bP/8GWg4oYqSiCSnA5PQkdQ==",
       "dev": true,
       "requires": {
-        "asar": "^0.14.0",
+        "asar": "^1.0.0",
         "debug": "^4.0.1",
         "electron-download": "^4.1.1",
         "electron-notarize": "^0.0.5",
@@ -824,15 +681,9 @@
         "resolve": "^1.1.6",
         "sanitize-filename": "^1.6.0",
         "semver": "^5.3.0",
-        "yargs-parser": "^11.0.0"
+        "yargs-parser": "^13.0.0"
       },
       "dependencies": {
-        "camelcase": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.0.0.tgz",
-          "integrity": "sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==",
-          "dev": true
-        },
         "debug": {
           "version": "4.1.1",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -842,71 +693,6 @@
             "ms": "^2.1.1"
           }
         },
-        "electron-download": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/electron-download/-/electron-download-4.1.1.tgz",
-          "integrity": "sha512-FjEWG9Jb/ppK/2zToP+U5dds114fM1ZOJqMAR4aXXL5CvyPE9fiqBK/9YcwC9poIFQTEJk/EM/zyRwziziRZrg==",
-          "dev": true,
-          "requires": {
-            "debug": "^3.0.0",
-            "env-paths": "^1.0.0",
-            "fs-extra": "^4.0.1",
-            "minimist": "^1.2.0",
-            "nugget": "^2.0.1",
-            "path-exists": "^3.0.0",
-            "rc": "^1.2.1",
-            "semver": "^5.4.1",
-            "sumchecker": "^2.0.2"
-          },
-          "dependencies": {
-            "debug": {
-              "version": "3.2.6",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-              "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-              "dev": true,
-              "requires": {
-                "ms": "^2.1.1"
-              }
-            },
-            "fs-extra": {
-              "version": "4.0.3",
-              "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
-              "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
-              "dev": true,
-              "requires": {
-                "graceful-fs": "^4.1.2",
-                "jsonfile": "^4.0.0",
-                "universalify": "^0.1.0"
-              }
-            }
-          }
-        },
-        "fs-extra": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
-          "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "jsonfile": "^4.0.0",
-            "universalify": "^0.1.0"
-          }
-        },
-        "jsonfile": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.6"
-          }
-        },
-        "minimist": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
-          "dev": true
-        },
         "ms": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
@@ -920,9 +706,9 @@
           "dev": true
         },
         "yargs-parser": {
-          "version": "11.1.1",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
-          "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
+          "version": "13.0.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.0.0.tgz",
+          "integrity": "sha512-w2LXjoL8oRdRQN+hOyppuXs+V/fVAYtpcrRxZuF7Kt/Oc+Jr2uAcVntaUTNT6w5ihoWfFDpNY8CPx1QskxZ/pw==",
           "dev": true,
           "requires": {
             "camelcase": "^5.0.0",
@@ -931,16 +717,6 @@
         }
       }
     },
-    "electron-prebuilt": {
-      "version": "1.4.13",
-      "resolved": "https://registry.npmjs.org/electron-prebuilt/-/electron-prebuilt-1.4.13.tgz",
-      "integrity": "sha1-Cg5Ne/iVokIGHM+rKTlNzaHaM9I=",
-      "dev": true,
-      "requires": {
-        "electron-download": "^3.0.1",
-        "extract-zip": "^1.0.3"
-      }
-    },
     "electron-rebuild": {
       "version": "1.8.4",
       "resolved": "https://registry.npmjs.org/electron-rebuild/-/electron-rebuild-1.8.4.tgz",
@@ -1048,9 +824,9 @@
       }
     },
     "extend": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz",
-      "integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ="
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
     },
     "extract-zip": {
       "version": "1.6.7",
@@ -1070,9 +846,9 @@
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
     },
     "fast-deep-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz",
-      "integrity": "sha1-liVqO8l1WV6zbYLpkp0GDYk0Of8="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
     },
     "fast-json-stable-stringify": {
       "version": "2.0.0",
@@ -1144,15 +920,6 @@
             "universalify": "^0.1.0"
           }
         },
-        "jsonfile": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.6"
-          }
-        },
         "ms": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
@@ -1250,15 +1017,6 @@
             "universalify": "^0.1.0"
           }
         },
-        "jsonfile": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.6"
-          }
-        },
         "ms": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
@@ -1420,11 +1178,11 @@
       "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI="
     },
     "har-validator": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.0.3.tgz",
-      "integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
+      "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
       "requires": {
-        "ajv": "^5.1.0",
+        "ajv": "^6.5.5",
         "har-schema": "^2.0.0"
       }
     },
@@ -1439,28 +1197,6 @@
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
     },
-    "hawk": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/hawk/-/hawk-6.0.2.tgz",
-      "integrity": "sha1-r02RTrBl+bXOTZ0RwcshJu7MMDg=",
-      "requires": {
-        "boom": "4.x.x",
-        "cryptiles": "3.x.x",
-        "hoek": "4.x.x",
-        "sntp": "2.x.x"
-      }
-    },
-    "hoek": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
-      "integrity": "sha1-ljRQKqEsRF3Vp8VzS1cruHOKrLs="
-    },
-    "home-path": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/home-path/-/home-path-1.0.6.tgz",
-      "integrity": "sha512-wo+yjrdAtoXt43Vy92a+0IPCYViiyLAHyp0QVS4xL/tfvVz5sXIW1ubLZk3nhVkD92fQpUMKX+fzMjr5F489vw==",
-      "dev": true
-    },
     "hosted-git-info": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz",
@@ -1600,12 +1336,6 @@
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
     },
-    "itunes-nowplaying-mac": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/itunes-nowplaying-mac/-/itunes-nowplaying-mac-0.2.3.tgz",
-      "integrity": "sha512-1n418TnV4BnpSP6IzuxVECgPYnlm/nUZIXsblvzFVu4+rxmswXPnz3xi8XUq0r28I9njTi3g6vmBFa5YFHb8TA==",
-      "optional": true
-    },
     "jimp": {
       "version": "0.2.28",
       "resolved": "https://registry.npmjs.org/jimp/-/jimp-0.2.28.tgz",
@@ -1637,8 +1367,7 @@
     "jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-      "optional": true
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
     },
     "json-schema": {
       "version": "0.2.3",
@@ -1646,9 +1375,9 @@
       "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
     },
     "json-schema-traverse": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
-      "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
     "json-stringify-safe": {
       "version": "5.0.1",
@@ -1690,15 +1419,6 @@
         "verror": "1.10.0"
       }
     },
-    "klaw": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz",
-      "integrity": "sha1-QIhDO0azsbolnXh4XY6W9zugJDk=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.9"
-      }
-    },
     "lcid": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
@@ -1888,47 +1608,6 @@
         "minimist": "0.0.8"
       }
     },
-    "mkpath": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/mkpath/-/mkpath-0.1.0.tgz",
-      "integrity": "sha1-dVSm+Nhxg0zJe1RisSLEwSTW3pE=",
-      "dev": true
-    },
-    "mksnapshot": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/mksnapshot/-/mksnapshot-0.3.4.tgz",
-      "integrity": "sha512-FgUTiWiY+35LgL95P/MDYrBuQO5o0s3MmaWKX6ZJWoX4vMOY9vPsAv763l1OSSelL9jPsBQ/wf4bzfqTLNPSFg==",
-      "dev": true,
-      "requires": {
-        "decompress-zip": "0.3.0",
-        "fs-extra": "0.26.7",
-        "request": "2.x"
-      },
-      "dependencies": {
-        "fs-extra": {
-          "version": "0.26.7",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.26.7.tgz",
-          "integrity": "sha1-muH92UiXeY7at20JGM9C0MMYT6k=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "jsonfile": "^2.1.0",
-            "klaw": "^1.0.0",
-            "path-is-absolute": "^1.0.0",
-            "rimraf": "^2.2.8"
-          }
-        },
-        "jsonfile": {
-          "version": "2.4.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
-          "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.6"
-          }
-        }
-      }
-    },
     "modify-filename": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/modify-filename/-/modify-filename-1.1.0.tgz",
@@ -2191,9 +1870,9 @@
       "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
     },
     "oauth-sign": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
-      "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM="
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ=="
     },
     "object-assign": {
       "version": "4.1.1",
@@ -2516,16 +2195,10 @@
       "resolved": "https://registry.npmjs.org/pupa/-/pupa-1.0.0.tgz",
       "integrity": "sha1-mpVopa9+ZXuEYqbp1TKHQ1YM7/Y="
     },
-    "q": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
-      "dev": true
-    },
     "qs": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz",
-      "integrity": "sha1-NJzfbu+J7EXBLX1es/wMhwNDptg="
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
     },
     "rc": {
       "version": "1.2.8",
@@ -2613,32 +2286,50 @@
       }
     },
     "request": {
-      "version": "2.83.0",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.83.0.tgz",
-      "integrity": "sha1-ygtl2gLtYpNYh4COb1EDgQNOM1Y=",
+      "version": "2.88.0",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
+      "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
       "requires": {
         "aws-sign2": "~0.7.0",
-        "aws4": "^1.6.0",
+        "aws4": "^1.8.0",
         "caseless": "~0.12.0",
-        "combined-stream": "~1.0.5",
-        "extend": "~3.0.1",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
         "forever-agent": "~0.6.1",
-        "form-data": "~2.3.1",
-        "har-validator": "~5.0.3",
-        "hawk": "~6.0.2",
+        "form-data": "~2.3.2",
+        "har-validator": "~5.1.0",
         "http-signature": "~1.2.0",
         "is-typedarray": "~1.0.0",
         "isstream": "~0.1.2",
         "json-stringify-safe": "~5.0.1",
-        "mime-types": "~2.1.17",
-        "oauth-sign": "~0.8.2",
+        "mime-types": "~2.1.19",
+        "oauth-sign": "~0.9.0",
         "performance-now": "^2.1.0",
-        "qs": "~6.5.1",
-        "safe-buffer": "^5.1.1",
-        "stringstream": "~0.0.5",
-        "tough-cookie": "~2.3.3",
+        "qs": "~6.5.2",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "~2.4.3",
         "tunnel-agent": "^0.6.0",
-        "uuid": "^3.1.0"
+        "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "mime-db": {
+          "version": "1.38.0",
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.38.0.tgz",
+          "integrity": "sha512-bqVioMFFzc2awcdJZIzR3HjZFX20QhilVS7hytkKrv7xFAn8bM1gzc/FOX2awLISvWe0PV8ptFKcon+wZ5qYkg=="
+        },
+        "mime-types": {
+          "version": "2.1.22",
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.22.tgz",
+          "integrity": "sha512-aGl6TZGnhm/li6F7yx82bJiBZwgiEa4Hf6CNr8YO+r5UHr53tSTYZb102zyU50DOWWKeOv0uQLRL0/9EiKWCog==",
+          "requires": {
+            "mime-db": "~1.38.0"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        }
       }
     },
     "require-directory": {
@@ -2694,6 +2385,11 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
       "integrity": "sha1-iTMSr2myEj3vcfV4iQAWce6yyFM="
     },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
     "sanitize-filename": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/sanitize-filename/-/sanitize-filename-1.6.1.tgz",
@@ -2752,14 +2448,6 @@
         "string-width": "^1.0.1"
       }
     },
-    "sntp": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/sntp/-/sntp-2.1.0.tgz",
-      "integrity": "sha1-LGzsFP7cIiJznK+bXD2F0cxaLMg=",
-      "requires": {
-        "hoek": "4.x.x"
-      }
-    },
     "sort-keys": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
@@ -2826,9 +2514,9 @@
       "dev": true
     },
     "sshpk": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.1.tgz",
-      "integrity": "sha1-US322mKHFEMW3EwY/hzx2UBzm+M=",
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
+      "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
       "requires": {
         "asn1": "~0.2.3",
         "assert-plus": "^1.0.0",
@@ -2837,6 +2525,7 @@
         "ecc-jsbn": "~0.1.1",
         "getpass": "^0.1.1",
         "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
         "tweetnacl": "~0.14.0"
       }
     },
@@ -2871,11 +2560,6 @@
         "safe-buffer": "~5.1.0"
       }
     },
-    "stringstream": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
-      "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg="
-    },
     "strip-ansi": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
@@ -2998,48 +2682,33 @@
       "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
     },
     "tmp": {
-      "version": "0.0.28",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.28.tgz",
-      "integrity": "sha1-Fyc1t/YU6nrzlmT6hM8N5OUV0SA=",
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
+      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
       "dev": true,
       "requires": {
-        "os-tmpdir": "~1.0.1"
+        "os-tmpdir": "~1.0.2"
       }
     },
-    "touch": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/touch/-/touch-0.0.3.tgz",
-      "integrity": "sha1-Ua7z1ElXHU8oel2Hyci0kYGg2x0=",
+    "tmp-promise": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/tmp-promise/-/tmp-promise-1.0.5.tgz",
+      "integrity": "sha512-hOabTz9Tp49wCozFwuJe5ISrOqkECm6kzw66XTP23DuzNU7QS/KiZq5LC9Y7QSy8f1rPSLy4bKaViP0OwGI1cA==",
       "dev": true,
       "requires": {
-        "nopt": "~1.0.10"
-      },
-      "dependencies": {
-        "nopt": {
-          "version": "1.0.10",
-          "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
-          "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
-          "dev": true,
-          "requires": {
-            "abbrev": "1"
-          }
-        }
+        "bluebird": "^3.5.0",
+        "tmp": "0.0.33"
       }
     },
     "tough-cookie": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.3.tgz",
-      "integrity": "sha1-C2GKVWW23qkL80JdBNVe3EdadWE=",
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
+      "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
       "requires": {
+        "psl": "^1.1.24",
         "punycode": "^1.4.1"
       }
     },
-    "traverse": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
-      "integrity": "sha1-cXuPIgzAu3tE5AUUwisui7xw2Lk=",
-      "dev": true
-    },
     "trim": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
@@ -3077,8 +2746,7 @@
     "tweetnacl": {
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-      "optional": true
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
     },
     "typedarray": {
       "version": "0.0.6",
@@ -3136,9 +2804,9 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "uuid": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.2.1.tgz",
-      "integrity": "sha1-EsUou51Y0LkmXZovbw/ovhf/HxQ="
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
     },
     "validate-npm-package-license": {
       "version": "3.0.4",
@@ -3160,6 +2828,11 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "vue": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.9.tgz",
+      "integrity": "sha512-t1+tvH8hybPM86oNne3ZozCD02zj/VoZIiojOBPJLjwBn7hxYU5e1gBObFpq8ts1NEn1VhPf/hVXBDAJ3X5ljg=="
+    },
     "wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thedesk",
-  "version": "17.2.0",
+  "version": "18.2.1",
   "description": "TheDesk is a Mastodon client for PC.",
   "main": "main.js",
   "scripts": {
@@ -16,7 +16,7 @@
   },
   "homepage": "https://thedesk.top",
   "author": {
-    "name": "Cutls P",
+    "name": "Cutls",
     "url": "https://kirishima.clooud/@Cutls",
     "email": "web-pro@cutls.com"
   },
@@ -30,6 +30,11 @@
       "name": "ぽぷんじゃ",
       "url": "https://popon.pptdn.jp/@popn_ja",
       "email": "popn.ja@gmail.com"
+    },
+    {
+      "name": "kPherox",
+      "url": "https://www.kr-kp.com/",
+      "email": "admin@mail.kr-kp.com"
     }
   ],
   "license": "GPL-3.0",
@@ -39,11 +44,12 @@
     "jimp": "^0.2.28",
     "json5": "^2.1.0",
     "node-notifier": "^5.2.1",
-    "sumchecker": "^2.0.2"
+    "sumchecker": "^2.0.2",
+    "vue": "^2.6.9"
   },
   "optionalDependencies": {
-    "itunes-nowplaying-mac": "^0.2.3",
-    "nowplaying-node": "^0.1.3"
+    "nowplaying-node": "^0.1.3",
+    "itunes-nowplaying-mac": "git+https://github.com/rinsuki/itunes-nowplaying-mac#pull/1/head"
   },
   "build": {
     "productName": "TheDesk",
@@ -52,13 +58,23 @@
       "output": "../build"
     },
     "win": {
-      "icon": "thedesk.ico",
+      "icon": "build/thedesk.ico",
       "target": [
         "nsis",
         "portable",
         "appx"
       ]
     },
+    "appx": {
+      "identityName": "53491Cutls.TheDesk",
+      "applicationId": "Cutls.TheDesk",
+      "publisherDisplayName": "Cutls",
+      "publisher": "CN=629757F5-A5EE-474F-9562-B304A89A9FD1",
+      "languages": [
+        "JA-JP",
+        "EN-US"
+      ]
+    },
     "nsis": {
       "oneClick": false,
       "allowToChangeInstallationDirectory": true,
@@ -72,17 +88,16 @@
       "category": "Network"
     },
     "mac": {
-      "target": "dmg"
+      "target": ["dmg","zip"]
     },
     "electronDownload": {
-      "version": "4.0.5"
+      "version": "4.0.6"
     },
-    "electronVersion": "4.0.5"
+    "electronVersion": "4.0.6"
   },
   "devDependencies": {
-    "electron": "^4.0.5",
-    "electron-packager": "^13.0.1",
-    "electron-prebuilt": "^1.4.13",
+    "electron": "^4.0.6",
+    "electron-packager": "^13.1.1",
     "electron-rebuild": "^1.8.4"
   }
 }

app/view/en/acct.html

@@ -18,6 +18,14 @@ body,html{overflow-y: scroll;}
 .colorsel{ display:flex; }
 .card .colorsel div:not(.exc){width:20px;height:20px;}
 .card .colorsel div.exc{width:40px;height:20px;}
+.first{
+      display:flex;
+      justify-content: center;
+      align-items:center
+}
+.first .hide-first{
+      display:none;
+}
 </style>
 <meta charset="utf-8">
 <!--
@@ -39,24 +47,27 @@ body,html{overflow-y: scroll;}
 <script type="text/javascript" src="../../js/ui/tips.js"></script>
 <script type="text/javascript" src="../../js/common/time.js"></script>
 <script type="text/javascript" src="../../js/common/modal.js"></script>
-<a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;">Back</a><br>
-<h5>List of accounts</h5>
-<div id="acct-list"></div>
-<div class="divider"></div>
+<div class="hide-first">
+      <a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;">Back</a><br>
+      <h5>List of accounts</h5>
+      <div id="acct-list"></div>
+      <div class="divider"></div>
+</div>
+<div>
 <h5>Add an account</h5><br>
 <div id="add">
 <div class="row">
-      <div class="col s6">
+      <div class="col s8">
             <input type="text" id="url" style="width:70%" placeholder="ex)mstdn.jp">
             <div id="ins-suggest"></div>
-            Check if TheDesk is not working on Windows, you want to login Pleroma servers, you cannot login when it checked.<br>
+            Uncheck it to skip pasiting code.(login to Mastodon on Windows or macOS) (Recommended: pcheck)<br>
             <input type="checkbox" class="filled-in" id="linux" />
                   <label for="linux">Code setup</label><br>
             <input type="checkbox" class="filled-in" id="misskey" />
                   <label for="misskey">Login as Misskey</label><br>
             <button class="btn waves-effect" onclick="instance()">Login</button><br>
       </div>
-      <div class="col s6">
+      <div class="col s4">
             <span style="font-family:Open Sans;">Supports</span>
             <div id="support" class="collection transparent"></div>
       </div>
@@ -73,6 +84,8 @@ body,html{overflow-y: scroll;}
                   <input type="text" id="misskey-key" placeholder="Code">
                   <button class="btn waves-effect" onclick="misskeyLogin()">Auth</button><br>
             </div>
+      </div>
+<div class="hide-first">
 <h5>Main an account</h5>
 <div class="input-field" style="width:300px"><span data-trans="your_acct">Select an account</span>
       <br>
@@ -91,6 +104,7 @@ Toots:<span id="ins-toot"></span><br>
 Users:<span id="ins-user"></span>Users<br>
 Connection:<span id="ins-per"></span>%<br>
 Mastodon version:<span id="ins-ver"></span>@<span id="ins-upd"></span><br>
+</div>
 <script type="text/javascript" src="../../js/ui/theme.js"></script>
 <script type="text/javascript" src="../../js/platform/end.js"></script>
 <script type="text/javascript" src="../../js/common/sha256.js"></script>

app/view/en/index.html

@@ -32,15 +32,13 @@
 <script type="text/javascript" src="../../js/common/modal.js"></script>
 <script type="text/javascript" src="../../js/ui/jquery-ui.min.js"></script>
 <script>
-var ver="Miria (17.2.0)";
+var ver="Usamin (18.2.1)";
 //betaを入れるとバージョンチェックしない
 //GitHubに上げるときはindex.htmlをちゃんとする。(index.start.html)
 //var ver="beta";
 //WinstoreではバージョンCK・言語・Misskeyトークンの機能が排除
-var winstore=false;
 var acct_id=0;
 var tlid=0;
-  verck(ver,winstore);
  </script>
 <textarea id="copy" style="top:-100px; position:fixed;"></textarea>
 <div id="tl">
@@ -54,7 +52,7 @@ var tlid=0;
 </div>
 </div>
 <div id="post-box" class="z-depth-5">
-<div id="post-bar">Post new</div>
+<div id="post-bar" class="drag-bar"><span id="unreact">Post new</span><span id="addreact" class="hide">Reaction</span></div>
 <!--トゥートボックス-->
 <div id="left-side">
 <div class="row" style="margin-bottom:0;">
@@ -125,7 +123,6 @@ var tlid=0;
 <span class="sml gray pointer anti-markdown mize">
 <a onclick="mdToggle()">Markdownエディタを表示</a>
 </span>
-<span id="suggest"></span>
 </div>
 <div class="col s12 mize" style="margin-top: 0; display:flex; justify-content: space-between">
 		<i class="waves-effect gray material-icons" id="nsfw" title="Mark media as sensitive" onclick="nsfw()">visibility_off</i>
@@ -138,7 +135,7 @@ var tlid=0;
 </div>
 <div class="col s12 mize" style="margin-bottom:5px; padding:0;">
 	<div id="taglist"></div>
-<span id="preview" class="mize"></span>
+<div id="preview" class="mize"></div>
 <span class=" sml mize"><span data-trans="reply">Reply</span>:
 <span id="rec">No</span>/<span data-trans="file">Attaching files</span>:
 <span id="mec">None</span>/<span data-trans="vis">Adjust status privacy</span>:
@@ -202,11 +199,11 @@ var tlid=0;
 </div>
 </div>
 <div id="right-side">
+<div id="suggest"></div>
 <!--絵文字ピッカー-->
 <div id="emoji" class="hide">
 		<span class="gray sml">
 			<a onclick="emojiGet('true')" class="pointer">Refresh emojis list</a>
-			<i class="material-icons waves-effect" onclick="emojiToggle()" title="Close this box" data-trans-title="post_box_close">cancel</i>
 		<br>
 		</span>
 		<div id="emoji-list" class="" style="">
@@ -260,12 +257,8 @@ var tlid=0;
 	<div id="poll" class="hide">
 		<select id="poll-sel"  onchange="pollProviderCk()">
 			<option value="nothing">Polls: Disabled</option>
-			<option value="votedon">votedon.</option>
 			<option value="mastodon-poll">Mastodon(2.8~)</option>
 		</select>
-		<div id="votedon" class="poll-provider hide">
-	WIP
-		</div>
 		<div id="mastodon-poll" class="poll-provider hide">
 			<input type="text" class="mastodon-choice" placeholder="Choice1">
 			<input type="text" class="mastodon-choice" placeholder="Choice2">
@@ -275,9 +268,9 @@ var tlid=0;
 			<label for="poll-multiple">Multiple select</label><br>
 			<input type="checkbox" class="filled-in" id="poll-until" value="1" />
 			<label for="poll-until">Hide 'votes' count until people vote it.</label><br>
-			<input type="number" style="width:50px" id="days_poll" placeholder="d" value="0">days
-			<input type="number" style="width:50px" id="hours_poll" placeholder="h" value="0">hours
-			<input type="number" style="width:50px" id="mins_poll" placeholder="m" value="0">minutes
+			<input type="number" style="width:50px" id="days_poll" placeholder="d" value="0">day(s)
+			<input type="number" style="width:50px" id="hours_poll" placeholder="h" value="0">hour(s)
+			<input type="number" style="width:50px" id="mins_poll" placeholder="m" value="0">minute(s)
 		</div>
 	</div>
 </div>
@@ -308,14 +301,14 @@ var tlid=0;
 		<div class="collapsible-body toot-reset" id="toot-after">
 		</div>
 	</li>
-	<li>
+	<li class="dm-hide">
 		<div class="collapsible-header">
 		<i class="material-icons">people_outline</i>Local TL before this toot
 		</div>
 		<div class="collapsible-body toot-reset" id="toot-before">
 		</div>
 	</li>
-	<li>
+	<li class="dm-hide">
 		<div class="collapsible-header">
 		<i class="material-icons">person_outline</i>User TL before this toot
 		</div>
@@ -329,7 +322,7 @@ var tlid=0;
 		<div class="collapsible-body toot-reset" id="toot-fav">
 		</div>
 	</li>
-	<li>
+	<li class="dm-hide">
 		<div class="collapsible-header">
 		<i class="text-darken-3 fa fa-retweet"></i>People who boosted it
 		</div>
@@ -337,6 +330,7 @@ var tlid=0;
 		</div>
 	</li>
 	</ul>
+	<div class="dm-hide">
 	Use other account(<i class="fa fa-retweet"></i>/<i class="fa fa-star"></i>:unfav and unBT are disabled.)<br>
 	<div class="row">
 		<div class="col s6">
@@ -357,11 +351,11 @@ var tlid=0;
 	<div id="toot-after">
 	</div>
 	</div>
+</div>
 	<div class="modal-footer">
-	<a href="#!" class="waves-effect waves-green btn-flat" onclick="brws()">Open in browser</a>
-	<a href="#!" class="waves-effect waves-green btn-flat" onclick="shot()">Take a screenshot</a>
-	<a href="#!" class="waves-effect waves-green btn-flat" onclick="cbCopy()">Copy URL of this toot</a>
-	<a href="#!" class="waves-effect waves-green btn-flat" onclick="cbCopy('emb')">Embed</a>
+	<a href="#!" class="waves-effect waves-green btn-flat dm-hide" onclick="brws()">Open in browser</a>
+	<a href="#!" class="waves-effect waves-green btn-flat dm-hide" onclick="cbCopy()">Copy URL of this toot</a>
+	<a href="#!" class="waves-effect waves-green btn-flat dm-hide" onclick="cbCopy('emb')">Embed</a>
 	<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
 	</div>
 	</div>
@@ -371,7 +365,7 @@ var tlid=0;
 			<div id="his-data-show">
 			<div class="his-float" id="his-float-data">
 			<div id="his-basic-prof">
-			<img src="../../img/loading.svg" id="his-prof">
+			<img src="../../img/loading.svg" id="his-prof" draggable="false">
 			<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
 			<br>@
 			<span id="his-acct"></span><br>
@@ -524,6 +518,9 @@ var tlid=0;
 			</div>
 			</div>
 			</div>
+			<div class="his-float" id="his-float-blocked">
+				<div>You are blocked. Why?</div>
+			</div>
 			</div>
 			</div>
 			<div class="modal-footer">
@@ -582,18 +579,28 @@ var tlid=0;
 		<a href="https://thedesk.top" target="_blank">HP</a><br>
 		<a href="https://github.com/cutls/TheDesk" target="_blank">GitHub</a><br>
 		<br>
-			<div id="release-Miria_17-2-0" class="release-do" style="display:none; ">
+			<div id="release-Usamin_18-2-1" class="release-do" style="display:none; ">
 					<a href="https://code.cutls.com/thedesk-log/" target="_blank">開発の経緯</a><br>
 					<a href="https://ja.mstdn.wiki/TheDesk" target="_blank">機能一覧</a><br>
 					Entyでは支援者様限定で様々なTheDeskに関する記事をご覧いただけます。<br>
 					困ったときは、<a href="https://docs.thedesk.top">TheDesk Docs</a>をご覧ください。
-					<h5>Release Note Miria (17.2.0)</h5>
-					カスタムテーマを実装。Misskeyのテーマとの一定の互換性あり。<a href="https://assets.msky.cafe/" target="_blank">MiAS</a>から80を超えるテーマを入手。
-					<a href="https://thedesk.top/mias.html">注意点</a><br>
-					Misskeyのログイン方法変更につき、いちいちDevCenterに行かなくてもよくなりました。<br>
-					日本語でベタ書きしていたダイアログを一部多言語対応に変更。<br>
-					
-					<img class="emoji" draggable="false" alt="⚠" src="https://twemoji.maxcdn.com/2/72x72/26a0.png">TheDeskのMisskeyについての機能追加は終了しています。<br>
+					<h5>Release Note Usamin (18.2.0)</h5>
+					・<b>緊急の脆弱性修正</b>
+					<h5>Release Note Usamin (18.2.0)</h5>
+・tootsearchをひとつのカラムにしてエゴサが捗る<br>
+・イントロダクション(初回起動時)の挙動修正<br>
+・リンクプレビューを最大1行ずつに省略(タイトルと本文)<br>
+・ブロックされたときのプロフィールの動作(Mastodon 2.8~)<br>
+・(Misskey)MFM追加flipやjumpなど<br>
+・(Misskey)リストに対応<br>
+・(Misskey)カスタム絵文字に対応。カスタム絵文字によるリアクションに対応(対応インスタンスに限る)。<br>
+・<b>カスタム絵文字をゼロ幅スペースによる挿入に変更する機能</b><br>
+・一部機能の統廃合とバグの修正<br>
+・best-friends.chatやキュアスタ！、misskey.devをサポートインスタンスに追加
+			</div>
+			<div id="release-en">
+				<h5>Let's make it native!</h5>
+				<a href="https://translate.thedesk.top">Crowdin translation project</a>
 			</div>
 			<br><br>
 			<h3>Support TheDesk!</h3>
@@ -601,9 +608,9 @@ var tlid=0;
 			<a class="btn-share btn waves-effect waves-light purple lighten-2" href="https://enty.jp/Cutls" target="_blank">
   				Support on Enty
 			</a>
-			<a class="btn-share btn waves-effect waves-light red lighten-2" href="https://osushi.love/Cutls_P" target="_blank">
-  				Osushi.love: give me sushi
-			</a>
+			<a class="btn-share btn waves-effect waves-light red lighten-2" href="https://www.pixiv.net/fanbox/creator/28105985" target="_blank">
+				Support on Pixiv FANBOX
+		</a>
 			<a class="btn-share btn waves-effect waves-light blue" href="https://www.amazon.co.jp/registry/wishlist/2TV35ZHHJPDSB" target="_blank">
 				Amazon Wish List
 			</a>
@@ -623,130 +630,162 @@ var tlid=0;
 		<i class="material-icons pointer" onclick="endPip()">close</i>
 		<div id="pip-content">
 		</div>
-    </div>
-<!--カラム追加-->
-<div id="add-box" class="hide z-depth-4 notf-box">
-<div class="input-field"><span data-trans="your_acct">Select an account</span>
-<br>
-<select id="add-acct-sel" class="acct-sel" style="color:black" onchange="addselCk()"></select>
-<label></label>
-</div>
-<div class="input-field">
-<div id="auth">
-<select id="type-sel" style="color:black">
-	<option value="local" data-trans="local">Local</option>
-	<option value="local-media" data-trans="local-media">Local(Media)</option>
-	<option value="home" data-trans="home">Home</option>
-	<option value="pub" data-trans="public">Federated</option>
-	<option value="pub-media" data-trans="public-media">Federated(Media)</option>
-	<option value="dm" data-trans="dm">Direct Message</option>
-	<option value="mix" data-trans="integrated">Integrated(Local and Home)</option>
-	<option value="plus" data-trans="plus">Integrated(Local and replies and BT on Home)</option>
-	<option value="notf" data-trans="notification">Notifications</option>
-</select>
-<label data-trans="show_tl">Show this TL:</label>
-</div>
-<div id="noauth" class="hide">Show this TL:
-	<input id="noauth-url" type="text" class="validate" style="width:calc( 70% - 40px);" placeholder="e.g:mstdn.jp">
-</div>
-<div id="webview-add" class="hide">TweetDeck with customed TJDeck(<a href='https://gist.github.com/cutls/8787a55d2c1c53274e68a427966046a6' target='_blank'>Code</a>/<a href='https://gist.github.com/totoraj930/d1394dadb51d75666a76829f61e7280c' target='_blank'>TJDeck</a>). Keyboard shortcuts will irritate you. When you feel so, you check 'Prefer WebView' on top of the column.
-</div>
-</div>
-<button class="btn waves-effect blue " style="width:calc( 100% - 10px);" onclick="addColumn()" data-trans-i="add">
-	<i class="material-icons left">add</i>Add
-</button>
-<br>
-<br>
-</div>
-<!--検索-->
-<div id="src-box" class="hide notf-box z-depth-4" style="width:500px">
-		<div class="input-field">
-		<select id="src-acct-sel" class="acct-sel" onchange="trend()"></select>
-</div><div class="input-field">
-<i class="material-icons prefix">search</i>
-<input id="src" type="text" class="validate" style="width:calc( 60% - 40px);">
-<label for="src" data-trans="src">Search</label>
-<button class="btn waves-effect indigo" style="width:calc( 40% - 40px);" onclick="src()" data-trans-i="src">
-	<i class="material-icons left">search</i>Search
-</button>
-<br>
-<br>
-</div>
-<div id="search">
-<div id="src-contents">
-</div>
-</div>
-</div>
-<!--並べ替え-->
-<div id="sort-box" class="hide">
-<ul id="sort"></ul>
-<div>
-<button onclick="sort()" class="btn waves-effect nex" style="width:100%; max-width:300px;" data-trans-i="sort">
-	<i class="material-icons left">sort</i>Sort
-</button>
-<button onclick="sortToggle()" class="btn waves-effect nex" style="width:100%; max-width:300px;" data-trans-i="close">
-		<i class="material-icons left">close</i>Close
-</button>
-</div>
-</div>
-<!--リスト-->
-<div id="list-box" class="hide notf-box z-depth-4">
-	<div class="input-field" style="width:calc( 100% - 100px);float:left">
-		<select id="list-acct-sel" class="acct-sel"></select>
-		<label>Select an account</label>
+		</div>
+<!--menu-->
+<div id="menu" class="z-depth-5" style="display:none">
+		<div id="menu-bar" class="drag-bar"></div>
+		<span class="cancel">
+				<i class="material-icons waves-effect" onclick="menu()" title="Close this box(X)">cancel</i>
+			</span>
+		<div id="menu-wrapper">
+		<div id="left-menu">
+			<div class="waves-effect active" onclick="addColumnMenu()" id="addColumnMenu"><i class="material-icons">add</i><span>Add a column</span></div>
+			<div class="waves-effect" onclick="sortMenu()" id="sortMenu"><i class="material-icons">sort</i><span>Sort</span></div>
+			<div class="waves-effect" onclick="searchMenu()" id="searchMenu"><i class="material-icons">search</i><span>Search</span></div>
+			<div class="waves-effect" onclick="listMenu()" id="listMenu"><i class="material-icons">view_headline</i><span>List</span></div>
+			<div class="waves-effect" onclick="filterMenu()" id="filterMenu"><i class="material-icons">filter_list</i><span>Filter</span></div>
+			<div class="waves-effect" onclick="help()"><i class="material-icons">help_outline</i><span>Help</span></div>
+			<div class="waves-effect" onclick="location.href='index.html'"><i class="material-icons">refresh</i><span>Reload TL</span></div>
+		</div>
+		<div id="right-menu">
+				<!--カラム追加-->
+<div id="add-box" class="hide menu-content">
+	<div class="input-field"><span data-trans="your_acct">Account(Scroll to show all)</span>
+	<br>
+	<select id="add-acct-sel" class="acct-sel" style="color:black" onchange="addselCk()"></select>
+	<label></label>
 	</div>
-	<div style="float:left; padding-top:8px; padding-bottom:28px;">
-		<button class="btn waves-effect indigo" style="width:80px;" onclick="list()" data-trans-i="lists">
-			List
-		</button>
+	<div class="input-field">
+	<div id="auth">
+	<input type="hidden" value="local" id="type-sel">
+	Show this TL:
+	<div id="tltype">
+		<div class="type waves-effect active" data-type="local"><div><i class="material-icons">people_outline</i></div><span>Local</span></div>
+		<div class="type waves-effect" data-type="local-media"><div><i class="material-icons">people_outline</i><i class="material-icons sub-icon">perm_media</i></div><span>Local(Media)</span></div>
+		<div class="type waves-effect" data-type="home"><div><i class="material-icons">home</i></div><span>Home</span></div>
+		<div class="type waves-effect" data-type="pub"><div><i class="material-icons">language</i></div><span>Federated</span></div>
+		<div class="type waves-effect" data-type="pub-media"><div><i class="material-icons">language</i><i class="material-icons sub-icon">perm_media</i></div><span>Federated(Media)</span></div>
+		<div class="type waves-effect" data-type="dm"><div><i class="material-icons">mail_outline</i></div><span>Direct Message</span></div>
+		<div class="type waves-effect" data-type="mix"><div><i class="material-icons">merge_type</i></div><span>Integrated(Local/Home)</span></div>
+		<div class="type waves-effect" data-type="plus"><div><i class="material-icons">merge_type</i><i class="material-icons sub-icon">reply</i></div><span>LTL+Reply+BT</span></div>
+		<div class="type waves-effect" data-type="notf"><div><i class="material-icons">notifications</i></div><span>Notifications</span></div>
+	</div>
+	</div>
+	<div id="noauth" class="hide">Show this TL:
+		<input id="noauth-url" type="text" class="validate" style="width:calc( 70% - 40px);" placeholder="e.g:mstdn.jp">
+	</div>
+	<div id="webview-add" class="hide">TweetDeck with customed TJDeck(<a href='https://gist.github.com/cutls/8787a55d2c1c53274e68a427966046a6' target='_blank'>Code</a>/<a href='https://gist.github.com/totoraj930/d1394dadb51d75666a76829f61e7280c' target='_blank'>TJDeck</a>). Keyboard shortcuts will irritate you. When you feel so, you check 'Prefer WebView' on top of the column.
+	</div>
+	</div>
+	<button class="btn waves-effect blue " style="width:calc( 100% - 10px);" onclick="addColumn()" data-trans-i="add">
+		<i class="material-icons left">add</i>Add
+	</button>
+	<br>
+	<br>
+	</div>
+	<!--検索-->
+	<div id="src-box" class="hide menu-content">
+			<div class="input-field">
+			<select id="src-acct-sel" class="acct-sel" onchange="trend()"></select>
+	</div><div class="input-field">
+	<input id="src" type="text" class="validate" style="width:60%">
+	<label for="src" data-trans="src">Search</label>
+	<button class="btn waves-effect indigo" style="width: 36%;padding: 0;padding-left: 15px;" onclick="src()" data-trans-i="src">
+		<i class="material-icons left" style="margin:0">search</i>Search
+	</button>
+	<br>
+	<br>
+	</div>
+	<div id="search">
+	<div id="src-contents">
+	</div>
+	</div>
+	</div>
+	<!--並べ替え-->
+	<div id="sort-box" class="hide menu-content">
+	<ul id="sort"></ul>
+	<div>
+	<button onclick="sort()" class="btn waves-effect nex" style="width:97.5%;" data-trans-i="sort">
+		<i class="material-icons left">sort</i>Sort
+	</button>
+	</div>
+	</div>
+	<!--リスト-->
+	<div id="list-box" class="hide menu-content">
+		<div class="input-field" style="width:calc( 100% - 100px);float:left">
+			<select id="list-acct-sel" class="acct-sel"></select>
+			<label>Account(Scroll to show all)</label>
+		</div>
+		<div style="float:left; padding-top:8px; padding-bottom:28px;">
+			<button class="btn waves-effect indigo" style="width:80px;" onclick="list()" data-trans-i="lists">
+				List
+			</button>
+		</div>
+		<br><br>
+		<div id="lists"></div>
+		<div id="lists-user"></div>
+		<input type="text" style="width:150px" id="list-add" placeholder="Display name">
+			<button class="btn waves-effect" style="width:120px;" onclick="makeNewList()">Save</button>
+	</div>
+	<!--フィルター-->
+	<div id="filter-box" class="hide menu-content">
+		<div class="input-field" style="width:calc( 100% - 100px);float:left">
+			<select id="filter-acct-sel" class="acct-sel"></select>
+			<label>Account(Scroll to show all)</label>
+		</div>
+		<div style="float:left; padding-top:8px; padding-bottom:28px;">
+			<button class="btn waves-effect indigo" style="width:80px;" onclick="filter()" data-trans-i="filters">
+				List
+			</button>
+		</div>
+		<div id="filtered-words"></div>
+		<input type="hidden" id="filter-edit-id">
+		<input type="text" style="width:150px" id="filter-add-word" placeholder="Filtering words"><br>
+		Filter contexts<br>
+		<input type="checkbox" class="filled-in" id="home_filter" value="home" />
+			<label for="home_filter">Home</label>
+		<input type="checkbox" class="filled-in" id="local_filter" value="public" />
+			<label for="local_filter">Local</label>
+		<input type="checkbox" class="filled-in" id="notf_filter" value="notifications" />
+			<label for="notf_filter">Notifications</label>
+		<input type="checkbox" class="filled-in" id="conv_filter" value="thread" />
+			<label for="conv_filter">Conversations</label><br>
+			Options<br>
+		<input type="checkbox" class="filled-in" id="wholeword_filter" value="1" />
+			<label for="wholeword_filter">Whole word</label><br>
+		<span class="sml">Nice for Latin language</span><br>
+		<input type="checkbox" class="filled-in" id="except_filter" value="1" />
+			<label for="except_filter">Drop instead of hide</label><br>
+		<span class="sml">Filtered toots will disappear irreversibly, even if filter is later removed</span><br>
+		Expire after<span class="sml">Unset or "0" means "Never"<b>This value may contain some error</b></span><br><br>
+		<input type="number" style="width:50px" id="days_filter" placeholder="d" value="0">day(s)
+		<input type="number" style="width:50px" id="hours_filter" placeholder="h" value="0">hour(s)
+		<input type="number" style="width:50px" id="mins_filter" placeholder="m" value="0">minute(s)<br>
+		Quick:<a onclick="filterTime(0,0,30)" class="pointer">30minute(s)</a>/
+		<a onclick="filterTime(0,1,0)" class="pointer">1hour(s)</a>/
+		<a onclick="filterTime(0,6,0)" class="pointer">6hour(s)</a>/
+		<a onclick="filterTime(0,12,0)" class="pointer">12hour(s)</a>/
+		<a onclick="filterTime(1,0,0)" class="pointer">1day(s)</a>/
+		<a onclick="filterTime(7,0,0)" class="pointer">7day(s)</a>/
+		<a onclick="filterTime(0,0,0)" class="pointer">Never</a><br>
+		<button class="btn waves-effect" style="width:120px;" onclick="makeNewFilter()" id="add-filter-btn">Add</button><br>
+		<span class="sml">Integrated TL/Plus TL will hide both Home-filtering words and Local-filtering words.</span>
 	</div>
-	<br><br>
-	<div id="lists"></div>
-	<div id="lists-user"></div>
-	<input type="text" style="width:150px" id="list-add" placeholder="Display name">
-		<button class="btn waves-effect" style="width:120px;" onclick="makeNewList()">Save</button>
 </div>
-<!--フィルター-->
-<div id="filter-box" class="hide notf-box z-depth-4">
-	<div class="input-field" style="width:calc( 100% - 100px);float:left">
-		<select id="filter-acct-sel" class="acct-sel"></select>
-		<label>Select an account</label>
-	</div>
-	<div style="float:left; padding-top:8px; padding-bottom:28px;">
-		<button class="btn waves-effect indigo" style="width:80px;" onclick="filter()" data-trans-i="filters">
-			List
-		</button>
-	</div>
-	<div id="filtered-words"></div>
-	<input type="hidden" id="filter-edit-id">
-	<input type="text" style="width:150px" id="filter-add-word" placeholder="Filtering words"><br>
-	Filter contexts<br>
-	<input type="checkbox" class="filled-in" id="home_filter" value="home" />
-	  <label for="home_filter">Home</label>
-	<input type="checkbox" class="filled-in" id="local_filter" value="public" />
-	  <label for="local_filter">Local</label>
-	<input type="checkbox" class="filled-in" id="notf_filter" value="notifications" />
-	  <label for="notf_filter">Notifications</label>
-	<input type="checkbox" class="filled-in" id="conv_filter" value="thread" />
-	  <label for="conv_filter">Conversations</label><br>
-	  Options<br>
-	<input type="checkbox" class="filled-in" id="wholeword_filter" value="1" />
-	  <label for="wholeword_filter">Whole word</label><br>
-	<span class="sml">Nice for Latin language</span><br>
-	<input type="checkbox" class="filled-in" id="except_filter" value="1" />
-	  <label for="except_filter">Drop instead of hide</label><br>
-	<span class="sml">Filtered toots will disappear irreversibly, even if filter is later removed</span><br>
-	Expire after<span class="sml">Unset or "0" means "Never"<b>This value may contain some error</b></span><br><br>
-	<input type="number" style="width:50px" id="days_filter" placeholder="d" value="0">days
-	<input type="number" style="width:50px" id="hours_filter" placeholder="h" value="0">hours
-	<input type="number" style="width:50px" id="mins_filter" placeholder="m" value="0">minutes
-	<button class="btn waves-effect" style="width:120px;" onclick="makeNewFilter()" id="add-filter-btn">Add</button><br>
-	<span class="sml">Integrated TL/Plus TL will hide both Home-filtering words and Local-filtering words.</span>
+		</div>
+		<a onclick="about()" class="nex waves-effect">
+				<i class="material-icons" style="font-size: 1rem;">info</i>About TheDesk
+		</a>&nbsp;|&nbsp;
+		<a onclick="bottomReverse()" class="nex waves-effect">
+				<i class="material-icons" style="font-size: 1rem;">swap_horiz</i>Toot button layout reverse
+		</a>
 </div>
 <div id="main">
 <!--TLのTL-->
 <div id="timeline-container">
-	<h3>Welcome to TheDesk</h3><br><a href="acct.html">Add an account</a> or click <i class="material-icons">add</i> to add a column.
+	<div id="something-wrong">
+		<div>Internal error: please clear all data(at setting page) <b>All data will be deleted.</b></div>
+	</div>
 </div>
 </div>
 </div>
@@ -757,52 +796,23 @@ var tlid=0;
 								<button id="posttgl" class="btn waves-effect indigo" style="width: 100%;height: 2.5rem;line-height: 0;margin: 0;">
 									<i class="material-icons" style="position: relative; top: 5px; font-size: 1.5rem; text-align: center; margin-right: 10px;">edit</i>Toot
 								</button>
-        </div>
+				</div>
         <div class="leftside reverse" id="group">
-            <div class="btnsgroup"><span class="grouptitle">Columns:</span>
-                <a onclick="addToggle()" class="nex waves-effect" data-trans-i="add" id="add-tgl">
-                    <i class="material-icons nex" title="Add a column" data-trans-title="column_add">add</i>
-                </a>
-                <a onclick="sortToggle()" class="nex waves-effect">
-                    <i class="material-icons nex big-icon" title="Sort" data-trans-title="sort">sort</i>
-                </a>
-            </div>
-            <div class="btnsgroup"><span class="grouptitle">Accounts:</span>
-                <a href="acct.html" class="nex waves-effect">
-                    <i class="material-icons nex big-icon" title="Account Manager(Ctrl+Shift+M)" data-trans-title="manager">account_circle</i>
-                </a>
-                <a onclick="srcToggle()" class="nex waves-effect" id="src-tgl">
-                    <i class="material-icons" title="Search" data-trans-title="src">search</i>
-                </a>
-                <a onclick="listToggle()" class="nex waves-effect" id="list-tgl">
-                    <i class="material-icons" title="List" data-trans-title="list">view_headline</i>
-                </a>
-                <a onclick="filterToggle()" class="nex waves-effect" id="filter-tgl">
-                    <i class="material-icons" title="Filter" data-trans-title="filter">filter_list</i>
-                </a>
-            </div>
-			<div class="btnsgroup"><span class="grouptitle">Preferences:</span>
-				<a onclick="bottomReverse()" class="nex waves-effect">
-                    <i class="material-icons nex" title="Toot box reverse" data-trans-title="reverse">swap_horiz</i>
-                </a>
-                <a href="setting.html" class="nex waves-effect">
-                    <i class="material-icons nex" title="Preferences(Ctrl+Shift+S)" data-trans-title="setting">settings</i>
-                </a>
-                <a href="index.html" class="nex mize waves-effect">
-                    <i class="material-icons nex" title="Super Reload(F5/⌘+R)" data-trans-title="reload">refresh</i>
-                </a>
-                <a onclick="nano()" class="nex waves-effect">
-                    <i class="material-icons" title="The smallest Mastodon,TheDesk Nano" data-trans-title="nano_desp">remove_from_queue</i>
-                </a>
-                <a onclick="window.open('https://astarte.thedesk.top');" class="setting nex waves-effect" target="_blank" id="ranking-btn" style="display:none;">
-                    <i class="material-icons nex" title="アスタルテランキング">timeline</i>
-				</a>
-				<a href="https://docs.thedesk.top" class="setting nex waves-effect" target="_blank">
-                    <i class="material-icons nex" title="Help">help_outline</i>
-				</a>
-            </div>
-        </div>
-    </div>
+						<div class="btnsgroup">
+							<a href="acct.html" class="nex waves-effect">
+                    <i class="material-icons nex big-icon" title="Account Manager(Ctrl+Shift+M)">account_circle</i>
+              </a>
+							<a href="setting.html" class="nex waves-effect">
+									<i class="material-icons nex" title="Preferences(Ctrl+Shift+S)">settings</i>
+							</a>
+							<a onclick="nano()" class="nex waves-effect">
+									<i class="material-icons" title="The smallest Mastodon,TheDesk Nano" data-trans-title="nano_desp">remove_from_queue</i>
+							</a>
+							<a onclick="menu()" class="nex waves-effect" id="list-tgl">
+									<i class="material-icons" title="List">apps</i>
+							</a>
+						</div>
+    </div></div>
     <div>
 		<div id="tips-menu">
 			<div class="btnsgroup" style="height:34px"><span class="grouptitle">Tips:</span>
@@ -858,6 +868,7 @@ var tlid=0;
 <script type="text/javascript" src="../../js/tl/speech.js"></script>
 <script type="text/javascript" src="../../js/ui/post-box.js"></script>
 <script type="text/javascript" src="../../js/ui/layout.js"></script>
+<script type="text/javascript" src="../../js/post/emoji.js"></script>
 <script type="text/javascript" src="../../js/login/instance.js"></script>
 <script type="text/javascript" src="../../js/login/login.js"></script>
 <script type="text/javascript" src="../../js/ui/img.js"></script>
@@ -871,7 +882,6 @@ var tlid=0;
 <script type="text/javascript" src="../../js/post/img.js"></script>
 <script type="text/javascript" src="../../js/post/status.js"></script>
 <script type="text/javascript" src="../../js/post/misskeystatus.js"></script>
-<script type="text/javascript" src="../../js/post/emoji.js"></script>
 <script type="text/javascript" src="../../js/post/suggest.js"></script>
 <script type="text/javascript" src="../../js/post/bb-md.js"></script>
 <script type="text/javascript" src="../../js/userdata/showOnTL.js"></script>
@@ -879,4 +889,5 @@ var tlid=0;
 <script type="text/javascript" src="../../js/userdata/prof-edit.js"></script>
 <script type="text/javascript" src="../../js/emoji/emojipack.js"></script>
 <script type="text/javascript" src="../../js/emoji/default-emoji.js"></script>
-<script type="text/javascript" src="../../js/platform/end.js"></script>
+<script type="text/javascript" src="../../js/platform/end.js"></script>
+<script type="text/javascript" src="../../js/ui/menu.js"></script>

app/view/en/setting.html

@@ -1,5 +1,6 @@
 <!doctype html>
 <html lang="en">
+
 <head>
 	<title>Settings - TheDesk</title>
 	<!--
@@ -17,493 +18,424 @@
 	<link href='../../css/font-awesome.css' rel='stylesheet' type='text/css'>
 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans:300" rel="stylesheet">
 	<meta charset="utf-8">
-	<style>input{max-height:50px!important} .pcr-result{height:1rem !important;}</style>
+	<style>
+		input {
+			max-height: 50px !important
+		}
+
+		.pcr-result {
+			height: 1rem !important;
+		}
+	</style>
 </head>
+
 <body id="mainView" style="overflow-y:scroll">
-<script type="text/javascript" src="../../js/common/jquery.js"></script>
-<script type="text/javascript" src="../../js/platform/first.js"></script>
-<script type="text/javascript" src="../../js/common/materialize.js"></script>
-<script type="text/javascript" src="../../js/lang/lang.en.js"></script>
-<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
+	<script type="text/javascript" src="../../js/common/jquery.js"></script>
+	<script type="text/javascript" src="../../js/platform/first.js"></script>
+	<script type="text/javascript" src="../../js/common/materialize.js"></script>
+	<script type="text/javascript" src="../../js/lang/lang.en.js"></script>
+	<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
+	<script src="../../node_modules/vue/dist/vue.min.js"></script>
+	<script type="text/javascript" src="setting.vue.js"></script>
 
-<h4>Preferences</h4>
-<ul class="collapsible" data-collapsible="accordion">
-	<li>
-	<div class="collapsible-header">
-			<i class="material-icons">desktop_windows</i>System Preferences
-	</div>
-	<div class="collapsible-body">
-		<h5>Languages</h5>
-		To translate with Crowdin, you have to login Crowdin and restart TheDesk when login is finished.<br>
-		<a href="../ja/setting.html" onclick="changelang('ja')">日本語(Japanese)</a>/<a href="../en/setting.html" onclick="changelang('en')">English</a>/<a href="../ps/setting.html" onclick="changelang('ps')">Crowdin web translate</a>/
-		<h5>Import and export of preferences</h5>
-		<button onclick="exportSettings()" class="btn waves-effect lime darken-3" style="width:100%; max-width:200px;">Export</button>
-		<button onclick="importSettings()" class="btn waves-effect cyan darken-3" style="width:100%; max-width:200px;">Import</button>
-		<br>
-		<h5>Popup notification(on Windows)</h5>Hide to set "0"
-		<br>
-		<input type="text" style="width:50px" id="popup">sec
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">Save</button>
-		<br>
-		<h5>Native notification</h5>
-		This does not work on Windows Portable ver.<br><a onclick="notftest()" class="pointer">Notification test</a>
-		<br>
-		<input class="with-gap" onchange="settings()" name="notf" type="radio" id="ntf_yes" value="yes" />
-		<label for="ntf_yes">Yes</label>
-		<input class="with-gap" onchange="settings()" name="notf" type="radio" id="ntf_no" value="no" />
-		<label for="ntf_no">No</label>
-		<br>
-		<h5>Minimum width of columns</h5>Scroll bar will be shown when your window size is more than ammounts of columns.
-		<br>
-		<input type="text" style="width:50px" id="width">pxabove
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">Save</button>
-		<br>
-		<h5>Minimum width of TweetDeck browser</h5>
-		<input type="text" style="width:50px" id="fixwidth">pxabove
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">Save</button>
-		<br>
-		<h5>Font</h5>
-		Select your favorite font to 'Select'<br>
-		<button class="btn waves-effect" style="width:100px;" onclick="font()">Select</button><br>
-		<div id="fonts" class="hide" style="overflow-y:scroll; width:300px; height:500px;"></div>
-		<br>
-		<input type="text" style="width:150px" id="font">
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">Save</button>
-		<br>
-		<h5>Font size</h5>
-		<span style="font-size:15px">15px(absolute value)</span>
-		<br>
-		<input type="text" style="width:50px" id="size">px 
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">Save</button><br>
-		<h5>Folder to save</h5>
-		TheDesk uses this value when it try to save pictures or take screenshots.<br>
-		<button class="btn waves-effect" style="width:100px;" onclick="savefolder()">Change</button>
-		<br>
-	</div>
-	</li>
-	<li>
-	<div class="collapsible-header">
-			<i class="material-icons">color_lens</i>Themes
-	</div>
-	<div class="collapsible-body">
-		<h4>Select theme</h4>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="black" value="black" />
-		<label for="black">Black</label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="white" value="white" />
-		<label for="white">White</label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo" value="indigo" />
-		<label for="indigo">Indigo<span class="imas hide">(エンドレスナイト)</span></label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="brown" value="brown" />
-		<label for="brown">Brown<span class="imas hide">(ビタースイート・タイム)</span></label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="green" value="green" />
-		<label for="green">Green<span class="imas hide">(ユースフルロマンス)</span></label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom" value="custom" />
-		<label for="custom">Custom</label>
-		<div style="width:300px" id="sel-selector">
-			<select id="custom-sel-sel" class="custom-sel" onchange="customSel()"></select>
-		</div>
-		<h4>Edit and add custom themes</h4>
-		<div style="width:300px" id="edit-selector" data-add="Add new">
-			<select id="custom-edit-sel" class="custom-sel" onchange="custom()">
-				<option value="add_new">Add new</option>
-			</select>
-		</div>
-		<h5>Name</h5>
-		<input type="text" style="width:300px" id="custom_name" placeholder="Name...">
-		<h5>About this theme</h5>
-		<div class="input-field"><textarea style="width:300px" id="custom_desc" class="materialize-textarea" placeholder="About this theme..."></textarea></div>
-		<h5>Color scheme</h5>
-		<input class="with-gap" name="derection" type="radio" id="dark" value="dark" checked="true" />
-		<label for="dark">Dark</label>
-		<input class="with-gap" name="derection" type="radio" id="light" value="light" />
-		<label for="light">Light</label>
-		<div id="pickers">
-		<div>
-			<h5>Primary</h5>Background of components
-			<div id="color-picker0-wrap"><div class="color-picker" id="color-picker0"></div></div>
-			<input type="hidden" id="color-picker0_value">
-		</div>
-		<div>
-			<h5>Secondary</h5>Background color
-			<div id="color-picker1-wrap"><div class="color-picker" id="color-picker1"></div></div>
-			<input type="hidden" id="color-picker1_value">
-		</div>
-		<div>
-			<h5>Texts</h5>Text color
-			<div id="color-picker2-wrap"><div class="color-picker" id="color-picker2"></div></div>
-			<input type="hidden" id="color-picker2_value">
-		</div>
-		<div>
-			<h5>Accent</h5>Background of boosts
-			<div id="color-picker3-wrap"><div class="color-picker" id="color-picker3"></div></div>
-			<input type="hidden" id="color-picker3_value">
-		</div>
-		</div>
-		<button class="btn-large waves-effect" onclick="customComp()">Change</button>&nbsp;<button class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">Delete</button><br><br>
-		<input type="text" style="width:300px" id="custom_json" class="materialize-textarea" placeholder="JSON style" readonly><br>
-		Share this code with other TheDesk. Do not share this code with MiAS.
-		<h4>Import of custom themes</h4>
-		Get more themes on <a href="https://assets.msky.cafe/" target="_blank">MiAS</a><br>
-		<input type="text" style="width:300px" id="custom_import" class="materialize-textarea" placeholder="JSON/JSON5 style">
-		<button class="btn waves-effect" onclick="customImp()">Import</button><br>
-	</li>
-	<li>
-	<div class="collapsible-header">
-			<i class="material-icons">reorder</i>Timeline Preferences
-	</div>
-	<div class="collapsible-body">
-		<h5>Time format</h5>Relative format:"1 minutes ago","3 days ago"
-		<br>Absolute format:"23:25:21","2017/12/30 23:59:00"
-		<br>Mixed format:toots posted today are relative-format, others are absolute-format.
-		<br>
-		<input class="with-gap" onchange="settings()" onchange="settings()" name="time" type="radio" id="relative" value="relative" />
-		<label for="relative">Relative</label>
-		<input class="with-gap" onchange="settings()" name="time" type="radio" id="absolute" value="absolute" />
-		<label for="absolute">Absolute</label>
-		<input class="with-gap" onchange="settings()" name="time" type="radio" id="double" value="double" />
-		<label for="double">Both relative and absolute</label>
-		<input class="with-gap" onchange="settings()" name="time" type="radio" id="medium" value="medium" />
-		<label for="medium">Mixed</label>
-		<h5>Server's unique locale</h5>This value is available on some Japanese servers
-		<br>
-		<input class="with-gap" onchange="settings()" name="ul" type="radio" id="ul_yes" value="yes" />
-		<label for="ul_yes">Yes</label>
-		<input class="with-gap" onchange="settings()" name="ul" type="radio" id="ul_no" value="no" />
-		<label for="ul_no">No</label>
-		<br>
-		<h5>Hide NSFW pictures</h5>Strong blur effect
-		<br>
-		<input class="with-gap" onchange="settings()" name="nsfw" type="radio" id="n_yes" value="yes" />
-		<label for="n_yes">Yes</label>
-		<input class="with-gap" onchange="settings()" name="nsfw" type="radio" id="n_no" value="no" />
-		<label for="n_no">No</label>
-		<br>
-		<h5>Hide CW contents</h5>
-		<input class="with-gap" onchange="settings()" name="cw" type="radio" id="c_yes" value="yes" />
-		<label for="c_yes">Yes</label>
-		<input class="with-gap" onchange="settings()" name="cw" type="radio" id="c_no" value="no" />
-		<label for="c_no">No</label>
-		<br>
-		<h5>Reply counter style</h5>
-		<input class="with-gap" onchange="settings()" name="rp" type="radio" id="rp_hidden" value="hidden" />
-		<label for="rp_hidden">Show 1+ if the replies are more than 1.</label>
-		<input class="with-gap" onchange="settings()" name="rp" type="radio" id="rp_all" value="all" />
-		<label for="rp_all">Show full count(1,2...)</label>
-		<br>
-		<h5>Animated GIF images animation</h5>
-		<input class="with-gap" onchange="settings()" name="gif" type="radio" id="g_yes" value="yes" />
-		<label for="g_yes">Yes</label>
-		<input class="with-gap" onchange="settings()" name="gif" type="radio" id="g_no" value="no" />
-		<label for="g_no">No</label>
-		<br>
-		<h5>Tag TL Search</h5>
-		<input class="with-gap" onchange="settings()" name="tag" type="radio" id="t_all" value="all" />
-		<label for="t_all">Use federated network</label>
-		<input class="with-gap" onchange="settings()" name="tag" type="radio" id="t_local" value="local" />
-		<label for="t_local">Use local network</label>
-		<br>
-		<h5>Show via</h5>
-		<input class="with-gap" onchange="settings()" name="via" type="radio" id="via_yes" value="yes" />
-		<label for="via_yes">Yes</label>
-		<input class="with-gap" onchange="settings()" name="via" type="radio" id="via_hide" value="hide" />
-		<label for="via_hide">No</label>
-		<br>
-		<h5>Hide action buttons without mouseover</h5>
-		You may feel 'mouseover' is unconfortable:(<br>
-		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_yes" value="yes" />
-		<label for="mov_yes">Mouseover to show</label>
-		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_click" value="click" />
-		<label for="mov_click">Click to show</label>
-		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_no" value="no" />
-		<label for="mov_no">No</label>
-		<br>
-		<h5>Show Notification marker, red colored bell and counter(if you show a notification column.)</h5>
-		<input class="with-gap" onchange="settings()" name="notfm" type="radio" id="notfm_yes" value="yes" />
-		<label for="notfm_yes">Yes</label>
-		<input class="with-gap" onchange="settings()" name="notfm" type="radio" id="notfm_no" value="no" />
-		<label for="notfm_no">No</label>
-		<br>
-		<h5>Auto folding</h5>
-		TheDesk does not collapse totes of 5 characters or less. Also, when collapsing, newlines are not shown. TheDesk count only newlines as the number of lines.
-		<br>
-		<input type="text" style="width:50px" id="sentence">lines above or
-		<input type="text" style="width:50px" id="letters">letters above
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">Save</button>
-		<br>
-		<h5>Height of images
-        </h5>
-		<input type="text" style="width:50px" id="img-height">px
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">Save</button>
-		<br>
-		<h5>Enable #InstanceTicker</h5>
-		Show colorful stickers about tooters' server. <a href="https://cdn.weep.me/mastodon/">About #InstanceTicker</a> Copyright 2018 weepjp, kyori19.<br>
-		<input class="with-gap" onchange="settings()" name="ticker" type="radio" id="ticker_yes" value="yes" />
-		<label for="ticker_yes">Yes</label>
-		<input class="with-gap" onchange="settings()" name="ticker" type="radio" id="ticker_no" value="no" />
-		<label for="ticker_no">No</label>
-		<br>
-		<h5>Animation of timelines</h5>
-		<input class="with-gap" onchange="settings()" name="anime" type="radio" id="anime_yes" value="yes" />
-		<label for="anime_yes">Yes</label>
-		<input class="with-gap" onchange="settings()" name="anime" type="radio" id="anime_no" value="no" />
-		<label for="anime_no">No</label>
-	</div>
-	</li>
-	<li>
-	<div class="collapsible-header">
-			<i class="material-icons">send</i>Posting Preferences
-	</div>
-	<div class="collapsible-body">
-		<h5>Default warining text</h5>
-		<input type="text" style="width:150px" id="cw-text">
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">Save</button>
-		<br>
-		<h5>Alert before posting a long toot.</h5>
-		Show dialog whether you make too-long text hidden.
-		<br>
-		<input type="text" style="width:50px" id="cw_sentence">lines above or
-		<input type="text" style="width:50px" id="cw_letters">letters above
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">Save</button>
-		<br>
-		<h5>Always CW set</h5>
-		<input class="with-gap" onchange="settings()" name="cws" type="radio" id="cws_yes" value="yes" />
-		<label for="cws_yes">Yes</label>
-		<input class="with-gap" onchange="settings()" name="cws" type="radio" id="cws_no" value="no" />
-		<label for="cws_no">No
-		</label>
-		<br>
-		<h5>Default visibility</h5>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="public" value="public" />
-		<label for="public">Public</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="unlisted" value="unlisted" />
-		<label for="unlisted">Unlisted</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="private" value="private" />
-		<label for="private">Private</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="direct" value="direct" />
-		<label for="direct">Direct</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="memory" value="memory" />
-		<label for="memory">Memory(memorized as each server)</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="server" value="server" />
-		<label for="server">Default of your visibility(Set on preferences of Mastodon server)</label>
-		<br>
-		<h5>Posting images preferences</h5>
-		<input class="with-gap" onchange="settings()" name="img" type="radio" id="i_url" value="url" />
-		<label for="i_url">Insert media URL</label>
-		<input class="with-gap" onchange="settings()" name="img" type="radio" id="i_no-act" value="no-act" />
-		<label for="i_no-act">Insert nothig</label>
-		<br>
-		<input class="with-gap" onchange="settings()" name="img" type="radio" id="i_inline" value="inline" disabled />
-		<label for="i_inline">Disabled 
-			<!--画像を投稿し、インラインで表示(Markdownに対応したインスタンスのみ。マルチアカウント環境では非推奨。)-->
-		</label>
-		<br>
-		<h5>Action of posting-box</h5>
-		<input class="with-gap" onchange="settings()" name="box" type="radio" id="bx_yes" value="yes" />
-		<label for="bx_yes">Folding</label>
-		<input class="with-gap" onchange="settings()" name="box" type="radio" id="bx_no" value="no" />
-		<label for="bx_no">Open after posting
-		</label>
-		<input class="with-gap" onchange="settings()" name="box" type="radio" id="bx_abs" value="absolute" />
-		<label for="bx_abs">Absolutely open</label>
-		<br>
-		<h5>Quote format</h5>
-		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_simple" value="simple" />
-		<label for="q_simple">Only URL</label>
-		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_mention" value="mention" />
-		<label for="q_mention">URL and acct(mention to the user)</label>
-		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_full" value="full" />
-		<label for="q_full">URL, text and acct(mention to the user)
-		</label>
-		<br>
-		<h5>Default accounts of actions</h5>
-		Main account can be set on Account Manager.<br>
-		<input class="with-gap" onchange="settings()" name="main" type="radio" id="mn_remain" value="remain" />
-		<label for="mn_remain">Account you used recently</label>
-		<input class="with-gap" onchange="settings()" name="main" type="radio" id="mn_main" value="main" />
-		<label for="mn_main">Main account</label>
-		</label>
-		<h5>Secondary Toot Button</h5>
-		Toot with other visibility setting<br>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-nothing" value="nothing" />
-		<label for="sec-nothing">Hidden</label>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-public" value="public" />
-		<label for="sec-public">Public</label>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-unlisted" value="unlisted" />
-		<label for="sec-unlisted">Unlisted</label>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-private" value="private" />
-		<label for="sec-private">Private</label>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-direct" value="direct" />
-		<label for="sec-direct">Direct</label>
-		<input class="with-gap hide kirishima" onchange="settings()" name="sec" type="radio" id="sec-local" value="local" />
-		<label for="sec-local">Local Only</label><span class="hide kirishima">非対応インスタンスでは「未収載」になります。</span>
-		<br>
-	</div>
-	</li>
-	<li>
-		<div class="collapsible-header">
-				<i class="material-icons">keyboard</i>Keyboard shortcut Preferences
-		</div>
-		<div class="collapsible-body">
-			<h5>Easy inserter</h5>
-			You can insert any letters and emojis with only 3 keys<br>
-			Ctrl+Shift+1:<input type="text" style="width:150px" id="oks-1">
-			<button onclick="oks(1)" class="btn waves-effect" style="width:100px;">Save</button><br><br>
-			Ctrl+Shift+2:<input type="text" style="width:150px" id="oks-2">
-			<button onclick="oks(2)" class="btn waves-effect" style="width:100px;">Save</button><br><br>
-			Ctrl+Shift+3:<input type="text" style="width:150px" id="oks-3">
-			<button onclick="oks(3)" class="btn waves-effect" style="width:100px;">Save</button><br><br>
+	<h4>Preferences</h4>
+	<ul class="collapsible" data-collapsible="accordion">
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">desktop_windows</i>System Preferences
+			</div>
+			<div class="collapsible-body">
+				<h5>Languages</h5>
+				To translate with Crowdin, you have to login Crowdin and restart TheDesk when login is finished.<br>
+				<a href="../ja/setting.html" onclick="changelang('ja')">日本語(Japanese)</a>/<a href="../en/setting.html" onclick="changelang('en')">English</a>/<a href="../ps/setting.html" onclick="changelang('ps')">Crowdin web translate</a>/
+				<h5>Import and export of preferences</h5>
+				<button onclick="exportSettings()" class="btn waves-effect lime darken-3"
+					style="width:100%; max-width:200px;">Export</button>
+				<button onclick="importSettings()" class="btn waves-effect cyan darken-3"
+					style="width:100%; max-width:200px;">Import</button>
+				<div id="envView">
+					<template v-for="(item, i) in config">
+						<h5>{{item.text.head}}</h5>
+						<template v-if=item.text.desc>
+							<templete v-html=item.text.desc></templete><br>
+						</template>
+						<template v-if="item.id=='notf'"><a onclick="notftest()"
+								class="pointer">Notification test</a><br></template>
+						<template v-if="item.checkbox">
+							<template v-for="(check, j) in item.text.checkbox">
+								<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
+									type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
+								<label v-bind:for="item.id+check.value">{{check.text}}</label>
+							</template>
+						</template>
+						<template v-else>
+							<template v-if="item.doubleText">
+								<template v-for="(textbox, j) in item.data">
+									<input type="text" v-model="textbox.setValue" type="radio" v-bind:id="textbox.id"
+										v-bind:style="{ width: textbox.width+'px'}" />{{textbox.text.after}}
+								</template>
+							</template>
+							<template v-else>
+								<input type="text" v-model="item.setValue" type="radio" v-bind:id="item.id"
+									v-bind:style="{ width: item.width+'px'}" />{{item.text.after}}
+							</template>
+							<button class="btn waves-effect" style="width:100px;"
+								v-on:click="complete(i)">Change</button>
+						</template><br>
+					</template>
+				</div>
+				<h5>Font</h5>
+				Select your favorite font to 'Select'<br>
+				<button class="btn waves-effect" style="width:100px;" onclick="font()">Select</button><br>
+				<div id="fonts" class="hide" style="overflow-y:scroll; width:300px; height:500px;"></div>
+				<br>
+				<input type="text" style="width:150px" id="font">
+				<button class="btn waves-effect" style="width:100px;" onclick="settings()">Save</button>
+				<br>
+				<h5>Folder to save</h5>
+				TheDesk uses this value when it try to save pictures or take screenshots.<br>
+				<button class="btn waves-effect" style="width:100px;" onclick="savefolder()">Change</button>
+				<br>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">color_lens</i>Themes
+			</div>
+			<div class="collapsible-body">
+				<h4>Select theme</h4>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="black" value="black" />
+				<label for="black">Black</label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="white" value="white" />
+				<label for="white">White</label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo" value="indigo" />
+				<label for="indigo">Indigo<span class="imas hide">(エンドレスナイト)</span></label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="brown" value="brown" />
+				<label for="brown">Brown<span class="imas hide">(ビタースイート・タイム)</span></label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="green" value="green" />
+				<label for="green">Green<span class="imas hide">(ユースフルロマンス)</span></label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom" value="custom" />
+				<label for="custom">Custom</label>
+				<div style="width:300px" id="sel-selector">
+					<select id="custom-sel-sel" class="custom-sel" onchange="customSel()"></select>
+				</div>
+				<h4>Edit and add custom themes</h4>
+				<div style="width:300px" id="edit-selector" data-add="Add new">
+					<select id="custom-edit-sel" class="custom-sel" onchange="custom()">
+						<option value="add_new">Add new</option>
+					</select>
+				</div>
+				<h5>Name</h5>
+				<input type="text" style="width:300px" id="custom_name" placeholder="Name...">
+				<h5>About this theme</h5>
+				<div class="input-field"><textarea style="width:300px" id="custom_desc" class="materialize-textarea"
+						placeholder="About this theme..."></textarea></div>
+				<h5>Color scheme</h5>
+				<input class="with-gap" name="derection" type="radio" id="dark" value="dark" checked="true" />
+				<label for="dark">Dark</label>
+				<input class="with-gap" name="derection" type="radio" id="light" value="light" />
+				<label for="light">Light</label>
+				<div id="pickers">
+					<div>
+						<h5>Primary</h5>Background of components
+						<div id="color-picker0-wrap">
+							<div class="color-picker" id="color-picker0"></div>
+						</div>
+						<input type="hidden" id="color-picker0_value">
+					</div>
+					<div>
+						<h5>Secondary</h5>Background color
+						<div id="color-picker1-wrap">
+							<div class="color-picker" id="color-picker1"></div>
+						</div>
+						<input type="hidden" id="color-picker1_value">
+					</div>
+					<div>
+						<h5>Texts</h5>Text color
+						<div id="color-picker2-wrap">
+							<div class="color-picker" id="color-picker2"></div>
+						</div>
+						<input type="hidden" id="color-picker2_value">
+					</div>
+					<div>
+						<h5>Accent</h5>Background of boosts
+						<div id="color-picker3-wrap">
+							<div class="color-picker" id="color-picker3"></div>
+						</div>
+						<input type="hidden" id="color-picker3_value">
+					</div>
+				</div>
+				<button class="btn-large waves-effect" onclick="customComp()">Change</button>&nbsp;<button
+					class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">Delete</button><br><br>
+				<input type="text" style="width:300px" id="custom_json" class="materialize-textarea"
+					placeholder="JSON style" readonly><br>
+				Share this code with other TheDesk. Do not share this code with MiAS.
+				<h4>Import of custom themes</h4>
+				Get more themes on <a href="https://assets.msky.cafe/" target="_blank">MiAS</a><br>
+				<input type="text" style="width:300px" id="custom_import" class="materialize-textarea"
+					placeholder="JSON/JSON5 style">
+				<button class="btn waves-effect" onclick="customImp()">Import</button><br>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">reorder</i>Timeline Preferences
+			</div>
+			<div class="collapsible-body">
+				<div id="tlView">
+					<template v-for="(item, i) in config">
+						<h5>{{item.text.head}}</h5>
+						<template v-if=item.text.desc>
+							<templete v-html=item.text.desc></templete><br>
+						</template>
+						<template v-if="item.checkbox">
+							<template v-for="(check, j) in item.text.checkbox">
+								<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
+									type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
+								<label v-bind:for="item.id+check.value">{{check.text}}</label>
+							</template>
+						</template>
+						<template v-else>
+							<template v-if="item.doubleText">
+								<template v-for="(textbox, j) in item.data">
+									<input type="text" v-model="textbox.setValue" type="radio" v-bind:id="textbox.id"
+										v-bind:style="{ width: textbox.width+'px'}" />{{textbox.text.after}}
+								</template>
+							</template>
+							<template v-else>
+								<input type="text" v-model="item.setValue" type="radio" v-bind:id="item.id"
+									v-bind:style="{ width: item.width+'px'}" />{{item.text.after}}
+							</template>
+							<button class="btn waves-effect" style="width:100px;"
+								v-on:click="complete(i)">Change</button>
+						</template><br>
+					</template>
+				</div>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">send</i>Posting Preferences
+			</div>
+			<div class="collapsible-body">
+				<div id="postView">
+					<template v-for="(item, i) in config">
+						<h5>{{item.text.head}}</h5>
+						<template v-if=item.text.desc>
+							<templete v-html=item.text.desc></templete><br>
+						</template>
+						<template v-if="item.checkbox">
+							<template v-for="(check, j) in item.text.checkbox">
+								<template v-if="!check.kirishima || (check.kirishima && kirishima)">
+									<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
+										type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
+									<label v-bind:for="item.id+check.value">{{check.text}}</label>
+									<span v-if="check.kirishimaText">{{check.kirishimaText}}</span>
+								</template>
+							</template>
+						</template>
+						<template v-else>
+							<template v-if="item.doubleText">
+								<template v-for="(textbox, j) in item.data">
+									<input type="text" v-model="textbox.setValue" type="radio" v-bind:id="textbox.id"
+										v-bind:style="{ width: textbox.width+'px'}" />{{textbox.text.after}}
+								</template>
+							</template>
+							<template v-else>
+								<input type="text" v-model="item.setValue" type="radio" v-bind:id="item.id"
+									v-bind:style="{ width: item.width+'px'}" />{{item.text.after}}
+							</template>
+							<button class="btn waves-effect" style="width:100px;"
+								v-on:click="complete(i)">Change</button>
+						</template><br>
+					</template>
+				</div>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">Fkeyboard</i>Keyboard shortcut Preferences
+			</div>
+			<div class="collapsible-body">
+				<h5>Easy inserter</h5>
+				You can insert any letters and emojis with only 3 keys<br>
+				Ctrl+Shift+1:<input type="text" style="width:150px" id="oks-1">
+				<button onclick="oks(1)" class="btn waves-effect" style="width:100px;">Save</button><br><br>
+				Ctrl+Shift+2:<input type="text" style="width:150px" id="oks-2">
+				<button onclick="oks(2)" class="btn waves-effect" style="width:100px;">Save</button><br><br>
+				Ctrl+Shift+3:<input type="text" style="width:150px" id="oks-3">
+				<button onclick="oks(3)" class="btn waves-effect" style="width:100px;">Save</button><br><br>
 
-		</div>
-	</li>
-	<li>
-		<div class="collapsible-header">
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
 				<i class="material-icons">bookmark</i>Mute & Emphasis Preferences
-		</div>
-		<div class="collapsible-body">
-			<h5>Client Mute</h5>
-			<div id="mute-cli"></div>
-			<h5>Client Emphasis</h5>
-			Click client name on toots to toggle mute and emphasis.
-			<h5>Words Mute</h5>
-			Enter to set<br>
-			<div class="chips" id="wordmute" style="background-color:gray;"></div>
-			<button onclick="wordmuteSave()" class="btn waves-effect" style="width:100px;">Save</button>
-			<h5>Words Emphasis</h5>
-			Enter to set<br>
-			<div class="chips" id="wordemp" style="background-color:gray;"></div>
-			<button onclick="wordempSave()" class="btn waves-effect" style="width:100px;">Save</button>
-			<h5>Users Emphasis</h5>
-			Set on users data modals.
-			<span class="emphasized">　Use this color to emphasis　</span>
-		</div>
-	</li>
-	<li>
-		<div class="collapsible-header">
-			<i class="fa fa-spotify"></i>Spotify and NowPlaying Preferences
-		</div>
-		<div class="collapsible-body">
-			<h5>NowPlaying Provider(Windows)</h5>
-			macOS and Linux are not supported. AIMP and iTunes were checked by developer. <br>CAD:foobar2000, MusicBee,J. River Media Center, Media Jukebox<br>WLM:Last.fm Client, TTPlayer, OpenPandora, Zune.<br> For foobar2000, <a href="http://poiru.github.com/foo-cad/">foo_cad plugin</a> is required. And MusicBee requires CAD.<br>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="aimp" value="AIMP" />
-			<label for="aimp">AIMP</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="itunes" value="ITUNES" />
-			<label for="itunes">iTunes</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="npmm" value="MEDIAMONKEY" />
-			<label for="npmm">MediaMonkey</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="winamp" value="WINAMP" />
-			<label for="winamp">Winamp</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wmp" value="WMP" />
-			<label for="wmp">WMP</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wlm" value="WLM" />
-			<label for="wlm">WLM</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="cad" value="CAD" />
-			<label for="cad">CAD</label><br><br>
-			Click <i class="material-icons" style="font-size:24px;">music_note</i>icon to NowPlaying<br>
-			<h5>Account Connection</h5>
-			TheDesk save your data on thedesk.top server.<br>
-			<div id="spotify-code-show" class="hide"><input type="text" id="spotify-code"><button onclick="spotifyAuth()" class="btn waves-effect" style="width:100px;">Save</button></div>
-			<a onclick="spotifyConnect()" class="btn waves-effect nex" style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-enable"><i class="fa fa-spotify left"></i>Connect</a>
-			<a onclick="spotifyDisconnect()" class="btn waves-effect nex disabled" style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-disable"><i class="fa fa-spotify left"></i>Disconnect</a>
-			<h5>Edit a template</h5>
-			<br>
-			<textarea id="np-temp" class="materialize-textarea" data-length="500">#NowPlaying {song} / {album} / {artist}
+			</div>
+			<div class="collapsible-body">
+				<h5>Client Mute</h5>
+				<div id="mute-cli"></div>
+				<h5>Client Emphasis</h5>
+				Click client name on toots to toggle mute and emphasis.
+				<h5>Words Mute</h5>
+				Enter to set<br>
+				<div class="chips" id="wordmute" style="background-color:gray;"></div>
+				<button onclick="wordmuteSave()" class="btn waves-effect" style="width:100px;">Save</button>
+				<h5>Words Emphasis</h5>
+				Enter to set<br>
+				<div class="chips" id="wordemp" style="background-color:gray;"></div>
+				<button onclick="wordempSave()" class="btn waves-effect" style="width:100px;">Save</button>
+				<h5>Users Emphasis</h5>
+				Set on users data modals.
+				<span class="emphasized">　Use this color to emphasis　</span>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="fa fa-spotify"></i>Spotify and NowPlaying Preferences
+			</div>
+			<div class="collapsible-body">
+				<h5>NowPlaying Provider(Windows)</h5>
+				macOS and Linux are not supported. AIMP and iTunes were checked by developer. <br>CAD:foobar2000, MusicBee,J. River Media Center, Media Jukebox<br>WLM:Last.fm Client, TTPlayer, OpenPandora, Zune.<br> For foobar2000, <a href="http://poiru.github.com/foo-cad/">foo_cad plugin</a> is required. And MusicBee requires CAD.<br>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="aimp" value="AIMP" />
+				<label for="aimp">AIMP</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="itunes" value="ITUNES" />
+				<label for="itunes">iTunes</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="npmm" value="MEDIAMONKEY" />
+				<label for="npmm">MediaMonkey</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="winamp" value="WINAMP" />
+				<label for="winamp">Winamp</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wmp" value="WMP" />
+				<label for="wmp">WMP</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wlm" value="WLM" />
+				<label for="wlm">WLM</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="cad" value="CAD" />
+				<label for="cad">CAD</label><br><br>
+				Click <i class="material-icons" style="font-size:24px;">music_note</i>icon to NowPlaying<br>
+				<h5>Account Connection</h5>
+				TheDesk save your data on thedesk.top server.<br>
+				<div id="spotify-code-show" class="hide"><input type="text" id="spotify-code"><button
+						onclick="spotifyAuth()" class="btn waves-effect" style="width:100px;">Save</button></div>
+				<a onclick="spotifyConnect()" class="btn waves-effect nex"
+					style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-enable"><i
+						class="fa fa-spotify left"></i>Connect</a>
+				<a onclick="spotifyDisconnect()" class="btn waves-effect nex disabled"
+					style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-disable"><i
+						class="fa fa-spotify left"></i>Disconnect</a>
+				<h5>Edit a template</h5>
+				<br>
+				<textarea id="np-temp" class="materialize-textarea" data-length="500">#NowPlaying {song} / {album} / {artist}
 {url}</textarea><br>
 				Spotify:{song}:Song name/{album}:Album name/{artist}:Artist name/{url}:URL to Spotify<br>
 				macOS:{song}:Song name/{album}:Album name/{artist}:Artist name/composer:{composer}/spampling rate:{hz}/bit rate:{bitRate}/genre:{genre}<br>
 				Windows:{song}:Song name/{album}:Album name/{artist}:Artist name<br>
-				<span class="imas hide">CINDERELLA NowPlaying(imastodon.net限定)では作曲家{composer}/作詞家{lyricist}/BPM{bpm}が有効です。<br>
-                    CINDERELLA NowPlayingはimastodon.netにログインしているとき、トゥート欄に「//」を入力し、その後に曲名を入れることで可能です。</span><br>
-			<button onclick="spotifySave()" class="btn waves-effect" style="width:100px;">Save</button>
-			<h5>Attach an Artwork of Spotify</h5>
-			<span class="imas hide">この設定はCINDERELLA NowPlaying(imastodon.net限定)にも適用されます。</span><br>
-			<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_yes" value="yes" />
-			<label for="awk_yes">Yes</label>
-			<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_no" value="no" />
-			<label for="awk_no">No</label>
-			<br>
-		</div>
-	</li>
-	<li>
-		<div class="collapsible-header">
-			<i class="material-icons">hearing</i>TTS(text to speech) Preferences
-		</div>
-		<div class="collapsible-body">
-			<h5>Speed</h5>
-			1-100(default:10)<br>
-			<p class="range-field"><input type="range" id="voicespeed" min="1" max="100" value="10" style="width:500px; max-width:100%"/></p>
-			<h5>Pitch</h5>
-			0-100(default:50)<br>
-			<p class="range-field"><input type="range" id="voicepitch" min="0" max="100" value="50" style="width:500px; max-width:100%"/></p>
-			<h5>Volume</h5>
-			0-100(default:100)<br>
-			<p class="range-field"><input type="range" id="voicevol" min="0" max="100" value="100" style="width:500px; max-width:100%"/></p>
-			<h5>Test</h5>
-			<input type="text" style="width:350px" id="voicetxt" value="TheDesk is an open-source Mastodon client for PC.">
-			<button class="btn waves-effect blue" style="width:150px;" onclick="voicePlay()" id="testplay">Play/Stop</button><br>
-			<br>
-			<button class="btn waves-effect" style="width:100px;" onclick="voiceSettings()">Save</button>
-		</div>
-	</li>
-</ul>
-<br>
-<a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;"><i class="material-icons left">undo</i>Back</a>
-<br>
-<br>Keyboard shortcuts
-<li>Ctrl+1-9:Jump to n(1-9)th column</li>
-<li>N:Open toot box</li>
-<li>X:Toggle toot box</li>
-<li>Ctrl+Enter:Post</li>
-<li>Ctrl+Enter+Shift:Post(secondary toot)</li>
-<li>Ctrl+E:Make all notifications read</li>
-<li>Esc:Hide toot box</li>
-<li>F5:Super Reload</li>
-<li>Ctrl+Shift+C:Clear toot box</li>
-<li>Ctrl+Shift+S:Preferences</li>
-<li>Ctrl+Shift+M:Account Manager</li>
-<li>Ctrl+Shift+N:NowPlaying(Spotify)</li>
-<li>Ctrl+Shift+P:Show profile of selecting</li>
-<li>←/→:Show next or previous image</li>
-<li>Mousewheel:Zoom a image</li>
-<div class="hide kirishima">
-以下Markdownに対応したインスタンスのみ。
-<br>
-<li>Ctrl+B/I/S/U:太字/斜字/取り消し/下線</li>
-<li>Shift+Enter:全角スペースを入れて改行</li>
-<li>Shift+Space:ゼロ幅スペース</li>
-以下アスタルテにログインしている場合のみ 
-<br>
-<li>Ctrl+R: 
-<a href="https://astarte.thedesk.top">アスタルテ暇人ランキング</a>を開く
-</li><br>
-</div>
-<button class="btn waves-effect red" style="width:100%; max-width:500px;" onclick="if(confirm('Delete all data. You cannot undo. Continue?')){ localStorage.clear(); location.href='index.html'; }"><i class="material-icons left">delete</i>Reset(Danger)</button><br><br>
-<button class="btn waves-effect indigo" onclick="about()" style="width:100%; max-width:500px;"><i class="material-icons left">info</i>About TheDesk</button>
-<a href="https://thedesk.top" class="btn waves-effect deep-purple lighten-2" style="width:100%; max-width:500px;"><i class="material-icons left">web</i>Website</a>
-<a href="https://enty.jp/Cutls" class="btn waves-effect purple lighten-2" style="width:100%; max-width:500px;"><i class="material-icons left">trending_up</i>Support(Enty)</a>
-<a href="https://docs.thedesk.top" class="btn waves-effect blue darken-2" style="width:100%; max-width:500px;"><i class="material-icons left">list</i>Help/Docs(Constructing)</a>
-<a href="https://github.com/cutls/TheDesk" class="btn waves-effect black lighten-2" style="width:100%; max-width:500px;"><i class="fa fa-github left"></i>GitHub</a>
-<a href="index.html?mode=user&code=Cutls@kirishima.cloud" class="btn waves-effect blue lighten-2" style="width:100%; max-width:500px;"><img src="../../img/desk_full.svg" class="left" width="25" style="padding-top:5px;">Developer: Cutls@kirishima.cloud</a>
-<a class="btn waves-effect red lighten-2" href="https://osushi.love/Cutls_P" target="_blank" style="width:100%; max-width:500px;"><img src="../../img/sushi.svg" class="left" width="25" style="padding-top:5px;">Give me a sushi!</a>
-<br>
-Kyash<br>
-			<img src="../../img/kyash.png" width="100"><br>
-<a onclick="localStorage.removeItem('new-ver-skip'); location.href='index.html';" class="pointer">Check update</a><br>
-<a href="oss.html">OSS License</a><br>
-<span style="font-family:Open Sans;">Copyright &copy; TheDesk 2018 All Rights Reserved. 
-	Under <a href="https://github.com/cutls/TheDesk/blob/master/LICENSE">GNU General Public License v3.0</a> and <a href="https://thedesk.top/tos.html">Terms of Use</a>/<a href="https://thedesk.top/priv.html">Privacy Policy</a>
-	<br>Developer: Cutls P( 
-	<a href="index.html?mode=user&code=Cutls@kirishima.cloud">@Cutls@kirishima.cloud</a>)
+				<button onclick="spotifySave()" class="btn waves-effect" style="width:100px;">Save</button>
+				<h5>Attach an Artwork of Spotify</h5>
+				<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_yes" value="yes" />
+				<label for="awk_yes">Yes</label>
+				<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_no" value="no" />
+				<label for="awk_no">No</label>
+				<br>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">hearing</i>TTS(text to speech) Preferences
+			</div>
+			<div class="collapsible-body">
+				<h5>Speed</h5>
+				1-100(default:10)<br>
+				<p class="range-field"><input type="range" id="voicespeed" min="1" max="100" value="10"
+						style="width:500px; max-width:100%" /></p>
+				<h5>Pitch</h5>
+				0-100(default:50)<br>
+				<p class="range-field"><input type="range" id="voicepitch" min="0" max="100" value="50"
+						style="width:500px; max-width:100%" /></p>
+				<h5>Volume</h5>
+				0-100(default:100)<br>
+				<p class="range-field"><input type="range" id="voicevol" min="0" max="100" value="100"
+						style="width:500px; max-width:100%" /></p>
+				<h5>Test</h5>
+				<input type="text" style="width:350px" id="voicetxt" value="TheDesk is an open-source Mastodon client for PC.">
+				<button class="btn waves-effect blue" style="width:150px;" onclick="voicePlay()"
+					id="testplay">Play/Stop</button><br>
+				<br>
+				<button class="btn waves-effect" style="width:100px;" onclick="voiceSettings()">Save</button>
+			</div>
+		</li>
+	</ul>
 	<br>
-</span><br>
-TheDeskおよびCutls Pは<a href="https://donken.org/">被災地支援のためのマストドン研究会</a>をログイン機能提供等の形で応援しています。<br>
-タグタイムラインを開く:<a href="index.html?mode=tag&code=被災地支援のためのマストドン研究会">#被災地支援のためのマストドン研究会</a><br>
-<script type="text/javascript" src="../../js/common/about.js"></script>
-<script type="text/javascript" src="../../js/platform/end.js"></script>
-<script type="text/javascript" src="../../js/login/logout.js"></script>
-<script type="text/javascript" src="../../js/lang/lang.js"></script>
-<script type="text/javascript" src="../../js/ui/spotify.js"></script>
-<script type="text/javascript" src="../../js/tl/speech.js"></script>
-<script type="text/javascript" src="../../js/platform/pickr.js"></script>
-<script type="text/javascript" src="../../js/ui/settings.js"></script>
-<script type="text/javascript" src="../../js/ui/theme.js"></script>
-<script type="text/javascript" src="../../js/tl/date.js"></script>
+	<a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;"><i
+			class="material-icons left">undo</i>Back</a>
+	<br>
+	<br>Keyboard shortcuts
+	<li>Ctrl+1-9:Jump to n(1-9)th column</li>
+	<li>N:Open toot box</li>
+	<li>X:Toggle toot box</li>
+	<li>Ctrl+Enter:Post</li>
+	<li>Ctrl+Enter+Shift:Post(secondary toot)</li>
+	<li>Alt+Enter:Secondary Toot Button</li>
+	<li>Ctrl+E:Make all notifications read</li>
+	<li>Esc:Hide toot box</li>
+	<li>F5:Super Reload</li>
+	<li>Ctrl+Shift+C:Clear toot box</li>
+	<li>Ctrl+Shift+S:Preferences</li>
+	<li>Ctrl+Shift+M:Account Manager</li>
+	<li>Ctrl+Shift+N:NowPlaying(Spotify)</li>
+	<li>Ctrl+Shift+P:Show profile of selecting</li>
+	<li>←/→:Show next or previous image</li>
+	<li>Mousewheel:Zoom a image</li>
+	<div class="hide kirishima">
+		以下Markdownに対応したインスタンスのみ。
+		<br>
+		<li>Ctrl+B/I/S/U:太字/斜字/取り消し/下線</li>
+		<li>Shift+Enter:全角スペースを入れて改行</li>
+		<li>Shift+Space:ゼロ幅スペース</li>
+		以下アスタルテにログインしている場合のみ
+		<br>
+		<li>Ctrl+R:
+			<a href="https://astarte.thedesk.top">アスタルテ暇人ランキング</a>を開く
+		</li><br>
+	</div>
+	<button class="btn waves-effect red" style="width:100%; max-width:500px;"
+		onclick="if(confirm('Delete all data. You cannot undo. Continue?')){ localStorage.clear(); location.href='index.html'; }"><i
+			class="material-icons left">delete</i>Reset(Danger)</button><br><br>
+	<button class="btn waves-effect indigo" onclick="about()" style="width:100%; max-width:500px;"><i
+			class="material-icons left">info</i>About TheDesk</button>
+	<a href="https://thedesk.top" class="btn waves-effect deep-purple lighten-2" style="width:100%; max-width:500px;"><i
+			class="material-icons left">web</i>Website</a>
+	<a href="https://enty.jp/Cutls" class="btn waves-effect purple lighten-2" style="width:100%; max-width:500px;"><i
+			class="material-icons left">trending_up</i>Support(Enty)</a>
+	<a href="https://www.pixiv.net/fanbox/creator/28105985" class="btn waves-effect red lighten-2"
+		style="width:100%; max-width:500px;"><i class="material-icons left">trending_up</i>Support(Pixiv FANBOX)</a>
+	<a href="https://docs.thedesk.top" class="btn waves-effect blue darken-2" style="width:100%; max-width:500px;"><i
+			class="material-icons left">list</i>Help/Docs(Constructing)</a>
+	<a href="https://github.com/cutls/TheDesk" class="btn waves-effect black lighten-2"
+		style="width:100%; max-width:500px;"><i class="fa fa-github left"></i>GitHub</a>
+	<a href="index.html?mode=user&code=Cutls@kirishima.cloud" class="btn waves-effect blue lighten-2"
+		style="width:100%; max-width:500px;"><img src="../../img/desk_full.svg" class="left" width="25"
+			style="padding-top:5px;">Developer: Cutls@kirishima.cloud</a>
+	<br>
+	Kyash<br>
+	<img src="../../img/kyash.png" width="100"><br>
+	<a onclick="localStorage.removeItem('new-ver-skip'); location.href='index.html';"
+		class="pointer">Check update</a><br>
+	<a href="oss.html">OSS License</a><br>
+	<span style="font-family:Open Sans;">Copyright &copy; TheDesk 2018 All Rights Reserved.
+		Under <a href="https://github.com/cutls/TheDesk/blob/master/LICENSE">GNU General Public License v3.0</a> and <a
+			href="https://thedesk.top/tos.html">Terms of Use</a>/<a href="https://thedesk.top/priv.html">Privacy
+			Policy</a>
+		<br>Developer: Cutls P(
+		<a href="index.html?mode=user&code=Cutls@kirishima.cloud">@Cutls@kirishima.cloud</a>)
+		<br>
+	</span><br>
+	TheDeskおよびCutls Pは<a href="https://donken.org/">被災地支援のためのマストドン研究会</a>をログイン機能提供等の形で応援しています。<br>
+	タグタイムラインを開く:<a href="index.html?mode=tag&code=被災地支援のためのマストドン研究会">#被災地支援のためのマストドン研究会</a><br>
+	<script type="text/javascript" src="../../js/common/about.js"></script>
+	<script type="text/javascript" src="../../js/platform/end.js"></script>
+	<script type="text/javascript" src="../../js/login/logout.js"></script>
+	<script type="text/javascript" src="../../js/ui/spotify.js"></script>
+	<script type="text/javascript" src="../../js/tl/speech.js"></script>
+	<script type="text/javascript" src="../../js/platform/pickr.js"></script>
+	<script type="text/javascript" src="../../js/ui/settings.js"></script>
+	<script type="text/javascript" src="../../js/ui/theme.js"></script>
+	<script type="text/javascript" src="../../js/tl/date.js"></script>

app/view/en/setting.vue.js

@@ -0,0 +1,491 @@
+var yesno=[
+    {
+        text:"Yes",
+        value:"yes"
+    },{
+        text:"No",
+        value:"no"
+    }
+];
+var envConstruction=[
+    {
+        id:"popup",
+        storage:"popup",
+        checkbox:false,
+        doubleText:false,
+        setValue:0,
+        width:50,
+        text:{
+            head:"Popup notification(on Windows)",
+            desc:'Hide to set "0"',
+            after:"sec"
+        }
+    },{
+        id:"notf",
+        storage:"nativenotf",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"Native notification",
+            desc:"This does not work on Windows Portable ver.",
+            checkbox:yesno
+        }
+    },{
+        id:"width",
+        storage:"width",
+        checkbox:false,
+        doubleText:false,
+        width:50,
+        setValue:300,
+        text:{
+            head:"Minimum width of columns",
+            desc:"Scroll bar will be shown when your window size is more than ammounts of columns.",
+            after:"px above"
+        }
+    },{
+        id:"fixwidth",
+        storage:"fixwidth",
+        checkbox:false,
+        doubleText:false,
+        setValue:300,
+        width:50,
+        text:{
+            head:"Minimum width of TweetDeck browser",
+            desc:"",
+            after:"px above"
+        }
+    },{
+        id:"size",
+        storage:"size",
+        checkbox:false,
+        doubleText:false,
+        width:50,
+        setValue:13,
+        text:{
+            head:"Font size",
+            desc:'<span style="font-size:13px">13px(absolute value)</span>',
+            after:"px"
+        }
+    },{
+        id:"ha",
+        storage:"ha",
+        checkbox:true,
+        setValue:false,
+        text:{
+            head:"Disable hardware acceleration",
+            desc:"Auto restarted",
+            checkbox:[
+                {
+                    text:"Yes",
+                    value:"true"
+                },{
+                    text:"No",
+                    value:"false"
+                }
+            ]
+        }
+    }
+];
+var tlConstruction=[
+    {
+        id:"time",
+        storage:"datetype",
+        checkbox:true,
+        setValue:"absolute",
+        text:{
+            head:"Time format",
+            desc:'Relative format:"1 minutes ago","3 days ago"<br>Absolute format:"23:25:21","2017/12/30 23:59:00"<br>Mixed format:toots posted today are relative-format, others are absolute-format.',
+            checkbox:[
+                {
+                    text:"Relative",
+                    value:"relative"
+                },{
+                    text:"Absolute",
+                    value:"absolute"
+                },{
+                    text:"Both relative and absolute",
+                    value:"double"
+                },{
+                    text:"Mixed",
+                    value:"medium"
+                }
+
+            ]
+        }
+    },{
+        id:"ul",
+        storage:"locale",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"Server's unique locale",
+            desc:"This value is available on some Japanese servers",
+            checkbox:yesno
+        }
+    },{
+        id:"nsfw",
+        storage:"nsfw",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"Hide NSFW pictures",
+            desc:"Strong blur effect",
+            checkbox:yesno
+        }
+    },{
+        id:"cw",
+        storage:"cw",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"Hide CW contents",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        id:"rp",
+        storage:"replyct",
+        checkbox:true,
+        setValue:"hidden",
+        text:{
+            head:"Reply counter style",
+            desc:"",
+            checkbox:[
+                {
+                    text:"Show 1+ if the replies are more than 1.",
+                    value:"hidden"
+                },{
+                    text:"Show 1+ if the replies are more than 1.",
+                    value:"all"
+                }
+
+            ]
+        }
+    },{
+        id:"gif",
+        storage:"gif",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"Animated GIF images animation",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        id:"tag",
+        storage:"tag-range",
+        checkbox:true,
+        setValue:"local",
+        text:{
+            head:"Tag TL Search",
+            desc:"",
+            checkbox:[
+                {
+                    text:"Use federated network",
+                    value:"all"
+                },{
+                    text:"Use local network",
+                    value:"local"
+                }
+
+            ]
+        }
+    },{
+        id:"via",
+        storage:"viashow",
+        checkbox:true,
+        setValue:"no",
+        text:{
+            head:"Show via",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        id:"mov",
+        storage:"mouseover",
+        checkbox:true,
+        setValue:"no",
+        text:{
+            head:"Hide action buttons without mouseover",
+            desc:"You may feel 'mouseover' is unconfortable:(",
+            checkbox:[
+                {
+                    text:"Mouseover to show",
+                    value:"yes"
+                },{
+                    text:"Click to show",
+                    value:"click"
+                },{
+                    text:"No",
+                    value:"no"
+                }
+
+            ]
+        }
+    },{
+        id:"notfm",
+        storage:"setasread",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"Show Notification marker, red colored bell and counter(if you show a notification column.)",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        checkbox:false,
+        doubleText:true,
+        data:[
+            {
+                id:"sentence",
+                storage:"sentence",
+                width:50,
+                setValue:500,
+                text:{after:"lines above or"}
+            },{
+                id:"letters",
+                storage:"letters",
+                width:50,
+                setValue:7000,
+                text:{after:"letters above"}
+            }
+        ],
+        text:{
+            head:"Auto folding",
+            desc:"TheDesk does not collapse totes of 5 characters or less. Also, when collapsing, newlines are not shown. TheDesk count only newlines as the number of lines.",
+        }
+    },{
+        id:"img-height",
+        storage:"img-height",
+        checkbox:false,
+        doubleText:false,
+        width:80,
+        setValue:200,
+        text:{
+            head:"Height of images",
+            desc:'Option:Set "full" to uncrop.',
+            after:"px"
+        }
+    },{
+        id:"ticker",
+        storage:"ticker_ok",
+        checkbox:true,
+        setValue:"no",
+        text:{
+            head:"Enable #InstanceTicker",
+            desc:'Show colorful stickers about the server. <a href="https://cdn.weep.me/mastodon/">About #InstanceTicker</a> Copyright 2018 weepjp, kyori19.',
+            checkbox:yesno
+        }
+    },{
+        id:"anime",
+        storage:"animation",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"Animation of timelines",
+            desc:"",
+            checkbox:yesno
+        }
+    }
+];
+var postConstruction=[
+    {
+        id:"cw-text",
+        storage:"cw-text",
+        checkbox:false,
+        doubleText:false,
+        width:150,
+        setValue:"",
+        text:{
+            head:"Default warining text",
+            desc:"",
+            after:""
+        }
+    },{
+        checkbox:false,
+        doubleText:true,
+        data:[
+            {
+                id:"cw_sentence",
+                storage:"cw_sentence",
+                width:50,
+                setValue:500,
+                text:{after:"lines above or"}
+            },{
+                id:"cw_letters",
+                storage:"cw_letters",
+                width:50,
+                setValue:7000,
+                text:{after:"letters above"}
+            }
+        ],
+        text:{
+            head:"Alert before posting a long toot.",
+            desc:"Show dialog whether you make too-long text hidden.",
+        }
+    },{
+        id:"cws",
+        storage:"always-cw",
+        checkbox:true,
+        setValue:"no",
+        text:{
+            head:"Always CW set",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        id:"vis",
+        storage:"vis",
+        checkbox:true,
+        setValue:"public",
+        text:{
+            head:"Default visibility",
+            desc:"",
+            checkbox:[
+                {
+                    text:"Public",
+                    value:"public"
+                },{
+                    text:"Unlisted",
+                    value:"unlisted"
+                },{
+                    text:"Private",
+                    value:"private"
+                },{
+                    text:"Direct",
+                    value:"direct"
+                },{
+                    text:"Memory(memorized as each server)",
+                    value:"memory"
+                },{
+                    text:"Default of your visibility(Set on preferences of Mastodon server)",
+                    value:"useapi"
+                }
+            ]
+        }
+    },{
+        id:"img",
+        storage:"img",
+        checkbox:true,
+        setValue:"no-act",
+        text:{
+            head:"Posting images preferences",
+            desc:"",
+            checkbox:[
+                {
+                    text:"Insert media URL",
+                    value:"url"
+                },{
+                    text:"Insert nothig",
+                    value:"no-act"
+                }
+            ]
+        }
+    },{
+        id:"box",
+        storage:"box",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"Action of posting-box",
+            desc:"",
+            checkbox:[
+                {
+                    text:"Folding",
+                    value:"yes"
+                },{
+                    text:"Open after posting",
+                    value:"no"
+                },{
+                    text:"Absolutely open",
+                    value:"absolute"
+                }
+            ]
+        }
+    },{
+        id:"quote",
+        storage:"quote",
+        checkbox:true,
+        setValue:"nothing",
+        text:{
+            head:"Quote format",
+            desc:"",
+            checkbox:[
+                {
+                    text:"Only URL",
+                    value:"simple"
+                },{
+                    text:"URL and acct(mention to the user)",
+                    value:"mention"
+                },{
+                    text:"URL, text and acct(mention to the user)",
+                    value:"full"
+                },{
+                    text:"Disabled(Hide buttons on TLs)",
+                    value:"nothing"
+                }
+            ]
+        }
+    },{
+        id:"main",
+        storage:"mainuse",
+        checkbox:true,
+        setValue:"remain",
+        text:{
+            head:"Default accounts of actions",
+            desc:"Main account can be set on Account Manager.",
+            checkbox:[
+                {
+                    text:"Account you used recently",
+                    value:"remain"
+                },{
+                    text:"Main account",
+                    value:"main"
+                }
+            ]
+        }
+    },{
+        id:"sec",
+        storage:"sec",
+        checkbox:true,
+        setValue:"public",
+        text:{
+            head:"Secondary Toot Button",
+            desc:"",
+            checkbox:[
+                {
+                    text:"Hidden",
+                    value:"nothing"
+                },{
+                    text:"Public",
+                    value:"public"
+                },{
+                    text:"Unlisted",
+                    value:"unlisted"
+                },{
+                    text:"Private",
+                    value:"private"
+                },{
+                    text:"Direct",
+                    value:"direct"
+                },{
+                    text:"Local Only",
+                    value:"local",
+                    kirishima:true,
+                    kirishimaText:"非対応インスタンスでは「未収載」になります。"
+                }
+            ]
+        }
+    },{
+        id:"zero",
+        storage:"emoji-zero-width",
+        checkbox:true,
+        setValue:"normal",
+        setValue:"no",
+        text:{
+            head:"Zero-width space when inserting emojis",
+            desc:"",
+            checkbox:yesno
+        }
+    }
+]

app/view/en/update.html

@@ -62,9 +62,6 @@ a,button,input,label,i{
 #prog{
     font-size:200%;
 }
-.linux, .mac{
-    display:none;
-}
 </style>
 <script type="text/javascript" src="../../js/common/jquery.js"></script>
 <script type="text/javascript" src="../../js/platform/first.js"></script>
@@ -78,11 +75,10 @@ a,button,input,label,i{
         <p>Get latest TheDesk</p>
         <span id="now"></span>→<b id="ver"></b><br>
         <span id="det"></span><br>
-        <button class="waves-effect btn windows" onclick="update('install')" style="margin-left:15px;">Installer ver.</button>
-        <button class="waves-effect btn windows" onclick="update('portable')" style="margin-left:15px;">Portable ver.</button>
-        <span class="linux">Snap ver may be on Snapcraft<br></span>
-        <button class="waves-effect btn linux" onclick="update('linux')" style="margin-left:15px;">Start</button>
-        <button class="waves-effect btn mac" onclick="update('mac')" style="margin-left:15px;">Start</button>
+        <button class="waves-effect btn windows hide" onclick="update('install')" style="margin-left:15px;">Installer ver.</button>
+        <button class="waves-effect btn windows hide" onclick="update('portable')" style="margin-left:15px;">Portable ver.</button>
+        <button class="waves-effect btn linux hide" onclick="update('linux')" style="margin-left:15px;">Start</button>
+        <button class="waves-effect btn mac hide" onclick="update('mac')" style="margin-left:15px;">Start</button>
         <br>
         Some problems?<br>Please download on <a href="https://thedesk.top">Oficial HP</a>.
     </div>
@@ -184,12 +180,12 @@ function verck(){
     var remote=electron.remote;
     var platform=remote.process.platform;
     var bit=process.arch;
-	if(platform=="linux"){
-        $('.windows').hide()
-        $('.linux').show()
-	}else if(platform=="mac"){
-        $('.windows').hide()
-        $('.mac').show()
+	if(platform=="win32"){
+        $('.windows').removeClass("hide")
+	}else if(platform=="linux"){
+        $('.linux').removeClass("hide")
+	}else if(platform=="darwin"){
+        $('.mac').removeClass("hide")
 	}
 	var start="https://thedesk.top/ver.json";
 	fetch(start, {

app/view/ja/acct.html

@@ -18,6 +18,14 @@ body,html{overflow-y: scroll;}
 .colorsel{ display:flex; }
 .card .colorsel div:not(.exc){width:20px;height:20px;}
 .card .colorsel div.exc{width:40px;height:20px;}
+.first{
+      display:flex;
+      justify-content: center;
+      align-items:center
+}
+.first .hide-first{
+      display:none;
+}
 </style>
 <meta charset="utf-8">
 <!--
@@ -39,24 +47,27 @@ body,html{overflow-y: scroll;}
 <script type="text/javascript" src="../../js/ui/tips.js"></script>
 <script type="text/javascript" src="../../js/common/time.js"></script>
 <script type="text/javascript" src="../../js/common/modal.js"></script>
-<a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;">戻る</a><br>
-<h5>アカウント一覧</h5>
-<div id="acct-list"></div>
-<div class="divider"></div>
+<div class="hide-first">
+      <a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;">戻る</a><br>
+      <h5>アカウント一覧</h5>
+      <div id="acct-list"></div>
+      <div class="divider"></div>
+</div>
+<div>
 <h5>アカウントを追加</h5><br>
 <div id="add">
 <div class="row">
-      <div class="col s6">
+      <div class="col s8">
             <input type="text" id="url" style="width:70%" placeholder="ex)mstdn.jp">
             <div id="ins-suggest"></div>
-            Windows以外でご使用の方やPleromaにログインされる方はチェックを入れて下さい。ログインできない場合、チェックを外してください。<br>
+            チェックを外すとコード貼り付けをスキップできます。(<u>Mastodon</u>にWindowsやmacOSからログインする場合)失敗する場合はチェックを入れてください。<br>
             <input type="checkbox" class="filled-in" id="linux" />
                   <label for="linux">コードセットアップ</label><br>
             <input type="checkbox" class="filled-in" id="misskey" />
                   <label for="misskey">Misskeyとしてログイン</label><br>
             <button class="btn waves-effect" onclick="instance()">Login</button><br>
       </div>
-      <div class="col s6">
+      <div class="col s4">
             <span style="font-family:Open Sans;">Supports</span>
             <div id="support" class="collection transparent"></div>
       </div>
@@ -73,6 +84,8 @@ body,html{overflow-y: scroll;}
                   <input type="text" id="misskey-key" placeholder="コードを入力">
                   <button class="btn waves-effect" onclick="misskeyLogin()">Auth</button><br>
             </div>
+      </div>
+<div class="hide-first">
 <h5>メインアカウント</h5>
 <div class="input-field" style="width:300px"><span data-trans="your_acct">アカウントを選択</span>
       <br>
@@ -91,6 +104,7 @@ Administered by:<a id="ins-admin"></a><br>
 ユーザー数:<span id="ins-user"></span>ユーザー数<br>
 コネクション:<span id="ins-per"></span>%<br>
 Mastodonバージョン:<span id="ins-ver"></span>@<span id="ins-upd"></span><br>
+</div>
 <script type="text/javascript" src="../../js/ui/theme.js"></script>
 <script type="text/javascript" src="../../js/platform/end.js"></script>
 <script type="text/javascript" src="../../js/common/sha256.js"></script>

app/view/ja/index.html

@@ -32,15 +32,13 @@
 <script type="text/javascript" src="../../js/common/modal.js"></script>
 <script type="text/javascript" src="../../js/ui/jquery-ui.min.js"></script>
 <script>
-var ver="Miria (17.2.0)";
+var ver="Usamin (18.2.1)";
 //betaを入れるとバージョンチェックしない
 //GitHubに上げるときはindex.htmlをちゃんとする。(index.start.html)
 //var ver="beta";
 //WinstoreではバージョンCK・言語・Misskeyトークンの機能が排除
-var winstore=false;
 var acct_id=0;
 var tlid=0;
-  verck(ver,winstore);
  </script>
 <textarea id="copy" style="top:-100px; position:fixed;"></textarea>
 <div id="tl">
@@ -54,7 +52,7 @@ var tlid=0;
 </div>
 </div>
 <div id="post-box" class="z-depth-5">
-<div id="post-bar">投稿</div>
+<div id="post-bar" class="drag-bar"><span id="unreact">投稿</span><span id="addreact" class="hide">Reaction</span></div>
 <!--トゥートボックス-->
 <div id="left-side">
 <div class="row" style="margin-bottom:0;">
@@ -125,7 +123,6 @@ var tlid=0;
 <span class="sml gray pointer anti-markdown mize">
 <a onclick="mdToggle()">Markdownエディタを表示</a>
 </span>
-<span id="suggest"></span>
 </div>
 <div class="col s12 mize" style="margin-top: 0; display:flex; justify-content: space-between">
 		<i class="waves-effect gray material-icons" id="nsfw" title="画像に制限を付与" onclick="nsfw()">visibility_off</i>
@@ -138,7 +135,7 @@ var tlid=0;
 </div>
 <div class="col s12 mize" style="margin-bottom:5px; padding:0;">
 	<div id="taglist"></div>
-<span id="preview" class="mize"></span>
+<div id="preview" class="mize"></div>
 <span class=" sml mize"><span data-trans="reply">返信モード</span>:
 <span id="rec">いいえ</span>/<span data-trans="file">添付ファイル</span>:
 <span id="mec">なし</span>/<span data-trans="vis">公開範囲</span>:
@@ -202,11 +199,11 @@ var tlid=0;
 </div>
 </div>
 <div id="right-side">
+<div id="suggest"></div>
 <!--絵文字ピッカー-->
 <div id="emoji" class="hide">
 		<span class="gray sml">サーバーによって実装が異なります。
 			<a onclick="emojiGet('true')" class="pointer">絵文字更新</a>
-			<i class="material-icons waves-effect" onclick="emojiToggle()" title="このボックスを閉じる" data-trans-title="post_box_close">cancel</i>
 		<br>
 		</span>
 		<div id="emoji-list" class="" style="">
@@ -260,12 +257,8 @@ var tlid=0;
 	<div id="poll" class="hide">
 		<select id="poll-sel"  onchange="pollProviderCk()">
 			<option value="nothing">アンケートを使用しない</option>
-			<option value="votedon">votedon.</option>
 			<option value="mastodon-poll">Mastodon(2.8~)</option>
 		</select>
-		<div id="votedon" class="poll-provider hide">
-	WIP
-		</div>
 		<div id="mastodon-poll" class="poll-provider hide">
 			<input type="text" class="mastodon-choice" placeholder="選択肢1">
 			<input type="text" class="mastodon-choice" placeholder="選択肢2">
@@ -308,14 +301,14 @@ var tlid=0;
 		<div class="collapsible-body toot-reset" id="toot-after">
 		</div>
 	</li>
-	<li>
+	<li class="dm-hide">
 		<div class="collapsible-header">
 		<i class="material-icons">people_outline</i>これより前のLocal TL(エアリプソース確認)
 		</div>
 		<div class="collapsible-body toot-reset" id="toot-before">
 		</div>
 	</li>
-	<li>
+	<li class="dm-hide">
 		<div class="collapsible-header">
 		<i class="material-icons">person_outline</i>これより前のユーザーTL(BTソース確認)
 		</div>
@@ -329,7 +322,7 @@ var tlid=0;
 		<div class="collapsible-body toot-reset" id="toot-fav">
 		</div>
 	</li>
-	<li>
+	<li class="dm-hide">
 		<div class="collapsible-header">
 		<i class="text-darken-3 fa fa-retweet"></i>このトゥートをブーストした人
 		</div>
@@ -337,6 +330,7 @@ var tlid=0;
 		</div>
 	</li>
 	</ul>
+	<div class="dm-hide">
 	他のアカウントを使用(<i class="fa fa-retweet"></i>/<i class="fa fa-star"></i>の解除はできません)<br>
 	<div class="row">
 		<div class="col s6">
@@ -357,11 +351,11 @@ var tlid=0;
 	<div id="toot-after">
 	</div>
 	</div>
+</div>
 	<div class="modal-footer">
-	<a href="#!" class="waves-effect waves-green btn-flat" onclick="brws()">ブラウザで開く</a>
-	<a href="#!" class="waves-effect waves-green btn-flat" onclick="shot()">スクリーンショット</a>
-	<a href="#!" class="waves-effect waves-green btn-flat" onclick="cbCopy()">URLをコピー</a>
-	<a href="#!" class="waves-effect waves-green btn-flat" onclick="cbCopy('emb')">埋め込む</a>
+	<a href="#!" class="waves-effect waves-green btn-flat dm-hide" onclick="brws()">ブラウザで開く</a>
+	<a href="#!" class="waves-effect waves-green btn-flat dm-hide" onclick="cbCopy()">URLをコピー</a>
+	<a href="#!" class="waves-effect waves-green btn-flat dm-hide" onclick="cbCopy('emb')">埋め込む</a>
 	<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
 	</div>
 	</div>
@@ -371,7 +365,7 @@ var tlid=0;
 			<div id="his-data-show">
 			<div class="his-float" id="his-float-data">
 			<div id="his-basic-prof">
-			<img src="../../img/loading.svg" id="his-prof">
+			<img src="../../img/loading.svg" id="his-prof" draggable="false">
 			<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
 			<br>@
 			<span id="his-acct"></span><br>
@@ -524,6 +518,9 @@ var tlid=0;
 			</div>
 			</div>
 			</div>
+			<div class="his-float" id="his-float-blocked">
+				<div>ブロックされています。なぜでしょう？</div>
+			</div>
 			</div>
 			</div>
 			<div class="modal-footer">
@@ -582,18 +579,28 @@ var tlid=0;
 		<a href="https://thedesk.top" target="_blank">HP</a><br>
 		<a href="https://github.com/cutls/TheDesk" target="_blank">GitHub</a><br>
 		<br>
-			<div id="release-Miria_17-2-0" class="release-do" style="display:none; ">
+			<div id="release-Usamin_18-2-1" class="release-do" style="display:none; ">
 					<a href="https://code.cutls.com/thedesk-log/" target="_blank">開発の経緯</a><br>
 					<a href="https://ja.mstdn.wiki/TheDesk" target="_blank">機能一覧</a><br>
 					Entyでは支援者様限定で様々なTheDeskに関する記事をご覧いただけます。<br>
 					困ったときは、<a href="https://docs.thedesk.top">TheDesk Docs</a>をご覧ください。
-					<h5>Release Note Miria (17.2.0)</h5>
-					カスタムテーマを実装。Misskeyのテーマとの一定の互換性あり。<a href="https://assets.msky.cafe/" target="_blank">MiAS</a>から80を超えるテーマを入手。
-					<a href="https://thedesk.top/mias.html">注意点</a><br>
-					Misskeyのログイン方法変更につき、いちいちDevCenterに行かなくてもよくなりました。<br>
-					日本語でベタ書きしていたダイアログを一部多言語対応に変更。<br>
-					
-					<img class="emoji" draggable="false" alt="⚠" src="https://twemoji.maxcdn.com/2/72x72/26a0.png">TheDeskのMisskeyについての機能追加は終了しています。<br>
+					<h5>Release Note Usamin (18.2.0)</h5>
+					・<b>緊急の脆弱性修正</b>
+					<h5>Release Note Usamin (18.2.0)</h5>
+・tootsearchをひとつのカラムにしてエゴサが捗る<br>
+・イントロダクション(初回起動時)の挙動修正<br>
+・リンクプレビューを最大1行ずつに省略(タイトルと本文)<br>
+・ブロックされたときのプロフィールの動作(Mastodon 2.8~)<br>
+・(Misskey)MFM追加flipやjumpなど<br>
+・(Misskey)リストに対応<br>
+・(Misskey)カスタム絵文字に対応。カスタム絵文字によるリアクションに対応(対応インスタンスに限る)。<br>
+・<b>カスタム絵文字をゼロ幅スペースによる挿入に変更する機能</b><br>
+・一部機能の統廃合とバグの修正<br>
+・best-friends.chatやキュアスタ！、misskey.devをサポートインスタンスに追加
+			</div>
+			<div id="release-en">
+				<h5>Let's make it native!</h5>
+				<a href="https://translate.thedesk.top">Crowdin translation project</a>
 			</div>
 			<br><br>
 			<h3>ご支援ください。</h3>
@@ -601,9 +608,9 @@ var tlid=0;
 			<a class="btn-share btn waves-effect waves-light purple lighten-2" href="https://enty.jp/Cutls" target="_blank">
   				Entyで支援
 			</a>
-			<a class="btn-share btn waves-effect waves-light red lighten-2" href="https://osushi.love/Cutls_P" target="_blank">
-  				Osushi.loveで寿司を贈る
-			</a>
+			<a class="btn-share btn waves-effect waves-light red lighten-2" href="https://www.pixiv.net/fanbox/creator/28105985" target="_blank">
+				Pixiv FANBOXで支援
+		</a>
 			<a class="btn-share btn waves-effect waves-light blue" href="https://www.amazon.co.jp/registry/wishlist/2TV35ZHHJPDSB" target="_blank">
 				Amazonほしいものリスト
 			</a>
@@ -623,130 +630,162 @@ var tlid=0;
 		<i class="material-icons pointer" onclick="endPip()">close</i>
 		<div id="pip-content">
 		</div>
-    </div>
-<!--カラム追加-->
-<div id="add-box" class="hide z-depth-4 notf-box">
-<div class="input-field"><span data-trans="your_acct">アカウントを選択</span>
-<br>
-<select id="add-acct-sel" class="acct-sel" style="color:black" onchange="addselCk()"></select>
-<label></label>
-</div>
-<div class="input-field">
-<div id="auth">
-<select id="type-sel" style="color:black">
-	<option value="local" data-trans="local">ローカル</option>
-	<option value="local-media" data-trans="local-media">ローカル(メディア)</option>
-	<option value="home" data-trans="home">ホーム</option>
-	<option value="pub" data-trans="public">連合</option>
-	<option value="pub-media" data-trans="public-media">連合(メディア)</option>
-	<option value="dm" data-trans="dm">ダイレクトメッセージ</option>
-	<option value="mix" data-trans="integrated">統合(ローカルとホーム)</option>
-	<option value="plus" data-trans="plus">統合(ローカルとブースト・リプライ)</option>
-	<option value="notf" data-trans="notification">通知</option>
-</select>
-<label data-trans="show_tl">表示するタイムライン</label>
-</div>
-<div id="noauth" class="hide">表示するタイムライン
-	<input id="noauth-url" type="text" class="validate" style="width:calc( 70% - 40px);" placeholder="e.g:mstdn.jp">
-</div>
-<div id="webview-add" class="hide">TweetDeckを表示します。TJDeckをカスタムしたものが読み込まれます(<a href='https://gist.github.com/cutls/8787a55d2c1c53274e68a427966046a6' target='_blank'>Code</a>/<a href='https://gist.github.com/totoraj930/d1394dadb51d75666a76829f61e7280c' target='_blank'>TJDeck</a>)。キーボードショートカットが邪魔をするので、文字入力時はカラムの「WebView優先」にチェックを入れてください。
-</div>
-</div>
-<button class="btn waves-effect blue " style="width:calc( 100% - 10px);" onclick="addColumn()" data-trans-i="add">
-	<i class="material-icons left">add</i>追加
-</button>
-<br>
-<br>
-</div>
-<!--検索-->
-<div id="src-box" class="hide notf-box z-depth-4" style="width:500px">
-		<div class="input-field">
-		<select id="src-acct-sel" class="acct-sel" onchange="trend()"></select>
-</div><div class="input-field">
-<i class="material-icons prefix">search</i>
-<input id="src" type="text" class="validate" style="width:calc( 60% - 40px);">
-<label for="src" data-trans="src">検索</label>
-<button class="btn waves-effect indigo" style="width:calc( 40% - 40px);" onclick="src()" data-trans-i="src">
-	<i class="material-icons left">search</i>検索
-</button>
-<br>
-<br>
-</div>
-<div id="search">
-<div id="src-contents">
-</div>
-</div>
-</div>
-<!--並べ替え-->
-<div id="sort-box" class="hide">
-<ul id="sort"></ul>
-<div>
-<button onclick="sort()" class="btn waves-effect nex" style="width:100%; max-width:300px;" data-trans-i="sort">
-	<i class="material-icons left">sort</i>並べ替え設定
-</button>
-<button onclick="sortToggle()" class="btn waves-effect nex" style="width:100%; max-width:300px;" data-trans-i="close">
-		<i class="material-icons left">close</i>Close
-</button>
-</div>
-</div>
-<!--リスト-->
-<div id="list-box" class="hide notf-box z-depth-4">
-	<div class="input-field" style="width:calc( 100% - 100px);float:left">
-		<select id="list-acct-sel" class="acct-sel"></select>
-		<label>アカウントを選択</label>
+		</div>
+<!--menu-->
+<div id="menu" class="z-depth-5" style="display:none">
+		<div id="menu-bar" class="drag-bar"></div>
+		<span class="cancel">
+				<i class="material-icons waves-effect" onclick="menu()" title="このボックスを閉じる(X)">cancel</i>
+			</span>
+		<div id="menu-wrapper">
+		<div id="left-menu">
+			<div class="waves-effect active" onclick="addColumnMenu()" id="addColumnMenu"><i class="material-icons">add</i><span>カラム追加</span></div>
+			<div class="waves-effect" onclick="sortMenu()" id="sortMenu"><i class="material-icons">sort</i><span>カラム一覧/並べ替え</span></div>
+			<div class="waves-effect" onclick="searchMenu()" id="searchMenu"><i class="material-icons">search</i><span>検索</span></div>
+			<div class="waves-effect" onclick="listMenu()" id="listMenu"><i class="material-icons">view_headline</i><span>リスト</span></div>
+			<div class="waves-effect" onclick="filterMenu()" id="filterMenu"><i class="material-icons">filter_list</i><span>フィルター</span></div>
+			<div class="waves-effect" onclick="help()"><i class="material-icons">help_outline</i><span>ヘルプ</span></div>
+			<div class="waves-effect" onclick="location.href='index.html'"><i class="material-icons">refresh</i><span>TL再読込</span></div>
+		</div>
+		<div id="right-menu">
+				<!--カラム追加-->
+<div id="add-box" class="hide menu-content">
+	<div class="input-field"><span data-trans="your_acct">選択(スクロールで全選択肢表示)</span>
+	<br>
+	<select id="add-acct-sel" class="acct-sel" style="color:black" onchange="addselCk()"></select>
+	<label></label>
 	</div>
-	<div style="float:left; padding-top:8px; padding-bottom:28px;">
-		<button class="btn waves-effect indigo" style="width:80px;" onclick="list()" data-trans-i="lists">
-			一覧
-		</button>
+	<div class="input-field">
+	<div id="auth">
+	<input type="hidden" value="local" id="type-sel">
+	表示するタイムライン
+	<div id="tltype">
+		<div class="type waves-effect active" data-type="local"><div><i class="material-icons">people_outline</i></div><span>ローカル</span></div>
+		<div class="type waves-effect" data-type="local-media"><div><i class="material-icons">people_outline</i><i class="material-icons sub-icon">perm_media</i></div><span>ローカル(メディア)</span></div>
+		<div class="type waves-effect" data-type="home"><div><i class="material-icons">home</i></div><span>ホーム</span></div>
+		<div class="type waves-effect" data-type="pub"><div><i class="material-icons">language</i></div><span>連合</span></div>
+		<div class="type waves-effect" data-type="pub-media"><div><i class="material-icons">language</i><i class="material-icons sub-icon">perm_media</i></div><span>連合(メディア)</span></div>
+		<div class="type waves-effect" data-type="dm"><div><i class="material-icons">mail_outline</i></div><span>ダイレクトメッセージ</span></div>
+		<div class="type waves-effect" data-type="mix"><div><i class="material-icons">merge_type</i></div><span>統合(ローカルとホーム)</span></div>
+		<div class="type waves-effect" data-type="plus"><div><i class="material-icons">merge_type</i><i class="material-icons sub-icon">reply</i></div><span>統合(LTL+BT+返信)</span></div>
+		<div class="type waves-effect" data-type="notf"><div><i class="material-icons">notifications</i></div><span>通知</span></div>
+	</div>
+	</div>
+	<div id="noauth" class="hide">表示するタイムライン
+		<input id="noauth-url" type="text" class="validate" style="width:calc( 70% - 40px);" placeholder="e.g:mstdn.jp">
+	</div>
+	<div id="webview-add" class="hide">TweetDeckを表示します。TJDeckをカスタムしたものが読み込まれます(<a href='https://gist.github.com/cutls/8787a55d2c1c53274e68a427966046a6' target='_blank'>Code</a>/<a href='https://gist.github.com/totoraj930/d1394dadb51d75666a76829f61e7280c' target='_blank'>TJDeck</a>)。キーボードショートカットが邪魔をするので、文字入力時はカラムの「WebView優先」にチェックを入れてください。
+	</div>
+	</div>
+	<button class="btn waves-effect blue " style="width:calc( 100% - 10px);" onclick="addColumn()" data-trans-i="add">
+		<i class="material-icons left">add</i>追加
+	</button>
+	<br>
+	<br>
+	</div>
+	<!--検索-->
+	<div id="src-box" class="hide menu-content">
+			<div class="input-field">
+			<select id="src-acct-sel" class="acct-sel" onchange="trend()"></select>
+	</div><div class="input-field">
+	<input id="src" type="text" class="validate" style="width:60%">
+	<label for="src" data-trans="src">検索</label>
+	<button class="btn waves-effect indigo" style="width: 36%;padding: 0;padding-left: 15px;" onclick="src()" data-trans-i="src">
+		<i class="material-icons left" style="margin:0">search</i>検索
+	</button>
+	<br>
+	<br>
+	</div>
+	<div id="search">
+	<div id="src-contents">
+	</div>
+	</div>
+	</div>
+	<!--並べ替え-->
+	<div id="sort-box" class="hide menu-content">
+	<ul id="sort"></ul>
+	<div>
+	<button onclick="sort()" class="btn waves-effect nex" style="width:97.5%;" data-trans-i="sort">
+		<i class="material-icons left">sort</i>並べ替え設定
+	</button>
+	</div>
+	</div>
+	<!--リスト-->
+	<div id="list-box" class="hide menu-content">
+		<div class="input-field" style="width:calc( 100% - 100px);float:left">
+			<select id="list-acct-sel" class="acct-sel"></select>
+			<label>選択(スクロールで全選択肢表示)</label>
+		</div>
+		<div style="float:left; padding-top:8px; padding-bottom:28px;">
+			<button class="btn waves-effect indigo" style="width:80px;" onclick="list()" data-trans-i="lists">
+				一覧
+			</button>
+		</div>
+		<br><br>
+		<div id="lists"></div>
+		<div id="lists-user"></div>
+		<input type="text" style="width:150px" id="list-add" placeholder="名前">
+			<button class="btn waves-effect" style="width:120px;" onclick="makeNewList()">新規作成</button>
+	</div>
+	<!--フィルター-->
+	<div id="filter-box" class="hide menu-content">
+		<div class="input-field" style="width:calc( 100% - 100px);float:left">
+			<select id="filter-acct-sel" class="acct-sel"></select>
+			<label>選択(スクロールで全選択肢表示)</label>
+		</div>
+		<div style="float:left; padding-top:8px; padding-bottom:28px;">
+			<button class="btn waves-effect indigo" style="width:80px;" onclick="filter()" data-trans-i="filters">
+				一覧
+			</button>
+		</div>
+		<div id="filtered-words"></div>
+		<input type="hidden" id="filter-edit-id">
+		<input type="text" style="width:150px" id="filter-add-word" placeholder="フィルターワード"><br>
+		適応範囲<br>
+		<input type="checkbox" class="filled-in" id="home_filter" value="home" />
+			<label for="home_filter">ホーム</label>
+		<input type="checkbox" class="filled-in" id="local_filter" value="public" />
+			<label for="local_filter">ローカル</label>
+		<input type="checkbox" class="filled-in" id="notf_filter" value="notifications" />
+			<label for="notf_filter">通知</label>
+		<input type="checkbox" class="filled-in" id="conv_filter" value="thread" />
+			<label for="conv_filter">会話</label><br>
+			オプション<br>
+		<input type="checkbox" class="filled-in" id="wholeword_filter" value="1" />
+			<label for="wholeword_filter">単語マッチ</label><br>
+		<span class="sml">非ラテン系の文字列では「単語マッチ」は推奨されません。</span><br>
+		<input type="checkbox" class="filled-in" id="except_filter" value="1" />
+			<label for="except_filter">除外</label><br>
+		<span class="sml">「除外」時マッチしたトゥートは非可逆的に除外され、削除後も閲覧できません。</span><br>
+		有効期限(あと)<span class="sml">未指定(または0分)で「無期限」になります。<b>仕様上数値の正確性を保証できません。</b></span><br><br>
+		<input type="number" style="width:50px" id="days_filter" placeholder="d" value="0">日
+		<input type="number" style="width:50px" id="hours_filter" placeholder="h" value="0">時間
+		<input type="number" style="width:50px" id="mins_filter" placeholder="m" value="0">分<br>
+		Quick:<a onclick="filterTime(0,0,30)" class="pointer">30分</a>/
+		<a onclick="filterTime(0,1,0)" class="pointer">1時間</a>/
+		<a onclick="filterTime(0,6,0)" class="pointer">6時間</a>/
+		<a onclick="filterTime(0,12,0)" class="pointer">12時間</a>/
+		<a onclick="filterTime(1,0,0)" class="pointer">1日</a>/
+		<a onclick="filterTime(7,0,0)" class="pointer">7日</a>/
+		<a onclick="filterTime(0,0,0)" class="pointer">無期限</a><br>
+		<button class="btn waves-effect" style="width:120px;" onclick="makeNewFilter()" id="add-filter-btn">追加</button><br>
+		<span class="sml">Integrated TL/Plus TLは、公開/ホームのフィルターワードが合算されて適応されます。どちらか一方の指定でも非表示になります。</span>
 	</div>
-	<br><br>
-	<div id="lists"></div>
-	<div id="lists-user"></div>
-	<input type="text" style="width:150px" id="list-add" placeholder="名前">
-		<button class="btn waves-effect" style="width:120px;" onclick="makeNewList()">新規作成</button>
 </div>
-<!--フィルター-->
-<div id="filter-box" class="hide notf-box z-depth-4">
-	<div class="input-field" style="width:calc( 100% - 100px);float:left">
-		<select id="filter-acct-sel" class="acct-sel"></select>
-		<label>アカウントを選択</label>
-	</div>
-	<div style="float:left; padding-top:8px; padding-bottom:28px;">
-		<button class="btn waves-effect indigo" style="width:80px;" onclick="filter()" data-trans-i="filters">
-			一覧
-		</button>
-	</div>
-	<div id="filtered-words"></div>
-	<input type="hidden" id="filter-edit-id">
-	<input type="text" style="width:150px" id="filter-add-word" placeholder="フィルターワード"><br>
-	適応範囲<br>
-	<input type="checkbox" class="filled-in" id="home_filter" value="home" />
-	  <label for="home_filter">ホーム</label>
-	<input type="checkbox" class="filled-in" id="local_filter" value="public" />
-	  <label for="local_filter">ローカル</label>
-	<input type="checkbox" class="filled-in" id="notf_filter" value="notifications" />
-	  <label for="notf_filter">通知</label>
-	<input type="checkbox" class="filled-in" id="conv_filter" value="thread" />
-	  <label for="conv_filter">会話</label><br>
-	  オプション<br>
-	<input type="checkbox" class="filled-in" id="wholeword_filter" value="1" />
-	  <label for="wholeword_filter">単語マッチ</label><br>
-	<span class="sml">非ラテン系の文字列では「単語マッチ」は推奨されません。</span><br>
-	<input type="checkbox" class="filled-in" id="except_filter" value="1" />
-	  <label for="except_filter">除外</label><br>
-	<span class="sml">「除外」時マッチしたトゥートは非可逆的に除外され、削除後も閲覧できません。</span><br>
-	有効期限(あと)<span class="sml">未指定(または0分)で「無制限」になります。<b>仕様上数値の正確性を保証できません。</b></span><br><br>
-	<input type="number" style="width:50px" id="days_filter" placeholder="d" value="0">日
-	<input type="number" style="width:50px" id="hours_filter" placeholder="h" value="0">時間
-	<input type="number" style="width:50px" id="mins_filter" placeholder="m" value="0">分
-	<button class="btn waves-effect" style="width:120px;" onclick="makeNewFilter()" id="add-filter-btn">追加</button><br>
-	<span class="sml">Integrated TL/Plus TLは、公開/ホームのフィルターワードが合算されて適応されます。どちらか一方の指定でも非表示になります。</span>
+		</div>
+		<a onclick="about()" class="nex waves-effect">
+				<i class="material-icons" style="font-size: 1rem;">info</i>このソフトについて
+		</a>&nbsp;|&nbsp;
+		<a onclick="bottomReverse()" class="nex waves-effect">
+				<i class="material-icons" style="font-size: 1rem;">swap_horiz</i>トゥートボタンの左右入れ替え
+		</a>
 </div>
 <div id="main">
 <!--TLのTL-->
 <div id="timeline-container">
-	<h3>Welcome to TheDesk</h3><br><a href="acct.html">アカウントを追加</a>するか下の<i class="material-icons">add</i>ボタンよりカラムを追加してください。
+	<div id="something-wrong">
+		<div>内部エラーです。再読込して治らない場合は初期化(全データ削除)をしてください。(事前に設定をエクスポートしておくことをおすすめします。)</div>
+	</div>
 </div>
 </div>
 </div>
@@ -757,52 +796,23 @@ var tlid=0;
 								<button id="posttgl" class="btn waves-effect indigo" style="width: 100%;height: 2.5rem;line-height: 0;margin: 0;">
 									<i class="material-icons" style="position: relative; top: 5px; font-size: 1.5rem; text-align: center; margin-right: 10px;">edit</i>トゥート
 								</button>
-        </div>
+				</div>
         <div class="leftside reverse" id="group">
-            <div class="btnsgroup"><span class="grouptitle">Columns:</span>
-                <a onclick="addToggle()" class="nex waves-effect" data-trans-i="add" id="add-tgl">
-                    <i class="material-icons nex" title="カラム追加" data-trans-title="column_add">add</i>
-                </a>
-                <a onclick="sortToggle()" class="nex waves-effect">
-                    <i class="material-icons nex big-icon" title="カラム一覧/並べ替え" data-trans-title="sort">sort</i>
-                </a>
-            </div>
-            <div class="btnsgroup"><span class="grouptitle">Accounts:</span>
-                <a href="acct.html" class="nex waves-effect">
-                    <i class="material-icons nex big-icon" title="アカウントマネージャー(Ctrl+Shift+M)" data-trans-title="manager">account_circle</i>
-                </a>
-                <a onclick="srcToggle()" class="nex waves-effect" id="src-tgl">
-                    <i class="material-icons" title="検索" data-trans-title="src">search</i>
-                </a>
-                <a onclick="listToggle()" class="nex waves-effect" id="list-tgl">
-                    <i class="material-icons" title="リスト" data-trans-title="list">view_headline</i>
-                </a>
-                <a onclick="filterToggle()" class="nex waves-effect" id="filter-tgl">
-                    <i class="material-icons" title="フィルター" data-trans-title="filter">filter_list</i>
-                </a>
-            </div>
-			<div class="btnsgroup"><span class="grouptitle">Preferences:</span>
-				<a onclick="bottomReverse()" class="nex waves-effect">
-                    <i class="material-icons nex" title="トゥートバーの左右入れ替え" data-trans-title="reverse">swap_horiz</i>
-                </a>
-                <a href="setting.html" class="nex waves-effect">
-                    <i class="material-icons nex" title="設定(Ctrl+Shift+S)" data-trans-title="setting">settings</i>
-                </a>
-                <a href="index.html" class="nex mize waves-effect">
-                    <i class="material-icons nex" title="スーパーリロード(F5/⌘+R)" data-trans-title="reload">refresh</i>
-                </a>
-                <a onclick="nano()" class="nex waves-effect">
-                    <i class="material-icons" title="最小のマストドン。TheDesk Nano" data-trans-title="nano_desp">remove_from_queue</i>
-                </a>
-                <a onclick="window.open('https://astarte.thedesk.top');" class="setting nex waves-effect" target="_blank" id="ranking-btn" style="display:none;">
-                    <i class="material-icons nex" title="アスタルテランキング">timeline</i>
-				</a>
-				<a href="https://docs.thedesk.top" class="setting nex waves-effect" target="_blank">
-                    <i class="material-icons nex" title="ヘルプ">help_outline</i>
-				</a>
-            </div>
-        </div>
-    </div>
+						<div class="btnsgroup">
+							<a href="acct.html" class="nex waves-effect">
+                    <i class="material-icons nex big-icon" title="アカウントマネージャー(Ctrl+Shift+M)">account_circle</i>
+              </a>
+							<a href="setting.html" class="nex waves-effect">
+									<i class="material-icons nex" title="設定(Ctrl+Shift+S)">settings</i>
+							</a>
+							<a onclick="nano()" class="nex waves-effect">
+									<i class="material-icons" title="最小のマストドン。TheDesk Nano" data-trans-title="nano_desp">remove_from_queue</i>
+							</a>
+							<a onclick="menu()" class="nex waves-effect" id="list-tgl">
+									<i class="material-icons" title="リスト">apps</i>
+							</a>
+						</div>
+    </div></div>
     <div>
 		<div id="tips-menu">
 			<div class="btnsgroup" style="height:34px"><span class="grouptitle">Tips:</span>
@@ -858,6 +868,7 @@ var tlid=0;
 <script type="text/javascript" src="../../js/tl/speech.js"></script>
 <script type="text/javascript" src="../../js/ui/post-box.js"></script>
 <script type="text/javascript" src="../../js/ui/layout.js"></script>
+<script type="text/javascript" src="../../js/post/emoji.js"></script>
 <script type="text/javascript" src="../../js/login/instance.js"></script>
 <script type="text/javascript" src="../../js/login/login.js"></script>
 <script type="text/javascript" src="../../js/ui/img.js"></script>
@@ -871,7 +882,6 @@ var tlid=0;
 <script type="text/javascript" src="../../js/post/img.js"></script>
 <script type="text/javascript" src="../../js/post/status.js"></script>
 <script type="text/javascript" src="../../js/post/misskeystatus.js"></script>
-<script type="text/javascript" src="../../js/post/emoji.js"></script>
 <script type="text/javascript" src="../../js/post/suggest.js"></script>
 <script type="text/javascript" src="../../js/post/bb-md.js"></script>
 <script type="text/javascript" src="../../js/userdata/showOnTL.js"></script>
@@ -879,4 +889,5 @@ var tlid=0;
 <script type="text/javascript" src="../../js/userdata/prof-edit.js"></script>
 <script type="text/javascript" src="../../js/emoji/emojipack.js"></script>
 <script type="text/javascript" src="../../js/emoji/default-emoji.js"></script>
-<script type="text/javascript" src="../../js/platform/end.js"></script>
+<script type="text/javascript" src="../../js/platform/end.js"></script>
+<script type="text/javascript" src="../../js/ui/menu.js"></script>

app/view/ja/setting.html

@@ -1,5 +1,6 @@
 <!doctype html>
 <html lang="ja">
+
 <head>
 	<title>Settings - TheDesk</title>
 	<!--
@@ -17,493 +18,424 @@
 	<link href='../../css/font-awesome.css' rel='stylesheet' type='text/css'>
 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans:300" rel="stylesheet">
 	<meta charset="utf-8">
-	<style>input{max-height:50px!important} .pcr-result{height:1rem !important;}</style>
+	<style>
+		input {
+			max-height: 50px !important
+		}
+
+		.pcr-result {
+			height: 1rem !important;
+		}
+	</style>
 </head>
+
 <body id="mainView" style="overflow-y:scroll">
-<script type="text/javascript" src="../../js/common/jquery.js"></script>
-<script type="text/javascript" src="../../js/platform/first.js"></script>
-<script type="text/javascript" src="../../js/common/materialize.js"></script>
-<script type="text/javascript" src="../../js/lang/lang.ja.js"></script>
-<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
+	<script type="text/javascript" src="../../js/common/jquery.js"></script>
+	<script type="text/javascript" src="../../js/platform/first.js"></script>
+	<script type="text/javascript" src="../../js/common/materialize.js"></script>
+	<script type="text/javascript" src="../../js/lang/lang.ja.js"></script>
+	<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
+	<script src="../../node_modules/vue/dist/vue.min.js"></script>
+	<script type="text/javascript" src="setting.vue.js"></script>
 
-<h4>設定</h4>
-<ul class="collapsible" data-collapsible="accordion">
-	<li>
-	<div class="collapsible-header">
-			<i class="material-icons">desktop_windows</i>環境設定
-	</div>
-	<div class="collapsible-body">
-		<h5>言語</h5>
-		To translate with Crowdin, you have to login Crowdin and restart TheDesk when login is finished.<br>
-		<a href="../ja/setting.html" onclick="changelang('ja')">日本語(Japanese)</a>/<a href="../en/setting.html" onclick="changelang('en')">English</a>/<a href="../ps/setting.html" onclick="changelang('ps')">Crowdin web translate</a>/
-		<h5>設定のインポートとエクスポート</h5>
-		<button onclick="exportSettings()" class="btn waves-effect lime darken-3" style="width:100%; max-width:200px;">エクスポート</button>
-		<button onclick="importSettings()" class="btn waves-effect cyan darken-3" style="width:100%; max-width:200px;">インポート</button>
-		<br>
-		<h5>新規通知のポップアップお知らせの表示秒数</h5>0に設定すると表示されません
-		<br>
-		<input type="text" style="width:50px" id="popup">秒
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">設定</button>
-		<br>
-		<h5>ネイティブ通知設定</h5>
-		Portableバージョンでは表示できません。<br><a onclick="notftest()" class="pointer">通知テスト</a>
-		<br>
-		<input class="with-gap" onchange="settings()" name="notf" type="radio" id="ntf_yes" value="yes" />
-		<label for="ntf_yes">はい</label>
-		<input class="with-gap" onchange="settings()" name="notf" type="radio" id="ntf_no" value="no" />
-		<label for="ntf_no">いいえ</label>
-		<br>
-		<h5>マルチカラムの最低横幅</h5>画面全体の横幅÷コラム数がこの値を超えた時、横スクロールとなります。
-		<br>
-		<input type="text" style="width:50px" id="width">px以上
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">設定</button>
-		<br>
-		<h5>TweetDeckの限定の最低横幅</h5>
-		<input type="text" style="width:50px" id="fixwidth">px以上
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">設定</button>
-		<br>
-		<h5>フォント</h5>
-		「選択」を押してフォントを選んでください。<br>
-		<button class="btn waves-effect" style="width:100px;" onclick="font()">選択</button><br>
-		<div id="fonts" class="hide" style="overflow-y:scroll; width:300px; height:500px;"></div>
-		<br>
-		<input type="text" style="width:150px" id="font">
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">設定</button>
-		<br>
-		<h5>フォントサイズ</h5>
-		<span style="font-size:15px">15px(絶対指定)</span>
-		<br>
-		<input type="text" style="width:50px" id="size">px 
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">設定</button><br>
-		<h5>デフォルトの保存先</h5>
-		画像ダウンロードやスクリーンショットに影響します。<br>
-		<button class="btn waves-effect" style="width:100px;" onclick="savefolder()">変更</button>
-		<br>
-	</div>
-	</li>
-	<li>
-	<div class="collapsible-header">
-			<i class="material-icons">color_lens</i>テーマの設定
-	</div>
-	<div class="collapsible-body">
-		<h4>テーマの選択</h4>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="black" value="black" />
-		<label for="black">Black</label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="white" value="white" />
-		<label for="white">White</label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo" value="indigo" />
-		<label for="indigo">Indigo<span class="imas hide">(エンドレスナイト)</span></label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="brown" value="brown" />
-		<label for="brown">Brown<span class="imas hide">(ビタースイート・タイム)</span></label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="green" value="green" />
-		<label for="green">Green<span class="imas hide">(ユースフルロマンス)</span></label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom" value="custom" />
-		<label for="custom">Custom</label>
-		<div style="width:300px" id="sel-selector">
-			<select id="custom-sel-sel" class="custom-sel" onchange="customSel()"></select>
-		</div>
-		<h4>カスタムテーマの作成・編集</h4>
-		<div style="width:300px" id="edit-selector" data-add="新規作成">
-			<select id="custom-edit-sel" class="custom-sel" onchange="custom()">
-				<option value="add_new">新規作成</option>
-			</select>
-		</div>
-		<h5>名前</h5>
-		<input type="text" style="width:300px" id="custom_name" placeholder="名前...">
-		<h5>説明</h5>
-		<div class="input-field"><textarea style="width:300px" id="custom_desc" class="materialize-textarea" placeholder="説明..."></textarea></div>
-		<h5>色の系統</h5>
-		<input class="with-gap" name="derection" type="radio" id="dark" value="dark" checked="true" />
-		<label for="dark">Dark</label>
-		<input class="with-gap" name="derection" type="radio" id="light" value="light" />
-		<label for="light">Light</label>
-		<div id="pickers">
-		<div>
-			<h5>Primary</h5>補助要素に使われる背景色
-			<div id="color-picker0-wrap"><div class="color-picker" id="color-picker0"></div></div>
-			<input type="hidden" id="color-picker0_value">
-		</div>
-		<div>
-			<h5>Secondary</h5>全体の背景色など
-			<div id="color-picker1-wrap"><div class="color-picker" id="color-picker1"></div></div>
-			<input type="hidden" id="color-picker1_value">
-		</div>
-		<div>
-			<h5>Texts</h5>テキストの色
-			<div id="color-picker2-wrap"><div class="color-picker" id="color-picker2"></div></div>
-			<input type="hidden" id="color-picker2_value">
-		</div>
-		<div>
-			<h5>Accent</h5>ブーストの背景色など
-			<div id="color-picker3-wrap"><div class="color-picker" id="color-picker3"></div></div>
-			<input type="hidden" id="color-picker3_value">
-		</div>
-		</div>
-		<button class="btn-large waves-effect" onclick="customComp()">変更</button>&nbsp;<button class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">削除</button><br><br>
-		<input type="text" style="width:300px" id="custom_json" class="materialize-textarea" placeholder="JSON style" readonly><br>
-		このコードは他のTheDeskなどとシェアできます。このコードをMiASに貼ることはご遠慮ください。詳細:<a href="https://thedesk.top/mias.html" target="_blank">テーマ互換性</a>
-		<h4>カスタムテーマのインポート</h4>
-		<a href="https://assets.msky.cafe/" target="_blank">MiAS</a>上の80を超えるテーマを張り付けることもできます。<br>
-		<input type="text" style="width:300px" id="custom_import" class="materialize-textarea" placeholder="JSON/JSON5 style">
-		<button class="btn waves-effect" onclick="customImp()">インポート</button><br>
-	</li>
-	<li>
-	<div class="collapsible-header">
-			<i class="material-icons">reorder</i>タイムラインの設定
-	</div>
-	<div class="collapsible-body">
-		<h5>時間表記設定</h5>相対時間の例:"1分前","3日前"
-		<br>絶対時間の例"23:25:21","2017年12月30日 23:59:00"
-		<br>混合表示は、当日のトゥートのみ相対、それ以外は絶対で表示 
-		<br>
-		<input class="with-gap" onchange="settings()" onchange="settings()" name="time" type="radio" id="relative" value="relative" />
-		<label for="relative">相対時間</label>
-		<input class="with-gap" onchange="settings()" name="time" type="radio" id="absolute" value="absolute" />
-		<label for="absolute">絶対時間</label>
-		<input class="with-gap" onchange="settings()" name="time" type="radio" id="double" value="double" />
-		<label for="double">両方表示</label>
-		<input class="with-gap" onchange="settings()" name="time" type="radio" id="medium" value="medium" />
-		<label for="medium">混合表示</label>
-		<h5>独自ロケールを使用</h5>対応サーバーではそのサーバーにあわせた言語表示ができます。
-		<br>
-		<input class="with-gap" onchange="settings()" name="ul" type="radio" id="ul_yes" value="yes" />
-		<label for="ul_yes">はい</label>
-		<input class="with-gap" onchange="settings()" name="ul" type="radio" id="ul_no" value="no" />
-		<label for="ul_no">いいえ</label>
-		<br>
-		<h5>非表示設定の画像(NSFW)を隠す</h5>きつめのぼかしがかかります。
-		<br>
-		<input class="with-gap" onchange="settings()" name="nsfw" type="radio" id="n_yes" value="yes" />
-		<label for="n_yes">はい</label>
-		<input class="with-gap" onchange="settings()" name="nsfw" type="radio" id="n_no" value="no" />
-		<label for="n_no">いいえ</label>
-		<br>
-		<h5>非表示設定のテキスト(CW)を隠す</h5>
-		<input class="with-gap" onchange="settings()" name="cw" type="radio" id="c_yes" value="yes" />
-		<label for="c_yes">はい</label>
-		<input class="with-gap" onchange="settings()" name="cw" type="radio" id="c_no" value="no" />
-		<label for="c_no">いいえ</label>
-		<br>
-		<h5>リプライ数表示</h5>
-		<input class="with-gap" onchange="settings()" name="rp" type="radio" id="rp_hidden" value="hidden" />
-		<label for="rp_hidden">2以上のとき1+と表示</label>
-		<input class="with-gap" onchange="settings()" name="rp" type="radio" id="rp_all" value="all" />
-		<label for="rp_all">完全に表示</label>
-		<br>
-		<h5>アイコンのアニメーションを再生する</h5>
-		<input class="with-gap" onchange="settings()" name="gif" type="radio" id="g_yes" value="yes" />
-		<label for="g_yes">はい</label>
-		<input class="with-gap" onchange="settings()" name="gif" type="radio" id="g_no" value="no" />
-		<label for="g_no">いいえ</label>
-		<br>
-		<h5>タグタイムラインの表示範囲</h5>
-		<input class="with-gap" onchange="settings()" name="tag" type="radio" id="t_all" value="all" />
-		<label for="t_all">接続しているサーバー</label>
-		<input class="with-gap" onchange="settings()" name="tag" type="radio" id="t_local" value="local" />
-		<label for="t_local">検索対象のサーバーのみ</label>
-		<br>
-		<h5>viaを表示する</h5>
-		<input class="with-gap" onchange="settings()" name="via" type="radio" id="via_yes" value="yes" />
-		<label for="via_yes">はい</label>
-		<input class="with-gap" onchange="settings()" name="via" type="radio" id="via_hide" value="hide" />
-		<label for="via_hide">いいえ</label>
-		<br>
-		<h5>アクションメニューを非表示</h5>
-		「マウスオーバー」はすこし鬱陶しいと思うかもしれません。<br>
-		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_yes" value="yes" />
-		<label for="mov_yes">マウスオーバーで表示</label>
-		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_click" value="click" />
-		<label for="mov_click">クリックで表示</label>
-		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_no" value="no" />
-		<label for="mov_no">いいえ</label>
-		<br>
-		<h5>通知を開いているとき、通知新着お知らせを表示する</h5>
-		<input class="with-gap" onchange="settings()" name="notfm" type="radio" id="notfm_yes" value="yes" />
-		<label for="notfm_yes">はい</label>
-		<input class="with-gap" onchange="settings()" name="notfm" type="radio" id="notfm_no" value="no" />
-		<label for="notfm_no">いいえ</label>
-		<br>
-		<h5>指定行数以上を折りたたむ</h5>
-		5文字以下のトゥートは折りたたみません。また、折りたたみ時は改行が描画されません。改行のみを行数とカウントします。
-		<br>
-		<input type="text" style="width:50px" id="sentence">行 以上 または
-		<input type="text" style="width:50px" id="letters">文字 以上
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">設定</button>
-		<br>
-		<h5>画像の高さ
-        </h5>
-		<input type="text" style="width:50px" id="img-height">px
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">設定</button>
-		<br>
-		<h5>#InstanceTickerを使う</h5>
-		トゥートした人の所属サーバーをわかりやすく彩ります(自サーバー以外のトゥート向け)。<a href="https://cdn.weep.me/mastodon/">#InstanceTickerについて</a> Copyright 2018 weepjp, kyori19.<br>
-		<input class="with-gap" onchange="settings()" name="ticker" type="radio" id="ticker_yes" value="yes" />
-		<label for="ticker_yes">はい</label>
-		<input class="with-gap" onchange="settings()" name="ticker" type="radio" id="ticker_no" value="no" />
-		<label for="ticker_no">いいえ</label>
-		<br>
-		<h5>タイムラインのアニメーション</h5>
-		<input class="with-gap" onchange="settings()" name="anime" type="radio" id="anime_yes" value="yes" />
-		<label for="anime_yes">はい</label>
-		<input class="with-gap" onchange="settings()" name="anime" type="radio" id="anime_no" value="no" />
-		<label for="anime_no">いいえ</label>
-	</div>
-	</li>
-	<li>
-	<div class="collapsible-header">
-			<i class="material-icons">send</i>投稿設定
-	</div>
-	<div class="collapsible-body">
-		<h5>デフォルトの警告文</h5>
-		<input type="text" style="width:150px" id="cw-text">
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">設定</button>
-		<br>
-		<h5>長文投稿時に警告</h5>
-		下で指定した以上のトゥートを投稿するときにCWするかのダイアログを表示します。
-		<br>
-		<input type="text" style="width:50px" id="cw_sentence">行 以上 または
-		<input type="text" style="width:50px" id="cw_letters">文字 以上
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">設定</button>
-		<br>
-		<h5>標準でCWを設定</h5>
-		<input class="with-gap" onchange="settings()" name="cws" type="radio" id="cws_yes" value="yes" />
-		<label for="cws_yes">はい</label>
-		<input class="with-gap" onchange="settings()" name="cws" type="radio" id="cws_no" value="no" />
-		<label for="cws_no">いいえ
-		</label>
-		<br>
-		<h5>デフォルトの公開設定</h5>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="public" value="public" />
-		<label for="public">公開(Public)</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="unlisted" value="unlisted" />
-		<label for="unlisted">未収載(Unlisted)</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="private" value="private" />
-		<label for="private">非公開(Private)</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="direct" value="direct" />
-		<label for="direct">ダイレクト(Direct)</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="memory" value="memory" />
-		<label for="memory">前回の投稿設定を記憶する(サーバーごとに記憶されます)</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="server" value="server" />
-		<label for="server">マストドンアカウント設定の既定値</label>
-		<br>
-		<h5>画像投稿設定</h5>
-		<input class="with-gap" onchange="settings()" name="img" type="radio" id="i_url" value="url" />
-		<label for="i_url">画像を投稿し、画像のURLを最後に表示</label>
-		<input class="with-gap" onchange="settings()" name="img" type="radio" id="i_no-act" value="no-act" />
-		<label for="i_no-act">画像を投稿するがURLは表示しない</label>
-		<br>
-		<input class="with-gap" onchange="settings()" name="img" type="radio" id="i_inline" value="inline" disabled />
-		<label for="i_inline">現在利用できません。 
-			<!--画像を投稿し、インラインで表示(Markdownに対応したインスタンスのみ。マルチアカウント環境では非推奨。)-->
-		</label>
-		<br>
-		<h5>投稿ボックスの挙動</h5>
-		<input class="with-gap" onchange="settings()" name="box" type="radio" id="bx_yes" value="yes" />
-		<label for="bx_yes">たたむ</label>
-		<input class="with-gap" onchange="settings()" name="box" type="radio" id="bx_no" value="no" />
-		<label for="bx_no">投稿後も隠さない
-		</label>
-		<input class="with-gap" onchange="settings()" name="box" type="radio" id="bx_abs" value="absolute" />
-		<label for="bx_abs">枠外クリックで閉じない(起動時に展開)</label>
-		<br>
-		<h5>引用形式</h5>
-		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_simple" value="simple" />
-		<label for="q_simple">URLのみ</label>
-		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_mention" value="mention" />
-		<label for="q_mention">URLとアカウント名(相手に通知)</label>
-		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_full" value="full" />
-		<label for="q_full">本文・URL・アカウント名
-		</label>
-		<br>
-		<h5>投稿後や起動時のアカウント</h5>
-		メインアカウントはアカウント設定で指定できます。投稿以外のアカウント選択にも影響します。<br>
-		<input class="with-gap" onchange="settings()" name="main" type="radio" id="mn_remain" value="remain" />
-		<label for="mn_remain">最後に使用したアカウント</label>
-		<input class="with-gap" onchange="settings()" name="main" type="radio" id="mn_main" value="main" />
-		<label for="mn_main">メインアカウント</label>
-		</label>
-		<h5>セカンダリートゥートボタン</h5>
-		公開範囲の変更とトゥートを一発でできます。<br>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-nothing" value="nothing" />
-		<label for="sec-nothing">表示しない</label>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-public" value="public" />
-		<label for="sec-public">公開(Public)</label>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-unlisted" value="unlisted" />
-		<label for="sec-unlisted">未収載(Unlisted)</label>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-private" value="private" />
-		<label for="sec-private">非公開(Private)</label>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-direct" value="direct" />
-		<label for="sec-direct">ダイレクト(Direct)</label>
-		<input class="with-gap hide kirishima" onchange="settings()" name="sec" type="radio" id="sec-local" value="local" />
-		<label for="sec-local">ローカル限定</label><span class="hide kirishima">非対応インスタンスでは「未収載」になります。</span>
-		<br>
-	</div>
-	</li>
-	<li>
-		<div class="collapsible-header">
-				<i class="material-icons">keyboard</i>キーボードショートカットの設定
-		</div>
-		<div class="collapsible-body">
-			<h5>簡単文字入力</h5>
-			絵文字やタグ、&gt;BTなどを登録しておくとすぐに入力できます。<br>
-			Ctrl+Shift+1:<input type="text" style="width:150px" id="oks-1">
-			<button onclick="oks(1)" class="btn waves-effect" style="width:100px;">設定</button><br><br>
-			Ctrl+Shift+2:<input type="text" style="width:150px" id="oks-2">
-			<button onclick="oks(2)" class="btn waves-effect" style="width:100px;">設定</button><br><br>
-			Ctrl+Shift+3:<input type="text" style="width:150px" id="oks-3">
-			<button onclick="oks(3)" class="btn waves-effect" style="width:100px;">設定</button><br><br>
+	<h4>設定</h4>
+	<ul class="collapsible" data-collapsible="accordion">
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">desktop_windows</i>環境設定
+			</div>
+			<div class="collapsible-body">
+				<h5>言語</h5>
+				To translate with Crowdin, you have to login Crowdin and restart TheDesk when login is finished.<br>
+				<a href="../ja/setting.html" onclick="changelang('ja')">日本語(Japanese)</a>/<a href="../en/setting.html" onclick="changelang('en')">English</a>/<a href="../ps/setting.html" onclick="changelang('ps')">Crowdin web translate</a>/
+				<h5>設定のインポートとエクスポート</h5>
+				<button onclick="exportSettings()" class="btn waves-effect lime darken-3"
+					style="width:100%; max-width:200px;">エクスポート</button>
+				<button onclick="importSettings()" class="btn waves-effect cyan darken-3"
+					style="width:100%; max-width:200px;">インポート</button>
+				<div id="envView">
+					<template v-for="(item, i) in config">
+						<h5>{{item.text.head}}</h5>
+						<template v-if=item.text.desc>
+							<templete v-html=item.text.desc></templete><br>
+						</template>
+						<template v-if="item.id=='notf'"><a onclick="notftest()"
+								class="pointer">通知テスト</a><br></template>
+						<template v-if="item.checkbox">
+							<template v-for="(check, j) in item.text.checkbox">
+								<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
+									type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
+								<label v-bind:for="item.id+check.value">{{check.text}}</label>
+							</template>
+						</template>
+						<template v-else>
+							<template v-if="item.doubleText">
+								<template v-for="(textbox, j) in item.data">
+									<input type="text" v-model="textbox.setValue" type="radio" v-bind:id="textbox.id"
+										v-bind:style="{ width: textbox.width+'px'}" />{{textbox.text.after}}
+								</template>
+							</template>
+							<template v-else>
+								<input type="text" v-model="item.setValue" type="radio" v-bind:id="item.id"
+									v-bind:style="{ width: item.width+'px'}" />{{item.text.after}}
+							</template>
+							<button class="btn waves-effect" style="width:100px;"
+								v-on:click="complete(i)">変更</button>
+						</template><br>
+					</template>
+				</div>
+				<h5>フォント</h5>
+				「選択」を押してフォントを選んでください。<br>
+				<button class="btn waves-effect" style="width:100px;" onclick="font()">選択</button><br>
+				<div id="fonts" class="hide" style="overflow-y:scroll; width:300px; height:500px;"></div>
+				<br>
+				<input type="text" style="width:150px" id="font">
+				<button class="btn waves-effect" style="width:100px;" onclick="settings()">設定</button>
+				<br>
+				<h5>デフォルトの保存先</h5>
+				画像ダウンロードやスクリーンショットに影響します。<br>
+				<button class="btn waves-effect" style="width:100px;" onclick="savefolder()">変更</button>
+				<br>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">color_lens</i>テーマの設定
+			</div>
+			<div class="collapsible-body">
+				<h4>テーマの選択</h4>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="black" value="black" />
+				<label for="black">Black</label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="white" value="white" />
+				<label for="white">White</label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo" value="indigo" />
+				<label for="indigo">Indigo<span class="imas hide">(エンドレスナイト)</span></label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="brown" value="brown" />
+				<label for="brown">Brown<span class="imas hide">(ビタースイート・タイム)</span></label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="green" value="green" />
+				<label for="green">Green<span class="imas hide">(ユースフルロマンス)</span></label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom" value="custom" />
+				<label for="custom">Custom</label>
+				<div style="width:300px" id="sel-selector">
+					<select id="custom-sel-sel" class="custom-sel" onchange="customSel()"></select>
+				</div>
+				<h4>カスタムテーマの作成・編集</h4>
+				<div style="width:300px" id="edit-selector" data-add="新規作成">
+					<select id="custom-edit-sel" class="custom-sel" onchange="custom()">
+						<option value="add_new">新規作成</option>
+					</select>
+				</div>
+				<h5>名前</h5>
+				<input type="text" style="width:300px" id="custom_name" placeholder="名前...">
+				<h5>説明</h5>
+				<div class="input-field"><textarea style="width:300px" id="custom_desc" class="materialize-textarea"
+						placeholder="説明..."></textarea></div>
+				<h5>色の系統</h5>
+				<input class="with-gap" name="derection" type="radio" id="dark" value="dark" checked="true" />
+				<label for="dark">Dark</label>
+				<input class="with-gap" name="derection" type="radio" id="light" value="light" />
+				<label for="light">Light</label>
+				<div id="pickers">
+					<div>
+						<h5>Primary</h5>補助要素に使われる背景色
+						<div id="color-picker0-wrap">
+							<div class="color-picker" id="color-picker0"></div>
+						</div>
+						<input type="hidden" id="color-picker0_value">
+					</div>
+					<div>
+						<h5>Secondary</h5>全体の背景色など
+						<div id="color-picker1-wrap">
+							<div class="color-picker" id="color-picker1"></div>
+						</div>
+						<input type="hidden" id="color-picker1_value">
+					</div>
+					<div>
+						<h5>Texts</h5>テキストの色
+						<div id="color-picker2-wrap">
+							<div class="color-picker" id="color-picker2"></div>
+						</div>
+						<input type="hidden" id="color-picker2_value">
+					</div>
+					<div>
+						<h5>Accent</h5>ブーストの背景色など
+						<div id="color-picker3-wrap">
+							<div class="color-picker" id="color-picker3"></div>
+						</div>
+						<input type="hidden" id="color-picker3_value">
+					</div>
+				</div>
+				<button class="btn-large waves-effect" onclick="customComp()">変更</button>&nbsp;<button
+					class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">削除</button><br><br>
+				<input type="text" style="width:300px" id="custom_json" class="materialize-textarea"
+					placeholder="JSON style" readonly><br>
+				このコードは他のTheDeskなどとシェアできます。このコードをMiASに貼ることはご遠慮ください。詳細:<a href="https://thedesk.top/mias.html" target="_blank">テーマ互換性</a>
+				<h4>カスタムテーマのインポート</h4>
+				<a href="https://assets.msky.cafe/" target="_blank">MiAS</a>上の80を超えるテーマを張り付けることもできます。<br>
+				<input type="text" style="width:300px" id="custom_import" class="materialize-textarea"
+					placeholder="JSON/JSON5 style">
+				<button class="btn waves-effect" onclick="customImp()">インポート</button><br>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">reorder</i>タイムラインの設定
+			</div>
+			<div class="collapsible-body">
+				<div id="tlView">
+					<template v-for="(item, i) in config">
+						<h5>{{item.text.head}}</h5>
+						<template v-if=item.text.desc>
+							<templete v-html=item.text.desc></templete><br>
+						</template>
+						<template v-if="item.checkbox">
+							<template v-for="(check, j) in item.text.checkbox">
+								<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
+									type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
+								<label v-bind:for="item.id+check.value">{{check.text}}</label>
+							</template>
+						</template>
+						<template v-else>
+							<template v-if="item.doubleText">
+								<template v-for="(textbox, j) in item.data">
+									<input type="text" v-model="textbox.setValue" type="radio" v-bind:id="textbox.id"
+										v-bind:style="{ width: textbox.width+'px'}" />{{textbox.text.after}}
+								</template>
+							</template>
+							<template v-else>
+								<input type="text" v-model="item.setValue" type="radio" v-bind:id="item.id"
+									v-bind:style="{ width: item.width+'px'}" />{{item.text.after}}
+							</template>
+							<button class="btn waves-effect" style="width:100px;"
+								v-on:click="complete(i)">変更</button>
+						</template><br>
+					</template>
+				</div>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">send</i>投稿設定
+			</div>
+			<div class="collapsible-body">
+				<div id="postView">
+					<template v-for="(item, i) in config">
+						<h5>{{item.text.head}}</h5>
+						<template v-if=item.text.desc>
+							<templete v-html=item.text.desc></templete><br>
+						</template>
+						<template v-if="item.checkbox">
+							<template v-for="(check, j) in item.text.checkbox">
+								<template v-if="!check.kirishima || (check.kirishima && kirishima)">
+									<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
+										type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
+									<label v-bind:for="item.id+check.value">{{check.text}}</label>
+									<span v-if="check.kirishimaText">{{check.kirishimaText}}</span>
+								</template>
+							</template>
+						</template>
+						<template v-else>
+							<template v-if="item.doubleText">
+								<template v-for="(textbox, j) in item.data">
+									<input type="text" v-model="textbox.setValue" type="radio" v-bind:id="textbox.id"
+										v-bind:style="{ width: textbox.width+'px'}" />{{textbox.text.after}}
+								</template>
+							</template>
+							<template v-else>
+								<input type="text" v-model="item.setValue" type="radio" v-bind:id="item.id"
+									v-bind:style="{ width: item.width+'px'}" />{{item.text.after}}
+							</template>
+							<button class="btn waves-effect" style="width:100px;"
+								v-on:click="complete(i)">変更</button>
+						</template><br>
+					</template>
+				</div>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">Fkeyboard</i>キーボードショートカットの設定
+			</div>
+			<div class="collapsible-body">
+				<h5>簡単文字入力</h5>
+				絵文字やタグ、&gt;BTなどを登録しておくとすぐに入力できます。<br>
+				Ctrl+Shift+1:<input type="text" style="width:150px" id="oks-1">
+				<button onclick="oks(1)" class="btn waves-effect" style="width:100px;">設定</button><br><br>
+				Ctrl+Shift+2:<input type="text" style="width:150px" id="oks-2">
+				<button onclick="oks(2)" class="btn waves-effect" style="width:100px;">設定</button><br><br>
+				Ctrl+Shift+3:<input type="text" style="width:150px" id="oks-3">
+				<button onclick="oks(3)" class="btn waves-effect" style="width:100px;">設定</button><br><br>
 
-		</div>
-	</li>
-	<li>
-		<div class="collapsible-header">
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
 				<i class="material-icons">bookmark</i>ミュート・強調の設定
-		</div>
-		<div class="collapsible-body">
-			<h5>クライアントミュート</h5>
-			<div id="mute-cli"></div>
-			<h5>クライアント強調</h5>
-			各トゥートのクライアントをクリックすると設定できます。
-			<h5>ワードミュート</h5>
-			Enterで確定<br>
-			<div class="chips" id="wordmute" style="background-color:gray;"></div>
-			<button onclick="wordmuteSave()" class="btn waves-effect" style="width:100px;">設定</button>
-			<h5>ワード強調</h5>
-			Enterで確定<br>
-			<div class="chips" id="wordemp" style="background-color:gray;"></div>
-			<button onclick="wordempSave()" class="btn waves-effect" style="width:100px;">設定</button>
-			<h5>ユーザー強調</h5>
-			各ユーザーのデータ表示画面で設定できます。
-			<span class="emphasized">　強調色(テーマによって異なります。)　</span>
-		</div>
-	</li>
-	<li>
-		<div class="collapsible-header">
-			<i class="fa fa-spotify"></i>SpotifyとNowPlayingの設定
-		</div>
-		<div class="collapsible-body">
-			<h5>NowPlayingのソース(Windows)</h5>
-			macOSやLinuxでは動作しません。AIMPとiTunes以外未検証です。<br>foobar2000, MusicBee,J. River Media Center, Media JukeboxはCADを、Last.fm Client, TTPlayer, OpenPandora, ZuneはWLMを選んでください。<br>ただし、foobar2000は<a href="http://poiru.github.com/foo-cad/">foo_cad plugin</a>が必要です。MusicBeeもCADを有効にする必要があります。<br>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="aimp" value="AIMP" />
-			<label for="aimp">AIMP</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="itunes" value="ITUNES" />
-			<label for="itunes">iTunes</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="npmm" value="MEDIAMONKEY" />
-			<label for="npmm">MediaMonkey</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="winamp" value="WINAMP" />
-			<label for="winamp">Winamp</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wmp" value="WMP" />
-			<label for="wmp">WMP</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wlm" value="WLM" />
-			<label for="wlm">WLM</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="cad" value="CAD" />
-			<label for="cad">CAD</label><br><br>
-			<i class="material-icons" style="font-size:24px;">music_note</i>ボタンから簡単にNowPlayingができます。<br>
-			<h5>アカウントの連携</h5>
-			APIの性質上，thedesk.topへアクセスします。<br>
-			<div id="spotify-code-show" class="hide"><input type="text" id="spotify-code"><button onclick="spotifyAuth()" class="btn waves-effect" style="width:100px;">設定</button></div>
-			<a onclick="spotifyConnect()" class="btn waves-effect nex" style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-enable"><i class="fa fa-spotify left"></i>接続</a>
-			<a onclick="spotifyDisconnect()" class="btn waves-effect nex disabled" style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-disable"><i class="fa fa-spotify left"></i>切断</a>
-			<h5>テンプレートの編集</h5>
-			以下を編集してテンプレートを変更できます。<br>
-			<textarea id="np-temp" class="materialize-textarea" data-length="500">#NowPlaying {song} / {album} / {artist}
+			</div>
+			<div class="collapsible-body">
+				<h5>クライアントミュート</h5>
+				<div id="mute-cli"></div>
+				<h5>クライアント強調</h5>
+				各トゥートのクライアントをクリックすると設定できます。
+				<h5>ワードミュート</h5>
+				Enterで確定<br>
+				<div class="chips" id="wordmute" style="background-color:gray;"></div>
+				<button onclick="wordmuteSave()" class="btn waves-effect" style="width:100px;">設定</button>
+				<h5>ワード強調</h5>
+				Enterで確定<br>
+				<div class="chips" id="wordemp" style="background-color:gray;"></div>
+				<button onclick="wordempSave()" class="btn waves-effect" style="width:100px;">設定</button>
+				<h5>ユーザー強調</h5>
+				各ユーザーのデータ表示画面で設定できます。
+				<span class="emphasized">　強調色(テーマによって異なります。)　</span>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="fa fa-spotify"></i>SpotifyとNowPlayingの設定
+			</div>
+			<div class="collapsible-body">
+				<h5>NowPlayingのソース(Windows)</h5>
+				macOSやLinuxでは動作しません。AIMPとiTunes以外未検証です。<br>foobar2000, MusicBee,J. River Media Center, Media JukeboxはCADを、Last.fm Client, TTPlayer, OpenPandora, ZuneはWLMを選んでください。<br>ただし、foobar2000は<a href="http://poiru.github.com/foo-cad/">foo_cad plugin</a>が必要です。MusicBeeもCADを有効にする必要があります。<br>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="aimp" value="AIMP" />
+				<label for="aimp">AIMP</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="itunes" value="ITUNES" />
+				<label for="itunes">iTunes</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="npmm" value="MEDIAMONKEY" />
+				<label for="npmm">MediaMonkey</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="winamp" value="WINAMP" />
+				<label for="winamp">Winamp</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wmp" value="WMP" />
+				<label for="wmp">WMP</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wlm" value="WLM" />
+				<label for="wlm">WLM</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="cad" value="CAD" />
+				<label for="cad">CAD</label><br><br>
+				<i class="material-icons" style="font-size:24px;">music_note</i>ボタンから簡単にNowPlayingができます。<br>
+				<h5>アカウントの連携</h5>
+				APIの性質上，thedesk.topへアクセスします。<br>
+				<div id="spotify-code-show" class="hide"><input type="text" id="spotify-code"><button
+						onclick="spotifyAuth()" class="btn waves-effect" style="width:100px;">設定</button></div>
+				<a onclick="spotifyConnect()" class="btn waves-effect nex"
+					style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-enable"><i
+						class="fa fa-spotify left"></i>接続</a>
+				<a onclick="spotifyDisconnect()" class="btn waves-effect nex disabled"
+					style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-disable"><i
+						class="fa fa-spotify left"></i>切断</a>
+				<h5>テンプレートの編集</h5>
+				以下を編集してテンプレートを変更できます。<br>
+				<textarea id="np-temp" class="materialize-textarea" data-length="500">#NowPlaying {song} / {album} / {artist}
 {url}</textarea><br>
 				Spotify:{song}:曲名/{album}:アルバム名/{artist}:アーティスト名/{url}:各曲のSpotifyのURL<br>
 				macOS:{song}:曲名/{album}:アルバム名/{artist}:アーティスト名/作曲家{composer}/サンプルレート{hz}/ビットレート{bitRate}/ジャンル{genre}<br>
 				Windows:{song}:曲名/{album}:アルバム名/{artist}:アーティスト名<br>
-				<span class="imas hide">CINDERELLA NowPlaying(imastodon.net限定)では作曲家{composer}/作詞家{lyricist}/BPM{bpm}が有効です。<br>
-                    CINDERELLA NowPlayingはimastodon.netにログインしているとき、トゥート欄に「//」を入力し、その後に曲名を入れることで可能です。</span><br>
-			<button onclick="spotifySave()" class="btn waves-effect" style="width:100px;">設定</button>
-			<h5>アルバムアートワークを添付する(Spotify/Windows)</h5>
-			<span class="imas hide">この設定はCINDERELLA NowPlaying(imastodon.net限定)にも適用されます。</span><br>
-			<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_yes" value="yes" />
-			<label for="awk_yes">はい</label>
-			<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_no" value="no" />
-			<label for="awk_no">いいえ</label>
-			<br>
-		</div>
-	</li>
-	<li>
-		<div class="collapsible-header">
-			<i class="material-icons">hearing</i>読み上げの設定
-		</div>
-		<div class="collapsible-body">
-			<h5>読み上げの速さ</h5>
-			1-100まで、デフォルトは10。<br>
-			<p class="range-field"><input type="range" id="voicespeed" min="1" max="100" value="10" style="width:500px; max-width:100%"/></p>
-			<h5>読み上げの高さ</h5>
-			0-100まで、デフォルトは50。(大きくなるほど高い)<br>
-			<p class="range-field"><input type="range" id="voicepitch" min="0" max="100" value="50" style="width:500px; max-width:100%"/></p>
-			<h5>読み上げの音量</h5>
-			0-100まで、デフォルトは100。<br>
-			<p class="range-field"><input type="range" id="voicevol" min="0" max="100" value="100" style="width:500px; max-width:100%"/></p>
-			<h5>テスト</h5>
-			<input type="text" style="width:350px" id="voicetxt" value="これはテスト音声です。TheDeskはオープンソースのPC向けマストドンクライアントです。マルチサーバーやマルチカラムに対応しています。">
-			<button class="btn waves-effect blue" style="width:150px;" onclick="voicePlay()" id="testplay">再生/停止</button><br>
-			<br>
-			<button class="btn waves-effect" style="width:100px;" onclick="voiceSettings()">設定</button>
-		</div>
-	</li>
-</ul>
-<br>
-<a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;"><i class="material-icons left">undo</i>戻る</a>
-<br>
-<br>キーボードショートカット一覧
-<li>Ctrl+1-9:1番目～9番目のTLにスクロール</li>
-<li>N:投稿パネルを開く</li>
-<li>X:投稿パネルを開閉</li>
-<li>Ctrl+Enter:投稿</li>
-<li>Ctrl+Enter+Shift:投稿(セカンダリートゥート)</li>
-<li>Ctrl+E:全ての通知を既読にする</li>
-<li>Esc:投稿パネルを消す</li>
-<li>F5:スーパーリロード</li>
-<li>Ctrl+Shift+C:入力内容を消す</li>
-<li>Ctrl+Shift+S:設定</li>
-<li>Ctrl+Shift+M:アカウントマネージャ</li>
-<li>Ctrl+Shift+N:NowPlaying(Spotify)</li>
-<li>Ctrl+Shift+P:現在選択中のプロフィール</li>
-<li>←/→:イメージビューワー起動時に画像切り替え</li>
-<li>マウスホイール:イメージビューワー時に拡大縮小</li>
-<div class="hide kirishima">
-以下Markdownに対応したインスタンスのみ。
-<br>
-<li>Ctrl+B/I/S/U:太字/斜字/取り消し/下線</li>
-<li>Shift+Enter:全角スペースを入れて改行</li>
-<li>Shift+Space:ゼロ幅スペース</li>
-以下アスタルテにログインしている場合のみ 
-<br>
-<li>Ctrl+R: 
-<a href="https://astarte.thedesk.top">アスタルテ暇人ランキング</a>を開く
-</li><br>
-</div>
-<button class="btn waves-effect red" style="width:100%; max-width:500px;" onclick="if(confirm('全てのデータを削除します。この操作は取り消せません。')){ localStorage.clear(); location.href='index.html'; }"><i class="material-icons left">delete</i>初期化</button><br><br>
-<button class="btn waves-effect indigo" onclick="about()" style="width:100%; max-width:500px;"><i class="material-icons left">info</i>このソフトについて</button>
-<a href="https://thedesk.top" class="btn waves-effect deep-purple lighten-2" style="width:100%; max-width:500px;"><i class="material-icons left">web</i>公式HP</a>
-<a href="https://enty.jp/Cutls" class="btn waves-effect purple lighten-2" style="width:100%; max-width:500px;"><i class="material-icons left">trending_up</i>支援(Enty)</a>
-<a href="https://docs.thedesk.top" class="btn waves-effect blue darken-2" style="width:100%; max-width:500px;"><i class="material-icons left">list</i>ヘルプ/Docs(Constructing)</a>
-<a href="https://github.com/cutls/TheDesk" class="btn waves-effect black lighten-2" style="width:100%; max-width:500px;"><i class="fa fa-github left"></i>GitHub</a>
-<a href="index.html?mode=user&code=Cutls@kirishima.cloud" class="btn waves-effect blue lighten-2" style="width:100%; max-width:500px;"><img src="../../img/desk_full.svg" class="left" width="25" style="padding-top:5px;">Developer: Cutls@kirishima.cloud</a>
-<a class="btn waves-effect red lighten-2" href="https://osushi.love/Cutls_P" target="_blank" style="width:100%; max-width:500px;"><img src="../../img/sushi.svg" class="left" width="25" style="padding-top:5px;">寿司を投げる</a>
-<br>
-Kyash<br>
-			<img src="../../img/kyash.png" width="100"><br>
-<a onclick="localStorage.removeItem('new-ver-skip'); location.href='index.html';" class="pointer">アップデートを確認</a><br>
-<a href="oss.html">OSS License(オープンソースライセンス)</a><br>
-<span style="font-family:Open Sans;">Copyright &copy; TheDesk 2018 All Rights Reserved. 
-	Under <a href="https://github.com/cutls/TheDesk/blob/master/LICENSE">GNU General Public License v3.0</a> and <a href="https://thedesk.top/tos.html">Terms of Use</a>/<a href="https://thedesk.top/priv.html">Privacy Policy</a>
-	<br>Developer: Cutls P( 
-	<a href="index.html?mode=user&code=Cutls@kirishima.cloud">@Cutls@kirishima.cloud</a>)
+				<button onclick="spotifySave()" class="btn waves-effect" style="width:100px;">設定</button>
+				<h5>アルバムアートワークを添付する(Spotify/Windows)</h5>
+				<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_yes" value="yes" />
+				<label for="awk_yes">はい</label>
+				<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_no" value="no" />
+				<label for="awk_no">いいえ</label>
+				<br>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">hearing</i>読み上げの設定
+			</div>
+			<div class="collapsible-body">
+				<h5>読み上げの速さ</h5>
+				1-100まで、デフォルトは10。<br>
+				<p class="range-field"><input type="range" id="voicespeed" min="1" max="100" value="10"
+						style="width:500px; max-width:100%" /></p>
+				<h5>読み上げの高さ</h5>
+				0-100まで、デフォルトは50。(大きくなるほど高い)<br>
+				<p class="range-field"><input type="range" id="voicepitch" min="0" max="100" value="50"
+						style="width:500px; max-width:100%" /></p>
+				<h5>読み上げの音量</h5>
+				0-100まで、デフォルトは100。<br>
+				<p class="range-field"><input type="range" id="voicevol" min="0" max="100" value="100"
+						style="width:500px; max-width:100%" /></p>
+				<h5>テスト</h5>
+				<input type="text" style="width:350px" id="voicetxt" value="これはテスト音声です。TheDeskはオープンソースのPC向けマストドンクライアントです。マルチサーバーやマルチカラムに対応しています。">
+				<button class="btn waves-effect blue" style="width:150px;" onclick="voicePlay()"
+					id="testplay">再生/停止</button><br>
+				<br>
+				<button class="btn waves-effect" style="width:100px;" onclick="voiceSettings()">設定</button>
+			</div>
+		</li>
+	</ul>
 	<br>
-</span><br>
-TheDeskおよびCutls Pは<a href="https://donken.org/">被災地支援のためのマストドン研究会</a>をログイン機能提供等の形で応援しています。<br>
-タグタイムラインを開く:<a href="index.html?mode=tag&code=被災地支援のためのマストドン研究会">#被災地支援のためのマストドン研究会</a><br>
-<script type="text/javascript" src="../../js/common/about.js"></script>
-<script type="text/javascript" src="../../js/platform/end.js"></script>
-<script type="text/javascript" src="../../js/login/logout.js"></script>
-<script type="text/javascript" src="../../js/lang/lang.js"></script>
-<script type="text/javascript" src="../../js/ui/spotify.js"></script>
-<script type="text/javascript" src="../../js/tl/speech.js"></script>
-<script type="text/javascript" src="../../js/platform/pickr.js"></script>
-<script type="text/javascript" src="../../js/ui/settings.js"></script>
-<script type="text/javascript" src="../../js/ui/theme.js"></script>
-<script type="text/javascript" src="../../js/tl/date.js"></script>
+	<a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;"><i
+			class="material-icons left">undo</i>戻る</a>
+	<br>
+	<br>キーボードショートカット一覧
+	<li>Ctrl+1-9:1番目～9番目のTLにスクロール</li>
+	<li>N:投稿パネルを開く</li>
+	<li>X:投稿パネルを開閉</li>
+	<li>Ctrl+Enter:投稿</li>
+	<li>Ctrl+Enter+Shift:投稿(セカンダリートゥート)</li>
+	<li>Alt+Enter:セカンダリートゥートボタン</li>
+	<li>Ctrl+E:全ての通知を既読にする</li>
+	<li>Esc:投稿パネルを消す</li>
+	<li>F5:スーパーリロード</li>
+	<li>Ctrl+Shift+C:入力内容を消す</li>
+	<li>Ctrl+Shift+S:設定</li>
+	<li>Ctrl+Shift+M:アカウントマネージャ</li>
+	<li>Ctrl+Shift+N:NowPlaying(Spotify)</li>
+	<li>Ctrl+Shift+P:現在選択中のプロフィール</li>
+	<li>←/→:イメージビューワー起動時に画像切り替え</li>
+	<li>マウスホイール:イメージビューワー時に拡大縮小</li>
+	<div class="hide kirishima">
+		以下Markdownに対応したインスタンスのみ。
+		<br>
+		<li>Ctrl+B/I/S/U:太字/斜字/取り消し/下線</li>
+		<li>Shift+Enter:全角スペースを入れて改行</li>
+		<li>Shift+Space:ゼロ幅スペース</li>
+		以下アスタルテにログインしている場合のみ
+		<br>
+		<li>Ctrl+R:
+			<a href="https://astarte.thedesk.top">アスタルテ暇人ランキング</a>を開く
+		</li><br>
+	</div>
+	<button class="btn waves-effect red" style="width:100%; max-width:500px;"
+		onclick="if(confirm('全てのデータを削除します。この操作は取り消せません。')){ localStorage.clear(); location.href='index.html'; }"><i
+			class="material-icons left">delete</i>初期化</button><br><br>
+	<button class="btn waves-effect indigo" onclick="about()" style="width:100%; max-width:500px;"><i
+			class="material-icons left">info</i>このソフトについて</button>
+	<a href="https://thedesk.top" class="btn waves-effect deep-purple lighten-2" style="width:100%; max-width:500px;"><i
+			class="material-icons left">web</i>公式HP</a>
+	<a href="https://enty.jp/Cutls" class="btn waves-effect purple lighten-2" style="width:100%; max-width:500px;"><i
+			class="material-icons left">trending_up</i>支援(Enty)</a>
+	<a href="https://www.pixiv.net/fanbox/creator/28105985" class="btn waves-effect red lighten-2"
+		style="width:100%; max-width:500px;"><i class="material-icons left">trending_up</i>支援(Pixiv FANBOX)</a>
+	<a href="https://docs.thedesk.top" class="btn waves-effect blue darken-2" style="width:100%; max-width:500px;"><i
+			class="material-icons left">list</i>ヘルプ/Docs(Constructing)</a>
+	<a href="https://github.com/cutls/TheDesk" class="btn waves-effect black lighten-2"
+		style="width:100%; max-width:500px;"><i class="fa fa-github left"></i>GitHub</a>
+	<a href="index.html?mode=user&code=Cutls@kirishima.cloud" class="btn waves-effect blue lighten-2"
+		style="width:100%; max-width:500px;"><img src="../../img/desk_full.svg" class="left" width="25"
+			style="padding-top:5px;">Developer: Cutls@kirishima.cloud</a>
+	<br>
+	Kyash<br>
+	<img src="../../img/kyash.png" width="100"><br>
+	<a onclick="localStorage.removeItem('new-ver-skip'); location.href='index.html';"
+		class="pointer">アップデートを確認</a><br>
+	<a href="oss.html">OSS License(オープンソースライセンス)</a><br>
+	<span style="font-family:Open Sans;">Copyright &copy; TheDesk 2018 All Rights Reserved.
+		Under <a href="https://github.com/cutls/TheDesk/blob/master/LICENSE">GNU General Public License v3.0</a> and <a
+			href="https://thedesk.top/tos.html">Terms of Use</a>/<a href="https://thedesk.top/priv.html">Privacy
+			Policy</a>
+		<br>Developer: Cutls P(
+		<a href="index.html?mode=user&code=Cutls@kirishima.cloud">@Cutls@kirishima.cloud</a>)
+		<br>
+	</span><br>
+	TheDeskおよびCutls Pは<a href="https://donken.org/">被災地支援のためのマストドン研究会</a>をログイン機能提供等の形で応援しています。<br>
+	タグタイムラインを開く:<a href="index.html?mode=tag&code=被災地支援のためのマストドン研究会">#被災地支援のためのマストドン研究会</a><br>
+	<script type="text/javascript" src="../../js/common/about.js"></script>
+	<script type="text/javascript" src="../../js/platform/end.js"></script>
+	<script type="text/javascript" src="../../js/login/logout.js"></script>
+	<script type="text/javascript" src="../../js/ui/spotify.js"></script>
+	<script type="text/javascript" src="../../js/tl/speech.js"></script>
+	<script type="text/javascript" src="../../js/platform/pickr.js"></script>
+	<script type="text/javascript" src="../../js/ui/settings.js"></script>
+	<script type="text/javascript" src="../../js/ui/theme.js"></script>
+	<script type="text/javascript" src="../../js/tl/date.js"></script>

app/view/ja/setting.vue.js

@@ -0,0 +1,491 @@
+var yesno=[
+    {
+        text:"はい",
+        value:"yes"
+    },{
+        text:"いいえ",
+        value:"no"
+    }
+];
+var envConstruction=[
+    {
+        id:"popup",
+        storage:"popup",
+        checkbox:false,
+        doubleText:false,
+        setValue:0,
+        width:50,
+        text:{
+            head:"新規通知のポップアップお知らせの表示秒数",
+            desc:'0に設定すると表示されません',
+            after:"秒"
+        }
+    },{
+        id:"notf",
+        storage:"nativenotf",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"ネイティブ通知設定",
+            desc:"Portableバージョンでは表示できません。",
+            checkbox:yesno
+        }
+    },{
+        id:"width",
+        storage:"width",
+        checkbox:false,
+        doubleText:false,
+        width:50,
+        setValue:300,
+        text:{
+            head:"マルチカラムの最低横幅",
+            desc:"画面全体の横幅÷コラム数がこの値を超えた時、横スクロールとなります。",
+            after:"px 以上"
+        }
+    },{
+        id:"fixwidth",
+        storage:"fixwidth",
+        checkbox:false,
+        doubleText:false,
+        setValue:300,
+        width:50,
+        text:{
+            head:"TweetDeckの限定の最低横幅",
+            desc:"",
+            after:"px 以上"
+        }
+    },{
+        id:"size",
+        storage:"size",
+        checkbox:false,
+        doubleText:false,
+        width:50,
+        setValue:13,
+        text:{
+            head:"フォントサイズ",
+            desc:'<span style="font-size:13px">13px(絶対指定)</span>',
+            after:"px"
+        }
+    },{
+        id:"ha",
+        storage:"ha",
+        checkbox:true,
+        setValue:false,
+        text:{
+            head:"ハードウェアアクセラレーションの無効化",
+            desc:"表示(特に設定画面)が乱れる場合に「はい」を選択してください。自動で再起動します。",
+            checkbox:[
+                {
+                    text:"はい",
+                    value:"true"
+                },{
+                    text:"いいえ",
+                    value:"false"
+                }
+            ]
+        }
+    }
+];
+var tlConstruction=[
+    {
+        id:"time",
+        storage:"datetype",
+        checkbox:true,
+        setValue:"absolute",
+        text:{
+            head:"時間表記設定",
+            desc:'相対時間の例:"1分前","3日前"<br>絶対時間の例"23:25:21","2017年12月30日 23:59:00"<br>混合表示は、当日のトゥートのみ相対、それ以外は絶対で表示 ',
+            checkbox:[
+                {
+                    text:"相対時間",
+                    value:"relative"
+                },{
+                    text:"絶対時間",
+                    value:"absolute"
+                },{
+                    text:"両方表示",
+                    value:"double"
+                },{
+                    text:"混合表示",
+                    value:"medium"
+                }
+
+            ]
+        }
+    },{
+        id:"ul",
+        storage:"locale",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"独自ロケールを使用",
+            desc:"対応サーバーではそのサーバーにあわせた言語表示ができます。",
+            checkbox:yesno
+        }
+    },{
+        id:"nsfw",
+        storage:"nsfw",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"非表示設定の画像(NSFW)を隠す",
+            desc:"きつめのぼかしがかかります。",
+            checkbox:yesno
+        }
+    },{
+        id:"cw",
+        storage:"cw",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"非表示設定のテキスト(CW)を隠す",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        id:"rp",
+        storage:"replyct",
+        checkbox:true,
+        setValue:"hidden",
+        text:{
+            head:"リプライ数表示",
+            desc:"",
+            checkbox:[
+                {
+                    text:"2以上のとき1+と表示",
+                    value:"hidden"
+                },{
+                    text:"2以上のとき1+と表示",
+                    value:"all"
+                }
+
+            ]
+        }
+    },{
+        id:"gif",
+        storage:"gif",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"アイコンのアニメーションを再生する",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        id:"tag",
+        storage:"tag-range",
+        checkbox:true,
+        setValue:"local",
+        text:{
+            head:"タグタイムラインの表示範囲",
+            desc:"",
+            checkbox:[
+                {
+                    text:"接続しているサーバー",
+                    value:"all"
+                },{
+                    text:"検索対象のサーバーのみ",
+                    value:"local"
+                }
+
+            ]
+        }
+    },{
+        id:"via",
+        storage:"viashow",
+        checkbox:true,
+        setValue:"no",
+        text:{
+            head:"viaを表示する",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        id:"mov",
+        storage:"mouseover",
+        checkbox:true,
+        setValue:"no",
+        text:{
+            head:"アクションメニューを非表示",
+            desc:"「マウスオーバー」はすこし鬱陶しいと思うかもしれません。",
+            checkbox:[
+                {
+                    text:"マウスオーバーで表示",
+                    value:"yes"
+                },{
+                    text:"クリックで表示",
+                    value:"click"
+                },{
+                    text:"いいえ",
+                    value:"no"
+                }
+
+            ]
+        }
+    },{
+        id:"notfm",
+        storage:"setasread",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"通知を開いているとき、通知新着お知らせを表示する",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        checkbox:false,
+        doubleText:true,
+        data:[
+            {
+                id:"sentence",
+                storage:"sentence",
+                width:50,
+                setValue:500,
+                text:{after:"行 以上 または"}
+            },{
+                id:"letters",
+                storage:"letters",
+                width:50,
+                setValue:7000,
+                text:{after:"文字 以上"}
+            }
+        ],
+        text:{
+            head:"指定行数以上を折りたたむ",
+            desc:"5文字以下のトゥートは折りたたみません。また、折りたたみ時は改行が描画されません。改行のみを行数とカウントします。",
+        }
+    },{
+        id:"img-height",
+        storage:"img-height",
+        checkbox:false,
+        doubleText:false,
+        width:80,
+        setValue:200,
+        text:{
+            head:"画像の高さ",
+            desc:'オプション:「full」と指定すると全ての画像をクロップしません。',
+            after:"px"
+        }
+    },{
+        id:"ticker",
+        storage:"ticker_ok",
+        checkbox:true,
+        setValue:"no",
+        text:{
+            head:"#InstanceTickerを使う",
+            desc:'トゥートした人の所属サーバーをわかりやすく彩ります(自サーバー以外のトゥート向け)。<a href="https://cdn.weep.me/mastodon/">#InstanceTickerについて</a> Copyright 2018 weepjp, kyori19.',
+            checkbox:yesno
+        }
+    },{
+        id:"anime",
+        storage:"animation",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"タイムラインのアニメーション",
+            desc:"",
+            checkbox:yesno
+        }
+    }
+];
+var postConstruction=[
+    {
+        id:"cw-text",
+        storage:"cw-text",
+        checkbox:false,
+        doubleText:false,
+        width:150,
+        setValue:"",
+        text:{
+            head:"デフォルトの警告文",
+            desc:"",
+            after:""
+        }
+    },{
+        checkbox:false,
+        doubleText:true,
+        data:[
+            {
+                id:"cw_sentence",
+                storage:"cw_sentence",
+                width:50,
+                setValue:500,
+                text:{after:"行 以上 または"}
+            },{
+                id:"cw_letters",
+                storage:"cw_letters",
+                width:50,
+                setValue:7000,
+                text:{after:"文字 以上"}
+            }
+        ],
+        text:{
+            head:"長文投稿時に警告",
+            desc:"下で指定した以上のトゥートを投稿するときにCWするかのダイアログを表示します。",
+        }
+    },{
+        id:"cws",
+        storage:"always-cw",
+        checkbox:true,
+        setValue:"no",
+        text:{
+            head:"標準でCWを設定",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        id:"vis",
+        storage:"vis",
+        checkbox:true,
+        setValue:"public",
+        text:{
+            head:"デフォルトの公開設定",
+            desc:"",
+            checkbox:[
+                {
+                    text:"公開(Public)",
+                    value:"public"
+                },{
+                    text:"未収載(Unlisted)",
+                    value:"unlisted"
+                },{
+                    text:"非公開(Private)",
+                    value:"private"
+                },{
+                    text:"ダイレクト(Direct)",
+                    value:"direct"
+                },{
+                    text:"前回の投稿設定を記憶する(サーバーごとに記憶されます)",
+                    value:"memory"
+                },{
+                    text:"マストドンアカウント設定の既定値",
+                    value:"useapi"
+                }
+            ]
+        }
+    },{
+        id:"img",
+        storage:"img",
+        checkbox:true,
+        setValue:"no-act",
+        text:{
+            head:"画像投稿設定",
+            desc:"",
+            checkbox:[
+                {
+                    text:"画像を投稿し、画像のURLを最後に表示",
+                    value:"url"
+                },{
+                    text:"画像を投稿するがURLは表示しない",
+                    value:"no-act"
+                }
+            ]
+        }
+    },{
+        id:"box",
+        storage:"box",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"投稿ボックスの挙動",
+            desc:"",
+            checkbox:[
+                {
+                    text:"たたむ",
+                    value:"yes"
+                },{
+                    text:"投稿後も隠さない",
+                    value:"no"
+                },{
+                    text:"枠外クリックで閉じない(起動時に展開)",
+                    value:"absolute"
+                }
+            ]
+        }
+    },{
+        id:"quote",
+        storage:"quote",
+        checkbox:true,
+        setValue:"nothing",
+        text:{
+            head:"引用形式",
+            desc:"",
+            checkbox:[
+                {
+                    text:"URLのみ",
+                    value:"simple"
+                },{
+                    text:"URLとアカウント名(相手に通知)",
+                    value:"mention"
+                },{
+                    text:"本文・URL・アカウント名",
+                    value:"full"
+                },{
+                    text:"使わない(TL上にボタンも表示されません)",
+                    value:"nothing"
+                }
+            ]
+        }
+    },{
+        id:"main",
+        storage:"mainuse",
+        checkbox:true,
+        setValue:"remain",
+        text:{
+            head:"投稿後や起動時のアカウント",
+            desc:"メインアカウントはアカウント設定で指定できます。投稿以外のアカウント選択にも影響します。",
+            checkbox:[
+                {
+                    text:"最後に使用したアカウント",
+                    value:"remain"
+                },{
+                    text:"メインアカウント",
+                    value:"main"
+                }
+            ]
+        }
+    },{
+        id:"sec",
+        storage:"sec",
+        checkbox:true,
+        setValue:"public",
+        text:{
+            head:"セカンダリートゥートボタン",
+            desc:"",
+            checkbox:[
+                {
+                    text:"表示しない",
+                    value:"nothing"
+                },{
+                    text:"公開(Public)",
+                    value:"public"
+                },{
+                    text:"未収載(Unlisted)",
+                    value:"unlisted"
+                },{
+                    text:"非公開(Private)",
+                    value:"private"
+                },{
+                    text:"ダイレクト(Direct)",
+                    value:"direct"
+                },{
+                    text:"ローカル限定",
+                    value:"local",
+                    kirishima:true,
+                    kirishimaText:"非対応インスタンスでは「未収載」になります。"
+                }
+            ]
+        }
+    },{
+        id:"zero",
+        storage:"emoji-zero-width",
+        checkbox:true,
+        setValue:"normal",
+        setValue:"no",
+        text:{
+            head:"絵文字にゼロ幅スペースを使う",
+            desc:"",
+            checkbox:yesno
+        }
+    }
+]

app/view/ja/update.html

@@ -62,9 +62,6 @@ a,button,input,label,i{
 #prog{
     font-size:200%;
 }
-.linux, .mac{
-    display:none;
-}
 </style>
 <script type="text/javascript" src="../../js/common/jquery.js"></script>
 <script type="text/javascript" src="../../js/platform/first.js"></script>
@@ -78,11 +75,10 @@ a,button,input,label,i{
         <p>アップデートがあります</p>
         <span id="now"></span>→<b id="ver"></b><br>
         <span id="det"></span><br>
-        <button class="waves-effect btn windows" onclick="update('install')" style="margin-left:15px;">インストーラー版(推奨)</button>
-        <button class="waves-effect btn windows" onclick="update('portable')" style="margin-left:15px;">ポータブル版</button>
-        <span class="linux">snap版はSnapcraft等よりDLしてください。<br></span>
-        <button class="waves-effect btn linux" onclick="update('linux')" style="margin-left:15px;">開始</button>
-        <button class="waves-effect btn mac" onclick="update('mac')" style="margin-left:15px;">開始</button>
+        <button class="waves-effect btn windows hide" onclick="update('install')" style="margin-left:15px;">インストーラー版(推奨)</button>
+        <button class="waves-effect btn windows hide" onclick="update('portable')" style="margin-left:15px;">ポータブル版</button>
+        <button class="waves-effect btn linux hide" onclick="update('linux')" style="margin-left:15px;">開始</button>
+        <button class="waves-effect btn mac hide" onclick="update('mac')" style="margin-left:15px;">開始</button>
         <br>
         問題が発生しますか？<br><a href="https://thedesk.top">公式HP</a>からダウンロードをお試しください。
     </div>
@@ -184,12 +180,12 @@ function verck(){
     var remote=electron.remote;
     var platform=remote.process.platform;
     var bit=process.arch;
-	if(platform=="linux"){
-        $('.windows').hide()
-        $('.linux').show()
-	}else if(platform=="mac"){
-        $('.windows').hide()
-        $('.mac').show()
+	if(platform=="win32"){
+        $('.windows').removeClass("hide")
+	}else if(platform=="linux"){
+        $('.linux').removeClass("hide")
+	}else if(platform=="darwin"){
+        $('.mac').removeClass("hide")
 	}
 	var start="https://thedesk.top/ver.json";
 	fetch(start, {

app/view/make/acct.sample.html

@@ -18,6 +18,14 @@ body,html{overflow-y: scroll;}
 .colorsel{ display:flex; }
 .card .colorsel div:not(.exc){width:20px;height:20px;}
 .card .colorsel div.exc{width:40px;height:20px;}
+.first{
+      display:flex;
+      justify-content: center;
+      align-items:center
+}
+.first .hide-first{
+      display:none;
+}
 </style>
 <meta charset="utf-8">
 {{comment-start}}
@@ -39,14 +47,17 @@ body,html{overflow-y: scroll;}
 <script type="text/javascript" src="../../js/ui/tips.js"></script>
 <script type="text/javascript" src="../../js/common/time.js"></script>
 <script type="text/javascript" src="../../js/common/modal.js"></script>
-<a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;">{{back}}</a><br>
-<h5>{{list}}</h5>
-<div id="acct-list"></div>
-<div class="divider"></div>
+<div class="hide-first">
+      <a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;">{{back}}</a><br>
+      <h5>{{list}}</h5>
+      <div id="acct-list"></div>
+      <div class="divider"></div>
+</div>
+<div>
 <h5>{{add}}</h5><br>
 <div id="add">
 <div class="row">
-      <div class="col s6">
+      <div class="col s8">
             <input type="text" id="url" style="width:70%" placeholder="ex)mstdn.jp">
             <div id="ins-suggest"></div>
             {{codesetupwarn}}<br>
@@ -56,7 +67,7 @@ body,html{overflow-y: scroll;}
                   <label for="misskey">{{thisismisskey}}</label><br>
             <button class="btn waves-effect" onclick="instance()">Login</button><br>
       </div>
-      <div class="col s6">
+      <div class="col s4">
             <span style="font-family:Open Sans;">Supports</span>
             <div id="support" class="collection transparent"></div>
       </div>
@@ -73,6 +84,8 @@ body,html{overflow-y: scroll;}
                   <input type="text" id="misskey-key" placeholder="{{codepaste}}">
                   <button class="btn waves-effect" onclick="misskeyLogin()">Auth</button><br>
             </div>
+      </div>
+<div class="hide-first">
 <h5>{{mainacct}}</h5>
 <div class="input-field" style="width:300px"><span data-trans="your_acct">{{selacct}}</span>
       <br>
@@ -91,6 +104,7 @@ Administered by:<a id="ins-admin"></a><br>
 {{users}}:<span id="ins-user"></span>{{users}}<br>
 {{safety}}:<span id="ins-per"></span>%<br>
 {{ver}}:<span id="ins-ver"></span>@<span id="ins-upd"></span><br>
+</div>
 <script type="text/javascript" src="../../js/ui/theme.js"></script>
 <script type="text/javascript" src="../../js/platform/end.js"></script>
 <script type="text/javascript" src="../../js/common/sha256.js"></script>

app/view/make/index.sample.html

@@ -37,10 +37,8 @@ var ver="{{versionLetter}}";
 //GitHubに上げるときはindex.htmlをちゃんとする。(index.start.html)
 //var ver="beta";
 //WinstoreではバージョンCK・言語・Misskeyトークンの機能が排除
-var winstore=false;
 var acct_id=0;
 var tlid=0;
-  verck(ver,winstore);
  </script>
 <textarea id="copy" style="top:-100px; position:fixed;"></textarea>
 <div id="tl">
@@ -54,7 +52,7 @@ var tlid=0;
 </div>
 </div>
 <div id="post-box" class="z-depth-5">
-<div id="post-bar">{{post-new}}</div>
+<div id="post-bar" class="drag-bar"><span id="unreact">{{post-new}}</span><span id="addreact" class="hide">Reaction</span></div>
 <!--トゥートボックス-->
 <div id="left-side">
 <div class="row" style="margin-bottom:0;">
@@ -125,7 +123,6 @@ var tlid=0;
 <span class="sml gray pointer anti-markdown mize">
 <a onclick="mdToggle()">Markdownエディタを表示</a>
 </span>
-<span id="suggest"></span>
 </div>
 <div class="col s12 mize" style="margin-top: 0; display:flex; justify-content: space-between">
 		<i class="waves-effect gray material-icons" id="nsfw" title="{{nsfwDes}}" onclick="nsfw()">visibility_off</i>
@@ -138,7 +135,7 @@ var tlid=0;
 </div>
 <div class="col s12 mize" style="margin-bottom:5px; padding:0;">
 	<div id="taglist"></div>
-<span id="preview" class="mize"></span>
+<div id="preview" class="mize"></div>
 <span class=" sml mize"><span data-trans="reply">{{replyMode}}</span>:
 <span id="rec">{{no}}</span>/<span data-trans="file">{{temp}}</span>:
 <span id="mec">{{nothing}}</span>/<span data-trans="vis">{{vis}}</span>:
@@ -202,11 +199,11 @@ var tlid=0;
 </div>
 </div>
 <div id="right-side">
+<div id="suggest"></div>
 <!--絵文字ピッカー-->
 <div id="emoji" class="hide">
 		<span class="gray sml">{{emojiWarn}}
 			<a onclick="emojiGet('true')" class="pointer">{{refreshEmoji}}</a>
-			<i class="material-icons waves-effect" onclick="emojiToggle()" title="{{closeThisBox}}" data-trans-title="post_box_close">cancel</i>
 		<br>
 		</span>
 		<div id="emoji-list" class="" style="">
@@ -260,12 +257,8 @@ var tlid=0;
 	<div id="poll" class="hide">
 		<select id="poll-sel"  onchange="pollProviderCk()">
 			<option value="nothing">{{pollDdisabled}}</option>
-			<option value="votedon">votedon.</option>
 			<option value="mastodon-poll">Mastodon(2.8~)</option>
 		</select>
-		<div id="votedon" class="poll-provider hide">
-	WIP
-		</div>
 		<div id="mastodon-poll" class="poll-provider hide">
 			<input type="text" class="mastodon-choice" placeholder="{{choice}}1">
 			<input type="text" class="mastodon-choice" placeholder="{{choice}}2">
@@ -308,14 +301,14 @@ var tlid=0;
 		<div class="collapsible-body toot-reset" id="toot-after">
 		</div>
 	</li>
-	<li>
+	<li class="dm-hide">
 		<div class="collapsible-header">
 		<i class="material-icons">people_outline</i>{{beforeLTL}}
 		</div>
 		<div class="collapsible-body toot-reset" id="toot-before">
 		</div>
 	</li>
-	<li>
+	<li class="dm-hide">
 		<div class="collapsible-header">
 		<i class="material-icons">person_outline</i>{{beforeUTL}}
 		</div>
@@ -329,7 +322,7 @@ var tlid=0;
 		<div class="collapsible-body toot-reset" id="toot-fav">
 		</div>
 	</li>
-	<li>
+	<li class="dm-hide">
 		<div class="collapsible-header">
 		<i class="text-darken-3 fa fa-retweet"></i>{{btedPeople}}
 		</div>
@@ -337,6 +330,7 @@ var tlid=0;
 		</div>
 	</li>
 	</ul>
+	<div class="dm-hide">
 	{{useOtherAcct1}}(<i class="fa fa-retweet"></i>/<i class="fa fa-star"></i>{{useOtherAcct2}})<br>
 	<div class="row">
 		<div class="col s6">
@@ -357,11 +351,11 @@ var tlid=0;
 	<div id="toot-after">
 	</div>
 	</div>
+</div>
 	<div class="modal-footer">
-	<a href="#!" class="waves-effect waves-green btn-flat" onclick="brws()">{{openBrowser}}</a>
-	<a href="#!" class="waves-effect waves-green btn-flat" onclick="shot()">{{screenshot}}</a>
-	<a href="#!" class="waves-effect waves-green btn-flat" onclick="cbCopy()">{{copyURL}}</a>
-	<a href="#!" class="waves-effect waves-green btn-flat" onclick="cbCopy('emb')">{{embed}}</a>
+	<a href="#!" class="waves-effect waves-green btn-flat dm-hide" onclick="brws()">{{openBrowser}}</a>
+	<a href="#!" class="waves-effect waves-green btn-flat dm-hide" onclick="cbCopy()">{{copyURL}}</a>
+	<a href="#!" class="waves-effect waves-green btn-flat dm-hide" onclick="cbCopy('emb')">{{embed}}</a>
 	<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">{{close}}</a>
 	</div>
 	</div>
@@ -371,7 +365,7 @@ var tlid=0;
 			<div id="his-data-show">
 			<div class="his-float" id="his-float-data">
 			<div id="his-basic-prof">
-			<img src="../../img/loading.svg" id="his-prof">
+			<img src="../../img/loading.svg" id="his-prof" draggable="false">
 			<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
 			<br>@
 			<span id="his-acct"></span><br>
@@ -524,6 +518,9 @@ var tlid=0;
 			</div>
 			</div>
 			</div>
+			<div class="his-float" id="his-float-blocked">
+				<div>{{blocked}}</div>
+			</div>
 			</div>
 			</div>
 			<div class="modal-footer">
@@ -582,18 +579,28 @@ var tlid=0;
 		<a href="https://thedesk.top" target="_blank">HP</a><br>
 		<a href="https://github.com/cutls/TheDesk" target="_blank">GitHub</a><br>
 		<br>
-			<div id="release-Miria_17-2-0" class="release-do" style="display:none; ">
+			<div id="release-Usamin_18-2-1" class="release-do" style="display:none; ">
 					<a href="https://code.cutls.com/thedesk-log/" target="_blank">開発の経緯</a><br>
 					<a href="https://ja.mstdn.wiki/TheDesk" target="_blank">機能一覧</a><br>
 					Entyでは支援者様限定で様々なTheDeskに関する記事をご覧いただけます。<br>
 					困ったときは、<a href="https://docs.thedesk.top">TheDesk Docs</a>をご覧ください。
-					<h5>Release Note Miria (17.2.0)</h5>
-					カスタムテーマを実装。Misskeyのテーマとの一定の互換性あり。<a href="https://assets.msky.cafe/" target="_blank">MiAS</a>から80を超えるテーマを入手。
-					<a href="https://thedesk.top/mias.html">注意点</a><br>
-					Misskeyのログイン方法変更につき、いちいちDevCenterに行かなくてもよくなりました。<br>
-					日本語でベタ書きしていたダイアログを一部多言語対応に変更。<br>
-					
-					<img class="emoji" draggable="false" alt="⚠" src="https://twemoji.maxcdn.com/2/72x72/26a0.png">TheDeskのMisskeyについての機能追加は終了しています。<br>
+					<h5>Release Note Usamin (18.2.0)</h5>
+					・<b>緊急の脆弱性修正</b>
+					<h5>Release Note Usamin (18.2.0)</h5>
+・tootsearchをひとつのカラムにしてエゴサが捗る<br>
+・イントロダクション(初回起動時)の挙動修正<br>
+・リンクプレビューを最大1行ずつに省略(タイトルと本文)<br>
+・ブロックされたときのプロフィールの動作(Mastodon 2.8~)<br>
+・(Misskey)MFM追加flipやjumpなど<br>
+・(Misskey)リストに対応<br>
+・(Misskey)カスタム絵文字に対応。カスタム絵文字によるリアクションに対応(対応インスタンスに限る)。<br>
+・<b>カスタム絵文字をゼロ幅スペースによる挿入に変更する機能</b><br>
+・一部機能の統廃合とバグの修正<br>
+・best-friends.chatやキュアスタ！、misskey.devをサポートインスタンスに追加
+			</div>
+			<div id="release-en">
+				<h5>Let's make it native!</h5>
+				<a href="https://translate.thedesk.top">Crowdin translation project</a>
 			</div>
 			<br><br>
 			<h3>{{supportme}}</h3>
@@ -601,9 +608,9 @@ var tlid=0;
 			<a class="btn-share btn waves-effect waves-light purple lighten-2" href="https://enty.jp/Cutls" target="_blank">
   				{{EntySupport}}
 			</a>
-			<a class="btn-share btn waves-effect waves-light red lighten-2" href="https://osushi.love/Cutls_P" target="_blank">
-  				{{sendSushi}}
-			</a>
+			<a class="btn-share btn waves-effect waves-light red lighten-2" href="https://www.pixiv.net/fanbox/creator/28105985" target="_blank">
+				{{PixivSupport}}
+		</a>
 			<a class="btn-share btn waves-effect waves-light blue" href="https://www.amazon.co.jp/registry/wishlist/2TV35ZHHJPDSB" target="_blank">
 				{{AWLSupport}}
 			</a>
@@ -623,130 +630,162 @@ var tlid=0;
 		<i class="material-icons pointer" onclick="endPip()">close</i>
 		<div id="pip-content">
 		</div>
-    </div>
-<!--カラム追加-->
-<div id="add-box" class="hide z-depth-4 notf-box">
-<div class="input-field"><span data-trans="your_acct">{{selectAcct}}</span>
-<br>
-<select id="add-acct-sel" class="acct-sel" style="color:black" onchange="addselCk()"></select>
-<label></label>
-</div>
-<div class="input-field">
-<div id="auth">
-<select id="type-sel" style="color:black">
-	<option value="local" data-trans="local">{{local}}</option>
-	<option value="local-media" data-trans="local-media">{{localMedia}}</option>
-	<option value="home" data-trans="home">{{home}}</option>
-	<option value="pub" data-trans="public">{{fed}}</option>
-	<option value="pub-media" data-trans="public-media">{{fedMedia}}</option>
-	<option value="dm" data-trans="dm">{{dm}}</option>
-	<option value="mix" data-trans="integrated">{{integratedTLDes}}</option>
-	<option value="plus" data-trans="plus">{{localPlusDes}}</option>
-	<option value="notf" data-trans="notification">{{notf}}</option>
-</select>
-<label data-trans="show_tl">{{showThisTL}}</label>
-</div>
-<div id="noauth" class="hide">{{showThisTL}}
-	<input id="noauth-url" type="text" class="validate" style="width:calc( 70% - 40px);" placeholder="e.g:mstdn.jp">
-</div>
-<div id="webview-add" class="hide">{{webviewWarn}}
-</div>
-</div>
-<button class="btn waves-effect blue " style="width:calc( 100% - 10px);" onclick="addColumn()" data-trans-i="add">
-	<i class="material-icons left">add</i>{{add}}
-</button>
-<br>
-<br>
-</div>
-<!--検索-->
-<div id="src-box" class="hide notf-box z-depth-4" style="width:500px">
-		<div class="input-field">
-		<select id="src-acct-sel" class="acct-sel" onchange="trend()"></select>
-</div><div class="input-field">
-<i class="material-icons prefix">search</i>
-<input id="src" type="text" class="validate" style="width:calc( 60% - 40px);">
-<label for="src" data-trans="src">{{search}}</label>
-<button class="btn waves-effect indigo" style="width:calc( 40% - 40px);" onclick="src()" data-trans-i="src">
-	<i class="material-icons left">search</i>{{search}}
-</button>
-<br>
-<br>
-</div>
-<div id="search">
-<div id="src-contents">
-</div>
-</div>
-</div>
-<!--並べ替え-->
-<div id="sort-box" class="hide">
-<ul id="sort"></ul>
-<div>
-<button onclick="sort()" class="btn waves-effect nex" style="width:100%; max-width:300px;" data-trans-i="sort">
-	<i class="material-icons left">sort</i>{{sortSet}}
-</button>
-<button onclick="sortToggle()" class="btn waves-effect nex" style="width:100%; max-width:300px;" data-trans-i="close">
-		<i class="material-icons left">close</i>{{close}}
-</button>
-</div>
-</div>
-<!--リスト-->
-<div id="list-box" class="hide notf-box z-depth-4">
-	<div class="input-field" style="width:calc( 100% - 100px);float:left">
-		<select id="list-acct-sel" class="acct-sel"></select>
-		<label>{{selectAcct}}</label>
+		</div>
+<!--menu-->
+<div id="menu" class="z-depth-5" style="display:none">
+		<div id="menu-bar" class="drag-bar"></div>
+		<span class="cancel">
+				<i class="material-icons waves-effect" onclick="menu()" title="{{closeThisBox}}(X)">cancel</i>
+			</span>
+		<div id="menu-wrapper">
+		<div id="left-menu">
+			<div class="waves-effect active" onclick="addColumnMenu()" id="addColumnMenu"><i class="material-icons">add</i><span>{{addColumn}}</span></div>
+			<div class="waves-effect" onclick="sortMenu()" id="sortMenu"><i class="material-icons">sort</i><span>{{sortColumns}}</span></div>
+			<div class="waves-effect" onclick="searchMenu()" id="searchMenu"><i class="material-icons">search</i><span>{{search}}</span></div>
+			<div class="waves-effect" onclick="listMenu()" id="listMenu"><i class="material-icons">view_headline</i><span>{{list}}</span></div>
+			<div class="waves-effect" onclick="filterMenu()" id="filterMenu"><i class="material-icons">filter_list</i><span>{{filter}}</span></div>
+			<div class="waves-effect" onclick="help()"><i class="material-icons">help_outline</i><span>{{help}}</span></div>
+			<div class="waves-effect" onclick="location.href='index.html'"><i class="material-icons">refresh</i><span>{{f5}}</span></div>
+		</div>
+		<div id="right-menu">
+				<!--カラム追加-->
+<div id="add-box" class="hide menu-content">
+	<div class="input-field"><span data-trans="your_acct">{{selectAcct}}</span>
+	<br>
+	<select id="add-acct-sel" class="acct-sel" style="color:black" onchange="addselCk()"></select>
+	<label></label>
 	</div>
-	<div style="float:left; padding-top:8px; padding-bottom:28px;">
-		<button class="btn waves-effect indigo" style="width:80px;" onclick="list()" data-trans-i="lists">
-			{{listLocale}}
-		</button>
+	<div class="input-field">
+	<div id="auth">
+	<input type="hidden" value="local" id="type-sel">
+	{{showThisTL}}
+	<div id="tltype">
+		<div class="type waves-effect active" data-type="local"><div><i class="material-icons">people_outline</i></div><span>{{local}}</span></div>
+		<div class="type waves-effect" data-type="local-media"><div><i class="material-icons">people_outline</i><i class="material-icons sub-icon">perm_media</i></div><span>{{localMedia}}</span></div>
+		<div class="type waves-effect" data-type="home"><div><i class="material-icons">home</i></div><span>{{home}}</span></div>
+		<div class="type waves-effect" data-type="pub"><div><i class="material-icons">language</i></div><span>{{fed}}</span></div>
+		<div class="type waves-effect" data-type="pub-media"><div><i class="material-icons">language</i><i class="material-icons sub-icon">perm_media</i></div><span>{{fedMedia}}</span></div>
+		<div class="type waves-effect" data-type="dm"><div><i class="material-icons">mail_outline</i></div><span>{{dm}}</span></div>
+		<div class="type waves-effect" data-type="mix"><div><i class="material-icons">merge_type</i></div><span>{{integratedTLDes}}</span></div>
+		<div class="type waves-effect" data-type="plus"><div><i class="material-icons">merge_type</i><i class="material-icons sub-icon">reply</i></div><span>{{localPlusDes}}</span></div>
+		<div class="type waves-effect" data-type="notf"><div><i class="material-icons">notifications</i></div><span>{{notf}}</span></div>
+	</div>
+	</div>
+	<div id="noauth" class="hide">{{showThisTL}}
+		<input id="noauth-url" type="text" class="validate" style="width:calc( 70% - 40px);" placeholder="e.g:mstdn.jp">
+	</div>
+	<div id="webview-add" class="hide">{{webviewWarn}}
+	</div>
+	</div>
+	<button class="btn waves-effect blue " style="width:calc( 100% - 10px);" onclick="addColumn()" data-trans-i="add">
+		<i class="material-icons left">add</i>{{add}}
+	</button>
+	<br>
+	<br>
+	</div>
+	<!--検索-->
+	<div id="src-box" class="hide menu-content">
+			<div class="input-field">
+			<select id="src-acct-sel" class="acct-sel" onchange="trend()"></select>
+	</div><div class="input-field">
+	<input id="src" type="text" class="validate" style="width:60%">
+	<label for="src" data-trans="src">{{search}}</label>
+	<button class="btn waves-effect indigo" style="width: 36%;padding: 0;padding-left: 15px;" onclick="src()" data-trans-i="src">
+		<i class="material-icons left" style="margin:0">search</i>{{search}}
+	</button>
+	<br>
+	<br>
+	</div>
+	<div id="search">
+	<div id="src-contents">
+	</div>
+	</div>
+	</div>
+	<!--並べ替え-->
+	<div id="sort-box" class="hide menu-content">
+	<ul id="sort"></ul>
+	<div>
+	<button onclick="sort()" class="btn waves-effect nex" style="width:97.5%;" data-trans-i="sort">
+		<i class="material-icons left">sort</i>{{sortSet}}
+	</button>
+	</div>
+	</div>
+	<!--リスト-->
+	<div id="list-box" class="hide menu-content">
+		<div class="input-field" style="width:calc( 100% - 100px);float:left">
+			<select id="list-acct-sel" class="acct-sel"></select>
+			<label>{{selectAcct}}</label>
+		</div>
+		<div style="float:left; padding-top:8px; padding-bottom:28px;">
+			<button class="btn waves-effect indigo" style="width:80px;" onclick="list()" data-trans-i="lists">
+				{{listLocale}}
+			</button>
+		</div>
+		<br><br>
+		<div id="lists"></div>
+		<div id="lists-user"></div>
+		<input type="text" style="width:150px" id="list-add" placeholder="{{name}}">
+			<button class="btn waves-effect" style="width:120px;" onclick="makeNewList()">{{makeNew}}</button>
+	</div>
+	<!--フィルター-->
+	<div id="filter-box" class="hide menu-content">
+		<div class="input-field" style="width:calc( 100% - 100px);float:left">
+			<select id="filter-acct-sel" class="acct-sel"></select>
+			<label>{{selectAcct}}</label>
+		</div>
+		<div style="float:left; padding-top:8px; padding-bottom:28px;">
+			<button class="btn waves-effect indigo" style="width:80px;" onclick="filter()" data-trans-i="filters">
+				{{listLocale}}
+			</button>
+		</div>
+		<div id="filtered-words"></div>
+		<input type="hidden" id="filter-edit-id">
+		<input type="text" style="width:150px" id="filter-add-word" placeholder="{{filterWord}}"><br>
+		{{degree}}<br>
+		<input type="checkbox" class="filled-in" id="home_filter" value="home" />
+			<label for="home_filter">{{home}}</label>
+		<input type="checkbox" class="filled-in" id="local_filter" value="public" />
+			<label for="local_filter">{{local}}</label>
+		<input type="checkbox" class="filled-in" id="notf_filter" value="notifications" />
+			<label for="notf_filter">{{notf}}</label>
+		<input type="checkbox" class="filled-in" id="conv_filter" value="thread" />
+			<label for="conv_filter">{{conver}}</label><br>
+			{{option}}<br>
+		<input type="checkbox" class="filled-in" id="wholeword_filter" value="1" />
+			<label for="wholeword_filter">{{matchWord}}</label><br>
+		<span class="sml">{{warnMatchWord}}</span><br>
+		<input type="checkbox" class="filled-in" id="except_filter" value="1" />
+			<label for="except_filter">{{except}}</label><br>
+		<span class="sml">{{exceptWorn}}</span><br>
+		{{avalableBefore}}<span class="sml">{{warnAvBefore}}<b>{{warnAvBefore2}}</b></span><br><br>
+		<input type="number" style="width:50px" id="days_filter" placeholder="d" value="0">{{days}}
+		<input type="number" style="width:50px" id="hours_filter" placeholder="h" value="0">{{hours}}
+		<input type="number" style="width:50px" id="mins_filter" placeholder="m" value="0">{{mins}}<br>
+		Quick:<a onclick="filterTime(0,0,30)" class="pointer">30{{mins}}</a>/
+		<a onclick="filterTime(0,1,0)" class="pointer">1{{hours}}</a>/
+		<a onclick="filterTime(0,6,0)" class="pointer">6{{hours}}</a>/
+		<a onclick="filterTime(0,12,0)" class="pointer">12{{hours}}</a>/
+		<a onclick="filterTime(1,0,0)" class="pointer">1{{days}}</a>/
+		<a onclick="filterTime(7,0,0)" class="pointer">7{{days}}</a>/
+		<a onclick="filterTime(0,0,0)" class="pointer">{{unlimited}}</a><br>
+		<button class="btn waves-effect" style="width:120px;" onclick="makeNewFilter()" id="add-filter-btn">{{add}}</button><br>
+		<span class="sml">{{warnOnIntegratedTL}}</span>
 	</div>
-	<br><br>
-	<div id="lists"></div>
-	<div id="lists-user"></div>
-	<input type="text" style="width:150px" id="list-add" placeholder="{{name}}">
-		<button class="btn waves-effect" style="width:120px;" onclick="makeNewList()">{{makeNew}}</button>
 </div>
-<!--フィルター-->
-<div id="filter-box" class="hide notf-box z-depth-4">
-	<div class="input-field" style="width:calc( 100% - 100px);float:left">
-		<select id="filter-acct-sel" class="acct-sel"></select>
-		<label>{{selectAcct}}</label>
-	</div>
-	<div style="float:left; padding-top:8px; padding-bottom:28px;">
-		<button class="btn waves-effect indigo" style="width:80px;" onclick="filter()" data-trans-i="filters">
-			{{listLocale}}
-		</button>
-	</div>
-	<div id="filtered-words"></div>
-	<input type="hidden" id="filter-edit-id">
-	<input type="text" style="width:150px" id="filter-add-word" placeholder="{{filterWord}}"><br>
-	{{degree}}<br>
-	<input type="checkbox" class="filled-in" id="home_filter" value="home" />
-	  <label for="home_filter">{{home}}</label>
-	<input type="checkbox" class="filled-in" id="local_filter" value="public" />
-	  <label for="local_filter">{{local}}</label>
-	<input type="checkbox" class="filled-in" id="notf_filter" value="notifications" />
-	  <label for="notf_filter">{{notf}}</label>
-	<input type="checkbox" class="filled-in" id="conv_filter" value="thread" />
-	  <label for="conv_filter">{{conver}}</label><br>
-	  {{option}}<br>
-	<input type="checkbox" class="filled-in" id="wholeword_filter" value="1" />
-	  <label for="wholeword_filter">{{matchWord}}</label><br>
-	<span class="sml">{{warnMatchWord}}</span><br>
-	<input type="checkbox" class="filled-in" id="except_filter" value="1" />
-	  <label for="except_filter">{{except}}</label><br>
-	<span class="sml">{{exceptWorn}}</span><br>
-	{{avalableBefore}}<span class="sml">{{warnAvBefore}}<b>{{warnAvBefore2}}</b></span><br><br>
-	<input type="number" style="width:50px" id="days_filter" placeholder="d" value="0">{{days}}
-	<input type="number" style="width:50px" id="hours_filter" placeholder="h" value="0">{{hours}}
-	<input type="number" style="width:50px" id="mins_filter" placeholder="m" value="0">{{mins}}
-	<button class="btn waves-effect" style="width:120px;" onclick="makeNewFilter()" id="add-filter-btn">{{add}}</button><br>
-	<span class="sml">{{warnOnIntegratedTL}}</span>
+		</div>
+		<a onclick="about()" class="nex waves-effect">
+				<i class="material-icons" style="font-size: 1rem;">info</i>{{about}}
+		</a>&nbsp;|&nbsp;
+		<a onclick="bottomReverse()" class="nex waves-effect">
+				<i class="material-icons" style="font-size: 1rem;">swap_horiz</i>{{reverse}}
+		</a>
 </div>
 <div id="main">
 <!--TLのTL-->
 <div id="timeline-container">
-	{{helloTheDesk}}
+	<div id="something-wrong">
+		<div>{{helloTheDesk}}</div>
+	</div>
 </div>
 </div>
 </div>
@@ -757,52 +796,23 @@ var tlid=0;
 								<button id="posttgl" class="btn waves-effect indigo" style="width: 100%;height: 2.5rem;line-height: 0;margin: 0;">
 									<i class="material-icons" style="position: relative; top: 5px; font-size: 1.5rem; text-align: center; margin-right: 10px;">edit</i>{{toot}}
 								</button>
-        </div>
+				</div>
         <div class="leftside reverse" id="group">
-            <div class="btnsgroup"><span class="grouptitle">Columns:</span>
-                <a onclick="addToggle()" class="nex waves-effect" data-trans-i="add" id="add-tgl">
-                    <i class="material-icons nex" title="{{addColumn}}" data-trans-title="column_add">add</i>
-                </a>
-                <a onclick="sortToggle()" class="nex waves-effect">
-                    <i class="material-icons nex big-icon" title="{{sortColumns}}" data-trans-title="sort">sort</i>
-                </a>
-            </div>
-            <div class="btnsgroup"><span class="grouptitle">Accounts:</span>
-                <a href="acct.html" class="nex waves-effect">
-                    <i class="material-icons nex big-icon" title="{{acctMan}}(Ctrl+Shift+M)" data-trans-title="manager">account_circle</i>
-                </a>
-                <a onclick="srcToggle()" class="nex waves-effect" id="src-tgl">
-                    <i class="material-icons" title="{{search}}" data-trans-title="src">search</i>
-                </a>
-                <a onclick="listToggle()" class="nex waves-effect" id="list-tgl">
-                    <i class="material-icons" title="{{list}}" data-trans-title="list">view_headline</i>
-                </a>
-                <a onclick="filterToggle()" class="nex waves-effect" id="filter-tgl">
-                    <i class="material-icons" title="{{filter}}" data-trans-title="filter">filter_list</i>
-                </a>
-            </div>
-			<div class="btnsgroup"><span class="grouptitle">Preferences:</span>
-				<a onclick="bottomReverse()" class="nex waves-effect">
-                    <i class="material-icons nex" title="{{reverse}}" data-trans-title="reverse">swap_horiz</i>
-                </a>
-                <a href="setting.html" class="nex waves-effect">
-                    <i class="material-icons nex" title="{{setting}}(Ctrl+Shift+S)" data-trans-title="setting">settings</i>
-                </a>
-                <a href="index.html" class="nex mize waves-effect">
-                    <i class="material-icons nex" title="{{f5}}(F5/⌘+R)" data-trans-title="reload">refresh</i>
-                </a>
-                <a onclick="nano()" class="nex waves-effect">
-                    <i class="material-icons" title="{{nanoDes}}TheDesk Nano" data-trans-title="nano_desp">remove_from_queue</i>
-                </a>
-                <a onclick="window.open('https://astarte.thedesk.top');" class="setting nex waves-effect" target="_blank" id="ranking-btn" style="display:none;">
-                    <i class="material-icons nex" title="アスタルテランキング">timeline</i>
-				</a>
-				<a href="https://docs.thedesk.top" class="setting nex waves-effect" target="_blank">
-                    <i class="material-icons nex" title="{{help}}">help_outline</i>
-				</a>
-            </div>
-        </div>
-    </div>
+						<div class="btnsgroup">
+							<a href="acct.html" class="nex waves-effect">
+                    <i class="material-icons nex big-icon" title="{{acctMan}}(Ctrl+Shift+M)">account_circle</i>
+              </a>
+							<a href="setting.html" class="nex waves-effect">
+									<i class="material-icons nex" title="{{setting}}(Ctrl+Shift+S)">settings</i>
+							</a>
+							<a onclick="nano()" class="nex waves-effect">
+									<i class="material-icons" title="{{nanoDes}}TheDesk Nano" data-trans-title="nano_desp">remove_from_queue</i>
+							</a>
+							<a onclick="menu()" class="nex waves-effect" id="list-tgl">
+									<i class="material-icons" title="{{list}}">apps</i>
+							</a>
+						</div>
+    </div></div>
     <div>
 		<div id="tips-menu">
 			<div class="btnsgroup" style="height:34px"><span class="grouptitle">Tips:</span>
@@ -858,6 +868,7 @@ var tlid=0;
 <script type="text/javascript" src="../../js/tl/speech.js"></script>
 <script type="text/javascript" src="../../js/ui/post-box.js"></script>
 <script type="text/javascript" src="../../js/ui/layout.js"></script>
+<script type="text/javascript" src="../../js/post/emoji.js"></script>
 <script type="text/javascript" src="../../js/login/instance.js"></script>
 <script type="text/javascript" src="../../js/login/login.js"></script>
 <script type="text/javascript" src="../../js/ui/img.js"></script>
@@ -871,7 +882,6 @@ var tlid=0;
 <script type="text/javascript" src="../../js/post/img.js"></script>
 <script type="text/javascript" src="../../js/post/status.js"></script>
 <script type="text/javascript" src="../../js/post/misskeystatus.js"></script>
-<script type="text/javascript" src="../../js/post/emoji.js"></script>
 <script type="text/javascript" src="../../js/post/suggest.js"></script>
 <script type="text/javascript" src="../../js/post/bb-md.js"></script>
 <script type="text/javascript" src="../../js/userdata/showOnTL.js"></script>
@@ -879,4 +889,5 @@ var tlid=0;
 <script type="text/javascript" src="../../js/userdata/prof-edit.js"></script>
 <script type="text/javascript" src="../../js/emoji/emojipack.js"></script>
 <script type="text/javascript" src="../../js/emoji/default-emoji.js"></script>
-<script type="text/javascript" src="../../js/platform/end.js"></script>
+<script type="text/javascript" src="../../js/platform/end.js"></script>
+<script type="text/javascript" src="../../js/ui/menu.js"></script>

app/view/make/language/acct.en.json

@@ -2,7 +2,7 @@
     "list":"List of accounts",
     "back":"Back",
     "add":"Add an account",
-    "codesetupwarn":"Check if TheDesk is not working on Windows, you want to login Pleroma servers, you cannot login when it checked.",
+    "codesetupwarn":"Uncheck it to skip pasiting code.(login to Mastodon on Windows or macOS) (Recommended: pcheck)",
     "codesetup":"Code setup",
     "mainacct":"Main an account",
     "selacct":"Select an account",
@@ -17,5 +17,6 @@
     "ver":"Mastodon version",
     "ko":"",
     "thisismisskey":"Login as Misskey",
-    "misskeylogin":"Read <a href=\"https://thedesk.top/how-to-misskey-login.html\">Docs(ja)</a> to login Misskey."
+    "misskeylogin":"Read <a href=\"https://thedesk.top/how-to-misskey-login.html\">Docs(ja)</a> to login Misskey.",
+    "nodata":"No data"
 }

app/view/make/language/acct.ja.json

@@ -2,7 +2,7 @@
     "list":"アカウント一覧",
     "back":"戻る",
     "add":"アカウントを追加",
-    "codesetupwarn":"Windows以外でご使用の方やPleromaにログインされる方はチェックを入れて下さい。ログインできない場合、チェックを外してください。",
+    "codesetupwarn":"チェックを外すとコード貼り付けをスキップできます。(<u>Mastodon</u>にWindowsやmacOSからログインする場合)失敗する場合はチェックを入れてください。",
     "codesetup":"コードセットアップ",
     "mainacct":"メインアカウント",
     "selacct":"アカウントを選択",
@@ -17,5 +17,6 @@
     "ver":"Mastodonバージョン",
     "ko":"個",
     "thisismisskey":"Misskeyとしてログイン",
-    "misskeylogin":"<a href=\"https://thedesk.top/how-to-misskey-login.html\">ドキュメント</a>を参照して正しいコードを入れてください。"
+    "misskeylogin":"<a href=\"https://thedesk.top/how-to-misskey-login.html\">ドキュメント</a>を参照して正しいコードを入れてください。",
+    "nodata":"アカウントがありません"
 }

app/view/make/language/index.en.json

@@ -98,6 +98,7 @@
     "note":"Note",
     "editProfImg":"Change avataor",
     "editHeader":"Change header image",
+    "blocked":"You are blocked. Why?",
     "likeUserDes":"Get people resembling this user.",
     "get":"Get",
     "historyBack":"Back",
@@ -105,6 +106,7 @@
     "supportme":"Support TheDesk!",
     "TheDeskDes":"TheDesk has no ad, you need no charge to unlock premium features. We need your friendly support!",
     "EntySupport":"Support on Enty",
+    "PixivSupport":"Support on Pixiv FANBOX",
     "AWLSupport":"Amazon Wish List",
     "SendAmazonGift1":"Give me Amazon Gift Card:",
     "SendAmazonGift2":"",
@@ -115,15 +117,15 @@
     "fed":"Federated",
     "fedMedia":"Federated(Media)",
     "dm":"Direct Message",
-    "integratedTLDes":"Integrated(Local and Home)",
-    "localPlusDes":"Integrated(Local and replies and BT on Home)",
+    "integratedTLDes":"Integrated(Local/Home)",
+    "localPlusDes":"LTL+Reply+BT",
     "notf":"Notifications",
     "showThisTL":"Show this TL:",
     "webviewWarn":"TweetDeck with customed TJDeck(<a href='https://gist.github.com/cutls/8787a55d2c1c53274e68a427966046a6' target='_blank'>Code</a>/<a href='https://gist.github.com/totoraj930/d1394dadb51d75666a76829f61e7280c' target='_blank'>TJDeck</a>). Keyboard shortcuts will irritate you. When you feel so, you check 'Prefer WebView' on top of the column.",
     "add":"Add",
     "search":"Search",
     "sortSet":"Sort",
-    "selectAcct":"Select an account",
+    "selectAcct":"Account(Scroll to show all)",
     "listLocale":"List",
     "filterWord":"Filtering words",
     "degree":"Filter contexts",
@@ -136,23 +138,25 @@
     "avalableBefore":"Expire after",
     "warnAvBefore":"Unset or \"0\" means \"Never\"",
     "warnAvBefore2":"This value may contain some error",
-    "days":"days",
-    "hours":"hours",
-    "mins":"minutes",
-    "secs":"seconds",
+    "unlimited":"Never",
+    "days":"day(s)",
+    "hours":"hour(s)",
+    "mins":"minute(s)",
+    "secs":"second(s)",
     "warnOnIntegratedTL":"Integrated TL/Plus TL will hide both Home-filtering words and Local-filtering words.",
-    "helloTheDesk":"<h3>Welcome to TheDesk</h3><br><a href=\"acct.html\">Add an account</a> or click <i class=\"material-icons\">add</i> to add a column.",
+    "helloTheDesk":"Internal error: please clear all data(at setting page) <b>All data will be deleted.</b>",
     "addColumn":"Add a column",
     "sortColumns":"Sort",
     "acctMan":"Account Manager",
     "filter":"Filter",
     "setting":"Preferences",
-    "reverse":"Toot box reverse",
-    "f5":"Super Reload",
+    "reverse":"Toot button layout reverse",
+    "f5":"Reload TL",
     "nanoDes":"The smallest Mastodon,",
     "verTips":"Version",
     "clockTips":"Clock",
     "ramTips":"RAM status",
     "changeTips":"Change Tips",
-    "help":"Help"
+    "help":"Help",
+    "about":"About TheDesk"
 }

app/view/make/language/index.ja.json

@@ -98,6 +98,7 @@
     "note":"自己紹介",
     "editProfImg":"アバターを変更",
     "editHeader":"ヘッダーを変更",
+    "blocked":"ブロックされています。なぜでしょう？",
     "likeUserDes":"似ているユーザーを取得できます。",
     "get":"取得",
     "historyBack":"一つ前のユーザーデータ",
@@ -105,6 +106,7 @@
     "supportme":"ご支援ください。",
     "TheDeskDes":"TheDeskは営利目的ではないため、有料機能や広告は一切ありません。<br>皆様のあたたかいご支援のもとで製作されています。",
     "EntySupport":"Entyで支援",
+    "PixivSupport":"Pixiv FANBOXで支援",
     "AWLSupport":"Amazonほしいものリスト",
     "SendAmazonGift1":"",
     "SendAmazonGift2":"にAmazonギフトカードを送る",
@@ -116,14 +118,14 @@
     "fedMedia":"連合(メディア)",
     "dm":"ダイレクトメッセージ",
     "integratedTLDes":"統合(ローカルとホーム)",
-    "localPlusDes":"統合(ローカルとブースト・リプライ)",
+    "localPlusDes":"統合(LTL+BT+返信)",
     "notf":"通知",
     "showThisTL":"表示するタイムライン",
     "webviewWarn":"TweetDeckを表示します。TJDeckをカスタムしたものが読み込まれます(<a href='https://gist.github.com/cutls/8787a55d2c1c53274e68a427966046a6' target='_blank'>Code</a>/<a href='https://gist.github.com/totoraj930/d1394dadb51d75666a76829f61e7280c' target='_blank'>TJDeck</a>)。キーボードショートカットが邪魔をするので、文字入力時はカラムの「WebView優先」にチェックを入れてください。",
     "add":"追加",
     "search":"検索",
     "sortSet":"並べ替え設定",
-    "selectAcct":"アカウントを選択",
+    "selectAcct":"選択(スクロールで全選択肢表示)",
     "filterWord":"フィルターワード",
     "listLocale":"一覧",
     "degree":"適応範囲",
@@ -134,25 +136,27 @@
     "except":"除外",
     "exceptWorn":"「除外」時マッチしたトゥートは非可逆的に除外され、削除後も閲覧できません。",
     "avalableBefore":"有効期限(あと)",
-    "warnAvBefore":"未指定(または0分)で「無制限」になります。",
+    "warnAvBefore":"未指定(または0分)で「無期限」になります。",
     "warnAvBefore2":"仕様上数値の正確性を保証できません。",
+    "unlimited":"無期限",
     "days":"日",
     "hours":"時間",
     "mins":"分",
     "secs":"秒",
     "warnOnIntegratedTL":"Integrated TL/Plus TLは、公開/ホームのフィルターワードが合算されて適応されます。どちらか一方の指定でも非表示になります。",
-    "helloTheDesk":"<h3>Welcome to TheDesk</h3><br><a href=\"acct.html\">アカウントを追加</a>するか下の<i class=\"material-icons\">add</i>ボタンよりカラムを追加してください。",
+    "helloTheDesk":"内部エラーです。再読込して治らない場合は初期化(全データ削除)をしてください。(事前に設定をエクスポートしておくことをおすすめします。)",
     "addColumn":"カラム追加",
     "sortColumns":"カラム一覧/並べ替え",
     "acctMan":"アカウントマネージャー",
     "filter":"フィルター",
     "setting":"設定",
-    "reverse":"トゥートバーの左右入れ替え",
-    "f5":"スーパーリロード",
+    "reverse":"トゥートボタンの左右入れ替え",
+    "f5":"TL再読込",
     "nanoDes":"最小のマストドン。",
     "verTips":"バージョン",
     "clockTips":"時計",
     "ramTips":"システムメモリ容量",
     "changeTips":"Tips変更",
-    "help":"ヘルプ"
+    "help":"ヘルプ",
+    "about":"このソフトについて"
 }

app/view/make/language/setting.en.json

@@ -10,6 +10,8 @@
     "backup":"Import and export of preferences",
     "import":"Import",
     "export":"Export",
+    "hardwareAcceleration":"Disable hardware acceleration",
+    "hardwareAccelerationWarn":"Auto restarted",
     "theme":"Themes",
     "popup":"Popup notification(on Windows)",
     "popupwarn":"Hide to set \"0\"",
@@ -79,8 +81,9 @@
     "letters":"letters",
     "or":"or",
     "imgheight":"Height of images",
+    "imgheightwarn":"Option:Set \"full\" to uncrop.",
     "ticker":"Enable #InstanceTicker",
-    "tickerwarn":"Show colorful stickers about tooters' server. <a href=\"https://cdn.weep.me/mastodon/\">About #InstanceTicker</a> Copyright 2018 weepjp, kyori19.",
+    "tickerwarn":"Show colorful stickers about the server. <a href=\"https://cdn.weep.me/mastodon/\">About #InstanceTicker</a> Copyright 2018 weepjp, kyori19.",
     "animation":"Animation of timelines",
     "post":"Posting Preferences",
     "autocw":"Alert before posting a long toot.",
@@ -102,6 +105,7 @@
     "simple":"Only URL",
     "mention":"URL and acct(mention to the user)",
     "full":"URL, text and acct(mention to the user)",
+    "notqt":"Disabled(Hide buttons on TLs)",
     "main":"Default accounts of actions",
     "mainwarn":"Main account can be set on Account Manager.",
     "lastacct":"Account you used recently",
@@ -110,6 +114,7 @@
     "secwarn":"Toot with other visibility setting",
     "nothing":"Hidden",
     "localonly":"Local Only",
+    "zeroWidthEmoji":"Zero-width space when inserting emojis",
     "keysc":"Keyboard shortcut Preferences",
     "iks":"Easy inserter",
     "okswarn":"You can insert any letters and emojis with only 3 keys",

app/view/make/language/setting.ja.json

@@ -10,6 +10,8 @@
     "backup":"設定のインポートとエクスポート",
     "import":"インポート",
     "export":"エクスポート",
+    "hardwareAcceleration":"ハードウェアアクセラレーションの無効化",
+    "hardwareAccelerationWarn":"表示(特に設定画面)が乱れる場合に「はい」を選択してください。自動で再起動します。",
     "theme":"テーマの設定",
     "popup":"新規通知のポップアップお知らせの表示秒数",
     "popupwarn":"0に設定すると表示されません",
@@ -79,6 +81,7 @@
     "letters":"文字",
     "or":"または",
     "imgheight":"画像の高さ",
+    "imgheightwarn":"オプション:「full」と指定すると全ての画像をクロップしません。",
     "ticker":"#InstanceTickerを使う",
     "tickerwarn":"トゥートした人の所属サーバーをわかりやすく彩ります(自サーバー以外のトゥート向け)。<a href=\"https://cdn.weep.me/mastodon/\">#InstanceTickerについて</a> Copyright 2018 weepjp, kyori19.",
     "animation":"タイムラインのアニメーション",
@@ -102,6 +105,7 @@
     "simple":"URLのみ",
     "mention":"URLとアカウント名(相手に通知)",
     "full":"本文・URL・アカウント名",
+    "notqt":"使わない(TL上にボタンも表示されません)",
     "main":"投稿後や起動時のアカウント",
     "mainwarn":"メインアカウントはアカウント設定で指定できます。投稿以外のアカウント選択にも影響します。",
     "lastacct":"最後に使用したアカウント",
@@ -110,6 +114,7 @@
     "secwarn":"公開範囲の変更とトゥートを一発でできます。",
     "nothing":"表示しない",
     "localonly":"ローカル限定",
+    "zeroWidthEmoji":"絵文字にゼロ幅スペースを使う",
     "keysc":"キーボードショートカットの設定",
     "iks":"簡単文字入力",
     "okswarn":"絵文字やタグ、&gt;BTなどを登録しておくとすぐに入力できます。",

app/view/make/setting.sample.html

@@ -1,14 +1,15 @@
 <!doctype html>
-<html lang="{{lang}}">
+<html lang="@@lang@@">
+
 <head>
 	<title>Settings - TheDesk</title>
-	{{comment-start}}
+	@@comment-start@@
 	<script type="text/javascript">
 		var _jipt = [];
 		_jipt.push(['project', 'thedesk']);
 	</script>
 	<script type="text/javascript" src="https://cdn.crowdin.com/jipt/jipt.js"></script>
-	{{comment-end}}
+	@@comment-end@@
 	<meta content="width=device-width,initial-scale=1.0" name="viewport">
 	<link href="../../css/materialize.css" type="text/css" rel="stylesheet">
 	<link href="../../css/themes.css" type="text/css" rel="stylesheet">
@@ -17,493 +18,424 @@
 	<link href='../../css/font-awesome.css' rel='stylesheet' type='text/css'>
 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans:300" rel="stylesheet">
 	<meta charset="utf-8">
-	<style>input{max-height:50px!important} .pcr-result{height:1rem !important;}</style>
+	<style>
+		input {
+			max-height: 50px !important
+		}
+
+		.pcr-result {
+			height: 1rem !important;
+		}
+	</style>
 </head>
+
 <body id="mainView" style="overflow-y:scroll">
-<script type="text/javascript" src="../../js/common/jquery.js"></script>
-<script type="text/javascript" src="../../js/platform/first.js"></script>
-<script type="text/javascript" src="../../js/common/materialize.js"></script>
-<script type="text/javascript" src="../../js/lang/lang.{{lang}}.js"></script>
-<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
+	<script type="text/javascript" src="../../js/common/jquery.js"></script>
+	<script type="text/javascript" src="../../js/platform/first.js"></script>
+	<script type="text/javascript" src="../../js/common/materialize.js"></script>
+	<script type="text/javascript" src="../../js/lang/lang.@@lang@@.js"></script>
+	<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
+	<script src="../../node_modules/vue/dist/vue.min.js"></script>
+	<script type="text/javascript" src="setting.vue.js"></script>
 
-<h4>{{setting}}</h4>
-<ul class="collapsible" data-collapsible="accordion">
-	<li>
-	<div class="collapsible-header">
-			<i class="material-icons">desktop_windows</i>{{env}}
-	</div>
-	<div class="collapsible-body">
-		<h5>{{setlang}}</h5>
-		To translate with Crowdin, you have to login Crowdin and restart TheDesk when login is finished.<br>
-		{{langlist}}
-		<h5>{{backup}}</h5>
-		<button onclick="exportSettings()" class="btn waves-effect lime darken-3" style="width:100%; max-width:200px;">{{export}}</button>
-		<button onclick="importSettings()" class="btn waves-effect cyan darken-3" style="width:100%; max-width:200px;">{{import}}</button>
-		<br>
-		<h5>{{popup}}</h5>{{popupwarn}}
-		<br>
-		<input type="text" style="width:50px" id="popup">{{s}}
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">{{set}}</button>
-		<br>
-		<h5>{{nativenotf}}</h5>
-		{{nnwarn}}<br><a onclick="notftest()" class="pointer">{{nntest}}</a>
-		<br>
-		<input class="with-gap" onchange="settings()" name="notf" type="radio" id="ntf_yes" value="yes" />
-		<label for="ntf_yes">{{yes}}</label>
-		<input class="with-gap" onchange="settings()" name="notf" type="radio" id="ntf_no" value="no" />
-		<label for="ntf_no">{{no}}</label>
-		<br>
-		<h5>{{minwidth}}</h5>{{minwidthwarn}}
-		<br>
-		<input type="text" style="width:50px" id="width">px{{above}}
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">{{set}}</button>
-		<br>
-		<h5>{{fixwidth}}</h5>{{fixwidthwarn}}
-		<input type="text" style="width:50px" id="fixwidth">px{{above}}
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">{{set}}</button>
-		<br>
-		<h5>{{font}}</h5>
-		{{fontwarn}}<br>
-		<button class="btn waves-effect" style="width:100px;" onclick="font()">{{select}}</button><br>
-		<div id="fonts" class="hide" style="overflow-y:scroll; width:300px; height:500px;"></div>
-		<br>
-		<input type="text" style="width:150px" id="font">
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">{{set}}</button>
-		<br>
-		<h5>{{fontsize}}</h5>
-		<span style="font-size:15px">15px({{absolute}})</span>
-		<br>
-		<input type="text" style="width:50px" id="size">px 
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">{{set}}</button><br>
-		<h5>{{savefolder}}</h5>
-		{{savefolderwarn}}<br>
-		<button class="btn waves-effect" style="width:100px;" onclick="savefolder()">{{change}}</button>
-		<br>
-	</div>
-	</li>
-	<li>
-	<div class="collapsible-header">
-			<i class="material-icons">color_lens</i>{{theme}}
-	</div>
-	<div class="collapsible-body">
-		<h4>{{themeSel}}</h4>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="black" value="black" />
-		<label for="black">Black</label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="white" value="white" />
-		<label for="white">White</label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo" value="indigo" />
-		<label for="indigo">Indigo<span class="imas hide">(エンドレスナイト)</span></label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="brown" value="brown" />
-		<label for="brown">Brown<span class="imas hide">(ビタースイート・タイム)</span></label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="green" value="green" />
-		<label for="green">Green<span class="imas hide">(ユースフルロマンス)</span></label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom" value="custom" />
-		<label for="custom">Custom</label>
-		<div style="width:300px" id="sel-selector">
-			<select id="custom-sel-sel" class="custom-sel" onchange="customSel()"></select>
-		</div>
-		<h4>{{customtheme}}</h4>
-		<div style="width:300px" id="edit-selector" data-add="{{add_new}}">
-			<select id="custom-edit-sel" class="custom-sel" onchange="custom()">
-				<option value="add_new">{{add_new}}</option>
-			</select>
-		</div>
-		<h5>{{name}}</h5>
-		<input type="text" style="width:300px" id="custom_name" placeholder="{{name}}...">
-		<h5>{{desc}}</h5>
-		<div class="input-field"><textarea style="width:300px" id="custom_desc" class="materialize-textarea" placeholder="{{desc}}..."></textarea></div>
-		<h5>{{customthemeDirection}}</h5>
-		<input class="with-gap" name="derection" type="radio" id="dark" value="dark" checked="true" />
-		<label for="dark">Dark</label>
-		<input class="with-gap" name="derection" type="radio" id="light" value="light" />
-		<label for="light">Light</label>
-		<div id="pickers">
-		<div>
-			<h5>Primary</h5>{{secondarycolor}}
-			<div id="color-picker0-wrap"><div class="color-picker" id="color-picker0"></div></div>
-			<input type="hidden" id="color-picker0_value">
-		</div>
-		<div>
-			<h5>Secondary</h5>{{primary}}
-			<div id="color-picker1-wrap"><div class="color-picker" id="color-picker1"></div></div>
-			<input type="hidden" id="color-picker1_value">
-		</div>
-		<div>
-			<h5>Texts</h5>{{text}}
-			<div id="color-picker2-wrap"><div class="color-picker" id="color-picker2"></div></div>
-			<input type="hidden" id="color-picker2_value">
-		</div>
-		<div>
-			<h5>Accent</h5>{{accent}}
-			<div id="color-picker3-wrap"><div class="color-picker" id="color-picker3"></div></div>
-			<input type="hidden" id="color-picker3_value">
-		</div>
-		</div>
-		<button class="btn-large waves-effect" onclick="customComp()">{{change}}</button>&nbsp;<button class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">{{delete}}</button><br><br>
-		<input type="text" style="width:300px" id="custom_json" class="materialize-textarea" placeholder="JSON style" readonly><br>
-		{{customShare}}
-		<h4>{{customImport}}</h4>
-		{{cImpWarn}}<br>
-		<input type="text" style="width:300px" id="custom_import" class="materialize-textarea" placeholder="JSON/JSON5 style">
-		<button class="btn waves-effect" onclick="customImp()">{{import}}</button><br>
-	</li>
-	<li>
-	<div class="collapsible-header">
-			<i class="material-icons">reorder</i>{{timeline}}
-	</div>
-	<div class="collapsible-body">
-		<h5>{{timemode}}</h5>{{relativetime}}
-		<br>{{absolutetime}}
-		<br>{{mixtime}}
-		<br>
-		<input class="with-gap" onchange="settings()" onchange="settings()" name="time" type="radio" id="relative" value="relative" />
-		<label for="relative">{{relativesel}}</label>
-		<input class="with-gap" onchange="settings()" name="time" type="radio" id="absolute" value="absolute" />
-		<label for="absolute">{{absolutesel}}</label>
-		<input class="with-gap" onchange="settings()" name="time" type="radio" id="double" value="double" />
-		<label for="double">{{doublesel}}</label>
-		<input class="with-gap" onchange="settings()" name="time" type="radio" id="medium" value="medium" />
-		<label for="medium">{{mixsel}}</label>
-		<h5>{{locale}}</h5>{{localewarn}}
-		<br>
-		<input class="with-gap" onchange="settings()" name="ul" type="radio" id="ul_yes" value="yes" />
-		<label for="ul_yes">{{yes}}</label>
-		<input class="with-gap" onchange="settings()" name="ul" type="radio" id="ul_no" value="no" />
-		<label for="ul_no">{{no}}</label>
-		<br>
-		<h5>{{nswf}}</h5>{{nsfwwarn}}
-		<br>
-		<input class="with-gap" onchange="settings()" name="nsfw" type="radio" id="n_yes" value="yes" />
-		<label for="n_yes">{{yes}}</label>
-		<input class="with-gap" onchange="settings()" name="nsfw" type="radio" id="n_no" value="no" />
-		<label for="n_no">{{no}}</label>
-		<br>
-		<h5>{{cw}}</h5>
-		<input class="with-gap" onchange="settings()" name="cw" type="radio" id="c_yes" value="yes" />
-		<label for="c_yes">{{yes}}</label>
-		<input class="with-gap" onchange="settings()" name="cw" type="radio" id="c_no" value="no" />
-		<label for="c_no">{{no}}</label>
-		<br>
-		<h5>{{replyct}}</h5>
-		<input class="with-gap" onchange="settings()" name="rp" type="radio" id="rp_hidden" value="hidden" />
-		<label for="rp_hidden">{{replyct_hidden}}</label>
-		<input class="with-gap" onchange="settings()" name="rp" type="radio" id="rp_all" value="all" />
-		<label for="rp_all">{{replyct_full}}</label>
-		<br>
-		<h5>{{gif}}</h5>
-		<input class="with-gap" onchange="settings()" name="gif" type="radio" id="g_yes" value="yes" />
-		<label for="g_yes">{{yes}}</label>
-		<input class="with-gap" onchange="settings()" name="gif" type="radio" id="g_no" value="no" />
-		<label for="g_no">{{no}}</label>
-		<br>
-		<h5>{{tag}}</h5>
-		<input class="with-gap" onchange="settings()" name="tag" type="radio" id="t_all" value="all" />
-		<label for="t_all">{{tagfed}}</label>
-		<input class="with-gap" onchange="settings()" name="tag" type="radio" id="t_local" value="local" />
-		<label for="t_local">{{taglocal}}</label>
-		<br>
-		<h5>{{via}}</h5>
-		<input class="with-gap" onchange="settings()" name="via" type="radio" id="via_yes" value="yes" />
-		<label for="via_yes">{{yes}}</label>
-		<input class="with-gap" onchange="settings()" name="via" type="radio" id="via_hide" value="hide" />
-		<label for="via_hide">{{no}}</label>
-		<br>
-		<h5>{{mouseover}}</h5>
-		{{mouseoverwarn}}<br>
-		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_yes" value="yes" />
-		<label for="mov_yes">{{mv}}</label>
-		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_click" value="click" />
-		<label for="mov_click">{{mvclick}}</label>
-		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_no" value="no" />
-		<label for="mov_no">{{no}}</label>
-		<br>
-		<h5>{{notfmarker}}</h5>
-		<input class="with-gap" onchange="settings()" name="notfm" type="radio" id="notfm_yes" value="yes" />
-		<label for="notfm_yes">{{yes}}</label>
-		<input class="with-gap" onchange="settings()" name="notfm" type="radio" id="notfm_no" value="no" />
-		<label for="notfm_no">{{no}}</label>
-		<br>
-		<h5>{{autofold}}</h5>
-		{{autofoldwarn}}
-		<br>
-		<input type="text" style="width:50px" id="sentence">{{lines}} {{above}} {{or}}
-		<input type="text" style="width:50px" id="letters">{{letters}} {{above}}
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">{{set}}</button>
-		<br>
-		<h5>{{imgheight}}
-        </h5>
-		<input type="text" style="width:50px" id="img-height">px
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">{{set}}</button>
-		<br>
-		<h5>{{ticker}}</h5>
-		{{tickerwarn}}<br>
-		<input class="with-gap" onchange="settings()" name="ticker" type="radio" id="ticker_yes" value="yes" />
-		<label for="ticker_yes">{{yes}}</label>
-		<input class="with-gap" onchange="settings()" name="ticker" type="radio" id="ticker_no" value="no" />
-		<label for="ticker_no">{{no}}</label>
-		<br>
-		<h5>{{animation}}</h5>
-		<input class="with-gap" onchange="settings()" name="anime" type="radio" id="anime_yes" value="yes" />
-		<label for="anime_yes">{{yes}}</label>
-		<input class="with-gap" onchange="settings()" name="anime" type="radio" id="anime_no" value="no" />
-		<label for="anime_no">{{no}}</label>
-	</div>
-	</li>
-	<li>
-	<div class="collapsible-header">
-			<i class="material-icons">send</i>{{post}}
-	</div>
-	<div class="collapsible-body">
-		<h5>{{defaultcw}}</h5>
-		<input type="text" style="width:150px" id="cw-text">
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">{{set}}</button>
-		<br>
-		<h5>{{autocw}}</h5>
-		{{autocwwarn}}
-		<br>
-		<input type="text" style="width:50px" id="cw_sentence">{{lines}} {{above}} {{or}}
-		<input type="text" style="width:50px" id="cw_letters">{{letters}} {{above}}
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">{{set}}</button>
-		<br>
-		<h5>{{cws}}</h5>
-		<input class="with-gap" onchange="settings()" name="cws" type="radio" id="cws_yes" value="yes" />
-		<label for="cws_yes">{{yes}}</label>
-		<input class="with-gap" onchange="settings()" name="cws" type="radio" id="cws_no" value="no" />
-		<label for="cws_no">{{no}}
-		</label>
-		<br>
-		<h5>{{defaultvis}}</h5>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="public" value="public" />
-		<label for="public">{{public}}</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="unlisted" value="unlisted" />
-		<label for="unlisted">{{unlisted}}</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="private" value="private" />
-		<label for="private">{{private}}</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="direct" value="direct" />
-		<label for="direct">{{direct}}</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="memory" value="memory" />
-		<label for="memory">{{memory}}</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="server" value="server" />
-		<label for="server">{{useapi}}</label>
-		<br>
-		<h5>{{postimg}}</h5>
-		<input class="with-gap" onchange="settings()" name="img" type="radio" id="i_url" value="url" />
-		<label for="i_url">{{showurl}}</label>
-		<input class="with-gap" onchange="settings()" name="img" type="radio" id="i_no-act" value="no-act" />
-		<label for="i_no-act">{{nourl}}</label>
-		<br>
-		<input class="with-gap" onchange="settings()" name="img" type="radio" id="i_inline" value="inline" disabled />
-		<label for="i_inline">{{disabled}} 
-			<!--画像を投稿し、インラインで表示(Markdownに対応したインスタンスのみ。マルチアカウント環境では非推奨。)-->
-		</label>
-		<br>
-		<h5>{{box}}</h5>
-		<input class="with-gap" onchange="settings()" name="box" type="radio" id="bx_yes" value="yes" />
-		<label for="bx_yes">{{boxyes}}</label>
-		<input class="with-gap" onchange="settings()" name="box" type="radio" id="bx_no" value="no" />
-		<label for="bx_no">{{boxno}}
-		</label>
-		<input class="with-gap" onchange="settings()" name="box" type="radio" id="bx_abs" value="absolute" />
-		<label for="bx_abs">{{boxabs}}</label>
-		<br>
-		<h5>{{quote}}</h5>
-		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_simple" value="simple" />
-		<label for="q_simple">{{simple}}</label>
-		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_mention" value="mention" />
-		<label for="q_mention">{{mention}}</label>
-		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_full" value="full" />
-		<label for="q_full">{{full}}
-		</label>
-		<br>
-		<h5>{{main}}</h5>
-		{{mainwarn}}<br>
-		<input class="with-gap" onchange="settings()" name="main" type="radio" id="mn_remain" value="remain" />
-		<label for="mn_remain">{{lastacct}}</label>
-		<input class="with-gap" onchange="settings()" name="main" type="radio" id="mn_main" value="main" />
-		<label for="mn_main">{{usemainacct}}</label>
-		</label>
-		<h5>{{secondary}}</h5>
-		{{secwarn}}<br>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-nothing" value="nothing" />
-		<label for="sec-nothing">{{nothing}}</label>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-public" value="public" />
-		<label for="sec-public">{{public}}</label>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-unlisted" value="unlisted" />
-		<label for="sec-unlisted">{{unlisted}}</label>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-private" value="private" />
-		<label for="sec-private">{{private}}</label>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-direct" value="direct" />
-		<label for="sec-direct">{{direct}}</label>
-		<input class="with-gap hide kirishima" onchange="settings()" name="sec" type="radio" id="sec-local" value="local" />
-		<label for="sec-local">{{localonly}}</label><span class="hide kirishima">非対応インスタンスでは「未収載」になります。</span>
-		<br>
-	</div>
-	</li>
-	<li>
-		<div class="collapsible-header">
-				<i class="material-icons">keyboard</i>{{keysc}}
-		</div>
-		<div class="collapsible-body">
-			<h5>{{iks}}</h5>
-			{{okswarn}}<br>
-			Ctrl+Shift+1:<input type="text" style="width:150px" id="oks-1">
-			<button onclick="oks(1)" class="btn waves-effect" style="width:100px;">{{set}}</button><br><br>
-			Ctrl+Shift+2:<input type="text" style="width:150px" id="oks-2">
-			<button onclick="oks(2)" class="btn waves-effect" style="width:100px;">{{set}}</button><br><br>
-			Ctrl+Shift+3:<input type="text" style="width:150px" id="oks-3">
-			<button onclick="oks(3)" class="btn waves-effect" style="width:100px;">{{set}}</button><br><br>
+	<h4>@@setting@@</h4>
+	<ul class="collapsible" data-collapsible="accordion">
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">desktop_windows</i>@@env@@
+			</div>
+			<div class="collapsible-body">
+				<h5>@@setlang@@</h5>
+				To translate with Crowdin, you have to login Crowdin and restart TheDesk when login is finished.<br>
+				@@langlist@@
+				<h5>@@backup@@</h5>
+				<button onclick="exportSettings()" class="btn waves-effect lime darken-3"
+					style="width:100%; max-width:200px;">@@export@@</button>
+				<button onclick="importSettings()" class="btn waves-effect cyan darken-3"
+					style="width:100%; max-width:200px;">@@import@@</button>
+				<div id="envView">
+					<template v-for="(item, i) in config">
+						<h5>{{item.text.head}}</h5>
+						<template v-if=item.text.desc>
+							<templete v-html=item.text.desc></templete><br>
+						</template>
+						<template v-if="item.id=='notf'"><a onclick="notftest()"
+								class="pointer">@@nntest@@</a><br></template>
+						<template v-if="item.checkbox">
+							<template v-for="(check, j) in item.text.checkbox">
+								<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
+									type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
+								<label v-bind:for="item.id+check.value">{{check.text}}</label>
+							</template>
+						</template>
+						<template v-else>
+							<template v-if="item.doubleText">
+								<template v-for="(textbox, j) in item.data">
+									<input type="text" v-model="textbox.setValue" type="radio" v-bind:id="textbox.id"
+										v-bind:style="{ width: textbox.width+'px'}" />{{textbox.text.after}}
+								</template>
+							</template>
+							<template v-else>
+								<input type="text" v-model="item.setValue" type="radio" v-bind:id="item.id"
+									v-bind:style="{ width: item.width+'px'}" />{{item.text.after}}
+							</template>
+							<button class="btn waves-effect" style="width:100px;"
+								v-on:click="complete(i)">@@change@@</button>
+						</template><br>
+					</template>
+				</div>
+				<h5>@@font@@</h5>
+				@@fontwarn@@<br>
+				<button class="btn waves-effect" style="width:100px;" onclick="font()">@@select@@</button><br>
+				<div id="fonts" class="hide" style="overflow-y:scroll; width:300px; height:500px;"></div>
+				<br>
+				<input type="text" style="width:150px" id="font">
+				<button class="btn waves-effect" style="width:100px;" onclick="settings()">@@set@@</button>
+				<br>
+				<h5>@@savefolder@@</h5>
+				@@savefolderwarn@@<br>
+				<button class="btn waves-effect" style="width:100px;" onclick="savefolder()">@@change@@</button>
+				<br>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">color_lens</i>@@theme@@
+			</div>
+			<div class="collapsible-body">
+				<h4>@@themeSel@@</h4>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="black" value="black" />
+				<label for="black">Black</label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="white" value="white" />
+				<label for="white">White</label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo" value="indigo" />
+				<label for="indigo">Indigo<span class="imas hide">(エンドレスナイト)</span></label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="brown" value="brown" />
+				<label for="brown">Brown<span class="imas hide">(ビタースイート・タイム)</span></label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="green" value="green" />
+				<label for="green">Green<span class="imas hide">(ユースフルロマンス)</span></label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom" value="custom" />
+				<label for="custom">Custom</label>
+				<div style="width:300px" id="sel-selector">
+					<select id="custom-sel-sel" class="custom-sel" onchange="customSel()"></select>
+				</div>
+				<h4>@@customtheme@@</h4>
+				<div style="width:300px" id="edit-selector" data-add="@@add_new@@">
+					<select id="custom-edit-sel" class="custom-sel" onchange="custom()">
+						<option value="add_new">@@add_new@@</option>
+					</select>
+				</div>
+				<h5>@@name@@</h5>
+				<input type="text" style="width:300px" id="custom_name" placeholder="@@name@@...">
+				<h5>@@desc@@</h5>
+				<div class="input-field"><textarea style="width:300px" id="custom_desc" class="materialize-textarea"
+						placeholder="@@desc@@..."></textarea></div>
+				<h5>@@customthemeDirection@@</h5>
+				<input class="with-gap" name="derection" type="radio" id="dark" value="dark" checked="true" />
+				<label for="dark">Dark</label>
+				<input class="with-gap" name="derection" type="radio" id="light" value="light" />
+				<label for="light">Light</label>
+				<div id="pickers">
+					<div>
+						<h5>Primary</h5>@@secondarycolor@@
+						<div id="color-picker0-wrap">
+							<div class="color-picker" id="color-picker0"></div>
+						</div>
+						<input type="hidden" id="color-picker0_value">
+					</div>
+					<div>
+						<h5>Secondary</h5>@@primary@@
+						<div id="color-picker1-wrap">
+							<div class="color-picker" id="color-picker1"></div>
+						</div>
+						<input type="hidden" id="color-picker1_value">
+					</div>
+					<div>
+						<h5>Texts</h5>@@text@@
+						<div id="color-picker2-wrap">
+							<div class="color-picker" id="color-picker2"></div>
+						</div>
+						<input type="hidden" id="color-picker2_value">
+					</div>
+					<div>
+						<h5>Accent</h5>@@accent@@
+						<div id="color-picker3-wrap">
+							<div class="color-picker" id="color-picker3"></div>
+						</div>
+						<input type="hidden" id="color-picker3_value">
+					</div>
+				</div>
+				<button class="btn-large waves-effect" onclick="customComp()">@@change@@</button>&nbsp;<button
+					class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">@@delete@@</button><br><br>
+				<input type="text" style="width:300px" id="custom_json" class="materialize-textarea"
+					placeholder="JSON style" readonly><br>
+				@@customShare@@
+				<h4>@@customImport@@</h4>
+				@@cImpWarn@@<br>
+				<input type="text" style="width:300px" id="custom_import" class="materialize-textarea"
+					placeholder="JSON/JSON5 style">
+				<button class="btn waves-effect" onclick="customImp()">@@import@@</button><br>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">reorder</i>@@timeline@@
+			</div>
+			<div class="collapsible-body">
+				<div id="tlView">
+					<template v-for="(item, i) in config">
+						<h5>{{item.text.head}}</h5>
+						<template v-if=item.text.desc>
+							<templete v-html=item.text.desc></templete><br>
+						</template>
+						<template v-if="item.checkbox">
+							<template v-for="(check, j) in item.text.checkbox">
+								<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
+									type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
+								<label v-bind:for="item.id+check.value">{{check.text}}</label>
+							</template>
+						</template>
+						<template v-else>
+							<template v-if="item.doubleText">
+								<template v-for="(textbox, j) in item.data">
+									<input type="text" v-model="textbox.setValue" type="radio" v-bind:id="textbox.id"
+										v-bind:style="{ width: textbox.width+'px'}" />{{textbox.text.after}}
+								</template>
+							</template>
+							<template v-else>
+								<input type="text" v-model="item.setValue" type="radio" v-bind:id="item.id"
+									v-bind:style="{ width: item.width+'px'}" />{{item.text.after}}
+							</template>
+							<button class="btn waves-effect" style="width:100px;"
+								v-on:click="complete(i)">@@change@@</button>
+						</template><br>
+					</template>
+				</div>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">send</i>@@post@@
+			</div>
+			<div class="collapsible-body">
+				<div id="postView">
+					<template v-for="(item, i) in config">
+						<h5>{{item.text.head}}</h5>
+						<template v-if=item.text.desc>
+							<templete v-html=item.text.desc></templete><br>
+						</template>
+						<template v-if="item.checkbox">
+							<template v-for="(check, j) in item.text.checkbox">
+								<template v-if="!check.kirishima || (check.kirishima && kirishima)">
+									<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
+										type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
+									<label v-bind:for="item.id+check.value">{{check.text}}</label>
+									<span v-if="check.kirishimaText">{{check.kirishimaText}}</span>
+								</template>
+							</template>
+						</template>
+						<template v-else>
+							<template v-if="item.doubleText">
+								<template v-for="(textbox, j) in item.data">
+									<input type="text" v-model="textbox.setValue" type="radio" v-bind:id="textbox.id"
+										v-bind:style="{ width: textbox.width+'px'}" />{{textbox.text.after}}
+								</template>
+							</template>
+							<template v-else>
+								<input type="text" v-model="item.setValue" type="radio" v-bind:id="item.id"
+									v-bind:style="{ width: item.width+'px'}" />{{item.text.after}}
+							</template>
+							<button class="btn waves-effect" style="width:100px;"
+								v-on:click="complete(i)">@@change@@</button>
+						</template><br>
+					</template>
+				</div>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">Fkeyboard</i>@@keysc@@
+			</div>
+			<div class="collapsible-body">
+				<h5>@@iks@@</h5>
+				@@okswarn@@<br>
+				Ctrl+Shift+1:<input type="text" style="width:150px" id="oks-1">
+				<button onclick="oks(1)" class="btn waves-effect" style="width:100px;">@@set@@</button><br><br>
+				Ctrl+Shift+2:<input type="text" style="width:150px" id="oks-2">
+				<button onclick="oks(2)" class="btn waves-effect" style="width:100px;">@@set@@</button><br><br>
+				Ctrl+Shift+3:<input type="text" style="width:150px" id="oks-3">
+				<button onclick="oks(3)" class="btn waves-effect" style="width:100px;">@@set@@</button><br><br>
 
-		</div>
-	</li>
-	<li>
-		<div class="collapsible-header">
-				<i class="material-icons">bookmark</i>{{muteemp}}
-		</div>
-		<div class="collapsible-body">
-			<h5>{{climute}}</h5>
-			<div id="mute-cli"></div>
-			<h5>{{cliemp}}</h5>
-			{{cliwarn}}
-			<h5>{{wordmute}}</h5>
-			{{enter}}<br>
-			<div class="chips" id="wordmute" style="background-color:gray;"></div>
-			<button onclick="wordmuteSave()" class="btn waves-effect" style="width:100px;">{{set}}</button>
-			<h5>{{wordemp}}</h5>
-			{{enter}}<br>
-			<div class="chips" id="wordemp" style="background-color:gray;"></div>
-			<button onclick="wordempSave()" class="btn waves-effect" style="width:100px;">{{set}}</button>
-			<h5>{{useremp}}</h5>
-			{{useerempwarn}}
-			<span class="emphasized">　{{empcolorwarn}}　</span>
-		</div>
-	</li>
-	<li>
-		<div class="collapsible-header">
-			<i class="fa fa-spotify"></i>{{spotify}}
-		</div>
-		<div class="collapsible-body">
-			<h5>{{npProvider}}</h5>
-			{{npPeoviderWarn}}<br>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="aimp" value="AIMP" />
-			<label for="aimp">AIMP</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="itunes" value="ITUNES" />
-			<label for="itunes">iTunes</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="npmm" value="MEDIAMONKEY" />
-			<label for="npmm">MediaMonkey</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="winamp" value="WINAMP" />
-			<label for="winamp">Winamp</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wmp" value="WMP" />
-			<label for="wmp">WMP</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wlm" value="WLM" />
-			<label for="wlm">WLM</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="cad" value="CAD" />
-			<label for="cad">CAD</label><br><br>
-			{{spotifynote1}}<i class="material-icons" style="font-size:24px;">music_note</i>{{spotifynote2}}<br>
-			<h5>{{link}}</h5>
-			{{linkwarn}}<br>
-			<div id="spotify-code-show" class="hide"><input type="text" id="spotify-code"><button onclick="spotifyAuth()" class="btn waves-effect" style="width:100px;">{{set}}</button></div>
-			<a onclick="spotifyConnect()" class="btn waves-effect nex" style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-enable"><i class="fa fa-spotify left"></i>{{connect}}</a>
-			<a onclick="spotifyDisconnect()" class="btn waves-effect nex disabled" style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-disable"><i class="fa fa-spotify left"></i>{{disconnect}}</a>
-			<h5>{{templeteedit}}</h5>
-			{{templeteeditwarn}}<br>
-			<textarea id="np-temp" class="materialize-textarea" data-length="500">#NowPlaying {song} / {album} / {artist}
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">bookmark</i>@@muteemp@@
+			</div>
+			<div class="collapsible-body">
+				<h5>@@climute@@</h5>
+				<div id="mute-cli"></div>
+				<h5>@@cliemp@@</h5>
+				@@cliwarn@@
+				<h5>@@wordmute@@</h5>
+				@@enter@@<br>
+				<div class="chips" id="wordmute" style="background-color:gray;"></div>
+				<button onclick="wordmuteSave()" class="btn waves-effect" style="width:100px;">@@set@@</button>
+				<h5>@@wordemp@@</h5>
+				@@enter@@<br>
+				<div class="chips" id="wordemp" style="background-color:gray;"></div>
+				<button onclick="wordempSave()" class="btn waves-effect" style="width:100px;">@@set@@</button>
+				<h5>@@useremp@@</h5>
+				@@useerempwarn@@
+				<span class="emphasized">　@@empcolorwarn@@　</span>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="fa fa-spotify"></i>@@spotify@@
+			</div>
+			<div class="collapsible-body">
+				<h5>@@npProvider@@</h5>
+				@@npPeoviderWarn@@<br>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="aimp" value="AIMP" />
+				<label for="aimp">AIMP</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="itunes" value="ITUNES" />
+				<label for="itunes">iTunes</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="npmm" value="MEDIAMONKEY" />
+				<label for="npmm">MediaMonkey</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="winamp" value="WINAMP" />
+				<label for="winamp">Winamp</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wmp" value="WMP" />
+				<label for="wmp">WMP</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wlm" value="WLM" />
+				<label for="wlm">WLM</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="cad" value="CAD" />
+				<label for="cad">CAD</label><br><br>
+				@@spotifynote1@@<i class="material-icons" style="font-size:24px;">music_note</i>@@spotifynote2@@<br>
+				<h5>@@link@@</h5>
+				@@linkwarn@@<br>
+				<div id="spotify-code-show" class="hide"><input type="text" id="spotify-code"><button
+						onclick="spotifyAuth()" class="btn waves-effect" style="width:100px;">@@set@@</button></div>
+				<a onclick="spotifyConnect()" class="btn waves-effect nex"
+					style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-enable"><i
+						class="fa fa-spotify left"></i>@@connect@@</a>
+				<a onclick="spotifyDisconnect()" class="btn waves-effect nex disabled"
+					style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-disable"><i
+						class="fa fa-spotify left"></i>@@disconnect@@</a>
+				<h5>@@templeteedit@@</h5>
+				@@templeteeditwarn@@<br>
+				<textarea id="np-temp" class="materialize-textarea" data-length="500">#NowPlaying {song} / {album} / {artist}
 {url}</textarea><br>
-				{{templete1}}<br>
-				{{templete2}}<br>
-				{{templete3}}<br>
-				<span class="imas hide">CINDERELLA NowPlaying(imastodon.net限定)では作曲家{composer}/作詞家{lyricist}/BPM{bpm}が有効です。<br>
-                    CINDERELLA NowPlayingはimastodon.netにログインしているとき、トゥート欄に「//」を入力し、その後に曲名を入れることで可能です。</span><br>
-			<button onclick="spotifySave()" class="btn waves-effect" style="width:100px;">{{set}}</button>
-			<h5>{{postartwork}}</h5>
-			<span class="imas hide">この設定はCINDERELLA NowPlaying(imastodon.net限定)にも適用されます。</span><br>
-			<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_yes" value="yes" />
-			<label for="awk_yes">{{yes}}</label>
-			<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_no" value="no" />
-			<label for="awk_no">{{no}}</label>
-			<br>
-		</div>
-	</li>
-	<li>
-		<div class="collapsible-header">
-			<i class="material-icons">hearing</i>{{tts}}
-		</div>
-		<div class="collapsible-body">
-			<h5>{{speed}}</h5>
-			{{speedwarn}}<br>
-			<p class="range-field"><input type="range" id="voicespeed" min="1" max="100" value="10" style="width:500px; max-width:100%"/></p>
-			<h5>{{pitch}}</h5>
-			{{pitchwarn}}<br>
-			<p class="range-field"><input type="range" id="voicepitch" min="0" max="100" value="50" style="width:500px; max-width:100%"/></p>
-			<h5>{{vol}}</h5>
-			{{volwarn}}<br>
-			<p class="range-field"><input type="range" id="voicevol" min="0" max="100" value="100" style="width:500px; max-width:100%"/></p>
-			<h5>{{test}}</h5>
-			<input type="text" style="width:350px" id="voicetxt" value="{{sample}}">
-			<button class="btn waves-effect blue" style="width:150px;" onclick="voicePlay()" id="testplay">{{playstop}}</button><br>
-			<br>
-			<button class="btn waves-effect" style="width:100px;" onclick="voiceSettings()">{{set}}</button>
-		</div>
-	</li>
-</ul>
-<br>
-<a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;"><i class="material-icons left">undo</i>{{back}}</a>
-<br>
-<br>{{keyscs}}
-<li>Ctrl+1-9:{{keyscr}}</li>
-<li>N:{{keynew}}</li>
-<li>X:{{keytoggle}}</li>
-<li>Ctrl+Enter:{{keypost}}</li>
-<li>Ctrl+Enter+Shift:{{keysecpost}}</li>
-<li>Ctrl+E:{{keyunread}}</li>
-<li>Esc:{{keyesc}}</li>
-<li>F5:{{keyf5}}</li>
-<li>Ctrl+Shift+C:{{keyclear}}</li>
-<li>Ctrl+Shift+S:{{setting}}</li>
-<li>Ctrl+Shift+M:{{keyacctman}}</li>
-<li>Ctrl+Shift+N:NowPlaying(Spotify)</li>
-<li>Ctrl+Shift+P:{{keyshowprof}}</li>
-<li>←/→:{{keyrow}}</li>
-<li>{{keyzoom}}</li>
-<div class="hide kirishima">
-以下Markdownに対応したインスタンスのみ。
-<br>
-<li>Ctrl+B/I/S/U:太字/斜字/取り消し/下線</li>
-<li>Shift+Enter:全角スペースを入れて改行</li>
-<li>Shift+Space:ゼロ幅スペース</li>
-以下アスタルテにログインしている場合のみ 
-<br>
-<li>Ctrl+R: 
-<a href="https://astarte.thedesk.top">アスタルテ暇人ランキング</a>を開く
-</li><br>
-</div>
-<button class="btn waves-effect red" style="width:100%; max-width:500px;" onclick="if(confirm('{{resetconfirm}}')){ localStorage.clear(); location.href='index.html'; }"><i class="material-icons left">delete</i>{{reset}}</button><br><br>
-<button class="btn waves-effect indigo" onclick="about()" style="width:100%; max-width:500px;"><i class="material-icons left">info</i>{{about}}</button>
-<a href="https://thedesk.top" class="btn waves-effect deep-purple lighten-2" style="width:100%; max-width:500px;"><i class="material-icons left">web</i>{{hp}}</a>
-<a href="https://enty.jp/Cutls" class="btn waves-effect purple lighten-2" style="width:100%; max-width:500px;"><i class="material-icons left">trending_up</i>{{support}}(Enty)</a>
-<a href="https://docs.thedesk.top" class="btn waves-effect blue darken-2" style="width:100%; max-width:500px;"><i class="material-icons left">list</i>{{help}}/Docs(Constructing)</a>
-<a href="https://github.com/cutls/TheDesk" class="btn waves-effect black lighten-2" style="width:100%; max-width:500px;"><i class="fa fa-github left"></i>GitHub</a>
-<a href="index.html?mode=user&code=Cutls@kirishima.cloud" class="btn waves-effect blue lighten-2" style="width:100%; max-width:500px;"><img src="../../img/desk_full.svg" class="left" width="25" style="padding-top:5px;">Developer: Cutls@kirishima.cloud</a>
-<a class="btn waves-effect red lighten-2" href="https://osushi.love/Cutls_P" target="_blank" style="width:100%; max-width:500px;"><img src="../../img/sushi.svg" class="left" width="25" style="padding-top:5px;">{{sushi}}</a>
-<br>
-Kyash<br>
-			<img src="../../img/kyash.png" width="100"><br>
-<a onclick="localStorage.removeItem('new-ver-skip'); location.href='index.html';" class="pointer">{{checkup}}</a><br>
-<a href="oss.html">OSS License{{ossJP}}</a><br>
-<span style="font-family:Open Sans;">Copyright &copy; TheDesk 2018 All Rights Reserved. 
-	Under <a href="https://github.com/cutls/TheDesk/blob/master/LICENSE">GNU General Public License v3.0</a> and <a href="https://thedesk.top/tos.html">Terms of Use</a>/<a href="https://thedesk.top/priv.html">Privacy Policy</a>
-	<br>Developer: Cutls P( 
-	<a href="index.html?mode=user&code=Cutls@kirishima.cloud">@Cutls@kirishima.cloud</a>)
+				@@templete1@@<br>
+				@@templete2@@<br>
+				@@templete3@@<br>
+				<button onclick="spotifySave()" class="btn waves-effect" style="width:100px;">@@set@@</button>
+				<h5>@@postartwork@@</h5>
+				<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_yes" value="yes" />
+				<label for="awk_yes">@@yes@@</label>
+				<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_no" value="no" />
+				<label for="awk_no">@@no@@</label>
+				<br>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">hearing</i>@@tts@@
+			</div>
+			<div class="collapsible-body">
+				<h5>@@speed@@</h5>
+				@@speedwarn@@<br>
+				<p class="range-field"><input type="range" id="voicespeed" min="1" max="100" value="10"
+						style="width:500px; max-width:100%" /></p>
+				<h5>@@pitch@@</h5>
+				@@pitchwarn@@<br>
+				<p class="range-field"><input type="range" id="voicepitch" min="0" max="100" value="50"
+						style="width:500px; max-width:100%" /></p>
+				<h5>@@vol@@</h5>
+				@@volwarn@@<br>
+				<p class="range-field"><input type="range" id="voicevol" min="0" max="100" value="100"
+						style="width:500px; max-width:100%" /></p>
+				<h5>@@test@@</h5>
+				<input type="text" style="width:350px" id="voicetxt" value="@@sample@@">
+				<button class="btn waves-effect blue" style="width:150px;" onclick="voicePlay()"
+					id="testplay">@@playstop@@</button><br>
+				<br>
+				<button class="btn waves-effect" style="width:100px;" onclick="voiceSettings()">@@set@@</button>
+			</div>
+		</li>
+	</ul>
 	<br>
-</span><br>
-TheDeskおよびCutls Pは<a href="https://donken.org/">被災地支援のためのマストドン研究会</a>をログイン機能提供等の形で応援しています。<br>
-タグタイムラインを開く:<a href="index.html?mode=tag&code=被災地支援のためのマストドン研究会">#被災地支援のためのマストドン研究会</a><br>
-<script type="text/javascript" src="../../js/common/about.js"></script>
-<script type="text/javascript" src="../../js/platform/end.js"></script>
-<script type="text/javascript" src="../../js/login/logout.js"></script>
-<script type="text/javascript" src="../../js/lang/lang.js"></script>
-<script type="text/javascript" src="../../js/ui/spotify.js"></script>
-<script type="text/javascript" src="../../js/tl/speech.js"></script>
-<script type="text/javascript" src="../../js/platform/pickr.js"></script>
-<script type="text/javascript" src="../../js/ui/settings.js"></script>
-<script type="text/javascript" src="../../js/ui/theme.js"></script>
-<script type="text/javascript" src="../../js/tl/date.js"></script>
+	<a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;"><i
+			class="material-icons left">undo</i>@@back@@</a>
+	<br>
+	<br>@@keyscs@@
+	<li>Ctrl+1-9:@@keyscr@@</li>
+	<li>N:@@keynew@@</li>
+	<li>X:@@keytoggle@@</li>
+	<li>Ctrl+Enter:@@keypost@@</li>
+	<li>Ctrl+Enter+Shift:@@keysecpost@@</li>
+	<li>Alt+Enter:@@secondary@@</li>
+	<li>Ctrl+E:@@keyunread@@</li>
+	<li>Esc:@@keyesc@@</li>
+	<li>F5:@@keyf5@@</li>
+	<li>Ctrl+Shift+C:@@keyclear@@</li>
+	<li>Ctrl+Shift+S:@@setting@@</li>
+	<li>Ctrl+Shift+M:@@keyacctman@@</li>
+	<li>Ctrl+Shift+N:NowPlaying(Spotify)</li>
+	<li>Ctrl+Shift+P:@@keyshowprof@@</li>
+	<li>←/→:@@keyrow@@</li>
+	<li>@@keyzoom@@</li>
+	<div class="hide kirishima">
+		以下Markdownに対応したインスタンスのみ。
+		<br>
+		<li>Ctrl+B/I/S/U:太字/斜字/取り消し/下線</li>
+		<li>Shift+Enter:全角スペースを入れて改行</li>
+		<li>Shift+Space:ゼロ幅スペース</li>
+		以下アスタルテにログインしている場合のみ
+		<br>
+		<li>Ctrl+R:
+			<a href="https://astarte.thedesk.top">アスタルテ暇人ランキング</a>を開く
+		</li><br>
+	</div>
+	<button class="btn waves-effect red" style="width:100%; max-width:500px;"
+		onclick="if(confirm('@@resetconfirm@@')){ localStorage.clear(); location.href='index.html'; }"><i
+			class="material-icons left">delete</i>@@reset@@</button><br><br>
+	<button class="btn waves-effect indigo" onclick="about()" style="width:100%; max-width:500px;"><i
+			class="material-icons left">info</i>@@about@@</button>
+	<a href="https://thedesk.top" class="btn waves-effect deep-purple lighten-2" style="width:100%; max-width:500px;"><i
+			class="material-icons left">web</i>@@hp@@</a>
+	<a href="https://enty.jp/Cutls" class="btn waves-effect purple lighten-2" style="width:100%; max-width:500px;"><i
+			class="material-icons left">trending_up</i>@@support@@(Enty)</a>
+	<a href="https://www.pixiv.net/fanbox/creator/28105985" class="btn waves-effect red lighten-2"
+		style="width:100%; max-width:500px;"><i class="material-icons left">trending_up</i>@@support@@(Pixiv FANBOX)</a>
+	<a href="https://docs.thedesk.top" class="btn waves-effect blue darken-2" style="width:100%; max-width:500px;"><i
+			class="material-icons left">list</i>@@help@@/Docs(Constructing)</a>
+	<a href="https://github.com/cutls/TheDesk" class="btn waves-effect black lighten-2"
+		style="width:100%; max-width:500px;"><i class="fa fa-github left"></i>GitHub</a>
+	<a href="index.html?mode=user&code=Cutls@kirishima.cloud" class="btn waves-effect blue lighten-2"
+		style="width:100%; max-width:500px;"><img src="../../img/desk_full.svg" class="left" width="25"
+			style="padding-top:5px;">Developer: Cutls@kirishima.cloud</a>
+	<br>
+	Kyash<br>
+	<img src="../../img/kyash.png" width="100"><br>
+	<a onclick="localStorage.removeItem('new-ver-skip'); location.href='index.html';"
+		class="pointer">@@checkup@@</a><br>
+	<a href="oss.html">OSS License@@ossJP@@</a><br>
+	<span style="font-family:Open Sans;">Copyright &copy; TheDesk 2018 All Rights Reserved.
+		Under <a href="https://github.com/cutls/TheDesk/blob/master/LICENSE">GNU General Public License v3.0</a> and <a
+			href="https://thedesk.top/tos.html">Terms of Use</a>/<a href="https://thedesk.top/priv.html">Privacy
+			Policy</a>
+		<br>Developer: Cutls P(
+		<a href="index.html?mode=user&code=Cutls@kirishima.cloud">@Cutls@kirishima.cloud</a>)
+		<br>
+	</span><br>
+	TheDeskおよびCutls Pは<a href="https://donken.org/">被災地支援のためのマストドン研究会</a>をログイン機能提供等の形で応援しています。<br>
+	タグタイムラインを開く:<a href="index.html?mode=tag&code=被災地支援のためのマストドン研究会">#被災地支援のためのマストドン研究会</a><br>
+	<script type="text/javascript" src="../../js/common/about.js"></script>
+	<script type="text/javascript" src="../../js/platform/end.js"></script>
+	<script type="text/javascript" src="../../js/login/logout.js"></script>
+	<script type="text/javascript" src="../../js/ui/spotify.js"></script>
+	<script type="text/javascript" src="../../js/tl/speech.js"></script>
+	<script type="text/javascript" src="../../js/platform/pickr.js"></script>
+	<script type="text/javascript" src="../../js/ui/settings.js"></script>
+	<script type="text/javascript" src="../../js/ui/theme.js"></script>
+	<script type="text/javascript" src="../../js/tl/date.js"></script>

app/view/make/setting.sample.js

@@ -0,0 +1,491 @@
+var yesno=[
+    {
+        text:"@@yes@@",
+        value:"yes"
+    },{
+        text:"@@no@@",
+        value:"no"
+    }
+];
+var envConstruction=[
+    {
+        id:"popup",
+        storage:"popup",
+        checkbox:false,
+        doubleText:false,
+        setValue:0,
+        width:50,
+        text:{
+            head:"@@popup@@",
+            desc:'@@popupwarn@@',
+            after:"@@s@@"
+        }
+    },{
+        id:"notf",
+        storage:"nativenotf",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"@@nativenotf@@",
+            desc:"@@nnwarn@@",
+            checkbox:yesno
+        }
+    },{
+        id:"width",
+        storage:"width",
+        checkbox:false,
+        doubleText:false,
+        width:50,
+        setValue:300,
+        text:{
+            head:"@@minwidth@@",
+            desc:"@@minwidthwarn@@",
+            after:"px @@above@@"
+        }
+    },{
+        id:"fixwidth",
+        storage:"fixwidth",
+        checkbox:false,
+        doubleText:false,
+        setValue:300,
+        width:50,
+        text:{
+            head:"@@fixwidth@@",
+            desc:"@@fixwidthwarn@@",
+            after:"px @@above@@"
+        }
+    },{
+        id:"size",
+        storage:"size",
+        checkbox:false,
+        doubleText:false,
+        width:50,
+        setValue:13,
+        text:{
+            head:"@@fontsize@@",
+            desc:'<span style="font-size:13px">13px(@@absolute@@)</span>',
+            after:"px"
+        }
+    },{
+        id:"ha",
+        storage:"ha",
+        checkbox:true,
+        setValue:false,
+        text:{
+            head:"@@hardwareAcceleration@@",
+            desc:"@@hardwareAccelerationWarn@@",
+            checkbox:[
+                {
+                    text:"@@yes@@",
+                    value:"true"
+                },{
+                    text:"@@no@@",
+                    value:"false"
+                }
+            ]
+        }
+    }
+];
+var tlConstruction=[
+    {
+        id:"time",
+        storage:"datetype",
+        checkbox:true,
+        setValue:"absolute",
+        text:{
+            head:"@@timemode@@",
+            desc:'@@relativetime@@<br>@@absolutetime@@<br>@@mixtime@@',
+            checkbox:[
+                {
+                    text:"@@relativesel@@",
+                    value:"relative"
+                },{
+                    text:"@@absolutesel@@",
+                    value:"absolute"
+                },{
+                    text:"@@doublesel@@",
+                    value:"double"
+                },{
+                    text:"@@mixsel@@",
+                    value:"medium"
+                }
+
+            ]
+        }
+    },{
+        id:"ul",
+        storage:"locale",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"@@locale@@",
+            desc:"@@localewarn@@",
+            checkbox:yesno
+        }
+    },{
+        id:"nsfw",
+        storage:"nsfw",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"@@nswf@@",
+            desc:"@@nsfwwarn@@",
+            checkbox:yesno
+        }
+    },{
+        id:"cw",
+        storage:"cw",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"@@cw@@",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        id:"rp",
+        storage:"replyct",
+        checkbox:true,
+        setValue:"hidden",
+        text:{
+            head:"@@replyct@@",
+            desc:"",
+            checkbox:[
+                {
+                    text:"@@replyct_hidden@@",
+                    value:"hidden"
+                },{
+                    text:"@@replyct_hidden@@",
+                    value:"all"
+                }
+
+            ]
+        }
+    },{
+        id:"gif",
+        storage:"gif",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"@@gif@@",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        id:"tag",
+        storage:"tag-range",
+        checkbox:true,
+        setValue:"local",
+        text:{
+            head:"@@tag@@",
+            desc:"",
+            checkbox:[
+                {
+                    text:"@@tagfed@@",
+                    value:"all"
+                },{
+                    text:"@@taglocal@@",
+                    value:"local"
+                }
+
+            ]
+        }
+    },{
+        id:"via",
+        storage:"viashow",
+        checkbox:true,
+        setValue:"no",
+        text:{
+            head:"@@via@@",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        id:"mov",
+        storage:"mouseover",
+        checkbox:true,
+        setValue:"no",
+        text:{
+            head:"@@mouseover@@",
+            desc:"@@mouseoverwarn@@",
+            checkbox:[
+                {
+                    text:"@@mv@@",
+                    value:"yes"
+                },{
+                    text:"@@mvclick@@",
+                    value:"click"
+                },{
+                    text:"@@no@@",
+                    value:"no"
+                }
+
+            ]
+        }
+    },{
+        id:"notfm",
+        storage:"setasread",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"@@notfmarker@@",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        checkbox:false,
+        doubleText:true,
+        data:[
+            {
+                id:"sentence",
+                storage:"sentence",
+                width:50,
+                setValue:500,
+                text:{after:"@@lines@@ @@above@@ @@or@@"}
+            },{
+                id:"letters",
+                storage:"letters",
+                width:50,
+                setValue:7000,
+                text:{after:"@@letters@@ @@above@@"}
+            }
+        ],
+        text:{
+            head:"@@autofold@@",
+            desc:"@@autofoldwarn@@",
+        }
+    },{
+        id:"img-height",
+        storage:"img-height",
+        checkbox:false,
+        doubleText:false,
+        width:80,
+        setValue:200,
+        text:{
+            head:"@@imgheight@@",
+            desc:'@@imgheightwarn@@',
+            after:"px"
+        }
+    },{
+        id:"ticker",
+        storage:"ticker_ok",
+        checkbox:true,
+        setValue:"no",
+        text:{
+            head:"@@ticker@@",
+            desc:'@@tickerwarn@@',
+            checkbox:yesno
+        }
+    },{
+        id:"anime",
+        storage:"animation",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"@@animation@@",
+            desc:"",
+            checkbox:yesno
+        }
+    }
+];
+var postConstruction=[
+    {
+        id:"cw-text",
+        storage:"cw-text",
+        checkbox:false,
+        doubleText:false,
+        width:150,
+        setValue:"",
+        text:{
+            head:"@@defaultcw@@",
+            desc:"",
+            after:""
+        }
+    },{
+        checkbox:false,
+        doubleText:true,
+        data:[
+            {
+                id:"cw_sentence",
+                storage:"cw_sentence",
+                width:50,
+                setValue:500,
+                text:{after:"@@lines@@ @@above@@ @@or@@"}
+            },{
+                id:"cw_letters",
+                storage:"cw_letters",
+                width:50,
+                setValue:7000,
+                text:{after:"@@letters@@ @@above@@"}
+            }
+        ],
+        text:{
+            head:"@@autocw@@",
+            desc:"@@autocwwarn@@",
+        }
+    },{
+        id:"cws",
+        storage:"always-cw",
+        checkbox:true,
+        setValue:"no",
+        text:{
+            head:"@@cws@@",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        id:"vis",
+        storage:"vis",
+        checkbox:true,
+        setValue:"public",
+        text:{
+            head:"@@defaultvis@@",
+            desc:"",
+            checkbox:[
+                {
+                    text:"@@public@@",
+                    value:"public"
+                },{
+                    text:"@@unlisted@@",
+                    value:"unlisted"
+                },{
+                    text:"@@private@@",
+                    value:"private"
+                },{
+                    text:"@@direct@@",
+                    value:"direct"
+                },{
+                    text:"@@memory@@",
+                    value:"memory"
+                },{
+                    text:"@@useapi@@",
+                    value:"useapi"
+                }
+            ]
+        }
+    },{
+        id:"img",
+        storage:"img",
+        checkbox:true,
+        setValue:"no-act",
+        text:{
+            head:"@@postimg@@",
+            desc:"",
+            checkbox:[
+                {
+                    text:"@@showurl@@",
+                    value:"url"
+                },{
+                    text:"@@nourl@@",
+                    value:"no-act"
+                }
+            ]
+        }
+    },{
+        id:"box",
+        storage:"box",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"@@box@@",
+            desc:"",
+            checkbox:[
+                {
+                    text:"@@boxyes@@",
+                    value:"yes"
+                },{
+                    text:"@@boxno@@",
+                    value:"no"
+                },{
+                    text:"@@boxabs@@",
+                    value:"absolute"
+                }
+            ]
+        }
+    },{
+        id:"quote",
+        storage:"quote",
+        checkbox:true,
+        setValue:"nothing",
+        text:{
+            head:"@@quote@@",
+            desc:"",
+            checkbox:[
+                {
+                    text:"@@simple@@",
+                    value:"simple"
+                },{
+                    text:"@@mention@@",
+                    value:"mention"
+                },{
+                    text:"@@full@@",
+                    value:"full"
+                },{
+                    text:"@@notqt@@",
+                    value:"nothing"
+                }
+            ]
+        }
+    },{
+        id:"main",
+        storage:"mainuse",
+        checkbox:true,
+        setValue:"remain",
+        text:{
+            head:"@@main@@",
+            desc:"@@mainwarn@@",
+            checkbox:[
+                {
+                    text:"@@lastacct@@",
+                    value:"remain"
+                },{
+                    text:"@@usemainacct@@",
+                    value:"main"
+                }
+            ]
+        }
+    },{
+        id:"sec",
+        storage:"sec",
+        checkbox:true,
+        setValue:"public",
+        text:{
+            head:"@@secondary@@",
+            desc:"",
+            checkbox:[
+                {
+                    text:"@@nothing@@",
+                    value:"nothing"
+                },{
+                    text:"@@public@@",
+                    value:"public"
+                },{
+                    text:"@@unlisted@@",
+                    value:"unlisted"
+                },{
+                    text:"@@private@@",
+                    value:"private"
+                },{
+                    text:"@@direct@@",
+                    value:"direct"
+                },{
+                    text:"@@localonly@@",
+                    value:"local",
+                    kirishima:true,
+                    kirishimaText:"非対応インスタンスでは「未収載」になります。"
+                }
+            ]
+        }
+    },{
+        id:"zero",
+        storage:"emoji-zero-width",
+        checkbox:true,
+        setValue:"normal",
+        setValue:"no",
+        text:{
+            head:"@@zeroWidthEmoji@@",
+            desc:"",
+            checkbox:yesno
+        }
+    }
+]

app/view/make/setting.sample.old.html

@@ -0,0 +1,519 @@
+<!doctype html>
+<html lang="{{lang}}">
+<head>
+	<title>Settings - TheDesk</title>
+	{{comment-start}}
+	<script type="text/javascript">
+		var _jipt = [];
+		_jipt.push(['project', 'thedesk']);
+	</script>
+	<script type="text/javascript" src="https://cdn.crowdin.com/jipt/jipt.js"></script>
+	{{comment-end}}
+	<meta content="width=device-width,initial-scale=1.0" name="viewport">
+	<link href="../../css/materialize.css" type="text/css" rel="stylesheet">
+	<link href="../../css/themes.css" type="text/css" rel="stylesheet">
+	<link href="../../css/pickr.css" type="text/css" rel="stylesheet">
+	<link href="../../css/master.css" type="text/css" rel="stylesheet">
+	<link href='../../css/font-awesome.css' rel='stylesheet' type='text/css'>
+	<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans:300" rel="stylesheet">
+	<meta charset="utf-8">
+	<style>input{max-height:50px!important} .pcr-result{height:1rem !important;}</style>
+</head>
+<body id="mainView" style="overflow-y:scroll">
+<script type="text/javascript" src="../../js/common/jquery.js"></script>
+<script type="text/javascript" src="../../js/platform/first.js"></script>
+<script type="text/javascript" src="../../js/common/materialize.js"></script>
+<script type="text/javascript" src="../../js/lang/lang.{{lang}}.js"></script>
+<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
+
+<h4>{{setting}}</h4>
+<ul class="collapsible" data-collapsible="accordion">
+	<li>
+	<div class="collapsible-header">
+			<i class="material-icons">desktop_windows</i>{{env}}
+	</div>
+	<div class="collapsible-body">
+		<h5>{{setlang}}</h5>
+		To translate with Crowdin, you have to login Crowdin and restart TheDesk when login is finished.<br>
+		{{langlist}}
+		<h5>{{backup}}</h5>
+		<button onclick="exportSettings()" class="btn waves-effect lime darken-3" style="width:100%; max-width:200px;">{{export}}</button>
+		<button onclick="importSettings()" class="btn waves-effect cyan darken-3" style="width:100%; max-width:200px;">{{import}}</button>
+		<br>
+		<h5>{{popup}}</h5>{{popupwarn}}
+		<br>
+		<input type="text" style="width:50px" id="popup">{{s}}
+		<button class="btn waves-effect" style="width:100px;" onclick="settings()">{{set}}</button>
+		<br>
+		<h5>{{nativenotf}}</h5>
+		{{nnwarn}}<br><a onclick="notftest()" class="pointer">{{nntest}}</a>
+		<br>
+		<input class="with-gap" onchange="settings()" name="notf" type="radio" id="ntf_yes" value="yes" />
+		<label for="ntf_yes">{{yes}}</label>
+		<input class="with-gap" onchange="settings()" name="notf" type="radio" id="ntf_no" value="no" />
+		<label for="ntf_no">{{no}}</label>
+		<br>
+		<h5>{{minwidth}}</h5>{{minwidthwarn}}
+		<br>
+		<input type="text" style="width:50px" id="width">px{{above}}
+		<button class="btn waves-effect" style="width:100px;" onclick="settings()">{{set}}</button>
+		<br>
+		<h5>{{fixwidth}}</h5>{{fixwidthwarn}}
+		<input type="text" style="width:50px" id="fixwidth">px{{above}}
+		<button class="btn waves-effect" style="width:100px;" onclick="settings()">{{set}}</button>
+		<br>
+		<h5>{{font}}</h5>
+		{{fontwarn}}<br>
+		<button class="btn waves-effect" style="width:100px;" onclick="font()">{{select}}</button><br>
+		<div id="fonts" class="hide" style="overflow-y:scroll; width:300px; height:500px;"></div>
+		<br>
+		<input type="text" style="width:150px" id="font">
+		<button class="btn waves-effect" style="width:100px;" onclick="settings()">{{set}}</button>
+		<br>
+		<h5>{{fontsize}}</h5>
+		<span style="font-size:15px">15px({{absolute}})</span>
+		<br>
+		<input type="text" style="width:50px" id="size">px 
+		<button class="btn waves-effect" style="width:100px;" onclick="settings()">{{set}}</button><br>
+		<h5>{{savefolder}}</h5>
+		{{savefolderwarn}}<br>
+		<button class="btn waves-effect" style="width:100px;" onclick="savefolder()">{{change}}</button>
+		<br>
+		<h5>{{hardwareAcceleration}}</h5>
+		{{hardwareAccelerationWarn}}
+		<br>
+		<input class="with-gap" onchange="hardwareAcceleration()" name="ha" type="radio" id="ha_true" value="true" />
+		<label for="ha_true">{{yes}}</label>
+		<input class="with-gap" onchange="hardwareAcceleration()" name="ha" type="radio" id="ha_false" value="false" />
+		<label for="ha_false">{{no}}</label>
+		<br>
+	</div>
+	</li>
+	<li>
+	<div class="collapsible-header">
+			<i class="material-icons">color_lens</i>{{theme}}
+	</div>
+	<div class="collapsible-body">
+		<h4>{{themeSel}}</h4>
+		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="black" value="black" />
+		<label for="black">Black</label>
+		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="white" value="white" />
+		<label for="white">White</label>
+		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo" value="indigo" />
+		<label for="indigo">Indigo<span class="imas hide">(エンドレスナイト)</span></label>
+		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="brown" value="brown" />
+		<label for="brown">Brown<span class="imas hide">(ビタースイート・タイム)</span></label>
+		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="green" value="green" />
+		<label for="green">Green<span class="imas hide">(ユースフルロマンス)</span></label>
+		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom" value="custom" />
+		<label for="custom">Custom</label>
+		<div style="width:300px" id="sel-selector">
+			<select id="custom-sel-sel" class="custom-sel" onchange="customSel()"></select>
+		</div>
+		<h4>{{customtheme}}</h4>
+		<div style="width:300px" id="edit-selector" data-add="{{add_new}}">
+			<select id="custom-edit-sel" class="custom-sel" onchange="custom()">
+				<option value="add_new">{{add_new}}</option>
+			</select>
+		</div>
+		<h5>{{name}}</h5>
+		<input type="text" style="width:300px" id="custom_name" placeholder="{{name}}...">
+		<h5>{{desc}}</h5>
+		<div class="input-field"><textarea style="width:300px" id="custom_desc" class="materialize-textarea" placeholder="{{desc}}..."></textarea></div>
+		<h5>{{customthemeDirection}}</h5>
+		<input class="with-gap" name="derection" type="radio" id="dark" value="dark" checked="true" />
+		<label for="dark">Dark</label>
+		<input class="with-gap" name="derection" type="radio" id="light" value="light" />
+		<label for="light">Light</label>
+		<div id="pickers">
+		<div>
+			<h5>Primary</h5>{{secondarycolor}}
+			<div id="color-picker0-wrap"><div class="color-picker" id="color-picker0"></div></div>
+			<input type="hidden" id="color-picker0_value">
+		</div>
+		<div>
+			<h5>Secondary</h5>{{primary}}
+			<div id="color-picker1-wrap"><div class="color-picker" id="color-picker1"></div></div>
+			<input type="hidden" id="color-picker1_value">
+		</div>
+		<div>
+			<h5>Texts</h5>{{text}}
+			<div id="color-picker2-wrap"><div class="color-picker" id="color-picker2"></div></div>
+			<input type="hidden" id="color-picker2_value">
+		</div>
+		<div>
+			<h5>Accent</h5>{{accent}}
+			<div id="color-picker3-wrap"><div class="color-picker" id="color-picker3"></div></div>
+			<input type="hidden" id="color-picker3_value">
+		</div>
+		</div>
+		<button class="btn-large waves-effect" onclick="customComp()">{{change}}</button>&nbsp;<button class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">{{delete}}</button><br><br>
+		<input type="text" style="width:300px" id="custom_json" class="materialize-textarea" placeholder="JSON style" readonly><br>
+		{{customShare}}
+		<h4>{{customImport}}</h4>
+		{{cImpWarn}}<br>
+		<input type="text" style="width:300px" id="custom_import" class="materialize-textarea" placeholder="JSON/JSON5 style">
+		<button class="btn waves-effect" onclick="customImp()">{{import}}</button><br>
+	</li>
+	<li>
+	<div class="collapsible-header">
+			<i class="material-icons">reorder</i>{{timeline}}
+	</div>
+	<div class="collapsible-body">
+		<h5>{{timemode}}</h5>{{relativetime}}
+		<br>{{absolutetime}}
+		<br>{{mixtime}}
+		<br>
+		<input class="with-gap" onchange="settings()" onchange="settings()" name="time" type="radio" id="relative" value="relative" />
+		<label for="relative">{{relativesel}}</label>
+		<input class="with-gap" onchange="settings()" name="time" type="radio" id="absolute" value="absolute" />
+		<label for="absolute">{{absolutesel}}</label>
+		<input class="with-gap" onchange="settings()" name="time" type="radio" id="double" value="double" />
+		<label for="double">{{doublesel}}</label>
+		<input class="with-gap" onchange="settings()" name="time" type="radio" id="medium" value="medium" />
+		<label for="medium">{{mixsel}}</label>
+		<h5>{{locale}}</h5>{{localewarn}}
+		<br>
+		<input class="with-gap" onchange="settings()" name="ul" type="radio" id="ul_yes" value="yes" />
+		<label for="ul_yes">{{yes}}</label>
+		<input class="with-gap" onchange="settings()" name="ul" type="radio" id="ul_no" value="no" />
+		<label for="ul_no">{{no}}</label>
+		<br>
+		<h5>{{nswf}}</h5>{{nsfwwarn}}
+		<br>
+		<input class="with-gap" onchange="settings()" name="nsfw" type="radio" id="n_yes" value="yes" />
+		<label for="n_yes">{{yes}}</label>
+		<input class="with-gap" onchange="settings()" name="nsfw" type="radio" id="n_no" value="no" />
+		<label for="n_no">{{no}}</label>
+		<br>
+		<h5>{{cw}}</h5>
+		<input class="with-gap" onchange="settings()" name="cw" type="radio" id="c_yes" value="yes" />
+		<label for="c_yes">{{yes}}</label>
+		<input class="with-gap" onchange="settings()" name="cw" type="radio" id="c_no" value="no" />
+		<label for="c_no">{{no}}</label>
+		<br>
+		<h5>{{replyct}}</h5>
+		<input class="with-gap" onchange="settings()" name="rp" type="radio" id="rp_hidden" value="hidden" />
+		<label for="rp_hidden">{{replyct_hidden}}</label>
+		<input class="with-gap" onchange="settings()" name="rp" type="radio" id="rp_all" value="all" />
+		<label for="rp_all">{{replyct_full}}</label>
+		<br>
+		<h5>{{gif}}</h5>
+		<input class="with-gap" onchange="settings()" name="gif" type="radio" id="g_yes" value="yes" />
+		<label for="g_yes">{{yes}}</label>
+		<input class="with-gap" onchange="settings()" name="gif" type="radio" id="g_no" value="no" />
+		<label for="g_no">{{no}}</label>
+		<br>
+		<h5>{{tag}}</h5>
+		<input class="with-gap" onchange="settings()" name="tag" type="radio" id="t_all" value="all" />
+		<label for="t_all">{{tagfed}}</label>
+		<input class="with-gap" onchange="settings()" name="tag" type="radio" id="t_local" value="local" />
+		<label for="t_local">{{taglocal}}</label>
+		<br>
+		<h5>{{via}}</h5>
+		<input class="with-gap" onchange="settings()" name="via" type="radio" id="via_yes" value="yes" />
+		<label for="via_yes">{{yes}}</label>
+		<input class="with-gap" onchange="settings()" name="via" type="radio" id="via_hide" value="hide" />
+		<label for="via_hide">{{no}}</label>
+		<br>
+		<h5>{{mouseover}}</h5>
+		{{mouseoverwarn}}<br>
+		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_yes" value="yes" />
+		<label for="mov_yes">{{mv}}</label>
+		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_click" value="click" />
+		<label for="mov_click">{{mvclick}}</label>
+		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_no" value="no" />
+		<label for="mov_no">{{no}}</label>
+		<br>
+		<h5>{{notfmarker}}</h5>
+		<input class="with-gap" onchange="settings()" name="notfm" type="radio" id="notfm_yes" value="yes" />
+		<label for="notfm_yes">{{yes}}</label>
+		<input class="with-gap" onchange="settings()" name="notfm" type="radio" id="notfm_no" value="no" />
+		<label for="notfm_no">{{no}}</label>
+		<br>
+		<h5>{{autofold}}</h5>
+		{{autofoldwarn}}
+		<br>
+		<input type="text" style="width:50px" id="sentence">{{lines}} {{above}} {{or}}
+		<input type="text" style="width:50px" id="letters">{{letters}} {{above}}
+		<button class="btn waves-effect" style="width:100px;" onclick="settings()">{{set}}</button>
+		<br>
+		<h5>{{imgheight}}
+        </h5>
+		<input type="text" style="width:50px" id="img-height">px
+		<button class="btn waves-effect" style="width:100px;" onclick="settings()">{{set}}</button>
+		<br>
+		<h5>{{ticker}}</h5>
+		{{tickerwarn}}<br>
+		<input class="with-gap" onchange="settings()" name="ticker" type="radio" id="ticker_yes" value="yes" />
+		<label for="ticker_yes">{{yes}}</label>
+		<input class="with-gap" onchange="settings()" name="ticker" type="radio" id="ticker_no" value="no" />
+		<label for="ticker_no">{{no}}</label>
+		<br>
+		<h5>{{animation}}</h5>
+		<input class="with-gap" onchange="settings()" name="anime" type="radio" id="anime_yes" value="yes" />
+		<label for="anime_yes">{{yes}}</label>
+		<input class="with-gap" onchange="settings()" name="anime" type="radio" id="anime_no" value="no" />
+		<label for="anime_no">{{no}}</label>
+	</div>
+	</li>
+	<li>
+	<div class="collapsible-header">
+			<i class="material-icons">send</i>{{post}}
+	</div>
+	<div class="collapsible-body">
+		<h5>{{defaultcw}}</h5>
+		<input type="text" style="width:150px" id="cw-text">
+		<button class="btn waves-effect" style="width:100px;" onclick="settings()">{{set}}</button>
+		<br>
+		<h5>{{autocw}}</h5>
+		{{autocwwarn}}
+		<br>
+		<input type="text" style="width:50px" id="cw_sentence">{{lines}} {{above}} {{or}}
+		<input type="text" style="width:50px" id="cw_letters">{{letters}} {{above}}
+		<button class="btn waves-effect" style="width:100px;" onclick="settings()">{{set}}</button>
+		<br>
+		<h5>{{cws}}</h5>
+		<input class="with-gap" onchange="settings()" name="cws" type="radio" id="cws_yes" value="yes" />
+		<label for="cws_yes">{{yes}}</label>
+		<input class="with-gap" onchange="settings()" name="cws" type="radio" id="cws_no" value="no" />
+		<label for="cws_no">{{no}}
+		</label>
+		<br>
+		<h5>{{defaultvis}}</h5>
+		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="public" value="public" />
+		<label for="public">{{public}}</label>
+		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="unlisted" value="unlisted" />
+		<label for="unlisted">{{unlisted}}</label>
+		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="private" value="private" />
+		<label for="private">{{private}}</label>
+		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="direct" value="direct" />
+		<label for="direct">{{direct}}</label>
+		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="memory" value="memory" />
+		<label for="memory">{{memory}}</label>
+		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="server" value="server" />
+		<label for="server">{{useapi}}</label>
+		<br>
+		<h5>{{postimg}}</h5>
+		<input class="with-gap" onchange="settings()" name="img" type="radio" id="i_url" value="url" />
+		<label for="i_url">{{showurl}}</label>
+		<input class="with-gap" onchange="settings()" name="img" type="radio" id="i_no-act" value="no-act" />
+		<label for="i_no-act">{{nourl}}</label>
+		<br>
+		<input class="with-gap" onchange="settings()" name="img" type="radio" id="i_inline" value="inline" disabled />
+		<label for="i_inline">{{disabled}} 
+			<!--画像を投稿し、インラインで表示(Markdownに対応したインスタンスのみ。マルチアカウント環境では非推奨。)-->
+		</label>
+		<br>
+		<h5>{{box}}</h5>
+		<input class="with-gap" onchange="settings()" name="box" type="radio" id="bx_yes" value="yes" />
+		<label for="bx_yes">{{boxyes}}</label>
+		<input class="with-gap" onchange="settings()" name="box" type="radio" id="bx_no" value="no" />
+		<label for="bx_no">{{boxno}}
+		</label>
+		<input class="with-gap" onchange="settings()" name="box" type="radio" id="bx_abs" value="absolute" />
+		<label for="bx_abs">{{boxabs}}</label>
+		<br>
+		<h5>{{quote}}</h5>
+		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_simple" value="simple" />
+		<label for="q_simple">{{simple}}</label>
+		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_mention" value="mention" />
+		<label for="q_mention">{{mention}}</label>
+		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_full" value="full" />
+		<label for="q_full">{{full}}</label>
+		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_nothing" value="nothing" />
+		<label for="q_nothing">{{notqt}}</label>
+		<br>
+		<h5>{{main}}</h5>
+		{{mainwarn}}<br>
+		<input class="with-gap" onchange="settings()" name="main" type="radio" id="mn_remain" value="remain" />
+		<label for="mn_remain">{{lastacct}}</label>
+		<input class="with-gap" onchange="settings()" name="main" type="radio" id="mn_main" value="main" />
+		<label for="mn_main">{{usemainacct}}</label>
+		</label>
+		<h5>{{secondary}}</h5>
+		{{secwarn}}<br>
+		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-nothing" value="nothing" />
+		<label for="sec-nothing">{{nothing}}</label>
+		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-public" value="public" />
+		<label for="sec-public">{{public}}</label>
+		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-unlisted" value="unlisted" />
+		<label for="sec-unlisted">{{unlisted}}</label>
+		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-private" value="private" />
+		<label for="sec-private">{{private}}</label>
+		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-direct" value="direct" />
+		<label for="sec-direct">{{direct}}</label>
+		<input class="with-gap hide kirishima" onchange="settings()" name="sec" type="radio" id="sec-local" value="local" />
+		<label for="sec-local">{{localonly}}</label><span class="hide kirishima">非対応インスタンスでは「未収載」になります。</span>
+		<br>
+	</div>
+	</li>
+	<li>
+		<div class="collapsible-header">
+				<i class="material-icons">keyboard</i>{{keysc}}
+		</div>
+		<div class="collapsible-body">
+			<h5>{{iks}}</h5>
+			{{okswarn}}<br>
+			Ctrl+Shift+1:<input type="text" style="width:150px" id="oks-1">
+			<button onclick="oks(1)" class="btn waves-effect" style="width:100px;">{{set}}</button><br><br>
+			Ctrl+Shift+2:<input type="text" style="width:150px" id="oks-2">
+			<button onclick="oks(2)" class="btn waves-effect" style="width:100px;">{{set}}</button><br><br>
+			Ctrl+Shift+3:<input type="text" style="width:150px" id="oks-3">
+			<button onclick="oks(3)" class="btn waves-effect" style="width:100px;">{{set}}</button><br><br>
+
+		</div>
+	</li>
+	<li>
+		<div class="collapsible-header">
+				<i class="material-icons">bookmark</i>{{muteemp}}
+		</div>
+		<div class="collapsible-body">
+			<h5>{{climute}}</h5>
+			<div id="mute-cli"></div>
+			<h5>{{cliemp}}</h5>
+			{{cliwarn}}
+			<h5>{{wordmute}}</h5>
+			{{enter}}<br>
+			<div class="chips" id="wordmute" style="background-color:gray;"></div>
+			<button onclick="wordmuteSave()" class="btn waves-effect" style="width:100px;">{{set}}</button>
+			<h5>{{wordemp}}</h5>
+			{{enter}}<br>
+			<div class="chips" id="wordemp" style="background-color:gray;"></div>
+			<button onclick="wordempSave()" class="btn waves-effect" style="width:100px;">{{set}}</button>
+			<h5>{{useremp}}</h5>
+			{{useerempwarn}}
+			<span class="emphasized">　{{empcolorwarn}}　</span>
+		</div>
+	</li>
+	<li>
+		<div class="collapsible-header">
+			<i class="fa fa-spotify"></i>{{spotify}}
+		</div>
+		<div class="collapsible-body">
+			<h5>{{npProvider}}</h5>
+			{{npPeoviderWarn}}<br>
+			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="aimp" value="AIMP" />
+			<label for="aimp">AIMP</label>
+			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="itunes" value="ITUNES" />
+			<label for="itunes">iTunes</label>
+			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="npmm" value="MEDIAMONKEY" />
+			<label for="npmm">MediaMonkey</label>
+			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="winamp" value="WINAMP" />
+			<label for="winamp">Winamp</label>
+			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wmp" value="WMP" />
+			<label for="wmp">WMP</label>
+			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wlm" value="WLM" />
+			<label for="wlm">WLM</label>
+			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="cad" value="CAD" />
+			<label for="cad">CAD</label><br><br>
+			{{spotifynote1}}<i class="material-icons" style="font-size:24px;">music_note</i>{{spotifynote2}}<br>
+			<h5>{{link}}</h5>
+			{{linkwarn}}<br>
+			<div id="spotify-code-show" class="hide"><input type="text" id="spotify-code"><button onclick="spotifyAuth()" class="btn waves-effect" style="width:100px;">{{set}}</button></div>
+			<a onclick="spotifyConnect()" class="btn waves-effect nex" style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-enable"><i class="fa fa-spotify left"></i>{{connect}}</a>
+			<a onclick="spotifyDisconnect()" class="btn waves-effect nex disabled" style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-disable"><i class="fa fa-spotify left"></i>{{disconnect}}</a>
+			<h5>{{templeteedit}}</h5>
+			{{templeteeditwarn}}<br>
+			<textarea id="np-temp" class="materialize-textarea" data-length="500">#NowPlaying {song} / {album} / {artist}
+{url}</textarea><br>
+				{{templete1}}<br>
+				{{templete2}}<br>
+				{{templete3}}<br>
+				<span class="imas hide">CINDERELLA NowPlaying(imastodon.net限定)では作曲家{composer}/作詞家{lyricist}/BPM{bpm}が有効です。<br>
+                    CINDERELLA NowPlayingはimastodon.netにログインしているとき、トゥート欄に「//」を入力し、その後に曲名を入れることで可能です。</span><br>
+			<button onclick="spotifySave()" class="btn waves-effect" style="width:100px;">{{set}}</button>
+			<h5>{{postartwork}}</h5>
+			<span class="imas hide">この設定はCINDERELLA NowPlaying(imastodon.net限定)にも適用されます。</span><br>
+			<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_yes" value="yes" />
+			<label for="awk_yes">{{yes}}</label>
+			<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_no" value="no" />
+			<label for="awk_no">{{no}}</label>
+			<br>
+		</div>
+	</li>
+	<li>
+		<div class="collapsible-header">
+			<i class="material-icons">hearing</i>{{tts}}
+		</div>
+		<div class="collapsible-body">
+			<h5>{{speed}}</h5>
+			{{speedwarn}}<br>
+			<p class="range-field"><input type="range" id="voicespeed" min="1" max="100" value="10" style="width:500px; max-width:100%"/></p>
+			<h5>{{pitch}}</h5>
+			{{pitchwarn}}<br>
+			<p class="range-field"><input type="range" id="voicepitch" min="0" max="100" value="50" style="width:500px; max-width:100%"/></p>
+			<h5>{{vol}}</h5>
+			{{volwarn}}<br>
+			<p class="range-field"><input type="range" id="voicevol" min="0" max="100" value="100" style="width:500px; max-width:100%"/></p>
+			<h5>{{test}}</h5>
+			<input type="text" style="width:350px" id="voicetxt" value="{{sample}}">
+			<button class="btn waves-effect blue" style="width:150px;" onclick="voicePlay()" id="testplay">{{playstop}}</button><br>
+			<br>
+			<button class="btn waves-effect" style="width:100px;" onclick="voiceSettings()">{{set}}</button>
+		</div>
+	</li>
+</ul>
+<br>
+<a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;"><i class="material-icons left">undo</i>{{back}}</a>
+<br>
+<br>{{keyscs}}
+<li>Ctrl+1-9:{{keyscr}}</li>
+<li>N:{{keynew}}</li>
+<li>X:{{keytoggle}}</li>
+<li>Ctrl+Enter:{{keypost}}</li>
+<li>Ctrl+Enter+Shift:{{keysecpost}}</li>
+<li>Alt+Enter:{{secondary}}</li>
+<li>Ctrl+E:{{keyunread}}</li>
+<li>Esc:{{keyesc}}</li>
+<li>F5:{{keyf5}}</li>
+<li>Ctrl+Shift+C:{{keyclear}}</li>
+<li>Ctrl+Shift+S:{{setting}}</li>
+<li>Ctrl+Shift+M:{{keyacctman}}</li>
+<li>Ctrl+Shift+N:NowPlaying(Spotify)</li>
+<li>Ctrl+Shift+P:{{keyshowprof}}</li>
+<li>←/→:{{keyrow}}</li>
+<li>{{keyzoom}}</li>
+<div class="hide kirishima">
+以下Markdownに対応したインスタンスのみ。
+<br>
+<li>Ctrl+B/I/S/U:太字/斜字/取り消し/下線</li>
+<li>Shift+Enter:全角スペースを入れて改行</li>
+<li>Shift+Space:ゼロ幅スペース</li>
+以下アスタルテにログインしている場合のみ 
+<br>
+<li>Ctrl+R: 
+<a href="https://astarte.thedesk.top">アスタルテ暇人ランキング</a>を開く
+</li><br>
+</div>
+<button class="btn waves-effect red" style="width:100%; max-width:500px;" onclick="if(confirm('{{resetconfirm}}')){ localStorage.clear(); location.href='index.html'; }"><i class="material-icons left">delete</i>{{reset}}</button><br><br>
+<button class="btn waves-effect indigo" onclick="about()" style="width:100%; max-width:500px;"><i class="material-icons left">info</i>{{about}}</button>
+<a href="https://thedesk.top" class="btn waves-effect deep-purple lighten-2" style="width:100%; max-width:500px;"><i class="material-icons left">web</i>{{hp}}</a>
+<a href="https://enty.jp/Cutls" class="btn waves-effect purple lighten-2" style="width:100%; max-width:500px;"><i class="material-icons left">trending_up</i>{{support}}(Enty)</a>
+<a href="https://docs.thedesk.top" class="btn waves-effect blue darken-2" style="width:100%; max-width:500px;"><i class="material-icons left">list</i>{{help}}/Docs(Constructing)</a>
+<a href="https://github.com/cutls/TheDesk" class="btn waves-effect black lighten-2" style="width:100%; max-width:500px;"><i class="fa fa-github left"></i>GitHub</a>
+<a href="index.html?mode=user&code=Cutls@kirishima.cloud" class="btn waves-effect blue lighten-2" style="width:100%; max-width:500px;"><img src="../../img/desk_full.svg" class="left" width="25" style="padding-top:5px;">Developer: Cutls@kirishima.cloud</a>
+<a class="btn waves-effect red lighten-2" href="https://osushi.love/Cutls_P" target="_blank" style="width:100%; max-width:500px;"><img src="../../img/sushi.svg" class="left" width="25" style="padding-top:5px;">{{sushi}}</a>
+<br>
+Kyash<br>
+			<img src="../../img/kyash.png" width="100"><br>
+<a onclick="localStorage.removeItem('new-ver-skip'); location.href='index.html';" class="pointer">{{checkup}}</a><br>
+<a href="oss.html">OSS License{{ossJP}}</a><br>
+<span style="font-family:Open Sans;">Copyright &copy; TheDesk 2018 All Rights Reserved. 
+	Under <a href="https://github.com/cutls/TheDesk/blob/master/LICENSE">GNU General Public License v3.0</a> and <a href="https://thedesk.top/tos.html">Terms of Use</a>/<a href="https://thedesk.top/priv.html">Privacy Policy</a>
+	<br>Developer: Cutls P( 
+	<a href="index.html?mode=user&code=Cutls@kirishima.cloud">@Cutls@kirishima.cloud</a>)
+	<br>
+</span><br>
+TheDeskおよびCutls Pは<a href="https://donken.org/">被災地支援のためのマストドン研究会</a>をログイン機能提供等の形で応援しています。<br>
+タグタイムラインを開く:<a href="index.html?mode=tag&code=被災地支援のためのマストドン研究会">#被災地支援のためのマストドン研究会</a><br>
+<script type="text/javascript" src="../../js/common/about.js"></script>
+<script type="text/javascript" src="../../js/platform/end.js"></script>
+<script type="text/javascript" src="../../js/login/logout.js"></script>
+<script type="text/javascript" src="../../js/lang/lang.js"></script>
+<script type="text/javascript" src="../../js/ui/spotify.js"></script>
+<script type="text/javascript" src="../../js/tl/speech.js"></script>
+<script type="text/javascript" src="../../js/platform/pickr.js"></script>
+<script type="text/javascript" src="../../js/ui/settings.js"></script>
+<script type="text/javascript" src="../../js/ui/theme.js"></script>
+<script type="text/javascript" src="../../js/tl/date.js"></script>

app/view/make/update.sample.html

@@ -62,9 +62,6 @@ a,button,input,label,i{
 #prog{
     font-size:200%;
 }
-.linux, .mac{
-    display:none;
-}
 </style>
 <script type="text/javascript" src="../../js/common/jquery.js"></script>
 <script type="text/javascript" src="../../js/platform/first.js"></script>
@@ -78,11 +75,10 @@ a,button,input,label,i{
         <p>{{updatehere}}</p>
         <span id="now"></span>→<b id="ver"></b><br>
         <span id="det"></span><br>
-        <button class="waves-effect btn windows" onclick="update('install')" style="margin-left:15px;">{{installer}}</button>
-        <button class="waves-effect btn windows" onclick="update('portable')" style="margin-left:15px;">{{portable}}</button>
-        <span class="linux">{{snap}}<br></span>
-        <button class="waves-effect btn linux" onclick="update('linux')" style="margin-left:15px;">{{download}}</button>
-        <button class="waves-effect btn mac" onclick="update('mac')" style="margin-left:15px;">{{download}}</button>
+        <button class="waves-effect btn windows hide" onclick="update('install')" style="margin-left:15px;">{{installer}}</button>
+        <button class="waves-effect btn windows hide" onclick="update('portable')" style="margin-left:15px;">{{portable}}</button>
+        <button class="waves-effect btn linux hide" onclick="update('linux')" style="margin-left:15px;">{{download}}</button>
+        <button class="waves-effect btn mac hide" onclick="update('mac')" style="margin-left:15px;">{{download}}</button>
         <br>
         {{problem1}}<br>{{problem2}}
     </div>
@@ -184,12 +180,12 @@ function verck(){
     var remote=electron.remote;
     var platform=remote.process.platform;
     var bit=process.arch;
-	if(platform=="linux"){
-        $('.windows').hide()
-        $('.linux').show()
-	}else if(platform=="mac"){
-        $('.windows').hide()
-        $('.mac').show()
+	if(platform=="win32"){
+        $('.windows').removeClass("hide")
+	}else if(platform=="linux"){
+        $('.linux').removeClass("hide")
+	}else if(platform=="darwin"){
+        $('.mac').removeClass("hide")
 	}
 	var start="https://thedesk.top/ver.json";
 	fetch(start, {

app/view/ps/acct.html

@@ -18,15 +18,23 @@ body,html{overflow-y: scroll;}
 .colorsel{ display:flex; }
 .card .colorsel div:not(.exc){width:20px;height:20px;}
 .card .colorsel div.exc{width:40px;height:20px;}
+.first{
+      display:flex;
+      justify-content: center;
+      align-items:center
+}
+.first .hide-first{
+      display:none;
+}
 </style>
 <meta charset="utf-8">
-{{comment-start}}
+
 <script type="text/javascript">
 	var _jipt = [];
 	_jipt.push(['project', 'thedesk']);
 </script>
 <script type="text/javascript" src="https://cdn.crowdin.com/jipt/jipt.js"></script>
-{{comment-end}}
+
 </head>
 <body id="mainView">
 <script type="text/javascript" src="../../js/common/jquery.js"></script>
@@ -39,14 +47,17 @@ body,html{overflow-y: scroll;}
 <script type="text/javascript" src="../../js/ui/tips.js"></script>
 <script type="text/javascript" src="../../js/common/time.js"></script>
 <script type="text/javascript" src="../../js/common/modal.js"></script>
-<a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;">crwdns366:0crwdne366:0</a><br>
-<h5>crwdns365:0crwdne365:0</h5>
-<div id="acct-list"></div>
-<div class="divider"></div>
+<div class="hide-first">
+      <a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;">crwdns366:0crwdne366:0</a><br>
+      <h5>crwdns365:0crwdne365:0</h5>
+      <div id="acct-list"></div>
+      <div class="divider"></div>
+</div>
+<div>
 <h5>crwdns367:0crwdne367:0</h5><br>
 <div id="add">
 <div class="row">
-      <div class="col s6">
+      <div class="col s8">
             <input type="text" id="url" style="width:70%" placeholder="ex)mstdn.jp">
             <div id="ins-suggest"></div>
             crwdns368:0crwdne368:0<br>
@@ -56,7 +67,7 @@ body,html{overflow-y: scroll;}
                   <label for="misskey">crwdns382:0crwdne382:0</label><br>
             <button class="btn waves-effect" onclick="instance()">Login</button><br>
       </div>
-      <div class="col s6">
+      <div class="col s4">
             <span style="font-family:Open Sans;">Supports</span>
             <div id="support" class="collection transparent"></div>
       </div>
@@ -73,6 +84,8 @@ body,html{overflow-y: scroll;}
                   <input type="text" id="misskey-key" placeholder="crwdns373:0crwdne373:0">
                   <button class="btn waves-effect" onclick="misskeyLogin()">Auth</button><br>
             </div>
+      </div>
+<div class="hide-first">
 <h5>crwdns370:0crwdne370:0</h5>
 <div class="input-field" style="width:300px"><span data-trans="your_acct">crwdns371:0crwdne371:0</span>
       <br>
@@ -91,6 +104,7 @@ crwdns376:0crwdne376:0:<span id="ins-toot"></span>crwdns381:0crwdne381:0<br>
 crwdns377:0crwdne377:0:<span id="ins-user"></span>crwdns377:0crwdne377:0<br>
 crwdns379:0crwdne379:0:<span id="ins-per"></span>%<br>
 crwdns380:0crwdne380:0:<span id="ins-ver"></span>@<span id="ins-upd"></span><br>
+</div>
 <script type="text/javascript" src="../../js/ui/theme.js"></script>
 <script type="text/javascript" src="../../js/platform/end.js"></script>
 <script type="text/javascript" src="../../js/common/sha256.js"></script>

app/view/ps/index.html

@@ -13,13 +13,13 @@
 	<link href='../../css/sort.css' rel='stylesheet' type='text/css'>
 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans:300|Baloo+Bhai" rel="stylesheet">
 	<meta charset="utf-8">
-	{{comment-start}}
+	
 	<script type="text/javascript">
 		var _jipt = [];
 		_jipt.push(['project', 'thedesk']);
 	</script>
 	<script type="text/javascript" src="https://cdn.crowdin.com/jipt/jipt.js"></script>
-	{{comment-end}}
+	
 </head>
 <body>
 <script type="text/javascript" src="../../js/common/jquery.js"></script>
@@ -32,15 +32,13 @@
 <script type="text/javascript" src="../../js/common/modal.js"></script>
 <script type="text/javascript" src="../../js/ui/jquery-ui.min.js"></script>
 <script>
-var ver="Miria (17.2.0)";
+var ver="Usamin (18.2.1)";
 //betaを入れるとバージョンチェックしない
 //GitHubに上げるときはindex.htmlをちゃんとする。(index.start.html)
 //var ver="beta";
 //WinstoreではバージョンCK・言語・Misskeyトークンの機能が排除
-var winstore=false;
 var acct_id=0;
 var tlid=0;
-  verck(ver,winstore);
  </script>
 <textarea id="copy" style="top:-100px; position:fixed;"></textarea>
 <div id="tl">
@@ -54,7 +52,7 @@ var tlid=0;
 </div>
 </div>
 <div id="post-box" class="z-depth-5">
-<div id="post-bar">crwdns2402:0crwdne2402:0</div>
+<div id="post-bar" class="drag-bar"><span id="unreact">crwdns2402:0crwdne2402:0</span><span id="addreact" class="hide">Reaction</span></div>
 <!--トゥートボックス-->
 <div id="left-side">
 <div class="row" style="margin-bottom:0;">
@@ -125,7 +123,6 @@ var tlid=0;
 <span class="sml gray pointer anti-markdown mize">
 <a onclick="mdToggle()">Markdownエディタを表示</a>
 </span>
-<span id="suggest"></span>
 </div>
 <div class="col s12 mize" style="margin-top: 0; display:flex; justify-content: space-between">
 		<i class="waves-effect gray material-icons" id="nsfw" title="crwdns389:0crwdne389:0" onclick="nsfw()">visibility_off</i>
@@ -138,7 +135,7 @@ var tlid=0;
 </div>
 <div class="col s12 mize" style="margin-bottom:5px; padding:0;">
 	<div id="taglist"></div>
-<span id="preview" class="mize"></span>
+<div id="preview" class="mize"></div>
 <span class=" sml mize"><span data-trans="reply">crwdns396:0crwdne396:0</span>:
 <span id="rec">crwdns397:0crwdne397:0</span>/<span data-trans="file">crwdns399:0crwdne399:0</span>:
 <span id="mec">crwdns400:0crwdne400:0</span>/<span data-trans="vis">crwdns401:0crwdne401:0</span>:
@@ -202,11 +199,11 @@ var tlid=0;
 </div>
 </div>
 <div id="right-side">
+<div id="suggest"></div>
 <!--絵文字ピッカー-->
 <div id="emoji" class="hide">
 		<span class="gray sml">crwdns409:0crwdne409:0
 			<a onclick="emojiGet('true')" class="pointer">crwdns411:0crwdne411:0</a>
-			<i class="material-icons waves-effect" onclick="emojiToggle()" title="crwdns412:0crwdne412:0" data-trans-title="post_box_close">cancel</i>
 		<br>
 		</span>
 		<div id="emoji-list" class="" style="">
@@ -260,12 +257,8 @@ var tlid=0;
 	<div id="poll" class="hide">
 		<select id="poll-sel"  onchange="pollProviderCk()">
 			<option value="nothing">crwdns2408:0crwdne2408:0</option>
-			<option value="votedon">votedon.</option>
 			<option value="mastodon-poll">Mastodon(2.8~)</option>
 		</select>
-		<div id="votedon" class="poll-provider hide">
-	WIP
-		</div>
 		<div id="mastodon-poll" class="poll-provider hide">
 			<input type="text" class="mastodon-choice" placeholder="crwdns2414:0crwdne2414:01">
 			<input type="text" class="mastodon-choice" placeholder="crwdns2414:0crwdne2414:02">
@@ -308,14 +301,14 @@ var tlid=0;
 		<div class="collapsible-body toot-reset" id="toot-after">
 		</div>
 	</li>
-	<li>
+	<li class="dm-hide">
 		<div class="collapsible-header">
 		<i class="material-icons">people_outline</i>crwdns426:0crwdne426:0
 		</div>
 		<div class="collapsible-body toot-reset" id="toot-before">
 		</div>
 	</li>
-	<li>
+	<li class="dm-hide">
 		<div class="collapsible-header">
 		<i class="material-icons">person_outline</i>crwdns427:0crwdne427:0
 		</div>
@@ -329,7 +322,7 @@ var tlid=0;
 		<div class="collapsible-body toot-reset" id="toot-fav">
 		</div>
 	</li>
-	<li>
+	<li class="dm-hide">
 		<div class="collapsible-header">
 		<i class="text-darken-3 fa fa-retweet"></i>crwdns429:0crwdne429:0
 		</div>
@@ -337,6 +330,7 @@ var tlid=0;
 		</div>
 	</li>
 	</ul>
+	<div class="dm-hide">
 	crwdns430:0crwdne430:0(<i class="fa fa-retweet"></i>/<i class="fa fa-star"></i>crwdns431:0crwdne431:0)<br>
 	<div class="row">
 		<div class="col s6">
@@ -357,11 +351,11 @@ var tlid=0;
 	<div id="toot-after">
 	</div>
 	</div>
+</div>
 	<div class="modal-footer">
-	<a href="#!" class="waves-effect waves-green btn-flat" onclick="brws()">crwdns435:0crwdne435:0</a>
-	<a href="#!" class="waves-effect waves-green btn-flat" onclick="shot()">crwdns436:0crwdne436:0</a>
-	<a href="#!" class="waves-effect waves-green btn-flat" onclick="cbCopy()">crwdns437:0crwdne437:0</a>
-	<a href="#!" class="waves-effect waves-green btn-flat" onclick="cbCopy('emb')">crwdns438:0crwdne438:0</a>
+	<a href="#!" class="waves-effect waves-green btn-flat dm-hide" onclick="brws()">crwdns435:0crwdne435:0</a>
+	<a href="#!" class="waves-effect waves-green btn-flat dm-hide" onclick="cbCopy()">crwdns437:0crwdne437:0</a>
+	<a href="#!" class="waves-effect waves-green btn-flat dm-hide" onclick="cbCopy('emb')">crwdns438:0crwdne438:0</a>
 	<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">crwdns385:0crwdne385:0</a>
 	</div>
 	</div>
@@ -371,7 +365,7 @@ var tlid=0;
 			<div id="his-data-show">
 			<div class="his-float" id="his-float-data">
 			<div id="his-basic-prof">
-			<img src="../../img/loading.svg" id="his-prof">
+			<img src="../../img/loading.svg" id="his-prof" draggable="false">
 			<span id="his-name">Loading...</span><span class="gray" id="his-bot"></span>
 			<br>@
 			<span id="his-acct"></span><br>
@@ -524,6 +518,9 @@ var tlid=0;
 			</div>
 			</div>
 			</div>
+			<div class="his-float" id="his-float-blocked">
+				<div>{{blocked}}</div>
+			</div>
 			</div>
 			</div>
 			<div class="modal-footer">
@@ -582,18 +579,28 @@ var tlid=0;
 		<a href="https://thedesk.top" target="_blank">HP</a><br>
 		<a href="https://github.com/cutls/TheDesk" target="_blank">GitHub</a><br>
 		<br>
-			<div id="release-Miria_17-2-0" class="release-do" style="display:none; ">
+			<div id="release-Usamin_18-2-1" class="release-do" style="display:none; ">
 					<a href="https://code.cutls.com/thedesk-log/" target="_blank">開発の経緯</a><br>
 					<a href="https://ja.mstdn.wiki/TheDesk" target="_blank">機能一覧</a><br>
 					Entyでは支援者様限定で様々なTheDeskに関する記事をご覧いただけます。<br>
 					困ったときは、<a href="https://docs.thedesk.top">TheDesk Docs</a>をご覧ください。
-					<h5>Release Note Miria (17.2.0)</h5>
-					カスタムテーマを実装。Misskeyのテーマとの一定の互換性あり。<a href="https://assets.msky.cafe/" target="_blank">MiAS</a>から80を超えるテーマを入手。
-					<a href="https://thedesk.top/mias.html">注意点</a><br>
-					Misskeyのログイン方法変更につき、いちいちDevCenterに行かなくてもよくなりました。<br>
-					日本語でベタ書きしていたダイアログを一部多言語対応に変更。<br>
-					
-					<img class="emoji" draggable="false" alt="⚠" src="https://twemoji.maxcdn.com/2/72x72/26a0.png">TheDeskのMisskeyについての機能追加は終了しています。<br>
+					<h5>Release Note Usamin (18.2.0)</h5>
+					・<b>緊急の脆弱性修正</b>
+					<h5>Release Note Usamin (18.2.0)</h5>
+・tootsearchをひとつのカラムにしてエゴサが捗る<br>
+・イントロダクション(初回起動時)の挙動修正<br>
+・リンクプレビューを最大1行ずつに省略(タイトルと本文)<br>
+・ブロックされたときのプロフィールの動作(Mastodon 2.8~)<br>
+・(Misskey)MFM追加flipやjumpなど<br>
+・(Misskey)リストに対応<br>
+・(Misskey)カスタム絵文字に対応。カスタム絵文字によるリアクションに対応(対応インスタンスに限る)。<br>
+・<b>カスタム絵文字をゼロ幅スペースによる挿入に変更する機能</b><br>
+・一部機能の統廃合とバグの修正<br>
+・best-friends.chatやキュアスタ！、misskey.devをサポートインスタンスに追加
+			</div>
+			<div id="release-en">
+				<h5>Let's make it native!</h5>
+				<a href="https://translate.thedesk.top">Crowdin translation project</a>
 			</div>
 			<br><br>
 			<h3>crwdns473:0crwdne473:0</h3>
@@ -601,9 +608,9 @@ var tlid=0;
 			<a class="btn-share btn waves-effect waves-light purple lighten-2" href="https://enty.jp/Cutls" target="_blank">
   				crwdns475:0crwdne475:0
 			</a>
-			<a class="btn-share btn waves-effect waves-light red lighten-2" href="https://osushi.love/Cutls_P" target="_blank">
-  				crwdns479:0crwdne479:0
-			</a>
+			<a class="btn-share btn waves-effect waves-light red lighten-2" href="https://www.pixiv.net/fanbox/creator/28105985" target="_blank">
+				{{PixivSupport}}
+		</a>
 			<a class="btn-share btn waves-effect waves-light blue" href="https://www.amazon.co.jp/registry/wishlist/2TV35ZHHJPDSB" target="_blank">
 				crwdns476:0crwdne476:0
 			</a>
@@ -623,130 +630,162 @@ var tlid=0;
 		<i class="material-icons pointer" onclick="endPip()">close</i>
 		<div id="pip-content">
 		</div>
-    </div>
-<!--カラム追加-->
-<div id="add-box" class="hide z-depth-4 notf-box">
-<div class="input-field"><span data-trans="your_acct">crwdns494:0crwdne494:0</span>
-<br>
-<select id="add-acct-sel" class="acct-sel" style="color:black" onchange="addselCk()"></select>
-<label></label>
-</div>
-<div class="input-field">
-<div id="auth">
-<select id="type-sel" style="color:black">
-	<option value="local" data-trans="local">crwdns480:0crwdne480:0</option>
-	<option value="local-media" data-trans="local-media">crwdns481:0crwdne481:0</option>
-	<option value="home" data-trans="home">crwdns482:0crwdne482:0</option>
-	<option value="pub" data-trans="public">crwdns483:0crwdne483:0</option>
-	<option value="pub-media" data-trans="public-media">crwdns484:0crwdne484:0</option>
-	<option value="dm" data-trans="dm">crwdns485:0crwdne485:0</option>
-	<option value="mix" data-trans="integrated">crwdns486:0crwdne486:0</option>
-	<option value="plus" data-trans="plus">crwdns487:0crwdne487:0</option>
-	<option value="notf" data-trans="notification">crwdns488:0crwdne488:0</option>
-</select>
-<label data-trans="show_tl">crwdns489:0crwdne489:0</label>
-</div>
-<div id="noauth" class="hide">crwdns489:0crwdne489:0
-	<input id="noauth-url" type="text" class="validate" style="width:calc( 70% - 40px);" placeholder="e.g:mstdn.jp">
-</div>
-<div id="webview-add" class="hide">crwdns490:0crwdne490:0
-</div>
-</div>
-<button class="btn waves-effect blue " style="width:calc( 100% - 10px);" onclick="addColumn()" data-trans-i="add">
-	<i class="material-icons left">add</i>crwdns491:0crwdne491:0
-</button>
-<br>
-<br>
-</div>
-<!--検索-->
-<div id="src-box" class="hide notf-box z-depth-4" style="width:500px">
-		<div class="input-field">
-		<select id="src-acct-sel" class="acct-sel" onchange="trend()"></select>
-</div><div class="input-field">
-<i class="material-icons prefix">search</i>
-<input id="src" type="text" class="validate" style="width:calc( 60% - 40px);">
-<label for="src" data-trans="src">crwdns492:0crwdne492:0</label>
-<button class="btn waves-effect indigo" style="width:calc( 40% - 40px);" onclick="src()" data-trans-i="src">
-	<i class="material-icons left">search</i>crwdns492:0crwdne492:0
-</button>
-<br>
-<br>
-</div>
-<div id="search">
-<div id="src-contents">
-</div>
-</div>
-</div>
-<!--並べ替え-->
-<div id="sort-box" class="hide">
-<ul id="sort"></ul>
-<div>
-<button onclick="sort()" class="btn waves-effect nex" style="width:100%; max-width:300px;" data-trans-i="sort">
-	<i class="material-icons left">sort</i>crwdns493:0crwdne493:0
-</button>
-<button onclick="sortToggle()" class="btn waves-effect nex" style="width:100%; max-width:300px;" data-trans-i="close">
-		<i class="material-icons left">close</i>crwdns385:0crwdne385:0
-</button>
-</div>
-</div>
-<!--リスト-->
-<div id="list-box" class="hide notf-box z-depth-4">
-	<div class="input-field" style="width:calc( 100% - 100px);float:left">
-		<select id="list-acct-sel" class="acct-sel"></select>
-		<label>crwdns494:0crwdne494:0</label>
+		</div>
+<!--menu-->
+<div id="menu" class="z-depth-5" style="display:none">
+		<div id="menu-bar" class="drag-bar"></div>
+		<span class="cancel">
+				<i class="material-icons waves-effect" onclick="menu()" title="crwdns412:0crwdne412:0(X)">cancel</i>
+			</span>
+		<div id="menu-wrapper">
+		<div id="left-menu">
+			<div class="waves-effect active" onclick="addColumnMenu()" id="addColumnMenu"><i class="material-icons">add</i><span>crwdns512:0crwdne512:0</span></div>
+			<div class="waves-effect" onclick="sortMenu()" id="sortMenu"><i class="material-icons">sort</i><span>crwdns513:0crwdne513:0</span></div>
+			<div class="waves-effect" onclick="searchMenu()" id="searchMenu"><i class="material-icons">search</i><span>crwdns492:0crwdne492:0</span></div>
+			<div class="waves-effect" onclick="listMenu()" id="listMenu"><i class="material-icons">view_headline</i><span>crwdns444:0crwdne444:0</span></div>
+			<div class="waves-effect" onclick="filterMenu()" id="filterMenu"><i class="material-icons">filter_list</i><span>crwdns515:0crwdne515:0</span></div>
+			<div class="waves-effect" onclick="help()"><i class="material-icons">help_outline</i><span>crwdns1894:0crwdne1894:0</span></div>
+			<div class="waves-effect" onclick="location.href='index.html'"><i class="material-icons">refresh</i><span>crwdns518:0crwdne518:0</span></div>
+		</div>
+		<div id="right-menu">
+				<!--カラム追加-->
+<div id="add-box" class="hide menu-content">
+	<div class="input-field"><span data-trans="your_acct">crwdns494:0crwdne494:0</span>
+	<br>
+	<select id="add-acct-sel" class="acct-sel" style="color:black" onchange="addselCk()"></select>
+	<label></label>
 	</div>
-	<div style="float:left; padding-top:8px; padding-bottom:28px;">
-		<button class="btn waves-effect indigo" style="width:80px;" onclick="list()" data-trans-i="lists">
-			crwdns495:0crwdne495:0
-		</button>
+	<div class="input-field">
+	<div id="auth">
+	<input type="hidden" value="local" id="type-sel">
+	crwdns489:0crwdne489:0
+	<div id="tltype">
+		<div class="type waves-effect active" data-type="local"><div><i class="material-icons">people_outline</i></div><span>crwdns480:0crwdne480:0</span></div>
+		<div class="type waves-effect" data-type="local-media"><div><i class="material-icons">people_outline</i><i class="material-icons sub-icon">perm_media</i></div><span>crwdns481:0crwdne481:0</span></div>
+		<div class="type waves-effect" data-type="home"><div><i class="material-icons">home</i></div><span>crwdns482:0crwdne482:0</span></div>
+		<div class="type waves-effect" data-type="pub"><div><i class="material-icons">language</i></div><span>crwdns483:0crwdne483:0</span></div>
+		<div class="type waves-effect" data-type="pub-media"><div><i class="material-icons">language</i><i class="material-icons sub-icon">perm_media</i></div><span>crwdns484:0crwdne484:0</span></div>
+		<div class="type waves-effect" data-type="dm"><div><i class="material-icons">mail_outline</i></div><span>crwdns485:0crwdne485:0</span></div>
+		<div class="type waves-effect" data-type="mix"><div><i class="material-icons">merge_type</i></div><span>crwdns486:0crwdne486:0</span></div>
+		<div class="type waves-effect" data-type="plus"><div><i class="material-icons">merge_type</i><i class="material-icons sub-icon">reply</i></div><span>crwdns487:0crwdne487:0</span></div>
+		<div class="type waves-effect" data-type="notf"><div><i class="material-icons">notifications</i></div><span>crwdns488:0crwdne488:0</span></div>
+	</div>
+	</div>
+	<div id="noauth" class="hide">crwdns489:0crwdne489:0
+		<input id="noauth-url" type="text" class="validate" style="width:calc( 70% - 40px);" placeholder="e.g:mstdn.jp">
+	</div>
+	<div id="webview-add" class="hide">crwdns490:0crwdne490:0
+	</div>
+	</div>
+	<button class="btn waves-effect blue " style="width:calc( 100% - 10px);" onclick="addColumn()" data-trans-i="add">
+		<i class="material-icons left">add</i>crwdns491:0crwdne491:0
+	</button>
+	<br>
+	<br>
+	</div>
+	<!--検索-->
+	<div id="src-box" class="hide menu-content">
+			<div class="input-field">
+			<select id="src-acct-sel" class="acct-sel" onchange="trend()"></select>
+	</div><div class="input-field">
+	<input id="src" type="text" class="validate" style="width:60%">
+	<label for="src" data-trans="src">crwdns492:0crwdne492:0</label>
+	<button class="btn waves-effect indigo" style="width: 36%;padding: 0;padding-left: 15px;" onclick="src()" data-trans-i="src">
+		<i class="material-icons left" style="margin:0">search</i>crwdns492:0crwdne492:0
+	</button>
+	<br>
+	<br>
+	</div>
+	<div id="search">
+	<div id="src-contents">
+	</div>
+	</div>
+	</div>
+	<!--並べ替え-->
+	<div id="sort-box" class="hide menu-content">
+	<ul id="sort"></ul>
+	<div>
+	<button onclick="sort()" class="btn waves-effect nex" style="width:97.5%;" data-trans-i="sort">
+		<i class="material-icons left">sort</i>crwdns493:0crwdne493:0
+	</button>
+	</div>
+	</div>
+	<!--リスト-->
+	<div id="list-box" class="hide menu-content">
+		<div class="input-field" style="width:calc( 100% - 100px);float:left">
+			<select id="list-acct-sel" class="acct-sel"></select>
+			<label>crwdns494:0crwdne494:0</label>
+		</div>
+		<div style="float:left; padding-top:8px; padding-bottom:28px;">
+			<button class="btn waves-effect indigo" style="width:80px;" onclick="list()" data-trans-i="lists">
+				crwdns495:0crwdne495:0
+			</button>
+		</div>
+		<br><br>
+		<div id="lists"></div>
+		<div id="lists-user"></div>
+		<input type="text" style="width:150px" id="list-add" placeholder="crwdns465:0crwdne465:0">
+			<button class="btn waves-effect" style="width:120px;" onclick="makeNewList()">crwdns445:0crwdne445:0</button>
+	</div>
+	<!--フィルター-->
+	<div id="filter-box" class="hide menu-content">
+		<div class="input-field" style="width:calc( 100% - 100px);float:left">
+			<select id="filter-acct-sel" class="acct-sel"></select>
+			<label>crwdns494:0crwdne494:0</label>
+		</div>
+		<div style="float:left; padding-top:8px; padding-bottom:28px;">
+			<button class="btn waves-effect indigo" style="width:80px;" onclick="filter()" data-trans-i="filters">
+				crwdns495:0crwdne495:0
+			</button>
+		</div>
+		<div id="filtered-words"></div>
+		<input type="hidden" id="filter-edit-id">
+		<input type="text" style="width:150px" id="filter-add-word" placeholder="crwdns496:0crwdne496:0"><br>
+		crwdns497:0crwdne497:0<br>
+		<input type="checkbox" class="filled-in" id="home_filter" value="home" />
+			<label for="home_filter">crwdns482:0crwdne482:0</label>
+		<input type="checkbox" class="filled-in" id="local_filter" value="public" />
+			<label for="local_filter">crwdns480:0crwdne480:0</label>
+		<input type="checkbox" class="filled-in" id="notf_filter" value="notifications" />
+			<label for="notf_filter">crwdns488:0crwdne488:0</label>
+		<input type="checkbox" class="filled-in" id="conv_filter" value="thread" />
+			<label for="conv_filter">crwdns498:0crwdne498:0</label><br>
+			crwdns499:0crwdne499:0<br>
+		<input type="checkbox" class="filled-in" id="wholeword_filter" value="1" />
+			<label for="wholeword_filter">crwdns500:0crwdne500:0</label><br>
+		<span class="sml">crwdns501:0crwdne501:0</span><br>
+		<input type="checkbox" class="filled-in" id="except_filter" value="1" />
+			<label for="except_filter">crwdns502:0crwdne502:0</label><br>
+		<span class="sml">crwdns503:0crwdne503:0</span><br>
+		crwdns504:0crwdne504:0<span class="sml">crwdns505:0crwdne505:0<b>crwdns506:0crwdne506:0</b></span><br><br>
+		<input type="number" style="width:50px" id="days_filter" placeholder="d" value="0">crwdns507:0crwdne507:0
+		<input type="number" style="width:50px" id="hours_filter" placeholder="h" value="0">crwdns508:0crwdne508:0
+		<input type="number" style="width:50px" id="mins_filter" placeholder="m" value="0">crwdns509:0crwdne509:0<br>
+		Quick:<a onclick="filterTime(0,0,30)" class="pointer">30crwdns509:0crwdne509:0</a>/
+		<a onclick="filterTime(0,1,0)" class="pointer">1crwdns508:0crwdne508:0</a>/
+		<a onclick="filterTime(0,6,0)" class="pointer">6crwdns508:0crwdne508:0</a>/
+		<a onclick="filterTime(0,12,0)" class="pointer">12crwdns508:0crwdne508:0</a>/
+		<a onclick="filterTime(1,0,0)" class="pointer">1crwdns507:0crwdne507:0</a>/
+		<a onclick="filterTime(7,0,0)" class="pointer">7crwdns507:0crwdne507:0</a>/
+		<a onclick="filterTime(0,0,0)" class="pointer">{{unlimited}}</a><br>
+		<button class="btn waves-effect" style="width:120px;" onclick="makeNewFilter()" id="add-filter-btn">crwdns491:0crwdne491:0</button><br>
+		<span class="sml">crwdns510:0crwdne510:0</span>
 	</div>
-	<br><br>
-	<div id="lists"></div>
-	<div id="lists-user"></div>
-	<input type="text" style="width:150px" id="list-add" placeholder="crwdns465:0crwdne465:0">
-		<button class="btn waves-effect" style="width:120px;" onclick="makeNewList()">crwdns445:0crwdne445:0</button>
 </div>
-<!--フィルター-->
-<div id="filter-box" class="hide notf-box z-depth-4">
-	<div class="input-field" style="width:calc( 100% - 100px);float:left">
-		<select id="filter-acct-sel" class="acct-sel"></select>
-		<label>crwdns494:0crwdne494:0</label>
-	</div>
-	<div style="float:left; padding-top:8px; padding-bottom:28px;">
-		<button class="btn waves-effect indigo" style="width:80px;" onclick="filter()" data-trans-i="filters">
-			crwdns495:0crwdne495:0
-		</button>
-	</div>
-	<div id="filtered-words"></div>
-	<input type="hidden" id="filter-edit-id">
-	<input type="text" style="width:150px" id="filter-add-word" placeholder="crwdns496:0crwdne496:0"><br>
-	crwdns497:0crwdne497:0<br>
-	<input type="checkbox" class="filled-in" id="home_filter" value="home" />
-	  <label for="home_filter">crwdns482:0crwdne482:0</label>
-	<input type="checkbox" class="filled-in" id="local_filter" value="public" />
-	  <label for="local_filter">crwdns480:0crwdne480:0</label>
-	<input type="checkbox" class="filled-in" id="notf_filter" value="notifications" />
-	  <label for="notf_filter">crwdns488:0crwdne488:0</label>
-	<input type="checkbox" class="filled-in" id="conv_filter" value="thread" />
-	  <label for="conv_filter">crwdns498:0crwdne498:0</label><br>
-	  crwdns499:0crwdne499:0<br>
-	<input type="checkbox" class="filled-in" id="wholeword_filter" value="1" />
-	  <label for="wholeword_filter">crwdns500:0crwdne500:0</label><br>
-	<span class="sml">crwdns501:0crwdne501:0</span><br>
-	<input type="checkbox" class="filled-in" id="except_filter" value="1" />
-	  <label for="except_filter">crwdns502:0crwdne502:0</label><br>
-	<span class="sml">crwdns503:0crwdne503:0</span><br>
-	crwdns504:0crwdne504:0<span class="sml">crwdns505:0crwdne505:0<b>crwdns506:0crwdne506:0</b></span><br><br>
-	<input type="number" style="width:50px" id="days_filter" placeholder="d" value="0">crwdns507:0crwdne507:0
-	<input type="number" style="width:50px" id="hours_filter" placeholder="h" value="0">crwdns508:0crwdne508:0
-	<input type="number" style="width:50px" id="mins_filter" placeholder="m" value="0">crwdns509:0crwdne509:0
-	<button class="btn waves-effect" style="width:120px;" onclick="makeNewFilter()" id="add-filter-btn">crwdns491:0crwdne491:0</button><br>
-	<span class="sml">crwdns510:0crwdne510:0</span>
+		</div>
+		<a onclick="about()" class="nex waves-effect">
+				<i class="material-icons" style="font-size: 1rem;">info</i>{{about}}
+		</a>&nbsp;|&nbsp;
+		<a onclick="bottomReverse()" class="nex waves-effect">
+				<i class="material-icons" style="font-size: 1rem;">swap_horiz</i>crwdns517:0crwdne517:0
+		</a>
 </div>
 <div id="main">
 <!--TLのTL-->
 <div id="timeline-container">
-	crwdns511:0crwdne511:0
+	<div id="something-wrong">
+		<div>crwdns511:0crwdne511:0</div>
+	</div>
 </div>
 </div>
 </div>
@@ -757,52 +796,23 @@ var tlid=0;
 								<button id="posttgl" class="btn waves-effect indigo" style="width: 100%;height: 2.5rem;line-height: 0;margin: 0;">
 									<i class="material-icons" style="position: relative; top: 5px; font-size: 1.5rem; text-align: center; margin-right: 10px;">edit</i>crwdns388:0crwdne388:0
 								</button>
-        </div>
+				</div>
         <div class="leftside reverse" id="group">
-            <div class="btnsgroup"><span class="grouptitle">Columns:</span>
-                <a onclick="addToggle()" class="nex waves-effect" data-trans-i="add" id="add-tgl">
-                    <i class="material-icons nex" title="crwdns512:0crwdne512:0" data-trans-title="column_add">add</i>
-                </a>
-                <a onclick="sortToggle()" class="nex waves-effect">
-                    <i class="material-icons nex big-icon" title="crwdns513:0crwdne513:0" data-trans-title="sort">sort</i>
-                </a>
-            </div>
-            <div class="btnsgroup"><span class="grouptitle">Accounts:</span>
-                <a href="acct.html" class="nex waves-effect">
-                    <i class="material-icons nex big-icon" title="crwdns514:0crwdne514:0(Ctrl+Shift+M)" data-trans-title="manager">account_circle</i>
-                </a>
-                <a onclick="srcToggle()" class="nex waves-effect" id="src-tgl">
-                    <i class="material-icons" title="crwdns492:0crwdne492:0" data-trans-title="src">search</i>
-                </a>
-                <a onclick="listToggle()" class="nex waves-effect" id="list-tgl">
-                    <i class="material-icons" title="crwdns444:0crwdne444:0" data-trans-title="list">view_headline</i>
-                </a>
-                <a onclick="filterToggle()" class="nex waves-effect" id="filter-tgl">
-                    <i class="material-icons" title="crwdns515:0crwdne515:0" data-trans-title="filter">filter_list</i>
-                </a>
-            </div>
-			<div class="btnsgroup"><span class="grouptitle">Preferences:</span>
-				<a onclick="bottomReverse()" class="nex waves-effect">
-                    <i class="material-icons nex" title="crwdns517:0crwdne517:0" data-trans-title="reverse">swap_horiz</i>
-                </a>
-                <a href="setting.html" class="nex waves-effect">
-                    <i class="material-icons nex" title="crwdns516:0crwdne516:0(Ctrl+Shift+S)" data-trans-title="setting">settings</i>
-                </a>
-                <a href="index.html" class="nex mize waves-effect">
-                    <i class="material-icons nex" title="crwdns518:0crwdne518:0(F5/⌘+R)" data-trans-title="reload">refresh</i>
-                </a>
-                <a onclick="nano()" class="nex waves-effect">
-                    <i class="material-icons" title="crwdns519:0crwdne519:0TheDesk Nano" data-trans-title="nano_desp">remove_from_queue</i>
-                </a>
-                <a onclick="window.open('https://astarte.thedesk.top');" class="setting nex waves-effect" target="_blank" id="ranking-btn" style="display:none;">
-                    <i class="material-icons nex" title="アスタルテランキング">timeline</i>
-				</a>
-				<a href="https://docs.thedesk.top" class="setting nex waves-effect" target="_blank">
-                    <i class="material-icons nex" title="crwdns1894:0crwdne1894:0">help_outline</i>
-				</a>
-            </div>
-        </div>
-    </div>
+						<div class="btnsgroup">
+							<a href="acct.html" class="nex waves-effect">
+                    <i class="material-icons nex big-icon" title="crwdns514:0crwdne514:0(Ctrl+Shift+M)">account_circle</i>
+              </a>
+							<a href="setting.html" class="nex waves-effect">
+									<i class="material-icons nex" title="crwdns516:0crwdne516:0(Ctrl+Shift+S)">settings</i>
+							</a>
+							<a onclick="nano()" class="nex waves-effect">
+									<i class="material-icons" title="crwdns519:0crwdne519:0TheDesk Nano" data-trans-title="nano_desp">remove_from_queue</i>
+							</a>
+							<a onclick="menu()" class="nex waves-effect" id="list-tgl">
+									<i class="material-icons" title="crwdns444:0crwdne444:0">apps</i>
+							</a>
+						</div>
+    </div></div>
     <div>
 		<div id="tips-menu">
 			<div class="btnsgroup" style="height:34px"><span class="grouptitle">Tips:</span>
@@ -858,6 +868,7 @@ var tlid=0;
 <script type="text/javascript" src="../../js/tl/speech.js"></script>
 <script type="text/javascript" src="../../js/ui/post-box.js"></script>
 <script type="text/javascript" src="../../js/ui/layout.js"></script>
+<script type="text/javascript" src="../../js/post/emoji.js"></script>
 <script type="text/javascript" src="../../js/login/instance.js"></script>
 <script type="text/javascript" src="../../js/login/login.js"></script>
 <script type="text/javascript" src="../../js/ui/img.js"></script>
@@ -871,7 +882,6 @@ var tlid=0;
 <script type="text/javascript" src="../../js/post/img.js"></script>
 <script type="text/javascript" src="../../js/post/status.js"></script>
 <script type="text/javascript" src="../../js/post/misskeystatus.js"></script>
-<script type="text/javascript" src="../../js/post/emoji.js"></script>
 <script type="text/javascript" src="../../js/post/suggest.js"></script>
 <script type="text/javascript" src="../../js/post/bb-md.js"></script>
 <script type="text/javascript" src="../../js/userdata/showOnTL.js"></script>
@@ -879,4 +889,5 @@ var tlid=0;
 <script type="text/javascript" src="../../js/userdata/prof-edit.js"></script>
 <script type="text/javascript" src="../../js/emoji/emojipack.js"></script>
 <script type="text/javascript" src="../../js/emoji/default-emoji.js"></script>
-<script type="text/javascript" src="../../js/platform/end.js"></script>
+<script type="text/javascript" src="../../js/platform/end.js"></script>
+<script type="text/javascript" src="../../js/ui/menu.js"></script>

app/view/ps/setting.html

@@ -1,14 +1,15 @@
 <!doctype html>
 <html lang="ps">
+
 <head>
 	<title>Settings - TheDesk</title>
-	{{comment-start}}
+	
 	<script type="text/javascript">
 		var _jipt = [];
 		_jipt.push(['project', 'thedesk']);
 	</script>
 	<script type="text/javascript" src="https://cdn.crowdin.com/jipt/jipt.js"></script>
-	{{comment-end}}
+	
 	<meta content="width=device-width,initial-scale=1.0" name="viewport">
 	<link href="../../css/materialize.css" type="text/css" rel="stylesheet">
 	<link href="../../css/themes.css" type="text/css" rel="stylesheet">
@@ -17,493 +18,424 @@
 	<link href='../../css/font-awesome.css' rel='stylesheet' type='text/css'>
 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans:300" rel="stylesheet">
 	<meta charset="utf-8">
-	<style>input{max-height:50px!important} .pcr-result{height:1rem !important;}</style>
+	<style>
+		input {
+			max-height: 50px !important
+		}
+
+		.pcr-result {
+			height: 1rem !important;
+		}
+	</style>
 </head>
+
 <body id="mainView" style="overflow-y:scroll">
-<script type="text/javascript" src="../../js/common/jquery.js"></script>
-<script type="text/javascript" src="../../js/platform/first.js"></script>
-<script type="text/javascript" src="../../js/common/materialize.js"></script>
-<script type="text/javascript" src="../../js/lang/lang.ps.js"></script>
-<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
+	<script type="text/javascript" src="../../js/common/jquery.js"></script>
+	<script type="text/javascript" src="../../js/platform/first.js"></script>
+	<script type="text/javascript" src="../../js/common/materialize.js"></script>
+	<script type="text/javascript" src="../../js/lang/lang.ps.js"></script>
+	<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
+	<script src="../../node_modules/vue/dist/vue.min.js"></script>
+	<script type="text/javascript" src="setting.vue.js"></script>
 
-<h4>crwdns524:0crwdne524:0</h4>
-<ul class="collapsible" data-collapsible="accordion">
-	<li>
-	<div class="collapsible-header">
-			<i class="material-icons">desktop_windows</i>crwdns529:0crwdne529:0
-	</div>
-	<div class="collapsible-body">
-		<h5>crwdns530:0crwdne530:0</h5>
-		To translate with Crowdin, you have to login Crowdin and restart TheDesk when login is finished.<br>
-		<a href="../ja/setting.html" onclick="changelang('ja')">日本語(Japanese)</a>/<a href="../en/setting.html" onclick="changelang('en')">English</a>/<a href="../ps/setting.html" onclick="changelang('ps')">Crowdin web translate</a>/
-		<h5>crwdns531:0crwdne531:0</h5>
-		<button onclick="exportSettings()" class="btn waves-effect lime darken-3" style="width:100%; max-width:200px;">crwdns533:0crwdne533:0</button>
-		<button onclick="importSettings()" class="btn waves-effect cyan darken-3" style="width:100%; max-width:200px;">crwdns532:0crwdne532:0</button>
-		<br>
-		<h5>crwdns1898:0crwdne1898:0</h5>crwdns536:0crwdne536:0
-		<br>
-		<input type="text" style="width:50px" id="popup">crwdns537:0crwdne537:0
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">crwdns525:0crwdne525:0</button>
-		<br>
-		<h5>crwdns538:0crwdne538:0</h5>
-		crwdns539:0crwdne539:0<br><a onclick="notftest()" class="pointer">crwdns540:0crwdne540:0</a>
-		<br>
-		<input class="with-gap" onchange="settings()" name="notf" type="radio" id="ntf_yes" value="yes" />
-		<label for="ntf_yes">crwdns526:0crwdne526:0</label>
-		<input class="with-gap" onchange="settings()" name="notf" type="radio" id="ntf_no" value="no" />
-		<label for="ntf_no">crwdns527:0crwdne527:0</label>
-		<br>
-		<h5>crwdns2376:0crwdne2376:0</h5>crwdns542:0crwdne542:0
-		<br>
-		<input type="text" style="width:50px" id="width">pxcrwdns543:0crwdne543:0
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">crwdns525:0crwdne525:0</button>
-		<br>
-		<h5>crwdns2378:0crwdne2378:0</h5>crwdns2380:0crwdne2380:0
-		<input type="text" style="width:50px" id="fixwidth">pxcrwdns543:0crwdne543:0
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">crwdns525:0crwdne525:0</button>
-		<br>
-		<h5>crwdns544:0crwdne544:0</h5>
-		crwdns1900:0crwdne1900:0<br>
-		<button class="btn waves-effect" style="width:100px;" onclick="font()">crwdns1896:0crwdne1896:0</button><br>
-		<div id="fonts" class="hide" style="overflow-y:scroll; width:300px; height:500px;"></div>
-		<br>
-		<input type="text" style="width:150px" id="font">
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">crwdns525:0crwdne525:0</button>
-		<br>
-		<h5>crwdns546:0crwdne546:0</h5>
-		<span style="font-size:15px">15px(crwdns549:0crwdne549:0)</span>
-		<br>
-		<input type="text" style="width:50px" id="size">px 
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">crwdns525:0crwdne525:0</button><br>
-		<h5>crwdns547:0crwdne547:0</h5>
-		crwdns548:0crwdne548:0<br>
-		<button class="btn waves-effect" style="width:100px;" onclick="savefolder()">crwdns528:0crwdne528:0</button>
-		<br>
-	</div>
-	</li>
-	<li>
-	<div class="collapsible-header">
-			<i class="material-icons">color_lens</i>crwdns534:0crwdne534:0
-	</div>
-	<div class="collapsible-body">
-		<h4>crwdns2422:0crwdne2422:0</h4>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="black" value="black" />
-		<label for="black">Black</label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="white" value="white" />
-		<label for="white">White</label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo" value="indigo" />
-		<label for="indigo">Indigo<span class="imas hide">(エンドレスナイト)</span></label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="brown" value="brown" />
-		<label for="brown">Brown<span class="imas hide">(ビタースイート・タイム)</span></label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="green" value="green" />
-		<label for="green">Green<span class="imas hide">(ユースフルロマンス)</span></label>
-		<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom" value="custom" />
-		<label for="custom">Custom</label>
-		<div style="width:300px" id="sel-selector">
-			<select id="custom-sel-sel" class="custom-sel" onchange="customSel()"></select>
-		</div>
-		<h4>crwdns2424:0crwdne2424:0</h4>
-		<div style="width:300px" id="edit-selector" data-add="crwdns2436:0crwdne2436:0">
-			<select id="custom-edit-sel" class="custom-sel" onchange="custom()">
-				<option value="add_new">crwdns2436:0crwdne2436:0</option>
-			</select>
-		</div>
-		<h5>crwdns2438:0crwdne2438:0</h5>
-		<input type="text" style="width:300px" id="custom_name" placeholder="crwdns2438:0crwdne2438:0...">
-		<h5>crwdns2440:0crwdne2440:0</h5>
-		<div class="input-field"><textarea style="width:300px" id="custom_desc" class="materialize-textarea" placeholder="crwdns2440:0crwdne2440:0..."></textarea></div>
-		<h5>crwdns2426:0crwdne2426:0</h5>
-		<input class="with-gap" name="derection" type="radio" id="dark" value="dark" checked="true" />
-		<label for="dark">Dark</label>
-		<input class="with-gap" name="derection" type="radio" id="light" value="light" />
-		<label for="light">Light</label>
-		<div id="pickers">
-		<div>
-			<h5>Primary</h5>crwdns2430:0crwdne2430:0
-			<div id="color-picker0-wrap"><div class="color-picker" id="color-picker0"></div></div>
-			<input type="hidden" id="color-picker0_value">
-		</div>
-		<div>
-			<h5>Secondary</h5>crwdns2428:0crwdne2428:0
-			<div id="color-picker1-wrap"><div class="color-picker" id="color-picker1"></div></div>
-			<input type="hidden" id="color-picker1_value">
-		</div>
-		<div>
-			<h5>Texts</h5>crwdns2432:0crwdne2432:0
-			<div id="color-picker2-wrap"><div class="color-picker" id="color-picker2"></div></div>
-			<input type="hidden" id="color-picker2_value">
-		</div>
-		<div>
-			<h5>Accent</h5>crwdns2434:0crwdne2434:0
-			<div id="color-picker3-wrap"><div class="color-picker" id="color-picker3"></div></div>
-			<input type="hidden" id="color-picker3_value">
-		</div>
-		</div>
-		<button class="btn-large waves-effect" onclick="customComp()">crwdns528:0crwdne528:0</button>&nbsp;<button class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">{{delete}}</button><br><br>
-		<input type="text" style="width:300px" id="custom_json" class="materialize-textarea" placeholder="JSON style" readonly><br>
-		crwdns2442:0crwdne2442:0
-		<h4>crwdns2444:0crwdne2444:0</h4>
-		{{cImpWarn}}<br>
-		<input type="text" style="width:300px" id="custom_import" class="materialize-textarea" placeholder="JSON/JSON5 style">
-		<button class="btn waves-effect" onclick="customImp()">crwdns532:0crwdne532:0</button><br>
-	</li>
-	<li>
-	<div class="collapsible-header">
-			<i class="material-icons">reorder</i>crwdns550:0crwdne550:0
-	</div>
-	<div class="collapsible-body">
-		<h5>crwdns551:0crwdne551:0</h5>crwdns552:0crwdne552:0
-		<br>crwdns553:0crwdne553:0
-		<br>crwdns554:0crwdne554:0
-		<br>
-		<input class="with-gap" onchange="settings()" onchange="settings()" name="time" type="radio" id="relative" value="relative" />
-		<label for="relative">crwdns555:0crwdne555:0</label>
-		<input class="with-gap" onchange="settings()" name="time" type="radio" id="absolute" value="absolute" />
-		<label for="absolute">crwdns1902:0crwdne1902:0</label>
-		<input class="with-gap" onchange="settings()" name="time" type="radio" id="double" value="double" />
-		<label for="double">crwdns557:0crwdne557:0</label>
-		<input class="with-gap" onchange="settings()" name="time" type="radio" id="medium" value="medium" />
-		<label for="medium">crwdns558:0crwdne558:0</label>
-		<h5>crwdns1904:0crwdne1904:0</h5>crwdns1906:0crwdne1906:0
-		<br>
-		<input class="with-gap" onchange="settings()" name="ul" type="radio" id="ul_yes" value="yes" />
-		<label for="ul_yes">crwdns526:0crwdne526:0</label>
-		<input class="with-gap" onchange="settings()" name="ul" type="radio" id="ul_no" value="no" />
-		<label for="ul_no">crwdns527:0crwdne527:0</label>
-		<br>
-		<h5>crwdns561:0crwdne561:0</h5>crwdns562:0crwdne562:0
-		<br>
-		<input class="with-gap" onchange="settings()" name="nsfw" type="radio" id="n_yes" value="yes" />
-		<label for="n_yes">crwdns526:0crwdne526:0</label>
-		<input class="with-gap" onchange="settings()" name="nsfw" type="radio" id="n_no" value="no" />
-		<label for="n_no">crwdns527:0crwdne527:0</label>
-		<br>
-		<h5>crwdns563:0crwdne563:0</h5>
-		<input class="with-gap" onchange="settings()" name="cw" type="radio" id="c_yes" value="yes" />
-		<label for="c_yes">crwdns526:0crwdne526:0</label>
-		<input class="with-gap" onchange="settings()" name="cw" type="radio" id="c_no" value="no" />
-		<label for="c_no">crwdns527:0crwdne527:0</label>
-		<br>
-		<h5>crwdns564:0crwdne564:0</h5>
-		<input class="with-gap" onchange="settings()" name="rp" type="radio" id="rp_hidden" value="hidden" />
-		<label for="rp_hidden">crwdns565:0crwdne565:0</label>
-		<input class="with-gap" onchange="settings()" name="rp" type="radio" id="rp_all" value="all" />
-		<label for="rp_all">crwdns566:0crwdne566:0</label>
-		<br>
-		<h5>crwdns567:0crwdne567:0</h5>
-		<input class="with-gap" onchange="settings()" name="gif" type="radio" id="g_yes" value="yes" />
-		<label for="g_yes">crwdns526:0crwdne526:0</label>
-		<input class="with-gap" onchange="settings()" name="gif" type="radio" id="g_no" value="no" />
-		<label for="g_no">crwdns527:0crwdne527:0</label>
-		<br>
-		<h5>crwdns572:0crwdne572:0</h5>
-		<input class="with-gap" onchange="settings()" name="tag" type="radio" id="t_all" value="all" />
-		<label for="t_all">crwdns573:0crwdne573:0</label>
-		<input class="with-gap" onchange="settings()" name="tag" type="radio" id="t_local" value="local" />
-		<label for="t_local">crwdns574:0crwdne574:0</label>
-		<br>
-		<h5>crwdns575:0crwdne575:0</h5>
-		<input class="with-gap" onchange="settings()" name="via" type="radio" id="via_yes" value="yes" />
-		<label for="via_yes">crwdns526:0crwdne526:0</label>
-		<input class="with-gap" onchange="settings()" name="via" type="radio" id="via_hide" value="hide" />
-		<label for="via_hide">crwdns527:0crwdne527:0</label>
-		<br>
-		<h5>crwdns576:0crwdne576:0</h5>
-		crwdns577:0crwdne577:0<br>
-		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_yes" value="yes" />
-		<label for="mov_yes">crwdns578:0crwdne578:0</label>
-		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_click" value="click" />
-		<label for="mov_click">crwdns579:0crwdne579:0</label>
-		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_no" value="no" />
-		<label for="mov_no">crwdns527:0crwdne527:0</label>
-		<br>
-		<h5>crwdns580:0crwdne580:0</h5>
-		<input class="with-gap" onchange="settings()" name="notfm" type="radio" id="notfm_yes" value="yes" />
-		<label for="notfm_yes">crwdns526:0crwdne526:0</label>
-		<input class="with-gap" onchange="settings()" name="notfm" type="radio" id="notfm_no" value="no" />
-		<label for="notfm_no">crwdns527:0crwdne527:0</label>
-		<br>
-		<h5>crwdns581:0crwdne581:0</h5>
-		crwdns582:0crwdne582:0
-		<br>
-		<input type="text" style="width:50px" id="sentence">crwdns583:0crwdne583:0 crwdns543:0crwdne543:0 crwdns585:0crwdne585:0
-		<input type="text" style="width:50px" id="letters">crwdns584:0crwdne584:0 crwdns543:0crwdne543:0
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">crwdns525:0crwdne525:0</button>
-		<br>
-		<h5>crwdns586:0crwdne586:0
-        </h5>
-		<input type="text" style="width:50px" id="img-height">px
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">crwdns525:0crwdne525:0</button>
-		<br>
-		<h5>crwdns1908:0crwdne1908:0</h5>
-		crwdns1910:0crwdne1910:0<br>
-		<input class="with-gap" onchange="settings()" name="ticker" type="radio" id="ticker_yes" value="yes" />
-		<label for="ticker_yes">crwdns526:0crwdne526:0</label>
-		<input class="with-gap" onchange="settings()" name="ticker" type="radio" id="ticker_no" value="no" />
-		<label for="ticker_no">crwdns527:0crwdne527:0</label>
-		<br>
-		<h5>crwdns2446:0crwdne2446:0</h5>
-		<input class="with-gap" onchange="settings()" name="anime" type="radio" id="anime_yes" value="yes" />
-		<label for="anime_yes">crwdns526:0crwdne526:0</label>
-		<input class="with-gap" onchange="settings()" name="anime" type="radio" id="anime_no" value="no" />
-		<label for="anime_no">crwdns527:0crwdne527:0</label>
-	</div>
-	</li>
-	<li>
-	<div class="collapsible-header">
-			<i class="material-icons">send</i>crwdns587:0crwdne587:0
-	</div>
-	<div class="collapsible-body">
-		<h5>crwdns590:0crwdne590:0</h5>
-		<input type="text" style="width:150px" id="cw-text">
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">crwdns525:0crwdne525:0</button>
-		<br>
-		<h5>crwdns588:0crwdne588:0</h5>
-		crwdns589:0crwdne589:0
-		<br>
-		<input type="text" style="width:50px" id="cw_sentence">crwdns583:0crwdne583:0 crwdns543:0crwdne543:0 crwdns585:0crwdne585:0
-		<input type="text" style="width:50px" id="cw_letters">crwdns584:0crwdne584:0 crwdns543:0crwdne543:0
-		<button class="btn waves-effect" style="width:100px;" onclick="settings()">crwdns525:0crwdne525:0</button>
-		<br>
-		<h5>crwdns591:0crwdne591:0</h5>
-		<input class="with-gap" onchange="settings()" name="cws" type="radio" id="cws_yes" value="yes" />
-		<label for="cws_yes">crwdns526:0crwdne526:0</label>
-		<input class="with-gap" onchange="settings()" name="cws" type="radio" id="cws_no" value="no" />
-		<label for="cws_no">crwdns527:0crwdne527:0
-		</label>
-		<br>
-		<h5>crwdns592:0crwdne592:0</h5>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="public" value="public" />
-		<label for="public">crwdns593:0crwdne593:0</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="unlisted" value="unlisted" />
-		<label for="unlisted">crwdns594:0crwdne594:0</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="private" value="private" />
-		<label for="private">crwdns595:0crwdne595:0</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="direct" value="direct" />
-		<label for="direct">crwdns596:0crwdne596:0</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="memory" value="memory" />
-		<label for="memory">crwdns1912:0crwdne1912:0</label>
-		<input class="with-gap" onchange="settings()" name="vis" type="radio" id="server" value="server" />
-		<label for="server">crwdns1914:0crwdne1914:0</label>
-		<br>
-		<h5>crwdns599:0crwdne599:0</h5>
-		<input class="with-gap" onchange="settings()" name="img" type="radio" id="i_url" value="url" />
-		<label for="i_url">crwdns600:0crwdne600:0</label>
-		<input class="with-gap" onchange="settings()" name="img" type="radio" id="i_no-act" value="no-act" />
-		<label for="i_no-act">crwdns601:0crwdne601:0</label>
-		<br>
-		<input class="with-gap" onchange="settings()" name="img" type="radio" id="i_inline" value="inline" disabled />
-		<label for="i_inline">crwdns602:0crwdne602:0 
-			<!--画像を投稿し、インラインで表示(Markdownに対応したインスタンスのみ。マルチアカウント環境では非推奨。)-->
-		</label>
-		<br>
-		<h5>crwdns568:0crwdne568:0</h5>
-		<input class="with-gap" onchange="settings()" name="box" type="radio" id="bx_yes" value="yes" />
-		<label for="bx_yes">crwdns569:0crwdne569:0</label>
-		<input class="with-gap" onchange="settings()" name="box" type="radio" id="bx_no" value="no" />
-		<label for="bx_no">crwdns571:0crwdne571:0
-		</label>
-		<input class="with-gap" onchange="settings()" name="box" type="radio" id="bx_abs" value="absolute" />
-		<label for="bx_abs">crwdns570:0crwdne570:0</label>
-		<br>
-		<h5>crwdns603:0crwdne603:0</h5>
-		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_simple" value="simple" />
-		<label for="q_simple">crwdns604:0crwdne604:0</label>
-		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_mention" value="mention" />
-		<label for="q_mention">crwdns605:0crwdne605:0</label>
-		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_full" value="full" />
-		<label for="q_full">crwdns606:0crwdne606:0
-		</label>
-		<br>
-		<h5>crwdns607:0crwdne607:0</h5>
-		crwdns608:0crwdne608:0<br>
-		<input class="with-gap" onchange="settings()" name="main" type="radio" id="mn_remain" value="remain" />
-		<label for="mn_remain">crwdns609:0crwdne609:0</label>
-		<input class="with-gap" onchange="settings()" name="main" type="radio" id="mn_main" value="main" />
-		<label for="mn_main">crwdns610:0crwdne610:0</label>
-		</label>
-		<h5>crwdns1916:0crwdne1916:0</h5>
-		crwdns1918:0crwdne1918:0<br>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-nothing" value="nothing" />
-		<label for="sec-nothing">crwdns1920:0crwdne1920:0</label>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-public" value="public" />
-		<label for="sec-public">crwdns593:0crwdne593:0</label>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-unlisted" value="unlisted" />
-		<label for="sec-unlisted">crwdns594:0crwdne594:0</label>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-private" value="private" />
-		<label for="sec-private">crwdns595:0crwdne595:0</label>
-		<input class="with-gap" onchange="settings()" name="sec" type="radio" id="sec-direct" value="direct" />
-		<label for="sec-direct">crwdns596:0crwdne596:0</label>
-		<input class="with-gap hide kirishima" onchange="settings()" name="sec" type="radio" id="sec-local" value="local" />
-		<label for="sec-local">crwdns1922:0crwdne1922:0</label><span class="hide kirishima">非対応インスタンスでは「未収載」になります。</span>
-		<br>
-	</div>
-	</li>
-	<li>
-		<div class="collapsible-header">
-				<i class="material-icons">keyboard</i>crwdns611:0crwdne611:0
-		</div>
-		<div class="collapsible-body">
-			<h5>crwdns612:0crwdne612:0</h5>
-			crwdns613:0crwdne613:0<br>
-			Ctrl+Shift+1:<input type="text" style="width:150px" id="oks-1">
-			<button onclick="oks(1)" class="btn waves-effect" style="width:100px;">crwdns525:0crwdne525:0</button><br><br>
-			Ctrl+Shift+2:<input type="text" style="width:150px" id="oks-2">
-			<button onclick="oks(2)" class="btn waves-effect" style="width:100px;">crwdns525:0crwdne525:0</button><br><br>
-			Ctrl+Shift+3:<input type="text" style="width:150px" id="oks-3">
-			<button onclick="oks(3)" class="btn waves-effect" style="width:100px;">crwdns525:0crwdne525:0</button><br><br>
+	<h4>crwdns524:0crwdne524:0</h4>
+	<ul class="collapsible" data-collapsible="accordion">
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">desktop_windows</i>crwdns529:0crwdne529:0
+			</div>
+			<div class="collapsible-body">
+				<h5>crwdns530:0crwdne530:0</h5>
+				To translate with Crowdin, you have to login Crowdin and restart TheDesk when login is finished.<br>
+				<a href="../ja/setting.html" onclick="changelang('ja')">日本語(Japanese)</a>/<a href="../en/setting.html" onclick="changelang('en')">English</a>/<a href="../ps/setting.html" onclick="changelang('ps')">Crowdin web translate</a>/
+				<h5>crwdns531:0crwdne531:0</h5>
+				<button onclick="exportSettings()" class="btn waves-effect lime darken-3"
+					style="width:100%; max-width:200px;">crwdns533:0crwdne533:0</button>
+				<button onclick="importSettings()" class="btn waves-effect cyan darken-3"
+					style="width:100%; max-width:200px;">crwdns532:0crwdne532:0</button>
+				<div id="envView">
+					<template v-for="(item, i) in config">
+						<h5>{{item.text.head}}</h5>
+						<template v-if=item.text.desc>
+							<templete v-html=item.text.desc></templete><br>
+						</template>
+						<template v-if="item.id=='notf'"><a onclick="notftest()"
+								class="pointer">crwdns540:0crwdne540:0</a><br></template>
+						<template v-if="item.checkbox">
+							<template v-for="(check, j) in item.text.checkbox">
+								<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
+									type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
+								<label v-bind:for="item.id+check.value">{{check.text}}</label>
+							</template>
+						</template>
+						<template v-else>
+							<template v-if="item.doubleText">
+								<template v-for="(textbox, j) in item.data">
+									<input type="text" v-model="textbox.setValue" type="radio" v-bind:id="textbox.id"
+										v-bind:style="{ width: textbox.width+'px'}" />{{textbox.text.after}}
+								</template>
+							</template>
+							<template v-else>
+								<input type="text" v-model="item.setValue" type="radio" v-bind:id="item.id"
+									v-bind:style="{ width: item.width+'px'}" />{{item.text.after}}
+							</template>
+							<button class="btn waves-effect" style="width:100px;"
+								v-on:click="complete(i)">crwdns528:0crwdne528:0</button>
+						</template><br>
+					</template>
+				</div>
+				<h5>crwdns544:0crwdne544:0</h5>
+				crwdns1900:0crwdne1900:0<br>
+				<button class="btn waves-effect" style="width:100px;" onclick="font()">crwdns1896:0crwdne1896:0</button><br>
+				<div id="fonts" class="hide" style="overflow-y:scroll; width:300px; height:500px;"></div>
+				<br>
+				<input type="text" style="width:150px" id="font">
+				<button class="btn waves-effect" style="width:100px;" onclick="settings()">crwdns525:0crwdne525:0</button>
+				<br>
+				<h5>crwdns547:0crwdne547:0</h5>
+				crwdns548:0crwdne548:0<br>
+				<button class="btn waves-effect" style="width:100px;" onclick="savefolder()">crwdns528:0crwdne528:0</button>
+				<br>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">color_lens</i>crwdns534:0crwdne534:0
+			</div>
+			<div class="collapsible-body">
+				<h4>crwdns2422:0crwdne2422:0</h4>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="black" value="black" />
+				<label for="black">Black</label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="white" value="white" />
+				<label for="white">White</label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="indigo" value="indigo" />
+				<label for="indigo">Indigo<span class="imas hide">(エンドレスナイト)</span></label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="brown" value="brown" />
+				<label for="brown">Brown<span class="imas hide">(ビタースイート・タイム)</span></label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="green" value="green" />
+				<label for="green">Green<span class="imas hide">(ユースフルロマンス)</span></label>
+				<input class="with-gap" onchange="settings()" name="theme" type="radio" id="custom" value="custom" />
+				<label for="custom">Custom</label>
+				<div style="width:300px" id="sel-selector">
+					<select id="custom-sel-sel" class="custom-sel" onchange="customSel()"></select>
+				</div>
+				<h4>crwdns2424:0crwdne2424:0</h4>
+				<div style="width:300px" id="edit-selector" data-add="crwdns2436:0crwdne2436:0">
+					<select id="custom-edit-sel" class="custom-sel" onchange="custom()">
+						<option value="add_new">crwdns2436:0crwdne2436:0</option>
+					</select>
+				</div>
+				<h5>crwdns2438:0crwdne2438:0</h5>
+				<input type="text" style="width:300px" id="custom_name" placeholder="crwdns2438:0crwdne2438:0...">
+				<h5>crwdns2440:0crwdne2440:0</h5>
+				<div class="input-field"><textarea style="width:300px" id="custom_desc" class="materialize-textarea"
+						placeholder="crwdns2440:0crwdne2440:0..."></textarea></div>
+				<h5>crwdns2426:0crwdne2426:0</h5>
+				<input class="with-gap" name="derection" type="radio" id="dark" value="dark" checked="true" />
+				<label for="dark">Dark</label>
+				<input class="with-gap" name="derection" type="radio" id="light" value="light" />
+				<label for="light">Light</label>
+				<div id="pickers">
+					<div>
+						<h5>Primary</h5>crwdns2430:0crwdne2430:0
+						<div id="color-picker0-wrap">
+							<div class="color-picker" id="color-picker0"></div>
+						</div>
+						<input type="hidden" id="color-picker0_value">
+					</div>
+					<div>
+						<h5>Secondary</h5>crwdns2428:0crwdne2428:0
+						<div id="color-picker1-wrap">
+							<div class="color-picker" id="color-picker1"></div>
+						</div>
+						<input type="hidden" id="color-picker1_value">
+					</div>
+					<div>
+						<h5>Texts</h5>crwdns2432:0crwdne2432:0
+						<div id="color-picker2-wrap">
+							<div class="color-picker" id="color-picker2"></div>
+						</div>
+						<input type="hidden" id="color-picker2_value">
+					</div>
+					<div>
+						<h5>Accent</h5>crwdns2434:0crwdne2434:0
+						<div id="color-picker3-wrap">
+							<div class="color-picker" id="color-picker3"></div>
+						</div>
+						<input type="hidden" id="color-picker3_value">
+					</div>
+				</div>
+				<button class="btn-large waves-effect" onclick="customComp()">crwdns528:0crwdne528:0</button>&nbsp;<button
+					class="btn waves-effect red disabled" id="delTheme" onclick="deleteIt()">@@delete@@</button><br><br>
+				<input type="text" style="width:300px" id="custom_json" class="materialize-textarea"
+					placeholder="JSON style" readonly><br>
+				crwdns2442:0crwdne2442:0
+				<h4>crwdns2444:0crwdne2444:0</h4>
+				@@cImpWarn@@<br>
+				<input type="text" style="width:300px" id="custom_import" class="materialize-textarea"
+					placeholder="JSON/JSON5 style">
+				<button class="btn waves-effect" onclick="customImp()">crwdns532:0crwdne532:0</button><br>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">reorder</i>crwdns550:0crwdne550:0
+			</div>
+			<div class="collapsible-body">
+				<div id="tlView">
+					<template v-for="(item, i) in config">
+						<h5>{{item.text.head}}</h5>
+						<template v-if=item.text.desc>
+							<templete v-html=item.text.desc></templete><br>
+						</template>
+						<template v-if="item.checkbox">
+							<template v-for="(check, j) in item.text.checkbox">
+								<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
+									type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
+								<label v-bind:for="item.id+check.value">{{check.text}}</label>
+							</template>
+						</template>
+						<template v-else>
+							<template v-if="item.doubleText">
+								<template v-for="(textbox, j) in item.data">
+									<input type="text" v-model="textbox.setValue" type="radio" v-bind:id="textbox.id"
+										v-bind:style="{ width: textbox.width+'px'}" />{{textbox.text.after}}
+								</template>
+							</template>
+							<template v-else>
+								<input type="text" v-model="item.setValue" type="radio" v-bind:id="item.id"
+									v-bind:style="{ width: item.width+'px'}" />{{item.text.after}}
+							</template>
+							<button class="btn waves-effect" style="width:100px;"
+								v-on:click="complete(i)">crwdns528:0crwdne528:0</button>
+						</template><br>
+					</template>
+				</div>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">send</i>crwdns587:0crwdne587:0
+			</div>
+			<div class="collapsible-body">
+				<div id="postView">
+					<template v-for="(item, i) in config">
+						<h5>{{item.text.head}}</h5>
+						<template v-if=item.text.desc>
+							<templete v-html=item.text.desc></templete><br>
+						</template>
+						<template v-if="item.checkbox">
+							<template v-for="(check, j) in item.text.checkbox">
+								<template v-if="!check.kirishima || (check.kirishima && kirishima)">
+									<input class="with-gap" v-on:click="complete(i,check.value)" v-model="item.setValue"
+										type="radio" v-bind:id="item.id+check.value" v-bind:value="check.value" />
+									<label v-bind:for="item.id+check.value">{{check.text}}</label>
+									<span v-if="check.kirishimaText">{{check.kirishimaText}}</span>
+								</template>
+							</template>
+						</template>
+						<template v-else>
+							<template v-if="item.doubleText">
+								<template v-for="(textbox, j) in item.data">
+									<input type="text" v-model="textbox.setValue" type="radio" v-bind:id="textbox.id"
+										v-bind:style="{ width: textbox.width+'px'}" />{{textbox.text.after}}
+								</template>
+							</template>
+							<template v-else>
+								<input type="text" v-model="item.setValue" type="radio" v-bind:id="item.id"
+									v-bind:style="{ width: item.width+'px'}" />{{item.text.after}}
+							</template>
+							<button class="btn waves-effect" style="width:100px;"
+								v-on:click="complete(i)">crwdns528:0crwdne528:0</button>
+						</template><br>
+					</template>
+				</div>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">Fkeyboard</i>crwdns611:0crwdne611:0
+			</div>
+			<div class="collapsible-body">
+				<h5>crwdns612:0crwdne612:0</h5>
+				crwdns613:0crwdne613:0<br>
+				Ctrl+Shift+1:<input type="text" style="width:150px" id="oks-1">
+				<button onclick="oks(1)" class="btn waves-effect" style="width:100px;">crwdns525:0crwdne525:0</button><br><br>
+				Ctrl+Shift+2:<input type="text" style="width:150px" id="oks-2">
+				<button onclick="oks(2)" class="btn waves-effect" style="width:100px;">crwdns525:0crwdne525:0</button><br><br>
+				Ctrl+Shift+3:<input type="text" style="width:150px" id="oks-3">
+				<button onclick="oks(3)" class="btn waves-effect" style="width:100px;">crwdns525:0crwdne525:0</button><br><br>
 
-		</div>
-	</li>
-	<li>
-		<div class="collapsible-header">
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
 				<i class="material-icons">bookmark</i>crwdns614:0crwdne614:0
-		</div>
-		<div class="collapsible-body">
-			<h5>crwdns615:0crwdne615:0</h5>
-			<div id="mute-cli"></div>
-			<h5>crwdns616:0crwdne616:0</h5>
-			crwdns617:0crwdne617:0
-			<h5>crwdns619:0crwdne619:0</h5>
-			crwdns618:0crwdne618:0<br>
-			<div class="chips" id="wordmute" style="background-color:gray;"></div>
-			<button onclick="wordmuteSave()" class="btn waves-effect" style="width:100px;">crwdns525:0crwdne525:0</button>
-			<h5>crwdns620:0crwdne620:0</h5>
-			crwdns618:0crwdne618:0<br>
-			<div class="chips" id="wordemp" style="background-color:gray;"></div>
-			<button onclick="wordempSave()" class="btn waves-effect" style="width:100px;">crwdns525:0crwdne525:0</button>
-			<h5>crwdns621:0crwdne621:0</h5>
-			crwdns622:0crwdne622:0
-			<span class="emphasized">　crwdns623:0crwdne623:0　</span>
-		</div>
-	</li>
-	<li>
-		<div class="collapsible-header">
-			<i class="fa fa-spotify"></i>crwdns624:0crwdne624:0
-		</div>
-		<div class="collapsible-body">
-			<h5>crwdns2354:0crwdne2354:0</h5>
-			crwdns2356:0crwdne2356:0<br>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="aimp" value="AIMP" />
-			<label for="aimp">AIMP</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="itunes" value="ITUNES" />
-			<label for="itunes">iTunes</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="npmm" value="MEDIAMONKEY" />
-			<label for="npmm">MediaMonkey</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="winamp" value="WINAMP" />
-			<label for="winamp">Winamp</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wmp" value="WMP" />
-			<label for="wmp">WMP</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wlm" value="WLM" />
-			<label for="wlm">WLM</label>
-			<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="cad" value="CAD" />
-			<label for="cad">CAD</label><br><br>
-			crwdns625:0crwdne625:0<i class="material-icons" style="font-size:24px;">music_note</i>crwdns626:0crwdne626:0<br>
-			<h5>crwdns627:0crwdne627:0</h5>
-			crwdns628:0crwdne628:0<br>
-			<div id="spotify-code-show" class="hide"><input type="text" id="spotify-code"><button onclick="spotifyAuth()" class="btn waves-effect" style="width:100px;">crwdns525:0crwdne525:0</button></div>
-			<a onclick="spotifyConnect()" class="btn waves-effect nex" style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-enable"><i class="fa fa-spotify left"></i>crwdns629:0crwdne629:0</a>
-			<a onclick="spotifyDisconnect()" class="btn waves-effect nex disabled" style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-disable"><i class="fa fa-spotify left"></i>crwdns630:0crwdne630:0</a>
-			<h5>crwdns631:0crwdne631:0</h5>
-			crwdns632:0crwdne632:0<br>
-			<textarea id="np-temp" class="materialize-textarea" data-length="500">#NowPlaying {song} / {album} / {artist}
+			</div>
+			<div class="collapsible-body">
+				<h5>crwdns615:0crwdne615:0</h5>
+				<div id="mute-cli"></div>
+				<h5>crwdns616:0crwdne616:0</h5>
+				crwdns617:0crwdne617:0
+				<h5>crwdns619:0crwdne619:0</h5>
+				crwdns618:0crwdne618:0<br>
+				<div class="chips" id="wordmute" style="background-color:gray;"></div>
+				<button onclick="wordmuteSave()" class="btn waves-effect" style="width:100px;">crwdns525:0crwdne525:0</button>
+				<h5>crwdns620:0crwdne620:0</h5>
+				crwdns618:0crwdne618:0<br>
+				<div class="chips" id="wordemp" style="background-color:gray;"></div>
+				<button onclick="wordempSave()" class="btn waves-effect" style="width:100px;">crwdns525:0crwdne525:0</button>
+				<h5>crwdns621:0crwdne621:0</h5>
+				crwdns622:0crwdne622:0
+				<span class="emphasized">　crwdns623:0crwdne623:0　</span>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="fa fa-spotify"></i>crwdns624:0crwdne624:0
+			</div>
+			<div class="collapsible-body">
+				<h5>crwdns2354:0crwdne2354:0</h5>
+				crwdns2356:0crwdne2356:0<br>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="aimp" value="AIMP" />
+				<label for="aimp">AIMP</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="itunes" value="ITUNES" />
+				<label for="itunes">iTunes</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="npmm" value="MEDIAMONKEY" />
+				<label for="npmm">MediaMonkey</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="winamp" value="WINAMP" />
+				<label for="winamp">Winamp</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wmp" value="WMP" />
+				<label for="wmp">WMP</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="wlm" value="WLM" />
+				<label for="wlm">WLM</label>
+				<input class="with-gap" onchange="npprovider()" name="npp" type="radio" id="cad" value="CAD" />
+				<label for="cad">CAD</label><br><br>
+				crwdns625:0crwdne625:0<i class="material-icons" style="font-size:24px;">music_note</i>crwdns626:0crwdne626:0<br>
+				<h5>crwdns627:0crwdne627:0</h5>
+				crwdns628:0crwdne628:0<br>
+				<div id="spotify-code-show" class="hide"><input type="text" id="spotify-code"><button
+						onclick="spotifyAuth()" class="btn waves-effect" style="width:100px;">crwdns525:0crwdne525:0</button></div>
+				<a onclick="spotifyConnect()" class="btn waves-effect nex"
+					style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-enable"><i
+						class="fa fa-spotify left"></i>crwdns629:0crwdne629:0</a>
+				<a onclick="spotifyDisconnect()" class="btn waves-effect nex disabled"
+					style="width:100%; max-width:200px; background-color:#1ed760;" id="spotify-disable"><i
+						class="fa fa-spotify left"></i>crwdns630:0crwdne630:0</a>
+				<h5>crwdns631:0crwdne631:0</h5>
+				crwdns632:0crwdne632:0<br>
+				<textarea id="np-temp" class="materialize-textarea" data-length="500">#NowPlaying {song} / {album} / {artist}
 {url}</textarea><br>
 				crwdns2358:0{song}crwdnd2358:0{album}crwdnd2358:0{artist}crwdnd2358:0{url}crwdne2358:0<br>
 				crwdns2360:0{song}crwdnd2360:0{album}crwdnd2360:0{artist}crwdnd2360:0{composer}crwdnd2360:0{hz}crwdnd2360:0{bitRate}crwdnd2360:0{genre}crwdne2360:0<br>
 				crwdns2362:0{song}crwdnd2362:0{album}crwdnd2362:0{artist}crwdne2362:0<br>
-				<span class="imas hide">CINDERELLA NowPlaying(imastodon.net限定)では作曲家{composer}/作詞家{lyricist}/BPM{bpm}が有効です。<br>
-                    CINDERELLA NowPlayingはimastodon.netにログインしているとき、トゥート欄に「//」を入力し、その後に曲名を入れることで可能です。</span><br>
-			<button onclick="spotifySave()" class="btn waves-effect" style="width:100px;">crwdns525:0crwdne525:0</button>
-			<h5>crwdns635:0crwdne635:0</h5>
-			<span class="imas hide">この設定はCINDERELLA NowPlaying(imastodon.net限定)にも適用されます。</span><br>
-			<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_yes" value="yes" />
-			<label for="awk_yes">crwdns526:0crwdne526:0</label>
-			<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_no" value="no" />
-			<label for="awk_no">crwdns527:0crwdne527:0</label>
-			<br>
-		</div>
-	</li>
-	<li>
-		<div class="collapsible-header">
-			<i class="material-icons">hearing</i>crwdns636:0crwdne636:0
-		</div>
-		<div class="collapsible-body">
-			<h5>crwdns637:0crwdne637:0</h5>
-			crwdns638:0crwdne638:0<br>
-			<p class="range-field"><input type="range" id="voicespeed" min="1" max="100" value="10" style="width:500px; max-width:100%"/></p>
-			<h5>crwdns639:0crwdne639:0</h5>
-			crwdns640:0crwdne640:0<br>
-			<p class="range-field"><input type="range" id="voicepitch" min="0" max="100" value="50" style="width:500px; max-width:100%"/></p>
-			<h5>crwdns641:0crwdne641:0</h5>
-			crwdns642:0crwdne642:0<br>
-			<p class="range-field"><input type="range" id="voicevol" min="0" max="100" value="100" style="width:500px; max-width:100%"/></p>
-			<h5>crwdns643:0crwdne643:0</h5>
-			<input type="text" style="width:350px" id="voicetxt" value="crwdns644:0crwdne644:0">
-			<button class="btn waves-effect blue" style="width:150px;" onclick="voicePlay()" id="testplay">crwdns645:0crwdne645:0</button><br>
-			<br>
-			<button class="btn waves-effect" style="width:100px;" onclick="voiceSettings()">crwdns525:0crwdne525:0</button>
-		</div>
-	</li>
-</ul>
-<br>
-<a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;"><i class="material-icons left">undo</i>crwdns646:0crwdne646:0</a>
-<br>
-<br>crwdns647:0crwdne647:0
-<li>Ctrl+1-9:crwdns648:0crwdne648:0</li>
-<li>N:crwdns649:0crwdne649:0</li>
-<li>X:crwdns650:0crwdne650:0</li>
-<li>Ctrl+Enter:crwdns651:0crwdne651:0</li>
-<li>Ctrl+Enter+Shift:crwdns1924:0crwdne1924:0</li>
-<li>Ctrl+E:crwdns652:0crwdne652:0</li>
-<li>Esc:crwdns653:0crwdne653:0</li>
-<li>F5:crwdns654:0crwdne654:0</li>
-<li>Ctrl+Shift+C:crwdns655:0crwdne655:0</li>
-<li>Ctrl+Shift+S:crwdns524:0crwdne524:0</li>
-<li>Ctrl+Shift+M:crwdns656:0crwdne656:0</li>
-<li>Ctrl+Shift+N:NowPlaying(Spotify)</li>
-<li>Ctrl+Shift+P:crwdns657:0crwdne657:0</li>
-<li>←/→:crwdns658:0crwdne658:0</li>
-<li>crwdns659:0crwdne659:0</li>
-<div class="hide kirishima">
-以下Markdownに対応したインスタンスのみ。
-<br>
-<li>Ctrl+B/I/S/U:太字/斜字/取り消し/下線</li>
-<li>Shift+Enter:全角スペースを入れて改行</li>
-<li>Shift+Space:ゼロ幅スペース</li>
-以下アスタルテにログインしている場合のみ 
-<br>
-<li>Ctrl+R: 
-<a href="https://astarte.thedesk.top">アスタルテ暇人ランキング</a>を開く
-</li><br>
-</div>
-<button class="btn waves-effect red" style="width:100%; max-width:500px;" onclick="if(confirm('crwdns661:0crwdne661:0')){ localStorage.clear(); location.href='index.html'; }"><i class="material-icons left">delete</i>crwdns660:0crwdne660:0</button><br><br>
-<button class="btn waves-effect indigo" onclick="about()" style="width:100%; max-width:500px;"><i class="material-icons left">info</i>crwdns662:0crwdne662:0</button>
-<a href="https://thedesk.top" class="btn waves-effect deep-purple lighten-2" style="width:100%; max-width:500px;"><i class="material-icons left">web</i>crwdns663:0crwdne663:0</a>
-<a href="https://enty.jp/Cutls" class="btn waves-effect purple lighten-2" style="width:100%; max-width:500px;"><i class="material-icons left">trending_up</i>crwdns664:0crwdne664:0(Enty)</a>
-<a href="https://docs.thedesk.top" class="btn waves-effect blue darken-2" style="width:100%; max-width:500px;"><i class="material-icons left">list</i>crwdns665:0crwdne665:0/Docs(Constructing)</a>
-<a href="https://github.com/cutls/TheDesk" class="btn waves-effect black lighten-2" style="width:100%; max-width:500px;"><i class="fa fa-github left"></i>GitHub</a>
-<a href="index.html?mode=user&code=Cutls@kirishima.cloud" class="btn waves-effect blue lighten-2" style="width:100%; max-width:500px;"><img src="../../img/desk_full.svg" class="left" width="25" style="padding-top:5px;">Developer: Cutls@kirishima.cloud</a>
-<a class="btn waves-effect red lighten-2" href="https://osushi.love/Cutls_P" target="_blank" style="width:100%; max-width:500px;"><img src="../../img/sushi.svg" class="left" width="25" style="padding-top:5px;">crwdns666:0crwdne666:0</a>
-<br>
-Kyash<br>
-			<img src="../../img/kyash.png" width="100"><br>
-<a onclick="localStorage.removeItem('new-ver-skip'); location.href='index.html';" class="pointer">crwdns667:0crwdne667:0</a><br>
-<a href="oss.html">OSS Licensecrwdns668:0crwdne668:0</a><br>
-<span style="font-family:Open Sans;">Copyright &copy; TheDesk 2018 All Rights Reserved. 
-	Under <a href="https://github.com/cutls/TheDesk/blob/master/LICENSE">GNU General Public License v3.0</a> and <a href="https://thedesk.top/tos.html">Terms of Use</a>/<a href="https://thedesk.top/priv.html">Privacy Policy</a>
-	<br>Developer: Cutls P( 
-	<a href="index.html?mode=user&code=Cutls@kirishima.cloud">@Cutls@kirishima.cloud</a>)
+				<button onclick="spotifySave()" class="btn waves-effect" style="width:100px;">crwdns525:0crwdne525:0</button>
+				<h5>crwdns635:0crwdne635:0</h5>
+				<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_yes" value="yes" />
+				<label for="awk_yes">crwdns526:0crwdne526:0</label>
+				<input class="with-gap" onchange="spotifyFlagSave()" name="awk" type="radio" id="awk_no" value="no" />
+				<label for="awk_no">crwdns527:0crwdne527:0</label>
+				<br>
+			</div>
+		</li>
+		<li>
+			<div class="collapsible-header">
+				<i class="material-icons">hearing</i>crwdns636:0crwdne636:0
+			</div>
+			<div class="collapsible-body">
+				<h5>crwdns637:0crwdne637:0</h5>
+				crwdns638:0crwdne638:0<br>
+				<p class="range-field"><input type="range" id="voicespeed" min="1" max="100" value="10"
+						style="width:500px; max-width:100%" /></p>
+				<h5>crwdns639:0crwdne639:0</h5>
+				crwdns640:0crwdne640:0<br>
+				<p class="range-field"><input type="range" id="voicepitch" min="0" max="100" value="50"
+						style="width:500px; max-width:100%" /></p>
+				<h5>crwdns641:0crwdne641:0</h5>
+				crwdns642:0crwdne642:0<br>
+				<p class="range-field"><input type="range" id="voicevol" min="0" max="100" value="100"
+						style="width:500px; max-width:100%" /></p>
+				<h5>crwdns643:0crwdne643:0</h5>
+				<input type="text" style="width:350px" id="voicetxt" value="crwdns644:0crwdne644:0">
+				<button class="btn waves-effect blue" style="width:150px;" onclick="voicePlay()"
+					id="testplay">crwdns645:0crwdne645:0</button><br>
+				<br>
+				<button class="btn waves-effect" style="width:100px;" onclick="voiceSettings()">crwdns525:0crwdne525:0</button>
+			</div>
+		</li>
+	</ul>
 	<br>
-</span><br>
-TheDeskおよびCutls Pは<a href="https://donken.org/">被災地支援のためのマストドン研究会</a>をログイン機能提供等の形で応援しています。<br>
-タグタイムラインを開く:<a href="index.html?mode=tag&code=被災地支援のためのマストドン研究会">#被災地支援のためのマストドン研究会</a><br>
-<script type="text/javascript" src="../../js/common/about.js"></script>
-<script type="text/javascript" src="../../js/platform/end.js"></script>
-<script type="text/javascript" src="../../js/login/logout.js"></script>
-<script type="text/javascript" src="../../js/lang/lang.js"></script>
-<script type="text/javascript" src="../../js/ui/spotify.js"></script>
-<script type="text/javascript" src="../../js/tl/speech.js"></script>
-<script type="text/javascript" src="../../js/platform/pickr.js"></script>
-<script type="text/javascript" src="../../js/ui/settings.js"></script>
-<script type="text/javascript" src="../../js/ui/theme.js"></script>
-<script type="text/javascript" src="../../js/tl/date.js"></script>
+	<a href="index.html" class="btn waves-effect orange nex" style="width:100%; max-width:200px;"><i
+			class="material-icons left">undo</i>crwdns646:0crwdne646:0</a>
+	<br>
+	<br>crwdns647:0crwdne647:0
+	<li>Ctrl+1-9:crwdns648:0crwdne648:0</li>
+	<li>N:crwdns649:0crwdne649:0</li>
+	<li>X:crwdns650:0crwdne650:0</li>
+	<li>Ctrl+Enter:crwdns651:0crwdne651:0</li>
+	<li>Ctrl+Enter+Shift:crwdns1924:0crwdne1924:0</li>
+	<li>Alt+Enter:crwdns1916:0crwdne1916:0</li>
+	<li>Ctrl+E:crwdns652:0crwdne652:0</li>
+	<li>Esc:crwdns653:0crwdne653:0</li>
+	<li>F5:crwdns654:0crwdne654:0</li>
+	<li>Ctrl+Shift+C:crwdns655:0crwdne655:0</li>
+	<li>Ctrl+Shift+S:crwdns524:0crwdne524:0</li>
+	<li>Ctrl+Shift+M:crwdns656:0crwdne656:0</li>
+	<li>Ctrl+Shift+N:NowPlaying(Spotify)</li>
+	<li>Ctrl+Shift+P:crwdns657:0crwdne657:0</li>
+	<li>←/→:crwdns658:0crwdne658:0</li>
+	<li>crwdns659:0crwdne659:0</li>
+	<div class="hide kirishima">
+		以下Markdownに対応したインスタンスのみ。
+		<br>
+		<li>Ctrl+B/I/S/U:太字/斜字/取り消し/下線</li>
+		<li>Shift+Enter:全角スペースを入れて改行</li>
+		<li>Shift+Space:ゼロ幅スペース</li>
+		以下アスタルテにログインしている場合のみ
+		<br>
+		<li>Ctrl+R:
+			<a href="https://astarte.thedesk.top">アスタルテ暇人ランキング</a>を開く
+		</li><br>
+	</div>
+	<button class="btn waves-effect red" style="width:100%; max-width:500px;"
+		onclick="if(confirm('crwdns661:0crwdne661:0')){ localStorage.clear(); location.href='index.html'; }"><i
+			class="material-icons left">delete</i>crwdns660:0crwdne660:0</button><br><br>
+	<button class="btn waves-effect indigo" onclick="about()" style="width:100%; max-width:500px;"><i
+			class="material-icons left">info</i>crwdns662:0crwdne662:0</button>
+	<a href="https://thedesk.top" class="btn waves-effect deep-purple lighten-2" style="width:100%; max-width:500px;"><i
+			class="material-icons left">web</i>crwdns663:0crwdne663:0</a>
+	<a href="https://enty.jp/Cutls" class="btn waves-effect purple lighten-2" style="width:100%; max-width:500px;"><i
+			class="material-icons left">trending_up</i>crwdns664:0crwdne664:0(Enty)</a>
+	<a href="https://www.pixiv.net/fanbox/creator/28105985" class="btn waves-effect red lighten-2"
+		style="width:100%; max-width:500px;"><i class="material-icons left">trending_up</i>crwdns664:0crwdne664:0(Pixiv FANBOX)</a>
+	<a href="https://docs.thedesk.top" class="btn waves-effect blue darken-2" style="width:100%; max-width:500px;"><i
+			class="material-icons left">list</i>crwdns665:0crwdne665:0/Docs(Constructing)</a>
+	<a href="https://github.com/cutls/TheDesk" class="btn waves-effect black lighten-2"
+		style="width:100%; max-width:500px;"><i class="fa fa-github left"></i>GitHub</a>
+	<a href="index.html?mode=user&code=Cutls@kirishima.cloud" class="btn waves-effect blue lighten-2"
+		style="width:100%; max-width:500px;"><img src="../../img/desk_full.svg" class="left" width="25"
+			style="padding-top:5px;">Developer: Cutls@kirishima.cloud</a>
+	<br>
+	Kyash<br>
+	<img src="../../img/kyash.png" width="100"><br>
+	<a onclick="localStorage.removeItem('new-ver-skip'); location.href='index.html';"
+		class="pointer">crwdns667:0crwdne667:0</a><br>
+	<a href="oss.html">OSS Licensecrwdns668:0crwdne668:0</a><br>
+	<span style="font-family:Open Sans;">Copyright &copy; TheDesk 2018 All Rights Reserved.
+		Under <a href="https://github.com/cutls/TheDesk/blob/master/LICENSE">GNU General Public License v3.0</a> and <a
+			href="https://thedesk.top/tos.html">Terms of Use</a>/<a href="https://thedesk.top/priv.html">Privacy
+			Policy</a>
+		<br>Developer: Cutls P(
+		<a href="index.html?mode=user&code=Cutls@kirishima.cloud">@Cutls@kirishima.cloud</a>)
+		<br>
+	</span><br>
+	TheDeskおよびCutls Pは<a href="https://donken.org/">被災地支援のためのマストドン研究会</a>をログイン機能提供等の形で応援しています。<br>
+	タグタイムラインを開く:<a href="index.html?mode=tag&code=被災地支援のためのマストドン研究会">#被災地支援のためのマストドン研究会</a><br>
+	<script type="text/javascript" src="../../js/common/about.js"></script>
+	<script type="text/javascript" src="../../js/platform/end.js"></script>
+	<script type="text/javascript" src="../../js/login/logout.js"></script>
+	<script type="text/javascript" src="../../js/ui/spotify.js"></script>
+	<script type="text/javascript" src="../../js/tl/speech.js"></script>
+	<script type="text/javascript" src="../../js/platform/pickr.js"></script>
+	<script type="text/javascript" src="../../js/ui/settings.js"></script>
+	<script type="text/javascript" src="../../js/ui/theme.js"></script>
+	<script type="text/javascript" src="../../js/tl/date.js"></script>

app/view/ps/setting.vue.js

@@ -0,0 +1,491 @@
+var yesno=[
+    {
+        text:"crwdns526:0crwdne526:0",
+        value:"yes"
+    },{
+        text:"crwdns527:0crwdne527:0",
+        value:"no"
+    }
+];
+var envConstruction=[
+    {
+        id:"popup",
+        storage:"popup",
+        checkbox:false,
+        doubleText:false,
+        setValue:0,
+        width:50,
+        text:{
+            head:"crwdns1898:0crwdne1898:0",
+            desc:'crwdns536:0crwdne536:0',
+            after:"crwdns537:0crwdne537:0"
+        }
+    },{
+        id:"notf",
+        storage:"nativenotf",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"crwdns538:0crwdne538:0",
+            desc:"crwdns539:0crwdne539:0",
+            checkbox:yesno
+        }
+    },{
+        id:"width",
+        storage:"width",
+        checkbox:false,
+        doubleText:false,
+        width:50,
+        setValue:300,
+        text:{
+            head:"crwdns2376:0crwdne2376:0",
+            desc:"crwdns542:0crwdne542:0",
+            after:"px crwdns543:0crwdne543:0"
+        }
+    },{
+        id:"fixwidth",
+        storage:"fixwidth",
+        checkbox:false,
+        doubleText:false,
+        setValue:300,
+        width:50,
+        text:{
+            head:"crwdns2378:0crwdne2378:0",
+            desc:"crwdns2380:0crwdne2380:0",
+            after:"px crwdns543:0crwdne543:0"
+        }
+    },{
+        id:"size",
+        storage:"size",
+        checkbox:false,
+        doubleText:false,
+        width:50,
+        setValue:13,
+        text:{
+            head:"crwdns546:0crwdne546:0",
+            desc:'<span style="font-size:13px">13px(crwdns549:0crwdne549:0)</span>',
+            after:"px"
+        }
+    },{
+        id:"ha",
+        storage:"ha",
+        checkbox:true,
+        setValue:false,
+        text:{
+            head:"@@hardwareAcceleration@@",
+            desc:"@@hardwareAccelerationWarn@@",
+            checkbox:[
+                {
+                    text:"crwdns526:0crwdne526:0",
+                    value:"true"
+                },{
+                    text:"crwdns527:0crwdne527:0",
+                    value:"false"
+                }
+            ]
+        }
+    }
+];
+var tlConstruction=[
+    {
+        id:"time",
+        storage:"datetype",
+        checkbox:true,
+        setValue:"absolute",
+        text:{
+            head:"crwdns551:0crwdne551:0",
+            desc:'crwdns552:0crwdne552:0<br>crwdns553:0crwdne553:0<br>crwdns554:0crwdne554:0',
+            checkbox:[
+                {
+                    text:"crwdns555:0crwdne555:0",
+                    value:"relative"
+                },{
+                    text:"crwdns1902:0crwdne1902:0",
+                    value:"absolute"
+                },{
+                    text:"crwdns557:0crwdne557:0",
+                    value:"double"
+                },{
+                    text:"crwdns558:0crwdne558:0",
+                    value:"medium"
+                }
+
+            ]
+        }
+    },{
+        id:"ul",
+        storage:"locale",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"crwdns1904:0crwdne1904:0",
+            desc:"crwdns1906:0crwdne1906:0",
+            checkbox:yesno
+        }
+    },{
+        id:"nsfw",
+        storage:"nsfw",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"crwdns561:0crwdne561:0",
+            desc:"crwdns562:0crwdne562:0",
+            checkbox:yesno
+        }
+    },{
+        id:"cw",
+        storage:"cw",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"crwdns563:0crwdne563:0",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        id:"rp",
+        storage:"replyct",
+        checkbox:true,
+        setValue:"hidden",
+        text:{
+            head:"crwdns564:0crwdne564:0",
+            desc:"",
+            checkbox:[
+                {
+                    text:"crwdns565:0crwdne565:0",
+                    value:"hidden"
+                },{
+                    text:"crwdns565:0crwdne565:0",
+                    value:"all"
+                }
+
+            ]
+        }
+    },{
+        id:"gif",
+        storage:"gif",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"crwdns567:0crwdne567:0",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        id:"tag",
+        storage:"tag-range",
+        checkbox:true,
+        setValue:"local",
+        text:{
+            head:"crwdns572:0crwdne572:0",
+            desc:"",
+            checkbox:[
+                {
+                    text:"crwdns573:0crwdne573:0",
+                    value:"all"
+                },{
+                    text:"crwdns574:0crwdne574:0",
+                    value:"local"
+                }
+
+            ]
+        }
+    },{
+        id:"via",
+        storage:"viashow",
+        checkbox:true,
+        setValue:"no",
+        text:{
+            head:"crwdns575:0crwdne575:0",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        id:"mov",
+        storage:"mouseover",
+        checkbox:true,
+        setValue:"no",
+        text:{
+            head:"crwdns576:0crwdne576:0",
+            desc:"crwdns577:0crwdne577:0",
+            checkbox:[
+                {
+                    text:"crwdns578:0crwdne578:0",
+                    value:"yes"
+                },{
+                    text:"crwdns579:0crwdne579:0",
+                    value:"click"
+                },{
+                    text:"crwdns527:0crwdne527:0",
+                    value:"no"
+                }
+
+            ]
+        }
+    },{
+        id:"notfm",
+        storage:"setasread",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"crwdns580:0crwdne580:0",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        checkbox:false,
+        doubleText:true,
+        data:[
+            {
+                id:"sentence",
+                storage:"sentence",
+                width:50,
+                setValue:500,
+                text:{after:"crwdns583:0crwdne583:0 crwdns543:0crwdne543:0 crwdns585:0crwdne585:0"}
+            },{
+                id:"letters",
+                storage:"letters",
+                width:50,
+                setValue:7000,
+                text:{after:"crwdns584:0crwdne584:0 crwdns543:0crwdne543:0"}
+            }
+        ],
+        text:{
+            head:"crwdns581:0crwdne581:0",
+            desc:"crwdns582:0crwdne582:0",
+        }
+    },{
+        id:"img-height",
+        storage:"img-height",
+        checkbox:false,
+        doubleText:false,
+        width:80,
+        setValue:200,
+        text:{
+            head:"crwdns586:0crwdne586:0",
+            desc:'@@imgheightwarn@@',
+            after:"px"
+        }
+    },{
+        id:"ticker",
+        storage:"ticker_ok",
+        checkbox:true,
+        setValue:"no",
+        text:{
+            head:"crwdns1908:0crwdne1908:0",
+            desc:'crwdns1910:0crwdne1910:0',
+            checkbox:yesno
+        }
+    },{
+        id:"anime",
+        storage:"animation",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"crwdns2446:0crwdne2446:0",
+            desc:"",
+            checkbox:yesno
+        }
+    }
+];
+var postConstruction=[
+    {
+        id:"cw-text",
+        storage:"cw-text",
+        checkbox:false,
+        doubleText:false,
+        width:150,
+        setValue:"",
+        text:{
+            head:"crwdns590:0crwdne590:0",
+            desc:"",
+            after:""
+        }
+    },{
+        checkbox:false,
+        doubleText:true,
+        data:[
+            {
+                id:"cw_sentence",
+                storage:"cw_sentence",
+                width:50,
+                setValue:500,
+                text:{after:"crwdns583:0crwdne583:0 crwdns543:0crwdne543:0 crwdns585:0crwdne585:0"}
+            },{
+                id:"cw_letters",
+                storage:"cw_letters",
+                width:50,
+                setValue:7000,
+                text:{after:"crwdns584:0crwdne584:0 crwdns543:0crwdne543:0"}
+            }
+        ],
+        text:{
+            head:"crwdns588:0crwdne588:0",
+            desc:"crwdns589:0crwdne589:0",
+        }
+    },{
+        id:"cws",
+        storage:"always-cw",
+        checkbox:true,
+        setValue:"no",
+        text:{
+            head:"crwdns591:0crwdne591:0",
+            desc:"",
+            checkbox:yesno
+        }
+    },{
+        id:"vis",
+        storage:"vis",
+        checkbox:true,
+        setValue:"public",
+        text:{
+            head:"crwdns592:0crwdne592:0",
+            desc:"",
+            checkbox:[
+                {
+                    text:"crwdns593:0crwdne593:0",
+                    value:"public"
+                },{
+                    text:"crwdns594:0crwdne594:0",
+                    value:"unlisted"
+                },{
+                    text:"crwdns595:0crwdne595:0",
+                    value:"private"
+                },{
+                    text:"crwdns596:0crwdne596:0",
+                    value:"direct"
+                },{
+                    text:"crwdns1912:0crwdne1912:0",
+                    value:"memory"
+                },{
+                    text:"crwdns1914:0crwdne1914:0",
+                    value:"useapi"
+                }
+            ]
+        }
+    },{
+        id:"img",
+        storage:"img",
+        checkbox:true,
+        setValue:"no-act",
+        text:{
+            head:"crwdns599:0crwdne599:0",
+            desc:"",
+            checkbox:[
+                {
+                    text:"crwdns600:0crwdne600:0",
+                    value:"url"
+                },{
+                    text:"crwdns601:0crwdne601:0",
+                    value:"no-act"
+                }
+            ]
+        }
+    },{
+        id:"box",
+        storage:"box",
+        checkbox:true,
+        setValue:"yes",
+        text:{
+            head:"crwdns568:0crwdne568:0",
+            desc:"",
+            checkbox:[
+                {
+                    text:"crwdns569:0crwdne569:0",
+                    value:"yes"
+                },{
+                    text:"crwdns571:0crwdne571:0",
+                    value:"no"
+                },{
+                    text:"crwdns570:0crwdne570:0",
+                    value:"absolute"
+                }
+            ]
+        }
+    },{
+        id:"quote",
+        storage:"quote",
+        checkbox:true,
+        setValue:"nothing",
+        text:{
+            head:"crwdns603:0crwdne603:0",
+            desc:"",
+            checkbox:[
+                {
+                    text:"crwdns604:0crwdne604:0",
+                    value:"simple"
+                },{
+                    text:"crwdns605:0crwdne605:0",
+                    value:"mention"
+                },{
+                    text:"crwdns606:0crwdne606:0",
+                    value:"full"
+                },{
+                    text:"@@notqt@@",
+                    value:"nothing"
+                }
+            ]
+        }
+    },{
+        id:"main",
+        storage:"mainuse",
+        checkbox:true,
+        setValue:"remain",
+        text:{
+            head:"crwdns607:0crwdne607:0",
+            desc:"crwdns608:0crwdne608:0",
+            checkbox:[
+                {
+                    text:"crwdns609:0crwdne609:0",
+                    value:"remain"
+                },{
+                    text:"crwdns610:0crwdne610:0",
+                    value:"main"
+                }
+            ]
+        }
+    },{
+        id:"sec",
+        storage:"sec",
+        checkbox:true,
+        setValue:"public",
+        text:{
+            head:"crwdns1916:0crwdne1916:0",
+            desc:"",
+            checkbox:[
+                {
+                    text:"crwdns1920:0crwdne1920:0",
+                    value:"nothing"
+                },{
+                    text:"crwdns593:0crwdne593:0",
+                    value:"public"
+                },{
+                    text:"crwdns594:0crwdne594:0",
+                    value:"unlisted"
+                },{
+                    text:"crwdns595:0crwdne595:0",
+                    value:"private"
+                },{
+                    text:"crwdns596:0crwdne596:0",
+                    value:"direct"
+                },{
+                    text:"crwdns1922:0crwdne1922:0",
+                    value:"local",
+                    kirishima:true,
+                    kirishimaText:"非対応インスタンスでは「未収載」になります。"
+                }
+            ]
+        }
+    },{
+        id:"zero",
+        storage:"emoji-zero-width",
+        checkbox:true,
+        setValue:"normal",
+        setValue:"no",
+        text:{
+            head:"@@zeroWidthEmoji@@",
+            desc:"",
+            checkbox:yesno
+        }
+    }
+]

app/view/ps/update.html

@@ -6,13 +6,13 @@
 <link href="../../css/master.css" type="text/css" rel="stylesheet">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans:300" rel="stylesheet">
 <meta charset="utf-8">
-{{comment-start}}
+
 <script type="text/javascript">
 	var _jipt = [];
 	_jipt.push(['project', 'thedesk']);
 </script>
 <script type="text/javascript" src="https://cdn.crowdin.com/jipt/jipt.js"></script>
-{{comment-end}}
+
 </head>
 <body>
 <style>
@@ -62,9 +62,6 @@ a,button,input,label,i{
 #prog{
     font-size:200%;
 }
-.linux, .mac{
-    display:none;
-}
 </style>
 <script type="text/javascript" src="../../js/common/jquery.js"></script>
 <script type="text/javascript" src="../../js/platform/first.js"></script>
@@ -78,11 +75,10 @@ a,button,input,label,i{
         <p>crwdns669:0crwdne669:0</p>
         <span id="now"></span>→<b id="ver"></b><br>
         <span id="det"></span><br>
-        <button class="waves-effect btn windows" onclick="update('install')" style="margin-left:15px;">crwdns2382:0crwdne2382:0</button>
-        <button class="waves-effect btn windows" onclick="update('portable')" style="margin-left:15px;">crwdns1950:0crwdne1950:0</button>
-        <span class="linux">crwdns2384:0crwdne2384:0<br></span>
-        <button class="waves-effect btn linux" onclick="update('linux')" style="margin-left:15px;">crwdns670:0crwdne670:0</button>
-        <button class="waves-effect btn mac" onclick="update('mac')" style="margin-left:15px;">crwdns670:0crwdne670:0</button>
+        <button class="waves-effect btn windows hide" onclick="update('install')" style="margin-left:15px;">crwdns2382:0crwdne2382:0</button>
+        <button class="waves-effect btn windows hide" onclick="update('portable')" style="margin-left:15px;">crwdns1950:0crwdne1950:0</button>
+        <button class="waves-effect btn linux hide" onclick="update('linux')" style="margin-left:15px;">crwdns670:0crwdne670:0</button>
+        <button class="waves-effect btn mac hide" onclick="update('mac')" style="margin-left:15px;">crwdns670:0crwdne670:0</button>
         <br>
         crwdns678:0crwdne678:0<br>crwdns679:0crwdne679:0
     </div>
@@ -184,12 +180,12 @@ function verck(){
     var remote=electron.remote;
     var platform=remote.process.platform;
     var bit=process.arch;
-	if(platform=="linux"){
-        $('.windows').hide()
-        $('.linux').show()
-	}else if(platform=="mac"){
-        $('.windows').hide()
-        $('.mac').show()
+	if(platform=="win32"){
+        $('.windows').removeClass("hide")
+	}else if(platform=="linux"){
+        $('.linux').removeClass("hide")
+	}else if(platform=="darwin"){
+        $('.mac').removeClass("hide")
 	}
 	var start="https://thedesk.top/ver.json";
 	fetch(start, {

trial.travis.yml

@@ -1,27 +1,11 @@
-language: objective-c
-cache:
-  directories:
-    - node_modules
-env:
-  - NODE_VERSION="9.9.0"
-before_install:
-  # nvm をインストールする。Travis の OS X 環境には nvm はデフォルトで入っていない
-  - git clone https://github.com/creationix/nvm.git /tmp/.nvm
-  - source /tmp/.nvm/nvm.sh
-  # 指定バージョンの Node をインストールする
-  - nvm install $NODE_VERSION
-  # 指定バージョンの Node を有効にする
-  - nvm use --delete-prefix $NODE_VERSION
-  - node --version
-script:
-  - node --version
+os: windows
+language: node_js
+node_js:
+- '10.15.2'
+script: node -v
 before_deploy:
-  - brew update
-  - brew install wine
-  - wine --version
-  - brew install makensis
-  - npm install electron-builder -g
   - cd app
+  - npm install electron-builder -g
   - npm install
   - electron-builder --win --ia32
   - mv ../build/TheDesk-setup.exe ../TheDesk-setup-ia32.exe
@@ -29,24 +13,22 @@ before_deploy:
   - electron-builder --win --x64
   - mv ../build/TheDesk-setup.exe ../TheDesk-setup.exe
   - mv ../build/TheDesk*.exe ../TheDesk.exe
-  - electron-builder --linux --x64
-  - mv ../build/thedesk*.snap ../TheDesk.snap
-  - electron-builder --mac --x64
-  - mv ../build/TheDesk*.dmg ../TheDesk.dmg
   - cd ../
+  - ls
+after_deploy: ls
 deploy:
+  skip_cleanup: true
   provider: releases
-  # GitHub にリリースするための API KEY を暗号化した値
   api_key:
     secure: jndR02p5KRTtcJk18b3YsXL2cC+yzEf1AOqXdpWciF8f3lO5oY01jlxd17xdHIcK7VywSsLVZpLToSdqAoIEhJ5OxEQ/FmA3FlmbwwD6ou13gLa4VGIvsBHveCmKGjVu0Z++atIy76tZYU1SOWFWv4B0ZhnVz2ca2VZynvLgw3YNsPJH7rHO966GXgRkGYJAJ4UvLg3sj/iztVh2FSfbUj5IGO1e/JHJO63wAo1MSQtRjkutVgl/djnBLC6vbL4YHkM3Ynpkx/YQEcxwrmeY0Ra8D5yYDq4MNIDMmZahWC+k4u2eA2Cj2ifBFNxbZvTN75vLwRBp6DsTNHsiqkXrSPDBdNeet31RbwTQ6LtsK8jqmL4S/59dmLcj7uCU2WxyBLPbJdbdZWlqW2ZQvfQY8QVAYy7S3MiHQWQN0oP5wqXk89jcgR42ig/zsqFNPpXHM4mExR7l/gDLPg0j9c3XEF6sWtk3FmJN1i4+B+9kn09b6UKlV7EFPKp8XcFNrz4ZcE9/I8lKwsqLVG2jAXIk7Z9LwDRcAmK5eG348X5zwFtOY6raKIvRw2cn92bPnEI+55v8A4WANS2647GFTgxHj30D0d/sOZmJ5BS34zpdWTgE0AlKg7sOqkncjqoW5J5zCh5Ow7b3KXvEvlAts44mAag8tZTectxMP4iguXvTnv4=
-  # Releases ページにアップロードするファイル
-  file:
+  file: 
     - TheDesk.exe
     - TheDesk-setup.exe
     - TheDesk-ia32.exe
     - TheDesk-setup-ia32.exe
-    - TheDesk.snap
-    - TheDesk.dmg
-  skip_cleanup: true
   on:
-    repo: cutls/TheDesk
+    repo: cutls/TheDesk
+branches:
+  only:
+  - master
+