Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Sumire_Neko

OpenAI o1 previewにデモ用のコードを書いてもらったらすごかった #blueprism

Last updated at Posted at 2024-09-20

o1 preview

何が得意とか、回数制限があるとか、そういうのは賢い先人の皆様が既にまとめてくださっているのでそっちをご覧ください。

新しいものが出たらとりあえず触ってみたい。
博士課程レベルの賢さでしたっけ。どう考えてもそんな賢い子が私レベルとお話しても能力が開花する感じにはできないけど、o1先生にどのくらいご指導いただけるか、他力本願全開の私が全力で頼ってみます。

質問文

ブラウザを表示している状態でTABを押すと、要素を順々にフォーカスしていくのですが、そのときに絶対にTABでフォーカスしないボタンがあります。このボタンはどのような構造になっていると思われますか？
「絶対にTABでフォーカスしないボタンをBlue Prismで操作する」操作をデモしたいので、考えられるケースを列挙し、デモ用のサンプルページHTMLをケース別に作成してください。なお、原因として「disabled 属性が設定されている」と「要素が非表示または表示外」は無いことを確認しています。また、ページを操作するためのショートカットはありません。

o1先生が出してくれたもの

承知しました。以下に、TABキーで絶対にフォーカスされないボタンのケース別サンプルページを作成しました。なお、「disabled 属性が設定されている」と「要素が非表示または表示外」でないことを前提としています。
各サンプルをクリックした際に、目視で「クリックされた」ことが確認できるようにいたします。具体的には、ボタンをクリックするとテキストが変化したり、アラートが表示されたり、色が変わったりするようにします。

1. tabindex 属性が -1 に設定されているボタン

tabindex="-1" が設定された要素は、TABキーによるフォーカスの対象外になります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>tabindex="-1" のボタン</title>
    <script>
        function handleClick(button) {
            button.textContent = 'クリックされました！';
        }
    </script>
</head>
<body>
    <button tabindex="-1" onclick="handleClick(this)">このボタンはTABでフォーカスされません</button>
    <button onclick="handleClick(this)">通常のボタン</button>
</body>
</html>

2. フォーカス可能ではないタグで作成されたボタン

<div> や <span> タグを使用してボタンを作成すると、デフォルトではフォーカスされません。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>フォーカスされないタグのボタン</title>
    <style>
        .button-like {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            text-align: center;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
    <script>
        function handleClick() {
            document.getElementById('message').textContent = 'ボタンがクリックされました！';
        }
    </script>
</head>
<body>
    <div class="button-like" onclick="handleClick()">このボタンはTABでフォーカスされません</div>
    <button onclick="handleClick()">通常のボタン</button>
    <p id="message"></p>
</body>
</html>

3. JavaScriptでフォーカスを制御しているボタン

JavaScriptを使用して、ボタンがフォーカスを受け取らないように制御しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScriptでフォーカス制御されたボタン</title>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var btn = document.getElementById('no-focus-button');
            btn.addEventListener('focus', function(event) {
                event.preventDefault();
                btn.blur();
            });
        });

        function handleClick(button) {
            button.style.backgroundColor = '#28a745'; // 緑色に変更
            button.textContent = 'クリックされました！';
        }
    </script>
</head>
<body>
    <button id="no-focus-button" onclick="handleClick(this)">このボタンはTABでフォーカスされません</button>
    <button onclick="handleClick(this)">通常のボタン</button>
</body>
</html>

4. CSSでフォーカスを防止しているボタン

CSSのpointer-events: none; を使用して、要素がフォーカスやクリックを受け付けないようにしています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CSSでフォーカス防止されたボタン</title>
    <style>
        .no-pointer-events {
            pointer-events: none;
        }
    </style>
    <script>
        function handleClick() {
            alert('ボタンがクリックされました！');
        }
    </script>
</head>
<body>
    <button class="no-pointer-events" onclick="handleClick()">このボタンはTABでフォーカスされません</button>
    <button onclick="handleClick()">通常のボタン</button>
</body>
</html>

注意: この場合、pointer-events: none; が設定されているため、マウスクリックも受け付けません。そのため、手動でクリックしても反応しません。自動化ツールでクリックイベントを発生させても反応しない可能性があります。

5. aria-hidden 属性が true に設定されたボタン

aria-hidden="true" が設定された要素は、支援技術から無視され、フォーカスも当たりません。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>aria-hidden="true" のボタン</title>
    <script>
        function handleClick() {
            document.body.style.backgroundColor = '#f8d7da'; // 薄い赤色に変更
        }
    </script>
</head>
<body>
    <button aria-hidden="true" onclick="handleClick()">このボタンはTABでフォーカスされません</button>
    <button onclick="handleClick()">通常のボタン</button>
</body>
</html>

6. 負の tabindex を持つ親要素内のボタン

親要素にtabindex="-1"が設定されていると、その子要素もフォーカスされない場合があります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>親要素に負の tabindex があるボタン</title>
    <script>
        function handleClick() {
            document.getElementById('message').textContent = 'ボタンがクリックされました！';
        }
    </script>
</head>
<body>
    <div tabindex="-1">
        <button onclick="handleClick()">このボタンはTABでフォーカスされません</button>
    </div>
    <button onclick="handleClick()">通常のボタン</button>
    <p id="message"></p>
</body>
</html>

7. contenteditable 属性が設定された要素内のボタン

contenteditable が設定された要素内のボタンは、フォーカスが親要素に奪われる場合があります。

  • 親画面: 子画面をiframeで埋め込みます。
  • 子画面: contenteditable属性が設定された要素内にボタンがあり、そのボタンがフォーカスを受け取らない状況を再現します。
  • 再現される事象: 子画面内のボタンを操作しようとすると、フォーカスが親画面に移ってしまう。

親画面 (parent.html)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>親画面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #message {
            margin-top: 20px;
            color: #007BFF;
            font-weight: bold;
        }
    </style>
    <script>
        function parentFunction() {
            document.getElementById('message').textContent = '親画面がフォーカスを受け取りました。';
        }
        // 親画面にフォーカスが当たったときのイベントリスナー
        window.addEventListener('focus', parentFunction);
    </script>
</head>
<body>
    <h1>親画面</h1>
    <p>以下に子画面が表示されています。</p>
    <iframe src="child.html" width="600" height="400" style="border: 1px solid #ccc;"></iframe>
    <p id="message"></p>
</body>
</html>

説明:

  • 親画面では、iframeを使用して子画面（child.html）を埋め込んでいます。
  • 親画面にフォーカスが当たったときにメッセージを表示するため、window.addEventListener('focus', parentFunction);を設定しています。

子画面 (child.html)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>子画面 - contenteditable 内のボタン</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .editable {
            border: 1px solid #ccc;
            padding: 10px;
            min-height: 100px;
        }
        #status {
            margin-top: 20px;
            color: #28a745;
            font-weight: bold;
        }
    </style>
    <script>
        function handleClick(button) {
            button.style.color = '#dc3545'; // 赤色に変更
            button.textContent = 'クリックされました！';
            document.getElementById('status').textContent = '子画面のボタンがクリックされました。';
        }

        // 子画面内でフォーカスが外れたときに親画面にフォーカスが移るように設定
        window.addEventListener('blur', function() {
            window.parent.focus(); // 親画面にフォーカスを戻す
        });
    </script>
</head>
<body>
    <h1>子画面</h1>
    <p>`contenteditable` 内のボタンをクリックするとテキストが変化します。</p>
    <div contenteditable="true" class="editable">
        <button onclick="handleClick(this)">このボタンはTABでフォーカスされません</button>
    </div>
    <button onclick="handleClick(this)">通常のボタン</button>
    <p id="status"></p>
</body>
</html>

説明:

  • 子画面では、contenteditable="true"が設定された<div>内にボタンがあります。
  • ボタンをクリックすると、テキストや色が変わり、下部にステータスメッセージが表示されます。
  • 子画面でフォーカスが外れたとき（例えば、ユーザーがTABキーを押したとき）に、window.parent.focus();を呼び出して親画面にフォーカスを移しています。

再現手順

  1. ファイルの配置:

    • 上記のコードをそれぞれparent.htmlとchild.htmlとして保存し、同じディレクトリに配置します。

  2. 親画面をブラウザで開く:

    • parent.htmlをブラウザで開きます。

  3. 子画面の表示確認:

    • 親画面内に子画面（child.html）がiframeとして表示されていることを確認します。

  4. ボタンの操作:

    • 子画面内の通常のボタン:
      • contenteditable外にある「通常のボタン」をクリックすると、ボタンのテキストが「クリックされました！」に変わり、ステータスメッセージが表示されます。
    • contenteditable内のボタン:
      • contenteditable内にあるボタンをクリックすると、同様にボタンのテキストと色が変わり、ステータスメッセージが表示されます。

  5. フォーカスの確認:

    • TABキーの操作:
      • 子画面内でTABキーを押してみてください。
      • ボタンがcontenteditable内にあるため、フォーカスがボタンに当たらず、フォーカスが親画面に移動します。
      • 親画面のメッセージ欄に「親画面がフォーカスを受け取りました。」と表示されます。

  6. 自動化ツールでの操作:

    • Blue PrismやUiPathなどの自動化ツールで、子画面内のcontenteditable内のボタンをクリックする操作を試みます。
    • 自動化ツールがボタンを正しく操作できない、またはフォーカスが親画面に奪われる現象が再現されます。

事象の説明

  • フォーカスの問題:

    • contenteditable属性が設定された要素内のボタンは、フォーカスが正しく当たらない場合があります。
    • 特に、iframe内にある場合や親子関係のある画面構造では、フォーカスが親画面に移ってしまうことがあります。

  • 自動化ツールでの影響:

    • 自動化ツールは通常、フォーカスを移動しながら要素を操作しますが、フォーカスが正しく当たらない場合、要素の特定や操作が困難になります。
    • その結果、ボタンのクリック操作が失敗したり、想定外の動作を引き起こす可能性があります。
    • 提供したサンプルコードを使用して、フォーカスが親画面に奪われる事象を再現できます。
    • 解決策として、要素の直接指定やJavaScriptの実行、tabindexの設定などを検討してください。

注意点

  • セキュリティ制限:

    • iframe間でのフォーカス制御や、window.parentを使用する場合、同一オリジンポリシーに注意が必要です。
    • 親画面と子画面が異なるドメインにある場合、スクリプトによる相互操作が制限されます。

  • ブラウザの違い:

    • ブラウザによっては、contenteditable内のフォーカス挙動が異なる場合があります。
    • クロスブラウザでのテストを推奨します。

確認方法

  • 手動でのクリック:

    • 各サンプルのボタンをマウスでクリックすると、指定した変化（テキストの変更、色の変化、アラートの表示など）が起こることを確認できます。

  • 自動化ツールでのクリック:

    • Blue PrismやUiPathなどの自動化ツールを使用して、各ボタンに対してクリック操作を行います。
    • 自動化ツールがボタンを正しくクリックできた場合、手動でのクリックと同様に変化が起こるはずです。
    • クリック操作が反応しない場合、変化が起こらないため、クリックが成功していないことがわかります。

補足説明:

  • サンプル4（CSSでフォーカス防止されたボタン）について:
    • pointer-events: none; が設定されているため、マウスイベントが無効化されています。このため、手動でのクリックも自動化ツールでのクリックも反応しない可能性があります。
    • 自動化ツールでクリックイベントを発生させる場合、JavaScriptを直接実行してクリックイベントをトリガーする方法を検討してください。

デモのポイント

  • 手動クリックと自動化ツールでのクリックの比較:
    • 手動でのクリックでは正常に動作するが、自動化ツールではクリックできない、またはその逆の場合、ボタンの構造や属性が影響していることを示せます。
    • これにより、ボタンがフォーカス不可能であることや、自動化ツールが特定の要素を認識できない理由を具体的に説明できます。

注意事項:

  • 自動化ツールでクリックがうまくいかない場合、要素の指定方法やクリックの実行方法を見直す必要があります。
  • 必要に応じて、JavaScriptを利用してクリックイベントを発生させる方法も検討してください。

解決策

  • 要素の直接指定:

    • 自動化ツールで、要素のXPathやCSSセレクターを使用して、直接ボタンを指定します。
    • フォーカスに依存しない操作を行うことで、問題を回避できます。

  • JavaScriptの実行:

    • 自動化ツールからJavaScriptを実行し、document.querySelectorなどでボタンを取得してクリックイベントを発火させます。
    document.querySelector('button').click();

  • tabindexの設定:

    • ボタンにtabindex="0"を設定すると、フォーカス可能になります。
    <button tabindex="0" onclick="handleClick(this)">このボタンはTABでフォーカスされます</button>

o1先生の思考

o1は考え中のときに、何を考えているのかもちょっと見せてくれるようになりました。
以下がその考え中タイムのテキストです。
ちなみに上記の一連を出してくれるまでの考え中タイムは26秒。速い。タメ口なのは至らない私のレベルに合わせて説明しようとしてくれているからか。そして突然ロシア語で考え始めるのは何故。

ブラウザの動作を見ている

TABを押してもフォーカスが当たらないボタンの構造と、Blue PrismやUiPathでの自動クリック方法を探る。

作成要件の見定め

ユーザーは、TABでフォーカスを受けないボタンのHTMLサンプルを作成しているね。уральные атрибуты="disabled" и "element is hidden or off-screen" не учитывать.

HTMLとボタンの焦点を確認

「TABでの焦点取得ができないボタン」に関して、HTMLコードを作成中。これまでに、tabindex、カスタムJavaScript、非フォーカスタブルタグの可能性を探ってきた。

「TABでフォーカスを受けないボタンのサンプルページを作成し、各事例を説明中」

誤りのないコードと、簡潔な説明を心掛ける。これにより、OpenAIのガイドラインに準拠している。

未フォーカス要素の取り組み

tabindexが-1、フォーカス不能タグ、カスタムJavaScriptを制御している要素のサンプルコードを作成している。

フォーカスを管理する

tabindex="-1"を使用すると、そのボタンはTABキーでフォーカスされなくなるのよ。非フォーカス可能な要素をボタンのように見せる方法もあるね。

ボタンのモーダル設定とタブ順序

フォーカスを防ぐボタンの実装

高いタブインデックスを設定したボタンは通常のタブ操作でフォーカスされない可能性がある。JavaScriptを使用してフォーカスイベントを防ぐボタンも考慮中。

CSSの特性を活用する

pointer-events: none;をボタンに追加すると、マウスイベントに反応しなくなるんだ。それにフォーカスの動作にも影響を与える場合があるんだよね。

aria-hidden="true"の使用

終わりです

  • 詳細な原因分析と、そのまま使えるレベルのカンペキなサンプルコード
  • デモをやるって言ったらデモ実施の手順から注意点まで教えてくれる親切対応

これもう並レベルの人間は不要になるのでは……？

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?