前回、MAMP環境でLaravelの白い画面を出しました。今回はLaravelのファイル構成を見ながら、URLパスの変更やHello worldなどを行いました。
【目次】
※参考:Laravel元年!インストールしてMAMP環境で白い画面出す!! - クモのようにコツコツと
やったこと
前回表示した「白い画面」はこちら
ここから手を加えていきます。 全体の流れとしてはこんなことを行いました。
- Laravelのファイル構成確認
- パスの/publicをなくす
- 白い画面の場所を突き止める
- 白い画面にHello world
- 下層ページを作ってHello wold
それではいきまSHOW!
Laravelのファイル構成確認
第一階層はこちら
前回インストールした「Funter」というソフトのおかげで隠しファイルも表示されています♪
パスの/publicをなくす
前回表示した白い画面のパスはURLのルート/
ではなく/pablic
でした。
そしてURLのルート/
画面はディレクトリ一覧が表示されてしまいました。
うーむ…ちょっとよろしくないですねこれは。。
できればルート/
自体を「白い画面」にしたいです。調べたところ、いくつかの方法がありました。
- Webサーバのhttpd.confファイルでURLを変更する
/public
の中身をルート直下に移動して、関連するパス設定を修正する/public
以外のディレクトリを別のディレクトリに移動し、/public
の中身をルート直下に移動し、関連するパス設定を修正する- ルート直下に
.htaccess
ファイルを置く
httpd.confを修正する
一応、この方法はMAMP環境では成功したのですが、Laravelファイルの外側(Webサーバ)での設定のため、今後オンライン上にアップするときなど、環境ごとに都度設定をしなければならない。Laravelの中で設定が完結できた方がといいなーと感じました。
Apache LaravelでHelloWorldを出そうと思ったらつまづいた - ドドスコblog
/publicの中身をルート直下する
こちらは割とシンプルそうな方法ですが、まだ/public
とそれ以外のファイルの位置関係をそこまで理解しきれていないため、少し不安を感じる。
※参考:Laravelのドキュメントルートを変更する - Laravel学習帳
/publicとそれ以外を分離する
こちらはシステムとデザインを分離する方法でシステム的には綺麗になるようです。が、より大掛かりな作業でハードルが高いかも。。
※参考:Laravelで、public(公開)フォルダの位置を変更する際の設定 - Qiita
.htaccessを置く
Laravelのコアなファイル構成の変更はあまりしたくないため、.htaccessをいじる程度の方法はないかなーと調べたところ…なんと、ありました!!
※参考:LaravelのURLからpublicを消す | gfonius.net
リンク先のGISTのコード
※参考:Php laravel 5.5 project .htaccess file · GitHub
IfModule
やRewriteCond
(条件)、RewriteRule
(処理)などはリダイレクト系の記述。13行目に/public
のパスがあります。
※参考:.htaccess の書き方(リダイレクト編) - Qiita
この.htaccessファイルをルートディレクトリ/
に置いたところ…
やった!!ルート/
ページがファイル一覧ではなく「白い画面」になりました!
白い画面にHello world
/publicの中身
さて、/public
ディレクトリは無傷のままURLのみを変更できました。次に「白い画面」を修正したい(Hello world的な)。
まずは/public
ディレクトリの中身を見てみる。
このディレクトリにはCSSやJSなど表示される画面についてのファイルが入っているようです。fabiconもありますね。
index.phpを開く
index.php
を開いてみる(コメントは省略)
<?php define('LARAVEL_START', microtime(true)); require __DIR__.'/../vendor/autoload.php'; $app = require_once __DIR__.'/../bootstrap/app.php'; $kernel = $app->make(Illuminate\Contracts\Http\Kernel::class); $response = $kernel->handle( $request = Illuminate\Http\Request::capture() ); $response->send(); $kernel->terminate($request, $response);
ふむふむ……一つだけわかったこと。この中には「白い画面」に表示されている要素は何一つない!…と、いうこと。。
/public
のindex.php
がどのような処理を行っているか解説されている記事がありました。
※参考:PHPフレームワーク「Laravel」における処理の流れと、ルーティングを理解しよう (1/3):CodeZine(コードジン)
- オートロードファイルの読み込み(
vendor/autoload.php
) - アプリケーションインスタンスの生成(
bootstrap/app.php
) - HTTPカーネルによる処理
- リクエストのディスパッチ(移管)
このうちの3番目「HTTPカーネルによる処理」で読み込まれるapp/Providers/RouteServiceProvider.php
というファイルの中に、4番目の「リクエストのディスパッチ(移管)」先であるroutes/web.php
を読み込む処理が書かれていると。ふむ、見てみましょう。
RouteServiceProvider.phpを開く
app/Providers/
ディレクトリの中を見てみる。
あった!RouteServiceProvider.php
。これを開く(コメントは省略)
<?php namespace App\Providers; use Illuminate\Support\Facades\Route; use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider; class RouteServiceProvider extends ServiceProvider { protected $namespace = 'App\Http\Controllers'; public function boot() { parent::boot(); } public function map() { $this->mapApiRoutes(); $this->mapWebRoutes(); } protected function mapWebRoutes() { Route::middleware('web') ->namespace($this->namespace) ->group(base_path('routes/web.php')); } protected function mapApiRoutes() { Route::prefix('api') ->middleware('api') ->namespace($this->namespace) ->group(base_path('routes/api.php')); } }
みっけた!!確かにあった!mapWebRoutes
メソッドのところ。
<?php //(省略) protected function mapWebRoutes() { Route::middleware('web') ->namespace($this->namespace) ->group(base_path('routes/web.php')); }
protected
はアクセス制御(そのクラスとサブクラスのみアクセスできる)mapWebRoutes
メソッドを定義Route
クラスのmiddleware()
メソッドの設定(引数はweb
)namespace()
の引数を$this->namespace
にgroup()
のbase_path()
の引数をroutes/web.php
に
この最後のところがroutes/web.php
を読み込む設定!
routes/web.phpを開く
routes/
ディレクトリの中を見てみる。ファイルが4つある。
その中のweb.php
を開いてみる(コメントは省略)。
<?php Route::get('/', function () { return view('welcome'); });
Route
クラスのget()
メソッドの設定- 第一引数:
/
(ルート)の場合 - 第二引数:無名関数を実行
view()
メソッドでwelcome
を返す
ルート/
にアクセスがあった場合にwelcome
を表示する、という処理が書かれている。
このwelcome
は resources/views
ディレクトリの中のwelcome.blade.php
を指しています。
※参考:Laravelルーティングの基本とよく使われるルーティングパターン
/resources/views/welcome.blade.php`を開く
/resources/views/
の中身を見てみる
あった、welcome.blade.php
だけが入ってます。開いてみる
<!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet"> <!-- Styles --> <style> /*(省略)*/ </style> </head> <body> <div class="flex-center position-ref full-height"> @if (Route::has('login')) <div class="top-right links"> @auth <a href="{{ url('/home') }}">Home</a> @else <a href="{{ route('login') }}">Login</a> @if (Route::has('register')) <a href="{{ route('register') }}">Register</a> @endif @endauth </div> @endif <div class="content"> <div class="title m-b-md"> Laravel </div> <div class="links"> <a href="https://laravel.com/docs">Docs</a> <a href="https://laracasts.com">Laracasts</a> <a href="https://laravel-news.com">News</a> <a href="https://blog.laravel.com">Blog</a> <a href="https://nova.laravel.com">Nova</a> <a href="https://forge.laravel.com">Forge</a> <a href="https://github.com/laravel/laravel">GitHub</a> </div> </div> </div> </body> </html>
ふい〜。ようやく「白い画面」の中身に相当するファイルにたどり着いた!省略したけどhead
タグの中にCSSのスタイルも直で書かれていた。
ファイル名にあるblade
はLaravel専用のテンプレートエンジン。このファイルの中では二重波括弧{{ }}
で囲われた部分や、@
が頭についたif文などがその書式にあたります。
白い画面にHello worldする
さて、果たしてホントにこのファイルが「白い画面」にあたるのか確かめたく、「Hello world」的な修正を加えてみます。
<body> <div class="flex-center position-ref full-height"> <!--(省略)--> <div class="content"> <div class="title m-b-md"> Laravelテストですー </div> <p>こんにちは、ららべる♪</p> <div class="links"> <a href="hoge/subpage">Sub Page</a> <a href="https://laravel.com/docs">Docs</a> <a href="https://laracasts.com">Laracasts</a> <a href="https://laravel-news.com">News</a> <a href="https://blog.laravel.com">Blog</a> <a href="https://nova.laravel.com">Nova</a> <a href="https://forge.laravel.com">Forge</a> <a href="https://github.com/laravel/laravel">GitHub</a> </div> </div> </div> </body>
. title
部分のテキストをうち変え(テストですー)を追加- その下に
p
タグ追加(こんにちは、ららべる♪) .links
の中のa
タグの頭にSub Page
を追加(hoge
はアプリ名)。
さあ、どうだ?
きた!変わったー。間違いなくこのファイルが「白い画面」ですな、はい。
下層ページを作ってHello woldする
/subpageを表示(Not found)
さて、.links
の中のメニューは基本的にlaravel
オフィシャルの外部ページです。
一つ目に下層ページ/subpage
を設定してみました。開いてみると…
そんなページはありません(Not found)と…。さてどうするか。
routes/web.phpに下層ページの設定を追記
先ほどのroutes/web.php
を再度開き、/subpage
の設定を追記します。
<?php Route::get('/', function () { return view('welcome'); }); //下層ページ設定 Route::get('/subpage', function () { return view('subpage'); });
この時点ではまだ404のままです。(画面は少し変わりますが)
/resources/views/subpage.blade.php`を作る
/resources/views/
の中にsubpage.blade.php
を作成します。(welcome.blade.php
をベースにしている)
<!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sub Page | Laravel</title> <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet"> <!-- Styles --> <style> /*(省略)*/ </style> </head> <body> <div class="flex-center position-ref full-height"> <!--(省略)--> <div class="content"> <div class="title m-b-md"> Laravelサブページですー </div> <p>こんにちは、ゲストさん</p> <div class="links"> <a href="hoge/subpage">Sub Page</a> <a href="https://laravel.com/docs">Docs</a> <a href="https://laracasts.com">Laracasts</a> <a href="https://laravel-news.com">News</a> <a href="https://blog.laravel.com">Blog</a> <a href="https://nova.laravel.com">Nova</a> <a href="https://forge.laravel.com">Forge</a> <a href="https://github.com/laravel/laravel">GitHub</a> </div> </div> </div> </body> </html>
meta
タグのtitle
を変更(Sub Page | Laravel).title
を変更(Laravelサブページですー)p
タグを変更(こんにちは、ゲストさん)
さあどうだ…
やた!下層ページが表示された! (何度か、変更が反映されないことがありましたが、MAMPのサーバを停止、起動すると最新版になりました)
最後に
まだPHPフレームワークらしいテンプレートやデータベースみたいなコンテンツにはなっていないですが、ひとまずLaravelのファイル一式の中でどこが画面に表示されているファイルになっているかまでは理解できました。
この先に進むにはMVC(モデル・ビュー・コントローラー)アーキテクチャの理解が必要とのことで、次回以降に取り組みたく思います。その先には懸案になっているオンライン上(Heroku)へのアップも控えています。それではまた!