ブログにいい感じにソースコードを埋め込むために、GitHubの「Gist」を導入してみた!

Let's share!

  • このエントリーをはてなブックマークに追加

どうもこんにちは、Takuyaです。

先日書いたwebフォントについての記事に、2箇所ほどCSSのコードを書いているところがあります。

その際、preタグとcodeタグでコードを囲ったのですがデザインが気に食わなかったので、今後ソースコードが含まれるような記事も書いていくなら、行番号が出ていたりするようないい感じのデザインでソースコードを表示したいと思いました。

先日の記事はこちら
ブログ記事を全然書けないので、気分を変えるべくAdobe Typekitのwebフォントでブログにモリサワフォントを導入してみた!

調べてみたところ「Google code prettify」や「highlight.js」「SyntaxHighlighter」など色々な手段があったのですが、GitHubの「Gist」というサービスを利用するのが簡単だろうという結論に至り、早速導入してみたので紹介します!

スポンサーリンク

Gistを使うとこんなふうになるよ!

まず先日の記事で書いたCSSコードをサンプルとして、Gistを使うとどのように表示が変わるのか、ということからお伝えしたいと思います。

preタグとcodeタグを使って表示した場合

preタグとcodeタグを使った場合、以下のように表示されます。

スタイルシートをいじったりすることである程度は変えられるのでしょうが、正直めんどくさいです…(笑)


h1 {
	font-family: "Haruhi Gakuen" ;
}

ちょっとダサいですよね…(笑)

Gistを使って表示した場合

Gistを使った場合、同じコードが以下のように表示されます。

手順はGistを使わない場合より少し増えてしまうのですが、それほど面倒な作業ではないです(^^♪

詳しくはこのあと説明します!

行番号も出ているし、セレクタは緑色・コマンドは青色になっているし、これで「こいつデキるッ!」と思わせることができます!

下に書いてあるファイル名から、CSSであることをわかってもらうこともできます!(*^^*)

Gistを使わない場合と比べていい感じになり、技術系ブログのような風格が少し出ましたね!\(^o^)/

Gistを使うにはGitHubへの登録が必要

Gistを使うには、GitHubへの会員登録が必要です。

ボックスを埋めていくだけなのですが、順を追って説明します!

  1. GitHubのトップページにアクセスして、メールアドレス等を登録
  2. 料金プランを選択(今回は無料)
  3. GitHubからのメールを見て、メールアドレスを認証する

という流れです。

GitHubのアカウントを持っている人は飛ばして下さい。

GitHubのトップページにアクセスして、メールアドレス等を登録

まずはGitHubのトップページにアクセスして、

  1. 上の画面になっていなければ、「Sign up」を押す
  2. ユーザー名を決める
  3. メールアドレスを登録
  4. パスワードを決める
  5. 「Sign up for GitHub」を押す

というところまでやります。

料金プランを選択(今回は無料)

ここでは、

  1. 無料プランを選択する
  2. 「Continue」を押す

だけです!

このあとにアンケートが出てくることがありますが、下の方にあるSkipと書いてあるボタンを押すとスキップできます。

GitHubからのメールを見て、メールアドレスを認証する

ここまで進む頃には、GitHubから登録したメールアドレス宛に、上のようなメールが届いているはずです。

届いていないという人は、迷惑メールフォルダを確認して下さい^^;

このメールの「Verify email adress」というボタンをクリックしてメールアドレスを認証すれば、登録完了です!\(^o^)/

Gistを使って記事にコードを埋め込む手順

登録さえ終われば、いつでもGistを使って記事にソースコードを埋め込むことができます(^^♪

手順は、

  1. GitHubにサインインし、Gistのページに行く
  2. 埋め込みたいソースコードをGistで作成
  3. 埋め込みコードをコピーして記事に貼り付ける

という流れです。

結構面倒なのかな?と思っていたのですが、非常に簡単に導入することができて拍子抜けしました!(笑)

GitHubにログインし、Gistのページに行く

まずはGitHubにログインします!

もしくは、Gistのログインページからログインしても構いません。

画像はメールアドレス認証後に表示される画面ですが、普通にログインしても同じ画面が表示されます。

上にある「Gist」というボタンを押して、Gistのページに行きます。

Gistのログインページからサインインした人は、最初からGistの画面が表示されているはずです。

埋め込みたいソースコードをGistで作成

Gistでソースコードを作成するには、

  1. コードの名前を決める
  2. ファイル名を決める
  3. インデントの設定をする
  4. コードを書く
  5. 「Public gist」を作る!

という手順を踏みます。

コードの名前は、Gistの中でコードを管理するために使います。

なんのためのコードなのか、どこに埋め込むために作ったコードなのか分かりやすいように命名するといいと思います。

ファイル名は、記事にGistが表示されたときに、コードの下に表示されます。

cssやjavaなどと拡張子をちゃんと書いておけば、なんのコードなのか伝わりやすくなると思います。

インデントの設定というのは、字詰めの設定です。
僕はTabを設定しました。

最後に、「Create public gist」を押して、公開Gistを作ります。

埋め込みコードをコピーして記事に貼り付ける

最後に画面の上の方に出てきたコードをコピーして、記事に貼り付ければ完成です!

自分で選択してコピーしてもいいですが、コードの右側にあるボタンをクリックすると勝手にコピーしてくれます!(*^^*)

Gistを使ってみて感じたメリット・デメリット

以上、Gistの導入方法を説明してきましたが、僕が実際に導入してみて感じたGistのメリット・デメリットを挙げます。

Gistを使うメリット

まずGistを使うメリットですが、

  • 一度登録してしまえば、非常に簡単に導入できる
  • 表示のタイムラグなどは特に感じられない
  • コマンドの色分けや行番号の表示など、コードを読みやすく表示することができる

という3点です!(^^♪

Gistを使うデメリット

そして、Gistを使うデメリットとしては、

  • コードの管理をGist側ですることになるため、記事の編集画面から直接コードを変更することができない
  • 万が一GitHubがサービス終了した場合、埋め込んだコードがすべて消えてしまう
  • コードのデザインをあまりカスタマイズできない

という点が挙げられます。

しかし、Gist側でコードの管理をすることに関しては、1つのコードを色々なところで使いたい場合などはメリットにもなりますし、サービス終了のリスクは埋め込み型のサービス全般に言えることなので、それほど大きなデメリットとは考えていません

コードのデザインをあまりカスタマイズできないことに関しても、今のところ僕はGistの表示が気に入っていますし、多少の変更であればcssを編集することで対応できるので無問題です(^^)/

まとめ

メリット・デメリットのところでほとんど書いてしまいましたが、僕はGistのデザインは結構気に入っています(^^♪

欲を言えばもう少しコードっぽく、黒背景に白文字のデザインを選べたりすると良かったと思いますが…(笑)

今後Gistに不満が出てきたら、cssを書いてスクロールバーを実装したり、好きなようにカスタムしていこうと思います\(^o^)/

スポンサーリンク

Let's share!

  • このエントリーをはてなブックマークに追加

Please Follow me.