JavaScript Error MonitoringTrackJS automatically detects JavaScript errors with a story about how the error happened, allowing you to fix critical bugs before your users even notice them. Stop relying on customer reports and start resolving issues.
JavaScriptでLeapMotionアプリを作る方法
こんにちは。クレイの浅海です。 いま話題のLeapMotionとJavascriptを使って、空中でピアノを演奏できるアプリを作りました。 まだLeapMotionを初めて数日なので勘違いしている部分もあるかもしれませんが、JavaScriptでLeapMotion対応アプリをどのように作るのかについて、気づいたことを紹介します。 目次 デモ leap.jsの用意 イベントループ Frameオブジェクト frame.fingers frame.hands frame.gestures circle swipe keyTap screenTap 感想 デモのコード デモ まずは実際に動かしている動画を御覧ください。 空中に手をかざすだけで、ピアノを演奏することができます。 音の再生にはMIDI.jsを使用しています。 ※ 手を3Dで表示している部分は、LeapMotion標準のビジュアライザ
なぜJavaScriptでテストコードを書くのか？
はじめに 第1回目の本稿は、実際にテストコードを書く前に、基本的な考え方である「なぜテストコードを書くのか？」を解説します。 対象読者 JavaScriptの基本をある程度理解している方 テストコードをこれから書こうと考えている方 頻繁な変化への対応 まずは、開発現場で多く行われている基本的な考え方を振り返り、テストコードがなぜ必要なのかを考えて行きたいと思います。 これまでのテストの考え方 まずは、一般的なウォータフォールモデルを例に考えてみましょう。通常ウォータフォールモデルでは、設計→実装→テストという順番で、作ったものを最後にテストします。最後にテストを行うというのは、言い換えると「品質を最後に担保する」と言えます。 また、最後にテストする場合は、通常テスト仕様書などを作成した上で必要なテストパターンを洗い出し、手動でテストを実施します。 変化への対応が求められている スタートアッ
Rendr入門(1): Node.js + Backbone.jsでサーバ & クライアントを構築する"Rendr"の紹介 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめてQiitaで記事を書いています。先日「Node.js + Express.js + Backbone.js」でサーバとクライアントの両方のシステムを構築する"Rendr"というウェブフレームワークを試しました。Rendrは、アメリカで人気のサービス"AirBnb"のチームが開発し、オープンソースとして公開したものです。クライアント側での採用事例は増えているBackbone.jsですが、サーバでの利用は珍しいのでは無いでしょうか。Rendr自体もまだ日本語での紹介例が無い事もあり、システムを紹介しつつ、使用感やメリット、そしてデメ
Announcing a New and Improved Node.js Debugger | StrongLoop
From the developers who build Node.js, StrongLoop offers professional-grade support, consulting and training for Node.js.Over the years, Node developers have come to rely on Danny Coates’ node-inspector npm module to debug their applications. While popular, the community has nonetheless been clamoring for additional features. Node-inspector has also been in need of an infrastructure refresh with G
JavaScriptによる小数計算の誤差を無くす
ファッ！？ 0.1kg痩せたはずが、0kgと表示されてしまいました。 たかだか100gとはいえ、こんな表示になったらガックリきますね。 一行ずつ値を追っていくとわかるのですが、4行目で減算した時点でdiffの値が "0.09999999999999432" とズレてしまっています。 これはJavaScriptがIEEE 754という規格に従って実装されているためです。 つまり、この計算結果はJavaScriptの仕様なのでJavaScript的には正しい値であり、避けようがありません。 このIEEE 754と小数計算の誤差についての関係は下記のURLの解説が分かりやすくオススメです。 http://pc.nikkeibp.co.jp/pc21/special/gosa/eg4.shtml これの対処法として、小数値に10^Nの数値をかけて整数値にしてから計算してしまおう！ といった対処法を
JavaScript イディオム集
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
最強オブジェクト指向言語 JavaScript 再入門！
この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方
Snap.js
The Default demo shows basic Snap.js functionality Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neq
JavaScriptのいろいろなコーディングルールをまとめてみた
JavaScriptの書き方はJavaScript自体がある程度自由なためいろいろな書き方ができますが、一貫性を持って書いた方がバグなども発生しにくくなるため、コーディングルールを定めておくのはよいことだと思います(特に複数人の開発の場合) 有名な企業やライブラリはコーディングルールも公開している事が多いので適当にまとめてみました JavaScript style guide – MDC Docs Mozilla/Firefox向けのものなので、一部ECMAScriptの範囲を超えたものも含まれています。 多くの人が見ていると思うので、見たことない人は一度読んでみるといいです。 jscsにこのコーディングルールをチェックするプリセットが用意されています。 Google JavaScript Style Guide Google JavaScript Style Guide 和訳 — Goo
フロントエンドエンジニアにおけるNode.jsのススメ | 1 pixel｜サイバーエージェント公式クリエイターズブログ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして！こんにちワン！ スマートフォン版Amebaプラットフォームでフロントエンドの開発を担当している2012年入社の鳥山と申します。 そこで今回は、Node.jsを始める上で知っておくと便利な知識を現場での開発例を交えて紹介させていただきたいと思います。 想定している読者は、 ・普段HTML、CSS、JavaScriptなどのクライアントサイドの開発をしている方 ・Node.jsに興味があり、始めてみたいと思っている方 ・サーバサイドプログラミングと聞くと身震いしてしまう方 です。 ※今回は、記事にも制限があるので、Node.jsについての説
fluentd + mongodb+ node.js でリアルタイムにグラフを描く - stanaka's blog
追記 2/22 毎回微妙に追記していますが、今回も追記です。最後にmongodbのinsert性能について80lines/secで厳しくなった、と書いてますが、環境か設定まわりがあやしいので訂正します。もうすこし検証してみようと思います。 → 検証して fluentd側の設定の問題であることが分かりました。詳しくは、http://blog.stanaka.org/entry/2013/02/22/171053 追記ここまで 最近は、fluentd + mongodb でログを蓄積していろいろ便利に使っているわけですが、数分に一回集計スクリプトを周したり、 GrowthForecast の画面をリロードしまくるのではなく、もっとリアルタイムで見たい! という欲求が募ってきたので、 node.js を使って実装してみました。( https://github.com/stanaka/realti
[JS]パネルをフェードで切り替えるシンプルな国産のjQueryのプラグイン -ImageNavigation
デモページ：2（テキスト版） 右側のパネルの切り替えは手動と自動に対応しており、スクリプトのオプションで設定が可能です。 スクリプトのオプションでは次のものなどが設定できます。 切り替えの自動と手動 パネルの表示時間 フェードの時間 ラベルの画像とテキスト ラベルに画像を使用した際、ロールオーバー時の変更はスクリプトの機能に含まれているため、ロールオーバー用の画像を用意するだけで実装されます。
[JS]透過処理をした写真画像の転送量を軽くする方法
通常、透過処理をした写真画像を使用する際のフォーマットはPNGを使用することが多いと思います。これを写真画像にJPEG、その上にマスクのPNGを使用してトータルの容量を軽減する方法を紹介します。 デモでは、PNGのみで127KB、JPEG with PNGで42KB、と約1/3容量が軽減しています。 ;(function() { var create_alpha_jpeg = function(img) { var alpha_path = img.getAttribute('data-alpha-src') if(!alpha_path) return // Hide the original un-alpha'd img.style.visiblity = 'hidden' // Preload the un-alpha'd image var image = document.cre
WebSocketで目指せ“リアルタイムWeb”！第1回 node.jsの衝撃とWebSocketが拓く未来 - ＠IT
ご挨拶 こんにちは、ロンドンのNew Bambooという会社でWebエンジニアとして働いている@makoto_inoueです。ここのところ、PusherというWebSocketのクラウドサービスの開発に関わっています。今回から3回に渡ってWebSocketに関する短期連載を担当させていただきます。 私を含めたNew Bambooの面々（我々は自分たちのことをBambinoと呼んでいます）がWebSocketになぜ興味を持ったかということからはじまり、実際にクラウドサービスを始めるまでにいたったストーリーをお話ししたいと思います。そのストーリーを通じて、WebSocketが切り開く「リアルタイムWeb」な世界への可能性や技術的課題を皆さんと共有できればと思っています。
JavaScript用暗号ライブラリ色々まとめ:phpspot開発日誌
JavaScript Cryptography JavaScript用暗号ライブラリ色々まとめ。 次のように多数のJS用暗号化ライブラリがまとまっていて、JSで暗号化をするような場合にはもうお腹いっぱいと言ってしまいそうな量が紹介されています。 自分で暗号を実装する、というのは時間がかかりますのでこうしたライブラリを活用させて頂いて素早く開発ができそうです。 関連エントリ PHP暗号化ルーチンのサンプル集 PHPで暗号化の際に便利に使えるCrypterクラスが公開 PHPで暗号化・復号化
値をそのまま編集できてソート可なテーブルを簡単実装できるJSライブラリ「EditableGrid」:phpspot開発日誌
EditableGrid - Make your HTML tables editable 値をそのまま編集できてソート可なテーブルを簡単実装できるJSライブラリ「EditableGrid」。 ベタ書きのテーブルタグや、XMLを読み込んでテーブルにすることも可能です。 カラムに型を定義することが出来て、編集時は単純なテキストエリアはもちろんですが、ドロップダウンメニューから選べるようにすることも出来ます。 テーブルヘッダーをクリックすればソートされます。 １から実装しようとするとかなり大変そうですが、ライブラリで比較的簡単に複雑でリッチなテーブルが実現出来ますね。 関連エントリ jQueryベースの多機能グリッドテーブル「DataTables」 jQueryでリッチなグリッドを実装「jqGrid」
JavaScript関係のツールまとめてみた | Web scratch
最近使ってたりするJavaScript関係のツールまとめてみた。 主にWebサービスです。 Global is the new private JavaScriptライブラリの名前空間汚染をチェックするツール。 元々載ってるもの以外でも*Analyze your own scripts!*から調査したいライブラリを追加できる。 jsFiddle ブラウザ上で HTML / CSS / JavaScript の実行結果を表示できる。 Embedコードもあるので、ブログにjsやCSSなどを載っけるのに便利。 エディタ機能も整形、シンタックスハイライトしてくれるので使いやすい。 HTML5のコードを使うにはInfoからDTDを変更してから使う。 類似:MooShell Gist – GitHub gistです。コードスニペット共有サービスです。 Greasemonkey貼るときgist fill
14のjQueryベストプラクティス[to-R]
14のjQueryベストプラクティス 原文:14 Helpful jQuery Tricks, Notes, and Best Practices 良かったので翻訳してみました。かなりの意訳で、上手に訳せてない箇所も多いので詳しくは原文を参照してください。 1.メソッドはjQueryオブジェクトを返す ほとんどのメソッドがjQueryオブジェクトを返すのが重要です。 これにより次のようなメソッドチェーンが可能になっています。 $someDiv .attr('class', 'someClass') .hide() .html('new stuff'); jQueryオブジェクトを返すのがわかっていれば次のように分割して書くことも出来ます。 var someDiv = $('#someDiv'); someDiv.hide(); 次のように一行で書くことも出来ます。 var someDiv
![14のjQueryベストプラクティス[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://dan-silver.github.io/ElementTransitions.js/