この記事の目次
  1. 画像掲示板に機能を追加
    1. レスアンカーに自動的にリンクを作成
    2. 本当はレスアンカーのリンク先をポップアップにしたい
  2. レスアンカー先をポップアップ
    1. 基本的な考え方
    2. ①アンカーリンク先の投稿データを入れる空DIVを用意
    3. ②スレッドの各投稿は個別のIDをつけたDIVでくくる
    4. ③レスアンカーリンクに②の個別IDを付与
    5. ④レスアンカーに触ったらリンク先をポップアップ
    6. 完成したレスアンカーのポップアップ
  3. おわりに

画像掲示板に機能を追加

最後にプログラムを更新したのは2010年の年末頃だったので、半年近く放置状態の画像掲示板dtnでしたが、途中で新しい機能を１つ追加しておりました。

レスアンカーに自動的にリンクを作成

追加した機能がどのような機能かというと、書き込みした投稿内にレスアンカーがあった場合、自動的に該当する記事までの内部リンクを作成するといったものでした。

PHPのpreg_replaceでアンカーリンクを探して<a>タグを設定する１行を足しただけですが。

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

本当はレスアンカーのリンク先をポップアップにしたい

本当は他の画像掲示板でもやっているように、アンカーリンクがあった際にはリンク先をJavaScriptでポップアップに表示させてみたかったのですが、これがなかなかうまくできず、時間もあまりなかったので単に内部リンクを張るだけで済ましておりました。

そこで、今回はこれをしっかりポップアップリンクをするように組み上げてみました。

レスアンカー先をポップアップ

初めは邪魔なコードが多いjQueryのお世話にならないように、JavaScriptを使って頑張って書こうと思いましたが、IEではうまくいっても、Firefoxや他で動作が失敗してたりするのが面倒で、最後はjQueryでやってしまいました。

基本的な考え方

基本的な考え方はJavaScriptで書くもjQueryで書くも同じで大丈夫です。下記4つの流れで進めます。

①掲示板のページに空のDIVを用意する

②各投稿は個別のIDとしたDIVでくくる

③レスアンカーのリンクに②の個別IDをパラメータとして付与しておく

④レスアンカーに触ったら②の内容をポップアップさせるコードを書く

①アンカーリンク先の投稿データを入れる空DIVを用意

下記のようにレスアンカーを表示させる為のdivをhtmlに用意しておきます。 

＜div id="ID"＞＜/div＞

②スレッドの各投稿は個別のIDをつけたDIVでくくる

下記のような投稿データ一つ一つをDIVでくくります。DIVにはレス番号のような固有の番号をidに付与してあげると後で引っ張りやすくなります。

09　某訪問者　2000/01/01(Mon)　00:09:38
これは最初のテスト投稿です。

10　某訪問者　2000/01/01(Mon)　00:09:38
これは次のテスト投稿です。

<div id="09">
・・・・これは最初のテスト投稿です。・・・
</div>
<div id="10">
・・・・これは次のテスト投稿です。・・・
</div>

③レスアンカーリンクに②の個別IDを付与

アンカーリンクにも、どの書き込みをポップアップさせるかを判別するために、リンク先の投稿IDを設定しておきます。a linkのname属性部分に、ポップアップに表示させたい表示させたい投稿のdivのidを仕込んでみました。

＜a href="#09" class="onMouse" name="09"＞

④レスアンカーに触ったらリンク先をポップアップ

最後はjQueryのコードとなります。レスアンカーリンクにマウスがのったら、name属性の値を取得して、そのボックスデータを最初に作った空の<div>にコピーする。データの入った空のdivをアンカーリンクの位置近くに表示をさせる。オマケでフェードイン、フェードアウトの設定も付けてみました。

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

完成したレスアンカーのポップアップ

完成したレスアンカーポップアップがこちらです。動きを試してみたい方は、雑談掲示板でお試してください。

アンカーリンクでポップアップが表示されました

おわりに

jQueryだとブラウザ差異も気にしなくてよいので本当に楽になりました。

こんなことやっているなら、ディレクトリの登録審査や猫ねこサーチエンジンのXHTML化など、やるべきことは山ほどありますが、いまだ全く作業が進まずといった状況です。

ディレクトリに登録を申請して下さった方々には大変申し訳ございませんが、今しばらくお待ちください。