WCAN 2015 Winterに参加してきました

2015年12月12日(土)に名古屋で開催されたイベント「WCAN 2015 Winter」に参加してきました。

WCAN 2015 Winter | WCAN 名古屋近郊のイベント情報

WCANは年4回開催されていますが、今年のWCANは初参加でした。

久しぶりのWCANに参加することになったきっかけは、@ahomuさんの話を久しぶりに聞きたいと思ったからです。

最近はセミナーの告知内容までは目を通すものの、随分と選り好みをするようになってしまった傾向がある(厳選するようになったとも...?)ので、消化不良で胃もたれしない範囲で少しずつ参加回数を増やしていきたい所存です。

会場の名古屋商科大学 名古屋キャンパスは外観が学校のように見えず、お城を思わせるような内装でした。

以下に各セッションごとに少しずつ要約と感想などを残しておこうと思います。
要約はメモったものを自分なりに再構築しているので正しい内容が必要な方はスライドを見ることをお勧めします。

Lightning Talk

さまざまな発表がありましたが、何より一番印象に残っているのは ロボットであるPepperさん(+お世話係のアクアリングの方が二人)が登壇したセッション。

当初1番手のはずがPepperさんが体調不良(整備不良)を起こし、急遽2番手に。

5分間の間、Pepperさんが話しながらスライドも進んでいき、人間が一言も話さないという異様な光景が繰り広げられました。

Pepperさんは本体は「Choregraphe(コレグラフ)」と呼ばれる開発ツールでコードを書かずにGUIで開発が可能で、タブレット部分はHTML+CSS+Javascriptで開発可能ということでWeb開発者でも簡単なものなら開発が出来そうということが分かり、俄然興味が湧いてきました。

Session1. あたかもプロのようにプロトタイプを活用する方法(長谷川恭久さん)

要約

デザインカンプの確認事項(役割)は多すぎる。見た目、UI、など。

マルチデバイス化が進み、パソコンサイトのように誰もが同じ環境で サイトを閲覧しなくなった昨今、「デザインカンプ」では認識の共有が難しくなってきた。

そこで必要になってくるのがプロトタイピングツール。

デザイン→開発→確認ではなく、ツールを使って動くものを早い段階で確認することで認識の齟齬を無くすことが目的。

プロトタイピングを作るときは、作ることで誰と共有したいのか、何を解決したいのか考えてから作る。

プロトタイピングは作りこむ必要はない。作りこむことより早く作って互いの認識のすり合わせをおこなうべき。

ツールには得手不得手があるので、作る道具は柔軟に選ぶ。タイプが違う二つぐらいのツールを知っておくのがオススメ。

感想

実務の中で過去に何度もデザインカンプでは伝わりづらいところが実装後に表面化して問題になることがありました。

デザインカンプの確認を依頼したときに目に入りやすいのはやはり見た目の部分で、動線とか実際に動きについて確認してもらうことは難しいのだと思います。

いきなり明日からプロトタイピングを実務に導入!!と意気込んでも、「誰が、どの工程でつくるの?」となりそうなので、直近で必要なのはデザインカンプでどのあたりが共有できず齟齬がおきているのかを考えることだと思います。

もし必要になったときに「こんなこともあろうかと!」と提案できるように 何個かツールを触ってみようと思います。

Prott - Prototyping tool for Web iOS Android apps

Free Web & Mobile Prototyping (Web, iOS, Android) and UI Mockup Tool | InVision

Session2. HTML6 でも CSS4 でもない Web 技術のゆくえ(佐藤歩さん)

要約

そろそろ使えそうな技術

ブラウザの自動バージョンアップと短い周期のリリースで新しいWeb技術が使えるようになるまでが早くなってきた。

  • SVG(IE9から)
  • flexbox(IE11から)
  • レスポンシブ・イメージ(ブラウザ対応はこれから)

HTTPS Everywhere

  • サイトの一部分だけでなく、全体をSSL対応にする流れ
  • 公衆Wifiなどでのリクエスト盗聴の危険性がある
  • HTTPSがGoogleの評価対象に
  • ブラウザの特定のAPIはSSL環境下でしか動作しない
  • 無料のSSL証明書発行サービス Let's Encrypt - Free SSL/TLS Certificates
  • 計測系のコードなどHTTP専用のコンテンツがまだまだ多いのが課題

Web技術はブラウザ以外でも使われている

  • デジタルサイネージ
  • スマートテレビ、カーナビ
  • ChromeOS、FireFoxOS
  • Electron
  • IoT

オープンなWeb技術が可能性を広げる

スマートフォンはセンサーのかたまり

  • 加速度センサー
  • 対物・対人センサー
  • 光度センサー

Webアプリとネイティブアプリ

モバイルにおけるアプリとブラウザの利用時間の比率は4:1でホーム画面に登録できるアプリが圧倒的に強い

現状のWebのアプリの不利なところ

  • インストール不可
  • プッシュ通知不可
  • オフライン対応苦手
  • 動作が遅い

ProgressiveWebApps

  • 上記の不利な点を克服した次世代のWebアプリ

Webアプリならではのメリットとデメリット

  • インストール不要
  • 各コンテンツ間をリンクできる
  • マルチプラットフォーム対応
  • (デメリット部分は聞き損ねました...)

ExtensibleWeb

  • 標準化団体やブラウザベンダでは現場に即した機能を作っていくことが難しい
  • 開発者が中心となってWebの未来をより良くしていくこと
  • 低レベルのAPIを提供することで開発者が新しい機能を開発できるようになる
  • 支持を受けた機能がWeb標準になっていく(jQuery→document.querySelectorのような)

感想

要約...しきれなかった。

SVGは画像内のエレメント1個1個がDOMとして触れるのが楽しそうです。 アイコン等はアイコンフォントとどちらが使い勝手が良いか検討が必要そう。

flexboxはIE10以下の対応が切れるまでは自前Mixinで非対応ブラウザには inline-blockを埋め込んで凌ぐことになりそうです。スマートフォンだと軒並み対応しているので、要素の順番の入れ替えは積極的に使っていきたいです。

picture要素はブラウザ対応がマチマチとはいえ、画像の容量を特に気にする スマートフォンで実装が済んだ段階で実用段階になりそうです。最近はコンテンツをほぼすべてCMSで管理するのでpicture要素の複雑な記述、複数サイズの画像生成はCMS側が吸収できるところな気がします。

SSL対応はとりあえず個人サイトで試してみつつ、HTTP依存コンテンツがどれぐらいあって、どの程度移行が辛いのか検証してみようと思います。

ブラウザ以外のWeb技術の部分は、デジタルサイネージ、IoTあたりを試してみたいです。

ProgressiveWebAppsは目指している方向が楽しみすぎます。

特にオフライン対応はlocalStorageやApplicationCache、IndexedDB、WebSQLなど色々と検討して試して玉砕した過去があるのでServiceWorkerさんにはすごく期待値が高いです。

個人的にWebアプリの最大の弱みだと思っている各ストアで配信ができない問題もProgressiveWebAppsが一般的になる状況には改善していることを祈ります。

Webアプリは現段階でもハードウェアの高速化によって、かなり現実的な速度がでるようになっているので、今後の流れが非常に楽しみです。

ExtensibleWebは話を聞きながら終始とある人の顔が浮かんでいました。

CSSはこれまで仕様上決まったありものを使うことが主だったので、独自プロパティをつくることは是非やってみたいと思います。

自分のスキルレベルだとjQueryのように他の開発者の方が作ったものを使って、プロダクトに反映することが主になりそうですが今までに無いライブラリが出てきそうで楽しみです。

Session3. 10年後も(たぶん)Webとかの仕事で食っていける仕事の考え方(安田 英久さん)

要約

「だれにどんな価値を提供するのか」それをちゃんと考えて、仕事の軸にすること。それが、10年後も仕事していくために大切なこと。

自分の仕事は何なのか?

  • エージェント(作業を代行する人)
  • コンサル(提案をする人)
  • 専門家
  • 作業者

あなたはクライアントに何を提供しているのか

  • HTML、デザイン、アクセス解析などの作業がが直接お金を生んでいるわけではない
  • 自分は何をだれに提供することで飯を食べているのかを考える
  • 成果物が使われることでクライアントが得をしているからお金を貰えている

今やっている作業は価値にどう影響するのか

  • すべての作業が価値に直結するわけではない
  • その中で仕事全体が価値を生み出すのにその作業者がどういう役割をするのか作業者と共有できているか その給与がどこから出ているのか?といったことを話しのきっかけに共有するといい

その仕事は提案を求められているのか、要望通りの作業を求められているのか

  • どちらが求められているのかによって最適解は変わるので注意が必要

クライアントはあなたに頼むとどんな価値を得られると感じるのか

  • あなたの考える価値=客にとって本当に価値なのか
  • あなたにとっては価値があることでも、それは相手にとって価値があるとは限らない

昔のWeb担当者と今の担当者は違う

  • 昔はウェブ好きな人が多かった
  • 今はWebに興味ないけど、たまたま配属されたサラリーマンが多い
  • 新しいことかっこいいことより、上司とか組織の事情によりがち
  • 品質、納期順守、最終成果物など人によって重要視するものが異なる

良いとすばらしいの違いとは

  • 事前の期待を超えたかどうか
  • 期待していたよりも大きな価値を得た、と相手が感じたら、それはサービスとしては強い

マーケティングの考えを知れば、いろんな仕事がうまくいく

  • 顧客を知り、顧客のイメージ、不安、願望、問題にあったアプローチを提供することでビジネスゴールに導く(または段階を進んでもらう)

人とのやりとりもマーケの基本と同じ

  • 言うことわかってくれない上司は、なかなか買ってくれない客と同じ
  • 自分のこうするべきだと思いをぶつけるだけって、企業が良いことだけ言っているCMと変わらない

感想

普段の仕事で直接作業に関わっているとつい忘れてしまいそうなことを 色々と聞くことができました。

作業が直接お金を生んでいるとは分かっているつもりではいても、 「目の前のサイト制作を終えて納品すればお金が入る」と視野が 狭くなってしまうことが多いので、その都度思い出したいと思います。