XE Skin Manual

Transcription

1 スキン 製 作 マニュアル

2 著 作 権 Copyright c 2011 NHN Corp. All Rights Reserved. 本 書 は 情 報 提 供 のみを 目 的 としています NHN( 株 )は 本 書 に 記 載 された 情 報 の 完 全 性 と 正 確 性 を 検 証 するために 細 心 の 注 意 をもって 作 成 しましたが 発 生 し 得 る 内 容 上 の 誤 りや 記 載 漏 れに 対 しては 責 任 を 負 いません したがって 本 書 の 使 用 や 使 用 の 結 果 による 責 任 は 一 切 利 用 者 のものとし NHN( 株 )はこれについて 明 示 的 黙 示 的 を 問 わず 何 ら 保 証 を 行 うものでは ありません URL 情 報 を 含 め 本 書 で 言 及 されている 特 定 のソフトウェア 商 品 製 品 は 該 当 所 有 者 の 著 作 権 法 に 従 うものとし 該 当 の 著 作 権 法 の 遵 守 は 利 用 者 の 責 任 で 行 うものとします NHN( 株 )は 本 書 の 内 容 を 将 来 予 告 なしに 変 更 することがあります オープンソースライセンス 使 用 告 知 XEは 様 々なオープンソースライセンスのうち LGPL(GNU Lesser General Public License) v2を 採 用 しています LGPL v2とv 3の 間 には 多 少 の 違 いがあるため バージョンv2を 採 用 している 点 に 注 意 が 必 要 です LGPLは 基 本 的 にはGPLと 同 様 で すが 適 用 範 囲 がより 制 限 的 であるという 点 で 異 なります LGPLも GPLと 同 様 に 該 当 ライセンスを 保 有 するソフトウェアを 含 むソフトウェアに 同 じライセンスを 強 制 する 効 力 があります しかし GPLがGPLライセンスを 保 有 したソフトウェアを 含 むす べてのソフトウェアに 無 条 件 にソース 公 開 を 強 制 するのに 対 し LGPLライセンスを 保 有 するプログラムは 特 定 の 条 件 内 で 使 用 する 場 合 であれば ソース 公 開 の 義 務 はありません したがって LGPLライセンスを 保 有 するソフトウェアは 独 占 的 ソフト ウェアの 開 発 にも 利 用 することができます 詳 細 については 下 記 のサイトを 参 照 してください LGPLライセンス: GPLライセンス:

3 はじめに 本 書 について 本 書 では XEスキンを 製 作 する 方 法 について 説 明 します 本 書 の 内 容 は XE coreバージョン1.5をもとにされています 読 者 本 書 の 対 象 読 者 は XEスキンを 製 作 し 自 分 だけのWebサイトを 作 成 したいユーザーです XEスキンは HTMLとCSS J avascript jqueryを 使 って 作 成 されているため これらの 関 連 知 識 を 持 っていると XEスキン 製 作 についてよりスムーズ に 理 解 することができます XEをインストールし 使 用 する 方 法 については XEユーザーマニュアル を 参 照 してください 連 絡 先 本 書 の 内 容 に 誤 りや 不 明 な 点 がありましたら 以 下 の 連 絡 先 までお 問 い 合 わせください 電 子 メール: developers@xpressengine.com 改 版 履 歴 版 数 日 付 履 歴 配 布 XE core 1.5 アップデートに 伴 い 改 訂 3

4 表 記 規 則 参 考 表 記 参 考 読 者 が 参 考 にすべき 内 容 を 記 述 します 注 意 表 記 注 意 読 者 が 知 っておくべき 内 容 システムエラーを 引 き 起 こす 恐 れのある 内 容 実 行 しない 場 合 は 財 産 上 の 被 害 を 被 りかねない 内 容 を 記 述 します 画 面 名 /メニュー 名 / 入 力 値 の 表 記 本 書 では 画 面 名 メニュー 名 入 力 値 を 以 下 のように 表 記 します 画 面 名 : 画 面 名 画 面 メニュー 名 :メニュー > 下 位 メニュー 入 力 値 :home pageを 入 力 します ソースコードの 表 記 本 書 では ソースコードを 以 下 のように 灰 地 に 黒 文 字 で 表 記 します COPYDATASTRUCT st; st.dwdata = PURPLE_OUTBOUND_ENDING; st.cbdata = sizeof(pp); st.lpdata = &pp; ::SendMes(GetTargetHwnd(), WM_COPYDATA, (WPARAM)this->m_hWnd, (LPARAM)&st); 4

5 目 次 1. XE スキン 製 作 の 概 要 XE スキンとは XE スキン 製 作 に 必 要 な 要 素 XE スキン 製 作 の 基 礎 HTML の 理 解 要 素 属 性 値 HTML 要 素 の 始 まりと 終 わり 親 要 素 と 子 要 素 インライン 要 素 とブロック 要 素 CSS の 理 解 セレクタと 属 性 値 CSSセレクタのタイプ JavaScript と jquery の 使 用 jqueryライブラリをインクルードする XEテンプレート 文 法 でJavaScriptを 宣 言 する 標 準 文 法 でJavaScriptを 宣 言 する HTML 解 釈 以 後 のjQuery 実 行 jquery 動 作 方 式 の 実 習 XE テンプレート 文 法 変 数 XE core 変 数 条 件 文 繰 り 返 し 文 簡 単 なPHP 文 の 使 用 include 文 CSSファイル 参 照 JSファイルの 参 照 XML JSフィルターの 適 用 33 5

6 ウィジェットを 挿 入 する XE core 1.4.4からの 新 しいテンプレート 文 法 レイアウトスキンをつくる レイアウトスキンとは 例 題 レイアウトスキンのダウンロード レイアウトスキンの 位 置 とディレクトリ 構 造 レイアウトスキンの 位 置 確 認 レイアウトスキンのディレクトリ 構 造 レイアウトスキン 情 報 作 成 レイアウト 作 成 レイアウトスキン 作 成 サイトマップ 作 成 レイアウトにサイトマップをつなげる ページモジュールにレイアウトをつなげる CSS 適 用 JavaScript 適 用 掲 示 板 スキンをつくる 掲 示 板 スキンとは 掲 示 板 モジュールのインストール 例 題 掲 示 板 スキンのダウンロード 掲 示 板 スキンの 位 置 と 必 須 ファイル 掲 示 板 スキンの 位 置 確 認 掲 示 板 スキン 必 須 ファイル 掲 示 板 スキン 情 報 作 成 66 </var> 掲 示 板 作 成 およびスキン 適 用 掲 示 板 ヘッダー/フッター 作 成 ヘッダー 作 成 フッター 作 成 リストページ 作 成 書 き 込 みページ 作 成 閲 覧 ページ 作 成 トラックバック/コメント 関 連 ページ 作 成 トラックバックリスト 作 成 コメントリスト 作 成 コメント 返 し 登 録 およびコメント 修 正 ページ 作 成 101 6

7 4.12 削 除 ページ 作 成 記 事 削 除 ページ 作 成 コメント 削 除 ページ 作 成 トラックバック 削 除 ページ 作 成 権 限 ガイドページ 作 成 パスワード 入 力 ページ 作 成 CSS の 適 用 JavaScript 適 用 116 7

8 図 表 一 覧 表 一 覧 表 2-1 擬 似 クラスセレクタ 19 表 2-2 擬 似 要 素 セレクタ 20 表 2-3 属 性 セレクタ 21 表 2-4 XE core 変 数 27 表 2-5 条 件 文 の 使 用 例 28 表 2-6 繰 り 返 し 文 の 使 用 例 29 表 2-7 include 文 の 使 用 例 30 表 2-8 media 属 性 値 31 表 2-9 XE core 1.4.4より 追 加 されたテンプレート 文 法 34 表 4-1 掲 示 板 スキン 必 須 ファイル 65 図 一 覧 図 1-1 様 々なスキンの 適 用 12 図 3-1 レイアウトスキンを 使 用 した 一 般 的 な 画 面 構 成 36 図 3-2 レイアウトスキンのディレクトリ 構 造 38 図 3-3 レイアウトスキンが 適 用 されたページ 54 図 3-4 CSSが 正 常 に 適 用 されたページ 58 図 4-1 掲 示 板 モジュールのディレクトリ 構 造 63 図 4-2 掲 示 板 リストページ 完 成 画 面 73 図 4-3 掲 示 板 リスト 設 定 76 図 4-4 掲 示 板 リスト 画 面 作 成 された 記 事 がない 場 合 84 図 4-5 掲 示 板 リスト 画 面 作 成 された 記 事 がある 場 合 84 図 4-6 書 き 込 みページ 完 成 画 面 86 図 4-7 非 ログイン 状 態 での 書 き 込 みページ 90 図 4-8 ログイン 状 態 での 書 き 込 みページ 90 8

9 図 4-9 閲 覧 ページ 完 成 画 面 92 図 4-10 コメント 返 し 登 録 ページ 完 成 画 面 102 図 4-11 記 事 削 除 ページ 完 成 画 面 104 図 4-12 コメント 削 除 ページ 完 成 画 面 105 図 4-13 トラックバック 削 除 ページ 完 成 画 面 107 図 4-14 権 限 案 内 ページ 完 成 画 面 109 図 4-15 パスワード 入 力 ページ 完 成 画 面 111 9

10

11 1. XE スキン 製 作 の 概 要 この 章 では XEスキンの 定 義 とスキン 製 作 に 必 要 な 要 素 について 説 明 します

12 1.1 XE スキンとは XE スキンとは XE で 作 成 したデータをユーザー 画 面 に 表 現 するフォームのことです モジュール レイアウト ウィ ジェット ウィジェットスタイルには ひとつ 以 上 のスキンがあります XE を 使 用 するユーザーは XE オフィシャルサ イト( 提 供 している 様 々なスキンをダウンロードして 利 用 したり 本 書 を 参 考 にして 自 分 だけのオリジナルのスキンを 製 作 することができます 下 記 図 にて ひとつの Web サイト(Textyle)にいろんなタイプのスキンを 適 用 した 例 を 示 します 図 1-1 様 々なスキンの 適 用 モジュールとウィジェットのスキンは 該 当 モジュールやウィジェットのインストールされているディレクトリ 配 下 の skins ディレクトリに 格 納 されます レイアウトとウィジェットスタイルのスキンは 該 当 レイアウトとウィジェットスタイル がインストールされているディレクトリ 内 に 格 納 されます 12 XE スキン 製 作 マニュアル

13 1.2 XE スキン 製 作 に 必 要 な 要 素 XE スキンを 製 作 するには HTML と CSS JavaScript XE テンプレート 文 法 についての 知 識 が 必 要 です HTML(Hyper Text Markup Language) Web ページの 構 造 をつくる 言 語 です 表 現 するコンテンツの 見 出 し 段 落 目 録 などを HTML タグで 作 成 すると Web ブラウザがこのタグを 解 釈 して Web ページに 表 示 します 検 索 エンジンが Web ドキュメントを 収 集 しやすく ま た 様 々なアクセス 環 境 で 使 用 できるようにするためには 標 準 に 準 拠 して 意 味 のある 正 しい HTML ドキュメントを 作 成 しなければなりません CSS(Cascading Style Sheet) HTML が Web ページの 構 造 のための 言 語 なら CSS は 表 現 のための 言 語 です Web ブラウザには HTML 要 素 に 対 する 基 本 的 な 表 現 フォームがありますが CSS を 用 いてこの 表 現 フォームを 見 栄 えよくすることができます 特 定 の HTML 要 素 を 選 択 し 該 当 要 素 に CSS 属 性 を 与 えることで 画 面 における 配 置 色 彩 線 形 状 背 景 画 像 な どを 自 由 に 表 現 することができます JavaScript と jquery HTML CSS が 静 的 表 現 のための 言 語 なら JavaScript は XE ドキュメントの 動 的 表 現 のための 言 語 です JavaScript を 使 用 すると ページを 移 動 することなくユーザーの 実 行 結 果 を 画 面 に 即 時 に 表 示 することができます 事 前 に 読 み 込 まれたコンテンツを 状 況 に 合 わせて 画 面 に 表 示 したり 非 表 示 にしたり ユーザーの 入 力 データに エラーはないか 即 時 に 確 認 し エラーに 対 する 詳 細 説 明 を 提 供 したりします XE は JavaScript を 使 いやすくするた めに jquery という JavaScript ライブラリを 使 用 しています JavaScript に 対 応 していない 環 境 もあるため HTML だけで 実 装 可 能 な 機 能 を 全 的 に JavaScript に 依 存 して 実 装 すると 相 互 の 運 用 性 が 劣 ってしまいます JavaScript を 使 用 するときには 常 にこれを 正 常 に 対 応 できない 障 害 状 況 も 考 慮 しなければなりません XE テンプレート 文 法 XE テンプレート 文 法 は サーバーで PHP 文 法 として 解 釈 されます DB から 情 報 を 抜 き 出 し ユーザー 画 面 へ 表 示 します XE テンプレート 文 法 を 使 用 すると モジュール またはウィジェットの 機 能 を 許 可 範 囲 内 で 拡 張 したり 縮 小 したりできます 13

14

15 2. XE スキン 製 作 の 基 礎 XEスキン 製 作 に 必 要 なHTMLとCSS JavaScript/jQuery XEテンプレート 文 法 について 説 明 します

16 2.1 HTML の 理 解 HTML は 無 秩 序 なデータに 意 味 を 与 え データを 有 用 な 情 報 に 変 える 力 を 持 っています HTML ドキュメントを 配 置 し 飾 るためには CSS を 使 用 します HTML ドキュメントは データの 意 味 と 表 現 をよく 切 り 分 け 適 切 な 言 語 を 用 いて HTML を 作 成 することで 作 成 者 本 人 でなくても 容 易 に 理 解 し 編 集 することができます 表 現 を CSS で 切 り 分 けることによって デザインの 変 更 のために HTML を 編 集 する 労 力 を 削 減 することができます 要 素 属 性 値 HTML は 要 素 と 属 性 値 で 構 成 されています 要 素 <h1 title="xpress Engine">XE</h1> <h1>で 始 まり </h1>で 囲 まれた 全 体 が 要 素 です この 要 素 は <h1> 要 素 といい <h1>と</h1>はそれぞれ 開 始 タグ と 終 了 タグといいます その 間 にある XE は この 要 素 の コンテンツ(contents) といいます h は 見 出 しを 意 味 する heading の 略 です 多 くのタグがこのように 略 語 を 使 います 数 字 は 見 出 しの 階 層 をあ らわします 1 は 最 上 位 レベルの 見 出 しの 意 になります ほとんどの Web ブラウザでの 見 出 しは 太 字 で 大 きな フォントで 表 示 していますが Web 製 作 者 は 単 に 太 字 で 大 きいフォントで 表 現 するためだけにこの 要 素 を 使 用 しては いけません データに 意 味 を 与 えずにただ 太 字 で 大 きなフォントにするのは 表 現 にあたるため CSS で 処 理 しな ければなりません 属 性 <h1 title="xpress Engine">XE</h1> 上 記 コードで title は 属 性 です 属 性 は この 要 素 が 他 の 要 素 と 何 が 違 うかをあらわします title は この 要 素 の 意 味 を 付 加 的 に 説 明 する 参 考 見 出 し の 役 割 をします HTML 要 素 ごとにそれぞれ 異 なった 使 用 可 能 な 属 性 が 規 定 されています 値 (Value) <h1 title="xpress Engine">XE</h1> 属 性 は 必 ず 値 を 持 ちます 上 記 コードにて Xpress Engine は title 属 性 の 値 をあらわします 値 は 現 在 の 要 素 がどのような 属 性 を 持 っているかを 具 体 的 に 定 め 画 面 の 表 示 に 直 接 的 な 影 響 を 与 えます 属 性 によっては 間 違 った 値 を 入 力 すると 画 面 が 正 常 に 表 示 されなくなることもあります 値 は 属 性 によって 既 定 されているものとユー ザーが 定 義 しなければならないものがありますが Xpress Engine は ユーザーの 定 義 する 値 にあたります HTML 要 素 の 始 まりと 終 わり すべての HTML 要 素 には データ 範 囲 を 明 示 するための 始 まり と 終 わり があります <h1 title="xpress Engine">XE</h1> この 要 素 の 始 まりは <h1>です ここから 最 初 の 見 出 しが 始 まります この 要 素 の 終 わりは </h1>です 最 初 の 見 出 しは ここで 終 わります テキストコンテンツでない 場 合 HTML 要 素 自 体 がデータになる 場 合 もありますが このような 場 合 は 始 まりと 同 時 に 終 わります 下 記 例 の 場 合 異 なるイメージのコンテンツを 含 めていないため 始 まりと 同 時 にタグを 閉 じます <img /> 16 XE スキン 製 作 マニュアル

17 2.1.3 親 要 素 と 子 要 素 HTML で 要 素 は 他 の 要 素 を 含 めることができます 例 として 見 出 し XE をクリックして 初 期 画 面 へ 移 動 するコンテンツを 作 成 してみましょう <h1 title="xpress Engine"> <a href="index.html">xe</a> </h1> <h1> 要 素 内 に<a> 要 素 が 含 まれています このように ひとつのデータは 複 数 の 要 素 で 重 ねることができます こ のとき <h1> 要 素 のように 外 側 にある 要 素 を 親 要 素 <a> 要 素 のように 内 側 にある 要 素 を 子 要 素 といいます <a> 要 素 は データが 違 うリソースを 参 照 するよう 繋 げます href 属 性 は <a> 要 素 内 で 参 照 の 対 象 を 指 定 します す なわち 上 記 コードは XE というデータは 最 上 位 レベルの 見 出 しであり index.html を 参 照 している ということを 定 義 しています ただし 要 素 を 重 畳 使 用 する 場 合 は 開 始 タグと 終 了 タグの 使 用 順 を 守 らなければなりません 下 記 のような 宣 言 は 重 畳 の 規 則 に 反 した 間 違 った 使 用 例 です <h1 title="xpress Engine"> <a href="index.html">xe</h1> </a> インライン 要 素 とブロック 要 素 ブロック 要 素 は ひとつの 独 立 したカタマリ として 扱 い 改 行 します <div> <h> <p> 要 素 などがブロック 要 素 にあ たります インライン 要 素 は ' 行 内 の 一 部 'とし 改 行 なしで 連 続 で 表 現 します <span> <img> <a> 要 素 などが 代 表 的 なインライン 要 素 です ブロック 要 素 は インライン 要 素 を 含 めることができますが インライン 要 素 はブロック 要 素 を 含 めることができませ ん どんな 要 素 がブロックであるか インラインであるかは HTML 規 格 を 確 認 してください 下 記 は ブロック 要 素 がインライン 要 素 を 囲 んでいる 正 しいマークアップの 例 です <h1> 要 素 は ブロック 要 素 で <a> 要 素 は インライン 要 素 です <h1><a>xe</a></h1> <!-- 正 しいマークアップ--> 下 記 は インライン 要 素 がブロック 要 素 を 囲 んでいる 正 しくないマークアップの 例 です <a><h1>xe</h1></a> <!-- 正 しくないマークアップ--> 参 考 W3C HTML 4.01 規 格 : W3C HTML 4.01 要 素 索 引 : W3C HTML 4.01 属 性 索 引 : W3C XHTML 1.0 規 格 : W3C マークアップ 有 効 性 チェック: W3 Schools オンライン 学 習 : 17

18 2.2 CSS の 理 解 HTML が Web ドキュメントに 意 味 を 与 え データを 情 報 に 変 えるのに 対 し CSS は ドキュメントの 配 置 と 表 現 に 関 与 し コンテンツを 理 解 しやすく また 見 栄 えよくします XE スキンは ほとんどの 場 合 CSS ファイルと HTML が 分 離 されていますが HTML ドキュメントが CSS ファイルを 参 照 しているため ユーザーには HTML と CSS がす べて 反 映 された 最 終 画 面 が 表 示 されることになります CSS 文 法 を 学 べば ドキュメントを 見 栄 えよくできるだけでな く HTML を 標 準 に 沿 って 正 しく 使 用 することができます セレクタと 属 性 値 CSS は セレクタ と 属 性 と 値 で 構 成 されています セレクタ は HTML の 特 定 の 要 素 を 選 択 し 属 性 と 値 は 選 択 された HTML 要 素 が 画 面 にどのように 表 示 されるかを 定 義 します セレクタ(selector) h1 { font-size:24px; } h1 は セレクタ です <h1> 要 素 を 指 します 属 性 (property) h1 { font-size:24px; } font-size は 属 性 です <h1> 要 素 のフォントサイズを 制 御 する 宣 言 です 値 (value) h1 { font-size:24px; } 24px は 値 です <h1> 要 素 の font-size 属 性 (フォントサイズ) 値 を 具 体 的 に 明 示 します CSS セレクタのタイプ CSS セレクタは 特 定 の HTML 要 素 を 選 択 します セレクタを 使 用 すると 選 択 した 要 素 に 固 有 の CSS フォームを 表 現 することができます CSS は 下 記 のように 様 々なタイプのセレクタをサポートします タイプセレクタ(type selector) h1 { } HTML 要 素 名 をそのままセレクタ 名 として 使 用 することをタイプセレクタといいます HTML ドキュメントで 要 素 名 が 一 致 する 場 合 すべて 選 択 します 標 準 HTML 要 素 名 をセレクタ 名 として 使 用 することができます ID セレクタ(id selector) #selector { } ID セレクタは セレクタ 名 の 前 に 番 号 記 号 (#)を 表 示 します HTML ドキュメントで ID 値 が 一 致 する 要 素 を 選 択 します ID セレクタの 名 前 は ユーザーが 定 義 できます ID セレクタ 名 を 定 義 する 規 則 は 下 記 の 通 りです すべての 自 然 語 をセレクタ 名 として 使 用 できますが アルファベット 大 文 字 小 文 字 と 数 字 の 組 み 合 わせを 推 奨 し ます セレクタ 名 として 特 殊 文 字 を 使 用 することはできませんが アンダースコア(_)とハイフン(-)に 限 り 使 用 できます 数 字 で 開 始 することはできません HTML ドキュメントは ひとつのページに 2 つ 以 上 の ID 値 を 使 用 することを 許 可 しません ID 値 は ひとつの HTML ドキュメント 内 でユニークでなければなりません 18 XE スキン 製 作 マニュアル

19 クラスセレクタ(class selector).selector { } クラスセレクタは セレクタ 名 の 前 にピリオド(.)を 表 示 します HTML ドキュメントにおいてクラス 値 の 一 致 する 要 素 を 選 択 します クラスセレクタの 名 前 は ユーザーが 定 義 できます クラスセレクタ 名 を 定 義 する 規 則 は 下 記 の 通 りで す すべての 言 語 をセレクタ 名 として 使 用 できますが アルファベット 大 文 字 小 文 字 と 数 字 の 組 み 合 わせを 推 奨 しま す セレクタ 名 として 特 殊 文 字 を 使 用 することはできませんが アンダースコア(_)とハイフン(-)に 限 り 使 用 できます 数 字 で 開 始 することはできません HTML ドキュメントは ひとつのページに 2 つ 以 上 の 同 じクラス 値 を 使 用 できます 子 セレクタ(child selector) h1>a { } 子 セレクタは セレクタの 間 に 山 括 弧 (>)を 入 れて 表 示 します セレクタの 列 挙 が HTML 要 素 の 重 畳 順 と 一 致 した 場 合 に 選 択 します 重 畳 が 2 階 層 以 上 になる 子 孫 ( 子 供 の 子 供 )は 選 択 しません 1 階 層 の 直 下 に 含 まれている 子 供 のみを 選 択 します 注 意 IE6 ブラウザは 子 セレクタをサポートしません 子 孫 セレクタ(descendant selector) h1 a { } 子 孫 セレクタは セレクタの 間 に 空 きスペースを 入 れて 表 示 します セレクタの 列 挙 が HTML 要 素 の 重 畳 順 と 一 致 し た 場 合 に 選 択 します 下 記 のように<h1> 要 素 内 に 含 まれている<a> 要 素 のみを 選 択 します <h1><a>xe</a></h1> <h1> 要 素 の 外 側 に 存 在 する<a> 要 素 は この 宣 言 の 影 響 を 受 けません ユニバーサルセレクタ(universal selector) * { } ユニバーサルセレクタは アスタリスク(*)で 表 示 します このセレクタは すべての HTML 要 素 を 選 択 します Web ブ ラウザは 通 常 HTML 要 素 ごとに 基 本 の CSS フォームを 指 定 していますが これを 同 じ 値 に 初 期 化 することができ ます ユニバーサルセレクタを 使 用 すると ページ 表 示 速 度 が 遅 くなるため 必 ず 使 用 すべき 場 合 を 除 いては 使 用 は 推 奨 されません 擬 似 セレクタ(pseudo selector) a:focus { } 擬 似 セレクタは 他 のセレクタの 後 ろにコロン(:)を 付 けて 表 示 します 要 素 の 状 態 を 選 択 する 擬 似 クラスセレクタ と HTML コード 内 にない 擬 似 要 素 を 選 択 する 擬 似 要 素 セレクタ があります 他 のセレクタが 静 的 な 状 態 の HTML 要 素 を 選 択 するのに 対 し 擬 似 セレクタは HTML 要 素 の 動 的 な 変 化 状 態 を 選 択 したり HTML コードにない 擬 似 要 素 を 選 択 します 擬 似 クラスセレクタの 種 類 について 以 下 に 示 します 表 2-1 擬 似 クラスセレクタ 擬 似 クラスセレクタ 説 明 例 題 19

20 :link :visited 未 訪 問 のリンクを 選 択 します a というタイプセレクタと 結 合 して 使 用 します 訪 問 済 みのリンクを 選 択 します a というタイプセレクタと 結 合 して 使 用 します a:link a:visited :hover マウスポインタを 合 わせた 状 態 を 選 択 します a:hover :active マウスクリックの 瞬 間 またはリターンキーを 押 下 した 瞬 間 の 状 態 を 選 択 し ます a:active :focus フォーカスされた 要 素 の 状 態 を 選 択 します a:focus :first-child 最 初 の 子 要 素 を 選 択 します li:first-child :lang(language) 言 語 属 性 が 一 致 した 場 合 に 選 択 します p:lang(en) 注 意 IE6 ブラウザは :first-child, :lang() 擬 似 クラスセレクタをサポートしません IE6 ブラウザでは :hover :active :focus 擬 似 クラスセレクタを a 以 外 の 要 素 ではサポートしません a 要 素 にいろんな 状 態 の 擬 似 クラスセレクタを 指 定 するときは :link(リンク):visited( 訪 問 の 際 に) :hover( 過 剰 に) :active( 活 動 すると) :focus(フォーカスされます)の 順 を 維 持 することを 推 奨 します 後 から 宣 言 されたクラスが 先 に 宣 言 されたものより 優 先 順 位 が 高 いため すべて 上 書 きしてしまうからです たとえば :hover の 後 に a:visited を 宣 言 すると 訪 問 済 みのリンクの 上 にマウスを 置 いても:hover が 適 用 されません 訪 問 済 みのリンクの 上 にマウスを 置 いたときに 反 応 させるためには :visited の 次 に:hover クラスを 宣 言 しなければなりません 擬 似 要 素 セレクタの 種 類 について 以 下 に 示 します 表 2-2 擬 似 要 素 セレクタ 擬 似 要 素 セレクタ 説 明 例 題 :first-line :first-letter 最 初 の 行 を 選 択 します ブロック 要 素 のみ 適 用 可 能 最 初 の 文 字 を 選 択 します ブロック 要 素 のみ 適 用 可 能 p:first-line p:first-letter :before 要 素 開 始 点 の 内 側 の 擬 似 要 素 を 選 択 します div:before{ content:" " } (div 要 素 開 始 点 の 内 側 に 仮 想 の' ' 文 字 列 を 生 成 し 選 択 します) :after 要 素 終 了 点 の 内 側 の 擬 似 要 素 を 選 択 します div:after{ content:" " } (div 要 素 終 了 点 の 内 側 に 仮 想 の' ' 文 字 列 を 生 成 し 選 択 します) 注 意 IE6 ブラウザは 擬 似 要 素 セレクタをサポートしません セレクタグルーピング(Selector Grouping).apple,.tomato { color:red } 20 XE スキン 製 作 マニュアル

21 セレクタグルーピングは コンマ(,)を 使 用 して 複 数 のセレクタをひとつに 括 り 属 性 と 値 を 一 度 だけ 宣 言 します 複 数 のセレクタが 同 じ 属 性 と 値 を 共 有 するときにひとつのセレクタで 括 ることができます 上 記 のセレクタグルーピング 宣 言 は 下 記 の 宣 言 と 同 じ 意 味 をあらわします.apple { color:red }.tomato { color:red } 隣 接 セレクタ(Adjacent Sibling Selector) h1+h2 { color:red } 兄 弟 セレクタは セレクタの 間 にプラス 記 号 (+)を 入 れて 表 示 します 要 素 が 兄 弟 関 係 にあり 同 じ 列 挙 順 の 場 合 後 からあらわれる 要 素 を 選 択 します 上 記 の 隣 接 兄 弟 セレクタ 宣 言 によると 下 記 の HTML コードにて<h1> 要 素 の 次 に<h2> 要 素 が 順 番 にあらわれてい るため <h2> 要 素 は 赤 色 の 文 字 で 表 示 されることになります <h1>xe</h1> <h2>textyle</h2> 注 意 IE6 ブラウザでは 兄 弟 セレクタをサポートしません 属 性 セレクタ(Attribute Selector) input[checked] {... } /* input 要 素 に checked 属 性 が 使 用 された 場 合 無 条 件 で 選 択 */ input[type=text] {... } /* input 要 素 の type 属 性 が text の 場 合 にだけ 選 択 */ img[alt~=dog] {... } /* img 要 素 の alt 属 性 値 に dog という 単 語 が 含 まれている 場 合 選 択 */ p[lang =en] {... } /* p 要 素 の lang 属 性 が en-us のように en-で 始 まる 場 合 選 択 */ HTML 要 素 に 宣 言 された 属 性 を 使 用 して 該 当 要 素 を 選 択 します 属 性 セレクタの 種 類 について 以 下 に 示 します 表 2-3 属 性 セレクタ 属 性 セレクタ 説 明 例 題 [attribute] HTML 要 素 に attribute という 属 性 が 使 用 された 場 合 値 の 有 無 とは 関 係 なく 要 素 を 選 択 します input[checked] [attribute=value] HTML 要 素 に attribute という 属 性 が 使 用 されていて たったひとつの 値 があり そしてその 値 が 正 確 に value のときに 要 素 を 選 択 します input[type=text] [attribute~=value] [attribute = value] HTML 要 素 に attribute という 属 性 が 使 用 されていて ひとつ 以 上 の 値 が 空 白 で 区 切 られて 存 在 していて その 中 のひとつの 値 が value のときに 要 素 を 選 択 します HTML 要 素 に attribute という 属 性 が 使 用 されていて 値 が value で 始 まる 場 合 要 素 を 選 択 します img[alt~=dog] p[lang =en] 注 意 IE6 ブラウザでは 属 性 セレクタをサポートしません 参 考 CSS 規 格 : CSS Reference: 21

22 2.3 JavaScript と jquery の 使 用 XE は JavaScript を 使 いやすくするために jquery という JavaScript ライブラリを 使 用 しています jquery を 使 用 す ると スキン 製 作 者 が JavaScript の 専 門 家 でなくても JavaScript を 容 易 に 扱 うことができます ここでは XE スキンを 製 作 するときに HTML ドキュメントにスクリプトをインクルードする 方 法 について 説 明 します jquery ライブラリをインクルードする XE core には jquery ライブラリがすでにインクルードされており すべてのページで 参 照 するよう 宣 言 されているた め 別 途 jquery ライブラリを 呼 び 出 す 宣 言 を 行 う 必 要 はありません XE で 作 成 されたすべての Web ドキュメントに は HTML コードの<head> 要 素 の 内 側 に 下 記 のように jquery ライブラリ 参 照 コードが 含 まれています <script type="text/javascript" src="./common/js/jquery.js"></script> JavaScript 参 照 コードは 文 法 的 に HTML コードの<head> 要 素 または<body> 要 素 内 のどこにでも 含 めることがで きますが XE では jquery ライブラリ 参 照 コードを HTML ドキュメントの<head> 要 素 内 に 含 めています Web ブラウザ は JavaScript コードを 宣 言 された 順 番 通 りに 解 釈 していきますが このとき JavaScript コードの 解 釈 順 序 が 画 面 表 示 に 影 響 を 及 ぼす 場 合 があります HTML 解 釈 と 同 時 に 結 果 を 実 行 しなければならない jquery 依 存 コードがあった 場 合 jquery ライブラリより 先 に 解 釈 されるといけないため XE は jquery ライブラリ 参 照 宣 言 を HTML ドキュメント の<head> 要 素 内 に 含 めているのです 参 考 XE のインストール 先 によって jquery.js ファイルの 参 照 パスは 例 題 とは 異 なることがあります XE テンプレート 文 法 で JavaScript を 宣 言 する jquery コードは JavaScript であるため JavaScript 文 法 にしたがって 作 成 しなければなりません JavaScript の 宣 言 は HTML ドキュメントの<head> 要 素 または<body> 要 素 の 内 側 で 行 わなければなければならず これ 以 外 のとこ ろで 宣 言 を 行 うと HTML 文 法 エラーが 発 生 します HTML 文 法 の 許 可 しない 場 所 で JavaScript コードを 作 成 すると 標 準 を 準 拠 して 厳 格 に 実 装 されているブラウザでは JavaScript を 解 釈 できなくなる 場 合 もあります JavaScript コー ドを HTML ドキュメントに 直 接 インクルードする 方 法 もありますが 別 途 の*.js ファイルで 区 別 し HTML ドキュメント から 呼 び 出 す 方 法 もあります JavaScript は 用 途 によって 次 のように 宣 言 する 場 所 を 区 別 して 使 用 します <head> 要 素 にて JS ファイルを 参 照 Web ブラウザが 画 面 表 示 を 終 了 する 前 に JavaScript でユーザー 画 面 の 一 部 コンテンツを 表 示 したり 非 表 示 にす る 動 作 を 実 行 する 場 合 は JavaScript コードを HTML ドキュメントの<head> 要 素 に 含 めます この 場 合 JavaScript コードを<body> 要 素 に 含 めると JavaScript が HTML より 後 に 解 釈 され 一 時 的 に 画 面 が 正 常 に 表 示 されないこと があります <head> 要 素 に 含 まれた JavaScript は HTML ドキュメントより 先 に 解 釈 されますが HTML ドキュメントのロードが 完 了 してから 実 行 するようコードを 作 成 しなければなりません <body> 要 素 にて JS ファイルを 参 照 JavaScript が HTML ドキュメントをロードする 時 点 で 画 面 表 示 のためになんらかの 動 作 を 実 行 しない 場 合 は HTML ドキュメントの<body> 要 素 に 含 みます ただし <body> 要 素 のいちばん 下 に 宣 言 することを 推 奨 します Web ブラウ ザは HTML コードと JavaScript コードを 同 時 に 解 釈 せず 作 成 された 順 番 通 りに 解 釈 するため JavaScript コード を 後 で 解 釈 するようにすると HTML ドキュメントを 画 面 に 表 示 するスピードが 速 くなります 22 XE スキン 製 作 マニュアル

23 XE テンプレート 文 法 で JavaScript を 宣 言 する 詳 細 な 方 法 については JS ファイルの 参 照 を 参 照 してください 標 準 文 法 で JavaScript を 宣 言 する 別 途 作 成 された JavaScript ファイルを HTML ドキュメントから 呼 び 出 す 場 合 XE テンプレート 文 法 を 使 用 すると HTML ドキュメントの<head> 要 素 または<body> 要 素 の 終 了 点 のうち いずれかを 宣 言 位 置 として 選 択 することがで きます しかし <body> 要 素 の 終 了 点 ではなく <body> 要 素 内 の 希 望 する 位 置 に 正 確 に 挿 入 するには 挿 入 したい 位 置 に 下 記 のように HTML 標 準 文 法 で 宣 言 を 行 います <body>... <script type="text/javascript" src="xxx.js"></script>... </body> 別 途 の JavaScript ファイルを 作 成 せずに HTML ドキュメントにて 直 接 JavaScript コードを 作 成 するには 下 記 のよ うに 宣 言 します <body>... <script type="text/javascript"> // <![CDATA[ JavaScript コードをここに 作 成 します // ]]> </script>... </body> 参 考 JavaScript コードの 開 始 点 と 終 了 点 に<![CDATA[...]]>を 宣 言 することは JavaScript コードに 含 まれた 文 字 が HTML コードで 解 釈 されることを 防 止 するためのものです <![CDATA[...]]>を 宣 言 しなければ 山 括 弧 (<, >)と 各 種 JavaScript 演 算 子 が 文 字 通 りに 解 釈 されず HTML タグが 開 始 されたり HTML エンティティが 開 始 されるものと 誤 解 される 恐 れがあります <![CDATA[...]]> 宣 言 は JavaScript 文 法 でないため 宣 言 されたラインを 一 行 コメントで 処 理 します HTML 解 釈 以 後 の jquery 実 行 XE で 作 成 されたすべてのドキュメントは jquery ライブラリを 参 照 するため <script> 要 素 内 にて jquery 文 法 を 使 用 できます しかし HTML ドキュメントの 解 釈 を 完 了 する 前 に JavaScript が 実 行 された 場 合 HTML 構 造 に 依 存 して いる JavaScript 構 文 でエラーが 発 生 する 恐 れがあります このようなエラーを 防 止 するために jquery ドキュメント の 解 釈 時 点 と 実 行 時 点 にそれぞれ 異 なる 値 を 指 定 することができます 下 記 の 方 法 で jquery 関 数 を 宣 言 すると HTML ドキュメントロード 終 了 後 に jquery を 実 行 することができます <script type="text/javascript"> // <![CDATA[ jquery(function($){ jquery 文 法 をここに 作 成 します }); // ]]> </script> 注 意 jquery 文 法 において jquery は ドル 記 号 ($)に 置 き 換 えて 表 記 できます しかし XE は$ 記 号 を 使 用 する 他 の JavaScript ライブラリとの 衝 突 を 避 けるために jquery 関 数 の 開 始 点 だけは$ 記 号 への 置 き 換 えを 許 可 しません したがって XE では jquery 関 数 を 最 初 に 作 成 するときに jquery(function($){... })と 作 成 しなければなりません 23

24 2.3.5 jquery 動 作 方 式 の 実 習 jquery の 動 作 方 式 を 一 言 で 説 明 すると 選 択 と 実 行 といえます これを もう 少 し 詳 しく 解 説 すると HTML 要 素 を 選 択 し 必 要 な 時 点 に 動 作 を 実 行 する の 意 味 になります 下 記 の 簡 単 な 例 題 を 通 じて 実 習 してみましょう <head> <style type="text/css"> #help { display:none; } </style> <script type="text/javascript" src="jquery.js"></script> </head> <body> <a href="#help" class="helpbtn">ヘルプ</a> <p id="help">この 内 容 は CSS 宣 言 により 画 面 に 表 示 されません <p> <script type="text/javascript"> // <![CDATA[ jquery(function($){ $('a.helpbtn').click(function(){ // HTML 要 素 を 選 択 し $('p#help').css('display','block'); // 動 作 を 実 行 します }); }); // ]]> </script> </body> 上 記 コードは p#help が 最 初 は display:none 状 態 になっていますが ユーザーが a.helpbtn という 要 素 をクリックし て display:block へと 状 態 の 変 わる 動 作 を 実 装 したものです jquery 関 数 内 で HTML 要 素 を 選 択 し ユーザーの イベントを 待 った 後 選 択 した 要 素 の CSS 変 更 を 実 行 しています 特 定 HTML 要 素 を 画 面 に 非 表 示 にしたり 表 示 する 動 作 は 非 常 に 頻 繁 に 発 生 するため jquery はこのような 動 作 をより 簡 単 に 行 えるように show() hide()という 組 み 込 み 関 数 を 提 供 します 上 記 コードは 下 記 のように より 簡 単 に 作 成 することができます <head> <style type="text/css"> #help { display:none; } </style> <script type="text/javascript" src="jquery.js"></script> </head> <body> <a href="#help" class="helpbtn">ヘルプ</a> <p id="help">この 内 容 は CSS 宣 言 により 画 面 に 表 示 されません <p> <script type="text/javascript"> // <![CDATA[ jquery(function($){ $('a.helpbtn').click(function(){ // HTML 要 素 を 選 択 し $('p#help').show(); // show() 関 数 を 実 行 します }); }); // ]]> </script> </body> 下 記 の 例 題 は a.helpbtn リンクを 一 回 クリックすると 表 示 し もう 一 回 クリックすると 非 表 示 にするトグル 関 数 を 実 行 するよう 動 作 を 改 善 したものです <head> <style type="text/css"> #help { display:none; } </style> <script type="text/javascript" src="jquery.js"></script> </head> 24 XE スキン 製 作 マニュアル

25 <body> <a href="#help" class="helpbtn">ヘルプ</a> <p id="help">この 内 容 は CSS 宣 言 により 画 面 に 表 示 されません <p> <script type="text/javascript"> // <![CDATA[ jquery(function($){ $('a.helpbtn').click(function(){ // HTML 要 素 を 選 択 し $('p#help').toggle(); // toggle() 関 数 を 実 行 します }); }); // ]]> </script> </body> これまで jquery の 使 用 方 法 と 簡 単 な 動 作 方 式 について 説 明 しました jquery マニュアルや jquery 関 連 書 を 参 考 に すると より 多 様 な 方 法 で HTML 要 素 を 選 択 し より 多 くの 動 作 を 実 装 することができます 参 考 jquery を 使 用 して HTML を 選 択 し 動 作 を 実 行 する 詳 細 な 方 法 については jquery 公 式 Web サイト( 参 照 してください 25

26 2.4 XE テンプレート 文 法 XE テンプレート 文 法 は サーバー 側 にて PHP 文 法 で 解 釈 されます DB から 情 報 を 取 り 出 し その 情 報 をユーザー 画 面 に 表 示 します XE テンプレート 文 法 を 使 用 すると モジュール またはウィジェットの 機 能 や 内 容 を 許 可 範 囲 内 で 拡 張 したり 縮 小 したりできます XE テンプレート 文 法 を 適 用 し XE スキンを 作 成 する 方 法 には 以 下 の4つの 方 法 があります HTML 注 釈 <! > 内 側 に 作 成 する 方 法 例 ) <!--@if(...)-->...<!--@end--> 仮 想 の<block> 要 素 内 側 に 作 成 する 方 法 例 ) <block>...</block> HTML 要 素 に 直 接 作 成 する 方 法 例 ) <p cond=" 条 件 節 ">...</p> 注 釈 や 要 素 に 依 存 せずに 作 成 する 方 法 例 ) {$content} 内 容 変 数 でデータを 表 示 する 参 考 <block> 要 素 は HTML 標 準 の 要 素 ではなく XE core より 新 しく 追 加 された 仮 想 の 要 素 です HTML 要 素 の 形 式 を 借 り て 使 用 してはいますが 制 御 文 を 実 行 するのみで 実 際 には 画 面 に 要 素 が 表 示 されることはありません cond 属 性 もまた XE core より 追 加 された 仮 想 の 属 性 として 条 件 文 の 役 割 をします 変 数 変 数 は プログラムで 事 前 に 宣 言 しておいた 内 容 を 表 示 したり ユーザー 入 力 を 再 度 画 面 に 表 示 するときに 必 要 で す ユーザー 画 面 に 表 示 されるほとんどの 内 容 は すべて 変 数 で 表 示 されているといっても 過 言 ではありません 変 数 の 使 用 形 式 は 下 記 の 通 りです 基 本 形 式 {$string} 変 数 の 基 本 形 式 は 中 括 弧 ({ }) 内 に 変 数 名 を 書 き 変 数 名 の 前 にドル 記 号 ($)を 付 けます 変 数 名 は 文 字 列 (string) で 作 成 しなければならず 事 前 に 宣 言 された 名 前 のみ 使 用 できます 変 数 の 中 の 変 数 {$string->string} {$string->string->string} 変 数 は 別 の 変 数 を 含 めている 場 合 がありますが このような 変 数 を 使 用 するには ハイフンと 山 括 弧 (->) を 使 用 して 変 数 と 変 数 をつなげます 変 数 の 中 の 関 数 {$string->string()} {$string->string(string integer)} 変 数 に 関 数 をつなげるには ハイフンと 山 括 弧 (->) を 使 用 します 関 数 名 の 後 ろには 常 に 小 括 弧 (( ))が 付 きます 小 括 弧 には 関 数 の 内 容 として 文 字 列 (string)や 整 数 (integer)を 含 めることができます 関 数 名 には 事 前 に 宣 言 さ れた 名 前 しか 使 用 できません XE core 変 数 XE core 変 数 とは XE core で 使 用 する 変 数 のことをいいます XE core 変 数 は いろんなモジュールで 広 く 使 用 できます 特 定 のモジュールでしか 使 用 できない 変 数 もありますが このような 変 数 は XE core 変 数 ではなくただ 変 数 といいます XE core 変 数 について 以 下 に 示 します 26 XE スキン 製 作 マニュアル

27 表 2-4 XE core 変 数 変 数 説 明 $is_logged ユーザーのログイン 有 無 を 確 認 <p cond="$is_logged">welcome!</p> $current_url $request_uri $logged_info $logged_info->member_srl $logged_info->user_id $logged_info-> _address $logged_info-> _id $logged_info-> _host $logged_info->user_name $logged_info->nick_name $logged_info->homepage $logged_info->blog $logged_info->birthday $logged_info->profile_image $logged_info->image_name $logged_info->image_mark $logged_info->signature $logged_info->group_list $logged_info->is_admin $logged_info->is_site_admin $module_info $module_info->module $module_info->use_mobile $module_info->mid $module_info->skin $module_info->mskin $module_info->browser_title $module_info->string 現 在 ページの URL XE core インストール URL ログインユーザーに 自 身 の 会 員 情 報 を 表 示 ログインユーザーの 固 有 番 号 ログインユーザーの ID ログインユーザーのメールアドレス ログインユーザーメール ID ログインユーザーメールホスト ログインユーザー 名 ログインユーザーニックネーム ログインユーザーホームページ ログインユーザーブログ ログインユーザー 生 年 月 日 (YYYYMMDD) ログインユーザープロフィールイメージ ログインユーザーの 名 前 のイメージパス ログインユーザーのグループイメージパス ログインユーザー 署 名 ログインユーザー 入 会 グループリスト ログインユーザーが 管 理 者 であるかの 確 認 ログインユーザーが 仮 想 サイト 管 理 者 であるかの 確 認 モジュール 情 報 として 現 在 のモジュールの 情 報 を 表 示 モジュール 名 モジュールモバイルスキンの 使 用 要 否 モジュール ID モジュールスキン 名 モジュールモバイルスキン 名 モジュールドキュメントタイトル モジュールで 作 られた 拡 張 変 数 条 件 文 条 件 文 は 与 えられた 条 件 にしたがって 必 要 な 内 容 を 文 脈 にあわせて 表 示 したり 表 示 してはいけないときに 必 要 です 条 件 文 は if, elseif, else, end と 条 件 式 で 構 成 されます if 文 で 開 始 したら 必 ず end 文 で 閉 じ 条 件 文 の 27

28 終 了 を 宣 言 しなければなりません 条 件 式 の 内 容 は PHP で 解 釈 されるため PHP で 使 用 できるいろんな 演 算 子 (&&,, ==,! など)を 使 用 することもできます 下 記 は Welcome XE! という 文 章 を 表 現 する 様 々な 条 件 文 の 使 用 方 法 です 表 2-5 条 件 文 の 使 用 例 条 件 文 説 明 備 考 条 件 式 )--> <p>welcome XE!</p> <block cond=" 条 件 式 "> <p>welcome XE!</p> </block> <p cond=" 条 件 式 "> Welcome XE! </p> <p attr="value" cond=" 条 件 式 "> Welcome XE! </p> 条 件 式 が 真 であれば 含 まれている 内 容 を 表 示 条 件 式 が 真 であれば 含 まれている 内 容 を 表 示 条 件 式 が 真 であれば <p> 要 素 と 共 に 含 まれてい る 内 容 を 表 示 <p> 要 素 は 無 条 件 で 表 示 条 件 式 が 真 であれ ば attr="value" 属 性 と 値 を 表 示 XE core 以 上 XE core 以 上 XE core 以 上 参 考 <block> 要 素 は HTML 標 準 の 要 素 でなく XE core より 新 しく 追 加 された 仮 想 の 要 素 です HTML 要 素 の 形 式 を 借 りて 使 用 してはいますが 制 御 文 を 実 行 するのみで 実 際 には 画 面 に 要 素 が 表 示 されることはありません cond 属 性 もまた HTML 標 準 ではなく XE core より 追 加 されたテンプレート 文 法 のひとつです cond は 条 件 式 を 表 現 するときに 使 用 す る 仮 想 の 属 性 です if elseif else 文 を 同 時 に 使 用 すると 真 偽 のみでなく いろんな 条 件 を 与 えて 条 件 によって 異 なる 結 果 を 表 示 させ ることができます 条 件 A)--> <p> 条 件 A を 満 たせば この 文 章 を 表 示 する </p> <!--@elseif( 条 件 B)--> <p> 条 件 A は 満 たせられず 条 件 B を 満 たせば この 文 章 を 表 示 する </p> <!--@else--> <p> 条 件 A 条 件 B を 同 時 に 満 たせられなかったら この 文 章 を 表 示 する </p> <!--@end--> 上 記 の 条 件 式 を XE core より 新 しく 追 加 された cond 条 件 式 に 変 えると 下 記 のようにもっと 簡 単 に 表 現 する ことができます <p cond=" 条 件 A"> 条 件 A を 満 たせば この 文 章 を 表 示 する </p> <p cond=" 条 件 B"> 条 件 B を 満 たせば この 文 章 を 表 示 する </p> <p cond="! 条 件 A &&! 条 件 B"> 条 件 A 条 件 B を 同 時 に 満 たせられなかったら この 文 章 を 表 示 する </p> 繰 り 返 し 文 与 えられた 条 件 にしたがって 必 要 な 内 容 を 繰 り 返 して 表 示 しなければならない 場 合 繰 り 返 し 文 が 必 要 です 繰 り 返 し 文 は foreach, end と 条 件 式 で 構 成 されています foreach 文 で 開 始 したら 必 ず end 文 で 閉 じ 繰 り 返 し 文 の 終 了 を 宣 言 します 28 XE スキン 製 作 マニュアル

29 表 2-6 繰 り 返 し 文 の 使 用 例 繰 り 返 し 文 説 明 備 考 変 数 名 as $val)--> <tr>...</tr> <block loop=" 変 数 名 =>$val"> <tr>...</tr> </block> $key 値 なしで<tr>...</tr> 繰 り 返 し $key 値 なしで<tr>...</tr> 繰 り 返 し XE core 以 上 <tr loop=" 変 数 名 =>$val">...</tr> $key 値 なしで<tr>...</tr> 繰 り 返 し XE core 以 上 変 数 名 as $key => $val)--> <tr>...</tr> <block loop=" 変 数 名 =>$key, $val"> <tr>...</tr> </block> $key 値 を 含 み<tr>...</tr> 繰 り 返 し $key 値 を 含 み<tr>...</tr> 繰 り 返 し XE core 以 上 <tr loop=" 変 数 名 =>$key,$val">...</tr> $key 値 を 含 み<tr>...</tr> 繰 り 返 し XE core 以 上 <tr>...</tr> <block loop="$i=0;$i<100;$i++"> <tr>...</tr> </block> <tr loop="$i=0;$i<100;$i++">...</tr> 条 件 文 )--> <li> </li> 初 期 値 0 から 開 始 し <tr>...</tr>100 回 繰 り 返 し 初 期 値 0 から 開 始 し <tr>...</tr>100 回 繰 り 返 し 初 期 値 0 から 開 始 し <tr>...</tr>100 回 繰 り 返 し 条 件 文 が 真 であれば <li> </li>を 繰 り 返 す( 条 件 文 が 偽 になれないなら 無 限 ル ープエラーが 発 生 し 得 る) XE core 以 上 XE core 以 上 参 考 loop 属 性 は HTML 標 準 の 属 性 でなく XE core より 新 しく 追 加 されたテンプレート 文 法 のひとつです loop は foreach 文 の 条 件 式 を 表 現 するときに 使 用 する 仮 想 の 属 性 です 簡 単 な PHP 文 の 使 用 XE スキンファイルでは PHP 文 法 を 使 用 することはできませんが 下 記 のように 中 括 弧 内 にアットマーク(@)を 含 め て 簡 単 な PHP 文 を 使 用 することができます {@$is_logged=context::get('is_logged')} PHP 文 を 使 用 する 際 には 一 行 に 一 文 ずつ 作 成 しなければなりません たとえば 下 記 の 文 は PHP では 問 題 あり ませんが XE では 致 命 的 なエラーを 発 生 させる 恐 れがあれます 一 行 に 複 数 の 文 を 作 成 しているからです {@$test=364; $test=$test*$test} 上 記 の 例 文 は 下 記 のように 一 行 に 一 文 ずつ 作 成 しなければなりません {@ } $test=364; $test=$test*$test 29

30 2.4.6 include 文 スキン 製 作 の 際 に 複 数 のページに 渡 って 繰 り 返 されるコンテンツブロックがある 場 合 は 別 途 のファイルで 管 理 す ると 便 利 です 同 じ 修 正 が 複 数 ページに 渡 る 場 合 一 括 適 用 できるからです include は 別 途 のファイルを 現 在 の ページに 呼 び 出 すコマンドです 表 2-7 include 文 の 使 用 例 Include 文 説 明 備 考 <!--#include( header.html")--> header.html をインクルードする <include target="header.html" /> header.html をインクルードする XE core 以 上 参 考 <include /> 要 素 は HTML 標 準 の 要 素 でなく XE core より 新 しく 追 加 された 仮 想 の 要 素 です HTML 要 素 の 形 式 を 借 り て 使 用 してはいますが include 文 を 実 行 するのみで 実 際 には 画 面 に<include /> 要 素 が 表 示 されることはありません target 属 性 もまた XE core より 新 しく 追 加 されたテンプレート 文 法 のひとつです target 属 性 にはインクルードするファ イルのパスを 作 成 します CSS ファイル 参 照 CSS ファイルを HTML ドキュメントで 参 照 する 方 法 について 説 明 します XE core より 複 数 の CSS ファイルをひ とつのファイルに 統 合 する optimizer 機 能 が 非 対 応 となったため ひとつのモジュールを 製 作 する 際 には CSS ファイ ルを 分 離 せずに できるだけひとつのファイルにまとめて 作 成 することを 推 奨 します CSS 参 照 <!--%import( xe.css")--> または <load target="xe.css" /> HTML ドキュメントの<head> 要 素 にて xe.css ファイルを 参 照 します <load /> 要 素 は XE core より 使 用 できま す 結 果 コードは 下 記 の 通 りです <head> <link rel="stylesheet" type="text/css" href="xe.css" /> </head> CSS ファイルは HTML ドキュメントの<head> 要 素 でのみ 参 照 可 能 です <body> 要 素 で 別 途 の CSS ファイルを 参 照 すると HTML 文 法 エラーが 発 生 します media 指 定 <load target= xe.css" media="print" /> CSS ファイルの 対 象 となるメディアを 選 択 して 指 定 できます <load /> 要 素 と media 属 性 は XE core より 使 用 できます 結 果 コードは 下 記 の 通 りです <head> <link rel="stylesheet" type="text/css" href="xe.css" media="print" /> </head> media 属 性 の 値 にコンマを 用 いて 複 数 の 値 を 指 定 することができます 基 本 値 は all で 使 用 可 能 な 値 は 下 記 表 の 通 りです 30 XE スキン 製 作 マニュアル

31 表 2-8 media 属 性 値 属 性 値 説 明 all media 未 指 定 の 場 合 の 基 本 値 すべての 表 示 装 置 に 対 応 aural braille embossed handheld print projection screen tty tv 音 声 表 示 装 置 (スクリーンリーダー) 点 字 表 示 装 置 点 字 印 刷 装 置 モバイル 装 置 プリンター 投 射 装 置 スクリーン(モニター) テレタイプライター(Tele Type Writer) テレビ 参 考 CSS media 属 性 を 指 定 するときは 意 図 した 装 置 が CSS 標 準 を 遵 守 しているか 必 ず 確 認 しなければなりません 非 対 応 装 置 の 場 合 指 定 した media 属 性 は 適 用 されません IE 条 件 付 き 注 釈 の 使 用 <load target= xe.css" targetie="ie 6" /> targetie 属 性 を 使 用 すると IE の 特 定 バージョンでのみ CSS ファイルを 解 釈 できるよう 条 件 付 き 注 釈 で 表 示 します <load /> 要 素 と targetie 属 性 は XE core より 使 用 可 能 です 結 果 コードは 下 記 の 通 りです <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="xe.css" /> <![endif]--> このコードは すべてのブラウザで 注 釈 処 理 しますが IE 6 ブラウザは 注 釈 で 処 理 せずに 解 釈 します CSS ファイル 参 照 宣 言 順 の 変 更 <load target= xe.css" index="-1" /> index 属 性 を 使 用 すると CSS ファイルの 宣 言 順 を 変 更 することができます <load /> 要 素 と index 属 性 は XE core より 使 用 できます index 属 性 の 値 には 正 の 整 数 または 負 の 整 数 を 使 用 できますが 負 の 整 数 を 使 用 すると 早 く 正 の 整 数 を 使 用 す ると 宣 言 は 遅 く 宣 言 されます index="-1" 値 を 指 定 すると 他 の CSS ファイルより 一 行 速 いところから 宣 言 されます CSS ファイルは 同 じのコマンドが 衝 突 した 場 合 後 で 宣 言 された 値 が 優 先 になるため 優 先 順 位 を 高 くする 場 合 は 後 で 宣 言 してください JS ファイルの 参 照 JS ファイルを HTML ドキュメントで 参 照 する 方 法 について 説 明 します XE core より 複 数 の JS ファイルをひと つのファイルに 統 合 する optimizer 機 能 が 非 対 応 となったため ひとつのモジュールを 製 作 する 際 には JS ファイル を 分 離 せずに できるだけひとつのファイルで 作 成 することを 推 奨 します 31

32 JS ファイルを 呼 び 出 せるのは HTML ドキュメントの<head> 要 素 または<body> 要 素 のみです <head> 要 素 また は<body> 要 素 以 外 の 要 素 で JS ファイルを 参 照 すると HTML 文 法 エラーが 発 生 し JS ファイルを 解 釈 できないブラ ウザがありえます <head> 要 素 から JS ファイルを 参 照 する 下 記 は xe.js ファイルを HTML ドキュメントの<head> 要 素 から 呼 び 出 す 方 法 を 示 します <!--%import( xe.js")--> または <load target="xe.js" /> <load /> 文 法 は XE core より 使 用 可 能 です 結 果 コードは 下 記 の 通 りです <head> <script type="text/javascript" src="xe.js"></script> </head> <body> 要 素 から JS ファイルを 参 照 する 下 記 は xe.js ファイルを HTML ドキュメントの<body> 要 素 から 呼 び 出 す 方 法 を 示 します <load target="xe.js" type="body" /> <load /> 要 素 は 対 象 ファイルを HTML ドキュメントから 呼 び 出 します 属 性 と 値 は 下 記 の 通 りです media="all aural braille embossed handheld print projection screen tty tv" CSS ファイルの 対 象 になるメディアを 選 択 して 指 定 することができます コンマ(,)を 用 いて 複 数 の 値 を 指 定 することができます 基 本 値 は all で 省 略 する 場 合 は media="all"です targetie="ie 6 IE 7 IE8..." IE 条 件 付 き 注 釈 を 使 用 して IE ブラウザ 範 囲 内 で CSS/JS 適 用 ブラウザを 選 択 することができます 基 本 値 は 空 の 値 で" 適 用 しない"です index="integer" CSS/JS 参 照 宣 言 の 位 置 を 変 更 できます 値 は 正 の 整 数 と 負 の 整 数 を 使 用 できます 正 の 整 数 は 現 在 の 位 置 より 後 で 宣 言 され 負 の 整 数 は 現 在 の 位 置 より 先 に 宣 言 されます 基 本 値 は 空 の 値 で 宣 言 順 を 変 更 せず 基 本 値 としておく 場 合 他 の CSS ファイルより 遅 く 宣 言 されます type="head body" JS 参 照 宣 言 位 置 をドキュメントの<head> 要 素 とするか <body> 要 素 とするかを 決 定 でき ます 基 本 値 は head で 省 略 する 場 合 JS ファイルはドキュメント<head> 要 素 に 含 まれます <load /> 文 法 は XE core より 使 用 可 能 です <body> 要 素 から JS ファイルを 呼 び 出 すと <body> 要 素 の 終 了 直 前 に JS ファイル 参 照 が 宣 言 されます 結 果 コードは 下 記 の 通 りです <body>... <script type="text/javascript" src="xe.js"></script> </body> IE 条 件 付 き 注 釈 の 使 用 <load target= xe.js" targetie="ie 6" /> targetie 属 性 を 使 用 すると JS ファイルを IE の 特 定 バージョンでのみ 解 釈 できるよう 条 件 付 き 注 釈 で 表 示 します <load /> 要 素 と targetie 属 性 は XE core より 使 用 可 能 です 結 果 コードは 下 記 の 通 りです <!--[if IE 6]> <script type="text/javascript" src="xe.js"></script> <![endif]--> このコードは すべてのブラウザで 注 釈 処 理 しますが IE 6 ブラウザは 注 釈 で 処 理 せずに 解 釈 します JS ファイル 参 照 宣 言 順 の 変 更 <load target= xe.js" index="-1" /> index 属 性 を 使 用 すると JS ファイルの 宣 言 順 序 を 変 更 することができます <load /> 要 素 と index 属 性 は XE core より 使 用 できます 32 XE スキン 製 作 マニュアル

33 index 属 性 の 値 は 正 の 整 数 または 負 の 整 数 を 使 用 できます 負 の 整 数 を 使 用 するとより 速 く 宣 言 し 正 の 整 数 を 使 用 するとより 遅 く 宣 言 します index="-1" 値 を 指 定 すると 他 の CSS ファイルより 一 行 速 い 位 置 から 宣 言 されます XML JS フィルターの 適 用 XML JS フィルターは XML 形 式 で 入 力 項 目 を 定 義 しておき フォーム 転 送 の 際 に 自 動 的 に 有 効 性 チェックを 行 う 機 能 です 有 効 性 チェックは XML ベースで 自 動 変 換 された JavaScript が 行 うため ユーザーは 複 雑 な JavaScript を 作 成 する 必 要 がありません XML JS フィルターは 有 効 性 チェックを 通 ったフォームデータをどのようなモジュール のどのようなコマンドで 送 るかを 決 める 機 能 もサポートします XML JS フィルターを 適 用 する 方 法 は CSS JS ファイルを 参 照 する 文 法 と 同 様 です <!--%import( xe.xml")--> このように XML JS フィルターを 呼 び 出 すと XML ドキュメントは JS ドキュメントにコンパイルされ ソースコードで 表 示 されます XE core 以 前 では コンパイルされた JS ファイルを 無 条 件 で<head> 要 素 に 含 めます 表 示 結 果 は 下 記 の 通 りです <head> <script type="text/javascript" src="xe.js"></script> </head> XE core 以 降 では コンパイルされた JS ファイルを<body> 要 素 の 終 了 直 前 に 含 めます <!--%import( xe.xml")--> または <load target= xe.xml" /> 表 示 結 果 は 下 記 の 通 りです <body>... <script type="text/javascript" src="xe.js"></script> </body> <head> 要 素 領 域 に 表 示 されず 無 条 件 で<body> 要 素 の 終 了 直 前 に 表 示 されるという 点 で XE core 未 満 とは 異 なります ウィジェットを 挿 入 する ウィジェットは XE core またはモジュールに 含 まれた 情 報 をユーザーにとって 意 味 のあるかたちに 加 工 して 表 示 す るインターフェースの 役 割 をします Web サイトの 初 期 画 面 に 最 新 の 記 事 を 表 示 するウィジェットとログインフォーム を 表 示 するウィジェットが XE core に 含 まれています ウィジェットは 複 雑 なプログラムロジックが 分 からなくても ス キン 製 作 者 の 希 望 する 機 能 を 実 装 しやすくサポートします スキン 製 作 者 は テンプレートコードを 一 行 作 成 するだけで 希 望 する 機 能 を 実 装 することができます ウィジェットを 挿 入 するためのテンプレートコードは <img /> 要 素 に widget という 属 性 を 含 めています <img /> 要 素 は HTML 標 準 でもありますが widget という 属 性 を 含 めると XE テンプレート 文 法 に 解 釈 されサーバーで 標 準 HTML に 変 換 さ れます 下 記 にて ログインフォームを 表 示 するウィジェット 挿 入 コードを 示 します <img widget="login_info" skin="xe_official" /> ウィジェットを 挿 入 するためのコードは XE Admin ページにて サイト 設 定 > ウィジェットを 選 択 し コード 生 成 機 能 を 使 用 すると 自 動 生 成 されます 詳 細 については XE ユーザーマニュアル を 参 照 してください 33

34 XE core からの 新 しいテンプレート 文 法 ここでは XE core より 新 しく 追 加 されたテンプレート 文 法 についてのみ 述 べます XE core1.4.4 より 古 いバージ ョンを 使 用 していて XE core 以 上 にアップグレードした 場 合 には 下 記 表 を 参 照 してください 表 2-9 XE core より 追 加 されたテンプレート 文 法 追 加 されたテンプレート 文 法 <block cond=" 条 件 式 "> <p>welcome XE!</p> </block> <p cond=" 条 件 式 "> </p> Welcome XE! <p attr="value" cond=" 条 件 式 "> </p> Welcome XE! <block loop=" 変 数 名 =>$val"> <tr>...</tr> </block> <tr loop=" 変 数 名 =>$val">...</tr> <block loop=" 変 数 名 =>$key, $val"> <tr>...</tr> </block> <tr loop=" 変 数 名 =>$key,$val">...</tr> <block loop="$i=0;$i<100;$i++"> <tr>...</tr> </block> <tr loop="$i=0;$i<100;$i++">...</tr> <include target="header.html" /> <load target="xxx.xxx" /> <load target="xxx.xxx" type="body" /> <unload target="xxx.xxx" /> 説 明 条 件 式 が 真 であれば 含 まれている 内 容 を 表 示 条 件 式 が 真 であれば <p> 要 素 と 共 に 含 まれている 内 容 を 表 示 <p> 要 素 は 無 条 件 で 表 示 するが 条 件 式 が 真 であれば attr="value" 属 性 と 値 を 共 に 表 示 $key 値 なしで<tr>...</tr> 繰 り 返 し $key 値 なしで<tr>...</tr> 繰 り 返 し $keyatai 値 を 含 み<tr>...</tr> 繰 り 返 し $key 値 を 含 み<tr>...</tr> 繰 り 返 し 初 期 値 0 から 開 始 し<tr>...</tr> 100 回 繰 り 返 し 初 期 値 0 から 開 始 し<tr>...</tr> 100 回 繰 り 返 し header.html を 含 む(include) CSS/JS/SML JS フィルターファイルを<head>に 含 む JS/XML JS フィルターファイルをドキュメント<body>に 含 む パスの 一 致 する CSS/JS/XML JS フィルターファイルを 除 く 34 XE スキン 製 作 マニュアル

35 3. レイアウトスキンをつくる この 章 では 例 題 レイアウトスキンを 使 用 してレイアウトスキンを 製 作 し 適 用 する 方 法 について 説 明 します

36 3.1 レイアウトスキンとは XE は レイアウトとコンテンツが 分 離 されています レイアウトは XE コンテンツを 収 める 構 造 体 または 骨 組 みで す 一 般 の Web サイトは ヘッダー グローバルナビゲーション ローカルナビゲーション コンテンツ フッターで 構 成 されていますが このような 要 素 の 画 面 配 置 を 決 定 するのが このレイアウトスキンの 役 割 です 掲 示 板 やウィキ のような 特 定 のコンテンツをユーザーに 表 示 する 際 に 掲 示 板 やウィキ 以 外 のコンテンツを 表 示 する 必 要 がないなら レイアウトスキンは 使 用 しなくても 構 いません しかし 掲 示 板 やウィキのようなコンテンツ 以 外 に Web サイトを 一 貫 性 をもって 探 索 できるよう ヘッダー グローバルナビゲーション ローカルナビゲーション フッターエリアなどを 配 置 すべきならレイアウトスキンが 必 ず 必 要 となります 下 記 図 にて レイアウトスキンを 使 用 した 一 般 的 な 画 面 構 成 をあらわします 図 3-1 レイアウトスキンを 使 用 した 一 般 的 な 画 面 構 成 XE core は ひとつ 以 上 のレイアウトスキンを 含 めています 基 本 的 に 含 まれているレイアウトスキンは XE core イ ンストール 先 の/layouts/にあります スキン 製 作 者 は XE core に 含 まれている 基 本 レイアウトスキンを 使 用 したり 新 しく 製 作 することもできます 36 XE スキン 製 作 マニュアル

37 3.2 例 題 レイアウトスキンのダウンロード 新 しいレイアウトスキンを 製 作 するには レイアウトスキンの 構 造 に 合 わせてディレクトリとファイルを 作 成 しなければ なりません 本 書 では スキン 製 作 者 の 便 宜 のために 例 題 レイアウトスキンを 提 供 します 例 題 レイアウトスキンで は レイアウトスキンを 製 作 する 際 に 必 要 なディレクトリ 構 造 とファイルを 備 えており 例 題 レイアウトスキンを 使 って 思 い 通 りのスキンに 便 利 に 修 正 することができます 例 題 レイアウトスキンのダウンロード 先 は 下 記 の 通 りです 37

38 3.3 レイアウトスキンの 位 置 とディレクトリ 構 造 レイアウトスキンの 位 置 確 認 /xe/というユーザー 定 義 ディレクトリに XE core をインストールした 場 合 レイアウトスキンのディレクトリは 下 記 の 場 所 になります /xe/layouts/ ダウンロードした 例 題 レイアウトスキン(user_layout)を 解 凍 し /xe/layouts/ 配 下 にコピーします /xe/layouts/user_layout/ 参 考 レイアウトスキンをローカル PC で 修 正 する 際 には 修 正 内 容 を Web サイトのレイアウトスキンディレクトリに 反 映 しなければ なりません レイアウトスキンのディレクトリ 構 造 レイアウトスキンを 製 作 する 際 に 必 ず 遵 守 すべきディレクトリ 構 造 があります この 構 造 を 維 持 しなければ レイアウ トスキンを 製 作 できません 例 題 レイアウトスキン(user_layout)の 構 造 を 以 下 に 示 します 図 3-2 レイアウトスキンのディレクトリ 構 造 info.xml info.xml には レイアウトスキンの 基 本 情 報 が 含 まれます 管 理 者 画 面 に 表 示 する 説 明 とオプションを 提 供 します info.xml は 必 ず 下 記 のパスに 存 在 していなければなりません なお conf ディレクトリ 名 と info.xml ファイル 名 は 変 更 できません /xe/layouts/user_layout/conf/info.xml layout.html layout.html には レイアウトスキンの HTML と CSS JS 参 照 情 報 が 含 まれます layout.html ファイル 名 は 変 更 で きません /xe/layouts/user_layout/layout.html thumbnail.png thumbnail.png は レイアウトプレビュー 用 のイメージファイルです 横 幅 180 ピクセル 高 さ 120 ピクセル 以 上 で 製 作 しておくと 管 理 者 画 面 にプレビューイメージとして 表 示 されます thumbnail.png というファイル 名 は 変 更 できませ ん 38 XE スキン 製 作 マニュアル

39 /xe/layouts/user_layout/thumbnail.png CSS JS IMG CSS JS IMG ファイルはレイアウトスキンの 必 須 要 素 ではありません 必 要 によって 作 成 して 使 用 します conf ディ レクトリを 除 き どの 場 所 にあっても 構 いません 管 理 すべきファイルの 数 が 多 くなったら /user_layout/ディレクトリ 配 下 に css js img と 同 じ 名 前 のディレクトリを 追 加 作 成 して 管 理 することができます 39

40 3.4 レイアウトスキン 情 報 作 成 レイアウトスキン 情 報 は info.xml にて 作 成 します info.xml の 基 本 構 造 について 以 下 に 示 します <?xml version="1.0" encoding="utf-8"?> <layout version="0.2"> <title xml:lang="ko">테스트 레이아웃</title> <title xml:lang="en">test Layout</title> <title xml:lang="jp">テストのレイアウト</title> <description xml:lang="ko">디자인이 없는 테스트 레이아웃입니다. 새 스킨을 만들 때 이 레이아웃 사본을 사용하면 좋습니다.</description> <description xml:lang="en">is not designed for testing the layout. When you create a new skin, we recommend you copy the layout.</description> <description xml:lang="jp">デザインのないテストレイアウトです 新 しいスキンを 作 成 するときに レイアウトのコピーを 使 用 し てください </description> <version>1.0</version> <date> </date> <author _address="user@user.com" link=" <name xml:lang="ko">제작자 이름</name> <name xml:lang="en">maker Name</name> <name xml:lang="jp"> 製 作 者 名 </name> </author> <menus> <menu name="main_menu" maxdepth="3" default="true"> <title xml:lang="ko">전역 메뉴</title> <title xml:lang="en">global Menu</title> <title xml:lang="jp">グローバルメニュー</title> </menu> </menus> </layout> 上 記 コードの 説 明 を 以 下 に 示 します コード <?xml version="1.0" encoding="utf- 8"?> <layout version="0.2"> <title xml:lang="ko">...</title> <description xml:lang="ko">...</description> <version>...</version> <date>yyyy-mm-dd</date> <author _address="..." link="..."> <name xml:lang="ko">...</name> </author> <menus> <menu name="main_menu" maxdepth="2" default="true"> <title xml:lang="ko">...</title> </menu> 説 明 XML ドキュメント 形 式 の 宣 言 レイアウト 情 報 についてのドキュメントであることを 宣 言 version には XE core でサポートするバージョンを 表 示 しなければなりま せん XE core 基 準 での 対 応 レイアウトバージョンは 0.2 です レイアウト 名 レイアウト 説 明 レイアウトスキンのバージョン レイアウトスキンの 製 作 日 年 - 月 - 日 (YYYY-MM-DD) 形 式 で 作 成 します レイアウトスキン 製 作 者 情 報 メールアドレス Web サイトアドレ ス 製 作 者 名 を 作 成 します XE Admin ページのコントロールパネルにて 作 成 したメニューと つなげることができます <menus>...</menus> 要 素 内 に 2 つ 以 上 の<menu>...</menu>を 作 成 することができます 40 XE スキン 製 作 マニュアル

41 コード </menus> 説 明 このほかにも info.xml にはユーザー 定 義 が 可 能 ないろんなタイプの 変 数 を <extra_vars> 要 素 内 に 追 加 的 に 含 める ことができます 下 記 は スキン 製 作 者 が select image text textarea タイプのデータ 入 力 を 受 け 変 数 として 使 用 できるよう 拡 張 した 例 題 です <?xml version="1.0" encoding="utf-8"?> <layout version="0.2">... <extra_vars> <var name="colorset" type="select"> <title xml:lang="ko">カラーセット</title> <description xml:lang="ko"> 希 望 するカラーセットを 選 択 してください </description> <options value="black"> <title xml:lang="ko">black ( 基 本 )</title> </options> <options value="white"> <title xml:lang="ko">white</title> </options> </var> <var name="logo_image" type="image"> <title xml:lang="ko">ロゴイメージ</title> <description xml:lang="ko">ページ 上 部 に 表 示 するロゴイメージを 入 力 してください </description> </var> <var name="logo_url" type="text"> <title xml:lang="ko">ロゴイメージリンク</title> <description xml:lang="ko">ロゴイメージをクリックした 際 に 移 動 する URL を 入 力 してください </description> </var> <var name="title_description" type="textarea"> <title xml:lang="ko"> 本 文 上 部 内 容 </title> <description xml:lang="ko"> 本 文 上 部 に 表 示 されるエリアの 内 容 を 入 力 してください(HTML 使 用 可 ) </description> </var> </extra_vars>... </layout> 上 記 コードの 説 明 を 以 下 に 示 します コード 説 明 <extra_vars>...</extra_vars> 拡 張 変 数 コンテナ <var name="colorset" type="select">...</var> <var name="logo_image" type="image">...</var> <var name="logo_url" type="text">...</var> <var name="title_description" type="textarea">...</var> select タイプの 拡 張 変 数 スキン 製 作 者 は {$layout_info->colorset} 形 式 で 表 示 可 Image タイプの 拡 張 変 数 スキン 製 作 者 は {$layout_info->image} 形 式 で 表 示 可 text タイプの 拡 張 変 数 スキン 製 作 者 は {$layout_info->logo_url} 形 式 で 表 示 可 textarea タイプの 拡 張 変 数 スキン 製 作 者 は {$layout_info->title_description} 形 式 で 表 示 可 info.xml に 追 加 した 拡 張 変 数 は レイアウト 生 成 以 降 レイアウト 設 定 ページに 表 示 されます ウェブサイト 管 理 者 が 拡 張 変 数 になんらかの 値 を 入 力 すると その 結 果 をスキンに 表 示 することができます 41

42 3.5 レイアウト 作 成 ユーザー 定 義 レイアウトの 確 認 info.xml を 正 しく 作 成 したかどうかを 確 認 する 方 法 について 説 明 します 1. XE Admin ページにて 拡 張 機 能 > Installed Layout を 選 択 します 2. テストのレイアウトが 正 常 に 表 示 されていることを 確 認 します メニュー 数 は info.xml にて<menu> 要 素 を1つしか 含 めていないため 1 で 表 示 されます <menu> 要 素 を 複 数 作 成 すると メニュー 数 は <menu> 要 素 の 数 のぶんだけ 増 えます レイアウトコピーの 作 成 Installed Layout である テストのレイアウト にて レイアウトの コピー を 生 成 すると 使 用 可 能 な 状 態 になります ユーザーは user_layout というコピーを 複 数 繰 り 返 し 作 成 することもできます レイアウトコピーを 作 成 する 方 法 について 説 明 します 1. テストのレイアウトページを 開 き 挿 入 をクリックします 2. タイトルにコピーの 名 前 を 入 力 し 挿 入 をクリックします タイトルは user_layout の 別 のコピーと 区 別 できるよう に 入 力 しなければなりません この 例 題 では テストのレイアウトのコピー 名 として カスタムレイアウト_のコピ ー1 を 入 力 しました 42 XE スキン 製 作 マニュアル

43 3. テストのレイアウトページにて 下 記 図 のように カスタムレイアウト_のコピー1 が 作 成 されていることを 確 認 しま す これで このレイアウトを 使 用 するモジュールの 設 定 画 面 にて カスタムレイアウト_のコピー1 を 選 択 できるようにな りました 参 考 layout.html を 作 成 しない 状 態 で このレイアウトを 適 用 したモジュールページへアクセスすると"Err : "./layouts/user_layout/layout.html" template file does not exist."というエラーメッセージが 画 面 に 表 示 されます 43

44 3.6 レイアウトスキン 作 成 レイアウトスキンの 内 容 は layout.html にて 作 成 します XE は DOCTYPE html head body 要 素 を XE core で 自 動 表 示 するという 特 徴 があります したがって スキン 製 作 者 は この 要 素 をスキンファイルで 作 成 する 必 要 がありません スキンファイルにこの 要 素 を 含 めると 重 畳 文 法 として 処 理 され HTML エラーが 発 生 したり 画 面 が 非 正 常 表 示 されたりする 現 象 が 発 生 します レイアウトスキンを 適 用 した Web ページの 基 本 構 造 を 以 下 に 示 します <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html lang=".." xml:lang=".." xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <! ここに 含 む 内 容 は layout.html ドキュメント または 管 理 者 モードで 作 成 される --> </head> <body> <!-- layout.html ドキュメントのコードと 内 容 は ここに 表 示 される --> </body> </html> layout.html ページにて 作 成 する HTML コードと 内 容 は すべて<body> 要 素 の 内 側 に HTML コードとして 表 示 されま す したがって スキン 製 作 者 は <body> 要 素 内 側 で 使 用 できる 有 効 な HTML 文 法 で layout.html を 作 成 しなければ なりません <head> 要 素 に 含 むべき 内 容 は XE テンプレート 文 法 を 使 用 して<body> 要 素 内 部 で 作 成 できます レイアウトスキンのドキュメント 構 造 例 題 レイアウトスキンは header gnb(global navigation bar) body lnb(local navigation bar) content footer で 構 成 されています したがって layout.html のドキュメント 構 造 は 下 記 のようになります <div class="user_layout"> <div class="header"> <h1>site Logo</h1> <hr /> <div class="gnb">.gnb <hr /> <div class="body"> <div class="lnb">.lnb <hr /> <div class="content">.content <hr /> <div class="footer">.footer HTML で 作 成 された<div> 要 素 にクラス 名 を 指 定 した 理 由 は CSS ファイルで HTML 要 素 を 選 択 し 希 望 する 配 置 に 実 装 できるようにするためです {$content} 変 数 で 本 文 を 表 示 する layout.html は まだユーザー 画 面 では 確 認 できません まだこのレイアウトを 選 択 したモジュールがないからです レイアウトスキンページは 自 らは 存 在 できず 特 定 のモジュールで 使 用 されたときに 該 当 モジュールのページにア クセスして 確 認 することができます レイアウトスキンは モジュールに 依 存 します 例 題 レイアウトスキンをユーザー 画 面 で 確 認 するには 特 定 モジュール(ページ 掲 示 板 ウィキなど)を1つ 作 成 し このレイアウトスキンとつなげなければなりません その 前 にスキン 製 作 者 は レイアウトスキンとつながっているモ ジュール(ページ 掲 示 板 ウィキなど)にて レイアウトスキンを 画 面 に 正 常 表 示 できるよう 内 容 変 数 を 作 成 しな ければなりません 44 XE スキン 製 作 マニュアル

45 例 題 レイアウトスキンでは 下 記 のようにレイアウトの 本 文 エリアに{$content} 変 数 を 用 いて 内 容 変 数 を 作 成 しまし た <div class="user_layout"> <div class="header"> <h1>site Logo</h1> <hr /> <div class="gnb">.gnb <hr /> <div class="body"> <div class="lnb">.lnb <hr /> <div class="content">.content{$content} <hr /> <div class="footer">.footer {$content}は レイアウトスキンで 使 用 できる 最 も 重 要 な 変 数 で 現 在 のレイアウトスキンがどの 種 類 のモジュールと つながっていても つながっているモジュールの 内 容 を 本 文 エリアに 表 示 します つながるモジュールによって 静 的 なページになることも 動 的 な 掲 示 板 やウィキページになることもあります XE において モジュールとレイアウトの 関 係 は レイアウトスキンにいろんな 種 類 のモジュールを 搭 載 する のでは なく 様 々なモジュールに レイアウトスキンをつなげる という 意 味 合 いの 関 係 です XE で 作 成 したモジュールペ ージには 固 有 の URL がありますが レイアウトスキンには URL がなく モジュール につながっている 状 況 でしか 表 示 されないということを 記 憶 しておいてください グローバルメニューを 表 示 する <div class="gnb">.gnb 要 素 内 部 にレイアウトとつながっているグローバルメニューを 表 示 することができます XE Admin ページにて レイアウトとメニューをつなげると レイアウトは 常 につながっているメニューを 画 面 に 表 示 しますが このときつながっているメニューを 表 示 できるよう レイアウトスキンで 事 前 にコードを 作 成 しておかなけれ ばなりません 例 題 レイアウトスキンでは 下 記 のように つながっているメニューを 画 面 に 表 示 するコードを 作 成 しました メニュー を 最 大 で 2 階 層 まで 表 示 します <div class="gnb">.gnb <ul> <li loop="$global_menu->list=>$key1,$val1" class="active" cond="$val1['selected']"><a href="{$val1['href']}" target="_blank" cond="$val1['open_window']=='y'">{$val1['link']}</a> <ul cond="$val1['list']"> <li loop="$val1['list']=>$key2,$val2" class="active" cond="$val2['selected']"><a href="{$val2['href']}" target="_blank" cond="$val2['open_window']=='y'">{$val2['link']}</a></li> </ul> </li> </ul> 上 記 コードで 使 用 されているテンプレート 文 法 と 変 数 は 下 記 の 通 りです テンプレート 文 法 / 変 数 説 明 構 文 loop="$global_menu->list=>$key1,$val1" つながっているメニューリストがある 場 合 表 示 繰 り 返 し 文 cond="$val1['list']" つながっているメニューが 下 位 リストを 含 んでいる 条 件 文 45

46 テンプレート 文 法 / 変 数 説 明 構 文 場 合 表 示 loop="$val1['list']=>$key2,$val2" つながっているメニューが 下 位 リストを 含 んでいる 場 合 表 示 繰 り 返 し 文 class="active" cond="$val1['selected'] class="active" cond="$val2['selected']" つながっているメニュー またはつながっているメ 条 件 文 ニューの 下 位 リストと 現 在 ページが 一 致 した 場 合 <li> 要 素 に class="active" 属 性 を 追 加 target="_blank" cond="$val1['open_window'] つながっているメニューのリンクオプションが 新 し 条 件 文 =='Y'" いウィンドウで 表 示 であれば target="_blank" 表 示 target="_blank" cond="$val2['open_window'] =='Y'" {$val1['href']} {$val2['href']} {$val1['link']} {$val2['link']} つながっているメニューリンクの URL つながっているメニューリンクのテキスト 変 数 変 数 ローカルメニューを 表 示 する <div class="lnb">.lnb 要 素 内 にレイアウトとつながっているローカルメニューを 表 示 できます ローカルメニュー を 表 示 する 方 法 は グローバルメニューの 表 示 方 法 とほぼ 同 様 です グローバルメニュー 表 示 とローカルメニュー 表 示 の 違 いは ローカルメニューが 1 階 層 メニューを 表 示 しないという 点 です グローバルメニューが<div class="gnb">.gnbエリアにて すでに 1~2 階 層 を 表 示 しているため ローカル メニューは 現 在 ページを 基 準 に 関 連 している 2~3 階 層 メニューを 表 示 します ローカルメニューは メニューにつながっているページがあるときのみ 表 示 されるため メニューを 作 成 するときに 実 際 に 接 続 可 能 なページの URL を 入 力 しなければなりません 例 題 レイアウトスキンでは 下 記 のようにローカルメニュー 表 示 コードを 作 成 しました <div class="lnb">.lnb <h2 loop="$global_menu->list=>$key1,$val1" cond="$val1['selected']"><a href="{$val1['href']}" target="_blank" cond="$val1['open_window']=='y'">{$val1['link']}</a></h2> <ul loop="$global_menu->list=>$key1,$val1" cond="$val1['selected'] && $val1['list']"> <li loop="$val1['list']=>$key2,$val2" class="active" cond="$val2['selected']"><a href="{$val2['href']}" target="_blank" cond="$val2['open_window']=='y'">{$val2['link']}</a> <ul cond="$val2['list']"> <li loop="$val2['list']=>$key3,$val3" class="active" cond="$val3['selected']"><a href="{$val3['href']}" target="_blank" cond="$val3['open_window']=='y'">{$val3['link']}</a> </ul> </li> </ul> </li> 上 記 コードで 使 用 されているテンプレート 文 法 と 変 数 は 下 記 の 通 りです テンプレート 文 法 / 変 数 説 明 構 文 loop="$global_menu->list=>$key1,$val1" つながっているメニューリストがある 場 合 表 示 繰 り 返 し 文 cond="$val1['selected']" つながっているメニューと 現 在 ページ が 一 致 した 場 合 内 容 を 表 示 条 件 文 46 XE スキン 製 作 マニュアル

47 テンプレート 文 法 / 変 数 説 明 構 文 cond="$val1['selected'] && $val1['list']" loop="$val1['list']=>$key2,$val2" loop="$val2['list']=>$key3,$val3" cond="$val2['list']" class="active" cond="$val2['selected']" class="active" cond="$val3['selected']" つながっているメニューと 現 在 ページ が 一 致 し 同 時 に 下 位 リストを 含 んで いる 場 合 表 示 つながっているメニューが 下 位 リスト を 含 んでいる 場 合 表 示 つながっているメニューが 下 位 リスト を 含 んでいる 場 合 表 示 つながっているメニュー またはつな がっているメニュー 下 位 リストと 現 在 ページが 一 致 した 場 合 <li> 要 素 に class="active" 属 性 を 追 加 繰 り 返 し 文 条 件 文 条 件 文 target="_blank" cond="$val1['open_window']=='y'" target="_blank" cond="$val2['open_window']=='y'" target="_blank" cond="$val3['open_window']=='y'" {$val1['href']} {$val2['href']} {$val3['href']} {$val1['link']} {$val2['link']} {$val3['link']} つながっているメニューリンクオプショ ンが 新 しいウィンドウで 表 示 であれ ば target="_blank" 表 示 条 件 文 つながっているメニューリンクの URL 変 数 つながっているメニューリンクのテキ スト 変 数 統 合 検 索 フォームを 表 示 する Web サイトの 統 合 検 索 は 検 索 の 対 象 を 特 定 のモジュールのみに 限 らず 作 成 されたすべてのモジュールを 検 索 結 果 に 含 める 機 能 です 統 合 検 索 機 能 を 使 用 するには 統 合 検 索 フォームを 提 供 しなければなりませんが 統 合 検 索 フォームは 通 常 レイアウトスキンで 提 供 します 統 合 検 索 フォームコードは XE Admin ページの 拡 張 機 能 > Installed Module > 統 合 検 索 にて 提 供 しています 例 題 レイアウトスキンでは 下 記 のように<div class="header">... 要 素 に 統 合 検 索 フォームコード<form class="search">...</form>を 追 加 しました <div class="user_layout"> <div class="header"> <h1>site Logo</h1> <form action="{geturl()}" method="get" class="search"> <input type="hidden" name="vid" value="{$vid}" /> <input type="hidden" name="mid" value="{$mid}" /> <input type="hidden" name="act" value="is" /> <input type="text" name="is_keyword" value="{$is_keyword}" title="{$lang->cmd_search}" class="itext" /> <input type="submit" value="{$lang->cmd_search}" class="btn" /> </form> <hr /> <div class="gnb">.gnb... <hr /> <div class="body"> <div class="lnb">.lnb... <hr /> 47

48 <div class="content">{$content} <hr /> <div class="footer">.footer 上 記 コードで 使 用 されている 変 数 は 下 記 の 通 りです 変 数 {geturl()} {$vid} {$mid} {$is_keyword} {$lang->cmd_search} 説 明 ユーザーの 検 索 語 を 転 送 するページの URL 仮 想 サイト ID モジュール ID ユーザーが 入 力 した 統 合 検 索 キーワード 検 索 結 果 ページにてユーザーが 入 力 したキ ーワードを 再 表 示 します 言 語 変 数 検 索 という 単 語 が 変 数 に 割 り 当 てられています ログインフォームを 表 示 する 運 営 する Web サイトが 会 員 制 である 場 合 会 員 の 入 会 を 受 け 付 け 会 員 がログインできなければなりません XE core では すでに 入 会 ページとログインフォームが 用 意 されています ログインフォームをレイアウトスキンに 埋 め 込 むには ログインフォームを 表 示 したい 位 置 にログインフォーム 表 示 コードを 追 加 します 例 題 レイアウトスキンでは 下 記 のように<div class="lnb">... 内 部 のエリア 上 部 にログインウィジェットを 表 示 するよう 作 成 しました... <div class="lnb">.lnb <div class="account"> <img widget="login_info" skin="xe_official" /> <h2>...</h2> <ul>...</ul> XE スキン 製 作 マニュアル

49 3.7 サイトマップ 作 成 サイトマップとは サイトのメニューのことです XE Admin ページにてサイトマップを 作 成 し レイアウトのコピーとつ なげると レイアウトを 表 示 するときにサイトマップをメニューとして 表 示 することができます サイトマップを 作 成 する 方 法 について 説 明 します 1. XE Admin ページにて サイト > サイトマップを 選 択 します 2. サイトマップページにて 新 しいサイトマップ 追 加 をクリックします サイトマップでは 複 数 のセットを 追 加 することはできますが レイアウトとつなげる 際 に 他 のサイトマップと 区 別 できるようにタイトルを 必 ず 入 力 しなければなりません 3. タイトルに user_menu と 入 力 し 保 存 をクリックします 4. user_menu にてメニュー 追 加 をクリックし ウェブサイトのグローバルメニュー 構 造 を 完 成 させます 詳 細 なメニュ ー 作 成 方 法 については XE ユーザーマニュアル を 参 照 してください 49

50 5. user_menuという 名 前 のサイトマップが 生 成 されたら 保 存 をクリックします まだ user_menu というメニューをユーザー 画 面 で 確 認 することはできません レイアウトにて メニューを 参 照 し ない 限 りユーザー 画 面 には 表 示 されません 参 考 メニューを 作 成 する 際 に モジュール または URL 項 目 に 有 効 なモジュール ID または 接 続 URL を 指 定 しなければなりませ ん モジュール ID または 接 続 URL が 有 効 でないとレイアウトにメニューが 正 常 に 表 示 されないことがあります 50 XE スキン 製 作 マニュアル

51 3.8 レイアウトにサイトマップをつなげる user_menu というサイトマップが 作 成 されたため これでレイアウトからこのサイトマップを 参 照 することができるよう になりました レイアウトに user_menu をつなげる 方 法 について 説 明 します 1. XE Admin ページにて 拡 張 機 能 > Installed Layout を 選 択 します 2. テストのレイアウト 項 目 を 開 き カスタムレイアウト_のコピー1 のレイアウト 設 定 をクリックします 3. メニュー > グローバルメニュー(global menu)にて user_menu を 選 択 しレイアウトの 一 括 適 用 を 選 択 後 に 保 存 をクリックします レイアウトの 一 括 適 用 を 選 択 すると メニューでつながっているすべてのモジュールのレイアウトが 現 在 のレイア ウトに 一 括 変 更 されます 以 後 user_menu は 常 にこのレイアウトで 表 示 されます 51

52 3.9 ページモジュールにレイアウトをつなげる ページモジュールにレイアウトスキンを 適 用 して 例 題 レイアウトスキンの 内 容 が 画 面 に 正 常 表 示 されるかどうか 確 認 してみましょう ページ 作 成 1. XE Admin ページにて サイト > サイトマップを 選 択 します 2. user_menu の 下 のメニュー 追 加 をクリックします 3. 下 記 図 のように Add Menu 画 面 が 表 示 されたら メニュー 名 (ブラウザタイトル) モジュール 選 択 モジュール ID 生 成 を 設 定 し 現 在 のウィンドウで 開 くを 選 択 します この 例 題 では 次 のように 設 定 し 保 存 をクリックします メニュー 名 :ホーム モジュール 選 択 : 書 き 込 み Page モジュール ID 生 成 :home 4. サイトマップ > user_menu にホームが 生 成 されたことを 確 認 のうえ ホームの 設 定 をクリックして Manage of page 画 面 へ 移 動 します 52 XE スキン 製 作 マニュアル

53 5. Manage of page のレイアウト 項 目 にて カスタムレイアウト_のコピー1(user_layout)を 選 択 して 保 存 をクリックしま す 53

54 レイアウトにカスタムレイアウト_のコピー1(user_layout) 項 目 が 表 示 されない 場 合 は user_layout のコピーがまだ 生 成 されていないことを 意 味 します user_layout のコピーを 生 成 する 方 法 については レイアウトコピーの 作 成 を 参 照 してください ページ 確 認 作 成 されたページにユーザー 画 面 からアクセスすると レイアウトスキンが 適 用 された 結 果 を 確 認 できます モジュ ール 名 を home としたため このページのアクセスパスは 下 記 のようになります 下 記 のパスにて example.com は ユーザーの Web サイトがインストールされているドメインアドレスを 意 味 します mode_rewrite を 使 用 する 場 合 : mode_rewrite を 使 用 しない 場 合 : home ページを 開 くと 下 記 図 のような 画 面 が 表 示 されます 図 3-3 レイアウトスキンが 適 用 されたページ ページ 本 文 には まだ 内 容 が 何 も 作 成 されていないため 表 示 する 内 容 がなく 本 文 以 外 のエリアに 作 成 されたレイ アウトコンテンツしか 見 えません Site Logo, gnb, lnb, content, footer というテキストは スキンファイルである layout.html ドキュメントで 作 成 したものです このほか レイアウトスキンに 含 まれている 統 合 検 索 フォーム グロー バルメニュー ログインフォームウィジェット ローカルメニューが 正 常 に 表 示 されていることが 確 認 できます Content エリアにはページ 本 文 を 編 集 できるボタンがありますが これは 管 理 者 だけに 公 開 される 機 能 です このボ タンが 見 えないなら 管 理 者 ログアウト 状 態 か 本 文 エリアの{$content} 変 数 の 作 成 に 間 違 いがあるということになり ます 参 考 メニューを 作 成 する 際 に モジュール または URL 項 目 に 有 効 なモジュール ID または 接 続 URL を 指 定 しない 限 りローカル メニューは 正 常 に 表 示 されません ページ 修 正 図 3-3 のような 画 面 では ページに 新 しい 内 容 を 入 力 できます ページを 修 正 する 方 法 について 説 明 します 1. レイアウトスキンが 適 用 されたページにて 画 面 右 下 にあるページ 修 正 をクリックします 2. タイトルと 本 文 の 内 容 を 追 加 し 登 録 をクリックします 54 XE スキン 製 作 マニュアル

55 追 加 した 内 容 がページに 反 映 されます 3. ユーザーに 表 示 される 結 果 画 面 は 下 記 図 の 通 りです content エリアの 右 下 に 表 示 される 設 定 ページ 修 正 は 現 在 ページモジュールに 対 する 編 集 権 限 を 持 つ 管 理 者 だけに 公 開 されます ユーザー 画 面 には 表 示 されま せん 55

56 まだレイアウトといえる 配 置 ではありません CSS コードを 作 成 して 適 切 な 配 置 を 実 装 しなければなりません 56 XE スキン 製 作 マニュアル

57 3.10 CSS 適 用 ここでは レイアウトスキンに CSS コードを 適 用 する 方 法 について 説 明 します 本 書 では CSS コードの 作 成 方 法 に ついては 述 べません スキン 製 作 者 は 製 作 意 図 に 合 わせて CSS コードを 修 正 して 使 用 します 1. 例 題 レイアウトスキンの user_layout.css ファイルでは 下 記 のように.lnb エリアと.content エリアを 左 右 のカラム 形 式 で 配 置 するよう 作 成 "utf-8"; /* Layout */ hr{ display:none;} form, fieldset{ border:0; margin:0; padding:0;}.user_layout{ width:960px; margin:0 auto;}.header{ zoom:1; background:#ddd;}.header:after{ content:""; display:block; clear:both;}.header.search{ float:right;}.gnb{ float:left;}.body{ margin:20px 0; zoom:1; background:#eee;}.body:after{ content:""; display:block; clear:both;}.lnb{ float:left; width:200px; background:#ddd;}.account{}.content{ float:right; width:740px; background:#ddd;}.footer{ background:#ddd;} 2. layout.html にて 下 記 のように user_layout.css を 参 照 するよう 宣 言 します <load target="user_layout.css" /> 詳 細 な 説 明 は CSS ファイル 参 照 を 参 照 してください 3. 下 記 のパスへアクセスし ページに CSS が 正 常 に 適 用 されたかどうかを 確 認 します 下 記 のパスにて example.com は ユーザーWeb サイトがインストールされているドメインアドレスを 意 味 します mod_rewrite を 使 用 する 場 合 : mod_rewrite を 使 用 しない 場 合 : 下 記 図 にて user_layout.css を 正 常 に 参 照 し 画 面 の 構 成 要 素 が 正 しく 表 示 された 様 子 を 示 します 57

58 図 3-4 CSS が 正 常 に 適 用 されたページ もし 作 成 したコードが 画 面 に 反 映 されていないなら CSS を 参 照 する<load />テンプレート 文 法 が 正 しいか または CSS 参 照 パス(target)が 正 しく 指 定 されているかどうか 確 認 してください 58 XE スキン 製 作 マニュアル

59 3.11 JavaScript 適 用 ここでは レイアウトスキンに JavaScript コードを 追 加 する 方 法 について 説 明 します 本 書 では jquery 実 行 コードの 作 成 方 法 については 述 べません スキン 製 作 者 は 製 作 意 図 に 合 ったコードを 作 成 し 追 加 します 1. user_layout.js にて jquery 文 法 のコードを 作 成 します // <![CDATA[ jquery(function($){ // ここに jquery コードを 作 成 します }); // ]]> 2. layout.html にて 下 記 のように user_layout.js を 参 照 するよう 宣 言 します <load target="user_layout.js" type="body" /> 詳 細 な 説 明 については JS ファイルの 参 照 を 参 照 してください 3. 下 記 のパスへアクセスし JavaScript が 正 常 に 実 行 されるかどうかを 確 認 します 下 記 のパスにて example.com は ユーザーWeb サイトがインストールされているドメインアドレスを 意 味 します mod_rewrite を 使 用 する 場 合 : mod_rewrite を 使 用 しない 場 合 : もし 作 成 されたコードが 画 面 に 反 映 されていないなら user_layout.js を 参 照 する<load />テンプレート 文 法 が 正 しい か または user_layout.js 参 照 パス(target)が 正 しく 指 定 されているかどうか 確 認 してください 参 考 XE における jquery の 基 本 的 な 使 用 方 法 については JavaScript と jquery の 使 用 を 参 照 してください jquery を 使 用 して より 多 彩 な 効 果 を 実 装 するには サイトを 参 照 してください 59

60

61 4. 掲 示 板 スキンをつくる この 章 では 例 題 掲 示 板 スキンを 使 用 して 掲 示 板 スキンを 製 作 し 適 用 する 方 法 について 説 明 します

62 4. 掲 示 板 スキンをつくる 4.1 掲 示 板 スキンとは 掲 示 板 スキンとは 掲 示 板 モジュールをユーザー 画 面 に 表 示 するインターフェースです 掲 示 板 スキンは ユーザー 画 面 を 基 準 にリスト 閲 覧 書 き 込 み 削 除 コメント コメント 削 除 トラックバック 削 除 権 限 ガイド パスワード 入 力 ページで 構 成 されます 62 XE スキン 製 作 マニュアル

63 4. 掲 示 板 スキンをつくる 4.2 掲 示 板 モジュールのインストール XE で 掲 示 板 を 製 作 するには 掲 示 板 モジュールを 別 途 インストールしなければなりません 掲 示 板 モジュールは XE Admin ページのイージーインストール 機 能 を 利 用 して もしくは 掲 示 板 モジュールのソースファイルをサーバーに アップロードしてインストールできます イージーインストール XE Admin ページにて 拡 張 機 能 > Easy Install > モジュールを 選 択 して 掲 示 板 モジュールをサーバーにダイレクト にインストールします イージーインストールで 掲 示 板 モジュールをインストールした 場 合 掲 示 板 スキンを 作 成 するには FTP を 通 じて 掲 示 板 モジュールがインストールされているディレクトリ(/modules/board/)をローカル PC にダウンロードしなければな りません 掲 示 板 モジュールのディレクトリ 構 造 は 下 記 図 にて 示 します 掲 示 板 モジュールディレクトリに skins ディレクトリが 含 まれているかどうか 確 認 します 掲 示 板 スキンは skins ディレクトリに 格 納 されます 図 4-1 掲 示 板 モジュールのディレクトリ 構 造 ソースファイルのアップロード XE 公 式 Web サイトにて 掲 示 板 モジュールのソースファイルをローカル PC にダウンロードした 後 FTP プログラム を 通 して Web サーバーの /modules/ パスにソースファイルをアップロードします たとえば /xe/というユーザー 定 義 ディレクトリに XE core をインストールした 場 合 /xe/modules/ パスにソースファイルをアップロードしなければ なりません 掲 示 板 モジュールが 正 常 にアップーロードされたら 掲 示 板 モジュールのディレクトリパスは /modules/board/ または /xe/modules/board/ になります 63

64 4. 掲 示 板 スキンをつくる 4.3 例 題 掲 示 板 スキンのダウンロード 掲 示 板 スキンを 製 作 するには 掲 示 板 スキンに 必 要 な 必 須 ファイルを 作 成 しなければなりません 本 書 では スキン 製 作 者 の 便 宜 のために 必 須 ファイルを 含 んだ 例 題 掲 示 板 スキンを 提 供 します スキン 製 作 者 は 例 題 掲 示 板 スキン を 利 用 して 思 い 通 りにスキンの 修 正 ができます 例 題 掲 示 板 スキンのダウンロード 先 は 下 記 の 通 りです 64 XE スキン 製 作 マニュアル

65 4. 掲 示 板 スキンをつくる 4.4 掲 示 板 スキンの 位 置 と 必 須 ファイル 掲 示 板 スキンの 位 置 確 認 掲 示 板 スキンディレクトリは 下 記 の 場 所 にあります /modules/board/skins/ ダウンロードした 例 題 掲 示 板 スキン(user_board)を 解 凍 して /modules/board/skins/ 配 下 にコピーします /modules/board/skins/user_board 参 考 掲 示 板 スキンをローカル PC で 修 正 する 際 には 修 正 内 容 を Web サイトの 掲 示 板 スキンディレクトリに 反 映 しなければなりま せん 掲 示 板 スキン 必 須 ファイル 掲 示 板 スキンを 製 作 するには 下 記 の 必 須 ファイルが 必 要 です 表 4-1 掲 示 板 スキン 必 須 ファイル ファイル 説 明 備 考 skin.xml 掲 示 板 スキン 情 報 ファイル 名 変 更 不 可 list.html 記 事 リスト ファイル 名 変 更 不 可 write_form.html 記 事 書 き 込 みフォーム ファイル 名 変 更 不 可 delete_form.html 記 事 削 除 フォーム ファイル 名 変 更 不 可 comment_form.html コメント 登 録 フォーム ファイル 名 変 更 不 可 delete_comment_form.html コメント 削 除 フォーム ファイル 名 変 更 不 可 delete_trackback_form.html トラックバック 削 除 フォーム ファイル 名 変 更 不 可 input_password_form.html パスワード 入 力 フォーム ファイル 名 変 更 不 可 message.html お 知 らせメッセージ ファイル 名 変 更 不 可 _header.html 掲 示 板 ヘッダー 表 示 別 ページにインクルードされる _footer.html 掲 示 板 フッター 表 示 別 ページにインクルードされる _read.html 記 事 閲 覧 ページ 表 示 別 ページにインクルードされる _comment.html コメント 表 示 別 ページにインクルードされる _trackback.html トラックバック 表 示 別 ページにインクルードされる user_board.css 掲 示 板 スキンスタイルシート 65

66 4. 掲 示 板 スキンをつくる 4.5 掲 示 板 スキン 情 報 作 成 skin.xml は 掲 示 板 スキンの 基 本 情 報 を 含 んでおり 管 理 者 画 面 に 表 示 する 説 明 とオプションを 提 供 します skin.xml の 名 前 は 変 更 できません skin.xml の 基 本 構 造 を 以 下 に 示 します <?xml version="1.0" encoding="utf-8"?> <skin version="0.2"> <title xml:lang="ko">user_board</title> <title xml:lang="en">user_board</title> <title xml:lang="jp">user_board</title> <description xml:lang="ko">게시판 스킨 제작 실습을 위한 user_board 입니다.</description> <description xml:lang="en">this is user_board for creating a board skin.</description> <description xml:lang="jp"> 掲 示 板 スキン 製 作 実 習 のための user_board です </description> <version>1.0</version> <date> </date> <author _address="user@user.com" link=" <name xml:lang="ko">제작자 이름</name> <name xml:lang="en">author Name</name> <name xml:lang="jp"> 製 作 者 名 </name> </author> <license>lgpl v2</license> <extra_vars> <var name="title" type="text"> <title xml:lang="ko">게시판 제목</title> <title xml:lang="en">board Title</title> <title xml:lang="jp"> 掲 示 板 タイトル</title> <description xml:lang="ko">작성하면 화면에 표시됨</description> <description xml:lang="en">this will be displayed on the screen as you write.</description> <description xml:lang="jp"> 作 成 すると 画 面 に 表 示 される</description> </var> <var name="comment" type="textarea"> <title xml:lang="ko">게시판 설명</title> <title xml:lang="en">board Details</title> <title xml:lang="jp"> 掲 示 板 詳 細 説 明 </title> <description xml:lang="ko">작성하면 화면에 표시됨</description> <description xml:lang="en">this will be displayed on the screen as you write.</description> <description xml:lang="jp"> 作 成 すると 画 面 に 表 示 される</description> </var> </extra_vars> </skin> 上 記 コードの 内 容 は 下 記 表 の 通 りです コード <?xml version="1.0" encoding="utf-8"?> <skin version="0.2"> <title xml:lang="ko">...</title> <description xml:lang="ko">...</description> <version>...</version> <date>yyyy-mm-dd</date> 説 明 XML ドキュメント 形 式 の 宣 言 スキン 情 報 についてのドキュメントであることを 宣 言 version には XE core でサポートするバージョンを 表 示 しなければな りません XE core 基 準 での 対 応 バージョンは 0.2 で す 掲 示 板 スキンの 名 前 掲 示 板 スキンの 説 明 掲 示 板 スキンのバージョン 掲 示 板 スキンの 製 作 日 年 - 月 - 日 (YYYY-MM-DD) 形 式 で 作 66 XE スキン 製 作 マニュアル

67 4. 掲 示 板 スキンをつくる コード <author _address="..." link="..."> <name xml:lang="ko">...</name> </author> <license>lgpl v2</license> <extra_vars>...</extra_vars> <var name="title" type="text"> <title xml:lang="ko"> 掲 示 板 タイトル </title> <description xml:lang="ko"> 作 成 すると 画 面 に 表 示 される</description> </var> 説 明 成 します 掲 示 板 スキン 製 作 者 情 報 メールアドレス Web サイトアドレ ス 製 作 者 名 を 作 成 します 掲 示 板 スキンライセンス 情 報 XE core 同 様 LGPL v2 ライセ ンスを 推 奨 します 掲 示 板 モジュールでサポートする 拡 張 変 数 を 使 用 するには タグの 内 側 に 内 容 を 追 加 します 掲 示 板 タイトルの 入 力 を 受 け 画 面 に 表 示 します <var name="title" type="textarea"> 掲 示 板 説 明 の 入 力 を 受 け 画 面 に 表 示 します <title xml:lang="ko"> 掲 示 板 の 説 明 </title> <description xml:lang="ko"> 作 成 すると 画 面 に 表 示 される</description> </var> user_board 掲 示 板 スキンの skin.xml ドキュメントが 正 常 に 作 成 されていることを 確 認 するには 掲 示 板 をひとつ 作 成 し user_board スキンを 使 用 するよう 設 定 します この 他 にも skin.xml には ユーザーが 定 義 可 能 ないろんなタイプの 変 数 を<extra_vars> 要 素 内 に 追 加 することがで きます 下 記 は スキン 製 作 者 が select image タイプのデータの 入 力 を 受 け 変 数 で 使 用 できるよう 拡 張 した 例 題 です <?xml version="1.0" encoding="utf-8"?> <layout version="0.2">... <extra_vars> <var name="colorset" type="select"> <title xml:lang="ko">カラーセット</title> <description xml:lang="ko"> 希 望 するカラーセットを 選 択 してください</description> <options value="black"> <title xml:lang="ko">black ( 基 本 )</title> </options> <options value="white"> <title xml:lang="ko">white</title> </options> </var> <var name="board_image" type="image"> <title xml:lang="ko"> 掲 示 板 ヘッダーイメージ</title> <description xml:lang="ko"> 掲 示 板 上 部 に 表 示 するイメージを 入 力 してください </description> </var> </extra_vars>... </layout> 上 記 コードで 使 用 された 拡 張 変 数 は 下 記 の 通 りです 67

68 4. 掲 示 板 スキンをつくる 変 数 <var name="colorset" type="select">...</var> <var name="board_image" type="image">...</var> 説 明 select タイプの 拡 張 変 数 {$module_info->colorset} 形 式 で 表 示 可 能 image タイプの 拡 張 変 数 {$modul_info->image} 形 式 で 表 示 可 能 skin.xml にて 追 加 された 拡 張 変 数 は XE Admin ページの 拡 張 機 能 > Installed Module > 掲 示 板 > 設 定 > スキン 管 理 ページに 表 示 されます 掲 示 板 管 理 者 が 該 当 変 数 に 値 を 入 力 すると スキンに 表 示 できます 68 XE スキン 製 作 マニュアル

69 4. 掲 示 板 スキンをつくる 4.6 掲 示 板 作 成 およびスキン 適 用 新 しい 掲 示 板 を 作 成 し スキンを 適 用 する 方 法 について 説 明 します 1. XE Admin ページにて 拡 張 機 能 > Installed Module > 掲 示 板 を 選 択 します 2. 掲 示 板 管 理 > 掲 示 板 リストページが 表 示 されたら 作 成 をクリックします 3. 下 記 のように 各 項 目 を 入 力 し 登 録 をクリックします 実 際 には もっと 多 くのオプション 項 目 がありますが 掲 示 板 を 作 成 する 際 に 必 ずしも 確 認 すべき 項 目 ではないため この 例 題 画 面 では 省 略 しています モジュール 名 : test_board ブラウザタイトル: 掲 示 板 スキン 実 習 スキン: user_board 69

70 4. 掲 示 板 スキンをつくる 4. 作 成 された test_board 掲 示 板 のスキン 管 理 をクリックし ユーザー 画 面 に 表 示 する 掲 示 板 タイトル 掲 示 板 の 詳 しい 説 明 を 入 力 して 登 録 をクリックします 掲 示 板 タイトル: XE 実 習 掲 示 板 の 詳 しい 説 明 : XE 掲 示 板 スキン 製 作 実 習 のための 掲 示 板 です 70 XE スキン 製 作 マニュアル

71 4. 掲 示 板 スキンをつくる 71

72 4. 掲 示 板 スキンをつくる 4.7 掲 示 板 ヘッダー/フッター 作 成 ヘッダー 作 成 掲 示 板 ヘッダーは ユーザーが 掲 示 板 のどのページにアクセスしても 常 に 同 じ 内 容 を 画 面 上 部 に 表 示 します 例 題 掲 示 板 スキンでは XE Admin ページで 入 力 した 掲 示 板 タイトル 掲 示 板 の 詳 しい 説 明 を 常 に 表 示 し CSS ファ イルを 参 照 するよう 下 記 のように_header.html を 作 成 しました 掲 示 板 のすべてのページにこの_header.html をイン クルードする 予 定 です <div class="user_board"> <div class="board_header" cond="$module_info->title $module_info->comment"> <h2 cond="$module_info->title"> <a href="{geturl('','mid',$mid)}">{$module_info->title}</a> </h2> <p cond="$module_info->comment">{$module_info->comment}</p> <div class="user_board"> 要 素 を 閉 じていない 点 に 留 意 してください この 要 素 の 終 了 タグは _footer.html で 作 成 し ます <div class="user_board"> 要 素 は 掲 示 板 のすべての 要 素 を 一 度 にまとめ CSS を 便 利 に 作 成 管 理 できるよ うにします 上 記 コードにて 使 用 されているテンプレート 文 法 と 変 数 は 下 記 の 通 りです テンプレート 文 法 / 変 数 cond="$module_info->title $module_info->comment" cond="$module_info->title" {$module_info->title} cond="$module_info->comment" {$module_info->comment} {geturl('','mid',$mid)} 説 明 掲 示 板 タイトル または 掲 示 板 の 詳 しい 説 明 のうち ひとつでもある 場 合 含 まれている 内 容 を 表 示 掲 示 板 タイトルがある 場 合 表 示 掲 示 板 タイトル 表 示 掲 示 板 の 詳 しい 説 明 がある 場 合 表 示 掲 示 板 の 詳 しい 説 明 表 示 掲 示 板 URL XE core より 追 加 された 新 しいテンプレート 文 法 を 使 用 しました 新 しいテンプレート 文 法 についての 詳 細 な 説 明 は XE テンプレート 文 法 を 参 照 してください フッター 作 成 掲 示 板 フッターは ユーザーが 掲 示 板 のどのページにアクセスしても 常 に 同 じ 内 容 を 画 面 下 部 に 表 示 します 例 題 掲 示 板 スキンでは _header.html で 終 了 していなかった<div class="user_board">の 終 了 タグのみを 作 成 しまし た _footer.html は _header.html と 共 に すべてのページにインクルードされます 72 XE スキン 製 作 マニュアル

73 4. 掲 示 板 スキンをつくる 4.8 リストページ 作 成 掲 示 板 にアクセスした 際 に 最 初 に 表 示 されるページは 記 事 リストを 表 示 するリストページです リストページは list.html にて 作 成 します 下 記 図 は 例 題 掲 示 板 スキンで 作 成 したリストページの 完 成 画 面 です 掲 示 板 ヘッダーで 作 成 した 通 りに XE 実 習 という 掲 示 板 タイトルと XE 掲 示 板 のスキンを 作 成 実 習 のための 一 時 的 な 掲 示 板 です という 掲 示 板 の 詳 しい 説 明 が 掲 示 板 上 部 に 常 に 表 示 されます 図 4-2 掲 示 板 リストページ 完 成 画 面 上 記 の 掲 示 板 リストページは 表 示 可 能 なすべてのカラム 項 目 を 表 示 するよう 設 定 した 状 態 です 掲 示 板 管 理 者 がリストページにどの 項 目 を 表 示 させるか 分 からないため スキンを 作 成 するときにすべての 項 目 を 表 示 するように 設 定 することを 推 奨 します list.html を 作 成 する 方 法 について 以 下 に 説 明 します _header.html _footer.html をインクルードする 例 題 掲 示 板 スキンの list.html では 下 記 のように_header.html と_footer.html をインクルードするよう 作 成 しました <include target="_header.html" /> ここに 記 事 リストを 表 示 する 予 定 です <include target="_footer.html" /> 上 記 コードにて 使 用 されたテンプレート 文 法 は 下 記 の 通 りです 73

74 4. 掲 示 板 スキンをつくる XE テンプレート 文 法 <include target="_header.html" /> <include target="_footer.html" /> 説 明 _header.html インクルード _footer.html インクルード XE core バージョンより 追 加 された 新 しいテンプレート 文 法 を 使 用 しました 新 しいテンプレート 文 法 についての 詳 細 な 説 明 は XE テンプレート 文 法 を 参 照 してください 記 事 がないときにメッセージを 表 示 する 条 件 文 を 使 用 して 記 事 がないときにメッセージを 表 示 させることができます 例 題 掲 示 板 スキンの list.html では 記 事 がないときに 登 録 された 記 事 がありません というメッセージを 表 示 するよう 下 記 のように 条 件 文 を 作 成 しま した <include target="_header.html" /> <p cond="!$document_list &&!$notice_list" class="no_document">{$lang->no_documents}</p> <include target="_footer.html" /> 上 記 コードにて 使 用 されたテンプレート 文 法 と 変 数 は 下 記 の 通 りです XE テンプレート 文 法 / 変 数 cond="!$document_list &&!$notice_list" {$lang->no_documents} 説 明 記 事 とお 知 らせリストが 両 方 ともない 場 合 表 示 登 録 された 記 事 がありません という 言 語 変 数 XE core より 追 加 された 新 しいテンプレート 文 法 を 使 用 しました 新 しいテンプレート 文 法 についての 詳 細 な 説 明 は XE テンプレート 文 法 を 参 照 してください 記 事 リストを 表 で 作 成 する 通 常 記 事 リストは 表 で 作 成 します さまざまな 条 件 文 と 変 数 を 含 める 前 に HTML を 使 用 して 下 記 のように 掲 示 板 の 骨 組 みを 完 成 させます 表 は リストヘッダー(LIST HEADER) お 知 らせ(NOTICE) リスト(LIST) 行 で 大 別 し コー ドを 見 やすくするために 注 釈 表 示 しておきます <include target="_header.html" /> <p cond="!$document_list &&!$notice_list">{$lang->no_documents}</p> <table width="100%" border="1" cellspacing="0" summary="list of Articles" id="board_list" class="board_list" cond="$document_list $notice_list"> <thead> <!-- LIST HEADER --> <tr> <th scope="col"> 番 号 </th> <th scope="col">タイトル</th> <th scope="col"> 投 稿 者 </th> <th scope="col">id</th> <th scope="col"> 名 前 </th> <th scope="col"> 日 付 </th> <th scope="col"> 最 終 更 新 日 </th> <th scope="col"> 最 新 の 記 事 </th> <th scope="col"> 閲 覧 数 </th> <th scope="col"> 推 奨 数 </th> </tr> <!-- /LIST HEADER --> </thead> <tbody> <!-- NOTICE --> <tr> <td> </td> <td> </td> <td> </td> 74 XE スキン 製 作 マニュアル

75 4. 掲 示 板 スキンをつくる <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <!-- /NOTICE --> <!-- LIST --> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <!-- /LIST --> </tbody> </table> <include target="_footer.html" /> 上 記 コードにて 使 用 されたテンプレート 文 法 と 変 数 は 下 記 の 通 りです XE テンプレート 文 法 / 変 数 cond="$document_list $notice_list" 説 明 記 事 やお 知 らせがある 場 合 表 と 共 に 含 まれている 内 容 を 表 示 XE core より 追 加 された 新 しいテンプレート 文 法 を 使 用 しました 新 しいテンプレート 文 法 についての 詳 細 な 説 明 は XE テンプレート 文 法 を 参 照 してください 記 事 リストヘッダーを 表 示 する 記 事 リストヘッダーとは 番 号 タイトル 投 稿 者 日 付 閲 覧 数 などのタイトルのセルのことです 掲 示 板 管 理 者 が どの 項 目 を 表 示 するかは 分 からないため スキン 製 作 者 は 掲 示 板 モジュールがサポートするほとんどの 内 容 を 条 件 文 で 作 成 しておくことを 推 奨 します 例 えば 掲 示 板 管 理 者 は XE Admin ページの 拡 張 機 能 > Installed Module > 掲 示 板 にて 設 定 をクリックし リスト の 設 定 を 開 いて すべての 項 目 を 表 示 するように 設 定 することができます このとき スキンがすべての 項 目 に 対 応 していないと 掲 示 板 管 理 者 はスキンに 問 題 があると 誤 解 する 恐 れがあります 75

76 4. 掲 示 板 スキンをつくる 図 4-3 掲 示 板 リスト 設 定 XE 掲 示 板 モジュールは 基 本 的 に 上 記 のように 12 種 類 の 情 報 をリスト 画 面 に 表 示 できます サムネールと 要 約 は 通 常 別 途 のカラムにせず タイトルセルに 一 緒 に 表 示 するため 記 事 リストのカラム 数 には 含 めません したがっ て すべての 項 目 を 表 示 できるよう 対 応 するには 10 種 類 の 項 目 に 対 して 条 件 文 を 作 成 しなければなりません 掲 示 板 管 理 者 が 全 項 目 表 示 を 設 定 する 場 合 合 計 10 個 のカラムが 生 成 されます 例 題 掲 示 板 スキンの list.html では 下 記 のように<thead> 要 素 の 内 部 に 10 個 の 項 目 に 対 する 条 件 文 を 作 成 しまし た... <thead> <!-- LIST HEADER --> <tr> <block loop="$list_config=>$key,$val"> <th scope="col" cond="$val->type=='no'">{$lang->no}</th> <th scope="col" class="title" cond="$val->type=='title'">{$lang->title}</th> <th scope="col" cond="$val->type=='nick_name'">{$lang->writer}</th> <th scope="col" cond="$val->type=='user_id'">{$lang->user_id}</th> <th scope="col" cond="$val->type=='user_name'">{$lang->user_name}</th> <th scope="col" cond="$val->type=='regdate'"><a href="{geturl('sort_index','regdate','order_type',$order_type)}">{$lang- >date}</a></th> <th scope="col" cond="$val->type=='last_update'"><a href="{geturl('sort_index','last_update','order_type',$order_type)}">{$lang->last_update}</a></th> <th scope="col" cond="$val->type=='last_post'"><a href="{geturl('sort_index','last_update','order_type',$order_type)}">{$lang->last_post}</a></th> <th scope="col" cond="$val->type=='readed_count'"><a href="{geturl('sort_index','readed_count','order_type',$order_type)}">{$lang->readed_count}</a></th> <th scope="col" cond="$val->type=='voted_count'"><a href="{geturl('sort_index','voted_count','order_type',$order_type)}">{$lang->voted_count}</a></th> </block> </tr> <!-- /LIST HEADER --> </thead> 76 XE スキン 製 作 マニュアル