このページでは、NILTOをはじめて使う方向けに、APIレスポンスの確認からサンプルサイトで表示するまで進めます。

このページでやること

• NILTOの管理画面からAPIレスポンスを確認する
• サンプルサイトをダウンロードして起動する
• サンプルサイトで記事が表示されることを確認する

APIレスポンスを確認する

まずNILTOの管理画面で、「記事」コンテンツのAPIレスポンスを確認します。

NILTOで「記事」など、確認したいコンテンツを開き、画面右上のメニューから[APIレスポンス確認］ を選択します。

APIレスポンス確認ダイアログが表示されますので、［実行］ボタンを押します。

ダイアログ内にレスポンス内容（JSON）が表示されます。

確認ポイント

レスポンス内で以下の内容が確認できればOKです。

• 各フィールドの入力内容が合っているか
• 各フィールドの入力内容を変更したとき、レスポンスの内容が変更されているか

NILTOのコンテンツをサンプルサイトで表示する

ではNILTOで管理しているコンテンツを、あなたの環境でサンプルサイトを構築して表示させてみましょう。

Next.jsで作成した簡単なサンプルサイトを用意しておりますので、以下のリンクからダウンロードしてお試しください。

サンプルサイトダウンロード

Node.jsのインストール

公式サイトからNode.jsのLTS版をダウンロードし、インストーラーの指示に従いインストールを実行します。

Node.js — Download Node.js®
https://nodejs.org/en/download

ステップ1. APIキーを設定する

APIキーの取得

NILTOのサイドメニューから「スペース設定 > APIキー」を選択。

「ドラフト権限付き」を選択し、トークンをコピーしてください。

環境変数にAPIキーを貼り付け

ダウンロードしたファイルの中にある.env.exampleを.envにリネームしてください。

次にファイルを開き、以下のようにNILTO_API_KEYに、コピーしたAPIキーを入力し、保存してください。

NILTO_API_KEY=<APIキーを貼り付け>

ステップ2. 必要なパッケージをインストールする

ターミナルを起動する

ターミナルを開き、以下のようなコマンドでサンプルサイトがあるフォルダに移動してください。

Windowsの場合：Powershellもしくはコマンドプロンプトを起動
Macの場合：ターミナルの起動

cd <ダウンロードフォルダまでのパス>/nilto-sample-site

移動できたら以下のコマンドで必要なパッケージをインストールします。

npm install

インストール後、以下のコマンドでサンプルサイトを起動します。

npm run dev

4. ブラウザでサンプルサイトを開く

ターミナルにhttp://localhost:3000などのURLが表示されるので、選択してブラウザで開いてください。

これでサンプルサイトが確認できました。

さいごに

以上で、NILTOのコンテンツをAPI連携してローカルのサンプルサイトで表示するところまで完了しました。
サンプルサイトの設定は、APIキーを差し替えるだけで試すことができます。
ぜひ記事や著者の追加や変更が、サンプルサイトに反映される流れを確認してみてください。