SVG＆Canvas＆WebGLが選べる2Dのライブラリ「Two.js」 | スターフィールド株式会社
HTML5には、SVG、Canvas、WebGLといった、ビジュアル関係で追加された要素があります。 これらはとても便利で、 インパクトのあるサイト作りには強い味方になります。 ただ、ブラウザや端末により、これらの要素が使えない場合もあります。 クロスブラウザの問題です。 また、SVG、Canvas、WebGLのそれぞれで、強みを発揮する部分が違っており、 強みを発揮するために、それぞれを使いこなそうとすると、 使い方がバラバラなので、多くのことを事前に学習する必要が出てきます。 クロスブラウザ対策のために、ブラウザごとにそれらを切り替えるとなると、 なおさら大変です。 この問題を解決してくれるのが「Two.js」です。 Two.js Two.js: Examples (公式のDEMO) 「Two.js」はベクター系のグラフィックを扱うことのできる、 JavaScriptのライブラ
初心者でも絶対わかる、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ファイルを手に入れま
Webアニメーションを高速化するために知っておくべき10のこと（前編）
Webアニメーションを高速化するために知っておくべき10のこと（前編） 斉藤 祐也（株式会社リッチメディア） アニメーション／トランジションは身の回りに当たり前にあるものです。 むしろ普段の生活では「0」が「1」に変化するものの方が珍しいでしょう。 アニメーション／トランジションはデジタルなWebに対して自然な変化を提供する大切なツールです。 今回はそんなアニメーション／トランジションをより自然にスムーズに動作させるために知っておきたいことを前・後編の2回に分けて紹介していきます。 アニメーションを高速化する理由 アニメーションは先ほど書いたように普段の生活にも存在しています。だからこそ、我々はスムーズではないアニメーションを見つけるのが得意です。 アニメーションに限定した話ではありませんが、FacebookのShane O’Sullivan氏が、ページロード後のレンダリングパフォーマンス
Reveal.jsとHTML5を使ったプレゼンテーションはPowerPointを超える / ウェブデザインライブラリー
Home ＞ HTML&CSS講座 ＞ Reveal.jsとHTML5を使ったプレゼンテーションはPowerPointを超える Reveal.jsとHTML5を使ったプレゼンテーションはPowerPointを超える 投稿日：2013年8月23日 ソフトウェア： このチュートリアルではReveal.jsとHTML5を使ったプレゼンテーション資料を作成する方法について紹介します。 Step1 ： はじめに Step2 ： HTML5を使ったスライドのマークアップ Step3 ： Reveal.js：ナビゲーションの拡張が可能 Step4 ： Reveal.js：Markdownの利用が可能 Step5 ： 最後に プレゼンテーションと言えば、PowerPointですよね？ でも、良く考えてみてください。PowerPointという名前を出しただけで、私の知り合いの多くはあくびを始めてしまいま
Tearable Cloth
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
HTML5でスマホをコントローラにするゲームを作ってみた | CSS-EBLOG
HTML5でスマホをコントローラにするゲームを作ってみた カテゴリ：HTML5 2011年10月27日 09:00 Canvasゲームをカスタマイズ ゲーム自体は以前作ったものをそのまま使いました。 今回作ったスマホコントローラ版 http://edo-m18.me:9000/ 以前作ったものをカスタマイズして、弾を打つ部分と自機を移動する部分を、関連付けたスマホから操作できるようにしてみたものです。 これはあくまでアイデア、ってことで快適にプレイできるまでは作りこんでいません(; ´Д`) ただ、特にプラグインなどを使わずともここまでできる、というのは非常に面白いなと思いました。 Node.jsを使って実装 今回、WebSocket部分はNode.jsを使って実装しました。 最近Node.jsにハマりすぎてプライベートではNode.jsしか触ってませんｗ やはりサーバサイドとクライアント
HTML5とJSで動画に画像をWEB上で合成する「HTML5 Glasses!」
HTML5とJSの組合せでWEB上でできるとこは格段に広がり、様々な実験的なコンテンツが世界では展開されていますが、今日紹介するのはアイデア次第で面白いプロモーションに使えそうなHTML5とJSで動画に画像をWEB上で合成する「JavaScript Face Detection + Canvas + Video = HTML5 Glasses!」です。 こちらはHTML5で再生されているビデオにCanvasを利用して、ビデオに追従するエレメントを表示させるというものです。 実際どんなものか動画が公開されていましたので、下記からご覧ください。 動画は以下から ユーザーが撮影した動画に対してなにかを合成したり、動画コンテンツに合成する絵を分けてコンテンツを変化させたり、様々な事ができそうな技術だと思います。 「Library」にソースコードや実装方法などが公開されています。気になる方は是非チャ
HTML5 Canvasのブラウザによって異なる微妙な振る舞いについてまとめてみた。 - 風と宇宙とプログラム
はじめに CanvasはHTML5とは切り離された独立した仕様(HTML Canvas 2D Context)になっているようですが、現状のブラウザ上でのCanvasのについて、普段はあまり気にしない微妙な振る舞いについて調べた結果をまとめてみました。 調べたブラウザの各バージョンは以下の通りです。 Firefox Chrome Safari Opera 3.6.8 6.0.490.1 dev 5.0.1 10.61 線を描く (lineTo) ただの直線を描くだけのlineToですが、その単純なものにも、恐らく、多くの人が普段は気にしないような問題があります。それは座標値とアンチエリアスです。詳しく見る前に、実際の結果を示しましょう。下記のイメージ中に描かれている線は、いずれも線幅(lineWidth)が1の線です。 (左から、Firefox, Chrome, Safari, Opera
CSS3とjQueryでHTML5動画プレイヤーを自作するチュートリアル:phpspot開発日誌
Building a custom HTML5 video player with CSS3 and jQuery - Opera Developer Community CSS3とjQueryでHTML5動画プレイヤーを自作するチュートリアルが公開されています。 ライブラリは数多く公開されていますが、自分で作るのが一番自由度が高いということで、自作したい場合に参考にできそうです。 作ったものはjQueryのプラグインなので、再利用も出来ます。 HTML5非対応ブラウザ用にFlashでのカバーをする機能も既存ライブラリなどを参考にして実装してみるのもよいかもしれません。 関連エントリ CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」 HTML5で動画や音声再生を可能にするライブラリ集 CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装J
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DeNA Engineering - DeNAエンジニアのポータルサイト
ソフトバンク・テクノロジー子会社、iPadを活用した受付業務システム