muleの技術ブログ

DefaultPasswordHasherの仕組みと使い方【CakePHP】

CakePHPでは安全なパスワード生成のために、DefaultPasswordHasherを利用することが推奨されています。公式のCMSチュートリアルのログインの実装でもDefaultPasswordHasherを用いたパスワードの不可逆圧...

2024/12/01 11:25

ログインの実装 【CakePHP5】

概要 CakePHP5がリリースされて約1年になりますが、現状ではログインの実装に関する日本語版公式マニュアルに誤りがあり、マニュアル通りにログインを実装するとエラーになります。※2024年9月23日現在 ※英語版のCMS Tutorial

2024/09/23 18:08

投稿日の表示を「日時」から「〜前」に置換する【CakePHP4】

概要 記事一覧を作る際には「投稿日」を表示することが一般的です。 当ブログでも↓のように表示されています。 今回の記事では、CakePHPで日付をそのまま表示するのではなく、現在日時と比較して「〜前」と表示する方法を紹介します。 前提 以下

2024/08/03 09:59

投稿日を「日時」から「〜前」に置換する【CakePHP4】

概要 記事一覧を作る際には「投稿日」を表示することが一般的です 当ブログでも↓のように表示されています では、CakePHPで日付をそのまま表示するのではなく、現在日時と比較して「〜前」と表示するにはどうすればいいのでしょう？ 前提 以下の

2024/08/03 09:59

新しいタブを開く【自作chome拡張機能】

概要 自作のchromeアドオン開発時に、新しいタブを開いて操作することが必要なケースがありました。 簡単に実装できましたので、メモとして残します。 コード ディレクトリ構成 manifest.json { "manifest_v

2024/07/15 18:43

入力文字量に応じて、高さを自動調整するtextareaを作る【JavaScript・jQuery】

概要 textareaの高さを文章量に応じて自動調整するように作れば、長文テキストを入力した際に内容が把握しやすくなります。 高さの自動調整はJavaScript（jQuery）を使えば簡単に実装することが可能です。 デモ Resultに表

2024/07/06 10:12

入力文字量に応じて、高さを自動調整するtextareaを作る【JavaScript・jQuery】

概要 チャットツールなどを作る際に、textareaの高さを文章量に応じて自動調整するように作れば、長文テキストを入力する際に内容が把握しやすくなります。 高さの自動調整はJavaScript（jQuery）を使えば簡単に実装することが可能

2024/07/06 10:12

ChatGPTのAPIを組み込んで対話型コンソールを作る【CakePHP4・OpenAI】

概要 ChatGPTのAPIを組み込んで、ChatGPTのような対話型のコンソールを実現するとします。 ↓のようなフォームを作ります。 こんにちは、と入力して送信すると... 会話が成立します。（回答はChatGPTのAPIが生成したもので

2024/07/02 11:11

ひとつのテーブルに対して、複数のデータでリレーションする【CakePHP4】

概要 ユーザテーブルと記事テーブルはすでにリレーションしてるけど、編集者やチェック担当者など、他のリレーションを設けるにはどうするか？というお話です。 前提 下記のようなUsers（ユーザ）テーブルと、Articles（記事）テーブルがある

2024/06/22 10:39

ひとつのテーブルに対して、複数のデータでリレーションする【CakePHP4】

概要 ユーザテーブルと記事テーブルはすでにリレーションしてるけど、編集者やチェック担当者など、他のリレーションを設けるにはどうするか？というお話です。 前提 下記のようなUsers（ユーザ）テーブルと、Articles（記事）テーブルがある

2024/06/22 10:39

draggableで要素をドラッグアンドドロップで移動する【jQuery】

概要 Webサービス制作時に、簡単なエディタが必要になったことがありました。 エディタを作るために、「親要素上で、子要素をドラッグアンドドロップで移動する」機能を実装する必要がありました。 その際に『draggable』を利用したので、今回

2024/05/26 18:12

GPT4oで画像からWebサイトを作ってみた。

概要 GPT4oは基本的に無料（一部制限あり）で使えるようです。※2024年5月19日現在 「デザイン画像をアップロードすると、HTMLとCSSを返してくれる」という噂を小耳に挟んだので、実際に試してみました。 もしも再現度が高ければ、「デ

2024/05/19 10:58

GPT4oで画像からWebサイトを作ってみた。

概要 GPT4oは現状（2024年5月19日現在）、制限はありますが基本的に無料で使えるようです。 デザイン画像をアップロードすると、HTMLとCSSを返してくれるという噂を小耳に挟んだので、実際に試してみました。 もしも再現度が高ければ、

2024/05/19 10:58

記事編集画面のブロックの種類を限定する ②埋め込み【WordPress】

概要 WordPressのブロックエディタには、数多くのブロックパターンがありますが、全部使う人は少ないでしょう。 また、自作テーマを作る際には、全ブロックパターンに対応するCSSを指定するのは非常に大変です。 そのような場合に、ブロックエ

2024/05/05 12:09

SVGのアップロード【WordPress】

概要WEB制作の現場で、SVGファイルを利用するケースはよくあります。WordPressの場合は、画像はメディアライブラリにアップして利用するのが一般的です。しかし、普通にやると画像のように弾かれてしまいます。方法以下、2つの方法いずれかで

2024/04/29 18:10

プラグインなしで会員限定のページを作る【WordPress】

やりたいこと概要wordpressでブログを運営する際に、会員のみを対象とした記事配信をするとします。仕組み記事が会員限定か否かは、カテゴリーもしくはカスタムタクソノミーを用いて判定します。会員限定の記事にアクセスした際に、以下の挙動をする

2024/04/27 12:06

ブロックのマークアップを一部置換する【WordPress】

はじめにWordPressの記事編集画面で、ブロックを追加すると、記事表示時にマークアップが自動で書き出されます。WEB制作の現場では、CSSやJSを指定するために、マークアップの変更が必要なケースがあります。そのような場合に利用するコード

2024/04/21 21:52

保護中: Web制作やシステム開発時における「修正指示」を効率化するアプリを開発しました！

2024/04/18 13:56

保護中: 「Captly」で解消したい、ウェブ制作現場の悩み

2024/04/15 15:06

FormDataの使い方【JavaScript】

概要FormDataオブジェクトとは、フロントエンドのデータをサーバに送るためのオブジェクトです。これを使えば、HTMLのフォームの形式にとらわれずに、サーバにデータを送信することができます。Ajaxと組み合わせて利用するのが一般的です。「

2024/04/06 10:50