Colorkrew Blog

code { padding: 2px; background-color: #f4f4f4; color: #7f0055; font-weight: bold; border: solid 1px #ddd; } blockquote { margin-left: 1em; font-size: 12px; line-height: 17px; background-color: #fdfdfd; border: solid 1px #ccc; padding: 4px; font-style: normal; }

現在開発しているあるシステムで、最新のjQuery 1.9.1を導入して開発を行っていたところ、先月開発していたシステムでは動いていて、同じように実装したはずなのに動かないjQueryプラグインがあってハマりました。それがWordPressのコアに同梱されている「thickbox」でして、管理パネルでは動いて、テーマ側で動かないのは何故だろうと思って調べてみたところ、読み込んでいるコアのjQueryが1.8系と1.9系と差があった。もしや･･･と思って、jQuery 1.9系の仕様変更内容を調べてみたら、おっと、今までかなり重宝していたメソッドがなくなっているではありませんか。
将来的に削除されることは知っていたけど、使い勝手が良くて使っていた$.browser()と、何気に動的に生成されたDOMオブジェクトに対して適応性が低い$.bind()より汎用的に使えるため重宝していた$.live()などが削除されてしまったため、これらのメソッドを使っているjQueryプラグインではエラーが発生してしまうようになってしまいました。
･･･と言うことで、jQuery 1.9系での主な仕様変更をまとめてみた。

1. $.browser()が廃止1.3からサポート外に指定されてましたが、ついにメソッドが削除されてしまった･･･何気にお手軽にブラウザ判定できるので使い勝手良かったんだが･･･致し方ないですね。これからは、$.support()を使って判定式を組まないといかんです。

2. $.live()が廃止

   $.bind()の拡張版メソッドで、bindはjQueryやJavaScriptで動的に生成されたオブジェクトに対して処理をバインドできなかったのを可能にするメソッド。これも使い勝手が良くて重宝していたのだが･･･廃止されてしまった。今後は$.on()と$.off()を使えってことです。まぁ、バインドイベントのオン・オフを判り易く制御できるのでこちらの方が確かにスマートだ。

3. $.die()が廃止

   上記live関数を削除するメソッドです。liveがなければこちらも不要ということですね。

4. $.sub()が廃止

   プロパティとメソッドが自由に変更可能なコアjQueryオブジェクトのコピーを作成するメソッドです。プラグイン開発などで、コアを変更せずに、独自にjQueryコアを拡張する時などに使われていましたが、結構巨大なjQueryコア自体をコピーしてメモリ食いまくってまで作るプラグインもないだろう･･･という判断があったのかも。まぁ、プラグイン開発者以外にはあまり使わないメソッドだし、1.8系からこのメソッド自体がプラグイン化されたらしいので、廃止によるインパクトは低いかな。

5. $.toggle(fn1(),fn2(),[...fnN()])の廃止

   1.7系で非推奨化されてたメソッドです。指定のオブジェクトがクリックされる毎にfn1、fn2、･･･fnNと関数を実行して、fnN以降はfn1に戻るみたいな処理が書けるメソッドでした。まぁ、クリック毎にそこまで処理変えなきゃいかんUIってどうよ？って感じなので、廃止は妥当かな･･･と。あ、ちなみに、関数バインド型ではないイベントエフェクト型の$.toggle()は廃止されていません。

6. 他に記述順や処理内容が変更されたメソッド

   $.add()、$.before()、$.after()、$.addSelf()などなど細かいところが色々と変わっているようです。

たとえデバッカがあってステップ実行が出来ようとも、デバックログの手軽さは手放せません。Androidの場合、標準のLogクラスを使えば、その目的を達成できるのですが、できたらTagに、クラス名、メソッド名、行番号が出たら嬉しいと思う人が多いはず！

と思ってぐぐってみたら、実現している方がいました。

[

AndroidのLogCatのTagで「クラス名.メソッド名:行番号」と表示するには？

](http://kinsentansa.blogspot.jp/2012/06/androidlogcattag.html)

せっかくなんで、これを即使えるようにクラス化してみました。

[code lang=“java” light=“true”] package jp.fuga.hoge.android.app;

import java.util.regex.Pattern; import jp.fuga.hoge.android.app.BuildConfig; import android.util.Log;

/** * ログ出力クラス。
* ログを出力する場合には必ず本クラスを使用すること。
* リリース時には、デバックログを出力しないよう設定される。 * */ public class L {

/**
 * デバック用ログを出力する。 本番リリース時は出力されない。
 * 
 * @param msg 出力するメッセージ
 */
public static void d(String msg) {
    if (!BuildConfig.DEBUG) return;
    Log.d(getTag(), msg);
}

/**
 * エラー用ログを出力する。 <br>
 * catchの中や想定外の動作でログを出力する場合に使用すること。<br>
 * 本番リリース時も、起きたエラーを解析するために本ログは出力される想定。
 * 
 * @param msg 出力するメッセージ
 */
public static void e(String msg) {
    Log.e(getTag(), msg);
}

/**
 * 同上
 * 
 * @param msg
 * @param t
 */
public static void e(String msg, Throwable t) {
    Log.e(getTag(), msg, t);
}

/**
 * タグを生成する
 * 
 * @return className#methodName:line
 */
private static String getTag() {

    final StackTraceElement trace = Thread.currentThread().getStackTrace()[4];
    final String cla = trace.getClassName();
    Pattern pattern = Pattern.compile("[\\.]+");
    final String[] splitedStr = pattern.split(cla);
    final String simpleClass = splitedStr[splitedStr.length - 1];

    final String mthd = trace.getMethodName();
    final int line = trace.getLineNumber();
    final String tag = simpleClass + "#" + mthd + ":" + line;

    return tag;
}

}

電話番号って

[市外局番] - [市内局番] - [顧客番号]

みたいにハイフン２つで番号を区切る構造になっていますが

0312345678

みたいな、ハイフンが入っていない番号にハイフンを入れようと思うと、これが案外難しいです。

市外局番は、2桁の時もあれば、3桁、4桁の時もあるし、携帯は3桁だし、ちょっと自分でなんとかするのは手に余ります。

ウィキペディアの市外局番の項

こんな時は長いものにまかれましょう、という事で信頼できそうなとこが提供しているライブラリを活用です。
本家googleがライブラリを出してました。

libphonenumber

トップページ

ダウンロード

基本的には一番新しいものをダウンロードして、Android projectのlibsに放りこめば準備完了です。

※apkを作る時にエクスポートするライブラリにチェックを付けるのをお忘れなく。

使い方は極めて簡単。

[code lang=“java” light=“true”] /** * 数字が羅列された電話番号をハイフン付きの電話番号に変換する * @param incomingNumber * @return ハイフン付き電話番号 */ private String getFormattedPhoneNumber(String incomingNumber) { PhoneNumberUtil phoneUtil = PhoneNumberUtil.getInstance(); try { PhoneNumber pn = phoneUtil.parse(incomingNumber, “JP”); incomingNumber = phoneUtil.format(pn, PhoneNumberFormat.NATIONAL); } catch (NumberParseException e) { Log.e(“app tag”,“電話番号をフォーマットできませんでした”, e); } return incomingNumber; }[/code]

完全な備忘録です。<br　/> インラインフレーム内に読み込んだHTMLから新しいウィンドウにリンクを開きたい時、Aタグのtarget="_blank"やjQueryMobileのrel="external"、果てはJavaScriptのwindow.open()を使っても出来ない状態に陥った時は、IFRAME内の属性にsandbox="allow-scripts"がないかを疑ってみましょう。
HTML5で追加されたIFRAMEタグの新属性「sandbox」で「allow-scripts」を指定してしまうと、インラインフレーム内に読み込まれたコンテンツのJavaScriptの機能をかなり制限してしまいます。特にwindowオブジェクトが受ける影響は大きく、ブラウザのポップアップを伴う処理を完全に抑止してしまいます。
WEBセマンティック的にも、IFRAMEを使うときは内包されるコンテンツによって属性を正しく設定してあげる必要があるってことですね。

以前から、 WordPressCodexのデータベース構造のページが見づらくて、仕様も古くなっていたのが、ちょっと気になっていたので、自分でデータベース仕様書を書き直してみようかと思っていたところ、WordPressでシステム開発する業務が急激に増えて来て、特にマルチサイト系の仕組みを把握する必要もあって、WordPressのデータベース仕様書をチートシート的に書き起こしておかないとシステム設計がしづらいという状況になってきた。そこで、自分なりのデータベース仕様書（テーブル定義書）を書いてみた次第。

基本的には日本語版Codexと本家WordPress.orgのサイトを見ながら、実際のデータベース構造と見比べて書いてみたのだが、マルチサイト系のテーブル部分はまだちょっと不明なところが多いんだなこれが（特にwp_sitecategoriesテーブル…このテーブルってwp3.0以降ではドロップされてしまったのか？…みたいな）。

まぁ、一通り書き切ったので、ここに共有化しておこうかと。

• PDF形式：WordPress3.4.xDataBase (655KB)

バージョン：0.1

さて話は変わる（…ようでそうでもないのだ）が、今月12/11に新安定バージョンのWordPress3.5がリリースされたので、さっそく本デベラボも3.5へアップグレードしてみた。
管理パネルからの自動アップデートが上手く動作しなかった（パッケージデータを取得して展開している途中でタイムアウトしてしまう）ので、一旦アップグレードするのを躊躇したのだけど、PHP側の設定を見直すのは面倒だったので、最終的に手動でアップデートしてしまいました。アップデート後、今のところテーマやプラグインに不具合もなく動いているようだけど、管理パネルに常にWordPressの自動更新失敗のノーティフィケーションが出るようになってしまった…（大した影響はなさそうなので、そのうち直そうかと）。

そんなわけで、WPも3.5になったので、書き上げたデータベース仕様書と構成の突合せをしてみようと、バージョン3.5のデータベースを覗いてみた。
ざっと構造を見てみましたが、3.4.x → 3.5 でデータベースへの変更はなかった（マルチサイト側は突合せてませんが…）。

本記事が今年最後のデベラボの投稿になりそうだ。
それではみなさん、良いお年を。

WordPressを仕事で扱うことになったので、試しにいつも使っているWindowsPCに入れてみることにしました。

さてどうすれば動かせるのかと調べてみると、WordPressはPHPとMySQL、Apacheがあれば動くようで、WindowsPCではWebアプリを動かすのに必要なソフトウェアをひとまとめにした「XAMPP」というものをインストールして、それを利用してWordPressを実行できるようです。

というわけで、まずはXAMPPをインストールすることに。

そのサイト、いますぐスマホに最適化「GOMO」

dudamobile

DudaMobile（とGoogle）がスゴイサービスを作ってくれました。

「GoMo」はスマートフォンに最適化されていないWEBサイトを自動でスマートフォンサイトへ最適化してくれるASP型のサービスだ。特筆すべきはなんと一年間は無料で使えるフリーウェア（二年目以降は1,180円）だということ。
WEBサイトのURLを入力して、数分待つだけで、スマートフォンに最適化されたサイトが出来上がり、プレビューしながらレイアウトのテンプレートやカラーバリエーションなどが選べるうえに、ページ単位で個別にヘッダーやフッター、コンテンツ部分のスタイルシートやHTMLも修正できる。さらに新規コンテンツの追加やSEOの設定なども可能だ。ブログサイトの場合、ブログとして認識させるか一般サイトとして認識させるかによってテンプレートのバリエーションが変る。
何気に、スマートフォンサイト作成用のCMSと言えるぐらい機能が充実していて、作成したサイトはアカウント登録すると保存できたり、そのまま公開できる。

これでFlash→HTML5コンバート機能が付いていたらほぼ無敵のサービスだったかもしれないが、まだFlashをHTML5へコンバートする機能やECサイト等の高度な機能を持っているサイトには対応できていない。
それでも十分スゴイWEBサービスなので、特殊なことをやっていないWEBサイトやブログならこのツールだけで最適化は事足りてしまうのではないだろうか。
また、現行サイトのスマートフォン最適化を企図した時の、モックアップ開発や最適化後の外観プレビュー的なツールとしても重宝しそうなツールでもある。

PCサイトやフィーチャーフォンサイトをスマートフォンサイト化するASPツールは数あれど、無償でここまでの機能を提供されてしまうと、既存デベロッパーは苦しいだろうなぁ…。

商用サイトなどをWordPressで構築する場合、WEBアプリケーションサーバとデータベースサーバを切り離して、データベース側を二重化することが良くあります。単にデータベースへのアクセス負荷を分散させてサービスのパフォーマンスを向上させるためでもあり、もし障害が発生した場合にミラーリングしている副系ノードのデータベースから正系データベースを復旧させることができる意味でも、サービスとして最悪のケースである「データ消失」のリスクを軽減できるからです。
WordPressにはそういう正副ノードのミラーリングデータベース構成にも対応できる「HyperDB」というドロップインがあります。これを使うことで、データベースの更新はマスターデータベースのみに集約し、データベース参照はマスターとセカンダリに分散させるということができます。
（※ 「HyperDB」ドロップインによるデータベース二重化の方法は、QuickKnowLedge : MySQL HyperDB + Keepalivedを利用した、wordpress の負荷分散 などで詳しく説明されています。）

さて、この「HyperDB」を利用しているWordPressサイトで、WordPressのコア処理に依存しない形で、データベースアクセスの処理を独自拡張している場合に、問題が発生することがあります。
一体どういうケースかと言うと、WordPressのデータベース制御系のグローバル変数「$wpdb」をWordPressページ外で使う場合です。

例えば、WordPressの投稿からAjaxなどで直接独自に作成したPHPをコールし、そのPHP内でWordPressのデータベースへのアクセスを行う処理があるような場合です。このようなWordPressのプログラム群から独立した外部プログラムでデータベースアクセス用のグローバル変数「$wpdb」を利用する場合に、
[code lang=“php” light=“true”]require_once(’./wp-config.php’);[/code] …と、上記のように設定ファイルをインクルードしているケースだと「HyperDB」を有効化した途端に動かなくなります。

この場合、インクルードするファイルを設定ファイルからブログヘッダーに変更することで、正常化します。
[code lang=“php” light=“true”]require_once(’./wp-blog-header.php’);[/code]
特にインクルードファイルを変更してもパフォーマンスに変化が見られなかったため、結論的には、外部プログラムで「$wpdb」を利用する場合は「wp-blog-header.php」をインクルードしておくのが無難なようです。

自社サイトでiPhone向け動画を配信するにあたり、採用した手法です。

• 参考

HTTP Live Streaming(Encrypt)
ここが詳しいですが、暗号化するとうまく再生できないのでアレンジしています。

iPhone, iPad, iPod – HTTP Live Streaming (HLS) with free tools on Windows
エンコードのオプション等が参考になります。

• 方針

元動画
↓
mpeg2ts
↓
分割
↓
暗号化
↓
再生

• プラットフォーム

Ubuntu 12.04

ffmpeg は apt-get でインストール。

WordPressサイトを構築していて、インストール直後に通常アクセスはできるのに、ログインページからログインすると画面が真っ白になってログインできない症状に出くわしたので、その解決方法を備忘録として残しておこうかと。

Codexに上記のケーススタディが載っていたのだが、該当する原因や解決方法がなかったので、エラーログを確認してみた。
[code light=“true”] PHP Fatal error: Call to undefined function get_option() in /var/www/html/wp-admin/admin.php on line 32, referer: http://******/wp-login.php[/code] と、出ている。エラーでは管理画面の本体 admin.php にて get_option 関数が定義されていないと言っている。ちなみに、インストールしたWordPressのバージョンは3.4.1（2012年8月29日時点最新）である。

今度はマニュアルサイトで関数を確認すると get_option() は wp-includes/functions.php で定義されているとのこと。そこで、wp-admin/admin.php のソースを追ってみると、30行目で wp-load.php が require_once されていた。wp-load.php では、48行目で load.php が require_once されており、その後で wp_load_translations_early() がコールされている。
load.php の668行目で定義されている wp_load_translations_early の関数内で、該当の functions.php が require_once されているので、このインクルード処理前に return されてしまっている可能性があるのでは…と思い調査してみた。
だが、いくら変数をvar_dumpしてみてもわからずじまい…うぅむ、困った。

PHPからMicrosoft OfficeのExcelシートを操作できるフリーのライブラリとして有名な「PHPExcel」をWordPressに組み込むためのプラグインを作ってみました。

ちょうどWordPressで構築した自社のイントラサイトにて、アップロードされたエクセルシートをWEBから直接検索できないものかなぁと導入してみた「PHPExcel」が思いのほか使い勝手が良くて、これをWordPressの汎用プラグインにできれば色んなシーンで使えて有益なのでは…と思えたのがきっかけです。

今回、WordPressのプラグインを初めて作ったこともあって、中身は色々と粗いところが多いんですが…まぁ、まだバージョン0.1ですからと言うことでおいておきます。プラグインの機能としては単純でして、同梱している「PHPExcel（バージョン1.7.7）」をWordPressにインクルードしてくれるだけのブリッジプラグインです。さすがにそれだけだと能がないので、アップロードしたエクセルファイルやCSVファイルをCSVやらHTMLやらPDFなどに変換してリンクを表示するショートコードが使えるようにしてみました。今後はこのショートコード部分を拡張してWordPressでExcelシートを修正したり出力したりできるような機能を追加していければ…とか考えています。

なお、プラグインの設定で、PHPExcelライブラリを常に自動でインクルードしてどのページでもPHPExcelが使えるようにするか、ショートコードを利用する時だけとか任意でライブラリを読むかの設定ができるようにしてあります。実際のところPHPExcelは重いので、自動インクルードは切っておいて利用する時だけインクルードする方が無難かもしれません。インクルードだけするショートコードも登録しておけば良かったのだけど、現状は入ってません（次バージョンで入れます）。今のところ、投稿や固定ページなどでPHPコードを書いていく人向けのプラグインになっているので、もうちょっと汎用化しないと使いづらいですね（追々機能拡張していきます）。

WordPress Bridge PHPExcel プラグイン

• ZIP形式：wp-bridge-phpexcel.0.2.zip (11.6MB)

バージョン：0.2
動作確認：WordPress 3.4.1 / PHPExcel 1.7.7
ライセンス：GPLv2

PHPに何か値を受け渡して処理を行う時に、受け渡された値の存在チェックをしながらPHPの変数として定義し直すことは良くあります。でもそういうお決まりの処理を毎度書くのは何気に手間で、URLパラメータ名を変更するとまたその部分にも手を入れないといけなくなったりして面倒です。 そこで、どんなURLパラメータでもとりあえずそのパラメータ名を変数名として定義してしまえれば、変数定義の初期処理が楽になるし、モック版のPHP処理を書く時などはお手軽でかなり効率的かな…と思いました。

と言うわけで、PHPの可変変数を使ってURLパラメータをそのままPHP変数化してみます。

foreach($_REQUEST as $query => $value){
  ${$query} = (isset($value)) ? $value : '';
}

これで、どんなURLパラメータを受け取ってもそのパラメータ名を変数名としたPHP変数が定義されます。

例えば、上記コードを含んでいる「test.php」に「test.php?a=test」でアクセスした場合、「test.php」ではURLパラメータの「a」が変数「$a」として定義されます。同じように「test.php?a=test&b=1&c=0」でアクセスすれば「$a」「$b」「$c」がそれぞれ定義されます。「$_REQUEST」のグローバル変数を可変変数に展開しているので、GETメソッドでもPOSTメソッドでも大丈夫です。

なお、変数の定義状況は、

print_r(get_defined_vars());

で確認できます。

でもこの方法で公開用のアプリを作ってしまうと、受け取った値を素のまま展開しちゃうので、クロスサイトスクリプティングや各種インジェクションのセキュリティホール化する可能性が高いので、あくまでモック開発とかまでの利用にとどめておいた方が良いです。

YouTubeに追加された新編集機能「Face Blurring」（自動で人の顔にぼかしをいれてくれる機能）を試してみましたので、そのレビューを書いておきます。

所感としては「あまり精度が良くないなぁ」と。
ソースの動画が最適なものでなかったことも要因かもしれませんが…。まだ顔が認識できる程度のちょっと引いた映像や、手ぶれがちょっと多かったり速度のあるカメラのパン時には、ぼかしがかからないケースが多かったです。また、乳児の顔はほぼ認識してくれず、ぼかしがかかりませんでした。
ただ、思っていたよりもフィルター処理が早くて、精度さえ向上してくればかなり有用な機能になるのではないかとも思いました。昨今は肖像権や個人情報保護にセンシティブな風潮が強いので、このツールに関してはぜひ機能強化を図って欲しいところです。

[caption id=“attachment_370” align=“aligncenter”]

[/caption]

さて、自動「顔ぼかし」機能の使い方ですが、まずYouTubeにログインして「動画の管理」を行います(画面右上のボタン)。

[caption id=“attachment_371” align=“aligncenter”]

[/caption]

次に編集したい動画のサムネイル右下にある「編集」のプルダウンから「動画加工ツール」を選びます。

[caption id=“attachment_372” align=“aligncenter”]

[/caption]

そして、クイック編集タブのプレビュー動画エリアの下にある「追加オプション」のボタンを押すと、「すべての顔をぼかす」というツールメニューが開くので、そこの「適用」を押します。

[caption id=“attachment_369” align=“aligncenter”]

[/caption]

動画のプレビューが始まり、左側に元の動画、右側にぼかしが入った動画が同期再生されます。

結構簡単に編集が出来てしまいます。これで「特定の人物だけはぼかしを入れない」なんて拡張機能があったりするとかなり素敵なんですが、相当高度な顔認識処理が必要なので難しいでしょうね。

[caption id=“attachment_364” align=“alignleft” width=“320”]

[/caption]

自社のイントラをWordPressで再構築した際に、要望されたことのひとつに『サイドバーとして配置しているメニューのカテゴリー一覧に、カテゴリーごとに最新の投稿が含まれていたら「NEW」マークを表示して欲しい。』と言うのがありました。
そこで特定のカテゴリーを指定して、そのカテゴリーの投稿記事に最新のものが含まれていたらカテゴリー名の横に「NEW」マークを表示するというショートコードを作成してみましたのでここに共有しておきます。拡張機能としてカテゴリーの最新投稿数をカウントしてその件数を表示するということもできます（FaceBookのメニューなどで表示される最新未読アイコンみたいな感じの表示にすることもできます）。

ショートコードを色々探してみたのですが、何気にWordPressで記事の一覧リストの横に「NEW」を表示するみたいなショートコードは数多くあるのですが、どれも記事リストに対しての最新判定ばかりで、カテゴリーに対しての最新判定というショートコードはめぼしいのが見つからなかったので、自作することにしました。
参考にしたのは星野邦敏氏のWordPressコミュニティで紹介されていた「WordPressでNew!を表示するパターン別４つの方法」という記事。氏のサイトでは、WordPressの企業サイトならではの要望やニーズに対してのTIPSが紹介されていてとてもためになりました。

[php highlight=“2-37,38”] function addnew($attr, $content){ extract(shortcode_atts(array( ‘slug’ => ‘’, ’ttype’ => ‘pub’, ’term’ => 7, ‘vtype’ => ‘str’, ), $atts)); $today = date_i18n(‘U’); $ttype = ($ttype!=‘pub’) ? ‘mod’ : ‘pub’; $term = ($term!=7) ? intval($term) : 7; $vtype = ($vtype!=‘str’) ? ’num’ : ‘str’; $value = ($content!=’’) ? do_shortcode($content) : ’new’; global $post; $cats = get_category_by_slug($slug); if(!$cats){ return ‘’; }else{ $cat = $cats->term_id; if(!$cat) return ‘’; } $last_post_ids = array(); $lastposts = get_posts(‘category=’.$cat); foreach($lastposts as $lastpost) : $entry = ($ttype == ‘pub’) ? date_i18n(‘U’, strtotime($lastpost->post_date)) : date_i18n(‘U’, strtotime($lastpost->post_modified)); $interval = date(‘U’, ($today - $entry)) / (60 * 60 * 24); if(intval($term) > $interval){ $last_post_ids[] = $lastpost->ID; } endforeach; if(count($last_post_ids) > 0){ if($vtype == ‘str’){ $retstr = $value; }else{ $retstr = count($last_post_ids); } } wp_reset_query(); if($retstr != ‘’) return $retstr; } add_shortcode(‘addnew’, ‘addnew’); [/php]