【Power Pages】第1回 Power Pagesとは

普段、業務でPower Apps等のアプリ開発をしていますが、今回はじめてPower Pagesを使ったサイト作成を行う機会がありました。

本記事では、その際に調べたPower Pagesについての情報や、試用版の作成方法を紹介していきたいと思います。

概要

Power Pagesとは、Microsoft社が提供する業務アプリケーション開発基盤「Power Platform」のサービスの1つで、ローコード*1で顧客向けのウェブサイトやサイトコンテンツを作成し、管理できるサービスです。

他のウェブサイト作成サービスとの違いは次の2点です。

  • 社外のユーザー向けのサイト公開だけでなく、様々な認証方式で社外ユーザー登録機能を提供することができる
  • Power Platformの他のサービス(Power Apps、Power Automate、Power BI、Power Virtual Agents)との連携ができ、さらに高度な業務アプリケーションを作成できる

特徴

Power Pagesの基本的な特徴は以下4つになります。

Power Pages を使用した Web サイトの構築。 Microsoft Power Platform のさまざまなコンポーネント。

引用元:Power Pages とは | Microsoft Learn

  1. 自社組織内のあらゆる従業員が魅力的な Web サイトをコーディング不要でデザインし、リリースできます。
  2. さらにサイトの作りこみが必要な場合は、開発者が高度な Web デザイン ツールを使用して、質の高いページに仕上げることができます。
  3. サイトの管理は、1つの管理ダッシュボードでコンテンツを一元管理でき、セキュリティやコンプライアンスに関する特に厳格な要件にも対処できます。
  4. Power Platform や他の Microsoft サービスをシームレスに統合し、ダッシュボード、ドキュメントの共有、チャットボット、自動化などの機能を追加することで、よりスマートなエクスペリエンスが実現できます。

Power Pagesの利用方法

それでは、Power Pagesの利用方法に移っていきます。

Power Pagesを利用するには、既存のPower Appsの有償ライセンス*2が必要になります。

ただし、ライセンスがない場合でも試用版を利用する方法があります。

今回は、Power Pagesの試用版*3を利用する事とし、その方法を解説していきます。

Power Pagesの試用版の有効化

  1. Microsoft EdgeやGoogle Chrome等のブラウザのURL入力欄に以下のサイトURLを入力し、Enterキーをクリックします。
    https://powerpages.microsoft.com/ja-jp/

  2. Power Pagesのサイトが表示されるので、右上の「無料試用版」をクリックします。

  3. 試用版を作成したい環境のアカウントを入力します。今回は試用版のMicrosoft 365アカウントでPower Pagesの試用版を試しました。

  4. 電話番号を入力し、送信をクリックします。

  5. ようこそ画面が表示されるので、「開始する」をクリックします。

  6. 下図の選択肢ボタン「いいえ、過去に構築したことはありません」、「はい、以前にも作成しています」、「はい、業務で構築します」をクリックするか、画面右下の「スキップ」をクリックします。今回は「スキップ」をクリックしました。

  7. テンプレートページが表示されます。

  8. 今回は、QAサイトをテンプレートから作成してみます。
    「よくある質問」をクリックすると、「テンプレートのプレビュー選択」と、「このテンプレートを選択する」が表示されるので、今回は「テンプレートのプレビュー選択」をクリックします。

  9. 「よくある質問」テンプレートのデスクトップ向けのプレビューが表示されます。

  10. プレビュー画像下部のモバイルタブをクリックすると、モバイルのプレビューが表示されます。
    プレビュー確認後、画面右下の「このテンプレートを選択する」をクリックします。

  11. サイトの名前、Webアドレスはデフォルトのままで、「完了」をクリックします。

  12. 作成中の画面が表示されます。10分程度経過すると、作成が完了します。
    ※サイト作成中は、編集、プレビューはできません。

作成時トラブルシューティング

  1. エラーが発生した場合は、再度サイトの作成を実行してください。

  2. 作成失敗したサイトは「…」をクリックし、削除を選択することで削除ができます。

  3. 削除をクリックします。

参考:Power Pagesの試用版の利用方法
無料試用版 - Power Pages にサインアップする | Microsoft Learn

サイトの編集

次に、テンプレート内での、ヘッダーやサイト内テキストの編集方法を解説します。

  1. Power Pagesのサイト作成後、「編集」ボタンクリックします。
  2. Power Pagesで作成したサイトの編集画面が表示されます。
  3. 会社名の付近をクリックすると、「サイトヘッダーの編集」が表示されるので、クリックします。
  4. サイトヘッダーの編集では、サイトのタイトルの変更や、サイトロゴの画像差し替え、および表示、非表示等を設定できます。
    ここでは、自社の会社名に変更し、会社のロゴ画像があれば、「画像のアップロード」をクリックし、画像をアップロードします。
  5. サイト内の文言も、編集したい箇所を選択し、文字を修正します。
    ※一部テンプレートで利用されているカスタムコンポーネントは、この画面上では編集できない箇所があります。

  6. サイト内のテキスト「何かお困りですか?」を選択し、任意の文字列を入力します。
    ※例:今回は「製品問い合わせサイト」と修正しました。

  7. 変更後、画面右上の「同期」をクリックすることで、変更を保存できます。

     

  8.  また、「プレビュー」をクリックすることで、サイトにアクセスした際の表示が確認できます。

まとめ

  • Power Pagesとは、ローコードでプログラム知識がなくても、業務用ウェブページが作成できるサービスです。
  • 様々なテンプレートが用意されているため、テンプレートを利用するとノーコードでサイトをすばやく作成できます。

以上、本記事ではPower Pagesの試用版環境でサイトを作成し、サイトヘッダーと本文テキストを編集してみました。

次の記事は引き続きテンプレートの編集方法に触れていきます。

*1:ローコードとは? ローコード プラットフォーム ガイド | Microsoft Power Apps

*2:Microsoft 365/Office365を除く、Power Appsの有償ライセンス、詳細はライセンスガイドラインを参照してください。

*3: Power Pagesのライセンスを試用するには企業用のMicrosoft 365やOffice 365サービスのライセンス が必要になります。

執筆担当者プロフィール
鄭 白葦

鄭 白葦(日本ビジネスシステムズ株式会社)

ビジネスソリューション事業本部に所属。 はじめはインフラエンジニアから始まり、スクラッチ開発→コンサル→ノーコード・ローコード開発と幅広く経験。 趣味はモノづくりなので自宅の改造をDIYや3Dプリンターでやっています。

担当記事一覧