目次

• 概要[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 サーバを再起動してください。

個人設定画面の確認[display]

コードが作成できたら、個人設定画面が正しく表示され、値が設定されるかを確認します。

ソースコード[soruce]

個人設定画面に「ニックネーム」「所属組織名」などの項目を追加した場合の、 personalize_form のソースコードは下記のリンクから参照してください。

personalize_form のソースコード