Reactアプリの多重クリックを防止する最適解とは？
Reactアプリの多重クリック防止について考えてみたから、共有かたがた備忘のために記しておきたい。 多重クリックとは、ボタン等のユーザーアクションから発せられたイベントが重複処理されることを指す。お問い合わせフォームの送…
Web制作Web制作Web制作
Web制作
Web制作[React] アニメーション付き数値カウンターで視覚演出する「react-number-easing」の使い方
リアルタイムWebコンテンツにおいてプログレスUIを配置するケースは少なくない。これは進行状況を知らせるために用いられ、たとえばアップロード進捗やAPIリクエスト進捗など思い出される。 さてこのプログレスUI（進捗値）を…
Web制作アニメーションアイコンで横スクロールすることを案内するJavaScriptライブラリ「scroll-hint」の使い方
レスポンシブデザインのコーディングに際して、横にはみ出させざるを得ないコンテンツがある。そのもっともたるものが表レイアウトで、モバイルスクリーンでは、だいたいの場合は横幅超過してしまう。 無思慮な状態だとページ全体が押し…
Web制作【無料】PHP無し、HTMLだけ！お問い合わせフォームの作り方
お問い合わせフォームを設置するとき、PHPなどのサーバサイドに類するいずれかの言語とHTMLの知識が必要になる。サーバサイドの処理があってこそお問い合わせフォームが機能することは、きっと既知のことだと思う。 しかし「HT…
Web制作モバイルブラウザの100vh問題を回避するReactコンポーネント「react-div-100vh」の紹介
要素の高さをビューポートに吸着させる手段として、100vhが最適解ではあるが、モバイルブラウザにおいては悩ましい点があることをご存知だろうか。 モバイルブラウザには、URLを表示するアドレスバーとタブ切り替え操作等のコン…
Web制作表示崩れの報告？閲覧環境の情報共有ができるWebツール「mybrowser.fyi」が便利！
マークアップエンジニアならば、「表示が崩れている！」と報告を受けた経験があることと思う。そのようなとき、決り文句のごとく、 「ブラウザは？」「OSは？」「ブラウザのサイズは？」 を質問するのだけれど、報告主がクライアント…
Web制作VSCode拡張機能「Fabulous」でCSS記述を時短！高速コーディングのお供に
CSSを記述するにあたって、Emmetやスニペットで時短を試みるケースは一般的で、あなたも導入していることだろう。これら機能によって開発は、相当に高速化していることは疑いようもない。無論わたしもVSCodeの拡張機能に追…
Web制作セレクタ間のチルダ記号って？CSSの間接セレクタ「E ~ F」を使いこなそう！
このエントリーでは、CSSの間接セレクタについて共有したい。 CSSのセレクタ定義には、さまざまな用法があって、なかでも「タイプセレクタ、子孫セレクタ、IDセレクタ、クラスセレクタ」は一般的だろう。マークアップに精通して…
Web制作画像トリミング機能を提供するJSライブラリ「react-image-crop」の紹介
画像トリミング機能は、ビューアソフト等に見られる代表的な機能のひとつであるが、Webアプリに実装しなければならないシーンは滅多に遭遇しない。一方でサムネイルの生成であれば、サーバサイドで一定サイズにトリミングすることを考…
Web制作[React]ドラッグ&ドロップのファイルアップロードを簡単実装！「react-dropzone」の紹介
ファイルアップロードUI設計のややこしさときたら…。<input type=”file” />で済むのなら、なんと明快なことか。そういう覚えはないだろうか。 <input type=”file” />だけであ…
