Next.jsのServer Actionとreact-hook-formでフォームを実装した - BASEプロダクトチームブログ

2024/12/20 11 users react-hook-form システムリニューアル

はじめに 本記事はBASEアドベントカレンダー2024の20日目の記事です。 Pay IDのフロントエンドエンジニアをしているnojiです。 以前執筆した システムリニューアルでNext.jsのApp Router/Server Actionを使って便利だと思ったところ に記載したように、Pay IDのアカウント管理画面ではNext.jsを採用し、Server Actionを... 続きを読む

Notion新機能発表会の6つのトピック。フォームから収益化、オフラインモードなどを今後提供へ

2024/10/25 8 users トピック オフラインモード 収益化 提供 6つ

Notionは同社初のリアル開催のグローバル発表会をアメリカ・サンフランシスコで開催した。 出典：Notion ドキュメントツールの｢Notion（ノーション）｣は10月24日（現地時間）、アメリカ・サンフランシスコで同社初のリアル会場開催の発表会｢Make with Notion｣を実施した。 新製品であるメールサービス｢Notion Mail｣のほ... 続きを読む

Findyの名物企画のコントリビューション・オブ・ザ・イヤー2024中間発表の裏側を大公開！ - Findy Tech Blog

2024/08/26 15 users Findy 栁沢 エンジニア 名物企画 中間発表

Findyでエンジニアをしている栁沢（@nipe0324）です。 今回は、Findyの名物企画である「コントリビューション・オブ・ザ・イヤー2024中間発表」の裏側を公開します。裏側を知り、キャンペーンをより楽しんでもらえたら嬉しいです。 キャンペーン期間中にXでシェア後にフォームから応募することで「Anker充電器（Findyオ... 続きを読む

フォームのテキストエリアにCSSのfield-sizingとlh単位を使用すると便利、入力された文字量に合わせてサイズを自動変更

2024/08/20 21 users content CSS テキストエリア JavaScript

CSSはどんどん便利になっていますね！ これまではJavaScriptを使用しないとできなかったことがCSSで簡単に実装できるようになっています。 CSSのfield-sizing: content;でフォームのテキストエリアのサイズを入力された文字量に合わせて自動変更したり、テキストエリアの高さを行の高さで設定するlh単位を使ったCSSのテ... 続きを読む

「住所は英数字もすべて全角で入力してください」はなぜそうなったのか - Qiita

2024/08/03 441 users ハイフン 番地 エラー 丁目 数字

Webサービスのフォームに住所を入力するとき、丁目や番地などを入れる欄について、数字やハイフンを全角で書かなければいけない「全角縛り」をやっているフォームをよく見ます。半角文字を入力してしまってエラーになったり、咄嗟に変換方法を思い出せなかったり、全角と半角の見分けが付きづらかったり、「全角縛り」で... 続きを読む

Google フォームの共同編集設定に起因して発生していた情報流出についてまとめてみた - piyolog

2024/07/07 350 users 複数 影響 実際 設定 組織

2024年6月以降、Google フォームの設定に起因する情報流出が生じたとして複数の組織より公表されました。ここでは関連する情報をまとめます。 回答情報を第三者に参照される恐れのあった共同編集設定 Google フォームの設定次第で外部から回答者の情報を閲覧することが可能な状態が発生し、実際に影響を受けたとして複数... 続きを読む

Googleフォームの設定ミスによる情報漏えいが多発～あなたのフォームは大丈夫？ 原因となる設定について解説～ - ラック・セキュリティごった煮ブログ

2024/06/27 173 users ラック 多発 セキュリティごった煮ブログ 情報漏えい 設定ミス

デジタルペンテスト部の山崎です。 4月から「セキュリティ診断」の部署が「ペネトレーションテスト（ペンテスト）」の部署に吸収合併されまして、ペンテストのペの字も知らない私も晴れてペンテスターと名乗れる日がやってまいりました！（そんな日は来ていない😇） そんなわけで、新しい部署が開設しているブログのネタ... 続きを読む

YAPC::Hakodate 2024のスピーカーを募集します - YAPC::Japan 運営ブログ

2024/06/17 9 users YAPC papix JST 締切 スピーカー

YAPC::Hakodate 2024広報担当の id:papix です. yapcjapan.org 2024年10月5日(土曜日)に開催するべく準備を進めているYAPC::Hakodate 2024ですが, 本日より当日発表を披露してくださるスピーカーの募集を開始いたします! fortee.jp 応募は上記のフォームより応募することができます. 締切は 2024年7月14日 23:59 (JST) ... 続きを読む

「卵使用していません」クッキー食べた娘に異変　後絶たぬ企業のミス | 毎日新聞

2024/06/03 27 users 毎日新聞 異変 記者 クッキー 窓口

「つながる毎日新聞」は記者に取材してほしいテーマや疑問、情報をお寄せいただく 窓口です。専用のフォームとLINE公式アカウントを用意しています。郵便でも構いません。内容によっては記者がご連絡を差し上げます。情報提供者の秘密は必ずお守りします。すべてのご要望にお応えはできませんが、その場合も必ず目を通し... 続きを読む

2024年版 HTMLで作るフォームバリデーション - ICS MEDIA

2024/04/19 257 users フォームバリデーション ユーザビリティ ICS MEDIA

すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があり... 続きを読む

「就業中の眠気問題」、アンケート結果発表！

2024/04/09 16 users 就業中 アンケート結果発表 DPZライター陣 眠気 沢山

「就業中に眠くなると、トイレで寝てる人もいる」。一度も会社員経験のない自営業の私は、長年会社勤めだった妻からそんな話を聞いて衝撃を受けた。 そこで先月、DPZライター陣に就業中の眠気について色々と話を伺い、記事にした。記事の最後に「読者の皆様の体験談もお寄せください」とフォームを設けたら、本当に沢山... 続きを読む

ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ

2024/03/26 92 users プロパティ カーニング 垂直方向 ダークモード ライトモード

今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカ... 続きを読む

「Astro DB」登場。LibSQLベース、TypeScript ORM搭載、1GBまで無料。静的サイト生成用データベース

2024/03/13 6 users Astro DB astro 1GB 登場 無料

「Astro DB」登場。LibSQLベース、TypeScript ORM搭載、1GBまで無料。静的サイト生成用データベース 静的サイトジェネレータAstro用のデータベースサービス「Astro DB」が登場しました。 簡単にAstroに組み込むことが可能で、Astroのバックエンドデータベースとして、例えばフォームやコメントのデータの入出力、ユーザ... 続きを読む

バーガーキングが入れそうな空き物件を見つけて、実際に入居できたら報奨金10万円という天才キャンペーンやってる

2024/01/28 14 users バーガーキング あらいちゅー 前代未聞 空き物件 ジャパン

あらいちゅー🐴🏠🔮 @araichuu バーガーキングが入れそうな空き物件を見つけてフォームで送信、実際に入居契約できたら報奨金10万円という前代未聞のキャンペーンwwwwww app.burgerking.co.jp/bkad/createyou… 2024-01-28 17:30:21 バーガーキング・ジャパン @BURGERKINGJAPAN バーガーキング・ジャパンの公式アカウント... 続きを読む

Reactで実装したフォームのパフォーマンスが問題になるのはなぜか

2024/01/15 30 users React 久保田光則 Form 枠組み React Hook

RelayHub合同会社の久保田光則です。 Reactでフォームを効率よく実装するためのライブラリとして、React Hook FormやReact Final Form、TanStack Formなどがあります。これらのライブラリは、フォームを効率よく実装できる枠組みを提供してくれるだけではなく、高速なフォームを実装するための方法も提供してくれます。 ... 続きを読む

役所の市民の声みたいなページが面白い

2023/12/27 23 users 役所 市民 やり取り 文句 態度

最近のマイブーム 適当な知らない役所のホームページで、市民の声的な自由に意見を出せるフォームの過去の意見と回答のページを見ること 真面目な意見と回答のやり取りもあるのだが、態度が悪いと文句言いたいだけとか、長文持論展開（支離滅裂）とか、勝手な想像で適当なこと書いてる（回答でやんわり論破される）とか... 続きを読む

JavaScript なしで動作するモダンなコードの書き方

2023/11/19 209 users コード JavaScript 書き方 SvelteKit 近年

Next.js、Remix、SvelteKit といった近年のフレームワークは、JavaScript がなくても動作することを一つの価値として提供しています。 例えばSvelteKit のフォームではプログレッシブエンハンスメントとして、JavaScript が利用できる環境ではリッチなユーザー体験を提供しつつ、JavaScript が使えない環境においては HT... 続きを読む

地味だけど嬉しい新機能！ フォームのセレクトボックスで区切り線にhrを使用できるようになりました

2023/11/14 46 users セレクトボックス Chorme ＨＲ Edge Safari

先日リリースされたChrome 119に地味だけど嬉しい新機能が実装されていたので、紹介します。 フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでChorme, Edgeでも使用できます。 Select element: now with horizontal rules by Una Kravets 下記は各ポ... 続きを読む

Server Actions のフォームバリデーションにおいて useFormState でエラーメッセージを表示する

2023/10/31 7 users フォームバリデーション useFormState 恩恵 手段

Server Actions のフォームバリデーションにおいて useFormState でエラーメッセージを表示する 2023.10.31 Next.js の Server Actions でフォームを作成する際に、どのような方法でバリデーションを行い、エラーメッセージを表示する際にどのような手段が考えられるでしょうか。プログレッシブエンハンスメントの恩恵を... 続きを読む

ビッグモーターに不正アクセス、個人情報漏えいか　フォームからの問い合わせ、約7年分

2023/10/30 23 users ビッグモーター 第三者 不正アクセス 東京都多摩市 お問い

ビッグモーターは30日、自社Webサイトが第三者による不正アクセスを受け、「お問い合わせフォーム」から同社に連絡していた人達の個人情報の一部が漏えいした可能性があると発表した。 中古車販売などを手がけるビッグモーター（東京都多摩市）は10月30日、自社Webサイトが第三者による不正アクセスを受け、「お問い合わ... 続きを読む

そういうとこやぞ？ EdgeでChromeをダウンロードすると理由を尋ねるフォームが出現【やじうまWatch】

2023/10/30 29 users やじうまWatch Edge Chrome 出現 理由

続きを読む

行動変容 自分と世界を変える技術 / Behavior change techniques

2023/10/19 221 users 行動変容 サステナビリティ 技術 ディスカッション 世界

＜Ver.1.0＞ 社会の変化や、サステナビリティの観点で注目されている「行動変容」についてまとめています。 ＜シェア・共有歓迎です＞ ■解説＆ディスカッション会 こちらの資料をベースに、簡単な解説＆皆さんとのディスカッションをしました。 10/18(水) 上のイベントはすでに終了しましたが、今後も様々な形で機会を作... 続きを読む

CSSの新しいプロパティ「form-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更

2023/10/10 149 users content textarea CSS 新しいプロパティ

今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-h... 続きを読む

YAPC::Hiroshima 2024のスピーカーを募集します - YAPC::Japan 運営ブログ

2023/09/13 6 users YAPC tkzwtks JST スピーカー 目安

みなさんこんにちは。YAPC::Hiroshima 2024実行委員会の id:tkzwtks です。 先日開催を告知いたしましたYAPC::Hiroshima 2024ですが、本日より早速スピーカーの募集を行います！ fortee.jp 上記のフォームよりご応募ください。なお、応募締め切りは 2023年10月16日(月) 18:59 (JST) です！（締め切りから一週間を目安に... 続きを読む

1Password のオートコンプリート機能をサービス提供側で無効化する

2023/09/01 75 users オートコンプリート機能 1Password dialog

Leaner Technologies の @corocn です。 最近フォームを作っていて、意図しないタイミングで 1Password のオートコンプリートが表示されてしまい困っていたので解決法を残しておきます。 画像はshadcn/ui - dialogから拝借 結論 input に data-1p-ignore 属性を付与する autocomplete="off" しても空気読んで無効化して... 続きを読む