今後WDE09の概要が明らかに！
乞うご期待を！
]]>このプレゼンで、ブラウザごとの見栄えの差異と、彼が最近はじめた新しいワークフローの試みについて詳しく説明しています。
- 公式URL:
- http://forabeautifulweb.com/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/
公式アナウンス
http://www.vivabit.com/viva
これで、North, South, East, Westの全てがそろった事を嬉しくおもいます。また、同時にWeb Directionsではさらなるカンファレンスとして東南アジア地域での開催も計画しております。
今後ともWeb Directions Eastを含めて、皆様のご愛顧を頂けますと幸いです。
Web Directions East事務局
]]>Web Directions East事務局
]]>その点、CSS3も自分の範疇を超えてる事が多く似ています。実践的な使い方がわからず便利さが分からない事もしばしば。自分の中ではCSS3のtransformは特にそんな感じでした。
でも、ClearleftのNatalieがみせてくれたtransformの実装方法は、非常に実践的で素晴らしいものです。ポケットリファレンスを印刷時はCSS3のtransformを利用し90度回転させるというもの。元はBrian Sudaの発想みたいです。
非常に賢いですね。
/* rotated left */
#page1,
#page8,
#page7,
#page6 {
-webkit-transform: translate(64.5px, -64.5px) rotate(-90deg);
-moz-transform: translate(64.5px, -64.5px) rotate(-90deg);
transform: translate(64.5px, -64.5px) rotate(-90deg);
/*-webkit-transform:rotate(90deg) scale(0.6) skew(-23deg);*/
}
下記の図はスクリーンショットです。
Style Master Cool Tools and Toys for Web Developers
リンク先:http://tools.westciv.com/
紹介されているツールはXRAY, MRI, CSS3 Gradient, text-shadow, box-shadowと便利なものばかりです。
XRAY
XRAYは要素のwidth/height/positionを調べる事が出来るツールです。使い方はいたって簡単で、
使い方が詳しく掲載されています
MRI
MRIは要素にCSSを適用したい時にCSSセレクタの記述を教えてくれるツールです。もし、CSSを記述したのに適用されない時など、セレクタを確認する時に便利なツールです。
CSS3 sandbox
Gradients(liner/radial)
WebkitのnightlyバージョンとSafari4以上はCSSでbackground・border-image・list-style-imageへGradient（グラデーション）を適用できます。ただ如何せん記述が難しい。でも、このツールがあれば簡単にGradientを適用することができます。
Gradientにはliner(線状)とradial(円状)の二つのタイプのGradientがありますが、それぞれのバージョンがあるので自由に作成することができます。
ちなみにlinerを使えばiPhoneのUIに合わせたボタンやバーなどを簡単に作る事ができます。iPhoneのSafariはgradientをサポートしています。
Shadow
CSS3ではテキストやボックスに陰をを付けることができます。しかし、慣れの問題とは考えていますが、感覚的に陰の方向や距離の具合を掴むことは非常に困難です。このツールはスライダーを調整するだけで自分の好みの陰を決定できます。そして、生成されたソースをコピー＆ペーストするだけで簡単にtext-shadowやbox-shadowのCSSを記述することができます。
上記に紹介したツール以外にもドンドンとツールは追加される予定です。
楽しみですね。
]]>PDFもダウンロードすることも可能です。
それが『Type-kit』です。
現在のウェブでは、ユーザーのパソコンにインストールされたフォントのみウェブサイトで表示可能です。しかし、CSSのWeb Fontsを利用するとユーザーが未インストールのフォントでもウェブサイト上で表示可能になります。
この技術を利用すると、画像を使用せずとも見出しなどを作成可能になります。更には、ユーザーはテキストを自由にコピー＆ペーストしたり、制作者は自由にテキストを修正／変更可能になる便利な技術です。
ただし、今迄は殆どのフォントがライセンスの問題に阻まれ自由に利用できません。無料フォントでさえも実はライセンスの問題に阻まれ利用／再配布ができませんでした。
Type-kitのソリューション
Type-kitはこの問題に関して，Type-kitユーザーはType-kitのフォントライブラリーにアクセスし自分の使いたいフォントを選択しType-kitへ連絡（恐らく至極簡易な方法）するだけです。
後はJavaScriptを<head>に書き加えると無料フォントのみならず、商業用フォントも利用可能とのことです。フォントライブラリーについては様々な団体や企業と交渉中とのことです。どんなフォントが利用が可能になるか楽しみです。
IEでどうなる
IEはW3Cの標準とは異なりIE4の頃からEOT形式のWeb Fontsをサポートしています。これに対して、WEFTを使いEOTファイルを作成する必要があるかは分かりませんが、smoothes out differences in how browsers handle typeとあるので何とか、IEにもType-kitは対応するものと思われます。
日本語でどうなる？
日本語はアルファベットに比べ、桁違いに文字数は多くファイルサイズも大きくなります。実際、『超実践HTML5&CSS3』のページを作成した当初はFontin Sansフォントに比べて日本語フォントは10倍のサイズでした。コレに対しWeb Directionsは常用漢字のサブセットを作成し、
タイトルのみへ適用することでローディングの時間を短縮するように勤めました。
Type-kitはいつ正式デビュー
正式なデビューは今夏です。現在は先行登録のみ受け付けています。当初はアルファベットのみ成る予定ですが、日本語もサポートされるように働きかけたいと思います。
]]>個人的な見解ですが、ユーザーが情報にアクセスできれば見栄えが異なっても自分はいいと考えています。ウェブにアクセスできるデバイスは段々と増えている中でデザインを統一し全てのユーザーへ同じデザインを提供できるか疑問です。
カーナビゲーションに搭載
さて、本題ですが新たにウェブにアクセス可能なデバイスが１つ増えました。『カーナビゲーション』です。今迄もトヨタや日産、ホンダなどインターネットを介して情報通信するシステムはありました。ただ、今度この『カーナビゲーション』が搭載される新BMWの7シリーズはインターネットへアクセスが完全可能です。Googleやtwitterにアクセスも可能です。また、コピー&ペーストもできるのでメールに送られた住所をコピーしてナビゲーションシステムに入力し、その住所へのルート探索もできます。ちなみに操作はiDriveというsonyのロータリースイッチ（アルプス電機製）似た機構を利用します。
サービスの展開
このナビゲーションシステムは、今年、7シリーズを始めとしてヨーロッパと米国でファクトリーオプション（日本でいう工場出荷オプション）で搭載可能になるようです。通信の仕組みは次世代の今年2009年からサービス提供されるEDGE (Enhanced Data Rates for Global Evolution)を使います。
このサービスは今後、欧州と米国で急速に広がると考えています。理由は２つ、１つ目は欧州は既にインフラが整っている事、米国も AT&Tワイヤレスがインフラ整備してること。２つ目は欧州や米国の車社会では、より車中に滞在する時間が長くユーザーのニーズが 必然的に高いことが理由です。
また安全の為、3mph(時速約5km)以上で運転席はサービスが利用できません。ただし後部座席は3mphを超えてもサービスを利用可能です。
一方でBMWのライバルであるMercedes Benz, Audiなどのメーカーは現在のところ、このサービスを提供する予定はないそうです。理由は顧客が興味を示さないから。逆にマーケティング的にはBMWの購買層はインターネットを利用する時間は長い若いCEOが多いと考えられており必然なのかもしれません。
新たなデバイスが登場して
さて、ウェブは依然として、その利用可能デバイスを広げており、カーナビゲーションのように左ハンドル、右ハンドルの違いがあり、運転者の位置が国の法規により変わったり（日本の場合、ディーラーで左右両方が選択可能）、信号待ちの僅かな時間に慌てて利用したり、昼と夜で室内の環境が変化します。
では果たしてデスクトップと同じデザインを、このような環境とデバイスに提供が可能でしょうか？また、するべきでしょうか？BMW7シリーズ左ハンドルのナビゲーションを想像して、デスクトップ使用にもカーナビゲーション使用でも耐えうるデザインカンプを描くウェブデザイナーがいるでしょうか？（ある意味Googleのデザインはそういった意味では非常にフレキシブル）
そろそろデバイスや環境、ユーザー（クライアントではない）を考えて本当にウェブを作る時代がきているのかもしれません。
参考記事
http://www.autoweek.com/apps/pbcs.dll/article?AID=/20080505/FREE/727416159/1530/FREE
パネラーの皆様(写真左より)
- マイクロソフト-春日井良隆氏
- アドビ システムズ-轟啓介氏
- アドビ システムズ-太田禎一氏
- 株式会社ミツエーリンクス-矢倉真隆氏
- Web Directions-John allsopp氏
- Could-長谷川恭久氏
の以上豪華6名を交えて行われました。
トピック
- ウェブに携わる仕事において何が楽しい部分だと思いますか？
皆さん、これについては自分が世界に向けて発信できる。すぐに情報が伝わる即時性が凄く楽しいとおしゃっておりました。ただ、マイクロソフトの春日井さんは情報が伝わるのが早くなったことによってアメリカで情報が公開されるとユーザーの方が先に情報をえていて困ってしまうとおしゃっておりました。 - HTML/CSS/JavaScript 以外で知っておきたいスキルや概念はありますか？
アドビ システムズの太田氏が技術マッチョにならずに、技術をどのように使うかを大事にしてほしいと述べておりました。 - セマンティックコンテンツにおいても、ウェブはさらにリッチなものになっていくのでしょうか？
- 夢が何でも叶うなら、ブラウザにどのようなウェブ技術を盛り込みますか？
iPhone(safari)にflashを組み込みたいと、Apple storeならではのコメントをアドビ システムズの太田氏が述べておりました。太田氏のコメントは終始ウィットに非常に富んでおり会場の雰囲気を常に和ませておりました。 - 今がウェブが直面しているチャレンジは何でしょう？
新しい情報のみではなく、古い情報も活かす仕組みが必要。そしてNet Neutrality(ネットを使った人が使った分だけ払う仕組み)も直面しているとのコメントもありました。 - いろいろありますが、開発者は何にフォーカスすれば良いのでしょう？
Web DirectionsのJohn Allsoppがいずれ自分も将来は耳や目が使えなくなるかもしれない。そうなっても使えるアクセシブルなページを作ろうと言っておりました。
まとめ
パネラーの方々はさすがと言わせる鋭い視点とウィットをどなたもお持ちでした。アドビ システムズの太田氏は、同じくアドビ システムズの轟氏と掛け合いをしながらと、御陰様で会場からは時々笑いも聞こえるなど皆さん、楽しんでいただけたようです。
さいごに『Stage of the web09』にご来場をいただきました方々ありがとうございました。また、パネラー方々、アップルストアの方々、お疲れさまでした。
世界のWeb開発者動向をWeb Directionsが世界1200名に対し、行った調査を元に講演。
講演内容の簡単なまとめ
- 2008年12月に過去のWeb Directionsへの参加者、著名な開発者の方のブログを通して実施。回答者は全世界で1,200人以上。その殆どが英語圏（英国、米国、豪州）。日本からは10人と少ない。これは英語が理由だと思われるので来年は日本語で実施予定。
- 回答者の半分が自身を『開発者』と表現。5年前なら『デザイナー』と表現する人が多かった。
- 回答者が様々な分野の職種に従事、いまやWebの開発者は政府機関から金融関係まであらゆる分野に進出している。また、所属する会社の規模も小中大と多岐にわたっている。
- 回答者の半分がmacOSを利用。実際、Web Directions South08ではWindowsユーザーは１人しかみなかった。開発者はmacを使う人が多い。
- 利用しているブラウザは50%がFirefoxを利用。その他、Safari, Chrome, Operaを利用している人が30%。IEを利用している回答者は20%。しかし、検証するブラウザになるとIE6とIE7が多い。モダンブラウザをメインとして使うが検証の際にはIEは外さない。またマークアップの検証をする頻度は70%の人が頻繁に行うようです。
- マークアップする時、XHTMLを利用する人が80%、HTMLを利用する人が20%。XHTMLが圧倒的に利用されている。その中でもstrictとtransitionalは同率で利用されている。
- マイクロフォーマットを利用する人は35%が利用。使わない人が41%。マイクロフォーマット自体を知らないひとが19%。Googleが5月12日にサポートを表明し、これからは利用する人が多くなると思われる。
- ページの見栄えが全て同じべきかという質問に対しては、50%以上の人が不要と回答している。特にProgressive Enhancementという考え方は非常に深く浸透しはじめた。Johnはデバイスごとに見栄えが異なっても問題ないと考えているらしい。確かに、表示するデバイスがPCだけならいいが、それが現実的ではなくなってきた今日ではJohnの考え方はうなづける。LGなどは既に冷蔵庫にWebを持ち込んでるらしい。
- CSS3を使うかどうかという質問には。70%の人が使わないと回答。まだCSS3を使わない人の方が大多数。PE(Progressive Enhancement)は理解されているので、使う人はこれから増えるだろう。
- webfontsを利用するか？という質問に対しては、まだ利用しない人が85%。ただし、IE4から実装されており。現在では全てのブラウザで利用が可能。日本語は文字数が英語と比べ多く、実装の際にはサブセットをつくるなどして実装の必要性がある。事実、Web Directionsのデモサイトではサブセットを作成し、文字数を削減し実装。
- 7割超の開発者がJavaScriptを利用。中でもJQuery使用する人が圧倒的で利用方法は視覚効果、フォームエラー、サーバーとの通信となっている。jQueryは非常に人気が高い。
- 経営者は新社員を採用するなら、その人の学歴などではなく、スキルや考え方に注視すべし。また、自分の制作チームも同様にスキルを常に磨き、世界標準に則っていることを確認すること。新しい技術を常に注視すること。
さいごに
ただ調査結果を眺めてみても分からないことが、この講演で内容の輪郭をつかむことできたと考えています。たしかに海外と日本語の言語の違いはあるのですが、逆に日本の開発者だけ同じブラウザやOSを使って開発を行うのに全く別の方向へ進むことはないと考えますので、１つの参考としていいんではないでしょうか。
]]>Webkit Surfin’Safari(グラディエントについての記事)
http://webkit.org/blog/175/introducing-css-gradients/
Opera SVG (SVGについての記事)
http://virtuelvis.com/archives/css3/index
http://virtuelvis.com/download/2007/09/kestrel/itunestable/
そこで、Web DirectionsのJohn Allsoppが作成したツールがこれです。
http://westciv.com/gradients/
使い方はいたって簡単
上から『Start』『End』『Stops』ボックスが並んでいる。その中で『Start』と『End』はグラデーション色、Horizontal Position=水平位置、Vertical Position=”垂直位置”をそれぞれ指定することができます。
一番最後の『Stops』は途中で色を追加するものと考えると分かりやすい。色をグラデーションの途中で追加することができる。
今後はradial(放射状)のgradientを実装するとJohnと言っていましたので、後ほど実装されると思います。
]]>http://south09.webdirections.org/
注目のビジネストラック
今年のWDSはビジネストラックがお目見え、そしてスピーカーとして元GE, 元CITI,元P&GのDeborah Schultzが企業のソーシャルメディアについて講演。また例年と同じデザイントラックでもグリッドレイアウトで有名なMark Boultonがwebfontなど今年注目の技術について講演。
http://south09.webdirections.org/program/speaker
ところで実際にWeb Directions South(カンファレンス)へ参加する為の渡航／滞在コストを計算してみました。
- コスト
- 品川（自宅）〜 成田空港 6,220円
- 飛行機代（往復）27,300円(Jet Star)
- 空港 〜 ホテル(タクシー) 3,000円x2=6,000円(去年の経験からこのくらい)
- 食費(朝,昼,晩) 1,000円x6=6,000円（恐らく少し足りません。）
- ホテル 2泊3日 6,000×3=18,000円
合計 63,520円
もし実際に渡航するのであればこれに、他に雑費やお土産代などがかかるので、30,000円ぐらい余分に予算に必要。おそらく合計で10万もあればOK。
]]>参加された方は、Web”ディベロッパー”(開発者)として何が必要なスキルか理解いただいたと思います。
以前に公開した資料を再度『State of the web09』のご紹介しますので、必要の方はご自由にお使い下さい。
近日、『State of the web』のプレゼン／パネルの内容をレポートします！
]]>日々、Webの動向は目まぐるしく変化しています。
『State of the web』では世界中の1200名を超える開発者におこなった調査より、世界の開発者の動向を分析します。
- 現在のWebの動向は？
- 自分の使っている技術はホントに正しい？
- 開発者の最もよく利用するブラウザは？
- クロスブラウザってどうなの？
- Flashってどのように開発者は使ってる？
など、疑問をお持ちの方は是非ともご来場を！
『State of the web09』（大阪）
場所：アップルストア心斎橋
時間：5月19日（火）19:00 - 20:30
URL：http://www.apple.com/jp/retail/shinsaibashi/
定員：40名（それ以上は立ち見）
特典：50名に1名へWDE09カンファレンスチケットが当たります。
さて、そのプロモーションの一貫としてWDEメンバーのOli Studholm氏がこのたびVideo Castのmessa.tvに出演し、Web Directinos Eastについての魅力について語っています。
Oli氏が参加しているmessa.tvは大阪の株式会社 messalibertyさんのVideo Podcastです。世界中の情報を集めて動画で色々と紹介してくれています！
- 株式会社 messaliberty
- http://www.messaliberty.com/
- 株式会社 messalibertyの開発したアプリ！
- http://hulor.com/はリコメンドツールのようです。機会があれば次のウェブサイトに実装してみたいと思います。
『state of the web』に是非とも
]]>
早割価格は36,750円(税込)、定価42,000円(税込)より5000円も割引きしております。
現在の参加状況は東京会場が残り5名、京都会場が残り2名となりました。京都会場にて参加を検討されている方はお早めにお申込みを！
また、正式にアナウンスはしませんでしたが5月3日にワークショップ募集ページをHTML5へ変更しました。またCSS3もwebfont,transform,transition,border-radius,multi-columnを実装、microformatsも実装しました。作業中にプロジェクトメンバーのOli Studholm氏がw3cのバリデータ、webkitのバグも発見しリポートをしました。<br />またHTML5ワーキンググループのIan Hickson氏よりHTMLのマークアップは元より、figure要素など実際に教授をいただきました。その他、MozillaのJohn Dagguet氏よりWEFTに変わるツールも提供いただきました。HTML5CSS3の実装作業で得られたFeedback、成果は全ての今回のワークショップの内容へフィードバックする予定としています。
microformatsも実装しましたが FirefoxのOperatorにてエラーを確認しています。ただし、開発者へのリポートも終了しております。
『超実践CSS3 & HTML5』ワークショップURL:
]]>
このワークショップを開催するにあたって、内容のCSS3とHTML5について恐らく早すぎると感じる方もいるでしょう。ブラウザの実装、特にIEの実装が進んでおらず早すぎると感じると思います。ただ、Jeffrey Zeldman が主催する『An Event Apart』、Clearleftの『UX London』、Appleの『Safari４』（注01）など、それぞれの先進性からHTML5の実装を選択しています。
Web DirectionsでもHTML5に対し、何らかの取り組みを行いたいと思い、『超実践CSS3 & HTML5』ワークショップを5月16日、17日に開催することとしました。
CSS3については、昨年の6月に『CSS Reloaded』を開催し、当時はCSS3に対して否定的な意見を述べる方もおりましたが、現在はその様な意見の方もCSS3について各地でプレゼンをされるなどCSS3への理解が非常に深まってきました。
このような中、Web Directions EastではCSS3について、今年はCSS3のデモではなく実際のウェブサイトにてCSS3を使うテクニックを学びたいと思います。transfromプロパティをUXを損なうことなく利用する。text-shadowを利用して可読性を更に向上させる等。
HTML5については、世界的に現在点で制作者向けのマニュアルも作成されていない段階ということもあり、当然ながら日本でも資料は限られています。それゆえか既に
<div>=<section>というような大きな誤解も生じていますので改めて、正しくHTML5の要素について理解を深めたいと思います。HTML5の文書構造化、secionによるoutlineなどにもフォーカスを当てます。
HTML5もCSS3も先進の技術を相場師のように実装される、されないを判断するのではなく。実装されてもいいように貪欲に身につけることが必要が将来へのリスクヘッジになるでしょう。
参加ご希望の方はWeb Directions Eastより御願いいたします。
注０１：Apple の『Safari4』のウェブサイトについてはHTML5文法上ミスがあります。
]]>
『The king of web standards』などと呼ばれているJeffrey Zeldman。彼が現在、無料で過去に出版した本を配布しています。
アマゾンで5つ本をゲットしている良書『Taking Your Talent to the Web』です。2001年に発売された本ですが今でも面白い本です。今週末の一冊にいかがでしょうか？
- Zeldman.com
- http://www.zeldman.com/
WDE twitter
始めました。様々な情報を配信しています。
概要
- 『State of the Web09』
- 2009年5月19日
- 19:00-20:00-『State of the web』
- 会場：アップルストア心斎橋
- スピーカー：John Allsopp（ジョン・アルソップ）
- 参加費：無料
- 定員：40名（40名以上は立見）
- 参加登録：当日会場へお越し下さい。
通訳について
全てのセッションに対して逐次通訳のご用意を予定しております。
John Allsopp氏について
Webが誕生間もない1992年のWeb黎明期よりWebに積極的に関わり活動。CSSの大家であるEric Meyerらと『CSS Samurai』（http://archive.webstandards.org/css/members.html）としてCSSの普及活動をおこなう。その後、Web標準の王様と称されるJeffrey Zeldmanを中心として、いまやIE8を含める全てのブラウザのベンチマークとなったAcidテストを手がけるWaSP（http://www.webstandards.org/）を設立しWeb 標準の普及活動を世界をまたにかけ行う。
現在は豪州に居を構え、Westcivの代表として、米国、豪州、日本で行われているWeb Directionsの全てを統括。昨年は著名人により記事を掲載したSCROLL Magazineを発行するなど多岐に渡り精力的に活動している。また彼自身もA List Apart, 24ways, microsoft mixなどへの有名媒体へ執筆も多数おこなっている。
また、今回は『State of the Web 2009』に続き、国内の各大手ベンダーなどから開発者を招聘し、パネルディスカッションを開催します。
概要
- 『State of the Web09』
- 2009年5月14日
- 18:00-18:45-講演
- 18:55-19:50-パネルディスカッション
- 会場：アップルストア銀座
- スピーカー：John Allsopp（ジョン・アルソップ）
- 参加費：無料
- 定員：180名（うち椅子席は84席）
- 参加登録：当日会場へお越し下さい。
John Allsopp氏について
Webが誕生間もない1992年のWeb黎明期よりWebに積極的に関わり活動。CSSの大家であるEric Meyerらと『CSS Samurai』（http://archive.webstandards.org/css/members.html）としてCSSの普及活動をおこなう。その後、Web標準の王様と称されるJeffrey Zeldmanを中心として、いまやIE8を含める全てのブラウザのベンチマークとなったAcidテストを手がけるWaSP（http://www.webstandards.org/）を設立しWeb 標準の普及活動を世界をまたにかけ行う。
現在は豪州に居を構え、Westcivの代表として、米国、豪州、日本で行われているWeb Directionsの全てを統括。昨年は著名人により記事を掲載したSCROLL Magazineを発行するなど多岐に渡り精力的に活動している。また彼自身もA List Apart, 24ways, microsoft mixなどへの有名媒体へ執筆も多数おこなっている。
パネルディスカッションも開催します
『State of the Web 2009』のもう１つの醍醐味は各ウェブベンダーによるパネルディスカッションです。HTML5, CSS3, Geo Location APIなど急進するブラウザの新技術の実装。それらを実装しているブラウザなどのベンダーはどのような方向へ進んでいるのか？HTML5の実装はどうなるのか？CSS3は？そんな疑問のヒントが、このパネルディスカッション隠されてるやもしれません。
パネラー
- John Allsopp
- w3c
- ブラウザーベンダー
- OSベンダー
パネラーは順次決まり次第ご案内いたします。
通訳について
全てのセッションに対して逐次通訳のご用意を予定しております。
]]>