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">© 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
以上。 ビュー回りのソースのご紹介でした。