このサイトについて

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

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はヤバいよ。

2010-08-27 04:44