【忘備録】完全に自分用メモ

2024年3月12日 23:59

クリスタログボついに全部埋められた。
740CP。

未だ格闘中でちょっと公開するレベルじゃないが作業している仮定を残す意味で今日はコード。
本当は修正しなければならない部分がたくさんのキメラなので途中経過を上げるのも憚られるが…

<!DOCTYPE html>
<html lang="ja">
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <style>
            * { box-sizing: border-box; }
            textarea { width: 100%; }
        </style>
        <script>
          const APPID = 'dj00aiZpPWQ0ckVNZWNlcUp2aiZzPWNvbnN1bWVyc2VjcmV0Jng9ZTA-';
          async function yapifuri(query) {
              const url = "https://jlp.yahooapis.jp/FuriganaService/V2/furigana?appid=" + encodeURIComponent(APPID);
              const res = await fetch(url, {
                  method: 'POST',
                  mode: 'cors',
                  body: JSON.stringify({
                      "id": "A123",
                      "jsonrpc" : "2.0",
                      "method" : "jlp.furiganaservice.furigana",
                      "params" : { "q" : query, "grade" : 1}
                  }),
                });
              return res.json();
          }
          async function kaiseki() {
              const text = document.querySelector("#input-text").value;
              const j = await yapifuri(text);
              const putParen = function(base, rubyText) { return base + "(" + rubyText + ")"; };
              const putRuby = (base, rubyText) => {
                  const annotated = createElement('ruby');
                  const openingParen = createElement('rp');
                  openingParen.append('(');
                  const closingParen = createElement('rp');
                  closingParen.append(')');
                  const ruby = createElement('rt');
                  ruby.append(rubyText);
                  annotated.append(base, openingParen, ruby, closingParen);
                  return annotated;
                };

              if (!j || !j['result']['word']) return;
              document.querySelector("#output-text").value =
                  j['result']['word'].map(
                      x => x['surface'] + (x['furigana'] ? '(' + x['furigana'] + ')' : '')
                  ).join("");
          }
        </script>

  </head>
  <body>
    <div class="container">
      <h1>Full Automatic Ruby</h1>
    </div>
   
   <div class="container">
        <div class="form-group">
          <label for="input-text">変換したい文章</label>
          <textarea id="input-text" placeholder="ここに貼り付け"  rows="5"></textarea>
        </div>
        <div class="form-group">
          <label for="grade">ルビをふる範囲</label>
          <select class="form-control" id="grade">
            <option value="1">小学1年生が読める</option>
            <option value="2">小学2年生が読める</option>
            <option value="3">小学3年生が読める</option>
            <option value="4">小学4年生が読める</option>
            <option value="5">小学5年生が読める</option>
            <option value="6">小学6年生が読める</option>
            <option value="7">中学生が読める</option>
            <option value="8">常用漢字外のみ</option>
            <option value="" >漢字とカタカナ</option>
          </select>
        </div>
        <div class="form-group">
          <label for="output-text">漢字にかっこでルビを振った文章</label>
          <textarea id="output-text" rows="10"></textarea>
        </div>
          <button class="btn btn-primary my-1" onclick="kaiseki()">変換</button>
           <p style="text-align: right">
            <!-- Begin Yahoo! JAPAN Web Services Attribution Snippet -->
           <span style="margin:15px 15px 15px 15px"><a href="https://developer.yahoo.co.jp/sitemap/">Web Services by Yahoo! JAPAN</a></span>
            <!-- End Yahoo! JAPAN Web Services Attribution Snippet -->
          </p>
   </div>

  </body>
</html>

この記事が気に入ったらサポートをしてみませんか？