本当に!? Winアプリの開発手法でWebアプリ開発 「Visual WebGui」を緊急チェック

CodeZine / 2013年6月26日 14時0分

図15 CZ1306Multiの実行例

 グレープシティから新しいフレームワークの発売が発表されました。それがVisual WebGui ProStudio Web&Mobile 7.0J(ビジュアルウェブグイ、以下Visual WebGuiとします)です。キャッチコピーは「Windowsアプリの開発手法でWebアプリを開発できる」というもので、最初の感想は「それっぽい感じにはできるけどキャッチコピー通りということはないだろう」という懐疑的なものでした。しかし、そんな思いを抱きながらも、「とりあえず時間を作って試してみた方が…」という気持ちも同時に湧き上がっていました。恐らく、何かが自分のアンテナに引っかかったのでしょう。

 今思い返せばフレームワークの説明の中に、クライアント側のエンジンはSilverlightやFlashではなく、JavaScriptで作成されていると記されていたからかもしれません。JavaScriptによるクライアント側エンジンは、jQueryやenchant.jsなどパワフルで実用例が多いものがたくさんあります。そして、Windowsストアアプリの作成環境の一つはHTML5+JavaScriptだったりします。ブラウザ側での実装の充実も含め、JavaScriptという選択肢は、何か成功するアプローチであるように感じたのでしょう。

 Visual WebGuiの機能は多岐にわたりますので、一度にすべての魅力をお伝えするのは困難です。そこで、まずは素直にVisual WebGuiを使ったときの開発手法をトレースして、キャッチコピー通り「業務開発に適用できるかどうか」という視点で評価してみたいと思います。

 今回は、次のような現場を想定して評価していきます。

.NET FrameworkのWindowsフォームで新規作成した業務システムがある 開発メンバーはWindowsフォームには慣れているがWebアプリ開発には不慣れ 業務システムをWeb化するにあたり、Webアプリを新規作成することになった ■Visual WebGuiの動作原理

 それではまず、Visual WebGuiの動作環境などを確認してみましょう。Visual WebGuiがサポートしているVisual Studioのバージョンは、以下のとおりです。

Visual Studio 2008 SP1 Visual Studio 2010 Visual Studio 2012  また、.NET Frameworkの対応バージョンは、3.5/4.0/4.5に対応しています。

 Visual StudioでWebGuiを使ってアプリケーションを作成してデバッグ実行すると、次のような構成で動作します。

図1 Visual WebGuiアプリのローカルデバッグ環境


 Visual Studioで作成したソースコードを実行すると、

ビルドされてアセンブリになったあとにIIS Express(またはVisual Studio開発サーバー)に自動配置。このとき必要なVisual WebGuiライブラリも、アセンブリの一部として一緒に配置されます Visual Studioから初期ページをURLに指定してブラウザを自動立ち上げ ブラウザから初期ページをIIS Expressにリクエスト JavaScriptで作成されたVisual WebGui仮想化エンジンがまずブラウザに 以降はVisual WebGui仮想化エンジンとIIS Express上のアセンブリが連携 という流れで動作します。

 運用環境では、IIS Expressの代わりにWindows ServerのIISや、Windows Azure Web Servicesにアセンブリを配置して動作する以外は図1と基本的に同じです。

■Visual WebGuiアプリの作成方法

●テンプレートの選択

 Visual WebGuiアプリを作成するときは、[ファイル]-[新しいプロジェクト]メニューをクリックして、「Visual WebGuiアプリケーション」テンプレートを選んでプロジェクトを作成します。

図2 テンプレートの選択(上はVB、下はC#の画面)


 テンプレートから作成されたプロジェクトは、Windowsフォームアプリケーションと同じようにプロジェクト配下に「Form1」が配置されているのに「Web.config」がある少し変わった構成になっています。

 またデザイナーで表示されているForm1も、見慣れたWindowsフォームのデザイン画面ではありません。

図3 Visual WebGuiプロジェクトの初期状態


 Form1は、Designerファイルやresxファイルも存在しており、構造もWindowsフォームに似ています。しかし、Designer.vbの中を確認するとベースクラスは「Gizmox.WebGUI.Forms.Form」となっていることが分かります。このクラスライブラリが、Windowsフォームと同じようなメソッド、プロパティ、イベントを公開しつつビルドされるとWebページとして振る舞えるようになるためのキーになります。

●スタートアップフォームの設定

 それでは、この状態で実行するとどうなるのか確認してみたいと思います。ただし、その前に1つだけ準備が必要になります。

 ソリューションエクスプローラーで「Form1」を右クリックして[スタートアップフォームに設定]メニューを選択してください。この操作によって、Form1がアプリの初期画面であると設定できます。

図4 スタートアップフォームに設定


●初期状態での実行

 スタートアップフォームの設定が終わったら[F5]キーを押下して実行します。Visual StudioからIIS Expressが自動実行され、その上にアセンブリが配置されてブラウザからの応答に応えます。

図5 初期状態での実行


 まだ何もデザインしていないので、ページタイトルが「Form1(Visual WebGui 7.0.0-LGPL)」の空白ページが表示されます。なお、ページタイトルはForm1フォームのTextプロパティの値から生成されています。

 これでWebGuiプロジェクトの基本的な構造が分かったので、コントロールを配置して、サンプルアプリを何個かつくって開発手法を確認してみましょう。



CodeZine

トピックスRSS

ランキング