2 目次 1. 基本操作 ウィジェットとは何か ウィジェットの目的と構成 ウィジェットの設置 ウィジェットのカスタマイズ ウィジェットコードの構成 ウィジェットの外観を変更する..

Newdea Inc.

プロジェクトセンター

ユーザーガイド –ウィジェット

目 次

1. 基本操作 ... 3

1.1. ウィジェットとは何か ... 3

1.2.

ウィジェットの目的と構成 ... 3

1.3.

ウィジェットの設置 ... 5

2. ウィジェットのカスタマイズ ... 10

2.1.

ウィジェットコードの構成 ... 10

2.2. ウィジェットの外観を変更する ... 11

2.2.1. 個別のウィジェットの外観を変更する ... 11

2.2.2. 一つのウェブページにある複数のウィジェットの外観を変更する ... 12

2.3. ウィジェットに表示するインパクトレポートを変更する ... 13

1. 基本操作

1.1. ウィジェットとは何か

ウィジェットは自身が所有するウェブページや、ブログ、ichrome など、ウェブ上の好きな場所 に小さく情報を表示できるアプリケーションソフトのことです。一般的には、天気予報や株 価、写真などを表示するために使われています。ここでは、Newdea Project Center で作成できる ウィジェットの例を示します。

1.2. ウィジェットの目的と構成

Newdea Project Center で作成できるウィジェットは、インパクトレポートの内容の一部を表示 するものです。ウィジェットを使うことで、Newdea Project Center にログインしなくても、プ ロジェクトの情報を見ることが出来ます。ウィジェット内の「Learn more」リンクをクリック すれば、そこからインパクトレポートの全体を表示することも可能です。 …① プロジェクトの名前が表示されます。 …②プロジェクトのメイン画像が表示されま す。 …③プロジェクトの説明が表示されます。 …④「Learn more」リンクをクリックするとイ ンパクトレポートが別ウィンドウ（タブ）で 開きます。表示されるインパクトレポートの 例は次ページにあります。 ※①②③はプロジェクトメインページから「プロジェクトの詳細」タブをクリックし、「概 要」メニューから編集することが出来ます。Newdea Project Center でこれらの情報が更新される と、ウィジェットに即座に反映されます。

下図は、「Learn more」リンクをクリックして表示されるインパクトレポートの例です。

1.3. ウィジェットの設置

ウィジェットの設置手順は、 １．管理画面で「プロジェクトの共有」「ウィジェットコードの生成」のロールにチェックを 入れ、 ２．プロジェクト詳細＞公開情報 ページで「レポート掲載対象」「ウィジェットの公開を有効 にする」にチェックを入れ保存し、 ３．同ページで「このプロジェクトを埋め込む」リンクをクリックし、表示されるウィジェッ トコードをコピーし、 ４．ウィジェットを設置したいウェブページに行き、ページの html にウィジェットコードを貼 り付けると、ウィジェットを設置することが出来ます。 各手順の詳細は以下の通りです。 ①ロールの設定 まず、コードを取得するためのロールを設定します。 ロールの設定は、管理＞ユーザとセキュリティの設定＞ロールの管理 から行います。 ローカルロール内、全般的権限の中の「プロジェクトの共有」と「ウィジェットコードの生 成」２つにチェックを入れてください。

②ウィジェットの公開設定 ウィジェットにプロジェクトの情報を表示するには、プロジェクトページでの設定が必要で す。ウィジェットの公開設定は、各プロジェクトメインページ＞プロジェクトの詳細＞公開情 報 から行います。 ページ中央部の「ネットワークの管理」をクリックしてください。 ネットワーク名「Newdea Public」の右端にある「レポート掲載対象」にチェックを入れ、「保 存して戻る」をクリックしてください。（デフォルトではチェックは入っていません。）

「公開情報」のページに戻るので、ページ下部の「ウィジェットの公開を有効にする」にチェ ックを入れ、「保存」をクリックしてください。

③コードの取得

「ウィジェットの公開を有効にする」にチェックを入れ、保存すると、「このプロジェクトを埋め込 む」というリンクが表示されます。

このリンクをクリックすると、html コードが表示されます。コードをコピーしてください。

④ウィジェットの埋め込み

ウィジェットを設置したいウェブページに行き、ページの html を表示させます。ウィジェットを表 示させたい場所に、コピーしたウィジェットコードを貼り付けます。以上で設置完了です。 下図はブログに設置した例です。

2. ウィジェットのカスタマイズ

2.1. ウィジェットコードの構成

---

<iframe …① id="widgetFrame" …② name="widgetFrame" …② height="500px" …③ scrolling="auto" …④ frameborder="1" …⑤ src=http://demo.newdea.com/GivingWebApp/Browse/ViewExternalOr-gUnit.aspx ?B8A99D6DF9FEECA656824698217A211DF3F07F276B9F9C479713811F14707FC1 …⑥ > [あなたのユーザエージェントは、フレームをサポートしていないか、現在のフレー ムを表示しないように設定されています。 ただし、次のような可能性があり <a href="https://demo.newdea.com/Giving/Browse/ViewExternalOr- gUnit.aspx?uq1-1VgVbCBhv9BEaHU3B6mz1sktMsWxptY4OS6-1SAtkp7UaxYdtVQcJm0SQVeGjltY5ZrpzgVXQn7TlduzulGA--"> ここをクリック</a>.] …⑦ </iframe> …① --- 上記はウィジェットコードのサンプルです。各要素の詳細な説明は以下の通りです。 ① <iframe>,</iframe> インライン・フレームを作るための要素です。 既存の html コードにウィジェットを埋め込むことが出来ます。 ② id=”widgetFrame” ウィジェットの ID と名前を示します。 name="widgetFrame CSS を含むページでウィジェットに書式設定を適用することが出来ます。 ③ height="500px" ウィジェットの高さを示します。 ④ scrolling="auto" ウィジェットにスクロールバーを表示するかどうかを示します。 指定可能な値は以下の通りです。 a. “auto” ウィジェットの高さよりも、ウィジェット内の情報が多い場合に スクロールバーが表示されます。 b. “yes” スクロールバーが常に表示されます。 c. “no” スクロールバーは表示されません。

2.2 ウィジェットの外観を変更する

2.2.1. 個別のウィジェットの外観を変更する ウェブサイトでウィジェットをどのように表示するかを変更することが出来ます。変更できる のは、枠線、背景色、サイズの 3 つです。変更するには、ウィジェットコードを編集します。下 記のウィジェットコードの中で、黄色くハイライトしてある部分が、編集箇所です。 --- <iframe id="widgetFrame" name="widgetFrame" height="500px" scrolling="auto" frameborder="0" …① allowtransparency="yes" …② style="width:240px; …③ height:350px; border:1px solid #000000; background-color:#f8f8f8;" src=http://demo.newdea.com/GivingWebApp/Browse/ViewExternalOr-gUnit.aspx ?B8A99D6DF9FEECA656824698217A211DF3F07F276B9F9C479713811F14707FC1 > [あなたのユーザエージェントは、フレームをサポートしていないか、現在のフレ ームを表示しないように設定されています。 ただし、次のような可能性があり<a href="http://uat.newdea.com/Giv-ingWebApp/Browse/ViewExternalOr gUnit.aspx?B8A99D6DF9FEECA658978538217A211DF3F07F276B9F9C47971 3811F14707FC1">ここをクリック</a>.] </iframe> --- ① frameborder="0" "0"にすることでウィジェットの枠線を消します。 ② allowtransparency="yes" この要素を挿入することで③で背景色を指定することが出来ます。 ③ style= ウィジェットのスタイルを変更することが出来ます。 a. "width:240px; ウィジェットの幅を変更することが出来ます。 b. height:350px; ウィジェットの高さを変更することが出来ます。 c. border:1px solid #000000; ウィジェットの枠線のスタイルを変更することが出来ます。 1) 1px 枠線の太さを示します。 2) solid 枠線の種類を示します。 使用可能な種類は、全 7 種類です。

実線(solid) 点線(dotted) 破線(dashed) 二重線(double)

窪んだ線(groove) 左上に影が出来る線(inset) 右下に影が出来る線 (outset)

3) #00000 枠線の色を示します。

2.2.2. 一つのウェブページにある複数のウィジェットの外観を変更する ページ上のすべてのウィジェットの外観を一度に変更することも出来ます。変更するには、html の<head>セクションに下記のようにコードを挿入してください。 --- <style type="text/css"> #widgetFrame …①{ width:240px; …② height:350px; …③ border:1px solid #4B4C77; …④ background-color:#f1f1fa;} …⑤ </style> --- ① #widgetFrame Newdea Project Center のウィジェットに対するスタイルの指定であ

ることを示します。ページ内のすべてのウィジェットに適用され ます。 ② width:240px; ウィジェットの幅を示します。 ③ height:350px; ウィジェットの高さを示します。 ④ border:1px solid #4B4C77; ウィジェットの枠線のスタイルを示します。 ※ここで枠線のスタイルを設定しても、各ウィジェットコード内 の frameborder が=”1”になっていなければ正しく表示されませ ん。 ⑤ background-color:#f1f1fa;} ウィジェットの背景色を示します。 ※ここでウィジェットの背景色を設定しても、各ウィジェットコ ード内に allowtransparency="yes"を追加しなければ、正しく表示 されません。

2.3. ウィジェットに表示するインパクトレポートを変更する

ウィジェットに表示されるインパクトレポートのテンプレートは、プロジェクトごとに設定す ることが出来ます。デフォルトでは、「標準的なインパクトレポート」が表示されます。 インパクトレポートのテンプレートを変更するには、「レポート」画面の「インパクトレポー ト」タブで設定します。詳しい手順は以下の通りです。 ①テンプレートを表示する 「レポート」画面の「インパクトレポート」タブにある「テンプレートを表示」リンクをクリ ックしてください。 ②テンプレートを作成する 「新規組織テンプレート」ボタンをクリックしてください。

③テンプレートの内容を決める テンプレートの名前を入力してください（必須）。 インパクトレポートに表示したいセクションを選択して、「次」ボタンをクリックしてくださ い。 次ページでは各セクション内の詳細な情報に関して、それぞれ細かく表示・非表示を設定する ことが出来ます。設定が終了したら「次」ボタンをクリックしてください。

④プロジェクトに割り当てる

ウィジェットで表示させたいプロジェクトを選択し、「プロジェクトのウィジェットテンプレ ートとしてこれを使用」にチェックをいれ、「保存して終了」ボタンをクリックしてくださ い。