質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

10632閲覧

html(javascript)とc#の連携方法を教えてください

RyojiAraki

総合スコア79

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/10/06 17:34

したいこと

c#ですでに書いたコードをwebページ上で作動させたくて、html→javascript→c#の手順なら反映できると考えて進めていたのですが、javascriptとc#を連携させる方法がいまいちピンときません。どういったコードを組めば連携できるのか教えてください。できればソフトのインストールなどが必要ない手段がいいです。

試してこと

いろんな記事を漁ってみたところ、このページに辿り着きました。
Webview C#とJavascriptの連携
いってることが全然理解できないです。。。
Q1:この記事は正しい情報(htmlでc#を起動させる方法)を述べてますか?
Q2: どのレベルまで勉強したら理解できますか?
Q3: みなさんはこういった知識をどのように得ましたか?
ご回答よろしくおねがいいたします。

ソースコード(webページの)

c#

1using Microsoft.Web.WebView2.Core; 2using Microsoft.Web.WebView2.WinForms; 3using System; 4using System.Runtime.InteropServices; 5using System.Windows.Forms; 6 7namespace SampleWebView2Form 8{ 9 public partial class Form1 : Form 10 { 11 /// <summary>webviewのコントロール(わかりやすい様に、デザイナーを使わずにコード側で実装します。)</summary> 12 private WebView2 WebView = new WebView2 13 { 14 //個人の環境に合わせて下さい 15 Source = new Uri("file:///C:/Users/name/Desktop/sample.html"), 16 }; 17 18 /// <summary>JavaScriptで呼ぶ関数を保持するオブジェクト</summary> 19 private JsToCs CsClass = new JsToCs(); 20 21 public Form1() 22 { 23 this.Controls.Add(WebView); 24 InitializeComponent(); 25 26 //WebView2のサイズをフォームのサイズに合わせる 27 WebView.Size = this.Size; 28 this.SizeChanged += Form1_SizeChanged; 29 30 //WebView2のロード完了時のイベント 31 WebView.NavigationCompleted += WebView_NavigationCompleted; 32 } 33 34 /// <summary>WebView2のロード完了時</summary> 35 private void WebView_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e) 36 { 37 try 38 { 39 if (WebView.CoreWebView2 != null) 40 { 41 //JavaScriptからC#のメソッドが実行できる様に仕込む 42 WebView.CoreWebView2.AddHostObjectToScript("class", CsClass); 43 44 //JavaScriptの関数を実行 45 CsToJs(); 46 } 47 else MessageBox.Show("CoreWebView2==null"); 48 } 49 catch(Exception ex) 50 { 51 MessageBox.Show(ex.ToString()); 52 } 53 } 54 55 /// <summary>Jsのメソッドを実行</summary> 56 private async void CsToJs() 57 { 58 //WebView.ExecuteScriptAsync("func1()").ResultをするとWebView2がフリーズする 59 string str1 = await WebView.ExecuteScriptAsync("func1(\"C#からの呼び出し\")"); 60 MessageBox.Show("Jsからの戻り値>" + str1); 61 } 62 63 /// <summary>サイズ変更時のイベントでWebView2のサイズをフォームに合わせる</summary> 64 private void Form1_SizeChanged(object sender, EventArgs e) 65 { 66 WebView.Size = this.Size; 67 } 68 } 69 70 //↓属性設定が無いとエラーになります 71 /// <summary>WebView2に読み込ませるためのJsで実行する関数を保持させたクラス</summary> 72 [ClassInterface(ClassInterfaceType.AutoDual)] 73 [ComVisible(true)] 74 public class JsToCs 75 { 76 public void MessageShow(string strText) 77 { 78 MessageBox.Show("Jsからの呼び出し>" + strText); 79 } 80 } 81}

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> 5 <script language="javascript" type="text/javascript"> 6 //C#から呼び出すための関数 7 function func1(str1) { 8 alert("C# called>" + str1); 9 return "success" 10 } 11 function ButtonClick() { 12 //C#の関数の実行 13 chrome.webview.hostObjects.class.MessageShow("Js send text"); 14 } 15 </script> 16</head> 17<body> 18 <h1>sample</h1> 19 <input type="button" value='send Message' onclick="ButtonClick();"/> 20 <script></script> 21</body> 22</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/10/06 21:37 編集

webviewはブラウザみたいなものなので、それとHTML、JavaScriptは全く切り離されるのではないかなと・・・ ブラウザみたいなものなので表示されてるページからwebviewをコントロールしているアプリには作用できません。 WebMVCでWebページを表示させてるなら可能でしょうけど。 結局JavaScriptでC#をどう使いたいか次第になります。
退会済みユーザー

退会済みユーザー

2021/10/06 23:41 編集

> javascriptとc#を連携させる方法がいまいちピンときません。 そもそも連携させて何がしたいのか具体的に例を挙げるなどして説明できませんか。 そうしてもらえないと、javascript と C# の違いなど基本的なことが良く分かってなさそうですので、話が発散すると思います。 逆に、そうしてもらえれば、連携の先にある質問者さんの真にやりたいことに沿ったピンポイントの回答が出てくるかも。
dodox86

2021/10/06 23:08

現時点の質問内容に関しては現状いただいているご回答で合致し、完成していると思えます。ここで前提と論点を変えるとそれこそ収拾がつかなくなり、閉じない質問になる恐れがあります。最終的にやりたいことを明らかにするのは良いことだと思いますが、整理し、本質問から発展した別の質問として投稿するのが良いと考えます。
dodox86

2021/10/06 23:17

しかし思うのですけど、自分のやりたいことに合っているのかどうかということであるのに、「この記事は正しい情報なのか?」とは記事の主さんに失礼な物言い。
退会済みユーザー

退会済みユーザー

2021/10/07 00:06 編集

> 現時点の質問内容に関しては現状いただいているご回答で合致し、完成していると思えます。 自分はそうは思ってないから聞いているのです。 質問の、 > c#ですでに書いたコードをwebページ上で作動させたくて が dodox86 さんは分かってますか? 「c#ですでに書いたコード」って何でしょう? 私は分かりません。不可能なことを考えているのではと思いました。
退会済みユーザー

退会済みユーザー

2021/10/07 00:08 編集

例えば「c#ですでに書いたコード」というのが C# の WinForms アプリで DB の CRUD を行うようなものであれば、webview アプリも Blazor アプリも最適解にはならず、根本的に考え直して ASP.NET web アプリ (サーバー側のコードは C# で書ける) が解になるかもしれません。
dodox86

2021/10/07 00:15

@SurferOnWwwさん > > c#ですでに書いたコードをwebページ上で作動させたくて > > が dodox86 さんは分かってますか? 「c#ですでに書いたコード」って何でしょう? 私もこの質問を読んだ当初分かりませんでしたが、質問文中に「ソースコード(webページの)」とあります。これは、質問者さんが自分で書いたものではなく、参考にされた記事からそのまま引用したC#のコードを指しています。これをもって「C#で既に書いたコード」と言っていると判断しました。 しかし指摘を受けて更に考えてみると、実はまだこの質問文中には示していない、質問者さんが抱えている質問者さん”自身”が既に書いたオリジナルの"C#のコードがあるのかもしれません。これは現時点では分かりません。
dodox86

2021/10/07 00:39 編集

質問の本筋がQiitaの記事が質問者さんの要望に合致するか否かを問うているものに思えるので読み誤まった気がしますが、質問者さんが独自に書いた、WEBページ上で動作させてたいC#のコードがあるのですね。質問を読み直すごとに着地点が分からなくなりました。 尚、私が「完成している」と思ったのは、質問文中のQ1~Q3に対してそれぞれ対応されているご回答と捉えたからです。
退会済みユーザー

退会済みユーザー

2021/10/07 00:41

> 質問者さんが抱えている質問者さん”自身”が既に書いたオリジナルの"C#のコードがあるのかもしれません。これは現時点では分かりません。 であれば、先の dodox86 さんのレスの、 > 現時点の質問内容に関しては現状いただいているご回答で合致し、完成していると思えます。 とはまだ言えないと思いますけど。
退会済みユーザー

退会済みユーザー

2021/10/11 00:07

質問者さん、無言ですが、質問へのコメント・回答がついているのでそれら対するフィードバックを書きましょう。無言で放置は普通に&社会常識的にマナー違反と思いませんか。
RyojiAraki

2021/10/22 15:16

すみませんでした。最近忙しくて。。。
guest

回答1

0

ベストアンサー

Q1:この記事は正しい情報(htmlでc#を起動させる方法)を述べてますか?
Q2: どのレベルまで勉強したら理解できますか?
Q3: みなさんはこういった知識をどのように得ましたか?

  1. 「正しい」とは?そのコード動かして、ちゃんと動いてるのであれば、それ以上の「正しさ」って何?
  2. 「レベル」とは?どういう定義?10年やっても理解できない人はできないとは思うけど。
  3. リファレンスと技術系サイトやブログの記事読む。

そもそも論として

c#ですでに書いたコードをwebページ上で作動させたくて

参照している記事はWinFormsアプリにブラウザコンポーネントを載っけて、そのブラウザコンポーネントの操作を介してJavaScriptとの相互運用をしているものであり、「webページ上」って言って通常思い浮かべるものとは全然違う。言ってみればこれはブラウザ(のコアな部分)そのものを部品として乗っけて操作するデスクトップアプリでしかない。

普通のブラウザで表示するモノでC#を「ブラウザ上で」動かしたいなら、Blazor WebAssemblyという技術を使う。

これについて知りたいのであれば公式に載ってるし、読んで理解できないなら初心者向けの解説記事を読むなり本を買って勉強するなりして疑問に思うところをもっと明確に説明できるようになってからここで聞けば良いんじゃない。
Blazor JavaScript の相互運用性 (JS 相互運用)

投稿2021/10/06 20:44

gentaro

総合スコア8949

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

RyojiAraki

2021/10/22 15:17

Blazorいい感じに動きます!回答して頂きありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問