.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フォームで簡単に画像を表示するには?
画像ファイルを高速に読み込むには?
ピクセルの色をHTMLカラーへ変換するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」

@IT Special

- PR -

TechTargetジャパン

Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

もっと見る

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

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH