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

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

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

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

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

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

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

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

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

8 © 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます prototype.js のドキュメント ない ソース嫁 Using prototype.js v1.3.1 http://www.sergiopereira.com/articles/prototyp e.js.html

9 © 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); } });

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

11 © 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.

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

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

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

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

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

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

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

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

20 © 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(... ) %]

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