Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

カラフルなツールチップを持つASP.NETアプリケーションの作成

C1ToolTipコントロールを使ったWebアプリケーションの作成 その2

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/05/17 14:00

 「ToolTip for ASP.NET Wijmo」に含まれるC1ToolTipコントロールを使って、いろいろな動作やデザインのツールチップを持つWebページを作成してみます。

はじめに

 WebページももっぱらGUI化している今日この頃ですが、小技を利かしたデザインのWebページは使っていて気持ちよいですね。特にツールチップは、操作の補助をしてくれる便利なアイテムです。

 「ToolTip for ASP.NET Wijmo」のC1ToolTipコントロールは、そんなWebページのデザイン性・操作性を高めてくれるコントロールです。

 ただのツールチップではなく、表示する場所や表示のアニメーションを自由に設定でき、ThemeRollerとの連動でカラフルなデザインのツールチップに仕上げることができます。

 そこで、今回はこのC1ToolTipコントロールを使って、いろいろな動作やデザインのツールチップを使ったWebページを作成してみました。

マウスポインタに追従して表示するツールチップ
マウスポインタに追従して表示するツールチップ
ThemeRollerで簡単にカラフルなツールチップになる
ThemeRollerで簡単にカラフルなツールチップになる

対象読者

 Visual Basic 2010、またはVisual C# 2010を使ってプログラムを作ったことがある人。

必要な環境

 Visual Basic 2010、Visual C# 2010、Visual Studio 2010でプログラムが作れる環境。

 対応ブラウザについては、グレープシティ社Webサイトの「クロスブラウザ対応」ページでご確認ください。

 なお、本プログラムは次の環境で開発・動作確認を行っています。

  • OS:Windows 7
  • 開発Tool:Visual Studio 2010、.NET Framework 4
  • ブラウザ:Microsoft Internet Explorer 9

サンプルプログラム実行時の注意事項

[1] Visual StudioでサンプルWebサイトを開く

 Visual Studioをお持ちであれば、「ComponentOne Studio for ASP.NET Wijmo 2012J」トライアル版をインストールし、ソースコード圧縮ファイル「ToolTip_ASP_vb_src.zip」または「ToolTip_ASP_cs_src.zip」を解凍すると作成されるプロジェクトファイルを、Visual Studioで開き実行してください。

[2] Visual Studioを使わずにサンプルWebサイトを開く

 Visual Studioを使わずに、サンプルWebサイトを直接IISなどのWebサーバで開く場合は、ソースコード圧縮ファイル「ToolTip_ASP_vb_src.zip」または「ToolTip_ASP_cs_src.zip」を解凍すると作成されるプロジェクトファイルを、フォルダ構成を変えずにWebサーバにインストール・登録してください。

 以下は、Microsoft IISサーバにインストールする場合の手順です。

  1. プロジェクトファイルのフォルダを、そのままWebサーバーへ配置します(例:\Inetpub\wwwroot直下へ配置)。
  2. サーバーに配置したアプリケーションフォルダに対して、「アプリケーションへの変換」を実行します。
  3. 「アプリケーションの追加」ダイアログで、「アプリケーションプール」を「Classic .NET AppPool」に設定します。
  4. クライアントのWebブラウザで、Default.aspxファイルを開きます(例:http://localhost/mysplit_vb/Default.aspx)。
注意事項

 UAC(ユーザーアカウント制御)がサポートされているWindows Vista以降のOSで製品のサンプルをコンパイルしようとすると、エラーが発生する場合があります。

 これは、UACにより製品サンプルがインストールされているフォルダに書き込みができないため、コンパイル時にエラーが発生するという現象です。Visual Studioを管理者権限で実行するか、サンプルプロジェクト一式をアクセス権のあるフォルダに移動してからコンパイルを行うようにしてください。

 また、Webブラウザでaspxファイルを実行する際にIISサーバでエラーになる場合は、Web.configファイルに以下の1行を追加してください。

  <identity impersonate="false" />

コンポーネントのインストール

 本サンプルアプリケーションでは、「ToolTip for ASP.NET Wijmo」のC1コントロールを使用します。

 このコントロールを使用するには、Visual Studio、Visual Basic、Visual C#の開発環境に「ComponentOne Studio for ASP.NET Wijmo 2012J」をインストールする必要があります。

 トライアル版は、グレープシティのWebページからダウンロードできます。

 ダウンロードしたい製品にチェックを付け[申込フォーム]ボタンを押すと、「トライアル版申込フォーム」ページに移動しますので、「個人情報の収集および使用に同意する」にチェックを入れ「同意する」ボタンをクリックします。

 トライアル申込フォームが表示されますので必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきます。ここからダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。

 制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールと参照の追加

 「ComponentOne Studio for ASP.NET Wijmo 2012J」をインストールしたら、プロジェクトにコントロールを追加します。

 ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。

 追加するコンポーネントは、アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1ToolTip」コントロールです。

アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1ToolTip」コントロールを選択する
アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1ToolTip」コントロールを選択する

 これらのコントロールを追加すると、プロジェクトに以下のランタイムライブラリへの参照が追加されます。

ファイル 内容
C1.Web.Wijmo.Controls.4 本体アセンブリ

 また、プロジェクトに以下のランタイムライブラリが追加されます。

ファイル 内容
C1.C1Report.4.dll 本体アセンブリ
C1.Web.Wijmo.Controls.4.dll 本体アセンブリ

 なお、.NET Framework 4が必要です。

C1ToolTipコントロールの概要

 「ToolTip for ASP.NET Wijmo」のC1ToolTipコントロールは、Webページ上のコントロールにヒントや説明などの補助情報を表示するツールチップ機能を提供します。

 ツールチップは、対象のコントロール上にマウスポインタを重ねた時に表示されるだけでなく、常に表示したりクリックした時に表示されるなど、表示のタイミングを選ぶことができます。

 また、ツールチップの表示位置も対象コントロールの上下左右に設定したり、常にマウスポインタの横に表示するなど、表示位置の指定も可能です。

 さらに、ツールチップの表示・非表示や他のコントロールに移動する際の移動方法にアニメーション効果を適用できますので、より操作が楽しくなる視覚効果をWebページに持たせることが可能です。

 ツールチップのデザインはCSSによりコントロールされ、あらかじめ組み込まれているテーマに加え、カスタムデザインやThemeRollerからテーマをダウンロードしてC1ToolTipコントロールに適用させることができます。これらの方法を使うことで、完全なカスタムツールチップを使うことができます。

ツールチップの表示位置

 Positonプロパティを使用して、ツールチップを対象コントロールの上下左右の位置に表示できます。また、MouseTrailingプロパティをTrueにすると、マウスポインタの位置にツールチップを表示させることが可能です。

ツールチップをどこにでも表示できる
ツールチップをどこにでも表示できる

ツールチップ表示のタイミング

 TriggerプロパティとTrigger列挙体を使って、ツールチップを表示するイベントを指定できます。また、コードからツールチップの表示・非表示を行うことも可能です。

Trigger列挙体のメンバ
メンバ名 説明
Hover 要素にマウスオーバーした場合はツールチップを表示し、マウスアウトした場合はツールチップを非表示にします。
Click 要素をクリックした場合、ツールチップを表示します。
Focus 要素にフォーカスを移動した場合、ツールチップを表示します。
RightClick 要素を右クリックした場合、ツールチップを表示します。
Custom ツールチップを表示せず、ツールチップを表示するには、ユーザーは単にshowまたはshowAtメソッドを呼び出します。

アニメーション効果

 次のプロパティを使って、ツールチップの表示・非表示にアニメーション効果を設定できます。設定値はEasing列挙体のメンバです。

プロパティ 説明
Animation ツールチップを表示または非表示にするアニメーションを定義します。
showAnimation/hideAnimationが指定されていない場合、このプロパティが機能します。
HideAnimation ツールチップを非表示にするアニメーションを定義します。
ShowAnimation ツールチップを表示するアニメーションを定義します。
CalloutAnimation ツールチップ位置を移動するアニメーションを定義します。
Easing列挙体のメンバ
メンバ名
EaseOutElastic 1
EaseInElastic 2
EaseInOutElastic 3
EaseOutBounce 4
EaseInBounce 5
EaseInOutBounce 6
EaseOutExpo 7
EaseInExpo 8
EaseInOutExpo 9
EaseOutQuad 10
EaseInQuad 11
EaseInOutQuad 12
EaseOutSine 13
EaseInSine 14
EaseInOutSine 15
EaseOutCirc 16
EaseInCirc 17
EaseInOutCirc 18
EaseOutCubic 19
EaseInCubic 20
EaseInOutCubic 21
EaseOutQuint 22
EaseInQuint 23
EaseInOutQuint 24
EaseOutBack 25
EaseInBack 26
EaseInOutBack 27
EaseOutQuart 28
EaseInQuart 29
EaseInOutQuart 30
EaseLinear 31

組み込みテーマ

 ツールチップのデザイン用に、Arctic、Aristo、Cobalt、Midnight、Rocket、Sterling、Metro、Metro Grayの8種類の組み込みテーマを使用できます。

 これらのテーマは、C1ToolTipコントロールのThemeプロパティにあるリストから選択することができます。

組み込みテーマの適用例(ヘルプより抜粋)
組み込みテーマの適用例(ヘルプより抜粋)

CSSとThemeRollerによるデザイン

 組み込みテーマ以外に、独自にCSSを使ってツールチップをデザインすることができます。

 また、ThemeRollerからテーマをダウンロードして、このデザインをC1ToolTipコントロールに適用させることが可能です。

 ThemeRollerは、独自のjQuery UIテーマを作成して、Webアプリケーションのコントロールのスキンを生成するWebアプリケーションです。その簡単なインターフェースとWYSIWYGプレビューにより、グラフィックエディタを開くためにかかる時間よりも短時間に、すべてのWijmoコントロールおよびその他のThemeRoller互換コントロールのスキンを生成できます。

 1から作成することもできますし、Galleryと呼ばれるテンプレートを選んで使うこともできます。

 また、選んだテンプレートをさらに編集して使うこともできます。独自のエディターを装備しているので、インタラクティブにデザインできます。

 独自にCSSを作成する場合は、以下のCSSセレクタで指定します。

CSSセレクタ 説明
wijmo-wijtooltip このスタイルをC1ToolTipコントロールに適用します。
wijmo-wijtooltip-arrow-bc このスタイルをC1ToolTipのBottomCornerの矢印に適用します。
wijmo-wijtooltip-arrow-bl このスタイルをC1ToolTipのBottomLeftの矢印に適用します。
wijmo-wijtooltip-arrow-lb このスタイルをC1ToolTipのLowerBottomの矢印に適用します。
wijmo-wijtooltip-arrow-lc このスタイルをC1ToolTipのLowerCornerの矢印に適用します。
wijmo-wijtooltip-arrow-rb このスタイルをC1ToolTipのRightBottomの矢印に適用します。
wijmo-wijtooltip-arrow-rc このスタイルをC1ToolTipのRightCornerの矢印に適用します。
wijmo-wijtooltip-arrow-rt このスタイルをC1ToolTipのRightTopの矢印に適用します。
wijmo-wijtooltip-arrow-tl このスタイルをC1ToolTipのTopLeftの矢印に適用します。
wijmo-wijtooltip-arrow-tc このスタイルをC1ToolTipのTopCornerの矢印に適用します。
wijmo-wijtooltip-close このスタイルを閉じたC1ToolTipに適用します。
wijmo-wijtooltip-container このスタイルをC1ToolTipのコンテナに適用します。
wijmo-wijtooltip-pointer このスタイルをC1ToolTipのポインタに適用します。
wijmo-wijtooltip-pointer-inner このスタイルをC1ToolTipの内側のポインタに適用します。
wijmo-wijtooltip-title このスタイルをC1ToolTipのタイトルに適用します。

 独自のCSSも、ThemeRollerで作成したCSSも、いずれもCSSファイルをプロジェクトに保存し、ThemeプロパティにそのCSSファイルへのパスを設定すれば、C1ToolTipコントロールに適用されます。

ThemeRollerで選んだテンプレートをさらに編集して使うこともできる
ThemeRollerで選んだテンプレートをさらに編集して使うこともできる

Webページのデザイン

 では、さっそくアプリケーションを作成していきましょう。

 作成するアプリケーションは、HTMLのButtonとASPのTextBoxコントロールを持ったWebページです。

 これらのコントロール一つ一つに、C1ToolTipコントロールを設定し3種類のツールチップを作成します。

 3つのツールチップは、それぞれ表示位置やアニメーション効果を変え、デザインにThemeRollerで選んだテンプレートをさらに編集して使うことにします。

ページのレイアウト

 使用するコントロールは、HTMLのButtonコントロールが2個とTextBoxコントロール、そして3個のC1ToolTipコントロールです。

 ページのデザイン時はC1ToolTipコントロールは表示されていますが、アプリケーション実行時は表示されません。

ページレイアウト
ページレイアウト

ツールチップの作成

 まずは、3つのツールチップを作成します。コントロールとC1ToolTipコントロールの関連付けは、C1ToolTipコントロールの「TargetSelector」プロパティに、「#」記号とコントロールの名前を設定するだけです。

 ① 最初のButtonコントロール「Button1」に、C1ToolTipコントロール「C1ToolTip1」を関連付けます。C1ToolTipコントロールの「TargetSelector」プロパティに、「#Button1」と入力します。これで、2つのコントロールが関連付けられました。

 ② C1ToolTipコントロールの「Content」プロパティを展開し、「Content」欄に「Hello!」と入力します。これがツールチップの表示文字になります。これで1つ目のツールチップができ上がりました。

 テーマはデフォルトの「Aristo」のままなので、黒色の背景色、シアンの枠線、白色の文字列で表示されます。また、表示位置も変更していませんので、コントロールの右上に表示されます。

ほぼデフォルトのツールチップ
ほぼデフォルトのツールチップ

 ③ 続いて、2つ目のButtonコントロール「Button2」に、C1ToolTipコントロール「C1ToolTip2」を関連付けます。C1ToolTipコントロールの「TargetSelector」プロパティに、「#Button2」と入力します。

 ④ C1ToolTipコントロールの「Content」プロパティを展開し、「Content」欄に「Bye bye !」と入力します。

 ⑤ 「Animation」プロパティを展開し、「Easing」の値欄をクリックしてリストから「EaseInOutBounce」を選びます。これで、ツールチップ表示時に軽く揺れるアニメーションが実行されます。

「Easing」の値欄をクリックしてリストから「EaseInOutBounce」を選ぶ
「Easing」の値欄をクリックしてリストから「EaseInOutBounce」を選ぶ

 ⑥ 「Position」プロパティを展開し、「At」プロパティを展開します。そして、「Top」を「Bottom」に変更します。これで、ツールチップはコントロールの右下に表示されます。

「At」プロパティの「Top」を「Bottom」に変更
「At」プロパティの「Top」を「Bottom」に変更
ツールチップはコントロールの右下に表示
ツールチップはコントロールの右下に表示

 ⑦ TextBoxコントロールに、C1ToolTipコントロール「C1ToolTip3」を関連付けます。C1ToolTipコントロールの「TargetSelector」プロパティに、「#TextBox1」と入力します。

 ⑧ 「Content」プロパティを展開し、「Content」欄に「ここに文字を入力してください」と入力します。

 ⑨ 「Title」プロパティを展開し、「Content」欄に「データ入力」と入力します。これで、ツールチップにタイトルをつけることができます。

 ⑩ 「MouseTrailing」プロパティを「True」にします。これで、ツールチップは常にマウスポインタの横に表示されます。マウスポインタを移動すると、ツールチップも追従して移動します。

ツールチップは常にマウスポインタの横に表示されるようになる
ツールチップは常にマウスポインタの横に表示されるようになる

ThemeRollerを使ったツールチップのデザイン

 作成したツールチップは、デフォルトのテーマを使ってデザインしました。今度は、ツールチップをカスタムデザインに変更します。

 CSSを1から書いても良いのですが、せっかくThemeRollerが使用できるので、これを使ったツールチップのデザイン方法を採用してみます。

ThemeRollerの概要

 ThemeRollerは、独自のjQuery UIテーマを作成して、Webアプリケーションのコントロールのスキンを生成するWebアプリケーションです。適用できるコントロールはjQueryによって作成されたコントロールで、「ComponentOne Studio for ASP.NET Wijmo 2012J」のコントロールすべてに適用できます。

 ThemeRollerでは、簡単なインターフェースとWYSIWYGプレビューにより、グラフィックエディタを開くためにかかる時間よりも短時間に、すべてのWijmoコントロールおよびその他のThemeRoller互換コントロールのスキンを生成できます。

 ThemeRollerページには、「Roll Your Own」という一つ一つの項目をデザインするページと、「Gallery」というテンプレート群を持ったページに分かれます。

 どちらもGUIのエディタ機能を持ち、フォントや色を自由に変更できます。

 変更結果はすぐに右のサンプルに反映され、サンプルはコントロールごとに表示されますので、デザイン結果を確認することができます。

ThemeRollerのエディタと編集結果を表示するサンプル
ThemeRollerのエディタと編集結果を表示するサンプル
ツールチップも確認できる
ツールチップも確認できる

ThemeRollerからテーマをダウンロードする

 では、さっそくThemeRollerを使ってみましょう。今回は、「Gallery」からテンプレートを1つ選んで、それを編集してC1ToolTipコントロールに適用してみます。

 ① http://jqueryui.com/themeroller/ にアクセスします。

 ② 「Gallery」タブをクリックして、テンプレート「Sunny」をクリックします。サンプルコントロールがこのテーマに切り替わります。このままのデザインで良ければ「Download」ボタンをクリックしてダウンロードします。細部を修正したければ、「Edit」ボタンをクリックします。

ThemeRollerの「Gallery」ページ
ThemeRollerの「Gallery」ページ

 ③ 今回は、少し編集しますので、「Edit」ボタンをクリックします。タブが「Gallery」から「Roll Your Own」に切り替わり、編集可能な状態になります。ツールチップの設定は「Contents」になるので、このメニューを展開します。

 背景色は「Background color & texture」、枠線は「Border」、文字列は「Text」のそれぞれ色コードをクリックするとカラーピッカーが表示されますので色を選択します。色を選択すると、すぐにサンプルコントロールに反映されます。

カラーピッカーで色を選択する
カラーピッカーで色を選択する

 ④ フォントを変更したい場合は「Font Setting」メニューを、コーナーのラウンドを変更したい場合は「Corner Radius」メニューを使用します。ここでは、背景色、枠線、テキストの色を変更しました。

 ⑤ 編集が終わったら、「Download theme」ボタンをクリックします。「Download Builder」というページに移動しますので、ページ下部にある「Download」ボタンをクリックします。

 作成したテーマは、「jquery-ui-1.10.3.custom.zip」というファイル名でダウンロードされますので、これを適当なフォルダに入れます(ダウンロードファイル名は常に同じなので、複数のテーマを使う場合は適当にリネームしてダウンロードしてください)。

「Download theme」ボタンをクリック
「Download theme」ボタンをクリック
「Download Builder」ページ下部にある「Download」ボタンをクリック
「Download Builder」ページ下部にある「Download」ボタンをクリック

ダウンロードしたテーマを使う

 テーマをダウンロードしたら、解凍してプロジェクトに組み込み、C1ToolTipコントロールに適用します。

 ① プロジェクトを一度閉じ、プロジェクトの中にテーマ用のフォルダを作成します。ここでは、「App_Themes\テーマ1」というフォルダを作成しました。

 ② この中に、ダウンロードしたテーマを解凍して格納します。

プロジェクトの中にテーマ用のフォルダを作成しダウンロードしたテーマを解凍して格納する
プロジェクトの中にテーマ用のフォルダを作成しダウンロードしたテーマを解凍して格納する

 ③ 「CSS」フォルダを開くと、「custom-theme」というフォルダの中に「jquery-ui-1.10.3.custom.css」というファイルが格納されています。このファイル名を、フォルダ名のパス名と共にC1ToolTipコントロールのThemeプロパティに設定します。

 プロジェクトを開き、C1ToolTipコントロールのThemeプロパティに、次のCSSファイル名を設定します。

  • App_Themes\テーマ1\css\custom-theme\jquery-ui-1.10.3.custom.css

 なお、C1ToolTipコントロールのThemeプロパティは、どれか1つ設定するとすべてのC1ToolTipコントロールに適用されます。

ThemeプロパティにCSSファイル名を設定すると、ダウンロードしたテーマが適用される
ThemeプロパティにCSSファイル名を設定すると、ダウンロードしたテーマが適用される

まとめ

 ツールチップは、単に補足情報や操作説明を表示するだけでも十分その役割を果たしますが、カラフルなデザインやアニメーション効果を工夫すると、使って楽しいWebページに仕上げることが可能です。

 C1ToolTipコントロールでは、ツールチップのデザインにCSSやThemeRollerでデザインを変えることができるので、より視覚効果の高いWebページを完成させることが可能です。

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5