2015年5月23日と24日に開催されたオープンソースカンファレンス 2015 Nagoyaで、24日のセミナーに使用した資料です。

1. 日本Contaoの会:'神戸 隆博

2. 話題(の候補)
• Contaoの概要
• 新しいWebページの追加
• コンテント要素
• 挿入タグ'
• 機能の拡張例
• 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を使用している表示を削除'
– metaタグのgenerator'
• ソースコードから著作権表示を削除
– 公式サイト:''hHps://contao.org/'
– 開発元:'ドイツ
– 元の名前:'TYPOlight'(2.8まで)'
• lightから軽量版とか小規模サイト専用と誤解'

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

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

8. 事例
• hHps://contao.org/en/casePstudies.html'

9. 大規模な機能拡張の例
• Isotope'
– 電子商取引'
– hHps://isotopeecommerce.org/'

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

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

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

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

14. 現在のリリース
• Contao 3.2 (LTS)
– 2015年 3月27日 3.2.20
• Contao 3.4 (安定版)
– 2015年 3月27日 3.4.5
• Contao 3.5 (開発版)
– 2015年 4月30日 3.5.0-RC1
• Contao 4.0 (開発版)
– 2015年 5月15日 4.0.0-RC1

15. リリース予定
• hHp://contao.org/releasePplan.html

16. バックエンドとフロントエンド
• Webサイトの管理側と公開側
– 管理側:'バックエンド(BE)'
– 公開側:'フロントエンド(FE)'
– バックエンドで管理して、
フロントエンドをプレビュー →'公開
• URL'
– FE:'hHp://www.example.jp/'
– BE:'hHp://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. アカウント管理
• ユーザーに関連の管理
– メンバー
• フロントエンドのユーザー
– メンバーグループ
• フロントエンドで保護されたページに使用
– ユーザー
• バックエンドのユーザー
– ユーザーグループ
• バックエンドの権限の管理
• ユーザーに対してユーザーグループと組み合わせて権限設定を可
能

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

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

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

34. ページの追加(1)

35. ページの追加(2)

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

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

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

39. アーティクルの編集

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

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

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

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

44. 画像の追加

45. ファイル選択

46. ファイル管理

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

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

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

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

51. ファイルの選択

52. 画像の設定

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

54. アーティクルの公開

55. ページの公開

56. プレビューで確認

57. プレビュー(1)

58. プレビュー(2)

59. コンテント要素

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

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

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

63. Contaoのインストールと更新

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

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

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

67. ライブアップデート
• hHps://update.contao.org/'
– iNet'Robots社による有償サービス
– 年額10ユーロ
• ドイツの売上税19%込み、それを除いた日本円で1200円弱
• インストールした1つのContaoに対して1ライセンスが必要
• マウス数回のクリックで更新
– インストール先のバージョンの選択'
• 新しいバグ修正リリース
• 新しいマイナーリリース'
• 以前のリリース
– バックアップの作成

68. リリースの概要

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

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

71. Contao 3.2
• 2013年11月21日リリース'
– 長期サポートリリース'
• proxyサーバーのサポート'
– フロントエンドのアクセレーター'
• ユーザー名で大文字と小文字の区別'
• 保守モード'

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

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

74. Contao 3.5
• 2015年5月下旬リリース予定:'3.5.0PRC1'
– 新しい長期サポートリリース'
– PHP'5.4以降;'短い開きタグの使用'
• 新規'
– パスワード変更のフロントエンドモジュール'
– 新しい挿入タグ:'picture'
• 改善'
– 性能の向上'
– ファイル管理でドットファイルを非表示'

75. Contao 4.0
• 2015年5月下旬にリリース予定:'4.0.0PRC1'
– PHP'5.4以降'
– Apache依存から解放'
• .htaccessを使用しない'
• サブディレクトリwebをドキュメントルート'
– 公開リソースを直接置くか、シンボリックリンクを作成'
– シンボリックリンクのサポートが必須'
– Symfonyの採用'
• バンドル化'
• 独自のautoloadからSymfony'
• DoctrineによるDBアクセス'

76. Contao 4.0(続き)
– Composerのモジュール化'
– 廃止されるもの'
• XHTMLのサポート'
• セーフモード対処'
• コンテント要素の前後の間隔'
– 様々な非互換な変更'
• マークアップ'
• CSS'
• テンプレート'
– その他'
• Windowsとの互換性(パスの区切り文字の扱い)'

77. Contao 4.0.0-RC1
• 現状の制限'
– Composerによるインストール'
'
%'php'composer.phar'createPproject'contao/standardPediton'<target>'4.0.0PRC1'
'
• Webベースのインストールツール'
– Contao'3からのアップグレード'
• サポートは不完全'
– Twigテンプレートの利用'
– イベントとフックのSymfonyの機構への移行'
– 言語ファイルは英語だけ'

78. Contaoの関連情報

79. 公式サイト
• 公式サイト:'hHps://contao.org/'
• 開発サイト:'hHps://github.com/contao/
• フォーラム:'hHps://community.contao.org/'
• Contao'Associaton:'hHps://associaton.contao.org/'
• 事例研究:'hHps://contao.org/casePstudies.html'
• コミュニティによるWiki:'hHp://contaowiki.org/'
• ソーシャルネットワーク
– Facebook:'hHp://www.facebook.com/contao
– TwiHer:'hHp://twiHer.com/contaocms'

80. 書籍
• 書籍:'(ほぼ)すべてドイツ語

81. 国内の情報
• hHp://www.contaocms.jp/
– 個人サイト
• hHps://www.facebook.com/groups/contao.jp'
– 日本Contaoの会:'Facebookのグループだけ'
– hHp://contao.jp/'を予定
• Facebook'
– 日本Contaoの会の公開グループ
• TwiHer'
– @contaocms_jp'/'@contao_cco

82. 日本Contaoの会
• 緩いユーザーグループを指向'
• Facebookに公開グループ'
• Webサイト準備中'
• 協力者絶賛募集中'
– 課題'
• 言語ファイルの改善'
• 日本語のドキュメント整備'
• 再利用可能なサンプル・サイト'
• 機能拡張の言語ファイル'

83. 機能拡張の言語ファイル
• contao.orgのオンライン・トランスレーター'
– contao.orgにアカウント作成'
• 未翻訳の言語ファイルを登録'
• 自動的に機能拡張に反映'

84. 機能拡張の言語ファイル(続き)
• Transifex'
– 機能拡張に依存'
– Transifexにアカウント作成'
• 特定の言語(日本語)の翻訳を申請'
• 次のリリースに反映'
• GitHub'
– 機能拡張に依存'
– 言語ファイルをpull'request

85. 質疑応答