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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Power Pages アクション ビュー

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

使用可能なアクション

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

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

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

競合通知をマージする

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

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

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

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

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

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

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

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

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

   

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

   

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

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

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

参照

• Visual Studio Code および Microsoft Power Platform CLI を使用する