CORDEA blog

Android application engineer

claat で生成した codelab を netlify で CD する

先日私達が公開した Android Dagger codelab は netlify を使用して公開しており、今回はその方法を紹介します。

github.com

claat は google が公開している codelabs を生成するための command line tool です。

github.com

行っていることは非常に簡単で、deploy script を netlify で走らせているだけです。
はじめに検討したのは github.io で、実際にはじめの方は github.io で公開されていましたが、
その時は GitHub Actions も有効化されておらず、自動化を実現できなかったため netlify に移行しました。

dagger-codelabs には scripts 配下にいくつかの shell script が配置されています。

dagger-codelabs/scripts at master · outerheavenproject/dagger-codelabs · GitHub

その中でも deploy.sh を netlify の build command としており、これで deploy しています。
それぞれの shell script がやっていることを簡単に説明します。

deploy.sh

dagger-codelabs/deploy.sh at master · outerheavenproject/dagger-codelabs · GitHub

download_claat, codelab_gen を叩いているだけです。

download_claat.sh

dagger-codelabs/download_claat.sh at master · outerheavenproject/dagger-codelabs · GitHub

readonly url=$(curl https://api.github.com/repos/googlecodelabs/tools/releases/latest | \
    jq -r '.assets[] | select(.name == "claat-linux-amd64") | .url')
curl -LJ -o /tmp/claat -H 'Accept: application/octet-stream' $url
chmod u+x /tmp/claat

claat command を使用できるよう、googlecodelabs/tools から download しています。
まず latest release を見て、返ってくる json から download 用の url を取得しています。
実際に json を見てみると分かりやすいでしょう。jq は新規に install などしなくても使用できます。
次に claat command を download します。このあたりに書いてあります。

あとは実行権限を付与します。

codelab_gen.sh

dagger-codelabs/codelab_gen.sh at master · outerheavenproject/dagger-codelabs · GitHub

readonly base_dir="/tmp/dagger_codelabs"
readonly file="$base_dir/$(date +%s).md"

mkdir $base_dir

cp md/chapters/*.png "$base_dir/."

cat md/INDEX.md > $file
cat md/chapters/*.md >> $file
/tmp/claat export -o docs/ $file

rm -r $base_dir

ここでは章毎に分割された markdown をくっつけています。これは章によって担当が決まっているため、少なくとも章単位で別々の人が編集できる必要があったからです。
ついでに png もあるので、参照可能な位置に copy したあと、各章を /tmp/ にある deploy 用の md に追記していきます。
最後に claat command で markdown から html に変換します。

欠点として、最後に改行を入れないとうまく出力できないという問題があります (cat で結合しているだけなため)。
今回はメンバー間の認識を合わせるのも簡単だったため、このあたりの雑さを許容していましたが、
もっと広く Contributor が集まるような場合にはもう少しちゃんと作ったほうがいいだろうと考えています。

もっと簡単に実現できる方法もあると思います。何かあればぜひコメント、Issue、PR 等ください。