.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属性に指定すればよい。End of Article

カテゴリ：Webフォーム　処理対象：ASP.NET AJAX

この記事と関連性の高い別の.NET TIPS
PictureBoxコントロールにWeb画像を表示するには？
画像の背景部分を透明にするには？
［ASP.NET］任意の画像を出力してブラウザで表示するには？
Windowsフォームで簡単に画像を表示するには？
画像の一部の領域を切り抜くには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」

TechTargetジャパン

Insider.NET フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH