Share
Embed
Slide 1
Slide 1 text
「teachme」で作る⼼地よい
ハンズオン体験構築のノウハウ
Google Cloudのハンズオンといえばコレ！
Jagu'e'r Cloud Native #15 ハイブリッド Meetup
Slide 2
Slide 2 text
⾃⼰紹介
馬勝 淳史
(horsewin)
株式会社ヘンリー所属
@HorseVictory
horsewin
● 書籍の執筆にも積極的
● 猫と戯れるのが好き
● 好きなコーヒーはニカラグア
Slide 3
Slide 3 text
今回の発表が刺さる⼈
● Google Cloudのハンズオンをかっこよく作りたい⼈
● 視覚的にわかりやすいハンズオンを作りたい⼈
● Google Cloudが好きな⼈
Slide 4
Slide 4 text
「teachme」で作る⼼地よい
ハンズオン体験構築のノウハウ
Google Cloudのハンズオンといえばコレ！
Slide 5
Slide 5 text
作る⼼地よい
体験構築のノウハウ
Google Cloudのハンズオンといえばコレ！
「teachme」で
ハンズオン
Slide 6
Slide 6 text
teachmeとは？
● Google Cloudのコンソール上に表⽰されるサイドパネル内のコンテンツ
● インタラクティブに実⾏可能なドキュメントとして表⽰され、
画⾯操作のチュートリアルを読みながらコンソール操作が可能
Slide 7
Slide 7 text
公式のドキュメントより
ref: https://cloud.google.com/shell/docs/cloud-shell-tutorials/tutorials?hl=ja
この部分のこと
Slide 8
Slide 8 text
teachmeの出会い
Slide 9
Slide 9 text
クラウドネイティブ
分科会 Meetup #10
https://jaguer.jp/cn-meetup-10/
teachmeの出会い
Slide 10
Slide 10 text
技術書典でteachmeを取り⼊れた本を書く
Slide 11
Slide 11 text
技術書典16で⼤賞としてノミネートいただけました
物理本はこちらから
購入可能です
Slide 12
Slide 12 text
「teachme」で作る⼼地よい
ハンズオン体験構築のノウハウ
Google Cloudのハンズオンといえばコレ！
Slide 13
Slide 13 text
「teachme」で作る⼼地よい
ハンズオン体験構築のノウハウ
Google Cloudのハンズオンといえばコレ！
構築のノウハウ
Slide 14
Slide 14 text
公式ドキュメントでハンズオンの構築⽅法が提供
ref: https://cloud.google.com/shell/docs/cloud-shell-tutorials/directives-cloud-shell-editor?hl=ja
● 脚注の表⽰
● ファイルを開く
● スポットライトポインタ
（⼀部機能のみ対応）
● 所要時間の表⽰
● Cloudshellを開く
● アイコンの表⽰（数個）
● プロジェクトの選択
● APIの有効化
Slide 15
Slide 15 text
公式ドキュメントで構築⽅法が案内
ref: https://cloud.google.com/shell/docs/cloud-shell-tutorials/directives-cloud-shell-editor?hl=ja
● 脚注の表⽰
● ファイルを開く
● スポットライトポインタ
（⼀部機能のみ対応）
● 所要時間の表⽰
● Cloudshellを開く
● アイコンの表⽰（数個）
● プロジェクトの選択
● APIの有効化
意外と作るのが難しい...
Slide 16
Slide 16 text
e.g. ハイライトをいい感じに当てたい！が...
Slide 17
Slide 17 text
e.g. ハイライトをいい感じに当てたい！が...意外と難しい
● spotlightId → ない
● CSS セレクタ → どれだ...
○ Devtoolいわく
#_5rif_toolbar-element-pmS1L2un
らしい
Slide 18
Slide 18 text
いい感じのハンズオンを作るために
Slide 19
Slide 19 text
「teachme」で作る⼼地よい
ハンズオン体験構築のノウハウ
Google Cloudのハンズオンといえばコレ！
構築のノウハウ
これが必要
Slide 20
Slide 20 text
ドキュメントに未記載の使い⽅が多数
● 有⽤なデバッグモード
● CSSセレクタだけではやりづらいハイライト
● 画⾯内で特定サービスに遷移をする
● サイドバーを⾃動で開いてサービスにハイライトを当てる
● メッセージエリアの表⽰
Slide 21
Slide 21 text
有⽤なデバッグモード
● サイドパネルコンテンツを動的に書き換えができる⽅法
● コマンドのオプションとして⾒れるので気づく⼈も多そう
$ teachme -d sample.md
使い⽅
Slide 22
Slide 22 text
CSSセレクタだけではやりづらいハイライト
● 公式のスポットライトポインタは少しクセがある
○ spotlightIdを使えるコンポーネントが少ない
○ CSSセレクタで頑張るのが結構つらい
Slide 23
Slide 23 text
Semantic locatorの利⽤
● https://github.com/google/semantic-locators
Slide 24
Slide 24 text
スポットライトポインタを楽に作成できる
● 独⾃のlocator定義をattributeに指定して利⽤
● Semantic Locators Playgroundも併せて活⽤をオススメ
スポットライト
使い⽅
ref: https://google.github.io/semantic-locators/playground
Slide 25
Slide 25 text
画⾯内で特定サービスに遷移をする
● walkthrough-watcher-block ディレクティブ
● 特定サービスのURLを踏んで遷移するよりも⾼速で体験がよい
Artifact Registry に移動
使い⽅
Slide 26
Slide 26 text
サイドバーを⾃動で開いてサービスにハイライトを当てる
● walkthrough-menu-navigation ディレクティブ
● sectionIdにはナビゲーションDOMにある
“cfc-console-nav-section-”のハイフン以降の名前を⼊れる
使い⽅
Slide 27
Slide 27 text
メッセージエリアの表⽰
● walkthrough-info-message ディレクティブ
● 強調して伝えたい内容があるときに使うとよい
● walkthrough-footnote ディレクティブとの使い分けは意識
ここに説明
使い⽅
Slide 28
Slide 28 text
ドキュメントに未記載の使い⽅が多数（再掲）
● 有⽤なデバッグモード
● CSSセレクタだけではやりづらいハイライト
● 画⾯内で特定サービスに遷移をする
● サイドバーを⾃動で開いてサービスにハイライトを当てる
● メッセージエリアの表⽰
Slide 29
Slide 29 text
まとめ
● Google Cloudでハンズオンを作るときはteachmeを試してみよう
● デバッグモードを活⽤しながらトライ＆エラーで作成可能
● 細かいインタラクションを⼊れるとよりよいハンズオンになる！
○ ただし⾮公式なので突然使えなくなるリスクは理解しておく
Slide 30
Slide 30 text
Fin.