投稿

10月, 2021の投稿を表示しています

C# WebView2.ExecuteScriptAsync()のいくつかの使い方とDebug方法

イメージ
先日はHTMLページのスクリプトとWebView2の間の通信について触れました。 WebView2を通じてWebサーバーなしでJavaScriptからローカルファイルを読み書き HTMLページそのものは自分が作成したもので、よってスクリプトも自分の好きなようにHTMLファイルで指定できました。 しかし、もしページが自分のサイトでない場合、最初からページスクリプトの指定ができないため、拡張機能のようにContent Scriptをinjectしなければなりません。 WebView2は ExecuteScriptAsync メソッドを提供していますので、いくつかの基本的な使い方を試したいと思います。 目次 WebView2.ExecuteScriptAsyncメソッドの定義 テスト環境の準備 WebView2.ExecuteScriptAsyncメソッドの使い方 1. Script文字列をそのまま実行、戻り値なし。例: <body> 背景色を変更 2. Script文字列をそのまま実行、戻り値あり。例:HTML取得 3. JavaScriptファイルを読み込んで実行、戻り値あり。例: <img> の src を取得 4. JavaScriptファイルを読み込んで実行、戻り値あり、JS側パラメーターあり。例:C#で背景色を指定してJS側で変更 ExecuteScriptAsync を使うときのDebug方法 感想 WebView2.ExecuteScriptAsyncメソッドの定義 Task< string > ExecuteScriptAsync ( string javaScript ) ; 現在WebView2に表示されているページに string javaScript をinjectして実行する。 実行の結果を await すればJSONエンコードされた string が返される。 テスト環境の準備 Visual Studio Community 2022 WinForms プロジェクト@.Net 5 WebView2を初期化する async void InitWebViewAsync ( ) { //WebView2を初期化する await wv

Chrome/Edge拡張機能を作ってブログ記事のHTMLをチェックする

イメージ
目次 背景 何をなぜチェックするのか <img> タグの alt (代替テキスト)属性が設置されているか <img> タグの title 属性を設置しているか <a> (Anchor アンカー)の target 属性が _blank になっているか 拡張機能の完成イメージ エラーの表示方法 チェックレポートのイメージ チェック前後のページ比較 作る前にまず一般的な拡張機能の構成を理解しよう 1. manifest.json(必須) 2. backgroundスクリプト(オプション) 3. Content Script(オプション) 4. Popup(オプション) ブログ記事をチェックする拡張機能を作る 今回の拡張機能の構成 manifest.json Content Script: BloggerPageChecker.ts tscでコンパイルしてブラウザーで開く その他の参考情報 TypeScriptを使う場合は@types/chromeを使うと便利 今から作る拡張機能はManifest V3で作りましょう ブラウザのDevToolsを活用しましょう 後書き 背景 自分はプログラミング言語に関しては、基礎をある程度理解してから、使うときに使う部分だけ勉強するとうスタイルです。 知識の断片をつなぎ合わせてちゃんとプログラムを動作させられても必ずbest practiceとは限りません。 最近ブログの記事を書くにはHTMLをよく扱うようになって、Google Adsenseに申請するためにいろいろ調べたら、HTMLは意外と奥深いことが分かりました。 例えば <img> タグの alt 属性、なくてもブラウザーが許してくれても検索インデックス作りに支障が出るとか、様々なルール・規範があります。 完璧さを追求しないとしても、分かる範囲で極力正しいコードを書こう!という自覚はありますが、人間はミスする動物ですので、ルールを守っているつもりでも忘れたりします。 あとでいちいちチェックするのも面倒ですし、すべてのミスを発見できるとも保証できません。 人間のしたくないことはコンピューターにさせよう! ということで、ブログの記事の

C# 外部ライブラリを使わずに半角→全角カタカナ変換

イメージ
C#で半角カタカナを全角に変換する必要が出てきて、ネットで調べてみたらVB.NETの関数や他のライブラリを使って変換する方法が多いようです。 なんとなくしたくないから、試行錯誤しながらなんとかできるようになりました。 TL;DR 簡単に言えば、半角と全角の辞書を作って正規表現でマッチするだけですが、正規表現を使うときに罠があって試行錯誤しました。 辞書を作るといえば、力仕事のように聞こえますが、Excelで簡単に作れますし、一回作っておけばずっと使えるから別に手間だと思いませんでした。 目次 半角→全角カタカナの辞書を作る Excelで辞書の本体を簡単に作る ExcelからC#ソースにコピペして辞書完成 変換関数を作る 試行錯誤 間違い修正して完成 半角→全角カタカナの辞書を作る Excelで辞書の本体を簡単に作る Excelで全角の ア だけ入力して、その他は全部数式で自動生成します。    こんな感じになります: ExcelからC#ソースにコピペして辞書完成 長いので折りたたんでおきます。 コードはこちらです。 Dictionary< string , string > dictKatakana = new Dictionary< string , string > () { { "ア" , "ア" }, { "ィ" , "ィ" }, { "イ" , "イ" }, { "ゥ" , "ゥ" }, { "ウ" , "ウ" }, { "ェ" , "ェ" }, { "エ" , "エ" }, { "ォ" , "ォ" }, { "オ" , "

C# VSTO Add-inでWordのルビをHTMLのタグに変換する

イメージ
HTMLの <ruby> タグを漢字のふりがなを表示するために時々使っていますが、結構便利です。 ただ、いちいちHTMLコードを書くのが面倒で、何か良い方法がないかと考えたときに、Wordが目に入りました。 Wordにもルビを振る機能があって、しかも半自動的にふりがなをつけてくれます。Wordでルビを振った文章をHTMLコードに変換する簡単なWord Add-inを作りました。 目次 完成形と使い方 画面イメージ 使用手順 出力されたHTMLコード ブラウザーでの表示効果 まずHTMLの <ruby> タグの使い方を知る 互換性を考慮した使い方(今回これを使う) 互換性を考慮せずシンプルな使い方 そしてWordの文書構造を理解する Characterを理解する ルビと漢字のデータ構造を知る Wordの漢字とルビデータを元データから分離する いよいよ実装する Visual Studioでプロジェクトを作成する プロジェクトにRibbonを追加する Ribbonのcsソースファイルでの準備 ボタンのClickイベントを実装する F5を押してDebugする、問題がなければ完了 その他 完成形と使い方 画面イメージ 完成形はWordにMy Toolsというリボンタブが追加されて、中に Export<Ruby> ボタンがあります。  使用手順 Wordでルビを振る文章を用意し、Wordのルビ機能を使ってルビを振ります。 出力したい部分を選択して Export<Ruby> を押します。 これでHTMLコードがクリップボードにコピーされます。 出力されたHTMLコード < ruby > 今日 < rp > ( </ rp > < rt > きょう </ rt > < rp > ) </ rp > </ ruby > は < ruby > 良 < rp > ( </ rp > < rt > よ </ rt > < rp > ) </ rp > </ ruby

WebView2 Runtimeが見つからないエラー 解決法一例(凡ミスだった)

イメージ
TL;DR プロジェクトのTarget Frameworkの .Netのバージョンを変えると、出力のフォルダー名も変わるため、Windows Securityでのコントロールされたフォルダーへのアクセス制限除外設定が無効になる。 "XXファイルが見つからない"のようなエラーが出たときはまずWindows Securityにブロックされているかをチェックすべき。 ブロックされているとしても、時々Windowsの通知が遅れたりするので、気づかないときもある。 エラー発生時の状況 先日Visual Studio 2022 RCを入れるまえに、VS2019をアンインストールしました。 そのときに .Net Core 3.1も一緒に削除されました。 久しぶりにある自作のアプリを使おうとしたら、".Net Core 3.1がないよ"と怒られ、起動できませんでした。 自分用のアプリは一部 .Net Framework依存のもの以外、ほとんど .Net 5への移行が完了していますが、このアプリはし忘れていました。 さて、これを機にアップグレードしようかと思い、プロジェクトを開き、"Target Framework"を .Net 5に設定しました。 このアプリはWPFアプリで、WebView2の古いバージョン1つしかコントロールがありません。機能もシンプルなので、何も修正せずに移行できるとなんとなく自信がありました。 ついでにNuget ManagerでWebView2も最新のものにアップデートして、待ちきれずにF5を押してDebugを実行したら、まさかのエラーが出ました~~  エラーの詳細 Microsoft.Web.WebView2.Core.WebView2RuntimeNotFoundException HResult=0x80131500 Message=Couldn't find a compatible Webview2 Runtime installation to host WebViews. compatible 、互換性のあるWebView2 Runtimeが見つからなかったと、WebView2のRuntimeはEvergreen方式で常に最新のものに保てて、こ

モンテカルロ法で面積を求めてみる(C# WinForms)

イメージ
SF小説『三体』の三部作は数年前に読了しましたが、最近は少しずつ読み返していて、再び モンテルカルロ法 が目に入りました。 不規則な形状の面積を求めるときに乱数を使う方法として本に登場しました。 調べてみたら、結構いろいろな領域で広く使われている方法で、私にとっては難しいのですが、本当に面積を求められるかどうか、素人なりに検証してみようと思いました。 目次 『三体』に出たモンテカルロ法とは シミュレーション用のC#でアプリを作成 まず正方形で試してみる 次は不規則な形状が登場! テスト条件による誤差結果 結論 感想 『三体』に出たモンテカルロ法とは 原文の引用はここで省略するとして、私の理解では大体こんな感じです: 不規則な形状の面積を求めるには、まずその形状を形の規則な範囲内に置いて、その範囲内に向けてランダムにボールを投げる。ひとつの点には最大1回投げられる。ある一定数を投げた後に、形状内と形状外に落ちたボールの数を統計して、その数の比率で面積を計算する。 つまり、計算式はこうなります: 形状の面積 = 範囲の面積 × 形状内ボール数 / 投げたトータルボール数 一般的に、不規則な形状の面積を求めるには、それを出来るだけ数多くの規則な形状に切り分けて、積分で計算する方法だと思いますが、モンテカルロ法は 確率 を利用するので、自分にとっては新鮮です。 『三体』アマゾンページ シミュレーション用のC#でアプリを作成 早速こんなアプリを作りました。WinForms@.Net 6です。  主に以下の機能があります: 形状を生成する機能 テストのために300 x 300ピクセルの正方形と、ランダムに不規則な形状を生成する2つの機能があります。 正方形生成ソースコード private void FillRect ( int wid, int hei, Graphics g ) { int x = new Random().Next( 0 , picBox.Width - wid); int y = new Random().Next( 0 , picBox.Height - hei); g.FillRectangl

C# WebView2を通じてWebサーバーなしでJavaScriptからローカルファイルを読み書き

イメージ
TL;DR Webサーバーを使用せずに、 file:/// でブラウザーで開かれたhtmlファイルは、JavaScriptからPCのファイルシステムにアクセスできない。 WebView2コントロールにhtmlファイルを読み込み、JavaScriptがメッセージでWebView2に指示すれば、.Netの System.IO を利用してPCファイルの読み書きが可能になる。 目次 完成イメージ わざわざC#とJavaScriptを組ませた理由 WebView2とは Step 1. プロジェクト作成 Step 2. page.htmlを作成 step 3. page.jsを作成 step 4. C#アプリ側を実装 NuGetでWebView2をインストール FormにWebView2コントロールを追加 MessageのクラスをJavaScript側と一致するように定義 MessageのStringをMessageクラス型に変換する関数を定義 FileをSaveとOpenする関数を定義 WebViewを初期化する関数を作成 最後はWebView2を初期化し、メッセージに対する挙動を指定 参考:Debug方法 C#側のDebug方法 JavaScript側のDebug方法 後書き 完成イメージ このアプリ例は以下の3つの部分に構成されている: C#で書いたWinFormsアプリ → Formに含まれるControlは WebView2 のみ Page.html → 上記WebView2のソースに指定 Page.js → 上記htmlファイルの script タグの src に指定 わざわざC#とJavaScriptを組ませた理由 確かにC#のアプリを作ればファイルシステムへのアクセスはし放題で、わざわざJavaScriptと組んでやる必要がないと思います。 自分も個人用のアプリはほとんどC#だけで作れたのですが、この前ひとつ不便を感じたので、この方法にたどり着きました。それは、 HTMLコードを生成させる機能 を実装するときでした。 C#で絶対できないわけではないのですが、やはりJavaScriptからHTMLコードを生成したほうが楽だと感じました。 ただ、自分はWebサーバーを立ち上げる