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

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

FormDataの使い方【JavaScript】

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

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

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

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

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

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

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

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

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

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

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

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

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

CakePHP4のQuery Builder【CakePHP4】

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

CakePHP5のインストール

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

CakePHP環境でTCPDF 【CakePHP4】

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

ロギング 【CakePHP4】

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

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

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

Element(Viewの共通化)【CakePHP4】

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

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

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

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

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

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

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

Sessionの基本 【CakePHP4】

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

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

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

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

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

uuidの生成と使い方 【CakePHP4】

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

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

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

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

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

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

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

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

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

Shadow DOMについて解説

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

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

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

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

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

パスワード変更を実装する【CakePHP4】

やりたいこと・前提以下のような流れの、パスワード更新フォームを作るとします。①フォームから、元パスワードと新パスワードを送信①現パスワードの一致チェック②新パスワードを登録前提公式の「シンプルな認証と認可のアプリケーション」を参考に、ログイ

パスが通ってるはずなのにComposerコマンドが実行できない【さくらインターネット・ssh】

環境さくらレンタルサーバのスタンダードプランやりたかったことCakePHPの開発環境を新規で作ろうとしていました。sshアクセスして、composerをインストールしてコマンド実行。試したこと概要コマンドのパスを確認して、該当ディレクトリ（

テーブル名の変更に、最小限のコード変更で対応する【CakePHP4】

前提下記のようなテーブル構造でサービスを運用しているとします。①users：id・email・password②informations：id・user_id・tel・adress・thumbnailusersとinformationsは親

Integrity constraint violation: 1052 Column ‘id’ in where clause is ambiguous エラーについて【CakePHP4】

エラーが発生するコードsrc/Controller/SamplesController.php<?php//・・・省略use Cake\ORM\TableRegistry;class SamplesController extends

Integrity constraint violation: 1052 Column ‘id’ in where clause is ambiguous エラーについて【CakePHP4】

エラーが発生するコードsrc/Controller/SamplesController.php<?php//・・・省略use Cake\ORM\TableRegistry;class SamplesController extends

セッションストレージ（ログイン状態の保持）の継続時間を変更する【CakePHP4】

概要CakePHP4では、公式ドキュメントを参考にログイン機能を実装すると、自動でブラウザにログイン状態を保持してくれます。ログイン状態はセッションストレージに保持されます。しかし、このログイン状態の保持時間が短く、少し席を外したりすると、

chome拡張でcontent_script.jsとbackground.jsでデータをやりとりする。

概要chome拡張を作っていると、content_script.jsとbackground.jsでデータのやり取りをする必要性があります。例えば、サイト内をクリックした際に、FetchAPIを起動したい時ですね。昔はcontent_scri

ChatGPTで遊んでみた 〜「このブログについてどう思いますか？」と聞いてみた〜

概要先月くらいから仕事（プログラミング）にChatGPTを使い始めました。具体的なコードに関する質問については、ほとんど100％正しい（少なくとも動く）回答を返してくれました。じゃあ、もうちょっとざっくりした質問をしてみたらどんな回答が来る

WordPressで記事編集画面のブロックの種類を制限する

概要WoredPressのブロックエディタには、数多くのブロックパターンがあります。画像で紹介したものはごく一部です。しっかり数えてはいませんが、上記の3倍以上はあると思います。大変便利ではあるのですが、当然使わないものも数多くあります。.

プログラミングの現場でChatGPTを使ってみた 〜その2：実際に仕事で使ってみた〜

前回の記事のおさらい以前、下記の記事で、ChatGPTについての所感について、プログラマとしての視点でまとめました。今回は、「実際に仕事の現場でどんなふうに使っているのか」をまとめていきます。概要ざっくり言うと、「質問をして、返ってきた答え

プログラミングの現場でChatGPTを使ってみた

前回の記事のおさらい以前、下記の記事で、ChatGPTについての所感について、プログラマとしての視点でまとめました。今回は、「実際に仕事の現場でどんなふうに使っているのか」をまとめていきます。概要ざっくり言うと、「質問をして、返ってきた答え

WordPressサイトと静的サイトを共存させた際に403エラー

どんな時に起きる？固定ページのパーマリンクと同名のディレクトリが存在する。403エラーがが発生するのは、静的ページのディレクトリと同名の固定ページコンテンツが存在するケースです。これだけではピンと来ないと思うので、具体的な事例を見てみましょ

ContactForm7で送信完了画面に遷移する（プラグインなし）

ContactForm7では、デフォルトで送信完了画面に遷移する機能がありません。フォーム画面下部に送信完了メッセージが表示されて、送信完了となります。しかし、案件では、クライアントが送信完了画面の設置を希望することも多くあります。今回は、

ContactForm7で送信完了画面に遷移する（プラグインなし）

ContactForm7では、デフォルトで送信完了画面に遷移する機能がありません。フォーム画面下部に送信完了メッセージが表示されて、送信完了となります。しかし、受託の案件をしていると、クライアントが送信完了画面の設置を希望することも多くあり

プログラミングの現場でチャットGPTを使ってみた 〜実用性と使ってみた感想〜

昨今話題のチャットGPTについて昨今話題のチャットGPTですが、やはりものすごく便利なようです。大手企業でも社員が業務に使ってしまうケースが多かったようで、禁止令を出す企業もあるほど。「禁止令が出る」ということはそれだけ便利なのは間違いない

タイトル

CakePHPの初期ディレクトリ構造から、各ファイルの役割を解説する【CakePHP4】④templates

templatesディレクトリとはsrcディレクトリでは、ウェブアプリケーションの中心となる、MVCモデルのうちV（View）の設定を行います。MVCモデルの解説については、下記外部サイト様をご参照ください。srcディレクトリと同様に、WE

CakePHPの初期ディレクトリ構造から、各ファイルの役割を解説する【CakePHP4】③src/controller

概要MVCモデルにおいてModelで取得したデータを、View（表示）に渡すのが主な役割になります。CakePHPでウェブサービスを作る際には、もっともよく触る箇所のひとつです。MVCモデルとは？下記外部ページ様をご参照ください。Model

CakePHPの初期ディレクトリ構造から、各ファイルの役割を解説する【CakePHP4】②src/model

srcディレクトリとは？srcディレクトリでは、ウェブアプリケーションの中心となる、MVCモデルについての設定を行います。MVCモデルの解説については、下記外部サイト様をご参照ください。Webサービスのコアとなるディレクトリですので、Cak

CakePHPの初期ディレクトリ構造から、各ファイルの役割を解説する【CakePHP4】②src/model

srcディレクトリとは？srcディレクトリでは、ウェブアプリケーションの中心となる、MVCモデルについての設定を行います。MVCモデルの解説については、下記外部サイト様をご参照ください。Webサービスのコアとなるディレクトリですので、Cak

CakePHPの初期ディレクトリ構造から、各ファイルの役割を解説する【CakePHP4】②config

ディレクトリ構成の概要下記の画像をご参照ください。開発時によく触るファイルについて抜粋して解説します。各ファイルの概要app_local.php全文<?php/* * Local configuration file to provi

CakePHPの初期ディレクトリ構造から、各ファイルの役割を解説する【CakePHP4】 ①概要

はじめにCakePHPはウェブフレームワークとして非常に多機能で便利なのですが、多機能なだけに構成しているファイルが非常に多いです。なので、慣れないうちは、「これをするにはどこを触ったらいいんだろう」ということになりがちです。今回の記事では

Macでローカルにnode.js環境を構築して動かしてみる

前提・MacOSのバージョンmacOS Monterey 12.3.1作業の流れ①homebrewをインストールする②node、npmをインストールする。パスを通す③実際に動かしてみる：Pupeteerでスクショを撮影する①nodebrew

Macでローカルにnode.js環境を構築して動かしてみる

前提・MacOSのバージョンmacOS Monterey 12.3.1作業の流れ①homebrewをインストールする②node、npmをインストールする。パスを通す③実際に動かしてみる：Pupeteerでスクショを撮影する①nodebrew

APIGateway + LambdaでAPIを作る【node.js編】

概要APIGatewayって何？Lambdaって何？という方は下記の記事をチェックしてください。LambdaとAPIGatewayの基本設定先ほどと同じ記事の「実装に作ってみよう」の項目をチェックしてください。※Lambda関数の設定で「N

定数の定義・利用【CakePHP4】

ライブラリのパス等を、複数のコントローラーやその他ファイルで利用することがあると思います。その際に、いちいちそれぞれのファイルで変数を定義するのは非効率ですし、コードがわかりづらくなる可能性もあります。そこで、「定数を定義しよう」となるわけ

定数の定義・利用【CakePHP4】

ライブラリのパス等を、複数のコントローラーやその他ファイルで利用することがあると思います。その際に、いちいちそれぞれのファイルで変数を定義するのは非効率ですし、コードがわかりづらくなる可能性もあります。そこで、「定数を定義しよう」となるわけ

HTMLで3Dモデルを描画する

iPhone12からカメラにLiDARスキャナが搭載されました。これにより、誰にでも簡単に3Dモデルを搭載することが可能になりそうです。ウェブサイトに3Dデモを表示するケースも今後増えていくと思います。今回は、簡単にHTMLで3Dモデルを描

HTMLで3Dモデルを描画する

iPhone12からカメラにLiDARスキャナが搭載されました。これにより、誰にでも簡単に3Dモデルを搭載することが可能になりそうです。ウェブサイトに3Dデモを表示するケースも今後増えていくと思います。今回は、簡単にHTMLで3Dモデルを描

バイナリ形式の画像をアップロードする【HTML・JS(jQuery)・PHP】

通常であれば、画像のサーバへのアップロードはformを使って行います。しかし、imgやcanvas要素の画像を直接アップロードしたいケースもあります。そのような場合には、通常のアップロードは行えないため、一度バイナリ形式でアップロードして、

canvas要素を使って、画像の上にテキストを描画。【HTML・JavaSctript(jQuery)】

ウェブ開発を行う際に、「画像の上にテキストを描画したい」というケースがあったため、やり方のメモを残しました。HTMLのcanvasオブジェクトとJS(jQuery)を使えば、実装できます。デモ・解説デモ See the Pen can

HTMLのcanvas要素を使って、画像の上にテキストを描画。【HTML・JavaSctript(jQuery)】

ウェブ開発を行う際に、「画像の上にテキストを描画したい」というケースがあったため、やり方のメモを残しました。HTMLのcanvasオブジェクトとJS(jQuery)を使えば、実装できます。デモ・解説デモ See the Pen can

DOM操作でHTML要素の追加・削除【jQuery】

jQueryでHTMLの操作をしたい時があります。そのような場合に必要なのがDOM操作です。追加・削除等、様々なパターンを紹介していきます。同じ要素追加のメソッドでも、追加位置に違いがあったりします。それについても把握しておきましょう。ap

配列の操作（追加・削除・差し替え他）【JavaScript】

JavaScriptには、配列操作のためのメソッドがいくつか用意されています。かなり複雑な操作もかなり簡単に行えますので、ひととおり把握しておきましょう。要素の追加unshift() ： 配列の先頭に値を追加const array = ;a

配列の操作（追加・削除・差し替え他）【JavaScript】

JavaScriptには、配列操作のためのメソッドがいくつか用意されています。かなり複雑な操作もかなり簡単に行えますので、ひととおり把握しておきましょう。要素の追加unshift() ： 配列の先頭に値を追加const array = ;a

attr()でHTMLの属性を操作する 【jQuery】

概要jQueryのattr()はHTMLの属性の取得・操作ができます。例えば、クラス名を取得したり、変更したり、削除したりといった感じです。以降、使い方を事例を挙げつつ解説していきます。使い方基本属性の取得$(HTML要素).attr(&q

SetTimeoutで指定したタイマーを解除する

setTimeoutの使い方概要setTimeoutはとは以下のように、指定時間後に関数を実行するために使われる関数です。setTimeout(関数名,時間)デモ See the Pen setTimeOut by masahiro

ユーザの承認を得て、audioの自動再生を可能にする。chrome・safari対応【JavaScript】

audioを自動再生しようとすると発生するエラーこんな風に自動で音声を再生しようとすると・・・。$(function () { $("#audio1").play();});chromeだと以下のように怒られます。pl

jsで簡単にスライダーを実装する。【swiper.js：ver8】

はじめに簡単にスライダーを実装するライブラリとして有名なswiper.js。コードの紹介はいろいろなページで行われていますが、バージョンが古いものも多いため、最新バージョンであるswiper8での実装について解説します。実装デモとりあえずよ

jsで簡単にスライダーを実装する。【swiper.js：ver8】

はじめに簡単にスライダーを実装するライブラリとして有名なswiper.js。コードの紹介はいろいろなページで行われていますが、バージョンが古いものも多いため、最新バージョンであるswiper8での実装について解説します。実装デモとりあえずよ

画像をランダムに切り替えて表示する

ウェブサービスを作っていると、「表示をランダムに切り替えたい」という場面があります。例えば、背景画像を一定の選択肢からランダムに切り替えると、サイトを見るたびに新鮮な印象を与えることができるでしょう。それ以外にも、「乱数を使ってランダムな値

freelance hubにて記事をご紹介いただきました。

この度、freelansu hub様にて、当ブログの記事をご紹介いただきました。紹介していただいた記事は、「フリーランスエンジニアの収入不安と独立前に準備しておくべきこと」という割とシビアな内容を書いたものだったので、ご連絡いただいた際は正

EC2にSSHアクセスするためのユーザ・キーを追加する。（AWS）

アクセスユーザ名についてEC2（Amazon Linux）にsshからアクセスする場合、デフォルトのユーザ名はec2-userです。開発の際には、他のユーザを追加したいケースもあるかと思います。今回は、アクセスユーザ名の変更・追加方法につい

EC2にSSHアクセスするユーザ・キーを追加する。

アクセスユーザ名についてEC2（Amazon Linux）にsshからアクセスする場合、デフォルトのユーザ名はec2-userです。開発の際には、他のユーザを追加したいケースもあるかと思います。今回は、アクセスユーザ名の変更・追加方法につい

EC2の概要・立ち上げからSSHアクセスまでの手順（AWS初心者向け）

EC2とは？公式によると、下記のように解説されています。『Amazon Elastic Compute Cloud (Amazon EC2) は、Amazon Web Service (AWS) クラウドでスケーラブルなコンピューティングキ

APIGateway + Lambda(Python)でAPIを作る

APIGatewayとLambdaAPIGateWayとは公式によると、下記のように説明されています。『フルマネージド型サービスの Amazon API Gateway を利用すれば、デベロッパーは規模にかかわらず簡単に API の作成、公

AWSでs3に設置したファイルを公開する

S3とは？「Amazon Simple Storage Service」の略称です。公式では、以下のように説明されています。『Amazon Simple Storage Service (Amazon S3) は、業界をリードするスケーラビ

AjaxとCsrfトークンの取り扱いについて【CakePHP4】

CakePHPでAjaxを利用する際には、csrfトークンについての知識が必要になります。今回の記事では、具体的な使い方について紹介します。CakePHPでのAjaxの使い方Templates/samples/demo.php(テンプレート

ルーティング（URL・パスの指定）【CakePHP4】

デフォルトの設定CakePHPではルーティングがデフォルトで設定されており、以下のようにコントローラ名、関数名を参照します。https://ドメイン/コントローラ名/関数名具体例src/Controller/SamplesControlle

トランザクション(try,catch,rollback)の実装【CakePHP4】

DataBaseの絡むプログラムを実装するには、整合性の保持のために、エラーが出たら処理前の状態に戻す（ロールバックする）必要性があります。今回は、これをCakePHPで実装する方法を解説します。以下のように簡単に実装できます。実装例以下、

サイト移転時のエラー Composerで”Cannot redeclare” 【CakePHP4】

経緯CakePHPで構築したサイトを別サーバに移転する必要があったので実施。ファイルとDBを新サーバに移管し、表示確認したところ500エラーがでました。DBへのアクセス情報等に誤りはなく、原因不明。解決までの流れ①composer更新エラー

メール送信の基本【CakePHP4】

CakePHPではメールの送信を簡単に実装することが可能です。もっとも基礎的な、コントローラ内でメール送信を行う方法について解説していきます。基本のコード（コントローラ内で実装）以下のように実装します。//src/Controller/Sa

ラジオボタン・チェックボックスの値を受け取る【HTML・PHP】

選択肢を含むフォームを作る際には、ラジオボタン・チェックボックスが用いられます。ひとつだけ選択させる場合にはラジオボタン・複数選択の場合はチェックボックスです。今回はこれらを使ってフォームを作る方法を解説します。ラジオボタンの場合ラジオボタ

関数をCommandで実行する【CakePHP4】

CakePHPで構築したサービス内で作成した関数を、コマンドで実行したいケースがあります。例えば、一定時間おきにCron実行する際などです。今回はそのような場合に利用するコードを紹介します。基本のコード●コマンド//src/Command/

画像アップロード機能の作成 【CakePHP4】

ウェブサービスでフォームを作成する際に、ユーザロゴ等画像をアップロードするケースがよくあります。今回はCakePHP4での実装方法について解説していきます。Cake固有の関数等もあるので通常のPHPとは少々記法が違いますが、割と取り扱いやす

Dateから「年・月・日、曜日、時・分・秒」を個別に取得する。【JavaScript】

Dateオブジェクトを、利用する際に、年・月・日、曜日、時・分・秒を個別に取得したいケースもあります。今回はその方法について解説していきます。デモResult上が、取得したDateオブジェクトをそのまま表示したもの。Result下が、Dat

ローカルストレージの使い方【JavaScript】

Webサービスを開発していると、前回表示した際の情報をブラウザに保持しておきたいケースがよくあります。そんな時に便利な機能が「ローカルストレージ」です。今回はこちらについて解説していきます。ユーザがページをリロードした時も、リロード前の行動