HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
iPhoneでワウペダルを作ったった - aike’s blog
ワウペダルが好きです。ギターのカッティングにかけて遊んでいるとあっというまに時間が過ぎていきます。そんなわけでどこのご家庭にもあるiPhoneとJavaScriptでワウペダルを作ることにしました。こんなやつ。 JavaScriptでiPhoneの加速度センサーとWeb Audio APIを使ったワウペダル作った。 http://t.co/rGDHh5FaWb https://t.co/erfjy9tL80— aike (@aike1000) 2014, 10月 20 ■作り方 まず、Web Audio APIでフィルターを作ります。 Biquad Filterを作ってバンドパスフィルターに設定するだけです。簡単。Qの値を少し大きめの4くらいにしておくとワウらしいクセが出ます。あとは0.0〜1.0の引数の値に応じてフィルターの中心周波数をセットする関数setWahPos()を用意しておきま
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ 小山田 晃浩（株式会社 ピクセルグリッド） WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
Canvas、WebGL、WebRTC、WebSocketなど、HTML5の花形スターとも言えるモテ系APIは、常に世間の注目を集めている。これらAPIを使いこなせるウェブディベロッパーはどこからも引っ張りだこだろう。しかし、注目度が低いながらも、今後のウェブを支える（かもしれない）最新のAPIが数多く存在する。このようなAPIは派手さが足りないゆえに話題になることもない。しかし、これら非モテ系のAPIも含めてHTML5だ。 本セッションでは、ありきたりのモテ系APIに飽きたマニアな貴方のために、普段は陽の当たらないAPIを一挙紹介する。もちろん、どれかのブラウザーに実装されているAPIのみだ。今から使おうと思えば使えないことはない。そして、W3Cにて仕様策定が始まって日が浅いため、明日にはどうなるか分からない。無くなるかもしれないし、大幅に変更されてしまうかもしれない。今覚えても役に立た
初心者でも絶対わかる、WebGLプログラミング＜基礎知識編＞
HTML5に関連する技術のひとつに、WebGLがあります。WebGLは、ブラウザー上で3DCGプログラミングを実現できる技術です。今回のレポートでは、WebGLプログラミングの基礎知識についてご紹介します。 WebGLって？ WebGLでどんなことができるのか──百聞は一見にしかず。まずは例を見てみましょう。demo内のスライダー部分をドラッグすることでカメラの位置などを任意に変更できますので、リアルタイムでレンダリングされていることがわかるでしょう。 (invalid jsdo.it code) このように、ブラウザー上でプラグインに頼ることなく、なめらかな表面、自然な影、高FPSでのリアルタイムレンダリング（アニメーション）など、まるで最近の家庭用ゲーム機にも匹敵する高度な3DCG表現ができるわけです。 WebGLは2013年10月現在、Chrome、Firefox、Operaで標準対
世の中のHTML5アプリケーションが糞だから、俺が「初期化」の作り方を教えてやんよ - mizchi's blog
2chまとめみたいなタイトルにしてみた。(してみたかった) HTML5のアーキテクチャと初期化とキャッシュの考え方が、「ウェブエンジニア」は本当に出来てない。 とくにソシャゲをウェブビューに貼ってスマホ対応しました系。本当にダメ。 じゃあどうするか？基本的に「初期化」の考え方を直せばどうにかなる。 (この記事はBackboneを使うときに考えてることだけど、他でも一緒だと思う) 前提 シングルページアプリケーション セマンティクスやSEOは考慮しない 基本哲学 共通モデルの初期化を徹底的に行う サーバーにリクエストを投げるのは最小限 クライアントでサーバーモデルのキャッシュを作り、更新が期待されるまで再取得しない 理由 いくらDOMの最適化したところでUXに影響が大きいのはサーバーリクエスト(200~2000ms)で、プログラミング段階で辛さがあつまるのは非同期処理の部分。 プログラマとし
入力フォームの迷宮。全角数字を強要するフォームを理解できません。 | SHINGO IRIE
前々から思っていたんですが、住所を入力する際に全角で入れてくださいという指定をされていることがよくあります。これ、毎回イラッとします。 住所が全角だろうが半角だろうが、システム側で勝手に変換制御してくれよって思います。システム上、全角でないとマズイかどうかは利用者にとっては関係のないことです。 例えば、住所が福岡市天神1-2-3だった場合、福岡市天神１−２−３と入れなおす。そうすると−が全角ではありません。と出てきたり…。この「ー」もたくさん候補があるので、どれが全角だったっけ…と何度か試すこともあったり。まぁ、１丁目２番地３と書けばいいんですが。かたや、電話番号は半角で入れてくださいとか、まぎらわしい。 そのほか「住所の文字数がオーバーしています」って出てきたこともあります。マンション名が記入できませんでした。しょうがないので、マンション名をイニシャルで省略しました。小さなことかもしれま
こてさきAjax:[Google I/O 2013 速報] Chrome Packaged Apps v2 凄いことに!! - livedoor Blog（ブログ）
いよいよ、Google I/O 2013 が始まりました！！今年は、初めてのI/O参加で、サンフランシスコに来ています。 基調講演は、昨年のダイブ w/ Google glassに比べると堅実な印象で、大半をAndroidとChromeに時間を割きつつ、一番派手だったのが、Google Maps w/ WebGL。まぁ、Maps GLの流れからすると、「ついに来たか」って感じなので、あまりサプライズという感じではありませんでした。まぁ、基調講演のレポートは各所から出ると思うので、今回の僕の記事では取り上げません。 Chrome/HTML5について、keynoteではそんなにサプライズな感じではなかったのですが、"The Chrome Packaged Apps State of the Nation" というセッションでかなりのサプライズがあったので、今日はそれの速報記事です。 このセッシ
FirefoxOSについてなんとなく調べてみた - hyoromoのブログ
「HTML5で書けるプラットフォームだよ、お兄ちゃん☆」て印象しかなくKEON端末を買ってしまったので、今回調べてみたのでその事をサラッと書きます。 概要 HTML5とMozilla製独自APIを利用することでアプリ開発が出来るWebOS。 Mozillaはどうしたいの？ 公式サイトを引用すると以下の様なフレーズが目につきます。 独占的モバイルプラットフォームからの解放 開発者のための機会 消費者の自由 「HTML5+Mozilla製独自APIだから開発楽ちんだよ、お兄ちゃん☆」特定のプラットフォームに特化しなくてもWebサイト作るノリでアプリつくっちゃいなよ。的な感じなのでしょう。 コア処理をHTML5で書けるようなのでFirefoxOS向けだけではなく、他WebOSやWebサイト向けにも流用できる為、それによりユーザが欲しいアプリも開発者が提供してくれやすいのでわ。という事なのでしょう
こてさきAjax:マルチデバイス連携を実現する WebIntents 〜基本と使い方編〜 - livedoor Blog（ブログ）
新年明けましておめでとうございます。本年も宜しくお願いします。 さて、今年最初のPOSTは、僕が今一番興味を持っているAPIの "Web Intents" について取り上げます。 この、"Web Intents"は、Androidの "Intent" に非常に良く似た仕組みで、異なるWebアプリケーションを自由に連携することを可能とするAPIです。Webサイトの不足機能に対し、他のWebアプリの機能を利用することが可能になるため、スピーディーなWebアプリの開発を実現してくれます。利用するユーザーにとっても、手慣れたWebアプリを利用できるメリットが有ります。 このAPIの更に興味深いところは、 Device機能の利用 デバイス内の固有の機能（カメラや、住所録など）をブラウザから利用する。 Web of things スマートフォンやテレビなどのマルチデバイス連携サービスをWebで実現する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
