[flash]twitter on flash #1

おつかれさまです。

追記
※このコンテンツは2010年6月30日のTwitterのBASIC認証廃止と同時に使用不可になります。
TwitterのBASIC認証廃止、企業ユーザーが知っておくべきこと

twitterAPIを使ったtwitter on flashをつくりました。
flashからtwitterを見たり投稿したりできるというものです。
今はつぶやきを見る、投稿するの2つの機能しかありません。これから改良を続けるかどうかは未定です。
twitterみたいな文字主体のものをわざわざflashにする意味はあるのかと言われれば、
そんなものは無いのですが、おもしろければついやっちゃうよね。

スクリーンショット1

twitter on flash

ソースの話
flashは違うドメインにアクセスしようとするとセキュリティエラーが出てアクセスできません。
そこで実際のtwitterの処理はPHPで行っています。今回のflashでは下記のような処理をしています。
それぞれflashからPOSTでtwitterのid, pass及びtwitterAPIのurlを送信しています。

ログイン処理
urlはhttp://twitter.com/account/verify_credentials.xml

$url = $_POST['url'];
$id = $_POST['id'];
$pass = $_POST['pass'];
$ch=curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 3);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_USERPWD, $id.":".$pass);
$result=curl_exec($ch);
curl_close($ch);
echo $result;

つぶやき取得
urlはhttp://twitter.com/statuses/friends_timeline.rss

$url = $_POST['url'];
$id = $_POST['id'];
$pass = $_POST['pass'];
if($id=="" || $pass==""){
	echo file_get_contents($url);
}else{
	$url=get_url_with_idpass($url, $id, $pass);
	echo file_get_contents($url);
}
function get_url_with_idpass($a, $b, $c){
	$a=str_replace("http://", "", $a);
	$a="http://".$b.":".$c."@".$a;
	return $a;
}

投稿
urlはhttp://twitter.com/statuses/update.xml

$url = $_POST['url'];
$id = $_POST['id'];
$pass = $_POST['pass'];
$message = $_POST['status'];
$url = $url."?status=". rawurlencode($message);

$opts = array("http" => array(
"method" => "POST",
"header" => "Authorization: Basic ". base64_encode($id. ":". $pass)
)
);
$context = stream_context_create($opts);
$result = file_get_contents($url , false, $context);
echo $result;

[javascript]js_tween

お久しぶりです。夏の猛烈な忙しさで更新が滞っていました。
ひさびさの投稿ですがjsです。
flashにあるtweenクラスを移植しました。
アンカーへスクロールバーが移動するのですが移動のしかたが色々選べます。
さほどキレイでもないソースが見たいのならば
リンクを開いてキャッシュとか見ればよいとおもいます。
あと、まだfirefox3でしか動作検証してないです。
js_tween

[flash]Interface Interspersely

私が大学生時代、かれこれ5,6年前に作ったflashインターフェイス集のflashです。
このころ作ったものはかなりアレですが、経験が無い分自由奔放な挙動をしています。
ふと思い出して見てみたらネタとして使えるなぁと思い、これからこのインターフェイスたちを
Papervision3Dバリバリでリメイクしてみようと思います。リメイク制作は「やる気」と「勇気」と「仕事量」に
影響を受けるのでかなり鈍速で進めていきます。そしてやはり基本方針は
「ロマン > 実用性」 なのでそこんとこよろしく。

スクリーンショット1

Interface Interspersely

[Yahoo!ウィジェット]基本メモ

今更感がありますがYahoo!ウィジェット勉強中。
AIRのほうがインストール楽だし開発も楽だし色んなことできるのですが
知名度がYahoo!ウィジェットのほうがありそうなので習得しときます。
このエントリーでは基本をメモるです。

ウィジェットエンジンをダウンロードしてインストール。
http://widgets.yahoo.co.jp/download/

開発ツール、リファレンスはここ。
http://widgets.yahoo.co.jp/workshop/

ウィンドウを生成

var field=new Window();
field.title="frasio report";
field.width=480;
field.height=480;
field.visible=true;
field.shadow=true;

画像を配置

var im=new Image();
im.src="images/img00.png";
im.hOffset=10;
im.vOffset=10;
field.appendChild(im);

テキストを配置

var t=new Text();
t.hOffset=10;
t.vOffset=10;
t.size=12;
t.color="#000000";
field.appendChild(t);

入力テキストを配置

var texinput=new TextArea();
texinput.width=200;
texinput.height=150;
texinput.bgColor="#ffffff";
texinput.bgOpacity=255;
field.appendChild(texinput);

Flashを配置

var f=new Flash();
f.src="flash/item.swf";
f.hOffset=100;
f.vOffset=50;
field.appendChild(f);
//flash上はウィジェットをドラッグできない

Webを配置

var w=new Web();
w.hOffset=200;
w.vOffset=200;
w.width=280;
w.height=280;
w.url="http://www.yahoo.co.jp/";
field.appendChild(w);
//表示に時間がかかる
//jsが効かなかったり文字化けしたりして実用的ではない

オンライン上のxmlをロードして解析する。

get_xml();

function get_xml(){
	var url=new URL();
	var xmlstr=url.fetch("/test/20/test.xml");
	var xml=XMLDOM.parse(xmlstr);
	var myxml=xml.evaluate("metadata");
	var node=myxml.item(0);
	var str=node.evaluate("string(name)");
	log(str);
	//strにnameタグの「frasio report」という文字列が格納されている
}

ローカルのxmlをロードして解析する。

get_local_xml();

function get_local_xml(){
	var xmlstr=filesystem.readFile("test.xml");
	var xml=XMLDOM.parse(xmlstr);
	var myxml=xml.evaluate("metadata");
	var node=myxml.item(0);
	var str=node.evaluate("string(name)");
	log(str);
	//strにnameタグの「frasio report」という文字列が格納されている
}

テキストファイルをユーザ指定場所に保存する。

save_text("保存するテキスト");

function save_text(target_str){
	var destination=saveAs(".txt");//ユーザに保存先を指定させる
	if(destination==null)return;
	if(!filesystem.itemExists(destination)){
		filesystem.writeFile(destination, target_str);
		return true;
	}
	return false;
}

ファイルのドロップを受け付ける

field.onDragDrop=when_file_drop;

function when_file_drop(e){
	var files=e.items;
	var ft=get_filetype(files[0]);

	if(ft!="jpg")return;

	var img=new Image();
	img.src=files[0];
	field.appendChild(img);
}
function get_filetype(filepath){
	return filepath.toString().split(".").pop();
}

[FLAR]試作

今巷でウワサのFLARです。
このpdfを印刷してウェブカムで写せば赤緑青の立方体が現れます。それだけです。
ARはGPLというライセンスでソースコードを公開しなくてはならないらしいので
クソ汚いソースファイルを載せておきます。基本的に動けばいいぐらいで作っているので
中は大変なことになっています。
これを作るにあたってSaqooshaさんのサイトを参考にしました。この方すごいです。
http://saqoosha.net/flartoolkit/start-up-guide/
また、マーカーデータをつくるときはタロタローグさんのサイトを使用しました。
http://flash.tarotaro.org/ar/MarkerGeneratorOnline.html

スクリーンショット1

AR試作

[Papervision3D]triangle3D

久々にPapervision3Dでtriangle3Dです。
三角形ポリゴンにバラバラになって別の形にトランスフォーム!

スクリーンショット1

triangle3D

追記:すこし自分のためにコードのおさらい

Papervision3Dの三角形ポリゴンひとつだけつかうにはTriangleMesh3Dを使う。
毎回使い方わすれるのでメモ。

import org.papervision3d.core.geom.TriangleMesh3D;
import org.papervision3d.core.geom.renderables.Triangle3D;
import org.papervision3d.core.geom.renderables.Vertex3D;
import org.papervision3d.core.math.NumberUV;
var mesh:TriangleMesh3D = new TriangleMesh3D(mat, new Array(), new Array(), null );
var v0:Vertex3D= new Vertex3D( -10, -10, 0 );
var v1:Vertex3D= new Vertex3D( 10, -10, 0 );
var v2:Vertex3D= new Vertex3D( 0, 10, 0 );
mesh.geometry.vertices.push( v0 );
mesh.geometry.vertices.push( v1 );
mesh.geometry.vertices.push( v2 );
var uvA:NumberUV= new NumberUV( 0, 0 );
var uvC:NumberUV= new NumberUV( 1, 0 );
var uvB:NumberUV= new NumberUV( 0, 1 );
mesh.geometry.faces.push( new Triangle3D( mesh, new Array(v0,v1,v2), null, new Array(uvA,uvC,uvB) ));
mesh.geometry.ready = true;
scene.addChild(mesh);

DisplayObject3Dの面はgeometry.facesに格納されている。
アクセスするときはこんな感じ。

var meshface:Triangle3D=item.geometry.faces[0];

そしてこのDisplayObject3Dの面であるTriangle3Dには頂点が定義されている。
その頂点の情報はverticesに格納されておりx,y,zプロパティがある。
アクセスするときはこんな感じ。

var meshface:Triangle3D=item.geometry.faces[0];
var vx:Number=meshface.vertices[0].x;
var vy:Number=meshface.vertices[0].y;
var vz:Number=meshface.vertices[0].z;
//三角形ポリゴンなのでお察しの通りverticesはvertices[2]まである。

DisplayObject3Dの面Triangle3D(以下モデルMesh)に
外部のTriangleMesh3D(以下外部Mesh)及び外部Meshの面Triangle3Dをぴったし合わせるには
・モデルMeshの頂点定義から三角形の中心点の座標を計算して出す。
・その座標に外部Meshを移動させる。
・モデルMeshの頂点座標から外部Meshの座標を引く。
・出てきた値を外部Meshの面の各頂点座標に適応する。
という処理が必要です。
別にむずかしいことではないですね。
足し算して割り算して代入して引き算して代入って感じです。
ただこれだとモデルMeshが座標(0,0,0)にありrotationXYZが0の状態しか
形作ることができないので今後の課題にしておこう。