BLOG【自作Chrome拡張機能】Trelloをカレンダー化する拡張機能を作ってみた

みなこ
  1. HOME
  2. ブログ
  3. フロントエンド
  4. 【自作Chrome拡張機能】Trelloをカレンダー化する拡張機能を作ってみた

目次

  1. ✏️ 概要
  2. 💼 準備をする
  3. 📅 コードを書いてみる
    1. manifest.json
    2. style.css
    3. script.js
  4. ⚙️ chromeに拡張機能を追加する
  5. 🎉 実際に拡張機能を使ってみよう

✏️ 概要

Trelloをカレンダーのように使いたい。でもカレンダーとして使うには縦幅が長い。でも自分の求めてるものを満たしてくれるプラグインも見つからない…

ので、自作で拡張機能を作ってみました🎉

以下のようなレイアウトのカレンダーができます!ついでに今日の日付が光ります💡ピカーン

💼 準備をする

chromeの拡張機能に必要なファイルはとてもシンプルです。

任意の場所にフォルダを作成して以下のファイルを用意しましょう。

  • manifest.json
    • chrome拡張機能の設定を記載したファイル
    • 名前とかバージョンとか機能とか
  • style.css
    • ページの見た目をいじるファイル
    • 今回で言うとカレンダーな見た目にしてくれるファイル
  • script.js
    • ページを動かしてくれるファイル
    • 今回で言うと今日の日付を光らせてくれるファイル

chromeの拡張機能を作るのに必要なのはこれだけです!

📅 コードを書いてみる

それでは実際にコードを書いてみましょう!

今回はTrelloのボード名が calendar- から始まるものはカレンダーレイアウトにする仕様にしようと思います 🙆‍♀️

manifest.json

{
  "name": "Calendar layout for trello",
  "author": "minako",
  "description": "Trelloのレイアウトをカレンダーにします",
  "version": "1.0.0",
  "manifest_version": 2,
  "web_accessible_resources": ["*"],
  "content_scripts": [
    {
      "matches": ["https://trello.com/b/*/calendar-*"],
      "css": ["style.css"],
      "js" : ["script.js"]
    }
  ]
}

まずは設定ファイル。名前や説明、また使用するファイルなどを記載しています。

manifest.jsonの内容なのですが 今回は最低限必要な記述のみを書いています。今回は calendar- から始まるものをカレンダーにしたいので matchescalendar-が含まれるurlを指定し そのボードにだけ拡張機能が動くように指定しています。

manifest.jsonは非常にたくさんの設定機能があります。ここで詳しくは説明できないので内容を知りたい方は詳しくまとまった以下の記事を貼っておくのでみて見てください 💡

参考:https://qiita.com/mdstoy/items/9866544e37987337dc79

style.css

次は実際にTrelloをカレンダーレイアウトにするファイルです

先に謝っておきます。 !important が多発しますが、普段はこのように使うものではありませんw 今回はDOM階層が深く複雑なTrelloのレイアウトをいじる為に無理やり!importantを書いてます。

あくまで個人使用目的である事をご了承ください(笑)

/* 全体のレイアウト */
#board
{
    display: block!important;
    text-align: left!important;
    position: relative!important;
    white-space: initial!important;
    padding-bottom: 24px!important;
    min-width: 1414px !important;
}

.board-canvas
{
    height: auto!important;
}

.body-board-view
{
    overflow-y: visible!important;
}

.js-list,
.js-add-list
{
    display: inline-block!important;
    vertical-align: top!important;
    margin: 0 0 10px 10px!important;
}

.list {
    background-color: hsla(0,0%,100%,.4)!important;
    height: 300px!important;
    border: 1px solid white!important;
    border-radius: 30px 0 30px 0!important;
}

.u-gutter
{
    margin-left: 0!important;
}

/* 文字の色 */
textarea.list-header-name {
    color: #fff!important;
}

textarea.list-header-name.is-editing {
    color: #172b4d!important;
}

.body-light-board-background textarea.list-header-name {
    color: #172b4d!important;
}

/* 今日の日付 */
.list.is-today {
    /* 赤背景 */
    background-color: rgb(244, 115, 115, 0.3)!important;
}

最後の方にあるis-todayクラスはTrelloで使用されているクラスではありません。次に記載するjsで当ててあげましょう!

script.js

jsを使って今日の日付を取得して リストに色をつけるis-today を付与します。

window.onload = function () {

    // 今日の日付
    let date = new Date();
    let this_month = ("0"+(date.getMonth() + 1)).slice(-2);
    let today = ("0"+date.getDate()).slice(-2);

    // ヘッダーの取得
    let header_of_header = document.getElementsByClassName('list-header-name');

    for(let i = 0; i < header_of_header.length; i++) {
        if(header_of_header[i].innerHTML.match(this_month + '/' + today)) {
            header_of_header[i].closest('.list').classList.add('is-today');
        }
    }
}

日付の一致条件ですが カレンダーの生成を以下の記事でphpで行っている為 04/01 のように月と日がそれぞれ2桁で生成されています。その為jsでも生成された日付を必ず2桁になるように処理をしてから一致判定を通るようにしています!💡

https://doctype.jp/blog/backend/507/

以上でコードは完了です!

⚙️ chromeに拡張機能を追加する

では、実際にブラウザで使う為に作ったファイルをchromeに追加しましょう🛠

まずは以下のリンクにアクセスして拡張機能の管理画面へ移動します。

chrome://extensions/

すると以下のような画面に移動します。自作の拡張機能を追加できるようにする為 右上にあるデベロッパーモードをONにしましょう

そうしたらさっき作ったファイルが用意されているフォルダを丸々ブラウザに直接ドラッグ&ドロップしましょう!

すると以下のように作った拡張機能が追加されている事が確認できます 🙌

なんと 自作chrome拡張機能の追加は以上で完了です(・・)カンタン

ちなみにファイルを更新したいときは有効にするボタンの左の更新ボタンを押すだけです!

🎉 実際に拡張機能を使ってみよう

それでは実際に作った拡張機能をTrelloで作ってみましょう

今回は calendar- から始まるボードはカレンダーレイアウトになるように設定したので、実際に calendar- から始まるボードを作成して何かリストを作ってみましょう。

リストを作成した時に以下のようなレイアウトになれば成功です 🎉

上手くいかない時はブラウザをスーパーリロードしてみてください

正直カレンダーのリストを1つ1つ作るのめんどくさいと思うので(笑)、別記事でカレンダーを自動生成させてみたのでこちらも合わせてご覧ください✨

https://doctype.jp/blog/backend/507/

お疲れ様でした✨