またスゴいのが出てきたけど、このJSビデオデコーダよりもEmscriptenの方に驚きました。
これ使えば比較的簡単にC言語資産のライブラリとか移植ができそう。
似たようなアプローチだとGoogleのNative ClientやAdobeのAlchemyがありますが
どちらもブラウザプラグインなので、プラグインなしならコレ。
あとJS変換のライバルはllvm-js-backendというのもあります。
とりあえずメモだけ。
下の翻訳間違ってたらすみません。
続きを読む »
スマートフォンのためのリモートデバッグ環境その1 – weinre
スマートフォンのためのリモートデバッグ環境その2 – JSconsle
とみてきましたが、
もっと単純にログ出力だけで十分という方にはコレがよさそうです。
Blackbird
http://www.gscottolson.com/blackbirdjs/
画面の端っこにログ出力用コンソールが表示されるので
PC向けというよりはスマートフォンなどのログ情報が確認しにくい環境で役に立ちそうです。
iPhone、Androidは上記のweinreやJSconsle使うとしても、
Windows Mobile6.5(IE6)やBlackBerryなどWebSocket使えない系のブラウザには試す価値アリ。
続きを読む »
前回紹介した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
続きを読む »
スマートフォンブラウザのWebInspectorをリモートで実現するweinreが凄い
スマートフォン用ベージをデバッグする5つの方法
これらの記事みて自分の開発環境にもweinreを取り入れようと思い試してみました。
加速度センサーやGeo Location APIなんかのデバッグにも
PCのブラウザコンソールからCSSやJS弄ったりするのにもちょー便利。
iPhone、Android問わず、クロスデバイスで利用できるし。
続きを読む »
ブログなど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&via=your_screen_name" class="twitter-share-button">Tweet</a>
</div>
<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>
@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に書いちゃえばいいです。
続きを読む »
去年の暮れにリリースされた「iOS4.2」から
WEBブラウザ（Safari）で加速度センサー、ジャイロセンサーのAPIにアクセスできるようになりました。
せっかくiPhone持っているんだし、試しにそれぞれの値をブラウザに出力してみます。
センサー値の取得はJavascriptのイベントにて行います。
まずiPhoneの傾きが変化するとdevicemotionというイベントが発生するので
window.addEventListenerで感知し、
関数に渡されるイベントオブジェクトのプロパティよりそれぞれの値を取得します。
別でdeviceorientationというイベントがありますが、
こちらでも回転の加速度のみ取得が可能です。
続きを読む »
Twitter APIのなかに
HTTP接続を開いたままにして、サーバ側から次々と更新情報をクライアントに送り出す
「Twitter Streaming API」というのがあります。
通常のRESTを使ったプル型とは違って、
サーバーからプッシュでリアルタイムにJSONが送られてくるので
それをパースしてフロントを作っていきます。
単位時間当たりのAPI利用回数制限の上限も気にしなくてよいです。
続きを読む »
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);
}
<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" />
<a href="http://blog.alt-scape.com/img/record.jpg" class="thickbox">テキスト or 画像</a>
alt
HP
