こんばんは。お絵かきツールの話でも。

　小生のweblogのアクセス解析の「検索ワード」を見ると、いつも「お絵かきツール」とか「FLASH　お絵かき」での訪問がトップにきてます。「Flash版お絵かきツール 」のページがリンクされているんですが、これ2005年6月のエントリーなので、昔日という印象ですが、このFLASH版お絵かきは、この時点から何も変わってません。当時、画像を保存したりするメソッドが分からなくて頓挫したままになってまして。ppBlogに組み込む予定だなんて言ってましたが。。今は、FLASHで作成した画像データを保存したり、呼び出したりする技は知っているので、この古いスクリプトを対応させても良いのですが、元々が中途半端なプログラムなので、凝り出すと時間がかかりそうです。

　で、Web上には、FLASHではありませんが、Java仕様の大変高機能なお絵かきツールがいくつかあるので、それを利用するのが最善であろうと思います。おそらく一番有名なのは、「しぃペインター^G」でしょう。このソフトの存在は知っていたんですが、実際にダウンロード（DL）して、中身を読んだことはありませんでした。で、おとといDLして読んでみると、色々設置方法などについて詳しく書かれています。サーバーへのデータの受け渡しの記述もあるので、簡単にPHPと連携できそうです。で、やってみたらあっさりと画像データを取得できたので、簡単なプログラムを書いてみました。自由に投稿できて、最新の9個の画像をギャラリー閲覧出来ます。

しぃペインターを組み込んだデモ

Javaのことは全く分かりませんが、しぃペインターのプログラムが、サーバーに画像データを渡してくれるので、それをPHPでキャッチ出来れば良いわけです。しぃペインターの説明が分かりやすく、簡単に実装できました。上のデモのキモの部分を抜き出してみると、

if(!$raw_data = file_get_contents('php://input')){
 $raw_data = $HTTP_RAW_POST_DATA; // 次の手段
}

　基本的には、これがすべてです。php://input は、POSTの生データの読み込みを許可するプロトコルで、これとfile_get_contents関数 とを組み合わせるだけですね。まずこのやり方でトライして、で、駄目だったら $HTTP_RAW_POST_DATA を見るという流れです。これで、しぃペインターからのデータを無事にゲット出来たら、後は、ごにょごにょデータを弄るだけですね

しぃペインターのマニュアルによれば、

画像などを投稿した後の返り値にURL:と言う文字が初めにある場合、続く文字列をURLとして読み取ってその指定されたURLへジャンプする機能がつきました。これにより細かい動作をサーバー側が管理する事が容易になります。

とのことなので、データの取得に失敗したら、

if(empty($raw_data)){
 exit('URL:draw.php?mode=error&due=empty'); // 生データの取得に失敗した場合
}

みたいな記述で、自由にページを遷移させることができます。うまく生データを取得できた場合以下の処理が続きます。

$img_name = time(); // タイムスタンプをファイル名に
$img_size = substr($raw_data, 9, 8); // ファイルサイズ情報は必ず８バイト
$img_data = substr($raw_data, 19, $img_size); // 以下、画像データ
$img_ext = strstr(substr($img_data, 0, 4), 'PNG') ? '.png' : '.jpg'; // 最初の4文字で拡張子を識別

if($fp = @fopen(IMG_DIR.$img_name.$img_ext, 'wb')){
 flock($fp, LOCK_EX); // まぁ、とりあえず
 fwrite($fp, $img_data);
 fclose($fp);
 exit('URL:draw.php?mode=done&aim='.$img_name.$img_ext); // 書き込み成功した後のリンク処理
} else exit('URL:draw.php?mode=error&due=fopen'); // 書き込み失敗！

　こんなに簡単なら、もっとはやく向き合っていればよかった。。

　こんばんは。イベントに関するJavaScriptの話をば。

　ppBlogでは、管理画面で記事の削除やコメントの削除が出来ますが、現状、ひとつずつしか削除できません。削除したいものが沢山あるときは大変なので（あまりそういう機会はないと思うけれど）、次回アップデート版では、チェックボックスでチェックした複数の記事などを1度に削除出来るようにする予定です。実際のスクリーンショットは以下。

　チェックボックスをチェックする操作というのは、数が少ない内は良いけど、数が多くなるとマウスで逐一クリックしていくのが億劫になります。なので、シフトキー(SHIFT)を活用できるようにします。つまり、最初の方のチェックボックスをチェックしておいて、シフトキーを押した状態で、下の方のチェックボックスをクリックすると、その間のチェックボックスも自動的にチェックされた状態になるというものです。この手のインターフェイスはよく使われていて、例えば、Gメールでも、そういう操作が可能です。以下に実際のデモを載せておきます（下のデモはスクリーンショットじゃなくて、ちゃんと操作できますよ）。

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
選択： すべて  なし

　さて、この手のことを実装するには、シフトキー(SHIFT)が押された状態というのをJavaScriptで検知する必要があります。最初は、

var shift, e = oParts.evt, k = e.keyCode ? e.keyCode : e.which;
shift = e.shiftKey ? e.shiftKey : (k == 16 ? true : false);
if(shift){ // シフトキーが押されていれば

なんてのを思いつきましたが、キーボードイベントは、以前の知識しかないなぁ、と思って、新しい情報をwebで探してみました。したら、えらく新しいのがありました（今年七夕の記事です）。

　JavaScript Madness: Keyboard Events

　もはや、event.whichなんてのは不要で、event.keyCodeでこと足りるんですね。しかも、どのブラウザでも、event.shiftKeyを認識してくれそうです。なので、最終的には、この部分は、

if(oParts.evt.shiftKey){ // シフトキーが押されていれば

と非常に短く記述することが出来ますね。ppBlog向けの、上に上げたデモのソースコードを載せておきます。

o(document).on("click", function(){ // Event delegation
  var tar = oParts.evt.target; 
  if(tar.nodeName.toLowerCase() == "input" && tar.type.toLowerCase() == "checkbox"){
   var tr = tar.parentNode.parentNode;
   if(tar.checked == false){
    tr.style.backgroundColor = (tr.rowIndex % 2 == 0) ? "#eff1f3" : "#fff";
   } else tr.style.backgroundColor = "highlight";
   if(oParts.evt.shiftKey){
    var i = tr.rowIndex - 1, item, cb = o("td > input[type=checkbox]");
    for(i; i > 0; i--){
     item = cb.item(i).$;
     if(item.checked == true) break;
     item.checked = true;     
     item.parentNode.parentNode.style.backgroundColor = "highlight";
    }
   }
  }
 });

function resetAll(){ // すべてのチェックボックスを解除する
 o("td > input[type=checkbox]").each(function(e, i){
  if(e.checked){
   e.checked = false;
   e.parentNode.parentNode.style.backgroundColor = (i % 2 == 0) ? "#eff1f3" : "#fff";
  }
 });
}

function setAll(){ // すべて選択する
 o("td > input[type=checkbox]").each(function(e){
  e.checked = true;
  e.parentNode.parentNode.style.backgroundColor = "highlight";
 });
}

　ppBlogでは、多くのマウスイベント処理がありますが、ほとんどはEvent Delegation^Gを 活用しています。上のデモでも、チェックボックス1つひとつにイベントを登録していくのではなくて、クリックされた要素がチェックボックスであれば･･･、という捉え方をしています。イベントは、バブリング(伝達)していくものなので、最上位要素でモニターして、そのターゲットさえ掴めれば良いというわけです。

　Event Delegation versus Event Handling 　

　こんばんは。アクセス解析をブラッシュアップしました。基本的なインターフェイスは変わりませんが、従来の「OS/プラットフォーム」を分離させて、「検索エンジン2」と統廃合、「検索エンジン１」(センスのないネーミングだ)は「検索ワード」に変えました。

　「OS」の項目では、文字通りOS毎のシェアを表示するようにしました。従来は、プラットフォームとごっちゃになっていたので。以下スクリーンショットを挙げておきます（今月のある区間のデータです）。

OS毎の集計では、WindowsXpが未だに7割近くを占めています。Vistaは10%にすら届いていません。大丈夫かなぁ。

　次は、プラットフォーム毎の集計画面です。いつ頃からか知らないけれど、グーグルやYahooで、ブログ検索専用のロボットがいるみたいで（Feedfetcher-GoogleとかYahooFeedSeekerJpとか）、それらは、従来の検索ロボットとは区別してカウントするようにしてます。 　んで、ブラウザ毎。OSでXPがトップなのを反映してか、相変わらずIE6が4割近く。。まぁ、これでも随分と減ったんですが。でも、よく見ると、Sleipnirが８％ぐらいあって、大体IE6エンジンが半分以上だろうからやっぱり4割以上は未だにIE6ということかな。それでも、Firefoxが2割強と健闘してます。時代も変わったもんです。

　次に「検索ワード」を見てみます。ppBlogが一番多いのは、まぁ当然として、JavaScript関連も目立ちますね。

　最後に、これは何も変わっていませんが、「ユーザー環境の取得」を挙げておきます。テーマなどをデザインするときに、ユーザーの画面の解像度とかは気になるところですが、今やXGAよりもSXGAの方が多いんですね。良いことです

　例によって、最新版を添付しておきますね。statディレクトリの既存のやつを上書きするだけです。

---

　おはようございます。ppBlog Tipsというカテゴリーを設けました。ppBlogのちょっとした機能や、役に立ちそうなプチ改造法を紹介していこうと思います。

　ppBlogでは、昨日・今日・トータルのアクセス数、そして同時刻にトップページにアクセスしている訪問者をカウントして表示する（オンライン）機能がついています。このサイト（テーマがBasicであれば）では、ページの左上についているやつです。このオンライン数（同時にサイトを見ている訪問者）には、実は、巡回型の検索ロボット^Gのアクセスも含まれています。いつもオンライン数は１桁なのに、たまに23人!?とかになってたりするのは、多分に、この巡回ロボットのせいでしょう。巡回ロボットのアクセスも統計カウントのログファイルに記録されるので、ログファイルも肥大化する傾向にあります（もっともppBlogでは統計ログファイルが９００KB前後になると新しくログファイルを自動作成しますが）。

　この巡回型の検索ロボット、各々の検索インデックス作成のためにアクセスしに来ているので、アクセス自体を拒否してしまうのは、サイトの存在を隠すようなものですから、それは避けつつ、統計カウントから除外する方法について解説しておきます。

１．管理画面から設定する方法

　巡回エンジンのIPアドレスが分かっていれば、そのIPアドレスを指定して、統計から除外することが可能です。具体的にIPアドレスを知るには、まず管理画面の「アクセス解析」の「生ログ」というのを覗いてみます。左から5番目の項目は「エージェント」で、ここで巡回ロボットのめぼしをつけて、そのIPアドレスを見ればよいわけです。具体例を挙げておきましょう。

この画面では、2件のMSNサーチのロボットとグーグルのロボットが記録されています。例えば、MSNのロボットを統計から除外したい場合（アクセスの拒否ではない）、IPアドレスを見てみると、IPアドレスが微妙に違いますね。でも最初の３つは同じなので（65.55.105）、この部分をマウスで範囲を選択してコピーしておきます。次に、管理画面の「IPコントロール」→「統計カウント除外」というのを開いてみましょう。次のような画面になっています（ここでは既に登録されたIPアドレスもありますが）。

　この画面で、「設定したいIPアドレス」に、先ほどコピーした65.55.105をペースト、次にその後ろに「.*」を追加して 65.55.105.* という状態で、追加ボタンを押せば登録されます。これで、65.55.105.0から65.55.105.255までのIPアドレスを一気に統計から除外できるわけです。これはIPアドレスの範囲が分かっている場合には有効です。

２．直接プログラムをいじる方法

　上のようにあらかじめIPアドレスが分かればよいのですが、巡回エンジンの中には、IPアドレスが頻繁に変化して、決め打ちで指定するのが事実上無理なものもあります。そうでなくても、このように手作業で指定していくのも手間ですね。指定したIPアドレスが、そのうち変更されるかも知れませんし。この場合は、ソースをいじった方が速いです。具体的には、statディレクトリにあるlog.phpをいじります。

　代表的な巡回エンジンはグーグルのGooglebot、Yahoo!のYahoo Slurp、MSNのmsnbot、そして百度（Baidu）のBaiduspiderです。中には数秒おきにアクセスしてたり　これらの名前がエージェントに含まれていれば、カウントを除外するという記述を付け加えます。log.phpの86行目あたりに次の1行を追記しましょう。

if(strpos($ua, 'slurp') || strpos($ua, 'aidu') || strpos($ua, 'snbot') || strpos($ua, 'glebot')) $ip_accept = FALSE;

最新版のlog.phpは、コメントアウトしてありますが、すでにこの記述があります。ですが、３つめのMSNに対する指定で'msnbot'となっているので、ここは'snbot'に修正して下さい。strposの代わりにstrstrを使っても良いのですが、strposの方が高速なので、2文字目以降にヒットするようにしています。

　このような感じで、検索ロボットが名乗るエージェント名で指定するやり方は効果的なので、ソースをいじることに抵抗がない場合は推奨される方法です。ヒューリスティックな方法も取り入れるなら、

strpos($ua, 'bot') || strpos($ua, 'crawl') || strpos($ua, 'feed') || strpos($ua, 'fetch')

なども追記すると、より効果的に、統計からこの手の巡回ロボットを除外できます。

　余談になりますが、ソースを編集する際のテキストエディタですが、Windowsな環境であれば、個人的にはYokkaSoftさん のDeuxEditor（もしくはUnEditor）がおススメです。タブ型のエディタで、置換検索や、ファイル差分検出機能も充実していて、最高のテキストエディタだと思いますが、それでいてフリーです。有名なシェアウェアものより、よっぽど高機能にもかかわらずです。マックOSXでは、これに匹敵するテキストエディタ（フリー）は探しきれていません。同等のものがあれば、マックでのppBlog開発も苦にならないのですが、なかなか良いエディタがなくて･･･。　

---

　こんばんは。バージョンを上げようかと迷いましたが、偶数よりは奇数が好きだし、そう大幅な修正をしたわけでもないので、差分で。でもファイルはいつもより多めかな･･･。主なところを挙げときます。

1. 自動モブログを有効にしているときの独自セッションの挙動がおかしかったので、修正しました。モブログ投稿用のmob.phpをutils.phpの中で読み込む際に、2つ目のセッションが作られるんで、それでたまにログインしているのに、ログインアイコンが表示されないなどの症状が出ることもあったと思います。
2. utils.php、admin.phpに関しては、結構、ちょこちょこ変えています。WindowsのApache＋PHPな環境で、fgets関数 が意図したように改行部位まで読んでくれないことがあるので（HTML文字実体参照を多用していると起こりやすい？）、それに対処したりとか、動的モードの際のカテゴリーの絞込みリンクの修正とかです。
3. utils_admin.phpに関しては、オンポスト機能を取り入れたために、記事別のコメント・トラックバック許可指定が利かなくなっていたのを修正。新しく機能を付けると、それまで動いてものが動かなくなること多々あり。。
4. 後は、editor.jsやらソースハイライト表示用のsyntax.jsのブラッシュアップとかです。syntax.jsでは、従来は、JavaScriptやらPHPの組み込み関数のハイライトに関しては、指定したものだけハイライトする仕様でしたが、これだと数が多すぎて埒が明かないので、適当に推定するようにしました。
5. modules類に関しては、editor.jsに伴うものでwrite.inc.phpとedit.inc.php。記事を書きながら、ローカルプレビューはよく使うのですが、このボタンも固定ツールバーに貼り付けるようにしました。「公開」「ドラフト」ボタンもです。個人的には使いやすくなりました。
6. 後は、ひとつ前の記事にあるように、Gメールからの擬似モブログ投稿にも対応しました。他のwebメールでは試していません。Gメールでは、記事の作成画面で、リッチテキスト形式（いわゆるWYSIWYG^G）で記事が書けるので、ワープロみたいな書き心地を求めている方には、これを活用するのも良いかもしれません。個人的には、この手のエディタは、ちょっと動作がまどろっこしい部分があるので、「ローカルプレビュー」で確認しながら記事を書くというスタイルが好きですけど。記事管理用のarticle.inc.phpは、記事一覧の画面で記事のページ数を表示するようにしたりとか。

　今回は、こんなところですかね。この記事を書きながら思ったのですが、エディタ画面の固定ツールバーは便利なものですが、パソコンの解像度によっては、このツールバーの高ささえも気になることもあるかも知れないので、記事を入力中は、上に隠れてしまって、マウスを近づけると、ピョコッと出てくるというのも良いかも知れない。ステルスモードっていうのかな（違うか）？

　

---