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

よんどころない理由につき、進捗管理をする必要性に迫られました。 本来であれば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)を使ってコンパイルすることにしました。 これで各プロジェクトの進捗状況を俯瞰的に確認し、見通しをよくすることで作業効率化を図ることができました。

余談

名前は「やりたいことはディレクションかマネジメントに当たる内容ですよね」と考え、”direct”もしくは”manage”が含まれている名前ということで何か良い名前はないか、と考えていたところに、咲夜さんのスペカに奇術「ミスディレクション」があったな、と思い出したのでそのまま採用。

参考

この記事を書いた人

アバター

アルム=バンド

フルスタックエンジニアっぽい何か。LAMPやNodeからWP、gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。