Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
「teachme」で作る心地よい ハンズオン体験構築のノウハウ ~ Google Cloudの...
Search
horsewin
August 30, 2024
Technology
0
45
「teachme」で作る心地よい ハンズオン体験構築のノウハウ ~ Google Cloudのハンズオンといえばコレ!~
Jagu'e'r Cloud Native #15 ハイブリッド Meetupで登壇した資料となります。
horsewin
August 30, 2024
Tweet
Share
More Decks by horsewin
See All by horsewin
コントリビューションWSが与えた 影響に思いを馳せる
horsewin
1
29
Cloud Run jobsをバッチ処理基盤として使いたい
horsewin
0
100
いまならこう作りたい AWSコンテナ[本格]入門ハンズオン 〜2024年版 ハンズオンの構想〜
horsewin
10
2.8k
Console-to-Code が出たのでCDK職人を卒業しま◯◯
horsewin
0
650
cdk8s(+)ではじめるKubernetes
horsewin
1
660
GAになったGolangでCDKを触ってみよう
horsewin
2
360
Cortana Skill 触ってみた
horsewin
0
42
Alexaスキル開発〜 Node.js から Typescript へ〜
horsewin
0
39
ASK-CLI使っていますか?
horsewin
0
21
Other Decks in Technology
See All in Technology
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
410
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
現場で役立つAPIデザイン
nagix
29
10k
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
FastConnect の冗長性
ocise
1
9.6k
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Building Applications with DynamoDB
mza
93
6.2k
A Philosophy of Restraint
colly
203
16k
Automating Front-end Workflow
addyosmani
1367
200k
We Have a Design System, Now What?
morganepeng
51
7.4k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Transcript
「teachme」で作る⼼地よい ハンズオン体験構築のノウハウ Google Cloudのハンズオンといえばコレ! Jagu'e'r Cloud Native #15 ハイブリッド Meetup
⾃⼰紹介 馬勝 淳史 (horsewin) 株式会社ヘンリー所属 @HorseVictory horsewin • 書籍の執筆にも積極的 •
猫と戯れるのが好き • 好きなコーヒーはニカラグア
今回の発表が刺さる⼈ • Google Cloudのハンズオンをかっこよく作りたい⼈ • 視覚的にわかりやすいハンズオンを作りたい⼈ • Google Cloudが好きな⼈
「teachme」で作る⼼地よい ハンズオン体験構築のノウハウ Google Cloudのハンズオンといえばコレ!
作る⼼地よい 体験構築のノウハウ Google Cloudのハンズオンといえばコレ! 「teachme」で ハンズオン
teachmeとは? • Google Cloudのコンソール上に表⽰されるサイドパネル内のコンテンツ • インタラクティブに実⾏可能なドキュメントとして表⽰され、 画⾯操作のチュートリアルを読みながらコンソール操作が可能
公式のドキュメントより ref: https://cloud.google.com/shell/docs/cloud-shell-tutorials/tutorials?hl=ja この部分のこと
teachmeの出会い
クラウドネイティブ 分科会 Meetup #10 https://jaguer.jp/cn-meetup-10/ teachmeの出会い
技術書典でteachmeを取り⼊れた本を書く
技術書典16で⼤賞としてノミネートいただけました 物理本はこちらから 購入可能です
「teachme」で作る⼼地よい ハンズオン体験構築のノウハウ Google Cloudのハンズオンといえばコレ!
「teachme」で作る⼼地よい ハンズオン体験構築のノウハウ Google Cloudのハンズオンといえばコレ! 構築のノウハウ
公式ドキュメントでハンズオンの構築⽅法が提供 ref: https://cloud.google.com/shell/docs/cloud-shell-tutorials/directives-cloud-shell-editor?hl=ja • 脚注の表⽰ • ファイルを開く • スポットライトポインタ (⼀部機能のみ対応)
• 所要時間の表⽰ • Cloudshellを開く • アイコンの表⽰(数個) • プロジェクトの選択 • APIの有効化
公式ドキュメントで構築⽅法が案内 ref: https://cloud.google.com/shell/docs/cloud-shell-tutorials/directives-cloud-shell-editor?hl=ja • 脚注の表⽰ • ファイルを開く • スポットライトポインタ (⼀部機能のみ対応)
• 所要時間の表⽰ • Cloudshellを開く • アイコンの表⽰(数個) • プロジェクトの選択 • APIの有効化 意外と作るのが難しい...
e.g. ハイライトをいい感じに当てたい!が...
e.g. ハイライトをいい感じに当てたい!が...意外と難しい • spotlightId → ない • CSS セレクタ →
どれだ... ◦ Devtoolいわく #_5rif_toolbar-element-pmS1L2un らしい
いい感じのハンズオンを作るために
「teachme」で作る⼼地よい ハンズオン体験構築のノウハウ Google Cloudのハンズオンといえばコレ! 構築のノウハウ これが必要
ドキュメントに未記載の使い⽅が多数 • 有⽤なデバッグモード • CSSセレクタだけではやりづらいハイライト • 画⾯内で特定サービスに遷移をする • サイドバーを⾃動で開いてサービスにハイライトを当てる •
メッセージエリアの表⽰
有⽤なデバッグモード • サイドパネルコンテンツを動的に書き換えができる⽅法 • コマンドのオプションとして⾒れるので気づく⼈も多そう $ teachme -d sample.md 使い⽅
CSSセレクタだけではやりづらいハイライト • 公式のスポットライトポインタは少しクセがある ◦ spotlightIdを使えるコンポーネントが少ない ◦ CSSセレクタで頑張るのが結構つらい
Semantic locatorの利⽤ • https://github.com/google/semantic-locators
スポットライトポインタを楽に作成できる • 独⾃のlocator定義をattributeに指定して利⽤ • Semantic Locators Playgroundも併せて活⽤をオススメ <walkthrough-spotlight-pointer locator="semantic({ここに入る })"
> スポットライト</walkthrough-spotlight-pointer> 使い⽅ ref: https://google.github.io/semantic-locators/playground
画⾯内で特定サービスに遷移をする • walkthrough-watcher-block ディレクティブ • 特定サービスのURLを踏んで遷移するよりも⾼速で体験がよい <walkthrough-watcher-block link-url="https://console.cloud.google.com/artifacts"> Artifact Registry
に移動</walkthrough-watcher-block> 使い⽅
サイドバーを⾃動で開いてサービスにハイライトを当てる • walkthrough-menu-navigation ディレクティブ • sectionIdにはナビゲーションDOMにある “cfc-console-nav-section-”のハイフン以降の名前を⼊れる <walkthrough-menu-navigation sectionId="SERVERLESS_SECTION" />
使い⽅
メッセージエリアの表⽰ • walkthrough-info-message ディレクティブ • 強調して伝えたい内容があるときに使うとよい • walkthrough-footnote ディレクティブとの使い分けは意識 <walkthrough-info-message>ここに説明
</walkthrough-info-message> 使い⽅
ドキュメントに未記載の使い⽅が多数(再掲) • 有⽤なデバッグモード • CSSセレクタだけではやりづらいハイライト • 画⾯内で特定サービスに遷移をする • サイドバーを⾃動で開いてサービスにハイライトを当てる •
メッセージエリアの表⽰
まとめ • Google Cloudでハンズオンを作るときはteachmeを試してみよう • デバッグモードを活⽤しながらトライ&エラーで作成可能 • 細かいインタラクションを⼊れるとよりよいハンズオンになる! ◦ ただし⾮公式なので突然使えなくなるリスクは理解しておく
Fin.