ヘッドレスCMSを調べてみたらSOY CMSもヘッドレスかな?と思った話

Photo by Pixabay on Pexels.com

久しぶりにご紹介したくなり、この人はすごいなと思うコンサルで経営者のILBの岩住社長からヘッドレスCMSの話を聞いて、勉強してみた。ほんとこの方すごいけどあんまり自分のすごさをウェブとかに公開して欲しいタイプじゃないだろうから、また別の機会に。とりあえずヘッドレスCMSに触る前で頭でわかったことを書いておく。

「ヘッド」レスCMSとは?

この記事「ヘッドレスCMSとは何か?従来CMSとの違いやメリデメを解説!」が参考になった

CMSのはコンテンツマネージメントシステム(Contents Management System)の略。ウェブサイトの更新を簡単にできるようにHTMLやFTPを知らなくても更新できるのが特徴。

ヘッドとは、作成したコンテンツを表示する画面のことを指します。ビューとも言いますが、ヘッドレスCMSはコンテンツを入力し、保存することはできても、そのデータをウェブページにして表示する部分がないCMSのことを指します。

ヘッドレスCMSでは表示するビューがない代わりにコンテンツをAPIで取得することになります。APIを用いて必要なコンテンツを取得する。

WordPressならHTMLのテンプレートを作り、その中でどのフィールド(タイトルとか見出しとかメニューなど)をどこに何を置くか定めます。そのHTMLをレスポンシブデザイン(モバイルやタブレットなどデバイスに合わせて表示を切り替えるデザイン)にしておくことで対応する。これが一般的。

そこがヘッドレスCMSの場合、APIを使って動的な部分(ブログの記事など)を呼び出すので、呼び出すJavaScriptをHTMLに書けばいい。HTMLがテンプレートとなるのはWordpressといっしょだが、Wordpressの場合、PHPなどのサーバサイトのプログラム言語を通してHTMLのテンプレートを表示する。ヘッドレスCMSの場合、HTMLはプログラムを通さずそのまま表示しているところにJavaScpriptで動的なデータを呼んでくる。このJavaScriptでAPIを呼び出してMarkupを出力することをJavaScript/APIs/Markupの頭文字からJAMSTASCKという。

ヘッドレスCMSでも呼び出すJavaScriptを置いたHTMLはをレスポンシブにすればできるのだが、考えかたによってはスマホ、タブレット、PCそれぞれ全く別のHTMLをつくっておいて、ユーザーエージェントで振り分けてもいいかもしれない。そして、PCでは著者情報まで読み込むけど、スマホでは著者は名前だけにして著者情報はリンクにして別ページにする、なんていうデバイスによって読み込み不可を下げるなんてこともできる。さらにアプリにだってAPIだから対応もかんたんだ。

ヘッドレスCMSの利点とデメリット

静的HTMLの復権とも言える。この仕組ではビューの動的な部分でもPHPなどのサーバサイドのプログラムを基本使わなくて良い。

そのことで得られるメリット

  • 静的HTMLだから超高速
    サーバサイトはHTML表示するだけだから負荷はとても軽くなり表示早くなる(ただし、動的部分はAPI経由で出力するからAPIのレスポンスの速さに依存するとは思う)
    あとスマホは専用の超軽いHTMLにするとか、スマホは画像を表示しないとか項目を選択して軽くすることもできそう
  • 静的HTMLだからセキュリティにつよい
    表示でサーバサイドのプログラムをいれると、どんなプログラムが表示に走ってるかわかるので、そこからセキュリティホールを見つけやすい。オープンソースでセキュリティホールほっておいて、そのプログラムを使ってるのがわかればクラッキングもかんたんだ
    一方APIを呼び出すならビューのHTMLのソースコードでしか判別ができず、ヘッドレスCMS側のクラッキングをする手がかりはつかみにくい

ということで、でもこれって、SOYCMSのことじゃないの?と思ったりした。静的でも動的でもSOYCMSは必要なコードをいれておけばそこだけ更新ができる。

わたし古荘さんも稀代の天才だと思ってて5年先のことやってるんだけど、私含め理解できないでいるのは本当にもったいないことだなと思ってる。ABテストと言い、画像の日報管理といい、彼の言ってることはホント正しいんだよね。

違うのかな?今度聞いてみよ

Toshiaki Ejiri: Born in Fukushima, working as web analytics consultant since 2000.