はじめに
Windowsフォームでおなじみのウィザードは、入力をステップごとに行ったり操作手順を分かりやすく説明するなど、ユーザーにやさしいインターフェースを提供し、複雑な入力操作や手続きの多い入力処理に高い効率化を生み出しています。
しかしWebページでは、アンケートの入力やダウンロードといった、ステップを踏む手続き操作はページ遷移を伴います。よって、サーバや回線の負荷が高い時には、操作に若干の待ち時間が発生することがあります。
「Wizard for ASP.NET Wijmo」のC1Wizardコントロールは、Webページにウィザード機能を組み込み、クライアント側でさまざまな動作を実行できるようにする、jQueryライブラリを利用して作られた軽量・コンパクトなコントロールです。
ページ内でウィザード機能を実行するので、手続きのたびにページを移動したり再ロードしたりすることがなく、ユーザーにもサーバにも負荷をかけずに処理を実行させることができます。
今回は、このC1Wizardコントロールを使い、簡単なファイルダウンロード操作画面を持ったWebアプリケーションを作成してみました。
対象読者
Visual Basic 2010、またはVisual C# 2010を使ってプログラムを作ったことがある人。
必要な環境
Visual Basic 2010、Visual C# 2010、Visual Studio 2010のいずれかでプログラムが作れる環境。対応ブラウザについては、グレープシティ社Webサイトの「クロスブラウザ対応」でご確認ください。
なお、本プログラムは次の環境で開発・動作確認を行っています。
- OS： Windows 7
- 開発ツール： Visual Studio 2010、.NET Framework 4
- ブラウザ： Microsoft Internet Explorer 9
サンプルプログラム実行時の注意事項
[1] Visual StudioでサンプルWebサイトを開く
Visual Studioをお持ちであれば、ComponentOne Studio for ASP.NET Wijmo 2012Jトライアル版をインストールし、ソースコード圧縮ファイル「Wizard_Report_ASP_vb_src.zip」または「Wizard_Report_ASP_cs_src.zip」を解凍して作成されるプロジェクトファイルを、Visual Studioで開き実行させてください。
[2] Visual Studioを使わずにサンプルWebサイトを開く
Visual Studioを使わずに、サンプルWebサイトを直接IISなどのWebサーバで開く場合は、ソースコード圧縮ファイル「Wizard_Report_ASP_vb_src.zip」または「Wizard_Report_ASP_cs_src.zip」を解凍して作成されるプロジェクトファイルを、フォルダ構成を変えずにWebサーバにインストール・登録してください。
以下は、Microsoft IISサーバにインストールする場合の手順です。
- プロジェクトファイルのフォルダを、そのままWebサーバーへ配置します（例：\Inetpub\wwwroot直下へ配置）。
- サーバーに配置したアプリケーションフォルダに対して、「アプリケーションへの変換」を実行します。
- 「アプリケーションの追加」ダイアログで、「アプリケーションプール」を「Classic .NET AppPool」に設定します。
- クライアントのWebブラウザで、Default.aspxファイルを開きます（例：「http://localhost/mysplit_vb/Default.aspx」）。
本サンプルプログラムは、レポート定義ファイルを使用しますが、このファイルはデータベースファイルへのフルパスを使用して接続文字列を作成しています。
そのため、単純にプロジェクトファイルをお手持ちのコンピュータにインストールしただけでは正常に動作いたしません。
サンプルプログラムを動作させる場合は、サンプルプロジェクトをインストール後、記事の解説に従ってデータベースのレポート定義ファイルを作成しなおしてから実行してください。
Windows Vistaで製品のサンプルをコンパイルしようとすると、エラーが発生する場合があります。これは、Windows VistaのUAC（ユーザーアカウント制御）により、製品サンプルがインストールされているフォルダに書き込みができないため、コンパイル時にエラーが発生するという現象です。Visual Studioを管理者権限で実行するか、サンプルプロジェクト一式をアクセス権のあるフォルダに移動してからコンパイルを行うようにしてください。
また、Webブラウザでaspxファイルを実行する際にIISサーバでエラーになる場合は、Web.configファイルに以下の1行を追加してください。
<identity impersonate="false" />
コンポーネントのインストール
「Wizard for ASP.NET Wijmo」を使用するには、Visual Studio、Visual Basic、Visual C#の開発環境に「ComponentOne Studio for ASP.NET Wijmo 2012J」をインストールする必要があります。
トライアル版は、「グレープシティのWebページ」からダウンロードできます。
ダウンロードしたい製品にチェックを付け［申込フォーム］ボタンを押すと、「トライアル版申込フォーム」ページに移動しますので、「個人情報の収集および使用に同意する」にチェックを入れ「同意する」ボタンをクリックします。
トライアル申込フォームが表示されますので、必要情報を登録すると添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきます。ここからダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。
制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
コントロールと参照の追加
「Wizard for ASP.NET Wijmo」をインストールしたら、プロジェクトにコントロールを追加します。
ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは、アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1Wizard」コントロールです。
プロジェクトに、以下のランタイムライブラリへの参照が追加されます。
| ファイル | 内容 |
|---|---|
| C1.Web.Wijmo.Controls.4 | 本体アセンブリ |
また、プロジェクトに以下のランタイムライブラリが追加されます。
| ファイル | 内容 |
|---|---|
| C1.Web.Wijmo.Controls.4.dll | 本体アセンブリ |
なお、.NET Framework 4が必要です。
C1Wizardコントロールの概要
「Wizard for ASP.NET Wijmo」のC1Wizardコントロールは、Webページにウィザード機能を実装するコントロールで、一連のフォームを作成して、画面の面積を節約したり、入力タスクを簡素化したりすることができます。
C1Wizardコントロールは一種のコンテナコントロールで、設定した子要素（ステップ）内にいろいろなコントロールを配置してコンテンツを作成します。
子要素はいくつも組み込むことができ、ステップを移動するナビゲーションボタンが用意されています。
C1Wizardコントロールは、次のいくつかの機能を備えています。
リッチコンテンツ
単にドラッグ＆ドロップ操作を行うだけで、画像、テキスト、コントロールをC1Wizardコントロール内のページに追加します。コンテンツのカスタマイズは、標準パネルコントロールのデザインと同様に簡単にできます。
外部コンテンツ
プロジェクト内の別のWebページのコンテンツまたはプロジェクト外のWebサイトのコンテンツを、C1Wizardコントロール内に表示します。
オートプレイ
オートプレイ機能を使用してページ間を自動的に移動します。ページの遷移間の遅延の設定を含む、オートプレイをカスタマイズします。
アニメーション
直線的なイージングまたはしなやかなイージングなど、ページ間の遷移に対する組み込み遷移効果から選択します。オプションで、独自のカスタム効果を作成し、持続時間を変更します。
オンデマンドでのコンテンツのロード
クライアント側で現在選択されたページのみ表示するようにC1Wizardを設定し、最初のページのサイズとロード時間を削減します。
テーマ
スマートタグをクリックするだけで、6種類のプレミアムテーマ（Arctic、Midnight、Aristo、Rocket、Cobalt、およびSterling）のいずれかを選択して外観を変更します。オプションとして、jQuery UIからThemeRollerを使用してカスタマイズしたテーマを作成することもできます。
CSSのサポート
CSS（Cascading Style Sheet）のスタイルを使用して、カスタムスキンを定義します。
デザイナによるページの編集
C1Wizardコントロールそのもののプロパティ設定はプロパティウィンドウで行いますが、ステップの追加やデザインは専用のデザイナを使用して行います。
C1Wizardコントロールの構成要素
C1Wizardコントロールは、次の要素から構成されています。
ステップヘッダー
ステップヘッダーセクションには、ウィザードのステップごとのヘッダーが含まれています。ヘッダーを表示しない場合は、ウィザードのShowStepHeaderプロパティをFalseにします。
ステップヘッダーには以下の項目が含まれています。
- <タイトル> ステップヘッダーのタイトルはC1WizardStepのTitleプロパティを使用して設定されます。
- <説明> ステップヘッダーの説明はC1WizardStepのDescriptionプロパティを使用して設定されます。
ステップヘッダーのスタイルは、StepHeaderTemplateを使用して書式設定できます。
また、StepHeaderTemplateプロパティには、C1Wizardコントロールの各ステップのヘッダーに使用するHTMLテンプレートが用意されています。
デフォルトでは、C1WizardコントロールのStepHeaderTemplateプロパティは「<h2>#{title}</h2>#{desc}」に設定され、Title/Descriptionプロパティを設定して、ヘッダーの表示を変えることができます。
コンテンツ領域
C1Wizardコントロールは、書式設定済みテキスト、任意のコントロール、およびテーブルなどのコンテンツを保持することができます。
C1Wizardコントロールには、C1WizardStepタグ内でサーバーコントロールを宣言するだけで、任意のコントロールを追加できます。例えば、次のマークアップでは、ButtonサーバーコントロールがC1Wizardコントロールの最初のページ内に追加されます。
<wijmo:C1WizardStep ID="C1WizardStep01" runat="server"> <asp:Button ID="Button1" runat="server" Text="ボタン" /> </wijmo:C1WizardStep>
ナビゲーションバー
デフォルトのC1Wizardコントロールでは、ナビゲーションバーにユーザーが1つのステップから次のステップに移動できるボタンが含まれています。ナビゲーションは、コントロールの側面に表示したり、コントロールから完全に削除したりすることもできます。
ナビゲーションバーは、CommonとEdgeという2つのタイプが用意されており、Commonスタイルは〈戻る〉および〈次へ〉ボタンで表示され、Edgeスタイルはコントロールの左側の戻る矢印およびコントロールの右側の次へ矢印で表示されます。
なお、ComponentOne Studio for ASP.NET Wijmo（ウィジモ）の特徴については、ComponentZineの記事『ASP.NETにWijmoの表現力を取り入れて最新Web環境を手軽に構築する － 「ComponentOne Studio for ASP.NET Wijmo 2012J」の利用』で紹介しています。こちらもご参照ください。
Webページのデザイン
では、さっそくアプリケーションを作成していきましょう。
作成するアプリケーションは、ファイルのダウンロード手順をウィザードで表示するWebページです。
ページのレイアウト
メインページで使用するコントロールはC1Wizardコントロールだけですが、各ステップのページではLabel、RadioButton、TextBox、Buttonの各コントロールを使用しています。
プロジェクトの準備とコントロールの配置
まずは、ASP.NETアプリケーション用プロジェクトを用意します。マスターページを使う場合は、適宜不要な部分を削除するなど編集しておきます。
① フォームにC1Wizardコントロールをドラッグ＆ドロップします。最初は、ステップが1つもないC1Wizardコントロールなので、ここにステップを追加していきます。C1Wizardコントロールのスマートタグを開き、「デザイナを開く」メニューをクリックします。
② 「C1Wizardデザイナフォーム」が表示されますので、ツールバーの「子要素の追加」ボタンをクリックします。これで、「Step1」というステップが追加されます。
③ ツールバーの「子要素の追加」ボタンを3回クリックし、全部で4つのステップを追加します。
④ 「Step1」をクリックし、「Title」を「アイテムの選択」に変更し、BackColorプロパティを「#FFFFCC」に設定します。
⑤ この操作をStep2からStep4まで繰り返し、「Title」のテキストを変更しBackColorプロパティを「#FFFFCC」に設定します。
| ステップ | Title |
|---|---|
| Step2 | 個人情報の保護 |
| Step3 | ユーザー情報の入力 |
| Step4 | ダウンロードの実行 |
ここで、C1WizardデザイナフォームのOKボタンをクリックして閉じます。
これで、C1Wizardコントロールに4つのステップが追加され、ヘッダーが設定されます。
⑥ C1Wizardコントロールのプロパティウィンドウを使い、C1Wizardコントロールのサイズや動作を次のプロパティで設定します。
| プロパティ | 設定値 |
|---|---|
| AutoPostBack | True |
| NaviButtons | Common |
| Height | 400 |
| Theme | Cobalt |
| Width | 540 |
ナビゲーションバーは、「前へ」「次へ」のボタンタイプに変更します。テーマは「Common」を使用し、C1Wizardコントロール全体をコンパクトにします。
⑦ ステップヘッダーがかなり大きいので、フォントを少し小さくします。プロパティウィンドウで「StepHeaderTemplate」プロパティの値欄をクリックし、「<h1>#{title}」を「<h3>#{title}」に変更します。
<h1>#{title}</h1>#{desc} ⇒ <h3>#{title}</h3>#{desc}
これで、ステップヘッダーのサイズが小さくなります。
以上で、メインページとC1Wizardコントロールのデザインが出来上がりです。
Step1 ページの作成
続いて、各ステップページにコントロールを配置し、コンテンツを作成していきます。
① コンテンツ領域をクリックし、ここに「ダウンロードするアイテムを選択してください」という文字を入力します。C1Wizardコントロールは、コンテナの機能を持っていながら、コンテンツ領域に直接文字列を入力することができます。
② RadioButtonコントロールを3つ配置し、以下のプロパティを設定します。「RadioButton1」だけ、Checkedプロパティを「True」に設定します。
| プロパティ | プロパティ | 設定値 |
|---|---|---|
| RadioButton1 | Text | 製品カタログ |
| GroupName | group1 | |
| Checked | True | |
| RadioButton2 | Text | 取扱説明書－基本操作 |
| GroupName | group1 | |
| RadioButton3 | Text | 取扱説明書－応用操作 |
| GroupName | group1 |
Step2 ページの作成
続いて、Step2ページを作成します。このページは、コントロールは使用せずC1Wizardコントロールに直接文字列を入力します。
① C1Wizardコントロールのプロパティウィンドウにある「ActiveIndex」プロパティを「1」に変更します。これで、ステップ「Step2」が表示されます。
② C1Wizardコントロールのコンテンツ領域内にテキストを入力します。入力した文字列が多くてVisual Studioのデザイナではすべて表示しきれていませんが、アプリケーションを実行するとC1Wizardコントロールは自動的にサイズ調節を行い、コンテンツがすべて表示されるようになります。
Step3 ページの作成
このページでは、ユーザー情報を入力するインターフェースを作成します。そして、メールアドレスを入力しないと次のページが表示されないようにします。
① C1Wizardコントロールの「ActiveIndex」プロパティを「2」に変更します。これで、ステップ「Step3」が表示されます。
② C1Wizardコントロールのコンテンツ領域内にテキストを入力します。
③ Label、TextBox、CheckBox、Buttonコントロールを使用して、入力インターフェースを作成します。
④ メールアドレス入力用テキストボックス「TextBox3」のみ、TextChangedイベントハンドラを作成します。
⑤ 「TextBox3」のAutoPostBackプロパティをTrueにしておきます。
Step4 ページの作成
最後にStep4ページを作成します。このページは、デザイン終了後非表示にしておき、Step3ページでメールアドレスが入力されると表示されるようにします。
① C1Wizardコントロールの「ActiveIndex」プロパティを「3」に変更します。これで、ステップ「Step4」が表示されます。
② Buttonコントロールを配置し、Textプロパティを「ダウンロードの開始」に変更します。
③ C1Wizardコントロールのスマートタグから「デザイナを開く」をクリックし、「C1Wizardデザイナフォーム」を開きます。
④ 左ペインのツリー表示から「Step4」をクリックし、「Visible」プロパティを「False」に変更します。これで、Webアプリケーション起動時はステップ「Step4」は表示されなくなります。
OKボタンをクリックして「C1Wizardデザイナフォーム」を閉じます。
⑤ 最後に、C1Wizardコントロールの「ActiveIndex」プロパティを「0」に変更し、ステップ「Step1」が表示されるようにします。
以上で、C1Wizardコントロールと4つのステップページが出来上がりです。
Step5 ページの表示・非表示切り替え処理
メールアドレス入力用テキストボックス「TextBox3」のTextChangedイベントハンドラで、Step4ページの表示・非表示を切り替える処理を行います。
処理は単純に、テキストボックスに入力があった場合はStep4ページを表示し、入力がない場合は非表示にするだけです。
これは、Step4ページの「Visible」プロパティを操作します。TextBoxコントロールのTextChangedイベントはテキストが入れ替わると発生しますが、TextBoxコントロールからフォーカスが移動した時点で発生します。ダミーでOKボタンを使用しこれをクリックした時点でTextBoxコントロールからフォーカスが移り、TextChangedイベントハンドラが実行されるようにしています。
ButtonコントロールのClickイベントハンドラを使うという手もありますが、AutoPostBackプロパティがないため、イベントハンドラの処理を反映させることができないので、TextBoxコントロールのTextChangedイベントを利用しました。
Public Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
Protected Sub TextBox3_TextChanged(sender As Object, e As EventArgs) Handles TextBox3.TextChanged
If TextBox3.Text <> "" Then
C1Wizard1.Steps(3).Visible = True
Else
C1Wizard1.Steps(3).Visible = False
End If
End Sub
End Class
namespace Wizard_ASP_cs
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void TextBox3_TextChanged(object sender, EventArgs e)
{
if (TextBox3.Text != "")
{
C1Wizard1.Steps[3].Visible = true;
}
else
{
C1Wizard1.Steps[3].Visible = false;
}
}
}
}
まとめ
ウィザードを使うことで、1つのWebページ内に複数ページのコンテンツを作成できるので、ユーザーにやさしい操作性を提供するとともに、ハイパーリンクだらけのページに比べWebページの管理もしやすくなります。
今回は、ダウンロードの手順をウィザードで作成してみましたが、ページをめくるという操作から手順書の表示や図鑑・本など、アイデア次第でいろいろな使い方ができるのではないでしょうか。
