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/
https://aiexperiments.withgoogle.com/drum-machine
ここからさらに良くなりそう
https://medium.com/@studionora/never-twice-the-same-credits-d656f78ed6e1#.pii24u78g
毎回変わるタイトルシーケンス。正しいプロトタイピング。
動画再生とゲームっぽいものが必要な納期めちゃきつ案件があって、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に変更すると使えるようになる。
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」にしたら動かせた。
何か作ったらまた書く。
http://www.nhk.or.jp/chiiki/index.html
http://ianstewartjoat.weebly.com/manifold-magazine.html
http://mognavi.jp/
最近はこういうサービスが気になる
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
http://www.jendodaro.info/divideandconquer/
企画展の出品作からコラージュを作ってその場で印刷する仕組み。この展示の詳細を知りたいんだけど全然情報がない。
https://magazine.manba.co.jp/
スラムダンクのナレーション、もーれつア太郎のココロのボスのセリフのイントネーション。こんなマンガの読み方があったのかという驚きがある。続々増えていきます。
http://blog.livedoor.jp/aroma_master/archives/51229986.html
金木犀の次はこれが来る
http://llllllll.co/t/experimental-music-notation-resources/149
https://phet.colorado.edu/en/simulations/category/physics/sound-and-waves
基本JavaだけどHTML5もある
http://whitney.org/Exhibitions/Artport/Commissions/SoftwareStructures
12年振りにp5.jsで再実装
http://teropa.info/blog/2016/07/28/javascript-systems-music.html
Web AudioでSteve ReichとBrian Enoの曲のシステムを実装
https://github.com/ITPNYU/ICM-2016/wiki/Inspiration
http://codepen.io/collection/DQZBvq/
Tumblrで人気のGifアニメをHTML5で
http://openrefine.org/
ビジュアライゼーションとかでデータを綺麗にする時にめちゃくちゃ便利
http://www.vanschneider.com/mixtapes/
個人的にSpotifyが日本に来てくれてよかったのはこういうプレイリストが聴けるようになったこと
http://magazineworld.jp/anan/food-news/feed/ RSSリーダーにはこのURLで登録
https://archive.org/details/usingchartsgraph00whit
http://www.codersblock.org/blog/2016/8/14/building-an-online-game-1
http://www.ted.com/talks/golan_levin_on_software_as_art
http://designingsound.org/2016/08/making-a-music-system-part-1/
http://www.ams.org/samplings/math-and-music
http://tokyo-virgin.tumblr.com/ Tumblr作った
http://www.offscreenmag.com/
ネットに関わる人達にフォーカスした雑誌。渋谷とか六本木で見つけたので西海岸から来た人達が読んでるのかな。
http://design.cmu.edu/content/graphic-37-introduction-computation-designs-kyuha-shim
素晴らしい人選。
http://tobyrush.com/theorypages/index.html
http://danieltemkin.com/Tutorials/
http://codepen.io/KrofDrakula/post/the-making-of-this-is-your-brain-on-javascript
http://www.morgensternsnyc.com/
https://programmingdesignsystems.com/ Rune Madsenが執筆中の本。
https://www.youtube.com/watch?v=fW2K8tpHXnI
姪を連れてサンリオピューロランドに行ったらパレードの音楽がいいと思って、調べたらヒャダインとかが作ってた。ディズニー的ミュージカル感とJPOPとアイドル文化が奇妙に合体。ぐてたまのアトラクションも面白かった…。知らないところでシーンができてる気がする。
https://www.patreon.com/codingrainbow
Daniel Shiffman先生のProcessing講座。動画も素晴らしいけどパトロンになると入れるSlackにPrinting CodeのRune Madsenがいたり、Nature of Codeについてのチャンネルや参加者の作品紹介チャンネルがあって刺激的。
http://news.yahoo.co.jp/feature/212
地味だけど深刻。これのせいで獣害対策や森、山の整備もできない。
https://blog.truthlabs.com/dataspaces-ad0a2bb073bd#.974nc8pp5
https://drive.google.com/file/d/0B9h469--G5OwYWt4XzF3OHNBd2M/view
http://graphicmag.kr/index.php?/issues/introduction-to-computation/
http://nakamuranorio.com/works/2008ideatext.html
http://park.itc.u-tokyo.ac.jp/padit/cog2016/
http://www.monosus.co.jp/posts/2016/06/000314.html
https://austinknight.com/writing/design-debt/ 技術的負債のデザイン版
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だと特定のフォルダ以下のアセットを特定の拡張子で読み込むのが簡単なので、ああいう感じの書き方にできるとより便利。他の言語や環境から学ぶことは沢山ある。
https://fathom.info/4s50/index.html
https://generateme.wordpress.com/2016/04/24/drawing-vector-field/
http://killerqueenarcade.com/ 10人で遊ぶアーケードゲーム。めちゃくちゃ面白いらしい。
https://github.com/REAS/studio/wiki/Conservation Casey Reasによるソフトウェアアートの保護について。ソースコードはガイドであって作品ではないと言っている。
http://www.ee.columbia.edu/~dpwe/e4896/outline.html
http://www.wired.com/2016/05/imzy/ 複数の人格を使い分けながら匿名性を保つ設計
http://www.traffic-simulation.de/
http://homepage3.nifty.com/hirorin/bonotegami.htm 不幸の手紙がエラーを起こしながらコピーされる様子
http://www.creativeapplications.net/science/study-for-fifteen-points-random-international/
http://www.creativeapplications.net/processing/jller-industrial-automation-and-historical-geology/
Study for Fifteen PointsとJllerはコンピュータを介した表現でありながらスクリーンから出るヒントを示している。正確さが強度を持つ。
http://knowledge.wharton.upenn.edu/article/small-data-new-big-data/
ビッグデータの逆でスモールデータって何かあるのかなと思って調べたらあった。今考えてることとリンクしそうな気はする。
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
http://omake-club.com/artist/zombie-chang.html 「蓮沼執太メロディーズ・ツアー2016」で初めて聴いた。リリース音源もかっこいいけど全体的にローファイでチープな印象なので、あの日のライブの時みたいにクリアかつ太い音でもっと聴きたい。
https://medium.com/@williamngan/taking-a-line-for-a-walk-6fd947acb227#.i9m4d538k
https://www.youtube.com/watch?v=7bPQ9L0hvXM&list=PL64OnOdZ_3NGD4qvRucx7BpKUZ-IqGc0Q
http://samplinglove.blog94.fc2.com/blog-entry-2605.html いいMix
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がそのまま追従してくれる。
http://www.openculture.com/2016/03/3900-pages-of-paul-klees-personal-notebooks-are-now-online.html
https://www.kickstarter.com/projects/423153472/bela-an-embedded-platform-for-low-latency-interact
https://github.com/codeforamerica/civic-tech-patterns
http://aidiary.hatenablog.com/entry/20091003/1254574041
https://www.viget.com/articles/instagram-style-filters-in-html5-canvas
https://www.good.is/articles/plants-know-being-eaten センシングしてみたい
https://codewords.recurse.com/issues/six/image-processing-101 画像処理入門。他の記事も面白い。
https://medium.com/@ArtificialExperience/creativeai-9d4b2346faf3#.tnbtpudcn
https://medium.com/@activetheory/chrome-music-lab-making-kandinsky-7de5ab04f4fe#.870n2ehok
http://www.mori.art.museum/contents/roppongix2016/ 山城くんの作品に映像を提供しました。
https://www.innovationtohoku.com/
リニューアルの設計や、Field Hack 女川の企画をお手伝いしました。小林先生の記事も合わせて読んで欲しいです。
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年間無印良品のノートを使用しているらしい。「フラットに開ける、どこでもペンが挟める、ページのサイズ、グリッドの濃さと大きさがちょうどいい」
http://callmecavs.com/bricks.js/ Masonryから無駄な要素を削ってjQueryへの依存をなくしたもの。
http://bulma.io Flexboxを使ったCSS Framework。上下センタリングも簡単。この作者が作ったHTMLとCSSのチュートリアルもチェック。
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
http://thebridge.jp/2016/02/soundcloud-pickupnews
http://www.laurelhalo.com/ でかい文字がいい。Mixもいい。
http://designingsound.org/2016/02/dive-into-code-part-1-of-3/ ちょうどインタラクティブなゲーム音楽の作り方の本を読んでてFMODとかWWISEとかが使えることを知ったので調べてみたい。
http://creive.me/archives/8413/ 書きました。Link listを溜めておいて良かった案件。
http://tonoya-you.com/
発酵や熟成にかける情熱がすごい。自家醸造のどぶろくが最高。遠野はどぶろく特区としてどぶろく作りが認められている。
https://play.google.com/music/r/m/L4b2jrx5yh5qy3rc6nalofw4et4
Google Play Musicのステーションは選曲がちょうどいい。シングルのカップリングから選んできたり、ちゃんとそのジャンルの耳で聴かないと選ばないような曲がある。
http://monoskop.org/log/?p=16182
50年続くデザイン誌がオープンアクセスに。
http://folderstudio.com/
Endless 80s NYCとかMIXING BOARDとか洒落たサイトを作ってる。
http://www.troyhunt.com/2016/01/its-2016-already-how-are-websites-still.html
http://www.thedifd.nl/
デザイナーが考える食。面白そう。
http://blogger.ghostweather.com/2016/01/teaching-semester-of-d3js.html
http://www.businessinsider.com/apple-92-percent-profits-entire-smartphone-industry-q1-samsung-2015-7
http://webofthings.org/2016/01/23/wot-vs-iot-12/
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
スタートアップという訳ではないが、少人数のプロジェクトでデザイナーとしてやらなければいけないことは、ここに書かれていることと同じ。
食や本に顕著なのだが、去年の振り返りが完全に年の後半の出来事に偏っていた。振り返りの間隔を縮める必要を感じる。
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的なコマンド型のインターフェースへの回帰と言えるのではないだろうか。この話題についてはもう少し詳しく書きたい。
研究テーマみたいなのものが欲しいなと思い、何かしら中長期的に興味を持てそうな分野を調べていた。提唱しているRune Madsenによると、デザイナーは自らの手を動かして最終的な成果物を作る人で、メタデザイナーはコードを書くなどして最終成果物を作るシステムを作る人と定義している。
修士論文ではインターフェースとその積極的な誤用によってどのような創造が可能になるかを調べていた。ゲーム会社でUIデザイナーとして仕事をしていた時も、「脳と直結すればいいインターフェースというのも違うよね」という先輩プログラマーの話が引っかかっていた。
人間が想定していたものから、少しはみ出るものを作るにはどうすればよいか。
去年で一気にシェアリングエコノミーが広がった(周りでホストや利用者がいる、飲み屋で耳にするなどの体感値。客観的なデータは総務省がまとめた情報通信白書が面白い)。AirBnBをインフラとして、清掃作業やメールなどの運用代行サービスを提供するビジネスも出てきた(元々のコンセプトからずれるのでやめて欲しいがそれも含めて生態系っぽい)。Sumally PocketはそのままSumallyと組み合わせて個人間のレンタルサービスにも展開できそうな気がする。これらのサービスは固定化していた資産やスキルを流動化させ、お金の動きを作ったというのが大きい。
個人的にはここまで普及したスマートフォンを利用して世の中に役立つものを作りたい。ゲームやSNSに使ってる時間やCPUでできるボランティアを可能にするような。
食に関してもシェフズテーブル的なものからSoylent的なものまで幅広く体験していきたい。そこそこお金があれば退屈しないだけのコンテンツがあり、食べるのにも困らないが、だからこそそうでない世界が見たいし、その体験を活かす方面で努力したい。