連載 .NETでモバイル・サイト開発を始めよう 第2回 携帯サイトの「ドコモ、au、SoftBank」への対応 シグマコンサルティング　菅原 英治 2007/04/13

Page1 Page2 Page3 Page4 Page5 Page6

　前回は、ASP.NETによる携帯サイト（＝モバイルWebサイト）開発の現状を示し、現実的な開発方法の一手段としてASP.NETのデバイス・フィルタ機能を使ったデバイスの識別方法を説明した。今回もこれに引き続き、デバイス別の対応を行う方法として、デバイス・フィルタとカスタム・コントロールの組み合わせ方（絵文字コントロールの作成）や、デバイス・アダプタの活用方法について紹介する。

■3. デバイス別の対応を行うには

　まずは前回説明したデバイス・フィルタを活用して携帯デバイスの種類（ドコモ、au、SoftBank）を識別し、それぞれのデバイス向けに適切な絵文字（ など）を出力する簡単なサンプル・プログラムを作成してみる。絵文字の出力は、カスタム・コントロールによって行う。従ってここでは、カスタム・コントロールの利用方法を解説する。

　なお以降では、前回作成したサンプル・プログラムを拡張していく。

●3.1. カスタム・コントロールについて

　詳しい利用方法の解説に入る前に、「絵文字を表示するのに、なぜカスタム・コントロールを利用する必要があるか」について説明しておきたい。

○3.1.1. カスタム・コントロールを利用する理由

　一般的に、モバイル・サイトを構築するうえで、下記の項目は非常によく挙がる要件だろう。

• 画面を絵文字で装飾する（auでは<img>タグのlocalsrc属性で指定する）
• テキストボックスに入力モードを設定する（ドコモのistyle属性、auのformat属性、SoftBankのmode属性*1など)

*1 SoftBankのmode属性の定義表は、HTML編（PDF）の177ページにある。

　既存のモバイル・コントロールでこれらの要件を実現するのは、実は意外と難しい。なぜならばモバイル・コントロールでは、通常のWebコントロールのようにAttributesプロパティが存在しないため、任意の属性を追加することができないからだ。例えばモバイルWebフォーム用のImageコントロールでは、下記のコードのようにAttributesプロパティを利用してlocalsrc属性を追加することはできない。

Image1.Attributes["localsrc"] = "44"; //44:太陽

mobile:ImageコントロールのImage1にlocalsrc属性の追加を試みたコード

　カスタム・コントロールを利用すれば、この課題を解決できる。カスタム・コントロールでは、任意のテキスト（HTMLコード）をレンダリングすることが可能だからだ。これがカスタム・コントロールを利用する理由である。

○3.1.2. カスタム・コントロール「絵文字コントロール」の作成

　それでは、カスタム・コントロールを作成してみよう。ここで作成する「絵文字コントロール」の仕様を以下にまとめる。

【絵文字コントロールの仕様】

• ドコモ、au、SoftBankのキャリア種別の情報を持つ
• キャリア種別ごとに、適切な「晴れ」絵文字をレンダリングする
• ただし、コントロール自身はキャリアの種別の判断は行わない

　まず、カスタム・コントロールを定義・実装するためのクラスを追加する。2.3.5で追加したクラス・ライブラリのプロジェクト「Mlib」に対し、「Web カスタム コントロール」を追加する。

カスタム・コントロールを定義・実装するためのクラスの追加

「Web カスタム コントロール」を選択する。 　 ファイル名を入力する。ここでは「Pictogram.cs」を入力している。

　ファイルを追加したら、下記のコードに書き換えよう。ここで定義・実装しているカスタム・コントロールの「晴れ」絵文字クラスが、モバイル・コントロールのLabelクラス（System.Web.UI.MobileControls名前空間）を継承している点に、特に注意してほしい（※項目テンプレートで自動生成されたひな型を書き換えている）。

using System.Web.UI; namespace Mlib {   // キャリア種別   public enum CarrierType   {     DoCoMo,     Au,     SoftBank   }   // 絵文字クラス   public class Pictogram : System.Web.UI.MobileControls.Label   {     private CarrierType m_carrier;     public CarrierType Carrier     {       set { this.m_carrier = value; }       get { return this.m_carrier; }     }     // レンダリング処理     protected override void OnRender(HtmlTextWriter writer)     {       string text = "";       // キャリア別に「晴れ」絵文字を出力する       if (this.m_carrier == CarrierType.DoCoMo)         text = "&#xE63E;";               // ドコモ：晴れ       else if (this.m_carrier == CarrierType.Au)         text = "<img localsrc=\"44\">";  // au：晴れ       else         text = "\x1B$Gj\x0F";            // SoftBank：晴れ       // レンダリング       writer.Write(text);     }   } }

絵文字コントロールのコード（Pictogram.cs）

「SoftBank:晴れ」で指定されている「\x1B」（16進数）はASCIIコードの「27」（10進数）で、「\x0F」（16進数）はASCIIコードの「15」（10進数）だ。「\x」はリテラルとして指定可能な16進数エスケープシーケンスで、その後の「1B」や「0F」が16進数の数値である。

　まず、3キャリアの種別を列挙体（enum）として定義し、カスタム・コントロールのプロパティに利用している。レンダリング処理を実現するOnRenderオーバーライド・メソッドにおいてキャリアを判断し、それぞれのキャリアに応じた「晴れ」絵文字のテキストを出力している。

　続いて、この絵文字コントロールをモバイルWebフォームで利用してみる。

INDEX
	［連載］.NETでモバイル・サイト開発を始めよう
	第2回 携帯サイトの「ドコモ、au、SoftBank」への対応
	1．カスタム・コントロールの作成
	2．カスタム・コントロールの利用
	3．デバイス・アダプタについて
	4．ブラウザ定義ファイルの作成
	5．デバイス・アダプタの作成
	6．デバイス・アダプタの利用

　

「.NETでモバイル・サイト開発を始めよう」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）