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

カスタムフィールド設定

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

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

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

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

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

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

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

【SSS】Bitwardenのダウンロードと自動入力の使い方
【SSS】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、もしくはブックマークか上記リンクにアクセスすれば、このようになっているはずだ。

複数項目自動入力

ゆうちょダイレクトの場合は、コメント欄でtanukiさんに教えてもらったので参考にされたし。

ゆうちょダイレクトは、カスタムフィールドの名前をfocus1, focus2, focus3とし、値にお客様番号を入れる。
横浜銀行の確認パスワードをブランクにしたい場合は、カスタムフィールドの名前にBPW0010とし、値を空欄(“”)にする。

引用:tanukiさんのコメント

自動入力が発動しない

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

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

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

Webブラウザでする設定

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

意図的に負荷をかけたり、Webブラウザでするbitwarden設定まとめ

コメント

  1. tanuki より:

    ご参考に:
    ゆうちょダイレクトは、カスタムフィールドの名前をfocus1, focus2, focus3とし、値にお客様番号を入れる。
    横浜銀行の確認パスワードをブランクにしたい場合は、カスタムフィールドの名前にBPW0010とし、値を空欄(“”)にする。

    • ぷっぷ より:

      ありがとうございます!
      私はゆうちょ使っていないので、利用者の多いゆうちょはカスタムフィールド設定のジャパンネット銀行の次のあたりに引用させていただきました∩(・∀・∩
      参考カスタムフィールド設定

  2. ぽんぽん より:

    Lastpassからの乗り換えを検討中で今bitwardenを試用中なのですが、これってログインフォームの自動入力後にログインボタンまで自動で押させることはできるのでしょうか?Lastpassは自動入力からログイン押下までやってくれるので、手動で「ログイン」ボタンをクリックする手間が省けて便利なのですが・・・。

    • ぷっぷ より:

      あれ、そういえばついてないや……(´ε`;)
      いまのところこの点は、入力後にEnterを押して我慢するしかないかもしれません。
      ※私は現在Bitwardenを緊急用としか使っていないKeePassユーザーなので、実は使える設定が存在していたらごめんなさい!

      一応フォーラムでも検索してみましたが、それらしきものは見つかりませんでした。

  3. すみ小五郎 より:

    bitwardenいいんですけど、ブラウザ拡張のログインの際に普通にメールアドレスが記入されてて…
    非表示にしたりできないんですかねぇ

    • ぷっぷ より:

      確認したところ、「前回ログイン時に使用したメールアドレスを、再度ログイン時に非表示にする機能」はなさそうです。
      共有PCで使う場合は、メールアドレスも共有用にする手間が不可避(´ε`;)

      • すみ小五郎 より:

        おぉ!ありがとうございます!
        やはり、そうなのですね…
        毎回メールアドレス打ってもいいのですけど、こればかりは仕方ないですね(惜しい!)~

        • ぷっぷ より:

          各社メールアドレスは公開情報扱いなので、それにならってるのかも!
          でも、適当にユーザー名をこちらで決めて、「こんにちは○○さん!」みたいな、Windows丸パクリログイン表示が理想的ですね(*゚▽゚)

  4. pom より:

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

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

    • ぷっぷ より:

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

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

  5. ぷっぷ より:

    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 はチェックボックスでテキストボックスと同じようにブラウザの右クリックメニューから表示できます