zopeskelを使ってテーマを変更する

という訳で(?)、zopeskelを使ってテーマプロダクトを作成する方法についてです。
個人的にZMIでの変更はやらない主義なので、通常はテーマとコンテンツタイプと別々に作成して反映させるようにしています。そうすればバージョンアップの時も修正がある時も余分な事はしなくてよくて楽という、実に怠け者な発想なんですが・・・。

何はともあれ環境が必要なので、Unified Installerでもhttp://plone.org/products/plone/からダウンロードして来てインストールします。（以下、どこかにないかと思ったけど探すの面倒なので書きます）
Unified Installerでインストールすると、pasterもzopeskelもどちらも既にインストールされていて使えるようになっています。随分便利になったようです。なお、pasterもzopeskelも使い方は同じです。

zopeskel でテーマプロダクトのベースを作る

取り敢えず、どんなテンプレートがあるのかを見てみます。

$ ./bin/zopeskel --list

Plone Development

|  archetype:         A Plone project that uses Archetypes content types
|  kss_plugin:        A project for a KSS plugin
|  plone:             A project for Plone products
|  plone2_theme:      A theme for Plone 2.1
|  plone3_portlet:    A Plone 3 portlet
|  plone_app:         A project for Plone products with a nested namespace (2 dots in name)
|  plone_pas:         A project for a Plone PAS plugin

Plone Theme Development

|  plone2.5_theme:    A theme for Plone 2.5
|  plone3_theme:      A theme for Plone 3

Buildout

|  plone2.5_buildout: A buildout for Plone 2.5 projects
|  plone3_buildout:   A buildout for Plone 3 installation
|  plone4_buildout:   A buildout for Plone 4 developer installation
|  plone_hosting:     Plone hosting: buildout with ZEO and Plone versions below 3.2
|  recipe:            A recipe project for zc.buildout
|  silva_buildout:    A buildout for Silva projects

Core Python

|  basic_namespace:   A basic Python project with a namespace package
|  nested_namespace:  A basic Python project with a nested namespace (2 dots in name)

Zope Development

|  basic_zope:        A Zope project

いくつものテンプレートがあるのがわかります。ここでは、Plone Theme Developmentにある「plone3_theme」を使用します。

「Plone4なのにplone3_theme?」と思うのですが、それについては議論もあったようですが「一緒だからそんな些末な事は気にするな」らしいので、plone4_themeという名称にはなっていません。

では、テンプレートを使ってテーマプロダクトのベースを作成します。自身のプロダクト開発はsrcディレクトリ以下で行います。

cd src
$ ../bin/zopeskel plone3_theme myProduct.myTheme

plone3_themeのテンプレートはプロジェクト名にドット1つを書く、basic namespace（何て訳すのが適切？基本名前空間？）にする必要があります。上の例のようにプロジェクト名を書いて実行していなければ、次にプロジェクト名を要求されますのでその際に付ける名前は「myProduct.myTheme」のようにドットで繋げた名前を付けます。

全然関係ありませんが、myProduct.themeという名前を付けてしまってthemeという拡張子として判別されてしまい、iMovieのアイコンが付いて編集出来ないという間抜けな奴になった事があります。Macの皆さん気を付けましょう（ってそんな奴いないって)。

で、以下のような質問に答えます。easyでもexpertでも同じ。折角Plone4なので、Skin Baseは「Sunburst Theme」にします。Include DocumentationでTrueのままにするとファイルに説明が書かれた状態で作成されますので最初の内は便利かもしれません。

Expert Mode? (What question mode would you like? (easy/expert/all)?) ['easy']: expert
Namespace Package Name (Name of outer namespace package) ['myProject']: 
Package Name (Name of the inner namespace package) ['myTheme']: 
Skin Name (Name of the theme (human facing, added to portal_skins)) ['']: myProject Theme          
Skin Base (Name of the theme from which this is copied) ['Plone Default']: Sunburst Theme
Empty Styles? (Override default public stylesheets with empty ones?) [False]: 
Include Documentation? (Include in-line documentation in generated code?) [True]: False
Version (Version number for project) ['1.0']: 
Description (One-line description of the project) ['An installable theme for Plone 3']: Theme for my Plone4 project  
Creating directory ./myProject.myTheme

この後コンソールに表示されるのをぼーっと見て待つと、基本的な設定が書かれている状態でテーマ用のプロダクトが出来ます。

で、これをbuildout.cfgのeggセクションとdevelopセクションに記載して、./bin/buildout。

vi buildout.cfg
-----
eggs =
    Plone
    :
    myProject.myTheme    #一番後ろにでも書く

develop =
    src/myProject.myTheme
-----

./bin/buildout

念のためZopeを起動して、以下のようにプロダクトとして認識されているのを確認してから作り始めることをお勧めします。

認識されているのを確認出来たら起動したZopeは終了して自分のテーマを作成して行きます。

Plone4のテーマプロダクトを作る

環境の準備で、プロダクト名を「myProduct.myTheme」で作成しましたので「myProduct.myTheme/myProduct/myTheme/以下」が作業エリアです。ここに変更を記載して行きます。
テーマを作るのに作業が必要なファイルは以下の通りです。

• profiles/default/viewlets.xml
• browser/configure.zcml
• browser/viewlets.py
• browser/stylesheets/main.css
• カスタマイズ用テンプレートを作成
  

ご存知の通り(?)、Plone サイトはいくつものviewletで構成されています。
Viewletsの全体の構成は「http://localhost:8080/Plone/@@manage-viewlets」のように、自分のPloneサイトのトップで「@@manage-viewlets」を付けてアクセスすると見る事が出来ます。

自分で作成するサイトでは「このviewletは必要ない」、「順番を変更したい」あるいは「このviewletをカスタマイズしたい／作りたい」という事があります。

これらは profiles/default/viewlets.xml を編集して実現します。

viewlets の順番を変更する

viewlets の順番を変更するには、<order /> で順番を記載して行きます。

<?xml version="1.0"?>
<object>
  <order manager="plone.portalheader" skinname="myProject Theme">
    <viewlet name="plone.logo" insert-before="*"/>
  </order>
</object>

この例では、ロゴを plone.portalheader viewlet managerの一番上に配置しています。「@@manage-viewlets」を参考に上から順番に書いても適用されます。

viewlets を隠す

表示したくない viewlets は、<hidden />に記載します。
例えば、plone.colophonを隠すには、以下のように記述します。

<hidden manager="plone.portalfooter" skinname="myProject Theme">
    <viewlet name="plone.colophon" />
</hidden>

viewlets を上書きする

viewlets を上書きするのは作業がちょっと増えます。viewlets.xml、brower/configure.zcmlと表示の為のテンプレートが必要です。テンプレートをbrowser/templates/以下に置く場合は、browser/viewlets.py への記述も必要です。バラバラあると見にくいので私はこの方法で作ります。

さて、Favicon でも変更してみますか。
Faviconは予め作成して、browser/images以下に置いて下さい。

まず、profiles/default/viewlets.xml に標準のFaviconを隠して、新しいFaviconを表示するように記述します。

<?xml version="1.0"?>
<object>
  <hidden manager="plone.htmlhead.links" skinname="myProject Theme">
    <viewlet name="plone.links.favicon" />
  </hidden>
  <order manager="plone.htmlhead.links" skinname="myProject Theme">
    <viewlet name="myProject.myTheme.favicon" />
  </order>
</object>

次は、browser系です。
テンプレートはfavicon.ptをコピーし、browerフォルダ以下に templateフォルダを作成してその中に配置して修正します。

<tal:favicon define="portal_url view/portal_url">
    <link rel="shortcut icon"
          type="image/x-icon"
          tal:attributes="href string:$portal_url/++resource++myProduct.myTheme.images/favicon.ico"
          />
</tal:favicon>

apple-touch-iconを書いてないのは1つの方が分かりやすいと思ったので削除しただけで特に意味はありません。

templateフォルダ以下にファイルを置いたので、browser/viewlets.py にテンプレートの場所を書きます。

from plone.app.layout.links.viewlets import FaviconViewlet

class FaviViewlet(FaviconViewlet):
    render = ViewPageTemplateFile('templates/favicon.pt')

browser/configure.zcml にこのFaviconを表示するように定義します。

  <browser:viewlet
      name="myProject.myTheme.favicon"
      manager="plone.app.layout.viewlets.interfaces.IHtmlHeadLinks"
      class=".viewlets.FaviViewlet"
      layer=".interfaces.IThemeSpecific"
      permission="zope2.View"
      />

これで、Zopeを再起動して、プロダクトを再インストールすれば変更されます。
このサイトのFaviconもそうやって変更しています。

他のカスタマイズも手順は同じです。独自のviewletを作るにしろ変更するだけにしろ、上記のように作業して、後は必要に応じて browser/stylesheets/main.css にスタイルを定義をするだけです。

これだけじゃ分かりにくいかしら？　本当はPlone3の時に書こうと思っていたのですが、Plone4も4.2b1が出てからになってしまいました。:p
（このサイトもPlone4にしないとと思い続けて随分経つし・・・）

さて、次はまた、たかのりさんですね。では宜しくお願いします。