第5回 UZABASE TALK

久しぶりのブログ更新です。
はじめまして技術チームの外間（ほかま）です。

ユーザベースでは、たびたび外部を招いての合同勉強会を行っていますが、この度『UZABASE TALK』と題しまして第5回目の勉強会を開催しました。

※過去の勉強会の様子はこちら
第一回技術勉強会、第二回技術勉強会

今回は社内から5名、外部からYahoo、LIVESENSEの4名と計9名の方にご登壇いただき、
オーディエンスとしてookamiにご参加いただきました。
また、初めて社内ではなく、外部のパーティースペースをお借りして開催しました。
回を重ねるに連れて順調に規模も大きくなってきています！

今回の勉強会のテーマは「HTML5」

HTML5に対応するブラウザが普及しだし、旧来のブラウザでは表現できなかったことが
出来るようになってきている今、自社のサービスにどのようにHTML5の技術を取り入れることが出来るか、
また、それによってユーザに対してどのような新しい体験を提供することが出来るか、勉強会を通して情報の交換の場を作りたい。というのが今回の勉強会の狙いです。

では当日の様子をご紹介していきます。


会の開始を待つ間、参加者の皆さんは会場に用意された軽食やドリンクをつまみつつ、ざっくばらんに会話を楽しんでいます。



お酒を飲みながらお互いに自己紹介などしつつ、いい雰囲気です。



そしていよいよ会がスタート。今回はこのような流れで進みます。



まずはプレゼンテーションからスタートです。

＜プレゼンテーション＞ 

1.「安全なID連携のハウツー」　倉林さん@Yahoo

最近、セキュリティが問題視されているID関連から、高セキュリティと低コストを両立した効率的なID連携方法について解説いただきました。

ID管理は我々にとっても重要な要素なので、とても興味深い内容でした。

安全なID連携のハウツー からマサルKurahayashi

2.「データビジュアライゼーション - dc.jsで遊ぼう -」　清水さん@UZABASE

dc.jsを用いて、グラフなどのデータをより動的に表現する方法について解説いただきました。

1つのイベントに連動して複数のグラフが動的に表示されるデモはとても刺激的でした。

データビジュアライゼーション Dc.jsで遊ぼう - 清水

3.「HTML5とスマートフォンと3Dと」　竹内さん＠UZABASE

我らがチーフテクノロジストである竹内さんには、HTML5でスマートフォン用のネイティブアプリを構築出来る"Apache Cordova"および、その上で更にWebGLを利用した3Dライブラリである"three.js"を動かすというデモをしていただきました。

※資料は事情により公開できません。



途中に休憩を挟んで、後半からはLT（Lightning Talk）です。

<LT（ライトニングトーク）>

1「HTML5時代のClojureScript」松下さん@LIVESENSE

Clojure言語をHTML5で活かす実践方法について解説いただきました。

メリット、デメリットを面白おかしく解説いただき、会場もとても盛り上がっていました。

Clojureは括弧が多いので慣れないとつらいということがよく分かりました。笑

※資料は事情により公開できません。

2「ウェブStrage」島川さん@LIVESENSE

クッキーに代わるデータ保存の仕組みとして利用できる"Web Strage"について、具体的な活用方法を解説いただきました。

※資料は事情により公開できません。

3.「JSでアニメーション頑張ってみた 」　植村さん@LIVESENSE

最近ブラウザでサポートされだしたHTML5の新機能"Web Animations"によるアニメーション作成について解説いただきました。

日頃やられているというスケートボードをモチーフにしたアニメーションでデモを行ったりと、独創的でとても刺激になる内容でした。

※資料は事情により公開できません。

4.「あなたのメンタルモデルあってますか？ 」　矢野さん@シェルフ

新しい技術に取り組む上で、誤解から生じる思わぬ落とし穴をご自身の経験から解説いただきました。

効率よく、バグのないシステムを開発するためのメンタルモデルの大事さを改めて考えさせられました。

あなたのメンタルモデルあってますか？ 矢野

5.「SPDYを触ってみる」　羽山さん@UZABASE

GoogleがWebの表示を高速化するために提唱しているプロトコル「SPDY」がどのようなものなのかデモを含めつつ簡単に解説いただきました。
今後動的なWebコンテンツが増えていく上で、表示の高速化も必要になる、というインフラ担当ならではの着眼点です！

Spdyを触ってみる 羽山

6.「HTML5のHTML5によるHTML5のためのクイズ 」　杉浦さん@UZABASE

クイズ形式でHTML5について解説いただきました。

杉浦さんお得意のリアルタイム参加型で、会の締めくくりに相応しい大きな盛り上がりとなりました！

※資料は事情により公開できません。


勉強会終了後は有志で懇親会へと流れ、引き続きお酒を飲みながら（この会は最初から最後までずっと飲んでますね）社内外を通した技術、思想の共有が出来ました。


今回の勉強会はHTML5というテーマをベースに、ID管理から言語紹介、インフラ、プログラミングをする上での考え方まで幅広い内容で、とても充実した会となりました。

今後もニーズにあった内容で、ユーザベースらしい親しみやすい雰囲気の、更に充実した勉強会を開催していければと思います。


ちょっと聞いてみたい、いやむしろみんなの前で話したい！と思った方はお気軽にご連絡下さい。

今回の勉強会はキャリアハックに取材いただいて、記事にしていただきました。こちらもご覧いただければと思います。
ユーザベース主催『HTML5』エンジニア勉強会イベントレポート

NewsPicksのUIデザイン

たぬきです。

先日、HatchUp様主催の「第2回ノンゲームスマホアプリ勉強会」に発表者として参加してきました。

ノンゲームスマホアプリということで、ここ2年くらい企画・開発してきた、NewsPicksについてお話ししました。

僕は、「ノンゲームアプリ」はゲームアプリより（ある意味）自由なんじゃないか、と思っています。僕も個人的にゲームアプリを作ったりもしているのですが、ゲームアプリは、開発を始める段階で完成イメージがだいたい出来あがっていて、それをどう作っていくのかという作り方をしています（作っていくうちに思わぬ変化をすることもありますが）。

一方で、ノンゲームアプリは、作り始めるときにサービスコンセプトは決まっていても、画面がどうなるかは全然決まっていなかったりします。だから、技術者・デザイナーが、サービスコンセプトを理解し、それを経験・技術を使って何よりも分かりやすい形に結実させていく、そんな自由度があるアプリケーションなんじゃないかと思っています。

NewsPicksはそんな感じで開発してきたアプリなのですが、今回はそのうちの一機能、「階段」についてのお話。

News picksのUIデザイン from tanukingUb

NewsPicks事業は2013年の頭に立ち上がりました。そこで出てきた疑問
「僕たちが本当に知りたいニュースって何だろう？」

喧々諤々の議論の末、僕たちが辿り着いた結論は、「自分が尊敬している人、友達、有名人が興味をもったニュース」なのではないか、ということでした。そこで、そういった人たちをフォローできるようにし、その人たちが興味をもったニュース（Pickしたニュース）を見られるサービスを作ろうということになりました（8ページ目参照）。更にその人たちがニュースにどんなコメントをするか知れたら面白いかも！

さて、サービスのやりたいことは見えてきました。ではどういうデザインにすべきでしょうか。デザイナーと肩を並べて色々開発して試してみました。

これが一番始めに作ったデザインです。各ユーザーがそれぞれの雑誌を作っていて、それを購読できる、といったことを考えて作りました。左上のカラフルなパネルが、全員のニュースをまとめ読みできるタイムラインです。

作ってみるとデザイン的にはカッコ良かったのですが、うーん、カラフル=まとめ読みという表現は理解しづらいですね。。。

次に作ったデザインは、iOS7のSafariのような機能でした。つまり、適当なボタンを押すと、２次元に描画されていたタイムラインが3次元状に展開され、後ろ側に各ユーザのPickしたニュースが並んでいるようなイメージです。（スライドの10ページ目にSafariのイメージがあります、元イメージは消失してしまいました……）

しかし、次元の転換はやってみると唐突感がありました。

と、試行錯誤を繰り返したあと、「階段」というアイデアにたどり着きました。実際のアプリでは左上のボタンをタップすると見られる、階段状にユーザーが並んでいるデザインです。階段をタップすればそれぞれのユーザのPickしたニュースが見られ、階段の手前にあるタイムラインにはそれらからニュースが生成されていることを表現しました。

アプリ勉強会ということで、プログラムの設計とコードをスライドに書きましたが、見てみると非常に単純です。iOS/Androidアプリはそれっぽい動作をするものをとても簡単に作れるので、いろんなデザインを試せていいですね。

その後も、ちょっとした問題が起こりました(18-20ページ)。ユーザをたくさんフォローすると、階段が詰まってしまうという問題です。これに関しても、デザインと技術の力で簡単で強力な解答を出せました。階段の上下に吹き溜まりのようなViewを追加することで描画したいことは変えず、問題は解決しました。

ということで、サービスコンセプトを理解し、それをデザイン・技術の力でアプリとして結実させると楽しいよ、という話でした。勉強会ではたくさんの質問をいただけ、楽しい会でした！