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
51
ゲームとかの最初に使い方を教えてくれるアレ
ゲームの最初に使い方を説明する "プロダクトツアーライブラリ" について、どのようなものが使われているのかの調査と、そのデモアプリ実装についてのLTです。
kouki.miura
August 31, 2025
Tweet
Share
More Decks by kouki.miura
See All by kouki.miura
ビルトインウェブサーバーでPHP開発
koukimiura
0
21
生成AI × 仕様駆動開発 ~Kiroで見えた業務アプリ開発の未来~
koukimiura
0
56
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
HTMLで分数をどう表示する?MathMLの紹介と使い方
koukimiura
0
33
Claude Codeでゲーム開発デビュー
koukimiura
0
130
Vite+TypeScript+Vue.jsではじめるフロントエンドプロジェクト
koukimiura
1
74
リソース制限環境下でのローカルLLM構築術
koukimiura
0
120
フロントエンドのパフォーマンスチューニング
koukimiura
7
2.6k
医療系ソフトウェアのAI駆動開発
koukimiura
1
260
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
640
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
980
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
250
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
16k
CSC305 Lecture 09
javiergs
PRO
0
310
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.2k
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
7.7k
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
270
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
900
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
CSC509 Lecture 08
javiergs
PRO
0
250
Featured
See All Featured
Docker and Python
trallard
46
3.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
RailsConf 2023
tenderlove
30
1.3k
Building Applications with DynamoDB
mza
96
6.7k
GitHub's CSS Performance
jonrohan
1032
470k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Become a Pro
speakerdeck
PRO
29
5.6k
Producing Creativity
orderedlist
PRO
347
40k
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() 関数呼び出し ・便利なので医療系システムでもプロダクトツアーライブラリを広めていきたい ご清聴ありがとうございました。 まとめ