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
ゲームとかの最初に使い方を教えてくれるアレ
Search
kouki.miura
August 31, 2025
Programming
0
41
ゲームとかの最初に使い方を教えてくれるアレ
ゲームの最初に使い方を説明する "プロダクトツアーライブラリ" について、どのようなものが使われているのかの調査と、そのデモアプリ実装についてのLTです。
kouki.miura
August 31, 2025
Tweet
Share
More Decks by kouki.miura
See All by kouki.miura
HTMLで分数をどう表示する?MathMLの紹介と使い方
koukimiura
0
27
Claude Codeでゲーム開発デビュー
koukimiura
0
110
Vite+TypeScript+Vue.jsではじめるフロントエンドプロジェクト
koukimiura
1
58
リソース制限環境下でのローカルLLM構築術
koukimiura
0
110
フロントエンドのパフォーマンスチューニング
koukimiura
7
2.6k
医療系ソフトウェアのAI駆動開発
koukimiura
1
240
レポートから見る生成AIを活用したシステム開発.
koukimiura
0
170
AWSサービスの整理と使いたい機能の概要
koukimiura
1
94
生成AIによる PHP = Node.js 変換の検証
koukimiura
0
190
Other Decks in Programming
See All in Programming
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
220
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
160
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
320
議事録の要点整理を自動化! サーバレス Bot 構築術
penpeen
3
1.6k
私はどうやって技術力を上げたのか
yusukebe
40
16k
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
2
260
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
140
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
640
Swift Concurrency - 状態監視の罠
objectiveaudio
2
270
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
11k
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
110
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
110
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Agile that works and the tools we love
rasmusluckow
330
21k
Music & Morning Musume
bryan
46
6.8k
The Invisible Side of Design
smashingmag
301
51k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Statistics for Hackers
jakevdp
799
220k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Transcript
ゲームとかの最初に使い方を教えてくれるアレ 2025.08.31 えびてく #6 三浦 恒樹 (MIURA KOUKI) 診療情報管理士 上級医療情報技師
医用画像情報専門技師 ドゥウェル株式会社
長男が飼っている ハリネズミがアイコン INTRODUCE ・ドゥウェル株式会社 (医療系IT開発・導入会社)に所属 ・マネージャー(プレイング・マネージャー) ・TypeScript, Vue.js, Node.js, Java,C#,
PHP ・江別市在住、3児の父 ・休日は子どものサッカー観戦 ・参加している勉強会 札幌PHP勉強会、JBUG札幌、JavaDO、ゆるWeb勉強会、えびてく、 クラメソ札幌IT勉強会(仮)、AWS初心者LT会in札幌、 札幌すごいAI会、札幌IT石狩鍋 等
・ゲームとかの最初に使い方を教えてくれるアレ ・プロダクトツアーライブラリ 3選 ・driver.jsを使うデモアプリ ・まとめ INDEX
ゲームとかの最初に使い方を教えてくれるアレ https://driverjs.com/ ゲームとかの最初に使い方を教えてくれるアレ、 業務系アプリにも有用なため、どのように実装すれば 良いか調べました。 名称が分からないときは 生成AI便利すぎる
ゲームとかの最初に使い方を教えてくれるアレ
ゲームとかの最初に使い方を教えてくれるアレ アレの名称は、 “プロダクトツアーライブラリ” が一般的らしい プロダクトツアーライブラリとは ゲームやアプリを使い始める際、 UIの一部をフォーカスさせて、 使い方を説明しながら、 ステップを進めていくことで、 新規ユーザーを学習させるためのライブラリ
プロダクトツアーライブラリ 3選 Intro.js Shepherd https://introjs.com/ https://www.shepherdjs.dev/
プロダクトツアーライブラリ 3選 driver.js https://driverjs.com/ 比較表
プロダクトツアーライブラリ 3選 https://npmtrends.com/driver.js-vs-intro.js-vs-shepherd.js driver.jsがnpmダウンロード数 1位に
driver.jsを使うデモアプリ 病院の経営情報を表示するアプリを作成してください。 - データはテストデータで良い - ヘッダー - ヘルプボタンはまだ機能しなくて良い - ログインユーザー名はテストデータで良い
- ログアウトボタン - サイドメニュー - 法人全体 - 全病院・全部門・全診療科を統合した経営状態 - 病院一覧 - 法人の全20病院・30診療所の一覧 - 部門一覧 - 病院ごとの、部門の一覧 - 診療科一覧 - 病院ごとの、診療科の一覧 - 病棟一覧 - 病院ごとの、病棟の一覧 - 手術室一覧 - 病院ごとの、手術室の一覧 - 地域連携 - 病院ごとの、地域医療の紹介率・逆紹介率を中心にした統計情報 - 設定 - マスタ管理、アプリ設定 - ユーザー - ログインユーザー情報、ユーザー設定、パスワード設定、多要素認証設定 - 起動直後は「法人全体」画面の経営情報ダッシュボードを表示 - 円グラフで今期の予測・実績、今月の予測・実績、今日の予測・実績を表示 - 全病院、全病棟の病床稼働率を表示 - 全病院の手術室稼働率を表示 - 病院一覧はテストデータとして病院20施設、診療所30施設を表示 - 病院一覧の病院情報には、病院名、住所、病院の場合は病床稼働率・手術室稼働率・外来受診数、診療所の場合は外来受診数を表示 - 部門一覧、診療科一覧、病棟一覧、手術室一覧、地域連携、設定、ユーザー画面もそれぞれのテストデータを表示 - サイドメニューで病院一覧を選択すると、病院・診療所の一覧を表示 - Vue.js+Vuetifyのアプリ基盤上に実装 - グラフはChart.jsを使用し、比率はDoughnutで表示 - 24時間の手術室症例数推移、外来受診数推移、入院者数・退院者数推移はChart.jsのLine Chartで表示 - その他、各画面ごとに、病院経営に有益な情報を、各チャートで表示 Claude Codeでデモアプリを生成 (driver.js 組み込み前)
driver.jsを使うデモアプリ
driver.jsを使うデモアプリ このプロダクトに、プロダクトツアーライブラリのdriver.jsを組込んでください。 ヘルプボタンを押すとプロダクトツアーを開始するように実装してください。 プロダクトツアーの内容は、driver.jsのマニュアルを読んで以下を設定してください。 - プロダクトツアー - 1. 法人全体 経営情報ダッシュボードを表示
- 2. 今期の予測・実績をフォーカス メッセージ:法人全体の今期予測と実績です。 - 3. 今月の予測・実績をフォーカス メッセージ:法人全体の今月の予測と実績です。20日以降で乖離が大きい場合は理事長会議を招集して ください。 - 4. 今日の予測・実績をフォーカス メッセージ:法人全体の今日の予測と実績です。15:00以降で乖離が大きい場合は施設ごとの実績を確 認して院長に連絡してください。 - 5. 病院一覧を表示 - 6. 東京医療センター病院をフォーカス メッセージ:各施設の病床稼働率、手術室稼働率、外来受診数を確認してください。 - 7. 東京医療センター病院の「詳細を見る」をフォーカス メッセージ:クリックしてください。 - 8. 東京医療センター病院ダイアログをフォーカス メッセージ:詳細ダイアログでは施設の詳細を確認できます。 デモアプリにdriver.jsを組込む Claude Codeレート制限(5時間 メッセージ数上限)に... pnpm i driver.js プンプン アイ (npmパッケージ名) で依存関係追加 自力でコーディング
driver.jsを使うデモアプリ driver.js と css を読み込む。 stepsを定義する。 element: 対象のDOMをidやclassで指定 popover: ポップアップの内容を指定
呼び出す。
driver.jsを使うデモアプリ
・ゲームとかの最初に使い方を教えてくれるアレ は、 ”プロダクトツアーライブラリ” ・Intro.js、Shepherd、driver.js 等があり、driver.js の人気が上がってきている ・Claude Code レート制限には注意 ・driver.js の使用方法 1.
driver.js を import 2. steps を定義 3. drive() 関数呼び出し ・便利なので医療系システムでもプロダクトツアーライブラリを広めていきたい ご清聴ありがとうございました。 まとめ