ウェブ上の入力フォームで日本語入力機能(IME)を制御する方法

テキスト入力欄にカーソルが入った瞬間に、日本語入力機能(IME)のモードを自動で切り替える

テキスト入力欄にカーソルが入った瞬間に、日本語入力機能(IME)のモードを自動で切り替える (※上図はIMEとしてATOKが使われている環境での表示例)

ウェブ上に掲載された入力フォーム内にカーソルが入ったときに、日本語入力機能(IME)の状態を指定する方法として、CSSにはime-modeプロパティがあります。これはInternet Explorerの独自拡張仕様としてIE5から実装されたプロパティで、本稿執筆時点ではIE、Edge、Firefoxの各ブラウザで使用可能です。

このime-modeプロパティを使えば、テキスト入力欄にカーソルが入った際に、日本語入力機能(IME)を下記の状態に変更できます。
  • ON(全角入力モード)にする
  • OFF(半角入力モード)にする
  • 無効にする (＝[半角/全角]キーを押してもONにできなくする)

■ime-modeプロパティを使う際は、意味があるかどうかを考えてから
CSS3 UIの仕様には、ime-modeを使わないよう書かれている

CSS3 UIの仕様には、ime-modeを使わないよう書かれている

日本語入力機能(IME)の状態を指定する方法にはデメリットがあり、意味がない場合もあります(後述)。また、CSS3 UIの仕様には、ブラウザはime-modeプロパティをサポートすべきではないし、ウェブ製作者も使ってはならないとも書かれています。
※CSS3 UI 6.3.2. Obsolete: the ime-mode property (和訳)

しかし、社内業務用ページなどの利用者が限定されている状況で、使用者からの要望がある場合などでは、日本語入力機能(IME)の制御機能をウェブページに加える必要があることもあるでしょう。

そこで本記事では、ime-modeプロパティの記述方法と、ime-modeプロパティを使わずに済ませる代替方法をご紹介いたします。代替方法はどれも、Chromeでも使用可能です。

【本記事の目次】


ime-modeプロパティの書き方

CSSで日本語入力機能(IME)の状態を指定できるime-modeプロパティは、下記のように記述して使います。
セレクタ {
   ime-mode: 値;
}
指定できる値と意味は下記の通りです。

  • auto: 制御しない (状態を変更しない)
  • active: ONにする (全角入力モードにする)
  • inactive: OFFにする (半角入力モードにする)
  • disabled: 無効にする (ONにできなくする)

上記の値のうち後半2つの「inactive」と「disabled」は、どちらも半角文字を入力する状態になる点で似ていますが、下記の違いがあります。
  • 「inactive」は、日本語入力機能(IME)をOFFに切り替えるだけです。ユーザが[半角/全角]キーなどを押せばONに切り替わるので、全角文字を打てるようになります。
  • 「disabled」は、日本語入力機能(IME)そのものを使用不可能にします。ユーザが[半角/全角]キーなどを押しても使えないままです。

※Firefoxでは、日本語入力の状態を「通常の状態」に戻すための「normal」という値も指定可能です。

ime-modeプロパティの記述例

例として、異なるclass名を付加したテキスト入力欄を4つ記述したHTMLを用意します。
入力欄1 <input type="text" class="apple" name="test1">
入力欄2 <input type="text" class="peach" name="test2">
入力欄3 <input type="text" class="lemon" name="test3">
入力欄4 <input type="text" class="grape" name="test4">
この4つのclassに対して、ime-modeプロパティに下記の値を指定したCSSを用意します。
.apple { ime-mode: auto; }      /* 制御しない */
.peach { ime-mode: active; }    /* ONにする */
.lemon { ime-mode: inactive; }  /* OFFにする */
.grape { ime-mode: disabled; }  /* 無効にする */
上記のHTMLとCSSソースを、IE・Edge・Firefoxのいずれかで表示すると、以下のように動作します。
(日本語入力機能に変化なし)
(日本語入力機能をONにする)
(日本語入力機能をOFFにする)
(日本語入力機能を無効にする)
入力欄2をクリックしてカーソルを入れると、日本語入力機能(IME)はONになります。
入力欄3をクリックしてカーソルを入れると、日本語入力機能(IME)はOFFになります。
入力欄4をクリックしてカーソルを入れると、日本語入力機能(IME)は無効になり、ユーザが[半角/全角]キーなどを押してもONにはできません。

日本語入力機能(IME)がOFFでも、全角文字の入力はできる点に注意

ime-modeプロパティで日本語入力機能(IME)を無効にして、半角文字しか打てない状態にしたとしても、絶対に全角文字が入力できないわけではない点に注意が必要です。例えば、以下のような方法で入力できます。

  • どこか別の場所から全角の文字列をコピーして入力欄にペーストすれば、日本語入力機能(IME)を使わなくても全角文字を入力できます。
  • ime-modeプロパティはCSSの機能ですから、ブラウザ上でCSSを一時的に無効にすれば日本語入力機能(IME)の制御も無効になり、全角文字を入力できます。
  • ウェブサイト側のCSSを上書きする「ユーザースタイルシート」を使って 
    input { ime-mode: auto !important; }
    などと指定しておけば、ウェブサイトのCSSで指定されたime-modeプロパティを無効にできるため、全角文字を入力できます。
  • そもそもime-modeプロパティを無視するChrome・Opera・Safariなどのブラウザを使えば、日本語入力機能(IME)の状態は変化しませんから、全角文字でも何でも入力可能です。

このように回避は簡単ですから、ime-modeプロパティを使って日本語入力機能(IME)を無効にしても「全角文字が入力されない」と保証されるわけでは全くありません。せいぜい、PC初心者からの誤入力が多少は減らせるかもしれないという程度のものです。

日本語入力機能(IME)の状態を制御するデメリット

日本語入力機能(IME)は、必ずしも漢字変換だけに使われるわけではない点に注意が必要です。

■頻繁に入力する文字列を単語登録している場合に不便
例えば、「＃めーる」という読みで「hoge@allabout.co.jp」という文字列を単語登録しておくテクニックがあります。そうすると、「＃めーる」と打って変換すればメールアドレスになるため、打ち間違いを防いだり入力の手間を省いたりできます。日本語入力機能(IME)を無効にすると、この単語登録を活用したテクニックが使えなくなるため、ユーザにとって迷惑になってしまいます。

※読みの先頭に記号(＃や＠など)を用いるのは、通常の文章を書く目的で打った「めーるあどれす」の文字が、「メールアドレス」ではなく「hoge@allabout.co.jpアドレス」などと変換されてしまうのを防ぐためです。

■省入力機能などの入力支援機能を使いたい場合に不便
英字の入力でも、IMEの省入力機能があると便利 (ATOKでの例)

英字の入力でも、IMEの省入力機能や推測入力機能があると便利 (図はATOKでの例)

日本語入力機能(IME)によっては、英字を入力する場合でも省入力候補や推測候補を表示したり、スペルチェック機能を提供したりする付加機能があります。日本語入力機能(IME)をOFFにしてしまうと、そのような入力支援機能も使えなくなってしまいます。

したがって、もし日本語入力機能(IME)をOFFにする場合でも、無効にする「disabled」ではなく、単にOFFにする「inactive」を指定する方が望ましいでしょう。


 

日本語入力機能(IME)の状態を制御する方が便利なケース

大量の入力欄があって、入力文字種が明らかなら、IMEの状態を自動で切り替える方が便利な場合もある

大量の入力欄があって、入力文字種が明らかなら、IMEの状態を自動で切り替える方が便利な場合もある

社内業務用などの利用者が限定されたページで、ID(英数字)と名前(漢字)のセットを大量に入力しなければならないような場合では、ウェブページ側で日本語入力機能(IME)の状態を切り替える方がユーザの手間と時間を省けます。たった1つの[半角/全角]キーの押下を省略できるだけですが、入力件数が大量にあってキーを押す回数も多いのなら、省力効果も大きくなるでしょう。
※参考：ime-modeの標準仕様からの削除について


 

他の方法が便利なケース

下記の場合は、日本語入力機能(IME)を制御するよりももっと確実な方法があります。詳しくは次のページでご紹介いたします。

■半角文字が欲しい場合は、自動変換する方が確実
PC初心者の方々は、全角文字と半角文字の区別がついていないことがあります。そのような初心者が多く利用するようなページでは、日本語入力機能(IME)を制御した方が便利だと思うかもしれません。しかし、ウェブページ側に全角文字を半角文字に自動変換する機能を加えておく方が、確実に半角文字でデータを得られます。

■誤入力を防ぎたい場合は、入力結果をチェックする方が確実
「電話番号の入力欄に住所が入力されてしまう」といった誤入力を防ぐ目的なら、日本語入力機能(IME)の状態を制御しても役に立つとは限りません。先述の通りコピー＆ペーストなどの方法を使えば、どこにでも何でも入力可能だからです。誤入力を防ぐには、日本語入力機能(IME)の制御ではなく、入力結果のチェック機能を使う方が確実でしょう。

それでは次のページで、ime-modeプロパティを使わずに済ませる代替方法をご紹介いたします。
1 2
次のページへ