2011年7月20日水曜日

HTML5のpushState

HTML5には、
HistoryオブジェクトにpushState()とreplaceState()というメソッドが追加されました。

pushStateというのは、
Historyのリストに新しくエントリを追加してしまいます。
ページ遷移をしていなにのに、Hisotryが追加されるのです。

下記にコードを示します。
<html>
<head>
<script>
function push_history() {
  history.pushState("", "", "/example");
}
</script>
</head>
<body>
Hello, World!
<form>
<input type="button" value="button" onclick="push_history()" />
</body>
</html>

これにより、
現在のページが "http://foo.com/hello/index.html " だった場合、
ボタンをクリックするとURLが第3引数により、"http://foo.com/example" に変化しており、
戻るのリストをみると、1個Historyが追加されているのがわかります。
実際に戻るをクリックすると、URLバーが
"http://foo.com/hello/index.html "
に戻ります。

これで、ページを遷移していないのに、
Historyにエントリを追加して、URLを変更することができます。

Ajaxとこれを組み合わせた技術を "Pjax" と呼びますが、
これは別途まとめようと思います。

twitterのOAuth認証

OAuthっていうのは、
APIを使用する認証を行うための仕様のことで、
パスワードを第3者に教えることなく、トークンのやり取りだけで認証が行えるしくみのことです。

OAuthってなんなのかは、
ゼロから学ぶOAuthが参考になるとおもいます。

で、実際にtwitterでOAuth認証をおこなって、
つぶやくためのスクリプトを書きました。

まず、
http://dev.twitter.com/apps/
でアプリケーション登録を行います。
(登録には、twitterアカウントが必要です。)
で。Consumer Keyと Consumer Scretを取得します。

で、rubyのOAuthライブラリを使って、
下記のコードを書きました。

#!/usr/bin/ruby
require 'rubygems'
require 'oauth'

consumer = OAuth::Consumer.new(
  "Consumer Key",
  "Consumer Secret",
  :site => "http://twitter.com"
)
token = consumer.get_request_token
puts token.authorize_url #リダイレクト先のURL
pin = gets.chop
access_token = token.get_access_token(:oauth_verifier => pin)
puts access_token.token #アクセストークン のtoken
puts access_token.secret # アクセストークンの secret

token.authorize_url のURLをブラウザに貼付けてページ遷移すると、
リダイレクト先にpinコードが書いてあるので、
それをコピーして入力します。

そうすると、Accessトークンを取得することができます。

CosumerトークンとAccessトークン
あとは、twitterライブラリあたりで、
twitter APIを叩けばOKです。
以下は、ただ、"Hello, World" をつぶやくスクリプトです。

#!/usr/bin/ruby
require 'rubygems'
require 'twitter'
require 'twitter/console'

Twitter::Client.configure do |conf|
  conf.oauth_consumer_token = "Consumer Key",
  conf.oauth_consumer_secret =   "Consumer Secret",
end

twitter_client = Twitter::Client.new(:oauth_access => {
  :key => "Access Token Key",
  :secret => "Access Token Secret"
})

twitter_client.status(:post, "Hello, World");