JavaScriptでStewgate U経由でTwitterにポストする
半年近くブログ書いてない...
よく、OAuth非対応なArduinoやmbedや組み込みLinux機器から投稿する例は見るのですが、プレーンなhtml+JSでStewgate使うにはどうしたらいいのかなと悩んで、解決した後すぐ忘れてしまうのでメモ書き。
StewGate U: Throw your stuff into the stewittering pot.
ツイッタアカウントでログインすると、トークンというものがもらえます。
使い方 以下のURLにPOSTデータを送ると、StewGate UからTwitterアカウントに ポストできます: http://stewgate-u.appspot.com/api/post/ POSTデータ: _t = (ここに取得したトークン) msg = "あなたの送信したいメッセージ" * UTF-8、URLエンコード済みにしてください。 * メッセージに "%(name)s" を含めると、トークンの名前に置換されます。 応答: OK (ポスト成功) エラーメッセージ (ポスト失敗)
と、あるので、(以下に続く)
XMLHttpRequestを使った例
というわけで、トークンをもらったら以下のコードを書きます。投稿後のレスポンスを取得したかったのでXMLHttpRequestを使いました。
var fd = new FormData(); fd.append("_t", "(取得したトークン)"); fd.append("msg","(ポストしたいメッセージ)"); var xhr = new XMLHttpRequest(); xhr.open("POST", "http://stewgate-u.appspot.com/api/post/"); xhr.onload=function(){ (レスポンスxhr.responseを表示するなりなんなり) }; xhr.send(fd);
ちなみにTwitterは同じメッセージを連投できないので、メッセージに投稿時間や乱数を付け加えるのがいいと思います。
コピペ用全文
tweetした時間を投稿します。
スマートフォンなどからも使い易いようにスタイルシートを適用しています。
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" target="_self"> <style> .btn { font-family: Arial, Helvetica, sans-serif; font-size: 28px; color: #fff; padding: 12px 18px; background: #8893da; background: -webkit-gradient( linear, left top, left bottom, from(#8893da), to(#344c77) ); border-radius: 10px; -webkit-box-shadow: 12px 12px 12px rgba(000, 000, 000, 0.3), inset 0px 0px 0px rgba(255, 255, 255, 0); text-shadow: 10px 10px 10px rgba(000, 000, 000, 1), } </style> <script type="text/javascript" charset="utf-8"> function postForm(){ var fd = new FormData(); var date_str = new Date(); fd.append("_t", "(取得したトークン)"); fd.append("msg","ただいまの時刻は"+date_str.getHours()+"時"+date_str.getMinutes() +"分"+date_str.getSeconds()+"秒です。"); var xhr = new XMLHttpRequest(); xhr.open("POST", "http://stewgate-u.appspot.com/api/post/"); xhr.onload=function(){ document.getElementById("stat").innerHTML = xhr.response; // レスポンスの表示 }; xhr.send(fd); } </script> </head> <body> <div> <button class="btn" onclick="javascript:postForm()">POST_XHR</button> </div> <div id="stat"></div> </body> </html>
UTF-8エンコードで保存して、ブラウザから投稿テストします。POST_XHRのボタンを押すとTwitterにポストします。
うまくいけば、投稿ボタン真下にOKと出るはず。
なにか時間経過で変化する事象をツイートする必要があれば、setInterval()などを使って上記関数を繰り返してもいいかもしれません。