【concrete5】concrete5.7のカスタマイズ(スーパー管理者のこと、サブディレクトリインストール方法、記事ブロックエディタ[Redactor]のカスタマイズ、確認画面付き問い合わせフォームの作成)

concrete5 のサイト構築は道を切り開く醍醐味が味わえる

案外情報が少なくて、concrete5の構築には割りと時間がかかりがちですが、でもそれが面白かったりするわけで。

今回、concrete5でサイトを作る際に躓いたことや小技的なものを共有するために記事にしました。

ちなみにこの記事は、concrete5 5.7.5.9 を対象に作成しています。他のバージョンでも動くかは不明ですが参考にはなるかと思います。

目次

1. 困った:ページタイプのデフォルトブロックが何故か編集できない

2. サブディレクトリにconcrete5をインストールしてルート(/)で公開したい

3. 記事ブロックのWYSIWYGエディタ(Redactor)の挙動を変更したい

4. 確認画面付き問い合わせフォーム(自動返信メールあり)の作成

困った:ページタイプのデフォルトブロックが何故か編集できない

管理者にも「一般管理者」と「スーパー管理者」の2つがある。スーパー管理者でしか、ページタイプのデフォルトブロックは編集できない

スーパー管理者:一番最初に作成されるユーザー admin ユーザのこと

一般管理者:管理者グループに属している自分で追加したユーザのこと

詳しくは、Katzさん記事が分かりやすかったです。

concrete5 で管理者が複数人いるときの豆知識
http://ja.katzueno.com/2014/11/3288/

サブディレクトリにconcrete5をインストールしてルート(/)で公開したい

やりたいこと

/ ・・・ルートディレクトリにはconcrete5をインストールせず、

/concrete5/ ・・・ concrete5ディレクトリにインストールした状態で、

http://example.com/ にアクセスしても、concrete5を読み出して表示させたい!

理由は聞かないで!そうしたいんだ!

色々と参考になるフォーラムがあったのでそれを参考に実装しました。

フォーラムを読むと、.htaccssだけでも実現可能ということも書かれていましたが、私の場合は、concrete5インストールディレクトリ直下のindex.phpを修正しないと、画像などのパスが「http://example.com/concrete5/・・・」となってしまいましたので、index.phpも修正を行いました。

参考にしたフォーラム記事

https://concrete5-japan.org/community/forums/5-7-x/post-10739/

https://concrete5-japan.org/community/forums/usage/post-2602/

ちなみに動作確認したのはCPIのACE01レンタルサーバです。

修正・作成するファイル

/.htaccess

/concrete5/.htaccess

/concrete5/index.php

/.htaccess の修正内容

ルートディレクトリ直下の.htaccessに以下のルールを記述する。
下2行の「concrete5」となっている部分は、ご自身のインストールしたディレクトリ名に書き換えること。

/concrete5/.htaccess の修正内容

concrete5インストールディレクトリ直下の.htaccessに以下のルールを記述する。
最終行の「concrete5」となっている部分は、ご自身のインストールしたディレクトリ名に書き換えること。

/concrete5/index.php の修正内容

concrete5インストールディレクトリ直下のindex.phpを修正する。
require(‘concrete/dispatcher.php’);よりも上に以下の4行を追加する。
それぞれ「concrete5」となっている部分は、ご自身のインストールしたディレクトリ名に書き換えること。

追加するとこんな感じになる。

動作確認する

自分のサイトURLにアクセスして、concrete5がちゃんと読み出されていることを確認するべし。

記事ブロックのWYSIWYGエディタ(Redactor)の挙動を変更したい

記事ブロックのWYSIWYGエディタのRedactor(リダクター)のカスタマイズ方法です。

concrete5 バージョン8からはCKEditorが使われるようになったので5.7までしか役に立たないかもしれません。ごめんなさい。

以下のドキュメントを参考に行います。

https://concrete5-japan.org/help/5-7/recipes/customizing-redactor-editor/

やりたいこと

・自動的にdiv要素がp要素に変換される処理をやめたい

・spanなどのインライン要素が勝手に消去される処理をやめたい

修正・追加するファイル

/application/bootstrap/app.php

/application/src/Editor/RedactorEditor.php

/application/bootstrap/app.php を修正する

/application/bootstrap/app.php ファイルを開き、以下のソースを追加します。

/application/src/Editor/RedactorEditor.php を追加する

肝になるのが以下の部分。

$options[‘replaceDivs’] = false; // divがpに変換される処理をストップする

$options[‘removeWithoutAttr’] = false; // spanが消去される処理をストップする

それぞれ、

・replaceDivsをfalseにすることでDivが置き換わるのを停止。

・removeWithoutAttrをfalseにすることで属性の付いていないspan等の要素が消されるのを停止。

という設定になります。

確認画面付き問い合わせフォーム(自動返信メールあり)の作成

便利!スイトン(SUITON)確認フォームアドオンを使うと確認画面付きの問い合わせフォームが作れる!

GitHubで公開されているconcrete5 5.7系用確認画面付メールフォーム「suiton_confirm_form_pack」を利用すると確認画面付きのメールフォームが簡単に作れました。

https://github.com/YuzuruSano/suiton_confirm_form_pack

しかも、管理者用の自動返信メールと送信者(問い合わせしてくれた人)用の自動返信メールを別々に設定出来るのも便利でした!

インストール方法・使い方

GitHubにインストール方法や使い方が書かれています。

使う時にカスタムテンプレートの指定を「confirm」に設定することをお忘れなく。私はテンプレート指定が出来ておらず、なんで確認画面が出ないんだ~~!と頭を抱えました。

https://github.com/YuzuruSano/suiton_confirm_form_pack

まとめ

concrete5を使った制作のお役に立てれば幸いです。

Version 8が出ているのになんで5.7やねんというツッコミが来そうですが。大人の事情をお察しください。

concrete5の最新バージョン「concrete5 Version 8」はExpressと呼ばれるkintoneチックなデータベースを作れる機能が追加されるなど更に進化をしています。

興味がある方は、ぜひ最新バージョンをダウンロードして使ってみましょう!

https://concrete5-japan.org/

2017年1月25日には、8.1.0もリリースされています!

https://concrete5-japan.org/news/concrete5-810/

【concrete5】concrete5 ver5.7のフォームに自動返信機能をつける方法

concrete5のフォームブロックには、自動返信機能が無い!

concrete5のフォームブロックにはフォームを送信してくれた人に対する自動返信の機能が付いていません。

企業サイトでは自動返信をお客様に対して送信ほしい。という事をよく言われるので自動応答出来ないとちょっと困りますよね。

アドオンや外部フォームを使うなどの実現方法もありますが、わりと簡単に自動返信機能のカスタマイズは行なえますので、その方法をご紹介します。

自動返信メールの設定手順

以下の流れで自動返信機能を追加します。コピペで出来ると思うので、怖がらずにチャレンジしてみてくださいね。

  1. フォームブロックを使ってフォームを作る
  2. 自動返信メールの雛形を作成する
  3. フォームブロックに自動返信処理を追加する

1. フォームブロックを使ってフォームを作る

普通にフォームブロックを使ってフォームを作りますが、メールアドレスフィールドの設定を忘れないようにしましょう!

1-1. メールアドレスフィールドを追加して、【このEmailアドレスへ返信 】にチェックを入れる

このアドレスに自動返信することになります。もちろん必須入力にすることをお忘れなく。

メールアドレスフィールドを作る

 

補足:サイト管理者へのフォーム送信通知メールの設定も忘れないように

フォームの送信があった時に、サイト管理者へメールで通知出来るように以下の設定も忘れないようにしましょうね。意外と忘れがちなので。

通知メールアドレスを設定する

 

2. 返信メールの本文を作成する

ココからは、concrete5のapplicationフォルダに必要なファイルを追加していきます。

GitHubにサンプルファイルを置いたので、まずは以下からダウンロード下さい。

GitHubから雛形をダウンロードする

以下に自動返信処理の雛形を置いたのでダウンロードしてきて下さい。

利用するのはapplicationフォルダ配下のみです。

https://github.com/onocom/concrete5-formblock-auto-reply-skeleton

2.自動返信メールの雛形を作成する

GitHubからダウンロードしたファイルの中から以下のファイルを開きます。

/application/mail/block_form_auto_reply.php

このファイルが自動返信メールで利用されるメールテンプレートになります。
開いたら、以下部分の冒頭文・署名を好きな文言に書き換えます。

3.フォームブロックに自動返信処理を追加する

次は、自動返信処理を追加していきます。

と言っても、先ほどGitHubよりダウンロードしたPHPファイルに送信処理は記述しておいたので、送信元メールアドレスや、送信者名、メールの件名等のパラメータを変更してあげるだけで良いかと思います。

GitHubからダウンロードしたファイルの中から以下のファイルを開きます。

/application/blocks/form/controller.php

580行目あたりから始まる以下の部分を書き換えていきます。

コメントにあるとおり、送信者名($myFromName)・送信者のメールアドレス($myFromAddress)・メールの件名($myMailTitle)を書き換えます。

メールのテンプレート名($myMailTemplate)は基本的にこのままで大丈夫ですが、オリジナルのメールテンプレートを利用したい場合は、ここにそのテンプレート名を設定します。

4. ファイルをアップロードしよう

編集が終わったら編集を行った以下の2ファイルをサーバ上の同じディレクトリにアップします。

mailディレクトリやblocksディレクトリ、formディレクトリが存在しない場合は、作成します。必ず、このパスになるようにファイルを配置しましょう。

/application/mail/block_form_auto_reply.php
/application/blocks/form/controller.php

※ もし上記ファイルが既に存在している場合、ファイル比較ソフトを利用するなどして慎重にマージして下さい。

これで多分おそらく、フォームに自動返信機能が付加されているはずです。

試しに送信することをお勧めします。

まとめ

まだまだ改善の余地はありますが、少しばかりの道筋は示せたかと思います。

このカスタマイズ方法がご参考になれば幸いです。

改善の余地

必要な関数のみオーバーライドしたほうがメンテナンス性高そう。

複数フォームが設置されている場合のことをもう少し考慮したほうが良い。

concrete5 Version8が出てるけど動くかは検証出来ていない。

動作確認環境

concrete5 Version – 5.7.5.13

【mautic】concrete5のユーザ登録時にmauticのコンタクトに登録する方法

毎月、mautic meetup nagoya勉強会ベースキャンプ名古屋で開催しています。

7月の勉強会は【Mautic Meetup Nagoya #4 「Contacts は奥が深い」】というタイトルの勉強会で、コンタクト(旧称:リード)の使い方について学びました。

そこでconcrete5とmauticを連携させる簡単なデモを実施しましたので、実装方法を残しておきます。

やること

  • concrete5のユーザ登録時にユーザ情報をmauticと連動させる
    • 連動する情報は以下のとおり。
      • メールアドレス( email )
      • 姓( lastname )、名( firstname )
      • 会社名( company )

concrete5は誰でも認証なしにユーザ登録出来る設定にしています。

mautic側の設定

mauticのコンタクトを外部から操作するには、コンタクトフィールドの設定が必要です。

1. 右上の歯車マークをクリックして「Custom Fields」を選択します。

mauticのフィールド設定

2. First Nameを選択して詳細画面を開きます

First Name選択

3. 右側に表示されているPublicly updatable を「はい」に設定します

Publicly updatable
Publicly updatable を「はい」に設定します

この設定をすることで外部からのコンタクトの設定値を更新出来るようになります。

4. 連携予定のその他のコンタクトフィールドも同様に設定します。

  • メールアドレス( email )
  • 姓( lastname )、名( firstname )
  • 会社名( company )

concrete5側の設定

1. 誰でもユーザ登録できるようにします

concrete5ユーザ登録の設定

2. ユーザ属性を追加します

ユーザ属性追加

3. ユーザ登録画面にトラッキングコードを挿入します

application/single_pages ディレクトリに、以下のファイル(register.php)をダウンロードします。

 

gist – register.php

register.php の以下の部分を自身のURLに変更します。

ソースの簡単に説明

以下の部分で登録完了した方の情報をトラッキングコードに含めています。

以上でユーザ登録をしてくれた方を、mautic に連携出来るようになります。

【concrete5】concrete5 ver5.7以降で最速でテーマを作る方法

themes.PNGWordPressでもconcrete5でもそうですが、テーマを作るぜ!という話をした時に尻込みしてしまう方が結構います。(特にデザイナーさんに多いような)
理由は、「プログラム言語を怖い。PHP怖い。」という答えが私の周りには多かったです。

安心してください。
concrete5はWordPressよりもテーマの作り方が簡単です。
最初はおまじないだと思っておいて後から少しずつ理解していけばOK。

デザイナーさんでも怖がることが無いように、最低限必要なファイルだけでサクッとテーマを作って行こうと思います。

最低限必要なファイルとは

以下の3ファイルだけです。
しかもdescription.txtとthumbnail.pngはただのテキストファイルと画像です。
デザイナーさんでもこれなら触れますね。

3のdefault.phpだけはプログラムですが、基本HTMLファイルですので気を楽にしてください。

1 description.txt

テーマの説明テキストファイル。

2 thumbnail.png

テーマの画面キャプチャ。360×270のPNG形式。

3 default.php

デフォルトのテーマファイル本体

たった3つでテーマができる!素敵concrete5!
それでは、順を追ってテーマを作っていきます。

 

前提:静的HTMLを作る

まずはconcrete5云々の前に、HTML+CSS+JS等を使って静的なサイトを作ります。
作ってない方で、テーマ学習をしたい方は適当なHTMLテンプレートをググッて探しておきましょう。

1: テーマを格納するフォルダを用意しよう

theme-folder.PNG

application/themes フォルダの中に、適当なフォルダを作りましょう。

例: application/themes/sample-theme

2: description.txtを作る

description-text.PNG

空のdescription.txtを作成した後、以下の2行を追加します。
1行目はテーマ名。2行目はテーマの説明です。
必ずUTF-8で保存しましょう。
description.txtの内容

テーマ名
このテーマの説明を書きます。
補足
concrete5 5.7以降は、page_theme.phpファイルを作って getThemeName() と getThemeDescription() というメソッドにテーマ名やテーマの説明を記述できるようになりました。
今回はできるだけ簡単に済ませたいので、上記の方法を採ります。

 

3: thumbnail.pngを作る

theme-thumbnail.PNG

360px×270pxのPNG画像を作ります。テーマをひと目で認識できるようなキャプチャ画像が良いでしょう。

以下の画像を右クリックして保存頂いてもOKです。

thumbnail.png

4: HTMLファイルをdefault.phpにリネームする

themes.PNG

前提として作ってあるHTMLファイルをリネームして「default.php」にします。

 

5: おまじないをHTMLファイルにおまじないを書く。

・default.phpの一行目

<?php defined(‘C5_EXECUTE’) or die(_(“Access Denied.”)); ?>

直接テーマファイルをコールさせないためのおまじないで、今後新たにテンプレートファイルを追加するときなどは必ず上記を書くようにしましょう。

・スタイルシートや画像の読み込みの部分

各ファイルへのパスを出力してくれるおまじないです。以下のように記述します。

・head開始タグ内

タイトル・文字セット等を自動的に出力してくれます。
なので、<title>タグ・<meta charset=”utf-8″>は削除してOKです。

・body終了タグの直前

管理バーやJSの出力をしてくれます。

・body開始タグ直後、Loader::element(‘footer_required’)の直前

bodyの開始タグ直後と終了タグ直前に以下を記載します。
divの閉じタグはLoader::element(‘footer_required’)よりも下に記載します。

この記述をすることで、concrete5が適切なCSSクラスを出力できるようになり、concrete5のインターフェースが正しく動作するようになります。

例えばconcrete5にはコンポーザーという機能が有りますが、上記を記述しておかないとコンポーザーが表示されない等の問題が発生します。
案外見落としがちなので要チェックです!
かくいう私もコンポーザーが動作しなくて、プログラムとずっとにらめっこしていた経験が有ります。

・エリアを指定する

concrete5-area.png

concrete5はエリアにブロックを配置してサイトを作っています。
テーマファイルには難しいプログラムを書く必要は無く、エリアの場所だけを指定してあげます。

各ページのコンテンツを書くエリアを定義するために以下のコードを書きます。

 

・グローバルエリアを指定する

ページ共通のグローバルエリアを設置するために以下のコードを書きます。

 

 

まとめ

テーマ作成、簡単でしたでしょうか?

ちょっと文章ばかりでは理解しづらい。という方、以下にテーマの作り方が動画と一緒に上がっていますので参考にしてください。

http://concrete5-japan.org/help/5-7/tutorials/theme-design-basic-seminar/

また、テーマ制作で陥りやすい落とし穴というページも参考になります。

http://concrete5-japan.org/help/5-7/developer/designing-for-concrete5/building-a-concrete5-theme/common-pitfalls/

蛇足

先日のコンなご(concrete5名古屋ユーザーグループ)でKatzさんがconcrete5のコーディングガイドラインを紹介していました。
このコーディングガイドラインには、concrete5におけるコーディングで●●をしてはいけない。といったの禁止事項なども書かれています。
ぜひ参考にしてみてくださいね。

https://github.com/katzueno/concrete5-Coding-Guideline/tree/japanese

あと、このツイートで紹介してくれている仕様書テンプレートも参考になりましたので紹介します。

concrete5_仕様書テンプレート_一般公開

https://drive.google.com/folderview?id=0BzWUde-u-vKvbDhGSUY3TDliak0&usp=drive_web#list

【concrete5】concrete5 version5.7.5.6を共用レンタルサーバのCPI シェアードプランACE01 にインストールする方法

c5.PNG

CPIの共用サーバACE01は最高ですね。やっとPHP7にも対応したし更に最高度がアップした昨今です。

さて、今回はCPIのACE01にconcrete5をインストールする方法を紹介します。

データベースを作る

CPIの管理画面でDBを作っておきます。文字コードはUTF-8を指定します。

cap_db.PNG

 

SSHを設定する

concrete5のファイル数はかなりの量があるため、SSHで行うと楽です。
SSHの設定方法はCPIのシェアードプラン ACE01 スタートアップガイドに書かれていますので参照してみてください。

http://www.cpi.ad.jp/support/startup/shared/publish/index.html#use_ssh

FTPでも出来なくは無いので、SSHメンドイ!という方はFTPでもOKです。
多分作業が終わる頃にはSSHにしておけばよかった。と思うことでしょう:-)

 

インストールファイルを取得して展開する

SSHでアクセスして、concrete5のZIPファイルを取得します。

ZIPファイルを解凍(展開)します。

解凍したファイルをルートに移動します。

空のディレクトリは不要なので削除します。

 

.htaccessとphp.iniを作る

.htaccessを作る

以下の「aaXXXXXXX」の部分は環境に合わせて変更してください。
今回、ACE01_2011のサーバで動作させる予定なので、PHPのバージョン5.5.16を使用していますが、ACE01_2015のプランの場合は、PHP7.0.2が使えるので「AddHandler x-httpd-php70 .php」としておくと良いでしょう。

詳しくはCPIのオンラインヘルプを参照ください。

http://acesr.document.secure.ne.jp/tools/php/

 

php.iniを作る。

この記述が無いとインストーラがエラーを表示してしまうので忘れずphp.iniも作ります。

 

ブラウザでURLにアクセスする

以下の画面が表示されていたらとりあえずファイル関係の設定はOKです。

cap_install.PNG

言語を選んでボタンを押します。

cap_install_2.PNG

インストールを続けるを押します。

cap_install_3.PNG

各種項目を入力します。

データベースサーバーはループバックアドレス(127.0.0.1)を設定します。localhostだと上手く行かなかったのはなぜだろう。

cap_install_4.PNG

インストールが進みます。

cap_install_5.PNG

 

はい。この画面が表示されればインストールバッチリ完了です。

まとめ

CPIにはCMSインストーラが付いているのでCMSインストーラでconcrete5をインストールすることも出来ます。

http://www.cpi.ad.jp/shared/detail/cms_install.html

ただ、手動でインストールしてもそんなに手間では無いのでぜひチャレンジしてみてくださいね。

あと、サーバを持っていない方で、試しにconcrete5を使ってみたい方は本家サイトでトライアルができるようになりましたので、お試し下さいませ。

Try concrete5

http://www.concrete5.org/trial

 

同じようなのがa-blog cmsにも!

話がそれますが、a-blog cms もテスト環境が出来ましたね。

こういう仕組みがあると敷居がグッと下がりますね。ありがたやありがたや。

ablogcms.io

http://ablogcms.io/

a-blog.PNG