We Will All Be Game Programmers
面白いのでぜひ見てください。
状態と副作用について、ゲームからReactまで、なぜそれらが重要か、それらを安全に取り扱うにはどうするべきか、丁寧に説明しています。
gulp で livereload できる開発用サーバを立てる
gulp で開発用サーバを立てるには、gulp-connect とか、gulp-webserver とががあるんだけど、
ブラックリスト入りしていて、
gulp 的には
「入出力を伴わない処理をプラグインにすんじゃねーよバーカ」
ってことなんだと思う。
なんだか過激だなあと感じつつも、できるだけ依存の少ない gulpfile を書けという方針には、概ね賛成なので、
その辺のプラグインを使わずに、開発用サーバを立ててみる。
静的ファイルを配信するサーバを立てる
まずは、普通にサーバを立てる。
connect 使えって言われてるので、素直にその言に従います。
connect = require "connect" gulp.task "serve", -> connect() .listen 9000
やったーー!!
立ちました、ウェッブサーバが。やった。
しかし、何のファイルも配信していないので、middleware で静的ファイルを配信します。
connect = require "connect" serveStatic = require "serve-static" gulp.task "serve", -> connect() .use serveStatic DOCUMENT_ROOT .listen 9000
やったーー!!
立ちました、静的ファイルを配信するウェッブサーバが。
なんだ簡単じゃないか。
確かにこんなことのためにプラグインなど必要ない。
livereload サーバを立てる
livereload をするためには、リロードの通知を送るための websocket サーバを立ててやる必要がある。
livereload 用のサーバとしては、tiny-lr が有名なので、
このモジュールを使ってレッツトライ!したいところだが、ほんのちょっとだけ手間(本当にほんのちょっとだけ)なので、
代わりに gulp プラグインの gulp-livereload を使う。
gulp-livereload で livereload サーバを立てるのは、こんな感じ。
connect = require "connect" serveStatic = require "serve-static" livereload = require "gulp-livereload" gulp.task "serve", -> livereload.listen() connect() .use serveStatic DOCUMENT_ROOT .listen 9000
そして、ブラァウザーをリィロードしたいタァーイミングで livereload.reload() を pipe すればOK!
gulp.task "some-task", -> gulp .src SRC .pipe someProcess() .pipe livereload.reload()
このとき、リロードの指示が、pipe されてるファイルにだけ飛ぶので、
CSSとかは、ページ自体の更新をせずに、スタイルだけが逐次更新される。うれしい!
これで livereload サーバはOK!
ただし、ブラウザ側は、livereload 用のブラウザ拡張が必要。
ブラウザ拡張なしで更新できるようにする
当たり前だが、livereload を実現するには、どこかで websocket サーバに繋げるための js を実行する必要がある。
livereload 用のブラウザ拡張は、そのための JS のスニペットを自動で、全てのページに埋め込んでくれるもの。
とはいえ、そんなことのためにブラウザ拡張入れるのいやだし、スマホとかでもリロードしてほしい。
ので、connect の middleware で livereload のスニペットを埋め込む。
connect-livereload という middleware を使う。
connect = require "connect" serveStatic = require "serve-static" livereload = require "gulp-livereload" connectLivereload = require "connect-livereload" gulp.task "serve", -> livereload.listen() connect() .use connectLivereload() .use serveStatic DOCUMENT_ROOT .listen 9000
かくて html には livereload 用のスニペットが埋め込まれ、websocket の使えるブラウザは、誰でも自由に livereload ができる社会が生まれた。
最近よんだ漫画
あれよ星屑
超おもしろい
あっち系の人が描く漫画は面白いという法則
クジラの子らは砂上に歌う
超好き
登場人物全員かわいい系殺戮SF、続きが気になる
魔法使いの嫁
超かわいい
人生達観系ヒロインすき
ちーちゃんはちょっと足りない
超胸糞わるい
ほんと救いないし、タブーに踏み込んでく姿勢すき
GLSLで指定位置をクロップした正規化座標
vec2 p = ( ( ( vec2(0., 画面高さ解像度) - gl_FragCoord.xy ) * vec2(-1. ,1.) - クロップオフセット ) * 2.0 - クロップ解像度 ) * vec2(1., -1.) / min(クロップ解像度.x, クロップ解像度.y);
ES6は
ES6は、ES6改め、ES2015になるみたいです