日曜日, 12月 25, 2016

Link list 2016-11

システムがヘル、人は悪魔じゃない

http://www.cdjournal.com/main/cdjpush/lang-lee/1000001233
イ・ランは韓国に遊びに行った時にYOUR MINDの人に教えてもらった。友人によると弘大が今また面白いらしいので行きたい。

レイアウト自動化の研究

https://www.subtraction.com/2016/11/29/in-the-future-graphic-design-layout-will-be-automated/

Inspiring Online

http://inspiring.online/

The Infinite Drum Machine

https://aiexperiments.withgoogle.com/drum-machine
ここからさらに良くなりそう

NTSC — Never Twice The Same Credits

https://medium.com/@studionora/never-twice-the-same-credits-d656f78ed6e1#.pii24u78g
毎回変わるタイトルシーケンス。正しいプロトタイピング。

InDesignでProcessing魂

http://basiljs.ch/

Metapolator

http://metapolator.com/home/

metaflop

http://www.metaflop.com/

ビジュアライゼーションのアイディアからスケッチ、実装まで

http://www.datasketch.es/

Neue Goods

https://www.neuegoods.com/

土曜日, 12月 24, 2016

C4を使う

動画再生とゲームっぽいものが必要な納期めちゃきつ案件があって、Core Graphicsでやろうとしたら円を動かすだけで苦労したのでC4を使ってみた。

ドキュメントは親切ではないけどサンプルやチュートリアルは結構ある。習うより慣れろ、見て盗めな感じがクリエイティブコーディングっぽい。

セットアップ

インストール方法はいくつかある。ターミナルを使ったが、手順はGit for Macの場合と同じ。

GitHubからcloneしてどこかに保存しておき、Xcodeプロジェクトで「Add Files to "プロジェクト名"」からC4iOS.xcodeprojを選び、TARGETSの「Embedded Binaries」に「C4.framework」を追加して(作成したプロジェクト配下のC4.frameworkiOSを選ぶ)ビルドする。

ViewControllerに「import C4」と書いてC4をインポートし、親クラスをCanvasControllerに変更すると使えるようになる(ここではC4CanvasControllerとなっているがCanvasControllerが正しい)。

viewDidLoad()とdidReceiveMemoryWarning()を削除し、setup()を作る。これが最初に呼ばれる関数になる。

import UIKit
import C4

class ViewController: CanvasController {

    override func setup() {
        let circle: Circle = Circle(center: canvas.center, radius: 100)
        canvas.add(circle)
    }

}

実機で試す際にC4IOS.xcodeprojのCode Signing Identityの設定でつまづいたがDebug、Release共に「Don't Code Sign」で「Any iOS SDK」を「iOS Developer」にしたら動かせた。

メモ

  • 作成した図形などはcanvasというプロパティにadd()で追加すると表示される。
  • Rectangleの角丸を取りたい場合はcornerにSize()を代入する。
  • 線(strokeColor)を消したい場合はclearを代入する。
  • CanvasControllerはUIViewController、CanvasViewはUIViewを継承してるので、通常のiOS開発の作法に従って書けるのがいい。
  • TextShapeで日本語が表示されなかったのでUILabelを使った。
  • Processingみたいにメインのループ関数があってその中で色々処理を書くというよりはFlash(Animate)に近い。

何か作ったらまた書く。

木曜日, 12月 15, 2016

2016年に食べて良かったもの

僕は朝ご飯は基本的に食べないし、たまに昼も食べなかったりするのだけど、それでもだいたい1年で800食くらいは食べてる計算になる。そんな中で記憶や記録を掘り起こしていくつか良かったなーというのを挙げてみた。

今年は働き方が変わって、取引先で作業することや出張が多く、必然的に新しい出会いに恵まれた。とあるレストラン検索サイトの元社長が「みんな一生懸命お店やってるのに勝手にランキングつけてそれでお金もらってるなんて、恥ずかしい商売だっていう意識を持ってないと駄目」みたいなことを言っていたのだけど、いや本当にそう!

最近体力の衰えからか、精神的にも前ほど頑張れなくなってきたのでランニングを始めた。走った後のご飯のうまいこと!ランキングよりランニング!

とおのや 要
発酵の達人。全国を食べ歩いて気に入った店で修行してたらしい。彼がおすすめする店はネットで探しても出てこない。

bi.ble
美瑛で分子調理が食べられる。パンもおいしい。 

鷹匠壽
紹介がないと入れない上に予約も取れない。連れて行ってくれた人によると素材の良さ、さばき方、焼き方が絶妙とのこと。本当にシンプルなので何でこんなにおいしくなるのかわからない。

Google六本木オフィスのカレー
無料であることや種類の多さに目がいきがちだけど、カレーがいい。

Morgenstern's Finest IcecreamのEDIBLE SCHOOLYARD MINT CHIP
「アメリカ人のアイスへの探究心は日本のラーメンに近い」とはexonemoのやえさんの言。真っ黒なココナッツアッシュとか!卵使わないとか店の造りとか日本でも流行りそう。 

笹だんご
新潟土産はこれが味とインパクト(お土産ですよ感)的に良かった。

松記鶏飯
海南鶏飯が至高。何食べてもおいしい。

代々木屋の納豆蕎麦
急いでる時、変な時間に食べる時、お世話になった。 

ジランドール
近場ながら現実から離れられる場所。ニューヨークグリルも。

コチンニヴァース
レモンライスに衝撃を受けた。

fuzkue
ランチもありがたい。

丸香の野菜天
客先が近いのでピーク時を避ければ余裕で食べられる。

酢重ダイニング
8と香妃園に行き過ぎた六本木の大人が求める安息の地。

こくわがた
電撃が走る系の出汁。

COBI COFFEE
ありがとうNEWoMan。

久助
昔の職場に近いが全然知らなかった焼き鳥。

Sweedeedee
お洒落すぎずほっこりすぎない丁度良さ。

ディラン
ベストカレー。

Food Hub Project テストキッチン
本格オープンは来年3月とのこと。

食道園の冷麺
遠野で気になって期待せずに入ったらめちゃうまかった。深夜にどんどん人が入って来る。向かいの「つるや」もすごい。

Sunday Bake Shop
一番食べた甘いもの。

Le Cabaretの桃とブッラータ
驚きました。あとここのリエットでリエットに目覚めた。

Ess-a-Bagel
種類が多く、注文の仕方がわからず、人も並んでるのでプレッシャーで適当に頼んでしまったけどおいしかった。練習してからまた行きたい。

さえらのタラバガニサンド
毛ガニ派も認めるおいしさ。

2016 Advent Calendar 2016の15日目の投稿です。
昨日はfrkoutさん、明日はsuzurijpさんです。

金曜日, 11月 04, 2016

Link list 2016-10

NHK地域づくりアーカイブス

http://www.nhk.or.jp/chiiki/index.html

Manifold Magazine

http://ianstewartjoat.weebly.com/manifold-magazine.html

mognavi

http://mognavi.jp/
最近はこういうサービスが気になる

Nightmares on WaxのMix

https://nightmares-on-wax.bleepstores.com/

社会は情報化の夢を見る

https://www.amazon.co.jp/ebook/dp/B01J1I8PRQ/
「アーキテクチャの生態系」からこの本を知ったのだがめちゃくちゃ面白い。「情報技術が社会を変える」という錯覚の仕組みを解説している。

誰が音楽をタダにした?

https://www.amazon.co.jp/ebook/dp/B01LYMTJ0M
「社会は情報化の夢を見る」と並行して読むと味わい深い

食べられるζ関数

http://cookpad.com/recipe/3169076

Divide + Conquer

http://www.jendodaro.info/divideandconquer/
企画展の出品作からコラージュを作ってその場で印刷する仕組み。この展示の詳細を知りたいんだけど全然情報がない。

マンバ通信

https://magazine.manba.co.jp/
スラムダンクのナレーション、もーれつア太郎のココロのボスのセリフのイントネーション。こんなマンガの読み方があったのかという驚きがある。続々増えていきます。

MUSIC FOR SAUNA

http://tokusashi.com/

カツラの葉の香り

http://blog.livedoor.jp/aroma_master/archives/51229986.html
金木犀の次はこれが来る

日曜日, 10月 02, 2016

Link list 2016-09

Experimental music notation resources

http://llllllll.co/t/experimental-music-notation-resources/149

音と波のシミュレーション集

https://phet.colorado.edu/en/simulations/category/physics/sound-and-waves
基本JavaだけどHTML5もある

{Software} Structures

http://whitney.org/Exhibitions/Artport/Commissions/SoftwareStructures
12年振りにp5.jsで再実装

JavaScript Systems Music

http://teropa.info/blog/2016/07/28/javascript-systems-music.html
Web AudioでSteve ReichとBrian Enoの曲のシステムを実装

ITPのインスピレーション

https://github.com/ITPNYU/ICM-2016/wiki/Inspiration

bees & bombs

http://codepen.io/collection/DQZBvq/
Tumblrで人気のGifアニメをHTML5で

Ichitaro Masuda

http://codepen.io/ichitaro/

OpenRefine

http://openrefine.org/
ビジュアライゼーションとかでデータを綺麗にする時にめちゃくちゃ便利

Bráulio Amado

http://www.braulioamado.net/

Tobias van Schneider › mixtapes

http://www.vanschneider.com/mixtapes/
個人的にSpotifyが日本に来てくれてよかったのはこういうプレイリストが聴けるようになったこと

土曜日, 9月 03, 2016

Link list 2016-08

an・anフードニュースのフィード

http://magazineworld.jp/anan/food-news/feed/ RSSリーダーにはこのURLで登録

Using charts and graphs : 1000 ideas for visual persuasion

https://archive.org/details/usingchartsgraph00whit

Building An Online Game: Part 1

http://www.codersblock.org/blog/2016/8/14/building-an-online-game-1

Eyeo 2016 – Ben Fry

https://vimeo.com/175846596

Golan Levin: Software (as) art

http://www.ted.com/talks/golan_levin_on_software_as_art

Making a Music System – Part 1

http://designingsound.org/2016/08/making-a-music-system-part-1/

Mathematics & Music

http://www.ams.org/samplings/math-and-music

東京ヴァージン

http://tokyo-virgin.tumblr.com/ Tumblr作った

土曜日, 8月 06, 2016

Link list 2016-07

Offscreen Magazine

http://www.offscreenmag.com/
ネットに関わる人達にフォーカスした雑誌。渋谷とか六本木で見つけたので西海岸から来た人達が読んでるのかな。

GRAPHIC #37 Introduction to computation

http://design.cmu.edu/content/graphic-37-introduction-computation-designs-kyuha-shim
素晴らしい人選。

Music Theory for Musicians and Normal People

http://tobyrush.com/theorypages/index.html

GLITCH TUTORIALS

http://danieltemkin.com/Tutorials/

The Making of "This is your brain on JavaScript"

http://codepen.io/KrofDrakula/post/the-making-of-this-is-your-brain-on-javascript

MORGENSTERN'S FINEST ICE CREAM

http://www.morgensternsnyc.com/

Programming Design Systems

https://programmingdesignsystems.com/ Rune Madsenが執筆中の本。

KIDS DAY BAND「だいだい大好き だきしめたい」

https://www.youtube.com/watch?v=fW2K8tpHXnI
姪を連れてサンリオピューロランドに行ったらパレードの音楽がいいと思って、調べたらヒャダインとかが作ってた。ディズニー的ミュージカル感とJPOPとアイドル文化が奇妙に合体。ぐてたまのアトラクションも面白かった…。知らないところでシーンができてる気がする。

金曜日, 7月 01, 2016

Link list 2016-06

Coding Rainbow

https://www.patreon.com/codingrainbow
Daniel Shiffman先生のProcessing講座。動画も素晴らしいけどパトロンになると入れるSlackにPrinting CodeRune Madsenがいたり、Nature of Codeについてのチャンネルや参加者の作品紹介チャンネルがあって刺激的。

地権者は「ゴースト」 所有者不明地という日本の難題

http://news.yahoo.co.jp/feature/212
地味だけど深刻。これのせいで獣害対策や森、山の整備もできない。

Data Spaces

https://blog.truthlabs.com/dataspaces-ad0a2bb073bd#.974nc8pp5

Casey Reasの展覧会カタログ

https://drive.google.com/file/d/0B9h469--G5OwYWt4XzF3OHNBd2M/view

GRAPHIC #37 INTRODUCTION TO COMPUTATION

http://graphicmag.kr/index.php?/issues/introduction-to-computation/

ソニー関係者以外のトイレの使用はお断りします

http://nakamuranorio.com/works/2008ideatext.html

データを活用し、地域課題を解決するコンテスト

http://park.itc.u-tokyo.ac.jp/padit/cog2016/

働き方を変えても何も変わらない「どう働く?」から「どう営む?」へ interview 西村佳哲さん - 前編 -

http://www.monosus.co.jp/posts/2016/06/000314.html

Design Debt

https://austinknight.com/writing/design-debt/ 技術的負債のデザイン版

日曜日, 6月 05, 2016

Processingで画像を読み込みたいけどファイルの数や名前が分からない場合

課題

Processingで大量の画像を読み込んで処理したかったのだけど、標準のloadImage()を使おうとするとファイル数やファイル名が予め分かっていないといけない。つまり画像ファイルを追加したり削除したりすると、それに合わせてコードも修正しなければならない訳で、保守性も効率も悪い。

解決法

JavaにFilenameFilterというインターフェースがあるので、新しくクラスを作ってacceptメソッドをオーバーライドする。

import java.io.File;
import java.io.FilenameFilter;

public class PngFileFilter implements FilenameFilter {
  @Override
  public boolean accept(File directory, String fileName) {
    if(fileName.endsWith(".png")) {
      return true;
    }
    return false;
  }
}

PngFileFilterクラスのインスタンスを作り、こんな感じでFileクラスのlistFilesメソッドに渡すと、".png"で終わるファイルが配列として返ってくる。ちなみにdataPath("")という関数を使うとdataフォルダまでのパスが取得できる。空の文字列を渡しているが、フォルダがある場合はその名前を指定できる。リファレンスに載っていないのである日突然なくなる可能性はある。

File[] imageFiles;
PngFileFilter filter;
void setup() {
  size(800, 800);
  filter = new PngFileFilter();
  imageFiles = new File(dataPath("")).listFiles(filter);
  for(File file: imageFiles) {
    println(file.getName());
  }
}

RubyとかPythonだと特定のフォルダ以下のアセットを特定の拡張子で読み込むのが簡単なので、ああいう感じの書き方にできるとより便利。他の言語や環境から学ぶことは沢山ある。

Link list 2016-05

FathomのMITでの授業

https://fathom.info/4s50/index.html

Drawing vector field

https://generateme.wordpress.com/2016/04/24/drawing-vector-field/

The Center for Genomic Gastronomy - Studying the biotechnologies and biodiversity of human food systems.

http://genomicgastronomy.com/

Killer Queen

http://killerqueenarcade.com/ 10人で遊ぶアーケードゲーム。めちゃくちゃ面白いらしい。

Conservation

https://github.com/REAS/studio/wiki/Conservation Casey Reasによるソフトウェアアートの保護について。ソースコードはガイドであって作品ではないと言っている。

MUSIC SIGNAL PROCESSING

http://www.ee.columbia.edu/~dpwe/e4896/outline.html

元Redditの人が作った荒れないコミュニティサービス

http://www.wired.com/2016/05/imzy/ 複数の人格を使い分けながら匿名性を保つ設計

渋滞のシミュレーション

http://www.traffic-simulation.de/

棒の手紙

http://homepage3.nifty.com/hirorin/bonotegami.htm 不幸の手紙がエラーを起こしながらコピーされる様子

Study for Fifteen Points – Random International

http://www.creativeapplications.net/science/study-for-fifteen-points-random-international/

Jller – Industrial automation and historical geology

http://www.creativeapplications.net/processing/jller-industrial-automation-and-historical-geology/

Study for Fifteen PointsとJllerはコンピュータを介した表現でありながらスクリーンから出るヒントを示している。正確さが強度を持つ。

土曜日, 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 女川の企画をお手伝いしました。小林先生の記事も合わせて読んで欲しいです。

日曜日, 3月 06, 2016

Link list 2016-02

レスポンシブなロゴ

https://www.behance.net/gallery/26991435/SUPERSILA 今の時代に合ったコンセプト。公式サイトもいい感じ。

何故プロフィール画像は円が適しているのか

http://uxmovement.com/thinking/why-circular-profile-pictures-accentuate-faces/

無限スクロールのジャンプゲームのサンプル

http://codepen.io/EduardoLopes/pen/IJnAr

機械学習でフォント作成

http://multithreaded.stitchfix.com/blog/2016/02/02/a-fontastic-voyage/

デザイナーのノート

http://www.fastcodesign.com/3056991/16-famous-designers-show-us-their-favorite-notebooks/ Nicholas Feltonはここ15年間無印良品のノートを使用しているらしい。「フラットに開ける、どこでもペンが挟める、ページのサイズ、グリッドの濃さと大きさがちょうどいい」

Brick.js

http://callmecavs.com/bricks.js/ Masonryから無駄な要素を削ってjQueryへの依存をなくしたもの。

Bulma

http://bulma.io Flexboxを使ったCSS Framework。上下センタリングも簡単。この作者が作ったHTMLとCSSのチュートリアルもチェック。

Google Venturesのスケッチ手法

http://www.fastcodesign.com/3057076/google-ventures-on-how-sketching-can-unlock-big-ideas

デザインにアジャイルの手法を適用する

https://medium.com/@grigs/the-power-of-responsive-design-sprints-9bccf839b30d#.7dl34b21l

SoundCloudの厳しい財務状況

http://thebridge.jp/2016/02/soundcloud-pickupnews

Laurel Halo

http://www.laurelhalo.com/ でかい文字がいい。Mixもいい。

FMOD APIを使う

http://designingsound.org/2016/02/dive-into-code-part-1-of-3/ ちょうどインタラクティブなゲーム音楽の作り方の本を読んでてFMODとかWWISEとかが使えることを知ったので調べてみたい。

PDのパッチリポジトリ

http://www.pdpatchrepo.info/

2016年のWebデザインのトレンドまとめ

http://creive.me/archives/8413/ 書きました。Link listを溜めておいて良かった案件。

日曜日, 2月 07, 2016

Link list 2016-01

とおの屋 要

http://tonoya-you.com/
発酵や熟成にかける情熱がすごい。自家醸造のどぶろくが最高。遠野はどぶろく特区としてどぶろく作りが認められている。

Google Play Musicのシティ・ポップ

https://play.google.com/music/r/m/L4b2jrx5yh5qy3rc6nalofw4et4
Google Play Musicのステーションは選曲がちょうどいい。シングルのカップリングから選んできたり、ちゃんとそのジャンルの耳で聴かないと選ばないような曲がある。

アルゴリズミックコンポジションのブログ

http://algocomp.blogspot.jp/

Visible Language

http://monoskop.org/log/?p=16182
50年続くデザイン誌がオープンアクセスに。

Folder Studio

http://folderstudio.com/
Endless 80s NYCとかMIXING BOARDとか洒落たサイトを作ってる。

2016年なのにまだこんなことやってるのリスト

http://www.troyhunt.com/2016/01/its-2016-already-how-are-websites-still.html

The Dutch institute of Food&Design

http://www.thedifd.nl/
デザイナーが考える食。面白そう。

ジャーナリズム専攻の学生にD3.jsを教えた話

http://blogger.ghostweather.com/2016/01/teaching-semester-of-d3js.html

iOSのシェアは18%くらいだけど収益はスマートフォン市場全体の92%

http://www.businessinsider.com/apple-92-percent-profits-entire-smartphone-industry-q1-samsung-2015-7

Web of ThingsとInternet of Things

http://webofthings.org/2016/01/23/wot-vs-iot-12/

人工知能とかロボットの倫理についてのPodcast

http://ethicalmachines.com/

2016年はBotがWebを食い尽くす

http://www.theverge.com/2016/1/6/10718282/internet-bots-messaging-slack-facebook-m

マンバ

http://manba.co/
ここ数ヶ月関わっているサービス。まだ完璧ではないが徐々に理想に近づいていっている。掲示板文化を今の技術やデザインで再定義するつもり。

スタートアップにおけるデザイナーの役割

https://medium.com/swlh/what-is-the-role-of-design-in-a-start-up-529fc5cba8cf#.cyhdz3246
スタートアップという訳ではないが、少人数のプロジェクトでデザイナーとしてやらなければいけないことは、ここに書かれていることと同じ。

火曜日, 1月 05, 2016

2016年に意識していくこと

食や本に顕著なのだが、去年の振り返りが完全に年の後半の出来事に偏っていた。振り返りの間隔を縮める必要を感じる。

2015年の頭に意識していくことを挙げたが、今年はどうか。

状況に合わせた情報の提示

去年は「アグリゲーションのアグリゲーション」を挙げていたが、これに関してはGoogleが良さそう。開発用にAndroid端末も購入したのでスマートウォッチもGoogle WearにしてGoogle Nowに色々任せてみるつもり。学生時代に情報の解像度とシーンに関しては考えていたが、BLEやAIなどの技術がより普及すればかなり便利になりそう。

当時のプロジェクトを率いていた入江先生も退官し、その頃の知見がどのようにアップデートされているか不明だが、せっかくなので共有しておく。

Know(知る), View(見る), Touch(触れる), Manipulate(操作する)というように、情報に対する人間の関与の深さを解像度として表している。そしてPersonal(個人), Village(仲間との共有空間), Public(公共空間), Ad hoc(状況に応じて変化する場)においてやり取りする情報を挙げている。

例えば誰かにiPhoneの画面を見せている最中に、LINEの通知が来て上部のバナーに本文が表示され、恥ずかしい思いをした経験があるだろう。設定でプレビューの表示を切り替えられるが、人間がいちいち決めるのではなく、状況に応じて最適と思われる形になっていて欲しい。

スマートウォッチやIoTと呼ばれるものの普及はこの考えを推し進めるものだ。かつては全ての情報がデスクトップコンピュータにあり、操作もそこで行う必要があった。それが少しずつ切り分けられ、通知のみであれば腕時計を見れば良く(Know)、緊急度や内容に応じてスマートフォンで確認するなり(View)、デスクに戻って作業する(Manipulate)なりのグラデーションが作られるようになった。

BasecampにWork can waitという機能がある。今すぐ返事が欲しいのか、就業時間内であれば良いのか、各自の状況に合わせて通知方法を選択する。x.aiはスケジュールの空きを見つけて最適なミーティングのスケジュールを設定してくれるが、こういうことがもっとスマートに実装されていくと、取り組むべきタスクが自動で割り振られるようになるかもしれない。便利なのか窮屈なのかは分からないが…。

Facebookも対話型の人工知能アシスタントを開発中だが、これらの流れはGUI的なコックピット型のインターフェースからCUI的なコマンド型のインターフェースへの回帰と言えるのではないだろうか。この話題についてはもう少し詳しく書きたい。

Meta Design

研究テーマみたいなのものが欲しいなと思い、何かしら中長期的に興味を持てそうな分野を調べていた。提唱しているRune Madsenによると、デザイナーは自らの手を動かして最終的な成果物を作る人で、メタデザイナーはコードを書くなどして最終成果物を作るシステムを作る人と定義している。

修士論文ではインターフェースとその積極的な誤用によってどのような創造が可能になるかを調べていた。ゲーム会社でUIデザイナーとして仕事をしていた時も、「脳と直結すればいいインターフェースというのも違うよね」という先輩プログラマーの話が引っかかっていた。

人間が想定していたものから、少しはみ出るものを作るにはどうすればよいか。

生活

去年で一気にシェアリングエコノミーが広がった(周りでホストや利用者がいる、飲み屋で耳にするなどの体感値。客観的なデータは総務省がまとめた情報通信白書が面白い)。AirBnBをインフラとして、清掃作業やメールなどの運用代行サービスを提供するビジネスも出てきた(元々のコンセプトからずれるのでやめて欲しいがそれも含めて生態系っぽい)。Sumally PocketはそのままSumallyと組み合わせて個人間のレンタルサービスにも展開できそうな気がする。これらのサービスは固定化していた資産やスキルを流動化させ、お金の動きを作ったというのが大きい。

個人的にはここまで普及したスマートフォンを利用して世の中に役立つものを作りたい。ゲームやSNSに使ってる時間やCPUでできるボランティアを可能にするような。

食に関してもシェフズテーブル的なものからSoylent的なものまで幅広く体験していきたい。そこそこお金があれば退屈しないだけのコンテンツがあり、食べるのにも困らないが、だからこそそうでない世界が見たいし、その体験を活かす方面で努力したい。