[JavaScript]painting on canvas

マウスで絵を描く→pngで保存 というものです。
jsとphpで出来ています。
「保存」を押したときのリアクションはtwitterっぽくしてあります。
canvasタグの使い方はこちらが詳しいです。HTML5.jp – Canvas
「みんなの絵を見る」機能無しのflashバージョンはこちら[Flashからjpg]

HTML5.jpによると下記の環境で動きます。IEは論外。
Firefox 2以降
Safari 4以降
Google Chrome 2以降
Opera 9.2以降

キャンバスドラッグ:線を引く
「太」の数字変更:線の太さ変更
カラーパレットクリック:色選択
「保存」クリック:pngで保存
「消去」クリック:キャンバスを真っ白に
「みんなの絵を見る」:みんなの絵一覧
サムネイルクリック:pngオリジナルサイズを別ウィンドウで開く

painting on canvas


さて、次は何を作ろうか。

[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;