設定画面に項目追加
個人設定の項目を増やしたので、その項目をメンバーが登録できるようにします。また、画像の表示サイズも大きくします。
takanori
目次
- 概要[overview]
- カスタマイズ用にコピー[copy]
- テキストフィールドを追加[text]
- セレクトフィールドを追加[select]
- 顔写真サイズの変更[portrait]
- 日本語化[japanese]
- 個人設定画面の確認[display]
- ソースコード[soruce]
概要[overview]
portal_memberdata にプロパティを追加して項目が設定できるようになったので、次は個人設定画面で追加した項目を入力できるようにします。
追加した項目とその名前、入力方式は以下のようにします。
- nickname: ニックネーム: テキストフィールド
- organization: 所属組織名: テキストフィールド
- blood: 血液型: 「未指定/A/B/O/AB」から選択
- sex: 性別: 「未指定/男性/女性」から選択
それとは別に顔写真の表示サイズを 192x192 と大きくしてみます。
カスタマイズ用にコピー[copy]
まず最初に、入力画面をカスタマイズ用にコピーします。
個人設定画面は portal_skins/plone_prefs/personalize_form
にあります。
ZMI(zope 管理画面)でこのアイテムを開いて Customize ボタンをクリックします。
テキストフィールドを追加[text]
それではカスタマイズ用にコピーした personalize_form のソースを編集して、ニックネームと所属組織名の入力フィールドを追加しようと思います。
そのために、テキストフィールドはどのように記述されているか見て真似しようと思います。 フルネームの入力用のテキストフィールドは、以下のように記述されています。:
<div class="field"
tal:define="error errors/fullname | nothing;
fullname python:request.get('fullname', member.getProperty('fullname', ''));"
tal:attributes="class python:test(error, 'field error', 'field')">
<label for="fullname" i18n:translate="label_full_name">Full name</label>
<div tal:content="error">Validation error output</div>
<input type="text"
id="fullname"
name="fullname"
size="25"
tabindex=""
value="member.fullname html_quote"
tal:attributes="value fullname;
tabindex tabindex/next;"
/>
</div>
上記のコードをコピーして、fullname の部分を nickname や organization に、label_full_name の部分を label_nick_name や label_organization に変更します。
セレクトフィールドを追加[select]
次に、血液型や性別を設定するための入力フィールドを追加しようと思います。
こちらはテキストフィールドではなく選択式にしたいので、wisiwyg_editor の記述を参考にしてみます。
エディタを指定する部分は以下のように記述されています。ちょっと複雑です。:
<div class="field"
tal:define="wysiwyg_editor python:request.get('wysiwyg_editor',
member.getProperty('wysiwyg_editor',''))">
<label for="wysiwyg_editor" i18n:translate="label_content_editor">Content editor</label>
<div class="formHelp" i18n:translate="help_content_editor">
Select the content editor that you would like to use.
Note that content editors often have specific browser
requirements.
</div>
<select name="wysiwyg_editor"
id="wysiwyg_editor"
tabindex=""
tal:attributes="tabindex tabindex/next;">
<tal:block tal:repeat="editor site_properties/available_editors">
<option tal:condition="python:editor != 'None'"
value="None"
tal:attributes="value editor;
selected python:test(editor==wysiwyg_editor, 'selected', None);"
tal:content="editor">
WYSIWYG-editor
</option>
<option tal:condition="python:editor == 'None'"
value="None"
tal:attributes="value editor;
selected python:test(editor==wysiwyg_editor, 'selected', None);"
tal:content="editor"
i18n:translate="label_ordinary_content_editor">
Ordinary Form-based Editor (works in all browsers)
</option>
</tal:block>
</select>
</div>
ちょっと複雑な感じがしますが、ポイントは ''-</tal:block> の部分です。
最初にエディタの一覧を取得してそれを tal:repeat でループして選択肢として表示しています。
また、test(editor==wysiwyg_editor,... と書いてある部分で実際の値と比較して、設定してある値が、選択された状態になるようにしています。
ただ、血液型などは値が固定なので、外部から取得せず直接ここに書き込んじゃおうと思います。
というわけで、こんな感じのコードを追加します。:
<div class="field"
tal:define="blood python:request.get('blood', member.getProperty('blood',''))">
<select name="blood"
id="blood"
tabindex=""
tal:attributes="tabindex tabindex/next;">
<option value="">--</option>
<tal:block tal:repeat="val python:('A', 'B', 'O', 'AB')">
<option value="None"
tal:attributes="value val;
selected python:test(val==blood, 'selected', None);"
tal:content="val"
i18n:translate="">
Blood
</option>
</tal:block>
</select>
</div>
顔写真サイズの変更[portrait]
次に、顔写真の表示サイズを変更します。
これは簡単で、personalize_form の以下のコードで height と width の値を変えるだけです。:
<img src="" alt=""
height="100"
width="75"
class="portraitPhoto"
style="float: right;"
tal:condition="portrait"
tal:attributes="src portrait/absolute_url"
/>
ここでは 192(pixel) × 192(pixel) に変更しました。
ただし、画像のサイズを変更する場合は、defaultUser.gif
もあわせて変更した方がいいと思います。
日本語化[japanese]
追加した項目の日本語表示に対応するために、po ファイルに項目を追加します。
po ファイルの修正はサーバ上のファイルを直接編集して行います。(ZMI からは行えません)
Products/CMFPlone/i18n ディレクトリの下にある plone-ja.po ファイルに以下のような項目を追加します。
msgid "label_nick_name" msgstr "ニックネーム" msgid "label_organization" msgstr "所属" msgid "label_blood" msgstr "血液型" msgid "label_sex" msgstr "性別"msgid "Male" msgstr "男性" msgid "Female" msgstr "女性"
msgid "A" msgstr "A型" msgid "B" msgstr "B型" msgid "O" msgstr "O型" msgid "AB" msgstr "AB型"
また、msgid "help_portrait" に「幅75ピクセル、高さ100ピクセル」という記述があるので、ここも変更しておきます。
編集が終わったら ZMI で
Control_Panel/TranslationService/CMFPlone.i18n-plone-ja.po
にアクセスして再読み込みを実行するか、
zope サーバを再起動してください。
ソースコード[soruce]
個人設定画面に「ニックネーム」「所属組織名」などの項目を追加した場合の、
personalize_form のソースコードは下記のリンクから参照してください。