ASP.NET MVCで作る携帯サイト(1)

C#

っと、PHPの書籍にありそうなタイトルにしてみたり(・∀・)


まあ、まずは動いている例からどぞ(´･ω･`)

サンプル on Windows Azure

http://usaxusa.cloudapp.net/Mobile/
携帯の実機かエミュレーターでアクセスしてみてくださいな。
そして何か不具合を見つけたら教えてください(´д｀;)

携帯サイトの作り方

携帯サイトを作るときにまず考慮する必要があるのが、文字コードと絵文字の扱い。
UTF-8以外は考慮しない(それで見られない機種は捨て)、絵文字は入力段階で削除するとかなら、まだ対応も簡単になりますが(・ω・)
PC/携帯双方からのアクセスを許可し、DoCoMo、auに対してはSjift_JISを使用、Softbankとそれ以外(PC)に対してはUTF-8を使用し、絵文字についてはキャリア間で変換を行う…なんていう話になると、ちょっと面倒になってきます(´д｀)


まあ、携帯サイトを.NETで作っている例ってあまり多くないと思いますけど(・ω・)
あるいは、なめてかかって填っているケースとか？
Webの基本を理解せずに、PCと同じ感覚でWeb Forms的なやりかたでやって、行き詰まる…とか、実際ありそうですが。


自分も、PHPとJavaでは携帯サイトをやったことはあっても、.NETでという事例は無くて。
っで、PHPとかLL方面については、先人の知恵というか、携帯用のライブラリが割とそろっていて、それを使えば良かったりして。
Javaについては自前で作っていたんですが、最近ならmobyletとかありますしね。


でも、.NETには無い(´・ω・`)
…っというわけで、.NET用の携帯絵文字変換ライブラリを作ってみました。*1

動作内容

以下、FireMobileSimulatorを使って、設定を切り替えて同じ画面を表示したものになります。




  • PC

そして絵文字の部分のソース(aspx)はこんな風になっているんですが。

<%= Html.Pictgram( Carrier.DoCoMo, 125 ) %>:DoCoMo 125<br/>
<%= Html.Pictgram( Carrier.Au, 181 )%>:au 181<br/>
<%= Html.Pictgram( Carrier.Softbank, 230 )%>:Softbank 230<br/>

Html.Pictgram()自体は、Unicodeで1文字出力しているだけの処理で。
今回作ったライブラリでキャリア毎の絵文字変換を行い、上記画像のような表示になっています。
なお、出力されたHTMLソースを表示してみると、こんな感じになっていて。

&#63879;:DoCoMo 125<br/>
&#63880;:au 181<br/>
&#63881;:Softbank 230<br/>

&#xF6FB;:DoCoMo 125<br/>
&#xF6FC;:au 181<br/>
&#xF740;:Softbank 230<br/>

&#xE21C;:DoCoMo 125<br/>
&#xE21D;:au 181<br/>
&#xE21E;:Softbank 230<br/>
  • PC(imgタグに置換)
<img src="/Images/Pictgrams/DoCoMo/125.gif" />:DoCoMo 125<br/>
<img src="/Images/Pictgrams/Au/181.gif" />:au 181<br/>
<img src="/Images/Pictgrams/Softbank/230.gif" />:Softbank 230<br/>

キャリア毎に、出力方法の変更もできるようにしています。


あと、入力欄に文字(絵文字)を入力すると、その下に内部で使用しているUnicodeの16進が表示さるようになっています(・ω・)

DoCoMo、Softbankについてはキャリアが規定しているUnicodeの値を使用していますが、auについてはキャリアの値を使うと衝突してしまうので、裏Unicodeを使うようにしています。
また、Shift_JISで入力された絵文字のUnicodeへの変換について、DoCoMoの仕様はEncoding.GetEncoding()で取得できるものに一致しますが、auとSoftbankについては一致しません。
なので、独自のエンコード処理をライブラリで行っています。
ちなみにAzure上の設定では、入出力についてはDoCoMoとauがShift_JIS、SoftbankとPCがUTF-8を使う設定にしています。


っというわけで、今回ライブラリとして作った機能は、

になります。


っで、ソースと解説についてはまた明日(・ω・)

Windows Azureにおける問題点(´・ω・`)

文字コード、絵文字の話では無いんですが、Azure上での動作でちょっと気になった点について。


Cookieをサポートしない端末用に、Web.configにを設定してみたんですが。
Azure上で動かすと、内部のエンドポイントのポート付きURL(例:http://usaxusa.cloudapp.net:20002/(S(xxxxxxxxxxxxxxxxxxxxxxxx))/)にリダイレクトされちゃいますね。
ポートの所を削ってアクセスしなおせば動作的には問題無いんだけど、さてどうしたものか(´・ω・`)
とりあえず、サンプルについてはAutoDetectを外していますが。
この対策を考えないと、Azure上で携帯サイト〜というのはちょっと問題あるかな〜(´д｀;)

*1:最近はRIA ServicesやAndroidに浮気していたので、遅くなってしまったけど(´д｀;)