2026/8/24 ・ github

GitHub Gist ちょっと便利なやつ

GitHubって思ったより多機能っすよね。正直普段はコード管理とPR、Actions、あとはまぁIssuesとかつかってるくらいしかしてなくて、だいぶ理解が浅いのです。しかも最近はClaudeが色々やってくれるのでね。より理解が進まない現状でした。しかし、そのClaudeがきっかけでGistにふれることになったのでここにまとめておきます。

htmlファイルを公開して共有できる

個人開発というか仲間内で作ってるアプリをClaude Codeに色々やってもらっているときに、気を利かせてデザイン案みたいなhtmlを吐き出してくれました。これそのままメンバーに共有しよって思ったんですけど、ファイルそのままなげるのもあれだしリポジトリにも載せたくねぇなぁって感じだったのです。そんな時にGistの存在を知りました。

Gistが何たるかというと、説明文としては

Instantly share code, notes, and snippets.

だそうです。リポジトリを切るまでもない単発のファイルを、URLひとつで置いて共有できるやつ。そうですかって感じです。まぁ1ファイル分のコード公開するかみんな見てね的なことなんですかね。別にhtmlだけでもなくなんでも公開できそうです。

ちなみに Markdown を置いた場合はちゃんとレンダリングされて表示されます。でもhtmlは対象外で、置いてもソースがそのまま見えるだけ。そこで githack ってもんを使うと、レンダリングされた状態のリンクを作ることができるのです。

https://gistcdn.githack.com/<ユーザー名>/<gist の ID>/raw/<ファイル名>

こんな感じのURLにすればいいとのこと。やってることは単純で、Gist の raw を取ってきて Content-Type: text/html に付け替えて返してるだけ。これでブラウザがページとして描画してくれます。

そもそもなんで付け替えが必要なのかというと、Gist の raw は Content-Type: text/plain で返ってくるからです。ブラウザが「ページとして描画する」か「テキストとして表示する」かはこのヘッダで決まるので、text/plain だとソースが出る。おまけに nosniff までついてて、中身を見て勝手にhtmlだと推測してくれる余地もない。徹底してます。たぶん任意のhtmlが github のドメインで動いちゃうと困るからでしょうね。まぁそりゃそうだよねという話。

役割分担でいうとこう。

担当	やってること
Gist	htmlファイルを保存して raw URL で配る（`text/plain`）
githack	その raw を取ってきて `text/html` に付け替えて返す

ついでに githack はサブドメインで挙動が違うそうです。 gistcdnしかつかったことないんでまぁそういうもんかって感じですな。

ドメイン	用途
`gistcdn.githack.com`	Gist用。キャッシュあり。共有リンクを配るならこっち
`gist.githack.com`	Gist用。キャッシュなし。作りかけを何度も確認したいときはこっち

やってみる

ここに

こう
ほんで保存します。

そのあとURLからID確認して

https://gistcdn.githack.com/<ユーザー名>/<gist の ID>/raw/<ファイル名>

これにアクセスすると

こんな感じ。
楽っすね。
一応コードはこれ。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gist + githack レンダリング確認</title>
<style>
  :root { color-scheme: light dark; }
  body {
    margin: 0;
    padding: 2rem 1.25rem;
    font-family: system-ui, -apple-system, "Hiragino Sans", sans-serif;
    line-height: 1.7;
    background: #0f1115;
    color: #e6e8ec;
  }
  .wrap { max-width: 42rem; margin: 0 auto; }
  h1 { font-size: 1.75rem; margin: 0 0 .25rem; letter-spacing: .01em; }
  .lead { color: #8b93a1; margin: 0 0 2rem; font-size: .95rem; }
  .ok {
    display: inline-block;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: #1b3a2a;
    color: #6ee7a0;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
  }
  .cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .card {
    background: #171a21;
    border: 1px solid #262b36;
    border-radius: .6rem;
    padding: 1rem;
  }
  .card h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #8b93a1; margin: 0 0 .4rem; }
  .card p { margin: 0; font-size: .95rem; }
  code { background: #262b36; padding: .1rem .35rem; border-radius: .25rem; font-size: .85em; }
  .note { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid #262b36; color: #8b93a1; font-size: .875rem; }
</style>
</head>
<body>
<div class="wrap">

  <div class="ok">✓ CSS が適用されています</div>

  <h1>レンダリングされてます</h1>
  <p class="lead">この見た目で表示されていれば、Content-Type が <code>text/html</code> で返っているということです。</p>

  <div class="cards">
    <div class="card">
      <h2>失敗したとき</h2>
      <p>このファイルのソースがそのまま文字で表示されます。<code>&lt;!doctype html&gt;</code> が見えていたら失敗です。</p>
    </div>
    <div class="card">
      <h2>JS の動作</h2>
      <p id="js">JS が動いていません</p>
    </div>
    <div class="card">
      <h2>読み込み元</h2>
      <p id="host">—</p>
    </div>
  </div>

  <p class="note">
    Gist 単体の raw URL は <code>text/plain</code> で返るのでソース表示になります。
    githack や htmlpreview を経由すると <code>text/html</code> に付け替わって描画されます。
  </p>

</div>

<script>
  document.getElementById('js').textContent =
    'JS も動いています（' + new Date().toLocaleString('ja-JP') + '）';
  document.getElementById('host').textContent = location.hostname || '(ローカルファイル)';
</script>
</body>
</html>

注意すること

楽なんですけど、いくつか気をつけたほうがよさそうなところ。

githack は GitHub とは無関係の第三者サービス

githack.com は GitHub のドメインじゃなくて別運営です。Cloudflare 配下でどっかのだれかが動かしてる無料サービス。ありがとう。

つまり 共有したファイルの中身が第三者のサーバを経由します。社内の機微な情報が入ってるものは、これで共有したら良くない。デザイン案くらいなら別にいいか、という判断のうえで使いましょ。

あと無料サービスなので、可用性は誰も保証してくれません。インスタントなものという前提です。

Secret gist は「非公開」ではない

Gist を作るとき Public / Secret を選べます。 Secret を選ぶと検索やプロフィールには出てこなくなるんですけど、URLを知ってる人は誰でも見られるという状態です。認証がかかるわけではない。

さらに今回の話だと githack を経由するので、その経由後のURLを知られてもアウトです。「Secret にしたから安心」ではないところは押さえておきたい。

単純に一般的な情報以外は扱わないという前提でいればいいんじゃないですかね。

ちゃんとやりたいなら別の手がある

htmlpreview.github.io — 同じことをやってくれる別のサービス。github.io ドメインだけどこれも GitHub 公式ではなく、GitHub Pages 上で動いてる第三者のプロジェクトです
GitHub Pages — リポジトリを切る手間はかかるけど、GitHub 自身がホスティングしてくれる正攻法。継続的に見せるものならこっち

べつに色々手段はあるんでね。そもそもファイルそのまま投げろやって話だし。まぁ雑に「いまこれ見てほしい」を投げるなら Gist + githack、残るものなら Pages、という使い分けとかをするときれいかもしれんです。