-   topic   - トピックス

baserCMSの管理画面ダッシュボードにランチャーを表示する

2014年10月16日 技術関係

弊社でよく使わせてもらっているbaserCMSですが、もともと拡張性が高く、管理画面のカスタマイズも比較的簡単に行うことが出来ます。そのため、クライアントに納品する際も、その要望に合わせてカスタマイズする場合があるのですが、今回はそんなカスタマイズ事例の中で、特に人気のある「ダッシュボードを変更してランチャーっぽくする」方法について、ご紹介したいと思います。

icon_dash.png

通常、ダッシュボードを表示すると、コンテンツ部分は3カラム(baserCMSニュース、公開ページ数、最近の動き)に分かれています。このうち、baserCMSニュースと公開ページ数の2カラムを削り、よく使いそうな機能をアイコン表示し、ランチャー化します。(こうすることで、ユーザーが視覚的に目的の機能までの動線を把握できるようになるのではないかと思います。)

 

1.アイコン画像を準備する。

フリーのものを探すと良いと思います。有名所だと「ICON HOIHOI」や「CristalClear」などが良さそうです(フリーといっても、ライセンスや注意事項が全く無いわけではありません。使用上の注意などを各サイトでご確認ください)。

カラム幅に応じて、ある程度はアイコン画像のサイズを変更したいので、今回は1つ1つのアイコンを130px×130px程度の大きさで用意しておきます(この辺は、並べるアイコンの行数によると思いますので、適当に調節してください)。

出来あがったら規定のフォルダに入れておきます。今回はテーマフォルダ内に作成します。(iconsフォルダは無いので作ってください。その中にアイコンを全て入れます。今回は各画像は01.png〜08.pngという名前で保存しました。)

/app/webroot/theme/(お使いのテーマ)/img/admin/icons/

 

2.ダッシュボードのHTMLを書き直し、CSSを作成する。

HTMLの編集です。特に難しいことはありません。しかし、baserCMSのコア部分にある原本ファイルを、そのまま編集してしまうと、baserCMSのバージョンアップ時にカスタマイズ部分が消えてしまいますので、必要なファイルをappフォルダ以下(今回はさらにその中のテーマフォルダ以下)にコピーしてそちらを編集します。

まず、ダッシュボードのViewファイルを以下のようにコピーして編集します。もともと3カラムになっていたのを、2カラムに修正し、アイコン表示部分を加えます。また、冒頭でCSSを読み込みます。このCSSは今回のランチャー表示専用のもので、あとで作成するものを読み込んでいます。

■ダッシュボードのViewの場所とコピー先
(元の場所)/lib/Baser/View/Dashboard/admin/index.php
(コピー先) /app/webroot/theme/(お使いのテーマ)/Dashboard/admin/index.php


<?php
//アイコン部分CSS読込
$this->BcBaser->css(array('admin/admin_icon'));
?>

<div id="AlertMessage" class="message" style="display:none"></div>

<div class="float-left" style="width:66%">
 <div class="panel-box corner10">
  <h2>サイト管理メニュー</h2>

  <div class="clearfix"> 
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/01.png', array('url' => '/pages/index')) ?>
      <br />
      <?php $this->BcBaser->link('固定ページ管理', '/pages/index') ?>
    </div>
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/02.png', array('url' => '/blog/blog_posts/index/1')) ?>
      <br />
      <?php $this->BcBaser->link('新着情報管理', '/blog/blog_posts/index/1') ?>
    </div>
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/03.png', array('url' => '/mail/mail_fields/index/1')) ?>
      <br />
      <?php $this->BcBaser->link('お問合わせ管理', '/mail/mail_fields/index/1') ?>
    </div>
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/04.png', array('url' => '/blog/blog_comments/index/1')) ?>
      <br />
      <?php $this->BcBaser->link('コメント一覧', '/blog/blog_comments/index/1') ?>
    </div>
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/05.png', array('url' => '/users/index')) ?>
      <br />
      <?php $this->BcBaser->link('ユーザー管理', '/users/index') ?>
    </div>
   
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/06.png', array('url' => '/themes/index')) ?>
      <br />
      <?php $this->BcBaser->link('テーマ管理', '/themes/index') ?>
    </div>
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/07.png', array('url' => '/plugins/index')) ?>
      <br />
      <?php $this->BcBaser->link('プラグイン', '/plugins/index') ?>
    </div>
   
    <div class="iconBox">
      <?php $this->BcBaser->img('admin/icons/08.png', array('url' => '/site_configs/form')) ?>
      <br />
      <?php $this->BcBaser->link('システム管理', '/site_configs/form') ?>
    </div>
   
  </div>
 </div>
</div>

<div class="float-left" style="width:33%">
 <div class="panel-box corner10">
  <h2>最近の動き</h2>
  <div id="DblogList">
       <?php $this->BcBaser->element('dashboard/index_dblog_list') ?>
  </div>
 </div>
</div>

次にCSSを新規作成します。カラム幅にある程度合わせて大きさが変わるようにします。

■ランチャーアイコン用のCSSの設置場所
/app/webroot/theme/(お使いのテーマ)/css/admin/admin_icon.css


div.iconBox{
  float: left;
  width: 21%;
  margin: 2%;
  text-align: center;
  height: 150px;
}

div.iconBox img{
  width: 100%;
  margin: auto;
  max-width: 128px;
}

div.iconBox a{
  text-decoration: none;
  color: #000;
}

div.iconBox a:hover{
  text-decoration: underline;
  color: #000;
}

 

3.ブラウザでアクセス

一応、ブラウザキャッシュを消してアクセスします。ダッシュボードにアイコンが並んでいればOKです。

いかがでしたでしょうか? 今回のサンプルではあまりメリットがありませんが、独自に機能を拡張している場合など、クライアントに分かりやすい動線付けができるため、喜ばれることも多いと思います。ぜひ、お試しください。(^^