Skip to content

Instantly share code, notes, and snippets.

@sounisi5011

sounisi5011/README.md

Last active May 21, 2020 23:25
Show Gist options
  • Save sounisi5011/4b17ca4ec607f6f731da1978b0d3383e to your computer and use it in GitHub Desktop.
Save sounisi5011/4b17ca4ec607f6f731da1978b0d3383e to your computer and use it in GitHub Desktop.
Download ZIP
日本語化パッチ用JSONジェネレーター
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html lang=ja>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta name=format-detection content="telephone=no,email=no,address=no">
<title>日本語化パッチ用JSONジェネレーター</title>
<link rel=stylesheet href="./main.css">
<link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/vs2015.min.css" integrity="sha256-e+xyu+n0Lf/CcIJO7HoFhKOu97JVj09p39g25tzh6is=" crossorigin=anonymous>
<h1>日本語化パッチ用JSONジェネレーター</h1>
<main>
<p><label for=item-name>アイテム名：</label><input type=text id=item-name></p>
<p>
<label for=item-description>アイテム説明文：</label><br>
<textarea id=item-description rows=3></textarea>
</p>
<details open>
<summary>ファイル名</summary>
<p><label for=item-id>アイテムID：</label><input type=text value=example id=item-id></p>
<p>
<label for=item-type>アイテム専用拡張子：</label><input type=text value=item id=item-type list=item-type-list>
<datalist id=item-type-list>
<option value=actitem></option>
<option value=augment></option>
<option value=chest></option>
<option value=head></option>
<option value=item></option>
<option value=legs></option>
<option value=liqitem></option>
<option value=matitem></option>
<option value=object></option>
</datalist>
</p>
</details>
<p><input type=button value="ダウンロード" id=download-button></p>
<details>
<summary>JSONプレビュー</summary>
<pre id=preview-area class=lang-json></pre>
</details>
</main>
<footer>
<h2>Gist</h2>
<p><a href="https://gist.github.com/sounisi5011/4b17ca4ec607f6f731da1978b0d3383e">gist.github.com<wbr>/sounisi5011<wbr>/4b17ca4ec607f6f731da1978b0d3383e</a>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js" integrity="sha256-dW8u4dvEKDThJpWRwLgGugbARnA3O2wqBcVerlg9LMc=" crossorigin=anonymous defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js" integrity="sha256-/2C3CAfmuTGkUqK2mVrhkTacBscoR1caE0u2QZZ3Uh8=" crossorigin=anonymous defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/languages/json.min.js" integrity="sha256-6YP8JQrs9CYJQqz+ol+0hZowCn+z/TEvgkayTdzCSkA=" crossorigin=anonymous defer></script>
<script src="./main.js" defer></script>
Raw
main.css
details {
border: solid 1px #ccc;
padding: 0.5em;
}
details > summary {
cursor: pointer;
}
br + textarea {
box-sizing: border-box;
width: 100%;
resize: vertical;
}
.hljs[data-filename]:before {
content: attr(data-filename);
display: block;
margin-top: -0.5em;
margin-left: -0.5em;
padding-bottom: 0.5em;
}
Raw
main.js
/*
* HTMLの要素に対応するDOM要素オブジェクトを取得
*/
const itemNameInputElem = document.getElementById("item-name");
const itemDescriptionInputElem = document.getElementById("item-description");
const itemIDInputElem = document.getElementById("item-id");
const itemTypeInputElem = document.getElementById("item-type");
const dlButtonElem = document.getElementById("download-button");
const previewAreaElem = document.getElementById("preview-area");
/*
* 生成内容を保持する変数を定義
*/
let filenameStr = "";
let jsonText = "";
function filenameInputListener() {
/*
* ファイル名の文字列を生成
*/
filenameStr = `${itemIDInputElem.value}.${itemTypeInputElem.value}.patch`;
/*
* ファイル名をHTMLに反映
*/
previewAreaElem.dataset.filename = filenameStr;
}
function dataInputListener() {
/*
* JSONファイル用のデータを定義
*/
const jsonData = [
{
op: "replace",
path: "/description",
value: itemDescriptionInputElem.value,
},
{
op: "replace",
path: "/shortdescription",
value: itemNameInputElem.value,
},
];
/*
* データをJSON文字列に変換
*/
jsonText = JSON.stringify(jsonData, null, 4)
// 改行コードをCRLFに変換
.replace(/\r\n?|\n/g, "\r\n");
/*
* JSONのプレビューを更新する
*/
// JSON文字列をHTMLに反映
previewAreaElem.textContent = jsonText;
// highlight.jsでシンタックスハイライトを適用
hljs.highlightBlock(previewAreaElem);
}
function downloadListener() {
/*
* ファイル名の文字列とJSON文字列を再生成
*/
filenameInputListener();
dataInputListener();
/*
* JSON文字列を元に、ファイルダウンロード用のオブジェクトURLを生成
*/
const blob = new Blob([jsonText], { type: "application/json" });
const downloadURL = URL.createObjectURL(blob);
/*
* オブジェクトURLを設定したa要素をクリックし、ダウンロードダイアログを表示
*/
const aElem = document.createElement("a");
aElem.href = downloadURL;
aElem.download = filenameStr;
aElem.click();
}
/*
* 入力時に更新するためのinputイベントを登録
*/
itemNameInputElem.addEventListener("input", dataInputListener);
itemDescriptionInputElem.addEventListener("input", dataInputListener);
itemIDInputElem.addEventListener("input", filenameInputListener);
itemTypeInputElem.addEventListener("input", filenameInputListener);
/*
* autosizeで説明文の入力欄が自動でリサイズするよう設定
*/
autosize(itemDescriptionInputElem);
/*
* ダウンロードボタンをクリックした時にダウンロード処理を実行するためのclickイベントを登録
*/
dlButtonElem.addEventListener("click", downloadListener);
/*
* 初期状態のファイル名とJSON文字列を生成し、HTMLに反映
*/
filenameInputListener();
dataInputListener();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment