history.pushState、history.replaceState - 素人がプログラミングを勉強していたブログ
HTML5のhistory.pushState、history.replaceStateを試した。 HTML5 pushState/replaceState demoで動かせる。 Minefieldだと完全に意図した通りに動くがWebKitだとURLまわりがうまくいかない。 メインのソースコードは下記の通り。 canvasで適当に壁紙用画像を作るデモで、画像自体をクリックして何度も作り直せるようにした。 こういう物を作るときは、前の画像に戻れるよう履歴管理をすべきだが、今まではlocation.hashを使ったり（hashchangeイベントが入るまではタイマーが必要だった）iframeを使ったハックだったり（ブラウザ間の互換性やhistory.go(-2)をきちんと動かすのが難しい）、あるいはページを遷移する（必要ない部分まで毎回読み込まれる）必要があった。 pushState/repl
ベンチマーク for canvasタグとcanvas on Flash 2010 - yukobaのブログ
追記：canvasタグを8倍高速化する方法＆FlashCanvasが4倍速くなった - yukobaのブログも合わせてご覧ください。 最近、canvasタグを利用したアプリの高速化に励んでいます。何か良いベンチマークはないかなと思い探していたら、「CanvasのdrawImageのベンチマーク - yukobaのブログ」からリンクを張ってあるベンチマークに行き当たり、最初、「へぇ〜こんなの作った人がいたんだ」とか思って、ドメインをよく見たら1年半前の自分でした orz というわけで、それの2010年バージョン。パワーアップします。 まず、最近、FlashCanvas Pro と uuCanvas.js というcanvasタグをFlash上で使えるようにする、非常に良いライブラリが出ました。古典的には、VML on IEを使ったライブラリが有名なのですが、スピードが遅い上、全てのAPIをサポ
html5で videoの任意のフレームをcanvasに描画するメモ - 超自己満足プログラミング
デブサミ2010のhtml5セッションで見たデモ（Movement tracker）*1 が、 衝撃的だったので video x canvas をちょっと勉強した。 １．videoの任意のフレームをそのままcanvasに描画させてみる htmlのbodyに書くにはこれだけ。 <video id="v" src="video.ogv" autobuffer controls></video> <canvas id="c"></canvas> <input type="button" value="copy frame" onclick="copyFrame()" /> copy frameボタンで呼び出されるjavascriptはこんな感じ。 function copyFrame() { var cEle = document.getElementById('c'); var cCtx =
Webブラウザで動画編集！ - Yanagi Entertainment
html5で videoの任意のフレームをcanvasに描画するメモ - 超自己満足プログラミング http://d.hatena.ne.jp/favril/20100225/1267099197 昨日この記事を見て、これはすごい！ すごいすごい！ ってなって、これができるんならWebブラウザだけで動画編集できるんじゃね？ と思ったりしたので、ざっくり作ってみました。 http://yanagiatool.appspot.com/jsvideo/player.html （MacのSafari4で動作確認。QuickTime + ChromeならWindowsでもいけるかも？） あそびかた 「動画を読み込む」ボタンを押すと、テキストボックスに入ってるurlの動画を読み込みます。「state」って書いてあるところが「stand by」になったら「再生 / 停止」ボタンを押してください。 あとは
JavaScriptでwavファイルを読み込んで波形表示するサンプル - Yanagi Entertainment
動画でリッチなことできるんなら音声でもできるんじゃね？ と思ったので書いてみました。 http://yanagiatool.appspot.com/jsaudio/load.html （FireFox3.6系列のみ） ローカルからwavファイルを画面にドラッグアンドドロップしてみてください。ゆっくり波形が表示されます。 読み込めるwavファイルの形式は16bitステレオのみです。 仕組み File APIを使ってます。 FileReaderでファイルの中身をStringとして読み込んで、ヘッダをチェックして、データ部を適当にエンディアン変換しながら表示してます。 File APIの使い方やバイナリの扱い方などは W3C File APIを使ってJavaScriptでファイル加工 - しばそんノート http://d.hatena.ne.jp/shibason/20100111/126319
JavaScriptで波をつくろう。リアルタイム波形生成＆再生 - Yanagi Entertainment
前のエントリでこんなことを書きました。 JavaScriptで波形データを読み書きすることができる。しかし再生するのは難しい。 HTML5のaudioタグとData URIを組み合わせればできないこともないが、コストが大きすぎる。 コストが大きいのは音声ファイルが大きいからです。50MBある波形をいちいち変換してられません。 でも小さい波形ならできるかもしれない！ ということでやってみました。 基本的なアイディア 波形データをつくる（数値の配列） 波形をバイナリ列に変換する バイナリ列にWAVヘッダを付加する Base64エンコード audioタグのsrc属性に指定 audioを再生 つくったもの http://yanagiatool.appspot.com/jsaudio/mmltest.html シンプルなMMLプレイヤーです。JavaScript + HTML5。 ベロシティとかルー
勝手に添削: Selection内のHTML Textをいい感じに取得する: Days on the Moon
というわけでやってまいりましたこのコーナー! 本日のお題は「Selection内のHTML Textをいい感じに取得する - 枕を欹てて聴く」でございます。選択範囲のHTMLソースを抜き出すというやつですね。では早速いってみましょう! if(src.focusNode){ // selection まずは HTML5 テキスト選択 API の Selection オブジェクトが登場! 以後これに対する操作が続きます。しかしこの Slection オブジェクト、getRangeAt メソッドを使うとなんと選択範囲に対応する DOM 2 Traversal and Range の Range オブジェクトが取れちゃうんです! // common parent node search (以下 21 行省略) それ Range#commonAncestorContainer で取れるよ! // c
canvasタグを8倍高速化する方法＆FlashCanvasが4倍速くなった - yukobaのブログ
最近、ブログを書いて、毎回、読んだくださった方から、貴重な情報を教えてもらっています。大変ありがとうございます。 ベンチマーク for canvasタグとcanvas on Flash 2010 - yukobaのブログですが、コメント欄＆http://www.revulo.com/blog/20100311.html#p01によると、drawImage()で渡す座標は、仕様上 "float" となっているのですが、ここに "int" を渡すと高速化するそうです。具体的には、Math.random() * 750 を Math.random() * 750 | 0 にします。"| 0"で、float → int です。 また、FlashCanvas Pro は今、1.2 α3 ですが、1.2になって、高速化したので（上のブログ参照）、それを含めてテストしてみました。 ブラウザ 時間 高速化
W3C File APIを使ってJavaScriptでファイル加工 - しばそんノート
現在W3Cで仕様策定が進められているFile APIを使うと、JavaScriptからローカルファイルの情報や内容にアクセス出来るようになります。 Firefoxでは3.0時代から似たような機能が実装されていたようですが*1、今回やや仕様を変更した上で標準化されます。 まだワーキングドラフトの段階ですが、Firefox 3.6 RC1*2に既にほとんどのAPIが実装されていますので、今すぐに使ってみることができます。 そこで、試しにこんなサンプルを作ってみました。Firefox 3.6で以下のページにアクセスしてみてください。 JavaScriptでネガポジ反転 ファイル選択欄でビットマップファイル（.bmp）を選択、あるいはブラウザにドラッグアンドドロップすると、その画像をネガポジ反転（階調の反転）して表示します。複数選択も可です。*3 *4 ↓実行例 ファイル加工の際にサーバと一切通信
HTML5 Canvas のarcTo関数の実装が未だにorz - 風と宇宙とプログラム
２年近く前にCanvas APIの実装状況を網羅的に調査したことがありますが、ブラウザごとに実装がいろいろ異なっていていました。その中で一番目立ったのがarcTo関数の実装の違いです。改めて調べてみました。 ブラウザのバージョンは以下です。 Chrome Safari Opera Firefox 4.0.249.43 4.0.4(531.21.10) 10.10 3.5.7 IEはExplorerCanvas r3を見てみましたがarcToは実装されていませんでした。 テストケース 今回、新たに簡単なテストケースを作りました。左図のような絵を描画するものです。arcToだけを使って描画しています。ちょっとキモイ絵になってしまいした。 Chromeではこうなります まあまあですが、描かれるべき線と左目の点がありません。 左目の点がないのは、arcToの問題もありますが、さらに長さゼロの線に対
2010年のJavaScript：「これまで」と「これから」 | gihyo.jp
2010年のJavaScriptと題しまして、JavaScript周辺の「これまで」と「これから」についてまとめてみたいと思います。 2009年までのJavaScript JavaScriptは各ブラウザベンダなどが個別に実装するという特殊性から、ブラウザ（実装）ごとの非互換性の問題に悩まされ続けてきた言語です。まず、そのJavaScriptの歴史を簡単に振り返ってみます。 ECMA-262 3rd editionとスピードコンテスト JavaScriptはNetscape社によってLiveScriptという名前で誕生し、その後ECMAScriptとして標準化が進みました。1999年12月にECMA-262 3rd editionが策定されてから、Internet ExplorerのJScript、MozillaのSpiderMonkey（TraceMonkey）、SafariのJav
JavaScriptで画像のオフラインキャッシュを実装する - KAYAC Engineers' Blog
もうすぐクリスマスシーズンなんですかね？本間です。 巷で話題のイケメンホイホイ（以下イケホイ）ですが、このたびiPhone用サイトがオープンしました。 それにあわせて新機能も搭載！イケメン写真にタグを付ける機能と、iPhoneでぼんやり眺めているだけで楽しいビューア機能です。 タグ機能はPC版にも搭載されましたので、ぜひぜひみんなで色んなイケメンにタグを付け合ってくださいね。 タグが付くことで、オススメの精度が上がりますよ！ ビューア機能は、自分がゲットしたイケメンズがiPhone上で次から次へと表示される機能です。 オフラインでも表示できる機能付き！ 電車の中で見るも良し、卓上に置いて眺めるも良しです。 あなた好みのイケメンがゾロゾロ。イケメンホイホイのサイトはこちら！ …うーん、ユーザ層がかぶらなそうだな、この記事。 さてさて、本題はHTML5の機能を使った画像のオフライン表示について
HTML5 Web Database向けのO/R Mapper「AlexRecord」を書いてみました。 - IT-Walker on hatena
詳しいドキュメントとダウンロードはこちらから。 オンラインデモはこちらから（要WebDatabase・・・つまりSafari4で見てください） AlexRecordってプロダクトをリリースしました。 HTML5 Web DatabaseをベースとしたO/R Mappingフレームワークです。 コーディングに要した作業時間は1.5日くらいなんで、テストは甘甘で、ソースは汚いです。。 が、一応いろいろできるようにはしてあります。 テーブルの作成／削除 レコードの保存／削除 ActiveRecordパターンの実現 参照先テーブルもプロパティとして取得できる（現在のところ、one-to-many関連や遅延フェッチには対応してません） クエリの抽象化と流れるようなインターフェース イベントハンドリング AlexRecordを用いると、文字列操作をガリガリ行ってSQLを組み立てる手間が必要なくなり、オ
HTML5 Web Database仕様を、Gearsを使って実装しました。 - IT-Walker on hatena
HTML5 Web Databaseを、Gearsを使って実装しました。 どうせなら、Web Database以外のAPIもGearsで実装するようなプロジェクトにしてはどうかと思い、新しくGoogle Codeにプロジェクトも作成しました。その名もです。ルフィにカッコよく必殺技コールしてもらいたいです。 一番の利点は、Gearsがインストールされていればどこでも動くことです。Gearsは、Internet Explorer6+、Firefox 1.5+、Safari3.1.1+、Chrome1.0+あたりで動きます（残念ながら、Firefox3.5にはまだ未対応）。IE6で、HTML5のWebアプリ用APIが使えたら結構素敵じゃないですか？ Gearsは2年くらい前にGoogleがリリースしたオープンソースプロダクトで、ブラウザプラグインとして動作し、ブラウザに対して様々な機能を付け加え
fakeworker.js - HTML5 Web Workersをeval()とsetTimeout()で実装しました - IT-Walker on hatena
タイトルの通り、HTML5 Web Workersを、eval()とsetTimeout()で実装したライブラリ、「fakeworker.js」をリリースしました。 これが何の役に立つかと言うと、Web Workersのデバッグです。 というのも、Web Workersのデバッグは非常に大変だからです。 現時点では実行中のワーカをソースコードレベルでデバッグできるブラウザが存在しない ワーカはDOMにアクセスできないため、ロギングも困難 fakeworker.js は、こうした状況を少しでも改善するために作成された、Web Workersの簡単な実装系です。 fakeworker.jsは単純なeval()を用いてワーカを生成し、setTimeout()を用いて非同期メッセージングを行うため、現在のブラウザが備えるデバッガ（Webkitの開発者用コンソールやFirebugなど）を用いてワーカ
HTML5のscript要素でasync, deferを使ってパフォーマンスアップ - IT-Walker on hatena
http://code.google.com/speed/articles/html5-performance.html JavaScriptの高速化手法を紹介する、Googleのプロジェクト「speed」がリニューアルしたと言うので見てたら、「HTML5でパフォーマンスアップ」てなタイトルがあったので「なぬ？」と思って読んでみました。 HTML5使ってもそんな効力得られないだろう・・・と思って読んでみたら、「HTML5の記法を使えばnバイト節約」みたいなチョコザイな手法が主だったのでちょっと苦笑(^^; とはいえ、script要素に今度から加わるasync属性について等は、日本語で説明されている記事がほとんどないので、全体的に要約しておきます（あくまで翻訳ではなくて要約。時間がないので超適当です。正確なところは原文を読んでください）。 DTD HTML4までは以下のように書かなきゃいけな
画像編集するHTML5デモ - Underconstruction by Taiyo
HTML5 3DaysのHackathonでプロトタイプを作成したpbeditのオンラインデモンストレーションを公開した。 http://web.me.com/t_trace/pbedit/image_loader.html 並んでいるサムネイルをクリックすると編集画面へ移動し、RGBチャンネルのスケール編集が可能です。 動作環境はSafari 4.0（検証してないだけですが）。 ローカルファイルから実行するとクリップボード経由で編集する画像を読みこんで編集できます。 ローカル実行のために.zipで固めたファイルはgithubからどうぞ。 http://github.com/ttrace/pbdit/downloads このデモンストレーションを作成するにあたっていくつかHTML5 3Daysで提案されていたことを試みました。 1. Web Workersを用いた非同期処理 2. Web
Mozilla Party 10 の資料 - 最速チュパカブラ研究会
Mozilla Party 10 でcanvasの話をしてきましたので資料を公開します。 http://www.slideshare.net/gyuque/mozilla-party-2009-canvas-programming デモは以下のURLにあります http://gyu.que.jp/jscloth/touch-opera-gecko.html 海外からのゲストのために通訳がついていたのですが、ボランティアの学生さんだったそうです。普通にお金を出して依頼したものだと思っていたので、閉会の挨拶のときに知ってびっくりしました。 会場の質問で Flash と比べてどうなんだと聞かれ、今の時点では、自分が仕事で Web ページを作る立場だったら無難に Flash を使うと答えました（「ねる。」はあくまで趣味なので、IE なんて気にせず canvas を使えたわけです）。 悲しいことに、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
video and canvas « aduca
Mr Speaker presents: Parcycle. A HTML5 Canvas Particle System