Octopressへ絵文字の導入

絵文字(Emoji) って世界標準の言葉になってたんですね。

GitHub なんかでもコメントでEmojiを使えたりするようになっています。

というわけで、このブログでもEmojiを使える様にしてみました。

• jekyll-emojiの導入
• gemojiのインストール
• 絵文字の大きさの調整
• Emojiの記事内での有効化
• Emojiを書く
• 他のプラグイン

jekyll-emojiの導入

jetkyll用にjekyll-emoji というプラグインが公開されているのでこれを使います。

ここで公開されているemoji.rbをダウンロードするなりコピーするなりして取ってきて plugins/へ入れます。

gemojiのインストール

次に、GitHubのEmojiであるgemojiをインストール。

Gemfileに

`gem 'gemmoji'`

を加えて、

$ bundle install

を実行。これでgemojiが~/.rvm/gems/ruby-1.9.3-p392/gems/gemoji-1.4.0/ 等にインストールされているので、このなかから ~/.rvm/gems/ruby-1.9.3-p392/gems/gemoji-1.4.0/images/emoji/ をsource/images/emojiへコピーします。

このディレクトリの場所を教えてあげるために、config.ymlへ

emoji_dir: images/emoji

の1行を加えます(category_dir等がある場所が分かりやすいかと思います)。

絵文字の大きさの調整

emoji.rbの中ではEmojiの画像を<img...>を使って挿入していますが、 この中でemojiというclassを使っているのでこの定義を sass/custom/_styles.scssへ加えて画像の大きさを調整します。

1
2
3
4
5
6
7
8
9
10

...
// Emoji
.emoji {
  box-shadow: none;
  border: 0;
  height: 20px;
  margin-bottom: 5px;
  vertical-align: middle;
}
...

Emojiの記事内での有効化

Emojiを有効にするため、以下のファイルを変更します。

1
2
3
4
5

-  <div class="entry-content">{{ content | excerpt }}</div>
+  <div class="entry-content">{{ content | excerpt | emojify }}</div>

-  <div class="entry-content">{{ content }}</div>
+  <div class="entry-content">{{ content | emojify }}</div>

1
2

-  <div class="entry-content">{{ content }}</div>
+  <div class="entry-content">{{ content | emojify }}</div>

Emojiを書く

ここまで出来たらあとはEMOJI CHEAT SHEET に従って書いていくだけです。

1

:smile: :laughing: :rage: :exclamation: :question: :sunny: :warning: :one:

とすれば

となります

他のプラグイン

octemojiと言うプラグインもありました。 これだとOctopress(Liquid)的な書き方で

スマイル{% emoji smile %}

とすると

スマイル

とできます。

こちらのプラグインでは、 上のレポジトリ内に絵文字が含まれていてそれを使っています。

jekyll-emoji+gemojiと比べると少ない数ですが、 それでも十分な種類が入っているので、どちらでも好きな方で良いと思います。 両方入れておいても問題無いです。