BETA

Trelloのカードとカスタムフィールドから進捗管理の表を生成する「Miss Direction」

投稿日:2019-05-03
最終更新:2019-05-03
※この記事は外部サイト(https://labor.ewigleere.net/2019/05/03/mis...)からのクロス投稿です

よんどころない理由につき、進捗管理をする必要性に迫られました。

本来であればBacklogRedmineのようなプロジェクト管理ツールを使うべきだと思います。

が、今回は新しいツールを導入する余裕がなく、手元に使い慣れたTrelloがあったため、これを活用することにしました。

以下、デモ環境ということで「GW」というボードに、GW中にやりたいことをカードとして起こした環境で図解します。

内容として、ボードはともかくリストとカードについては

  • リスト: カテゴリ
  • カード: 1つのプロジェクト

という形に落とし込みます。

無料版ならばボード1つにつき1つの「Power-Up」(拡張機能)を使うことができますが、今回は「Custom Fields」をオンに。

カスタムフィールドは以下の3つを作成。

  • 進捗状況: リスト(ドロップダウン)形式。進捗状況を選択肢の中から選ぶことができるように設定
  • 担当: テキストフィールド形式。プロジェクトの担当者の名前を記入。場合によっては分担する可能性があるのでフリーテキストとした
  • コスト: 数値形式。必要なコスト(金額)。

カードの中には上の図のように表示されます。このカスタムフィールドの値を主に編集・操作する形で進捗を管理します。

上述の進捗状況のカスタムフィールドは上図のように設定。未着手~完了まで。状況に応じてもっと細分することも可。

あとはTrello APIを使ってデータを抽出し、体裁を整えて表示すればOK。

Trello APIの使い方などは過去の記事参照。

ただ、今回はPower-UpのCustom Fieldsを使うので、新たにGetting Started With Custom Fieldsのリファレンスを見て必要なAPIを探す必要があります。

そんなこんなで必要なデータをJSONで取得して表示、と。

今回もう一つ新しい試みとして、axiosを使ってリアルタイムにデータを取得する形式としました。

といってもaxiosで直接APIを叩くとCORSの仕様上、異なるオリジンからの取得はNGと怒られてしまうので間にPHPを挟みます。

axiosから自サーバのPHPをパラメータ付きで叩くと、PHPがaxiosの代理として実際にTrello APIからget_file_contents関数でJSONを入手し、それをaxiosに投げ返す、というわけです。

ページを表示させようとすると、ローディング表示がなされ……

データ取得が完了すると、表の形で出力します。

以下、実際のパラメータと表示の対応を。

  • プロジェクト名: カードのタイトル
  • 規模: カードが所属するリストの名称
  • 進捗状況: カスタムフィールド「進捗状況」
  • 担当者: カスタムフィールド「担当者」
  • コスト: カスタムフィールド「コスト」。日本なので数字の前に¥マークと、3桁ごとにカンマで区切って表示するようにしています
  • 期日: カードの期日
  • 備考: カードの説明。markedを使ってMarkdownをパース、HTMLとして表示しています

とりあえず自分用だったのでBootstrapを使い、axiosやらmarkedをES2015のimportを使って読みこむ書き方をした都合上、Parcel(正確にはgulp-parcel)を使ってコンパイルすることにしました。

これで各プロジェクトの進捗状況を俯瞰的に確認し、見通しをよくすることで作業効率化を図ることができました。

参考

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

アルム=バンドのQrunch

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!