はじめにWordPressの記事編集画面で、ブロックを追加すると、記事表示時にマークアップが自動で書き出されます。WEB制作の現場では、CSSやJSを指定するために、マークアップの変更が必要なケースがあります。そのような場合に利用するコード
会員登録後、有料プランで広告を非表示に
詳しくはこちら
経験をもとにプログラミングの知識や、フリーランスとしての体験談について紹介しています。 読者の方の抱えている問題を解決するお手伝いができるように、わかりやすく具体的なノウハウをまとめていますので、ぜひご覧ください。
chome拡張でcontent_script.jsとbackground.jsでデータをやりとりする。
概要chome拡張を作っていると、content_script.jsとbackground.jsでデータのやり取りをする必要性があります。例えば、サイト内をクリックした際に、FetchAPIを起動したい時ですね。昔はcontent_scri
ChatGPTで遊んでみた 〜「このブログについてどう思いますか？」と聞いてみた〜
概要先月くらいから仕事（プログラミング）にChatGPTを使い始めました。具体的なコードに関する質問については、ほとんど100％正しい（少なくとも動く）回答を返してくれました。じゃあ、もうちょっとざっくりした質問をしてみたらどんな回答が来る
概要WoredPressのブロックエディタには、数多くのブロックパターンがあります。画像で紹介したものはごく一部です。しっかり数えてはいませんが、上記の3倍以上はあると思います。大変便利ではあるのですが、当然使わないものも数多くあります。.
プログラミングの現場でChatGPTを使ってみた 〜その2：実際に仕事で使ってみた〜
前回の記事のおさらい以前、下記の記事で、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はウェブフレームワークとして非常に多機能で便利なのですが、多機能なだけに構成しているファイルが非常に多いです。なので、慣れないうちは、「これをするにはどこを触ったらいいんだろう」ということになりがちです。今回の記事では
前提・MacOSのバージョンmacOS Monterey 12.3.1作業の流れ①homebrewをインストールする②node、npmをインストールする。パスを通す③実際に動かしてみる：Pupeteerでスクショを撮影する①nodebrew
前提・MacOSのバージョンmacOS Monterey 12.3.1作業の流れ①homebrewをインストールする②node、npmをインストールする。パスを通す③実際に動かしてみる：Pupeteerでスクショを撮影する①nodebrew
APIGateway + LambdaでAPIを作る【node.js編】
概要APIGatewayって何？Lambdaって何？という方は下記の記事をチェックしてください。LambdaとAPIGatewayの基本設定先ほどと同じ記事の「実装に作ってみよう」の項目をチェックしてください。※Lambda関数の設定で「N
ライブラリのパス等を、複数のコントローラーやその他ファイルで利用することがあると思います。その際に、いちいちそれぞれのファイルで変数を定義するのは非効率ですし、コードがわかりづらくなる可能性もあります。そこで、「定数を定義しよう」となるわけ
ライブラリのパス等を、複数のコントローラーやその他ファイルで利用することがあると思います。その際に、いちいちそれぞれのファイルで変数を定義するのは非効率ですし、コードがわかりづらくなる可能性もあります。そこで、「定数を定義しよう」となるわけ
iPhone12からカメラにLiDARスキャナが搭載されました。これにより、誰にでも簡単に3Dモデルを搭載することが可能になりそうです。ウェブサイトに3Dデモを表示するケースも今後増えていくと思います。今回は、簡単にHTMLで3Dモデルを描
iPhone12からカメラにLiDARスキャナが搭載されました。これにより、誰にでも簡単に3Dモデルを搭載することが可能になりそうです。ウェブサイトに3Dデモを表示するケースも今後増えていくと思います。今回は、簡単にHTMLで3Dモデルを描
バイナリ形式の画像をアップロードする【HTML・JS(jQuery)・PHP】
通常であれば、画像のサーバへのアップロードはformを使って行います。しかし、imgやcanvas要素の画像を直接アップロードしたいケースもあります。そのような場合には、通常のアップロードは行えないため、一度バイナリ形式でアップロードして、
HTMLのcanvas要素を使って、画像の上にテキストを描画。【HTML・JavaSctript(jQuery)】
ウェブ開発を行う際に、「画像の上にテキストを描画したい」というケースがあったため、やり方のメモを残しました。HTMLのcanvasオブジェクトとJS(jQuery)を使えば、実装できます。デモ・解説デモ See the Pen can
canvas要素を使って、画像の上にテキストを描画。【HTML・JavaSctript(jQuery)】
ウェブ開発を行う際に、「画像の上にテキストを描画したい」というケースがあったため、やり方のメモを残しました。HTMLのcanvasオブジェクトとJS(jQuery)を使えば、実装できます。デモ・解説デモ See the Pen can
jQueryでHTMLの操作をしたい時があります。そのような場合に必要なのがDOM操作です。追加・削除等、様々なパターンを紹介していきます。同じ要素追加のメソッドでも、追加位置に違いがあったりします。それについても把握しておきましょう。ap
配列の操作（追加・削除・差し替え他）【JavaScript】
JavaScriptには、配列操作のためのメソッドがいくつか用意されています。かなり複雑な操作もかなり簡単に行えますので、ひととおり把握しておきましょう。要素の追加unshift() ： 配列の先頭に値を追加const array = ;a
配列の操作（追加・削除・差し替え他）【JavaScript】
JavaScriptには、配列操作のためのメソッドがいくつか用意されています。かなり複雑な操作もかなり簡単に行えますので、ひととおり把握しておきましょう。要素の追加unshift() ： 配列の先頭に値を追加const array = ;a
概要jQueryのattr()はHTMLの属性の取得・操作ができます。例えば、クラス名を取得したり、変更したり、削除したりといった感じです。以降、使い方を事例を挙げつつ解説していきます。使い方基本属性の取得$(HTML要素).attr(&q
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での実装について解説します。実装デモとりあえずよ
ウェブサービスを作っていると、「表示をランダムに切り替えたい」という場面があります。例えば、背景画像を一定の選択肢からランダムに切り替えると、サイトを見るたびに新鮮な印象を与えることができるでしょう。それ以外にも、「乱数を使ってランダムな値
この度、freelansu hub様にて、当ブログの記事をご紹介いただきました。紹介していただいた記事は、「フリーランスエンジニアの収入不安と独立前に準備しておくべきこと」という割とシビアな内容を書いたものだったので、ご連絡いただいた際は正
アクセスユーザ名についてEC2（Amazon Linux）にsshからアクセスする場合、デフォルトのユーザ名はec2-userです。開発の際には、他のユーザを追加したいケースもあるかと思います。今回は、アクセスユーザ名の変更・追加方法につい
EC2にSSHアクセスするためのユーザ・キーを追加する。（AWS）
アクセスユーザ名について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 の作成、公
S3とは？「Amazon Simple Storage Service」の略称です。公式では、以下のように説明されています。『Amazon Simple Storage Service (Amazon S3) は、業界をリードするスケーラビ
AjaxとCsrfトークンの取り扱いについて【CakePHP4】
CakePHPでAjaxを利用する際には、csrfトークンについての知識が必要になります。今回の記事では、具体的な使い方について紹介します。CakePHPでのAjaxの使い方Templates/samples/demo.php(テンプレート
デフォルトの設定CakePHPではルーティングがデフォルトで設定されており、以下のようにコントローラ名、関数名を参照します。https://ドメイン/コントローラ名/関数名具体例src/Controller/SamplesControlle
トランザクション(try,catch,rollback)の実装【CakePHP4】
DataBaseの絡むプログラムを実装するには、整合性の保持のために、エラーが出たら処理前の状態に戻す（ロールバックする）必要性があります。今回は、これをCakePHPで実装する方法を解説します。以下のように簡単に実装できます。実装例以下、
サイト移転時のエラー Composerで”Cannot redeclare” 【CakePHP4】
経緯CakePHPで構築したサイトを別サーバに移転する必要があったので実施。ファイルとDBを新サーバに移管し、表示確認したところ500エラーがでました。DBへのアクセス情報等に誤りはなく、原因不明。解決までの流れ①composer更新エラー
CakePHPではメールの送信を簡単に実装することが可能です。もっとも基礎的な、コントローラ内でメール送信を行う方法について解説していきます。基本のコード（コントローラ内で実装）以下のように実装します。//src/Controller/Sa
ラジオボタン・チェックボックスの値を受け取る【HTML・PHP】
選択肢を含むフォームを作る際には、ラジオボタン・チェックボックスが用いられます。ひとつだけ選択させる場合にはラジオボタン・複数選択の場合はチェックボックスです。今回はこれらを使ってフォームを作る方法を解説します。ラジオボタンの場合ラジオボタ
CakePHPで構築したサービス内で作成した関数を、コマンドで実行したいケースがあります。例えば、一定時間おきにCron実行する際などです。今回はそのような場合に利用するコードを紹介します。基本のコード●コマンド//src/Command/
ウェブサービスでフォームを作成する際に、ユーザロゴ等画像をアップロードするケースがよくあります。今回はCakePHP4での実装方法について解説していきます。Cake固有の関数等もあるので通常のPHPとは少々記法が違いますが、割と取り扱いやす
Dateから「年・月・日、曜日、時・分・秒」を個別に取得する。【JavaScript】
Dateオブジェクトを、利用する際に、年・月・日、曜日、時・分・秒を個別に取得したいケースもあります。今回はその方法について解説していきます。デモResult上が、取得したDateオブジェクトをそのまま表示したもの。Result下が、Dat
Webサービスを開発していると、前回表示した際の情報をブラウザに保持しておきたいケースがよくあります。そんな時に便利な機能が「ローカルストレージ」です。今回はこちらについて解説していきます。ユーザがページをリロードした時も、リロード前の行動
「ブログリーダー」を活用して、muleさんをフォローしませんか？
はじめにWordPressの記事編集画面で、ブロックを追加すると、記事表示時にマークアップが自動で書き出されます。WEB制作の現場では、CSSやJSを指定するために、マークアップの変更が必要なケースがあります。そのような場合に利用するコード
概要FormDataオブジェクトとは、フロントエンドのデータをサーバに送るためのオブジェクトです。これを使えば、HTMLのフォームの形式にとらわれずに、サーバにデータを送信することができます。Ajaxと組み合わせて利用するのが一般的です。「
事例仮にですが、同じサーバ上でWordpressとCakePHPを両方運用していると思います。当然WPにはWP用のDBが、CakeにはCake用のDBがあります。この際にWP側のDBからCake側のデータを取得するには、どうすれば良いでしょ
検索フォームの設置フォーム作成：searchform.php<formmethod="get"action="<?phpechoesc_url(home_url('/'));?&
概要以下のようにControllerで行われる、CakePHPのリダイレクトについて、いろいろなパターンがあったのでメモとして残します。classSamplesControllerextendsAppController{publicfun
やりたいこと・Getパラメータを利用した、テキスト検索フォームの実装（で、文字列"hoge"を含むデータを検索する）・文字列がスペースで区切られている際はAND検索（"hogepiyo"であれば&qu
概要CakePHPではControllerで利用する関数については、Componentを利用すれば簡単にできます。しかし、ここで定義した関数はtemplateからは利用できません。templateで利用する関数を作成するには、src/Vie
概要これまではURLのパラメータを管理するときに、文字列としてパラメータの追加・削除等を行なっていました。しかし、URLSearchParamsを使ったところ、制御がより容易になったで、メモとして残します。使い方前提こんなURLでサイトを表
概要CakePHP4のQueryBuilder（DBからデータを取得するクエリの生成）についての基本を簡単にまとめます。応用的な内容（matching）については以前に以下の記事で紹介したのですが、基本的な内容についても検索すると、旧バージ
概要前回、下記の記事でCakePHP5のCakePHP4との変更点をまとめました。前回の記事の時点では、公式にの日本語ページのインストール情報が4系のままだったので、インストールはしませんでしたしかし、改めて確認したところ、5系のインストー
TCPDFとは？PHPでPDFを生成するためのライブラリです。HTMLとCSSを用いてデザインを作り、それをPDFとして書き出すことができます。※ただし、利用できるHTMLタグ・CSSプロパティにはかなり制限があります。こちらの外部サイト様
概要デバッグや変数の内容のチェックを行う際に、通常であればvar_dump()等の関数を使います。しかし、controllerではvar_dumpを使ってもviewが描画されないのでチェックができません。そこで、ロギングという方法を使って、
概要GD（GraphicsDraw）はPHPで画像処理を実装するためのライブラリです。画像の圧縮やサイズ変更、回転だけではなく、フォーマット変換や複数画像の組み合わせ等、さまざまな操作を行うことができます。今回は、画像のサイズ変更・圧縮の方
概要今回はCakePHP4でのviewの一部分を共通化する方法について解説します。フロント構築をする際に、ヘッダーやフッター、サイドバーなど、各ページに共通して読み込む要素は、別ファイルに切り分けて読み込むのが一般的です。例えば、WordP
概要先日(2023年9月10日)についにCakePHP5が公開されました。CakePHP4が2019年だったので、約4年ぶりのメジャーアップデートとなります。2019年当時に初めてCakePHP4に初めて触ったのですが、CakePHP3の情
概要DBのデータをdelete()等で削除する際に一定の処理を実行する。前提条件以下のようなデータを持つusersテーブルがあるとする。●テーブル名：users・データ：id（通し番号）・データ：name（名前）・データ：thumbnail
概要親テーブルを消した際に、子テーブル・孫テーブルもまとめて削除する。前提条件以下の3つのテーブルがあるとする。・ParentsTable・ChildrenTable・GrandChildrenTable以下のようなリレーションである。・P
概要下記の記事で以前、Sessionの継続時間の設定について解説しました。今回はCakePHPにおけるSessionの基本的な使い方について解説していきます。コード一覧書き込みwrite()$this->request->get
概要chome拡張を作っていると、content_script.jsとbackground.jsでデータのやり取りをする必要性があります。例えば、サイト内をクリックした際に、FetchAPIを起動したい時ですね。昔はcontent_scri
概要先月くらいから仕事（プログラミング）にChatGPTを使い始めました。具体的なコードに関する質問については、ほとんど100％正しい（少なくとも動く）回答を返してくれました。じゃあ、もうちょっとざっくりした質問をしてみたらどんな回答が来る
概要WoredPressのブロックエディタには、数多くのブロックパターンがあります。画像で紹介したものはごく一部です。しっかり数えてはいませんが、上記の3倍以上はあると思います。大変便利ではあるのですが、当然使わないものも数多くあります。.
前回の記事のおさらい以前、下記の記事で、ChatGPTについての所感について、プログラマとしての視点でまとめました。今回は、「実際に仕事の現場でどんなふうに使っているのか」をまとめていきます。概要ざっくり言うと、「質問をして、返ってきた答え
前回の記事のおさらい以前、下記の記事で、ChatGPTについての所感について、プログラマとしての視点でまとめました。今回は、「実際に仕事の現場でどんなふうに使っているのか」をまとめていきます。概要ざっくり言うと、「質問をして、返ってきた答え
どんな時に起きる？固定ページのパーマリンクと同名のディレクトリが存在する。403エラーがが発生するのは、静的ページのディレクトリと同名の固定ページコンテンツが存在するケースです。これだけではピンと来ないと思うので、具体的な事例を見てみましょ
ContactForm7では、デフォルトで送信完了画面に遷移する機能がありません。フォーム画面下部に送信完了メッセージが表示されて、送信完了となります。しかし、案件では、クライアントが送信完了画面の設置を希望することも多くあります。今回は、
ContactForm7では、デフォルトで送信完了画面に遷移する機能がありません。フォーム画面下部に送信完了メッセージが表示されて、送信完了となります。しかし、受託の案件をしていると、クライアントが送信完了画面の設置を希望することも多くあり
昨今話題のチャットGPTについて昨今話題のチャットGPTですが、やはりものすごく便利なようです。大手企業でも社員が業務に使ってしまうケースが多かったようで、禁止令を出す企業もあるほど。「禁止令が出る」ということはそれだけ便利なのは間違いない
templatesディレクトリとはsrcディレクトリでは、ウェブアプリケーションの中心となる、MVCモデルのうちV（View）の設定を行います。MVCモデルの解説については、下記外部サイト様をご参照ください。srcディレクトリと同様に、WE
概要MVCモデルにおいてModelで取得したデータを、View（表示）に渡すのが主な役割になります。CakePHPでウェブサービスを作る際には、もっともよく触る箇所のひとつです。MVCモデルとは？下記外部ページ様をご参照ください。Model
srcディレクトリとは？srcディレクトリでは、ウェブアプリケーションの中心となる、MVCモデルについての設定を行います。MVCモデルの解説については、下記外部サイト様をご参照ください。Webサービスのコアとなるディレクトリですので、Cak
srcディレクトリとは？srcディレクトリでは、ウェブアプリケーションの中心となる、MVCモデルについての設定を行います。MVCモデルの解説については、下記外部サイト様をご参照ください。Webサービスのコアとなるディレクトリですので、Cak
ディレクトリ構成の概要下記の画像をご参照ください。開発時によく触るファイルについて抜粋して解説します。各ファイルの概要app_local.php全文<?php/* * Local configuration file to provi
はじめにCakePHPはウェブフレームワークとして非常に多機能で便利なのですが、多機能なだけに構成しているファイルが非常に多いです。なので、慣れないうちは、「これをするにはどこを触ったらいいんだろう」ということになりがちです。今回の記事では
前提・MacOSのバージョンmacOS Monterey 12.3.1作業の流れ①homebrewをインストールする②node、npmをインストールする。パスを通す③実際に動かしてみる：Pupeteerでスクショを撮影する①nodebrew
前提・MacOSのバージョンmacOS Monterey 12.3.1作業の流れ①homebrewをインストールする②node、npmをインストールする。パスを通す③実際に動かしてみる：Pupeteerでスクショを撮影する①nodebrew
概要APIGatewayって何？Lambdaって何？という方は下記の記事をチェックしてください。LambdaとAPIGatewayの基本設定先ほどと同じ記事の「実装に作ってみよう」の項目をチェックしてください。※Lambda関数の設定で「N
ライブラリのパス等を、複数のコントローラーやその他ファイルで利用することがあると思います。その際に、いちいちそれぞれのファイルで変数を定義するのは非効率ですし、コードがわかりづらくなる可能性もあります。そこで、「定数を定義しよう」となるわけ
