テスターですが何か?

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

クラウディアタイマー2 part2 (モバイル版を公開)

leave a comment »

先にフルブラウザ版を公開したクラウディアタイマーですが、モバイル版(スマホ向け)を公開しました。

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

2012-04-24T01-28-57

2012-04-24T01-28-46

フルブラウザ版が光回線推奨なので、ADSL・3G回線の人は「for Mobile」のリンクからモバイル版を利用してください。

【注意】

  • iOS5+Safari, Android4(標準ブラウザ), Windows7+IE9/Chrome18で動作確認しています。Android4のChromeでは正しく動作しません
  • モバイル版でも4.5MBのJSONデータをダウンロードします、回線が細い人は表示に時間がかかるかもしれません。

image

解説

基本的な仕組みはフルブラウザ版と同じで、画像ではなくCanvasでクラウディアを描画しています。ただ、モバイル版は以下の技術要素を使って、ASP.NET MVC4らしさを出しています。

  • jQuery Mobile
  • DisplayModes
  • ViewSwitcher

jQuery Mobile

モバイル版の画面はjQueryMobileで作っています、スマホ向け(タッチUI向け)の画面が作りやすいのはいいのですが、ある程度カスタマイズしないとjQueryMobileで作ったことがバレバレなのが難点ですね。jQueryMobileのスタイルシートで要素単位にフォントが指定されているので、WebFontを反映させるためにfont-familyの指定を全部削除しましたw

2012-04-24T01-28-57

DisplayModes

フルブラウザ用とモバイルブラウザ用のViewをそれぞれ作成し、DisplayModesの機能を利用してAndroid,iOSからのリクエストが来た場合はモバイルブラウザ用のViewを表示するようにしています。DisplayModesを使用すると特別な振り分けロジックを記載しなくてもデバイスに応じて表示するViewを切り替えることができます。

image

DisplayModesについての解説は以下のサイトにわかりやすく記載されているので、詳細を知りたい人は参考にしてください。

ASP.NET MVC 4 : モバイル デバイスの検出とビューの切り替え機能 (1)

ViewSwitcher

回線が細い人向けに、デスクトップ用Viewからモバイル用Viewへの切り替えにViewSwitcherの機能を利用しています。フルブラウザ用の画面の「for Mobile」のリンクからモバイル用の画面へ切り替えることができます。

キャプチャ2

デフォルトで自動生成されるViewSwitcherのHTMLは使用せず、フルブラウザからモバイルブラウザ向けの切り替えとして、以下のようにHTMLを記載しています。ViewSwitcherコントローラーのSwitchViewアクションをモバイル用に切り替えとして呼び出しています。

<a href="ViewSwitcher/SwitchView?mobile=True&returnUrl=@Request.Url.PathAndQuery" rel="external">

<div style="background-color: #38A3DB; height: 120px">

<span class="TileContents">for</span><br />

<span class="TileContents2"> Mobile</span>

</div>

</a>

また、モバイル用の画面からフルブラウザ用の画面への切り替えは「For FullBrowser」で行います。ソースは以下のとおりです、今度はモバイルからフルブラウザ用への切り替えです。

<li>@Html.ActionLink("for FullBrowser", "SwitchView", "ViewSwitcher", new { mobile = false, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })</li>

キャプチャ

ViewSwitcherについては以下のサイトで素晴らしくまとめられているので、詳細を知りたい人は参考にしてください。

ASP.NET MVC 4 : モバイル デバイスの検出とビューの切り替え機能 (2)

ソースはこちらからダウンロード可能です。「ClaudiaTimer2_part2.zip」をダウンロードしてください。ソースのビルドにはVisual Studio 11 Beta Express for Web(たぶんVisual Web Developer 2010でも可)と、ASP.NET MVC4 Betaが必要です。

Written by david9142

2012年4月24日 @ 2:02 AM

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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