スキンの作成方法 第1回

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)へ移動します。

skin_000図1

フォルダには、図2の様に自動生成されたファイルが並んでいます。これらの解説は、次回以降にして、ロゴを変更してみましょう。

skin_filelist図2

ロゴを変更する。

new_logo.jpgというロゴデータを用意しました。

new_logo

これに変更します。

Ploneでは、ロゴ画像の指定は、base_propertiesのlogoNameアトリビュートで設定します。なので、この部分を新しい、ロゴ画像のファイル名を変更してあげればいいのです。

作成したスキンプロジェクト内の、plonetheme_newsiteskin_styles(plonetheme/newsiteskin/skins/plonetheme_newsiteskin_styles)フォルダ内の、base_properties.propsをテキストエディタ等で開きます(図3)。

skin_03図3

いろいろな項目が並んだファイルですが、5行目の「logoName:string=logo.jpg」が変更する項目です。

これを、「logoName:string=new_logo.jpg」と変更して保存します。

さて、このロゴはどこにおけばよいのでしょうか?plonetheme_newsiteskin_stylesフォルダと同じ並びにある、「plonetheme_newsiteskin_custom_images」フォルダへエクスプローラ等でペーストします(図4)。

skin_004図4

以上でロゴの変更ができました。

Ploneインスタンスでスキンプロジェクトを利用可能にする

プロジェクトはできましたが、今のままでは、Ploneのインスタンスは、スキンプロジェクトの存在を知りませんので、わかるようにしてあげます。インスタンスディレクトリ(通常ならzinstance)内のbuildout.cfgを編集します。

パッケージの場所を指定する。

developの部分にsrc/plonetheme.newsiteskinを追記します(図5)。

skin_009図5

[instance]内のeggとzcmlへplonetheme.newsiteskinを追記します(図6)。

skin_egg_zcml図6

最後に、ターミナル(コマンドプロンプト)でzinstznceへ移動して、./bin/buildoutを実行します。

スキンをインストールする

Ploneを起動して、管理者でログインします。そして、サイト設定からアドオンプロダクトを選択します。

インストール項目からNew Skin Theme 1.0devにチェックを入れ、インストールボタンをクリックします(図7)。

skin_install図7

インストールできました。

skin_complete図8

終わりに

以前に比べたら、Pasterのお陰で新規にスキンを作成するのが楽になりました。一度、試してみてください。2回目は、Viewletに関して書こうかな。
次のバトンは、shigeo.netの本多さんにお願いします!