CSS Nite in Shinagawa, Vol.3 with Microsoftに参加してきたよ

cssnite_shinagawa2013

さる2013年12月12日に、CSS Nite in Shinagawa, Vol.3 with Microsoftへ参加してきました。
久しぶりのCSS Nite。スピーカー陣が豪華だったので、行く前からドッキドキ。
品川Microsoftへお邪魔するのは初めてだったんだけど(新宿にはお邪魔したことある)、これがまた富士山ビューのピッカピカのオフィスでドッキドキ。
飲み物はすべてフリードリンクというお大尽様ぶりで危うく惚れそうに。ステキ!

ではセミナー内容レポートします。



Session 1 : HTML5が拓く未来 / 羽田野 太巳さん


ほぼ基調講演に近い感じのセッション。
今までのWeb制作に固執していれば、基本的に市場はそこまで広がらないので、競合との食い合いとなる(レッドオーシャン化する)。
それよりも、今まで目を向けていなかった市場、主に組み込み系にも注目してみませんか? という内容。
組み込み系の事例紹介では知らないものが多く、目新しく新鮮でワクワクした。

ex.) より簡単に取り組めるアプリ開発環支援サービス

applican => 羽田野さんが取締役で入ってる会社だった
monaca
Herlock Jsベースで開発できる

ex.) 便利開発ツール

html5text.com html5のマークアップ診断ツール。
組み込み系のブラウザとかで、どこまで使えるかテストできるツール

ex.) 組み込み系の実例

・IVI(in-vehicle infotainment)
 - QNX Car カーナビっぽいやつ
 - TIZEN IVI

・Wii UのOperaブラウザ
SMART TV - Samsung
 日本で全然見ないけど、海外市場だとメインだね。

Smart tv alliance
Samsung対抗のための連合的なやつ。弱者連g…いや何でもない。

ex.) その他活用範囲の例

Web Socket
KAAZING – リアルタイム配信のためのWeb socket

Web Audio API
自分の参照リンク。
開発基礎
Web Audio API を使用したゲーム用音声の開発 
オライリーの本 

Web RTC
AT&T 
– 音声通話をJsで制御できる。すごい世界になったなぁ。




Session 2 : HTML5マークアップの基本 / 益子 貴寛さん 


羽田野さんの大局を見据えるセッションから一転して実践的な内容だった益子さんのセッション。
笑いあり駄目出しあり一部デモのトラブルあり、でもまたそのトラブルが笑えて会場が一体になったりという良い内容でしたw
マークアップの基本なので、一部は既知の内容もあり。
知らなかった内容だけメモ的に。

下位ブラウザのhtml5対応

html5shivを利用する。
みんなこれ使ってるんだなーという感想。
ただし「html5shiv.jsを使うのをやめることにしました」という様な意見もあると言えばある。
IE7で重いという理由と、動作全体を理解していないのに使うのは怖くない?というのが使わない派の意見。
案件ごとの判断がベストという意見に同意。

html5 at riskの把握

html5 at risk
まあ面倒くさがらずにときどき確認しきましょう。

html5要素の実例

<main role="main">...</main>
とか
main要素はアクセシビリティに配慮している。role属性とかもアクセシビリティ目的という意味合いが強い。

role="banner":ヘッダー部分
role="contentinfo":コンテンツ情報
role="navigation":ナビゲーション
role="search":検索
role="complementary":補足
role="application":アプリケーション

HTML micro data / 構造化データ

策定団体は色々あるようだけど、有名なのはSchema.orgとか。

Google、bing、Yahooでもこれらをサポート。
具体的にいえば以下がGoogleの各サーチ等で利用される。
ex.) レビュー、人物、商品、会社と組織、レシピ、イベント …
ex.) ぱんくずリスト => nanapiとかは実装している

html

<!--nanapiのマークアップ例-->
<ol id="theme-path" class="topicpath-cmn">
<li itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="" class="home">
<a href="/" itemprop="url" onclick="_gaq.push([&quot;track._trackEvent&quot;, &quot;RecipeMain&quot;, &quot;Bread&quot;]);"><span itemprop="title">nanapi トップ</span></a>
</li>
<li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb" data-theme-url="life">
<a itemprop="url" href="http://nanapi.jp/life" onclick="_gaq.push([&quot;track._trackEvent&quot;, &quot;RecipeMain&quot;, &quot;Bread&quot;]);"><span itemprop="title">生活・ライフスタイル</span></a>
</li>
<li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://nanapi.jp/life/event" itemprop="url" onclick="_gaq.push([&quot;track._trackEvent&quot;, &quot;RecipeMain&quot;, &quot;Bread&quot;]);"><span itemprop="title">行事・祭事・イベント</span></a>
</li>
<li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://nanapi.jp/life/2782" itemprop="url" onclick="_gaq.push([&quot;track._trackEvent&quot;, &quot;RecipeMain&quot;, &quot;Bread&quot;]);"><span itemprop="title">飲み会・宴会</span></a>
</li>
<li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://nanapi.jp/life/7118" itemprop="url" onclick="_gaq.push([&quot;track._trackEvent&quot;, &quot;RecipeMain&quot;, &quot;Bread&quot;]);"><span itemprop="title">オフ会</span></a>
</li>
<li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://nanapi.jp/life/7119" itemprop="url" onclick="_gaq.push([&quot;track._trackEvent&quot;, &quot;RecipeMain&quot;, &quot;Bread&quot;]);"><span itemprop="title">企画する</span></a>
</li>
<li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title">幹事の株が上がる!オフ会の席順の決め方のコツ</span></li>
</ol>




Session 3 : マルチデバイス対応とCSS3、レスポンシブ / 鷹野 雅弘さん

CSS3の新しいプロパティのはやめぐりと、レスポンシブ = スマートフォン対応ではなくスマートフォン”最適化”を行いましょう、という内容。

CSS3プロパティの実例

The Shapes of CSS

Googleがレスポンシブデザインを推奨した

Googleがお勧めするスマートフォンに最適化されたウェブサイトの構築方法


レスポンシブデザインの好例

 ・The Boston Globe
 ・Media Queries(レスポンシブWebデザインのショーケースサイト)
 ・Hello Fisher 通称:レスポンシブおじさん
  

スマートフォン”対応”でない、スマートフォン”最適化”としてコンテンツも実用に即したものにしている例

コンテンツは非表示になるものがあるものの、実用に即した割り切りが必要じゃないかという考え方。

 ・名古屋名物みそかつ 矢場とん => スマートフォンサイトの場合、店舗の待ち時間が真っ先に表示される
 ・富山マンテンホテル => スマートフォンサイトの場合のホテルまでのアクセス方法がかなり詳細
  

ブレークポイントをどこにするかっていう話

特にAndroidで断片化が進んでいる。
 ・機種数3,997:「断片化」を続けるAndroid(WIRED.jp)
 ・1年で3倍。Androidの断片化を色別に示した図がまるでモザイク : ギズモード・ジャパン

 だからもうPC/Tablet/Smartphoneではなく、PC/その他 っていう分け方を推奨。
 この辺悩んでたからなんか肩の荷が下りた。

で、で、実際のブレークポイントはこの辺を参考に。
 ・Foundation
 ・HTML5 Boilerplateは、48em
 ・ KubeBootstrapは、768px と主立ったCSSフレームワークも一択となっているそうです。

その他のレスポンシブデザインテクニック

 その他、鷹野さんのスライドシェアなど。
 ・「画像をなるべく使わずにWebをレイアウトするテクニック
 ・「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)

【余談】

セッションではKeynoteを使っている人がほぼ(なんと5/6)だったのだけど、
鷹野さんのセッションで使ってたiPhone画面をiframeみたいに見せるやつは一体どうやってやってたんだろう…



Session 4 : スマホアプリのデザインからプロトタイプ作成 / 秋葉 秀樹・ちひろ夫妻

ご夫婦でデザイナー。何かステキ。そしてスピーカーの中ではやっぱりスライドデザインがとてもステキだった。
夫婦漫才とか言われてたけど。

彼らのセッションはデザイン論そのものよりも、開発をスムースに進めるためのプロトタイプを利用したワークフローについて。
現在UIデザイナーの端くれとして、スマホアプリではないもののアプリ開発を進める立場としては、
とても参考になる事柄が多かった。

ワークフローの考え方

いわゆるウォーターフォール式(デザイナ→フロントエンド または その逆)でない、
ループ型で作るワークフローを推奨。

あとで読む:ウォーターフォールから反復型への移行手順

プロトタイプの種類

種類は本来なら色々ある。
ペーパー/ネイティブ/ムービー/Flash/HTML など
=> 中でも夫妻のおすすめはHTML。実際にコーディングをしてしまって動かしながら進めていくやり方

作るときのコツやツールとか

・アイコン => Font Awesomeを利用
・UIの動きとか => html5で任意属性を作る + jQueryのtoggleClass + CSSのclass切り分けでどんどん作る

まとめ

まとめは「デザイナーも動きの先を考えよう」ということでした。

このセッションではワークショップ形式のコーナーもあり面白かったです。
実例としてクライアントから出されたUI改善希望に対して、
参加者で考えて(一部の方が)発表をしましたが、
デザイナーはちょっとアイコンに頼りすぎるきらいがあるなあ、と感じましたね。
自分も気をつけよう。

あとこのセッションを見ていて、実際にコーディングしていくスピーカーの画面を見ながらlessの素晴らしさがよくわかった…。
数文字入れるだけでCSSプロパティがどんどこ入れられるとか、何か魔法みたいだわー。


フォローアップ

以下は、秋葉さんからのフォローアップ。

 ◎今回のサンプルの解説記事
 
 ◎サンプルコード
 興味を持たれている方はダウンロードしてご自身でCSSを触って感覚をつかんでください。
 慣れたら意外と簡単で、応用しやすいでしょう。
 
 ◎x-webkit-speech属性について
 益子さんが行なった音声認識APIですが、私たちがつくったこちらのサイトでも使っています。
 Chromeでマイクのアイコンをクリックして「赤」とか「紫」とか言ってみてください。
 Grad3 
 
 ◎アイコンに特化したWebフォント
 アイコンがフォントだと、色やサイズもCSSで簡単に変えられます。
 
 ◎その他
 こちらもどうぞ、私たちが発表したスライドです。
 
 「HTML5時代のWebデザイナーこれからの生きる道 – デザイナーとエンジニアがうまくやるモバイルアプリデザイン編」(秋葉秀樹)
 モバイルアプリ開発にどうデザイナーが向き合い、エンジニアとやりとりするのか?についての提案を行なったスライドです。
 
 「Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜」(秋葉ちひろ)
 ネイティブとかWebとか分けて考えるよりデザインという課題解決をテーマに解説しています。
 10万ビュー超えという話題を呼んだスライドです。




Session 5 : インフォグラフィックスで魅せるサイト / 岩崎 正寛さん

デザイナー発・現ディレクターの岩崎さんのセッション。
テーマは「実践知」。米大統領選のスペシャルサイト by 米国大使館 を実例に取り、
たった1ヶ月で制作・公開したプロジェクトでの学びを共有してもらいました。

 CSS Nite in Shinagawa, Vol.3 with Microsoftに参加してきたよ


インフォグラフィックということで、正直スピーカーの中では一番スライドが美しかった。
内容としてはディレクションにおいてのツボが多かったのと、スライドが非公開なので詳しくは割愛。

全体のテンポも良く、笑いと優しさにあふれているように感じた。
こういう人と仕事ができたらモチベーションは下がらなさそうですね。


以下は岩崎さんからのフォローと参考リンク集。

【参考スライド】
 ◆実践知のリーダーシップ 野中郁次郎
  実践知についてアカデミックな視座で解説しています。
 
 【参考文献】
 ※専門書/技術書はみなさんもお詳しいと思うので、
  人文的分野を中心にご紹介いたします。
 
 ◆アート・オブ・プロジェクトマネジメント ―マイクロソフトで培われた実践手法 (THEORY/IN/PRACTICE) CSS Nite in Shinagawa, Vol.3 with Microsoftに参加してきたよ  Scott Berkun
  
  プロジェクトマネジメントの実践的なノウハウが沢山書かれています。
 
 ◆リフレクティブ・マネジャー 一流はつねに内省する (光文社新書) CSS Nite in Shinagawa, Vol.3 with Microsoftに参加してきたよ  金井壽宏 中原淳
  自分なりの持論を持ち、常にアップデートし続けることの
  重要性について書かれています。
 
 ◆「わからない」という方法 (集英社新書) CSS Nite in Shinagawa, Vol.3 with Microsoftに参加してきたよ  橋本治
  どうなるかわからないからこそやってみよう。
  そんな気持ちにさせてくれる一冊です。
 
 
 ◆人を助けるとはどういうことか 本当の「協力関係」をつくる7つの原則 CSS Nite in Shinagawa, Vol.3 with Microsoftに参加してきたよ  Edgar H. Schein
  押しつけではない本当の思いやりとは何かについて考えさせられます。
 
 
 ◆自分の小さな「箱」から脱出する方法 CSS Nite in Shinagawa, Vol.3 with Microsoftに参加してきたよ  アービンジャー・インスティテュート
  身の周りの人間関係は実はすべて自分が原因で
  引き起こしていることに気づかせてくれる名著です。





Session 6 : HTML5とマイクロソフト / UXエヴァンジェリスト 春日井 良隆さん

▼春日井さんのスライド
http://www.slideshare.net/ykasugai/css-nite2013-kasugai-29133426

冒頭ではいかに彼自身がタッチデバイスを多用し、用途により取捨選択しているのかという話と、
そんな中でHTML5が果たしている役割、これからの拡張性と可能性についてを語ってくださいました。

それぞれの点について、MS製品がさりげなくこだわっている・カスタマイズしてきている点の紹介や、
Windowsアプリの開発環境がHTML5+Javascriptベースで行えることの話などがありました。

IE11の話になると、心なしかリスナー(デザイナー)が居住まいを正して居た気がしますw
(というかそれは私のことです)

IE11の話

・Windows7でも使えてます
・デベロッパーツールが結構いけてます
・ドキュメントモードはEdgeを優先 HTML5/HTML4.01
・条件付きコメントはただのコメントになる
・UA変更


IEの開発者向けの情報

modern.IEという検証サービス。
URLを入力しスキャンすると、改善点等が診断できる。
Win8との互換性とか、あとVMも手に入る。

http://msdn.microsoft.com/ja-JP/ie/

研究中のプロジェクトたち

あとは、MSの研究段階のプロジェクトの数々の紹介は結構面白かった。
iilimiroom kinect
動画を見ればどんなものか一発でわかりますw プロジェクションマッピングですね要は。

WebRTC
IE11ではまだだけど、HTML5 Labでは実験中

この辺は駆け足でちょっと聞き逃した。

WebGL

Browser Stack
マルチブラウザ・マルチデバイステストツール。

●MPEGDASH
URL見つからない。
動画のビットレートをリアルタイム変更できるデモとか

まとめ

今後Webは何を「見る」のではなく、何かを「する」プラットフォームになる。




【余談】

セッション3で、本当に小さいワークショップ的な作業が参加者に求められたのだけど、
それが無駄だと思っている人がいるようだった。(フォローアップメールで記載されてた)
結構面白かったけどなー。
確かにお金を払っているからプロから話を聞くことに専念したい、それ以外は無駄、という考えも解らないではないけど、基本的には値段以上の価値があったし、相対的に自分のレベルを確かめるには良いと思いますですはい。

そんな訳で本当にお値段以上のセッションばかりでした。
平日に時間を取ることは本当に難しいけれど、CSS Niteは今後も積極的に参加していきたいなと。

2 comments

Leave Comment
  1. Wakana Matsumoto

    鷹野さん

    あわわ、まさかコメントとフォローをいただけるとは、ありがとうございます。

    CSS Niteはご本人からのご返信をいただけることが多いですね…!
    それだけスピーカーの方がアンテナが広いということでしょうか。

    次回また参加する機会がきっとあると思いますのでよろしくお願いいたします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>