Repository navigation
Expand file tree
/
Copy pathatom.xml
More file actions
528 lines (375 loc) · 50.6 KB
/
Copy pathatom.xml
File metadata and controls
528 lines (375 loc) · 50.6 KB
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
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Inside Hack</title>
<link href="http://hack.inside.com.tw/atom.xml" rel="self"/>
<link href="http://hack.inside.com.tw/"/>
<updated>2011-10-09T17:01:45+08:00</updated>
<id>http://hack.inside.com.tw/</id>
<author>
<name>Inside Inc.</name>
<email>hack@inside.com.tw</email>
</author>
<entry>
<title>你下一個 iOS 專案可以參考的開放原始碼專案</title>
<link href="http://hack.inside.com.tw/blog/2011/10/08/template-for-your-next-ios-project/"/>
<updated>2011-10-08T15:48:00+08:00</updated>
<id>http://hack.inside.com.tw/blog/2011/10/08/template-for-your-next-ios-project</id>
<content type="html"><p>雖然相對 Android 的開放原始碼策略 iOS 系統似乎沒有這麼的「自由開放」，但是在 App 的開發上， iOS 就如同其他許多熱門平台一樣，有很多優質的開放原始碼專案值得參考、投入。</p>
<p>本篇文章便是要介紹一些 iOS 開放原始碼專案，方便開發者快速的打造 iOS apps ，或許下次你要開發 iOS apps 也可以參考。</p>
<!– more –>
<h3>Three20</h3>
<p><a href="http://three20.info/">Three20</a> 的熱門程度連許多非 iOS 開發者都有耳聞，這一個由 Facebook 所公開的開放原始碼專案，目前排名在 GitHub 熱門關注（Popular Wathced）排行的第八名，而前十名則主要包含了像是 jQuery 、 Rails 、 Node.js 等其他重量級的 Web 解決方案。</p>
<p>Three20 主要包含了以下的功能：</p>
<ul>
<li>豐富的 UI 元件，包含模仿原生的 iOS 相簿頁面以及訊息發送介面等</li>
<li>App 中共用的 Stylesheet ，讓我們可以快速的打造客製化介面</li>
<li>進階的 HTTP Request ，支援上傳進度顯示以及資料驗證等</li>
<li>方便的 URL-Based Navigation ，讓開發者可以透過定義 URL 來切換介面，像是撰寫網頁程式一般</li>
<li>加強許多 UIKit / Foundation 的基本功能（例如 NSString 等）</li>
</ul>
<h3>Nibmus</h3>
<p><a href="http://jverkoey.github.com/nimbus/">Nimbus</a> 是 Three20 的主要開發者 Jeff Verkoey 所主導開發的新專案，目標是為了解決 Three20 日益肥大的程式庫所造成的種種問題。</p>
<p>相對於完整的 Three20 而言， Nimbus 的輕量化設計以及徹底的模組化很適合有一定經驗的開發者，只要將自己所需要的模組加入即可，不需要加入整個函式庫。</p>
<p>截至目前為止， Nimbus 已經實作了包含：</p>
<ul>
<li>進階的 HTTP Request ，基於 ASIHTTPRequest</li>
<li>類似 iOS 內建的相簿瀏覽介面</li>
<li>容易使用的 UITableViewDataSource</li>
<li>許多的 UIKit / Foundation 基本功能加強</li>
</ul>
<h3>iOS Boilerplate</h3>
<p><a href="http://iosboilerplate.com/">iOS Boilerplate</a> 是模仿熱門的 HTML5 Boilerplate 專案，替 Cocoa Touch Developer 打造一個方便使用的專案模版，在數個月前推出後也獲得很多開發者的矚目。</p>
<p>iOS Boilerplate 相對於 Nimbus 和 Three20 ，提供了更多更基本的函式庫讓開發者可以方便使用，也和 Nimbus 一般加入了 Cocoa 平台上最熱門的 HTTP 函式庫 ASIHTTPRequest 。</p>
<p>iOS Boilerplate 目前提供了像是：</p>
<ul>
<li>結合 ASIHTTPRequest 的遠端圖片下載以及管理介面</li>
<li>下拉更新的 UITableView header 以及許多 UITableViewCells</li>
<li>第三方的專案，包含 JSONKit 、 SVProgressHUD</li>
<li>以及其他 NSData 、 NSString 和 NSDictionary 的一些 helpers</li>
</ul>
<h3>我的個人偏好</h3>
<p>因為先前曾經參與 Three20 的專案開發，我和我的工作伙伴在 <a href="http://thepolydice.com">Polydice</a> 的工作主要都使用 Three20 為主，且基於 Three20 也開發了許多介面元件，方便我們快速的能夠完成各種專案。</p>
<p>然而在最近的專案當中，我也開始嘗試使用 Nimbus 來進行開發，主要原因在於 Nimbus 提供了更好的客製化空間，讓我們在效能以及介面上有更多著墨。</p>
<div class=’octopress-authorbox’>
<div class="author-pic">
<img src="http://www.gravatar.com/avatar/aa0358f6740f1bf02911e5300e08e800" alt="Richard Lee" />
</div>
<div class="author-about">
<h3>Richard Lee</h3>
<p>Founder of Inside.com.tw and Co-founder of Polydice, Inc.</p>
<ul class="author-links">
<li>
<a href="http://twitter.com/dlackty">@dlackty</a>
</li>
<li>
<a href="http://www.inside.com.tw/">個人網站</a>
</li>
</ul>
</div>
</div>
</content>
</entry>
<entry>
<title>Rubygems: 使用 Carrierwave 處理檔案上傳</title>
<link href="http://hack.inside.com.tw/blog/2011/10/05/rubygems-using-carrierwave-to-upload-files/"/>
<updated>2011-10-05T21:47:00+08:00</updated>
<id>http://hack.inside.com.tw/blog/2011/10/05/rubygems-using-carrierwave-to-upload-files</id>
<content type="html"><h2>參考來源</h2>
<ul>
<li>Github <a href="https://github.com/jnicklas/carrierwave">https://github.com/jnicklas/carrierwave</a></li>
</ul>
<!– more –>
<h2>安裝</h2>
<figure class=’code’><figcaption><span>Gemfile</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="n">gem</span> <span class="s1">&#39;carrierwave&#39;</span>
</span></code></pre></td></tr></table></div></figure>
<h2>建立 uploader</h2>
<pre><code>rails generate uploader user_avatar
</code></pre>
<p>檔案產生於</p>
<pre><code>app/uploader/user_avatar_uploader.rb
</code></pre>
<h2>簡易範例</h2>
<h4>直接使用</h4>
<figure class=’code’><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
<span class=’line-number’>2</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="n">uploader</span> <span class="o">=</span> <span class="no">UserAvatarUploader</span><span class="o">.</span><span class="n">new</span>
</span><span class=’line’><span class="n">uploader</span><span class="o">.</span><span class="n">store!</span><span class="p">(</span><span class="n">my_file</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>
<h4>掛在 model 裡使用</h4>
<p>在 model 裡</p>
<figure class=’code’><figcaption><span>app/models/user.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
<span class=’line-number’>2</span>
<span class=’line-number’>3</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="k">class</span> <span class="nc">User</span>
</span><span class=’line’> <span class="n">mount_uploader</span> <span class="ss">:picture</span><span class="p">,</span> <span class="no">UserAvatarUploader</span>
</span><span class=’line’><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>新增 migration, 因欄位名稱是 picture, 所以新增一個 picture 的 string 欄位在 users table 裡</p>
<pre><code>rails g migration add_column_picture_to_users
</code></pre>
<figure class=’code’><figcaption><span>db/migrate/201101011213_add_column_picture_to_users.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="n">add_column</span> <span class="ss">:users</span><span class="p">,</span> <span class="ss">:picture</span><span class="p">,</span> <span class="ss">:string</span>
</span></code></pre></td></tr></table></div></figure>
<figure class=’code’><figcaption><span>_form.html.erb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
</pre></td><td class=’code’><pre><code class=’html’><span class=’line’><span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;file&quot;</span> <span class="na">name=</span><span class="s">&quot;picture&quot;</span> <span class="nt">/&gt;</span>
</span></code></pre></td></tr></table></div></figure>
<figure class=’code’><figcaption><span>users_controller.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
<span class=’line-number’>2</span>
<span class=’line-number’>3</span>
<span class=’line-number’>4</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="n">u</span> <span class="o">=</span> <span class="no">User</span><span class="o">.</span><span class="n">new</span>
</span><span class=’line’><span class="n">u</span><span class="o">.</span><span class="n">picture</span> <span class="o">=</span> <span class="n">params</span><span class="o">[</span><span class="ss">:picture</span><span class="o">]</span>
</span><span class=’line’><span class="n">u</span><span class="o">.</span><span class="n">save!</span>
</span><span class=’line’><span class="n">u</span><span class="o">.</span><span class="n">picture</span><span class="o">.</span><span class="n">url</span> <span class="c1"># =&gt; /url/to/file.png</span>
</span></code></pre></td></tr></table></div></figure>
<p>在 _form.html.erb 送出 post 後, 便會按照在 user_avatar_uploader.rb 中的設定進行儲存並且回傳檔案網址</p>
<h2>uploader 設定</h2>
<h4>儲存</h4>
<p>存成檔案, fog 為將檔案上傳至 cdn 用, 稍後會介紹</p>
<figure class=’code’><figcaption><span>app/uploader/user_avatar_uploader.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
<span class=’line-number’>2</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="n">storage</span> <span class="ss">:file</span>
</span><span class=’line’><span class="c1"># storage :fog</span>
</span></code></pre></td></tr></table></div></figure>
<p>可覆寫 store_dir, 以指定儲存路徑, 以 public/ 為基礎</p>
<figure class=’code’><figcaption><span>app/uploader/user_avatar_uploader.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
<span class=’line-number’>2</span>
<span class=’line-number’>3</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="k">def</span> <span class="nf">store_dir</span>
</span><span class=’line’> <span class="s2">&quot;uploader/user_avatar&quot;</span>
</span><span class=’line’><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>
限定檔案附檔名</p>
<figure class=’code’><figcaption><span>app/uploader/user_avatar_uploader.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
<span class=’line-number’>2</span>
<span class=’line-number’>3</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="k">def</span> <span class="nf">extension_white_list</span>
</span><span class=’line’> <span class="sx">%w(jpg jpeg gif png)</span>
</span><span class=’line’><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>指定檔名, 包含附檔名 (model.id 稍後介紹)</p>
<figure class=’code’><figcaption><span>app/uploader/user_avatar_uploader.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
<span class=’line-number’>2</span>
<span class=’line-number’>3</span>
<span class=’line-number’>4</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="k">def</span> <span class="nf">filename</span>
</span><span class=’line’> <span class="c1"># @filename</span>
</span><span class=’line’> <span class="s2">&quot;</span><span class="si">#{</span><span class="n">model</span><span class="o">.</span><span class="n">id</span><span class="si">}</span><span class="s2">.png&quot;</span>
</span><span class=’line’><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>指定預設的 url (e.g.沒有圖的時候)</p>
<figure class=’code’><figcaption><span>app/uploader/user_avatar_uploader.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
<span class=’line-number’>2</span>
<span class=’line-number’>3</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="k">def</span> <span class="nf">default_url</span>
</span><span class=’line’> <span class="s2">&quot;/images/fallback/&quot;</span> <span class="o">+</span> <span class="o">[</span><span class="n">version_name</span><span class="p">,</span> <span class="s2">&quot;default.png&quot;</span><span class="o">].</span><span class="n">compact</span><span class="o">.</span><span class="n">join</span><span class="p">(</span><span class="s1">&#39;_&#39;</span><span class="p">)</span>
</span><span class=’line’><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<h4>使用 Imagemagick 壓縮</h4>
<p>Gemfile</p>
<figure class=’code’><figcaption><span>Gemfile</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="n">gem</span> <span class="s1">&#39;rmagick&#39;</span>
</span></code></pre></td></tr></table></div></figure>
<p>uploader 加上</p>
<figure class=’code’><figcaption><span>app/uploader/user_avatar_uploader.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="kp">include</span> <span class="no">CarrierWave</span><span class="o">::</span><span class="no">RMagick</span>
</span></code></pre></td></tr></table></div></figure>
<p>在 user_avatar_uploader.rb 中可以自行定義要用哪些 Imagemagick 的 method 處理圖片</p>
<figure class=’code’><figcaption><span>app/uploader/user_avatar_uploader.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
<span class=’line-number’>2</span>
<span class=’line-number’>3</span>
<span class=’line-number’>4</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="c1"># 轉換成 png</span>
</span><span class=’line’><span class="n">process</span> <span class="ss">:convert</span> <span class="o">=&gt;</span> <span class="s1">&#39;png&#39;</span>
</span><span class=’line’><span class="c1"># 按比例縮成指定大小並且補白</span>
</span><span class=’line’><span class="n">process</span> <span class="ss">:resize_and_pad</span> <span class="o">=&gt;</span> <span class="o">[</span><span class="mi">160</span><span class="p">,</span> <span class="mi">160</span><span class="o">]</span>
</span></code></pre></td></tr></table></div></figure>
<p>所有可用的 api 見 <a href="https://github.com/jnicklas/carrierwave/blob/master/lib/carrierwave/processing/rmagick.rb">https://github.com/jnicklas/carrierwave/blob/master/lib/carrierwave/processing/rmagick.rb</a></p>
<p>若希望可以另做縮圖, 可以透過 version 同時建立與原圖不同的版本</p>
<figure class=’code’><figcaption><span>app/uploader/user_avatar_uploader.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
<span class=’line-number’>2</span>
<span class=’line-number’>3</span>
<span class=’line-number’>4</span>
<span class=’line-number’>5</span>
<span class=’line-number’>6</span>
<span class=’line-number’>7</span>
<span class=’line-number’>8</span>
<span class=’line-number’>9</span>
<span class=’line-number’>10</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="c1"># 版本名稱為 thumb</span>
</span><span class=’line’><span class="n">version</span> <span class="ss">:thumb</span> <span class="k">do</span>
</span><span class=’line’> <span class="n">process</span> <span class="ss">:resize_and_pad</span> <span class="o">=&gt;</span> <span class="o">[</span><span class="mi">100</span><span class="p">,</span> <span class="mi">100</span><span class="o">]</span>
</span><span class=’line’> <span class="n">process</span> <span class="ss">:convert</span> <span class="o">=&gt;</span> <span class="s1">&#39;png&#39;</span>
</span><span class=’line’><span class="k">end</span>
</span><span class=’line’><span class="c1"># 版本名稱為 small</span>
</span><span class=’line’><span class="n">version</span> <span class="ss">:small</span> <span class="k">do</span>
</span><span class=’line’> <span class="n">process</span> <span class="ss">:resize_and_pad</span> <span class="o">=&gt;</span> <span class="o">[</span><span class="mi">160</span><span class="p">,</span> <span class="mi">160</span><span class="o">]</span>
</span><span class=’line’> <span class="n">process</span> <span class="ss">:convert</span> <span class="o">=&gt;</span> <span class="s1">&#39;png&#39;</span>
</span><span class=’line’><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>mixin 類似 CarrierWave::RMagick 的 module 可以將更多 RMagick 的 api 應用在 process 中</p>
<p>RMagick api 可參考</p>
<blockquote><ul>
<li>doc: <a href="http://studio.imagemagick.org/RMagick/doc/">http://studio.imagemagick.org/RMagick/doc/</a></li>
<li>source: <a href="https://github.com/rmagick/rmagick/blob/master/lib/RMagick.rb">https://github.com/rmagick/rmagick/blob/master/lib/RMagick.rb</a></li>
</ul>
</blockquote>
<p>取得 version :</p>
<figure class=’code’><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
<span class=’line-number’>2</span>
<span class=’line-number’>3</span>
<span class=’line-number’>4</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="n">u</span> <span class="o">=</span> <span class="no">User</span><span class="o">.</span><span class="n">find</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
</span><span class=’line’><span class="n">u</span><span class="o">.</span><span class="n">picture</span><span class="o">.</span><span class="n">url</span> <span class="c1"># 原圖 url </span>
</span><span class=’line’><span class="n">u</span><span class="o">.</span><span class="n">picture</span><span class="o">.</span><span class="n">thumb</span><span class="o">.</span><span class="n">url</span> <span class="c1"># thumb 版本的 url</span>
</span><span class=’line’><span class="n">u</span><span class="o">.</span><span class="n">picture</span><span class="o">.</span><span class="n">small</span><span class="o">.</span><span class="n">url</span> <span class="c1"># small 版本的 url</span>
</span></code></pre></td></tr></table></div></figure>
<h4>上傳至 CDN (以 Amazon S3 為例)</h4>
<figure class=’code’><figcaption><span>Gemfile</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="n">gem</span> <span class="s1">&#39;fog&#39;</span>
</span></code></pre></td></tr></table></div></figure>
<p>在 storage 改為 fog</p>
<figure class=’code’><figcaption><span>app/uploader/user_avatar_uploader.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="n">storage</span> <span class="ss">:fog</span>
</span></code></pre></td></tr></table></div></figure>
<p>新增 config/initializer/carrierwave.rb, 內容如下</p>
<figure class=’code’><figcaption><span>config/initializer/carrierwave.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
<span class=’line-number’>2</span>
<span class=’line-number’>3</span>
<span class=’line-number’>4</span>
<span class=’line-number’>5</span>
<span class=’line-number’>6</span>
<span class=’line-number’>7</span>
<span class=’line-number’>8</span>
<span class=’line-number’>9</span>
<span class=’line-number’>10</span>
<span class=’line-number’>11</span>
<span class=’line-number’>12</span>
<span class=’line-number’>13</span>
<span class=’line-number’>14</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="no">CarrierWave</span><span class="o">.</span><span class="n">configure</span> <span class="k">do</span> <span class="o">|</span><span class="n">config</span><span class="o">|</span>
</span><span class=’line’> <span class="n">config</span><span class="o">.</span><span class="n">fog_credentials</span> <span class="o">=</span> <span class="p">{</span>
</span><span class=’line’> <span class="ss">:provider</span> <span class="o">=&gt;</span> <span class="s1">&#39;AWS&#39;</span><span class="p">,</span> <span class="c1"># required</span>
</span><span class=’line’> <span class="ss">:aws_access_key_id</span> <span class="o">=&gt;</span> <span class="s1">&#39;XXXXX&#39;</span><span class="p">,</span> <span class="c1"># your aws access key id</span>
</span><span class=’line’> <span class="ss">:aws_secret_access_key</span> <span class="o">=&gt;</span> <span class="s1">&#39;xxxxxxxxxx&#39;</span><span class="p">,</span> <span class="c1"># your aws secret access key</span>
</span><span class=’line’> <span class="ss">:region</span> <span class="o">=&gt;</span> <span class="s1">&#39;ap-southeast-1&#39;</span> <span class="c1"># your bucket&#39;s region in S3, defaults to &#39;us-east-1&#39;</span>
</span><span class=’line’> <span class="p">}</span>
</span><span class=’line’> <span class="c1"># your S3 bucket name</span>
</span><span class=’line’> <span class="n">config</span><span class="o">.</span><span class="n">fog_directory</span> <span class="o">=</span> <span class="s1">&#39;my_bucket&#39;</span>
</span><span class=’line’> <span class="c1"># custome your domain on aws S3, defaults to nil</span>
</span><span class=’line’> <span class="n">config</span><span class="o">.</span><span class="n">fog_host</span> <span class="o">=</span> <span class="s1">&#39;http://myapp.com&#39;</span>
</span><span class=’line’> <span class="n">config</span><span class="o">.</span><span class="n">fog_public</span> <span class="o">=</span> <span class="kp">true</span> <span class="c1"># optional, defaults to true</span>
</span><span class=’line’> <span class="n">config</span><span class="o">.</span><span class="n">fog_attributes</span> <span class="o">=</span> <span class="p">{</span><span class="s1">&#39;Cache-Control&#39;</span><span class="o">=&gt;</span><span class="s1">&#39;max-age=315576000&#39;</span><span class="p">}</span> <span class="c1"># optional, defaults to {}</span>
</span><span class=’line’><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>依上述範例, 要在 S3 開一個 public bucket 名為 &#8220;my_bucket&#8221;, 地區為新加坡</p>
<p>access key 可至 <a href="https://aws-portal.amazon.com/gp/aws/developer/account/index.html?action=access-key">https://aws-portal.amazon.com/gp/aws/developer/account/index.html?action=access-key</a> 搜尋</p>
<p>bucket 中儲存的路徑可在 user_avatar_uploader.rb 中的 store_dir 定義</p>
<figure class=’code’><figcaption><span>app/uploader/user_avatar_uploader.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
<span class=’line-number’>2</span>
<span class=’line-number’>3</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="k">def</span> <span class="nf">store_dir</span>
</span><span class=’line’> <span class="s2">&quot;user_avatar/</span><span class="si">#{</span><span class="n">model</span><span class="o">.</span><span class="n">id</span><span class="si">}</span><span class="s2">&quot;</span>
</span><span class=’line’><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<h4>uploader 的 methods</h4>
<p>當你將 uploader mount 進 model, 就可以在 uploader 中直接取得該 model 的 instance</p>
<figure class=’code’><figcaption><span>app/uploader/user_avatar_uploader.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
<span class=’line-number’>2</span>
<span class=’line-number’>3</span>
<span class=’line-number’>4</span>
<span class=’line-number’>5</span>
<span class=’line-number’>6</span>
<span class=’line-number’>7</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="k">def</span> <span class="nf">filename</span>
</span><span class=’line’> <span class="s2">&quot;</span><span class="si">#{</span><span class="n">model</span><span class="o">.</span><span class="n">id</span><span class="si">}</span><span class="s2">.png&quot;</span>
</span><span class=’line’><span class="k">end</span>
</span><span class=’line’><span class="c1"># and mounted_as</span>
</span><span class=’line’><span class="k">def</span> <span class="nf">store_dir</span>
</span><span class=’line’> <span class="s2">&quot;uploader/user_avatar/</span><span class="si">#{</span><span class="n">mounted_as</span><span class="si">}</span><span class="s2">&quot;</span>
</span><span class=’line’><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>uploader 有哪些 medthods 可參考 <a href="https://github.com/jnicklas/carrierwave/tree/master/lib/carrierwave/uploader">https://github.com/jnicklas/carrierwave/tree/master/lib/carrierwave/uploader</a></p>
<h4>處理 local file 或 remote file</h4>
<p>remote file, 參考 <a href="http://stackoverflow.com/questions/5007575/how-to-assign-a-remote-file-to-carrierwave">http://stackoverflow.com/questions/5007575/how-to-assign-a-remote-file-to-carrierwave</a></p>
<figure class=’code’><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
<span class=’line-number’>2</span>
<span class=’line-number’>3</span>
<span class=’line-number’>4</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="n">u</span> <span class="o">=</span> <span class="no">User</span><span class="o">.</span><span class="n">find</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
</span><span class=’line’><span class="n">url</span> <span class="o">=</span> <span class="s2">&quot;http://www.google.com/logo.png&quot;</span>
</span><span class=’line’><span class="n">u</span><span class="o">.</span><span class="n">remote_picture_url</span> <span class="o">=</span> <span class="n">url</span>
</span><span class=’line’><span class="n">u</span><span class="o">.</span><span class="n">save</span>
</span></code></pre></td></tr></table></div></figure>
<p>local file</p>
<figure class=’code’><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class=’line-number’>1</span>
<span class=’line-number’>2</span>
<span class=’line-number’>3</span>
</pre></td><td class=’code’><pre><code class=’ruby’><span class=’line’><span class="n">u</span> <span class="o">=</span> <span class="no">User</span><span class="o">.</span><span class="n">find</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
</span><span class=’line’><span class="n">file_path</span> <span class="o">=</span> <span class="s2">&quot;</span><span class="si">#{</span><span class="no">Rails</span><span class="o">.</span><span class="n">root</span><span class="si">}</span><span class="s2">/public/images/exmaples/foo.png&quot;</span>
</span><span class=’line’><span class="n">u</span><span class="o">.</span><span class="n">picture</span> <span class="o">=</span> <span class="no">File</span><span class="o">.</span><span class="n">open</span><span class="p">(</span><span class="n">file_path</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>
<div class=’octopress-authorbox’>
<div class="author-pic">
<img src="http://www.gravatar.com/avatar/0b2f434918eb4a08439d180a13829631" alt="Mars Chen" />
</div>
<div class="author-about">
<h3>Mars Chen</h3>
<p>Mars</p>
<ul class="author-links">
<li>
<a href="http://twitter.com/marsz330">@marsz330</a>
</li>
<li>
<a href="http://hack.inside.com.tw/">個人網站</a>
</li>
</ul>
</div>
</div>
</content>
</entry>
<entry>
<title>使用 Octopress 作為開發者專屬部落格</title>
<link href="http://hack.inside.com.tw/blog/2011/09/30/use-octopress-as-a-developer-blog-platform/"/>
<updated>2011-09-30T13:48:00+08:00</updated>
<id>http://hack.inside.com.tw/blog/2011/09/30/use-octopress-as-a-developer-blog-platform</id>
<content type="html"><p><a href="http://hack.inside.com.tw/">Inside Hack</a> 部落格開張的第一篇文章就來談談本部落格所使用的開放原始碼專案：<strong><a href="http://octopress.org/">Octopress</a></strong>。</p>
<p>身為一個軟體工程師，如果想要寫部落格分享自己的技術研究心得、程式碼，通常都滿麻煩的，目前比較常見的作法是利用 Github 所提供的 <a href="https://gist.github.com/">Gist</a> 來進行程式碼片段的分享與管理，Gist 的好處是它同時幫我們處理了 Syntax highlight 以及版本的控管（每次更新其實都會被儲存成不同的版本）。使用 Gist 搭配主流的部落格平台，像是 Wordpress 或是 Blogger 其實就非常好用了。
Inside Hack 本來也打算這麼做，但我們遇到了幾個困擾&#8230;</p>
<!–more–>
<ul>
<li>用 Gist 貼程式碼的話，程式碼是另外建立、另外存放，跟文章本身是分開的，這點除了造成文章不易流傳之外，使用 RSS 訂閱的讀者也就沒辦法順利看到所有的程式碼。寫作過程也變得比較麻煩，還要特地跑上 Gist 貼程式碼，沒網路的時候就不能寫文章了。</li>
<li>用 Wordpress 或 Blogger 比較不適合寫技術文章，如果我們不用 Gist，貼程式碼也會造成額外的麻煩，雖然說並非無法解決，但這類部落格平台生來就不是給 developer 用的，與其花時間去讓這些平台可以幫我們做程式碼上色、讓我們可以用 Markdown 寫文章，不如換一個開箱就有這些功能的平台。</li>
<li>我們想要用 geek 的方式寫文章，最好是程式設計師看了會笑的方式，最好文章可以跟程式碼一樣用 Git 控管，最好多人一起寫作的時候可以善用 Github 這種號稱 social coding 的平台。</li>
</ul>
<p>於是，我們決定用 Octopress，Octopress 有以下特色：</p>
<ul>
<li>基於 <a href="https://github.com/mojombo/jekyll">Jekyll</a>，這是一個以 Ruby 語言撰寫的靜態網頁生成器，可以讓你輕易的利用 Markdown 語法來撰寫文章，並協助你產生 HTML 靜態網頁，同時提供了 template 系統讓你可以輕易的構成整個網站的版面與樣式。</li>
<li>Octopress 則更進一步的善用了 Git（將文章、程式碼區分為不同的 branch）、rake（所有經常進行的動作，像是產生靜態網頁、部署上雲端，都利用 <code>rake tasks</code> 進行）。</li>
<li>提供許多好用的外掛，我個人特別喜歡的是 <a href="http://octopress.org/docs/plugins/gist-tag/">Gist tag</a>，不僅可以讓你輕鬆的管理、分享程式碼，還可以自動幫你在網頁中 cache 一份，即使是 RSS 訂閱讀者也不用擔心 RSS 軟體無法直接讀取 script 內容。</li>
<li>非常適合 developer 撰寫文章，除了利用 Markdown、Git 管理、發佈文章之外，要自行 hack 撰寫新的外掛也非常容易，例如我就自己寫了一個 <a href="https://github.com/deduce/octopress-authorbox">octopress-authorbox</a> 來讓 Inside Hack 的每個作者都可以輕易的呈現自己的個人檔案在每一篇文章底下。</li>
</ul>
<p>網路知名部落客 <a href="http://blog.xdite.net/">xdite</a> 也有對 octopress 進行非常詳盡的介紹：<a href="http://blog.xdite.net/posts/2011/10/07/what-is-octopress/">Why Octopress?</a></p>
<p>Inside Hack 歡迎投稿，<a href="http://hack.inside.com.tw/about-us/">投稿方式</a></p>
<div class=’octopress-authorbox’>
<div class="author-pic">
<img src="http://www.gravatar.com/avatar/e0c2a42f0fa81a1e2593843ebb89ea7d" alt="Lawrence Lin" />
</div>
<div class="author-about">
<h3>Lawrence Lin</h3>
<p>Founder of Inside.com.tw</p>
<ul class="author-links">
<li>
<a href="http://twitter.com/deduce">@deduce</a>
</li>
<li>
<a href="http://www.inside.com.tw/">個人網站</a>
</li>
</ul>
</div>
</div>
</content>
</entry>
</feed>