【Gistの設定と使い方】プラグイン無しでブログにソースコードを埋め込む方法

Gist 設定 使い方 ソースコード 埋め込む方法

こんにちは、きゃぷてんです。

ブログやWordPressテンプレートのカスタマイズの記事を書いていると、HTMLやCSS、PHP、JavaScript・・・などなど、様々な言語を記事内に埋め込むことがあります。

数行であれば、何も考えずにそのまま文字列として表示させてしまえばいいのですが、10行を超えてくると、読みやすいようにテキストエディタ系のプラグインを導入する人も多いでしょう。

ただ、プラグインを無駄に増やしたくない派の人間としては、どうにか外部サービスをうまく使えないものかと考えるわけです。

そこで、色々と調査をしていると「Gist」と呼ばれるサービスにたどり着くことができました。

プラグイン不要で、簡単にブログ記事へソースコードを埋め込むことができるので、今後重宝するサービスだと思います。

Gistとは?どんなサービスなの?

まずは、Gistとは何なのかという部分から説明していきます。

Gistとは、GitHub(エンジニアの集団・有志とイメージしてください)から無料で提供されている「ソースコード管理ツール」です。

Gistができることを、ざっくり紹介しますと・・・

  • ソースコードの管理(複数可能)
  • ソースコードをzipファイルでダウンロードできる
  • ソースコードを公開・非公開できる
  • ソースコードをバージョン管理(履歴管理)できる
  • ソースコードの埋め込みコードを取得できる

などなど、プログラマーやWebデザイナーが重宝するような機能が実装されています。

僕のようにブログを書くことがメインな人は「ソースコードの埋め込みコードを取得できる」という部分に魅力を感じるわけですね。

ちなみに、Gistを利用するためにはアカウント登録が必要になります。(登録方法は後ほど)

 

そうそう、Gistについて調べものをしたい場合「Gist」という検索ワードだと、癌関連の記事(消化管間質腫瘍 Gastrointestinal Stromal Tumor)がヒットします。

そのため、何か調べる場合は「Gist GitHub」等で検索した方がいいですね。

Gistを導入するメリット

Gistを導入するメリットは以下になります。

  • プラグイン無しでソースコードを記事に埋め込める

前述した通り、Gistでは「埋め込みコード」を取得することができます。

そのため、わざわざプラグインを導入しなくても、Gist上で作成したソースコードの埋め込みコードを取得すれば、あとはブログに張り付けるだけで終了です。

プラグインを無駄に増やしたくない人におすすめです。

Gistの設定と使い方

それでは、Gistの設定と使い方に入りましょう。

操作の手順としては「アカウント登録」→「ログイン」→「ソースコード作成」→「埋め込みコード取得」→「記事に埋め込み」の順番で進めていきます。

注意点なども踏まえながら、それぞれの項目について説明していきますね。

アカウント登録~ログイン

まずは、以下のURLからGitHubにアクセスし「Sign up」をクリックしましょう。

https://github.com/

Gist 設定 使い方 ソースコード 埋め込む方法

ページが切り替わり「ユーザー名」「メールアドレス」「パスワード」の入力を促されるので、任意のものを入力し「Create an account」をクリックしましょう。

Gist 設定 使い方 ソースコード 埋め込む方法

プランを選択する画面が表示されるので「free(無料)」を選択し「Continue」をクリックします。

Gist 設定 使い方 ソースコード 埋め込む方法

詳細設定画面が表示されますが、面倒なので「skip this step」をクリックします。

Gist 設定 使い方 ソースコード 埋め込む方法

下図のような画面が表示されればアカウント作成が終了です。

Gist 設定 使い方 ソースコード 埋め込む方法
確認メールについて

入力したメールアドレス宛に、本人確認用のメールが来ています。

本文内の「Verify email address」というリンクをクリックすると、アドレスの確認が完了し上の図と同様の画面が表示されますので、忘れずに済ませておきましょう。

Gist 設定 使い方 ソースコード 埋め込む方法

 

アカウントが作成できたら、以下のURLからGistのページへ移動します。

https://gist.github.com/

Gist 設定 使い方 ソースコード 埋め込む方法

以上で「アカウント登録~ログイン」が完了です。

ソースコード作成~埋め込みコード取得

それでは次に、Gistを使って「ソースコードの作成」と「埋め込みコードの取得」をやりましょう。

Gist 設定 使い方 ソースコード 埋め込む方法
  • Gist description:コードの説明文を入力
  • Filename including extension:任意のファイル名を入力
  • Create secret gist:非公開保存(Gist内でコードが公開されない)
  • Create public gist:公開保存(Gist内でコードが公開される)

ファイル名やソースコード等の入力を終えたら「Create public gist(公開保存)」または「Create secret gist(非公開保存)」をクリックして、ソースコードを保存します。

すると、埋め込みコードを取得できるようになりますので「Embedを選択」→「埋め込みコードをコピー」の順に操作をしましょう。

Gist 設定 使い方 ソースコード 埋め込む方法

以上で「ソースコード作成~埋め込みコード取得」が完了です。

実際にソースコードを埋め込んでみよう!

先ほどコピーした埋め込みコードを張り付けた結果がこちらになります。

張り付けただけですが、きれいにソースコードを表示してくれました。ただ、デフォルトのままだと、ちょっとシンプルすぎるかもしれませんね(笑)

設定を変更するとエディタのデザインをカスタマイズできるかもしれません。その点については現在調査中ですのでわかり次第ブログに書きますね。

プラグインで済ませたいならWP Code Highlight.jsがおすすめ

面倒な登録作業が嫌だという場合は、プラグインを使って簡単にソースコードを表示させましょう。

僕のおすすめは「WP Code Highlight.js」というプラグインです。

WordPressでソースコードを表示できるプラグイン【WP Code Highlight.js】の設定と使い方

2018.03.03
Gist 設定 使い方 ソースコード 埋め込む方法

あなたのシェアが僕の笑顔の源です

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

きゃぷてん

アフィリエイトは副業でやってます。「まったり自由に生きる」がモットーなのでブログ名をliberty-life-blogにしました。 <趣味> 汚い居酒屋探し、フットサル、お散歩、筋トレ <特技> 足首を無限にポキポキ鳴らせます。