[Gist] gist-embedの使い方を調べてみた (1) 〜 id, file, caption, hide-footer 〜
Nプログラマ(@Nprog128)です。
今回はgist-embedの使い方についてのメモリアです。
作者さんのリポジトリが変わっていて古い方はjQueryが必要でしたが、新しい方は不要みたいです。
追加するcdnのscriptタグも新旧で変わっているので、githubリポジトリのreadmeを確認しましょう。
こちらのスクリプトは、gistの埋め込みソースコードに対してオプションを指定することにより色々な表示ができます。
オプションの使い方が分からなかったので、公式をサンプルを読みながら少しずつ使ってみました。
gist-embedに指定できるオプションは結構多いので、今回取り扱うのは以下の通りです。
| オプション属性 | できること |
|---|---|
| data-gist-id | 表示するgistのidを指定 |
| data-gist-file | 指定したファイル名を表示 |
| data-gist-caption | キャプションを表示する |
| data-gist-hide-footer | フッターを非表示にする |
概要
目標
gist-embedのオプションの使い方を調べて使ってみる
オプション
- data-gist-id
- data-gist-file
- data-gist-caption
- data-gist-hide-footer
gist-embedの作者様
作者様のgithubは こちら です。
古いURL
https://github.com/blarvanderhoof/gist-embed
とても便利で当ブログでも利用させて頂いていた時期があり、unityの記事とかに使っていました。
使い方の説明はgithubリポジトリのindex.htmlにあります。
githubから見るとソースコードとしての表示になりますので、サンプルを見るためにはリポジトリをcloneしてindex.htmlをブラウザにドラッグ＆ドロップすればオッケーです。
備考: リポジトリが変わったみたいです。
最近githubのリンク先が404になっていて、あれ？公開終了したのかな？、と思ってちょっと調べてみました。
検索してみると同じようなリポジトリが見つかり、READMEを確認すると404になっていたリポジトリと同じみたいです。
移行した理由は新しいリポジトリのREADME QA内に記載されていました。
My old github account couldn’t be recovered, so starting with a new repo here.
古いgithubのアカウントを復元できなかったのでこちらの新しいリポジトリで始めました、というような内容が記述されています。
準備
githubのアカウント
gistを利用するためには、 github のアカウントが必要になります。
githubは2019年1月頃に、無料でprivateリポジトリが利用可能になって話題になりましたね。
スクリプトの準備
gist-embedを使うために必要なファイルを読み込みます。
古いリポジトリ版(jQuery依存)
公式README.mdのInclude jQuery and gist-embed srcの項目にあるコードをheadタグ内に埋め込みます。
<script type=“text/javascript” src=“
https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
<script type=“text/javascript” src=“
https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.7.1/gist-embed.min.js">
利用するバージョンに注意しましょう。バージョンによって利用できないオプションがあります。
(2.6から利用できるようになったdata-gist-enable-cacheなど)
新しいリポジトリ版
githubのREADME > Usage > Add script tagの項目に、追加するscriptタグが記載されています。
1<script
2 type="text/javascript"
3 src="https://cdn.jsdelivr.net/npm/gist-embed@1.0.4/dist/gist-embed.min.js"
4></script>
これをheadタグ内などに記載して、準備完了です。
gistのサンプルコード
gistにアップロードしたファイルです。
このコードはgistページのembededから取得したリンクになります。
（まだgist-embedを使っていない状態）
コード
gistの埋め込みリンク コードを開く
1<script src="https://gist.github.com/nprog256/8cdaee4d7cbb7b77f0b1bf1656018aed.js"></script>
結果
これをこのまま埋め込むと、こんな風に表示されます。
この表示結果をgist-embedライブラリを使って、色々な表示を試していきます。
gist-embedのオプションを使っていく
ここからは先程のgistに対してgist-embedのオプションを使って、色々な表示を試していきます。
(1) data-gist-id: 表示するgistのidを指定
gist-embedを使う時に必ず指定する属性です。
これのみの指定だと先程のサンプルコードと同じで、gistに登録した1つのリポジトリ内のファイルをすべて表示します。
指定するidについてですが、このidはgistコードのURLの末尾に表示されているIDのことです。
今回のgistのURLを例にすると、https://gist.github.com/nprog256/8cdaee4d7cbb7b77f0b1bf1656018aedを使っていますので、idは末尾の8cdaee4d7cbb7b77f0b1bf1656018aedになります。
コード
data-gist-idを指定 コードを開く
1<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed"></code>
結果
指定するidを間違えていると表示されないので注意しましょう。
(2) data-gist-file: ファイル単位の表示
gistのリポジトリ内にある指定したファイルを表示します。
先程はgistの中に2つのファイル(README.MDとsample.php)がありましたが、今回はsample.phpのみが表示されています。
コード
1<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-file="sample.php"></code>
結果
(3) data-gist-caption: キャプションを表示する
コードの先頭にキャプションを表示します（デフォルトでは非表示）
data-gist-caption属性に表示したい文字列を渡すことで表示できます。
1<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-file="sample.php" data-gist-caption="キャプションです"></code>
キャプションの表示と非表示を比べてみます。
キャプションを表示版
ソースコードの一行目の上に、キャプションですと表示されていますね。
キャプションを非表示版（デフォルト）
こちらは何も指定していないので、キャプションは表示されていません。
(4) data-gist-hide-footer: フッターを非表示にする
これを使うとフッターの表示 or 非表示の設定ができます。
これはデフォルトで表示するようになっているので、非表示にしたい時にデータ属性にtrueを設定します。
コード
1<code data-gist-id="8cdaee4d7cbb7b77f0b1bf1656018aed" data-gist-file="sample.php" data-gist-hide-footer="true"></code>
フッターを表示(デフォルト)
フッターを非表示
フッターが非表示になっていることを確認できました。
終わりに
今回は、gist-embedのオプションの使い方を調べてみた、という内容でした。
- data-gist-id
- data-gist-file
- data-gist-caption
- data-gist-hide-footer
今まではファイル単位での表示しか使ったことがないのですが、キャプションやフッターの表示を制御できると見栄えが変わっていいなと思いました。
それでは、このへんで。
バイナリー！
