メインコンテンツまでスキップ

Reveal SDK for HTML/JavaScript で作業を開始

手順 1 - HTML ファイルの作成

1 - お気に入りのコード エディターを開き、新しい HTML ファイルを作成し、index.html という名前でファイルを保存します。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reveal Sdk - HTML/JavaScript</title>
</head>
<body>

</body>
</html>

手順 2 - Reveal JavaScript API の追加

1 - index.html ファイルを変更し、ページの下部に (</body> 終了タグの直前) infragistics.reveal.js スクリプトを含めます。

<script src="https://dl.revealbi.io/reveal/libs/1.6.4/infragistics.reveal.js"></script>

2 - 残りの Reveal JavaScript API 依存関係をインストールします。

  • Jquery 2.2 またはそれ以降
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  • Day.js 1.8.15 またはそれ以降
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>

最終の index.html ファイルは以下のようになります。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reveal Sdk - HTML/JavaScript</title>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script src="https://dl.revealbi.io/reveal/libs/1.6.4/infragistics.reveal.js"></script>
</body>
</html>

手順 3 - Reveal ビューの初期化

1 - index.html ファイルを変更し、開始 <body> タグの後に新しい <div> タグを追加して、idrevealView に設定します。

<div id="revealView" style="height: 920px; width: 100%;"></div>

2 - index.html ファイルの最後に JavaScript の Script タグを追加し、revealView を初期化します。

<script type="text/javascript">
var revealView = new $.ig.RevealView("#revealView");
</script>

次に、新しい $.ig.RevealView を作成し、#revealView セレクターを渡すことで、RevealView の新しいインスタンスを作成します。

最終の index.html ファイルは以下のようになります。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reveal Sdk - HTML/JavaScript</title>
</head>
<body>
<div id="revealView" style="height: 920px; width: 100%;"></div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script src="https://dl.revealbi.io/reveal/libs/1.6.4/infragistics.reveal.js"></script>

<script type="text/javascript">
var revealView = new $.ig.RevealView("#revealView");
</script>
</body>
</html>
注意

クライアント アプリは、クライアントが別の URL でホストしている場合、$.ig.RevealSdkSettings.setBaseUrl("url-to-server"); をダッシュボードをホストしているサーバー アドレスに設定する必要があります。

手順 4 - アプリケーションの実行

index.html ファイルをダブルクリックしてデフォルトのブラウザーで Web ページを起動します。

完了しました! 最初の Reveal SDK アプリケーションを作成しました。

コードの取得

このサンプルのソース コードは GitHub にあります。