常連

注目の的

Ruby on Railsで画像を投稿できる機能を作ったのですが複数の画像が投稿できません。
一枚だけなら投稿できるのですが```multiple: true```を付け複数枚を選択して投稿すると一枚も投稿されなくなってしまいます。


### posts_control.rb
```Ruby
 def new
        @post = Post.new
    end
    def create
        @post = Post.new(post_params)
        if @post.save
          
          flash[:notice] = "投稿を送信しました。"
          redirect_back(fallback_location: root_path)
        else
          redirect_to new_post_path
          flash[:alert] = "投稿に失敗しました。"
        end
      end
```

### posts.rb
```
class Post < ApplicationRecord
    default_scope -> { order(created_at: :desc) }
    belongs_to :user                                                                                                       
    validates :text, length: { maximum: 1200 }
    mount_uploader :image, ImageUploader
    mount_uploader :video, VideoUploader
    has_many :comments, dependent: :destroy
    has_many :notifications, dependent: :destroy
    has_many :likes, -> { order(created_at: :desc) }, dependent: :destroy
    has_many :downs, -> { order(created_at: :desc) }, dependent: :destroy
    def liked_by(user)
        Like.find_by(user_id: user.id, post_id: id)
    end
    def downd_by(user)
      Down.find_by(user_id: user.id, post_id: id)
    end
    def create_notification_like!(current_user)
        temp = Notification.where(["visitor_id = ? and visited_id = ? and post_id = ? and action = ? ", current_user.id, user_id, id, 'like'])
        if temp.blank?
          notification = current_user.active_notifications.new(
            post_id: id,
            visited_id: user_id,
            action: 'like'
          )
          if notification.visitor_id == notification.visited_id
            notification.checked = true
          end
          notification.save if notification.valid?
        end
      end
      def self.search(search)
        if search
          Post.where(['text LIKE ?', "%#{search}%"])
        else
          Post.all
        end
      end
      def create_notification_comment!(current_user, comment_id)
        temp_ids = Comment.select(:user_id).where(post_id: id).where.not(user_id: current_user.id).distinct
        temp_ids.each do |temp_id|
          save_notification_comment!(current_user, comment_id, temp_id['user_id'])
        end
        save_notification_comment!(current_user, comment_id, user_id) if temp_ids.blank?
      end
    
      def save_notification_comment!(current_user, comment_id, visited_id)
        notification = current_user.active_notifications.new(
          post_id: id,
          comment_id: comment_id,
          visited_id: visited_id,
          action: 'comment'
        )
        if notification.visitor_id == notification.visited_id
          notification.checked = true
        end
        notification.save if notification.valid?
      end

end

```

### new.html.erb
```
<div class="timeline-post-new" id="form-post-<%= current_user.id.to_s %>">
    <%= form_with model: @post do |f| %>
        <%= f.text_area :text, placeholder: "投稿内容", class: "timeline-post-form-new", rows: "3",onkeyup: "ShowLength(value);",id: "text" %>
      <div class="timeline-new-buttons">
      <div id="preview" class="preview"></div>
        <%= f.file_field :image, id: "filesend",onChange: "imgPreView(event)",accept: "image/*",class: 
        <%= f.submit :投稿, value: "投稿", class: "new-post-btn",id: "submit" %>
        <p id="inputlength" class="new-textlength"><span id="messageCount">0</span>/1200</p>
      </div>
       <% if current_user.high == true %>
      <div class="accbox">
       <label for="label1"><span class="material-icons drop-down">arrow_drop_down</span></label>
      </div>
      <% end %>
    <% end %>
</div>


```

※コードが多すぎたので不要だと思われるコード（この件に関係ない部分）は省略しています。

複数の画像を投稿する場合 file_field に```multiple: true```をつけるだけではいけないのでしょうか。
詳しい方教えていただけると幸いです。

複数の画像を投稿することができない

下記の図のようにカード全体のリンクをJavaScriptでexample.com/post/1にした場合に一部を除外したい場合はどのようにしたらいいのでしょうか。
（<div class="text">の部分のリンクを無効）

```HTML
<div class="post-card">
<a herf="example.com/user/user_id">
 <div claas="user">
  <img src="user-icon.png" class="user-icon">
  <p class="username">ユーザーネーム</p>
  <p class="user_id">@User_id</p>
 </div>
</a>
 <a href="example.com/post/1" class="link"></a>
 <div class="text">
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
 </div>
</div>
```

```JavaScrip

$('.post-card').click(function() {
location.href = $(this).find('.link').attr('href');
});
```
![イメージ説明](77a045082925bc842c4189d8e025d33a.png)

div全体をリンクにしたときに一部を除外したい

Ruby on Railsの練習中なのですが
TwitterやMastodonのようなSNSではリンクが投稿されると自動的にリンク先のページタイトルやアイキャッチ画像が付いたカードが生成されますがこれはどのような仕組みで生成しているのでしょうか。
```<meta property="og:url" content="">``` ```<meta property="og:title" content="">```などのデータを取得して生成されているということまではわかるのですがそこから先がよくわからなくて質問させていただきました。
JavaScriptで自動的にリンクを検出し生成、またはRailsのHelperのようなもので生成しているのでしょうか。
教えていただけると幸いです。


![イメージ説明](ad481f1ddee39be456e0d466db7911a9.png)


![イメージ説明](ce7889ec2d1a6c3c839b1acd22dd240c.png)

リンクが投稿されたら自動的にカードにしたい

チャットの画面で自分と相手のチャットを区別するために、それぞれの自分の発言は右に、相手の発言は左に表示しようとしたのですがうまく反映されません
if文を使い自分の発言と相手の発言を区別するため自分の発言には```message-me```相手の発言には```message-you```クラスをつけたのですが実際にチャットを送信すると自分の発言も相手の発言もクラス名が```message-me```になってしまい両方右側に表示されてしまいます。
ですが更新すると相手の発言のクラス名が```message-you```に変わり左側に表示されるようになります。

更新をせずに自分の投稿は右に、相手の投稿は左に表示するにはどうしたらいいのでしょうか。
足りない記述があれば付け足しさせていただきます。
詳しい方教えていただけると幸いです。

画像１
![イメージ説明](66e5383ce73d89a7b39ea1e7effd9b7d.png)
画像2
![画像２](7f8f8c3e7a62a6f3fd2761a775327ed4.png)
### _chat_message.html.erb
```
<% if chat_message.user != current_user %>
<div class="message-you" 　id="parent">
    <img src="<%= chat_message.user.image %>" class="message-icon">
    <div class="chatUserName"><%= chat_message.user.username %></div>
    <a class="time-hover">
        <span class="dm-p"><%= time_ago_in_words(chat_message.created_at) %>前</span>
        <span class="hover-time"><%= time_tag(chat_message.created_at) %></span>
    </a>
    <div class="commonMessage-you">
        <div><%= chat_message.message %></div>
    </div>
</div>
<% else %>
<div class="message-me" 　id="parent">
    <img src="<%= chat_message.user.image %>" class="message-icon-me">
    <div class="m-chat-body">
    <div class="chatUserName-m"><%= chat_message.user.username %></div>
    <div class="dm-m-p">
    <a class="time-hover">
        <span class="dm-p"><%= time_ago_in_words(chat_message.created_at) %>前</span>
        <span class="hover-time"><%= time_tag(chat_message.created_at) %></span>
    </a>
    </div>
    <div class="commonMessage-me">
        <div><%= chat_message.message %></div>
    </div>
    </div>
</div>
<% end %>
```
### chat_room_channel.rb
```Ruby
class ChatRoomChannel < ApplicationCable::Channel
  def subscribed
    stream_for "chat_room_#{params[:room_id]}"
  end

  def unsubscribed
    # Any clkanup needed when channel is unsubscribed
  end

  def speak(data)
    message = ChatMessage.create(chat_room_id: data['room_id'], user_id: data['user_id'], message: data['message'])
    ChatRoomChannel.broadcast_to "chat_room_#{data['room_id']}", content: render_message(message)
  end

  private
    def render_message(message)
      ApplicationController.renderer.render(partial: 'chat_messages/chat_message', locals: { chat_message: message, current_user: message.user })
    end
end
```
### chat/show.html.erb
```
  <header class="header">
    <div class="chatPartner">
      <%= link_to chat_index_path(), method: :get do%>
      <span class="material-icons left">keyboard_arrow_left</span>
      <% end %>
      <div class="dm-username"><%= @chat_room_user.username %></div>
      <div class="dm-userid">@<%= @chat_room_user.user_id %></div>
    </div>
  </header>
<div class="messagesArea messages" id="scroll-inner">
<div class="area">
<%= render @chat_messages %>
</div>
</div>
  <div class="text-box">
  <form class="messageInputForm">
    <div class="messenger">
      <textarea type="text" data-behavior="room_speaker" class="messageInputForm_input" placeholder="メッセージを入力..."></textarea>
    </div>
  </form>
  </div>
</div>
</div>
```
###chat_controller.rb
```
class ChatController < ApplicationController
  def create
    current_user_chat_rooms = ChatRoomUser.where(user_id: current_user.id).map(&:chat_room)
    chat_room = ChatRoomUser.where(chat_room: current_user_chat_rooms, user_id: params[:user_id]).map(&:chat_room).first
    if chat_room.blank?
      chat_room = ChatRoom.create
      ChatRoomUser.create(chat_room: chat_room, user_id: current_user.id)
      ChatRoomUser.create(chat_room: chat_room, user_id: params[:user_id])
    end
    redirect_to action: :show, id: chat_room.id
  end
  def index
    @current_user =  current_user
    chat_room = ChatRoom.find_by(id: params[:id])
    @chat_rooms = ChatRoom.joins(:chat_room_users).
      where("chat_room_users.user_id =?", @current_user.id).order(created_at: :desc)
    @chat_messages = ChatMessage.where("chat_room_users.user_id =?", @current_user.id)
  end


  def show
    chat_room = ChatRoom.find_by(id: params[:id])
    @current_user = User.find_by(id: session[:user_id])
    @chat_room_user = chat_room.chat_room_users.
      where.not(user_id: current_user.id).first.user
    @chat_room_myuser = chat_room.chat_room_users.
      where.not(user_id: current_user.id).last.user
    @chat_rooms = ChatRoom.joins(:chat_room_users).
      where("chat_room_users.user_id =?", @current_user.id)
    @chat_messages = ChatMessage.where(chat_room: chat_room).order(:created_at)
  end
end
```
###chat.js
```
if (/chat/.test(window.location.pathname)) {
  var path = window.location.pathname.split('/');
  var room_id = path[path.length - 1];
  App.chat_room = App.cable.subscriptions.create({
    channel: "ChatRoomChannel",
    room_id: room_id
  }, {
    connected: function () {},
    disconnected: function () {},
    received: function (data) {
      $('.messages').append(data['content']);
    },
    speak: function (message) {
      return this.perform('speak', {
        message: message,
        room_id: room_id,
        user_id: $('meta[name="current_user_id"]').attr('content')
      });
    }
  });
  $(document).on('keypress', '[data-behavior~=room_speaker]', function (event) {
    if (event.keyCode === 13) {
      App.chat_room.speak(event.target.value);
      event.target.value = '';
      return event.preventDefault();
    }
  });
}
```

チャット画面で文章を送信したときにif文が効かない

LINEやTwitterのDMのようなチャット画面で通常のWebページの場合はページの一番上がスクロール開始位置になると思うのですが、チャット画面では一番下がスクロール開始位置になって上にスクロールしていくと過去のメッセージに遡れると思うのですがこのようなUIはどのように実装するのでしょうか。
また新しいメッセージを送信したときにメッセージのdivが下に追加されるのですがどのようにして新しいメッセージを追加したときに自動的に画面を一番下にスクロールさせるのしょうか。
伝わりにくいかもしれませんが教えていただけると幸いです
![イメージ説明](795d461efa684b4b513424bcfd9c1a58.png)

```HTML
  <header class="header">
    <div class="chatPartner">
      <div class="dm-username">USER_NAME</div>
      <div class="dm-userid">USER_ID</div>
    </div>
  </header>
<div class="messagesArea messages" id="scroll-inner">
<div class="area">
<div class="message"　id="parent">
 <img src="icon" class="message-icon"> 
 <div class="chatUserName">USERNAME</div>
 <a class="time-hover">
 <span class="dm-p">TIME 前</span>
 <span class="hover-time">TIME</span>
 </a>
 <div class="commonMessage">
 <div>MESSAGE</div>
</div>
</div>
<hr class="messageline">
</div>
</div>
  <div class="text-box">
  <form class="messageInputForm">
    <div class="messenger">
      <textarea type="text" data-behavior="room_speaker" class="messageInputForm_input" placeholder="メッセージを入力..."></textarea>
    </div>
  </form>
  </div>
</div>
</div>
```
```CSS
.header {
    padding: 7px;
    background: var(--heading-color);
    color: var(--primary-color);
    height: 57px;
    box-sizing: border-box;
    border-bottom: solid 1px var(--border-color);
}
.messagesArea {
    overflow-y: scroll;
    height: calc(100% - 8pc);
}
.message {
    margin: 10px;
}
```
※CSSは一部省略しています。

チャット画面でLINEやDMのようにスクロールさせたい

リンク内の文字を選択できるようにしたい
リンク内の文字を選択しようとすると通常は下の写真の様になってしまいますが、このリンク内にある文字を選択できるようにはどのようにしたらいいのでしょうか。
```ここに言語を入力
<p onclick="location.href='https://google.com';">Google</p>
```
で文字は選択できるようになったのですが文字を選択してクリックした状態からもとに戻すときにGoogleのページに飛ばされてしまいます。

Twitterなどのコードを見てみるとaタグが見当たらないのですがaタグを使わずにリンクを実現させているのでしょうか
詳しい方おしえていただけると幸いです。
![イメージ説明](cb2f46194c595414d00a669a38515b0e.png)

ハイパーリンクの文字列を選択する方法

### 質問①

最近プログラミングを学んでいて練習でRuby on Railsを使いTwitterのようなSNSサイトを作っているのですかYouTubeやTwitter、Instagram、FacebookのようなSNSサイトを作る際はPythonやRuby、PHPなどをの言語がありますが結局どれが向いているのでしょうか。
YouTubeやInstagramはPythonで作られているようですがやはりPythonが一番向いているのでしょうか。

自分的にはPythonは大規模なウェブサービスで人工知能が用いられたウェブサイトが多いイメージ。
Rubyはとりあえず簡単にウェブサービスが作れるイメージ。
PHPはWikipediaやFacebookなど文字の情報量が多いサイトに使われているイメージ
です。


### 質問②

RubyではRuby on Rails、PHPではLaravel、PythonではDjangoなど各言語に有名なフレームワークがあると思うのですが、フレームワークを使わずに開発しているサイトもあるのでしょうか。
YouTubeはPythonで作られていると聞いたのですがフレームワークを使っているとしたらどのフレームワークを使用しているのでしょうか。
またTwitterやInstagramなどもどのフレームワークを使用して開発されているのでしょうか。

### 質問③

Javaでのウェブサイト開発について
個人的にJavaはAndroidアプリやPCソフトを作る際に用いられるイメージがあるのですが、ウェブサイトを作る際はどのように使われるのでしょうか。
Rubyなどの言語はインターネット上に沢山の情報があるイメージなのですがJavaでウェブ開発に関するサイトや書籍などがあまり見当たらないイメージなのですがJavaでウェブ開発を行う際はどのようにして行うのでしょうか（アバウトな質問ですみません…）



---
初心者で申し訳ありません…

長文な質問で申し訳ありませんが詳しい方教えていただけると幸いです。

SNSサービスを作る際のプログラミング言語について

Twitterのトップページはヘッダー（メニュー）とツイート一覧が表示されるタイムラインの部分がAjaxで別々に読み込まれていると思うのですがこれはどのような仕組みで別々に読み込んでいるのでしょうか。

簡単に言えばトップページにiframeで別のファイルを読み込んでいるようなものなのでしょうか。Twitterのトップページのようにヘッダーとツイート一覧が表示されるタイムラインを別々に読み込みたい（全体を一気に読み込むと時間がかかって画面に何も表示されない時間が長くなるので先にデータが少ないヘッダーだけで読み込んでおいて常に何かの情報が画面にある状態にしたい）のですがどのように調べたら良いのでしょうか。

初心者なので色々おかしなところもあるかもしれませんが教えていただけると幸いです。

Ajaxでのページ読み込みについて

テキスト、画像、動画のいずれか一つ以上が選択されている場合に投稿ボタンを押せるようにしたいのですが動画が選択されているかどうかの判定方法がよくわかりません。
**テキスト・画像いずれか一つ以上が選択されているかどうか**
---
```JavaScript
  $(document).ready(function() {
    $('#submit').prop('disabled', true);
    $('.photo-up').on('click', function() {
      if ($(this).val().length > 0) {
          $('#submit').prop('disabled', false);
      } else {
          $('#submit').prop('disabled', true);
      }
  });
    $('#text').on('keydown keyup keypress change', function() {
        if ($(this).val().length > 0) {
            $('#submit').prop('disabled', false);
        } else {
            $('#submit').prop('disabled', true);
        }
    });
  });
```
画像・テキストは上記のコードで成功したのですが下記のコードのように動画が選択されているか否かの処理がうまくいきません。

**テキスト・画像・動画のいずれか一つ以上が選択されているかどうか**
---

```JavaScript
  $(document).ready(function() {
    $('#submit').prop('disabled', true);
    $('.photo-up').on('click', function() {
      if ($(this).val().length > 0) {
          $('#submit').prop('disabled', false);
      } else {
          $('#submit').prop('disabled', true);
      }
  });
  $('.video-up').on('click', function() {
    if ($(this).val().length > 0) {
        $('#submit').prop('disabled', false);
    } else {
        $('#submit').prop('disabled', true);
    }
});
    $('#text').on('keydown keyup keypress change', function() {
        if ($(this).val().length > 0) {
            $('#submit').prop('disabled', false);
        } else {
            $('#submit').prop('disabled', true);
        }
    });
  });

```
### HTML
```HTML
<form enctype="multipart/form-data" action="/posts" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="ernAj77WKTiNZEei/svubbs6kFdUbQmTz9BXZokkwIO5TBttzzrwwvx7e3xwB08vj405N7XqJqcOlj+tZDeiPA==">
        <textarea placeholder="投稿内容" class="post-form-new" rows="3" onkeyup="ShowLength(value);" id="text" name="post[text]" style="overflow: hidden;"></textarea>
          
      <div class="new-buttons">
      <div id="preview"></div>
        <label>
        <div class="tooltip1">
        <span class="filelabel">
        <input id="filesend" onchange="imgPreView(event)" accept="image/*" class="photo-up" type="file" name="post[image]">
        <img width="32" height="26" class="post-photo" src="/assets/photo-fca06e0acf6ae91e871e7cc024a426beed0f3a3fb15e835f9cd1ea39f6df3650.svg">
        <div class="photo-pop">画像を追加</div>
        </span>
        </div>
        </label>
        <label>
        <div class="tooltip1">
        <span class="filelabel">
        <input id="video" onchange="imgPreView(event)" accept="video/*" class="video-up" type="file" name="post[video]">
        <img width="32" height="26" class="post-photo" src="/assets/video-eebb3db2834953c60d60b63a96ec4d67cb8c9f8c681a033d1b7b8885879fbe25.svg">
        <div class="video-pop">動画を追加</div>
        </span>
        </div>
        </label>
      　
        <input type="submit" name="commit" value="投稿" class="new-post-btn" id="submit" data-disable-with="投稿" disabled="">
        <p id="inputlength" class="new-textlength">0/250</p>
      </div>
</form>
```
画像が選択されているか判定するコードと動画が選択されているか判定するコードはclass名を変更するだけではいけないのでしょうか。
JavaScriptに詳しい方教えていただけると幸いです。

動画が選択されていたらボタンを押せるようにしたい

チェックボックスでtrue、falseを切り替えれるようにしたいのです。
booleanの値を設定画面から変更したいのですが下記のコードでは変更できませんでした。
このコードではなぜ変更できないのでしょうか。
色々調べてみたのですがよくわかりませんでした。
### edit.html.erb
```ここに言語を入力
<div class="form-group">
 <%= f.label :setting, "設定" %>
 <%= f.check_box :setting, autofocus: true, class: "edit-control" %>
</div>
```

booleanのtrue、falseをチェックボックスで変更できるようにしたい

Ruby on Railsでサイトを作っています。
renderでナビゲーションバーを共通化させたときに今いるページのボタンだけをの色を変えて自分が今どのページにいるのかわかりやすくする方法がよくわかりません。

ページによって少し表示を変える場合はページ一つ一つにナビゲーションバーのコードを書かないといけないのでしょうか？


![完成イメージ](79d82caac1b476dab62f8cb04c484fc8.png)

共通のナビゲーションバーで今いるページを分かるようにしたい

DMの一覧機能を作りたいのですがよくわかりません。
DM機能は完成しています。
Chat_roomのなかのChat room usersの中に自分のIDが入っているチャットルームだけを表示するにはどのようにしたら良いのでしょうか

### chat_controller.rb
```ここに言語を入力
class ChatController < ApplicationController
  def create
    current_user_chat_rooms = ChatRoomUser.where(user_id: current_user.id).map(&:chat_room)
    chat_room = ChatRoomUser.where(chat_room: current_user_chat_rooms, user_id: params[:user_id]).map(&:chat_room).first
    if chat_room.blank?
      chat_room = ChatRoom.create
      ChatRoomUser.create(chat_room: chat_room, user_id: current_user.id)
      ChatRoomUser.create(chat_room: chat_room, user_id: params[:user_id])
    end
    redirect_to action: :show, id: chat_room.id
  end
end
```

### chat_controller.rb
```ここに言語を入力
class ChatController < ApplicationController
  def create
    current_user_chat_rooms = ChatRoomUser.where(user_id: current_user.id).map(&:chat_room)
    chat_room = ChatRoomUser.where(chat_room: current_user_chat_rooms, user_id: params[:user_id]).map(&:chat_room).first
    if chat_room.blank?
      chat_room = ChatRoom.create
      ChatRoomUser.create(chat_room: chat_room, user_id: current_user.id)
      ChatRoomUser.create(chat_room: chat_room, user_id: params[:user_id])
    end
    redirect_to action: :show, id: chat_room.id
  end

  def show
    chat_room = ChatRoom.find_by(id: params[:id])
    @chat_room_user = chat_room.chat_room_users.
      where.not(user_id: current_user.id).first.user
    @chat_messages = ChatMessage.where(chat_room: chat_room).order(:created_at)
  end
end
```

### モデル
**chat_rooms**
|カラム名|データ型|
|:--|:--:|
|id|integer|

**chat_room_users**
|カラム名|データ型|
|:--|:--:|
|id|integer|
|chat_room_id|integer|
|user_id|integer|

**chat_messages**
|カラム名|データ型|
|:--|:--:|
|id|integer|
|chat_room_id|integer|
|user_id|integer|
|message|string|