Webサイト構築・Webシステムやスマホに関する情報を発信しています。

フォームのテストに便利な【Google Chrome】のアドオン(拡張機能) FBI

フォームの検証・テストを少しでも楽にできるようにと開発しました。
【Google Chrome】のアドオン(拡張機能) を紹介します。





FBI (Form Business Information) という名前で、Google社からの審査を通過して、公開しています。


この FBI と命名している Chromeアドオンは、作業効率系のツールになると思います。

私は時々あるのですが
作成したフォームの検証で仕様通りの作りになっているか否か、テストをすることがあります。
デベロッパーツールで事足りることもありますが、少し手間がかかりますよね。

例えば
HTMLのinput要素のname属性値が正しく名前で設定されているか?
デベロッパーツールで、操作して探すことは可能ですが、すぐに出てきませんよね。

type属性の場合は text になっているか、radio か checkbox か textarea なのか。

value属性は、初期値が設定されているのか または 初期値は何も入っていない空値なのか。

入力文字数を制限したい場合、maxlengthが設定されているのか。
maxlength だけで制限することは不可能でしょうが、初期段階での制限にはなると思います。

デベロッパーツール以外でも、ある程度、自動化することは可能だと思われますが
急ぎで作成したフォームで手っ取り早くテストしたい場合ってありませんか。

そんな時に「こういうツールがあればいいな」という思いを形にしてみました。
少しテストの作業を楽になるようであれば、使ってみてください。


これを開発した経緯ですが
Web制作の作業をする中で、何か良いツールはないものかと探しました。

部分的には、これは便利だなというツールはありました。
しかし、自身が使っていく上で、「こういう機能も一緒にあった方が作業が楽になるだろうな」
という思いが日に日に強くなっていきました。
納得のいくツールを使うには自身で作るしかないと思い、開発することにしました。


実現させるには、
Webブラウザの「Google Chrome」アドオン(拡張機能) として、作るのがベストだと判断し
アドオン(拡張機能)として開発し、完成したのが FBI (Form Business Information) です。

自身が開発・テスト・デバッグ作業を楽にする目的で開発したのですが
似たような思いをお持ちの方へも提供できたらと思い、公開しています。

FBI」は、Google社からの数日の審査を受けて、許可されたツールです。
悪意のあるコードが紛れていれば、審査が通らず、許可されません。
安心して、Webブラウザの Chromeからインストールしてください。

「FBI」が気に入らなければ、簡単にアンインストールできます。


機能としては、

  • フォームの入力要素に関する情報を表示することで、確認し易くなります。
  • 送信ボタンを押下した場合に、どのような情報が送信されるのか、送信前に確認が可能です。
  • フォームの送信先URLを一時的に書き換えることで、違う送信先にデータを送信することが可能です。
  • 入力値を記憶させておき、クリック一つで記憶した入力値を反映することが可能です。
  • オートコンプリート機能の無効と有効を切り替えることが可能です。
  • maxlength属性の制限を解除することが可能です。
  • HTML5の入力制限や文字数制限を解除することが可能です。



入力値の記憶・反映機能は、結構便利だと思いますよ。
ID、パスワードの入力だけなら、比較的簡単だと思いますが
郵便番号、名前、住所、電話番号、メールアドレスなどを何回も入力していくことは手間がかかりますよね。

記憶させる為には、最初だけ入力する必要がありますが
【フィールドデータ操作】の【入力値保存】ボタンを押せば、一時記憶されます。
記憶させておけば、空になっている値の状態からデータを反映させることができます。

ページを開いた時点で自動的にセットしてくれるアドオンもありますが、自動化機能は付けていません。
自動でセットさせたくない場合もあるので、あえて、自動化は導入しませんでした。


インストール方法

(1) Google の Webブラウザ 「Chrome」を起動してください。
Google Chrome 専用です。

(2) FBI の公開ページにアクセス
検索窓で、「FBI CHROME」と入力します。
結果から
FBI (Form Business Information) - Chrome Web Store」を探します。

(2019年11月時点では、最上位の1位です。)

または下記URLにアクセス
https://chrome.google.com/webstore/detail/fbi-form-business-informa/hkoodoiaholnmgmhlkbnopojbfmbpcbn

(3) インストール開始
ページ右上の【Chrome に追加】ボタンをクリックし、しばらく待ちます。

(4) アドレスバーの右に追加
Chrome ブラウザのアドレスバー右に【FBI】の青いアイコンが表示されれば、インストール成功です。


以上
レビューにも投稿していただければ、幸いです。

https://chrome.google.com/webstore/detail/fbi-form-business-informa/hkoodoiaholnmgmhlkbnopojbfmbpcbn





0 件のコメント:

人気記事

ラベル

このブログを検索

Profile

大阪在住、年齢50代のWebプログラマーです。