2011年7月20日水曜日

HTML5のpushState

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

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

下記にコードを示します。
  1. <html>  
  2. <head>  
  3. <script>  
  4. function push_history() {  
  5.   history.pushState("", "", "/example");  
  6. }  
  7. </script>  
  8. </head>  
  9. <body>  
  10. Hello, World!  
  11. <form>  
  12. <input type="button" value="button" onclick="push_history()" />  
  13. </body>  
  14. </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ライブラリを使って、
下記のコードを書きました。

  1. #!/usr/bin/ruby  
  2. require 'rubygems'  
  3. require 'oauth'  
  4.   
  5. consumer = OAuth::Consumer.new(  
  6.   "Consumer Key",  
  7.   "Consumer Secret",  
  8.   :site => "http://twitter.com"  
  9. )  
  10. token = consumer.get_request_token  
  11. puts token.authorize_url #リダイレクト先のURL  
  12. pin = gets.chop  
  13. access_token = token.get_access_token(:oauth_verifier => pin)  
  14. puts access_token.token #アクセストークン のtoken  
  15. puts access_token.secret # アクセストークンの secret  

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

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

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

  1. #!/usr/bin/ruby  
  2. require 'rubygems'  
  3. require 'twitter'  
  4. require 'twitter/console'  
  5.   
  6. Twitter::Client.configure do |conf|  
  7.   conf.oauth_consumer_token = "Consumer Key",  
  8.   conf.oauth_consumer_secret =   "Consumer Secret",  
  9. end  
  10.   
  11. twitter_client = Twitter::Client.new(:oauth_access => {  
  12.   :key => "Access Token Key",  
  13.   :secret => "Access Token Secret"  
  14. })  
  15.   
  16. twitter_client.status(:post"Hello, World");