laravel 開発日記 第7回 ~ ビュー回りの調整 ~
今回は、ビュー回りの修正について。
(1)illuminate/html パッケージのインストール
(2)実際のソース
(1)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/
(2)実際のソース
あとあとやりたいことのために、以下のものを使えるようにしています。
・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
以上。 ビュー回りのソースのご紹介でした。
Discussion
New Comments
No comments yet. Be the first one!