気ままにふりーだむ

学習やメモなどを投稿します。プログラミング仲間や仕事、求人の話は大募集。気軽にフォローやいいねいただけると励みになります!

Rails プログラミング

チャットアプリにメッセージの編集と削除ボタンをつける

投稿日:2019年3月29日 更新日:

やりたいこと

現在チャットアプリを作っており、投稿したメッセージの編集と削除を行うために
まずはボタンを配置したいと思っています。またそのボタンは常時表示させるのでなく、
該当メッセージにカーソルが当たった時に表示されて、離れたら非表示にします。

環境

ruby 2.3.1
Rails 5.0.7.2

今回記載すること

今回は追記した部分だけ記載させていただきます。
他ソースは下記Githubをご参照ください。

chat-space

対応したこと

それではまず、viewにボタンを配置します。ボタンはfont-awesomeのものを使います。
下記部分を追記しました。

続いて、font-awesomeのscssに今回使用する情報を追加します。

そして、messages.scssも編集します。

ポイントとしては、「position: relative」「position: absolute」で配置していること。
またliタグに「&:first-child」「&:last-child」で最初と最後のボタンの角を丸くしていることです。
今後ボタンが増えた時を考えてのものです。

最後にカーソルが乗った時、離れた時のjavascriptの処理を行います。
カーソルが乗った時、その要素を取得してその子要素であるulタグを取得します。
そして、要素を表示。また要素がdisplay=flexとして横並びにしています。
これは非表示にした際にdisplayがデフォルトとなってしまうためです。
カーソルが離れた際はhideメソッドで非表示にします。

結果

正常にボタン表示できました!!
ボタン表示.gif

以上です。宜しくお願いします。

参考

[参考][JavaScript] マウスポインタが触れた/離れたイベントを取得する(onMouseOver, onMouseOut)
[参考]JavaScript 要素を表示/非表示にするサンプル(displayとvisibility)
[参考]position:relativeとposition:absoluteで画像や文字を重ねてみよう
[参考]jQuery【 CSS 】display を使用した表示・非表示に関するサンプル
[参考]【JavaScript】マウスオーバー(ホバー)をトリガーにしたイベント

-Rails, プログラミング

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

[Rails]deviseのファイル構成

こんばんは。 表題の件について、どのページでみたかは忘れてしまったのですが、 deviseをinstallした時に作成されるファイルの構成をメモのため、 投稿します。参照元がわかったらまた追記させてい …

[AWS]bundle exec cap production deployのエラーでつまった話

デプロイを行う際に発生したエラーで行なったことをメモ。 同じように困った方の参考になればと。 環境 ruby 2.3.1 Rails 5.0.7.2 MySQL git unicorn nginx c …

no image

[Ruby]「class クラス名 end」という記述じゃないクラス定義

クラス定義は通常下記のように行いますよね。

上記を用いないでクラス定義する方法について学んだのでメモ。 結論からいうと下記のような記載 …

no image

[Rails]deviseを実装する

こんにちは。 ログイン機能を実装する便利なGem deviseの導入方法をまとめます。 それでは早速はじめます。 まずはGemfileにdeviseを記載します。 [crayon-5dac27cfef …

AWS+nginxサーバーに独自ドメインを設定したい

はじめに 現在の状況です。 下記環境でAWSにnginxサーバーを使用してデプロイはできている状態です。 IPでアプリケーションは表示されているが、自分で取得したドメインでも表示できるように したいと …