このサイトで JavaScript が必要です。

バージョン 1.0 (最新)

このコンテンツは役に立ちましたか？

Web SDK をはじめて使用する

このページは、Web ページ/アプリケーションにはじめてダッシュボードを表示する際の手順について説明します。

手順

手順 1 - プロジェクトを作成する

クライアントアプリケーションのスタイル設定

Visual Studio 2017 を開き、ASP.NET Core Web アプリケーションの新しいプロジェクトを作成します。

create new project dialog in Visual Studio 2017

以下のように .NET Framework および ASP.NET Core 2.2 を選択します。

select framework and mvc for project dialog in Visual Studio 2017

手順 1 サンプル git コミット

手順 2 - Reveal SDK のインストール

https://revealbi.io/jp から Infragistics Reveal SDK をダウンロードし、システムにインストールします。Visual Studio で ツール > オプション > Nuget パッケージマネージャー > パッケージソース を選択します。インストールされた SDK の Nuget フォルダーを指す新しいソースを追加します。

adding a new package source to the available package sources dialog

その後、パッケージソースを追加したものに変更して Nuget をインストールできます。

installing the Nuget dialog

preview changes dialog

手順 2 サンプル git コミット

手順 3 - サーバー構成の設定

プロジェクトに新しい Reveal SDK フォルダーを作成し、IRvealSdkContext インターフェースを実装する RevealSdkContext.cs クラスを追加します。

	using Infragistics.Sdk;
	using System;
	using System.IO;
	using System.Reflection;
	using System.Threading.Tasks;

	namespace Demo1.RevealSDK
	{
	    public class RevealSdkContext : IRevealSdkContext
	    {
	        public IRVDataSourceProvider DataSourceProvider => throw new NotImplementedException();

	        public IRVDataProvider DataProvider => throw new NotImplementedException();

	        public IRVAuthenticationProvider AuthenticationProvider => throw new NotImplementedException();

	        public Task<Stream> GetDashboardAsync(string dashboardId)
	        {
	            var resourceName = $"Demo1.Dashboards.{dashboardId}";
	            var assembly = Assembly.GetExecutingAssembly();
	            return Task.FromResult(assembly.GetManifestResourceStream(resourceName));
	        }

	        public Task SaveDashboardAsync(string userId, string dashboardId, Stream dashboardStream)
	        {
	            throw new NotImplementedException();
	        }
	    }
	}

上記のコードでは、Demo1.Dashboards がダッシュボードファイルが含まれる場所を示しているため、プロジェクトに新しいダッシュボードフォルダーを作成し、ここでは空のままにします。

これを行うには、Startup.cs の ConfigureServices メソッドに以下のコードを追加します。

	services.AddRevealServices(new RevealEmbedSettings
	{
	    CachePath = @"C:\Temp"
	}, new RevealSdkContext());

	services.AddMvc().AddReveal();

同じファイル内の必要な参照:

	using Demo1.RevealSDK;
	using Infragistics.Sdk;

手順 3 サンプル git コミット

問題が発生した場合は、サーバー SDK - セットアップと構成トピックを参照してください。

手順 4 - クライアントアプリケーションに Reveal を埋め込む

はじめにダッシュボードを準備します。このデモでは、Reveal のサンプル セクションの Marketing ダッシュボードを使用できますが、テーマは異なります。ダッシュボードを開き、編集モードに入ります。

enter edit mode of marketing sample dashboard in Reveal app

編集モードに入った後に [テーマ] ボタンをクリックします。

edit mode menu of the marketing dashboard

Rocky Mountain テーマを選択します。

rocky mountain theme in the dashboard themes menu

変更したダッシュボードを保存し、エクスポートします。

Marketing.rdash ダッシュボードファイルを手順 3 で作成したダッシュボードフォルダーへ移動し、Visual Studio でこのアイテムのビルドアクションを埋め込みリソースに設定します。

setting build action in marketing.rdash file properties

次に、新しいページ Marketing.cshtml を追加して、ダウンロードしたダッシュボードを可視化します。

	@{
	    ViewData["Title"] = "Marketing";
	}

	@section Scripts
	    {
	    <script type="text/javascript">
	        // Load dashboard in #revealView element
	    </script>
	}

	<section>
	    <div id="revealView" style="height:800px;"></div>
	</section>

次に、HomeController.cs に新しいアクションメソッドを追加します。

	public IActionResult Marketing()
	{
	    return View();
	}

Reveal が使用するサードパーティの参照の 1 つに Day.js があります。したがって、含まれる他のスクリプトとともに Layout.cshtml に参照を追加します。

	<script src="https://unpkg.com/dayjs"></script>

続行するには、プロジェクトの wwwroot フォルダーに新しい Reveal フォルダーを作成します。infragistics.reveal.js をコピーします。このファイルは、Reveal SDK のインストールフォルダーにあります。

そして、Day.js のスクリプトの後に Layout.cshtml でこのライブラリを参照します。

	<script src="~/Reveal/infragistics.reveal.js"></script>

同じファイル内のフッターセクションも削除し、新しいページのナビゲーションにリンクを追加します。

	<li class="nav-item">
	    <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Marketing">Marketing</a>
	</li>

Marketing.cshtml のスクリプトを、ダッシュボードをロードするためのロジックで更新しましょう。

	var dashboardId = "Marketing.rdash";
	var revealSettings = new $.ig.RevealSettings(dashboardId);

	$.ig.RevealUtility.loadDashboard(dashboardId, function (dashboard) {
	    revealSettings.dashboard = dashboard;
	    var revealView = new $.ig.RevealView("#revealView", revealSettings);
	}, function (error) {
	    // ここで発生する可能性があるエラーを処理します。
	});

ここでダッシュボードを実行しようとすると、RevealSdkContext.cs で例外が発生します。基本機能のみを使用しているため、このファイルを変更して、DataSourceProvider、DataProvider、AuthenticationProvider に対して null を返すようにします。

	public IRVDataSourceProvider DataSourceProvider => null;

	public IRVDataProvider DataProvider => null;

	public IRVAuthenticationProvider AuthenticationProvider => null;

最後に、Web ページを実行すると、ダッシュボードが表示されます。

問題が発生した場合は、クライアント SDK - セットアップと構成トピックを参照してください。

手順 5 - Reveal フォントの使用

Reveal アプリは Roboto フォントを使用します。アプリと同じ外観を実現するには、https://fonts.google.com/specimen/Roboto からフォントをダウンロードし、次の TTF ファイルをプロジェクトの wwwroot/css フォルダーへコピーします。

Roboto-Regular.ttf
Roboto-Bold.ttf
Roboto-Light.ttf
Roboto-Medium.ttf

次に、site.css　に以下のように参照を追加します。

@font-face {
   font-family: "Roboto-Regular";
   src: url("Roboto-Regular.ttf");
}

@font-face {
   font-family: "Roboto-Bold";
   src: url("Roboto-Bold.ttf");
}

@font-face {
   font-family: "Roboto-Light";
   src: url("Roboto-Light.ttf");
}

@font-face {
   font-family: "Roboto-Medium";
   src: url("Roboto-Medium.ttf");
}

フォントの読み込みを改善するには、infragistics.reveal.js　参照の横にある * _Layout.cshtml* で Google Web Font Loader への参照を追加します。

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>

最後に、Marketing.cshtml ページのスクリプトセクションを変更して、フォントローダーを利用します。

	WebFont.load({
	    custom: {
	        families: ['Roboto-Regular', 'Roboto-Bold', 'Roboto-Light', 'Roboto-Medium'],
	        urls: ['/css/site.css']
	    },
	    active: function () {
	        var dashboardId = "Marketing.rdash";
	        var revealSettings = new $.ig.RevealSettings(dashboardId);

	        $.ig.RevealUtility.loadDashboard(dashboardId, function (dashboard) {
	            revealSettings.dashboard = dashboard;
	            var revealView = new $.ig.RevealView("#revealView", revealSettings);
	        }, function (error) {
	            // ここで発生する可能性があるエラーを処理します。
	        }];
	    },
	});

Voila!

marketing dashboard loaded with the new font

手順 5 サンプル git コミット

手順 6 - クライアントアプリケーションのスタイル設定

デフォルトのテンプレートを使用する代わりに、クライアントアプリケーションのスタイルを設定できます。

HomeController.cs からプライバシーを削除し、Marketing にリダイレクトするようにインデックスを変更します。

	public IActionResult Index()
	{
	    return RedirectToAction("Marketing");
	}

また、Index.cshtml および Privacy.cshtml ファイルは使用されないため削除してください。Marketing.cshtml の <div> 要素のスタイル設定を削除します。

wwwroot に新しい img フォルダーを作成し、そこへ logo.png をコピーします。これは、こちらからダウンロードできます。

_Layout.cshtml で、以下の変更を行います。

*タイトルを Demo1 から Overview へ変更します。 *ヘッダーの後の div を削除します。 *ロゴ、セパレータ、タイトルを追加してヘッダーを変更します。

	<header>
	    <div class="header">
	        <img class="logo" src="~/img/logo.png" alt="logo" />
	        <span class="line" />
	        <h1>Overview</h1>
	    </div>
	</header>

site.css で、Roboto フォント用に追加したものを除くすべてのスタイルを削除し、ヘッダーにスタイルを追加します。

	/* Header
	-------------------------------------------------- */

	header {
	    display: flex;
	    width: 100%;
	    height: 70px;
	    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
	    background-color: #37405a;
	}

	img.logo {
	    width: 50px;
	    height: 50px;
	    margin: 10px;
	    float: left;
	}

	span.line {
	    float: left;
	    width: 1px;
	    height: 50px;
	    margin-top: 10px;
	    border: solid 1px #2b2e40;
	}

	h1 {
	    float: left;
	    padding-top: 12px;
	    padding-left: 20px;
	    height: 24px;
	    font-family: Roboto-Regular;
	    font-size: 20px;
	    font-weight: 400;
	    color: #ffffff;
	}

ボディのスタイル:

	/* Body
	-------------------------------------------------- */
	body {
	    display: flex;
	    flex-direction: column;
	    background-image: linear-gradient(to bottom, #30365a, #2b2e40);
	}

	html, body {
	    width: 100%;
	    height: 100%;
	}

	    body section {
	        display: block;
	        width: 100%;
	        height: 100%;
	        padding: 15px;
	    }

	#revealView {
	    height: 100%;
	}

結果は以下のようになります。

result after styling the client application

手順 6 サンプル git コミット

Reveal | ヘルプ トピック