BaserCMS の簡単プラグイン作成 - study.basercms.netstudy.basercms.net/vol4/files/baserstudy_vol4.pdf · エガシラリュウジ@BaserCMSユーザー会 2011年04月02日

エガシラリュウジ@BaserCMSユーザー会2011年04月02日

意外に簡単?!BaserCMS の簡単プラグイン作成BaserCMS勉強会@福岡 vol.４

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) → 現在

作るだけではなくプロデュース、運営を意識した開発


今日のセミナーでTwitter

#basercms で！


今日の準備

http://study.basercms.net

素材ファイルをダウンロード

テスト環境（FTP）の設定


CakePHPとWordPressのプラグイン比較

CakePHPとWordPressのプラグイン比較


CakePHPのプラグインの特徴

種類o 開発ツール（ライブラリ）

o 独立した追加コンテンツ

呼びだし方法o 本体に呼び出すコードを書く（component / helper）

o ブラウザよりプラグインのURLをたたく

基本的に「能動的」


WordPressのプラグインの特徴

種類o 本体の処理に影響を与える

o 本体の機能を拡張

呼びだし方法o 本体により呼び出される＝フック

• アクション

• フィルター

基本的に「受動的」


BaserCMSのプラグイン開発

BaserCMSのプラグインの種類


CakePHPベースの開発手法

開発用プラグインとして開発o CakePHPのプラグイン開発とほぼ同じ

o BaserCMSのカスタマイズ時に有用

独自の追加コンテンツとして開発o CakePHPのプラグイン開発とほぼ同じ

o BaserCMSのメールプラグインやブログプラグイン


BaserCMSで拡張された仕組み（１）

プラグインフックo WordPressのように受動的な仕組みを提供

o CakePHP標準の beforeFilter や afterRender などをプラグインでフックできる。

o 本体に手を入れず本体の処理に割り込む事ができる。• （例）本体の全ての文章の文末を「ですよ。」に置き換える等

ごめんなさい、いい例が思いつきませんでした > <


BaserCMSで拡張された仕組み（２）

BaserHelper拡張o BaserCMSコアのBaserHelperにプラグイン側から受動的に機能を追加できる。

o Webページ編集画面の編集欄にコードを埋め込んで実行する事ができる。• （例）Webページ内に別のページの記事を表示させたり等


BaserCMSで拡張された仕組み（３）

プラグインウィジェットo サイドバーなどで利用するウィジェットエリアに追加する「ウィジェット」をプラグインとして提供できる• （例）ブログパーツのウィジェット提供等


ハンズオン前の注意事項（１）

最初簡単で少しずつ難しくなっていきます。※ CakePHPをされている方であれば後半になるにつれて簡単

時間の割にそこそこボリュームがあるので時間内で終わらない可能性があります。

終わりきれない場合、後半は端折りますが、ドキュメントはお持ち帰りできますのでご自宅で試されてください。


ハンズオン時の注意事項（２）

素材ファイルの code.txt を有効活用

作業が間に合わない場合、うまくいかない場合はコピペで


ハンズオン開始！

ハンズオン開始


BaserCMSのインストール

データベースはCSVを選択

スマートURLをオンに設定


プラグイン開発の準備（１）

プラグイン名を決める。o アルファベット名と日本語名

o 今回は、「sample」、「サンプルプラグイン」で。

プラグインフォルダを作成。o /app/plugins/{プラグイン名}/

o ここから先は全て上記フォルダを基準に配置場所を記述します。


プラグイン開発の準備（２）

バージョンファイルを作成。

o VERSION.txt

1行目にバージョン番号を記述（1.0.0）

設定ファイルを作成。

o config/config.php$title = '{プラグイン名}';

$description = '{説明文}';

$author = '{作成者名}';

$url = '{作成者のホームページURLなど}';

$adminLink = '{管理ページへのリンク（管理ページを用意している場合）}';

$installMessage = '{インストール時に表示するメッセージ}';


プラグインウィジェットを追加する

プラグインウィジェットを追加する


ウィジェットで利用する画象を準備する

vendors/img/popopo1.png


管理画面で認識させる為のテンプレートを作成

o views/elements/admin/widgets/{ウィジェット名}.ctp

$title = '{ウィジェットのタイトル}';

$description = '{ウィジェットの説明文}';

※ このテンプレートは、ウィジェットの設定値などを入力させる場合にも利用します。

※ /baser/plugins/blog/views/elements/admin/widgets/ 内のテンプレートを参考

ブラウザでウィジェットエリア編集画面を確認


ウィジェット本体を作成

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>


ウィジェットを設定＆公開ページ確認

ウィジェットエリア編集より作成したウィジェットを配置

公開ページのサイドバーを確認

※ プラグインがオンの場合のみ表示する仕様とすべきだが、現時点では、プラグインオフの状態でも表示されてしまう。


プラグインフックでCSSを読み込ませる

プラグインフックでCSSを読み込ませる


作成前の準備

プラグインをオンにしている場合は一旦オフにしておく。（効果を確認する為）

画象を用意するo vendors/img/popopo2.png


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


プラグインフックヘルパ作成（１）

views/helpers/{プラグイン名}_hook.php

クラスを記述

<?php

class SampleHookHelper extends AppHelper {

}

?>


プラグインフックヘルパ作成（２）

フックするメソッドを登録var $registerHooks = array('afterRender');

フックメソッドでCSSを読み込ませる処理を記述

function afterRender() {

parent::afterRender();

$Html = new HtmlHelper();

$Html->css('/sample/css/style', null, null, false);

}


プラグインをオンでCSSの反映を確認

プラグイン管理より作成したプラグインを有効にする


ダッシュボードにGooleAnalyticsのチャートを表示

ダッシュボードにGoogle Analytics のチャートを表示


作成前の準備

ライブラリを用意するo vendors/googleanalytics.class.php（Googleで配布されているがバグがあるので調整が必要）

o views/helpers/sample_chart.php


サイト設定テーブルにGoogleAnalyticsの設定情報を保存

CSVファイルを編集

/app/db/csv/baser/site_configs.csv

最終行に設定を追加

"","ga_user","アカウント名","",""

"","ga_pass","パスワード","",""

"","ga_id","プロファイル ID","",""


プラグインフックヘルパを編集する（１）

さっき書いた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'];


プラグインフックヘルパを編集する（２）

チャート用のCSSを読み込む

$Html->css('/sample/css/chart', null, null, false);

チャートを画像タグとして読み込む

$lc = $SampleChart->lc(

$siteConfig['ga_user'],

$siteConfig['ga_pass'],

$siteConfig['ga_id']

);


プラグインフックヘルパを編集する（３）

出力するecho '<div class="sample-chart corner10">';

echo '<h3>アクセス推移</h3>';

echo $lc;

echo '</div>';

※ afterRenderで直接出力した場合、コンテンツ部分の一番下に表示されます。


ダッシュボードを確認

ダッシュボードにチャート（折れ線グラフ）が表示されているか確認します。


BaserHelper拡張でページ内にチャートを表示

BaserHelper拡張でページ内にチャートを表示


BaserHelper拡張用ヘルパを作成

views/helpers/{プラグイン名}_baser.php

sampleLcメソッドを追加o 先頭行にHtmlHelperの初期化処理を記述$Html = new HtmlHelper();

o さっき作ったプラグインフックのafterRenderメソッドのif文の中身をコピペ


ページ編集画面にタグを貼り付け＆公開ページを確認

管理画面のページ管理よりページ編集画面を開く

WYSIWIGエディタをソースに切り替えて次のタグを貼り付ける

<?php $baser->拡張メソッド名() ?>

プレビューボタンより表示を確認


GoogleAnalytics設定情報の保存画面を作る

GoogleAnalytics 設定情報の保存画面を作る


コントローラーを作成する（１）

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');

}}

}


コントローラーを作成する（２）

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");


ビューを作成する

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('更新') ?>


動作確認

/admin/sample にアクセスして動作を保存確認します。正常に保存されればOKです。

これでハンズオンはおわりです。

お疲れさまでした。


注意事項

今日作ったGoogleAnalyticsチャート表示機能は、ライブラリがPHP5で書かれている為、PHP4では動きません。また、サーバーにphp5-crulがインストールされている必要があります。

あくまでサンプルコードの為、エラー回避処理を書いていませんので、GoogleAnalyticsの認証に失敗した時点で正常に画面が表示されません。

チャートの表示は時間がかかるので、描画処理完了後にAjaxで表示させる事をおすすめします。あとキャッシュの実装も。


BaserCMSユーザー会参加者募集

みんなでWebにおけるノウハウや日本独自の文化を注ぎこみ、BaserCMSをみんなが楽になるCMSにしませんか？

まずはメーリングリストに是非ご参加ください。

http://sites.google.com/site/baserusers/

告知


おしまい

ご清聴ありがとうございました。

せっかくの無償オープンソースなので皆さん是非有効活用してください。

Documents

BaserCMS の簡単プラグイン作成 - study.basercms.netstudy.basercms.net/vol4/files/baserstudy_vol4.pdf · エガシラリュウジ@BaserCMSユーザー会 2011年04月02日