CodeZine(コードジン)

特集ページ一覧

Ajax対応.NETコンポーネント「LiveControls 1.0J」でWebページを作る

LiveControls 1.0Jでタイマーを使ったWebページを作る

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

 ページ内の一部が変更されるWebコンテンツを作っている際に、ページ全体を更新するのではなく、変更した部位だけ更新できないものかと思っている方は多いのではないでしょうか。Ajax対応コントロール群のLiveControls 1.0Jを使用すると、この願いを叶えることができます。

はじめに

 ページ内の一部が変更されるWebコンテンツを作っている際に、ページ全体を更新するのではなく、変更した部位だけ更新できないものかと思っている方は多いのではないでしょうか。Ajax対応コントロール群のLiveControls 1.0Jを使用すると、この願いを叶えることができます。

 さらに、LiveControlsにはTimerコントロールが含まれているので、WindowsFormのようにアニメーションを使ったWebページを作成することもできます。

 そこで、今回はLiveTimerコンポーネントで簡単なアニメーションをWebページに組み込んでみました。

画像イメージを横に移動するアニメーションをWebページに組み込む
画像イメージを横に移動するアニメーションをWebページに組み込む

対象読者

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

必要な環境

 Visual Basic 2005またはVisual C# 2005、Visual Studio 2005でプログラムが作れる環境。

  .NET Framework 2.0から追加されたクラスやメンバを使用しているので、.NET Framework 2.0がインストールされていることが必須条件です。なお、本プログラムはWindows Vista上で動作するVisual Studioを使用して作成し、動作確認を行っています。

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

1.Visual Studio 2005でサンプルWebサイトを開く

 Visual Studio 2005をお持ちであれば、LiveControls 1.0Jトライアル版をインストールし、ソースコード圧縮ファイル「mylive_vb_src.zip」または「mylive_cs_src.zip」を解凍して作成されるプロジェクトファイルをVisual Studio 2005で開き、実行させてください。

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

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

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

  1. プロジェクトファイルのフォルダを、そのままWebサーバへ配置します。
  2. (例:\Inetpub\wwwroot直下へ配置)
  1. サーバに配置したアプリケーションフォルダに対して、「アプリケーションへの変換」を実行します。
  1. 「アプリケーションの追加」ダイアログで、「アプリケーションプール」を「Classic .NET AppPool」に設定します。
  1. クライアントのWebブラウザで、Default.aspxファイルを開きます。
  2. (例:http://localhost/mylive_vb/)
※注意
 Windows Vistaで製品のサンプルをコンパイルしようとするとエラーが発生する場合があります。これは、Windows VistaのUAC(ユーザーアカウント制御)により、製品サンプルがインストールされているフォルダに書き込みができないため、コンパイル時にエラーが発生するという現象です。Visual Studioを管理者権限で実行するか、サンプルプロジェクト一式をアクセス権のあるフォルダに移動してからコンパイルを行うようにしてください。
また、Webブラウザでaspxファイルを実行する際にIISサーバでエラーになる場合は、Web.configファイルに以下の1行を追加してください。
<identity impersonate="false" />

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

 はじめてLiveControls 1.0Jを使用する方は、プロジェクトにLiveControls 1.0Jをインストールする必要があります。

 インストーラは、グレープシティのWebページからダウンロードできますので、ここからダウンロードしてインストールしてください。製品ページ左側の[ダウンロード]-[トライアル版]をクリックし、ダウンロード方法([FTP]または[HTTP])を選択すれば入手できます。ファイルはLZH形式で圧縮されています。

 有償のコンポーネントですが、プロダクトキーを入力せずにインストールすることで、トライアル版として使用できます。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

 LiveControls 1.0Jは、Visual Studio 2003とVisual Studio 2005に対応しており、Visual Studio 2003とVisual Studio 2005では、コンポーネントをプロジェクトに追加する方法が一部異なります。
本記事はVisual Studio 2005を使う前提で説明をしているので、Visual Studio 2003バージョンの場合は、LiveControls 1.0Jのヘルプを見てコンポーネントをインストールしてください。

コントロールの追加

 LiveControls 1.0Jをインストールしたら、ツールボックスに専用のタブを作成し、LiveControls 1.0Jコンポーネントを追加します。追加するコンポーネントは、「.NET Frameworkコンポーネント」の「名前空間」が「Dart.PowerWEB.LiveControls」で始まる名前空間のコンポーネント「LiveButton」「LiveLabel」「LiveImage」「LiveTimer」です。

「名前空間」が「Dart.PowerWEB.LiveControls」で始まる名前空間のコンポーネント「LiveButton」「LiveLabel」「LiveImage」「LiveTimer」を選択する
「名前空間」が「Dart.PowerWEB.LiveControls」で始まる名前空間のコンポーネント「LiveButton」「LiveLabel」「LiveImage」「LiveTimer」を選択する

AjaxとLiveControlsについて

 Ajaxは、JavaScriptとDHTMLによってサーバと非同期通信を行い、その結果Webページの変更のあった部分だけを書き換えるという技術です。

 これまでは、ページの一部を修正してページを更新する場合は、ページ全体がリロードされていました。そのため、ページ内に画像などがあればそれも更新されるため、ページのロードに時間がかかったり、画面がちらつく、ブラウザの表示がページの先頭にスクロールされてしまうなどの現象が起こっていました。

 Ajaxを使うと、ページ内の修正した部分だけを更新するのでページ全体のリロードに比べ更新時間が早く、また画面のちらつきなどもおきません。ページ全体をリロードしませんから、ブラウザの表示が勝手にページの先頭に移動することもありません。

 サーバ側も、ページ全体を再度作り直してクライアント側に送信しなくて済むので負荷も減り、転送するデータ量も少なくて済みます。これにより、WebページをWindowsフォームのように使うことができるようになりました。

 Visual Studioユーザーは、「Microsoft ASP.NET AJAX」を使うことで、VSの各コンポーネントにAjaxの機能を付加させることができますが、あくまで「UpdatrePanel」というAjax対応コンテナコントロールの中に標準コントロールを配置して使用します。従って、再描画される範囲はUpdatrePanel全体になってしまいます。

 一方、LiveControlsの各コンポーネントは、1つ1つがAjaxに対応しているため、ラベルならラベルだけを更新させることができます。Flash、Javaアプレット、ActiveXなどのプラグインは必要ありません。コントロールによりDHTMLのコードが自動的に生成されるため、JavaScriptやDHTMLを習得する必要もありません。ASP.NETのコントロールと同じような感覚で、LiveControlsの各コンポーネントを使ってWebページを構築できます。

「AjaxとLiveControls の関係
「AjaxとLiveControls の関係
Ajaxを利用したWebアプリケーション-LiveControls1.0Jオンラインデモより抜粋
Ajaxを利用したWebアプリケーション-LiveControls1.0Jオンラインデモより抜粋

Ajaxの効果を見てみる-ASP.NETのコントロールの場合

 ASP.NETのコントロールとLiveControlsのコンポーネントを使って、Ajaxの効果を見てみることにします。

 まずは、ASP.NETのラベル、ボタン、イメージのコントロールをWebページに配置し、ボタンを押すとラベルに現在の時刻を表示するWebページを作成します。

Visual Basic
Protected Sub Button1_Click(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Button1.Click
    Me.Label1.Text = System.DateTime.Now.ToLongTimeString()
End Sub
C#
protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = System.DateTime.Now.ToLongTimeString();
}

 時刻を更新するためにボタンを押すと、毎回ページ全体がリロードされて時刻が更新されます。

IEのタブにはページリロードのアイコンが表示されページ全体がリロードされる
IEのタブにはページリロードのアイコンが表示されページ全体がリロードされる

LiveControlsのコンポーネントの場合

 今度は、LiveControlsのラベルとボタンを配置し、同じように時刻表示の処理を組み込みます。

Visual Basic
Protected Sub LiveButton1_Click(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles LiveButton1.Click
    Me.LiveLabel1.Text = System.DateTime.Now.ToLongTimeString()
End Sub
C#
protected void LiveButton1_Click(object sender, EventArgs e)
{
    LiveLabel1.Text = System.DateTime.Now.ToLongTimeString();
}

 LiveButtonを押すと、ページ全体のリロードは行われず、時刻表示だけが更新されます。

 このように、Ajax対応コントロールを使ってWebページを構築すれば、今までのWebページと比べ、明らかにレスポンスの良いWebページを作成できます。

 ただし、このAjaxの恩恵を受けるには、使用するすべてのコントロールをAjax対応のものにする必要があります。

タイマーを使った処理

 LiveControlsには、LiveTimerというTimerコントロールが同梱されています。このコントロールは、WindowsフォームのTimerコントロールと同じように使うことができ、Intervalプロパティで設定したミリ秒単位でTickイベントを発生します。

 このコンポーネントを使うと、簡単にWebページにアニメーション効果を組み込むことができます。もちろん、Ajax対応のコンポーネントですから、アニメーションの部分だけ更新されるスムーズな処理ができあがります。

 ここでは、簡単な例としてLiveImageコンポーネントをページの横方向に移動させるアニメーションをWebページに組み込みます。

LiveTimerの操作

 LiveTimerは、Tickイベントの発生頻度をIntervalプロパティに設定します。値はミリ秒です。タイマーの開始はStartメソッドを実行します。タイマーの停止はStopメソッドで行います。

 このプログラムでは、Intervalプロパティを500ミリ秒に設定し、LiveButtonでタイマーの開始と停止を行います。

Visual Basic
Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Me.Load
    LiveTimer1.Interval = 500
End Sub

Protected Sub LiveButton2_Click(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles LiveButton2.Click
    If Me.LiveButton2.Text = "開始" Then
        LiveTimer1.Start()
        Me.LiveButton2.Text = "停止"
    Else
        LiveTimer1.Stop()
        Me.LiveButton2.Text = "開始"
    End If
End Sub
C#
protected void Page_Load(object sender, EventArgs e)
{
    LiveTimer1.Interval = 500;
}

protected void LiveButton2_Click(object sender, EventArgs e)
{
    if(LiveButton2.Text == "開始"){
        LiveTimer1.Start();
        LiveButton2.Text = "停止";
    }else{
        LiveTimer1.Stop();
        LiveButton2.Text = "開始";
    }
}

Tickイベントでの処理作

 Tickイベントでは、LiveImageコンポーネントのLeftプロパティを増加させていきます。また、「リセット」ボタンでLeftプロパティに「10」を代入すると、スタートの位置に戻ります。

Visual Basic
Protected Sub LiveTimer1_Tick(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles LiveTimer1.Tick
    Dim x As Integer = Me.LiveImage1.Left.Value

    x = x + 10
    Me.LiveImage1.Left = x
End Sub

Protected Sub LiveButton3_Click(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles LiveButton3.Click
    Me.LiveImage1.Left = 10
End Sub
C#
protected void LiveTimer1_Tick(object sender, EventArgs e)
{
    double x = LiveImage1.Left.Value;

    x = x + 10;
    LiveImage1.Left = (System.Web.UI.WebControls.Unit)x;
}

protected void LiveButton3_Click(object sender, EventArgs e)
{
    LiveImage1.Left = 10;
}

 このように、Tickイベントハンドラの使い方は、VS標準コントロールのTimerとまったく同じで、WebページもWindowsフォームと同じ感覚でプログラミングできます。

 そして、Ajax対応なので、アニメーション中はページ全体がリロードさせませんから、アニメーションの部分だけスムーズに再描画されていきます。このような処理は、Ajaxならではの処理と言えるでしょう。

LiveImageコントロールだけが再描画されるので、画面のちらつきもなくスムーズなアニメーションを表示できる
LiveImageコントロールだけが再描画されるので、画面のちらつきもなくスムーズなアニメーションを表示できる

まとめ

 実際に使って(または動作させて)みれば、Ajax対応コンポーネントの便利さは分かると思います。

 特に、Ajaxを意識せずに普通にコンポーネントをWebページに配置するだけでこの恩恵を受けられるのは、WebデザイナーやWebソリューション開発ベンダーにとっては大きな効果を発揮するものと思っています。

参考記事

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

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

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

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