タイトルの通りです。ブラウザ完結型のチュートリアルを簡単に作れるツールキットをStackBlitzが出してくれました。
こういう感じのチュートリアルサイトの雛形がコマンド一発で作れるので、チュートリアルコンテンツの作成に集中することができます。ただし、このツールキットはWebContainersの技術を使っているため、ブラウザ完結型で動かすことが可能な一方、WebContainersのコンテナ上で動くものに限定されてしまうので、現状としてはJS、CSSなどのライブラリやフレームワークのチュートリアルを作成できるツールと認識しておく必要があります。
早速触ってみる
公式のアナウンス通り、まずはプロジェクトを作成してみます
$ npm create tutorial
以下の項目に対話的に回答していくと自動的に設定してくれます。
- プロジェクト名
- プロジェクトのパス（デフォルトでカレントディレクトリの下）
- npm or pnpm
- gitのリポジトリとして初期化するか
- 依存パッケージをインストールして起動するか
起動完了
表示されたurlにアクセスするとこのような構成の画面になります。
┌─────────────────────────────────────────────────────┐
│ ● ● ● │
├───────────────────────────┬─────────────────────────┤
│ │ │
│ │ │
│ │ │
│ │ │
│ │ Code Editor │
│ │ │
│ │ │
│ │ │
│ │ │
│ Content ├─────────────────────────┤
│ │ │
│ │ │
│ │ Preview & Boot Screen │
│ │ │
│ │ │
│ ├─────────────────────────┤
│ │ │
│ │ Terminal │
│ │ │
└───────────────────────────┴─────────────────────────┘
チュートリアルサイトなどでよく見る構成ですね。
Contentにはドキュメントが表示されます。チュートリアルの手順や説明などをmarkdownベースで記述して所定のフォルダに配置すると自動的に表示してくれます。
Code Editorはその名の通りエディタが組み込まれている領域で、ブラウザ上で自由に編集することができます。
Preview & Boot Screenではチュートリアルで作成したWebアプリをプレビューできます。
TerminalではWebContainersのコンテナに接続されたターミナルを開くことができます。デフォルトではoutputを確認できるだけですが、設定でインタラクティブモードにもできるようです。
コンテンツのカスタマイズ
チュートリアルはpart、chapter、lessonの階層構造を持ち、lessonレベルのフォルダ配下のcontent.mdが実際にContent領域に表示されるものとなります。また、フォルダ名の先頭に数字をつけることでチュートリアルの順番を示しています。直感的で分かりやすいですね。
npm createで作成されたプロジェクトでは以下のようなフォルダ構成になっていました。
./src/content/tutorial
├── 1-basics
│ ├── 1-introduction
│ │ ├── 1-welcome
│ │ │ ├── _files
│ │ │ │ └── counter.js
│ │ │ ├── _solution
│ │ │ │ └── counter.js
│ │ │ └── content.md
│ │ └── meta.md
│ └── meta.md
└── meta.md
_filesと_solutionはエディタに表示されるテキストの初期状態と右上solveボタンを押した時の状態が格納されています。
レッスンの追加
レッスンを追加してみます。
以下のように、introductionの章の下に2-lesson2を追加しました。
content.mdは同じものでもいいですが変化が見たかったので適当に編集してみました。
./src/content/tutorial
├── 1-basics
│ ├── 1-introduction
│ │ ├── 1-welcome
│ │ │ ├── _files
│ │ │ │ └── counter.js
│ │ │ ├── _solution
│ │ │ │ └── counter.js
│ │ │ └── content.md
│ │ ├── 2-lesson2
│ │ │ ├── _files
│ │ │ │ └── counter.js
│ │ │ ├── _solution
│ │ │ │ └── counter.js
│ │ │ └── content.md
│ │ └── meta.md
│ └── meta.md
└── meta.md
無事レッスンが追加できました。所定の箇所に所定のフォルダ、ファイルを配置するだけでルーティングや画面遷移用のUIなど自動的にやってくれるようです。
その他
テンプレート
ウェブコンテナ内で実行されるプロジェクトの雛形はsrc/templates/defaultに配置されています。これはViteのプロジェクトでフォルダに入ってnpm installとnpm run devすれば正常に起動する完全なプロジェクトです
ベースとなるプロジェクトを変更したい場合は、このフォルダを好きなプロジェクトに変えることで実現できます。
UIのカスタマイズ
TutorialKitのロゴや全体的な見た目などはコンポーネントのオーバーライドで書き換え可能です。
最後に
まだどこまでカスタマイズ可能か試しきれてないですが、サーバー要らずで初学者向けの学習コンテンツが作成できるので結構重宝しそうな予感がしています！
以上です！
参考