2011-09-23

jquery.xrender.jsなるものを作りました！

jquery.xrender.js
XML レンダリングライブラリ
https://github.com/kazkicks/jquery-xrender

なるものを作りました。

ライブラリを作る目的のひとつは、作業効率のアップです。

通常、非同期でサーバからAPIを呼び出した際の処理は、以下のようになるかと思います。

script例

$.ajax({
  type: "GET", 
  url: "rss20.xml",
  success: function(data) {
    onLoadData(data);
  },
  error: function(){},
  dataType: 'xml'
});

function onloadData(data) {
  $('#title').text($('channel title', data).val());
  $('channel item', data).each(function(i) {
     var newItem = null;
     if (i == 0) {
       newItem = $('.item');
     }else{
       newItem = $('.item').clone();
       $('.item:last').after(newItem);
     }
     $('.item_title', newItem).text($('title', this).val());
     $('.item_description', newItem).text($('title', this).val());
  });
}

HTML例

<div>
  <div id="title"></div>
  <div class="item">
    <div class="item_title"></div>
    <div class="item_description"></div>
  </div>
</div>

jquery.xrender.jsを利用すると以下の記述だけで、同じことができるようになります。

script無し

HTML例

<div data-xrender-xml="rss20.xml">
  <div id="title" data-xrender-xpath="channel/title"></div>
  <div class="item" data-xrender-xpath="//item" data-xrender-filter="repeat">
    <div class="item_title" data-xrender-xpath="title"></div>
    <div class="item_description" data-xrender-xpath="description"></div>
  </div>
</div>

※呼び出し先のXMLとxpathを定義するだけで自動的にレンダリングされます。
すっきり！！

もし、ご興味いただけましたら、ソースを公開していますので是非リンク先をご確認ください。
https://github.com/kazkicks/jquery-xrender
MIT License

2010-12-22

携帯サイトでUTF-8でxhtml出力する際の注意

携帯サイトもいいかげんUTF-8で統一したい。
XHTMLで記述したい。

といった場合に、毎回忘れるのでメモ。

AUの一部の端末で、
header("Content-type: application/xhtml+xml; charset=utf-8");
としても、何故かshift_jisで表示されてしまう。。

なので、以下のようにしている。。

auの場合
header("Content-type: text/html; charset=utf-8");
※auの場合はtext/htmlでもxhtmlを表示可能
au以外
header("Content-type: application/xhtml+xml; charset=utf-8");

2010-12-18

php+mecabセットアップメモ

1 mecabをインストールする
http://mecab.sourceforge.net/#download

# wget http://sourceforge.net/projects/mecab/files/mecab/0.98/mecab-0.98.tar.gz/download
# tar zxfv mecab-0.98.tar.gz
# cd mecab-0.98
# ./configure
# make
# make check
# su
# make install

2 辞書をインストールする

# wget http://sourceforge.net/projects/mecab/files/mecab-ipadic/2.7.0-20070801/mecab-ipadic-2.7.0-20070801.tar.gz/download
# tar zxfv mecab-ipadic-2.7.0-20070801.tar.gz
# cd mecab-ipadic-2.7.0-20070801
# ./configure
--with-charset=utf-8
--with-mecab-config=/usr/local/bin/mecab-config
# make
# su
# make install

3 phplizeで拡張moduleをインストールする
http://pecl.opendogs.org/
を利用させていただく。

# wget http://pecl.opendogs.org/get/mecab-0.4.1.tgz
# tar xzvf mecab-0.4.1.tgz
# cd mecab-0.4.1
# /usr/bin/phpize
# ./configure --with-php-config=/usr/bin/php-config \
--with-mecab=/usr/local/bin/mecab-config
# make
# su
# make install

4 phpで利用出来るようにする

# vi /etc/php.d/mecab.ini
extension=mecab.so

おしまい

後はいかにクールな辞書を作るかが問題！！

2010-06-06

ming+phpセットアップメモ

最近セットアップする機会があったので、メモ

以下CentOS5.3
PHPで使う場合の例

mingのダウンロード

# wget -v http://sourceforge.net/projects/ming/files/Releases/Ming%200.4.3/ming-0.4.3.tar.bz2/download
# bzip2 -dc ming-0.4.3.tar.bz2 | tar xvf -

関連packageインストール

# yum -y install php-gd
# yum -y install php-devel
# yum -y install freetype-devel
# yum -y install libpng-devel
# yum -y install giflib-devel

yum便利！

mingインストール

# cd ming-0.4.3
# ./autogen.sh
# ./configure --enable-php
# make
# make install

phpで利用出来るようにする

# cp php_ext/tmp/modules/ming.so /usr/lib/php/modules
# vi /etc/php.d/ming.ini
; Enable ming extension module
extension=ming.so

おしまい

2010-06-03

ソーシャルボタンいろいろ

web

ここのところfacebookがlikeボタンを発表したり、
twitterが@Anywhereを公開したりしていろいろ話題なので、
乗り遅れないようにメモしておく。
google buzzも公開してたのね。。

twitter @Anywhere

http://dev.twitter.com/anywhere/begin
@kazkicksとか書くと勝手にプロフィール表示してくれたり、フォローボタン表示してくれたりする

facebookのlikeボタン

http://developers.facebook.com/docs/reference/plugins/like
ソーシャルブックマークとの違いがわからないけど、規模が規模だけにgoogleの驚異になるとか言われている

topsyのretweetボタン

http://labs.topsy.com/button/retweet-button/
tweetされたりした数を表示してくれて、Retweetもできるようになっている

google buzzボタン

http://www.google.com/buzz/stuff
こっそりと発表されていた。。機能はfacebookのlikeボタンに似てる？

以下追記 2010/10/02

ツイートボタン

http://twitter.com/goodies/tweetbutton

mixiチェック

http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check

GREE Social Feedback

http://developer.gree.co.jp/connect/plugins/sf

せっかくなので、ぽちったーの紹介ページにも全部張ってみました
http://elazyrest.net/pochitt/pc/info.php

2010-05-23

elazyrest with JAXB

java

javaで簡単SimpleXMLサーバ
http://sourceforge.jp/projects/elazyrest/wiki/FrontPage

２年ほど前に公開して、ずっと放置していたのですが、
google app engineでも、JAXBがようやく対応したので、

http://code.google.com/p/googleappengine/issues/detail?id=1267
http://groups.google.com/group/google-appengine-java/browse_thread/thread/fe334c9e461026fa#
http://googleappengine.blogspot.com/2009/12/app-engine-sdk-128-released-including.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+GoogleAppEngineBlog+(Google+App+Engine+Blog)

少し時間がたってしまいましたが、
elazyrestでも動くようにしてみました。

あと、全然足りていませんが、説明を少し追加いたしました。

ただ、JAX-RSがあるので、立場は微妙です。。

2009-08-18

TweetPhotoという選択

web

ぽちったーから画像投稿するのにできるだけ楽な方法は何か検討してみました。
http://elazyrest.net/pochitt/info.php

要件
１．twitterの携帯サイトに画像アップロード機能を組み込みたい
２．ストレージは持ちたくない、サービス自体も外部サービスを利用したい
３．ユーザには画像アップロード用に何も設定させたくない（メールアドレス等)、意識させたくない
(※ここでは、oauthについては言及しない)

背景
１．国内の携帯電話では、ウェブブラウザから、ファイルアップロードができないことが多い。
これが一番の問題！
（スマートフォン系はのぞく）
代替として、メールに添付して行うことが多い。

２．twitterのアカウントが利用できて、アップロード用APIが公開されているサービスが存在する。
利用しない手はないが、メールサーバを経由しなければならない。

TwitPic, img.ly, Twitgoo, etc

いくつか考えられるが、想定されるシーケンスを２つほど挙げてみる。
例１
a) メールサーバを設定して、twitterアカウント毎にメールアカウントを発行する。
b) 携帯サイトでmailto:で設定されたメールアカウントをクリックする
c) 画像をメールに添付して送信する
d) 受信メールアドレスと緋も付けられたtwitterアカウントで、APIを利用して画像共有サイトへ画像をPOSTする。

※一般的な方法かと思う
※漏洩時の対策として再設定機能が必要かもしれない

例２
a) メールサーバを設定して、画像投稿用のメールアカウントを１つ（別ユーザでも同一アカウント)発行する。
b) 携帯サイトでmailto:で設定されたメールアカウントをクリックする
c) 画像をメールに添付して送信する
d) 携帯サイトでは、初めて送信元のメールアドレスから画像が投稿された場合は、ユーザに確認メールを返す。２回目以降は、fに進む。
e) 確認メールにあるリンクをクリックすると、twitterアカウントでの認証画面が表示され、認証が完了すると送信元メールアドレスとtwitterアカウントがひもづけられる。
f) 送信元メールアドレスと緋も付けられたtwitterアカウントで、APIを利用して画像共有サイトへ画像をPOSTする。

※ドメインの受信拒否、許可設定してもらう必要がありそう。
※送信元アドレスを管理する画面は必要になりそう？

３．さらに探してみると、メールでの投稿が可能で、APIにて送信先メールアドレスの取得が可能なサービスが存在した。
http://groups.google.com/group/tweetphoto/web/fetch-user-settings
他にもメールでの投稿は可能な画像共有サイトは存在するが、送信先のメールアドレスを自動で取得できなかったりする。
私が把握しているのは今のところhttp://www.tweetphoto.com/index.phpのみ。ご存知でしたら教えてください__
これで、携帯サイトでは、メールアドレスをリンクさせとくだけでよくなる。

例
a) 画像共有サイトのAPIを利用して、送信先メールアドレスを取得する。
b) 携帯サイトでmailto:で設定されたメールアドレスをクリックする
c) 画像をメールに添付して送信する

※ユーザの利用シーケンスは(２.例１)とほとんど変わらない。
※携帯サイトで事前に何も設定する必要がない

おぉー
求めていたのは、これです!
http://twitter.com/kazkicks/status/3140967163

これでサクッと、画像投稿をサポートできます。

ただし、以下の問題点があります。

~~日本語が文字化けします。（※結構いたい！)~~
※tweetphotoからplixiにサービス名が変わり、日本語にも対応したようです。
APIで、直接ポストするわけではないので、sourceにアプリケーション名を設定したりできない。

柔軟に対応したい場合は、２の方法を取ってください__
とりあえずアップロードできればよい人は楽ができると思います。

以下、TweetPhotoから画像アップロード用のメールアドレスを取得するサンプルコードです。

<?php
function simplexml_load_with_get($url, $querys=array(), $headers=array()) {
        $data = "";
        if ($querys) {
                foreach ($querys as $key => $value) {
                        if ($data != "") {
                                $data .= "?";
                        }
                        $data .= $key."=".urlencode($value);
                }
        }
        $header = array();
        if ($headers) {
                foreach ($headers as $key => $value) {
                        array_unshift($header, $key.": ".$value);
                }
        }
        $ch = curl_init();
        if ($data != "") {
                if (ereg("\?", $url)) {
                        $url .= "&".$data;
                }
                else {
                        $url .= "?".$data;
                }
        }
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        //curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
        //curl_setopt($ch, CURLOPT_MAXREDIRS, 20);
        if ($headers) {
                curl_setopt($ch, CURLOPT_HTTPHEADER, $header);
        }
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        $res = curl_exec($ch);
        $info = curl_getinfo($ch);
        curl_close($ch);
        if ($info['http_code'] != 200) {
                return $info;
        }
        else {
                return simplexml_load_string($res);
        }
}

function getTPMailAddr($screenName, $password) {
        $header = array(
                "TPAPI" => $screenName.",".$password
        );

        $profile = simplexml_load_with_get("http://tweetphotoapi.com/api/tpapi.svc/signin", null, $header);
        if (isset($profile['http_code'])) {
                echo "signin error:" .$profile['http_code'];
                return false;
        }
        $id = $profile->Id;
        $setting = simplexml_load_with_get("http://tweetphotoapi.com/api/tpapi.svc/users/$id/settings", null, $header);
        if (isset($setting['http_code'])) {
                echo "setting error:" .$setting['http_code'];
                return false;
        }
        return $setting->Email;
}

echo getTPMailAddr("screename", "password");
?>

最終行から２行目の"screenname"と"password"は差し替えてください__

http://twitter.com/TweetPhoto/status/3376923315
~~３日間ほどTweetPhoto経由で、ログインできなくなっていた現象が発生していて、ブログの投稿ができませんでしたw~~