みなさんこんにちは。GMOアドマーケティングのH.Tと申します。
Cloud Shellで作るチュートリアルを試してみたのでご紹介したいと思います。
Cloud Shellとは
GCP環境で使えるブラウザでアクセスできるオンライン開発/運用環境です。Cloud Shellで社内勉強用などのチュートリアルが作成できる機能があります。
きっかけ
Google Cloud主催のG.I.G.プログラムに参加しているのですがそこでハンズオンのセッションがありスピーカーの方から共有されたリンクをクリックしたら簡単にチュートリアルが開けたので便利だなと思い試してみました。
チュートリアルの仕組み
チュートリアルはMarkdownで記述されたファイルをCloud Shellで実行することで機能するのですがチュートリアル固有のMarkdownを使用して後述するスポットライトやインラインアイコンを追加することで独自の機能を含むチュートリアルにできます。
使い方
1.GCPのCloud Shellを開きます。
2.チュートリアル用のリポジトリを作成します。
リポジトリにすることで後で共有できるようになります。
3.README.mdをチュートリアル実行する。
下記コマンドでマークダウンファイルをチュートリアル実行できるのでひとまずREADME.mdを対象として実行してみます。|
1 |
$ teachme README.md |
4.色々入力を試して再度実行してみます。
本家ドキュメントを参考に色々入力して再実行してみました。こんな感じになりました。
5.表示の例を見ていきます。
・ソースコードの表示 (1)|
1 2 3 |
``` print("Hello World") ``` |
こんなふうに表示することができます。右にコピークリップボタンが出てきて便利です。
・ソースコードの表示 (2)
バッククオートの後にbashをつけるとさらにCloud Shellへ直接挿入してくれるボタンもつきます。便利！
・ファイルを開くリンク
|
1 |
<walkthrough-editor-open-file filePath="test.txt">open test file</walkthrough-editor-open-file> |
・シェルを起動するリンク
|
1 |
<walkthrough-spotlight-pointer spotlightId="devshell-web-preview-button" text="Open Cloud Shell"></walkthrough-spotlight-pointer> |
・共有方法
個人的に少し感動したのですが こんな形でHTMLのリンクを作って共有することができます。
|
1 2 3 |
<a href="https://ssh.cloud.google.com/cloudshell/editor?cloudshell_git_repo=https://github.com/tsutsumihiroharu/cloud_shell_tutorial&cloudshell_tutorial=README.md"> <img alt="Open in Cloud Shell" src ="https://gstatic.com/cloudssh/images/open-btn.svg"> </a> |
(※↑のリンクをクリックするとご自身のGCP環境で上記のチュートリアルが開きます。)
まとめ
こんな形でチュートリアルを作成できました。 弊社はほぼ全プロダクトでGCP環境を使っていますので簡単に社内でハンズオン形式でチュートリアルなどを作成できて便利かと思います。 チャンスがあればどんどん使っていきたいと思います。明日は@mnaka11152さんによる「レコメンドウィジェットを作ってみよう」に関しての記事です。
引き続き、GMOアドマーケティング Advent Calendar 2021 をお楽しみください！
■エンジニア採用ページ ～福利厚生や各種制度のご案内はこちら～
https://note.gmo-ap.jp/n/n02cbeb6edb0d
■noteページ ～ブログや採用、イベント情報を公開中！～
https://note.gmo-ap.jp/
