引き続き Katacoda を使って学習コンテンツを作る機能を試していく．今回は3記事目となり「Layouts（レイアウト）」を詳しく調べる．過去2記事も合わせて読んでもらえればと！
Layouts（レイアウト）
Katacoda では「左側に手順書／右側にターミナル」という基本的なレイアウト以外にも対応している．以下のドキュメントに載っている通り「計7種類」のレイアウトがある．また index.json に showide オプションを設定すると別タブに VS Code を追加することもできるため，実際にはもう少し多くの種類から選べる．今回はよく使いそうなレイアウトを試していく！
- Terminal
- Editor + Terminal
- VS Code + Terminal
- Terminal + Iframe tab
- Terminal + Iframe
- Iframe
- Terminal + Terminal
Katacoda UI Layouts Example
今回は「Layouts（レイアウト）」の違いを試せる学習コンテンツ「Katacoda UI Layouts Example」を使う．
1. Scenario with Terminal UI 🎨
まずは「Terminal」レイアウトを試す．index.json で以下のように設定する（抜粋）．
"environment": { "uilayout": "terminal" },
「左側に手順書／右側にターミナル」という基本的なレイアウトで見慣れている．今まで試した Katacoda もほとんど同じレイアウトになっていたと思う．ほぼデフォルトのレイアウトと言えそう．
2. Scenario with Terminal and VS Code UI as Tab 🎨
次は「Terminal + VS Code」レイアウトを試す．index.json で以下のように設定する（抜粋）．showide オプションを設定すると別タブに VS Code を追加できる．
"environment": { "uieditorpath": "/root/example", "showide": true, "idePort": 23000, "uilayout": "terminal" },
「左側に手順書／右側にターミナルと VS Code（タブ切り替え）」というレイアウトになる．コードは uieditorpath オプションで設定しているため /root/example/ にある．vim などを使わずにコードを書けるからプログラミング入門者でも便利に使えそう！
Scenario with VS Code / Terminal UI Split Screen 🎨
今度は「Terminal + VS Code Split Screen」レイアウトを試す．index.json で以下のように設定する（抜粋）．
"environment": { "uilayout": "vscode-terminal-split" },
「左側に手順書／右側にターミナルと VS Code（画面分割）」というレイアウトになる．タブ切り替えをしなくてもよくて便利！少し狭く感じるためディスプレイが大きかったら問題なく使えそう．
まとめ
Katacoda では多くの「Layouts（レイアウト）」が使える．今までは Terminal を使っていて，VS Code を追加できるのは知らなかった．プログラミングを体験する学習コンテンツを作るときには絶対に使いたいところ！また今回紹介しなかった Iframe というレイアウトを使うと，任意の URL を指定してレイアウトの中にウェブページを表示できる．個人的にどう使うと便利なのか思い付かなかった．次の記事では Syntax を調べていく！
