エンジニアサポート新年会2012 CROSSに参加してきた #cross2012

2012/01/27（金）

■[勉強会][UX][Scala][Javascript]エンジニアサポート新年会2012 CROSSに参加してきた #cross2012 15:33

プログラム｜エンジニアサポート新年会2012 CROSS

告知当初からそのセッションのバリエーションの多さ、内容の豊富さに注目が集まっていたと思われるこのイベント。開始日時が平日の日中という事だったので、帰社＆有休等諸々の都合を調整しつつ参加してきました。

開催場所はベルサール新宿 1Fイベントホール＠西新宿。最近出来たばかりの建物のようで、かな～り綺麗な感じの雰囲気。

まず受付完了時に配布された資料各種。首に掛けるカードとそこに名前明記欄＆興味分野を示すためのシールなど。こういった準備がされているのは、勉強会に参加する者にとっては嬉しい心遣いですね。

その他、ステッカーや各種グッズ、パンフレットの類等も豊富に。

当イベントには協賛企業も数多く参加しており、主だった企業に関しては下記の様にちょっとしたブースなども出されておりました。

開演挨拶

主催者である山口さんからの今イベントに関する経緯を含めた挨拶などがまず始めに行われました。

前述した自己紹介用カード等の説明『コミュニケーションのきっかけに。』
協賛企業の皆様、感謝。(詳細は下記URLの下部参照)
- エンジニアサポート新年会2012 CROSS
参加技術に関する説明。
懇親会用に用意したビールは、何と2トンあるらしい。某ビール企業も協賛企業に名を連ねていたが、恐るべし…

今回自分は以下のセッションに参加しました(赤枠内で囲った3つのセッション)。並列するセッションについてはどれも興味深いものであり他にも見てみたかったのですが…以下、メモを取れた範囲について書き連ねていこうと思います。

プログラム｜エンジニアサポート新年会2012 CROSS

セミナー セッションフロントエンドCROSS 『UXのイロイロ』 15:10～16:20

セッション｜エンジニアサポート新年会2012 CROSS

セッション開始時に配布されたパネラー等の説明資料がオシャレな感じだったのでそれぞれ併せて掲載。

NAVER UI デザインアプローチ

NHN Japan 株式会社橋本建吾さん (TwitterID:@hashimotokengo)

NAVER、ご存知ですか？
会社の説明、主なサービスについて
GOOD DESIGN 2010受賞

エンジニア×デザイナの架け橋となるようなお話を。
エンジニア×デザイナー、互いをどのように見ているか。
- なんとわかりやすい…開発者、デザイナー、プロジェクトマネージャーは、お互いをこう見ていた:らばQ

UIデザインのアプローチ
- ベンチマーキング
  - ビジョンプランナーがコンセプトを伝える：企画書が無い場合が多い。
  - 基本的にはオンラインのサービスをしらみつぶしに見て整理して…を繰り返し、ビジュアライズ。
    - エッセンスを抽出し、プロトタイプに活かして行く。
  - サービスはオンラインに留まらない。例)プリクラ

プロトタイプ
- アイコンデザイン
- 例)LINEの冬版のデザイン：雪が積もってたり、色々な『冬』を想起させるアイコン
デザインガイド
- 細かいピクセル単位まで全画面に対して起こしていく。

まとめ：Mind（マインド）
- ユーザーセンタブルなデザインに立つ。
- ユーザの立場に立って
  - 簡素な部分は簡素に。
  - 魅せるデザインはかなり細かく。
  - 冊子に関しても気合いを入れる。

気が利くデザイン

NHN Japan 株式会社本田樹さん

タイトルは上記内容改め、『誕生日、リサーチの日々、ボウリング。』という事らしいです。

自己紹介
- リサーチャーの人。
- NHN JAPANの人。

"もらって嬉しい誕生日のプレゼントは？"
- とある女性(本田さんのある時期の彼女)は劇団四季のチケットを送って一緒に観に行ったらしい。
- またある女性は石の標本をもらったらしい。
  - でも、彼女にとってはこれが一番嬉しかった。

『ファンに関する調査』ユーザーインタビュー
- どんな事を嬉しいと感じる？

1.ユーザーの望みを知る
- グループのコミュニケーションで苦労されていることを教えてください。
- メールを送って聞いてみた事がある。→返信し、話を聞かせてくれた。
  - 同窓会/クリエイター仲間/女子会/大学サークル
  - 声：慣れていない人が、機能が多くて使いづらい。公開の範囲が曖昧で、怖がってみんな使わない。等々
- デコレーションに関する調査
  - 原宿のプリクラ
    - 女性の同僚と観に行った(今は女性がいないと入れないらしい。)
    - 今はリアルコスメ指向らしい
  - 女性に人気のあるブロガーの写真
    - 画像の色調を加工しているものが多い（別のツールを使っている模様）
  - 自社の投稿サービスでの画像を一部屋に貼りだして分析

2.サービスを改善する
- 右隣のお友達とLINEで会話してください
- LINE ユーザビリティテスト
  - 被験者の端末画面

ユーザーの"ウレシイ"や"不満"に精一杯の関心を持ってデザインする
箇条書きのテキストに起こしている
例)ボーリングが上手くなる方法
- マークを見て狙うとピンに当たりやすい →ユーザビリティも同様。
- ボーリングの点みたいなポイントを見つけていくために頑張ります。

『Experience』を考える。

ニフティ株式会社瀬津勇人さん (TwitterID:@hayapochi)

自己紹介
- nakata.netをデザイン。
- 世界一周旅行等も。
- 2003年ニフティに再就職。

ニフティについて：
- 歴史あります。今年25周年
- 色々なサービスを提供。
  - ポータル/スポーツ選手のブログとか
  - DIMEと協力してプリンを作っりもした
  - 様々なニフティの宣伝、看板なども。

UXって？→User Expericnce
- 画面の配置、サイトのデザインだけで経験、というのはおかしくないか？
- UXのハニカム構造：掲載
  - ユーザーエクスペリエンスのハニカム構造 at bookslope blog
- 使いやすい：というのはUXの一部だけでしかない。
- Experience=経験、を演出する。

提供するサービス、アプリなどで
- 『何を感じさせる』か？
- 『どんな経験をしてもらう』か？
  - 例：東京デザイナーズウイーク 2011 #おいしいもの
    - どういう状況の人達が見る？
    - コンセプトを感じて欲しい。伝えたいコンセプト
    - みんながびっくりした要素
      - リアルタイムで出る。(今ラーメン食べている人の画像）
      - 違う画像が出る。(最新20件）
      - 『なべをコンロにかける』という行動：およそコンピュータっぽくない

どう感じてもらうか？
- experienceを考える。

UIやレイアウトを考えると同じ位に、利用する人はどういう感じ方をするか考える。
エンジニアの扱う領域も、感じ方に影響することは多い。
利用するひとはどういう感じ方をするか考えると、トク！
- そういう人はあんまりいないから。

別にウェブテクノロジーだけで解決しなくたって言い！という感想
もしかしたら
- 音楽/画面がおもしろい/文章が面白い

エンジニアやデザイナーである前に、サービスや商品の担い手であるはず。

『電脳喫茶・電脳酒場めいどりーみん』デジタルテクノロジーを融合させた新しいエンターテイメント空間

チームラボ株式会社田村渡さん (TwitterID:@wat_design)

自己紹介
- 基本的にWebアプリデザインなどを担当

今までにないアキバカルチャーを電脳化したような空間デザイン→ゲームの中のような世界
- 渋谷に新型メイドカフェ　電脳喫茶☆電脳酒場「めいどりーみん」が誕生！｜株式会社ネオディライトインターナショナルのプレスリリース
- これからの時代は、空間をデザインする＝デジタル領域　にデザインが変わる。
- TEAMLAB.NET：チームラボ ≫ MAIDREAMIN

テクノロジー×デザイン：エンジニアの力によって表現されたデザイン。
- 電脳ブロックライト/電脳トランポリン/電脳ディスプレイ/電脳ステージ/電脳ウォール
- コンセプトからほぼ全てを制作、プロデュース。

全体的な評価
- クライアントさん：ものすごくテンション上がる。
- メイドさん：超かわいい！ここで働きたいです。
- 一般の人：チームラボマジヤバイ！
- ※ここではユーザ：メイドさんに焦点を絞った。

総評
- A.テクノロジーとデザインの可能性の広さ。
- B.メディア、職種を超える未来。

この後はメイドさんが動いてたりするデモ動画を流したり、パネルディスカッションや質疑応答が時間まで行われておりました。

『UX』のキーワードでセッションを選択し、若干の毛色の違い？というか予想してたのと違った部分がありましたが、『エンジニアやデザイナーである前に、サービスや商品の担い手であるはず。』という言葉には非常に感銘を受けました。こういう視点を持っている事は強みになると思うので、UX方面は深掘りして行きたいテーマですね。

セミナー セッション次世代言語CROSS 『Scala、Haskell、PythonでのWeb開発の紹介』 16:30～17:40

セッション｜エンジニアサポート新年会2012 CROSS

PythonによるWeb開発の紹介

Python mini Hack-a-thon・BeProud 小田切篤さん (TwitterID:@aodag)

自己紹介
- 最近はPyramid フレームワークにコミットしています
- pythonとは10年以上のつきあい

1.開発環境
- インタプリタ
- Cpython主流
  - 2.7系、3.2系
- Jython JVMでの実装
- PyPy Pythonでの実装
  - Pythonでpython インタプリタを作る！ネタにあらず！
  - Pythonで作ったインタプリタをバックエンドに変換してコンパイル
- IDE/エディタ
  - エディタ派:vim, Emacs 二大勢力
  - IDE派:PyDev, PyCharmが二強？
- pycharmは試してみたいと思う。

実行環境
- distribute+virtualenv+pip
テスト、ドキュメンテーション
- テスト：nose/coverage/mock/webtest
- ドキュメンテーション：sphinx/blockdiag
Webアプリケーションサーバ
- wsgrief/gunicom/waitress/tornado
ライブラリ
- DBドライバ(oursql)、画像処理(psycopg)、数値計算(PIL,Pillow/Numpy)など…
クラウド
- GAE

2.メリット
- 学習が容易
- ライブラリが豊富
- Web API ライブラリ

3.デメリット
- 向かないもの：大規模開発。良くも悪くも変数に型が無い

4.適用事例
- reddit（ニュースサイト）
- dropbox
- friendfeed
- connpass（イベントサイト）
- liblar

5.コミュニティの動向
- コミュニティは結構ある。
- 一般のコミュニティが存在
- PyJUG、温泉　ミニ発火損、読書会等
- 特化したもの：mercurial sphinx
- 地域コミュニティ等
- カンファレンス：PyCon JP mini / 2011/ 2012

6.例題(Hello World)

7.特徴的な例
- 拡張可能なフレームワーク
- モジュール化されたView

HaskellによるWeb開発の紹介

HIMA'・タイムインターメディア伊東勝利さん (TwitterID:@cutsea110)

Yosod フレームワークについて。
Webフレームワーク
- Haskellで開発されている
- 強い型付け/早い等の特徴
- フルスタック
- Yesodはヘブライ語でfoundationの意。

コンパイラ：GHC7
Yesod自体がライブラリの集まり
IDEは特にない
通常のHaskell プログラミング

メリット
- 1.Type Safe URLs
  - 全てのURLにはデータ型が存在
  - パスを一箇所に記述出来る
- 2：Compile-time templates
  - やさしい構文
  - コンパイル時に構文チェックされる
  - haskellの変数を直接使える
  - シンプルな制御構文
  - cssとjsもテンプレート
- コード実例紹介
  - hamlet(HTML)
  - Lucius(CSS)
  - Julius(Javascript)
- メリット
  - 簡単そう
  - ランタイムの表示エラーやリンク切れもないなど
- 3：Persistent template & EDSL
  - 一箇所でエンティティの宣言
  - 自動的にHaskellの型を生成し、関数とSQL スキーマをマーシャリング
  - 各テーブルからIDを分離
  - 自動マイグレーション
  - SQLとMongoDBを容易に切り替え可能
  - メリット
  - 簡単そう/クエリの記述がEDL/速い/モジュラリティ
- デメリット
  - MySQL, Oracle, SQL Server等はサポートしていない
  - 認証プラグインに関する縛りに影響を受ける可能性あり

適用事例
- Trough Suite Solutions：
- 各種Webサイト等の紹介

コミュニティの動向
コード実例
特徴の解説

ScalaによるWeb開発の紹介

日本Scalaユーザーズグループ水島宏太さん (TwitterID:@kmizu)

1.開発環境
- 処理系
  - 2.9.1最新安定版
  - バージョン2.9こちらが主流、2.8.x 一部プロジェクトが利用
  - 今から使うなら2.9.1
- IDE
  - Scala プラグインが各種提供されている
  - IntelliJ IDEA or Eclipseがおススメ
- ビルドツール：
  - sbtほぼ一択
  - Scala DSLとしてビルド設定を定義
  - 既存のmaven リポジトリを活用可能
  - ※0.11系が主流
- ライブラリ
  - Scala標準ライブラリ
  - サードパーティのScala ライブラリ
  - 既存のJava ライブラリ
  - ☆sbtで利用ライブラリへの依存を記述
- Web Appフレームワーク
  - Lift(フルスタック、view First)
  - Play!(2.0からScala Nativeサポート、ホットデプロイ)
  - Unfiltered(Scalaの機能をフル活用)
  - Scalatra(RubyのSinatraライク)
  - ☆Wicket + Scala, Lift, Unfiltered

2.導入メリット
- 簡潔なコード＋強い静的型付け
- 既存ののJava 資産をそのまま生かせる
- 分散・並列処理のサポート

3.導入リスク
- Java プラットフォームの知識がほぼ必須
  - （国内での）開発者がまだ少ない
- 学習曲線
  - 最初が急カーブになりがち
- 部分的な導入を検討しよう

4.適用事例
- 海外：Twitter/LinkedIn/Foursquare/VMWare/Amazon.com
- 国内：パテントビューロ/ITプランニング/エムスリー

5.コミュニティの動向
- 海外
- インターネット上
- 世界各地にコミュニティが存在
- 国内
  - Scala会議
  - 日本Scalaユーザーズグループ（ScalaJP）
  - Scala勉強会 in 渋谷
  - akasaka.scala
  - 名古屋 Scala勉強会

6.コード実例

7.特徴的な機能
- コレクションライブラリ
- パターンマッチング

Java to Scala
- 移行メリット
  - より簡潔なコード
  - 強力な静的型チェック
  - 内部DSLを自作しやすい文法
  - 並列・分散を意識したミドルウェア

移行リスク
- 学習コスト
  - Java文化とのギャップ
- コンパイル時間の増大
- ライブラリの後方互換性
  - 後方互換性を壊す変更が入りやすい

移行すべき？
- 開発チームによりけり
  - Ruby等の語経験があると良い
- 部分的な（導入/移行）実験推奨
  - sbtに慣れる
  - RESTFul API サーバを作成してみる
  - 単体テストをScalaで記述してみる

質疑応答
ディスカッション

このセッションに関してはScalaが興味あったので選択。難解さを感じる部分があるので今のところ写経やプログラミングはしてませんが、落ち着いたら／近いうちに着手してみようかと思います。

開演挨拶＆歓談・飲食

今回のイベント、懇親会を間に挟むという(個人的には)ちょっと面喰らった展開に。挨拶の前には大会場の椅子の大部分が取り払われ、場内に参加者が集う形となったのですが驚くのはその人の多さ。いくら何でも多過ぎね～か？と(笑)

あとで知ったのですが、当日はこれだけの規模の参加者数だったようです。そりゃ多いわ。

RT @tsuka: 来場者840名！ #cross2012

2012-01-28 01:40:06 via web

2～30分程の短さでしたが、各種食べ物やビールなどが振る舞われ、和やかなムードで時間が過ぎて行きました。

冒頭の挨拶では、規模や反響の大きさに驚きつつ、来年以降も継続していきたい、といった旨のコメントも発せられていました。早くも次回が楽しみな予感。

パーティーセッション JavaScript CROSS『JavaScript 八面六臂 2回戦』

セッション｜エンジニアサポート新年会2012 CROSS

html5j.org 白石俊平さん (TwitterID:@shumpei)
Node.js日本ユーザグループ篠崎祐輔さん(TwitterID:@bad_at_math)
Titanium勉強会増井雄一郎さん(TwitterID:@masuidrive)
タワーズ・クエスト和田卓人さん(TwitterID:@t_wada)
達人出版会・日本Rubyの会高橋征義さん(TwitterID:@takahashim)

こちらのセッションは、過去に行われたLL系言語イベント『Lightweight Language Planets』での1セッションの続編的な内容となっております。

なお、このセッション中に別件(後述)の為途中退出しており、メモも途中で途切れた形になっています。この辺りは他のレポート系記事やTogetter等を参考になさってください。

では以下メモ。

Javascriptのあれやこれやについて聞いてみよう。

最近のJSで興味有ること
- 会社としてはTitanium、Node.jsも注目
- 仕事で使ってるのはNode.jsの動向は気になっている
- やっぱりNode.jsが（ry 生産性が良い。
  - 個人的興味はCofeeScript
- 僕もNodeは当たり前だが気になっている。
  - Node自身の進化がメチャ早い
  - 最近の動向：Daily.js
    - テストを書いている人、過半数。
    - ジャスミン、JsUnitで二強
    - テスト駆動Javascriptが翻訳発表
    - また戦国時代に？

Node.jsはどうですか？
- 基本的には始めから非同期I/O
- ぶっちゃけ非同期は使うの？
  - 普通に作るサービスではそんなにつかわない？
  - 自分は趣味の範囲で良く使うけど…
- 自分の場合、エンタープライズ系のjs
  - jsを使う事で倉鯖を網羅出来る、ブラウザもjsで書ける、そのメリットは計り知れない
- サーバとクライアントで同じコードが書けるのは良い。
- 僕がNodeで使い始めているのは、『どこでも動く言語』にjsがなりはじめているから。
  - jsのフレームワークはホットな技術。
  - ある意味投資の部分もある。
- 投資の側面も有ると思う。
  - 安定稼働するシステムでNodeを使う理由はないかも。
  - Nodeが体感的に早い、というのは感じた。
    - 頑張らなくても早い。
    - 生産的にはそんなに高くない。
    - IDEはWebStormを使っている。
    - jsで8000行のコードを扱っている。WebStorm
    - コードの数が多くなって来ると探す作業が増える。
  - IDEはWebstorm一択なのかな。
  - titamiumは標準IDEがある。
    - 補完とか使わないでエディタでガリガリ書く性分。
  - Nodeはライブらりを書くのが好き。完全に趣味。

CoffeeScriptってどうですか？
- 基本的にJsのジェネレータなので、余計分からなくなるケースも出てくる。
- 普段から使っている人：1人
- ボランティアのアプリで作った事はある。
- 生産性すごいか？と言われると…
- coffeeスクリプトはjsが分かっている人が書くには良い。
- jsの良くない部分を上手くカバーしていいる。
- jsのフォーマットを安定化させる側面がある

jQueryってどうですか
- アニメーションなどは非常に有用
- jQueryつかえる＝js使える？の切り分けは難しい？
- Titaniumを使う上では、jQueryを使う事は無い
- jQueryは罪深いと思う
  - 慣れちゃうと、ぐちゃぐちゃに書いても動いちゃう
    - →後から見ると非常にメンテナンスが難しい
  - いい加減に書いてもそれなりに動く
    - Flex的な設計がWebの場合は合わないかも？
      - レベルが違う設計
    - jQuery綺麗、汚い
      - 保守性が悪いのは聞いたことがある
      - DOMスクリプティングはめんどくさい
      - 実質言語内言語。

以上、当イベント参戦はここまで。

数多くのセッションで色々なテーマ・技術の側面をこれだけの時間内で見て回る事が出来たのは良かったですね。次回も早速検討されているようなので期待大です。

ただ、開催会場の構造上(部屋間の仕切りが天井まで届いてない)隣会場の声が筒抜けで聞こえてしまい、集中して講演を聞く事が出来ない部分もあり(2回目の懇親会以降はより顕著だったような気がする)、若干その点で萎えてしまったな～というのはありました。パネラーの方々等も何割か増しで声を張り上げて喋らざるを得なかったようですし…。会場も引き続き継続となるならば、この辺り何か改善して頂けるととても嬉しいですね。

その他

Togetterまとめ一覧

Togetterに関しては当日リアルタイムで自分が参加した分については作成していましたが、当エントリを書くに当たりふりかえってみたところその他のセッションについてはあまり揃っていなかったようですので、全部作っちゃいました(笑) 当日作成されていた時間帯別のTogetterと併せて、各自ふりかえり、ブログエントリーの参考になさっていただければ幸いです。

Ustream

こちらのエントリで全てを網羅されております。会場内の各種講演は若干聞き取り辛い箇所もあったので音声・映像があるのはとても有り難いですね。

でつmblr - #CROSS2012のUstまとめ

Shinya’s Daily Report

2012/01/27（金）