画像掲示板に機能を追加

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

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

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

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

$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化など、やるべきことは山ほどありますが、いまだ全く作業が進まずといった状況です。

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

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で新着記事のお知らせもしています。宜しければフォローどうぞ。