「HTML5勉強会 名古屋#2」に参加しました!

Published

勉強会風景写真

勉強会風景


「HTML5勉強会 名古屋#2」に初参加してきました!机が無い方もいるくらい満席で人気な勉強会でした。今回のテーマは「マークアップ」です。結構知らない用語がでてきたので勉強になりました。次回のテーマは「CSS」を予定しているようです。
「HTML5勉強会 名古屋#2」はWCANのようなセミナーとはまた違った感じがして新鮮でした。形式としては、持ち時間は1人20〜25分で、3人の方のお話を聞くことができます。スピーカーは立候補した人ができるようで、次回のスピーカーの募集も会場で行っていました。

HTML5で実現させるセマンティック・ウェブ

はじめは石原さんによるセマンティック・ウェブのお話でした。

セマンティックとは

「意味」、「意味論の」という意味。人を介さずにコンピューターが自動的に検知する。WEBをデータベース化しようという取り組み。

リッチスニペット


Googleレシピのスクリーンショット

Googleレシピ

有名なものにgoogleレシピなど。itemscopeなどででメタ情報を入れている。そこからGoogleは情報を引き出している。私が補足のため参考にしたブログ:Microdataについて調べた。SEOとかSchema.orgとか書き方とか。 | Shinichi Nishikawa's blog

これからどうなっていくのか

これからはセマンティックが進んでいきます。そのため、意味を持ったマークアップが必要になってきます。やがて、Siriのような検索ができる日が来るかも…。

AngularJS Bootstrapでさくっと作れるアプリ

次は上田さんによる「AngularJS Bootstrapでさくっと作れるアプリ」です。

Go言語…Googleが開発した言語
CRUD…Creative・Read・Update・Delete
RESTful API

お話の中で紹介されたもので気になったもの


AngularJS

  • Google製MVCフレームワーク

AwesomeFont

  • BootstrapのアイコンをWebfontにする(通常はpng)
  • アニメーションが使える(読み込み中のアイコンとか)

このお話の最中に驚いた事は、普段みなさんカタカタとパソコンでメモを取っているのにBootstrapのお話のときは全くパソコンの音がしなかった事です。それぐらいBootstrapが有名になったんだな〜と、自分の中で勝手に解釈しちゃいました。

webアプリのマークアップってどうすればいいの?

最後にアクアリングの山田さんによる「webアプリのマークアップってどうすればいいの?」です。このお話ではwebアプリの作り方ではなく、取り組み方を教えていただきました。

WebサイトとWebアプリの違い(Webアプリの特徴)

  • 何かを体験させる
  • やりたいことを実現させるためにリアクションを返してくれる
  • 画面内の変化が激しい
  • ブラウザの進化によってできることが格段に増えた
  • 協業前提の考え方

設計するとき

なにでできているかは知っておく。日頃から開発ツールで調べる癖をつけておきます。(WebアプリはHTMLとCSSでできている!)Javascriptとか書かなくてもどんな機能で構成されているかは大雑把で良いので列挙しておくといいです。

デザインするとき

Webアプリを作るときにデザイン行程をしっかりしておかないと、後のマークアップにダイレクトに響きます。お話にあった例では、Photoshopの乗算機能を使うと依存関係ができてしまうので、アウトです。背景だけでもバリエーションがたくさんあるので、デザインするときにきちんと話し合っておきましょう!

まとめ

ウェブ制作はどんどん複雑化されていく。だから小さく保つ。
ページ単位ではなく、機能単位で。
他の人とイメージの共有。
ちょっとずつできることを増やしていく。

「HTML5勉強会 名古屋#2」のまとめ

なんだか私には知らなかったことがあり、ちょっと難しかったという印象です。だけど、それって同時に新しい事を知れたっていうことなので私としては収穫があったと思っています。また暇なときにWebアプリとか調べてみようかな、と思いました!次回のテーマは「CSS」で、4月19日を予定しているようです。

関連している記事

著者について

森田 かすみ

有限会社アップルップル所属。マークアップエンジニア→インハウスデザイナーの経歴を経て、今はUI/UX/サービスデザインを勉強中。呼ばれれば登壇もします。Frontend Nagoya主催。ストレス発散方法はかっぱのイラストを描くこと。