Visual Studio Codeは、Windows、macOS、Linux 用の軽量で強力なソース コード エディターです。 JavaScript、TypeScript、Node.js をサポートし、C++、C#、Java、Python、PHP、Go などの他の言語や、.NETや Unity などのランタイム向けの拡張機能の豊富なエコシステムを備えています。 GET started with VS Code のVisual Studio Codeについて説明します。
Visual Studio Codeを使用すると、extensions を使用して機能を拡張できます。 Visual Studio Code拡張機能を使用すると、全体的なエクスペリエンスにさらに多くの機能を追加できます。 この機能のリリースでは、Visual Studio Code拡張機能を使用してPower Pagesを操作できるようになりました。
Power Pages用のVisual Studio Code拡張機能
メモ
- Power Pages機能を機能させるには、node.jsがVisual Studio Codeと同じワークステーションにダウンロードおよびインストールされていることを確認する必要があります。
- Power Platform Tools のみがインストールされ、Power Platform Tools と Power Platform Tools [プレビュー] の両方がインストールされていないことを確認してください。 詳細については、既知の問題 をご覧ください。
Power Platform Tools をインストールおよび設定する方法を説明するアニメーション。
前提条件
Power PagesにVisual Studio Code拡張機能を使用する前に、次の作業を行う必要があります。
Visual Studio Codeをダウンロード、インストール、構成します。 詳細情報: ダウンロード Visual Studio Code
CLI を使用して、Power Pages CI/CD サポート用に環境とシステムを構成します。 詳細情報: Microsoft Power Platform CLI (プレビュー)
拡張機能Visual Studio Codeインストールする
Visual Studio Codeをインストールした後、Visual Studio Code用 Power Platform ツール プラグインの拡張機能をインストールする必要があります。
Visual Studio Code拡張機能をインストールするには:
Visual Studio Codeを開きます。
左側ペインから 拡張機能 を選択します。
拡張機能ペインの右上から 設定 アイコンを選択します。
Power Platform Tools を検索して選択します。
Power Platform Tools を選択します。
インストール を選択します。
ステータス メッセージから、拡張機能が正常にインストールされていることを確認します。
ヒント
Power Platform Tools 拡張機能では、Visual Studio Code内から Visual Studio Integrated Terminal までMicrosoft Power Platform CLI コマンドを自動的に使用できます。
Power Pages アクション
Power Pagesアクションは、サイト管理を効率化し、Microsoft Power Platform CLI コマンドへの依存を減らします。 Power Pagesアクションは、Visual Studio Codeのエクスプローラー サイドバーの Power Pages Actions というウィンドウで使用できます。
このペイン内では、サイトは次のように分類されます:
- アクティブなサイト: 選択した環境で現在利用可能でアクティブなサイト。
- 非アクティブなサイト: 環境に存在するが現在は非アクティブなサイト。
- その他のサイト: ローカルにダウンロードされたが、選択した環境にまだ関連付けられていないサイト。
環境の変更
環境を切り替える方法:
Power Pages操作ウィンドウ内の Change Environment ボタンを選択します。
サイトの環境を変更する
表示された一覧から目的の環境を選択します。
環境を選択すると、サイトの一覧が自動的に更新されます。
サイトに対するアクション
さまざまなタイプのサイトが、右クリックでアクセスできるコンテキスト固有のアクションを提供します。
アクティブなサイトのアクション
アクティブなサイトを右クリックすると、次のアクションにアクセスできます:
- プレビュー: キャッシュをクリアし、VS Code 内でサイトを開き、すぐに プレビューを行います。
- アップロード: ローカルの変更を環境にアップロードして戻します。
- ダウンロード: オフライン編集のために、サイトのコンテンツをローカル フォルダーにダウンロードします。
- サイトの詳細 : サイトの詳細情報を表示します。
- Explorer で表示: サイトのコードを含むローカル ディレクトリに移動します。
- Power Pagesデザイン スタジオで開く: Power Pagesデザイン スタジオでサイトを開きます。
- CodeQL スクリーニングの実行: HTML ファイルと JavaScript ファイルに対して静的コード分析を実行し、 CodeQL を使用してコードベースの脆弱性を特定します。 このオプションは、アクティブなサイトの一覧の [現在 のタグ] で示される、ローカルにダウンロードされたサイトでのみ使用できます。
- [ローカルと比較]: 比較ビューを開き、ローカル ワークスペースとリモート環境の違いを識別します。 サイト構成の比較機能の詳細を参照してください。
非アクティブなサイト アクション
非アクティブなサイトには、次のアクションがあります:
- Open Site Management: Power Pages管理アプリケーション内でサイトを開きます。
- サイトの詳細: 選択したサイトに関する詳細情報 (Web サイト ID、Web サイトの URL、データ モデルのバージョンなど) を提供します。
その他のサイト アクション
ローカルに保存されているが、まだ環境に保存されていないサイトには、次のアクションがあります:
- サイトのアップロード: ローカル サイトを接続環境にアップロードします。 アップロード後、サイトは非アクティブなサイトの一覧に表示され、Power Pagesのホームからアクティブ化できます。
- Explorer で表示: サイトのコードを含むローカル ディレクトリに移動します。
ファイル アイコン
Power PagesのVisual Studio Code拡張機能は、ダウンロードした Web サイト コンテンツ内のファイルとフォルダーのアイコンを自動的に識別して表示します。
Web サイト固有のファイル アイコン テーマを使用したスターター テンプレート内のファイルの一覧。
Visual Studio Codeでは、既定の file アイコン テーマを使用しますがPower Pages特定のアイコンは表示されません。 Web サイトに固有のファイル アイコンを表示するには、Power Pages固有のファイル アイコン テーマを使用するようにVisual Studio Code インスタンスを更新する必要があります。
ポータル固有のファイル アイコン テーマを有効にするには:
Visual Studio Codeを開きます。
FilePreferencesThemeFile アイコン テーマに移動します。
PowerApps ポータル アイコン のテーマを選択します。
サイトのプレビュー
プレビュー アクションでは、Visual Studio Code の
プレビューには常にサイトにアップロードした変更が表示されるため、サイトを開く前にローカルの編集内容をプッシュしてください。 プレビューを起動するたびに、サイトのキャッシュが自動的にクリアされ、最新の更新が表示されるようになります。
プレビューを開くには、Power Pages Actions でアクティブなサイトを右クリックし、Preview を選択します。 この操作により、選択したサイトを指す埋め込みMicrosoft Edgeブラウザーが開きます。
右側にプレビュー ペインが開きます。
サイト構成の比較
[ ローカルと比較 ] オプションを使用して、ローカル ワークスペースとリモート環境のライブ サイト構成の違いを特定します。 この機能は、意図しない変更を検出し、環境固有の問題のトラブルシューティングを行い、サイト構成を同期する前に一貫性を維持するのに役立ちます。
このアクションを選択すると、Site Comparison セクションが Power Pages Actions ビューの Tools の下に開きます。 このセクションでは、環境とは異なるローカル ワークスペース内のすべてのファイルが強調表示されます。
- 追加: 環境に存在しないローカル ワークスペースに作成された新しいファイル。
- 変更: ローカルバージョンと環境バージョンでコードまたはメタデータが異なるファイル。
- 削除済み: ローカル ワークスペースから削除されたが、環境内にまだ存在するファイル。
ライブ サイト構成とローカル ワークスペースを比較するには:
- エクスプローラーサイドバーで、Power Pagesアクションペインを展開します。
- [ アクティブ/非アクティブサイト ] リストで、比較するサイトを右クリックします。
- [ローカルと比較]を選択します。
サイト一覧の [ローカルと比較] オプションを示すスクリーンショット。
特定のフォルダーを比較するには:
- [エクスプローラー] サイドバーで、ローカル ワークスペースからフォルダー ( など) を選択します。
- Power Pages>環境と比較を右クリックして選択します。
ローカル ワークスペース フォルダーの比較オプションを示すスクリーンショット。
比較結果の管理
[ サイト比較 ] タブがアクティブで変更されたら、比較リストを右クリックして、追加のアクションにアクセスできます。
- すべての差分を開く: 一覧内のすべてのファイルのVisual Studio Code差分エディターを開き、すべての変更を同時に確認します。
- 更新の比較: ローカル ワークスペースとリモート環境を再スキャンして、最新の変更で一覧を更新します。
- HTML レポートとしてエクスポート: 検出されたすべての相違点を詳しく説明する共有可能な HTML ドキュメントを生成します。
- JSON としてエクスポート: 自動化されたワークフローまたはカスタム レポート用に、JSON 形式で比較データをエクスポートします。 このエクスポートしたファイルをチーム メンバーと共有できます。チーム メンバーは、[ サイト比較 ] セクションを右クリックし、[ 比較のインポート ] オプションを選択して、自分のビューにインポートできます。
- [すべてのローカル変更を破棄]: リモート環境で現在のバージョンと一致するように、すべてのローカル編集を元に戻します。
- 比較の削除: 現在の比較セッションを閉じ、結果タブをクリアします。
ヒント
JSON として比較データをエクスポートして共有することで、チームは全員が同じ環境に接続しなくても、構成の違いを解決するために共同作業を行うことができます。
サイト比較タブで使用できるオプションを示すスクリーンショット
オートコンプリート
Visual Studio Code拡張機能のオートコンプリート機能には、編集中の現在のコンテキストと、IntelliSense を使用した関連するオートコンプリート要素が表示されます。
ページ テンプレート ID のオートコンプリートの例を示したスクリーンショット。
Liquid タグ
Visual Studio Codeを使用してダウンロードしたコンテンツをカスタマイズするときに、Power Pages Liquid タグに IntelliSense を使用できるようになりました。
入力を開始すると、Liquid タグの一覧が表示されます。 タグを選択し、正しくフォーマットして入力を続けます。
Liquid タグの補完の例を含むスニペットのスクリーンショット。
Liquid オブジェクト
と入力すると、Liquidオブジェクト のコード補完が表示されます。 括弧の間にカーソルを置いて、 を選択すると、選択できる Liquid オブジェクトのリストが表示されます。 オブジェクトにさらにプロパティがある場合は、a . と入力し、 をもう一度選択して、Liquid オブジェクトの特定のプロパティを表示できます。
Liquid オブジェクトの入力を示すスクリーンショット。
テンプレート タグ
{include ' '} ステートメントにカーソルを置き、<CTRL> - space を選択すると、Power Pages Web テンプレートの候補を確認できます。 既存の Web テンプレートのリストが表示され、選択できます。
テンプレート タグのスクリーンショット。
Web サイト オブジェクトの作成、削除、名前変更
Visual Studio Code内から、次の Web サイト コンポーネントを作成、削除、名前変更できます。
- Web ページ
- ページ テンプレート
- Web テンプレート
- コンテンツ スニペット
- 新しいアセット (Web ファイル)
操作の作成
コンテキスト メニュー オプションを使用して、新しい Web サイト コンポーネントを作成できます。 サポートされているオブジェクトのいずれかを右クリックし、Power Pages を選択し、作成する Web サイト オブジェクトの種類を選択します。
または、Visual Studio Codeコマンド パレットを使用して、Ctrl + Shift + P を選択することもできます。
新しいオブジェクトを作成します。
オブジェクトを作成するには、さらにパラメーターを指定する必要があります。
| オブジェクト | パラメーター |
|---|---|
| Web ページ | 名前、ページ テンプレート、親ページ |
| ページ テンプレート | 名前、Web テンプレート |
| Web テンプレート | 名前 |
| コンテンツ スニペット | 名前、およびスニペットが HTML かテキストか。 |
| 新しいアセット (Web ファイル) | 名前、親ページ、アップロードするファイルを選択します。 |
操作の名前変更と削除
ファイル ナビゲーションから、コンテキスト メニューを使用して、Power Pagesコンポーネントの名前を変更または削除できます。
メモ
削除されたオブジェクトは、デスクトップのごみ箱から復元できます。
制限事項
現在、以下の制限事項がポータルの Power Platform Tools に適用されています:
- オートコンプリート 機能は限られた機能のみをサポートします。