creatingev.github.io/index.html at master · zyunlongz/creatingev.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396

<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>课程格子黑板报</title>
  <meta name="author" content="CreatingEV">


  <meta name="description" content="本文主要参考一片日文的文章Rails 3.2でiOS5の絵文字を扱う，实践并修改完成。让你的应用可以支持emoji，需要达到以下几点要求 数据库支持emoji(utf8mb4)
rails的sql adapter可以支持以utf8mb4的方式访问数据库
传输过程中，utf8mb4的信息不会丢失 &hellip;">


  <!-- http://t.co/dKP3o1e -->
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="canonical" href="http://creatingev.github.io">
  <link href="/favicon.png" rel="icon">
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
  <link href="/atom.xml" rel="alternate" title="课程格子黑板报" type="application/atom+xml">
  <script src="/javascripts/modernizr-2.0.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>!window.jQuery && document.write(unescape('%3Cscript src="./javascripts/libs/jquery.min.js"%3E%3C/script%3E'))</script>
  <script src="/javascripts/octopress.js" type="text/javascript"></script>
  <!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">


</head>

<body   >
  <header role="banner"><hgroup>
  <h1><a href="/">课程格子黑板报</a></h1>

    <h2>Blog of CreatingEV Dev Team</h2>

</hgroup>

</header>
  <nav role="navigation"><ul class="subscription" data-subscription="rss">
  <li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>

</ul>

<form action="http://google.com/search" method="get">
  <fieldset role="search">
    <input type="hidden" name="q" value="site:creatingev.github.io" />
    <input class="search" type="text" name="q" results="0" placeholder="Search"/>
  </fieldset>
</form>

<ul class="main-navigation">
  <li><a href="/">Blog</a></li>
  <li><a href="/blog/archives">Archives</a></li>
</ul>

</nav>
  <div id="main">
    <div id="content">
      <div class="blog-index">


    <article>

  <header>

      <h1 class="entry-title"><a href="/blog/2013/11/27/support-emoji-in-rails-3-dot-2-14/">Support Emoji in Rails 3.2.14</a></h1>


      <p class="meta">


<time datetime="2013-11-27T09:29:23+08:00" pubdate data-updated="true">Nov 27<span>th</span>, 2013</time>

           | <a href="/blog/2013/11/27/support-emoji-in-rails-3-dot-2-14/#disqus_thread"
             data-disqus-identifier="http://creatingev.github.io/blog/2013/11/27/support-emoji-in-rails-3-dot-2-14/">Comments</a>

      </p>

  </header>


  <div class="entry-content"><p>本文主要参考一片日文的文章<a href="http://qiita.com/ikm/items/7ac0c32c5264eac2b8bb">Rails 3.2でiOS5の絵文字を扱う</a>，实践并修改完成。让你的应用可以支持emoji，需要达到以下几点要求</p>

<ol>
<li>数据库支持emoji(utf8mb4)</li>
<li>rails的sql adapter可以支持以utf8mb4的方式访问数据库</li>
<li>传输过程中，utf8mb4的信息不会丢失</li>
</ol>


<h1>让MySQL数据库支持emoji(utf8mb4)的存储</h1>

<p>MySQL 5.5.3以上已经支持了utf8mb4的字符集，所以如果你的MySQL是5.5.3以上，只需要在my.conf文件中按照如下的配置就可以支持utf8mb4的字符集了。</p>

<pre><code>[client]
default-character-set = utf8mb4

[mysqld]
collation-server = utf8mb4_unicode_ci
character-set-server = utf8mb4
</code></pre>

<p>在修改完my.conf配置之后，重启mysql，检查字符集是否已经更改，除了<code>character_set_system</code>和<code>character_set_filesystem</code>之外，其他的字符集都需要变成utf8mb4类型。</p>

<pre><code>mysql&gt; show variables like 'char%';
+--------------------------+------------------------------------------------------+
| Variable_name            | Value                                                |
+--------------------------+------------------------------------------------------+
| character_set_client     | utf8mb4                                              |
| character_set_connection | utf8mb4                                              |
| character_set_database   | utf8mb4                                              |
| character_set_filesystem | binary                                               |
| character_set_results    | utf8mb4                                              |
| character_set_server     | utf8mb4                                              |
| character_set_system     | utf8                                                 |
| character_sets_dir       | /usr/local/Cellar/mysql/5.5.10/share/mysql/charsets/ |
+--------------------------+------------------------------------------------------+
</code></pre>

<p>为了支持之前用utf8创建的表同样支持emoji，你还需要将之前的表修改未utf8mb4字符集</p>

<pre><code>alter table posts convert to character set utf8mb4 collate utf8mb4_unicode_ci;
</code></pre>

<h1>rails支持emoji(utf8mb4)</h1>

<p>rails对utf8bm4的支持主要通过sql adapter实现，mysql2的0.3.13版本已经支持了utf8mb4 encoding。主要在配置(database.yml)的时候加上以下配置即可</p>

<pre><code>charset: utf8mb4
encoding: utf8mb4
collation: utf8mb4_unicode_ci
</code></pre>

<p>在做完上述工作之后你的rails其实已经支持了utf8mb4的存储与读取，但为了与之前的代码兼容，你还需要做下面的事情</p>

<h2>处理MySQL index 767个字节的限制</h2>

<p>因为mysql对index是有767个字节的限制的，在我们默认使用utf8编码的时候，如果我们定义如下的结构和index，是不会有问题的</p>

<pre><code>add_column :users, :name, :string
add_index :users, :name
</code></pre>

<p>因为utf8最多占3个字节，而rails中创建string类型的字段时，默认用的是varchar(255)这样的数据库结构，所以255*3=765，没有超出767的限制。但我们把字符集改成了utf8mb4，所以一个字最多可以占用4个字节，那255*4就会超出767的字符限制了，所以我们没有办法使用上述的方式来创建字段和index了。</p>

<p>所以我们应该限定name的长度</p>

<pre><code>add_column :users, :name, :string, :limit =&gt; 100
add_index :users, :name
</code></pre>

<p>但对于之前的系统，如果我们全部修改string类型的index,会是一个很大的工作量（主要是在正式服务器上的耗费时间会很长），所以我们可以有个折中的方案，只修改index的长度限制。</p>

<pre><code>add_index :entries, [:user_id, :url],
  unique: true, length: { url: (191-4) }
</code></pre>

<p>所以你需要找遍所有的migration文件，通通加上长度的限制，这样才能避免一个新同学可以通过<code>rake db:migrate</code>。</p>

<p>除此之外，你还需要修改rails系统的schema_migrations_table表的结构，打开activerecord（<code>bundle open activerecord</code>），修改lib/active_record/connection_adapters/abstract/schema_statements.rb的419行，换成下面的语句。</p>

<pre><code>schema_migrations_table.column :version, :string, :null =&gt; false, :limit =&gt; 15
</code></pre>

<p>或者你可以像我一样，打个补丁。将以下内容写入<code>config/initializers/active_record_schema_migrations_version.rb</code>文件</p>

<pre><code>require 'active_support/core_ext/array/wrap'
require 'active_support/deprecation/reporting'

module ActiveRecord
  module ConnectionAdapters # :nodoc:
    module SchemaStatements
            # Should not be called normally, but this operation is non-destructive.
      # The migrations module handles this automatically.
      def initialize_schema_migrations_table
        sm_table = ActiveRecord::Migrator.schema_migrations_table_name

        unless table_exists?(sm_table)
          create_table(sm_table, :id =&gt; false) do |schema_migrations_table|
            schema_migrations_table.column :version, :string, :null =&gt; false, :limit =&gt; 15
          end
          add_index sm_table, :version, :unique =&gt; true,
            :name =&gt; "#{Base.table_name_prefix}unique_schema_migrations#{Base.table_name_suffix}"

          # Backwards-compatibility: if we find schema_info, assume we've
          # migrated up to that point:
          si_table = Base.table_name_prefix + 'schema_info' + Base.table_name_suffix

          if table_exists?(si_table)
            ActiveSupport::Deprecation.warn "Usage of the schema table `#{si_table}` is deprecated. Please switch to using `schema_migrations` table"

            old_version = select_value("SELECT version FROM #{quote_table_name(si_table)}").to_i
            assume_migrated_upto_version(old_version)
            drop_table(si_table)
          end
        end
      end
    end
  end
end
</code></pre>

<h1>修改JSON gem保障utf8mb4信息不丢失</h1>

<p>据<a href="http://blog.sosedoff.com/2012/04/26/emoji-and-rails-json-output-issue/">Emoji and Rails JSON output issue</a>文章描述，在未对json库做补丁之前，JSON会丢失掉一些信息。（我测试的结果是，未打补丁之前，确实emoji无法正确显示）</p>

<pre><code>&gt;&gt; JSON({:a =&gt; "\360\237\230\204"}.to_json)
=&gt; {"a"=&gt;"\357\230\204"}
</code></pre>

<p>所以，针对这个问题的解决方案就是，把以下内容写入<code>config/initializers/active_support_encoding.rb</code>文件</p>

<pre><code>module ActiveSupport::JSON::Encoding
    class &lt;&lt; self
        def escape(string)
            if string.respond_to?(:force_encoding)
                string = string.encode(::Encoding::UTF_8, :undef =&gt; :replace).force_encoding(::Encoding::BINARY)
            end
            json = string.gsub(escape_regex) { |s| ESCAPED_CHARS[s] }
            json = %("#{json}")
            json.force_encoding(::Encoding::UTF_8) if json.respond_to?(:force_encoding)
            json
        end
    end
end
</code></pre>

<p>这样做完之后，你就可以支持emoji在json格式中的传输了。</p>

<p><a href="http://qiita.com/ikm/items/7ac0c32c5264eac2b8bb">Rails 3.2でiOS5の絵文字を扱う</a>还给了另外一个解决办法，</p>

<pre><code>module ActiveSupport
    module JSON
        module Encoding
          class &lt;&lt; self
            def escape_with_json_gem(string)
              ::JSON.generate([string])[1..-2]
            end
            alias_method_chain :escape, :json_gem
          end
        end
    end
end
</code></pre>

<p>但据我测试，如果在不使用resque的时候，但在使用<code>resque</code>的时候，就会出现死循环的问题了。导致<code>resque</code>无法启动。如果你也使用了<code>resque</code>，你可以在escape_with_json_gem里面加入puts信息，来验证我说的话。很有可能是resque对JSON库的generate做了一些改动（我看了resque的代码，没有发现相关的细节，但resque确实动过JSON gem），导致escape与generate循环调用了。因为这个原因，我们使用这种办法来做JSON的补丁。</p>

<h1>添加测试保证对utf8mb4的支持</h1>

<p>为了确保我们上述的工作已经很好地支持了emoji，你最好可以在你的测试中加入类似的测试用例，来确保这一点。</p>

<pre><code>  test "post emoji comment create" do
    post = FactoryGirl.create(:post)
    post :create, :format =&gt; :json, :comment =&gt; {:content =&gt; "😔"}
    assert_response_result(true)
    #测试json是否正确
    assert_equal "😔", @response_json["content"]
    #测试数据库是否正确保存与读取
    assert_equal "😔", Comments.first.content
  end
</code></pre>

<h3>参考资料</h3>

<ul>
<li><a href="http://qiita.com/ikm/items/7ac0c32c5264eac2b8bb">Rails 3.2でiOS5の絵文字を扱う</a></li>
<li><a href="http://blog.sosedoff.com/2012/04/26/emoji-and-rails-json-output-issue/">Emoji and Rails JSON output issue</a></li>
</ul>

</div>


    </article>

  <div class="pagination">

    <a href="/blog/archives">Blog Archives</a>

  </div>
</div>
<aside class="sidebar">

    <section>
  <h1>Recent Posts</h1>
  <ul id="recent_posts">

      <li class="post">
        <a href="/blog/2013/11/27/support-emoji-in-rails-3-dot-2-14/">Support Emoji in Rails 3.2.14</a>
      </li>

  </ul>
</section>

<section>
  <h1>GitHub Repos</h1>
  <ul id="gh_repos">
    <li class="loading">Status updating&#8230;</li>
  </ul>

  <a href="https://github.com/creatingev">@creatingev</a> on GitHub

  <script type="text/javascript">
    $(document).ready(function(){
        if (!window.jXHR){
            var jxhr = document.createElement('script');
            jxhr.type = 'text/javascript';
            jxhr.src = '/javascripts/libs/jXHR.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(jxhr, s);
        }

        github.showRepos({
            user: 'creatingev',
            count: 0,
            skip_forks: true,
            target: '#gh_repos'
        });
    });
  </script>
  <script src="/javascripts/github.js" type="text/javascript"> </script>
</section>


</aside>

    </div>
  </div>
  <footer role="contentinfo"><p>
  Copyright &copy; 2013 - CreatingEV -
  <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>

</footer>


<script type="text/javascript">
      var disqus_shortname = 'CreatingEVDev';


        var disqus_script = 'count.js';

    (function () {
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = '//' + disqus_shortname + '.disqus.com/' + disqus_script;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    }());
</script>


  <script type="text/javascript">
    (function(){
      var twitterWidgets = document.createElement('script');
      twitterWidgets.type = 'text/javascript';
      twitterWidgets.async = true;
      twitterWidgets.src = '//platform.twitter.com/widgets.js';
      document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
    })();
  </script>


</body>
</html>