Title: Social Enterprise Web ウィジェット/バッジを Web ページに設置する

ここでは、ソーシャルエンタープライズ Web オプションのウィジェットやバッジを Web ページに設置して、Web ページに対するアクション（コメントやタスクなど）を TeamPage に投稿（登録）できるようにする手順について説明します。

ウィジェットでできること

TeamPage へのシェア、コメント投稿、タスク登録、タグ付けをするためのボックスやボタンを Web ページに設置できます。

例えば、Web システムとして動作している見積書や請求書へのメモを TeamPage に残したり、データベースのレポートへの次のアクションをタスクとして TeamPage に登録したりできます。

下図は、請求書に関連して TeamPage に登録（投稿）されたコメント、タグ、タスクを請求書ページに埋め込んで表示している例です。ここから新しいコメント、タスク、タグを登録したりシェアしたりできます。

請求書に関するタスク、コメント、タグなどをTeamPageに関連付けて投稿（登録）できる

ライセンス情報の確認

この機能を使うには、Social Enterprise Web オプションが有効なライセンスが必要です。同オプションが有効になっているかどうかは、サーバーセットアップ > ライセンスの [ライセンス情報] で確認できます。

同オプションが有効なライセンスの購入やアップグレードについては、お気軽に弊社までご連絡ください。

設置方法

SEW ウィジェットは簡単に設置できます。次の 2 行のコードを加えるだけです。

1. ウィジェットを表示したい位置に DIV タグのプレースホルダーを記述します。同じページに複数のウィジェットを設置する場合は、それぞれの DIV プレースホルダーを記述します。

2. ウィジェットを有効化（アクティベート）するための JavaScript を記述します。この JavaScript は TeamPage サーバーから読み込まれます。必ず DIV プレースホルダーの後に（通常は </body> タグの直前に）記述してください。記述コードは次のようになります。

<script src="http://yourserver:port/html/js/widgets.js" type="text/javascript"></script>

パラメーター

それぞれの DIV プレースホルダーには、ウィジェットがどのように表示されるかを定義するパラメーターが必要です。これらのパラメーターは、HTML の属性として記述されます。

class	必須項目 CSS の class= 属性は、ウィジェットの種類を識別するために使われます。下記の「ウィジェットの種類」表に記載されている「名前」のいずれかを指定する必要があります。
data-host	必須項目お使いの TeamPage の基底 URL です。HTTP で 80 番ポート以外、HTTPS で 443 ポート以外を使う場合は、ポート番号も記述します。例) https://teampage.example.jp や http://myserver:8080
data-url	オプション「現在のページ」の URL です。省略された場合は、既定の window.location.href が使われます。
data-title	オプション「現在のページ」のタイトルです。省略された場合は、既定の document.title が使われます。
data-description	オプション「現在のページ」の要約です。
data-image	オプション「現在のページ」の画像の URL です。

image や description のようなメタデータが data- 属性で取得できない場合は、ウィジェットは、ページに埋め込まれた OpenGraph メタデータの取得を試みます。

activity と summary ウィジェットは、次の属性もサポートします。

data-buttons

オプション ウィジェットに表示されるボタンの並び順のリストで、既定値は "comment,task,tag,share" です。

activity と discussion ウィジェットは、次の 2 つの追加属性をサポートします。

data-width	オプションウィジェットの幅（ピクセル）です。例: 300
data-height	オプションウィジェットの高さ（ピクセル）です。例: 600

ウィジェットの表示をもっと細かくカスタマイズするには、追加の CSS を style= 属性で指定します。例えば、ウィジェットの上に余白が欲しい場合は style="padding-top: 8px;" のように記述します。

ウィジェットの種類

名前	例	備考とコード例
tmpg-widget-button		表示中のページから TeamPage に投稿されたコメント、タスク、タグ、共有の合計数を表示します。ボタンをクリックするとブックマークレットの画面が、前回開いたタブが選択された状態で表示されます。前回開いたタブの情報は Cookie に保存されています。 `<div style="padding-top: 5px;" class="tmpg-widget-button" data-host="http://yourserver:port"></div>`
tmpg-widget-summary		表示中のページから TeamPage に投稿されたコメント、タスク、タグ、共有を、種類別に表示します。ボタンをクリックすると、該当するタブが開いた状態でブックマークレット画面が表示されます。 `<div style="padding-top: 5px;" class="tmpg-widget-summary" data-host="http://yourserver:port"></div>`
tmpg-widget-activity		表示中のページから TeamPage に投稿されたアクティビティを時間順に表示します。投稿の種類はアイコンで表示され、そのアイコンをクリックすると、該当するタブが開いた状態でブックマークレット画面が表示されます。 `<div style="padding-top: 5px;" class="tmpg-widget-activity" data-host="http://yourserver:port"></div>`
tmpg-widget-discussion		表示中のページから TeamPage へ投稿されたコメントを表示します。また、このウィジェットから TeamPage へ新しいコメントを投稿したり、[返信] ボタンをクリックして既存のコメントにコメントしたりできます。 `<div class="tmpg-widget-discussion" data-host="http://yourserver:port" data-height="1500"></div>`

認証

ウィジェットは、ブラウザと TeamPage の間で直接的な通信を行い、認証（ログイン処理）します。Active Directory と連携している環境ではシングルサインオンも利用できます。TeamPage にログインしていない人がウィジェットを表示すると、ログインを要求するボタンやフォームが表示されます。

動作パフォーマンス

ウィジェットが埋め込まれたページを表示する度に、ページを表示したユーザーの読み取り権限をウィジェットの表示内容に反映させるために、ユーザーの権限を反映したクエリが TeamPage サーバーに対して発行されます。

不要なリクエストによる TeamPage サーバーへの負荷を軽減には、ウィジェットを設置するページを限定することが効果的です。

例えば、見積書／請求書／納品書の統合システムにウィジェットを設置する場合、請求書ページだけにウィジェットを設置します。ユーザーが見積書や納品書のページを表示しても TeamPage サーバーへのリクエストは発生しませんので、その分、TeamPage サーバーの負荷を減らせます。

また、システムのポータルページに設置すると、多くのユーザーが何度も何度もウィジェットを表示することになり、そのたびに TeamPage サーバーへのリクエストが発生します。ポータルページへのウィジェットの設置は推奨しません。

ログの記録

ツールバーのボタンは、ブラウザの「現在の URL」に対してクエリを発行しますが、プライバシーの理由によりログには記録されません。それに対して、ウィジェットが設置された Web ページが表示されたとき、ロードされたウィジェットは次のような記録を traction.log と debug.log （デバッグログを有効にしている場合）に残します。

[log Thu Nov 10 11:04:05 EST 2011] (admin) requested /traction/gwt/view?f=body&title=&type=widget/discussion&url=traction.traction… on port 8081 in 165ms

Attachments:

license_information.png
button.png
summary.png
activity.png
discussion.png
invoice_activities.png

親記事に追加されている (1)

SEW1: ソーシャルエンタープライズ Web マニュアル

参照されている (1)

SEW1: ソーシャルエンタープライズ Web マニュアル (Social Enterprise Web ウィジェットやバッジの既存ページへのインストール)

Article: SEW12 (permalink)
Date: 2014/06/19; 2時41分53秒 JST

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