GitHubのGistという、コードを管理したり、共有したり、ブログやサイトに埋め込んで公開したりできるサービスの使い方を解説します。
僕自身、ブログでコードを共有したいときにGistを使用しています。Gistを開くと一見難しそうに感じるかもしれませんが、実際使ってみるととても簡単なので、ぜひ参考にしてみてください。
Click or Tap で見たい項目にワープ！
Gistでできること
Gistでは、主に以下の3つのことができます。
- コードのバージョン管理
- コードのブログへの埋め込み
- コードの共有
では、それぞれについて説明します。
Gistの使い方
Gistの基本的な使い方
手順1. GitHubアカウントを作成
まずは、GitHubのTOPページを開き、アカウントを作成しましょう。
アカウント作成途中にプランを選択する箇所がありますが、フリープランで構いません。
手順2. Gistを開く
アカウント作成が完了したら、ログインし、GitHubトップページの上にある「Gist」をクリックします。
こちらがGistのトップページです。
手順3. 基本的な項目の説明
ここでこのページにあるそれぞれの基本的な項目について説明しておきます。
- ① Gist description
-
コードの説明を記載します。
- ② Filename including extension
-
拡張子を含めたファイル名を入力します。「test_code.php」というように拡張子を含めることで、その言語と紐づけされます。
- ③ 「Spaces」 or 「Tabs」
-
インデントをスペースにするかタブにするかを選択します。（よくわからなければ「Spaces」のままで構いません。）
- ④ 「2」 or 「4」 or 「8」
-
タブで挿入するスペース数を選択します。（よくわからなければ「2」のままで構いません。）
- ⑤ 「No wrap」 or 「Soft wrap」
-
右端まで来たら折り返すかどうかを選択します。「No wrap」だと折り返しなし、「Soft wrap」だと折り返します。
- ⑥ コードの入力欄
-
コードを入力します。
- ⑦ Add file
-
入力欄を追加する際に使います。
- ⑧ Create secret gist
-
非公開用のGistにする際にはこちらを選択します。
- ⑨ Create public gist
-
公開用のGistにする際はこちらを選択します。
手順4. Gistを作成する
では、実際にGistを作成してみましょう。
一例として、WordPressの自動ログアウト時間を変更するためのコードを記載してみました。そして「Create public gist」をクリックします。
すると、Gistが保存されました。
コードのバージョン管理をしてみる
コードのバージョン管理について説明します。
例えば、作成したコードを編集し、ちょっとした説明文を追加します。そして「Revisions」という箇所をクリックします。
すると、このように変更履歴を確認できます。
その後、やっぱり追加した説明文がいらないなと思い、説明文を削除します。編集後「Revisions」を見てみると、このように履歴が追加されます。
作成したコードをWordPressに埋め込んで共有してみる
では、作成したコードをWordPressに埋め込んで読者に見せたい場合の手順を解説します。
コードをWordPressに埋め込んで公開する方法として、プラグインを使用する方法もあります。しかし、プラグインを使用した方法だとページの表示が遅くなりがちです。そのため、WordPressでコードを公開する方法の一つとして、Gistを使用した方法はおすすめです。
作成したコードをWordPressに埋め込んで共有する場合は、まず赤枠で囲った部分をクリックします。この動作により、赤枠で囲ったボタンの左にちらっと記載してあるスクリプトがコピーされます。
WordPressの投稿編集ページのテキストエディタを開き、コードを埋め込みたい箇所に、コピーしたスクリプトを貼り付けます。例えばこのように記載してみます。
これを実際にはどのように表示されているか確認してみると以下のとおりです。
WordPressなどのブログでコードを共有する場合はこのようにして使用します。ちなみに、せっかくなのでこのコードを実際にここに埋め込んでおきますね。
作成したコードをURLで共有してみる
次は、作成したコードをURLで共有する方法を解説します。これは特定の人とコードを共有する場合などにおすすめです。
まず、「Embed」と書かれているボタンをクリックし、「Share」を選択します。
そして、赤枠で囲ったボタンをクリックします。これにより共有用のURLをコピーできます。
あとは、コピーしたURLを共有したい人に送ります。ここではブラウザをシークレットモードで開き、URLを開いてみます。すると、このようにコードのページが開かれます。
最後に
今回はGistの使い方を解説しました。
コードの管理や共有、ブログへの埋め込みなどをする際に、Gistはかなり便利なサービスです。使い方も見た目ほど難しくなく、とても簡単なのでぜひ使ってみてくださいね。
もし「ここをもう少し詳しく教えて！」「ここ間違ってますよ！」などありましたら、ページ下のコメント欄からお気軽にお送りください。
もちろん、感想などちょっとしたことでも、お送りいただけるととても嬉しいのでお待ちしてます！