SlideShare ist ein Scribd-Unternehmen logo
1 von 23
Downloaden Sie, um offline zu lesen
東京では語れないHTML5
     [仮題]

    2012年10月19日 第3回東北セミナー&ボランティア

    公益社団法人日本アドバタイザーズ協会 Web広告研究会
        東日本大震災・被災地支援プロジェクト


公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア
アジェンダ
     •   アジェンダ
     •   登場人物
     •   導入の流れをつくる (森田)
     •   HTML5概論 (中村)
     •   HTML5のこれから (山本)
     •   HTML5事例紹介 (道家・比留間)
     •   総括してみる (森田)
     •   HTML5あれやこれや

2012/10/19   公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   1
質問などありましたら
     • Twitterでハッシュタグ #webken にて質
       問等頂ければ、随時?どうにかします。

     • 空気を読まずに挙手頂いても結構です。
             – 空気を読んでスルーしたらごめんなさい。


     • 時間の関係ですべての質問に回答できな
       い可能性がありますがご了承ください。


2012/10/19     公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   2
登場人物(パネリスト)
     中村 享介(なかむら・きょうすけ)

     株式会社ピクセルグリッド
     代表取締役/フロントエンド・エンジニア

     Web制作会社のWebディレクター、フリーランスのFlash・JavaScriptエンジニアを経
     て、2009年に株式会社ピクセルグリッドを設立。

     多数のリニューアル、新規立ち上げを取り仕切った経験をもち、JavaScriptを中心に
     HTML5などの新しいWeb技術を駆使したウェブサイト制作・開発を得意としている。会
     社経営・制作のほか、講演、執筆など幅広く活動している。

     著書に『WebクリエイティブのためのDOM Scripting』(毎日コミュニケーションズ)、
     『Web制作標準講座 [総合コース]』(共著、翔泳社)など。




2012/10/19   公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   3
登場人物(パネリスト)
     山本 健介(やまもと・けんすけ)

     株式会社コンテンツ Innovative Business Unit
     フロントエンド・エンジニア

     WEBサイトにおけるフロントエンドを主に担当。Flash/HTML/CSS/JavaScriptを使っ
     た制作を行う。
     直近では自社コンテンツの制作チームに所属し、企画、サーバサイドプログラム、ネイ
     ティブアプリケーションの開発に従事し、専門領域の幅を広げている。




2012/10/19   公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   4
登場人物(パネリスト)
     道家 陽介(どうけ・ようすけ)

     面白法人カヤック 閃光部
     フロントエンド・エンジニア

     こえであそぶサービス「koebu」http://koebu.com におけるサービス運営および
     Flash/HTML/CSS/JavaScriptなどフロントエンド全般を担当。

     Flashコミュニティのボランティア団体 F-siteの運営に参加。




2012/10/19   公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   5
登場人物(パネリスト)
     比留間 和也(ひるま・かずや)

     面白法人カヤック HTMLファイ部
     フロントエンド・エンジニア

     カヤックでは主に、HTML/CSS/JavaScriptでのフロントエンドで活躍。
     HTMLファイ部のリーダーで、アサイン管理なども担当。
     HTML5を使ったキャンペーンサイトやHTML5を利用した(Web)アプリ制作を担う。

     近著に『すべての人に知っておいてほしい HTML5 & CSS3 の基本原則』(共著、エム
     ディエヌコーポレーション)、『すべての人に知っておいてほしい スタイルシートデザ
     インの基本原則』(共著、エムディエヌコーポレーション)がある。またWeb 系技術
     Tipsブログ CSS-EBLOGを運営中。




2012/10/19   公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   6
登場人物(モデレーター)
     森田 雄(もりた・ゆう)

     株式会社ツルカメ 代表取締役社長・UXディレクター
     株式会社ネコメシ 代表取締役CEO
     Web広告研究会 東日本大震災・被災地支援プロジェクト

     東芝EMIやマイクロソフトなどを経て、2000年にビジネス・アーキテクツの設立に参画
     し2005年より取締役、2009年同社退職。読書家と称した充電期間を経て、2010年ツル
     カメ設立とともにめでたく社会復帰、代表取締役社長に就任(現職)。2012年ネコメシ
     を設立し代表取締役CEOに就任(現職)。
     IAおよびUX、フロントエンド技術、アクセシビリティ、ユーザビリティのスペシャリス
     ト。CG-ARTS協会委員。広告電通賞審議会選考委員。米IA Institute会員。内閣総理大
     臣賞、グッドデザイン賞など受賞多数。趣味は料理とカメラ。

     gihyo.jp(技術評論社)にて「キーパーソンが見るWeb業界」を2008年より連載して
     いるが、今年は関係者のスケジュールがぜんぜん合わなくて頓挫中。


2012/10/19   公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   7
大まかな歴史
     • W3C的にはHTML→XHTMLであり
       XHTML2の勧告を目指していたがなんか
       全然行ったり来たりで進まない。
     • 埒があかねえとWHATWGがWA1とWeb
       Form2を策定。
     • W3CがXHTML2の策定を諦めWHATWG
       のWA1+Web Form2を採用しHTML5
       WDとして発行。
     • ブラウザでの先行実装が進むが仕様は流
       動的である。
2012/10/19   公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   8
大多数の現場的歴史観
     • HTMLのSemantic Web化(XHTML2)に
       そんなに違和感がなかったが、
     • iPhoneにFlashが搭載される/されないの
       ニュースに盛り上がり、
     • 初代iPhone(2007年)は日本未発売であっ
       たがiPhone3G(2008年)の発売までに脱
       FlashをしておかねばとかいってHTML5。
     • 瞬く間にバズワード化してカオス。


2012/10/19   公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   9
バズワードとしてのHTML5
     • 以下の“たったひとつのもの”を指しても「
       HTML5」という場合があります。
             – HTML5, CSS3, Web Socket, Local
               Storage, Canvas, GeoLocation, <video>,
               <audio>, Microformat, Web Font, 等々
             – 正確を期すなら「HTML5 Family」
     • しまいにゃFacebookのことだった場合が
       あります。



2012/10/19       公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   10
中村さん
     • HTML5概論




2012/10/19   公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   11
山本さん
     • HTML5のこれから




2012/10/19   公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   12
道家さん・比留間さん
     • HTML5事例紹介




2012/10/19   公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   13
森田
     • なるほどですね~




2012/10/19   公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   14
HTML5あれやこれや
     • HTML5といえばで出てくるあれやこれや
       の聞いてみたいことをHTML5界隈のトッ
       プクリエーターらがお答えします!

     • パネルディスカッション希望。

     • Twitter ハッシュタグ #webken で拾っ
       てきた質問への回答などもここで。


2012/10/19   公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   15
あれや
     • コーポレートサイトのリニューアルを考
       えているのですが、HTML5を採用すべき
       でしょうか?
             – コーポレートのWebガイドラインが
               XHTML1.0になっているのですがHTML5に改
               定すべき?
             – 使ってるCMSはHTML5に対応してるのか?




2012/10/19     公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   16
これや
     • HTML5ならPCだけでなくスマホでもサイ
       トの閲覧は問題ありませんか?
             – PCサイトでFlashを使ってるところがあるの
               だけど、スマホ対応していくにはどうしたら
               いいですか?
             – HTML5とガラケーってどうなんでしょう?




2012/10/19     公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   17
あれや
     • 弊社のイントラでIE6が必要な関係で、で
       きればWebもIE6に対応しておいてほしい
       のですが、それでいて最近のフロントエ
       ンド技術でカッチョよくしてほしいし勿
       論スマホでも見れないと嫌だしiPadもよ
       ろしくです。
             – これ次回のミーティングで絶対Androidと
               Windows8の話追加されてるな。
             – まず予算。話はそれからだ。
             – 要件定義でしっかり握っておきましょう。

2012/10/19     公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   18
これや
     • WebアプリケーションとしてのHTML5に
       ついてもっと詳しく聞きたいの!
             – オフライン、キャッシュ系
             – CanvasやらSVGやら何やら表現関係
             – デバイス間の互換性
             – 動作速度・性能
             – セキュリティ




2012/10/19     公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   19
あれやこれや
     • 言語としてのHTML5のメリットを教えて
       ください☆
             – 結局 <div> と JS ばっかになってないか?
             – 新しい要素や属性の使い勝手はどう?
             – WAI-ARIAとか使ってますか?




2012/10/19     公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   20
質疑応答
     • 何も情報がないので質問の邪魔にならな
       い、ニュートラルなスライドです。




2012/10/19   公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   21
終了

             御清聴ありがとうございました。




2012/10/19   公益社団法人日本アドバタイザーズ協会 Web広告研究会   第3回東北セミナー&ボランティア   22

Weitere ähnliche Inhalte

Ähnlich wie 東京では語れないHTML5[仮題]

座談会資料(討議メモ付き) 20120512
座談会資料(討議メモ付き) 20120512座談会資料(討議メモ付き) 20120512
座談会資料(討議メモ付き) 20120512知礼 八子
 
デブサミ2015 オフィシャルコミュニティ募集要項
デブサミ2015 オフィシャルコミュニティ募集要項デブサミ2015 オフィシャルコミュニティ募集要項
デブサミ2015 オフィシャルコミュニティ募集要項Developers Summit
 
香川支部キックオフ 香川支部について
香川支部キックオフ 香川支部について香川支部キックオフ 香川支部について
香川支部キックオフ 香川支部についてyohei iwakura
 
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことMasakazu Muraoka
 
IAチャンネル:nissenのIA最適化事例その1
IAチャンネル:nissenのIA最適化事例その1IAチャンネル:nissenのIA最適化事例その1
IAチャンネル:nissenのIA最適化事例その1Makoto Shimizu
 
Jaws festa-kyushu20151103
Jaws festa-kyushu20151103Jaws festa-kyushu20151103
Jaws festa-kyushu20151103俊之 渡邊
 
iPhone/Android アプリをまとめて省エネ開発する技術
iPhone/Android アプリをまとめて省エネ開発する技術iPhone/Android アプリをまとめて省エネ開発する技術
iPhone/Android アプリをまとめて省エネ開発する技術vaccho
 
IT革命からコミュニティ、コミュニケーション革命に!
IT革命からコミュニティ、コミュニケーション革命に!IT革命からコミュニティ、コミュニケーション革命に!
IT革命からコミュニティ、コミュニケーション革命に!Yuichi Morito
 
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」naoki ando
 
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しようMasayuki Abe
 
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトHTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトShumpei Shiraishi
 
第9回八子クラウド座談会資料 20121208
第9回八子クラウド座談会資料 20121208第9回八子クラウド座談会資料 20121208
第9回八子クラウド座談会資料 20121208知礼 八子
 
日本の中小企業のIT導入10年の振り返り
日本の中小企業のIT導入10年の振り返り日本の中小企業のIT導入10年の振り返り
日本の中小企業のIT導入10年の振り返りYuichi Morito
 
エンジニアのキャリアを考える
エンジニアのキャリアを考えるエンジニアのキャリアを考える
エンジニアのキャリアを考えるMKT International Inc.
 
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみるWeb屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみるMasakazu Muraoka
 
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)Noriaki UCHIYAMA
 
楽天の中のわたしと勉強会
楽天の中のわたしと勉強会楽天の中のわたしと勉強会
楽天の中のわたしと勉強会Rakuten Group, Inc.
 
聞こえの工夫のポイント ことラボ 小松高廣
聞こえの工夫のポイント ことラボ 小松高廣聞こえの工夫のポイント ことラボ 小松高廣
聞こえの工夫のポイント ことラボ 小松高廣Takahiro Komatsu
 

Ähnlich wie 東京では語れないHTML5[仮題] (20)

Devsumi2013 community
Devsumi2013 communityDevsumi2013 community
Devsumi2013 community
 
座談会資料(討議メモ付き) 20120512
座談会資料(討議メモ付き) 20120512座談会資料(討議メモ付き) 20120512
座談会資料(討議メモ付き) 20120512
 
デブサミ2015 オフィシャルコミュニティ募集要項
デブサミ2015 オフィシャルコミュニティ募集要項デブサミ2015 オフィシャルコミュニティ募集要項
デブサミ2015 オフィシャルコミュニティ募集要項
 
香川支部キックオフ 香川支部について
香川支部キックオフ 香川支部について香川支部キックオフ 香川支部について
香川支部キックオフ 香川支部について
 
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
 
IAチャンネル:nissenのIA最適化事例その1
IAチャンネル:nissenのIA最適化事例その1IAチャンネル:nissenのIA最適化事例その1
IAチャンネル:nissenのIA最適化事例その1
 
Jaws festa-kyushu20151103
Jaws festa-kyushu20151103Jaws festa-kyushu20151103
Jaws festa-kyushu20151103
 
iPhone/Android アプリをまとめて省エネ開発する技術
iPhone/Android アプリをまとめて省エネ開発する技術iPhone/Android アプリをまとめて省エネ開発する技術
iPhone/Android アプリをまとめて省エネ開発する技術
 
IT革命からコミュニティ、コミュニケーション革命に!
IT革命からコミュニティ、コミュニケーション革命に!IT革命からコミュニティ、コミュニケーション革命に!
IT革命からコミュニティ、コミュニケーション革命に!
 
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
 
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
 
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトHTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
 
第9回八子クラウド座談会資料 20121208
第9回八子クラウド座談会資料 20121208第9回八子クラウド座談会資料 20121208
第9回八子クラウド座談会資料 20121208
 
日本の中小企業のIT導入10年の振り返り
日本の中小企業のIT導入10年の振り返り日本の中小企業のIT導入10年の振り返り
日本の中小企業のIT導入10年の振り返り
 
エンジニアのキャリアを考える
エンジニアのキャリアを考えるエンジニアのキャリアを考える
エンジニアのキャリアを考える
 
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみるWeb屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
 
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
 
Thing.jsについて
Thing.jsについてThing.jsについて
Thing.jsについて
 
楽天の中のわたしと勉強会
楽天の中のわたしと勉強会楽天の中のわたしと勉強会
楽天の中のわたしと勉強会
 
聞こえの工夫のポイント ことラボ 小松高廣
聞こえの工夫のポイント ことラボ 小松高廣聞こえの工夫のポイント ことラボ 小松高廣
聞こえの工夫のポイント ことラボ 小松高廣
 

Mehr von Yu Morita

ワイヤーフレームとは何なのか問題について
ワイヤーフレームとは何なのか問題についてワイヤーフレームとは何なのか問題について
ワイヤーフレームとは何なのか問題についてYu Morita
 
機能はちゃんと試してからリリースしようねという話
機能はちゃんと試してからリリースしようねという話機能はちゃんと試してからリリースしようねという話
機能はちゃんと試してからリリースしようねという話Yu Morita
 
おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4Yu Morita
 
後進の育成のためにディレクターがすべきこと
後進の育成のためにディレクターがすべきこと後進の育成のためにディレクターがすべきこと
後進の育成のためにディレクターがすべきことYu Morita
 
時間調整用
時間調整用時間調整用
時間調整用Yu Morita
 
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite EditionおかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite EditionYu Morita
 
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1Yu Morita
 
[リクリUXワークショップ] 放置自転車問題を一挙に解決
[リクリUXワークショップ] 放置自転車問題を一挙に解決[リクリUXワークショップ] 放置自転車問題を一挙に解決
[リクリUXワークショップ] 放置自転車問題を一挙に解決Yu Morita
 
【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=Yu Morita
 
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める= Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める= Yu Morita
 
10年後の自分をデザインしよう
10年後の自分をデザインしよう10年後の自分をデザインしよう
10年後の自分をデザインしようYu Morita
 
いつもの制作案件を、新WebJIS準拠にするためのワークフロー
いつもの制作案件を、新WebJIS準拠にするためのワークフローいつもの制作案件を、新WebJIS準拠にするためのワークフロー
いつもの制作案件を、新WebJIS準拠にするためのワークフローYu Morita
 
マークアップエンジニアのキャリアパス
マークアップエンジニアのキャリアパスマークアップエンジニアのキャリアパス
マークアップエンジニアのキャリアパスYu Morita
 

Mehr von Yu Morita (13)

ワイヤーフレームとは何なのか問題について
ワイヤーフレームとは何なのか問題についてワイヤーフレームとは何なのか問題について
ワイヤーフレームとは何なのか問題について
 
機能はちゃんと試してからリリースしようねという話
機能はちゃんと試してからリリースしようねという話機能はちゃんと試してからリリースしようねという話
機能はちゃんと試してからリリースしようねという話
 
おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4
 
後進の育成のためにディレクターがすべきこと
後進の育成のためにディレクターがすべきこと後進の育成のためにディレクターがすべきこと
後進の育成のためにディレクターがすべきこと
 
時間調整用
時間調整用時間調整用
時間調整用
 
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite EditionおかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
 
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
 
[リクリUXワークショップ] 放置自転車問題を一挙に解決
[リクリUXワークショップ] 放置自転車問題を一挙に解決[リクリUXワークショップ] 放置自転車問題を一挙に解決
[リクリUXワークショップ] 放置自転車問題を一挙に解決
 
【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
【比較用】Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
 
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める= Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
 
10年後の自分をデザインしよう
10年後の自分をデザインしよう10年後の自分をデザインしよう
10年後の自分をデザインしよう
 
いつもの制作案件を、新WebJIS準拠にするためのワークフロー
いつもの制作案件を、新WebJIS準拠にするためのワークフローいつもの制作案件を、新WebJIS準拠にするためのワークフロー
いつもの制作案件を、新WebJIS準拠にするためのワークフロー
 
マークアップエンジニアのキャリアパス
マークアップエンジニアのキャリアパスマークアップエンジニアのキャリアパス
マークアップエンジニアのキャリアパス
 

東京では語れないHTML5[仮題]

  • 1. 東京では語れないHTML5 [仮題] 2012年10月19日 第3回東北セミナー&ボランティア 公益社団法人日本アドバタイザーズ協会 Web広告研究会 東日本大震災・被災地支援プロジェクト 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア
  • 2. アジェンダ • アジェンダ • 登場人物 • 導入の流れをつくる (森田) • HTML5概論 (中村) • HTML5のこれから (山本) • HTML5事例紹介 (道家・比留間) • 総括してみる (森田) • HTML5あれやこれや 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 1
  • 3. 質問などありましたら • Twitterでハッシュタグ #webken にて質 問等頂ければ、随時?どうにかします。 • 空気を読まずに挙手頂いても結構です。 – 空気を読んでスルーしたらごめんなさい。 • 時間の関係ですべての質問に回答できな い可能性がありますがご了承ください。 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 2
  • 4. 登場人物(パネリスト) 中村 享介(なかむら・きょうすけ) 株式会社ピクセルグリッド 代表取締役/フロントエンド・エンジニア Web制作会社のWebディレクター、フリーランスのFlash・JavaScriptエンジニアを経 て、2009年に株式会社ピクセルグリッドを設立。 多数のリニューアル、新規立ち上げを取り仕切った経験をもち、JavaScriptを中心に HTML5などの新しいWeb技術を駆使したウェブサイト制作・開発を得意としている。会 社経営・制作のほか、講演、執筆など幅広く活動している。 著書に『WebクリエイティブのためのDOM Scripting』(毎日コミュニケーションズ)、 『Web制作標準講座 [総合コース]』(共著、翔泳社)など。 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 3
  • 5. 登場人物(パネリスト) 山本 健介(やまもと・けんすけ) 株式会社コンテンツ Innovative Business Unit フロントエンド・エンジニア WEBサイトにおけるフロントエンドを主に担当。Flash/HTML/CSS/JavaScriptを使っ た制作を行う。 直近では自社コンテンツの制作チームに所属し、企画、サーバサイドプログラム、ネイ ティブアプリケーションの開発に従事し、専門領域の幅を広げている。 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 4
  • 6. 登場人物(パネリスト) 道家 陽介(どうけ・ようすけ) 面白法人カヤック 閃光部 フロントエンド・エンジニア こえであそぶサービス「koebu」http://koebu.com におけるサービス運営および Flash/HTML/CSS/JavaScriptなどフロントエンド全般を担当。 Flashコミュニティのボランティア団体 F-siteの運営に参加。 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 5
  • 7. 登場人物(パネリスト) 比留間 和也(ひるま・かずや) 面白法人カヤック HTMLファイ部 フロントエンド・エンジニア カヤックでは主に、HTML/CSS/JavaScriptでのフロントエンドで活躍。 HTMLファイ部のリーダーで、アサイン管理なども担当。 HTML5を使ったキャンペーンサイトやHTML5を利用した(Web)アプリ制作を担う。 近著に『すべての人に知っておいてほしい HTML5 & CSS3 の基本原則』(共著、エム ディエヌコーポレーション)、『すべての人に知っておいてほしい スタイルシートデザ インの基本原則』(共著、エムディエヌコーポレーション)がある。またWeb 系技術 Tipsブログ CSS-EBLOGを運営中。 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 6
  • 8. 登場人物(モデレーター) 森田 雄(もりた・ゆう) 株式会社ツルカメ 代表取締役社長・UXディレクター 株式会社ネコメシ 代表取締役CEO Web広告研究会 東日本大震災・被災地支援プロジェクト 東芝EMIやマイクロソフトなどを経て、2000年にビジネス・アーキテクツの設立に参画 し2005年より取締役、2009年同社退職。読書家と称した充電期間を経て、2010年ツル カメ設立とともにめでたく社会復帰、代表取締役社長に就任(現職)。2012年ネコメシ を設立し代表取締役CEOに就任(現職)。 IAおよびUX、フロントエンド技術、アクセシビリティ、ユーザビリティのスペシャリス ト。CG-ARTS協会委員。広告電通賞審議会選考委員。米IA Institute会員。内閣総理大 臣賞、グッドデザイン賞など受賞多数。趣味は料理とカメラ。 gihyo.jp(技術評論社)にて「キーパーソンが見るWeb業界」を2008年より連載して いるが、今年は関係者のスケジュールがぜんぜん合わなくて頓挫中。 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 7
  • 9. 大まかな歴史 • W3C的にはHTML→XHTMLであり XHTML2の勧告を目指していたがなんか 全然行ったり来たりで進まない。 • 埒があかねえとWHATWGがWA1とWeb Form2を策定。 • W3CがXHTML2の策定を諦めWHATWG のWA1+Web Form2を採用しHTML5 WDとして発行。 • ブラウザでの先行実装が進むが仕様は流 動的である。 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 8
  • 10. 大多数の現場的歴史観 • HTMLのSemantic Web化(XHTML2)に そんなに違和感がなかったが、 • iPhoneにFlashが搭載される/されないの ニュースに盛り上がり、 • 初代iPhone(2007年)は日本未発売であっ たがiPhone3G(2008年)の発売までに脱 FlashをしておかねばとかいってHTML5。 • 瞬く間にバズワード化してカオス。 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 9
  • 11. バズワードとしてのHTML5 • 以下の“たったひとつのもの”を指しても「 HTML5」という場合があります。 – HTML5, CSS3, Web Socket, Local Storage, Canvas, GeoLocation, <video>, <audio>, Microformat, Web Font, 等々 – 正確を期すなら「HTML5 Family」 • しまいにゃFacebookのことだった場合が あります。 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 10
  • 12. 中村さん • HTML5概論 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 11
  • 13. 山本さん • HTML5のこれから 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 12
  • 14. 道家さん・比留間さん • HTML5事例紹介 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 13
  • 15. 森田 • なるほどですね~ 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 14
  • 16. HTML5あれやこれや • HTML5といえばで出てくるあれやこれや の聞いてみたいことをHTML5界隈のトッ プクリエーターらがお答えします! • パネルディスカッション希望。 • Twitter ハッシュタグ #webken で拾っ てきた質問への回答などもここで。 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 15
  • 17. あれや • コーポレートサイトのリニューアルを考 えているのですが、HTML5を採用すべき でしょうか? – コーポレートのWebガイドラインが XHTML1.0になっているのですがHTML5に改 定すべき? – 使ってるCMSはHTML5に対応してるのか? 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 16
  • 18. これや • HTML5ならPCだけでなくスマホでもサイ トの閲覧は問題ありませんか? – PCサイトでFlashを使ってるところがあるの だけど、スマホ対応していくにはどうしたら いいですか? – HTML5とガラケーってどうなんでしょう? 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 17
  • 19. あれや • 弊社のイントラでIE6が必要な関係で、で きればWebもIE6に対応しておいてほしい のですが、それでいて最近のフロントエ ンド技術でカッチョよくしてほしいし勿 論スマホでも見れないと嫌だしiPadもよ ろしくです。 – これ次回のミーティングで絶対Androidと Windows8の話追加されてるな。 – まず予算。話はそれからだ。 – 要件定義でしっかり握っておきましょう。 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 18
  • 20. これや • WebアプリケーションとしてのHTML5に ついてもっと詳しく聞きたいの! – オフライン、キャッシュ系 – CanvasやらSVGやら何やら表現関係 – デバイス間の互換性 – 動作速度・性能 – セキュリティ 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 19
  • 21. あれやこれや • 言語としてのHTML5のメリットを教えて ください☆ – 結局 <div> と JS ばっかになってないか? – 新しい要素や属性の使い勝手はどう? – WAI-ARIAとか使ってますか? 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 20
  • 22. 質疑応答 • 何も情報がないので質問の邪魔にならな い、ニュートラルなスライドです。 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 21
  • 23. 終了 御清聴ありがとうございました。 2012/10/19 公益社団法人日本アドバタイザーズ協会 Web広告研究会 第3回東北セミナー&ボランティア 22