入力した漢字がJIS漢字水準のどれか、それは常用漢字か、ついでにUTF16と16進数も表示する
デモ
https://script.google.com/macros/s/AKfycbwy_MVWnJNHV4u61T-Nxdaua3znBRqKa9LxaQnEE0T50zx6uGM/exec
やっていること
- 漢字一覧のJSONファイルを取得してJavaScriptで扱えるようにparseする
- 入力された漢字の[UTF16, 16進数, JIS漢字水準 , 常用漢字]の値を取得する
- それぞれを画面に表示する
事前に作っておくもの
- JIS第一水準から第四水準と常用漢字の一覧から以下のようなJSONファイル
{
"漢字1": [ UTF16, 16進数, JIS漢字水準 , 常用漢字],
"漢字2": [ UTF16, 16進数, JIS漢字水準 , 常用漢字],
...
}
JSONファイルの中身
それを作ったJSONファイル
（個人のGoogleドライブ上に置いているため、予告なく共有設定を切ることもあります）
https://drive.google.com/file/d/1nP585m4LmmoaVlXDDCQPEKEr0pj6FIje/view?usp=sharing
JSONファイルを作るための元データ（wikipediaの情報を元にシートにまとめたもの）
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
var FILE_ID = "1HmoOYSCFh3tq6u22o5eE4hhmjwsle7hv";
function get_jobj_gs() {
var file = DriveApp.getFileById(FILE_ID);
var blob = file.getBlob()
var data = blob.getDataAsString();
var jobj = JSON.parse(data);
return jobj;
}
|
意訳この機能がやること 指定したhtmlファイルを表示する 漢字のデータが入ったJSONFILE_IDを指定（Googleドライブ） この機能がやること FILE_IDからファイルを取得して ファイルのblobを取得して データを取得して オブジェクトに変換して 返す |
index.html
<!DOCTYPE html>
<head>
<style>
.kanji {
width: 120px;
font-size: 60px;
border: none;
}
.tb {
width: 120px;
font-size: 18px;
border: none;
}
table {
border: solid 1px #000000;
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
}
td {
border: solid 1px silver
}
</style>
</head>
<html>
<body>
<table>
<tbody>
<tr>
<td>漢字</td>
<td><input type="text" id="kanji" class="kanji"></td>
</tr>
<tr>
<td>UTF16</td>
<td><input type="text" id="utf16" class="tb" readonly></td>
</tr>
<tr>
<td>16進数</td>
<td><input type="text" id="hexadecimal" class="tb" readonly></td>
</tr>
<tr>
<td>JIS</td>
<td><input type="text" id="category" class="tb" readonly></td>
</tr>
<tr>
<td>常用</td>
<td><input type="text" id="joyo" class="tb" readonly></td>
</tr>
</tbody>
</table>
<script>
var kanji = document.getElementById("kanji");
var utf16 = document.getElementById("utf16");
var hexadecimal = document.getElementById("hexadecimal");
var category = document.getElementById("category");
var joyo = document.getElementById("joyo");
var obj;
kanji.focus()
document.addEventListener('DOMContentLoaded', get_jobj);
kanji.onkeyup = kanji_keyup;
function get_jobj() {
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.get_jobj_gs();
}
function onSuccess(jobj) {
obj = jobj;
}
function onFailure(e) {
alert([e.message, e.stack]);
}
function kanji_keyup(e) {
var kanji = this.value[0];
var key_code = e.keyCode;
if (key_code == 8) {
clear_result();
get_result(kanji);
} else {
get_result(kanji);
}
}
function get_result(kanji) {
if(/[㐂-頻]/.test(kanji)){
utf16.value = obj[kanji][0];
hexadecimal.value = obj[kanji][1];
category.value = obj[kanji][3];
joyo.value = obj[kanji][4];
}
}
function clear_result() {
utf16.value = '';
hexadecimal.value = '';
category.value = '';
joyo.value = '';
}
</script>
</body>
</html>
|
意訳kanjiのスタイル 幅 文字サイズ 枠線 tbのスタイル 幅 文字サイズ 枠線 tableのスタイル 枠線 枠線を離さず表示 左の余白 右の余白 taのスタイル 枠線 漢字 漢字の入力欄 UTF16 UTF16の出力欄 16進数 16進数の出力欄 JIS JISの出力欄 常用 常用漢字の出力欄 idがkanjiの要素を取得 idがutf16の要素を取得 idがhexadecimalの要素を取得 idがcategoryの要素を取得 idがjoyoの要素を取得 objの入れ物 kanjiにフォーカス DOMの内容が読み込まれたらget_jobjを実行する kanji内でキーが上がったらkanji_keyupを実行する この機能がやること .gsのスクリプトを実行する 失敗したらonFailureを実行する 成功したらonSuccessを実行する 実行する.gsスクリプトはget_jobj_gs この機能がやること 渡されたjobjをobjに入れる この機能がやること 受け取ったエラーをアラートに出す この機能がやること 入力された先頭の漢字をkanjiに入れて 押されたキーコードを取得して もし8なら（8はdeleteキー） clear_resultを実行して get_resultにkanjiを渡す それ以外なら get_resultにkanjiを渡す この機能がやること もし渡されたkanjiが㐂-頻の範囲にあるなら（JIS第一から第四水準がこの範囲内に含まれる前提） objからutf16の値を取得して objからhexadecimalの値を取得して objからcategoryの値を取得して objからjoyoの値を取得してそれぞれの出力欄に入れる この機能がやること utf16の値を空にして hexadecimalの値を空にして categoryの値を空にして joyoの値を空にする |