最近このブログの機能アップに費やす時間を増やしています。
色々と便利にしたいなとWP-AutoPagerizeプラグインを入れてみました。

これは元々FirefoxのGreaseMonkeyというアドオンの追加するユーザスクリプトで、検索結果やニュースページを見る際にページ遷移をせずにある一定のスクロールをした段階で、次のページの記事が追加されるという優れもの。

ただ、その上で問題になったのがsyntaxhighlighterプラグイン。
これはソースコードを見せる際に綺麗に整形してくれるプラグインです。

何が問題かというと、次ページ記事を読み込んで表示する際にソースコードがあった場合に、syntaxhighlighterの表示処理の動作をしてくれないというものでした。
そのため両方のプラグインの調整が必要になりました。

その調整のやり方を記載しておきます。

まずは、Autopagerが新しいページを読み込んだ際にsyntaxhighlighterの関数を呼び出すよう設定します。wp-autopagerize.jsはソースコードが圧縮されているので、15行目をコピペして貼り付けてOnline Beautifier for JavaScriptなどで綺麗に整形しなおしてもらいましょう。
50行目にソースコードを追加します。

wp-autopagerize.js

var o = function () {
  l.show();
  $.ajax({
    url: k,
    success: function (h) {
      if ($(pageRizeClassName, h).length > 0) {
        j++;
        c.before("<p id='page-" + j + "' class=\"pageNum txt75\"><a href='" + k + "'>" + j + "</a> ページ目</p>");
        k = $("p.pageNav a.next", h).length > 0 ? $("p.pageNav a.next", h).attr("href") : null;
        c.before($(pageRizeClassName, h).filter(function () {
          return ! $(this).hasClass("pageNav");
        }));
        m = b.scrollHeight;
        g();
        SyntaxHighlighter.highlight();//この行を追加
      }
      l.hide();
    },
    error: function () {
      l.hide();
    }
  });
};

これでJavascript側の修正は終了。続いてsyntaxhighlighterを修正します。

syntax_highlighter.php

function add_footer(){
	$enabled = false;
	foreach ($this->options as $key => $val) {if ($val[0]) {$enabled = true; break;}}
	if (!$enabled) return;

	$scripts  = "<script type=\"text/javascript\" src=\"{$this->plugin_url}js/shCore.js?ver={$this->plugin_ver}\"></script>\n";
	$scripts .= "<script type=\"text/javascript\" src=\"{$this->plugin_url}js/shBrushAll.js?ver={$this->plugin_ver}\"></script>\n";

/*
	// Bash / shell
	if (isset($this->options["bash"]) && $this->options["bash"][0])
		$scripts .= "<script type=\"text/javascript\" src=\"{$this->plugin_url}js/shBrushBash.js?ver={$this->plugin_ver}	

	(中略)

	elseif (isset($this->options["xslt"]) && $this->options["xslt"][0])
		$scripts .= "<script type=\"text/javascript\" src=\"{$this->plugin_url}js/shBrushXml.js?ver={$this->plugin_ver}\"></script>\n";
*/
	echo $scripts;

上記の修正は、syntaxhighlighterでは各プログラムソース毎にJavascriptファイルを持っていて、読み込んだ記事内で使っているプログラム表示用のJavascriptのうちどれを読み込むかを判定しています。
今回は判定を飛ばして、各プログラム用JSを一つのファイル「shBrushAll.js」にまとめてそれを読み込ませることで対応しています。

使用プラグイン
WP-AutoPagerizeプラグイン
syntaxhighlighterプラグイン

Popular Posts:

• jQuery ifによる要素の判定
• 一新。
• iframe等を使った子から親へイベントを渡す方法
• いつも忘れちゃうので…UNIXタイムスタンプの変換
• JSONデータの使い方

• 【注意】YSlowプラグインの挙動
• 携帯とiphone対応しました
• jQuery版画像プロテクションプラグイン をリリース！！
• jQuery – 制作現場で使えるプラグインあれこれ
• はてなブログのデータを移行しました。

ブログを携帯対応してみました。
WordPressって素晴らしい！プラグインで難なく対応出来ました。
このプラグインの手軽さは他のブログシステムだと得られないなぁ…と感動。

ちなみにWPtouchとKtai Styleというプラグインを入れて、オプション設定いじって完成。
一部携帯の方はヘッダ画像を出したいのでテンプレートファイルを調整していますが
作業自体は30分かかってません。

他のブログにはもう戻れない…

Popular Posts:

• jQuery ifによる要素の判定
• 一新。
• iframe等を使った子から親へイベントを渡す方法
• いつも忘れちゃうので…UNIXタイムスタンプの変換
• JSONデータの使い方

• AutoPagerizeとsyntaxhighlighterプラグインをWordPressで使う
• 【注意】YSlowプラグインの挙動
• はてなブログのデータを移行しました。
• ウェブの未来 – WISH2009
• WordPress MU 入れてみました。

1. 画像をJavascriptで表示させる事が出来るらしい。
2. URIデータスキームというのを使うらしい。

var data = "data:image/gif;base64,"+"BASE64データ";
document.write(data);

3. base64必須で上記のような記述をするらしい。
4. IE5～7ではURIデータスキームに対応していないらしいorz
5. しかし、IE8βではURIデータスキームに対応済み
6. IE5～7でも対応出来るようJavascriptで実現している人がいた!!
7. 上記を組み込めば、ImageProtecterも画像データ(透明gif)なしで実現可能!!

という結果に至りました。
そんなわけで時間見つけてバージョンアップ図ります。
とりあえずIE抜きでやってみようかな。

Popular Posts:

• jQuery ifによる要素の判定
• 一新。
• iframe等を使った子から親へイベントを渡す方法
• いつも忘れちゃうので…UNIXタイムスタンプの変換
• JSONデータの使い方

• JSONデータの使い方
• はてなブログのデータを移行しました。
• ゲーム
• アルバムAPIでのコンテナ上での制限など
• popenによるメール送信とPHPセーフモード

このプラグインと雑誌アエラの公式サイトで正式に採用しています。
一部コンテンツのみですが。

あくまで簡易的なものです。右クリックで画像保存のダウンロードをしても出来ないようにしているだけ。
スクリーンショット取ってまでする人には効果なし。そういう意味ではFLASHで作っても同じ事だと思う。何故かたまにFLASHだから大丈夫と思っている担当の人がまだいるみたい。

良い説得材料にはならないやもしれないけども、class指定だけで簡単に出来るから手間にもならずに実装出来る強みがあると思う。
将来的にはblank.gifなくとも出来るようにしたいなぁ…

皆さん使う機会あれば使ってくださいね！

Popular Posts:

• jQuery ifによる要素の判定
• 一新。
• iframe等を使った子から親へイベントを渡す方法
• いつも忘れちゃうので…UNIXタイムスタンプの変換
• JSONデータの使い方

• レスが付いたらスレッドを上に上げるSQL
• バランス
• mixiアプリの副産物 – ニコニコ動画API関連動画 抽出
• star ratingのいたずら防止
• web directions east 2008

Firefoxのプラグインの「YSlow｣が1カウント分を取っていたのでしたー。orz
「YSlow」プラグインはWEBサイトの表示の早さを測定するプラグインで
ブラウザの読み込みが終わった後、再度測定を始めるというものだった…
だから2回カウントしない時もあったわけで。。
うっかり忘れてたらはまりますね。これ。

サイト構築時などレスポンス見る際には重宝するんですけどね。
こまめにプラグインのオンオフは必要ですね；

ページのチューニングを助言してくれるFirefoxアドオンYSlow

Popular Posts:

• jQuery ifによる要素の判定
• 一新。
• iframe等を使った子から親へイベントを渡す方法
• いつも忘れちゃうので…UNIXタイムスタンプの変換
• JSONデータの使い方

• 携帯とiphone対応しました
• AutoPagerizeとsyntaxhighlighterプラグインをWordPressで使う
• jQuery – 制作現場で使えるプラグインあれこれ
• はてなブログのデータを移行しました。
• ImageProtecter公開ページを更新。