読者です 読者をやめる 読者になる 読者になる

ひつまぶし blog

無職。全てにおいてレベル1 。なのに今はニューヨークひとりぼっち。おなかすいた・・。

Microsoftニューヨークオフィスで行われたJavaScriptのカンファレンス「NYC JS Open Day」に行ってきた

Microsoftマイクロソフト)がスポンサーのJavaScript(略してJS)のカンファレンスへ行ってきました。

RSVP(事前予約)があれば、誰でも無料で参加できるという太っ腹なカンファレンス。

しかもMicrosoftのニューヨーク支社へ入れるということで、それだけでワクワクして出席してきました。

 NYC JS Open Day

f:id:hitsumabushiko:20151213111904j:plain

どんなイベント?

 要するに、Internet Exprolerに変わる新しいMicrosoft Edgeというブラウザについて(とJSの未来について)のカンファレンスだよ!というイメージ。

 

ただ、私が参加したパートはMicrosoft Edgeに関する話はなかったので、やっぱりJSとそれにまつわる話という形でした。

 

少しTEDのような雰囲気さえありました。TEDなんて行ったことないですが。

 

会場は?

 Microsoftニューヨークオフィスです。タイムズスクエアにあります。
ちなみに向かいにはニューヨークポストのオフィスがあります。

f:id:hitsumabushiko:20151214004925j:plain

 

エントランス。かっこいい。

f:id:hitsumabushiko:20151214004926j:plain

 

受付からセキュリティゲートを抜けてエレベーターに乗るのですが・・ボタンがない・・!けれど止まりたい階で止まりました。どうしてだろう・・。

f:id:hitsumabushiko:20151214004944j:plain

 

エレベーターから出るとこんな空間。かっちょいい。サーフェスに触れます。

f:id:hitsumabushiko:20151214004943j:plain

 

いい感じのソファがたくさん。

f:id:hitsumabushiko:20151214004929j:plain

 

パントリーもあります。

f:id:hitsumabushiko:20151214004928j:plain

 

朝ごはんが出た!しかも超豪華。

f:id:hitsumabushiko:20151214004931j:plain

 

ちなみに昼ごはんも出た!

f:id:hitsumabushiko:20151214004941j:plain

 

マイクロソフトカップ

f:id:hitsumabushiko:20151214004940j:plain

 

Microsoft Edgeブース

f:id:hitsumabushiko:20151214004933j:plain

f:id:hitsumabushiko:20151214004934j:plain

f:id:hitsumabushiko:20151214004935j:plain

 

フードドネーションという試みで、参加者から食べ物を集めて寄付するそうです。

f:id:hitsumabushiko:20151214004936j:plain

 

カンファレンス内

f:id:hitsumabushiko:20151214004937j:plain

 

プログラムは?

f:id:hitsumabushiko:20151214004927j:plain

タイトルがないのでざっくりと・・


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カードの裏にもプログラムが。丁寧。さすが。

f:id:hitsumabushiko:20151214004932j:plain

 

カンファレンスの内容 

f:id:hitsumabushiko:20151213111905j:plain

 

本筋からそれますが、こういう感じ、すごいと思います。

f:id:hitsumabushiko:20151213111907j:plain

 

Responsive Web Design Daniel Mall | @danielmall 

デザイナーがこれからすべきことをメインに、どうすれば良いプロダクトが制作できるかという話でした。
いわゆるレスポンシブデザインの話ではなかったのですが、とても興味深い内容でした。

f:id:hitsumabushiko:20151213111902j:plain

 

今までの私たちはこんな感じ。

f:id:hitsumabushiko:20151213111913j:plain

f:id:hitsumabushiko:20151213111914j:plain

 

でもこれからはそれではダメ。

f:id:hitsumabushiko:20151213111915j:plain

1.なるべく短時間で 
2.抽象的な表現を避ける 
3.全ては会話から始まる

 

全デザイナーに新しいフレームワークを定義したい。
デザイナーにはもっとプランが必要。

 

まずはインタビューについて述べる。

f:id:hitsumabushiko:20151213111917j:plain

一つのプロダクトを作るのに、デザインの前にまず30人以上にインタビューをした。

 

Webマガジンを作るプロジェクト。

f:id:hitsumabushiko:20151213111922j:plain

現状のナビゲーションを誰も使っていない。
雑誌を読むのは雑誌。
Webではピンタレストを見てる。
ブラウザのマガジンは見ない。 などなど

インタビューだけで何百万ドルと稼ぐことができるアイディアをもらえる。

 

マニュフェストについて

f:id:hitsumabushiko:20151213111924j:plain

マニュフェストは何の言語を使うかなどではなく、これから何をして何をしないかというのを決めること。

 

このツールを使うことも。本当にただのブランク。

f:id:hitsumabushiko:20151213111920j:plain

 

これも使ったり。

f:id:hitsumabushiko:20151213111921j:plain

 

Navigationについて

f:id:hitsumabushiko:20151213111926j:plain

ナビゲーションはマニュフェストになりうる。ないがしろにしてはいけない。

 

このナビゲーションを見て何のWebサイトを指しているか分かるか?

f:id:hitsumabushiko:20151213111925j:plain

ホテル?旅行?

 

ニューヨークのWebサイトでした。ナビゲーションを見ると何のサイトとかちょっとでも分かる。

f:id:hitsumabushiko:20151213111927j:plain

 

The Magical Short-Form Creative Brief

f:id:hitsumabushiko:20151213111928j:plain

 

インベントリー(棚卸し)につて

f:id:hitsumabushiko:20151213111930j:plain

 

ある銀行のサイトをリデザインした時。
ボタンだけでこんなにあることが発覚。

f:id:hitsumabushiko:20151213111931j:plain

 

なので定義し直して

f:id:hitsumabushiko:20151213111933j:plain

 

こんな感じに直した。

f:id:hitsumabushiko:20151213111934j:plain

f:id:hitsumabushiko:20151213111932j:plain

 

別のプロジェクトの話。

f:id:hitsumabushiko:20151213111938j:plain

Radio Free Europe / Radio Liberty
2Gほどにしかアクセスできない人への向けたプロジェクト。

 

ちなみにO'reillyのサイトを目指した。(これも自分で作った)

f:id:hitsumabushiko:20151213111935j:plain

Data - O'Reilly Media

 

まずはデザインを定義付け直した。
以前は22のモバイル版の記事のバリエーションがあり、こんなにいるのか?と疑問に。なので少し定義と2つのメイビー(こっちもアリかもです)を作った。

f:id:hitsumabushiko:20151213111936j:plain

f:id:hitsumabushiko:20151213111937j:plain

 

パフォーマンスについて

f:id:hitsumabushiko:20151213111939j:plain

パフォーマンスは非常に大事。

 

WebPageTestという本当にすごいサイトがある。パフォーマンスをテストできる。

f:id:hitsumabushiko:20151213111940j:plain

f:id:hitsumabushiko:20151213111941j:plain

 

f:id:hitsumabushiko:20151213111943j:plain

この概念により、現状より20%アップの速度を目指す。

 

こんな感じに。

f:id:hitsumabushiko:20151213111944j:plain

 

 

ボトルネックを見つけてどんどん調整する。

f:id:hitsumabushiko:20151213111947j:plain

f:id:hitsumabushiko:20151213111948j:plain

f:id:hitsumabushiko:20151213111949j:plain

 

f:id:hitsumabushiko:20151213111951j:plain

f:id:hitsumabushiko:20151213111950j:plain

 

 

ビジュアルのインベントリー(棚卸し)について

 

何がベストか常に考えること。

f:id:hitsumabushiko:20151213111953j:plain

 

こういう風に考える。

f:id:hitsumabushiko:20151213111957j:plain

 

これは子供向けのサイト。

f:id:hitsumabushiko:20151213111955j:plain

 

このデザインでCNNはやっぱりおかしいでしょう。

f:id:hitsumabushiko:20151213111956j:plain

 

選択する。

f:id:hitsumabushiko:20151213111958j:plain

 

自身でVisual Inventoryについて作ったサイトがある。

f:id:hitsumabushiko:20151213111959j:plain

 

スケッチについて

f:id:hitsumabushiko:20151213112001j:plain

f:id:hitsumabushiko:20151213112000j:plain

何もないところからクライアントが何をしたいのかを聞き出すには、たくさんの質問しなくてはいけない。そういう時はキーノートでイメージを持って行って確認する。(おっと、パワーポイントでw

 

要素の抽出について

 

RFのプロジェクトの話。

f:id:hitsumabushiko:20151213112003j:plain

 

まずはスケッチ。

f:id:hitsumabushiko:20151213112004j:plain

f:id:hitsumabushiko:20151213112006j:plain

 

重要になりそうなボタンを作ってみる。

f:id:hitsumabushiko:20151213112008j:plain

f:id:hitsumabushiko:20151213112005j:plain

f:id:hitsumabushiko:20151213112009j:plain

f:id:hitsumabushiko:20151213112011j:plain

配置してみる。

f:id:hitsumabushiko:20151213112012j:plain

f:id:hitsumabushiko:20151213112013j:plain

 

サイトのイメージを引用しながら配置していく。

f:id:hitsumabushiko:20151213112010j:plain

 

その際にはこのサービスがオススメ。

f:id:hitsumabushiko:20151213112017j:plain

 

Typecastで作ったもの。

f:id:hitsumabushiko:20151213112016j:plain

 

クライアントにはこう言わせたいところ。

f:id:hitsumabushiko:20151213112015j:plain

”それは明らかにウェブサイトではないけれど、どういう完成形になるのは分かる”

 

Typecast使って違いを見せたり、

f:id:hitsumabushiko:20151213112018j:plain

 

それっぽく配置したり。

f:id:hitsumabushiko:20151213112014j:plain

 

重要なボタンを見せることも。

f:id:hitsumabushiko:20151213112020j:plain

f:id:hitsumabushiko:20151213112021j:plain

f:id:hitsumabushiko:20151213112022j:plain

 

そして要素を作り込んでいく。

f:id:hitsumabushiko:20151213112025j:plain

f:id:hitsumabushiko:20151213112026j:plain

 

これも参考にしてみると良い。
Visual design explorations | Clearleft

f:id:hitsumabushiko:20151213112023j:plain

 

コード上でデザインすると、

f:id:hitsumabushiko:20151213112029j:plain

デザインが出てきた時に、あれ?違う・・となることが多い。

f:id:hitsumabushiko:20151213112028j:plain

 

リアルタイムでコードを変えるとデザインが変わるツール

f:id:hitsumabushiko:20151213112031j:plain

f:id:hitsumabushiko:20151213112030j:plain

Bret Victorという人が作った。↓同じツールの彼のプレゼン。

本当はこうあるべきだよねという話。(このツールは世の中にはない)

 

プロトタイプについて

f:id:hitsumabushiko:20151213112035j:plain

この人、ジェイミーとプロジェクトをしたけれど、すごかった。

 

右が完成形。なんと左がそのプロト。簡素・・・。その心は、

f:id:hitsumabushiko:20151213112037j:plain

 

ジェイミーがこの考えに基づいているから。

f:id:hitsumabushiko:20151213112036j:plain

1.プロトタイプは1時間以内に作れ。
2.最初のプロトタイプは誰でも作れるものであるべき。
3.醜く作れ。

 

その他も例も見て欲しい。

 

これはプロト。

f:id:hitsumabushiko:20151213112042j:plain

完成形。

f:id:hitsumabushiko:20151213112040j:plain

左がプロトで右が完成形。

f:id:hitsumabushiko:20151213112038j:plain

醜いプロトタイプであると、もちろんそれではローンチができないので、作り直すという考えがをもとから持つことができる。

 

そして少しずつ発展させていく。

f:id:hitsumabushiko:20151213112043j:plain

f:id:hitsumabushiko:20151213112044j:plain

f:id:hitsumabushiko:20151213112045j:plain

f:id:hitsumabushiko:20151213112047j:plain

f:id:hitsumabushiko:20151213112049j:plain

 

少しずつ慎重に変化をつける。

f:id:hitsumabushiko:20151213112051j:plain

f:id:hitsumabushiko:20151213112052j:plain

f:id:hitsumabushiko:20151213112054j:plain

この段階でジェイミーは70のプロトタイプを作った。

 

以上のようにスケッチはただ単にPhotoshopIllustratorでデザインをするというだけではなく、インタラクティブで多角的に作っていく必要があるのだ。

f:id:hitsumabushiko:20151213112055j:plain

 

アセンブルについて

f:id:hitsumabushiko:20151213112056j:plain

今までの工程ができていたら、この工程が一番簡単。

今まで作ってきたものを合わせればいいだけ。

f:id:hitsumabushiko:20151213112057j:plain

 

Photoshopで組み立てる。

f:id:hitsumabushiko:20151213112059j:plain

 

Googleドキュメントなどで定義をしていく。

f:id:hitsumabushiko:20151213112102j:plain

f:id:hitsumabushiko:20151213112103j:plain

 

Pattern labでページを組み立てる。

f:id:hitsumabushiko:20151213112101j:plain

 

 

今までの流れをまとめるとこのような感じ。

f:id:hitsumabushiko:20151213112105j:plain

 

使ったツールはこれら。

f:id:hitsumabushiko:20151213112106j:plain

フォトショとかイラレとかでやりました。1枚絵描きましたがデザイナーではない。
いろいろななツールを使ってクライアントに見せる(魅せる)ようにしなくてはいけない。

それは例えばレディガガのよう。
歌手ではあるが、音楽や歌だけじゃない。ファッション、パフォーマンス・・言わば革命。そのようなイメージ。

 

以上。

 

Travis won’t accept my packages Suz Hinton | @noopkat

f:id:hitsumabushiko:20151213112129j:plain

こんな感じのかわいらしい女性。

 

f:id:hitsumabushiko:20151213112108j:plain

 

可愛いものを作ってしまうエンジニアの方。

これはIOT的な猫シューズ。

f:id:hitsumabushiko:20151213112109j:plain

シューズからこんな情報が吐き出される。

f:id:hitsumabushiko:20151213112111j:plain

 

Fitbit的なバンド。

f:id:hitsumabushiko:20151213112110j:plain

 

こういうものも作った。

f:id:hitsumabushiko:20151213112112j:plain

 

 

本題へ。テストは重要。

f:id:hitsumabushiko:20151213112114j:plain

f:id:hitsumabushiko:20151213112115j:plain

f:id:hitsumabushiko:20151213112117j:plain

f:id:hitsumabushiko:20151213112119j:plain

f:id:hitsumabushiko:20151213112118j:plain

 

このテストツール良い。

f:id:hitsumabushiko:20151213112120j:plain

Travis CI - Test and Deploy Your Code with Confidence

 

このような形に。

f:id:hitsumabushiko:20151213112121j:plain

f:id:hitsumabushiko:20151213112124j:plain

f:id:hitsumabushiko:20151213112125j:plain

f:id:hitsumabushiko:20151213112122j:plain

f:id:hitsumabushiko:20151213112123j:plain

 

プロトをこう作り、

f:id:hitsumabushiko:20151213112127j:plain

組み立てて、

f:id:hitsumabushiko:20151213112126j:plain

完成!

f:id:hitsumabushiko:20151213112128j:plain

f:id:hitsumabushiko:20151213112136j:plain

f:id:hitsumabushiko:20151213112132j:plain

f:id:hitsumabushiko:20151213112133j:plain

f:id:hitsumabushiko:20151213112134j:plain

 

以上。

 

Building BoroJS Jed Schmidt | @jedschmidt

f:id:hitsumabushiko:20151214004937j:plain

この方、UNIQLO(もちろん日本)のGUITで働いていたそうです。
最初の方の話は、日本ではブルックリンとつけるだけでかなり受ける(ブルックリンカフェ=おしゃれなど)という話をしていました。不思議だよね〜wと。

 

本題。BoroJSというJSのコミュニティを形成していますというお話。

f:id:hitsumabushiko:20151213112137j:plain

 

BoroJSとは

f:id:hitsumabushiko:20151213112139j:plain

このようなニューヨーク州にある4つのJSのコミュニティを総称している。

 

ちなみに毎週どこかのJSのコミュニティがイベントをしている。

f:id:hitsumabushiko:20151213112140j:plain

 

こんなにいる。

f:id:hitsumabushiko:20151213112141j:plain

 

カラオケしたり。(どんな歌詞w Objectiv-C!)

f:id:hitsumabushiko:20151213112143j:plain

 

世界各国に呼ばれたら行く。これはベルリンでの開催時の写真。

f:id:hitsumabushiko:20151213112142j:plain

 

ブルックリンJSのホームページ。
(ちなみに、ニューヨークの地下鉄を模したデザインになっている)

f:id:hitsumabushiko:20151213112145j:plain

 

とにかくなんだかおしゃれ・・・!

f:id:hitsumabushiko:20151213112146j:plain

 

一体何の話を・・。

f:id:hitsumabushiko:20151213112150j:plain

 

トピック面白いw

f:id:hitsumabushiko:20151213112147j:plain

 

よく見たら会場もおしゃれ。

f:id:hitsumabushiko:20151213112149j:plain

 

JSのプログラムで動くニットマシーンで作られたマフラー!(次のプレゼンがこのニットの話)

f:id:hitsumabushiko:20151213112151j:plain

 

フリートークでずっとスポンサーのロゴをプロジェクターで投影したままだったwすごい宣伝効果だろうww

f:id:hitsumabushiko:20151213112155j:plain

 

会場にいるみんな〜!

f:id:hitsumabushiko:20151213112153j:plain

 

音楽も演奏しちゃったり。

f:id:hitsumabushiko:20151213112154j:plain

 

やっぱり会場がおしゃれ。

f:id:hitsumabushiko:20151213112152j:plain

 

こんなバーでやってます。

f:id:hitsumabushiko:20151213112158j:plain

 

BrooklynJSのイベントをよくやっている、61 Localというバー。

f:id:hitsumabushiko:20151213112159j:plain

f:id:hitsumabushiko:20151213112157j:plain

 

オリジナルクッズも作った。コイン。

f:id:hitsumabushiko:20151213112202j:plain

 

かわいい!

f:id:hitsumabushiko:20151213112201j:plain

 

調子に乗ってこんなカードも作りました。(地下鉄の定期を模している)

f:id:hitsumabushiko:20151213112203j:plain

 

全部本当に作るところからやっている。

f:id:hitsumabushiko:20151213112204j:plain

 

ちなみにこれらがいくらかかったかというのはgitで公開しています。(おもしろいw)

f:id:hitsumabushiko:20151213112206j:plain

 

このような感じでイベントしたり、

f:id:hitsumabushiko:20151213112208j:plain

 

グッズ作ったりしていましたが、

f:id:hitsumabushiko:20151213112207j:plain

 

売上が最初は上がっていったものの・・

f:id:hitsumabushiko:20151213112205j:plain

前回のイベントが最悪で、$80しか売り上がらなかった・・。
なので皆さんも是非このコミュティに参加して盛り上げくださいね。

 

ちなみに、BaltimoreにもJSのコミュニティがある。

f:id:hitsumabushiko:20151213112209j:plain

 

以上。

 

とにかくいろいろ超おしゃれだと思いました。日本もこうあればいいのに・・!

 

Interactive Music in the Browser Yotam Mann | @yotammann 

作り方などを教えてくれるのかと思ったら、主に制作したものの発表でした。なので、スライドとURLが分かったものだけ。

f:id:hitsumabushiko:20151213112210j:plain

f:id:hitsumabushiko:20151213112212j:plain

f:id:hitsumabushiko:20151213112213j:plain

f:id:hitsumabushiko:20151213112214j:plain

f:id:hitsumabushiko:20151213112217j:plain

f:id:hitsumabushiko:20151213112215j:plain

 

Tonejs/Tone.js · GitHub

f:id:hitsumabushiko:20151213112218j:plain

f:id:hitsumabushiko:20151213112216j:plain

f:id:hitsumabushiko:20151213112219j:plain

f:id:hitsumabushiko:20151213112220j:plain 

Tonejs/Presets · GitHub

f:id:hitsumabushiko:20151213112222j:plain

f:id:hitsumabushiko:20151213112221j:plain

f:id:hitsumabushiko:20151213112223j:plain

 

YUME

f:id:hitsumabushiko:20151213112224j:plain

 

ツ!

f:id:hitsumabushiko:20151213112226j:plain

f:id:hitsumabushiko:20151213112225j:plain

 

Electroknit! - pixel to textile Mariko Kosaka | @kosamari

日本人の方の講演でした!JSでニットマシーンを動かすことに挑戦されたそうです。

f:id:hitsumabushiko:20151213112227j:plain

 

ニットの編み方はこう。

f:id:hitsumabushiko:20151213112231j:plain

 

もしかして、編み物とコーディングは似てるかも!

f:id:hitsumabushiko:20151213112229j:plain

f:id:hitsumabushiko:20151213112232j:plain

f:id:hitsumabushiko:20151213112230j:plain

 

逆からプログラミングすることは難しくないかもしれない・・!

f:id:hitsumabushiko:20151213112235j:plain

f:id:hitsumabushiko:20151213112233j:plain

f:id:hitsumabushiko:20151213112237j:plain

f:id:hitsumabushiko:20151213112236j:plain

f:id:hitsumabushiko:20151213112234j:plain

f:id:hitsumabushiko:20151213112239j:plain

f:id:hitsumabushiko:20151213112238j:plain

f:id:hitsumabushiko:20151213112241j:plainコンピューターグラフィックはドットで描く。

 

f:id:hitsumabushiko:20151213112240j:plain

 

でも描画のコードと言えば・・?これくらいしか知らない。

f:id:hitsumabushiko:20151213112242j:plain

f:id:hitsumabushiko:20151213112243j:plain

f:id:hitsumabushiko:20151213112244j:plain

f:id:hitsumabushiko:20151213112246j:plain

f:id:hitsumabushiko:20151213112245j:plain

f:id:hitsumabushiko:20151213112247j:plain

f:id:hitsumabushiko:20151213112251j:plain

f:id:hitsumabushiko:20151213112250j:plain

f:id:hitsumabushiko:20151213112248j:plain

f:id:hitsumabushiko:20151213112252j:plain

f:id:hitsumabushiko:20151213112255j:plain

f:id:hitsumabushiko:20151213112253j:plain

f:id:hitsumabushiko:20151213112256j:plain

f:id:hitsumabushiko:20151213112254j:plain

f:id:hitsumabushiko:20151213112301j:plain

 

そして完成、イベントで発表!

f:id:hitsumabushiko:20151213112258j:plain

またもカラオケタイムw

f:id:hitsumabushiko:20151213112259j:plain

f:id:hitsumabushiko:20151213112302j:plain

f:id:hitsumabushiko:20151213112300j:plain

f:id:hitsumabushiko:20151213112304j:plain

f:id:hitsumabushiko:20151213112303j:plain

f:id:hitsumabushiko:20151213112305j:plain

 

編んだものはTwitterであげてます。

f:id:hitsumabushiko:20151213112306j:plain

 

会場でも実演してくださっていました。

f:id:hitsumabushiko:20151214004942j:plain

 

ちなみにKosakaさんは基本JSしか知りません!と質疑応答でおっしゃっていました。

 

以上です!

 

感想:JSってなんでもできるな!すごい!

 

こちらもどうぞ

よくわかるJavaScriptの教科書

よくわかるJavaScriptの教科書