2017年1月17日 WordBench京都

1. 2017年1月15日
WordBench京都
Cherry Pie Web 川井昌彦
concrete5を使って分かった、
WordPressのいいところ

2. 2
自己紹介
●川井 昌彦（かわい まさひこ）
東京の制作会社に24年間勤めた後、
京都府舞鶴市に帰郷し、フリーランスで、DTP・Web制作をしています。
提案・見積・ディレクション・デザイン・コーディング・
プログラミング・顧客サポート・・・
制作の上流から下流までを一手に引き受けています。
WordCamp Kansai 2016 セッションスピーカー・ハンズオン世話役

3. 3
Cherry Pie Web
http://www.cherrypieweb.com
1997年開設
今年で19年目 ！
2015年に
MovableTypeから
WordPressに移行

4. 4
本日の予定
1. 私的 WordPressとconcrete5の使いわけ
2. WordPressだとカンタンなのに、
concrete5だと「えっ？」ってなること
3. WordPressでもできる、concrete5みたいなカスタマイズ
4. まとめ

5. 5
私的 WordPressとconcrete5の
使い分け

6. 6
最近の仕事は、ほとんどCMS構築絡み
・ MovableType
・ MODX
・ Magento
・ WordPress
・ concrete5
ここ数年は大半がWordPress案件ですが、
Concrete5で提案することが増えてきました。

7. 7
WordPressではなく、
concrete5を選択するポイント
・ 承認ワークフローが必要
→ コンプライアンスを重要視する組織向け
・ 固定ページを担当者が触りたい
→ WYSIWYGエディタだけでは難しいレイアウトだが
HTMLやCSSを意識させたくない
・ カスタム投稿タイプの要素が多い

8. 8
Concrete5は、お堅い企業様に選ばれやすい？
実際にコンペで採用していただいたとき、こんなことを言われました。
他社はWordPressで
同じような提案が多かった中、
Concrete5の
ワークフロー機能と
デザイン性で決めました。
他より
高かったんですけど

9. 9
でも・・・
WordPressに慣れた頭で、うっかりConcrete5案件を制作すると、
思わぬことで
「えっ？ どうしたらいいの？」
となることが・・・

10. 10
concrete5だと
「えっ？」ってなること

11. 11
フォーム
Webサイトには、ほぼ必須のお問い合わせフォーム
WordPress
標準機能としてのフォームはなく、プラグインで対応します。
・ 「Contact Form 7」「MW MP Form」などを使えば、
かなり高機能なフォームを作ることが可能
・ フォームへのHTMLの挿入、自動返信メールの設定、
送信時にJavaScriptを挿入、管理画面から送信内容を確認など
高度なカスタマイズも管理画面から簡単に行える

12. 12
concrete5
標準機能としてフォームブロックがあります。
・ GUIで簡単に設定できる
・ 豊富なフィールドの種類
・ 入力された内容は、
管理画面から確認できる
・ もちろん、自動返信メールも可能
超高機能！

13. 13
姓と名の欄を
分けてください

14. 14
えっ？

15. 15
フィールドを
横並びにできない？
CSSやJSを駆使して
できないこともない
けど・・・
至難の業です。

16. 16
自動返信メールに
署名を
入れてください

17. 17
えっ？

18. 18
自動返信メールの内容は、指定できません。
入力された内容が返信されるだけです。

19. 19
concrete5の「フォーム」ブロックは、細かいカスタマイズが苦手。
そんなときに使えるのが「外部フォーム」ブロックです！
自分でPHPでフォームを作って、
ブロックにできます！

20. 20
えっ？
自分で作るの？
PHPで？

21. 21
そう、「外部フォーム」は、
フォーム・バリデート・メール送信などのプログラムを
自分で組んで、
それをブロックに出来る機能です。

22. 22
デザイナーには、ハードルが高いですか？
いえいえ、concrete5には便利なヘルパーが用意されています！
だから、基本パターンが分かれば簡単にできるはず！
ただ、5.7対応の書籍はまだないので、ネット上で情報を探します。

23. 23
えっ？

24. 24
concrete5 japanのサイトには、詳しい説明がありませんでした。
参考記事がないかググってみると、いくつか記事が見つかりました。
でも、導入部分とすごく簡単な例だけで、
ヘルパーの説明とかは無し。
しかもどうやら、
5.6とはやり方が違うみたい・・・

25. 25
ようやく、本家の公式フォーラムに、
フォームヘルパーをまとめた記事を見つけました。
（もちろん英語）
でも、今度はバリデーションの方法がわかりません。
自動返信メールの作り方もわかりません。
バリデーションヘルパーとメールヘルパーは、
なんとか公式サイトで見つけましたが、
ドキュメントが別々で、
探し回るしかありませんでした・・・

26. 26
仕方がないので、私がまとめました！
●concrete5.7対応 外部フォームブロックの作り方まとめ | Cherry Pie Web
https://www.cherrypieweb.com/weblog/technical/20161207104805.php
使えそうなサンプルつき！
concrete5の
カスタムテンプレートが
作れるくらいのスキルがあれば
できるはず。
もちろん日本語です！

27. 27
5.6にはフォームが作れるアドオンがあるし、
5.7以上のバージョンに対応したアドオンも開発中らしいので、
もう少ししたら、WordPress並みに簡単になるかもしれません。
・・・でも、
おそらく有料アドオンです。

28. 28
バックアップ
WordPress
標準機能としてバックアップ機能はないので、プラグインで対応します。
（記事のインポート・エクスポートはちょっと違う）
●VaultPress：5ドル/月
●BackWPup
●UpdraftPlus Backup and Restoration：川井のおススメ

29. 29
concrete5
concrete5には、
標準機能としてデータベースバックアップ機能がありました。

30. 30
えっ？

31. 31
なんと、5.7には未対応・・・

32. 32
バックアップ用アドオンは、現在のところ非常に少ないです。
高機能なアドオンがありますが、99ドルします。
●Backup Pro
（非常に高機能なので、高くはないと思いますが・・・）
無料でやりたいなら、
Katz Uenoさんが公開されているシェルスクリプトを使用しましょう。
https://github.com/katzueno/concrete5-backup-shell
・・・ただし、他のサーバーへのバックアップなどは、自力で実装するしかありません。

33. 33
WordPressでもできる
concrete5みたいなカスタマイズ

34. 34
トップページの一部分だけ編集可能にする
トップページに配置した、
ご挨拶が書かれた
「テキスト」ウィジェットのみ、
担当者が更新できるようにしたい
他の部分は
操作できないようにする

35. 35
concrete5
・ 担当者ユーザーの権限を設定
トップページ全体は編集不可とし、
ご挨拶のブロックにだけ
編集権限を与えればOKです。

36. 36
WordPress
・ ウィジェットの編集権限は「管理者」のみ
・ UserRoleEditorプラグインで権限を与えると、
「外観」メニューのすべてが編集可能になってしまいます。
・ テーマとか、うっかりいじられたら大変！

37. 37
Adminimizeプラグイン
管理画面の見せたくない部分を非表示にできます。
・ ユーザー権限ごとに設定できます。
（他のプラグインで追加した権限にも有効）
・ ウィジェットは、
それぞれ個別に
設定できます。
・ CSSのセレクタで
特定できるものなら、
何でも設定できます！

38. 38
・ メニュー項目も、ウィジェット管理画面もスッキリ！
操作説明の必要もありません。
・ 「画像」などいくつかのウィジェットを有効にしておき、
ウィジェットエリアに自由に配置してもらうようにすることもできます。

39. 39
まとめ
concrete5
・ 標準機能だけでたいていのことができます。
・ 標準機能を超えることをしようと思うと、
急にハードルがあがります。（WordPressもそうですが）
PHP中級程度の能力と、
英語のドキュメントが読める（Google翻訳で大丈夫）ことは必須です。
・ ブログなどの情報は、まだ少ないです。
concrete5 japan の公式フォーラムが一番使えます。

40. 40
concrete5
・ アドオン（プラグイン）は、たいてい有償です。
有用なものにお金を払う文化は、とても良いと思うのですが、
ボランティア案件などには使いにくいかも。

41. 41
WordPress
・ 標準機能だけでどうにかするのではなく、
機能はプラグインで追加していくと割り切ったほうが良いです。
ほとんどの場合、プラグインで解決します。
・ あなたがやりたいことは、すでに世界の誰かがやっています。
まずはググりましょう。
・ ネット上の情報は、玉石混交です。
特にWordPress関連は、検証もせずにコードをコピペしているサイトや、
バッドノウハウを堂々と掲載しているサイトが多いので、要注意です。

42. 42
正しい情報の見分け方
・ 「1年以内」など、最近の記事だけを検索する
・ 最低でも10記事くらい見る
他のサイトのコピペ？ って、なんとなくわかるようになります。
・ 2年以上更新されていないプラグインは、たとえ有名でも使用しない
また、そういうのを平気で紹介しているサイトの記事は、疑ってかかる
（例）Better Delete Revision、HeadSpace2など
・ 勉強会で、実務でバリバリやっている人と友達になっておいて、
SNSとかで聞く
↓
役に立ったと思ったら、ちゃんとお礼をしましょう。

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