- SAP Managed Tags
本ブログシリーズはSAP Analytics CloudのPlanning機能をこれから学ぶ方を対象とし、予算計画などの一連の予算管理業務に必要なSAP Analytics Cloudのそれぞれの機能の特徴や要点をご紹介します。
※機能の詳細ついてはSAP Help Portalをご参照ください。
※ SAP Analytics Cloudは、四半期に１度のペースで製品のバージョンアップが実施されます。そのため今後のバージョンアップにより、本ブログで紹介する画面キャプチャや、操作が異なる可能性があことをご了承ください。（本ブログは2024年11月に作成しています。）
本ブログでは、SAP Analytics Cloudにおけるスクリプトについてご紹介します。
目次
- 概要
- CSS
- スクリプト言語および文法
- イベント
- APIs
- デバッグ
- 参考例：ベストプラクティス―チャートとテーブルの切り替え
- 計画業務目線で有用なスクリプト機能の具体的な利用ケース
概要
SAP Analytics Cloud（SAC） Planningでダッシュボードを開発する際に、データアクション、アロケーション、マルチアクションなど、いわゆる標準機能がよく使われています。運用・保守しやすいメリットがある一方、標準機能に運用をあわせる必要があるため、細かい要件をあきらめる必要があるでしょう。スクリプトを使用した開発なら、細かい要件に合わせて機能の作りこみが可能ですが、運用と保守が複雑化する恐れがあります。上記のトレードオフを考慮して、プロジェクトのスタート時点でダッシュボード開発の方針を決める必要がありますが、一つの判断材料として、このブログではスクリプト機能でのダッシュボードの開発のメリットにフォーカスして概要を説明します。
CSS
１．CSS概要
SAP Analytics Cloudでは、CSSを利用して視覚的な要素を調整することができます。グローバルデフォルトとして、または個別のウィジェット、ポップアップ、もしくはページに対して、複数の CSS クラスを定義できます。これにより、ストーリーのスタイルの柔軟性が向上します。スタイル設定は CSS 標準に準拠しており、スタイルパネルまたはテーマ設定で提供される既存のスタイル設定には制限されなくなりました。
２．利用方法
下記のいずれかの方法で、CSSを編集・記述できます。
①利用方法１
Step１．「アウトライン」から、 グローバル設定の右側にある(CSSの編集) を選択します。
Step２．ドロップダウンリストからウィジェットタイプを選択し、CSSを記述します。
➁利用方法２
Step１．ツールバーの書式で、「CSS の編集」を選択します。
Step２．利用方法１と同様。
３．例（１）- ボタンのCSSクラスを定義する
標準機能ではユーザの操作によって画面のスタイルが変更するのが実現できませんが、CSS機能を使用して下記のボタンの作成ができ、ユーザエクスペリエンスの向上が期待できます。
Step１．
ドロップダウンリストからウィジェットタイプをボタンに選択し、下記のコードを記述します。
.my-theme-1 .sap-custom-button:hover {
background-color: #00ff00;
border-color: #0000ff;
}
注記：この例では、my-theme-1はカスタムCSSクラス名で、sap-custom-buttonは要素セレクタ、:hoverは擬似クラスです。
Step２．
ウィジェットのスタイルパネルを開き、CSSクラス名を入力します。
これで開発が完了しました。
スクリプト言語及び文法
SAP Analytics Cloud（SAC）のスクリプト言語は、JavaScriptのサブセットとして設計されています。
１．JavaScriptとの異同
通常のJavaScriptでは、基本的にデータを処理する際に、データ型エラーを避けるため、暗黙的なデータ型変換処理が内部で行われます。また、実行時にその時点でのコンテキストからデータ型を推測し、変数が既に使用中であってもユーザーが型を変更できます。一方で、SAP Analytics Cloudの場合、上述の二つのフィーチャーが禁止されています。基本的には暗黙的なデータ型変換が行われないため、変換をする際は、明示的に型変換関数を使用する必要があります。さらに、実行前に取り扱えるデータ型を決める必要があり、明示的にデータ型を宣言する必要があります。上記以外は、基本的にはJavaScriptと同様に記述することが可能。
２．自動データ型変換およびデータ型宣言
強い型付けの結果として、自動的な型変換は期待できません。以下は有効なJavaScriptですが、SAP Analytics Cloudでは、スクリプトエディターで自動型変換が不可能であるというエラーが表示され、ランタイムでスクリプトが無効になり、修正されるまで使用できません。また、変数を利用する前に、データ型を宣言する必要があります。
var a = 1;
console.log("Hello World, " + a);
代わりに、aを明示的に文字列にキャストする必要があります。
var a = 1;
console.log("Hello World, " + a.toString());
３．文法
重要な文法をいくつかご紹介いたします。JavaScriptのサブセットとして設計されているため、JavaScriptでのご経験をそのまま活用できると思います。
①For ループ
for (var i = 0; i < 3; i++) {
console.log("Hello");
}
➁Whileループ
var a = 1;
while (a < 3) {
console.log("Hello World, " + a.toString());
a++;
}
③For in ループ
var selection = {
"Color": "red",
"Location": "Tokyo"
};
for (var propKey in selection) {
var propValue = selection[propKey];
...
};
④If文
if (a === 1) {
console.log("if...");
} else if (a < 3) {
console.log("else if...");
} else {
console.log("else...");
}
⑤Switch文
switch (i) {
case 0:
day = "Zero";
break;
case 1:
day = "One";
break;
case 2:
day = "Two";
break;
}
４．オブジェクトへのアクセス
すべてのオブジェクト（ウィジェットやスクリプトオブジェクト）は、アウトラインでの同じ名前を持つグローバルオブジェクトです。例えば、ストーリーにChart_1という名前のチャートがあり、それが表示されているかどうかを確認したい場合、Chart_1をグローバル変数としてアクセスし、その関数にアクセスすることができます。
var isVis = Chart_1.isVisible();
５．外部ライブラリ
SAP Analytics Cloudでは、外部JavaScriptライブラリをインポートする機能は提供されていません。標準のJavaScriptビルトインオブジェクト、例えば：
- Math
- Date
- Number
- Array
- Stringに関する関数
などを使用できます。SAP Analytics CloudのAPIリファレンスにリストされているすべての標準機能はサポートされていますが、一部のブラウザではネイティブにサポートされていない場合があります。
イベント
定義済みのイベントが発生した場合、スクリプトは実行されます。イベントにはいくつかの種類があります。ページレベルでトリガーされるイベントと、個々のウィジェットでトリガーされるイベントがあります。
１．ページイベント
①ページイベント概要
ページイベントにはいくつかのタイプのイベントがあります。ページが初期化する時にトリガーされるイベント、特定の埋め込みシナリオでトリガーされるイベント、そしてブラウザウィンドウのサイズが変更された時にトリガーされるイベントなどがあります。
- onInitialization：このイベントは、ユーザーによってページが起動された時に一度実行されます。起動中に行いたいスクリプトはここに記述します。ほとんどのイベントと同様、入力パラメータはありません。
- onActive：このイベントはページが「有効」に設定される際に、トリガーされます。
- onPostMessageReceived：ストーリーがiFrameに埋め込まれている場合、ストーリーは、JavaScriptのPostMessageコールを使用してホストウェブアプリと双方向で通信できます。このイベントは、ホストアプリケーションがストーリーにポストメッセージコールを行うたびにトリガーされます。
- onResize：このイベントは、ブラウザウィンドウのサイズが変更されると、500ミリ秒ごとにトリガーするようにキャッシュされます。onResizeイベント内では、レイアウトAPIを使用してサイズや位置を動的に設定できます。
- onOrientationChange：デバイスの向きが変更された時にトリガーされるイベントです
- onShake：ユーザがモバイルデバイスをシェイクすると、トリガーされます。シェイク中、500ミリ秒ごとにトリガーされます。
➁ページイベントの設定方法
Step1.「アウトライン」から、 該当のページの右側にある「スクリプトの編集」を選択します。
Step2.ドロップダウンリストからイベントタイプを選択し、スクリプトを記述します。
２．ウィジェットイベント
①ウィジェットイベント概要
多くのウィジェットには、ユーザーによってクリックされた時にトリガーされるイベントがあります。しかし、テキストラベルのようなイベントがないウィジェットも存在します。データにバインドされたウィジェットは、通常、データソースが変更された時にトリガーされるイベントを持っています。ここでは、三つの利用頻度が高いイベントをご紹介いたします。
- onSelect：このイベントは、ユーザーがウィジェット内で選択を行うと、トリガーされます。
- onResultChanged：データソースが変更された時にトリガーされます。
- onClick：このイベントは、ユーザーがウィジェットをクリックすると、トリガーされます。
➁ウィジェットイベントの設定方法
Step1. ページイベントと同様、「アウトライン」から、 該当のウィジェットの右側にある「スクリプトの編集」を選択します。
Step2.ドロップダウンリストからイベントタイプを選択し、スクリプトを記述します。
スクリプト変数とスクリプトオブジェクト
１．スクリプト変数
①概要
ストーリー開発者として、スクリプト変数を使用します。スクリプト変数は、スクリプトの実行中に存在し、特定のタイプの値を保存して再利用可能な要素です。ストーリーで作成したスクリプト変数は、そのストーリー内でのみ利用可能です。
次のプリミティブタイプを使用できます：
- string (文字列)
テキストを一連の文字として表します。 - boolean (ブール型)
論理値 (true または false) を表します。 - number (数値)
浮動小数点数値を表します。通常形式または指数表記形式 (1e+20、1e20 など) で数値を入力できます。数値が 21 桁を超える場合は、科学表記形式で数値が表示されます。 - integer (整数)
小数部分のない数値を表します
上記のプリミティブデータ型のほかに、スクリプト変数で使用できるさまざまな非プリミティブデータ型 (Button、Category、Chart、Clock、DataSource、Table など) を選択することができます。
➁スクリプト変数の作成
Step1.「アウトライン」パネルのスクリプト領域で、「スクリプトオブジェクト」を選択します。
Step2.スクリプト変数パネルでタイプなどの必要な変数構造を定義します。
２．スクリプトオブジェクト
①概要
スクリプトオブジェクトは、コンテナとして機能します。ストーリー開発者は、スクリプトオブジェクトを使用して、スクリプトで再利用できる一連の関数をカプセル化することができます。
➁スクリプトオブジェクトの作成
Step1.「アウトライン」パネルのスクリプト領域で、「スクリプトオブジェクト」を選択します。
Step2.スクリプトを記述し、スクリプト関数パネルで引数などの必要な要素を定義します。
APIs
SAP Analytics Cloudで利用可能なすべてのオブジェクト、関数、プロパティ、メソッド、イベントは、下記のAPIリファレンスに記載されています。最適化されたストーリー体験に特有のものについては、「Optimized Story Experience API Reference Guide」を参照してください。
デバッグ
ストーリー開発者は、スクリプトのエラーを見つけるために、Web ブラウザの開発ツールを使用してデバッグ用のブレークポイントを設定するか、またはストーリーのデバッグモードを使用することができます。ストーリーを実行した後、Webブラウザの開発者ツールを開き、現在のセッション中に少なくとも一度スクリプトを実行します。そうすれば、開発者ツールでスクリプトを見つけることができます。
スクリプトの名前には特定のパターンがあります:<WIDGET_NAME>. <FUNCTION_NAME>.js。
スクリプトは <STORY_NAME> という名前のフォルダにグループ化されています。
例えば、「My Demo Story」という名前のストーリーがあり、その中に Button_1 というボタンがあり、onClickイベントが設定されているとしましょう。そのスクリプトの名前は Button_1.onClick.js となり、My_Demo_ Story というフォルダ内に位置しているでしょう。
１．ブレークポイントの使用方法
スクリプトの特定の箇所にブレークポイントを設定して、エラーを確認することができます。実行中に一時停止させたいスクリプトを開き、左側の行番号を選択して、どこで一時停止させるかを決めます。
赤いマーカーが表示されると、次回実行時にスクリプトがここで一時停止されることを示します。同じスクリプト内に複数のブレークポイントを追加して、ランタイム中に異なるポイントで一時停止することができます。
２．ストーリーのデバッグモードの使用方法
デバッグモードを起動し、スクリプト内に debugger; ステートメントを使用することで、ランタイム中に複数のポイントで自動的にスクリプトを一時停止し、エラーを検出することができます。
ランタイム中にブレークポイントを設定する代わりに、デザインタイムに debugger; ステートメントをスクリプトに追加できます。
その後、デバッグモードを起動するには、ランタイム時にURLにパラメータ debug=true を追加します。
https://<TENANT>/sap/fpa/ui/tenants/<TENANT_ID>/bo/application/<APPLICATION_ID>/?mode=present&debug=true
デバッグモードでストーリーを実行すると、スクリプトは debugger; ステートメントの箇所で自動的に実行を停止します。
参考例：ベストプラクティス―チャートとテーブルの切り替え
背景：架空の清涼飲料水メーカーのデータを用いて、飲料水の販売データのテーブルとチャートをストーリーに追加しました。今回の例では、チャートとテーブルをトグルによってビューアが切り替えられるようにする方法を学習します。必要なウィジェットやページは以下となります。
- Chart_1：売上高と販売数量のチャート
- Table_1：売上高と販売数量のテーブル
- Button_1：チャートからテーブルに切り替えるボタン
- Button_2：テーブルからチャートに切り替えるボタン
- Page_1：上記のウィジェットが所在するページ
Step1.テーブルウィジェットおよびチャートウィジェットを積み重なるように配置します。
Step2.チャートからテーブルに切り替えるを有効にするには、Button_1のスクリプトを編集します。
Chart_1.setVisible(false);
Table_1.setVisible(true);
Button_1.setVisible(false);
Button_2.setVisible(true);
このスクリプトでは、テーブルTable_1が表示され、チャートChart_1が非表示になり、チャートに切り替え用のボタンButton_2が表示され、テーブルに切り替え用のボタンButton_1が非表示になります。また、より良い分析体験を提供するには、テーブルに切り替え用のボタンButton_1のテキストを「テーブルに切り替える」に変更します。
Step3.ステップ２と同様に、テーブルからチャートに切り替えるを有効にするには、Button_2のスクリプトを編集し、テキストを入力します。
Chart_1.setVisible(true);
Table_1.setVisible(false);
Button_1.setVisible(true);
Button_2.setVisible(false);
Step4.また、ディフォルトとしてチャートを表示するには、ページの初期化イベントでスクリプトを編集します。
以上で開発が完了しました。
計画業務目線で有用なスクリプト機能の具体的な利用ケース
１．バージョン管理
スクリプト機能で開発したバージョン管理のウィジェットをご紹介いたします。ユーザがこのウェジットを実装してモデル情報を入力するだけで、バージョン管理、変更の監査、タスクのスケジュール設定などが可能になります。このウェジットはスクリプト機能を利用して開発したボタン、ポップアップ、フィードバックメッセージの組み合わせによって作成され、プランナー管理者にデータの異なるバージョンをシームレスに管理できるインターフェースを提供しています。
２．要員計画レポート
スクリプト機能と要員計画のビジネスコンテンツを用いて作成されたレポートについてご紹介いたします。まず、ボタンをクリックすることでポップアップが表示され、ラジオボタンを使用して表示形式を変更できます。また、ドロップダウンメニューの選択に基づいて、別のポップアップが表示される機能も搭載されています。さらに、入力漏れによるエラーや警告の表示機能も備えており、これにより、データの完全性と正確性を保証します。前述の機能はすべて標準機能(ノーコード)で達成できないことです。
制限
従来のエクスペリエンスで利用できる機能の一部は最適化されたストーリーエクスペリエンスではまだ利用できないものもあります。詳しくは最適化されたデザインエクスペリエンスの改善点や制限詳細をご参照ください。
終わり
今回はスクリプト機能のご紹介でした。SAP Analytics Cloudは他にも予算計画などの一連の予算管理業務に必要な機能を備えており、本ブログシリーズではそれぞれの機能の特徴や要点をご紹介しています。
こちらのリンクからご参照ください。
Bluesky| User | Count |
|---|---|
| 47 | |
| 38 | |
| 37 | |
| 30 | |
| 30 | |
| 28 | |
| 27 | |
| 26 | |
| 24 | |
| 23 |
