domo-js について
Domo アプリ開発者向けの JavaScript SDK で、環境情報、データアクセス、アプリ内操作のユーティリティを提供します。フィルターや変数の変更を監視し、値をプログラムから更新できます。
主な機能
- 01Domo 環境情報の取得
- 02データセット更新の監視
- 03フィルターと変数変更の監視
- 04変数とページフィルターの更新
- 05ナビゲーションとデータセットの並列取得
活用シーン
- 01データセット更新後のアプリデータ再取得
- 02フィルターや変数に応じたクエリ調整
- 03連動するドロップダウンの構築
- 04Domo ページや外部リンクへの移動
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ stahura/ domo-ai-vibe-rules --skill domo-jsインストール後、Claude Code で/domo-jsを入力して読み込まれたか確認します。
詳細
domo.js (ryuu.js) SDK
domo.js (ryuu.js) のインストール
React/npm プロジェクト:
npm install ryuu.js
import domo from 'ryuu.js';
Vanilla JavaScript(CDN):
<script src="https://app.unpkg.com/[email protected]"></script>
domo.js ユーティリティ
API に加えて、domo.js は Domo 環境とやり取りするための便利なユーティリティを提供します。
環境情報
環境情報にアクセスします。警告:偽装される可能性があります!セキュリティ目的では使用しないでください。
console.log(domo.env.userId); // User ID (spoofable!)
console.log(domo.env.customer); // Customer/instance name
console.log(domo.env.pageId); // Current page ID
console.log(domo.env.locale); // Locale (e.g., 'en-US')
console.log(domo.env.platform); // 'desktop' or 'mobile'
安全なユーザー検証には、以下を使用してください:
// ✅ SECURE - Server-verified identity
const verifiedEnv = await domo.get('/domo/environment/v1/');
const { userId, userName, userEmail } = verifiedEnv;
// Or use IdentityClient from toolkit
import { IdentityClient } from '@domoinc/toolkit';
const response = await IdentityClient.get();
const user = response.body; // { id, displayName, emailAddress, role }
イベントリスナー
データセットの更新
domo.onDataUpdated((alias) => {
console.log(`Dataset ${alias} was updated`);
// Refresh your data or do nothing to prevent auto-reload
});
ページフィルターの変更(onFiltersUpdated/onFiltersUpdate)
同じ App Studio ページ(またはダッシュボード)上のネイティブフィルターカードが変更されると発火します。React コンポーネントや useEffect の外側、トップレベルで登録してください。
新しいバージョンの ryuu.js で利用できる場合は onFiltersUpdate を使用し、互換性のために利用できない場合は onFiltersUpdated にフォールバックしてください。
const registerFilterListener = (handler) => {
try {
if (typeof domo.onFiltersUpdate === "function") return domo.onFiltersUpdate(handler);
if (typeof domo.onFiltersUpdated === "function") return domo.onFiltersUpdated(handler);
} catch (_) {
// Listener registry can be uninitialized in some runtimes.
}
};
registerFilterListener((filters) => {
if (!Array.isArray(filters) || filters.length === 0) return;
filters.forEach(({ column, operand, values, dataType }) => {
switch (column?.toUpperCase()) {
case "YEAR_OF_EVENT":
if (operand === "BETWEEN" && values?.length === 2) {
state.yearRange = { min: Number(values[0]), max: Number(values[1]) };
} else if (operand === "IN" && values.length > 0) {
const nums = values.map(Number).sort((a, b) => a - b);
state.yearRange = { min: nums[0], max: nums[nums.length - 1] };
}
break;
case "CATEGORY":
if (operand === "IN") {
state.categories = values.length > 0 ? values : ["ALL"];
}
break;
}
});
fetchData(); // Refetch immediately — no "apply" step for page filters
});
フィルターオブジェクトの構造 — filters 配列の各要素:
| フィールド | 型 | 値 |
|---|---|---|
column | 文字列 | データセットの列名 |
operand | 文字列 | BETWEEN、IN、GREATER_THAN_EQUAL、LESS_THAN_EQUAL、EQUALS |
values | 配列 | BETWEEN の場合:[min, max]。IN の場合:選択された値。スカラーの場合:[value]。 |
dataType | 文字列 | LONG、STRING、DATE など |
フィールド名は operator ではなく operand です。 受信フィルターでは operand を使用します。送信フィルター(requestFiltersUpdate 経由)では operator を使用します。この不一致は、Domo API における既知の仕様上の不整合です。
変数の変更(onVariablesUpdated)
App Studio の変数コントロールが変更されると発火します。変数は数値文字列の ID で識別されます。トップレベルで登録してください。
domo.onVariablesUpdated((variables) => {
if (!variables || typeof variables !== "object") return;
const typeVar = variables["860"];
if (typeVar?.parsedExpression?.value) {
const label = typeVar.parsedExpression.value; // display label, e.g., "Cumulative"
state.pendingType = MY_LABEL_MAP[label]; // map to internal value
}
updateUI(); // Show pending state, don't refetch yet — wait for Apply
});
変数オブジェクトの構造 — variables は数値の関数 ID 文字列をキーとして持ちます:
{
"858": { "parsedExpression": { "exprType": "LITERAL", "value": "Year Sold" } },
"860": { "parsedExpression": { "exprType": "LITERAL", "value": "Cumulative" } }
}
変数には、内部値へのマッピングが必要な表示ラベルが渡されます。保留/確定パターンを使用します。変更時にステージング状態に保存し、ユーザーが適用をクリックした場合にのみ確定して再取得します。
プログラムからの変数の更新(requestVariablesUpdate)
カスタムアプリ内から App Studio の変数を書き込みます。主な用途は依存するドロップダウンです。変数 A が変更されたとき、変数 B を設定します。
domo.requestVariablesUpdate(
[{ functionId: 873, value: "Initial Service" }],
(ack) => { console.log("acknowledged"); },
(reply) => { console.log("completed"); }
);
ループの防止:変数を更新すると、onVariablesUpdated が再度発火します。フラグで制御してください:
state.isUpdatingVariable = true;
domo.requestVariablesUpdate(updates, onAck, (reply) => {
state.isUpdatingVariable = false;
});
// In onVariablesUpdated: if (state.isUpdatingVariable) return;
ペイロードでは文字列ではなく、数値の functionId を使用します。コールバックは onAck(キューに登録済み)と onReply(完了済み)です。
ナビゲーション
重要: href を指定した標準のアンカータグは、Domo アプリで正しく動作しません。domo.navigate() を使用する必要があります:
// Navigate within Domo
domo.navigate('/page/123456789');
// Open in new tab
domo.navigate('/page/123456789', true);
// External URLs also work
domo.navigate('https://example.com', true);
複数のデータセットの取得
// Load multiple datasets in parallel
const [sales, customers, products] = await domo.getAll([
'/data/v1/sales',
'/data/v1/customers',
'/data/v1/products'
]);
プログラムからのページフィルターの更新
domo.requestFiltersUpdate(
[
{
column: 'category',
operator: 'IN',
values: ['Electronics', 'Clothing'],
dataType: 'STRING'
}
],
true, // apply to page
() => console.log('Filter update acknowledged'),
(response) => console.log('Filter update completed:', response)
);