エガシラリュウジ@BaserCMSユーザー会2011年04月02日
意外に簡単?!BaserCMS の簡単プラグイン作成BaserCMS勉強会@福岡 vol.4
http://basercms.net/
Copyright 2010 BaserCMS Users Community All rights reserved
どなた?
江頭 竜二@キャッチアップ
福岡市でWeb関連のお仕事をしています。
BaserCMSのコアデベロッパーです。
Twitter@ryuring
ダックスフンド飼ってます。→
異業種転向組o バーテン(19) → 銀行員(21) → スタンドマン(21) →
o スーパーバイザー(27) → システムエンジニア(28) →
o Webクリエーター兼プロデューサー(31) → 現在
作るだけではなくプロデュース、運営を意識した開発
Copyright 2010 BaserCMS Users Community All rights reserved
今日の準備
http://study.basercms.net
素材ファイルをダウンロード
テスト環境(FTP)の設定
Copyright 2010 BaserCMS Users Community All rights reserved
CakePHPとWordPressのプラグイン比較
CakePHPとWordPressのプラグイン比較
Copyright 2010 BaserCMS Users Community All rights reserved
CakePHPのプラグインの特徴
種類o 開発ツール(ライブラリ)
o 独立した追加コンテンツ
呼びだし方法o 本体に呼び出すコードを書く(component / helper)
o ブラウザよりプラグインのURLをたたく
基本的に「能動的」
Copyright 2010 BaserCMS Users Community All rights reserved
WordPressのプラグインの特徴
種類o 本体の処理に影響を与える
o 本体の機能を拡張
呼びだし方法o 本体により呼び出される=フック
• アクション
• フィルター
基本的に「受動的」
Copyright 2010 BaserCMS Users Community All rights reserved
CakePHPベースの開発手法
開発用プラグインとして開発o CakePHPのプラグイン開発とほぼ同じ
o BaserCMSのカスタマイズ時に有用
独自の追加コンテンツとして開発o CakePHPのプラグイン開発とほぼ同じ
o BaserCMSのメールプラグインやブログプラグイン
Copyright 2010 BaserCMS Users Community All rights reserved
BaserCMSで拡張された仕組み(1)
プラグインフックo WordPressのように受動的な仕組みを提供
o CakePHP標準の beforeFilter や afterRender などをプラグインでフックできる。
o 本体に手を入れず本体の処理に割り込む事ができる。• (例)本体の全ての文章の文末を「ですよ。」に置き換える等
ごめんなさい、いい例が思いつきませんでした > <
Copyright 2010 BaserCMS Users Community All rights reserved
BaserCMSで拡張された仕組み(2)
BaserHelper拡張o BaserCMSコアのBaserHelperにプラグイン側から受動的に機能を追加できる。
o Webページ編集画面の編集欄にコードを埋め込んで実行する事ができる。• (例)Webページ内に別のページの記事を表示させたり等
Copyright 2010 BaserCMS Users Community All rights reserved
BaserCMSで拡張された仕組み(3)
プラグインウィジェットo サイドバーなどで利用するウィジェットエリアに追加する「ウィジェット」をプラグインとして提供できる• (例)ブログパーツのウィジェット提供等
Copyright 2010 BaserCMS Users Community All rights reserved
ハンズオン前の注意事項(1)
最初簡単で少しずつ難しくなっていきます。※ CakePHPをされている方であれば後半になるにつれて簡単
時間の割にそこそこボリュームがあるので時間内で終わらない可能性があります。
終わりきれない場合、後半は端折りますが、ドキュメントはお持ち帰りできますのでご自宅で試されてください。
Copyright 2010 BaserCMS Users Community All rights reserved
ハンズオン時の注意事項(2)
素材ファイルの code.txt を有効活用
作業が間に合わない場合、うまくいかない場合はコピペで
Copyright 2010 BaserCMS Users Community All rights reserved
BaserCMSのインストール
データベースはCSVを選択
スマートURLをオンに設定
Copyright 2010 BaserCMS Users Community All rights reserved
プラグイン開発の準備(1)
プラグイン名を決める。o アルファベット名と日本語名
o 今回は、「sample」、「サンプルプラグイン」で。
プラグインフォルダを作成。o /app/plugins/{プラグイン名}/
o ここから先は全て上記フォルダを基準に配置場所を記述します。
Copyright 2010 BaserCMS Users Community All rights reserved
プラグイン開発の準備(2)
バージョンファイルを作成。
o VERSION.txt
1行目にバージョン番号を記述(1.0.0)
設定ファイルを作成。
o config/config.php$title = '{プラグイン名}';
$description = '{説明文}';
$author = '{作成者名}';
$url = '{作成者のホームページURLなど}';
$adminLink = '{管理ページへのリンク(管理ページを用意している場合)}';
$installMessage = '{インストール時に表示するメッセージ}';
Copyright 2010 BaserCMS Users Community All rights reserved
ウィジェットで利用する画象を準備する
vendors/img/popopo1.png
Copyright 2010 BaserCMS Users Community All rights reserved
管理画面で認識させる為のテンプレートを作成
o views/elements/admin/widgets/{ウィジェット名}.ctp
$title = '{ウィジェットのタイトル}';
$description = '{ウィジェットの説明文}';
※ このテンプレートは、ウィジェットの設定値などを入力 させる場合にも利用します。
※ /baser/plugins/blog/views/elements/admin/widgets/ 内のテンプレートを参考
ブラウザでウィジェットエリア編集画面を確認
Copyright 2010 BaserCMS Users Community All rights reserved
ウィジェット本体を作成
views/elements/widgets/{ウィジェット名}.ctp
Vendors内の画象を出力
<div class="widget widget-popopo widget-popopo-<?php echo $id ?>">
<?php if($name && $use_title): ?>
<h2><?php echo $name ?></h2>
<?php endif ?>
<?php $baser->img('/sample/img/popopo1.png', array('width' => '234')) ?>
</div>
Copyright 2010 BaserCMS Users Community All rights reserved
ウィジェットを設定&公開ページ確認
ウィジェットエリア編集より作成したウィジェットを配置
公開ページのサイドバーを確認
※ プラグインがオンの場合のみ表示する仕様とすべきだが、現時点では、プラグインオフの状態でも表示されてしまう。
Copyright 2010 BaserCMS Users Community All rights reserved
作成前の準備
プラグインをオンにしている場合は一旦オフにしておく。(効果を確認する為)
画象を用意するo vendors/img/popopo2.png
Copyright 2010 BaserCMS Users Community All rights reserved
CSSを作成
views/vendors/css/style.css#page, #header, #gradationShadow,#footer, #glbMenus, #navigation, h2, strong{
background: none!important;
}#fontChanger, #footer, #header a, #glbMenus a{
color:#000!important;}body {
background:transparent url('../img/popopo2.png') repeat lefttop!important;
}
標準の背景画像を無効にして差し替えるCSS
Copyright 2010 BaserCMS Users Community All rights reserved
プラグインフックヘルパ作成(1)
views/helpers/{プラグイン名}_hook.php
クラスを記述
<?php
class SampleHookHelper extends AppHelper {
}
?>
Copyright 2010 BaserCMS Users Community All rights reserved
プラグインフックヘルパ作成(2)
フックするメソッドを登録var $registerHooks = array('afterRender');
フックメソッドでCSSを読み込ませる処理を記述
function afterRender() {
parent::afterRender();
$Html = new HtmlHelper();
$Html->css('/sample/css/style', null, null, false);
}
Copyright 2010 BaserCMS Users Community All rights reserved
プラグインをオンでCSSの反映を確認
プラグイン管理より作成したプラグインを有効にする
Copyright 2010 BaserCMS Users Community All rights reserved
ダッシュボードにGooleAnalyticsのチャートを表示
ダッシュボードにGoogle Analytics のチャートを表示
Copyright 2010 BaserCMS Users Community All rights reserved
作成前の準備
ライブラリを用意するo vendors/googleanalytics.class.php(Googleで配布されているがバグがあるので調整が必要)
o views/helpers/sample_chart.php
Copyright 2010 BaserCMS Users Community All rights reserved
サイト設定テーブルにGoogleAnalyticsの設定情報を保存
CSVファイルを編集
/app/db/csv/baser/site_configs.csv
最終行に設定を追加
"","ga_user","アカウント名","",""
"","ga_pass","パスワード","",""
"","ga_id","プロファイル ID","",""
Copyright 2010 BaserCMS Users Community All rights reserved
プラグインフックヘルパを編集する(1)
さっき書いたCSS読み込みをコメントアウト//$Html->css('/sample/css/style', null, null, false);
ダッシュボードにのみ表示させるようにIF文を記述if($this->params['controller'] == 'dashboard' && $this->params['action'] == 'admin_index') {
}
DBに保存している設定値を取得$view = ClassRegistry::getObject('View');
$siteConfig = $view->viewVars['siteConfig'];
Copyright 2010 BaserCMS Users Community All rights reserved
プラグインフックヘルパを編集する(2)
チャート用のCSSを読み込む
$Html->css('/sample/css/chart', null, null, false);
チャートを画像タグとして読み込む
$lc = $SampleChart->lc(
$siteConfig['ga_user'],
$siteConfig['ga_pass'],
$siteConfig['ga_id']
);
Copyright 2010 BaserCMS Users Community All rights reserved
プラグインフックヘルパを編集する(3)
出力するecho '<div class="sample-chart corner10">';
echo '<h3>アクセス推移</h3>';
echo $lc;
echo '</div>';
※ afterRenderで直接出力した場合、コンテンツ部分の一番下に表示されます。
Copyright 2010 BaserCMS Users Community All rights reserved
ダッシュボードを確認
ダッシュボードにチャート(折れ線グラフ)が表示されているか確認します。
Copyright 2010 BaserCMS Users Community All rights reserved
BaserHelper拡張でページ内にチャートを表示
BaserHelper拡張でページ内にチャートを表示
Copyright 2010 BaserCMS Users Community All rights reserved
BaserHelper拡張用ヘルパを作成
views/helpers/{プラグイン名}_baser.php
sampleLcメソッドを追加o 先頭行にHtmlHelperの初期化処理を記述$Html = new HtmlHelper();
o さっき作った プラグインフックのafterRenderメソッドのif文の中身をコピペ
Copyright 2010 BaserCMS Users Community All rights reserved
ページ編集画面にタグを貼り付け&公開ページを確認
管理画面のページ管理よりページ編集画面を開く
WYSIWIGエディタをソースに切り替えて次のタグを貼り付ける
<?php $baser->拡張メソッド名() ?>
プレビューボタンより表示を確認
Copyright 2010 BaserCMS Users Community All rights reserved
GoogleAnalytics設定情報の保存画面を作る
GoogleAnalytics 設定情報の保存画面を作る
Copyright 2010 BaserCMS Users Community All rights reserved
コントローラーを作成する(1)
controllers/sample_controller.php
設定画面のアクションメソッドを作るfunction admin_index() {
if(empty($this->data)) {// データを取得$this->data['SiteConfig'] = $this->siteConfigs;
}else {// データを保存$this->SiteConfig->set($this->data);if($this->SiteConfig->saveKeyValue($this->data)) {
// キャッシュの削除clearViewCache();$this->Session->setFlash('設定を保存しました。');$this->redirect('/admin/sample');
}}
}
Copyright 2010 BaserCMS Users Community All rights reserved
コントローラーを作成する(2)
controllers/sample_controller.php
プロパティを設定する// コントローラー名var $name = 'Sample';// コンポーネント(認証設定)
var $components = array('Auth','Cookie','AuthConfigure');// モデル(Pluginを必ず指定する)
var $uses = array('Plugin', 'SiteConfig');// タイトルvar $pageTitle = 'サンプルプラグイン設定';
// ナビvar $navis = array('プラグイン管理'=>'/admin/plugins/index');
// サブメニューvar $subMenuElements = array("plugins");
Copyright 2010 BaserCMS Users Community All rights reserved
ビューを作成する
views/sample/admin/index.ctpプロパティを設定する
<h2><?php $baser->contentsTitle() ?></h2>
<h3>Google Analytics 設定</h3>
<?php echo $form->create('SiteConfig', array('url'=>'/admin/sample')) ?>
<?php echo $form->input('SiteConfig.ga_user', array('label'=>'アカウント')) ?><br />
<?php echo $form->input('SiteConfig.ga_pass', array('type'=>'password','label'=>'パスワード')) ?><br />
<?php echo $form->input('SiteConfig.ga_id', array('label'=>'プロファイルID')) ?>
<?php echo $form->end('更新') ?>
Copyright 2010 BaserCMS Users Community All rights reserved
動作確認
/admin/sample にアクセスして動作を保存確認します。正常に保存されればOKです。
これでハンズオンはおわりです。
お疲れさまでした。
Copyright 2010 BaserCMS Users Community All rights reserved
注意事項
今日作ったGoogleAnalyticsチャート表示機能は、ライブラリがPHP5で書かれている為、PHP4では動きません。また、サーバーにphp5-crulがインストールされている必要があります。
あくまでサンプルコードの為、エラー回避処理を書いていませんので、GoogleAnalyticsの認証に失敗した時点で正常に画面が表示されません。
チャートの表示は時間がかかるので、描画処理完了後にAjaxで表示させる事をおすすめします。あとキャッシュの実装も。
Copyright 2010 BaserCMS Users Community All rights reserved
BaserCMSユーザー会参加者募集
みんなでWebにおけるノウハウや日本独自の文化を注ぎこみ、BaserCMSをみんなが楽になるCMSにしませんか?
まずはメーリングリストに是非ご参加ください。
http://sites.google.com/site/baserusers/
告知