2024/02/11 2024/02/11 インフラ関係VisualStudioCode(VSCode)の全角文字の強調表示を解除する方法 2024/02/06 2024/02/06 Javascript&jQuery【Javascript】数字がランダムにシャッフルされながら表示するやつ 2024/01/15 2024/01/15 HTML&CSSCSSアニメーションをアニメーションの途中から動かす方法 2024/01/03 2024/01/03 PHPWordpressWP_Queryのtax_queryとmeta_queryの使い方 すべて VisualStudioCode(VSCode)の全角文字の強調表示を解除する方法 2024/02/11 2024/02/11 VSCodeをインストールしたばかりの時、日本語コメントや日本語文字列を入力すると、黄色い枠で囲まれて強調表示される設定になっていると思います。黄色い枠で囲まれていると、警告されているように感じて、わかっていても気になってしまうのは私だけでしょうか? こういう表示になる 私はVSCodeを新規インストールしたら、下記のエクスプローラーウィンドウのツリービューのインデント設定と合わせて、真っ先にこの設定を変更します。 https://comment-out.net/2023/06/06/1690.html VSCodeのマルチバイト文字強調設定を解除する方法 では、実際の設定解除の方法ですが、ま... インフラ関係 【Javascript】数字がランダムにシャッフルされながら表示するやつ 2024/02/06 2024/02/06 「数字がランダムにシャッフルされながら表示するやつ」本当はちゃんとした名前があるんだろうけど、なんて言うのかな?わかんないでも、作ってみたので、紹介します。 とりあえず、サンプルを見て欲しい。「あー!それね!」ってなるから 今回はこれの作り方を説明します。 ボタンクリックで指定桁数のランダムな数字を取得する まず、ボタンクリックで指定した桁数のランダムな数字を取得できるようにします。 以下がボタンクリックと数字を表示するスクリプトです。 // ボタンクリックイベント $('button[name^="change_number"]').on('cli... Javascript&jQuery CSSアニメーションをアニメーションの途中から動かす方法 2024/01/15 2024/01/15 CSSアニメーションを作成する時、アニメーションの途中で画面の端に消えて行って、反対側の端から出てくるなど、 CSSアニメーションの基本 まず、CSSアニメーションの基本をおさらいしておきましょう。 animation-name : アニメーション名を指定 一番大切なアニメーションを指定するプロパティです。@keyframesで定義したアニメーション名を指定します。 // アニメーションさせる要素 .animation_element { animation-name: move; } // アニメーションの内容 @keyframes move { 0% {} 100% {} } animat... HTML&CSS WP_Queryのtax_queryとmeta_queryの使い方 2024/01/03 2024/01/03 WordPressで記事の絞り込みをする時に出てくるWP_Queryですが、様々な設定があって、取っ付きづらいと感じることもあるかもしれません。しかし、設定内容を理解すれば、実はさほど難しいものではありません。 また、WP_Queryが使えると、Welcartの商品ページも記事として管理されていますし、施工事例をカスタム投稿として登録した時にも、記事としてWP_Queryで絞り込み表示や並べ替え表示ができるようになります。 WP_Queryを使用する上で、特にややこしいのが、tax_queryとmeta_queryなので、その2点を説明します。 tax_queryもmeta_queryもWor... PHPWordpressHTML & CSS CSSアニメーションをアニメーションの途中から動かす方法 2024/01/15 2024/01/15 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を別々に用意して、画面幅に応じて表示を切り替えるということをしていました。 しかし、今は1つのHTMLでもレイアウトの組み換えができるようになっているんです。しばらくHTML/CSSから離れている人は、インライン要素とブロック要素はわかると思いますが、他にも要素のレイアウトパターンが増えているので、ぜひ使ってみてください。 display:flexでレイアウトや配置順を操る ホームページを作っていると、以下のような... HTML&CSS 【CSS】文字サイズを画面幅に応じて自動調整する 2023/08/07 2023/08/07 レスポンシブ対応で面倒なことの一つに"文字サイズの調整"があります。キャッチコピーをかっこよく1行で表示したいのに、少し画面幅を変えるとエリアをはみ出してしまって、改行されてしまうことないですか?もしくは少し小さめに作っていると、フルHDや2Kディスプレイで表示すると余白が大きくなって、かっこ悪くなってしまったりしますよね。 さらにそれを防ぐために、細かくメディアクエリを設定するのも大変面倒です。 「あ~文字サイズが自動調整されたら良いのに」って思いませんか?font-sizeの自動調整はできま~す! CSSで文字サイズの自動調整する時、font-sizeにもvwなどが使える 実はfont-s... HTML&CSS 【CSS】flex-boxで高さを揃える方法 2023/07/06 2023/07/06 display: flexが使われているCSSを見る機会が増えてきましたね。flexを使うことで、レイアウトの組み換えや順番の入れ替え、隙間を開けるのだって簡単に出来るので、非常に便利ですよね。 flexを使えば、inline-blockでは面倒だった、各子要素の高さを揃えるのだって簡単にできてしまいます。 flex-boxでは自動で高さが揃う そもそもflex-boxでは子要素の高さは同じになるように自動調節されます。 以下のサンプルを見てください。 CSSには高さを指定したり、揃えるようなスタイル指定はありません。 .flex { display: flex; flex-direction... HTML&CSSJavascript & jQuery 【Javascript】数字がランダムにシャッフルされながら表示するやつ 2024/02/06 2024/02/06 「数字がランダムにシャッフルされながら表示するやつ」本当はちゃんとした名前があるんだろうけど、なんて言うのかな?わかんないでも、作ってみたので、紹介します。 とりあえず、サンプルを見て欲しい。「あー!それね!」ってなるから 今回はこれの作り方を説明します。 ボタンクリックで指定桁数のランダムな数字を取得する まず、ボタンクリックで指定した桁数のランダムな数字を取得できるようにします。 以下がボタンクリックと数字を表示するスクリプトです。 // ボタンクリックイベント $('button[name^="change_number"]').on('cli... Javascript&jQuery WP REST APIで記事取得する時、カスタムフィールドで記事を絞り込む方法 2023/12/08 2023/12/08 マニアックなブログへようこそ。今回ご紹介するのは、WP REST APIを使って記事一覧を取得する際、取得記事をカスタムフィールドで絞り込む方法です。WP REST APIの使い方はこちらを参考にしてください。 カスタム投稿タイプとカスタムフィールドを定義 まず、どういうカスタムフィールドを定義するか先に決めておきましょう。今回は「投稿」ではなく、カスタム投稿タイプ「商品情報」を定義してみます。functions.phpに以下の内容を記述します。 /* カスタム投稿タイプの定義 /*--------------------------------------------------------... Javascript&jQueryPHPWordpress 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アルゴリズム Javascriptの高速化は思いもよらぬエラーを生むことがある 2023/06/17 2023/06/17 サイトの高速化に力を入れているWEB担当者の方ならご存じと思いますが、サイトの高速化にはパターンがあります。 サイトを高速化する王道3パターン サイト高速化の教科書的パターンが、以下の3パターンです。 サーバーとの通信回数を減らす サーバーからのダウンロードデータを減らす サーバーからの読み込みタイミングをずらす サーバーとの通信回数を減らす これはファイル数が多いと、それだけ何度もサーバーにリクエストを送り、サーバーもそれに応えるように何度もファイルを送ります。この『何度も行う通信』が無駄なんですね。 通信回数を減らすにはどうするか。ファイルを一つにしてしまうんです。 サーバーからのダウンロ... Javascript&jQueryWordpressPHP WP_Queryのtax_queryとmeta_queryの使い方 2024/01/03 2024/01/03 WordPressで記事の絞り込みをする時に出てくるWP_Queryですが、様々な設定があって、取っ付きづらいと感じることもあるかもしれません。しかし、設定内容を理解すれば、実はさほど難しいものではありません。 また、WP_Queryが使えると、Welcartの商品ページも記事として管理されていますし、施工事例をカスタム投稿として登録した時にも、記事としてWP_Queryで絞り込み表示や並べ替え表示ができるようになります。 WP_Queryを使用する上で、特にややこしいのが、tax_queryとmeta_queryなので、その2点を説明します。 tax_queryもmeta_queryもWor... PHPWordpress WP REST APIで記事取得する時、カスタムフィールドで記事を絞り込む方法 2023/12/08 2023/12/08 マニアックなブログへようこそ。今回ご紹介するのは、WP REST APIを使って記事一覧を取得する際、取得記事をカスタムフィールドで絞り込む方法です。WP REST APIの使い方はこちらを参考にしてください。 カスタム投稿タイプとカスタムフィールドを定義 まず、どういうカスタムフィールドを定義するか先に決めておきましょう。今回は「投稿」ではなく、カスタム投稿タイプ「商品情報」を定義してみます。functions.phpに以下の内容を記述します。 /* カスタム投稿タイプの定義 /*--------------------------------------------------------... Javascript&jQueryPHPWordpress WordPressのWP_Queryでクエリ(SQL)を確認する方法 2023/11/29 2023/11/29 WordPressの記事情報はデータベースに登録されています。そして、記事情報をPHPで取得するにはWP_Queryなどを使用します。この時、欲しい記事が適切に取得できず、取得件数が0件になってしまうことがあるんですね。特に、tax_queryやmeta_queryを使用するクエリでは条件が複雑になり、取得したい記事が取れないことがあります。 こういう時に「実行されたクエリを直接確認できたらデバッグが捗るのに・・・」と思うのですが、実はWP_Queryのクエリを確認する方法があります。 WP_Queryのクエリ(SQL)の中身を確認する方法 WP_Queryは取得した記事一覧の情報を変数に代入... SQLPHPWordpress WordPressの管理者メニューの「投稿」キャプションを変更する方法 2023/11/12 2023/11/12 WordPressの管理者メニューって、日本語だとわかりにくくないですか? もう私も違和感を抱かなくなりましたが、初見だと「投稿?SNSに繋がっている!?」とか「『固定ページ』ってなんだ?」って思うと思うんです。 自身で管理するサイトを作る場合は問題ないのですが、お客さんにサイトを納品して、お客さん自身が更新などの管理をする場合は、こういう所で苦手意識が出来て、ホームページを更新しなくなっていく可能性もあると思うんです。 なので、管理者画面をユーザーフレンドリーに変えていきましょう。まずは管理者メニューのキャプションを変更してみましょう。 管理者メニューの「投稿」や「固定ページ」を変更する方法... PHPWordpressWordPress WP_Queryのtax_queryとmeta_queryの使い方 2024/01/03 2024/01/03 WordPressで記事の絞り込みをする時に出てくるWP_Queryですが、様々な設定があって、取っ付きづらいと感じることもあるかもしれません。しかし、設定内容を理解すれば、実はさほど難しいものではありません。 また、WP_Queryが使えると、Welcartの商品ページも記事として管理されていますし、施工事例をカスタム投稿として登録した時にも、記事としてWP_Queryで絞り込み表示や並べ替え表示ができるようになります。 WP_Queryを使用する上で、特にややこしいのが、tax_queryとmeta_queryなので、その2点を説明します。 tax_queryもmeta_queryもWor... PHPWordpress WP REST APIで記事取得する時、カスタムフィールドで記事を絞り込む方法 2023/12/08 2023/12/08 マニアックなブログへようこそ。今回ご紹介するのは、WP REST APIを使って記事一覧を取得する際、取得記事をカスタムフィールドで絞り込む方法です。WP REST APIの使い方はこちらを参考にしてください。 カスタム投稿タイプとカスタムフィールドを定義 まず、どういうカスタムフィールドを定義するか先に決めておきましょう。今回は「投稿」ではなく、カスタム投稿タイプ「商品情報」を定義してみます。functions.phpに以下の内容を記述します。 /* カスタム投稿タイプの定義 /*--------------------------------------------------------... Javascript&jQueryPHPWordpress WordPressのWP_Queryでクエリ(SQL)を確認する方法 2023/11/29 2023/11/29 WordPressの記事情報はデータベースに登録されています。そして、記事情報をPHPで取得するにはWP_Queryなどを使用します。この時、欲しい記事が適切に取得できず、取得件数が0件になってしまうことがあるんですね。特に、tax_queryやmeta_queryを使用するクエリでは条件が複雑になり、取得したい記事が取れないことがあります。 こういう時に「実行されたクエリを直接確認できたらデバッグが捗るのに・・・」と思うのですが、実はWP_Queryのクエリを確認する方法があります。 WP_Queryのクエリ(SQL)の中身を確認する方法 WP_Queryは取得した記事一覧の情報を変数に代入... SQLPHPWordpress WordPressの管理者メニューの「投稿」キャプションを変更する方法 2023/11/12 2023/11/12 WordPressの管理者メニューって、日本語だとわかりにくくないですか? もう私も違和感を抱かなくなりましたが、初見だと「投稿?SNSに繋がっている!?」とか「『固定ページ』ってなんだ?」って思うと思うんです。 自身で管理するサイトを作る場合は問題ないのですが、お客さんにサイトを納品して、お客さん自身が更新などの管理をする場合は、こういう所で苦手意識が出来て、ホームページを更新しなくなっていく可能性もあると思うんです。 なので、管理者画面をユーザーフレンドリーに変えていきましょう。まずは管理者メニューのキャプションを変更してみましょう。 管理者メニューの「投稿」や「固定ページ」を変更する方法... PHPWordpressアルゴリズム 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によって、集計されユーザーに最適化された『興味カテゴリー』として保存されています。あなたが服をたくさん検索すれば『ファッション好き』として、あなたが車をたくさん検索すれば『乗り物好き』として登録されるわけです。そして、企業が広告出す時、その広告にもカテゴリーが設定され、あなたの興味カテゴリーに一致する広告が表示されるというわけです。 かつてダ... アルゴリズム プログラミング学習のコツ的なこと 2023/04/16 2023/04/16 私は複数のプログラミング言語を扱えますが、現代のプログラミング環境において、プログラミング言語が扱えるっていうのは、「最低限の知識がある程度に過ぎない」と思っています。なぜなら、開発現場で"フレームワーク"を使わずに、1からプログラミングを行うことなんてほとんどないからです。 プログラミングにおけるフレームワークとは? "フレームワーク"っていろんな所で使われる言葉ですが、プログラミングにおけるフレームワークはシステム開発に必要な機能があらかじめ用意された開発補助ツール(プログラム群)のことです。 そして、プログラミングを学んでいる人は様々な仕様に四苦八苦してると思いますが、プログラミング言語... アルゴリズム 【Javascript&PHP】無限スクロールの作り方【AJAX】 2023/02/11 2024/02/22 Googleで検索した際、検索結果がどんどん下に読み込まれていきますよね?この新しい情報が随時読み込みされて、どんどんスクロール量が増えていく動きは『無限スクロール』と呼ばれているそうです。 今回はこの無限スクロールを解説していきます。 大量のコンテンツの見せ方には『ページャー』と『無限スクロール』がある ページャーというのは、1ページに情報が決められた数のみ表示され、それ以上の情報は2ページ目、3ページ目とページめくりしていくことで表示されます。 対して無限スクロールでは、ページ下部まで到達した時にページ遷移することなく、次々と新しいコンテンツが追加表示され、無限にスクロールし続けることがで... Javascript&jQueryアルゴリズムインフラ関係 VisualStudioCode(VSCode)の全角文字の強調表示を解除する方法 2024/02/11 2024/02/11 VSCodeをインストールしたばかりの時、日本語コメントや日本語文字列を入力すると、黄色い枠で囲まれて強調表示される設定になっていると思います。黄色い枠で囲まれていると、警告されているように感じて、わかっていても気になってしまうのは私だけでしょうか? こういう表示になる 私はVSCodeを新規インストールしたら、下記のエクスプローラーウィンドウのツリービューのインデント設定と合わせて、真っ先にこの設定を変更します。 https://comment-out.net/2023/06/06/1690.html VSCodeのマルチバイト文字強調設定を解除する方法 では、実際の設定解除の方法ですが、ま... インフラ関係 ホームページからのメールが届かない 2023/07/27 2023/12/01 最近、メールが届かないこと増えたと思いませんか?実は、サーバーを運営する各社でセキュリティを強化しており、原因はセキュリティ強化によるものかもしれません。 最近のメールセキュリティ強化の発端はemotetによる"なりすましメール" 最近、メールセキュリティがそろって強化されている原因として、emotetの大流行があります。 emotetは、メールに添付されたWordファイルを開いて、マクロが実行されることでemotetに感染します。そして、パソコンがemotetに感染すると、パソコンに設定されているメールのアカウント情報やアドレス帳の情報を抜き出して、悪いやつのサーバーに勝手にデータを送信して... インフラ関係セキュリティ未分類 Google検索でホームページのインデックスされているページを調べるには 2023/07/26 2023/07/26 Googleには様々な検索演算子があることをご存じでしょうか?数年前にテレビ番組で「表示された写真がどこの写真か検索エンジンを活用して探し出してください。」という企画がありましたが、「検索演算子を有効活用できていたらもっと早く見つけられるんだろうなぁ」とやきもきしながら見ていました。 今回、そのGoogle検索演算子の1つ「インデックスされているページ」の検索方法をご紹介します。 なぜインデックスされているページを表示する必要があるのか? そもそもなぜそんなことをしようと思ったのかですが、私は自身のブログ運営にGoogle SearchConsoleを活用しています。もちろん自身が書いたブログ... インフラ関係 LookerStudio(旧データポータル)で統合フィールドを作る方法 2023/07/16 2023/07/16 みなさんはLookerStudioを使っていますか?私はLookerStudioで、このブログのアクセス分析資料を作成して、自動で毎月PDF形式でメールで受け取るようにしています。 その中で、ずっとできなかったことがあるんですけど、最近やり方がわかったので、ご紹介します。 LookerStudio(旧データポータル)って何? LookerStudioがわからない人は、便利なのでここで学んで、ぜひ使ってみてください。 LookerStudioはGoogleのサービスの一つで、自由にデータを読み込ませて、集計・分析ができるツールです。かつてはデータポータルやGoogle Data Studioとい... インフラ関係セキュリティ ホームページからのメールが届かない 2023/07/27 2023/12/01 最近、メールが届かないこと増えたと思いませんか?実は、サーバーを運営する各社でセキュリティを強化しており、原因はセキュリティ強化によるものかもしれません。 最近のメールセキュリティ強化の発端はemotetによる"なりすましメール" 最近、メールセキュリティがそろって強化されている原因として、emotetの大流行があります。 emotetは、メールに添付されたWordファイルを開いて、マクロが実行されることでemotetに感染します。そして、パソコンがemotetに感染すると、パソコンに設定されているメールのアカウント情報やアドレス帳の情報を抜き出して、悪いやつのサーバーに勝手にデータを送信して... インフラ関係セキュリティ未分類 WordPressでユーザー名が丸見えに!?アクセス制限を見直そう 2023/06/27 2023/06/27 みなさんはWordPressでホームページを作ったら、ちゃんとセキュリティ設定していますか? セキュリティプラグインの中には、ログイン試行ログを取得している物があるんですが、見たことあるでしょうか?あのログを見ると、ログインには失敗しているんですが、なぜかユーザー名は実在するユーザー名が使用されているんです。投稿者情報は表に出していないのにですよ。 これ、ユーザー名が外部から見えてしまう仕組みがあるんですね。 不正アクセスユーザーはどこでWordPressのユーザー名を調べているか さて、これらの不正アクセスを行う連中はどこでユーザー名を調べているのでしょうか? 一つは構造化データです。 Al... Wordpressセキュリティ 【Formの二重送信防止方法】PHPページでF5を押すとフォームが二重送信されてしまう 2023/01/03 2023/08/07 PHPでプログラムしていると、FormのあるページでSubmit後、F5を押すとFormのデータが二重送信されてしまう問題が発生します。今回はこの二重送信問題の解決方法をご紹介します。 PHPのフォームデータ二重送信を防ぐ方法は大まかに2種類あるので、それぞれ個別に説明します。 Formの二重送信を防ぐ方法1:トークン方式 このトークン方式は、ページを開くたびにトークン(一時的な暗号)を生成し、トークンが一致するか確認して、一致する時だけ処理を行うという方法です。 2回目にPOSTが発生した時には既に新しいトークンが発行されており、トークンが一致しなくなるので、再読み込みは行われるものの、処理... PHPアルゴリズムセキュリティ WordPressに不審なファイルが大量発生するウイルス『SID GIFARI』 2022/03/04 2022/08/29 ホームページを開くと、謎のショッピングサイトが表示されるようになったWordPressの管理者ページ入れない!SearchConsoleのページ数が急増している このような症状が発生したら、それはSID GIFARIの仕業かもしれません。 SID GIFARIとは これ、ハッカーの名前です。このハッカーが作ったと思われるサーバーに感染するタイプのコンピュータウイルスも名前がわかんないので、SID GIFARIって呼んでます。私はWordPressにしか感染している所を見たことないので、WordPress経由で感染するウイルスだと思います。 SID GIFARIの感染経路 WordPressに管... インフラ関係セキュリティ 管理人について uilouプログラマー基本的に、自分自身の備忘録のつもりでブログを書いています。自分と同じ所で詰まった人の助けになれば良いかなと思います。システムのリファクタリングを得意としており、バックエンド、フロントエンド、アプリケーション、SQLなど幅広い知識と経験があります。広いだけでなく、知識をもっと深堀りしていきたいですね。 PROFILE CONTACT※業務システムの開発や既存システムのリプレイス、ホームページの技術的なサポート等のお仕事のご依頼や取材、掲載依頼等はお問い合わせからご連絡ください。一人で運営しております都合上、お返事が遅くなることがありますが、ご了承くださいませ。