新着情報

KCFinder on BaserCMS 2.0β

最近「管理画面が見やすいね!」と、お客様から評判の良い「BaserCMS 2.0 β」の改造ネタです。

納品前となり、お客さんにも投稿や編集などでかなり操作に慣れていただき始めていたんですが、
多忙な開発人の方々から「そろそろファイルアップローダーが公開されるかな~?」と思っていたんですが、
仕事で扱っているECサイトのカスタマイズで実装したついで(?)って事でKCFinderを組み込んでみました。

1. とりあえずはさくっとインストールしちゃいましょう!(エックスサーバーの場合)



BaserCMSを100回近くインストールしたせいか、慣れてしまって50秒弱。某CMSの約1/5の速度です。



2. スマートURL(mod_rewriteによるショートURL)設定



※ /www/app/webroot/.htaccess を書き込み可能なパーミッション(属性)に変更しています。
※ エックスサーバーだと、初期フォルダの.htaccessをサーバーから削除しておく事をオススメします。
※ 上記理由から、サーバーの設定状況の相違などにより内容が異なる場合があります。



3. とりあえず自作テーマにでも変更・・・。(ここはスキップして構いません)



なんだかここ最近、スライダー02をベースにして改造納品する事が増えてきています・・・。
そういうのもあって癖みたいな感じで選んでしまっているのかも?^^;



4. 固定ページ管理などに移動してCKEditorが正常に表示されていることを確認


「ひとりごと(たわごと?)」
えっと・・・。もし「可能であれば~」なんですけども削除ボタンを右端のセル位置とかcheckboxの左とか
今よりも間隔を空けていただくとかだと物凄く嬉しいです。きっと泣いて喜びます。
高速集中状態に入って無意識にページ編集などの作業をしている時に何度も削除してしまいました。(p_;)



5. CKEditorの「イメージボタン」をクリックした時の初期画面



現在、「URL欄」の右側は空白になっています。この状態が初期の画像編集画面です。



6. CKEditorの設定ファイルにKCFinderの設定ファイルを追記する


/baser/vendors/js/ckeditor/ にある「config.js」ファイルをダウンロードし、バックアップします。
そして、ダウンロードして複製したconfg.jsファイルにKCFinderへのパスを追記してください。

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	config.language = 'ja';
	config.filebrowserBrowseUrl 		= '/bc4/js/kcfinder/browse.php?type=files';
	config.filebrowserImageBrowseUrl 	= '/bc4/js/kcfinder/browse.php?type=images';
	config.filebrowserFlashBrowseUrl 	= '/bc4/js/kcfinder/browse.php?type=flash';
	config.filebrowserUploadUrl 		= '/bc4/js/kcfinder/upload.php?type=files';
	config.filebrowserImageUploadUrl 	= '/bc4/js/kcfinder/upload.php?type=images';
	config.filebrowserFlashUploadUrl 	= '/bc4/js/kcfinder/upload.php?type=flash';

//この行から下はKCFinderの設定とは異なりますので、削除して構いません。
	CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR; //<p>タグを<br />改行に強制変換
	CKEDITOR.config.height = '450px'; //CKEditorをカスタマイズしているので縦幅を広くしています。
//この行から上はKCFinderの設定とは異なりますので、削除して構いません。
};
※ 上記では、kcfinderへのパスに「/bc4/js/kcfinder/browse.php~」とありますが、
  ドメイン直下の場合には「/js/kcfinder/browse.php~」など、環境に合わせて変更してください。



7. 変更した「config.js」をFTPで上書きアップロードします。



「/baser/vendors/js/ckeditor/」ディレクトリへ、先ほど編集したconfig.jsを上書きします。
※ 念のため、サーバー上の元ファイルをリネームするなどして置いておくと安心です。



8. KCFinderをダウンロードし、設定ファイル「config.php」を編集




こちら の左メニューにある KCFinder web file manager のページから 本体をダウンロードします。
解凍後、展開されたフォルダ名が「kcfinder-2.51」となっていると思うので、先に一旦フォルダ名を
「kcfinder」に変更してから設定ファイルの編集をしておくことをオススメします。

[ config.php ]
21行目
    'disabled' => false,
初期状態では、「true」になっています。この場合は使えないので、「false」に変更します。

28、29行目
	    'uploadURL' => "upload",
	    'uploadDir' => "",
28行目 ここはパスで上手く動作しなかったのでURL記述方式に変更しました
29行目 本来はそのままで動くのですが環境によってはサーバー内のフルパスを記載します

97~101行目
	    '_sessionLifetime' => 30,
	    '_sessionDir' => "/var/lib/php/session",
	 
	    '_sessionDomain' => ".yourdomain.com",
	    '_sessionPath' => "/kcfinder",
97行目 初期状態はコメントアウト「//」が入っているのでその部分を削除します。
98行目 殆ど多くのサーバーでは「/var/lib/php/session」です。※ 私もいつもこの設定です
100行目 設置するサーバーのドメインを記載してください。
101行目 「/kcfinder」に書き換えてください。

編集が終わったら保存し「config.php」を含む「kcfinder」フォルダの
全てを「/app/webroot/js/」ディレクトリにアップロードします。



9. サーバー内のクリーンアップ(サーバーキャッシュの削除)



「システム管理」メニューにある「サーバーキャッシュ削除」の項目をクリックして、
クリーンアップしておきます。さらにブラウザのキャッシュ削除もした方が良いかも知れません。



10. 固定ページ管理(またはブログ管理)で画像ボタンをクリックして確認する



パス設定に問題がなければ上の画面のように「サーバーブラウザー」のボタンが出現します。

 ただし、この時点ではuploadディレクトリなどの保存箇所の環境依存が起きている事もあります。
その際には、利用されているサーバーの仕様などを確認しながら調整してみてください。



11. サーバーブラウザーボタンをクリックする



これまでの設定内容が正常に読み込まれていれば、上記のように日本語で表示されています。
しかし、これでもまだ動作上に支障がないか分からないのでアップロードをしてみます。



12. ファイルのアップロードを試してみる



「アップロード」ボタンを押すと、ご自身のパソコン内にあるエクスプローラーが起動するので
一つ、または複数のファイルを選択して「開く」ボタンでアップロードしてみてください。
※ ChromeやSafariなどのブラウザではドラッグ&ドロップでもアップロード出来るようです。



13. アップロードしたファイルが正常に表示されるか確認



アップロード後に正常に動作されていれば、上記のような画面となります。
この時点で左メニュー内の「images」を右クリックしてフォルダが作成出来るかなど
動作確認をかねて表示設定や最大化など、色々試してみられると良いかもしれません。



14. イメージプロパティで動作確認



先ほどの写真だと960pxと少し大きすぎたため、フォルダを作って小さめの写真で選択しました。



15. CKEditorの編集画面内での表示確認



ちゃんと写真データをCKEditorに受け渡し出来ているようですので、このまま保存してみます。



16. ページとして保存する



とりあえず、ページ名とタイトルを入力して保存してみます。



17. 作成したページで実際に表示されるか確認



上記サンプルURI:http://cielo-ds.xsrv.jp/bc4/kcfinder_on_baser

ここまで来れば問題なく設置が完了しています。(ローカルサーバー環境の場合は別です・・・。)
ただ、ここで今の状態ではとても危険な問題がある事に気がつきました。

「URLを直接入力されると誰でもアップロードや削除が出来てしまう」という可能性があります。



18. .htaccessを作成し、SetEnvIf設定で特定ドメインからの呼び出しのみ許可する



SetEnvIf Referer "^http://yourdomain\.com" ref_ok
order deny,allow
deny from all
allow from env=ref_ok

作成した.htaccessは、アップロード済みの「/app/webroot/js/kcfinder/」に置いてください。
また、環境によってはパーミッション(属性)を606または666などにする必要があります。

本来なら、おそらくBaserCMSの管理画面内で「ログインしているかどうか」、
または 「管理人であるかどうか($isAdmin)?」のようなログイン判定があるとは思うのですが、
なにぶんソースファイルを追いかけている時間と余裕がなかったのでこんな形に・・・。

上記のようなスタイル、または他で良い方法がありましたらご教授いただけると嬉しいです。m(_ _)m



19. .htaccess導入後の動作画面



KCFinderの画面内では画像がちゃんと表示されているのですが、「イメージプロパティ」だと
バツ印のアイコンが表示されました。ですが一応このまま「OK」を押してみます。



20. ソースボタンの切り替えで正常に表示されるのを確認



アップロードした直後と、イメージプロパティでは「×」となっていた画像ですが、
「OK」を押して編集画面に戻ってから「ソース」ボタンを押してみると、
画像へのパスに問題がなかったので再度「ソース」ボタンを押してみました。

すると、ページ内で正常に表示されていることが分かりました。 少し手間ですが、
投稿後に画像のサイズを変更したい場合には、アップロード完了後に
画像の右クリックでイメージプロパティからだと編集出来るようです。

一応、今回利用したKCFinder本体以外のサンプル設定ファイルを置いておきます。→ こちら

ご自身のファイルをそのままバックアップとして保存しておきたい方はどうぞご利用ください。

長文でしたが最後までお読みいただきました皆様、ありがとうございました。
プレスリリース   2012年04月01日   admin
タグ:新製品
このページの先頭へ戻る