AP05-powerpagesを利用してみよう-概要からALMまで

Power Pagesを利用してみよう！ -概要からALMまで

本イベントのスポンサー様 Gold Sponsor Silver Sponsor Facilities & Staff Sponsor

自己紹介 こばやし たつや 趣味：音楽・ゴルフ・サッカー・釣り・映画・読書・自転車 @rockfun Power Platform専門教育サイト立ち上げました！ 特別講師として協業させていただきます。 https://power-education.info/ 4 株式会社TAKMASPOWER 益森先生 隅田先生

• https://power-education.info/

本日のセッションのゴール Power Pagesについて、サービスの概要を知っていただき、ユースケースを想定しながら 市民開発者の方からプロ開発者の方まで、利用方法をトータルに学ぶことができます。 1. Power Pages概要 2. 最新情報：Copilotの紹介 3. ウェブサイト構築デモ 4. プロ開発者向け 5. Q&A 5 市民開発者向け 10分 5分 市民開発者向け 機能・実装例紹介 15分 15分 5分（時間の都合上なくなったらごめんなさい！）

まずは質問です！ Power Pagesを利用したことがある方！ 挙手をお願いします。 6

" Power Pages概要 （市民開発者向け）

Power Pagesとは  Power Pagesは、MicrosoftのPower Platformに属するウェブサイト開 発ツールです（CMS）。  ビジネスユーザーがコーディングの専門知識なしに、素早く効率的に プロフェッショナルなウェブサイトを作成できるように設計されてい ます。 8

主な特徴:使いやすいデザインツール  わかりやすいインターフェースと豊富なテンプレートを利用して、簡 単にウェブサイトをデザインできます。 9

主な特徴:データ統合の強化  Dataverseとのシームレスな統合により、データ駆動型ウェブサイトを 構築できます。 10

主な特徴:セキュリティとコンプライアンス  Microsoftのセキュリティ基準に準拠し、企業レベルのデータ保護を提 供します。 1. 暗号化 2. アクセス制御 3. セキュリティ監査とログ記録 4. セキュリティ基準や規制に準拠。 11

Power Pagesを 構成するテクノロジー 01.HTML/CSS 02.Dataverse ウェブページの構造を定義する マークアップ言語 ウェブページのデザインやレイア ウトを定義するための言語 データ ストレージおよび管理テ クノロジ 03. Liquid 04. JavaScript 05.BootStrap Dataverseからのデータをペー ジに組み込む際に使用される テンプレート言語 ウェブページに動的な要素を追 加するためのプログラミング言 語 レスポンシブなウェブデザインを 簡単に作成できるフレームワー ク。v3.3.6 12

Power Pagesを選択する理由  既にDataverseを利用していること  優先事項が素早くサービスをリリース したいこと  サイトのメンテナンスやセキュリティ Microsoft Dataverse 13 に配慮したい

Power Pagesのユースケース例 BtoB会員制受発注サービス 社内 標準テーブル 社外 製品（Product） Dynamics 365 API Power BI SalesなどのCRMで商品情報や 注文状況などの管理を行う。 商品情報・在庫情報 データの可視化 Power Pages • ローカル認証 • Microsoft Entra ID • etc Microsoft Dataverse ②社員 取引先企業（Account） Power Apps Power Automate 作成した社内アプリや基幹システムからの情報提供 14 会社情報 ログイン ・フォーム（注文情報入力） ・ビュー（在庫一覧・検索） お客様 会員システムにログイン 商品をオーダー

" 最新情報 Power PagesのCopilotについて

17

サイトデザインの生成 18

サイト内の文章生成 19

入力フォームとテーブルの自動生成 20

サイト内のQ&A情報を利用した チャットボット作成 21

" 制作ライブデモ 今日はウルフゲームという架空のゲーム会社のサイトを ChatGPTとDALL-E 3共に構築します。

" プロ開発者向け ツール・実装例紹介

プロ開発者向けツール  Visual Studio Code（統合開発環境 (IDE) ）ブラウザ版・デスクトップ版 主にHTMLなどのソースコードの編集  Power Platform CLI（Visual Studio Code機能拡張） 複数人で開発できるように、GitHubなどでのバージョン管理をするために、 クラウド上のデータをローカルでダウンロードして編集できる機能 27

Visual Studio Code（ブラウザ版・デスクトップ版） 28

Power Pagesのファイル構成 • advanced-forms（フォームに関係するファイル類） • basic-forms（フォームに関係するファイル類） • content-snippets（ページ内で再利用するコンテンツ部品） • Lists（ビューに関係するファイル類スクリプト） • web-files（画像やCSSなどのファイル類） • web-pages（各ページごとにフォルダ分けされてHTML・CSS・ JavaScriptが設置されている） • web-templates（各ページレイアウトごとのパーツデータ） 29

Power Pagesのテンプレート構成 ¥web-templates¥Header.html Header 各ページのHTMLファイル（HOME) ¥web-pages¥ホーム¥ホーム.jaJP.webpage.copy.html 30 Footer ¥web-templates¥Footer.html ¥content-snippets¥Footer.ja-JP.html

組み込み Web テンプレート Power Pages 内で使用できる一連の作成済み Liquid テンプレートがあります。 それらを使用するには、参照として下記のリストを使用してそれらを名前別に 含める必要があります。 31

組み込み Web テンプレート（Liquid） 広告 名前 説明 このテンプレートは、広告を名前で、および広告の配置からランダムな広告を表示します。 ブログ 階層リンク このテンプレートは、最近のブログ投稿をリスト グループに表示します。 このテンプレートは、現在のページからホーム ページに戻るまでの上位ページのリンクを表示します。 子リンクのリスト グループ このテンプレートは、現在のページの任意の子ページへのリンクをリスト グループに表示します。 イベント: 今後 フォーラム 1 列レイアウト 幅広 2 列左レイアウト Code {% include 'ad' ad_name:'Name' %}{% include 'ad' ad_placement_name:'Placement Name' %} {% include 'blogs' %} {% include 'breadcrumbs' %} {% include 'child_link_list_group' %}{% include 'child_link_list_group' title_only:true %}{% include 'child_link_list_group' image_width:'64px', image_height:'64px' %} このテンプレートは、現在から 60 日後までに発生するイベントへのリンクを表示します。 {% include 'events_upcoming' %}{% include 'events_upcoming' number_of_days_in_advance:60 %} このテンプレートは、Web サイトのフォーラムをスレッドと、各投稿の対応番号とともに一覧で表示します。 {% include 'forums' %} このテンプレートは、階層リンク、ページ タイトル、ページのコピーのコンテンツを含む単一列のレイアウト {% extends 'layout_1_column' %}{% block main %}... {% endblock %} を表示します。 このテンプレートは、2 列のレイアウトを表示します。 左側の列の幅が、右側より広くなります。 左の列に階 {% extends 'layout_2_column_wide_left' %}{% block main %}...{% endblock 層リンク、ページ上部のページ タイトル、ページのコピーのコンテンツが含まれます。 %}{% block aside %}...{% endblock %} 幅広 2 列右レイアウト このテンプレートは、2 列のレイアウトを表示します。 右側の列の幅が、左側より広くなります。 右の列に階 {% extends 'layout_2_column_wide_right' %}{% block main %}...{% endblock 層リンク、ページ上部のページ タイトル、ページのコピーのコンテンツが含まれます。 %}{% block aside %}...{% endblock %} 幅広 3 列中央レイアウト このテンプレートは、3 列のレイアウトを表示します。 中央の列の幅が、右側および左側より広くなります。 {% extends 'layout_3_column_wide_middle' %}{% block left_aside %}...{% レイアウトには、中央の列に階層リンク、ページ上部のページ タイトル、ページのコピーのコンテンツが含ま endblock %}{% block main %}...{% endblock %}{% block right_aside %}...{% れます。 endblock %} このテンプレートは、埋め込み Liquid をサポートする HTML の編集可能なページのコンテンツを表示します。 {% include 'page_copy' %} ページのコピー ページ ヘッダー ポーリング 検索 サイド ナビゲーション スニペット トップ ナビゲーション 32 Web リンク リスト グループ このテンプレートは、ページ タイトルを表示します。 {% include 'page_header' %} このテンプレートは、ポーリングを名前で、およびポーリングの配置からランダムなポーリングを表示します。 {% include 'poll' poll_name:'Name' %}{% include 'poll' poll_placement_name:'Placement Name' %} このテンプレートは、単一テキストの入力と検索ボタンのついた基本的な検索フォームを表示します。 {% include 'search' %} このテンプレートは、垂直ツリー ビュー スタイルのナビゲーションを表示します。 最初のレベル (または指定 {% include 'side_navigation' %}{% include 'side_navigation' depth_offset:1 された深さオフセット) までの上位ページのリンク、現在のページの兄弟ページへのリンク、および現在のペー %} ジの子ページへのリンクを含みます。 このテンプレートは、編集可能な HTML のコンテンツ スニペットを名前で表示します。 {% include 'snippet' snippet_name:'Name' %} このテンプレートは、プライマリ ナビゲーション Web リンク セットのドロップダウン メニューを含む編集可 {% include 'top_navigation' %} 能なナビゲーション バーを表示します。 このテンプレートは、Web リンク セット用のリンクのリスト グループを表示します。 {% include 'weblink_list_group' weblink_set_name:'Name' %}

スタイルシート 33

JavaScript（郵便番号検索の実装） 34

外部スクリプトの読み込み Headerの最下部に、Scriptが配置されているので、ここに設置して動作した。 35

Power Platform CLI コマンドラインで、データをローカルにダウンロードして編集しアップロードすることができます。 36

PAC Power Pages コマンド 37

pac powerpages list --verbose 構築済みのサイト一覧が表示されます。 [1] 22bc4ee9-6b84-ee11-8179-000d3ac8f5d7 MBR [2] 14d948dc-6d84-ee11-8179-000d3ac8f5d7 Site design 005 [3] 609630aa-6c84-ee11-8179-000d3ac8f5d7 ASP [4] 8f6210b4-6a84-ee11-8179-000d3ac8f5d7 Site design 001 [5] 00da0faf-fbe1-4358-9839-aa17352e9bd7 wolf-dev - wolf-dev [6] 8cd44064-6d84-ee11-8179-000d3ac8f5d7 Site design 003 v1 [7] 7b62b962-6e84-ee11-8179-000d3ac8f5d7 Building Permit v1 [8] 40bac126-6d84-ee11-8179-000d3ac8f5d7 Site design 002 v1 [9] 636efbed-6c84-ee11-8179-000d3ac8f5d7 Blank Page [10] fc50de9f-6d84-ee11-8179-000d3ac8f5d7 Site design 004 38 v1 v1 v1 v1 v2 v1 v1

pac powerpages download 現在の Dataverse 環境から Power Pages Web サイト コンテンツをダウンロードし ます。 pac powerpages download --path “C:¥portals” --webSiteId f88b70cc-580b-4f1a-87c3-41debefeb902 -modelVersion 2 注意：データ モデル Power Platform CLI パラメーター Power Platform CLI を使用して、拡張データ モデルを使用する Web サイトの構成データをアップロードまたはダウンロードする場 合は、パラメーターを使用する必要がありますmodelVersion。値2は、拡張データ モデルを使用する必要があることを示します。 https://learn.microsoft.com/en-us/power-pages/admin/enhanced-data-model#data-model-powerplatform-cli-parameters 39

• https://learn.microsoft.com/en-us/power-pages/admin/enhanced-data-model#data-model-power-

pac powerpages upload 現在の Dataverse 環境から Power Pages Web サイト コンテンツをアップロードしま す。 pac powerpages upload --path "C:¥Users¥kobayashi¥Downloads¥wolf-dev---wolf-dev" 40

GitHubでのバージョン管理 41

ご清聴いただき ありがとう ございました！ 43