テンプレートシステムの変更
●
従来の Contao のテンプレート : 拡張子は tpl
●
HTML5 のテンプレート : 拡張子は html5
●
XHTML のテンプレート : 拡張子は xhtml
●
従来の拡張子の tpl も使用可能
● 後方互換性
● 第3者の機能拡張との互換性
●
注意 : 拡張子 tpl のファイルの内容
● HTML5かもしれないし、XHTMLかもしれない
フロントエンドと意味的な構造
●
ヘッダー : <header>
●
フッター : <footer>
●
左または右のセクション : <aside>
●
レイアウトの領域 : <section>
●
ナビ ゲ ーションモジュール : <nav>
●
アーティクル : <article>
HTML5 対応の今後
●
HTML5 は現時点の状況に応じた内容
● 主要なブラウザーが安定した実装
→ 徐々にContaoも実装
●
HTML5 化 : ブラウザーの非互換性を招かない :
● Internet Explore 9より前はJavaScriptが必須
– JavaScriptが必須なものも多いので問題とならない。
– アコーディオン、Google Maps、Google Analytics
CSS3 のサポート状況
●
CSS3 の基本セット : すべてのブラウザー
●
http://html5readiness.com によるテスト
● rounded cornersとshadow
●
Internet Explore 9 より前の IE
● CSS 3 PIE
スタイルシート
●
スタイルシートエディターの機能強化
● スタイルシート
– メディアクエリー
– 条件付コメント
– 広域変数
– クライアントの応じてCSSのclass定義
● 書式定義
– shadow(影)
– gradient(グラデーション)
– rounded corners(角丸)
条件付コメントとメディアクエリー
●
高度な条件付コメント
● 選択メニューからテキスト入力に変更
– 用意された条件付コメントを選択するのではなく、
柔軟な記述が可能
– 例: if (lt IE6) | (gt IE7)
●
メディアクエリーのサポート
● メディアクエリーはメディアタイプの拡張
– 例: screen and (min-width: 800px)
● メディアクエリーを入力:
選択メニューによるメディアタイプを上書き
スタイルシートの広域変数
●
スタイルシートに広域変数を使用可能
● 推奨: 変数名は$の1文字で開始
– 例: $red → c00
● 変数名の長さに注意: 字数制限のある入力欄
●
任意の書式定義で使用可能
● 変数は実際の入力に置き換え
– 例: background-color: #$red
● 色の#を忘れない様に注意
その他
●
新しい入力項目
● 最小と最大の幅や高さ
● 影とグラデーション関連
● 角丸
● 高度なテキスト書式
●
CSS3 対応の今後
● 現時点の状況に応じた内容
– 主要なブラウザーが安定した実装
→ 徐々にContaoも実装
性能の向上
●
リソースの圧縮
● CSSファイル
– system/scriptsディレクトリに生成
– すべてのスタイルシートの概要をファイルに保存
● JavaScript
– JavaScriptの概要をファイルに保存
● HTMLのマークアップ
– HTMLのマークアップを最小化するオプション
– スペースと改行の変換
– 小さなファイル → 短い処理時間
Google Page Speed 対応
●
.htaccess の変更
● ETagを無効
● 静的なリソースの圧縮
● 適切なExpireヘッダーの送信
●
静的リソースのためのサブドメイン
● 3つのサブドメインをバックエンドで設定可能
● フック関数outputFrontendTemplate()を置き換え
● 過去にブログで紹介
計算コストとキャッシュの活用
●
ファイルシステムのアクセス
● すべての機能拡張のフォルダーの設定と言語ファイ ルの読み込み
● クラスとテンプレートの探索
●
新しいキャッシュ
● __autoload()
● loadDataContainer()
● loadLanguageFile()
● getChildRecords()
定期処理の変更
●
従来 : 非表示の画像のアクセスを介して処理
● ページのアクセスの度の処理
● 多くのアクセスで競合状態の発生
● 散発的に起きるlocalconfig.phpの問題
– セーフモード対処を使用していると空になる
●
JavaScript からの定期処理に変更
● 5分毎にだけ実行
● 競合状態をロック処理で回避
● バックエンドの設定で完全に停止
インストールツールの改善
●
デフォルトのパスワードの入力
● インストールツールの初期パスワードの廃止
● 直接新しいインストールツールのパスワードを設定
●
暗号化キーの入力の省略
● 自動生成
●
閉じるパレット
● 現在の作業だけ表示
● 完了した入力項目は折り畳む
CSS Hacks の代替
●
クライアントの情報を CSS の class
● bodyタグに特別なCSSのclass
● クライアントのオペレーティングシステムやブラウ ザーのバージョン
– 例: mac firefox fx4
●
スタイルシートでの使用
● ブラウザーに特定のCSSの指定
– 例: .ie6 #wrapper { width: 980 px; }
http://www.contaocms.jp/forget-about-browser-hacks-in-contao-210.html
リクエストトークン
●
従来のリファラー検査の欠点
● 検査を回避可能
● セキュリティツールやフィルターで.u.U.の問題を引 き起こし:
– ユーザーがフォームを提出できない。
●
リクエストトークンへの変更
● 各POSTに重複しないIDを付与
● このIDがないと処理を拒否
● リファラー検査よりも良い保護
リクエストトークン ( 続き )
●
開発者に必要な対応 : 以下を追加 :
<input type=”hidden” name=“REQUEST_TOKEN”
value=“{{request_token}}”>
その他の新機能
●
Ajax による強調表示
●
バックエンドで 、メディアボックスによるポッ プアップ
●
プラグインの更新
● 日付選択をMonkeyPhysicsに置き換え
– http://www.monkeyphysics.com/mootools/script/2/datepicker
● editAreaをCodeMirrorに置き換え
– http://codemirror.net/
さらに、その他
●
自動的な IE6 への警告
● Contao 2.10ではIE6は非サポート
● 自動的に警告を表示
– テンプレートに組み込み
●
サムネイルに最適化した PNG を生成
● 最適化したPNGを作成
● 結果として殆どの場合に小さいファイル
●
バージョン 2.10 ではなくて、 3.0 とすべし ?
有用なリンク
●
デモと開発
● http://demo.contao.org/contao/
● http://dev.contao.org
● http://api.contao.org/
●
公式フォーラム
● http://www.contao-community.org/
●
ソーシャルネットワーク
● http://www.facebook.com/contao
● http://twitter.com/contaocms
サイトの例
●
Contao/TYPOlight で作られたサイト
● ソースを表示でだいたいわかる。
●
Contao/TYPOlight を扱っ ているサイト
● http://web.r-studio.jp/index.html
● http://www.contaocms.jp/
●
色々なサイトの例
● 公式コミュニティサイトのショールーム
http://www.contao-community.org/viewforum.php?f=11
Contao の難しいところ
●
ゼロからのコンテンツ作成
● デフォルトではフロントエンドに何も表示なし
● ナビゲーションをデザインするCSSなし
● 自由度の裏返しではあるが、CSS等の知識が必須
●
バックエンドとフロントエンド
● バックエンドには自分でユーザー登録不可
● 両方の区別は厳密: Contao 3で見直し?
●
情報の少なさ
● ドイツ語は多いようだが...
国内のコミュニティ
●
サイト構築者
● 二桁の人数いない?
●
mixi
● 一応、コミュニティ
●
● @contao_cco
国内のコミュニティ ( 続き )
●
Contao 研究会 ( 仮 )
● 作成が必要?
● 日本語の翻訳
– 本体の言語ファイル
– 各機能拡張の日本語
● 言語ファイルと機能拡張リポジトリの両方
● 実は誰でも翻訳に参加可能
– 複数人の場合に用語や訳語の調整が必要
● 技術的な情報交換
● 連絡先:
– taca at back-street.net または @_taca_