中安拓也のブログ

プログラミングについて書くブログ

GitHubのREADMEにGIFアニメを配置する

f:id:l08084:20180215181945p:plain

はじめに

REDEME.mdにgifアニメがのっているとちゃんとしたプログラムっぽくなる。

手順

色々とやり方があるらしいが(gifを置く用のブランチを作ったり)、下記手順でやってます。

GIPHY Capture. The GIF Maker

GIPHY Capture. The GIF Maker

  • Giphy, Inc.
  • 写真/ビデオ
  • 無料

まず、gifアニメを作成してください。ちなみに私は👆のアプリを使用してgifアニメを作成してます。

f:id:l08084:20180215182557p:plain

続いて作成したgifファイルをresoucesディレクトリに配置して、 最後に![Angular Tetris](resources/angular-tetris-demo.gif)のようなコードを書いたREADME.mdをGitHubにプッシュすれば完了です。

  • 現在利用しているREADME.mdのテンプレート
Angular Tetris ([Try It](https://l08084.github.io/angular-tetris/))
=========================================================================

![Angular Tetris](resources/angular-tetris-demo.gif)

Run Things Locally
------------------

git clone https://github.com/l08084/angular-tetris
cd angular5-tetris
npm install -g @angular/cli
npm install
ng serve
# open your browser on http://localhost:4200/

出典

下記サイトのREADME.mdを拝借しました。

github.com