テスターですが何か?

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

クラウディアタイマー2 part3 デスクトップ版公開

leave a comment »

クラウディアタイマー2を色々と更新しました。

http://david9142.cloudapp.net/CT/

  • Webフォントを「あんず」に変更
  • ダウンロードするJSON形式のクラウディアを最適化して通信量を約25%削減
  • デスクトップ版を公開

最近「クラウディアタイマー」でググると検索結果に表示されるようになりました。再公開して1ヶ月近くになると思いますが、何で今までクロールされなかったんだろう。今回の更新内容を解説します。

Webフォントを「あんず」に変更

これまでデコもじの「ゆる字フォント」を使用していまいした、手書き風文字で気に入っていたのですが無償利用のためにはページ下部にロゴが表示されます。

image

これがデスクトップ版の作成時にネックになってしまうので、ロゴを表示しないフリーのフォントを探していました。フリーの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 要求に失敗しました。リソースアクセスが制限されています」と表示されていました。

image

詳しくは調べてはいませんが、異なるドメインでのリソースのアクセスがIE9では制限されているようです。Webロールは「*.cloudapp.net」、Blobストレージは「*.blob.core.windows.net」なので、ことなるドメインと判断されるようです、まぁ…ドメインが違うことは違うんですが、こちらとしては同じAzureのサービスとして使っているのですが…FireFoxやChromeではこのような制限がないようです。IEもインターネットオプションから設定を変更可能ですが、変更を強制するわけにいかないので、IE用のフォントファイルをWebロールに置くことにしました。CSSやJavaScriptは問題ないのに、なんでフォントだけ?とは思いますが、詳しく調べていません。

このようにフォントは表示されます、配布サイトと印象が異なるのはフォントサイズが違うからでしょうか。

image

image

JSONデータを約25%削減

このアプリ最大のネックをやや改善しました。フルブラウザ版では約13.5MB、モバイルブラウザ版でも4.4MBのJSON形式のクラウディアをダウンロードする必要がありました。(「JSON形式のクラウディア」という表現につっこまないでください)今回、約20~30%データ量を削減しました。

改善前 改善後 削減率
フルブラウザ版 13.5MB 10.1MB 25%
モバイルブラウザ版 4.4MB 3.0MB 31%

 

一応、削減したことを証明する画像を貼っておきます。

フルブラウザ版

image

モバイルブラウザ版

image

データの削減に当たっては、まず画像を小さくしました。フルブラウザ版は1376×768でも縦スクロールが表示されないように、モバイルブラウザ版はデスクトップ版と共通の大きさにしました。あとは、canvasに長方形を描画する際に「X軸、Y軸、縦幅、横幅、色情報」の5つのプロパティを持ったJSON化するオブジェクトを作成していましたが、縦幅を1に固定してデータを作成することで描画する長方形の数が増えました(約31000個)が、プロパティが1つ減ったことでJSONデータを小さくすることができました。

デスクトップ版を公開

デスクトップアプリ(Windows Form)用クラウディアタイマーを公開しました。これまでのクラウディアタイマーを踏襲したものになっています。Blobストレージ上にOneClickInstaller用のインストーラーを配置しているので、「for Desktop」のリンクをクリックするとインストールが開始されます。

image

もちろん証明書は使っていないので警告が出ますが、インストールを実行してください。

image

アプリが起動するとデスクトップ左上にモバイルブラウザ用のページが表示されます。位置は動かせません。

image

秒数を入力すると、モバイルブラウザ版のサイズでカウントダウンが表示されます。

image

他のウィンドウよりも前面に表示されます。このようにPowerPointを全面表示しても、その前面に表示されます。

image

アイコンはあの画像を使わせていただきました。問題があればすぐに変更します。

image

技術的な話を少し、このアプリは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が必要です。

Written by david9142

2012年5月13日 @ 12:39 AM

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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