LANG SELRCT

コードを書く場所についてはこちら

2018年4月15日日曜日

入力した漢字の情報を表示する(JIS漢字水準、常用漢字、UTF16、16進数)


入力した漢字が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の値を空にする