Open2021/01/20にコメント追加22

新年なのでStrapiでヘッドレスCMS入門するか～

生成部はNode.js、フロントエンドはReactで動く静的サイトジェネレータの Gatsby でIT技術に関係あったりなかったりするブログ (https://blog.hppd.dev) を作ってるのだが、現在記事はブログのソースと一緒こたにGitHub上で管理されている。

コンテンツをGitで管理してGitHubで同期させる方式には 下書きを端末間で共有するのにcommit&pushが必要 という問題がある。ラップトップ゠デスクトップ間同期がだるいのももちろん、(UserLAnd を導入した Android でもなければ) スマホから作業することもできない。

この問題をどうにかするために ヘッドレスCMS を導入しようとしている。CMS (Content Management System) はコンテントをマネジメントするシステム、人類にも平易に理解できる言葉で言うと、テキストファイルとか画像とかをぽいするといい感じのWebサイトになってでてくる魔法の函のことである。

代表的な CMS は WordPress。使ったことはないが個人的にあまりいい印象を持たされていない。ヘッドレスでない (頭付きの) CMS はビューも持っているため鯖にデプロイしてブラウザでアクセスして編集すれば非エンジニアでもどうにか使えるが、ビューも持っているためそこ周辺の改造性が低い。セルフホスティングできない (≒OSS でない) ものも含めるので、Note, Qiita, Zenn とかも CMS に含まれるらしい。

ヘッドレス CMS の頭とはビュー部分であり、そして首は Web API である。ヘッドレスCMSならビューは好きに作れる。へえ便利。ただしクライアントから API を叩かせるとAPIキーが漏れるのでサーバサイドレンダリング (SSR) か静的サイトジェネレーション (SSG) するとよいらしい。

記事をGitHub上で管理するのはエンジニアのおれがやるだけなら何も問題はないが、実際にウェッブのエンジニアになってブログライクなホームページシステムをデベロップメントするとして、入稿をするだけの人間にGitを使わせるシステムを納入ことはたぶんないと思う。Gitがわかる変態がしいたらおれじゃなくてそいつに全部作らせればよい。あとGitの使い方を教わりに行く。ともかく実務で使うことになるであろう技術を素振りしたいというだけ。

なぜ Strapi にしたかというとオープンソースだから。

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

http://localhost:1337/admin/ に誘導され、そこで管理者ユーザーを登録するのだが、管理者パスワードの要件がsubmitボタンﾎﾟﾁｰするまでわからないのが辛すぎ。つらい。OSSって言ってたしIssue投げればいいのか？

てきとうに「password validation」「register validation」とかで検索してみたがそれっぽいのは見つからなかった。

おめでとうございます！ 初期管理者としてログインしました。Strapiが提供する強力な機能を探すために、 まずはコンテンツタイプを作ることをオススメします。

コンテンツタイプを作ればいいらしい。コンテンツタイプがなにかぐらい説明くれよな～頼むよ～というか、Restaurant Content Type と Categories Content Type というのがある。前者にコンテンツを入れて後者にカテゴリを入れるっぽい？

~~Content Type~~ Field Type、~~思ってたより~~ 単位が細かい。DateとかTextとかRich TextとかBooleanとか。

Contentにfieldsが生えてるってことみたい。fieldsはfrontmatterみたいなノリでタイトルとかタグとか書きたくなるけど記事本体もfieldとして生やすわけだ。当たり前といえばそうか。当たり前っちゃ当たり前だな。バックエンドはなんかDBが生えててそこにデータがあるわけだし。

エディタの挙動がいろいろと微妙すぎる…なんというかテキストエリア内の下側のテキストがまだ打ち込まれてない部分をクリックしたときの振る舞いが慣れ親しんだものと違ってすごい困惑してる

テキストを全体選択するのに右下から左上に一気にドラッグすることがある (トラックボール使いなので^Aより楽な) のだが、最初にクリックする右下部分はたいていテキストエリア右下端なのでへんな挙動に巻き込まれて頭が狂う。

ふつうTwitterとかそれこそZenn scrapの投稿するフォームってテキストエリアが幅いっぱい高さいっぱいまで広がってるもんなんだけど、Strapiだとそもそもtextareaじゃないっぽい。そして高さが現在入力中のテキストぶんしかないのでそれより下は範囲外になっている。そのため下の方をクリックしてもフォーカスが動かない。

フォーカスは移動はしないが外れるわけでもないというのが本当に謎だ。

https://draftjs.org/

draft.jsを使っているらしいがそんなにひどい感じはしない…なんでだ。

ソース見に行ったらReactでクラスコンポーネント生やしててひえ～ってなった。

テキストエリアより広いラッパコンポーネントがフォーカスだけ拾ってるのが悪い。テキストエリアの当たり判定をネガティブマージンで広げればよさげ。