なか日記

一度きりの人生、楽しく生きよう。

トップ > 勉強会 > CSS Nite in MATSUYAMA VOL.1 with Microsoftに参加 #cssnite_mtym1

CSS Nite in MATSUYAMA VOL.1 with Microsoftに参加 #cssnite_mtym1

勉強会

WebデザイナーでもWebデベロッパーでもないけど、松山で初開催ということで参加してきました。

CSS Nite in MATSUYAMA VOL.1 with Microsoft　今日から使えるHTML5＆CSS3
日時：2012年5月19日(土) 13:15〜18:50
場所：松山大学 文京キャンパス 5号館

100人の定員がいっぱいになった？とにかく会場にはたくさんの人が…
愛媛やるじゃん！

他の方のまとめ

togetter

主催された実行委員会　委員長　森本健一郎さんから

セッション資料は後日公開されるそうですが、いろいろとメモったのでそれもいつものように垂れ流す方向で…

オープニング

司会進行はスイッチの鷹野さんと愛媛みかん/いよかん大使の山下真奈美さんでした。山下さんは大学生でIT関係にあまり関係ないみたいでしたが、鷹野さんとのやりとりは面白かったです。
最初にアイスブレイクを兼ねた名刺交換会。社会人一年目の方とか、専門学校の先生と生徒とか、うちの会社の社長とか、自分みたいにWeb関連のお仕事とはあまり接点がない人とか、色んな人が参加されてました。

HTML5が拓く未来〜HTML5との正しいつきあい方〜（羽田野さん）

有限会社futomi代表取締役の羽田野 太巳（はたの ふとみ）さんのセッション。
HTML5に関する業界動向とか、どういった所でWebの技術が使われているかといった内容でした。
プレゼン資料がPowerPointではなく、Windows8のWebアプリ（Metro Style？）だったのはかっこよかったです。
セッション後の質問でどういった所を勉強するのがいいですか？といった内容の質問に、
皆と同じ事をしてもだめ。ニッチな所（WindowsPhoneとか）を攻めるか、次に出るテクノロジーを攻めるかなぁ。個人的には。といった話をされていたのが印象的でした。

メモ
  • Web業界以外の業界の人も注目してる
  • 振り仮名が振れる
    • HTML5になってから
  • 今までできたこと（動画見る、ゲーム）→JavaScript、Web標準になった
  • Webサイト制作業界はすでにレッドオーシャン
    • ネット広告代理市場　5,060億円
    • Webインテグレーション市場（サイト制作、運用）　804億円
    • Web業界の三重苦
      • 高度化するニーズ
      • 断片化/多様化する端末
      • 下がり続ける制作単価
    • 減少する法人数
      • 最近は増えているかもしれないがフリーランスが増えた為
      • クライアントとなる法人は減っている
  • HTML5
    • APP基盤となるWeb技術
    • JavaScriptで操作出来る部分が注目されている
      • スレッド、ストレージ、ネットワーク、デバイス
      • アプリケーションプラットフォーム
    • サービスのクラウド化、デバイスのマルチ化
      • hulu、ULTRAVIOLETç­‰
        • マルチデバイスに対応
      • PCだけ対象にして売れる時代ではない
    • Buy once read everywhere
      • 家ではPCで、外ではiPadでといった使い方
    • Pay once, play anywhere
      • テレビで遊んで、続きは携帯でとか
  • 世界のデバイス出荷比率（2011年）
  • アプリ経済
    • 米国では30〜50万人の雇用創出
    • 150億ドルの市場
    • Webとは比較にならない規模
  • ネイティブアプリ開発の問題
    • デバイス毎のに基盤が違う
      • 開発者の確保が難しい、ノウハウ
  • Write Once, Run Anywhere
    • Web標準をネイティブアプリの基盤にしようとする流れ
  • 変換ソリューション
    • Titanium Mobile、Phone Gapç­‰
    • Webからネイティブアプリへ変換
  • 法人システムのシフト
    • Bring Your Own Device
      • 個人所有のデバイスでアクセスする時代へ
    • Consumerization
  • 企業システムのトレンド
    • MDM（Mobile Device Management）
      • 遠隔ロック、スワイプ
    • EAS（Enterprise Application Store）
      • 企業向け自社専用アプリ・ストア
      • 簡単インストール、集中管理
      • オレオレストア
    • MEAP（Mobile Enterprise Application Platform）
      • 開発環境、アプリの配布、管理
  • Webの技術がどこで使われるか
    • Smart Tv
      • タブレットのでかいやつ
    • Opera TV Store
    • ACCESS Netfront ACCESS
    • デバイスの連携
    • デジタル・サイネージ
    • 早すぎたユビキタス
      • Web of Thins
      • あらゆるものがWebに接続する世界
    • 組み込み機器の進化
      • タッチパネルの低価格化
      • スマートデスク（Microsoft Surface）
    • 放送との連携
      • NHK Hybridcast
      • 他の会社も検討中
    • DRM
    • ストリーミング
  • HTML5とアプリの融合
    • 標準ブラウザー方式
    • ハイブリッド方式
      • アプリとしてインストールするけど、中身はWebアプリ
    • 独自ブラウザー方式
      • nottv
        • 携帯で見る放送
      • アプリそのものがブラウザー
    • Webランタイム方式
      • Metro Style
      • Chorome OS
  • Webスキルの応用範囲の拡大
所感

今までWebサイトを作成してた人達がアプリの世界に入ってくるということで、もっと楽しいことができるようになりそうですね。Windows8にしても、HTML5とCSS3でアプリが作れるって事でますます知っておかないといけない分野が広がるというか、「Webサイト作らないからCSSとかJavaScript知らなくていいわ」という考え方はできませんね。

CSS3で変わるWeb制作（鷹野さん）

株式会社スイッチ 代表取締役　鷹野 雅弘（たかの まさひろ）さんのセッション。
CSS3で追加されたセレクターやプロパティの設定を実際に見せながら紹介されてました。

メモ
  • 新しいセレクター
    • jQueryで行ってたおこなっていたことがCSS3でできる
      • last-child疑似クラス　など
    • パターンマッチング
      • 子孫セレクター
      • 奇数、偶数　などなど
      • CSS指定のためのid/classを少なくする事ができる
    • CSS3 Generator
      • 画面で設定しながらCSS3のソースを作ることができる
  • 新しいプロパティ
    • 画像化の手間が減る
      • ページ速度が速くなる
      • メンテナンス性の向上
    • rgba
      • 画像の上に文字を置く時の半透明の枠
    • opacity
      • ボックスの透明度
      • マウスオーバーレイ
        • 画像が変わるとリンクできるとわかる
    • text-shadow
      • テキストの影
      • 質感を挙げる
    • box-shadow
      • 画像の影
    • gradation
      • グラデーション
    • multiple background
      • 複数の背景画像
      • 画像の重ね合わせ
    • border-radius
      • 角丸
    • transform
      • マウスオーバーで拡大とか
    • Web Font
  • CSS3への対応方針
    • 何もしない
    • フォールバック
    • ベンダープリフィックスを使う
    • ライブラリでカバーする
  • 制作ツール
  • ＠ルール
    • メディアクエリー
    • ウィンドウサイズによってレイアウトが変わる
    • PC用、タブレット用、スマホ用
    • レスポンシブWebデザイン
      • 画像とかはPC用なので重い
    • 解像度によってCSSが切り替わる
  • まとめ
    • セレクター　クリーンなHTML
    • プロパティ　画像いらず
    • ＠ルール　レスポンシブWebデザイン

静的なカンプは過去の手法

スクリーンサイズ、解像度、ユーザー設定など、様々な変化要素がある Web デザインですが、未だに静的なカンプをグラフィックツールで作られている場合があります。グラフィックツールでのテキストレンダリングは Web ブラウザのものと異なりますし、ツール上で作られたカンプは限定された環境でみた仮説に過ぎません。しかし、そこで作られた仮説が、あるべき姿として捉えられ、構築されています。作った後に評価が変わったり、作り直しが発生するのも、あるかどうかも分からない仮説を基にしているからなのかもしれません。

こうした状況から抜けるためにも、Webデザイン（又は Web そのもの）の再評価が必要だと考えています。昨年から少しずつ書き溜めている WD101シリーズもその一環です。絵を描くように Web サイトを構築していられない今、何をしたら良いのかという道しるべが必要ではないかと考えています。

http://www.yasuhisa.com/could/article/cssnite-takamatsu/
所感

CSSを触ったことはほぼ皆無ですが、今まで画像を使わないとできなかったことができるようになったとか、その辺はよくわかりました。
最後の「静的なカンプは過去の手法」ですが、確かに動くものを作ってフィードバックをもらった方が早いという流れはWeb業界も同じなんですね。

HTML5によるWebサイト制作の基本（益子さん）

株式会社サイバーガーデン 代表取締役 益子 貴寛（ましこ たかひろ）さんのセッション。
HTML5の文書構造に着目した内容でした。

メモ
  • HTML5概要
    • ドラフト版
    • 勧告になるのを待たず現状の内容で制作
      • 変わったときに直せば良いという感じ
    • 3本柱
      • セマンティクス
        • 文書構造
      • 互換性
        • マルチデバイス
        • クロスブラウザ
        • プラグイン不要☆重要
          • Windows8のIEではプラグインが動かない
          • 他のブラウザも同じ方向
      • Webアプリ
        • APIs
  • 新しい書式
    • doctype、html
      • シンプル
    • セクション要素を使う
      • header,footer,nav,articleç­‰
      • 今まではdiv,div,div
  • クロスブラウザ化
    • html5shivを読み込む
      • HTML5の新要素をJavaScriptで生成する
      • IE6,7,8
  • ブラウザのベースラインの変化
    • XP：IE6→IE8
    • 今後はIE8をベースに考える
  • 新要素
    • セクション要素
    • は？
      • CSSを適用するためのコンテナ
      • JavaScriptで操作するためのコンテナ
      • 構造的な意味合いは全てセクション要素で行う
      • RSS配信、トラックバックするべきものか
    • と
    • ワーク
      • 人によって多少違っててもいい
    • まとめ
      • ノウハウはすぐにはたまらないのまずは使ってみる
        • 自社サイト
        • キャンペーン・特設ページ
        • スマートフォンサイト
      • やってみないと難しい
所感

比較的一般的な話だったのでよく理解できました。とはいってもワークでは考え方とか間違ってましたけど。。
まずは自社サイトで試してみたですね（そんな事する立場じゃないだろって言われそうだけど）

いまからはじめる！スマートフォンサイト（矢野さん）

サイボウズ株式会社 グローバル開発本部 松山開発部 矢野 ありす（やの ありす）さんのセッション。
早くWebサイトをスマートフォン対応しないと時代に乗り遅れるよという内容でした。

メモ
  • スマートフォンの台頭
    • 所有率が1年で16%増えた
    • ガラケーより出荷台数が多い
    • スマホで何をしているか
      • メールの次にサイト閲覧、検索が多い
      • スマホの標準ブラウザがHTML5&CSS3に対応
  • 下準備
    • DOCTYPE宣言
    • 文字コード指定
    • viewportの指定
      • スマートフォン固有
      • ウィンドウサイズの指定
      • 画面の倍率（初期値、最小、最大値）を指定
  • タグ組み
    • ヘッダー
    • ナビゲーション
    • 検索ボックス
      • inputtype="search"
      • プレースホルダ
        • placeholder="文字を入力してください"
        • 薄灰色の文字]
      • 以前はCSSとJavaScriptで大変
    • コンテンツ
    • フッター
  • CSSで装飾
    • 文字に影、角丸、グラデーション、WebFonts
    • コンテンツを横幅に合わせて省略
      • text-overflow
  • まとめ
    • Webサイトのスマホ対応は急務
    • 標準ブラウザはHTML5&CSS3対応
    • 今からならHTML5&CSS3を使うのが良い
所感

自社WebサイトのアクセスをGoogle Analyticsで見てても、スマホからのアクセスが結構多いなぁと感じてたので、やっぱりそうよねーって感じでした。今まで画像とかレイアウト駆使して作成してたデザインが、CSS3だけで実現できるっていうのはいいですね。
セッション後のトークが面白かったです。新しい物好きでiPhoneとAndroid端末を持たれているそうですが、なぜWindowsPhone端末を持っていないのか聞けば良かったなぁと。

地方Web制作会社から考えるHTML5の取り組み（山村さん）

株式会社アイムービック 山村 英五郎（やまむら えいごろう）さん*1のセッション。
前半はHTML5で作成されたサイトの状況と愛媛県のWebサイトの状況を紹介する感じで、後半は個人的に胸熱でしたｗ

メモ
  • フリーペーパー［愛媛美少女図鑑]作ってます
  • 四国GTUG所属
  • 利用状況
    • 国内のスマホサイトはHTML5が多い傾向
    • アイムービックはHTML5の案件が6割
      • 新規案件はほぼHTML5
    • 愛媛では該当サイトが見つからなかった
    • 3割程度
    • 最近作ったサイトはHTMLL5が多い
    • 地方でも増えている
  • 愛媛でできるHTML5
    • 自分で勉強する
    • コミュニティに参加する
    • 勉強会に参加する
    • わかってきたら作ってみる
    • 愛媛で勉強会に参加する上で注意すること
      • 愛媛（四国）の勉強会は少ない
      • 勉強会やります！
        • Creator's Village in Ehime : ATND
          • 6/16(土) 13:00〜
          • 手伝い、セッション、LTしてくれる人募集
所感

愛媛の企業はWebサイトの保有率が他の都道府県に対してかなり低いって話を聞いたことがあったのですが、やはりHTML5対応というところでも後れを取ってるのか〜と。HTML5+CSS3で安くWebサイトを構築・提供して愛媛にある企業の活性化に役立ちたいですね。
後半のCreator's Village in Ehimeの件は全然知らなかったのでとてもワクワクしました。いつも通り微力ですがお手伝いします！

IEのF12 開発者ツールとVisual Studio 2010でHTML5/CSS3/JavaScriptをコーディングする（田中さん）

日本マイクロソフト株式会社 Webエバンジェリスト 田中 達彦（たなか たつひこ）さんのセッション。
Visual Studio 2010を使うといかに簡単にHTMLやJavaScriptのコードが書けるかっていうことをライブコーディングで解説、また、IE8以上に搭載されているF12開発者ツール*3の紹介でした。

メモ
  • Windows8から
    • Windows Store
    • 世界を相手にアプリ開発・商売ができる
  • 今日のデモはVisual Web Developer 2010 Expressでできる
  • ライブコーディング
    • VisualStudio2010で作成されるHTMLページはデフォルトではHTML5じゃない
    • ツールバーにHTML5とかCSS3に切り替えるコンボボックスがある
    • 古いタグはインテリセンスに表示されない＆使ってたら注意してくれる
    • コードスニペット
      • ul>li*3[tab]
    • CSSファイルやJavaScriptファイルをドラッグ＆ドロップで参照用のコードが生成される
  • F12ツール
    • ページを表示してF12
    • マウスクリックで該当する箇所の要素を見つけたり、内容を変えたりできる
    • どれくらいの処理があって、時間がどれくらいかかっているか
    • ネットワークタブ
      • HTTPキャプチャ
        • グラフ形式でコンテンツの取得にかかる時間がわかる
        • ダブルクリックで詳細情報が表示される
  • まとめ
    • 入力支援機能が強力なのでメソッドメイトか覚えない
    • 一字一句入力したい人にはお勧めしません
所感

ドラッグ＆ドロップでJavaScriptやCSSの参照コードができるというのは知りませんでした。VisualStudioのすごさを改めて見せつけられました。Visual Studio万歳！
Webサイト制作の現場にいないのでピンとこなかったのですが、同じHTMLやCSSでWebサイトを作る場合でもDream WeaverとVisualStudioは全くアプローチが違いますよね。

  • Dream Weaver
    • ソースをガリガリ書くというよりはツールからプロパティとか設定して作っていく感じ？
      • MS製品でいうならBlendみたいなイメージ
    • 主にデザイン系の方が使われる感じ
  • Visual Studio
    • インテリセンスなどを駆使してソースを書きまくる
    • 開発者がWebサイトの制作に使う感じ

という理解でだいたいあってるのかな？

Internet Explorer 10とマイクロソフトにとってのHTML5（春日井さん）

日本マイクロソフト株式会社 デベロッパー＆プラットフォーム統括本部 春日井 良隆（かすがい よしたか）さんのセッション。
自転車が好きで月曜から3日ほど掛けてしまなみ海道で尾道まで行って東京に帰られるそうで、同じ自転車好きとしてはとてもうらやましいですねｗ
スライドはこちら：Internet Explorer 10とマイクロソフトにとってのHTML5 in 松山

メモ
  • IE6をいかに早く無くすか
    • 3/28から自動アップグレードが始まった
    • XP SP3は2014å¹´4月8日でサポートが終了
      • セキュリティアップデートは全くされなくなる
    • 米国は1％を切った
  • なぜHTML5にMSが投資しているのか
    • デバイスの変化
    • スマホ、タブレットの増加
  • なぜスマホを買ったのか
    • PCサイトを閲覧できる
    • アプリが豊富
    • PCメールを送受信できる
  • WebページとWebアプリ
    • Webページ
      • 紙媒体の延長
    • Webアプリ
      • PCにインストールしていたもの
      • アプリケーションをHTMLの標準技術で提供できる
  • JavaScript重要
    • JavaScriptができない人はちょっとね…
  • マイクロソフトのアプローチ
    • セキュリティ関連など、検証に検証を重ねてリリース
      • 問題が見つかって機能を削除したりすることがないように
    • Choromeã‚„Firefoxに対して搭載が遅くなるのはそのせい
  • Web Sockets
    • 双方向通信
    • HTMLのリクエスト、レスポンスとは違う
  • File API
    • ブラウザにドラッグ＆ドロップ
  • ハードウェアアクセラレーション
    • HTML5は画像処理が多くなる傾向
    • IE9、IE10で採用
  • The Beauty of the Web
  • SVG
  • Media Capture API
    • Webからライブデバイスに接続
    • 録画もできる
    • MIDI APIの作成も進んでいるとか
  • HTML5
    • HTML5 Native to Windows
    • Windows8
    • デスクトップのIEとMetroのIE
      • エンジンは同じ
      • MetroのIEはプラグインに対応しない
        • Silverlightも対応しない
        • iOSがFlashをサポートしないのと同じ理由
          • 省電力
          • 機能強化していくのでプラグインは要らない
  • NUI：Kinect
    • Natural User Interface
    • Windows用の純正SDKをリリースしてる
    • 医療現場
    • デジタルサイネージ
      • 子供が多いと子供向けの広告を出すとか
    • BMI（Brain Machine Interface）
      • 脳波で操作
  • Productivity Vision
    • マイクロソフトが作り出そうとしている世界
所感

Microsoftの戦略とかビジョンの話で聞いてとてもワクワクしました。若い頃は脱Microsoftなど考えたこともありますが、今はすっかりMicrosoftラブですｗ 開発ツールなどはそれなりにお金はかかりますが*4、それに見合うだけの至れり尽くせり感や完成度の高さが大好きです。

全体通して感じたこと

今まで参加した勉強会と違って、女性の比率がとても高かったので新鮮な雰囲気でした。
笑うところで笑いが起きないなど、少し登壇者にとっては戸惑うところもあったのかもしれませんが、真面目な愛媛県人が多かったから？あまり勉強会慣れしてなくて堅い雰囲気だったから？だと思います。
最初はWebサイト制作に携わっている人向けの話が多いのかなって少し場違いな気がしてましたが、いざ始まってみると自分のようなWebサイト制作に関わりがない人でも十分理解できて*5楽しめる内容で良かったです。
Webサイト制作のスキルでアプリ開発に乗り出せるという趣旨の話が多かったですが、我々のようなアプリケーション開発者もHTML5+CSS3+JavaScriptができればWebサイト制作もアプリ開発もできるようになるわけで、分野によっては今後Webサイト制作とアプリ開発っていう垣根がなくなっていくのではないかと感じました。

振り返り

良かったこと
  • Creator's Villedgeの件で拍手した（おい、みんな拍手しようぜ的な感じで）
  • 手伝いますって手を挙げた
まずかったこと
  • あまり名刺交換できなかった
  • 隣の人と仲良くなれなかった
やってみること
  • Creator's Villedgeでお手伝い
  • MetroStyleアプリの作り方を勉強する（LTできるくらいに）

*1:マウスカーソルを写真の上に載せるとろくろを回してる写真が

*2:勝手に[https://www.google.com/calendar/embed?src=8d01gr1a254upoumsr5ivo6oqc%40group.calendar.google.com&ctz=Asia/Tokyo:title]作った

*3:F12を押すと表示されるので

*4:Express Editionなら無償ですが

*5:理解したつもりになれて