GithubのEmojisをFontAwesomeっぽい感じで使う

Written by shoota

Emojisってのはcommit commentとか、issueとか、プルリとかでたまに見る、あの絵文字。 Github API v3 をびゃーっっと眺めていたらリストを取得できるのをみつけたので、FontAwesomeっぽい記法でアイコン(というか画像)を埋め込んでくれるjQueryメソッドを書いてみた。

仕様的な何か(つくりかたとか制約とか)

  • GithubのAPIでEmojisの名前とpngのURLをJSON形式で取得できる。認証やAPIキーは不要。
  • FontAwesomeっぽく、アイコンの種類はクラスで指定する。命名規則は、markdownで書くときの名前の頭に”gh-“をつける。
  • アイコンであることを明示するクラスとして’ge’をつける。FontAwesomeでの’fa’に相当するもの。
  • Emojisのpng画像のサイズは親DOMfont-sizeをpx単位で取得し、それを高さとして設定する。

実装してみる

実装は超簡単で、JSONとってきて’ge’のクラスがついている<i>タグのクラス名から画像URLを引いて、その画像を埋め込むだけ。 <i>タグに親DOMのフォントサイズを高さとして指定して、imgタグの高さはheight: inheritを指定する。

  $(function(){
    $.getJSON(
      "https://api.github.com/emojis",
      function(emojis){
        $('i.ge').each(function(){
          var fsz=$(this).parent().css('font-size');
          var cls = $(this).attr('class').replace(/gh-|ge| /g,'');
          $(this).append('<img src="'+emojis[cls]+'" style="height:inherit">');
          $(this).height(fsz);
        });
    });
  });

表示してみる

gists_capture

そこそこ遜色ない感じで表示できてるっぽい。(ブラウザはChrome v.31.x)

### HTML全体はこんな感じ

サンプルではテキスト高さを揃えるために.ge { vertical-align: middle; }してるけど、好みとか周りの見た目とか、一緒に使うフォントとかで違ってきそう。