会員制サンプルサイトを利用する

概要

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

作業の流れ

会員制サンプルサイトを利用してサイトを立ち上げる流れは以下の通りです。

前提条件

この会員制サイトは、iOSのSafariでは動作しません。Google Chrome、Microsoft Edgeのご利用をお願いします。

サイトを構築する

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

Kurocoのアカウント登録

Kurocoのアカウント登録します。Free Trialより必要項目を記入し「送信する」をクリックします。

Image from Gyazo

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

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

Image from Gyazo

メール内に記載されている管理画面URLをクリックし、ログインを行うとKuroco管理画面が表示されます。

Image from Gyazo

CORSの設定

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

Image from Gyazo

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

Image from Gyazo

フィールドが追加されるので、https://dev-nuxt-auth.g.kuroco-front.app と記入し、「保存」をクリックします。

Image from Gyazo

以上でCORSの設定完了です。

会員制サンプルサイトの確認

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

下記にアクセスします。

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

ログイン画面が表示されるので、下記でログインします。

  • Your sitekey:Kuroco登録時のサイトキー
  • ID:kuroco登録時のE-mail
  • Password:kuroco登録時のパスワード

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

Image from Gyazo

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

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

コンテンツの確認

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

Image from Gyazo

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

Image from Gyazo

fetched from Gyazo

利用例:お知らせの追加

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

Image from Gyazo

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

Image from Gyazo

記事を追加すると、サイトトップページの「最新記事」に追加した記事が表示されます。 Image from Gyazo

さいごに

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

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

https://github.com/diverta/front_nuxt_auth

ご自身のフロントエンドとコンテンツを設定する方法については、以下をご確認ください。

ご不明点やご質問ありましたらお問い合わせよりご連絡ください。

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