Microsoftニューヨークオフィスで行われたJavaScriptのカンファレンス「NYC JS Open Day」に行ってきた
Microsoft(マイクロソフト)がスポンサーのJavaScript(略してJS)のカンファレンスへ行ってきました。
RSVP(事前予約)があれば、誰でも無料で参加できるという太っ腹なカンファレンス。
しかもMicrosoftのニューヨーク支社へ入れるということで、それだけでワクワクして出席してきました。
NYC JS Open Day
どんなイベント?
要するに、Internet Exprolerに変わる新しいMicrosoft Edgeというブラウザについて(とJSの未来について)のカンファレンスだよ!というイメージ。
ただ、私が参加したパートはMicrosoft Edgeに関する話はなかったので、やっぱりJSとそれにまつわる話という形でした。
少しTEDのような雰囲気さえありました。TEDなんて行ったことないですが。
会場は?
Microsoftニューヨークオフィスです。タイムズスクエアにあります。
ちなみに向かいにはニューヨークポストのオフィスがあります。
エントランス。かっこいい。
受付からセキュリティゲートを抜けてエレベーターに乗るのですが・・ボタンがない・・!けれど止まりたい階で止まりました。どうしてだろう・・。
エレベーターから出るとこんな空間。かっちょいい。サーフェスに触れます。
いい感じのソファがたくさん。
パントリーもあります。
朝ごはんが出た!しかも超豪華。
ちなみに昼ごはんも出た!
Microsoft Edgeブース
フードドネーションという試みで、参加者から食べ物を集めて寄付するそうです。
カンファレンス内
プログラムは?
タイトルがないのでざっくりと・・
Daniel Mall | @danielmall Responsive Web Design
Suz Hinton | @noopkat Travis won’t accept my packages
Jed Schmidt | @jedschmidt Building BoroJS
Yotam Mann | @yotammann Interactive Music in the Browser
Mariko Kosaka | @kosamari Electroknit! - pixel to textile
以下、欠席してしまいました。
Joel Hooks | @jhooks Angular 2.0, Worth the Wait?
Jennifer Schiffer | @jennschiffer JSのコミュニティについて多分話した
Christian Heilmann | @codepo8 Microsoft Edgeのプログラムマネージャー
実は上記の通り、今回は3時頃までしか出席できなかったため、後半3つの話が聞けませんでした。Microsoft Edgeの方の話が聞けなかったのは残念・・。面白そうだったのに・・。
後日カンファレンスの動画がアップされるそうなので、それを見て追記するかもしれません。しないかもしれません。
ちなみにもらったIDカードの裏にもプログラムが。丁寧。さすが。
カンファレンスの内容
本筋からそれますが、こういう感じ、すごいと思います。
Responsive Web Design Daniel Mall | @danielmall
デザイナーがこれからすべきことをメインに、どうすれば良いプロダクトが制作できるかという話でした。
いわゆるレスポンシブデザインの話ではなかったのですが、とても興味深い内容でした。
今までの私たちはこんな感じ。
でもこれからはそれではダメ。
1.なるべく短時間で
2.抽象的な表現を避ける
3.全ては会話から始まる
全デザイナーに新しいフレームワークを定義したい。
デザイナーにはもっとプランが必要。
まずはインタビューについて述べる。
一つのプロダクトを作るのに、デザインの前にまず30人以上にインタビューをした。
Webマガジンを作るプロジェクト。
現状のナビゲーションを誰も使っていない。
雑誌を読むのは雑誌。
Webではピンタレストを見てる。
ブラウザのマガジンは見ない。 などなど
インタビューだけで何百万ドルと稼ぐことができるアイディアをもらえる。
マニュフェストについて
マニュフェストは何の言語を使うかなどではなく、これから何をして何をしないかというのを決めること。
このツールを使うことも。本当にただのブランク。
これも使ったり。
Navigationについて
ナビゲーションはマニュフェストになりうる。ないがしろにしてはいけない。
このナビゲーションを見て何のWebサイトを指しているか分かるか?
ホテル?旅行?
ニューヨークのWebサイトでした。ナビゲーションを見ると何のサイトとかちょっとでも分かる。
The Magical Short-Form Creative Brief
インベントリー(棚卸し)につて
ある銀行のサイトをリデザインした時。
ボタンだけでこんなにあることが発覚。
なので定義し直して
こんな感じに直した。
別のプロジェクトの話。
Radio Free Europe / Radio Liberty
2Gほどにしかアクセスできない人への向けたプロジェクト。
ちなみにO'reillyのサイトを目指した。(これも自分で作った)
まずはデザインを定義付け直した。
以前は22のモバイル版の記事のバリエーションがあり、こんなにいるのか?と疑問に。なので少し定義と2つのメイビー(こっちもアリかもです)を作った。
パフォーマンスについて
パフォーマンスは非常に大事。
WebPageTestという本当にすごいサイトがある。パフォーマンスをテストできる。
この概念により、現状より20%アップの速度を目指す。
こんな感じに。
ボトルネックを見つけてどんどん調整する。
ビジュアルのインベントリー(棚卸し)について
何がベストか常に考えること。
こういう風に考える。
これは子供向けのサイト。
このデザインでCNNはやっぱりおかしいでしょう。
選択する。
自身でVisual Inventoryについて作ったサイトがある。
スケッチについて
何もないところからクライアントが何をしたいのかを聞き出すには、たくさんの質問しなくてはいけない。そういう時はキーノートでイメージを持って行って確認する。(おっと、パワーポイントでw)
要素の抽出について
RFのプロジェクトの話。
まずはスケッチ。
重要になりそうなボタンを作ってみる。
配置してみる。
サイトのイメージを引用しながら配置していく。
その際にはこのサービスがオススメ。
Typecastで作ったもの。
クライアントにはこう言わせたいところ。
”それは明らかにウェブサイトではないけれど、どういう完成形になるのは分かる”
Typecast使って違いを見せたり、
それっぽく配置したり。
重要なボタンを見せることも。
そして要素を作り込んでいく。
これも参考にしてみると良い。
Visual design explorations | Clearleft
コード上でデザインすると、
デザインが出てきた時に、あれ?違う・・となることが多い。
リアルタイムでコードを変えるとデザインが変わるツール。
Bret Victorという人が作った。↓同じツールの彼のプレゼン。
本当はこうあるべきだよねという話。(このツールは世の中にはない)
プロトタイプについて
この人、ジェイミーとプロジェクトをしたけれど、すごかった。
右が完成形。なんと左がそのプロト。簡素・・・。その心は、
ジェイミーがこの考えに基づいているから。
1.プロトタイプは1時間以内に作れ。
2.最初のプロトタイプは誰でも作れるものであるべき。
3.醜く作れ。
その他も例も見て欲しい。
これはプロト。
完成形。
左がプロトで右が完成形。
醜いプロトタイプであると、もちろんそれではローンチができないので、作り直すという考えがをもとから持つことができる。
そして少しずつ発展させていく。
少しずつ慎重に変化をつける。
この段階でジェイミーは70のプロトタイプを作った。
以上のようにスケッチはただ単にPhotoshopやIllustratorでデザインをするというだけではなく、インタラクティブで多角的に作っていく必要があるのだ。
アセンブルについて
今までの工程ができていたら、この工程が一番簡単。
今まで作ってきたものを合わせればいいだけ。
Photoshopで組み立てる。
Googleドキュメントなどで定義をしていく。
Pattern labでページを組み立てる。
今までの流れをまとめるとこのような感じ。
使ったツールはこれら。
フォトショとかイラレとかでやりました。1枚絵描きましたがデザイナーではない。
いろいろななツールを使ってクライアントに見せる(魅せる)ようにしなくてはいけない。
それは例えばレディガガのよう。
歌手ではあるが、音楽や歌だけじゃない。ファッション、パフォーマンス・・言わば革命。そのようなイメージ。
以上。
Travis won’t accept my packages Suz Hinton | @noopkat
こんな感じのかわいらしい女性。
可愛いものを作ってしまうエンジニアの方。
これはIOT的な猫シューズ。
シューズからこんな情報が吐き出される。
Fitbit的なバンド。
こういうものも作った。
本題へ。テストは重要。
このテストツール良い。
Travis CI - Test and Deploy Your Code with Confidence
このような形に。
プロトをこう作り、
組み立てて、
完成!
以上。
Building BoroJS Jed Schmidt | @jedschmidt
この方、UNIQLO(もちろん日本)のGUITで働いていたそうです。
最初の方の話は、日本ではブルックリンとつけるだけでかなり受ける(ブルックリンカフェ=おしゃれなど)という話をしていました。不思議だよね〜wと。
本題。BoroJSというJSのコミュニティを形成していますというお話。
BoroJSとは
このようなニューヨーク州にある4つのJSのコミュニティを総称している。
ちなみに毎週どこかのJSのコミュニティがイベントをしている。
こんなにいる。
カラオケしたり。(どんな歌詞w Objectiv-C!)
世界各国に呼ばれたら行く。これはベルリンでの開催時の写真。
ブルックリンJSのホームページ。
(ちなみに、ニューヨークの地下鉄を模したデザインになっている)
とにかくなんだかおしゃれ・・・!
一体何の話を・・。
トピック面白いw
よく見たら会場もおしゃれ。
JSのプログラムで動くニットマシーンで作られたマフラー!(次のプレゼンがこのニットの話)
フリートークでずっとスポンサーのロゴをプロジェクターで投影したままだったwすごい宣伝効果だろうww
会場にいるみんな〜!
音楽も演奏しちゃったり。
やっぱり会場がおしゃれ。
こんなバーでやってます。
BrooklynJSのイベントをよくやっている、61 Localというバー。
オリジナルクッズも作った。コイン。
かわいい!
調子に乗ってこんなカードも作りました。(地下鉄の定期を模している)
全部本当に作るところからやっている。
ちなみにこれらがいくらかかったかというのはgitで公開しています。(おもしろいw)
このような感じでイベントしたり、
グッズ作ったりしていましたが、
売上が最初は上がっていったものの・・
前回のイベントが最悪で、$80しか売り上がらなかった・・。
なので皆さんも是非このコミュティに参加して盛り上げくださいね。
ちなみに、BaltimoreにもJSのコミュニティがある。
以上。
とにかくいろいろ超おしゃれだと思いました。日本もこうあればいいのに・・!
Interactive Music in the Browser Yotam Mann | @yotammann
作り方などを教えてくれるのかと思ったら、主に制作したものの発表でした。なので、スライドとURLが分かったものだけ。
ツ!
Electroknit! - pixel to textile Mariko Kosaka | @kosamari
日本人の方の講演でした!JSでニットマシーンを動かすことに挑戦されたそうです。
ニットの編み方はこう。
もしかして、編み物とコーディングは似てるかも!
逆からプログラミングすることは難しくないかもしれない・・!
コンピューターグラフィックはドットで描く。
でも描画のコードと言えば・・?これくらいしか知らない。
そして完成、イベントで発表!
またもカラオケタイムw
編んだものはTwitterであげてます。
会場でも実演してくださっていました。
ちなみにKosakaさんは基本JSしか知りません!と質疑応答でおっしゃっていました。
以上です!
感想:JSってなんでもできるな!すごい!
こちらもどうぞ