Help us understand the problem. What is going on with this article?

オリジナルのgooglecodelabsを作る

More than 1 year has passed since last update.

オリジナルのgooglecodelabsを作りましょう!
ハンズオンの資料でPDF配布が一般的ですが、googlecodelabsで資料を見やすくしてみませんか?

https://github.com/googlecodelabs/tools

完成資料

こちらのサイトにデプロイしていますので確認してみてください。

スクリーンショット 2019-01-31 11.35.59.png

googlecodelabs環境構築

googlecodelabsの解説をします!

goをインストールしよう!

Goの環境を整えます。こちらからインストールしてください。

https://golang.org/doc/install

環境変数設定(Windows編)

Windowsの方はGoの環境変数にインストールしたフォルダを指定しましょう。

コントロールパネルから[システムの詳細設定]をクリック

s100.png

[環境変数]をクリック

s101.png

Pathをクリックして、[編集]ボタンをクリックします。

s102.png

インストールしたGoの実行環境フォルダを指定します。

s103.png

環境変数設定(Mac編)

Macの方はbash_profileにPathを通しておきましょう

export PATH=$PATH:/usr/local/go/bin

claatをインストール

実行環境インストール

mdファイルをエクスポートしてhtmlにコンバートするプログラムをインストールします。
コマンドプロンプトやターミナルを開いてください。

$ go get github.com/googlecodelabs/tools/claat

Pathを通す(Windows)

Windowsの方はclaatコマンドを実行するためにPathを通しておきます。

s104.png

Markdownファイルを作成する

お好きなmdファイルを作成してください。
ここで注意なのですが、mdファイルの先頭にこれを記述しないとExport時にエラーが表示されます。

---
id: dist
{{if .Meta.Status}}status: {{.Meta.Status}}{{end}}
{{if .Meta.Summary}}summary: {{.Meta.Summary}}{{end}}
{{if .Meta.Author}}author: {{.Meta.Author}}{{end}}
{{if .Meta.Categories}}categories: {{commaSep .Meta.Categories}}{{end}}
{{if .Meta.Tags}}tags: {{commaSep .Meta.Tags}}{{end}}
{{if .Meta.Feedback}}feedback link: {{.Meta.Feedback}}{{end}}
{{if .Meta.GA}}analytics account: {{.Meta.GA}}{{end}}

---

exportする

mdファイルをエクスポートしましょう。

exportコマンドを実行する

コマンドプロンプトやターミナルを開いて、下記コマンドを実行します。

エクスポートしたいフォルダにまず移動しておいてください。

$ cd エクスポートするフォルダ
$ claat export index.md

するとdistフォルダが作成されます。distフォルダに移動してください。serveコマンドを実行して静的サイト用ファイルを書き出します。

自動的にブラウザが起動してcodelabsを確認することができます。

$ cd dist
$ claat serve

あとはdistフォルダの中身をS3等にデプロイすればOKです!

まとめ

これでリッチな資料ができました!
ただ、サイトを表示する際はすごく表示に時間がかかってしまうのが難点です。一度表示されれば爆速で動きます。
是非使ってみてはいかがでしょうか?

システム化のご検討やご相談は弊社までお問い合わせください。
https://i-enter.co.jp/contact/

h-takauma
様々なIoT機器の研究開発を行っています。 AWSの研究開発がメインです。LINE API Expert('19〜) 最近はスマートスピーカーに夢中です! 著書「スマートスピーカーアプリ開発入門」https://amzn.to/2o0KGWs
i-enter
「効果」をつねに提供します。スマホアプリ開発No.1の実績。最新のIoTに対応した開発も行います。
https://www.i-enter.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした