Zope/Ploneアドベントカレンダーの順番がnyusukeさんより回ってきました。
私は、Plone3用のスキンを作成する方法を書きます。
今回のゴールは、Pasterでスケルトンを作成して、サイトのロゴを変更していきます。
準備:スケルトンの作成
Pasterを使ってスキン用の空プロジェクトを作成します。
ターミナル(コマンドプロンプト)を開きます。
Ploneをインストールしたフォルダへ移動します。そこからインスタンスフォルダ(デフォルトでしたらzinstance)へ行き、さらにbinフォルダへ移動します。そこで以下のコマンドを入力します。
./paster create -t plone3_theme -o ../src plonetheme.newsiteskin
説明すると「テンプレートplone3_themeを使い、パス「../src」へ、plonetheme.newsiteskinというプロジェクトを作りなさい」です。スキンを作る際のプロジェクト名ですが、「ネームスペース.パッケージ名」で作るといいと思います。今回は、ネームスペースがplonetheme、パッケージ名がnewsiteskinです。
-tは、利用するテンプレートを指定します。
-oは、プロジェクトの作成先を指定します。
実行すると下記のメッセージが表示され、質問が始まります。
Selected and implied templates:
ZopeSkel#basic_namespace A project with a namespace package
ZopeSkel#plone A Plone project
ZopeSkel#plone3_theme A Theme for Plone 3.0
Variables:
egg: plonetheme.newsiteskin
package: plonethemenewsiteskin
project: plonetheme.newsiteskin
■まずnamespaceを聞かれます。これは、このままplonethemeでいいです。
Enter namespace_package (Namespace package (like plonetheme)) [‘plonetheme’]:
■次にパッケージ名を聞かれます。これは、newsiteskinを指定します。
Enter package (The package contained namespace package (like example)) [‘example’]: newsiteskin
■portal_skinに表示されるスキン名を指定します。
Enter skinname (The skin selection to be added to ‘portal_skins’ (like ‘My Theme’)) [”]: New Skin Theme
■ベースとするスキンを指定します。今回はPlone Defaultを使うので、そのままEnter。
Enter skinbase (Name of the skin selection from which the new one will be copied) [‘Plone Default’]:
■空のCSSを生成させない方がいいので今回は、Falseを選択します。
Enter empty_styles (Override default public stylesheets with empty ones?) [True]:False
■以下3項は、そのままEnterします。
Enter include_doc (Include in-line documentation in generated code?) [False]:
Enter zope2product (Are you creating a Zope 2 Product?) [True]:
■バージョンの設定します。今回は、そのままにしました。
Enter version (Version) [‘1.0’]:
■プロジェクトの短めの概要を記述します。今回は、デフォルトのまま行きますが、公開する場合はちゃんと入力します。
Enter description (One-line description of the package) [‘An installable theme for Plone 3.0’]:
■プロジェクトの説明を記述します。 今回は、無記入ですが、公開する場合はちゃんと入力します。
Enter long_description (Multi-line description (in reST)) [”]:
■作成者を記述します。
Enter author (Author name) [‘Plone Collective’]: ngi644
■作者の連絡先アドレスを記述します。
Enter author_email (Author email) [‘product-developers@lists.plone.org’]: ngi644@acm.org
■プロジェクトのキーワードを指定します。キーワードはスペース区切りで。
Enter keywords (Space-separated keywords/tags) [‘web zope plone theme’]: plone theme
■プロジェクトのURLがあれば記述します。
Enter url (URL of homepage) [‘http://svn.plone.org/svn/collective/’]: https://ngi644.net/blog
■ライセンスを指示します。今回は、GPLでいいのでそのままEnter。
Enter license_name (License name) [‘GPL’]:
■Zipで固めるかの指示を指示します。今回は、Flaseなので、そのままEnter。
Enter zip_safe (True/False: if the package can be distributed as a .zip file) [False]:
質問項目が終わり、プロジェクトが作成されます。
srcフォルダ(図1)へ移動します。
図1
フォルダには、図2の様に自動生成されたファイルが並んでいます。これらの解説は、次回以降にして、ロゴを変更してみましょう。
ロゴを変更する。
new_logo.jpgというロゴデータを用意しました。
これに変更します。
Ploneでは、ロゴ画像の指定は、base_propertiesのlogoNameアトリビュートで設定します。なので、この部分を新しい、ロゴ画像のファイル名を変更してあげればいいのです。
作成したスキンプロジェクト内の、plonetheme_newsiteskin_styles(plonetheme/newsiteskin/skins/plonetheme_newsiteskin_styles)フォルダ内の、base_properties.propsをテキストエディタ等で開きます(図3)。
いろいろな項目が並んだファイルですが、5行目の「logoName:string=logo.jpg」が変更する項目です。
これを、「logoName:string=new_logo.jpg」と変更して保存します。
さて、このロゴはどこにおけばよいのでしょうか?plonetheme_newsiteskin_stylesフォルダと同じ並びにある、「plonetheme_newsiteskin_custom_images」フォルダへエクスプローラ等でペーストします(図4)。
図4
以上でロゴの変更ができました。
Ploneインスタンスでスキンプロジェクトを利用可能にする
プロジェクトはできましたが、今のままでは、Ploneのインスタンスは、スキンプロジェクトの存在を知りませんので、わかるようにしてあげます。インスタンスディレクトリ(通常ならzinstance)内のbuildout.cfgを編集します。
パッケージの場所を指定する。
developの部分にsrc/plonetheme.newsiteskinを追記します(図5)。
図5
[instance]内のeggとzcmlへplonetheme.newsiteskinを追記します(図6)。
図6
最後に、ターミナル(コマンドプロンプト)でzinstznceへ移動して、./bin/buildoutを実行します。
スキンをインストールする
Ploneを起動して、管理者でログインします。そして、サイト設定からアドオンプロダクトを選択します。
インストール項目からNew Skin Theme 1.0devにチェックを入れ、インストールボタンをクリックします(図7)。
インストールできました。
終わりに
以前に比べたら、Pasterのお陰で新規にスキンを作成するのが楽になりました。一度、試してみてください。2回目は、Viewletに関して書こうかな。次のバトンは、shigeo.netの本多さんにお願いします!