画像掲示板の泉」にはjQueryを使ったレスアンカーポップアップ機能をスレッドにつけてあります。

レスアンカーとは、2chなどで「>>10」といった形で、他の投稿にリンクを張る、このリンクのことをいいます。「画像掲示板の泉」では、レスアンカーを設定すると、jQueryを使ってその投稿をポップアップ表示するように作りこんでありました。

この記事では、このレスアンカーポップの作り方を、具体的なHTML、jQueryのサンプルコードを付けてご紹介しています。

レスアンカーポップ

8年ほど前、jQueryを使って掲示板のレスでアンカーリンクがあった際にポップアップさせる機能を付けたという記事を書いておりました。

表示されなくなったレスのポップアップ

頑張って作った機能でしたが、何故だか理由は分かりませんが、全板からこの機能がなくなってしまっていたので再度設定をしたという話になります。

いつ、何のために消したかを全く覚えていませんが、jQueryのfunction()だけでなく、表示用の空DIVまで消えていたので、何か意図があって自分できれいに消していたのかもしれません。とはいえ、その理由も全く覚えておりません。

仕方ないので、上記の数年前のブログ記事を読みつつ、自分でまた1からコードを書くところから作り直してみました。

レスアンカーポップの作り方

空DIVの設置

jQueryでデータを流し込むことになる、ポップアップ表示用の空DIVをHTML側に設置しておきます。idセレクタ名は何でも構いません。

<div id="POPUPnoMOTO"></div>

aタグにパラメータを追加

次に、投稿にアンカーリンクがあった際、jQueryでポップアップをさせやすくするために、アンカーリンクの<a>タグに要素を二つほど追加しておきます。

  • mouseoverの対象と分かるような固有のクラス名
  • アンカーリンクで指定された先のidセレクタ名

投稿記事からレスを抽出するPHP

掲示板の記事投稿用PHPでは、投稿された本文から「<<数字」という文字列要素を探して、このアンカーリンクを見つけたら、上の二つのクラス名、セレクタ名を追加しつつ<a>タグ</a>を生成させるコードを入れます。

$memo = preg_replace('/>>([0-9]+)/','<a href="#\\1" class="onMouse" name="d\\1">\\0</a>',$memo);

それぞれの投稿を固有IDのDIVで囲う

返信されることになる投稿側でも、ポップアップされた空のDIVにデータを渡しやすいよう、投稿内容を固有のDIV#idでまとめておきます。画像掲示板の泉では”d”+数字としてありますが、お好きなセレクタ名で設定ください。

<div id="d1">
 <ul class="list-inline post-meta">
  <li><a name="1"></a><span>1</span></li>
  <li>2019/10/01</li>
  <li>某訪問者</li>
 </ul><!-- end post-meta -->
 <p>投稿されたコメント本文</p>
</div><!-- end div -->

.JSの記述

これでHTML側の仕込みは全てできたので、あとはjQueryのみとなります。

”onMouse”というClassセレクタ名の<a>タグにmouseover()をすると、nameに設定した読み込み先のidセレクタ名データを取り込み、これを最初に作っておいた空のDIV要素に流し込むといった感じのコードになります。

言葉で説明がわかりにくいので、コードを見た方がすっきるするかもしれません。

$(function(){
  $("#POPUPnoMOTO").css({
    opacity:"0.9",
    position:"absolute",
    display:"none"
  });
  $("a.onMouse").mouseover(function(){
    var popupID = $(this).attr("name");
    $("#POPUPnoMOTO").html($("#" + popupID).clone());
    $("#POPUPnoMOTO").fadeIn("fast");
  }).mouseout(function(){
    $("#POPUPnoMOTO").fadeOut("fast");
  }).mousemove(function(e){
    $("#POPUPnoMOTO").css({
      "top":e.pageY+3+"px",
      "left":e.pageX+7+"px"
    });
  });
});

おわりに

数年前仕上げた時のように、多少のフェードイン・フェードアウトのオマケをjQueryで付けて、表示位置を少々調整すれば、レスアンカーポップアップの完成です。

今回はポップアップさせる空のDIV要素の側#POPUPnoMOTOに、CSSで吹き出し風のデザインも付けておきました。分かりづらいとは思いますが。

画像掲示板の泉ではレスアンカーに触れるとポップアップで該当記事のDIVを表示する
アンカーリンクをさわるとポップアップでリンク先を表示します

スマホで見ても無事ポップアップが出ておりました。

ABOUT dtn.jp

この運営ブログをみてdtn.jpの運営サイトに興味をお持ちになった方は下記のリンク集からサイトをご参照ください。PHP・SQL・JS・HTML・CSSや様々なAPIでゼロから立ち上げたサイトを複数運営しています。

dtn.jp関連サイト

  • ディレクトリ型検索エンジンdtn大手サイトは全てサービスを終了し、中小でも運営を継続するところがほとんどなくなってしまったディレクトリ型検索エンジンを2002年から細々運営しており、未だに細かい機能改修も行っております。申請されたサイトは実際に訪問して細かく確認をしているので登録までかなりお時間いただきます。
  • 猫ネコサーチエンジン猫・ペットサイト専用のディレクトリ型検索エンジンです。登録サイトはサイトのスクリーンショット付きでカテゴリに掲載しています。
  • 画像掲示板の泉画像やYouTubeやニコニコ動画が貼り付け可能な匿名画像掲示板です。27ジャンルに分かれた掲示板に、それぞれ100スレッドまで立てることが可能です。
  • ツイータンTwitter APIを使って10分おきに収集したTwitter(ツイッター)のトレンドワード・ハッシュタグを月別ランキングでご紹介中。キーワードトレンド推移やハッシュタグツールもあります。
  • Keyword Tool++Yahoo APIや楽天サイトのデータを日次で収集したデータを元に、EC系キーワードをラインキング形式でご紹介しています。各ワードは検索ボリュームや関連語、24か月の検索ボリュームトレンドを確認も可能です。
  • 消費者金融の泉カードローン商品を取り扱う金融業者を一覧で比較可能としたサイトです。カテゴリ別、人気度別、限度額別、金利別に比較可能なサイトにしています。
  • TrendinGファッションモールに出店するブランドをアイテムヒット率でランキングとしたサイトです。まだβ版です。

各サイトの開発方法などについて

各サイトの開発方法や運用トラブルについては、当ブログで不定期にご紹介しています。Twitterで新着記事のお知らせもしています。宜しければフォローどうぞ。