つくったもの
Typograssy (typography + grass) というサービスを作りました。こんな画像を生成できます。
API経由でSVG画像を生成します。GitHubプロフィールやブログなどに貼ってご活用ください。
※ GitHubの活動状況とは全く関係なく、あくまでただ画像を生成するだけのサービスです。GitHubアカウントも不要です。
機能
表示をいろいろ調整可能
表示する文言や色は自由に設定できます。なお、各ピクセルの色は設定された色の中からランダムに選ばれます。
パラメータの詳細は README を見てください。
設定を簡単にするべく WEB editor も用意しています。
自動スクロール
表示文言が長すぎて一度に表示できない場合はスクロールします。スクロール速度は変更可能です。
最後の文字と最初の文字の間を開けるため、最後にスペースを足すと良いです。
(たとえば "Hello developer!" ではなく "Hello developer! " とする)
日本語表示対応
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をお待ちしています。
出力されるものを変えれば応用が効きそうなので、今後もいろいろ作ってみたいと思っています。