blog.shimazu.org

実装完了。

YUI のコードをコピペしただけで、インタラクションがちょっと中途半端（？）だけど。詰め作業は追ってやるつもり。

ブログを書く間もないほど仕事があわただしい日々が続いているが、以前からやろうとしている記事検索の autocomplete 化について、備忘までにメモしておく。

実装しようとしている autocomplete とは、（いうまでもないかもだけど）検索キーワードを何文字かキータイプしただけで何らかの補足情報が出る仕組み。「何らかの補足情報」とわざとぼかして書いたのは、サイトやアプリケーションによって、中身が微妙に違うからで、以下のように「関連語・頻出語の提示」と「ダイジェスト結果の提示」に分かれる（と思われる）。

関連語・頻出語の提示

• Yahoo!（サイト）
• Google Suggest（サイト）
• Firefox の検索窓（アプリケーション）

ダイジェスト結果の提示

• Apple（サイト）
• Mac OS X Spotlight（アプリケーション）

今回やろうとしているのは、「ダイジェスト結果の提示」のほう。関連するものの呼び出しとか素敵だけど、実装が手間そうだし、それ以前にそんなに記事も多くないので、割と簡単な「ダイジェスト結果の提示」で進めることにした。

まずはサーバ側での対応から。Wordpress 向けテーマファイルをいろいろ見ているうちに、うまく使えそうな以下コードがあった（一部省略）。

<?php
require("../wp-blog-header.php");
$posts = query_posts('posts_per_page=10&s='.$_GET['s'].'&what_to_show=posts');
?>
<?php
if (!$posts) {
    echo '<div>Sorry, no results.</div>';
} else {
    foreach ($posts as $post) {
        start_wp(); ?>
        <div>
            <a href="<?php echo get_permalink() ?>" title="Permanent Link to '<?php the_title(); ?>'"><?php the_title(); ?></a>
            <a href="<?php comments_link(); ?>" title="Go the the comments for this entry"><?php comments_number('0', '1', '%'); ?></a><br />
            <?php /* If 'Dunstan's Time Since' plugin is installed use it; else use default. */
            if (function_exists('time_since')) {
                echo time_since(abs(strtotime($post->post_date_gmt . " GMT")), time());
                echo ' ago';
            } else {
                the_time('F jS, Y');
            }
            ?>
        </div>
<?php
    }
}
?>

これによりでシンプルな検索結果一覧を表示できるので、JSON とか受け取りやすいフォーマットに整形すれば JavaScript や Flash などでいろんなインタラクションがつくれそう。

フロントエンドでの実装には Yahoo! UI Library: AutoComplete を使用予定。安定した動作、上下キーでフォーカス移動、そして何より、Yahoo! トップページ での利用実績が強みと思われる。

補足：
PHP コードに登場する ‘Dunstan’s Time Since’ plugin とは日時の相対表示を実現するプラグインの模様。以下から取得でき、割とシンプルな実装で、使い勝手がありそう。
http://binarybonsai.com/wordpress/time-since/