クラウディアタイマー2を色々と更新しました。
http://david9142.cloudapp.net/CT/
- Webフォントを「あんず」に変更
- ダウンロードするJSON形式のクラウディアを最適化して通信量を約25%削減
- デスクトップ版を公開
最近「クラウディアタイマー」でググると検索結果に表示されるようになりました。再公開して1ヶ月近くになると思いますが、何で今までクロールされなかったんだろう。今回の更新内容を解説します。
Webフォントを「あんず」に変更
これまでデコもじの「ゆる字フォント」を使用していまいした、手書き風文字で気に入っていたのですが無償利用のためにはページ下部にロゴが表示されます。
これがデスクトップ版の作成時にネックになってしまうので、ロゴを表示しないフリーのフォントを探していました。フリーのWebフォントサービスはどこもロゴなりブログパーツのようなものを表示させなければならず（当たり前と言えば当たり前なんですが）、通常のフォントをサーバー上にアップロードしてWebフォントとして使用させることにしました。手書き風フォントってかなりたくさんありますが、どれも2MB級なんですよね…フルブラウザ版だと10MB超えJSONのダウンロードを要求するサイトなので、更にフォント2MBもダウンロードさせるわけにはいきません。
サイズの小さい手描き風フォントとして見つけたのは「あんずもじ始」です。漢字を小学校で習う約1000文字に限定してサイズを抑えている(900KB)ようです。以下のサイトで公開されています。
あんずいろapricot×color
http://www8.plala.or.jp/p_dolce/index.html
ただでさえMB級のJSON形式データを転送しているWebロールの負荷を減らそうと思い、フォントはBlobストレージに置きました。するとChromeではちゃんと表示されるのに、IE9ではフォントが表示されません。「F12開発者ツール」で調べてみると、コンソールに
「CSS3117: @font-face が cross-origin 要求に失敗しました。リソースアクセスが制限されています」と表示されていました。
詳しくは調べてはいませんが、異なるドメインでのリソースのアクセスがIE9では制限されているようです。Webロールは「*.cloudapp.net」、Blobストレージは「*.blob.core.windows.net」なので、ことなるドメインと判断されるようです、まぁ…ドメインが違うことは違うんですが、こちらとしては同じAzureのサービスとして使っているのですが…FireFoxやChromeではこのような制限がないようです。IEもインターネットオプションから設定を変更可能ですが、変更を強制するわけにいかないので、IE用のフォントファイルをWebロールに置くことにしました。CSSやJavaScriptは問題ないのに、なんでフォントだけ？とは思いますが、詳しく調べていません。
このようにフォントは表示されます、配布サイトと印象が異なるのはフォントサイズが違うからでしょうか。
JSONデータを約25%削減
このアプリ最大のネックをやや改善しました。フルブラウザ版では約13.5MB、モバイルブラウザ版でも4.4MBのJSON形式のクラウディアをダウンロードする必要がありました。（「JSON形式のクラウディア」という表現につっこまないでください）今回、約20～30%データ量を削減しました。
| 改善前 | 改善後 | 削減率 | |
| フルブラウザ版 | 13.5MB | 10.1MB | 25% |
| モバイルブラウザ版 | 4.4MB | 3.0MB | 31% |
一応、削減したことを証明する画像を貼っておきます。
フルブラウザ版
モバイルブラウザ版
データの削減に当たっては、まず画像を小さくしました。フルブラウザ版は1376×768でも縦スクロールが表示されないように、モバイルブラウザ版はデスクトップ版と共通の大きさにしました。あとは、canvasに長方形を描画する際に「X軸、Y軸、縦幅、横幅、色情報」の5つのプロパティを持ったJSON化するオブジェクトを作成していましたが、縦幅を1に固定してデータを作成することで描画する長方形の数が増えました(約31000個)が、プロパティが1つ減ったことでJSONデータを小さくすることができました。
デスクトップ版を公開
デスクトップアプリ(Windows Form)用クラウディアタイマーを公開しました。これまでのクラウディアタイマーを踏襲したものになっています。Blobストレージ上にOneClickInstaller用のインストーラーを配置しているので、「for Desktop」のリンクをクリックするとインストールが開始されます。
もちろん証明書は使っていないので警告が出ますが、インストールを実行してください。
アプリが起動するとデスクトップ左上にモバイルブラウザ用のページが表示されます。位置は動かせません。
秒数を入力すると、モバイルブラウザ版のサイズでカウントダウンが表示されます。
他のウィンドウよりも前面に表示されます。このようにPowerPointを全面表示しても、その前面に表示されます。
アイコンはあの画像を使わせていただきました。問題があればすぐに変更します。
技術的な話を少し、このアプリはWindowsFormにWebBrowserコントロールを貼り付けてモバイル版のWebページを表示しています。ウィンドウの枠を表示させないために、「FormBorderStyle」をnoneに、前面に表示させるために「TopMost」をtrueに設定しています。あと、記述しているソースはこれだけです。
[DllImport("urlmon.dll", CharSet = CharSet.Ansi)]
private static extern int UrlMkSetSessionOption(int dwOption, string str, int nLength, int dwReserved);
private void Form1_Load(object sender, EventArgs e)
{
this.StartPosition = FormStartPosition.Manual;
this.DesktopLocation = new Point(0, 0);
const int URLMON_OPTION_USERAGENT = 0x10000001;
string ua = "iPhone";
UrlMkSetSessionOption(URLMON_OPTION_USERAGENT, ua, ua.Length, 0);
webBrowser1.Navigate(http://david9142.cloudapp.net/CT/);
}
画面左上に表示させるために、StartPositionプロパティをManualに設定して、DestopPositionを(0,0)のいちに設定しています。また、モバイル用のページを表示させるために、ブラウザのUser-Agent文字列を”iPhone”にしています。
ソースはこちらからダウンロード可能です。「ClaudiaTimer2_part3.zip」をダウンロードしてください。ソースのビルドにはVisual Studio 11 Beta Express for Web(たぶんVisual Web Developer 2010でも可)と、ASP.NET MVC4 Betaが必要です。
テスターですが何か？ 