Qiita記事にさりげなく（けど、わかりやすく）環境を記載する

 

はじめに

先日、@uhooi さんの以下のツイートを見た時に、おっ自分と同じ悩みだなーと思い、Qiita記事の**「どこに」、「どうやって」**、環境を書くといいのか、少し考えてみました

Qiitaに記事を投稿するときにいつも悩むのが「環境」を書く位置なんだよな
バージョンによって動作が異なることもあるから書くんだけど、流れをぶった切ってしまうことが多いhttps://t.co/TbpySzD4S3 pic.twitter.com/MI6kc36E8H

— ウホーイ (@the_uhooi) August 20, 2020

さりげなく（けど、わかりやすく）環境を記載する方法

過不足なく簡潔に環境を記載する方法を模索した結果、OSSのREADME.mdでよく利用されている**badgeサービス（Shields IOやBadgenなど）**を利用して、環境を記事の1番上にbadge表示することにしました。¹

この記事でも、Shields IOを利用してOSバージョンと更新日付を記事の1番上にbadge表示しています。

Shields IOを利用してbadge表示する方法

ここからは、Shields IOでbadgeを表示する方法について説明していきます。
Shields IOでは以下の形式でURLにアクセスすることで、badgeのsvg画像を取得することができます。

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

Qiitaの記事では、次のmarkdownの書き方で、

![<LABEL>-<MESSAGE>](https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>)

以下のような表示が可能になります。

なお、今回は触れませんでしたが、見た目を変更できるstyleオプションや、その他オプションがまだまだあるので、興味ある人はShields IOのサイトを確認してください。

以下、OSバージョンと更新日付の例です

e.g. OSバージョン

![macOS-11.0 Beta（20A5354i）](https://img.shields.io/badge/macOS-11.0 Beta（20A5354i）-brightgreen)


e.g. 更新日付

![Last Modified-2020/08/22](https://img.shields.io/badge/Last Modified-2020/08/22-brightgreen)


最後に

私は今回の方法でさりげなく（けど、わかりやすく）環境を記載するといいかなと思っているのですが、正解のない話なので別のいい方法知ってるよ、などコメントいただけると嬉しいです

参考情報

• Shields IO
• Badgen

1. @mikkame さんの「Qiitaコントリビューション数をGitHubのプロフィールに貼ってドヤれるサービスを作った」を読んで、Qiitaでもbadge表示できるじゃん、と気づきました。 ↩