Node.js 製 CMS の決定版！ KeystoneJS を試してみた ｜ SiTest (サイテスト) ブログ

みなさんは何か CMS を使っていますか？
使っていないとしても、CMS と聞いたら何を思い出しますか？

CMS といったら WordPress といった方が多いと思います。
特別 HTML や CSS の知識がなくても Web コンテンツが作成できて便利なのですが、具体的にカスタマイズ等をしようと思うと PHP を触ることになると思います。
普段から PHP を使っている場合は何の問題もないかと思いますが、普段使いが JavaScript の方は、「CMS も JavaScript を使いたい！」と思うはずです。
JavaScript で出来た CMS はないものかと探してみると、 Node.js 製の KeystoneJS という CMS を見つけました。
そこで今回は KeystoneJS について、導入方法含めてご紹介したいと思います。

KeystoneJS は前述の通り、Node.js ベースの CMS です。Node.js のフレームワーク「Express」を使っています。

メリットとして、以下のことが挙げられます。
・軽量で導入が簡単に行うことができる。
・拡張が簡単に自由に行うことができる。
・JavaScript のエコシステムが使える。（npm）

JavaScript が使えるということが一番大きいです。
普段から JavaScript を使っている方、特に Node.js を使っている方にとっては、馴染みの環境で CMS を構築することができます。

では実際に導入して、サイトを立ち上げるところまでやってみましょう！
公式の Get Started を見れば一目瞭然。
とてもシンプルです。 generator-keystone をグローバルインストールしてコマンドを順に実行するだけです。

【実行手順】
npm install -g generator-keystone　
↓
mkdir my-test-project
↓
cd my-test-project
↓
yo keystone

※インストールに npm を使うので、Node.js がインストールされていること、また、DB に MongoDB を使うので、 MongoDB がインストールされていることが前提条件です。
また、ガイドには載っていませんでしたが、立ち上げる際に yo コマンドを使うので、Yeoman のインストールがまだの人はそちらも併せて行ってください。

yo コマンド実行後は、ガイドに沿って設定していくだけです。
設定項目は以下のキャプチャの通りです。

・テンプレートエンジンの有無
・CSS プリプロセッサの有無
・デフォルト提供機能の有無
・管理者アカウントの作成
・外部サービス（Mailgun , Cloudinary（※））統合の有無

テンプレートエンジンに pug (旧 jade ）を使えたり、 CSS プリプロセッサに Stylus を使えるので、普段から使っている人には嬉しいですね。
また、 Keystone では、デフォルトで「Blog」「Image Gallery」「Contact Form」が提供されていて、それを取り込むかどうか選択することが出来ます。

（※）Cloudinaryとの統合

画像のアップロード先として、 Keystone はデフォルトで Cloudinary と統合しています。
Cloudinary は画像や動画のオンラインストレージサービスで、無料で2GB保存することが可能です。
後に画像アップロードを試すので、設定しておきましょう。

URL を設定するのですが、上のキャプチャ上の「cloudinary://」から始まる部分が該当部です。

最後まで設定を終えると、それにそって自動でインストールを行ってくれます。

node keystone

インストール完了後、 上記 node コマンドを実行するだけで立ち上がります。
※ node コマンド実行前に MongoDB を立ち上げておかないとエラーになるので、要確認です。

上手く立ち上がりました。

MongoDB にもコレクションが作成され、設定時に登録した管理者アカウントも登録されています。

画面右上の「Sign in」から認証して、管理画面に入りましょう！

さっそくデフォルト機能の使い勝手を見てみます。

Galleries は、快適に画像をアップロードすることができ、公開日の設定も可能です。
ただ、画像の保存は1回のボタンクリックで1枚しか保存されないので、その点は要カスタマイズです。

Blog は、記事の検索・絞り込みが可能で、作成画面には簡易な WYSIWYG エディタが提供されています。

両機能とも、必要最低限の機能を提供しているといえます。

気になる KeystoneJS が何でできているか、 node_modules から keystone の package.json を見てみましょう。
列挙はしませんが、気になったモジュールは以下の通りです。

　・ UI ライブラリ：　React.js
　・ React の状態管理：　Redux　
　・ CSS フレームワーク： Elemental UI
　・ ODM ( Object Document Mapper )： Mongoose
　・ ロガー：　morgan
　・ テストフレームワーク：　mocha
　
公式によると、 React.js（Redux）は、管理画面で使用されているようです。
フロントエンドからバックエンドまで今時または定番のモジュールを使っており、morgan や mocha でお気付きの通り、デバック時や拡張時のテストを意識しているのが分かり、JavaScript を使うエンジニアにとっては、使い倒しがいのあるシステムではないでしょうか。

いかがでしたでしょうか？
軽量で必要最低限な機能を、ジェネレーターで素早く提供してくれるという印象です。

その後は JavaScript のエコシステムの恩恵を受けながら自由にカスタマイズすることが可能です。
また、Node.js や Express に慣れていない方にとっては、それらの勉強にも打ってつけなのではないでしょうか？
KeystoneJS をカスタマイズしながら、知見をブログに残すという良い循環も期待できます。

ご紹介した通り、とても簡単に導入できるのでぜひみなさんも試してみてください！