要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話
2012 年 9 月 26 日 追記しました。 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5 のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。（ミスなどの指摘は @lowply までお願いします） もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。 そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった 2
Sketch.js - Simple Canvas-based Drawing for jQuery
Sketch.js is an easy-to-use jQuery plugin that allows you to create canvases upon which visitors can draw. The code is partially inspired by William Malone's drawing app tutorial as well as CanvasPaint. Installation To use Sketch.js in your project, just grab the latest sketch.js (or minified) from GitHub and include it in your project after jQuery. Documentation To see detailed documentation, tak
JavaScript Canvas Image Conversion
At last week's Mozilla WebDev Offsite, we all spent half of the last day hacking on our future Mozilla Marketplace app. One mobile app that recently got a lot of attention was Instagram, which sold to Facebook for the bat shit crazy price of one billion dollars. Since I wouldn't mind having a bill in my back account, I decided to create an Instagram-style app (which I'll share with you in the futu
ちょっとした工夫。ブラシ風入力にするだけでここまでスムーズな絵が描ける·HTML5 Canvas Brush Sketch MOONGIFT
HTML5 Canvas Brush Sketchはマウスの入力をブラシ風にして滑らかにドローできるソフトウェアです。 iPadやWebブラウザ上で絵を描く際に試してみたいのがHTML5 Canvas Brush Sketchです。単純にマウスを動かした線を引くのではなく、ブラシ風に描いてくれます。 こちらはライン版。普通にマウスの軌跡を描きます。 こちらはブラシ版。ぐっと良くなっています。 デモ動画です。 ちょっとした工夫と言えるかも知れませんが、目を塗りつぶしたりする際に効果を発揮しています。これなら失敗を気にせずさくさく描けそうです。 HTML5 Canvas Brush SketchはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこう見る Skitchというアプリケーションがあります。今は
Canvasを使ったオンラインイラストソフトウェア·RoCanvas MOONGIFT
RoCanvasはHTML5/JavaScriptで作られたCanvas上で自由にイラストを描けるソフトウェアです。 RoCanvasはHTML5で作られたドローソフトウェアです。簡単なイラストを描いて、みんなで共有したりするのにぴったりと言えそうです。 最初の画面です。色、サイズ、書き方を選択できます。 赤の自由線です。 四角を書いてみました。中を全て塗りつぶしたもの、枠線だけの二つが選べます。 色を変えることもできます。 保存しておくことができます。サーバに画像データがポストされるとのことです。RoCanvas自体にはサーバサイドの仕組みは実装されていません。 RoCanvasは色やサイズ、線または四角から選んで自由にCanvas上に絵を描けます。その結果はサーバ上に保存されるので共有するのにも使えるでしょう。 RoCanvasはHTML5/JavaScript製のオープンソース・ソフ
KineticJS
KineticJS is a fast, robust, HTML5 Canvas Library that is no longer maintained. The last stable version is v5.1.0, and it's pretty darn solid. You can find the github project here. I am also no longer maintaining the CDN which hosted KineticJS files. If your site was using KineticJS hosted on Amazon's S3 CDN services, I'm very sorry for having to pull the plug, but it was getting very costly. For
この発想はなかった。GIFアニメーションをCanvasで解析して自由に再生·jsgif MOONGIFT
jsgifはGIFアニメーションを解析し、一時停止したりリバース再生したりできるJavaScriptライブラリです。 GIFアニメーションは動画が当たり前になった現在、廃れるかと思ったのですが未だに好んで使われています。特にちょっとしたお笑い系動画をGIFアニメーションにしていると面白いです。そんなGIFアニメーションを再生、リバース再生など自由に操作できるようにするJavaScriptがjsgifです。 まず最初の表示です。全てGIFアニメーションになっています。 ブックマークレットを実行すると、赤い枠が表示されます。クリックするとフレームの解析が行われます。HTML5対応ブラウザ向けですが、Google Chromeではコントローラーがうまく表示されませんでした（SafariはOKでした）。 画像の下に操作するコントローラーが表示されます。 フレームに関する情報を表示しています。 色々
FileSaver.js demo
The following examples demonstrate how it is possible to generate and save any type of data right in the browser using the W3C saveAs() FileSaver interface, without contacting any servers. Saving an image Saving text <form id="text-options"> <label>Filename: <input type="text" class="filename" id="text-filename" placeholder="a plain document"/>.txt</label> <input type="submit" value="Save"/> </for
クライアントサイドだけでファイルを保存する·FileSaver.js MOONGIFT
FileSaver.jsはクライアントサイドでデータを生成しダウンロードするJavaScriptライブラリです。 Webアプリケーションが増える中、Webブラウザ上で作ったコンテンツをそのままエクスポートする時に使えるライブラリがFileSaver.jsです。 まず画像を保存するデモです。 こんな感じに適当にマウスで文字を書きます。 ファイル名をつけて保存ボタンを押すと保存が実行されます（ウィンドウ下部にダウンロードファイルがあります）。 ダウンロードされたファイルです。内容が動的に生成されているのが分かります。 同様にテキストの保存もできます。 テキストファイルの内容も動的です。UTF-8で作成されます。 HTMLファイルの保存もできます。 FileSaver.jsはコンテンツをCanvasタグにレンダリングし、それをダウンロードしているようです。HTML5対応ブラウザに限定されますが、
How To Create Web Animations With Paper.js — Smashing Magazine
The Web is just starting to use animation well. For years, animated GIFs and Flash ruled. Text moved and flashed, but it was never seamless. Animations had boxes around them like YouTube videos. HTML5 canvas changes everything about Web animation. The Web is just starting to use animation well. For years, animated GIFs and Flash ruled. Text moved and flashed, but it was never seamless. Animations
ローソクチャートや棒、折れ線グラフを作るHTML5グラフライブラリ·Rocketchart MOONGIFT
RocketchartはHTML5で作られたダイナミックなグラフライブラリです。 HTML5でできることがどんどん広がっています。今回紹介するRocketchartsもHTML5を駆使しています。そしてすごいグラフを作ってきました。 ローソクチャートです。HTML5で作られています。 折れ線グラフを追加しました。 さらに棒グラフと折れ線グラフのミックスです。 クリックするとその箇所の数値が分かります。 表示範囲をマウスで選択して絞り込むこともできます。 逆に広げた場合です。 RocketchartはJSONデータを使ってCanvasタグにグラフを描いています。そのため直接書き出すのはもちろん、AjaxなどでJSONデータを渡してレンダリングすることもできそうです。 RocketchartはJavaScript製、GPL v3のオープンソース・ソフトウェアになります。 MOONGIFTはこう
試そう！ターミナル上でカラーのグラフを描く·term-canvas MOONGIFT
term-canvasはターミナル上でCanvasを使ってグラフや図形を描画するソフトウェアです。 コンソールで表現できるのは白と黒、できてもANSIカラーレベルのテキスト描画と思われてきました。しかしそんな現状を一気に打ち破ってしまうのがterm-canvasです。なんとターミナル上でCanvasを使った図形描画を行います。 サンプルを実行しました。ターミナル上にグラフが描かれます。なんという違和感。 アニメーションするグラフも描けます。 キーボード操作で左右に動くグラフも作れます。 線を引くデモです。 四角を何重にも描くデモです。 四角を描画しています。 上の四角を描くデモのコードです。色と描画場所を決めるだけのシンプルさです。 自動で更新されるのはsetIntervalで制御しています。 term-canvasを使うとMac OSXのターミナル上でCanvasを使ってグラフや図形を描
Webの表現力はここまで来た。Canvasタグを使ったアニメーションライブラリ·CAKE（Canvas Animation Kit Experiment） MOONGIFT
CAKEはCanvasタグを使ってグラフィカルなアニメーション描画を行うJavaScriptライブラリです。 HTML5のCanvasタグによってWebの表現力は格段に増したと言えます。今回紹介するCAKE（Canvas Animation Kit Experiment）はCanvasタグを使ってアニメーションを実現します。多彩なデモがあるのでぜひ公式サイトでチェックしてみてください。 最もシンプルなデモです。サークルが回転します。 それを描いているHTMLタグです。結構複雑ですが、見がたい訳ではありません。 色々なデモあります。 流れるような動きが格好いいです。 マウスで大きさを変えられます。 大きなモデルの周囲を小さなモデルが回ります。 ベジュ曲線調に光が下りていきます。 枝が進んでいくデモです。 四角が回転するデモです。 SVGを表示するデモです。 デモ動画です。 CAKEはアニメー
JSはFashを超えるか？kinetic.jsを触ってみる。
こんにちは。斉藤です。 11月入ってから、暖かったり寒かったり、気温の変化が激しいですね。 皆様はお元気でお過ごしでしょうか。 自分の方では、一つ気になっているニュースがあります。 モバイルFlash断念はAppleの拒絶が主因――Adobe幹部が説明 このニュースは皆様もご存知でしょうか？？ Flashをよく使っていた自分としては、とても感慨深いものがあります・・・。 FlashからHTML5、という技術の移り変わりを感じさせるニュースですね。 * JSでも、Flashみたいなインタラクティブなものを作りたい！ というわけで、今回はJavaScriptの描画ライブラリ、kinetic.jsを触ってみます。 canvasタグ上に色々描く事が出来るJSです。 www.kineticjs.com これを使えば、Flashのようなインタラクティブなものが、JSで作れるかもしれません！ 他にも、描
rails3 + html5 canvasでお絵かき投稿サイトを作ろう！
はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って？ ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵を投稿できる 投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。 絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、 ・mousemoveイベント発生時に点をプロット という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。 これではお話になりません。 なので、点ではなく線を引くこ
面白い！JavaScript+Canvasによる画像差分表示·JS-ImageDiff MOONGIFT
JS-ImageDiffはJavaScript+Canvasタグを使って二つの画像の差分表示を行うライブラリです。 GitHubでは差分をWebブラウザ上で閲覧できますが、その時に画像の差分表示も行えるのを知っているでしょうか。スライダーで動かしたりして差分を確認できるのですが、その一つの差分表示をオープンソースで再現するのがJS-ImageDiffです。 サンプルです。上が元、中間が変換後そして下が差分となります。どこが違うのか一目で分かります。 左が影無し、右が影ありです。一致している部分だけが表示されています。 サイズが違う場合の差分表示です。 JS-ImageDiffはCanvasタグを使って画像を読み込み、その差分を表示しています。各ピクセル単位で画像を比較して同じであれば黒、違う場合はうまく表示するというやり方でここまで見事に表示できるのが面白いですね。 JS-ImageDif
How To Optimize Images With HTML5 Canvas — Smashing Magazine
If you really care about your visitors, then read this post in which Sergey Chikuyonok demonstrates how to optimize images with HTML5 Canvas. Images have always been the heaviest component of websites. Even if high-speed Internet access gets cheaper and more widely available, websites will get heavier more quickly. If you really care about your visitors, then spend some time deciding between good-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Making the Firefox Logo from HTML
Processing.js drug and drop
面白い！JavaScript+Canvasによる画像差分表示·JS-ImageDiff MOONGIFT