Web 用 Visual Studio Code でコードを編集する (プレビュー)

このトピックはプレリリース ドキュメントであり、変更される場合があります。

デザイン スタジオから、Web 用の Visual Studio Code を使用してサイトコードを編集できます。 この機能を使用すると、次の Web サイト メタデータで使用する、静的コンテンツ、HTML、CSS、Liquid、および JavaScript を編集できるようになります。

Metadata	コンテンツ
詳細フォーム (マルチステップのフォーム)	JavaScript
基本フォーム	JavaScript
コンテンツ スニペット	サポートされているすべてのコンテンツ スニペットのコンテンツ
リスト	JavaScript
Web ファイル	メディア ファイルを表示およびダウンロードします。 テキスト (コード) ファイルを編集します。
Web ページ	サポートされているすべてのコンテンツ (言語ごと)、JavaScript、CSS
Web テンプレート	サポートされているすべてのコンテンツ

注意

メタデータ レコードを作成することはできず、コンテンツ、コードの追加と編集、および添付ファイルの表示/ダウンロードのみが可能になります。

Web 用 Visual Studio Code は、ブラウザーで完全に実行される、無料でインストール不要の Microsoft Visual Studio Code を提供し、サイト コードを参照し、軽量のコード変更を迅速かつ安全に行うことができます。 詳細: Web 用 Visual Studio Code のエクスペリエンス。

重要

• これはプレビュー機能です。
• プレビュー機能は運用環境での使用を想定しておらず、機能が制限されている可能性があります。 これらの機能を公式リリースの前に使用できるようにすることで、顧客が一足先にアクセスし、そこからフィードバックを得ることができます。

Note

• Web 用 Visual Studio Code を最初にロードするには、この機能に必要な拡張機能をインストールするため、読み込みに時間がかかる場合があります。
• ファイルの作成、削除、名前の更新の操作はサポートされていません。
• この機能は、Power Platform Tools ウェブ拡張を活用しています。 Web 拡張機能は、ブラウザーのサンドボックスによって制限されているため、通常の拡張機能と比較して制限があります。
  • Power PlatformCLI はサポートされていません。
  • Power Platform Tools の Web 拡張機能は Power Pages コード編集体験に限定されています。
  • この機能は、Government Community Cloud (GCC)、Government Community Cloud (GCC High)、および国防総省 (DoD) では利用できません。 これらの地域のユーザーは、コードの編集にポータル管理アプリを使用します。 詳細については、ポータル管理アプリでコードを編集するを参照してください。

デザインスタジオで利用可能な編集コード

Power Pages ホーム ページから Web 用の Visual Studio Code を使用してサイトのコードの編集を開始するには、編集ドロップダウン メニューからサイト コードの編集オプションを選択します。

次の領域から、デザイン スタジオでコードを編集することもできます。

• Pages ワークスペースから Web ページを編集する
• Pages ワークスペースのヘッダー テンプレート コード
• Styling ワークスペースからカスタム CSS コードを編集する
• マルチステップ フォームのカスタム JavaScript コードを編集する
• 標準フォームのカスタム JavaScript コードを編集する
• リスト用のカスタム JavaScript を編集する
• コンテンツ スニペットを編集する
• Web テンプレートを編集する
• メディア Web ファイル (画像) を表示およびダウンロードする
• テキストベースの Web ファイルを編集する (CSS、JavaScript、その他)

これらの領域を使用してコードを編集する方法を見てみましょう。

Pages ワークスペースから Web ページを編集する

Power Pages デザイン スタジオを開くと、[ページ] メニュー¹ と画面² の右上隅にコードの編集 オプションが表示されます。

Pages ワークスペースのヘッダー テンプレート コード

サイト ヘッダーの編集 を選択してから、コードの編集 を選択してコード エディターを開きます。

Styling ワークスペースから CSS コードを編集する

Styling ワークスペース に移動し、利用可能なカスタム CSSコードを編集 メニューをクリックしてコード エディターを開きます。

競合通知をマージする

他の開発者と共同作業している場合、同じソース コードで作業することになる場合があります。 古いファイルへの変更を保存しようとすると、変更を 比較 または 上書き するよう通知が届きます。

コードを比較すると、現在のコードが自分のコードと一緒に表示され、既存の変更に戻すこと、各変更を個別に受け入れること、または変更を使用して既存のコンテンツを上書きすることができます。

最新のコンテンツを確認して、コードをマージまたは上書きするか、変更を破棄することができます。

チュートリアル: Web 用 Visual Studio Code を使用してサイト コードを編集する

このチュートリアルでは、Web 用 Visual Studio Code を使用してサイト コードを編集する方法を説明します。

ステップ 1: Web 用 Visual Studio Code を使用してサイト コードを編集する

1. Power Pages デザイン スタジオ でサイトを開く

2. 右上隅で、コードの編集 を選択します

   

3. コード確認ダイアログから Visual Studio Code を開く を選択します。

4. 自分の環境資格情報を使って Visual Studio Code にサインインします。

5. Power Platform Tools Web 拡張機能で初期化し、Web ページ コードで左ペインにロードするのを待ちます。

ステップ 2: コンテンツとコードを更新する

1. 画面の左側にあるエクスプローラーは、Web 用 Visual Code を使用して編集できるそれぞれの Web サイト構成メタデータを読み込みます。

   

2. それぞれのメタデータ ファイルに変更を加えて、Ctrl+S をクリックして変更を保存します。

3. デザインスタジオに行き、同期 を選択して、現在のデザイン スタジオ セッションですべての更新を取得します。

   

4. Power Pages サイト上の変更を見るには、プレビュー を選択します。

Web 用 Visual Studio Code または Visual Studio Code Desktop を使用する

ユーザーは Web 用 Visual Studio Code を使用して、外部ツールを使用することなく、ページへの変更を編集、デバッグ、プレビューできます。 Visual Studio Code Desktop は、すべてのサイト メタデータを編集し、GitHub、フレームワーク、継続的インテグレーション/継続的開発 (CI/CD) プロセスと統合するための他の高度な機能を提供します。

特徴	Web 用 VS Code	VS Code Desktop
新しい Web サイト構成メタデータ レコードを作成する	いいえ	Web ページ、ページ テンプレート、Web テンプレート、コンテンツ スニペット、Web ファイルに限定されます。
サイトの直接編集	Yes	いいえ
サイト メタデータの編集	Web ページ、コンテンツ スニペット、基本フォーム、マルチステップ フォーム、リスト、Web テンプレートの編集に限定されます。	すべての Power Pages メタデータ構成
サイトのプレビュー	計画済み	計画済み
Power Platform CLI サポート	いいえ	Yes
高度な CPU およびストレージ バウンド ワークフロー - ReactJS またはその他のフレームワーク ビルド ツールのサポート	番号	イエス
コードのチェックイン、チェックアウト、競合の管理、マージなどの機能を備えた GitHub 統合。	いいえ	Yes

ポータル管理アプリでコードを編集する

注意

• Web 用の Visual Studio Code を使用した Web サイトの編集は、Government Community Cloud (GCC)、Government Community Cloud (GCC High)、および国防総省 (DoD) ではサポートされていません。 これらの地域のユーザーは、ポータル管理アプリを使用して変更を行います。

地域が Web 用 Visual Studio Codeをサポートしていない場合は、コマンド バーでコード エディター アイコン </> を選択すると、ポータル管理アプリが開きます。

対応する Web ページ、基本フォーム、マルチステップ フォーム、リスト、または Web テンプレート レコードに移動して、コードを編集します。

タイプ	コードの場所
Web ページ	Web ページ レコードを選択します。 ローカライズされたコンテンツ セクションから Web ページ コンテンツ レコードを選択します。 ページのコピーは、全般タブのコピー (HTML) フィールドで編集できます。 カスタム JavaScript と カスタム CSS コードは、詳細タブから編集できます。
基本フォーム	基本フォーム レコードを選択します。 追加設定タブでカスタム JavaScript を編集します。
マルチステップ フォーム	マルチステップ フォーム レコードを選択します。 フォーム ステップ タブからマルチステップ フォーム ステップを選択します。 フォーム オプション タブで編集 カスタム JavaScript を編集します。
リスト	リスト レコードを選択します。 オプション タブでカスタム JavaScript を編集します。
Web テンプレート	Web テンプレート レコードを選択します。 全般タブでソースを編集します。

レコードを保存し、Web サイトをプレビューしてコードをテストします。

参照

• Visual Studio Code と Microsoft Power Platform CLI を使用する