Archive for the ‘Zope/Plone’ Category
疲れた
タイトル通り。以上。
Ploneのテキストフィールドのデフォルト文字
テキストフィールド欄にデフォルト文字を表示させたいとき、一般的には、jquery.fieldtab.jsを使う。
Ploneでは、このようなものが、簡単に最初から使えるようになっている。
方法は、input タグ内のTitle属性に表示させたい文字列を入力し、class属性に「inputLabel」を割り当てるだけで、実現できる。
Flashアップローダに苦戦。
予想以上にPloneとの連携に手こずった。Plone用のFlashファイルアップローダを作成していたのだが、Flash Player 9をターゲットとした場合、大変だった。 次は、外にお願いしたい気分。PloneでFlashUploaderのプロダクトがあまり出てこないのも納得した。Plone的に、このセキュリティで大丈夫なの？と言うところがあったりする。
ちょっと愚痴っぽくなったが、勉強になったので良かったことにしよう。
PloneへのFlashを使ったファイルアップロード
FlashのFileReferenceListで、まとめてファイルを取得することができる。このFileReferenceListは、browseメソッドを実行することでファイルダイアログ選択することができる。選択後、FileReferenceオブジェクトのArrayを持つので、このFileReferenceオブジェクトのuploadメソッドを使うことでファイルアップロードが出来る。
いろんなサンプルでは、取得したFileReferenceのArrayに対して、For each文を使いFileRefence.upload()を行いアップロードをしている。
ただ、この方法では、一気にPloneに対してアップロードを行うため、ほぼ、Confrict errorを起こす。
回避方法として、サンプルのようなFor eachを使わず、一つづつ確実にアップロードを行う。FileRefenceのFile upload completeイベントで、次のFileReferenceのuploadを行うようにする。
conflict errorを起こしてもZopeは再試行してくれるのだが、FileReference.upload()の仕様上、起こされると面倒な処理を記述する必要があるので、なくすように心がけた。
Flash Player 10以上で作っていいのなら、こんな面倒なことをしなくてもよさそうだけど・・・。
アドオンプロダクトでプロダクト名が２重に表示される
Products.hogeとしたプロダクトのconfigure.zcmlに、<five:registerPackage package="." initialize=".initialize" />の記述があると、サイト設定のアドオンプロダクト項目でプロダクト名が２重に表示されてしまう。
この現象は、collective にあるプロダクトを参考にプロダクト開発を行い、configure.zcmlに記述してしまうとおきる。（自分がそう）
回避策として、<five:registerPackage package="." initialize=".initialize" />を削除する。 また、initialize関数でファクトリ・permissionの設定をしている場合は、zcmlベースの方法へ変更する。
スキンの作成方法 第１回
Zope/Ploneアドベントカレンダーの順番がnyusukeさんより回ってきました。
私は、Plone3用のスキンを作成する方法を書きます。
今回のゴールは、Pasterでスケルトンを作成して、サイトのロゴを変更していきます。
Read the rest of this entry »
Plone 4でコンテンツ作成時の自動ID振りについて。
Ploneには、タイトルからIDを自動で変換してくれる機能があります。ただ、タイトルが日本語の時、%ホニャララとわかりにくいIDとなっていました。このIDは、URLにもなりますので、ちょっと困ったものでした。
しかし、Plone4からは、日本語でも読みに変換してくれます。
ただ、漢字は、中国語のよみですが・・・。
読みをとってくる部分は、サイト・ブラウザの言語設定を見て選んでくれるといいですね。
Plone 3.xでのFooterの内容をZMIで変更する
Plone2.xの頃のFooter部分(図1)の修正は、Skinnsフォルダにあるfooter.ptの内容を変更すれば出来ました。Plone3.xになってからは、footer.ptの位置がbrowserの方へ移動してしまい、Skins内のテンプレートをカスタマイズする方法では変更できなくなりました。
図1 これを変更したい
本日は、Plone3.xでのfooter.ptの変更方法について述べます。
Plone3.xからviewletベースになったため、テンプレートの位置が変わりました。これにより、カスタマイズ場所が、portal_skinsから、portal_view_customizations（図2）へ移動しました。
図2 ZMI Ploneインスタンスルート
変更方法：
1)管理者でログインしZMIへ移動します。
2)ルートからportal_view_customizationsのリンクをクリックします。(図2)
3)portal_view_customizationsには、カスタマイズ出来るテンプレートの一覧が表示され手いますので(図3)、その中からplone.footerを探し、クリックします(図4)。
図3 portal_view_customizations
図4 plone.footer
4)customizeボタンをクリックして編集モードにします(図5)。
図5 Customizeボタン
5)編集可能となった(図6)ので、内容を変更します。変更が終わったらSaveボタンをクリックします(図7)。
図6 編集可能になりました。
図7 編集が終わったら[Save Changes]ボタンをクリックする。
以上でFooterの修正が終わりました。
図8 Footerの変更完了。
Plone 4の新スキンSunburstとCSS3
Plone4の新スキンSunburst [1]は、CSS3[2]を使い、角丸やシャドウの表現[3]をしています。Plone 4をインストールして、初めて表示される画面の右上のログインリンクの角丸はCSS3のborder-radius-bottomleftとborder-radius-bottomrightを使い表現されています。
そして、このリンクを押して表示されるログインダイアログでは、角丸border-radius-bottomrightとシャドウ（box-shadow）でレイヤー感のある表現をしています。
ログインした時に現れる、Edit barも角丸処理が施されポップなイメージになっています。
しかし、この角丸とシャドウ、現状は、Safari,Chrome,FireFox,Operaブラウザ限定でしか利用できません。そう、IE8では対応していないのです。
※IE9では、このCSS3への対応を行っていくみたいです[4]。
References
- plonetheme.sunburst
- Introduction to CSS3
- CSS Backgrounds and Borders Module Level 3
- IEBlog:An Early Look At IE9 for Developers
Plone 4の新スキンSunburstのグリッドレイアウト
Plone 4の標準スキンとなる、Sunburst[1]は、幅を16分割して、その分割幅と位置でレイアウトを行う、Deco Grid System [2]の考え方を利用しています。
従来は、スタイルの各クラスやid名に幅や位置を定義し、デザイン側に任せられたものとなっていたので、そのスタイルを追わないとよくわからないものとなっていました。このグリッドレイアウトを使うことで、幅と位置に関することは機械的に理解すれば良く、レイアウト作業は効率が上がります。
※いまは、自前でHTML書くしかないけど、Plone Conference 2009に参加した人に聞くと、Plone 5では、WYSIWYGエディタでこの概念にそった編集作業ができるみたい。
イメージをつかんでみる
図1に、サイト幅を16分割したイメージ図を掲載します。幅を1～16で表し、位置を、0～15（一番左端から数えるので）で表します。
図1 16分割したイメージ
※16分割している赤線は、あくまでもイメージです。正確には、セルの幅は4%で、左右のマージンが1.125%となっているようです。詳細は、plonetheme.sunburst内のskinsフォルダ内のcolumns.cssのコメント部分に書かれていますので、そちらをみてください。
例えば、ナビゲーションポートレットが表示されている場合は、図2のようになります。
図2 ナビゲーションポートレットが表示されたPlone画面
この場合、左側スロットは、幅を4セル使い、位置は0となり、右側のメインコンテンツ部分は、幅を(16-4)=12セル使い、位置は4となります。
この16分割は、図3のように、display:blockスタイルを指定した要素で入れ子になります。
図3 入れ子になったイメージ
図4は、図2の緑色で囲まれた部分（図3では子の部分）です。A, B, Cで示した部分が、さらにDeco Grid Systemでレイアウトしたものです。今度は、HTMLも掲載しながらみて行きます。
図4 図2の緑色の部分を拡大
Aの部分
左（黄色）は、幅が2セルで位置が左端にあり、右（緑）は、幅が14セルで位置が2となっています。HTMLでは、こんな感じで表現します。（内容は省いてあります。）
<div class="row"> <div class="cell width-2 position-0">left</div> <div class="cell width-14 position-2">right</div> </div>
1行目のdiv.rowは、行（ブロック）であることを宣言しています。div.cellで列を宣言していきます。各列の幅は、width-?を使い、位置は、position-?を使って表現します。このように、幅と位置はCSSのクラス属性で行っています。
従って、左はcell width-2 position-0、右はcell width-14 position-2のクラスが割り当てられています。
Bの部分
Bは、バランスが同じ2段組レイアウトです。これは、それぞれ、8セルの幅、右側が８の位置となります。Aでふれた記述法ですと以下となります。
<div class="row"> <div class="cell width-8 position-0">left</div> <div class="cell width-8 position-8">right</div> </div>
Deco Grid Systemは、幅・位置が、4分の1、3分の1、2分の1ステップのものは、簡単に記述できるようになっています。例えば、半分の幅は、width-1:2と表現します。以下は、定義の一覧です。
| 幅 | 位置 |
|
|
これを当てはめると先述のHTMLは下記のようになります。
<div class="row"> <div class="cell width-1:2 position-0">left</div> <div class="cell width-1:2 position-1:2">right</div> </div>
Cの部分
Cの部分を通常と簡易表現の2つの方法で表すと下記となります。
通常：
<div class="row"> <div class="cell width-4 position-0">left</div> <div class="cell width-12 position-4">right</div> </div>
簡易：
<div class="row"> <div class="cell width-1:4 position-0">left</div> <div class="cell width-3:4 position-1:4">right</div> </div>
おわりに
ざっと、Plone 4の新スキンのSunburstのレイアウト方法について説明しました。 各セル間にスペースが入ったりするので、細かなデザインが必要なサイトには向かないかもしれないけど、十分なレイアウトができるとおもいます。そして、これは、プロトタイピングにも有効だと思いました。
参照
- plonetheme.sunburst
- Deco Grid System
Plone4のStylesheets/JavaScripts/KSS Registryのこと
Plone 4 のStylesheets Registry(portal_css), JavaScripts Registry(portal_javascripts), KSS Registry(portal_kss) は、Zopeインスタンスの起動モードに合わせて、デバッグモードに切り替わるようになったみたい。
今までは、別々だったので、ZMIから、これら3つの設定を開いてON,OFFしていたので、大変便利になりました。
Ploneにblobを導入。
Ploneは、Zope2の上にあります。Zopeは、データストア先として、ZODBというデータベースを使っています。これは、何でも一つのファイルに格納してしまいます。イメージ的には、accessのmdbファイルみたいな物です。一つのファイルですむので簡単にバックアップ、復元ができる利点があります。しかし、ファイルや画像もZODB内に取り込んでしまうためデータベースファイルが巨大な物になってしまうという弱点がありました。これを解決するのが、Blobという仕組みです。ZODBのバージョンが3.8になってから利用できるようになりました。なお、Plone 4 では標準となっています。
- plone.app.blob
設定方法：
- buildout.cfg内の[instance]セクションにある、egg, zcmlに、plone.app.blobを追記します。そして、blob-storage へ var/blobstorage を追記します。
- そして、./bin/buildout をおこないます。
- ./bin/instance fg (startなど) で起動します。
- アドオンプロダクトから、plone.app.blob: ‘File’ replacement type 1.0b8 を選択してインストールします。
これで、ファイルはBlob対応となります。
※既存のコンテンツ（File, Image）をblobに置き換えたい場合は、egg, zcmlに、Products.contentmigration も追加しておきます。そして、ファイルタイプを置き換える場合、PloneサイトのURLの後ろに、@@blob-file-migrationを入力します。イメージの場合は、@@blob-image-migration を入力します。
こんな感じで、マイグレーションしてくれます。
参考サイト
- [Plone User's Group Japan] zc.buildoutを使ってプロジェクトを管理する
- http://plone.jp/Members/tacaco/buildout-tutorial-jp
疑問：
- @@blob-image-migration を行ったら、KeyError: ‘ATContentTypes.ATBlob’ といわれた。
SWFUploadを使いPloneにファイルをアップロードする
Ploneは、CMSとして有名ですが、Wordpressのように簡単にファイルをアップロードする機能がありません。Wordpressは、SWFUploadを使い、画像やメディアファイルをアップロードできます。 標準ではありませんが、アドオンプロダクトでPloneにもSWFUploadを利用したプロダクトがあります。
- Products.PloneFlashUpload
Plone2.5の頃からありました。Plone3系には、1.3b1のバージョンが使えます。
インストール方法：
- buildout.cfgのeggsに、Products.PloneFlashUpload を追記します。
- ./bin/buildout を実行
- ./bin/instance fg (startなど)で起動。
- アドオンプロダクトで、PloneFlashUpload 1.3b1 インストール。
利用方法：
- アップロードをしたいフォルダへ移動する。
- コンテンツタブに[upload]があるのでクリックする。
- Select Filesボタンをクリックする。システムのファイル選択ダイアログが表示されるのでアップロードしたいファイルを選択（複数選択可）する。
- あとは、SWFUploadがアップロードしてくれます。
- Viewタブをクリックしてアップロードを確認。
と、非常にありがたいプロダクトでした。このフォルダのビューをFlashや、Ajaxなんかでビューワーにしておけば手軽にスライドショーなんかもできそうです。お手軽に画像をかっこよく見せるには、takanoryさんが作られたPlone Lightbox JSが使えると思います。
イベントハンドラは、Ploneの開発でも役に立ちます。
イベントハンドラは、デスクトップアプリなどでは、よく使っています。このイベントハンドラですが、Plone 3 から利用できるようになっていて、とても便利です。ただ、ｚｃｍｌに書いたりとしてめんどくさいのも事実です。しかし、Five.grokを使うことでこの面倒なことがなくなり、非常に使いやすくなりました。
何が便利かといえば、例えば、あるコンテンツを生成したとき、同時に、作成したオブジェクトの中にコンテンツを作成したい時などです。（Archtypesを使えば、initialized_archtypes()メソッドで実現できますが。）
この場合は、コンテンツを生成してコンテナに登録されたとき、追加されたことを知らせる、IObjectAddedEventが発生するので、このイベントを使って、コンテンツを追加する操作を行います。
下記のコードは、IAobjインターフェイスを持ったＡｏｂｊがあり、Ａｏｂｊが追加された時に、idを「ｂ」としてＢｏｂｊを追加する方法です。サンプルのコンテンツは、Dexterity FTIを使っていることとします。
from five import grok
from zope.app.container.interfaces import IObjectAddedEvent
from plone.dexterity.utils import createObject
・・・中略・・・
@grok.subscribe(IAobj, IObjectAddedEvent)
def addedAobj(aobj, event):
bobj = createObject('Bobj', title=u'B')
aobj['b']= bobj
なお、イベントハンドラは、追加のほかに、編集が終了した時に発生するIObjectModifiedEventや、削除されたときに発生するイベントIObjectRemovedEventなどがあります。
Dexterityを使い始めた。
Dexterityは、Ploneのコンテンツ開発をするためのものです。私は、Archtypesに変わるものと理解しました。 気に入ったのが、grokライクにプログラムが作れることです。たくさんのｚｃｍｌを書くことが少くてすみます。
Dexterity Developer Manual
http://plone.org/products/dexterity/documentation/manual/developer-manual
このドキュメントを読めば、Dexterityだけでなく、Ploneの開発についても把握できます。関連リファレンスの充実ぶりがいいです。
とりあえず、こんなものを作ってみた。
- Product.ngiNikki
今は、コツをつかんだので、夏にGrokで作った研究用のアプリをコツコツと移植しています。
関連ドキュメント
- [@IT] Zope 3 の魅力に迫る
- [Zope Community] Zope Documentation