さて、本題です。結論から申し上げますと、僕のサイトの電子書籍を宣伝してくれた方には１冊売れるたびに50%以上を差し上げることにしました。要するに、アフィリエイト機能ってことですね。

各書籍ページにリンクが出ます（要ログイン）

詳しくは「ハムスターに水を」などの詳細ページをご覧下さい。1,000円以上を超えたら管理画面から申請していただくと、翌月10日に振り込みます。成果を眺めてニヤニヤするための管理画面もがんばって作りました。ヘッダーの「MENU」から飛べます。

下の方にはエリアチャートもあります

バグがあったらごめんなさい。

アフィリエイト機能開発の経緯

僕のサイトでは自ら電子書籍を売っていますが、まったく売れないので色々と方法を模索しています。で、以前Google Adwordsを試したことがありました。その際の成績が以下の通りです。2ヶ月ぐらい掲載していました。

Adwordsの成果

1回のクリックを40円で買ったことになります。結果だけ端的に申し上げると大赤字でした。

SEM（検索エンジンマーケティング）は単価が高くないとダメ

実はSEMの経験はあまりないので、もっと効果的なキーワードで出稿したり、ランディングページをカスタマイズしたり、できることは色々あるのですが、やったところで大した意味ないだろうなーという結論に至りました。

普通こういうクリック広告から来たユーザーのコンバージョン率（ページを見て買おうと思う確率）は1〜3%ぐらいで、かなり高いサイト（楽天の専門店とか）でも12%ぐらいだったような気がします。となると、ぼくのように電子書籍を数百円で売っている場合、Adwordsだと赤字が拡大する一方です。

実はSEOやSEMといった、「検索エンジンに対してコストを投下する広告」というものはある程度商品単価が高くないとダメということが言われています。一つの単価が安いにもかかわらずバンバン広告を打っているものはリピーターになるもの（ex. 健康食品）と言われています。

そういえば、Amazonは一時期「◯◯ならAmazon」という具合にあらゆるキーワードを買っていましたが（参考）、あれがずっと謎でした。「高橋文樹ならAmazon」とか出るんですね。ぼくはずっと「文庫１冊のために広告出したら損しちゃうんじゃないの」と思っていたのですが、Amazonの場合は「一度顧客になってくれた人はまたAmazonで◯◯円使う」ということがわかっているはずなので、広告費もそこから捻出しているのではないかと推察します。もちろん、大きな企業なのでGoogleとの契約も普通の出稿者とは異なるとは思いますが、アグリゲーターならではですね。僕のサイトの商品をすべて買ったとしても1,000円ぐらいなので、とても真似はできません。

Dropboxの事例を参考に

ファイル共有サービスにDropboxというのがあります。ここは有料サービスを展開しているのですが、あるインタビュー（URL失念）によれば、はじめAdwordsを使ってうまくいかなかったそうです。一人のユーザーを獲得するのに$400ぐらいかかっていたとか。そこでDropboxは「友達を一人紹介したら容量250MBプレゼント」というキャンペーンをはじめたそうです。TwitterとかやっているとDropboxを薦めるつぶやきを見ることがあるでしょう。

あのプロモーションは凄まじい成果を上げ、Dropboxに膨大な数のユーザーを与えたそうです。ユーザーが増えれば、有料サービスをやる人も増えますからね。ちなみに僕も有料ユーザーです。

本当は僕のサイトでもDropboxのようにお金以外の利便性を提供できたらいいのですが、僕には特にあげられるものがないので、お金をあげようと思いました。

好きな人ほど得をする

さて、コンテンツを収益化するにあたってよくあるのが「好きな人ほど金を払う」というプレミアムモデルです。信者モデルと言いかえてもいいかもしれません。最近の有料メルマガとかはこの信者モデルではありますが、僕にはたぶん向いていません。というのは、「好きな人ほどコストがかかる」のは変だなーと思うからです。好きな人ほど安くあがるというのが理想です。

このアフィリエイト機能の肝は面白いと思ってくれた読者が得をするという点です。もし僕の書いたものを面白いと思ってくれた人がブログでもTwitterでも紹介してくれれば、それを読んだ人は「面白そうだな」と思う可能性が高いでしょう。しかも、紹介してくれた人はお金まで入ってきます。50%なので、一作品自腹で買っても2人に売りつければタダです。

もちろん、「ほんとうは全然面白いと思っていないけれども売上を上げる人」も出てくるかもしれませんが、それはそれで特異な才能の持ち主ではあるので、別に構いません。また、ウルトラCとして「読んでいないのに人に買わせる」ということも可能ですが、優れた読み手はあたかもすべての本を読んだかのような顔をしているものなので、別にオッケーです。システムの仕様上、買わなくても宣伝できるようにしてあります。

料率は何%にすべきか？

今回は50%という料率を設定していますが、個人的には80%ぐらいでもいいと思っています。他に広告費としてさくべき対象も見当たらないので、作品が有名になるにつれて料率を下げていけばいいでしょう。

デジタル時代のコンテンツは価格変動が当たり前ですし、利益も変わります。なにかの間違いで大ブレイクを果たした場合に一番利益が出るようにすればいいのかなーと思います。

いずれにせよ、ここら辺は事例がないのでよくわかりません。トライ＆エラーの繰り返しですね。

おまけ1. 投稿者に対して還元できる機能も作った

この機能はWordPressのプラグインとして作っている（参考：俺の印税がこんない高いわけがない）のですが、投稿者に対しても還元できるようにしました。もしあなたがニュースサイトのようなものを作っていて、投稿者を募っている場合、利益を還元することができます。定期購読の利益分配はできないのですが、上で紹介したリンクのように投稿自体に値段を付けた場合はその投稿作成者が利益を得られます。

僕は無謀にも文学という歴史上マネタイズできていたことがほとんどない分野のものを売ろうとしていますが、料理レシピとか、ペットとか、セックスとか、健康とか、およそ多くの人が興味を持っている分野でそれなりに差別化できればビジネスにはなると思います。

おまけ2. 今後の予定

このプラグインですが、今後はこんな機能を予定しています。

• PayPal Digital Goodsに対応
• PayPal Adaptive Payment（定期購読の自動引き落とし）に対応
• ウォーターマーク（ePubとかPDFにメールアドレスなどのユーザー情報をon the flyでぶっ込む緩いDRM）

おまけ3. 法律的なこととか

「お金振り込みます」とか勝手に言っていますが、法律的にアウトだったらAmaoznギフト券に変わります。詳しい人がいたら教えてください。

おまけ4. 宣伝

ちなみに、最近破滅派の方でメタメタな時代の曖昧な私の文学というエッセーを書いています。電子化の進んだ時代におけるテキストについての考察を重ねたものです。文学とITに興味のある方はぜひ。

Related posts:

1. WordPressとFlashでブログ縦書き化計画(10)
2. WP tmkm Amazonを動くように修正
3. PayPalのWeb Paymetn StandardとExpress Checkoutの違いが理解できないあなたへ

1. 開発環境

開発ツールは最近Netbeansを使ってます。NetbeansはWordPressのルートフォルダーをプロジェクトに指定すると、関数が予測変換で呼び出せるようになります。グローバル関数なんて全部覚えていられないので、これは便利ですね。変なタイプミスをなくすためにも、予測変換機能は絶対使うようにした方がいいと思います。DreamWeaverもCS5ぐらいからこういう機能が実装されたように思います。

NetBeansの予測変換機能

$thisのコードヒント

いきなり余談ですが、以前はAptanaを使っていました。最近はPythonのお勉強をしていたり、モバイルアプリ作れるTitaniumとかもあるので、Aptanaの後継であるTitanium Studioもよく起動しますが、PHP書く時はNetbeansです。Netbeansに変えたのは$thisの型定義がどうしてもできなかったからです。

CodeIgniterとかCakePHPとかでビューファイルをいじくってるときに、$thisのメソッドを使いたいよーということがあると思います。そういう場合、Netbeansはビューファイルにこんな風に書いておくと、$thisの予測変換が使えるようになります。

/* @var $this My_View_Class */
$this-> //これでMy_View_Classのメソッドが出てくる

WordPressでも管理画面をバキバキ作っているときなんかは便利です。

2. 基本フォルダ配置

基本フォルダ配置

個別のテンプレートファイルについては割愛しますが、こんな感じです。フォルダの役割に付いて説明しておきます。

scripts

JSファイルを置いておくところ。別にフォルダ名はjsとかでもいいです。

compass

CSSファイルを置いておくところ。compassフレームワークを使いたいので、compassにしましたが、styleとかでもいいです。

functions

機能別にまとめたphpファイルを置いておくところ。

img

画像ファイルを置いておくところ。

widgets

ウィジェットを置いておくところ。普通はあんまり自作ウィジェットとか作らないかもしれませんが、一応。

他にも色々必要に応じてフォルダでわけておくといいんじゃないでしょうか。

3. style.cssは使わないで、はやりのSCSS

style.cssはテーマの必須ファイルですが、これは使いません。こんな感じでヘッダーだけ書いておきます。

/*
THEME NAME: Takahashi Fumiki
THEME URI: http://takahashifumiki.com
DESCRIPTION: Just Only for Takahashi Fumiki
VERSION: 2.0
AUTHOR: Takahashi_Fumiki
AUTHOR URI:http://takahashifumiki.com
*/

あとはSCSSとかを使います。別にLESSでもいいんですが、いずれにせよ保存しただけでコンパイルしてくれるソフトを別に入れておいた方が楽でしょう。

LESSはMac用のアプリがあるので、それを使いましょう。SCSSだとついこの間MoonGiftさんで紹介されていたFire.appというのを使うといいと思います。

Fire.appのインストール方法（Mac）

Fire.appはシェアウェアなのですが、なぜかGithubでソースが公開されているので自分で無料インストールが可能です。Macportsをインストールしたことのある人はすぐ入れられるので、やってみてください。ターミナルほとんど触ったことないし触りたくないという人は$14なので買った方がいいです。

さて、普段rvmとか使ってRails開発とかやってる人はFire.appのビルドというエントリーを参照すればできます。「はにゃ？　rvmってなあに？」という人は以下の通りにやってください。

インストールにはjrubyとrawrが必要なので入れます。ターミナルでインストールしてください。管理者権限が必要なので、su – root をするか、sudoをつけてください。

port install jruby
jruby -S gem install rawr
#ダウンロードフォルダに移動
cd ~/Downlods
#githubからクローン
git clone https://github.com/handlino/FireApp.git
cd FireApp
#binフォルダにあるbuild-all.shの2行目の先頭にjruby -Sをつけて実行
jruby -S rake rawr:bundle:all

これでFireApp/packages/osxにFireApp.appが作成されます。あとは普通のアプリケーションと同じなので、/Applicationsフォルダに移動して起動します。

Fire.appの使い方

SCSSの文法については僕も学び始めたばっかりなのでよく知りませんが、とにかくFireAppにフォルダを監視させると、そのフォルダ内のSCSSファイルを保存するたびにCSSをコンパイルしてくれます。NetbeansにはSCSS用のプラグインもあるので、普通にCSSを編集するようにSCSSを導入することができます。ただ、コンパイルはこのプラグインではなく、Fire.appに任せた方が良さそうです。コンパイルエラーが起きると教えてくれますし。

コンパイルエラーを教えてくれる

上で紹介したLESS.appも基本的な流れは同じだと思うので、好きな方を試してみてください。SCSSとLESSの比較記事も見つけました。はじめHAMLとかCoffeeScriptとかを見た時は正気の沙汰とは思えなかったですが、SCSSはいいですね。今後中間言語が当たり前になってくると思いますので、覚えておくといいかもしれません。

4. functions.phpは設定情報と読み込みだけ

よくWordPressのTIPS記事なんかに「functions.phpに以下のコードを書いてください」とありますが、functions.phpが増えすぎると困っちゃうので、基本は機能別にファイルをわけて、functionsフォルダに保存し、funcions.phpはそれを読み込むだけにします。

また、バージョン定数のようなものが決まっていると何かと便利なので、デバッグレベルとともにこれも記載しておきます。

//テーマ全体のバージョン
define('MY_THEME_VERSION', '1.0');

//デバッグ定数を決めておく
if($_SERVER['SERVER_NAME'] =='takahashifumiki.com'){
     define('MY_DEBUG_LEVEL', 0); //本番
}elseif($_SERVER['SERVER_NAME'] =='d.takahashifumiki.com'){
     define('MY_DEBUG_LEVEL', 1); //ステージング
}else{
     define('MY_DEBUG_LEVEL', 2); //ローカルとか
}

//機能別に分けたファイルを読み込む
get_template_part('functions/override');
get_template_part('functions/assets');
get_template_part('functions/override');
get_template_part('functions/admin');

これの何が便利かというと、後述するCSS・JSの読み込みとか、ログ系の関数ですね。var_dumpなんかはデバッグによく使うと思いますが、こんな関数を書いておくと、そのまま本番にアップしても問題ありません。

/**
 * 本番環境以外でvar_dump
 */
function var_d(){
     if(MY_DEBUG_LEVEL > 0){
          call_user_func_array('var_dump', func_get_args());
     }
}

他にも本番と開発環境で変えたい情報がある場合は、このデバッグ定数を使います。本番だけCDN使うからドメイン変えたいとか、色々あるでしょう。

分割する利点

functions.phpを分割する利点としては、他のテーマでも流用が利くということですね。たとえばブラウザ判別なんかはどのサイトでも使うと思いますが、browser.phpというファイルを用意しておいて、以下のような関数書いておくと便利です。

• IEをバージョン別に判定する関数
• スマートフォンか否かを判定する関数
• タブレットか否かを判定する関数
• Retinaディスプレイか否かを判定する関数
• 上記の関数を利用して、body_classにクラス名を追加するフィルター関数

これらをまとめておけば、他のサイトにコピペで済みます。

5. CSSとJSは必ずwp_enqueueで読み込む

CSSとJSは必ずWordPressの関数を使って読み込みます。主にキャッシュ対策と環境変化に対応するためです。

まともなWebサーバなら負荷を軽減するためにmod_expiresなどを使ってCSSやJSをブラウザにキャッシュさせるようになっていますが、ファイルを更新した場合は読み込むファイル名を変えないとキャッシュが残ってしまいます。「デザイン変更しました。ご確認ください」「変わってないですよ」「F5押してみてください」「あ、変わりましたね」「では、オッケーですね。請求書をお送りいたします」という会話はもしかしたら日常的に交わされているのかもしれませんが、普通のユーザーはF5押してブラウザキャッシュをクリアしないので、全然オッケーじゃありません。意味が分からないという人はmod_expiresなどでググってみてください。

wp_enqueue_scriptやwp_enqueue_styleはバージョン番号をURLに付与してくれるので、更新を本番に反映させるタイミングで上で紹介したバージョン定数を変えれば済みます。また、以前紹介したSSLありのWordPressだけど高速化したいからCloudFlareのCDNを無料で使うのように、サイト全体に対して設定を変更するようなハックのメリットが得られなくなってしまうので、出来る限りwp_enqueue_*で読み込むようにしましょう。詳しくはwp_enqueue_scriptのススメなどを参考にしてください。

まとめ

以上、手短ですが、もう銀行にいかないとしまっちゃうので終わりです。自作テーマを作るのは茨の道ですが、色々と発見も多いのでやってみましょう。

Related posts:

1. WordPressが重くなる理由わかった～結局さくらサーバ移転へ
2. ぼくのユーザーを守って〜Tips on WordPress + SSL〜
3. WordPressクラックされちゃった記念、2.8.4にアップデート

基本的にはPythonのNLTK(Natural Language Tool Kit)を使いながらお勉強していくのですが、この本の第七章でつまづいたので、シェアしておきます。ちなみに僕の環境はMac OS X 10.7.3でPythonはMacportsで入れた2.6、NLTKも同じくMacportsで入れました。

MegaMとか言われる

自然言語処理にまつわるアルゴリスムの紹介を読んで感心しつつひたすら写経していくのがこの本の読み方なのですが、普通に進めていると、第七章 7.3.3でエラーが発生。MegaMが入ってねーぞとか言われます。

===========================================================================
  NLTK was unable to find the megam executable!  Use config_megam() or
  set the MEGAM environment variable.

    >>> config_megam('/path/to/megam')

  For more information, on megam, see:
    <http://www.cs.utah.edu/~hal/megam/>
===========================================================================

MegaMってなんやねんと思って調べると、NLTKのページに小さく書いてあります。エントロピーを計算するときのライブラリのようですね。

MegaM: http://hal3.name/megam/megam_src.tgz (requires ocaml; edit Makefile to set WITHCLIBS to point to location of ocaml .h files; locate these using macports with port contents ocaml, install megam binary, e.g. to /usr/local/bin and set MEGAMHOME to point to this directory).

え、こんどはocaml（…おかむら？）が必要らしいです。言われるがまま、macportsでインストールします。

sudo port install ocaml
which ocaml
# /opt/local/bin/ocaml

ちょっと調べてみたところ、ocamlは「オーキャメル」と読むらしいです。

さて、言われるがままMakefileを編集します。./configureじゃない時点で僕はもうなにがなんだかわからないのですが、唯々諾々と従います。

cd ~/Applications
wget http://hal3.name/megam/megam_src.tgz
tar xzvf megam_src
cd megam_0.92
vim Makefile

NLTKのサイトに書いてある通り、WITHCLIBSをocamlのヘッダーファイルが入っているフォルダに直します。macportsで入れたやつは普通のUnix系とは変わってしまうので、変えた方が良さそうな奴を片っ端から変えます。

--- Makefile
-CAMLC = ocamlc -g
+CAMLC = /opt/local/bin/ocamlc -g
-CAMLOPT = ocamlopt -unsafe -ccopt -O4 -ccopt -ffast-math -inline 99999
+CAMLOPT = /opt/local/bin/ocamlopt -unsafe -ccopt -O4 -ccopt -ffast-math -inline 99999
-CAMLDEP = ocamldep
+CAMLDEP = /opt/local/bin/ocamldep
-CAMLLEX = ocamllex
+CAMLLEX = /opt/local/bin/ocamllex
-CAMLYACC = ocamlyacc
+CAMLYACC = /opt/local/bin/ocamlyacc
-WITHCLIBS =-I /usr/lib/ocaml/caml
+WITHCLIBS =-I /opt/local/lib/ocaml/caml

これでmakeします。

make
# clang: warning: argument unused during compilation: '-fno-defer-pop'
# clang: warning: argument unused during compilation: '-no-cpp-precomp'
# ld: library not found for -lstr
# clang: error: linker command failed with exit code 1 (use -v to see invocation)
# File "fastdot_c.c", line 1, characters 0-1:
# Error: Error while building custom runtime system
# make: *** [megam] Error 2

エラーが起きました。-lstrがないよと怒られています。Makefileの指定がおかしいのかと思ってWITHSTRの項目を直してみましたが、意味なし。

-WITHSTR = str.cma -cclib -lstr
+WITHSTR = /opt/local/lib/ocaml/str.cma --cclib -lstr

さんざんググった挙げ句、こんな記事に行き当たりました。最近、stackoverflowの問題解決率高いですねー。

The problem appears to be that this Makefile specifies which C compiler and libraries the OCaml compiler should use as its back-end, using the -cc and -cclib options. On most systems, it will work OK to just specify the standard C compiler as the back-end for OCaml. On Mac OS X, there are 32-bit/64-bit architectural complications. Since you can compile OCaml successfully without this Makefile, I’d suggest that the OCaml compiler already knows how to compile and link OCaml programs. So you might try just removing the -cc and -cclib options from the Makefile.

gcc ld: symbol(s) not found for architecture x86_64

要するに、ocamlのコンパイラocamlcは-cclibオプションで使うCライブラリを決めるんだけど、macの場合は32bitと64bit両方あるんで下手にオプション指定しないで、ocamlcに自動で読み込ませた方がいいよってことですね。

それでは、この人の言う通り、Makefile内の-cclibオプションを全部消します。

---Makefile
-WITHGRAPHICS = graphics.cma -cclib -lgraphics -cclib -L/usr/X11R6/lib -cclib -lX11
+WITHGRAPHICS =graphics.cma
-WITHUNIX = unix.cma -cclib  -lunix
+WITHUNIX =unix.cma
-WITHSTR = str.cma -cclib -lstr
+WITHSTR =str.cma
-WITHBIGARRAY = bigarray.cma -cclib -lbigarray
+WITHBIGARRAY =bigarray.cma
-WITHNUMS = nums.cma -cclib -lnums
+WITHNUMS =nums.cma
-WITHTHREADS = threads.cma -cclib -lthreads
+WITHTHREADS =threads.cma
-WITHDBM = dbm.cma -cclib -lmldbm -cclib -lndbm
+WITHDBM =dbm.cma

これでmakeします。

make

通りました。バイナリはどこにあるのかなーと思ったら、ダウンロードしたフォルダにありました。なので、これに対してシンボリックリンクを張ります。

#ユーザー名は自分のに変えてください
ln -s /Users/guy/Applications/megam_0.97/megam /Users/guy/bin/megam
which megam
#/Users/guy/bin/megam

これでmegamはインストールできたっぽいので、NLTKのプログラムに戻り、指示通りPython内で設定を行います。

nltk.config_megam('/Users/guy/bin/megam')

さて、これで動くようになったのですが、トレーニングさせてる間にエラーメッセージを吐き続けるんですよね……

chunker = ConsecutiveNPChunker(train_sents)
#optimizing with lambda = 0...
#optimizing with lambda = 0...
#optimizing with lambda = 0...
#これがずっと続く

ソースを追ってみましたが、わかりませんでした。同じエラーが起きている人はいるのですが、解決はしていないっぽいです。というわけで、大変尻切れトンボですみません。

自然言語処理を学んでいる感想

まだ途中なので一概には言えませんが、基本的には機械学習の一分野なので、統計解析を知っていないとどうしようもないなーという感じがします。なので、これが終わったら統計解析の勉強を本格的にやる必要がありますね。

ナイーブベイズとか、交差検定とか、色んなアルゴリスムが出てくるので、これまでのWebサイトを作るためのプログラミングとは違って骨太な感じがします。基本を知れば具体的にやりたいことも固まってくるんじゃないかなーと気長に構えて終わりにします。

Related posts:

1. Flashの低帯域ユーザ体験を再現するための低速サーバ構築 on Mac OS X
2. 特定のフォルダのPNG画像を全部最適化するMac用ドロップレット
3. Flex SDK 4のアップデートで色々エラー

用途

特定のフォルダ以下に存在するPNG画像を最適化する

必要構成

Mac OS X 10.7以上を使っていて、macports経由でoptiPNGをインストール済み（詳しくは上記エントリー参照）

使い方

OptiPNG.zipをダウンロードして解凍、中にあるOptiPNG.appをFinderのツールバーにドラッグ&ドロップします

OptiPNGをツールバーに追加

ツールバーにあるOptiPNGのアイコンの上に最適化したいPNG画像が含まれているフォルダをドラッグ&ドロップ

最適化したい画像フォルダをD&D

以上です。Growlに対応させようと思いましたが、めんどうだったのでやめました。

Automatorでできるこんなこと

このアプリ（というか、ドロップレット）はAutomatorで作りました。Automatorは結構便利で、色んなことで来ます。特にファイルのリストを取得するのが簡単なので、Unixコマンドを組み合せると色んなアプリがさくっと作れます。

意外と便利なAutomator

今回はPNGの最適化と組み合わせましたが、他にも色んなUnixコマンドと組み合せることができます。今回書いたワークフローは以下のようなものですが、他でも代替同じです。

1. Automatorを起動して新規アプリケーションを作成
2. フォルダの内容を取得を配置
3. Finder項目にフィルタを適用を配置し、拡張子pngでフィルタリング
4. Applescriptを実行を配置

これでApplescriptはファイルのリストを受け取ります。今回のアプリでは、ファイルリストのそれぞれに対して以下のシェルコマンドを発行しているだけです。

optipng $FILE_NAME

ただし、ApplescriptのファイルパスはPOSIXじゃなかったような気がするので、そこで一工夫必要です。また、シェルコマンドも環境変数が適用されないので、単純にoptipngとやっても、command not foundになってしまいます。以下のようにやるといいでしょう。

on run {input, parameters}
	--inputにファイルのリストが渡ってきます
	repeat with file_alias in input
		--ファイルのエイリアスをPOSIXパスに変換
		set file_path to (POSIX path of file_alias)
		--シェルコマンドを発行（ログインシェルではないので、コマンドは絶対パス）
		do shell script "/opt/local/bin/optipng " & file_path
	end repeat

	--通知本文を設定
	set notify_text to "処理が終わりました"

	--ダイアログ
	display dialog notify_text giving up after 2 buttons {"OK"} default button 1

	return input
end run

ポイントはコマンドをフルパスで書くことと、コマンドを発行する前にファイルパスを変換することでしょうか。

これを応用して do shell command 以下の部分を書き換えれば、色んなドロップレットが作れます。Webサイトを本番環境にデプロイする前にポチッと押すだけになります。

1. 特定のフォルダの.svnフォルダを全部削除する
2. 特定のフォルダのCSSやJSすべてをgzipやYUI CompressorやCSS compressorで圧縮する
3. QuickTimeやFFmpegを呼び出して動画の形式を変換する

そうえいば、3とかは昔仕事で作りましたね。泣きながらソフトバンク向けのH264ハイスペック動画を出力したのはいい想い出です。

もっとも、Unixコマンドをインストールしないといけないことに変わりはないので、「誰でも使える」という感じではないですね。もし「誰でも使える」ことを目指すのなら、時間をかけてCocoaで作り、必要なコマンドは全部バンドルして、AppStoreで売るのがいいと思います。

おまけ アイコン変えたい

同梱したアイコンは僕が作ったものですが、ダサいので変えたいという場合は以下の方法で。

1. OptiPNG.appを右クリックして、「パッケージの内容を表示」をクリック
2. ResourcesフォルダにあるAutomatorApplet.icnsをIconComposer.app（Xcodeをインストールするとついてくるはず）で開く
3. ドラッグ&ドロップで画像を配置していき、保存

注意点としては、アプリをAutomatorで編集してしまうとアイコンが元に戻っちゃうことでしょうか。

Related posts:

1. MooShellでJavascriptのコードをブログに貼って自慢する方法
2. Mac用テキストエディタの最高峰CotEditorを入力補完できるまで設定する
3. MacをLion(10.7)にしても挫けなかったけどカラーピッカーで挫けた

Never Let Me Go

先ほど拙作WordPressプラグインのNever Let Me Goをアップデートしたので、その際の作業ログです。基本的にはWordPressを知っていて、PHPとかJavascriptとかはまあわかるかなという人を対象にしています。それでは、レッツスタディ。かなり長いですよ。

成果物

Ajaxでユーザーを検索して、IDと名前の一覧を取得して表示、選択すると該当するユーザーIDをinputタグにセットします。

管理画面でのインクリメンタル検索

Ajaxを導入した経緯

Never Let Me Go（以下NLMG）はユーザーが自分で退会できるようにするプラグインなのですが（参考）、そのユーザーがコンテンツを作成していた場合、そのコンテンツは消えてしまいます。

Q&Aサイトのようなナレッジサイトを作っていた場合のように、コンテンツが消えちゃうと困るケースがでてきます。ユーザーからすると「自分の書いたものは自分のものなんだから、退会するときは消してほしい」という思いもあるでしょうが、掲示板などのスレッド形式のものは後からコンテンツがなくなると困っちゃいますよね。

で、NLMGはユーザーが退会する場合にコンテンツを特定のユーザーに割り当てる機能を付けることにしました。たとえば、「削除されたユーザー」というユーザーを作っておいて、退会した場合は退会者のコンテンツがすべて「削除されたユーザー」のものになるということですね。こうすればテーマをそれほどいじることなくコンテンツを残すことができます。投稿数ランキングなんかを作っている場合は、「削除されたユーザー」が一位になってしまうという問題がありますが、それぐらいは我慢してコーディングしてもらうことにします。

さて、こうなるとNLMGの設定ページで割当先のユーザーIDを指定する必要があるのですが、素直に考えるとプルダウンにするのが楽ですね。しかしながら、これはこれで問題があります。

ユーザーが3,000人いる場合を想定してもらえばわかると思うのですが、プルダウン（selectタグ）は100件ぐらいが限度で、それ以上になると自分が探しているものを見つけ出すのが困難です。また、3,000件も一気に出力すると、普通はPHPがタイムアウトを起こします。

<?php $users; //3,000件のデータが入った配列 ?>
<select name="users">
<?php foreach($users as $user): /*3,000回ループ*/?>
    <option value="<?php echo esc_attr($user->ID); ?>">
        <?php echo esc_html($user->display_name); ?>
    </option>
<?php endforeach; ?>
</select>

かといってわざわざ別に検索用ページを設けるのも大変なので、Ajax+インクリメンタル検索によって実装すれば、会員が10万人になっても速やかにユーザーIDが取得できるということにします。

Ajax != DHTML

たまに勘違いしている人がいるのですが、Ajaxというのは単にHTMLページが切り替わることではなく、ページ遷移することなく裏側でデータを取得しにいくことまで含んでいます。たとえばTwitterのタイムラインを取得するだけならJavascriptをちょろっと書けば動きますが、自分の作ったサイトのデータをAjaxで取得する場合、Javascriptを書くのはもちろん、DBからデータを引っこ抜いてJSONとかXMLに変換して出力しなければなりません。

一概に「Ajaxで更新されるUIを作った」といっても、データを取りにいく先がGoogleマップやTwitterなのか、自分のサイトなのかで負担はかなり違います。ここら辺をきちんと把握していないと痛い目を見ることがよくあります。

WordPressでAjaxをやるときの定石

WordPressでは管理画面がAjaxバキバキなので、このための機能が用意されています。基本的なやり方は以下の通りです。

1. wp_ajax_xxxというアクションフックに関数を登録する
2. POSTまたはGETでリクエストを受け取り、データを返す関数を作成する
3. エンドポイントに対してリクエストを発行し、結果を受け取るJSを作成する

これが基本です。

1. アクションフックを登録する

ではまずアクションフックの登録の仕方です。アクションフックの名前はwp_ajaxと自分で決めたアクション名を連結したものになります。今回はユーザー名とIDを検索するものなので、プラグイン接頭辞としてnlmg_という文字列を使い、wp_ajax_nlmg_user_searchとしましょう。

add_action('wp_ajax_nlmg_user_search', '_nlmg_user_search');

なお、WordPressのAjax機能は元々管理画面向けのものだったため、wp_ajax_xxxというフックはログインしたユーザーにしか有効になりません。ログインしていないユーザー向けにはwp_ajax_nopriv_xxxというフックも用意されているのですが、これはこれでログインしているユーザーには有効にならないという不思議な仕様になっているので、「ログインしているユーザーにもログインしていないユーザーにもAjax用のエンドポイントを用意したい」という場合は両方にフックを登録する必要があります。

add_action('wp_ajax_nlmg_user_search', '_nlmg_user_search');
add_action('wp_ajax_nopriv_nlmg_user_search', '_nlmg_user_search');

2. 登録した関数を作成する

さて、上でフックに登録した関数_my_user_searchの機能を作成します。今日日Ajaxで言葉通りにXMLを使うケースはあまりないので、JSONを出力するようにしましょう。

今回の仕様では、「検索クエリを受け取り、ユーザー一覧を返す」という関数を作ります。「検索クエリをスペースで区切ってAND検索」などという複雑な機能は面倒なので実装しません。ちょっと長いですが、一気に書きます。ポイントはJSONを出力したあと、dieかexitを使って必ずプログラムを終了させることです。

function _nlmg_user_search(){
	//配列の初期値
	$result = array(
		'status' => false,
		'total' => 0,
		'results' => array()
	);
	//ユーザーが管理者でクエリが設定されていたら
	if(current_user_can('manage_options') && isset($_POST['query'])){
		global $wpdb; //データベース接続オブジェクト
		$query = '%'.(string)$_POST['query'].'%';
		$sql = <<<EOS
			SELECT SQL_CALC_FOUND_ROWS ID, display_name FROM {$wpdb->users}
			WHERE user_login LIKE %s OR user_email LIKE %s OR display_name LIKE %s
			LIMIT 10
EOS;
		$result['results'] = $wpdb->get_results($wpdb->prepare($sql, $query, $query, $query), ARRAY_A);
		$result['total'] = (int)$wpdb->get_var("SELECT FOUND_ROWS()");
		$result['status'] = (boolean)$result['total'];
	}
	//PHPの配列をJSONに変換して出力
	header('Content-Type: application/json; charset=utf-8');
	echo json_encode($result);
	die();
}

これで、機能はできたのですが、どのURLにアクセスすればこのJSONが得られるのかを知っていないとJSが書けません。これを知っておきましょう。

wp_ajax_のエンドポイントはブログのURL/wp-admin/admin-ajax.phpです。ただし、フックに登録した関数を起動させるには、リクエストのactionパラメータにwp_ajax_の次に指定した文字列（この場合はnlmg_user_search）を指定しないといけません。また、検索を行うためにはクエリを指定する必要があるので、送信するべきデータはaction=nlmg_user_search&query=［検索したい語句］となります。

この時点でデータの取得がきちんと出来ているかどうかを確かめるためには、Firefox拡張とかChrome拡張とか、POSTを投げられる機能を持つものを使ってください。

3. データの取得を行うJSを作成する

まずはJSを読み込みます。今回はonload.jsというファイルを作成し、管理画面だけで読み込むようにします。JSには読み込みを確認するため、alertでも書いておいてください。

//onload.js
alert('読み込めたかな？');

//管理画面でJSを読み込むフックを登録
add_action( 'admin_enqueue_scripts', '_nlmg_enqueue_script' );

function _nlmg_enqueue_script(){
    wp_enqueue_script('nlmg-onload', "path/to/onload.js", array('jquery'));
}

さて、これでとりあえずJSの読みこみはできましたが、一つ問題があります。エンドポイントがブログのURL/wp-admin/admin-ajax.phpだということは書きましたが、これは開発環境（localhost）や本番環境で変わります。プラグインだとなおさら。これをJSにべた書きすることは難しいので、wp_localize_scriptという関数を使ってPHPから値を渡します。

function _nlmg_enqueue_script(){
    wp_enqueue_script('nlmg-onload', "path/to/onload.js", array('jquery'));
    wp_loalize_script('nlmg-onload', 'NLMG', array(
        'endpoint' => admin_url('admin-ajax.php'),
        'action' => 'nlmg_user_search'
    ));
}

これでNLMGというグローバルオブジェクトに値がアサインされます。

alert(NLMG.action);
// -> {String} 'nlmg_user_search'

やっと準備が出来ました。まずは試しに単純にAjaxを行うコードを書いてみます。

jQuery(document).ready(function($){
    $.post(NLMG.endpoint, {
        action: NLMG.action,
        query: 'テスト'
    }, function(response){
        console.log(response);
        // -> {Object}
    });
});

きちんとresponseが返ってきていたらオッケーです。

インクリメンタル検索の実装

それでは、インクリメンタル検索の実装をonload.jsにて行っていきます。ベースとなるHTMLはこんな感じにしましょう。

<label>
	<?php $this->e('User ID'); ?>
	<input type="text" class="small-text" id="nlmg_assign_to" name="nlmg_assign_to" />
</label>
<div class="inc-search-container">
	<input type="text" class="regular-text" id="user-inc-search" placeholder="検索してください" />
	<img class="loader toggle" src="<?php echo get_template_directory_uri(); ?>/assets/ajax-loader.gif" width="16" height="11" />
	<ul id="user-inc-search-result"></ul>
</div>

#nlmg_assign_toに文字が入力され、それが2文字以上だったら検索を実行し、その結果を#user-inc-search-result内にliタグで表示。さらに#user-inc-search-result内のリンクがクリックされたら、#nlmg_assign_toのvalueを設定します。また、Ajax検索中であることを示すGIF画像も追加しておきます。

インクリメンタル検索の遅延実行

キーボードのイベントを補足するのはkeyUpなのですが、日本語の場合は日本語変換モードがあるため、ブラウザ間の挙動もバラバラです。また、打った文字すべてで検索されるというのは負荷も高いですし、そもそもユーザーが意図していない可能性が高いです。「高橋」と入力する途中の「高h」で検索されたらうざいでしょう。WordPressのデフォルトタグ入力欄もちょっと挙動が変（漢字変換を確定させるとタグが決定してしまう）なので、日本語特有の問題といえます。

こうした問題に対処するため、イベント処理は下記のフローで行うことにします。

1. 入力イベントをすべて補足し、現在の文字数が2文字以上であるかをチェックする
2. 2文字以上だった場合は、現在の文字を保存する
3. 現在Ajaxリクエストを発生しているかどうかをチェックし、発生していなかったら0.5秒後に検索を行うようにする
4. Ajaxリクエストは発生していないが、カウントダウン中だった場合はカウントダウンをリセットする

これらすべてを実装すれば、「ユーザーが一通り検索語句を入力し終えたタイミングでAjaxリクエストが発生する」ようになります。

jQuery(document).ready(function($){
	var incSearch = {
		currentChar: '',
		timer: null,
		onloading: false,
		setUserId: function(e){
			e.preventDefault();
			$('#nlmg_assign_to').val($(this).attr('href').replace(/[^0-9]/, ''));
		},

		fire: function(){
			incSearch.onloading = true;
			$('.inc-search-container .loader').removeClass('toggle');
			$.post(NLMG.endpoint, {
				action: NLMG.action,
				query: incSearch.currentChar
			}, incSearch.result);
		},

		result: function(response){
			incSearch.onloading = false;
			incSearch.timer = null;
			$('.inc-search-container .loader').addClass('toggle');
			//Empty container
			var container = $('#user-inc-search-result');
			container.empty().css({
				display: 'block'
			});
			if(response.total > 0){
				container.append('<li class="no-result">' + NLMG.found.replace(/%%/, response.total) + '</li>');
				for(i = 0, l = response.results.length; i < l; i++){
					container.prepend('<a href="#' + response.results[i].ID + '">' + response.results[i].display_name + '</a>');
				}
				container.find('a').click(incSearch.setUserId).fadeIn();
			}else{
				container.append('<li class="no-result">' + NLMG.noResults + '</li>').fadeIn('fast', function(){
					setTimeout(function(){
						container.fadeOut();
					}, 2000);
				});
			}
		},

		clearResults: function(e){
			$(this).val('');
			$('#user-inc-search-result').fadeOut('fast', function(){
				$(this).css('display', 'none');
			});
		}
	};

	$('#user-inc-search').keyup(function(e){
		incSearch.currentChar = $(this).val();
		if(incSearch.currentChar.length > 2 && !incSearch.onloading){
			if(incSearch.timer){
				//Timer exists, reset
				clearTimeout(incSearch.timer);
			}
			//Enqueue AJAX search
			incSearch.timer = setTimeout(incSearch.fire, 500);
		}
	});

	$('#user-inc-search').blur(incSearch.clearResults);
});

ポイントとしては、処理の多くをincSearchというオブジェクトにまとめていることでしょうか。jQueryのthisスコープがよくわからないので、いつもこんな感じにしてます。お疲れさまでした。

Ajaxの便利な使い方

これはWordPressに限った話ではありませんし、僕自身試していない方法もあるですが、こんなところに使いどころがあるんじゃないかなと思っています。

スマートフォンサイト対策

スマートフォンは貧弱なネットワーク環境なので、コンテンツを丸っと読み込むと重いなーということがよくあります。コンテンツを一通り読んでもらった後にスクロール位置を判断しておすすめコンテンツやナビゲーションなどをAjaxで出すのはいいんじゃないでしょうか。

キャッシュ対策

最近はNginxとかでプロキシキャッシュを利用することがよくありますが、ユーザーがログインしている場合、これが使えません。ユーザーAとユーザーBの購入履歴ページが混ざっちゃったらヤバいですよね。そこで、ユーザー情報に関してはAjaxで読み込むようにしておけば、サイトの大部分にプロキシキャッシュを適用しつつ、ユーザー最適化されたコンテンツを出力できます。ちなみに高速化の本などを読むと、「AjaxリクエストもGETにしてキャッシュするようにしておけ」とか書いてありますね。

というわけで、一通り書いたのでここで終わります。試してみてください。

Related posts:

1. 一般ユーザーがバカと嘆くより早くWordPressポインターを出す
2. WordPressでデータベースを使ったプラグインを作成する
3. ソート考（WordPressの検索結果を絞り込み）

ユーザーというのは思いもよらない使い方をするもので、誰でも登録できるようにすると、とんでもないことが起きたりします。また、新しい機能を追加しても、ナビゲーションバーを発見してもらえなかったりして、「使われない」という悲しい事態に陥ります。

こういうことがあると、管理者としては「これだからユーザーってやつは！」と絶望してしまいがちですが、「管理者がWordPressの管理画面を見慣れているだけで、ほとんどの人にとってはそうではない」という専門家にありがちなジレンマが起きているだけともいえます。

とはいえ、Twitterのようにドシンプルにするのも難しいので、都度ユーザーに教えるようなのがあると便利ですね……と思ったら、WordPress 3.3からそういう機能が実装されていました。このやり方を紹介します。

WordPress 3.3から加わった新機能ポインター

ポインターの出し方

WordPress 3.3にアップグレードした方は、なにやら青いツールバーが出てきて、ポチッと押すという消えたという経験をお持ちだと思います。これは3.3の新機能であるポインターというもので、プラグインやテーマから呼び出すことができます。任意の要素を指定することができ、メッセージも選べます。こいつは便利ですね！

これを説明するために、オリジナルのプラグイン「Mark Zuckerberg」というの15分ぐらいかけて作りました。管理画面の「ユーザー」の下に「ザッカーバーグ」というリンクが表れ、そのリンクをクリックするとザッカーバーグの名言が書いてあるという、ただそれだけのプラグインです。画像はザッカーバーグのFacebookページから拝借しました。

このプラグインの問題点は有効にしただけだと、なにが起きているのかわからないという点です。管理画面のサブナビゲーション下層メニューは普段隠れていますからね。

設定しないと使えないプラグイン（Twitter IDを入力しないと動かないとか）を作っているとたまにあるのが、「プラグインを有効にしたんだけど動きません！」という問い合わせです。僕なんかはわりと「何か設定しないといけないのかな？」とか思うタイプなのですが、そうではない人も結構いるようです。こんなとき、「ここで設定してね！」というメッセージを出しておけば、プラグイン作者もめんどくさい問い合わせが来なくて幸せ、ユーザーもさくさく使えて幸せという、「手と手を合わせなくても幸せ」状態です。

1. JSとCSSを読み込ませる

なにはともあれ、JSとCSSを使うので、それを読み込みます。

/**
 * 管理画面にページを追加するフック
 */
function _zuck_admin_menu(){
    //ポインタ用JSとCSSを管理画面に追加するフックを登録
    add_action('admin_print_scripts', '_zuck_scripts');
    add_action('admin_print_styles', '_zuck_styles');
}
add_action('admin_menu', '_zuck_admin_menu');

/**
 * 管理画面でJSを読み込む
 */
function _zuck_scripts(){
    //自分が作ったJS pointer.jsを読み込む。
    //jqueryとwp-pointerに依存することを明示すれば、
    //勝手に読み込んでくれます。詳しくは以下を参照
    //http://codex.wordpress.org/Function_Reference/wp_enqueue_script
    wp_enqueue_script('zuck-pointer', plugin_dir_url(__FILE__).'pointer.js', array('jquery', 'wp-pointer'), 1.0);
}

/**
 * 管理画面でCSSを読み込む
 */
function _zuck_styles(){
    //これだけで登録済みのポインター用CSSが読み込まれます。
    wp_enqueue_style( 'wp-pointer' );
}

さて、上の関数でCSSとJSが読み込まれます。この場合、自作のpointer.jsをこんな風にします。

jQuery(document).ready(function($){
    $('.wp-submenu-wrap a[href*=zuckerberg]').pointer({
        content: '<h3>新しいユーザーの登録</h3><p>I\'m CEO, Bitch!</p>',
        close: function(){
            //閉じるが押された時のコールバック
	}).pointer('open');
});

「$(element).pointer(option).pointer(‘open’)って変じゃね？」と思いますが（$(elm).pointer(opt).open()じゃないのか）、まあいいでしょう。これでポインターがjQueryセレクタで指定した要素の近くに表示され、ザッカーバーグの名刺に書いてあるという I’m CEO, Bitch! が表示されます。

2. ユーザーの「非表示にする」という選択を覚えておく

表示するだけならどうってことないのですが、ここからがキモです。ユーザーが一度閉じるを押したら、おそらく「わかったよ」という意味であり、毎回これが表示されたらうざったいでしょう。そこで、「非表示にする」が押されたらそれを保存しておくようにします。

このためには、まず設定を保存しなくてはなりません。幸い、そのための方法が用意されています。JSのコールバック関数にこんなのを書きます。

jQuery(document).ready(function($){
    $('.wp-submenu-wrap a[href*=zuckerberg]').pointer({
        content: '<h3>新しいユーザーの登録</h3><p>I\'m CEO, Bitch!</p>',
        close: function(){
            //閉じるが押された時のコールバック
            $.post('/wp-admin/admin-ajax.php', {
                action: 'dismiss-wp-pointer',
                pointer: 'zuckerberg_pointer'
            });
	}).pointer('open');
});

これでポインタが閉じると同時にAjaxで「zuckerberg_pointerは非表示」という設定が保存されました。具体的には、dismissed_wp_pointersというユーザーメタにカンマ区切り形式で格納されています。今度は読み込む時の設定をちょっといじりしょう。

function _zuck_admin_menu(){
    //非表示設定のポインタ名を取得し、配列に変換
    $dismissed = explode(',', get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true ));
    //非表示設定されていないときだけポインタを表示
    if(false === array_search('zuckerberg_pointer', $dissmissed)){
        //ポインタ用JSとCSSを管理画面に追加するフックを登録
        add_action('admin_print_scripts', '_zuck_scripts');
        add_action('admin_print_styles', '_zuck_styles');
    }
}

これで「非表示にする」をクリックすると、二度と表示されないようになります。お疲れさまでした。本当はJSとPHPにまたがって定数を記入していたり、AJAXのエンドポイントをJSに直書きにしていたりするのが気持ち悪いのですが、説明するのがめんどくさいのであとはZipをダウンロードしてください。こっちはもうちょっとスマートになってます。

ポインターのもっといい使い方

これまで説明した内容でもいいかなーとは思うのですが、なんらかの手順に則って出すのも便利そうです。たとえば、WordPressの投稿画面に生まれて始めて入った人に対して、こんな風に順番で出すのはどうでしょうか。

1. これはタイトルだよ！　いくらなんでもタイトルなしはまずいから絶対入力してね！
2. これは本文！　ビジュアルエディターというボタンがいっぱいあるだろ？　押すと何かが起きるよ！　お楽しみに！
3. ここはカテゴリー！　かならずどれか一つのカテゴリーを決めてね！　君のコンテンツがどんなものなのか、ユーザーは知りたがっているよ！
4. これが公開ボタン！　準備ができたら押してね！　押した瞬間に君のコンテンツは世界中の人に読まれるよ！　準備はいいかな？

こんな感じで連続で出し、最後の5個目が非表示にされたら、「今後しない」という設定を保存するという案配です。これでチュートリアルっぽい管理画面になりますね。ソースはめんどくさいので、書きませんが。

余談：ユーザビリティ向上にはゲームを参考にするといいっぽい

最近破滅派を誰でも登録できるようにして「あ、そこがわかんないんだ」という経験をすることが多く、ユーザビリティを向上させる必要性を痛感しているのですが、ゲームを参考にするといいみたいですね。

ゲームというのは、それぞれのゲームによってルールが異なるわけで、ユーザーは必ず操作方法を覚えないといけないわけです。しかも、そのユーザーというのは大体子供です。（いまはそうでもないかもしれませんが……）

最近のゲームには必ずチュートリアルが用意されていて、一番簡単なミッションをこなしながら操作方法を覚えていくようにできているそうです。これは大変参考になりますね。そして、徐々に難易度が上がってきて、そのゲームに習熟していくと。『たけしの挑戦状』みたいに不条理なゲームが淘汰されてきたのもこうした流れでしょうか。

僕自身、これまでヘルプやマニュアルを作ったり、スクリーンキャストで操作方法のビデオを作ったりという作業に多大なる時間を費やしてきたのですが、たとえ操作方法のすべてを記しておいたとしても使い方がわからない人というのは出てきます。そういう人はそもそも「使い方を調べる」という発想がないのではないか、そして、けっこう沢山いるんじゃないか、ということに最近気づきました。

そういえば、ロンドンブーツ１号２号の田村淳が昔TVで僕は携帯電話を買ったら説明書を隅から隅まで読んで、使い方をマスターします。女の子に携帯を見られるようなミスはしませんと言っていましたが、もしもすべてのユーザーがそういった人種であったら、iPhoneがこれだけ売れることもなかったでしょう。「何も考えずに初見で使いたい」という人は沢山いるはずなので、ゲームのチュートリアル方式は参考にしていきたいと思います。

ちなみに、jQueryとかでこうしたチュートリアル方式のライブラリはあるみたいなので（ex. Embedded help system）、WordPress以外でも採用してみるのはいいかもしれませんね。

Related posts:

1. MooToolsとWordPressを使う人が、摩擦の少ない人生を送るために。
2. Literally WordPress 0.8.8で定期購読とスマートフォン対応
3. WordPressのテーマちょびっとカスタマイズ

みんな嫌いな管理バー

なぜWordPressコアに管理バーが採用されたのか？

僕がまだ高校生だった頃、柔道部のくせに美容院に通っていたのですが、美容師（女）との会話で一つの真理に到達しました。僕が自分でいいと思った髪型（機嫌の悪い浅野忠信みたいなヤツ）よりも、美容師（女）が好きな髪型にした方がいい、と。

師曰く「男の子が考えた髪型だったら世界中の女の子が一人もいいと思わない可能性があるけど、少なくとも私が付き合ってもいいと思う髪型だったら、それはないよね」

というわけで、WordPressに管理バーが採用されたのはある程度の理由があると僕は思うのです。

昨今のWebサービスではアカウント登録があるのは当たり前で、それによってパーソナライズをはかっています。ユーザーの側でも「自分のアカウント関係のことは大体右上にあるなー」というのが感覚的にわかっているんではないでしょうか。WordPressもそうしたトレンドを取り入れつつ管理バーを採用したことと思います。

会員制サービスを運営するにあたって必ず必要になるアカウント周り

さて、普通のブログを運営していて、「コンテンツを作るのは俺だけな！　おまえら読者どもはコンテンツをありがたく読むだけだぞ！　あ、コメントぐらいはしてもいいからな！　ちゃんとバズらせろよ！」という姿勢であれば、パーソナライズとかはいらないと思いますが、熱心な読者にアカウントを発行し、そのアカウントを利用してその読者向きのコンテンツを提供しようと思っている場合、必ずアカウント操作が必要になります。

Facebookも上に管理バーみたいなのがある

もちろんTwitterも上に管理バーがある

最近話題のPinterestも管理バー

プロフィールを表示するならプロフィール編集画面が必要になりますし、当然リンクも提供しなければいけません。その他にもそれぞれのユーザーに特化したコンテンツを提供するページが必要になってくるので、そうしたものを丸っとまとめて表示したくなりますね。

その場合、管理バーを非表示にしてスクラッチで作るのではなく、管理バーをカスタマイズした方が楽だと思います。

管理バーを常に表示する

この管理バーなのですが、基本的にはログインしているユーザーにしか表示されません。この「表示されたりされなかったり」が魂を抜かれるのではと思う原因です。最近僕がやっきになってリニューアルしている破滅派では、常に表示するようにしてみました。このやり方は簡単です。

/**
 * アドミンバーを常に表示
 * @return boolean
 */
function _my_show_admin_bar(){
     return true;
}
add_filter( 'show_admin_bar', '_my_show_admin_bar' , 1000 );

これで常に管理バーが表示されるようになります。trueを返す条件を変えれば色々できます。

• ログインしていても、特定の権限がないと表示しない
• IPアドレスやクッキーを見て、特定の場合だけ表示する

デフォルトでも、ユーザー１人１人が管理バーを表示するかしないかを選べるようにはなっているのですが、そもそも普通のユーザーは自分が始めて見たものを非表示にしたいとか思わないはずなので、出すなら出す、出さないなら出さないで統一した方が親切だと思われます。

管理バーの項目をカスタマイズする

管理バーを出力したのはいいものの、ログインしていない場合はなにも表示されません。これだと困るので、色々調整します。

/**
 * 管理バーの項目を変更する
 * @param WP_Admin_Bar $wp_admin_bar
 */
function _my_adminbar( $wp_admin_bar) {
     if ( !is_user_logged_in() ){
          //ログインしていないユーザー向け
          //ウェルカムページへのリンクを追加
          $wp_admin_bar->add_menu(array(
               'id' => 'my-blog-logo',
               'title' => 'ようこそ私のブログへ！',
               'href' => home_url('/about/')
          ));
          //ログインリンク
          $wp_admin_bar->add_menu( array( 'title' => 'ログイン', 'href' => wp_login_url() ) );
          //新規登録リンク
          $wp_admin_bar->add_menu( array( 'title' => '新規登録', 'href' => preg_replace("/^.*href=\"([^\"]+)\".*$/", "$1", wp_register('', '', false))));
     }else{
          //ユーザーがログインしていて、投稿権限を持っていたら
          if(current_user_can('edit_posts')){
               $wp_admin_bar->add_menu(array(
                    'id' => 'dashboard-shotrlink',
                    'title' => 'ダッシュボード',
                    'href' => admin_url(),
                    'parent' => 'user-actions' /* プロフィールのリンクに追加 */
               ));
          }
     }
     //WordPressとは？のロゴを削除
     $wp_admin_bar->remove_node('wp-logo');
}
//adminbarにフック。最後に処理したいので、1,000番目に登録
add_action( 'admin_bar_menu', '_my_adminbar', 1000);

関数書いてみましたが、ちょっと疲れたのでAdmin Bar API changes in 3.3というエントリーを参考にしてください。色々書いてあります。

管理バーの見映えを合わせる

WPerはデザインにこだわる人が多いので、管理バーの許しがたいところに「なんか黒いし、クール」というのがあると思います。日本でクールなのはGacktぐらいなので、これは受け入れがたいでしょう。サイトをクールにするのも一つの手だとは思いますが、いきなり黒い帯をつっこんでも違和感のないサイトは少ないはずなので、せめて色味ぐらいはあわせたいものです。

なので、そのやりかたを紹介……と思ったのですが、基本はCSSだけでなんとかなります。最近はTwitter Bootstlapとかも話題になっているので、「デザインもモジュール化しないとダメなんだな」と思ってるデザイナーも多いことでしょう。管理バーなどは「可変要素が追加され、デザインが統一されている必要のあるパーツ」なので、モジュール的なデザインをするのにうってつけなのではないでしょうか。詳しくはWhat Everybody Ought to Know about the WordPress Admin Bar（WordPressの管理バーについてみんなが知っておくべきこと）というエントリーを参考にしてください。

デザインをあえて変えるということ

WordPressをどう使うかによって判断は色々だと思うのですが、ユーザー登録が自由で投稿も自由なサイトをWordPressで作る場合、管理画面のデザインを必死にカスタマイズするのは考えものだと思います。

破滅派をリニュアールするときは、なるべく管理バーや各種ボタンなどがWordPressデフォルトのものと違和感がないようにはじめっから合わせちゃいました。少なくとも、僕みたいな素人がデザインしたものより、多くの人が熟考を重ねたデザインの方がよいでしょう。カスタマイズするとしても、西川さんのKawaii Adminを使ってCSSだけいじるぐらいにとどめておいた方が無難です。WordPressをフレームワークとして捉えたとき、管理画面をいじる工数は公開画面をいじる工数よりも遥かに高いので、そこらへんのトレードオフをしっかり計算する必要があります。

一般ユーザーを管理画面に入れるべきか否かというのはWordPressをどれだけCGM的に使うかということで判断が分かれると思いますので、あとはお任せします。

ちなみにこのブログでは管理バーを表示していませんが、これは単に管理バーがある前から一生懸命自分で管理バー的なものを実装したら、そのあとすぐに管理バーが実装されたという悲しいボタンのかけちがいによるものです。

Related posts:

1. WordPressのTinyMCEをチキチキにカスタマイズする
2. WP tmkm Amazonを動くように修正
3. WordPressで会員制サイトを作るときの勘所

ePub3 on iBooks

最近めっきりePubを触っていなかったのですが、iOS5.0になってからCSS3のサポートが目覚ましく、ePub3.0の対応も縦書き時のページングさえ除けば概ね満足できるレベルまで来たので、拙著『ハムスターに水を』をePub3.0対応にしてみました。以下、その雑感です。

iBooks日本語組版対応でイケてる内容

iOS4の時点で「駄目だコリャ」と思ったていたものが改善されたケースが以下になります。

ルビ対応

これが今回個人的に一番重要だったものです。あくまで小説家としての意見ですが、ルビというのは見映え（ルビなんてカッコで書いときゃいいじゃん）やアクセシビリティ（低年齢向けに難しい感じは読みがなが振られるべき）の観点とは別に、「ルビそのものが表現の一種である」という意識があります。これから言及するそれ以外の改善点ははっきりいって見映え状の問題に過ぎないとさえ思うのですが、ルビだけは別格です。

ルビというのは、文字とそのメタ文字がバイリニアルに併記される世界的にも珍しい表記法であり、日本に印刷術が持ち込まれてからの最大の革命的副産物だと思います。聖剣エクスカリバーとかがそうだと思うのですが、単に「漢字をどのように読むか」というよりも、「ある言葉にどのような意味を付与するか」という遊びのような表現ですね。小説家としてここらへんは譲れないところがあったのですが、対応されて嬉しいです。まあ、詩人などからすると、改行位置を指定できないリフロー型がそもそも許しがたかったりするのでしょうが。

さて、そのルビ対応なのですが、以下のように書けば有効になります。

<ruby>聖剣<rt>エクスカリバー</rt></ruby>

ルビに対応していないブラウザ向けにrpというタグもありますが、めんどくさいので今回は割愛。あと、rbタグはCSS3のドラフトから削除されたっぽいので、書かなくてもいいんじゃないでしょうか。

rtタグのデフォルトサイズはよくわかりませんが、0.5emとかにしておけばそれっぽくなるんじゃないでしょうか。

テキスト両端揃え対応

テキスト両端揃えが対応されました。和欧入り交じった文章では「ひでーな」と思うこともままありましたが、両端揃えがサポートされたので、我慢できるレベルになりました。

p{
text-align:justify;
text-justify:inter-ideograph;
}

もしかしたら、設定 > iBooksで両端揃えで有効になるのかもしれません。

フォントをはじめとする上書き設定の無効化

iOS4.3ぐらいからだったと思うのですが、いつからかiBooks用のePub作成覚え書き（text-alignハックと明朝体とか）で得意げに書いた明朝体の指定が無効になっていました。「Apple様の指定したフォント以外使うなよこのクズ」と受け取り、半ば諦めていました。

iBooksはフォントの指定が一応できるのですが、なぜか日本語のフォントは一つも入っていません。結果として、すべての文字がヒラギノゴシックで表示されるようになってしまいました。

ところがどっこい、iBooks用のEPUBで埋め込みフォントを使うというエントリーに従って設定ファイルを追加することで、フォントの指定が有効になりました。

これでヒラギノ明朝を使うことができるようになりました。font-familyの指定はiOS5 の iBooks でフォントを指定する方法というエントリーをご覧下さい。

あと、このファイルを追加した副産物として、リンク色を指定できるようになりました。これまではa:linkとかa:visitedとかに色やテキスト装飾を指定しても無視されていたのですが、ちゃんと効くようになりました。もしかしたら、「この程度の情報にも辿り着けないアホはデザインすんじゃねーぞ」っていうAppleからのメッセージなのかもしれませんね。

圏点サポート

CSS3がサポートされたので、圏点もサポートされるようになりました。サポートのされ具合はtext-emphasis (CSS3 Text)をMobile Safariで見るとわかりやすいです。

iBooks日本語組版対応でイケてない内容

フォント指定

まだしっかり検証していない情報。フォント指定で以下のように書くことで和欧混植ができたのですが、なんとなく一つ目のフォント以外は無視されているような気がします。

font-family:georgia, 'HiraMinProN-W3', serif;

いつのバージョンだったか忘れましたが、PC版Safariがfont-familyをちゃんと読まないというバグがありました。他のブラウザは1番目のフォントがなかったら次のフォントという具合に読んでいってくれるので、上記の指定で和欧混植が出来たのですが、無理っぽいですね。

まあ、そのうち対応するでしょう。和漢混植が実現するのはいつのことやら……

縦書き

縦書きは表示されますが、ページングが逆になるみたいです。

その他

• ePub3.0になって、メタファイルがどう変わったのかを調べましたが、けっこうめんどくさかった。とりあえずイーストのサンプルをダウンロードしてことなきを得る。基本は変わってない。
• まだePub3.0対応のエディタはないっぽい。Sigilの対応に期待。基本的にはメタファイルのxmlタグ名や属性値なんて覚えたくないので、IDEの発展が待たれる。
• Androidのことはよくわからない。
• Adobe Digital Editionのプレビュー版があればPCでもそこそこ読める。

終りに

今回、旧作をアップデートしてみましたが、やはり沢山コンテンツがないと意味ないと思ったので、年内に2〜3本新作を追加してみたいと思います。あと、PDFも作ってると大変なので、しばらくは「iOS5端末を持っている人向けにePub3を出していく」という方針でいきます。

あと、立ち読みページなんかも作ってみましたので、まだ買っていない人は『ハムスターに水を』を見てみてください。。

Related posts:

1. iBooks用のePub作成覚え書き（ルビ、ジャスティフィケーションetc）
2. iBooks用のePub作成覚え書き（text-alignハックと明朝体とか）
3. 長編小説「ハムスターに水を」ePub版販売開始

このフォームのソースはこんな感じです。

<form method="get" id="sorter" class="dark_bg center">
	<p>
		<?php if(is_search()): ?>
		<label>検索<input type="text" name="s" value="<?php the_search_query(); ?>" /></label>
		<?php endif; ?>
		<select name="order">
			<option value="ASC"<?php if(isset($_REQUEST['order']) && $_REQUEST['order'] == 'ASC') echo ' selected="selected"';?>>昇順</option>
			<option value="DESC"<?php if(!isset($_REQUEST['order']) || $_REQUEST['order'] != 'ASC') echo ' selected="selected"';?>>降順</option>
		</select>
		<select name="orderby">
			<option value="date"<?php if(!isset($_REQUEST['orderby']) || $_REQUEST['orderby'] == 'date') echo ' selected="selected"';?>>公開日</option>
			<option value="modified"<?php if(isset($_REQUEST['orderby']) && $_REQUEST['orderby'] == 'modified') echo ' selected="selected"';?>>最終更新日</option>
			<option value="title"<?php if(isset($_REQUEST['orderby']) && $_REQUEST['orderby'] == 'title') echo ' selected="selected"';?>>タイトル</option>
			<option value="comment_count"<?php if(isset($_REQUEST['orderby']) && $_REQUEST['orderby'] == 'comment_count') echo ' selected="selected"';?>>コメント数</option>
		</select>
		<input type="submit" class="submit button" value="SORT!" />
	</p>
</form>

ちょっとselected属性を出すのがめんどくさいですが、ようするにGETリクエストで色々値を渡しているだけです。

なんでこんなことが可能なのか

この他にも色々できることはあるのですが、基本的に知っておけばいいのは、以下の2点です。

1. WordPressはURLから求められるコンテンツを類推して表示している
2. URLはごにょごにょ解析され、最終的にquery_postsに渡される

とりあえずこれを理解し、以下の例を見てみましょう。

ex.1 どの一覧ページでも検索してみる

たとえば、僕のブログにおいてカテゴリーWeb制作のURLは以下になります。

http://takahashifumiki.com/topics/web/

これの尻尾に検索クエリをつけてmootollsを含むURLにしてみます。

http://takahashifumiki.com/topics/web/?s=mootools

そうすると、mootoolsを含む投稿だけが表示されます。不思議ですね！

検索結果が表示された！

ex.2 日付一覧を古い順にしてみる

僕のブログの2011年10月のエントリー一覧は以下のURLです。

http://takahashifumiki.com/date/2011/10/

これを古い順にしてみます。

http://takahashifumiki.com/date/2011/10/?order=ASC

どうでしょう、 古い順になってますよね。

順番が変わった！

このように、WordPressはURLに色んなクエリ（?key1=value1&key2=value2）を渡すことで、表示される結果がコントロールできるということです。このkeyとvalueに何を使えるかは、Codexを参考にしてください。色々あります。

絞り込み検索を実装してみる

おそらく需要が高いであろう絞り込み検索もそんなにめんどくさくありません。ためしに僕のサイトで、カテゴリーが「その他（ID:10）」または「文芸活動（ID:3）」に属していて、なおかつ「web」という単語を含むページの一覧を表示するためには以下のURLでOKです。

http://takahashifumiki.com/?s=web&cat=3,10

検索結果で特定のカテゴリーのみ出力

つまり、こういう値を渡してくれるフォームを作ればいいだけですね。ただし、カンマ区切りで値を渡してくれるインターフェースはないので、Javascriptでサポートする必要があります。

<form id="search-form" method="get" action="<?php bloginfo('url');?>">
   <label><input type="text" name="s" value="<?php the_search_query(); ?>" /></label>
   <p>
   <?php
      //登録されたカテゴリーを名前の昇順で取得
      $cats = get_categories(array('orderby' => 'name', 'order' => 'asc'));
      foreach($cats as $cat){
         //ループ処理でカテゴリーを全部出力
         printf('<label><input class="cat" type="checkbox" value="%d" />%s</label>', $cat->term_id, $cat->name);
      }
   ?>
   </p>
   <input type="hidden" name="cat" value="" />
   <input type="submit" value="検索" />
</form>

本当は現在設定されているカテゴリーを選択済みにする処理などあるのが望ましいですが、割愛。get_categoriesについてはCodexを確認してください。

上記で出力されたフォームだけだとcatが常に空っぽになってしまうので、こんなJavascriptを読み込みます。

jQuery(document).ready(function($){
      //フォーム送信直前に実行
     $('#search-form').submit(function(e){
          //チェックボックスのチェック済みをすべて取得
          var cats = [];
          $('input.cat:checked').each(function(index, elt){
               cats.push($(elt).val());
          });
          //1つ以上チェックされていたら隠しinputに格納
          //なかったら削除
          if(cats.length > 0){
               $('input[name=cat]').val(cats.join(','));
          }else{
               $('input[name=cat']).remove();
          }
     });
});

これでカテゴリーによる絞り込み検索は実装できます。他にもタグとかカスタムフィールドとかもできるので、色々試してみてください。ポイントはCodexをよく読むことです。

さらなるカスタマイズは茨の道

よくWordPressを導入した場合に言われるのが「Googleみたいに便利な検索機能をつけられないか」ということなのですが、これが難しいのは技術的な問題もさることながら、もっと高次な問題があるように思います。「ゆらぎ検索」や「低レイテンシ」などの様々な技術的難題を突破したとしても、最後に「どんな基準で表示するか」という最大の難問が発生するからです。逆に言えば、これさえわかってしまえば答えは出たも同然です。

Googleが便利なのは「どんな順番で検索結果を表示するとユーザーが便利だと思うか」ということだけを考えているからです。基準もちゃんと持ってます。

• たくさんのサイトからリンクされているWebページはいいページ
• いいサイトからリンクされているWebページはいいページ
• 東京の人は東京の店舗情報を知りたいに違いない
• 友達が進めているWebページは気に入るに違いない

最近はどんどんパーソナライズの方向へ向かっているので、Googleならびに各種検索エンジン・SNSはこうしたデータをやっきになって集めているのですね。便利さはあくまで結果でしかないわけです。

翻ってWordPressのことを考えてみると、よくも悪くもブログシステムが元になっているので、発想の根本がブログ（つまり日記）です。このエントリーで紹介しているソート機能というのは、突き詰めれば「コンテンツをどう評価するかの基準」ということになります。WordPressは日記が元なので、時系列がデフォルトのソート順になっています。

WordPressはデフォルトのままだと「いまこのサイトを誰が見ているか」も知らないし、「このページがどれだけアクセスされたか」もわかりません。評価しようにも評価するべき基準がないのです。この基準を集めるのは結構大変です。ちょっと幾つか具体例を考えてみました。

ケーススタディ１ PVでソート

PVというWordPressが持っていない外部的な指標によってコンテンツをソートする場合を考えてみます。これはMySQL知らなくてもできますね。僕もまだ実践したわけではなく、今度こういうのを作ろうと思っているだけなので、概要だけサラッと。

1. Google AnalyticsでAPIを叩いて特定のURLを取得する
2. 取得したPVをカスタムフィールドに保存する
3. 上記の処理をwp_cronなどで毎週実行する

こんな感じでPVという情報を投稿に不可することは可能です。とりあえずこれでWordPressに「どれだけの人は見たか」ということを教え込ませることはできたので、色々ソートできます。まあ、この程度のことしかやらないなら、Jetpackに入ってるstats使った方が楽ですね。

ケーススタディ2 はてなブックマーク方式

ここからMySQLの知識が必要になります。WordPressはデフォルトだと、タグと投稿は1対1の関係になります。これをテーブル構造的に見るとこうなります。

通常のタクソノミー関係構造

これだと、タグはあくまで投稿のメタデータにしかならず、あんまり有用な情報ではありません。日付とかと一緒ですね。

一方、はてなブックマークはタグとURLは紐づいていますが、さらにそのタグとURLに対する関係にユーザーが入ってきます。「誰がどのURLにどんなタグをつけたか」ということですね。これをテーブル構造的に見るとこうなります。

はてぶっぽいテーブル構造

これはWordPressのテーブル構造にないので、作らないといけなくなります。これは単にデータベースをphpMyAdminで作ればいいというだけのことではなく、CRUDというデータの保存・検索・更新・削除の機能をつけなくてはいけないですし、一覧ページをどうやって出力するかも考えなくてはなりません。ここら辺になるとフレームワークを使った方が早いんじゃないかなーと思い始める人が出てきますね。

ただ、コンテンツを漫然と並べ立てるだけでは飽き足らなくなった場合、これは避けて通れない道だと思います。Web制作業についているだけであれば、学習コストや開発工数をトレードオフして「やらない」という結論もぜんぜんアリだとは思うのですが、コストを度外視してでも実現したいものがある人は、ぜひMySQLを勉強してみることをオススメします。そうじゃないと、新しいものを作れないような気がします。その理由は次節。

凡庸・オア・ダイ

最近破滅派をリニューアル作業をしていてとみに思うのが、データをどのように蓄積してどのように評価するかが結局キモでありコンテンツなんだなーということです。ちょっと前ですが、はてなからGREEに移籍した伊藤直也さんが古巣に提言した内容もそうなんですが、最近ちょっとエッジの効いたサービスをやろうと思ったら、ユーザー最適化などは避けて通れないですね。ロラン・バルトが言ってた作者の死ってこういうことだったんですかね。

PVや「いいね!」「はてぶ」の数などの外部的な指標を上述したような単純なやり方で自分のサイトに持ち込んでも、結局は同じ結果になると思います。伊藤直也さんは「衆愚」という言葉を使っていましたが、たしかにSFの90%はクズだが、そもそもあらゆるものの90%はクズであるとか、どこに国に行っても馬鹿の数が一番多いとか、民主主義は最悪の政治制度だ、ただしこれまで試みられたあらゆる政治制度を除けばと言い換えてもいいかもしれません。はてなブックマークのトップを見ていると、「いつまで部屋片付けてんだ？」「何年TOEIC勉強してんだ？」って思うことしきりですからね。こんなこと書くと炎上しますかね。

ともかく、集計＆ソーティングというのはすでに陳腐な技術であり、そこらへんのフリーソフトでサクッと実現できてしまいます。その結果、どんな指標を使ったにせよ、出来上がるものは大体似たようなものになってしまいまそうな予感。このままいったら僕らはみんなマトリックスにつながれて、偽物の幸福な夢を見ながらGoogleの餌になるしかないですよ。

ちょっと話が大きくなりましたが、ますます便利になりつつあるインターネッツの世界でエッジの効いたデータ提示をしたかったら、茨の道だけどMySQLいじるようにした方がいろいろ捗るぞというメッセージでした。

Related posts:

1. WordPressでデータベースを使ったプラグインを作成する
2. WordPressでbloginfoなくしてもDB負荷は減らないんじゃないかという話
3. WordPressで会員制サイトを作るときの勘所

新プラグインGianism

http://wordpress.org/extend/plugins/gianism/

プラグイン名は「ジャイアニズム」と読みます。これは簡単に言うと、WordPressにTwitterやFacebookでログインできるようにするものです。詳しくはこのサイトのログインページを見てみてください。

ログインページにボタン追加

実はSocial Connectというほぼ同じ機能を提供するプラグインがあったりしますが、おそらく100年待ったところで日本のサービスには対応しないだろうなと思ったので、作りました。ただ、作ってはみたものの、OAuthで接続する場合のライブラリがあったりなかったり（あってもPEARだったり）でめんどくさくなったので、mixiなどにはまだ対応していません。すいません。「mixiのヘビーユーザーってどうせ電子書籍買わないんじゃないの」という邪推があったのは内緒です。こちらもあわせてすいません。

Gianismの見所

というわけで、機能的に特に目新しいところはないのですが、お勉強のために車輪の再発名をしたわけではありません。このプラグインはそもそも僕のサイト用に作ったので、「Twitterやmixiのように外部サイトに対して認証機能を提供しているが、メールアドレスは渡さないサービス」向けの機能を備えています。まあ、他のプラグインをよく見ていないので、もしかしたらそういう機能があったのかもしれませんが。

で、どうなるかというと、GianismはWordPressで内部的に使われるメール送信関数wp_mailをフックし、そのメッセージを保存します。送信されるはずだったメールはユーザーのプロフィールページに一覧として表示され、ちょど簡易Webメールのような感じになります。

プロフィールページにメッセージ一覧

そしてさらに、登録した外部サービスを経由して、「高橋文樹.comだけど、あなたにメッセージがあるよ http://example.jp/wp-admin/profile.php 」という具合にメッセージがある旨を教えます。

TwitterにDM送信（日本語化は完了してます）

僕が作っている電子書籍販売用プラグインLiterally WordPressは振込にも対応しているため、メール送信が必須です。というより、振込先をメールしないとほぼ確実に振り込んでもらえません。かといってTwitterは140文字以内という制限があるためメール全文をそのままDMも無理…というわけで、こんな仕様になりました。

一応、検証してはいますが、届かない場合もあるみたいです。この機能はβ版という位置づけにしておきます。

あと、地味な機能ですが、FacebookのファンページでWordPressを使っている場合、その人がファンかどうかも判別できる関数もつけときました。僕のファンページはこちらです。

ECショップ系のプラグインを使っている方は、うまくいけば連携できると思います。

Gianismの名前の由来

「Facebookアプリ開発徹底入門」ePub買ってみた雑感でもちょろっと書きましたが、「お前のものは俺のもの」というジャイアニズムと、プログラミングの世界でよく言われる格言「巨人の肩に乗れ」の二つをかけました。その結果としてずいぶん滑った名前になりましたが、もう出しちゃったからしょうがないです。

Gianismの今後

とりあえずログインまではできたのですが、なるべくよそのメディアでバズを作るような機能を盛り込んでいきたいと思います。と同時に、国産サービスでOAuthを公開しており、なおかつ良さげなAPIを備えているところも追加していきます。こんなのがあると便利ですかね。

1. WordPress内の特定のURLをいいねしてくれたかどうかわかる
2. twitterでURLを含んだツイートが合計100RTされたかどうかわかる
3. 上記の指標を累計して、ファンの忠誠度を計る

なんか嫌らしい機能ばっかりですが、がんばって実装したいと思います。

困ったときは

使ってみて動かなかったら、この記事にコメントしてください。メールでも一応お答えするようにしますが、コメントで公開した方が同じ問題で困っている人に役立つので。

その他雑感

先述した「千人の忠実なファン」モデルですが、僕個人にはあんまり向いてないかなーという気もしています。僕と親しい人にはバレているのですが、ファンサービスに向いている人間ではないのです。

• 人からメールが来ても応えない場合が結構ある
• 誘われたら行くけど自分から誘わないし誘ってくれとも言わない
• 自分が持っている名刺全部にBCCでメール送らない

軽く列挙しただけでもこれだけの悪習を備えていますし、もう30歳も超えて矯正する気もないので、「高橋文樹のことを大好きで出すものを何でも買ってくれるファン」を増やすのは正直難しいんじゃないかと思っています。

ただそうはいってもファンを増やさないことには飢えてしまうので、「高橋文樹のことがちょっと気になっていて、何か出したら買ってみようかなと思ってくれるファン」を増やすことにしました。

ファンとのリレーションを保つために「自分のマメさ」とかは信頼できないので、なるべくプログラムなどで外部化したいと思います。乞うご期待。

Related posts:

1. Literally WordPress 0.8.8で定期購読とスマートフォン対応
2. WordPressでrubyタグを挿入できるプラグイン作った
3. Literally WordPressを0.8.6に更新