「teachme」で作る心地よい ハンズオン体験構築のノウハウ ~ Google Cloudのハンズオンといえばコレ！~

Jagu'e'r Cloud Native #15 ハイブリッド Meetupで登壇した資料となります。

Transcript

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