We

ししあか


アプローチ

WebView2の`ExecuteScriptAsync`メソッドを使用して、C#からJavaScriptを実行し、セルとヘッダの内容を取得します。ダブルクリックイベントはC#側で設定し、イベント発生時にJavaScriptを実行して必要な情報を取得します。

以下に実装例を示します。

1. HTMLファイルの準備

既存のHTMLファイル（例: `table.html`）を用意します。このファイルにはJavaScriptを追加しません。

<!DOCTYPE html>
<html>
<head>
    <title>Table Example</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
            </tr>
            <tr>
                <td>Cell 3</td>
                <td>Cell 4</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

2. C#コードの実装

C#コードでWebView2を初期化し、HTMLファイルを読み込み、ダブルクリックイベントを設定します。ダブルクリックイベント発生時にJavaScriptを実行してセルとヘッダの内容を取得します。

using System;
using System.IO;
using System.Windows.Forms;
using Microsoft.Web.WebView2.Core;

namespace WebView2Example
{
    public partial class MainForm : Form
    {
        public MainForm()
        {
            InitializeComponent();
            InitializeWebView2();
        }

        private async void InitializeWebView2()
        {
            // WebView2の初期化
            await webView2.EnsureCoreWebView2Async();
            webView2.CoreWebView2InitializationCompleted += WebView2_CoreWebView2InitializationCompleted;
        }

        private void WebView2_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
        {
            if (e.IsSuccess)
            {
                // HTMLファイルのパスを取得
                string htmlFilePath = Path.Combine(Directory.GetCurrentDirectory(), "table.html");
                // HTMLファイルを読み込む
                webView2.CoreWebView2.Navigate(htmlFilePath);

                // ダブルクリックイベントを設定
                webView2.CoreWebView2.DOMContentLoaded += (s, ev) =>
                {
                    SetDoubleClickEvents();
                };
            }
        }

        private async void SetDoubleClickEvents()
        {
            // セルにダブルクリックイベントを設定
            string script = @"
                document.querySelectorAll('td').forEach(cell => {
                    cell.addEventListener('dblclick', event => {
                        let cellIndex = event.target.cellIndex;
                        let rowIndex = event.target.parentElement.rowIndex;
                        let header = document.querySelector(`th:nth-child(${cellIndex + 1})`).textContent;
                        let cellText = event.target.textContent;
                        chrome.webview.postMessage({header: header, cell: cellText});
                    });
                });
            ";
            await webView2.CoreWebView2.ExecuteScriptAsync(script);

            // メッセージ受信イベントを設定
            webView2.CoreWebView2.WebMessageReceived += CoreWebView2_WebMessageReceived;
        }

        private void CoreWebView2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
        {
            string messageJson = e.TryGetWebMessageAsString();
            dynamic message = Newtonsoft.Json.JsonConvert.DeserializeObject(messageJson);
            string headerContent = message.header;
            string cellContent = message.cell;

            MessageBox.Show($"Header: {headerContent}\nCell: {cellContent}");
        }

        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            Application.Run(new MainForm());
        }
    }
}

実装のポイント

  • HTMLファイルの読み込み:

    • `Navigate`メソッドを使用して、ローカルのHTMLファイルをWebView2に読み込みます。

  • JavaScriptの実行:

    • `ExecuteScriptAsync`メソッドを使用して、C#からJavaScriptを実行し、HTML内のセルにダブルクリックイベントを設定します。

    • ダブルクリックイベントが発生した際に、JavaScriptからC#にメッセージを送信します。

  • C#でのデータ受信:

    • `CoreWebView2.WebMessageReceived`イベントをハンドルし、JavaScriptから送信されたメッセージを受信します。

この方法により、既存のHTMLファイルを読み込み、C#側でJavaScriptを実行してセルとヘッダの内容を取得

JavaScriptの内容

document.querySelectorAll('td').forEach(cell => {
    cell.addEventListener('dblclick', event => {
        let cellIndex = event.target.cellIndex;
        let rowIndex = event.target.parentElement.rowIndex;
        let header = document.querySelector(`th:nth-child(${cellIndex + 1})`).textContent;
        let cellText = event.target.textContent;
        chrome.webview.postMessage({header: header, cell: cellText});
    });
});

このJavaScriptコードは、HTMLテーブルのすべてのセルにダブルクリックイベントを設定し、セルがダブルクリックされたときにそのセルの内容と対応するヘッダの内容を取得してC#に送信するものです。

各部分の詳細説明

要点のまとめ

  • イベントリスナーの設定: HTML内のすべてのセルにダブルクリックイベントを設定します。

  • セルのインデックスと内容の取得: ダブルクリックされたセルの列インデックスとそのテキスト内容を取得します。

  • 対応するヘッダの内容の取得: セルの列インデックスに基づいて、対応するヘッダのテキスト内容を取得します。

  • メッセージの送信: `chrome.webview.postMessage`を使用して、取得したヘッダとセルの内容をC#に送信します。

このようにして、C#側でセルのダブルクリックイベントを処理し、必要なデータを取得することができます。



この記事が気に入ったらサポートをしてみませんか？