チュートリアル : 特定のデバイスを対象とした ASP.NET モバイル Web ページのカスタマイズ
ASP.NET モバイル Web ページのデバイス フィルタ、テンプレートのテクニック、およびプロパティ オーバーライド機能を使用することで、コントロールのレンダリングをデバイス別に変えるようにアプリケーションをカスタマイズできます。このチュートリアルでは、Visual Studio を使用してモバイル コントロール用にテンプレート、デバイス フィルタ、およびプロパティ オーバーライドを作成する方法を示します。デバイス フィルタの詳細については、「ASP.NET デバイスのフィルタ処理の概要」を参照してください。
このチュートリアルでは、次の作業を行う方法について説明します。
ASP.NET Web ページおよびモバイル Web 構成ファイルの追加
フォームへの List コントロールの追加
モバイル Web ページへのテンプレート コントロールの追加
コントロール テンプレートの編集
テンプレートに対するプロパティ オーバーライドの適用
.gif "デバイス カスタマ")
前提条件
このチュートリアルを実行するための前提条件は次のとおりです。
Visual Studio または Visual Web Developer Express Edition。
携帯電話などのデバイスでページを実行する機能。デスクトップ ブラウザしかない場合でも、このチュートリアルを実行できます。ただし、デバイス エミュレータを使用すると、このチュートリアルで使用するコントロールの機能をより直接的に確認できます。
Microsoft Internet Information Services (IIS) へのアクセス権と IIS で新しいアプリケーション (または仮想ディレクトリ) を作成するためのアクセス許可。アプリケーションのページには IIS のローカル コピーを使用することをお勧めします。これにより、エミュレータを使用したアプリケーションのテストを最も簡単に実行できます。ただし、IIS を使用してアプリケーションを作成できない場合でも、ASP.NET 開発サーバーでエミュレータを使用できる場合があります。詳細については、「方法 : エミュレータとブラウザで作業する」を参照してください。
Web サイトの作成
「チュートリアル : Visual Web Developer でのローカル IIS Web サイトの作成」などの手順に従って既に Visual Web Developer でローカル IIS Web サイトを作成済みの場合、その Web サイトを利用できるので、次の「モバイル Web ページと構成ファイルの作成」セクションにスキップしてもかまいません。それ以外の場合は、次の手順に従って新しいローカル IIS Web サイトを作成します。
.gif "メモ") メモ : |
|---|
デバイス エミュレータをインストールしている場合は、このチュートリアルで使用する Web サイトにエミュレータからアクセスできることが必要となるため、このチュートリアルでは IIS Web サイトの使用をお勧めしています。ASP.NET 開発サーバーが提供する Web ページにエミュレータがアクセスできる場合は、代わりにファイル システム Web サイトを作成するか、または開くことができます。 |
ローカル IIS Web サイトを作成するには
Visual Studio を開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします
[新しい Web サイト] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[参照] をクリックします。
[場所の選択] ダイアログ ボックスが表示されます。
[ローカル IIS] をクリックします。
[既定の Web サイト] をクリックします。
右上隅にある [新しい Web アプリケーションの作成] アイコンをクリックします。
このアイコンにはラベルがありませんが、マウス ポインタをアイコンの上に置くと、ツールヒントにアイコンの内容が表示されます。
WebSite という名前の新しいアプリケーションが [既定の Web サイト] の下に追加されます。
新しい Web サイトのボックスに「C:\WebSites\DeviceSpecificWalkthrough」と入力し、[開く] をクリックします。
[言語] ボックスの一覧で、作業に使用するプログラミング言語をクリックします。
[OK] をクリックします。
Visual Web Developer により新しい Web サイトが作成され、Default.aspx という名前の新しいページが開きます。
モバイル Web ページと構成ファイルの作成
このセクションではモバイル Web ページを作成します。これは標準の ASP.NET Web ページに似ていますが、モバイル ページ固有の要素がいくつか含まれています。たとえば、すべてのモバイル Web ページは MobilePage から継承する必要があり、Form コントロールを含める必要があります。また、モバイル Web.config ファイルを作成し、後からデバイス固有の機能を作成する際に使用します。
データを表示するコントロールおよびテンプレートの使用をサポートするコントロールも追加します。テンプレートをサポートするモバイル コントロールには、List、ObjectList、および DeviceSpecific の各コントロールがあります。次の手順では List コントロールが使用されます。データ ソースをエミュレートするために、このチュートリアルで後からコードを追加します。
ASP.NET モバイル フォームおよびモバイル Web 構成ファイルを作成するには
Default.aspx ファイルが開いている場合は、これを閉じます。
このチュートリアルではこのファイルを使用しません。
Web サイトに Web.config ファイルがある場合は、これを削除します (既存の Web サイトを使用する場合は、このチュートリアルで作業する間、一時的に Web.config ファイルの名前を変更してください)。
Visual Studio で、[ファイル] メニューの [新規作成] をポイントし、[ファイル] をクリックします。Visual Web Developer Express では、[ファイル] メニューの [新しいファイル] をクリックします。
[新しい項目の追加] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [モバイル Web 構成ファイル] をクリックします。
[OK] をクリックします。
エディタに新しい構成ファイルが開きます。Web.config ファイルの <deviceFilters> セクションに注意してください。これらのフィルタは、このチュートリアルで後から示す一覧に表示されます。
Web.config ファイルを閉じます。
[ファイル] メニューの [新規作成] をポイントし、[ファイル] をクリックします。
[新しい項目の追加] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [モバイル Web フォーム] をクリックします。
[名前] ボックスにファイルの名前を入力します。
たとえば、「TemplateTest」と入力します。
[別のファイルにコードを書き込む] チェック ボックスをオフにします。
[OK] をクリックします。
デザイン ビューに切り替えます。
ツールボックスの [モバイル Web フォーム] タブから、List コントロールを Form コントロールにドラッグします。
デバイス フィルタの選択
これで Web サイト、モバイル コントロール用の Web.config ファイル、および List コントロールを含むフォームの用意ができました。次の手順では、既定のデバイス フィルタを選択します。
デバイス フィルタを使用すると、コントロールの外観を特定のハードウェア デバイス向け、またはデバイスのカテゴリ向けにアプリケーションでカスタマイズできます。カスタマイズは、アプリケーションで使用されるデバイスのブラウザの機能に基づいて行います。デバイス フィルタの詳細については、「デバイス フィルタの概要」を参照してください。
既定のデバイス フィルタを選択するには
List コントロールを右クリックし、[テンプレート オプション] をクリックします。
[テンプレート オプション] ダイアログ ボックスが表示されます。[適用するデバイス フィルタ] ボックスの一覧には、フィルタがまったく表示されていません。これは、コントロールにデバイス フィルタが適用されていないことを意味します。
[編集] をクリックします。
[適用するデバイス フィルタ] ダイアログ ボックスが表示されます。
[使用できるデバイス フィルタ] ボックスの一覧に項目が表示されていない場合は、Web.config ファイルに、各種デバイス フィルタを表す要素で構成される <deviceFilters> セクションがあることを確認します。必要であれば、前の手順を参照してモバイル Web.config ファイルを作成します。
[使用できるデバイス フィルタ] ボックスの一覧の [(既定)] を選択し、[一覧に追加] をクリックします。
[OK] をクリックします。
[テンプレート オプション] ダイアログ ボックスは開いたままとなります。
[適用するデバイス フィルタ] ボックスの一覧で、[(既定)] を選択します。
[マークアップ スキーマ] ボックスの一覧に、[モバイル HTML 3.2 テンプレート] が表示されます。
メモ :[マークアップ スキーマ] フィールドに指定した情報は、デザイナによってだけ使用され、実行時には影響を与えません。このスキーマは、ソース ビューで Microsoft IntelliSense および構文チェックを実現します。
[閉じる] をクリックします。
テンプレートの編集
これで、ページに追加した List コントロールの個々のテンプレートを編集できるようになりました。List コントロールには、次のテンプレートが定義されます。
ヘッダー テンプレート
フッター テンプレート
項目テンプレート
代替項目テンプレート
セパレータ テンプレート
次の手順では、ヘッダー テンプレートと項目テンプレートに Label コントロールを挿入します。さらに、項目テンプレート内の Label コントロールをデータ値にバインドします。
テンプレートを編集するには
List コントロールを右クリックし、[テンプレートの編集] をポイントして [ヘッダーおよびフッター テンプレート] をクリックします。
フォームに [HeaderTemplate] ボックスと [FooterTemplate] ボックスが表示されます。
ツールボックスの [モバイル Web フォーム] タブから、Label コントロールをヘッダー テンプレートにドラッグします。
[プロパティ] ウィンドウで、Text プロパティを Cities List に設定します。
List コントロールを右クリックし、[テンプレートの編集] をポイントし、[項目テンプレート] をクリックします。
フォームに [ItemTemplate] ボックスと [AlternatingItemTemplate] ボックスが表示されます。
ツールボックスの [モバイル Web フォーム] タブから、Label コントロールを項目テンプレートにドラッグします。
Label コントロールを右クリックし、[DataBindings の編集] をクリックします。
[DataBindings] ダイアログ ボックスが表示されます。
[コード式] ボックスに、次の式を入力します。
CType(Container, MobileListItem)(MobileListItem)Container[OK] をクリックします。
List コントロールを右クリックし、[テンプレート編集の終了] をクリックします。
ファイルを保存して閉じます。
List コントロールに表示するデータの作成
データベースまたは他のデータ ソースからのデータの読み取りをエミュレートするには、List コントロールのバインド先となるデータをコードで作成します。
コードでデータを作成するには
ソース ビューに切り替えます。
次のコードをコピーし、ページの <script runat="server"> 要素に貼り付けます。
メモ :サンプルのコードでは、MobileListItem オブジェクトを使用して、Text および Value の 2 つのプロパティへとデータが体系化されています。カスタム クラスを作成し、List コントロールの DataTextField プロパティと DataValueField プロパティを設定して、カスタム クラスのプロパティを使用することもできます。
Private Sub Page_Load() Dim _arrayList As New ArrayList() _arrayList.Add(New MobileListItem("San Francisco", "SF")) _arrayList.Add(New MobileListItem("Seattle", "SEA")) _arrayList.Add(New MobileListItem("New York", "NY")) List1.DataSource = _arrayList List1.DataBind() End Sub
プロパティ オーバーライドの適用
選択したデバイス フィルタごとに、そのデバイス固有のプロパティを設定し、List コントロールの対応するプロパティをオーバーライドできます。次の手順では、(既定) のデバイス フィルタ用の DataTextField プロパティと ForeColor プロパティを設定します。
特定のデバイス フィルタに対してプロパティ オーバーライドを適用するには
デザイン ビューに切り替えます。
List コントロールを選択し、[プロパティ] ウィンドウの [(PropertyOverrides)] ボックスの省略記号ボタン (
.gif "ASP.NET モバイル デザイナ楕円")
) をクリックします。[プロパティ オーバーライド] ダイアログ ボックスが表示されます。
[適用するデバイス フィルタ] ボックスの一覧で、[(既定)] をクリックします。
[デバイス固有のプロパティ] ボックスの一覧に、オーバーライドできるプロパティが表示されます。
[DataTextField] プロパティに、「Text」と入力します。
これにより、指定したデバイス フィルタに対し、実行時にデータ ソース内の各 MobileListItem の Text プロパティが List に表示されるようになります。
ForeColor プロパティを Red に設定します。
[OK] をクリックします。
ページのテスト
ここでページを実行できます。
ページをテストするには
ソリューション エクスプローラで、TemplateTest.aspx を右クリックし、[ブラウザで表示] をクリックします。
既定のブラウザにページが表示されます。
デバイス エミュレータでページを表示するには、デバイス エミュレータの製造元の指示に従ってページに移動してください。
使用するエミュレータが Web.config ファイルに含まれている選択したデバイス フィルタと一致する場合は、そのデバイスに対して指定した出力が表示されます。
次の手順
このチュートリアルでは、Visual Studio を使用して、デバイス固有のプロパティ設定でコントロールを作成する方法、デバイス フィルタを選択する方法、そのフィルタのテンプレートを編集する方法、およびそのフィルタに対してプロパティ オーバーライドを設定する方法を示しました。
ソース ビューに切り替え、Visual Studio が生成した宣言マークアップを表示することもできます。
ページを複数のブラウザまたはエミュレータで表示して、デバイス固有の設定によって既定のブラウザでの出力とエミュレータでの出力が変わることを確認してください。このチュートリアルをさらに進め、既定のフィルタ以外に別のデバイス フィルタを選択してエミュレータ固有の出力を確認することもできます。
詳細については、次のトピックを参照してください。