チュートリアル マークダウン リファレンス

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

Cloud Shell でチュートリアルを設定、作成、起動する方法については、チュートリアル作成ガイドをご覧ください。

ディレクティブの形式

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

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

Cloud Shell のディレクティブ

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

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

作成者

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

author チュートリアルの作成者のメタデータを作成します。
name 作成者の名前。
repositoryUrl フィードバック用のリポジトリへのリンク。
tutorialName チュートリアル ID。

チュートリアルの所要時間

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

tutorial-duration チュートリアルの所要時間を表示します。
duration 推定されるチュートリアルの所要時間(分)。

チュートリアル カード

チュートリアル カード タグは推奨されるチュートリアルへのリンクです。

tutorial-card 推奨のチュートリアルを表示します。
url チュートリアルの URL。
icon アイコン名。
label クリック イベントの分析のラベル。

脚注

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

脚注テキストは内部テキストとして書き込まれます。

footnote テキストを脚注として表示します。

プロジェクトの選択

プロジェクト設定

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

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

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

project-setup プロジェクト設定ステップに置き換えます。
permissions (省略可)必要な権限のカンマ区切りリスト。

プロジェクトと課金の設定

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

project-billing-setup 課金が必要なプロジェクト設定ステップに置き換えます。
permissions (省略可)必要な権限のカンマ区切りリスト。

スポットライトとボタン

スポットライト ポインタ

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

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

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

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

API の有効化

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

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

enable-apis API を有効にするコンポーネントを表示します。
apis 有効にする API のカンマ区切りのリスト。

Cloud Shell を開く

Cloud Shell を開くコンポーネントを使用して、クリックすると Cloud Shell を開くボタンを作成できます。

open-cloud-shell-button 選択した現在のプロジェクトで Cloud Shell を開くためのコンポーネントを表示します。
open-cloud-shell 親ステップを表示するときに Cloud Shell を開きます。
devshell-precreate バックグラウンドで Cloud Shell インスタンスをプロビジョニングし、読み込みが高速になるようにします。これはステップが表示されたときに実行されます。

動的変数

データ バインディング

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

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

{{<key>}}

Markdown での使用例:

# My Tutorial

## Step 1

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

My message: {{my-key}}

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

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

ウォッチャー定数

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

watcher-constant レンダリング時の文字列値を定義します。
key ウォッチャーのキー。
value ウォッチャーの値。

アイコン ディレクティブ

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

ディレクティブ アイコン
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 エディタページでサポートされています。

ファイルを開く

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

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

editor-open-file エディタで Cloud Shell のファイルを開きます。
filePath 相対ファイルパス

テキスト選択

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

editor-select-line エディタ内で特定のテキストを選択します。
filePath 相対ファイルパス
startLine 開始行
startCharacterOffset 開始インデックス
endLine 終了行
endCharacterOffset 終了インデックス
editor-select-regex エディタ内で特定のテキストを選択します。
filePath 相対ファイルパス
regex 一致する正規表現

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

スポットライト ポインタ

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

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

editor-spotlight 定義済みのターゲットにスポットライトを当てます。
spotlightId エディタ ID

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

エディタのスポットライト ターゲット 説明
fileMenu [File] メニューボタンをハイライト表示します。
editMenu [Edit] メニューボタンをハイライト表示します。
navigator [Item] フィールドで指定されたファイルを強調表示します。
このページは役立ちましたか?評価をお願いいたします。

フィードバックを送信...