Redirecting… Click here if you are not redirected.

楽すぎてどうしよう。が最初の感触。まだ3時間しか触ってないけど、もうこれでいいや感が半端ない、深夜2時です。 Angularなのか、Reactなのか、2015年が明けても毎週のように新しいJSフレームワークが出る中で、もう正直どうでもよくなってませんか? でも、これは触って楽しいはず。 Riotって何? Riotは、公式ページに A REACT- LIKE, 2.5KB USER INTERFACE LIBRARY とあるように、Reactを意識して作られた超軽量のUIライブラリで、ビュー部分(コンポーネント)に特化しているのが特長です。Vue.jsとかとも同類です。Riot 1.0も「超軽量」という点で、一時注目を集めました。 そのRiotが、2.0で趣向を変えてJSX的なプリコンパイルの仕組みを取り入れて、ReactとPolymerのいいとこ取りのような感じになっています。ただし、次の

Classic ReactStill using Class based React components at work? This is the course for you.

three.js r161 docs examples Learn documentation examples editor gpt Community questions discord forum twitter Code github download Resources Three.js Fundamentals Three.js Journey Learn Three.js 初めてのThree.js Merch T-Shirts submit project

左右や上下にペインを分割してドラッグでサイズを変えられるようなライブラリを探していて、いくつか見つけたので比較検討したメモです。 UI Layout Plug-in javascript - Best way to do a split pane in html - Stack Overflowで紹介されていました。高機能そうではありますが、Downloadsを見るとスクリプトのサイズが81KBとか151KBと大きいのでパスすることにしました。 jQuery Splitter Plugin methvin.com/splitter/splitter.jsのファイルサイズは9KBと小さくて良いのですが、jQuery Minimal Vertical splitterのサンプルをChromeで試してみると、ドラッグするときのカーソルが左右の矢印(col-resize)ではなく右矢印(e-res

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 アメーバ事業本部 クロスイノベーション室のグンタ（@gunta85）と申します。 今回はフロントエンド開発用の、 ありとあらゆる依存関係を簡単に解決してくれる、 WebPackというスグレモノをご紹介します。 導入経緯大きなアプリを開発するにあたり、依存関係を解決してくれるものを探していました。 その中で、RequireJSやBrowserify、Componentなども候補に挙がりましたが、 諸々の理由でWebPackを選びました。 特徴の違いについては「WebPack vs Browserify」等で検索してみると良いかと思います

YoutubeとVimeoの検索結果のRSSをまとめてOPMLで取得できるサイトを作った | Web scratch で公開した Tech Video RSS Searcher はbrowserifyを使って作ったので、その辺の開発フローについての記事です。 browserify って何? browserify はNode.jsスタイルで書かれたモジュール(CommonJS)を ブラウザで利用できるように変換するコマンドラインツール(Nodeモジュール)となっています。 又、node.jsのCore Modulesのshimが用意されていて、 npmで公開されているnode.js向けのモジュールも一緒に変換してブラウザで動かすことが出来るようになっています。(普通に require で読みこめば勝手に変換されます) 原理的に無理だったり全てのモジュールが動くわけじゃないですが、 その辺の互

CMYK、HSVにも対応！カラーコードを様々な色空間に相互変換できるColor-convertほんの昔は色を表現するのに覚えておくのはHexとRGBくらいでよかったと思うのですが、最近は様々な色空間を指定するようになってきました。HSV、HSL、CMYKなどなど。今回は、これら色空間の間で、カラーコードを相互変換できる便利なライブラリ、color-convertを紹介します。目次機能についてダウンロード使い方機能についてこのライブラリが対応している主な色空間の種類は下記の通りです。これらの色空間の間で、カラーコードを相互変換することができます。それぞれの項目の説明に、「赤」を示すコードを付け加えておきました。 主な色空間RGB光の三原色であるRed(赤)、Green(緑)、Blue(青)を用いた表現法。赤は255,0,0。HSLHue(色相)、Sturation(彩度)、Luminance

JavaScriptは移り変わりの早い言語です。 もう1年以上経っていますし、記事のメンテもちゃんとできていないので、消し線を入れることにしました。 参考程度のために記事は一応残しますが、より新しい情報を読まれることをお勧めいたします。 はじめに --- 最近では JavaScript の実行環境はブラウザに限りません。（node.js, Web Workers） また、旧来のような <script> 経由でのロードもとうに古くなっています。今は CommonJS スタイルで、require を用いたモジュールのロードを行なうことがより良いとされています。 ですから、次のようなことは改める必要があります。 - var YourModule = {}; などとして、外部から YourModule.hoge(); などと呼び出す書き方 - this === window だと思うこと 今回は、

今回から3回ほどにわたって、物理計算にもとづくアニメーションをつくってみたい。物理空間に置かれたものが、落ちたり互いにぶつかり合ったりしたときの位置や速度はライブラリで計算する。今回使うのは、さまざまな言語に移植されていて定評のあるBox2Dという2次元の物理演算エンジンだ。つぎのjsdo.itのアニメーションをお題とする。 Box2dWebを使う 「Box2D」はもともとC++で開発された2次元の物理演算エンジンだ[1]⁠。重力と物体の質量や摩擦、弾性にもとづく位置と動きの物理計算を行い、シミュレーションしてくれる。ActionScript 3.0やJava、C#、Pythonなど、さまざまな言語に移植されてきた。JavaScriptのライブラリとしても、いくつか公開されている。その中でも対応するバージョンが新しく、解説（英文）も整っているBox2dWebを使ってみたい。 まずは、インス

fladdict.netのトップをリニューアル。JavaScriptの実験場にしてみた。久しぶりにゴリゴリJS書くと、かなり楽しい。 古き良きゼロ年代のFlash実験サイトはほぼ絶滅してしまったわけだけど、それを現代のJSとHTMLでやり直してみたらどうなるか？そんな感じのスタディ。使用ライブラリはpaper.jsとprocessing.js。時間があるときにcreate.jsも導入してみたいけど、ざっと見た感じcreate.jsは冗長すぎてスケッチには向かないと思う。スマホだと重すぎてだと動かないので、時間あるときに分岐するようにしたい。 最近はインターネットも成熟化したのか、グラフィック、インタラクション、プログラミングを三位一体でする人が減ってる気がする。分業化が進んでいるのだろう。インタラクション系がわかるエンジニアは需要があるわりに、新しい人が学ぶ機会が昔にくらべれば激減している

この書籍はCreative Commons Attribution-NonCommercialの ライセンス で公開されています。 また、PDFとしてレンダリングしたバージョンは以下からダウンロードすることができます。

エキスパートが手がけたプロダクトを題材に技術的な解説を行っていくシリーズ連載、今回は wri.peです。 難しい機能の実装や、先進的なAPIの利用を通じて、執筆者が得たノウハウを余すところなく紹介していきます。 HTML5を活用したメモ帳アプリ [wri.pe] 最近、仕事で作っているミイルが忙しかったり、趣味で作っているMobiRubyがなかなか進まなかったりして、個人でWebサービス的なモノを作っていない事が自分としてちょっと気になっていました。 そこで息抜きとして、ゴールデンウイークに集中してWebサービスを一つ作ろう！と思い立ち、wri.peというWebサービスの開発に着手しました。 wri.peは自分が使いたいと思えるメモ帳を作ったので、下記の様な特徴を持っています。 Markdownフォーマットをサポート Gmailの様なアーカイブ機能 全文検索 カレンダーへのマッピング iP

Knockout.jsの概要 (3つのMVC系人気フレームワーク、Backbone.js／AngularJS／Knockout.js) - Build Insider Offline #1 Sample Code: http://mayuki.github.io/Sample/BuildInsiderOffline-1/ PDF: http://sdrv.ms/11qcEWc PowerPoint: http://sdrv.ms/15GZzfu

requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()

jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ