こんにちは無職ニートエンジニアのエッジです。
前回はBaSSのSupabaseと決済サービスのStripeについて書きました。
今回は、CMSとデザインをどのように作ったか書いていこうと思います。
ちなみに、作ったページはこちら ↓
CMSはcontentfulを採用しました
Contentfulを採用した理由
- HeadlessCMS
- HeadlessCMSの中で一番使っている人が多い
- ダッシュボードから簡単に記事編集できる
1. HeadlessCMSとは？
まずCMSはContent Management Systemの略で、コンテンツ（ファイル、画像）を管理するためシステムの事を指します。
CMSというと大体イメージするのが、ブログとかウェブメディアだと思います。
従来のCMS（Woedpressなど）では、ページ構造やデザインをすべてテンプレートとしてCMSの中に保存する必要がありましたが、
HeadlessCMSでは、コンテンツのモデルに基づいて作られたデータなどを取得して、その情報をもとに描画するので、ページのレイアウトやデザインの幅が広いのが特徴です。
コンテンツをAPIで持ってきて、デザインはその都度決められるので、serverlessなアプリケーションとの親和性が高いです。
2. 恒例のgoogle トレンド
日本だとまあまあですが
世界だとこんな感じ中国でstrapiが多く使われていて、意外と人気だので今度使ってみようかな。
3. ダッシュボード
ダッシュボードはすごい見やすいです。
webhookとかも簡単に設定できるのは良かったかな
投稿の編集時や公開時にVercelへの自動ビルドが走るように設定するのが、ボタン一つでできます。
4. microCMSとの比較
microCMSは国産のheadlessCMSで日本語対応していますが、Contentfulは対応していないので、英語が苦手な人は厳しいかもしれないです。
ただダッシュボードの見やすさでいうとContentfulの方がユーザーフレンドリーな感じはしました。
一方で、Contentfulはカテゴリー見たみたいなものとしてtagというものがあるのですが、
- カテゴリーを一気に追加できなかったり
- 毎回開くたびにプライベート設定なので公開設定に変えなければいけなかったり
して少し不便な点もありました。
5. 微妙だった点
- 初期設定が
wordpressより多くて面倒 - オブジェクトやデータベースの知識がないと
contentとcontent modelの理解に時間がかかる
ぐらいですかね～
headlessCMS全般に言えることですが、
content modelを最初に自分で作らないといけないのが、PCとか得意じゃない人には厳しいのかな～と思いました。
（自分もプログラミング始めたばかりだったので、少し時間がかかった）
6.使っている中で良いと思った点
APIを使うとにSDKがしっかり整備されていて、ほしい情報を的確にjavascriptで取得することができたのですごいいいなと思いました。
import * as contentful from "contentful-management";
export const contentfulClient = contentful.createClient(
{
accessToken: process.env.CONTENTFUL_MANEGMENT_ACCESS_TOKEN,
},
{
type: "plain",
defaults: {
spaceId: process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID,
environmentId: "master",
},
}
);
export const createAssets = (environment) =>
environment
.createAsset({
fields: {
title: {
"ja-JP": title,
},
description: {
"ja-JP": discription,
},
file: {
"ja-JP": {
contentType: "image/jpeg",
fileName: title + ".jpeg",
upload: url,
},
},
},
})
.then((asset) => asset.processForAllLocales())
.then((asset) => {
asset.publish();
return asset;
});
export const getTags = (environment) =>
environment.getTags().then((tags) => {
let newTags;
if (tags.items.length !== 0) {
newTags = caption
.substr(caption.indexOf("#", 0) + 1)
.split("#")
.filter((i) => tags?.indexOf(i) === -1)
.map((tag) => {
const sys = {
sys: {
type: "Link",
linkType: "Tag",
id: tag,
},
};
return sys;
});
}
return newTags | tags.items;
});
export const getAuthor = (environment) =>
environment.getEntry("6754QhfY8WKPNa5Y479a0r");
次はデザインについて
デザインの流れ
- おしゃれなサイト何個か持ってくる
- それらの要素を組み合わせる
- adobe DXで微調整
1.おしゃれなサイトを持ってくる
自分はこのサイトを使って探しました
Awwwardsアワーズっていうのかな？
受賞作品が載っていて、いろんな人からの評価をもとに点数がつけられていて、ページ数も多く検索も容易なので、おしゃれで今風のデザインを知りたいときはおすすめです。
2.それらの要素を組み合わせる
今回は白と黒で作ったサイトにしたかったので、白と黒のreactで絞り込みました。
実際に参考にしたサイト↓
ほぼ一番上のサイトのパクリみたいになってしまったので、次から気を付けます！
（著作権的にアウトかもしれない（笑））
3. adobe DXで微調整
文字考えて、画像を作って、載せるだけ
デザインは難しそうに見えますが、大体どっかからのアイデアの組み合わせみたいなものだと思うので、
そんなに気にせずにちょっとアレンジしてパクります。（著作権には気を付けよう！）
adobe DXでデザインを作るのは簡単なのですが、最初にやるとどうしても文字で書くなりがちで余白を少なくしがちになってしまうので、
余白をちょっと多いかな？？ってぐらいで作るとちょうどいい感じになると思ってます。
まとめ
一応、稚拙な文章ではありますが、今回作ったホームページの要素についてあらかた整理して書けたかなと思っています。
間違っているところや、おかしいところがあればぜひご指摘ください、コメントしてくださると喜びます。
今回は、自分のために情報を整理ための記事なので、あまりエンジニアの方には役立ちずらい記事になっていて、LGTMがほとんどつかなかったので反省しています。
もう少し、役に立つ情報を記事にできるように日々精進したいと思います。
次回はLINEのLIFFアプリを使ってLINE予約のアプリを作ったのでそのことについて書いていきます。
あまって、Reduxについて書いていなかったので次回はReduxについて書いていこうと思います。
ではまた～