五倍直播間

Blogs - Sidebar


[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 App 實作 AMP

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

Active Storage 開箱文

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

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

專業課程

ASTRO Camp

線上課程

實體課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款