この記事は Agent Grow Advent Calendar 2024 9日目 の記事です。
はじめに
Webシステム開発で「キーボード(IME)のデフォルト状態を制御したい」という場面、Web開発をしていると一度はあるのではないでしょうか。
そんな場面での実装方法、実はこの10年でかなりの紆余曲折を経て今の形になっていました！
今回はHTML、CSSの公式情報を参照しつつ、その変遷について語ってまいります。
対象読者
- Webシステム開発の基礎知識がある
当てはまれば、なお楽しめる
- 「IME制御といえばime-mode」の時代を知っている
- 言語の歴史的経緯に興味がある
IME制御の実装方法（令和最新版）
さっそくですが、まずは現在の実装方法からご紹介です。
今回は（おそらく）IME制御でイチバンありがちな、以下の要件を実現する方法について記載します。
- 数字を入力したい
- クレカ番号や銀行口座番号等、個数の入力ではなく数字のみの文字列
- IMEのデフォルトを半角入力状態にしたい
結論からお伝えすると、inputmode属性を使う！これ一択です！
サンプルコードとイメージはこんな感じ。
<form>
<input id="card" type="text" inputmode="numeric">
<button>Submit</button>
</form>
IMEのデフォルトは半角入力になりますが、入力が数字に縛られるわけではないので、別途入力チェックは必要です。
とはいえ、HTMLの属性をつけるだけでサクッとIMEの状態が切り替えられるのは便利ですね！！！
【参考】入力欄をnumber型として定義する（非推奨）
ちなみに、<input>タグのnumber型を使う方法もありますが、クレカ番号のように数字のみの文字列を入力させる場合には適していません。
number 入力型は、増減する数値にのみ、特にスピンボタンによる増減が使い勝手として有益な場合に使用すべきです。 number 入力型は、多くの国の郵便番号やクレジットカード番号のような、数字だけで構成されているが、厳密には数値ではない値には適していません。数値以外の入力には、 <input type="tel"> や他の <input> 型で inputmode 属性をつけるなど、別の入力型を使うことを検討してみてください。
引用元：<input type="number">#number 入力欄の使用
公式でもinputmodeを使うことを推奨していますね。
<form>
<input id="card" type="number">
<button>Submit</button>
</form>
ちなみに実装してみるとこんな感じ。
クレカ番号などだと、右側の上下ボタン（スピンボタン）がすごく邪魔ですね（笑）[1]
IME制御、10年の変遷
さて、ここからが本題です。
IME制御、2015年ごろからの10年で、かなり紆余曲折があったようなので、その変遷をご紹介します。
ime-mode
いにしえのWebエンジニアの皆さまであれば、おなじみであろうime-mode。
10年以上前は、IME制御をするならコレしかないという代物でした。
元々、IEが独自で実装していたCSSの定義で、他にはFirefoxが採用、Chromeは採用せずだったようですが、今となってはMDNからも定義が消えてしまったので、確証は得られませんでした。
公式から消えてしまったので、インターネット黎明期のホームページ作成でお世話になったサイトを参照します。
inputmodeと違って、自動的にIMEをONにできるのは今でも画期的かもしれません。[2]
inputのtypeで頑張るしかない
2015年。そして波乱は始まります。
次世代のCSS3では、ime-modeが廃止との草案が発表されたのです！
"ime-mode" is a property somewhat implemented in some browsers, that is problematic and officially obsoleted by this specification.
引用元：CSS Basic User Interface Module Level 3 (CSS3 UI)#7.3.2. Obsolete: the ime-mode property
「問題のある仕様だから、公式としては廃止するよ」って書いてありますね。
当時は、HTML5が世に出始めたばかり。代替手段は、先ほど非推奨と紹介した<input>タグのnumber型を使う方法しかなく、IME制御の実装は暗黒時代に入ったと言っても過言ではありません。[3]
inputmodeその１
おそらく「number型だけじゃ困る！」と声を上げた人がいたのでしょう。
2016年、HTML5.1にinputmodeが初登場します。
引用元：HTML 5.1#4.10.19.7. Input modalities: the inputmode attribute
設定できる値の一部をキャプチャ画像でご覧いただいているのですが、今のinputmodeには存在しない値がかなりありますね。
使い勝手はイマイチだったのでしょうか、HTML5.2からは記述が消えてしまい、しれっと廃止になってしまいました。[4][5]
inputmodeその２（現在）
時は少し遡って2004年。WHATWGというコミュニティが、長年HTMLとCSSの定義を担ってきたW3Cに対抗して生まれました。[6]
このWHATWGのコミュニティが定義した「HTML Living Standard」。こちらで現在の形のinputmodeが定義されることになるのです。
In 2019, the WHATWG and W3C signed an agreement to collaborate on a single version of HTML going forward: this document.
引用元：HTML Living Standard#1.6 History
しばらくは、W3Cの「HTML5」とWHATWGの「HTML Living Stantdard」が並行して動いていたのですが、2019年、W3CとWHATWGは「HTML Living Standard」をHTMLの唯一の文書として合意。
HTML5は廃止となり、HTML Living StandardのinputmodeがIME制御の正式なスタイルとなって現在に至るようです。
ちなみにHTML Living Standardでinputmodeがいつから存在したかは、公式からは探し出すことができませんでした…（無念）
各ブラウザの実装タイミングから考えると、2018年より少し前には現在の形で完成していたのではないかなと想像しています。[7]
まとめ
HTML Living Standard の inputmode が正式になり、ようやくIME制御を安心して実装できるようになりました。
各ブラウザが対応してから時間も経ったので、これで改変は打ち止めとなって、長く使える仕様となることを切に願っています。
-
CSSでスピンボタンの削除は可能ですが、そんなことするくらいなら
inputmode使うのがよさそう ↩︎ -
マルチバイト文字を取り扱わない国だと使わないので、優先度低くても仕方ないね（遠い目） ↩︎
-
筆者はこの暗黒時代で知識が止まってたので、つい最近までIME制御に右往左往してました（苦笑） ↩︎
-
明確な公式からの廃止のコメントは10年近く前のせいか見当たらず ↩︎
-
HTML5.2公式：https://www.w3.org/TR/2017/REC-html52-20171214/ ↩︎
-
各ブラウザ実装状況：https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/inputmode#ブラウザーの互換性 ↩︎
Discussion