セミナーレポート『HTML5感。』

みなさま
 
お疲れ様です。
大澤です。
 
暑い日が続いたり、そうかと思うと肌寒い日が訪れたりと、
体調管理には気を付けたいものです。
 
さて、終業後や休日を活用し、面白そうな勉強会には積極的に参加するようにしていますが、
その中から、参加したセミナーのレポートを今月のブログネタとしてお伝えしたいと思います。
 

『HTML5感。
~HTML5の最新動向と明日から使いたくなるHTML5のあれこれ~』

http://html5exam.jp/newsdetail/seminar20170513/
LPI-Japan様の開催結果報告はこちら
http://html5exam.jp/newsdetail/seminar20170513_report/
 
50分のセッションが合計8枠。
5分のLT(ライトニングトーク)が2枠。
午後からは、会場を2つに別け、拝聴したいセッションを選ぶ形になります。
どれも聴きたい内容ばかりでしたが、大澤の選んだセッションの内容と感想を以下に記載します。
 

「Animate the Web! – ウェブアニメーションの今とこれから」

ヤフー株式会社 メディアカンパニー 検索開発本部 デザイン部 デザイナー 吉田 淳 様
内容
アニメーションとは?
・状態が時間の経過と共に変化するもの。
・状態と状態の間をつなぐもの。
・言葉を使わず多くの情報を伝えられるもの。
・次にするべき行動のヒントになり得るもの。
と定義し、現在のWebで使用されているJavaScript、CSS、SVGアニメーションのそれぞれの長所と短所を紹介されていました。
・JavaScript

長所 : ユーザーの行動に紐づけることができる。

短所 : ラーニングコストが高い。アニメーションを実装するための言語ではないため1から実装しないといけないが、実装が難しい分高度なアニメーションが作れる。

・CSS

長所 : シンプルで分かりやすい、なめらかなアニメーション作成が可能。

短所 : 細かい制御ができない。自動的に再生させることが出来ない。

・SVG

長所 : パス上をなぞるアニメーションや、形状を変化させるアニメーションなど、非常に高い表現力である。

短所 : サポートブラウザがあまりない。ブラウザの実証が難しくChromeで廃止されてしまう。バグも多い。

感想
Web上で表現可能なJavaScript、CSS、SVGアニメーションのそれぞれの長所と短所を非常に分かりやすくまとめられており、大変勉強になりました。
今後、動作を与えたりするのに、どの手段を選べばいいのかなど、役立ちそうです。

01

▲登壇される吉田 様
 

「HTML5ゲーム開発トレンド 〜 “たーのしー!”を生み出す舞台裏」

フリーランス テクニカルディレクター/ゲームクリエイター 勝部 麻季人(かつべ まきと)様
内容
「ソシャゲ」と呼ばれていた頃からの時代の移り変わりの話や、最近の開発ツールとしての「three.js」「A-FRAME」といったJavaScriptライブラリの紹介。「unity」「UE4」「PlayCanvas」「Liva2D」「SpriteStudio」といった本格的なゲーム開発に用いられるツールの紹介をされていました。
「ゲーム制作にHTML5は必要か?」という問いかけに対して、「HTML5も永久のものではなく、どの言語を採用するのかはさほど重要ではなく、ツールの環境の方が重要」と結び、「ゲーム開発はHTML5習得のための最適な教材であり、ゲーム開発自体をゲーム感覚で楽しめる」と括られていました。
感想
HTML5、JavaScriptでのゲーム制作が本当に楽しそうに感じました。
「ゲーム開発自体をゲーム感覚で楽しめる」とは正に名言だと思いました。

02

▲登壇される勝部 様
 

「事例で語る!一歩進んだ企業システムを実現するHTML5のちょっと深イイ話」

新日鉄住金ソリューションズ株式会社 技術本部 システム研究開発センターイノベーティブアプリケーション研究部研究員 三淵 喬 様
内容
企業システム開発に役立つ機能の具体例と、「Intersection Observer」「requestAnimationFrame」「Web Worker」「Service Worker」「User Timing」「Console」といったJavaScript APIと、それぞれの特徴について紹介されていました。
感想
現在HTML5プロフェッショナル認定資格 レベル2に向けて勉強中なので、JavaScript APIのことを拝聴でき勉強になりました。

03

▲登壇される三淵 様
 

「CSSとCanvasを使ったインタラクションの作例紹介」

テクニカルライター ソフトウェアトレーナー フロントエンドエンジニア 野中 文雄 様
内容
複数のCSSを組み合わせた、非常に面白いインタラクティブな表現を紹介されていました。
平面的な画像を立方体の様に回転させる効果や、平面的なアイコンを立体的に見せる効果、マウスポインタに追従する際の軌跡に速度と時間遅延、太さの変化を与えるなど、複雑な計算式を利用することで更に表現力に富んだ効果を与えることができる作例を紹介されていました。
作品はこちらのサイトに公開されております。
http://fumiononaka.com/samples/html5/html5_feeling_170513.html
感想
野中先生の著書「ActionScript3.0プロフェッショナルガイド」や「WebクリエイターのためのCreateJSスタイルブック」を愛読していたので、生の登壇に非常に感動しました。
少々、難しいのですが数式を利用した動作付与はアニメーション作成に参考になります。

04

▲登壇される野中 様
 

「CSSグリッドで作るレスポンシブサイト」

HTML5アカデミック認定校 株式会社フォーク ウェブインテグレーションユニットフロントエンドエンジニア 目黒 英治 様
内容
「CSSグリッド」「floatを使用したCSSグリッド」「flexboxを使用したCSSグリッド」「レスポンシブ対応」を柱に、floatやflexboxを使用した際に、それぞれどのような表現になるのか、ハンズオンを交えて紹介されていました。
感想
ハンズオンでの進行でしたので、少しづつ出来上がっていくサイトにワクワクしながら拝聴することができました。
基本的なレイアウトデザインについてのfloatやflexboxの紹介でしたので非常に参考になりました。

05

▲登壇される目黒 様
 
全体の感想
すべてのセッションにおいて、JavaScriptやCSSアニメーションのことや、レスポンシブデザインのことなどを拝聴でき大変勉強になりました。
昨年の夏に初めて参加した「HTML5感。」
今回で3回目の参加になりますが、毎回楽しませていただいております。
 
土曜日の開催にもかかわらず、非常に多くの方々が参加されていました。
会場を見渡すと、熱心にメモをとったり、スライドを撮影したりと、学ぶ意欲と情熱が伝わってきます。
 
DTPとはメディアが異なりますが「物作り」という視点から考えると、手法や扱うアプリが異なるだけで、より良く見せようとする作り手の気持ちは共通だと感じます。
色々なことを学び、業界の垣根を少しづつ低くするよう努力したいと思います。
実は大澤もLT枠で登壇しており、過去のブログで記載したDTPアプリからHTMLを書き出すツール作成をネタにしています。
少しは何かのお役に立てればと思います。
 
主催のLPI-Japan ご担当者様。セマンくん。LTをさせていただきありがとうございました。
懇親会の席でお話をさせていただいた方々、登壇された先生方、お世話になりました。
この場をお借りして御礼申し上げます。
 
※「セマンくん」は、HTML5プロフェッショナル認定試験のマスコットキャラクターです。
 この記事のアイキャッチの画像にさせていただきました。
 
長くなりました。
最後まで読んで下さり、ありがとうございましたm( _ _ )m