テスターですが何か?

ホビープログラマ略してHPです

クラウディアタイマー解説

leave a comment »

以前のエントリーでクラウディアタイマーを紹介しましたが、今回はアプリケーションの技術的な内部構造について解説したいと思います。アプリ本体とソースはともに公開しています。こちらからダウンロードしてみてください。

 

概要

ユーザー側から見た場合クラウディアタイマーはクライアントアプリケーションですが、実はクライアントアプリケーション(WindowsForms)にはGUIしかなく、クラウディアの画像やタイマーアプリケーションはすべてクラウド(Windows Azure Platform)上にあり、クライアントからAzureへアクセスして動作する仕組みになっています。

image

 

サーバーサイド

ASP.NET MVC3

サーバーサイドはASP.NET MVC3アプリケーションです。以下のようにURLを指定するとクライアント側で表示しているコンテンツをブラウザで表示することができます。

http://david9142.cloudapp.net/timer/claudia/300

image

またカウントダウン時間はURLから指定するようにしています、ASP.NET MVC3のルーティングの機能を使用して実現しています、Global.asax.csのデフォルトルーティング定義を以下のように変更して、URL「http://david9142.cloudapp.net/timer/claudia/{time}」の{time}の部分がカウントダウン時間になるようにしています。

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
    "Default", // ルート名
    "{action}/{time}", // パラメーター付きの URL
    new { controller = "Timer", action = "Claudia", time = UrlParameter.Optional } // パラメーターの既定値
    );
}

 

HTML5

カウントダウン表示部分にHTML5のCanvasを使用しています、そのため古いブラウザでは動作しません。

image

現時点での動作確認状況は以下の通りです。PC用の最新バージョンのブラウザであればブラウザからは動作します。後述しますが、クライアントではIEの機能を利用しているため、WindowsVista以降のIE9がインストールされた環境でないとアプリは動作しません。

動作確認済み(動作OK)

  • InternetExplorer9
  • Chrome12
  • FireFox5

動作確認済み(動作NG)

  • InternetExplorer8
  • Android 2.1, 2.2

動作未確認

  • iOS4

 

クラウディアの画像とCanvasのカウントダウン表示をなぜ重ねることができるのかというと、画像はbodyのbackground-imageで指定して表示しているためです。Canvas部分に表示する文字列はJavascriptで動的に生成しています。

 

クライアント

クライアント部分はWindowsFormアプリケーションでUIのみを担当しています、既に述べましたがAzureのコンテンツを表示しているだけです。ただ見せ方は気を使っています。タイマー表示のFormはデザイナーで見ると以下のようになっています。ちょっと不思議な状態ですね。

image

要点は以下です。

  • フォームの全画面にBrowserControlを配置し、コンテンツのみを表示しています
  • TopMostプロパティをtrueに設定し、タスクマネージャーのように必ずウィンドウが前面になるようにしています
  • FormBorderStyleをnoneに設定し、ウィンドウの境界線を表示させないようにしています
  • Opacityを90%に設定し、やや背景が透けるようにしています
  • 必ず画面の左上端に表示sれるようにしています

TopMostプロパティを設定しているので、PowerPointやブラウザを全画面表示してもタイマーアプリは左上端に残ります。なので、勉強会セッションの時間管理にぴったりだと思います。

 

今後の予定

本当はSilverlight4のOutOfBrowserや、WPFでつくろうと思っていたのですが、ウィンドウを前面に表示することとウィンドウスタイルとなくす方法がわからなかったのでWindowsFormで作成しました。Silverlight5(まだβ)ではOurOfBrowserのウィンドウスタイルを設定することができるようになっているようなので、Silverlight化を検討したいと思います。また、画像さえあればクラウディアさん以外のタイマーが作成できるので

この子や

image

この子も

image

タイマーアプリにできると思います。

また、気が向いたらCodePlexで管理するかもしれません。

Written by david9142

2011年7月14日 @ 12:03 AM

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

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