Contao Open Source CMS / Contao 3.3に向けて

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