IE 6 にも愛の手を !!

• Web ブラウザー
• web

2008年12月17日水曜日

IE 6 で何かアラート的なものが出るといった感じのことが話題になっていますが、個人のサイトとかでやる分にはいいと思うけどあまり真に受けないほうがいい気が…と思いました。ネタとして楽しもうねってことで。

エンタープライズとかだと、セキュリティーや社内のシステムの都合でアップデートできない人もいます。最近では、Windows XP を積んでいるネットブックもはやってきています。Microsoft による IE 7 への強制アップデートもいろんな都合でないようですし。IE 8 beta の座談会とかに参加していたら、IE 6 が残る理由もちょっとわかりました。IE 6 を切れない人もたくさんいます。そもそも Web ブラウザーって何な人もいるけどこれはまた別問題ですかね。

ちなみに IE 6 のシェアが 20 % をきったなんていう記事もありましたが、海外と日本国内では結構状況が違ったりします。ヨーロッパではドイツを筆頭に Firefox のシェアが多いですし。ロシアでは Opera のシェアが多めです。でも日本は技術者以外の人のことを考えると IE のシェアってけっこう多いんじゃないかなと。

だから IE 6 の人にもいいユーザーエクスペリエンスを届けるのがコーダーの仕事 !! とか考えるのもありじゃないかなと思いました。幸い IE には expression などの独自拡張もたくさんあるのでそれで何とかできるケースも多かったりするし。

でも個人的に冗談で楽しむのはぜんぜんいいと思います !! あと、自分も IE 6 は無くなってほしいと切に思っています。

2件のコメントがあります

Shift 2 (2008 - 2009)

• web
• イベント / セミナーレポート
• 日々の出来事

2008年12月13日土曜日

Shift 2 (2008 - 2009) にいってきました。でも、まだまとめきれてないので後で書き直します。

reset.css : 不況が生み出す新たなウェブの可能性 長谷川 恭久さん

• データの移行が簡単
• スピードと安定性
• カスタマイズができる
• 見た目がいいやつ

を基準に自分に合ったものを見つけるとよい

• マッシュアップではないが、ツール組み合わせてさらに便利にすることもできる
• ツールの機能だけではなく、OS の特徴をつかむことも使いこなすことには大切。たとえば、トリプルクリックで段落選択など

コスト削減でもチープにするのではなく、クオリティーを下げずに無駄を減らす。無印良品を見習う。

2008 年の海外 Web デザイントレンドおさらい 原 一浩さん

トレンドは最適化

独自のクローラープログラムで 1 日 100 サイトくらい見ているみたい

• レイアウト
  • 単なる背景ではなく、見立てのデザイン
  • ワイド課の恩恵　余裕のある多段カラム
• 配色
  • ダルトーン
• テキスト
  • Tumblr 以降ビッククォート
  • 見出しは巨大化 : iPhone のように小さい画面でも角田死せずに見出しだけは読める
• アイコンは OK が緑のチェック、NG が赤いバツ
• ボックス
  • アプリケーションっぽいデザイン
  • 吹き出しっぽいデザイン
  • コメントでなくても吹き出しをつけ
• フォーム
  • ラベルのないフォームパーツ : ラベルをつけず、そのかわりにインプットの中 （初期バリュー）に何を入力すべきかが入っている
  • フォームの入力を限定するスクリプトなど
• ナビゲーション
  • 青いボタン多めかも
• 固定フッター : フレームみたいの
• テクスチャ
  • 斜線へってきた。薄くさりげなくつかうとか
  • セロファン風 : 背景を透過させているやつ
  • 多段的なバックグラウンドセパレータ
  • コラージュ : 紙や木、小物などを組み合わせたもの
  • 水平のつやレベル
  • ペーパー : 紙の質感、手書きっぽいの、スプレーぽいの

などが多かったとのこと。

これから求められる RIA を考えよう 新谷 剛史 さん

RIA はかっこいいだけではなく使い勝手もリッチに

2008年は

• Adobe AIR
• Silverlight 2
• Biz Brouser
• JavaFX
• Chrome

などが登場した

AIR は

• ローカルアプリケーションのプラットフォーム
• ランタイムは Webkit + Flash
• OS に依存しない
• Adobe-air.jp にいろいろある

WPF は .NET Framework3.0 が必要で Mac できなかった

Silverlight は WPF ベースで 3D 表現などを追加したもの

RIA の技術はたくさんある。デザイナー、プログラマーはこれらの中から自分に合った技術を選択できる

2009年の RIA は

• クラウド化
• ビジネス向けのソリューション

に注目かも

Shift to JIS X 8341-3:2009 植木 真 さん

• 日立製作所が WAI-ARIA の日本語訳を公開
• HAREL は微妙 ? : 以前自分が試した時も微妙だと思いました…。
• VDA NVDA 日本語化プロジェクト : WAI-ARIA に対応したスクリーンリーダー
• WAI-AGE : 高齢者向けアクセシビリティー。WD がある
• 日本でも高齢ユーザー増えてる
• WCAG 2.0 勧告
• 来年国内でも JIS X 8341-3 改定。5 年ぶり
• 2009 年 1 月には JIS X 8341-3 に対するパブリックコメント募集
• WCAG 1.0 は W3C の技術である HTML + CSS のみを対象としていた
• WCAG 2.0 は PDF や Flash など、Web の技術を対象としている。そのためある程度抽象的な表現。また、日本語特有の問題なども取り入れられている
• JIS X 8341-3 は WCAG 2.0 ベース
• 色のコントラスト基準を数値化。白＋赤は 4.00 で NG。その他の達成基準も数値化
• JIS X 8341-3 1.4.5 : 画像化された文字ではなくテキストを用いて
• JIS X 8341-3 1.4.8 : テキストは 200 % まで拡大してもくずれないように
• WCAG 2.0 的には CSS の画像置換は微妙 : F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information

2008 年の XHTML + CSS を振り返る 益子 貴寛 さん

後でまとめます !!

20 分でわかる Google Chrome の概要 及川 卓也 さん

• 英語圏ではクロム、国内クロームと発音される
• Google Chrome はアプリケーション化した Web に特化したブラウザである
• オープンソースのプロジェクト : Chromium というプロジェクトのもとで Google Chrome のソースコードは公開されている chromium.org
• レンダリングには Webkit を、JavaScriptCore には V8 を採用している。両方ともオープンソース
• レンダリングエンジンは Webkit なので Safari と大差ないが、Webkit のバージョンが若干違うためレンダリングに差があるかもしれない。ただし、できるだけその差はなくすために近いバージョンを採用
• Safari のグラフィックスライブラリーはグラフィックスコア。これは Apple 社独自のものでオープンソースではない。Google Chrome のグラフィックスライブラリーは SGL。これはアドロイドにも採用されている

プロセスについての説明もありました。

• タブごとに別のプロセスで動いているこれはタスクマネージャで確認できる
  • ブラウザプロセス (ブラウザー全体の管理、タブの管理)
  • 各タブ (タブ独自のプロセス　似たプロセスが増えてきたらプロセスをグルーピングする)
• Webkit は Safari, iPod touch, iPhone, Google Crome, Google Android, Dreamweaver のライブビューなどで採用されのシェアは増えてきている
• HTTP ハンドリングに注意。ここについては今は問題がある

Google Chrome / Crmium の今後について

• 拡張機能がない
• UserScript できない
• Mac、リナックス版がない

といった点の解決がされていく

他の Web ブラウザーと違い、短い開発サイクルでアップデートしていく

ツールから考える 2009 年の Web 制作ワークフロー 鷹野雅弘 さん

2008年はツールなどに注目すると

• Microsoft の Expresson シリーズ
• Adobe AIR
• Flash Player 10
• Adobe CS 4

などの変化があった。

• Adobe のプロダクトは 1.5 から 2 年のスパンでバージョンアップがある
• バージョンアップをするときの懸念点には、制作環境の統一の問題 (パートナー会社、必要マシンパワーによるマシン変えなど) やトレーニング、慣れの問題などがある

本当に CS4 が必要なのかを検討する

Dreamweaver CS 4

Dreamweaver CS 4 では JavaScript の開発、検証が強化されている。最近の Web サイトでよく使われる JavaScrit ライブラリーは jQuery 一人勝ちの傾向

• 編集箇所の特定を短時間にするための機能が追加される
  • ライブビュー　デザインビューで JavaScript 検証 (Webkit)
  • ライブコード
  • フリーズ
  • コードナビゲーター
• 分業化、コラボなどで、ファイルの共有、バージョン管理が大切になってきた
• サブバージョン　SVN はバージョニング、差分を取り出す機能、アクセス履歴機能がある。Dreamweaver CS 4 は簡易的なクライアント機能のみをサポート
• リポジトリ - backlog.jp 5GB ほどの領域を無料で利用できる

Fireworks CS 4

• ワイヤーフレームを作るための機能を超強化
• ものさしツール　ボックスやカラムの横幅、高さが何 px なのかを表示できる
• スマートガイド　すでにあるボックスやカラムの位置を基にしたグリッドルールでオブジェクトを追加したり移動できる
• ページ　Dreamweaver のテンプレートみたいな機能みたいな感じ

懇親会では焼肉食べてきました。外村さんと久しぶりにお話できたし、たくさんの人といろいろお話ができました。

2件のコメントがあります

Web Fonts 解禁までもう少し ?

• Web ブラウザー
• css
• web

2008年12月9日火曜日

先日、Opera 10 a がリリースされました。Acid 3 テストでの 100 / 100 スコアを達成したり、Web Fonts をサポートしたり、RGBA と HSLA をサポートし半透明の表現が使えるようになったりと、正式リリースが待ち遠しい製品になりそうです。

Opera 10 a のスタートアップページではさっそくWeb Fonts が使われています。

Web Fonts については、以前から IE が、最近では Safari がサポートし、Fx 3.1 でもサポート予定なので、これでメジャーな Web ブラウザーすべてで Web Fonts を使う準備が整ったといった感じです !!

IE, Fx, Safari, Opera で Web Fonts を使うに実際に Web Fonts の様子をまとめてみました。

2件のコメントがあります

Takazudo さんのメモ : マークアップしている人の気になること

• web

2008年12月9日火曜日

先日のマークアップな人たち (じゃなくてもいいけど) の忘年会 - 2008 年 (?) で Takazudo さんが話題の種になるメモを用意してくださっていたのですが、飲みの席ではひとつひとつの話題でかなり盛り上がってしまい、すべての話題を語り合う時間が足りなかったので回答してみました。(書いていいのかわからない内容についてはパスしてあります。)

右に画像左にその他モジュールについてどう思うか。やっぱ table にする ? もしくは table 嫌だからそもそもそういうモジュールは用意しない ?

display プロパティーの table と hasLayout をうまく組み合わせてやっています。よく調べてみたら自分が思いつくはるか昔に Takazudo さんがやっていたんですねー。

Web 標準に準拠、アクセシビリティに準拠と銘打って HTML を書くとき、table をつかわないといけないことはないの？もしくはその時どうする？理想と現実を埋め合わせるときどうしてるかききたい

IE 6 はまだまだ切れないので table を使うのも仕方がないかなと思います。でも table を使わないでもいい方法を時間のある限り考えてそれでも無理そうだったら…という感じで。これを考える時間が楽しいです !!

alt ガイドラインとかって作ってる ?

どこまで言っていいんだろう。パスで !!

JavaScript のライセンスについてクライアントから説明をもとめられたことはあるか ? また、こっちから事前に説明したりすることはあるか？例えば jQuery を使う時は事前に了解を得ておくとか、言わずにつかってたら NG 言われたとか。

今まではライセンスについて云々のことはないです。(自分が知らないだけなのかもしれないのですが…。) 配布されているライブラリーを使う時にはライセンスについてもさらっとチェックしますが自分で書いてしまうことが多いです。これならライセンスも問題ないんですが…バグと保障の問題がでてきますよね…。

コーディングにかける日数はどのくらい ?

コーポレートサイトだったらテンプレートを作る時間が半日強くらいですかね。デザインを紙に印刷してみて眺めてどう分けるか決めてからコードを書いています。プラスでコンポーネントの量 * 時間という感じで。うちの会社は Dreamweaver のテンプレートを使うことが多いので、テンプレート式とか設定するともうちょっとかかるかも。

テンプレ→量産という考え方について、そういう考え方はあるか ? 制作の流れについて

理想ですよね。このほうが効率もいいし CSS との相性もいいし !!

ディレクター←→デザイナー←→コーダーという流れつにてききたい。ていうかそういう別れ方しているか。

自分の会社の場合はディレクターからデザイナー、ディレクターからコーダーみたいな感じにディレクターの人が取り持ってくれている感じです。でも「これ実装できる ?」みたいな感じのことはデザイナーとコーダーで話し合うことも。

IA という役職的なひとはいるかについてききたい

どこまで言っていいんだろう。パスで !!

画像置換についてどうおもうか。共通部分はまぁおいといて、ページごとに見出しをそうするとかいうことに対し。大変だし。

全部画像化した文字を img 要素として埋め込んでいます。大変だし。自分的には生のテキストを装飾して見出しとかボタンに見せてあげるのが好きなんですけど現状の CSS でデザインの実現を考えると難しいですよね。和文は Font も少ないですし…。でも画像置換もめんどくさいのを抜きにしたら悪くはないかと思います。

コーダー・デザイナーって何人ぐらいいるか

どこまで言っていいんだろう。パスで !!

CMS についてどう思うか。てか CMS 実装とかしているか。

CMS は MT を使うことが多いかなぁと思います。値段的にもできること的にも。

スクリーンリーダーについて確認してるのか ?

たまに…します。

印刷について

最初から印刷できるようにしてって言われることもありますが、そうでないときでもあとで「印刷できないのこれ !?」って言われないように意識しながらやっています。背景に依存しすぎないとか、content プロパティ + expression の合わせ技とか。

HTML テンプレ仕様の確認とかどーしてるか ? ディレクターが確認 ?

どこまで言っていいんだろう。パスで !!

IE7 zoom の対応とかしてます ? 文中アイコンとか、どうにもならない系のは。また、クライアントに対応を求められたことは？

アイコン系は時間がない時は hasLayout を true にした span で囲んで無理やり。大枠は position の値に気をつけながら。という感じです。それでもどうにもならないのは…どうにもならないですよね…。どうしてます ?

JavaScript ファイルの管理方法について。自分は script タグを書きだしてインクルードぽくしてるんだけど、これだと全ページで全部読み込んだりとか、読む順序が前後して面倒なことになったりするんだけれどどーしてるか ? 直に script タグをかいているのか。

まとめてインクルード用の JS を用意して使っています。このほうが管理が楽ですしね !! 特別なページはひとつずつ全部読み込みます。

JavaScript 書いていると、IE5, 5.5 だと大体 JS エラーでるけど無視している ?

はい…。

JSの圧縮ってしてます ?

メンテナンスしづらくなるのでしないことが多いです。

もう、position : absolute, float : left / right 以外のブロック要素にはほとんど zoom : 1 したい気分なんですがどうですか。1 個 1 個確認しますか。

hasLayout が true になっていないとやばそうな所だけ zoom : 1 しています。position : relative の個所とか、ネガティブマージンをつかって親要素からはみ出している個所とか。

研究的なことってする時間もらえてますか ?

どこまで言っていいんだろう。パスで !!

こんなことしながら仕事している人もいるんだな的な感じで。

Takazudo さん、素敵なネタを提供してくださってありがとうございました !! またご一緒できるといいなぁ。

2件のコメントがあります

技術系のブログを書いている方々とご飯を食べてきました

• イベント / セミナーレポート
• 日々の出来事

2008年12月1日月曜日

技術系の Blog を書いている方々とご飯を食べてきました。

参加された皆さん :

• Arata さん : TRANS [hatena]
• hamashun さん : hamashun.com
• ひらっち : CSS HappyLife
• コリスの人 : コリス
• sig さん : Archiva
• Takazudo さん : Takazudo Clipping*
• vant さん : vantguarde

皆さんの Blog はいつも拝見しています。会いすることができとてもよい刺激になりました !! 自分なんかをこんな凄い場に呼んでいただいてありがとうございました。

軽い感じのお話もありましたが、濃い内容も多めでした。

• マークアップとかしてる人は情報を論理的に整理できて IA に近いね
• ワイヤーフレームをつくる前から参加したいよね。
• Web ページを構成するパーツは、どこからどこまでが共通に用意するもので、どこからをユニークなものにするか迷いどころ。
• IA て目に見えないから効果の説得をしづらいイメージ。でもアクセシビリティは目に見えないけど説得力あるよね。後者はオフィシャルなガイドラインとか法律とかあるからかな
• キーボードとかエディタとかの環境はどんな感じですか ?
• Fx の印刷はしょぼいよね。でも IE はまだよいね。
• 印刷専用の見た目とディスプレイの表示と同じ見た目、どっちがいいのかな…
• 巣鴨 CSS !?

などなどいろいろ。

今年はたくさんの人に出会うことができ、とても良い年になりました。といってもまだ 1 ヵ月ありますが…。ラストスパートがんばる !!

2件のコメントがあります

Web サイト内検索

カテゴリー一覧

• V系とか (36)
• web (137)
  • css (7)
  • html / xhtml (1)
  • Web ブラウザー (5)
  • イベント / セミナーレポート (9)
• 卓矢エンジェル (36)
• 日々の出来事 (333)
• 未分類 (1)
• 本日のお昼ごはん (9)

この Weblog の FEED

この Weblog の FEED

knows

会社で隣の席の人 : Coding Architecture