コメント投票機能・Twitter連携機能など付けてみました

BEAR連載のおかげで、できる事の幅も広がってきたので、今まで作ってきたWebサービスリニューアル大作戦の第一弾として、今北川柳をBEARベースに置き換えつつ、機能拡張してリニューアルしてみました。

追加した機能のご紹介

Twitter連携

作成された川柳を、@imakitasenryuでつぶやくようにしました。フォローしてもらうと、意味が分かりそうで分からない川柳がいっぱい流れてくると思います。(笑)

面白い川柳があったら返信またはRT(QT)してもらうと、その川柳への投票になります。コメント付きで返信・RTすると、ちゃんと投票コメントとして反映されるようになっています。

返信・RTする場合、以下のような書式でないと正しくコメントを抽出できない事があるので、ご注意下さい。

コメント投票機能

今まで川柳への投票は、はてなスターの機能を使っていたんですが、いかんせん敷居が高いのか全く投票に使ってもらえなかったので(^^;、自前で投票機能を実装しました。

「面白い!」と思ったら、"天晴+"ボタンを押すと、その川柳に投票する事ができます。また、"天晴+"ボタンの隣の吹き出しボタンを押してコメントフォームにコメントを入力してから投票すると、コメント付きで投票する事もできます。

コメント表示機能

川柳を色紙画像で表示する個別表示画面で、投票されたコメントを吹き出しで表示するようにしました。鬱陶しいと思ったら"コメントを非表示にする"のリンクをクリックすれば、表示を止める事ができます。表示設定はCookieに保存されるので、次回訪れた時も設定がそのまま引き継がれるようになっています。

APIの追加

ブログなんかで簡単に紹介してもらえるように、画像のAPIは前バージョンからあったのですが、今回、テキストベースのAPIも作ってみました。現在、以下のAPIが利用可能です。

画像取得API(URLを指定)
http://www.stellaqua.com/imakitasenryu/api/images.php?url={対象サイトのURL}[&size=small]
画像取得API(IDを指定)
http://www.stellaqua.com/imakitasenryu/api/images.php?id={川柳ID}[&size=small]
テキスト取得API(URLを指定)
http://www.stellaqua.com/imakitasenryu/api/texts.php?url={対象サイトのURL}[&format=(xml|json|jsonp&callback={コールバック関数})]
テキスト取得API(IDを指定)
http://www.stellaqua.com/imakitasenryu/api/texts.php?id={川柳ID}[&format=(xml|json|jsonp&callback={コールバック関数})]
コメント取得API
http://www.stellaqua.com/imakitasenryu/api/comments.php?id={川柳ID}[&format=(xml|json|jsonp&callback={コールバック関数})][&_start={表示ページ}]

テキスト取得APIのレスポンスは以下のような感じです。(XMLの場合)

<?xml version="1.0" encoding="utf-8"?>
<results>
    <senryu>
        <id>52e85875124208d7c40ff10d16d7bae0</id>
        <createdtime>2010-05-01T14:55:14+0900</createdtime>
        <sourceurl>http://news.google.co.jp/</sourceurl>
        <sourcetitle>Google ニュース</sourcetitle>
        <votecount>0</votecount>
        <commentcount>0</commentcount>
        <texts>
            <text1>出席し</text1>
            <text2>訴えている</text2>
            <text3>謝罪する</text3>
        </texts>
        <links>
            <imageurl>http://www.stellaqua.com/imakitasenryu/api/images.php?id=52e85875124208d7c40ff10d16d7bae0</imageurl>
            <entryurl>http://www.stellaqua.com/imakitasenryu/api/texts.php?id=52e85875124208d7c40ff10d16d7bae0</entryurl>
            <commenturl>http://www.stellaqua.com/imakitasenryu/api/comments.php?id=52e85875124208d7c40ff10d16d7bae0</commenturl>
            <tweeturl>http://www.twitter.com/imakitasenryu/status/13173910635</tweeturl>
        </links>
    </senryu>
</results>

コメント取得APIのレスポンスは以下のような感じです。(XMLの場合)

<?xml version="1.0" encoding="utf-8"?>
<results>
    <pager>
        <totalResults>1</totalResults>
        <startIndex>1</startIndex>
        <itemsPerPage>1</itemsPerPage>
        <firstpageurl></firstpageurl>
        <nextpageurl></nextpageurl>
        <prevpageurl></prevpageurl>
        <lastpageurl></lastpageurl>
    </pager>
    <comments>
        <comment>
            <id></id>
            <createdtime>2010-05-01T15:00:00+0900</createdtime>
            <targetid>52e85875124208d7c40ff10d16d7bae0</targetid>
            <body>コメントしてみたよ</body>
            <targeturl>http://www.stellaqua.com/imakitasenryu/api/texts.php?id=52e85875124208d7c40ff10d16d7bae0</targeturl>
            <via>http://www.stellaqua.com/imakitasenryu/api/texts.php?id=52e85875124208d7c40ff10d16d7bae0</via>
        </comment>
        <comment>
            :
        </comment>
            :
    </comments>
</results>

レスポンスコードは、200(OK)・400(呼び出し方の不正)・403(高負荷によるアクセス規制)・500(サーバエラー)のいずれかが返ってきます。

こんなAPIを公開したところで何かに使えるのかどうか全くもって不明ではありますが、まぁこれを使って何かを作ろうという奇特な方が現れた時の為に公開しておきます。(笑)

ちなみに、川柳を作成する対象URLを指定してアクセスした時に、対象サイトの内容のキャッシュが無い場合、レスポンスに数秒掛かる事があるのでご注意下さい。

その他こだわった点とか

細かい事なんですが、今回のリニューアルに伴ってタイトルからα表記を外して、ついでにfaviconも作ってみました。ドットを置いていくタイプのfavicon作成Webサービスで、5分くらいで作ったやっつけにしてはそれなりなモノができたので満足しています。

あと、コメントの表示は結構こだわってみました。ボワンと現れて、スーっと消えていく感じが結構気にいっています。最初はニコニコ動画風な流れるコメントにしようかとも思ったんですが、何か今や目新しさも無くなった感もあるし、あんまりやり過ぎても鬱陶しくなるだけかなと思って、今の形に落ち着きました。

この辺りのアニメーションと、Ajaxのデータのやり取りでjQueryをふんだんに使ってみたんですが、色々と勉強になりました。Webサービスにちょっとした彩りを添えるのにはjQueryは使い易くって非常に良いですね。

それから、川柳の元になる単語を拾ってくる時に、数字の読みをきちんと行うようにしてみました。

MeCabで普通に数字を読ませると一桁ずつでしか読んでくれないので、"123"を"イチニサン"と読んでしまうんですが、こういうのをちゃんと"ヒャクニジュウサン"と読めるように、自前で専用のクラスを作って変換をするようにしてみました。これで、数字を含む単語でもそれなりに抽出できるようになったのではないかと思います。

その他困った点とか

TwitterのOAuth対応は以前に試した事があったので、そこでの苦労はあまり無かったんですが、RTを取り込んで投票に反映させる機能が大変でした…。

以下、ハマりどころ…。

  • 公式RTは、自分のつぶやきの内のどのつぶやきがRTされたかは分かるけど、誰からRTされたのかはAPIで取得できない…。(仕方がないので、公式RTを投票に使うのは諦めた。)
  • 非公式RTだと書式が決まってないから、コメント部分だけ抜き出そうとすると、どうするのがベストか分からない…。(仕方がないので、最初に出てきた"RT"より前の部分をコメントと決め打ちしちゃう事にした。)
  • 非公式RTだと、どのつぶやきに対する返信か分からないから、どの川柳に対する投票なのか特定できない…。(仕方がないので、元のつぶやきに含ませてあるURLから川柳のIDを取得する事にした。)
  • 非公式RTで元のつぶやきのURLを短縮URLにしないで入れてもらおうとすると、コメントに使える文字数が少なくなってしまう…。(仕方がないので、短縮URLの場合は展開してからIDを取得する実装を入れた。)

Twitterも今やインフラとしての利用価値が大きいから、できるだけTwitterからもWebサービスに参加できる間口は広げたいんですが、自由度が高過ぎる故に、Webサービスとして欲しい情報を拾ってこようと思うと妥協しなきゃいけない部分が多くて悶々としますな…。

Twitter連携は突っ込むと泥沼にハマりそうな感もあるので、そこそこの線で妥協しときたいと思います…。


そんな訳で、色々と機能追加してより遊べるようになったかと思うので、「これからも 今北川柳 よろしくね♪」(一句)

*1:"RT"or"QT"が1回("RT:"とかコロン付きでもOK)、コメントが"RT"or"QT"より前にある、元のつぶやきの中のURLが含まれる(短縮URLでもOK)、という条件を満たしていれば大丈夫なはずです。