Title: プロフィール画面をカスタマイズするには

ユーザープロフィールの登録画面や詳細欄に表示される項目をカスタマイズ(追加、削除、変更)するには、次の手順を参考にしてください。



例)Facebook プロフィール プラグイン



TeamPage のプログラム コードを直接編集してもプロフィール画面を変更できますが、TeamPage のアップデート時に変更したファイルが新しいものに上書きされ、変更内容が消失してしまい、そのたびにファイルの再編集が必要になります。

変更内容ををプラグインとして組み込むようにすると、TeamPage アップデート時に上書きされず、変更内容を保てます。(参照 : FAQ1683: TeamPage プラグイン概要

今回は、例として、Facebook へのリンクを表示する「AKJ Facebook Profile」というプラグインを作成することにします。このプラグインは、次のような動作をします。



プラグインの作成



TeamPage がインストールされた server ディレクトリ(フォルダ)の下の plugins フォルダを開き、プラグインの必要ファイルを格納するフォルダを作成します。フォルダ名は「jp.co.akj.profilefacebook」とします。

メモ : 既定の server ディレクトリは、サーバーセットアップ > 一般 > 実行情報 の [サーバーディレクトリ] で確認できます。Windows 版の既定は C:\Program Files\Traction\traction\server です。



プラグイン フォルダを作成

次の内容のテキストファイルを作成し、作成した「jp.co.akj.profilefacebook」フォルダの中に「plugin.properties」というファイル名で保存します。

注意: Windows のメモ帳などは、拡張子「.txt」を自動的に追加することがあります。その場合、ファイル名を変更して拡張子が「.properties」になるようにしてください。



display_name=AKJ Facebook Profile
description=This plugin adds Facebook URL in your profile page. Created by AKJ.
version=1.0
name=jp.co.akj.profilefacebook


Propertiesファイルを作成

プロフィールの編集画面に「Facebook」入力欄を表示する



プラグインのフォルダ「jp.co.akj.profilefacebook」に config フォルダを作成し、その中に data フォルダを、その中に forms フォルダを作成し(プラグインフォルダ内に /config/data/forms という階層を作成する)、server ディレクトリの /config/data/forms フォルダにある profile.sdl ファイルをコピーします。

profile.sdl コピー

「property_twitter」の下に次の1行を挿入します。

<field type="text" name="property_fb" label="Facebook"></field>


Facebook設定を挿入する

ファイルを保存し、サーバーセットアップ > 一般 > サーバー管理 の [キャッシュのクリア] ボタンをクリックし、プロフィール ページを再ロードし、「連絡先情報」グループの「Twitter」欄の下に「Facebook」欄が表示されることを確認します。

Facebook入力欄

プロフィール情報欄に「Facebook」欄を表示する



以上で「Facebook」情報の登録欄(入力欄)は表示できました。今度は、登録された情報をプロフィールページの上部に表示しましょう。

プラグインのフォルダ「jp.co.akj.profilefacebook」に /com/traction/sdl/gwtrpc フォルダを作成し、server ディレクトリの /src/com/traction/sdl/gwtrpc フォルダにある userprofile_details.sdl ファイルをコピーします。

userprofile_details.sdl コピー

次に、コピーされた userprofile_details.sdl をテキストエディタで開き、その中の「fill-custom-entry-props」関数 (function) と「display-secure-contact」関数以外の記述をすべて削除します。(「fill-custom-entry-props」関数と「display-secure-contact」関数だけがコピーされた形にします)

<sdl.function name="fill-custom-entry-props">
</sdl.function>

<sdl.function name="display-secure-contact">
  <div id="user-contact" class="col-1q">
    <table>
      <#display-field key="phone" name="#{Phone}"/>
      <#display-field key="mobile" name="#{userprofile_mobile_label}" val="#$profile[mobile]$" />
      <#display-field name="<regex.replace regex=' ' replace='&nbsp;'>#{userprofile_googlevoice_label}</regex.replace>" val="#$profile[googlevoice]$"/>
      <#display-field key="fax" name="#{Fax}"/>
      <#display-field-email>
      <#display-field name="#{userprofile_aim_label}" val="#$profile[aim]$"/>
      <#display-field name="#{userprofile_jabber_label}" val="#$profile[jabber]$"/>
      <#display-field name="<regex.replace regex=' ' replace='&nbsp;'>#{userprofile_googleid_label}</regex.replace>" val="#$profile[googleid]$"/>
      <#display-field name="<regex.replace regex=' ' replace='&nbsp;'>#{userprofile_twitter_label}</regex.replace>" val="#$profile[twitter]$"/>
    </table>
  </div>
</sdl.function>


「fill-custom-entry-props」関数には、profile.sdl に挿入した Facebook フィールドのプロパティ名 (property_fb) を挿入します。これにより、プロフィール編集画面で登録した Facebook 情報がプロフィールページに表示されるようになり、Attivio 検索にもヒットするようになります。

<sdl.function name="fill-custom-entry-props">
  property_fb
</sdl.function>


「display-secure-contact」関数では、</table> の上に、次の1行を挿入します。

<#display-field name="Facebook" val="#$profile[property_fb]$"/>


ファイルを保存し、サーバーセットアップ | 一般 タブ | サーバー管理 タブ で [キャッシュクリア] を実行し、プロフィールページを再ロードします。「Facebook」欄が表示されました。

Facebook URL の表示

メモ: Facebook の URL をリンク(クリックすると Facebook のページが開く)にするには、「display-secure-contact」関数に挿入する1行に <a> タグを加えて次のようにします。

<#display-field name="Facebook" val="<a href='#$profile[property_fb]$' target='_blank'>#$profile[property_fb]$</a>"/>


プラグインのダウンロード



この解説記事の例として作成したプラグインは、Forum1005 で公開しています。





Attachments:
custom_profile_04.png
custom_profile_06.png
custom_profile_07.png
custom_profile_08_address.png
copy_profile_sdl.png
customize_profile_01.png
customize_profile_02.png
cutomize_01.png
properties_file_desc.png
insert_fb_setting.png
edit_profile.png
copy_userprofile_details.png
copy_profile_sdl.png
facebook1.png
関連記事
Article: FAQ2181 (permalink)
Categories: :FAQ:カスタマイズ, :FAQ:プロフィール, :FAQ:スキン:Proteus, :DocSDK:カスタマイズ, :DocSDK:FAQ, :FAQ:プラグイン
Date: 2012/10/03; 14時30分21秒 JST

Author Name: TeamPage サポート
Author ID: jpbo