おはようございます、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  

---

　こんばんは、martinです。HTML5に対応したブラウザ(Firefox最新版やSafari, Chromeなど)では、画像などのファイルアップロード時に複数のファイルを一括して選択・アップロード出来ます。

　ppBlogでも、それを可能するための差分ファイルを添付しておきます。ppBlogの次期バージョンはv1.9.0を予定していますが、それに先行する形で、とりあえず試されたい方はどうぞ。

　また、この差分アップデートを適用すると、ローカルストレージ(localStorage^G)を利用した記事データのローカル保存のモードも有効になります(これはIE8も対応)。これは、書きかけの記事を、お使いのブラウザの保存機能を用いて、サーバー側ではなくローカルのPCに保存するものです。以前、(オフラインで書いていて)ほぼ書き上げた記事の投稿に失敗した経験があって、それで「オートドラフト」機能とは別につけてみようと思いました。従来の「オートドラフト」機能は、サーバーサイドに記事データを保存する点が「ローカル保存」と異なる点です。

　この新機能の利点は、インターネットに接続されていない環境でも、あらかじめ記事画面さえ開いていれば、オフラインで記事を書き続けて、とりあえずローカルに保存しておける点です。何かの間違いでブラウザ画面を閉じてしまっても、一度「ローカル保存」しておけば、再度ブラウザ画面を開いた際に、「保存履歴」から記事を復元することが可能です。 　添付ファイルの内容は以下の通りです。

• utils.php
• upload.php
• modules/write.inc.php
• modules/edit.inc.php
• Images/progressbar.png
• css/edit.css
• css/admin.css
• js/lib.js
• js/oParts.js
• js/editor.js

　それぞれ既存のファイルを上書きすれば良いかと思います。もとのファイルのバックアップは取っておいて、いつでも元に戻せるようにしておきましょう。自分のサーバー環境では、複数ファイルアップロードは問題ないようですが、サーバー環境はいろいろなので何か不具合とかあればご報告お願いします。

DOM storage   アップデート  

---

　こんばんは、martinです。以前、Flex(Flash)を用いた複数ファイルのアップローダー を紹介しましたが、実はHTML5だけで出来るのになぁ、と思っていました。現時点で、IE8を除く主要なブラウザでは軒並み、HTML5のINPUT要素に対するmultiple属性に対応しているので、それによる実装をppBlogに施してみました。複数ファイルを選択可能にするには、input要素にmultipleを指定するだけです。

<input type="file" name="src[]" id="src" multiple />

　とりあえず実装してみただけですが、きちんと動作しました(ここのエントリー は画像を複数枚一度にアップロードした)。UIをどうするかで試行錯誤しましたが、プロトタイプにしてはまぁまぁかなと思っています。

　さて、複数の(画像)ファイルがアップロード出来るようになると、アップロードする枚数に応じて、サーバーにデータを渡す間、じっと待たされるようになります。現状、HTML5のみではぼーっと待つしかありません なので、アップロードの進捗状況を示すプログレスバーが欲しくなります。この手のスクリプトはウェブ上にいろいろありますが、どれもFlashを用いたり、Perl(+JavaScript)を用いたりしたものです。出来ればPHP(+JavaScript)のみで完結させたい。

　いろいろ調べてみると、PHPとJavaScriptのみでは、ファイルアップロードに伴なうプログレスバーのギミックを提供するのは無理という記述ばかりです。というのもPHPには、ファイルアップロードの途中経過を知らせる仕組みが備わっていないからです。実は、PHP5.2以上であれば、PECL APC拡張機能を組み込んで可能 なのですが、サーバー側で PECL APCエクステンションをインストールする必要があり、これはレンタルザーバー等では敷居が高いでしょう。

　なので(Perlはあまり好きになれないという理由もあり)PHPとJavaScriptのみによる実装を考えてみました。まずは、PHPにおける、POST メソッドによるファイルアップロード時の挙動を知る必要があります。マニュアルによれば、基本的に以下の手順を踏みます。

1. サーバー上に転送される(画像)データは、最初は一時的なディレクトリ(テンポラリディレクトリ)にアップロードされます。この一時的なディレクトリは、だいたい/tmpディレクトリのことが多いです。php.iniで指定可。
2. 画像データの転送が無事に終わると、move_uploaded_file関数を用いて指定したディレクトリに画像データを移動させます。

　PHPでのネックは、この１番目の進捗状況を知るメソッドが備わっていないことです(なのでこの部分だけはPerlで処理するスクリプトがある)。サーバーサイドで提供しないのであれば、こちらからゲットしに行きましょう。アップロード中のデータは、テンポラリディレクトリに溜まっていくので、そのディレクトリのサイズは徐々に大きくなるはずです。なので、そのディレクトリのサイズを定期的に監視すればOKということになります。この「定期的に監視」という部分にJavaScriptのAjaxを使えば良いわけです。

　ディレクトリのサイズは、以下の記述で取得可能です。

$tmp_dir = '/tmp'; // 取得したいテンポラリディレクトリ

$size = 0; // ディレクトリのサイズ

$d = opendir($tmp_dir);
while($file = readdir ($d)){
 if(is_file($tmp_dir.'/'.$file)){
  $size += filesize($tmp_dir.'/'.$file);
 }
}
closedir($d);
echo($size); // ディレクトリの合計サイズを得る

　なお、上の例では、テンポラリディレクトリは/tmpですが、これを取得したい場合は、ファイルアップロード時に現れる変数の$_FILES['src']['tmp_name']を利用して、

dirname($_FILES['src']['tmp_name']);

で取得可能です。

　あとは、AjaxとPHPで、このディレクトリサイズを返すような記述をして、それをJavaScript側に渡し、プログレスバーっぽく見せればOKとなります。具体的なデモ を見てみましょう。うまく行けば、転送中のブラウザ画面は下のようなスクリーンショットになります。Firefox3.6.3やSafari, Google Chromeの最新版で動くと思います。

HTML5   PHP   Ajax   JavaScript  

---