| |
|
.NET TIPS
［ASP.NET AJAX］Ajax通信で使われる「ロード中／更新中」の画像を入手するには？
デジタルアドバンテージ 一色 政彦
2010/03/04 |
 |
|
ASP.NET AJAXをはじめ、Ajax（＝非同期通信技術）を活用したWebアプリケーションでは、その非同期の通信の際にサイト閲覧者が戸惑わないように、ロード中／更新中を表すグルグル回る画像（以降、ローディング画像。例：
）を用いることが一般的だ。ローディング画像は、やはりWebサイトの雰囲気にあった図形、色彩、背景色にしたい場合があるだろう。そのような画像を手軽に作成・入手できるサイトを紹介する。
上記のリンク先のサイトを訪れると、次のようなページが表示される。
 |
| ajaxload.infoサイトの表示内容 |
このページで、上部の［Generator］内のオプションを設定して［Generate it !］ボタンをクリックすると、設定内容に基づいて生成されたローディング画像が下部の［Preview］内に表示される。その画像で問題なければ、［Download it !］ボタンをクリックしてダウンロードする。これだけの手順で、独自のローディング画像を作成・入手できる。
オプション設定の内容をもう少し詳しく説明しよう。※以下で表示器（Indicator）と記述しているのは、グルグルと回っている図形のことである。
- Indicator type（表示器の種類）：コンボボックスから作成したい表示器を選択する。次の画面は、実際に選択しているところ。
 |
| ［Indicator type］コンボボックスからの表示器の選択 |
- Background color（背景色）：背景の色を16進数のRGB値で指定する。後述の色選択も可能。
- Transparent background（透明な背景）：表示器以外の背景を透明にする。
- Foreground color（前景色）：表示器の色を16進数のRGB値で指定する。後述の色選択も可能。
［Background color］と［Foreground color］を入力しようとすると（＝フォーカスを設定すると）、次の画面のような色選択ウィンドウが表示される。このウィンドウから色を選択するには、右側のバーで色彩を変更し、左側のグラデーションから最適な色をクリックすればよい。
 |
| ［Background color］と［Foreground color］における色選択ウィンドウ |
今回はAjax用のローディング画像として説明したが、もちろんこの画像をWindowsフォームやWPFなどで用いてもよいだろう。
ちなみに例えばASP.NET AJAXでは、UpdateProgressコントロールでこのようなローディング画像を設定できる。具体的には、例えば次のコードのようにすればよい。このコードは、ASP.NET Webアプリケーション内の.aspxファイルの内容を一部抜粋したサンプル・コードである。
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img src="ajax-loader.gif" />更新中...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel> |
|
| UpdateProgressコントロールでのローディング画像設定の例 |
上記のコードの太字部分のように、取得した画像へのURLを<img>タグのsrc属性に指定すればよい。
| カテゴリ：Webフォーム 処理対象：ASP.NET AJAX |
|
|
generated by
|
|
Insider.NET 記事ランキング
本日
月間
