読者です 読者をやめる 読者になる 読者になる

見つけたことをぶん投げる所

jsをメインとした記事を投げる予定。qiitaでやれ事案

mac 上の chrome で COR をガン無視させる方法

前の記事の件でもちょっと突っかかった点ですが、開発者向けにならいい感じの解決策がありました。

問題

ローカルの静的なファイル(file:///path/to/file みたいな形式)を開いて、それが他のファイルを読もうとすると
以下のようなエラーを吐く:

XMLHttpRequest cannot load file:///path/to/load/file
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

見てのとおり、プロトコルの部分がfileになっているのが悪いらしいです。

普通はサーバを立ててそこで作業することで対処しますが、 実は chrome をオプションつきで起動するとなんとかなるらしいです。

sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome  --allow-file-access-from-files

windowschromeの対処法は調べてないです

新しくなった jThree v3 を使ってみた

注:この記事で使うjThreeはβ版でさえないです

jThree とは、jQuery 的な簡単な記法で web3D のオブジェクトを生成・操作するためのライブラリです。

今まで、というか jThree v2 までは、Three.js をラップすることで動作してましたが、

jThree v3 では独自開発によって webgl を弄っているようで、だいぶ高速化されたようです。

その jThree は、来月の初めの方でベータ版リリースという予定だそうですが、それさえ待たずに今回は試しに弄ってみました。

リンク達

reference: http://jthree.io/

jThree本体のgithub: https://github.com/jThreeJS/jThree

作ってみたサンプル(今回解説するコード): https://github.com/ahyahya/jThree-Under-Development-Sample

導入

npm 及び nodejs の環境は整っているものとします。

作業ディレクトリで、

$ git clone git@github.com:jThreeJS/jThree.git
$ cd jThree
$ npm install
$ npm run build

を実行すると、wwwroot ディレクトリに j3.js が生成されます。

jThree 開発用のデバッガで遊んでみるのもいいですが、今回は実践的な使い方を学ぶ目的のため、やめておきます。

もし j3.js をビルドするのが面倒くさいという場合は、僕が既にビルドしたものをダウンロードするのでも良いと思います。

こちらです:https://raw.githubusercontent.com/ahyahya/jThree-Under-Development-Sample/master/src/packages/j3.js

使い方

jThree での描画は、<canvas>内に行われます。

また、その canvas 内の3Dオブジェクトの構造などは、HTMLのようなノリで、

GOML(Geometry Object お察しLanguage)という独自記法によって管理されます。

よって、1つのhtmlに対して1つのgomlファイル、さらにそのgomlファイルを操作するためのjsファイルを用意します。

project-root/
 ├ src/
 │ ├ index.html
 │ ├ index.goml
 │ ├ index.js
 │ └ packages/
 │   └ j3.js
 └ app.js

今回はこのようなディレクトリ構造にしてみました。

本来は app.js は不要ですが、COR の都合上、http 上で作業しないとうまく動かないのでここでサーバを立ててます。

では実際に書いていきましょう。おもむろにindex.htmlを用意します。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="./packages/j3.js" x-goml="./index.goml"></script>
    <script type="text/javascript" src="./index.js"></script>
  </head>
  <body>
    <div id="canvas" class="canvasContainer"/>
  </body>
</html>

ターゲットにしたい element に、適当に class を振っておいてください。今回はcanvasContainerです。

jThree と index.goml の読み込みはあんな感じで。

ローカルファイルだと、x-goml="./index.goml"の読み込みの部分で COR に弾かれますん。サーバを後で立てましょう

次に、index.goml を整備しましょう

index.goml

<goml>

  <resources>
    <material type="builtin.phong" name="phongMaterial" diffuse="red" specular="yellow" brightness="30"/>
  </resources>

  <canvases>
    <canvas clearColor="#eee" frame=".canvasContainer">
      <viewport cam="CAM1" id="main" width="640" height="480" name="MAIN"/>
    </canvas>
  </canvases>

  <scenes>
    <scene name="mainScene">
      <camera id="maincam" aspect="1" far="20" fovy="1/2p" name="CAM1" near="0.1" position="(0,8,10)" rotation="x(-30d)"></camera>
      <scenelight color="#333"/>
      <dlight color="#AAA" rotation="y(40d)"/>
      <plight color="white" distance="10" intensity="2" position="6,0,0"/>
      <plight color="white" distance="10" intensity="5" position="0,10,0"/>

      <mesh id="rotate-cube" geo="cube" mat="phongMaterial" position="3,0,0" rotation="0,0,0"/>
      <mesh id="rotate-cube" geo="cube" mat="phongMaterial" position="0,0,0" rotation="0,0,0"/>
      <mesh id="rotate-cube" geo="cube" mat="phongMaterial" position="-3,0,0" rotation="0,0,0"/>
    </scene>
  </scenes>

</goml>

注意すべきは、

<canvas clearColor="#eee" frame=".canvasContainer">

のように、さっき割り振った class をこっちの frame に割り当てることです。

scene 内に、実際に置きたいオブジェクトたちを置いていきます。

タグに関しては、referenceを見てください。

また、この時点で、しっかりサーバが立てられれば動作するはずです。

nodejs の koa を使って適当に立てましょう。

まずは必要なパッケージをインストールして、

$ npm i -S koa koa-static

コードを用意

app.js

var koa = require('koa');
var serve = require('koa-static');
var app = koa();

// static file serve
app.use(serve(__dirname + '/src'));

app.listen(process.env.PORT || 4000);
console.log('running on http://localhost:' + (process.env.PORT || 4000) + '/')

そしたら実行して確認しましょう。

$ node app.js

をしたら、ブラウザで http://localhost:4000/ にアクセスし、キューブが描画されてたら成功です。

回転でもさせてみようか

まだ、jThree v3 には jQuery 的な .animate() は実装されていません。(v2にはあります)

ですので、簡易的に attr を setInterval で随時更新してみましょう。

index.js

j3(() => {
  var i = 0;
  setInterval(() => {
    j3('#rotate-cube').attr('rotation', '0,'+i+',0');
    i += 3;
  }, 10);
});

jThree の基本として、j3jQuery$ です。

さっきと同様に実行してみてください。

こんな感じになれば成功です。

f:id:grooyv:20160315033824g:plain

良さげ

この動画は gif なので色合いがアレですが本来はもっと滑らかな色です。

CamingoCode を webfont としてブログに導入しました

ちょっと下品で嫌いだったMonacoとおさらばです ( ´ ▽ ` )ノ
Monaco 好きな人ごめんなさい...

適当なコードを下にぶん投げておきました。表示が変な感じになってたらあとで対処を考えます

僕ははてなブログに課金してないのでスマホ用のページではフォントは変わってないと思います

package asia.grails.test.scaff
class Person {
    String firstName
    String lastName
    Date dateOfBirth
    static constraints = {
        firstName (blank: false)
        lastName (blank: false)
        dateOfBirth (blank: false)
    }
}

javascriptで配列を自由に初期化

例えば、javascriptにおいて [ 0,1,2,3,4,5,6 ] のような配列を作りたい時があります。
当然これと全く同じ配列をいつも作りたいのであれば直接書けばいいですが、
要素個数が未定である時はこの方法は一般的な表現になってなくてよろしくないです。

今回は、この配列の生成をjavascriptにおいて関数型チックに書く方法を紹介します。

結論

最初に結論を書いてしまいますが、以下のように書けば良いです。

// [ 0,1,2,3,4,5,6 ]
var myAry = Array.apply(null, { length:7 }).map(function (undef, i) {
    return i;
});

なぜこれで動作するのか説明

本当は、Array(7).map(function () { ... }); みたいに書ければ良いんですが、
それは [,,,,,,].map(...) ってことになります。
実は javascript は、要素の中身が空の場合は.map()などは動きません。
もちろん、[undefined, undefined, ...].map(...) のように書けば動きます
ということは、ミソはこの[undefined, undefined, ...]というような配列を用意することとなります。

あと、前知識として、Function.prototype.apply() の説明をします。
大したものじゃないので、仕様がなんとなくわかる場合は読み飛ばしてください。
以下の関数があったとします:

function minus(a, b) {
    return a - b;
}

この関数の呼び方についてですが、続けて下も見てみてください。

console.log(minus(2, 3)); // -1
console.log(minus.apply(null, [2, 3]); // -1

apply は、文字通り関数を呼び出すメソッドです。
第一引数のもつメソッドとして、元の関数を呼び出そうとします。
今回は特に指定する必要がないのでnullにしました。別に何だっていいです
大事なのは第二引数です。.apply()を使うと、上のコードの通り引数たちを配列にして渡せます。

本題に戻りましょう。 ここで Array(1,2,3,5)[ 1,2,3,5 ]が等価であることを思い出しましょう。
ということは、Array.apply(null, [,,])とすれば[undefined, undefined, undefined]が作り出せます。
この場合は、配列の中身が空でも問題ないです。
一般性を保つには、Array.apply(null, Array(7))とかですかね。

でもこの方法だと引数で配列を作っていて、メモリがもったいないですねー
(関数型だとどうせメモリの無駄遣いをしてしまいますが)
解決策はこうです:

Array.apply(null, { length:4 }) // [undefined, undefined, undefined, undefined]

実は length プロパティさえあれば何でもいいっぽいですね。。。
ここまでできればあとは.map()するだけです

その他比較

他言語ならもっと簡潔に書けることは多いです。
下は ruby の場合の書き方です

Array.new(7) { |i| i } #=> [ 0,1,2,3,4,5,6 ]

(0..6).to_a #=> [ 0,1,2,3,4,5,6 ] alluser さんのコメントを参考に追加

(0..6).map{|v| 3 * v} #=> [0, 3, 6, 9, 12, 15, 18]    追加
([0]*7).map.with_index{ |v, i| 3 * i } #=> [0, 3, 6, 9, 12, 15, 18]    追加

ちょっと考えたら色々あった...この言語自由度高いなあ

coffeescript ならこうです。

[0...3].map (e) -> Math.random()
#=> [ 0.2867903469596095, 0.7377240755595267, 0.5721909941311419 ]

ary = (i + Math.random() for i in [0...3])
#=> [ 0.10734258475713432, 1.5030816949438304, 2.5735190827399492 ]

プログラミング用フォントの CamingoCode は神

プログラミング用フォントに、CamingoCodeというものがあります。
今愛用しているフォントで、もう手放せなくなってしまいました ´д`

語るより見ていただくのが早いです。実際に見ていただきましょう!

f:id:grooyv:20150814143856p:plain
f:id:grooyv:20150814171916p:plain

割と長く使ってますが、このフォントは特に文句つけられる場所が見当たらないです。大好き。
マイナーな理由がよく分からないですが、もっと評価されるべきかと思います。

CamingoCodeの良さ

  • 不自然な空間を作らないように、ちゃんとフォントの一部分一部分をバランス良く配置している。
    ちょっと何言ってるかわかんないかもしれませんが、
    例えば、stringという文字列を見た時に、多くのフォントではrとiの間に、妙に広い空間が出来てしまいます。
    画像に示す通りです。
    f:id:grooyv:20150814161450p:plain
    この空間がちょっと気持ち悪いとか、文字を読む速度を下げてるかな?と感じていましたが、CamingoCodeなら問題なしです。
    他にも、例えば、i という文字について、Rictyなどはiの縦棒部分を中心においています。
    しかしiの左側にちょっと装飾するという事を考えると、その縦軸はちょい右に寄っているべきなんです。
    ちゃんとCamingoCodeはそういう細かい事を考慮しています。
    こういうところがCamingoCodeの一番の魅力かもしれません

  • どのフォントサイズでも見やすい
    コーディング用なら特に気にする必要はないですが、他のコーディング用フォントだと
    細部を見た時にちょっと汚い形になってる事があります。
    ですが、CamingoCodeにはそれがありません。
    Webフォントにして、サイトで何かコードを載せる時にも役立ちます。 CamingoCodeはwebフォントでの使用も許されています。

  • 当然の識字性能
    0とOとoとQ、iとIと1とlと|、:と;と,と.など、よく問題になってしまうような文字はちゃんと区別しやすくなっています。
    そうでない文字も、必要なくらいの特徴があって見やすいです。
    f:id:grooyv:20150814161546p:plain

  • 単語単位、文章単位でも可読性は高い
    無駄に特徴の多いフォントは結局バランスが悪くなって全体的に見た時に読みにくいものになってしまっている事があります。
    しかし、CamingoCode は程よく特徴をつけていて、尚且つ統一性が高いので、バランスは乱れません。

  • そもそも形が美しいし楽しい
    好みの問題かもしれないです。個人的には、ちょっと四角っぽいシェイプと遊び心のある形に心奪われました。

  • windowsでもあまり字が潰れない
    windowsアンチエイリアスがクソなので、普通のフォントは字が潰れてしまいます。
    でもなぜか、CamingoCodeはあまり潰れないです。
    windowsを使ってた時は mac type というソフトでアンチエイリアスをかけてたのでこれは気にした事があまりありませんでしたが、
    さっき仮想環境で潰れない事を確認しました。
    もししっかり表示されないようであれば、正直にConsolasの方がいいかもしれません

  • ちょうどいい文字幅
    個人的には Ricty は狭すぎで、Source Code Pro は広すぎに感じています。

デザインの良さを言葉で説明するのはちょっと難しいですが、こんな感じかと思います

ダウンロード

本家サイトにある、"Download CamingoCode" をクリックしてください。

有名フォントとの比較

下にサンプル画像を置いておきます:

CamingoCode

f:id:grooyv:20150814143856p:plain

Source Code Pro

f:id:grooyv:20150814143900p:plain

Ricty / Inconsolata

f:id:grooyv:20150814143905p:plain

Consolas

f:id:grooyv:20150814143910p:plain

Courier

f:id:grooyv:20150814143915p:plain

Droid Sans Mono

f:id:grooyv:20150814143927p:plain

Monaco / Osaka-Mono

f:id:grooyv:20150814143931p:plain

Menlo

f:id:grooyv:20150814143936p:plain

java のラムダ式の仕様に惚れた

java で大規模な開発はした事が無いのですが、ちらっと javaラムダ式について調べて少し感動したので自分用メモ

まず、java8 のラムダ式について

ラムダ式は実体を持っています。
ということは、必然的に何かしらの型の元に定義されなければなりません。

という事で、以下のように書ける仕様になっています:

interface Func {
    void apply();
}

public class Main {
    public static void main(String[] args) {
        Func sayHi = () -> {
            System.out.println("Hi!");
        };
        sayHi.apply();
    }
}

Func 型には apply というメソッドが含めるようにしておいたとき、その Func 型にラムダ式を代入すると、その式は apply メソッドに割り当てられる仕様になってます。

つまり、どこがポイントかというと「javaがどのメソッドラムダ式を割り当てるかを勝手に決めてくれる」という事です。

この実装を使えば美しくメソッドチェーンが作れる

具体例を見ていきましょう。

public class Main {

    public static void main(String[] args) {
        A f = x -> y -> z -> {
            int sum = x + y + z;
            return sum;
        };
        System.out.println(f.a(1).b(7).c(9));
    }

    public interface A {
        public B a(int x);
    }

    public interface B {
        public C b(int x);
    }

    public interface C {
        public int c(int x);
    }

}

A -> B -> C -> int と推移できるようにインターフェースを用意して、それを満たすようなラムダ式を埋めてみました。
すると自動的にラムダ式を適切なメソッドに割り当ててくれます。
カリー化みたいな定義の仕方が楽しいですね

欠点

お気づきかもしれないですが、上の例でこんな感じに書くとエラーが吐かれます:

public interface A {
    public B a(int x);
    public B illegal(int x);
}

とても当たり前なんですが、ラムダ式をどのメソッドに割り振れば良いか java が判断できないからです。
引数の数とかで判断できるので多重定義くらいはさせてくれてもいいんじゃないの?って思ったんですけど、それも無理そうです