2024-06-24 13:13:24 #Laravel

LaravelでWebサイトを作ろう2

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

テンプレートのトップにあるキャラクタを変更。
そういやAffinityにしてからイラスト的なの描いたこと無かったなあ。まあ元絵がプリミティブな図形の組み合わせっぽいんで、それに合わせて簡単に描く。

元絵の雰囲気が出んなあｗ。まあいいや。

さていよいよCMS機能の実装。認証処理のlaravel/uiと合わせたCRUDをチュートリアルで再確認（後にlaravel/uiはLarave 6時代の遺物と知って、Breezeを使う事になる。実装周りがコンパチブルでよかった）。チュートリアルって書いてるまんまをトレースするだけなんで、何回やってもあんま頭に残らんのよなあ。

とりあえず実装予定の「お知らせ」「ポートフォリオ」「お問い合わせ」のデータベースの各テーブルを設計。といってもお知らせはテキスト1行、ポートフォリオはタイトルとアイコン画像と説明文、お問い合わせはタイトルとメールアドレスと本文と返信文と、今のところリレーションも無くシンプル構成。これにID、登録日時、更新日時、公開フラグを付けてとりま完成。

artisanコマンドでマイグレーションを作成して、テーブル設定を書いてマイグレート。グループ開発はこれが非常に便利やが、個人ではただ面倒くさいだけやなｗ。まあスキル習得目的もあるんできっちりやろう。

Laravelのセキュリティ面の運用周りをまだよく把握してないんで、サーバはartisanコマンド周辺は入れてない。なのでマイグレートできないんで、ローカルDBからのクエリダンプで作成。
後にマイグレートに--pretendオプションを付けることでクエリ吐き出しが出来ると知ってからは、先ずはオプションの実行でクエリ取得するフローにした。

当初は管理画面は別ページで作ろうと考えてたが、ログイン周りは色々と制御しやすそうなのと、コスパが良さ気で面白そうという理由で、今回は公開ページそのまんまで、ログイン時に管理画面化する事にした。
デザインやレイアウトの変更時の面倒くささもあるんで、将来的には別画面にするかもしれない。

さて、先ずはテンプレートにどっかとあるメールフォームの実装。フォームの入力を受け取って、バリデーション、DB登録、メール送信。メールは自分への通知メールと、併せてメールアドレスの入力があった場合に「お問い合わせを受け付けました」メールを送信しようと思ってたが、今時は何に使われるか分からんので、自分への通知メールだけにした。

メール送信のLaravel的実装作法も知れればと、当時試してたwrtn.jpで「Laravelでのメール送信方法を解説して」と聞いて、回答に倣ってメールサーバの設定とコードの実装。
まあAIなんで、メールサーバ設定周りの細々したとこやテンプレートの書き方、メール送信の取り回し等々の微妙にあちこち間違えてたり足らんかったりで、それら細々を調べて補完しながらなんとか設える。この頃はまだLaravel理解の理解度が低くていちいちが面倒くさい。
どーやってもメールサーバにつながらんかったのが、キャッシュクリアしたらすんなりつながったりしながら実装完了。

面倒くさそうなメール実装を抜けたんで、いよいよ各コンテンツのCRUD実装。
ここまでLaravelはBladeとBootstrapが標準、と思ってたが、Laravel 8でBootstrapからTailwindに変更されてる事を知る。まあそれでもBootstrapはまだスタンダードっぽいし、何より今回使ったテンプレートがCDNでBootstrapを使ってるんで、今後もBootstrapの使用で続行。
BladeとBootstrapを調べながら、各コンテンツの組み付けを進める。

bladeまとめのメモ

この頃Laravel自体についても色々調べてて、2017年辺りでPHP FWのトレンドがCakePHPからLaravelに移った事を知った。VR始めたタイミングに入れ替わりしてたとかなあ。(；´Д｀)
そしてここまではサイトに残ってたLaravel 6を使ってたが、（当時の）現状はバージョン10と知った。おぉ。これはせめて8にはしとかなあかんやろと、新たにLaravel 8をセットアップ。そしてBreezeを導入。ここまで作ったテンプレートやメール送信周りを移植。

そして今回の目的のひとつ、サイト更新にGit導入。
使ってるレンタルサーバはだいぶ前にGitレディになってたが、WordPressにしたり、他の自作Webアプリも長く放置状態で、設定も面倒くさいし特に必要性が無いままで使ってなかった。
今回は、今後の色々な拡張性も考えて、テストサイトと本番サイトの運用と、サイトにGit pullを組み込んでの、開発環境（エディタ内Git操作）とブラウザでのGit pullで、サイト更新を完結しよう、という目論見。

今まで作ったサイトもローカルでは既にGitで管理してて、たんびたんびで機能拡張や改修をしてきてたが、サイト更新はSSHだったんで、時間が開くほど更新確認が面倒になってｗ、結果ローカル環境はどんどんバージョンが進んでるが、サーバ上は昔のまんま、という状況がここ数年続いて、差分がエグいことになってたりしたｗ。

せっかくの今回のサイトリニューアルも、サーバ側Gitを導入しとかんと面倒くさいサイトがまたひとつ増えるだけになりかねないという懸念ｗ。しかし設計から設定、設置まで全部自分でやらんとならんのでイニシャルが面倒くさ過ぎんよなあｗ。
そして面倒の甲斐あって、サーバ側Git設置の効果は非常に成功。機能拡張や改修から更新が実にスムースで、Gitの便利さを再認識した。

実は最初の更新で、ローカルMAMPはPHP8がやったが、サーバはPHP7.6やったという事実を認識。(；´Д｀)
サーバに上げてもエラーで動かずで「なんでや？」ってなった。ガチガチのバージョン縛りなんやなあ。artisan周りを入れてなかったんで、そこら辺かと思ったりして原因究明を手間取らせた。(；´Д｀)
そしてローカルLaravelをPHP7.6ベースにしてインストールし直して、ここまでの機能を移植。サーバ側も8にした時用にブランチを残しつつ、新たに7.6用にブランチ切り直すというちょーめんどくさい行程が入った。ホンマ勘弁。(；´Д｀)
何がめんどいって、ローカル環境でパス無しで実行するPHPがMAMPで無いバージョン8なんで、artisanとか実行する時はMAMPまでのパス付きのPHPを実行せんならんという。ホンマ面倒くさい。

2024-05-30 14:18:53 #Unity

シーンやオブジェクトにメモ

WebGLでコース周回をランキングするゲームでも作ろうかと考えながら久々にUnityのプロジェクトを開いた。時間が空くと何が何やら分からんなあｗ。シーンやオブジェクトに簡単にメモ書きしたいなあと毎回思ってんなあと思いながら、そういや前にそんなAsset使ってたなあとAssetStoreを探して、ふと、いちいちAsset入れんでも「comment」とかスクリプト作ってStringをSerializeしたらええんちゃうんか？と思い付いた。でもコンポーネントも書かんとInspectorのフィールドサイズてSerialiseで変えれんやろか？と調べたらいけた。

[SerializeField, Multiline([表示行数])] private string textfield;
[SerializeField, TextArea([最初表示行数], [最大表示行数])] private string textArea;

Multilineは左に項目名入るしスクロールせんからあかんな。TextAreaはバッチグー。
まあそもで日本語入力はちょっとバグってるからあれやがｗ、目的には十分。
シーンのコメントはCommentとか空のオブジェクト作ってアタッチ、オブジェクトはそのまんまアタッチして、コメント書いたらオッケー。
何ならOnSceneGUI()でメモのtext ui生成したらシーンでも確認できるやろけどそれは今回は過剰に逸脱するんで気が向いたら案件。

そしてこれはようやくで初のObsidianの開発メモからの丸まんまのコピペ。

2024-05-29 08:39:51 #つぶやき

ひとりデスマ

このサイトをLaravelで作ろうと思った時、ついでにGit運用も（個人では使わんので忘れてきてるんで）今回ちゃんと導入して業務スキームっぽくしてみようかと、サーバにbareリポジトリ作って、テストサイトにテストブランチ、本番サイトに本番ブランチでセット、サイト内でローカルブランチから更新するモデルを構築した。

そうしてチェックボックスリストで課題管理するようにしたら、面倒くさいクライアントと思考停止エンジニアがPDCA回してるような状態になって、細々した課題が永遠に追加され続けるという一人デスマーチになってもうてたｗ。

まあ過去色々と個人サービス作っては塩漬けされてったのも、間が空いては課題や変更箇所が分からんようになってって、面倒くさくなってやる気がブーストするまで放置ってパティーンになってもうてたんで、今回の運用モデルはアジャイルが勝手に回ってくれて非常に助かる。とりま課題の取捨選択もちゃんとせんとなんよな。
資料大事、ルーティーン大事、そして取捨選択も大事よなあ。

時短な流れで今回デザインテンプレート持ってきてそのまんまLaravelでCMSはめるってモデルでやったけど、「自分で選んだデザインテンプレートでCMS化」ってメニューもありかもなと思った。変な内部構造のWPやらを使うより、ずっとシンプルで将来的なスケーラビリティもあってええやんって気がする。
もうちょっとちゃんとモデル化して営業モデルにしてみようか。

2024-05-20 10:27:50 #affinity

たまーにイライラさせられてた長年のAffinity Photosの謎が解消された話

冒頭に結論

Affinity Photosのレイヤーには「画像」と「ピクセル」がある。

＊レイヤーパネルのアイコンが違う

• 「画像」レイヤー：拡大縮小したり回転したりフィルターかけてもレイヤーデータが劣化しない。画像自体の編集はできない。
• 「ピクセル」レイヤー：いわゆる普通の画像レイヤーで、切ったり貼ったり書き込んだりできる。

「画像」レイヤーを編集したい場合、「レイヤー」メニューで「ラスタライズ」して、「ピクセル」レイヤーに変換する。

AdobeからAffinityに乗り換えた

イラレもフォトショもバージョン3から使ってた。やがてCSになりCCでサブスクになりとアプデしてきたが、フリーランスになって以降はもっぱら仕様書等々の資料作成と、たまに動画を作成するくらいで、バージョンアップの度に価格が吊り上がってたAdobeは超絶低コスパの厄介なツールになってたが、Adobeの買収＆買収で、代替アプリはすっかり焼け野原ｗ。乗り換え先が無くて長い期間倦ねてた。

そんなところにAffinity登場。注目してた所にセールをやってくれたこともあって、Adobe CCからAffinityに乗り換えたのはもう数年前。ちなみに動画編集は同時期にDaVinci Resolveに乗り換えた。

Adobeのつもりで使うと超絶理解不能な根本設計からがまるで違うアプリやが、動作は速いし、設計思想を理解しさえすれば、Adobeと比べてもほぼほぼ遜色無い機能が揃ってる。何より買いきりが助かる。

バージョン2になって更にいい感じに仕上がって、非常に重宝してる（せめて縦書き文字をサポートしてくれたらもう何も不満は無い。…いや、Designerのパス編集周りはもうちょっと頑張ってほしい。後、Photosで切り抜き選択とか画像拡張とかAI機能も頑張れ、ちょー頑張れ）。

たまーに遭遇してた不具合

しかし、色々とやりたいことの機能割り振りが分かりにくいAffinityで、特に謎な不具合として認識してたのが、Affinity Photosでたまーに部分箇所の複製やパッチ修正をしたい時、画像の一部を矩形や投げ縄で領域選択してコピペしようとすると、なぜかレイヤー全部しかコピペできず、部分のコピペができない、という現象。

「バグか？バグやな」と、その時その時で色々と別のやり方を工夫して処理してたが、長く使ってると「これはバグや無いな」な感じ。ごくたまーにしか遭遇せんが、遭遇する度に隔靴掻痒でちょーイライラさせられる。

そしてまた「それ」に遭遇した！いい加減怒髪天で、この機会に徹底的に原因追求して解消する！

原因究明

ってことで、「Affinity Photos 2 矩形選択 全体がコピーされる」とか「Affinity Photos 2 部分選択してもレイヤーごとコピペされる」とかでググってみる（ちなみに「Affinity Photos」を指定せんとフォトショの情報ばっかダクダク出てくるし、「2」を指定せんと「無印（1）」の情報とか、iPad版の情報ばっか出てくるのが非常にダルい）。が、そこはまだまだマイナーアプリなんか、現象がユニークなんか、全然ヒットせんなあ。そしてYoutubeに行って探してみると、見る動画見る動画、普っ通ーに矩形や投げ縄選択で部分コピペしてる。いやうん、ワイもいつもはしてるんやけどやな。今出来んこの現象がなんなんかっていうのがやな。

うーん。まあ試しに、素材集から適当に選んで部分選択してコピペってしたらやなあ…

出来るがな！ほならば、ファイルを開いて自動選択して削除…

出来るがな！えぇ〜？さっき出来んかったのってどうやってたんやったっけか…？と、色々記憶と作業を辿って、「開いてる画像に画像ファイルをドロップ」すると、部分選択してもレイヤー丸ごとしかコピペできない。（後に、たまーになってたのは「クリップボードから新規作成」と判明）

キタコレ！

何やろ？何が違うんやろか？と目をこらすと、レイヤーのアイコンが違うぅ！

マウスポインター当てると出るヘルプタグの「ピクセル」「画像」でググると、Affinityには「画像」レイヤーと「ピクセル」レイヤーがあり、「画像」レイヤーはAdobeでいうスマートオブジェクトみたいなもん（？）で、劣化せず扱えるデータの塊らしい。

これを普通に編集したい場合は、レイヤーを右クリックで「ラスタライズ」すると「ピクセル」レイヤーになり、部分選択してコピペしたり削除したりできるようになる、と。

Affinityのドキュメントサイト「画像レイヤーを「ピクセル」レイヤーにするには」には、ピクセルレイヤーに変換する方法として「[ペイントブラシツール]または別のブラシベースのツールを選択して、レイヤーにペイントします。」と書いてるが、描けへんがな！Affinityってこういうトラップが結構あんのよなあ。

そういえばそう、矢印とか罫囲みとかをちょっと描き込もうとして「なんや？なんで書けへんねん！」ってイラつくのもたまーになってた。結局、別レイヤーで描いたり、Designerで描き足してエクスポートしたりしてたがな。いやああああ。くっそやなああああｗ。

ということで、冒頭の結論やった。

結構重要度の高い、Affinity Photos使う上で理解必須な仕様やと思うんやが、今までAffinity Photosの使い方調べた中で目にしたことが無いんよなあ。どのルート通ったら知れたんやろか？

まあこれで今後のストレスがかなり軽減された気がする。結果オーライ。

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