CPI ACE01 サーバーアップデートに関するお知らせ

CPI ACE01サーバーのアップデート

a-blog cmsの簡単インストールなどもあり、ACE01共有サーバーをご利用の方も多いかと思います。 そのACE01がサーバーのアップデートを行う事になり、弊社にもお問い合わせが多くくているので、ここで情報を整理したいと思います。

ACE01 ウェブサーバーに関する重要なお知らせ(公式)

アップグレード内容

大きく2つのアップデートがあります。Apacheのバージョンアップについては得にCMSで対応しないといけない事はありませんが、WAFについては注意が必要です。これについては後述します。

  • Apache バージョンアップ 1.3 系→2.2系 に変更
  • WAF 機能の提供開始

コンフィグ

a-blog cms の設定をコンフィグと呼びます。このコンフィグはブログ毎に管理されており個別の設定ができるようになっています。また、下記のyamlファイルがコンフィグの初期値を設定しているファイルになり、ブログ新規作成時のコンフィグになります。

/private/config.system.default.yaml

一部のコンフィグの設定は、管理ページ内のコンフィグ管理のページで変更できます。主に以下の3つのグループに分かれた設定がブラウザ上でできるようになっています。

  • ブログの設定
  • エントリーやユニットの設定
  • モジュールの設定

後半で紹介するルールやモジュールIDでもコンフィグの設定は出てきますが、ここで紹介するコンフィグについては、ブログ(システム)の基本設定という位置づけになります。


a-blog cmsのコンフィグ管理のページ

a-blog cmsのコンフィグ管理のページ


ブログ設定

機能設定のページに、キャッシュの設定があります。大事な機能ですので、ここで紹介しておきます。a-blog cms では、アクセスがあった時に、アクセスがあったページのデータを作ります。作ったページのデータをサーバ上に保存しておき、同じページへのアクセスがあった際には、このデータをそのまま使うようにします。それがキャッシュ機能といいます。

このキャッシュ機能はサイト制作中は変更した部分をすぐに確認できないことから、通常オフになっています。 config.server.php の最後に以下のような設定があります。この 1 と設定されている部分を 0 にする事で、デバッグモードがオフの状態になり、キャッシュ機能が利用できるようになります。

define('DEBUG_MODE', 1);

「キャッシュの有効時間」や、子ブログが更新されたときにキャッシュをリフレッシュするのか指定する「キャッシュの感度設定」、「クライアントのキャッシュの時間」を設定すると、この時間内はクライアント側のキャッシュが使用され、サーバにアクセスしないということになります。そのため、ページが更新された場合に反映されないことがあり、管理ページにログインしたときにブラウザの再読込ボタンを押したり、キャッシュを消したりしないとページが切り替わらないことがあります。

エントリー設定

エントリーの設定をしっかりすることで、日々の記事を更新する人にとって使いやすいCMSになるか、そうでないかが違ってくる大切な設定画面になります。

デフォルトの設定ではメインカラムの幅が680pxのときに最適な設定になっておりますので、幅が違う際には各種サイズを見直しする必要があります。

ユニット追加ボタン

以下のボタンは管理ページ側ではなく、一般ページのエントリーの下のほうに表示されますが、そのボタンの設定をするのがユニット追加ボタンの設定です。


スクリーンショット:編集ページ内ユニット追加ボタン

ユニット追加ボタンの設定では、エントリーを編集・追加等を行うボタンを設定することができます。このボタンについては、Entry_Bodyモジュール内に以下のように記述されています。

<!--#include file="/admin/entry/edit.html"-->
<!--#include file="/admin/entry/add.html"-->

管理画面内ユニット追加ボタンの項目

管理画面内ユニット追加ボタンの項目


編集ページのユニット追加ボタンの項目にて、並び順を変更するとボタン側も変更することができます。また、こちらで設定を追加をし、編集ページにボタンを追加することも可能です。

  • モード 拡張(入力欄:3image)
  • ラベル 写真3枚追加

のような設定を追加し、保存します。

ユニット設定

上記の続きになります。ユニット追加ボタンで設定を追加後は、編集設定の横にあるユニット設定を行います。


管理画面内コンフィグのエントリーのメニュー

管理画面内コンフィグのエントリーのメニュー


そして、管理ページ>コンフィグの順に移動したユニット設定のページに、さきほどのボタンの画像と同様の並び順で設定されていることが確認できます。

このユニット設定のページでは、新規エントリーの追加ボタンや、テキスト、画像といったユニットの追加ボタンを押した際の初期状態の設定が行えます。そして、上記で「写真を3枚追加」というボタンを追加したので、以下のようなエリアが用意されます。


ユニット設定に追加された写真を3枚追加のユニット

ユニット設定に追加された写真を3枚追加のユニット


画像の追加ボタンを3回押し、それぞれの画像ユニットに画像の配置を左に設定し、小さめの画像のサイズを設定すると、ボタンを押した際に3つの画像ユニットを表示させるボタンを作ることができます。

このようにユニット設定で、事前に利用するようなセットのボタンを作ってみたり、画像のサイズを事前に適切なサイズにしておきましょう。

過去作ったサイトがある場合は、そのサイトのこのユニット設定を再度確認してみて下さい。画像のサイズが「そのまま」になっている場合は、どれかサイズを指定しておきましょう。きっと、クライアントは毎回サイズを手で設定しているハズです。

テキストタグセレクト

また、管理ページ>コンフィグの順にエントリーの編集設定のページに戻って、テキストタグセレクトの説明になります。

テキストユニットのタグを指定するための設定になります。基本的なHTMLのタグに加えて、none, markdown, wysiwyg という特別なタグが設定できます。この中にないものを追加する際には /include/unit.html をカスタマイズする事で表示が可能になります。

<!--#include file="/include/unit.html"-->

この unit.html は、a-blog cms のユニットそのものであり、ユニットで表示されるタグについては、このファイルでコントロールされています。このファイルを理解することがユニットのカスタマイズを攻略する近道かもしれません。


管理画面内テキストタグセレクトの設定

管理画面内テキストタグセレクトの設定


そして、管理ページのテキストタグセレクトを編集し、以下のようなテキストユニットのプルダウンをカスタマイズすることができます。


テキストユニットのプルダウンに管理画面の設定と同じ内容が表示されている

編集ページのテキストユニット


このテキストタグセレクトのタグエリアには、通常のHTMLタグだけでなくCSSのクラスを指定することが可能です。

p.price

のように指定する事で<p class="price">〜</p>のようにすることもできます。あとはラベル側を"商品価格" のようにクライアントが理解しやすいラベルを指定し、商品の値段を表示させたいときはこの"商品価格" を利用することが可能になります。

ユニットグループ

ユニットグループの設定では、指定したユニットを囲んでいるDIVのクラス名を設定することができます。一般的には、ユニットグループの設定で指定したDIVのクラス名に、あらかじめスタイルシートにフロートと幅を指定し、段組レイアウトを実現します。


編集設定のユニットグループ

編集設定のユニットグループ


これらのスタイルはa-blog cmsに同梱しているacms.cssというCSSのグリッドシステムが使えるようになっております。acms.cssにないスタイルを適応する場合は、オリジナルのテーマ内のCSSに記述してください。

大体の場合ではメインコンテンツのサイズによってユニットグループのサイズをいくつに設定するか決まるので、設定する前にメインコンテンツのサイズを決めることがオススメです。


3カラムで並んだエントリー内コンテンツ

3カラムで並んだエントリー内コンテンツ


サイズセレクト

ユニットグループと同様に、画像や地図、動画のサイズを事前に設定しておき、クライアントにはサイズを手動で入れさせず、選んで頂くだけという操作方法が a-blog cms のエントリー上に貼られるコンテンツの作りかたになります。


編集設定のサイズセレクト

編集設定のサイズセレクト


オススメの「サイズ」の設定としては、大画像はメインコンテンツの幅、中画像は2つの画像を並べるサイズとして(メインコンテンツ+余白)÷2-余白、小画像は3つの画像を並べるサイズとして(メインコンテンツ+余白)÷3-余白と設定します。

例:メインコンテンツ680px、余白20px(左右10pxずつなので合計20px)

  • 大 680px
  • 中 330px
  • 小 214px

なお、このとき、小画像のときに小数点が出てきます。小数点がある場合は余分は余白が発生しないように1px大きめに設定します。

「表示サイズ」の設定では、クラス名か%を指定します。表示サイズを設定しなかった場合、さきほどの「サイズ」で指定した数値がpxとして表示されますので、レスポンシブウェブデザイン対応する場合は「表示サイズ」の設定もしてください。クラス名を記述する際は、acms.cssのグリッドシステムのクラスを適応し、使うこともできます。

オススメの「表示サイズ」の設定としては、大画像を全幅、中画像を1/2幅、小画像を1/3幅で設定します。

  • 大 acms-col-md-12 または 100
  • 中 acms-col-md-6 または 50
  • 小 acms-col-md-4 または 33.333

モジュール設定

モジュールの個々の初期設定が可能です。初期設定をブラウザから変更する際にはこちらを修正するのですが、実際にサイトを構築していくときには、利用するモジュールに モジュールID という個々の名前をつけて運用する事が多くなり、こちらの設定はあまり利用しないことが多いです。

また、モジュールの設定画面の右上には、ショートカットに追加というリンクがあります。この設定を使い、クライアントに設定しやすくするためのリンクをダッシュボード上に用意することができます。ショートカットを設定することで、どこを更新できるのかクライアントにも分かりやすくする効果があります。


モジュールのコンフィグ画面

モジュールのコンフィグ画面

URLコンテキスト

a-blog cmsでは、表示しているページがWebサイトのどこなのか、どのような状態であるかをURL上のパスとして表現しています。これを URLコンテキスト(URLによって表現されるページの文脈情報)と呼びます。個々のモジュールはURLコンテキストの情報を元に、表示するコンテンツを決定しています。

URLコンテキストと3つの基本ページ

詳しくはテンプレートの章で紹介しますが 、a-blog cms の基本ページとして、トップページ・一覧ページ・詳細ページがあります。

トップページ

一般的な運用として Webサーバのドキュメントルートに a-blog cms が設置された場合には、この状態でトップページが表示されます。また、個別のディレクトリ内に設置することも可能で、その際には、設置先のディレクトリまで指定した状態がシステムとしてのトップページという扱いになります。

http://www.example.com/

一覧ページ

URLがスラッシュで終わっている状態のとき、基本的には a-blog cms では一覧ページが表示されます。

http://www.example.com/news/

詳細ページ

URLが.htmlで終わるようなときには、エントリーの詳細ページが表示されます。

http://www.example.com/news/entry-1.html

URLコンテキストとモジュールの関係

場所的なコンテキスト

ブログコード、カテゴリーコード、エントリーコードのような、Webサイトの場所を表すURLコンテキストが影響し、ページ内のモジュールはその場所に沿った情報を表示します。

www.example.com というサーバの appleple というブログの news というカテゴリーの一覧を表示する場合は以下のようなURLになります。

http://www.example.com/appleple/news/

www.example.com というサーバの appleple というブログの news というカテゴリーの entry-1.html という一記事を表示する場合には以下のようなURLになります。

http://www.example.com/appleple/news/entry-1.html

www.example.com というサーバのルートブログの news というカテゴリーの campaign という子カテゴリーの一覧を表示する場合は以下のようなURLになります。

http://www.example.com/news/campaign/

状況的なコンテキスト

キーワードやタグによる検索、日付、ページ等の情報が含まれていた場合も、モジュールが表示する情報が影響し、情報を絞り込んで表示することができます。

2ページ目を表示する場合は以下のようなURLになります。

http://www.example.com/news/campaign/page/2/

「2009年6月」を表示する場合は以下のようなURLになります。

http://www.example.com/news/campaign/2009/06/

ここでは、簡単なURLコンテキストのみを紹介しました。カスタムフィールドの検索を含むURLコンテキストについては、カスタムフィールドの章で紹介します。