質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.58%

Twitterのようなログイン機能をrailsで作ってみたい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 412

isen

score 10

 実現したいこと

progateなどをみながら勉強をしているrails初心者です。勉強用にログイン機能を作りたいのですが、目標で現在(2018年10月29日)のTwitterのようなログイン画面を作ってみたいと思っています。
自分なりに考えたのが、javascriptでページ内にタブ移動できるものを作成して、それぞれのタブにinput要素とbutton要素などの切り替えボタンをつけて
・名前入力
・メールアドレス入力
・パスワード入力

をして最後に送信ボタンを押して登録完了という流れにしたいです。(登録完了後はユーザーページに飛べるようにしたいです)

実際にかなり調べながら組んでみたのですが、躓いてしまったのでここで質問させていただきたいです。

複数あるので、箇条書きで書かせていただきます。

1. input要素に名前を入力した際にrailsのバリデーションで設定した項目に引っかかると、リアルタイムでinput要素の下に赤字で任意のエラーメッセージを出す方法
リアルタイムとは入力した際にバリデーションによって制限されている内容に引っかかる入力をしたらすぐにその場でエラーメッセージを表示させるといった意味です。
かなり調べたのですが、バリデーションによるエラーメッセージをinput要素の下に表示する方法が全くわかりませんでした...

2. タブの切り替えボタン(button要素)をinput要素の入力内容が正しくない間は半透明で押せない状態にして、入力内容が正しければ押せるボタンにしたいです。
現状タブ切り替えはjavascriptで作成していて、button要素の部分はp要素にしています。p要素をbutton要素に変えるとタブ切り替えとして機能せずページ移動の判定になりルーティングエラーが起こってしまいます。

3. ページ内でタブ切り替えをしたいため、切り替えのためのボタンをbutton要素にするとルーティングを設定する必要があると思うのですが、ページ内でボタンを押してjavascriptで設定した次のタブに進むにはどのようにするのか

4. input要素の入力文字数のカウンターの付け方
現状のTwitterのアカウント作成画面では名前の入力欄の下に「0/50」と書いてあり、文字を入力するとそのカウントが文字数に合わせて増加するようになっていたので、仕組みを知りたいです。

それから、Twitterのコードをみてみたら、HTMLの部分で一つの要素にすごい数のクラス名が付いていました。
(例:class="rn-1oszu61 rn-1efd50x rn-14skgim rn-rull8r rn-mm0ijv rn-dcshts rn-9c4l86 rn-18tdi8m rn-1cn4eqa rn-deolkf rn-1xk2f4g rn-6koalj rn-1qe8dj5 rn-1mlwlqe rn-eqz5dr rn-poiln3 rn-7cikom rn-o11vmf rn-ebii48 rn-gul640 rn-109y4c4 rn-t9a87b rn-1mnahxq rn-61z16t rn-p1pxzi rn-11wrixw rn-ifefl9 rn-bcqeeo rn-11yh6sk rn-buy8e9 rn-12ckced rn-17qa1i2 rn-od9mb7 rn-hinvm4 rn-u8s1d rn-92ng3h rn-1lgpqti" <=こんな感じ)

それぞれのクラスには「margin-right: 0;」など簡単な内容しか設定されていなかったのですが、これを一つずつ分ける必要はあるのでしょうか?
それから、一つ一つのクラス名の原型がわからないのですが、どのような定義でそれぞれのクラス名がつけられているのかも気になります...

調べても全くわからなかったので、回答が難しいことは承知しています...一つでも教えていただけると幸いです。

よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

細かいですがjapascript →JavaScript です(pじゃなくv)。

Twitterだけではないですが非同期通信で組まれている部分も多くブラウザからソースを表示から汲み取れる情報はわずかです。
cssのクラス名も制作者側しか汲み取れないように工夫されているようにも思います。
そのままコードを見ようとするのではなく、レイアウトや挙動を見て再現するしかないかと。
今ではBootstrapなど近いレイアウトを容易に作れるCSSフレームワークも充実しています。

まずは要件を細分化し、自身の技術で足りていないこと足りていることを切り分けて
足りていないところを調べたりして埋めていくようにしてください。
具体的に、細かければ細かいほど良いです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/29 15:05

    回答ありがとうございます!
    すみません!綴りを間違えて書いていました..修正しておきます。

    なるほど、CSSのクラス名を製作者側にしか汲み取れないようにする必要はあるのでしょうか?
    製作者側でもやはりあのクラス名のつけ方をすると制作を進める上で面倒臭いように感じます。
    また、アドバイスありがとうございます。
    もう少し具体的に一つずつ調べてみようと思います!

    キャンセル

  • 2018/10/29 16:05 編集

    何かしらのネーミングルールがあれば別に面倒でもなんでもないですよ。
    countをcnt、buttonをbtnと略すこともありますけどそれと同じ感覚です。でもその意図や法則が外部にわかれば意味がないですよね。
    ある程度どのようにもつけられる以上はどのようにつけても良いので、制作者にしかわからないようにつけられているかどうかも、それは外部の人間にはわかりません。
    class名がついてるからと必ずcssが当てられているとは限りませんし、JavaScriptや、もしかしたらサーバー側の言語で制御するためかもしれません。
    要はシステム側で都合よくつけられたものである可能性があるだけです。
    なので、どのようにつけられたか外部の人間に理解できない以上は、外部の人間がブラウザから確認できる情報だけで真似をしようとするのは無駄で、挙動や何かを既存の機能でどうやって再現するか「考える」しかない、という回答をしました。

    なぜなら「Twitterのようなものを作りたい」であって「Twitterを作りたい」ではないですよね?

    キャンセル

  • 2018/10/29 16:08

    railsで作りたい
    のであれば、サーバー側の処理ですからブラウザから確認できない部分ですよね。
    例えTwitterがRubyで作られているとしてサーバー側の処理を知ることは制作者しかできませんから。

    キャンセル

  • 2018/10/29 17:25

    なるほどTwitterの中身を知る術はないんですね...
    そうです、同じものを作ってみたいというつもりはないのですが、Twitterのアカウント作成画面の挙動にとても興味があったので気になってしまいました。
    ですが、実質人の手によって作られているものですし、長年プログラミング関係に関わっている人はTwitterなどのサーバー側での処理の仕方をみてすぐ大凡の検討はつくものなのしょうか?やはり「ここだけはどうやって処理されているのかわからない」という部分もあったりするものですか?

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る