ボクたちのWWW
Webクリエイターのこれからを考える
FutureSync 2013
2013.5.11
Bathtimefish 村岡 正和
自己紹介
Webアプリケーション開発 IT業務システム設計/開発
Webサービス導入/事業戦略コンサルティング
HTML5-WEST.jp代表 / 京都GTUG / CSS Nite in OSAKA / 神戸ITフェス
ティバル実行委員など
むらおか まさかず
村岡正和 @bathtimefish
http://html5-west.jp/
HTML5-WEST.jp
HTML5 JavaScript
中国拳法 Python 主夫になりたい
炊事 Google Apps
マークアップ部発足!
html5j.org
初代 部長になりました。
監修しました。
実例ごとの実装例がたくさん書いてあ
ります。ウェブサイト制作やCMSの運
用時に便利です。
好評販売中!!
本題
今日のおはなし
•Webが向かっているところ
•HTML5
•WebApps beyond NativeApps
•これからのWebを担うということ
まあ個人的な見解と展望ですが、
聞いてやってください。
m(_ _)m
Webはどこに向かっているのか?
WebPlatform
http://www.webplatform.org/
WebPlatform.org
One Web
あらゆるWebコンテンツが存在するただひとつの場所
Blog
Book
Photo
Movie
Music News
Friends
Webは全地球的な
データプラットフォーム
What s next?
次は何がくる?
Web Application
based
HTML5
& Latest Web Technologies
What s HTML5
• Webの進化を爆速にしたキーワード
• HTML5 is Candidate Recommendation now.
• つづきは HTML5.1 で
• 一般的にはHTML5とそれを取り巻くWeb技術仕様
の総称として使われている
HTML5 (spec)
HTML5 (Web Technology)
余談ですが、
ボクが注目している
HTML5関連技術
AppCache
&
WebStorage
オフラインを想定した
非同期データ処理
なぜか?
月と地球
約 384,400 km
光速だと約2.5秒で往復
光速だと約2.5秒で往復ちたま
地球のWEBサーバーとの光通信
でも物理的に遅延する。もしく
は繋がらない。
いつまでたっても
白い画面...
最新データのダウンロー
ドが終わるまではキャッ
シュされたデータを表示
既存のデータだけを素早
く利用できるようにする
ダウンロード完了時にデ
ータを更新する
データ送信は一旦デバイ
スに保存、後でゆっくり
サーバーに送る
地球からのデータは遅い
ので、待ってられない&
よく切断する
AppCache+WebStrageでの非同期データ送受信
さらに、
オフライン動作必須!!
火星と地球
光速で往復 約25分くらいらしい
約 7000万 km
でもまあ、
これからはWebアプリの時代
なのは確実だと思うよ。
What s doing now?
今どうなってんの?
HTML5 based WebApp
最近のウェブ技術の進化
•機能性
•安定性
•高速性
•相互運用性
HTML5 APIs
WebBrowser evolution
asm.js...
FirefoxOS, Tizen...
HTML5 APIs (especially Device APIs)
Bluetooth, NFC, USB, Camera, P2P,
Geolocation, Socket, Filesystem Calender,
SMS, Screen Orientation, Notification, Power
Management...
高機能なAPIの実装によってWebアプリの性能
も向上する。特にデバイス操作系に注目。
WebBrowser evolutions
GoogleのBlinkへの乗り換え
代表的なWebブラウザ(他のWebkit系, IE,
Firefox)の劇的な進化がWebアプリの動作を安
定させる。
Optimization, fast! fast!
Asm.js
JavaScriptに対するlow levelでの高速化の取り
組みがはじまった。JSが重いというのは過去の
話。
Uglify, Closure compilerなどコードレベルの最
適化やES5なども高速化に貢献
Web feature OS
FirefoxOS Tizen
Webアプリを基本機能に据えるOSの登場
ひとつのWebアプリが様々なプラットフォーム
で動作する。Webアプリはブラウザの枠を超え
る。この相互運用性がWebアプリの本質
NativeApps beyond WebApps
WebアプリはNativeアプリに追いつき、超えようとしている
この状況にあって、
Webクリエイターは
自身をどう見つめるか?
ひろがるウェブ技術活用シーン
•ウェブ制作はサイトからアプリケーションへ
•ウェブ技術はウェブブラウザの外へ
•ウェブビジネスはウェブ制作業界の外へ
ひろがるウェブ技術活用シーン
FirefoxOS
WinJS
QNX Car2 Google Glass Mirror API
Tizen IVI
Webクリエイターにとっての
よいこと? わるいこと?
誰でも使えるWeb技術
•easy & powerful
•Open technology
•Open coumunity
初心者にもやさしい
タダではじめられる
豊富なノウハウ共有
ウェブ制作のこれから
Web技術の進化で仕事の効率がよくなる
Web技術の普及で仕事のジャンルがふえる
市場が広がって業界の景気がよくなるかも?
誰でも使えるWeb技術
•easy & powerful
•Open technology
•Open coumunity
プロじゃなくてもいい
新規参入がカンタン
急速なコモディティ化
ウェブ制作のこれから
敷居が低くなってライバルが増える
競争が激化して仕事の単価が下がる
ウェブ専業体制の崩壊?
我々は幸せになれるのか...?
Yes!
Change your mind!
Change the definition of
"Web Creator"
「ウェブクリエイター」の定義を変えよう
今までのWebクリエイター
• Web制作を行う技術者
• Web制作マネージャ
• 制作に関わる人
これからのWebクリエイター
• Web制作シーンで高いパフォーマンスを発揮できる人
• 様々な場面でWeb技術を活用できる人
• Webが関係する仕事でイニシアチブを発揮できる人
作る から 創るへ
もう 作業者 ではない。
広がるWeb活用。その第一線を創る人材が、
Web Creator
デザイン コーディング
アドバイス... なんでもいい、
深い知識 実践力 ノウハウ
最新の情報 様々な業界
業務のシーンでそれらが活かせる人材
Webに関する
そいつをWebクリエイターと
呼ぼうじゃないか!
Webは未来を創る技術のひとつ
Webを活かせること。それは世界の
未来を創るということ
Webを活かす。それがあなた自身の
未来を創る
それが、これからのWebクリエイター
WWW
Web for One, Web for All
by Web Creators.
Thanks.

More Related Content

KEY
Html5で変わるいろんなこと
PPTX
javascriptの基礎
PPTX
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PDF
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
PPTX
エンジニアによるグロースハック〜SEO編〜
KEY
Ie6をさっさとやめよう その2
PPTX
要確認!貴方のWord pressは損をしている!? 〜読み込み速度の重要性について〜
PDF
UXを向上させる サイト高速化テクニック
Html5で変わるいろんなこと
javascriptの基礎
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
エンジニアによるグロースハック〜SEO編〜
Ie6をさっさとやめよう その2
要確認!貴方のWord pressは損をしている!? 〜読み込み速度の重要性について〜
UXを向上させる サイト高速化テクニック

What's hot (20)

PDF
プロトタイピングでしあわせになろうよ
PDF
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
PDF
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
PPT
HTML5でサイネージは作れる!!
PDF
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
PDF
Web表示速度とgtmetrixスコアの矛盾
PDF
フリーランスミートアップを開催してきた@Creators MeetUp #44
PDF
俺とお前とGoogleware
PDF
作品は誰かに見てもらった方が良い!
PDF
私の考える Startup Geeks
PDF
Yeoman RIAビルドツール超入門
PDF
HTML5+wordpressで電子書籍
PDF
HTML5: New capabilities, new markup
PDF
Amebaブログにアクセシビリティを定着させる土台作り
PDF
a-sap08「a-blog cmsとMovable Type」
PDF
【俺聞け5】私とflashとhtml5&java script
PDF
日本のCMSの今。特徴とプロジェクトから考える、次のCMS選び:本編
PPTX
Cache 自由自在
PPTX
なれる!デザイナー(ロゴ作りから始めるデザイン入門)
PDF
HTML5入門 for 頭がヤバい人向け
プロトタイピングでしあわせになろうよ
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
HTML5でサイネージは作れる!!
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
Web表示速度とgtmetrixスコアの矛盾
フリーランスミートアップを開催してきた@Creators MeetUp #44
俺とお前とGoogleware
作品は誰かに見てもらった方が良い!
私の考える Startup Geeks
Yeoman RIAビルドツール超入門
HTML5+wordpressで電子書籍
HTML5: New capabilities, new markup
Amebaブログにアクセシビリティを定着させる土台作り
a-sap08「a-blog cmsとMovable Type」
【俺聞け5】私とflashとhtml5&java script
日本のCMSの今。特徴とプロジェクトから考える、次のCMS選び:本編
Cache 自由自在
なれる!デザイナー(ロゴ作りから始めるデザイン入門)
HTML5入門 for 頭がヤバい人向け
Ad

Viewers also liked (9)

PDF
作ろう!LINEスタンプ 〜スタンプクリエイターの語り場〜
PDF
プリントクリエイター
PDF
2016年度冬期HCD研究発表会 「脱コンテクスト化による「プロジェクトモデル」移植の実践」
PDF
絶対に描いてはいけないグラフ入りスライド24枚
PDF
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
PPT
色彩センスのいらない配色講座
PDF
しょぼいプレゼンをパワポのせいにするな! by @jessedee
PDF
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
PDF
見やすいプレゼン資料の作り方 - リニューアル増量版
作ろう!LINEスタンプ 〜スタンプクリエイターの語り場〜
プリントクリエイター
2016年度冬期HCD研究発表会 「脱コンテクスト化による「プロジェクトモデル」移植の実践」
絶対に描いてはいけないグラフ入りスライド24枚
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
色彩センスのいらない配色講座
しょぼいプレゼンをパワポのせいにするな! by @jessedee
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
見やすいプレゼン資料の作り方 - リニューアル増量版
Ad

Similar to ボクたちのWWW Webクリエイターのこれからを考える (20)

PDF
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
KEY
みなさんがHtml5をやらなくていい3つの理由
PDF
Html5 seminar 1_pac
KEY
HTML5時代のwebクリエイターに必要なこと
PDF
HTML5時代のWebデザイン
KEY
ON HTML5 FIELD で書き尽くせなかったこと
PPTX
テスト
PDF
アプリ開発の
PDF
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
PDF
記事には書けなかったHTML5の話
KEY
Html5時代のクリエイターのあり方
PPTX
ブラウザから飛び出すWeb技術とHTML5
PDF
Concentrated HTML5 & Attractive HTML5
PDF
Attractive HTML5
KEY
Html5から考える webの将来、みんなの未来
KEY
HTML5での制作、いつから始める?
PDF
HTML5 ~よくわからないけど言葉だけはよく聞きます~
PDF
HTML5 ~よくわからないけど言葉だけはよく聞きます~
PDF
HTML5が最近どうなっていて何があぶなっかしいのか?
PDF
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
みなさんがHtml5をやらなくていい3つの理由
Html5 seminar 1_pac
HTML5時代のwebクリエイターに必要なこと
HTML5時代のWebデザイン
ON HTML5 FIELD で書き尽くせなかったこと
テスト
アプリ開発の
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
記事には書けなかったHTML5の話
Html5時代のクリエイターのあり方
ブラウザから飛び出すWeb技術とHTML5
Concentrated HTML5 & Attractive HTML5
Attractive HTML5
Html5から考える webの将来、みんなの未来
HTML5での制作、いつから始める?
HTML5 ~よくわからないけど言葉だけはよく聞きます~
HTML5 ~よくわからないけど言葉だけはよく聞きます~
HTML5が最近どうなっていて何があぶなっかしいのか?
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」

More from Masakazu Muraoka (20)

PPTX
Kerasで可視化いろいろ
PPTX
Async awaitでの繰り返し処理についての小話
PPTX
Thing.jsについて
PPTX
Mozapps installがなくなったことへの不平不満
PPTX
react-jsonschema-formについて
PPTX
Fetch apiについて
PDF
JS非同期処理のいま
PDF
Swaggerのさわりだけ
PDF
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
PDF
Espruinoの紹介
PDF
FxOSはウェアラブルデバイスの夢を見るか?
PDF
実はとれました。System xhrでcsv形式のopen dataを取得する
PDF
HTML5でOpen Dataをやってみた
PDF
Htmlのコトバ
PDF
Gaiaのソースコードに見るちょっと未来のweb app開発
PDF
Yeomanではじめる爆速webアプリ開発
PDF
Html5でOpen Dataをやってみる
PDF
HTML5 and Graphics
PDF
AMD basic and practice
PDF
Async flow controll basic and practice
Kerasで可視化いろいろ
Async awaitでの繰り返し処理についての小話
Thing.jsについて
Mozapps installがなくなったことへの不平不満
react-jsonschema-formについて
Fetch apiについて
JS非同期処理のいま
Swaggerのさわりだけ
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
Espruinoの紹介
FxOSはウェアラブルデバイスの夢を見るか?
実はとれました。System xhrでcsv形式のopen dataを取得する
HTML5でOpen Dataをやってみた
Htmlのコトバ
Gaiaのソースコードに見るちょっと未来のweb app開発
Yeomanではじめる爆速webアプリ開発
Html5でOpen Dataをやってみる
HTML5 and Graphics
AMD basic and practice
Async flow controll basic and practice

ボクたちのWWW Webクリエイターのこれからを考える