Newdea Inc. プロジェクトセンター ユーザーガイド ウィジェット
2 目次 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
3 1. 基本操作 1.1. ウィジェットとは何か ウィジェットは自身が所有するウェブページや ブログ ichrome など ウェブ上の好きな場所に小さく情報を表示できるアプリケーションソフトのことです 一般的には 天気予報や株価 写真などを表示するために使われています ここでは Newdea Project Center で作成できるウィジェットの例を示します 1.2. ウィジェットの目的と構成 Newdea Project Center で作成できるウィジェットは インパクトレポートの内容の一部を表示するものです ウィジェットを使うことで Newdea Project Center にログインしなくても プロジェクトの情報を見ることが出来ます ウィジェット内の Learn more リンクをクリックすれば そこからインパクトレポートの全体を表示することも可能です 1 プロジェクトの名前が表示されます 2 プロジェクトのメイン画像が表示されます 3 プロジェクトの説明が表示されます 4 Learn more リンクをクリックするとインパクトレポートが別ウィンドウ ( タブ ) で開きます 表示されるインパクトレポートの例は次ページにあります 123 はプロジェクトメインページから プロジェクトの詳細 タブをクリックし 概要 メニューから編集することが出来ます Newdea Project Center でこれらの情報が更新されると ウィジェットに即座に反映されます
4 下図は Learn more リンクをクリックして表示されるインパクトレポートの例です 中略
5 1.3. ウィジェットの設置 ウィジェットの設置手順は 1. 管理画面で プロジェクトの共有 ウィジェットコードの生成 のロールにチェックを入れ 2. プロジェクト詳細 > 公開情報ページで レポート掲載対象 ウィジェットの公開を有効にする にチェックを入れ保存し 3. 同ページで このプロジェクトを埋め込む リンクをクリックし 表示されるウィジェットコードをコピーし 4. ウィジェットを設置したいウェブページに行き ページの html にウィジェットコードを貼り付けると ウィジェットを設置することが出来ます 各手順の詳細は以下の通りです 1 ロールの設定 まず コードを取得するためのロールを設定します ロールの設定は 管理 > ユーザとセキュリティの設定 > ロールの管理から行います ローカルロール内 全般的権限の中の プロジェクトの共有 と ウィジェットコードの生成 2 つにチェックを入れてください
6 2 ウィジェットの公開設定 ウィジェットにプロジェクトの情報を表示するには プロジェクトページでの設定が必要です ウィジェットの公開設定は 各プロジェクトメインページ > プロジェクトの詳細 > 公開情報から行います ページ中央部の ネットワークの管理 をクリックしてください ネットワーク名 Newdea Public の右端にある レポート掲載対象 にチェックを入れ 保存して戻る をクリックしてください ( デフォルトではチェックは入っていません )
7 公開情報 のページに戻るので ページ下部の ウィジェットの公開を有効にする にチェックを入れ 保存 をクリックしてください 3 コードの取得 ウィジェットの公開を有効にする にチェックを入れ 保存すると このプロジェクトを埋め込む というリンクが表示されます
8 このリンクをクリックすると html コードが表示されます コードをコピーしてください 4 ウィジェットの埋め込み ウィジェットを設置したいウェブページに行き ページの html を表示させます ウィジェットを表示させたい場所に コピーしたウィジェットコードを貼り付けます 以上で設置完了です 下図はブログに設置した例です
9 下図は ichrome ページに設置した例です
10 2. ウィジェットのカスタマイズ 2.1. ウィジェットコードの構成 ---------------------------------------------------------------------------------------------------------------- <iframe 1 id="widgetframe" 2 name="widgetframe" 2 height="500px" 3 scrolling="auto" 4 frameborder="1" 5 src=http://demo.newdea.com/givingwebapp/browse/viewexternalorgunit.aspx?b8a99d6df9feeca656824698217a211df3f07f276b9f9c479713811f14707fc1 6 > [ あなたのユーザエージェントは フレームをサポートしていないか 現在のフレームを表示しないように設定されています ただし 次のような可能性があり <a href="https://demo.newdea.com/giving/browse/viewexternalor- gunit.aspx?uq1-1vgvbcbhv9beahu3b6mz1sktmswxpty4os6-1satkp7uaxydtvqcjm0sqvegjlty5zrpzgvxqn7tlduzulga--"> </iframe> 1 ここをクリック </a>.] 7 ------------------------------------------------------------------------------------------ 上記はウィジェットコードのサンプルです 各要素の詳細な説明は以下の通りです 1 <iframe>,</iframe> 2 id= widgetframe name="widgetframe 3 height="500px" 4 scrolling="auto" インライン フレームを作るための要素です 既存の html コードにウィジェットを埋め込むことが出来ます ウィジェットの ID と名前を示します CSS を含むページでウィジェットに書式設定を適用することが出来ます ウィジェットの高さを示します ウィジェットにスクロールバーを表示するかどうかを示します 指定可能な値は以下の通りです a. auto ウィジェットの高さよりも ウィジェット内の情報が多い場合に スクロールバーが表示されます b. yes スクロールバーが常に表示されます c. no スクロールバーは表示されません 5 frameborder="1" 6 src=http://~ 7 [~] ウィジェットの周りに枠線を表示するかどうかを示します デフォルトでは 1 ( 表示する ) が入力されています 枠線を表示しない場合は 0 と入力してください ウィジェットに表示される情報が Newdea Project Center 上のどのページにあるのか アドレスを示します 使用しているブラウザでフレームが表示できない場合に表示される代替テキストとリンクを示します
11 2.2 ウィジェットの外観を変更する 2.2.1. 個別のウィジェットの外観を変更する ウェブサイトでウィジェットをどのように表示するかを変更することが出来ます 変更できるのは 枠線 背景色 サイズの 3 つです 変更するには ウィジェットコードを編集します 下記のウィジェットコードの中で 黄色くハイライトしてある部分が 編集箇所です --------------------------------------------------------------------------------------------------------------------------------- <iframe id="widgetframe" name="widgetframe" height="500px" scrolling="auto" frameborder="0" 1 allowtransparency="yes" 2 style="width:240px; 3 height:350px; border:1px solid #000000; background-color:#f8f8f8;" src=http://demo.newdea.com/givingwebapp/browse/viewexternalorgunit.aspx?b8a99d6df9feeca656824698217a211df3f07f276b9f9c479713811f14707fc1 > [ あなたのユーザエージェントは フレームをサポートしていないか 現在のフレ ームを表示しないように設定されています ただし 次のような可能性があり <a href="http://uat.newdea.com/givingwebapp/browse/viewexternalor gunit.aspx?b8a99d6df9feeca658978538217a211df3f07f276b9f9c47971 3811F14707FC1"> ここをクリック </a>.] </iframe> ---------------------------------------------------------------------------------------------------------------- 1 frameborder="0" "0" にすることでウィジェットの枠線を消します 2 allowtransparency="yes" この要素を挿入することで 3 で背景色を指定することが出来ます 3 style= ウィジェットのスタイルを変更することが出来ます a. "width:240px; ウィジェットの幅を変更することが出来ます b. height:350px; ウィジェットの高さを変更することが出来ます c. border:1px solid #000000; ウィジェットの枠線のスタイルを変更することが出来ます 1) 1px 枠線の太さを示します 2) solid 枠線の種類を示します 使用可能な種類は 全 7 種類です 3) #00000 枠線の色を示します 実線 (solid) 点線 (dotted) 破線 (dashed) 二重線 (double) 窪んだ線 (groove) 左上に影が出来る線 (inset) 右下に影が出来る線 (outset) d. background-color:#f8f8f8;" ウィジェットの背景色を変更することが出来ます
12 2.2.2. 一つのウェブページにある複数のウィジェットの外観を変更する ページ上のすべてのウィジェットの外観を一度に変更することも出来ます 変更するには html の <head> セクションに下記のようにコードを挿入してください --------------------------------------------------------------------------------------------------------------------------------- <style type="text/css"> #widgetframe 1{ width:240px; 2 height:350px; 3 border:1px solid #4B4C77; 4 background-color:#f1f1fa;} 5 </style> --------------------------------------------------------------------------------------------------------------------------------- 1 #widgetframe 2 width:240px; 3 height:350px; 4 border:1px solid #4B4C77; 5 background-color:#f1f1fa;} Newdea Project Center のウィジェットに対するスタイルの指定であることを示します ページ内のすべてのウィジェットに適用されます ウィジェットの幅を示します ウィジェットの高さを示します ウィジェットの枠線のスタイルを示します ここで枠線のスタイルを設定しても 各ウィジェットコード内の frameborder が = 1 になっていなければ正しく表示されません ウィジェットの背景色を示します ここでウィジェットの背景色を設定しても 各ウィジェットコード内に allowtransparency="yes" を追加しなければ 正しく表示されません
13 2.3. ウィジェットに表示するインパクトレポートを変更する ウィジェットに表示されるインパクトレポートのテンプレートは プロジェクトごとに設定することが出来ます デフォルトでは 標準的なインパクトレポート が表示されます インパクトレポートのテンプレートを変更するには レポート 画面の インパクトレポート タブで設定します 詳しい手順は以下の通りです 1 テンプレートを表示する レポート 画面の インパクトレポート タブにある テンプレートを表示 リンクをクリックしてください 2 テンプレートを作成する 新規組織テンプレート ボタンをクリックしてください
14 3 テンプレートの内容を決めるテンプレートの名前を入力してください ( 必須 ) インパクトレポートに表示したいセクションを選択して 次 ボタンをクリックしてください 次ページでは各セクション内の詳細な情報に関して それぞれ細かく表示 非表示を設定することが出来ます 設定が終了したら 次 ボタンをクリックしてください
15 中略
16 4 プロジェクトに割り当てる ウィジェットで表示させたいプロジェクトを選択し プロジェクトのウィジェットテンプレートとしてこれを使用 にチェックをいれ 保存して終了 ボタンをクリックしてください