はじめに
今回はKurocoを使って構築し、Kurocoのイメージをつかんでいきたいと思います。ですが、API初心者の私にはKurocoで提供されているクイックガイドを使うこともあまり理解ができませんでした。そこで理解できるように落とし込むためKurocoの一部機能を利用したものを構築する過程を掲載としたいと考えております。
※一切KurocoのPRではありません。自己学習です。
ブログ投稿ページを作ってみた
Kuroco公式で無料で紹介しているクイックガイドを参考に進めました。Reactを使用しています。Reactも初心者のため勉強中です。
今回、フロント側は
今回実装する機能
- コンテンツ作成
- 一覧ページ、詳細ページ表示
(STEP1) 環境構築
-
アカウント作成
アカウント登録
登録後、送られてくるメールに記載されているURLで管理画面にログイン -
APIの設定
[API]→[Default]→[APIをエクスポート]→[＋追加]→[追加したAPI項目でインポート]- エクスポートで必要なものをチェックしエクスポートする(自作も可能)
- 追加でAPIの新たな項目を作る
- APIをインポートするで'現在のAPIへのインポート'を選択しインポートする
-
CORSの設定
[API]→[CORSを設定する]
- CORS_ALLOW_ORIGINS の [Add Origin] をクリックし'http://localhost:3000/'を追加
- CORS_ALLOW_METHODS に POST を追加
-
フロント環境準備
今回はReactを使用しました。Kurocoで紹介しているクイックガイドはNext.jsを使用してます。
ヘッドレスＣＭＳはいずれの言語でも構築可能のため、フロント側の環境設定手順については割愛します。
(STEP2) コンテンツ作成
[コンテンツ定義]→[＋追加]or[デフォルトをコピー]→[入力カテゴリーを編集]
- 今回はBlogを追加
[コンテンツ]→[Blog]→[＋追加]
- 記事追加
(STEP3) コンテンツ一覧を表示
-
フロント側の準備
- Blog.tsx(一覧ページ)とBlog>[id].tsx(詳細ページ)を用意
-
APIとコンテンツの紐づけ
- topics_group_id にコンテンツ定義で定義したトピックのIDを登録
- cnt は１ページ内に表示したい記事数を登録
-
Swagger UIで該当するAPI、今回は/rcms-api/7blog/listのプルダウンを開き「Try it」をクリックし何も中を記入せずに「Excude」をクリックし実行する。
-
- コンテンツので登録した記事の情報と紐づいていることを確認
- フロント側でAPI呼び出し、表示をする。今回は以下のように記述
- 前提として、envファイルで環境変数の設定を行う
const fetchBlogData = async ( page:number ) => { try { const response = await fetch( `${process.env.REACT_APP_PUBLIC_BASE_URL}/XXXXXXX?pageID=${page}`, { method: 'GET', credentials: 'include', }); const data = await response.json(); console.log(data) if (Array.isArray(data.list)) { setBlogData(data.list); console.log() // setTotalCnt(data.pageInfo.totalCnt); } else { console.error('Error fetching profiles data: Data.list is not an array', data); } } catch (error) { console.error('Error fetching profiles data:', error); } }; useEffect(() => { fetchBlogData(1); }, []);- 今回はコンテンツ内容をTypescriptで型を定義し表示。
- cssはTailwindCssを使用
<div className="w-[100%] flex justify-between gap-4"> {blogData !== null && blogData.map((blog) => ( <div key={blog.topics_id} className="mb-2 w-full"> <div className="flex justify-between items-end"> <p className="text-lg font-semibold">{blog.subject}</p> <p className="text-sm">{blog.ext_2}</p> </div> <div className="w-full h-[150px] mb-4"> <img src={blog.ext_3} alt="" className="w-full h-full object-cover" /> </div> <p>{blog.ext_1}</p> </div> ))} </div>- ルーティングでコンポーネントを実装し詳細ページに飛べるようにする。
(STEP4) 詳細ページ表示
- blog>[id].tsx を作成
- 親コンポーネントApp.tsxでimportし読み込みし書き記述で表示
<Route path="/blog/:id" element={<BlogDetails />} />
- 一覧ページでReact Routerを使用して、特定のURLにリンクするためのリンクを作成。
<Link to={`/blog/${blog.topics_id}`} >
- 以上の流れで一覧ページ、詳細ページの表示はできます。
最後に
KurocoでAPIを取得し一覧ページ、詳細ページの表示ができました。そのほかにもよくあるコーポレートサイトにあるような機能、ファーム作成、カテゴリー分けなどもできました。
今回、自分自身の学習のまとめとして記事作成してみましたが、コードなどより適切な書き方やご意見ありましたらご指摘ください。