alt » Javascript http://blog.alt-scape.com alt-scape weblog Wed, 18 Aug 2010 18:08:49 +0000 http://wordpress.org/?v=2.8.4 ja hourly 1 Twitter Streaming APIを使ったFlashサンプル http://blog.alt-scape.com/archives/367 http://blog.alt-scape.com/archives/367#comments Fri, 28 May 2010 10:35:10 +0000 alt http://blog.alt-scape.com/?p=367 Twitter Stream API

Twitter APIのなかに
HTTP接続を開いたままにして、サーバ側から次々と更新情報をクライアントに送り出す
「Twitter Streaming API」というのがあります。

通常のRESTを使ったプル型とは違って、
サーバーからプッシュでリアルタイムにJSONが送られてくるので
それをパースしてフロントを作っていきます。
単位時間当たりのAPI利用回数制限の上限も気にしなくてよいです。


プッシュなので
APIと接続するところはFlashのSocketクラスを使って実装といきたいところですが
サーバー側は考えずに手っ取り早い方法として
以下のJavascriptライブラリを使ってみます。
（JSとの連携はAS3.0のExternalInterface.addCallback()で）

JavaScriptからTwitter Streaming APIを利用するためのライブラリ
http://wiki.livedoor.jp/staff_reader/d/Streaming%20API/JavaScript

サンプルのjson_viewer.html内に
LDReader.JSON.stringify(json)というストリームで流れてくるJSONデータがありますので
ここでFlashの関数を呼び出してJSONを引数で渡します。
あとは呼ばれる度にFlashでお好きなようにビジュアライズしてあげるだけ。

で、今回作ったもの。
「iPad」に関するタイムラインが流れてきます。
http://blog.alt-scape.com/swf/twitter_stream_api/
（いくら待ってもTLが流れてこない場合はブラウザの更新ボタンを押してみてください）

サンプルの流れ
１．Stream APIのJavasriptライブラリ使って情報が更新される度に毎回JS→Flashの関数をたたく。
２．引数で渡ってきたJSONデータをcorelibを利用してパース。
３．テキストを作成して下に向かって流す。
４．ある程度表示したらremoveChildでメモリーリーク対策。

]]> http://blog.alt-scape.com/archives/367/feed 0 スクロールバーの座標を取得するscrollTop http://blog.alt-scape.com/archives/266 http://blog.alt-scape.com/archives/266#comments Fri, 26 Dec 2008 05:14:11 +0000 alt http://blog.alt-scape.com/?p=266 Javascriptでスクロールバーの上端の座標を取得するとき、
こちら の記事を参考にすると、

document.body.scrollTop
document.documentElement.scrollTop
window.scrollTop

の３つのどれかで値がとれます。
onLoadのタイミングで取得すると、
大概のブラウザではスクロールバーが初期値に戻ってしまうため 0 が返ってきます。
ボタンアクションなどの任意のタイミングなら
IE、Firefox、Operaはdocument.documentElement.scrollTop
Safari(windows)、Google Chromeはdocument.body.scrollTop
で値がとれます。
ブラウザ分岐処理をせず、これをまとめてしまうには以下でOK！
Flashから呼んでも無事にとれた！

function getScrollPosition() {

　　return (document.documentElement.scrollTop || document.body.scrollTop);   

}

]]> http://blog.alt-scape.com/archives/266/feed 1 ThickboxをFlashから開く http://blog.alt-scape.com/archives/120 http://blog.alt-scape.com/archives/120#comments Mon, 29 Sep 2008 10:37:32 +0000 alt http://blog.alt-scape.com/?p=120

FlashからLightbox風にフローティングウィンドウを出してみたかったのでThickbox.jsを使ってみました。
まず ここ から必要なファイルをダウンロードしてきます。

通常は

＜HEAD＞内に
<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/thickbox.js"></script>

<link type="text/css" rel="stylesheet" href="css/thickbox.css" media="screen" />

をインクルードすれば

＜BODY＞内に
<a href="http://blog.alt-scape.com/img/record.jpg" class="thickbox">テキスト or 画像</a>

を記述するだけで簡単にThickboxできる。


テキスト or 画像


これをFlashからやりたい。
ExternalInterface.callでThickboxのTB_show関数をたたいてみます。

Fｌash側にはactionscriptで以下を記述するだけ。
import flash.external.ExternalInterface;

ExternalInterface.call("TB_show", "テスト", "img/image.jpg", "sample");


参考：http://www.project-nya.jp/modules/weblog/details.php?blog_id=727
参考：http://www.flash-jp.com/modules/newbb/viewtopic.php?topic_id=6734&forum=6

]]> http://blog.alt-scape.com/archives/120/feed 0