行きつけのジムがリフレッシュ休館という理不尽な境遇にあい、一週間もジムに行けていない筋肉エンジニアのtakuyama29です。
今日は、GithubのREADMEにGif画像を埋め込もうと思ったら案外と詰まったので、後から同じ問題でまた詰まらないようにここに解決方法を記録したいとおもいます。
WikiにGif画像アップしてREADMEに埋め込む
READMEにGif画像を埋め込む方法はいくつかあるみたいですが、今回自分はWikiを使って解決しました。
1. WikiをLocalへcloneする
Wikiはメインのリポジトリとは別に独立したリポジトリとなっているので、ここにGif画像をアップしてそのパスを使います。
手順: Wiki > Clone this wiki locally > Clone
cloneしたディレクトリに移動して画像アップロード用のフォルダimagesを作成し、その配下に画像を配置します。(~/images/fileName)
2. Gif画像を作成する
僕はQuickTimeを使って.movファイルを生成し、それをGif画像へ変換した物を使いました。
Gif画像へ変換する方法はたくさん紹介されてますが、自分はGithubやQiitaに載せるgif形式の動画を作成する方法を参考にさせていただきました。
いつも活用させていただいております。ありがとうございますm(_ _)m
それでできたのがコレ
今回は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以外でも大丈夫です。
無事にREADMEへGif画像を埋め込めました！
OSS活動をする上では、READMEにGif画像を埋め込んだりして分かりやすくすることは大事だと思っているので、こういった細かいところも気を配りたいところです。
最後まで見ていただいてありがとうございましたm(_ _)m