Amazon Q in QuickSight でデータQ&A機能だけを外部サイトに埋め込んでみた
2025.08.13いわさです。
Amazon QuickSight はダッシュボードやコンソールを外部 Web サイト上に埋め込むことが出来ます。
最近 Amazon Q in QuickSight の社内検証環境が整備され、色々と Q in QuickSight の検証ができるようになりました。
その関係で、以前から気になっていたトピックに対するデータQ&Aの埋め込み機能を試す機会があったので、どんな感じで動作するのかなどを紹介したいと思います。
カスタマイズ性は高くないのですが、ダッシュボードなどの作成なしで Web アプリケーションから自然言語で分析を依頼したい時などに使えるのではないでしょうか。
埋め込み用アプリケーションの用意
今回は埋め込み用ローカルアプリケーションを用意しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QuickSight 埋め込み画面</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
.iframe-container {
width: 100%;
height: 600px;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
.url-input {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
.update-btn {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.update-btn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>QuickSight ダッシュボード埋め込み</h1>
<div>
<input type="text"
id="urlInput"
class="url-input"
placeholder="QuickSight埋め込みURLを入力してください（例: https://quicksight.aws.amazon.com/embed/...）"
value="">
<button class="update-btn" onclick="updateIframe()">URLを更新</button>
</div>
<div class="iframe-container">
<iframe id="quicksightFrame"
src="about:blank"
title="QuickSight Dashboard">
<p>お使いのブラウザはiframeをサポートしていません。</p>
</iframe>
</div>
</div>
<script>
function updateIframe() {
const urlInput = document.getElementById('urlInput');
const iframe = document.getElementById('quicksightFrame');
const url = urlInput.value.trim();
if (url) {
iframe.src = url;
} else {
alert('URLを入力してください');
}
}
// Enterキーでも更新できるようにする
document.getElementById('urlInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
updateIframe();
}
});
</script>
</body>
</html>
今回は Python のhttp.serverを使ってローカル上でホスティングします。
% python3 -m http.server 8000
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
::1 - - [11/Aug/2025 18:53:28] "GET / HTTP/1.1" 200 -
::1 - - [11/Aug/2025 18:53:28] code 404, message File not found
::1 - - [11/Aug/2025 18:53:28] "GET /favicon.ico HTTP/1.1" 404 -
アクセスすると次のような感じで、生成した埋め込みダッシュボード URL を入力するテキストボックスがあるので、入力することで iframe 上にレンダリングされる感じです。
Q トピックの URL を生成する
以前、以下の記事でトピックをいくつか作成していましたのでこちらを使用してみます。
URL の生成には generate-embed-url-for-registered-user を使います。（セッションキャパシティを使わない場合）
埋め込み対象の Q トピック ID を事前に取得しておきましょう。トピック詳細画面の URL から確認が出来ます。
そして、ExperienceConfiguration.GenerativeQnA.InitialTopicIdとして指定します。
% cat hoge.json
{
"AwsAccountId": "123456789012",
"UserArn": "arn:aws:quicksight:ap-northeast-1:123456789012:user/default/hoge-user",
"ExperienceConfiguration": {
"GenerativeQnA": {
"InitialTopicId": "Y0xh0NtV9AiaSvHj2oT7je0t7xN14AsB"
}
},
"AllowedDomains": [
"http://localhost:8000"
]
}
% aws quicksight generate-embed-url-for-registered-user --cli-input-json file://hoge.json --profile qinq
{
"Status": 200,
"EmbedUrl": "https://ap-northeast-1.quicksight.aws.amazon.com/embedding/eb90e18904c241e49472f061f55769d0/q/search/nre/Y0xh0NtV9AiaSvHj2oT7je0t7xN14AsB?code=AYABeBYev2JfAiWrNaZeXkDWIRAAAAABAAdhd3Mta21zAFBhcm46YXdzOmttczphcC1ub3J0aGVhc3QtMTozNjcwOTQ1NjE4OTQ6a2V5LzkyZDU3MjEzLTc0MjItNGNhOC1iYWZiLTg2MDFjNGZkODgyNwC4AQIBAHg0bY-YnmIbwyTOa-YIaLWafuawd1WUVF6Erjy7NC0IRwEioVNhuLns0LWB3YkH2SxgAAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMptQepbAYrnA6iB73AgEQgDtvPTGBwnpGqfW5fhPHOmr6WQjYAn-NcdAlDfl-Do79Jl6yaTR_y1MN16yW_A-Pq2mNNldAh3yHnETt8AIAAAAADAAAEAAAAAAAAAAAAAAAAAC4jHCFQeoSCCkiY-gMG63Y_____wAAAAEAAAAAAAAAAAAAAAEAAACb-itjCkKLHBcZmMan1i1KjXa1LpCpwK7awJ-WhnmKbCGXZCAQQVbbcsJb3ZJHrI_LG3uY0Z7vjURwvZEPU3JgfnIFSo9LjLQixl94nEe0G60iqtJ_YOmDKvBsC4KGHgLmLIijbSzZA-1cHKcFX1RYGli3BWaXDmncTg1K-LJbgEgR5KeRZDZo4frijCZ1WQypsbl9rFlKJ6H8aClMgd1WibHQtgPB6xMhtyAP&identityprovider=quicksight&isauthcode=true",
"RequestId": "c0169aca-3106-42bb-84c8-410537909738"
}
そうするとEmbedUrlが取得出来ます。
これが埋め込み URL になりまして、一定期間内のみ有効なトークン付きのURLとなります。
この URL を先程の確認用 Web ページに展開してみましょう。
おお。コンソール上で「Ask a question about」ボタンを押した時に出てくるパネルの内容みたいなものが表示されました。これが埋め込まれるんですね。
気になったのは次のようにトピックを変更できる点です。
現時点ではどうやら特定のトピックのみを埋め込むということは出来ないようです。
パラメータで指定できるのもInitialTopicIdのみなので初期表示トピックのみ指定できる感じですね。
なので、次の QuickSight コンソールの Amazon Q アイコンから表示できる Q&A パネルに初期表示トピックを指定したものを埋め込みに使えるイメージになります。（Classic Q&A はこの埋込みモードだと使えなさそう）
ちなみにトピックへの参照権限のないリーダーユーザーを使って生成した埋め込み URL の場合、次のようにトピックへのアクセス権限がありません。権限周りの意識が必要です。
この UI 上であとは自然言語で問い合わせをすることでダッシュボード作成など不要でデータに対する分析・可視化の結果を得ることが出来ます。
さいごに
本日は Amazon Q in QuickSight でデータQ&A機能だけを外部サイトに埋め込んでみました。
トピックに対するデータQ&A埋め込みは AUTHOR 向けの機能になるので、閲覧者向けにはダッシュボードQ&Aを用意して埋め込む必要がありそうです。
そういった背景もあってこの埋込み機能自体はカスタマイズ性が高くなく、色々と触れる感じですね。コンソール埋め込みと同じです。
もしかすると QuickSight Embedding SDK を使えばもう少しカスタマイズできる可能性もありますが、それも今度調べてみたいと思います。
