冬だしGitHubのREADME/プロフィールをいい感じに飾ってみる

# はじめに
冬ですね。
最近の悩みはコーディング中に足が冷えることです。
<br>

さて、今回はGitHubのREADMEやプロフィールについてです。
この記事では、GitHub特有のMarkdownといくつかの埋め込みコンテンツを使って、ちょっとオシャレにプロフィールを作った時の覚え書きです。

# GitHubのMarkdownフォーマット
GitHubのREADMEやプロフィールでは、Markdownをベースにしたフォーマットがされます。

これらは**GitHub Flavored Markdown**と呼ばれ、基本的なMarkdown構文に独自のフォーマットを追加して実装されています。

https://github.github.com/gfm/

そのため、ほとんどのデザインはMarkdownの知識を流用して書くことができます。

https://docs.github.com/ja/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

ただし、これに限られない、デザインのためのいくつかの構文が用意されています。
以下はデザインで使えそうなフォーマットの抜粋です。

## 左右中央揃え
中央ぞろえにしたいコンテンツを`div`タグで囲み、属性に`align='揃えたい方向'`を指定することで要素の整列ができます。

```html
<div align="left">ひだり</div>
<div align="right">みぎ</div>
<div align="center">まんなか</div>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/e870199a-4875-63aa-ba83-5b008454b89f.png)


## 絵文字
`:EMOJI_NAME:`とすることで絵文字の挿入ができます。


絵文字名の一覧は以下にまとめられています↓

https://github.com/ikatyang/emoji-cheat-sheet/tree/master

## 注記
特記事項をハイライトするためのレイアウトが用意されています。

```md
> [!NOTE]  
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

> [!IMPORTANT]  
> Crucial information necessary for users to succeed.

> [!WARNING]  
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/8dd58765-f7b2-455d-1ad6-a096a7c5ed0d.png)

# 埋め込みコンテンツ
これは公式ではありませんが、GitHubのプロフィールやREADMEを装飾する目的で、有志の開発者が埋め込みコンテンツを作成しています。
GitHub上で`github-profile`と検索することで、様々な埋め込みコンテンツが確認できます。↓

https://github.com/topics/github-profile

これらの埋め込みコンテンツは、各ツールによって使い方に差異はありますが、基本的にURL形式で簡単に使用することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/7e9a0027-7ae1-dbab-aed9-0e3d138479c8.png)

また、データを動的に作成しているので、自分の開発の遍歴や統計データを簡単に可視化できるのもいいところ。
<br>
以下にいくつかのおすすめツールをまとめてみました。

## shields.io
様々な用途に応じたバッジを作成できるツールです。
プロフィールで各種SNSのリンクを置いたり、READMEでリポジトリの状況を表示するのに使ったりとけっこう便利。

https://shields.io/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/b67ab837-c8f1-75bf-362c-310423765d7e.png)


## GitHub Readme Stats
GitHub上でのコミットやPR数、使っている言語などの割合を表示してくれるツールです。
シンプルで人気も高く、いろんな人のプロフィールで見るイメージ。

https://github.com/anuraghazra/github-readme-stats

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/bc7e5c32-9329-1ae5-dbba-97c3919f30c8.png)

## skill-icons
自分の持っている技術スタックをプロフィールに飾りたいこと、ありますよね？
そんな時に使うのがこれです。

シンプルなアイコンで、自分が使える技術をプロフィールに飾ることができていい感じ。

https://github.com/tandpfun/skill-icons

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/6f03bee6-d22a-f474-0c4a-a98ea8be63e0.png)


## Typograssy
GitHubのcommit数を表示するグラフ（通称芝）を模した電光掲示板を表示してくれるツール。
横スクロールで文字が出てくるのがおしゃんでお気に入りなのと、一部日本語にも対応しているのがおすすめポイント。

https://github.com/kawarimidoll/typograssy

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/46bcfdb7-a2d1-c461-73b0-d207d41c1d41.png)

# その他
小手先ですが、いくつか小ネタもあります。

## フォント
原則として、GitHub Flavored Markdownではフォントの指定はできません。
が、Unicode内にある装飾文字を使うことで、それっぽい英字を出すことはできたりします。（メンテナンス性は落ちますが）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/c2558939-880e-1ac3-5888-e1b6c2da7a6c.png)

やり方は簡単。
Unicodeから該当の文字を引っ張ってくるだけです。

以下の変換サイトがおすすめです。

https://www.shapoco.net/plainstyle/

# 作ってみた
以上の知識を使って、プロフィールをいい感じにしてみました。↓

https://github.com/ulxsth

![scrnli_2023_12_2 10-39-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883146/34161b60-64f7-2957-f464-a674039e5d8d.png)

個人的なお気に入りはフォントです。手書き感があってかわいい。