開発日記

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から離れてた。

2024-05-15 16:02:17 #テスト

テスト

2024-05-11 14:45:59 #このサイト

サイトリニューアル

随分前にこのサイトをWP（WordPress）にした。

当時よく使われてるCMSの筆頭で、サイトの管理画面にセットアップメニューがあったんで、見場のいいテンプレートや便利なプラグインが使えてコスパがええし、カスタムも色々やってみて、WP案件でも取ってみるか、とか思ってたりしてセットアップした。

が、WP自体の設計の面倒くささと、各種プラグインのおびたすき感、何よりアップデートの度にカスタムしたCSSやテンプレートが上書きされるのにウンザリ（まあこれはそのまんまで使ってたからしゃーないけどｗ）して、その内、発信自体も面倒くさくなって、とうとう放置状態になりましたとさ。めでたしめでたし、ではない。

最近はまってたWebGLで色々実験したいことがあっても、面倒くさいWPを触る気にはなれんかったんで、WPはとっとと捨てて、すっかり放置状態の自作FW（フレームワーク）「BABFW」にリプレースして、リファクタもろとも進めるか、それとも仕事で使ってる「CakePHP」を使うか、とか考えつつも、結局面倒くさいままに幾星霜。

そうしてアプリやサービスの開発に打ち込んでたVR界隈もすっかり冷え込んで行き、使ってたUnityにもケチが付いたり、ゲームエンジンのスタンダードがUE5（UnrealEngine5）に移る流れになったりと、時代が変わってって、老いらくのプログラマー人生も後何年続けられるんやろか、と考え出したりして、最後に自分のスキルがある仕事をやり尽くしたいと、またぞろWebアプリ界隈に復活！とポチポチとネットで案件を探してみるも、CakePHPの案件はすっかり無いやーんｗ。というか、PHP関連案件自体が少なくなった上に、ほぼほぼ「Laravel」になってるやーん。浦島太郎み強すぎやがな。

Googleトレンドで調べてみたら、どうやらワイがVRを始めた2017年頃に、ちょうど入れ替わりでLaravelが大躍進、対比してCakePHPは下がって行ってたんやなあ。諸行無常。

今更RustやGoを使ってどうこうはちょっと無いし、PythonはAI筆頭に各種専門家のお手軽ITツールになってるし、TypeScriptやReactやNext.jsはフロントエンドでお作法程度には使うにしても、やっぱメインはビジネスアプリ系のバックエンド＋同期型フロントエンドをやりたいんやで、って事で、取りあえず現実認識としてPHPで続けるならLaravel一択なんやなあ。

＊ちなみにUnity案件もあったらなあと探してるけど、ゲーム関連ばっかで、ビジネスアプリでっていうのはさすがに全然無いんよなあ。個人的にはWebGLメインにこの辺の可能性を今後このサイトで探っていきたいところ。

ということで、今年に入ってLaravelの習得にチュートリアルをちょこちょこやってたけど、やっぱサービスを自作せんと身に付かんのよなあ、と言う事で、サイトリニューアル計画発動。

フリーのテンプレートからええ感じのを探して拝借、Bladeで組み付けて、実装機能の検討、サイト公開に関するLaravelの設定やら調べて、Git使った運用モデルを策定、途中、サーバ要件でPHPのデグレとかを挟みつつ、CMSとしての各種機能を実装、で、ようやく当初予定の最低限の機能が揃って公開に至りましたよと。

今までの開発経緯や機能実装等は、またこの開発日記に書いたりするかもしれない。取りあえずようやくで開設できてよかった。

BOOBY AND BOOTYでは、主にPHPでのWebアプリ開発を承っています。お仕事関連の情報ページも（近々）作成予定です。
前のWPでいつの間にか消えてたお問い合わせフォームは、今回デザインテンプレートからしっかり入っていますので、お仕事の相談やお問い合わせがありましたらお気軽にどうぞ。