Instagramのような画像加工について調べました。 : コーヒーと本と甘いもの
コーヒーと本と甘いもの Rails, AngularJS, iOS, デザイン, CI, スタートアップ, 登山, バスケなどに興味があります。 今回は、iOSやAndroidのようなネイティブアプリではなく、JSでinstagramのような画像処理を行う方法を２つご紹介しまます。 Filtrr2.jsを使う方法 filtrr2.jsはJSによる画像加工ライブラリです。html5のcanvas要素に描画することで実現しています。使い方はとても簡単です。 ソースコードを以下からダウンロードします。 https://github.com/alexmic/filtrr/zipball/master 依存コードも含めて、filtrr2.jsをアプリケーション内に配置します。 以下のようにFiltrr2クラスにイメージ要素のIDと描画オプションを指定します。 var topImage = Filtr
Private Presentation
Private content!This content has been marked as private by the uploader.
HTML5ゲームエンジン「Phaser」が初心者とモバイルにやさしくていい感じです - syonx
Phaser - Desktop and Mobile HTML5 game framework モバイル/デスクトップ向けのHTML5製の2Dゲームフレームワーク。 Pixi.jsベースでCanvasやWebGLのレンダリングもサポート。 Tags: flash-like 2d sounds collisions physics typescript webgl free cdnjs: //cdnjs.cloudflare.com/ajax/libs/phaser/2.0.5/phaser.min.js Examples - PixiJS ベースとなっている Pixi.js のサンプル。レンダリング結果の雰囲気がつかめる。 HTML5 Game Engines - Find Which is Right For You HTML5ベースのゲームエンジン一覧。比較がしやすい。 Phaser
JavaScriptのthisの覚え方 - Qiita
JavaScriptのthisは同じソースコードでも呼び出し元次第で意味が違ったりして複雑だと思われがちだけど、一回覚えてしまえば簡単だ。 JavaScriptにはthisが4種類ある これだけをしっかり覚えておけば、後は必要な時に 4種類って何があるんだっけ？ と考えれば容易に思い出せる。 ちなみに、下記のコードはブラウザ上で実行することを想定している。(なのでwindowを使う) トップレベルのthis グローバルオブジェクトを指す。 var hoge = "fuga"; window.foo = "bar"; // fuga+bar と表示される console.log(this.hoge + "+" + this.foo); (function(){ // 同じくfuga+bar と表示される console.log(this.hoge + "+" + this.foo); })(
Farewell Node.js (翻訳) - from scratch
「visionmedia、Node.js辞めるってよ」って事で、今回はこの話の翻訳ですね。 Farewell Node.js — Code adventures — Medium 最近のnode.jsはホントTJ Fontaine のリーダー就任から始まってNode.jsでできたエディタであるAtomがreleaseされたり、gemのモジュール数をnpmのモジュール数が抜いたり、socket.io v1.0が出たりと色々あるんですが、今回の話は飛び抜けて衝撃的だったなぁと思ってます。 一応知らない方のためにvisionmediaについて説明しておくと、以下のモジュールは全てvisionmedia製です。 express (Web Applicaiton Framework) mocha (Testing Framework) jade (hamlライクなtemplate engine) s
翻訳：僕が Node に残る理由 - ほんやくとコード
原文：Why I’m staying in with Node なによりもまず、T.J. に敬意を表したい。これからは Go を推していくという大ニュースと、Node.js への別れの挨拶 とに感謝したい。ある問題に長く取り組んできた人は、時期が来たら別の場所へ進んでいく。そして彼の場合は、それが「仕事にふさわしいツールを使う」ことだった。 いいね。尊敬せずにはいられない。あいつはできる奴で、ヤバい。 僕はというと、まだ Node.js との付き合いを続けている。まだざっくりとした未来しか思い描けていないけれど、僕はずっと昔から JavaScript に賭けてきたし、ああ、なんというか、英語みたいなものかな。JavaScript はあらゆる所にある。 もちろんこれは喩えにすぎないのだけれど、T.J. が指摘した Node.js の問題点は、僕たちが英語に対して抱く問題に良く似ていると思う。
昔ながらの「片手間に書くJavaScript」の限界 - mizchi's blog
Javascriptを使うのをやめろ：Railsの時代遅れ云々についての結論 - Qiita この記事は、全体的に自分の業務以外の評価基準やトレンドを知らないんだなという感じで、わざわざ付き合うと精神的に消耗する感じがした。ただ、それが彼らの本職でない以上、自分もこの結論に至るのは仕方ないと感じている部分はある。 真の問題は、自分がレガシーなJavaScriptを書いているという自覚がない人間が、ここ数年の技術トレンドから乖離したコードを書き続けることで他のエンジニアやエコシステムそのものに悪影響を及ぼしているケースが散見されている。一行書く毎にグローバル汚染するスクリプトを見せられてもメンテ出来んと言われても、はいそうですねとしか言えないし、そういう人に最近のライブラリを触らせると遅くなるというのは、画面全体を一つのMustacheテンプレートにしてBackbone.Modelのパラメー
Shibu's Diary: 未来のないJavaScriptと非同期とErlang
渋日記@shibu.jp 渋川よしきの日記です。ソフトウェア開発とか、ライフハックを中心に記事を書いていきます。 JavaScriptはもう好き嫌いを超えて、最低限の読み書きはもはや教養レベルといっても言い過ぎではないと思います。ブラウザ限定だったら他の言語もありますが、ブラウザで標準で使える言語はJavaScript以外には選択肢はありません。3DCG系のツールのマクロ言語は未だにPythonがトップシェアだと思いますが、Flash, Photoshop, Illustratorの仕事を効率化するマクロ言語はJavaScriptですよね。先日AppleのOS Xの次期バージョンの自動化ツールが独自言語に加えてJavaScriptをサポートすることを発表しました。サーバサイドで使われるnode.jsは、コンパイル言語を除けばトップクラスの性能です。QtもQMLとしてJavaScriptを中
Vue.js が data に渡した値を激しく書き換える件について
最近、JavaScript の MV* フレームワークの中で Vue.js が少しずつ注目を浴びてきているようであります。 5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 | 株式会社インフィニットループ技術ブログ Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita 軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog そんなわけで、自分も Vue.js (v0.10.5) を触ってみたのですが、data で渡した値を激しく書き換えるところに面食らったので記事にしておきます。 自作クラスのオブジェクトを Vue.js に渡すと壊される 何らかのビジネスロジックを持ったモデルを作って、それを Vue.js のデータバインディングで HTML に反映しようすると破綻します。 簡単な例として、よくあ
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 先日の「OpenIL vol.2」にて「5分でわかるVue.js」というLTを発表しました。 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 前編 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 後編 この記事は、その時のLTの資料を元にブログ化したものです。 jQueryは頑張れば頑張るほど辛くなる jQuery、簡単に動きのあるサイトを作れてとても便利ですよね。 // 何か画面に反映する $(".hoge").html("変更したい内容"); // 変更時に何か処理して変更する $(".foo").on("change", function() { $(".bar").html("変更したい内容"); }); イベントを受け取って、色々と処理をし
JavaScriptで最近試そうとしてるライブラリ - mizchi's blog
を晒すことで俺以外が試してくれるかもしれない！というのは置いといて、現在の知見です。 MV* React | A JavaScript library for building user interfaces Facebook製データバインディング。jsxという謎拡張子に目をつむれば未来を感じる設計。とにかく生DOM触りたくないという気概を感じる。 Welcome - Polymer Google製WebComponent。WebComponent使うならこれが有望株っぽい。 component/component MV* とはちょっと違うけどCSS/JavaScript/HTML まとめてライブラリにできる。JavaScript以外もライブラリに含む際は有望。 何がしたいかはt_wadaさんがまとめてくれたtogetterみてください。Web フロントエンド開発用パッケージマネージャ c
ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料
HTML5飯 http://atnd.org/events/52477 発表資料 ぱんちら.js -JavaScriptでテクスチャマッピング-
Source Mapを扱う関連ライブラリのまとめ
この記事はSource Mapに対応した何かを作るためのライブラリとか仕様とかについて調べてメモった記事です。 利用する場合の話はSource Maps 101 – Tuts+ Code Tutorial等 検索すれば色々出てくると思います。 Source Mapとは Source Map Revision 3 Proposal – Google ドキュメント 仕様 #JSオジサンで Source Map について話してきました : document source mapの概要 JavaScriptのSource Mapの内部表現について Base64のmappings部分の仕組み source-map-visualization ビジュアライズツール mozilla/source-map source map のコア と言えるモジュール(色々なモジュールが使う) source map の
TypeScriptセッションの全スライド＆動画
6/14に開催された第2回 Build Insider OFFLINEの3つのセッション「TypeScript 1.0 オーバービュー」「TypeScriptを実践的に使うために」「TypeScriptで効率化するHTML5のインタラクティブコンテンツの開発」のスライド＆動画です。また、当日の連携イベントだった「TypeScript勉強会 - VSハッカソン倶楽部」の各スライドも掲載しています。 「第2回 Build Insider OFFLINE： TypeScriptスペシャル（東京で開催）」の各セッションのスライドと動画を掲載しています（関連：Togetterまとめ）。また、当日の連携イベントだった「TypeScript勉強会 - VSハッカソン倶楽部（大阪で開催）」の各スライドも掲載しています。 第2回 Build Insider OFFLINE： TypeScriptスペシャル
GitHub - turbulenz/turbulenz_engine: Turbulenz is a modular 3D and 2D game framework for making HTML5 powered games for browsers, desktops and mobile devices.
Graphics Simple shader-based immediate mode API: A Shader may contain multiple Techniques, either single or multi-pass. Once a shader Technique is set on the Device, the parameters required by the program code can be updated by a TechniqueParameter object: TechniqueParameter objects hold multiple references to Textures, TechniqueParameterBuffers or individual values. Multiple TechniqueParameters c
Webpack
Module Bundler Think Browserify with more Webpack vs Browserify Works with almost any module system AMD, CJS, UMD, Component, Latest Hipster Module System (LHMS) Can require in CSS, Images, Fonts etc. Uses CJS syntax to load modules var angular = require('angular'); angular.controller('foo', function() { }); Loaders Like browserify transforms Think CSS preprocessors ES6 Module Transpilers Convert
[ruby][rails] rails と bower を組み合わせて assets を良い感じに使う術 - HsbtDiary(2014-06-17)
■ [ruby][rails] rails と bower を組み合わせて assets を良い感じに使う術 npm と bower と grunt を使って javascripts のテストに必要なライブラリをインストールするようにした by hsbt · Pull Request #414 · tdiary/tdiary-core で導入した npm, grunt, bower の組み合わせで javascript/css をかなり良い感じに organize するという仕組みを production の rails に投入した。 準備としてはまず nodejs を使えるようにするところから開始。これは cli さえ満足に動けばいいので xbuild を使ってビルドしたものを /opt/node-x.y.z とか /usr/local/node-x.y.z に置いて /usr/loca
![[ruby][rails] rails と bower を組み合わせて assets を良い感じに使う術 - HsbtDiary(2014-06-17)](https://cdn-ak-scissors.b.st-hatena.com/image/square/8cab6183abe73ade0ce0a24c302ac36ee5c17b43/height=288;version=1;width=512/https%3A%2F%2Fwww.hsbt.org%2Fdiary%2Ftheme%2Fogimage.png)
Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita
Vue.jsはそのまま使ってもよいですが「自分(プロジェクト)に合ったフレームワーク」を見つけるのにも向いています。 これは、後発フレームワークだけあり各フレームワークの特徴を意識した設計がなされているためです。他の著名なフレームワークとの特徴を比較した文書もあるので、こちらをチェックしながら導入を検討するとよいと思います。 そのため、以下はVue.jsの紹介と他フレームワーク(Knockout.js と Angular)へのステップという2セクションに分けて紹介していきたいと思います。 JavaScriptフレームワークの導入を行いたいがこの選択は慎重にいきたい、という状況であれば最初にVue.jsを試金石としてみて、効果的と感じられる機能からAngularやKnockout.jsに流れていくというのは十分ありだと思います。 2016/06: Vue.jsの1.x系に合わせて記述・サンプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JavaScript] Objectを辞書代わりに使ってはまるパターン - Qiita![[JavaScript] Objectを辞書代わりに使ってはまるパターン - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1b45a9daf213a670e9fb7f6deaf097356ba82d37/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTYxMjglMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODE3Nzg_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9MjAwMGE5MTAzMzIyMDk0M2M3ZjQ3NjQ3OTEyM2VmNjM%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D675f62b48b0f92263d3cf310a1ce071a%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyME9iamVjdCVFMyU4MiU5MiVFOCVCRSU5RSVFNiU5QiVCOCVFNCVCQiVBMyVFMyU4MiU4RiVFMyU4MiU4QSVFMyU4MSVBQiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MSVBRiVFMyU4MSVCRSVFMyU4MiU4QiVFMyU4MyU5MSVFMyU4MiVCRiVFMyU4MyVCQyVFMyU4MyVCMyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTNmOGViNmM1MDUzMjE1NTMzNDUxMjY2OWFmODFkZDBk%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBMaWdodFNwZWVkQyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWFjN2FmMTI0YjNkN2I4NWFjZjAxZjNmODNkMDJiZTE1%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Da8c606cc54b1a1d46a37718f320bdf90)
Front-end Build Tools - JTF2014 Tokyo
