スマホの入力を簡単にする？「Two Tap Input」

2026年1月31日 05:51

【更新履歴】

・2026/1/30　バージョン1.0公開。
・2026/1/30　バージョン1.1公開。
・2026/1/31　バージョン1.3公開。
・2026/1/31　バージョン1.4公開。（検索、AI、変換強化）
・2026/1/31　バージョン1.4（英語版）公開。

《このツールの概要》

・スマホ画面のテキスト入力方式といえば、
　フリック入力が一般的ですが、
　このツールでは、独自の方式で入力します。

・まあ、フリック以外の入力方式を試すために作った
　という感じですが、意外とはやるかもしれません。^^;

・入力したテキストは、
　コピ（コピー）ボタンを押すことで
　他のwebページなどで使用できる他、
　検索ボタンやAIボタンを押すことで
　Googleの検索結果を表示したり、
　ChatGptからの解答を表示することができます。

《 PCでスマホの画面を試す方法》

・htmlファイルをクリックして、Chromeで開く。

・Chromeのメニューバーから、
　「設定」→「その他のツール」→「デベロッパーツール」
　をクリックして、スマホのマークをクリックすると、
　スマホの画面で操作することができます。

・ダウンロードされる方はこちら。↓

・ソースコードはこちら。↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Two Tap Input 1.4.2</title>
<style>
    :root {
        --bg-color: #121212;
        --text-color: #fff;
        
        /* 行カラー */
        --c-a: #e60012; --c-k: #004098; --c-s: #40e0d0; --c-t: #ffd900;
        --c-n: #009944; --c-h: #ff69b4; --c-m: #800080; --c-y: #f39800;
        --c-r: #b08d55; --c-w: #6cbb5a;
        --c-sym: #555555;
        
        /* タブカラー */
        --tab-hira: #6f4b3e; --tab-kata: #1d2088; --tab-lower: #ff69b4;
        --tab-upper: #c71585; --tab-num: #40e0d0;
        --tab-history: #8b4513;
        --tab-emoji: #ffd900;

        /* ボタン色設定 */
        --col-ent: #ffd900;
        --col-ctl: #40e0d0;
        
        --col-ai: #ff1493;
        --col-sch: #00e676;
        --col-cpy: #00bfff;
        --col-pst: #ff8c00;
        --col-silver: #c0c0c0;

        --cursor-color: #00ffff;
        --bg-inactive-btn: #555555;
        --bg-candidate: #444444;
        --bg-chip: #666666;
    }

    @keyframes border-blink {
        0%   { border-color: var(--cursor-color); box-shadow: 0 0 5px var(--cursor-color); }
        50%  { border-color: transparent; box-shadow: none; }
        100% { border-color: var(--cursor-color); box-shadow: 0 0 5px var(--cursor-color); }
    }

    body {
        margin: 0; padding: 0;
        background-color: var(--bg-color);
        color: var(--text-color);
        font-family: "Hiragino Kaku Gothic ProN", sans-serif;
        height: 100vh; height: 100dvh; width: 100vw;
        display: flex; flex-direction: column;
        overflow: hidden; user-select: none; touch-action: none; 
    }

    /* --- 上部エリア --- */
    #top-area {
        padding-top: max(env(safe-area-inset-top), 10px);
        padding-bottom: 2px; padding-left: 5px; padding-right: 5px;
        flex-shrink: 0; z-index: 100; box-sizing: border-box;
        background: #000; border-bottom: 2px solid #333;
        display: flex; flex-direction: column; gap: 3px;
        transition: all 0.3s ease;
    }

    /* エディタ全画面モード */
    #top-area.fullscreen-editor {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        height: 100dvh; width: 100vw;
        padding-bottom: max(env(safe-area-inset-bottom), 20px);
        background: #000; z-index: 5000;
    }
    #top-area.fullscreen-editor #display-wrapper { height: 100%; flex-direction: column; }
    #top-area.fullscreen-editor #line-indicator { width: 100%; flex-direction: row; height: 30px; gap: 10px; padding: 0 10px; }
    #top-area.fullscreen-editor #input-line { flex: 1; height: auto; font-size: 20px; }
    #top-area.fullscreen-editor .side-controls, 
    #top-area.fullscreen-editor #sub-bar { display: none; }

    /* 候補全画面モード */
    #top-area.fullscreen-cand {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        height: 100dvh; width: 100vw;
        padding-bottom: max(env(safe-area-inset-bottom), 20px);
        background: #000; z-index: 5000;
        display: flex; flex-direction: column;
    }
    #top-area.fullscreen-cand #display-wrapper { display: none; }
    #top-area.fullscreen-cand #sub-bar { height: 100%; flex-direction: column; }
    #top-area.fullscreen-cand #candidate-bar { flex: 1; align-content: flex-start; }
    #top-area.fullscreen-cand .extended-tools { 
        height: 60px; flex-shrink: 0; flex-direction: row; width: 100%; 
        justify-content: flex-end; padding: 5px; box-sizing: border-box;
    }
    #top-area.fullscreen-cand .tool-col { width: 60px; height: 100%; }

    #display-wrapper {
        display: flex; align-items: stretch;
        height: 90px; gap: 4px;
        transition: height 0.3s;
    }
    
    /* 全画面解除用のフローティングボタン (エディタ用) */
    #exit-full-editor-btn {
        display: none;
        position: absolute; bottom: 20px; right: 20px;
        width: 50px; height: 50px; border-radius: 25px;
        background: rgba(255, 217, 0, 0.8); color: #000;
        font-size: 24px; border: 2px solid #fff;
        align-items: center; justify-content: center;
        z-index: 5001;
    }
    #top-area.fullscreen-editor #exit-full-editor-btn { display: flex; }

    /* 行番号 */
    #line-indicator {
        width: 40px; 
        display: flex; flex-direction: column; 
        align-items: center; justify-content: flex-start;
        padding-top: 6px;
        background: #111; border-radius: 4px; flex-shrink: 0;
        line-height: 1.0;
    }
    .ln-num { font-size: 20px; font-weight: bold; color: #fff; }
    .ln-label { font-size: 10px; color: #fff; margin-top: 2px; }

    /* 入力欄 */
    #input-line {
        font-size: 18px; line-height: 1.5;
        white-space: pre-wrap; overflow-y: auto;
        flex: 1;
        border: 2px solid #555; background: #ffffff; color: #000000;
        padding: 6px; border-radius: 6px;
        word-break: break-all;
        outline: none; caret-color: #000;
    }
    [contenteditable] { -webkit-user-select: text; user-select: text; }
    .composing-span { background: #d0ebff; border-bottom: 2px solid #00b4d8; }

    /* サイドコントロール */
    .side-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 2px; width: 70px; flex-shrink: 0;
    }
    .ctrl-btn {
        border: 2px solid transparent; border-radius: 4px;
        color: #000; font-size: 16px; font-weight: bold;
        cursor: pointer; display: flex; align-items: center; justify-content: center;
        background: var(--col-ctl); box-sizing: border-box;
    }
    .btn-ent { background: var(--col-ent); font-size: 20px; color: #000; } 
    .btn-full { background: var(--col-ctl); color: #000; font-size: 16px; border: 1px solid #333; }

    /* ホバーエフェクト */
    .ctrl-btn:hover, .ctrl-btn:active,
    .sub-btn:hover, .sub-btn:active,
    .key:hover, .key:active,
    .cand-chip:hover, .cand-chip:active {
        border: 2px solid var(--cursor-color);
        animation: border-blink 0.8s infinite;
        z-index: 10; position: relative;
    }

    #sub-bar {
        height: 100px; 
        display: flex; gap: 4px; flex-shrink: 0; align-items: stretch;
    }
    
    #candidate-bar {
        flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; overflow-y: auto;
        background: var(--bg-candidate); padding: 4px; border-radius: 4px; gap: 4px;
    }
    .cand-chip {
        background: #ffffff; color: #000000;
        padding: 6px 14px;
        border-radius: 6px; 
        font-size: 18px; font-weight: bold;
        border: 2px solid #ccc;
        height: auto; min-height: 36px;
        box-sizing: border-box; display: flex; align-items: center;
        cursor: pointer;
    }
    
    .extended-tools {
        display: flex; gap: 3px; flex-shrink: 0;
    }
    
    /* 3つの列定義: 全画面, コピペ, リンク */
    .tool-col {
        display: flex; flex-direction: column; gap: 2px;
        width: 40px; flex-shrink: 0;
    }
    /* 全画面ボタン用の列は少し幅広にしてもよいが一旦揃える */
    .tool-col.col-full { width: 40px; }

    .sub-btn {
        border: 2px solid transparent; border-radius: 4px;
        font-size: 11px; font-weight: bold;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; box-sizing: border-box; width: 100%;
    }
    /* 高さ設定: col-full内のボタンは100%, 他はflex:1 */
    .tool-col .sub-btn { flex: 1; }

    .btn-cpy { background: var(--col-cpy); color: #fff; }
    .btn-pst { background: var(--col-pst); color: #fff; }
    .btn-cand-full { background: var(--col-ctl); color: #000; font-size: 16px; border: 1px solid #333; }
    .btn-sch { background: var(--col-sch); color: #fff; font-size: 10px; }
    .btn-ai  { background: var(--col-ai);  color: #fff; font-size: 12px; }


    /* --- メインエリア --- */
    #main-stage {
        flex: 1; position: relative; overflow: hidden;
        background: #111; padding: 2px;
    }

    #twothumb-board {
        display: grid;
        grid-template-columns: 1fr 2.8fr; 
        gap: 6px; 
        height: 100%; width: 100%; box-sizing: border-box;
    }
    
    #left-panel { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 3px; }
    #left-panel.jp-layout { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, 1fr); }

    #right-panel { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 3px; }
    #right-panel.jp-layout { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr); }
    #right-panel.sym-layout { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); }
    
    #right-panel.list-layout { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); }

    .key {
        display: flex; align-items: center; justify-content: center;
        font-weight: bold; border-radius: 5px; 
        cursor: pointer; color: #fff;
        box-shadow: 0 2px 0 rgba(0,0,0,0.3);
        border: 2px solid transparent; box-sizing: border-box;
        text-align: center; line-height: 1.1; overflow: hidden;
    }
    .key-left.active {
        border-color: var(--cursor-color);
        animation: border-blink 1s infinite;
        filter: brightness(1.2);
        z-index: 5;
    }
    .font-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif; }

    .row-a { background: var(--c-a); } .row-k { background: var(--c-k); }
    .row-s { background: var(--c-s); color: #000; text-shadow: none; }
    .row-t { background: var(--c-t); color: #000; text-shadow: none; }
    .row-n { background: var(--c-n); } .row-h { background: var(--c-h); }
    .row-m { background: var(--c-m); } .row-y { background: var(--c-y); color: #000; text-shadow: none; }
    .row-r { background: var(--c-r); } .row-w { background: var(--c-w); }
    .row-sym { background: var(--c-sym); }
    .key-del { background: #d62828; font-size: 14px; }

    .key-cat { background: var(--bg-inactive-btn); border: 1px solid #777; font-size: 14px; color: #fff; }
    .key-cat.active { background: #eee; color: #000; border: 2px solid #fff; }
    
    .key-pager { background: var(--col-silver); font-size: 20px; color: #000; border: 1px solid #999; }

    .key-char { background: #333; font-size: 28px; }
    .key-jp-char { font-size: 24px; }
    
    .key-hist { background: #333; font-size: 14px; color: #fff; text-align: left; padding: 4px; justify-content: flex-start; white-space: nowrap; text-overflow: ellipsis; display: block; overflow: hidden; }

    /* --- 下部タブ --- */
    #tab-bar {
        height: auto;
        min-height: 50px;
        background: #111; border-top: 1px solid #333;
        display: flex; flex-shrink: 0; z-index: 10;
        /* 余白をさらに拡大 (+15px) */
        padding-bottom: max(env(safe-area-inset-bottom) + 70px, 70px);
    }
    .tab {
        flex: 1; display: flex; align-items: center; justify-content: flex-start;
        font-size: 12px; font-weight: bold; color: #888;
        border-right: 1px solid #222; flex-direction: column;
        cursor: pointer; background: #222; transition: all 0.2s;
        line-height: 1.1;
        padding-top: 8px;
    }
    .tab-lbl-main { font-size: 14px; margin-bottom: 2px;}
    .tab-lbl-sub { font-size: 9px; opacity: 0.8; }
    .t-hira.active { background: var(--tab-hira); color: #fff; }
    .t-kata.active { background: var(--tab-kata); color: #fff; }
    .t-lower.active { background: var(--tab-lower); color: #fff; }
    .t-upper.active { background: var(--tab-upper); color: #fff; }
    .t-num.active { background: var(--tab-num); color: #000; }
    .t-hist.active { background: var(--tab-history); color: #fff; }
    .t-emoji.active { background: var(--tab-emoji); color: #000; }
</style>
</head>
<body>

<div id="top-area">
    <div id="display-wrapper">
        <div id="line-indicator">
            <div class="ln-num" id="ln-num-text">1</div>
            <div class="ln-label">行</div>
        </div>
        <div id="input-line" contenteditable="true" inputmode="none" spellcheck="false" 
             oninput="handleInput()" onclick="updateLineNum()" onkeyup="updateLineNum()"></div>
        
        <div class="side-controls">
            <button class="ctrl-btn btn-ent no-focus-steal" onmousedown="event.preventDefault()" onclick="insertDirect('\n')">↵</button>
            <button class="ctrl-btn no-focus-steal" onmousedown="event.preventDefault()" onclick="moveLine(-1)">▲</button>
            <button class="ctrl-btn btn-full no-focus-steal" onmousedown="event.preventDefault()" onclick="toggleEditorFull()">□</button>
            <button class="ctrl-btn no-focus-steal" onmousedown="event.preventDefault()" onclick="moveLine(1)">▼</button>
        </div>
    </div>
    
    <div id="sub-bar">
        <div id="candidate-bar"></div>
        <div class="extended-tools">
            <div class="tool-col col-full">
                <button class="sub-btn btn-cand-full no-focus-steal" onmousedown="event.preventDefault()" onclick="toggleCandFull()">□</button>
            </div>
            <div class="tool-col">
                <button class="sub-btn btn-cpy no-focus-steal" onmousedown="event.preventDefault()" onclick="copyAll()">コピ</button>
                <button class="sub-btn btn-pst no-focus-steal" onmousedown="event.preventDefault()" onclick="pasteFromClipboard()">貼付</button>
            </div>
            <div class="tool-col">
                <button class="sub-btn btn-sch no-focus-steal" onmousedown="event.preventDefault()" onclick="searchWeb()">検索</button>
                <button class="sub-btn btn-ai no-focus-steal" onmousedown="event.preventDefault()" onclick="askAI()">AI</button>
            </div>
        </div>
    </div>
    
    <div id="exit-full-editor-btn" onclick="toggleEditorFull()">×</div>
</div>

<div id="main-stage">
    <div id="twothumb-board">
        <div id="left-panel"></div>
        <div id="right-panel"></div>
    </div>
</div>

<div id="tab-bar">
    <div class="tab t-hira active" onclick="switchMode('hira', this)"><span class="tab-lbl-main">あ</span><span class="tab-lbl-sub">平仮名</span></div>
    <div class="tab t-kata" onclick="switchMode('kata', this)"><span class="tab-lbl-main">ア</span><span class="tab-lbl-sub">カタカナ</span></div>
    <div class="tab t-lower" onclick="switchMode('lower', this)"><span class="tab-lbl-main">abc</span><span class="tab-lbl-sub">英小</span></div>
    <div class="tab t-upper" onclick="switchMode('upper', this)"><span class="tab-lbl-main">ABC</span><span class="tab-lbl-sub">英大</span></div>
    <div class="tab t-num" onclick="switchMode('num', this)"><span class="tab-lbl-main">123</span><span class="tab-lbl-sub">数記</span></div>
    <div class="tab t-hist" onclick="switchMode('history', this)"><span class="tab-lbl-main">🕒</span><span class="tab-lbl-sub">履歴</span></div>
    <div class="tab t-emoji" onclick="switchMode('emoji', this)"><span class="tab-lbl-main">😀</span><span class="tab-lbl-sub">絵文字</span></div>
</div>

<script>
    const rainbowColors = ['#e60012','#f39800','#ffd900','#99cc00','#009944','#00a0e9','#004098','#4b0082','#800080','#e60033'];
    const jpRows = [{id:'a',l:'あ',c:'row-a'},{id:'k',l:'か',c:'row-k'},{id:'s',l:'さ',c:'row-s'},{id:'t',l:'た',c:'row-t'},{id:'n',l:'な',c:'row-n'},{id:'h',l:'は',c:'row-h'},{id:'m',l:'ま',c:'row-m'},{id:'y',l:'や',c:'row-y'},{id:'r',l:'ら',c:'row-r'},{id:'w',l:'わ',c:'row-w'}];
    const jpMap = {
        'hira': {'a':['あ','ぁ','', 'い','ぃ','', 'う','ぅ','', 'え','ぇ','', 'お','ぉ',''], 'k':['か','が','', 'き','ぎ','', 'く','ぐ','', 'け','げ','', 'こ','ご',''], 's':['さ','ざ','', 'し','じ','', 'す','ず','', 'せ','ぜ','', 'そ','ぞ',''], 't':['た','だ','', 'ち','ぢ','', 'つ','づ','っ', 'て','で','', 'と','ど',''], 'n':['な','','', 'に','','', 'ぬ','','', 'ね','','', 'の','',''], 'h':['は','ば','ぱ', 'ひ','び','ぴ', 'ふ','ぶ','ぷ', 'へ','べ','ぺ', 'ほ','ぼ','ぽ'], 'm':['ま','','', 'み','','', 'む','','', 'め','','', 'も','',''], 'y':['や','ゃ','', '','','', 'ゆ','ゅ','', '','','', 'よ','ょ',''], 'r':['ら','','', 'り','','', 'る','','', 'れ','','', 'ろ','',''], 'w':['わ','ゎ','', 'を','','', 'ん','','', '','','', '','',''], 'sym':[' ', '\n', '、', '。', '「', '」', '（', '）']},
        'kata': {'a':['ア','ァ','', 'イ','ィ','', 'ウ','ゥ','', 'エ','ェ','', 'オ','ォ',''], 'k':['カ','ガ','', 'キ','ギ','', 'ク','グ','', 'ケ','ゲ','', 'コ','ゴ',''], 's':['サ','ザ','', 'シ','ジ','', 'ス','ズ','', 'セ','ゼ','', 'ソ','ゾ',''], 't':['タ','ダ','', 'チ','ヂ','', 'ツ','ヅ','ッ', 'テ','デ','', 'ト','ド',''], 'n':['ナ','','', 'ニ','','', 'ヌ','','', 'ネ','','', 'ノ','',''], 'h':['ハ','バ','パ', 'ヒ','ビ','ピ', 'フ','ブ','プ', 'ヘ','ベ','ペ', 'ホ','ボ','ポ'], 'm':['マ','','', 'ミ','','', 'ム','','', 'メ','','', 'モ','',''], 'y':['ヤ','ャ','', '','','', 'ユ','ュ','', '','','', 'ヨ','ョ',''], 'r':['ラ','','', 'リ','','', 'ル','','', 'レ','','', 'ロ','',''], 'w':['ワ','ヮ','', 'ヲ','','', 'ン','','', '','','', '','',''], 'sym':[' ', '\n', '、', '。', '「', '」', '（', '）']}
    };
    const numCategories = [{id:'digits',l:'数字',src:"1234567890".split("")},{id:'math',l:'式',src:"+-*/=<>".split("")},{id:'point',l:'点',src:".,:;".split("")},{id:'bra',l:'カッコ',src:"()[]{}''\"\"".split("")},{id:'other',l:'その他',src:"%$#&@^|~`".split("")}];
    const rawPages = {
        'lower': [ "abcdefghi".split(""), "jklmnopqr".split(""), "stuvwxyz".split(""), ".,!?@_".split("") ],
        'upper': [ "ABCDEFGHI".split(""), "JKLMNOPQR".split(""), "STUVWXYZ".split(""), ".,!?@_".split("") ]
    };
    const emojiData = [..."😀😁😂🤣😃😄😅😆😉😊😋😎😍😘🥰😗😙😚🙂🤗🤩🤔🤨😐😑😶🙄😏😣😥😮🤐😯😪😫😴😌😛😜😝🤤😒😓😔😕🙃🤑😲☹️🙁😖😞😟😤😢😭😦😧😨😩🤯😬😰😱🥵🥶😳🤪😵😡😠🤬😷🤒"];
    const basicDictionary = [{k:'あ',v:['有る']},{k:'あい',v:['愛','AI']},{k:'か',v:['可','蚊']},{k:'かい',v:['貝','回','会']},{k:'きょう',v:['今日']},{k:'わたし',v:['私']},{k:'あした',v:['明日']}];
    let userDictionary = {};
    let historyData = [];

    let currentMode = 'hira';
    let currentSelection = 'a';
    let isNumFullWidth = false; 
    let composingText = "";
    const inputEl = document.getElementById('input-line');
    const candBar = document.getElementById('candidate-bar');

    switchMode('hira', document.querySelector('.t-hira'));
    inputEl.focus();

    document.addEventListener('selectionchange', () => {
        if(document.activeElement === inputEl) updateLineNum();
    });

    function switchMode(mode, tabEl) {
        currentMode = mode;
        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        if(tabEl) tabEl.classList.add('active');
        const lp = document.getElementById('left-panel');
        const rp = document.getElementById('right-panel');
        lp.className = ""; rp.className = "";
        
        if (mode !== 'hira' && mode !== 'kata') confirmComposition();

        if (mode === 'hira' || mode === 'kata') {
            lp.classList.add("jp-layout"); rp.classList.add("jp-layout"); currentSelection = 'a'; renderLeftJP(); renderRightJP();
        } else if (mode === 'num') {
            currentSelection = 0; isNumFullWidth = false; renderLeftCategories(); renderRightCategory();
        } else if (mode === 'emoji') {
            currentSelection = 0; renderLeftEmojiNav(); renderRightEmoji();
        } else if (mode === 'history') {
            currentSelection = 0; renderLeftHistoryNav(); renderRightHistory();
        } else {
            currentSelection = 0; renderLeftPages(mode); renderRightPage(mode);
        }
    }

    function createKey(cls, text, onClick) {
        const div = document.createElement('div');
        div.className = cls + " no-focus-steal"; div.innerText = text;
        div.onmousedown = (e) => e.preventDefault(); div.onclick = onClick; return div;
    }

    function renderLeftJP() {
        const el = document.getElementById('left-panel'); el.innerHTML = "";
        jpRows.forEach(row => {
            const btn = createKey(`key key-left ${row.c}`, row.l, () => { currentSelection = row.id; renderLeftJP(); renderRightJP(); });
            if(row.id === currentSelection) btn.classList.add('active'); el.appendChild(btn);
        });
        const symBtn = createKey("key key-left row-sym", "記", () => { currentSelection = 'sym'; renderLeftJP(); renderRightJP(); });
        if(currentSelection === 'sym') symBtn.classList.add('active'); el.appendChild(symBtn);
        el.appendChild(createKey("key key-left key-del", "削除", deleteChar));
    }

    function renderRightJP() {
        const el = document.getElementById('right-panel'); el.innerHTML = "";
        if(currentSelection === 'sym') el.className = 'sym-layout'; else el.className = 'jp-layout';
        const map = (currentMode === 'kata') ? jpMap['kata'] : jpMap['hira'];
        const chars = map[currentSelection] || [];
        const activeL = document.querySelector('.key-left.active');
        const bg = activeL ? window.getComputedStyle(activeL).backgroundColor : '#333';
        const fg = activeL ? window.getComputedStyle(activeL).color : '#fff';
        chars.forEach(char => {
            let label = char; if(char === ' ') label = '空白'; if(char === '\n') label = '改行';
            const btn = createKey("key key-right key-jp-char", label, () => {
                if (currentSelection === 'sym') insertDirect(char); else insertComposing(char);
            });
            if(char || char === ' ' || char === '\n') {
                btn.style.backgroundColor = bg; btn.style.color = fg; btn.style.filter = "brightness(0.9)";
            } else {
                btn.style.background = "transparent"; btn.style.boxShadow = "none"; btn.style.border = "none"; btn.onclick = null; btn.classList.remove('key');
            }
            el.appendChild(btn);
        });
    }

    function renderLeftPages(mode) {
        const el = document.getElementById('left-panel'); el.innerHTML = "";
        rawPages[mode].forEach((_, idx) => {
            const btn = createKey("key key-cat", `p${idx+1}`, () => { currentSelection = idx; renderLeftPages(mode); renderRightPage(mode); });
            if(idx === currentSelection) btn.classList.add('active'); el.appendChild(btn);
        });
    }
    function renderRightPage(mode) {
        const el = document.getElementById('right-panel'); el.innerHTML = "";
        const pages = rawPages[mode]; const items = pages[currentSelection] || [];
        let alphaCounter = 0; for(let i=0; i<currentSelection; i++) alphaCounter += pages[i].length;
        items.forEach(char => {
            const btn = createKey("key key-char", char, () => insertDirect(char));
            if ((mode === 'lower' || mode === 'upper') && currentSelection === 3) {
                btn.style.backgroundColor = "var(--col-silver)"; 
                btn.style.color = "#000";
            } else {
                const cIdx = Math.floor(alphaCounter / 3) % rainbowColors.length;
                const color = rainbowColors[cIdx];
                btn.style.backgroundColor = color;
                if(['#ffd900', '#99cc00', '#f39800', '#40e0d0'].includes(color)) btn.style.color = "#000";
                alphaCounter++;
            }
            el.appendChild(btn);
        });
        if (currentSelection === pages.length - 1) {
             const spc = createKey("key key-char", "空白", () => insertDirect(" "));
             spc.style.backgroundColor = "#777"; spc.style.fontSize="16px";
             el.appendChild(spc);
             const del = createKey("key key-char", "削除", deleteChar);
             del.style.backgroundColor = "#d62828"; del.style.fontSize="16px";
             el.appendChild(del);
        }
    }

    function renderLeftCategories() {
        const el = document.getElementById('left-panel'); el.innerHTML = "";
        numCategories.forEach((cat, idx) => {
            const btn = createKey("key key-cat", cat.l, () => { currentSelection = idx; renderLeftCategories(); renderRightCategory(); });
            if(idx === currentSelection) btn.classList.add('active'); el.appendChild(btn);
        });
    }
    function renderRightCategory() {
        const el = document.getElementById('right-panel'); el.innerHTML = "";
        const cat = numCategories[currentSelection];
        cat.src.forEach(char => {
            let val = char; let display = char;
            if (isNumFullWidth) { val = toFullWidth(char); display = val; }
            const btn = createKey("key key-char", display, () => insertDirect(val));
            btn.style.backgroundColor = "#d1f5fd"; btn.style.color = "#000"; btn.style.textShadow = "none";
            el.appendChild(btn);
        });
        
        if (cat.id === 'other') {
             const fullHalf = createKey("key key-char", isNumFullWidth?"全":"半", () => {
                 isNumFullWidth = !isNumFullWidth; renderRightCategory();
             });
             fullHalf.style.backgroundColor = "#40e0d0"; fullHalf.style.color="#000"; fullHalf.style.fontSize="16px";
             el.appendChild(fullHalf);

             const spc = createKey("key key-char", "空白", () => insertDirect(isNumFullWidth?'\u3000':' '));
             spc.style.backgroundColor = "#777"; spc.style.color="#fff"; spc.style.fontSize="16px";
             el.appendChild(spc);
             const del = createKey("key key-char", "削除", deleteChar);
             del.style.backgroundColor = "#d62828"; del.style.color="#fff"; del.style.fontSize="16px";
             el.appendChild(del);
        }
    }

    function renderLeftEmojiNav() {
        const el = document.getElementById('left-panel'); el.innerHTML = "";
        el.appendChild(createKey("key key-pager", "▲", () => { if(currentSelection > 0) { currentSelection--; renderRightEmoji(); } }));
        el.appendChild(createKey("key key-pager", "▼", () => { const maxPage = Math.ceil(emojiData.length / 12) - 1; if(currentSelection < maxPage) { currentSelection++; renderRightEmoji(); } }));
    }
    function renderRightEmoji() {
        const el = document.getElementById('right-panel'); el.innerHTML = "";
        const items = emojiData.slice(currentSelection * 12, currentSelection * 12 + 12);
        items.forEach(char => {
            const btn = createKey("key key-char font-emoji", char, () => insertDirect(char));
            btn.style.fontSize = "24px"; btn.style.backgroundColor = "#ffffff"; btn.style.color = "#000"; btn.style.textShadow = "none";
            el.appendChild(btn);
        });
    }

    // --- 履歴モード関連 ---
    function addToHistory(text) {
        if(!text) return;
        text = text.trim();
        if(!text) return;
        historyData = historyData.filter(t => t !== text);
        historyData.unshift(text);
        if(historyData.length > 100) historyData.pop(); 
        if(currentMode === 'history') { renderLeftHistoryNav(); renderRightHistory(); }
    }
    
    function renderLeftHistoryNav() {
        const el = document.getElementById('left-panel'); el.innerHTML = "";
        el.appendChild(createKey("key key-pager", "▲", () => { if(currentSelection > 0) { currentSelection--; renderRightHistory(); } }));
        el.appendChild(createKey("key key-pager", "▼", () => { const maxPage = Math.ceil(historyData.length / 4) - 1; if(currentSelection < maxPage) { currentSelection++; renderRightHistory(); } }));
    }
    
    function renderRightHistory() {
        const el = document.getElementById('right-panel'); el.innerHTML = "";
        el.className = "list-layout"; 
        
        const start = currentSelection * 4;
        const items = historyData.slice(start, start + 4);
        
        items.forEach(text => {
            const btn = createKey("key key-hist", text, () => insertDirect(text));
            btn.style.fontSize = "16px"; 
            btn.style.whiteSpace = "normal"; 
            btn.style.wordBreak = "break-all";
            btn.style.lineHeight = "1.2";
            btn.style.justifyContent = "flex-start";
            btn.style.padding = "8px";
            btn.style.textAlign = "left";
            el.appendChild(btn);
        });
    }

    // Logic
    function insertComposing(char) { composingText += char; updateComposingDisplay(); updateCandidates(); }
    function updateComposingDisplay() {
        let span = inputEl.querySelector('.composing-span');
        if (!span) { span = document.createElement('span'); span.className = 'composing-span'; insertNodeAtCursor(span); }
        span.innerText = composingText; placeCaretAfter(span); updateLineNum();
    }
    function confirmComposition(textToCommit) {
        let commitVal = textToCommit;
        if (commitVal === undefined) commitVal = composingText;
        
        if (commitVal) {
            if(userDictionary[commitVal]) userDictionary[commitVal]++; else userDictionary[commitVal] = 1;
            addToHistory(commitVal);
        }
        
        if (!composingText && !textToCommit) return;
        
        let span = inputEl.querySelector('.composing-span');
        if (span) { 
            const textNode = document.createTextNode(commitVal); 
            span.parentNode.replaceChild(textNode, span); 
            placeCaretAfter(textNode); 
        } else { 
            insertDirect(commitVal); 
        }
        
        composingText = ""; candBar.innerHTML = ''; updateLineNum();
    }
    function insertDirect(text) { 
        if (composingText) confirmComposition(); 
        document.execCommand('insertText', false, text); 
        if(text.trim().length > 0) addToHistory(text);
        updateLineNum(); 
    }
    function deleteChar() {
        if (composingText) { composingText = composingText.slice(0, -1); if (!composingText) { let span = inputEl.querySelector('.composing-span'); if(span) span.remove(); candBar.innerHTML = ''; } else { updateComposingDisplay(); updateCandidates(); } } else { document.execCommand('delete'); } updateLineNum();
    }
    function insertNodeAtCursor(node) {
        inputEl.focus(); const sel = window.getSelection();
        if (sel.rangeCount > 0) { const range = sel.getRangeAt(0); range.deleteContents(); range.insertNode(node); } else { inputEl.appendChild(node); }
    }
    function placeCaretAfter(node) { const range = document.createRange(); range.setStartAfter(node); range.collapse(true); const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); }
    function toFullWidth(str) { return str.replace(/[!-~]/g, s => String.fromCharCode(s.charCodeAt(0) + 0xFEE0)).replace(/ /g, "\u3000"); }
    
    function updateLineNum() { 
        const sel = window.getSelection();
        if (sel.rangeCount === 0) return;
        let node = sel.anchorNode;
        let isInside = false;
        while(node) { if(node === inputEl) { isInside = true; break; } node = node.parentNode; }
        if(!isInside) return;
        const range = sel.getRangeAt(0);
        const preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(inputEl);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        const text = preCaretRange.toString();
        const currentLine = text.split('\n').length;
        document.getElementById('ln-num-text').innerText = currentLine; 
    }
    
    function handleInput() { updateLineNum(); }
    function copyAll() { navigator.clipboard.writeText(inputEl.innerText).then(()=>alert("コピーしました")); }
    async function pasteFromClipboard() { try { const text = await navigator.clipboard.readText(); insertDirect(text); } catch(e) {} }
    
    // エディタ全画面
    function toggleEditorFull() { 
        document.getElementById('top-area').classList.toggle('fullscreen-editor'); 
        document.getElementById('top-area').classList.remove('fullscreen-cand');
    }
    
    // 候補全画面
    function toggleCandFull() {
        document.getElementById('top-area').classList.toggle('fullscreen-cand');
        document.getElementById('top-area').classList.remove('fullscreen-editor');
    }

    function moveLine(d) { inputEl.scrollTop += d * 30; }

    function updateCandidates() {
        candBar.innerHTML = ""; if (!composingText) return;
        let candidates = [];
        basicDictionary.filter(e => e.k.startsWith(composingText)).forEach(h => candidates = candidates.concat(h.v));
        candidates.push(composingText);
        if (currentMode === 'hira') candidates.push(composingText.replace(/[\u3041-\u3096]/g, c => String.fromCharCode(c.charCodeAt(0) + 0x60)));
        candidates = [...new Set(candidates)];
        candidates.sort((a, b) => (userDictionary[b]||0) - (userDictionary[a]||0));
        candidates.forEach(c => {
            const chip = document.createElement('div'); chip.className = 'cand-chip no-focus-steal'; chip.innerText = c;
            chip.onmousedown = (e) => e.preventDefault(); chip.onclick = () => confirmComposition(c); candBar.appendChild(chip);
        });
    }

    function searchWeb() { const t = inputEl.innerText; if(t) window.open(`https://www.google.com/search?q=${encodeURIComponent(t)}`, '_blank'); }
    function askAI() { const t = inputEl.innerText; if(t) window.open(`https://chatgpt.com/?q=${encodeURIComponent(t)}`, '_blank'); }
</script>
</body>
</html>

・英語版はこちら。↓

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Two Tap Input 1.4.2 (EN)</title>
<style>
    :root {
        --bg-color: #121212;
        --text-color: #fff;
        
        /* Row Colors (Rainbow based) */
        --c-red: #e60012; --c-org: #f39800; --c-ylw: #ffd900; --c-grn: #009944;
        --c-cyn: #00a0e9; --c-blu: #004098; --c-prp: #800080; --c-gry: #555555;
        
        /* Tab Colors */
        --tab-lower: #ff69b4;
        --tab-upper: #c71585; 
        --tab-num: #40e0d0;
        --tab-history: #8b4513;
        --tab-emoji: #ffd900;

        /* Button Colors */
        --col-ent: #ffd900;
        --col-ctl: #40e0d0;
        
        --col-ai: #ff1493;
        --col-sch: #00e676;
        --col-cpy: #00bfff;
        --col-pst: #ff8c00;
        --col-silver: #c0c0c0;

        --cursor-color: #00ffff;
        --bg-inactive-btn: #333333;
        --bg-candidate: #444444;
        --bg-chip: #ffffff;
    }

    @keyframes border-blink {
        0%   { border-color: var(--cursor-color); box-shadow: 0 0 5px var(--cursor-color); }
        50%  { border-color: transparent; box-shadow: none; }
        100% { border-color: var(--cursor-color); box-shadow: 0 0 5px var(--cursor-color); }
    }

    body {
        margin: 0; padding: 0;
        background-color: var(--bg-color);
        color: var(--text-color);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        height: 100vh; height: 100dvh; width: 100vw;
        display: flex; flex-direction: column;
        overflow: hidden; user-select: none; touch-action: none; 
    }

    /* --- Top Area --- */
    #top-area {
        padding-top: max(env(safe-area-inset-top), 10px);
        padding-bottom: 2px; padding-left: 5px; padding-right: 5px;
        flex-shrink: 0; z-index: 100; box-sizing: border-box;
        background: #000; border-bottom: 2px solid #333;
        display: flex; flex-direction: column; gap: 3px;
        transition: all 0.3s ease;
    }

    /* Fullscreen Editor Mode */
    #top-area.fullscreen-editor {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        height: 100dvh; width: 100vw;
        padding-bottom: max(env(safe-area-inset-bottom), 20px);
        background: #000; z-index: 5000;
    }
    #top-area.fullscreen-editor #display-wrapper { height: 100%; flex-direction: column; }
    #top-area.fullscreen-editor #line-indicator { width: 100%; flex-direction: row; height: 30px; gap: 10px; padding: 0 10px; }
    #top-area.fullscreen-editor #input-line { flex: 1; height: auto; font-size: 20px; }
    #top-area.fullscreen-editor .side-controls, 
    #top-area.fullscreen-editor #sub-bar { display: none; }

    /* Fullscreen Candidate Mode */
    #top-area.fullscreen-cand {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        height: 100dvh; width: 100vw;
        padding-bottom: max(env(safe-area-inset-bottom), 20px);
        background: #000; z-index: 5000;
        display: flex; flex-direction: column;
    }
    #top-area.fullscreen-cand #display-wrapper { display: none; }
    #top-area.fullscreen-cand #sub-bar { height: 100%; flex-direction: column; }
    #top-area.fullscreen-cand #candidate-bar { flex: 1; align-content: flex-start; }
    #top-area.fullscreen-cand .extended-tools { 
        height: 60px; flex-shrink: 0; flex-direction: row; width: 100%; 
        justify-content: flex-end; padding: 5px; box-sizing: border-box;
    }
    #top-area.fullscreen-cand .tool-col { width: 60px; height: 100%; }

    #display-wrapper {
        display: flex; align-items: stretch;
        height: 90px; gap: 4px;
        transition: height 0.3s;
    }
    
    #exit-full-editor-btn {
        display: none;
        position: absolute; bottom: 20px; right: 20px;
        width: 50px; height: 50px; border-radius: 25px;
        background: rgba(255, 217, 0, 0.8); color: #000;
        font-size: 24px; border: 2px solid #fff;
        align-items: center; justify-content: center;
        z-index: 5001;
    }
    #top-area.fullscreen-editor #exit-full-editor-btn { display: flex; }

    /* Line Indicator */
    #line-indicator {
        width: 40px; 
        display: flex; flex-direction: column; 
        align-items: center; justify-content: flex-start;
        padding-top: 6px;
        background: #111; border-radius: 4px; flex-shrink: 0;
        line-height: 1.0;
    }
    .ln-num { font-size: 20px; font-weight: bold; color: #fff; }
    .ln-label { font-size: 10px; color: #fff; margin-top: 2px; }

    /* Input Line */
    #input-line {
        font-size: 18px; line-height: 1.5;
        white-space: pre-wrap; overflow-y: auto;
        flex: 1;
        border: 2px solid #555; background: #ffffff; color: #000000;
        padding: 6px; border-radius: 6px;
        word-break: break-word;
        outline: none; caret-color: #000;
    }
    [contenteditable] { -webkit-user-select: text; user-select: text; }
    /* Composing Style: Blue underline */
    .composing-span { background: #d0ebff; border-bottom: 3px solid #00b4d8; }

    /* Side Controls */
    .side-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 2px; width: 70px; flex-shrink: 0;
    }
    .ctrl-btn {
        border: 2px solid transparent; border-radius: 4px;
        color: #000; font-size: 16px; font-weight: bold;
        cursor: pointer; display: flex; align-items: center; justify-content: center;
        background: var(--col-ctl); box-sizing: border-box;
    }
    .btn-ent { background: var(--col-ent); font-size: 20px; color: #000; } 
    .btn-full { background: var(--col-ctl); color: #000; font-size: 16px; border: 1px solid #333; }

    /* Hover & Active Effects */
    .ctrl-btn:hover, .ctrl-btn:active,
    .sub-btn:hover, .sub-btn:active,
    .key:hover, .key:active,
    .cand-chip:hover, .cand-chip:active {
        border: 2px solid var(--cursor-color);
        animation: border-blink 0.8s infinite;
        z-index: 10; position: relative;
    }

    /* Sub Bar (Candidates & Tools) */
    #sub-bar {
        height: 100px; 
        display: flex; gap: 4px; flex-shrink: 0; align-items: stretch;
    }
    
    #candidate-bar {
        flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; overflow-y: auto;
        background: var(--bg-candidate); padding: 4px; border-radius: 4px; gap: 4px;
    }
    .cand-chip {
        background: #ffffff; color: #000000;
        padding: 6px 14px;
        border-radius: 6px; 
        font-size: 18px; font-weight: bold;
        border: 2px solid #ccc;
        height: auto; min-height: 36px;
        box-sizing: border-box; display: flex; align-items: center;
        cursor: pointer;
    }
    
    .extended-tools {
        display: flex; gap: 3px; flex-shrink: 0;
    }
    
    .tool-col {
        display: flex; flex-direction: column; gap: 2px;
        width: 40px; flex-shrink: 0;
    }
    .tool-col.col-full { width: 40px; }

    .sub-btn {
        border: 2px solid transparent; border-radius: 4px;
        font-size: 11px; font-weight: bold;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; box-sizing: border-box; width: 100%;
    }
    .tool-col .sub-btn { flex: 1; }

    .btn-cpy { background: var(--col-cpy); color: #fff; }
    .btn-pst { background: var(--col-pst); color: #fff; }
    .btn-cand-full { background: var(--col-ctl); color: #000; font-size: 16px; border: 1px solid #333; }
    .btn-sch { background: var(--col-sch); color: #fff; font-size: 10px; }
    .btn-ai  { background: var(--col-ai);  color: #fff; font-size: 12px; }

    /* --- Main Stage --- */
    #main-stage {
        flex: 1; position: relative; overflow: hidden;
        background: #111; padding: 2px;
    }

    #twothumb-board {
        display: grid;
        grid-template-columns: 1fr 2.8fr; 
        gap: 6px; 
        height: 100%; width: 100%; box-sizing: border-box;
    }
    
    #left-panel { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 3px; }
    #right-panel { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 3px; }
    
    #right-panel.list-layout { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); }

    .key {
        display: flex; align-items: center; justify-content: center;
        font-weight: bold; border-radius: 5px; 
        cursor: pointer; color: #fff;
        box-shadow: 0 2px 0 rgba(0,0,0,0.3);
        border: 2px solid transparent; box-sizing: border-box;
        text-align: center; line-height: 1.1; overflow: hidden;
    }
    .key-left.active {
        border-color: var(--cursor-color);
        animation: border-blink 1s infinite;
        filter: brightness(1.2);
        z-index: 5;
    }
    .font-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif; }

    /* 文字サイズ変更箇所: 14px -> 26px */
    .key-cat { background: var(--bg-inactive-btn); border: 1px solid #777; font-size: 26px; color: #fff; }
    .key-cat.active { background: #eee; color: #000; border: 2px solid #fff; }
    
    /* 文字サイズ変更箇所: 20px -> 32px */
    .key-pager { background: var(--col-silver); font-size: 32px; color: #000; border: 1px solid #999; }

    .key-char { background: #333; font-size: 28px; }
    
    .key-hist { background: #333; font-size: 16px; color: #fff; text-align: left; padding: 8px; justify-content: flex-start; white-space: normal; word-break: break-all; display: block; overflow: hidden; }

    /* --- Tab Bar --- */
    #tab-bar {
        height: auto;
        min-height: 50px;
        background: #111; border-top: 1px solid #333;
        display: flex; flex-shrink: 0; z-index: 10;
        padding-bottom: max(env(safe-area-inset-bottom) + 70px, 70px);
    }
    .tab {
        flex: 1; display: flex; align-items: center; justify-content: flex-start;
        font-size: 12px; font-weight: bold; color: #888;
        border-right: 1px solid #222; flex-direction: column;
        cursor: pointer; background: #222; transition: all 0.2s;
        line-height: 1.1;
        padding-top: 8px;
    }
    .tab-lbl-main { font-size: 14px; margin-bottom: 2px;}
    .tab-lbl-sub { font-size: 9px; opacity: 0.8; }
    
    .t-lower.active { background: var(--tab-lower); color: #fff; }
    .t-upper.active { background: var(--tab-upper); color: #fff; }
    .t-num.active { background: var(--tab-num); color: #000; }
    .t-hist.active { background: var(--tab-history); color: #fff; }
    .t-emoji.active { background: var(--tab-emoji); color: #000; }
</style>
</head>
<body>

<div id="top-area">
    <div id="display-wrapper">
        <div id="line-indicator">
            <div class="ln-num" id="ln-num-text">1</div>
            <div class="ln-label">Line</div>
        </div>
        <div id="input-line" contenteditable="true" inputmode="none" spellcheck="false" 
             oninput="handleInput()" onclick="updateLineNum()" onkeyup="updateLineNum()"></div>
        
        <div class="side-controls">
            <button class="ctrl-btn btn-ent no-focus-steal" onmousedown="event.preventDefault()" onclick="insertDirect('\n')">↵</button>
            <button class="ctrl-btn no-focus-steal" onmousedown="event.preventDefault()" onclick="moveLine(-1)">▲</button>
            <button class="ctrl-btn btn-full no-focus-steal" onmousedown="event.preventDefault()" onclick="toggleEditorFull()">□</button>
            <button class="ctrl-btn no-focus-steal" onmousedown="event.preventDefault()" onclick="moveLine(1)">▼</button>
        </div>
    </div>
    
    <div id="sub-bar">
        <div id="candidate-bar"></div>
        <div class="extended-tools">
            <div class="tool-col col-full">
                <button class="sub-btn btn-cand-full no-focus-steal" onmousedown="event.preventDefault()" onclick="toggleCandFull()">□</button>
            </div>
            <div class="tool-col">
                <button class="sub-btn btn-cpy no-focus-steal" onmousedown="event.preventDefault()" onclick="copyAll()">Copy</button>
                <button class="sub-btn btn-pst no-focus-steal" onmousedown="event.preventDefault()" onclick="pasteFromClipboard()">Paste</button>
            </div>
            <div class="tool-col">
                <button class="sub-btn btn-sch no-focus-steal" onmousedown="event.preventDefault()" onclick="searchWeb()">Web</button>
                <button class="sub-btn btn-ai no-focus-steal" onmousedown="event.preventDefault()" onclick="askAI()">AI</button>
            </div>
        </div>
    </div>
    
    <div id="exit-full-editor-btn" onclick="toggleEditorFull()">×</div>
</div>

<div id="main-stage">
    <div id="twothumb-board">
        <div id="left-panel"></div>
        <div id="right-panel"></div>
    </div>
</div>

<div id="tab-bar">
    <div class="tab t-lower active" onclick="switchMode('lower', this)"><span class="tab-lbl-main">abc</span><span class="tab-lbl-sub">Lower</span></div>
    <div class="tab t-upper" onclick="switchMode('upper', this)"><span class="tab-lbl-main">ABC</span><span class="tab-lbl-sub">Upper</span></div>
    <div class="tab t-num" onclick="switchMode('num', this)"><span class="tab-lbl-main">123</span><span class="tab-lbl-sub">Num/Sym</span></div>
    <div class="tab t-hist" onclick="switchMode('history', this)"><span class="tab-lbl-main">🕒</span><span class="tab-lbl-sub">History</span></div>
    <div class="tab t-emoji" onclick="switchMode('emoji', this)"><span class="tab-lbl-main">😀</span><span class="tab-lbl-sub">Emoji</span></div>
</div>

<script>
    const rainbowColors = ['#e60012','#f39800','#ffd900','#99cc00','#009944','#00a0e9','#004098','#4b0082','#800080','#e60033'];
    
    // Simple English Dictionary for demo
    const commonEnglishWords = [
        "the","be","to","of","and","a","in","that","have","I","it","for","not","on","with","he","as","you","do","at",
        "this","but","his","by","from","they","we","say","her","she","or","an","will","my","one","all","would","there","their","what",
        "so","up","out","if","about","who","get","which","go","me","when","make","can","like","time","no","just","him","know","take",
        "people","into","year","your","good","some","could","them","see","other","than","then","now","look","only","come","its","over","think","also",
        "back","after","use","two","how","our","work","first","well","way","even","new","want","because","any","these","give","day","most","us",
        "hello","hi","thanks","please","sorry","yes","why","where","right","left","help","love","great","ok","sure"
    ].sort();

    const numCategories = [{id:'digits',l:'Digit',src:"1234567890".split("")},{id:'math',l:'Math',src:"+-*/=<>".split("")},{id:'point',l:'Point',src:".,:;".split("")},{id:'bra',l:'Brckt',src:"()[]{}''\"\"".split("")},{id:'other',l:'Other',src:"%$#&@^|~`".split("")}];
    const rawPages = {
        'lower': [ "abcdefghi".split(""), "jklmnopqr".split(""), "stuvwxyz".split(""), ".,!?@_".split("") ],
        'upper': [ "ABCDEFGHI".split(""), "JKLMNOPQR".split(""), "STUVWXYZ".split(""), ".,!?@_".split("") ]
    };
    const emojiData = [..."😀😁😂🤣😃😄😅😆😉😊😋😎😍😘🥰😗😙😚🙂🤗🤩🤔🤨😐😑😶🙄😏😣😥😮🤐😯😪😫😴😌😛😜😝🤤😒😓😔😕🙃🤑😲☹️🙁😖😞😟😤😢😭😦😧😨😩🤯😬😰😱🥵🥶😳🤪😵😡😠🤬😷🤒"];
    
    let historyData = [];
    let currentMode = 'lower';
    let currentSelection = 0;
    let composingText = "";
    const inputEl = document.getElementById('input-line');
    const candBar = document.getElementById('candidate-bar');

    // Init
    switchMode('lower', document.querySelector('.t-lower'));
    inputEl.focus();

    document.addEventListener('selectionchange', () => {
        if(document.activeElement === inputEl) updateLineNum();
    });

    function switchMode(mode, tabEl) {
        currentMode = mode;
        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        if(tabEl) tabEl.classList.add('active');
        
        if (composingText) confirmComposition();

        const lp = document.getElementById('left-panel');
        const rp = document.getElementById('right-panel');
        lp.className = ""; rp.className = "";
        
        if (mode === 'num') {
            currentSelection = 0; renderLeftCategories(); renderRightCategory();
        } else if (mode === 'emoji') {
            currentSelection = 0; renderLeftEmojiNav(); renderRightEmoji();
        } else if (mode === 'history') {
            currentSelection = 0; renderLeftHistoryNav(); renderRightHistory();
        } else {
            // Lower/Upper
            currentSelection = 0; renderLeftPages(mode); renderRightPage(mode);
        }
    }

    function createKey(cls, text, onClick) {
        const div = document.createElement('div');
        div.className = cls + " no-focus-steal"; div.innerText = text;
        div.onmousedown = (e) => e.preventDefault(); div.onclick = onClick; return div;
    }

    // --- Alphabet Renderers ---
    function renderLeftPages(mode) {
        const el = document.getElementById('left-panel'); el.innerHTML = "";
        rawPages[mode].forEach((_, idx) => {
            // Label based on range start-end
            const group = rawPages[mode][idx];
            const label = group.length > 3 ? group[0]+"-"+group[group.length-1] : "Sym";
            
            const btn = createKey("key key-cat", label, () => { currentSelection = idx; renderLeftPages(mode); renderRightPage(mode); });
            if(idx === currentSelection) btn.classList.add('active'); el.appendChild(btn);
        });
    }
    function renderRightPage(mode) {
        const el = document.getElementById('right-panel'); el.innerHTML = "";
        const pages = rawPages[mode]; const items = pages[currentSelection] || [];
        let alphaCounter = 0; for(let i=0; i<currentSelection; i++) alphaCounter += pages[i].length;
        
        items.forEach(char => {
            const btn = createKey("key key-char", char, () => insertComposing(char)); // English uses predictive input
            
            // Color logic
            if ((mode === 'lower' || mode === 'upper') && currentSelection === 3) {
                btn.style.backgroundColor = "var(--col-silver)"; btn.style.color = "#000";
            } else {
                const cIdx = Math.floor(alphaCounter / 3) % rainbowColors.length;
                const color = rainbowColors[cIdx];
                btn.style.backgroundColor = color;
                if(['#ffd900', '#99cc00', '#f39800', '#40e0d0'].includes(color)) btn.style.color = "#000";
                alphaCounter++;
            }
            el.appendChild(btn);
        });
        
        if (currentSelection === pages.length - 1) {
             const spc = createKey("key key-char", "Space", () => insertDirect(" "));
             spc.style.backgroundColor = "#777"; spc.style.fontSize="16px";
             el.appendChild(spc);
             const del = createKey("key key-char", "Del", deleteChar);
             del.style.backgroundColor = "#d62828"; del.style.fontSize="16px";
             el.appendChild(del);
        }
    }

    // --- Number/Symbol Renderers ---
    function renderLeftCategories() {
        const el = document.getElementById('left-panel'); el.innerHTML = "";
        numCategories.forEach((cat, idx) => {
            const btn = createKey("key key-cat", cat.l, () => { currentSelection = idx; renderLeftCategories(); renderRightCategory(); });
            if(idx === currentSelection) btn.classList.add('active'); el.appendChild(btn);
        });
    }
    function renderRightCategory() {
        const el = document.getElementById('right-panel'); el.innerHTML = "";
        const cat = numCategories[currentSelection];
        cat.src.forEach(char => {
            const btn = createKey("key key-char", char, () => insertDirect(char));
            btn.style.backgroundColor = "#d1f5fd"; btn.style.color = "#000"; btn.style.textShadow = "none";
            el.appendChild(btn);
        });
        
        if (cat.id === 'other') {
             const spc = createKey("key key-char", "Space", () => insertDirect(" "));
             spc.style.backgroundColor = "#777"; spc.style.color="#fff"; spc.style.fontSize="16px";
             el.appendChild(spc);
             const del = createKey("key key-char", "Del", deleteChar);
             del.style.backgroundColor = "#d62828"; del.style.color="#fff"; del.style.fontSize="16px";
             el.appendChild(del);
        }
    }

    // --- Emoji Renderers ---
    function renderLeftEmojiNav() {
        const el = document.getElementById('left-panel'); el.innerHTML = "";
        el.appendChild(createKey("key key-pager", "▲", () => { if(currentSelection > 0) { currentSelection--; renderRightEmoji(); } }));
        el.appendChild(createKey("key key-pager", "▼", () => { const maxPage = Math.ceil(emojiData.length / 12) - 1; if(currentSelection < maxPage) { currentSelection++; renderRightEmoji(); } }));
    }
    function renderRightEmoji() {
        const el = document.getElementById('right-panel'); el.innerHTML = "";
        const items = emojiData.slice(currentSelection * 12, currentSelection * 12 + 12);
        items.forEach(char => {
            const btn = createKey("key key-char font-emoji", char, () => insertDirect(char));
            btn.style.fontSize = "24px"; btn.style.backgroundColor = "#ffffff"; btn.style.color = "#000"; btn.style.textShadow = "none";
            el.appendChild(btn);
        });
    }

    // --- History Renderers ---
    function addToHistory(text) {
        if(!text) return;
        text = text.trim();
        if(!text) return;
        historyData = historyData.filter(t => t !== text);
        historyData.unshift(text);
        if(historyData.length > 100) historyData.pop(); 
        if(currentMode === 'history') { renderLeftHistoryNav(); renderRightHistory(); }
    }
    
    function renderLeftHistoryNav() {
        const el = document.getElementById('left-panel'); el.innerHTML = "";
        el.appendChild(createKey("key key-pager", "▲", () => { if(currentSelection > 0) { currentSelection--; renderRightHistory(); } }));
        el.appendChild(createKey("key key-pager", "▼", () => { const maxPage = Math.ceil(historyData.length / 4) - 1; if(currentSelection < maxPage) { currentSelection++; renderRightHistory(); } }));
    }
    
    function renderRightHistory() {
        const el = document.getElementById('right-panel'); el.innerHTML = "";
        el.className = "list-layout"; 
        const start = currentSelection * 4;
        const items = historyData.slice(start, start + 4);
        items.forEach(text => {
            // Tapping history inserts it directly with a space
            const btn = createKey("key key-hist", text, () => {
                insertDirect(text + " ");
            });
            el.appendChild(btn);
        });
    }

    // --- Logic & Prediction ---

    // 1. Add char to composition buffer
    function insertComposing(char) { 
        composingText += char; 
        updateComposingDisplay(); 
        updateCandidates(); 
    }

    // 2. Render composing text (blue underline)
    function updateComposingDisplay() {
        let span = inputEl.querySelector('.composing-span');
        if (!span) { 
            span = document.createElement('span'); 
            span.className = 'composing-span'; 
            insertNodeAtCursor(span); 
        }
        span.innerText = composingText; 
        placeCaretAfter(span); 
        updateLineNum();
    }

    // 3. Commit the composition (replace blue text with normal text + space)
    function confirmComposition(textToCommit) {
        let commitVal = textToCommit;
        
        // If no specific candidate selected, use what's typed
        if (commitVal === undefined) commitVal = composingText;
        
        if (!composingText && !textToCommit) return;
        
        let span = inputEl.querySelector('.composing-span');
        
        // If we selected a candidate, append a space automatically (English standard)
        let finalStr = commitVal;
        if (textToCommit !== undefined) {
            finalStr += " "; 
            addToHistory(commitVal); // Add the word to history
        }

        if (span) { 
            const textNode = document.createTextNode(finalStr); 
            span.parentNode.replaceChild(textNode, span); 
            placeCaretAfter(textNode); 
        } else { 
            insertDirect(finalStr); 
        }
        
        composingText = ""; 
        candBar.innerHTML = ''; 
        updateLineNum();
    }

    // 4. Update Candidate Bar based on dictionary
    function updateCandidates() {
        candBar.innerHTML = ""; 
        if (!composingText) return;
        
        const lowerInput = composingText.toLowerCase();
        
        // Filter dictionary
        let candidates = commonEnglishWords.filter(w => w.toLowerCase().startsWith(lowerInput));
        
        // Always show what user typed as first option (escape hatch)
        if (candidates[0] !== composingText) {
            candidates.unshift(composingText);
        }

        candidates.forEach(c => {
            const chip = document.createElement('div'); 
            chip.className = 'cand-chip no-focus-steal'; 
            chip.innerText = c;
            chip.onmousedown = (e) => e.preventDefault(); 
            chip.onclick = () => confirmComposition(c); 
            candBar.appendChild(chip);
        });
    }

    // Direct insertion (for symbols, numbers, spaces, enter)
    function insertDirect(text) { 
        if (composingText) confirmComposition(); 
        document.execCommand('insertText', false, text); 
        updateLineNum(); 
    }

    // Deletion
    function deleteChar() {
        if (composingText) { 
            composingText = composingText.slice(0, -1); 
            if (!composingText) { 
                let span = inputEl.querySelector('.composing-span'); 
                if(span) span.remove(); 
                candBar.innerHTML = ''; 
            } else { 
                updateComposingDisplay(); 
                updateCandidates(); 
            } 
        } else { 
            document.execCommand('delete'); 
        } 
        updateLineNum();
    }

    // Helper: Insert Node
    function insertNodeAtCursor(node) {
        inputEl.focus(); const sel = window.getSelection();
        if (sel.rangeCount > 0) { const range = sel.getRangeAt(0); range.deleteContents(); range.insertNode(node); } else { inputEl.appendChild(node); }
    }
    // Helper: Place Caret
    function placeCaretAfter(node) { const range = document.createRange(); range.setStartAfter(node); range.collapse(true); const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); }
    
    // Line Number Update
    function updateLineNum() { 
        const sel = window.getSelection();
        if (sel.rangeCount === 0) return;
        let node = sel.anchorNode;
        let isInside = false;
        while(node) { if(node === inputEl) { isInside = true; break; } node = node.parentNode; }
        if(!isInside) return;
        const range = sel.getRangeAt(0);
        const preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(inputEl);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        const text = preCaretRange.toString();
        const currentLine = text.split('\n').length;
        document.getElementById('ln-num-text').innerText = currentLine; 
    }
    
    function handleInput() { updateLineNum(); }
    function copyAll() { navigator.clipboard.writeText(inputEl.innerText).then(()=>alert("Copied!")); }
    async function pasteFromClipboard() { try { const text = await navigator.clipboard.readText(); insertDirect(text); } catch(e) {} }
    
    function toggleEditorFull() { 
        document.getElementById('top-area').classList.toggle('fullscreen-editor'); 
        document.getElementById('top-area').classList.remove('fullscreen-cand');
    }
    
    function toggleCandFull() {
        document.getElementById('top-area').classList.toggle('fullscreen-cand');
        document.getElementById('top-area').classList.remove('fullscreen-editor');
    }

    function moveLine(d) { inputEl.scrollTop += d * 30; }

    function searchWeb() { const t = inputEl.innerText; if(t) window.open(`https://www.google.com/search?q=${encodeURIComponent(t)}`, '_blank'); }
    function askAI() { const t = inputEl.innerText; if(t) window.open(`https://chatgpt.com/?q=${encodeURIComponent(t)}`, '_blank'); }
</script>
</body>
</html>

いいなと思ったら応援しよう！

コメントするには、ログインまたは会員登録をお願いします。

スマホの入力を簡単にする？「Two Tap Input」

いいなと思ったら応援しよう！

コメント

Enterで送信されるのが嫌いだからなんとかしたい！

はじめてWEBアプリを作ってみる⑰

noteマークダウン逆引きリファレンス

簡易意思伝達アプリ sboardJP

Apache Guacamoleで日本語キーボード使う

HTMLの基本をしっかり理解するための入門ガイド④

【pywebview】家計簿アプリ－JavaScriptの残りの部分の疑問点を解説。

Micro:BIT 文字列を表示させる

noteではルビがふれるらしい

Eclipse:短縮入力

「舞いカレンダー」の最初のツール「アルコールチェック」をリニューアル。動画あり‼キャラクターが酩酊しています

ClaudecodeのAskUserQuestionを学習に使い、そのまま要件定義書にする 『学習駆動開発』

Pythonでつくるデスクトップアプリ③：単位変換ツール、簡易メモ

SWELLのボタンの文字デザインを変更したい

よけゲー[コード公開]

POCO X7 proでEmacsでhowm

AP S 一番の完成

🤣ただ絵文字を並べただけ+α

Danbooru語プロンプトを時短するスプレッドシートを作りました【配布】

超初歩vol.3 ボタンの配置の仕方

やって来たTalkBack 16.2 -- やっとできた音声文字入力の開始と停止をジェスチャで実行 with Android TalkBack

20260127現在の主要キーマップ図

幾何学模様ジェネレーター

どうぶつの森語のタイピング音

半自動で英単語の先頭を大文字に変換する

VimiumのCSS設定項目

日本語IME「ひともじ」：漢字以外の文字種がほぼ入力できるようになったヨ(v0.1.4.1)

EdTechプロダクトを作る: 単語アプリのMVP設計

進捗4

ボイスオーバー設定の初期値メモ（iOS26）

「GPT-4」を上回る日本語性能のLLM「Llama-3-ELYZA-JP」を開発しました

開発経験ゼロのPMが語る、Cursor利用で変わった5つの業務

Google Keepが変わった。「メモ」と「やること」が分かれて、何が便利になったのか

STEM（理系）領域の魅力を伝える～中高生女子向け職場体験プログラム「Girls Meet STEM Career」に参画～

Amazon Aurora MySQL 3にアップグレードしました

エンジニアがアプリ開発をガチったらAppStoreランキング1位と月収250万円を達成したお話（完全解説）

Enterで送信されるのが嫌いだからなんとかしたい！

はじめてWEBアプリを作ってみる⑰

noteマークダウン逆引きリファレンス

簡易意思伝達アプリ sboardJP

Apache Guacamoleで日本語キーボード使う

HTMLの基本をしっかり理解するための入門ガイド④

【pywebview】家計簿アプリ－JavaScriptの残りの部分の疑問点を解説。

Micro:BIT 文字列を表示させる

noteではルビがふれるらしい

Eclipse:短縮入力

「舞いカレンダー」の最初のツール「アルコールチェック」をリニューアル。動画あり‼キャラクターが酩酊しています

ClaudecodeのAskUserQuestionを学習に使い、そのまま要件定義書にする 『学習駆動開発』

Pythonでつくるデスクトップアプリ③：単位変換ツール、簡易メモ

SWELLのボタンの文字デザインを変更したい

よけゲー[コード公開]

POCO X7 proでEmacsでhowm

AP S 一番の完成

🤣ただ絵文字を並べただけ+α

Danbooru語プロンプトを時短するスプレッドシートを作りました【配布】

超初歩vol.3 ボタンの配置の仕方

やって来たTalkBack 16.2 -- やっとできた音声文字入力の開始と停止をジェスチャで実行 with Android TalkBack

20260127現在の主要キーマップ図

幾何学模様ジェネレーター

どうぶつの森語のタイピング音

半自動で英単語の先頭を大文字に変換する

VimiumのCSS設定項目

日本語IME「ひともじ」：漢字以外の文字種がほぼ入力できるようになったヨ(v0.1.4.1)

EdTechプロダクトを作る: 単語アプリのMVP設計

進捗4

ボイスオーバー設定の初期値メモ（iOS26）

「GPT-4」を上回る日本語性能のLLM「Llama-3-ELYZA-JP」を開発しました

開発経験ゼロのPMが語る、Cursor利用で変わった5つの業務

Google Keepが変わった。「メモ」と「やること」が分かれて、何が便利になったのか

STEM（理系）領域の魅力を伝える～中高生女子向け職場体験プログラム「Girls Meet STEM Career」に参画～

Amazon Aurora MySQL 3にアップグレードしました

エンジニアがアプリ開発をガチったらAppStoreランキング1位と月収250万円を達成したお話（完全解説）

Micro:BIT　文字列を表示させる

ClaudecodeのAskUserQuestionを学習に使い、そのまま要件定義書にする　　　『学習駆動開発』

超初歩vol.3　ボタンの配置の仕方

STEM（理系）領域の魅力を伝える～中高生女子向け職場体験プログラム「Girls Meet STEM Career」に参画～　

Micro:BIT　文字列を表示させる

ClaudecodeのAskUserQuestionを学習に使い、そのまま要件定義書にする　　　『学習駆動開発』

超初歩vol.3　ボタンの配置の仕方

STEM（理系）領域の魅力を伝える～中高生女子向け職場体験プログラム「Girls Meet STEM Career」に参画～　