「HTML5感。~HTML5の最新動向ともっと使いたいHTML5のノウハウ~」に参加してきました

こんにちわ、ビジネス開発室の ton です。

2/11(土)にLPI-Japanさま主催のイベント、「HTML5感。~HTML5の最新動向ともっと使いたいHTML5のノウハウ~」に参加してきました。このイベントは”HTML5の最新情報を楽しんで聴けるセミナー”として、定期的(3か月毎くらい)に開催されているもので、今回が5回目の開催になるそうです。ちなみに私は約1年ぶり、2回目の参加になります。

開催概要
http://html5exam.jp/newsdetail/seminar20170211/

プログラム

初級者向けセッション 中級者向けセッション
ディスプレイの中のバーチャルな世界からリアルな世界に広がるHTML5
有限会社futomi / 株式会社ニューフォリア 羽田野 太巳 氏
プロジェクトを殺さないCSS設計
株式会社 ピクセルグリッド 高津戸 壮 氏
CSSの便利機能で楽しちゃおう!
NTTソフトウェア株式会社 鈴木 雅貴 氏
HTML5 Web アプリケーションのセキュリティ・マネジメント編
株式会社シーピーエス 村地 彰 氏
<input>は地味だが役に立つ
株式会社フォーク 棚澤 優介 氏
SCSSの関数機能を利用した効率的なCSS作成
株式会社コムセント 関口 和真 氏
HTML5を使った開発にも役立つVisual Studio Code
日本マイクロソフト株式会社 戸倉 彩 氏

初級、中上級者向けに分かれているところは、中上級者向けのセッションを聴講してきました。
聴講したセッションについて、概要と個人的にポイントだと思った点をお伝えします。

ディスプレイの中のバーチャルな世界からリアルな世界に広がるHTML5

HTML5とは何だったのか。
まずはAppleのiPhone発表からはじまるHTML5の歴史を振り返り、Web技術の組込み機器やIoT分野への拡大について話されていました。

GotAPI
https://device-webapi.org/gotapi.html

GotAPIはデバイスウェブコンソーシアムがテーマとして扱っている技術で、WebブラウザからBluetoothなどを経由して外部の機器へアクセスするインターフェースを提供しています。セッションでは、GotAPIを利用して、ブラウザからPTZカメラを操作するデモを紹介いただきました。(PTZカメラへの熱い愛を感じました)

また、羽田野氏が個人的に注目しているAPIは以下の4つだそうです。

Payment Request API
オンライン決済の共通フレームワーク
Web Authentication
個人認証のフレームワーク
Web Bluetooth API
WebブラウザからBLEにアクセスできる!
Web USB API
WebブラウザからUSBデバイスにアクセスできる!

プロジェクトを殺さないCSS設計

「CSS設計方法論」の入門として5つの手法を紹介されていました。

OOCSS
ページをレゴの集まりと考え、構造とスキンを分離して定義する
BEM
要素をBlock、Element、Modifierの3つに分類する。命名規則が特徴的
SMACSS
CSSをBase、Layout、Module、State、Themeといったルールによって分類する
Atomic Design
UIデザイン手法。要素を抽象化して考える
Enduring CSS
CSSを名前空間によって分離する

CSS設計をはじめるには、まずは有名なBEMを中心に学び、SMACSSなどその他の手法も必要に応じて取り入れていくのがよさそうです。

HTML5 Web アプリケーションのセキュリティ・マネジメント編

「情報セキュリティ」の3大定義(機密性、完全性、可用性)から、実際にやるべき施策まで、セキュリティのマネジメントについて幅広く解説されていました。

Content Security Policy (CSP)
https://developer.mozilla.org/ja/docs/Web/Security/CSP

CSPはXSS(クロスサイトスクリプティング)を防ぐために定められたポリシーで、サイトに導入すると、インラインJavaScriptの利用などが禁止されるものです。すぐの導入が難しい場合、まずはポリシーに違反する場合に通知が送られる、Content Security Policy Read Only の導入がオススメとのことです。

SCSSの関数機能を利用した効率的なCSS作成

SCSSは、拡張子「SCSS」のファイルで作られ、トランスパイラ(Gulpが有名)でCSSに変換されます。通常のCSSにはない以下のような機能が利用できます。

変数
CSSの値に「$変数名 : xxx;」で定義した変数の利用が可能
@mixin
CSSをまとめて定義して再利用可能(mixin集「bourbon」が最近人気!)
@function
関数を定義。ループや分岐を利用してプログラム的なCSSの記述が可能

HTML5を使った開発にも役立つVisual Studio Code

Visual Studio Code
https://code.visualstudio.com/

マイクロソフト社より2016年に公開されたテキストエディタ「Visual Studio Code」を紹介いただきました。メニューが日本語に完全対応していて、Markdown形式のプレビュー機能や、Gitとの連携など、うれしい機能が搭載されています。

感想

今回のHTML5感。は、会場が小さめ&人数も少なめで、講演者の方との距離が近く感じられるイベントでした。

セッション終了後のビアバッシュにて何名かにお話しを伺ったところ、初参加の方が多かったようです。皆さんの職種もWebデザイナー、SE、コンサルタント、学生さん・・・と様々で、HTML5が幅広く使われていることを感じました

次回の開催は5/13(予定)だそうです。興味のある方はHTML5プロフェッショナル認定試験公式サイトをチェックしてみてください!

seman
おみやげでいただいたセマンくん人形
※ヒゲが固めの素材で子どもが遊ぶには少々心配だったため、毛抜きで抜いてしまいました。ごめんなさい。。


SNSでもご購読できます。