Personal tools

COREBlog2のPlone3.0対応,編集インターフェースをAjax化

ということで,COREBlog2をPlone 3.0対応にして,エントリの編集をAjax化してみた。また動画を撮ってみたのでご覧ください:-)。

UIから見たPlone 3.0のAjax実装

Ploneにログインをすると,編集権限のあるオブジェクトに対してAjaxな編集が有効になる。タイトルだけ,本文だけ,というように,部分的に編集ができるようになっています。

Ajax編集ができる部分にマウスオーバーすると,編集可能な領域がハイライトします。ハイライトした状態で領域をクリックすると非同期に編集モードに移行,フォームが表示されます。タイトルや解説などは,フォームのフィールドからフォーカスアウトすると自動的に編集内容が保存されます。テキストフィールドやWYSIWYGな編集フォームでは,ボタンを押すことで編集内容が反映されます。

コードから見たPlone 3.0のAjax実装

COREBlog2のように,Ploneで動く部品(コンテンツタイプ)では,コード側では一切対応が必要ありません。表示用のView(テンプレート)のエレメントに,特別なはたらきを持つCSSのクラスを設定して,IDを設定するだけ。実際には,CSSのクラスを自動生成するユーティリティメソッドが用意されているので,必要な引数を渡してやるだけでいい。これだけで,ログイン中のユーザの権限を判別して,必要な場合だけ編集インターフェースが自動的に生成されます。JavaScriptは1行も書いてません。Ploneのテンプレート言語であるZPTはインラインでJavaScriptを書くのに不向きなのでこうなっているきのかも。

Plone 3.0のAjax実装は,Ploneのモデル&CRUD生成フレームワークである「Archetypes」と統合されています。Archetypesの文脈に沿って開発をしていれば,対応はそれほど難しくありません。

機能の実装や設計が美しい,というのがPloneの魅力の一つだと思うのだけど,Ajax実装もなかなか美しいですね。ここまで理路整然と,ストイックに実装されているんだな。さすが,作者の一人であるAlexander LimiがUIデザイナーとしてGoogleに雇われるだけのことはある。内部をみるととっても勉強になる。これだけの「発明」を自分でするのは不可能なので,頑張って勉強をしてエッセンスを盗むってのが賢い選択だなあと思います。

とにかくPlone 3.0はヤバいよ。

The URL to Trackback this entry is:
http://coreblog.org/ats/coreblog2-plone3-integration/tbping
Add comment

You can add a comment by filling out the form below. Plain text formatting.

(Required)
(Required)
(Required)
(Required)
コメントスパム避けのための認証文字列です

Captcha Image

Pythonな求人
r = urlopen("http://www.webcore.co.jp/recruit")
About this blog
■Author
atsこと柴田淳です。Atsushiはガイジンにうまく発音して頂けないので,これからはJunというペンネームで行こうと思っていましたがあんまり使ってません。
Webcore株式会社 代表取締役
■TRIVIAL TECHNOLOGIES 2.0
トリビアル・テクノロジー 2.0,「トリテク 2.0」と呼んでください。
Blog(ブログ)サイトです。Plone上で動く,オープンソースのBlog Product - COREBlog2を使っています。
 
最近書いた本,Mook
みんなのPython Webアプリ編
Pythonの基礎から,Webアプリやフレームワークの仕組みまで,つまることなく一気に学べる書籍です。「みんなのPython」と一緒に読んでください:-)。
みんなのPython
Pythonの入門書です。基本的なことから分かりやすく解説するよう勤めました。Pythonをはじめたいと思っている人,JavaやC++,PerlやRubyを学ぼうと思って躓いてしまった人はぜひ読んで下さい。
 

Powered by Plone, the Open Source Content Management System