スポンサーリンク

今から３分で，IE 上で .NET のDLLを動かそう （ブラウザ上で C# のコードを動かす方法）

.NET C# ブラウザ javascript n分 hack プログラミング

今から３分で，Webページ上で，Microsoft .NET のコードを動かそう。

JavaScriptにできない事も，.NETなら可能になる。


今回は，Windowsアプリ用のUI部品（カレンダー）を，Webページ上で使ってみる。



メモ帳さえあればよい。

  • Visual Studioは不要。
  • .NETの詳しい知識も不要。

なぜなら，あなたのPCには，すでに .NET のコンパイラが搭載されているから。


手順は以下の通り。



では，今から３分間で，実際にやってみよう。


（１）.NET Frameworkのフォルダへ移動

下記のフォルダに移動する。

C:\WINDOWS\Microsoft.NET\Framework\v1.1.4322

「v1.1.4322」の部分は，PCによって異なるかもしれない。



※フォルダが無かった人

→.NET Frameworkがインストールされていません。お疲れ様でした。


（２）DLLのソースコードをメモ帳で作成

メモ帳（あるいは好きなテキストエディタ）で，以下のコードをコピペして，ファイルを保存。


SampleDll.cs

using System;

namespace SampleNameSpace
{

	// HTML上でカレンダーを表示するためのクラス。
	public class SampleDatePicker : System.Windows.Forms.DateTimePicker
	{
		// コンストラクタ
		public SampleDatePicker()
		{
			// 初回表示時のセットアップを行なう。
		
			// カレンダーの背景色
			this.CalendarMonthBackground = System.Drawing.Color.Gainsboro;
			
			// カレンダーではなく，スピンアップボタンを利用する場合
			//this.ShowUpDown = true;
		}
		
		
		// JavaScript用に，日付を文字列で返すメソッド（プロパティ）
		public string DateForJS
		{
			// getterのみ定義する
			get
			{
				// ToString()だと時刻も含まれる
				return Value.ToShortDateString();
			}
		}
	}

}

解説URLは，あとで見ればよい。

using System; で，.NET framework の標準ライブラリの利用を指定する
http://ufcpp.net/study/csharp/st_libr...
http://www.stackasterisk.jp/tech/dotN...

  • usingディレクティブを使えば，名前空間を完全修飾しなくてよくなるので，コードが書きやすい。
  • C言語で，何はともあれまず include stdio.hするのと同じように，C#ではとりあえず using System; する。


システム定義色の一覧
http://www.kanaya440.com/contents/tip...

（３）DLLとしてコンパイル

コンパイラのファイルパスは

C:\WINDOWS\Microsoft.NET\Framework\v1.1.4322\csc.exe

である。

このcscというコンパイラを，CUIで呼び出せばよい。


「exeではなくdllがほしい！」という意思表示のため，コンパイルオプションには， /target:library を付ける。

具体的には，コマンドプロンプトから，下記コマンドを実行する。

csc.exe /target:library SampleDll.cs

一瞬でコンパイルが完了し，SampleDll.dll が生成される。



※他ディレクトリからcsc.exeを呼び出す場合は，そのフォルダ内にあるライブラリを参照するために

csc.exe /target:library -r:System.Windows.Forms.dll SampleDll.cs

みたいに，利用するクラスライブラリをコンパイルオプションで指定する必要がある。


（４）サーバ上にDLLを配置（置くだけ）


前項で出来上がったSampleDll.dllを，Webサーバの公開ディレクトリ上に置く。

  • Apacheなら，htdocs配下
  • Ruby on Railsなら，public配下


サーバ側のOSは何でもよい。（LinuxとかでもOK）

クライアント側が.NET FrameworkつきのIEであれば，とにかく動く。


（５）サーバ上にHTMLを配置して，DLLを呼び出す

DLLと同じフォルダ上に，以下のHTMLを設置。


hoge.html

<html>
<body>
	
	<object id="fuga" height="150" width="150"
		 classid="SampleDll.dll#SampleNameSpace.SampleDatePicker">
		ご利用のブラウザでは，.NET Frameworkがサポートされていません。
	</object>
	
	
	<input type="button" value="表示中の日付を取得" onclick="f()">
	
	
	<script language="JavaScript">
	// カレンダーコントロールから日付を取得して，アラート表示します。
	function f()
	{
		var s = document.getElementById("fuga").DateForJS;
		alert( s );
	}
	</script>
	
</body>
</html>
  • CLASSID の部分は、「ファイル名#名前空間.クラス名」という風に指定する。
  • ローカルファイルは指定できない。HTTPでアクセスしているサーバ上のファイルのみ。

（６）IEでWebページを開いてみる


http://localhost/hoge.html

を，IEで開く。


以下のような画面が表示される。



.NETが生成したカレンダーから，日付を選択できる。



隣のボタンを押すと・・・



JavaScriptから，DLLの中のメソッドを呼び出す事により，ちゃんと値を取得できる。



ブラウザ上で.NETのコンポーネントが動作し，JavaScriptと連携できているのだ。


特に「JavaScriptと連携可能」というのはインパクトが大きい。

JavaScriptの限界を，.NETで補うことが可能になるからだ。




※サンプルを見れます。↓

http://www.name-of-this-site.org/codi...

（補足１）この技術に関する詳細

以上でわかったように，.NET Frameworkのコードは，IE上で，Webページの一部として動作できる。


この事を，

  • 「IEで.NETアプリケーションをホストする」
  • 「IE上でWindows フォームコントロールをホストする」

と描写する。


ググる際には，「IE マネージドコード」などのキーワードで検索する。


以下は，この技術に関する参考リンク。さらっと読めば概要がわかる。


簡単にまとまっているもの：

C#/ActiveX
http://www.shise.net/wiki/wiki.cgi?pa...

  • ブラウザ上のHTMLで実行されるActiveXの作り方。簡単に言うと、.NET版アプレット。
  • IE限定。.NET Framework が必要。
  • 更新した場合は、リロード（F5，Ctrl + F5）では読み直されない。ブラウザの再起動が必要。


詳しいもの：

Internet Explorer を使用したランタイム アプリケーションの配置（Microsoftのページ）
http://msdn.microsoft.com/ja-jp/libra...

下のほうの「Internet Explorer でホストされるコントロール」を参照。

  • Internet Explorer を使用して、.NET Framework で作成したコントロールをホストできる。
  • コントロールは、拡張子が .dll であるライブラリに格納されている必要がある。
  • セキュリティ上の理由から、HTML ページで object タグとファイル アクセス プロトコルを使用したマネージ コントロールはサポートされていない。

.NET/WindowsForms /HTML埋め込み
http://www.bugbearr.jp/?cmd=read&page...

  • リンク集
  • WPF（Windows Presentation Foundation）より下位の技術という位置づけ

IEで.NET Windowsフォームコントロールをホストする
http://japan.internet.com/developer/2...

  • Visual Studioを使って，よりリッチなGUIをDLLとして提供する。
  • サンプルとして，DBに対してSQLを投げ，返ってくるレコードセットをブラウザ上でグリッドで表示する。
  • グリッドやDB接続ロジックなどの部分を，クライアント側のDLLが.NET呼び出しで済ませてくれているところがミソ。
  • 「.NETの大きな特徴の1つは、Internet Explorerとのシームレスな統合です。たとえば、ユーザーを介することなく、IEからWindowsフォームコントロールをアクティブ化できます。」

参考になるBBS：

スレッド: VB で作成した コントロールを IE で利用する方法
http://www.microsoft.com/japan/msdn/c...

  • .NET Framwork ランタイムをインストールすると、IE が拡張されて、OBJECT タグでマネージコントロールがそのまま表示できるようになる

ActiveXコントロールの作成
http://social.msdn.microsoft.com/Foru...

  • .NET Framework 用のアセンブリ （DLL） は IE でホストできる
  • ActiveX コントロールとは別の技術。
  • .NET Framework をセットアップするといっしょに IEHost というのが入り、これが IE を拡張している

IEで管理されるアプリケーションについて
http://www.atmarkit.co.jp/bbs/phpBB/v...

  • exeもホストできる
  • clsidには，名前空間の指定を忘れずに

IIS以外のWebサーバーからwindowsコントロール（IE埋め込み）を配信することは可能でしょうか？
http://www.atmarkit.co.jp/bbs/phpBB/v...

  • Apacheの場合はMIME TYPEの設定が必要との事
  • でも，なくても動くっぽい


付加的な情報：

WindowsコントロールをIE上で使用する（ホワイトボードアプリケーションの作成）
http://www.sev.or.jp/ijupiter/world/d...

  • Webページ側から.NETの自作クラス側に変数の値をあらかじめ渡しておきたい場合は，クラス側にプロパティを定義し，HTML上ではPARAMタグを使う。

（補足２）System.Windows.Formsについて

Web屋が覚えるべき .NET の知識として，

  • 「HTMLのように，Webページの一部として機能する，WindowsのUI部品」

を知っておくとよい。


そういったUI部品を集めたクラスライブラリが， System.Windows.Forms だ。

System.Windows.Forms 名前空間
http://msdn.microsoft.com/ja-jp/libra...

System.Windows.Forms 名前空間には、Microsoft Windows オペレーティング システムで利用できる、豊富なユーザー インターフェイス機能を十分に活用する Windows ベースのアプリケーションを作成するためのクラスが含まれています。

このページの一覧の中から，好きな部品を選ぶ。


今回のサンプルではDateTimePickerを使った。

DateTimePicker クラス
http://msdn.microsoft.com/ja-jp/libra...

ユーザーが日時を選択し、書式を指定して日時を表示できる Windows コントロールを表します。



TextBox クラス
http://msdn.microsoft.com/ja-jp/libra...

Windows テキスト ボックス コントロールを表します。


その各部品のページの，一番下部から，「メンバ」を閲覧できる。

部品クラスのプロパティやメソッドである。

DateTimePicker メンバ
http://msdn.microsoft.com/ja-jp/libra...



TextBox メンバ
http://msdn.microsoft.com/ja-jp/libra...

こういったプロパティやメソッドの中から，Webページ上で自分が実際に使いたいものを選んで，DLL用のコードとして記述する。


（補足３）他のオブジェクト

今回は，JavaScriptと.NETアプリケーションの間で連携を試みた。


.NETに限らず，objectタグを使っている場合，JavaScriptとの連携が可能である。

JavaとJavaScriptで相互に通信する：

モダンブラウザでAppletを扱うときに知っておくこと
http://blog.katsuma.tv/2009/04/applet...


FlashとJavaScriptで相互に通信する：

Flash と JavaScript とでやりとりする
http://hakuhin.jp/js/javascript.html


これらに比べた場合の，.NET DLLの利点は以下の通り。

  • （１）WindowsのGUI部品を使えること。
  • （２）.NETのコード資産を利用できること。


（１）は，Windowsアプリケーションで既に見慣れているUIを，Webアプリ上でも流用できる，ということ。


例えば，今回は，Webページ上でカレンダーを表示した。

このカレンダーは，普通のデスクトップアプリで多用されている。



例として，Tortoise SVNの「ログを表示」の画面：



これとまったく同じUIを，Webページ上でも利用できるのだ。

これをJavaScriptで１から作ったら，それなりの，相当な工数がかかる。


しかし，.NETやWindows OSそのものが提供するライブラリを使えば，UI構築や動作検証は工数ゼロで済むのだ。



また，（２）は，現在Microsoftが打ち出している主要なテクノロジ プラットフォームに，Webアプリの視点から切り込めるということ。


今回の例では C# を使ったが，.NETでありさえすれば，言語は問わない。

VB.NETでもよい。

これは

  • Web屋がデスクトップアプリの世界に足を踏み入れるためにも，
  • デスクトップ屋がWebアプリの世界に足を踏み入れるためにも，

架け橋の役割を果たしてくれるだろう。


補足（１）

セキュリティに関する注意事項。

本記事で紹介した機能を利用するためには，IEの設定で，ActiveXが有効になっている必要がある。


ActiveXの利用可否の設定切り替えは，ツール＞インターネットオプションで，該当するWebページの属するゾーン（「インターネット」とか）のレベルをカスタマイズする事で可能。

もしくは，ゾーンのセキュリティ設定を変更したくない場合は，該当ドメインを「信頼済みサイト」に追加する手もある


ただし，いずれもセキュリティ基準の引き下げに関わる操作なので，自己責任で行なう必要がある。


※この注意書きの必要性は，id:cx20様に指摘して頂きました。
http://q.hatena.ne.jp/1280148986#c182973


補足（２）

この記事のVB.NET版：

ブラウザ上でVB.NETのコードを動かす　（IE上で.NETアプリケーションをホストする方法の続き）
http://language-and-engineering.hatenablog.jp/entry/20100711/p1


language_and_engineering 読者になる

広告を非表示にする
スポンサーリンク
スポンサーリンク