muleの技術ブログ

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

他のDBにアクセスする 【WordPress】

事例仮にですが、同じサーバ上でWordpressとCakePHPを両方運用していると思います。当然WPにはWP用のDBが、CakeにはCake用のDBがあります。この際にWP側のDBからCake側のデータを取得するには、どうすれば良いでしょ

2024/03/31 17:56

検索フォームの基本 【WordPress】

検索フォームの設置フォーム作成：searchform.php<formmethod="get"action="<?phpechoesc_url(home_url('/'));?&

2024/03/23 12:23

Controllerからリダイレクト【CakePHP4】

概要以下のようにControllerで行われる、CakePHPのリダイレクトについて、いろいろなパターンがあったのでメモとして残します。classSamplesControllerextendsAppController{publicfun

2024/03/10 11:13

GetパラメータでWord検索フォームを作る【CakePHP4】

やりたいこと・Getパラメータを利用した、テキスト検索フォームの実装（で、文字列"hoge"を含むデータを検索する）・文字列がスペースで区切られている際はAND検索（"hogepiyo"であれば&qu

2024/02/04 18:00

templateで利用する関数を作る【CakePHP4】

概要CakePHPではControllerで利用する関数については、Componentを利用すれば簡単にできます。しかし、ここで定義した関数はtemplateからは利用できません。templateで利用する関数を作成するには、src/Vie

2024/01/03 10:40

URLSearchParamsの基本：getパラメータを管理する【JavaScript】

概要これまではURLのパラメータを管理するときに、文字列としてパラメータの追加・削除等を行なっていました。しかし、URLSearchParamsを使ったところ、制御がより容易になったで、メモとして残します。使い方前提こんなURLでサイトを表

2023/12/17 10:16

CakePHP4のQuery Builder【CakePHP4】

概要CakePHP4のQueryBuilder（DBからデータを取得するクエリの生成）についての基本を簡単にまとめます。応用的な内容（matching）については以前に以下の記事で紹介したのですが、基本的な内容についても検索すると、旧バージ

2023/12/10 11:40

CakePHP5のインストール

概要前回、下記の記事でCakePHP5のCakePHP4との変更点をまとめました。前回の記事の時点では、公式にの日本語ページのインストール情報が4系のままだったので、インストールはしませんでしたしかし、改めて確認したところ、5系のインストー

2023/12/04 19:10

CakePHP環境でTCPDF 【CakePHP4】

TCPDFとは？PHPでPDFを生成するためのライブラリです。HTMLとCSSを用いてデザインを作り、それをPDFとして書き出すことができます。※ただし、利用できるHTMLタグ・CSSプロパティにはかなり制限があります。こちらの外部サイト様

2023/11/18 11:28

ロギング 【CakePHP4】

概要デバッグや変数の内容のチェックを行う際に、通常であればvar_dump()等の関数を使います。しかし、controllerではvar_dumpを使ってもviewが描画されないのでチェックができません。そこで、ロギングという方法を使って、

2023/11/03 12:41

GD（Graphics Draw）で画像サイズ変更・圧縮【PHP】

概要GD（GraphicsDraw）はPHPで画像処理を実装するためのライブラリです。画像の圧縮やサイズ変更、回転だけではなく、フォーマット変換や複数画像の組み合わせ等、さまざまな操作を行うことができます。今回は、画像のサイズ変更・圧縮の方

2023/10/15 11:14

Element(Viewの共通化)【CakePHP4】

概要今回はCakePHP4でのviewの一部分を共通化する方法について解説します。フロント構築をする際に、ヘッダーやフッター、サイドバーなど、各ページに共通して読み込む要素は、別ファイルに切り分けて読み込むのが一般的です。例えば、WordP

2023/10/07 18:16

CakePHP5がリリースされました！変更点まとめ

概要先日(2023年9月10日)についにCakePHP5が公開されました。CakePHP4が2019年だったので、約4年ぶりのメジャーアップデートとなります。2019年当時に初めてCakePHP4に初めて触ったのですが、CakePHP3の情

2023/10/01 18:35

データ削除時に関数を実行する【CakePHP4】

概要DBのデータをdelete()等で削除する際に一定の処理を実行する。前提条件以下のようなデータを持つusersテーブルがあるとする。●テーブル名：users・データ：id（通し番号）・データ：name（名前）・データ：thumbnail

2023/10/01 11:06

関連するテーブルのデータをまとめて削除する。【CakePHP4】

概要親テーブルを消した際に、子テーブル・孫テーブルもまとめて削除する。前提条件以下の3つのテーブルがあるとする。・ParentsTable・ChildrenTable・GrandChildrenTable以下のようなリレーションである。・P

2023/09/24 09:33

Sessionの基本 【CakePHP4】

概要下記の記事で以前、Sessionの継続時間の設定について解説しました。今回はCakePHPにおけるSessionの基本的な使い方について解説していきます。コード一覧書き込みwrite()$this->request->get

2023/09/18 11:40

ルーティング（URL・パスの指定）その2 〜アクションにパラメータを渡す〜【CakePHP4】

ルーティングの基本CakePHPのルーティングは、config/routes.phpで指定します。ルーティングの基本については、別の記事で紹介してますので、「CakePHPでルーティングってどうやるの？」という人は下記をご参照ください。ルー

2023/09/17 10:46

Controller内で共通の変数を定義する【CakePHP4】

基本各Controllerで定義している同じ内容の変数を共通化します。修正前src/Controller/SamplesController.php・・・省略class SamplesController extends AppContro

2023/09/09 12:45

uuidの生成と使い方 【CakePHP4】

uuidとは？CakePHP公式サイトには、以下のように記載されています。UUID メソッドは RFC 4122 準拠のユニークな識別子を生成するのに使います。 UUID は 485fc381-e790-47a3-9794-1337c0a8

2023/08/26 12:13

ドラッグアンドドロップでファイルアップロード【jQuery・PHP】

チャット系のウェブサービスによくあるのが、ドラッグアンドドロップによるファイル添付です。今回はそのような機能の実装方法について解説します。ドラッグアンドドロップでファイルを表示するデモ背景がピンクの箇所にローカルの画像をドラッグアンドドロッ

2023/08/20 14:54

中間テーブルの基本と使い方 〜多対多リレーションシップ〜 【CakePHP4】

中間テーブルの利用シーン中間テーブルを利用するのは、「多対多リレーションシップ」を実装する場合です。類似の概念として「1対多リレーションシップ」があります。まずは、両者の違いを解説します。1対多リレーションシップ：中間テーブル不要1対多の関

2023/08/13 06:34

エラーチェックの基本【CakePHP4】

デバッグモード概要デバッグモードにすると、以下のように管理画面上でエラーメッセージの内容をエラー箇所を含めて具体的に確認することができます。エラーの行数も具体的に教えてくれますので、これを使えば開発を便利に行えます。ただし、このままサービス

2023/07/30 13:41

自作chome拡張機能 〜アイコンクリックでスクリーンショット撮影〜

概要自作chrome拡張機能を使えば、簡単に今表示しているサイトのスクリーンショットを撮影することが可能です。撮影のみであれば数行のコードで実装できますので試してみましょう。コードmanifest.json{ "name&quo

2023/07/22 19:06

Shadow DOMについて解説

概要Shadow DOMとは、DOMをカプセル化する技術です。これを使うことによって他の要素とは独立したDOMを作ることができます。例えばグローバルなCSSは、ShadowDom内の要素には効かないことになります。基本コード See th

2023/07/15 20:48

HTMLをreactのでテンプレート化する際に必要な修正

概要htmlをreactでテンプレート化しようと思うと、タグや属性の修正をかなり求められます。今回は事例を一覧で紹介していきます。コード以下のようなコードでテンプレート化するとしますconst Content = () => {

2023/06/24 11:24

技術ブログを3年書き続けて感じた、プログラミングに関する記事を公開するメリット【100記事目記念！】

概要このブログ、パーマリンクを都度考えるのがめんどくさいので、単純にarticle○○みたいに数字をふってました。この記事は「article100」なので、100記事目というわけです！※一度公開した記事を削除したりもしてるので、公開記事数は

2023/06/18 11:35