--- title: "Base API - 高度なAPI" canonical: "https://wiki.yellowfin.co.jp/space/yfcurrent/1905363/Base%20API%20-%20%E9%AB%98%E5%BA%A6%E3%81%AAAPI" format: markdown --- > Macro (toc) ## 概要このAPIは、ページに「JsAPI/v3」JSファイルが含まれているページでのみ使用できます。以下の例を参照してください。 | | | --- | | <**script** src="[https://pathToYourYellowfinServer/JsAPI/v3](https://pathToYourYellowfinServer/JsAPI/v3)">**script**> | > ⚠️ このAPIは、ダッシュボードコードモードでは使用できません。高度なAPIには、Yellowfin APIを独自のウェブページにロードするのに役立つ多くの関数が含まれています。レポートおよびダッシュボードローダーAPIをロードする関数があり、[ダッシュボード](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1903715)および[レポート](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1903830)をロードできます。セッション管理を支援する関数もあります。 ### init() #### **リターン** Promise #### **説明** Base APIを初期化します。これは、APIがページに含まれている時に呼び出されます。ロードが終了した時点で、APIの使用がこのPromiseが解決するまで待機することを示すPromiseを返します。 #### **例** Yellowfin レポートAPIをページに含め、**init()** promiseが解決した後でレポートをロードします。 | | | --- | | <**script** src="[https://pathToYourYellowfinServer/JsAPI/v3](https://pathToYourYellowfinServer/JsAPI/v3)">**script**> <**div** id="reportDiv">**div**> <**script**> yellowfin.init().then(() => { //The Yellowfin base API has now loaded. Now load a report yellowfin.loadReport({ reportId: 'c83357db-8aef-4ec7-ab72-fce34de9ee77', element: document.querySelector('div#reportDiv'), }); }); **script**> | ### logoff() #### **リターン** なし #### **説明** 現在のユーザーセッションを終了します。 ### yellowfin.newSession(token, org);（Yellowfin新規セッション） #### リターン Promise #### 説明この関数は、現在のユーザーをログアウトし、渡されたwebサービスのセッショントークンを使用して、新規ユーザーをログインさせるためのリクエストをYellowfin JS APIに送信します。この関数は、セッショントークンとともに、オプションでクライアント組織IDも受け取ることで、ユーザーが特定のクライアント組織にログインできるようにします。ログインアクションが正常に完了すると、関数はPromiseを返し、ページ上のすべてのレポートまたはダッシュボードが再実行されます。 ### loadReport(reportOptions)（レポートのロード） #### リターン Promise #### 説明 init() promiseがロードするの待ち、渡されたオプションでレポートをロードします。レポートがロードされると、渡されたelement（要素）が追加され、レポートの実行が開始されます。 promiseが解決されると、[レポート](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1903830)オブジェクトは**.then()**関数に渡されます。promiseは、レポートの実行が開始される直前に解決されます。オプションオブジェクトの一部として受け入れられるオプションがいくつかあります。 ###### **reportId（レポートID） - 必須** **型：**String ロードするレポートのレポートUUIDです。これは、レポートヘッダーテーブルの公開UUIDです。 ###### **element（要素） - 必須** **型：**DOM Element、Selector String レポートに描画するelement（要素）です。DOM element、またはページからelementを選択するために使用されるselectorのどちらかになります。幅や高さが渡されない場合、レポートはelementの寸法に合わせて展開されます。 ###### **width（幅）** **型：**Number レポートをピクセル単位で描画する幅です。 ###### **height（高さ）** **型：**Number レポートをピクセル単位で描画する高さです。 ###### **filterValues（フィルター値）** **型：**Array[Object] 初期フィルター値を適用するために使用されるオブジェクトの配列です。フィルター値についての詳細は、[フィルター API](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1904368)を参照してください。オブジェクトには、次の情報が含まれます。 - **filterId** - 設定するフィルターのUUID、または名前です。 - **valueOne** - フィルターの最初の値です。 - **valueTwo** - フィルターの二番目の値です。Between（の間）、またはNot Between（の間ではない）フィルタータイプにのみ影響します。 - **valueList** - フィルター一覧に適用する値の配列です。 | | | --- | | [{ //Set a between filter filterId: '1c1e0878-3bd6-402b-bad8-98202e6b8fb1', valueOne: 15, valueTwo: 35 }] | ###### instanceName（インスタンス名） **型：**String レポートのインスタンスの識別子です。このプロパティが定義されない場合は、ランダムなIDが生成されます。つまり、インスタンス名を定義することなく同じレポートを複数回含めた場合、そのレポートは常に別のインスタンスになります。これを設定すると、同じインスタンスのレポートの複数のビューをロードできるようになります。 | | | --- | | //Load the report into two different elements yellowfin.loadReport({ reportId:'9617ada1-28bc-42ef-9c3f-8b40d3d1ae61', element: document.querySelector('div#firstReport'), instanceName: 'firstReport' }); yellowfin.loadReport({ reportId:'9617ada1-28bc-42ef-9c3f-8b40d3d1ae61', element: document.querySelector('div#secondReport'), instanceName: 'firstReport' }); | ###### showToolbar（ツールバーの表示） **型：**Boolean レポートツールバーを表示するかどうかを定義します。 | | | --- | | //Load the report with showToolbar not defined yellowfin.loadReport({ reportId:'9617ada1-28bc-42ef-9c3f-8b40d3d1ae61', element: document.querySelector('div#reportDiv'); }); //Load the report with showToolbar set to true yellowfin.loadReport({ reportId: '9617ada1-28bc-42ef-9c3f-8b40d3d1ae61', element: document.querySelector('div#reportDiv'), showToolbar: true }); | ![image](media://f0eedbf7-ce5e-47c5-906d-2d8b2b9d7106) または、showToolbarプロパティをfalseに設定します。 | | | --- | | //Load the report with showToolbar set to false yellowfin.loadReport({ reportId: '9617ada1-28bc-42ef-9c3f-8b40d3d1ae61', element: document.querySelector('div#reportDiv'), showToolbar: false }); | ![image](media://4e34b454-7294-4b80-81fa-d5fc327544ef) ###### showTitle（タイトルの表示） **型：**Boolean レポートのツールバーにレポートタイトルを表示するかどうかを定義します。デフォルト：true **showTitle** オプションをfalseに設定した場合： ![image](media://f85f758e-f294-42e7-9fcd-2b85a3317c06) | | | --- | | //Load the report with showTitle option set to false yellowfin.loadReport({ reportId: '9617ada1-28bc-42ef-9c3f-8b40d3d1ae61', element: document.querySelector('div#reportDiv'), showTitle: false }); | ###### showInfo（詳細の表示） **型：**Boolean レポートのツールバーに詳細オプションを表示するかどうかを定義します。デフォルト：true このオプションをfalseに設定した場合： ![image](media://78f273d7-d34e-445c-8f9d-5367f22412ae) | | | --- | | //Load the report with showInfo option set to false yellowfin.loadReport({   * * reportId: '9617ada1-28bc-42ef-9c3f-8b40d3d1ae61', * * element: document.querySelector('div#reportDiv'), * * showInfo: false }); | ###### showFilter（フィルターの表示） **型：**Boolean レポートのツールバーにフィルターオプションを表示するかどうかを定義します。デフォルト：true このオプションをfalseに設定した場合： ![image](media://2f93a588-fce1-4975-b87a-48925abad8f0) | | | --- | | //Load the report with showFilter option set to false yellowfin.loadReport({   * * reportId: '9617ada1-28bc-42ef-9c3f-8b40d3d1ae61', * *   element: document.querySelector('div#reportDiv'), * * showFilter: false }); | ###### showExport（エクスポートの表示） **型：**Boolean レポートのツールバーにエクスポートオプションを表示するかどうかを定義します。エクスポートオプションを使用することで、レポートをcsv、xls、pdf、txt、docなどの外部ファイル形式にエクスポートすることができます。 **showExport** パラメーターをfalseに設定する場合、ツールバー内のエクスポートアイコンは削除されます。 ![image](media://57ca3c34-9cf7-443f-b89d-78559e4aaed8) | | | --- | | //Load the report with showExport option set to false yellowfin.loadReport({ * * reportId: '9617ada1-28bc-42ef-9c3f-8b40d3d1ae61', * * element: document.querySelector('div#reportDiv'), * *   showExport: false }); | ###### showShare（共有の表示） **型：**Boolean レポートのツールバーに共有オプションを表示するかどうかを定義します。デフォルトはtrueに設定されています。 | | | --- | | //Load the report with showShare option set to false yellowfin.loadReport({   * * reportId: '9617ada1-28bc-42ef-9c3f-8b40d3d1ae61',   * * element: document.querySelector('div#reportDiv'), * * showShare: false }); | ###### showDisplayToggle（表示トグルの表示） **型：**Boolean レポートツールバーにレポートのチャート/テーブルオプションを表示するかどうかを決定します。デフォルトはtrueです。このオプションをfalseに設定した場合 ![image](media://8c8b2250-708a-4c33-a19b-59ab28a741a7) | | | --- | | //Load the report with this option set to false yellowfin.loadReport({ * * reportId: '9617ada1-28bc-42ef-9c3f-8b40d3d1ae61', * * element: document.querySelector('div#reportDiv'), * * showReportDisplayToggle: false }); | 例レポートをロードして、その名前を出力します。 | | | --- | | yellowfin.loadReport({ reportId: aReportId,    element: elementToRenderTo }).then(report => {
//Some code to execute when the report has loaded
console.log([report.name](http://report.name) + ‘ has finished loading’); }); | ###### showExportOptions（エクスポートオプションの表示） **型：**Boolean レポートをエクスポートする際に、エクスポートオプションパネルを表示するかどうかを制御します。デフォルトでは、ユーザーに設定を促すことなく、既存のエクスポートオプションを使用してレポートがエクスポートされます。 | | | --- | | //Load the report with this option set to true yellowfin.loadReport({ *     * reportId: '9617ada1-28bc-42ef-9c3f-8b40d3d1ae61', *     * element: document.querySelector('div#reportDiv'), *     * showExportOptions: true }); | 例レポートを読み込み、その名前を印刷します: | | | --- | | yellowfin.loadReport({ reportId: aReportId, element: elementToRenderTo }).then(report => {
//Some code to execute when the report has loaded
console.log([report.name](http://report.name) + ‘ has finished loading’); }); | #### インタラクションインタラクションオブジェクトは、特定のレポートのビジュアライゼーションでどのインタラクションを利用可能にするかを定義します。これにより、Yellowfin レンダラーに対して、そのビジュアライゼーション内でユーザーが使用できる機能を指定できます。同じレポートを表す複数のelement（要素）があり、インタラクションを無効にしたい場合、表示しているすべてのelement（要素）でこれを無効にする必要があります。例えば、最初のelement（要素）のドリルダウンを無効にしてから、二番目のelement（要素）のドリルダウンを無効にしなかった場合、ユーザーは依然として二番目のelement（要素）のドリルダウンを実行できます。デフォルトでは、明示的にfalseに設定されていないインタラクションはすべて有効と見なされ、レポートで許可されている場合は表示されます。 **drillDown** ドリルダウン機能を無効にできます。 **drillAnywhere** ドリルエニウェア機能を無効にできます。 **drillThrough** ドリルスルー機能を無効にできます。 **unitSelection** 単位選択機能を無効にできます。 **brushing** ブラッシング機能を無効にできます。 **timeSlider** タイムスライダー機能を無効にできます。 **drillBreadcrumbs** パンくずリスト機能を無効にできます。 **seriesSelection** シリーズ選択機能を無効にできます。 **annotations** 注釈機能を無効にできます。 ###### 例 loadReportの使用時にレポート上のすべてのユーザーインタラクションを無効にするには、以下を参照してください。 | | | --- | | yellowfin.loadReport({
reportId: ‘a report id’,
interactions: {
drillDown: false,
drillAnywhere: false,
drillThrough: false,
unitSelection: false,
brushing: false,
timeSlider: false,
drillBreadcrumbs: false,
seriesSelection: false,
annotations: false
},
element: document.querySelector(‘#reportElement’)
}). | ### loadDashboard(dashboardOptions) #### リターン Promise #### 説明 init()promiseがロードされるのを待ち、渡されたオプションでダッシュボードをロードします。ダッシュボードがロードされると、渡されたelement（要素）に追加され、ダッシュボード上のコンテンツの実行が開始されます。 **dashboardOptions**オブジェクトには、いくつかのパラメーターを含めることができます。 ###### dashboardUUI（ダッシュボードUUID） - 必須 **型：**String ロードするダッシュボードの公開UUIDです。 ###### element（要素） - 必須 **型：**DOM Element、Selector String ダッシュボードに描画するelement（要素）です。DOM element、またはページからselectorの最初のインスタンスを選択するために使用されるselectorのどちらかになります。幅や高さが渡されない場合、ダッシュボードはelement（要素）の寸法に合わせて表示されます。 ###### filterValues（フィルター値） **型：**Array[Object] ダッシュボードの初期フィルター値を適用するために使用されるオブジェクトの配列です。フィルター値についての詳細は、[フィルター API](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1904368)を参照してください。オブジェクトには、次の情報が含まれます。 - **filterId** - 設定するフィルターのUUID、または名前です。 - **valueOne** - フィルターの最初の値です。 - **valueTwo** - フィルターの二番目の値です。Between（の間）、またはNot Between（の間ではない）フィルタータイプにのみ影響します。 - **valueList** - フィルター一覧に適用する値の配列です。 | | | --- | | [{ //Set a between filter    filterId: '1c1e0878-3bd6-402b-bad8-98202e6b8fb1',    valueOne: 15,    valueTwo: 35 }] | ###### showToolbar（ツールバーの表示） **型：**Boolean ダッシュボードのツールバーを表示するかどうかを定義します。デフォルトではtrueに設定されています。 | | | --- | | //Load the dashboard with showToolbar not defined yellowfin.loadDashboard({ dashboardUUID:'1e68d9cc-fa5a-44e2-816d-782aa40ceeae',    element: document.querySelector('div#dashboardDiv'); }); //Load the dashboard with showToolbar set to true yellowfin.loadDashboard({ dashboardUUID: '1e68d9cc-fa5a-44e2-816d-782aa40ceeae',    element: document.querySelector('div#dashboardDiv'),    showToolbar: true }); | 以下は、ツールバーが表示されたダッシュボードです。 ![image](media://e4c05c55-3183-440c-a026-53b806cc1a5d) しかし、**showToolbar** プロパティをfalseに設定した場合： | | | --- | | //Load the dashboard with showToolbar set to false yellowfin.loadDashboard({     dashboardUUID: '1e68d9cc-fa5a-44e2-816d-782aa40ceeae',      element: document.querySelector('div#dashboardDiv'),      showToolbar: false }); | ![image](media://2b03fabf-e6cf-42d6-953a-477fe6b69fdb) ###### showInfo（詳細の表示） **型：**Boolean ダッシュボードのツールバーに詳細オプションを表示するかどうかを定義します。デフォルト：true このオプションをfalseに設定した場合： ![image](media://2625c80c-46e6-442b-a259-bf193b98eeb7) ###### showShare（共有の表示） **型：**Boolean ダッシュボードのツールバーに共有オプションを表示するかどうかを定義します。デフォルトはtrueに設定されています。このオプションをfalseに設定した場合： ![image](media://1ff45148-50e3-43f7-9207-7314c35f1778) | | | --- | | //Load the dashboard with showShare option set to false yellowfin.loadDashboard({ dashboardUUID: '1e68d9cc-fa5a-44e2-816d-782aa40ceeae',    element: document.querySelector('div#dashboardDiv'),    showShare: false }); | ###### showFilters（フィルターの表示） **型：**Boolean ダッシュボードのツールバーにフィルターオプションを表示するかどうかを定義します。デフォルトはtrueに設定されています。このオプションをfalseに設定した場合： ![image](media://de481485-ce5d-4447-805f-90709b176d55) | | | --- | | //Load the dashboard with showFilter option set to false yellowfin.loadDashboard({ dashboardUUID: '1e68d9cc-fa5a-44e2-816d-782aa40ceeae',    element: document.querySelector('div#dashboardDiv'),    showFilter: false }); | ###### scaleCanvasTabs（キャンバスタブのスケール） **型：**Boolean キャンバスタブをスケールするかどうかを定義します。デフォルトはtrueに設定されています。これをfalseに設定した場合、キャンバスタブは作成された通りのサイズで表示されます。この設定は、キャンバスタブを含まないサブタブでは無効です。 | | | --- | | //Load the dashboard with scaleCanvasTabs option set to false yellowfin.loadDashboard({ dashboardUUID: '1e68d9cc-fa5a-44e2-816d-782aa40ceeae',    element: document.querySelector('div#dashboardDiv'),    scaleCanvasTabs: false }); | ###### showGlobalContentContainer（グローバルコンテンツコンテナーの表示）ダッシュボードの描画時にグローバルコンテンツコンテナーを表示するかどうかを定義します。 | | | --- | | //Load the dashboard with showGlobalContentContainer option set to false yellowfin.loadDashboard({ dashboardUUID: '1e68d9cc-fa5a-44e2-816d-782aa40ceeae',    element: document.querySelector('div#dashboardDiv'),    showGlobalContentContainer: false }); | ###### showExportOptions(エクスポートオプションを表示) ダッシュボードをエクスポートする際に、エクスポートオプションパネルを表示するかどうかを制御します。デフォルトでは、ダッシュボードは既存のエクスポートオプションでエクスポートされ、ユーザーに設定を促すことはありません。 | | | --- | | //Load the dashboard with showExportOptions option set to true yellowfin.loadDashboard({ dashboardUUID: '1e68d9cc-fa5a-44e2-816d-782aa40ceeae', element: document.querySelector('div#dashboardDiv'), showExportOptions: true }); | ## 高度なAPIを使用したストーリーの組み込み Yellowfin 9.4から、ストーリーの公開UUIDを使用して、ストーリーを組み込むことができるようになりました（より詳細な情報は、[Yellowfin コンテンツの組み込みでのJS API](https://yellowfinjp.atlassian.net/wiki/spaces/yfcurrent/pages/1906054)ページを参照してください）。高度なAPIツールセットを使用することで、ストーリー組み込み時に利用できるオプションを拡張するため、ニーズに合わせてストーリーのルックアンドフィールを調整することができます。共同編集者を非表示にしたり、組み込まれたストーリーの幅を制限したりすることができますが、これは高度なAPIを使用することで実現できます。 ### 高度なAPI 新しいオブジェクトであるストーリーが、Yellowfin オブジェクトに追加されます。次のコードは、高度なAPIを使用して、ストーリーを読み込む一般的な方法の例です。 ```javascript

``` ### yellowfin.stories 現在、yellowfin.storiesは、上記のようにストーリーを読み込むひとつの関数（loadStory）しか含めることができません。しかし、loadStory関数には複数のオプションがあります。その関数およびオプションの概要を以下に示します。 ### loadStory(options);（ストーリーの読み込み） #### 詳細 **リターン：**Promise **Promise パラメーター：**storyAPI #### 説明この関数は、渡されたoptions.storyUUIDに関連するストーリーを読み込み、完了すると解決されたPromiseを返します。解決されたPromiseは、storyAPI オブジェクトを渡します。オプションオブジェクトに追加できる値は、以下の通りです。 ### storyUUID（ストーリーUUID） #### 詳細 **埋め込みリンクオプション：**?StoryUUID=uuid（これは組み込むストーリーの公開UUIDです。これがクエリー文字列の後ろの方に表示される場合は、忘れずに?を&に変更してください） #### 説明このオプションは必須です。これが渡されない場合は、loadStoryの呼び出しは失敗します。 ### element（要素）この関数の埋め込みリンクオプションはありません。これは、ストーリーをレンダリングする要素です。 ### showToolbar（ツールバーの表示） #### 詳細 **埋め込みリンクパラメーター：**&showToolbar=ture（または、これが文字列で最初の要素の場合、他の文字列のように、接頭辞を&から?に変更します） **デフォルト値：**true #### 説明このオプションは、組み込みストーリーでJS API ツールバーを表示するかどうかを決定します。 ### showInfo（詳細の表示） #### 詳細 **埋め込みリンクパラメーター：**&showInfo=true（または、これが文字列で最初の要素の場合、他の文字列のように、接頭辞を&から?に変更します） **デフォルト値：**true #### 説明このオプションは、組み込みストーリーの詳細ドロップダウンを表示するかどうかを決定します。 ### showExport（エクスポートの表示） #### 詳細 **埋め込みリンクパラメーター：**&showExport=true（または、これが文字列で最初の要素の場合、他の文字列のように、接頭辞を&から?に変更します） **デフォルト値：**true #### 説明このオプションは、ストーリーの閲覧者に、組み込みストーリーのPDFエクスポートオプションを表示するかどうかを決定します。 ### showBannerImage（バナーイメージの表示） #### 詳細 **埋め込みリンクパラメーター：**&showBannerImage=true（または、これが文字列で最初の要素の場合、他の文字列のように、接頭辞を&から?に変更します） **デフォルト値：**true #### 説明このオプションは、組み込みストーリーのバナーイメージを表示するかどうかを決定します。 ### showHeader（ヘッダーの表示） #### 詳細 **埋め込みリンクパラメーター：**&showHeader=true（または、これが文字列で最初の要素の場合、他の文字列のように、接頭辞を&から?に変更します） **デフォルト値：**true #### 説明このオプションは、組み込みストーリーのヘッダーを表示するかどうかを決定します。ストーリーのヘッダーには、記事を書いた人とその公開日、記事を読んだ人と拍手の数が表示されます。これらを表示するには、このshowHeaderオプションを含め、trueに設定しなくてはいけません。こちらのオプションをtrueに設定し、含めることのできる4つの要素をオフにすると、空白のバナーが表示されます。 ### showAuthor（記事を書いた人の表示） #### 詳細 **埋め込みリンクパラメーター：**&showAuthor=true（または、これが文字列で最初の要素の場合、他の文字列のように、接頭辞を&から?に変更します） **デフォルト値：**true #### 説明このオプションは、組み込みストーリーに、その記事を書いた人を表示するかどうかを決定します。こちらがtrueに設定されていたとしても、showHeaderオプションもtrueに設定されている場合のみ、記事を書いた人が表示されます。 ### showDateContainer（日付コンテナの表示） #### 詳細 **埋め込みリンクパラメーター：**&showDateContainer=true（または、これが文字列で最初の要素の場合、他の文字列のように、接頭辞を&から?に変更します） **デフォルト値：**true #### 説明このオプションは、組み込みストーリーの公開日を表示するかどうかを決定します。こちらがtrueに設定されていたとしても、showHeaderオプションもtrueに設定されている場合のみ、公開日が表示されます。 ### showLikeButton（拍手ボタンの表示） #### 詳細 **埋め込みリンクパラメーター：**&showLikeButton=true（または、これが文字列で最初の要素の場合、他の文字列のように、接頭辞を&から?に変更します） **デフォルト値：**true #### 説明このオプションは、ストーリーに拍手ボタンを表示するかどうかを決定します。こちらがtrueに設定されていたとしても、showHeaderオプションもtrueに設定されている場合のみ、拍手ボタンが表示されます。認証されていないゲストは、このボタンを使用できません。 ### showReadBy（ストーリーを読んだ人の表示） #### 詳細 **埋め込みリンクパラメーター：**&showReadBy=true（または、これが文字列で最初の要素の場合、他の文字列のように、接頭辞を&から?に変更します） **デフォルト値：**true #### 説明このオプションは、組み込みストーリーを読んだ人の一覧を表示するかどうかを決定します。こちらがtrueに設定されていたとしても、showHeaderオプションもtrueに設定されている場合のみ、ストーリーを読んだ人の一覧が表示されます。 ### showStoryTitle（ストーリータイトルの表示） #### 詳細 **埋め込みリンクパラメーター：**&showStoryTitle=true（または、これが文字列で最初の要素の場合、他の文字列のように、接頭辞を&から?に変更します） **デフォルト値：**true #### 説明このオプションは、組み込みストーリーのタイトルを表示するかどうかを決定します。 ### showFooter（フッターの表示） #### 詳細 **埋め込みリンクパラメーター：**&showFooter=true（または、これが文字列で最初の要素の場合、他の文字列のように、接頭辞を&から?に変更します） **デフォルト値：**true #### 説明このオプションは、組み込みストーリーのフッターを表示するかどうかを決定します。ストーリーのフッターには、共同編集者が表示されます。共同編集者の一覧を表示するには、showFooterオプションを含めて、trueに設定しなくてはいけません。 ### showContributors（共同編集者の表示） #### 詳細 **埋め込みリンクパラメーター：**&showContributors=true（または、これが文字列で最初の要素の場合、他の文字列のように、接頭辞を&から?に変更します） **デフォルト値：**true #### 説明このオプションは、ストーリーの組み込み時に、共同編集者の一覧を表示するかどうかを決定します。こちらがtrueに設定されていたとしても、showFooterオプションもtrueに設定されている場合のみ、共同編集者の一覧が表示されます。 ### width（幅） #### 詳細 **埋め込みリンクパラメーター：**&width=xxx（xxxには数字が入ります。これが文字列で最初の要素の場合、他の文字列のように、接頭辞を&から?に変更します） **デフォルト値：**element（要素）の幅 #### 説明このオプションは、組み込みストーリー全体の幅を設定します。 ### showExportOptions(エクスポートオプションを表示) #### 詳細 **埋め込みリンクパラメーター：**&showExportOptions=true（または、これが文字列で最初の要素の場合、他の文字列のように、接頭辞を&から?に変更します） **デフォルト値：**false #### 説明このオプションは、ストーリーをエクスポートする際にエクスポートオプションパネルを表示するかどうかを決定します。デフォルトでは、ユーザーに設定を促すことなく、既存のエクスポートオプションでストーリーがエクスポートされます。このオプションがtrueに設定されていても、showExportオプションがtrueに設定されているか、または省略されている場合のみ効果があります。 ### storyWidth（ストーリーの幅） #### 詳細 **埋め込みリンクパラメーター：**&storyWidth=xxx（xxxには数字が入ります。これが文字列で最初の要素の場合、他の文字列のように、接頭辞を&から?に変更します） **デフォルト値：**width（幅）の4分の3 #### 説明このオプションは、組み込みストーリー本文の幅を設定します（バナーは含みません）。ストーリーの大部分のコンテンツの幅は、最大幅（例：ワイドモードのイメージ）で表示するように設定されていない限り、200pxより小さくなります。 ### bannerImageHeight（バナーイメージの高さ） #### 詳細 **埋め込みリンクパラメーター：**&bannerImageHeight=xxx（xxxには数字が入ります。これが文字列で最初の要素の場合、他の文字列のように、接頭辞を&から?に変更します） **デフォルト値：**300px #### 説明このオプションは、バナーイメージコンテナに適用されるカスタマイズされた高さを設定します。最適な結果を得るために、この設定を使用する場合は、バナーの幅を設定することも推奨します。 ### bannerImageWidth（バナーイメージの幅） #### 詳細 **埋め込みリンクパラメーター：**&bannerImageWidth=xxx（xxxには数字が入ります。これが文字列で最初の要素の場合、他の文字列のように、接頭辞を&から?に変更します） **デフォルト値：**width（幅）の値 #### 説明このオプションは、バナーイメージに適用されるカスタマイズされた幅を設定します。最適な結果を得るために、この設定を使用する場合は、バナーの高さを設定することも推奨します。 ### loadStoryAPI()（ストーリーAPIの読み込み）ストーリーを読み込むことができるように、StoryAPIを読み込み、API読み込み時に解決されるPromiseを返します。 ### loadStory(options)（ストーリーの読み込み（オプション）） **これは、yellowfin.stories.loadReportに対する単なるパススルーオプションです。渡されるオプションは同じである必要があり、ストーリーの読み込みを試行する前に、ストーリーオブジェクトが読み込まれることを保証するだけです。 ### StoryAPIで利用できる関数 - likeStory() - unlikeStory() - toggleLike(shouldLike:boolean => デフォルト値は現在の値の逆数 - getCurrentLikeStatus(successFunction: 現在のステータスを受信した時に呼び出す関数）=> サーバからステータスを取得 - storyContributors() - storyReaders() **例：** ```javascript src="<%=YF URL%>/JsAPI/v3?StoryUUID=<%=Story Publish UUID%>&showHeader=false&bannerImageWidth=500"> ``` **高度なAPIの例：** HTML： ```xml

``` JavaScript： ```javascript window.yellowfin.loadStoryAPI().then(() => { window.yellowfin.stories.loadStory( { storyUUID: '<%=Story Publish UUID%>', element: 'div#storyContainer' } ).then((storyAPI) => { console.log(storyAPI); window.storyAPI = storyAPI; } ); }); ``` ## 高度なAPIによるガイド付きNLQの設定 JS APIには、ガイド付きNLQを設定するために2つの方法があります。 - 高度なAPI経由 - 組み込みリンク経由 ### 高度なAPI 高度なAPIは、多くの複雑なオブジェクトが導入されており、さまざまなガイド付きNLQビューを設定方法ができます。シンプルなアプローチは： | | | --- | | yellowfin.loadNLQ(); | これにより、ガイド付きNLQライトボックスが組み込みページに読み込まれ、アプリケーション内でネイティブに機能するのと同じように機能するようになります。このアプローチは、下記の設定がデフォルトとして使用されます。 | | | --- | | contentIntegrationOptions: { controls: ['SAVE'] } When you called yellowfin.loadNLQ(); you are essentially calling: yellowfin.loadNLQ({ contentIntegrationOptions: { controls: ['SAVE'] } }); | 高度なAPIを使用しているガイド付きNLQを読み込む際に、下記のオプションを定義することができます。 ### element #### 詳細 **タイプ**：DOM Element Or String #### 説明このオプションを使って、ガイド付きNLQUIがレンダリングされているelementを定義します。文字列を渡した場合、JS APIはdocument.querySelector(stringValue)を使用して、ページからelementを取得しようとします。 | | | --- | | yellowfin.loadNLQ({ element: document.querySelector(‘#myElement’) }); | ガイド付きNLQのアイテムがelementに読み込まれます。文字列またやDOM elementが渡されない場合、ガイド付きNLQ UIはライトボックスに読み込まれます。 **注意：**この方法でelementを定義した場合、NLQ UIでは「閉じる」ボタンが非表示になります。 ### contentIntegration #### 詳細 **タイプ**：Object #### 説明ユーザーが利用てきるコンテンツ統合オプションを定義します。このオブジェクトは、定義されるいくつかのサブオブジェクトがあります（詳細およびデフォルトについては以下を参照してください）。これにより、統合コントロールの配列を定義することができます。下記の例のように、SAVEとADD_TOのコントロールが配列に含まれています。 #### controls **タイプ**: String[] | | | --- | | yellowfin.loadNLQ({ contentIntegrationOptions: { controls: [‘SAVE’, ‘ADD_TO’] } }); | この配列で渡せる値は、 #### SAVE control このSave controlは、このクエリか完了した後に「保存」ボタンを表示します。ユーザーがレポートを作成する権限を持っていない場合は、SAVEが定義されていてもこのオプションは表示されません。 ![image](media://fff30531-270b-47c1-b3ad-bcb681f70589) | | | --- | | yellowfin.loadNLQ({ contentIntegrationOptions: { controls: [‘SAVE’] } }) | #### ADD_TO control このADD＿TOは、権限を持ったユーザーがガイド付きNLQで得た回答をストーリー、ダッシュボード、プレゼンテーションに追加する「追加」ボタンを表示します。 ![image](media://07740635-6fd9-4a7a-8405-cf8f61e16023) | | | --- | | yellowfin.loadNLQ({ contentIntegrationOptions: { controls: [‘SAVE’, ‘ADD_TO’] } }); | > ⚠️ ガイド付きNLQの回答は、実際にはレポートです。そのため、ADD_TOコントロールには、SAVEコントロールも一緒に定義する必要があります。SAVEなしでADD_TOを渡した場合、どちらのオプションも表示されません。 ### showWelcome #### 詳細 **タイプ**：String #### 説明このStringは、ウェルカムスプラッシュス画面を表示させるかを決定します。 ![image](media://a51d8323-ced3-4046-a291-998d5ef1d4f2) 3つの選択肢があります。 #### ALWAYS このオプションは、ユーザーが「了解」のチェックボックスにチェックを入れたかどうかにかかわらず、NLQビューが初期化されるたびにウェルカムスプラッシュ画面が表示させます。 #### NEVER このオプションは、ウェルカムスプラッシュ画面を表示させません。 #### NORMAL このオプションは、ユーザーが「了解」のチェックボックスをチェックするまで、ガイド付きNLQをつかう度にウェルカムスプラッシュ画面を表示させます。これがデフォルトとなっています。値が渡されない場合、デフォルト値はNORMALとなります。 ### popup #### 詳細 **タイプ：**Boolean #### 説明 popupがtrueに設定されている場合、elementオプションの値に関わらず、NLQ UIはライトボックスに表示されます。elementオプションが設定されている場合でも、それは無視されます。 popupがfalseに設定されていて、elementオプションがnullではない場合、NLQ UIはライトボックスに表示されません。 popupがfalseに設定されていて、elementオプションがnullの場合、NLQ UIはライトボックスに表示されます。 ### viewUUID #### 詳細 **タイプ：**String #### 説明このStringは、ユーザーが利用できるガイド付きNLQ有効のビューのUUIDです。このStringが渡され、そのビューがユーザーにとって有効な場合、ユーザーがビューを選択する画面はスキップされます。渡されたUUIDが、そのユーザーがアクセス可能なビューと一致しない場合は、ビューを選択する画面が表示されます。 ### Events ガイド付きNLQオブジェクトは、ユーザーのアクションとYellowfin サーバー上で完了するプロセスに基づいて、いくつかのイベントがトリガーされます。 | | | --- | | yellowfin.loadNLQ().then(nlq => { nlq.addEventListener(‘eventName’, eventCallbackFunction); }); | 以下のEventsがトリガーされることがあります。 #### reportCreated これは、有効なビジュアライゼーションが作成されたときにトリガーされます。これにより、Guided NLQオブジェクトのレポートオブジェクトと、これの以前の値が存在する場合はそれを含むイベントが発生します。ほとんどの場合、previousValueオブジェクトはnullになります。しかし、ユーザーが「再開」をクリックした場合、reportCreatedがトリガーされると、以前のバージョンが上書きされる可能性があります。 Eventの一環として、以下のデータが提供されます。 - **report**: 　ガイド付きNLQによって作成されたレポートAPI #### runQueryStart ユーザーが「質問する」のボタンをクリックしたときにトリガーされます。このオブジェクトは、質問に関する情報は提供しません。ただ、質問がされているだけです。 #### runStatusUpdated ユーザーが質問の一部を追加したり削除したときにトリガーされます。質問が実行可能かどうかの情報を提供します。 - **isRunnable** (boolean) : 質問が実行可能な場合はTrue。実行不可能な場合はFalse。 - **detailedMessage** (String) : 質問が実行できない理由を詳しく説明するメッセージ。isRunnableがtrueの場合、このstringは空になります。 - **Error** (Object) : error_idと、レポートが実行できない理由を示すメッセージを含むエラーオブジェクト。質問が実行可能であれば、これはfalseになります。 #### reset ユーザーが「再開」ボタンをクリックしたときにトリガーされます。 ![image](media://66e81dea-2601-4fae-b96a-3643702c74e8) #### viewChanged ユーザーが質問をするためのビューを選択したときにトリガーされます。以下の情報が提供されます。 - **uuid** (String) : 選択されたビューのUUID - **previous** (String) : 一つ前に選択されたビューのUUID。一つ前に選択されたビューがない場合はnull。 #### reportSaved ユーザーが（［保存］ボタンから）「レポートとして保存」ダイアログボックスにアクセスし、レポートの保存に成功したときにトリガーされます。以下の情報が提供されます。 - **chartId** (Integer) : 作成されたグラフのID - **description** (String) : ドラフトとして保存されたレポートの説明 - **isTable** (Boolean) : 作成されたレポートに表があるかどうか - **name** (String) : レポート名 - **reportId** (Integer) : レポートのID - **reportUUID** (String) : レポートのUUID レポート UUIDは、レポートを読み込んでページの別の場所に表示したい場合に使用します。このイベントは防ぐことができ、防ぐことができた場合、"Do you want to go to report" ポップアップは表示されませんが、レポートはYellowfinに保存されます。