こんばんは。昨日に引き続き。タグ関連の部分は、色々とアルゴリズムを変えていたんですが、まだ挙動がおかしいようで、それのアップデートです。utils_admin.phpの101行目付近からをいじっています。

　ついでに、今後のロードマップをメモしておきます。

v1.9.0

◆ 複数の(画像)ファイルを1回でアップロード 。Firefox3.6では、ブラウザでこれに対応する ようですが、現状は、FLASHに頼ることになるかと思います。

◆ バージョンチェック機能の強化。URLのパラメータで正しいバージョンを出すような仕組み。

v1.9.x

◆ HTML5対応版。HTML5^Gでは、HTMLの記述が現状よりシンプルに分かりやすくなると思います。

添付ファイル： utils_admin.php 

アップデート  

　こんばんは、martinです。何となくアップデート後はいつものことのような気がしますが…。

　タグの文字列に、半角スラッシュを入れていると、タグの検索でかかってきません。それの対策もしていたつもりでしたが、詰めが甘いですね。。これはmodules/tags.inc.phpの16行目を以下のようにします。

 $hit = preg_grep('{'.preg_quote($tag).'¥|}', $TAGS_LIST);

デリミッターに半角スラッシュを使っていたのが駄目でした。いつもは{}を使うんですけどね。。

　あと、やはりタグ周りですが、タグに「ソ」などの文字を使っていると、タグが文字化けするという報告がありました。まるでSHIFT_JISみたいですね。これはutils_admin.phpの39行目を修正します。全角空白を省きました。

  $tags = p_('tags') ? explode(',', preg_replace(array('{([^&]),[¥s]+}', '{,[¥s]*$}'), array('$1,', ''), p_('tags'))) : array();

　ついでですが、IE6/7のサポートは基本的にやめようかと思っていたのですが(特に管理者用として)、まだ使われているようですし、折角のタグポップアップがIE6で使えないのは残念なきもするので、対応したwrite.inc.phpやedit.inc.phpも添付しておきます。

添付ファイル： tags.inc.php  write.inc.php  edit.inc.php  utils_admin.php 

アップデート  

　こんにちは、martinです。もう師走ですね。ppBlogの最新版をリリースしました。

　結果的には、タグ周りの修正がメインになりました。従来は、スペースを含むタグ(health careとか)は仕様により入力不可でしたが、これを可としました。なので仕様の変更があります。記事入力画面下にタグを入力するエリアがありますが、複数のタグを指定する場合は、(半角のカンマ + スペース）で区切るようにします。従来は、スペースのみで区切る方式でした。

擬似プルダウンメニューです。タグの入力が簡単になります。

　こういうギミックがあると、なんだか楽しくて色々タグをつけたくなります（まだ十分には動作の検証はしていませんが･･･）。

　そのほかの修正としては、前回エントリーで紹介したように、アクセス解析に記事アクセスランキングを統合したりとか、モブログの設定で、その場で指定したメールサーバーへのログインを試みて、有効なサーバーアドレスであるかとか、適切なログイン名であるかをチェックするようにしたりとか、主に使い勝手の向上がメインです。

　あ、あと記事アクセスランキングに関連して、ログインした状態では、各記事のタイトル右に小さくレビュー数を表示させるようにしました。

---

　この表示が不要という方は、utils.phpの12行目に設定できる項目があるので、そこでゼロ(0)とかFALSEを指定すると良いです。

define('SHOW_REVIEW_COUNT', FALSE); // 管理向け者に記事の参照数を表示させるか(記事タイトル右)

　例によって、v1.8.7との差分ファイルを添付しておきます。基本的には、単なる上書きで良いです。

添付ファイル： DIFF187_188.zip 

アップデート  

　こんばんは。先週、A型インフルエンザのワクチンを接種しました。ラボのみんなが行く際に「マーチンも行く？」「うん。」で。3-4日ほど痛かったなぁ。

　さて、v1.8.8のリリースに向けて、アクセス解析をいじってます。現行の最新版(v1.8.7)では、記事のアクセスランキングを記録する機能がついていますが、タイミングによっては集計されたランキングがリセットされる現象もあるようで、その辺りはバックアップファイルを作るようにしたりして、せっかくの集計がリセットされないような手段を講じています。

　で、前々から記事のアクセスランキングは、アクセス解析でも見られるようにするのが良いなと思っていたんで、そうしてみました。

こんな感じです。トップ３は、気持ち見やすく。

　それ以外にも、見栄えの修正やら、動作を少し変えたりしています。例えば、「検索ワード」などにおいて、データ量が多いと表示するテーブルが縦長になり、ページスクロールするのにもたつきを感じるようになります(少なくとも、MacBookProユニボディーの中のVMwareで動いているWindows7ではそうです)。なので、こういうのは、テーブル要素を含んでいるDIV要素の下端をブラウザの下端ぐらいまでにとどめて、DIV要素にスクロールバーが表示されるようにしています。これで、動作もスムーズにまりました。上のスクリーンショットでも、スクロールバーがDIV要素に表示されているのを確認できると思います。

　ある程度以上のバージョン(v1.6以上ぐらい？)であれば、記事アクセスランキングの集計がなくても問題なく動くと思うので、先に試されたい方はどうぞ。フィードバックなど大歓迎です。基本的には、statディレクトリのview.phpとstat.cssの上書きです。後、ランキング表示用のアイコンが2つです。これはstat/iconディレクトリにアップロードします。

添付ファイル： stat188.zip 

　こんばんは。久しぶりにDean Edwards のブログを覗いたら、MSIEでカラーキーワード(redとかtomatoとか)やらをHEX方式(#f01234とか)に変換するやり方が載ってました。

function toHex(color) {
  var body  = createPopup().document.body,
  range = body.createTextRange();
  body.style.color = color;
  var value = range.queryCommandValue("ForeColor");
  value = ((value & 0x0000ff) << 16) | (value & 0x00ff00) | ((value & 0xff0000) >>> 16);
  value = value.toString(16);
  return "#000000".slice(0, 7 - value.length) + value;
};

　ppBlogには、cornerplay.jsというJavaScriptがあって、指定ボックスの角を丸くしたり凸凹にしたりできる動作を担当しています。具体的には以下のような感じです。

　で、このボックスの背景色に、tomatoとかindigoとかlavenderなどのいわゆるカラーキーワード でも指定できるように、これらカラーキーワードをHEX方式に直した対応表も含めているんですよね(147色ぐらいある)。今、考えるとほかにもやりようがある気もしますが、当時は仕方ないなぁとその対応表をJSON配列にして含めてました。

　このDean Edwardsのやり方なら、対応表なんていりませんね。記述が短くなってファイルサイズも小さくなるだろうし言うことないです。ただ、これはIE限定なので、Firefoxやその他のブラウザでも動くように改良してみましょう。Deanは、「ほかのブラウザは、getComputedStyle()が使えるからバッチリだぜ。」って述べています。

　調べたところ、各ブラウザ（Firefox、Opera、Chrome・SafariなどのWebKit系）で結構動作が違っていて興味深かったです。ただ色の変換をしたいだけなのに、わざわざ既存のDOM構造に影響を与えるようなやり方(色を取得したいがために、document.createElementで新たに要素を作成して、それをdocument.body.appendChildしてDOM構造を改変した後で、getComputedStyle()にて色を取得)は、reflowの問題 もあり出来れば避けたいところ。

　大体以下のような感じでいけそうです。

function ColorToHEX(color){
 var d = document, ecolor, element = d.createElement("button");
 element.style.color = color;
 ecolor = element.style.color; // ポイント！
 if(ecolor.indexOf("#") !== -1) return ecolor; // Operaの可能性が高い
 if(d.uniqueID){ // IE向け
  color = element.createTextRange().queryCommandValue("ForeColor");
  color = ((color & 0x0000ff) << 16) | (color & 0x00ff00) | ((color & 0xff0000) >>> 16);
  return "#" + ("000000" + color.toString(16)).slice(-6);
 } else { // IE以外のブラウザ
  if(/webkit/i.test(navigator.userAgent)){ // Google Chrome, Safariで基本カラーなら
   var basicColors = {
    "aqua" : "#00ffff", "black" : "#000000", "blue" : "#0000ff", "fuchsia" : "#ff00ff", "gray" : "#808080", "green" : "#008000",
    "grey" : "#808080", "lime" : "#00ff00", "maroon" : "#800000", "navy" : "#000080", "olive" : "#808000", "orange" : "#ffa500",
    "purple" : "#800080", "red" : "#ff0000", "silver" : "#c0c0c0", "teal" : "#008080", "white" : "#ffffff", "yellow" : "#ffff00"
   }
   for (var col in basicColors){
    if(color.toLowerCase() === col) return basicColors[col];
   }
  }
  if(ecolor.indexOf("rgb") !== -1){ // RGB形式で色を返した！
   color = ecolor;
  } else color = getComputedStyle(element, null).getPropertyValue("color");
  return "#" + color.replace(/rgb¥((¥d+?),¥s*(¥d+?),¥s*(¥d+?)¥)/g, function(a, r, g, b){
   return ("000000" + ((+r) * 65536 + (+g) * 256 + (+b)).toString(16)).slice(-6);
  });
 }
};

　WebKit系の振る舞いが独特で、特別な処理が必要になりますが、いずれにせよ、DOMの改変を伴わなくて良いかなぁと(まぁcreateElementはしますが)。ちなみに、OperaでもgetComputedStyleは使えますが、FirefoxやWebKitがRGB値を返すのに対して、OperaはHEX値を返します。RGB値からのHEX値への変換は、いくつか方法があるでしょう。上では正規表現を用いています。逆にHEXからRGBへの変換も色々あると思います。

function HEXToRGB(hex){
 return hex.replace(/#?(¥w{2})(¥w{2})(¥w{2})/, function(a, r, g, b){ 
  return "rgb(" + parseInt(r, 16) + ", " + parseInt(g, 16) + ", " + parseInt(b, 16) + ")"}
 );
}

や

function HEXToRGB(hex){
 var color = parseInt(hex.replace("#", ""), 16);
 return "rgb(" + ((color >> 16) & 0xff) + ", " + ((color >> 8) & 0xff) + ", " + (color & 0xff) + ")";
}

などですかね。

　ついでなので、カラーキーワードからRGB値に変換する関数も挙げておきます。考え方は基本的に同じです。DOMの改変は必要ないです。

function ColorToRGB(color){
 var d = document, ecolor, element = d.createElement("button");
 element.style.color = color;
 element.style.display = "none";
 ecolor = element.style.color;
 if(ecolor.indexOf("rgb") !== -1) return ecolor; // WebKit系が一抜けする可能性あり。
 if(ecolor.indexOf("#") !== -1){ // OperaはHEX値を返す
  return ecolor.replace(/#?(¥w{2})(¥w{2})(¥w{2})/, function(a, r, g, b){ 
   return "rgb(" + parseInt(r, 16) + ", " + parseInt(g, 16) + ", " + parseInt(b, 16) + ")"}
  );
 }
 if(/webkit/i.test(navigator.userAgent)){ // WebKit系で、基本カラーの場合はRGB値を返さない
  var basicColors = {
   "aqua" : "rgb(0, 255, 255)", "black" : "rgb(0, 0, 0)", "blue" : "rgb(0, 0, 255)", "fuchsia" : "rgb(255, 0, 255)",
   "gray" : "rgb(128, 128, 128)", "green" : "rgb(0, 128, 0)", "grey" : "rgb(128, 128, 128)", "lime" : "rgb(0, 255, 0)",
   "maroon" : "rgb(128, 0, 0)", "navy" : "rgb(0, 0, 128)", "olive" : "rgb(128, 128, 0)", "orange" : "rgb(255, 165, 0)",
   "purple" : "rgb(128, 0, 128)", "red" : "rgb(255, 0, 0)", "silver" : "rgb(192, 192, 192)",
   "teal" : "rgb(0, 128, 128)", "white" : "rgb(255, 255, 255)", "yellow" : "rgb(255, 255, 0)"
  }
  for (var col in basicColors){
   if(color.toLowerCase() === col) return basicColors[col];
  }
 }
 if(d.uniqueID){ // IE用
  color = element.createTextRange().queryCommandValue("ForeColor");
  return "rgb(" + (color & 0xff) + ", " + ((color >> 8) & 0xff) + ", " + ((color >> 16) & 0xff) + ")";
 } else { // FirefoxはこれでRGB値を返す
  return getComputedStyle(element, null).getPropertyValue("color");
 }
}

　こんな感じですかねぇ。ファイルサイズが小さくなるなら、cornerplay.jsを書き換えても良いなぁ。

　ちなみに、圧縮したら920バイトになりました。