concrete5 サイト属性について

この記事はconcrete5 Japan Advent Calendar 2017の6日目です。前回は mizuno.fumitoさんの 「concrete5のユーザー登録時に、ユーザーをグループ分けする処理」でした。

記事は concrete5 バージョン 8.2.1 を基に作成しています。

concrete5 バージョン8 より サイト属性 が導入されました。

以前よりページ属性という機能があり、その概念に近いのでまずはページ属性を簡単に説明したいと思います。

1.ページ属性の概略

ページ属性とは、たとえば ブログで言う「タグ」や トップページや人気ランキングページなどのブログ一覧表示をするときの「サムネイル画像」などを設定できるものです。concrete5ではそれ以外に、「ページリストブロック」や「オートナビブロック」を使用したときに一覧より非表示にする設定や、「METAタグ」の設定などに使用します。

僕の場合は、主にページ属性を設定したページに表示しないもののために使用することが多いです。(しかし、ページ属性の使用方法の自由度は高く、表示に使用することも可能で、「ページ属性表示ブロック」も標準機能で搭載されています。)

2.サイト属性の概略

さて、本題の サイト属性について書きたいと思います。

concrete5 バージョン8より「サイト属性」という機能が追加されました。

サイト属性とは、さきほど簡単に説明した(ここ強調)ページ属性のサイト全体で使用するバージョンです。設定画面は[管理画面 → システムと設定 → 名前&属性 → 属性管理] にあります。設定に関しては concrete5japan 公式サイトの下記のアドレスで確認してください。

https://concrete5-japan.org/help/5-7/recipes/get-site-attribute-value/

使用例としては 「サイト全体で使用するロゴや 会社名・住所・通称」 など あちらこちらで使用する項目(ページの特定の場所以外にも出てくる項目)に使用できます。会社名だとページのヘッダーやフッター、または会社概要のページにも使用されると思います。そのような場合に、サイト属性で会社名を設定しておけば、サイト属性を変更すれば サイト全体での変更が可能になります。

たとえば、company_name というサイト属性を表示する場合のコードは、下記のとおりです!!

concrete5 バージョン 8.2.1現在、サイト属性を表示するにはテーマやブロックのカスタムテンプレートに直接コードを書くとこになります(残念。。)

 

3.サイト属性表示用ブロックを作ってみました。

そこで、サイト属性表示ブロックを作ってみました。(記事現在 バージョン 0.9.0)

https://github.com/acliss19xx/concrete5_site_attribute_display

上記URLのページの[clone or download] から ダウンロードして解凍してできたフォルダを concrete5 の packages フォルダに入れて

[管理画面 → concrete5を拡張]

より インストールしてください。

パッケージのフォルダ構成
site_attribute_display
|-blocks/site_attribute_display
|-controller.php

インストールが無事完了すると ページ編集画面のブロックの一覧の一番下に [site attribute display ]という ブロックタイプが追加されますので、ページに設置してみてください。

また、ブロックの使用感やバグなど、このブログのコメント欄やgithubのissueを利用して教えていただけるとありがたいです。

concrete5 5.7.5 から $a->display($c) の $cが要らなくなったこと

concrete5 5.7.5 より 「通常のエリア」のdisplayメソッドで必要だった $c が必要無くなりました。

バージョン 5.7.5 以前のソースコード(5.7.5以降でも有効)

バージョン 5.7.5 以降のソースコード

$cとは、concrete5のページオブジェクトが入っており、concrete5標準のままだと、現在のページのオブジェクトになっています。また、以前から「グローバルエリア」の時は$cは不要でした。どうやら、グローバルエリアと通常のエリアで、書き方が違うことが問題とされ、ほとんどの場合、テーマを作成するときにdisplayメソッドには、決まり事のように$cをつけていたので、省きましょうということになったのではないかと思います。

余談ですが、テーマやブロックタイプを作るときに$cに値を代入すると、エラーになることがあるのでご注意ください。

さて、話を戻して、以前の$cをつけた書き方は5.7.5以降のバージョンでも有効です。

どのようなソースになっているか確認します。

https://github.com/concrete5/concrete5/blob/release/5.7.5.1/web/concrete/src/Area/Area.php#L829

1行目で引数がなければ、基準値として$cにfalseを設定しています。

3行目のif文で$cがfalseであれば、「現在のページオブジェクトを取得する」というコードになっています。

これによって、テーマファイルで$cを省いても、問題なく稼働するようになっています。

それでは、これからかかれなくなっていくだろう $c がなぜ必要か解説したいと思います。

Areaクラス(通常のエリア)は、独立した一つのクラスです。そのエリアはページが密着していまして、下記のソースの場合だと

$c は 現在のページ ですので、「現在のページのMainエリアを表示する」といういう意味になります。

例えば、下記のように書くと

「トップページのメインエリアを表示する」ということになります。

displayメソッドはどのページのエリアを表示しますか?というメソッドです。

ですので、ほとんどの場合は、現在のページのエリアを現在のページに表示したい(ややこしいw)ので、$cをつけることが、ほぼ決まり事になったというわけです。

最後に、あくまでも現状では$cはなくてもいいよという感覚で考え、当面は明示したほうがいいです。$cをつけることが間違いではないですし、5.7.5以前のバージョンも存在するでしょうし。。。

数日前に$cが必要なくなったことを知ったので、備忘録として書きました。間違っていたら、こっそり教えてください。

concrete5 5.7の開発に携わって

現地時間 2014年9月12日に concrete5 メジャーバージョンアップ 5.7 がリリースされました。

今回のバージョンアップは新機能もconcrete5のコアの部分はそのままに新機能や便利なブロックタイプの追加もありました。詳しくはconcrete5本家のページを見ていただきたいと思います。

http://www.concrete5.org/documentation/background/version_history/5-7-0/

今回感じたことを書きたいと思います。

「5.7の開発に携わって」といっても僕がコミットしたものはないし、パッケージ化してテストケース作って提供しただけ。それもどこまで役に立ったのか。。。。不明です。

バージョン5.6系までの日本語開発チームは、どちらかというと本家版がリリースされてから日本語の通らないところや日本語を使うことで問題が出るところを修正していく形が多く、その修正を本家版の次のバージョンに報告していくような手法でやってきました。ですので、本家の開発スピードに左右されることなく、自分たちのペースでやっていたので英語のリリースノートやフォーラムを読まなくても、ソースコードの解読だけでもある程度ついて行けた気がします。

しかし、今回の5.7系からは日本語開発チームは本家版のリリース時に日本語の問題点を取り入れてもらうように動きが変わりました(以前からでしたが今回から本格的に)。そうすると、コードだけを見て自分のペースで解読していくことでは追いつかなくなり、英語で本家に質問したり、フォーラムやgithubに書かれている内容を読んだりする必要性がありました。

本当に英語がわからなく、単語の意味すらわからないので、他のメンバーに「なんて書いてあるの?」と聞いてばかり。英語力の必要性を痛感しました。

英語力が本当にゼロなので何から手をつけていいかまったく分からないけど、少しずつ覚えていきたいと思います。誰か勉強方法教えて下さい。。。

語学に興味のあるプログラマーのみなさん、concrete5に興味を持っている人がいれば、ぜひ開発チームに参加してみてください。生の英語でやりとりできます。(僕はどんな英語か分かってないけど)。

オープンソースのコミュニティへの参加動機は様々あると思いますが、このような動機で参加されるのもありだと思います。

WordBench奈良に参加しました

8月23日 普段CMSといえばconcrete5しか使っていなくWordPressは全く素人なのですが、主催者の高井さんにconcrete5勉強会の開催場所などアドバイスを頂いていたので一度WordPressの勉強会に行ってみたいと思っていたところ、時間が取れたので参加してきました。

今回のテーマは

WordPressの基本構造をイチから復習!〜WordPressの構造から動的ページ作成まで〜

でした。

タイトルと写真を使ってギャラリーのようなページを静的サイトからWordPressに移行する方法を説明されました。イメージとしてはタイトルと写真で1ページにし、「前ページ」「次ページ」のリンクを付けるところまでを実演されました。

解説された若林さんは非常に説明がうまく声が通っていたので、大変わかりやすかったです。

まずは「CMSとは」から

webサーバーの説明からphp、mysql まで、どうやってWordPressが動いているかの説明。

そして、実際にサイトの作成の説明がありました。

テーマの作り方

CSSファイルへのリンク
<link href=”style.css” rel=”stylesheet”>

<link href=”<?php bloginfo(‘stylesheet_url’);?>” type=”text/css” rel=”STYLESHEET” />

タイトルの表示
<?php bloginfo(‘name’);?>

記事の表示
<?php the_content();?>

前へ
<?php previous_post_link();?>

次へ
<?php next_post_link();?>

テーマの適用方法
[ダッシュボード→外観→テーマ]から希望のテーマを選択する。

テーマにPHPを埋め込む形なんですね。必要なことはテーマに書き込んでおく必要があるような印象です。また、テーマはインストールとかしなくてもいいのは楽だと思いました。

concrete5の場合にギャラリーサイトを作るなら

1、テーマを作る
2、インストールする
3、ページタイプのデフォルトで必要なブロックを追加する(次前のリンクや画像表示ブロックなど)
4、コンポーザーの設定
5、ページを作る

こんな感じかな?

気になったのは記事の表示部分<?php the_content();?>
echoなどがないので関数側でやっているんでしょうけど、「特定の文字列を消したい」など、投稿内容を加工して表示したい場合どうするんだろう?

総括

WordPressはもともとブログなので標準の状態では出来ることが限られ簡単なギャラリーサイトであればセオリーがありそう。また、限られているからゆえにわかりやすく、参考資料も見つかりやすいんじゃないかと思います。(反論求む)

テーマにコードを書き込むことでユーザーが間違って大事な項目を消してしまう事は無いように思いました。このようなギャラリーのページの場合、html,css,phpが分かっていれば、concrete5よりWordPressの方が簡単に作れるように感じました。

concrete5と同様にWordPressにもテーマの書き方があって、それを覚える必要があり、そのための作法が違うので、いろんなCMSを使って同じ構成のサイトを作ってみると特徴が比較しやすいと思いました。提案してみようかな?

勉強会の進行として前半はテーマの説明、後半は質問タイムというのはやはりいい感じでした。

勉強会を開催されたWordPressのコミュニティーのみなさん、ありがとうございました。

第1回 concrete5奈良お茶会 報告

6月29日 奈良で初めてのconcrete5の勉強会を開催しました。

concrete5とは、ホームページを作成するソフトでホームページビルダーのようにパソコンにインストールするものではなくインターネット上にインストールしてホームページを構築していくソフトです。

最近は大阪の勉強会の人数が増えたためなかなか以前のような個々の質問にお答えする事が出来なくなったので、今回の奈良お茶会では、少人数で日ごろのconcrete5疑問を質問してみんなでその解決方法を話し合おうというという主旨で行いました。

ですのでセミナー形式ではなく、座談会のような形にしました。会場の風景はこんな感じです。

写真 2014-06-29 15 04 27写真 2014-06-29 15 04 07

いろんな質問がありました。

・ページタイプとはレイアウト別に分けるものですか?

・カスタムテンプレートとはhtmlタグのクラスを変更するものですか?

・比較的安価なレンタルサーバーで遅いですが、早くするよう法はないか?

・画像の一覧表をSortable Fancybox Galleryアドオンで表示して画像ブロックでその画像の一つを拡大して表示させているが、アドオンのブロックと画像ブロックを一塊に追加できる方法はないか?

その他いろいろな質問がありましたがメモしたものだけ載せています。すみません。。。。その時の回答を書きます。

・ページタイプとはレイアウト別に分けるものですか?

本家のサンプルのページタイプはleft_sideberやfull などとレイアウト別に分けている印象がありますが、実際には用途別で使うことが多いです。「お知らせページタイプ」「FAQページタイプ」「商品紹介ページタイプ」などといった感じです。そもそもページタイプとはなんですかという質問がありました。この件については今後説明していきたいと思います。

・カスタムテンプレートとはhtmlタグのクラスを変更するものですか?

ブロックの見た目を変更するカスタムテンプレートはhtmlタグのクラスを変更するためにも使えます。カスタムテンプレートはブロックの見た目を変更するものですので、クラスだけではなく表示する項目を変更したり、CSSを変更したり、またjavascriptを追加したりできます。

・比較的安価なレンタルサーバーでは遅いですが、速くするよう法はないか?

concrete5のキャッシュを有効にしてみたり、サーバーにphpキャッシュ機能がある場合は有効にしてみたりして一番速いものを選んで提案する。それでもやはり安価なレンタルサーバーでは当たりはずれがあり、キャッシュ使っても遅い場合があります。それはある程度やむを得ない部分であり、速い遅いは感覚の問題もあるので、提案時にお客さんにしっかりそれを説明するのがいいんじゃないかという意見があがりました。

・画像の一覧表をSortable Fancybox Galleryアドオンで表示して画像ブロックでその画像の一つを拡大して表示させているが、アドオンのブロックと画像ブロックを一塊に追加できる方法はないか?

この場合の趣旨としては上部に拡大した画像を設置し、その下に画像の一覧表を表示したいというものでした。amazonの商品紹介でよく見るものです。この場合は画像ブロックを使わずにsortable Fancybox Galleryブロックのカスタムテンプレートを作成し、拡大した画像もsortable Fancybox Galleryブロックで表示するといいんじゃないかという提案をしました。

総 括

今回は座談会のような形で行いました。

今回の狙いは気軽に質疑応答をすることでした。その点に関してはうまくいったのではないかと思います。しかし、今回はconcrete5公式ガイドブックの著者が4人いたことで成り立ちましたが、じっくり回答するにはこの人数でも多いように思います。デメリットとしては使い始めて間がない方は何を質問していい関わらず時間が経過していく可能性があることです。

セミナー形式でやってはどうかという意見もありました。ワークショップ形式も今後行っていきたいと思います。みなさんのご意見頂きながらできる限り参加者の希望に添える形で進めて行きたいと思います。

参加くださった方々本当にありがとうございました。

linux mint で concrete5 開発環境を整える(その1)

linux mint で concrete5のテーマをbootstrap3 を用いて作成する開発環境を整えてみました。仮想環境を作れば現在の開発環境を壊すことなく、気軽に試すことができるのでぜひ、チャレンジしてもらいたいと思います。

まずはlinux mint の ホームページに行きisoファイルをダウンロードします。

http://www.linuxmint.com/download.php

仮想環境で試される方はxfce が 無難かもしれません。

vmware player か virtualbox で linux mint を インストールします。

vmware player でも virtual box どちらでもOKです。

途中、ユーザー名やパスワードを聞かれるので任意の文字を入れてください。

インストールが終わったら、「端末」を開きます。

左下に歯車のようなマークがありますのでそれをクリックし、端末を選択します。

あとはほぼ黒い画面で行います。

やること

・LAMPサーバーの構築

・日本語入力ソフトのインストール

・テキストエディタインストール(vim)

・データベース管理ソフトインストール(phpmyadmin)

・gitのインストール(git、gitk、git-gui)

・LESSコンパイル用grunt インストール(node.js、grunt)

・jeykell インストール (ruby)

・統合環境インストール(netbeans)

・ブラウザインストール(google chrome)

・concrete5 ダウンロード

・concrete5のテーマ作成用ファイル ダウンロード

 

・LAMPサーバーの構築

sudo apt-get install tasksel

sudo tasksel
LAMP SERVER を選択[TAB]OK
パスワードは任意ですがここではすべてconcrete5

・日本語入力ソフトのインストール
sudo apt-get install ibus-mozc ibus-anthy

・テキストエディタインストール(vim)

sudo apt-get install vim

・データベース管理ソフトインストール

sudo apt-get install phpmyadmin

・concrete5を動かすためのphpプラグイン

sudo apt-get install php5-gd

ここまでで、concrete5をインストールできる環境が整います。

 

・gitのインストール

sudo apt-get install gitk git-gui

・LESSコンパイル用grunt インストール

sudo apt-get install curl build-essential libssl-dev ・・・node.jsインストール用

LESSコンパイラーインストール
node.js インストール

node.jsはインストーラーがあってそちらを使ってもいいのですが、バージョンが変わるので今回は将来のnode.js のバージョンアップに備え あえて、gitを使用します。

git clone https://github.com/creationix/nvm.git ~/.nvm ・・・githubよりクローンします。
source ~/.nvm/nvm.sh ・・・ node.js を 実行します。
nvm install 0.10  ・・・node.js のバージョンを0.10系 の最新版にします。原稿時は0.10.25です。
nvm alias default 0.10 ・・・ node.js のデフォルトを0.10系の最新版にします。

vim ~/.bashrc ・・・.bashrc ファイルを開き常に次回起動時にも実行されるように設定します。

「i」を押して挿入モードにして下記を入力

source ~/.nvm/nvm.sh

「esc」を押して「:wq」と入力すると保存完了し、コマンドプロンプトに戻ります。

nvm -v でバージョンを確認します。

bootstrap3 lessファイルコンパイル用 grunt インストール
npm install -g grunt-cli

・jeykell インストール (ruby) 

sudo apt-get install ruby1.9.1 ruby1.9.1-dev ・・・gem 使用のため ruby インストール

sudo gem install jekyll ・・・bootstrap3 ドキュメント用ファイルインストール

 

 

・統合環境インストール(netbeans)

下記よりダウンロード
https://netbeans.org/downloads/

ダウンロードしたファイルを右クリック→プロパティ→実行可能にするにチェック
ファイルをダブルクリック

・ブラウザインストール(google chrome)

下記より該当ファイルをダウンロード
http://www.google.co.jp/intl/ja/chrome/browser/

ダウンロードしたファイルをダブルクリック

・concrete5ダウンロード

git clone https://github.com/concrete5japan/concrete5.git

・concrete5 テーマ用bootstrap3ダウンロード

git clone https://github.com/acliss19xx/c5_bs3_theme.git

 

翌月の末日を算出するPHPコード(メモ)

concrete5関西ユーザーグループ勉強会で翌月の末日を算出するにはどうしたらいいかという話がありましたのでコード紹介します。

date(“Y-m-t”,strtotime(date(“Y-m-01”,strtotime(“+1 month”))));

Y-m-t の Yが西暦 mが月 tが末日を表しています。

最初は下のコードで出来ると思っていたのですが1月30日に実行すると3月31日になるようです。意外な落とし穴でした。

間違いのコード date(‘Y-m-t’, strtotime(‘+1 month’));

もうひとつstrtotime関数を使っています。その関数はほかにもいろいろあるようです。便利なので紹介します。

strtotime(‘yesterday’) //昨日

strtotime(‘+1 day’) //明日

strtotime(‘+1 week’) //1週間後

strtotime(‘+1 month’) //1ヵ月後

strtotime(‘+1 year’) //1年後

 

concrete5 で 編集できるユーザーでログインしているかどうか判定する方法

concrete5 バージョン 5.6.0.2で

編集権限のあるユーザーでログインしているかどうかを判定する方法

$c = Page::getCurrentPage();
$cp = new Permissions($c);
if($cp->canViewToolbar()) {
//処理
}
これをブロックタイプのカスタムテンプレートに入れると
そのページの編集権限のあるユーザーの場合だけ表示されるものが作れます。

concrete5 ページタイプの作成方法(メモ)

concrete5 で ページタイプを作るとき、同じレイアウトでも用途によって分けることがいいとおもいます。

メリット

・ページリストブロックタイプで特定のページタイプのみを表示することができる。

・コンポーザーを使用するときに任意の場所に作成することができる。

 

デメリット

・同じレイアウトだと、後でエリアを追加したい時などページタイプごとにすべて作らないといけない。

といった感じではないかと思います。

デメリットの部分に関して僕がやったことを紹介します。

 

テーマファイルの中にlayouts フォルダを作成し、そこに、エリアなどを分けたレイアウトをしたファイルを置きます。

/layouts/leftsidebar_inner.php

そのファイルにすべてのコードを入れます。(実際にこのファイルはページタイプとして反映されません。)

次に実際のページタイプファイルには、たとえば”ニュース”ページタイプだとすると

news.php

<?php
defined(‘C5_EXECUTE’) or die(“Access Denied.”);
$this->inc(‘layouts/leftsidebar_inner.php’); ?>

と入力し保存します。これを他のページタイプでも同じコードを入れれば、後でエリアを追加したときなどのレイアウト変更にも簡単に対応でいます。

concrete5 第16回関西ユーザーグループ勉強会

concrete5 第16回関西ユーザーグループ勉強会に行ってきました。

今回は僕がページタイプとページ属性、ページリストブロックを使ったナビの作成方法を話させてもらいました。

ナビを作成するためにはオートナビとページリストの二つのブロックタイプを使用することができます。通常ナビはオートナビを使用することが多いようですが、今回はページリストを使用しての上部と下部に2種類のナビとリンクを画像にしたナビの方法を説明しました。

理由は

・ページリストはページタイプによって表示、非表示を区別できる。

・ページタイプで分けることにより上部メニューと下部メニューがつくりやすい。(例えば、会社概要や個人情報うんぬんは下のメニューにして、上部メニューは商品関係のみ みたいなサイト)

・カスタムテンプレートの作り方がわかりやすかった。

実際に解説してみます。

○まずは2つのページタイプを作成します。

  • 「上部メニュー用」「下部メニュー用」名前は適当です。
  • 上部メニューに使うページは上部メニュー用ページタイプで作成します。
  • 下部メニューに使うページは下部メニュー用ページタイプで作成します。
  • どちらも同じレイアウトのもので問題ないです。

○次にホームにページリストブロックを追加します。

  • ページリストの編集画面でページタイプを設定するところで上部メニュー用を選択する。
  • 下部にもう一度ページリストを追加して下部メニュー用を選択する。

これだけで2種類のナビが作成できます。

つぎにページリストのリンクしている文字を画像に変更するやり方ですが、

○管理画面からページ属性を作成

  • 新規作成で画像を選択し、任意の名前とハンドルを入力します。

○実際のページにページ属性をつけます。

  • 編集のプルダウンメニューの中から設定を選択します。
  • 2つ目のタブの属性を選択します。
  • 左側に追加できる属性の一覧表が出るので先ほど作成した属性をクリックします。
  • 右側に追加されるのでそこにナビで使用したい画像を選択し、保存

○カスタムテンプレートを適用する。

  • /concrete/blocks/page_list/view.php と view.css を /blocks/page_list_templatesにコピーする
  • ページ属性を使用できるように変更する。面倒だと思いましたのでこちらよりダウンロードしてください。https://docs.google.com/file/d/0B52ht_qzvrJlT1BoNnFlcVJwams/edit

以上で表示されます。

うまく説明できたかどうか不安ですけど、これで以上です。キャプチャーとか取れば分かりやすいと思うんですけど、ちょっと時間がないです。

ページタイプの概念のひとつとしてレイアウトごとに作成する。というのもありますが、レイアウトは一緒でも用途や使う場所によって分ける方法もあります。僕は後者の概念のほうが使いやすいと思ってます。

今回も準備不足でまとまりのない感じになりましたが、来ていただいた方々聞いていただきありがとうございました。