連載
.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として、ユーザー・コントロールの簡単な作成方法を紹介した。

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

 

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

インデックス・ページヘ  「.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メールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間