公開日：
こんにちは、システム開発グループの太田です。今回は、gusuku Everysite（以下、エブリサイト）とkintoneを組み合わせて作成した、プロジェクト・タスク管理サイトをご紹介します。
複数のプロジェクトを並行して進める企業や部署の皆さんは、「今、誰がどのタスクを担当しているのか」「各プロジェクトはどこまで進んでいるのか」を把握するのが大変ですよね。特に、プロジェクトごとにメンバーが異なり、社外の方も参加する場合、情報の共有方法に悩むことがあります。
そこで、チームのメンバーがプロジェクトとそれに紐づくタスクを同じサイトで確認・作成・編集できる仕組みを考えました。直感的にプロジェクトやタスク間を移動でき、タスクについてのやり取りも行えます。またデータはkintoneに蓄積されるので、全社的な集計や生成AIによる分析にもつなげられます。
kintoneを使ってプロジェクト管理をしている方、社外メンバーとの情報共有に課題を感じている方、エブリサイトの活用例を知りたい方はぜひ最後まで読んでみてください！
作成したサイトの全体像
サイトには、ログインページ、マイページ、プロジェクトトップ、プロジェクト作成・編集、タスク、タスク作成・編集、メンバーなどのページを用意しました。ログインすると、自分が参加しているプロジェクトや担当タスクをマイページで確認できます。
プロジェクト名をクリックすると、その詳細や関連タスクを表示します。タスク名からはタスクページへ進み、担当者やステータス、進捗を確認できます。新規作成や編集もそれぞれのページから行えるため、情報を探す操作と更新する操作をつなげられます。
また、メンバーの名前をクリックするとそのメンバーの登録情報や抱えているタスクを確認できます。
データを管理するkintoneアプリ
サイトの裏側では、次の4つのkintoneアプリを使用しています。
- 名簿：サイトを利用するメンバーの氏名やメールアドレスなどを管理。
- プロジェクトマスタ：プロジェクトの情報と、参加メンバーを管理。
- タスクマスタ：タスクの内容、担当者、進捗などを管理。
- タスクコメント：各タスクに対して投稿されたコメントを管理。
アプリ同士はルックアップや関連レコード一覧でつなげています。例えば、プロジェクトマスタでは参加メンバーを、タスクマスタでは所属プロジェクトと担当者を参照します。エブリサイトから登録・更新した情報はkintoneのレコードに蓄積されるので、管理側はkintoneからも内容を確認できます。
ポイント① メール認証でメンバーを識別
最初のポイントは、メールアドレスを使った認証です。ログインページで入力されたメールアドレスに対し、ワンタイムパスワードによる認証を行います。認証に成功すればマイページに遷移し、ログインしたメンバーの情報を反映する仕組みです。
ログインページ以外の画面を表示する際にも同様の設定を行い、表示時に認証されていなければログインページへ移動させます。これらにより、社外メンバーでも名簿への登録によってサイト利用者として扱えるのが今回の構成の特徴です。なお、今回はメール認証による利用者の識別までを実装しており、所属プロジェクトに応じた情報の閲覧・編集制限は今後の改善課題としています。
ポイント② 行き来しやすいページ遷移
プロジェクトやタスクへのページ間移動をスムーズにするため、各ページのプロジェクト名・タスク名・メンバー名などをクリックできるリンクとして設定し、関連するページへ直接移動できるようにしました。
プロジェクトトップページでは、表のタスク名に、タスクを識別する情報を含んだURLを設定しています。例えば、タスクIDが「D-001-002」の場合、リンク先URLに「?task=D-001-002」を付けます。遷移先では、ページ内処理の「URLの『?』の後ろから指定した値を取得する」アクションを使ってタスクIDを取得し、該当するkintoneレコードの情報を表示します。
ログインページ以外共通のベースページにはナビゲーションも設け、検索やボタンのクリックによって現在の画面と関係なく必要な機能へ移動できるようにしました。
タスクや担当者ごとに別々の画面を大量に作らなくても、渡すパラメーターを変えることで共通のタスクページ、メンバーページとして設定できます。
ポイント③ タスクへのコメント投稿
タスクページでは、内容や進捗を確認するだけでなく、コメントを投稿できます。複数行の文字列入力と送信ボタンを配置し、送信時にタスクコメントアプリへレコードを追加する形にしました。
コメントには対象タスクと投稿者を紐づけます。新規登録時には、同じタスクの最新コメントとしてコメント番号を設定します。登録後にコメント一覧を再取得することで、投稿した内容を画面に反映させています。
やり取りをタスク単位で残せるため、進捗の確認と相談を同じ画面で行えます。
実際に作ってみて
今回の構築では、最初に以下の3点を整理しておくと進めやすいと感じました。
・どのkintoneアプリを使うか
・ページ間でどのような情報を受け渡す必要があるか
・ログイン中のユーザー情報をどの画面で使うか
特に、タスクIDや社員番号などのキーを事前に決めておくと、ページ遷移後のデータ取得がスムーズになります。
今後は、検索・絞り込み機能の充実や期限が近いタスクへのアラート表示、所属プロジェクトに応じた情報の閲覧制限なども実装したいと考えています。これらの機能を追加することで、さらに使いやすいサイトにできそうです。
実運用での注意
gusuku Everysiteの個別利用規約では、kintoneアカウントを持たない社内ユーザーが、エブリサイトを通じて4つ以上のkintoneアプリにデータを入出力することを制限しています。今回のような構成を実運用する際は、利用者の区分やkintoneライセンスの有無にご注意ください。詳しくはサポートサイトをご確認ください。
まとめ
今回、エブリサイトとkintoneを組み合わせることで、プロジェクトとタスクをチームで確認・更新し、タスクに関するやり取りも蓄積できるサイトを作成しました。利用者はWebサイト上で直感的に操作でき、管理者はkintoneに集まったデータを集計・分析に活用することができます。
チームや社外メンバーと情報を共有する仕組みの一例として、参考になればうれしいです。
アールスリーのブログでは他にもエブリサイトの活用事例を紹介しているので、ぜひチェックしてみてください。
アールスリーのシステム開発サービス「キミノマホロ for kintone」ではエブリサイトの構築支援も行っています（ロ-7 gusuku Everysite設定支援）。「こういうサイトが作りたいけど設定が難しそう…」という方はぜひ一度ご相談ください！
必要なものを、必要なだけ。
業務改善の新しいカタチ。
kintoneを活用した業務改善・システム開発サービス
kintoneを活用した業務改善・システム開発サービス
今回作成したデモサイトは、準備が完了し次第「活用の泉」サイトで実際に操作いただける形で公開予定です。様々なエブリサイトの活用例が紹介されているので、ぜひ訪れてみてください。
それでは！
社外もチームだ！
エブリサイトで社外DXを！
gusuku Everysite（グスク エブリサイト）は、kintoneをはじめとした複数のサービスと連携し、そのデータを自由なレイアウト・挙動でWebサイトとして入出力できるフロントエンド開発サービスです。
投稿者プロフィール
- システム開発グループです。音楽が好きです。
