Kupuのすすめ

Ploneのリッチエディタプロダクト

CacheFuは止めました。調子よかったんですが、たまにページを表示するのに15分以上かかるっていうのが意味わからんかったからです。ベータが取れたらまた会いましょう(*´Д`)ノさよおなら~

さてみなさんはPloneでのHTMLエディタは何を使っているでしょうか。標準で付いてくるのはKupuですが、他にもFCKEditorやらTinyMCEやらがあります。他にもあるんだと思いますが、とりあえず自分で試してみたのはこれくらいです。

エディタに何を求めるかは人それぞれだと思いますが、とりあえずこれらのエディタについて特徴を捉えるためにちょこっと概観してみます。

FCKEditor

FCKEditorは非常に高機能なエディタです。Kupuにできないことができたりします。divタグで色を出したりxhtmlに優しいコードを出力できちゃったりします。フル機能のパネルからシンプルなパネルまで、操作パネルをカスタマイズできます。Skinがいくつか用意されているのも何かカッコイイです(半分お世辞…)。

パネルのスキン

パネルをカスタマイズできる

ただ高機能であるが故の設定の煩雑さや重さがとっつきにくい点でしょうか。ふつうに使えているぶんにはいいですが、ちょっと問題が出たときにすぐ直せるかどうかという所に難ありのように見えます。

カラフルな文章を書きたいぜー、という人におすすめです(何。というのは冗談ですが、とにかくエディタに機能の豊富さを求める人にはぴったりなのではないでしょうか。

TinyMCE

TinyMCEはインストールした時点では飾り気の無いこじんまりとしたインターフェイスなので、非常にシンプルなプロダクトのように見えます。が、実は非常に拡張性に富んだエディタで、多くのプラグインやテーマがあったりします。これらの点については、同梱されるドキュメントに非常に詳しく説明が載っています。ばりばりカスタマイズして、自分好みのエディタを作り上げていきたい、という人にお薦めです。

ただ、こういった部分をZMIやPlone上で行う事ができず、カスタマイズはファイルシステム上で行う必要があります。そんなわけでPloneとの親和性という点では(FCKEditorやKupuに比べて)ちょっと遅れをとっているなぁという印象です。

Kupu

FCKEditorとTinyMCEのそれぞれと比べてみるとKupuの特徴がよく見えてきます。それは非常にバランスの取れたプロダクトだな、ということです。もちろんPloneという「場」を離れれば見え方はまた違ってくるのでしょうが、少なくともPloneのプロダクトとしては万人が使いやすいような、非常に便利な機能を安定して提供してくれるものであると思います。デフォルトのエディタとして組み込まれているだけあって、高機能すぎず、ドキュメントを記述するのに必要な機能がしっかりそろっているという信頼性があります。

弱点は、HTMLエディタであることでしょうか。プレーンテキストやrestをあつかうときにいちいちOFFにするのがめんどくさいです(まぁ左下にある「Edit without visual editor」をクリックするだけですが…)。

以上3つを簡単に見てみましたが、自分の目的にあったエディタを選ぶのが一番ですよね。単純にどんな使用感なのか試してみるのもよいかもしれません。

エディタを変えるには、それぞれのプロダクトをZopeのProductsフォルダへ放り込んでからZopeをリスタートし、Ploneの「サイト設定」→「プロダクトの追加と削除」からインストールし、さらにPloneの「個人設定」画面へ行けば選んでやることができます。

Kupuの裏側をのぞく

Kupuはそのままでもほとんどストレス無く利用できるプロダクトだと思います。実際私もインストールしたままで使って何の問題もありませんでした。

しかし、ある時ソースから打ち込んだあるタグがドキュメントに反映されていないのに気づいて、おやこれはどういうことなんだと思い、普段見慣れている編集画面を少し離れて、その舞台裏をのぞいてみる事にしたのです。舞台裏といってもただの設定画面ですが…。

その設定画面では個人的に興味を惹かれるいくつかの項目がありましたので、ここで紹介してみたいと思います。

Ploneの「サイト設定」画面にいくと、「アドオンプロダクトの設定」という項目がどこか(通常画面の下の方)に見えると思います。その中にKupuの設定へのリンク(チョウチョのアイコンが目印)がありますのでクリックして行ってみました。

いくつかのタブと設定項目が見えますが、個人的に注目したい部分を見ていく事にします。注目したい部分は以下の3点です。

  • 「設定」タブのスタイル
  • 「設定」タブのHTMLフィルタ
  • 「ライブラリ」タブ

スタイルの設定

スタイルの設定というのはCSSによる見栄えの設定のことです。が、ここではもう少し大きな意味でのスタイルで、「タグ」と「クラス」を設定できます。

タグとクラスを設定する

例えば入力領域に何かテキストを入力してからそれを選択状態にし、Kupuのパネルの中でひときわ目立つ、デフォルトで「本文」となっているプルダウンメニューから「Heading」を選べば、選択範囲のテキストに対して(Kupu-1.3.3では)H1タグとdocumentFirstHeadingというクラスが与えられます。この動作はここで設定されているので、例えばこの設定でHeadingを選んだときにH2タグで囲ませるようなことが簡単にできます。

もちろん自分なりのスタイルを追加することもできますので、そうですねえ、こんなのはどうでしょう。ここに「Memo|p|memo」を追加します。さらにZMIから「ploneインスタンス/portal_skins/custom/ploneCustom.css」を開いてその中に

p.memo{
  margin: 0 24px 9px 24px;
  padding: 9px 12px;
  border: 1px dashed #ccc;
  background: #f0f0f0;
  color: #a5a5a5;
  font-size: 0.875em;
}

と書いてやります。こうすれば、プルダウンメニューの中に「Memo」という項目が現れ、「Memo」が指定された選択範囲はpタグで囲まれ、薄いグレーな感じの見栄えになるはずです。

試しにこの段落に対してMemoを指定してみます。

ここらへんの設定はうまく使えばドキュメントを非常に有効に整形できるはずですので、是非使ってみてください。

HTMLフィルタの設定

ここで設定したHTMLのタグや属性はドキュメントを保存する際に削除されます。デフォルトではcenter, span, tt, big, small, u, s, strike, basefont, fontといったタグや、dir, lang, valign, halign, border, frame, rules, cellspacing, cellpadding, bgcolorなどの属性、tableタグのwidth, heightなんかが削除されるように設定されていますね。

例えばuタグが削除されるのに、bタグはOKなのか、とナゾも多いですが、まぁそこらへんはとりあえずヨシとしておいてあげましょう。

Ploneを個人で運用してるぶんには特に気になる設定ではありませんが、ポータルとして運用する場合にはへんてこりんなタグや属性は制限して置いた方がいいですよね。

ライブラリタブ

「ライブラリタブ」と聞いても何の事やらという感じですが、imageを追加するときの「Current folder」とか「Recent items」とかそういうやつ、といえばピンとくるのではないでしょうか。場所を決める起点とでもいうようなものでしょうか。

これを設定するにはTALESの知識が必要になるので、誰でも簡単に設定できるというわけではないですが、例えば何かドキュメントを入れるフォルダの配下には必ずImagesというフォルダを作っている、というようなフォルダ構成ルールを決めている人はクリックが減ったりしてステキな気がします。

以上駆け足で眺めてみましたが、どれもドキュメントを編集する上でちょっと便利な設定項目ですので是非一度いじってみてはどうでしょう。

Kupu-1.3.6

さてPlone2.1.2に同梱されるKupuは1.3.3ですが、1.3.6が公開されたようなので変更点を少し見てみる事にします。とりあえずPlone2.1.2でも特に問題なく動いています。というかこのエントリは1.3.6で書いています。

一番大きな変更点は、imageを挿入するときのファイルブラウザです。今まで挿入の際にはimageの配置を決めるだけでしたが、imageのサイズを指定したり、altテキストを決める事ができたりします。とてもステキです。

新しくなったファイルブラウザ

そのほかにも小さな変更点として、パラグラフに指定できるスタイルが増えていたり(Headingに割り当てられているタグもH1からH2に変わった)、パネルの見た目やパネル内ボタンの配置が少し変わってたりします。せっかく上記で説明したスタイルの設定も、あまりいじる必要がなくなっていく方向に進化しております…。

設定項目が増えた

いずれにしてもより編集がしやすいように便利になっていますので、この便利さを先取りしてみるのもよいと思います。個人的には1.3.3よりもずっとステキなので、よっぽど不具合が出ない限りは(そんなにクリティカルな不具合は出ないと思いますが…)このまま使っていこうと思っています。

トラックバック用URL:
http://nagosui.org:8080/Nagosui/COREBlog2/using-kupu/tbping
コメントを追加

下のフォームに記入してコメントを追加できます。平文テキスト形式。

(必須)
(必須)
(必須)
(Required)
Enter the word

このBlogについて
Plone, Zope, Pythonなどのトピックについてのメモです。
カテゴリ
Plone (98)
Plone Products (23)
COREBlog2 (31)
COREBlog1 (29)
ReadingCOREBlog (7)
Zope (66)
Turbogears (18)
Django (12)
Python (25)
Linux (30)
Nagosui (11)
Design (33)
Misc (48)
moblog (5)
最近のエントリ
Glossy Horizontal Menuを使う nyusuke 2008年11月17日
第3回Python東海終了 nyusuke 2008年11月17日
Universalじゃない件 nyusuke 2008年11月15日
CorruptedErrorが出たので直す nyusuke 2008年11月14日
最近のコメント
Re:WebデザイナーのためのDjangoはじめの一歩 nyusuke 2007年06月01日
Re:WebデザイナーのためのDjangoはじめの一歩 pateo 2007年05月31日
Re:東海Python Workshop 01終了 nyusuke 2007年05月31日
Re:東海Python Workshop 01終了 kfuruhata 2007年05月30日