2014年の年末に確認することー

2014年やりたいこと。

– コンペに3つ提出する。
– jsでのビジュアル集を作る。
– 電子工作でハロウィーン作成。
– iPhone gameを作成。
– node.jsでmy cmsを作成
– 関数型プログラムに挑戦。
– selferの実用化。

来年の年末に確認しよう！

2014/01/05

clojureでgraphic programming

Clojureとは

Clojureは2008年にできたJava Virtual Machine上で動く言語です。

関数プログラムでLispと構文を継承しつつあり、関数プログラムは教養として1つぐらい学んでいたほうがいいので、ちょこちょこ触ることにしました。

関数プログラムを学びにあたり、Lispあたりか入ろうと思ったのですが、Herokuに対応しているし、Creative Applicationで紹介されたということでClojureを勉強することにしました。

関数プログラムはすごい、柔軟だという話をちょこちょこ聞き、なにがすごいのかわからず、Clojureの勉強を通して、探っていければと思っています。

ClojureをMac上で動かすまで、、

Creative ApplicationのTutorialがとても役に立ちました。

http://www.creativeapplications.net/tutorials/introduction-to-clojure-part-1/

LeiningenというPacage Managementをインストールするだけで動くようになります。

Leiningen: http://leiningen.org/

Install後、Terminal上でlein replと入力すれば、動きます。

Quilって！？

QuilというPackageでProcessingのように簡単にビジュアルコーディングがClojureできるそうです。

https://github.com/quil/quil

QuilのディレクトリからLein installでQuil Paackgeでインストール。

Sampleを動かすまで、、、

clojure appを生成します。

	lein new app my-cpp

appを管理するproject.cljというファイルのdependenciesに[quil “1.7.0”]を追加する。

実行ファイルは/src/my_stuff/core.cljというファイルになります。

Quilのページにあるサンプルを動かしてます。

(ns my-stuff.core
  (:require [quil.core :refer :all]))

(defn setup []
  (smooth)                          ;; Turn on anti-aliasing
  (frame-rate 1)                    ;; Set framerate to 1 FPS
  (background 200))                 ;; Set the background colour to
                                    ;; a nice shade of grey.
(defn draw []
  (stroke (random 255))             ;; Set the stroke colour to a random grey
  (stroke-weight (random 10))       ;; Set the stroke thickness randomly
  (fill (random 255))               ;; Set the fill colour to a random grey

  (let [diam (random 100)           ;; Set the diameter to a value between 0 and 100
        x    (random (width))       ;; Set the x coord randomly within the sketch
        y    (random (height))]     ;; Set the y coord randomly within the sketch
    (ellipse x y diam diam)))       ;; Draw a circle at x y with the correct diameter

(defsketch example                  ;; Define a new sketch named example
  :title "Oh so many grey circles"  ;; Set the title of the sketch
  :setup setup                      ;; Specify the setup fn
  :draw draw                        ;; Specify the draw fn
  :size [323 200])

core.cljの以上のようなコードを書いて、保存します。

保存後、appのトップディレクトリでlein runと書き、実行する。ウィンドゥが現れます。Sampleは動きます。

今後に向けて

clojureの文法に慣れるために、Quilで遊んでみつつ、OpenGLが動かすぐらいになりたいと思います。

制作日誌

個人制作日誌（2014年4月まで）

1月はコンペの準備やiosを勉強したりしてました。

2月から4月にかけてはnode.jsのexpress.jsというフレームワークを使用しcmsとポートフォリオ作成していました。

http://kenji-special.info/

node.jsからの勉強だったので、結構時間がかかりましたが、昨日無事完成しました。

全部自分で作るというのは仕事しているとなかなかないです。

ひと通り自分が納得したものを作れないと、仕事などでいろいろなスペシャリストと尊敬しながらコラボレーションできないと思うからです。

そういう思いがあるからこそ、個人制作は全部自分でやるようにしています。

今回の収穫としては、Model と　Viewの関係を突き詰めて作れたところ（この部分だけで1週間ぐらいかかりました。）

最近は単一ページにして、modelの変化をViewを変えるのが主流になっていて、デザインの段階からその部分を考えることができて制作できたの収穫でした。

試作とデザインワークと開発で柔軟に変えるところとかっちりと決めるべきところをどうするかなどは自分なりに試行錯誤できました。

反省点として、cmsから先に作るより、先にポートフォリオを作成して、最初は仮のjson、そして、cmsにするというプロセスでやればよかったのかなと思います。

後は自分を見てくれ感が強く、もっと削ぎ落としたほうが出来上がり感が良かったんじゃないかと思います。

もっとデザインや動きの引き出しをもっといたほうがいいかなと思います。

思えば、Webとかの勉強初めて4年になりますが、ポートフォリオはこれが5つ目です。

1年に最低1回は更新しています、、

ゼロから全部自分で作るというのはなかなかしんどい作業です。

あの時はあーだったったとか、あの時のコードは本当にひどいな、初めて作ったのは載せるのなかったなとか、結構鮮明に覚えているものです。

技術的にかなり向上していますが、チャレンジすることやそれに伴い勉強することなど多く、毎回仕上げるまでの作業時間が増えています。

後3ヶ月ぐらいしたら自分のポートフォリオが気持ち悪くなり、すごいと思えるWebを見ると、次のやつを作ろうとなります。

2月から4月にかけては3ヶ月かけて1つまとまったものを作ったのですが、自分の基礎体力が全然足りてないと思います。

引き出しを多くもちたいという思いはポートフォリオ制作中も強くなりました。

5月から9月にかけての個人制作はあえて基礎体力をひたすら伸ばすところに焦点を当てたいと思います。

その名も、、

「100日ブートキャンプ」

ひたすらfrontendのコーディング基礎体力を上げていき、引き出しを増やしたいと思います。

具体的には1日CodePenに1つ、Shadertoyに１つの2個を最低作る。

1つあたり1時間以内に作るという条件で、、

CodePenに上げるものは1週間とか10日テーマを持って作ること、ShadertoyはとりあえずShaderに慣れることに力点をおきたいと思います。

CodePenで作るものの最初の2週間は”The 12 basic principles of animation”(http://the12principles.tumblr.com/)というDisneyアニメの教科書てきなものを真似しながら、動くものとは何かとかを考えていきたいと思います。

ブートキャンプ以外には自分の部屋の気温を決まった時間に計測する装置とそのシステムを作りたいなーと思います。

具体的には温度を測って、温度をデータベースに記録して、記録したデータを元にUIを作成するというものです。

今までやってこなかったハードウェアの勉強・制作をしつつ、

UIのバリエーションについて考える制作をできたらなと思います。。

そんな感じで、仕事以外でもずっとプログラムとかばかりしてる毎日です。

Dependecy Injector in Javascript.

See the Pen Dependency Injection for canvas by Kenji Saito (@kenjiSpecial) on CodePen.

“Dependency injection is about removing the hard coded dependencies and providing way of changing dependencies in compile-time or run-time. “とあります(Dependency Injection in JavaScript)。

わかるようで、わからないようで。。

require.jsやangular.jsで使われてて、デザインパターンの勉強として知っておかないといけないと思いメモとして残します。
本格的に勉強したい人はDependency Injection in JavaScriptを参照に。

Injector作成

var Injector = {
        dependencies: {},
        add : function(qualifier, obj){
            this.dependencies[qualifier] = obj;
        },
        get : function(func){
            var obj = new func;
            var dependencies = this.resolveDependencies(func);
            func.apply(obj, dependencies);
            return obj;
        },
        resolveDependencies : function(func) {
            var args = this.getArguments(func);
            var dependencies = [];
            for ( var i = 0; i < args.length; i++) {
                dependencies.push(this.dependencies[args[i]]);
            }
            return dependencies;
        },
        getArguments : function(func) {
            //This regex is from require.js
            var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m;
            var args = func.toString().match(FN_ARGS)[1].split(',');
            return args;
        }
    };

Injectorがとても重要な役割をします。下のような感じになるそうです。

動かしてみる。

    var canvas = document.getElementById('c');
    var ctx    = canvas.getContext('2d');

    var rect = {
        draw : function(ctx) {
        }
    }

    var redRect = function(){
    };

    redRect.prototype = Object.create(rect);

    redRect.prototype.draw = function(ctx){
        ctx.fillStyle = '#ff0000';
        ctx.fillRect( 10, 10, 10, 10);
    };

    var rectController = function(rect){
        this.rect = rect;
    };

    rectController.prototype.draw = function(){
        this.rect.draw(ctx);
        console.log('rectController draw');
    };

    Injector.add('rect', new redRect());
    var controler = Injector.get(rectController);
    controler.draw();

addとgetがとりえず重要だね。

自分の中でわかったようなわかってないようなまた数日後に復習して、加筆します。

なぜNew York Timesはフィギュアスケートの分析的な記事を書けたのか。

羽生選手が金メダルをとった時にこの記事がわかりやすいとうツイートやFBの書き込みをよくみました。

今回のソチオリンピックではNew York TimesはWeb用の様々な面白い記事を作成しています。

New York Timesのオリンピックのメインページでは以下の画像のようにInteractiveがNews, Result, Photosと並び主要なコンテンツとして設定されています。

Interactiveのサイトも1つ1つ興味深く、普段馴染みのないスポーツの説明やメダルの話などWebブラウザようにまとまっています。

How Close They Came to Winning

スピードスケートなでのタイムを競う競技で金メダリストとどれだけ離れていたかをしることができます。

Slopestyle

Screen Shot 2014-02-19 at 11.21.35 PM

などなど、とても興味深い記事が多いです。

なぜNew York Timesはできるのか。

（以下はプログラムを書くことを仕事にしているボクなりの見解です。）

New York TimesはWebテクノロジー・デザインだけでもやばい会社です。
New York Timesで働いているプログラマーやデザイナーがWebのデザインだけでなく、ニュース記者やカメラマンと一緒に記事の作成をしてきているからだと思います。

New York Timesはニュース会社として有名ですが、この5年ぐらいはWeb系のテクノロジーやデザインにとても力を入れています。

これはNew York Timesのgithubのアカウントです。

https://github.com/NYTimes

Github上でNew York TimesがWebに関わるデータベース、バックエンド、フロントエンドに関わるプラグイン、ライブラリ、プロジェクトを公開しています。

New York Timesのアカウントのメンバー見る限り大きなWebテクノロジーやデザインの大きな会議のメインイベントにgoogleやyahoo.comなどのプログラマーと一緒にスピーカとして登壇する人たちばかりです。

特にBackbone.jsというJavascript用のMVCライブラリやCoffeeScriptというJavascriptにコンパイルする言語をメインで作成しているJeremyやデータビジュアル用のライブラリとしてD3.jsをメインで作成しているMikeがいます。。
彼らはスーパーサイヤ人級のプログラマーです。

どうやったらこんなに豪華なメンバーが揃うのか、、いつか彼らと肩を並べられるようになりたいです。

New York TimesにNYT DevelopersというNew York Timesに関わるテクノジーに関わるサイトが存在します。

http://developers.nytimes.com/
APIがかなり存在します。

New York Timesのエンジニア用の公式ブログがあり、とても勉強になります。

ソチ以外でもアメリカ大統領選挙戦やファッションウィークの特集など様々なWebを上手く使った記事はとても多いです。
D3.jsを作成しているMikeのポートフォリオサイトに彼がNew York Times手がけたサイトを見ることができるので、興味がある方こちらをどうぞ。
http://bost.ocks.org/mike/

New York Timesが最も積極的にやっている印象ですが、他にもBloombergやHuffington Postも少しずつ増えてきています。
アメリカ以外だとイギリスのGurdianとドイツのZeitぐらいです。

Webに特化した記事はインタラクティブなデータビジュアルやWebを扱うので今の仕事と関係してますし、とても興味があります。
個人的にもコンペなどに応募しているので、今後も注目していきます。