ゲームとかの最初に使い方を教えてくれるアレ

ゲームの最初に使い方を説明する "プロダクトツアーライブラリ" について、どのようなものが使われているのかの調査と、そのデモアプリ実装についてのLTです。

Transcript

1. ゲームとかの最初に使い方を教えてくれるアレ 2025.08.31 えびてく #6 三浦 恒樹 (MIURA KOUKI) 診療情報管理士 上級医療情報技師 医用画像情報専門技師 ドゥウェル株式会社
2. 長男が飼っている ハリネズミがアイコン INTRODUCE ・ドゥウェル株式会社 （医療系IT開発・導入会社）に所属 ・マネージャー（プレイング・マネージャー） ・TypeScript, Vue.js, Node.js, Java，C#, PHP ・江別市在住、３児の父 ・休日は子どものサッカー観戦 ・参加している勉強会 　札幌PHP勉強会、JBUG札幌、JavaDO、ゆるWeb勉強会、えびてく、 　クラメソ札幌IT勉強会(仮)、AWS初心者LT会in札幌、 　札幌すごいAI会、札幌IT石狩鍋　　等
3. ・ゲームとかの最初に使い方を教えてくれるアレ ・プロダクトツアーライブラリ 3選 ・driver.jsを使うデモアプリ ・まとめ INDEX
4. ゲームとかの最初に使い方を教えてくれるアレ https://driverjs.com/ ゲームとかの最初に使い方を教えてくれるアレ、 業務系アプリにも有用なため、どのように実装すれば 良いか調べました。 名称が分からないときは 生成AI便利すぎる
5. ゲームとかの最初に使い方を教えてくれるアレ
6. ゲームとかの最初に使い方を教えてくれるアレ アレの名称は、 “プロダクトツアーライブラリ” が一般的らしい プロダクトツアーライブラリとは 　ゲームやアプリを使い始める際、 　UIの一部をフォーカスさせて、 　使い方を説明しながら、 　ステップを進めていくことで、 　新規ユーザーを学習させるためのライブラリ
7. プロダクトツアーライブラリ 3選 Intro.js Shepherd https://introjs.com/ https://www.shepherdjs.dev/
8. プロダクトツアーライブラリ 3選 driver.js https://driverjs.com/ 比較表
9. プロダクトツアーライブラリ 3選 https://npmtrends.com/driver.js-vs-intro.js-vs-shepherd.js driver.jsがnpmダウンロード数 1位に
10. driver.jsを使うデモアプリ 病院の経営情報を表示するアプリを作成してください。 - データはテストデータで良い - ヘッダー - ヘルプボタンはまだ機能しなくて良い - ログインユーザー名はテストデータで良い - ログアウトボタン - サイドメニュー - 法人全体 - 全病院・全部門・全診療科を統合した経営状態 - 病院一覧 - 法人の全20病院・30診療所の一覧 - 部門一覧 - 病院ごとの、部門の一覧 - 診療科一覧 - 病院ごとの、診療科の一覧 - 病棟一覧 - 病院ごとの、病棟の一覧 - 手術室一覧 - 病院ごとの、手術室の一覧 - 地域連携 - 病院ごとの、地域医療の紹介率・逆紹介率を中心にした統計情報 - 設定 - マスタ管理、アプリ設定 - ユーザー - ログインユーザー情報、ユーザー設定、パスワード設定、多要素認証設定 - 起動直後は「法人全体」画面の経営情報ダッシュボードを表示 - 円グラフで今期の予測・実績、今月の予測・実績、今日の予測・実績を表示 - 全病院、全病棟の病床稼働率を表示 - 全病院の手術室稼働率を表示 - 病院一覧はテストデータとして病院20施設、診療所30施設を表示 - 病院一覧の病院情報には、病院名、住所、病院の場合は病床稼働率・手術室稼働率・外来受診数、診療所の場合は外来受診数を表示 - 部門一覧、診療科一覧、病棟一覧、手術室一覧、地域連携、設定、ユーザー画面もそれぞれのテストデータを表示 - サイドメニューで病院一覧を選択すると、病院・診療所の一覧を表示 - Vue.js+Vuetifyのアプリ基盤上に実装 - グラフはChart.jsを使用し、比率はDoughnutで表示 - 24時間の手術室症例数推移、外来受診数推移、入院者数・退院者数推移はChart.jsのLine Chartで表示 - その他、各画面ごとに、病院経営に有益な情報を、各チャートで表示 Claude Codeでデモアプリを生成 （driver.js 組み込み前）
11. driver.jsを使うデモアプリ
12. 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パッケージ名) で依存関係追加 自力でコーディング
13. driver.jsを使うデモアプリ driver.js と css を読み込む。 stepsを定義する。 　element: 対象のDOMをidやclassで指定 　popover: ポップアップの内容を指定 呼び出す。
14. driver.jsを使うデモアプリ
15. ・ゲームとかの最初に使い方を教えてくれるアレ　は、　”プロダクトツアーライブラリ” ・Intro.js、Shepherd、driver.js 等があり、driver.js の人気が上がってきている ・Claude Code レート制限には注意 ・driver.js の使用方法 1. driver.js を import 2. steps を定義 3. drive() 関数呼び出し ・便利なので医療系システムでもプロダクトツアーライブラリを広めていきたい ご清聴ありがとうございました。 まとめ