一般ユーザーがバカと嘆くより早くWordPressポインターを出す

高橋文樹

2012 年 3 月 22 日
読了5分（3,305文字）
WordPress プラグイン

この投稿は 12年半前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

例によってWordPressで会員制サイトを運営するときのユーザビリティ向上Tipsです。プラグイン作ったことあるとか、functions.phpをいじってるという人向きです。

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

こういうことがあると、管理者としては「これだからユーザーってやつは！」と絶望してしまいがちですが、「管理者が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の投稿画面に生まれて始めて入った人に対して、こんな風に順番で出すのはどうでしょうか。

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

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

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

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

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

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

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

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

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