CSS Nite x Microsoft「HTML5+CSS Web Camp 2012」

何年も前から話題にのぼっているHTML5&CSS3ですが、みなさんは業務で使っていますか? きっと実装する機会は少ないのではないでしょうか? 新しいブラウザやスマートフォンの普及が後押しして、HTML5&CSS3は今まさにさまざまな可能性の花を開こうとしています。また、すでに実装し最先端の取り組みをしている企業も出てきました。

多数書籍を執筆しているHTML5&CSS3のエキスパートから、HTML5&CSS3に取り組むブラウザベンダーの方まで、さまざまな立場の講師陣がそれぞれ違った専門的な角度から、HTML5&CSS3導入のために役立つノウハウと、あと一歩を踏み出す勇気を伝授いたします。

開催日程

次の6会場で開催します。

タイムテーブル

会場ごとに開始時間などが異なりますが、おおよそ次のようなタイムテーブルで進行します。

  ステージ 時間 出演者A 出演者B
  開場      
  オープニング      
1 基調講演 (40分) 羽田野 太巳 益子貴寛
2 CSS3基礎 (40分) 鷹野 雅弘
  休憩      
3 HTML5基礎 (40分) 益子貴寛
4 (地元枠) (30分) 地元スピーカー
  休憩      
5 Visual Studio 2010 (40分)

物江 修

田中 達彦
6 IE10 (40分) 春日井 良隆
  終了      

セッション内容と講師プロフィール(共通)

各会場とも、次の6セッションは共通です。
ただし、新潟、青森でのキーノート(基調講演)セッションは、益子さんが担当します。

キーノート:HTML5が拓く未来 ~HTML5との正しいつきあい方~

Web業界でHTML5を知らない人はいないといっても良いほど、ここ数年、HTML5の話題で持ちきりでした。マークアップが新しくなっただけでなく、さまざまなAPIが加わり、Web標準でリッチなコンテンツが制作できるようになったことはご存じの通りです。スマートフォンやタブレットの普及の後押しもあり、すでにWeb制作の現場ではHTML5を積極的に取り入れていると言えます。しかし、HTML5をはじめとしたWebテクノロジーの応用範囲はますます広がりを見せ、もはやWebページという文脈では語ることができないテクノロジーに進化しようとしています。

本講演では、現在のHTML5の状況をおさらいし、今後、HTML5をはじめとしたWebテクノロジーが世の中にどのような影響を与えていくのかを考察します。そして世界のプレーヤーたちがHTML5をどう捕らえ、それをどう活かそうとしているのかを紹介します。

HTML5をWebページの進化という文脈で捕らえていると、将来を大きく見誤ります。今やWebテクノロジーはアプリケーション基盤になろうとしているとよく言われます。これは何を意味するのか、将来Webはどうなろうとしているのか、みなさんのスキルは将来的にどの分野で活かせるのかについて、考察していきます。

すでに成熟産業になってしまったWebページ制作業界でトップを目指してがんばるもヨシ、Web技術のスキルを応用して新たな世界にチャレンジするのもヨシ。今後、Web業界はどの方向へ進むべきなのか、そして、みなさん個人はどういった方向に軸足を置くべきかを考えるきっかけになれば幸いです。

写真:羽田野 太巳羽田野 太巳(はたの ふとみ)

有限会社futomi 代表取締役

1971年岐阜県生まれ。

ホスティングサーバー(共用サーバー)でも利用できるWebアプリケーションの独自開発・販売を手がける。主にPerlによるWebシステム制作が中心。オーダーメードのWebアプリケーション制作・Webサーバー管理業務も手がける。

2007年にHTML5.JPを開設し、Canvasを使ったJavaScriptライブラリの開発、HTML5の最新情報の発信、HTML5関連仕様の日本語訳を手がける。

主な著書に、『徹底解説HTML5マークアップガイドブック 最終草案対応版』(秀和システム)、『徹底解説 HTML5 APIガイドブック ビジュアル系API編』(秀和システム)、など。

CSS3で変わるWeb制作

角丸、ドロップシャドウ、不透明度などのCSS3のプロパティを使うことで、これまで画像を使用しなければ実現できなかった表現をCSSのみで実装できるようになります。

すでにスマートフォン向けのサイト制作では常識になっている一方、CSS3をサポートしないブラウザーでは、それなりの実装を行うグレースフル・ディグラデーションという考え方も出てきています。

このセッションでは、CSS3のプロパティやセレクタの中でのよく使うものにフォーカスし、その使いどころや注意点をデモを交えて解決します。

写真:鷹野 雅弘鷹野 雅弘(たかの まさひろ)

株式会社スイッチ

Webサイトの構築やコンサルティングを中心に、WebやDTPに関しての講演やトレーニングのほか、スクールなどのカリキュラム開発も手がける。テクニカルライターとして10冊以上の著書を持つほか、書籍の企画や編集なども行っている。
2005年からCSS Niteを主宰。

主な著書に『10倍ラクするIllustrator仕事術』(共著、技術評論社)、『効率的なサイト制作のためのDreamweaverの教科書(CS5.5対応版)』(共著、マイナビ)、企画編集を行った書籍に『現場のプロから学ぶXHTML+CSS』(マイナビ)など。

HTML5によるWebサイト制作の基本

HTML5でWebサイトを制作する第一歩は、「これまでのHTMLやXHTMLとどう違うのか」「どのような点に気をつけて制作すべきか」のふたつを理解することです。

また、便利なライブラリやフレームワークが登場し、制作環境の整備や下準備の手間がだいぶ小さくなってきています。これらをどのようにつかいこなすか、自分たちのワークフローに吸収するかが、効率的なアウトプットのために不可欠です。

HTML5の概要、書式、新要素と新属性、適切な構造化とアウトライン、要素選びで迷いがちなポイントなどベーシックな内容と、ライブラリやフレームワークの活用、クロスブラウザ対応など実践的な制作手法を、デモをまじえて解説します。

写真:益子貴寛益子貴寛(ましこ たかひろ)

株式会社サイバーガーデン 代表取締役

1975年、栃木県宇都宮市生まれ。

Webサイトのコンサルティング、Webサービスの企画・制作、Webテクノロジー関連の執筆や教育活動などに従事。

スマートフォン向けWebサービス、HTML5、CSS3、各種APIを利用したWebサービスの開発にも積極的に関わる。

主な著書に『Web標準の教科書』(秀和システム)、『現場のプロから学ぶXHTML+CSS』(共著、マイナビ)、『Web検定 標準ガイドブックシリーズ』(監修、ワークスコーポレーション)など。

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

HTML5にこれだけの注目が集まる中、WebデザイナーやWebデベロッパーはどのようなツールでHTML5を制作すべきかに頭を悩ませているのではないでしょうか?

このセッションではIEに搭載されているF12開発者ツールや広く普及しているIDE -Visual Studio 2010を用いたHTML5やCSS3のオーサリング、JavaScriptのプログラミング、デバッグをご紹介します。

写真:物江 修物江 修(ものえ おさむ)

日本マイクロソフト株式会社 Webエバンジェリスト

.NET 黎明期より、マイクロソフトと NTT docomo のジョイントベンチャー企業にて.NET Framework を使用したサービス開発に携わる。2004 年 3 月、マイクロソフト・アジアリミテッド入社。インターネット関連の開発製品のサポートエンジニアを経て現職に。現在は、マイクロソフトのWeb技術を広めるべくOSSのイベントなどにも出没中。

写真:田中 達彦 田中 達彦(たなか たつひこ)

日本マイクロソフト株式会社 Webエバンジェリスト

日本マイクロソフトのエバンジェリスト。担当分野はWindows Client。「Windows Phoneゲームプログラミング」や「ゼロからはじめるプログラミング」など著書、執筆多数。最近では日経ソフトウエア2012年3月号にも記事を執筆。趣味は旅行。最近の趣味はピアノと着物。
田中達彦のブログ

Internet Explorer 10とマイクロソフトにとってのHTML5

Internet Explorer 9から本格化したHTML5の実装はInternet Explorer 10でさらに拡充されます。このセッションでは、Internet Explorer 10で新たにサポートする HTML5 の関連機能をはじめ、もはやブラウザーに留まらないマイクロソフトにとってのHTML5対応について、実際の製品やサービスを取り上げながらご紹介します。

写真:春日井 良隆春日井 良隆(かすがい よしたか)

日本マイクロソフト株式会社 デベロッパー&プラットフォーム統括本部

岐阜大学を卒業後、大沢商会を経て、アドビ システムズに入社。

After EffectsやPremiereといったビデオ編集ツールのマーケティング一筋の10年を過ごすなかで、マクロメディアとの合併後にはFlashのマーケティングにも関わる。2007年1月、Expressionのプロダクトマネージャーとして、マイクロソフトに入社。その後、Silverlightのプロダクトマネージャーを兼務し、両製品のマーケティングを統括する。2009年7月、エバンジェリスト部門に異動。ユーザーエクスペリエンス (UX) と、その中核技術であるSilverlightとInternet Explorer、HTML5を担当。HTML5の中では<video>が一番得意。

セッション内容と講師プロフィール(地方版)

各地方版では、地方版ごとに地方枠セッションをご用意しています。

岡山:enchant.jsでゲームを作ろう!

「enchant.js」はHTML5とJavascriptをベースとした、ブラウザーで動作するゲームを開発出来るゲームエンジンです。 Windows、Macはもちろん、AndroidやiPhone等のスマートフォンで動作するゲームを気軽に開発することが可能です。

今回はenchant.jsの主な機能と、実際にゲーム開発を行う場合のテクニックや苦労話、ゲーム以外でのenchant.jsの活用法をデモを交えながら紹介します。

写真:物江 修山川 祐一郎(やまかわ・ゆういちろう)

山川製作所 代表

地元システム会社、地元Web・イラスト制作会社、鎌倉市の一般企業を経て2010年に独立。
オーダーメイドのWebアプリケーション開発を主に、スマートフォンアプリの開発、Webサイトデザイン、Flash制作等を行う。2011年より岡山でスピーカー活動を開始。

新潟:スマートフォン向けウェブサービスをHTML5でバージョンアップ

既に運用しているウェブサービスをHTML5で置き換えたらどんなことができるのか?
電子書籍サービスmixPaperを例に実際に試してみました。

写真:物江 修栃倉 淳(とちくら・じゅんこ)

株式会社ピーアンドエム

1998年、新潟大学教育学部卒業後、映像制作プロダクションに入社。2003年にピーアンドエム設立に参画。
WEBサイト構築のデザイン及びディレクションのほか、近年では自社開発案件として電子書籍配信サービスやスマートフォン向けアプリのディレクションに関わる。
新潟ADC部門賞受賞(2010、2011)。新潟アートディレクターズクラブ会員。NPO法人新潟地酒普及委員会会員。

青森:すばやく小さくはじめられるHTML5×CSS3×JavaScriptで青森のコンテンツをつくる

このセッションでは、Googleストリートビューのようなコンテンツを自分で簡単に作ることができるOctPhotoVRの事例紹介を通して、地域のWeb制作者にとってのHTML5×CSS3×JavaScriptの可能性と限界を探ります。

OctPhotoVRのシステムは1人月以下の短期間で開発されています。また、中三デパート、青森県立美術館、三内丸山遺跡縄文時遊館のコンテンツを、高校生や大学生や一般参加者が短時間のワークショップなどで制作しています。

写真:物江 修

小久保 温(こくぼ・あつし)

青森大学
ソフトウェア情報学部 准教授

学生時代は理論物理学を専攻。コンピュータを研究で使っているうちに魅力にとりつかれて、そちらが専門に。Webとは初期の頃からのお付き合い。 HTML5×CSS3×JavaScriptで短期間で開発した3DパノラマビューアーOctPhotoVRは、青森県立美術館のワークショップでも使わ れた。Web以外では、青森をまるごとデジタル化した「デジタル青森」、視覚障害者の方も楽しめる「触れる絵画」などに取り組んでいる。

仙台:HTML5とCSS3でスマートフォンサイトの表示高速化

スマートフォンサイトをHTML5+CSS3で構築する際のメリットやテクニックの中から特に表示の高速化についてご紹介します。

本セッション内容はPCサイトをスマートフォンで閲覧するといったケースでも同様に有効ですので、これからHTML5+CSS3に触れる方にはきっかけにしていただければと思います。

若林 怜帆人(わかばやし・れおと)

顔写真:有限会社ノヴァトレード 取締役

1981年、東京都生まれ。

ネットショップ運営、Webシステム製作、講師業。専門はLAMP環境で運用できるWebアプリケーション開発及び同環境構築。仙台市・宮城県人材育成事業Webデザイナー及びネットショップ実務士育成講座担当講師。

松山:いまからはじめる! スマートフォンサイト

スマートフォンが台頭する昨今、WEBサイトのスマートフォン対応は急務です。

スマートフォンサイトを制作するにあたり、 新しく設計しなおす必要があること、内蔵ブラウザがWEB標準に追従していることから、 HTML5やCSS3を試すには格好の実験場といえるでしょう。

いまからはじめる!をテーマに、HTML5やCSS3を使用した スマートフォンサイトの制作についてご紹介いたします。

矢野 ありす

サイボウズ株式会社 グローバル開発本部 松山開発部

サイボウズ デヂエ、サイボウズ Office の開発に携わる。
サイボウズ Office 9 にて 主にフロントエンドの実装に従事。

松山:地方Web制作会社から考えるHTML5の取り組み

スマートフォンが台頭する昨今、WEBサイトのスマートフォン対応は急務です。

スマートフォンサイトを制作するにあたり、 新しく設計しなおす必要があること、内蔵ブラウザがWEB標準に追従していることから、 HTML5やCSS3を試すには格好の実験場といえるでしょう。

いまからはじめる!をテーマに、HTML5やCSS3を使用した スマートフォンサイトの制作についてご紹介いたします。

山村 英五郎

株式会社アイムービック システム開発部

1979年、兵庫県神戸市生まれ。

地方Web制作会社から考えるHTML5の取り組み
愛媛のWeb制作会社のいちWebシステム開発者の視点から、地方におけるHTML5に対する取り組みとこれからの可能性についてお話しさせいただきます。

神戸で業務系のクライアント・サーバーシステムやWebアプリケーションの設計・開発に携わっていたが、結婚を機に愛媛に移住。
2008年にアイムービックに入社し、現在はWebアプリケーションやAndroidアプリケーションの設計・開発に従事。

高松:HTML5+jQueryを活用したデジタルサイネージの実装

HTML5の実装事例としてスマートフォンが多く取り上げられますが、今回はデジタルサイネージを題材にセッションを展開します。

ブラウザをフル画面表示させ、それを大型のディスプレイに表示させることで簡単にサイネージを構築できます。ビデオ再生やオフライン環境でも動作させるなどHTML5を使うメリットを多いのもサイネージです。

また、jQueryのプラグインを使ってテキストにアニメーション効果を付ける方法も紹介、すべてHTML5で完結させるのではなく、jQueryを使うことでクロスブラウザー処理の手間も省けます。

英 誠一朗

株式会社 四国新聞社
メディア室メディア事業部
四国新聞メディア株式会社 デジタル事業部マネージャー
社団法人日本新聞協会メディア開発委員会メディア専門部会委員

1976年香川県高松市鬼無町生まれ。国立高松工業高等専門学校制御情報工学科卒業。1997年株式会社四国新聞社入社。会社の中核事業の要である 編集局に配属。新聞の見出しやレイアウトを行う整理部で日刊紙制作の仕事に携わる。その後、システム部門を経て、2000年よりインターネット部門に配置 されデジタル事業での収益化を目指す。

ご来場者プレゼント

マイクロソフト

マイクロソフトから紙袋とポーチ(デジカメやUSBメモリ入れるイメージ)を参加者全員にプレゼントします。

 

技術評論社

サーティファイ Web利用・技術認定委員会

quote – 世界中から集めた、小粋なデザインたち