LoginSignup
25
20

More than 5 years have passed since last update.

フロントエンジニアのWordpress抹殺術(Express+Prismic.io)

Last updated at Posted at 2016-09-12

(追記,2016/9/16)
タイムリーにも本家からprismic.iov vs wordperssの記事が出てました。
prismic.io vs. WordPress
ま、僕が良いと思ったのはフロント開発との親和性なんですが。


今回は前置きのみです。
※深夜の駄文です。流し読み程度にしてください。怒らないでください。

  • 前書き(今回)
  • Prismic.ioの使い方(予定)
  • EC2にNode環境構築。お名前.comで取得したドメイン当てる。(予定)
  • Nginxリバースプロキシ設定 pm2でデーモン化(予定)

前書き

まず、フロントエンドの開発ディレクトリを見てもらいたい。

ついこないだまで

.
├── css
├──  images
├── index.html
└── js

今日この頃

.
├──.babelrc
├──.editorconfig
├──.eslintignore
├──.eslintrc
├──.git
├──.gitignore
├── config
├── deploy_config.json
├── gulpfile.babel.js
├── node_modules
├── package.json
├── prismic-configuration.js
├── public
├── server
└── source

「ふぁ!!??」

昨今のフロントエンド開発は、ご存知の通りすごいことになっており、nodeなりなんなりでいろんなものを自動化してる。
もはやhtmlを素書している古代文明の人はいないだろう。汗
静的サイトをつくったり、ajaxでapi叩く程度ならフロントで完結するので話は簡単なのだが、
サーバーと連携したシステムを構築する場合、フロントエンジニアとサーバーエンジニアはどうやって仲良くしたらよいのだろうか。

そしてCMSについて考えてみる。
こんなに世の中進化したというのに、CMSとなるとなぜか今もwordpressが根強い。
モダンなwordpressのテーマを作るフローはどうなっているのだろうか。
フロントエンジニアがnode環境で吐き出したhtmlにサーバーサイドエンジニアがphpのタグを組み込んでいるのだろうか?
考えただけでも吐き気がする。jadeなりslimなりで作ったhtmlをその後いじるというのはどう考えてもやばい。
(実際の作業を知らないのでそんなことないと思う。偏見で喋っていますごめんなさい。あったら知りたいです教えてくださいお願いします。切実)

そして苛立ったフロントエンジニアは言った。
「えーい!全てnodeでつくってやる!php消え去れ!」
そしていきついたのが

Express + Prismic.io
である。

AWS EC2でnode環境を構築し
ExpressをたちあげNginxでリバースプロキシを。デーモン化にはpm2のお世話に。
Expressのtemplate Engineにはjadeを使い、
コンテンツ管理にはPrismic.ioを使う。

「こ、これだ!!」

通常静的なサイトを作る時コンテンツ管理はyamlを使っている。(その昔、師匠に教わった)
Prismic.ioを使えば、yamlで使っていたjadeをほとんどそのまま利用できたりする。神のようだった。

ちなみにNodeで作られたCMSはけっこうある。GhostだとかKeystoneだとか他にもたくさんある。
しかし色々試してみたもののなかなかしっくりくるものがなかった。
Ghostはいい感じだったのだが、template engineにデフォルトではjadeが使えず、handlebarsというtemplateを使っていた。pluginでjadeも使えそうだったけれど、ghostの開発者がjadeはロジックが中に書き込めてしまうからよくないみたいなことを言っていたが、使い方次第だと思うし、
僕にとってhtmlにタグが書けますよ的なtemplateは全く求めていなかったので思想が合わないと感じて止めた。
https://github.com/TryGhost/Ghost/issues/1131

そして行き着いたのが prismic.ioだった。
日本語での情報は全く出てこなかったがgoodpatchが社内blogで使っている様子だったので信頼が置けた。
Rubyで利用している様子。
Prott Blog : 新しいCMS、prismic.ioを使ってみよう

Prismic.io自体はNodeでの開発にも重きを置いている様子?だった。(勝手な偏見かも)
実用的かどうかはサービスの信頼度が不明なのでよく分からないが、使い勝手はとてもすぐれていた。

フロントエンジニアの皆様はCMSをどうしているのでしょうか。

次回は
実際に組み込みの作業をメモがてら書こうと思いますす。深夜の駄文ですた。

25
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25
20