ブラウザの価値を追求する

WEBデザイナーとして、私が最初に躓いた問題はレイアウトのズレと各種ブラウザ対策でした。 次に躓いたのが、マルチデバイス対応。

このようにWEB制作をすると異なるプラットフォームでの対応を求められ、どこまで対応するのかの線引きが毎回の課題ですよね。

そんな中、私はブラウザとそれを支える技術、利点について関心が深いので本日はそのお話をさせていただきます。

ブラウザとは何なのか？

ブラウザとは「ブラウズ(閲覧)する」ためのツールであり、他には「ファイルブラウザ」などがあります。ということで厳密に言うと今回お話するのはウェブブラウザに関する内容となります。

これには様々な違いがあります。 大きくWEBサイトに影響が出るのはUA※1とレンダリングエンジン※2の違いです。

主なレンダリングエンジン

• Chrome:Blink
• Firefox:Gecko(Servoテクノロジーが用いられています)
• IE:Trident
• Safari:Webkit

ユーザーエージェント※1が変わると、サービス提供側の挙動も変わります。 レンダリングエンジンが変わると、構文のパーサ※2も変わります。するとタグの解釈も異なる訳ですから、表示されるウェブサイトや動作にも違いが生じてきます。

もちろんブラウザベンダーとしても、デザイナーが意図した通りにレンダリングが出来なければ、或いは動作が出来なければ自社製品の価値が下がってしまいます。そうならない為にも、安定感のある動作ができるよう常に進化しています。

また、こういった違いを回避する手法の一つとしてレンダリングエンジンを自社開発せずに、標準的なものを使用するブラウザもあります。ひと昔前はIEコンポーネントブラウザ。最近ではChromium系ブラウザが有名になってきています。

IEコンポーネントブラウザの例: Donut、Green Browser、Avant Browserなど

Chomium系ブラウザの例: Opera、Maxthon、Sleipnir、Vivaldi、SRWare Iron、Cốc Cốc、Yandex Browser、The Worldなど

違いがあり、それを知ることを利点として捉える

作り手が伝えたい事に対して解釈が異なること自体は宜しくありません。 ですがライバルが対応できない修正を自分が出来るようであれば、その人はひとつ競争力を得たことになるでしょう。

また、これはそもそも論になるのですがブラウザの違いとは、作り手が対応する為にある試練のようなものではありません。むしろ、それぞれのブラウザごとの利点を知り、有効活用していくことが大切です。

このブラウザは、こんな事ができる！

さて、上記で名前を挙げましたが、もちろん私もすべてのブラウザに何が出来るのかを把握している訳ではありませんし、ここでその全てを挙げていたら時間がいくらあっても足りないと思います。

Firefoxは、ソース表示時のエディターが指定できる！

ブラウザのショートカットキーでCtrl+Uを押したら、別タブでソースコードが表示されると思います。Firefoxでは、このソースコードの本文を、指定したテキストエディター(Vs CodeやSublimetextなど)に渡すことができます。 また、サイドバー機能がデフォルトで搭載されているので画面が広い人はその利点を活かすことができます。

Vivaldiには、拡張機能で追加するようなものが幾つも最初からビルトインされている！

Vivaldiは、マウス操作で戻る/進むを行うマウスジェスチャーやタブをサムネイル化する機能、画面分割に万能サイドバー機能など、豊富な機能が最初からビルトインされています。いくつか同様の機能を搭載したブラウザは他にありますが、1画面で何でも出来るように設計されているのでスペースをフルに活用してがっつり作業をしたい方にうってつけのツールと言えます。

詳しくは下記ページをご覧ください。

Vivaldiを入れたらまずやること https://libreproducts.info/vivaldi/first/

皆が使うものではなく「あなた」が使うものを

エンジニア界隈に限らず、皆が使っているからといって安牌ラインの選択をとる人を多く見かけます。 本当はたくさん素晴らしい選択肢があるのに、安心をとってその選択を削いでしまうのです。

車に詳しくない人にとっては、とんな車種も「車」でしかありません。 シャンプーに詳しくない人にとっては、とんなシャンプーも「シャンプー」でしかありません。

これらは選ぶ人は選ぶし、そうでない人はどれを使っても同じ状態です。 ブラウザにも同じことが言えます。ただ、どの分野においてもマーケットを一つのモノやサービスが席巻してしまう事は健全な競争が起きているとは言い難いです。

確かにGoogle社の企業努力は素晴らしく、Chromeブラウザは高速で安全でシンプルで導入もしやすいUXを実現しています。これはユーザーの皆様のデジタルライフが高水準化したことを意味します。高水準化は差別化を難しくします。ですがそんな中でも、私は皆さまに本当の意味で最適な選択肢は必ずあると考えています。

特に、ここのブログを読んで下さっているエンジニアやWEBデザイナーの皆さまや、志望している方はガッツリとデバイス機器を使う訳です。大衆向けのツールだけではなく、求められる負荷に対応しうる武器が必要になるでしょう。

もっと合理的で素早くワークフローを短くできる方法が、まだまだ沢山眠っているんです。プログラムを学ぶよりもはるかに簡単に、コロンブスの卵を次々と発見するように、そのポテンシャルが引き出せるのだとしたらワクワクしませんか？

トレーナーとしての活動で伝える以外にも、ブログ記事を通してそのことを発信していけたらと思います。

・・・今日は長くなってしまいましたね、、とりあえず、読んでくださり、ありがとうございます！ もし今回の記事に間違いがあればコメントを頂ければ幸いです。 修正させていただきますので！

※1.UAとはUser Agent(ユーザーエージェント)の略称で、ウェブサイトへアクセスする際に使用されるプログラム或いはそれらを識別するための文字列のことです。 ※2.レンダリングエンジンとは描画エンジンのことで、プログラムを読みとって画面上に描き出すためのものです。 ※3.パーサとは構文を解析するプログラムのことです。