kakakakakku blog

Weekly Tech Blog : Keep on Learning 👍

Katacoda を使って学習コンテンツを作ろう

環境構築をせずにブラウザを使ってサクッと学ぶときによく Katacoda を使っている.過去には EnvoyKubernetes を学ぶときにも Katacoda の学習コンテンツを使った.本当に便利なプラットフォームでお世話になっている👌

f:id:kakku22:20220214091745p:plain

Katacoda で簡単に学習コンテンツを作れる!

最近個人的に「学習コンテンツ(ハンズオン)」を作る予定があり,手順書だけではなくサクッと試せる環境もあったら良いなぁーと思って調査をしていたら,Katacoda で簡単に学習コンテンツを作れることを知った💡簡単に言うと「Git と連携して Markdown を自動的に Katacoda に反映できる」という仕組みになっている.

そして専用の Katacoda CLI もある.さらに Katacoda CLI を使って学習コンテンツを作ったり,カスタマイズしたりする流れを学べる学習コンテンツが Katacoda に公開されているため,今回は「Creating a Katacoda Course」「Creating Your First Katacoda Scenario」を参考に学習コンテンツを作ってみる!入門編!

f:id:kakku22:20220118164021p:plain

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 を使うときに悩んでしまうので覚えておこう!

f:id:kakku22:20220118171827p:plain

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-1kakakakakku-scenario-2 とした.インタラクティブにレベル Difficulty Level や時間 Estimated time やステップ数 Number of Steps を入力する.今回は適当に Beginner10 minutes2 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.04Kubeadm 1.18 2 Node Cluster Running を選んだ.そして,レイアウト Layout は画面表示のことで多くの候補から選べる.今回はシンプルに手順とターミナルを並べた Terminal を選んだ.詳しくは以下のドキュメントに載っている.

www.katacoda.community

www.katacoda.community

そして,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.mdstep1.md に Markdown で手順を書く.今回はコースを作ることを優先するため,以下のように簡単に書いた.コマンドの後に {{execute}} と書くとクリックで自動実行にできたり,他にも専用構文もある.詳しくはドキュメントに載っている.例えば「Linux コマンドを学ぼう!」的な学習コンテンツは Katacoda を使えば簡単に作れそう.

# step1

## step1-1

コマンドを実行します.

`echo 'step1'`{{execute}}

www.katacoda.community

学習コンテンツを公開する

最後は Katacoda に学習コンテンツを公開する.今回は GitHub を使う.詳細な手順は以下のドキュメントに載っているけど,ザッと挙げると以下のようになる.

  1. Katacoda にアカウントを作る
  2. GitHub リポジトリを作る
  3. Katacoda プロフィールと GitHub リポジトリを紐付ける
  4. GitHub リポジトリに Webhook を設定する

www.katacoda.community

少し気になる仕様としては「アカウントに 1 GitHub リポジトリを紐付ける」ことになるため,複数 GitHub リポジトリは設定できないと言える.よって,学習コンテンツによって GitHub リポジトリを分割したいところではあるけど,GitHub リポジトリの中でディレクトリによって管理する必要がある.ちょっと気になる...🔥

f:id:kakku22:20220118175816p:plain

今回は以下の GitHub リポジトリを使った.あくまで今回の学習コンテンツは検証用なので未来的に消す可能性はある.

github.com

f:id:kakku22:20220118180714p:plain

f:id:kakku22:20220118180724p:plain

f:id:kakku22:20220118180731p:plainf:id:kakku22:20220118180740p:plain

まとめ

Katacoda を使って簡単に学習コンテンツを作れた!便利!

今回は入門編を書いたけど,引き続き検証を続けて記事を連載していくぞー💡

連載記事

kakakakakku.hatenablog.com

kakakakakku.hatenablog.com

kakakakakku.hatenablog.com