Topics トピックス

[baserCMS]お客様の声プラグインの使い方

2015/02/10

いつも株式会社ヒニアラタのホームページをご覧いただき、誠にありがとうございます。

この度、弊社ではbaserCMS用プラグイン「お客様の声」を公開いたしました。このソフトウェアは「baserマーケット標準販売ライセンス」で配布しております。現在のところ、商用・非商用を問わず無償で使用(カスタマイズを含む)して頂けます(baserマーケット標準販売ライセンスは、オープンソースライセンスではありませんのでご注意ください)

voice_add.png

ダウンロード

baserマーケット

このプラグインの機能

このプラグインは、コーポレートサイトでよく作られる「お客様の声」ページを簡単に実装するためのbaserCMS専用プラグインです。

現行バージョン「Ver.0.9.5」の主な機能は以下の通りです。(2015/07/06現在)

  • ユーザーが管理画面で「お客様の声」を登録・編集できる
  • 登録項目は「お客様名」「タイトル」「本文」「購入時期」に加え、画像を最大4枚登録できる
  • 利用項目設定により、不要項目を登録画面から非表示にできる
  • 利用項目設定により、「本文」入力欄にCKEditorを設定できる
  • 利用項目設定により、アップロード画像の最大サイズを設定できる
  • 登録された画像から自動でギャラリーページ(ex.事例画像集)が作れるおまけ的な機能です
  • カテゴリ毎に「お客様の声」を分類できる
  • カテゴリ毎に画像ギャラリーページを表示できる(おまけ的な機能です
  • カテゴリ毎に画像ギャラリーページに表示する画像の最大枚数を変更できる
  • カテゴリ毎に「コンテンツテンプレート」を変更できる

このプラグインを使うことで、固定ページで作られることの多かった「お客様の声」ページに管理機能を持たせることができ、ユーザーが更新しやすい環境を作ることが出来ます。また性能は高くありませんがギャラリー機能があるので、「お客様の声」で登録した画像をそのまま使った「事例画像集」なども、比較的容易に作成できます

インストールと利用項目の設定

インストール

インストールの方法は通常のプラグインと変わりませんが、webrootの「img」フォルダ内に「voice_plugin」フォルダを自動で生成しますので、予め「img」フォルダのパーミッション等をご確認ください(このフォルダはアップロードされた画像を保存しておくためのフォルダです)。結果的に以下のようになります。

  /app/webroot/img/voice_plugin/

プラグインのインストールについては、公式Wikiに掲載されていますので、そちらをご覧ください。

利用項目の設定

本プラグインでは、利用項目を設定することで、必須項目以外の項目を非表示にする事ができます。お客様の声を登録する際に入力できる項目は以下の通りですが、そのうち※印がついたものは「利用項目の設定」で非表示にできます

  • カテゴリ選択
  • お客様名
  • タイトル
  • 本文
  • 画像1(
  • 画像2(
  • 画像3(
  • 画像4(
  • 購入時期(
  • 公開設定

また「利用項目の設定」では「本文」入力欄でCKEditorを利用するかどうかが選択できるほか、画像1〜画像4でアップロードされる画像のサイズ(最大値)を決めることが出来ます(なお、システム管理でCKEditorを使わない設定になっている場合、ここでCKeditorを選択したとしても、通常のテキストエリアにが表示されます)。

voice_setting2.png

カテゴリの作成と管理

利用項目の設定が終わったらカテゴリを作成します。もちろん、カテゴリ無しでも使用できますが、カテゴリを作成しておくとコンテンツテンプレートを選択したり、カテゴリ毎に一覧表示させたり出来るため何かと便利です。

voice_cate_list.png

カテゴリの登録画面では以下の内容を入力・設定できます。

  • カテゴリ名
  • コンテンツテンプレート
  • ギャラリー表示設定(1ページの表示枚数)

voice_cate.png

各項目の詳細は以下の通りです。

カテゴリ名
このカテゴリの名称です。日本語で設定できます。
コンテンツテンプレート
このカテゴリのデータを表示する際に使用されるテンプレートです。設置場所等は後述します。
1ページの表示枚数
このカテゴリのデータから画像を抜き出してギャラリー表示する際、1ページ内に表示する画像の枚数を指定できます。

お客様の声の登録・編集・削除

ここまでの設定が終わったら、いよいよ「お客様の声」を登録していくことになります。「お客様の声 メニュー」の「新規登録」から登録画面を開いて下さい。

voice_add.png

この登録画面で表示される項目は、先の「利用項目の設定」で行った設定に応じて変化しているはずです。必要事項を順番に記入して「保存」ボタンをクリックしてください。登録が完了します。

なお、登録された情報は「編集」「削除」を行う事ができます。一覧表示画面の左側にある操作アイコンから行うのが良いと思います。

voice_list.png

コンテンツテンプレートについて

ここからは登録したデータを表示する方法をご案内します。

コンテンツテンプレートの概要

本プラグインではコンテンツテンプレートによって、View側(表示側)の処理を行います。まずはプラグインに同封されている「default」テンプレートをご覧ください。以下の場所に入っています。

  /app/Plugin/Voice/View/Voices/default/

本プラグインのコンテンツテンプレートは3つのファイルから構成されます。すなわち「index.php」「view.php」「gallary.php」です。

index.php
一覧表示を行うためのテンプレートです。
view.php
個別の表示を行うためのテンプレートです。
gallary.php
ギャラリー表示を行う際のテンプレートです。

これらの3つが1セットになって、本プラグインの「コンテンツテンプレート」となります。 オリジナルのコンテンツテンプレートを用意したい場合は、以下のどちらかに3つのファイルをいれたフォルダを設置します。

  /app/Plugin/Voice/View/Voices/
  /app/webroot/theme/(お使いのテーマ)/Voices/

最初に示した場所はプラグイン内部、後に示した場所はテーマ内部になります(テーマ内部でご利用の場合、テンプレートを入れるフォルダが「Voices」と複数形になっている事にご注意ください。「Blog」や「Mail」など他のプラグインは、ここが単数形になっている事があります)。例えば「test」という名前のコンテンツテンプレートを作成する場合は、以下のようになります

  /app/webroot/theme/(お使いのテーマ)/Voices/test/

index.php

まず最初に一覧表示を担うテンプレート「index.php」についてご案内します。このテンプレート内部は次のような格好になっています。

  <h2><?php $this->BcBaser->contentsTitle() ?></h2>
<p>
  お客様の声を一覧で表示しています。
</p>

<?php if(!empty($voices)): ?>
  <?php foreach($voices as $voice): ?>

    <h3><?php $this->Voice->title($voice, true) ?></h3>
    <p><?php $this->Voice->content($voice) ?></p>
    <p>お客様:<?php $this->Voice->customerName($voice) ?></p>
    <p>購入時期:<?php $this->Voice->buyTime($voice) ?></p>
    <p>
      <?php $this->Voice->image($voice, 1) ?>
      <?php $this->Voice->image($voice, 2) ?>
      <?php $this->Voice->image($voice, 3) ?>
      <?php $this->Voice->image($voice, 4) ?>
    </p>

  <?php endforeach; ?>
<?php else: ?>
  <p>データがありません。</p>
<?php endif; ?>

このテンプレートでは変数「$voices」の中に格納されたデータを表示するようになっています(残念ながら、現在のところ表示するのに便利な専用ヘルパーが未実装ですver.0.9.5以降はヘルパーを実装しています。ヘルパーについては後述。)。ループしながら表示させます。

view.php

この「view.php」は個別表示を担います。先ほどの「index.php」では簡易な情報を出力するにとどめ、この「view.php」で詳細な情報を表示する、などの使い方を想定しています。

このテンプレートは以下のようになっています。

  <h2><?php $this->BcBaser->contentsTitle() ?></h2>

<?php if(!empty($voice)): ?>

  <h3><?php $this->Voice->title($voice, false) ?></h3>
  <p><?php $this->Voice->content($voice) ?></p>
  <p>お客様:<?php $this->Voice->customerName($voice) ?></p>
  <p>購入時期:<?php $this->Voice->buyTime($voice) ?></p>
  <p>
    <?php $this->Voice->image($voice, 1) ?>
    <?php $this->Voice->image($voice, 2) ?>
    <?php $this->Voice->image($voice, 3) ?>
    <?php $this->Voice->image($voice, 4) ?>
  </p>

<?php else: ?>
  <p>データを表示できません。</p>
<?php endif; ?>

このテンプレートでは変数「$voice」に入っているデータを表示させています。こちらも専用ヘルパーが未実装ですので、上のような処理で出力を行っています。ver.0.9.5以降はヘルパーを実装しています。

gallary.php

このテンプレートは、登録されたデータから画像だけを抜き出してギャラリー表示する際に使用されます。

  <?php $this->BcBaser->css(array('Voice.voice'), array('inline' => true)); ?>

<div class="gallaryBox gallaryClearfix">
<?php if (!empty($images)) : ?>
  <?php
  foreach($images as $image){
   if(!empty($image['image'])){
    //画像を出力しつつ、リンクを設定する。
    $this->BcBaser->link($this->BcBaser->getImg('voice_plugin/'.$image['image'], array('class' => 'gallaryImage')),
      array(
        'plugin' => 'voice',
        'controller' => 'voices',
        'action' => 'view',
        $image['id']
      ), array('class' => 'gallaryImageLink'), false);
    }
  }
  ?>
<?php else : ?>
  <p>表示できるデータがありません。</p>
<?php endif; ?>
</div>

<div class="gallaryNaviLink gallaryClearfix">
  <div class="gallaryNextPage">
  <?php $this->BcBaser->nextGallary($currentPage) ?>
  </div>
  <div class="gallaryPrevPage">
  <?php $this->BcBaser->prevGallary($currentPage) ?>
  </div>
</div>
  

デフォルトのテンプレートでは使い方の一例として、画像をクリックすると、その画像が登録されている「お客様の声」データを表示(リンク)するようにしてあります。この「gallary.php」のカスタマイズ次第で、colorboxなどでポップアップするような事も可能ですので、興味のある方はぜひお試しください。

なお、この「gallary.php」では、ページ間の移動を行うために2つのヘルパーが用意されています。

$this->BcBaser->nextGallary($currentPage)
次のページがある場合に「次のページへ」というリンクを表示します。引数には「$currentPage」を入れておけば、現在のページに適したリンクを出力するようになっています。
$this->BcBaser->prevGallary($currentPage)
前のページがある場合に「前のページへ」というリンクを表示します。引数には「$currentPage」を入れておけば、現在のページに適したリンクを出力するようになっています。

表示用URLとパラメータ

上述のコンテンツテンプレートのカスタマイズが終わったら、実際にフロント側(ユーザーがみる側)にアクセスしてみてください。各URLと使用できるパラメータは以下の通りです。

一覧表示ページ

「お客様の声」の一覧表示は、以下のURLに設定されています(スマートURLはオンの場合でご説明しています)。

  http://(baserCMSのドメイン)/voice/voices/index

もしも、カテゴリ毎で一覧を表示したい場合は、パラメータにカテゴリNO(id)を与えてください。例えばカテゴリNOが「1」のカテゴリに含まれるデータだけを一覧表示するには、

  http://(baserCMSのドメイン)/voice/voices/index/1

としてください。

個別表示ページ

登録された「お客様の声」を一覧ではなく、個別に表示するには以下のURLにパラメータをつけてアクセスします。パラメータは、登録されたデータのNO(id)です。例えば、NO「2」にアクセスするには、

  http://(baserCMSのドメイン)/voice/voices/view/2

としてください。なお一般的には、一覧表示のリンクを辿っていけば個別のページが表示される、というようにしたいと思います。デフォルトのコンテンツテンプレート「default」に入っている「index.php」で、そのような処理をしていますので参考にしてみてください(データの「タイトル」部分がリンクとなっており、クリックすると個別表示ページヘ遷移する)。

ギャラリーページ

画像ギャラリーを表示するには、以下のURLにアクセスしてください。

  http://(baserCMSのドメイン)/voice/gallary

画像ギャラリーはカテゴリ毎に表示することが出来ますそうしたい場合はパラメータにカテゴリNO(id)を渡してください。例えばNO「3」のカテゴリに含まれる画像だけを取り出してギャラリー表示する場合は、

  http://(baserCMSのドメイン)/voice/gallary/3

というようにしてください。なお、ギャラリー表示は本プラグインにとって「おまけ」的な機能です。登録されている画像が多かったりすると、処理が遅くなる可能性がありますので、予めご了承ください

ヘルパーについて

本プラグインはコンテンツテンプレート内で使えるヘルパーを実装しています。

コンテンツテンプレート内で使用するもの

$this->Voice->title($voice, $link, $options)
(Ver.0.9.5以降)登録されたデータからタイトル部分を表示します。オプション・引数については下記をご覧ください。
$voice
データ本体です。index.phpではループ内で、view.phpではどこででも「$voice」と入れれば動作します。
$link
初期値はfalse。出力するタイトルにリンクをつけるかどうかを指定できます。
$options
配列でリンク用のオプション指定が可能です。詳しくはlink()関数についてご覧ください。
$this->Voice->content($voice)
(Ver.0.9.5以降)登録されたデータから内容部分を表示します。オプション・引数については下記をご覧ください。
$voice
データ本体です。index.phpではループ内で、view.phpではどこででも「$voice」と入れれば動作します。
$this->Voice->category($voice)
(Ver.0.9.5以降)登録されたデータからカテゴリ名を表示します。オプション・引数については下記をご覧ください。
$voice
データ本体です。index.phpではループ内で、view.phpではどこででも「$voice」と入れれば動作します。
$this->Voice->customerName($voice)
(Ver.0.9.5以降)登録されたデータからお客様名を表示します。オプション・引数については下記をご覧ください。
$voice
データ本体です。index.phpではループ内で、view.phpではどこででも「$voice」と入れれば動作します。
$this->Voice->buyTime($voice)
(Ver.0.9.5以降)登録されたデータから購入時期を表示します。オプション・引数については下記をご覧ください。
$voice
データ本体です。index.phpではループ内で、view.phpではどこででも「$voice」と入れれば動作します。
$this->Voice->image($voice, $number)
(Ver.0.9.5以降)登録されたデータから画像を表示します。オプション・引数については下記をご覧ください。
$voice
データ本体です。index.phpではループ内で、view.phpではどこででも「$voice」と入れれば動作します。
$number
画像1〜4のどれを表示するか、整数型で指定します。

どこからでも呼び出せるもの

$this->BcBaser->getVoices($limit, $categoryId)
登録データの一覧をリストを取得します。取得だけですので表示は別途行う必要があります。オプション・引数については下記をご覧ください。
$limit
初期値は5。取得したい件数を指定します。
$options
配列でオプションの指定が可能です。
・categoryId:初期値はnull。カテゴリIDを入れれば、そのカテゴリ内のデータだけを取得する(整数型)。

このプラグインの今後

本プラグインには、テンプレートで使うヘルパーやカテゴリの一覧表示機能が無いこと、そられをウィジェット化する機能が足りていないなど、現在の段階では不十分な点がございますが、もしも、その他「こんな機能が欲しい」「これがあったら良いのに」といったご意見やご感想がございましたら、弊社の問い合わせフォームよりご連絡下さいませ。

それでは今後とも株式会社ヒニアラタを何卒よろしくお願い致します。

お問い合わせCONTACT

弊社への各種ご相談は下記よりどうぞ