開発日記：Laravel

カテゴリを解除

2024-05-15 16:11:55 #Laravel

LaravelでWebサイトを作ろう

＊このサイトの開発記録です。

色々要件が積み上がって、「Laravelでサイトをリニューアルしよう計画」発動。

先ずはLaravelの最低限の概要を収得しよう。
2021年頃にチュートリアルとかやってた資料が残ってるけど、ほとんど記憶に無いｗ。資料を読み返しつつ、ディレクトリ構成やルーティング、ViewとBladeという基本構成を再履修。

インストールしたと思われるLaravelがローカルにいくつか残ってたんで、これを使ってWebページを表示してみよう。
＊実際は動かなかったが、トラブル時の練習にエラーメッセージから生成AIに手伝って貰いながらリカバリーした。

WPにする以前は自分でスクラッチで作ってたが、まあデザインセンスが無いんでｗ、今回はネットからデザインテンプレートをチョイスして、さっくりと組み付けたい。色々見て回って、Free Bootstrap Themes & Templates - Start Bootstrapから、Freelancer - One Page Theme - Start Bootstrapをピックアップ。
自分じゃ作れないポップな感じが良き。

LaravelはBladeというテンプレートエンジンが標準装備されてる。専用タグを利用して、ベースとなるテンプレートを作成、各コンテンツViewからテンプレートにコンテンツをはめて表示する。
今のところトップページだけのシングルページなんで、何ならそのまんま組み付けてもいいが、今後のデザインやレイアウトの変更を考慮して、テンプレートを作成しよう。

ダウンロードしたデザインテンプレートのindex.htmlのファイル名を「index.blade.php」にして/resources/views/layouts/にコピー。これをテンプレートにしていく。

  • index.blade.phpの内容を編集する。
    • <title>～</title>を<title>{{ config('app.name', 'Laravel') }}</title> にすると、.envのAPP_NAMEの値が入る。@yield('title')にして、Viewで@section('title', '[タイトル]')として置き換えてもいい。
    • コンテンツを表示したい箇所に@yield('[セクション名]')を書く。Viewの@section('[セクション名]')〜@endsectionの内容が表示される。
    • その他、とりあえず不要な部分は{{-- ～ --}}で挟んでコメントアウトする。
  • 画像素材は/public以下に格納する。
    • テンプレート内の参照リンクを href="{{ asset('[public以下の画像ファイルパス]') }}" に修正する。
  • css、js等のファイルをpublic/css、public/jsにコピーする。
    • css内の参照リンクを asset('[public以下の画像ファイルパス]') に修正する。
  • テンプレートを利用するViewを、 resource/view にindex.blade.phpで作成
    • テンプレートの指定「@extends('layouts.index')」（パスは「/」を「.（ドット）」、「.blade.php」は省いて記述）と、@section('')〜@endsectionの間に、テンプレートに表示するコンテンツを書く。

コンテンツはデザインに合わせて「お知らせ」と「ポートフォリオ」を置く予定。「ポートフォリオ」の内容が込み入ってるんで、どう組み付けるかを検討しつつ、とりあえずは表示テストとしてcontentセクションをひとつだけ置く。

そして、Viewはシンプルにテンプレートとcontentセクションのみの構成を/viewsの直下に「index.blade.php」で置く。

/views/index.blade.php

@extends('layouts.index')
@section('content')
  テストです。
@endsection

これを表示するルーティングの設定をする。ルーティングとはURLリクエストに対する表示する内容の設定で、設定ファイルは/routes/web.phpにある。
コントローラは今のところ無しで、サイトURLを入れたルート、「'/'」のリクエストに、上のView「index」（index.blade.php）を返すよう設定。

/routes/web.php

Route::get('/', function () {
    return view('index');
});

これで、ブラウザからLaravelにアクセスすると表示される（はず）。

LaravelはWebサーバ機能を持っていて、コンソールから$ php artisan serveとすると利用できる。
ローカル環境ではMAMPに入ってるLaravelを使ってるんで、設置のLaravelパスに/publicを付けてアクセス。
無事テンプレートが表示された。やったー。

ここまでやって、WebGLのスマホ表示やジョイスティックの実装実験をやってたんで、1月ほどLaravelから離れてた。

カテゴリを解除