コンテンツ

Pickles Framework は、ウェブサイトを「サイトマップ」「コンテンツ」「テーマ」の3要素に分解して構築するフレームワークです。コンテンツは、ページレイアウト全体のうち、サイトアイデンティティやナビゲーション部分を含まない領域を担当します。テーマを入れ物とするならば、内容の部分を指します。

コンテンツの種類 (extensions)

コンテンツには次の種類が定義されています。

  • html
  • php
  • txt
  • md
  • direct
  • download
  • js
  • css

これらの種類は extensions と呼ばれ、それぞれ異なる書式で記述されます。extensions はコンテンツファイルの拡張子に指定することで選択されます。デフォルトはhtmlとなります。

例として、コンテンツ /aaa/bbb.html は、拡張子が html なので、html extension が選択されます。このコンテンツを php extension で記述したい場合、/aaa/bbb.html.php というファイル名としてコンテンツを作成します。サイトマップ上は /aaa/bbb.html のままです。

本マニュアルでは、html extension の書式に絞って説明します。

コンテンツの担当範囲

テーマは、コンテンツのHTMLソースを <div id="content" class="contents"></div> に包んで出力します。したがって、コンテンツの担当範囲はこの要素の内側となります。

場合によって、それ以外の領域にコンテンツからHTMLソースを出力することがあります。その場合も、class="contents" が付いたdiv要素に内包されるのがルールとなります。

ローカルリソースファイルの取り扱い

ローカルリソースファイルとは、コンテンツが独自に使用する画像やCSS、JavaScriptなどのファイル群を指します。どこに設置しても機能的な制限はないが、他のコンテンツのローカルリソースと混ざって区別が付かなくなると、後々取り扱いに困ることになるため、次のルールでコンテンツ単位に独自の領域を設けます。

コンテンツファイル本体と同じ階層に、コンテンツファイル名の拡張子を .files とした名前の専用のディレクトリを設置し、全てのリソースはその中で管理します。

ローカルリソースディレクトリの中の整理分類は、コンテンツ制作者に任せます。

他のコンテンツのローカルリソースにアクセスしてはなりません。

例えば、/aaa/hoge.html というコンテンツであれば、/aaa/hoge.files/* に全てのリソースファイルを格納します。

HTMLコンテンツの書式

本マニュアルでは、デフォルトであるhtml extensionのコンテンツ書式について説明します。

コンテンツHTMLソースの範囲

コンテンツのソースは、 <div class="contents"></div> の内側に設置される部分のみとなります。 <div class="contents"></div> 自体はテーマが作成するため、コンテンツには記載しません。

例:

<p>ここはコンテンツの領域です。</p>

コンテンツローカルCSSの読み込み

CSSはヘッドセクション内に記述する必要があるが、コンテンツの領域は <div class="contents"></div> の内側に限られるため、特別な手順でこのソースを登録する必要があります。$px->theme()->send_content() に渡されたソースは、ヘッドセクション内に出力されます。

例:

<?php ob_start(); ?>
<!-- CSSの記述 -->
<style type="text/css">
.contents .cont_hoge{
	color:#ff0000;
}
</style>
<!-- CSSを外部化する場合 -->
<link rel="stylesheet" href="/aaa/hoge.files/contents.css" type="text/css" />
<?php $px->theme()->send_content( ob_get_clean(), 'head' ); ?>

<div class="cont_hoge">
	<p>ここはコンテンツの領域です。</p>
</div>

CSSの書式

コンテンツが独自に定義するCSSは、サイト全体(テーマ)で一元的に管理されているCSSと干渉し合っては不都合があります。この問題を避けるため、次の規則を設けました。

  • コンテンツは、 <div class="contents"></div> の内側に設置される約束なので、コンテンツが独自に定義するCSSクラスは、.contents 以下にのみ効果があるように記述しなければなりません。
  • コンテンツが独自に定義するCSSクラスには、接頭辞 cont を付加しなければなりません。
  • テーマが提供するCSSモジュールの一部を改変して使うことはできません。ただし、テーマが明示的に許可している場合は、その範囲で改変することができます。

定義済みのモジュール

サイト全体に一元的に設計されているモジュールの一覧については、コーディング規則 を参照してください。

JavaScript

コンテンツは独自にJavaSctiptを記述し、埋め込むことができます。

ただし、次の規則に従います。

  • グローバル領域に宣言されるローカルなJavaScriptメソッドには、接頭辞contを付加します。
  • コンテンツのHTMLソースは <div class="contents"></div> に内包される規則のため、それ以外のDOMエレメントを改変するようなスクリプトを記述してはなりません。
  • コンテンツが独自に定義したエレメントのid属性は、接頭辞contを付加します。

JavaScriptライブラリの利用

テーマがロードするJavaScriptライブラリ

以下のライブラリは、テーマにより標準的にロードするため、コンテンツが明示的にロードする必要はありません。

  • jQuery (1.7.2)

コンテンツによって必要な場合にロードできる共有ライブラリ

以下のライブラリは、共有リソースとしてテーマによって用意されているが、特にコンテンツが必要としない限り、ロードはされません。

  • (未定義)
  • ※初期状態では、定義された項目はありません。プロジェクトごとに、必要に応じて項目を追加してください。

<前へ | 次へ>

次期バージョン Pickles 2 を公開しました。もっと詳しく