f:id:omuriceman:20190824161435p:plain

この記事は2分程度で読めます

ブラウザのコンソールは色をつけたり、フォントを大きくするなどのカスタマイズができることは有名ですが、実際自分で作るとなるとかなり面倒です。

「mozillaの恐竜」とか「SUUMOのスーモくん」などコンソールに面白く表示してるのを見かけて「時間があったらやりたいですよ…」と思っているのは私だけではないはずです。

先日console-badgeというOSSを見つけました。簡単にshields.ioのバッジのようなログを出力できるようなので調査をしてみることにしました。

shields.ioに似たデザインになるので表現には限界があるのですが、ちょっとした時に使えそうなのでご紹介します。

インストール方法

NPM / YARN

$ npm install console-badge
# OR
$ yarn add console-badge

CDN

プロトタイピング環境などでは下記を利用します。

<script src="https://cdn.jsdelivr.net/npm/console-badge"></script>

本番環境に関しては下記のjsを使用することが推奨されています。

<script src="https://cdn.jsdelivr.net/npm/console-badge@1/dist/console-badge.umd.min.js"></script>

使用方法

基本的な使い方をコメントをつけてご紹介します。

//log warn error infoに対応
consoleBadge.error({
  //2種類の表示モードが選べる。デザインが少し違う
  mode: 'shields.io',
  //左側に表示するテキスト。絵文字やURLも可能
  leftText: 'エラー',
  //左側に表示するテキストの色。URLの場合無効
  leftTextColor: 'red',
  //左側に表示する背景色
  leftBgColor: 'white',
  //右側に表示する内容
  rightText: 'なんかエラーです',
  rightBgColor: 'red',
  rightTextColor: '#FFF'
});

余談ですが上記のオプションに何もいれないと、Lorem Ipsumが表示されます。

f:id:omuriceman:20190825133338p:plain

ブログでも利用する

私のような人間はブログにも秘密のメッセージをいれたくなります。早速はてなブログで試して見ましょう。

f:id:omuriceman:20190825133022p:plain

<script src="https://cdn.jsdelivr.net/npm/console-badge@1/dist/console-badge.umd.min.js"></script>
<script>
consoleBadge.log({
mode: 'shields.io',
leftText: '絶対見ないでね',
rightText: 'https://twitter.com/iijima_wataru 🚀',
rightBgColor: '#ffc107',
});
</script>