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

第2回 携帯サイトの「ドコモ、au、SoftBank」への対応

シグマコンサルティング 菅原 英治
2007/04/13

 前回は、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でモバイル・サイト開発を始めよう」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH