ラック
Home > ブログ > 記事 > 2018年6月 > Trelloの複数ボードをまたいだカレンダーと実績一覧の作成

Trelloの複数ボードをまたいだカレンダーと実績一覧の作成

カテゴリ: Webサービス,Web自作,タスク管理

前回(Trelloを使ってブログ的なことができないか(Trello APIテスト))に引き続きTrello。今回はより実用面での活用です。

TrelloはPower-Up(拡張機能)でカレンダーを表示することができますが、それはボードごとのカレンダーになります。項目に応じてボードを複数に分けた場合、デフォルトでは複数のボードをまたいで一括で予定を見るカレンダーはありません。

そこでGoogleカレンダーなどの外部のカレンダー機能とiCalデータをやり取りしてその機能を賄うことになるのですが、これだとTrello + 他のサービスのアカウント、とアカウントが複数必要になってしまい、管理が煩雑になってしまいます。

そのため、Trello APIを使ってこの「複数のボードをまたいで一括で予定を見るカレンダー」を実装してみました。

以下、作りこんだ部分の説明を。

カレンダー

Trello APIを使った予定カレンダーの画面

まず、ページを開くと当月のカレンダーが出てきます。日曜始まり土曜終わり、各日付にTrelloのカードがBootstrapのリスト・グループ形式で縦に並んで表示されます。

ちなみに、事前に

  • APIキーとアクセストークン
  • ボードを読み書きできるユーザのユーザーID、表示名、メンバーID
  • 内容を表示させたいボードの名前、ボードID

は連想配列で持っておくものとします(実装はPHPで行いました)。

「前月」「翌月」と「高さ調整」のボタン

左上には3つのボタンを配置。前月、翌月で順番に月を移動することができます。これで先月も来月も予定を確認できます。

翌月(2018年7月)の予定

……ぶっちゃけるとGETパラメータ渡しているだけなので、URLに直打ちすればダイレクトに指定した年月のカレンダーを表示できますが。

また、「高さ調整」のボタンはカレンダー内の各日付の高さを調整するためのトグルです。例えば……

6/24の3つの予定が縦に並んだ様子

今日6/24のように、複数のカードが並んでいる場合、画面のサイズや解像度によっては縦方向に表示が伸びてしまい、一ヶ月の予定全体を見通すために縦スクロールをしなければならなくなることもあります。

6/24の3つの予定を狭い範囲に収めた様子

そこで「高さ調整」のボタンを押して最大高さ指定、表示が見切れた場合は縦方向のスクロールを許可して無理やりコンパクトに収める、という表示の切り替えを行います。これにより、「とりあえず今日予定が入っているかどうか」はパッと見で最低限確認できる、という感じです。

ブラウザ幅を縮めた場合の表示

ちなみに、カレンダーはflexboxを使用しているのでレスポンシブ対応済み。仮にスマホで表示させる場合は縦一列に日付が並びます。

実績一覧

実績一覧表示ページ

こちらはオマケというか、ついでの機能です。

メンバーを選択

左上のドロップダウンを押すとメンバー一覧が表示されるので選択。すると

メンバーの実績を表示

完了済みのタスクのカードを左にBootstrapのパネル表示、右のテキストエリアにMarkdown形式で表示します。これで今月どのタスクを片付けたかが確認できる、というものです。印刷したい場合はtextareaにMarkdownも出力されるので、それをコピペしてローカルでmarkdown-pdfでpdf化すれば紙の資料も作成できる……と、一応そんなところも用途として想定して作ってみました。


ざっくり以上のような感じです。メインで使うのはカレンダーの方だと思われますが、Trello APIを使ってこんなこともできる、というサンプルでした。

タグ: ,php,Markdown,Trello,カレンダー

 



関連する記事一覧