（ﾟдﾟ）ｺﾝﾁｬ、中の人ﾃﾞｽ。珍しく昼間up(ぉ
(´Д｀;)なんかどんどん更新時間が遅くなってってる ||orz
とりあえず今回はビューをやっていきますＹＯ
コントローラー編では直接echoで画面出力していましたが本来ならちゃんとビューを使います。
ってかビューを使ってやっていきましょうＹＯ。
ビューを作るとか言うとビューのファイル作って終了というイメージがありますがcakePHPではどうやらそんな単純なものではないらしいです。
cakePHPでのビュー＝「複数の要素の組み合わせで作られる」モノ。
＼ __ ／
＿ （ｍ） ＿ﾋﾟｺｰﾝ
|ミ|
／ .｀´ ＼
-‐ '´￣￣｀ヽ､
／ ／" ｀ヽ ヽ ＼
//, '/ ヽﾊ ､ ヽ
〃 {_{ノ ｀ヽﾘ| ｌ │ i|
ﾚ!小ｌ● ● 从 |、i|
ヽ|l⊃ ､_,､_, ⊂⊃ |ﾉ│<ア○エリオンにょろー。
/⌒ヽ__|ﾍ ゝ._） j /⌒i !
＼ /:::::| l＞,､ __, イァ/ /│
. /:::::/| | ヾ:::|三/::{ﾍ､__∧ |
｀ヽ< | | ヾ∨:::/ヾ:::彡' |
別に合体はしません。
大体イメージ的には次の通り。
テンプレがレイアウトという土台の上に設置されているイメージ？
□レイアウト
ページの土台となるもの。ページ全体の基本的な配置などをまとめたもの。
ヘッダー部分、フッター部分、実際のコンテンツを表示するボディ部分といったものの構成などを考え記述される。通常コントローラー毎に用意され、そのコントローラーのすべてのアクションページで共用される。
□テンプレート
実際に表示するコンテンツとなるもの。各アクションごとに用意され、そのアクションが呼び出されると、対応するテンプレートが読み込まれ、レイアウトのボディ部分にはめ込まれてレンダリングされる。
□エレメント
テンプレートの中に埋め込まれる「部品」となるもの。例えばバナーなどの複数のページに決まった表示をあちこち埋め込む場合にエレメントとして作成し、それをテンプレート内に配置する。
あくまでビューの基本はテンプレートです。
レイアウトは特に用意せずともCakePHPに標準で用意されているものが自動的に使用されます。
エレメントは特に必要がなければ作成する必要はないでしょう。
ページの基本はとりあえずテンプレートを作るということだと理解しておけばおｋなんじゃないでしょうか。（ﾟωﾟ）
''';;';'';';''';;'';;;,., ザッ
ザッ ;;''';;';'';';';;;'';;'';;; テンプレートはあるかい
;;'';';';;'';;';'';';';;;'';;'';;;
テンプレートはあるかい ,.～＾,.～＾,.～＾..～＾ ザッ
⌒vv⌒yv⌒vv⌒yv⌒vv、
, '´￣｀ヽ －＾, '´￣｀ヽ －＾, '´￣｀ヽ テンプレートはあるかい
ザッ ,‐ '´￣｀ヽ ,‐ '´￣｀ヽ ,‐ '´￣｀ヽ ,‐ '´￣｀ヽ
,‐ '´￣￣｀ヽ＿＿‐ '´￣￣｀ヽ ＿‐ '´￣￣｀ヽ ザッ
-‐ '´￣￣｀ヽ､ -‐ '´￣￣｀ヽ､ -‐ '´￣￣｀ヽ､
／ ／" ｀ヽ ヽ ＼ ／ ／" ｀ヽ ヽ ＼ ／ ／" ｀ヽ ヽ ＼
//, '/ ヽﾊ ､ ヽ //, '/ ヽﾊ ､ ヽ //, '/ ヽﾊ ､ ヽ
〃 {_{ノ ｀ヽﾘ| ｌ │ i| 〃 {_{ノ ｀ヽﾘ| ｌ │ i| 〃 {_{ノ ｀ヽﾘ| ｌ │ i|
ﾚ!小ｌ● ● 从 |、i| ﾚ!小ｌ● ● 从 |、i| ﾚ!小ｌ● ● 从 |、i|
ヽ|l⊃ ､_,､_, ⊂⊃ |ﾉ│ ヽ|l⊃ ､_,､_, ⊂⊃ |ﾉ│ ヽ|l⊃ ､_,､_, ⊂⊃ |ﾉ│
/⌒ヽ__|ﾍ ゝ._） j /⌒i !ヽ__|ﾍ ゝ._） j /⌒i !ヽ__|ﾍ ゝ._） j /⌒i !
＼ /:::::| l＞,､ __, イァ/ /│:;::::| l＞,､ __, イァ/ /│:;::::| l＞,､ __, イァ/ /│
/:::::/| | ヾ:::|三/::{ﾍ､__∧ | ::/| | ヾ:::|三/::{ﾍ､__∧ | ::/| | ヾ:::|三/::{ﾍ､__∧ |
｀ヽ< | | ヾ∨:::/ヾ:::彡' |ヽ< | | ヾ∨:::/ヾ:::彡' |ヽ< | | ヾ∨:::/ヾ:::彡' |
では前回作成したTestコントローラーのindexアクション用のテンプレートを作成しませう。
まず『app』内の『views』フォルダを開き、その中に「test」というフォルダを作成してください。
（ﾟдﾟ）こんな感じにね!!
テンプレートは『views』内に、それぞれの名前のフォルダを用意して、そこに作成します。
であ『test』フォルダ内に次のようなテンプレを作成しませう。
index.ctp
<h1>INDEX</h1>
<br />
<div>これはテスト用コントローラーによるindexアクションの表示ですYO</div>
テンプレートは基本的にHTMLベースで記述しますが通常のHTMLとは異なります。
普通なら<html><body></body></html>といったタグが必須になりますが、テンプレートでは<body>タグ内に実際に表示されるコンテンツの部分だけを記述すればいいのです。
ぶっちゃけかなり簡略化されるわけです。
続いてテンプレートを使うようにコントローラーの修正も行っていきましょう。『controllers』フォルダの「test_controller.php」を次のように編集。
test_controller.php
<?php
class TestController extends AppController{
public $name = 'Test';
public $uses = null;
function index(){
}
function other(){
echo "<html><body>";
echo "<div>これはotherアクションの表示です。</div>";
echo "<br/><a href=\"index\">indexアクションに戻る</a>";
echo "</body></html>";
}
}
?>
今回の変更点ではまず$autoRenderの宣言がなくなりました。テンプレートを用意したので自動レンダリング機能が必要なくなった為です。
次にindexメソッドが空になりました。これはindexメソッド内でコントローラー側でやっておく処理が特になくなった為です。前回書いたように処理がなにもなくてもメソッドを残して起きてください（理由は前回参照）。
↑以上のやうにひょうじされたらおｋ。
今回はヘッダーフッター共に特に指定かけなかったのでcakePHPのデフォCSSが適用されています。
（ﾟдﾟ）このようにパーツ単位で組み合わせることで同じデザインのページをたくさんのページで使いまわすことが可能になるわけですね。
いやこのように大量のページを一つのファイルで管理することで手間を減らし、工数を減らすのがフレームワークたる所以なのですが…
ここでは「全部おんなじデザインじゃ嫌だ！」という変わり者のアナタのために。
レイアウトを使うのを放棄してみませう。
_,. --- 、─-- .,
,. -イ ヽｰ 、
/ ﾚ ／,. ,ｨ / } ヽ
/ iゞｧ' _,.ノ ／ , / /i ヽ
〈 !､ ',. - ､∠,. ノ. - ､'' /| /
ヽ ! { .},.- ､{ }' i / 飛ばねぇ豚は
,. -'" ヽ / ,`ー'´〃 ヾヽー' ﾄ､/
i / i (ゝ.,_,ィr--- く_ｧ' ) ! iヽ ただの豚さ
/´ ,. ´￣｀ヽ／,> ￣￣ / ' ﾉ｀ヽ_
,. - '" ／ 、 ｀ヽ. l_)＿＿___＿＿_,. '",. '" ｀ヽ,
.／,. --‐ / 、 ＼ Y-' `ー '" ／ / ／ ',
/ ,/ ､__ ＼ ヽﾉ ＼＿＿ ,. - '7 | ',
i { ﾌ＞-'"＼ ,. - '/ | ヽ
ゝ ＼___ノ i 〉 `ー-‐' / / i
ですよねー。
では「レイアウトはいらねぇＹＯ」用。
『controllers』の「test_controller.php」を次のように修正。
test_controller.php
<?php
class TestController extends AppController{
public $name = 'Test';
public $uses = null;
public $autoLayout = false;
function index(){
}
function other(){
echo "<html><body>";
echo "<div>これはotherアクションの表示です。</div>";
echo "<br/><a href=\"index\">indexアクションに戻る</a>";
echo "</body></html>";
}
}
?>
次にテンプレの修正。
レイアウトを使わない場合、<DOC TYPE>宣言などテンプレートですべてのHTMLタグを用意しなければなりません。
index.ctp
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmls="http://www.w3.org/1999/xhtml
">
<head><title>Hello Page</title>
<meta http-equiv= "Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>INDEX</h1>
<br />
<div>これはテスト用コントローラーによるindexアクションの表示ですYO</div>
</body>
</html>
こうなるはず（ﾟ∀ﾟ*）
レイアウトを使わないと、テンプレートの記述は面倒くさくなります。
実際問題としてレイアウトを使用しない場合にはそれぞれの要素の表示をＣＳＳなどで調整する必要があります。
その手間を考えるなら、自由度は制限されますがレイアウトを使ったほうが手間が少なくてイイと思うのですがどうなのでしょう…。
（ﾟдﾟ）ｸﾜｯ ではレイアウト自体を自分で作ってみませう。
,,;:' ';, ,;:'';
,; ';,,,.,.,.,.,.,;:' ';
､:｀ ':, / ､､ ＿ ､､ ＿/_ ＿/_
,' ':, /ヽ ＿/ ／/ ／/ ・ ・ ・
'; ':, ∧／|
'; ○ ＿＿ ○ ; _ - _ －＿－ ＝ ::ζ∧∧=-
焼き払え！ '; /_- _-＝ｰ =- 三= -￣－￣- ＿＝ _- ＝ﾆ －_＜（>> ）
'':;, / - ＿ﾆ－ ＿－￣－ﾆ _-－ﾆ_ ＝ _ ﾆ － 二Σ⊂_:::::::）=-
∧＿∧:' ヽ - ﾆ-=, - －ﾆ -= ＿ 二 _＝-ﾆ －- ﾆ-￣ 二＜と:::::::::～
_i┐・Д） ￣ ; ＝ - ﾆ￣＿-￣＿＝=< =｀Ｊ＞
〉 ﾌ='つ '; /／Ｗヽ
） ( l .| ;'
ﾉ～'__）._）.,..,.,.,.,..,）.,.,.,..,.,.,.（,..,.,.,.,.）
とはいっても本格的なのは置いといて、とりあえず基本的なものでいきませう。
把握できたら各自で改良するよろし。
レイアウトは『views』フォルダ内の『layouts』フォルダ内に配置します。
テンプレート同様にctpファイルを作成。以下作成しる。
test.ctp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml
">
<head>
<?=$html->charset() ?>
<title>
<?=$title_for_layout ?>
</title>
<?=$html->css('test') ?>
<?=$scripts_for_layout ?>
</head>
<body>
<div id="container">
<div id="header">Test Layout</div>
<div id="content">
<?=$content_for_layout; ?>
</div>
<div id="footer">copyright 2009 naka_no_hito</div>
</div>
</body>
</html>
続いてスタイルシートの修正。デフォを使わないので当然ＣＳＳも自作で。
CSSは『app』内の『webroot』フォルダにある『css』フォルダ内に格納しますＹＯ。
test.css
body{
background: #AAAAFF;
color: #000066;
margin: 0;
}
#header{
font-size: 12pt;
font-weight: bold;
text-align: right;
}
#content{
background: #EEFFFF;
color: #000099;
padding: 10px 20px 20px 20px;
}
#footer{
text-align:right;
}
h1{
font-size: 12pt;
font-weight: bold;
color: #000066;
}
p{
font-size: 10pt;
font-weight: plain;
color: #333399;
}
ここでぁぼでー以外にヘッダー、コンテンツ、フッター、h1とｐのテキスト表示についてスタイルを設定しておきました。
ではコントローラーのndex.ctpもレイアウトを使用するように修正しておきましょう。
<?php
class TestController extends AppController{
public $name = 'Test';
public $uses = null;
public $layout = 'test';
function index(){
}
function other(){
echo "<html><body>";
echo "<div>これはotherアクションの表示です。</div>";
echo "<br/><a href=\"index\">indexアクションに戻る</a>";
echo "</body></html>";
}
}
?>
public $autoLayout = false;を削除。そして新たに作成したCSSを読み込むので$layout = 'test';を記述。
うまくいけば↑のような画面が表示されますYO。
このやうにレイアウト用ファイル・ＣＳＳ・コントローラだけで一応のレイアウトは作れます。
このレイアウトをベースにデザインを行っていけばいいでしょう。
,､‐'''''''''ヽ､
/:::::;;-‐-､:::ヽ _,,,,,,,_
l::::::l _,,､-‐"iiiiiilllllllllllliiiiiiiｰ-､__ゞ:::::::::::｀ヽ,
ヽ::｀／: : : : iiiiiilllll||llllliiiiii: : : : : : ヽｲ~`ヽ:::::::i
. ／;,..-‐､: : : : : l|l: : : : : : : : : : : : : ＼ ﾉ:::::}
/: /: : : : :｀.: : : : : : : : :/´￣＼ : : : : : ヽ:::ノ
. !: : : :iflllli､: : : : : : : : : : : : : : : :ヽ: : : : : :.!
|: : : :llllｆ l: : : : : : : : : : :.iflllli､: : : : : ＜iiii|
|: : : :|llll |: : : : : : : : : : .llllf l: : : : : : : : :.|
|: : : :.!lllll!' : : : : : : : : : : |llll |: : : : : : : : :i
/: : : : : ○ : : .!lllll!' : : : : : : : :.i
￣|: : :" ,,,,,,,,,,,,,|____ : : : : : : : :.＜iii/ ＿＿＿＿＿＿＿＿＿＿＿＿＿＿
. ／!.: |:::::／ ￣''''''''l ヽ: : : : :-─/─ ／>>1くん！くそすれをたてないで！
ヽ ヽ/ ﾉ : : :ヽ／ ＜ すぐにくびをつってしんでね！
＼ ＼,,_ _,,,／ : ／＼ ＼しまじろうとお約束だよ！！！
｀''‐､､__ ￣￣ __,,,､-‐" ￣￣￣￣￣￣￣￣￣￣￣￣￣￣
. ／/:::::/ヽ￣￣￣￣ノ::::/＼
. ／ /:::::/ ｀￣￣￣/:::::/. ＼
しまじろう…。
では簡単なビューの表示がわかったところで、ビューとコントローラーの間でやり取りをしていきましょう。
（ﾟдﾟ）ｸﾜｯ まずは基本のフォームの送信ですＹＯ。
,. ‐''三ヾ´彡ｼ,=｀丶、
／'".:=≡ミ_≧_尨彡三:ヽ、
/／.:;:彡:f'"´‐------ ｀`'ｒ=:l
/〃彡_彡′,.=､￣￣ ,.=､ |ミ:〉
'ｙ=､､:ｆ´===tr＝=､.___,. ==､._ゞ{
{´yﾍl'′ | /⌒l′ |｀Ｙ}
ﾞ､ゝ) `''''ﾂ_ _;`ｰ‐'ﾞ:::::ｌ{ あきらめたら
. ヽ.__ ,ｨnmmm､ .:::|! そこで試合終了ですよ・・・・
,.ィ'´ﾄ.´ ´｀"｀"｀ﾞ″ .::::;'
イ´::ﾉ|::::l ＼ "' :::/
::::::::::::|:::::l ヽ、 ..:: .:::/.､
:::::: ::: |:::::ヽ ヽ、.......::::／..:::／!＼＼
::::::::::: |::::::::ヽ ｀`''‐--ｧt''′ |!:::ヽ:::＼
:::::::::::::|::::::::::::ヽ、 /i|iﾄ､ |l:::::::ヽ:::::＼
:::::::::::::|::::::::::::::/:ヽ、 ∧|i|i|i|〉. ||::::::::::ヽ:::::::＼
index.ctpに次のように修正。ちなみにビューで(ややこしい・・・)。
index.ctp
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmls="http://www.w3.org/1999/xhtml
">
<head><title>Hello Page</title>
<meta http-equiv= "Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>INDEX</h1>
<p><?=$result ?></p>
<form action="./index" method="post">
<input type="text" name="text1" size="60">
<input type="submit" />
</form>
</body>
</html>
次にコントローラーのindexメソッドを次のように修正。
index
function index(){
$result = "";
if(!empty($this->params['form']['text1'])){
$text1 = $this->params['form']['text1'];
$result = "あなたは「".$text1."」と書きました（ﾟ∀ﾟ*）";
}else{
$result = "入力してください（ﾟДﾟ#）ｺﾞｰﾙｧ!!";
}
$this->set("result",$result);
}
できたらhttp://localhost/cakeapp/test/index へレッツアクセスヽ( ^ω^)ﾉ ｻｸｾｽ!
うまくいくとこのような画面に。
入力してクエリボタンを押すと…。
（ﾟДﾟ#）ｺﾞｰﾙｧ!!
もしエラーが出てしまう場合にはindex.ctpの<form action="./index" method="post">部分をよく確認。場合によっては修正。
もし間違えて"../index"とかやった場合。
インデックスコントローラーなんかねぇよ（ﾟДﾟ#）ｺﾞｰﾙｧ!!と怒られるので注意。
ちなみに修正したのにエラーのまんまかよ!!(三村風に)となった場合ＩＥの場合キャッシュ残りが疑われますのでＦ５連射で直してください。
,. ‐''三ヾ´彡ｼ,=｀丶、
／'".:=≡ミ_≧_尨彡三:ヽ、
/／.:;:彡:f'"´‐------ ｀`'ｒ=:l
/〃彡_彡′,.=､￣￣ ,.=､ |ミ:〉
'ｙ=､､:ｆ´===tr＝=､.___,. ==､._ゞ{
{´yﾍl'′ | /⌒l′ |｀Ｙ}
ﾞ､ゝ) `''''ﾂ_ _;`ｰ‐'ﾞ:::::ｌ{ あきらめたら
. ヽ.__ ,ｨnmmm､ .:::|! そこで試合終了ですよ・・・・
,.ィ'´ﾄ.´ ´｀"｀"｀ﾞ″ .::::;'
イ´::ﾉ|::::l ＼ "' :::/
::::::::::::|:::::l ヽ、 ..:: .:::/.､
:::::: ::: |:::::ヽ ヽ、.......::::／..:::／!＼＼
::::::::::: |::::::::ヽ ｀`''‐--ｧt''′ |!:::ヽ:::＼
:::::::::::::|::::::::::::ヽ、 /i|iﾄ､ |l:::::::ヽ:::::＼
:::::::::::::|::::::::::::::/:ヽ、 ∧|i|i|i|〉. ||::::::::::ヽ:::::::＼
では解説に移っていきますよ。
indexメソッドで何が行われているのかをチェック。
index
function index(){
$result = "";
if(!empty($this->params['form']['text1'])){
$text1 = $this->params['form']['text1'];
$result = "あなたは「".$text1."」と書きました（ﾟ∀ﾟ*）";
}else{
$result = "入力してください（ﾟДﾟ#）ｺﾞｰﾙｧ!!";
}
$this->set("result",$result);
}
まずはフォームのテキストエリアに入力があるかチェック。なければ何もしない。
= =
ﾆ= 荒 そ -=
ﾆ= 巻 れ =ﾆ
=- な. で -=
、､ l | /, , ﾆ .ら. も ﾆ
.ヽ ´´, r ： ヽ｀
.ヽ し き 荒 ﾆ. ´/小ヽ｀
= て っ 巻 =ﾆ _,,..,,,,_
ﾆ く. と な -= ､, ,,, 、,, ./ ,' 3／⌒ヽ-、_ 、 ,, ＠
= れ.何 ら -= ､, ／l. /＿＿＿＿／ n ヽ|ﾉ,,
ﾆ な も =ﾆ ＠ ,,, 、,, ￣,,￣￣￣￣,,￣ ,,, 、,,
/, い ヽ､ ヽ|ﾉ ､､, ,, 、,, , " ,, ､､, ,,
/ ： ヽ、
もしなにがしか入力があれば$text1に入力内容をセット。そして文字列形式にして$resultに渡す。もし空なら（ﾟДﾟ#）ｺﾞｰﾙｧ!!と入る。条件文を抜けた後にset関数でresultに$result、つまり入力があれば入力内容を含む文字列、なければ（ﾟДﾟ#）ｺﾞｰﾙｧ!!の入ったresultをセット。それをビューで受け取り、<p><?=$result ?></p>で受け取り、表示する。
っデータ受け取り
$this->params['form']['text1'];
データ送信形式がPOSTの場合、
$this->params['form']['コントロール名'];
でフォームのデータを取得できます。(GETは$this->params['url']['コントロール名'];)
$thisというのはこのコントローラークラスのインスタンス自身、つまりindex。
送信フォームの内容は、自身に用意されているparams連想配列の中にあります。
もしこれが空ならば、フォームからのデータがない、つまり未入力となり、「（ﾟДﾟ#）ｺﾞｰﾙｧ!!」と怒る訳です。
!empty($this->params['form']['text1'])をチェックして分岐しているのはそのような理由からです。
もしこれが空でなければそのまま値を取り出し、加工した上で$resultに渡し、そのまま結果としてビューで表示する。最後にsetを使って値を設定していますが、これは
$this->set(変数名、値)
という形式になってます。
今回の場合で言えば、'result'という変数に$resultの中身、つまり中身入りなら「あなたは「中身」と書きました。」もし空なら「（ﾟДﾟ#）ｺﾞｰﾙｧ!!」が入るわけです。
テンプレート側で<?=$result ?>となっていましたが、このようにコントローラー側で$resultに値を用意したからテンプレートに値が渡ったのです。
このように、「コントローラーで必要な処理をし、setでビューに値を渡す」「ビューでコントローラーから渡された値を<?= ?>で出力する」というかたちで両者の間で値のやりとりをする。これがcakePHPの基本スタイルなのですＹＯ。
|
ｈ
冊冊冊冊
〃〃〃〃
|
|
| ぬるぽ
|
∧＿∧ | ｸｲｯ
（ ´∀｀ ）づ
/ _ノ⌒⌒⌒`～、_
(￣⊂人 //⌒ ノ ヽ）
⊂ニニニニニニニニニニニニニニ⊃
｜|| ｜| |
｜|| ｜| |
ｶﾞｯ ｈ
∧冊冊冊冊
（ ｀Д´）つ
/ _ノ⌒⌒⌒`～、_
(￣⊂人 //⌒ ノ ヽ）
⊂ニニニニニニニニニニニニニニ⊃
（ﾟдﾟ）
ビューの説明は以上になりまする…。
次回はモデルについてやっていきますＹＯ。
(´Д｀;)なるべくがんばってはやくageます…orz
／ :::::::＼
.| .::::|
| '''''' '''''' .:::|
.|（●）, ､（●）､::::|
＼ ,,ﾉ(､_, )ヽ､,,.:::::／
／｀｀ｰﾆ=-'"一´＼
＿/((┃))＿＿＿＿_i |＿ ｷｭｯｷｭｯ
.. ／ /ヽ,,⌒)￣￣￣￣ （,,ノ ＼
／ /＿＿＿＿＿＿＿＿＿ヽ.. ＼
.￣￣￣￣￣￣￣￣￣￣￣￣￣￣
/＼＿＿_／ヽ
／'''''' '''''':::::::＼
. |（●）, ､（●）､.:| ＋
| ,,ﾉ(､_, )ヽ､,, .::::|
. | ｀-=ﾆ=- ' .:::::::| +
＼ ｀ﾆﾆ´ .:::::／ +
／ヽ、ﾆ__ ーーノﾞ＼_
.|￣￣￣￣￣￣￣￣.| ﾄﾝ
_（,,)TO BE (,,）_
.. ／. |..CONTINUED!! | ＼
／ .|＿＿＿＿＿＿＿＿_| ＼
