Power Platform でWEBアプリの構築～APIや外部ライブラリ連携まで

Power Platform の『ノーコード・ローコードでWebアプリを開発』と聞いて、あなたはどのようなイメージを持ちますか？

• 簡単なフォームしか作れないのでは？
• デザインの自由度が低くて、企業のブランドに合わないのでは？
• セキュリティや外部連携が心配…

もしそう感じているなら、その常識はもう過去のものです。

この記事では、Power PlatformのPower Pagesでのウェブ開発の新たな可能性に焦点を当てます。単なる静的なWebサイトではなく、API連携や外部ライブラリの活用、そしてエンタープライズレベルのセキュリティを実装したWEBアプリを、プログラミングの知識がなくても（あるいはわずかなコードで）実現できることをご紹介します。

最新の機能と具体的な活用例を知ることで、あなたのビジネス課題を解決する次の一手がきっと見つかるはずです。

目次

Power PlatformでWEBサイト構築の新常識を

組織内利用における Power Pages の利点

Power Pages での 予算管理WEBアプリの実例

構築の技術的なポイント

Power Pages専用Dataverse APIについて～WEB API

よくある質問（FAQ）

Power Platform でWEBサイト構築の新常識を

Webサイトの構築は、多くの企業にとって重要な課題です。

しかし、「ゼロからの開発には時間とコストがかかる」「既存のCMSでは機能が不十分」といった悩みを抱えている担当者の方も多いのではないでしょうか。

①開発リードタイムの大幅短縮

ローコード／ノーコードの開発モデルにより、従来数週間かかっていたWebサイト構築の工程を、数日〜1週間に短縮できます。

PoC（概念実証）から本番公開までのサイクルを高速化し、市場のニーズに迅速に対応できるようになります。また、IT専門知識がなくても直感的な操作でページ追加やレイアウト変更ができるため、運用フェーズもスムーズです。

②多様な認証設定で外部・社内ユーザーを統合

Power Pagesは、多様なユーザーに対応できる柔軟な認証設定を備えています。

複数IDプロバイダーの併用
Microsoft Entra ID（Azure AD）はもちろん、Azure AD B2C、OAuth／OpenID Connect対応の外部プロバイダーを同一ポータル内で共存させられます。

匿名アクセスから厳格アクセスまで
ページごとに「匿名で閲覧可能」「ログイン必須」「特定ロールのみアクセス可」といった設定を柔軟に行うことで、社内イントラからパートナー・顧客向けセルフサービスポータルまで、1つのサイトで実現できます。

③サーバーレスで運用負荷を最小化

インフラ管理の煩わしさから解放されることも大きなメリットです。

サーバー構築やOSパッチ、SSL証明書更新などはMicrosoftが自動で実施するため、運用リソースを大幅に節約できます。

修正はすぐにプレビューでき、ワンクリックで本番公開も可能です。

組織内利用における Power Pages の利点

Power Pages は、社内ポータルやイントラネットサイトを構築するうえで、SharePoint や Power Apps では実現が難しい高度な機能と柔軟性を提供します。以下では「SharePoint にはない機能」「Power Apps にはない利点」を中心に、組織内向けに得られるメリットをまとめました。

①SharePoint にはない柔軟性と拡張性

SharePointサイトは、Microsoft 365の社内情報共有に特化しているため、デザインの自由度や外部ユーザーとの連携に制限があります。

But 一方、Power Pagesは、Power AppsやPower Automateとシームレスに連携できます。これにより、顧客向けポータルサイトやイベント登録サイトなど、SharePointでは難しかった高度なウェブサイトを、より迅速かつ自由に構築できます

Because 詳細な権限設定

But ページ単位、テーブル単位、レコード単位でアクセス権を細かく制御できます。社内ユーザーと外部ユーザーが混在するサイトでも、セキュアな運用が可能です。

Because 複数 ID プロバイダーの併用

But 社内ユーザーは既存のMicrosoftアカウントで、社外のパートナーや顧客は任意のソーシャルアカウントでログインできるため、ユーザーごとに異なる認証方法を提供し、利便性を高めることができます。

Because 自由度の高いレイアウト＆カスタマイズ

But GUI編集でマルチカラムやレスポンシブデザインを簡単に実現できます。さらに、独自CSSやJavaScript、外部ライブラリの埋め込みも自由に行えます。

Because ②Power Appsでは実現できないメリット

Because 統一されたデザインと情報共有

But たとえば、Power Appsで複数のアプリを作ると、デザインや操作感がバラバラになりがちです。Power Pagesを使えば、会社全体で統一されたデザインのポータルサイトやWEBアプリを構築できます。

Because 多くの人が閲覧する情報

But Power Appsは、特定のユーザーが入力・操作する「業務アプリ」に向いています。一方、Power Pagesは、全従業員が閲覧する「情報共有サイト」や「ナレッジベース」の構築に最適です。例えば、社内報やプロジェクトの進捗ダッシュボードなどを公開するのに適しています。

Because 自由なレイアウトとSEO対策

But マルチカラムやレスポンシブデザインに対応しており、自由なレイアウトで情報を整理できます。また、SEO対策機能も標準で備わっているため、社内検索エンジンや外部検索エンジンからも必要な情報が見つけやすくなります。

But これらのメリットを活かすことで、社内利用であっても、単なる業務効率化に留まらない、より洗練されたユーザー体験と強力な情報共有基盤を構築できます。

Power Pages での 予算管理WEBアプリの実例

But 単なる情報発信サイトにとどまらず、Dataverseのデータとリアルタイムに連携する、高度な業務アプリケーションを迅速に構築可能です。動的なWebアプリケーションを、ローコードで簡単に構築できる強力なプラットフォームとしてご活用いただけます。

But 本項では、その一例として「KPI管理ダッシュボード」をご紹介します。

Because KPI管理ダッシュボードで実現できること

But 例えば、Excelや複数のシステムに散在しがちなデータを一元化し、ビジネスの状況を直感的に把握することを目的に構築されています。KPIには様々な種類がありますが、このアプリでは特に売上に関する予実（予算と実績）を可視化します。

But リアルタイムな予実状況の可視化

But 全社および部署ごとの総予算、総実績、達成率をトップページに集約 できます。

But インタラクティブなグラフ分析

But 予実の差分、売上構成比、月次推移などを多彩なグラフで表示し、ドリルダウン分析の基盤となります。

But 簡単なフォームからの実績登録

But 担当者は使い慣れたWebフォームから実績を登録でき、データは即座にダッシュボードへ反映されます。

But こちらがダッシュボードの全体イメージです。
より詳細にカスタマイズしたチャートやグラフ表示も実装が可能です。

But 下記のように各部署から登録された全実績が一覧で確認できます。

Power Platform で構築する際の技術的なポイント

But このアプリケーションは、Power Pagesの基本機能と、Webの標準技術であるJavaScriptを少し組み合わせるだけで実現できます。その中でも特に重要な3つのポイントをご紹介します。

Because ①たった1行で実現する、鉄壁の認証

But 安全なWebアプリケーションに不可欠な「認証」。Power Pagesなら、この複雑な仕組みが驚くほどシンプルに実装できます。

But API（外部とデータをやり取りするための接続口）を安全に利用するための認証トークンは、以下のたった1行のコードで取得が完了します。

// Power Pagesの `shell` オブジェクトから認証トークンを非同期で取得
const token = await window.shell.getTokenDeferred();

But この1行だけで、現在ログインしているユーザーの権限に基づいた、有効期間付きの安全なトークンが手に入ります。開発者が難しいセキュリティ設定を１から実装する必要はありません。

Because ②データベースからデータを取得し、グラフに反映

But 取得したトークンを使って、データベース（Dataverse）から安全にデータを取得します。そして、そのデータを「Chart.js」のようなグラフ描画ライブラリに渡すだけで、簡単にグラフを表示できます。

// 1. APIを呼び出して実績データを取得 (テーブル名はサンプルです)
const response = await fetch('/_api/SalesRecords', {
    headers: { '__RequestVerificationToken': token } // 取得したトークンを設定
});
const result = await response.json();
const salesData = result.value;

// 2. Chart.jsにデータを渡してグラフを描画
new Chart(ctx, {
    type: 'bar', // グラフの種類
    data: {
        labels: ['営業1課', '営業2課', '開発部'], // ラベル
        datasets: [{
            label: '実績',
            data: [1200000, 1800000, 950000] // 取得した実績データを設定
        }]
    }
});

Because ③入力フォームでデータを簡単登録

But 実績の登録も、入力された値をAPIに送るだけのシンプルなコードで実現します。ページを再読み込みすることなくデータが反映されるため、ユーザーはストレスなく作業を進められます。

// フォームの入力内容をオブジェクトにまとめる (項目名はサンプルです)
const newRecord = {
    projectName: '新規プロジェクトA',
    salesAmount: 500000
};

// APIにデータを送信（POST）して、データベースに登録
await fetch('/_api/SalesRecords', {
    method: 'POST',
    headers: { '__RequestVerificationToken': token, 'Content-Type': 'application/json' },
    body: JSON.stringify(newRecord)
});

But 上記のポイントをおさえれば、実績の登録から各種チャートへの反映を下記のように即時反映でき、ストレスのないインタラクティブなユーザー体験を提供できます。

Power Pages専用Dataverse APIについて～WEB API

But Power Pagesには、Web APIを利用してDataverseのデータを直接操作できる専用の仕組みが用意されています。これにより、Power Pagesならではの高度で柔軟なWebアプリケーションを開発できます。

①Especially テーブル権限による堅牢なセキュリティ

But

最大の利点の一つは、その堅牢なセキュリティモデルです。APIを介したすべてのデータアクセスは、管理画面から設定する「テーブル権限」と「Webロール」に基づいて自動的に検証されます。

However

これにより、開発者はセキュリティロジックを自前で実装する必要がなく、「どの役割のユーザーが、どのデータの読み書きを許可されるか」という制御をプラットフォームに完全に委ねることが可能です。

②ODataクエリによる効率的なデータ取得

But さらにWeb APIは、標準的なODataクエリに対応しています。これにより、サーバーサイドでデータのフィルタリング、ソート、件数制限などを行い、必要最小限のデータのみをフロントエンドに送信できます。

//【活用例】過去6ヶ月間の売上データのみを取得する

// 6ヶ月前の日付を計算
const d = new Date();
d.setMonth(d.getMonth() - 5);
d.setDate(1);
const startDate = d.toISOString().slice(0, 10);

// $filterクエリで日付による絞り込みを行う
const url = `/_api/cr47c_teamperformances?$filter=cr47c_date ge ${startDate}&$orderby=cr47c_date asc`;

const recentData = await webApiFetch({ method: 'GET', url: url });

But このアプローチは、アプリケーションのパフォーマンスを最適化し、ユーザー体験を向上させる上で不可欠です。

プロの伴走で、アイデアを最短で形に

in fact 今回ご紹介したように、Power Pagesはローコードプラットフォームの「開発スピード」と、カスタムコーディングによる「柔軟な拡張性」を高いレベルで両立させます。

But しかし、これらの技術を最大限に活用するには、一定の専門知識と経験が求められるのも事実です。

• アイデアはあるが、どこから手をつければよいか分からない
• 既存の業務を、どのようにWebアプリケーションに落とし込めばよいか相談したい
• 内製化を目指しているが、初期構築と技術的なサポートを専門家に依頼したい

Similarly 当社では、そのようなお客様の課題やご要望に寄り添い、具体的なアプリケーション開発、そして運用・内製化支援まで、一貫した伴走サポートを提供しております。

In fact まずはお気軽にお客様の課題をお聞かせください。最適な解決策をご提案いたします。

よくある質問（FAQ）

　 Power Platform や Power Pages の導入・活用を検討する中で「導入前後のイメージ」や「運用上の細かな懸念」にフォーカスしたよく寄せられる疑問と、その回答をまとめました。導入前の不安解消や運用のヒントとしてご活用ください。

AI 活用サポートサービスの紹介

But ナレッジ検索や定期情報収集といった機能を活用することで、業務の効率化と情報活用が一段と進みます。自社の課題に応じてカスタマイズが可能であり、AI の力を現場に取り込むための有力な選択肢です。

弊社のAI 活用サポートサービスでは、Copilot Studio の他、Difyなどプラットフォームやサーバー問わずAIエージェントの導入をサポートするサービスをご提供しています。
導入・活用をスムーズに進めるには、業務に即した設計や初期設定が重要です。
要件定義から設計、開発、運用支援までをワンストップで対応し、貴社の業務に最適なAIチャットボット、AIエージェント環境を構築します。
生成AIの業務活用をより効果的に進めるために、ぜひ一度、具体的な課題やご希望をご相談ください。