bitwardenの複数項目自動入力、カスタムフィールド設定

カスタムフィールド設定 パスワード管理ソフト

普通に使うと「ユーザー名」・「パスワード」しか項目がないので、2つ以上は対応できない。

「カスタムフィールド」を使えば、銀行などの複数項目にいくつでも対応できたり、チェックボックスにチェックをしたり、より一層うまく使えるようになる。

4ヶ月前に紹介した設定方法は完璧ではなかったため、断念した方はもう一度確認してみよう。
複数項目自動入力

この記事は拡張機能(パソコン)で説明していき、「わかりづらいツール」を使い説明していくが、できるだけ専門知識を破壊し、わかりやすく案内する。

スマホでも登録は可能だが、名前登録しかないため「すべてのログイン画面に対応できない」かもしれない点も注意。

Androidはカスタムフィールドが発動しないらしく、iOSは持っていないのでわからない。基本的にはパソコンで使うものだと割り切り、スマホでは手動コピペしよう。

まだ使用していなければ、先にダウンロードだ。基礎的な使い方も紹介している。

【SSS】bitwardenのダウンロードと自動入力の使い方
KeePassと実力が拮抗している、オープンソースのパスワード管理ソフト「bitwarden」拡張機能・デスクトップアプリ・Webブラウザの使い方を紹介。
【SSS】bitwardenスマホアプリのダウンロードと自動入力の使い方
顔・指紋といった生体認証に対応、しかも無料でオープンソースの『現クラウド型パスワード管理アプリの王者』bitwarden(ビットウォーデン)。
スポンサーリンク

カスタムフィールドの仕様

理解しないと設定方法に迷うので、軽く説明していく。

カスタムフィールドは「アイテムの追加・編集(情報を登録する場所)」の一番下にある。

カスタムフィールドは情報を入力する場所の一番下

bitwardenは「Webページの情報」から、ユーザー名やパスワードを入れる場所を識別している。

カスタムフィールドも同じ仕様なので、「入力させたい項目の情報」を設定し、一致したら自動入力させるよう設定していく。

テキスト

カスタムフィールドテキスト

名前と値を入力できる。

名前には項目名、値には自動入力させたい文字列を入れよう。基本はこの項目しか使わないぞ。

ここの設定した名前で反応しなければ、「項目名で反応しない場合」の章を参考にしよう。

非表示

カスタムフィールド非表示

テキストと違い値を隠せるだけの機能?

この機能は私が理解していないので、わかりやすく説明できない。

コメント欄の情報提供によると、hidden(隠された)という意味のもので、Webページに表示されない情報に対して使うものらしい。

ただ、「テキスト」と同じように私は使えてしまっており、どっちを使っても困らないかもしれないが、通常は「テキスト」を使っておこう。

真偽値

カスタムフィールド真偽値

「ログイン情報を保持する」などの項目をチェック、またはチェックを外す機能。

チェックを入れるとチェックが外され、チェックを入れないとチェックを入れられるといったよくわからない動作をするので、「設定したらチェックあり・なし両方」を試そう。

名前の欄に表示されていない「隠された情報」を入れなければならないので、次の章参照。

項目名で反応しない場合(idとnameで自動入力)

まだ設定していない方や、項目名だけでも入力できる方はカスタムフィールド設定の章まで読み飛ばそう。

入力したい項目に設定した文字列を入力できなかったり、チェックボックスが反応しないなら隠された情報で入力させる。

ここで説明する情報とは、

  • 項目名(ラベル名)
  • nameの中の文字列
  • idの中の文字列
  • 項目の意味を案内する文字列(placeholder名)
  • チェックボックス(checkbox名)

のことで、基本的にWebログイン画面に表示されているのは項目名(文字列)のため、それができなければ残りの3つで対処することになる。

パソコンがない方は項目名しか確認できないので、勘で入れるか項目名で入力できるか運任せだ。

とりあえず、「ジャパンネット銀行ログイン画面」で説明していく。口座を持っていなくても、意味を理解するために確認だけしよう。

HTMLタグという専門知識を無視して進めるので、若干やりにくいが初心者でもできるようにわかりやすく砕いておいた。

ジャパンネット銀行ログイン画面にたどり着いたら、さっそく「F12」を押そう。キーボードの上にある「Fの大群ゾーン」一番右にあるはずだ。

もしなければ、

  • Chrome:ログイン画面の適当なところを「右クリック」→「検証」
  • Firefox:ログイン画面の適当なところを「右クリック」→「要素を調査」
  • Edge: ログイン画面の適当なところを「右クリック」→「要素の検査」
  • それ以外のブラウザ: ログイン画面の適当なところを「右クリック」→それっぽい項目をすべてクリックして探す

すると、コードらしき文字列を召喚でき、これらは「実際のページの裏の部分を文字化させたもの」だと思ってもらってよく、何の害もないので安心して良い。

とりあえず、表示されたボタン(だいたい左上に表示)をクリックして「青い状態」にしよう。

要素選択ボタンをクリック

ボタンをクリックした状態で入力したい項目、ここでは「店番号(3桁)」・「口座番号(7桁)」にカーソルを合わせよう。

クリックするとさっきの状態が解けてしまうので、解けてしまったらまたボタンを押した状態を維持しよう。

カーソルを合わせて中の文字列を確認

#以降の文字列を覚える

入れるのは「#(シャープ)」を除いた後ろの文字だけだ。ちなみに、TenNo=店ナンバーのこと。

ジャパンネット銀行はラベルに囲まれている「店番号(3桁)」・「口座番号(7桁)」でも反応するが、「idTenNo」、または上記画像では表示されていないが「TenNo」でも反応するため、他の会社のログイン画面でidを入れても反応しないなら、idを取ってみるのもいいだろう。

ちなみに、大文字小文字の区別はされないので、「tenno」でOK。

カーソルを合わせているあいだしか表示されないので(本当はコードの中にも表示されてるが説明が難しいので省く)、頭で記憶するかメモか画像で一時的に保存しよう。

口座番号も同じやり方で項目の名前を抽出してとりあえず保存しておこう。

項目の意味を説明している案内文字で自動入力

例をエバーノート画面にするが、このようなうっすらと書かれた「項目の意味を説明している案内文字(placeholder名)」を「テキスト」の名前に入れても自動入力として使える。

項目に表示された案内文字でも自動入力として反応する

チェックを入れるための真偽値の抽出

上記手順と同じように、チェック項目を抽出する必要がある。

checkbox(チェックボックス)という隠されたものが存在するのだが、そのチェックボックスに書かれている名前を真偽値の名前に設定することで、チェックをあり・なしの動作にすることができる。

エバーノートのログイン画面でチェックボックスにカーソルを合わせるとこんな感じ。

チェックボックスにカーソルを合わせて抽出

エバーノートは「rememberMe」が名前なので、これを「真偽値」に入れるだけだ。

こちらも頭の「#(シャープ)」を除いた文字列を入れよう。

違う項目に入力されてしまう場合の対策

こちらもコメント欄で情報提供を受けたものなのだが、「ワンタイムパスワード入力欄にもパスワードが入ってしまい、パスワードを毎度消す」といったような、毎回違う項目にユーザー名、またはパスワードが入っている人はこの設定で対策可能。

上記で説明してきた方法で、この例だとワンタイムパスワードの項目から名前を抽出し、値を空欄にすれば「間違っていた情報の後に空欄が上書き」される。

これで「あたかも最初から空欄でした状態」を装うことができるので、是非試してみよう。

スポンサーリンク

カスタムフィールド設定

それでは、例として優れている「ジャパンネット銀行ログイン画面」を参考にし、設定していく。

ジャパンネット銀行ログインページ例

利用していないなら適当に入力して進めるか、想像で理解しよう。

公式ログインページログイン – ジャパンネット銀行 

「https://login.japannetbank.co.jp/wctx/LoginAction.do?loginIdFlg=1」

拡張機能なら「タブ」からの登録、その他の端末は上記リンクをコピペしておき、ログイン情報にURLを登録しておこう。

ジャパンネット銀行のURLを入れて下へ進む

ジャパンネット銀行は「ログインID」にユーザー名、「ログインパスワード」にパスワードを入力される。

もちろん例なので、適当に入力して構わない。

上記2つ以外のカスタムフィールドを追加すればいいので、「店番号(3桁)」と「口座番号(7桁)」という名前のものを作ろう。

店番号・口座番号の名前を一致させよう。特に大文字・小文字・全角・半角などに注意し、コピペが確実だ! それでも自動入力されないなら、確実に入力できる「項目名で反応しない場合」の章まで戻って、正式名を抽出しよう。
入力例

あとは登録したURL、もしくはブックマークか上記リンクにアクセスすれば、このようになっているはずだ。

複数項目自動入力

自動入力が発動しない

設定を有効化させていない可能性が高いので、以下のリンクを参照。2段階認証のやり方も紹介しているぞ。

拡張機能簡単な使い方・自動入力
スマホ簡単な使い方・自動入力

実は「登録情報を保存していなかっただけ」の場合もあるので、カスタムフィールド欄をもう一度確認してみよう。
スポンサーリンク

Webブラウザでする設定

アカウント情報変更や意図的に負荷をかけることができる設定が存在するので、まだしていなければ強化してくるといい。

意図的に負荷をかけたり、Webブラウザでするbitwarden設定まとめ
パスワードの変更・意図的に負荷をかける・2段階認証の設定といった、大本のwebブラウザでしかできない設定をまとめた。アカウント必須のため、持っていなければ以下の記事で作成してこよう。Settings(設定)...

コメント

  1. ぷっぷ ぷっぷ より:

    pomさんへ
    こちらの設定ミスにより、凄いファイアウォールブロックを見せつけてしまい本当にごめんなさい。
    この記事は近々pomさんの言っているとおりに、結構違ったので大規模改修させていただきます!

    ただ、引き続きChromeでは入力できるけど、私のAndroidだとnameとidでやっても空欄なんですよねー(゚~゚o)ウゥーン 古いからかな……。

    私自身HTML初心者で合っているか自信を持てませんが、現状のままよりはマシなはずなので書くだけ書いてみます!
    以下pomさんの原文

    bitwardenを検索していたらたまたまこのページが引っかかりました。
    カスタムフィールドの使い方を簡単に説明しておきます。

    カスタムフィールドの仕様はここに書いてありますが、若干HTMLの知識が必要です。
    https://help.bitwarden.com/article/custom-fields/

    カスタムフィールドの【名前】はinputタグのid,name,placeholder属性
    またはその前にあるlabelタグの中身を書きます。

    HTMLのinputタグについて。
    http://www.htmq.com/html5/input.shtml
    http://www.htmq.com/html5/input_placeholder.shtml
    http://www.htmq.com/html5/label.shtml

    まず、Chromeブラウザなら入力したい欄を右クリックしてメニューから「検証」、
    Firefoxなら「要素を調査」を選択してHTMLの要素を表示させてください。
    inputタグが選択されて色が反転していると思います。

    そこに

    label for=\”Name1\”名前/label
    input type=\”text\” name=\”Nama1\” id=\”NameID\” placeholder=\”名前\”
    といった感じで要素が表示されているはずです。

    カスタムフィールドの【名前】には、この内、で挟まれたテキスト、
    またはname,id,placeholderの内容のいずれかを書きます。
    【値】は入力したい内容ですね。

    名前の頭に csv= や regex= を付けることで複数条件や正規表現も使えるようです。

    ワンタイムパスワード入力欄にまで通常パスワードが入力されてしまうような場合に、
    カスタムフィールドで空欄を上書きするようなこともできます。

    カスタムフィールドの種類は、
    テキストが type=\”text\”、非表示が type=\”hidden\”、真偽値が type=\”checkbox\” に対応します。

    text はテキスト入力欄、hidden はブラウザ上に表示されない要素なので使うことはないでしょう。
    checkbox はチェックボックスでテキストボックスと同じようにブラウザの右クリックメニューから表示できます

  2. pom より:

    AndroidではOSの機能であるAutofillでパスワード入力をするのですが、
    カスタムフィールドに対応することはできないようです。

    ただしアドオンが使えるAndroid版Firefoxなら可能です。

    • ぷっぷ ぷっぷ より:

      あー! やっぱり対応してなかっただけだったのですね!
      「私のミスかなー?」って感じていて、ずっとまごまごしていました(´・ω・`)

      そして、AndroidのFirefoxでアドオン使えるの知らなかった……(゜o゜;
      これは記事ネタになりそう! そんなことより、本物のpomさんが来てくれて本当によかっt……