Unityを使わなくてもブラウザアプリが作れる！？Bridge.netの使い方

#前書き

　Unityを使わずに、C#からHTML5に変換するライブラリ「Bridge.net」のメモ書きです

　少し前からSFMLを使っていたのですが、クロスプラットフォームの利点を全然いかせてない気がして、
C#からクロスプラットフォームのHTML5に変換する方法を探していたところ、こういうライブラリを見つけました

　Bridge.netは、Google検索をしたところ、日本語情報が見つからないので、
この記事が数少ない日本語情報となるでしょうか

　この記事では、ライブラリの準備と使い方までを記述しています

#Deck.net
下記URLを開くと、Bridge.netを使ったテストプログラムを書くことができます
https://deck.net/

#準備
PCはWindowsで、またVisual Studioを使っていること前提の説明です
バージョン16.8.2時点での情報です

導入方法は３つあります
（Nugetからインストールするのが一番楽です）

##Nugetでインストール
Visual StudioのNugetの検索バーに「Bridge.net」を入力すると出る、
「Bridge」をインストールすると完了です
（インストール後に、”mscorlib.dllを参照しない”という設定に
自動でされてしまうので間違ってインストールしないように気を付けてください）

WebGLも使うのであれば、「Bridge.WebGL」も併せてインストールしましょう

(この方法ならば、Bridge.net関連のライブラリもインストールして導入することもできます)

##公式サイトからダウンロードする方法
１・まずは下のURLにアクセスします
https://bridge.net/

２・青字のDownloadボタンをクリックします

３・For Visual Studioの下のDownloadボタンをクリックします

４・緑色のDownloadボタンをクリックし、インストーラをダウンロードします

５・Bridge.NET.16.8.2.vsixをダブルクリックで起動します
６・インストールをクリックでインストールが開始されます。インストールが終わったら事前準備の完了です

##GithubからZipをダウンロードしてビルドする方法
↓からZipをダウンロードし解凍、できたプロジェクトファイルをビルドします
https://github.com/bridgedotnet/Bridge

（ソースファイルなどを改造してビルドすると、
mscorlib.dllを使うプロジェクトからでも参照できるようになるかもしれません）

#使い方
　準備を整えたら、Visual Studioを起動し、「ファイル」から「新しいプロジェクト」を選択すると、
項目に「Bridge.net」が出ます。そこの「Class Library」が、Bridge.netを使うためのプロジェクトテンプレートです
　このテンプレートを使って、新プロジェクトを作ったら、
コードを書いて、コンパイルすると、HTML5とJavaScriptに変換されます
（ビルド出力先の、bridgeフォルダ内のindex.htmlが実行ファイルです）

#使用できない機能（確認できたものだけ）

DllImport属性が存在しない（よってネイティブdllは使用不可）
System.IO.Fileは存在するものの、使用はできない←ローカル上のGoogleChromeでファイル読み込みエラーが出る
ポインタは使用不可
例外処理も使用不可←使えました
ローカル関数とValueTupleも使用不可←最新バージョンの17.0.0(ベータ版)をインストールすると使用可能
Nugetのライブラリは、使えない物が多い
（Bridge.netのdllはmscorlib.dllを参照していないため。
ただし、Bridge.net派生ライブラリやRetyped派生ライブラリは使用可能だが、
JSファイルが必要になるかもしれない）

＊JavaScriptでできないことは、このライブラリを使ってもおそらくできない＊
＊また、ブラウザによって動作が違うこともあります＊

#使い勝手を上げる方法
このライブラリに足りない機能はJSファイルを書くことで、処理を付け足すことが可能です

JSファイルは埋め込みリソース化したものを読み込むようにすると、出力されるindex.htmlを毎回書き換える必要がなくて楽

##JSファイルのリソース化方法
使いたいjsファイルのビルドアクションを「埋め込みリソース」にするだけ
これでプログラムでリソース読み込み処理で読み出すことが可能

#JSファイルを使った、機能の追加方法
Bridge.netやRetyped関連ライブラリに足りない機能は、
外部JSファイルを使うことで付け足したりできる

##外部jsファイルを使うサンプル

//こういうjsファイルを定義したとして・・・

/*

変数名は、C#コードで使用している名前空間と被らないようにすること！
被ってしまうと、どういうわけかエラーが出てしまう

*/
var JSTest = new Object();
JSTest.ScriptTestA = new Object();
JSTest.ScriptTestA.GetStr = function(){
	return "call Test.ScriptA";
};

using Bridge;
using Bridge.Html5;
using System;
using System.Text;

namespace Test {
	static class Program {
		//文字コードは、UTF8
		static Encoding ScriptCharCode => Encoding.UTF8;

		//Main関数が最初に実行される
		static void Main() {
			LoadEmbedScripts();
			JSCallTest();
		}
		//リソースを読み出し、
		//Scriptタグを動的に定義する処理
		static void LoadEmbedScripts() {
			//リソースが埋め込まれたアセンブリを取得する
			var asm = System.Reflection.Assembly.GetExecutingAssembly();

			//アセンブリ内のリソースを全て読み出す
			foreach (var i in asm.GetManifestResourceNames()) {
				//リソースをbyte配列で取得
				var datas = asm.GetManifestResourceData(i);
				//byte配列をString型に変換
				var js = ScriptCharCode.GetString(datas);

				//↓を実行することで埋め込んだスクリプトを使えるようになる
				Document.Head.AppendChild(new HTMLScriptElement { TextContent = js });
			}
		}

		//読み込んだスクリプトを使う
		static void JSCallTest() {
			Console.WriteLine(JSTest.ScriptTestA.GetStr());
		}
	}
}

//jsファイルの関数をインポートするクラスがある名前空間は、
//他の名前空間と被らないように注意！
//被ってしまうと、どういうわけかエラーが出てしまう
namespace JSTest {
	//使用するJsファイルを使えるようにするためのクラス
	//
	//jsファイルに定義した、
	//JSTest.ScriptTestA.GetStr()のインポート
	[External]
	static class ScriptTestA　{
		//インポート対象の関数には、
		//Bridge.External属性を指定し、
		//extern修飾子とstaticをつける
		//
		//関数内部処理は書かない
		[External]
		public static extern string GetStr();
	}
}

#注意点
　デスクトップアプリかブラウザアプリのどちらか１つだけあればいいという場合は、
このライブラリは使わないほうがいいです

　このライブラリを使う場合は、ブラウザ用として作るのが手間がなくていいと思います
どうしてもデスクトップ用も作りたいという場合は、
ソースファイルのリンク機能や条件コンパイルなどを駆使して、
デスクトップアプリ用の処理とブラウザアプリ用の処理を書きましょう

#使用感

　HTML5とJavaScriptの知識と、C#を書けるスキルがあれば問題なく使えるってところでしょうか
JavaScriptを書かずとも、C#でウェブアプリが作れるのがいいところでしょう

　問題は、大体のマネージdllを使用できないというのが厄介なのと、
このライブラリと別のGUIライブラリを使って
デスクトップ用とブラウザ用を両方作るというのはかなり厳しいということですね・・・
　ブラウザアプリ作るためのライブラリでしょうから仕方ないですね
第一、デスクトップアプリではできることも
ブラウザアプリだとできないということもあるので・・・

#有望なプロジェクトなど
・MonoGame On Web
https://github.com/MonoGame/MonoGame/issues/3895
Monogameを使用したコードを
HTML5に変換するライブラリ

#最後に
　このライブラリだけでなく
HTML5もJavaScriptも分からないことが多いので、
もう少し検証したいと思います

　元のブログ記事（一応）
http://mini09memo.blog.fc2.com/blog-entry-357.html