導入方法
ブックマークレットを登録
上の青い「BTP Agentation」ボタンをブックマークバーにドラッグ＆ドロップします。
ブックマークバーが表示されていない場合は Ctrl+Shift+B で表示。
Fiori アプリを開く
SAP BTP / S/4HANA 上の Fiori / UI5 アプリケーションをブラウザで開きます。
ブックマークレットをクリック
ブックマークバーの「BTP Agentation」をクリック。ダークテーマツールバーが右下に表示されます。
キーボードショートカット: Ctrl+Shift+A
フィードバックを AI アシスタントに送信
UI 要素をクリック → 注記を入力 → コピーボタンでフィードバックをクリップボードにコピー → GitHub Copilot、Claude Code などの AI コーディングアシスタントに貼り付け。
npm install -g btp-agentation
ローカルサーバー起動
開発中はローカルから配信も可能:
npx btp-agentation --script-tag # <script> タグを出力
npx btp-agentation --bookmarklet # ブックマークレットを出力
npx btp-agentation --console # コンソール用コードを出力
npx btp-agentation --url # CDN URL を出力
npx btp-agentation --serve [port] # ローカルサーバー起動
Node.js から利用
const btp = require('btp-agentation');
console.log(btp.getScriptTag());
console.log(btp.getBookmarklet());
console.log(btp.getCdnUrl());
HTML に script タグを追加
開発環境の HTML ファイル（index.html など）に以下を追加します。本番環境には含めないでください。
<script src="https://pcmn1000.github.io/my-side-by-side-app/btp-agentation.js"></script>
ページをリロード
ブラウザでページをリロードすると、BTP Agentation が自動で読み込まれます。Ctrl+Shift+A で起動。
DevTools を開く
F12 または Ctrl+Shift+I でブラウザの開発者ツールを開き、Console タブに移動します。
以下のコードを貼り付けて Enter
コンソールに貼り付けて実行するだけで BTP Agentation が起動します。
var s=document.createElement('script');s.src='https://pcmn1000.github.io/my-side-by-side-app/btp-agentation.js';document.head.appendChild(s);
⚠ コンソールに貼り付けできない場合
ブラウザのセキュリティ設定により、コンソールへの貼り付けがブロックされる場合があります。
その場合は、コンソールに allow pasting と入力して Enter を押してから、再度コードを貼り付けてください。
仕組み
BTP Agentation は、ブラウザ上で動作する軽量な JavaScript ツールです。SAP Fiori / UI5 アプリケーションの画面に対して、開発者が UI フィードバックを構造化されたテキストとして記録し、AI コーディングアシスタントに渡すことで、UI 修正コードの生成を効率化します。
1
スクリプトの注入
ブックマークレット、script タグ、DevTools Console のいずれかで対象ページにスクリプトを読み込みます。DOM やデータを外部に送信しません。
2
UI 要素の選択と注記
ツールバーが表示された状態で UI 要素をクリックするとメタ情報が取得されます。ポップアップに修正内容や要望を入力できます。
3
フィードバックの構造化
入力された注記は要素情報とともに Markdown 形式で整形されます。複数の UI 要素に対して連続して注記を追加できます。
4
AI アシスタントへの連携
生成されたフィードバックをコピーし、GitHub Copilot・Claude Code・Cursor 等に貼り付けると、AI が UI5/Fiori コード修正を提案します。
🔒
すべての処理はブラウザ内で完結します。外部サーバーへのデータ送信や認証情報の取得は行いません。
取得する Fiori / UI5 構造情報
クリックした UI 要素から、sap.ui.getCore().byId() を起点に以下の情報を自動取得します。
| 項目 |
内容 |
| コントロール型 | getMetadata().getName() で取得（例: sap.m.Button, sap.fe.macros.Table） |
| コントロール ID | getId() で取得。ビュー内での配置を特定 |
| 親コントロール | getParent().getMetadata().getName() で階層構造を把握 |
| データバインディング | mBindingInfos からプロパティとパスの対応（例: {"value": "/ProductName"}） |
| プロパティ値 | text, value, title, label, type, visible の現在値 |
| Fiori Elements 判定 | sap.fe.* / sap.ui.mdc.* の場合は CDS アノテーション制御と判定し、@UI.LineItem 等の修正を案内 |
| DOM セレクタ | 要素の DOM 上の位置を CSS セレクタ形式で記録 |
| 位置・サイズ | getBoundingClientRect() による座標とサイズ |
| CSS 情報 | getComputedStyle() による fontSize, color, backgroundColor, padding, margin, display（詳細モード時） |
これらの情報はページタイトル、URL、UI5 バージョンとともに Markdown 形式で出力されます。AI アシスタントはこの構造情報をもとに、XML ビュー・コントローラ・CDS アノテーションなど適切なレイヤーの修正コードを生成できます。