五倍券 Banner - 首頁 - desktop

五倍券 Banner - 首頁 - mobile

五倍的五倍券優惠活動

Blogs - Sidebar


本文嘗試觀察 Rails 透過什麼方式來解析輸入的網址，找到對應的 controller action 以及 params，然後自幹一個。

### 參考資料
- [Rack 應用程式](https://railsbook.tw/extra/rack.html)
- [尝试理解 ActionDispatch::Routing::RouteSet](https://ruby-china.org/topics/30916)

由於篇幅的關係，請先花個 1～2 分鐘大概讀一下參考資料再繼續往下閱讀。

想要自幹一個 Rails Router 就要從了解 Rails Router 開始。

# 了解 Rails Router

在參考資料中，我們得到了一個寶貴的資訊：

> ActionDispatch::Routing::RouteSet 是一個 Rack App。

也就是說 RouteSet 有一個 call 方法，並且他會傳回符合 Rack 規範的內容。
[https://github.com/rails/rails/blob/master/actionpack/lib/action_dispatch/routing/route_set.rb#L832](https://github.com/rails/rails/blob/master/actionpack/lib/action_dispatch/routing/route_set.rb#L832)：

```ruby
def call(env)
  req = make_request(env)
  req.path_info = Journey::Router::Utils.normalize_path(req.path_info)
  @router.serve(req)
end
```

這就是 Rack App 的進入點。他在這裡是製作 request，然後丟給 `@router.serve` 方法去處理。

這個 @router 的 class 是 `ActionDispatch::Journey::Router`。

https://github.com/rails/rails/blob/master/actionpack/lib/action_dispatch/journey/router.rb#L31

```ruby
def serve(req)
  find_routes(req).each do |match, parameters, route|
    # 略
    status, headers, body = route.app.serve(req)
    # 略
    return [status, headers, body]
  end

  [404, { "X-Cascade" => "pass" }, ["Not Found"]]
end
```

大意：用 `find_routes` 找出對應的 route 之後，執行 `route.app.serve`。

這個 route 的 class 是 `ActionDispatch::Journey::Route`。

這個 route.app 的 class 是 `ActionDispatch::Routing::RouteSet::Dispatcher`。

我們繼續看他到底 serve 了什麼。
[https://github.com/rails/rails/blob/master/actionpack/lib/action_dispatch/routing/route_set.rb#L29](https://github.com/rails/rails/blob/master/actionpack/lib/action_dispatch/routing/route_set.rb#L29)：

```ruby
def serve(req)
  params     = req.path_parameters
  controller = controller req
  res        = controller.make_response! req
  dispatch(controller, params[:action], req, res)
rescue ActionController::RoutingError
  if @raise_on_name_error
    raise
  else
    [404, { "X-Cascade" => "pass" }, []]
  end
end

def controller(req)
  req.controller_class
rescue NameError => e
  raise ActionController::RoutingError, e.message, e.backtrace
end

def dispatch(controller, action, req, res)
  controller.dispatch(action, req, res)
end
```

在這裡可以看出，他直接從 `req.controller_class` 找到對應的 controller 並且做處理，然後就回傳結果了。

可以看出 controller class 需要支援兩個方法：
- make_response!(request)
- dispatch(action, request, response)

且 dispatch 的輸入值 response 正好就是 make_response! 的輸出。

# 自幹一個 Rack App

所以我們可以仿照參考資料的做法，自己做一個 Rack App 來試用看看：

首先弄一個空資料夾，然後在裡面建立一個 `config.ru` 檔案，內容如下：

```ruby
require 'action_dispatch'

class EtrexController
  def self.make_response!(request)
  end
  def self.dispatch(action, req, res)
    [200, {"Content-Type" => "text/html"}, ['QQ']]
  end
end

app = ActionDispatch::Routing::RouteSet.new

app.draw do
  get 'etrex', to: 'etrex#index'
end

run app
```

因為 make_response! 的輸出也只有我們自己用，所以就乾脆不在 make_response! 做事了。

你可以在 bash 下用 `rackup` 指令來執行這個 Rack App 。

接著在瀏覽器輸入對應的網址 [http://localhost:9292/etrex](http://localhost:9292/etrex) 就可以看到結果「QQ」。

# 繼續了解 Rails Router

我們已經知道整個 RouterSet 大概做了些什麼事，接下來我們就專注在本文重點：Router 是如何將 request 轉換為 controller action 和 params。

```ruby
def find_routes(req)
  routes = filter_routes(req.path_info).concat custom_routes.find_all { |r|
    r.path.match(req.path_info)
  }

  routes =
    if req.head?
      match_head_routes(routes, req)
    else
      match_routes(routes, req)
    end

  routes.sort_by!(&:precedence)

  routes.map! { |r|
    match_data = r.path.match(req.path_info)
    path_parameters = {}
    match_data.names.zip(match_data.captures) { |name, val|
      path_parameters[name.to_sym] = Utils.unescape_uri(val) if val
    }
    [match_data, path_parameters, r]
  }
end
```

這個程式碼很長，我們一段一段來解讀。

```ruby
  routes = filter_routes(req.path_info).concat custom_routes.find_all { |r|
    r.path.match(req.path_info)
  }
```

因為我先偷看了 filter_routes 的實作，所以我知道這段是用一個不單純的演算法，根據網址來排除 routes，而後面的 `.concat custom_routes ...` 可以先忽略，感覺不是重點。

```ruby
routes =
  if req.head?
    match_head_routes(routes, req)
  else
    match_routes(routes, req)
  end
```

這段則是根據 http method 來排除 routes。

```ruby
  routes.sort_by!(&:precedence)

  routes.map! { |r|
    match_data = r.path.match(req.path_info)
    path_parameters = {}
    match_data.names.zip(match_data.captures) { |name, val|
      path_parameters[name.to_sym] = Utils.unescape_uri(val) if val
    }
    [match_data, path_parameters, r]
  }
```

因為有可能多重 match，這裡就依照優先序排序，然後把所有結果都整理好傳回。同時，他也在這裡做了網址參數的解析。

其中的 r.path 的 class 是 ActionDispatch::Journey::Path::Pattern。

r.path.match 方法如下：

```ruby
def match(other)
  return unless match = to_regexp.match(other)
  MatchData.new(names, offsets, match)
end
```

我們從上而下的解讀，未必要完全理解，透過實際觀察其輸入輸出，就能知道他大概的意圖。

他這裡想要解析的參數是在 router 規則中的 `etrex/:id` 之類的變數。

舉例來說，我們會期待用一個 `get 'etrex/:id'` 來捕捉所有 `etrex/1`、`etrex/2`、`etrex/3`... 的網址。

而我們希望 router 能從中解析出參數 {id: 1}，而這段 match 就是在做這件事。

# 觀察小結

Rails 的 router 中有許多的 route，每一個 route 負責保存一組規則，明確指向特定的 controller 以及 action。在建立 route 時，就已經進行了一些預處理來做加速。

Rails 在 router 上定義 find_routes 方法，比對 uri 以及 http method 來找出需要的 route，並且即時生成正規表示式來做參數解析。

# 開始自幹 Router

我們的目標是要讓 `get 'etrex/:id', to: 'etrex#show'` 能運作，儘量用最少最好讀的 code 來完成，效能什麼的在這裡不是重點。

```ruby
require 'action_dispatch'
require 'cgi'

class Router
  def initialize
    @routes = []
  end

  # 設定規則
  def draw(&block)
    self.instance_exec(&block)
  end

  def get(pattern, options)
    @routes << Route.new('get', pattern, options)
  end

  # 程式進入點
  def call(env)
    route = find_route(env)
    return route.serve(env) if route.present?
    [404, {"Content-Type" => "text/html"}, ['404 not found']]
  end

  private

  def find_route(env)
    method = env['REQUEST_METHOD'].downcase
    path = env['PATH_INFO'].downcase

    @routes.find do |route|
      route.match?(method, path)
    end
  end
end

class Route
  def initialize(method, pattern, options)
    @method = method.downcase
    @pattern = pattern.downcase
    controller_name, @action = options[:to].split('#')
    @controller = controller_class(controller_name)
  end

  def match?(method, path)
    match_method(method) && match_path(path)
  end

  def serve(env)
    query_string_params = Rack::Utils.parse_nested_query env['QUERY_STRING']
    params = in_path_params.merge(query_string_params)
    @controller.dispatch(@action, params, env)
  end

  private

  def in_path_params
    @in_path_params
  end

  def controller_class(controller_name)
    Object.const_get("#{ controller_name.capitalize }Controller")
  end

  def match_method(method)
    @method == method
  end

  def match_path(path)
    path = path[1..-1] if path[0] == '/'
    path_words = path.split('/')
    pattern_words = @pattern.split('/')

    return false unless path_words.count == pattern_words.count

    # 在 match 的同時紀錄在網址中的 params
    @in_path_params = {}
    pattern_words.zip(path_words).each do | pattern_word, path_word |
      if pattern_word[0] == ':'
        @in_path_params[pattern_word[1..-1]] = path_word
      else
        return false unless pattern_word == path_word
      end
    end
    true
  end
end

class BaseController
  attr_accessor :params
  def initialize(params)
    @params = params
  end

  def self.dispatch(action, params, env)
    body = self.new(params).send(action)
    [200, {"Content-Type" => "text/html"}, [body]]
  end
end

# 以上都是框架的部分
# 以下看起來像是正常的 rails code

class EtrexController < BaseController
  def index
    "etrex/index, params: #{params}"
  end

  def show
    "etrex/show, params: #{params}"
  end
end

app = Router.new

app.draw do
  get 'etrex', to: 'etrex#index'
  get 'etrex/:id', to: 'etrex#show'
end

run app
```

我做了最基礎的 Router 架構，可以把規則變成 Route 物件保存在 @routes 中，由 Route 提供 match 方法，並在 match 網址的同時擷取出網址中的參數。

同時也做了基礎的 controller 結構，確認能夠正常取得來自網址以及 query string 的參數。到這裡總算是入門囉！！

> 「What I cannot create, I do not understand.」 Richard Philip Feynman

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>


post-如何自幹一個 Rails Router / cover

如何自幹一個 Rails Router

> 圖片作者：Duncan WJ Palmer    ，
> [來源連結](https://www.flickr.com/photos/blatez/16802876298/)

# Ruby 探索：Blocks 深入淺出

在學習 Ruby 的過程中，Block 是其中很重要的一環，如果對 Block 有多一點的認識就能更了解一些深奧的 code 到底是什麼意思啦！這篇文章主要是在看完 Metaprogramming Ruby 2 中的 Block 章節後的讀書心得，以及一個我自己找的一個小題目來練習學到的觀念。

--- 
### 目錄

* Scope 介紹
  * 什麼是 Scope ?
  * Scope Gate
* Block 介紹
  * Block 從頭開始
  * Proc 基本介紹
  * procs 和 lambdas 怎麼分？！
  * & 符號解析
* Block 實作
  * 自己做一個 before action
  * 第一步：試試看在 before 中執行 block 
  * 第二步：在執行 before 的時候只有紀錄…
  * 第三步：重新定義要執行 before 的 method
  * 第四部：只有第一次執行 execute_before
* 結論

---

### Scope 介紹

#### 什麼是 Scope ?
在介紹 Block 之前，我們需要先認識 ruby 中的 scope。
誒！什麼是 scope 呢？大概就是哪個變數可以在哪邊被看到的規則，舉例來說

```ruby
x = 10
def method
  puts x
end

method
```
執行上面這段程式後會發生...

```text
test.rb:3:in 'method': undefined local variable or method 'x' for main:Object (NameError)
	from test.rb:6:in '<main>'
```

在 method 方法內和外是不同的兩個 scope，所以 method 方法不能看到它外面的變數 x。如果想知道在自己的 scope 中可以使用哪些變數可以用 `local_variables` 來看！以下面這段 code 為例：

```ruby
v1 = 1
class MyClass
  v2 = 2
  local_variables #[:v2]
  def my_method
    v3 = 3
    local_variables #[:v3]
  end
  local_variables # [:v2]
end
local_variables # [:v1, :obj]
obj = MyClass.new
obj.my_method
```
> local_variables 會回傳現在的 scope 中可以看到的區域變數

在上面的例子我們可以發現，定義 `class MyClass` 到 `end` 中間這段區域看不到變數 v1 ，同時 `def my_method` 到它的 `end` 這段也看不到變數 v2，這是因為他們在不同的 scope。

#### Scope Gates

在 Ruby 中有三個 Scope Gates：`Class definitions`, `Module definitions` 還有 `Methods` 他們就像一道牆，牆外牆內彼此看不見那裡有哪些變數。

當然也是有一些方法可以突破這樣子的限制，可以換個方式定義 Class 還有 Methods 讓他們不再是 Scope Gates，這方法叫做 Flattening the Scope (其實方法的名字好像也不是很重要)，反正就是突破那個 scope 的限制啦！

```ruby=
my_var = "Success"
MyClass = Class.new do
  puts "#{my_var} in the class definition"
  define_method :my_method do
    puts "#{my_var} in the method"
  end
end

MyClass.new.my_method
```
可以成功印出

```
Success in the class definition
Success in the method
```

### Block 介紹

#### Block 從頭開始

除了上述方法可以突破 scope 的限制外，其實 block 也是可以做到類似的效果的，它讓我們可以先寫一段程式，然後再方法裡面呼叫，就像這樣

```ruby=
def my_method
  x = "Goodbye"
  yield("cruel")
end

x = "Hello"

my_method do |y| 
  puts "#{x}, #{y} world" 
end 
```
會印出

```
Hello, cruel world
```

上面的例子，在呼叫 `my_method` 的時候我們傳了一個 block (do 到 end 的那段)，大概可以想像他是 `my_method` 這方法的一個參數，接著 `my_method` 可以用 yield 這方法來執行這個 block。這個 block 厲害的地方在於它可以帶著當下的 bindings`(註解1)` 到 method 裡面去執行，所以在 `my_method` 可以看到 `x` 變數內的值是 Hello。

> 註解1

> bindings 指的是當下 scope 可以使用的 variable, methos 還有 self

在 Ruby 的世界裡 block 是個特殊的成員，他不是物件也不能單獨存在，但其實還是有方法可以把 block 轉成物件讓我們處理的，那就是 Proc。

#### Proc 基本介紹

```ruby=
inc = Proc.new {|x| x + 1 }
inc.call(2) # 回傳 3
```

在 Proc.new 後面接一個 block 就可以產生一個 Proc 的物件，接著可以使用 call 方法來呼叫。有很多種方式可以產生 Proc 的物件，而且用不同方式產生的 Proc 也會不太一樣，首先來介紹 proc 還有 lambda ～

#### procs 和 lambdas 怎麼分？！

```ruby=
l1 = lambda {|x| x + 1 }
l2 = ->(x){ x + 1 }
p1 = Proc.new {|x| x + 1 }
p2 = proc {|x| x + 1 }

puts "l1: #{l1.lambda?}, #{l1.class}" # l1: true, Proc
puts "l2: #{l2.lambda?}, #{l2.class}" # l2: true, Proc
puts "p1: #{p1.lambda?}, #{p1.class}" # p1: false, Proc
puts "p2: #{p2.lambda?}, #{p2.class}" # p2: false, Proc
```
上面的 `l1`, `l2`, `p1`, `p2` 都可以使用 call 方法來執行，其中我們可以用 `lambda?` 來知道它是不是 lambda 如果不是那它就是 proc 啦！除了用 `lambda` 跟 `->()` 產生的 Proc 物件是 lambda 其他都是 proc 唷！

說了那麼久怎麼產生跟判斷 proc 和 lambda，當然就要來說他們有什麼不同啦！主要有兩個不同的地方，第一個是 return 的值，第二個是參數的判斷方式

##### procs 和 lambdas 有不同的 return 

```ruby=
def double(callable_object)
  callable_object.call * 2
end

# return from lambdas
la = lambda { return 10 }

# return from the scope which defined the procs(main)
pr = proc { return 10 }

puts double(la) # 20
puts double(pr) # LocalJumpError...
```
執行程式後會

```
 20
 test.rb:12:in `block in <main>': unexpected return (LocalJumpError)
 	from p92.rb:22:in `double'
 	from p92.rb:29:in `<main>'
```

lambda 的 return 是從 lambda return，而 proc 則是從定義 proc 的 scope return 意思就是如果把 proc 用一個方法包起來的話...

```ruby= 
def lambda_double
  la = lambda { return 10 }
  result = la.call
  return result * 2
end

def proc_double
  pr = Proc.new { return 10 }
  result = pr.call
  return result * 2  # unreachable code!
end

puts lambda_double # => 20
puts proc_double   # => 10
```

`lambda_double` 可以執行完方法中的每行程式，而 `proc_double` 則會在 `pr.call` 那行就 return 了，因為 proc 的 return 是從定義 proc 的地方也就是 `proc_double` 出發的。

##### procs 和 lambdas 處理參數的方式

procs 處理參數的方式比較有彈性，而 lambdas 則是比較嚴格，說起來不清楚!? 看 code 最快

```ruby
puts "以下是 proc"
pr = proc {|a,b| [a,b]}
p pr.call('a', 'b')
p pr.call('a')
p pr.call('a', 'b', 'c')

puts "以下是 lambda"
la = lambda {|a,b| [a,b]}
p la.call('a', 'b')
p la.call('a')
p la.call('a', 'b', 'c')
```

執行程式後會

```
以下是 proc
["a", "b"]
["a", nil]
["a", "b"]
以下是 lambda
["a", "b"]
test.rb:8:in `block in <main>': wrong number of arguments (given 1, expected 2) (ArgumentError)
	from test.rb:10:in `<main>'
```

procs 遇到多的參數會自動丟掉，而不夠就補 nil，lambdas 則要求參數的數量正確才能執行。

#### & 符號解析

> 促使我想要多瞭解 ruby 中的 block 就是這個 & 符號了，第一次在 rails 專案裡面看到了這種符號真是既挫折又期待，覺得有很多東西可以學啦！在 C 語言中 & 是來拿記憶體位址的符號，在 ruby 裡面 & 符號到底是拿來做什麼的呢？

& 符號可以把 block 轉成 Proc 或是轉回來，多說無益看 code 就知道

```ruby=
def second_method
  puts 'In second_method'
  yield
end

def first_method(&operator) # 這裡的 & 是把 block 轉成 Proc 
  puts 'In first_method'
  operator.call
  second_method(&operator) # 這裡的 & 是把 Proc 轉成 block
end

first_method do 
  puts "this is block"
end
```
執行後會印出

```
In first_method
this is block
In second_method
this is block
```

在呼叫 `first_method` 得時候我們傳了一個 block 給他，我們可以把 block 想像成是最後一個參數，只是要在定義 `first_method` 的時候跟他說我們會有一個參數而且他是一個 block，因此就寫 `&operator`，之後就能在 `first_method` 中使用 operator 這個 Proc 啦～

如果想要不是馬上要用這個 Proc 還能把他先轉成 block 再傳給下一個 method，這時候就是在 `operator` 前加個 `&` 它就又從 Proc 轉成 block 囉！所以 second_method 使用 yield 才能成功呀！

以上就是關於 Block 的基本介紹啦，接下來做個小小的練習來應用一下學到的知識啦！

### Block 實作:
#### 自己做一個 before action 

目標是讓下面的程式碼

```ruby=
class Example 
  extend BeforeAction
  before :method_a, :method_b do
    puts 'the code before method'
  end

  def method_a
    puts 'this is method a'
  end

  def method_b
    puts 'this is method b'
  end
end

instance_1 = Example.new
instance_1.method_a
instance_2 = Example.new
instance_2.method_b
```

可以有這樣的執行結果

```ruby
the code before method
this is method a
the code before method
this is method b
```

> 要做一個 `BeforeAction` 的 Module ，在裡面有個 before 方法可以讓指定的 method 在執行之前，先執行 before 後面的 block

#### 第一步：試試看在 before 中執行 block 
```ruby=
module BeforeAction
  def before(*methods, &block)
    methods.each do |method| 
      block.call
    end
  end
end
```
> 現在我們可以依據定義了幾個 method 給 before 來執行幾次 block

#### 第二步：在執行 before 的時候只有紀錄...

要做到 before action 就必須覆寫裡面的 `method_a`, `method_b` 之類的，但是在執行 before 的時候根本還沒有定義 `method_a` 是什麼，所以在這邊只能先把要執行的 block 還有要覆寫的 method 名字存起來！

```ruby=
module BeforeAction
  def new
    execute_before
    super
  end

  def before(*methods, &block)
    # 先存起來之後用
    @methods = methods
    @block = block
  end

  def execute_before
    # to do ...
  end
end
```
> 存起來之後我們可以在 Example 用了 new 方法時，再來處理我們的 block，讓那些需要執行 before action 的 method 可以被覆寫

#### 第三步：重新定義要執行 before 的 method

```ruby=
module BeforeAction
  ...
  def execute_before
    @methods.each do |method| 
      # 幫原本的 method 取一個新名字
      newname = "new_#{method}"
      alias_method newname, method
      block = @block
      # 重新定義每個 method 要做什麼
      define_method method do 
        # 執行 block
        block.call
        # 原本的 method
        send(newname)
      end
    end
  end
end
```
> 這個步驟比較麻煩一點，重新定義方法後就會把原本的方法全部蓋過去。所以我們幫原本的方法取了個新名字(newname)，在重新定義方法後就可以在呼叫(send)來執行原本方法的程式了！

到目前為止，我們的程式已經可以讓 Example 這個 class 做這樣的事囉！如果只有 new 一次都能正常執行～

```ruby=
instance_1 = Example.new
instance_1.method_a
instance_1.method_b
```

執行結果為

```ruby
the code before method
this is method a
the code before method
this is method b
```

#### 第四部：只有第一次執行 execute_before

因為只有在第一次 new 的時候需要執行 execute_before，所以我們可以做一點小小的修改...

```ruby=
module BeforeAction
  def new
    execute_before if first_time?
    super
  end

  def first_time?
    return false if @not_first_time
    @not_first_time = true
  end

  ...
end

```

#### 最後：大功告成

完整程式碼如下

```ruby=
module BeforeAction
  def new
    # 只有第一次執行 new 時要 execute_before
    execute_before if first_time?
    super
  end

  def first_time?
    return false if @not_first_time
    @not_first_time = true
  end

  def before(*methods, &block)
    # 先存起來之後用
    @methods = methods
    @block = block
  end

  def execute_before
    @methods.each do |method| 
      # 幫原本的 method 取一個新名字
      newname = "new_#{method}"
      alias_method newname, method
      block = @block
      # 重新定義每個 method 要做什麼
      define_method method do 
        # 執行 block
        block.call
        # 原本的 method
        send(newname)
      end
    end
  end
end

class Example 
  extend BeforeAction
  before :method_a, :method_b do
    puts 'the code before method'
  end

  def method_a
    puts 'this is method a'
  end

  def method_b
    puts 'this is method b'
  end
end

instance_1 = Example.new
instance_1.method_a
instance_2 = Example.new
instance_2.method_b
```

執行後結果

```
the code before method
this is method a
the code before method
this is method b
```

在這範例練習到把 block 轉成 Proc ，然後存起來之後使用，在每次呼叫方法的時候都先執行這個 Proc

### 結論

透過寫這篇文章好好的整理了 block 相關的觀念，不然以前總是略懂略懂，但要回想的時候又要翻書查看半天...雖然這些東西可能不是馬上需要用到，但以後如果有需要用到這些技巧的時候，再回來看這篇自己寫的文章應該可以很快回憶起來吧！

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>


post-Ruby 探索：Blocks 深入淺出 / cover

Ruby 探索：Blocks 深入淺出


[AMP](https://www.ampproject.org/) 是 Google 在 2016 年 2 月所推出的加速行動網頁（Accelerate Mobile Pages）開源專案，能讓靜態內容網頁快速呈現。

根據 [What is AMP](https://www.ampproject.org/learn/overview/)，AMP 在運作上由三個部分組成：

* **AMP HTML**：基本 HTML 配合 AMP 的規則與屬性，以符合效能的需求。
* **AMP JS**：使用 AMP JS 函式庫來確保 AMP HTML 頁面可以快速呈現。
* **AMP Cache**：Google AMP Cache 用來提供快取好的 AMP HTML 網頁。

HTML 和 JS？這不是網頁初學者也能上手的東西嗎？！可是進一步參考 [AMP HTML Specification](https://www.ampproject.org/docs/fundamentals/spec) 會發現所謂「受限的基本 HTML」必須滿足以下條件：

* 只接受 inlined style，不接受透過 `<link rel=”stylesheet”>` 形式讀取的 CSS 檔案
* 不能使用自定義或第三方的 Javascript
* `img` 標籤必須替換成 `amp-img` 並預先定義圖片的 `width` 與 `height`
* 部分標籤如 `iframe`, `embed` 或 `object` 必須替換成 AMP 定義的格式或被禁止使用
* ......（更多請參考 [AMP](https://www.ampproject.org/)  官方文件）

因此，導入 AMP 的大多是以內容為主的新聞或部落格網站，減少對 UI 的要求以提升使用者的閱讀體驗。儘管我們可以建立一個全面支援 AMP 的網站，但這可能會大大限制 UI 設計的發展且必須耗費更多時間來開發。

假設你有個 Rails 專案，除了主要頁面之外，也有定期會發表文章的內容頁面，我們可以選擇性地為你的專案快速導入 AMP。

## AMP HTML

註：本篇 HTML 範例以 Slim 語法為主

### 建立 AMP Templete

這邊的做法是保有原本的頁面，並另外設計該頁面的 AMP 版本。

首先，我們需要建立符合 AMP 規範的 HTML：

1. 複製 `app/views/layouts/application.html.slim` 並重新命名為 `application.amp.slim`
2. 調整 `application.amp.slim` 以符合 [AMP HTML Specification #Required markup](https://www.ampproject.org/docs/fundamentals/spec#required-markup)
3. 同樣複製你想要導入 AMP 的頁面（e.g. `app/views/blogs/show.amp.erb`）並改為 `.amp.erb`

為了讓 Google Search 在找到非 AMP 頁面時能知道該頁面有 AMP 版本，我們需要特別設定 `link` 標籤：

* 在 `app/views/layouts/application.html.slim` 的 `head` 中加上

```
link href="#{url_for}" rel="amphtml" /
```

* 在 `app/views/layouts/application.amp.slim` 的 `head` 中加上

```
link href="#{url_for}" rel="canonical" /
```

### 設定 Controller

在導入 AMP 頁面所屬的 controller 底下加上：

```ruby
respond_to do |format|
  format.html
  format.amp
end
```

### 設定 `mime_types.rb`

在 `config/initializers/mime_types.rb` 中加上

```
Mime::Type.register_alias "text/html", :amp
```

這時候開啟 Server 並在 URL 後面加上 `.amp` 就能瀏覽該頁面 AMP 的版本

## AMP 驗證

在 URL 後面加上 `#development=1` 就能在 Console 中驗證你的 AMP 頁面。

看到 `Powered by AMP ⚡ HTML ......` 表示你的頁面已經順利導入 AMP，但別高興得太早，直到修正所有錯誤並印出 `AMP validation successful.` 才真的成功 ⚡️ <del>在那之前都只是 Another Miserable Problem</del>.

關於 AMP errors 可以參考 [Resolving validation errors – AMP](https://www.ampproject.org/docs/fundamentals/converting/resolving-errors#exclude-third-party-javascript) 來 debuuuuuug 🐞

## Inlined CSS 塞好塞滿

這時通常會看到這樣的錯誤訊息...

```console
The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.
```

你可能會 OS:『我有成千上萬行的 CSS 而且還是用 Sass 編譯過來的，誰在那邊跟你一行一行 inlined CSS！』作為設計師，驚恐指數再乘上 8.7 😱

由於在 AMP 裡 `link rel=stylesheet` 只接受如 Google Fonts 或 Font Awesome 等 custom fonts。當我們需要處理獨立的 CSS 檔案時，可以參考 [Supported CSS – AMP](https://www.ampproject.org/docs/design/responsive/style_pages) 使用 `{% include "/assets/css/main.min.css" %}` 或以下方法：

* 在 `application_helper.rb` 新增一個 method：

```ruby
def render_css(path)
	raw Sass::Engine.for_file("#{Rails.root}/app/assets/stylesheets/#{path}", {
	  load_paths: ["#{Rails.root}/app/assets/stylesheets"],
	  style: :compressed
	}).to_css
end
```

* 接著在 `application.amp.slim` 的 `head` 中加上：

```
style[amp-custom]
  = render_css('amp.sass')
```

如此一來就能輕鬆引入編譯好的 CSS 作為 inlined style。但 AMP 限制使用 CSS 的目地正是為了縮短載入速度，因此也限制了 inlined style 的大小不得超過 50 KB。建議另開檔案 import AMP 需要的 style 即可。

## 排除第三方 JavaScript

好不容易解決 CSS，可是瓶頸之後還有瓶塞 👻

```console
The tag 'script' is disallowed except in specific forms.
```

這時你可能又要尖叫加三級。重看不重用的特效先拔掉、社群分享的按鈕也拔掉、連留言功能都要拔掉 ⋯⋯  什麼？！連 hamburger button 也要拔掉。<del>就說太快就會很空虛啊 Orz</del>

雖然 AMP 限制 JavaScript 的使用，但也提供許多 AMP Components 作為替代方案。你可以在 [Learn AMP by Example](https://ampbyexample.com/#components) 尋找合適的替代方法，不僅有詳細的說明也有完整的 sample code 或 live demo。

舉例來說，AMP 有自己的 lightbox 套件 [amp-lightbox](https://ampbyexample.com/components/amp-lightbox/) 可以做替換，或使用 [amp-sidebar](https://ampbyexample.com/components/amp-sidebar/) 代替 responsive navbar。比較複雜的互動如 [Scroll to top](https://ampbyexample.com/visual_effects/scroll_to_top/) 則結合 [amp-position-observer](https://www.ampproject.org/docs/reference/components/amp-position-observer) 和 [amp-animation](https://www.ampproject.org/docs/reference/components/amp-animation) 而成。

善用 AMP Components 已足夠解決大部分的問題、讓你的 AMP 頁面幾乎和原本的頁面一樣。如果你熟練 JavaScript 也可以嘗試撰寫符合 AMP 條件的方法來完善你的專案。

## 沒圖沒真相：amp-image

[`amp-img`](https://www.ampproject.org/docs/reference/components/amp-img) 標籤必須定義圖片的 `width` 和 `height` 來提升載入速度。這時可能會碰到一個問題：你的產品提供後台讓使用者自由編輯圖文，那要怎麼知道使用者上傳圖片的大小呢？！

[FastImage](https://github.com/sdsykes/fastimage) 在這裡提供一個很有效的解法，它能幫助我們輕鬆抓取圖片的大小：

1. 安裝 `gem 'fastimage'`
2. 在 `app/helpers/application_helper.rb` 中新增一個 method：

	```ruby
	def get_img_size(src)
		FastImage.size(Rails.root.to_s + "/public" + src) # path_to_image
	end
	```
	`get_img_size(src)` 會回傳一個陣列（e.g `[900, 675]`）正是我們需要的寬度與高度。

3. 如果使用者在後台編輯完、儲存在欄位裡的資料是一段完整的 HTML code，我們可以再新增一個 method：

	```ruby
	def content_with_amp_img(content)
		markup = Nokogiri::HTML.fragment(content)
		markup.css('img').each do |img|
		  img_w, img_h = get_img_size(img['src'])
		  img.name = 'amp-img'
		  img.set_attribute('width', img_w)
		  img.set_attribute('height', img_h)
		  img.set_attribute('layout', "responsive")
		end

		markup.to_html
	end
	```
	`Nokogiri::HTML.fragment(content)` 會把 HTML 依照標籤切割成獨立的物件，加上 `.css('img')` 就能取出所有 `img` 標籤。先把 `img` 改成 `amp-img` 再透過 `get_img_size(img['src'])` 分別加上 `width` 和 `height`。`layout` 可以參考 AMP 官方文件設定需要的屬性。最後，使用 `.to_html` 就可以把全部的物件再組回一般的 HTML 格式。

4. 在你的 `show.amp.slim` 就可以呼叫 `content_with_amp_img(content)` 來取得包涵 `amp-img` 的內容了

## 小結

儘管本篇看似勸退文無誤（Ｘ）但很多雷如果事先知道的話都能直接避開，因此也可以將本文章定位成「導入 AMP 要先知道的幾件事。」請繫緊安全帶，加速愉快 😉

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>


post-在你的 Rails App 實作 AMP / cover

在你的 Rails App 實作 AMP


[React DnD](http://react-dnd.github.io/react-dnd/) 使用 HOC 的方式來實作複雜的 Drag and Drop 介面，可以在 Drag Drop Component 之間輕鬆的溝通傳遞資料。

此文章不會詳細列出各項程式碼，如果有興趣可以 clone [source code](https://github.com/treekey999/react-dnd-practice) 下來 checkout 研究研究。

---

### 1. 先刻出靜態 React Component，並且將每張卡片的資料用 state 管理

```jsx=
class Card extends Component {
  render() {
    const {
      name
    } = this.props

    return (
      <div className='card'>
        { name }
      </div>
    )
  }
}

class CardWall extends Component {
  render() {
    const {
      children,
      status,
    } = this.props

    return (
      <div className='card-wall'>
        <div className='card-wall-wrapper'>
          <p>{ status }</p>
          <div className='card-wall-content'>
            { children }
          </div>
        </div>
      </div>
    )
  }
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      cards: [
        { id: '1', name: 'issue 1111', status: 'todo' },
        { id: '2', name: 'issue 104', status: 'todo' },
        { id: '3', name: 'issue 9527', status: 'todo' },
        { id: '4', name: 'issue 5278', status: 'todo' },
        { id: '5', name: 'issue 591', status: 'develop' },
        { id: '6', name: 'issue 666', status: 'develop' },
        { id: '7', name: 'issue 9453', status: 'develop' },
        { id: '8', name: 'issue 8591', status: 'deploy' },
        { id: '9', name: 'issue 9999', status: 'deploy' },
      ]
    }
  }

  ... // 省略

  render() {
    const cards = this.groupOfCards()

    return (
      <div className="App">
        <div className="board">
          {
            ['todo', 'develop', 'test', 'deploy'].map(status => (
              <CardWall key={status} status={status}>
                {
                  (cards[status] || []).map(card => (
                    <Card
                      key={card.id}
                      id={card.id}
                      name={card.name}
                      status={card.status}
                    />
                  ))
                }
              </CardWall>
            ))
          }
        </div>
      </div>
    );
  }
}
```

以上主要是把 `<CardWall />` 以迴圈的方式把 `<Card />` map 出來，`this.groupOfCards()` 會把 `state.cards` 的資料以 status 來做 group 分類，會得到：

```javascript=
{
  todo: [...],
  develop: [...],
  test: [...],
  deploy: [...],
}
```

完成後長這樣：

![](https://i.imgur.com/NR9QwNQ.png)

---

### 2. 準備好更新卡片狀態的 function

```jsx=
class App extends Component {
  constructor(props) {

    ... // 省略

    window.test_update = this.updateCardStatus.bind(this)
  }

  updateCardStatus(cardId, targetStatus) {
    const { cards } = this.state
    const targetIndex = cards.findIndex(c => (cardId === c.id))
    cards[targetIndex].status = targetStatus // 更新 card status

    const targetCard = cards.splice(targetIndex, 1)[0] // 刪除原始陣列位置的 card
    cards.push(targetCard) // 將目標 card 放入陣列最後一筆

    this.setState({ cards })
  }

  ... // 省略
}
```

然後就可以使用 `window.test_update` 來測試一下運作是否正確，將 `id` 為 `1` 的卡更新狀態為 `test`。

![](https://i.imgur.com/Cl3zth6.png)

---

### 3. `<Card />` 套用 React DragSource
依照 [官方文件 DragSource](http://react-dnd.github.io/react-dnd/docs-drag-source.html) 將 `<Card />` 改寫成 HOC 套用的狀態。

```jsx=
import React from 'react'
import PropTypes from 'prop-types'
import { DragSource } from 'react-dnd'

const dragSource = {
  beginDrag(props) {
    // 會將所有 <Card /> 的 props 帶到 onDrop Component 
    return {
      ...props,
    }
  }
}

// collect function 回傳的 object
// 將會由 HOC 的方式以 props 帶入至 <Card /> 裡面
function dragCollect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging()
  }
}

class Card extends React.Component {
  render() {
    const {
      name,
      isDragging, // Injected by React DnD
      connectDragPreview, // Injected by React DnD
      connectDragSource, // Injected by React DnD
    } = this.props

    return connectDragSource(
      <div className='card'>
        { name }
      </div>
    )
  }
}

// export component 的時候用 DragSource 以 HOC 的方式
// 將 Card 帶入，DragSource 第一個參數為 item type (string)，
// 會用來判斷 DropTarget 的 item type 是否為一樣，
// 一樣才會觸發 Drag & Drop。
export default DragSource('CONNECT_CARD', dragSource, dragCollect)(Card)
```

---

### 4. `<CardWall />` 套用 React DropTarget
依照 [官方文件 DropTarget](http://react-dnd.github.io/react-dnd/docs-drop-target.html) 將 `<Card />` 改寫成 HOC 套用的狀態。

```jsx=
import React from 'react'
import PropTypes from 'prop-types'
import { findDOMNode } from 'react-dom'
import { DropTarget } from 'react-dnd'

const dropTarget = {
  ..., // code 省略

  drop(props, monitor, component) {
    ... // code 省略

    // 此處已經可以得到 props(CardWall) 與 item (Card props)
    const item = monitor.getItem()    
    console.log('dropCard:', item) // card props
    console.log('dropWall', props) // card wall props
    const { id } = item
    const { updateCardStatus, status: targetStatus } = props

    // 更新 Card status
    updateCardStatus(id, targetStatus)

    return { moved: true }
  },
}

// collect function 回傳的 object
// 將會由 HOC 的方式以 props 帶入至 <CardWall /> 裡面
const dropCollect = (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  isOverCurrent: monitor.isOver({ shallow: true }),
  canDrop: monitor.canDrop(),
  itemType: monitor.getItemType(),
})

class CardWall extends React.Component {
  render() {
    const {
      children,
      status,
      isOver, // Injected by React DnD
      canDrop, // Injected by React DnD
      connectDropTarget, // Injected by React DnD
    } = this.props

    return connectDropTarget(
      <div className='card-wall'>
        <div className='card-wall-wrapper'>
          <p>{ status }</p>
          <div className='card-wall-content'>
            { children }
          </div>
        </div>
      </div>
    )
  }
}

// DropTarget 第一個參數為 item type(string)，
// 必須要跟 DragSource 的 item type 設為一樣才可以觸發 Drag & Drop
export default DropTarget('CONNECT_CARD', dropTarget, dropCollect)(CardWall)
```

---

### 5. 最後再把 `DragDropContext` 套用在 `<App />`

[官方文件 DragDropContext](http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html)

```jsx=
import React, { Component } from 'react'
import { DragDropContext } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'

class App extends Component {
    /* ... */
}

export default DragDropContext(HTML5Backend)(App)
```

這樣就完成簡易的拖拉功能

![](https://i.imgur.com/CmSofsr.gif)

---

### 6. 處理 `<Card />` onDrag 效果

```jsx=
class Card extends React.Component {
  render() {
    const {
      name,
      isDragging, // Injected by React DnD
      connectDragPreview, // Injected by React DnD
      connectDragSource, // Injected by React DnD
    } = this.props

    return connectDragSource(
      <div
        className='card'
        style={{
          // React DnD 提供的 isDragging 用來達到 onDrag 效果
          opacity: isDragging ? 0.6 : 1,
          cursor: isDragging ? 'grabbing' : 'pointer',
        }}
      >
        { name }
      </div>
    )
  }
}
```

![](https://i.imgur.com/Mhljot6.gif)

### 7. 處理 `<CardWall />` onDrop 效果
要達到 onDrop 時，卡片插入的效果，必須先準備用來 render 的空白 `<Card />`，並且只能在不同的狀態牆上觸發。

加入 `empty` props 到 `<Card />`：

```jsx=
  class Card extends React.Component {
  render() {
    const {
      name,
      empty,
      isDragging, // Injected by React DnD
      connectDragPreview, // Injected by React DnD
      connectDragSource, // Injected by React DnD
    } = this.props

    return connectDragSource(
      <div
        // 加入 empty props, 來讓卡片有 empty class name
        className={`card ${ empty ? 'empty-card' : '' }`}
        style={{
          opacity: isDragging ? 0.6 : 1,
          cursor: isDragging ? 'grabbing' : 'pointer',
        }}
      >
        <span>{ name }</span>
      </div>
    )
  }
}
```

css：

```css=
.card.empty-card { background-color: #c9c9c9; }
.card.empty-card > * { display: none; }
```

`<CardWall />`

```jsx=
import Card from '../Card'

const dropTarget = {
  canDrop(props, monitor) {
    // You can disallow drop based on props or item
    const item = monitor.getItem()
    const { status: wallStatus } = props // 卡片牆
    const { status: cardStatus } = item // 卡片

    // 卡片跟卡片牆為不同時，才會回傳 canDrop: true
    return wallStatus !== cardStatus
  },

  ... // 省略
}

class CardWall extends React.Component {

  ... // 省略

  render() {
    const {
      children,
      status,
      isOver, // Injected by React DnD
      canDrop, // Injected by React DnD
      connectDropTarget, // Injected by React DnD
    } = this.props

    return connectDropTarget(
      <div className='card-wall'>
        <div className='card-wall-wrapper'>
          <p>{ status }</p>
          <div className='card-wall-content'>
            { children }

            // 符合 isOver 和 canDrop 狀態才可以插入 empty <Card />
            { isOver && canDrop && <Card empty /> }

          </div>
        </div>
      </div>
    )
  }
}
```

完成後就有插入卡片的感覺了

![](https://i.imgur.com/MdKwhaY.gif)

---

### 8. 處理 `<Card />` onDrag 旋轉效果

要達到卡片 onDrag 時的 `transform: rotate` 效果，但是 React DnD 預設是使用 [HTML5 backend](http://react-dnd.github.io/react-dnd/docs-html5-backend.html) 來替 onDrag 物件做 snapshot, 所以並不能直接操作 onDrag 中的物件，而且還會有這種畫面被切斷的 bug：

![](https://i.imgur.com/WshTYMG.gif)

不過 React DnD 提供了另一種方式 [DragLayer](http://react-dnd.github.io/react-dnd/docs-drag-layer.html) 同樣可以達到這個效果，而且還不會有畫面被切斷的問題。

在 `<Card />` 中加入以下程式碼，讓 onDrag snapshopt 為一個空的圖片：

```jsx=
import { getEmptyImage } from 'react-dnd-html5-backend'

class Card extends React.Component {
  componentDidMount() {
    const { connectDragPreview } = this.props
    if (connectDragPreview) {
      // Use empty image as a drag preview so browsers don't draw it
      // and we can draw whatever we want on the custom drag layer instead.
      connectDragPreview(getEmptyImage(), {
        // IE fallback: specify that we'd rather screenshot the node
        // when it already knows it's being dragged so we can hide it with CSS.
        captureDraggingState: true,
      })
    }
  }

  ... // 省略
}
```

依照官方文件實作出一個 `<CardLayer />` ，該 component 為一個 `position: fixed;` 滿寬滿長的畫布， 並且會追蹤你的滑鼠座標來動態改變裡面的替代 component 的座標。

```jsx=
import React from 'react'
import { DragLayer } from 'react-dnd'

const layerStyles = {
  position: 'fixed',
  pointerEvents: 'none',
  zIndex: 100,
  left: 0,
  top: 0,
  width: '100%',
  height: '100%',
}

const snapToGrid = (x, y) => {
  ... // 省略
}

const getItemStyles = (props) => {
  const { initialOffset, currentOffset } = props
  if (!initialOffset || !currentOffset) {
    return {
      display: 'none',
    }
  }

  let { x, y } = currentOffset

  if (props.snapToGrid) {
    x -= initialOffset.x
    y -= initialOffset.y
    [x, y] = snapToGrid(x, y)
    x += initialOffset.x
    y += initialOffset.y
  }

  // 加入想要的 transform rotate 效果
  const transform = `translate(${x}px, ${y}px) rotate(5deg)`
  return {
    transform,
    WebkitTransform: transform,
  }
}

const LayerCollect = monitor => ({
  ... // 省略
})

const CardLayer = (props) => {
  const { item, itemType, isDragging } = props
  if (!isDragging) {
    return null
  }

  return (
    <div className='card-layer' style={layerStyles}>
      // 你的替代 onDrag component，
      // style 將會帶入動態的座標位置(使用 transform)
      <div className='card' style={getItemStyles(props)}>{ item.name }</div>
    </div>
  )
}

export default DragLayer(LayerCollect)(CardLayer)

```

把 `<CardLayer />` 放到 `<App />` 裡面：

```jsx=

import CardLayer from './CardLayer'

class App extends Component {

  ... // 省略

  render() {
    const cards = this.groupOfCards()

    return (
      <div className="App">
        <div className="board">
          <CardLayer />

          ... // 省略

        </div>
      </div>
    );
  }
}

export default DragDropContext(HTML5Backend)(App)

```

將原本的 html5 onDrag snapshot 藏起來，改用可視範圍內的畫布來動態追蹤滑鼠的座標並將替代 component mount 上去。

### 完成後就可以做到跟 `Trello` 一樣的卡片拖拉效果！

![](https://i.imgur.com/nzeVd5F.gif)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 React 觀念和原理嗎？
>
> 我們有開設 💠 [React 全攻略入門班](https://5xruby.tw/courses/react) 課程唷 ❤️️
>


post-用 React Drag & Drop 來實作 Trello 拖拉牆 / cover

用 React Drag & Drop 來實作 Trello 拖拉牆


「檔案上傳」是網站開發永遠的課題，充滿各種<del>地雷</del>眉角。Active Storage 是由 Rails 核心團隊開發的原生方案，內建於 Rails 5.2 之後的版本中，提供開發者在處理檔案上傳時的另一個選項。由於還相當年輕，以成熟度來說也許還比不過上傳界的前輩們，但未來的發展依然相當令人期待，甚至老字號的 Paperclip 都已順勢宣布停止維護。

## 首先你至少需要 Rails 5.2

因為不想從頭重刻，筆者隨便撿了個被放置的 side project 來試玩。這邊花了點時間升級到 Rails 5.2，不過因為這不是本文重點，很快帶過一下就好：

```ruby
# Gemfile
gem "rails", "~> 5.2.1"
gem "bootsnap"

# 更新 Rails 和相關 gem；視需要處理版本衝突
$ bundle update rails

# 更新 app；注意不要蓋掉需要的檔案
$ rails app:update
```

確認一下是否以下的資訊都有更新到，就算是準備就緒了：

```ruby
# config/application.rb
require "active_storage/engine"

# config/environments/development.rb
# config/environments/production.rb
config.active_storage.service = :local

# config/environments/test.rb
config.active_storage.service = :test

# config/storage.yml
test:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>

local:
  service: Disk
  root: <%= Rails.root.join("storage") %>
```

## 準備就緒，開箱囉
### 資料庫設定

和 CarrierWave 不同的是，你不需要在 model 上另加欄位去 mount。Active Storage 是以 polymorphic 方式實做，把所有資料集中在`active_storage_blobs`（存放附檔資訊） 和 `active_storage_attachments` （存放附檔和 model 的關聯）兩張 table 裡管理，所以先來設定資料庫：

```ruby
$ rails active_storage:install
$ rails db:migrate
```

### 關聯設定

如果你原本是使用 CarrierWave 的話，接下來只需要做一個修改：

```ruby
# app/models/image.rb
class Image < ApplicationRecord
# ...

# CarrierWave 的寫法
# mount_uploader :file, ImageUploader

# Active Storage 的寫法
has_one_attached :file

# ...
end
```

因為沿用同樣的命名 `:file`，所以對應的表單和 controller 都不用修改，到這邊為止，上傳的功能已經無痛轉移完成了！

### 上傳

實際上傳一張圖片後，來看一下 create image 時的 log：

![create image log](https://i.imgur.com/IBQqcHb.png)

從 log 可以發現表單送出後 Rails 做了這幾件事：

- 將檔案存入 storage（本例中為本機端的 disk storage）
- 將檔案位置（key）寫入 `active_storage_blobs`
- 產生一筆 `Image` 資料
- 建立上述 image 和 blob 的關聯，寫入 `active_storage_attachments`

接下來就可以透過 `@image.file` 來對檔案進行各種操作了。

### 前端顯示

利用 Rails 內建的黑魔法（誤），在 `url_for`, `link_to`, `image_tag` 等方法中傳入附檔物件即可。

```ruby
# app/views/images/show.slim
= image_tag @image.file
```

如果你的使用情境不在 controller/view 內的話，也可以這樣呼叫：

```ruby
Rails.application.routes.url_helpers.rails_blob_url(@image.file)
```

但要記得另外指定 host：

```ruby
# config/environments/development.rb
Rails.application.configure do
  # ...
end
Rails.application.routes.default_url_options = { host: "localhost:3000" }
```

檢視前端網頁原始碼，可以發現圖片網址會長得像這樣：

```
http://localhost:3000/rails/active_storage/blobs/{encoded_key}/{filename}
```

檢視 log，可以發現圖片顯示總共做了兩次 request。首先是由 `ActiveStorage::BlobsController` 產生 signed url：

![BlobsController request log](https://i.imgur.com/ysYrjX4.png)

再來由 `ActiveStorage::DiskController` 自 storage 取得實體檔案：

![DiskController request log](https://i.imgur.com/V10azUT.png)

### 縮圖處理

在 `variant` 方法中傳入 MiniMagick 參數即可。未來 Rails 6 會引入 `image_processing` gem，語法可以更簡練，但現階段只能使用 MiniMagick。

```ruby
= image_tag @image.file.variant(combine_options: { resize: "500x500", auto_orient: true })
```

檢視前端網頁原始碼，可以發現縮圖的網址長得不太一樣：

```
http://localhost:3000/rails/active_storage/representations/{encoded_key}/{filename}
```

從 log 也可以看出，request 的第一步換成了 `ActiveStorage::RepresentationsController`：

![RepresenationsController request log](https://i.imgur.com/cQgLhvi.png)

Active Storage 預設是在「variant 第一次被存取」時才進行圖片處理：

- 先檢查 variant 是否已存在 storage 中
- 若不存在，則取得原圖，加工後再將 variant 寫入 storage
- 產生 variant 的 signed url
- 重導至 `ActiveStorage::DiskController` 取得實體檔案

如果想要在上傳時就即時處理縮圖的話，實做方式是：

```ruby
= image_tag @image.file.variant(resize: "100x100").processed.service_url
```

### 天生 N+1
在先天設計上，使用 Active Storage 很難不遇到 N+1 問題。對此官方也提供了內建的 scope `with_attached_{name}` 因應：

```ruby
# app/controllers/images_controller.rb
def index
  @images = Image.with_attached_file
end
```

### 小結

Active Storage 的設計理念是要讓檔案的 public url 和檔案的實際位置徹底脫勾，但也因此產生了一些問題，例如天生易踩 N+1 雷、欠缺永久網址難以 cache（目前是全面強制為 signed url）、redirect 造成的效能瓶頸、routing 上的衝突，以及一旦超出預設的情境後就很難做其他客製化等等（詳見文末的參考資料）。也有人指出 Active Storage 完全只圍繞在「圖檔」這個主題上，對於其他格式的檔案支援有限的窘境。

雖然仍有不足，不過這畢竟是正式推出才半年的新玩具，當然還很多有改善空間，相信 Rails 核心團隊不會讓大家失望（太久）的。回到 Active Storage 最大的賣點，當然還是它「內建於 Rails」的事實。這意味著「Rails 升級時不會有相容性問題」，對開發者來說是相當有魅力的。

## おまけ
由於筆者是拿舊專案來試玩的，有些原本寫好的功能也被逼著一起更新了，既然雷都踩了那也順便分享一下 XD

### EXIF

這裡解決的問題是「想拿到照片的 EXIF 資訊」。原本只需要安裝 [EXIF Reader](https://github.com/remvee/exifr) 後，在 CarrierWave 對應的 uploader 裡動動手腳就可以簡單做到，換成在 Active Storage 就需要魔改 analyzer 了：

```ruby
# Gemfile
gem "exifr"
```
```ruby
# config/initializers/exif.rb
require "exifr/jpeg"

module ActiveStorage
  class Analyzer::ImageAnalyzer < Analyzer
    def metadata
      read_image do |image|
        if rotated_image?(image)
          { width: image.height, height: image.width }
        else
          { width: image.width, height: image.height }
        end.merge(exifdata(image) || {})
      end
    rescue LoadError
      logger.info "Skipping image analysis because the mini_magick gem isn't installed"
      {}
    end

    private

    def exifdata(image)
      return unless image.type == "JPEG"
      reader = EXIFR::JPEG.new(image.path)
      { exif: reader.to_hash } if reader.exif?
    rescue EXIFR::MalformedImage, EXIFR::MalformedJPEG
    end
  end
end
```

之後就可以透過 `@image.file.metadata[:exif]` 取得相片資訊了。當然，你想在這裡魔改其他功能進來也是 ok 的 XD

### 測試
由於是內建於 Rails，Active Storage 本身提供的功能其實不需要另外測試。但如果你需要有一個能在測試中使用的附檔，我們可以仿照官方的測試，自己刻一個 helper：

```ruby
# spec/rails_helper.rb
# ...
Dir[Rails.root.join("spec/support/**/*.rb")].each { |f| require f }

RSpec.configure do |config|
  config.include UploaderSpecHelper

  config.after(:all) do
    FileUtils.rm_rf(Dir["#{Rails.root}/tmp/storage/*"]) if Rails.env.test?
  end  
end
```
```ruby
# spec/support/uploader_spec_helper.rb
module UploaderSpecHelper
  # 配合前面的魔改，這邊也做了 exif 的對應處理
  def create_file_blob(filename: "image.jpg", content_type: "image/jpeg", metadata: { exif: {} })
    ActiveStorage::Blob.create_after_upload!(
      io: file_fixture(filename).open,
      filename: filename,
      content_type: content_type,
      metadata: metadata
    )
  end
end
```

最後在 `spec/fixtures/files` 裡隨便放一個 `image.jpg` 進來，準備工作就完成了。之後，就可以在測試中使用了：

```ruby
# spec/models/image_spec.rb
RSpec.describe Image, type: :model do
  it "should contain exif data" do
    image = FactoryBot.create(:image)
    image.file.attach(create_file_blob)
    expect(image.file.metadata).to include(:exif)
  end
end
```

## 參考資料
- [Rails Guide: Active Storage Overiew](https://guides.rubyonrails.org/active_storage_overview.html)
- [Rails 5.2: Active Storage and beyond](https://evilmartians.com/chronicles/rails-5-2-active-storage-and-beyond)
- [Rails 5.2 and Active Storage - the new approach to file uploads](https://prograils.com/posts/rails-5-2-active-storage-new-approach-to-file-uploads)
- [7 Practical Tips for ActiveStorage on Rails 5.2](https://bloggie.io/@kinopyo/7-practical-tips-for-activestorage-on-rails-5-2)
- [Moving from CarrierWave to ActiveStorage in a Rails app](https://medium.com/epfl-extension-school/moving-from-carrierwave-to-activestorage-in-a-rails-app-31f13e3ff37d)
- [Stack Overflow: ActiveStorage wont crop variants](https://stackoverflow.com/questions/50547257/activestorage-wont-crop-variants/50552733#50552733)
- [Caching variants with ActiveStorage](https://www.neontsunami.com/posts/caching-variants-with-activestorage)
- [Rails issue#31419: ActiveStorage: Allow access to backing file from Service API](https://github.com/rails/rails/issues/31419)
- [Rails issue#30431: Permanent or direct links to ActiveStorage uploads](https://github.com/rails/rails/issues/30431)
- [Rails issue#31228: Rails Router Catchall Picks Up ActiveStorage Routes](https://github.com/rails/rails/issues/31228)
- [Deleting ActiveStorage Attachments From the Controller, 3 Ways](https://www.nicholasshirley.com/several-strategies-to-delete-activestorage-attachments/)
- [Exif analyzer for Active Storage](https://www.georg-ledermann.de/blog/2018/05/15/exif-analyzer-for-active-storage/)
- [Deprecating Paperclip](https://robots.thoughtbot.com/closing-the-trombone)

(Photo by John Schnobrich on Unsplash)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>

五倍紅寶石・專業程式教育機構

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

如何自幹一個 Rails Router

Ruby 探索：Blocks 深入淺出

在你的 Rails App 實作 AMP

用 React Drag & Drop 來實作 Trello 拖拉牆

Active Storage 開箱文

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

地址 | 10046 台北市中正區衡陽路 7 號 5 樓

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款