プロジェクト概要

日本最大級のタイピング練習サイト「e-typing」に対応した自動入力プログラムです。Selenium WebDriverによるブラウザ自動操作技術を活用し、XPathによる動的要素取得と文字列自動入力を実装しました。

開発目的

Web自動化技術（Selenium）の実践的スキル習得
XPathを用いた動的要素取得の理解
iframe操作を含む複雑なDOM構造への対応
ブラウザ操作の自動化プログラミング体験

使用技術

プログラミング言語

Python 3.x

ブラウザ自動化

Selenium 4.34.2 webdriver-manager 4.0.2 requests 2.32.4 python-dotenv 1.1.1

Selenium: Webブラウザの自動操作・要素取得
webdriver-manager: ChromeDriverの自動インストール・管理

その他依存ライブラリ

trio / trio-websocket urllib3 certifi

主な機能

1. e-typing自動タイピング機能

対象サイト: e-typing（イータイピング） - 日本最大級のタイピング練習サイト

実装機能:

ローマ字タイピングチェックの自動実行
XPathによる動的テキスト要素の取得
15問の自動入力処理
スコア・レベルの自動取得とコンソール表示
無限ループモード対応（コメントアウト解除で有効化）
iframe内要素への正確なアクセス

システム構成

動作フロー

e-typingサイトアクセス

↓ 1秒待機

ローマ字チェックリンククリック

↓ 1秒待機

腕試しレベルチェックボタンクリック

↓ 2秒待機・iframe切り替え

タイピング開始ボタンクリック

↓ 2秒待機・body要素取得

スペースキー送信でタイピング準備

↓ 3秒待機

15問の文字列を1文字ずつ自動入力

↓ 各問題後1秒待機

結果画面からスコア・レベル取得

↓

コンソールに結果表示

工夫した点

1. XPathによる柔軟な要素取得

# 次にタイプする文字列を動的に取得
text = driver.find_element("xpath", 
    "//div[@id='sentenceText']/div/span/following-sibling::span").text

following-sibling軸を使用した兄弟要素の取得
動的に変化するテキストへの対応
タイピング済み文字ではなく「未タイプ文字」のみを正確に取得

2. iframeへの切り替え処理

# タイピング画面はiframe内にあるため切り替えが必要
driver.switch_to.frame("typing_content")

e-typingのタイピング画面はtyping_contentというiframe内に実装
正確な要素操作のためのコンテキスト切り替えが必須
iframe切り替えなしでは要素が見つからない

3. ChromeDriverの自動管理

from webdriver_manager.chrome import ChromeDriverManager

service = Service(ChromeDriverManager().install())
driver = webdriver.Chrome(service=service, options=options)

webdriver-managerにより環境に応じたChromeDriverを自動ダウンロード
手動でのドライバー管理が不要
Chromeバージョンアップ時も自動対応

4. 適切な待機時間の設定

各処理の間に適切な待機時間を設定
ページ読み込みやJavaScript実行の完了を待つ
エラーを防ぐための安全マージン確保

技術的ハイライト

1. 動的要素の監視と文字単位での入力

# タイピング問題を1文字ずつ自動入力
for _ in range(15):
    text = driver.find_element("xpath", 
        "//div[@id='sentenceText']/div/span/following-sibling::span").text
    for char in text:
        body_element.send_keys(char)
    time.sleep(1)

2. XPath軸を活用した柔軟な要素取得

"//div[@id='sentenceText']/div/span/following-sibling::span"

sentenceTextという特定IDの要素から出発
子要素のdiv、さらにその子のspanへ移動
following-sibling軸で兄弟要素（未タイプ部分）を取得
複雑なDOM構造を正確にナビゲート

開発情報

開発形態

個人開発

役割

企画・設計・実装・テスト

開発時の注意事項

本プロジェクトは教育・学習目的で開発しました。開発および検証にあたり、以下の点に配慮しています。

利用規約の遵守

e-typingサイトの利用規約を事前に確認し、個人的な学習範囲内での開発
自動化技術の学習を目的とし、ランキングや公式記録への影響を避ける
Webスクレイピング技術の研究として、倫理的配慮を持って実装
本番環境での継続的な使用は行わず、あくまで技術検証に限定

サーバーへの配慮

適切な待機時間（time.sleep）を各処理に設定し、過度な負荷を防止
無限ループモードはコメントアウトし、デフォルトでは実行されない設計
テスト実行は必要最小限に留め、連続実行を控える運用方針
ページ読み込み完了を確認してから次の操作を実行する設計

技術的配慮

ブラウザ自動化技術（Selenium）の学習を主目的とした開発
XPath、iframe操作など、複雑なDOM構造への対応技術の習得
実用ツールではなく、技術研究・ポートフォリオとしての位置づけ

倫理的配慮

オープンソースとして公開せず、悪用防止に配慮
自動化技術の学習範囲を超えた使用を推奨しない立場を明示
e-typingサービスの健全な運営を尊重する姿勢を維持

デモ動画

実際の動作をご覧いただけます。e-typingサイトでの自動タイピングの様子をわかりやすく紹介しています。

謝辞

e-typing: 日本最大級のタイピング練習サイトの提供
Seleniumプロジェクト: 強力なブラウザ自動化フレームワーク
webdriver-manager: ChromeDriver自動管理ツールの開発
Pythonコミュニティ: 豊富なライブラリとドキュメント