開発日記

2024-05-15 16:18:44 #Laravel

LaravelでWebサイトを作ろう

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

2023年にUnityでWebGLで色々とやり始めて、コンテンツをアップする環境作りたいなあと考えてた。WordPress使いたくなくてｗサイトも長く放置してるし、Laravelの収得もせなあかんよなあと思ったりで、2024年になって「Laravelでサイトをリニューアルしよう計画」を発動。

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

その時にインストールしたと思われるLaravelの残骸がローカルにいくつか残ってたんで、これを使ってWebページを表示してみよう。
＊動かんかったりしてたが、トラブル時演習としてエラーメッセージから生成AI使ってライブラリのアップデートとかして復旧。

WPにする以前のサイトはフロントもHTMLとCSSの演習として作ってたが、まあデザインセンスが無いんでｗ、今回はネットからデザインテンプレートをチョイスしてさっくりと組み付けたい。
色々と見て回り、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セクションをひとつだけ置く。

シンプルにテンプレート設定とcontentセクションのみの構成のテスト用のViewを/viewsの直下に「index.blade.php」で書く。

/views/index.blade.php

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

これを表示するルートを設定する。ルートはURLに対する表示対象の設定で、/routes/web.phpに書く。
コントローラは今のところ無いんで、ルート（'/'）のリクエストに、上の「index」View（index.blade.php）を返すよう設定。

/routes/web.php

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

これで、ブラウザからLaravelのルートにアクセスすると、テンプレートが表示される（はず）。

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

取りあえずテンプレート表示まで完了。ここから別件やり始めてしばしLaravelから離れた。

2024-05-15 11:02:01 #メモ

画像の回転

ここ最近、紙の資料をやり取りする会合に参加せざるを得ずで、無駄な紙資料が廻ってくる。
紙ゴミにしかならんので、スマホで撮影してMacでzipにまとめてるが、写真画像って無駄にデカいんで、別用途で作ったAutomatorスクリプトで内容確認できる程度のサイズに一括でリサイズしてたが、見返すとサイズがまちまちになっとる。

Macに移してFinderのクイックルックで縦横合わせに回転後、リサイズさせてたんで、試しに画面キャプチャしてクイックルックで回転、Affinity Photos 2で開くと回転してないー！(；´Д｀)

調べるとExif設定で回転させてるだけで、元画像はそのまんまやった。そういやえらい昔にこの手の面倒くさいのがあった記憶が。
AutomatorスクリプトでGraphicsMagickを使ってリサイズさせてたが、その保存後の画像は実画像が回転してるんで、GraphicsMagickのパラメータの順番とか変えたり、回転適用後の変換とかがいるんやなあ。

取りあえずは面倒くさいんでメモ。
しかし、何年経ってもこういう細々した面倒が続いてんなあ。もう21世紀も四半世紀経ってんやでｗ。

2024-05-11 17:20:48 #このサイト

サイトリニューアル

随分前にこのサイトを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ツールになってるし、ReactやNext.jsはフロントエンドでお作法程度には使うにしても、やっぱメインはビジネスアプリ系のバックエンド＋同期型フロントエンドをやりたいんやで、って事で、取りあえず現実認識としてPHPで続けるならLaravelやらんとなんよなあ。

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

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

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

開発の経緯や機能実装等はまた追々。取りあえずようやくで開設できました。

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

Copyright © BOOBY AND BOOTY 2024