PHP Vue.js フォームに CSRF 対策を追加する方法
お問い合わせフォームを開発する際、CSRF（クロスサイトリクエストフォージェリ）攻撃を防ぐことは重要です。本記事では、Vue.jsとPHPを用いて、CSRF対策を組み込んだ安全なフォームを作成する方法を解説します。概要CSRF（Cross-...
JavaScript
PHP 
jQuery jQueryフォームにGoogle reCAPTCHAを導入する方法
はじめにGoogle reCAPTCHAを利用してスパム対策を行うことは、フォームのセキュリティを向上させるための効果的な方法です。本記事では、以前作成した「jQueryで簡易ルーティングを使った問い合わせフォームの作成方法」にreCAPT...
PHP React フォームに reCAPTCHA を導入する方法
この記事では、以前作成した React フォームに Google reCAPTCHA を導入する手順をご紹介します。reCAPTCHA を追加することで、不正な送信やボットからのアクセスを防ぐことができます。1. プロジェクト構成以下は、今...
PHP Vue.jsのフォームにreCAPTCHAを導入する方法
この記事では、Vue.jsを使ったお問い合わせフォームにGoogle reCAPTCHAを導入し、スパム対策を強化する方法を解説します。このフォームは、入力画面、確認画面、完了画面の3ステップで構成され、メール送信機能も実装されています。ま...
jQuery jQueryで簡易ルーティングを使った問い合わせフォームの作成方法
本記事では、jQuery と history.pushState を活用し、URLがページごとに変わる3ステップ構成（入力・確認・完了）の問い合わせフォームを作成する方法をご紹介します。この方法では、シングルページアプリケーション (SPA...
PHP React Routerを活用した3ステップお問い合わせフォームの作成方法
本記事では、React Router を活用して、3ステップ構成（入力・確認・完了）のお問い合わせフォームを作成する方法をご紹介します。この方法では各画面が異なるURLに対応しており、直感的な操作性を実現できます。使用技術とバージョン情報R...
PHP Vue Routerを使ってお問い合わせフォームを作成しよう
本記事では、Vue.jsのVue Routerを使用して、3ステップ構成のお問い合わせフォームを作成する方法を紹介します。Vue Routerを利用することで、画面ごとにURLを分けて直感的な操作性を実現します。使用技術とバージョン情報Vu...
jQuery jQueryとPHPで作るお問い合わせフォーム
本記事では、jQueryを使用してお問い合わせフォームを作成する方法を紹介します。このフォームは、Vue.jsとPHPで作るお問い合わせフォームを基にしたものです。使用技術とバージョン情報jQuery: 3.6.4Tailwind CSS:...
PHP ReactとPHPで作るお問い合わせフォーム
本記事では、Reactを使ったお問い合わせフォームの作成方法を紹介します。このフォームは、Vue.jsとPHPで作るお問い合わせフォームを元に、Reactで実装したものです。使用技術とバージョン情報React: 17.x (CDN経由で最新...
PHP Vue.jsとPHPで作るお問い合わせフォーム
お問い合わせフォームは、多くのウェブサイトで必要とされる重要な機能です。本記事では、Vue.jsを使って動的なユーザーインターフェイスを作り、PHPを使って問い合わせ内容を処理・送信するシンプルなフォームを構築します。使用したツールとバージ...
JavaScript kintone(kintone REST API)でのCRUD操作をPHPとJavaScriptで実装する方法
前回の記事では、Googleスプレッドシートを利用してCRUD操作を行う方法を紹介しました。今回は、そのデータ保存場所をGoogleスプレッドシートからkintoneに変更した内容を紹介します。準備1. kintone APIの設定kint...
Googleスプレッドシート Google Sheets APIを使ったPHPとJavaScriptによるCRUD操作の実装と認証機能の追加
前回の記事で紹介したGoogle Sheets APIを使ったPHPとJavaScriptによるCRUD操作の実装に、認証機能を追加する方法をご紹介します。認証機能を追加することで、ログインしたユーザーのみがデータを操作できるようにします。...
Googleスプレッドシート Google Sheets APIを使ったPHPとJavaScriptによるCRUD操作の実装
Google Sheets APIを使って、PHPとJavaScriptでCRUD（Create, Read, Update, Delete）操作を実装する方法を紹介します。必要なものGoogleアカウントComposer（PHPの依存管理...
JavaScript JavaScript | イベントデリゲーションは効率的なイベントハンドリングの技法
JavaScriptにおけるイベントデリゲーションは、効率的にイベントを管理するための強力な技法です。このブログ記事では、イベントデリゲーションの基本概念から具体的な実装方法、そしてイベントリスナーだけで対応する場合の問題点について解説しま...
Node.js Node.jsをさくらのレンタルサーバにインストールする方法（ソースからコンパイル）
さくらのレンタルサーバに Node.js をインストールするための OpenSSL と Node.js のインストール方法のメモ。（＊「さくらのレンタルサーバ上で Node.js (npm) を使えるようにする」を拝見させていただき無事イン...
jQuery WordPress | Ajaxで非同期に記事データを追加で読み込む方法
アーカイブページの記事一覧で「もっと見る」や「View More」のようなボタンを置いてクリック時にページ遷移せず次ページの記事一覧データをAjaxで読み込み追加する方法のメモ。functions.php に設定admin-ajax.php...
CSS JavaScript | 指定要素をクリックしてページ遷移できるようにする。マウスポインタも指アイコンに変更
JavaScriptでヘッダー画像やその他指定した要素をクリックした際にページ遷移出来るようにする方法のメモ。またマウスポインタも指アイコンになるようCSSで設定します。指定IDクリック時にホームへ遷移させる<script>document...
Node.js Node.js | dotenvで “.env” ファイルから変数をロード
dotenvをインストールnpm install dotenv$ npm install dotenvadded 1 package, and audited 2 packages in 513msfound 0 vulnerabiliti...
Node.js Node.js | Nodemailerを使ってメールを送信する
NodemailerをインストールNodemailerが未インストールの場合はインストールします。npm install nodemailer$ npm install nodemaileradded 1 package, and audi...
Node.js Node.js | npmをアップデートする（v6.14.13 → v7.22.0）
新しいアプリ用のディレクトリで初期化したら npm の新しいバージョンのメッセージが表示されていたので、アップデートしてみました。新バージョンのアナウンスNew major version of npm available! 6.14.13...