Web 用のVisual Studio Codeを使用してコードを編集する (プレビュー)

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

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

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

Note

メタデータ レコードを作成したり、コンテンツ、コードを追加および編集したり、添付ファイルを表示/ダウンロードしたりすることはできません。

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

Important

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

Visual Studio Code for Web を使用して Power Pages サイトを編集するデモ。

Note

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

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

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

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

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

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

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

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

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

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

Pages ヘッダーからコードを編集する

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

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

カスタム CSS からコードを編集する。

Power Pages の [アクション] ビュー

エクスプローラーの下部にある [Power Pages アクション] ビューでは、エディター内で直接 Power Pages サイトを管理できます。 これにより、開発者がエディター内から一般的なタスクをすばやく実行できるようにすることで、Power Pages デザイン スタジオに切り替える必要が減ります。

使用可能なアクション

  • プレビュー サイト
    このアクションにより 、構成キャッシュ がクリアされ、VS Code でサイトが開きます。 これにより、開発者は、Power Pages デザイン スタジオにコンテキストを切り替えることなく、サイト コードの変更をプレビューおよびテストできます。

  • Power Pages デザイン スタジオで開く
    コードを変更した後、このアクションを使用して Power Pages Design Studio に移動します。 これは、コード エディターで編集できない認証プロバイダー、Web ロール、およびその他のサイト設定を構成する場合に役立ちます。

  • VS Code Desktop で開く
    VS Code Desktop がインストールされている場合、このアクションによってデスクトップ アプリでサイトが開きます。 また、サイトのダウンロードがトリガーされ、コードがローカルで使用でき、編集の準備が整います。

VS Code での Power Pages アクションビュー。

競合通知をマージする

他の開発者と共同作業を行っている場合は、同じソース コードに取り組む状況が発生する可能性があります。 古いファイルへの変更を保存しようとすると、変更を 比較 または 上書き するよう通知が届きます。

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

コード内の競合をマージします。

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

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

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

手順 1: Web 用のVisual Studio Codeを使用してサイト コードを編集する

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

  2. 右上隅にある [コードの編集] を選択します

    デザインスタジオから Visual Studio Code で開きます。

  3. 確認ダイアログから Open Visual Studio Code を選択します。

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

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

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

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

    Web ファイルを示したタイトルなしのワークスペースのエクスプローラー メニュー。

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

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

    ユーザーが [同期] ボタンを選択し、Visual Studio Codeで行った変更をデザインスタジオに同期できるようにするインターフェース。

  4. Preview を選択して、Power Pages サイトの変更を確認します。

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

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

特徴 Web 用 VS Code VS Code Desktop（VSコードデスクトップ版）
新しい Web サイト構成メタデータ レコードを作成する No Web ページ、ページ テンプレート、Web テンプレート、コンテンツ スニペット、Web ファイルに限定されます。
サイトの直接編集 Yes No
サイト メタデータの編集 Web ページ、コンテンツ スニペット、基本フォーム、マルチステップ フォーム、リスト、Web テンプレートの編集に限定されます。 すべての Power Pages メタデータ 構成
サイトのプレビュー 対応予定 対応予定
Power Platform CLI サポート No Yes
高度な CPU とストレージにバインドされたワークフロー - ReactJS またはその他のフレームワーク ビルド ツールのサポート No Yes
GitHubとの統合により、コードのチェックイン、チェックアウト、競合の管理、マージといった機能が利用可能です。 No Yes

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

Note

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

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

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

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

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

こちらも参照ください

  • Last updated on