あさた研メモ

主に私が気づいたこととか困った時のメモとか書き留めとく用。

2016 Black Friday戦利品

この記事はPMOB Advent Calendarの16日目の記事です。 www.adventar.org

今回は買い物の話をします。

Black Friday Saleとは

ググれば出ますが、Wikipediaによると、

ブラックフライデー（英語: Black Friday）とは、小売店などで大規模な安売りが実施される11月の第4金曜日のことである。 アメリカ合衆国では感謝祭（11月の第4木曜日）の翌日にあたり、この日は正式の休暇日ではないが、 休暇になることが多く、ブラックフライデー当日は感謝祭プレゼントの売れ残り一掃セール日にもなっている。 ブラックフライデーには買い物客が殺到して小売店が繁盛することで知られ、特にアメリカの小売業界では1年で最も売り上げを見込める日とされている。

とまあ、セールの代表日みたいなやつです。

海外サイトはこの日の周辺に大規模なセールをやることが多いのです。

戦利品

というわけで、今年買ったものを紹介します。

一応私は音楽を作る身でもあるので、このBlackFridayセールはとても馴染み深いです。
(音楽系のソフトウェアはだいたいこの日が安売りばっかりになります)

FRIEDLANDER VIOLIN

sonicwire.com

私はVIENNA Special Edition vol.1とVol.4を持ってるのですが、 ソロバイオリンの音は少し使い勝手が良くなくて、 いい音源がほしいな～とは思っていたので、購入しました。

めっちゃいい音が鳴ります。 正直使いようによっては本物と聞き間違えるレベルです。

ULTRA DRUM FILLS

sonicwire.com

最近EDMとか流行りっぽいので、そういうのに使えそうなフィルイン素材です。

100種類入ってます。

使い勝手のいいものばかり揃ってるので、 Vengeance Essential Club Sounds Vol.1～3(販売終了)と併用して使うといい感じ。

PAYDAY2

銀行強盗するゲームです。

友達数人でやろうって話になって購入しました。
なんと4Pack(4人分)で1500円くらいになってました。
何度かやってみましたが、なぜかフレンド同士でやるとロードが無限に続くバグ？があってなかなかできてません。

たすけて。

あとがき

今回はこの3品。

そういやIT系の人が大好きなステッカーとかもBlackFridayセールやってたらしいですね。

ほんとはもっと欲しい音源とかあったけどお金がなかった…。
なお毎年恒例のWavesプラグインの1品無料配布は、持ってるやつだったので残念。

PAYDAY2のバグはログファイルとか見ても全然記録がないので、原因はわからず。
知ってる人は解決方法を教えてほしいです…。

音源関連はWishlistを作りづらいので、そういうのをまとめて公開できるシステム作りたいなあ。

three.jsのTextGeometryをTypescriptでやる(r82)

この記事はPMOB Advent Calendarの15日目の記事です。 www.adventar.org

前の記事: ムフフ簡易VRやってみた - ざっきーの雑記ー
次の記事: まだ

TL;DR

three.jsのr74〜 + TypescriptでTextGeometryつくるのはキレる。

というわけで

typescript + threejsの話です。
threejsを使ってtypescriptでコーディングしてコンパイルすることはできます。
前回記事でもちょっと話しましたが。

諸事情でテキストを表示したくて、TextGeometryというのがあるので使いました。
が、日本語も扱いたかったのでフォントファイルを読み込ませないといけません。

フォントファイルはjsonファイルにしないといけないので、 typeface.jsでttfを変換します。

最初書いたコードがコレです。 ちなみにclass内に書いています。
(以後、フォントファイルのある場所をfont_pathと表現します)

class threeDrawing{
...
  function Text(){
    let t = this;
    let loader = new THREE.FontLoader( text: string );
    loader.load('font_path', function( font ){
      let geometry = new THREE.TextGeometry(text, {
        font: font,
        size: 5,
        ...
        }
      );
      let material = ...
      let mesh = ...
      t.scene.add( mesh );
    });
  }
...
}

エラーが出ます。
許されないです。

何がいけないかと言うと、

  1. TextGeometryで与えるパラメータは{}じゃなくてTextGeometryParametersだよ
  2. fontはtype Fontじゃないとだめだよ

とのこと。

TextGeometryParameters

1.に関しては、

let parameters: THREE.TextGeometryParameters = {
  font: font,
  size: ...
  ...
};

といった感じで型を指定してやればいいです。
ちなみに、TextGeometryParametersはInterfaceです。

THREE.Fontまわり

さて、2.に関してですが…

いや、FontLoaderで読み込んでるんだからtype Fontだろ！と思いますよね…
違うんですよね。あれtype Objなんですよ。

じゃあtype Fontってどう作るの？というと、
THREE.Fontです。

さて、THREE.Fontの使い方ですが…
THREE.Font( font_path )ではないです。

私の実装はこうなりました。

public FontobjLoad(): void{
  // thisの保持をする
  // fontはインスタンス変数this.fontに格納
  let t = this;
  $.ajax({
    type: "get",
    url: 'font_path',
    async: false,
    dataType: 'json',
    success: function( data ){
        t.font = new THREE.Font( data );
    }
  });
}

は？

って感じですが、これでうまくいきます。

これでフォントデータを読み込めます。

THREE.Fontの引数はjson stringです。
Objectではないです。
フォントのjsonファイルを読み込んで、そのjsonをTHREE.Fontに渡してやります。

あとは、このfontを使ってTextGeometryを作るだけです。
fontをさっきの1.でのparametersにぶち込んで、こんな感じ。

let parameters: THREE.TextGeometryParameters = {
  font: this.font,
  size: ...
  ...
};
let geometry = new THREE.TextGeometry( text, parameters );
let material = ...
let mesh = ...
this.scene.add( mesh );

FontLoader、不良では？？？という感じですね。

さいご

Typescriptはコンパイラが注意を出してくれるので本当にこういうエラーに対処しやすくなりました。
とてもありがたい。

ただ、DefinitelyTypedのTHREEの定義ファイルに関して、 おそらくr81〜は対応してません。(2016.12.14現在)
というのも、r81で追加されたEdgesGeometryに対応してないからです。
r81以降はEdgesHelperは非推奨(というか使えない)ですからね。

うどん食いたい

typescript1.x -> 2.0にした話

この記事はPMOB Advent Calendarの9日目の記事です。

www.adventar.org

前の記事: そうだ俺が怠惰の罪だ - Zodiacの黙示録
次の記事: 後世に残すモノづくり - ざっきーの雑記ー

1.x使ってたときの話

ぼくはとある事情でthree.jsを触っているのですが、 javascriptが書きたくなくてtypescriptを使うことにしました。

ぼくが始めたときの最新版が1.x(xは忘れた)だったので、それを使いました。

外部ライブラリ(jQueryとか)使うときはコンパイル用の定義ファイルというのが必要になるんですが、 1.xではtypingsとかいう別のnpmモジュール?を使うことで一括管理が出来るので便利でした。

three.jsはDefinitelyTypedが定義ファイルを作ってくれてたので、 まあそれを使うということで、typings経由でダウンロード、typings.jsonで管理、という感じにしてました

ただ、わざわざtypingsとかいうのを入れるのが面倒だし、npmモジュールにも依存関係とかがあるので、 そこら辺が複雑になって面倒だな〜〜とは思ってました。

2.0になって

なんか結構変わっててビビった。
個人的に良かったのは、前述の定義ファイル管理。
npmだけで完結するようになった！

npm install --save @types/jquery

みたいな感じでダウンロードできて、npmの@types/以下で管理できるようになりました。
これは地味に便利。

あと、if文で型の絞り込みが出来るようになってました。 公式からの引用ですが、

function foo(x: string | number | boolean) {
    if (typeof x === "string") {
        x; // ここではstringに絞りこまれている
        x = 1;
        x; // numberに変わった
    }
    x; // number | boolean に絞りこまれている
}

function bar(x: string | number) {
    if (typeof x === "number") {
        return;
    }
    x; // 残るは string だけ
}

こんな感じ。

最後に

まあぼくはそんなガチ勢じゃないので嬉しかったのは書いたやつぐらい。
多分ちゃんと触ってる人はもっと見るべきところがあるって言うと思います。
ちなみに、three.jsも最新版に上げたらES6になってて、地味にgulp-uglifyが死にました(ES6非対応)。
javascriptは書いてはいけない。

あとどうでもいいですが、はてなブログってtypescriptのシンタックスハイライトできるんですね。

org-mode->LaTeXでタイトルや著者に改行を入れる

著者者が複数いたり、肩書が長かったりしたときに。 @@latex:\\@@ってやれば改行できる。

#+AUTHOR: はてなブログ あさた研メモ @@latex:\\@@ asatake

すると出力は以下の感じになる。

はてなブログ あさた研メモ
asatake