====== Apricot ホーム画面 ======
 --- //[[http://www.y2sunlight.com|y2sunlight]] 2020-05-08//

[[apricot:top|Apricot に戻る]]

関連記事
  * [[apricot:configuration|Apricot プロジェクトの作成]]
  * [[apricot:public|Apricot 公開フォルダ]]
  * [[apricot:core:top|Apricot コア]]
  * Apricot アプリ
    * [[apricot:app:top|Apricot アプリ作成の準備]]
    * Apricot ホーム画面
    * [[apricot:app:error|Apricot エラー画面]]
    * [[apricot:app:db-model|Apricot データベースとモデル]]
    * [[apricot:app:user-list|Apricot ユーザ一覧画面]]
    * [[apricot:app:user-edit|Apricot ユーザ登録画面]]
    * [[apricot:app:validation|Apricot バリデーション]]
    * [[apricot:app:transaction|Apricot トランザクション]]
  * [[apricot:ext:middleware|Apricot 拡張]]


アプリのホーム画面を作ります。\\ 
画面の作り方の基本は[[apricot:app:top#スタブ画面|スタブ画面]]と同じです。本章の前にそちらもご覧下さい。

----

===== ルーティング =====

以下のように config/routes.php を変更し、ホームコントローラのルートを作ります。

{{fa>folder-open-o}} ** /apricot/config **
<code php routes.php>
<?php
//-------------------------------------------------------------------
// Route Definition Callback
//-------------------------------------------------------------------
return function (FastRoute\RouteCollector $r)
{
    $base = Core\Application::getInstance()->getRouteBase();
    $r->addGroup($base, function (FastRoute\RouteCollector $r) use($base)
    {
        // Home
        $r->get ('/home', 'HomeController@index');
        $r->get('/', function() use($base){
            header("Location: " . $base.'/home');
        });

        // Stub
        $r->get('/stub[/{no:\d+}]', 'StubController@index');
    });
};
</code>

  * /home --- ホームコントローラへのルート
  * /stub --- スタブコントローラへのルート
  * / --- ホームコントローラ(/home)へリダイレクト

ルーティング設定に関しては[[https://github.com/nikic/FastRoute|FastRoute]]を参照して下さい。

\\


===== ホームコントローラ =====

Controller を継承してホームコントローラを作ります。

{{fa>folder-open-o}} ** /apricot/app/Controllers **
<code php HomeController.php>
<?php
namespace App\Controllers;

use App\Foundation\Controller;

/**
 * ホームコントローラ
 */
class HomeController extends Controller
{
    /**
     * Home Page
     * @return \Core\Foundation\Response
     */
    public function index()
    {
        $message = __('messages.home.msg_hello', [':account'=>env('APP_NAME')]);
        return render('home',['message'=>$message]);
    }
}
</code>

  * ''<nowiki>__</nowiki>()'' はトランスレータ [[apricot:core:basic-class#langクラス|Core\Lang::get()]] を呼び出すヘルパー関数です。\\ トランスレータへの引数は言語テキスト(assests/lang/ja/messages.php)のキーです(ドット表記)。
  * ''env()'' は環境設定を取得する[[apricot:core:top#ヘルパー|ヘルパー関数]]です。
  * ボイラープレートのrender()関数を呼び出してレスポンスをレンダリングしています
  * **render(string $view=null, array $variables=[])**
    - $view : テンプレート名\\ 上例では assets/views/home.blade.php がテンプレートファイルになります
    - $variables : テンプレート変数の連想配列\\ 上例では $message をテンプレートに渡しています。

\\

===== HTMLテンプレート =====

以下にホームコントローラのindexアクションでレンダリングしているHTMLテンプレートを示します。

{{fa>folder-open-o}} ** /apricot/assets/views **
<code php home.blade.php>
{{-- 親レイアウト --}}
@extends('layout')

{{-- 追加スクリプト --}}
@push('scripts')
@endpush

{{-- タイトル --}}
@section('title')
@endsection

{{-- コンテンツ --}}
@section('content')
    <h1 class="text-center">{{__('messages.home.title')}} <span class="small">{{env('APP_VERSION')}}</span></h1>
    <div class="text-center">
        <img src="{{url_ver('img/apricot.jpg')}}" width="300">
    </div>
    <div class="text-center mt-2">{{$message}}</div>
@endsection
</code>

  * ''extends'', ''push'', ''section'' の各ディレクティブについては、[[apricot:app:top#htmlテンプレート|スタブ画面]] を参照して下さい。
  * ボイラープレート'' __()'', '' env()'', '' url_ver()'' については、[[apricot:app:top#layoutbladephp|layout.blade.php]] を参照して下さい。

\\

==== 画像ファイル ====

HTMLテンプレートで使用している画像 apricot.jpg は apricot/public/img の下に設置して下さい。

{{fa>folder-open-o}} ** apricot/public/img **\\ 
apricot.jpg\\ 
{{:apricot:apricot.jpg?360px}}

\\

===== 翻訳テキスト =====

ホーム画面用の翻訳テキストを言語ファイル( messages.php )に追加します。

{{fa>folder-open-o}} ** apricot/assets/lang/ja **
<code php messages.php>
<?php
return [

    ...

    'home'=>[
        'title'=>env('APP_NAME'),
        'msg_hello'=>'Hello, :account !',
    ],
];
</code>

\\
===== テスト実行 =====

ホーム画面を表示してみましょう。ブラウザ上で以下のURLにアクセスしてみて下さい。

<code>
http://localhost/ws2019/apricot/public/
</code>

次の画面が表示されます

[{{apricot:app:app02.png?nolink}}]
■ [menu1],[menu2],[menu3]を押すとそれぞれのスタブ画面が表示されます。\\ 
■ [About Me]を押すと [[http://y2sunlight.com/ground/doku.php?id=apricot:top|y2sunlight.com]] が開きます。

\\