Sublime Text | emoji を snippet 化して楽に入力する

# Sublime Text | emoji を snippet 化して楽に入力する
## <i class="fa fa-cubes" style="font-size:1em;"></i> 概要
Sublime Text で emoji を楽に入力するために、snippet を作成します。
## <i class="fa fa-terminal" style="font-size:1em;"></i> Snippet 生成スクリプト
### <i class="fa fa-file-text-o" style="font-size:1em;"></i> 仕様
* <i class="fa fa-external-link" style="font-size:1em;"></i> [EMOJI CHEAT SHEET の Web サイト](http://www.emoji-cheat-sheet.com/)からスクレイピングで emoji 名を取得する
    * 抽出条件は span タグ かつ class が `name` のもの
* 1 emoji 1 ファイルで Snippet を出力する
    * ファイル名は < emoji 名>.sublime-snippet
    * ファイル内容は下記 ( :smile: の例)

~~~xml
<snippet>
  <content><![CDATA[
:smile:
]]></content>
  <tabTrigger>em_smile</tabTrigger>
  <scope>text.html.markdown</scope>
  <description>emoji :smile:</description>
</snippet>
~~~

* 本当は 「em_smile」 ではなく 「:smile:」 をトリガーにしたかったが、動作しなかったため 「em_smile」 にした
* ついでに全アイコンとアイコン名の表示サンプル HTML を出力する

### <i class="fa fa-terminal" style="font-size:1em;"></i> Snippet 生成スクリプト

~~~ruby
require 'open-uri'
require 'nokogiri'
require 'erb'

module Emoji
  module SublimeText
    URL = 'http://www.emoji-cheat-sheet.com/'
    OUTPUT_DIR = 'emoji_snippets'
    OUTPUT_SAMPLE_DIR = 'emoji_samples'

    class Generator
      def self.bulk_output(klasses)
        Dir.mkdir(OUTPUT_DIR) unless Dir.exist?(OUTPUT_DIR)
        klasses.each do |klass|
          # 記号付きの emoji 名は例外的な処理が必要なので手動で対応
          next if %w(+1 -1).include?(klass)
          generator = Generator.new(klass)
          snippet = generator.apply_snippet
          generator.output_snippets(OUTPUT_DIR, snippet)
        end
      end

      def initialize(klass)
        @klass = klass
      end

      def apply_snippet
        klass = @klass
        template =<<-EOS
<snippet>
  <content><![CDATA[
:<%=klass%>:
]]></content>
  <tabTrigger>em_<%=klass%></tabTrigger>
  <scope>text.html.markdown</scope>
  <description>emoji <%=klass%></description>
</snippet>
        EOS
        ERB.new(template).result(binding)
      end

      def output_snippets(output_dir, snippet)
        File.open("./#{output_dir}/#{@klass}.sublime-snippet", "w:utf-8") do |e|
          e.puts(snippet)
        end
      end
    end
  end
end

charset = nil
html = open(Emoji::SublimeText::URL) do |f|
  charset = f.charset
  f.read
end

doc = Nokogiri::HTML.parse(html, nil, charset)
klasses = doc.xpath('//span[@class="name"]').map(&:text)
Emoji::SublimeText::Generator.bulk_output(klasses)
~~~

### <i class="fa fa-share-square-o" style="font-size:1em;"></i> 出力内容

* Snippet 出力例

~~~xml
<snippet>
  <content><![CDATA[
:smile:
]]></content>
  <tabTrigger>em_smile</tabTrigger>
  <scope>text.html.markdown</scope>
  <description>emoji smile</description>
</snippet>
~~~

### Sublime Text Emoji Snippet
GitHub に公開しておきました。使い方はコピーして `%Packages%User` 配下にぶち込んでご利用ください。

* <i class="fa fa-github-square" style="font-size:1em;"></i> [emoji_snippets GitHub](https://github.com/tbpgr/emoji_snippets)

## <i class="fa fa-arrow-circle-right" style="font-size:1em;"></i> 参照
* <i class="fa fa-external-link" style="font-size:1em;"></i> [EMOJI CHEAT SHEET の Web サイト](http://www.emoji-cheat-sheet.com/)
* <i class="fa fa-github-square" style="font-size:1em;"></i> [emoji_snippets GitHub](https://github.com/tbpgr/emoji_snippets)