【Firefox・Chrome対応】IMEを制御して検索ワードの入力ミスを減らす方法
ブラウザで何か検索する際に日本語入力(IME)がオン、もしくはオフになっていたことに気づかず、検索ワードの入力を間違えたことはありませんか？
他にもパスワード管理ソフトにパスワードを自動入力させたら、日本語入力がオンになっていて「くぁwせdrftgyふじこ」になったことは？
Windowsならタスクバー右端に日本語入力の状態を表示できますが、たいていは入力欄から離れすぎており、UIとしてはイケてない。どれぐらいイケてないかというと、通販サイトで価格と購入ボタンが画面の両端に離れているぐらいイケてない。
入力欄から視線を動かすことなく日本語入力のオン・オフを確認できる状態が、やはり理想でしょう。
ATOKなど一部のIMEでは、入力欄の下にツールバーを表示して日本語入力の状態を教えてくれるソフトもあります。しかしこれはこれでツールバーの下にある文章が読めず、邪魔になります。
そこで今回は入力欄の背景色を変更して日本語入力(IME)のオン・オフ状態を教えてくれる拡張機能(Firefoxはスクリプト)を紹介します。
【導入環境】
OS：Windows10以上
対応ブラウザ：Chromium派生ブラウザ(SRWare Ironで確認)、Firefox派生ブラウザ(Firefox，Floorp，LibreWolfで確認)
※ブラウザは最新版を使用してください
1．Chrome系列ブラウザでの導入方法
IME State Visible という拡張機能を使います。
手順1．Chromeウェブストアで、IME State Visibleをブラウザに追加する
手順2．GithubからIME State Visibleをダウンロードし、インストールする
インストールの詳しい手順はリンク先にあります。アンインストールする際は、zipファイルに同梱された『uninstall_host.bat』を実行します。
手順3．ブラウザを再起動して作業完了
IMEがオンの状態だと入力欄の背景色が緑色になりますが、後述のFirefox版とは異なりブラウザのアドレスバーの色は変わりません。
またまれにあるんですが、「利用者にデザイン変更など絶対にさせぬ！」というサイトでは有効になりません。Chromeウェブストアとか。
2．Firefox系列ブラウザでの導入方法
IME-Colors-e10s.uc.js というスクリプトを使います。
このスクリプトの導入は手順が煩雑です。またブラウザをバージョンアップしたタイミングで動かなくなることが頻繁にあります。PCの操作に不自由しない方、かつ自己責任で導入できる方のみご覧ください。
手順1．ユーザスクリプトを使えるよう、Firefoxの設定を変更する
アドレスバーに『about:config』と入力し、Enter。警告メッセージから先に進み、検索欄に『toolkit.legacyUserProfileCustomizations.stylesheets』を貼りつけ、値をtrueに変更する。
手順2．必要なファイルをダウンロードする
以下4つのファイルをGithubからダウンロードする。基本は最新版を使用するが、2025年11月現在筆者の環境ではconfig.jsとconfig-prefs.jsはver.117用でないと動かなかったため、このふたつのファイルは前述のバージョンを推奨。
config.js
config-prefs.js
userChrome.js
IME-Colors-e10s.uc.js
ファイルの最新版の探し方は、下記画像を参考にしてください。リストの左の数字から一番新しいと思われるファイル名を選択 → Download raw fileのアイコン をクリックすればダウンロードできます。
※ config.jsとconfig-prefs.jsの最新版は、フォルダ名に〝test〟がついているので開発中のバージョンなのかもしれません。フォルダ名から〝test〟が消えたら最新版を使用してみてください。
実は今回の拡張機能&スクリプトの情報はググればいくらでも出てくるんですが、このバージョン問題につまずいてなかなか導入できなかったこと。また後述のIME切替CSSが古い情報ばかり検索にひっかかるので、新たに記事を書き起こした次第です。
なお全てのスクリプト共通で、ファイルのエンコードはUTF-8、BOMなしで保存する必要があります。ダウンロードしてそのまま使う分にはおそらく問題ありませんが、ご自身で編集される場合はご注意ください。
手順3．手順2でダウンロードしたファイルを各フォルダにコピーする
インストールフォルダ(＝Firefox.exeがあるフォルダ)と、プロファイルフォルダ(＝Firefoxの設定が保存されたフォルダ)を間違えないよう注意してください。
またプロファイルフォルダの下にchromeフォルダが無い場合は、新規作成してください。
config.js > Firefoxのインストールフォルダ
config-prefs.js > Firefoxのインストールフォルダ\defaults\pref
userChrome.js > Firefoxのプロファイルフォルダ\chrome
IME-Colors-e10s.uc.js > Firefoxのプロファイルフォルダ\chrome
手順4．ブラウザを再起動して作業完了
ブラウザのアドレスバーやフォームのテキストボックスをクリックすると、IMEがオンの状態なら背景色が薄いオレンジに、オフなら水色に変化します。
背景色を変えたい場合は、IME-Colors-e10s.uc.js を編集してください。なお編集にはCSSとカラーコードの知識が必須です。
3．どちらが使いやすいか
導入が簡単なのはChromeの方です。IME State Visibleはmanifest v3にも対応しており、ブラウザをバージョンアップしても安定して使えます。
Firefox用のスクリプトは、ブラウザがバージョンアップすると頻繁に動かなくなります。そのたびに手動でスクリプトを更新しなければならず、時には更新しても動かないこともあります。
しかしブラウザのアドレスバーから検索することが多い方なら、Firefoxの方が使いやすいでしょう。アドレスバーや検索バーの背景色も変更してくれます。お好みで使い分けてください。
4．【番外編その一】アドレスバーにフォーカスを移動したタイミングで強制的にIMEの状態を切り替える【Firefox】
Firefoxならアドレスバーにフォーカスを移動したタイミングで、強制的に日本語入力の状態を切り替えることも可能です。ただしこの方法はかなり古い仕組みを使っています。将来廃止される可能性があることをご留意ください
手順1．Firefoxのスクリプト導入と同じ手順で、Firefoxの設定を変更する
※スクリプト導入時に設定を済ませた方は、この作業は不要です
アドレスバーに『about:config』と入力し、Enter。警告メッセージから先に進み、検索欄に『toolkit.legacyUserProfileCustomizations.stylesheets』を貼りつけ、値をtrueに変更する。
手順2．Githubから『userChrome.css』の最新版をダウンロードする
userChrome.cssの探し方は、Firefoxのスクリプト導入と同じです。
手順3．手順2でダウンロードしたファイルを、Firefoxのプロファイルフォルダ\chromeにコピーする
手順4．『userChrome.css』をテキストエディタで開き、末尾に下記コードをコピペしてファイルを上書き保存する
IMEを強制ONにしたいときは〝inactive〟を〝active〟に変更してください。
*|*#urlbar *|input,
*|*#searchbar *|input
{
/* アドレスバーと検索バーにフォーカスが移った際IMEを強制オフ */
ime-mode: inactive !important;
}なおセキュリティソフトのESETをお使いの方は、userChrome.cssを編集できない可能性があります。詳しくは下記サイトをご覧ください。
ちなみに自分もESETを使っていますがこの問題は発生してないので、セキュリティソフトの設定や環境の影響を受けるのだと思われます。
手順5．ブラウザを再起動して作業完了
この機能を無効化したいときは、手順4で貼りつけたコードを削除するか、userChrome.cssが不要であればファイルごと削除してください。
なおLibreWolfに、設定 > LibreWolf のページに【userChrome.css のカスタマイズを許可する】という設定があるので、念のためこちらもチェックを入れてください。
5．【番外編その二】パスワード管理ソフトに自動入力させる際〝ふじこ〟にならない方法【KeePass】
KeePassというパスワード管理ソフトなら、下記方法で「くぁwせdrftgyふじこ」を避けることができます。
