Sublime TextからGitHub Gistに手軽にコードを保管する方法

最近、ちょっとしたプログラミングコードの断片をクラウドに保存するなら、GitHub Gistが便利と今更ながらに気づきました。

GitHub is where people build software. More than 27 million people use GitHub to discover, fork, and contribute to over 80 million projects.

Gistは、こんな感じのコードスニペットをGitHub上で保管することが出来るサービスです。

こういった短いコードでも、バージョン管理できますし、保管しているコードを公開し、ブログなどに埋め込んで見てもらうこともできます(プライベートで保管も可能)。

ただ、Gistは非常に便利なんですが、わざわざブラウザを開いて、コードの保管作業するのは、いささか面倒でした。

GitHub Gistの入力画面

なので「普段使っているSublime Textから手軽に投稿できるパッケージはないだろうか…」と探してみたら、そのものズバリのパッケージ「Gist」がありました。

以下では、このパッケージを利用して、Gist上に手軽にコードをアップする方法を説明したいと思います。

スポンサーリンク
レクタングル(大)広告

主な手順

Sublime TextからGistを利用するのに必要な主な手順はこちらになります。

  1. Sublime TextにGistパッケージをインストール
  2. GitHubでGist操作用のトークンを取得
  3. Gistパッケージにトークンを登録
  4. GistパッケージからGitHub Gistにコード作成

個人的には、「かなり面倒な設定が必要なんじゃないか?」と思っていましたが、結構簡単にできました。

普段、Sublime Textを利用していて、GitHubにもアカウントを持っている場合は、数分で終わる作業かと思います。

Sublime TextにGistパッケージをインストール

とその前に、Sublime Textの初期設定方法はこちら。

先日、Wordpress編集向けにSublime Textの開発環境を新たに作ってみました。 というのも最近は、Wordpre...

まずは、Sublime Textにパッケージをインストールします。

パッケージをインストールするには、「Preferences」から「Package Control」を開きます。

Sublime Textのパッケージメニューを選択

すると、以下のような画面が表示されるので「Install Package」を選択してください

インストールパッケージ項目を選択

表示される入力欄に「gist」と入力すると、Gistパッケージが表示されるので選択してインストールします。

Gistと入力してパッケージを探し選択

これでパッケージのインストールは完了です。

GitHubでGist操作用のトークンを取得

次は、GitHubからGistを操作するためのトークンを取得します。

GitHubアカウントを持っていない場合は、作成する必要があります。

GitHub is where people build software. More than 27 million people use GitHub to discover, fork, and contribute to over 80 million projects.

GitHubでトークンを作成するには、GitHubにログインした状態でPersonal access tokensを開きます。

すると、以下のような画面が表示されるので「Generate new token」ボタンを押します。

GitHubで新しいトークンの作成

すると「New personal access token」という画面が表示されるので「Token description」にトークンの説明を入力します。

GitHubトークンの説明を入力

トークンのスコープ(範囲)である「Select scopes」では、「gist」のみ選択します。

トークンのスコープはGistのみを選択

最後に「Generate token」ボタンを押して設定を保存します。

GitHubトークン作成ボタンを押す

そうすると、GitHubアクセストークンが出力されるので、コピーしておいてください。

GitHubアクセストークンが出力される

Gistパッケージにトークンを登録

次に、Sublime Text側でGistパッケージにトークンを設定します。

設定を開くには「Package Settings→Gist→Settings – User」を開きます。

Gistパッケージのユーザー設定ファイルを開く

あとは、ユーザー設定ファイルに以下のように入力して、設定ファイルを保存してください。

「取得したトークン」部分にGitHubで取得した半角英数字のトークンを入力してください。

GistパッケージからGitHub Gistにコード作成

ここまできたら、あとはSublime TextからGistパッケージを用いてコードを投稿するだけです。

まずは、Sublime Textで新しいファイルを作成し、ファイル名を付けて保存してください。

2018-04-21_12h27_34

ここで付けた名前の拡張子が、Gistでコードハイライトする際の文法として用いられます。例えば、demo.cssという名前だった場合は、Gist上でCSS形式でハイライト表示されます。

ファイルを作成したら次はコードを入力します。

Sublime TextでGist公開用のコードを入力する

全ての入力を終えたら保存します。

Gistパッケージで公開

そして、Gistパッケージで公開作業を行います。

Gistへポストするには、「Tools→Gist→Create Public Gist」を選択します。

Gistに公開ポストする

公開したくない場合は「Create Private Gist」メニューを選択してください。

すると、Sublime Text下部に「Gist Description」という入力欄が表示されるので、説明文を入力しエンターキーを押してください。

Gistコードの説明を書く

次にファイル名の入力です。特に変更する必要もないと思うのでそのままエンターキーを押してください。

Gistファイル名の入力

するとこれだけで、Gist上にコードがストックされます。

かなり簡単。

動作確認

あとはGitHub Gistを開いてコードが登録されているかを確認します。

GitHub Gistにコードが登録されているかを確認する

問題なく登録されていました。

個別コード画面では、こんな感じで表示されます。

GitHub Gistのコード表示画面

Gistでは、埋め込み機能も利用できます。

Gistの埋め込みタグ

これを用いてWordpressに貼り付けると、こんな感じで表示されます。

まとめ

こんな感じで、Sublime TextからいつでもGistにコードの断片を保管できる環境を作っておくことができます。

このようにすることで、コーディングの最中に「このコードは備忘録として残しておきたい」なんてときに、大した労力をかけずにクラウドに保管しておくことができるようになります。

しかも、GitHub上で一元管理され、その上バージョン管理までできて公開もできるので、仲間内でコードの共有も手軽になるかと思います(※GitHubに上げて問題のないコードの場合)。

というわけで「コードの使い方をすぐ忘れるので、メモを手軽に残したい」とか「保管したカンニングペーパーを広く共有したい」なんて時には、良いかと思います。