Trelloを便利に使うためのテンプレート・ショートカット・Chrome拡張機能

Trelloを自分なりにカスタマイズして利用している人も多いと思います。
今回は、自分なりに考えたTrelloの使い方やテンプレート、便利なショートカットやChrome拡張機能を紹介したいと思います。


# テンプレート

多くの人もやっていると思いますが、私も自分用のボードテンプレートを作って作業量を減らしています。今回は自分なりのテンプレートや使い方を紹介します。

## テンプレートの作成
テンプレートの作成と言っても普通にボードを作るだけです。私は、他のボードと区別しやすくするために「テンプレート」というチームを作成しその中に置いています。また、テンプレートから新しいボードを作成した直後に新しいボードを発見しやすいように、背景色を目立つ色にしています。

### テンプレートで作り込んでおくもの
テンプレートから新しいボードを作成した際に、コピーされるものとされないものがあります。下記を理解してテンプレートを作成してください。

- コピーされるもの
	- リスト
	- カード
	- 背景色
	- Power-Up（ボード作成直後にテンプレートと同じものが自動で有効になる）
	- ラベル
	- カードにつけたラベル
- コピーされないもの
	- コメント
	- カードのフォロー
	- アクティビティログ
	- アーカイブ済みのアイテム


### 自分なりのテンプレート
#### ドキュメントボード
- プロジェクト内容
- プロジェクト進行中に得た知識・資料の置場

プロジェクト内容は、予め下記を記述してテンプレートに組み込んでいます。

```markdown

# 立案日

# 概要

# 機能

# 使用するソフト・サービス

# 使用するハード

```

#### ToDoボード
- プロジェクトでの課題

1つの課題につき1つのカードとして記述しています。カードの詳細説明には、課題の詳しい内容や使用するものなどを記述しています。また、なるべく期限も記述します。

#### 実行中ボード
- 実行中の課題
- 実行中の課題に関係した資料

課題カードには、必要に応じてToDoリストを記述します。また、課題カードと課題に関係した資料のカードの関係性を維持できるように互いにカードを**Trelloの添付ファイル**として添付しています。（添付方法はショートカットを活用すると楽なので[ショートカット](#ショートカット)の章で紹介）

#### 完了ボード
- 完了した課題

**実行中**から完了した課題カードを移動させます。このとき、**完了**に移動させるのは課題カードだけで、その他の資料などのカードは**‌ドキュメント**に移動させます

![](https://media.giphy.com/media/2aTj39cOwARPpyEii4/giphy.gif)


## テンプレートの使い方
Trelloには、ボードを丸ごとコピーする機能があります。

**ボードメニューを表示**‌`w` → **もっと見る** → **ボードをコピー**
ここで、**カードをコピー対象に含める**にチェックするとカードの内容もコピーされます。



<a name="ショートカット"></a>
# ショートカット
Trello独自のキーボードショートカットは**`?`**で一覧表示できます。ですので、ここでは、この一覧になっていない便利なショートカットを紹介したいと思います。


## 様々なコピー＆ペースト`Command + C`

### カードのコピー＆ペースト
1. コピーしたいカードの上にカーソルを置きコピー`Command + C`
2. "+さらにカードの追加"の上にカーソルを置きペースト`Command + V`

![](https://media.giphy.com/media/1qY9NY2Gsyn4dVAKhb/giphy.gif)


### コピー＆ペーストで"Trelloの添付ファイル"の追加
1. 添付したいカードの上にカーソルを置きコピー`Command + C`
2. 添付先のカードの上にカーソルを置きペースト`Command + V`

このショートカットは，課題カードとそれに関連したドキュメントを記したカードとをリンクさせるのにとても便利なものです。私は、関連したカード同士を互いに添付しあい、カードを移動させた後でもすぐにたどれるようにしています。

![](https://media.giphy.com/media/3kMdZi4zkPeHfNbGV6/giphy.gif)


# Chromeの拡張機能

## Card Color Titles for Trello

ラベル名を表示する。  

[Card Color Titles for Trello \- Chrome ウェブストア](https://chrome.google.com/webstore/detail/card-color-titles-for-tre/hpmobkglehhleflhaefmfajhbdnjmgim?utm_source=chrome-ntp-icon)

![ラベル.png](https://qiita-image-store.s3.amazonaws.com/0/99260/f26206db-3dbf-807e-0a77-7ff888c88e3f.png)



## Elegantt | The leading Gantt Chart for Trello

カードからガントチャートを作成してくれます。Trelloの標準機能では、カードに期限を設定できますが開始日は設定できません。開始日も設定したい人にもオススメの拡張機能です。  

[Elegantt \| The leading Gantt Chart for Trello \- Chrome ウェブストア](https://chrome.google.com/webstore/detail/elegantt-the-leading-gant/jdongfcbejkjibhkbekkjcckophhjcjj?utm_source=chrome-ntp-icon)

<!--ガントチャートの画像添付-->
![ガントチャート.png](https://qiita-image-store.s3.amazonaws.com/0/99260/4c424b78-bc7d-d9ce-eedf-f8891d831424.png)



## Next Step for Trello

カードを開くことなく、チェックリストの確認・チェックがでいます。  

[Next Step for Trello \- Chrome ウェブストア](https://chrome.google.com/webstore/detail/next-step-for-trello/iajhmklhilkjgabejjemfbhmclgnmamf?utm_source=chrome-ntp-icon)

設定で下記のように細かく設定できます。

- 非表示
- カードにつき１つ表示
- 最初のチェックリストを表示
- チェックリストにつき１つ表示
- すべて表示

![リスト.png](https://qiita-image-store.s3.amazonaws.com/0/99260/3a4678d3-dedd-faef-1730-dce469f3041a.png)


## Create Link

この拡張機能は、Trello専用というわけではありません。コピーしたいURLを下記のフォーマットに変換してコピーしてくれるものです。（デフォルトでは４つ設定されている）  

[Create Link \- Chrome ウェブストア](https://chrome.google.com/webstore/detail/create-link/gcmghdmnkfdbncmnmlkkglmnnhagajbm?utm_source=chrome-ntp-icon)

- Plain text
- HTML
- markdown
- mediawiki

以下のようなURLをTrelloに添付する場合、ページのタイトルが表示されずわかりにくくなってしまいます。

```
https://blog.qiita.com/update-article-asciinema/
```

<!--通常のURL貼り付け例を添付-->
![URL_01.png](https://qiita-image-store.s3.amazonaws.com/0/99260/d655fb56-06dd-86eb-9af3-6671c8eac828.png)

Create Linkの設定でMarkdownをデフォルトに設定しURLをコピーすることで以下のようにコピーされます。（ショートカット設定可能）  

これを詳細説明に貼り付けることで、リンク先が分かりやすい添付ができます。

```
[記事にAsciinemaを埋め込むことができるようになりました \- Qiita Blog](https://blog.qiita.com/update-article-asciinema/)
```

![URL_02.png](https://qiita-image-store.s3.amazonaws.com/0/99260/246935d2-777b-3b88-d4b1-1811ccd00a09.png)