WP-Note Flexible2 v1.0.0 リリース

2015年4月13日 0 開発 , ,

先日の WordPress テーマ更新にあわせて WP-Note Flexible2 v1.0.0 を作成した。

以下、開発メモ。

外観

旧 WP-Note Flexible は背景を濃い色で塗りつぶしており、文字色を明るめにすることで視認性を確保していた。今回は薄いグレーを背景として文字色をいじらなくても済むようにしている。

大半のテーマは白などの明るめな背景に暗い文字という構成だろうから、この仕様を標準としたほうが汎用なはず。

開発スタイル

開発スタイルは先日の記事に書いた minimalflat2 と同様に gulp と Stylus で組み、Varying Vagrant Vagrants ( 以下 VVV )で動作確認した。先日の記事にも書いたが VVV の Vagrantfile で config.vm.synced_folder を設定すると開発用フォルダの変更が動作中の VVV 内フォルダに同期される。設定は以下のように複数、定義できる。

# My WordPress Themes and Plugins
config.vm.synced_folder "~/Documents/dev/web/app/wp-theme-minimalflat2/src", "/srv/www/wordpress-default/wp-content/themes/minimalflat2"
config.vm.synced_folder "~/Documents/dev/web/app/wp-note-flexible2/src", "/srv/www/wordpress-default/wp-content/plugins/wp-note-flexible2"

あとプラグイン開発してる途中で minimalflat2 のレイアウト崩れなどを見つけたため、そちらも修正。v1.0.1 としてリリースしておいた。

IcoMoon の衝突回避

先代テーマ minimalflat と旧 WP-Note Flexible ではアイコン フォントに Font Awesome を採用していた。どちらも CDN サイトがアクセスできなくなった時を考慮してフォントを同梱。そのため、これらが同時に実行されると Font Awesome が衝突する。

たまたま同バージョンの Font Awesome を参照していたからよかったものの、もしフォントの実体が異なる場合、想定外のアイコンを表示してしまう問題が発生していただろう。

なぜこの問題に気づいたのかというと、minimalflat2 と現行 WP-Note Flexible で IcoMoon を利用して衝突が起きたから。

Font Awesome と異なり、IcoMoon を利用するときは必要最小のアイコンだけ組み込むことが多い。そのため標準 CSS の icomoon という font-face を利用すると、それらが混在するページで衝突する。IcoMoon のグリフ割り当ては e600 から連番となるため、衝突が発生しやすい。

よって今回はアイコン関連の名前を独自にした。この設定は IcoMoon で Generate Font を選んだ時に表示される画面の Preferences から変更できる。Font Name を指定すると、font-family とフォント ファイルに反映される。Class Prefix はアイコンのクラス名における接頭語となる。

font-family は wpnf、クラス名は icon- ではなく wpnf-icon- を接頭語にした。minimalflat2 も同様に独自名を適用し、相互に衝突回避している。

今後 IcoMoon を利用するときは、はじめに独自名を設定する予定。

WP-Nicodo v1.2.0 リリース

2013年12月23日 0 開発 , , ,

WP-Nicodo v1.2.0 をリリースした。前回の更新が 2009/12/10 なので実に 4 年ぶりとなる。

WP-Nicodo は WordPress の記事へニコニコ動画のコンテンツを貼り付けるためのプラグインとなる。2009 年に PHP と WordPress の習作として開発した。当時はブログでニコニコ動画をいろいろ紹介してみようかな、と考えていたので拙いながらも根を入れて開発していたのだけど、ニコニコはサービス自体に豊富なメタデータがあるので意外に語ることが難しく、自分では使わなくなってしまった。

しかし 4 年も放置しているにも関わらず、いまだにダウンロードされている。また基本機能は動作しているもののいくつか気になるバグがあったので、利用してくれているユーザーに報いるべく重い腰 ( 私は三年寝太郎クラスの怠惰人間である ) をあげて修正してみた。対象となるバグは以下。

  1. 動作モードがテンプレートの時、再生数などが空欄になる
  2. 投稿画面のクイックタグ ツールバーにショートコード挿入ボタンが追加されない問題

1 は number_format 関数が原因。ニコニコ動画 API はメタデータを XML 形式で取得するのだが、その値をそのまま number_format に渡すとエラーになる。PHP 5.3 から型チェックが厳密になったそうだ。値を整数値にキャストして修正。

2 はクイック タグのボタン追加方法を JavaScript の DOM 操作でおこなっている点が問題のようだ。現在は以下のように edButtons コレクションに対して edButton インスタンスを追加するようにするのが現在の形式らしい。

$( document ).ready(function($) {
    edButtons[ edButtons.length ] = new edButton( "ed_nicodo", "nicodo", "[nicodo]", "[/nicodo]", "n" );
});

プラグインは以下へ公開している。

WP-Note Flexible v1.0.0 Release

2013年11月17日 0 開発 , ,

WP-Note 互換の注釈機能を提供する WordPress プラグイン、WP-Note Flexible v1.0.0 をリリースした。

このブログでは記事へ注釈をいれるため WP-Note を利用していたのだが、このプラグインは Retina 対応しておらず開発も久しく停止している。MacBook Pro Retina を購入してからこの点がずっと気になっていた。そしていつか自前で Retina 対応した私家版を作成しようと考えていたのだが、ちょうど気分がのってきたので新規プラグインとして開発してみた。

いまのところ WordPress 公式へ申請する予定はないので、もし利用してみたいとか fork する場合は以下からどうぞ。

このプラグインで使用するショートコードは WP-Note 互換となっているため、WP-Note を無効にしてから WP-Note Flexible を有効にすると既存の記事を変更することなくそのまま移行できる。

はじめは WP-Note のコードをそのまま流用して CSS だけ変更しようと考えていたのだが、ショートコードを add_shortcode で登録するのではなくコンテンツ内から自前で検索 & 置換しているなど微妙な実装だったので新規に書き起こすことにした。

あと WP-Note の作者らしき人は GitHub アカウントを持っているようなので WP-Note のリポジトリがあれば fork するつもりだったけど見つからなかった。そのため元があることの明示は readme.txt への原作 URL 記載で対応した。