管理画面を持たないCMSを作ってみた

ホームページの更新やコンテンツ管理を行うにはWordPressやMovableTypeとったCMSを入れることが一般的ですが、CMSを入れるほど頻繁に更新しないサイトやコストの問題でCMSを入れていないケースは多々あります。
そのような場合、ちょっとした更新でも、HPの制作会社にお願いしなければいけなったり、特定の人しか更新できない状況では、更新作業自体がおろそかになってしまい、放置されてしまうことがよくあります。

そんな時に、簡単に設置ができ、管理画面にログインする必要もなく、誰でも簡単に、そして安全に更新作業が行えるCMSがあると便利だろうなーということで、作ってみました。

今までも様々なタイプのCMSを作ってきまして、例えばブログのようなコンテンツ管理ができるものから、FAQの更新に特化したもの、新着情報の更新に適したものなど、様々な種類のCMSが既にあります。

ただ、トップページの一部分だけ更新したいとか、創業○○年のそこだけ年一回更新したいといったケースでは、CMSで管理するにはやはり向いてなかったりします。

そんな時、誰でも簡単に画面を見ながら必要なところだけをササッ更新出来たら便利だろうなーと考え、極限までミニマムなCMSを作ってみることにしました。
名付けて「Micro-CMS」です。

※実はこれ、隔週で社内勉強会を開催していまして、今回のテーマが「誰かのために何かを作る！」だったため、うちのスタッフの誰かがどこかで使ってくれればいいかなと思って作ったものなので、今のところ販売・配布の予定は未定です。

どんなにシンプルで簡単なCMSになったとしても、セキュリティーに不安があったり、運用でつまずくようなことがあっては元も子もないので、最低限以下の要件を満たす仕様で作ろうと思います。

誰でも簡単に更新できる究極の形は、管理画面を持たないことなんじゃないかなと思います。要するにWikipediaみたいなイメージですね。

ただ、WikipediaのようなシステムをHPに組み込もうと思ってもそう簡単にできるものではないので、あの形をいかにシンプルにできるかが今回の大きなポイントです。

やり方もいろいろ考えられますが、やはり一番シンプルな方法としてjQuery＋Perlの組み合わせで実装してみることにしました。

動きとしては、ある特定の操作を行ってパスワードをキー入力すると編集したい個所が入力フォームに切り替わって編集可能モードになるという仕組みがシンプルでいいんじゃないかなーと思います。

編集作業が簡単だったとしても、システムの設置が大掛かりになったり、既存のHPにいろいろ手を加えないと設置ができないようでは、そもそも導入前につまづいてしまいます。
ましてや、CMS入れるためにサーバ移転までしなければいけないなんてことになったら、もう大ごとです。

そこで、すでにあるホームページに少し手を加えるだけで設置ができ、今使っているサーバでも問題なく動作するということを考えると、フロントサイドの処理にはjQueryを使い、サーバサイドのプログラムはPerlを使うことがベストプラクティスかなと

jQueryであれば、最近のHPではかなりの確率で利用されているので、組み込む手間が省けるのと、他のJavascriptと競合するリスクも回避できるので使いやすい。

あと、Perlに関しては、世の中のWEBサーバのほぼ100％といえるくらいPerlの実行環境が備わっているのと、仮に古いバージョンのPerlだったとしても問題なく動作するため、不特定多数のサーバに設置されることを考えるとPerlで組むのが安全安心。
また、データベースとしてMySQLなども使わたないため、この環境であればほぼすべてのサーバに導入可能でしょう。

iPhone、iPadなんかがいい例で、製品としてはものすごく高機能で数年前のコンピューターなんかよりよっぽど高度なことができるのにで、操作は2歳児が勝手にゲームを起動して遊べちゃうくらいシンプルでわかりやすい。
本当にいいものは、そういうことなんじゃないかなーと思うところがありまして、2歳児でも更新できるとまではいかないけど、ぎりぎりキーボードとマウスが操作できる人でもHPの更新ができるくらいシンプルなインターフェイスを目指そうと思います。

公開ページをその場で更新できるようにするということは、逆に悪用されて改ざんされてしまうリスクを伴います。

そこで、より安全性を高めるために、以下の安全機能を実装することにします。

　１．編集フォームを出すにはパスワードによる認証を必要とすること
　２．パスワードはサーバ内の安全な領域に暗号化して保管すること
　３．パスワードの再設定なども簡単にできるようにすること
　４．特定の接続元IPアドレスからしか更新が行えないようできること
　５．更新の履歴を残して、不正な更新がなかったかチェックできるようにすること
　６．タグ入力を無効にできる。（サニタイジング処理）

このくらいの要件にしておけば、ある程度安心して導入してもらえるのではないでしょうか。

誰ても簡単に更新ができてしまうということは、うっかりミスをしてしまうリスクも増えてきます。

そんなうっかりさんのためにも、バックアップ機能をしっかり充実させて万が一の時でも元に戻せるようにする必要があります。

ということで、更新を行った際は、更新前の状態を保存できる機能も付けます。
もちろん、バックアップファイルでストレージがパンパンにならないように、世代管理ができるようにする配慮も必要ですね。

公開されているホームページ上で編集作業を行うので、一般の人には編集機能がついていることに気づかれないようにする必要があるため、編集ボタンをつけるわけにはいかないので、隠しコマンドのようなもので編集モードに切り替えできるようにします。

通常ホームページを閲覧しているだけの人はまずやらないだろう「Ctrl＋クリック」をトリガーにする方法をやってみます。

$(function(){
  var flag;
  $(document).on('click', ".jq_micro-cms", function(e) {
    // WinのCtrlかMacのcommandキーの場合
    if(e.ctrlKey || e.metaKey) {
      var from = $(this);

      // 編集ポイント用idをセット
      flag = from .attr('id');

      // 編集可能エリアを可視化する
      from.wrap("<div style='border:1px dotted #d3e632;'></div>");
      setTimeout(function(){
        from.unwrap();
      },300);
  });
});

これで、編集可能エリアをセットすることができたので、この状態でパスワード入力を受付できるようにします。
パスワードを入力し、最後にEnterキーを押下するとパスワード認証が行われるようにしたいので、まずはjQueryのkeypressイベントを使って入力キーをストックしていきます。
Enterキーはキーコード「13」なので、「if (e.keyCode == 13) 」で判別が可能ですね。

  $(this).keypress(function (e) {
    if (!flag) {return }
      // Enterキー押下
      if (e.keyCode == 13) {
        // パスワード認証成功
        if (enter_pass == 'パスワード') {
          // 編集フォームを表示
          view_edit_form(flag);

        // パスワード認証失敗
        } else {
          enter_pass = '';
　　　　　alert('パスワードが一致しません。');
          return false;
        }

      // パスワード入力受付中
      } else {
        var key = String(e.keyCode);
        if (enter_pass == undefined) {
          enter_pass = key;
        } else {
          enter_pass = enter_pass + key;
        }
      }
  });

入力したパスワードと設定していパスワードが一致すれば、先ほどセットしていた編集エリアに対して入力フォームを表示するようにすれば大まかな動きはOKです。

以下のエリアに実際に編集できる状態にしてみたので、さっそく試してみましょう。
下のエリアでCtrl＋クリック（Macの場合はcommand＋クリック）した後、パスワード「1234」を押した後Enterキーを押してください。

↓この枠内が編集可能エリア
※HTMLタグは入力できません。