concrete5でデザイナーでも実装できる実務的な環境を提供してくれる

1. デザイナーでも構築できる
多言語/マルチデバイス対応サイト

2. ピクトロンウェブプランニング
杉山 敦
http://www.pictron.net
ウェブサイトのデザインからプロモーション提案
CMSによる構築までワンストップで制作。
最近concrete5の次に熱いのはkintone

3. concrete5を使う理由

4. concrete5を使う理由
実務的であると感じたから
（仕事に使える）

5. 技術者でないのに
新しいCMSが
実務的かどうか、どうやって
どうやって判断するの？

6. ・セキュアでモダンな構造
・使いやすいインターフェイス
CMSのキャチ

7. どれもそんな風に書いてるよね？
・セキュアでモダンな構造
・使いやすいインターフェイス

8. 判断する流れ
デザイナー（私）が考える

9. ・まずは動かしてみる
・コミュニティを俯瞰する
判断する流れ

10. まずは動かしてみる
・学習コストを図る
・課題解決の手法の層の厚さ
・デザインと構造の関係性
を確認。

11. コミュニティを俯瞰する
・プログラマ
・エバンジェリスト、インフルエンサー
・フォロワー
のバランスを見る

12. プログラマーの中のバランス
実務にそのCMSを使う
プログラマがバランス良く存在するか？

13. 業務で受託された構築数
課
題
を
解
決
す
る
メ
ソ
ッ
ド
受託される仕事で創出される課題

14. 多くの課題
課題のパターン化
課題解決の短縮
早くなければダメ

15. 実務ばかりでもダメ
オープンソースの進化にはデバッグや翻訳、
テストなど裏方作業がたくさんあります。
将来的なビジョンも大事

16. なぜ実務的？
実務ワークフローをベースに
開発、進化、拡張されるCMS

17. コンテンツ編集も簡単！
多言語化も簡単！
レスポンシブも簡単！
どのスタンスの人にとって
簡単かが重要

18. ウェブサイト制作での
スタンスの大別例
①コンテンツ管理 ②デザイナー ③プログラマー
細かくかぶってたりはするけどね

19. PHPに精通していなくても、concrete5の
使い方を覚えれば一般的なサイト構築は②
の立場で①に実務的な環境を提供できる。
①コンテンツ管理 ②デザイナー ③プログラマー

20. 要求された課題に①と②の間で有料アド
オンなどで②はパターン化された課題が
迅速に解決でき③は過去の解決事例をマ
ネタイズする環境が整地されている。
①コンテンツ管理 ②デザイナー ③プログラマー

21. アドオンやカストマイズで解決できない課題を
②が③に依頼する際も、concrete5を前提にす
ることで“ブロックの開発”、“コントローラー
の拡張”のように開発に関して共通ルールを持っ
て依頼し②が実装・管理できる。
①コンテンツ管理 ②デザイナー ③プログラマー

22. もう少し具体的に
マルチデバイス、多言語対応を例に
使いやすさを

23. ここ数年
インバウンド市場の盛況
＜要求定義＞
マルチデバイス（レスポンシブ）は必須
多言語化の要求が増加

24. 先日インバウンドマーケティングのサイトに
記事を寄稿しました。
http://irodori2u.co.jp/k00083/

25. ①コンテンツ管理
②デザイナー
PCで見ると記事をよこに３分割で、スマホ
で見ると縦に並ぶようにしたい。
とあるCMSでのやり取り例
それぞれコンテンツをdivで囲んでcol-sm-4
というクラスを付けてください。
①コンテンツ管理
タグ？これは全部小文字？クラス？

26. concrete5.7でCSSフレームワーク
に沿ったレスポンシブなコンテンツ
制作を①のCSSやHTMLのリテラシー
がない人でも編集可能に。
①コンテンツ管理 ②デザイナー ③プログラマー

27. レイアウトを追加
カラムの個数を決定
①コンテンツ

28. 各カラムのコンテンツを追加
レスポンシブに対応
①コンテンツ

29. 各ブロックのデバイス別の表示非表示のコントロール
表示・非表示を
クリックでコントロール
①コンテンツ

30. レスポンシブ画像をサポート
管理画面 > システムと設定 > ファイル > サムネイルでタイプを追加
①コンテンツ

31. ファイルマネージャーで画像を追加
①コンテンツ

32. 詳細画面のサムネイルをクリック
①コンテンツ

33. 様々な解像度の画面に適応する段階的な画像を
自動作成しキャッシュする
①コンテンツ

34. 各ブロックのデザインテンプレート
を②が提供し①はconcrete5が提供
するインターフェイスで選択出来る。
①コンテンツ管理 ②デザイナー ③プログラマー

35. ページタイトルブロックにデザインバリエーションを作成
ページタイトルブロック
②デザイナー
cafe_titleは任意の名称複製

36. クラスを追加
②デザイナー
<?php defined('C5_EXECUTE') or die("Access Denied."); ?>
<<?php echo $formatting;?> class=“page-title cafe-title“>
<?php echo h($title)?>
</<?php echo $formatting;?>>
ボーダーを追加するスタイルを追加

37. 編集モードにして、デザインカスタムテンプレートを選択
①コンテンツ 設定したコードが適用される

38. concrete5.7で多言語化
機能が標準実装

39. 主言語のページの構成を作成

40. 管理画面＞システムと設定＞多言語＞多言語サポート設定

41. コンテンツセクションを追加した後、規定の地域にリダイレクトを設定
jpを規定にするとhttp://abc.comにアクセスすると
http://abc.com/jp/にリダイレクト

42. 英語版を追加するとして、トップページになるページを追加

43. enを選択してコンテンツセクションを追加

44. 管理画面＞システムと設定＞多言語＞Copy Language

45. 各ページがコピーされ、自動的にペアリングされる

46. 英語ページのページ名を変更

47. グローバルエリアを言語毎に設定

48. マッピングの確認と言語の切り換え

49. 追加したページなどマッピングがされていないページの場合
新規に作成するか、現在作成済みのページを選択してマッピング

50. 言語切り換えブロックをメニューに追加

51. ペアリングしたページ

52. 管理画面＞システムと設定＞多言語＞サイトインターフェースを翻訳
<?php echo t('Empty Auto-Nav Block.')?>
現在使われているソースコードから t 関数で囲まれた文字列を
自動的に抽出し、その翻訳を行う画面を提供してくれます。

53. コンテンツをブロック管理することで
多言語化における優位性
多言語化＝対訳
言語毎にコンテンツは同じとは限らない

54. ＜要求定義例＞
・日本語以外のページには、都市の
一般的な印象を補足として文章を追加する。
・日本語以外のアクセスページには
Googleの地図に加えて空港から交通概略を
入れて欲しい。
・英語の商品概略には英語圏のそれぞれの国の
電圧対応の説明をいれて欲しい。
言語毎にコンテンツは
同じで良いとは限らない

55. ページのペアリングや複製は行うが
各ページには任意にブロックを追加していける

56. ＜まとめ＞
デザイナーやフロントエンドエンジニアは
レスポンシブ、多言語を含めたコンテンツを
どう作るか？の時間を圧縮し
何を作るか？に時間を割くことができる