Skip to content

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

by : 2014/12/08

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

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

From → HTML5

2件のコメント
  1. 匿名 permalink

    Userware社が作成しているので、”Microsoftが開発している”というのは間違いでは?

  2. しもだ permalink

    ご指摘ありがとうございました。開発元は確かにUserware社でした(「C#/XAML for HTML5 is a product of Userware」)。本文を修正いたしました。

コメントは停止中です。

%d人のブロガーが「いいね」をつけました。