laravel 開発日記 第７回 ～ ビュー回りの調整 ～

今回は、ビュー回りの修正について。

（１）illuminate/html パッケージのインストール
（２）実際のソース

（１）illuminate/html パッケージのインストール
このパッケージをインストールしておくと、 もろもろHTMLの生成が楽になるらしいので、さくっとインストール

（参考）
■初めてのLARAVEL 5 : (16) Formの作成（ララ帳）
https://laravel10.wordpress.com/2015/03/08/%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AElaravel-5-16-form%E3%81%AE%E4%BD%9C%E6%88%90/

（２）実際のソース
あとあとやりたいことのために、以下のものを使えるようにしています。

・Bootstrap
・jQuery UI
・jquery.xdomainajax.js（クロスドメイン対応）

■Bootstrap（公式）
http://getbootstrap.com/

■jQuery UI（公式）
https://jqueryui.com/

■別ドメインの外部URLからidやclassなど特定の箇所を抜き出しサイトに表示する方法
http://highfivecreate.com/blog/course/tips/817.html

■Javascriptスクレイピング！jquery.xdomainajax.js
http://www.kaasan.info/archives/1858

なお、ビューの構成は以下のように設計しました。

/laravel/resources/views
┃ ┣layout.blade.php … すべてページののガワテンプレート
┃ ┣inc/ … 共通パーツの格納場所
┃┣footer.blade.php … 共通フッタ
┃┣header.blade.php … 共通ヘッダ
┃┗nav.blade.php … 共通ナビ
┃ ┣その他フォルダ/ … 各個別ページを格納
┃ また、publicフォルダは以下のようになってます。

/laravel/resources/views
┃ ┣css/ ┃┣share.css … 共通CSS
┃┗sticky-footer-navbar.css … bootstrap拡張。高さ固定のフッターに。
┃ ┣files/ … phpにより生成されるPDFや、アップロードした画像ファイルなどを格納
┃ ┣fonts/ … フォントフォルダ。取り急ぎ、bootstrapのアイコン表示用フォントが入っている
┃ ┗js/ ┣jquery.xdomainajax.js … クロスドメイン用JS
┗share.js … カスタムJS では、実際のソースを紹介します。

【layout.blade.php】

<!DOCTYPE html>
<html lang="ja">

@include('inc.header')

@yield("bodyTag")

@include('inc.nav')

{{-- フラッシュメッセージの表示 --}}
@if (Session::has('flash_message'))
<div class="container-fluid">
    <div class="alert alert-success">{{ Session::get('flash_message') }}</div>
<!-- /.container-fluid --></div>
@endif

<div class="container-fluid">
@yield("content")
<!-- /.container-fluid --></div>

@include('inc.footer')

</body>
</html>

すべてのガワテンプレートとなるファイル。
[ヘッダ]、[ナビ]、[フッタ]をインクルードし、 また個別ページから、 [bodyタグ]、[コンテンツの中身] を、受け取って表示します。
bodyタグは、ページごとに別のIDをつけ、 JS、CSSを個別に反映させる想定です。

【footer.blade.php】

<footer class="footer">
    <div class="container">
        <p class="text-muted">&copy; 2015- XXX All Rights Reserved.</p>
    </div>
</footer>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<!-- jQuery UI -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js'></script>

<!-- jQuery xdomainajax -->
<script type="text/javascript" src="/js/jquery.xdomainajax.js"></script>

<script type="text/javascript" src="/js/share.js"></script>

普通のフッタ。 最後に各種JSを読み込んでいます。

【header.blade.php】

<head>

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

<title>XXX</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Jquery UI -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" media="all" />

<link rel="stylesheet" href="/css/share.css">

{!! Html::style("css/sticky-footer-navbar.css") !!}

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

こちらはヘッダ。 各種CSSとか読み込んでいます。

【nav.blade.php】

<nav class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">[タイトル]</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">

                @if (Auth::guest())
                    <li><a href="{{ url('/auth/login') }}">ログイン</a></li>
                @else
                    @if (Auth::user()->level == 'admin')
                        <li><a href="{{ url('/auth/register') }}">ユーザー新規登録</a></li>
                    @endif
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ Auth::user()->name }} <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="{{ url('/auth/logout') }}">ログアウト</a></li>
                        </ul>
                    </li>
                @endif

            </ul>

        </div><!--/.nav-collapse -->
    </div>
</nav>

こちらがナビ。 各種出しわけは、以下のようにしてます。

@if (Auth::guest())
    <<< ここは非ログイン状態のとき表示 >>>
@else

    <<< ここはログイン状態のとき表示 >>>

    @if (Auth::user()->level == 'admin')
        ここは、ユーザー権限「admin」の人のみ表示
    @endif

@endif

これらのテンプレートを呼び出す各個別ページは、以下のような記述になっています。

【home.blade.php】

@extends('layout')

@section('bodyTag')
<body id="home">
@stop

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Home</div>

                <div class="panel-body">
                    ようこそ！{{ Auth::user()->name}} さん<br>
                    ログインされました。
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

以上。 ビュー回りのソースのご紹介でした。

laravel

Posted by dog-ears