ガジェット・マスターへの まわり道!? ~Ajaxを理解しよう~

Slides:



Advertisements
Similar presentations
情報アプリケーション1 2006 年 10 月 12 日 第四回資料 担当 重定 如彦. 目次 データの送信とフォーム クイズ CGI 複数のパーツのデータの分割方法 配列変数.
Advertisements

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます prototype.js と Perl で Ajax 株式会社はてな 伊藤 直也
1 なんとなく Ajax ~新しくて古い XMLHttp 川合孝典 (Kansai.pm) 2005/5/22.
BBT大学 Ruby on Rails開発環境セットアップマニュアル
インターネット技術特論 D:SSI,PHP,eRuby 山口 実靖
2007/12/21 宮脇文経 源氏物語の世界 再編集版 オリジナル - 高千穂大学 渋谷栄一教授 作成、無償公開
図書系職員のための アプリケーション開発講習会
IDLTM/IONTMを使用した UDON (Universe via Darts ON-line) プロトタイプの作成
売れるためのWEBサイト構築.
オペレーティングシステムⅡ 第5回 講師 松本 章代 VirtuaWin・・・仮想デスクトップソフト 2009/11/6.
Servlet入門(2) 入力フォームをつかったWebアプリ
情報理工学部 情報システム工学科 4年 H 亀窪祐太 H 纐纈琢真
Webコミュニケーショングループ ~PHPの基礎~ M1 宮崎 真.
稚内北星学園大学 情報メディア学部 助教授 安藤 友晴
Webサービスマッシュアップを利用したWebアプリケーションの開発
第1回 JavaScriptゼミ ・ scriptエレメント ・ 記述における諸注意 ・ 古いブラウザへの対応方法
オペレーティングシステムⅡ 第3回 講師 松本 章代 VirtuaWin・・・仮想デスクトップソフト 2009/10/16.
PHP 実用的なサンプル 浅川 和久 2017/3/18 PHP 実用的なサンプル.
佐賀大学 理工学部知能情報システム学科 講師 大月 美佳
JavaScript 成瀬 基樹 平野 敦 北浦 繁.
§3.3 プログラミング 第10回 今日の目標 高級言語のプログラムを実行するまでの過程を示せる インタープリタの仕組みを説明できる
Bottle/Pythonによる Webアプリ入門
タグライブラリとJSP J2EE I 第10回 /
平成19年11月8日 図書系職員のための アプリケーション開発講習会
PHP プログラムの実行 担当 岡村耕二 月曜日 2限 平成22年度 情報科学III (理系コア科目・2年生)
Webコミュニケーショングループ ~CGI勉強会~ (データーベース編)
図書館ツール発想日記 ~「東京大学内のサイトから関連学術用語のデータを得る」(仮称)システムへの寄り道思考経路~
ビューとコントローラ.
JQueryでAjax 藤田@ジャストプレイヤー ※参考しまくり文献 jQuery日本語リファレンス.
タグライブラリとJSP J2EE II 第2回 2004年10月7日 (木).
情報アプリケーション1 2008年 12月 3日 第四回資料 担当 重定 如彦 .
押さえておきたいIE8の セキュリティ新機能
HTTPプロトコル J2EE I 第7回 /
第8章 データベースシステムの発展 8.1 オブジェクトリレーショナルデータベース 8.2 分散データベース 8.3 インターネットとデータベース.
基礎プログラミング演習 第7回 繰り返し.
JSPの作成 J2EE II 第3回 2005年4月10日.
個人情報入力の為に、外部WEBサービスにセキュアにsnsのユーザIDを渡す仕様(c_member_id)
情報整理のための Google Map API入門
Servlet入門(2) 入力フォームをつかったWebアプリ
「OPACに買い物カゴを」 ~東京大学OPACバスケット~
CiNIIほかに関連語提示機能を ~つっこみの第二回~
サイバーセキュリティ演習 ― Webセキュリティ基礎&実践―
データベース設計 第9回 Webインタフェースの作成(1)
Javaによる Webアプリケーション入門 第5回
情報アプリケーション1 2006年 10月 5日 第三回資料 担当 重定 如彦 .
平成22年6月15日 図書系職員のための アプリケーション開発講習会
第8章 Web技術とセキュリティ   岡本 好未.
2004年度 サマースクール in 稚内 JavaによるWebアプリケーション入門
2003年度 データベース論 安藤 友晴.
9.1 DOMの概要 9.2 DOMプログラミングの基礎 9.3 DOMのプログラミング例
第4回JavaScriptゼミ セクション2-8 発表者 直江 宗紀.
パソコン並みの性能を持つスマートフォンに関する情報教育
図書館職員のための アプリケーション開発講習会
2018/12/5 ネット商品の管理術 ファイル読み込みの活用.
制作技術ー4 アクセスカウンタ等付加機能 PHP と Javascript
制作技術ー3 双方向通信 : CGIシステムと環境変数
平成19年10月19日 図書系のための アプリケーション開発講習会
Jakarta Struts (2) ソフトウェア特論 第11回.
情報アプリケーション1 2006年 10月 19日 第四回資料 担当 重定 如彦 .
JavaScript プログラミング演習 - じゃんけんゲーム - 「ホームページを動的に制御したい…」
ウェッブページ書法の復習 ネットワーク論以前のお話.
Webアプリケーションと JSPの基本 ソフトウェア特論 第4回.
地域生活支援システムの開発 越田研究室 j0431 野津洋二.
図書系職員のための アプリケーション開発講習会
Webページに動きを持たせるJavascript言語について 例題のプログラムを通して体験的に理解することとします。
第14回放送授業.
PHP と SQL (MySQL) の連携 日本語のデータを扱う
例題のプログラムを通して JavaScriptの仕組みを理解することとします。
JSFによるWebアプリケーション開発 第7回
情報基礎 空間情報の利用 講義の資料は下記のURLを参照.
Presentation transcript:

ガジェット・マスターへの まわり道!? ~Ajaxを理解しよう~ 平成19年11月15日 図書系のための アプリケーション開発講習会

通常の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>