iPhoneでも動作！response.jsで実現する画像・動画・iframeのレスポンシブ遅延読み込み完全ガイド

JavaScript
Webサイトのパフォーマンス最適化において、画像や動画の遅延読み込み（LazyLoading）は必須のテクニックです。しかし、実際に実装しようとすると以下のような問題に直面します：…
続きを読む

3466個のDOM要素でも軽快に動作！大量データ表示のパフォーマンス最適化テクニック

JavaScript
MaterialSymbolsの全アイコン（3466個）を一覧表示するWebページを作成していた際、深刻なパフォーマンス問題に直面しました。各アイコンにコピー機能を付けるため、全て…
続きを読む

iOSのpointer-eventsバグとイベント制御対策

JavaScript HTML/CSS
Webサイトでリンクやボタンのクリックを無効化したい場面は意外と多いものです。例えば、処理中のボタンを一時的に無効にしたり、特定条件下でリンクを機能させないようにしたりする場合です…
続きを読む

Swiperの自動再生が「なぜ」止まるのか？
本質から理解する設定ガイド

JavaScript
「Swiperの自動再生が止まります...」との報告を受けました。コードを確認すると間違いなくautoplay:trueは設定されています。しかし、ブラウザで動作確認をすると、最初…
続きを読む

キャッシュクリアをするJavaScript「cache-cleaner.js」

JavaScript
Web開発をしていると、クライアントから「画像が変わっていない」「レイアウトが反映されない」といった報告を受けることがよくあります。その度に「ブラウザのキャッシュを削除してください…
続きを読む

キャッシュとストレージとセッションの違い、キャッシュをクリアするJavaScript

JavaScript
ウェブ開発をしていると「キャッシュ」「ストレージ」「セッション」という似たような言葉が頻繁に登場します。これらはすべてデータを保存する仕組みですが、それぞれ異なる特性と用途がありま…
続きを読む

内部リンク先のページを、モーダルで開くJavaScript

JavaScript
Webサイトで内部ページへのリンクをクリックした際、新しいページに遷移するのではなく、モーダル（ポップアップウィンドウ）で表示する仕組みを作成しました。WordPressのCont…
続きを読む

JavaScriptで目次生成「inppend-toc.js」
- スクロール連動・アクティブハイライト対応 -

JavaScript
今回は、シンプルなHTMLとJavaScriptだけで、Webページに目次（TOC:TableofContentsの略）を実装、見出しから目次を自動生成できるJavaScriptラ…
続きを読む

【JS】クリック時とホバー時にそれぞれ対応するJavaScriptアコーディオン

JavaScript HTML/CSS
Webサイトでよく使われるアコーディオン機能。今回は、クリック時とホバー時の両方に対応し、かつdetailsタグでもWordPressメニューでも使える汎用性の高いアコーディオンを…
続きを読む

タブレットのレスポンシブ対応：ベース画面サイズの縮小版表示でレスポンシブ実装

JavaScript HTML/CSS Web制作
概要本記事では、画面幅に応じて適切なレイアウトを提供する効果的な実装方法を解説します。特に以下のデバイスカテゴリごとに最適化された表示方法を実現します：小型スマートフォン（412p…
続きを読む

Swiperのautoplay（自動再生）が止まらないようにする方法

JavaScript
はじめにSwiperの自動再生機能を使用する際、disableOnInteraction:falseを設定しても、時々スライドが止まってしまう問題に遭遇することがあります。この記事…
続きを読む

IllustratorでImageMap（クリッカブルマップ）のクリック領域を作成する

JavaScript HTML/CSS
今回はIllustratorを使ってクリッカブルマップを作成する方法をご紹介します。実際の制作過程で発生しやすい問題とその解決策もあわせて解説します。以前も記事にしましたが、もう少…
続きを読む

Airリザーブのクエリパラメータを利用した予約種別ごとの分析方法

JavaScript Web制作
はじめにAirリザーブを利用して複数の予約種別を運用している場合、予約種別ごとの分析が必要になることがあります。本記事では、URLのクエリパラメータ（schdlId）を利用して、G…
続きを読む

JavaScriptでWebページのBasic認証状態を表示する

JavaScript Web制作
開発環境やステージング環境でBasic認証を設定することは一般的なpracticeですが、外部ファイルの読み込みテストなどで一時的に解除した後、そのまま解除状態になっているケースが…
続きを読む

予約種別判定用のスクリプトを利用した、予約種別ごとのGoogleタグマネージャー設定

アナリティクス JavaScript
予約種別判定用のスクリプトを利用して、GTMで予約種別ごとの計測を設定します。ここでは例として、「来場相談会」と「オンライン相談会」の設定手順を説明します。 https:…
続きを読む

AirリザーブのURLパラメータから予約種別を判定し、予約種別ごとの計測をする

アナリティクス JavaScript
背景と目的Airリザーブでの予約フローでは、URLパラメータschdlIdで予約種別を区別しています。このパラメータを利用して、予約種別ごとの計測を実現します。実装の課題URLパラ…
続きを読む

jQuery UI Datepickerのカスタマイズ：date2の日付をdate1より前の日付しか選択できないようにする

JavaScript
フォームで2つの日付選択フィールドを扱う際、しばしば2つの日付間に依存関係を持たせたいケースがあります。例えば、2つ目の日付を1つ目の日付より前の日付しか選択できないようにしたい、…
続きを読む

font-familyで「ヒラギノ明朝」を指定すると、Windowsでフォールバックフォントの太さが変わってしまう問題の回避策

JavaScript HTML/CSS Web制作
問題の概要Webサイトで「ヒラギノ明朝」を指定した際、Windows環境でフォールバックフォントの文字が予期せず太く表示される問題について解説します。問題が発生するケースfont-…
続きを読む

Sunoのプロンプトが200文字までなので、DeepL API & 文字数カウンターを作ってみた

PHP JavaScript
はじめにDeepLAPI&文字数カウンターhttps://gist.github.com/sarap422/b2c0fdff98b14197cc7fd41541b5cf34…
続きを読む

WordPressのビジュアルエディター(TinyMCE)に複数の自作カスタムボタンを追加する方法

WordPress JavaScript
WordPressのビジュアルエディターにカスタムボタンを追加することで、コンテンツ作成の効率を大幅に向上させることができます。この記事では、複数のカスタムボタンを追加する方法と、…
続きを読む

suffix（サフィックス）の活用で、SVGアニメーションにレスポンシブに対応する

JavaScript Web制作
SVGアニメーションは、ウェブサイトに動きと魅力を加える素晴らしい方法です。しかし、異なる画面サイズに対応するレスポンシブデザインでは、SVGアニメーションの実装が難しくなることが…
続きを読む

CSS変数とJavaScriptを使って、アンカーリンクのジャンプ先の位置を柔軟に調整する

JavaScript Web制作
ウェブサイトでアンカーリンクを使用する際、固定ヘッダーがあると目的の位置に正確にジャンプできないことがあります。この問題を解決するために、CSS変数とJavaScriptを組み合わ…
続きを読む

カスタマイズ可能なテキスト変換ツールの実装

JavaScript Web制作
はじめにWeb開発やテキスト処理において、特定のパターンに基づいてテキストを変換する必要性は頻繁に発生します。今回は、JavaScriptを使用して柔軟で使いやすいテキスト変換ツー…
続きを読む

dialogタグを使用したシンプルなモーダルの実装方法

JavaScript Web制作
はじめにWebサイトやアプリケーションでよく使用されるUIパターンの一つに「モーダル」があります。モーダルは、ユーザーの注意を特定のコンテンツに集中させるために使用される重要なUI…
続きを読む

複数の画像をSwiperでのライドショーで表示するモーダルの実装方法

JavaScript Web制作
はじめにウェブサイトでギャラリーや商品紹介などを行う際、複数の画像をスライドショー形式で表示するモーダルは非常に有効です。今回は、Swiperライブラリを使用して複数のスライド可能…
続きを読む

画像パスを動的に変更するJavaScriptテクニック

JavaScript
はじめにWebサイト開発において、画像パスを動的に変更する必要が生じることがあります。今回は、テスト環境と本番環境で画像パスが異なる場合に、JavaScriptを使用して動的に画像…
続きを読む

WordPressのPDF埋め込みプラグインを比較してみる

WordPress JavaScript
WordPressのPDFプラグインを比較してみます。望む条件は、デバイスが横向きの場合（@media(orientation:landscape)）は、PDFが見開き2ページ表示…
続きを読む

ページの特定の部分を、templateに置き換える方法

JavaScript Web制作
ウェブ開発において、ページの特定のセクションを動的に更新する必要がしばしばあります。JavaScriptを使用してこのような動的な置き換えを行う方法を見ていきましょう。 …
続きを読む

チェックボックス全選択でロックを解除するJavaScriptの実装

JavaScript Web制作
はじめに:Webページにおけるユーザーインタラクションの中で、特定の条件下でアクションを制限したり許可したりすることは非常に一般的です。例えば、利用規約に同意する、または特定の選択…
続きを読む

同ページ内のアンカーリンクにはスムーススクロール、異なるページへのリンクには通常のリンクの動作をさせる方法

JavaScript
スムーススクロールリンクと通常リンクの自動判別とエフェクト追加方法ウェブページ内でのスムーススクロールリンクはユーザーエクスペリエンスの向上に貢献します。しかし、外部ページへのリン…
続きを読む

「device.js」を使って、タブレット表示をPC版レイアウトの縮小表示にする方法

JavaScript Web制作
近年、ウェブサイトのユーザビリティはデバイスの多様性に大きく依存しています。特にタブレットデバイスは、スマートフォンとデスクトップコンピュータの間のギャップを埋める存在として、独特…
続きを読む

JavaScriptによるタブ切り替え機能の実装（invisibleTab.js）

JavaScript Web制作
ウェブデザインの中で、タブ切り替え機能はコンテンツを整理し、ユーザーにとってアクセスしやすくするための効果的な方法です。今回は、PCでのタブ切り替えとモバイルでのアンカーリンク機能…
続きを読む

Anime.jsを使用したスムーススクロール & GSAPを使用したフェードインアウトアニメーション

JavaScript Web制作
スムーススクロールとフェードイン・アウトアニメーションを組み合わせたウェブページナビゲーションウェブページのナビゲーションを向上させるために、スムーススクロールとフェードイン・アウ…
続きを読む

MTS Simple Bookingの「day-calendar」に、日付や曜日名クラスを追加するカスタマイズ

JavaScript Web制作
このチュートリアルでは、HTMLクラスをMTSSimpleBookingプラグインに追加するプロセスを説明します。これは、予約カレンダーの外観をカスタマイズしたり、特定の機能を追加…
続きを読む

レスポンシブデザインを強化する「Response.js」の活用法

JavaScript Web制作
現代のウェブ開発では、さまざまなデバイスと画面サイズに対応するレスポンシブデザインが必須となっています。そのための強力なツールとして「Response.js」があります。この記事で…
続きを読む

BrightcoveのVideo.jsライブラリからHLSに変換：ステップバイステップガイド

JavaScript Web制作
今回は、BrightcoveのVideo.jsライブラリを使用して動画を再生し、その後HLS形式に変換する方法を紹介します。この方法では、<video-js>タグが&l…
続きを読む

ウェブページのパフォーマンスを最大化する：画像とビデオの遅延読み込み

JavaScript Web制作
Webページのパフォーマンス向上は、ユーザーエクスペリエンスとSEOの両面で重要です。この記事では、ページのパフォーマンスを向上させるための2つの主要な手段について説明します：画像…
続きを読む