こんにちは。前回のエントリーのコメントで「生ログ」の「リンク元」にも「expand」アイコンをとの要望がありましたので、そうしました。ついでに、短縮URLのサービスホストを判定するロジックの精度を少しばかり高めました。単に、文字列の長さのみで判定すると、p2b(笑)だとか、twitterとかも短縮URLサイトと判定してしまうので。

　具体的には、ホワイトリストのホスト名を配列で指定するようにして、そうでなければ「expand」アイコンを付けるという感じです。現状、以下のようになっていますが、適宜追加しても良いでしょう。

$not_shortening_hosts = array('twitter', 'www', 'p2b');

　これは、view.phpの78行目で指定しています。

　ブラックリスト方式でやろうとすると、どうやら100以上のサイト を指定する必要がありそうで、ちょっとシャレになりません。

　最新版を添付しておきます。

---

　おはようございます、martinです。WC、初戦勝ちましたねぇ。正直期待していなかっただけに喜びも倍増といったところ。決勝トーナメント進出！なんて日が来るのでしょうか。

　さて、今回は前回のアクセス解析の続きみたいなものです。前回のエントリーで、短縮URLの元を知るサイトとして、http://knowurl.com/ を紹介しましたが、他にもいくつかありますね。LongURL なんかもそうです。LongURLは、Firefoxの拡張版 もあるようですね。API も公開されているようでjQueryのプラグインとかもあるようです。APIがあるんで、ppBlogでも使える様なJavaScriptを書いても良いですが、仕組みは結構単純なので、外部のAPIに頼らずともppBlogのみで完結できそうです。

　まずは、短縮URLがどのような仕組みになっているのか知る必要があります。短縮URLを提供しているサイトはいくつもあります(現時点で動いているのは bit.ly、j.mp、cli.gs、Short.ie、Idek.net、is.gd、sn.im、u.nuあたり)が、これら殆どのサイトでやっていることはリダイレクトです。PHPを使えば、その辺りの情報は簡単に取得出来ます。例えば、http://bit.ly/aKhZ1G は、http://p2b.jp/201006-get-html5-fileuploading-moduleというリンクの短縮形ですが、PHP経由でアクセスしてみると、リダイレクト先の情報などが入手出来ます。PHP5であれば、get_headers() 関数が使えます。便利ですね。この関数を使って以下を実行すると、

<?php
$url = 'http://bit.ly/aKhZ1G';
print_r(get_headers($url, 1));
?>

大まかには、以下のようになります。

Array(
 [0] => HTTP/1.1 301 Moved  /* Permanentlyと続くこともある */
 [Location] => http://p2b.jp/201006-get-html5-fileuploading-module /* リダイレクト先がある！ */
 [MIME-Version] => 1.0
 [Content-Length] => 313
 [X-Powered-By] => PHP/5.1.6
)

[Location]の項目に短縮URLの元リンクが収められていますね。なので、配列からこれを取り出せばOKです。じゃPHP5ではないサーバーではどうするか。fsockopen()関数 を使います。以下のような記述で行けるでしょう。

$url = 'http://bit.ly/aKhZ1G';
$_url = parse_url($url);
$port = isset($_url['port']) ? $_url['port'] : 80;
$host = isset($_url['host']) ? $_url['host'] : '';
$path = (isset($_url['path']) ? $_url['path'] : '/').(isset($_url['query']) ? '?'.$_url['query'] : '');
$request  = "GET ".$path." HTTP/1.1¥r¥n";
$request .= "Host: ".$host."¥r¥n";
$request .= "Connection: Close¥r¥n¥r¥n";

if($fp = fsockopen($host, $port, $errno, $errstr, $timeout=3)){
  stream_set_timeout($fp, 3);
  $ret = '';
  fputs($fp, $request);
  do {
   $ret .= fgets ($fp, 4096);
  } while (strpos($ret, "¥r¥n¥r¥n") === FALSE); // ヘッダー部分で十分
  fclose($fp);
}

これを実行すると、以下のような感じになります。

HTTP/1.1 301 Moved
Server: xxxx/0.7.42
Date: Tue, 15 Jun 2010 02:46:59 GMT
Content-Type: text/html; charset=utf-8
Connection: close
Set-Cookie:xxxx
Location: http://p2b.jp/201006-get-html5-fileuploading-module /* これが欲しい */
MIME-Version: 1.0
Content-Length: 313

これから、Location:の部分を取り出す正規表現は、以下のような感じでしょうか。

$redirectURL = preg_replace('{^.+?Location:¥s([^¥n]+?)¥n.+$}s', '$1', $ret);

これで、$redirectURLにhttp://p2b.jp/201006-get-html5-fileuploading-moduleという文字列が入ることになります。

　以上のことをやると、リダイレクト先が分かるのでppBlogのアクセス解析に組み込んでみました。「リンク元」の項目で、短縮URLっぽいものには、下のショットにあるように「expand」というアイコンみたいなやつが付くようになります。

　そしてこれをクリックすると、Ajax経由で情報をゲットして以下のような表示に変わります。

　リダイレクト先があれば、これがその場で表示されます。これはリンクになっていますが、そのサイトへのリンクではなくて、グーグルでそのリンクを調べるようになっています。それで怪しげなサイトであればブラウザでアクセスするのを避けることが出来るわけです。

　ちなみに、Ajax部分は、以下のような関数で実現しています。思ったよりシンプルに出来ました

  var expand = function(url){
   var target = o(oParts.evt.target);
   var loader = oParts.create('IMG').src('../Images/loader.gif'); /* ローディングアニメーション */
   target.addAfter(loader);
   oParts.server.get('view.php?expand=' + url, function(ret){ /* これがAjax部分 */
    loader.away();
    if(ret == url){
     target.css('color:gray; cursor: default').html('redirect 0').title('リダイレクトはありません').on('click', function(){});
    } else {
     target.css('color:crimson; border-color: green').html('Redirect: <span onclick="googleIt(¥''+ret+'¥')" title="グーグルで検索">' + ret + '</span>');
    }
   });
  }

　一応、これを実現するためのview.phpを添付しておきます。statディレクトリの既存のやつと置き換えればOKかと思います。前回添付したものの上位版になります。

　今週末にppBlogの最新版配布を予定していますが、これはそのバージョンに組み込み予定です。

PHP  

---

　こんばんは、martinです。

　自分のところで使っているアクセス統計解析の最新版を添付しておきます。ppBlogには、それなりに高機能なアクセス解析機能が付いています。たまに「リンク元」とかを見るのですが、それなりの頻度で怪しげなサイトからのアクセスログが残っていることがあります(お金の融資とかキャッシングとかカジノとか)。こういうのは、きっとアクセス解析をしている人をターゲットにして、意図的にアクセスログを残しているんだろうなぁ、と邪推してます(どのサイトから訪ねてきたのかな？という心理をうまく突いている)。

　現状では、URLの文字列にわかりやすいキーワードが含まれていれば、管理画面→「アクセス解析」→「統計カウント除外」→「除外キーワード」と辿(たど)っていって、そこでログに残さないように特定文字を指定出来ます。例えば、自分のブログでは、casinoとかpokerとかcashという単語を除外キーワードに指定しています。

　これはこれで効果はあるのですが、URL短縮化をされると対処できません。最近は、短縮URL^Gというのが流行っているようでtwitterとかでよく使われているとか。これは確かに便利な側面もあるのですが、Wikipedia にもあるように、要は、何処に飛ばされるか分からないリダイレクト仕様なので、フィッシング詐欺なんかに簡単に悪用されます。

　なので、「リンク元」の画面でそのリンクをクリックする前に、ちょっと「ググッてみる」というギミックを付けてみました。単に「Googleで検索」というリンクをつけただけですが、何気に便利かなと思います。怪しげなURLだったりしたら、まずはググってみましょう。金融関係だったり、やたら他サイトのアクセスログが検索結果に出てきたりすると、「クロ」なのかぁと判断して、そういうサイトはスルーしましょう。

　添付ファイルを展開すると、view.phpというPHPファイルとg-link.pngという小さな画像があります。view.phpはstatディレクトリのものと入れ替え(例によって、もとのview.phpはバックアップをとっておいて下さい)、g-link.png画像はstatディレクトリにあるiconディレクトリへアップロードしましょう。

　うまく行けば、上に示した画像のように「リンク元」解析でURLの右側に小さな「g」アイコンが現れます。これをクリックすると、そのURLにアクセスするのではなく、グーグルでURL自体を検索します。

　何かありましたらコメントをどうぞ。

関連リンク

短縮されたURLの元のアドレスを教えてくれるサイト→http://knowurl.com/ （百式さん 経由で知りました）

アップデート  

　おはようございます、martinです。前々回ぐらいに、HTML5を用いたプログレスバー付きのファイルアップロードのデモを示しました。この手のスクリプトは、プログレスバーの表示にFlashやJavaを用いていることが多いのですが、ファイルサイズが大きくなる傾向になったり、設置がややこしかったりします。

　何件かソース希望のリクエストがあったので、ppBlogからのスピンアウトとして配布しようと思います。配布するやつは、PHPとJavaScript(＋CSS)だけでプログレスバーを実現していて、設置も比較的簡単ではないでしょうか。添付ファイルを展開すると以下のファイルが含まれています。

• index.html（ここにアクセス）
• fileUpload.php（PHPでのファイルアップロード処理用）
• oParts.js（プログレスバーのためのJSライブラリ）
• progressbar.png（プログレスバーの画像）
• PIX（アップロードした画像を保存するフォルダ）

　基本的には、展開したフォルダを然るべき場所にまるごとアップロードして、index.htmlにアクセスすればOKかなと思います。サーバーによっては、PIXディレクトリのパーミッションの指定が必要かもしれません（707とか）。

　画像を保存するディレクトリは、PIXにしていますが、これは適当に名前を変えても良いでしょう。fileUpload.phpの最初の方で指定出来ます。

$pix_dir = 'PIX/'; // 画像を保存するディレクトリ。パーミッションは707とか。

　うまく動けば、アップロード中は以下のような画面になっているかと思います。

＊あくまでサンプルです。最低限の実装なので、セキュリティ関連は、各自でいじって下さい。JavaScriptをいじれば、プログレスバーに加えて、全体の何パーセントが完了みたいなことも出来るでしょう。

HTML5   PHP   JavaScript  

---