スニペット（断片コード）を共有できるGitHub Gistでは、通常のリポジトリと同様にスニペットを更新できます。そのため、特定のバージョンを参照したいケースもあると思いますが、通常の方法でコードを埋め込むと表示されるのは最新版です。そこで本記事では、Gistの特定のバージョンを埋め込む方法を紹介します。
更に後半では、Gistを埋め込む例に使ったスクリプトをついでに解説。以前記事に書いた、はてなブログのローカル管理を効率化するblogsync連携スクリプトの改良版になります
Gistのテクニック
特定のバージョンを埋め込む方法
①該当するGistのページを開く
②左上のRevisionsから更新履歴を開く
③該当する版のメニューから"View file"を選択
④該当する版のページが表示されるのでURLをコピー
URLは↓みたいな感じになってます
https://gist.github.com/ユーザーID/Gistのハッシュ/コミットのハッシュ
⑤ページ右上から埋め込み用HTMLを取得
埋め込み用のHTMLは↓みたいな感じになってます
<script src="https://gist.github.com/ユーザーID/Gistのハッシュ.js"></script>
⑥埋め込み用HTML中のURLを特定の版のURLに書き換える
つまりこんな↓感じになります
<script src="https://gist.github.com/ユーザーID/Gistのハッシュ/コミットのハッシュ.js"></script>
要は/コミットのハッシュを書き足すわけですね
後は埋め込みたいページにこのコードをコピペするだけです
ちなみに↓の書き方も可能です
<script src="https://gist.github.com/ユーザーID/Gistのハッシュ.js?revision=コミットのハッシュ"></script>
埋め込み表示例
実際に埋め込んでみましょう。まずは取得した埋め込みHTMLのまま。最新版が表示されます
続いて初版を埋め込んだのがこちら
ぱっと見では区別が付きにくいと思いますが、確かにコードの内容が変わっています。以降はこのスクリプトの解説です
はてなブログの管理を効率化するスクリプト
スクリプトの概要とこれまでの経緯
本記事のスクリプトでは、はてなブログの記事をローカルのファイルと同期するためのコマンドラインツールである、blogsyncを使用します。これにより、記事をパソコンにダウンロードして手元のエディタで編集したり、ローカルで作成した記事をはてなブログに投稿・更新したりできます
blogsyncの主なコマンドには、記事をダウンロードするpull、更新するpush、新規投稿するpostなどがあります。記事のタイトルやカテゴリといったメタデータは、ファイル冒頭に記載されるYAMLフロントマターで管理されます。これにより、gitでのバージョン管理やAIツールとの連携が容易になります
本記事のスクリプトは、blogsyncのコマンド入力を簡略化するとともに、gitの操作をまとめて実行するためのものです
（これまでの経緯として、blogsyncを使ったブログ運用方法や、作成当初のスクリプトについては以下の記事で紹介しています）
使い方とコマンド一覧
PowerShellのターミナルで、blog.ps1ファイルがあるフォルダ（リポジトリのルート）において以下のようにスクリプトを実行します
.\blog.ps1 <コマンド> [引数...]
（Obsidianでターミナルを開いてコマンドを実行した様子）
コマンドには以下のようなものがあり、ブログの投稿から更新、削除まで一連の作業を簡単に行うことができます
| コマンド | 引数 | 説明 |
|---|---|---|
post |
<file_name> <title> |
新しい記事を下書き状態で投稿します。ルートフォルダの<file_name>.mdを元にblogsync postを実行し、entryフォルダに移動してコミットします |
push |
<file_name> <message> [message2] |
entryフォルダ内の記事をblogsync pushで更新し、変更をコミットします |
fetch |
<file_name> <message> [message2] |
entryフォルダ内の記事をblogsync fetchでリモートから取得し、変更をコミットします |
remove |
<file_name> [message2] |
entryフォルダ内の記事をblogsync removeで削除し、git rmでリポジトリからも削除してコミットします |
edit |
<file_name> <message> [message2] |
entryフォルダ内の公開済み記事の変更を、blogsyncは実行せずgitにのみコミットします。ブログに反映しない段階の下書きを記録することができます |
save |
<file_name> <message> [message2] |
ルートフォルダにあるローカル限定ファイル（ブログに投稿しないメモなど）の変更をgitにのみコミットします。blogsyncは実行しません |
help |
なし | このスクリプトのヘルプメッセージを表示します。 |
コマンド実行例
公開済みの記事を更新する
entry/2025/kabu-diary.mdを編集した後、以下のコマンドを実行します
.\blog.ps1 push kabu-diary "追記" "最新の資産残高を記入"
するとスクリプトによって以下のコマンドが実行され、ブログに変更が反映されると共に変更内容がコミットされます
blogsync push .\entry\2025\kabu-diary.md git add .\entry\2025\kabu-diary.md git commit -m "追記：kabu-diary" -m "" -m "最新の資産残高を記入"
新しい記事を投稿する
ルートフォルダにnew-article.mdというファイルを作成した後、以下のコマンドを実行します
.\blog.ps1 post new-article "新しい記事のタイトル"
するとスクリプトによって以下のコマンドが実行されます。ファイルはentry/2025/new-article.mdに移動し、タイトルや下書き指定などのメタデータが書き加えられた上でコミットされます
Get-Content .\new-article.md | blogsync post --custom-path=2025/new-article --title="新しい記事のタイトル" --draft kurutto115.hatenablog.com git rm .\new-article.md git add .\entry\2025\new-article.md git commit -m "投稿：new-article" -m "" -m "新しい記事のタイトル"
ローカルのメモを保存する
ブログに投稿しないscript-commands.mdを編集した後、以下のコマンドを実行します
.\blog.ps1 save script-commands "修正" "blogsync用コマンド入力例"
以下のコマンドにより変更内容がコミットされます。blogsyncは実行されません
git add .\script-commands.md git commit -m "修正：script-commands" -m "" -m "blogsync用コマンド入力例のメッセージ例を修正"
設計上の工夫
コミットメッセージ
このスクリプトでgitにコミットする際、メッセージは以下のような3行形式で統一されます
1行目: 変更内容の要約（<message>引数で指定）とファイル名 2行目: (空行) 3行目: 変更内容の詳細（[message2]引数で指定。省略可）
これはgitの一般的なコミットメッセージの書き方に沿ったものです。1行目で何をしたかを簡潔に示し、3行目以降で詳細を説明します。これにより、後から履歴を見返したときに変更内容が分かりやすくなります
誤操作防止機能
スクリプトには誤操作防止として、対象ファイルが前回のコミットから変更されていない場合、pushを中止する機能を実装しています。これによりfetchするはずが誤ってpushしてしまい、ブラウザ上で加えた変更が消滅する事故を防ぐことができます。逆にfetchを実行する際は前回のコミットから変更が無いか確認し、変更がある場合はfetchを中止します
また、post実行時にはpushよりも引数が少ないことによる入力ミスが懸念されため、各コマンドには引数の数が間違っている場合に実行を中止する機能があります。更に、ファイルを移動するときは前のコミットから余計な変更が無ければ履歴を引き継げるので、元のファイルに変更が加えられている場合もpostの実行を中止する機能を備えています
以前のスクリプトからの変更点
以前はコミットメッセージの１行目にファイル名を入れず、代わりに３行目を記事タイトルにしていました。長々タイトル書かずともファイル名で分かるので、代わりに編集内容の詳細をより書きやすいようにしました。コミット履歴で１行目だけ見てもどの記事を編集したのかすぐ分かるのもグッド
（↑現行のコミットメッセージ・以前のコミットメッセージ↓）
結び
以上、はてなブログ用スクリプト（改良版）の解説でした
最後までお読みいただき、ありがとうございました。お疲れ様でした
