blog

10月16日のてげWebはもくもく会にしていて、あらかじめheadlessCMSを触ることにしていたのでちょいとそのまとめを書いておきます。

そもそもheadlessCMSって何?

ざっくりというとサーバでページの組み立てをしてクライアントに送る仕組みじゃなくて、
サーバからはAPIに応じてデータを渡し、クライアントでページを組み立てる仕組みのようです。

こちらのQiitaをどうぞ。

学習コスト、開発コストが高いとのこと。むむ。

Netlifyなら1クリックでheadlessCMSを導入できる

WordPress、Jimdo、Tumblrなどの既存のCMSじゃなくて静的サイトジェネレーターというのがよく聞かれるようになって、どんなのがあるのかなと調べていて出てきたのが、StaticGen
これは静的サイトをホスティングできるNetlifyが運用しているWebサービスで1クリックでNetlifyに静的サイトを導入できるボタンがついてる。

StaticGenのナビゲーションに「Need a Static CMS?」とあり、クリックして表示されたのがheadlessCMSというWebサービスでした。こちらにもNetlifyに1クリックで導入できるNetlify CMSというのがありました。

Netlify CMSは静的サイトジェネレーターにGUIの管理画面をつけることができるということで、既存のCMSのかわりに導入できるのでは?と思った次第。静的サイトジェネレーターはDBを使わず、markdownファイルでページを作り出すようになってます。

さて、先に現時点の話をします。
扱うファイルが多すぎて、オリジナルテーマを作るのは結構ハードルが高い。

基本のテンプレートでのサイト作成はたしかに数クリックくらいだけどすぐできる(gitリポジトリの設定がある)。
ただ、GUIの管理画面の導入はあともう1手、Netlify Identityの設定が必要でした。
詳しくは逆引きマニュアル: Netlify CMS + Hugo + GitLabの導入方法の「Netlify Identityの設定」を参照。
ほんとにここを書いてくださった方に感謝。

これで無事GUIの管理画面も見られるようになりました。
ローカル環境では npm installnpm run start であっという間に環境ができあがり。
gitでリポジトリのmasterブランチにpushすれば自動でビルドがかかってNetlify環境に公開されます。

configファイルで設定をいろいろいじれるのはOK、でもテーマを作るのにはちょっとファイルが多すぎて、もくもく会では時間が足りず、むむむむむむ、となりました。

とはいえDBを介さないのでシンプルに作れるのは魅力的。
落ち着いたらもう少し突っ込んで手を動かしたいとおもったことでした。

blog

この本が発売されたのは去年の3月のことですが、ブログでなにもフォローしてなかったのでちらりと書いておきます。

Amazonでの評価も上々のようでなにより。シャレがきいてるのは編集者さんのお仕事。さすがですよね。

HTML5はそんなに追加してないけどCSS3はFlexboxやらCSS Gridも追加済みです。
CSSはCSS position:stickyConical GradientsScroll snapなどなど面白いのが目白押しなので、次の改定時に何を入れるのか楽しみ楽しみ。

blog

YouTube

Twitter

Instagram

Facebook

Map

blog, HTML5

HTML5&CSS3ポケットリファレンスの表紙

執筆を続けていたHTML5&CSS3ポケットリファレンス(技術評論社)がとうとう出版の運びとなりました。
2014年5月21日(水曜日)の発売です。つまり明日発売です。

この本に関わった皆さんに感謝!

原稿はHTML5の部分は森が執筆、CSS3の部分はスタイルシートポケットリファレンスを執筆された藤本壱さんとの共著です。

イラストはthe rocket gold starさん。絵がすっごくコミカルでかわいらしいので、本を開くたびになごみまくりです。

イラストのネタ出しは編集者さんが頑張ってくださいました。
そのおかげで、どのページを見てもとってもとっても楽しく読むことができます。

前ページオールカラー!

そして、気合の全ページオールカラー。()
最後の方にはカラーネーム一覧とかHSLカラーの表とかあるのでしっぽまで詰まってる体(てい)です。

前版のHTML&CSSポケットリファレンスと同様にとっても楽しい本になっています。
書店で見かけたら、ぜひお手にとって見ていただければ幸いです。

サポートページ

書籍についてのお問い合わせなどは技術評論社さんのサポートページからよろしくお願いします。