高機能なモーション制作用JSライブラリGSAP/TweenMaxを使ったタイムリマップ表現 | ICS MEDIA
皆さんはHTMLでモーションを作るときにどのトゥイーンライブラリを使用していますか？ GSAP（グリーン・ソック・アニメーション・プラットフォーム）は、Flash全盛時代から存在する歴史あるトゥイーンライブラリです。 GSAPはCSS/HTML Canvas/WebGLなどさまざまなアニメーション作成に利用できます。類似トゥイーンライブラリよりも高機能であり、かつ実行パフォーマンスも優れているのが魅力的です。GSAPの詳しい使い方は次の記事で解説しているので、使い方を知りたい方は以下の記事から参照ください。 GSAP入門（前編） - 基本的な使い方 GSAP入門（後編） - タイムライン機能など この記事では、GSAPのタイムスケールという機能を中心に解説します。 作成したモーションデモを紹介 今回はGSAPの機能の1つ「タイムスケール」を使って、3Dの表現を試してみました。まずは次の2つ
フロントエンドエンジニアのための「俺の最近のRailsのJS開発環境」を考察する - Qiita
「俺の最近のRailsのJS開発環境」 for フロントエンドエンジニア TL;DR 「片手間のJS」ならhogehoge-railsで大丈夫（e.g. browserify-rails, sass-rails, etc.） 「本気でJS書く」ならsprocketsから切り離す（e.g. SPA, etc.） 迷えるフロントエンドエンジニアに愛の手を ※ 個人の見解です はじめに 本記事の内容は個人の見解であり、所属する組織の公式見解ではありません． 本職は学生，片手間にRailsエンジニア，そのさらに片手間に過激派フロントエンドエンジニアやってる人間の戯言です． 『俺の最近のRailsのJS開発環境を教えてやる』を受けて，フロントエンドエンジニアの視点から見たRailsのJS環境を考察してみた記事になります． 元記事をdisっているわけではなく，むしろリスペクトしたうえで視点を変えてみた
HisasAnn.com is for sale | HugeDomains
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
javascriptのモジュールパターンとprototype継承について - tanihiro.log
jsを書くとき、今まであまりprototype継承を使用せず、どちらかというとモジュールパターンで記述することが多かったので、それぞれ何が違うのか、あまり理解していませんでした。 それを今日教えてもらえたので、まとめます。 モジュールパターンとは function Hoge() { var n = 1; return { fuga: function() { alert(n); } }; } var hoge = new Hoge; hoge.fuga(); // 「1」がalertで表示される hoge.n; // Error このように、関数の返り値をobjectで返し、さらにそのobjectの中にfunctionを用意します。 fugaの中で参照しているnはクロージャの中で生き続けるので、外からでもアクセスできますが、直接は参照できません。 この、クロージャを利用してprivateや
Railsで呼び出すjsをページごとに分けたい - PartyIX
Railsにかぎらず，ある程度のフレームワークに乗っかって開発していると「できることはできるんだけど，ちょっと好みに合わせたい」みたいな要望が発生してくる． 今回のも，そんな「気を使えばできるけど頑張りたくない」ときに便利なことです． Railsはjavascriptをassetsというフォルダの配下においている． この辺の活用方法はSprocketsやAssetPipelineを理解してもらうとして，とにかくそういう構成になっている． Railsは，何もせずそのまま"application"のレイアウトを使用していると，このassetsフォルダ配下にあるjsをすべて読み込んでいる． なんでこうなっているかというと，デフォルトで用意されているapplication.jsが原因だ． application.js内には //= require . という記述がある． そしてこのapplicat
3 ways to integrate Ruby on Rails + React + Flux | Open Minded Innovations
Why I’m using React with Rails I've been using Rails for years and recently I’ve been integrating javascript frameworks into my stack in various ways to help with front end development. There are a lot of great javascript frameworks out there like Angular, Ember, Meteor, etc, but my current favorite is React and Flux. Facebook has been doing tremendous work open sourcing their javascript stack fro
requireの仕組み - ぶれすとつーる
こんばんは この記事は Node.js Advent Calender 2014の23日目の記事です。 Node.js Advent Calendar 2014 - Qiita 普段node書くとき、何気なく使ってるrequireだけど、どんな風にモジュールが読み込まれてるのかコアコードの中を追ってみる。 https://github.com/joyent/node/blob/v0.11.14/lib/module.js#L362 Module.prototype.require = function(path) { assert(util.isString(path), 'path must be a string'); assert(path, 'missing path'); return Module._load(path, this); }; こいつが各moduleが読み込まれた
React+FluxでTodoMVCを作ってFluxについて学んでみた - yutaponのブログ
ちょっと前にReactを使って簡単なアプリケーションを作ってみたのですが React入門用に簡単なアプリケーション作ってみる - yutaponのブログ 今回はFluxアーキテクチャについて学びたいと思ったので、TodoMVCを題材に写経してみました。 構成・ロジックは参考にしつつ、ES6構文で書くようにしてます。 参考にしたコードはfacebook/fluxのexamplesのコードになります。 flux/examples/flux-todomvc at master · facebook/flux · GitHub https://github.com/facebook/flux/tree/master/examples/flux-chat 作ったコードはここに置いていて、 https://github.com/sskyu/react-flux-todomvc-example/tree
Rails + React + ES6 のためのアセット環境構築 - 破いて捨てたノート
結論 Sprocketsの動作を維持しつつ、npmやgulpなどのモダンなパワーも取り入れた、いいとこどりな環境を構築してみた。 やりたいこと SEOのため、Reactでserver-side renderingをしたい JSコードをES6で記述したい 既存のCoffeeScriptのコードも共存させたい（後ほど書き換える予定） npmやgulpといったモダンな環境でアセット管理をしたい browserifyを使いたい Sprocketsが実現している機能は維持したい そもそもSprocketsは何をしているか 周知のことでしょうが念のためおさらい。 ファイル毎の依存関係の管理 application.jsなどのマニュフェストファイルがやってること altJSのコンパイル アセットのminify アセットの連結 アセットファイル名にMD5フィンガープリントを挿入 Sprocketsの問題点
Chrome DevToolsを使ってJavaScriptのメモリリークを検出し、解消する - 人生dat落ち
JavaScriptを書いていたらブラウザがくっそ重くなる症状に出くわした。あぁ、噂のメモリリークですわ。 先人の知恵に頼るマン。それっぽい記事が見つかる。 javascriptのメモリリーク対策(随時更新) - Qiita Shibu’s Diary: JavaScriptのメモリリークを10倍速で発見する Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools Writing Fast, Memory-Efficient JavaScript - Smashing Magazine angularjs - How to catch memory leaks in an Angular application? - Stack Overflow 上の記事はProfiles + Take Heap
MVVMのModelにまつわる誤解 - the sea of fertility
こちらに移転してきて初めての記事です。 最近たまに話題になるので書いておきます。MVVMのModelについて誤解されやすい部分のお話です。最近よく議論してるasync/awaitの話とは関係がありません。なおこの話は以下のスライドを理解している事が前提となります。 共有したい理解(ゴール) ViewModelはModelの影 ModelについてViewModelが行うことは、イベントに対する反応と戻り値のないメソッドの呼び出ししかない事 これについての理解を共有できるよう説明していきます。 VIewModelはModelの影 スライドにもしつこく書きましたが、MV○(MVVMやMVC/MVP)のModelは大変分厚くなるし、アプリケーション間で使いまわすことなんてできません。ModelはUIを意識しない？？いや、何度も言っていますが、意識はする必要があるんです。ただUI実装の知識が必要ない
既存のRailsアプリケーションにVue.jsを採用した話 - スパイスな人生
こんにちは、id:ukstudioです。今回は弊社サービスの1つであるSPOTLIGHTSにVue.jsを採用した話をしようと思います。 SPOTLIGHTS自体は一般的なRailsアプリケーションといって問題ない作りになっているので、既存のRailsアプリケーションにどういった形でVue.jsを投入していったかを中心に書いていきます。 Vue.js採用前の状況 SPOTLIGHTS初期のJavaScriptはHTML/CSSと共に外注し納品してもらったものです。 フレームワークといった類はほぼ使っておらずjQueryに頼りきったコードでした。 当時は様々な事情によりこれはこれで妥当な判断だったと思うですが、今後社内でメンテナンスしていくうえで足かせになるであろうというのはなんとなく予想ができていました。jQueryのイベントハンドラやDOM操作がひとつのファイルにひたすら連なっているとい
Class構文について - JS.next
概要 待ち焦がれた人も多いことだろう。ES2015の一番の目玉機能とも言えるクラス構文が、ついにV8でサポートされた。 Class構文は、『関数（コンストラクタ）定義』＋『.prototypeへのメソッド定義』の糖衣構文である。 JSで今まで様々に工夫されてきたクラスの書き方を、綺麗に統一してくれる可能性を秘めている。 クラスを作る 従来、Catクラスを作ろうとした場合このように書いてきた。 function Cat(name) { this.name = name } Cat.prototype.meow = function () { alert( this.name + 'はミャオと鳴きました' ) } しかしこの書き方だとどうしても、コンストラクタとメソッドの定義が分離されているため、クラスとしてまとまりがなく分かりづらく感じる。 メソッドが増えてきた時も、Cat.prototyp
ASCIIcasts - “Episode 261 - JasmineでJavaScriptのテスト”
261: JasmineでJavaScriptのテスト (view original Railscast) Other translations: Other formats: Written by Naomi Fujimoto Railsデベロッパーの多くはアプリケーションのRubyコードをテストすることの重要性を理解しています。しかし多くの場合JavaScriptについてはブラウザでアプリケーションを実行してエラーを確認するだけの手動テストで済まされてしまいます。ウェブアプリケーションがますます複雑化しクライアント側に多くの機能を持つようになる中で、JavaScriptコードを自動的にテストする方法を持つことが望まれます。今回のエピソードでは、そのための一つの方法を見ていきます。 対象のアプリケーションを以下に示します。標準的な注文フォームで、クレジットカード番号を入力するテキスト
kintoneのJSユニットテスト最新事情 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。kintone開発チームの天野 (@ama_ch) です。 最近はJavaScriptのテストツールが著しく進歩し、日々新しいツールが登場しています。kintoneの開発もこれらのツールによって支えられています。 kintone開発チームでは、昨年末頃からテスト環境の改善に取り組み、モダンなツールセットに乗り換えました。今回は、現在のkintoneのJSユニットテスト環境について紹介します。 kintoneとJSユニットテスト 数年前からユニットテストと自動化の仕組みはあったのですが、ごく一部のユーティリティ関数に書かれているのみで、普段の開発には活用されていませんでした。 ここ1,2年ほどで テストスケルトンを生成するジェネレータスクリプトを作る テストの書き方をまとめたドキュメントを用意する MTGで「ユニットテストを書かなくていいのは小学生まで」などと煽る コードレビュー
Javascrript for OSX Automation アドベントカレンダー - それマグで！
JavaScript for OSX Automation が出来るようになりました。 WindowにCOMがあってJScrptからアクセスできたようにOSXも遂にJavaScriptでアクセスできるようになりました。 AppleScriptで出来たことは殆ど、JavaScriptで出来るようになってテンションが上ります。 ちょうど、一年前の今頃、AppleScriptのアドベントカレンダーを書こうとして挫折したので、今回はJavaScriptでアドベントカレンダーを書こうと思います。 メニュー：アドベントカレンダー一覧 12 /1：Hello World (JavaScript for Application ) 12 /2：メッセージ.app でメッセージの送信 12 /3：Safariの自動操縦 12 /4：Safariのページロードを待つ 12 /5：SafariのDOMにアクセス
reduce関数は結構有用っていうお話 - あと味
JavaScriptに限った話ではないのですが、reduce関数を持つプログラミング言語がいくつかあります。 JavaScriptに関しては、一応、ECMAScript5の仕様に登場するようで、将来的にはどのブラウザでも使えるようになりそうな気配はあります。 Standard ECMA-262 また、MDCではreduceのアルゴリズムが掲載されているので、これを利用すれば現時点でもどのブラウザでもreduce関数を利用することができます。 reduce関数とは？ MDCに掲載されている文章を引用します。 配列の（左から右へ） 2 つの値に対して同時に関数を適用し、単一の値にします。 JavaScriptのreduceは、配列のメソッドです。左ら右へとありますが、右から左へ関数を適用するreduceRightという関数もあります。*1 どういう時に使えるか 元となる配列があって、それを累積
scrollイベントが呼ばれすぎることへの対処 - 素人がプログラミングを勉強していたブログ
onscrollを監視していると大量にeventが来てパフォーマンスが劣化するというのはよく聞く話で、 underscore.jsなどでイベントをthrottleやdebounceさせて対処していることが多い。 ただ、scrollに応じてスタイルを変更させたりする場合は、0.1秒くらい遅れがあると視覚的にカクカクしがちで、仕方なくsetTimeout(fn, 0)でthrottleさせることも多いと思う。 scrollイベントは画面のフラッシュレートと同期していないので、マウスやトラックパッドの動きに応じて大量に呼ばれていて、setTimeoutも画面のフレッシュレートとは関係なく内部の実行タイマーに応じて動いている。よって、setTimeout(fn, 0)でthrottleしてもまだ無駄が多い。実験してみたところ、requestAnimationFrameを使うと少しだけマシになること
array.indexOf(value) >= 0で要素が含まれてるか検索すると失敗する場合がある - 素人がプログラミングを勉強していたブログ
indexOf(val) >= 0の話 配列に要素が含まれているかのチェックに [1, 2, 3].indexOf(2) >= 0; // true のようなコードを使っている場面を極めて頻繁に（それ以外を使っているのを見ることは稀なくらい）見るが、 function contains(a, v) { return a.indexOf(v) >= 0; } は厳密にはJavaScriptでは正しく動くとは限らない。上記コードのどこが間違っているのか、下記の解説を見る前に考えてみてほしい。こんなシンプルなコードにも、バグがある。 解説 containsがどのように動くべきなど明白だというのは間違いである。実は微妙な問題がたくさんある。 まず、致命的な部分をあげると、最初のナイーブな実装だと contains([NaN], NaN) // false となってしまう。明らかに意図した動作と異な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactとFluxのこと // Speaker Deck
