チュートリアル Markdown リファレンス

Cloud Shell のチュートリアルは、ユーザーがプロジェクトになるべく早く慣れるように支援する効果的なリソースです。設定と起動は簡単です。Cloud Shell チュートリアルは、CommonMark Markdown で記述された一連の指示です。チュートリアル固有の Markdown 表現であるディレクティブを含めることによって、スポットライトやプロジェクト選択などの高度な機能を追加できます。

Cloud Shell でチュートリアルを設定、構成、および起動する方法については、チュートリアル ガイドの作成を参照してください。

ディレクティブの形式

ディレクティブを追加するには、次の形式を使用します。

<walkthrough-directive-name param-name="param-value">
</walkthrough-directive-name>

この形式では、「directive-name」と「param」はプレースホルダです。たとえば、ディレクティブ editor-open-file とパラメータ filePath を使用する場合は、次の形式を使用します。

<walkthrough-editor-open-file filePath="test/hello.md">
</walkthrough-editor-open-file>

Cloud Shell のディレクティブ

以下の表は、Cloud Shell のチュートリアルの作成時に使用できるディレクティブとそれぞれのパラメータを示しています。

チュートリアルのメタデータとレイアウト

ディレクティブ: 作成者

<walkthrough-author></walkthrough-author>

作成者タグは、作成者に関するメタデータを定義します。パラメータはすべて省略可能です。

パラメータ 説明
name 作成者の名前。
repositoryUrl フィードバック用のリポジトリへのリンク。
tutorialName チュートリアル ID

ディレクティブ: チュートリアル期間

<walkthrough-tutorial-duration></walkthrough-tutorial-duration>

チュートリアルの所要時間タグは、チュートリアルのおおよその所要時間を示すための時計アイコンとメッセージを表示します。

パラメータ 説明
duration チュートリアルの推定所要時間(分)。

ディレクティブ: 推奨されるチュートリアル カード

<walkthrough-tutorial-card></walkthrough-tutorial-card>

チュートリアル カードタグは、推奨されるチュートリアルにリンクしています。

パラメータ 説明
url チュートリアルへの URL。
icon アイコン名。
label クリック イベントの分析のラベル。

ディレクティブ: 脚注

<walkthrough-footnote>Footnote text here</walkthrough-footnote>

脚注ディレクティブは、ステップの最後に表示される脚注としてテキストをスタイル設定します。 脚注テキストは内部テキストとして書き込まれます。

プロジェクトの選択

ディレクティブ: プロジェクトの設定

<walkthrough-project-setup></walkthrough-project-setup>

プロジェクト設定コンポーネントは、使用するプロジェクトを作成または選択するのに役立ちます。 この手順では、有効なプロジェクトを選択するまで、ユーザーは先に進むことができません。

プロジェクト権限タグは、チュートリアルに必要なプロジェクト権限を設定します。選択したプロジェクトに対する権限が不足している場合、そのプロジェクトは有効なプロジェクトとはみなされません。

プロジェクト権限の仕組みの説明については、ドキュメントをご覧ください。

パラメータ 説明
permissions (省略可)必要な権限のカンマ区切りリスト。

ディレクティブ: プロジェクトと課金の設定

<walkthrough-project-billing-setup></walkthrough-project-billing-setup>

プロジェクトと課金の設定コンポーネントは、使用するプロジェクトを作成または選択するのに役立ちます。この手順では、課金を有効にしたプロジェクトを選択するまで、ユーザーは先に進むことができません。

パラメータ 説明
permissions (省略可)必要な権限のカンマ区切りリスト。

スポットライトとボタン

ディレクティブ: スポットライト ポインタ

<walkthrough-spotlight-pointer>Label text here</walkthrough-spotlight-pointer>

スポットライト ポインタ ディレクティブは、指定された UI 要素に画面上でスポットライトを当てるための、クリック可能なラベルを作成します。必要なパラメータはいずれか 1 つだけです。両方が指定されている場合、spotlightId が使用されます。

ポインタは、DOM 要素のプロパティであるインストゥルメンテーション ID、または CSS セレクタを使用して要素を選択できます。どちらのタイプのセレクタでも、カンマ区切りのセレクタで要素にマッチングさせることができます。セレクタにマッチングしたすべての要素がハイライト表示されます。

ラベルテキストは内部テキストとして書き込まれます。

パラメータ 説明
spotlightId インストゥルメンテーション ID。カンマ区切りで複数の ID を指定できます。
cssSelector CSS セレクタ
Spotlight ターゲット / インストゥルメンテーション ID 説明
console-nav-menu コンソールのナビゲーション メニュー、左上のハンバーガー アイコン。
devshell-activate-button 右上にある Cloud Shell を開くボタン。
devshell-web-editor-button Cloud Shell のトップバーにある Orion エディタを開きます。
devshell-web-preview-button Cloud Shell のウェブ プレビュー ウィンドウを開きます。

エディタ フレーム内のスポットライトについては、エディタ ディレクティブのセクションをご覧ください。

ディレクティブ: API を有効にする

<walkthrough-enable-apis></walkthrough-enable-apis>

API 有効化コンポーネントを使用して、クリックすると API が有効になるボタンを作成できます。これにより、プロジェクトが GCP API にアクセスできるようになります。

有効にできる API については、ドキュメントをご覧ください。

パラメータ 説明
apis 有効にする API のカンマ区切りのリスト。

ディレクティブ: Cloud Shell を開く

<walkthrough-open-cloud-shell-button></walkthrough-open-cloud-shell-button>

開いている Cloud Shell コンポーネントは、クリックすると Cloud Shell を開くボタンを作成します(現在のプロジェクトが選択されている状態にて)。

パラメータ 説明
open-cloud-shell 親ステップを表示するときに Cloud Shell を開きます。

ディレクティブ: バックグラウンドで Cloud Shell を開く

<walkthrough-devshell-precreate></walkthrough-devshell-precreate>

devshell-precreate ディレクティブは、バックグラウンドで Cloud Shell インスタンスをプロビジョニングするため、読み込みが高速になります。これはステップが表示されたときに実行されます。

動的変数

ディレクティブ: データ バインディング

<walkthrough-watcher-constant></walkthrough-watcher-constant>

チュートリアルを利用すると、Key-Value ペアのデータ バインディングが可能になります。値は、ディレクティブまたはチュートリアルのフレームワークによって設定されます。これらは、ディレクティブ watcher-constant を使用して、チュートリアル セッション内で定義できます。

その後、次の構文を使用して文字列値を参照できます。

{{<key>}}

Markdown での使用例:

# My Walkthrough

## Step 1

<walkthrough-watcher-constant key="my-key" value="Hello Google">
</walkthrough-watcher-constant>

My message: {{my-key}}

次の組み込みのキーが用意されています。

値の説明
project-id ユーザーの現在のプロジェクト ID。
project-name ユーザーのプロジェクト名。

ディレクティブ: ウォッチャー定数

<walkthrough-watcher-constant></walkthrough-watcher-constant>

ウォッチャーは、チュートリアルに設定できる動的な文字列です。ウォッチャー定数はチュートリアルの開始時に値を定義します。詳細については、データ バインディングのセクションをご覧ください。

パラメータ 説明
key ウォッチャーのキー。
value ウォッチャーの値。

ディレクティブ: インライン アイコン

<walkthrough-inline-icon-name></walkthrough-inline-icon-name>

「inline-icon-name」は、指定するアイコンのプレースホルダです(nav-menu-iconconclusion-trophy など)。

次のアイコンは、インライン アイコンとしてスタイル設定されています。

インライン アイコン名 アイコン
cloud-shell-icon Cloud Shell アイコン
web-preview-icon ウェブ プレビュー アイコン
cloud-shell-editor-icon Cloud Shell エディタ アイコン
nav-menu-icon ナビ メニュー アイコン
notification-menu-icon 通知メニュー アイコン
pin-section-icon ピンメニュー セクション アイコン

次のアイコンは、画像としてスタイル設定されています。

インライン アイコン名 アイコン
conclusion-trophy 修了トロフィー

Cloud Shell エディタ ディレクティブ

エディタ ディレクティブは、Cloud Shell エディタページでサポートされています。

ディレクティブ: ファイルを開く

<walkthrough-editor-open-file></walkthrough-editor-open-file>

ファイルを開くディレクティブは、エディタで Cloud Shell ディスクからファイルを開くためのクリック可能なラベルを作成します。

ラベルテキストは内部テキストとして書き込まれます。

パラメータ 説明
filePath 相対ファイルパス

ディレクティブ: 選択したテキストをエディタで開く

<walkthrough-editor-select-line></walkthrough-editor-select-line>

editor-select-line ディレクティブは、エディタでファイルを開き、その中のテキスト行を選択するためのクリック可能なラベルを作成します。

パラメータ 説明
filePath 相対ファイルパス
startLine 開始行
startCharacterOffset 開始インデックス
endLine 終了行
endCharacterOffset 終了インデックス

ディレクティブ: エディタで正規表現で指定されたテキストを開く

<walkthrough-editor-select-regex>Label text here</walkthrough-editor-select-regex>

editor-select-regex ディレクティブは、提供された正規表現に基づいて、エディタでファイルを開き、その中のテキストを選択するためのクリック可能なラベルを作成します。

パラメータ 説明
filePath 相対ファイルパス
regex 一致する正規表現

ラベルテキストは内部テキストとして書き込まれます。

ディレクティブ: スポットライト ポインタ

<walkthrough-editor-spotlight>Label text here</walkthrough-editor-spotlight>

スポットライト ポインタ ディレクティブは、画面上のエディタ内の指定された UI 要素にスポットライトを当てるクリック可能なラベルを作成します。

ポインタは、あらかじめ定義されたターゲットのみを選択できます。

パラメータ 説明
spotlightId エディタ ID

ラベルテキストは内部テキストとして書き込まれます。

エディタのスポットライト ターゲット 説明
fileMenu [File] メニューボタンをハイライト表示します。
editMenu [Edit] メニューボタンをハイライト表示します。
navigator [Item] フィールドで指定されたファイルを強調表示します。