2014年11月7日と8日に開催された関西オープンフォーラム2014(KOF2014)で、8日のセミナーに使用した資料です。

1. Contao Open Source CMS
Contao 3.3から、その向こう
関西オープンフォーラム2014
2014年11月8日
日本Contaoの会:
神戸 隆博

2. 話題(の候補)
• Contaoの概要
• 新しいページの追加
• コンテント要素
• 挿入タグ
• 機能の拡張
• Contaoのインストール
• リリースの概要
• Contaoの関連リンク

3. 発表者について
• Contaoとの関わり
– 2008年7月頃
ブログではないマルチドメインのCMSを求めて
• 2.6.BETAの頃
– 2011年2月
日本語の言語ファイル担当
– 2012年3月
Ambassadors
in
Japan
(親善大使)

4. Contaoの概要

5. Contaoとは何か
• オープンソースのCMS
– 2006年3月12日:
2.0.RCから公開
– LGPL3
– 商用ライセンスあり
• Contaoを使用している表示を削除可能
• ソースコードから著作権表示を削除
– 公式サイト:
hEps://contao.org/
– 開発元:
ドイツ
– 元の名前:
TYPOlight
(2.8まで)
• lightから軽量版とか小規模サイト専用と誤解

6. 名前の由来
• ベトナム語のconとtạoの造語
– tạo
• 形をなす、創造するといった意味のベトナム語
– con
tạo
• 創作者、運命づけるといった意味
• コンテンツにも通じる
– 地名ではない
• リリース2.9から改名

7. CMSとは何か(1)
• Content
Management
System
– WebサイトをWebインターフェイスで管理
• 様々な種類のコンテンツ生成
– ニュース(ブログ)、イベント(カレンダー)
• 柔軟な管理
– 便利なコンテンツの編集
– 素材(画像等)の管理
– コンテンツの再利用

8. CMSとは何か(2)
• 共同作業の支援
– ユーザーとアクセス権限
• 動的なページの生成
– 公開時期の制御
– 共同作業
• 様々なCMS:
星の数ほど...
– WordPress,
Joomla!,
CMS
Made
Simple,
Drupal
– TYPO3,
Concrete5,
ProcessWire,
Plone

9. Contaoの特徴
• バックエンドとフロントエンド
– 公開するサイトに依存しない一貫した画面構成
• 階層構成によるページの管理
• コンテント要素
– 複数の種類のパートで構成
• アクセシビリティの考慮
• 機能拡張
– 機能拡張リポジトリによる管理
– 本体の直接変更は不要

10. 動作環境
• Webサーバー
– Apache(,
IIS)
• スクリプティング言語
– PHP
5.3.2以降
• 必要な拡張:
mysqli(またはmysql),
dom,
gd,
mbstring(またはiconv),
mcrypt,
soap,
zlib
• データベース管理システム
– MySQL
5.0.3以降
• 他のデータベースのサポートは3.0で一旦廃止

11. 各国語対応
• 言語ファイルは本体に同梱
– Contao
3.2/3.3で23の言語
• Transifexで95%以上の翻訳率で採用、95%未満で削除
• 機能拡張で提供も可能
• PHPの配列をベース
– メッセージカタログ(geEext)は不使用
– UTF-­‐8
– 設定ファイルで翻訳の追加や修正が可能

12. リリースの種類(1)
• バージョンX.Y.Z
– メジャーリリース(X)
• あらゆる変更の可能性
• 概ね2年に1度(2012年10月30日の3)
– マイナーリリース(Y)
• API、データ構造、テンプレートに変更の可能性
• 半年、5月と11月(2014年5月の3.3)
– バグ修正リリース(Z)
• 基本的にバグ修正だけ
• 随時(概ね月に1度程度)

13. リリースの種類(2)
• 長期間サポートリリース(LTS):
3.2
– 18か月間の保守期間のマイナーリリース
• 基本的にバグ修正だけ
– 加えて6か月の移行期間
• セキュリティ修正だけ
• 開発版:
4.0
– メジャーやマイナーリリースの前
– 数か月から1年以上の開発期間

14. 現在のリリース
• Contao 3.2 (LTS)
– 2014年10月31日 3.2.15
• Contao 3.3 (安定版)
– 2014年10月31日 3.3.6
• Contao 3.4 (開発版)
– 2014年10月31日 3.4.0-RC1
• Contao 4.0 (開発版)
– 2014年６月18日 4.0.0-alpha2

15. リリース予定
• hEp://contao.org/release-­‐plan.html

16. バックエンドとフロントエンド
• Webサイトの管理側と公開側
– 管理側:
バックエンド(BE)
– 公開側:
フロントエンド(FE)
– バックエンドで管理して、
フロントエンドをプレビュー →
公開
• URL
– FE:
hEp://www.example.jp/
– BE:
hEp://www.example.jp/contao/

17. フロントエンドの例

18. バックエンド

19. ホーム

20. バックエンドの構成
• 3つの部分
– ヘッダー、左サイド、メイン
– ユーザー権限のないものは非表示
• テーマ設定可能
– フロントエンドの表示と無関係
– flexibleバックエンドテーマ
• Contao
3.3のデフォルトのテーマ
• Contao
3.2までのdefaultに追加
• レスポンシブ

21. バックエンドのUIの特徴
• 主に3つの表示形式
– リスト表示
– ペアレント表示
– ツリー表示
• バックエンド全体の一貫性
– 操作アイコンの持つ意味

22. リスト表示

23. ペアレント表示

24. ツリー表示

25. 編集の表示例

26. ユーザー設定

27. コンテンツ
• 実際のコンテンツを管理
– アーティクル
• ページに表示する内容
– フォームジェネレーター
• フロントエンドのフォームを自由に作成
– コメント
• 他のコンテンツでフロントエンドから入力されたコメントの管理
– その他、特定の種類のコンテンツ

28. レイアウト
• ページ内の配置や整形のデザイン
– テーマ:
以下をまとめて管理
• スタイルシート
• フロントエンドモジュール
• ページレイアウト
– サイト構造
• ページを階層的に管理
– テンプレート
• カスタマイズしたテンプレートのファイルの管理

29. アカウント管理
• ユーザーに関連の管理
– メンバー
• フロントエンドのユーザー
– メンバーグループ
• フロントエンドで保護されたページに使用
– ユーザー
• バックエンドのユーザー
– ユーザーグループ
• バックエンドの権限の管理
• ユーザーに対してユーザーグループと組み合わせて権限設定を可
能

30. システム
• 設定やリソースの管理
– ファイル管理
• コンテンツで使用する画像や動画等
• フロントエンドでアップロード
• TinyMCEから呼び出し可能
– 設定
• Contaoの全体の設定
– 保守
• キャッシュの消去やライブアップデート
– 機能拡張カタログと機能拡張の管理
• 機能拡張をリポジトリから一覧、インストール、更新

31. 開発者ツール
• 開発者向けのツール
– autoloadの作成
• 古い機能拡張でも、autoloadを用意すると動作する場合がある。
– 機能拡張の作成
• 機能拡張の雛形の作成
– 不足ラベル
• 未翻訳の言語ラベルの確認

32. 新しいWebページの追加

33. ページの追加(1)

34. ページの追加(2)

35. ページの編集画面(1)

36. ページの編集画面(2)

37. 作成したページの確認

38. アーティクルの編集

39. コンテント要素の追加(1)

40. コンテント要素の追加(2)

41. コンテント要素の編集(1)

42. コンテント要素の編集(2)

43. 画像の追加

44. ファイル選択 in lightbox

45. ファイル管理

46. ファイルのアップロード(1)

47. ファイルのアップロード(2)

48. ファイルのアップロード(3)

49. アップロードしたファイル

50. ファイルの選択

51. 画像の設定

52. 作成したコンテント要素

53. アーティクルの公開

54. ページの公開

55. プレビューで確認

56. プレビュー(1)

57. プレビュー(2)

58. コンテント要素

59. コンテント要素
• アーティクル、ニュース、イベントの内容
– コンテンツを構成する順序に分けて構成
– コンテント要素に適切なテンプレートの適用
• アクセシビリティ
• 内部検索エンジンへの指示
– コンテンツの再利用・効率的な利用
• 同じコンテント要素の共有
• 他のコンテント要素の取り込み
– コンテント要素単位の公開

60. コンテント要素の種類
• HTMLの要素
– 見出し、テキスト(リッチテキスト編集)、HTML
– 箇条書き、表、(プログラムの)コード、Markdown
• リンク
– ハイパーリンク、トップリンク
• ファイル
– ダウンロード、複数ダウンロード

61. メディアや表示の制御
• 画像や動画
– 画像、画像ギャラリー、映像や音声、YouTube動画
• コンテント要素の表示制御
– アコーディオン、コンテントスライダー
• 他のコンテンツの取り込み
– アーティクル、コンテント要素、モジュール、
アーティクルのティーザー
– フォーム、コメント

62. Contaoのインストール

63. インストールの準備
• Apache、PHPの設定
• データベースの準備
– データベースの作成
– データベースのユーザーの作成
• ソフトウェアのダウンロードと展開
– 手作業でダウンロード、展開、アップロード
– パッケージシステムの利用(pkgsrc)
– Contaoチェックの利用も可能

64. Contaoチェック
• インストールの支援ツール
– Contaoのインストールに関する検査
• Contaoのバージョンに応じたインストールの可否
– インストール後の機能の利用可否
• 機能拡張リポジトリ
• ライブアップデート
• セーフモード対処の必要性
– Contaoの配布ファイルの取得と展開
• ダウンロード、展開、アップロードといった手順を自動実行
• 展開したファイルの内容の検査

65. インストール
• インストールツール
– hEp://example.jp/contao/install.php
– 数段階で設定
• データベースの接続確認やテーブル作成
• アップデートや開発で使う場合
• セキュリティ
– 最初にパスワードを設定
– 不安な場合はinstall.phpを削除や名前変更を実施

66. ライブアップデート
• iNet
Robots社による有償サービス
– 年額9.9ユーロ
• ドイツの売上税19%込み、それを除いた日本円で1200円弱
• 1つインストールしたContaoに対して必要
• マウス数回のクリックで更新
– インストール先のバージョンの選択
• 新しいバグ修正リリース
• 新しいマイナーリリース
– 修正しているテンプレートと機能拡張には注意

67. リリースの概要

68. Contao 3.0
• 2012年10月30日
• 内部構成の大幅な変更
• フロントエンド
– MooToolsに加えてjQueryのサポート
– HTML5の映像・音声、Youtubeのコンテント要素
– 階層的なページのエイリアス(URLパス)
– CSSのグラデーションの構文サポート
• バックエンド
– 移動端末用に別のページレイアウト
– バージョン間の変更の表示(diff)

69. Contao 3.1
• 2013年5月24日
• 言語方言(fr_FRのサポート)
• フロントエンド
– スライダーのコンテント要素
– エラー画面のテンプレートのカスタマイズ
• バックエンド
– TinyMCEでContaoのページ選択やファイル選択
– 挿入タグにフラッグのサポート
– クリックして編集
• Ctrl
+
クリック
(Command
+
クリック)
• Ctrl
+
Shin
+
クリック
(Command
+
Shin
+
クリック)

70. Contao 3.2
• 2013年11月21日
• proxyサーバーのサポート
– フロントエンドのアクセレーター
• ユーザー名で大文字と小文字の区別
• Google+のプロフィールとのリンク
• 保守モード

71. Contao 3.2の途中
• Contao
3.2.12
– サンプルのウェブサイトの同梱の取り止め
• Contao
3.2.13
– MySQLの文字エンコーディングのサポート追加
• UTF8MB4

72. Contao 3.3
• 2014年5月26日
• フロントエンド
– Markdownコンテント要素
– 外部スタイルシートでSCSSとLESSのサポート
• バックエンド
– カスタマイズ可能なテンプレートの範囲の拡大
– TinyMCE
4
– メンバーとしてプレビュー
– レスポンシブなテーマの追加:
flexible
– ドラッグアンドドロップによるアップロード
• Composerの導入の開始

73. Contao 3.4
• 2014年11月リリース予定
• 新規
– SVGとSVGZ画像のサポート
• ファイル管理で編集
– レスポンシブ画像のサポート
– スタイルシートのエクスポート
• 改善
– 内部と外部のCSSを読み込む順序の選択
– タイミング攻撃の防止

74. Contao 4
• 2015年5月にリリース予定
– 現在:
4.0.0-­‐alpha2
– 同時に長期サポートリリース:
3.5
• 互換性のない変更
– PHP
5.4以降
– Symfonyの採用
• どこまで統合が進むかどうか?
– Composerのさらなる活用

75. Symfonyの導入
• 継続性
– 断ち切って、新たに始めることはしない。
• 段階的な移行
– SymfonyのシステムレベルをContaoに統合し、
– Symfonyのコンポーネントをベースとしたものに、
Contaoのフレームワークを徐々に移行
• 概念実証:
githubに提示
• hEps://github.com/contao/core/tree/feature/contao-­‐with-­‐symfony

76. Symfonyのための準備
• 4月24日の公開討論で合意
– 可能な限りリソースをコードから分離
– Contaoのフレームワークの中で
Symfonyのコンポーネントを使用
– DependencyInjecqonコンテナの、早期で総合的な統合
• 技術的な検討はGitHubのチケット
– hEps://github.com/contao/contao/issues/9
• 後方互換性の維持

77. 計画の変更
• 2014年9月11日の方針変更
– 年内のSymfonyの統合が間に合わない可能性
– 4.0には見送り?
• 開発ブランチ:
feature/symfony
Symfony統合のコード
• 開発ブランチ:
develop
Symfony統合のコードを除去
• Symfony統合のTo
Do
List
– hEps://github.com/contao/symfony-­‐todo

78. Contao/Symfonyワークショップ
• 2014年10月26日から29日
– 5名の開発者が集中検討
– 課題の整理と一部の実装
• 計画通りに行けば当初の予定通りにリリース
– 2015年5月:
Symfonyを統合のContao
4.0.0
• Gitのリポジトリも再度変更
– 現在進行中
• 2015年2月に2回目のミーティング

79. Contao 4.0の新機能
• Apache依存の廃止
– .htaccessに非依存 →
ngnix等への対応
• 旧来への依存の廃止
– セーフモード対処の廃止
– XHTMLのサポートの廃止
• マークアップとCSSのクラスの統合
• 内部的(開発者向け)改良
– Composerによる構成管理
– コールバックの引数の順序の統一
– contao-­‐components(GitHub)での構成要素の管理

80. Contaoの関連リンク

81. 公式サイト
• 公式サイト:
hEps://contao.org/
• 開発サイト:
hEps://github.com/contao/
• フォーラム:
hEps://community.contao.org/
• Contao
Associaqon:
hEps://associaqon.contao.org/
• 事例研究:
hEps://contao.org/case-­‐studies.html
• コミュニティによるWiki:
hEp://contaowiki.org/
• ソーシャルネットワーク
– Facebook:
hEp://www.facebook.com/contao
– TwiEer:
hEp://twiEer.com/contaocms

82. 開発: GitHub
• Contao
3
– hEps://github.com/contao/core
• Contao
4
– hEps://github.com/contao/contao
– hEps://github.com/contao/contao-­‐library
– hEps://github.com/contao/contao-­‐bundle
– hEps://github.com/contao/module-­‐*
• core,
calendar,
comments,
devtools,
faq,
lisqng,
news,
newsleEer,
repository
• ブランチにも注意:
開発はdevelop

83. 国内の情報
• hEp://www.contaocms.jp/
– 個人サイト
• hEp://www.contao.jp/
– 日本Contaoの会:
Facebookのグループだけ
• Facebook
– 日本Contaoの会の公開グループ
• TwiEer
– @contaocms_jp
/
@contao_cco

84. 質疑応答

85. ご静聴ありがとうございました!