GoogleのOpalでアプリを作ってみる〜テンプレからではなく一からつくる

2026年1月4日

昨日はテンプレートをOpalを実施しましたが、今度は自分で作りたいものをお願いしてみます。

昨日のブログの続きです。

GemでOpalがうごく〜簡単にAIアプリ構築ができる

1. Geminiでどんなアプリを作ればいいのか聞いてみました
2. Opalで3のプロンプトを入れてみます。
3. 処理フローを確認します。
4. 実行してみます
5. 業界動向を調査してGoogleスライドに出力して
6. 感想

Geminiでどんなアプリを作ればいいのか聞いてみました

以下の3つを提案されました。3を作ってみましょうかね。

1. 仕事・効率化アプリ（日常業務を自動化）

複数のステップを組み合わせて、定型業務を終わらせるアプリです。

プロンプト内容: 「会議の議事録テキストを入力すると、自動的に『決定事項』『ネクストアクション』『保留事項』の3つに要約し、さらにチーム共有用のチャット形式に整形して表示するアプリを作ってください。」

2. コンテンツ制作アプリ（クリエイティブ）

Googleの画像生成AI（Imagen）や動画生成AI（Veo）と連携させたアプリです。

プロンプト内容: 「ブログの記事タイトルを入力すると、その内容に合わせたアイキャッチ画像を生成し、さらに読者の興味を引く導入文を3パターン提案してくれるアプリを作成してください。」

3. リサーチ・分析アプリ（Web検索連携）

最新の情報をインターネットから拾ってきて整理するアプリです。

プロンプト内容: 「ユーザーが知りたい特定の業界名を指定すると、Google検索を使ってその業界の最新ニュースを5つ抽出し、各ニュースが自社ビジネスに与える影響を分析してレポート形式で出力するアプリを作ってください。」

Opalで3のプロンプトを入れてみます。

CreateNewからアプリを作っていきます。

プロンプトを入れて実行してみます。

20秒くらいでできました。横長なフローですね。

黄色いBOXがインプットで、緑のBOXがアプトプットです。

青いBOXの何段階かで、処理プロンプトが書かれているはずです。

処理フローを確認します。

インプット　IndustryNameを入れろ

自分で業界を入力します。

Formulate NewsSearch

ニュースを探しに行くプロンプトが入っています。

あなたは情報検索と検索エンジン最適化のエキスパートであり、正確かつ効果的な Google 検索クエリの作成に長けています。あなたの課題は、特定の業界名に関連する最新のニュース記事 5 件を取得する Google 検索クエリを作成することです。このクエリは、最新のニュースコンテンツを優先し、関連性を確保するように最適化する必要があります。不要な引用符は使用せず、出力が検索クエリとして直接渡せるようにしてください。引用符は、曖昧さを解消するために必要な場合のみ、また、一致が確実であると確信できるフレーズにのみ使用してください。
# 手順
1. 業界名と「ニュース」や「最近」などの語句を組み合わせた Google 検索クエリを作成します。
2. クエリに Google 検索演算子を追加し、結果をフィルタリングして、過去 1 週間、1 か月、または 1 年以内に公開されたニュース記事のみを表示し、最新の記事を優先します。
3. クエリが、業界名に関連する最新のニュース記事 5 件を返すように最適化されていることを確認します。

業種名:
"""
{{"type": "in", "path": "ask_user_industry_name", "title": "業種名"}}
"""
重要事項: 出力から直接開始し、区切り文字を出力しないでください。
出力:

Search RecentNews

最近のニュース記事を調査します

あなたはGoogle検索にアクセスできる情報抽出の専門家です。目標は、Google検索を呼び出して、Google検索ツールのレスポンスを単語ごとに返すことです。
Google検索を使用して、作成した検索クエリを実行し、ニュース記事の生のウェブページコンテンツを取得します。
次のユーザーで{{"type": "tool", "path": "embed://a2/tools.bgl.json#module:search-web", "title": "Search Web"}}を1回使用してください。

Extract Indivisual News

個別のニュースを抽出ですかね。

あなたは、生の検索結果から特定の情報を識別・分離するスキルを持つ、コンテンツ抽出・解析のエキスパートです。あなたの課題は、提供された`raw_search_results`から最新のニュース記事5件のコンテンツを正確に抽出・解析し、Markdown形式の順序付きリスト内の個別の項目にまとめることです。リスト内の各項目は、1つのニュース記事の完全なコンテンツを表している必要があります。
# 手順
1. 生の検索結果から最新のニュース記事5件のうち1件のURLを抽出します。
2. {{"type": "tool", "path": "embed://a2/tools.bgl.json#module:get-webpage", "title": "Get Webpage"}} を使用して、抽出したURLのコンテンツを取得します。
3. 取得したコンテンツを、Markdown形式の順序付きリストの個別の項目として追加します。
4. 5つの異なるニュース記事のコンテンツが抽出され、リストに追加されているかどうかを確認します。追加されていない場合は、手順1に戻り、抽出されていない別のニュース記事のURLを抽出します。
5. 5つの異なるニュース記事からコンテンツを抽出してリストに追加したら、Markdown形式の順序付きリスト全体を出力します。

生の検索結果:
"""
{{"type": "in", "path": "node_step_raw_search_results", "title": "最近のニュース記事を検索"}}
"""
重要: 出力から直接開始し、区切り文字を出力しないでください。
出力:

Analyze Business Impact

ビジネスインパクトを分析！？

あなたは市場情報に精通したビジネスアナリストです。あなたの任務は、個々のニュース記事を分析し、特定の業界で事業を展開している企業への潜在的な影響を明確に記述することです。分析は、提供された業界に特化し、直接的および間接的な影響に焦点を当てる必要があります。
# 手順
1. 個々のニュース記事ごとに、その内容を分析します。
2. それぞれの記事について、指定された業界の企業への潜在的な影響を説明します。
3. 影響の説明が明確かつ簡潔であることを確認します。
4. すべての個々のニュース記事を分析し、影響を説明するまで、手順1～3を繰り返します。

個々のニュース記事:
"""
{{"type": "in", "path": "node_step_individual_news_articles", "title": "個々のニュース記事を抽出"}}
"""
重要事項: 出力から直接開始し、区切り文字を出力しないでください。
出力:

Generate Summary Report

サマリ‐のレポートを作ります

あなたは熟練したビジネスアナリストであり、複数の影響分析を1つの包括的な要約レポートにまとめるという任務を負っています。レポートには業界名を明記し、その業界の企業に関するニュース記事で特定された主要な影響を簡潔にまとめる必要があります。
# ステップバイステップの手順
1. 提供されている記事別影響分析と業界名を読みます。
2. 業界名と記事別影響分析から1つを選び、主要な影響に焦点を当てた要約レポートの草稿を1～2文作成します。
3. 草稿をレビューします。すべての記事別影響分析が要約されている場合は、レポートを締めくくります。そうでない場合は、ステップ2に戻ってさらに1～2文を追加し、すべての分析を網羅できるように進めます。
4. 最終的な要約レポートに業界名を明記し、その業界の企業に関するニュース記事の主要な影響を簡潔にまとめていることを確認します。

記事ごとのインパクト分析:
"""
{{"type": "in", "path": "node_step_impact_analysis_per_article", "title": "記事ごとのビジネスインパクト分析"}}
"""
業種名:
"""
{{"type": "in", "path": "ask_user_industry_name", "title": "業種名"}}
"""
重要事項: 出力から直接開始し、区切り文字を出力しないでください。
出力:

Present ImapctReport

レポートの形式を整えます。結構、細かく見た目を指定していますね。

レイアウト構成（Layout Organization）

ページ全体は、シンプルな1カラム構成を採用し、レポート内容に集中できるレイアウトとします。

ヘッダー（Header）
ページ最上部に配置するクリーンなヘッダー。
アプリケーション名、または「Industry Impact Report（業界影響レポート）」のような明確なタイトルを表示します。
メインコンテンツエリア（Main Content Area）
ページの中心となる領域で、サマリーレポートを掲載します。
- レポートセクションの最上部に、<h1> または <h2> を使用して「業界名（Industry Name）」を明確に表示します。
- 業界名の直下に、包括的なサマリーレポートを構造化されたテキストとして配置します。
  - 主なセクション見出しには <h3> または <h4>（例：「主要な影響」「分析サマリー」など）を使用
  - 詳細説明には <p>（段落）
  - 情報整理には <ul> または <ol>（箇条書き・番号付きリスト） を活用します
- メインコンテンツエリアは最大幅を設定し、大画面では中央寄せとし、左右に十分な余白（パディング）を確保します。
フッター（Footer）
ページ最下部に配置する最小限のフッター。
著作権表記やアプリのブランド情報などを表示します。
レスポンシブ対応
モバイルファーストを前提とし、画面サイズに応じて自然にレイアウトが適応する設計とします。

デザインスタイル（Style Design Language）

全体のビジュアルはプロフェッショナル・モダン・情報重視を基本とし、
信頼性・権威性・高い可読性を感じさせるデザインを目指します。

カラースキーム
- クールなブルー
- 落ち着いたグレー
- クリスプなホワイト
  を基調とした洗練された配色
  見出しや重要ポイントには、ディープティールや控えめなゴールドなどのアクセントカラーを控えめに使用し、上品さを演出します。
タイポグラフィ
- 見出し（<h1>〜<h4>）
  Montserrat、Lato、Open Sans などのモダンなサンセリフ体を使用し、明確な階層構造を持たせます。
  見出しサイズは十分に大きくしつつ、レスポンシブにスケーリングします。
- 本文（<p>、<ul>、<ol>）
  Roboto、Source Sans Pro、Noto Sans などの可読性の高いサンセリフ体を使用。
  行間は 1.6〜1.8em とし、長文でも快適に読めるよう配慮します。
余白・レイアウト設計
ページ全体に十分なホワイトスペースを確保し、
情報の詰め込み感を避け、認知負荷を下げつつ上質な印象を与えます。
各コンテンツブロック間の縦方向の余白は一貫性を持たせます。
デザインのゴール
情報的・権威的・洗練された印象
重要なビジネスインサイトを、明確かつ信頼感をもって理解できるデザインとします。

コンポーネント設計指針（Component Guidelines）

中核となる要素は、サマリーテキストを格納する
「レポートカード」または「コンテンツコンテナ」です。
- 明るくクリーンな背景色
- 控えめなシャドウまたはボーダー
  を用い、構造化された「浮き上がる」印象を与えます。
HTMLは セマンティックHTML を適切に使用します
（header、main、footer、h1〜h4、p、ul / ol など）
これにより、アクセシビリティ・保守性・SEOを確保します。
複雑なインタラクションは不要とし、
静的で分かりやすい情報提示に重点を置きます。