Category Archives: 自作アプリ

ソースコードをハイライト表示するプラグインを作成

WordPress用にソースコードをハイライト表示するプラグインを作成した。 コードのハイライト表示について function wp_sh_setting_link( $links, $file ){ static $this_plugin; if ( ! $this_plugin ) $this_plugin = plugin_basename(__FILE__); if ( $file == $this_plugin ){ $settings_link = '<a href="options-general.php?page=wp-syntaxhighlighter-options">'.__('Settings', 'wp_sh').'</a>'; array_unshift( $links, $settings_link ); }  return $links; } 「WP SyntaxHighlighter」という名称で現在、公開中である。 最新の「WP SyntaxHighlighter」をダウンロード 作成したと言っても「SyntaxHighlighter」というJavaスクリプトで記述されたライブラリを利用しているだけで、コアの処理は「SyntaxHighlighter」ライブラリ任せである。 同様の「SyntaxHighlighter」ライブラリを利用するプラグインは、数多く公開されているが、新しいバージョンのライブラリを搭載し、比較的、有名なプラグインとなると、 SyntaxHighlighter Evolved Syntax Highlighter for WordPress あたりに限られるだろう。 「SyntaxHighlighter」ライブラリ、本来の仕様では「<pre>」や「<script>」タグを使って、ハイライト表示させるコードを指定するようになっているが、上の2つのプラグインは、ショートコードで指定する方式を採用している。 WordPressのビジュアルエディターでは、「<pre>」タグはともかく、「<script>」タグは簡単に入力する手段がなく、むしろタグではないショートコードの方が扱いやすい。 そのような理由もあり、WordPressでは、この手のプラグインの多くが、ショートコード採用している。 しかし、私が作成したプラグインでは、「<pre>」タグで指定する方式を採用した。 この方法ならば、ショートコードに関する処理を記述する必要もなく、処理の大部分を「SyntaxHighlighter」ライブラリに依存でき、プラグインの記述も大幅に楽になる。 「<pre>」タグに拘る理由としては、このような消極的な理由の他に、タグで指定した方が、後々都合が良いという積極的な理由もある。 例えば、ソースコードのハイライト表示を使わなくなり、プラグインを無効化した場合でも、過去の投稿の中のコードも、一応は表示されるし、スタイルシートでレイアウトすることも可能だ。 「<pre>」タグを使う場合の問題は、ビジュアルエディターからどのように「<pre>」タグを入力するかと言う点だが、標準での唯一の方法が「整形済み」を使う方法である。 「整形済み」に指定したコードは、自動的にエスケープされ、その点は都合も良いのだが、何分「<pre>」で囲まれるだで、calss属性の指定が要求される「SyntaxHighlighter」ライブラリには不都合である。 かと言って、一々、HTMLエディターに移動してclass属性を入力するのも馬鹿、馬鹿しい。 そこで、この問題を解決するために「SyntaxHighlighter TinyMCE Button」というプラグインを作成した。 最新の「SyntaxHighlighter TinyMCE Button」をダウンロード 「SyntaxHighlighter TinyMCE Button」は、ビジュアルエディターに「<pre>」を入力するためのボタンを追加する。 と言っても「CodeColorer TinyMCE Button」を少し弄っただけだが、独自の機能も実装している。 ビジュアルエディタの欠点の1つが、タブによるインデントが無効化されることだが、このプラグインの機能を使えば、一旦「<pre>」タグで囲んでしまえば、「<pre>」タグで囲まれたソースコードの部分は、タブによるインデントが可能となる。 本当は、ビジュアルエディターにソースコードをペーストした瞬間にタブが無効化される問題を解決したかったのだが、これは実現出来なかった。 少なくとも、このプラグインでは、後でタブによる整形が可能となっている。 「<pre>」タグを入力すると言っても、けして汎用のものではなく、「SyntaxHighlighter」ライブラリに、完全に特化している。 そのため、ボタンをクリックした際に、言語の指定などが必要になる。 最初は、殆どのパラメーター設定が可能な、もっと複雑なものを作成したのだが、最終的にシンプルなものに落ち着いた。 行番号の表示/非表示の選択も要らないかもしれないと思っている。 「SyntaxHighlighter TinyMCE Button」は、「WP SyntaxHighlighter」から独立したプラグインとなっているが、汎用的に「SyntaxHighlighter」ライブラリを採用するプラグインで使えるかと言えば、微妙かもしれない。 将来的に「WP SyntaxHighlighter」に実装してしまう可能性も高い。 「SyntaxHighlighter」ライブラリでは、各言語に対応した「ブラシ(言語定義ファイル)」を読み込む必要があるが、この制御をプラグイン側で動的に行なっている場合も少なくない。 ちなみに私のプラグインでは、動的な「ブラシ(言語定義ファイル)」の読み込みを「SyntaxHighlighter」ライブラリに依存している。 そのようなプラグインでは、ショートコードのみを認識してる場合が多いので、「<pre>」ダグで書いても対応する「ブラシ(言語定義ファイル)」読み込まれないかもしれない。 全ての「ブラシ(言語定義ファイル)」を予め読み込むか、「SyntaxHighlighter」ライブラリの動的読み込み機能に依存してる、または機能として残しているプラグインなら「SyntaxHighlighter TinyMCE Button」は役立つだろう。 ちなみに「SyntaxHighlighter Evolved」との組み合わせなら、「SyntaxHighlighter Evolved」側の設定によっては機能するが、「Syntax Highlighter for WordPress」との組み合わせでは、「SyntaxHighlighter TinyMCE Button」は役に立たない。

Posted in WordPress, ネット・PC, 自作アプリ | Tagged , , | Leave a comment

EZ zenbackのバグと修正バージョン「Ver.1.1」

ダウンロードして頂いた方には、大変、申し訳ないが、既にアナウンスしている通り、「EZ zenback Ver.1.0」は「zenbackタグ」の挿入に関して問題を抱えていた。 「zenbackタグ」は、「zenback」に対して、どこがタイトルを表し、どこが本文なのかを教えるタグだ。 タイトルと本文の場所を「zenback」が理解することで、逆に、関係のない要素は除外され、解析の精度が上がる。 「zenbackタグ」は、「zenback」の利用に不可欠という訳ではなく、タイトルが見出しとしてマークアップされており、本文にある程度ボリュームを持つ投稿なら「zenbackタグ」が無くとも、「zenback」にきちんと認識されるだろう。 とは言え「zenbackタグ」は無いよりもあった方が良い。 「一般的なテーマでは、投稿本文の直ぐ上にタイトルが表示されているが、「EZ zenback Ver.1.0」では、これを「zenbackタグ」でマークアップしようとしていた。 技術的な話をすれば、「the_title」というフィルターフックを利用して、タイトルの前後に「zenbackタグ」を挿入していたが、「the_title()」という関数は、投稿のタイトル以外の取得にも利用されており、メニューや前後の記事へのリンクなどにも「zenbackタグ」が挿入されてしまうバグが発生していた。 これでは、どれが正しいタイトルなのか分からなくなる。 そこで、今回のリリースでは、記事の上に表示されているタイトルをマークアップするのではなく、新たに「zenbackタグ」でマークアップされたタイトルを追加する仕様に変更した。 「zenback」専用にタイトルを設けるようなイメージになる。 具体的には、以下のようなタグが挿入される。 <span style=”display: none;”><!– zenback_title_begin –>EZ zenbackのバグと修正バージョン「Ver.1.1」<!– zenback_title_end –></span> この場合、 <span style=”display: none;”> としているので、追加したタイトルは、ブラウザ上では見えない。 より正確に言えば、ブラウザ上では、見えないのではなく、「存在しない物」として扱われるので、正しい解釈するブラウザであれば、レイアウト上も問題ないはずだ。 しかし、ソース上には確かに存在するので「zenback」は、これを認識する。 上記の記述でも、「zenback」に正しく認識されることは「zenback」の開発元である「シックス・アパート」にも確認済みであるので、この点は安心して欲しい。 個人的には、問題はないと考えているが、 style=’display:none;’ としている点から、SEO上の問題を懸念する方も少なくないと思うが、その場合は、設定画面で「zenbackタグを追加」を無効にして使って欲しい。 最も、SEOを意識されている方なら「zenbackタグ」など使わなくとも、「zenback」に問題なく認識されるブログを作っておられるだろう。 以上の通り、「Ver.1.0」にはバグがあるため、大変申し訳ないが、「Ver.1.1」へのバージョンアップをお願いしたい。 今回のバージョンアップは、バグ修正が目的だが、設定画面にも若干の修正を加えた。 バージョン1.1は、商標表示の不足ため公開を中止。最新版をダウンロードのこと。 最新の「EZ zenback」をダウンロード ・アップデートの仕方 1.WordPressの管理画面の「プラグイン」の項目で「EZ zenback」を停止する。 2.ダウンロードファイルを解凍し、「ez-zenback」フォルダごと「/wp-content/plugins」にアップロード、全てのファイルを上書きする。 3.WordPressの管理画面の「プラグイン」の項目で「EZ zenback」を有効化する。 ※設定は、バージョンアップ前のものが引き継がれる。 「Disqus Comment System for EZ zenback」を併用してる場合も、同様の手順。 なお、今回は「Disqus Comment System for EZ zenback」のアップデートはない。

Posted in WordPress, ネット・PC, 自作アプリ | Tagged , , , | Leave a comment

「zenback」をWordPressに導入するためのプラグインを作成

ブログパーツなどを追加するためにテーマのテンプレートを変更しているケースが少なくないのだが、テーマをアップデートすると加えた変更は、全て無に帰すため、テーマのアップデートのタイミングで必ず作業が発生する。 頻度は高くないが、これは結構、面倒である。 また、気軽にテーマを変更することも出来ない。 その原因の1つが「zenback」なのだが、「zenback」を導入をプラグインに任せることが出来れば、テンプレートを編集する必要がなくなる。 しかし、そのようなプラグインは、WordPressでは存在していないようなので、自作する事にし、作業を進めてきた。 根本的にPHPが分かっていない事もあるが、このプラグインの作成にはかなり苦労した。 しかも、結論から言えば、自身の要求は全て満たすことが出来なかった。 「zenback」の解析精度を高める「zenback」タグの追加は、WordPressにも比較的に簡単に実装できたが、問題は、「zenback」スクリプトコード本体の追加である。 「zenback」の表示位置としては、コメントの直ぐ上、または直ぐ下が適当だろうと考えたが、そこに追加する手段が見つからなかった。 コメントにどうにかして加えるしかないと考え、その方向で、試行錯誤していたところ「/wp-includes/comment-template.php」の中で「comment_form_after」、「comment_form_before」という、如何にも使えそうなフックを見つけ、調べたところ、ビンゴだった。 これらを使えば、コメント欄の前、または後ろに簡単に「zenback」を挿入できる。 この2つの関数のお陰で、大きく前進した。 そして誕生したWordPress用プラグインが「EZ zenback」である。 ダウンロード出来るように「EZ zenback」を公開したので、WordPressをお使いであれば、ぜひ、試して欲しい。 バージョン1.0は、商標表示の不足のため公開を中止。最新版をダウンロードのこと。 最新の「EZ zenback」をダウンロード しかし、まだ、大きな問題が残っていた。 「EZ zenback」の弱点は、標準のコメントシステムに依存している点である。 しかも、このブログでは、標準のコメントシステムではなく「DISQUS」を利用している。 従って、折角完成させた「EZ zenback」は、このブログでは使えない。 そこで「DISQUS」導入用のプラグイン「Disqus Comment System」を改造して「EZ zenback」に適合させることにした。 テーマの編集を避けるためのプラグイン化であったのに、今度は別のプラグインを弄ることになり、本末転倒である。 テーマの更新が早いか「Disqus Comment System」の更新が早いかで、今後の手間が決まる。 改造を加え「EZ zenback」に対応させた「Disqus Comment System」は、「Disqus Comment System for EZ zenback」の名称で公開した。 最新の「Disqus Comment System for EZ zenback」をダウンロード

Posted in WordPress, ネット・PC, 自作アプリ | Tagged , , , , , , | 4 Comments

WordPressにLightbox風プラグインを導入する

「Lightbox」をご存知だろうか? 画像をクリックすると「うにょーん」、「びよーん」と画像が飛び出してくるアレである。 言葉では、説明が難しいので、ともかく下の画像をクリックして欲しい。 ※焦りは禁物!ページが表示されていてもLightboxに必要なライブラリの読み込みが完了したとは限らない。画面の一番下にツールバーが表示されたタイミングならOK。 「あっ、見たことある。」と思われたのではないだろうか? 「Lightbox」は、本来、特定のツールを指す固有名詞なのだが、一般的にはこのような機能を「Lightbox」と言う。 現在は、本家の「Lightbox」の他、Lightbox風の機能を実現するライブラリが多数登場しているが、Lightbox風のクローンを含めて、単に「Lightbox」と呼ばれることが多い。 Lightbox風の機能は、JavaScriptライブラリ「JQuery」、「MooTools」、「Prototype」などのライブラリを利用して作られている。 これらのライブラリは、見た目にも、アクセサビリティ上も優れた機能をウェブページで実現する、所謂、AJAXに対応したライブラリだ。 「JQuery」、「MooTools」、「Prototype」などを利用して、Lightbox風の機能を実現するライブラリは、本家の「Lightbox」および「Lightbox2」の他、「Slimbox」、「Slimbox2」、「ThickBox」、「ColorBox」など多数存在している。 更に、WordPress用に、これらがプラグイン化して配布されているので、WordPressへの導入は難しくない。 様々な開発者がプラグイン化しているので、(相違はバージョンが違う程度で)同一のライブラリをベースにしたものが多数存在する。 私は、このブログに、Lightbox風の機能を導入したく、作業を進めていた。 有効化、無効化も簡単なプラグインとして導入するつもりだったため、導入は、直ぐに終わると思っていたが、この判断は甘く、実際は、かなり苦労した。 Lightbox風の機能を実現するプラグインの多くが、動作環境に神経質で、導入しても動かないケースが非常に多い。 特に「zenback」とは相性が良くないようだ。「zenback」を外すと、あっさり動いたものもあった。 加えて、私の画像の挿入の仕方が悪いのだが、既存の画像には、Lightbox風の機能が適応されない問題にも直面することになる。 結局、既存の画像にもLightbox風の機能を適応するためにプラグインを自作するはめになった。 以下、私が試したLightbox風の機能を実現するプラグインを紹介する。 同じような名称のものが混在しているので注意して欲しい。 ・Easy FancyBox 「Easy FancyBox 1.3.4.8」は、「jQuery」ベースの「FancyBox」をプラグイン化したもので、画像だけでなく、Flash、PDF、iFrame、YouTubeもサポートしている。 最初、設定項目がないと勘違いしたが、管理画面の「設定」 -> 「メディア」の中にあった。 流れるように飛び出してくる動きが特徴的だが、このブログでは、個別記事のページでフリーズしたようになり、閉じられない現象が発生した、詳しくは後の述べるが、「zenback」と競合しているのではないかと思われる。 ただし、「zenback」を外す気もなく、面倒なので検証はしていない。 ・WP Facebox Gallery(Facebox Gallery) 「jQuery」ベースの「WP Facebox Gallery 1.0.4」は、なかなか動作が軽快だ。 設定項目は無いが、自動的に動作に必要な属性を画像のリンクに追加してくれる。 細かい設定をしたい人には不向きだが、インストールして直ぐ使える利便性がある。 私のブログでも、特に難なく動作した。 ・FancyBox for WordPress 「FancyBox for WordPress 2.7.5」も「jQuery」ベースの「FancyBox」をプラグイン化したものなので、動作が流れるようで綺麗だ。 基本的には、「FancyBox」系のインターフェースだが、タイトルの表示方法が面白い。 設定項目が充実しており、他のプラグインとのコンフリクトを抑制する動作モードまで備えるのだが、画像リンクへの属性の自動追加が上手く機能していないように思われる。 手作業で属性を追加した場合でも、個別記事のページでは動作しなかった。 「zenback」が動いている個別記事での不具合となると、やはり、「zenback」のせいを疑ってしまう。 追記:設定画面の「Other」->「Load JavaScript in Footer」を有効にする事で、「zenback」が動作している個別記事でも、バージョン2.7.5は問題なく動作する事が分かった。 ・FancyBox Gallery 「FancyBox Gallery 0.3.2」も「jQuery」ベースの「FancyBox」が元のようなので、何か問題は出来るだろうと予想はしていたが、動作しなかった。 あるはずの設定画面が見当たらない。設定オプションには、開発上の「To Do」にも入っているので、無くて正解なのかもしれない。 属性の自動追加機能が備わっていないのか、属性も追加されない。 ・Fancyboxify 「Fancyboxify 1.1」も「FancyBox」がベースのようだ。 これまでの結果を見ても「jQuery」ベースの「FancyBox」系のプラグインは、運良く動作した場合でも、このブログとは、どうも相性が良くないようだが、やはり、個別記事のページでフリーズしたようになり、閉じられない現象が発生した。 「FancyBox」系は、「zenback」と相性が悪いのかもしれない。 これも設定画面が見当たらないが、属性の自動追加機能が備わっている。 ・Flexible Lightbox 「Flexible Lightbox 1.0.4」は、まず、属性の自動追加が上手く働いておらず、手作業で追加しても動作しなかった。 設定項目が表示されないと思ったら、画像リンクを追加する際に個別に設定する仕様になっている。 「ThickBox」ベースの「WP Thickbox Integration」も、同一の開発者によるプラグイン。 ・jQuery Colorbox 「jQuery Colorbox 3.8.3」は、「jQuery」ベースの「ColorBox」をプラグイン化したものだ。 これは、有効化しただけで、あっけなく動作した。 動作は軽快で、見た目も悪くない。 デフォルトのテーマのバックグラウンドは、単調なものではなく面白い。 多言語化されているが、日本語には未対応。 ・jQuery Lightbox 「jQuery Lightbox 0.16」は、すっきりしたデザインで表示され、バックグラウンドにもリンク表示する。開く際に、最後に、もわっとスクロールする動作が特徴的。 画像の上をオーバーマウスすると、ファイル名やボタンが表示される。 管理画面には、必要最低限の設定項目を備えるが、属性の自動追加機能を備えていない点が残念。 自作したプラグインで属性の自動追加機能を補って、暫く利用していた。 ちなみに「jQuery lightBox plugin」は、これとは別物。 ・Lightbox 2 「Lightbox 2 v.2.9.2」は、「Lightbox 2」をプラグイン化したもの。 人気のあるプラグインだが、残念ながら、このブログでは動作しなかった。 ・Lightbox Plus 「Lightbox Plus … 続きを読む →

Posted in WordPress, ネット・PC, 自作アプリ | Tagged , , , , , , , | 3 Comments