おそらく、モデルは下記のように複数のモデルになると思います。 # app/models/article.rb class Article < ApplicationRecord has_many :categories end # app/models/category.rb class Category < ApplicationRecord belongs_to :article end 実装方法の例 下記のような方法があると思いますが、それぞれメリット・デメリットがあると思う。 accepts_nested_attributes_for Form オブジェクト Service クラス（Form オブジェクトとほぼ一緒？） 私が知らないだけで、他にも良い実装方法はあるかも。 [WIP]Model と画面上の form が1対1で一致しない場合、どのように実装するのが綺麗なのか？ · I
Build forms in React, without the tearsFormik is the world's most popular open source form library for React and React Native. DeclarativeFormik takes care of the repetitive and annoying stuff—keeping track of values/errors/visited fields, orchestrating validation, and handling submission—so you don't have to. This means you spend less time wiring up state and change handlers and more time focusin
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Rails Form Objects With dry-rb 原文公開日: 2016/09/06 著者: Michał Gutowski サイト: http://cucumbersome.net/ 現代のRailsでは、Form Objectを作るのは珍しくありません。多くのRuby開発者はVirtusやActiveModel::ValidationsをincludeしてForm Objectを作成することに慣れています。本記事では、dry-typeとdry-validationを使ってForm Objectを作成する方法をご紹介したいと思います。 絵ハガキ（postcard）を作成する簡単なForm Objectを作ってみましょう。このアプリには次の3つのモデルがあります。 Country: フィールドはnameとis_stat
HTMLのフォームを使ったファイルアップロードはRFC1867に従った動作をします。RFC1867は下記に記載があります。 http://www.ietf.org/rfc/rfc1867.txt フォームを使ったファイルアップロードを行った際にサーバ側にどのようなデータが送られてくるのかについて、上記ページによると次のように書かれています。 下記のようなフォームからファイルをアップロードしたとします。この場合、テキストが1つとアップロードするファイルとなりますが、「file1.txt」と「file2.gif」の2つのファイルをアップロードしたとします。 <form action="http://server.dom/cgi/handle" enctype="multipart/form-data" method="post"> What is your name? <input type=
こんにちは、MUGENUPアルバイトの倉成です。 今回は僕が前々から気になっていた、フォームからファイルを送信するときのおまじないenctype="multipart/form-data"について調べてみたので、得られた知識をまとめて見ようと思います。 また、マルチパートの情報を検索していると、HTMLのフォームだけではなく、メールのマルチパートの情報に当たることも多くありました。 調べてみると、HTMLの仕様と電子メールの仕様が似ているのは、どうやら歴史的な経緯があるようなので、後半ではインターネット成長の歴史についても少しだけ触れてみようと思います。 multipart/form-data: ファイルを送るおまじない それでは、フォームでファイルをアップロードするシチュエーションを考えましょう。 ファイルアップロードをする場合input要素は<input type="file" />を
こんにちは。メドピアのRuby(Rails)化をお手伝いしている@willnetです。 Ruby化のプロジェクトが始まって1年が過ぎました。新しいメンバーも入り、Railsのコード量は日に日に多くなっています。可読性を保ちつつアプリケーションを大きくしていくために、使える知見をチームメンバーに効率よく伝えていくのが大事だと感じる今日このごろです。 普段メドピア内ではコードレビューや社内勉強会などで知識のシェアを行っています。そんなとき、ブログ記事や書籍などのまとまった文章があると「これ読んでおいて」と言うだけで良くなるので楽です。先日form objectを使ったほうがいいですよーという内容でレビューコメントをつけようとしたところ、日本語で詳しくまとまった文章が見当たりませんでした＞＜なければ自分で書くしかありません。そこで今回はRailsにおいて可読性を保つための知見である、form o
こんにちは。パートナーアライアンス部の諸橋 (@moro) です。 突然ですが、わたしはいまクックパッドの「ユーザー基盤」を再構築しようとしています。 一口に「ユーザー基盤の再構築」といっても、そのゴールが何を指すかは(わたし自身にとってもまだ)漠然としており、固定されたゴールは見いだせていません。しかし後述するように、いくつかの問題は明確な形を取っています。言い換えると、それら明確な問題と向き合いながら『柔軟でいい感じのユーザー基盤を目指す』というのがこの再構築プロジェクトの目的です。 その第一歩目として、ユーザー登録部分を現状のクックパッド本体とは別の小さなRailsアプリケーションとして実装を進め、つい先日、一部の限定された利用者の方に向けて公開することができました。 今後も様子を見ながら公開範囲を拡大していく予定です。 再構築の背景 ではその「明確な問題」とはなんでしょうか。 最大
JSONの利用範囲が拡大しています。エンタープライズ系ではXMLがまだまだ優勢だと思っていたのですが、Web APIが広がるのに伴って利用が進んでいるようです。そんな中で求められるのはより強固なJSONフォーマットです。 それを可能にするのはJSON Schemaです。検証可能なJSONによって入力値の正しさ、相互のメッセージ送受信を確かなものにするでしょう。そしてさらにJSON SchemaからValidな入力フォームを生成するのがJSON Editorです。 JSON Editorの使い方 JSON Schemaの例。 このスキーマをJSON Editorにかけると次のようなフォームになります。 色選択はピッカー表示になります。 入力値のバリデーションもリアルタイムに行われます。 住所入力は細かく分かれて行えます。 オブジェクトに紐づく複数入力にも対応しています。 JSON Edito
How easy is it for users to scan your form? If your form is hard to scan, it could take longer than expected for users to complete it. This leads to form abandonment and loss of potential sign ups. The way to avoid this is to make your fields quick to scan when users first see them and after they fill them out. Scanning Pre-fill & Post-fillWhen users first see a form, they scan it to size up the a
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
画像の出典：form-ux-tips あなたのアプリやサイトを利用する人々にはある一定の目的があります。そしてその目的を達成するために フォームに 記入しなくてはならないことがよくあります。Webやアプリにおいてフォームは、ユーザにとって未だに最も重要な 種類の操作 であるからです。事実、フォームは目的を達成するまでの 過程における最後のステップ と見なされることも多いのです。 フォームは目的達成の手段にすぎません。迅速に混乱なく、ユーザがフォーム入力を完了させられるようにするべきです。 この記事では、ユーザビリティテスト、フィールドテスト、視線計測（アイトラッキング）、そしてユーザからの実際の不満の声に基づく実用的なガイドラインを紹介します。 フォームの構成要素 一般的にフォームは以下の5つの要素から構成されます。 構造 。フィールドの順番、ページの外観、各フィールドとの論理的な関連付け
こんにちは、とあるWEB会社のwebディレクター、emiです。 webサイト上や社内メールでアンケートを取りたいんだけど、わざわざ独自のシステムを開発するほどでもない・・。そんな時に無料で使えて便利なアンケートフォームをご紹介します。アンケート作成と、集計したデータの結果を見ることがでるサイトを集めてみました。 Google Form以外は英語サイトですが、使わないのはもったいない！他の5つはドラッグ＆ドロップで直感的にアンケートを作成することができます。さらに、アンケート結果をまとめたレポート機能も充実しています。（アンケートは集まった結果の分析が重要ですよね。） フォームの作り方はどれも似ているので、英語に抵抗がある人はまずGoogle Formでアンケートを作成してみてから他のサイトを試してみるのがオススメです。 Google Form Googleドライブの機能なので、Google
複数選択やフリー回答、段階評価などさまざまな形式の質問が作成でき、作成したアンケートフォームをサイト上に埋め込んだり、リンクをシェアしたりすることも可能で、さらにアンケート結果の集計までしてくれるのが「Typeform」です。 Typeform | Discover a better way to ask questions online http://www.typeform.com/ Typeformで作成したアンケートフォームがどのような感じになるのかは以下のムービーを見ると分かります。 「Typeform」作成したアンケートに回答するとこんな感じ - YouTube Typeformでアンケートフォームを作成するにはトップページ上の「Sign Up Free」をクリック。 上からユーザーネーム・メールアドレス・パスワード・アンケートのURLに入れる文字を入力して「Signup fo
フォームのリセットといえばこれ。 <input type="reset" value="リセット" /> しかしこれは各フォームのデフォルト値に戻すだけで、もともと何か値を持っていた場合、空欄の状態にはなりません。 （とあるフォームにて） そこでjQueryで各フォームを空欄・未選択にできるような処理を書いてみます。 その際、hiddenだけは空欄にしないようにしてみます。 $(".clearForm").bind("click", function(){ $(this.form).find("textarea, :text, select").val("").end().find(":checked").prop("checked", false); }); こんな感じになります。 DEMO ラジオボタン が選択されていても。 なにかチェックされていても。 テキストエリアでも。
1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ
Railsで実際にFormオブジェクトを作ってみたらいくつか気をつけるポイントがあったので紹介します。 ActiveRecord / Rails / Ruby この記事はRuby on Rails Advent Calendar 2014の2日目です。 1日目は@miyukkiさんの「結局Ruby on RailsとPHPってどっちが優れてるの？」でした。おつかれさまでした。 Formオブジェクトとは Formオブジェクトはその名の通り入力フォーム用のオブジェクトです。 フォームとモデルがうまく対応しているときはActiveRecordをそのまま使えば良いのですが、 複数モデルを作りたかったりモデルとは違うValidationを行いたかったりする場合にはFormオブジェクトを使うと便利です。 Formオブジェクトのサンプルコードはこんな感じになります。 class Blog::SiteFo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
