Contao Open Source CMSContao 3.3に向けて
オープンソースカンファレンス 2014 Okinawa2014年5月24日日本Contaoの会神戸 隆博
話題✴Contao Open Source CMSの紹介✴Contao 3.3に向けて✴国内の情報
発表者について✴神戸 隆博(かんべ たかひろ)★ ソフトウェア、ネットワークの技術者•本業: とある小さな京都の会社勤務* 学校関係を中心とたコンピューターシステムの設置や運用の支援や保守
★ 趣味•NetBSD開発者: pkgsrc(パッケージシステム)の保守をメイン* Ruby, PHP関連が最近は多い?
•ちょっとしたオープンソースのソフトウェアの翻訳の手伝い• (Geeklogのリリース手伝い)
Contaoとの関わり✴振り返ると、★ 2008年7月頃マルチドメインのCMSとして出会い•2.6.BETAの頃
★ 2011年2月日本語の言語ファイル担当
★ 2012年3月Ambassadors in Japan•親善大使
Contaoとは何か✴オープンソースのCMS★ 2006年3月12日: 2.0.RCから公開★ LGPL3★ 商用ライセンスあり•ソースコードからコメントの除去
★ 公式サイト: http://www.contao.org/★ 開発元: ドイツ★ 元の名前: TYPOlight (2.8まで)
名前の由来✴ベトナム語のconとtạoの造語★ tạo•形をなす、創造するといった意味のベトナム語
★ con tạo•創作者、運命づけるといった意味•コンテンツにも通じる
✴地名ではない✴リリース2.9から改名
CMSとは何か(1)✴Content Management System★ WebサイトをWebインターフェイスで管理
✴様々な種類のコンテンツ生成★ ニュース(ブログ)、イベント(カレンダー)
✴柔軟な管理★ 便利なコンテンツの編集★ 素材(画像等)の管理★ コンテンツの再利用
CMSとは何か(2)✴共同作業の支援★ ユーザーとアクセス権限
✴動的なページの生成★ 公開時期の制御★ 共同作業
✴様々なCMS: 星の数ほど...★ WordPress, Joomla!, CMS Made Simple, Drupal★ TYPO3, Concrete5, ProcessWire, Plone
Contaoの特徴✴バックエンドとフロントエンド★ 公開するサイトに寄らない、一貫した画面構成
✴階層構成によるページの管理✴アクセスビリティの考慮✴機能拡張★ 機能拡張リポジトリによる管理★ 本体の直接変更は不要
動作環境✴Webサーバー★ Apache, IIS
✴スクリプティング言語★ PHP 5.3.2以降•必要な拡張: mysqli(またはmysql), dom, gd, mbstring(またはiconv), mcrypt, soap, zlib
✴データベース管理システム★ MySQL 5.0.3以降•他のデータベースのサポートは3.0で一旦廃止
各国語対応✴言語ファイルは本体に同梱★ 23の言語(Contao 3.2)•Transifexで95%の翻訳率で同梱•機能拡張で提供も可能
✴ PHPの配列をベース★ メッセージカタログ(gettext)は不使用★ UTF-8★ 設定ファイルで翻訳の追加や修正が可能
リリースの種類(1)✴バージョンX.Y.Z★ メジャーリリース(X)•あらゆる変更の可能性•概ね2年に1度(2012年10月30日の3)
★ マイナーリリース(Y)•API、データ構造、テンプレートに変更の可能性•半年、5月と11月(2014年11月の3.2)
★ バグ修正リリース(Z)•基本的にバグ修正だけ•随時(概ね月に1度程度、2014年4月7日の3.2.9)
リリースの種類(2)✴長期間サポートリリース(LTS)★ 18か月間の保守期間のマイナーリリース•基本的にバグ修正だけ
★ 加えて6か月の移行期間•セキュリティ修正だけ
✴開発版★ メジャーやマイナーリリースの前★ 数か月の開発期間
現在のリリース✴Contao 3.2 (LTS)★ 2014年5月21日 3.2.10
✴Contao 3.3 (開発版)★ 2014年5月9日 3.3.RC2
バックエンドとフロントエンド
✴Webサイトの管理側と公開側★ バックエンドとフロントエンドに分離•ユーザーとグループも別々:バックエンドでは「ユーザー」、フロントエンドでは「メンバー」
★ フロントエンドのURL:http://www.example.jp/
★ バックエンドのURL:http://www.example.jp/contao/
フロントエンドの構成✴バックエンドでのデザイン次第★ 設定でURLを書き換え(index.phpの排除)
✴付属のサンプルサイト★ Music Academy•バックエンドと似た3つのウィンドウ枠•Contaoの説明(英文)
✴公式サイトの事例研究★ https://contao.org/case-studies.html
フロントエンドの例
サンプルサイトの構成(1)
サンプルサイトの構成(2)✴ヘッダー★ ナビゲーションのメニューとロゴ
✴左サイド★ フロントエンドのログイン関連★ 最近のニュースの一覧
✴メイン★ アーティクルによるページ固有のコンテンツ
バックエンドにログイン
バックエンド
バックエンドの構成✴ 3つのウィンドウ枠★ ヘッダー、左サイド、メイン★ ユーザー権限のないものは非表示
✴テーマ★ フロントエンドの表示と無関係★ default•Contao 3.2までの唯一の標準テーマで固定幅
★ flexible•Contao 3.3から初期設定、defaultと共に提供、レスポンシブ
flexibleテーマ(1)
flexibleテーマ(2)
バックエンドの表示✴主に3つの表示形式★ リスト表示★ ペアレント表示★ ツリー表示
✴バックエンド全体の一貫性★ 操作アイコンの持つ意味
リスト表示
ペアレント表示
ツリー表示
ユーザー設定
プレビュー
新しいウィンドウ
コンテンツ✴実際のコンテンツを管理★ アーティクル•ページに表示する内容
★ フォームジェネレーター•フロントエンドでフォーム入力を自由に作成
★ コメント•他のコンテンツでフロントエンドから入力されたコメントの管理
★ その他、特定の種類のコンテンツ
レイアウト✴ページ内の配置や整形のデザイン★ テーマ: 以下をまとめて管理•スタイルシート•フロントエンドモジュール•ページレイアウト
★ サイト構造•ページを階層的に管理
★ テンプレート•カスタマイズしたテンプレートのファイルの管理
アカウント管理✴ユーザーに関連の管理★ メンバー•フロントエンドのユーザー
★ メンバーグループ•フロントエンドで保護されたページに使用
★ ユーザー•バックエンドのユーザー
★ ユーザーグループ•バックエンドの権限の管理•ユーザーに対してユーザーグループと組み合わせて権限設定を可能
システム✴設定やリソースの管理★ ファイル管理•コンテンツで使用する画像や動画等•フロントエンドでアップロード•TinyMCEから呼び出し可能
★ 設定•Contaoの全体の設定
★ 保守•キャッシュの消去やライブアップデート
★ 機能拡張カタログと機能拡張の管理•機能拡張をリポジトリから一覧、インストール、更新
開発者ツール✴開発者向けのツール★ autoloadの作成•Contao 3より前の機能拡張には、autoloadを用意するだけで動作する場合もあるため。
★ 他はContao 3で復活
サイトの構成✴ページの階層構造★ ナビゲーションメニュー等の元
✴ページ★ 種類•通常、リダイレクト、エラー表示、サイトのルート
★ 様々な項目•コンテンツの配置、公開、メニューでの扱い•ドメインや言語
★ 親のページの属性を継承•ページレイアウト、アクセス許可、キャッシュ
サイト構造の例
ページの編集
ページの設定
ページレイアウト✴ページの内容を指定★ ページに2つまで指定可能(オプションで携帯端末用)★ カラム(行と列)の構成★ CSSのフレームワークとスタイルシート★ フロントエンドモジュールの配置★ その他•文書型定義: HTML5, XHTML Strict, XHTML Transitional• JavaScriptフレームワークの使用* MooToolsやjQuery
•追加のJavaScript* アナリティックスや独自コード
カラムの構成
CSS関連の設定(1)
CSS関連の設定(2)✴CSSフレームワーク★ Contao組み込みのCSSのフレームワーク
✴スタイルシート★ データベースに組み込まれたスタイルシート★ 「編集表示」による編集
✴追加のスタイルシート★ 外部で作成したスタイルシート•SCSS、LESSもサポート(Contao 3.3から)
スタイルシート✴スタイルシート: データベースに保持★ 保存時などにファイルに出力• (下図はContao 3.3のサンプルサイトには含まれていません。)
スタイルシートの内容
スタイルの編集
色選択
含めるモジュール✴カラムに配置するモノを設定★ フロントエンドモジュール(種類に応じた内容)★ アーティクル(ページに応じた内容)
フロントエンドモジュールの表示
ナビゲーションメニュー ログインフォーム ニュースリスト
フロントエンドモジュール✴特定位置で「何か」を表示★ ナビゲーション•ナビゲーションメニュー、パンくずナビゲーション、サイトマップ
★ メンバー(フロントエンドのユーザー)•ログイン、個人データ、自動ログアウト、ユーザー登録
★ フォーム、カスタムHTML、画像や動画•フォーム、ランダムな画像、YouTube動画
★ 各種コンテンツの表示•イベント、ニュース、FAQ、ニュースレター
アーティクルによる表示
アーティクル✴ページの指定カラムに表示✴アーティクルの構成★ アーティクル自身の設定•ティーザー•印刷や共有のアイコンの表示•公開の状態
★ コンテンツ要素•アーティクル内に順番に表示•様々な種類のコンテンツ
アーティクルのツリー表示
アーティクルの設定
アーティクルとコンテンツ要素
コンテンツ要素の種類(1)✴テキストの要素★ 見出し、テキスト、HTML、箇条書き、表、コード、Markdown (Contao 3.3から)
✴複数のコンテンツ要素の表示を制御★ アコーディオン★ コンテントスライダー
✴リンクの要素★ ハイパーリンク、トップリンク
コンテンツ要素の種類(2)✴画像や動画★ 画像、画像ギャラリー、映像や音声、YouTube
✴ファイルの要素★ ダウンロード、複数のダウンロード
✴要素の取り込み★ アーティクル、コンテンツ要素、 モジュール、アーティクルのティーザー
★ フォーム、コメント
テキスト
YouTubeコンテンツ要素
コンテンツ要素の編集
挿入タグ✴ {{ と }} で囲んだ内容を展開★ 殆どのところで使用可能•ページをキャッシュとも仲良し
★ 様々な展開•他のコンテンツへのリンク•メンバーの属性•環境変数•他のコンテンツの挿入•日付•ページの言語に依存した表示•画像のサムネイル
挿入タグの例✴テキストのコンテンツ要素
テンプレート✴画面表示はテンプレートを基本★ バックエンドとフロントエンドの両方★ 個別にカスタマイズ可能(Contao 3.3から)
✴コピーしてカスタマイズ★ 本体に含まれるファイルは直接編集しない。★ カスタマイズしたコピーがあれば優先使用。
✴単純なPHPを含んだファイル★ 拡張子は .html5 または .xhtml
テーマ✴以下をまとめて管理★ スタイルシート★ フロントエンドモジュール★ ページレイアウト
✴コンテンツと別に管理★ インポートやエクスポート
フォームジェネレーター✴独自のフォームを生成★ 様々なフォームの項目★ 入力の検証★ 提出データの処理•電子メールで送信•データベースの表に保存
✴フォームを作成★ コンテンツ要素を介して表示
ページ外のコンテンツ✴個別にコンテンツを管理★ フロントエンドモジュールで表示•コンテンツの一覧、表示メニュー、表示
★ ニュース、イベント、FAQ、ニュースレター✴ニュースの場合★ 入れ物: アーカイブ★ フロントエンドモジュール•単純な一覧表示: ニュースリスト•個別の表示: ニュースリーダー•アーカイブの表示: ニュースアーカイブ、ニュースアーカイブメニュー
コンテンツ編集の支援✴複数変更✴リッチテキストエディター(TinyMCE)✴コードエディター(ACE)✴データベースで管理しているモノ★ バージョン★ 削除の取り消し
リソースの管理✴ファイル管理★ 様々なファイルの管理•ページに表示したいファイルやダウンロードで提供するファイル
★ フォルダーの保護★ ファイルのアップロード•ドロップダウンでのアップロード(Contao 3.3)
★ データベースでメタ情報を管理•ファイルをIDで参照して名前の変更に追従、言語に応じた情報•Contao上で編集可能なテキストのファイルはバージョンも管理
★ TinyMCEから呼び出して使用可能
ファイル管理
アカウント管理✴ユーザー★ バックエンドのコンテンツ管理の権限•管理者ユーザーと通常ユーザー
★ 通常ユーザーの制限•使用出来る機能、管理できるページ、ファイル管理のフォルダー
✴メンバー★ フロントエンドのアクセス権限★ ニュースレター配信
✴それぞれに権限管理のグループ
機能拡張✴本体のファイルを変更しない拡張★ フック関数★ コールバック関数
✴ namespace★ 本体のPHPのクラスも置き換え可能
✴モジュール構成による容易な作成★ バックエンドとフロントエンドの分離★ 統一的なバックエンドのインターフェイス
機能拡張カタログ✴機能拡張の閲覧、表示、インストール
機能拡張リポジトリ✴インストールした機能拡張の管理
Contaoチェック✴インストールの支援★ Contaoのインストールに関する検査•Contaoのバージョンに応じたインストールの可否
★ インストール後の機能の利用可否•機能拡張リポジトリ•ライブアップデート•セーフモード対処の必要性
★ Contaoの配布ファイルの取得と展開•ダウンロード、展開、アップロードといった手順を自動実行•展開したファイルの内容の検査
インストール✴インストールツール: contao/install.php★ 数段階で設定★ データベースの接続確認やテーブル作成★ サンプルのサイトの取り込み
✴アップデートや開発で使う場合✴セキュリティ★ 最初にパスワードを設定★ 不安な場合はinstall.phpを削除や名前変更等
ライブアップデート✴ iNet Robots社による有償サービス★ 年額9.9ユーロ•ドイツの売上税19%込み、それを除いた日本円で1200円弱•1つインストールしたContaoに対して必要
✴マウス数回のクリックで更新★ インストール先のバージョンの選択•新しいバグ修正リリース•新しいマイナーリリース
★ 修正しているテンプレートや機能拡張には注意
Contao 3.3✴様々な修正と性能向上★ Markdownコンテンツ要素★ TinyMCE4★ コマンド行のツール: automatorとfilesync★ テンプレートのカスタマイズを拡大★ バックエンドのテーマ: flexible★ ドラッグアンドドロップのアップロード
サイトの修正のデモ✴ページの追加を伴わない修正★ コンテンツ要素の追加★ ニュースの記事の追加
✴ページの追加★ ページレイアウトはそのまま
Symfony化: 現状✴課題★ 十分な時間とマンパワーがあるか?★ 完全に新しく始めると、既存システムとの兼ね合い
✴特に!★ すべての機能拡張を新たに作成★ すべての翻訳も新たに作成
Symfony化: 変更計画✴継続性★ 断ち切って、新たに始めることはしない。
✴段階的な移行★ SymfonyのシステムレベルをContaoに統合し、★ Symfonyのコンポーネントをベースとしたものに、Contaoのフレームワークを徐々に移行
✴概念実証: 既にgithubに存在•https://github.com/contao/core/tree/feature/contao-with-symfony
Symfony: 次の段階✴ 4月24日の公開討論で合意★ 可能な限りリソースをコードから分離★ Contaoのフレームワークの中でSymphonyのコンポーネントを使用
★ 依存関係を導入するコンテナの早期で総合的な統合
リリース計画✴ 2015年5月★ Contao with Symfony: Contao 4★ 同時リリース: Contao 3.5 (LTS)
リリース計画の背景✴背景★ 2年間のContao 3と4を並行運用★ Symfonyの統合しても後方互換、但し次は廃止•セーフモード対処•XHTMLのサポート•Contaoのautooader
✴但し、以下を確認★ 計画を実行できるかどうか。★ この実装が有効で、開発者の多くが使用するか。
その他✴公式サイトのリニューアル★ 2013年に計画★ 2014年4月にワイヤーフレームの議論★ 2014年5月にドラフトデザインのプレゼン★ 2014年末にまで主要な部分を実装•Home, About, Download, Supportなど
★ ドキュメントと機能拡張は別に更新
公式サイト★ 公式サイト: https://contao.org/★ 開発サイト: https://github.com/contao/★ フォーラム: https://community.contao.org/★ Contao association:https://association.contao.org/
★ コミュニティによるWiki: http://contaowiki.org/★ ソーシャルネットワーク•Facebook: http://www.facebook.com/contao•Twitter: http://twitter.com/contaocms
国内の情報✴www.contaocms.jp★ 個人サイト
✴www.contao.jp★ 日本Contaoの会: まだ準備中
✴ Facebook★ 日本Contaoの会の公開グループ
✴ Twitter★ @contaocms_jp / @contao_cco
Top Related