メインコンテンツまでスキップ

Kurocoを利用したプロジェクトの進行イメージ

本ドキュメントでは、Kurocoを利用したプロジェクトの進行イメージについて説明します。

今回は会員制社内ポータルサイトを構築する場合を想定し、実際にプロジェクトをどのように進めるのか、必要なツールは何か、それぞれの対応内容と役割は何かをまとめました。プロジェクトの進め方の流れの参考としてご利用ください。

注意

実際には案件によって仕様やプロジェクトメンバー、ツールが異なります。あくまでも参考としてご確認ください。

案件概要​

今回は、下記案件を想定しています。

開発するWebサイトの仕様​

  • 会員制社内ポータルサイト構築
  • 新規ドメイン取得

利用するフレームワークについて​

本プロジェクトで利用するフレームワークです。

利用フレームワーク概要
Kurocoバックエンドシステム
VuetifyUIフレームワーク
FigmaFigma

作業範囲と担当者​

本プロジェクトの作業範囲と担当者です。

Noフェーズ作業範囲担当者
1プロジェクト設計要件定義・システム・UX設計プロジェクトマネージャー
デザイナー
2画面・UI設計プロジェクトマネージャー
デザイナー
3データ構造・API設計(Kuroco)バックエンドエンジニア
フロントエンドエンジニア
4デザインUIデザインデザイナー
5コーディングコーダー
6開発マイクロサービス開発バックエンドエンジニア
7API設定バックエンドエンジニア
フロントエンドエンジニア
8外部API連携バックエンドエンジニア
9フロントエンド構築(含APIの呼び出し)フロントエンドエンジニア
10環境構築バックエンドエンジニア
11データ移行バックエンドエンジニア
12テスト総合テストテスター
13動作検証(受入)顧客
14リリースリリースプロジェクトマネージャー
15運用サイト運用プロジェクトマネージャー
バックエンドエンジニア
フロントエンドエンジニア
ヒント

役割分担については、[営業資料] -> [プロジェクト役割分担表]をご確認ください。

管理ツール​

プロジェクト管理やコミュニケーションツールとして、次のサービスを利用します。

ツールは複数に分散するほど管理が煩雑になり、見落としのリスクを高めます。そのため以下のツールに限定し管理しています。

ツール用途概要
Googleスプレッドシート設計ページ一覧、ページごとの期限、ステータス管理、Issue管理などに利用します。
参考：WBS・タスクリストのサンプル
Backlog課題管理
議事録共有		課題管理やミーティング議事録として利用し、共有します。社内と社外向けをそれぞれ用意します。
Slackコミュニケーション連絡コミュニケーションツールとして利用します。
Google Meetコミュニケーションオンラインミーティングに利用します。

コミュニケーション計画​

クライアント企業および社内でのミーティングを次のように設定します。

項目概要参加者頻度
キックオフプロジェクト開始時に開催します。全メンバー１回。プロジェクト開始時
定例ミーティング(クライアント)クライアント企業との進捗管理ミーティングです。(※1)フェーズ毎該当メンバー週１回
定例ミーティング(社内)社内メンバー向けの進捗管理ミーティングです。社内メンバー週1回
運用レクチャークライアント向けの運用方法のレクチャーです。全メンバー1回。運用フェーズ

※1. 定例ミーティングでの議題内容​

定例ミーティングの主な内容は次の通りです。

  • 仕様の確認
    • 仕様に関する不明点の確認
    • Kurocoの実装方法の提案
  • 進捗確認
    • スケジュール、作業状況確認、残課題の確認
    • 作業が遅れている場合は、疑問点や問題点について具体的に確認

1. 要件定義・システム・UX設計​

要件定義・システム・UX設計は、次のような手順で行います。

サイトマップ作成​

Googleスプレッドシートを用いて、サイトマップを作成します。これを用いて、クライアント企業とページや機能の過不足を確認します。

ページ単位での構成要素の定義​

作成したサイトマップをベースに、各ページごとの構成要素を定義、確認します。ページをまたがって共通化できる部品があれば、グループ化して定義します。

動作環境の確定​

サイトの実行動作環境についてクライアント企業と確認します。

2. 画面・UI設計​

ワイヤーフレーム制作​

サイトマップ・ページ構成要素をもとに、Figmaを利用してワイヤーフレームを制作します。

3. データ構造・API設計(Kuroco)​

データ構造​

Kuroco管理画面で設定するデータ構造を設計します。

  • コンテンツ定義
  • グループ設定
  • メンバー項目定義

参考：​

API設計​

Kurocoを用いてAPI設計をします。まずページごとの構成要素に基づいて、必要なAPIを洗い出します。

洗い出したAPIはGoogleスプレッドシートにて、API一覧としてまとめます。また、GoogleスプレッドシートのPageListに、そのページで利用するAPIのエンドポイントを記載します。

この時、ワイヤーフレーム上に、どのAPIを利用するのか記述しておきます。これはフロントエンド担当者の役割です。また、API仕様の管理はバックエンド担当者の役割になります。

4. UIデザイン​

Figmaで作成したワイヤーフレームは、そのままデザインにも利用します。

作成後、デザイン担当者とクライアント企業を含めてミーティングを行います。その際には、ページごとの要素や詳細な仕様について確認します。修正があった場合には、ミーティング時に修正した上で、その場で全員の確認と承認を得ます。

5. コーディング​

本案件ではVuetifyを利用して、静的にコーデイングを行います。

なお、挙動を伴うコンポーネントは使わず、APIで処理する方が良いケースもあります。API設計時に、コーディング担当者とAPI設計者の間で情報共有しておくと良いでしょう。

6. マイクロサービス開発​

デザインの承認が行われたら、開発フェーズに入ります。

Kurocoサイト登録​

Free Trialページより、Kurocoサイトの登録をします。

GitHubにて開発リポジトリ追加​

GitHubに開発リポジトリを追加します。フロントエンドはGit管理をします。

参考: GitHub Docs リポジトリを作成する

KurocoFrontのホスティングとGit連携​

KurocoFrontを利用し、KurocoとGitHubリポジトリを接続します。

参考: GitHubからKurocoFrontへソースをデプロイする方法

Kuroco管理画面の設定をする​

Kurocoの管理画面にて設定します。

コンテンツ定義設定(拡張項目設定)​

データ構造・API設計(Kuroco)をもとにコンテンツ定義を設定します。

参考:

メンバー拡張項目設定​

グループの設定と会員メンバーの設定をします。

参考:

7. API設定​

API設計をもとにAPIの設定します。

参考:

8. 外部API連携​

Kurocoは外部サービスとの連携も可能です。外部サービスと連携することで、機能の幅が広がります。

SendGridの設定(メールの送信元として利用するメールアドレス)​

問い合わせなど、Webサイトの送信（From）で利用するメールアドレスを独自ドメインにする場合には、SendGridの設定が必要です。
SendGridの無料アカウントで設定可能ですので、SendGridのアカウントを取得し設定をお願いします。
※ メールアドレスドメインが @kuroco-mail.app で良い場合は、SendGridの設定は不要です。

参考: SendGrid連携方法

Google Analyticsの設定​

Google Analyticsと連携することでサイト分析ができるようになります。

参考: Google Analytics連携方法

9. フロントエンド構築(含APIの呼び出し)​

API呼び出し​

作成したAPIをフロントエンド側で呼び出します。

APIを実行する​

フロントエンドの開発に伴って、コンテンツをAPI経由で取得できるかテストしてください。 API実行の確認にはSwaggerの利用が可能です。

参考: Swagger UIを利用して、コンテンツのデータ構造を確認する

10. 環境構築​

リリースに向けての環境構築をします。今回はドメインの取得と適用をします。

なお、今回のプロジェクトは認証が伴うWebサイトの構築を想定しております。 その場合、フロントエンドドメインとAPIドメインを準備する必要があるので、２つのドメインを設定する前提で進めます。

WebブラウザによってはサードパーティーCookieの利用ができず、ログインできないエラーが発生する場合もあるためです。
参考記事:Google、ChromeでのサードパーティーCookie廃止を2023年まで延期

ドメインの取得​

下記２つのドメインを取得いただくようクライアントに依頼します。

ドメイン用途
www.CLIENT.appフロントエンドドメインとして利用します。
kuroco.CLIENT.appAPIドメインとして利用します。

ドメインの設定​

KurocoFrontへ独自ドメインを適用します。ドメインの設定には下記作業が必要です。

  • フロントエンドドメイン DNSの変更
  • APIドメイン DNSの変更
  • Kuroco管理画面にてドメインの設定

ドメインは下記ドキュメントを参考に設定してください。

参考: KurocoFrontで独自ドメインを利用する手順

11. データ移行​

Kuroco管理画面より、本番に必要なコンテンツ・ユーザーデータの登録をします。
データ登録は登録フォームより登録、またはCSVファイルで一括登録が可能です。

参考: CSVで記事を一括更新する

12. 総合テスト​

テストケースの作成​

開発が進んできた段階で、テストケースを作成していきます。

社内検証の実施​

テストケースに基づいて社内にて検証をします。
不備があればタスク管理に登録・修正し、再検証をします。

13. 動作検証(受入)​

クライアント企業にて検証の実施​

社内で総合テストが完了したらクライアント企業に検証を依頼します。
開発環境にプロジェクトをデプロイし、外部からでも検証できる環境を用意します。 その際にはIPアドレスやBasic認証を用いてアクセス制限を行います。

クライアント企業からフィードバックを受け取ったら、その内容に基づいて修正対応を行います。

参考: kuroco_front.jsonとは何ですか？ -> basic：Basic認証

14. リリース​

動作検証が完了したらいよいよリリースです。

認証解除​

IPアドレス制限・Basic認証を解除します。

15. サイト運用​

サイト公開と同時に運用フェーズが開始します。運用マニュアルを準備し、クライアント側で運用できるようサポートします。

サポート

お探しのページは見つかりましたか？解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。

フォームから問い合わせをする
Slackコミュニティに参加する