Tech BLOG

SNS SHARE

BaserCMSで会社HPをリニューアルしました

2020/10/19
技術開発 ソフトウェア開発
アプリケーションエンジニア 難波 アプリケーションエンジニア 難波

CMSの選定

こんにちは、アプリケーションエンジニアの難波です。

10/1 にBraveridgeのHPをリニューアルしましたが、BaserCMS (4系)で構築しています。
旧HPはWordPressで構築されていましたが、処理速度と管理画面のUIに関して不満がありました。
そこでいくつかCMSを検証して、以下の理由からBaserCMSを採用することにしました。

  1. 自社でカスタマイズするのでOpenSource
  2. シンプルなUI
  3. 軽快な動作
  4. 脆弱性などイシューに対する対応の早さ
  5. サイト内検索や問い合わせフォーム、RSS読み込みなど機能的に十分

BaserCMSで構築するに当たって以下の点に気をつけました。

  1. CMSの機能をフルに使用することで逆に更新しにくくなってしまう
    1. 旧HPでは管理画面でグローバルメニューを含め全てのコンテンツを更新できるようにしていました。
      その為、ページ構成を少し変更するだけでもWordPressを熟知している必要がありました。
    2. 新HPでは各コンテンツ毎に更新頻度を考慮して、DBに登録するか、テンプレートファイルにHTMLを記述するか切り分けをしています。
  2. デザインと機能の分離
    1. グローバルメニューは Layuouts/default.php に直接HTMLを記述しています。
    2. サイト内検索のフォーム出力は $this->BcBaser->siteSearchForm(); を使用せず、できるだけHTMLを直接記述しています。
PHP

<?php $url = array('plugin' => null, 'controller' => 'search_indices', 'action' => 'search'); ?>
<?php echo $this->BcForm->create('SearchIndex', ['type' => 'get', 'url' => $url, 'class' => 'search']) ?>
<input type="text" name="q" class="search__window" value="<?php echo (isset($query) ? implode(' ', $query) : '') ?>">
<input type="hidden" name="f" value="119">
<input type="submit" value="検索">
<?php echo $this->BcForm->end() ?>

使用したプラグイン

  1. 履歴管理
    コンテンツを更新前の状態に戻したいことはよくあります。とても重宝しています。
  2. OGP
    ニュースリリースや製品情報をSNSで発信するときに、シェアするテキスト・画像が自動でセットされてとても便利です。
  3. PetitCustomField4+
    製品情報はテキスト検索・カテゴリーとタグによる分類が必要だったので、BaserCMSのブログ機能を利用しています。
    ですが、製品名以外に型番や、製品取扱説明書や製品仕様書など添付ファイルが追加項目が必要なので、このプラグインで登録できる項目を追加しています。

    一部エラーが発生して動作しない箇所があったので修正しています。

  4. ShortURL
    BaserCMSのブログでは記事毎にURLを発行できません。
    ですが、以前の製品のニュースリリースなどで旧HPのURLでアクセスされる事を考慮する必要があるので、リンク先の記事を参考にURLルーティングプラグインを作成しました。

 

CKEditorのカスタマイズ

コンテンツの更新はWYSIWYGエディタであるCKEditorを使用しています。
ですが、default設定のままでは意図しない動作をしていたので設定ファイル（theme/admin-third/js/admin/vendors/ckeditor/config.js）を以下のように変更しています。
特に CKEDITOR.dtd.a.p = 1; の部分は、マークアップされたHTMLを管理画面から登録するとたまに画面が崩れる事があって、原因を突き止めるのに苦労しました。

JavaScript

CKEDITOR.editorConfig = function( config ) {
  CKEDITOR.dtd.a.p = 1;
  CKEDITOR.dtd.a.div = 1;
  CKEDITOR.dtd.a.figure = 1;

  config.templates_replaceContent = false;
  config.allowedContent = true;
  config.contentsCss = '/css/style.css';

  if (location.pathname.startsWith('/admin/blog/')) {
    config.bodyClass = 'the_content';
  }
};

CKEDITOR.on( 'instanceReady', function( ev ) {
  var writer = ev.editor.dataProcessor.writer;
  writer.setRules('br', {
    breakAfterOpen : false
  });
});

パートナー企業専用コンテンツ

Braveridgeのパートナー企業様用に専用のコンテンツ(価格表やリーフレット)を提供するページが必要だったので、BaserCMSのプレフィックス認証機能を利用してログイン機能を実現しました。

基本的には公式ガイドの通りに実装するだけで機能としてはすぐ実現できましたが、デザインを適用するときに問題が発生しました。
管理画面の拡張機能として実装されているのか、使用するthemeが admin-third となっていた為、admin-thirdにLayouts/admin/partner.php を追加する事で対応しました。
追加したlayoutファイルはapp/Controller/MembersController.phpで以下のように指定しました。

JavaScript

class MembersController extends UsersController {
 public $name = 'Members';
 public $uses = ['Member', 'UserGroup'];
 public $layout = 'partner';
}

リリース時の失敗談

新HPの準備は new-www.braveridge.com という風にサブドメインを発行して、旧HPとは別サーバで行いました。
旧HPから新HPへの切り替えはDNSの変更だけだと思っていたのですが、実は管理画面 -> サイト基本設定で「WebサイトURL」を変更する必要がありました。その為、DNS切り替え中は新HPが正しく表示できませんでした。もちろん管理画面にログインできません。

設定値はDBに保存されていると思いテーブル内を検索しても見つからず、かなり焦りました。

app/Config/install.phpの以下の部分を更新する事で事なきを得ました。

JavaScript

Configure::write('BcEnv.siteUrl', 'http://www.braveridge.com/');
Configure::write('BcEnv.sslUrl', 'https://www.braveridge.com/');

まとめ

BraveridgeHPのリニューアルについて「BaserCMSの導入」という側面から説明いたしました。HPのリニューアルを考えてる方の参考になればと思います。
個人的に、BaserCMSは中小企業のHPにはちょうど良いCMSだと思います。
次回はTechブログのリニューアルについて記事を書こうと思います。

PREV

この業界・・・この業界とは？

NEXT

「帝国ニュース 九州版」に掲載されました
最新記事
ARCHIVES

おすすめの記事

SNS SHARE