WDE09 State of The Web Japanese version

the state of the web 2009

state of the web 2009john allsopp & satoshi kikuchi

web directions

2009年5月25日月曜日


目標(goal)

青図を描く(to get a snap shot of)

テクノロジー(the technologies)

技術(the techniques)

哲学(philosophies)

開発者とデザイナーが使うモノ(developers and designers are using aroudn the world)



who we surveyed



いつ調査したか(When was the survey)

2008年12月(December 2008)



どうやって回答者へアンケートを行ったか？(how we reached the respondents)

過去のカンファレンスの参加者へ

メールを送信(email to past conference attendees)

開発者とデザイナーのウェブサイトから(via prominent developer and designer sites)



誰が回答したか？(Who responded?)

全世界で1200名以上が回答(over 1200 people from all

over the world)

大多数は米国、豪州、英国(majority from US, Australia

and UK)

日本から10人ほど(about 10 from Japan)



回答者は何をしているか？(What do they do?)

48.5%が開発者と回答(48.5% describe themselves as developers)

33%がデザイナーと回答(33% as designers)

その他には”プロデューサー”、”アナリスト”が含まれます。(other roles included “producer”, “analyst”,

“manager”)



会社と組織(Companies and organizations)

デザイン会社(Design Agency) 25.85%(Technology) 18.72%その他(Other) 13.70%メディア(Media) 10.45%教育(Education) 10.13%非営利団体(Charity/Not for Profit) 3.40%金融(Banking & Finance) 2.67%政府(National Government) 2.43%都道府県(State/Regional Government) 2.35%保健／医療(Health) 1.78%エンジニア(Engineering) 1.30%市町村区(Local Government) 1.30%通信(Telecoms) 1.22%小売(Retail) 1.13%



フリーランス(Freelancer) 18.23%小企業(Small Company (up to 10)) 19.04%中企業(Medium Company (up to 50)) 19.77%大企業(Large Company (up to 500)) 14.91%巨大企業(Huge Company (more than 500)) 18.72%

会社と組織(Companies and organizations)



どんな人たちか？(Who are they?)

初期採用者(early adopter)

英語圏の人(largely english speakers)

開発者とデザイナー(“developers” and designers)



Browsers and Operating Systems



使っているOS(O/S they use)

Mac OS X 10.5 41.49%Windows XP 37.68%Windows Vista 9.16%Mac OS X 10.4 5.27%Linux 4.54%Unix 0.08%



優先して使っているブラウザ？(Primary Browser they use)

Firefox 3 60.05%Safari 3 20.91%Google Chrome 4.21%Firefox 2 3.57%IE7 3.24%Opera 3.08%IE6 1.22%IE8 0.24%Safari 2 0.08%



検証するブラウザは？(Browsers they test with)

Firefox 3 91.98%IE7 89.47%Safari 3 80.39%IE6 78.44%Opera 49.92%Firefox 2 48.95%Google Chrome 39.55%IE8 29.50%Mobile Safari 20.99%Safari 2 19.21%Opera Mobile 4.94%IE5 4.29%



Markup



HTML? XHTML?

XHTMLだけ(Exclusively XHTML) 42.38%大体XHML、たまにHTML(Mostly XHTML, sometimes HTML)29.74%大体HTML、たまにXHTML(Mostly HTML, sometimes XHTML)15.88%HTMLだけ(Exclusively HTML) 5.92%XML 0.73%



Doctypes

XHTML 1.01 transitional 34.44%XHTML 1.01 strict 31.12%HTML 4.01 transitional 11.51%HTML 4.01 strict 8.59%XHTML 1.1 4.29%HTML 5 1.30%HTML 4.01 frameset 0.24%XHTML 1.01 frameset 0.08%



どのくらいの頻度でマークアップを検証しますか？

(How often do they validate their markup?)

いつも(Always) 36.79%頻繁に(Frequently) 32.50%たまに(Sometimes) 22.53%全くしない(Never) 3.32%



テーブルレイアウトを利用しますか?

(Tables for layout?)

いいえ(No) 84.76%はい(Yes) 10.29%



マイクロフォーマット(Microformats?)

はい 34.76%いいえ 41.49%マイクロフォーマットって何?(What are microformats?)18.72%

グーグルは現在、いくつかのマイクロフォーマットをインデックスし始めました。

(Google is now indexing some microformatted data)



まとめ(Summary)

StrictとTransitionalのdoctypeを使用。(Using strict

and transitional doctypes)

表現的なマークアップを避けること。(avoiding

presentational markup)

ウェブサイトを検証すること。(validating their sites)

セマンティックマークアップの使用が増えてきている。(increasingly using semantic markup)



CSS & Presentation



全てのブラウザで同じに見えるべき?

(Same in every browser?)ページは全てのブウラザで出来る限り全く同じように見えるべき。

24.64%

全てのブラウザで一貫性があることは大切、ただし古いブラウザで問題にならないのであれば、新しいブラウザでサポートされている機能を利用します。

57.37%

ページはブラウザによって、大きく見え方が異なっても、レイアウトに不具合がなく利用上問題なければ気にしない。

9.48%



ターゲットもしくは標準としているブラウザは？(targeting browsers or standards?)

W3Cの標準で開発し、そしてIEで追加作業をおこないます。 76.66%W3Cの標準で開発し、ブラウザがサポートしていることを期待。 9.40%IEで最初開発、その後他のメジャーなブラウザで確認する。 5.02%IEのみ 0.24%



過去互換？(Quirksmode?)

はい 9.40%いいえ 67.67%過去互換て何？ 13.61%



CSSを何のために使いますか？(What do you use CSS for?)

フォントとテキストのスタイル 90.11%ページレイアウト 90.36%印刷時の見栄え 68.96%



どんなセレクターを使いますか？(What selectors do you use?)

クラスセレクター “p.classname {}” 85.66%HTML セレクター“p {}” 83.23%IDセレクター “p#idname {}” 80.96%子孫セレクター “p a {}” 77.88%子供セレクター “p > a {}” 27.31%



CSS3を利用しますか？(Do you use CSS3?)

いいえ 68.31%はい 22.20%



ウェブフォントと@font-faceを使用しますか？(Do you use webfonts & @font-face)

いいえ 85.90%はい 4.13%

Truetype 4.05%EOT 0.57%

developers still aren’t commonly embedding fonts

But, when they do, they prefer Truetype to EOT overwhelmingly

Why?It’s much much easier to use TrueType than EOT

どのフォーマットを使用しますか？(Which format do you use?)



SVGを使用しますか？(Do you use SVG?)

いいえ 74.80%すこしだけ 13.94%広範囲に使用 1.22%

いいえ 80.15%すこしだけ 9%広範囲に使用 0.73%

Canvasを使用しますか？(Do you use Canvas?)



PC以外に対して見栄えを最適化しますか？(Optimize appearance for non PCs?)

“mobile” 15%

iPhone 10%

1% Blackberry

はい 25.12%いいえ 65.88%



JavaScript, Ajax and DOM



JavaScriptを利用しますか？(Do you use JavaScript?)

視覚効果 73.10%

フォームのエラー 61.10%

サーバーとのAjax通信 53.40%

複雑なアプリのインターフェイス 42.14%

いいえ 5.27%



使用しているJavaScriptのフレームワーク(JavaScript Frameworks)

JQuery 62.80%Prototype 23.26%Mootools 19.04%script.aculo.us 18.15%YUI 10.78%なし 9.64%Dojo 2.92%Ext 2.67%GWT 1.30%



Flash and Silverlight



プラグインを前提としたコンテンツですか？(Plug in based content?)

はい 62.72%いいえ 27.47%

Flash 61.35%Quicktime 19.61%Silverlight 2.11%Real 2.03%

content that relies on plug ins is still widely used

Flash dominates, with Quicktime surprisingly high.

Silverlight is still trailing significantly in terms of developer adoption



何の為に利用しますか？(Used for?)

ビデオ 59.08%オーディオ 39.14%ゲームや他のアプリのインターフェイス

22.04%

サイト全体 6.73%

in most cases, this kind of content is audio and video

Very few developers are using Flash or Silverlight for whole web sites



Back End Development and Systems



サーバーソフトウェア(Server Software)

Apache 68.80%Microsoft IIS 22.69%lighthttpd 5.51%GWS 0.41%

Linux 58.75%Windows 27.80%Unix 16.69%Mac OS X 5.59%

サーバーOS

(Server OS)



データベース(Databases)

MySQL 70.42%Microsoft SQL Server 21.96%Oracle 9.16%none 3.40%



プログラミング言語(Programming languages)

PHP 63.05%JavaScript * 55.11%ASP.NET 16.86%Python 15.15%Ruby 14.42%Java 12.32%ASP 11.67%Perl 8.35%ColdFusion 7.13%



Backend Frameworks

None 29.74%Developed internally 19.53%Ruby on Rails 13.29%Django (Python) 10.78%Zend framework (PHP) 6.40%CakePHP 6.08%Struts (Java) 1.86%



Summary



Lessonsメッセージ(the messages)

標準(of standards)

コンテンツ／表現／動作の分離(separation of content,

presentation and behavior)

セマンティック(semantic)

の開発者の声を聞く事ができました。(are being heard

by these developers, and becoming widely recognized best practice)



Lessonsウェブのプロとして開発を増やすこと(Increasingly development is a key part of what web professionals do)

JavaScriptとAjaxがフロントエンドで実装されているサイト(JavaScript and Ajax on the front end)

データベースで動くサイト(Database driven sites)

バックエンドフレームワーク(back end frameworks)

JQueryのようなJavaScriptライブラリーが広く使われています。(JavaScript libraries like JQuery are widely used)



Lessonsプロフェッショナルにとって重要For professionals it is important to

セマンティックマークアップの理解すること(understand semantic markup)

CSSマークアップの他にJavaScriptとAjaxで開発することを理解する

こと。(understand development with JavaScript and Ajax in

addition to markup and CSS)

バックエンドの言語とフレームワークの学習を考慮すること(consider learning backend languages and frameworks)

そのフィールドで世界標準で最もベストな方法を常に注視すること。(To ensure you keep pace with industry best practice world wide)



Lessons

JavaScript開発者は(For JavaScript developers)

JQueryをはじめとしたJavaScriptライブラリーを使いこなすこと(get

up to speed with one or more major JavaScript Library such as JQuery)

そのフィールドにおいて世界標準でもっともベストな方法を常に注視すること。(To ensure you keep pace with industry best practice world wide)



Lessons

経営者は(For employers it is important to)

これらのスキルと哲学を探して採用(look for these skills and

philosophies when hiring)

自分の開発チームがこれらの重要なエリアで常に向上させていること。(continually improve the understanding of your development

team in these key areas)

そのフィールドにおいて世界標準でもっともベストな方法を常に注視すること。(To ensure you keep pace with industry best practice world wide)



Exciting進化した技術に出逢うことは非常にエキサイティングだ。(these are

exciting times with emerging and maturing technologies like )

HTML5

CSS3

Canvas

SVG

Flash and Silverlight



Exciting

今、ウェブでエキサイティングなこと(these are exciting times with the web now)

携帯(on mobiles)

テレビ(televisions)

ゲーム機器(gaming devices)

冷蔵庫(refrigerators!)



Exciting

常に最新技術で何がおこっているかを常に注視すること。

(it’s important to keep up to date, or risk missing the opportunities these developments present)



Thank you

John Allsopp

Satoshi Kikuchi

Web Directions
