Posts Tagged ‘webkit’

Google Chrome Frameを入れてみたよ

Wednesday, September 23rd, 2009

GoogleさんがマイクロソフトのInternet ExplorerでHTML 5のcanvasのタグなどをサポートするプラグイン「Google Chrome Frame」をリリースしました。これがないと近々リリースされるであろうGoogle Waveが、IEのほとんどすべてで使えないだろうからそのためなんでしょう。

このプラグインを入れたIEは、metaに特定の指示詞があればそのページのレンダリングエンジンをWebKitにし、JavaScriptのエンジンもChromeに入ってるものが使われるようです。ようはそこだけChromeになるってことですね。

google-chrome-frame1

同意してインストールすれば終わりです。

ただこれは何もGoogle Waveに限った話ではなく、普段IEをお使いの皆さんが導入してくれれば、FirefoxやSafari、Chrome、Operaといったブラウザに最適化して作っておいても、見た目も崩れずスクリプト系も動くってことになると、その違いに頭を悩ませている開発者にとっても恩恵があるんじゃないかと思われます。

利用者側に促して入れてもらう必要はあるわけですが、「IEなんかなくなれ」とか「ウィンドウ内にアナログってだす」とか「サポートしません」というよりはいいかもしれませんね。日本のいくつかのサイトのように「IEしかサポートしません」っていつまでも言ってるのはどうかと思うんだけどね…(笑)。

自分のページというかテストをする際は、head要素内に以下を記述してアレコレ試してみましょう。現状「file://〜」で始まるローカルのものは処理しないようです。詳しいことは、Googleさんの用意しているドキュメントを見てください。

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Google Chrome FrameがインストールされたIEをリンク先のページで強制的にそのモードでレンダリングさせるには、「cf:http://〜」みたいにしてリンクを記述しておくとhead要素のmetaがなくてもそれで動くようです。

ものは試しで一番手っ取り早いかなぁと思って、「Snow Stack」という名で有名なWebKitの3Dエフェクトとかを実装されたsatine.orgさんとこの実際のテストページにリンクしてみました。

Snow Stack demo(for IE with Google Chrome Frame)
Snow Stack demo(for Safari 4 / Chrome / Webkit Nightly)

google-chrome-frame2

こんな感じで動きました。

ただ、「cf:」付けちゃうと他のブラウザではリンクが辿れませんから、仮にそれを使うならそこはアレコレしてブラウザ毎にリンク先を振り分ける必要がありますね。

まだまだ新しい技術なので今すぐどうこうではないですけど、IEの次期バージョンの前にこれが浸透してくれたら少しだけIEの存在に頭を悩ませている開発者のストレスがなくなったり、帰宅時間が早くなったりするかもしれません(笑)。

#あ、そうそう。世の中には「Browserscope」っていうブラウザの実装状況みたいなのが公開されているサイトもあります。

(more…)

GoogleさんのChromeを使ってみたよ

Wednesday, September 3rd, 2008

福田さんの子供みたいな辞任会見でスタートした9月ですが(笑)、インターネッツな世界ではGoogleさんがブラウザを出すということで持ちきりでした。で、さっそく深夜にリリースされてたのでインスコローリングしてみました。今のところ何も考えないで、パッとインストールできるのはWindowsのみです(*1)。

さて、数ヶ月ぶりにVistaを起動した私はいろんなもののアップデートでまた時間を費やしたわけですが(んな私のこたどうでもいいですね 笑)、終わったとこでGoogleのChromeのページからインストーラをダウンロード。

※「エラーでインストーラが起動すらしない」って人は、インストールをネットワーク経由でおこなうのでアンチウィルスソフトによっては、そこでチェックが入って落ちてる可能性があります。オフにしてやってみましょう。

chrome-01

起動してみると極限までそぎ落とされたシンプルなインターフェイスが出てきます。ブラウザウィンドウ内に表示されるWebサイトなりアプリケーションだけを使えるような配慮でしょうね。今、英語モードにしてるので英語のメニューですけど、普通にインストールすれば日本語になりますのでご安心を。

HTML部分のレンダリングエンジンはWebkitってことなので、Safariとかと同じで表示も速いですし、普通に作ってあるWebサイトなら別に問題もなく表示されます。Web作ってる人たちの間で新しいブラウザがリリースされるとかいう話になると気になることでしょうが、某MSさんのアイツみたいな心配はいらないってことです(笑)。で、Webkitがベースということは「-webkit-border-radius」みたいな「-webkit-」付きのCSS3の先行実装みたいなプロパティが効くんでしょう(*2)。

一応インスペクタとかも搭載されてますが、まだResourcesのタブがうまく動いてないような…動いてた(笑)。Safariの開発メニューにあるものと同じような感じですね。

JavaScriptのエンジンの方は「v8」ってのになってるそうで、早速いろいろ試している方の話では、実行速度が速いとかIE用のBookmarkletとかも修正なしで動いてるとかそんな話もちらほら。

Chromeはいわゆるタブブラウザなのですが、それぞれのタブは独立して動くような設計になってるらしく、どれかのタブが固まって全部が落ちてしまうということはないようです。そのためか、メニューの中にはタスクマネージャなんてものが用意されています。試しにタスクを落としてみたら下のような画面が出てきました(笑)。

chrome-02

で、ついでなのでfacebook.comに繋いだらwww.facebook.comに飛ばされずこんな画面がでてきました(笑)。エラーの画面もシンプルです(笑)。

chrome-03

ちなみにURLとか検索キーワード入れる上の入力欄に「about:memory」っていれると使用量とかが出てくるのは使ってると気付くのですが、それ以外にも「about:」とか「about:cache」とかあるようです。

あと、ちょっと気になったカラーマネジメントあたりはどうだろうかとチェックしてみました。下の画面は、左がカラーマネジメントを有効にしたFirefox 3、右がChromeでAdobe RGBのプロファイルが埋め込まれたJPGを表示した例です。ご覧の通り色が違ってるので、カラーマネジメントの機能までは入ってないようです(笑)。

chrome-04

とまぁ早速入れてみたわけですが、Chromeはこれからどんどん形になっていくんでしょうね。表示とかその辺の心配もないでしょうし今後が楽しみであります。

*1: 元になってる「Chromium」についてはこちらにいろいろ書いてあるようです。テストでOS XとかLinuxでホゲホゲする人なんかはチェックしてみては?

*2: 後から気付いたのですが、Google ChromeのWeb開発者向けの情報はこちらのページに掲載されてます。良かったですね、珍しく日本語版があって(笑)。
また、Chromeやそれ以外のブラウザのサポートしているセレクタは、evotech.netの「Google Chrome Browser CSS Selector Support」という記事でさっそく表になって公開されています。


最後に全然関係ない冒頭の話ですが、誰かに何かをしてもらう(協力してもらう)ためには自分が人に対して真摯な姿勢で動いてないと…というか、人のことを思いやりながら生きていかないと誰も何もしてくれませんよ…。「あの人がやってくれなかった」とかなんとか子供みたいなこと言ってちゃね…、それは「自分がちゃんとしてなかった」ということですよ、元総理(笑)。愛と一緒で求めるだけじゃだめっす。

Fluidでサイト専用ブラウザを作る

Tuesday, July 8th, 2008

ご無沙汰しております。ちょっと最近忙しくて(書き物仕事が多かったのでブログまで書く気力が失せていた 笑)、すっかりここが放置気味になりFlickrの写真ばっかり更新していたこもりです、おはようございます。

つい今し方eHubを見ていたら「Fluid」なるOS X Leopard専用のアプリケーションがあるということを知りました。これ、特定のサイト専用のブラウザアプリケーションを作ってくれるようです。使い方は簡単というか、サイトのURL入れるぐらいで、個別のアプリケーションができてそれぞれで初期設定なんかができるようになってます。

enter site url

起動するとこんな画面が出てくるので、作りたいサイトのURLと名前、アプリケーションの保存場所とかを決める。

launch now

あっという間にできるのでそのまま「Launch Now」。

Transparency and Userscripts support

アプリケーション毎に個別の設定が有効になるので、こんな感じで好みで透明のウィンドウやフローティングとかもできる。しかも、Greasemonkey互換でUserscriptもサポートしてるようなのでFirefoxとかで使ってる環境に合わせてカスタマイズもできるんでしょう、きっと。

application created

単体のアプリケーションになるので、ブラウザから呼び出したりとかしなくてもDockにアイコン置いたり、QuickSilverとかからひょいっと呼び出せますね。

アンインストールは捨てるだけでも大丈夫でしょう。関連ファイルが気になるのであれば、CleanAppみたいなアンインストーラーでそれらもまとめて捨てればよいかと。

いろいろな凝った使い方もできるようなので配布元のサイトでもご覧になって下さい。


Performance Optimization WordPress Plugins by W3 EDGE