Azume – Simple Time Recorder

/ Azure, Silverlight

6月も下旬に入り、早くも今年の半分が終わってしまいそうです。
何やらにわかに暑くなってまいりましたが、如何お過ごしでしょうか。

今回、Windows Azureの実装調査を兼ねて、少し実用的なWebサービスを作ってみました。
もちろんクライアントはSilverlight。全部コミコミでクラウド上に配置しています。

サービス名は「Azume – Simple Time Recorder」。ずばり勤怠管理システムです。
前職でも同様の社内向けアプリをSilverlightで作ったのですが、今回は機能を最小限に絞り込んで、より汎用的な仕様にしてみました。
残業や有休などの労務管理は会社ごとに異なるため、細かくやりはじめるとキリがないので、思いっきり割り切り仕様にしています。
というわけで、ウチのようにごくごく小規模な会社に勤めている人や、あるいは(ブラックな会社にやられちゃわないためにw)個人的に勤怠記録をつけておきたい人向け。

朝、出社したらクリック、退社するときにクリック。
これだけで勤怠記録がつけられますので、タイムカード代わりに使ってみてください。
メールアドレス不要のユーザ登録をしていただければ、どなたでも無料でご利用できます。
登録削除も簡単にできますので、気軽にお試しください。 → Azumeを実行

詳しい内容は動画を用意しましたので、こちらでご確認ください。

[youtube style=”text-align: center;”]q_o_yMXaewI[/youtube]

以下、技術的な話は箇条書きで簡単にいっときます。
各々の詳細は後日触れていきたいと思います。

  • 「Silverlight – WCF RIA Services – Azure」アーキテクチャ採用
  • データはAzureストレージのTableに格納
  • Silverlight – WCF間のプロトコルはREST/JSON形式を採用
  • 帳票印刷はSilverlightのレポーティング機能を利用
  • Azureロゴ取得のために、Microsoft Platform Ready検証テストを実施

まだ、諸々不具合等あるかもしれませんが、随時アップデートしていく予定です。


スプラッシュスクリーンの作り方

/ Silverlight

Silverlightアプリ起動時にくるくる回ってロード状況をお知らせしてくれる、あの画面をスプラッシュスクリーンと呼ぶらしいのですが、その作り方。
オフィシャルな説明はこちらに載っていますが、実際に真似してやろうとして少しハマったので、覚え書きってことで。

以下、やらなければいけないことを順を追って説明していきます。
全てコンテナ用のWebプロジェクトに対する作業となりますので、Silverlightプロジェクト側に手を入れる必要はありません。

1. スプラッシュスクリーンの作成

  • コンテナ用のWebプロジェクトに新しい項目として「Silverlight 1.0 JScript ページ」を追加します。これにより、「xxxxx.xaml」と「xxxxx.js」の2ファイルがプロジェクトに追加されます。(xxxxxはお好きな名前でどうぞ)
  • 「xxxxx.xaml」を以下の要領で編集します。(既定のコードは全削除)

  • 「xxxxx.js」を以下の要領で編集します。(既定のコードは全削除)

  • ここまでやってビルドするとエラーが出ますので、不足している参照設定をWebプロジェクトに追加します。前述のXAMLの内容によりますが、基本的には「PresentationCore」、「PresentationFramework」、「WindowsBase」の3点を追加すればいけると思います。

2. コンテナHTMLの編集

  • 上記で作成したスプラッシュスクリーンが表示されるようにするために、コンテナとなるHTMLファイルに以下の記述を追加します。

xxxxx.js 内のCanvasレイアウトのくだりは海外サイトからのパクリですw
静的サイズのアプリならば不要なのですが、Silverlightでサイズ固定のアプリというのは如何なものかと思いますので、動的なポジション/サイズ調整は必須と思うのですが、いかんせんコードビハインドの代わりにjavascriptで記述しなければいけないので、まどろっこしいことになっています。

あとは、あくまでSilverlight 1.0ベースということなので、普通にBlendで書いたXAMLを貼るとエラーが多発する可能性があります。
画像利用も極力避けるようにオフィシャル説明では書かれていますので、スプラッシュスクリーンで出来ることはわりと限られてくる印象です。(あまり凝るところではないかも、ですが)

それと、小さいXAPファイルの場合は、スプラッシュ表示が一瞬で終わってしまう(あるいは表示されない)ので、開発時は一時的に大きめの動画ファイルなどをSilverlightプロジェクトに混ぜておくと、じっくり確認できて具合がよろしいようです。

まぁ、そんなわけで、デフォルトの起動画面に見飽きた方はトライしてみてください。
ちなみに、全くもって存在感のない「ロムった~」にも一応装備してみましたが、一瞬で消えちゃいますw


XAPファイルのキャッシュクリア

/ Silverlight

前々から気にはなっていたのですが、Webサーバ上に配置したSilverlightのXAPファイルを新しいものに置き換えても、一向にクライアント側に反映されない件。
もちろんクライアント側でブラウザキャッシュを消せばダウンロードし直すので問題は生じないのですが、公開している側からそんなことを要求できるわけもないので、サーバ側でどうにかしたいところ。

というわけで、試してみたのは以下の通り。

  • Silverlightアセンブリのバージョン番号を変えてみた
  • コンテナとしているHTMLファイルのヘッダに有効期間の指定を追加してみた
  • .htaccessをいじって、XAPファイルをキャッシュしない設定にしてみた

まぁ、ことごとく効果なしw

困ったときの海外サイト、というわけで、Silverlight Forumで検索してみると、同様の問題でお困りの方々が結構いる模様。
ざっと見たところ先日のWebClientキャッシュ問題の回避法と似たようなことをやっているふうだったので、試しにURLの後ろにバージョン番号をくっつけてあげたらば、あっさり解決。

安直だけども、この方法ならば意図的にバージョン番号を変えない限りは強制ダウンロードされないので、わりとエコで平和な回避法かと思われ。


Romtter – Twitter検索・ロムった~

/ Silverlight

Twitter検索するWebアプリをSilverlightで作ってみました。

名前はベタに「ロムった~」と命名。
実は前職でも似たようなツールを作ったことがあるのですが、Twitter検索のニーズは実際あんまり無いようで、こんなありがちな名前でも世に存在しなさげなのが微妙にカナシス。

とりあえず、画面イメージは↓こんな感じ。(クリックすると起動します)
Romtter - クリックで起動

検索オンリーなので、Twitterアカウントは不要です。
旬な話題を追いかけられるように、TwitterとGoogleのトレンドワードを表示してワンクリックで検索できるようにしました。
また、検索キーワードに該当するAmazonの関連商品が表示されるようになっています。
タブっぽく並んだ検索結果は最大10件まで表示可能。
日本語投稿の検索に限定しているので、Twitterオフィシャルの検索よりも使い勝手はよろしいかと思われ。
検索結果は1分間隔で自動的に更新されます。
検索したキーワード群はクライアントPC(分離ストレージ)に保存されるので、次回起動時も前回の状態が復元されてアラ便利w
まぁ、百聞は一見にしかず。一度使ってやってみてください。


WebClientリクエストがうまく動かない件

/ Silverlight

またまたTwitterマーキーネタ。
5分おきに実行されるトレンドの自動更新がなぜかうまく機能していないようなので、DispactherTimerを只のTimerに変えてみたり、PHPプロキシ側で有効期間のヘッダを追加してみたりしたのですが、状況変わらず。
タイマ処理自体は動いているようだし、リクエスト処理も正しく呼ばれているようなのですが、よく分からないのは、オンブラウザでは問題なくて、ブラウザ外実行時のみダメってところ。

結局、散々いじり回した挙句に辿りついた答えは、電力使用率ガジェットのときにもハマったWebClientのキャッシュ絡みの挙動。
ググると同様の事象が報告されていますが、なぜかWebClientによるリクエストがサーバまで届かずにキャッシングされている情報を返して「やったふり」をする、という現象が発生しとりました。

スマートな解決法が分からないので、電力使用率ガジェットと同様、「APIコール時のURL末尾にランダム文字列をパラメータとしてくっつけてユニークな形にしてキャッシュが使われないようにする」、という強引な形で回避しましたが、もはや自分の中では、これをSilverlightでWebサービス使うときのデフォルト実装にせざるをえない感じです。
Silverlight3の頃にWCF使ったときは問題なかった気がしますが、もしかしてクロスドメインアクセスが関係してるのかなぁ。

# 全然関係ないけど、サイトのCSS少しいじるかなぁ…
# どう考えても字がデカすぎるでしょ…