---
title: Kurocoビギナーズガイド
description: 本チュートリアルでは初めてKurocoを利用する方向けに、フリートライアル申込からNuxt.jsを利用したサイトの表示までの手順を説明します。
---

## はじめに
KurocoはAPIファーストのヘッドレスCMSであるため、フリートライアルに申し込んだだけではサイトの表示はされません。  
本チュートリアルでは初めてヘッドレスCMSのKurocoを利用する方向けに、フリートライアル申込からサイトの表示までの手順を説明します。

ここでは例として、サービスの紹介サイトを下記の構成で作成します。  

|項目   |サービス  |用途|
| :--- | :--- | :--- |
|バックエンド|[Kuroco](https://kuroco.app/ja/)|コンテンツ(画像やテキスト、メンバー情報等)を管理し、APIを作成します。|
|ホスティング|[KurocoFront](/ja/docs/about/kurocofront/)|GitHubで管理したコードをサーバーにビルドし、ユーザーがブラウザから表示できるようにします。|
|ソースコード管理|[GitHub](https://github.com/)|フロントエンドを表示するためのソースコードを管理します。|
|フロントエンド|[Nuxt.js](https://nuxtjs.org/ja/)|サイトを表示するフロントエンド部分のコードを記述します。|

今回はヘッドレスCMSの理解を目的としてトップページのみの作成としますが、慣れてきたらフォームやブログページ、多言語対応等、ドキュメントを見ながら追加してみてください。

## NuxtプロジェクトをKurocoFrontへデプロイする
### Kurocoのフリートライアル申込
早速、[Kurocoのフリートライアル](https://kuroco.app/ja/free_trial/) に申し込みます。  
リージョンを選択し、サイトキーはお好きな文字列を入力ください。  
ここではリージョンを「アジア(東京)」、サイトキーを「sample-service-site」としました。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/87ee109095596f1174252d60583eb8e8.png)
登録したメールアドレスに、「Kurocoサイト登録が完了いたしました！」のメールが届きます。  
メールに記載されたURLをクリックするとKurocoのログイン画面が表示されるので、登録したメールアドレスとパスワードでログインします。  
![fetched from Gyazo](https://t.gyazo.com/teams/diverta/faa1039782ce49ac43efa0fbf71ba1fb.png)
ログインすると、Kuroco管理画面が表示されます。  
管理画面に[サイトを表示]のリンクがありますが、現時点ではクリックすると「404 Not Found (DEPLOYMENT NOT FOUND)」が表示されます。こちらはフロントエンドが作られていないためなので問題ありません。   
![Image from Gyazo](https://t.gyazo.com/teams/diverta/94892810d6231a4056868e7b1a7fc013.png)

Kurocoの管理画面は一旦このままで、次にフロントエンドの構築に進みます。 

### 事前準備
Nuxt.jsはnpxのコマンドを使ってインストールしていきます。  
ターミナルを開き、`npx -v`のコマンドでバージョンの確認ができますので、インストールされていない場合は[node.js](https://nodejs.org/ja/download/)をインストールしてください。  

また、[GitHub](https://github.com/)のアカウントが必要になるので、持っていない場合は登録ください。  

### Nuxt.jsインストール

:::info
本チュートリアルではNuxt.js のバージョン v2.15.8 を利用しています。
:::

準備ができたらプロジェクトを管理する任意のディレクトリで下記のコマンドを実行します。  
`sample-service-site`の部分はお好きな名前に変更してください。

```
npx nuxi@latest init sample-service-site
```

次に、複数の質問が聞かれるので回答します。 今回は下記のように入力しました。

```
Which package manager would you like to use?
npm
Initialize git repository?
Yes
```
全ての質問に回答するとsample-service-site ディレクトリが作成されますので、作成されたディレクトリに移動します。

```
cd sample-service-site
```

下記実行し、インストールしたNuxt.jsの表示を確認します。

```
npm run dev
```

ターミナルに表示されたURL `http://localhost:3000/` にアクセスすると、下記の画面が確認できます。  

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/6cdb1560be6da8dcc2b5fef9632cd7a2.png)

以上でNuxt.jsのインストールとローカル環境での表示ができました。続いてこちらのページをweb上で表示できるようにしていきます。  

### GitHubリポジトリの準備
[GitHub](https://github.com/)にログインして、リポジトリを作成します。リポジトリの準備ができたら下記のコマンドを順に実行します。  

```
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/GitHubユーザー名/リポジトリ名.git
git push -u origin main
```

:::note
Nuxt.jsをインストールしたディレクトリのまま実行するように注意してください。  
:::

:::caution
`GitHubユーザー名/リポジトリ名.git`の部分はご自身のアカウントの情報を使用してください。
:::

こちらの手順でNuxt.jsをインストールしたフォルダをGit管理化して、リモートリポジトリにファイルをプッシュできました。 

### GitHubとKurocoの連携
続いてGitHubとKurocoを連携します。  
Kurocoの管理画面から[KurocoFront]->[GitHub]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/a6e302e6751b17838e4ae45b89f39a82.png)

[GitHubリポジトリと接続する]をクリックします。  
![fetched from Gyazo](https://t.gyazo.com/teams/diverta/0962196e6c3f9d4592902a67fa7615f3.png)
GitHubへログインが求められますので、ログインをします。  
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/214c1957e75be4de2ea7bc01d10499ab.png)
ログインするとGitHubの画面が表示されます。  
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/d42942104b7b668e7d80c44696db4429.png)
「Repository access」より先ほど作成したリポジトリを選択します。  
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/afef17946cbde0c9d11433dcb08564a4.png)
:::tip
リポジトリ接続設定は後から変更が可能です。１つのアカウントで複数のKurocoを利用する場合は、KurocoのGitHub Appsは1つですので、ここで複数のリポジトリを選択することになります。  
:::

:::tip
接続できるリポジトリは管理者権限を持っているリポジトリのみになりますので、ご注意ください。  
:::

リポジトリを選択したら、「Save」をクリックします。  
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/1baf2798ac40f953e489b09040a5d1ce.png)
再度Kurocoへのログインを求められますので、ログインをします。  
![fetched from Gyazo](https://t.gyazo.com/teams/diverta/26486a7bc02153a291f73cb352f90284.png)
接続が完了すると、KurocoFrontの画面に遷移するので、プルダウンから対象のリポジトリを選択して[更新する]をクリックします。  
![fetched from Gyazo](https://t.gyazo.com/teams/diverta/10eff1221229bb98277274167f6dd729.png)
以上で、GitHubとKurocoの連携は完了です。

### デプロイ
GitHubで管理しているコードをKurocoFrontにデプロイすることで、`https://サイトキー.g.kuroco-front.app/`のURLでwebサイトの表示ができます。  

kuroco_front.json とYAMLファイル の2ファイルをNuxt.jsプロジェクトに追加します。  

|ファイル名   |保存するディレクトリ  |説明  |
| :--- | :--- | :--- |
|`kuroco_front.json`|`/public`|リダイレクトやBasic認証等の設定をするKurocoFrontを利用するために必要なJSONファイル|
|`build.yml`|`/.github/workflows`|GitHub Actionsのワークフロー設定を定義するためのファイル(YAMLファイル)|

それぞれファイルの中身は下記のようにします。

#### **/public/kuroco_front.json**
```json title="/public/kuroco_front.json"
{
    "rewrites": [
        {
          "source": ".*",
          "destination": "/index.html"
        }
      ],
    "redirects": [],
    "basic":[],
    "ip_restrictions":[]
}
```
Basic認証やIPアドレス制限等の設定は`kuroco_front.json`で行います。  

:::tip
Kuroco_front.jsonについての詳細は、FAQ -> [kuroco_front.jsonとは何ですか？](/ja/docs/faq/what-is-kuroco_front_json/) をご参照ください。
:::

#### **/.github/workflows/build.yml**  
ファイルの中身はKurocoFront画面のリポジトリフィールドで、Frameworkを`nuxt3`に設定した内容をコピーして入力します。  

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/0d86d6f1f58a8c634a8bd5d63c010db1.png)

GitHubのブランチが`main`以外の場合や、独自ドメインを利用するような場合は、ビルドコマンドやブランチ名などを調整しますが、本チュートリアルの場合はこのまま使用できます。  

:::tip
YAMLファイルについての説明や、書き方については下記ドキュメントをご確認ください。<br/>- [GitHub Docs GitHub Actions について学ぶ](https://docs.github.com/ja/actions/learn-github-actions)<br/>- [GitHub Docs GitHub Actionsのワークフロー構文](https://docs.github.com/ja/actions/reference/workflow-syntax-for-github-actions)
:::

ファイルの追加ができたら、変更をGitHubにプッシュします。プッシュするとGitHubActionが実行され、ビルド&デプロイされます。  

ビルド&デプロイ完了後に、再度管理画面の[サイトを表示]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/94892810d6231a4056868e7b1a7fc013.png)

今度は「404 Not Found (DEPLOYMENT NOT FOUND)」ではなく、先ほどローカル環境で確認したNuxt.jsプロジェクトの初期の表示が確認できます。  
![fetched from Gyazo](https://t.gyazo.com/teams/diverta/6cdb1560be6da8dcc2b5fef9632cd7a2.png)
以上でNuxt.jsの最初のページをwebサイトで表示できました。  

Kurocoでコンテンツの追加をし、Nuxt.jsでコンテンツの表示やデザインの調整をすることでサイトの構築ができます。  

## Kurocoで管理したコンテンツを表示する
サイト構築の準備ができましたので、Kurocoでコンテンツの追加と、Nuxt.jsでKurocoのコンテンツの表示の作業をしていきます。  

### コンテンツの登録
まずはKurocoの管理画面でコンテンツを定義します。  
[コンテンツ定義]をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/a91b31af30504a5fb6755030220422f0.png)

[追加]をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/fc79883afcc9ae8482db4aaa19c3d141.png)

コンテンツ定義編集画面でお好きな名前を入力し、コンテンツの項目を設定し、[追加する]をクリックします。  
今回は下記のように設定しています。

**全般**

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

**項目設定**

![Image from Gyazo](https://t.gyazo.com/teams/diverta/53f59bceba7ca013b29650576f9cc677.jpg)

:::tip
コンテンツのグループ化は項目のドラッグ&ドロップで実行します。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/57b1c28e7f863a65f8d50aab5a2fe723.gif)
:::

以上でコンテンツの内容を定義できましたので、次はコンテンツを追加していきます。  
[コンテンツ]->[事業紹介]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/65de8b0ed30f53f7b4081c91364f7bfb.png)

[追加]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/0cd90b2f672c396fe9e6fdc1290940a2.png)

先ほど定義したコンテンツの項目が表示されますので、画像やテキストなど、コンテンツを入力して[追加する]をクリックします。  
今回は下記のように登録しています。

<a href="https://diverta.gyazo.com/a5cf37e536c5660c8459acf3129e261a" className="no-zoom" target="_blank" rel="noopener noreferrer"><img src="https://t.gyazo.com/teams/diverta/a5cf37e536c5660c8459acf3129e261a.png" alt="Image from Gyazo"/></a>

追加したコンテンツ定義のID(7)とコンテンツのID(3)は後ほど利用するのでメモしておきます。  

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

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

### APIの登録
続いてAPIの登録をします。 
Kurocoの管理画面から[API]->[Default]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/e8c4d0feec6c71fdd343c4a161415165.png)

[追加]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/812f341dd9c83c52105da22bf18a5fa9.png)

タイトル、版、説明を入力して[追加する]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/d87d6fc076c17a1f908a63bca84f9646.png)

追加したAPIに遷移します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/6dda0a93616285f02f4af2bf22019b00.png)

続いて、セキュリティの設定をします。  
[セキュリティ]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/baa66dc6e3cda1184cfea62afce306c3.png)
[Cookie]を選択して[保存する]をクリックします。  
![fetched from Gyazo](https://t.gyazo.com/teams/diverta/6dcf2c3d012ebf03155f8926f0695379.png)
:::caution
APIのセキュリティにCookieを利用した状態で、今後もし独自ドメインを適用する場合は、フロントエンドドメインとAPIドメインを準備する必要があります。  
(WebブラウザによってはサードパーティーCookieが利用できず、ログインできない可能性があるため。)  
参考記事:[Google、ChromeでのサードパーティーCookie廃止を2023年まで延期）](https://www.itmedia.co.jp/news/articles/2106/25/news067.html)
:::

続いて、CORSの設定をします。   
[CORSを設定する] をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/55acc9f3c6c67a40fef57c324d8ebc48.png)
CORS_ALLOW_ORIGINSの [Add Origin] をクリックし、下記を追加します。
- `http://localhost:3000/`
- フロントエンドドメイン (ここでは`https://sample-service-site.g.kuroco-front.app/`)

CORS_ALLOW_METHODSの [Add Method] をクリックし、下記を追加します。
- GET
- POST
- OPTIONS

設定できたら[保存する]をクリックします。  
![fetched from Gyazo](https://t.gyazo.com/teams/diverta/7be9be42bfd7df3edf2b7d2f25b56e93.png)
次に先ほど作成したコンテンツ「事業紹介」を取得するエンドポイントを作成します。  
[新しいエンドポイントの追加]をクリックします。    
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cc5954932ba41cbeda755dbfb80add84.png)
下記のように設定し、[追加]をクリックします。

| 設定項目 | 設定 ||
| :--- | :--- | :--- |
|パス|service||
||有効/無効|有効|
|モデル|カテゴリー|コンテンツ|
||モデル|Topics|
||オペレーション|Details|
|ext_group|チェックを入れる||
|topics_group_id|作成したコンテンツ定義のグループID(7)||

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

以上で、Kuroco側の設定は完了です。  
作成したエンドポイントにアクセスすると、エンドポイントからのレスポンスが確認できます。  
今回の場合は{topics_id}の部分にコンテンツのIDを入力して、下記のURLで確認ができます。  
`https://sample-service-site.g.kuroco.app/rcms-api/3/service/3`

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/efa03ca32459bf8ed0963a259ab35e72.png)
こちらのレスポンスを取得して表示するようにフロントエンドの記述を書くことでサイトを構築できます。  

:::tip
URLは管理画面URL(`sitekey.g.kuroco-mng.app`)やフロントエンドドメイン(`sitekey.g.kuroco-front.app`)ではなく、APIドメイン(`sitekey.g.kuroco.app`)になります。
:::

:::tip
APIレスポンスを確認する方法は下記のチュートリアルをご参照ください。<br/>- [Swagger UIを利用して、コンテンツのデータ構造を確認する](/ja/docs/tutorials/using-swagger-to-check-the-structure-of-data/)
:::

### nuxt.config.tsファイルの調整
フロントエンドの具体的なページの記述を始める前に、KurocoのAPIドメインを登録します。  
また、KurocoFrontで静的にホスティングするために、サーバでの動的レンダリング機能をオフにしておきます。  

`nuxt.config.ts` の全文は下記のようになります。

```js title="nuxt.config.ts"
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ssr: false,
  runtimeConfig: {
      // Public keys that are exposed to the client
      public: {
          apiBase: 'https://sample-service-site.g.kuroco.app'
      }
  },
})
```

### app.vueの調整
デフォルトではNuxt3のウェルカムページが表示されるように設定されているので、pagesディレクトリのページが表示されるようにapp.vueを以下のように更新します。

```markup title="app.vue"
<template>
  <div>
    <NuxtPage />
  </div>
</template>
```

### index.vueの調整
次に、フロントエンドの記述を調整します。pagesのディレクトリにindex.vueを以下の内容で作成してください。  

`<script>` `</script>`の部分で、エンドポイントからのレスポンスを得て、`<template>` `</template>`の部分でレスポンスの内容を表示するhtmlを記述しています。 

`/rcms-api/3/service/3`の部分はご自身のエンドポイントのURLに変更してください。  

```markup title="/pages/index.vue"
<template>
    <div>
        <img :src="response.details.ext_1.url" width="800">
        <div>{{ response.details.ext_2 }}</div>
        <div>{{ response.details.ext_3 }}</div>

        <div v-for="n in response.details.ext_4" :key="n.slag">
            <img :src="n.ext_4.url" width="400">
            <div>{{ n.ext_3 }}</div>
            <div>{{ n.ext_5 }}</div>
            <div>{{ n.ext_6 }}</div>
        </div>
    </div>
</template>

<script setup>
const config = useRuntimeConfig();

const { data: response } = await useFetch(
    `${config.public.apiBase}/rcms-api/3/service/3`,
    {
        credentials: 'include',
    }
);
</script>
```

ターミナルで`npm run dev`を実行し、
`http://localhost:3000/`にアクセスしてローカル環境で表示の確認をすると、下記のようにKurocoのコンテンツ表示が確認できます。  

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/2fd084ffcf40abe94d38248fa960a3b7.png)

:::tip
Kurocoをお申込みいただいたタイミングによっては、各項目のレスポンスが`ext_1`ではなく、`ext_col_01`となる場合があります。  
うまくいかない場合は Swagger UIでレスポンスをご確認ください。
:::

### デプロイ
ローカル環境での変更をGitHubにpushすると、フロントエンドドメインでの表示にも反映されます。

`/pages/index.vue`の変更をGitHubにpushします。  
デプロイが完了すると、下記のようにWebサイト上でも表示の確認ができます。 

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/69bbd996cd6047d41f607fcdefb0d746.jpg)

以上でKurocoのコンテンツの内容をAPIで出力・取得し、webサイト上に表示できました。  

## デザインを調整する
最後にwebサイトのデザインの部分を調整します。  
こちらは完全にフロントエンドでの作業になるので、普段利用しているCSSフレームワークを利用したり、外部のサービスと連携したり、ご自由に構築していただくことができます。  

本チュートリアルでは`index.vue` でスタイルの調整をして次のようにしました。  

```markup reference title="/pages/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxt3/beginners-guide.vue
```

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/2a16294ccf428f758747337e22dc6791.png)
https://sample-service-site.g.kuroco-front.app/


## 参考
本チュートリアルではヘッドレスCMSの理解を目的として、トップページのみ作成をしました。  
以下のドキュメントを参考に是非他のページも作成してみてください。  

- [KurocoとNuxt.jsで、コンテンツ一覧ページを作成する](/ja/docs/tutorials/integrate-kuroco-with-nuxt/)
- [KurocoとNuxt.jsで、コンテンツ一覧ページにページネーションを実装する](/ja/docs/tutorials/splitting-the-contents-list-into-multiple-pages)
- [KurocoとNuxt.jsで、多言語サイトを構築する](/ja/docs/tutorials/building-a-multi-language-site/)
- [KurocoとNuxt.jsで、フォーム画面を構築する](/ja/docs/tutorials/setting-up-inquiry-forms/)
- [KurocoとNuxt.jsで、新規会員登録画面を構築する](/ja/docs/tutorials/setting-up-registration-form/)
- [KurocoとNuxt.jsで、ログイン画面を構築する](/ja/docs/tutorials/integrate-login/)
- [KurocoとNuxt.jsで、プレビュー画面を構築する](/ja/docs/tutorials/integrate-preview-page/)
