テスターですが何か?

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

クラウディアタイマー2 part1(フルブラウザ版を公開)

leave a comment »

去年の夏頃にサクッと2日くらいでとりあえずつくって、半年近く完全に放置したクラウディアタイマーをこっそりと更新しました。とりあえずフルブラウザ向けのコンテンツだけ公開しました。

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

image

image

【注意】

  • Windows7+IE9, Windows7+Chrome18で動作確認してます。IE9未満のレガシーブラウザでは動きません
  • あとで説明しますが、超大量のデータをダウンロードします。光回線推奨です、ADSLではダウンロードが完了しない場合があります

毎回のことですが、こういうテーマで作っています

簡単なことをいかに複雑に実装するか

趣味で作ってるわけですから、効率とか生産性とか、そんなことは一切無視して自分が作りたいように作りたいんですよ。使う人はどうせ自分だけなので、いくら不便になろうが目的よりも手段を最優先しています。

技術的には自分が知っている最大限(実際にはややキャパを超える程度)の要素を活用しています、もう一度いいますが、自分が知っている技術要素を活用することを目的にしています。

Canvas&WebAPI

クラウディアの描画にCanvasとWebAPIを使用しています。こちらのエントリーでも説明しましたが

画像を画像のまま描画してもおもしろくないよね?

という信念のもと、JPEG画像を画面に描画していません。画像はAzureのBlobStorageに置いてあります、WebRoleから画像をダウンロードし、ピクセル単位で色情報を解析しています。データを小さくするために隣接するピクセルの色が同じであれば、横幅の値を増やしています。そして、WebAPIを使用してクライアントへJSON形式で配信しています。データはこんな感じです、X軸・Y軸・色情報・横幅情報が含まれています。

[{"c":"#FEFFFF","l":2,"x":176,"y":32},{"c":"#FFFFFD","l":2,"x":182,"y":32},{"c":"#FFFEFF","l":6,"x":186,"y":32},{"c":"#FFFEFF","l":1,"x":214,"y":32}

で、このJSON形式になったクラウディアデータをクライアントのJavaScriptでCanvasに描画しています。

まとめると

  • 画像はBlobStorageにしかない
  • WebRoleで画像をピクセル単位で色情報に変換
  • クライアントはWebAPIからJSON形式でクラウディアの色情報をダウンロード
  • 画像ではなく、色情報を使用してCanvasにクラウディアを描画

image

結果、62KBのJPEG形式データが、3.5MBのJSON形式データになりましたwww まともにJSONデータを作ると87MBになったので、これでも頑張ってダイエットしたほうなんですけどね。ほらほら、IE9でクラウディアを描画すると4枚の画像分のピクセル色データを15MBをダウンロードしています。(10秒単位で画像を切り替えるため)結果、ADSLや3G回線ではおそらくダウンロードしきれない量になりました。光回線推奨です。

15MBのJSONデータ…( ゜д゜)ポカーン すみません、今後ダイエット予定です。

image

WebFont

2つ目のこだわりはフォントです。CSSのWebFontを使用して、ブラウザにクライアントにインストールされていないフォントを使用して文字を描画しています。

デコもじの「ゆる字」フォントを使用しています。

image

ただ、リクエスト毎にWebRoleから非同期でデコもじのサーバーへアクセスしてフォント情報を取得し、クライアントへ返しているので。ページをロードしたあと1~2秒ほどデフォルトのフォント(メイリオ?MS Pゴシック?)が表示されます。ちょっと情けないですが、仕組み上はしょうがないので、我慢しています。ここも別のしくみで改善できるようであれば頑張ってみます。

今後の予定

堂々と画面に書いてありますが、いろんなプラットフォーム上で動作するクラウディアタイマーを作成する予定です。まずは、スマートフォンや光回線以外のデスクトップで動作するモバイル向けでしょうか。そもそもスマートフォンで見るとレイアウトが崩れまくりですし。

3x8y

ただ、Display ModesとViewSwitcherを使いたいだけなんですけどね。鋭意作成中なんですが、サイズを小さくしてもデータを5MBダウンロードしないといけないんですけどね。思い切ってハードルの高いアプリにしようかな。

Written by david9142

2012年4月22日 @ 10:10 AM

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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