会員制サンプルサイトを利用する(所要時間3分)

想定作業時間:3分

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

前提条件

ブラウザについて

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

サイトを構築する

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

kurocoのアカウント登録

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

Image (fetched from Gyazo)

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

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

Image (fetched from Gyazo)

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

CORSの設定

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

Image (fetched from Gyazo)

CORS_ALLOW_ORIGINSの「Add Origin」をクリックします。 Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

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

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

下記にアクセスします。

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

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

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

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

Image (fetched from Gyazo)

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

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

コンテンツの確認

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

Image from Gyazo

利用例:お知らせの追加

Kurocoの管理画面より、[コンテンツ] -> [お知らせ]より「お知らせ追加」をクリックします。

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

お知らせを追加すると、サイトトップページの「Latest articles」に追加したお知らせが表示されます。 Image (fetched from Gyazo)

さいごに

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

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

https://github.com/diverta/front_nuxt_auth

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