画像掲示板に機能を追加

最後にプログラムを更新したのは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化など、やるべきことは山ほどありますが、いまだ全く作業が進まずといった状況です。

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

PHPが学べるおすすめプログラミングスクール

この運営ブログをみて、もしdtn.jp管理人のようにサイトをゼロから作ってみたいという思いに駆られた方は、サイト開発やプログラミングをオンラインで受講できるプログラミングスクールの活用をしてみてはいかがでしょうか。サーバ/WordPress/HTML/CSS/JS/PHP/SQLなどの基本さえ分かれば、ゼロからサイト立ち上げもポンポンできるようになって、今なら仕事や転職にも役立つのでオススメです。

PHPも学べるオンラインスクール

  • CodeCampAWS Cloud9を使ったクラウド上のIDEが用意されているので、ネットにつながればスタート開始可能というゴージャスなスクールです。講師も選べて、Webマスターコースならプログラミング経験0でも一気にフロントエンドからバックエンドまでマスターできます。
  • ウェブカツJava言語やRuby言語なんぞ教えん!という、初心者にありがちな挫折ポイントがよく分かってるスクールです。フロントエンドエンジニアに必要なスキルセット&PHPがマスターできます。
  • フリークス HTML/CSSから始まり、MySQLやLinuxからPHPの変数や分岐やループ、クラスやPDOに最後はMVCまで教えてくれるので、そこまで分かればなんでもできそうです。メンターに質問もし放題がいいですね。
  • テックアカデミー法人のIT研修もやってる業界最大手・受講者数No.1のスクールです。メンターとの定期オンライン面談やチャットサポートなどもあり、大手ならではインフラ環境がウリです。PHPと合わせてjQueryもマスターできる、PHP/Laravelとフロントエンドコースがおすすめです。

オンラインスクールのデメリット

孤独になりがちなサイト制作も、優しいメンターがそばにいてくれれば凄い楽しそうですが、もちろんデメリットもあります。お金がかかるという点です。ひたすらググって、本を読んでよりは確実にコストがかかってしまいます。とはいえ、多少の余裕があるなら、こんなご時世なので時間と労力を買った方が良いと思います。