JobeetでYii2フレームワークを学習する(3)

このページではWebアプリケーションとしてのレイアウトの反映、Jobテーブルより求人データの一覧を作成していきます。

レイアウトの編集

Yii2はコンテンツの表示に関する管理をMVCのV(View)にて管理しており、再利用するヘッダー・フッターと目的のコンテンツを切り離し、再利用する部分は主にレイアウトとして管理する事ができます。

デフォルトの状態ではBootstrapのテンプレートが適用されており、このままでも十分機能的なページを開発できますが、ここではSymfony のJobeetと同様のデザインにしていきます。

アセットファイルの編集

Viewに出力する情報として、スタイルシートやJavascriptのリソース読み込みがあります。

この情報は主に共通して全てのページに適用するリソースがあれば、特定のページのみ適用したい場面が多々あります。

Yii2では、これをアセットバンドルとして管理する事ができ、デフォルトの状態でBootstrapのライブラリがこのバンドルに登録されておりますので、以下のように登録から外します。

assets/AppAsset.php
<?php
/**
 * @link http://www.yiiframework.com/
 * @copyright Copyright (c) 2008 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */

namespace app\assets;

use yii\web\AssetBundle;

/**
 * Main application asset bundle.
 *
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
        'css/main.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        // 'yii\bootstrap\BootstrapAsset',
    ];
}

レイアウトファイルの追加

以下のレイアウトファイルを作成します。

views/layouts/default.php
<?php

/* @var $this \yii\web\View */
/* @var $content string */

use app\widgets\Alert;
use yii\helpers\Html;
use yii\helpers\Url;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset;

AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php $this->registerCsrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>

  <div id="container">
    <div id="header">
      <div class="content">
        <h1>
          <?= Html::a(Html::img(['@web/legacy/images/logo.jpg']), Url::toRoute(['/'])) ?>
        </h1>
        <div id="sub_header">
          <div class="post">
            <h2>Ask for people</h2>
            <div>
              <?= Html::a('Post a Job', Url::toRoute(['job/create'])) ?>
            </div>
          </div>
          <div class="search">
            <h2>Ask for a job</h2>
            <form action="" method="get">
              <input type="text" name="keywords"
                id="search_keywords" />
              <input type="submit" value="search" />
              <div class="help">
                Enter some keywords (city, country, position, ...)
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <div id="content">
      <?= Alert::widget() ?>
      <div class="content">
        <?= $content ?>
      </div>
    </div>

    <div id="footer">
      <div class="content">
        <span class="symfony">
          <img src="/images/jobeet-mini.png" />
          <?= Yii::powered() ?>
        </span>
        <ul>
          <li><a href="">About Jobeet</a></li>
          <li class="feed"><a href="">Full feed</a></li>
          <li><a href="">Jobeet API</a></li>
          <li class="last"><a href="">Affiliates</a></li>
        </ul>
      </div>
    </div>
  </div>

<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

レイアウトの適用

設定ファイル(config/web.php)にてデフォルトのレイアウトファイルを設定します。

<?php
・・・省略
$config = [
    'id' => 'basic',
    'basePath' => dirname(__DIR__),
    'bootstrap' => ['log'],
    'aliases' => [
        '@bower' => '@vendor/bower-asset',
        '@npm'   => '@vendor/npm-asset',
    ],
    'layout' => 'default', // ← 追加
    'components' => [
・・・省略

スタイルシートの適用

スタイルシートのファイルをダウンロード・解凍して以下のパス構成になるよう設置してください。

/var/www/html/yii-jobeet.takeho.com/web/css/main.css

設置したファイルをアセットバンドルへ登録します。

assets/AppAsset
・・・省略
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
        'css/main.css',
    ];
    public $js = [
    ];
・・・省略

画像ファイルの適用

画像ファイルをダウンロード・解凍して以下のパス構成になるよう設置してください。

/var/www/html/yii-jobeet.takeho.com/web/images/bg-footer.jpg

ブラウザから確認

以下URLにアクセスしてデザインが適用されている事を確認します。

http://yii-jobeet.takeho.com/

リソースの読み込み

スタイルシートのファイルを前項で反映しましたが、Jobeetで使われるスタイルシートのファイルの内訳ご確認すると以下の内容になっています。

main.css全てのページに適用するスタイル
job.css求人詳細ページに適用するスタイル
jobs.css求人一覧ページに適用するスタイル

このうち、main.cssは、アセットバンドルへ登録されておりますが、その他の一覧、詳細ページに適用するスタイルが登録されていない事が確認できます。

例えば一覧のページに求人詳細ページへ求人詳細用のjob.cssのスタイルを適用させる必要はなく、仮に適用させた場合、クライアント側のブラウザの読み込みに時間を掛けてしまう原因になります。

ここではそれぞれのページに適用させるスタイルシートファイル(リソース)の読み込みについて説明します。

適用例

求人一覧ページのテンプレートで以下の記述を追加します。

views/job/index.php
・・・省略
$this->title = 'Jobs';
$this->params['breadcrumbs'][] = $this->title;
// 以下の$this->registerCssFileを追加
$this->registerCssFile("@web/css/jobs.css", [
  'depends' => [\app\assets\AppAsset::className()],
], 'css-jobs');
?>
<div id="jobs">
  <?php foreach($categories as $category): ?>
・・・省略

結果(出力ソースコード)

上記、適用により、出力されるHTMLソースコードを確認すると以下の様にスタイルシートが読み読み込まれているのが確認できます。

<link href="/css/site.css" rel="stylesheet">
<link href="/css/main.css" rel="stylesheet">
<link href="/css/jobs.css" rel="stylesheet"> ← 適用した分

registerCssFileについて

registerCssFileは、スタイルシートの外部リソースを読み込む為のメソッド(関数)になり、引数については以下の構成になります。

@web/css/jobs.css読み込むファイルを指定
※ @webはwebディレクトリのエイリアス
‘depends’ => [\app\assets\AppAsset::className()]読み込む順番を指定
AppAssetで指定しているスタイルの後に読み込み
‘css-jobs’ハンドル名

このリソースの読み込みは次の項で実際に使用します。

タイトルとURLをコピーしました