[GitHub] GitHub の Readme に ShieldsIO のバッジを表示する

     

TAGS:

⌛️ 2 min.
GitHub で公開しているリポジトリの 対応プラットフォーム等をわかりやすく バッジで表示する方法を説明します。

リポジトリ README

GitHub でリポジトリを公開した時に、README.md を作っておくと、ファイルと合わせて表示してくれます。

その中に、文章で 対応プラットフォームやライセンスを記述することは大事です。

良さそうなライブラリが見つかっても README.md を読んでいって一番最後に、期待するプラットフォームが対応外とわかって悲しい思いをしたことが何度かあります。

特に、macOS 向けのライブラリを探していると 延々と iOS 向けライブラリの説明を読んでいたと気づくことが多々あります・・・・

ライブラリによっては、README.md の一番最初に ライラセンスや対応ライブラリが バッジで表示してあって わかりやすくて非常に助かります。

自分で公開しているライブラリにも、このようなバッジをつける方法を調べましたので、説明します。

GitHub の README.md

いわゆる markdown で記述することができるようになっています。

詳細は別途調べてもらうとして、イメージを貼り付ける markdown は以下の通りです。

image markdown

![alt text](http://...link to image...)

http://… の箇所が、イメージへのリンクになります。”alt text” は、画像表示がうまくいくならば、表示されませんが、画像の説明にしておくほうが吉です。

Shields.io

Shields.io というサイトを使うことで、適度に(?)柔軟な使いたいイメージを作成することができます。

思い通りの画像を貼り付けるには、自分で画像を作るしかありませんが、
のようなイメージであれば、動的に作成してもらうことができます。

使うべき URL は、以下のようになっています。詳細はこちら

shields.io format

https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>

LABEL, MESSAGE, COLOR のところを指定することで、希望通りのバッジを作成してくれます。

例えば、”https://img.shields.io/badge/SPM-Supported-orange”とすると、 というイメージになります。

Shields.io のバッジを GitHub の README.md に

README.md 上のイメージ表示と、バッジの作り方がわかるので、組み合わせることで、バッジを表示することができるようになります。

先ほどの を GitHub の Readme へ表示するには、以下のような markdown を記述することになります。

README.md

# ReadmeExercise

![SPM is supported](https://img.shields.io/badge/SPM-Supported-orange)

how to write down README nicely

上記の README.md の表示は、以下のようになります。

README.md with Shields.io
README.md with Shields.io

まとめ:README.md に Shields.io のイメージを表示する

README.md に Shields.io のイメージを表示する
  • README.md でのイメージは、![alt text](link to image)
  • Shields.io のイメージは、https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR> で作成できる
  • 組み合わせて ![alt text](https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>) と書くとバッジが表示できる

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です