Sublime Text | Font Awesome のタグを snippet 化して楽に入力する

# Sublime Text | Font Awesome のタグを snippet 化して楽に入力する
## <i class="fa fa-cubes" style="font-size:1em;"></i> 概要
Sublime Text で Font Awesome のタグを楽に入力するために、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> [Font-Awesome の Web サイト](http://fortawesome.github.io/Font-Awesome/icons/)からスクレイピングで icon 名を取得する
    * 抽出条件は i タグ かつ class に `fa` を含むもの
* 1 icon 1 ファイルで Snippet を出力する
    * ファイル名は < icon 名>.sublime-snippet
    * ファイル内容は下記 ( fa-adjust の例)  

~~~xml
<snippet>
  <content><![CDATA[
<i class="fa fa-adjust" style="font-size:1em;"></i>
]]></content>
  <tabTrigger>fa-adjust</tabTrigger>
  <scope>text.html.markdown</scope>
  <description>fontawesome fa fa-adjust</description>
</snippet>
~~~

* ついでに全アイコンとアイコン名の表示サンプル HTML を出力する

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

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

module FontAwesome
  module SublimeText
    URL = 'http://fortawesome.github.io/Font-Awesome/icons/'
    OUTPUT_DIR = 'fontawesome_snippets'
    OUTPUT_SAMPLE_DIR = 'fontawesome_samples'

    class Generator
      def self.bulk_output(klasses)
        Dir.mkdir(OUTPUT_SAMPLE_DIR) unless Dir.exist?(OUTPUT_SAMPLE_DIR)
        sample_html = apply_sample_html(klasses)
        output_sample_html(sample_html)

        Dir.mkdir(OUTPUT_DIR) unless Dir.exist?(OUTPUT_DIR)
        klasses.each do |klass|
          generator = Generator.new(klass)
          snippet = generator.apply_snippet
          generator.output_snippets(OUTPUT_DIR, snippet)
        end
      end

      def self.apply_sample_html(klasses)
        samples = klasses.map do |klass|
          format("<tr><td><i class='fa %s' style='font-size:3em;'></i></td><td>%s</td></tr>", klass, klass)
        end.join("\n")

        template =<<-EOS
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Font Awesome Samples</title>
  <link href='http://fonts.googleapis.com/css?family=Crete+Round' rel='stylesheet' type='text/css'>
  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <style type="text/css">
  body {
    font-family: Crete Round, Arial, serif;
  }
  h1  {
    width: 400px;
    margin: 0 auto;
  }
  table {
    width: 400px;
    margin: 0 auto;
  }
  td {
    text-align:left;
  }
  </style>
</head>
<body>
  <h1>Font Awesome Samples</h1>
  <hr>
  <table>
  <%=samples%>
  </table>
</body>
</html>
        EOS
        ERB.new(template).result(binding)
      end

      def self.output_sample_html(sample_html)
        File.open("./#{OUTPUT_SAMPLE_DIR}/fontawesome_samples.html", "w:utf-8") do |e|
          e.puts(sample_html)
        end
      end

      def initialize(klass)
        @klass = klass
      end

      def apply_snippet
        klass = @klass
        template =<<-EOS
<snippet>
  <content><![CDATA[
<i class="fa <%=klass%>" style="font-size:1em;"></i>
]]></content>
  <tabTrigger><%=klass%></tabTrigger>
  <scope>text.html.markdown</scope>
  <description>fontawesome fa <%=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(FontAwesome::SublimeText::URL) do |f|
  charset = f.charset
  f.read
end

doc = Nokogiri::HTML.parse(html, nil, charset)
klasses = doc.xpath('//i[contains(@class,"fa")]')
   .map { |e|e.attributes.first.last.value }
   .map { |e|e.split(' ') }
   .select { |e|e.size === 2 }
   .map { |e|e[1] }
   .to_a
   .uniq
   .sort

FontAwesome::SublimeText::Generator.bulk_output(klasses)
~~~

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

* Snippet 出力例

~~~xml
<snippet>
  <content><![CDATA[
<i class="fa fa-adjust" style="font-size:1em;"></i>
]]></content>
  <tabTrigger>fa-adjust</tabTrigger>
  <scope>text.html.markdown</scope>
  <description>fontawesome fa fa-adjust</description>
</snippet>
~~~

* 出力結果は下記の GitHub リポジトリにあります
    * <i class="fa fa-github-square" style="font-size:1em;"></i> [Subilme Text Font Awesome Snippets GitHub](https://github.com/tbpgr/fontawesome_snippets)

* Font Awesome Samples
    * <i class="fa fa-external-link" style="font-size:1em;"></i> [fontawesome_snippets demo](http://bl.ocks.org/tbpgr/ff3ab7ca171f523f08bf)

![samples.png](https://qiita-image-store.s3.amazonaws.com/0/43480/08ebe984-4733-3f73-5225-ca6cd3e6f444.png)

## <i class="fa fa-arrow-circle-right" style="font-size:1em;"></i> 参照
<i class="fa fa-external-link" style="font-size:1em;"></i> [Font-Awesome の Web サイト](http://fortawesome.github.io/Font-Awesome/icons/)
<i class="fa fa-github-square" style="font-size:1em;"></i> [Subilme Text Font Awesome Snippets GitHub](https://github.com/tbpgr/fontawesome_snippets)