4/5にリリースされた新しいbaserCMSは、21個も新機能が追加されて、どれも魅力的なものばかりです。先日baserCafeで色々教えていただいたので、その中でも、これはどこかで使えそうだと思ったものをいくつかご紹介します。

• 1. 初期データ書き出し・読み込み機能
• 2. 隠しコード機能
• 3. 固定ページレイアウト切り替え
• 4. コンテンツテンプレート
• 5. エディタテンプレート機能
• 6. エディタスタイルセット
• 7. WYSIWYGのエディタ内で利用するCSSを指定できる機能を実装
• 8. ブログアイキャッチ画像
• 9. スマホ携帯PC連動
• 10. アップローダーレイアウト(おまけ)
• 11. システム管理のメールSMTPポート設定(おまけ)
• 12. ブログカテゴリの追加が簡単になりました(おまけ)

1. 初期データ書き出し・読み込み機能

管理画面のテーマ管理のレイアウトが変わってとても見やすくなりましたね。テーマコンテスト2012グランプリ受賞テーマの「nada icons」も標準梱包テーマとして組み込まれています。そしてそこには、「初期データ読込」というボタンが追加されています。

このボタン、気軽に押してはいけません！
危険ボタンだけあって、ちゃんとアラートがポップアップして警告してくれますが、そこには以下のように書かれています。

初期データを読み込みます。よろしいですか？

※ 初期データを読み込むと現在登録されている記事データや設定は全て上書きされますのでご注意ください。
※ プラグイン管理情報、管理ログは読み込まれず、ユーザー情報はログインしているユーザーのみに初期化されます。

システム管理的な情報も、固定ページのコンテンツも、頑張って書いたブログも全て初期状態に戻ります。

でもこれ、ちゃんと使えばとっても便利な機能なんです。
よく制作するサイトに共通点がある場合とかは、マイ初期データを作っておいて、それを読み込んでから作り込むと同じことを何度もする必要がなくなります。素敵ですね！

さっきのテーマ管理ページのサブメニューにある、「テーマ用初期データダウンロード」リンクをクリックして、サイトとして作り込んだデータをダウンロードします。

初期データ読み込みの時と同じように、アラートが表示されます。

現在のデータベースの状態を元にテーマ用の初期データを生成しダウンロードします。よろしいですか？
ダウンロードしたデータは、配布用テーマの

/{使用しているテーマディレクトリ}/config/data/

内に配置してください。

アラートに出ているように、テーマディレクトリの中に、configというディレクトリを作成して、その中にdataというディレクトリを作成します。初期データのアーカイブがダウンロードできるので、それを解凍したものを作成した

/{使用しているテーマディレクトリ}/config/data/hogehoge/

の中に配置します。hogehogeは初期データ名になります。自分の好きな名前を付けてください。
すると、「初期データ読込」ボタンの左側にあるセレクタの中に、作成した初期データが選択できるようになるので、選んで読み込みます。

ここで注意なのですが、初期データをダウンロードした時の「現在のテーマ」の情報も一緒にダウンロードされます。これを読み込むと、現在のテーマも書き換えることになります。ダウンロードした時のテーマと読み込み先のテーマが同じなら問題ないですが、もし違う場合はいきなりテーマが変わってしまってびっくりするかもしれません。もし読み込み先にそのテーマが存在しない場合はエラーになってしまいます。
そこで、初期データを読み込んでも「現在のテーマ」を書き換えないようにするための方法があります。

初期データの site_configs.csv というファイルを開いて見てみると、現在のテーマの情報として、

"","theme","noda-icons","",""

という行があるので、その情報をからっぽにしてしまいます。

"","theme","","",""

こうしておくと、読み込んだ時にテーマが変わってしまうということはなくなります。

例えばローカル環境で開発して、固定ページもお問い合わせも作り込んで、グローバルナビも設定して、ブログのレイアウト指定なんかもしている場合、制作完了していざ本番サーバーへ乗せ替えるぞ！なんて時は、サーバーの管理画面でもう一回同じことしないといけないなんて面倒くさいですよね。
SQLダンプしてサーバーにインポート、というプログラマ的な解決方法もありますが、この機能を使えば気軽に簡単に乗せ替えすることができるのです。

ローカルからサーバーへの乗せ替えの場合は、初期データというよりは完成データなのですが、baserCMS的にはダウンロード＆読み込みできるデータは初期データという名前で扱うようです。
私はこの使い方で利用することが多くなりそうです。便利そうですよね！

2. 隠しコード機能

固定ページの中にソースビューでphpやjsを書くことってたまにありますよね。たとえばレイアウトを指定したり、ちょっとしたjsを書いたり。でもデザインビューで編集していると、知らない内に削除してしまったりってあると思います。特に、自分で更新する場合はいいけれど、別の方が管理する時にはちょっと心配になりますよね。そんな時にこの隠しコードに記述しておくと、安心です。
隠しコードは、固定ページ下部のオプションボタンをクリックすると出てきます。オプションの中に隠れているから隠しコードってことですね？ね！？

本来の目的とは外れるかもしれませんが、実はこのフィールド、PHPやJSに限らずHTMLも書けちゃいます。入力したコードは、自動的にコンテンツ本体の上部に差し込まれるので、普段編集しないようなタイトル兼メイン画像なんて入れておくことにも使えるということになります。一応、baserCMSのルール的にはPHPやJSを入れた方がいいのかもしれないです。

3. 固定ページレイアウト切り替え

この固定ページだけレイアウトファイルを別のものにしたいって言うときは、直接ソースの中に

<?php $bcBaser->layout('fugafuga'); ?>

とか書いてましたよね。今回追加されたレイアウト切り替え機能は、カテゴリ単位でレイアウトファイルを設定することができるものです。
固定ページカテゴリーの登録または編集時に、オプションバーをクリックすると選択できるようになります。

レイアウトファイルは今までと同じく、

/{現在使用しているテーマディレクトリ}/layouts/

の中に作ってくださいね。カテゴリごとに一括してレイアウトを変更できると、楽に制作の幅を広げることができそうですね！

カテゴリ単位だけでなく、全体の固定ページレイアウトも変更できるようになったようです。今まで全体の固定ページレイアウトは、default.phpと決まってましたが、これもシステム設定で変更することができるようになってます。オプションバーを開いて「固定ページ関連」で設定してください。

4. コンテンツテンプレート

この機能も上記の固定ページレイアウトと同じくカテゴリ単位で指定できるテンプレートです。ページレイアウトとどう違うの？という疑問を分かりやすく解決するためにイラストにしてみました。

コンテンツレイアウトは、ページレイアウト内の

<?php $bcBaser->content() ?>

の中だけのレイアウトファイルになります。

コンテンツレイアウト内に

<?php $bcPage->content() ?>

を記述することで、管理画面のエディタで入力したコンテンツがその場所に表示されます。複雑なレイアウトも可能ですが、基本的にはコンテンツの上下に差し込むイメージなので、カテゴリごとのヘッダーやフッターを入れることなんかが可能になります。

レイアウトファイルは、

/{使用しているテーマフォルダ}/pages/templates/

の中に設置することで選択できるようになります。

5. エディタテンプレート機能

この機能は、よく使うレイアウトをテンプレートとして登録しておくことで、WYSIWYGエディタで呼び出すことができるというものです。WYSIWYGエディタのツールバーに新しいアイコンが登場してますね。

これをクリックすると、テンプレート選択ウィンドウがポップアップします。

「現在のエディタの内容は失われます」とありますが、エディタ内の記事を残したい場合は、一番下のチェックボックスのチェックを外すと追加で差し込んでくれます。もし間違えてまるまるっと入れ替わってしまった時は、Ctrl+Zで戻すこともできるようです。これはブラウザの機能なので絶対戻せるとは限りません。

• ・画像(左)とテキスト
• ・画像(右)とテキスト
• ・テキスト2段組

baserCMS本体に上記3つのテンプレートが準備されています。システム設定のサブメニュー「エディタテンプレート管理」で追加登録や編集することができます。初期状態のテンプレートは画像がテキストになってますので、サンプル画像と入れ替えて登録しておくことも可能です。

例えば、似たようなレイアウトのページを増やす時に、元になる固定ページやブログ記事の編集画面を開いて利用したい箇所のコンテンツをコピーしてから、新規作成した編集画面でペーストした後に必要な部分だけ修正して作成するというとても面倒なことをしたことがあります。それが納品物だったりすると、お客さまに同じことをしていただくのは申し訳ないなあと思っていました。かと言って、一から作っていただくのはもっと難しいですよね。そんな時に、今回追加されたこのエディタテンプレートが役に立ちそうです。

このエディタテンプレートを登録しておくと、1. 初期データ書き出し・読み込み機能で紹介した初期データに一緒にテンプレートの情報も書き出されることになります。

6. エディタスタイルセット

WYSIWYGエディタ内でデザインを適用する「スタイル」を管理画面から編集することができるようになりました。

このスタイルとは、エディタ内でテキストを予め選択状態にしておいてから、スタイルの種類を選ぶというものです。テキストの色を変えたり大きさを変えたりすることができます。

このスタイルの項目を編集するには、システム設定下部のオプションバーをクリックして「エディタ設定関連」の「エディタスタイルセット」を編集します。スタイルシートの形式で記述できるのはとても嬉しいですね。

また、スタイルを設定するところの上にあるエディタの改行モードの変更は今まで無かったと思いますが、改行時に自動的に<p>タグで括られていたのが、<br>タグと選択して利用できるようになったみたいです。

7. WYSIWYGのエディタ内で利用するCSSを指定できる機能を実装

WYSIWYGエディタでスタイルを確認しながら編集できるという機能が、新しいバージョンで追加されました。

/{使用しているテーマフォルダ}/css/editor.css

上記の様にスタイルシートを作成して、その中にスタイルを追加していきます。トップページのエディタだけなど個別に指定するようなことはできないみたいです。ですので、最低限の共通スタイルになるのかなと思います。

ところが、、、エディタ適用されないーーー！

どうやら何かの不具合があるようです。対策されるのを待ちましょう。
と言っている間に修正パッチが配布されたという情報をいただきました！早いですね！！

修正パッチはコア開発プロジェクトのページから取得できます。

• 1. 上記リンクのページから「bc_ckeditor.php」というリンクをクリックして下さい。
• 2. ファイルの中身（ソース）が表示されますが、ソース表示の上のところに「ダウンロード（13.2KB）」というリンクがあるのでクリックします。
• 3. 「bc_ckeditor.php」というファイルのダウンロードが始まりますので、ダウンロードしてください。
• 4. ダウンロードしたファイルを、利用しているbaserCMS2.1.0の以下のフォルダにコピーします。すでに同名のファイルが存在しているはずですので、上書きコピーになります。

■ファイルのコピー場所

/baser/views/helpers/
（同名ファイルが既に存在していますが、上書きしてOKです。）

上記の手順を踏むと、修正が適用され正常にエディタCSSが適用されるようになります。

フォーラムの記事を参考にさせていただきました。

このeditor.cssを空の状態で設置すると、初期状態で登録してあるエディタテンプレート3つのスタイルが、WYSIWYGエディタ内できかなくなってしまいます。

/baser/vendors/css/ckeditor/contents.css

このファイルにスタイルが書かれてあるので、中身をまるっとコピーして先程設置したeditor.cssの中に保存しておきましょう。新たにエディタテンプレートを追加した時もこのeditor.cssにテンプレート用スタイルを記述しておくことで、テンプレートが使いやすくなりますね。

8. ブログアイキャッチ画像

ブログにアイキャッチ(サムネイル)アップロード機能が追加されました。記事の編集画面で追加と上書きと削除ができます。

アップロードするだけでは表示されないので、テンプレートの方で呼び出してあげる必要があります。

<?php $blog->eyeCatch($post) ?>

これで呼び出すことができます。呼び出す時には、$postsのforeach文の中に記述します。

<?php foreach($posts as $post): >
// ここに記述
<?php endforeach; ?>

この呼び出しにはオプションを追加することができます。オプションは配列形式で渡します。

<?php $blog->eyeCatch($post, $options) ?>

例　<?php $blog->eyeCatch($post, array('alt' => 'アイキャッチ画像', 'link' => false)) ?>

オプション一覧

アイキャッチアップロード時に、元画像・PCサイズ・携帯サイズの3サイズの画像が保存されます。ブログの設定画面でブログごとにアイキャッチ画像サイズを設定できます。PCサイズは300x300px、携帯サイズは100x100pxが初期設定になってます。

※windowsローカル環境で開発している場合、アップロード時にパスが\でDBに保存されるので注意が必要です。アップロードしてファイルも存在するのに表示されない時は、画像パスを確認してみてください。

9. スマホ携帯PC連動

スマートフォンとモバイルを対応するということは、それぞれ専用のレイアウトで専用の固定ページコンテンツをPCサイトとは別に作成するということです。ユーザーエージェントで判断して、それぞれのアドレスに自動的にリダイレクトしてくれます。
システム設定に「モバイル」と「スマートフォン」の対応について選択できる場所があります。モバイルはいわゆる「ガラケー」と呼ばれる携帯電話だと思っていただいて大丈夫です。

私は大抵スマートフォンは対応しないを選ぶのですが、特に必要がない場合は対応しないを選ぶことで、PCサイトを表示してくれます。モバイルは表示サイズの範囲内であればという制限付きですが表示してくれます。この場合は、レイアウトと固定ページコンテンツはPC用一つを準備すれば大丈夫です。レスポンシブデザイン時に最適ですね。

レイアウトはPCサイトとは別に用意したいけど、固定ページコンテンツはPCサイトと同じでいいのだけど・・・ということもあると思います。

今回の新バージョンで、「対応する」を選んだ場合、固定ページをPCとを連動するかどうか選択できるようになりました。今までは選ぶことができずにそれぞれ固定ページのコンテンツを作成しなくてはならなかったのですが、連動できるようになったことでレイアウトはスマートフォンやモバイルのもので、固定ページコンテンツはPCのコンテンツを表示してくれるようになり、制作・更新が楽になりました。

また、連動する設定にした状態で固定ページ編集画面のオプションバーを開くと、一番下に「このページだけ連動しない」というチェックボックスが現れます。ここにチェックするとコンテンツもスマートフォン・モバイル専用に別に作成することで表示させることができます。

10. アップローダーレイアウト(おまけ)

baserCMSのアップローダープラグインは必ずと言っていいほど毎回利用させていただいてます。本体に同梱されていないプラグインですが、今回のbaserCMSバージョンアップに合わせてこのプラグインも新バージョンがリリースされました。

アップローダー2.1.0ダウンロード

変わったところはレイアウトタイプを選べるようになったことです。

パネル(今までのレイアウト)

テーブル(新しく追加されたレイアウト)

新しいレイアウトはbaserCMSの管理画面っぽくなってますね。個人的にはテーブルの方が見やすいと思います。

11. システム管理のメールSMTPポート設定(おまけ)

ポートの設定が新たに追加されました。

この機能は、baserCMSを設置したサーバーのメール送信機能が使えない時に設定することで、設定したサーバーを利用してメール送信できるというものです。例えばローカル環境に構築した場合、サーバーの難しい設定をしなくてもお問い合わせや新着コメントメールが送れるようになります。
今まではポートの設定項目がなかったと思いますが、新しいバージョンでは追加されたようです。これで利用できるメールサーバーの範囲が増えましたね！

12. ブログカテゴリの追加が簡単になりました(おまけ)

キャプチャ画像を見たらすぐ分かっていただけると思いますが、ブログ機能のカテゴリ追加が記事の追加・編集中でもできるようになりました。今までカテゴリは別ページで登録しなければならなかったので、今回のアップデートで更に使いやすくなりました。

以上でbaserCMS2.1.0の新機能紹介を終わらせていただきます。ユーザーの要望に応えて少しずつ便利になっていくbasreCMS。今後のバージョンアップではCakePHP2の対応も予定しているそうです。コア開発に協力してくれる方やプラグインを開発してくれる方が増えていってくれると嬉しいです。