連載 .NETでモバイル・サイト開発を始めよう（特別編） モバイルWeb開発に失敗しない鉄則 シグマコンサルティング　菅原 英治 2007/10/19
Page1 Page2 Page3

■裏技TIPS：ユーザー・コントロールの簡単な作成方法

　第2回では、カスタム・コントロールを作成する方法を解説した。今回はASP.NET標準コントロール（＝Webサーバ・コントロール）を利用し、ユーザー・コントロールを簡単に作成する方法として裏技的なTIPSを紹介する。

●任意のタグを出力するユーザー・コントロールの作成（<hr>タグの出力を例に）

　モバイルWebフォームでは、モバイルWebフォーム・コントロールしか利用できない。そのため、例えばページ上に区切りの水平線を表示する<hr>タグなどを記述しても出力されない。

　任意のタグを出力する方法として、ASP.NET標準コントロールのLiteralコントロール（＝asp:Literalコントロール）を利用する方法がある。モバイルWebプロジェクトに、「モバイルWebユーザー・コントロール」（HorizontalRule.ascx）を追加し、以下のコードを記述する。

……省略…… <asp:Literal id="Literal1" runat="server" text="<hr />"></asp:Literal>

<hr>タグを出力するユーザー・コントロール（HorizontalRule.ascx）

ソースのダウンロードはこちらから

※このコントロールのコードビハインド・ファイル（HorizontalRule.ascx.cs）は何も変更する必要がない。

　このコードは単に、asp:Literalコントロールを配置して、そのText属性に「<hr />」を設定しているだけである。

　以上のコードを記述し終わったら、モバイルWebプロジェクトを実行してみてほしい。画面上に（<hr />タグによる）区切り線が表示されることが確認できるはずだ。

●テキストエリア・コントロールの作成と利用時の注意

　先ほど説明した「ユーザー・コントロールの簡単な作成方法」の応用編として、モバイルWebフォームでは通常利用できないテキストエリア・コントロールを出力する方法を紹介したい。

○テキストエリア・コントロールの作成

　ここでは、ASP.NETの2つの標準コントロール、LiteralコントロールとTextBoxコントロール（＝asp:Literalコントロールとasp:TextBoxコントロール）を利用する。モバイルWebプロジェクトに、モバイルWebユーザー・コントロール（TextArea.ascx）を追加し、以下のコードを記述する。

……省略…… <asp:literal id="Literal2" runat="server"></asp:literal> &nbsp;<asp:textbox id="TextBox1" runat="server" textmode="MultiLine"></asp:textbox> <asp:literal id="Literal1" runat="server"></asp:literal>

テキストエリアを出力するユーザー・コントロール（TextArea.ascx）

ソースのダウンロードはこちらから。

　テキストエリアを表示するためのasp:TextBoxコントロールと、その前後に改行として「<br />」を出力するためのasp:Literalコントロールを追加している。またasp:TextBoxコントロールは、テキストエリアとして出力するために、TextMode属性に「MultiLine」を設定している。

　続いて、モバイルWebユーザー・コントロールのコードビハインド・ファイル（TextArea.ascx.cs）を修正する。コード・ビハインド・ファイルの修正ポイントは、ユーザー・コントロールにText属性を用意し、自身に配置されたTextBoxコントロールのText属性を公開することだ。これによって、このユーザー・コントロールを利用するときに、テキストエリアに入力された値を取得したり、逆に初期値などを設定したりすることが可能となる。具体的には以下のコードを記述する。

……省略…… // ユーザー・コントロールのTextプロパティを定義 public string Text {   get { return TextBox1.Text; }   set { TextBox1.Text = value; } } ……省略……

テキストエリアを出力するユーザー・コントロールのコードビハインド（TextArea.ascx.cs）

ソースのダウンロードはこちらから。

　以上のコードを記述し終わったら、モバイルWebプロジェクトを実行してみてほしい。画面上にテキストエリアが出力され、そこに入力された値がText属性により取得できることを確認できるだろう。

○テキストエリア・コントロールの利用時の注意点

　さて、作成したテキストエリア・コントロールだが、利用時に1点注意が必要だ。それは、次のパターン以外の動作で使用すると、Text属性の値が保存されないという点だ。

（1）同一フォームへのポストバック
（2）ポストバックによる1回目のフォーム遷移

　例えば、次のような場合、Text属性の値が保存されない。

• 1画面にForm1とForm2の2つのフォームを配置する
• Form1にテキストエリア・コントロールと［進む］ボタン（＝Form2をアクティブにするボタン）を配置する
• From2に［戻る］ボタン（＝Form1をアクティブにするボタン）を配置する

　このとき、Form1のテキストエリアに値を入力後、［進む］ボタンでForm2に遷移したとする。その後、［戻る］ボタンでForm1に遷移する。遷移後のForm1では、テキストエリアに入力された値が保存されておらず、初期化されてしまうのだ。

　この問題はモバイルWebユーザー・コントロールで、ASP.NET標準コントロールのTextBoxコントロール（＝asp:TextBoxコントロール）を利用しているため、ビューステート（ViewState）の管理がうまく行われずに発生する問題と考えられる。対応方法としては、このコントロールを利用する画面にViewState変数を用意し、画面側で別途Text属性を保存するとよい。

【コラム】Visual Studio 2008でのモバイルWebフォームについて 　現在のところ、Visual Studio 2008（執筆時点では「Beta 2」が最新）では、モバイルWebフォームのページをデザイン・ビューで表示することができない。ただし、ソース・ビューでの開発は行うことができる。 　GUIから、「モバイルWebフォーム」のページの追加などを行いたい場合は、以下の手順を実行するとよい。 （1）ここにあるテンプレート・ファイルをダウンロードする ※リンク先の中ほどにある［Attachment(s): ASP.NET Mobile Templates.zip］というリンクから、ダウンロードできる （2）ダウンロードした.zipファイルを解凍後、テンプレートをインストールする （3）Readme.txtの内容に従って作業する

■

　本稿では、「第 55 回 MSDN オフラインセミナー」の「ASP.NET モバイル Web アプリケーション再入門」の内容を、筆者が特に重要だと考えたものを整理して紹介した。まず入力画面を作成する際の鉄則として、「1ページに入力項目が多くある場合は、フォームを分割すべし」とし、その理由を説明した。続いて、モバイルWebフォームで画面遷移する際の鉄則として「画面を遷移する際には、なるべくリダイレクトを避け、ハイパーリンクで遷移するべし」とし、その理由を説明した。また、絶対URLでリダイレクトする際の注意点について説明した。そして最後に、TIPSとして、ユーザー・コントロールの簡単な作成方法を紹介した。

　本稿の作成に当たって、マイクロソフト株式会社　デベロッパー＆プラットフォーム推進部の物江 修 氏に多大なるご協力をいただいた。ここでお礼を申し上げたい。

INDEX
	［連載］.NETでモバイル・サイト開発を始めよう（特別編）
	モバイルWeb開発に失敗しない鉄則
	1．第1の鉄則：1ページに入力項目が多くある場合は……
	2．第2の鉄則：画面を遷移するときは……
	3．裏技TIPS：ユーザー・コントロールの簡単な作成方法

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

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