このセッションは20分のショート セッションの2つ目になりますこちらのセッションでは 森 森茂 ごめんなさい 森茂平さんにヘドレスCMSの開発者から見た ワードプレスというタイトルでお話をいただきますヘドレスCMSであるマイクロCMSの 開発に携わっている森茂さんですけれどもその立場から見て ワードプレスがどのように見えているかを伺うことができるセッションになります それでは森茂さん よろしくお願いいたします森茂平 はい よろしくお願いいたします 本日 このだけ集めていただき集まっていただき いどうもありがとうございます 今日はヘドレスCMSの開発者から見たワードプレスということで ちょっと風呂式広げ議員なんですけどもちょっと簡単に普段私がマイクロCMSという ヘドレスCMSを開発するに当たってエンジニアや仲がの人から ワードプレスがどのように見えているかというかそういったものをちょっと軽く 紹介できたらと思っています森茂ですね 大目としてはこんな感じですねはじめにちょっと紹介と ワードプレス ヘドレスCMSの簡単な比較あとは ヘドレスCMS開発者から見た ワードプレスということでちょっと社内の人間にですね インタビューした内容とかをちょっと紹介させていただこうと思っていますはい まず最初にすいません 自己紹介 簡単にさせていただきます私の株式会社マイクロCMSで フロントエンドのテックリードというのをやっています 森茂平広志と申します よろしくお願いしますウェブ関係ですね 制作会社 開発会社 いくつか経て20年程度この業界にいるんですけども ワードプレスとかムーバブルタイプかなり公開されて初期の頃ですね バージョン それこそ1か2の頃からずっと触ってきています 最近はですね マイクロCMSというヘッドレスCMSの開発なので どちらかというと 触ることはちょっと少なくなってしまったんですけども 今までの経験をもとにちょっとワードプレスとか参考にさせていただきながら 開発を続けているという感じです フロントエンド テックリードとやってるんですけどもパックエンドとかインフラに関しても テビロークやっていますそれでは早速本題入っていきたいと思います 今日お話しする内容についてですねちょっと前提条件というか そういったものを紹介させていただきます今日 ヘッドレスCMSの定義 ワードプレス ヘッドレスCMSの定義なんですけども今回ちょっと話しするワードプレスに関しては 自身でセットアップして利用するセルフホスト型ですとか インストール型とか 言葉あるかもしれないんですけどもそういったものを前提としています レンタルサーバーですとか 自慢のサーバーにワードプレスですとか データベースをインストールして使う方法ですねワードプレス自体も皆さんご存知だと思うんですけども もちろん ヘッドレスCMSとしてレストAPIであったり グラフQLだったり そういったものを使って利用可能ですが今回はそういったことに関して ちょっと活用させていただきますで 今日お話す ヘッドレスCMSという言葉の定義なんですけどもこちらに関しても かなりちょっと幅の広い定義なものになるんですけども今日お話しするなよとしては サーバーズとして提供されているヘッドレスCMSというのを前提としています有名なところで言うと コンテンツフルというサービスがあったりしますし私が開発している 私も開発しているマイクロCMSというのもそのようなものになっていますちなみに この中で ヘッドレスCMSという言葉ギタポタリをよく知っているよって語って どのくらいいらっしゃいますでしょうかもしいらっしゃったら 教室いただいてもいいですか結構もうご存知の方 多いですね ありがとうございますじゃあ まずですね ワードプレイスとじゃあ ヘッドレスCMSって どのように比較されるのかというのをちょっと簡単に紹介させていただきますまずですね ヘッドレスCMSという言葉 実際どのぐらいなどの時期ぐらいからですね 登場したかという背景のご紹介なんですけども 既にご存知の方 沢山いらっしゃると思うんですけどもだいたい2016年のネトリファイのイベントをですねマティアスビルマンさんという ネトリファイの仕様の方がジャムスタックというスタックですがねその技術構成 システム構成を紹介したことでその中でジャムスタックという言葉が ちょっと話題になってその中で使われる ヘッドレスCMSという言葉が出始めていますもちろんヘッドレスなCMSというのは 昔から存在していてもちろんワードプレスのレストAPIですとか ムーブルタイプですとかそういったものを十分に使えていたんですけども言葉として出てきたのは 明確になったのはこの時期からになると思いますジャムスタックっていう言葉 ジャムというのが大文字でなっていましてJavascriptのJとAPIのA マークアップのMという形で最初はジャムっていうのが大文字で 記載されていましたこれは当初はそのように記載されていたんですけども現在はですね もう既にJavascriptである必要はないのでですしAPIに関してもこの部分はユーザーがAPIを作る必要もなくてですねそれこそのヘッドレスCMSというのを 置き換えられてますので今ではジャムスタックっていうのは 普通に小文字であったり最初のジュエだけが大文字になっていたりするような表記になっていますこの辺にジャムスタックっていう言葉で検索していただくとたくさん記事が出ると思いますので興味がある方はぜひ検索して詳細調べてみてくださいではですね そもそもじゃあヘッドレスCMSってどんなものだろうっていうのをちょっと簡単にご紹介します今回ここでは従来型のCMSとして紹介しているのが右の図になっているんですけども運用する人がですね 管理画面を使って更新する部分管理画面だったり バッグエンドのデータベースであったりフロントエンですね ベーブページの方これをひっくるめてですね 一つのモノリシックな構成というんですかね一つの塊としてなっているものが 従来型のCMSとしてよく使われていました皆さんよく使われるワードプレスも例えばレンタルサーバーとかで 使われる場合というのはこのような形でウェブサーバーまではレンタルサーバーが 提供してくれると思うんですけどもデータベースの設定ですとかね管理画面の構成とかそういったものは全て皆さん作られる側で用意されていると思いますそれに対してですね ヘッドレスCMSというのはですね基本的にはバッグエンド側のみ 裏側のシステムのみでフロントエンド頭がないということなのでコンテンツを表示する画面がないものがヘッドレスCMSの位置付けになっていますまあ右側に図があるんですけどもバッグエンド側というのを 管理画面だったりデータベースも含めてサービスの提供者側が用意していますなので利用する側 利用するユーザーにとってはコンテンツを入力することあと入力されたデータは全てAPI経由で受け取ることができるので 受け取ったデータをどのような形で活用するかというのはユーザーさんしたいということになりますここだと例えばよく利用されるのがとても一つの管理画面をコンテンツ入力することで自社のサービスの提示であったりウェブサイトであったり スマートフォンのアプリケーションですね一つの管理画面からAPIで提供することができるので複数のチャンネルで活用することができますこれがヘッドレスCMSとしてちょっと便利だなと言われるちょっと理由な面と言われる理由でありますなのでバッグエンド側の構成とか何もそういったことを考えなくていいのでコンテンツの作成に集中できるとかですねそういったものもメリットとして挙げられているのがヘッドレスCMSですで こちらはまたちょっと比較従来型CMSとヘッドレスCMSであったりあと濃厚度型と呼ばれるCMSも存在しています日本のサービスでいうと スタジオであったりあとは使ったことある型がいらっしゃると思ってウィックスとか そういったものも濃厚度型という形のCMSになっていますインストール型に関してはワードプレスやムーバーブルタイプドルーパルであったり他の複数のインストール型のCMSがございますあとはフルスクラッチっていうのちょっと右に置いてるんですけどもこれに関しては大手企業さんとかが社内向けに独自にCMSを作るっていうのが存在してると思いますこれが重視になってまして拡張性が低いものから拡張性が高いもの運用コストが高いものから運用コストが低いものというふうに書いてありますこれに関しては 運用コストというふうに関してはユーザー側がサーバーのメンテナンスとか少ないよねっていうのが運用コストが低いというふうな位置付けです拡張型に関して 拡張性的に関しては濃厚度型っていうのは管理画面を自分たちでオリジナルに作ることはできないんですけどもインストール型であればワードプレスとかであれば 例えばもちろん簡単ではないと思うんですけどもプラグインとかそういったものでメニューを増やしたり 減らしたりとか直接行動を書き換えたりすることができると思いますヘッドレスCMSも多くのヘッドレスCMSが管理画面を若干拡張することができるというので一応右側に乗っかっているっていう感じですねこれちょっとこれ表が見づらくて小さいと思うんですけどもヘッドレスCMSとインストール型ノーコード型 フルスクラッチ型というのをなんとなく優異性というのを示した図になっていますこちらはベッド資料とかアップロード姿勢に見ていただくとなりますここでですね今までちょっと紹介させていただいた中でクラウドとかのサービスをよく利用したことある方だと責任共有モデルという言葉もしくったら聞いたことあるかもしれませんヘッドレスCMSのサービスに関しても同じような見る見方というのがありまして左側ですね 左側に関してがどちらかとインストール型 ワードプレスとかでよくある形ですこの色が付いている部分がユーザー 作る側が面倒を見なくてはいけないものですね何か起きたときにサポートしなきゃいけないものグレーになっているというか 暗い部分がレンタルサーバーであったりとかすれば面倒を見る必要がないものになっています例えばワードプレスであればウェブページフロントエントであったり管理画面 あとはミドルウェアですかねウェブサーバー パッチであったりレンジエックスであったりあとはPHPのバージョン管理データベースのバージョン管理だったりバックアップというのはインストール型であればユーザーが作り手側が面倒が見る必要はあると思います逆に右側に関してはヘッドレスCMSサーブとして提供されているヘッドレスCMSですこちらに関してはウェブフロントエントウェブページのみがユーザーの責任配になりますその分管理画面やミドルウェアとかそういったものに関してはサービスの提供側にすべて任せておけばいいという形です逆に言うとこれはメリットでもありメリットであるのはグレヌ部分というのはすべてブラックボックスになってきますのでユーザー側で何か全部管理したいという場合にはヘッドレスCMSは向かない案件というのも存在するということですここまでですねちょっと何となくワードプレスとヘッドレスCMS比較っぽいような情報を出させていただいたんですけどもだいたい一般的にヘッドレスCMSというので検索すると今のような比較というのが出てきますこれってわくまでヘッドレスCMSの目線から見た紹介なので一般的にヘッドレスCMSとワードプレスってどうなんだろうと比較すると何かですね圧倒的にヘッドレスCMSが優位に見えるっていうのが何となく今までの情報でも感じ通れたんじゃないかなと思います何かですねこれ結構見方が早まっているというか僕らサービス提供している人間から同じような資料を提供してしまってるのでちょっとずるいような資料になっちゃってるんですけどもそもそもですね比較するレイヤーというかですねアテゴリが違っていて同じもの差しでワードプレスとヘッドレスCMSというのを比較できるものではないというのは前提で見ていただければと思っています例えばね車の操縦性の比較するのに同じ車車種同性ですかねコンパクトか同性比較してどっちの操縦性が比較するっていうのはアテになると思うんですけどもヘッドレスCMSとワードプレスっていう言葉同士で説明するならワードプレスは自由に動ける車だとしてもヘッドレスCMSはある程度レイヤーに乗っかった列車のようなものだと思っていただければいいと思いますなのでそれのですね操縦性の比較っていうのは厳密には何もできないので一般的になんかお客さんからヘッドレスCMSっていいらしいじゃんなんかそっちに移行させてよとかそういった話があったとしても味方に行っては必ずしもいいものではないということを理解しておいていただければと思いますなのでそれぞれですね相反するものではなくてですね使い方によって何が必要なのかっていうのを作り手側もよく見極めていただければと思ってますはいでここからこれだけ引っ張った時ならやっと本題に近いような内容なんですけどもここからちょっと軽く話をすめたいと思います次にヘッドレスCMSから見たワードプレスということです主にですねちょっと私たち社内の人間の意見とかがメインなので他のヘッドレスCMS開発者はどこまで同じような内容を見てるかというのはちょっと保証ができないんですけども我々が見てる中としては主にワードプレスというのはCMSという言葉の中からするとですねベンチマークというかリサーチ対象として考えていますやはりですね先ほどお話しさせていただいたようにヘッドレスCMSってなんかいいらしいじゃんみたいな結構そういったお客さんが言えましてヘッドレスCMSに移行したいっていう問い合わせを相談を受けることがありますなのでそういった時にお客さんが今までワードプレスで何を苦労されたのか逆にヘッドレスCMSに移行してメリットがあるのかというのをリサーチする対象として調査したりもしていますあとはそれぞれのできることできないことですねワードプレスでできることというのは作り手の活用の仕方によって結構何でもできるってところはあるんですけどもヘッドレスCMSに関しては管理画面とかも含めてある程度こちらが事前提供するまのでできないことでは結構多数存在したりしていますワードプレスに関してあとメリットというかこちらが気になっていることとしてはやはりよく使われる機能やプラグインが膨大であることあと導入事例が膨大であることあとデータの持ち方ですねデータベースの構造ワードプレス構造事態というかテーブル事態はシンプルだと思うんですけども中身は結構複雑なデータの持ち方をしていたりしますのでそれをどうやって扱えるのかというのを調査しておりましています次にですね私がちょっと社内にですねこのイベントにどれに当たって事前にインタビューさせていただいようも紹介したいと思いますまずですねエンジニアから見たワードプレスの世界社内の開発しているエンジニアだったりサポートのエンジニアにいくつかコメントをもらいましたちょっとなかなかちょっと攻撃的な意見も多数あったのでそれはちょっとカットしているんですけどちょっと柔らかめの意見だけですねまずエンジニアから見たワードプレス実装を要らずでコーリティの高いサイトが作れるのでターゲット装が幅広いとあとテーマが豊富デザインレアトが自由に作れるように何より歴史がありさまざまな活用方法やティップスが豊富にあるこれも皆さんも活用する際によく感じていることだと思いますあとはちょっとまた違った目線としては利用者と開発者で見えている世界が違う印象があるっていう意見も出てましたワードプレスの利用者っていうのはどちらかというと安く作れる低コストで他機能な便利なサービスが何でも作れちゃうよっていうなのでちょっと低コストってというところに置いちゃってるお客さんが多いなというイメージただ開発者にとっては意外とメンテコストだったりやりたいことやろうとすると意外と大変だよっていうそういった苦しんでる人が多いっていうのが感じるような意見も出てますこれ皆さんでもしやったらうなずく方も苦労されたかのことがいるのかもしれないですあとはですねヘッドレスCMSのメリットとしてですねAPIっていうのを提供するのでエンジニアが開発するのであれば慣れたインタベースなので学習コストが低いあとはバックエンドの実装はいや運用コストが落とせるのでフロントエンドフェーブページの方ですねそっちの方にリソースを注力することができるよっていうことですねあとはサーツで提供するのでもちろんサーバーの報酬のテーマがないというのがメリットかなと逆にメリットに関してはちょっと同じような形になっちゃうんですけどもやっぱりエンジニアリソースが常に必要になる特にフロントエンドのエンジニアの数が結構必要になる案件が増えてきますあとはこれもワードプレスでも結局サーバーに障害があった場合同じなんですけどもヘッドレスCMTの障害があった場合にコンテンツデータの取得とかができなくなってしまうよとあとは結構移行するお客さんで言われるのがプレビューだったりアクセスランキングだったり何か問い合わせフォームだったりですねプラグインで結構比較的簡単に実装できるものってすごく多いと思うんですけどもそういったものがヘッドレスCMTだと意外と難しいというのがあります逆にワードプレスのおらやましいところみたいなところで聞いたのが管理画面の拡張性というのが何よりもよく上がっていましたこちらはヘッドレスCMTだと管理画面中場ちょっと固定に近いものなのである程度自由に管理画面が拡張できるワードプレスってすごいなという意見があってますあともちろん歴史が長くて機能やコミュニティが成縮している今回のようなイベントが存在していたりとかですね情報っていうのがすごくたくさん存在していると思ってますではOSSのため究極的にはコードを変えれば自分でいないようにも活用することができなくもないという点ですねあとはフロントエンド・バックエンドという枠組みが基本的に存在しないというところもあると思いますテンプレートを加工することでバックエンド側と密に連携することができるところですあとは事例の報復さですね大体こういったことやりたいなと調べると大体先行事例が存在しているなと思ってますはいちょっとだいぶ駆け足でちょっと紹介させていただいたんですけども以上のような意見がいくつが出ました突っ込んで意見に関してはまた時間よろしければ後ほど直接問い合わせていただければと思ってますはい最後ちょっと総括というかまとめなんですけどもこれはちょっとエンジニア目線としての意見になってしまうかもしれないんですけどもワードプレスとヘッドレスCMSどちらか有意義とかそう言ってもらうもちろん存在していないと思ってますなので本質は何かを見極めて適材適所ですねお客さんの要望にあって適切なものをですね作れるように技術選択する必要があると思ってますあとですねワードプレスに関しては今ただのCMSという何か一続けからですねもうここ数年プラットフォームとしての一続けに変更しつつあると思ってますなのでワードプレス単体で全てを解決するんではなくてですねヘッドレスCMSであったりその他のサーツですねそういったものと連携しながらサービスの合わせ技みたいなものが今後重要になってくると思うのでこれからもですね他のサービスも含めて一つのサービスにこだわらずに広い目線で技術選定をしていただければと思っていますはい私の方からは以上となります本日はご清聴ありがとうございましたはい森池さんありがとうございましたこの後森池さんまた会場の中にいらっしゃったりしますよねはいあのエンジニアさんあとディレクターさんきっとあのマイクロCMSとニーハッこう提示されるこういう技術はすごくこれからあの興味終わりだと思いますのでぜひ森池さんを途中であのお声分けしてお話いろいろ伺ってみたいなと思いますはい今日はどうも森池さんありがとうございました