teenage engineering OP-1

f:id:nishaya:20170902081546j:plain

シーケンサを作っていた間は、影響をモロに受けてしまいそうなので我慢していたOP-1を、シーケンサの制作が一段落ついたこともあって買った。

触ってみるとシーケンサにあたるものはおまけ程度で、メインはシンセサイザー or ドラムキット(それに、FX/EQ)と、4トラックのレコーダー。

初見だと何をしていいのか戸惑うUIだが、OP-1の設計思想が頭に入ると腑に落ちる。
各インストゥルメント、エフェクトのビジュアライズが個別に用意されていて楽しい。そういうところに発揮できるユーモアと、それを実装できる余裕は持っていたいなと思う。

シャーシは切削されたアルミでそこそこ重量はあるので、見た目ほど持ち運びに適した感じではないのだけど、コンピュータの電源を入れずに音を作って遊べるので、旅行に持っていって移動中や宿でのんびりするときに弄るのがよさそうだ。

Reactでパターンシーケンサを作った

以前、シンセサイザーを作ったが、
楽器が弾けないのでブラウザに自動演奏してもらうことにした。

f:id:nishaya:20170827210726p:plain

Reaktion(DEMO)

Flowtype

シーケンスや音源のプリセットにflowtypeのアノテーションを使ったが、内部で生まれては消えるようなデータならわざわざclassを定義するまでもないし、Flowtypeなら必要な部分にだけ適用することができるので、導入したことで効率的に開発を進めることができた。

Material-UI

本当はGrommetのようなメリハリの効いたのが使いたかったんだけど、コンポーネントのバリエーションが足りなくて今回もMaterial-UIを使った。

とはいえ、Material-UIにも楽器を作る上で必要なコンポーネントが全て揃っているわけではないので、楽器のためのUIコンポーネントライブラリを作ってみるのもアリかもしれない。

音を鳴らすしくみ

肝心の音を鳴らすしくみについては
リファクタリングしながら書いていこうと思う。

Kubernetesのsecretsをファイルから設定する

Google Container Engine から接続する  |  Cloud SQL for MySQL  |  Google Cloud Platform

GKEからCloud SQL Proxyを使うにあたり、公式ドキュメントの方法で接続用のユーザアカウントをk8sのsecretsに登録していたのだが、件数が多い場合にコマンドで都度設定するのは億劫だなと思っていたら、公式に方法が記載されていた。

Secrets | Kubernetes

下記のような形式でyamlを書いて $ kubectl create -f ./secret.yaml で作成。

apiVersion: v1
kind: Secret
metadata:
  name: [SECRET_NAME]
type: Opaque
data:
  username: [BASE64_ENCODED_USER_NAME]
  password: [BASE64_ENCODED_PASSWORD]

一点気をつけたいのが、

Each item must be base64 encoded:

とあるように、値はBase64エンコードされている必要がある。

おまけ: 設定した値をyamlにエクスポートする

(secretsに限らないが)get-o yaml オプションを指定すれば設定した値をファイルに書き出しておける。

$ kubectl get secrets [SECRET_NAME] -o yaml > path_to.yaml

Container ComponentをTypeScriptで書く

react-reduxのContainer ComponentをTypeScriptで書き直した。
嫌いじゃないが、もう少しシンプルにならないものか。

途中でAtomからVS Codeに切り替えたが、
特にカスタマイズをしなくてもTypeScriptに対応していたり、
IntelliSenseがpropsやstateに対して効いてくれるのは助かる。
しばらく使ってみようと思う。

gistdcbb4d372e5fde5018a3c2a717fec90c

参考

Typesafe Container Components with React-Redux’s Connect and TypeScript

はじめてのReact VR

Reactのコンポーネントの中にthree.jsのsceneを配置したら面白いんじゃないか…
というようなことを考えていたらReact VRとやらが登場していたので少し触ってみた。

f:id:nishaya:20170420235455p:plain

DEMO nishaya/my-first-react-vr

componentの切り出しは、通常のReactと同様

export default class MyText extends React.Component {
  render() {
    return (
      <Text>
        {this.props.children}
      </Text>
    )
  }
}

と定義したものを、importして使う

import MyText from './components/my_text.js'
...
  render() {
    return (
      <View>
        <MyText
          First
        </MyText>

Reactをある程度知っていれば、
Componentの定義やstateの更新による再描画など基本的な書き方は同じなので、
Reactでwebアプリケーションを組む感覚でVRのシーンが組めそうだと感じた。

ちなみに、webブラウザ上での実行時の描画にはThree.jsが使われている。

React/ReduxのBoilerplateを作った

React/Reduxを使ってちょっとしたもの(楽器とか)を作ろうと思ったとき、
実験用のコードを書くよりも環境構築に時間がかかってあほらしいので、
自前でboilerplateを作った。

既存のboilerplateを使えばいいのだけれど、
余分なもの、自分が理解していないものが混じっているのは嫌だったので、
自分が使う範囲のものだけを含めたminimalなものにした。

nishaya/react-redux-boilerplate

特別なことは何もしていないが、
.eslintrc の下記の箇所は意図的に緩くしてある。

  no-mixed-operators: 0
  no-console: 0
  • no-mixed-operators: オシレータの処理などで演算子の優先順位を明示すると長くなるのでオフ
  • no-console: UglifyJSのdrop_consoleで落とすのでオフ

PUSH TURN MOVE

電子楽器のUIデザインに関する本が出るらしい。

f:id:nishaya:20170412090607p:plain

PUSH TURN MOVE
4/18(火) よりKickstarterで募集開始。

気になる内容は、

  • Jean-Michel Jarreによる序文
  • サウンド: ソフトウェア/ハードウェアにおける音の可視化
  • コントロール: ノブ、フェーダー、タッチストリップ、ボタン、スクリーンなど、さまざまなコントロール要素
  • レイアウト: 電子楽器・コントローラのインターフェースデザインにおける原則とテクニック
  • コンセプト: ハード/ソフト/AppにおけるDAWs, Grids, Modular, Collaborative, Radial, Gesturalといったコンセプト
  • ユーザ: ユーザビリティ、ワークフロー、体験デザイン - UCDについて
  • 歴史: 電子音楽をとりまくインターフェースの進化 - テルミンからAbleton Liveまで
  • 楽器メーカーの開発者インタビュー

などなど、280ページ

必読の予感。
電子書籍版でいいから早く読みたい。