C#/XAMLでWebアプリケーションを開発できる「C#/XAML for HTML5」を試す

XAMLは.NET Framework（WPF）を使ったアプリケーションやSilverlightアプリケーションを開発する際に使われる言語です。「C#とXAML」の関係はWebにおける「JavaScriptとHTML」の関係に似ていて、画面構造をタグベースで記述できる利点があります。しかし出来上がるアプリはあくまでWPF/Siverlightアプリであるため、あくまでもWindowsアプリケーションとして、あるいはSilverlightプラグインをインストールしたブラウザでのみ動作します。そのため、HTML5の普及が進むにつれ（プラグインベースの）Webアプリとしての利用は減ってきています。

そんな中、Userware社（2014/12/8 20:30修正：Microsoft）が開発しているのがC#/XAML for HTML5です。その名の通り、C#とXAMLの組み合わせでHTML5のWebアプリケーションを開発できる技術です。まだ開発途中とのことですが、今後の可能性を大いに感じさせるテクノロジーになっています。

準備する

C#/XAML for HTML5はVisual Studio向けにプラグインをインストールします。最近、Visual Studioでは無償のコミュニティ版をリリースしましたので自宅でも容易に試用できるようになっています。なお先着5,000名までのダウンロードとのことですが、発表されて2ヶ月くらい経ちますがまだダウンロードできるところを見るとあまり厳密な制限はしていない？のかも知れません。

C#/XAML for HTML5のサイトへ行き、メールアドレスを登録します。そうするとメーリングリストのの参加確認メールがきますので、それを承諾するとダウンロードリンクがメールされる仕組みです。

ダウンロードされたファイルはインストーラーになっていますので順番に進めていけばインストールが完了します。

新規プロジェクト作成

Visual Studioを立ち上げて、新規プロジェクトを選択するとC#/XAML for HTML5が追加されています。ブランクの状態ではじめるか、サンプルのアプリケーションがついています。今回はまず計算機を選択してみます。

こちらが展開された状態です。まずStartボタンを押してビルドしてみましょう。

シミュレータは2種類用意されています。一つは C# と HTMLで動作しているもので、こちらはXAMLを使っていません。この時にはVisual Studioを使ってブレークポイントを仕込んで処理を停止させられます。デバッグ時には便利ですが、実行速度は遅めとのことです。

もう一つはピュアなJavaScript版で、こちらは任意のデフォルトブラウザで実行されます。

画面設計

画面は MainPage.xaml にあります。ビジュアル的に確認はできますが、デザイナービューに切り替えると編集はサポートされていないと出てしまいました。

生成されるJavaScript

この手の仕組みでは自動生成されるJavaScriptが大量に生成されます。C#/XAML for HTML5においてもそれは変わりませんが、ライブラリファイルは全部で3MB程度となっています。ミニファイもされていないので、ミニファイしたりGzip圧縮すればインターネット越しでも使えるサイズになりそうです（大きいことは大きいですが…）。

なお、実際のアプリケーションのコードは機能の割にかなり長い（計算機の場合で277KB）となっており、かつ自動生成されたコードになっていますので、Webブラウザ上でデバッグしてJavaScriptを修正するというのは現実的ではありません。Visual Studio上でデバッグして、そのままWebアプリケーションとして使うのが良さそうです。

計算機と各種コントロールのデモはそれぞれリンク先で確認できます。

サポートブラウザ

C#/XAML for HTML5はHTML5アプリケーションになるので、IE 10より以前のブラウザはサポートされません。また、Androidも4.0未満はサポートされないようになっています（現状なので将来的には変わるかも知れません）。

テストは、

• IE 10および11
• Google Chrome
• Firefox
• Android 4.0
• Opera
• Safari（Yosemite）
• Mobile Safari （iOS 8）

で行われています。一般的なHTML5対応ブラウザであれば使えるということですね。

機能

C#/XAML for HTML5では以下のコンポーネントや機能が提供されています。

• ボタン
• テキストボックス
• イメージ
• テキストブロック
• レクタングル
• ボーダー
• ネストできるパネル
• Canvas
• データバインド

また、現状の実装状態は次のようになっています。

• C#の機能：90%
• .NETの型およびFrameworkのクラス：30%
• XAMLのコンセプト：60%
• XAMLの型およびコントロール：60%

WFC、正規表現、シリアライズは今後実装予定に入っています。またXAMLの多数のコントロールも今後実装予定になっていますので、さらに画面がリッチに作りやすくなっていくと思われます。

利点

これまでに習得しているC#/XAMLの組み合わせでHTML5に対応したWebアプリケーションが開発できるのは大きな利点になるでしょう。ブレークポイントなどを含めたVisual Studioの強力な開発ツールを活かせるのも利点です。また既に開発されているSilverlight、WPF、Windows Phone、Windows Store、.NETアプリケーションのマイグレーションも容易にしていく計画のようです。既存の業務システムをWebアプリケーション化する上で役立つものに成長すればとても良さそうです。

現在はOSの幅が広がり、オフィス内でMac OSXやLinuxが使われているケースもあります。さらにデバイスも多様化し、タブレットやスマートフォンから業務システムを使いたいというニーズは強くあります。そうした目的においてもC#/XAML for HTML5が使える場面は増えていきそうです。

C#/XAML for HTML5

hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive