📜

Strapi Quick Start Guide 日本語訳

2020/12/01に公開

(この記事は Strapi Advent Calendar 2020 2日目 の記事です)

Strapiにはクイックスタートガイド: strapi Quick Start Guide
https://strapi.io/documentation/v3.x/getting-started/quick-start.html
があるのですが、記述が英語のみだったので日本語訳版を作ってみました

これを機にStrapiに興味を持って頂く方が増えたら幸いです

Strapi(すとらーぴ)とは

まず、Strapiがどんなものか知らない方は Strapi Advent Calendar 2020 1日目に詳しく解説された記事があるので、そちらを見て頂ければと思います
https://qiita.com/watalucky/items/13bba3ece7ac7605bc57

クイックスタートガイド

このガイドでは3分以内でStrapiを起動して実行する準備を解説します🚀。

英語版の動画解説はこちら↓

ステップバイステップガイドについては、次の手順をご覧ください。このクイックスタートは、FoodAdvisorアプリケーションに非常に近いものです。

(続行する前に、Node.jsとnpmがマシンに正しくインストールされていることを確認してください。ここでYarn v1.2.0 +パッケージをインストールできます。)

1.Strapiをインストールして新しいプロジェクトを作成

以下のコマンドを実行するとStrapiのインストールとquickstartプロジェクトの作成が行われます
※ プロジェクトファイルが生成されるので、プロジェクト用のディレクトリに遷移してから実行してください

yarn の場合

yarn create strapi-app my-project --quickstart

npx の場合

npx create-strapi-app my-project --quickstart

2.管理者ユーザーを作成

ブラウザからhttp://localhost:1337/admin に遷移してください

フォームに情報を入力し、最初の管理者ユーザーを作成します

LET'S START で登録完了すると、以下の画面が表示されます

3.Content-Types: Restaurantを作成

サイドメニューの PLUGINS - Content-Types Builder に移動します

[nameフィールドの作成]

  • + Create new collection type リンクをクリック
  • Display nameにrestaurant と入力し、 Continueをクリック
  • + Add another Field ボタンをクリック
  • Text をクリック
  • Name フィールドに nameと入力
  • ADVANCED SETTINGS タブをクリックして、Required fieldUnique fieldにチェックを入れる

[descriptionフィールドの作成]

  • + Add another Field ボタンをクリック
  • Rich Text フィールドをクリック
  • BASE SETTINGS タブのNameフィールドにdescriptionと入力
  • Finish をクリック
  • Save をクリックし、Strapiの再起動を待ちます

一連の流れは以下のような感じ

4.Content-Types: Categoryを作成

サイドメニューの PLUGINS - Content-Types Builder に戻ります

  • + Create new collection type をクリック
  • Display name に category と入力し、 continue をクリック
  • +Add another field ボタンをクリック
  • Text フィールドをクリックします
  • BASE SETTINGS タブのNameフィールドにname と入力
  • ADVANCED SETTINGS タブをクリックし、Required fieldUnique fieldをクリック
  • +Add another field ボタンをクリック
  • Relation フィールドをクリック
  • 右側のCategoryドロップダウンをクリックして、Restaurantをクリック
  • 中央に表示されているアイコンの中から、many-to-many (多数 対 多数)を表すアイコンを選択。テキストがCategories has and belongs to many Restaurants と表示されていればOK
  • Finishをクリック
  • Saveボタンをクリックして、Strapiの再起動を待ちます

一連の流れは以下

5. Content Type: Restaurant のデータを追加

サイドメニューの COLLECTION TYPES - Restaurants に移動します

  • + Add New Restaurant ボタンをクリック

  • Nameフィールドに Biscotte Restaurant を入力

  • descriptionフィールドに以下のテキストを入力

  • Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.

  • Saveをクリック

エントリー一覧に登録したレストランが表示されるようになります

6. Content Type: Categories のデータを追加

サイドメニューのCOLLECTION TYPES - Categories に移動します

  • + Add New Category ボタンをクリック
  • NameフィールドにFrench Foodを入力
  • Restaurant (0) の右側にあるBiscotte Restaurant を選択
  • Save をクリック

一覧に French Food カテゴリーが表示されるようになります

  • + Add New Category ボタンをクリック
  • CategoryNameフィールドにBrunchを入力 (ここでは、Restaurants(0)の項目からBiscotte Restaurant選択しないので気をつけてください)
  • Save をクリック

一覧に Brunch カテゴリーが表示されるようになります

COLLECTION TYPES - Restaurants に戻ります

  • Biscotte Restaurant をクリック
  • 右側の Categories(1) から、Add an item... を選択し、レストランのカテゴリーに Brunch を追加します
  • Save ボタンをクリックします

ここまでやると、Categoriesに2種類のデータがリレーションされるようになります
image-20201201154813221 copy.png

ここまでが、リレーションフィールド型を使ったコンテンツ型間のリレーションを追加や接続の方法になります

7.役割と権限を設定

サイドメニューの SETTINGS - User's roles に移動します

  • Publicをクリック
  • Permissionsの下までスクロールしてRestaurant のセクションを探し、findfindone のチェックボックスにチェックをつける
  • 同じくCategory セクションのfindfindone のチェックボックスにチェックをつける
  • Saveをクリック

8.コンテンツを公開

デフォルトでは、作成したコンテンツはすべて下書きとして保存されます。あなたのコンテンツを公開するには以下の手順を行います

COLLECTION TYPES - Categories に戻ります

  • BranchカテゴリのDraftボタンをクリック
  • Publishボタンをクリック
  • Please confirm ダイアログで、Yes, publish ボタンをクリック
  • 同じようにFrench foodカテゴリとBiscotte Restaurant も行います

9.Content TypeのAPIを利用

なんということでしょう!以上の操作でお客様は

http://localhost:1337/restaurants からrestaurantsのリストが取得できるようになりました!

Quick Startは以上になります!
お疲れさまでした!

Discussion