Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?

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

つくったもの

Typograssy (typography + grass) というサービスを作りました。こんな画像を生成できます。

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

機能

表示をいろいろ調整可能

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

自動スクロール

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

:flag_jp: 日本語表示対応

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

技術

動機

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

構成

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

フォント

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

おわりに

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?