id:naoyaさんのppt資料 prototype.jsと PerlでAjax

Transcript id:naoyaさんのppt資料 prototype.jsと PerlでAjax

prototype.jsと
PerlでAjax
株式会社はてな
伊藤直也 [email protected]
http://www.hatena.ne.jp/
©2005株式会社はてな本資料の一部または全部の無断複製・転載を禁じます
Ajaxって?
Asynchronous JavaScript + XML
定義はあいまい
JavaScriptによる動的ロードテクニック
読み方
えーじゃっくす
あじゃっくす
©2005 株式会社はてな本資料の一部または全部の無断複製・転載を禁じます
Ajaxおさらい
クライアント側
サーバー側
HTML + CSS
ブラウザ描写(DHTML)
DOM
XMLHttpRequest
JavaScript
©2005 株式会社はてな本資料の一部または全部の無断複製・転載を禁じます
非同期通信
サーバーサイド
アプリケーション
XML API
Ajaxでありがちなロジック
Hello, World!
XMLHttpRequest で GET + responseText を
innerHTML で表示させる
裏でCUD
XMLHttpRequest で POST、DB にCUD
画面遷移なしにデータを永続化
©2005 株式会社はてな本資料の一部または全部の無断複製・転載を禁じます
Ajax用ライブラリ
ありがちな処理はライブラリで楽をしよう
Survey of AJAX/JavaScript Libraries
 http://d.hatena.ne.jp/brazil/20050909/1126254775
Prototype
Rico
Scriptaculous
MochiKit
SAJAX
Dojo
DWR
©2005 株式会社はてな本資料の一部または全部の無断複製・転載を禁じます
Prototype
prototype.js
Sam Stephenson
http://prototype.conio.net/
動的アプリケーション用フレームワーク
Ajax向け"にも"色々機能を提供
Ruby on Rails
©2005 株式会社はてな本資料の一部または全部の無断複製・転載を禁じます
prototype.js 特徴
JavaScript書きが割りと楽になる
様々な機能
クラスベースOO
Ajax
DHTML用ユーティリティ
Form
Effect
イベント処理
DOMの拡張
©2005 株式会社はてな本資料の一部または全部の無断複製・転載を禁じます
prototype.js のドキュメント
ない
ソース嫁
Using prototype.js v1.3.1
http://www.sergiopereira.com/articles/prototyp
e.js.html
©2005 株式会社はてな本資料の一部または全部の無断複製・転載を禁じます
使い方
scriptタグで取り込む
コード書く
// in html
<script type=“text/javascript” src=“/path/to/prototype.js”></script>
// 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.</a>
©2005 株式会社はてな本資料の一部または全部の無断複製・転載を禁じます
Ajax.Updater
特定のエレメントを動的に更新
<a href="#" onclick="
new Ajax.Updater(
'result',
'/hello',
{ asynchronous: 1 }
);
return false">Hello?</a>
<div id="result"></div>
©2005 株式会社はてな本資料の一部または全部の無断複製・転載を禁じます
Ajax.PeriodicalUpdater
特定のエレメントを定期的に更新
©2005 株式会社はてな本資料の一部または全部の無断複製・転載を禁じます
PeriodicalExecuter + AjaxRequest
定期的にサーバーサイドのデータを更新
<script type="text/javascript">
new PeriodicalExecuter(
function () {
new Ajax.Request(
'/autosave',
{
asynchronous: 1,
parameters: Form.serialize($('textform'))
})
}, 10
);
</script>
©2005 株式会社はてな本資料の一部または全部の無断複製・転載を禁じます
Ajax以外でも便利なの多し
<script type="text/javascript">
var name = $('name'); // getElementById('name');
alert($F('age'));
Form.selialize($('profile')); // name=...&age=...&sex=...
</script>
<form id="profile">
<input type="text" id="name" name="name" />
<input type="text" id="age" name="age" />
<input type="radio" name="sex" value="male" /> male
<input type="radio" name="sex" value="famale" /> famale
<select name="favorite_language">
<option value="perl">Perl</option>
<option value="ruby">Ruby</option>
<option value="php">PHP</option>
</select>
<input type="submit">
</form>
©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と一緒に使うと吉
<head>
[% prototype.define_javascript_functions %]
</head>
...
[% 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を書こう!
©2005 株式会社はてな本資料の一部または全部の無断複製・転載を禁じます