Trelloのガントチャートを自作のchrome拡張で見やすくカスタマイズしてみた

13690 ワード
chrome-extension Chrome Trello カンバン タスク管理 Chrome テキストリンク

概要

タスク管理のツールとして有名なTrelloがありますが、登録したカードをガントチャートで見たいときはchrome拡張のElegantt for Trelloを入れるのが一般的かと思います。

ガントチャートが表示されるのは助かりますが、ガントチャートが上、カードが下に固定表示されてしまうため残念ながら見やすいレイアウトとは言えません。また、レイアウトの調整も自由にはできない仕様のようです。

そこで、レイアウトを調整するためのchrome拡張を独自に開発してガントチャートを見やすくカスタマイズをしてみました。

課題

  • カードが増えてくるとガントチャートのスクロールが必須になるので全体を見渡せない
  • 今日を表す列が網掛けと同じグレーで表示されるため分かりにくい

結果

まずはカスタマイズ結果からご紹介です。

カスタマイズ前

ガントチャートの領域が狭いのでスクロールが必須で非常に見づらいです。
今日を表す列も色が網掛けと同じグレーなので同化してしまって分かりにくいです。

カスタマイズ後

今日を表す列は背景が赤で表示されるようになり、ガントチャートは左、カードは右に表示されるようになりました。
ガントチャートの領域が広くなったのでスクロールすることなく全体を見渡せて見やすくなったと思います。
カスタマイズ前と比べて画面全体を有効活用できています。

カスタマイズ方法

レイアウトの調整はchrome拡張から行うためchrome拡張の開発から始めます。

1. はじめに

今回作成するchrome拡張は以下のようなフォルダ構成となります。

trello-layout/
　├ css/
　│　└ main.css
　├ js/
　│　├ background.js
　│　├ jquery-3.3.1.min
　│　└ main.js
　└ manifest.json

2. manifest.jsonの作成

manifest.json
{
  "manifest_version": 2,
  "name": "trello-layout",
  "version": "1.0.0",
  "description": "trello-layout",
  "content_scripts": [
    {
      "matches": [
        "https://trello.com/*"
      ],
      "css": [
        "css/main.css"
      ],
      "js": [
        "js/jquery-3.3.1.min.js",
        "js/main.js"
      ]
    }
  ],
  "background": {
    "scripts": [
      "js/background.js"
    ]
  },
  "permissions": [
    "tabs"
  ],
  "author": "Targityen"
}

matchesではTrelloのドメインを指定してTrelloのサイトだけカスタマイズが反映されるようにします。
今日を表す列の背景色を変更するため main.css ファイルからスタイルを上書きします。
ガントチャートのレイアウトの変更は main.js ファイルから変更します。

3. main.cssの作成

main.css
div.gantt-foreground-col-current-date {
  background-color: red;
}

今日を表す列の背景色を変更します。

4. main.jsの作成

main.js
$(function() {
  const update = function() {
    const $timeline = $('div.egt-ui-timeline-wrapper');
    if ($timeline.length == 0) {
      setTimeout(function() {
        update();
      }, 0);
      return;
    }
    let $div = $('#trello-layout');
    if ($div.length == 0) {
      $div = $('<div/>', {
        id: 'trello-layout',
        css: {
          'flex': 'none'
        }
      });
    }
    const $wrapper = $('div.egt-ui-widgets-wrapper');
    $wrapper.css({
      'width': '50%',
      'float': 'left'
    });
    const $canvas = $('div.board-canvas');
    $canvas.css({
      'width': '50%',
      'float': 'right',
      'maxHeight': '90vh',
      'minHeight': '90vh'
    });
    $div.append($wrapper);
    $div.append($canvas);
    $('div.board-main-content').append($div);
  };
  chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    update();
  });
  update();
});

ガントチャートが表示されたのを確認後、ガントチャートを左に、カードを右に表示するようにDOMを調整します。
DOMの調整にはjQueryを利用しています。

5. background.jsの作成

background.js
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  chrome.tabs.sendMessage(tabId, {}, () => {});
});

Trelloのボードリストからボードを変更した場合など、画面がリロードされない状態で遷移するケースがあるため、タブの更新イベントを拾って main.js の update 関数を強制的に呼び出すようにします。

6. chrome拡張機能の読み込み

ここまでの手順でchrome拡張を動かすために必要なファイルが揃ったので、chrome拡張機能として読み込みます。
Google Chromeのブラウザの拡張機能から デベロッパーモード を有効にして パッケージ化されていない拡張機能を読み込む から先ほど作成したtrello-layoutフォルダを読み込みます。

読み込みに成功すると trello-layout という拡張が表示されます。
拡張が有効な状態でTrelloのボードにアクセスすると、ガントチャートが見やすくカスタマイズされます。

今回使用したソース

trello-layout