今回はチュートリアル機能を実装できるIntro.jsをBlazorアプリケーションに導入していきたいと思います
Intro.js
Intro.js Doc
実装例は GitHubのexampleが参考になります
Intro.jsについては、いくつかの記事がありますので、そちらも参考にしてみてください
Webでデモ・チュートリアルを簡単に作れる intro.js の導入方法 (@RyutaKojima さん)
Demo
使い方
Intro.jsの使い方は、HTML要素に対してdata-stepやdata-title,data-introといったタグを埋め込みスクリプトintroJs().start()を実行するだけで、要素に対してチュートリアルを作成してくれます。
例えば、Demoでの最初のステップは、👇な感じです。
Index.razor
<h1 data-step='1' data-title="Welcome!" data-intro="こんにちは！一緒にBlazorの世界を楽しみましょう 👋">Hello, world!</h1>
index.html
<script>
window.InitJS = (_) => {
introJs().start();
}
</script>
data-stepで進める順番を作ってあげることで、コンポーネントをまたいで、シームレスにチュートリアルを進めることができます
Demoの場合だと、Index.razor👉NavMenu.razor👉MainLayout.razorの順番に遷移しています。
初回だけ表示させる工夫
チュートリアルを表示させたい要素を共通的なコンポーネントであるMainLayout.razorやNavMenu.razorなどに埋め込む場合はレンダリングされる度にチュートリアルが表示されてしまうので、初回だけ表示させるなど少し工夫が必要になりますね
動的な要素には表示できない
FetchData.razorはHttpClientで取得した情報をtableに表示しますが、table要素全体にチュートリアルを表示することができませんでした。introJs().start()を実行するタイミングなのかもしれませんが、動的な要素に表示するには工夫がいるようです
おわりに
Intro.jsを使ってBlazorアプリケーションにチュートリアルを表示する方法をご紹介しました。Intro.jsは商用利用でない場合、フリーで使用できますので興味のある方は試してみてください
今回もあまりBlazorには関係ない小ネタ感がありますが、何かのお役にたてれば幸いです
↧