はじめに
この記事は、#BuildWithBuildAgentTokyo への参加記事です。
前編と後編に分けて書きます。
- 前編(この記事): 作ったもの、進め方、AI 解説を組み込むまで
- 後編: エラーとの格闘、デザインの作り込み、反省
ServiceNow の Build Agent で、ホロスコープ占いアプリ NOW HOROSCOPE を作りました。まずは動画をご覧ください。
生年月日と出生地を入れると、星の配置を計算して円形のホロスコープを描き、AI が占い師の口調で読み解いてくれます。
作ったもの
使い方は4ステップです。
1. 出生情報を入力する
ニックネーム、生年月日、出生時刻、出生地を入れます。出生地は地名で検索すると、緯度と経度が自動で入ります。
2. ホロスコープが描かれる
「ホロスコープを計算する」を押すと、10天体とハウス、アスペクト(天体同士の角度)を計算して、円形のチャートを描きます。太陽・月・アセンダントの「3つのポイント」と、火・地・風・水のエレメントバランスも並びます。
3. AI が読み解く
「AI に解説してもらう」を押すと、計算した星の配置をもとに、AI が解説を書きます。
4. 結果が保存される
入力値、計算結果、解説、使ったモデルやトークン数が、カスタムテーブルに1件ずつ残ります。自分のレコードだけが見える ACL を付けています。
※スクリーンショットはadminで取得しています。
題材のきっかけ
家族に占い好きがいて、最近よく「ホロスコープ」という言葉を耳にします。生まれた瞬間の星の配置を円に描き、太陽や月がどの星座にあるかなどから性格を読むそうです。話を聞くうちに、占いそのものより「どうやって星の位置を計算しているのか」が気になりました。
調べると、生年月日や場所をもとに天文計算しているとのこと。それならServiceNow上でも作れるのではと思い、題材にしました。
進め方
Build Agent は、開発者インスタンス(PDI)のトライアルだと、プロンプトを送れるのが月25回です。私はこのアプリの前に別のアプリでも使っていたので、残り回数はわずかでした。
「とりあえず投げて、出てきたものを見て直す」では上限に達してしまいそうだったため、技術調査やプロンプト作成は Claude(Opus 5.5)に、ServiceNow の実装は Build Agent に、と役割を分けました。
| 担当 | 役割 |
|---|---|
| 人間(自分) | 何を作るか決める。Claude が作ったプロンプトを Build Agent に送る。できたものを確かめる |
| Build Agent | ServiceNow 上での実装、ビルド、インストール |
| Claude(Opus 5.5) | 技術調査、設計、Build Agent に渡すプロンプトの作成 |
Claude と対話して調査と設計を固め、出てきたプロンプトをそのまま Build Agent に送っています。
技術調査
ホロスコープのライブラリを探す
ServiceNow SDK(Fluent)の UI Page では npm のライブラリが使える、ということは知っていました。そこで、ホロスコープを計算・描画する JavaScript / TypeScript のライブラリを探しました。
今回は Claude とも対話し、circular-natal-horoscope-js と @astrodraw/astrochart を採用しました。
出生地の検索
緯度と経度を手で入れるのは大変なので、地名から引けるようにしました。使ったのは OpenPOI API です。API キーが不要で、ブラウザから直接呼べます。対象は日本国内だけなので、海外の方向けに手入力欄も残しました。
全体構成
設計で決めたことは3つです。
1. 計算と描画は、すべてブラウザでやる
チャートを描くまでは、サーバーとの通信がありません。入力したらすぐ結果が出ます。
2. API キーはブラウザに出さない
AI の呼び出しは、ブラウザから直接ではなく、自作の Scripted REST API を通します。API キーは Connection & Credential Alias に登録し、サーバー側のスクリプトだけが取り出します。ソースコードにもシステムプロパティにも、キーは書いていません。
3. 個人情報を送らない
個人情報は占い結果には不要なため、外部の LLM には計算結果のみ送っています。
実装の流れ
Build Agent には、1回ごとに範囲を区切って頼みました。全体は次の6回です。
| # | 頼んだこと |
|---|---|
| 1 | 入力 → 計算 → 円形チャートの描画(PoC) |
| 2 | ニックネーム、出生地検索、ハウスシステムの日本語化 |
| 3 | AI 解説と保存(Alias、Scripted REST API、カスタムテーブル、ACL) |
| 4 | エラーの修正と、デザインの適用 |
| 5 | エラーの再修正 |
| 6 | 画面の使い勝手の改善 ※とある事情により完了できず |
前編では、このうち 1〜3 を紹介します。4〜6 は後編です。
1回目: まず円を描く
保存も AI も後回しにして、「入力 → 計算 → 円形チャート」だけを頼みました。
見た目は素っ気ないですが、1回でチャートが描けました。計算結果も、あらかじめ用意しておいた期待値と秒の単位まで一致しています。
2回目: 入力まわりを整える
ニックネームの入力、「〇〇さんのホロスコープ」という見出し、地名での出生地検索、ハウスシステムの日本語表示を足しました。
3回目: AI 解説と保存
ここが一番大きな回です。1回のプロンプトで、次のものをまとめて頼みました。
- Connection & Credential Alias(API キーの置き場所)
- カスタムテーブル、ロール、ACL
- Scripted REST API と、サーバー側のモジュール
- DeepSeek の呼び出し
- 画面の解説パネル
ちなみにプロンプトを送ると、Build Agent はまず作業の計画(Plan)を出してきます。今回のプロンプトは4つのフェーズに分けて頼んでいたので、計画もその順番どおりに組まれていました。計画を詳細に組んでいない場合は、Build Agent自身が計画立てから考えてくれるみたいです。
（Plan画面が英語で出力されましたが、それはご愛敬。）
テーブルのカラムは、保存したい情報だけを伝えて、設計は Build Agent に任せました。
以下の画像は、Build Agentが設計したカラムの一部です。
Connection & Credential Aliasもしっかり作成されていました。
プロンプトに必ず入れた4つのこと
全文は長いので載せませんが、どの回にも共通して入れたものがあります。
- 決めておいた構成: 使うライブラリとバージョンを指定し、「設計を変えないこと」と書く
- 数値つきの完了条件: 「動くこと」ではなく、期待する値を書く
- やってはいけないこと: 使わないライブラリ、作ってはいけないファイル
- 失敗したら止まって報告: 独自の回避策を試させない
2 の例として、1回目のプロンプトに書いた受け入れテストを載せます。
## 受け入れテスト
初期値(1990-06-15 14:30、緯度 35.6895、経度 139.6917)と Placidus で計算したとき、次が表示されること:
太陽 ≈ 83.87°(双子座 23°52')、月 ≈ 341.74°(魚座)、アセンダント ≈ 209.30°(天秤座)、
MC ≈ 123.14°(獅子座)。土星・天王星・海王星・冥王星に逆行マークが付く。
12 サインの帯、12 本のハウスカスプ、惑星記号、アスペクト線を持つ SVG の円形チャートが描画される。
期待値を書いておくと、Build Agent の出力が正しいかどうかを、画面を見てすぐ判断できます。
前編のまとめ
- Build Agent の回数が限られていたので、調査と設計を Claude と済ませてから投げた
- 1回ごとに範囲を区切り、まず円を描くところから始めた
- 完了条件を数値で書くと、結果が正しいかどうかをすぐ判断できた
ここまで読むと順調に見えますが、実際は3回目のプロンプトのあと、AI 解説のボタンがうまく起動せず試行錯誤しました。後編では、そのエラーと直し方、そして最後の1回を無駄にした話を書きます。
冒頭の動画の見た目になるのも、後編です。
ServiceNow World Forum Tokyo のご案内
★ ServiceNow World Forum Tokyo 2026 ★
ServiceNow の国内最大のイベント、World Forum Tokyo 2026 が、10月27日(火)・28日(水)にグランドプリンスホテル新高輪で開かれます。基調講演や最新の製品の話が聞けるだけでなく、ServiceNow に関わる人たちと直接話せる、年に一度の機会です。
今回のチャレンジで優秀賞に選ばれたアプリは、会場の「Vibe Code ラウンジ」に並ぶそうです。
この記事を読んで「良いな」と思っていただけたら、ぜひ下のリンクから参加登録をお願いします!