HOME 　»　Hatena , MovableType , PHP , tips , tutorials 　»　はてなアンテナの更新リストを表示させる。

はてなアンテナの更新リストを表示させる。

この前うちのサイトデザインを参考にしてくれた奇特なステキなお方、としさんのサイトなんですけど、よーく見たら見た事ない物がサイドバーについてる？
「はてなアンテナ」の更新状況のお知らせなんですけど、MyBlogListやBlogPeopleと表示形式が一緒なんですよ。
こんなアイテム配布されてたっけ？と思ってはてなを調べたんですけどなかったので、としさんに某所で質問した所、ご親切にも記事あげして下さったうえに、「できねーだよ」との叫びにも親切に対応してくださいました。ありがたや。

と言う事で、やり方を自分用に覚え書きしておきたいと思います。

参考サイト

• 「コトウユウキの（う）らぶろぐ」さん：はてなアンテナ組み込みスクリプト(再公開)
• 「Orbium -そらのたま-」さん：はてなアンテナを自分のサイトにインポートしよう！

※　この技が使える人は「利用しているサーバーがphpに対応している人」です。

手順

1. 「コトウユウキの（う）らぶろぐ」さんで配布されている「hatena2js」のソースを頂いてくる。コピペした内容をとりあえずテキストエディタか何かに貼り付ける。
2. ソースの改変を行う。
   以下は私用のソース。色つきは改変した部分です。

   [hatena2js.php]
   <?php
   // このスクリプトはEUCです。申込
   ob_end_flush();
   $hina = file("http://a.hatena.ne.jp/【自分のはてなIDを入れる】/source?mode=hina");
   $duration = 6 * 60 * 60;
   $uplink = "<img src=\"http://blog.livedoor.jp/jii0067/1c5ee760.gif\">"; 
   
   echo "<!--\n";
   echo "drawHatena( '<div class=\'blogrollmain\'>'+";
   
   foreach ($hina as $var) {
   preg_match("#<!--HINA_OK (\d{4})/(\d{2})/(\d{2}) (\d{2}):(\d{2}):(\d{2}).*?--><a href=\"(.+?)\">(.+?)</a><br>#i", $var, $t);
   list(,$dy,$dm,$dd,$dh,$di,$ds, $uri, $blog) = $t;
   $utc = mktime($dh,$di,$ds,$dm,$dd,$dy);
   
   $update = date("H:i:s", $utc)." [JST] on ".date("l, F d", $utc);
   $new = time() - $utc;
   $name = mb_convert_encoding($blog, "utf-8", "auto");
   
   if($new < $duration) {
   echo "'<a href=\'$uri\' title=\'Last updated: $update\' target=\'_blank\' >$name</a>' + '$uplink' + '<br />' +";
   } else {
   echo "'<a href=\'$uri\' title=\'Last updated: $update\' target=\'_blank\' >$name</a>' + '<br />' +";
   }
   }
   
   echo "'</div>' + ''); \n";
   echo "function drawHatena(s){ document.write(s); }\n";
   echo "// -->";
   
   ?>
   
   [MainIndex組み込み部分ソース]
   <script type="text/javascript" src="hatena2js.php"></script>
   

   • 「$hina」で自分のはてなIDを設定する。
   • 「 $duration」で何時間前までに更新されたサイトにお知らせマークを付けてあげるかを指定します。
     時間は秒数で指定されている（＝hour×minute×second）ので、頭の数字を調整してあげればOK。
   • 「$uplink」は元ソースではテキスト（New!）になっていますが、画像で更新を知らせたい場合はimgタグを用いてファイルを指定する必要があります。
     単純にこのソースのアドレス部分をそっくり入れ替えてあげれば大丈夫だと思います。
   • 文字コードがUTF-8の場合に発生する文字化け対策のため、18行目「mb_internal_encoding()」を「”auto”」と書き換える。
   • 私はデフォルト通りですが、32行目「’$uplink’ 」と「’<a href=\’$uri\’～」を入れ替えると、更新マークがサイト名の前に表示されるようになります。
     そのままだとサイト名の後ろに表示。

   ココが一番大事なのですが、一番上と削除部位の確認のを絶対に忘れないでください。忘れると真っ白な画面しか出てこないので、本人が真っ白な灰になると言う。

3. このファイルに適当な名前（ここでは「hatena2js.php」とする）をつけて、自分のサーバーにアップロードする。
4. リストを表示させたい所に、以下のように書き込む。

   <script type="text/javascript" src="【さっきのphpをアップロードした場所のパス】hatena2js.php"></script>
   このサイトの場合：<script type="text/javascript" src="http://blog.open-arms.biz/hatena2js.php"></script>

後は再構築かければできあがりです。
貴重な情報を本当にありがとうございました。

Related Posts

• 「Google Web APIs (beta)」を使ったサイト内メタ検索を設置しました。【追記有】
• phpMyAdminでMySQLのバックアップ・オーバーヘッドの解消
• （ようやく）エントリの前後記事を読みやすくしました
• 超高速で超便利なAjax で全文検索するJavaScript
• 記事の概要表示

• Tags : Hatena , MovableType , PHP , tips , tutorials　|　TrackBack URL
• Prev : 料理教室のレシピ17　【桃の節句料理】　|　Next : 裏ワザおもち