モダンブラウザでサポートされているCSSの疑似クラスを使えば、JavaScriptでフォーム状態を監視することなく、CSSで状態を検知できるようになりました。また、HTMLのpattern属性を使えば入力バリデーション機能（※）もつけられます。これらを活用することで以前よりも手軽にインタラクティブなフォームを実現できます。 デモを別ウインドウで再生する ソースコードを確認する ※あくまでform要素への入力バリデーションなので、送信される値に対して保証はありません。送信される値をチェックするにはサーバー側のバリデーションが別途必要になります。 さまざまな状態を選択できる疑似クラス 疑似クラス（Pseudo-classes）はCSSで使えるセレクターの一種で特定の状態の要素を指定できます。:hoverも疑似クラスの1つです。::afterは「疑似要素」と呼ばれ、表記は似ていますが呼び名が違う
サービスの管理画面を継続的に改善するためのReact Hook FormとZod活用術 - Mirrativ Tech Blog
こんにちは！ミラティブのフロントエンドエンジニア どじねこ です。 今回は、ミラティブを支える社内向けの管理システムにおいて、機能開発の体験を改善する取り組みを「MUI と Zod、React Hook Form の活用術」としてご紹介させていただきます。 前提 ミラティブでは、他の多くの Web サービスと同様に配信者さんの登録した情報や配信の履歴を管理する社内向けのシステムが存在しています。 特に管理システムのフロントエンドにおいては、その特性上入力フォームの実装がその大半を占めています。 日々の機能開発においては、そうした管理システムに実装された入力フォームの新規実装や機能拡張が行われています。 課題 一般的な入力フォームでは、画面の初期描画の際にすでに設定済みの値をフォームに適用する初期化処理や、入力された内容を検証して必要に応じてエラー表示するバリデーション処理が必要です。 ミラ
CSS Flexboxを使用してWebページによく使用されるUIコンポーネント、ヘッダでロゴを左端にナビゲーションを右端に、固定幅のサイドバーと流動幅のメイン、フォームで入力欄とボタンの高さを合わせる、同じHTMLで異なるレイアウトのカードを実装するテクニックを紹介します。 CSS Flexbox: 5 Real World Use Cases by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでヘッダを実装する方法 Flexboxでサイドバーとメインを実装する方法 Flexboxで「Top Sellers」のグリッドを実装する方法 Flexboxでカードを実装する方法 Flexboxで検索フォームを実装する方法 はじめに FlexboxはCSSの中でも最も優れた機能の1つ
【これはスゴい】グーグル流ログインフォームの最適化テクニック集【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ
すべてのWeb担当者が読んで学んで絶対に損がない情報がでてきた。グーグルが公開した、サインイン（ログイン）用フォームのベストプラクティスを詳細に解説する記事だ。 SEOに直接関係する話題ではないが、UX改善のベストプラクティスとして（新しいHTML技術の情報も含めて）非常に有用だ。少しでも多くの人に教えたい。 ほかにも、今回はおもしろいネタが多い。GoogleのSERPでのタイトル書き換えを回避する超効果的な対策や、ソーシャルメディア活用ノウハウ、ラスタ画像からSVG生成などなど、あなたのサイト運営やSEOに役立つ情報を、今週もまとめてお届けする。 グーグルSERPでのタイトル書き換えは6割も!? 負け組titleタグ6つの特徴と超効果的な対策とは？ページの中身を変えず日付だけ新しくすればSEO効果ありますよね？「iframe埋め込み時だけインデックス可」indexifembeddedタグ
クイックサマリー ‐ 私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべてのアクセシブルなコンポーネントをアルファベット順に記載しました。目次をスキップするか、スクロールして1つずつお読みください。 :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color systems color palettes comics component libraries cookie consent prompts dark mode data
先日リリースされたChrome 119に地味だけど嬉しい新機能が実装されていたので、紹介します。 フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでChorme, Edgeでも使用できます。 Select element: now with horizontal rules by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 select要素内で区切り線（hr）を使用できるようになりました select要素内の区切り線（hr）の実装方法 select要素内の区切り線（hr）のデモ select要素内で区切り線（hr）を使用できるようになりました 11/1にリリースされたChrome 119では、
イラスト不正利用をAmazonへ申告する方法
イラストを不正利用されてグッズを作られてAmazonで販売された時、Amazonへ申告するとそのグッズを取り下げてもらえます。 知的財産権の侵害を申告するフォームを入力＆送信しよう！ 知的財産権の侵害を申告するページを開き記入します。 https://www.amazon.co.jp/report/infringement （↑上記はFire TV StickのASINです。 https://www.amazon.co.jp/dp/B09JDGYSQW/ ） 自分の連絡先を入力して…。 フォームを送信するとAmazonから「お客様の報告には追加情報が必要です」というメールが来ました。このメールが何度読んでもよくわからないのですが、この部分。 この箇条書きの部分をコピー→申請フォームに再度アクセス→「権利侵害の根拠となる詳細 （登録番号・URL等）」の部分にペースト→それぞれのケースに合わせ
アクセシビリティを考慮したHTMLコーディングガイド
これ何なの？ もともと私が社内メンバー向けに書いていたドキュメントで、 UIパーツ毎のアクセシビリティを考慮したHTMLコーディングTips集です。 社内のドキュメント置き場に眠っていたものですが、知見として社外にも共有出来る内容だなと思ったのと、アクセシビリティをこれからやっていこう！という方の参考になればと思い共有させて頂きます。 ※そもそもアクセシビリティって何なの？という方は、ウェブアクセシビリティ基盤委員会のサイトを見てみてください🔍 目次 おすすめVSCode拡張機能 🕹ボタン 📷 画像 🔍 ナビゲーション 💻 フォーム おすすめVSCode拡張機能 axe Accessibility Linter をインストールしておくとimgタグのalt忘れなど警告が表示されるので、アクセシブルでない書き方を未然に防げるので便利です！ 🕹ボタン buttun タグを使いましょう
概要 内容に応じてサイズが可変する textarea を、できるだけ手間をかけず、スマートな実装を試みます。 しかも、ネイティブのフォームが持っている利点をそのまま活かして、堅牢でアクセシブルな設計を目指します。 標準 textarea の難点 HTML の textarea 要素は基本的に高さが固定されていて使い勝手が悪いです。３行分くらいしか領域がなくて、長い文章を打つのがとにかく苦痛なんていうこともザラです。 最近のブラウザ実装では、多少気を利かせてくれているのか、テキストエリアの領域をドラッグで拡大・縮小できます。 ただ私は思うのです。めんどくさいし、最初っから、入力するテキスト量に応じて自動的に伸び縮みしてくれればいいのに……と。スクロールバーなんて、１ページにひとつあればじゅうぶんなんですよ。 実装方法 難しいことはありませんが、HTML と CSS、JS が協調して動作します
フォーム要素のチェックボックス・ラジオボタン・レンジスライダー・プログレスバーのカラーを簡単に変更できるCSSの新しいプロパティ「accent-color」の基礎知識と使い方を紹介します。 CSS accent-color by Adam Argyle, Joey Arhar 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの新しいプロパティ「accent-color」 「accent-color」にサポートされている要素 コントラストの確保 他の要素のカラーを変更するCSS 今後の可能性 CSSの新しいプロパティ「accent-color」 現在のHTMLフォーム要素は、カスタマイズが難しいと言われています。カスタムスタイルをほとんどまたはまったく使用しないか、inputのスタイルをリセットして一から作り直すかのどちらか
Can I email…
Apple Mail macOS iOS Gmail Desktop Webmail iOS Android Mobile Webmail Outlook Windows Windows Mail macOS Outlook.com iOS Android Yahoo! Mail Desktop Webmail iOS Android AOL Desktop Webmail iOS Android Samsung Email Android Mozilla Thunderbird macOS Windows ProtonMail Desktop Webmail iOS Android Fastmail Desktop Webmail HEY Desktop Webmail Orange Desktop Webmail iOS Android LaPoste.net Desktop Webm
HTML: ログイン・ユーザー登録フォームの厳選ベストプラクティス11（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 11 HTML best practices for login & sign-up forms—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/05/24 原著者: Andrey Sitnik（PostCSSとAutoprefixerの作者、首席フロントエンドエンジニア） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。 はじめに ログインフォームやユーザー登録（サインアップ）フォームは、ほとんどのWebサイトで使
この記事では、デザインシステムを作成するときの基本ガイドをまとめています。 この記事は3つのパートで構成されています。 デザインシステムを理解する（デザインシステムとは何か、いつ作るべきか？） デザインシステムの作成（作成プロセスとやっておきたい項目） デザインシステムの具体的なサンプル例（デザイナーとデベロッパー、それぞれの観点より） デザインシステム追加の検討事項（その他のコンセプトや参考文献など） *この記事では、Webサイトやアプリ、オンラインサービスなどを表す包括的な用語として、「プロダクト（Product）」という言葉を使用しています。 この記事のコンセプトをイラスト化するために作成した、デザインシステムを公開しています。ご自由にお使いください。 Basic Design System – Figmaファイル デザインシステムを理解しよう デザインシステムとは？ デザインシステ
既存のUIデザインをどのような手順で改善すればよいのか、UIのクオリティを高め、ビジュアルをよくするためのデザイン知識とテクニックを紹介します。 Cleaning up form UI by Nikita Прокопов 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに グリッドを定義する スペースの正規化 ピクセル単位のずれ ボタン カラーコントラスト タイポグラフィ 完成！修正したUI はじめに 下記は、IntelliJ Idea 2020.1 EAPを起動して最初に表示されるダイアログです。 このデザインをあなたはどう思いますか？ IntelliJ Ideaのダイアログ ぱっと見、清潔感がある普通のUIに見えますが、細かいところをよく見るとおかしいのが分かります。このフォームのUIのほとんどに改善する余地がありま
広野 萌 on Twitter: "パスワードフォームのUIとインタラクションについて考える度、わりと毎回同じ結論・同じ仕様にたどり着くので、デザインするとき自分が正解としていること9点まとめてみた。みんなで車輪の再発明やめよ〜！（以下ひとつずつ解説） https://t.co/2S3PlFeQzC"
パスワードフォームのUIとインタラクションについて考える度、わりと毎回同じ結論・同じ仕様にたどり着くので、デザインするとき自分が正解としていること9点まとめてみた。みんなで車輪の再発明やめよ〜！（以下ひとつずつ解説） https://t.co/2S3PlFeQzC
RelayHub合同会社の久保田光則です。 Reactでフォームを効率よく実装するためのライブラリとして、React Hook FormやReact Final Form、TanStack Formなどがあります。これらのライブラリは、フォームを効率よく実装できる枠組みを提供してくれるだけではなく、高速なフォームを実装するための方法も提供してくれます。 で、この記事ではReact Hook Formとかそういうライブラリの使い方というよりかは、そもそもなぜReactで実装したフォームのパフォーマンスが問題になりやすいのか、その辺りの事情について解説します。 Reactのレンダリングの仕組み Reactでは皆さんご存知のとおり、仮想DOMと呼ばれるDOMに似た構造のオブジェクトを生成してレンダリングを行います。Reactのコンポーネントはレンダリングするたびにそのコンポーネントに対応する仮想
【Flutter】わずか数分でアプリ開発！？超速アプリ開発総合フレームワーク「Masamune」 - Qiita
こんにちは。広瀬マサルです。 これまでのパッケージをまとめて統合Flutterフレームワークを作成しました。 コンセプトは 自動生成を用いて安全かつ高速に高品質のアプリを開発可能にするフレームワーク です。 使い方をまとめたので興味ある方はぜひ使ってみてください！ masamune はじめに まずはこちらを御覧ください。 ※動画のサンプルコードはこちらに公開しています。 こちらはメモ帳アプリを全くの空の状態からわずか10分以内で完成させる動画です。 このMasamuneフレームワークを利用することでアプリ開発で行うコーディングの大半を削減することが可能になります。 このフレームワークは下記の機能を中心としています。 CLI（コマンドラインインターフェース）ツールによるコードテンプレートの生成 build_runner による追加コードの自動生成 つまりコードの大半を機械的に生成させることに
新型コロナワクチンの1回目接種数が9月1日時点で50％を超えるなど、接種が全国で進む中、個人情報や健康状態を記入する予診票をブラウザから出力できる入力フォームを現役大学生が開発し、Webアプリとして公開した。 開発したのは、中央大学1年生の尾川史典さん（経済学部経済情報システム学科、Twitterアカウントは＠mizphses）。小学校3年生からプログラミングを独学で学び始め、現在はWebフロントエンド開発やデザインを趣味でやっているという。学業の傍ら、週に1回、多摩市立の小学校で小学生にタブレット端末の使い方などを教えるICT支援員としても勤務しているという。 開発のきっかけは、自身が感じた不便さからだ。接種時は事前に手書きで記入した予診票を会場に持参する必要がある。ICT支援員をしていた関係で、教職員向けの職域接種を受けた際、尾川さんは予診票のPDFファイルを編集し、PC上で記入したも
WEB屋さんなら、タイトルである程度察してもらえるこの問題。 昨今のWEBサイトは、スマートフォンからのアクセスがほとんどのため、デザインや操作性はスマートフォンでストレスなく使えることが最重要課題となっている。 特に、ユーザーが商品の購入を行う際に、必ず経由するであろう「フォーム」の入力。 ここがストレスなく入力できるかが、成約の肝となるのだが…。 ユーザーに入力する際に、選択肢の中から項目を選んでもらう「セレクトボックス」というものがある。 複数の選択肢の中から、ユーザーに選んでもらう、というフォームを設けたい場合は、「セレクトボックス」が最も使われていると思う。 （ラジオボタンやチェックボックスよりも癖がないため） 「セレクトボックス」とは、↓コレのことである。 今見ている端末によって、このSELECTの仕様が異なっていると思うが、iPhone端末はこんな表示になっている。 いわゆる
input type=“date” の沼から、ライブラリを導入する意義を考える - Mirrativ Tech Blog
はじめまして！2023年7月からミラティブでフロントエンドインターンをしております、かずえもんと申します😺 今回は、インターンでの作業中にハマってしまった Safari のバグについて調査していたら、なんと10年モノの issue だったことが判明し、ライブラリを導入する意義について考える機会となった話を書いてみたいと思います。 Safari の日付入力欄に無効な日付を入れると起こるバグ onChange が正しく呼ばれないのは Safari が原因？ Safari 17 以降で再現しないので原因は Safari で間違いなさそう Safari 17 以前での解決方法として DatePicker を使ってみる まとめ: ネイティブを補う存在としてのライブラリ We're Hiring!! Safari の日付入力欄に無効な日付を入れると起こるバグ 2023年8月、私はミラティブの管理シス
フォームの入力欄のラベルが入力時にふわりとフロートして移動するのをCSSのみで実装するテクニックを紹介します。 HTMLはinputとlabelで非常にシンプル、余計なspanなどはありません。ラベルのフロートはCSSで実装されており、コピペで簡単に使用できます。
モダンCSSの機能を使用して、フォームのラジオボタン・チェックボックス・トグルスイッチなどを独自のスタイルで実装するテクニックを紹介します。以前まではdivやspanなど追加のHTMLやJavaScriptが必要でしたが、一切必要ありません。 こういった実装はできないものと思っていたので、驚きました。 Custom Styling Form Inputs With Modern CSS Features 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 モダンCSSの機能を使用した入力フォーム 実装は以前より簡単になりました HTMLは非常にシンプル CSSで入力フォームのスタイルを定義 入力フォームの完成 モダンCSSの機能を使用した入力フォーム 最近ではセマンティックとアクセシビリティの両方を維持したまま、独自のチェックボック
React Hook FormとZodを組み合わせて利用する｜食べログ フロントエンドエンジニアブログ
こんにちは。食べログ フロントエンドチームの原田です。 現在担当しているプロジェクトで、React Hook FormとZodを組み合わせて利用する機会があったので、今回はReact Hook Formの基本的な使い方からスキーマバリデーションをZodに任せる方法を紹介をしたいと思います。 React Hook FormとはReact Hook Form は「高性能で柔軟かつ拡張可能な使いやすいフォームバリデーションライブラリ」をテーマに掲げた入力フォームの管理に特化した React 向けのライブラリです。 なぜReact Hook Formを利用したか今回のプロジェクトでは複雑なフォームを組む必要があり、フォームの状態管理を任せられる点や、パフォーマンス面、ドキュメントや検索でヒットする情報の多さからReact Hook Formを利用することを決めました。 基本的な使い方まずはReac
はじめに はじめまして、今年のRecruit Job for Student 2020 で Web フロントエンドエンジニアとしてアルバイトをしていた井関です。 私は 1 ヶ月のアルバイト期間で、あるプロジェクトに参画してユーザー体験 (以下 UX) を改善する取り組みを行いました。今回改善していたアプリケーションは、目的を達成するまでに入力しなければならないフォームがとても多い、正確な入力が要求される、利用者がとても多いという特徴があります。この特徴に沿って、多くのユーザーがより快適に正しく入力できるフォームを目指して様々な施策を行ったので、調査から改善までの手順や具体的な改善例を開発者の目線から紹介します。 想定読者 UI / UX に興味がある開発者 フォームの改善に興味がある開発者 目次 調査方法 改善のプロセス 実際に見つかった問題と改善例 フォーカスとアウトライン表示 フォーム
こんにちは、id:nanto_viです。この記事ははてなエンジニアAdvent Calendarの1日目の分です。 Webアプリケーションでモーダルダイアログを実現しようとして苦戦したことはないでしょうか？ 自前でHTML、CSS、JavaScriptを組み合わせて実装していくと、フォーカスやスクロールの制御が大変ですよね。そんな悩みを解決してくれるのがHTMLのdialog要素、Webブラウザ組み込みのモーダルダイアログ実装が利用できるという優れものです（モードレスダイアログとしても利用できます）。 dialog要素を使うことで、モーダルダイアログに要求されるJavaScript機能をブラウザが肩代わりしてくれるので、アクセシビリティの確保も簡単になります。 2021年12月現在、ChromeやEdgeはすでにdialog要素に対応しています。FirefoxやSafariの開発版でも対応
ボタンのラベルに「送信（Submit）」や「キャンセル」や「はい/いいえ」しか使わない、という人は注意が必要です。ボタンのラベルはユーザーがボタンをクリックするための重要な要素です。間違った文言を使用していると、ユーザーは混乱し、作業量が増え、タスクにかかる時間が多くなります。 ユーザーがボタンを使いやすいよう、ボタンのラベルに使用する適切な文言の選び方を紹介します。 5 Rules for Choosing the Right Words on Button Labels by UX Movement ボタンのラベルに間違った文言を使用しない 1. アクションの動詞を使う 2. 正確な言い回しを使う 3. タスク固有の言葉を使う 4. 簡潔な言葉を使う 5. 大文字を適切に使う アクションをはっきりと伝える ボタンのラベルに間違った文言を使用しない ボタンの文言は、ボタンがどのように見え
React + TypeScript: React Hook Formでフォーム入力値をまとめて簡単に取得・検証する - Qiita
React Hook Formは、フォームの入力データを検証まで含めて、まとめて簡単に扱えるライブラリです。ただ、導入のページ(「はじめる」)にコード例は示されているものの、説明があまりありません。本稿は、その中から基本的なコード例8つを採り上げ、公式ドキュメントの引用やリンクも加えて解説します。コード例はわかりやすい(あるいは動く)ように手直しし、CodeSandboxにサンプルを掲げました。 インストール React Hook Formは、npm installコマンドでつぎのようにインストールします。 アプリケーションを手もとでつくるには、Create React Appを使うのがよいでしょう。本稿のコード例の場合には、TypeScriptのテンプレートを加えてください(「React + TypeScriptのひな形作成とFullCalendarのインストール」参照)。 基本的な使い
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
フォームをデザインするときのポイント
前提 自分が嫌だと思う項目を作らない。 曖昧を許容できるようにする。 なぜその項目が必要なのかを説明する、もしくは予想できるようにする。 倫理的に、そして法的に問題ないものか確認する。 HTMLの仕様とブラウザの挙動を活用する。 システムの都合が優先される場合があるが、なるべくそれに引っ張られないように工夫したい。 分割しない 姓名、郵便番号、電話番号、年月日、時分など、入力フィールドが分かれていることがあるが、なるべくこれを避ける。フォーカスの移動が、面倒だからだ。なるべくユーザーの手間を減らしたい。 フォーム送信後のデータベースの都合や、事務処理、または運用にて必要不可欠である場合を除いて、分割しないようにしよう。 年月日や時分などは <input type="date"> <input type="time"> <input type="datetime-local"> のように標準
営業管理ツールのUPWARDブログでは、BtoB営業に役立つ情報を発信しています。 今回は、株式会社WACUL・取締役CIOで、AIアナリストの垣内さんに、お話を伺ってみました。 垣内さんといえば、Twitterで、フォーム・LP改善などデジタルマーケティングの知見を発信しておられます。 垣内勇威さん｜AIアナリスト（@yuikakiuchi） / Twitter AIアナリスト公式サイト：アクセス解析を自動で行う人工知能「AIアナリスト」- サイト分析サービス 本インタビューでは、フォームの勝ちパターンの話を切り口にして、BtoBマーケティングの勝ちパターンと本質について語っていただきました。 BtoBに限らず、フォームは一番簡単にパターン化できると思います。 下記の3つに分類されます。 （1）簡単そうに見せる （2）余計な脳を使わせない （3）問い合わせ後の業務フローが円滑に回る項目取
知っておくと便利！表現が広がる最新CSSテクニックや書き方30選 これまでの苦労が嘘のよう。新テクニックでデザインに差をつけよう 2022年は、CSSにとって過去最高の年になりました。 安定版ブラウザで、多くの新しいCSSプロパティやセレクタなどが対応となり、これまでは実装にJavaScriptなどが必要だったものも、CSSのみで表現できるようになっています。 ここでは、知っておくと便利な最新CSSテクニックや書き方をまとめてご紹介します。 「CSSって、こんなこともできるの?!」と思わず納得してしまう、驚きテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 コンテンツ目次 1. コンテナクエリ @container が全ブラウザ対応 2. CSSスタイルクエリの基本と具体サンプル例 3. グラデーション付き影のつくり方 4. どんな背景でも美しい影のつくり方 5.
React 18のSuspenseを使ってReact Hook Formの非同期な初期値の扱いを簡単にする - Qiita
はじめに 普段はスタートアップで建設業界向けのSaaSの開発をしているtaroと申します。 今回はReact18で登場したSuspenseを触っていたら、React Hook Formでフォームの初期値に非同期な値を設定するのが簡単になりそうだなーって思ったので、試してみました。 React Hook Formを使ったことがない方でもきっとわかるような内容になっていると思うので、ぜひぜひ読んでみてくださいー！ この記事はこちらのイベントに参加しています。 前提を揃えるためにReact Hook Formを少し復習 本題に入る前に、React Hook Formについて少し復習して前提を揃えていこうと思います。 （「復習はいらないよー！」って方は、React Hook FormでSuspenseを使うまで飛んでください！） またSuspenseについては、公式ドキュメントや別の記事等をご参考
UXデザインに役立つテンプレート集
UXデザインに役立つテンプレートをFigmaファイルとPDF形式で無料配布しています。それぞれのトピックを紹介した記事と合わせてUXデザインにお役立てください。
【READYFOR×コミューン】業務に活かせるReact LT & 座談会 https://readyfor.connpass.com/event/224586/
Appleが開発するウェブブラウザのSafariは、iPhoneやiPad、Macなどで使用されている標準的なブラウザです。ところが、効果的な高血圧薬を推奨する遺伝子検査のスタートアップ・Geneticureの創設者であるロバート・トーマス氏が、「Safariの日付を選ぶ仕組み」によって高齢のユーザーが戸惑ってしまい、Geneticureのカスタマーサポートに寄せられる苦情の3分の1を生み出していたと報告しています。 Safari's date-picker is the cause of 1/3 of our customer support issues · GitHub https://gist.github.com/RobertAKARobin/850a408e04d5414e67d308a2b5847378 Geneticureは遺伝子検査テクノロジーを用いることで、「そのユーザ
GoogleスプレッドシートとGASでイベント出欠管理ツールを作ってみた話 その２ - 虎の穴開発室ブログ
こんにちは、虎の穴ラボのA.M.です。 前回の記事の最後の方でも触れていますが、作った出欠管理ツールを運用していく中で、「スマートフォンから入力しづらい」または「入力できない」という声が多く上がっていました。 そこで、今回はその解決策としてイベント出欠管理ツールを拡張し、Googleフォームでも出欠登録・変更（Discordにも通知）ができるようにしたいと思います。 ※本記事の内容は、以前の記事「GoogleスプレッドシートとGASでイベント出欠管理ツールを作ってみた話」の続きとなりますので、先のこちらの記事を一読いただくことをおすすめいたします。 toranoana-lab.hatenablog.com 目次 用語 要件 使用するもの 前提 実際に作ってみる STEP1 Googleフォームを作る STEP2 回答記録シートに「反映済み」チェックボックスを追加する STEP3 GASの実
はじめに 最近「単体テストの考え方/使い方」を読みました。 普段フロントエンドエンジニアとして実装をしている中で、自分が作っている単体テストについての言語化をサポートしてくれました。 この記事では、フォーム UI の実装を通して、コンポーネントに対する効果的な単体テストについて考察し、具体的なテストの書き進め方の一例を提示してみます。 最終的な成果物 この記事で実装するフォーム UI の最終的な成果物は codesandbox で確認できるようにしています。右のペインの「Tests」をクリックするとテストも実行できます。 注意 この記事は「単体テストの考え方/使い方」（以下、本書）の内容に触れていますが、読んでいなくても理解できるように補足をしているつもりです。それぞれのトピックで、文中に本書の該当ページの番号を「（p123）」のように表示しています（いずれも初版のものです）。 react
ドラッグ＆ドロップで完結！誰でもWebサイトを無料で公開できる「Static」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、面倒な作業が一切不要の無料ホスティングサービスをご紹介します！ とにかくソースコードなどのリソースをドラッグ＆ドロップでアップロードするだけで、誰でも簡単に自分のWebサイトを公開できるのが大きな特徴です。作成できるWebサイトの数や容量もほとんど制限がないのに無料で使えるのも魅力的です。 Webサイトの公開に興味ある方はぜひ参考にしてみてください！ 【 Static 】 ■「Static」の使い方 それでは、「Static」をどのように使えばいいのか詳しく見ていきましょう。 サイトにアクセスしたら【SIGN UP】の項目をクリックして、まずは無料のユーザー登録を済ませておきます。 Googleアカウントから手軽にログイン可能ですが、メールアドレスとパスワードの組み合わせでも簡単に登録できます。 登録が完了したら、以下のようなダッシュボ
他にも、文字サイズの変更機能や見出しをつける機能、エンジニアの学習などのためにコードブロックを挿入し、コード中の文章を空欄化する機能なども備える。画像の挿入にも対応しているが、うまく動かない場合も多いという。 作成者の名人さんに開発経緯を聞くと、学生時代の自身の経験が基になっているという。「自分でテストを作ってそれを解く勉強方法を実践していて、テスト作成ツールをWindowsのソフトで作ったことがあった。年末年始にそのことを思い出して、今ならWebでも同様のツールを作れるのではないかと考えた」と名人さんは話す。 今後は有料コンテンツとして、さらなる機能の実装なども検討しており「社会人やエンジニア、学生などの個人学習などに活用してほしい」（名人さん）と話している。 関連記事 「脳がバグる」 200種類の“白”の中から目的の白色を探すゲームが話題 開発者は競技プログラマー 競技プログラマーの百
今、お問い合わせフォーム(メールフォーム)が危ない！ 不正アクセスの増加と対処方法 | さくらのナレッジ
メールフォームへの不正アクセスが急激に増えてきています この半年～1年の間に、メールフォームを悪用した迷惑メール送信の被害が相次いでいます。これはどのような事かというと、まずメールフォームには、記入した内容を記入者にメールで自動返信する機能が備わっていることが多いです。このとき、メールフォームのメールアドレス欄には記入者自身のアドレスを入力するのが正しい操作ですが、悪意のある第三者がこれを利用し、メールアドレス欄に他人のアドレスを入力して迷惑メールを送信するという攻撃手法です。(参考記事: サイトの「問い合わせフォーム」を悪用する攻撃に警戒を) 少なければ一日に5～10件、多いケースでは一日に数千件の迷惑メールが送信される事がありますが、このような問題が起こると他人に迷惑がかかるだけではなく、サーバが持つIPアドレスの評価が下がったりブラックリストに登録されたりしてしまいます。IPアドレス
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方 - ICS MEDIA
CSS Flexboxで、Webページによく使用されるUIコンポーネントを実装するテクニックのまとめ
アクセシブルなフロントエンドコンポーネントの完全ガイド - 前編 | POSTD
地味だけど嬉しい新機能！ フォームのセレクトボックスで区切り線にhrを使用できるようになりました
内容に応じてサイズが可変する <textarea> を素敵に実装する - Qiita
CSSの新しいプロパティ「accent-color」が便利！今までできなかったフォーム要素のカラーを簡単に変更できる
デザインシステムの作り方徹底ガイド 参考にしたい導入事例まとめ
プロのUIデザイナーに学ぶ、既存のデザインのクオリティを高めるデザイン知識とテクニックのまとめ
Reactで実装したフォームのパフォーマンスが問題になるのはなぜか
コロナワクチンの予診票をブラウザから出力できるWebアプリ、学生が開発 「手書きは面倒に感じた」
iOSブラウザのセレクトボックスUIが使い辛すぎ問題 | キノコログ
コピペで簡単！ CSSのみで、フォームの入力時にフロートする入力欄のラベルを実装するテクニック
モダンCSSの機能を使用して、フォームのラジオボタンやチェックボックスを独自のスタイルで実装するテクニック
フォームが多いアプリケーションの UX 改善 | Recruit Tech Blog
HTMLのdialog要素とフォーム機能 - Hatena Developer Blog
ボタンのラベルには分かりやすい文言が重要、ユーザーが使いやすい文言の選び方
AIアナリスト垣内氏直伝！BtoBサイトの3つのフォームの勝ちパターンとサイト改善の本質 | 営業管理ツール（SFA）のUPWARD（アップワード）
知っておくと便利！表現が広がる最新CSSテクニックや書き方30選
React Hook Form はどのように再レンダリングを最適化しているのか？
「Safariの日付を選ぶ仕組み」がカスタマーサポートに寄せられる苦情の3分の1を生み出していたという報告
React でつくるフォーム UI の単体テストと TDD
穴埋め問題を簡単に作れるWebサイト、「試験勉強に役立つ」と話題に 教育系IT企業のCTOが作成
kuruma-news.jp
news.yahoo.co.jp
galaxybooks.jp
anond.hatelabo.jp
www.gizmodo.jp
news.yahoo.co.jp