サービスの管理画面を継続的に改善するためのReact Hook FormとZod活用術 - Mirrativ Tech Blog
こんにちは！ミラティブのフロントエンドエンジニア どじねこ です。 今回は、ミラティブを支える社内向けの管理システムにおいて、機能開発の体験を改善する取り組みを「MUI と Zod、React Hook Form の活用術」としてご紹介させていただきます。 前提 ミラティブでは、他の多くの Web サービスと同様に配信者さんの登録した情報や配信の履歴を管理する社内向けのシステムが存在しています。 特に管理システムのフロントエンドにおいては、その特性上入力フォームの実装がその大半を占めています。 日々の機能開発においては、そうした管理システムに実装された入力フォームの新規実装や機能拡張が行われています。 課題 一般的な入力フォームでは、画面の初期描画の際にすでに設定済みの値をフォームに適用する初期化処理や、入力された内容を検証して必要に応じてエラー表示するバリデーション処理が必要です。 ミラ
CSSの参考になるアイデアがいっぱい！2018年スタイルシートを使ったテクニックのまとめ
2018年も、CSSの進化がすごかったです！ CSSを使ったアニメーションはより快適なものが増え、JavaScriptを使用しないと実装できなかったものがCSSだけで実装できるようになったり、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 各デモはCSSのみで実装されたものもありますが、JavaScript併用もあります。 動作を見るには、「Run Pen」をクリックするか、クリック後に右上「Edit on Codepen」をクリックしてください。 まずは、ダイナミックなアニメーションが楽しいソーラーシステム。動きが斬新で、スライドなどに応用してもよさそうです。ベストビューは、Operaです。
お問い合わせ、支払い、サインアップなど、フォームを実装するためのHTMLとCSSのテンプレート -Boilerform
フォームを実装するのが苦手、という人は少なくないと思います。 お問い合わせフォーム、支払いフォーム、サインアップフォームなど、さまざまなプロジェクトで利用されるフォームを実装するのに役立つHTMLとCSSで制作されたテンプレート集を紹介します。 Boilerform Boilerform -GitHub Boilerformのデモ Boilerformの使い方 Boilerformのデモ デモではフォームに利用するさまざまな要素のパターン、それらを組み合わせて実装されたお問い合わせや支払いフォームを確認できます。 まずは、フォームのパターン ライブラリから。 「Input Field」では、サイズ、プレースホルダー、バリデーションのステータスのさまざまなバリエーションを持つ一般的な入力フィールドが揃っています。ユーザーがデータをできるだけ効率的に入力するのに役立つ属性が追加されています。
無料で簡単！Googleフォームで「お問い合わせフォーム」を作成する
こんにちは！ タダケン(@tadaken3)です。 ホームページを運営していたり、フリーランスで仕事をしていると「お問い合わせ」「資料請求」などの入力フォーム画面が必要になってくることがあります。 無料で作成できるツールやサービスもありますが、例えば、登録してくれた人に対する自動返信機能や登録があったことをチャットワークに通知する機能などを追加しようとすると、結局追加で費用が発生したりします。もちろん、入力画面のカスタマイズも必要になってきます。 実はGoogleフォームとGoogle Apps Scriptを使えば簡単に自作できることができます。今回は、Googleフォームを使った「お問い合わせフォーム」を作成する方法をご紹介します。 本連載では以下の機能をGoogle Apps Scriptで作成する方法をご紹介します。最終的にはこのようなフォームと 以下の機能を実装していきます。 ス
痩せ型の筋トレ初心者が取り組むべきおすすめメニュー | YASEO LOG
なんとなく筋トレ関連のブログに載っているメニューがハードなネタが多いのでパーソナルトレーナーと一緒に実践した内容をまとめていきたいと思います。 筋トレ初心者かつ痩せ型で運動をしばらくやっていなかった方でも比較的無理が少ない内容かと思います。ただしなれてきたら追い込んでみるのもよいかとお思います。 いきなりフリーウェイトでガシガシトレーニングしなくても地道にこなしていくのが筋トレ初心者には良いかと思います。 正しいフォームでしっかりとトレーニング 最初に重量やセット数をまとめておきます。筋トレは正しいフォームで行うことによって効果を発揮するので闇雲に重さだけを求めないでください。 大切なのは正しいフォームで10回～15回の繰り返し動作を2～3セットできる事が重要になってきます。 インターバルはなれないうちは90秒程度けても良いですが慣れてきたら短くしていくと効果的です。 同じマシンの繰り返し
SUPER CLASSIC (スーパークラシック)
薄い財布 — for Men — 18,200円（税込） お札・小銭・カード（3〜5枚）・鍵をまるごと収納できる「世界一薄い二つ折りメンズ財布」を目指し、開発しました。 雑誌や新聞にも多数掲載されている、スーパークラシック一番の人気商品です。 同じ革の「薄いカードケース abrAsus(アブラサス)」（別売り）を挿しこみ、一体化してご利用頂くこともできます。 薄い財布 — for Ladies — 18,200円（税込） 「ちょっとした外出にもパーティーなどのフォーマルシーンにも活躍する、世界一薄い二つ折りレディース財布」を目指し、バッグやポケットに入る極薄財布を作りました。 薄さや機能性は「薄い財布 abrAsus(アブラサス) for Men」と同じまま、バイカラーなどエレガントなレザーで仕上げています。プレゼントにもぴったりです。 薄い財布 — classic — 20,800円（税
クレジットカードフォームの解剖学 | POSTD
オンラインでクレジットカードを使って支払うことは簡単ですよね？この答えはYesでもNoでもあります。Yesの理由は、インターネットが普及された初期からずっとそうしていたから（例：Amazon）。Noの理由は、まったく同じクレジットカードフォームは2つとないからです。 過去20年以上で、私たちはオンライン支払のメンタルモデルを作り上げてきました。「財布からクレジットカードを取り出して、ウェブのフォームに必要なカード情報を入力、そして申込みボタンを押す」というものです。しかし、ユーザーが答えないといけない質問でいっぱいなので、全てを入力するのはとてもややこしい行為になってしまいます。そして言うまでもなく、誰も取扱い説明書なんて読みたくありません。 さまざまな有名ウェブサイト・アプリのクレジットカードフォーム 何かの代金をオンラインで支払う時は、人へ支払う時より2,3倍遅れをとります。端末のボタ
スタートアップ経営者から見たQiita:Teamのいいところ | toyoshiの日記
toyoshiの日記は終了しました。 ご愛読ありがとうございました。 Misocaへ戻る
領収書の書き方と収入印紙の取扱のすべて【保存版】
私は領収書を書くために名刺を渡すと「頂いてもよろしいですか？」と聞いてくれるお店だと気分良く退店することが出来ます。その領収書が複写式の領収書だと、なお気分が良いです。領収書にまつわるちょっとしたやり方で、お客様を気分良くすることも出来ます。（私だけなのかもしれませんが） 起業すると領収書を渡す側に回ります。代金を払って領収書をもらうのは簡単ですが、いざ発行する側になると、色々と疑問が沸き上がってくると思います。領収書が日常的なものだけに、知らないことがちょっと恥ずかしかったりして、他人に聞くのを躊躇する場面もあるでしょう。そういう時はネットで調べるのが一番。 今回は、領収書の書き方と収入印紙の取り扱いについてまとめてご紹介することにしましょう。 １．まずは領収書（フォーム）をゲットする。 領収書とは、金銭の受取書のことをいいます。 領収書には二つの機能があります。 領収書を発行する金銭を
石原さとみ「サウスポー」始球式 異例の“投げ直し要求”で無事成功！？ （デイリースポーツ） - Yahoo!ニュース
女優の石原さとみが４日、東京ドームで行われた「サントリー ドリームマッチ ２０１４ ｉｎ 東京ドーム」ザ・プレミアム・モルツ球団ＶＳ東北・ジャパンヒーローズ戦の始球式を行った。 【写真】スタンドからの歓声に笑顔を見せる石原さとみ 撮影で右腕を痛めたということで、「サウスポーでやります」と宣言。フォームはさまになっていたが、慣れない左腕から投じられた球は３塁側へ大きくそれて捕手に届かず。 ところが、石原は異例の投げ直しを要求し、２球目を投じると、球は転がりながらも捕手に届き、打者の東北ジャパン・ヒーローズの田尾安志監督から空振りを奪うと大歓声が起こった。 その後は試合のゲスト解説を務め、「緊張しました。初めてだったので」と照れていた。
iPhoneだけで設計・管理できるデータベースアプリ--「タップフォーム」
あらかじめ用意されているフォームまたは、自分で作成したフォームから新しいデータベースを作成するには、画面右上の「＋」をタップする タップフォームは、iPhoneだけで設計して管理できるデータベースアプリだ。あらかじめ、住所録やソフトウェアライセンス管理、銀行口座など27種類のデータベースフォームが用意されているので、手軽にデータベースの作成を始めることができる。もちろん既存のフォームを利用しなくても、自分で新たなフォーマットを作成できるので、目的に合わせてさまざまな使い方ができるだろう。iPhoneアプリのみでもフォームを設計しやすい仕様になっているが、Mac版も販売されており、iOS版と同期できるため、大量のデータを登録するような場合はMac版も併用すると便利だ。 タップフォームを起動すると「Sample Form（サンプルフォーム）」が作成されているので、これをタップして、どのように表
複数選択可能なselect要素をチェックボックス対応・一括選択可能にするjQueryプラグイン・Multiple Select
複数選択可能なselect要素をチェックボックス対応・一括選択可能にするjQueryプラグイン・Multiple Selectのご紹介。なかなか便利そうだったので備忘録です。 複数選択可能なselectボックスを直感的な操作で手軽に選択できるようにしよう、というもの。グループ化したものも一括選択できるのが個人的には嬉しかったです。 動作サンプルです。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="jquery.multiple.select.js"></script>本体とプラグインを読み込みます。 $('#foo').multipleSelect();セレクタにはselect要素を指定します。 また、細かいオプション設定が可能です。詳
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
レジでの支払いのはなし - はこべにっき ♨
レジとかでお金を払うときに、支払う紙幣/硬貨の枚数が少なくて、かつ、お釣りの紙幣/硬貨の枚数が少ない、かっこいい支払いというのがある(適当)。あわよくば、かっこいい支払いをしようと思っていつもねらってる。なんか適当に言ってるけど、451円払う時に、適当に500円玉を渡すと10円x4枚+5円x1枚+1円x4円がお釣りになるのはイヤなので、501円を渡してお釣りを50円x1枚にしたりする、よくあるやつです。 451円請求されているときには、だいたい501円はらったら良さそうなのはわかる。では、例えば771円請求されている場合は、どうすれば最適な支払いになるかと考えると、801円か1001円か1021円かそのあたりかなーという感じですこし丁寧にしらべる必要がある。 小銭が関係する1000円以下の最適な支払いパターンくらいだと、機械的に全パターン調べられそうだったのでプログラムを書いてみた。以下の
Practical Symfony #23: ドメインの知識を使ったフォームバリデーション
フォームは、PHPメンターズの設計と実装の型で述べているように、アプリケーションレイヤーにて実装されます。今回はフォームのバリデーションの拡張についてとりあげます。 バリデーションの仕組みの基本ユーザーが入力した値を受け取り、アプリケーションのフォームでその入力を表すオブジェクト（フォームのデータを格納する入れ物、フォームDTO: Data Transfer Objectと名づけます）が組み立てられます。このフォームDTOの持つデータが妥当かどうかをチェックするのがバリデーションの役割です。 バリデーションはフォームDTOに対して行われるため、SymfonyではフォームDTOクラスにバリデーションの定義を記述します。 class Author { /** * @Assert\NotBlank() * @Assert\Length(min = "3") */ private $firstNa
IE9以降でもHTMLフォームでファイル名とファイルの中身を外部から指定できる
昨日の日記「IE8以前はHTMLフォームでファイル名とファイルの中身を外部から指定できる」にて、福森大喜さんから教えていただいた内容として、ファイルアップロードのHTMLフォーム（enctype="multipart/form-data"）にて、アップロードするファイル名とファイルの中身を外部から指定できることを報告しました。この際にIE8以前という条件がありましたが、今度は、三井物産セキュアディレクションの望月岳さんから、「それIE9以降でもできるよ」と教えていただきました。既にご存じだったそうです。福森さん、望月さんという日本を代表するバグハンターから「秘伝のたれ」をおすそわけいただいたようで、興奮気味ですw まず、おさらいとして、IE8以前でのパターンは下記の通りでした（要点のみ）。 <form enctype="multipart/form-data" action="pro_ad
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UX/UIデザイン - OHAKO | 企画～実装をご支援
腹出てる奴に朗報 胸筋下部という筋肉を鍛えなさい : VIPPERな俺
これはスゴイぞ！Bootstrapのページ作成が積み木感覚で簡単にできてしまうジェネレーター -lollytin