© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます prototype.js と Perl で Ajax 株式会社はてな 伊藤 直也

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます Ajax って ? Asynchronous JavaScript + XML 定義はあいまい JavaScript による動的ロードテクニック 読み方 えーじゃっくす あじゃっくす

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます Ajax おさらい JavaScript XMLHttpRequest サーバーサイド アプリケーション XML API 非同期通信 HTML + CSS ブラウザ描写 (DHTML) クライアント側サーバー側 DOM

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます Ajax でありがちなロジック Hello, World! XMLHttpRequest で GET + responseText を innerHTML で表示させる 裏で CUD XMLHttpRequest で POST 、 DB に CUD 画面遷移なしにデータを永続化

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます Ajax 用ライブラリ ありがちな処理はライブラリで楽をしよう Survey of AJAX/JavaScript Libraries Prototype Rico Scriptaculous MochiKit SAJAX Dojo DWR

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます Prototype prototype.js Sam Stephenson 動的アプリケーション用フレームワーク Ajax 向け " にも " 色々機能を提供 Ruby on Rails

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます prototype.js 特徴 JavaScript 書きが割りと楽になる 様々な機能 クラスベース OO Ajax DHTML 用ユーティリティ Form Effect イベント処理 DOM の拡張

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます prototype.js のドキュメント ない ソース嫁 Using prototype.js v e.js.html

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます 使い方 script タグで取り込む コード書く // in html // in js var Animal = Class.create(); Animal.prototype = { initialize : function (name) { this.name = name; }, bark : function () { document.writeln(this.name); } var Dog = Class.create(); Dog.prototype = (new Animal).extend({ bark : function() { Animal.prototype.bark.apply(this); } });

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます Prototype の Ajax 機能 Ajax.Request Ajax.Updater Ajax.PeriodicalUpdater

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます Ajax.Request Ajax なリクエストを飛ばす <a href=" new Ajax.Request( '/hello', { parameters : Form.serialize(this.form), asynchronous : 1, onComplete : function(request){ alert(request.responseText); } ); ">blah blah.

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます Ajax.Updater 特定のエレメントを動的に更新 <a href="#" onclick=" new Ajax.Updater( 'result', '/hello', { asynchronous: 1 } ); return false">Hello?

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます Ajax.PeriodicalUpdater 特定のエレメントを定期的に更新

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます PeriodicalExecuter + AjaxRequest 定期的にサーバーサイドのデータを更新 new PeriodicalExecuter( function () { new Ajax.Request( '/autosave', { asynchronous: 1, parameters: Form.serialize($('textform')) }) }, 10 );

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます Ajax 以外でも便利なの多し var name = $('name'); // getElementById('name'); alert($F('age')); Form.selialize($('profile')); // name=...&age=...&sex=... male famale Perl Ruby PHP

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます フレームワークと Prototype script src="prototype.js" より楽に HTML::Prototype プラグインによる拡張 Catalyst::Plugin::Prototype CGI::Application::Plugin::Prototype Sledge::Plugin::Prototype Template::Plugin::Prototype

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます HTML::Prototype 各種プラグインの中で使われている JavaScript レスで prototype.js HTML::Prototype::Useful 凝ったこともいくつかできる my $prototype = HTML::Prototype->new; print $prototype->define_javascript_functions; print $prototype->periodically_call_remote {... }

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます メソッド例 define_javascript_functions prototype.js を展開 link_to_remote Ajax.Updater として展開 auto_comple_field 入力を補完するための JavaScript を展開

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます TT + HTML::Prototype Template-Toolkit と一緒に使うと吉 [% prototype.define_javascript_functions %]... [% prototype.link_to_remote('Hello?', { update => 'result', url => '/hello', }) %]

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます Catalyst で prototype.js Agile Ajax development with Catalyst Catalyst::Plugin::Prototype // in your Catalyst application package MyApp; use strict; use Catalyst qw/-Debug Prototype/;... 1; // in your template [% c.prototype.link_to_remote(... ) %]

© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます まとめ Prototype を使うと JavaScript で楽できる Ajax もフレームワークから使う時代 今日紹介し切れなかったいろんな機能も一杯 Perl プログラマも JS を書こう !