JavaScript で流体シミュレーションを試してみるテスト - CX's Hatena Blog
最近、Google から物理エンジンに関して面白そうなライブラリが登場したようなので jsdo.it で試してみました。 Googleがオープンソースの2D物理エンジンLiquidFun 1.1をリリース このライブラリは「Box2D」（2D の物理エンジンライブラリ）に、流体シミュレーション関連の機能を拡張したライブラリとなっているようです。 （ちなみに、JavaScript 版のライブラリは、C++ 版を Emscripten でコンバージョンしたものとなっているようです。） Wave Machine Particles Soup Soup Stirrer Impulse Rigid Particles Elastic Particles Surface Tension Theo Jansen サンプルを動かしてみるだけでも、結構楽しいので、興味がある方は試してみては如何でしょうか。
Server Sent Events(SSE)の使いどころと使い方 | GREE Engineering
Flameの箱を捨ててしまったためどうやって送り返すか困っています。@kyo_agoです。 今日は2014年6月にβ公開したGREEチャットで通信に使用しているSSEを紹介したいと思います。 SSEとは SSEとはServer-Sent Eventsの略でW3Cで提案されているhtml5関連APIの一種です。 これはサーバとの通信やJavaScript APIを中心としたもので、サーバからPush通信を行うための仕様です。 サーバからPush通信に関してはこれまでもCometやWebSocketが存在しましたが、SSEは互換性や効率などの点でそれ以外の技術に対する特徴があります。 ここからは具体的な仕様や、実際に使用した場合の感想などを紹介したいと思います。 通信方式 SSEはHTTP/1.1を使用し、Content-Type: text/event-streamで通信を行います。 基本的
Concatだけでビルドを済ませてた例（Backbone.jsとAngularJS）
Concatでどこまで戦えるのか @jxck_ browserify使ってるんだけどあんま意味ない感じになっててつらいんだよねーっていうのを昨日 @ahomu に話したら、concatで全然いけますよって言われたからさっき乗り換えた。 — Kazuhito Hokamura (@hokaccha) August 6, 2014 (＾ω＾) 全然いけますよ 依存管理をサボってconcat 以下、「依存管理に労力を割きたくない」という理由で依存管理を省略した場合に、concatだけで破綻無くビルドするためにやっていたパターンの紹介。いけますと言った手前はあるが、最終的には現場によってケースバイケースということで、どうかひとつご容赦願いたい。 Case 1: Backbone.js Backbone.jsの場合、extends に代表されるクラスベースのオブジェクト指向モデルに多少の制約が必要に
WebRTC（PeerJS）で遠隔作業支援システムを作る（3） - Tech-Sketch
WebRTCを用いた遠隔作業支援システムを作ります。 前回 はスマートグラス（Vuzix M100）とサーバサイド（node.js + express + peerjs-server）の環境構築について説明しました。今回はCoffeeScriptで記述されたモジュールの全体構成と、PeerJS & MediaStreamの初期化処理について解説します。 CoffeeScript WebRTCを用いた遠隔作業支援システムの中心的なロジックは、ブラウザで動作します。今回はコールバックを駆使するそれなりに複雑な処理を実装するため、画面操作をハンドリングするロジック、PeerJSの操作とコールバックをハンドリングするロジック、シグナリング等の共通ロジック、と責務を分割して実装したほうが見通しが良くなるでしょう。 ただしJavaScriptはプロトタイプベースのオブジェクト指向言語のため、Javaや
GruntでSassのビルドとjsファイルの結合・圧縮を自動化 - bata's log
JSファイルの結合と圧縮を自動化したくて色々調べていたのですが、やはりGruntが一番便利だということで導入してみたました。 結論からいうと、もっと早く導入すればよかった。 Gruntの導入 導入部分は下記を参考に。 Windowsの場合 http://webdrawer.net/javascript/firstgrunt.html Macの場合 http://catcher-in-the-tech.net/461/ Gruntfile.js を記述 module.exports = function(grunt) { grunt.initConfig({ //Sassをビルド sass: { options: { style: 'compressed',//CSSのスタイル sourcemap: true,//ソースマップを書き出す noCache: true//キャッシュファイルを生成
リアルタイムWebの栄光を願い!! これから死に行くせめてものこの間に!! SSEの戦術的価値を説きます!!
SSEとは Server-Sent Events 常時接続系API JavaScriptからはnew EventSource(url);で使う JavaScript APIと通信プロトコルが合わさったもの プロトコルはHTTPのContent-type: application/octet-stream;、Transfer-Encoding: chunked;
AngularJS入門の巻
今後のWeb開発の未来を考えて AngularJSにしました ~とあるSIerの場合~ いまや最も優れたJavaScriptフレームワーク「AngularJSリファレンス」出版記念イベント発表資料 http://angularjs-jp.doorkeeper.jp/events/14893
traceur-compiler 入門 - from scratch
最近ちょっとはまってるtraceur-compilerについて紹介していきます。 前書き 今回、書いてたら非常に長くなってしまって、ちょっとした薄い本の記事くらいの文量があります。 その代わり、公式ドキュメント + コードの中を読みこんで書いているので、今のところ多分日本では一番詳しい記事かと思います。 すごく長いので章分けしました。興味が有るところだけ読み飛ばしてもらってもいいかと思います。 第一章 traceur-compiler概要 第二章 ES6言語仕様概要 第三章 traceur compilerの使いどころと類似ツール 第一章 traceur-compiler概要 traceur-compilerとは Googleが作っている EcmaScript6 形式で書かれた JavaScript を EcmaScript5 の形式に変換してくれるツールです。"トレーサーコンパイラー"と
Web Componentsが変えるWeb開発の未来
Google I/O 2014でEric BidelmanがPolymer and Web Components change everything you know about Web developmentというタイトルで、Web Componentsおよびその補完・拡張ライブラリであるPolymerについてセッションが行われました。 「なぜWeb Componentsが生まれたのか」 「Web Componentsが何を解決してくれるか」 この2点を上記セッションに沿って解説していきます。 HTML/CSSが持つ弱点 Webを構成していくパーツを作る際、今まではどのように行っていたでしょうか。<div>や<textarea>といったようなネイティブで用意されているタグに、CSSで見た目で装飾し、JavaScriptからDOMのAPIを操作してインタラクションを付与してきました。 しか
クッキーより怖いcanvas fingerprintingって何？迂回方法は？
クッキーより怖いcanvas fingerprintingって何？迂回方法は？2014.07.28 16:009,463 satomi 問題：ホワイトハウスとYouPornが共通でもってるもの、なーんだ？ こたえ：canvas fingerprinting ｢canvas fingerprinting（canvasの指紋採取）｣というのは、最近大手サイトで採用が広まってる新手のオンライン追跡ツールのことです。クッキーと違って、ユーザー側からは探知もブロックもできないという、とんでもない野郎です。 まさにユーザーの知らぬ間にウェブの閲覧行動がサイトに筒抜け、というマジックミラー状態。その現状をProPublicaが記事にしていますよ。 ｢canvas fingerprinting｣を最初に発見したのはプリンストン大学と英ルーヴェン大学の研究チームです。ここが発表した｢The Web Neve
アロー関数が実装された - JS.next
概要 ES2015を象徴する機能である、アロー関数構文の実装がついにV8で始まった。 無名関数を短く書ける [3.28.31] アロー関数は無名関数の省略記法である。 今までこう書いていたのが、 var fn = function (a, b) { } こうスッキリ書ける。 var fn = (a, b) => { } 「=>」が矢のように見えることから「アロー」関数と言う。 更に短くできる これが、 [1, 2, 3].map( function (v) { return v * v } ) // [1, 4, 9] アロー関数だとこうなるが、 [1, 2, 3].map( (v) => { return v * v } ) // [1, 4, 9] 引数が一つの時には「()」を省略できるので、こう書ける。 [1, 2, 3].map( v => { return v * v } )
気軽にプログラミングを始められるWebエディタ『runstant』作りました - Qiita
7月19日. 久しぶりの３連休. 予定はぎっしりだった. だが神からのお告げがあった. なんか作れと. 気づいたらオレの指は Macbook Air の薄いキーボードの上だった. ってことで連休中にちょっとしたツール作りました. 気軽にプログラミングを始められるWebエディタです. 名前は runstant. run + instant の略で, インスタントラーメンのように一瞬で気軽に実行できるよって意味です. ログイン不要, サーバー通信なしで一瞬で プログラミングを始めることができます!! 一応, tmlib.js 公式エディタ的な 位置づけなのでデフォルトで tmlib.js のサンプルが入ってます. とりあえず触ってみてください -> こちら 特徴 ログインの必要ないよ 状態を hash で保存するのでサーバー通信しないよ html/css/javascript が書けるよ ちょ
Cookieを使わずにユーザーを追跡する仕組みが普及しつつある | スラド IT
Canvas機能を使った文字やグラフィックス描画の際の挙動の違いでWebブラウザの違いを識別する「Canvas Fingerprinting」という技術が開発され、すでにトップ10万のサイト中5.5%がこれを使ったユーザー追跡を利用しているという。 また、ユーザがCookieをこまめに削除しても、サイト側が同じデータをFlashのローカル共有オブジェクト（LSO、Flash Cookie）などに保存しておいて回復させれば、実質的にCookieを不滅化することができる。このEvercookieを実現する手段の一つである「Respawning by Flash cookie」sは、人気上位200サイトのうち10サイトで検出されたそうだ。 Cookieを無効にしていても、適切な対処をしない限り、閲覧者の行動はかなりの割合で漏洩している可能性があるようだ。 Canvas Fingerprintin
JavaScript フレームワークがデータバインディングを実現する４通りの手法
最近流行りの JavaScript MV* フレームワークは、どれもデータバインディングをサポートしているが、実現方法はフレームワークによって異なる。 この記事では、各種フレームワークがどのようにモデルの変更を検知しているかを次の 4 つのパターンに分類して紹介する。 モデル クラス方式 (Ember.js、Backbone.js、Ractive.js、Knockout.js など) 力ずく方式 (AngualrJS) モデル書き換え方式 (Vue.js) Object.observe 方式 (Polymer) パターン名は私が勝手に名づけたものだけど、このへんの雰囲気が理解できれば、フレームワークごとの個性が分かるだろうし、利用イメージもわきやすいんじゃないかと思っている。 1. モデル クラス方式 「モデルとして扱えるのはフレームワークが用意したモデル クラスのインスタンスだけ」という
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう こんにちは、@yoheiMuneです。 ブラウザのレンダリングの仕組みはHTML5 RocksやHow browsers workで詳しく解説されてきました。しかしそれらはとても詳細で、読破して理解するのは大変です。 今回のブログでは手軽にレンダリングの概要を理解できるように心がけました。またより詳しく学べるようなリンクも記載しました。 そしてブラウザのレンダリングの仕組みを理解した上で、どのようなJavaScriptを書くべきかについても記載しました。 目次 ブラウザのレンダリングの仕組み この章では、HTMLとCSSが読み込まれてから画面に表示されるまでの間に、ブラウザがどのような処理を行っているかを説明します。 ファイル読み込みから表示までの一連の流れは以下図の通りです。 [1]
![[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/705cdef7654f2f96a242f9a2834ce643b78de75c/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F336.jpg)
サイトパフォーマンスを上げるJavaScriptとCSSの使い方 - ワザノバ | wazanova
リアルタイムアナリティクスのサービスを提供しているGoSquaredがエンジニアブログで紹介しているのは、サイトパフォーマンス向上の工夫。今回は、アセットのダウンロードやパースのところでなく、遅延をおこさずにスムーズに描画するかというポイントに絞っています。 典型的なスクリーンの描画フローでは、フレームごとにブラウザがJavaScriptを評価する。もしJavaScriptによって修正されていれば、エレメントのためのスタイルやレイアウトを再計算する。次に、ページをいくつかのレイヤに描いていき、レイヤをスクリーンにあてはめるのにGPUを使う。各ステージごとに、ウェブページやアプリが行うことが違い、それぞれにコストがかかる。スムーズな60fpsを目指したければ、ブラウザは全てを16msで完了させる必要がある。 JavaScriptがレイアウトを変更（margin, padding, width
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.enoie.net/blog/2014/08/node-js%E3%80%80-%E9%9D%9E%E5%90%8C%E6%9C%9F%E5%87%A6%E7%90%86%E3%82%84q%E3%81%AE%E8%A9%B1/
GitHub - rakuten-nlp/rakutenma: Rakuten MA - morphological analyzer (word segmentor + PoS Tagger) for Chinese and Japanese written purely in JavaScript.
iOS7でPage Visibility APIを使う - Qiita
Swiftで面倒なJSONの取り扱いをさらに10倍便利にするclass JSON - Qiita
