格ゲーのコマンドを絵文字で表示する #Rails

格ゲーでは、コマンド表示を数字で表すことがあります。

789
4 6
123

789が左上、上、右上を表し、46が左右、123が左下、下、右下となります。

例えば、ストリートフィターシリーズで有名な昇竜拳や波動拳の必殺技のコマンドは以下のようになります。

波動拳 : 234 + P
昇竜拳 : 623 + P

分かる人にはわかるのですが、初心者にはなんだかわかりません。

それでは、:数字:を絵文字で表示できるプログラムを作成してみたいと思います。環境はRuby on Railsでmarkdown中に:数字:が現れたら、絵文字に変換します。絵文字にはGitHubが提供しているgemojiを使用します。

railsアプリをまず作成します。

$ bundle exec rails new emoji

Gemfileに以下を追加します。

Gemfile

gem 'gemoji'

以下のコマンドでgemojiをインストールします。

$ bundle install --path vendor/bundle

以下のコマンドで絵文字画像をインストールします。

$ bundle exec gemoji extract public/images/emoji

:1:のように1桁の数字を絵文字するほかに、さらに、:236:のように複数の数字が並んでいる場合も絵文字にします。

コマンドの絵文字にするemojifyメソッドを定義します。

application_helper.rb

module ApplicationHelper
 def emojify(content)
    str = h(content).to_str
    new_line = "\r\n"
    if str.match(/\r\n/)
      new_line = "\r\n"
    elsif str.match(/\r/)
      new_line = "\r"
    elsif str.match(/\n/)
      new_line = "\n"
    end
    lines = str.split(/\r\r|\r|\n/)
    ret = '';
    pre_start_tag = false;
    pre_end_tag = false;

    lines.each do |line|
      pre_start_tag = line.match(/<pre><code>/) unless pre_start_tag
      pre_end_tag = line.match(/<\/code><\/pre>/) if pre_start_tag
      if !pre_start_tag && !pre_end_tag
        ret += _emojify(line)
      else
        # pre codeタグ中では絵文字化しない
        ret += line
      end
      if pre_start_tag && pre_end_tag
        pre_start_tag = false
        pre_end_tag = false
      end
      ret += new_line
    end
    ret.html_safe if ret.present?
  end

  private

  def _emojify(content)
    return '' if content == ''
    content.gsub(/:([\d]+):/) do |match|
      numbers = $1.split('')
      ret = ''
      numbers.each_with_index do |number, i|
        if emoji = Emoji.find_by_alias(number)
          ret += ' ' if i > 0
          ret += emoji_image_tag(number, emoji.image_filename)
        else
          ret += match
        end
      end
      ret
    end
  end
end

以下のコマンドでコントローラを作成します。

$ bundle exec rails g controller emoji show

それではコマンドを絵文字で表示してみましょう。viewでemojifyメソッドが使用でます。

app/view/emoji/show.html.slim


h1 絵文字でコマンド表示
p = emojify(':6: + P')
p = emojify('波動拳 : :236: + P')
p = emojify('昇竜拳 : :623: + P')

以下のコマンドでrailsアプリを起動します。

$ bundle exec rails server

ブラウザで確認すると以下のアドレスにアクセスします。
http://localhost:3000/emoji/show

コマンドが絵文字で表示されました。

markdownを使用する場合は、markdownからhtmlに変換したものにemojifyのメソッドを適用して下さい。