READMEを言語バッジやER図で豪華にする

## この記事のゴール
Githubで新規プロジェクトを作ると、いい感じのバッジなどが着いたテンプレートのREADMEが勝手に作られるようにする

## Markdownにバッジをつける
サンプル（私のSNSへのボタン）

<table>
  <tr>
    <!-- Follow -->
    <td>
      <div>
        <!-- Twitter -->
        <div>
          <a href="https://twitter.com/serna37serna37">
            <img src="https://img.shields.io/twitter/url/https/twitter.com/cloudposse.svg?style=social&label=Follow%20%40serna37serna37">
          </a>
        </div>
        <!-- Github -->
        <div>
          <a href="https://github.com/serna37">
            <img src="https://img.shields.io/badge/--FFFFFF?style=social&logo=github&label=Follow%20serna37">
          </a>
        </div>
        <!-- Qiita -->
        <div>
          <a href="https://qiita.com/neras_1215">
            <img src="https://img.shields.io/badge/--FFFFFF?style=social&logo=data:image/vnd.microsoft.icon;base64,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&label=Follow%20neras_1215">
          </a>
        </div>
      </div>
    </td>
  </tr>
</table>

言語などは↓のスクショみたくもできる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453310/e53458c2-c8e0-ba14-fe8a-a773824cadfe.png)


README.mdに書かずともGithubならなんの言語で構成されてるかくらいはわかりますが
テスト済みかどうか、ライセンスはどうか、など
様々ないい感じのかっこいい情報をバッジで載せられます。

とりあえずこちらを参照ください

https://qiita.com/s-yoshiki/items/436bbe1f7160b610b05c

## バッジの作り方
正直いろんな記事がすでにありますが、ちょっと使い方わかりにくかったりしたので分かりやすくまとめようと思います。

### 1. まずはアイコンを取得
今回はvimのバッジを作ってみましょう。
以下のサイトで欲しいアイコンを検索します

https://simpleicons.org/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453310/4baa1e09-37fb-e3b3-84aa-91acf9076503.png)
名前部分のコピーボタンを押すと
`vim`という文字がコピーされました。

### 2. URLつくる
作成する画像のURLは
```
https://img.shields.io/badge/{バッジ左の文字}-{バッジ右の文字}-{色}.svg?logo={ロゴ名}
```
です。`?`以降のGETリクエストパラメータは複数あり、全量は[こちら](https://shields.io/badges)
よって今回は、`左の文字なし`、`「Vim」`、`緑`、`vimのロゴ`にしたいので
```
https://img.shields.io/badge/-Vim-019733.svg?logo=vim
```
とします。出来上がったものがこちら（Qiitaにimgタグ入れてます）
<img src="https://img.shields.io/badge/-Vim-019733.svg?logo=vim">
```html
<img src="https://img.shields.io/badge/-Vim-019733.svg?logo=vim&style=flat">
```

### 3. いい感じにレイアウトする
基本的に、
- クリックしてURL遷移させたいもの：aタグの中にimgタグ
- ただバッジがあればいいもの：imgタグ

です。あとはこれらをテーブルに入れてあげましょう

<table>
  <!-- ヘッダ -->
  <tr>
    <td>License</td>
    <td>Env</td>
  </tr>
  <!-- ボディ -->
  <tr>
    <td>
      <a href="./LICENSE">
        <img src="http://img.shields.io/badge/license-MIT-blue.svg?style=flat">
      </a>
    </td>
    <td>
      <img src="https://img.shields.io/badge/-Docker-EEE.svg?logo=docker&style=flat">
      <br>
      <img src="https://img.shields.io/badge/-k8s-EEE.svg?logo=kubernetes&style=flat">
    </td>
  </tr>
</table>

```↑のソース.html
<table>
  <!-- ヘッダ -->
  <tr>
    <td>License</td>
    <td>Env</td>
  </tr>
  <!-- ボディ -->
  <tr>
    <td>
      <a href="./LICENSE">
        <img src="http://img.shields.io/badge/license-MIT-blue.svg?style=flat">
      </a>
    </td>
    <td>
      <img src="https://img.shields.io/badge/-Docker-EEE.svg?logo=docker&style=flat">
      <br>
      <img src="https://img.shields.io/badge/-k8s-EEE.svg?logo=kubernetes&style=flat">
    </td>
  </tr>
</table>
```

また、各SNSのバッジはこんなふうになります。
Qiitaみたいにロゴがないものは、DATA URLとして画像本体の文字列をぶちこんでます。
以下をコピペして自分用にカスタムしてみてください。
<table>
  <tr>
    <!-- Follow -->
    <td>
      <div>
        <!-- Twitter -->
        <div>
          <a href="https://twitter.com/serna37serna37">
            <img src="https://img.shields.io/twitter/url/https/twitter.com/cloudposse.svg?style=social&label=Follow%20%40serna37serna37">
          </a>
        </div>
        <!-- Github -->
        <div>
          <a href="https://github.com/serna37">
            <img src="https://img.shields.io/badge/--FFFFFF?style=social&logo=github&label=Follow%20serna37">
          </a>
        </div>
        <!-- Qiita -->
        <div>
          <a href="https://qiita.com/neras_1215">
            <img src="https://img.shields.io/badge/--FFFFFF?style=social&logo=data:image/vnd.microsoft.icon;base64,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&label=Follow%20neras_1215">
          </a>
        </div>
      </div>
    </td>
  </tr>
</table>

```html
<table>
  <tr>
    <!-- Follow -->
    <td>
      <div>
        <!-- Twitter -->
        <div>
          <a href="https://twitter.com/serna37serna37">
            <img src="https://img.shields.io/twitter/url/https/twitter.com/cloudposse.svg?style=social&label=Follow%20%40serna37serna37">
          </a>
        </div>
        <!-- Github -->
        <div>
          <a href="https://github.com/serna37">
            <img src="https://img.shields.io/badge/--FFFFFF?style=social&logo=github&label=Follow%20serna37">
          </a>
        </div>
        <!-- Qiita -->
        <div>
          <a href="https://qiita.com/neras_1215">
            <img src="https://img.shields.io/badge/--FFFFFF?style=social&logo=data:image/vnd.microsoft.icon;base64,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&label=Follow%20neras_1215">
          </a>
        </div>
      </div>
    </td>
  </tr>
</table>
```

## ER図を書く
いろんなやり方がありますが、画像を挿入するのも良いですが
Markdownで書いたER図だと、変更があるたびにスクショを撮り直さなくて良いので
READMEが設計書みたくなって便利です。

こんなふうにMermaid記法でER図をかけます。
（Mermaidは他にもいろいろは図が書けますし、PlantUMLでもOK）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453310/d9762f09-948d-c5fc-a8bd-f60be222cf10.png)

Mermaid記法をライブプレビューできる神サイトがあります。

https://mermaid-js.github.io/mermaid-live-editor/edit#pako:eNpVjstqw0AMRX9FaNVC_ANeFBq7zSbQQrPzZCFsOTMk80CWCcH2v3ccb1qtxD3nCk3Yxo6xxP4W760lUTjVJkCe96ay4gb1NJyhKN7mAyv4GPgxw_7lEGGwMSUXLq-bv18lqKbjqjGodeG6bKh69r8Cz1A3R0oa0_kvOd3jDB-N-7b5_H9ihXPrs-mp7KloSaAieSq4Q8_iyXX5_WlNDKplzwbLvHYkV4MmLNmjUePPI7RYqoy8wzF1pFw7ugj5LVx-AfLqVWg

ここで作ったものをコピペしましょう。このサイト上に保存はできない(?)と思います。
どうせREADMEにいれたいだけだからよし。

## コマンドや一覧表、Gifなどを入れる
ビルドコマンド、インストールコマンド、リリース用コマンドや
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453310/93a32e32-4493-a7b0-3d87-973eea6492b3.png)

https://github.com/serna37/test_crud

使っている様子のGifを載せたり

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453310/72429575-cf1a-c05b-3413-510ec7c5be69.png)

https://github.com/serna37/vim#readme

使い方を書いたり

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453310/0a560fd2-58c0-729a-60c4-641e5f268f4e.png)

https://github.com/serna37/twitter-archiver#usage

APIであればIF一覧を書いたり

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453310/8fc1bfde-9ccb-48d7-9173-9394cdcd6450.png)

https://github.com/serna37/twitter-archiver

## テンプレートにする
ここまで作るのは大変ですよね。
なのであらかじめ作っておいたものをテンプレートとし
新規リポジトリ作成時に、ちょっと修正するだけで済むようにしましょう。

今回の豪華なREADMEや、ライセンスファイルなど
テンプレートにしたいファイルを作成したリポジトリを作成します。

Githubの設定欄で、テンプレートリポジトリのチェックボックスをオンにすればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453310/4c42e056-ac01-e4bd-075c-90074cb7f844.png)

この状態で、次回から新規リポジトリを作成する際にテンプレートとするリポジトリを指定することで、豪華READMEを引き継げます。
テンプレートを複数種類作っておくのも良いですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453310/6ac4aa49-e0ae-8c30-d1ee-f796e8ba4274.png)

私はとりあえずよく使う言語バッジの表を作っておきました。
冒頭のスクショです。新規リポジトリ作成後に、使うやつ意外消すだけでOKなので楽。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453310/e53458c2-c8e0-ba14-fe8a-a773824cadfe.png)
```ソース.html
# doc-template
#### App Profile
<!-- Badges -->
<table>
  <tr>
    <td>License</td>
    <td>Env</td>
    <td>Lang</td>
    <td>DB</td>
    <td>Editor</td>
  </tr>
  <tr>
    <td>
      <a href="./LICENSE">
        <img src="http://img.shields.io/badge/license-MIT-blue.svg?style=flat">
      </a>
    </td>
    <td>
      <img src="https://img.shields.io/badge/-Docker-EEE.svg?logo=docker&style=flat">
      <img src="https://img.shields.io/badge/-k8s-EEE.svg?logo=kubernetes&style=flat">
      <br>
      <img src="https://img.shields.io/badge/-shell-555.svg?logo=shell&style=flat">
      <img src="https://img.shields.io/badge/-zsh-555.svg?logo=&style=flat">
    </td>
    <td>
      <img src="https://img.shields.io/badge/-HTML5-333.svg?logo=html5&style=flat">
      <img src="https://img.shields.io/badge/-CSS3-1572B6.svg?logo=css3&style=flat">
      <br>
      <img src="https://img.shields.io/badge/-JavaScript-276DC3.svg?logo=javascript&style=flat">
      <img src="https://img.shields.io/badge/-Node.js-555.svg?logo=nodedotjs&style=flat">
      <img src="https://img.shields.io/badge/-TypeScript-555.svg?logo=typescript&style=flat">
      <img src="https://img.shields.io/badge/-React-555.svg?logo=react&style=flat">
      <br>
      <img src="https://img.shields.io/badge/-Python-F9DC3E.svg?logo=python&style=flat">
      <img src="https://img.shields.io/badge/-Flask-000000.svg?logo=flask&style=flat">
      <img src="https://img.shields.io/badge/-pandas-%23150458.svg?logo=pandas&style=flat">
      <img src="https://img.shields.io/badge/-selenium-555.svg?logo=selenium&style=flat">
      <br>
      <img src="https://img.shields.io/badge/-Go-555.svg?logo=go&style=flat">
      <img src="https://img.shields.io/badge/-Gin-555.svg?logo=go&style=flat">
      <img src="https://img.shields.io/badge/-Gorm-555.svg?logo=go&style=flat">
      <br>
      <img src="https://img.shields.io/badge/-Java-F80000.svg?logo=&style=flat">
      <img src="https://img.shields.io/badge/-Spring-555.svg?logo=spring&style=flat">
      <img src="https://img.shields.io/badge/-SpringBoot-555.svg?logo=springboot&style=flat">
      <img src="https://img.shields.io/badge/-MyBatis-000000.svg?logo=&style=flat">
      <br>
      <img src="https://img.shields.io/badge/-C-00599C.svg?logo=c&style=flat">
      <img src="https://img.shields.io/badge/-C++-00599C.svg?logo=cplusplus&style=flat">
      <img src="https://img.shields.io/badge/-Rust-555.svg?logo=rust&style=flat">
    </td>
    <td>
      <img src="https://img.shields.io/badge/sqlite-%2307405e.svg?logo=sqlite&style=flat">
      <img src="https://img.shields.io/badge/-PostgreSQL-555.svg?logo=postgresql&style=flat">
      <img src="https://img.shields.io/badge/-MySQL-000000.svg?logo=mysql&style=flat">
    </td>
    <td>
      <img src="https://img.shields.io/badge/-Vim-019733.svg?logo=vim&style=flat">
    </td>
  </tr>
</table>

```

## 最後に
README.mdはGithub上で直接編集する方がすぐプレビューできて楽です。
Qiitaでもいい。
私の作ったWeb上のMarkdownエディタはこちら

https://neras-sta.com/web-editor/

(データ保存はlocalStorageで、ダウンロードやアップロードも可能。)
(localStorageにしかないので端末間共有などはしません)