みなさん、こんにちは。 お元気でしょうか？
私の方はぎっくり腰になったり、両目とも感染症になったりと散々でした。健康には気をつけたいですね。
さて、前回の記事ではGitpodのアカウント作成と、どんな感じで使うのかの雰囲気を感じていただきました。
今回はGitpodのについてもう少しくわしく紹介したいと思います。
GitpodはWebIDEとかクラウドIDEと呼ばれており、WEBブラウザ上だけで開発を完結させることを目標としています。類似のサービスとしては、Google Cloud Shellというものがあります。
Gitpodは、「Eclipse Theia」という、「真のオープンソースによるVisual Studio Codeの代替」を目指して開発がすすめられている、オープンソースの統合開発環境をベースにしたサービスです。Theiaに関してはリンク先の情報を参照してください。これらのサービスは「WEB IDE」とか「クラウドIDE」と呼ばれているようです。
GitpodはGitHubのリポジトリ内のコードを編集したり、プログラムを実行できます。 リポジトリというのは、とりあえずファイルのおき場所だと覚えておけば良いと思います。 GitpodはGitHubにリポジトリを作ることができませんので、たとえば、私が公開しているリポジトリだったり、その他のリポジトリを利用することになります。 もちろん、ご自身でGitHubにリポジトリを作成し、Gitpodから利用することが可能です。
まず、こちらにアクセスしてください。 まだGitpodのアカウントを作成していない方は過去記事を参考にアカウントを作成してください。
https://github.com/naoland/nemlog-posts
クロームにGitpodの拡張機能をインストール済みであれば、「Gitpod」というボタンが表示されているはずです。拡張機能をインストールしていない場合は、関連リンクを参考にしてインストールしてください。
「Gitpod」ボタンをクリックしてください。ワークスペースが読み込まれ、利用可能な状態になります。
ワークスペースが表示された状態で右上のアイコンをクリックするとメニューが表示されます。最低必要な項目のみ説明します。
メニューから「Account」を選択すると、ユーザ名と利用可能な残り時間が表示されます。フリープランで利用している場合は、毎月50時間の無料使用時間がもらえます。 一定時間（15分くらい）使用しないと自動的にカウントが停止されますので、十分な時間といえます。
メニューから「Open Workspaces」を選択すると、新しいタブに次のように表示されます。表示されるのはワークスペースの一覧です。
1番から順に説明します。
- 15日間ほったらかしにして、利用しなかった場合は自動的にワークスペースが削除されます。削除されても作り直せばよいので「Dissmiss」ボタンをクリックしておきましょう。
- ワークスペースをクリップし、最上位に表示されます。
- このボタンをクリックして鍵マークを外すと、他の人に自分のワークスペースを見せることができます。 基本的に使わなくて良いと思います。
- ワークスペースを削除します。ワークスペースを作り直したい、不要になったので削除したい場合にクリックしてください。
- ワークスペースに関連するメニューを表示します。当面の間使う予定がないので説明を割愛します。
番号をふるのを忘れてしまいましたが、「Open」ボタンをクリックするとワークスペースが開きます。ワークスペースが終了している場合は、このボタンは「Start」と表示されます。
毎回GitHub経由でワークスペースを開くのが面倒な方は、次のリンクをクリックしてください。ワークスペース一覧が表示されます。
ワークスペースの使い方については、次回以降の記事で説明します。理由はGitHubのリポジトリの構成を変更して、より分かりやすくするためです。 現段階では何を言ってるのかお分かりにならないかもしれませんが、次回以降でご理解いただけると思います。
今回はGitpodの設定に関する説明を簡単に行いました。
今後の簡単で便利なプログラミングシリーズの記事は、Gitpodを使用することを前提にしていますので、ご興味がある方はご自身でもGitpodについて調べてみてはいかがでしょうか。
ご自身のPCに開発環境を構築する方法はいろんなパターンがあり、結構大変ですが、Gitpodを使えばほぼすべての開発環境がWEBブラウザのみで整います。 開発者ではない方が、どのように開発環境構築を準備してもらえば良いのかずいぶんと悩みましたが、とりあえずはGitpodで進めていきます。 ただ、将来的にはご自身のPCに開発環境を構築する方法もお伝えしたいと考えています。
また、今回はスクリーンショット画像だけではわかりにくい状況を、GIF動画にしてみました。多少でもわかりやすくなったかご意見をお聞かせくださるとうれしいです。