ブラウザ

A collection of 14 posts

ブラウザ

Beyond IE Six というページをつくりました

先週いよいよ Internet Explorer (IE) の自動アップグレードが開始されました。これにより、多くの Web 開発者の頭を悩ましていたバージョン 6 (IE6) がなくなるのではないかと期待している方もいると思います。制作者の都合だけでなくても、より早く安全な Web 体験が出来ることを考えると、利用者にもメリットはいくつかあります。 自動アップグレードによって、IE6のシェアは今後さらに下がることでしょう。しかし、真の課題は IE6 がなくなっても残り続けると思います。見た目を同じにするという古い考え方を持ち続けている間は、IE6 がなくなろうとも現状は変わらないはず。「IE7がなければ・・・」「IE8もいらない・・・」と同じようなことを数年後繰り返すことになるでしょう。長く IE6 の対処をしていたことが、頭の中まで IE6 になっている方もいるかもしれません。IE6 のシェアより、作り方のメンタリティが変わらないから深刻な状態になったのかもしれません。 スマートフォンを対象にしてサイト制作している方はご存知だと思いますが、同じ見た目にするという古い考え方を持ち続けると、制作の大きな足かせになります。それはスマートフォンだけの問題ではないはずです。 IE6の周辺の話になるとネガティブな感情ばかりが目立ちますが、少しでも建設的な視点で

デザイン

拡大・縮小機能からみるブラウザの課題

拡大・縮小はレガシー機能? JIS X 8341-3:2004 には、ブラウザの機能で文字の拡大・縮小ができるようにしたり、ユーザースタイルシートで変更できるようにすることを推奨しています。当時多く方が利用していた IE6 は、ピクセル指定の文字の拡大縮小が出来なかったこともあり、ブラウザの機能とは別に JavaScript で実現した文字サイズ UI が実装されてたのだと推測しています。もちろん、JIS規格が IE 中心で見ていたとは思っていませんが、ブラウザによって拡大・縮小の解釈が様々でした。その名残もあって今でも Web サイトに文字サイズ変更の UIが設置されている場合があります。 今は時代も変わりほとんどのブラウザがピクセル指定がしてあってもレイアウトも文字も拡大・縮小出来る機能を実装しています。こうした時代の変化を考慮して JIS X 8341-3:2010 では、文字に関する達成基準のニュアンスが変わっています。現在は「コンテンツ又は機能を損なうことなく,テキストを支援技術なしで200%までサイズ変更できなければならない。」としています。200%

google

Chrome Frame はひとつのソリューション

今週リリースされた Chrome のように JavaScript や HTML5 レンダリングを実現することが出来る IE 向けプラグイン、Chrome Frame。プラグインをインストールしているブラウザのみ認識するたった一行の meta を記入するだけなので、制作者にもやさしい仕組みになっています。Techcrunch あたりでは、「笑える」「スマート爆弾」だとおもしろおかしく Chrome Frame を表現していますし、「IE を乗っ取った」と書いている方も見かけますが、個人的にこれは素晴らしいデザインソリューションとして見ています。 まず、構造からして「乗っ取り」ではなく、利用者を意識した配慮がなされています。Chrome Frame は Browser Helper Object (つまり IE 公式の仕組み) として提供されており、IE の

ブラウザ

Opera Japan のパネルディスカッションに参加しました

数日前の話になりますが、Opera Japan にて社員向けのパネルディスカッションが開催され、スピーカーとして招待されました。林 信行さん、ミツエーリンクスの木達さんに並んで一緒に話すことが出来て恐縮でしたが、こんな機会はまずないので楽しんで参りました。Opera が示すことが出来る日本のプレゼンスに関するディスカッションもありましたが、Opera というひとつのブラウザに捕われない大きな話もありました。 HTML5 がこれからWebアプリケーションにどのような影響を及ぼすのか、そして使える環境が整えられ始めている現在においてデザイナーや開発者はどのような姿勢をとっているかといった話は多くの時間を費やしました。ジャーナリストから見た視点、大規模の Web サイト制作会社の視点、そしてひとりの Web デザイナーの視点がそれぞれあり、興味深い展開でした。どの視点をとっても「なぜ」HTML5 や CSS3 を使うのかではなく「いつ」「どのように」のほうが課題という印象がしました。Progressive Enhancement の意識調査と共通していえることですが、作る側が重要性を理解していても、クライアントや利用者に対しての提案の仕方が模索されきれていないのが現状です。このあたりがクリアになることで導入サイトの増え方も変わってくるでしょうね。 また、技術視点での提案ではなく利用者視点の提案も必要です。DHTML や Ajax

ブラウザ

IE6から先へ行くための提案が必要

YouTubeやDiggといった海外でアクセスの多いサイトが次々と IE6 のサポートを中止する動きを見せています。YouTube は他のブラウザに変更するメッセージの表示以外に具体的にどのようなサポートを止めるのかが分かりませんが、Digg では、コメントや Digg ボタンといったサイトのコア機能のサポートを止めることを考えているそうです。このニュースに影響されたのか、Twitter では、「IE6 Must Die」が、トレンドトピックにランクインしましたし、Twibbonを使った運動も展開されています。 ここ数年ほど、私は最新のブラウザで作りたい形を組み立てて行き、IE6 での表示をどう調整するかという進め方にしていますが、提案したいアプローチが場合によって IE6 では厳しい場合があります。JavaScript を使えば擬似的に CSS2.1 CSS3 のセレクタが使えるとはいえ、レイアウトによって別の不具合が発生する場合もあり、万能ではありません。IE6 を他の最新ブラウザと見た目を同じにするという所謂俗説に挑戦するために多くの調整時間やクライアントのお金を費やすのが果たして正しいのかどうかというところでしょうね。 IE6 Users Must Die であってはならない 私も IE6 だけのために多くの時間を費やしたくないですし、

UI

ユーザーが考えるブラウザの未来

Mozilla は去年からコンセプトサイトで未来のウェブの使い方の提案をしています。セミナーでも紹介したことがある、Adaptive Path の Aurora が有名ですね。コンセプトサイトだけでなく、Flickr の mozconcept というタグから、利用者が提案した様々なコンセプトデザインを観覧することが出来ます。 利用者が考えた優秀なコンセプトデザインが見たい方は、Design Challenge: Summer 09 がオススメです。120以上のアイデアが提案されており、モックアップ、スケッチ、ビデオなど説明の方法も様々です。Firefox をベースにしたものが多く、履歴やブックマークの新しい管理方法。タブとは異なる複数同時ブラウジングの可能性を示しているものが人気トピックですね。ここまでやるか!と思えるような作り込みがされているコンセプトも少なくありません。 全体的に、新たな管理作業が加わる印象が多い機能が目につきますね。それがタブであったり、ブックマークのメタ情報であったりと様々ですが、手動であれば使われない機能になるかもしれません。利用者が何もインプットしなくても管理されている必要があるでしょうし、利用者の使い方を学習しれると嬉しいですね。今ブラウジングしているサイトのコンテキストに応じてブックマークバーの内容が変わるとか。 こうしてたくさんの、アイデアが並んでいると「あ、こんなのおもしろくない?」という思いに繋がりますね。たまにモックアップ作っていますが、

インターネット

ブラウザは知るべき存在だと思う

この記事は「ブラウザって何ですか?」の続きにあたります。 @zerobase「誰がインタビューを実施し、結果を公表したか(その意図は何か)」への批判的な考察も書かれたほうがよいかも > “回答者の多くの方が「ブラウザ=検索」という認識を持っているみたいですね” ぜひ石橋さんの意見を伺いたいところですが、私もほうも肯定的に「ブラウザは見えない存在になっているのね。良かったね!」と考えているわけではありません。 利用者がウェブから取得したデータをどのようにブラウザで表示されるかどうかといった仕組みは知る必要はありません。ただし、ブラウザが分からないとなると、セキュリティへの理解も低いのではないかという懸念もあります。特別な知識やセキュリティソフトがなくても、ブラウザという窓口を利用しているのだと理解しているだけで予防出来ることは少なくありません。例えば、アドレスバーの URL を見るとことを意識するだけでも違うでしょう。SSLのサインが表示されているか確認することも重要です。 また、アクセシビリティやユーザビリティの側面からも、ブラウザという存在を知るか知らないかで違いが出てきます。今は随分少なくなってきましたが、サイト内に文字サイズを変更出来る UI が一時期流行したことがありました。文字の大きさを変える機能がブラウザに実装されているにも関わらず、こうした UI が流行したのは、サイトの制作の方針やブラウザのサポート状況による結果だとは思いますが、それでも既にあるものをわざわざサイトのほうでも作るのは非効率でしょう。他にもブラウザがもつちょっとした機能を理解することでサイトのナビゲートが簡単に行えることもあります。

ブラウザ

ブラウザって何ですか?

IT関連の仕事をしている方にとっては恐ろしく簡単なこの質問。私たちなら使っているブラウザの名称に応じて人のタイプを無意識に分類してしまいそうですよね。では、この質問を一般の方に向けたらどんな答えがかえってくるのでしょうか。Google の従業員がニューヨークで街頭インタビューをしたのが上のビデオになります。 回答者の多くの方が「ブラウザ=検索」という認識を持っているみたいですね。ビデオによれば、50人の回答者の中でブラウザ名を応えたのは全体の 8%。ブラウザはソフトウェアとしての捉えている方は少ないということになります。自分が行う行為そのものがブラウザというソフトウェアと融合しているのでしょう。 これと同じ質問を日本をはじめ、他の地域で行うとまたレスポンスが変わるかもしれませんが、ブラウザ=ソフトウェアと考えてる割合はそれほど変わらないのではないかと思います。こうした捉え方は、良い傾向なのかもしれません。ソフトを立ち上げて使っているというよりかは、自分がしたいことをするための、幾つか開いているウィンドウのひとつという存在が今のブラウザなのかも。身近な存在になっていると同時に、常に開いている外への窓口とであるからこそ、邪魔にならず、とけ込んだ形になっている必要性があるかもしれません。 このビデオを見ると、Chrome のコンセプトは良いところを突いているなという気がしますね。

CSS

TypeKitから始まるウェブ文字革命

今月はじめに John が来日したときに「フォント関連で近々発表があるんだよね」と言っていたのですが、ついに全貌が明らかになったようです。Jeffrey Veen を中心に TypeKit というプロジェクトが立ち上がる模様です。既に WebKit, Opera 10, Firefox 3.1 3.5 でサポートされている @font-face。利用者のパソコンにあるなしに関係なく指定のフォントが使えるようになります。つまり、今まで仕方なく画像文字にしていた部分もテキストで処理可能になる可能性があります。 @font-faceでまず問題になるのが著作権に侵害しないかどうかという部分です。多くのフォントはウェブ上での配布を禁じていますし、@font-face の許可をしていないフォントもあります。法的な問題や DRM を気にせず安心して @font-face を使った文字表現をするために生まれたのが Typekit です。サイトに公開されているカタログの中から好きなフォントを選んで JavaScript を埋め込むだけで使えるようになるそうです。現在、様々なフォントを保持する団体や機関と協議が進められており、無料フォントだけでなく商用フォントもカタログに追加出来るように働きかけているとのこと。今夏リリースが楽しみです。 恐らく発足直後はアルファベットだと思うので、

デザイン

質問: ウェブサイトの見た目は同じにしなければならないか?

東京・京都で開催された Web Directions East ワークショップにて、ジョンの通訳として参加させていただきました。同時通訳でもなければ、プロの方がされるような完全な言葉の伝達ではない形でしたが、よりインタラクティブな対話が出来たのではないかと思います。遠く離れた2カ所で開催されたワークショップでしたが、共通して盛り上がったディスカッションが「ウェブサイトの見た目は同じにしなければならないか?」というトピックです。 この話題は私のサイトでも何度か挙っていますが、「同じ見た目」という言葉だけでも随分捉え方が違いますよね。講師をしていた John にとっては「ほとんど同じだから良い」という装飾でも他の視点から見ればそうではない場合があります。最大公約数でポテンシャルを削ぎ落としてまで同じように見せる必要があるのか、実際、複数のブラウザで観覧するユーザーがどれだけいるのか、そして社内外でどう伝えれば良いのかなど、様々な疑問や提案がディスカッション中にされました。 ソフトウェアデザインでは以前から使われていた言葉ですが、ここ数年ウェブデザインにおいても聞かれるようになった「Progressive Enhancement」。実際のところ、あなたはどう感じていますか? ブログでは一方的に伝えてきたわけですが、ワークショップのような場に参加したことで、まだまだ難しい部分が少なくないと実感しました。次のステップのために現状を把握するのも重要かなと思い、質問フォームを作ってみました。 別ページで質問を応えたいという方はこちらへアクセスしてください。選択式の質問が5つしかないのでそれほど時間はかからないと思います。何かコメントを一言付け加えたいという方は Twitter

ゲーム

ウェブブラウザとオンラインゲームの今後

数年前からオフィス系のソフトウェアは次々とWebブラウザ上で扱えるようになってきましたが、ゲームも似たような状況になりつつあります。Flashゲームのような小さなゲームは以前からブラウザで遊べましたが、MMORPGのようなスケールの大きいゲームもブラウザへ移行しつつあります。ユーザー数が多いゲームで有名なのが RuneScape。サービスが立ち上がった 2001年当初はポリコンそのままのグラフィックでしたが、今では高画質でフルスクリーン表示も可能です。アクティブユーザーは何人か分かりませんが、850万アカウントあると言われています。 ブラウザベースの MMORPG は他にも Free Realms があります。どちらかというとコミュニティサイトですが、Club Penguin もオンラインゲームといえます。いずれもコンソールゲームに見られるような美しいグラフィックでもなければ、PCゲームのようなスケールのゲームデザインではありません。しかし、年々質が向上しているのは確かですし、カジュアルゲーミングには丁度良いゲーム環境を今のテクノロジーは提供しているのではないでしょうか。 従来、オンラインゲームといえば終わりもないから延々に続いて気が遠くなるというイメージが先行していましたが、20〜30分遊ぶだけでも十分楽しめるような仕組みがあるゲームは少なくありません。ブラウザベースのオンラインゲームはカジュアルゲーミングに新たな可能性を示すと思います。最近のゲームコンソールはウェブブラウザを実装していますが、ウェブサイトを表示させるソフトウェアという位置づけになっているのが現状です。そうではなく、ゲームを遊ぶための入り口という位置づけでブラウザを実装したゲームコンソールが現れたらおもしろそうです。プラットフォームに依存しないとはいえ、今はパソコンに依存しているブラウザベースのオンラインゲームも様々な方に遊んでもらえるチャンスが増えます。 ブラウザを利用したオンラインゲームとは別に、今までのゲームをブラウザから遊ぼうという試みもあります。OnLiveは、独自のストリーム技術を利用してロースペックのパソコンでも最新のゲームを楽しめるそうです。専用機器を取り付ける必要があるみたいですが、コンソールゲームだけでなく、パソコンのオンラインゲームもゲームクライアントなしで遊ぶことが出来るそうです。

ブラウザ

Web版Twitter利用者向けの便利なUserscript

以前は Twitterrific のようなクライアントを使って、Twitter を追っていましたが、最近は Webブラウザで直接自分のページにアクセスして観覧しています。独立したクライアントや IM のほうが手軽なのですが、頻繁に更新しているのが視野に入ってしまうと集中出来なくなります。いつでも見るのではなく、見たいときに見るほうが良いなと思って今は Web 版を利用しています。 Twitter用のソフトウェアのメリットは単に手軽にアクセス出来るだけでなく、それぞれ独自のカスタマイズがされている点もあります。Web版はシンプルに構成されているので、ソフトウェアを使っているときのような使い込みが難しいですが、Userscriptsを利用することでカスタマイズが可能です。(Firefoxなら Greasemonkey、Safari/Webkit をお使いの方は GreaseKit をインストールすれば Userscripts が利用可能です) Twitter – Show # of unread replies + adds mentions というスクリプトを使うと、@Reply で未読なのが幾つなのか自動的に表示してくれるようになります。@Replies は、通常「@ユーザー名」

ブラウザ

Firebug用リファレンスツール「Firescope」

サイト構築の際、欠かせないツールのひとつといえば Firebug。JavaScript を使ったウェブアプリケーションのデバッグだけでなく、サイトデザインをしている方にとっても便利なツール。テストの際、レイアウトが崩れていたとしても Firebug で調べればだいたいのことは解決します。この Firebug のコンパニオンツールが Firescope です。 Firescope は、Firebug 内で CSS/HTML のタグの意味や使い方をチェック出来るツール。インストール後、Firebug のパネルに新たに「Reference」というタブが追加されます。HTMLビューや「調査」の際に選択したタグと下階層にあるタグの意味が Reference に表示されます。最新のブラウザだけですが、その場でサポート状況も見れるのは便利です。もっと詳しく知りたい方は提供元の Sitepoint のページへ誘導する仕組みになっています。 W3Cの仕様が頭に入っている方や、他に良いリファレンスツールがある方は必要ないかもしれませんが、あると便利かも・・・というツールが Firescope だと思います。パフォーマンスが落ちるということはなさそうなので、

CSS

3D世界もWebKit採用へ

Qtは、クロスプラットフォームで動作するアプリケーション開発を目的としたフレームワーク。開発と GUI デザインをワンストップで行えるメリットもあるので、様々なデバイスやアプリケーションで Qt が採用されています。代表的な例だと Google Earth でしょう。 様々なライブラリも用意されているわけですが、その中で注目なのが QtWebKit (日本語) というモジュール。Qtで開発されたアプリケーションの中に Webブラウザを埋め込むことが出来るようになります。 Qt は以前から GPL ライセンスとして配布されていたのですが、最近 LGPLライセンスが加わりました。もちろん GPL でも商用利用は可能ですが、よりフレキシブルなライセンシングと再配布が可能になります。これによりさらに積極的な Qt 開発も進むのではないかと考えられます。 今回のライセンスの変更により開発が活発化してきているのが Second Life。以前から Mozilla ベースのウェブブラウザを Second Life 内で利用出来たわけですが、これを WebKit に変更する可能性があるみたいです。