HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 - ICS MEDIA
HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 2013年3月15日に開催されたCreateJS勉強会（第2回）で発表したWebサイト「日本全国花粉飛散マップ」ですが、CreateJSとTypeScriptを使って制作しました。 今回の作品のポイントとしては、次の3点があげられます。本記事では次を具体的に説明します。 HTML5で制作、デスクトップだけでなくスマートフォンやタブレットでも再生可能 CreateJSで、DOMではできないHTML5 Canvasならではの表現 TypeScriptを用いて低学習コストで効率的な制作の実現 スマートフォンやタブレットでも閲覧可能 このWebサイトは環境省が提供している資料を元に、過去9年分の花粉の飛散量をパーティクルを用いてビジュアライズしたものです。花粉の量に比例して、パーティ
JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」:phpspot開発日誌
Fabric.js Javascript Canvas Library JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」 canvasのネイティブAPIは若干分かりづらいという方も多そうですが、このライブラリを使えばオブジェクト指向で楽々Canvasプログラミングが出来そうです 単に便利にコーディングできるようになるだけでなく、オブジェクトをマウスで拡大や回転できるなどといった色々な機能も盛り込まれていて便利そうです ネイティブAPIだと、四角形を描画するのに、次のようなコードを書きます。 これが、Fabric.jsを使うと次のように、とても分かりやすくなります。fillRectの引数の順ってどうだっけ？と毎回リファレンスを牽く必要もなくなりますね 他にもドキュメントを参照すれば、CanvasをネイティブAPIで書く面倒さを理解できるはず デモページも結構充実しており
Android × Canvas の即死ポイントとその回避策 | buccchi.jp
CreateJS を使ったWebアプリをいくつか作ったのですが、iPhone はサクサクでも Android でやたらハマる。 Android 2.3 で最適化したつもりのものが 4.0 の標準ブラウザで落ちたりする。 機種や OS のバージョンにより動作がさまざまなため確認しきれない。 というとこでハマったポイント3つを共有します。 誰かもっとよい解決策を教えてくれるとありがたい。 即死ポイントその1 Android 4.0.4 で Canvas をリサイズするとブラウザが落ちる 回避策 Canvas 領域を広めにとっておき、Canvas ではなく Container 側をリサイズ。 はみでた部分は css でトリミング。 これで落ちなくはなるが全体的にボケる。 2013.7.7 追記 その後、以下の方法を試したところ落ちずに動作すことが確認できました。 描画とかGPUアクセラレーション
canvas と Web 仕掛け絵本 | hiromasa.another :o)
明けましておめでとうございます。 🙂 昨年のご愛顧も込めまして、「WordPress デザインワークブック」共著のコモモさんこと高橋朋代さんと Web 仕掛け絵本のサイトをつくりました。とてもかわいい感じになりましたので、良ければ見てください！ バッタになりたい魔法使い – pararaehon.com PC/Mac はモダンブラウザ(IE8 以下はごめんなさいです）に対応しています。 モバイル系は iOS は 6 以降の Mobile Safari、Android は 4 以降の Chrome が良い感じで見れます。Android 2 の方は Firefox 17 を使うとゆっくりですが動作します。3G 回線の場合は、ちょっと読み込みに時間かかりますので、白くなったりしたらリロードしてみてください。キャッシュするときれいに動きます。 iPhone/iPad は 4S 以降(Apple
Graphical Webの拡がり；HTML5とその周辺技術で実現する | gihyo.jp
もちろん、すべてHTML5を中心とする標準技術であるため、JavaScriptを通じてそれぞれを組み合わせて利用できます。 注目されるGraphicalWeb こうした新しいWebのグラフィックス技術の拡大もあり、2012年にはThe Graphical Webというカンファレンスがスイス開催されました。 The Graphical Web2012のWebサイト 実はこのカンファレンス、2002年から10年以上も続いているカンファレンスで、2011年まではSVG Openという名前で開催されていました（ちなみに、2007年には日本で開催されました）。しかし、2012年からカンファレンス内で扱う技術はSVGのみにとどまらず、HTML5 media、CSS3 Animations、2D Canvas、WebGLなどの技術も取り上げることとなり、こうした技術の総称としてカンファレンスのタイト
ブラウザ上で画像をトイカメラ風に変換できるJSライブラリ「vintageJS」:phpspot開発日誌
vintageJS - add some awesome retro and vintage style to your images with the HTML5 canvas element gitHub - vintageJS ブラウザ上で画像をトイカメラ風に変換できるJSライブラリ「vintageJS」。 ファイルをアップするとパラメータを調整して簡単にトイカメラ風の画像が作れるサイトとライブラリです。 HTML5のCanvasを使っているのでサーバにやさしい。 あとはこれがどのブラウザでも動いてくれればと思うところですが、こうしたCanvas関連のライブラリが沢山あると将来的に便利になりそう 関連エントリ CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２ 画像のプレースホルダを生成してくれるJSライブラリ「Holder.js」
Ejecta - Impact
A Fast, Open Source JavaScript, Canvas & Audio Implementation for iOS & tvOS e·jec·ta, noun – debris that is ejected during the formation of an impact crater Ejecta is like a Browser without the Browser. It's specially crafted for Games and Animations. It has no DIVs, no Tables, no Forms – only Canvas and Audio elements. This focus makes it fast. JavaScript code is executed directly by a JavaScrip
要約: 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
JavaScriptで画像加工アプリを作ろうぜ！
今回、紹介するライブラリはこちらの「Pixastic」というJavaScriptライブラリです！ Pixasticライブラリを利用すると、画像にエフェクトなどの効果を掛けられます。HTML5のAPIと連携することで、アプリケーションのような動作も可能になります。 過去に「HTML5」関連の勉強会で発表した際、このPixasticライブラリを使ったベータ版サンプルアプリを披露しました。筆者としては非常に優れたライブラリであると思いますので、再度記事にて紹介します。 Pixasticとは？ 画像に手を加えることができる、オープンソースのJavaScriptライブラリです。GitHubにもアップロードされていますが、以下のURLが「Pixastic」のサイトです。 ブラウザ上で作業できる これまでの画像加工ソフトは、特定の画像変更・加工アプリをPCにインストールし活用してきました。「Pixast
また新しいHTML5オーサリングツール「Ninja」、タイムラインでアニメーションも作成可能。Motorola Mobilityがオープンソースで公開
また新しいHTML5オーサリングツール「Ninja」、タイムラインでアニメーションも作成可能。Motorola Mobilityがオープンソースで公開 Motorola Mobilityが今月公開したHTML5オーサリングツール「Ninja」のバージョン0.7は、SVGやCanvas、WebGLなどを用いたHTML5でのアニメーション効果の開発を得意としたオーサリングツールです（それにしてもNinjaという名称は海外で人気がありますね……）。オープンソースソフトウェアとして開発されています。 Ninjaは、同じくMotorola MobilityがリリースしたHTML5対応のフレームワーク「Montage」をベースにしています。Montageは、Adobe Flash/Flexのような形でHTML5のアプリケーション開発ができるようにという意図で開発されたフレームワーク。 Ninjaの画面
PerfumeのモーションデータをHTML5のCanvasで3Dっぽく動かした「Perfume x Canvas」
公式に配布されているデータを使ってPerfumeっぽい棒人間を踊らせまくっているのが「Perfume x Canvas」です。HTML5では「Canvas」というタグを使うことで、HTMLとJavaScriptだけでオブジェクト描画ができるようになっていますが、これを使って3Dっぽく動かしています。 「Perfumeのモーションデータ」というのがどういうものか、公式サイトに行くとムービーが流れるようになっています。 Perfume official global website(音量注意) http://www.perfume-global.com/ サイト左上にマウスカーソルを持って行くとメニューが表示され、その中の「ダウンロード」をクリックすると…… モーションデータのダウンロードページが表示されます。「You agree to our terms」の横のチェックボックスにチェックを入
HTML5のcanvasをもっと簡単に操作できる「KineticJS」:phpspot開発日誌
KineticJS - HTML5 Canvas JavaScript Library Framework HTML5のcanvasをもっと簡単に操作できる「KineticJS」 サンプルコード付きでサンプルが紹介されており、インタラクティブなコンテンツをHTML5で作る際に便利に使えそうです マウス位置に応じてフロアが強調表示されるようなデモ その他いろいろなデモがソースコード付きで公開されています。 その他ゲーム等も公開されています。 今後もこうしたライブラリが出てきそうですね 関連エントリ フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 HTML5のブラウザ対応状況がサクッと分かる「HTML5 Please」
HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 | ClockMaker Blog
Flashでよく見かけるテキストシャッフル演出(文字列がランダムで切り替わる演出、正しい呼び名はわかりませんｗ)をHTML5で作ってみました。HTMLのタグ(pタグとか)に使うバージョンと、HTML5の新要素Canvasを使うバージョンの二種類を用意しました。 【2017年4月26日 追記】 【重要】JSライブラリーはGitHubで更新しています。使用したい方は次のGitHubのリポジトリを御覧ください。 Canvas版はCreateJS 2015年版でも動作するよう更新しました。 デモ demo (HTMLエレメント版) demo (Canvas版) ソースコードはMITライセンスで公開してしますので、個人・商用問わずご自由にお使いください。 ShuffleText.js (HTMLエレメント版) ShuffleEaselText.js (Canvas版) それでは以下で使い方を紹介して
JavaScript 3DレンダリングエンジンのThree.jsを試す
こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑で使ってみたところ、たしかにThree.jsでは、3D特有の行列計算や数学的思考をせずとも、3Dを表示、操作することができました。 「ちょっとのプログラムで3Dができる。」 この面白さを皆さんに届けたいです。 目次 立方体を表示する 光をあてる テスクチャを貼り付ける マウスで回転させる マウスで移動させる クリック判定する Three.js web上には、HTML5のcanvasを利用した様々なサンプルページやアプリケーシ
HTML5 Canvasを始めよう：EaselJSとTweenJSでテキストエフェクト | ClockMaker Blog
HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」と「TweenJS」を使ってデモを作ってみました。 demo 今回のブログ記事では「EaselJS」と「TweenJS」の使い方をデモの作り方を通して紹介します。 ライブラリの紹介 「EaselJS」と「TweenJS」はFlashのエンジニアとして著名なGrant Skinner氏が開発しているJavaScriptライブラリです。「EaselJS」がHTML5 CanvasをFlashライクに使うためのライブラリで、「TweenJS」が汎用的なトゥイーンライブラリです。 ▲EaselJS HTML5のCanvas要素はHTML上に自由に描画することのできる新しい要素で、工夫することでFlashのように豊かな表現を作ることができます。ただCanvasではJavaScriptでちょっと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Goodboy Digital
Responsive Cat
Canvasベースのお絵かきが実装できるjQueryプラグイン「Sketch.js」:phpspot開発日誌
[JS]美しい曲線を使ったチャート・グラフが描けるHTML5 Canvasを使ったスクリプト -Flotr2
GitHub - Arcticjs/Arctic.js: HTML5 game framework
