Web Platform Dive into the web platform, at your pace.
より適切なものが追加されたのでそっちを使いましょう。 setInterval/setTimeout → requestAnimationFrame; これまでは setInterval function render(){ // アニメーション 1フレーム分の処理 } setInterval(render, 1000 / 60); これはもう古い。 これからは requestAnimationFrame function animationLoop(){ render(); requestAnimationFrame(animationLoop); } animationLoop(); こうすべし。 requestAnimationFrameにすると何がいいの? 複数のアニメーション描写処理を一つにまとめて最適化してくれる 同じ用に動かしている物体A,Bの動きが次第にずれていくとかがなくな
JavaScriptのプロトタイプチェーンについて理解しようとしたのだけど、prototypeとか__proto__とかごちゃごちゃになって、色んなブログを読んでもなかなか理解しきれなくて悶々としていたのだが、図を書いたらパッと理解できた!以下、情報ソースはなるべくECMAScript仕様書(3rd)を元にするようにして書きました なぜ分かりづらいのか? そもそも、なぜJavaScriptのプロトタイプチェーンは自分にとってこうも分かりづらかったのだろうか?自分なりに分析してみると、まず、「似ているが違う用語が沢山ある」という点がある。ざっとあげただけでも、「prototypeと__proto__」「__proto__と[[Prototype]]」「FunctionとFunctionオブジェクト」などがある。そして次に、「入り組んだ構造が動的に変化する」という点がある。上記のように似たよう
Web やアプリのデザイナーか「技術にしばられないでデザインを考えていく」コミュニティ。 月1回の定例MTGと年に数回のデザイン中心ハッカソンなどをしています。 最近増えてきた、音声を扱うアプリとHTMLでの実装についてPackaging HTML and Apps which deal with audio ここ最近、音声を扱うアプリが一気に出てきました。 東北ふゆまつりにも採用:写真に音声を入れられるカメラアプリ「サウンドショット」 – ITmedia Mobile http://www.itmedia.co.jp/mobile/articles/1212/06/news040.html ホーム|Androidアプリ 音声録音機能付きカメラcamereon http://camereon.jp/ FxCamera – Lets you take photos with vario
Speak.jsはJavaScriptだけでテキストを読み上げるソフトウェアです。 Webブラウザで音声ファイルを指定してJavaScriptで解析、なんてソフトウェアもありますが今回は一から“音声”を生み出してしまう驚きのソフトウェア、Speak.jsを紹介します。 ボタンを押すとHello Worldと話します。 こんな感じで任意の言葉を話させることもできます。 Speak.jsはジェネレータを通じて音声を動的に生み出します。対応しているのは英数字のみとなっており、日本語には対応していません。常に動的に生成しているので自由なテキストを読み上げさせることができます。 Speak.jsはJavaScript製のオープンソース・ソフトウェア(GPL)です。 MOONGIFTはこう見る テキストを外部サーバに送って、それを音声ファイルにして返すAPIも世の中にはあります。当然、こちらの方が英語
初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 どうもこんにちは、フレッシュさに定評のない新入社員のtek_kocです。 初めてのお仕事として「Titanium Mobileでアプリを試しにつくってみる」というのを担当していました。 JavaScriptはあまり使ったことがないですし、そもそもMacもほとんど触ったことがなかったので苦戦するかと思いましたが、2週間ほどでとりあえず形になるところまでできました。Titanium Mobileすごいです。 ということで、Titanium Mobileで試しにアプリ開発をしてみた感想を書いてみました。 そもそもTitanium Mobileとは? Titanium Mobileとは、Appcelerator社によるスマートフォン対応アプリケーションの開発環境です。 iPhoneやiPad、Androidを
TOPICS Programming , Web , JavaScript 発行年月日 2013年02月 PRINT LENGTH 524 ISBN 978-4-87311-605-1 原書 Modern JavaScript: Develop and Design FORMAT 本書は、JavaScriptの“モダンな”プログラミングを視点として、言語の基礎から、アプリケーション開発に必要な知識までを解説する入門書です。JavaScriptの初心者や、JavaScriptに触れたことはあるもののなぜそうするのかきちんと理解できていない初級者を主な対象としています。丁寧な解説で、言語の基礎から、開発に必要な基礎知識、さらにはアプリケーション開発のためのテクニックまでを提供。JavaScriptのモダンな扱い方だけでなく、なぜそう書くべきかという裏付けを得ながら理解を深めることができます。
プログラミング言語の経験がある人がJavaScriptを覚えようとすると、「あれ? なんか違うぞ?」という経験を何度もするのではないでしょうか。どうも配列は自分の知ってる配列っぽくないし、オブジェクトもオブジェクトっぽくない。 本書「プロになるためのJavaScript入門」はそうした、ある程度のプログラミング知識を持つ人のためのJavaScript入門書としてとてもよく書かれています。以下の一文は、JavaScriptの文法を解説した第2章の冒頭に書かれたものです。 JavaScriptの文法要素は単純に見えて、深く掘り下げていくとまったく違う姿を現すということがよくあります。たとえば、スコープの実体はオブジェクトですし、メソッドは関数です。また、関数は突き詰めるとオブジェクトで、さらにクロージャという側面も持っています。このように、JavaScriptの文法の学習とは「Aだと思った?
tmlib.js x three.js(WebGL) でパーティクル表示してみました! 10000 個表示しても 30 fps でるのは脅威!! jsdo.it で作ってあるので実際に実行したり, fork して遊んでもらえると幸いです. Table of contens tmlib.js とは? three.js とは? コード 解説 『Global Game Jam 2013 【新宿会場】with tmlib.js』やります!! tmlib.js とは? そもそも tmlib.js って何って方のために軽く紹介. 簡単に言うとゲームやツールを簡単に作るための JavaScript ライブラリです. 詳しくは下記のリンクにて tmlib.js とは 以前, 勉強会で発表させていただいたスライドです. GitHub tmlib.js は GitHub で管理しています. Documents
Node.js、MongoDBでデータの保存:Node.jsを使ってみよう(2)(1/4 ページ) Node.jsとSocket.IO、MongoDBを使用して、Webページの更新内容がリアルタイムにView画面に反映されるサイトを作ってみた MongoDBの紹介 前回はNode.jsでWebアプリを作成するために、ExpressやSocket.IOを使用したデモを基に説明した。今回はWebアプリのデータを保存するために必要なデータベースとしてMongoDBの使い方を説明していく。今回の記事でも後半でMongoDBを使った簡単なデモを用意しているので試してみてほしい。 MongoDBとは、ドキュメント指向のデータベースでNode.jsと相性がいいため、Node.jsとともに注目されている。Node.jsで実装したREABLOエンジンを使ったTech Releaseでも記事のデータベースとし
The most popular coding language for the web is javascript; so much so that since the advent of HTML5, it has now been officially accepted as the default standard. Javascript has moved beyond a smaller client-side browser-based language to become integrated not just for front-end design, but also for back-end server-side development. As a result there are has been a huge growth of Javascript libra
Numerical analysis in Javascript The Numeric Javascript library allows you to perform sophisticated numerical computations in pure javascript in the browser and elsewhere. From the blog... Numeric.js 1.2.6 (December 20, 2012) Numeric.js v1.2.5 (December 18, 2012) Numeric.js 1.2.4 (November 19, 2012) More from the blog... Examples Each of these examples runs in the Workshop. Linear algebra Complex
はじめに はじめまして。株式会社ピクセルグリッドの外村です。今回この連載では、マークアップエンジニアやデザイナを対象に、『jsdo.it -Share JavaScript,HTML5 and CSS-』(以下、jsdo.it)というサイトを使ってユーザ参加型のJavaScriptやCSS3の学習コンテンツを提供していきます。今回は初回ですので、jsdo.itというサイトの概要や連載に向けての事前準備を解説します。 jsdo.itとは jsdo.itというのは2010年に株式会社カヤックがリリースしたWebサービスで、Web上でHTML5、CSS、JavaScriptを書いてその場で実行することができます。書いたコードは誰でも見ることができ、トップページに並んでいる人気のコードを見るだけでも楽しむことができます。 また、単にコードを書いたり人が書いたコードを見たりするだけでなく、他にも
新しく書き直した。 以前のバージョンと全然互換性がなくて申し訳ないのだけど、可読性とかかなり使い勝手が良くなっていると思います。ライブラリ自体のコードも分かりやすくなっているはず。 http://mohayonao.github.com/timbre.js/ Chrome, Safari, Firefox あと node.js で使えます。 あとついでに SuperCollider みたいな関数を集めたものも用意しました。 http://mohayonao.github.com/subcollider.js/ timbre.js と合わせてアルゴリズム的なものを作るのに使えます。 デモ どういうことができるのかは簡単なデモで確認できます。 http://mohayonao.github.com/timbre.js/beatbox.html http://mohayonao.github.c
世界中でデータがどんどん増えていく中でデータをうまく扱うことはとても重要になってきています。そんな中、New York Timesが積極的に活用していたり、Githubのwatch数ランキングで上位にランクインしていたりと最近人気急上昇中のデータをビジュアライズする為の「d3.js」というライブラリがあります。 本日はこの「データxデザイン」をwebサイト上で実現する為のjavascriptライブラリ”d3.js”について紹介したいと思います。 このライブラリを使うことで、今までなかなか難しくてできなかったウェブ上での「データの可視化」が手軽にできるようになり、複雑なデータを直感的に理解できるようなサイトが作りやすくなります。早速ですがこのd3.jsというものがどういうものかをなんとなく感じるには実際に動いているデモを見て頂くのが早いので以下をご覧下さい。 オバマ大統領の国家予算案詳細 (
Canvas Query jQuery風に簡単にCanvasを扱えるラッパーライブラリ「Canvas Query」 canvasのコードが次のようにjQuery風かつ直感的に記述できます jQueryを使っている人にとってはCanvasがより身近になりそうなライブラリですね スマホ・タブレットの普及でCanvasも重要な技術要素になっていく可能性を秘めていますが、基本を学んだ後はこうしたライブラリを使って便利に扱うのもよさそう 関連エントリ オープンソースのHTML5お絵かきウィジェット「Literally Canvas」 canvasを使って画像をスタイリングするチュートリアル Canvasベースのお絵かきが実装できるjQueryプラグイン「Sketch.js」 CanvasとWebcamで作られたブラウザ上で動作する面白デモx2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く