rcmdnk's blog
Last update

1f604_200_200

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

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

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

Sponsored Links

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へ加えて画像の大きさを調整します。

sass/custom/_styles.sass
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を有効にするため、以下のファイルを変更します。

source/_include/article.html
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>
source/_layouts/page.html
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:

とすれば

smile laughing rage exclamation question sunny warning one

となりますthumbsup

他のプラグイン

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

スマイル{% emoji smile %}

とすると

スマイルsmile

とできます。

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

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

追記: 2013/09/28

フィルターを使った形だと何かと不具合があるので、 gemojiの絵文字をタグを使って書けるプラグインを作りました: octopress-gemoji: タグを使ってOctopressで絵文字を書く

追記ここまで

Sponsored Links
Sponsored Links

« Macのターミナル.appでのPROMPT_COMMAND OctopressへFont Awesomeの導入 »