ppBlog向けテーマチェッカー

category-icon

 こんにちは、martinです。ずっと前から、作らんとね-と思っていて、なかなか作らずにいたテーマチェッカーを作成してみました。ただし、バージョン1.7.6向けなので、クラス名とか変更されている部分もあります。

 ちなみにv1.7.6はまだリリースすらされていません。来週あたりでしょうか。とりあえず、チェックする点を挙げておくと、

  • ppBlogで必須のスタイルシートのクラス名をチェック。指定がない場合はピックアップ。
  • 同様に、各テーマディレクトリにあるべき必須の画像もチェック。
  • ppBlogには必須でないが、各テーマで指定している独自のクラス名を抽出。使っていない冗長なクラス指定を見つけやすく。

 どういう感じの出力になるかは、以下のリンクで確認出来ます。このサイトのテーマ:3paneをチェックした結果です。

 →http://p2b.jp/demo/checker-result.html

 なかなか悲惨なことになっていますが、足りないところが分かりやすくて良いですね(--)

 これを実際に使用するには、添付のptc.phpをブログ本体のindex.phpと同じディレクトリにアップして、ブログの方でログインした状態でアクセスすると、使用できます。ppBlogに認識されてるテーマがセレクトボックスに列挙されるので、調べたいテーマを選べば、後は結果が表示されますよ(多分)。

添付ファイル: ptc.phpattachedIcon 

— posted by martin at 02:16 am   commentComment [5]  pingTrackBack [0]

Cooliris(PicLens)用のMedia RSSを出力するモジュール

category-icon

 こんばんは、martinです。フォーラムの方で、画像ギャラリーのデータベースをMedia RSSLink として出力できれば、Cooliris(formerly PicLens)Link (クールアイリス?)を活用できますというご指摘があり、面白そうだったので実装してみました。

 かつてPicLensとして知られていたCoolirisですが、これは良いですね。IE6/7やFirefox,Safariといった主要なブラウザにはプラグインとして対応Link しています。Coolirisは、スライドショーを実現する外部スクリプトを用意してくれているので、プラグインが入っていないブラウザでも簡単にスライドショーを提供できます。具体的なデモは、小生のブログで見ることができます。 

 →http://martin.p2b.jp/gallery/Link  

Slide show powered by Cooliris」というリンクがあるので、それをクリックすれば、簡易スライドショーが始まります。もし、Coolirisプラグインがインストール済であれば、そのプラグインが立ち上がります。リッチなスライドショーを体験するために、是非ともプラグインを入れましょう。

Cooliris
Coolirisでのスクリーンショット。マウスホイールなどでグリグリ出来る。

 さて、ppBlogでの実装ですが、各エントリーに使われているJPEGファイルを画像データベースより抽出し、それを100枚ごとに分割し、Media RSSファイルを作成するようにしています。画像が370枚あれば、4つのMedia RSSファイルがfeedsディレクトリに作られるわけです。Coolirisは、RSSファイルのページリンクを提供しているので、シームレスに、この4つのRSSファイルを読み込み、展開してくれます。

 具体的な出力は、以下のような感じです(gallery3.rssLink の場合)。

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss xmlns:media="http://search.yahoo.com/mrss" version="2.0"
 xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<atom:icon>http://martin.p2b.jp/theme/3pane/Images/ImageGallery.png</atom:icon>
<atom:link rel="previous" href="http://martin.p2b.jp/feeds/gallery2.rss" />
<atom:link rel="next" href="http://martin.p2b.jp/feeds/gallery4.rss" />
<generator>ppBlog1.7.5</generator>
<title>ppBlog-generated Image Gallery</title>
<link>http://martin.p2b.jp/</link>
<description>Media RSS for Image Gallery</description>

 ページリンクは、<atom:link rel="previous" や <atom:link rel="next" で出力、また、各テーマディレクトリに、もしImageGallery.pngという画像があれば、それをCooliris用のカスタムアイコンと認識して、それようの出力もします。画像の高さは、26pxがおススメとのこと。

 これに続いて、各画像の情報がITEM要素として列挙されます。

<item>
 <title>Yvetot7-2008/06/25</title>
 <link>http://martin.p2b.jp/PIX/1214400950_Yvetot7.jpg</link>
 <guid>1214400950_Yvetot7.jpg</guid>
 <media:thumbnail url="http://martin.p2b.jp/PIX/s1/1214400950_Yvetot7.jpg" />
 <media:content url="http://martin.p2b.jp/PIX/1214400950_Yvetot7.jpg" type="image/jpeg" />
</item>

 ここにあるTITLE要素ですが、ここに日本語が入っていると、Coolirisがその要素を認識してくれないっぽいので英数字に限定しています。簡易スライドショーでは認識してくれるようですが。。

 このモジュールは、次回のアップデートで採用予定ですが、v1.7系使いの方は、試すことが出来ます。添付のadmin.phpを既存のもとの入れ替え(念のためもとのadmin.phpは別名保存しておきましょう)、modulesディレクトリに、新規にmrss.inc.phpをアップロード、またgallery.inc.phpは上書きします(これもバックアップを)。この状態で、「管理画面」→「各種ツール」に「MRSSの作成」というメニューが現れるので、それをクリックすると、最新の画像データベースを元にMedia RSSファイルが作成されます。

 ご指摘・アドバイス等あればお願いします。

添付ファイル: admin.phpattachedIcon  gallery.inc.phpattachedIcon  mrss.inc.phpattachedIcon 

— posted by martin at 10:32 am   commentComment [5]  pingTrackBack [0]

DocumentFragmentsの考察サイトの考察

 便利なので oParts.jsでも使っているdocument.createDocumentFragment()ですが、JavaScript EvangelistであるJohn Resig氏の先月のブログにDOM DocumentFragmentsLink というエントリーがあり、DocumentFragmentのパフォーマンスの良さを検証しています。でも、これって、随分昔にそふぃあさん(どんな人なのか知らないけれど、この方のサイトのコンテンツには目を見張るものがあって、よく覗いてました)が、通ってきた道なんだよなぁ。

 →DocumentFragmentの考察Link

 

— posted by martin at 06:43 am   commentComment [0]  pingTrackBack [0]

 

しぃペインターとPHPによる画像投稿処理

category-icon

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

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

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

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

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

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

 基本的には、これがすべてです。php://input は、POSTの生データの読み込みを許可するプロトコルで、これとfile_get_contents関数Link とを組み合わせるだけですね。まずこのやり方でトライして、で、駄目だったら $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); // ファイルサイズ情報は必ず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'); // 書き込み失敗!

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

— posted by martin at 03:56 am   commentComment [0]  pingTrackBack [0]

チェックボックスを一度に複数選択したい

category-icon

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

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

shot1
開発版ですよ

 チェックボックスをチェックする操作というのは、数が少ない内は良いけど、数が多くなるとマウスで逐一クリックしていくのが億劫になります。なので、シフトキー(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 EventsLink

 もはや、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 DelegationGを 活用しています。上のデモでも、チェックボックス1つひとつにイベントを登録していくのではなくて、クリックされた要素がチェックボックスであれば・・・、という捉え方をしています。イベントは、バブリング(伝達)していくものなので、最上位要素でモニターして、そのターゲットさえ掴めれば良いというわけです。

 Event Delegation versus Event HandlingLink  

— posted by martin at 06:34 am   commentComment [0]  pingTrackBack [0]

T: Y: ALL: Online:
Created in 0.0207 sec.
prev
2008.8
next
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31