forked from fuel/docs
/
introduction.html
304 lines (267 loc) · 15.3 KB
/
introduction.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./../../assets/css/combined.css?20190627">
<link rel="shortcut icon" href="./../../favicon.ico" />
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
var path = './../../';
</script>
<script src="./../../assets/js/combined.js?20190627"></script>
<title>Theme はじめに - クラス - FuelPHP ドキュメント</title>
</head>
<body>
<div id="container">
<header id="header">
<div class="table">
<div id="cse">
<gcse:searchbox-only newWindow="true"></gcse:searchbox-only>
</div>
<h1>
<a href="https://fuelphp.com"><img height="37px" width="147px" src="./../../assets/img/fuel.png" /></a>
<strong>Documentation</strong>
</h1>
</div>
<nav>
<div class="clear"></div>
</nav>
<a href="#" id="toc_handle">目次</a>
<div class="clear"></div>
</header>
<div id="main">
<h2>Theme クラス</h2>
<h3 id="intro">はじめに</h3>
<p>
Theme クラスはアプリケーションにテーマを提供します。
</p>
<p>
テーマはテンプレート (ビュー) とアセットをグループ化し、アクティブなテーマを切り替える事で、
あなたのアプリケーションのルック・アンド・フィールを切り替える事ができます。
</p>
<p>
モジュールやパッケージのように、テーマを複数の場所に保存する事ができます。
あなたはこれらのパスを設定ファイルに定義するか、実行時にテーマのインスタンスに追加する事ができます。
テーマは名前で識別され、テーマのフォルダ名と同じでなければいけません。
テーマが複数の場所で定義されてる場合、最初に見つかったものが使用されます。
</p>
<h3 id="info">テーマ情報</h3>
<p>
テーマ情報ファイルで、テーマの設定情報を提供することができます。
このファイルは全てのテーマの固定の名前を持っており、グローバルな設定ファイルを使用して設定する事ができます。
また、このファイルを必須にするオプションがあります。
</p>
<p>
テーマ情報ファイルの書式は、通常の設定ファイルと同じ書式で、ファイルタイプも同じものに対応しています。
テーマ情報ファイルは 'options' と呼ぶ、特別なセクションを含める事ができます。 options は、 get か set がソースコードより利用でき、
テーマのいくつかの特性、例えば使用する色や、カラースキームを選択するためのカスタムCSSファイル名を操作するのに使用する事ができます。
</p>
<p class="note">テーマ情報ファイルは、読み込み専用です。実行時に options を変更する事はできますが、変更内容を書き込み保存する事はできません。</p>
<h3 id="assets">テーマアセット</h3>
<p>
あなたのテーマはアセット (画像、 JavaScript 、 CSS ファイル) を持っているでしょう。アセットはブラウザがそれらのファイルをロードできるように
<strong>DOCROOT</strong> の中に配置する必要があります。テーマディレクトリ内にアセットを配置するように選択する事ができ、これは、
<strong>DOCROOT</strong> の中か、<strong>DOCROOT</strong> の外か、<strong>DOCROOT</strong> の中の別のフォルダ内にテーマファイルを持つ必要がある事を意味しています。
CDN を利用する場合など、ベース URL でアセットを指定する事もできます。
</p>
<p>
次のロジックが、テーマのアセットファイルの場所を決めるために利用されます:
<ul>
<li>
アセットフォルダが URL である場合、テーマ名がサフィックスとアセットのベース URL として利用されます。
</li>
<li>
テーマフォルダが <strong>DOCROOT</strong> の <u>中</u> にあり、それが <strong>assets_folder</strong> に設定した名前のフォルダを含む場合、
これがテーマのアセットの URL になります。
</li>
<li>
テーマフォルダが <strong>DOCROOT</strong> の <u>中</u> にあり、
それが <strong>assets_folder</strong> に設定した名前のフォルダを含まれていない場合、
<strong>assets_folder</strong> は、テーマの名前が追加されるまで、全てのテーマのアセットのルートと仮定されるでしょう。
</li>
<li>
テーマフォルダが <strong>DOCROOT</strong> の <u>外</u> にある場合、
<strong>assets_folder</strong> は、テーマの名前が追加されるまで、全てのテーマのアセットのルートと仮定されるでしょう。
</li>
</ul>
<p class="note">
もし標準の Asset クラスを利用したい場合、アセットフォルダは互換性のある /css 、 /img 、や /js サブフォルダ構造である必要があります。
</p>
</p>
<h3 id="layouts">テーマテンプレートかレイアウト</h3>
<p>
テーマはそのページのレイアウトを定義するビューファイルでテーマテンプレートやレイアウトと連携します。
</p>
<h3 id="partials">テーマテンプレートパーシャル</h3>
<p>
テンプレートの変数セクションは、テンプレートパーシャルを使用して定義する事ができ、ページのセクションを分割されたビューで構築します。
大規模なアプリケーションの設計では、パーシャルはよく別々のコードで作られ、 HMVC の呼び出しからアクセスされます。
</p>
<p>
パーシャルセクションの内容は、それぞれのパーシャルセクションためのエントリを持つ配列が定義されたビュー変数 $partials を介してアクセスすることができます。
あなたはパーシャルセクションの名前を利用しセクションにアクセスします。つまり、 'sidebar' と呼ばれるパーシャルセクションでは、 <strong>echo $partials['sidebar'];</strong> をページ·テンプレート内で利用します。
</p>
<h3 id="chrome">パーシャルクローム</h3>
<p>
「クローム」は UI インタフェースの設計で使用される用語であり、ウィンドウの境界のデザインとスタイリングを記述します。テーマクラスのコンテキストでは、
それはテンプレートパーシャルセクションをカプセル化するために利用することができ、これはテンプレート自体のそのセクションからの独立と部分的な出力が可能なスタイルです。
レンダリングするパーシャルがある場合にのみクロームは生成されます。
クロムテンプレートは、複数のパーシャルが含まれている可能性があるパーシャルセクションをカプセル化します。
</p>
<p>
例えば、あなたが、一部は開閉することができ、そのいくつかは移動させることができ、そしていくつかは固定されているウインドウがある
UI を持っている場合、あなたは、ウィンドウを表すテンプレートの各セクションに割り当てられた異なるクロムテンプレートを使用することができます。
各クロムテンプレートは HTML と目的の機能を達成するための JavaScript コードが含まれています。
アプリケーションのコードから、単に正しいクロムテンプレートを割り当てることでウィンドウの動作を制御することができます。
これは CMS 型のアプリケーションにおいて UI の動作をユーザーが制御できることから特に役に立ちます。
</p>
<p>サンプル:</p>
<pre class="php"><code><?php
class Homepage extends \Controller
{
/**
* テーマテンプレートをロードし、ページタイトルとメニュー類をセットします
*/
public function before()
{
// テーマテンプレートをロード
$this->theme = \Theme::instance();
// ページテンプレートをセット
$this->theme->set_template('layouts/homepage');
// ページタイトルをセット (set_template() でも同じようにチェインできます)
$this->theme->get_template()->set('title', 'My homepage');
// ホームページナビゲーションメニューをセット
$this->theme->set_partial('navbar', 'homepage/navbar');
// 角丸のボーダーのサイドバーセクションを持つクロームを定義
$this->theme->set_chrome('sidebar', 'chrome/borders/rounded', 'partial');
// ホームページのサイドバーのコンテンツのパーシャルをセット
$this->theme->set_partial('sidebar', 'homepage/widgets/login');
$this->theme->set_partial('sidebar', 'homepage/widgets/news')->set('news', Model_News::latest(5));
// ログインユーザのリストを取得するためにモデルを呼び出し、ユーザーサイドバーパーシャルに渡す
$this->theme->set_partial('sidebar', 'homepage/widgets/users')->set('users', Model_User::logged_in_users());
}
/**
* 簡単な例です。通常のアクションメソッドは、おそらく、モデルからデータを取り出し、
* パーシャルビューにこのデータを渡すためのコードを持っているでしょう...
*/
public function action_index()
{
// ホームページには Flash イメージのバナーがあります
$this->theme->set_partial('banner', 'homepage/banner');
// a block of static content
$this->theme->set_partial('content', 'homepage/content');
// そして、2つのリンクリストとコピーライトのブロック
$this->theme->set_partial('footerleft', 'homepage/shortcuts');
$this->theme->set_partial('footercenter', 'homepage/links');
$this->theme->set_partial('footerright', 'homepage/copyright');
}
/**
* アクションからのカスタムレスポンスを許容するために、出来る限り標準の after() を維持
*/
public function after($response)
{
// アクションから返すレスポンスオブジェクトが無い場合
if (empty($response) or ! $response instanceof Response)
{
// 定義されたテンプレートをレンダリングします
$response = \Response::forge(\Theme::instance()->render());
}
return parent::after($response);
}
}
</code></pre>
<h3 id="config">設定</h3>
<p>
テーマクラスの設定は <strong>app/config/theme.php</strong> で設定されています。
デフォルトの設定ファイルは fuel/core/config 内にあります。
このファイルをアプリケーションの設定ディレクトリにコピーして、必要な箇所を変更する事で、オーバーライドする事ができます。
</p>
<table class="config">
<tbody>
<tr class="header">
<th>パラメータ</th>
<th>型</th>
<th>デフォルト</th>
<th>説明</th>
</tr>
<tr>
<th>active</th>
<td>string</td>
<td><pre class="php"><code>'default'</code></pre></td>
<td>アクティブテーマとして使います。<a href="./methods.html#method_active">active()</a> メソッドを使う事で、あとから選ぶこともできます。</td>
</tr>
<tr>
<th>fallback</th>
<td>string</td>
<td><pre class="php"><code>'default'</code></pre></td>
<td>フォールバックテーマとして使います。アクティブテーマのビューが見つからない場合、このテーマがフォールバックテーマとして利用されます。<a href="./methods.html#method_fallback">fallback()</a> メソッドを使う事で、あとから選ぶこともできます。</td>
</tr>
<tr>
<th>paths</th>
<td>array</td>
<td><pre class="php"><code>array()</code></pre></td>
<td>テーマを探すパスです。設定された順序で探していきます。<a href="./methods.html#method_add_path">add_path()</a> メソッドか、 <a href="./methods.html#method_add_paths">add_paths()</a> メソッドを使って後から追加する事もできます。</td>
</tr>
<tr>
<th>assets_folder</th>
<td>string</td>
<td><pre class="php"><code>'assets'</code></pre></td>
<td>テーマフォルダ内のアセットを指すパスです。テーマからの相対パスで指定します。</td>
</tr>
<tr>
<th>view_ext</th>
<td>string</td>
<td><pre class="php"><code>'.html'</code></pre></td>
<td>テーマのビューファイルの拡張子です。</td>
</tr>
<tr>
<th>info_file_name</th>
<td>string</td>
<td><pre class="php"><code>'themeinfo.php'</code></pre></td>
<td>テーマ情報ファイルのファイル名です。このファイルは Config クラスが操作するので、拡張子でファイルタイプを示すことができます。</td>
</tr>
<tr>
<th>require_info_file</th>
<td>boolean</td>
<td><pre class="php"><code>false</code></pre></td>
<td>テーマ情報ファイルを必要とするかどうか。</td>
</tr>
<tr>
<th>use_modules</th>
<td>boolean|string</td>
<td><pre class="php"><code>false</code></pre></td>
<td>
自動的に現在のモジュール名とビュー名をプレフィックスにするかどうか。
文字列が含まれている場合は、プレフィックステーマビューのパスに利用されます。
これは、別のフォルダにすべてのモジュールテーマビューを移動し、モジュール名とアプリのビュー間の衝突を回避することができます...
</td>
</tr>
</tbody>
</table>
<p>設定ファイルのサンプル:</p>
<pre class="php"><code>// app/config/theme.php の中
return array(
'active' => 'default',
'fallback' => 'default',
'paths' => array( // DOCROOT の外にあるテーマファイルはここ
APPPATH.'themes',
),
'assets_folder' => 'themes', // これは <localpath>/public/themes/<themename>... を意味します
'view_ext' => '.html',
'info_file_name' => 'themeinfo.ini',
'require_info_file' => false,
'use_modules' => true,
);
</code></pre>
<p>設定ができたら、 Theme クラスを<a href="./methods.html">使いはじめる</a>ことが出来ます。</p>
</div>
<footer>
<p>
© FuelPHP Development Team 2010-2019 - <a href="http://fuelphp.com">FuelPHP</a> is released under the MIT license.
[ <a href="https://github.com/fuel/docs/commits/1.8/master/classes/theme/introduction.html">原文コミット履歴</a> | <a href="https://github.com/NEKOGET/FuelPHP_docs_jp/commits/1.8/master_japanese/classes/theme/introduction.html">翻訳コミット履歴</a> | <a href="https://github.com/NEKOGET/FuelPHP_docs_jp/blob/1.8/master_japanese/classes/theme/introduction.html">GitHubで修正</a> ]
</p>
</footer>
</div>
</body>
</html>