前回のVisual Studioに引き続き、今回もHTML5/CSS3/JavaScriptによるWebシステム開発をサポートしたIDEを紹介します。今回は元々IntelliJとしてよく知られているIDEで、その中のWeb開発だけを抜き出したWebStormを紹介します。Web開発に特化しているだけあって、数多くの便利な機能が搭載されています。
プロジェクトの選択肢が多い
HTML5でプロジェクトをはじめようと思った場合の選択肢が多数あります。
それぞれ目的に合わせて選択するのが良いでしょう。それぞれの目的に合わせてファイルが自動的に配備されるので、合っていないプロジェクトテンプレートを選ぶとファイルの配置が把握できない状態になるかも知れません。
メイン画面
メイン画面は次のようなデザインになります。
初期設定時にカラーリングテーマやキーバインドを選択できます。使いやすいものを選択してください（後で変更も可能です）。
内蔵サーバ
WebStrom内にWebサーバを内蔵していますのでプレビューが素早く行えます。
JS Lintサポート
JSLintやJSHintをはじめ、コード品質を保つための仕組みを予め内包しています。WebStormでは先進的な開発技術が数多く取り込まれていると言った印象があります。大抵の機能はプラグインなどではなくWebStormだけで完結するのではないでしょうか。
EJSのようなJavaScriptテンプレートのデリミタもサポートされています。
CoffeeScript/Sassサポート
記述する言語はJavaScript/CSSだけではありません。CoffeeScriptやCompassを使ったSass/LESSの変換、Dartなどもサポートしています。WebStorm上ではそのまま記述して、自動的に変換が行われます。
なお後述するデバッガーのブレークポイントの場合、CoffeeScript側に仕掛けてもJavaScript側では設定されません。また、JavaScript側で設定しておいてもCoffeeScriptのコードを編集すると再度JavaScriptが生成されるのでブレークポイントがずれる可能性があります。
デバッガー
WebStormの特徴として、デバッガーがChromeもサポートしているというのがあげられます。JetBrains IDE Supportという機能拡張をインストールすると、WebStormから接続してブレークポイントを含めたデバッグができるようになります（Firefox向けにもあるようです）。
コンソールはWebStorm側で記述し、Chrome上で実行できます。HTMLエレメントの確認もできますので、開発時の操作はほぼWebStorm上で完結できます。
タグ、クラスのスタイル設定確認
HTMLタグを書くと、そのタグ/クラスに設定されているスタイル設定が確認できます。
思ったクラス設定がされているかどうか確認できるので便利です。
関数ジャンプ
WebStormの定義ジャンプでは他のJavaScriptファイルに対しても定義元に飛べました。優秀なコード解析ツールがあってこその技術です。補完も同様に強力で、関数の説明なども表示されるようになっています。
他の開発技術の取り込み
CoffeeScriptやLESSなどもそうですが、WebStormでは外部で開発されている開発補助ツールを数多くサポートしています。Gruntによるタスクランナー、Bowerやnpmによるパッケージ管理もそうです。WebStorm 9からはReact、JSX、Meteorのサポートも行われています。こういった技術を公式に提供してくれるのは生産性向上に大いに役立つことでしょう。
マルチプラットフォーム対応
WebStormはWindows、Mac OSX、Linuxでそれぞれ動作します。Webシステムとあって、各プラットフォームで動作確認を行うことが求められるでしょう。マルチプラットフォームで動作、開発できるのは大きなメリットと言えそうです。
WebStormは登場以来、ずっとWeb開発のIDEとしてトップレベルの機能を備えています。バージョンアップを重ねるごとにサポートするライブラリ、フレームワークが追加されており、現在の開発トレンドにあった開発がスムーズにはじめられるようになっています。
一点難点があるとすればあまりにも機能が多く、ショートカット的に隠れているものもあるのですべてを使いこなすのは相当大変といった所でしょうか。また、進化も速いのでネット上の情報があっという間に陳腐化してしまったり、最新版では使えないものになっている可能性もあります。
WebStormはWeb開発を行うIDEとして有力な候補の一つです。バージョン管理やFTPなどの連携もあり、WebStormだけでもWebシステム開発が様々な面で効率化できるのではないでしょうか。
コンパイルを伴うプログラミング言語を使った開発では一般的にIDEを使います。.NETであればVisual Studio、JavaであればNetBeansやEclipseなど、iOSであればXcodeを使います。対してWebフロントエンドの開発となると、テキストエディタがベースだという方も多いのではないでしょうか。
しかし最近のIDEは進化しており、Webフロントエンド開発にマッチした機能を搭載しはじめています。これらを知ることでより効率的な開発がのぞめるようになるでしょう。
ということで今回から主だったIDEについて、フロントエンド部分の開発（コード記述、デバッグやテストなど）の観点から、どのような機能が用意されているのかを調べていきたいと思います。初回となる今回はVisual Studioです。今回はVisual Studio Community 2013を使ってみます。
プロジェクトベースの生成
Visual Studioでは特にWebフロントエンド開発向けといったプロジェクトのベースはありません。テンプレートとして選択するのはASP.NET Web Applicationになるようです。タイプがVisual Basicですし、ちょっと分かりづらい印象もあります。
そしてさらにテンプレートを選択します。今回はEmptyを選択します。
ソリューションエクスプローラーでファイルを追加
起動しました。ここから開発を開始します。
今回はフロントエンドの開発だけになりますので、左側にあるObject Browserは使いません。代わりに右側にあるソリューションエクスプローラーを使います。
ソリューションエクスプローラーで右クリックすると、ファイルを追加するメニューが表示されます。ここでまずHTMLファイルを追加します。この他、JavaScriptやスタイルシートを追加することもできます。
HTMLファイルを追加するとベースとして以下のようなHTMLが書かれた状態になっています。
右下にあるプロパティを変更すると、それがメタタグ上に反映されます。
既存のファイルはエクスプローラーからVisual Studioのソリューションエクスプローラーへドラッグ&ドロップすれば追加できます。さらにソリューションエクスプローラーからHTMLのソースにドロップすると、scriptタグやlinkタグを使って自動的にファイルのリンクをしてくれます。これは以外と便利です。
ブレイクポイントはIEのみ
開発効率を上げてくれる存在としてはブレイクポイントが欠かせません。Visual Studioではおなじみの通り、クリック一つでブレイクポイントが差し込めます。
この状態で実行ボタンを押すと、Webブラウザが立ち上がります。例えばGoogle ChromeをデフォルトブラウザにしていれはVisual Studioの内部Webサーバを使って http://localhost:49503/が開きます。
ただし残念ながらGoogle Chromeの場合ブレイクポイントが有効になりませんでした。
ブラウザをIEに切り替えるとブレイクポイントがあるところで処理が止まります。
変数を確認することもできます。
全体の変数を確認することもできます。
Visual Studioのブレイクポイントは強力ですがIEに限定されます。Google Chromeを使っている場合は標準のDevToolsを使った方が良いでしょう。
スマートフォン、タブレットでの確認
Visual Studioからスマートフォン、タブレットのシミュレータを呼び出すことができます。ただしiPhone/iPadシミュレータは39.99ドルで販売されているのを使うように推奨されています。
AndroidはAndroid SDKを、それ以外にもBrowserStackを使うように推奨されています。その他ブラウザのウィンドウサイズを変更して実行するオプションもありますが、Google Chromeでは有効になりませんでした（IEは制御できます）。スマートフォンやタブレット開発を考えると若干その手の機能が物足りないかも知れません。
変数名の補完
IDEとして提供して欲しい機能に入力補完があります。HTMLの場合、タグ名や要素について補完してくれますし、JavaScriptのファイルパスについても階層構造を認識した上で補完してくれます。
変数についても同様で、候補がツールチップ表示されます。
外部から読み込んだライブラリに対しても入力補完が使えます。
テスト
JavaScriptがロジックを持ち、大型化していくとなるとテストフレームワークによる自動テストが欲しくなるでしょう。Visual Studioの場合、QUnitとJasmineをサポートしているようです。今回はJasmineを使ってみました。
ツールメニューにある拡張機能と更新プログラムでchutzpahと検索します。これはVisual Studio向けにJasmineを使いやすくしてくれる機能拡張になります。同じようにQUnitもインストールできるようです。インストールは簡単で、検索結果からダウンロードボタンを押した後、インストールを実行するだけです。この手の環境を整えるのは非常に手間がかかるのでこうやって簡単にインストールできるのはいいですね。
テストの書き方ですが、特にファイル名の既定などはないようです。JavaScriptなので関連するファイルを読み込まないとテストできませんので、その場合は
/// <reference path="..." />
と書いて読み込むJavaScriptファイルを指定します。$(function() {...}) などとして変数がグローバルにアクセスできない場合もテストはできませんのでwindowオブジェクトに関連づける必要があります。
テストはソリューションエクスプローラーを右クリックして、Run JS Testsを選択します。
これでテストが実行され、その結果が左側に表示されます。
エラーがなくなると緑のアイコンになります。
さらにカバレッジもとれます。
JS Lint
同じく機能拡張の中にあるJS Lintをインストールします。これを使うことでコードのエラーチェックが自動的に、かつリアルタイムで行われるようになります。
今回はJavaScript Linterを使っています。この機能拡張をインストール&Visual Studioの再起動後から、JavaScriptのコード上の問題があるとエラー一覧に表示されるようになります。
なお何をもってエラーとするかはオプションで変更可能です。
定義ジャンプ
IDEでは大抵備えている関数やオブジェクトメソッドへの関数ジャンプですが、Visual Studioでは同じファイル内でのジャンプはサポートしています。同じプロジェクト内にファイルがある場合でも、別ファイルの場合は定義にジャンプすることはできませんでした。
Visual Studioならではの機能
Visual Studioはマイクロソフト製とあって、TypeScriptとの親和性が高いのが特徴です。今回は特に取り上げませんでしたが、Webアプリケーションを開発される際にTypeScriptを採用される場合にはIDEとしてVisual Studioを使うとより開発が効率化するのではないでしょうか。
Visual Studioは多機能で、普段の.NETアプリケーション開発はもちろんのことHTML5開発であっても十分にこなせる機能があります。ただし、実行・テストに使用するメインのサポートブラウザはIEになるため、ChromeやFirefoxなどを使いたい場合ブレークポイントなど連携機能が一部制限されてしまうのはとても残念です。
ただしTypeScriptであったり、テスト環境構築などの周辺技術まで含めるとテキストエディタを使った開発よりも十分に高速化されると思われます。ぜひお試しください！
JavaScriptは割と自由な言語で、行末にセミコロンがなくとも動作したり、varによる変数宣言をしなくとも使えたりします。とはいえ、動くから良いという訳ではありません。意図しない動作を防ぐため、さらに多人数での開発になればコードの品質を維持するためにもコーディング規約に沿った書き方が求められます。
他のプログラミング言語と同様、JavaScriptにおいてもコーディング規約が幾つか存在します。どれを取り入れるかは対象のアプリの性質、プロジェクトの特性やチームメンバーのスキルなどによりますが、参考になることは間違いないでしょう。必要に応じてカスタマイズするなどして、上手に取り入れてみてください。
Google JavaScript Style Guide
Google製のJavaScriptスタイルガイドです。和訳版がこちらにあります。執筆時において、和訳版はバージョン2.72、本家は2.93となっており、適宜更新されているようです。一旦作って終わりでは徐々に時代に合っていないものになりがちですが、こちらは今なお役立つものになっているでしょう。
セミコロンやブロック内での関数宣言など細かく規定がありますが、特に「なぜそうしなければならないか」「そうしない場合どういった問題を引き起こすか」について触れられているのが特徴です。これにより納得感のあるコーディングが可能になります。
JavaScript coding standards | Drupal.org
世界的に有名なCMS、DrupalによるJavaScriptコーディング規約です。内容は短めで、インデント、セミコロン、strictモード、変数名、typeof、関数、コンストラクタ、コメント、制御構造、演算子などについてまとまっています。細かく規定がない分、良くある事柄にまとまっているので分かりやすいのではないでしょうか。
JavaScript coding standards | Drupal.org
Dojo Style Guide – The Dojo Toolkit
JavaScriptフレームワークであるDojo Toolkitのコーディングスタイルガイドです。こちらもそれほど多くありません。特にDojoを使っている場合にはこのスタイルガイドに沿っておくことで本体と同じように書けるというメリットがありそうです。
Dojo Style Guide – The Dojo Toolkit
airbnb/javascript
Airbnbの作っているコーディング規約です。和訳がこちらにあります。全部で23項目あり、細かく規定されています。Airbnbはnodeも使っており、WebアプリケーションとしてJavaScriptも多用しています。それだけにコーディング規約で細かく規定しているのだと思われます。
felixge/node-style-guide
Node.jsのスタイルガイドです。クライアントサイドではなくサーバサイドにはなりますが、JavaScript自体は同じなので役に立つと思われます。バージョンが若干古いですが、和訳版もあります。正解と間違いが並んでいるので分かりやすいです。
JavaScript style guide | MDN
Mozillaの作成しているスタイルガイドになります。Firefoxを対象としていますので、汎用的なJavaScriptとは一部異なる可能性があります。とはいえ最大級のオープンソースWebブラウザを支えるスタイルガイドになりますので学べる点は多そうです。
Code Conventions for the JavaScript Programming Language
Oracleに買収されたSunが作成したJavaのコーディング規約をベースにしたJavaScriptコーディング規約になります。量は多くありませんが基本は抑えてあります。
Code Conventions for the JavaScript Programming Language
JavaScript · Styleguide
GitHubが公開しているスタイルガイドです。他のスタイルガイドが一行80文字としているのに対して、こちらは120文字としているのが特徴です。なお規約中のコードはJavaScriptではなく、CoffeeScriptで書かれています。
mgechev/angularjs-style-guide
AngularJS向けのスタイルガイドとなっています。そのためJavaScript全般の規約ではなく、AngularJSのモジュールやサービス、フィルターに関する規約など、AngularJSに特化した内容となっています。
Apple JavaScript Coding Guidelines
Appleの作成したJavaScriptコーディング規約です。既にレガシーと書かれており、新版は出ていない模様です。
Apple JavaScript Coding Guidelines
いかがでしょうか。有名なコーディング規約についてはLintが用意されており、自動チェックすることでスタイルガイドに合っていない記述がないかチェックができます。最近は、社内で独自にコーディング規約を定めていることも増えていると思います。ただ、JavaScriptは今まさに進化の途中にある言語であり、もっとも利用される環境であるブラウザもどんどんバージョンアップしています。規約が有名無実化しないよう、言語や環境のウォッチを怠らずメンテナンスしていくこと、また、ツールを活用して機械的に準拠をチェックできる仕組みを整えることが重要でしょう。
そのようなコストをかけることが難しい場合は、今回ご紹介したような有名なコーディング規約に準拠するというのも一つの手段でしょう。
hifiveのサイトでは「自習室」と称して、Webアプリケーションの基本的な構造、CSSセレクタ、イベント処理など、Webアプリケーションクライアントを作るための必須事項を学べるコンテンツを公開しています。
この自習室では、単に文章を読んで学習するだけでなく、「理解度確認クイズ」として、ブラウザ上で確認問題を解くことができるようになっています。もちろん、採点も自動で行われます。
（ちなみに、このクイズアプリ自体もhifiveで作られた一つのWebアプリです。）
理解度確認クイズでは、ブラウザ上でコードを実際に記述しその場で実行することで、jQueryやCSSセレクターなどの動きを確認できます。
あけましておめでとうございます。
hifive開発チームのしもだです。
昨年はHTML5 Japan Cupへの協賛、勉強会やブログなど外部発信を強化し、皆さまとのリレーションを築く足掛かりを得ることができた一年でした。
今年は、引き続き情報発信・普及活動に努めることはもちろん、hifiveをより良いものにすべく開発を進めていきます。
本年もどうぞよろしくお願いいたします。
このエントリーはHTML5 Advent Calendar 2014の12月13日の記事です。
HTML5が勧告になりました。各社のブラウザのHTML5への対応度や互換性はますます向上していくことでしょう。したがって、正しいHTML5を書くように心がけておけば表示の乱れやブラウザごとの見た目の違いは最低限に抑えられるはずです。しかし、どんどん複雑化するHTMLを、typoしないことはもちろん構造的に完全に正しくマークアップするのはなかなか大変です。
そこで今回は、マークアップを自動的にチェックしてくれるツールやサービスをまとめて紹介します。皆さんのWebシステム開発、コーディングにお役立てください。
The W3C Markup Validation Service
W3Cが公式に提供しているバリデーションサービスです。機能は豊富ですし、結果も確実ではあるのですが若干見づらい印象があります。
The W3C Markup Validation Service
Validator.nu
HTML5およびXHTML5のバリデーションを行ってくれます。画像のalt属性をチェックしてくれる機能もあります。URL、ファイルアップロードおよびテキスト入力の3パターンでチェックして欲しい内容が指定できます。
Validator.nu (X)HTML5 Validator
Another HTML-lint 5
チェック結果を日本語で出力してくれる珍しいサービスです。Perl製のAnother HTML-lintをベースにHTML5対応させたサービスになっています。
HTML5 Validator Bookmarklet
上記サイトへURLを渡してくれるブックマークレットを提供しています。ツールバーに登録しておくといつでも検証ができるので便利です。
HTML 5 Validator :: Add-ons for Firefox
Firefoxのアドオンです。インストールするとコンテクストメニューにHTML 5 Validatorという項目が追加されます。これを選択すると新しいタブでValidator.nuが開きます。
HTML 5 Validator :: Add-ons for Firefox
Total Validator
Windows/Mac OSX/Linuxで動作するスタンドアローンなバリデーションチェックツールです。結果はHTMLファイルを生成して表示します。ローカルなのでLAN内部のサーバや開発中のサーバでも容易にチェックができます。スペルチェック機能やアクセシビリティチェックも可能です。
HTML / HTML5 / XHTML / WCAG / Section 508 / CSS / Links / Spelling
HTML & CSS Site Validator
1つのURLではなくサイト全体のバリデーションチェックを行ってくれるサービスです。10,000回バリデーションを行って月額24ドルとなっています。
HTML Validator
現在表示しているサイトのバリデーションチェックを自動的に行ってくれるChrome機能拡張です。エラーの数によってアイコンの数字が変わります。普段の習慣の中でチェックする癖をつけたい方に良さそうです。
HTML Validator – Chrome ウェブストア
The Nu Markup Checker (v.Nu)
Validator.nuをJavaでスタンドアローンとして提供しています。ローカルのファイルやURLを渡すだけでチェックできるので、システムで自動化したり、LAN内のサーバをチェックする場合などに便利です。
$ java -jar ./vnu/vnu.jar http://getbootstrap.com "http://getbootstrap.com":6.53-6.53: error: Bad value “X-UA-Compatible” for attribute “http-equiv” on element “meta”.
mozilla/html5-lint
nodeまたはPythonでバリデーションを行ってくれるツールです。Pythonは単体ファイルでチェックまで行ってくれます。nodeはライブラリとして提供されていますので別途実行スクリプトが必要です。
$ node test.js HTML5 Lint [error]: A “meta” element with an “http-equiv” attribute whose value is “X-UA-Compatible” must have a “content” attribute with the value “IE=edge”. HTML5 Lint [error]: “&” did not start a character reference. (“&” probably should have been escaped as “&amp;”.)
ちょっと試してみたところではHTML5対応とうたっているサイトであってもかなりのエラーやウォーニングが出るようです。もちろん勧告される前の段階で書かれている場合、仕様の変更によってエラーになってしまうケースは多いと思います。今後コーディングしていく中ではぶれなく書けるのでエラーの件数はなるべく減らしていきたいですね。
Webで使えるサービスは手軽ですし、CLIのものは自動チェックするのに良いでしょう。実際、CI対応のものもあります。バリッドなHTML5を目指してぜひ使ってみてください！
Webアプリケーションをテストする際に活躍するのがSeleniumです。最近では、デスクトップのブラウザのみならず、iOSやAndroidのWebViewを使ったテストもできるようになっています。
自分のローカルにSelenium Serverを立ててテストする場合が多いと思いますが、今回はSelenium Serverをクラウドで提供するサービスをまとめて紹介します。
TestingBot
138の異なるOS、ブラウザ、バージョンの組み合わせでテストができます。iPhone/Androidにも対応しています。トンネル機能を使うことでローカルまたはLAN内のサーバに対するテストも自動化できます。
ブラウザからのテスト実行の他、CIと組み合わせたテストも可能です。
Selenium Testing in the cloud – Run your cross browser tests in our online Selenium Grid
Nerrvana
Selenium IDEで記録した内容をクラウド上で実行できるサービスです。WebDriverではないですが、Firefoxのアドオンを使って手軽にテストコードが記述できるのが利点かも知れません。
Nerrvana – easy Selenium testing in the cloud
Gridlastic
プライベートなSelenium Gridを提供するサービスです。Selenium Gridを使うことでテストを並列化し、実行時間を軽減できるようになります。
BrowserStack
BrowserStackはSeleniumのクラウドサービスとしてよく知られています。それだけに機能は豊富で、300を越えるOS/ブラウザ、バージョンでテストを行えます。ローカル、LAN内部のサーバに対するテストも可能です。
さらにCIとの組み合わせや各種プログラミング言語と組み合わせたテストコード記述、ライブデバッグ機能も備えています。
Selenium cloud testing in 300+ Desktop and Mobile Browsers.
Sauce Labs
Sauce LabsもまたSeleniumテストで有名です。テストとしてはSeleniumの他、JavaScriptのユニットテストにも対応しています。
Sauce Labs: Selenium Testing, Mobile Testing, JS Unit Testing and More
STAR-Lite
STAR-Liteはクラウドではなく、Windows Serverに対してインストールするソフトウェアになります。設計情報を取り込み、そこからテスト情報を生成します。自動で取り込まれるので設計の変更、追加が自動でテストスクリプトに反映されます。
テストは自動実行される仕組みになっています。
テスト自動化ツール＜ STAR-Lite,Version1.2 ＞-toppage
テスト環境をきちんと構築・メンテナンスするのは意外と手間がかかるものです。今回紹介したようなサービスを使って管理・運用を効率化できるとうれしいですね。
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が使える場面は増えていきそうです。
最初にご紹介したGoogle Chrome編、前回のiOSシミュレータ編に続き、今回はAndroidでのテスト方法を紹介します。Androidの場合エミュレータ上でテストするので、ネットワーク周りも含めて母艦とは別なものとして考えることができます。
Androidの場合、エミュレータの速度が最大の問題になります。そこでIntel HAXM（Intel® Hardware Accelerated Execution Manager）をインストールしてエミュレータを高速化するところからはじめます。
HAXMをインストール
まず最初にEclipseのAndroid SDK Managerを起動します。今回の手順はMac OSXで行っていますが、Windowsでもほぼ同じ方法になります。Extras以下にある Intel x86 Emulator Accelerator (HAXM) をインストールします。
この段階ではインストーラーのダウンロードまでになります。インストーラーは Intel x86 Emulator Accelerator (HAXM) をマウスオーバーするとパスが表示されます。
今回の場合は ~/android-sdks/extras/intel/Hardware_Accelerated_Execution_Manager/ になります。開くとDMGファイルがありますので（Windowsの場合は実行ファイル）開きます。
イメージファイルの中にインストールファイルがありますので起動します。
インストーラーはウィザード方式になっていますので順番に手順を進めて完了してください。
これでインストールは完了です。
イメージファイルをインストール
ADVの作成に際して専用のイメージファイルが必要になります。Android SDK Managerを起動して、必要なAndroid APIバージョンの Intel x86 Atom System Imageをインストールしてください。
AVDの作成
イメージファイルをインストールしたら、Android Virtual Deviceを起動します。
そしてCPI/ABIの選択においてIntel Atom (x86)を選択してください。
後は Emulator OptionsでUse Host GPUをチェックします。
これで準備は完了です。
selendroidを起動する
Androidのテストには selendroid を使います。執筆時の最新バージョンは 0.12.0 で、こちらのリンクでダウンロードできます。
テストを実行する
selendroidは最初にエミュレータに接続するようなので、エミュレータはあらかじめ起動しておいてください。HAXMを使っていれば、10秒くらいで起動するはずです。
次のコマンドでselendroidを起動します。
$ java -jar selendroid-standalone-0.12.0-with-dependencies.jar
なおANDROID_HOMEが設定されていないとエラーになりますので必要があれば下記コマンドで設定してください。Windowsの場合はシステムのプロパティで設定してください。
export ANDROID_HOME=~/android-sdks/
デフォルトで 4444番ポートで待機状態になります。
Selenium Serverへの設定
後はSelenium Serverの設定になります。Rubyの場合、次のような設定になります。
Capybara.register_driver :android do |app|
Capybara.app_host = "http://192.168.100.100:3000"
Capybara::Selenium::Driver.new app,
browser: :remote,
url: "http://192.168.100.100:4444/wd/hub",
desired_capabilities: {
browserName: 'android',
emulator: true,
platformVersion: '19',
platform: 'Mac',
version: '2.3',
deviceOrientation: 'landscape'
}
end
シミュレータの場合、app_hostはlocalhostになりますが、エミュレータの場合はネットワークが別ですのでIPアドレスで指定する必要があります。ただしこの設定がうまくいっていればPC内部以外、ステージング環境などもURLを変えるだけでテストできるようになります。
テストを実行すると、まず専用のWebブラウザアプリがインストールされます。
そしてテストはそのブラウザを使って行われます。
$ DRIVER=android ruby -S rspec spec/features/hello_spec.rb . Finished in 18.07 seconds 1 example, 0 failures Randomized with seed 32027
設定を多少変更すれば実機テストも行えるはずです。
Androidを使ったテストではエミュレータであるという点が異なります。そのためSeleniumへ別なPCからアクセスできるようにしたり、localhost以外のIPアドレスを指定してWebアプリケーションのテストが行えるようにしなければなりません。テスト環境がAndroidか否かを判別して設定を変更するといった手法が必要です。
今回はいつもと少し趣向を変えて・・・早速ですが、こんなものを作ってみましたので動画をご覧ください。
Arduinoを使って、明るさを数値化して読み取っています。小さな部品がそうで、指で隠したり手で覆ったりすると数値が下がります。
ArduinoにはWiFiサーバになるシールド（CC3000）をつなげていて、Webサーバの役割を担っています。
hifive開発者ブログ 