ガジェット・マスターへの まわり道！？ ～Ajaxを理解しよう～ 平成１９年１１月１５日 図書系のための アプリケーション開発講習会
通常のOPACではなくi-mode OPACのほうがガジェット向きかも 講習会サーバ OPACデータ いったん、OPACデータを講習会 サーバで加工するルート ガジェットを入れたPC 通常のOPACではなくi-mode OPACのほうがガジェット向きかも
サーバから送るデータ形式(HTML以外）の考察 XML WebAPIや、Ajaxでは基本だが扱いは面倒 かなりわかりにくい上に、Webブラウザ依存の部分あり。 JSON 最近はやりつつあるようです。JavaScriptの変数にコマンドひとつで変換可能 JavaScript依存ではないため、前田もPerlで使ったことがあります。 シンプルなテキスト 「言選Web」の実行結果は、HTMLではなく、テキストでかえってきます → 処理が楽です。 HTMLをJavaScriptで加工処理するのは面倒です。そこで、 上記のようなデータ形式を使うと話が楽になります。
CGI側で、すでに加工した形のHTMLを送り、Web画面の一部を書き換えるのがもっとも簡単です。 それにはJavaScriptライブラリ”prototype.js”が有効です。Ruby on Railsでも基本は、 ”prototype.js”のはずです。 サンプル https://133.11.199.14/mbc/maeda/form2.html
サンプルHTML (prototye.js を同じディレクトリに置く） <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CGIフォーム例(Ajax)</title> <script src="prototype.js" type="text/javascript"></script> <script type="text/javascript"> <!-- function sub() { var parameter = "title=" + $F('title').escapeHTML() + "&" + "auth=" + $F('auth').escapeHTML(); new Ajax.Updater( 'blk', './form2.cgi', { method: 'post', postBody: parameter}); } //--> </script> </head> <body> <form> タイトル：<input type="text" name="title"><BR> 著者： <input type="text" name="auth"><BR> <input type="button" value="ボタン" onclick="javascript:sub();"/> </form> <HR><P> <div id="blk">ここがターゲット</div> </body> </html> 同色は対応箇所
サンプルCGI #!/usr/bin/perl use CGI; $QUERY = CGI::new(); print $QUERY->header( -type => 'text/html; charset=utf-8' ); #Web画面の入力から値を得る $title = $QUERY->param('title'); $auth = $QUERY->param('auth'); # HTML文を print コマンドで出力 print "<H1>MBCのテスト</H1>"; # （以下、print文が続く） print "たいとるは,", $title, "<BR>"; # とか print "著者は, ", $auth, "<BR>"; # とか print <<END <form method="POST" action="form1-2.cgi"> <input type="hidden" name="title" value="$title"> <input type="hidden" name="auth" value="$auth"> <p><input type="submit" value="確定する" name="sub"></p> </form> END
OPACデータを取り込まないという選択肢 ～簡易検索窓だけ用意して、別窓で開く例～ <!-- Java Script 部分 --> <script type="text/javascript"> <!-- function OepnOPAC() { var UT_OPAC='https://opac.dl.itc.u-tokyo.ac.jp/opac/opac-query?disp=2&mode=1&kywd='; var UT_OPAC_URL = UT_OPAC.concat(encodeURI(sfrm.tex.value)); window.open(UT_OPAC_URL,"UT_OPAC"); } //--> </script> <!-- ここから先がフォーム --> <FORM id=sfrm action="" onSubmit="OepnOPAC()"> <input type="text" name="tex" value="" size="30"> <input type="submit" value="検索"> </FORM>