さくらインターネット : mixi ボイスとTwitterへの同時投稿のプロトタイプ

関連する情報

▼ 実際の実装ページ
mixi ボイス投稿

関連する記事
さくらインターネット : PuTTY ごった煮版で SSH 接続
さくらインターネット : PuTTY ごった煮版 + FDclone
さくらインターネット : Ruby : rubygems-1.3.5 のインストール( + mechanize )
さくらインターネット : Ruby+mechanize : mixi ボイスへの投稿を php と連携して行う

Twitter 用の Ruby のコード

基本的に大差はありませんが、こちらではログインした後のページを、get で取得するのでは無く、
form.submit の結果として取得したものを使用しました

※ キャラクタセツトは utf-8 です。

最新 : 2010/05/02 現在

#!/usr/local/bin/ruby
print "Content-type: text/html\n\n"

require "cgi"
cgi = CGI.new

ENV['GEM_HOME']="/home/lightbox/gems"

$LOAD_PATH.push('/home/lightbox/lib')

require 'rubygems'
require 'mechanize'

agent = WWW::Mechanize.new
#twitterにログイン
page = agent.get("http://twitter.com/login")
form = page.forms[1]
form["session[username_or_email]"] = cgi['user2'][0]
form["session[password]"] = cgi['pass2'][0]
page = form.submit

#twitterのページより投稿
form = page.forms[1]
form["status"] = cgi['text2'][0]
result = form.submit

print result.body

※ 投稿ページの form の順序が変わっています

旧コード

#!/usr/local/bin/ruby
print "Content-type: text/html\n\n"

require "cgi"
cgi = CGI.new

ENV['GEM_HOME']="/home/lightbox/gems"

$LOAD_PATH.push('/home/lightbox/lib')

require 'rubygems'
require 'mechanize'

agent = WWW::Mechanize.new
#twitterにログイン
page = agent.get("http://twitter.jp/")
form = page.forms.first
form["session[username_or_email]"] = cgi['user2'][0]
form["session[password]"] = cgi['pass2'][0]
page = form.submit

#twitterのページより投稿
form = page.forms[1]
form["status"] = cgi['text2'][0]
result = form.submit

print result.body

PHP 側のコード

画面上には前もってもう一つフォームを用意しておいたので、それを使って Twitter 単独投稿は
すぐ実装できますが、同時投稿では mixi に投稿する時の onSubmit の function 内で JavaScript
で、Twitter 側のフォームを投稿しています。

<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=utf-8" />
<TITLE>mixi ボイス投稿</TITLE>
<STYLE type="text/css">
* {
	font-size: 12px;
}
.column {
	border-style:solid;
	border-width:1px;
	border-color:#000000;
	padding: 4px;
}
</STYLE>
<SCRIPT
	language="javascript"
	type="text/javascript"
	src="http://homepage2.nifty.com/lightbox/tabTEXTAREA.js">
</SCRIPT>


<SCRIPT language="javascript" type="text/javascript">

// *********************************************************
// local class
// *********************************************************
function lbox_local() {
	this.checkForm = function( ) {

		document.getElementsByName("text1")[0].value = 
			document.getElementsByName("text2")[0].value;


		if ( !confirm( "サーバーへ送信しますか?　　　" ) ) {
			return false;
		}

		if ( onlymixi == 0 ) {
			document.frm2.submit();
		}

		return true;
	}
}
// *********************************************************
// instance
// *********************************************************
var lbox = new lbox_local();
var onlymixi = 0;

</SCRIPT>
</HEAD>
<BODY>
<FORM
	name="frm1"
	method="POST"
	action="mixi_voice.rb"
	onSubmit='return lbox.checkForm();'
	target="Act"
	style='display:inline'
>
( mixi ボイスに投稿して、mechanize から戻された HTML をそのまま表示します )
<TABLE
	
	style='
		border-collapse:collapse;
		border-style:solid;
		border-width:1px;
		border-color:#000000;
		width:800px;
	'
>
<TR>
	<TD class="column" style='width:200px;'></TD>
	<TD class="column">
	<INPUT
		type="submit"
		name="send"
		value="mixi ボイスと Twitterに投稿"
		style='width:150px;'
		onSubmit='return lbox.checkForm();'
		onClick='onlymixi=0;'
	>
	&nbsp;
	<INPUT
		type="submit"
		name="send"
		value="mixi ボイスのみ投稿"
		style='width:150px;'
		onSubmit='return lbox.checkForm();'
		onClick='onlymixi=1;'
	>
	</TD>
</TR>
<TR>
	<TD class="column">メールアドレス</TD>
	<TD class="column">
	<INPUT
		type="text"
		name="user1"
		style='width:400px;'
	>
	</TD>
</TR>
<TR>
	<TD class="column">パスワード</TD>
	<TD class="column">
	<INPUT
		type="password"
		name="pass1"
		style='width:400px;'
	>
	</TD>
</TR>
</TABLE>
	<TEXTAREA name="text1" style='display:none'></TEXTAREA>
</FORM>

<FORM
	name="frm2"
	method="POST"
	action="twitter.rb"
	target="Twitter"
	style='display:inline'
>
( Twitter に投稿して、mechanize から戻された HTML を新しいウインドウで表示します )
<TABLE
	
	style='
		border-collapse:collapse;
		border-style:solid;
		border-width:1px;
		border-color:#000000;
		width:800px;
	'
>
<TR>
	<TD nowrap class="column" style='width:200px;'>Twitter 投稿</TD>
	<TD class="column">
	<INPUT
		type="submit"
		name="send"
		value="Twitter に投稿"
		style='width:150px;'
	>
	</TD>
</TR>


<TR>
	<TD class="column">メールアドレス(またはユーザ名)</TD>
	<TD class="column">
	<INPUT
		type="text"
		name="user2"
		style='width:400px;'
	>&nbsp;&nbsp;
	</TD>
</TR>
<TR>
	<TD class="column">パスワード</TD>
	<TD class="column">
	<INPUT
		type="password"
		name="pass2"
		style='width:400px;'
	>&nbsp;&nbsp;
	</TD>
</TR>



<TR>
	<TD class="column">テキストエリア</TD>
	<TD class="column">
		<TEXTAREA
			name="text2"
			cols="80"
			rows="10"
			onKeydown='SetTab()'
			onKeypress='SetTab2(event)'
		></TEXTAREA><br>
		<b>タブ入力が実装されています</b>
	</TD>
</TR>

</TABLE>
</FORM>

</BODY>
</HTML>

Twitter 結果ページの挙動

フレーム内に表示しようとすると、javaScript で Top ウインドウが書き換えられてログインページになります。
正しいブラウザとのやりとりでは無いので結果のページを新しいウインドウで表示しても、微妙に表示がおかしく
なっていますので、HOME リンクをクリックしてから通常の処理を行う必要があります。

ただ、これはプロトタイプなので直接結果を表示していますが、本来はリスト部分のみ取得して結果をフレーム
に表示する予定で、直接サービスへの処理を行う場合はブラウザからログインして行います