Bitwardenはとても使いやすいパスワード管理ソフトですが、普通にログイン情報を登録すると「ユーザー名」と「パスワード」しか登録できません。
ですので、ログイン項目が複数あるようなサイトでは自動入力がうまくいかないことがあります。
例えば、次のイメージは「ゆうちょダイレクト」のログイン画面です。
ゆうちょダイレクトも「ユーザー名」と「パスワード」ではなく、「お客さま番号」という３つの項目への入力が求められます。
このような複数項目への入力が求められるサイトでも、Bitwardenの「カスタムフィールド」を使えば自動で各項目に入力できるようになります。
この記事では、Bitwardenのカスタムフィールドを使って複数のログイン項目に入力する方法を説明します。
WebブラウザはChromeを使って説明していきます。
Bitwardenのブラウザ拡張機能は「「Bitwarden」の導入方法【アカウント作成～ブラウザ拡張機能のインストール】」を参考にしてあらかじめインストールしておきましょう。
【Bitwarden】 複数のログイン項目に入力する方法（カスタムフィールド設定）
Bitwardenのカスタムフィールドを使って複数のログイン項目に入力する方法を説明していきます。
カスタムフィールドとは
カスタムフィールドとは、ユーザー名とパスワード以外に独自で設定できるログイン項目のようなイメージです。
例えばゆうちょダイレクトのお客さま番号のように、ユーザー名とパスワード以外の項目で、
“この項目（Aとします）” には “この情報（Bとします）” を入力したい！
という場合があると思います。
そういった場合に、
A ＝ 入力項目を識別する情報
と
B ＝ 項目に入力する情報
をカスタムフィールドを使って設定することができます。
AとBのペアをカスタムフィールドを使って設定すれば、ユーザー名とパスワード以外の項目でも指定した項目に指定したログイン情報を入力することができるようになります。
カスタムフィールドの設定
カスタムフィールドを設定する流れとしては次の通りです。
１｜ログインするサイトにアクセスする
まずはログインするサイトにアクセスしましょう。
ここではサンプルとしてゆうちょダイレクトのログイン画面を使って説明していきたいと思います。
ゆうちょダイレクトのログイン画面は次のイメージのように、「お客さま番号」を３つの項目で入力するようになっています。
２｜入力する項目の識別情報を確認する
上で書いたAとBのペアのうち、「入力項目を識別する情報（A）」を確認していきます。
お客さま番号をBitwardenに登録しただけでは、Bitwardenはその情報をログインページのどの項目に入力すればいいのかわかりません。
ですので、入力する項目を指定するために「入力項目を識別する情報（A）」を確認する必要があるわけです。
ログインページを開いた状態で「F12」を押します。
（Macの場合は「Command」＋「Option」＋「I」）
すると「デベロッパーツール」という画面が開きます。
「Ctrl」＋「Shift」＋「C」を押します。
もしくは次のイメージにあるアイコン（Select an element in the page to inspect it）をクリックします。
お客さま番号の１つめの入力項目にカーソルを合わせます。
カーソルは項目に合わせるだけでクリックなどはしないようにしてください。
ページをクリックしてしまうと選択モードが解除されてしまいますので、解除された場合はもう一度「Ctrl」＋「Shift」＋「C」を押しましょう。
お客さま番号の１つめの入力項目にカーソルを合わせると、入力項目の情報が表示されます。
この表示された情報の中で一番上に表示されている色のついた文字列に注目します。
ここでは色のついた文字列は、
input#focus1.w15
となっています。
この色のついた文字列のうち、「#」（シャープ）と「.」（ドット）のあいだにある文字列を確認します。
ここでは「#」と「.」のあいだにあるのは、
focus1
ですね。
これが「入力項目を識別する情報（A）」です。
なお、サイトによっては「input#focus1」のように「.」が無い場合もあります。
その場合は、「#」より後ろの文字列すべてが入力項目を識別する文字列になります。
まずは1つめの入力項目を識別する情報として「focus1」をメモしておきましょう。
同様に、２つめと3つめの入力項目についても確認していきます。
２つめの項目で色のついた文字列は、
input#focus2.w15
となっていますので、「#」と「.」のあいだにある
focus2
が２つめの項目を識別する情報です。
３つめの項目で色のついた文字列は、
input#focus3.w15
となっていますので、「#」と「.」のあいだにある
focus3
が３つめの項目を識別する情報です。
以上で識別情報の確認は完了です。
３｜カスタムフィールドを設定する
「入力項目を識別する情報（A）」が確認できましたので、あとはカスタムフィールドでAとBのペアを設定していきます。
「項目に入力する情報（B）」には自分がその項目に入力したいパスワードや、ゆうちょダイレクトのようにお客さま番号などを設定します。
Bitwardenのブラウザ拡張機能から対象サイトのアイテムを表示します。
例えば、ゆうちょダイレクトでパスワードだけを登録しているアイテムがあるとします。
ゆうちょダイレクトの場合、ユーザー名は使わないので、ユーザー名を登録している場合は削除しておいたほうがいいです。
当然、この状態ではお客さま番号の情報は登録していないので、ゆうちょダイレクトのログイン画面にアクセスしてもBitwardenによる入力は行われません。
ここからお客さま番号の情報をカスタムフィールで設定していきたいと思います。
アイテムを表示している状態で右上の「編集」をクリックします。
下のほうにカスタムフィールドという項目があるので、プルダウンで「テキスト」が選択されていることを確認し、「新規カスタムフィールド」をクリックします。
“名前” と “値” という項目が表示されるので、お客さま番号の１つめの入力項目の情報を設定します。
“名前” には「入力項目を識別する情報（A）」を、“値” には「項目に入力する情報（B）」を入力します。
１つめの入力項目なので、“名前” には「focus1」を、“値” にはお客さま番号の最初の４桁（仮に1111とします）を入力します。
※ゆうちょダイレクトのお客さま番号は「４桁－４桁－５桁」の数字で構成されています。
もう一度「新規カスタムフィールド」をクリックして、同様に２つめと3つめの入力項目についても入力します。
右上の「保存」をクリックします。
すると次のイメージのようにカスタムフィールドが３つ作成できたと思います。
これでゆうちょダイレクトのログインページをリロード（再読み込み）すると、お客さま番号の３つの項目に指定した情報が入力されると思います。
うまく入力されない場合は、カスタムフィールドの “名前” に「入力項目を識別する情報（A）」が正しく登録されているかなどの確認をしてみましょう。
カスタムフィールドを使うときの注意点
カスタムフィールドがうまく動作するためには、Bitwardenが「入力項目を識別する情報（A）」に基づいて、指定した項目を正しく特定できるかどうかが重要です。
上で紹介した手順で多くのサイトはカスタムフィールドがうまく動作すると思いますが、サイトの作りや構成はサイトごとに異なるため、カスタムフィールドがうまく動作しないサイトもあります。
その場合はBitwardenでの自動入力ができないので、コピー＆ペーストなど手作業での入力が必要です。
また、カスタムフィールドを登録してスマホ（iOS/Android）での自動入力を試してみましたが、スマホではカスタムフィールドの情報を自動で入力することはできないようです。
ですので、スマホではカスタムフィールドの情報を入力したい項目にコピー＆ペーストするしかなさそうです。
カスタムフィールドが対応しているHTML属性
HTMLの知識が少し必要ですが、Bitwardenのカスタムフィールドが対応しているHTML属性について解説しておきます。
上で書かれた手順で設定したけどうまく自動入力ができないというときは、これから説明する内容を確認してみてください。
今回、「入力項目を識別する情報（A）」としてHTMLのid属性を使った方法をご紹介しました。
ただ、入力項目にidが設定されていないサイトもあるので、その場合は他の属性を使って入力項目を識別することができます。
Bitwardenのカスタムフィールドが対応しているHTML属性は次の通りです。
Bitwardenはここに書かれている順番で属性値を検索していきます。
ですので、まずは入力させたい項目のid属性を探して、無いようであればname属性、無ければlabel値、…、という順番で項目に設定されている属性値を探していけば、優先順位が高い順に「入力項目を識別する情報（A）」を探していくことができるはずです。
まとめ
Bitwardenのカスタムフィールドを使って複数のログイン項目に入力する方法を説明しました。
カスタムフィールドを使えば簡単に複数のログイン項目に入力することができるようになります。
