HTML5やクラウドなどを使えばここまでできる「モーグリのツイートキャッチ」
一見するとフツーのよくあるキャンペーンサイトですが、Flash・Silverlight・Javaといった追加プラグイン的なものを一切使っておらず、その裏側ではHTML5のCANVAS・SVG・Geolocation要素など使えるものを使いまくっており、しかもクラウドやCDN(コンテンツデリバリネットワーク)をバックグラウンドで使用、見た目よりもはるかに技術的にがんばりまくっている……というサイトがこの「モーグリのツイートキャッチ」です。 モチーフとしては、「FinalFantasy XIII-2」にてモーグリを投げ飛ばして遠方のお宝を探索させる「モーグリ投げ」をちょっと違う形で再現しており、このモーグリ投げによってネット上からTwitter上のツイートを集めてくることが可能になっています。もちろんツイートを集めるためにAPIを叩く際にもがんばっていろいろ工夫しています。 Internet
canvasをバイト単位で修正する方法（ImageDataの使い方） - KAYAC engineers' blog
引っ越ししました。agoです。 思いっきりネタがかぶってますが、あまり気にせずcanvasネタを書いてみたいと思います。 今回はcanvasの中でもImageData関係をまとめて見ました。 ImageDataってなに？ canvas内のバイト列を扱うためのObjectです。 canvas内の各バイト毎に赤、緑、青、透明度の情報を配列として保持しています。 何に使うの？ canvas内をバイト単位で修正したい場合に使います。 canvas内に図形等を書く場合、通常提供されているlineTo等を使用することも出来ますが、こういった抽象メソッドは一回ごとの呼び出しコストが大きいため、細かい単位の操作には向きません。 その点、ImageDataであればバイト単位での操作しかできない代わりに呼び出し毎のコストが小さいため、細かい単位の操作も高速に行うことができます。 ただ、もちろん線を引く、丸を書
グーグル、FlashをHTML5に変換するツール「Swiffy」を発表
Googleは、FlashファイルをHTML5に変換するツール「Swiffy」を発表した。SWFファイルにこのツールを適用すると、SWFファイルがJSONファイルに変換され、HTML、SVG（Scalable Vector Graphics）、CSS（Cascading Style Sheets）を使ってレンダリングされる。Googleによれば、変換されたファイルのレンダリングパフォーマンスは非常によく、ファイルサイズはオリジナルよりわずかに大きくなるという。 Adobe Systemsも、2011年に入って同様のツール「Wallaby」を発表している。このツールは、FLA形式のファイルを、HTML5、JavaScript、CSSに変換するものである。 Googleは、Swiffyに関するFAQで、Adobeは「FlashプラットフォームがFlashプレーヤーをサポートしていないデバイスに
YouTube、3D HTML5動画の再生に対応--Firefox 4と3D Visionが必要
米国時間5月26日より、YouTubeでHTML5を通して3D動画を視聴することが可能になった。ただし1つ注意事項がある。この新機能を利用できるのは「Firefox 4」のみで、しかも特定のNVIDIAグラフィックスカードが必要だ。 Mozillaのプラットフォーム製品管理担当ディレクターであるChris Blizzard氏のブログ投稿によると、YouTubeは現在「数千件」の3D動画をホスティングしており、それらの動画は「WebM」形式でエンコード／再生されているという。NVIDIAの「3D Vision」グラフィックスカードを搭載しているユーザーのみがそれらの動画を3Dで視聴することが可能で、再生にはFirefoxを使用する必要がある。 3D Visionハードウェアを持っている人は、YouTubeで「yt3d」を検索すると、3Dでエンコードされた動画のリストが表示される。3Dハードウ
最新ブラウザが映し出す3Dの夢世界
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
HTML5の魅力。Webブラウザ上で楽譜を表示し、MIDIを使って奏でる·ABC.js MOONGIFT
ABC.jsはWeb上で楽譜を表示し、演奏するJavaScriptライブラリ。 ABC.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5によってWeb上の表現力は高まっている。SVGでベクター画像を描いたり、WebGLによって3Dオブジェクトを描き出すこともできる。Canvasを使うプロジェクトも多い。 きれいな楽譜表示 これまではFlashを使ったり、画像を使わなければならなかった表現もHTMLだけでできるようになる。その一つ、楽譜を描き出して音まで鳴らせるのがABC.jsだ。 ABC.jsは特定の記法に沿って記述することでWebブラウザ上に楽譜を書くライブラリだ。JavaScriptを使っているので、その場で手直ししてレンダリングし直すこともできる。楽譜共有サイトのようなものを作ることさえできるだろう。 Firefoxなら演奏とダウンロードも そして描
HTML5の台頭で表舞台から姿を消していく「Silverlight」--MIX11
Microsoftはウェブ開発者に自社のツールを使ってもらう取り組みを進めており、同社がかつて高度なグラフィックス開発に対する回答として大々的に宣伝した1つの製品、つまり「Silverlight」から巧妙にウェブ開発者を引き離そうとしている。 Microsoftのウェブ開発者向け年次カンファレンスであるMIX11が米国時間4月12日にラスベガスで開幕し、新しいウェブ標準のHTML5に関するデモや講演が行われた。HTML5の売りは、動画やアニメーションを使用するウェブアプリケーションの開発を容易にすることだ。これは、MicrosoftがSilverlightを開発した目的とほぼ同じである。 しかし、MIX11の初日、Silverlightはほとんど目立たなかった。Internet Explorer（IE）担当コーポレートバイスプレジデントのDean Hachamovitch氏とMicroso
MS、「Silverlight 5」ベータをMIXで公開へ
MicrosoftはMIX11で、「Silverlight 5」のベータ版をリリースする予定だ。そして、同社の幹部3人がブログ投稿で、Silverlightが果たす主要な役割の1つはブラウザ機能の強化だと述べた。 「プラグインの利用に関して言えば、Silverlightは今日の開発者が利用できる最もリッチな機能セットを提供するとわれわれは考えている」と開発者プラットフォームおよびエバンジェリズム担当コーポレートバイスプレジデントのWalid Abu-Hadba氏と「.NET」開発者プラットフォーム担当コーポレートバイスプレジデントのScott Guthrie氏、開発者部門シニアバイスプレジデントのS. Somasegar氏は述べた。 Silverlight 5は、パフォーマンスとバッテリ寿命向上に寄与するハードウェアアクセラレーションによる動画再生や、ハードウェアアクセラレーションによる3
この表現は凄い。ダイナミックに変化するテキストイフェクト·gui-dat MOONGIFT
gui-datは流体のようなイフェクトを文字に対して行うJavaScriptライブラリ。 gui-datはHTML5/JavaScript製のフリーウェア（ソースコードは公開されている）。Flashや画像を使えばできることをテキストベースでやることに意義がある。テキストであれば検索もできるし、システム連動もしやすい。サイズも軽く済む場合が多い。 左上の文字がアニメーションする テキストであってもイフェクトを加えれば画像のロゴに負けないくらいのインパクトは生み出せる。むしろダイナミックにイフェクトできる分、画像よりも有利な場合だってあるはずだ。そんな可能性を感じさせるソフトウェアがgui-datだ。 gui-datは実物を見てもらえれば何がすごいのかすぐに分かるはずだ。テキストの中を丸が通り抜けていくような、水が流れているようなイフェクトがJavaScriptによって実現している。文字を変え
アドビ、FlashをHTML5に変換するツール「Wallaby」発表
Adobe Labsは米国時間3月7日、FlashをHTML5に変換する新しい無償ツール「Wallaby」を発表した。 AdobeのMAX 2010カンファレンスで最初に披露された同ツールは現在のところ、変換はできるが荒削りな部分があるとAdobe Flash Professionalシニア製品マネージャーを務めるTom Barclay氏は述べた。「HTML5は、バナー広告やウェブパブリッシングにおいて重要な技術」と同氏は述べるとともに、Flashは、特に複雑な双方向性が必要なゲームにおいて開発者らによって多用されているということを強調した。 現状のWallabyでは、FLA形式のファイルを選択して変換すると、そのFlashファイルがHTML5、JavaScript、CSSに変換される。ほとんどの描画要素、塗りつぶし、シェイプトゥイーン、モーショントゥイーン、シンボル名、インスタンス名など
12+ HTML5 Canvas Drawing and Sketching Tools
Sketches are freehand drawings that are created with rapid movements and normally proposed as a finished work. A lot of artists use sketching to put down an idea which can be used later, it could be something seen by the artist, a demonstration of principles or ideas generally. The main idea behind sketching is to record something down, courts use sketch artists to record sessions, manufacturing c
HTML5の完成は3年後--W3Cの決定の背景
Hypertext Markup Language（HTML）の次版は何年も前から開発が行われているが、完成までにはまだ数年かかる見通しだ。 具体的に言うと、World Wide Web Consortium（W3C）のHTML Working Groupは米国時間2月14日、HTML5を推奨標準として正式に認定するのは2014年第2四半期になるとの見通しを発表した。この長いスケジュールは、HTMLを流動的に更新される「生きている標準」にしようという別の取り組みとは対照的だ。 「われわれは2007年から（HTML5に）取り組んでいる。7年でHTML5を完成させることが目標だ」。W3CのHTMLアクティビティリーダーを務めるPhilippe Le Hegaret氏は米CNETに対しこのように述べた。 HTML5は、1999年にHTML 4.01がリリースされて以来、初めての改定版となる。次世
Webサイトのスマートフォン対応 7つの基本ルール | Web担当者Forum
個人利用を中心に急伸を続けるスマートフォン市場は、もはやニッチ市場ではなくなりつつある。過去に企業サイトの携帯電話（フィーチャーフォン）対応が問われたように、今後スマートフォン向けのサイト対応が課題になると考えられる。2010年はスマートフォン元年といわれていたが、2011年は企業のスマートフォンサイトへの投資検討が本格化してくるだろう。 2010年、スマートフォンの市場規模は急成長し、『スマートフォン利用動向調査報告書2011』（MCPC監修、インプレスR&D発行）によると、2011年3月末（2010年度）の契約数は、前年の497万契約から63％増の810万契約となる見通しだ。調査によると、契約数は年平均40％以上で拡大を続け、2015年度には4,712万契約に、コンテンツ配信事業も急成長することが予測されている。こうした調査からも、今からサイトをスマートフォンに対応しておくことが決して
グーグル、フラクタル図形を描画するウェブアプリケーションを公開
かつては、代表的なフラクタルであるマンデルブロ集合の探求にスーパーコンピュータが必要だった。だが今やGoogleは、このシュールな数学的図形を最高のパフォーマンスや極めて繊細な陰影で描画できるわけではないが、ブラウザが昔のスーパーコンピュータを凌ぎ得ることを示すウェブアプリケーションを作り出した。 これは「Julia Map」と呼ばれるプロジェクトで、比較的新しいウェブ標準である「Web Workers」を採用している。Web Workersによりブラウザは、いわばブラウザの思考の前面において比較的平凡なユーザーインターフェース作業をこなし、それと並行して、バックグラウンドで処理タスクを実行できる。 マンデルブロ集合は、ジュリア集合と呼ばれる別のフラクタルと近い関係にある。Googleのアプリケーションでは、それぞれの集合を多様な形状で表示する。このアプリケーションでは、ウェブプログラミン
W3C HTML5 Logo
An HTML5 Logo It stands strong and true, resilient and universal as the markup you write. It shines as bright and as bold as the forward-thinking, dedicated web developers you are. It's the standard's standard, a pennant for progress. And it certainly doesn't use tables for layout. We present an HTML5 logo. The Technology Imagination, meet implementation. HTML5 is the cornerstone of the W3C's ope
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web開発に便利な機能を「Visual Studio」へ追加してくれる「Web Essentials」NOT SUPPORTED
BLOGOS サービス終了のお知らせ
IDEA * IDEA
DeviantArt muro
MS、H.264形式HTML5動画を再生できる拡張機能を「Google Chrome」向けに無償公開