【freo】【freo講座】【初心者の為のfreoテンプレート編集講座】【基本編（12）】freoの画面についての考え方

通常のホームページでは、例えば「index.html」を表示した時に出てくる表示内容や表示形式などを編集したい場合は、「index.html」そのものを編集すればいいですが、freoだと、どこのなにを編集すればいいのかが、慣れるまで良く分からないことが多いと思います。
なにを編集すればいいのか、どこを編集すればいいのかがわかるように、freoの画面についての考え方を解説したいと思います。

freoの画面についての考え方

HTMLで作られたサイトの画面について

通常、htmlでサイトを閲覧するとき、ブラウザで「https://32877.info/index.html」にアクセスすると、32877.infoサーバーにアップロードされた、index.htmlというhtmlファイルが表示されます。
つまり、「https://32877.info/index.html」というURLは、「https://32877.info/」という「サーバーの場所」と、「index.html」という「そのサーバー内にあるファイルの場所及び名前」という二つの要素で構成されています。

freoで作られたサイトの画面について

「https://32877.info/」というサーバーにfreoを設置した時、「https://32877.info/」にアクセスすると、「https://32877.info/index.php」という画面が表示されます。
この画面を、私は、「デフォルト画面」と呼んでいます。

デフォルト画面になにが表示できるのかは、デフォルト画面が読み込むPHP（PHPファイル）で決まっています。
その内のなにをどのように表示するかは、テンプレート（HTMLファイル）を編集して変更します。
どんなスタイルで表示するかは、デフォルト画面が読み込むスタイルシート（CSSファイル）を編集すると変更できます。

では、どうしてこの画面をデフォルト画面と呼ぶのか、また、この画面の表示内容や形式を設定しているPHP、テンプレート、スタイルシートはどこにあるのかを説明します。

freoの動作ルールについて

上で説明したとおり、freoでは、PHPで書かれた動作にしたがって、データベースに記録されている情報を、テンプレートを使って、スタイルシートに書かれたスタイルで表示します。
ある画面に表示されている情報が、データベースのどのテーブルに登録されていて、どのテンプレートを利用して表示されているかを判断するには、freoの基本的な動作のルールを覚えなければいけません。
本内容は、freo公式サイト「内部構造の解説」ページにも詳しく解説されています。

modeとwork

実は、freoを使った時、「index.php」の後には、必ず２つ以上の文字列が使われています。
例えば、「https://32877.info/index.php/view/1」「https://32877.info/index.php/page/gallery」などです。
この、「view」と「page」のことを『mode』といい、「1」と「gallery」のことを『work』といいます。

デフォルト画面である「https://32877.info/index.php」には、modeもworkもないじゃんと思われるかもしれません。
しかし実は、modeもworkもあるんだよ。省略されているだけです。
では、なにが省略されているかというと、「default」という文字列が省略されています。
つまり、「https://32877.info/index.php」は、「https://32877.info/index.php/default/default」という画面であり、だから私はこれを、「デフォルト画面」と呼んでいるわけです。

なお、modeとworkになにも入っていなかった場合は、「default」という文字列が代入されることになっています。
よって、「https://32877.info/index.php/entry」の場合のmodeは「entry」、workは「default」になります。
「https://32877.info/index.php」画面を「デフォルト画面」と呼ぶように、「https://32877.info/index.php/entry」画面は「エントリー画面」と呼ぶのがいいでしょう。

また、modeがなくてworkしかない場合というのはありません。
「index.php」の次にある文字列は、必ずmodeです。
この、modeとworkが、freoのテンプレートやPHPを探す際の重要な鍵になります。

読み込まれるテンプレートの指定ルール

これまでのことを参考に、デフォルト画面が読み込んでいるテンプレートの場所を紹介します。
freoで読み込むテンプレートは全て、[freo/templates]フォルダ内に入っています。
[freo/templates]フォルダの中には、freoの全ての画面で使う共通テンプレートが入っています。（例：header.html、footer.html）
[freo/templates/internals]フォルダの中には、freoの基本的な機能で表示できる画面（エントリー画面、ページ画面等）で使うテンプレートが入っています。
[freo/templates/plugins]フォルダの中には、freoに追加したプラグインで使用するテンプレートが入っています。
デフォルト画面は、freoの基本的な機能で表示できる画面なので、これで使用するテンプレートは、[freo/templates/internals]フォルダに入っています。

[freo/templates/internals]フォルダを開くと、中に様々なフォルダが入っています。
このフォルダには、先ほど説明したmodeの名前がついていると思います。
「view」や「page」のほかに、「default」があると思います。
これが、デフォルト画面のテンプレートが入っているフォルダです。
[freo/templates/internals/default]フォルダ内にある、[default.html]が、デフォルト画面テンプレートになります。

個別のテンプレートを指定する方法について

freo公式サイトの「内部構造の解説」ページでも紹介されている通り、ページやエントリーによって個別にテンプレートを設定する方法についてです。
既に、modeごとにテンプレートがフォルダ分けされていることは紹介しました。
modeの名前のついたフォルダの中に、workの名前のついたテンプレートを作成することで、個別にテンプレートを設定できます。

たとえば、「ページIDがgalleryのページ」のテンプレートを個別に作成したい場合は、[freo/templates/internals/pages]フォルダに、[default.html]以外に、[gallery.html]というテンプレートを作ればOKです。
ページのmodeでは、ページIDがworkの働きをしています。
個別のテンプレートがない場合は、「default.html」がテンプレートとして読み込まれるのですが、「work＝ページIDの名前のついたテンプレート」があれば、そちらを読み込んでくれるのです。

なお、workが階層わけされていた場合も同様です。
workが階層わけされているというのは、たとえば、ページIDが「gallery/genre1/aaa/1」のページなどの場合です。
階層わけされたページIDに対して個別のテンプレートを作る場合は、[freo/templates/internals/pages]フォルダの中に、ページIDの階層に従ってフォルダを作成し、テンプレートを保存します。
ページIDが「gallery/genre1/aaa/1」の場合であれば、[freo/templates/internals/pages/gallery/genre1/aaa/1.html]といった具合です。
また、ページIDが「gallery/genre1/aaa/～～」で始まるページ全てで共通のテンプレートを利用したいのであれば、[freo/templates/internals/pages/gallery/genre1/aaa.html]を作ればOKです。

動かすPHPの指定ルール

では、デフォルト画面の動きやデフォルト画面で表示するものが、どのPHPに書かれているのかを説明します。
freoのプログラムが記述されているPHPファイルは、[freo/libs]フォルダに入っています。
[freo/libs]フォルダには、[smarty]フォルダと[freo]フォルダがあります。
[smarty]フォルダには、freoが使用しているテンプレートエンジン「smarty」に関するPHPが入っています。
これがあるおかげで、テンプレート上で変数を使ったり、配列を使ったりすることができます。
[libs]フォルダに、freoのプログラムがまとめられています。
[freo/libs/internals]フォルダには、freoの基本的な動作に関するPHPが入っています。
[freo/libs/plugins]フォルダにはfreoに追加したプラグインの動作に関するPHPが入っています。
なお、freoには標準で追加されているプラグイン（例：子ページ表示プラグイン等）がありますが、[freo/libs/plugins]フォルダには、それらのプラグインのPHPも入っています。

デフォルト画面はfreoの基本的な機能なので、これについてのPHPは[freo/libs/internals]フォルダの中にあります。
[freo/libs/internals]フォルダを開くと、テンプレートの時と同様、様々なmodeの名前のついたフォルダがあると思います。
この内、[default]フォルダの中にある、[default.php]が、デフォルト画面についてのPHPになります。

画面の呼び方について

以上のように、freoの画面はmodeとworkによって構成されています。
画面を呼ぶときは、modeの名前で呼ぶといいでしょう。
modeとworkのしくみがわかれば、自分が今表示しているのがどの画面なのか、その画面のテンプレートはどこにあるのかがわかります。
例題（答えは反転しています。）を出してみますので試しにチャレンジしてみてください。

例題１）「https://32877.info/index.php/login」画面はなんと呼びますか？
答え）「ログイン画面」でいいと思います。

例題２）「http://3287.xii.jp/index.php/view/2」に個別のテンプレートを設定したい場合、どのフォルダにどの名前のテンプレートを作成すればいいですか？
答え）[freo/templates/internals/view]フォルダ内に[2.html]フォルダを作成します。

例題３）「http://3287.xii.jp/index.php/user/profile」画面で読み込んでいるPHPはどれですか？
答え）[freo/libs/freo/user]フォルダにある[default.php]です。（profile.phpはありません。workに対するPHPがない場合はdefaultが読み込まれます。）