【Python】入力フォーム画面に自動で値を設定する

■概要

HTMLのフォーム画面サンプルに対して、予め設定している内容を自動で画面に入力するツールを作成する。

なお、テンプレートファイルに設定する内容は以下の通り

入力項目入力内容
お名前HOGE
お名前（フリガナ）ホゲ
貴社名ホゲホゲ会社
メールアドレスhoge@hogehoge.co.jp
電話番号123-456-7890

※「ご質問内容をご記入ください」の項目に関しては処理では入力しない（空欄とする）。

▼前提条件

  • HTMLはローカルのファイルを使用する。
  • HTMLのID要素は予め把握しておく。（※1）

（※1）idは、Chromeの場合、「F12」を押下することで確認可能。

■フローチャート

本ツールの処理の流れについて、フローチャートを以下に示す。

▼メイン処理

▼HTML自動反映処理

▼conf情報取得処理

■サンプルコード

▼ディレクトリ階層

今回作成ツールのディレクトリ階層を以下に示す。

.
├── conf
│   └── template_info.conf
├── src
│   └── auto_input_form.py
└── template
    ├── index.html
    └── style.css

▼confの設定情報

confファイルの設定情報は以下の通り。

・template_info.conf

[template]
username = HOGE
username_kana = ホゲ
company_name = ホゲホゲ会社
email_address = hoge@hogehoge.co.jp
tel_no = 123-456-789

▼実行モジュール

実行モジュールのサンプルコードは以下の通り。

・auto_input_form.py

import os
import signal

import configparser
from selenium import webdriver
from selenium.webdriver.common.by import By


# htmlファイルの格納場所
HTML_FILE_PATH = 'template/index.html'

# confファイルの格納場所
CONFIG_FILE_PATH = './conf/template_info.conf'

# confの設定内容のセクション情報
CONF_SECTION_TEMPLATE = 'template'

# confの設定内容のkey情報
CONF_KEY_USERNAME       = 'username'        # ユーザ名
CONF_KEY_USERNAME_KANA  = 'username_kana'   # ユーザ名（カナ）
CONF_KEY_COMPANY_NAME   = 'company_name'    # 会社名
CONF_KEY_EMAIL_ADDRESS  = 'email_address'   # メールアドレス
CONF_KEY_TEL_NO         = 'tel_no'          # 電話番号


# conf情報取得処理
def read_conf_file():
    # 返却用Dict
    template_info_dict ={}

    # ConfigParserオブジェクトの生成
    config = configparser.ConfigParser()

    # confファイルの読み込み
    config.read(CONFIG_FILE_PATH)

    # セクションの取得
    config_section = config[CONF_SECTION_TEMPLATE]

    # confの情報をDictに格納
    template_info_dict[CONF_KEY_USERNAME]       = config_section.get(CONF_KEY_USERNAME)
    template_info_dict[CONF_KEY_USERNAME_KANA]  = config_section.get(CONF_KEY_USERNAME_KANA)
    template_info_dict[CONF_KEY_COMPANY_NAME]   = config_section.get(CONF_KEY_COMPANY_NAME)
    template_info_dict[CONF_KEY_EMAIL_ADDRESS]  = config_section.get(CONF_KEY_EMAIL_ADDRESS)
    template_info_dict[CONF_KEY_TEL_NO]         = config_section.get(CONF_KEY_TEL_NO)

    return template_info_dict


# HTML自動反映処理
def output_from_conf_to_html():
    # conf情報取得処理呼び出し
    template_info_dict = read_conf_file()

    # カレントディレクトリを取得
    current_dir = os.path.dirname(os.path.abspath(__file__))

    # HTML格納先のディレクトリパスを取得
    html_file_full_path = os.path.join(current_dir, "..", HTML_FILE_PATH)

    # mac用
    with webdriver.Chrome() as chrome:
    # Windows用：chromedriverのパスを指定
    # with webdriver.Chrome("ここにパスを記載する") as chrome:
        try:
            chrome.get("file://" + html_file_full_path)

            # HTMLのIDを取得
            html_id_username        = chrome.find_element(By.ID, CONF_KEY_USERNAME)
            html_id_username_kana   = chrome.find_element(By.ID, CONF_KEY_USERNAME_KANA)
            html_id_company_name    = chrome.find_element(By.ID, CONF_KEY_COMPANY_NAME)
            html_id_email_address   = chrome.find_element(By.ID, CONF_KEY_EMAIL_ADDRESS)
            html_id_tel_no          = chrome.find_element(By.ID, CONF_KEY_TEL_NO)

            # HTMLに値を設定
            html_id_username.send_keys(template_info_dict[CONF_KEY_USERNAME])
            html_id_username_kana.send_keys(template_info_dict[CONF_KEY_USERNAME_KANA])
            html_id_company_name.send_keys(template_info_dict[CONF_KEY_COMPANY_NAME])
            html_id_email_address.send_keys(template_info_dict[CONF_KEY_EMAIL_ADDRESS])
            html_id_tel_no.send_keys(template_info_dict[CONF_KEY_TEL_NO])

        # 例外エラー処理
        except Exception as e:
            print(e)

        finally:
            # ChromeDriverのみ終了し、ブラウザはそのまま残す
            os.kill(chrome.service.process.pid, signal.SIGTERM)


# メイン処理
if __name__ == '__main__':
    output_from_conf_to_html()

▼お問い合わせフォーム画面

お問い合わせフォーム画面のHTMLおよびCSSを以下に示す。

・index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="style.css">
    <title>問い合わせフォーム サンプル</title>
</head>
<body>
    <div class="container-header">
        <h1>お問い合わせフォーム</h1>
    </div>
    <div class="container-main">
        <form action="#" method="post">
            <div class="form-item">
                <label>お名前：必須</label>
                <input type="text" value="" id="username" required>
            </div>
            <div class="form-item">
                <label>お名前（フリガナ）：必須</label>
                <input type="text" value="" id="username_kana" required>
            </div>
            <div class="form-item">
                <label>貴社名：必須</label>
                <input type="text" value="" id="company_name" required>
            </div>
            <div class="form-item">
                <label>メールアドレス：必須</label>
                <input type="email" value="" id="email_address" required>
            </div>
            <div class="form-item">
                <label>電話番号：必須</label>
                <input type="text" value="" id="tel_no" required>
            </div>
            <div class="form-message">
                <label>お問い合わせ内容</label>
                <input type="text" value="">
            </div>
            <button class="submit-btn">送信</button>
        </form>
    </div>
</body>
</html>

・style.css

.container-header {
    text-align: center;
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}

.container-main {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/    
    border-radius: 10px;/*角の丸み*/
}

.form-item label{
    display: block;
}

.form-item input{
    display: block;
    margin-bottom: 10px;
    outline: ridge 0.5px #6091d3;
    border-radius: 2px;/*角の丸み*/
}

.form-message input{
    display: block;
}

.form-message input{
    display: block;
    width: 50%;
    line-height: 10;
    outline: ridge 0.5px #6091d3;
    border-radius: 2px;/*角の丸み*/
}

.container-main button {
    background: #d8af4e;
    color: #FFF;
    border: none;
    padding: 0.5em 1em;
    font-size: 15px;
    margin: 2em 0;
}

■実行結果

■参考

本ツールを作成するにあたり、参考とさせていただいたURLを以下に示す。

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
HTMLとCSSのコピペですぐに表示できる『囲み枠』『ボックスデザイン』の例を30個紹介します。Webサイトやブログでご活用ください。
saruwakakun.com
【スクレイピング】テキストボックスに文字を入力 - Qiita
前提条件インストール済み1.python2.pipは3.anaconda4.Jupyter Labスクレイピングを始める4ステップ1.ブラウザーのHTMLファイルから取得したいID（基…
qiita.com
Pythonでiniファイルを読み込むライブラリ「configparser」 - Qiita
Pythonのライブラリ「configparser」について、備忘のために示す。実行環境Python 3.7.3Mac OS 10.15.5設定ファイル(iniファイル)iniファイルとは…
qiita.com

コメント