concrete5 を Version5.7 から Version8 (8.1.0) にバージョンアップする方法とエラー時の対応方法

concrete5 version 8.1.0がリリースされています。

日本時間の1月25日にconcrete5のバージョン8.1.0がリリースされました。

そろそろバージョン8が安定してきたかなぁと様子を伺いつつ、アップデートを行いました。

今回、私が行ったアップグレード方法をご紹介します。

基本、以下のURLで紹介されていた英文をGoogle翻訳を掛けつつ進めました。

間違っている操作があれば教えて下さいませ。

Upgrading concrete5
https://documentation.concrete5.org/developers/installation/upgrading-concrete5

Version8.1.0へのアップデート手順

以下の手順でアップデートを行いました。

5.7系のconcrete5を利用している想定で話を進めます。

  1. 5.7系の最新バージョン(5.7.13)にアップデート
  2. 8.1.0をダウンロードして解凍
  3. 必要なファイルをアップロード
  4. 管理画面からアップデート
  5. つまづいたことと対応方法まとめ

Version8へアップデートしよう

1. 5.7系の最新バージョン(5.7.13)にアップデート

管理画面にログイン後、システムのバージョンアップを実行します。
この操作の前にバックアップはとっておきましょう!

以下の画面からアップデート操作を行います。

管理画面から【システムと設定】→【バックアップとリストア】→【concrete5をアップグレード】

画面のアナウンスに従って5.7.13にアップデートしていきます。

5.7.5.13へアップグレード

ダウンロードボタンをクリックして自動でダウンロードします。

(もしこのダウンロードボタンをクリックしてもエラーになる場合、手順2,3のように5.7.5.13を手動アップデートします。)

5.7.5.13へアップグレード

その後、更新をインストールをクリックしてバージョンアップを行います。

5.7.5.13へアップグレードが完了しました。

問題なく5.7.13にアップデートできました。

2. 8.1.0をダウンロードして解凍

次に、concrete5 Ver.8.1.0を公式サイトからダウンロードします。

concrete5 ダウンロード
https://concrete5-japan.org/about/download/

ダウンロードしたら解凍しましょう。

3. 必要なファイルをアップロード

解凍したファイルの中から、concreteディレクトリのみを残してそれ以外を削除します。

concreteディレクトリのみを残してそれ以外は全て削除

concreteディレクトリが格納された、concrete5-8.1.0ディレクトリを、updatesディレクトリにアップします。

updatesディレクトリに格納concrete5-8.1.0ディレクトリをupdatesディレクトリにアップロード

4. 管理画面からアップデート

アップロードが完了したら、以下の画面からアップデート操作を行います。

管理画面から【システムと設定】→【バックアップとリストア】→【concrete5をアップグレード】

画面のアナウンスに従って、8.1.0をインストールしていきます。

version8.1へアップグレード

更新をインストールをクリックします。

version8.1へアップグレードが完了しました。

これでVersion8.1へのアップデートは完了しました。

5.つまづいたことと対応まとめ

アップデートをしていると上手く行かないことがありました。

以下にエラーと対処方法を列挙します。

予期せぬエラーが発生しました。実行時間オーバーエラー

Maximum execution time of 30 seconds exceeded

上記のエラーが出た場合は、php.iniの設定を見直します。

php.ini の以下のパラメータを長く(120秒位?)設定します。

max_execution_time = 120

実行時間オーバーエラーが出て以降、エラーでインストールが進まない。

php.iniの設定をしたのに、エラーで動かない場合、concrete.phpファイルを設定してあげます。

\concrete\config\concrete.php

上記をコピーして以下のディレクトリに貼り付ける。

\application\config\

その後以下のパラメータ(170行目あたり)をtrueに変更してアップロードする。

※ アップデートが無事に終わったら上記をfalseに戻しておきましょう!

まとめ

スムーズに進めばすんなりとアップデートが完了するはずですが、躓いたら色々と調べる事になります!頑張りましょう!

また、これからはconcrete5のバージョン8が主流になっていくと思うので、影響が小さそうなサイトからアップデートを試し、ノウハウを蓄積してから大きめなサイトのアップデートをすることがおすすめです。

健闘を祈ります!



[制作者向け] WAFが正常なJavaScriptもエラーにしてしまう場合の.htaccessによる対応方法(CPIシェアードプランACE01の場合)

WordPressやconcrete5等のCMSを使うなら絶対あったほうが良いWAF

WordPressに対する不正攻撃からサーバを守ってくれるWAF(Webアプリケーションファイアウォール)。

CPIのレンタルサーバ シェアードプランACE01にはWAFが標準装備されていて、クロスサイト・スクリプティングやSQLインジェクション等のサイバー攻撃を未然に防いでくれます。

詳しくはCPIの以下のページに分かりやすい解説が載っています。

https://www.cpi.ad.jp/shared/detail/waf.html

CPIは、ジェイピー・セキュア社のSiteGuard Liteを導入しているようですね。

WAFがある安心感は非常に大きく、利用しないのはもったいない!というかWAFが使えるなら絶対に使ったほうが良い機能です。

しかしながら、WAFがしっかりと動作しすぎるために、サイト構築時に悪意のないJavaScriptもエラーになるケースも割りと多かったりします。

GoogleAnalyticsのコードをconcrete5の管理画面にペーストして保存しようとすると以下のようなエラーになり上手く保存が出来ないことも。

WAF(SITEGUARD)エラー

.htaccessでWAFの設定を変更・無効にできる

そんなときに私は、JavaScriptを貼り付けて保存する間だけ.htaccessを使ってWAFを無効化しています。

手順とは言いながら、.htaccessに以下の一行を付け加えるだけです。

これで、WAFを無効に出来ます。この行を削除すると有効化されます。

無効化して作業が終わったら、すぐに有効化をしましょう!

すぐに有効化をしましょう!

大事なので2回言いました。

また、ON(有効)・OFF(無効)の2択ではなくて、より柔軟にWAFの除外設定をすることも可能です。

その解説は以下のCPIスタッフブログに詳しく書かれていますのでご一読下さいませ。

知らないと怖いWebセキュリティと、CPIサーバーのWAF設定方法
http://shared-blog.kddi-web.com/webinfo/129#setting

2017年2月24日追記

あれから色々と調べていたら、以下サイトに記載されていた、IPアドレスによりWAFの除外設定をする方法がCPIでも使えました。

192.168.1.1 の部分を自分のIPアドレスに変更すると、該当IPアドレスからのアクセスの場合、WAFのフィルタリングから除外されます。

【誤検知】WAFのSiteGuard Liteで閲覧をブロックされてしまった場合の除外設定の方法
http://spot-web.jp/blog/2700/

 

感想

WAFがサイト構築の足かせにならないように、WAFと仲良く付き合っていきたいですね。

CPI LOVEなページを作りました

4年以上愛用しているCPIの共用レンタルサーバー ACE01について、褒めたり、愛のこもった文句を言うページを作りました。CPIサーバをご検討されている方は、もし良ければこちらもご覧ください。




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

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

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

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

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

目次

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

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

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

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

5.なぜかpage_theme.phpが読み込まれない。bootstrap3のグリッドが有効化できない。(2017年9月27日追記/concrete5 8.1)

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

管理者にも「一般管理者」と「スーパー管理者」の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

なぜかpage_theme.phpが読み込まれない。bootstrap3のグリッドが有効化できない

page_theme.php に以下の記述をして、enableGridContainer を呼び出すとエラー画面が表示される。あ、これだけ、concrete5 version 8.1で起きたことです。

page_theme.php

テーマのグリッド設置部分で以下のようにエリアを呼び出す。

home.php

エラー発生内容

予期せぬエラーが発生しました。
グリッドフレームワークが見つかりませんでした。グリッドエリアのメソッドには、PageTheme クラスで定義された有効なグリッドフレームワークが必要です。

No grid framework found. Grid area methods require a valid grid framework defined in a PageTheme class.

対処方法

テーマをアンインストールして再度インストールし直す(テーマを切り替えるだけではダメ)とGridフレームワークが認識されてエラーが消えた。

page_theme.phpはテーマのインストール時に保持されるっぽいかも?

まとめ

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 に連携出来るようになります。