CodeIgniter2.xによる簡易CMSの試作（その01）
- admin
- 2015年6月25日
WordPressがCMS（コンテンツ・マネージメント・システム）として世界最大のシェアを占めていると思いますが、中身についての解説書はあまりありません。最近、オライリーよりWordpressの構造についての解説書が出始めましたが、MVCアーキテクチャを有したものではないようです。そこで、CodeIgniterを使って、簡易CMSの試作を行っています。
実は、サイト管理者の家内があるサイトを作ってくれというので、作ったんですが、難しすぎるということでしばらくおあずけ。ただし、あまり仕掛けを作らないサイトなら、簡単に出来ることがわかりました。
それでも、少しさびしい。ということで、管理機能付きのブログサイトを作成しているところですが、最低限の機能を有するものは作れそうです。①サイトの構造はヘッダー、左サイド（サブ）、右サイド（メイン）、フッターの４つの部分からなる②フロントエンドは投稿記事のカテゴリー別表示機能を持つとともに、問い合わせ機能、バックエンドへのログイン・ログアウト機能を持つ③バックエンドは、画像アップロード機能を持った投稿記事作成機能付きのエディタ（CKEditorの最新版）とGrocery_CRUD（こちらが本家サイト。最新版の1.5.1は2.x/3.xの双方に対応しています）を使った投稿記事管理機能を持つーなどを当面の目標としています。
JavaScriptで作成したエディタはTiny Mce Advancedがありますが、Grocery_CRUDがCKEditorを採用しているので、エディタもこちらの最新版を使っています。本家は、http://ckeditor.com/です。ただし、CMSで大事な画像や動画の投稿機能はCKEditorには含まれていません。これは、Tiny MCE Advancedも同じだと思います。そこで、画像や動画の投稿機能を付加するプラグインがあり、CKFinderとKCFinderがありますが、設定が何となく簡単だったので、KCFinderにしました。
CodeIgniterにassetsディレクトリがありますが、/var/www/cisites/ci20/assets/grocery_crud/texteditorこの中にckeditorがありますので、ここに、kcfinder（本家サイトは、http://kcfinder.sunhater.com/）を突っ込みます。そして、ckeditorのconfig.jsの設定ファイルに次のようにKCFinderとの連携の設定をします。
/**
* @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
// by Nomura Michiaki ← http://www.pro-s.co.jp/engineerblog/wordpress/post_4290.html
//高さ
CKEDITOR.config.height = '350px';
// スペルチェック機能OFF
CKEDITOR.config.scayt_autoStartup = false;
// テンプレート挿入時に編集中の内容と置き換えるデフォルトのチェックを外す。
CKEDITOR.config.templates_replaceContent = false;
// Enterを押した際に改行タグを挿入
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
// Shift+Enterを押した際に段落タグを挿入
CKEDITOR.config.shiftEnterMode = CKEDITOR.ENTER_P;
// フォーマットタグの指定
CKEDITOR.config.format_tags = 'h2;h3;h4;h5;h6;pre;div';
// 編集領域にCSSファイルを読み込みたい（複数）
CKEDITOR.config.contentsCss = ['/css/mysitestyles.css', '/css/anotherfile.css'];
// 編集領域にclassを指定したい
CKEDITOR.config.bodyClass = '';
// 編集領域にidを指定したい
CKEDITOR.config.bodyId = '';
// KCFinder用
CKEDITOR.config.language = 'ja';
CKEDITOR.config.filebrowserBrowseUrl = '/assets/grocery_crud/texteditor/kcfinder/browse.php?type=files';
CKEDITOR.config.filebrowserImageBrowseUrl ='/assets/grocery_crud/texteditor/kcfinder/browse.php?type=images';
CKEDITOR.config.filebrowserFlashBrowseUrl = '/assets/grocery_crud/texteditor/kcfinder/browse.php?type=flash';
CKEDITOR.config.filebrowserUploadUrl = '/assets/grocery_crud/texteditor/kcfinder/upload.php?type=files';
CKEDITOR.config.filebrowserImageUploadUrl = '/assets/grocery_crud/texteditor/kcfinder/upload.php?type=images';
CKEDITOR.config.filebrowserFlashUploadUrl = '/assets/grocery_crud/texteditor/kcfinder/upload.php?type=flash';
};
なお、「CKEDITOR.」を付加しないと、サイト管理者の場合、config.jsの設定が反映されませんでした。後は、kcfinder/conf/config.phpの設定ファイルをつぎのようにします。
$_CONFIG = array(
// GENERAL SETTINGS
'disabled' => false, //true
'uploadURL' => "../upload/", //"upload"
'uploadDir' => "../upload/",
'theme' => "default",
とすると、画像はkcfinder/uploadに投稿され、エディタ上に表示されます。
なお、エディタを使わずにテキストを入力する場合は、<textarea></textarea>を使うと思いますが、CKEditorの場合、<textarea class=”ckeditor”></textarea>とすれば、エディタ化出来るようです。冒頭に述べたWordpressの構造の解説書は次の二書です。
 |
 |
特に、後者の人気は高いようです。