本日は私の昔の疑問からスタートしたエントリです。

『聞くも涙、語るも涙。ちゃんちゃん。そう、あれは、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で↓

HTMLレンダリングエンジン

 

あ、でも、Webページを作る人は、今月からGoogleで開発が始まった新しいレンダリングエンジン、Blink(ブリンク)の存在も頭の片隅に入れておく必要があるかもですね〜。

 

Mac用Webブラウザ一覧

 

昨日のエントリにユーザエージェントの話をちょっとあげましたが、
ユーザエージェントの変更(偽装)をしても、サイトの表示確認としては使えません。
実際やってみると挙動が違うのがわかります。

 

そうなるとやはりそのWebブラウザで実際表示してみる、という必要が出てきます。
最低限レンダリングエンジン毎ですが、ブラウザ自体のデザインや機能が違ったりするので、いろいろ見てみると面白い&デザインの作り方の新しい発想が出てくると思われます。

 

Macでよく使われているブラウザをあげてみますね。(๑´ㅂ`๑)

オレの愛用アプリないじゃないか!載せろよ〜という方はご連絡下さい〜(( ゚ロ゚)ノ

Safari

130411_06

 

rendering engine : WebKit

言わずと知れたApple標準Webブラウザ

 

Google Chrome

Chrome ブラウザ

http://www.google.co.jp/intl/ja/chrome/browser/

 

rendering engine : WebKit →28からBlinkの予定

ぐんぐんシェアが伸びているGoogleのWebブラウザ。

 

Firefox

次世代ブラウザ Firefox 高速・安全・カスタマイズ自在な無料ブラウザ

http://www.mozilla.jp/firefox/

 

rendering engine : Gecko

昔からWindows版 Mac版がある、定番のMozillaのWebブラウザ。拡張の元祖。

Opera

コンピュータ 用 Opera をダウンロード – Opera Software

http://www.opera.com/ja/computer/mac

rendering engine : Presto →14からBlinkの予定

一部の人達に根強い人気!

Sleipnir

Mac の Web ブラウザ Sleipnir 4 for Mac – アドレスバーすら取り払った、究極の先端的ウェブブラウザ

 

http://www.fenrir-inc.com/jp/mac/sleipnir/

 

Sleipnir ブラウザ App
カテゴリ: ユーティリティ
デベロッパ名: Fenrir Inc.
リリース日: 2012/02/28
価格: 無料

 

rendering engine : WebKit

SleipnirにはMac App Storeの青バージョンと上位の黒バージョン(上のリンク)あり。

黒バージョンは機能制限なし。

 

ちなみに、私のMacBook Proの中のブラウザはこんなカンジです。

130412_01

 

右の方はFirefoxの次期バージョンのAuroraやNightlyです。確認用…ではなくて、単なる趣味ですw
※AuroraやNightlyへのリンクは「Firefoxのバージョン、ダウングレード方法。次期Firefox、Aurora、Betaなど。 2012.07.22」からどうぞ。

 

 

と、だいたいこのあたりですが、他にもCaminoやSeaMonkeyも忘れないでくれよ!という人もいるかも?(`・ω・´+)

ココからは、さすがに表示確認とかは…いらないと…おもわ…れ…

どちらもレンダリングエンジンはGecko。CaminoはCocoa対応。
かつてちょびっと使ったことが。
http://caminobrowser.org/ http://www.seamonkey.jp/

 

 OmniWeb 5 – The Omni Group

http://www.omnigroup.com/products/omniweb/

 

iCab – Internet Taxi for the Mac

http://www.icab.de/

こんなところでしょうか…

でもWebページ表示確認にはアレが…、未だにブラウザシェア50%を超えている(らしい)Webページを作る人の敵wのアレを無視するわけにはいきません。

そう、Mac環境では、どうしてもIEだけが自前で用意できません−!(」°ロ°)」

ってことは、Web表示/動作確認用にWindows購入し仮想環境やBootcampでMacに入れるしかないのか…。
かつてはみなさんそうしてたと思います。
私もそうやって、Windowsに各バージョンのIEで確認するアプリ「IETester」を使ってました。

http://www.my-debugbar.com/wiki/IETester/HomePage

 

が、最近無料出来る方法が取り上げられてましたよね!

 

無料でMacでIEの表示テストをする方法 – Design Spice
VirtualBoxを使った手順

http://design-spice.com/2013/04/03/mac-ie-test/

無料で、つまりWindowsのOSを購入しないでネイティブのIEの表示テストを実現 – muta’s mac scribbling

VMWare Fusionを使った手順

http://nmuta.fri.macserver.jp/unei1304.html#IEonMac

これで、Mac使いさんのおサイフも安心です〜よかったよかった。

ちなみにこの新「もっと知りたいリンゴあれこれ」はApple系ブログらしく、IEの表示テストはしてません!
とんがってるでしょ?( ´∀`)ノ

す、すす、すみませーーーーん! ((((((((o;_ _)oぺたーん!

IEを愛して止まない、リンあれ読者さんはご相談下さい〜(( ゚ロ゚)ノ

(IE6は除くのよ…)

おしまい。

このブログがお役に立ったり楽しんでもらえたら「いいね!」お願いします(๑⁰ 〰⁰)
いろいろなところでシェアしてくれると嬉しいです(*´ー`*)
このエントリーをはてなブックマークに追加

↓今更ですがPinterestが楽しいです。日本ではあまり流行ってないですし、私も知ってからから始めるまで2年くらいの差がありましたが、利用してみたらかなりお気に入りです。写真、映像、デザイン、イラスト、ハンドクラフトをやっている人には激オススメしておきます。

↓Instagramをひっそりとやってます。Apple、食べ物、猫が主な被写体です。気になる方はFollowしてみてください。

→今までのApple製品を並べてみました。そんなに買ってないような気がしてたんですが、買ってます…(;´Д`)ありぇ。
▶さらにくわしいネタやプロフィールはAbout