[2025-06-21]Power Apps でAR的なダムカードリーダーアプリを作ってみた

Power Apps でAR的な ダムカードリーダーアプリ を作ってみた 奇想天外ビリビリ Power Apps同好会 2025.6.21 登壇大会 #4 ささみ 1

自己紹介 Sasami (ささみ)​ • SE → 社内SE → 情シス → DX推進 → 情シス​ → ? • 愛知県出身・在住 • Microsoft 365 管理者 • X(Twitter)： @sasami_ axis • ブログ： https://sasami-axis.hatenablog.com/ • Docswell：https://www.docswell.com/user/sasami_axis_2470 • 好きなもの・趣味： – 猫, フェレット, ドライブ, ゲーム, – ガンプラ, 写真 – Power Automate 2

• https://sasami-axis.hatenablog.com/
• https://www.docswell.com/user/sasami_axis_2470

ダムカードとは？ • ダムカードは日本のダムを紹介するコレクションカードです。 • 全国各地のダムを訪れた人に無料で配布されています。 • カードにはダムの写真や名前、場所、大きさなどの情報が書 かれており、裏面には特徴や歴史が紹介されています。 3

アプリを作ったきっかけ ダムカードをスマホアプリでスキャンすると施設に関連した動画が見られるAR(Argumnted Reality:仮想現実) 対応サービスがあるらしい ARダムカードについて：水資源機構 https://www.water.go.jp/honsya/honsya/torikumi/tourism/damcard/exp/ar.html ……が、何度試しても何も表示されませんでした。 表示されないなら自分で作ってしまえ！ 4

• https://www.water.go.jp/honsya/honsya/torikumi/tourism/damcard/exp/ar.html

アプリのコンセプト ダムのデータ 地図 ルート案内 5

アプリのイメージ • • • • • ダムの地図 ダムの情報 ダムの概要 近くのダム Google Map連携 6

解説 7

解説 - やっていること 1.カード情報の読み取り 2.ダム情報の取得 Bing Custom Search API AI Builder Open Street Map Nominatim API AI Builder 8

解説 1.カード情報の読み取り • AI Builder で下記プロンプトで撮影 した画像から取得 • サンプルダムカード画像と撮影画像 を比較してダムカードの有無を判定 • カードのレイアウトの説明 • 読み取り結果をJSONで出力 9

解説 2.ダム情報の取得 1.ダムの座標を取得 • Open Street Map Nominatim API でダム名から座標(緯 度・経度)に変換 2.Web検索 • Bing Custom Search APIでWebページを検索 • AI Builderで取得した情報を要約 10

解説 2-1.ダムの座標を取得 Open Street Map とは • https://www.openstreetmap.org OpenStreetMap (OSM) は、誰でも自由に地図を使えるよう、みんなでオープンデータの地理情報を 作るプロジェクトです。このプロジェクトでは、誰でも自由に参加して地図を編集し、利用するこ とができます。 • https://www.openstreetmap.org Nominatim API とは • Nominatim APIは、そんなOpenStreetMap (OSM) のデータを利用して、場所を名前や住所で検索す るためのジオコーディングAPIです。 • https://nominatim.org • 今回はNomination API をPower Platformのカスタムコネクタ化して利用してみました。 • ジオコーディング(地名や住所から地図上の位置を取得) https://nominatim.org ※これらのサービスは無償で利用できますが、今回の私のやり方ではカスタムコネクタ化する為にPower Apps Premium ライセンスなどが 必要になります 11

• https://www.openstreetmap.org/
• https://nominatim.org/
• https://www.openstreetmap.org
• https://nominatim.org

解説 2-1.ダムの座標を取得 • カスタムコネクタの作り方は下記のブログに掲載しています • Open Street Map の Nominatim APIのカスタムコネクタを作成してみた • https://sasami-axis.hatenablog.com/entry/2024/03/11/214606 - ささみ学習帳 12

• https://sasami-axis.hatenablog.com/entry/2024/03/11/214606

解説 2-2.Web検索してダム情報を取得 1.検索 Bing Custom Search APIでダム・カード情報を 検索し上位2ページのページURLを取得 (ダムの情報・ダムカードの情報２系統で取得) 2.ページを取得 それぞれの上位2ページをHTTPコネクタで取得 しテキスト変換 3.要約 取得したテキストをAI Builder で整える 13

解説 Bing Custom Search APIとは • Microsoft の検索エンジン Bingを使って、特定 のサイトや一連のWebサイトからコンテンツを 検索することができるAPI • 従量課金制のAzureのサービス(無料枠である程 度利用可能) 【重要】Bing Search API は2025-8-11に提 供終了 します 14

解説 Bing Custom Search APIのはじめ方 (Azureを使えるようにした上で) 1. Azure PortalでBing Custom Searchリソースを作成する 2. Bing Custom Searchでインスタンスを作成する 1. 3. https://www.customsearch.ai/ APIで実行する 【重要】Bing Search API は2025-8-11に提供 終了しま す 15

• https://www.customsearch.ai/

解説 2-2-1.Bing Custom Search API でページ取得 HTTPアクションでAPI実行 【重要】Bing Search API は2025-8-11に提 供終了 します 16

解説 2-2-1.Bing Custom Search API でページ取得 • Bing Custom Search について詳しくはブログで解説しています • Power Automate クラウドフローで Bing Custom Search APIを利用してWeb検索を行う - ささみ学習帳 • https://sasami-axis.hatenablog.com/entry/2024/05/31/213938 • ※Web全体から検索するのであればBing Search APIが使えます • Power Automate クラウドフローで Bing Web検索を行う - ささみ学習帳 • https://sasami-axis.hatenablog.com/entry/2024/05/29/222409 【重要】Bing Search API は2025-8-11に提供 終了しま す 17

• https://sasami-axis.hatenablog.com/entry/2024/05/31/213938
• https://sasami-axis.hatenablog.com/entry/2024/05/29/222409

解説 2-2-2.Webページの取得 • Webページの本文を取得してテキスト変換し文字列変数に格納 18

解説 2-2-3.AI BuilderでWebページ情報を要約 • AI Builder でWebページデータを要約してJSONで取得 Webページの テキストを抽 出した変数 19

まとめ 20

【重要】Bing Search API は2025-8-11に廃止 今回のアプリの寿命は 残り2ヶ月弱 https://azure.microsoft.com/en-us/updates?id=492574 https://www.itmedia.co.jp/news/articles/2505/16/news130.html 21

• https://www.itmedia.co.jp/news/articles/2505/16/news130.html

まとめ APIなどの外部サービスを利用する場合は将来のロードマップや動向に注視しておこう • マイナーなものは特に注意 アプリはダムカード管理アプリとして再構築予定 • 取得済みのダムカードを管理するアプリに 22

ご清聴ありがとうございました 23