---
title: 会員制サンプルサイトを利用する
description: Kurocoを試してみたいという方向けに、弊社がオープンソースで提供している会員制サンプルサイトを利用する方法を説明します。フロントエンドの構築やデプロイを行うことなくKurocoでサイト構築ができるので、お気軽にKurocoを試すことができます。  
---

## 概要

Kurocoを試してみたいという方向けに、弊社がオープンソースで提供している会員制サンプルサイトを使用し、Kurocoを利用する方法を説明します。  
フロントエンドの構築やデプロイを行うことなくKurocoでサイト構築ができるので、お気軽にKurocoを試すことができます。  
3分程度の操作で会員制サイトを立ち上げることが出来ます。  
Kurocoで何ができるのか、どう動いているのかを理解するためにご利用ください。

### 作業の流れ
会員制サンプルサイトを利用してサイトを立ち上げる流れは以下の通りです。
- [Kurocoのアカウント登録](#kurocoのアカウント登録)
- [CORSの設定](#corsの設定)
- [会員制サンプルサイトの確認](#会員制サンプルサイトの確認)
- [コンテンツの追加](#利用例お知らせの追加)

### 前提条件
- この会員制サイトは、iOSのSafariでは動作しません。Google Chrome、Microsoft Edgeのご利用をお願いします。
- このドキュメントは東京リージョンでのご利用を想定しています。

## サイトを構築する
それではサイトの構築をはじめます。

### Kurocoのアカウント登録
Kurocoのアカウント登録します。[Free Trial](https://kuroco.app/ja/free_trial/)より必要項目を記入し「送信する」をクリックします。  
※リージョンは「アジア(東京)」を選択してください。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/9c725635780e4b1d6bb5a21cd497866d.png)

:::note
「サイトキー」「E-mail」「パスワード」は後ほど利用するので、メモをとっておいてください。
:::

登録したメールアドレスに登録完了のメールが届きます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/826fd3623e1cddac5c65b9080dcda189.png)
メール内に記載されている管理画面URLをクリックし、ログインを行うとKuroco管理画面が表示されます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/9b9c1248f25b80cc6d9c2fccf89cfcc2.png)

### CORSの設定
API画面より、CORSの設定をします。
[API] -> [Default]をクリックし、「CORSを設定する」をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/ffc309c0ebcea53a7637c262a3805195.png)

CORS_ALLOW_ORIGINSの「Add Origin」をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/26e7ba5a662bff8b195fe67020047f1f.png)
フィールドが追加されるので、`https://dev-nuxt-auth.g.kuroco-front.app` と記入し、「保存」をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/62379f134d531d518d4dbf43f8d54b9c.png)
以上でCORSの設定完了です。

### 会員制サンプルサイトの確認
次にサンプルサイトで動作するか確認をしてみます。

下記にアクセスします。

https://dev-nuxt-auth.g.kuroco-front.app/

ログイン画面が表示されるので、下記でログインします。
- Your sitekey：Kuroco登録時のサイトキー
- ID：kuroco登録時のE-mail
- Password：kuroco登録時のパスワード

全て記入し「Sign In」をクリックすると、ログイン後のトップページが表示されます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/af62c1c821486d525f33e202cb89413e.png)

以上で設定完了です。ご自身の会員制サイトが完成しました。  
フロントエンドはデモ用でKurocoFrontに用意されているものを利用していますが、バックエンドは今回、あなたが登録されたKurocoアカウントのものになるので、データはあなた独自のものになります。  

## 実際にサイトの更新などをしてみましょう

### コンテンツの確認

Kuroco管理画面より[コンテンツ] -> [Default]をクリックすると、テストデータが1件表示されています。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/795f6bd1017c4fa9d8e185acf8b81437.png)

こちらが、サイトトップページの「最新記事」に表示されているコンテンツです。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/76a30a5414e81b6bf23be5e238e16c06.png)

## 利用例：コンテンツの追加
Kurocoの管理画面より、[コンテンツ] -> [Default]より[追加]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/3a4cda92b6368d5352a3e267db67b540.png)

記事追加ページより、必要項目を記入し「追加する」をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/1fb1f542da28938ab7f3aceff8a14ecd.png)

記事を追加すると、サイトトップページの「最新記事」に追加した記事が表示されます。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/9be2dd1d16d7385df2db6f7c0004b6ca.png)

## さいごに

以上でサイト構築と更新作業確認の完了です。  
先ほど登録したKurocoをバックエンドとしてあなた独自の会員制サイトが完成しました。  
フロントエンドのデプロイを行わずにKurocoが利用できるので、サンプルサイトとしてお気軽にご利用ください。

また、このチュートリアルでは、フロントエンドを簡易にするため共通のものを利用しています。  
下記のリポジトリからソースコードをcloneしてKurocoFrontにデプロイすると、デザインや機能などを自由にカスタマイズできるサイトも簡単に構築できます。

https://github.com/diverta/front_nuxt_auth

ご自身のフロントエンドとコンテンツを設定する方法については、以下をご確認ください。
- [KurocoFrontについて](/ja/docs/about/kurocofront/)
- [チュートリアル：コンテンツ定義を作成する](/ja/docs/tutorials/adding-a-topics/)
- [管理画面マニュアル：コンテンツ](/ja/docs/management/content-structure-topics/)

ご不明点やご質問ありましたら[お問い合わせ](https://kuroco.zendesk.com/)よりご連絡ください。