イベントの確認

今回利用するイベントは次の通りです。

 + 「 要素上にポインタが移動する 」( -onMouseOver )
 + 「 要素上でボタンを押下する 」( -onMouseDown )
 + 「 要素上で押したボタンを離す 」( -onMouseUp )
 + 「 要素上からポインタが外れる 」( -onMouseOut )

-onMouseDown, -onMouseUp は、CGI - perldoc.jp に紹介が無いパラメータですが、CGI.pm 側でよしなに扱ってくれました。

ちなみに、英語で「 event 」は、「 出来事 」や「 事象 」あるいは「 種目 」を意味し、ラテン語の「 成り行き 」を意味する言葉が語源になっているそうです。

プログラムコード

今回のプログラムコードは次の通りです。

#!/usr/bin/perl



use warnings;

use strict;



use CGI;

my $q = CGI->new();



print $q->header();



# ヒアドキュメント開始

my $JSCRIPT = <<END;

// Ask a silly question ( * JavaScript のコメント )

function riddle_me_this() {

  var r = prompt("What walks on four legs in the morning,\n" +

                 "two legs in the afternoon,\n" +

                 "and three legs in the evening?");

  response(r);

}

// Get a sill answer

function response(answer) {

  if (answer == "man")

    alert("Right you are!");

  else

    alert("Wrong! Guess again.");

}

END

# ヒアドキュメント終了



# HTML 出力

print $q->start_html(-title  => 'Pages for JavaScript test',

                     -script => $JSCRIPT,

                     ),

      $q->h1('The Sphinx says to you ...'),

      $q->img({-src=>'./IMG/20140724_sphinx00.png',

               -width=>'300',

               -align=>'right',

               -onMouseOver=>'src=\'./IMG/20140724_sphinx01.png\'',

               -onMouseDown=>'src=\'./IMG/20140724_sphinx02.png\'',

               -onMouseUp=>'src=\'./IMG/20140724_sphinx01.png\'',

               -onMouseOut=>'src=\'./IMG/20140724_sphinx00.png\''

             }),

      $q->img({-src=>'./IMG/20140724_sphinx03.png',

               -width=>'180',

               -onMouseDown=>'riddle_me_this()'

             }),

      $q->end_html();

プログラムの詳細を確認と併せて Web ページの表示を確認します。

Web ページの表示 ( 標準 )

まず、該当する Web ページにアクセスすると、上記プログラムコードを記述した index.cgi が起動して、すました顔のスフィンクスとなぞなぞが彫られた石版の画像を表示します。



すまし顔のスフィンクスは次のコードが出力します。

        :

        .

      $q->img({-src=>'./IMG/20140724_sphinx00.png',

               -width=>'300',

               -align=>'right',

        :

        .

なぞなぞの石版は次のコードが出力します。

        :

        .

      $q->img({-src=>'./IMG/20140724_sphinx03.png',

               -width=>'180',

        :

        .

各画像ファイルは、Web 公開領域内のディレクトリ IMG/ 直下に設置されていることが分かります。

Web ページの表示 ( -onMouseOver )

スフィンクスの画像の上にマウスポインタ ( カーソル ) を移動すると、目を見開いたスフィンクスが不敵な笑みを浮かべてこう言います。「 お前を食べてやろうか ? 」。



不敵なスフィンクスは、パラメータ「 -onMouseOver 」が指定された次のコードが出力します。

        :

        .

               -onMouseOver=>'src=\'./IMG/20140724_sphinx01.png\'',

        :

        .

「 -parameter=>'src=\'value\'' 」の部分では、シングルクォート内にシングルクォートを書いているので、内側のシングルクォートにはバックスラッシュ ( \ ) によるエスケープを行っています。

なお、別途検証をしたところ、外側のシングルクォートは、ダブルクォートや、クォート演算子「 qw 」( (0x1e ) で置き換えられることを確認しました。

つまり、次の様に書けばバッククォートエスケープを省くことが出来ます。

# double quote

-onMouseOver=>"src='./IMG/20140724_sphinx01.png'"

# or qw[ ]

-onMouseOver=>qw[src='./IMG/20140724_sphinx01.png']

# or qw( )

-onMouseOver=>qw(src='./IMG/20140724_sphinx01.png')

ダブルクォートが利用可能ということは、変数展開が出来るということです。

変数展開をする場合は、次の様に指定して変数に値 ( ここでは画像の相対パス ) を代入します。ダブルクォートの中にシングルクォートを含めた文字列を指定しているところがポイントです。

my $sphinx = "'./IMG/20140724_sphinx01.png'";

CGI.pm のメソッドでは、該当の変数を次の様に指定します。

-onMouseOver=>"src=$sphinx"

これによって、次の出力が得られます。

onmouseover="src='./IMG/20140724_sphinx01.png'"

結果的に「 parameter="attribute='vale'" 」の出力が得られていれば OK なので、変数への代入は次の様に指定しても問題ありません。

# backslash escape

my $sphinx = '\'./IMG/20140724_sphinx01.png\'';

# or qw( )

my $sphinx = qw('./IMG/20140724_sphinx01.png');

Web ページの表示 ( -onMouseDown )

「 お前を食べてやろうか ? 」と不敵な笑みを浮かべたスフィンクスに対して、マウスのボタンを押下すると、スフィンクスは身を乗り出してこう言います。「 ん ? 食べてやろうか ? 」。



この、スフィンクスはパラメータ「 -onMouseDown 」を利用した次のコードが出力します。

    :

    .

               -onMouseDown=>'src=\'./IMG/20140724_sphinx02.png\'',

    :

    .

Web ページの表示 ( -onMouseUp, -onMousOut )

-onMouseOver と、-onMouseDown で変更された画像は、「 -onMouseUp 」と「 -onMouseOut 」で元に戻します。元に戻す設定をしない場合は、イベントで出力した画像のままで表示が固定されます。

    :

    .

               -onMouseUp=>'src=\'./IMG/20140724_sphinx01.png\'',

               -onMouseOut=>'src=\'./IMG/20140724_sphinx00.png\''

    :

    .

「 -onMouseUp 」はマウスのボタンを離した時 ( 立ち上がり )、「 -onMouseOut 」は画像の上からポインタ ( カーソル ) が外れた時のイベントです。

画像データの表示とマウスの動作の関係は次の様になります。

 sphinx00.png <- 標準
 sphinx01.png <- MouseOver
 sphinx02.png <- MouseDown
 sphinx01.png <- MouseUp
 sphinx00.png <- MouseOut ( 標準に戻る )

Web ページの表示 ( 石版 )

なぞなぞの石版では、-onMouseDown を利用して、ヒアドキュメントで自作した JavaScript の関数を呼び出しています。

    :

    .

      $q->img({-src=>'./IMG/20140724_sphinx03.png',

               -width=>'180',

               -onMouseDown=>'riddle_me_this()'

             }),

-onMouseDown を利用しているので、石版上でマウスをクリックすると次の様になぞなぞのダイアログが表示されます。使用している Web ブラウザは、Chrome 36.0 です。



ダイアログのデザインや出現位置までコントロール出来る様になると楽しそうです。

0xdd -> 0xde へ

こないだ takkuru98 君に Gitlab の導入方法を教えてもらいました。あまりにも初歩な状態なので、まだなんとも言えませんが、なかなか面白そうです。

代わりという訳ではありませんが、takkuru98 君が勉強中の正規表現の基礎問題を一緒に解いてあげました。

「 は ? Perl で基礎を勉強した俺だし、こんなん余裕だし ww 」と思ってやってみたら、結構忘れていてドギマギしてしまいました。

時折復習が出来る様に、正規表現のじぶん向けまとめ ( チートシート ) をしておく必要性を感じました。


参考情報は以下の書籍を中心に Wikipedia および各 Web サイト。それと詳しい先輩。

参考 :「Randal L. Schwartz, brian d foy, Tom Phoenix 共著 近藤 嘉雪　訳「初めての Perl 第 6 版」(オライリー・ジャパン発行 ISBN978-4-87311-567-2)」


次回 (0xde) へ続く。

目次 - Perl Index