MD-Blog_Web System

サイトを制作して、はい終わり。なんて事はあまりなく。
制作サイドで更新 or クライアント様自身で更新、管理をしたい。なんて事はよくあります。
が、制作サイドも、もちろんクライアント側からも、毎更新時にHTMLやCSSなどを新規作成・編集といった作業を行うことは非常にナンセンスであり、めんどくさい作業です。
更新時に毎回めんどくさい思いをするのは非常にストレスなので、できれば楽をしてコンテンツを管理したい！ or 管理してもらいたい！と思います。

コンテンツ管理について考えてみる。

以下のような前提条件で考えてみましょう。

• クライアント側（サイト保有者）が更新したい内容があり、
• 運用を担当される方にHTML/CSSの知識が無くても（仮に知識があってもHTMLファイルを編集しなくてもよい）、更新できる。

どんなコンテンツ管理があるか？

1) Wordpress
CMSの代表的なパッケージであるWPをWebサイト側に用意して管理する方法。

• メリット : 更新が楽。WP自体のパッケージ費用は無料。
• デメリット : 運用を担当される方に十分な説明がいる（変更していい事とダメな事の説明など）。最低限は設定されたサーバーが必要（Apacheが入ってるとかMySQL、PHPが動くとか）。
• サイトの用件に応じてテンプレートのカスタマイズやらプラグインのカスタマイズをしないといけないとなると、初期構築にかかる工数は少し高めかも。（プラグインが商用有料の場合もある）

2) Movable Type
商用CMSのNo.1シェアを持つMTでサイトを管理する方法。

• メリット : 更新が楽。
• デメリット : 商用ライセンスは有料。WP同様に事前に担当者の方に説明が必要。インストール要件に応じたサーバーも必要。

3) Facebook
Facebookページのフィードをサイト側に読み込んでコンテンツ表示する方法。

• メリット : いつでもどこでも簡単に更新可能。通常のユーザーと同様にアカウント作成するのみ。サーバー不要。
• デメリット : Facebookアカウントが必要。更新方法、掲載内容がある程度縛られる。Facebookの規約やAPI仕様が変更されたら、サイト側も改修が必要。

4) Twitter
TwitterフィードをウィジェットまたはAPI経由でサイト上に表示する方法。

• メリット : とにかく簡単。無料であり、アカウント作成のみ。サーバー不要。
• デメリット : 短文のテキストというTwitterの概念上、コンテンツとして扱える情報料は少ない。

5) PHP/CGIファイルで外部ファイルをインクルードする
CMSが一般化する前によく行われていた方法。

• メリット : 比較的簡易なプログラム開発で実装が可能。
• デメリット : 運用管理にはHTMLの知識が必要。記述を間違えるとInternal Server Errorで何も表示されない可能性も。

6) PHP/CGIでCSVを読み込む
「5」の方法に一定のルールを定めた方法。

• メリット : 後述の「7」に比べればSEOフレンドリー。
• デメリット : 掲載するCSVファイル自体のファイルサイズが大きくなると、サイト全体のパフォーマンスの影響する。

7) Ajaxで外部ファイルを読み込み
「5」や「6」と同じ発想だが、処理をJSで行う方法。

• メリット : 画像とか何でも更新可能。（※編注：筆者の主観です）
• デメリット : HTMLの知識が必要。

どんなコンテンツ管理がいいか。

上記のメリットとデメリットを踏まえて、ほどよいコンテンツ管理の手法を、個人の好みと独断で考えてみます。

• サーバー負荷はかけたくない。
• 管理の仕様がサードパーティに委ねられてしまうのはNG。
• 今の時代にPCからしか更新しない（できない）ってどうなの？
• FTP接続不要。
• 後からコンテンツの種類の追加、削除に柔軟に対応。
• HTML、CSSの知識不要。
• 人が作った物を使うって"クリエイター"としてどうなの？（独断です。）

これらを満たすコンテンツ管理の方法を、作ってみます。

どういう手法で作成するか。

管理側
1. GUI箇所はFlashで作成。
2. 必要な値をFlashからサーバーにPOSTする。
3. サーバー側はFlashから受け取った値をDB等に保存させる。（今回は直でJSON）

クライアント側
1. JSでサーバーのJSONを取得する。
2. AjaxでHTML側は表示させる。

プログラム（一部抜粋）

■JSON:

FlashからPOSTして
サーバーで受け取って保存、
JSで受け取るJSONはこんな感じ。

    [
        {
            date: "2013/06/10",
            subject: "件名",
            content: "ほげほげほげほげほげ"
        }
    ]

■AS3.0:

Flash側はsubject、content用の
TextFieldを作成してあげて
TextFieldの.textの文字列をサーバーにPOSTする。
dateはPHP内でサーバーの時間を取得する。

    // POSTさせる準備
    var _urlLoader:URLLoader = new URLLoader();
    var _request:URLRequest = new URLRequest();
    _request.url = 'http://www.hogehoge.com/hoge.php';
    _request.method = URLRequestMethod.POST;
    var _variables:URLVariables = new URLVariables();
    //_subTxtFlはTextFieldでtypeをINPUTに
    _variables.subject = _subTxtFl.text;
    //_contentTxtFlはTextFieldでtypeをINPUTに
    _variables.content = _contentTxtFl.text;
    _request.data = _variables;
    _request.method = URLRequestMethod.POST;
    _urlLoader.dataFormat = URLLoaderDataFormat.TEXT;
    _urlLoader.addEventListener(Event.COMPLETE, onCompleted);
    _urlLoader.load(_request);

    /**
     * PHPとの通信が完了されたら
     */
    function onCompleted(event:Event):void {
        var _urlLoader:URLLoader = event.target as URLLoader;
        // ちゃんとEventを付けたら外そうね！
        _urlLoader.removeEventListener(Event.COMPLETE, onCompleted);
        trace("通信完了！");
    }

■PHP:

PHPはFlashから受け取った値をJSONにPushさせます。
さらにJSONに正常に書き出しができたか、
またちゃんと件名、内容が入っているかの確認をして
全てがOKだったらFlash側にOKのレスポンスコードを含めたXMLを返すようにしました。
仮にNGの時は、NG用のレスポンスコードを含めたXMLを返します。

■HTML / JS:

PHP側で作っておいたJSONをajaxで直接読みに行き
HTML側に出力させます。

と、ここまでで簡単な投稿システムが作れたかと思います。

なぜFlashで作成したのか。

コンテンツ管理に、今のご時世"PC"からのみしかコンテンツ管理（投稿など）できないのはナンセンスと個人的に思いました。
FlashはWebという世界からは最近干され気味ですが、アプリという概念ならまだまだ現役かと思ってます。

ワンソースで

• Web
• Desktopアプリ
• iPhone
• iPad
• Android

と、ほぼすべてのアプリに書き出しが可能だからです。
AS側で若干の調整が必要にはなりますが、コアのプログラムを弄る事は無いはず。

UI / UXの自由度

UI / UXの自由度がHTML / CSSより遥かに楽！
今日のWebデザインとしての主流は画像をなるべく使わずCSS3でデザインして構築ですが、Flashでも、もちろんIDEで直にShapeを書いたりASでShape or Spriteを描けます。
それにプラスして画面サイズを取るのが物凄い簡単なので、CSSで諸々調整して細かい調整（計算）はJSでという2度手間が省けるかと思います。

スマホじゃFlashダメじゃん

今回は管理するのに"Flash"を使っただけなので、スマホでこの管理サイトにアクセスする事はほぼないはず。
スマホには"Flash"から書き出されたAIRアプリがあります。
PCはまだまだ"Flash Player"のシェアは多いので問題無いはずです。

今回のコンテンツ管理ではセキュリティ面は考慮していませんが、実際はセキュリティ面の考慮がものすごい必要かと思います。
なのでFlash / PHPで暗号化なりをしてあげるといいかもです。

最後にちょっと流行りにのったBuild管理ツールについて

最後に管理つながりで最近の流行り？になっているBuild管理ツールgruntについて。

最近はHTML / CSS / JSを制作するのに、

• sass
• less
• coffeescript

などで作成する手法が流行ってるのですが、これらは最後にコンパイルしないとだめなので、このgruntツールを使用して行くと大変便利になります。

またこのgruntについては別枠でキッチリ記事を書かせていただきますので、細かい設定やらやり方は割愛しますが以下が参考になるかと思います。

• Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門
• Grunt導入してみた
• ビルドプロセスの自動化で効率アップ
• grunt.js0.4.0でJSとCompassをコンパイルする
• Gruntで快適な環境を整備したい！インストール編
• grunt を軽く触ってついでに livereload させてみた