sounisi5011/README.md

## README.md

      
    Raw
  

              README.md
            
          
    日本語化パッチ用JSONジェネレーター

このツイートの要望に応えて書いてみた雑アプリ。
動作ページ

  
## 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>

## 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;
}

## 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();
	<!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>
	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;
	}
	/*
	* 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();