At Mozilla, a small recon team has been toying with the idea of blending the best features of the web such as interconnectedness, permissionless content creation, and safe execution of remote code with the immersive interaction model of Virtual Reality. By starting out with support for Oculus’s DK2 headset, we’ve enabled those interested to begin experimenting with VR. As a quick introduction, I
最初思ってたこと vs 現実 思ってたこと:なんか軽量? 現実:誤解だった。割りと作ってくと大きめになってくる。軽量感は無い が、redux本体のコードは結構薄い。本当に関数群だけ提供しているイメージ 思ってたこと:他のfluxと圧倒的に違う? 現実:これも誤解。構成としては色々作りこむと最終的には一般的なfluxと同じ感じになる(flummoxとかmartyあたりと体感一緒になる) ActionとかActionCreatorとかその辺が一緒になってくる。 思ってたこと:ES6で圧倒的に書ける? 現実:正解。圧倒的にES6を前提にしている。 思ってたこと:React用のもの? 現実:別にそうでもない。react-reduxを使うことでreactで使えるようになる。 詰まった所など 用語編 割りと初めて見たりする用語に出会った ActionCreator martyあたりにもあった。{typ
canvas の DOM エレメント (コンテキストではない) から toBlob() を使う、というのが一番簡潔な回答です。が、これは Firefox には実装されているので すが、残念ながら Chrome にはまだ実装されていませ ん。そこで下記の方法 を使って png や jpeg など、任意の画像形式で Blob を作ることができます。 /*** canvas に絵を書くコード ***/ var type = 'image/jpeg'; // canvas から DataURL で画像を出力 var dataurl = canvas.toDataURL(type); // DataURL のデータ部分を抜き出し、Base64からバイナリに変換 var bin = atob(dataurl.split(',')[1]); // 空の Uint8Array ビューを作る var buf
Ending The Ice Age of JavaScript The demo is striking: Unreal Engine, running live in a browser, powered by Mozilla's Asm.js, offering near native performance with hardware accelerated graphics. A gasp here, a wow there, everyone is surely impressed. And look ma', no plug-ins: just JavaScript, Web Audio and WebGL! Just don't mind the 10 second hang on load as it's Preparing JavaScript. When I hear
【--- 追記(2015/02/22)---】 2/15に6to5がBabelと名称変更したので、記事の内容もBabelを使うよう変更しました。 Not Born to Die · Babel 【--- 追記ここまで ---】 2/7にnode.js v0.12.0がリリースされました。 Node v0.12.0 (Stable) 安定版のメジャーアップデートでES6構文がいよいよ一般的になるのではないでしょうか。 そして最近良く聞くBabel(旧6to5)。 ES6+のコードをES5に変換してくれるということで、ES6構文を動かせる環境が浸透していないフロントエンドで役立つライブラリです。 Babelはgrunt, gulp, browserifyなど多数のビルドツールで扱えるプラグインが提供されているので、jsのビルド工程があるプロジェクトであれば簡単に導入できると思います。 今回は前
2015-11-21 babel presetsに合わせて更新 そろそろ ES6 で書きたいので環境メモを残しておきます。 はじめに このエントリでは Node.js を使用してフロントエンドで ECMAScript 6th を書くことを目的にしています。 その際に babel を使います。 babel は grunt, gulp, browserify など多くのプラグインが提供されていますが、ここでは grunt を使っていきます。 以前は RequireJS でモジュール書いて r.js (1ファイルにまとめるやつ) でコンパイル(minify) てやってたのですが、 今回 webpack と babel-loader を使った ES6 環境で進めようと思います。 インストール Node.js はすでにインストール済み前提とします。 まず適当なところにディレクトリを作って移動して n
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 アメーバ事業本部 クロスイノベーション室のグンタ(@gunta85)と申します。 今回はフロントエンド開発用の、 ありとあらゆる依存関係を簡単に解決してくれる、 WebPackというスグレモノをご紹介します。 導入経緯大きなアプリを開発するにあたり、依存関係を解決してくれるものを探していました。 その中で、RequireJSやBrowserify、Componentなども候補に挙がりましたが、 諸々の理由でWebPackを選びました。 特徴の違いについては「WebPack vs Browserify」等で検索してみると良いかと思います
本エントリーJavaScript Advent Calendar 2014 7日目の記事になります。 webpackとは 概要については最近いろんな方が書いてるいるのでそちらを参考にしていただければつかめるかと。 全部のせRequireJSっぽいWebpackを使ってみた。 RequireJS等はもう古い。WebPackとは? ようはナウいフロントエンドの依存解決ツールですね。 っていうネタで書こうと思っていたら、昨日yutaponさんが既に書いていたりするので(gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】)、いいところはパクリ参考にしつつ、もうちょっとwebpackに突っ込んだ内容を書いてみようと思います。 Options entryとoutput 簡単に試すときはentryは1ファイルだけ指定できればよいですが、実際にプロジェクトで使うとなると複
window.onerror = function (msg, file, line, column, err) { /* msg: error message file: file path line: row number column: column number err: error object */ alert(msg + file + ':' + line); }; window.onerrorに関数を設定しておくと、処理中catchされてないエラー、つまりUncaughtErrorの情報をここで取得することが出来ます。 "Script error. line: 0" window.onerror = function (msg, file, line, column, err) { console.error(msg + file + ':' + line); }; thr
概要 reftest-runnerというブラウザで描画内容やレイアウトといった表示結果をテストするためのライブラリを作りました。 要素技術としてはブラウザ、WebDriver API、レンダリングキャプチャ、画像Diffという感じです。 azu/reftest-runner 時間が無い人向け 以下のスライドに簡単にreftest-runnerやreftestとはなにか、どういうユースケースがあるのかが書いてあります。 reftest-runner-overview.pdf reftestとは reftest(Referrence Test)とは、2つのHTMLの表示結果(スクリーンショット)を比較することで表示結果が意図したものかをテストする方法です。 用意するHTMLとして以下の2種類を1セットとして用意して利用します。 テスト用HTML テストしたい機能を使って実装したHTML リファ
almond A replacement AMD loader for RequireJS. It provides a minimal AMD API footprint that includes loader plugin support. Only useful for built/bundled AMD modules, does not do dynamic loading. Why Some developers like to use the AMD API to code modular JavaScript, but after doing an optimized build, they do not want to include a full AMD loader like RequireJS, since they do not need all that fu
npmは"scripts"というフィールドにshell scriptとエイリアスコマンドを指定できる。 { "name": "myapp" "scripts": { "start": "node app.js", "production": "NODE_ENV=production node app.js" } } キーはnpm startのようにエイリアスとして利用できる名前となり、値にはshell scriptをワンラインで指定する。 キーは自由に指定できるが、中には既に予約されている名前があり、それらを含めて以下の4種類に分類できる。 意味付けだけがされたnpm-scripts start appを起動するようなshell scriptのエイリアスとして用いる。 restart appを再起動させるためのshell scriptのエイリアスとして用いる。 stop appを停止させる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く