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

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.8.0/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.8.0/infragistics.reveal.js"></script>
</body>
</html>

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

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

<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.8.0/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 にあります。