alt » Javascript http://blog.alt-scape.com alt-scape weblog Sat, 03 Dec 2011 18:00:33 +0000 http://wordpress.org/?v=2.8.4 ja hourly 1 JavascriptでH.264のビデオをデコード(再生)する「Broadway.js」 http://blog.alt-scape.com/archives/431 http://blog.alt-scape.com/archives/431#comments Fri, 04 Nov 2011 04:43:31 +0000 alt http://blog.alt-scape.com/?p=431 またスゴいのが出てきたけど、このJSビデオデコーダよりもEmscriptenの方に驚きました。
これ使えば比較的簡単にC言語資産のライブラリとか移植ができそう。
似たようなアプローチだとGoogleのNative ClientやAdobeのAlchemyがありますが
どちらもブラウザプラグインなので、プラグインなしならコレ。
あとJS変換のライバルはllvm-js-backendというのもあります。

とりあえずメモだけ。
下の翻訳間違ってたらすみません。


Broadway.js
https://github.com/mbebenita/Broadway


デモ：
http://mbebenita.github.com/Broadway/broadway.html


説明：
Mozillaの開発者であるMichael Bebenitaが、H.264ビデオフォーマットのJavaScriptデコーダを公開。
ブラウザ上でネイティブに動作することを意図するこのJavascriptデコーダは、
既存のH.264デコーダ（C言語で書かれたAndroidで使用されているH.264デコーダ）を簡素化し、
C/C++のコードをコンパイルしたLLVMビットコードをEmscriptenを使用してJavascriptに変換している。
このデコーダは、従来のハードウェア構成のままで30fpsの実行速度を保ちながらビデオを表示できる。
ソースコードはGitHubにアップされているので誰でも参照できる。
改善余地はWebGLを使用してGPU経由で並列処理を行うなど。
現在の動作環境は、Firefox、Chrome、Safari、Operaはいけてるっぽい。


Emscripten：
Emscripten is an LLVM-to-JavaScript compiler. It takes LLVM bitcode – which can be generated from C/C++, using llvm-gcc or clang, or any other language that can be converted into LLVM – and compiles that into JavaScript, which can be run on the web (or anywhere else JavaScript can run).


プレゼン動画：
http://yfrog.com/nmng0z


]]> http://blog.alt-scape.com/archives/431/feed 0 ログ出力ライブラリ「Blackbird」をスマートフォンで使ってみる http://blog.alt-scape.com/archives/424 http://blog.alt-scape.com/archives/424#comments Thu, 20 Oct 2011 15:54:24 +0000 alt http://blog.alt-scape.com/?p=424 スマートフォンのためのリモートデバッグ環境その1 – weinre
スマートフォンのためのリモートデバッグ環境その2 – JSconsle

とみてきましたが、
もっと単純にログ出力だけで十分という方にはコレがよさそうです。

Blackbird
http://www.gscottolson.com/blackbirdjs/

画面の端っこにログ出力用コンソールが表示されるので
PC向けというよりはスマートフォンなどのログ情報が確認しにくい環境で役に立ちそうです。
iPhone、Androidは上記のweinreやJSconsle使うとしても、
Windows Mobile6.5(IE6)やBlackBerryなどWebSocket使えない系のブラウザには試す価値アリ。


ライブラリのjsとcssを読み込んで以下の通りに打てばコンソール内に出力されます。
log.debug( 'this is a debug message' );

log.info( 'this is an info message' );

log.warn( 'this is a warning message' );

log.error( 'this is an error message' );

Public APIには

log.toggle()　：　コンソールの表示・非表示切替
log.move()　：　コンソールを画面の左上・右上・右下・左下の4箇所に切替
log.resize()　：　コンソールのリサイズ（拡大・縮小）
log.clear()　：　ログのクリア
log.profile( label )　：　Javascriptの処理時間を出してくれるプロファイラ

が用意されています。
他にもキーボードによるショートカットキーやブックマークレットでこれらのメソッドを実行できたりもしますが、
スマートフォンでの問題はキーボードが使えないので
ブックマークレットでコンソールの表示・非表示を切り替える必要が出てきます。
ちょっとそれも面倒ですね。

iPhoneに限ってしまいますが、
jQueryプラグインのgShake使って、シェイクイベントをトリガーにするとか
最上面に画面いっぱいdivをひいて、ダブルタップされたら切り替えるとかですかね。

とりあえず作ってみたらうまくいきました。



<div id="test" style="width:100%; height:100%; z-index:999;">TEST</div>

<script src="jquery-1.6.1.min.js" type="text/javascript"></script>

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

<script src="jquery.event.dblTap.js" type="text/javascript"></script>

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

<link href="blackbird.css" type="text/css" rel="Stylesheet" />

<script>

$(document).ready(function() {

    

        log.debug( 'this is a debug message' );

        log.info( 'this is an info message' );

        log.warn( 'this is a warning message' );

        log.error( 'this is an error message' );

    

        $("#test").bind("dblTap",function(){

            log.toggle();

    });

    

        $(this).gShake(function(){

            log.toggle();

    });



});

</script>


]]> http://blog.alt-scape.com/archives/424/feed 0 スマートフォンサイト構築のためのリモートデバッグ環境その2 – JSconsole http://blog.alt-scape.com/archives/418 http://blog.alt-scape.com/archives/418#comments Tue, 27 Sep 2011 16:55:49 +0000 alt http://blog.alt-scape.com/?p=418


前回紹介したweinreに続いて、
JSConsoleというデバッグツールもよさげなのでテスト。
簡易的に使うなら便利だけど、正直Firebug並みのことはできないです。
あとセキュリティ面でもjsconsole.com側にDOMやクッキー情報が筒抜けなのでご注意をば。

サポート環境は
iOS 4.2.x – iPad, iPhone 4
Andriod 2.2.2 – Nexus One
webOS – Palm Pre

JSConsoleのソースはGitHubにあります。
https://github.com/remy/jsconsole


１．JSConsoleはサイト自体がデバッグコンソール画面となっているWEBアプリなので以下にアクセス。
http://jsconsole.com/

２．最上部の入力フィールドに「:listen」と打つとコネクション用のIDが発行されたJavascriptソースが表示される。


３．JSをコピペしてデバッグ対象のHTML内に挿入する。

４．HTMLファイルをサーバーへアップロードし、iPhoneやAndroidなどのスマートフォンでアクセスしてみる。

５．デバッグコンソールに
Connection established with http://xxx.com/xxx.html
と画面に出れば接続完了。


６．デバッグコンソールの入力フィールドにalert(”hello”);と打ってiPhoneにダイアログが出ればOK。
その他、「window.screen.width」と打ってリモートのwindowオブジェクトにアクセスしたり、
jQueryを使ったサイトなら$()でDOMを操作できるのが分かる。
もちろん、自作のJavascript関数も操作できる。

７．ちなみに「:help」と打つと、JSconsle APIを参照できる。

:load – 指定サイトのDOMが取得できる。 ← 使えなかったので未対応なのかな
:load jquery, underscore, prototype, mootools, dojo, rightjs, coffeescript, yuiなどのライブラリを読み込ませることができる。
例） :load jquery ← これでjQuery読み込めるっぽいけど、読み込み完了したのにこれも使えなかったよ
:listen [id] – リモートデバッグを開始する
:clear – コンソールのログを消去する
:history – 入力フィールドの履歴を参照する
:about – 不明


「JSconsle」iPhoneアプリ版
http://civic.xrea.jp/2011/03/03/jsconsole/
http://d.hatena.ne.jp/nakamura001/20100928/1285637617

「JSconsle」Androidアプリ版もあった
https://market.android.com/details?id=com.jgmcelwain.jsonsole&hl=ja


上のアプリを手に入れるなら、ついでにこれらのスマホと連携して使えるBluetoothキーボードも欲しい。




]]> http://blog.alt-scape.com/archives/418/feed 1 スマートフォンサイト構築のためのリモートデバッグ環境その1 – weinre http://blog.alt-scape.com/archives/423 http://blog.alt-scape.com/archives/423#comments Mon, 26 Sep 2011 11:05:16 +0000 alt http://blog.alt-scape.com/?p=423


スマートフォンブラウザのWebInspectorをリモートで実現するweinreが凄い
スマートフォン用ベージをデバッグする5つの方法


これらの記事みて自分の開発環境にもweinreを取り入れようと思い試してみました。

加速度センサーやGeo Location APIなんかのデバッグにも
PCのブラウザコンソールからCSSやJS弄ったりするのにもちょー便利。
iPhone、Android問わず、クロスデバイスで利用できるし。


－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
【localhost上でデバッグする】

１．下記サイトから「weinre-jar-1.5.0.zip」をダウンロード。
https://github.com/phonegap/weinre/archives/master

２．展開したフォルダを適当な場所に置く。

３．コマンドプロンプトでフォルダまで移動して「java -jar weinre.jar –httpPort 8080」を実行。


４．ブラウザで「http://localhost:8080/」にアクセス。

５．赤枠のブックマークレットをブラウザに登録。
※JSをデバッグ対象のサイトに埋め込んでもOK。


６．デバッグページを開く。
例）http://localhost:8080/client/#anonymous

７．シュミレータか新規ウィンドウを立ち上げて、デバッグしたい対象のページを開く。
（実機で確認したい場合は同一ネットワークの設定が必要）
例）http://www.google.co.jp/

８．さきほどのブックマークレットを実行するとデバッグ画面のTargetsがnoneから緑色のテキストに変わる。
ソケットにつながったのでゴリゴリデバッグ開始。

※対象のページにprototype.jsのバージョン1.7以前があるとエラーを起こす。



－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
【weinreのWEBサービス上でデバッグする】

実はわざわざローカルでjarを展開しなくても、weinreのWEBサービス（API）を利用すれば、
実機で直接サイトにアクセスしてリモートデバッグが可能。

１．http://debug.phonegap.com/にアクセス。

２．Step 1の入力フィールドに任意の文字列を入れる。

３．Step 2のJSをコピペしてデバッグ対象のサイトに埋め込む。

４．Step 3のデバッグページを開く。

５．スマートフォンで対象のサイトにアクセスする。

６．デバッグページのDEVICESのnoneが変わればゴリゴリデバッグ開始。


]]> http://blog.alt-scape.com/archives/423/feed 2 TweetボタンのパラメータをJavascriptで動的に変えるサンプル http://blog.alt-scape.com/archives/420 http://blog.alt-scape.com/archives/420#comments Tue, 06 Sep 2011 04:40:21 +0000 alt http://blog.alt-scape.com/?p=420 ブログなどWEBサイトに設置するTweetボタンですが、
Twitter APIを参考にするとTweet内容をパラメータで設定できるようになっています。

■aタグのhref属性にGETパラメータで設定
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

<div>

  <a href="http://twitter.com/share?url=http%3A%2F%2Fdev.twitter.com&amp;via=your_screen_name" class="twitter-share-button">Tweet</a>

</div>

■data Attributesにパラメータを設定（HTML5の独自データ属性）
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

<div>

   <a href="http://twitter.com/share" class="twitter-share-button"

      data-url="http://dev.twitter.com/pages/tweet_button"

      data-via="your_screen_name"

      data-text="Checking out this page about Tweet Buttons"

      data-related="anywhere:The Javascript API"

      data-count="vertical">Tweet</a>

</div>


やり方としては上記のaタグかHTML5の独自データ属性かの2パターンになります。
これを決めうちなり、サーバーサイドで予め仕込む分には問題ないですが、
内容をフォームから取得したりとユーザーのインタラクションによって
パラメータの中身が変わるときはJavascriptで制御する必要が出てきます。

Twitter APIはまずwidgets.jsという専用JSファイルを読み込んで
こいつがaタグ要素をiframeに書き換える仕組みになっているようです。
なので、事前にaタグ要素にパラメータを仕込むJavascriptサンプルを作ってみました。
BUTTONを押すごとに入力フォームの値をTWEETします。


aタグのhref属性に設定するサンプル

data Attributesに設定するサンプル
※こちらはjQueryの.data()メソッドがうまく読み書きできなかったので、Datasetプラグインを使用しています。


]]> http://blog.alt-scape.com/archives/420/feed 0 あなたのサイトを破壊するglitch.js http://blog.alt-scape.com/archives/410 http://blog.alt-scape.com/archives/410#comments Tue, 28 Jun 2011 16:17:18 +0000 alt http://blog.alt-scape.com/?p=410

@d_effekt氏によって作られたglitch.js。
名前の通り、指定した箇所にグリッヂ効果をかけてくれるJSライブラリです。
中身見るかぎり、HTML5のcanvasを使っているわけでもなく、
イベント・トリガー時に全体をiframeに格納して指定箇所の切り抜きを部分部分抽出して
オーバーレイヤーで表示しているだけっぽい？です。
なので、ソースいじればもっと細かくとか激しい壊し方もできますね。
ブラウザはChrome、Firefox4、IE8で動きました。

http://www.undef.ch/
http://www.undef.ch/uploads/glitch.zip

上記サイトからライブラリをダウンロードしてマイflickr画像を壊してみるテスト。アニメgifもいいかんじ。

やり方は下のソースのように
グリッヂしたい場所（タグ）にid=”glitchContent”というラッパーidをつける。
開始のタイミングはonclickとかonloadをトリガーにして
startGlitch()関数を実行してあげればOK。
サイトをまるごとグリッヂするならbodyに書いちゃえばいいです。


<link rel="stylesheet" type="text/css" href="http://blog.alt-scape.com/js/glitch/glitch.css" />

<script type="text/javascript" src="http://blog.alt-scape.com/js/glitch/jquery.js"></script> 

<script type="text/javascript" src="http://blog.alt-scape.com/js/glitch/jquery.timer.js"></script>       

<script type="text/javascript" src="http://blog.alt-scape.com/js/glitch/glitch.js"></script>

<div id="glitchContent" onclick="startGlitch()">

<p>...click anywhere to start the glitch...</p>

<img src="http://farm4.static.flickr.com/3490/4062880848_0913f52064_z.jpg?zz=1" />

</div>

]]> http://blog.alt-scape.com/archives/410/feed 0 iPhone（iOS4.2）の加速度センサーとジャイロセンサーの値をJavascriptで取得する http://blog.alt-scape.com/archives/397 http://blog.alt-scape.com/archives/397#comments Thu, 10 Feb 2011 06:20:19 +0000 alt http://blog.alt-scape.com/?p=397 去年の暮れにリリースされた「iOS4.2」から
WEBブラウザ（Safari）で加速度センサー、ジャイロセンサーのAPIにアクセスできるようになりました。
せっかくiPhone持っているんだし、試しにそれぞれの値をブラウザに出力してみます。

センサー値の取得はJavascriptのイベントにて行います。
まずiPhoneの傾きが変化するとdevicemotionというイベントが発生するので
window.addEventListenerで感知し、
関数に渡されるイベントオブジェクトのプロパティよりそれぞれの値を取得します。
別でdeviceorientationというイベントがありますが、
こちらでも回転の加速度のみ取得が可能です。


・傾きの加速度は、accelerationオブジェクト。
　（xが左～右、yが手前～奥、zが上～下）
・傾きの重力加速度は、accelerationIncludingGravityオブジェクト。
　（角度ではなく、重力加速度（9.80665）を基準にした値）
・回転の加速度はrotationRateオブジェクト。
　（alphaがz軸, betaがx軸, gammaプロパティがy軸）

※iPhone4は3軸加速度センサー＋3軸ジャイロセンサーとの組み合わせで、
前後左右上下の6軸の加速度、角速度、回転速度などの動きを詳細に検出可能ですが
iPhone3GSは3軸重力加速度センサーのみとなりますので取得できるのは
accelerationIncludingGravity.x
accelerationIncludingGravity.y
accelerationIncludingGravity.z
のみとなります。


詳しい解説はW3CやSafari公式をご覧ください。

DeviceOrientation Event Specification
http://dev.w3.org/geo/api/spec-source-orientation.html

Safari Developer Library
DeviceMotionEvent Class Reference
DeviceOrientationEvent Class Reference

]]> http://blog.alt-scape.com/archives/397/feed 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 2 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