環境構築をせずにブラウザを使ってサクッと学ぶときによく Katacoda を使っている．過去には Envoy や Kubernetes を学ぶときにも Katacoda の学習コンテンツを使った．本当に便利なプラットフォームでお世話になっている👌
- Katacoda - Interactive Learning Platform for Software Engineers
- Try Envoy を "ほぼ" 完走した - kakakakakku blog
- 2021年2-3月に CKAD と CKA を受験した / 受験 Tips と 勉強方法をまとめる - kakakakakku blog
Katacoda で簡単に学習コンテンツを作れる！
最近個人的に「学習コンテンツ（ハンズオン）」を作る予定があり，手順書だけではなくサクッと試せる環境もあったら良いなぁーと思って調査をしていたら，Katacoda で簡単に学習コンテンツを作れることを知った💡簡単に言うと「Git と連携して Markdown を自動的に Katacoda に反映できる」という仕組みになっている．
そして専用の Katacoda CLI もある．さらに Katacoda CLI を使って学習コンテンツを作ったり，カスタマイズしたりする流れを学べる学習コンテンツが Katacoda に公開されているため，今回は「Creating a Katacoda Course」と「Creating Your First Katacoda Scenario」を参考に学習コンテンツを作ってみる！入門編！
Katacoda CLI をインストールする
npm install コマンドを使って簡単に Katacoda CLI をインストールできる．今回は v.0.0.24 だった．
$ npm install katacoda-cli --global $ katacoda help Create and manage Katacoda content from the command-line VERSION katacoda-cli/0.0.24 darwin-x64 node-v17.4.0 USAGE $ katacoda [COMMAND] COMMANDS commands list all the commands courses Manage Katacoda courses help display help for katacoda scenarios Manage Katacoda scenarios training Create a new Katacoda training validate Validate structure of all scenarios
Katacoda 構成を整理する
学習コンテンツを作る前に Katacoda の構成を整理しておく．「アカウント」は基本的には GitHub などに紐付いていて「コース」の中に複数の「シナリオ」を含められる．そして「シナリオ」の中に詳細な手順として「ステップ」もある．構成を理解しておかないと Katacoda CLI を使うときに悩んでしまうので覚えておこう！
Katacoda CLI で学習コンテンツを作る
まず，katacoda courses:create コマンドを使って「コース」を作る．今回は kakakakakku-course とした．
$ katacoda courses:create ? Course Title: kakakakakku-course ? Course Description: kakakakakku-course ? friendly-url (This will also be the course's folder name): kakakakakku-course Course created successfully. $ tree . . ├── kakakakakku-course └── kakakakakku-course-pathway.json 1 directory, 1 file
次に，katacoda scenarios:create コマンドを使って「シナリオ」を作る．今回は kakakakakku-scenario-1 と kakakakakku-scenario-2 とした．インタラクティブにレベル Difficulty Level や時間 Estimated time やステップ数 Number of Steps を入力する．今回は適当に Beginner で 10 minutes で 2 Steps とした．
$ katacoda scenarios:create ? Friendly url: kakakakakku-scenario-1 ? Scenario Title: kakakakakku-scenario-1 ? Scenario Description: kakakakakku-scenario-1 ? Difficulty Level: Beginner ? Estimated time: (Please specify in minutes or hours e.g. 2 hours) 10 minutes ? Number of Steps (Not including intro & finish): 2 ? Image: Ubuntu 20.04 ? Layout: Terminal Scenario created successfully. $ katacoda scenarios:create ? Friendly url: kakakakakku-scenario-2 ? Scenario Title: kakakakakku-scenario-2 ? Scenario Description: kakakakakku-scenario-2 ? Difficulty Level: Beginner ? Estimated time: (Please specify in minutes or hours e.g. 2 hours) 10 minutes ? Number of Steps (Not including intro & finish): 2 ? Image: Kubeadm 1.18 2 Node Cluster Running ? Layout: Terminal Scenario created successfully. $ tree . . ├── kakakakakku-course ├── kakakakakku-course-pathway.json ├── kakakakakku-scenario-1 │ ├── finish.md │ ├── index.json │ ├── intro.md │ ├── step1.md │ └── step2.md └── kakakakakku-scenario-2 ├── finish.md ├── index.json ├── intro.md ├── step1.md └── step2.md 3 directories, 11 files
イメージ Image は実行環境のことで多くの候補から選べる．今回は Ubuntu 20.04 と Kubeadm 1.18 2 Node Cluster Running を選んだ．そして，レイアウト Layout は画面表示のことで多くの候補から選べる．今回はシンプルに手順とターミナルを並べた Terminal を選んだ．詳しくは以下のドキュメントに載っている．
そして，katacoda courses:add:scenarios コマンドを使って「コース」と「シナリオ」を紐付ける（フォルダも自動的に移動する）．最終的に tree コマンドの結果を見ると，ディレクトリ構成をイメージできると思う．
$ katacoda courses:add:scenarios ? Please enter scenario path ./kakakakakku-scenario-1 ? Please enter course path kakakakakku-course ? Would you like todo? Move to courses folder Scenario added to course successfully. $ katacoda courses:add:scenarios ? Please enter scenario path ./kakakakakku-scenario-2 ? Please enter course path kakakakakku-course ? Would you like todo? Move to courses folder Scenario added to course successfully. $ tree . . ├── kakakakakku-course │ ├── kakakakakku-scenario-1 │ │ ├── finish.md │ │ ├── index.json │ │ ├── intro.md │ │ ├── step1.md │ │ └── step2.md │ └── kakakakakku-scenario-2 │ ├── finish.md │ ├── index.json │ ├── intro.md │ ├── step1.md │ └── step2.md └── kakakakakku-course-pathway.json 3 directories, 11 files
シナリオを作る
intro.md や step1.md に Markdown で手順を書く．今回はコースを作ることを優先するため，以下のように簡単に書いた．コマンドの後に {{execute}} と書くとクリックで自動実行にできたり，他にも専用構文もある．詳しくはドキュメントに載っている．例えば「Linux コマンドを学ぼう！」的な学習コンテンツは Katacoda を使えば簡単に作れそう．
# step1
## step1-1
コマンドを実行します．
`echo 'step1'`{{execute}}
学習コンテンツを公開する
最後は Katacoda に学習コンテンツを公開する．今回は GitHub を使う．詳細な手順は以下のドキュメントに載っているけど，ザッと挙げると以下のようになる．
- Katacoda にアカウントを作る
- GitHub リポジトリを作る
- Katacoda プロフィールと GitHub リポジトリを紐付ける
- GitHub リポジトリに Webhook を設定する
少し気になる仕様としては「アカウントに 1 GitHub リポジトリを紐付ける」ことになるため，複数 GitHub リポジトリは設定できないと言える．よって，学習コンテンツによって GitHub リポジトリを分割したいところではあるけど，GitHub リポジトリの中でディレクトリによって管理する必要がある．ちょっと気になる...🔥
今回は以下の GitHub リポジトリを使った．あくまで今回の学習コンテンツは検証用なので未来的に消す可能性はある．
まとめ
Katacoda を使って簡単に学習コンテンツを作れた！便利！
今回は入門編を書いたけど，引き続き検証を続けて記事を連載していくぞー💡
