土曜日, 4月 30, 2016

Link list 2016-04

Why Small Data Is the New Big Data

http://knowledge.wharton.upenn.edu/article/small-data-new-big-data/
ビッグデータの逆でスモールデータって何かあるのかなと思って調べたらあった。今考えてることとリンクしそうな気はする。

Citizen Engineer

http://citizenengineer.org/

AI制御可能なカメラ搭載ドローン

http://gethover.com/

財務大臣になって財政改革を進めよう

http://www.zaisei.mof.go.jp/game/yosansinario/ 黒字化するには増税しかない絶望的なゲーム(Undoもできない)。科学技術振興に全然お金使ってない。

オープンデータのインパクト

http://okfn.jp/2016/04/09/case-united-states-new-york-city-business-atlas/

パナマ文書の技術的側面

https://medium.com/@c_z/d10201bbe195#.ss7zr89bx

スペキュラティヴ・デザインが拓く思考 ──設計プロセスから未来投機的ヴィジョンへ

http://10plus1.jp/monthly/2016/04/issue-01.php

音を解析してクラスタリングしてリミックスしやすくするツール

http://www.thewire.co.uk/in-writing/interviews/play-the-musicmappr-sampling-app

ZOMBIE-CHANG

http://omake-club.com/artist/zombie-chang.html 「蓮沼執太メロディーズ・ツアー2016」で初めて聴いた。リリース音源もかっこいいけど全体的にローファイでチープな印象なので、あの日のライブの時みたいにクリアかつ太い音でもっと聴きたい。

Taking a line for a walk

https://medium.com/@williamngan/taking-a-line-for-a-walk-6fd947acb227#.i9m4d538k

UnityでCreative Coding

https://www.youtube.com/watch?v=7bPQ9L0hvXM&list=PL64OnOdZ_3NGD4qvRucx7BpKUZ-IqGc0Q

JOLIN RAS / WLOVE FM (valentines special)

http://samplinglove.blog94.fc2.com/blog-entry-2605.html いいMix

Fathomが始めたポッドキャスト

https://fathom.info/ebd/

トレードマークとシンボル集

http://trademarksandsymbols.com/

金曜日, 4月 08, 2016

iOS開発再入門 5 AutoLayoutをプログラムで制御する

iOSアプリでUIを作る場合Storyboardを使うのが普通なんだけれど、プログラムから制御できると非常に助かる。音の数が増えたり、新たな要素が追加された場合に対応しやすいロジックを組んでおきたい。旧バージョンはすべての雨粒を線で繋いだ結果Xcodeが地獄の様相を呈した。レイアウトもLandscapeだったが、iPhoneがどんどん縦に伸びたこともあり、Portraitに変更した。
iOSのレイアウトシステムには、「Manual Layout」、「Auto Resizing(Spring and Struts)」と呼ばれる従来の方式に加え、多様なサイズの画面レイアウトに対応するための「Auto Layout」が採用されている。今回はAuto Layoutを使っていく。名前から想像すると色々と自動でやってくれそうな期待をしてしまうのだけど、全然そんなことはなくて(というか期待と違う結果になって)つまづきまくってDropophoneの開発が遅れた。

制約によるレイアウト

Auto LayoutはCassowaryというレイアウトシステムから発展した。制約(Constraints)をベースに、オブジェクト同士の関係を記述するルールを組んでいく。JavaScriptにも移植され、ブラウザで動くGrid Style Sheetsというプロジェクトもある。

Auto Layoutを使うか使わないかはViewごとに選択できる。プロパティ名がわかりにくい気がするが、Auto Layoutを適用したい要素に対してtranslatesAutoresizingMaskIntoConstraintsをfalseにする。

buttonA.translatesAutoresizingMaskIntoConstraints = false

関係を記述する手法として、VFLという言語が採用されている。CSSで要素を配置する場合は基本的にマークアップが強く影響するので、「ボタンAの右に30px空けてボタンBを置く」ということをコードで表現しにくい。

VFLだとこう書ける。

"V:|-[buttonA]-|"
"V:|-[buttonB]-|"
"H:|-[buttonA]-30-[buttonB]-|"

分かりやすい。アスキーアートっぽいのも面白い。"|"はSuperview(親View)、"-"はスペーシング、"[]"にはViewを記述する。Viewは変数名とインスタンスをまとめてDictionaryで渡す。

H(水平方向)の指定だけでなくV(垂直方向)の指定も必要。ボタンが横に2つ並ぶ場合など、カラムを取り扱うには同じような内容を繰り返すことになる。

let views: Dictionary = Dictionary(dictionaryLiteral:("buttonA", buttonA),("buttonB", buttonB))
let horizontalConstraints: [NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat(
  "H:|-[buttonA]-30-[buttonB]-|", options: [], metrics: nil, views: views)
let verticalConstraintsA: [NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat(
  "V:|-[buttonA]-|", options: [], metrics: nil, views: views)
let verticalConstraintsB: [NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat(
  "V:|-[buttonB]-|", options: [], metrics: nil, views: views)
        
view.addConstraints(horizontalConstraints)
view.addConstraints(verticalConstraintsA)
view.addConstraints(verticalConstraintsB)

上のコードを実行した画面がこれ。

確かにボタンAとボタンBの間は30px空いているのだけど、AとBのサイズは違うし、どう考えても縦に長過ぎる。レイアウトを詰めるには、ボタンのサイズやマージンなどを細かく指定していく必要があるのだが、どの設定が足りてなくてこの結果になっているのかが分からず、かなりややこしい。

VFLが解釈される前にViewの親子関係などが明らかになっている必要があるので、addSubViewなどの記述の順番には気をつける。Viewの初期化と制約の追加は関数を分けておいた方が良い。

最初は便利と思ったVFLだったが、全然理想通りにレイアウトできず完全に行き詰まってしまった。何か良い方法はないものかと調べていたら、Storyboard上で設定するようにaddConstraintで一つずつ設定していく手法を見つけた。基準となる要素を決めて、それに対してどのくらい離すとかを決めていく。これを覚えたら、イメージと実行結果の差がなくなり、一気に開発が進んだ。

view.addConstraint(
  NSLayoutConstraint(item: buttonA,
    attribute: .Top, relatedBy: .Equal, 
    toItem: view, attribute: .Top, 
    multiplier: 1.0, constant: 10
  )
)
view.addConstraint(
  NSLayoutConstraint(item: buttonA, 
    attribute: .Left, relatedBy: .Equal, 
    toItem: view, attribute: .Left, 
    multiplier: 1.0, constant: 10
  )
)
view.addConstraint(
  NSLayoutConstraint(item: buttonB,
    attribute: .Top, relatedBy: .Equal, 
    toItem: buttonA, attribute: .Top, 
    multiplier: 1.0, constant: 0
  )
)
view.addConstraint(
  NSLayoutConstraint(item: buttonB, 
    attribute: .Left, relatedBy: .Equal, 
    toItem: buttonA, attribute: .Right, 
    multiplier: 1.0, constant: 30
  )
)

buttonAのTopを親ViewのTopから10px、Leftを親ViewのLeftから10pxと設定し、buttonBはTopをbuttonAのTopと合わせ、LeftをbuttonAのRightから30pxと設定している。こうするとbuttonAのTopやLeftを変更した際に、buttonBがそのまま追従してくれる。

金曜日, 4月 01, 2016

Link list 2016-03

クレーのノート(3900ページ)を公開

http://www.openculture.com/2016/03/3900-pages-of-paul-klees-personal-notebooks-are-now-online.html

PDが動く低レイテンシなインタラクティブオーディオ向けマイコンボード

https://www.kickstarter.com/projects/423153472/bela-an-embedded-platform-for-low-latency-interact

相席居酒屋がキャバクラの客を取っている

http://nikkan-spa.jp/1064078

civic tech patterns

https://github.com/codeforamerica/civic-tech-patterns

アメリカの銃声検知システム

http://www.economist.com/news/united-states/21617018-how-gunshot-detecting-microphones-help-police-curb-crime-calling-shots

類似画像検索システムを作ろう

http://aidiary.hatenablog.com/entry/20091003/1254574041

canvasでInstagramのフィルターを再現

https://www.viget.com/articles/instagram-style-filters-in-html5-canvas

自分が食べられていることが分かる植物

https://www.good.is/articles/plants-know-being-eaten センシングしてみたい

Image Processing 101

https://codewords.recurse.com/issues/six/image-processing-101 画像処理入門。他の記事も面白い。

CreativeAI

https://medium.com/@ArtificialExperience/creativeai-9d4b2346faf3#.tnbtpudcn

Chrome Music Lab: Making ‘Kandinsky’

https://medium.com/@activetheory/chrome-music-lab-making-kandinsky-7de5ab04f4fe#.870n2ehok

六本木クロッシング

http://www.mori.art.museum/contents/roppongix2016/ 山城くんの作品に映像を提供しました。

イノベーション東北

https://www.innovationtohoku.com/
リニューアルの設計や、Field Hack 女川の企画をお手伝いしました。小林先生の記事も合わせて読んで欲しいです。