開発ブログ

株式会社Nextatのスタッフがお送りする技術コラムメインのブログ。

電話でのお問合わせ 075-744-6842 ([月]-[金] 10:00〜17:00)

  1. top >
  2. 開発ブログ >
  3. Javascript >
  4. AngularJSベースの軽量CMS razorCMS(ng)
AngularJSベースの軽量CMS  razorCMS(ng)

AngularJSベースの軽量CMS razorCMS(ng)

先日紹介したPicoに引き続いてデータベースを使わない軽量CMSを探していたところ、面白いCMSを見つけました。
最初はフラットファイルCMS 5選とかありがちな記事を書こうとしていたんですがね。

razorCMS (ng)

razorCMSはそれ自体は管理画面までひと通りの機能を備えたフラットファイルCMSです。
最新版はrazoCMS Phoenix v2.1となっています。

今回扱うのはこの最新版ではありません。
サイトを良く見てみると、AngularJSを利用した別バージョン razorCMS(ng) があります。

まだBeta版なためドキュメントも少なく実用レベルかと言われると微妙なところですが、コンセプトは面白いと思います。

公式サイトの説明の和訳(超意訳)です。

razorCMSを改造した、設定のみの(*1)CMSです。単にダウンロードして、JSONファイルを編集して設定してから、あなたのサーバにアップロードしてください。ページを作成し、JSONファイルを設定すれば、十分に機能するWebサイトを作ることが出来ます。
 
検索エンジンのロボットとインデックスの制限(*2)があったので、このCMSはAngularJS製のアプリケーションをCMSに変換するために作られました。その変換の際にCMSがSEO効果とインデックスが正常に働くという条件を保っています(ロボット用に補助のページを作成することなしに)。このCMSは1つのPHPファイルを含み、そのPHPファイルでルーティングと、前述のJavaScriptのSEOとインデックスの問題を切り抜けるためのPHPを利用したコンテンツのロードを行います。
これによって、あなたのコンテンツ、メニュー、サイトの詳細のほとんどがロボットのクロールの前にロードされます。JSで動く多くのサイトに欠けていることです。SEOとインデックスが追いついてJSをパースするまでに、クロール前にコンテンツをサーバから配信します。
 
それだけではありません。razorCMS(ng)はAngularJSをバンドルし、JSの依存関係の解決にrequireJSを利用する、一人前のウェブサイト用CMSです。
もしあなたが、設定のみのCMS(管理画面なし)を利用することでやりたいことを幸せにこなせるとわかっているなら、そしてAngularJSを利用したアプリケーションを作りサイト用CMSとして統合したいと思うなら、このシステムを使ってください。
 
現在、このCMSはベータ版でありドキュメントはありません。もし苦労してでも使い方を理解したい方は、フォーラムで知らせてください。
時間がある時に、このCMSと一緒に使えるモジュール、アップロードするだけで簡単に追加できるアプリケーションを追加で開発しようと思います。
訳注)
*1 管理画面がないことを指している模様
*2 Ajaxでロードされるコンテンツを検索エンジンがインデックスしにくいという問題を指していると思われます。Googleも(少なくともしばらく前までは)検索エンジン用に別のページを作成する方法を推奨していました。
 

インストール

ダウンロードしてきたzip(記事執筆時点では razorcmsng_v_1_7.zip )を解凍します。
assets/json/site.jsonを編集してサイトの情報を設定します。

{
"name": "razorCMS (ng)", //サイト名
"summary": "razorCMS (ng) bare bones CMS", //サイトの概要
"homePage": 1  //トップページに使うcontentのID この場合はviews/content/1.phpが利用される
}

設置したディレクトリの配下にすべてのファイルを移します。
終わりです。
データベースも使わない上に管理画面もないので非常に簡単です。
razor_ng_1.png

ディレクトリ構造

  -assets/
     -css   作者はless派の模様
     -fonts   内容の割にzipが重いと思ったらフォントが入っているためだった
     -images
     -js    AngularJSなどのjsファイル require.jsによって依存関係を解決しつつ読み込まれる
     -json  ページのデータ(本文はviews/contentの中身を利用)やサイトの設定などを格納するディレクトリ
  -lib/ index.phpでインクルードして利用されるPHPファイル
  -models/  ???
  -storage/  ???
    -log/
  -views/
    -content/  ページの中身に使われる。フラットなPHP。
    -modules/  ページの中にパーツとしてよびだせるモジュール
    -templates/ サイトのレイアウトに利用されるテンプレート 
  -.htaccess
  -index.php  ルーティングなどを行うPHPファイル

コンテンツを編集するには?

それぞれ

ページ:  assets/json/pages.json 本文(content)はviews/content/*..php
メニュー: assets/json/menus.json
サイトのレイアウト: views/templates/*.php

が実体なので直接編集します。
JSONの書き方は見ればわかると思います。サイトのレイアウトをいじる際はPHP+少々AngularJSの知識も必要になります。



ページの情報と本文が別々の場所で管理されているので、
管理システムがないと少々いじりにくいですね。

とはいえ、サイトの表示はサクサクなのは魅力。
検索エンジンへのインデックスについても暇があれば検証してみたいところです。

今後に期待。

TOPに戻る