概要
shields.ioを用いてテック系アイコンを量産しました。
とりあえず完成したのがこちらです。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
これでスキルマップを作ってみたらいい感じになりました。
アイコンジェネレータも作りました。
https://t.co/6Xv6XIuzRm で技術系アイコンを作るジェネレータを作りました。
デモはここに置いてます。https://t.co/Xua8v7WEwi pic.twitter.com/SYzZY6lejb
— s-yoshiki | スクリプトカス ? (@s_yoshiki_dev) 2019年7月13日
shields.ioについて
https://shields.io/
GitHubのREADMEでよく見かけるアレです。
shields.ioはSVG形式のバッジサービスです。
カスタムバッジを作る
特徴的な機能の1つとして URLのパターンでカスタムバッジを作ることができます。
https://img.shields.io/badge/${subject}-${status}-${color}.svgsubject : バッジの左側に入る文言 status : バッジの右側に入る文言 color : 色
Color
以下のようなものが用意されています。
16進数形式で指定することも可能です。
カスタムスタイル
いくつかのスタイルが用意されています。
?style=plastic&logo=appveyor
?style=flat&logo=appveyor
?style=flat-square&logo=appveyor
?style=for-the-badge&logo=appveyor
?style=popout&logo=appveyor
?style=popout-square&logo=appveyor
?style=social&logo=appveyor
simpleicons
バッジではいくつかのアイコンが使えます。
これについてはsimpleiconsを参考になります。
https://simpleicons.org/
そして一例がこれです。
全部で数えたら648ありました。
おすすめアイコンを作った
おすすめしたいアイコンを作りました。
言語系
ライブラリ・フレームワーク
OS
ミドルウェア
エディタ・IDE
クラウド・他
アイコンジェネレータを作った。
アイコンジェネレータを作りました。 ロゴ名の設定などで一部自分で調整が必要なものがあります。
参考
https://tech-blog.s-yoshiki.com/2019/07/1406/
https://qiita.com/s-yoshiki/items/436bbe1f7160b610b05c
現在のURL指定例
ラベルやメッセージにはURLエンコードが必要です。スペースは _ または %20、ハイフンやアンダースコア自体を表示したい場合はShields.ioのエスケープ規則を確認してください。
https://img.shields.io/badge/build-passing-brightgreen
https://img.shields.io/badge/coverage-95%25-blue
https://img.shields.io/badge/TypeScript-5.x-3178C6?logo=typescript&logoColor=whiteMarkdownでは次のようにリンクも設定できます。
[](https://github.com/OWNER/REPO/actions)バッジを増やしすぎない
バッジは、ビルド状態、リリース、ライセンス、対応バージョンなど「今の状態を一目で判断できる情報」に絞ると効果的です。
- 画像には意味の分かるaltを付ける
- 色だけで成功・失敗を伝えず、ラベルや文字も表示する
- 外部サービス障害でREADME表示が遅くなる可能性を考慮する
- ロゴの商標・ブランドガイドラインを確認する
- privateリポジトリのtokenをバッジURLへ埋め込まない
- 古いCIやバージョンのバッジを放置しない
Simple Iconsのslugやブランド色は変更されることがあります。表示されないロゴは、現在の一覧でslugを確認してください。
