本日は私の昔の疑問からスタートしたエントリです。
『聞くも涙、語るも涙。ちゃんちゃん。そう、あれは、2006年のこと。私にとってはPC元年ともいえる、その年に、AppleのMacintoshはcpuにIntelチップをs…………』って、(ノ・ー・)ノポイ
無駄な知識もいずれは役に立つ! かもしれない。私のように〜(笑)
それじゃ、始まるよっ!
HTMLレンダリングエンジンの簡単すぎる説明
こんなこと思ったことありませんか?
『ウェブページってどうしてブラウザによって見え方違うんだろ?』
って。
私がパソコンを使うようになったとき、最初に思った不思議なことでした。(最初はネットを利用するくらいしかしてなかったからw)
当時何も知らない私は友人に尋ねました。すると…
友「んーとね、ゆこびん、それはレンダリングエンジンが違うからだね〜」
ユ「(ほへ? レンダリングエンジンって?)(・∀・;)」
レンダリングものすごく簡単に説明すると…
ウェブサイトを作ったことがある人は知っていると思いますが、ウェブページを作るのには専用の呪文*(言語、htmlやcss等)を書きます、そしてそれをウェブブラウザが解釈して画面に出してくれます。
その解釈をしてくれるのがレンダリングエンジン。
そしてその解釈の違いこそが見え方の違い、ということです。
*呪文 文字列が絵になる(厳密言うと絵ではないけど)ことがユコびんには魔法の呪文みたいに思えた。
レンダリングエンジンの有名なものは3つ。
(つまりウェブブラウザのシェアが多い3つw)
・WebKit
・Gecko
・Trident
WebKitはMacユーザにはお馴染みのSafariや最近すっかりメジャーになったGoogle Chromeが採用してるレンダリングエンジン。
GeckoはWindowsでもMacでも昔からファンが多いFirefox。
Tridentは、そのシェアからなかなか無視できないMSのInternet Explorerのレンダリングエンジン。
WebKit、GeckoはW3C*の唱える標準規格を基準にしているので、普通にwebページを作ればおかしげな表示になることはないんですが…、Tridentは独自解釈傾向が強く、なかなか思ったような表示にならないため、Webページを作る人の多くから「IE〜ψ(#Φ皿Φ)ψ去ね!」と思われています(笑)しかし、最近のバージョンではかなり標準規格に歩み寄ろうとしています。IE6とかすごかったもんね!(^∀^;)
*W3Cとは…Webで利用される技術の標準化を推進する非営利団体、みんなの基準
また、ちょっと前にMac版も出した日本製ブラウザSleipnirは、以前はTridentがデフォでしたが、最近ではレンダリングエンジンをWebKitに乗り換えています。そうやってレンダリングエンジンが変わっていくブラウザもあります。(かつてはGeckoと切り替えが出来たり…と、なかなか面白いブラウザでした。)
レンダリングエンジンの種類は他にもこまこまあります。でも今はこの3つを知っておけば)普通は)十分ですね。
もっと詳しく知りたい人はみんなのwikiで↓
あ、でも、Webページを作る人は、今月からGoogleで開発が始まった新しいレンダリングエンジン、Blink(ブリンク)の存在も頭の片隅に入れておく必要があるかもですね〜。
Mac用Webブラウザ一覧
昨日のエントリにユーザエージェントの話をちょっとあげましたが、
ユーザエージェントの変更(偽装)をしても、サイトの表示確認としては使えません。
実際やってみると挙動が違うのがわかります。
そうなるとやはりそのWebブラウザで実際表示してみる、という必要が出てきます。
最低限レンダリングエンジン毎ですが、ブラウザ自体のデザインや機能が違ったりするので、いろいろ見てみると面白い&デザインの作り方の新しい発想が出てくると思われます。
Macでよく使われているブラウザをあげてみますね。(๑´ㅂ`๑)
オレの愛用アプリないじゃないか!載せろよ〜という方はご連絡下さい〜(( ゚ロ゚)ノ
Safari
rendering engine : WebKit
言わずと知れたApple標準Webブラウザ
Google Chrome
rendering engine : WebKit →28からBlinkの予定
ぐんぐんシェアが伸びているGoogleのWebブラウザ。
Firefox
次世代ブラウザ Firefox 高速・安全・カスタマイズ自在な無料ブラウザ
rendering engine : Gecko
昔からWindows版 Mac版がある、定番のMozillaのWebブラウザ。拡張の元祖。
Opera
コンピュータ 用 Opera をダウンロード – Opera Software
rendering engine : Presto →14からBlinkの予定
一部の人達に根強い人気!
Sleipnir
Mac の Web ブラウザ Sleipnir 4 for Mac – アドレスバーすら取り払った、究極の先端的ウェブブラウザ
Sleipnir ブラウザ
カテゴリ: ユーティリティ
デベロッパ名: Fenrir Inc.
リリース日: 2012/02/28
価格: 無料
rendering engine : WebKit
SleipnirにはMac App Storeの青バージョンと上位の黒バージョン(上のリンク)あり。
黒バージョンは機能制限なし。
ちなみに、私のMacBook Proの中のブラウザはこんなカンジです。
右の方はFirefoxの次期バージョンのAuroraやNightlyです。確認用…ではなくて、単なる趣味ですw
※AuroraやNightlyへのリンクは「Firefoxのバージョン、ダウングレード方法。次期Firefox、Aurora、Betaなど。 2012.07.22」からどうぞ。
と、だいたいこのあたりですが、他にもCaminoやSeaMonkeyも忘れないでくれよ!という人もいるかも?(`・ω・´+)
ココからは、さすがに表示確認とかは…いらないと…おもわ…れ…
どちらもレンダリングエンジンはGecko。CaminoはCocoa対応。
かつてちょびっと使ったことが。
iCab – Internet Taxi for the Mac
こんなところでしょうか…
でもWebページ表示確認にはアレが…、未だにブラウザシェア50%を超えている(らしい)Webページを作る人の敵wのアレを無視するわけにはいきません。
そう、Mac環境では、どうしてもIEだけが自前で用意できません−!(」°ロ°)」
ってことは、Web表示/動作確認用にWindows購入し仮想環境やBootcampでMacに入れるしかないのか…。
かつてはみなさんそうしてたと思います。
私もそうやって、Windowsに各バージョンのIEで確認するアプリ「IETester」を使ってました。
が、最近無料出来る方法が取り上げられてましたよね!
無料でMacでIEの表示テストをする方法 – Design Spice
VirtualBoxを使った手順
無料で、つまりWindowsのOSを購入しないでネイティブのIEの表示テストを実現 – muta’s mac scribbling
VMWare Fusionを使った手順
これで、Mac使いさんのおサイフも安心です〜よかったよかった。
ちなみにこの新「もっと知りたいリンゴあれこれ」はApple系ブログらしく、IEの表示テストはしてません!
とんがってるでしょ?( ´∀`)ノ
…
す、すす、すみませーーーーん! ((((((((o;_ _)oぺたーん!
IEを愛して止まない、リンあれ読者さんはご相談下さい〜(( ゚ロ゚)ノ
(IE6は除くのよ…)
おしまい。