このトピックはプレリリース ドキュメントであり、変更される場合があります。
デザイン スタジオから、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 のエクスペリエンス。
重要
- これはプレビュー機能です。
- プレビュー機能は運用環境での使用を想定しておらず、機能が制限されている可能性があります。 これらの機能を公式リリースの前に使用できるようにすることで、顧客が一足先にアクセスし、そこからフィードバックを得ることができます。
注意
- 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 ホーム ページから Web 用の Visual Studio Code を使用してサイトのコードの編集を開始するには、編集ドロップダウン メニューからサイト コードの編集オプションを選択します。
次の領域から、デザイン スタジオでコードを編集することもできます。
- Pages ワークスペースから Web ページを編集する
- Pages ワークスペースのヘッダー テンプレート コード
- Styling ワークスペースからカスタム CSS コードを編集する
- マルチステップ フォームのカスタム JavaScript コードを編集する
- 標準フォームのカスタム JavaScript コードを編集する
- リスト用のカスタム JavaScript を編集する
- コンテンツ スニペットを編集する
- Web テンプレートを編集する
- メディア Web ファイル (画像) を表示およびダウンロードする
- テキスト ベースの Web ファイル (CSS、JavaScript、その他) を編集する
これらの領域を使用してコードを編集する方法を見てみましょう。
Pages ワークスペースから Web ページを編集する
Power Pages デザイン スタジオを開くと、[ページ] メニュー1 と画面2 の右上隅にコードの編集 オプションが表示されます。
Pages ワークスペースのヘッダー テンプレート コード
サイト ヘッダーの編集 を選択してから、コードの編集 を選択してコード エディターを開きます。
Styling ワークスペースから CSS コードを編集する
Styling ワークスペース に移動し、利用可能なカスタム CSSコードを編集 メニューをクリックしてコード エディターを開きます。
Power Pages の [アクション] ビュー
エクスプローラーの下部にある [Power Pages アクション] ビューでは、エディター内で直接 Power Pages サイトを管理できます。 これにより、開発者がエディター内から一般的なタスクをすばやく実行できるようにすることで、Power Pages Studio に切り替える必要が減ります。
使用可能なアクション
プレビュー サイト
このアクションにより 、構成キャッシュ がクリアされ、VS Code でサイトが開きます。 これにより、開発者は、Power Pages Studio にコンテキストを切り替えることなく、サイト コードの変更をプレビューおよびテストできます。Power Pages Studio で開く
コードを変更した後、このアクションを使用して Power Pages Studio に移動します。 これは、コード エディターで編集できない認証プロバイダー、Web ロール、およびその他のサイト設定を構成する場合に役立ちます。VS Code Desktop で開く
VS Code Desktop がインストールされている場合、このアクションによってデスクトップ アプリでサイトが開きます。 また、サイトのダウンロードがトリガーされ、コードがローカルで使用でき、編集の準備が整います。
競合通知をマージする
他の開発者と共同作業を行っている場合は、同じソース コードに取り組む状況が発生する可能性があります。 古いファイルへの変更を保存しようとすると、変更を 比較 または 上書き するよう通知が届きます。
コードを比較すると、現在のコードが自分のコードと一緒に表示され、既存の変更に戻すこと、各変更を個別に受け入れること、または変更を使用して既存のコンテンツを上書きすることができます。
最新のコンテンツを確認して、コードをマージまたは上書きするか、変更を破棄することができます。
チュートリアル: Web 用 Visual Studio Code を使用してサイト コードを編集する
このチュートリアルでは、Web 用 Visual Studio Code を使用してサイト コードを編集する方法を説明します。
ステップ 1: Web 用 Visual Studio Code を使用してサイト コードを編集する
Power Pages デザイン スタジオ でサイトを開く
右上隅にある [コードの編集] を選択します
コード確認ダイアログから Visual Studio Code を開く を選択します。
自分の環境資格情報を使って Visual Studio Code にサインインします。
Power Platform Tools Web 拡張機能で初期化し、Web ページ コードで左ペインにロードするのを待ちます。
ステップ 2: コンテンツとコードを更新する
画面の左側にあるエクスプローラーは、Web 用 Visual Code を使用して編集できるそれぞれの Web サイト構成メタデータを読み込みます。
それぞれのメタデータ ファイルに変更を加えて、Ctrl+S をクリックして変更を保存します。
デザインスタジオに行き、同期 を選択して、現在のデザイン スタジオ セッションですべての更新を取得します。
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 またはその他のフレームワーク ビルド ツールのサポート | いいえ | Yes |
| コードのチェックイン、チェックアウト、競合の管理、マージなどの機能を備えた 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 サイトをプレビューしてコードをテストします。