1. システムとオフィスの融合|株式会社QES
  2. media
  3. マイクロソフトソリューション Power Apps Power Platform
  4. PCF Galleryのカスタムコンポーネントをキャンバスアプリに埋め込んでみた

QESブログ

PCF Galleryのカスタムコンポーネントをキャンバスアプリに埋め込んでみた

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 今回のブログでは、Power Apps上で利用可能なコーティングによってオリジナルのコンポーネント(カスタムコンポーネント)を作成できるPowerApps Component Framework(PCF)を活用する内容となっています。

何かを作る際に、ゼロから作成すると中々大変ですよね・・・
そこで、「PCF Gallery」というカスタムコンポーネントが共有されているサイトから、カスタムコンポーネントをダウンロードし、キャンバスアプリに埋め込むところまでを実施していきたいと思います!

※環境は万全です!という方は2章から見てください。
※Power Appsについて、弊社記事の「第1回 Power Apps 概要編」を参照してください。
※PowerApps Component Framework(PCF)については「Power Apps component frameworkの概要」を参照してください。

 

1.    環境構築

参考URL:https://docs.microsoft.com/ja-jp/powerapps/developer/common-data-service/powerapps-cli
まずは以下のURLから12.18.3LTS Node.jsをインストールします!

URL:https://nodejs.org/en/

 

インストールが無事完了したか確認します。

 

次に.NET4.6.2フレームワークをインストールします。
対象は画面上の「Download .NET Framework 4.6.2 Download Pack」です。

URL:https://dotnet.microsoft.com/download/dotnet-framework/net462

 
.NET Framework 4.6.2以降がインストールされているか確認します。
Power shell で以下コマンドを入力しTrueがきたらインストールできているはずです。
「(Get-ItemProperty "HKLM:SOFTWARE\Microsoft\NET Framework Setup\NDP\v4\Full").Release -ge 394802」

※詳しく調査したい方は以下URLを参考に!
URL:https://docs.microsoft.com/ja-jp/dotnet/framework/migration-guide/how-to-determine-which-versions-are-installed

 

次はPowerApps CLIをインストールします。
URL: https://aka.ms/PowerAppsCLI

pacコマンドを入力しインストールできるか確認します。

 

念のため、以下コマンドで最新バージョンを取得します。
「pac install latest」
最後にmsbuildを確認します。
コマンドプロンプト上で「msbuild」コマンドを入力します。
バージョン情報が表示されれば使用可能な状態です。

 

※msbuild実行時に「'msbuild' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。」
が表示された場合には、pathを通す必要があります。Windows Vista以降のOSでは標準でMSBuildが格納されています。

※Pathの通し方については下記のURLが参考になります。
URL:https://www.atmarkit.co.jp/ait/articles/1805/11/news035.html

※OS標準付属のMSBuildについては下記のURLが参考になります。
URL:https://www.atmarkit.co.jp/ait/articles/1505/13/news016.html

※Msbuildの詳細については下記のURLが参考になります。
URL:https://docs.microsoft.com/ja-jp/visualstudio/msbuild/msbuild?view=vs-2019

環境構築はこれで終了です!

  

2.    PCF Galleryからダウンロード

URL:https://pcf.gallery/

上記のURLにアクセスします。

各コンポーネントの下のほうに、筆マークがついているのですが、こちらのマークがキャンパスアプリに対応しているマークです。

今回は「Runtime info」というRichard Wilson氏が作成したカスタムコンポーネントを使用したいと思います。
できることは、Canvasアプリを実行しているブラウザーとデバイスに関する追加情報を取得できるようになります。例えば、使用しているブラウザの種類やバージョン情報などを取得できるようです。

 

「Download」ボタンを押下します。


Git Hubに飛びます。

画面左上の「Code」ボタンを押下します。

中央右上あたりの「code」ボタンから「Download ZIP」でダウンロード可能です。
PCF Galleryからのダウンロードは完了です!

3.    カスタムコンポーネントのパッケージ化

解凍したフォルダ内から「RuntimeInfo」をコピーし、任意のフォルダに配置します。

 

コマンドプロンプトを開き、配置したフォルダまで移動します。
動作に必要なモジュールをインストールするため「npm install」を実行します。


次に「npm run build」を実行し、ビルドします。


「npm start」を実行し、デバックします。
以下のような画面が表示されれば成功です。


今回のカスタムコンポーネントは、表示は透明なので右側のプロパティを確認してください。
ユーザエージェントの情報や、ブラウザの情報が取得できていることを確認できます。


いよいよパッケージ化していきます。
はじめに、「Solution」配下の「RuntimeInfoComponent」まで移動し、
「msbuild /t:restore」を実行します。

※「.cdsproj」ファイルがあるパスで実行しますので、別のカスタムコンポーネントをダウンロードした際は、
「Solution」直下にある場合もあります。

 

同じフォルダで「msbuild」を実行します。


「bin」フォルダ配下の「Debug」にzipファイルが作成されていれば、パッケージ化完成です。


 

4.    ソリューションのインポート

Power apps にサインインし、ソリューションを選択します。

新しい環境の作成が表示された方はボタンを押下し、環境を作成します。
※Power Apps Per user ライセンスの30日間無料試用が開始されます。

 


次にデータベースを作成します。

  

データベースが作成されたら、インポートボタンを押下します。

パッケージ化手順で作成したzipファイルを選択し次へを押下します。
※「managed」ではないほうを選択します。

 

次にインポートを実施します。
※インポートが完了するまでに時間がかかる場合があります。

 

Power appsのソリューション画面に戻り、先ほど指定したソリューションが存在すれば成功です!

5.    キャンバスアプリにコンポーネントを追加

はじめにpower apps を開き、歯車マーク(設定)から管理センターを開きます。

 

環境を選択し、設定ボタンを押下します。

 

製品タブ内の機能を選択します。

 

キャンバス アプリの Power Apps Component Frameworkをオンにします。

 

つぎに、コンポーネントを適用したいアプリを開きます。
※私の場合は新規の環境なので、作成します。

ファイルタブの設定から詳細設定を開き、コンポーネントが有効になっているかを確認します。

 

「挿入タブ」内「カスタム」の「コンポーネントのインポート」へと移動します。

「コード」タブを押下すると、インポートしたコンポーネントが表示されますので、選択し、「インポート」を押下します。

 

左側のウィンドウの + アイコン を 押下し、コードコンポーネントを確認すると、
作成したコンポーネントが表示されます。

 

表示されたコンポーネントをキャンバスアプリにドラッグ&ドロップするか、右クリックから「キャンバスアプリに追加」を押下すれば適用完了です!

 

せっかくなので、ブラウザの情報をラベルに表示してみましょう!
テキストラベルを追加します。

 

数式入力欄に先ほど追加した「カスタムコンポーネントの名称.Browser」を入力すると、
ブラウザの種類が表示されます。

 

 

以上で終了です!おつかれさまでした!!

弊社ではPower Platformに関連する記事がたくさんあります!
一部ですが以下に弊社記事のリンクを置きました。ぜひ参照ください!

Power Appsの記事(第1回 Power Apps 概要編)
Power BIの記事(Power BIを使って10分でグラフを作ってみた



※このブログで参照されている、Microsoft、Windows、ASP.NET Core、PowerApps、その他のマイクロソフト製品およびサービスは、米国およびその他の国におけるマイクロソフトの商標または登録商標です。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

お気軽にお問い合わせください。

ページのトップへ