大企業営業から未経験ITエンジニアを目指すブログ

アラサー大企業営業から未経験ITエンジニアを目指すブログ。日々学んだことを忘備録的に記します。

Laravelビューの解説

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">

 アプリにはデフォルト言語(ロケール)が設定されており、実行時にアクティブな言語を変更したりもできるが、getLocale()によって現在のロケールを取得できる。
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

meta要素にhttp-equiv属性を指定すると、そのmeta要素はプラグマ指示子(pragma directive)となります。 プラグマ指示子とは“実行命令を指示するもの”のことで、ユーザーエージェント(ブラウザ)に対して文書の“状態・挙動”を指示する役割があります。 http-equiv属性の値には、以下の4つのキーワードを指定することができます。

https://www.creativevillage.ne.jp/2819

 この指定をするとInternet Explorerを使用している人のブラウザが指定より古ければ互換性のある最新のもの、新しければ互換性のあるモードを設定できる。

エッジ モードでは、Windows Internet Explorer が利用できる最も互換性の高いモードでコンテンツを表示します。これは、実際には "ロックイン" パラダイムに違反します。Windows Internet Explorer 8 の場合は、IE8 モードと同じ動作になります。仮に、Windows Internet Explorer の将来のリリースでさらに互換性の高いモードがサポートされた場合、エッジ モードに設定されたページは、そのバージョンでサポートされている最も互換性の高いモードで表示されます。ただし、それらのページを Windows Internet Explorer 8 で表示した場合には、IE8 モードで表示されます。Windows Internet Explorer の将来のバージョンでページのコンテンツをレンダリングしたときに予期しない結果が起こる可能性があるため、Web 開発者はエッジ モードの使用をテスト ページや他の実用以外の目的に限定することをお勧めします。

https://docs.microsoft.com/ja-jp/previous-versions/technical-document/cc817574(v=msdn.10)?redirectedfrom=MSDN

 

<meta name="viewport" content="width=device-width, initial-scale=1">

→<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

に修正する。

name="viewport"・・・スマートフォン表示に対応する

width=device-width・・・表示領域の横幅をデバイスと同じ横幅にする

initial-scale=1・・・表示倍率を1倍にする

shrink-to-fit=no・・・iOSSafariで表示倍率を自動的に縮小する処理を無効にする

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

 →これを設定するとjQueryといったライブラリに自動的にあらゆるリクエストヘッダにトークンを追加するように指示できる。これによってAJAXベースのアプリに簡単にCSRF保護を設定できる。

<title>{{ config('app.name', 'Laravel') }}</title>

→configファイルに記載されている設定を呼び出す

 第一引数は設定値の名前、第二引数はオプションで、設定オプションが存在しない場合に、返されるデフォルト値。

config/app.php

 'name' => env('APP_NAME', 'Laravel'),

.env

 APP_NAME=Laravel

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">

<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>

<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
&nbsp;

 →半角スペース
</ul>

<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@guest
<li><a href="{{ route('login') }}">Login</a></li>
<li><a href="{{ route('register') }}">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>

<ul class="dropdown-menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>

<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
@endguest
</ul>
</div>
</div>
</nav>

@yield('content')
</div>

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

 

エラーはエラーが出たところを強調するか、

どこでエラーが出ても一番上に表示するか

選べる。

今回は各ページで出たところを強調して、一番上のは無くすことに。