Link list 2015-03

Inex Cox

http://inescox.com/
最近見た中でずば抜けて洒落てるグラフィック

手描きのデータビジュアライゼーション

http://www.wired.com/2015/03/hand-drawn-postcards-data-viz-dream
LupiとPosavecのプロジェクトで、アルゴリズミックなドローイングとも言える。思い起こすのはConditional DesignとかSol Lewittの作品。データと、描画のルールと、立ち現れるテクスチャ。

GT Cinetype

http://gt-cinetype.com/
かっこいいフォント。アルファベットと数字(と少しの記号)はお試しで使える。サイトもいい。

アルゴリズムを用いて形状が変化する文字を作る

http://www.wired.com/2015/03/using-algorithms-design-responsive-typography/
メタデザイン、パラメトリックデザインという言葉が気になった。パラメトリックデザインは、パラメータの操作によってバリエーションを生み出すデザインを指すようだ。主に建築の分野でよく目にする。メタデザインは、そのように変化する仕組み自体のデザインを指している。Rune Madsenのテキストによると、今までのデザイナーは「ロゴ」だったり「ウェブサイト」だったり「ポスター」のように最終成果物を作り出す存在だったが、メタデザイナーは手で絵を描くのではなく、絵を描くための仕組みを作る。Rune MadsenがITPで行っている授業「Printing Code」も面白い。

ドローイングの学び方

https://design.tutsplus.com/tutorials/how-to-learn-to-draw-stage-one-manual-skills--cms-23304
認知の仕組みや技術の水準を考慮して、どうステップを踏んでいけば良いかを教えてくれる記事は珍しい。

Credibles

http://greenz.jp/2015/03/12/credibles_crowdfunding/
個人経営の 店舗向けクラウドファンディング。応援したい店に出資できる。

モバイルコンテンツ戦略でコンテンツがどこにでも行けるように

http://www.smashingmagazine.com/2015/03/23/content-mobile-content-strategy/
スマートウォッチなどの登場でますます混迷を究めるスクリーン上のデザイン。モバイルコンテンツ戦略とは単に各デバイスで綺麗に見えることではない。質を落とすことなく、持ち運び自由で柔軟なコンテンツを作ること。Content Everywhereという本に詳しいようだ。買おうと思ったらSafari Books Onlineで読めた。

Don't follow the wind

http://dontfollowthewind.info/
みることができない展覧会。音声のみのウェブサイト。真っ白の画面を「見る」ことを意識してデザインされているように思える。デレク・ジャーマン監督作、終始青い画面の映画「BLUE」を思い出した。

あいちトリエンナーレ2016 プロモーション

あいちトリエンナーレ 2016 コンセプト・ビデオ
あいちトリエンナーレ 2010 / 2013 ドキュメント
山城監督がディレクションし、ドキュメント映像の2010を僕、2013を丹羽彩乃さんが担当。3D空間上のカメラの位置を制御するアプリケーションを作り、タイミングや位置、読み込む画像を監督が設定できるようにした。After Effectsでできることをわざわざ頑張ってしまった気もするのだけど(事実2013はAfter Effects)、ここに行き着くまでの表現的なトライ&エラーを色々試せたのは良かった。

Vetiver - Current Carry by Easy Sound Recording Co.

https://soundcloud.com/easysoundrecordingco/vetiver-current-carry
すごくいいんだけどCDかVINYL + Digital Downloadしか買う手段がない。ダウンロードのみで売って欲しい。

Sketchで作ったデータをPhotoshopに移動させる

Sketchを使っているのが自分だけで、他の人が開けないのでPhotoshopに移動させたい。編集できる必要はなくて、各オブジェクトのサイズや位置などが分かるリッチなビューアとして使ってもらう。

Sketch側のレイヤー構成はこんな感じで、パーツ単位でスライスを指定しておく。

SketchToolをインストール(install.shを実行するかパスを通せば良い)し、

sketchtool export slices design.sketch

とするとスライスが書き出される。「-o パス」で書き出し先を指定できるはずだがエラーでうまく動かず「1」というフォルダが作られてしまう。同じ名前のスライスがあると上書きされてしまうので注意する。

sketchtool list slices design.sketch > export.json

などとするとスライスの情報がJSON形式で出力される。

スライスされた各パーツのサイズや位置が記録されているので、あとはこのJSONを元にPhotoshopで再現してあげればよい。PSD.rbも使ってみたかったが、PhotoshopのJavaScriptでやってみた。JSONのパースは信頼のCrockford先生によるJSON2を使用。書き出したスライスデータは「export」というフォルダ名にして、同じ階層に置いてある。Photoshopを起動して「File>Scripts>Browse...(英語環境にしてるので)」を選択して、sketch2psd.jsxと名付けた下のファイルを選択する。

sketch2psd.jsx

#include "json2.js";

var currentDir = new File($.fileName).parent;
var file = new File(currentDir + "/export.json");
file.open();
var jsonString = file.read();
var layoutJson = JSON.parse(jsonString);
var slices = layoutJson.pages[0].slices;
var bounds = layoutJson.pages[0].bounds.split(",");
var offsetX = -parseInt(bounds[0], 10);
var offsetY = -parseInt(bounds[1], 10);
var width = parseInt(bounds[2], 10);
var height = parseInt(bounds[3], 10);
var doc = documents.add(width, height, 72, "psd", NewDocumentMode.RGB);

for(var i=0; i<slices.length; i++) {
  var imgFile = new File(currentDir + "/export/" + slices[i].name + ".png");
  var openedDoc = open(imgFile);
  var partsName = slices[i].name;
  openedDoc.name = partsName;
  openedDoc.selection.selectAll();
  openedDoc.selection.copy();
  openedDoc.close();
  activeDocument = doc;
  doc.paste();
  
  var currentLayer = activeDocument.activeLayer;
  currentLayer.name = partsName;
  currentLayer.translate(-currentLayer.bounds[0], -currentLayer.bounds[1]);
  currentLayer.translate(slices[i].rect.x + offsetX, slices[i].rect.y + offsetY);
}

処理内容としては、先ほどexportしたpngを開いて全選択し、ひたすらコピペしている。PhotoshopのJavaScriptでのファイルの扱い方はJAVASCRIPT TOOLS GUIDEというドキュメントに書かれているのだけど、2014版がないし、公式でも探せなくて泣ける。それ以外はここにある。

Alignなどの問題か、文字のレイヤーなどパーツによってずれが出たり、Sketch上で位置を修正してもJSONで書き出した際にboundsが更新されてなかったり(offsetX, offsetYで対応してある箇所)、おかしなところが結構あって、仕事で使うには厳しいといった印象。それでも手でひとつひとつ並べるよりかは楽。

iOS開発再入門 3 AudioKitを利用して複数のサウンドファイルを鳴らす

前回の最後に予想した通り、今回の目的にはAVAudioPlayerよりAVAudioUnitSamplerというクラスを使う方が良さそう。loadAudioFilesAtURLs()というメソッドがあり、これで複数のファイルを読み込むことができる。他に音声を扱うにはMedia Player framework、Audio Toolbox framework、Audio Unit framework、OpenAL frameworkがある。旧バージョンはOpenALを使用した。

AVAudioUnitSamplerはiOS 8から使えるAPIで、これを採用するということは動作環境がiOS 8以上である必要がある。2月2日時点のシェアは72%とのこと。このページで確認できる。

loadAudioFilesAtURLs(_ audioFiles: [AnyObject]!, error outError: NSErrorPointer)というメソッドで複数のファイルを読み込める。AVAudioUnitMIDIInstrumentクラスを継承しているので、音を鳴らすにはAVAudioUnitMIDIInstrumentクラスのメソッドを利用することになりそうだ。

…と思ったが全く使い方が分からなかった。いくつか検索して調べた結果、音声ファイルにメタデータを入れておくとかファイル名に音階を含むとMIDIと同様に扱えるなどと書いてある。任意のMIDIノート番号とチャンネルに、任意の音声ファイルをアサインできれば便利な気がするが、どうもそういう使い方はできないようだ。この方向は諦め、OpenALで実装しようかと思ったが、OpenALはCで書かれていて、Cで書かれたものをSwiftで使う方法がよく分からなかった。今後の課題とする。

同じくiOS 8から使えるAVAudioFileクラスのreadIntoBuffer(_ buffer: AVAudioPCMBuffer!, error outError: NSErrorPointer)メソッドを使うと、音声データをメモリに読み込めて遅延のない再生ができそうだが、全てのデータをメモリに入れられるのか、自分でうまく管理する必要があるのかどうかは検証が必要。

音関係の情報は相変わらず少ない。Objective-Cではそこそこ見つかるのだけど、Swiftで参考になるものがほとんどない(だからこそできたら良かったんだけど)。

ということで既にそういう課題を解決してそうなライブラリの力を借りることにする。ゲームなどでよく使われているCocos2Dも検討したが(内部ではOpenALを使っているらしい)、AudioKitが目的に合ってそう。サウンドエンジンはCsoundとのこと。学生時代に触って意味不明で挫折したけどアカデミックな電子音楽ではよく使われている(はず)。

CocoaPodsを入れる

ライブラリの管理はCocoaプロジェクト用のパッケージマネージャーであるCocoaPodsを使う。

pod setup

でローカルにリポジトリを作る。これがないとpod installしようとしてもエラーになる。

pod init

でPodfileを作成し、

target 'Dropophone' do
  pod 'AudioKit', '~> 1.2'
end

と書いて

pod install

これでAudioKitを使う準備ができる。今後は.xcworkspaceからプロジェクトを開くようにする。

SwiftでObjective-Cのプログラムを使用する

AudioKitはObjective-Cで書かれているので、Swiftで使用するにはブリッジが必要。[プロジェクト名]-Bridging-Header.hというファイルに(なければ作る)、

#import "AKFoundation.h"
#import "AKTools.h"

と書く。.xcodeprojファイルの「Build Settings」に「Swift Compiler」という項目があるので、「Objective-C Bridging Header」に先ほどのヘッダファイルを設定する。これでAudioKitのクラスが使えるようになる。

音声ファイルの追加

Finder上(Terminalでもいいけど)でsoundsというフォルダに全ての音声ファイルを格納し、XcodeのSupporting Filesの中にドロップする。ラジオボタンは「Create Groups」を選ぶ。これはFinder上の階層構造とは関係なく、MainBundleに対してフラットにリソースを格納することを意味する。「Create folder references」を選ぶと、finder上の階層構造を反映するようになるので、リソースを読み込む際にファイルまでのパスや、サブディレクトリを指定する必要がある。状況に応じて使い分けたい。

音声ファイルの形式はAIFFにしておく。

AudioKitでサウンドファイルを鳴らす

AudioKitはさすがにCsoundをベースにしているだけあって、サウンドファイルを読み込むクラスにplayしたら音が鳴るみたいな単純さではない。Expamleに音声ファイルを鳴らすプロジェクトがあるが、今のところObjective-Cで、かつクラス構成も少し複雑になっているので、シンプルに音を鳴らすための手順が分かりにくい。

色々と触った結果、

1. 楽器(AKInstrument)を定義し、出力(AKAudioOutput)に繋ぐ。
2. ノート(AKNote)のinstrumentプロパティに楽器を設定する。
3. オーケストラ(AKOrchestra)に楽器を追加。
4. オーケストラをstartし、ノートをplayすると音が鳴る。

というような流れがあるようだ。Csoundを知っていると分かりやすいのかな。

コードをgistに置いたので、見比べると大体分かると思う。

GUI

もうひとつ考慮したいのは、30個のボタンを配置する方法。前回は頑張って30本のアウトレットを繋いだが、今回は手作業ではなくプログラムで何とかしたい。

経験的に、プログラムから制御したいことがあると「programmatically」という語を含めて検索する。

button1.setTranslatesAutoresizingMaskIntoConstraints(false)

とすることでこれから定義するAuto Layoutを適用することができる。Auto Layoutに関してはまだまだ分かっていないことが多いのでひとまず適当にボタンが並べた。何故か最初のボタンがでかい。

UIButtonのインスタンスにイベントを設定。tagを利用して、どのボタンが押されたのかを識別する。

これでボタンに各音源がアサインできたので、応用すればシンプルなパッドのような楽器になる。次はAuto Layoutを掘り下げながら設計を考え直す。

実機でも動作確認済み。たまに音量がクリップするが、連打や同時発音など問題なさそう。