kakakakakku blog

Weekly Tech Blog: Keep on Learning!

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

引き続き Katacoda を使って学習コンテンツを作る機能を試していく.今回は4記事目となり「Syntax(構文)」を詳しく調べる.過去3記事も合わせて読んでもらえればと!連載は今回で終了👏

kakakakakku.hatenablog.com

kakakakakku.hatenablog.com

kakakakakku.hatenablog.com

Syntax(構文)

以下のドキュメントに載っている通り,Katacoda では Markdown を一部拡張した構文をサポートしている.今回は実際に試してみて便利だった4点を紹介する!

  • Execute
  • Copy
  • Open
  • Quiz

www.katacoda.community

Execute 👾

コマンドの後に {{execute}} と書くと,クリックして自動的にターミナルで実行できる.便利!

`echo 'This is Execute syntax' > execute.txt`{{execute}}

Copy 👾

コマンドの後に {{copy}} と書くと,クリックしてクリップボードにコピーできる.便利!

`echo 'it's Copy syntax'`{{copy}}

Open 👾

コマンドの後に {{open}} と書くと,VS Code でファイルを開ける.今回は {{execute}} で作った execute.txt を開く.便利!

`execute.txt`{{open}}

以下に Execute / Copy / Open を試したステップを載せた.

f:id:kakku22:20220218190934p:plain

Quiz 👾

Markdown に >> xxx <<===(*) という構文を書くと「クイズ」を実装できる.

  • 文字列一致
  • 文字列部分一致
  • 単一回答
  • 複数回答

以下は「文字列一致」「単一回答」の例を載せた.クイズに正解すると次に進めるようになる.理解度確認をしながら学習コンテンツを進められて便利!ただし動作確認をして気付いた仕様として,文字列一致で大文字と小文字の区別はできなかった.少し残念😇

>>Q1: カカカカックの正しいスペルは何ですか?<<
=== kakakakakku

>>Q4: github の正式な表記はどちらですか?<<
( ) Github
(*) GitHub

f:id:kakku22:20220221113157p:plain

今回は以下の GitHub リポジトリを使って kakakakakku-course/kakakakakku-scenario-3-syntax を追加した.あくまで検証用なので未来的に消す可能性はある.

github.com

VS Code 拡張機能

調べたら「Syntax(構文)」の入力をサポートする VS Code 拡張機能もあった.ショートカットを使ったりして補完できる.大規模に書くときは良さそう!

marketplace.visualstudio.com

まとめ

Katacoda では Markdown を一部拡張した構文をサポートしている.Execute / Copy / Open は頻繁に使うことになりそうだし,Quiz もとても便利な構文だった!

環境構築をせずにブラウザを使ってサクッと学べる学習コンテンツを作る予定があり,計4記事を連載して Katacoda の機能を調べていた.本当に便利だった.主要な機能や開発の流れを把握できたので連載は今回で終了👏

積極的に Katacoda を使っていくぞー!