LoginSignup
58
49

More than 5 years have passed since last update.

GithubのREADMEにGif画像を埋め込む

Last updated at Posted at 2017-09-21

行きつけのジムがリフレッシュ休館という理不尽な境遇にあい、一週間もジムに行けていない筋肉エンジニアのtakuyama29です。

今日は、GithubのREADMEにGif画像を埋め込もうと思ったら案外と詰まったので、後から同じ問題でまた詰まらないようにここに解決方法を記録したいとおもいます。

WikiにGif画像アップしてREADMEに埋め込む

READMEにGif画像を埋め込む方法はいくつかあるみたいですが、今回自分はWikiを使って解決しました。

1. WikiをLocalへcloneする

Wikiはメインのリポジトリとは別に独立したリポジトリとなっているので、ここにGif画像をアップしてそのパスを使います。

手順: Wiki > Clone this wiki locally > Clone

Screen_Shot_2017-09-21_at_21_54_56.png

cloneしたディレクトリに移動して画像アップロード用のフォルダimagesを作成し、その配下に画像を配置します。(~/images/fileName)

2. Gif画像を作成する

僕はQuickTimeを使って.movファイルを生成し、それをGif画像へ変換した物を使いました。

Gif画像へ変換する方法はたくさん紹介されてますが、自分はGithubやQiitaに載せるgif形式の動画を作成する方法を参考にさせていただきました。

いつも活用させていただいております。ありがとうございますm(_ _)m

それでできたのがコレ

Untitled.gif

今回はARアプリのDEMO動画をGif画像にしました。

このサンプルはWorldTrackingに公開しているのでもし興味があればぜひ見てみてください。

因みにSwift3 & Xcode9 & ARKitを使って作成しています。

注意!
この時生成するGif画像のサイズが大きすぎると、WikiへアップしてREADMEへ埋め込んだ際に、ファイルサイズオーバーになるので注意してください。
具体的な上限サイズは調べていないのでなんとも言えないのですが、恐らく5MB程度かと思います。(このGif画像は3MB程度)

3. WikiにアップしたGif画像のパスをREADMEに埋め込む

Wikiに埋め込んだ画像ファイルは以下のパスで取得できます。

https://raw.github.com/wiki/<ユーザ名>/<リポジトリ名>/<画像へのパス>
↓具体例
https://raw.github.com/wiki/takuyama29/WorldTracking/images/Untitled.gif

※Untitledなのはつっこまないでください。

これREADMEで下記に様に記述することでGif画像をそのまま埋め込めます。

![リンク名](パス)
↓具体例
![demo](https://raw.github.com/wiki/takuyama29/WorldTracking/images/Untitled.gif)

この時のリンク名は何を書いてもある程度は問題ないのでdemo以外でも大丈夫です。

無事にREADMEへGif画像を埋め込めました!

OSS活動をする上では、READMEにGif画像を埋め込んだりして分かりやすくすることは大事だと思っているので、こういった細かいところも気を配りたいところです。

最後まで見ていただいてありがとうございましたm(_ _)m

58
49
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
58
49