初めてbaserCMSでサイト構築する人が確認すべき参考サイト・ブログ記事まとめ

2015.05.22

こんにちは! baserCMSユーザー会の馬庭です(^^)

今回はbaserCMSを初めて使う方が、参考に出来るサイトやブログ記事を紹介していきたいと思います。ローカル環境構築からクライアントへの納品まで、幾つかのステップに分けてご紹介していきますよ!

 

STEP.0 公式サイト

名称未設定-1.jpg

baserCMSには、ユーザー会が公式に運営・公開しているサイトが幾つかあります。予めどんなサイトがあるかを知っておくと、困った時に探す場所・助けを求める場所の目星がつきますよね。

  • 公式サイト
    baserCMSの情報ならまずはココを確認! イベント出展からバージョンアップまで幅広い情報があります。
  • 公式Wiki
    昨年(2014年)から運営されているWiki。まだ記事が少ないですが、今後増えていくと思います。
  • ユーザーフォーラム
    一人で困らないで!質問できる場所があります。全て日本語でやりとりできるのも良いですよね。
  • マーケット
    テーマやプラグインの配布サイトです。有償のものもあれば、無償のものもあります。

その他、開発者向けにRedmineGitHubのリポジトリなどが公開されています。

 

STEP.1 ローカル環境を構築する

20150520_image02.png

baserCMSに限ったことではありませんが、CMSを利用してWebサイトを作る場合にはローカル環境(ネット上ではない、自分のPC内またはそれに準ずる環境)を使用して制作することが多いと思います。

ローカル環境の構築方法はひとそれぞれですが、最近ではVagrantを使っている人もかなり多いと思います。baserCMSでは公式リポジトリ中にVagrantfileが含まれていますので、vagrant upコマンドを打つだけでbaserCMSが入った仮想環境を作成できます(^^)

仮想環境ではない、MAMPやXAMPPなどを使っている方は、いつも通り「htdocs」以下のルートフォルダ内にbaserCMSを設置すればOKですよ!

  • 公式サイト
    最新版をダウンロードできますが、Vagrantfileが含まれていません。必要な方は下記のGitHubでbaserCMSをダウンロードしてください。
  • GitHub
    公式リポジトリです。開発版(現在開発されているのはdev-3ブランチ)のダウンロードも可能。バージョンがタグ付けされているので、過去のバージョンが必要な時も簡単にダウンロードできます。
  • XAMPP
    言わずと知れたローカル環境構築ツール。Apache、MySQL(ただしSQLiteやCSVでも動作可能)、PHPが含まれているので、baserCMSを動かす事ができます。
  • MAMP
    便利なローカル環境構築ツール。PHPのバージョンなどを選択して起動できるPro版もあります。
  • Vagrant入門
    Vagrantについて知りたい方は要チェックです。動画でVagrantについて説明してくれています。
  • Vagrant環境で学ぶ baserCMSハンズオン
    イベント「CPI MEGA MIX」で実際に使用されたスライドです(^^)。一部にイベント向けの記述がありますが、baserCMSをVagrantで動かすために必要なことが、分かりやすく書かれています。

設置URLにアクセスすればインストール画面が開きます。画面の指示に従ってインストールしましょう!

 

STEP.2 テーマ作成

20150520_image03.png

baserCMSのローカル環境が出来上がったら、あなたが作ったデザイン(HTML、CSS等)をbaserCMSに組込みましょう。baserCMSではサイトの見た目を“テーマ”で変更できるようになっていますので、実際にはこのテーマを制作することになります。そこで、テーマ作成の概略が追えるサイトとブログ記事をご紹介しておきます。

  • 公式サイト(WEBデザイナー向け)
    公式サイトにまとまったデザイナー向けの情報があります。テーマ作成の前にここを読むと良いかと思います。幾つかの記事にわかれていますので、上から順番に読んでいくと良さそうです。
  • テーマの作り方
    当サイトの過去記事で、実際に手を動かしながらテーマ作成を行うチュートリアルになります。自分で作ってみるのが一番理解できますよね。
  • リファレンス(公式Wiki)
    テーマ作成で使用できる関数リファレンスです。公式Wikiの中に用意されています。全てを覚える必要はありませんが、色々なものがあるので、ぜひ一度ざっと眺めてみてはいかがでしょうか?
  • WordPressユーザーのbaserCMS覚え書き
    WordPressを使ったことのある方にオススメのサイトです。関数の比較記事などがあり、とても便利ですよ〜。

テーマ作成の手順としてオススメなのは、まず最初に静的ページを制作して頂き、各種ブラウザでの表示を確認したあと、テーマとしてbaserCMSに組み込んでいく方法が良いでしょう。少なくとも初めてテーマ作成をする場合は、いきなり切り分けた部品(テンプレートやエレメント等)を作るのではなく、最初に問題なく表示できる静的ページを作っておき、それを順番に切り分けていく方が、テーマの構造も理解しやすいはずです。

 

STEP.3 機能拡張

20150520_image04.png

baserCMSが選ばれる理由の1つに、CakePHPの規約にのとった機能拡張が挙げられると思います。特別な理由のない限り、一般的な機能拡張はプラグインで実現できる場合が多いと思いますので、ここではプラグイン作成に関する記事をご紹介しておきます。なお公式のマーケットサイトで、既成のプラグインを取得することも可能ですよ!

その他、CakePHPに関する記事も参考になります。baserCMSはCakePHPというフレームワークをベースに作られていますので、CakePHPの規約がそのまま利用できるためです。気になる方は、Googleなどで検索してみてください(^^

さて、baserCMSのプラグイン数は、決して豊富とは言えません。それは、baserCMSがまだ若いCMSだということ が一番大きな要因です。しかし、既成プラグインに頼らなくても、自分自身で機能拡張することも可能です。

もちろん、デザイナーさんなどのPHPを触らない人には難しいかも知れませんが、CakePHPの規約に沿った開発ができるため、潜在的に(baserCMS自体には詳しくなくても)機能拡張できる人も多いのではないかと思います。そのことはユーザーさんにとっても、制作会社さんにとっても、本当に大きな利点だと思います。

 

STEP.4 管理画面のカスタマイズ

20150520_image05.png

baserCMSは管理画面もカスタマイズが可能です。コーポレートサイト構築の場合(特に中小企業の場合)、クライアントの担当者がWebに詳しくないとか、そもそもWebの担当者がいないという状況が多く見受けられます(少なくとも、私のように地方在住で仕事をしていると、そういった場面に日常的に出くわします)。

そのような事情もあり、制作会社の皆さんなどは、少しだけ管理画面に手を加えて「クライアントが利用しやすい管理画面」を作りたいとお考えの方もいらっしゃるのではないでしょうか。そこで、ここでは管理画面に関するカスタマイズ事例やプラグインを中心にご紹介していきます。

  • baserCMSの管理画面ダッシュボードにランチャーを表示する
    baserCMSの管理画面ダッシュボードにアイコンを表示させ、ランチャーのような形にカスタマイズする事例です。
  • BurgerEditor
    ページ編集に使用するエディタを変更できます。有料プラグインですが、機能を制限した無料版もあります。デフォルトのエディタとは違う発想で作られたもので、クライアントによってはとても有益なエディタです。
  • 自動保存プラグイン
    固定ページやブログの編集時に自動保存を行ってくれるプラグインです。途中で操作を誤ってブラウザを閉じてしまったり、ページを移動してしまっても安心です。

また、使い勝手以外にも機能面で要望が上がる事があると思います。そのような時は、まず公式のマーケットを漁ってみるとよさそうです。例えばよく聞くのは以下の様な機能追加です。

  • 公開承認プラグイン
    ブログ記事の作成者と承認者とにわけ、段階的な公開処理を実現します。クライアントさんが、大きな会社だったりすると要望として出てきますよね。
  • Ping送信
    ブログ記事の保存時にPing送信を行います。SEO効果は分かりませんがブログランキングへの参加などには必要です。
  • Twitter
    Twitterのタイムラインを表示したり、ブログ記事編集画面でツイートしたりできます。
  • Facebook Like box
    FacebookのLikeBoxを表示するプラグインです。SNS対応の要望も多いと思いますので、要チェックのプラグインです。

さて、ここまでの所でローカル環境での動作を確認できたら、次項でいよいよインターネット上にあるサーバー(本番環境)にサイトを構築していきます。

 

STEP.5 本番環境に構築する

20150520_image06.png

ローカル環境にあるサイトを本番環境で再現するための最も簡単な方法は、まず本番環境でbaserCMSをインストールし、ローカル環境で作成したテーマ、プラグインをアップロードしたあと、管理画面からそれらを適用することだと思います。

  • 簡単インストール
    レンタルサーバーの中には、簡単な操作でbaserCMSを自動インストールしてくれる機能(いわゆる「簡単インストール」)を提供しているものがあります。中でもオフィシャルパートナーであるロリポップは、安価であるうえbaserCMSの動作も安定しています。
  • システム要件
    簡単インストールの提供がないサーバーでも、システム要件を満たしていればインストールが可能ですよ!

さて、簡単インストールがついていないサーバーの代表格が、さくらインターネットですが、新規でインストールするとエラーがでることがあります。以下の方法で簡単に解消できますので、不具合に遭遇してしまった方はお試しください。

 

STEP.6 納品する

20150520_image07.png

さて、オープンソースのCMSを使っていて、クライアントから「マニュアルも一緒に納品してください」と言われたことはありませんか? その点、baserCMSならPDF版のユーザーマニュアルが公開されていますので安心です。印刷するなり、データで納めるなり、自由にお使い頂けます。

また、よくある要望としてアクセス解析を設置して欲しいという要望もあるかと思います。参考になる記事を合わせてご紹介します。

 

STEP.7 マーケット非掲載のプラグイン

20150520_image08.png

実は公式運営のbaserマーケットには掲載されていないプラグインが存在します。ベータ版などが多いですが、ちょっと試してみると面白いかも知れません。GitHubで検索をかけてみると、以下の様なプラグインがヒットします。

  • プチ・カスタムフィールド
    baserCMSでカスタムフィールドを実現します(ただし利用できるのは固定ページではなくブログのみです)。
  • アンケート集計
    メールフォームと連携して、送信された情報を集計します。
  • キーワード入力欄
    固定ページとブログ記事にキーワード入力欄を追加します。入力したキーワードはMETAタグで出力できます。
  • PDFリンク
    ブログ記事の本文の代わりにPDFファイルを表示できるbaserCMS専用のプラグイン。企業サイトだと、既にPDFになっている文書があったりします。ブログ記事の代わりに、PDFへリンクしたい時に便利です。
  • テーマスイッチ
    ユーザーエージェントに応じて適用するテーマを変更するプラグイン。設定画面でスマホとモバイル(ガラケー)のテーマを設定できます。

いかがでしょうか? 今まで使った事がない新しいCMSに触れるとき、誰でもとまどうと思います。まして、まだまだ若いCMSであるbaserCMSならば尚更ですし、ドキュメントの数もそんなに多くはありません。

そこで今回は「初心者」の方向けではありますが、制作の手順に沿う形で、ネット上に散らばっているドキュメントをご紹介してみました。本当はまだまだ沢山の記事があるのですが、記事の趣旨を考えつつ、紹介できる範囲でご紹介しました。

この記事が皆さまの参考になれば幸いです。もしも、追加した方が良いサイト、ブログ記事などがありましたらお教え下さい(^^) ではでは〜〜。

馬庭 吾一

馬庭 吾一  - 株式会社ヒニアラタ / 代表取締役

1980年東京生、島根育ち。大学卒業後は関西・中部で数年間を過ごした。27歳で島根県のWEB広告関連の会社へ転職。2011年に広告映像の制作会社「株式会社モット」を仲間と共に設立。この頃からbaserCMSユーザー会の活動に参加するようになり、2014年にはWEB制作会社「株式会社ヒニアラタ」を設立した。現在、特定非営利活動法人ベーサー・ファウンデーション理事。

この人の関連サイト