エンジニアもWebデザインを勉強しよう!-WordPress初インストール

2月19日(土)にはWordCampFukuoka2011が開催されるという事で
ためしに、WordPressサーバーを会社の自PCにインストールしてみました。


WordPressのインストールは5分でインストールできるという触れ込みでしたが、なぜかうまく
いかず、WordPressのinstall.phpEclipseデバッグしながらインストールしてみたところ
MySQLでデータベースを作成しておかないといけなかったようです。
おかげで、EclipsePHPデバッグができるようになりました。(副産物?)
PHPだったのですが、もうPHPでのプログラミングはバッチリです。


WordPressに必要な環境は以下の3つです。


今回はWindows環境にWordPressをインストールしたのでXAMPP(ザンプ)を使用して
インストールしてみました。
MySQLWordPress用のデータベースを作成した後、wp-config.phpに以下の項目を設定します。

  • データベース名
  • データベースのユーザー名
  • データベースのパスワード
  • データベースのホスト名
  • テーブル接頭辞


まあ、あっけなく?(MySQLでのデータベース作成で躓いているじゃないか!)
インストールできました。


Webデザイナーじゃなくてもデザインの勉強は必要だなと思うのですが、なかなか勉強する
気にならずにWordPressも触った事がなかったのですが、ついにというかようやく
WordPressです。
企業向けのホームページなどをWordPressで作成、運営管理したら便利かな?
って考えています。
といわけでまずは、WordPress向けのコーポレートサイトで使用できそうなテンプレート探し
からはじめるかな?


自分のエンジニアとしての今後の方向性としては、
いままではずっとWebアプリ開発に携わってきたのですが、業務システム以外の経験が
なく、Webデザインとは正直無縁だったのですが、これからは自分でデザインとまでは
いかなくてもWebデザイナーと協業して仕事ができればと考えています。
ということなのでスクリプト言語をもっと勉強したいなと思います。
RubyPHPでもいいですが、意表をついてサーバーサイドのJavaScript(node.jsライブラリ)
がいいなって思います。

「Canvas(HTML5)」 VS 「ASP.NET」で図形描画

Webで図形描画といえばHTML5Canvasが今や常識ですが、
今回はASP.NETで図形描画してみました。


Ajaxの基本技術で一覧表示高速化はこちら!

処理概要

  1. 描画領域のPanelコントロールを作成
  2. PictureBoxコントロールに図形を描画→VB.NETによる図形描画と同じ
  3. PictureBoxコントロールをPanelコントロールに追加→Panelコントロール.Controls.Add(PictureBoxコントロール)
  4. PanelコントロールからBitmapコントロールを作成
  5. BitmapコントロールをGif形式に型変換して画面に書き出し

コードビハインドページのPGコード

ざっくり書くと以下のとおりです

        '描画領域のパネルを設定
        Dim pnlView As New Panel
        '図形を描画するグラフィックスを準備する
        Dim g As Graphics = Nothing

        '図形を描画するピクチャボックスを準備する(サイズ(300,500)、)
        Dim picBase As New PictureBox
        With picBase
            .Width = 300
            .Height = 500
            .SizeMode = PictureBoxSizeMode.AutoSize
            .BackColor = Color.White
            .Image = New Bitmap(200, 400)		'サイズ(200,400)
            g = Graphics.FromImage(.Image)
        End With

        '座標(20,20)から座標(40,40)に線(色:黒,サイズ:1)を引く
        g.DrawLine(New Pen(Color.Black, 1), 20, 20, 40, 40)

        '座標(50,50)から座標(100,100)に四角形(色:黒,サイズ:1)を引く
        g.DrawRectangle(New Pen(Color.Black, 1), 50, 50, 100, 100)

        '画像を追加
        bmp = Nothing
        bmp = New Bitmap("画像ファイルパス")
        '座標(150,200)にサイズ(横幅:50,縦幅:100)
        g.DrawImage(bmp, 150, 200, 50, 100)

        picBase.Name = "PIC"
        pnlView.Controls.Add(picBase)
        picBase.Parent = pnlView
        g.Dispose()

        Dim pnlSize As System.Drawing.Size = pnlView.Controls.Item("PIC").Size
        pnlView.Width = pnlSize.Width
        pnlView.Height = pnlSize.Height
        pnlView.AutoScroll = True
        pnlView.AutoSize = True

        'ビットマップを画面に送信
        Dim aViewBitMap As System.Drawing.Bitmap =  _
                New System.Drawing.Bitmap(pnlSize.Width, pnlSize.Height)
        Try
            pnlView.DrawToBitmap(aViewBitMap,  _
                        (New System.Drawing.Rectangle(0, 0, pnlSize.Width, pnlSize.Height)))
            Response.ContentType = "image/gif"
            aViewBitMap.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Gif)
        Catch ex As Exception
            'エラー処理
        Finally
            aViewBitMap.Dispose()
        End Try

まとめ

  • ASP.NETで図形描画する場合はビットマップに図形を描画してGifに変換してHTMLに出力(レスポンス)
  • 図形が画面のサイズより大きい場合、ブラウザの機能で自動的に画像が縮小表示されるのが問題!

今更?ASP.NET Ajax(非同期処理)で一覧表示パフォーマンス改善

ASP.NETでGridViewを使用した一覧表示でAjax(非同期)処理による一覧データの追加処理についての備忘録です。


HTML5のCANVASを拒絶する訳ではないけどASP.NETでも図形描画できる!


ポストバックが発生しない不思議な障害についてはこちら!

機能

メイン処理で縦スクロール位置によって一覧の追加データを取得するか判断して、
追加データを取得する場合はAjax(非同期)処理によりAjaxSample2.aspxよりデータ取得して
一覧に追加して表示します。
なお、ヘッダーはスタイルシートを使い固定しています。

AjaxSample.aspxファイルでのAjax(非同期)処理サンプル

まずはヘッダ部ですが、GridViewで使用するスタイルシートを記述

<head id="Head1" runat="server">
    <title>非同期処理で一覧データ取得サンプル</title>
    <link href="../../css/std.css" rel="stylesheet" />
    <style type="text/css">
        tr.Freezing {
	        Z-INDEX: 10; POSITION: relative; ; TOP: expression(this.offsetParent.scrollTop); 
        }
        .HeaderStyle th a {color:black; text-decoration:none;}
        .GridStyle
        {
	        overflow-y:auto;
	        width:210px;
	        height:500px;
        }
    </style>
</head>


非同期でサーバとやりとりをするXmlHTTPRequestインスタンス生成

function getHttpObject()
{
    var retval=null;
    try
    {
	retval=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
	try
	{
		retval=new ActiveXObject("Microsoft.XMLHTTP");
	}
	catch(oc)
	{
		retval=null;
	}
    }
 
    if(!retval && typeof XMLHttpRequest != "undefined")
    {
	retval=new XMLHttpRequest();
    }
    return retval;
}


非同期処理でのサーバー通信とサーバーからの応答時の処理

function send() {
    //非同期通信を行うためのXMLHttpRequestオブジェクトを生成
    xmlReq = getHttpObject();
    if(xmlReq)
    {
        //現在表示中データを退避
        initData = document.getElementById("result").innerHTML;

        //サーバーからの応答時の処理を定義(結果のページへの反映)
        xmlReq.onreadystatechange = getAsynData;
        //キャッシュを回避するため時刻を付加
        var paramList = "time=" + (new Date().getTime());
        // サーバーとの通信を開始
        xmlReq.open("GET","AjaxSample2.aspx?" + paramList,true);
        xmlReq.send(null);
    }
}


非同期処理で取得したデータを一覧(テーブルタグ内)に追記

//非同期処理からデータを取得
function getAsynData() {
    var nCnt;
    var newData;

    var msg = document.getElementById("result");
    if (xmlReq.readyState == 4) {
        if (xmlReq.status == 200) {
            nCnt = initData.length;
            nCnt = initData.lastIndexOf("</TABLE>", nCnt);

            //追加データを取得
            newData = xmlReq.responseText;

            //現在表示中データに取得データを追加
            msg.innerHTML = initData.substring(0, nCnt).concat(newData);

        } else {    //通信に失敗した場合
            msg.innerHTML = initData;
        }
    }
}


JavaScriptのonloadイベントで一覧のスクロールイベントの処理を記述
一覧スクロール時にデータ取得位置より下側ならば非同期通信処理を呼び出す

//一覧のスクロールイベント時の処理を定義
function setOnScrollEvent(){
    document.getElementById("Grid").onscroll = function(){
        scrollTop = document.getElementById('Grid').scrollTop;

	//一覧のスクロール位置より追加データを取得するか判断
	if(Number(scrollTop) > Number(一覧データ取得位置)){
   	    //非同期通信によりデータ取得
	    send();
	}
    }
}

//グリッドビューのスクロール時のイベント処理追加
window.onload = setOnScrollEvent;


↑ここまでがJavaScriptでこの後はHTMLの記述
GridViewコントロールを使用して一覧表示

<body>
    <form id="form1" method="post" runat="server" >
        <asp:Panel ID="Panel1" runat="server" Height="500px" Width="210px" BorderStyle="Solid" BorderWidth="2px">
            <div id="Grid" class='GridStyle'>
            <div id="result" class='DummyBackColor'>
            <asp:GridView style="overflow:auto" ID="gdViewSample" runat="server">
                <Columns>
                    <asp:BoundField  DataField="TestColumn1" HeaderText="カラム1">
                        <ItemStyle Width="70px"  HorizontalAlign="Left"
                        VerticalAlign="Middle" />
                        <HeaderStyle  Width="70px" HorizontalAlign="Center" />
                    </asp:BoundField>
                    <asp:BoundField  DataField="TestColumn2" HeaderText="カラム2">
                        <ItemStyle Width="70px" HorizontalAlign="Left"
                        VerticalAlign="Middle" />
                        <HeaderStyle  Width="70px" HorizontalAlign="Center" />
                    </asp:BoundField>
                    <asp:BoundField  DataField="TestColumn3" HeaderText="カラム3">
                        <ItemStyle Width="70px" HorizontalAlign="Center"
                        VerticalAlign="Middle" />
                        <HeaderStyle Width="70px" HorizontalAlign="Center" />
                    </asp:BoundField>
                </Columns>
                <HeaderStyle BackColor="Control" CssClass="Freezing HeaderStyle"
                    ForeColor="Black" />
            </asp:GridView>
            </div></div>
        </asp:Panel>
    </form>
</body>
</html>

AjaxSample2.aspxファイルでのAjax(非同期)処理サンプル

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Response.Clear()
        Response.BufferOutput = True
        Response.Write(AjaxSample.aspxに返すHTMLデータ)
        Try
            Response.End()
        Catch ex As Exception
        Finally
        End Try
    End Sub

本日は徒然意味無くつぶき!

クラウドストレージ

身近なところでクラウドっていうとやっぱりなんといってもEvernoteDropboxに代表される
クラウドストレージだと思います。


スマートフォン(Android Desire)を使い始めた事もあり、EvernoteDropboxなどのクラウドストレージを使い始めたのですが、無料版は容量が全然足りない!!
かといって有料版にアップグレードするのはちょっと抵抗が・・・。

観光地を訪れたり、ユニバーサル・スタジオにいった時の写真をEvernoteに保存、移動中に
AndroidIT技術関連の資料を閲覧しようと思い、Dropboxに資料をとにかく突っ込んでいた
らあっという間に容量がパンパンになってしまった。
焼け石に水かも知れないけれどSugarSyncも使ってみようか?って言ってもそうすると資料が
分散されてしまうので、クラウドストレージを利用する意味が半減しそう。


ちなみにうちの会社では個人情報保護の関係上、Dropboxの使用は禁止ってどうなんだろう?
僕は開発部門の実施責任者という肩書き(有名無実)立場上ルールは当然守りますが、非常に
残念!
今の時代の流れに逆行しているような気がして・・・。
立場を悪用して?Dropboxを社内の禁止ソフト一覧から除外しようかと本気で考えています。
マシンにインストールすると問題ですが、Web版を使用する程度は社内の情報を気がつかない
うちに流出させるような危険もないし問題ないかな?と考えています。


ちなみに今のWeb系の各種ツールの使い分けは次のような感じ↓

Evernote

写真やメモ、後は気になったWebサイトをクリップして保存した物が少し。

Dropbox

IT技術関連の資料や勉強会でのドキュメントが大半。

RSSリーダー

後は朝の仕事前にセキュリティ情報をRSSリーダーざっと参照
(特に気になった場合は、はてなブックマークに登録)
今はやりのtwitter botと作成してみたいがいまだ行動できず。誰か教えて!!

はてなブックマーク

昼休みにサイトを閲覧して気になったサイトを保存。

スマートフォン(Andoroid Desire)

6月の半ばから使い始めたのですが、調子に乗ってアプリを1杯インストールしたらこれま
たメモリが足りない・・・(こいつもか!)。
という事で不要なデータを削除してメモリに余裕を持たそうとしたのですが、なんと
Friend Stream(Desireで標準装備)のデータを削除してしまって復旧できなくなってしまい
ました。
メモリが不足する原因はアプリをインストールするとメモリに保存されるためです。
ノイマン型のマシンは例外なくアプリケーションを一度メモリに読み込んでから実行する
のですが、スマートフォンはなぜかインストール先がメモリ!!(iPhoneも)
確かにこれならばアプリ起動時にメモリに読み込む手間は省けるけど、メモリと保存領域
(Micro SD)の処理速度の差が大きいためだろうか?
(PCにはディスクキャッシュがあったっけ?)
っという感じに悩んでいたら、10月にAndroid Desireで対応予定のAndroid2.2(Froyo)で
はアプリをメモリに保存せずにMicro SDに保存するという朗報が!!
今回のバージョンアップの目玉ではないでしょうか?


Androidを買ったのでポケットWiFiデビューしたのですが、バッテリーが持たなくてこち
らは会社のパソコンでいつも充電中です。
家のパソコンのインターネット契約も解除して少し通信費が安くなりそうです。


これからのテーマはクラウドとモバイルだ!!って事でシャープが実施された
Androidアプリのテクニカルセッションに参加したのですが、開発環境の準備不足でスタ
ッフの方にご迷惑をかけてしまう体たらくで反省の日々です。
久留米プログラミングフリークスの分科会も立ち上げられたようですし、参加して自分で
スマートフォンのアプリを作ってみたいなと考えています。


何か進展があればまた、ブログに書いてみたいと思います。

BackTrackのツールでハッキング!!

ライトニングトーク大失敗についてはこちら!!
今回はライトニングトークはないので無事勉強会終了!
以下に勉強会の様子をお知らせします。


セキュリティを守るには攻撃をしかけてくる相手の手の内を知らなければな
らないということで、今回のHack in the Cafe FukuokaはBackTrack4の付属
DVDのツールを使ってみんなで手を動かしてハッキングをしました。
誤解のないように強調しますが、あくまでも攻撃から守る側です。

VMware Player(VirtualBox)のインストール


BackTrackの起動


VMware Player(VirtualBox)の仮想マシン上でBackTrackをisoイメージから起動します。



以下の操作でBackTrackを起動します。
キーボードから「start-network」と入力してEnterキー
キーボードから「startx」と入力してEnterキー

BackTrack画面


無事BackTrackが起動できました!

BackTrackメニュー


BackTrackを起動後はメニューから好きなツールを選んでBackTrack4に収録さ
れているツールを使用する事ができます。


今回は各自担当を決めてツールを検証してみんなに報告するという形で勉強
しました。
私が選んだテーマは「Privilege Escalation(権限上昇)」です。
この内容はパスワードクラッカー・スニッファー・スプーフィングなどですが、
この中でパスワードクラッカーに焦点を当てて検証してみました。
手順としてはまず「CUPP」で辞書ファイルを作成した後、「BruteSSH」、「VNCrack」
または「TcPick」を使用してパスワードのクラックを行います。

ちなみに「CUPP」ではユーザーのプロフィール情報などを入力させる事によりユー
ザーがパスワードに設定する可能性が高いパスワード文字列を一括生成できます。
総当り攻撃でのパスワード解読で鍵を握るのが辞書ファイルの内容なので有効な
ツールだと思います。

パスワードクラックの考察

パスワードの解読方法
・総当り攻撃(Brute force password cracking)
 全ての組み合わせを機械的に入力して攻撃する。
・辞書攻撃
 パスワードに良く使われる単語が登録されておりこれを元に攻撃する。


辞書攻撃によるパスワードクラックは辞書ファイルの精度がパスワードクラッ
ク成功を成否するのだが、この辞書ファイルの精度を左右するのはプロフィー
ルなどの情報です。
そういった事を考えると世間でよくニュースとして報道される個人情報、顧客リスト
流出といった不祥事はセキュリティ上重大な問題だといえます。
こうした情報が、ハッキング攻撃により利益を得る犯罪組織の手に渡る事によりハッ
キング犯罪を招いてしまうと考えられます。
私もP-Mark実施責任者及びネットワーク管理者を担当していますが、個人情報の保護
がいかに重要かを再認識させられました。

BackTrack4の収録ツールのリスト(参考)

・インフォメーションギャザリング(情報収集)
  ネットワーク監視やシステム管理の調査を行うツール
・ネットワーク探索
  ネットワーク上に何があるかどのIPアドレスが使用されていてどのポート
  が空いてるか、どんなサービスが動いているか探索するツール
脆弱性確認
  ネットワークの脆弱性検査ツール
・Webアプリ監査
  Webアプリ検査のためのツール
・無線ネットワーク解析
  無線通信を解析するためのツール
ペネトレーション(貫通)
  コンピューターやネットワークのセキュリティ上の弱点(脆弱性)を攻撃する
・権限上昇
  パスワードクラッカー・スニッファー・スプーフィング
・アクセス保持(トンネリング)
  インターネット上の2点間で仮想的な回線を確立する

これで僕もUbuntu使い!WubiでUbuntuインストール

雑誌にのっていた記事を参考にWubi(Windows-based UBuntu Installer)
を用いてWindows環境にUbuntuをインストールしてみました。


通常、Windowsの入っているPCにUbuntuを入れてWindowsと併用する場合、
デュアルブートにします。
しかし、デュアルブートではパーティションを切り直す必要があるため危険も
ありますし、Ubuntuが不要時に削除するのも手間がかかる。
そのため、Wubiを利用する事にしました。
WubiのサイトでダウンロードしてUbuntuのインストールをするとあっけなく
インストールできました。
使い心地はデュアルブートUbuntuを入れた時とほとんど変わりません。


Wubiを用いてUbuntuをインストールする場合、Windowsファイルシステム
上に仮想的なUbuntuパーティションが作成されます。
これはWindowsからは単一のファイルであり、Ubuntuではこれを使用するだ
けなので、パーティションを切り直す必要はありません。


また、インストール作業においてWubiWindows上で作業ができるため、仮想
CDやネットワークドライブからもインストールが可能。
(光学ドライブが付いていない事が多いネットブックに便利)
WubiUbuntuインストール後は普通のデュアルブートと同様起動時にWindows
Ubuntuかを選ぶ。

問題点

仮想パーティションであるためディスクのパフォーマンスが若干落ちる
正常にシャットダウン処理を行わず終了させるとデータが消失する可能性がある。

インストール

以下のサイトからWubiをダウンロード後Wubi.exeを実行して、画面の指示に従って
インストール作業を行う。
http://wubi-installer.org/


インストールの基本設定を行ってインストールします

絶対絶命!もうクビ?ポストバックとビューステート障害

ASP.NETでフレームを使用したシステムで、発生した障害内容についてまとめます。


Ajaxを使用して一覧表示のパフォーマンスを改善するブログはこちら!

システム環境

Windows Server 2003 StandardEdition With ServicePack1 (OS)
InternetExplorer6 SP2
Visual Studio 2005(Service Pack1)⇒ASP.NET 2.0
IIS 6.0

障害内容

ポストバック障害

ポスト(Request要求)は行われるが、ポストバックイベントが発生しない。
(同じ操作で正常にポストバックイベントが発生したり発生しなかったりする)
また、ポスト時にIsPostBackプロパティの値がFalseになっていてポストバック
として認識されていない。
例)ポストバック時
  (ボタンクリックイベント、ドロップダウンのSelectedIndexChangedイベント)
・正常な動作
  Page_Loadメソッドが実行
  ボタンクリックイベントが発生
・障害時の動作
  Page_Loadメソッドのみ実行

ビューステート障害

ポストバック時に全WebControlの状態が初期状態に戻る(ビューステートが消失)
(同じ操作でビューステートが消失したり保持されたりする)
例)ポストバック時のasp:Labelやasp:buttunコントロールの情報
・正常な動作
  表示していた内容(値、背景色、文字色等)が保持されて表示される。
・障害時の動作
  表示していた内容(値、背景色、文字色等)が消失してデフォルト値に戻る。

ポストバックの仕組み

ボタンコントロール

ポストバックはコントロールのイベント検知用value値を参照して値が変更されていればイ
ベントが発生したものと扱います。
(ドロップダウン、リンクボタンやテキストボックスに当てはまるが通常のボタンは無関係)

ドロップダウンコントロール、リンクボタン等

JavaScriptで__doPostBack関数の第1引数にイベントが発生したコントロールID、第2引数
にコントロールの値を渡してポストさせて、コードビハインドページでイベントが発生し
たコントロールIDとイベントの種類を検知します。

以下はdoPostBack関数のサンプルです

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
	無題のページ
</title></head>
<body link="#000ce0">
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
    value="/wEPDwULLTE4NDIzMDg2NDRkZP3kLJ7ET0ucGldWzRUtevIJ+CLA" />
</div>

<script type="text/javascript">
<!--
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
// -->

ポストバック障害の原因

ポストバック障害と共に、ビューステートの消失障害が発生している。
(Request情報を参照したところ、ビューステートが消失していた。)
原因として以下の可能性を考えています。

原因その1

PostではなくGetでリクエスト要求がされている。
⇒この場合、ポストバックイベントは発生せず、ビューステートも消失する。
 ポストデータ全てが取得できなくなる。

原因その2

ポストバックではなくポストとしてリクエスト要求されている。
⇒この場合、ポストバックイベントは発生しない。
 ビューステートは初期表示時と同じ情報を保持。

原因その3

ビューステートが消失してイベントが発生したコントロールIDとイベントの種
類が判別不能になっている。
(コントロール値の以前の状態との差異を判断できない)
⇒この場合、ポストバックイベントは発生しない。

検証

原因その1

  ポストデータがコードビハインドページで参照可能なため異なる。

原因その2

  動作としては近い。
  ビューステートは消失したのではなく、コントロールを初期表示時の状態で表示している。
  ビューステートの消失は起きていない。

原因その3

  Buttunコントロールのポストバックイベントにはコントロールの以前の状
  態との差異は無関係なため異なる。


検証の結果、「原因その2」が原因ではないかと考えられる。
また、このケースの場合、ビューステート障害は発生していないと考えられる。
補足だが、ビューステートのデータ量が膨大である場合にポストができないという現象が
発生する事があるようだが、それほどビューステートのデータ量が多いわけではないので
原因ではないようだ。


結局ポストバック障害は正確な障害原因は分からずじまいですが、
ネットワーク、セキュリティの設定で同様の現象が起きるといった情報もネット
上に掲載されていました。

対応方法

他のシステムが動作している環境にシステムを構築するため、ネットワーク、セキュリティの
環境設定を変更することはできないため、以下の対応によりポスト発生時に明示的にイベント
発生時の処理を呼び出す事により、ポストバック障害の対応をしました。
なお、ビューステートはポストバックの度にコントロールに情報を再設定することにより対応をしました。
(コントロールを初期表示時の状態で表示しているため)

対応の詳細

1.イベントが起きたコントロールを保持
  JavaScriptで以下の処理を行う

  • OnClientClickイベントによりJavaScriptの関数を呼び出す
  • hiddenコントロールにイベントが起きたコントロールID(イベントの種類)を保存する
  • ポストを実行する(自動でポスト)


2.イベントが発生したコントロールのイベント処理を呼び出す
  コードビハインドページで以下の処理を行う    

以下ASPXファイルのサンプル(ボタンコントロールの対策)
<%@ Page Language="VB" CodeFile="default.aspx.vb" Inherits="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>検索条件選択</title>
</style>
</head>
<script language ="javascript" type="text/javascript">
//コントロールのポストバック発生時
function btnExePost(btnID)
{
  document.getElementById('txtEvent').value = btnID;
}

//ドロップダウンコントロールの選択変更処理
function drpSelectChng(drpObj)
{
  //選択したインデックスを保存
  document.getElementById('txtSelectedIndex').value = document.getElementById(drpObj).selectedIndex;
  //選択変更したドロップダウンコントロールの保存
  document.getElementById('txtDrpSelChng').value = drpObj;
  //ドロップダウン選択変更イベント
  document.getElementById('btnDrpSelChng').click();
}
</script>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Button ID="btnSearch" OnClientClick="btnExePost('btnSearch');" runat="server" Text="検索" />
    <select ID="drpEigyo" runat="server" onChange="drpSelectChng('drpEigyo')" ></select>
    </div>
    </form>
</body>
</html>
以下コードビハインドページのサンプル
  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim isPostFlg As Integer = 0
    If Not Me.txtEvent.Value = "" Then
      If IsPostBack = False Then
        isPostFlg = 1
      End If
    Else
      isPostFlg = 2
      '一度画面が表示されたらセットする
      Me.txtEvent.Value = "Post"
    End If

    '0:ポストバック処理(正常) 1:ポストバック処理(異常),2:初期表示時
    Select Case isPostFlg
      Case 1
        Select Case Me.txtEvent.Value
          Case "btnSearch"
            btnSearch_Exe()
          Case "btnDrpSelChng"
            btnDrpSelChng_Exe()
              ・
              ・
              ・
        End Select
        Me.txtEvent.Value = "Post"
      Case 2
        初期表示時の処理を記述
              ・
              ・
              ・
    End Select
  End Sub

  'ポストバック処理(正常:Page_LoadイベントでisPostFlg=0)
  Protected Sub MultiButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSearch.Click, _
                                                                                                 btnDrpSelChng.Click
    Dim aControlID As String = CStr(CType(sender, Button).ID)
    Select Case aControlID
      Case "btnSearch"
        btnSearch_Exe()
      Case "btnDrpSelChng"
        btnDrpSelChng_Exe()
           ・
           ・
           ・
    End Select
  End Sub