gistで画像を登録。画像もgist URL化してライトにスニペット的に使えるようにするメモ

はじめに

gistはスニペットを貼って共有するときなどは非常に便利ですよね。
テキストやソースはよく使っていたんですが、画像も同じノリでスニペット的に登録て使いたいなーと思ったときにちょっと手間取ったのでメモ。
gist(github)の設定などは終わってる前提の話しです。

アジェンダ

1. gistに画像を登録する
   • 適当にgistをつくる
   • cloneする
   • 画像を追加してpushする
   • 画像のURLを確認する
2. 他のgistに画像を貼るmarkdown
3. gistで画像を貼るときにサイズを指定する

1がメインで2、3はおまけです

1. gistに画像を登録する

gistに画像を登録した場合、いがいに素直にはできません。
まず適当なgistを作って、適当なgistに対して画像を追加するという手順を踏みます。

適当にgistをつくる

これはgithubのgistページから作るだけですね。

cloneする

作ったgistページにgithub同様にcloneするためのULRがあるので、それを使ってローカルにcloneします。

# サンプル用に適当なディレクトリを作る
$ mkdir sample_gist
$ cd sample_gist

# cloneする
$ git clone git@gist.github.com:e6e7f522528cfef70b65.git

# hash名でディレクトリができている
$ ls -l
drwxr-xr-x  4 hoge  hoge Users  136  8 31 12:29 e6e7f522528cfef70b65

画像を追加してpushする

cloneして作成されたハッシュ名ディレクトリ(今回はe6e7f522528cfef70b65)
に移動して通常のgit操作のようにadd、commit、pushします。
追加したい画像をどこかからe6e7f522528cfef70b65ディレクトリに持ってきてから作業を行います。

# 移動する
$ cd e6e7f522528cfef70b65

# 一応確認
$ pwd
/Users/hoge/github/sample_gist/e6e7f522528cfef70b65

$ ls -l
-rw-r--r--   1 hoge  hoge Users   37  8 31 12:29 img_sample.md

# 適当に画像を持ってくる。
# 追加は通常のgit操作と同様にadd、commit、pushを行う
$ ls -l
-rw-r-----@ 1 hoge  hoge Users  76209  8 31 12:50 free_img_himawari.jpg
-rw-r--r--  1 hoge  hoge Users     37  8 31 12:29 img_sample.md

$ git add free_img_himawari.jpg
$ git commit -m 'add img'
$ git push

この時点でgithubのweb上でgistを確認すると画像が追加さいると思います。
img_sample.mdとともにfree_img_himawari.jpgが追加されました。

画像のURLを確認する

これもgithub上で確認するだけです。
Rawから画像を見てみます。

するとこんな感じにgistリポジトリとしてのURLではなく、画像のみのURLが表示されます。

このURLを使えばライトに画像を張り付けられます。

2. 他のgistに画像を貼るmarkdown

1. gistに画像を登録するで画像をスニペット化することまで行ったので
他のgistやgithub上のmarkdownで画像を張り付けます。

• 画像をmarkdownで貼付けるときは以下のようにします

  ![代替テキスト](画像のURL "画像タイトル")

• 今回の例であればこんな感じですね

![画像です](https://gist.githubusercontent.com/tweeeety/e6e7f522528cfef70b65/raw/bb70b6d5b99cc3ffd4bcff4cb60c8803fc474818/free_img_himawari.jpg)

• markdownでココに貼ってみる
  このはてなブログもmarkdown記法で書いているのでmarkdownで貼ります。

3. gistで画像を貼るときにサイズを指定する

これは強引に行うだけです。
markdown記法は上記のように書くのですが、サイズを指定するオプションはありません。
なので、imgタグで無理矢理書くという感じですね。

• タグ

<img width="100px" src="https://gist.githubusercontent.com/tweeeety/e6e7f522528cfef70b65/raw/bb70b6d5b99cc3ffd4bcff4cb60c8803fc474818/free_img_himawari.jpg">

• html + サイズ指定でここに貼ってみる

参考

参考というよりは画像を使わせて頂いたのでリンクを貼っておきます。
今回のひまわり画像はこちらのサイトからフリー画像を使わせて頂きました。
→ https://www.pakutaso.com/

まとめ

いまさら感な記事でしたが、いままでgistで画像を使ったことがなかったので
そもそもgistって画像使えるの？ってところから調べてたら少し時間がかかりました。
しかしあらためて画像までスニペット的にあつかえるなんて便利ですねgist!
＼(＾o＾)／