「数字がランダムにシャッフルされながら表示するやつ」本当はちゃんとした名前があるんだろうけど、なんて言うのかな？わかんないでも、作ってみたので、紹介します。 とりあえず、サンプルを見て欲しい。「あー！それね！」ってなるから 今回はこれの作り方を説明します。 ボタンクリックで指定桁数のランダムな数字を取得する まず、ボタンクリックで指定した桁数のランダムな数字を取得できるようにします。 以下がボタンクリックと数字を表示するスクリプトです。 // ボタンクリックイベント $(&#...

マニアックなブログへようこそ。今回ご紹介するのは、WP REST APIを使って記事一覧を取得する際、取得記事をカスタムフィールドで絞り込む方法です。WP REST APIの使い方はこちらを参考にしてください。 カスタム投稿タイプとカスタムフィールドを定義 まず、どういうカスタムフィールドを定義するか先に決めておきましょう。今回は「投稿」ではなく、カスタム投稿タイプ「商品情報」を定義してみます。functions.phpに以下の内容を記述します。 /* カスタム投稿タイプの定...

以前から、FormをSubmitする時、PHPで入力値をチェックして、ダメだったら何もせずメッセージを表示するのって「無駄な通信だな」「先にJavascriptで入力値をチェックできたら良いのに」って思っていました。 でも、入力チェックの良い設計が思いつかなかったんです。今回、それなりの形になったので、ご紹介します。 フォームの入力チェック（バリデーション） 今回のサンプルで想定しているformは以下の通り <form class="v-form" ...

サイトの高速化に力を入れているWEB担当者の方ならご存じと思いますが、サイトの高速化にはパターンがあります。 サイトを高速化する王道3パターン サイト高速化の教科書的パターンが、以下の3パターンです。 サーバーとの通信回数を減らす サーバーからのダウンロードデータを減らす サーバーからの読み込みタイミングをずらす サーバーとの通信回数を減らす これはファイル数が多いと、それだけ何度もサーバーにリクエストを送り、サーバーもそれに応えるように何度もファイルを送ります。この『何度も...

「動くホームページが作りたい」「CSSの動きだけでは物足りなくなってきた」という人、jQueryを初めて触ってみる人向けに書いてます。 jQueryを学ぼうとすると、膨大なルールや関数の数に圧倒されませんか？それもそのはず、HTMLやCSSなどのマークアップランゲージと違って、jQueryはjavascriptのライブラリで、その本質はプログラミング言語なんです。 整理されていないプログラミング言語の情報をバラバラと調べてると、あきらかに情報過多です。何から学べばいいかわから...

私はホームページ制作ではもっぱらSCSSを使っています。このブログでも、もちろんSCSSを使っています。私はホームページ制作ではPreprosの有料ライセンス版を使っているのですが、ReactやNext.jsのフロントエンドの作業でも、やっぱりSCSSを使いたくなります。 React/Next.jsでSASS/SCSSを使うには ReactやNext.jsでSASS/SCSSを使うにはコマンドでパッケージをインストールするだけでOKです。 $ npm install --de...

PaaSを利用したいのだけど、Herokuの無料プランが無くなってしまったため、Vercelを使ってみることにしました。元々、Heroku（Heroku Postgres）＋Flask（Python）+React（Javascript）でサンプルアプリを作って、会社でプロジェクト化するか検討する材料に使おうかと思っていたんです。ただ、Herokuには無料プランが無くなってしまったので、それをVercel＋Next.js（Javascript）＋React（Javascript...

WEBデザインのスタンダードがモバイルファーストになってしばらく経ちましたが、アコーディオン表示は長いコンテンツを短くまとめたり、特定の人にしか関係性ないようなコンテンツを普段しまっておく手段として、非常に高い需要があります。 今回はそんなアコーディオン表示の作り方をご紹介します。 Javascriptを使ったアコーディオン表示のサンプル まず、以下のサンプルを見てください。青いボタンをクリックすると、アコーディオンエリアが開閉します。 これは余計な処理を省いた最もプリミティ...

Googleで検索した際、検索結果がどんどん下に読み込まれていきますよね？この新しい情報が随時読み込みされて、どんどんスクロール量が増えていく動きは『無限スクロール』と呼ばれているそうです。 今回はこの無限スクロールを解説していきます。 大量のコンテンツの見せ方には『ページャー』と『無限スクロール』がある ページャーというのは、1ページに情報が決められた数のみ表示され、それ以上の情報は2ページ目、3ページ目とページめくりしていくことで表示されます。 対して無限スクロールでは、...

即時関数というものがあります。おそらく、この記事を読んでいる方は『即時関数』というものがあることを知って、どういう場面で使うのか、どういう書き方をするのかが知りたくて調べて来たんじゃないでしょうか？ 即時関数とは 即時関数は、関数を定義して、すぐにその場で関数を実行する構文です。 javascriptでは以下のように記述します。 // 引数の無い即時関数 (function() { // 関数の処理をここに記述 })(); // 引数がある時の即時関数 (function([...