2023/11/29 2023/11/29 よもやま話WEBP形式の画像を劣化させずに圧縮する方法 2023/11/29 2023/11/29 SQLPHPWordpressWordPressのWP_Queryでクエリ（SQL）を確認する方法 2023/11/12 2023/11/12 PHPWordpressWordPressの管理者メニューの「投稿」キャプションを変更する方法 2023/09/08 2023/09/08 Javascript&jQueryアルゴリズムJavascriptでFormをSubmitする前に入力チェック（バリデーション）を実施する方法 すべて WEBP形式の画像を劣化させずに圧縮する方法 2023/11/29 2023/11/29 このページにたどり着いた人は、ホームページの高速化をしようと思って、WEBP形式の画像を使おうとしたけど、思ったほどWEBP画像のデータサイズが小さくならなかった。もしくは圧縮は出来たけど、画像がガビガビになってしまった人ではないでしょうか？ WEBPって圧縮方法を間違えると、画質が大きく低下してしまうんです。なので、WEBPの適切な圧縮方法を教えます！ 画像の『WEBP形式』とは？ WEBP形式は画像のデータ形式のことで、拡張子は「.webp」です。Googleによって開発されました。 WEBP形式の特徴は「画質の劣化を最小限に、画像サイズを軽量化することができる」という点です。また、PNG... よもやま話 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アルゴリズムHTML & CSS HTMLの構造を画面サイズごとに変更する方法 2023/08/20 2023/08/20 もうレスポンシブに対応するのは当たり前のことですけど、デザインによっては単純に配置を組み替えることが難しい場合がありますよね。そういう時、昔はパソコン用のHTMLとスマホ用のHTMLを別々に用意して、画面幅に応じて表示を切り替えるということをしていました。 しかし、今は１つの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&CSS 【javascript/CSS】クリックで開閉するアコーディオン表示の作り方 2023/04/30 2023/07/10 WEBデザインのスタンダードがモバイルファーストになってしばらく経ちましたが、アコーディオン表示は長いコンテンツを短くまとめたり、特定の人にしか関係性ないようなコンテンツを普段しまっておく手段として、非常に高い需要があります。 今回はそんなアコーディオン表示の作り方をご紹介します。 Javascriptを使ったアコーディオン表示のサンプル まず、以下のサンプルを見てください。青いボタンをクリックすると、アコーディオンエリアが開閉します。 これは余計な処理を省いた最もプリミティブなサンプルではないかなと思います。これらはjavascriptによって、開閉しています。 Javascriptを使った... HTML&CSSJavascript&jQueryJavascript & jQuery 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&jQueryWordpress jQueryで覚えるべき関数たち 2023/06/11 2023/06/11 「動くホームページが作りたい」「CSSの動きだけでは物足りなくなってきた」という人、jQueryを初めて触ってみる人向けに書いてます。 jQueryを学ぼうとすると、膨大なルールや関数の数に圧倒されませんか？それもそのはず、HTMLやCSSなどのマークアップランゲージと違って、jQueryはjavascriptのライブラリで、その本質はプログラミング言語なんです。 整理されていないプログラミング言語の情報をバラバラと調べてると、あきらかに情報過多です。何から学べばいいかわからなくなって混乱することでしょう。 なので、「これだけ覚えればある程度やりたいことができるだろう」っていう関数をご紹介しま... Javascript&jQuery ReactやNext.jsのフロントエンドでSASS/SCSSを使う方法 2023/06/05 2023/06/05 私はホームページ制作ではもっぱらSCSSを使っています。このブログでも、もちろんSCSSを使っています。私はホームページ制作ではPreprosの有料ライセンス版を使っているのですが、ReactやNext.jsのフロントエンドの作業でも、やっぱりSCSSを使いたくなります。 React/Next.jsでSASS/SCSSを使うには ReactやNext.jsでSASS/SCSSを使うにはコマンドでパッケージをインストールするだけでOKです。 $ npm install --dev sass これで、ReactやNext.jsのプロジェクトでSASS/SCSSのファイルが使えます。 読み込んで使う... ReactJavascript&jQueryPHP 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 【PHP】DropboxAPIをPHPで使ってみる 2023/08/25 2023/08/25 私はDropbox結構前から使っていたんですが、今までWEBサービスと連携させたことはなかったです。なので、今回DropboxにAPIを使って、PHPからアクセスしてみます。 以下の記事を参考にさせていただきました。 [PHP] Dropbox API でファイル情報を取得 Migrating App Permissions and Access Tokens Dropbox for HTTP Developers Dropboxアカウントを取得しましょう Dropboxのサイトからアカウントを作成してください。https://www.dropbox.com/ja/ DropboxのDevel... PHP WordPressでカテゴリー名やカテゴリースラッグを取得する方法 2023/07/11 2023/07/11 今さらって感じもしますが、いざ使おうとすると忘れてしまいますよね。そこで、改めて、カテゴリーの取得方法をテンプレート別にまとめようと思います。 archive.phpやcategory.phpでカテゴリー名を取得する場合 archive.phpやcategory.phpなど、いわゆるカテゴリー一覧ページのテンプレートでカテゴリー名を取得する時のパターンです。 カテゴリータイトルを取得するにはsingle_cat_title()を使う single_cat_title()はカテゴリー名を取得する関数です。single_cat_title()の使い方としては以下の通りです。 <h1>&... PHPWordpressWordPress 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 ACFの入力済みフィールドって変更しても大丈夫？ 2023/07/29 2023/07/29 WordPressでホームページを作成する際、Advanced Custom Field（ACF）って便利ですよね。私もホームページ作成時に初期段階から導入して、検索機能用の属性設定などに使用したりしています。 ただし、ある程度作ってから、仕様変更したい時ってありますよね。「用途とID名が一致しないから、ID変えても良いですか？」とか「今までフリーテキストにしてたけど、誤入力が多いからドロップダウンリストに変更したい」等、あると思います。 これやっちゃった場合、どうなるのかな？大きなサイトを運営している方だと、とても心配ですよね。この件、ちょっと調査したので、報告します。 Advanced C... SQLWordpress WordPressでカテゴリー名やカテゴリースラッグを取得する方法 2023/07/11 2023/07/11 今さらって感じもしますが、いざ使おうとすると忘れてしまいますよね。そこで、改めて、カテゴリーの取得方法をテンプレート別にまとめようと思います。 archive.phpやcategory.phpでカテゴリー名を取得する場合 archive.phpやcategory.phpなど、いわゆるカテゴリー一覧ページのテンプレートでカテゴリー名を取得する時のパターンです。 カテゴリータイトルを取得するにはsingle_cat_title()を使う single_cat_title()はカテゴリー名を取得する関数です。single_cat_title()の使い方としては以下の通りです。 <h1>&... 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 2023/06/19 Googleで検索した際、検索結果がどんどん下に読み込まれていきますよね？この新しい情報が随時読み込みされて、どんどんスクロール量が増えていく動きは『無限スクロール』と呼ばれているそうです。 今回はこの無限スクロールを解説していきます。 大量のコンテンツの見せ方には『ページャー』と『無限スクロール』がある ページャーというのは、1ページに情報が決められた数のみ表示され、それ以上の情報は2ページ目、3ページ目とページめくりしていくことで表示されます。 対して、無限スクロールではページ遷移することなく、スクロール量がページ下部まで到達すると、javascriptによる追加情報の読み込みが行われ、j... Javascript&jQueryアルゴリズムインフラ関係 ホームページからのメールが届かない 2023/07/27 2023/07/27 最近、メールが届かないこと増えたと思いませんか？実は、サーバーを運営する各社でセキュリティを強化しており、原因はセキュリティ強化によるものかもしれません。 事の発端はemotetによる"なりすましメール" 最近、メールセキュリティがそろって強化されている原因として、emotetの大流行があります。 emotetは、メールに添付されたWordファイルを開いて、マクロが実行されることでemotetに感染します。そして、パソコンがemotetに感染すると、パソコンに設定されているメールのアカウント情報やアドレス帳の情報を抜き出して、悪いやつのサーバーに勝手にデータを送信してしまいます。 ※大流行中に... インフラ関係セキュリティ未分類 Google検索でホームページのインデックスされているページを調べるには 2023/07/26 2023/07/26 Googleには様々な検索演算子があることをご存じでしょうか？数年前にテレビ番組で「表示された写真がどこの写真か検索エンジンを活用して探し出してください。」という企画がありましたが、「検索演算子を有効活用できていたらもっと早く見つけられるんだろうなぁ」とやきもきしながら見ていました。 今回、そのGoogle検索演算子の１つ「インデックスされているページ」の検索方法をご紹介します。 なぜインデックスされているページを表示する必要があるのか？ そもそもなぜそんなことをしようと思ったのかですが、私は自身のブログ運営にGoogle SearchConsoleを活用しています。もちろん自身が書いたブログ... インフラ関係 LookerStudio(旧データポータル)で統合フィールドを作る方法 2023/07/16 2023/07/16 みなさんはLookerStudioを使っていますか？私はLookerStudioで、このブログのアクセス分析資料を作成して、自動で毎月PDF形式でメールで受け取るようにしています。 その中で、ずっとできなかったことがあるんですけど、最近やり方がわかったので、ご紹介します。 LookerStudio（旧データポータル）って何？ LookerStudioがわからない人は、便利なのでここで学んで、ぜひ使ってみてください。 LookerStudioはGoogleのサービスの一つで、自由にデータを読み込ませて、集計・分析ができるツールです。かつてはデータポータルやGoogle Data Studioとい... インフラ関係 VisualStudioCode(VSCode)のエクスプローラーのインデントの広げ方 2023/06/06 2023/06/06 最近、Next.js触ってるんですけど、ちょっと気になっていることがありまして・・・VSCodeのエクスプローラーウィンドウにプロジェクトフォルダを表示しているんですが、「インデントが狭すぎて、フォルダの構造がよくわからなくなる！」 これを見てほしいんですが、インデントが狭すぎると思うんです。 私はエディタのインデントもタブサイズ（スペース4つ分）に設定する派です。 もうこれはインデントを広げるしかない！ VisualStudioCode（VSCode）でエクスプローラーのインデント幅を設定する方法 VisualStudioCode（VSCode）のエクスプローラーツリービューのインデントを設... インフラ関係セキュリティ ホームページからのメールが届かない 2023/07/27 2023/07/27 最近、メールが届かないこと増えたと思いませんか？実は、サーバーを運営する各社でセキュリティを強化しており、原因はセキュリティ強化によるものかもしれません。 事の発端は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の二重送信を防ぐ方法１：トークン方式 このトークン方式は、ページを開くたびにトークン（一時的な暗号）を生成し、トークンが一致するか確認して、一致する時だけ処理を行うという方法です。 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※業務システムの開発や既存システムのリプレイス、ホームページの技術的なサポート等のお仕事のご依頼や取材、掲載依頼等はお問い合わせからご連絡ください。一人で運営しております都合上、お返事が遅くなることがありますが、ご了承くださいませ。
