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

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

ただいまの
回答率

88.91%

選択したテキストにカーソルを合わせるとコメントが打てるシステムの実装方法

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 219

fuyoS

score 1

現在webサイトを作っているのですが、タイトルにも書いた通り、カーソルで選択したテキストにホバーするとtextareaが表示されコメントが打てるというシステムを作りたいと考えています。機能的にはwordのコメント機能みたいなものを想像しています。

初心者で具体的な実装方法が分からないので、必要言語と方法を教えていただけると幸いです。
 
↓今書いているコードです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <link rel="stylesheet" href="css/test.css">
    </head>
    <body>
        <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </body>
</html>
@charset "UTF-8";

p::selection {
    color: white;
    background: rgb(232, 203, 255,.7);
}

↓補足です
イメージ説明
イメージ説明
イメージ説明

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • fuyoS

    2020/07/15 14:57

    そうですね。データ管理者だけが閲覧できるようにしたいです。

    キャンセル

  • Lhankor_Mhy

    2020/07/15 14:59

    データ管理者とは、コメントを入力する人とは別、ということでしょうか?
    そうだとすると、入力した本人は見れない、ということでいいですか?

    キャンセル

  • fuyoS

    2020/07/16 09:40

    分かりにくくてすみません…
    ユーザーAがテキストを提出して(ここで1回保存)、ユーザーBがそのテキストに対してコメントを添付(コメントも含め保存)、それをユーザーAが返信として受け取れる形にしたいです。

    キャンセル

回答 3

checkベストアンサー

+2

>必要言語と方法を教えて

必要な言語ですが、まず、サーバサイドで動作してデータベースにアクセスできる言語が必要です。たとえば、PHPなどですね。

次に、SQL言語で直接データベースを触るか、あるいはフレームワークを通してデータベースを触る必要があり、どちらにせよ学習が必要でしょう。補足の中に「管理者」という言葉が出てきたので、ログインとセッション管理、csrf対策などが必要でしょうから、フレームワークを選択することをお勧めします。

最後に、クライアントサイドの言語が必要なので、JavaScriptが必要です。

つまりまとめると、

  1. PHPなどのサーバサイド言語
  2. SQL、またはフレームワーク
  3. JavaScript

3つが必要です。


次に、方法ですが、これは言語やフレームワークの選択をしてから、ということになるかと思いますので、学習が進んだらまた別の質問を立てるのがいいでしょう。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+1

ずっとテキストエリアなんだけど
カーソルでホバーした時:テキストエリアの見た目
ホバーしてないとき:通常のテキストのような見た目
というようにホバーの有無でテキストエリアの見た目を変えたいだけならCSSのみでも:hover疑似クラス等を活用することで出来るのではないでしょうか。

「通常のテキストっぽい見た目にするのではなく実際に通常のテキストにしたい」
「テキストエリア以外の項目の色や表示も変えたい」
というのであればJavaScriptの知識も必要になるかと思います。

 ----- 補足 ----- 
上で記載した内容は、質問者様が画像で説明しているような
「カーソルでホバーした時にコメント追加のUIや吹き出しを表示する」
という見た目の実現に限った回答です。

「コメントとして追加した内容を他の利用者にも見えるようにしたい」
「複数の利用者で会話できるようにしたい」

といった機能を実現するためには、
ほかの方が回答してくださっているように
「入力されたコメントをどこかに保存する仕組み」
「保存してあるコメントを読み込んで表示する仕組み」
を別に作る必要があります。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/15 15:02

    ご回答ありがとうございます。
    後者だとjavascript必須ですか?jQueryでも代用できるでしょうか?

    キャンセル

  • 2020/07/15 15:10

    A.代用できます
    正しくはjQueryはjavascriptのライブラリなので(ものすごくざっくりいうならjavascriptの機能の一部がjQueryです)、javascriptを使わずにjQueryのみ使うということはないかと思いますが、jQueryを理解する過程でjavascriptの基本的な知識も身に着けることになると思うので大丈夫でしょう。

    キャンセル

  • 2020/07/16 09:42

    分かりました。
    勉強進めてみます。ありがとうございました!

    キャンセル

+1

社内にバックエンドが居る場合はAPIの開発をお願いすると良いと思います。
質問者様が一人で実装するのであればFirebaseのDatabaseであれば学習コストは低めに済むかと思います。

実装としては、
1.コメント用のテキストエリアを表示する。
2.コメント追加時は、Javascriptで登録用のAPIにPOSTする。
3.画面リロード時は、Javascriptで取得用のAPIにGETをする。

質問者様が実現したいゴール地点をイラスト(コメント表示・コメント追加・コメント追加後)でも良いので明確化していただけると詳細な回答が望めると思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/17 11:10

    ご回答ありがとうございました。

    キャンセル

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

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

関連した質問

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