flotr2 (humble software development) HTML5 canvasで、グラフを描けるJavaScriptライブラリ「flotr2」が公開されています。 (英語) デモサンプルを見ると、種類が多くどれも綺麗なグラフで、アニメーションなどもできるようです。
HTML5で綺麗なグラフを描くJSライブラリ「flotr2」
flotr2 (humble software development) HTML5 canvasで、グラフを描けるJavaScriptライブラリ「flotr2」が公開されています。 (英語) デモサンプルを見ると、種類が多くどれも綺麗なグラフで、アニメーションなどもできるようです。
HTML5 Canvasを始めよう：EaselJSを使った流体パーティクル入門 | ClockMaker Blog
HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」で流体パーティクルのデモを作ってみました。 demo source EaselJSを使えばFlashのようにHTML5 Canvasを使うことができるので、ActionScriptから概念だけではなくコードの再利用性が高まります。今回は流体パーティクルの表現を通して、EaselJSとCanvasのテクニックを紹介していきます。 デモの作り方 冒頭のデモですが、私が以前作成したFlashの作品「Flashの高速化を試す、BitmapDataを配列に格納することで2〜3倍の高速化」から移植したものです。 さて、このデモをHTML5 Canvasに展開するにあたり、特に抑えておきたいのは次の点だと思いました。 フォースマップの作成 パーティクル情報を付与した表示クラスの作成 フォースマップ
HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」:phpspot開発日誌
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
JavaScriptで動画から音声を抽出してみた
ブラウザだけでMP4/FLV/SWFの動画からMP3/M4A/AAC/WAVの音声を抽出できるサービスを作りました。 nicozonにあるmp3変換のページからサービスが利用できます。 nicozonの動画ファイルのダウンロード機能と合わせて使用すれば、 にこさうんどやnicomimiの代わりになりますね。 従来のこういうサービスはサーバー側で変換をするものですが、 このサービスの新しい所はJavaScriptで動画から音声を抽出している所です。 メリット ブラウザ側で変換してるのでサーバーのリソースを使用しなくて済む 順番待ちとかアップロードとかダウンロードとかしないので変換する速度が速い 音声ファイルをそのまま抽出しているので音質がいい 複数の動画ファイルを同時に変換することが出来る WebWorkerで処理しているので処理中もブラウザが固まらない サーバから動画ファイルをアップロード
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でちょっと
HTML5+Three.jsで3Dプログラミングに挑戦！ – 宇都宮ウエブ制作所
丸坊主なのに寝癖が付く男、正宗です。前回の記事「Actionscript3erが覚えるJavascriptでのクラス開発まとめ」でjavascriptをActionscript3ライクに書く方法をまとめてみたので、今度は練習がてらHTML5をさわってみました。 WebGL版です。 クリックで別ウインドウで開きます。 画像クリックすると別ウインドウで開きます。 うまく動かない場合はWebGLを使わない素のCanvasレンダリングも作ってみましたのでこちらのリンク先を参照してください。 スクロールで3D空間をうねうね動く的なことがやりたいんだろうな、って思ってもらえたらうれしいです。ちなみに背景には旅行の思い出の写真をあしらって、ナイスな感じに仕上げました。 ソースは適当にほじくって見てみてください。 今回は、はじめてHTML5を触ってみた中でわかったことを書きたいと思います。 HTML5でJ
HTML5 次世代のアプリケーションプラットフォーム | IIJの技術 | インターネットイニシアティブ（IIJ）
（※）このページで紹介している事項は記事初出時点の情報に基づいたものです。本ページはアーカイブとして掲載しています。 ツイート 2011年10月13日 近年急速に高性能化・高機能化が進むWebブラウザ。今後多くのネイティブアプリがクラウドサービスと連携してHTML5技術を使ったアプリに置き換えられていくものと期待されています。 ここでは、HTML5の特徴と、「第0回HTML5プログラミング＆クリエイティブ コンテスト」のアスキーアート部門で最優秀作品賞を受賞した作品について紹介します。 はじめに 現在インターネットで最も普及しているサービスはWebサービスであり、その骨幹となる技術仕様の一つは1999年に策定されたHTML4.01でした。 しかしそれ以降、長期に渡って仕様改訂がなされなかったため、次第に機能不足の感が否めなくなってきました。そこで2004年に「WHATWG」がブラウザベンダ
How to Make an HTML5 iPhone App
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for RevenueCloudFX and other key research and development projects at WebFX. You’ve been depressed for like a year no
HTML5 Canvas Drag and Drop
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 <head> <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.6.4.js"> </script> <script> window.onload = function(){ var stage = new Kinetic.Stage("container", 578, 200); var layer = new Kinetic.Layer(); var rectX = stage.width / 2 - 50; var rectY = stage.height / 2
スマホアプリの作り方【超まとめ】Web編：HTML5やjQuery MobileなどスマホWebアプリ開発に役立つ記事52選 - ＠IT
Web編：HTML5やjQuery Mobileなど スマホWebアプリ開発に役立つ記事52選 ＠IT編集部 2012/1/31（2013/2/28 改訂） iOS（iPhone／iPad／iPod touch）、Android、Windows Phoneなど、さまざまなスマートフォンのプラットフォームのアプリを作るための＠IT記事のまとめです。今後、順次更新・追加していきます。 開発者が登録したApp StoreやMarketplaceなどからダウンロードしてインストールするアプリ、もしくは、あらかじめインストールされているアプリは、「ネイティブアプリ」と呼ばれています。iOSやAndroid、Windows PhoneといったOS上で動き、マイクやカメラなどデバイスの機能を十分に使えるのが特徴です。作り方は、基本編やデザイン／グラフィック編で紹介した記事が参考になると思います。 一方で
Hidden Gems of HTML5: classList – Mozilla Hacks - the Web developer blog
If you are a web developer, you surely must know how handy it is to dynamically change the class attribute on an element. The benefits this technique are quite a few: You leave any changes in the look and feel to the CSS You avoid having to loop lots of elements as you can allow CSS to do that job for you by assigning a class on a parent element You can trigger CSS transitions and avoid having to
ActionScript入門Wiki - Arctic.js
AS3ライクに記述できるJavaScriptゲームライブラリです。(ライセンスはMIT License) ダウンロード - https://github.com/DeNADev/Arctic.js <html> <head> <script type="text/javascript" src="js/arctic.js"></script> <script type="text/javascript" src="js/game.js"></script> </head> <body> <canvas id="canvas"></canvas> </body> </html> (function() { // arcGameクラスを継承したメインクラス var Main = arc.Class.create(arc.Game, { // コンストラクタ(必要なら引数を指定) initial
様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」:phpspot開発日誌
RickShaw 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」。 カーソルを合わせるとインタラクティブにデータが表示されたりするグラフを描画出来ます。 デザイン性もなかなか良い感じ。 グラフの描画をリアルタイムに変更したりすることも可能。 カラースキームなんかも色々と選べるようです AjaxやJSONPによるデータ取得と描画も可能。 関連エントリ シネマグラフGIFアニメで驚きの効果を作成するPhotoshopチュートリアル 様々なインタラクティブ要素のあるグラフが描画できるJSライブラリ「Elycharts」 tableデータをグラフに置き換えてくれるjQueryプラグイン「Chartify」 HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」
HTML5のcanvasを使ったお絵かきツール詳説
HTML5のcanvasを使ったお絵かきツールを勉強がてら作ってみました。下記の画像リンクをクリックすればサンプルページにジャンプします。 サンプル 以下、サンプルのHTMLとJavaScript（jQuery）を使って、canvasのお絵かきツールについて解説します。 探しきれてないだけと思いますが、お絵かきツールのjQueryでの実装が見つからなかったので、自力で書いてみました。いろいろ間違ってたらすいません。 １．HTML サンプルのHTMLは次のようになっています。 <canvas width="500" height="400">お使いのブラウザはHTML5のCanvas要素に対応していません。</canvas> <ul> <li style="background-color:#000"></li> <li style="background-color:#f00"></li>
DHTMLXがiPad / iPhoneのようなタッチデバイス向けのHTML5製フレームワーク・DHTMLX Touchを配布してた - かちびと.net
DHTMLXといえば、有名なライブラリの dhtmlxGridをイメージする方も多いかも しれませんが、そんなDHTMLXのサイト を覗いたら、タッチデバイス向けのフレー ムワークを商用もフリーのGPLライセンス で配布していましたので情報をシェア。 HTML5製なので後学用にDLするのも いいかもですね。 DHTMLX Touch library will be available under the terms of GNU GPL and Commercial License. Both – free! 商用もフリーのGPLライセンスだそうです。dhtmlxGridもGPLでしたけど、商用利用は非GPLを使うよう促してましたが、こちらはそういった記述はありませんでした。まだアルファ版だからですかね。なにか勘違いしてたらご指摘ください。 iPad向けがあるのが個人的に嬉しかったです。
WebSocketの基礎知識(2012年年始版) (Kanasansoft Web Lab.)
WebSocketに関する、よくある質問や知っておいたほうがよさそうなことをまとめてみました。 技術的なことについては深くはふれていません。 あやまりがあれば指摘してください。 Q. 仕様が2つあるみたいだけど... A. WebSocketは、主にブラウザ上で使うことを考慮された通信の規格で、通信の「プロトコル」とJavaScriptから使うための「API」に仕様がわかれています。前者は「WebSocket Protocol」として「IETF」が、後者は「WebSocket API」として「W3C」がかかわっています。 Q. WebSocketってまだ仕様が固まってないんじゃないの? A. WebSocket ProtocolはIETFのRFCの「標準化提案」に、WebSocket APIはW3Cの「勧告候補」になりました。IETFにもW3Cにも承認プロセスがあり、それぞれ最後には「標準
Post by @ericbidelman · 1 image
Some 1300+ lines of code, 106 tests, and a year after I first started it, I'm happy to officially unleash filer.js (https://github.com/ebidel/filer.js); a wrapper library for the HTML5 Filesystem API. Unlike other libraries [1, 2], filer.js takes a different approach and incorporates some lessons I learned while implementing the Google Docs Python client library. Namely, the library reuses familia
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
joeycadle.com
JavaScriptエンジニア向け！スマートフォンで動くブラウザゲームの作り方