とあるブログで、「Gist」という単語を見かけた。
はじめは（Gitの打ち間違いかな？）と思ったけど、無知でした。
Gistはあります！
Gistとは？
Gist – GitHub
https://gist.github.com/
GitHubが提供している断片コードの共有サービス。
使い方的には、ほぼGitと同じなんだけど、ブログやホームページに簡単にソースを埋め込めたり、無料枠でも非公開できたりと微妙な違いがある。
使い分けとしては、メモ程度にちょっとだけバージョン管理したいときとかに使う感じかな。
ぶっちゃけマイナーサービスだと思う。
「Gist」で検索しても全然引っかからないし…。
本記事の目的としては、Webサイトへの埋め込み機能に焦点を当ててみる。
Gistの埋め込み方法
前提：既にGistにリポジトリを作成し、コードをアップロードしていること
GitHubのメニューから「Your gists」を選ぶ。
埋め込みたいファイルがあるリポジトリを選択する。
画面上部に埋め込みようのスクリプトが表示されているので、クリップボードにコピーする。
<script src="https://gist.github.com/[ユーザー名]/[ハッシュ].js"></script>あとは、埋め込みたいサイトに、コピーしたスクリプトを貼り付けるだけ。
ファイルを指定して貼り付ける
Gistに複数ファイルをアップロードしている場合、スクリプトを修正して以下のようにすればファイル単位で埋め込むことが出来る。
<script src="https://gist.github.com/[ユーザー名]/[ハッシュ].js?file=[ファイル名]"></script>Gistの表示サイズを変更する
デフォルトではフルサイズで表示されるので、スタイルシートを変更することで表示サイズを変更することが出来る。
<style type="text/css">
.gist-file { max-width: XXXpx; }
.gist-data { max-height: XXXpx; }
</style>上記のように、ファイル表示に対しては.gist-file、コード表示に対しては.gist-dataに対してスタイルを指定する。
