【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

 

【concrete5】コンなごでWordPressユーザに捧ぐconcrete5講座という講演をしてきました

WordPress使いのためのconcrete5講座

2016年2月20日に名古屋駅近くのコワーキングスペース「ベースキャンプ名古屋」で行われた、コンなご(コンクリートファイブ名古屋勉強会)に参加してきました。

https://concrete5nagoya.doorkeeper.jp/events/38760

その中で「WordPressユーザに捧ぐconcrete5講座」と題して、concrete5(コンクリートファイブ)についての講演をさせていただきました。

私自身の体験を元にできるだけ噛み砕いて話をしてきました。口頭で補足する部分も多く、スライドだけで伝わりづらかったらごめんなさい。