Last Updated: 2021-03-22
ヘッダー
見出し１の設定
見出し１のスタイルを設定すると各ページの見出しになり項番が付与されます。
Colabs形式だとここに現れます。
見出し２から見出し４まで使える
見出しは見出し４まで使えます。
テキストのスタイルは標準テキストで使えます。フォントはほとんどは何を選択してもRobotoで作成されますが、英数字だけですがCourier Newを使ったときだけコード形式で表現できます。他の書式設定でいくつか表現を変更できます。例えば、太字にしたりitalicを設定することができます。下線とハイライト色は使えないようです。
Googleドキュメント上で改行するとCodelabsでも改行されます。改行をいくつも挿入しても1行分しか改行されません。
URLリンクを設置したい場合にはリンクを挿入することでハイパーリンクが設置できます。
こんな風に書くと
こうなります。
リスト形式にするときには箇条書きを使います。
- ほげほげ
- ふがふが
- ぴよぴよ
ドキュメントに画像を挿入するとCodelabsにも画像が表示されます。サイズを変更すると、その幅がCodelabsマークアップの画像の最大幅として適用されるため、画像はテキストに対して同じサイズになりますが、小さいブラウザでは適切に縮小されます。
動画ファイルを直接埋め込むことはできないようですが、Youtube動画を挿入することはできます。例えば、以下のようなYoutubeのURLであれば
Googleドキュメントに適当に画像を挿入し右クリックして[代替テキスト]をクリック
説明欄にYoutubeのURLを入力すると
画像部分がToutube動画として挿入されます。
同様の方法でiflameも挿入することができるようで試してみたのですがうまくいかなかったです。
2種類のインフォメーションボックスが使えます。
オレンジ色のインフォメーションボックス
単一セルの表に明るいオレンジ３で背景色を付けると以下のようになります。
緑色のインフォメーションボックス
単一セルの表に明るい緑３で背景色を付けると以下のようになります。
Macだとターミナル、WindowsだとコマンドプロンプトやPowerShellなどのコマンドラインを表現する際には、単一セルのテーブルを作成し、すべてのテキストがConsolasフォントを使用することで、これらのセクションをコードラボに追加できます。
こう書くと
こうなります。
>go get -u -v github.com/googlecodelabs/tools/claat go: downloading github.com/yuin/goldmark v1.3.3 go: downloading github.com/golang/protobuf v1.5.1 go: downloading google.golang.org/protobuf v1.26.0 github.com/yuin/goldmark/util github.com/yuin/goldmark/text github.com/yuin/goldmark/ast github.com/yuin/goldmark/renderer github.com/yuin/goldmark/extension/ast github.com/yuin/goldmark/parser github.com/yuin/goldmark/renderer/html github.com/yuin/goldmark github.com/yuin/goldmark/extension github.com/googlecodelabs/tools/claat/parser/md github.com/googlecodelabs/tools/claat/render github.com/googlecodelabs/tools/claat/cmd github.com/googlecodelabs/tools/claat
ハイライト付きのコードスニペットは、単一セルテーブルを作成し、すべてのテキストがCourier Newフォントを使用することで追加できます。
また、コードスニペットのすぐ上にファイル名を含む見出し3を指定することをお勧めします。これは、利用者がコードの出所を追跡するのに役立ちます。codelabツールは、コードを強調表示する方法の手がかりとして、前のヘッダーのファイル拡張子も使用します。GitHubで利用できる場合は、見出し3ヘッダーを実際のファイルへのハイパーリンクにするとGitHubアイコンが見出しに自動的に追加されます。
こう書くと
index.html
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="theme-color" content="#4F7DC9">
<meta charset="UTF-8">
<title>[JAWS DAYS 2021] ハンズオン 〜AWSとLINEをつないでAIボットを作ろう！初心者編〜 Presented by JAWS-UG 初心者支部</title>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Code+Pro:400|Roboto:400,300,400italic,500,700|Roboto+Mono">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://storage.googleapis.com/codelab-elements/codelab-elements.css">
<style>
.success {
color: #1e8e3e;
}
.error {
color: red;
}
</style>
</head>
<body>
<google-codelab-analytics gaid="UA-49880327-14"></google-codelab-analytics>
<google-codelab codelab-gaid=""
id="aws-handson-nlp-linebot"
title="[JAWS DAYS 2021] ハンズオン 〜AWSとLINEをつないでAIボットを作ろう！初心者編〜 Presented by JAWS-UG 初心者支部"
environment="web"
feedback-link="https://twitter.com/taketakekaho">
<google-codelab-step label="はじめに" duration="0">
<p class="image-container"><img style="width: 601.70px" src="img\280c3c0684787d2f.png"></p>
<p>この手順は<a href="https://jawsdays2021.jaws-ug.jp/" target="_blank">JAWS DAYS 2021</a>の<a href="https://jaws-ug.doorkeeper.jp/events/118508" target="_blank">ハンズオンセッション</a>にて使うハンズオン手順です。この手順は公開しますので復習や社内展開して自由に使って頂いて構いません。</p>
</body>
</html>こうなります。
ボタンを設置できます。ハイパーリンクを追加し、背景が濃い緑色の1で強調表示されていることを確認します。
こう書くと
こう表示されます。
リンクテキストが「Download」という単語で始まる場合、ファイルダウンロードアイコンがボタンに追加されるとドキュメントに書いてましたが。ならないみたいです。
各ステップごとでかかる時間を見出し１ごとで設定しておくことで、各ステップページを開いた時に表示される残り時間の目安を表示させることができます。
この機能を使う時には、Googleドキュメントの各ステップにDuration：という注釈を付け、濃い灰色の1テキストを使用します。以下のようにします。
簡単に作れそうですよね！