Shut the fuck up and write some code

グダグダ言わずにコードを書きたいブログ

Javascript

フロントエンドに秩序を取り戻そうしている話

今月から新たな案件を引き受け始めたのですが、これが中々の地雷案件だったので、作業内容を今後のメモ的に残して置こうと思います。 問題 内容としてはページ内に埋め込んで使う汎用的なブログパーツ的なコンテンツの改修/開発なのですが、現状のソースを見…

AngularJSを触ってみた感想

「嫌い」やら「死ね」やら「好き」やら、昼ドラばりの愛憎劇で話題沸騰中のMVCフレームワーク、AngularJSを勉強がてら触ってみたのでその感想を書きます。 勉強作ってみたのはyoutube検索して検索結果からプレイリストに追加削除出来るようにしたもの。よく…

フロントエンドエンジニアにならざるを得ない

近況です。あまりに更新してなかったのでこれからはマメにブログ書きたい・・・と書くとまた書かなくなるか。一昨年フリーになって割りと良いペースで仕事をやってきたのですが、去年暮れから良い塩梅に燃え上がってる案件に投入されることが多く、老体に鞭…

【CreateJS】gotoAndPlayメソッドがundefined

今月何も書いてないことに気がついたので今月一番げんなりした事象について書きます。内容は昔にも書いた気がするけど気にしない。 最近は久々にCreateJSを使った実装をやっていて、Flash CCもHTML5書き出しが標準になり、時代を感じる訳ですが、あるmcに対…

「ECMA-262 Edition 5.1を読む」を買いました

ECMA-262 Edition 5.1を読むposted with amazlet at 13.10.02秀和システム 売り上げランキング: 6,730Amazon.co.jpで詳細を見る 予約していたのが先週届いていたのだけど、手に取る時間がなく、昨日やっと開封してさらっと斜め読みしただけですが、レイアウ…

Gruntで自動ブラウザ更新

久々にJS案件をやっていて、開発環境にGruntを使ってみようと思い設定してみたのでメモ。自動ブラウザ更新をやる方法は少し前まではgrunt-contrib-livereloadでやるのが主流だったみたいなのですが、grunt-contrib-watchというファイル更新されたか監視する…

Node.js+phantomJSで使うモジュール

webエンジニアになりたい衝動のせいでNode.jsを使い始めた。少し前からHeroku+Node.jsで3ページ程度の超簡単なサイトを勉強がてら作ってはいたけども、本格的な処理は書いてないので、これからDB周りやら勉強兼ねて掘り下げて行こうと思ってます。やりたいこ…

Galaxy S4のWebViewでのCanvasの挙動がおかしい

技術メモです。Androidアプリ内のWebViewでCanvas内の表示がおかしくなるという不具合が報告されたので調査してみると、createJSに限らず、Canvas周り全滅。早速調べると同じ症状が報告されています。 Galaxy S4のWebviewで、非同期処理の中でのCanvasの描画…

スマートフォンにおけるアニメーション実装 <2013年版>

スマートフォンにおけるアニメーション実装 ~FlashからHTML5へシフトするには~ 昨年、某セミナーにて発表させて頂いたときのスライド、未だに見られているようで有り難いのですが、それからかなり環境が激変して、ここで書かれている内容は、今となっては…

CoffeeScriptの三項演算子

CoffeeScriptの記述で勘違いしやすいのでメモっておきます。三項演算子で記述するとき hogehog = a ? b : cと三項演算子で代入したいときはif~else文で書くと出来ます。 hogehoge = if a then b else c 二項の場合はそのままで! hoge1 = a ? b hoge2 = a ||…

CoffeeScriptのFor文

すんごい初歩の話。基本形は for i in [0..9] console.log "index="+i[]内で範囲を指定します。for文で配列からデータ取り出すときは for i in [0..hogehoge.length-1] console.log "value="+hogehoge[i]とか //配列からデータ取り出す for i,value of hogeh…

論理演算の書き方

jsの高速化には論理演算が欠かせない!ということであまり使っていないので備忘のため簡単ながらメモ。 c = a && b右辺が真なら左辺が代入される。 右辺が偽なら右辺が代入される。 c = a || b右辺が真なら右辺が代入される。 右辺が偽なら左辺が代入される…

CoffeeScriptでクロージャを使って関数を生成する

ループで関数を生成するとき、クロージャをうまくやらないとカウンタが回り切った状態になってしまうのでそれを回避するようにCoffeeScriptで書いてみた。何気によく使う処理なのでメモがてらソースを残しておきます。特定のdivタグをクリックしたら、それに…

coffeescriptでモジュールパターンを書いてみた

最近はcoffeescriptを使ってjavascript書いているのですが、クラスの記述など深いところまで使い込んでないですがなかなか良い感じで書けます。何より超スッキリ書けるのが気持ちイイ。SASSと組み合わせると最高なんで、もう少し使い込んでみたい。オブジェ…

Html5 Animation With Javascript

昨年の話ですが・・・ASアニメ本で有名なfriend of ED社からHTM5版のアニメ本が出てました。 Foundation HTML5 Animation With Javascript (Foundations Apress)作者: Billy Lamberta出版社/メーカー: friendsofED発売日: 2011/11/30メディア: ペーパーバッ…

JavaScriptでの配列のコピーする

ウルトラ簡単なメモ。機能は既にありそうなんだけど、実装されてないのか。なのでビルトインを拡張してみる。 Array.prototype.clone = function(){ return Array.apply(null,this) } こういうの、恒久的に使えるように出来ないものか。

Closure

クロージャーについてよくわかってなかったのでメモ。 //closure var test1 = function() { var m = 0; return function() { var s = 0; console.log("s="+s+" "+"m="+m); s++; m++; } }; var func = test1(); func();//s=0 m=0 func();//s=0 m=1 func();//s…

Getter/Setterを実装する

javascriptでもアクセサメソッドが実装できる。書き方はIE8対応とIE9以降対応の2パターンある。 //getter oldStyle person.__defineGetter__("sayBye", function() { return "bye" }); console.log(person.sayBye); //bye //getter newstyle Object.definePr…

即時関数

よく忘れるので備忘メモ。定義した関数をすぐ実行するための構文。 (function(){ alert("test!"); }()); 用途としてはオブジェクトの作成、ハンドラの設定など、一度しか実行しないものは即時関数で実行しておくだけにすると、グローバル空間も汚れずに便利…

instagram APIを試してみた

最近になって今更ながらのInstagramを始めてみたんですが結構面白いですね。センスある画像が多いので見てるだけで楽しい。で、最近APIが公開されたのでJSで適当ながらサンプルを作ってみる。jsdo.itに載せてみたので、興味ある方はどうぞ。 tagで検索して画…

JavaScriptパターン

JavaScriptパターン ―優れたアプリケーションのための作法作者: Stoyan Stefanov,豊福剛出版社/メーカー: オライリージャパン発売日: 2011/02/16メディア: 大型本購入: 19人 クリック: 842回この商品を含むブログ (57件) を見る 読了。 1章 はじめに 2章 必…

JavaScriptパターン

JavaScriptパターン ―優れたアプリケーションのための作法作者: Stoyan Stefanov,豊福剛出版社/メーカー: オライリージャパン発売日: 2011/02/16メディア: 大型本購入: 19人 クリック: 842回この商品を含むブログ (57件) を見る 結局買ってしまった。まだ序…

JavaScript本格入門〜モダンスタイルによる基礎からAjax・jQueryまで

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで作者: 山田祥寛出版社/メーカー: 技術評論社発売日: 2010/11/27メディア: 大型本購入: 27人 クリック: 592回この商品を含むブログ (42件) を見る積読状態だったのをようやく読破。JSは変…

FlashライクにCanvasが扱えるJSライブラリ「EaselJS」

Flash界(?)で有名なgskinnerという人がJSでCanvasをASっぽい感じで扱えるライブラリをリリースしました。 http://easeljs.com/触りしかみてないですけど、レイヤー管理とか便利そう。描画管理周りは「自前でどうにかしないといけないなー」と思ってたところ…

processing.jsでJS側からPVectorクラスを使う

JS側で p=new processing(); とインスタンスを用意して実装する場合、PVectorクラスを使いたい場合どうやったら良いんだろう…とずっと分からなかったんですが、調べるとどうもJS側でPVectorクラスを用意してやらないと駄目みたい。ソースは作った人が既に居…

jsdo.itをはてなダイアリーに貼り付ける2

暇だったので勉強兼ねてもう一本貼り付け。jsdo.it貼り付けた方が実際に動かせるから良い。ソース見てても面白くない。ImageDataを使って色々試してるけど、結構面白いな。けど処理は重めだ。Chromeでないとまともに動かない。どうにかしたい。しかしjsdo.it…

jsdo.itをはてなダイアリーに貼り付ける

shareにあるタグの中からjsのsrc、http://jsdo.it/blogparts/xxxx/jsの中からiframe内のsrcをiframe → Google Gadget コンバータをお借りしてタグを生成。465*546が最適サイズ。ということでグレイスケール変換とエッジ検出のテストサンプルを貼り付けておく…

ビットシフトによる色の進数変換

画像処理なんぞやり始めたので備忘。ASも同じ感じで。 /* * 色の変換 */ //16進数→10進数 var color=0xFF0000; var r=(color& 0xFF0000) >> 16; var g=(color& 0xFF00) >> 8 ; var b=color & 0xFF; console.log(r); //255 console.log(g); //0 console.log(b…

Chrome/FireFox/Safariでproseccing.jsの処理速度を比較してみた

processing.jsの勉強がてら、円形を描画しながら移動させたときのFPSを計測してみた。個人環境での測定なのであんまり当てにしないでください。processing.jsは1.0を使っています。 firefox 3.6.12 chrome 7.0 safari 5.0.3 10個描画/30fps設定 32.081 30.06…

クラスの継承

JSでのクラスの書き方はわかったのだけど継承のさせ方がよく分からない・・・。prototypeで継承させられるのは分かったのだけど、コンストラクタとかどうやって引き継げば良いのだ・・・super()なんてないし。 /* super class */ function animal(){ this.construc…