Lynx-EyEDの電音鍵盤 新館

制御とか数学とか駄文とか

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と出るはず。
f:id:Lynx-EyED:20141205221226p:plain
なにか時間経過で変化する事象をツイートする必要があれば、setInterval()などを使って上記関数を繰り返してもいいかもしれません。