投稿：2025/04/13 最終更新：2025/04/13 Python機械学習を用いて画像から人の顔を検出するプログラム 投稿：2025/04/12 最終更新：2025/04/13 SQLJavascript&jQueryNuxt.jsでPrismaを使ってMySQLを管理してみる 投稿：2025/03/21 最終更新：2025/03/21 インフラ関係WindowsでDockerDesktopを使う時に必要な「WSLコマンド」とは 投稿：2025/03/21 最終更新：2025/04/12 プラグイン開発PHPWordpressWordPressのwp_optionsに独自の設定を追加する方法 すべて 機械学習を用いて画像から人の顔を検出するプログラム 投稿：2025/04/13 最終更新：2025/04/13 今回、画像から人の顔を検出するプログラムを作ってみました。 画像から人の顔を検出するアルゴリズムは、最近流行りの生成AIやディープラーニングとはちょっと違います。今回は"Haar Cascade"というアルゴリズムを活用します。 Haar Cascadeとは 画像から物体検出を行うために用いられるアルゴリズムです。画像のピクセルの明るさの差と位置関係から、物体を検知・識別するアルゴリズムです。 機械学習にはPython！ 機械学習ではお馴染みのPythonを活用します。なぜならライブラリが充実してるからです。 Pythonが言語仕様的に特別機械学習に向いているのかわかりませんが、機械学習に関連... Python Nuxt.jsでPrismaを使ってMySQLを管理してみる 投稿：2025/04/12 最終更新：2025/04/13 Nuxt.jsには標準でデータベースを管理する機能はありません。しかし、データベースを自己管理するにはなるべく避けたいです。マイグレーションしたいんです。そこでPrismaを使うことにしました。 なぜ、SQLを自己管理したくないか 複数人で開発する時、それぞれのローカルでDB定義を簡単に合わせることができるため 複数人で開発する時にGitを使うのは、もはや当たり前ですが、Gitにコミットするソースはローカルで動作確認ができたコードに限るべきです。（コミットしてからCI/CDでステージング環境にデプロイして動作テストするのはご法度） ということは、それぞれの開発環境でテスト用にDBを持つことにな... SQLJavascript&jQuery WindowsでDockerDesktopを使う時に必要な「WSLコマンド」とは 投稿：2025/03/21 最終更新：2025/03/21 私はDocker Desktopを使う時に出会ったコマンドなのですが、他の用途でも使うのでしょうか？あまり詳しくないので、調べたことをまとめます。 wslコマンドとは Microsoft Learnによると、「WSL」はWindows Subsystem for Linuxの略だそうです。 同ページにこんな記述が・・・何かあったのかな・・・ WSLのバージョンについて WSLにはバージョンがあって、WSL1とWSL2が存在しているようです。これらの違いは内部の仕組みがだいぶ違っているようで、用途によって使い分ける必要がありそうです。 WSL1はVMWareやVirtualBoxなどでLinux... インフラ関係HTML & CSS コアウェブバイタルの１つCLS（Comulative Layout Shift）の設定方法 投稿：2024/06/18 最終更新：2024/08/08 日々、SEOの改善に取り組んでおられる諸兄達は、CLSを気にされていることと思います。PageSpeed Insightsのスコアに四苦八苦されていることでしょう。 そんなPageSpeed Insightsの中で、以下のような指摘を受けていませんか？ このように書かれていると、imgタグにwidthとheightを設定しなければいけないと思ってしまいがちですが・・・ ちょっと待ってください！ このレスポンシブ対応が当たり前の時代に「widthとheightを設定しろ！」なんて言われるだろうか・・・？ 調べてみた！ CLSのスコア上昇にwidthとheight指定が必要なのか？ PageSpe... HTML&CSS CSSアニメーションをアニメーションの途中から動かす方法 投稿：2024/01/15 最終更新：2024/08/08 CSSアニメーションを作成する時、アニメーションの途中で画面の端に消えて行って、反対側の端から出てくるなど、 CSSアニメーションの基本 まず、CSSアニメーションの基本をおさらいしておきましょう。 animation-name : アニメーション名を指定 一番大切なアニメーションを指定するプロパティです。@keyframesで定義したアニメーション名を指定します。 // アニメーションさせる要素 .animation_element { animation-name: move; } // アニメーションの内容 @keyframes move { 0% {} 100% {} } animat... HTML&CSS HTMLの構造を画面サイズごとに変更する方法 投稿：2023/08/20 最終更新：2023/08/20 もうレスポンシブに対応するのは当たり前のことですけど、デザインによっては単純に配置を組み替えることが難しい場合がありますよね。そういう時、昔はパソコン用のHTMLとスマホ用のHTMLを別々に用意して、画面幅に応じて表示を切り替えるということをしていました。 しかし、今は１つのHTMLでもレイアウトの組み換えができるようになっているんです。しばらくHTML/CSSから離れている人は、インライン要素とブロック要素はわかると思いますが、他にも要素のレイアウトパターンが増えているので、ぜひ使ってみてください。 display:flexでレイアウトや配置順を操る ホームページを作っていると、以下のような... HTML&CSSJavascript & jQuery Nuxt.jsでPrismaを使ってMySQLを管理してみる 投稿：2025/04/12 最終更新：2025/04/13 Nuxt.jsには標準でデータベースを管理する機能はありません。しかし、データベースを自己管理するにはなるべく避けたいです。マイグレーションしたいんです。そこでPrismaを使うことにしました。 なぜ、SQLを自己管理したくないか 複数人で開発する時、それぞれのローカルでDB定義を簡単に合わせることができるため 複数人で開発する時にGitを使うのは、もはや当たり前ですが、Gitにコミットするソースはローカルで動作確認ができたコードに限るべきです。（コミットしてからCI/CDでステージング環境にデプロイして動作テストするのはご法度） ということは、それぞれの開発環境でテスト用にDBを持つことにな... SQLJavascript&jQuery Nuxt.js＋Vue.jsでSCSSを使う方法 投稿：2024/12/08 最終更新：2024/12/08 私はWindows上で、Nuxt.js+Vue.jsで開発しています。環境構築についてはこちらの記事を参照してください。 "sass"をインストールする 開発サーバーを起動している場合はCtrl+Cで停止させてください。そして、以下のコマンドで"sass"をインストールしてください。 $ npm install -D sass コマンドの実行が終わったら、package.jsonを確認して、sassパッケージがインストールされていることを確認してください。 "dependencies": { "nuxt": "^3.14.1592",... Vue.jsJavascript&jQuery WindowsでNuxt.js＋Vue.jsの開発環境を構築 投稿：2024/12/07 最終更新：2024/12/07 最初、Next.js＋Reactで環境構築しようと思ったんですが、Vercel以外のホスティングでデプロイするのが結構手間っていう話を聞いたので、今回はNuxt.js＋Vue.jsで環境作ってみようかなって思います。 Node.jsをインストール Nuxt.jsはNode.jsのフレームワークなので、先にNode.jsをインストールしましょう。Windowsの場合は、Node.jsのホームページからインストーラーをダウンロードできます。 インストールウィザードに従ってNode.jsをインストールした後、PowerShellで以下のコマンドを実行して、バージョンが表示されたら、インストール出来て... Javascript&jQueryPHP WordPressのwp_optionsに独自の設定を追加する方法 投稿：2025/03/21 最終更新：2025/04/12 WordPressのテーマやプラグイン開発を行っている際、独自設定を保存しておきたい場合があります。変更がないリソースデータなら定数で持たせておけばよいですが、ユーザーによって変更が行われる可能性がある場合は、データベースに保存しておきたいですよね。 そこで、WordPressに標準で存在しているwp_optionsに設定を追加し、呼び出して使う方法をご紹介します。 wp_optionsに設定を保存する時はadd_option() wp_optionsに設定を追加するにはadd_option関数を利用します。 <?php // 設定例 add_option("custom_op... プラグイン開発PHPWordpress PHPのstrtotimeを使った日付（Date）の計算がおかしい 投稿：2024/08/27 最終更新：2024/08/27 PHPでstrtotimeで前月・翌月の日付を取得する時、なんか取得結果がおかしいことないですか？これはPHPの仕様が関係します。詳しく見ていきましょう。 strtotime関数で日付の計算結果がおかしくなる条件 どんな時にstrtotimeの取得結果がおかしくなるか月末頃に前月・翌月を取得した時、前月・翌月が31日無い時におかしくなりがちです。 以下の実行結果を見てください。 <?php echo date("Y-m-d", strtotime("2024-01-31 -1 month"))."<br>"; ech... PHP シリアライズとアンシリアライズについて 投稿：2024/08/18 最終更新：2024/08/18 データベースに配列データを保存する時、データの形式が固定ならカラムとして持たせてしまえば良いんですが、データ構造が場合によって変わることもあると思います。 例えば、賃貸検索サービスのサイト内で検索が行われた時の検索条件の履歴データを保存したい時都道府県だけで絞り込む人も居れば、駅を複数選択して沿線で探す人も居るでしょう。こだわり検索条件を組み合わせて、〇〇駅と〇〇駅から徒歩10分以内のバス・トイレ別などという条件で検索する人も居るでしょう。 それらの様々な条件を検索条件ログとして持たせる時、データを連想配列化した後、シリアライズしてデータベースに保存しておくのが便利です。 シリアライズとは シ... PHPアルゴリズムWordPress WordPressのwp_optionsに独自の設定を追加する方法 投稿：2025/03/21 最終更新：2025/04/12 WordPressのテーマやプラグイン開発を行っている際、独自設定を保存しておきたい場合があります。変更がないリソースデータなら定数で持たせておけばよいですが、ユーザーによって変更が行われる可能性がある場合は、データベースに保存しておきたいですよね。 そこで、WordPressに標準で存在しているwp_optionsに設定を追加し、呼び出して使う方法をご紹介します。 wp_optionsに設定を保存する時はadd_option() wp_optionsに設定を追加するにはadd_option関数を利用します。 <?php // 設定例 add_option("custom_op... プラグイン開発PHPWordpress WordPressの管理者ページにBASIC認証を導入する 投稿：2024/08/16 最終更新：2024/08/16 WordPressっていうのは導入数が多いため、どうしても攻撃の対象になってしまいます。そのため、WordPressとセキュリティは切っても切れない関係にあります。 セキュリティになるかわかりませんが、別サービスとの連携の兼ね合いもあって、今回WordPressの管理画面にBASIC認証を導入しようと思います。 BASIC認証の導入には以下の2つのファイルが必要です。 .htaccess .htpasswd WordPressにBASIC認証を導入：.htpasswdを作成 まず、BASIC認証のIDとパスワードを生成しましょう。.htpasswdを用意する時、LUFTTOOLSさんが便利なの... Wordpressインフラ関係セキュリティ WP_Queryのtax_queryとmeta_queryの使い方 投稿：2024/01/03 最終更新：2024/08/08 WordPressで記事の絞り込みをする時に出てくるWP_Queryですが、様々な設定があって、取っ付きづらいと感じることもあるかもしれません。しかし、設定内容を理解すれば、実はさほど難しいものではありません。 また、WP_Queryが使えると、Welcartの商品ページも記事として管理されていますし、施工事例をカスタム投稿として登録した時にも、記事としてWP_Queryで絞り込み表示や並べ替え表示ができるようになります。 WP_Queryを使用する上で、特にややこしいのが、tax_queryとmeta_queryなので、その2点を説明します。 tax_queryもmeta_queryもWor... PHPWordpressアルゴリズム シリアライズとアンシリアライズについて 投稿：2024/08/18 最終更新：2024/08/18 データベースに配列データを保存する時、データの形式が固定ならカラムとして持たせてしまえば良いんですが、データ構造が場合によって変わることもあると思います。 例えば、賃貸検索サービスのサイト内で検索が行われた時の検索条件の履歴データを保存したい時都道府県だけで絞り込む人も居れば、駅を複数選択して沿線で探す人も居るでしょう。こだわり検索条件を組み合わせて、〇〇駅と〇〇駅から徒歩10分以内のバス・トイレ別などという条件で検索する人も居るでしょう。 それらの様々な条件を検索条件ログとして持たせる時、データを連想配列化した後、シリアライズしてデータベースに保存しておくのが便利です。 シリアライズとは シ... PHPアルゴリズム JavascriptでFormをSubmitする前に入力チェック（バリデーション）を実施する方法 投稿：2023/09/08 最終更新：2023/09/08 以前から、FormをSubmitする時、PHPで入力値をチェックして、ダメだったら何もせずメッセージを表示するのって「無駄な通信だな」「先にJavascriptで入力値をチェックできたら良いのに」って思っていました。 でも、入力チェックの良い設計が思いつかなかったんです。今回、それなりの形になったので、ご紹介します。 フォームの入力チェック（バリデーション） 今回のサンプルで想定しているformは以下の通り <form class="v-form" action="" method="POST" enctype="mu... Javascript&jQueryアルゴリズム 私たちは既にAIに侵略されている？ネットやSNSで自分の興味のある内容ばかり出てくるのはなぜ？ 投稿：2023/06/26 最終更新：2023/06/26 みなさんはネットやSNSを利用していると、自分が最近調べた商品や、興味のあるジャンルの記事ばかりが表示されると思いませんか？ 現在のインターネットやSNSには、ユーザーに最適化された記事や広告が表示される仕組みがある あなたの検索傾向は検索エンジンやSNSによって、集計されユーザーに最適化された『興味カテゴリー』として保存されています。あなたが服をたくさん検索すれば『ファッション好き』として、あなたが車をたくさん検索すれば『乗り物好き』として登録されるわけです。そして、企業が広告出す時、その広告にもカテゴリーが設定され、あなたの興味カテゴリーに一致する広告が表示されるというわけです。 かつてダ... アルゴリズムインフラ関係 WindowsでDockerDesktopを使う時に必要な「WSLコマンド」とは 投稿：2025/03/21 最終更新：2025/03/21 私はDocker Desktopを使う時に出会ったコマンドなのですが、他の用途でも使うのでしょうか？あまり詳しくないので、調べたことをまとめます。 wslコマンドとは Microsoft Learnによると、「WSL」はWindows Subsystem for Linuxの略だそうです。 同ページにこんな記述が・・・何かあったのかな・・・ WSLのバージョンについて WSLにはバージョンがあって、WSL1とWSL2が存在しているようです。これらの違いは内部の仕組みがだいぶ違っているようで、用途によって使い分ける必要がありそうです。 WSL1はVMWareやVirtualBoxなどでLinux... インフラ関係 VirtualBox+Vagrantで仮想環境を作る 投稿：2024/11/20 最終更新：2024/12/01 まず前提として、私の環境はWindowsです。Windows上で、Linuxの開発環境を立ち上げたいと思ったので、VirtualBox＋Vagrantで開発環境を整えます。 1.VirtualBoxをインストールします VirtualBoxのプログラムは以下のURLからダウンロードできます。https://www.oracle.com/jp/virtualization/technologies/vm/downloads/virtualbox-downloads.html 2.Vagrantをインストールします Vagrantもダウンロードしてインストールします。https://www.vag... インフラ関係 第3のメール認証レコード：DMARCとは 投稿：2024/09/26 最終更新：2024/09/26 2024年10月からNTTドコモ向けにDMARC設定が必要になります NTTドコモで2024年10月から『なりすましメールの警告表示機能』が導入されるそうです。 情報源：ドコモメール、10月から「なりすましメール」に警告表示https://www.watch.impress.co.jp/docs/news/1593689.html 『なりすましメールの警告表示機能』って具体的に何かというと、以下の２つのいずれかに該当するメールに警告を表示するという物です。 フィッシング詐欺的なメール DNSにDMARCが設定されていないドメインからのメール フィッシングメールの警告を表示するというのが、具体的... インフラ関係セキュリティセキュリティ 第3のメール認証レコード：DMARCとは 投稿：2024/09/26 最終更新：2024/09/26 2024年10月からNTTドコモ向けにDMARC設定が必要になります NTTドコモで2024年10月から『なりすましメールの警告表示機能』が導入されるそうです。 情報源：ドコモメール、10月から「なりすましメール」に警告表示https://www.watch.impress.co.jp/docs/news/1593689.html 『なりすましメールの警告表示機能』って具体的に何かというと、以下の２つのいずれかに該当するメールに警告を表示するという物です。 フィッシング詐欺的なメール DNSにDMARCが設定されていないドメインからのメール フィッシングメールの警告を表示するというのが、具体的... インフラ関係セキュリティ WordPressの管理者ページにBASIC認証を導入する 投稿：2024/08/16 最終更新：2024/08/16 WordPressっていうのは導入数が多いため、どうしても攻撃の対象になってしまいます。そのため、WordPressとセキュリティは切っても切れない関係にあります。 セキュリティになるかわかりませんが、別サービスとの連携の兼ね合いもあって、今回WordPressの管理画面にBASIC認証を導入しようと思います。 BASIC認証の導入には以下の2つのファイルが必要です。 .htaccess .htpasswd WordPressにBASIC認証を導入：.htpasswdを作成 まず、BASIC認証のIDとパスワードを生成しましょう。.htpasswdを用意する時、LUFTTOOLSさんが便利なの... Wordpressインフラ関係セキュリティ ホームページからのメールが届かない 投稿：2023/07/27 最終更新：2023/12/01 最近、メールが届かないこと増えたと思いませんか？実は、サーバーを運営する各社でセキュリティを強化しており、原因はセキュリティ強化によるものかもしれません。 最近のメールセキュリティ強化の発端はemotetによる"なりすましメール" 最近、メールセキュリティがそろって強化されている原因として、emotetの大流行があります。 emotetは、メールに添付されたWordファイルを開いて、マクロが実行されることでemotetに感染します。そして、パソコンがemotetに感染すると、パソコンに設定されているメールのアカウント情報やアドレス帳の情報を抜き出して、悪いやつのサーバーに勝手にデータを送信して... インフラ関係セキュリティ未分類管理人について uilouプログラマー基本的に、自分自身の備忘録のつもりでブログを書いています。自分と同じ所で詰まった人の助けになれば良いかなと思います。システムのリファクタリングを得意としており、バックエンド、フロントエンド、アプリケーション、SQLなど幅広い知識と経験があります。広いだけでなく、知識をもっと深堀りしていきたいですね。 PROFILE CONTACT ※業務システムの開発や既存システムのリプレイス、ホームページの技術的なサポート等のお仕事のご依頼や取材、掲載依頼等はお問い合わせからご連絡ください。 一人で運営しております都合上、お返事が遅くなることがありますが、ご了承くださいませ。
