GitHubの草っぽくピクセルフォントを表示するサービスを作った

## つくったもの

[Typograssy](https://github.com/kawarimidoll/typograssy) (typography + grass) というサービスを作りました。こんな画像を生成できます。

![](https://camo.githubusercontent.com/51daa6bd33f728a7b912c6121a2dcad8f507793751042c6ec6fdbdf055284d8e/68747470733a2f2f7479706f6772617373792e76657263656c2e6170702f6170693f746578743d5479706f677261737379)

API経由でSVG画像を生成します。GitHubプロフィールやブログなどに貼ってご活用ください。
※ GitHubの活動状況とは全く関係なく、あくまでただ画像を生成するだけのサービスです。GitHubアカウントも不要です。

## 機能

### 表示をいろいろ調整可能

![](https://camo.githubusercontent.com/4154d94584b6c9a08688d9b77fafb6f6260ddeed5bab74bf768e055a3dddee94/68747470733a2f2f7479706f6772617373792e76657263656c2e6170702f6170693f746578743d48656c6c6f253230776f726c6421266c313d396261386539266c323d366437346439266c333d353035376239266c343d323132323665)

表示する文言や色は自由に設定できます。なお、各ピクセルの色は設定された色の中からランダムに選ばれます。
パラメータの詳細は [README](https://github.com/kawarimidoll/typograssy) を見てください。
設定を簡単にするべく [WEB editor](https://typograssy.vercel.app/) も用意しています。

### 自動スクロール

![](https://camo.githubusercontent.com/750c53e1e25ad8b5714b0c04af66e541e2a14c0b1a570a863b85c9b3d164c0ba/68747470733a2f2f7479706f6772617373792e76657263656c2e6170702f6170693f746578743d48656c6c6f253230646576656c6f70657221253230)

表示文言が長すぎて一度に表示できない場合はスクロールします。スクロール速度は変更可能です。
最後の文字と最初の文字の間を開けるため、最後にスペースを足すと良いです。
(たとえば `"Hello developer!"` ではなく `"Hello developer! "` とする)

### :flag_jp: 日本語表示対応

![](https://camo.githubusercontent.com/b76c3fa6e22c7c4dcc0dd074957b86b100452296f46ecde647b44329b7e69afb/68747470733a2f2f7479706f6772617373792e76657263656c2e6170702f6170693f746578743d254536253944254231254534254241254143254533253832254239254533253832254142254533253832254134254533253833253834254533253833254141254533253833254243254533253831254145254539254142253938254533253831253935254533253831254146254546254243253936254546254243253933254546254243253934254546254244253844254533253831254137254533253831253939254533253830253832)

ASCII文字の他に、ひらがな・カタカナ(半角含む)・全角英数と一部の記号・JIS第一標準漢字に対応しています。表示可能文字はリポジトリ内の [characters.json](https://github.com/kawarimidoll/typograssy/blob/main/api/characters.json) で確認できます。

## 技術

### 動機

@ryo-ma さんの [GitHub Profile Trophy](https://github.com/ryo-ma/github-profile-trophy) ([Qiita記事](https://qiita.com/ryo-ma/items/c6298020098cb631f46e)) というプロジェクトに [Pull Requestを出した](https://github.com/ryo-ma/github-profile-trophy/pull/28) 際に、API経由でSVGを生成するのであれば自分でも作れるかな、と思ったのがきっかけです。TypeScript & deno & Vercelでの開発に関して、かなり参考にさせていただきました。

### 構成

上記の通り、GitHub Profile Trophyを参考にしています。SVGの大枠はGitHubが表示しているものをそのまま拝借して作りました。
SVG生成部ではXMLを直接書くのではなく、 [タグを生成する関数](https://github.com/kawarimidoll/typograssy/blob/main/api/tag.ts) を作成し、JSXっぽく記述しています。
デプロイに使用している [vercel-deno](https://github.com/TooTallNate/vercel-deno) の推奨設定では `/api` 以下にAPIが作られるので、インデックスパスにWEB editorを追加しています。

### フォント

「入力された文字をGitHubの草っぽく表示する」という要件に対し、最初は一つ一つピクセルを手打ちすることも考えたのですが、ASCII文字だけでもしんどいので既存のピクセルフォントを探しました。
きっと誰か作っているだろうとは思っていたのですが、想定ピッタリの [美咲フォント](https://littlelimit.net/misaki.htm)  ([ライセンス](https://littlelimit.net/font.htm)) を発見できたのはラッキーでした。これをピクセル単位に再分解して使用しています。

## おわりに

面白いと思ったら使っていただけると嬉しいです。
Issue / Pull Request / Star は大歓迎です。あなたのContributionをお待ちしています。

https://github.com/kawarimidoll/typograssy

出力されるものを変えれば応用が効きそうなので、今後もいろいろ作ってみたいと思っています。