| |
|
連載
.NETでモバイル・サイト開発を始めよう
第2回 携帯サイトの「ドコモ、au、SoftBank」への対応
シグマコンサルティング 菅原 英治
2007/04/13 |
|
|
○3.1.3. カスタム・コントロールの利用
続いて、この絵文字コントロールをモバイルWebフォームで利用してみる。
まず、下の画面の手順に従って、カスタム・コントロールをVisual Studio 2005（以下、VS 2005）のツールボックスに登録する。
 |
|
|
| |
 |
ツールボックスの「全般］タブ上で右クリックし、コンテキスト・メニューを表示させる。 |
| |
 |
［アイテムの選択］を選択し、［ツールボックス アイテムの選択］ダイアログを表示する。 |
|
|
|
 |
|
|
| |
 |
［参照］ボタンを押下する。ここでは「D:\mobile\Mlib\bin\Debug\Mlib.dll」を選択する。 |
|
|
|
 |
|
|
| |
 |
カスタム・コントロール「Pictogram」が追加され、チェックボックスがチェックされているのを確認し、［OK］ボタンをクリックする。 |
|
|
|
|
|
| |
 |
［全般］タブ上に「Pictogram」カスタム・コントロールが登録される。 |
|
| VS 2005のツールボックスへカスタム・コントロールを登録する手順 |
ツールボックスへの登録が終わったら、ここで新規にモバイルWebフォーム（m002.aspx）を、Webサイト・プロジェクト「D:\mobile\」内に追加作成する（その際、「モバイル Web フォーム」の項目テンプレートを使わなければならないので間違えないように注意してほしい）。そして、先ほど作成したPictogramカスタム・コントロールをそのフォーム上に配置する。これには、ツールボックスからドラッグ＆ドロップすればよい。
 |
| 新規モバイルWebフォーム（m002.aspx）の作成とカスタム・コントロールの追加 |
| モバイルWebフォームを新規に追加し、それにカスタム・コントロールを追加したところ。 |
| |
|
モバイルWebフォームを追加し、名前を「m002.aspx」とした。 |
| |
|
Pictogramカスタム・コントロール（名前は「Pictogram1」）が追加されている。 |
|
次に、au携帯から接続された場合に備え、“isAu”デバイス・フィルタを追加しておこう。これにはWeb.configに下記のコードを追記する。ここでは便宜的に、au用シミュレータのOpenwave SDKで接続されたときのブラウザ情報として定義した。
<filter name="isAu" compare="Browser" argument="Phone.com"/>
|
続いて、モバイルWebフォーム（m002.aspx）内のPictogramカスタム・コントロールのタグ内部に、下記の（太字の）コードを追記する。
……省略……
<body>
<mobile:Form id="Form1" runat="server">
<cc1:pictogram id="Pictogram1" runat="server">
<DeviceSpecific>
<Choice Filter="isDoCoMo" Carrier="DoCoMo" />
<Choice Filter="isAu" Carrier="Au" />
<Choice Filter="isSoftBank" Carrier="SoftBank" />
<Choice Visible="false" />
</DeviceSpecific>
</cc1:pictogram>
</mobile:Form>
</body>
……省略……
|
|
| モバイルWebフォーム（m002.aspx）に追記するコード |
| キャリア種別によりCarrier属性を決定するように設定する。 |
このコードでは、デバイス・フィルタを利用してキャリア種別の切り分けを行い、配置したPictogramカスタム・コントロールのCarrierプロパティに対し適切な値（“Docomo”“Au”“SoftBank”）を設定している。これにより、先ほどPictogramクラスのOnRenderメソッドに実装したレンダリング処理で、適切な絵文字を出力してくれるようになるはずだ。
また、デバイスがどのキャリアにも該当しない場合は、Visibleプロパティをfalseに設定して、コントロールを非表示にしている。
このように、デバイス・フィルタでカスタム・コントロールのプロパティを設定することが可能だ。
【カスタム・コントロールでのデバイス・フィルタ利用時のエラー】
ここでモバイルWebフォーム（m002.aspx）をソース編集で見てほしい。下の画面のように、VS 2005で<Choice>タグがエラーとして認識されているはずだ。このエラーは実行には問題がないので、無視してしまって構わない。
 |
| エラー表示されるカスタム・コントロールのデバイス・フィルタ |
| カスタム・コントロールでは<Choice>タグがエラーとして認識されてしまう。実際には問題ないので無視してよい。 |
| |
|
<Choice>タグがエラーとして認識されている。 |
|
それでは、実行して結果を確認してみよう。
前回はドコモとSoftBankのシミュレータを利用したが、今回はまた新たに、auのシミュレータである「Openwave SDK 6.2K」も利用する。下記のサイトから、ダウンロードしてインストールを行ってほしい。
Openwave SDK 6.2Kのインストールが完了したら起動してみよう。任意のURLを開く方法を下の画面に示す。
 |
| Openwave SDK 6.2Kで任意のURLを開く手順 |
| |
|
［Go］のURL入力欄にURLを入力して、［Enter］キーで決定する。 |
|
VS 2005のソリューション・エクスプローラでモバイルWebフォーム（m002.aspx）を［スタート ページに設定］して実行してみよう。実行結果は下の画面のようになり、それぞれのデバイスのシミュレータ別に、正しく「晴れ」の絵文字が表示されることが確認できるだろう。またIE（Internet Explorer）での接続時には、何も表示されないことも確認できるはずである。
 |
| モバイルWebフォーム（m002.aspx）の実行結果 |
| デバイスごとに適切な絵文字が表示されている。 |
| |
|
IEでの実行結果。何も表示されない。 |
| |
|
iモードHTMLシミュレータIIの実行結果。「晴れ」絵文字  が表示される。 |
| |
|
Openwave SDK 6.2Kの実行結果。「晴れ」絵文字  が表示される。 |
| |
|
ウェブコンテンツヴューアの実行結果。「晴れ」絵文字  が表示される。 |
|
| 【注意】本連載で使うウェブコンテンツヴューアに関する注意点 |
|
前回は詳しく述べなかったが、本稿のSoftBank携帯では「903T」という端末を利用する。端末を切り替えるには、ウェブコンテンツヴューアのメニュー・バーから［オプション］−［端末］を実行すればよい。
903Tを利用しない場合、本稿のサンプル・プログラムが正しく動作しない可能性がある。例えば初期インストール時点では「813T」となるが、この場合、ウェブコンテンツヴューアのUser-Agent名が「Vemulator」ではなく「Semulator」となってしまうため、SoftBank携帯として識別されなくなってしまうので注意してほしい。
なお、例に挙げた813Tで本稿のサンプル・プログラムを動かしたい場合には、前回作成した「SoftBank、Vodafone、J-PHONEをまとめて判定するフィルタのコード（CapabilityEvaluators.cs）」のコードで「Vemulator」の後に「Semulator」も追加すればよい。ただし、この対応は単に（開発時に必要な）シミュレータへの対応にしかならない。そのため、ウェブコンテンツヴューアでは端末を903Tに切り替えることをお勧めする。
|
○3.1.4. カスタム・コントロールのまとめ
カスタム・コントロールについてまとめる。
- カスタム・コントロールを利用すると任意のテキストをレンダリング可能となる
- モバイル・コントロールで実現できない機能を実装する際に利用する
- デバイス・フィルタと組み合わせて利用できる。
次に、前回から言葉だけは出てきている「デバイス・アダプタ」について解説し、その利用方法を示す。
Insider.NET 記事ランキング
本日
月間
