BOM語りしちゃうぞ
説明しようBOMとは……
バイトオーダーマーク (英: byte order mark) あるいはバイト順マーク(バイトじゅんマーク)は通称BOM(ボム)といわれる、Unicodeの符号化形式で符号化したテキストの先頭につける数バイトのデータのことである。このデータを元にUnicodeで符号化されていることおよび符号化の種類の判別に使用する。
のことだ!またひとつ賢くなってしまったな!
おわり
BOM語りしちゃうぞ Take2
はい、おはようございます。僕です。
ということで、BOMって言ったら上のことだろうって66%ぐらいの人が納得していただけると思うのですが今日はそっちのBOMではなくてこっちのBOM(Browser Object Model)の話をしようと思ったのです。
【BOM】
ブラウザのオブジェクトモデル(BOM)は、ブラウザ固有である慣例によって公開されたすべてのオブジェクトを参照するWebブラウザ。Document Object Modelとは異なり、実装の標準や厳密な定義はないため、ブラウザベンダは自由にBOMを実装することができます。私たちが文書を表示するウィンドウとして見るもの、ブラウザプログラムはオブジェクトの階層的な集合として見ます。ブラウザはドキュメントを解析するときに、ドキュメントを定義し、表示方法を詳細に示すオブジェクトのコレクションを作成します。ブラウザが作成するオブジェクトはDocumentオブジェクトと呼ばれます。それはブラウザが利用するオブジェクトのより大きなコレクションの一部です。このブラウザオブジェクトの集まりは、まとめて「ブラウザオブジェクトモデル」、つまりBOMと呼ばれます。
これです。JavaScriptをいじっているときにあらわれる謎のおまじないwindow.alert()
とかdocument.getElementByid()
とかのwindowとかdocumentについてです。
ブラウザでは上のような階層構造でアプリケーションを利用するための "やりとり" を定めています。例えば、window.document.なんちゃら
だったらwindowオブジェクトのdocumentオブジェクトのなんちゃらって命令にアクセスしますよってなことをやってますん。んで、このwindow
は省略してdocument.なんちゃら
ってかけたりします。これは、documentだけでなく他のオブジェクトに対しても言えるのでscreen
だったりlocation
でも省略できます。あとwindow.alert()みたいなやつもalert()って感じで省略できちゃいます。そういう感じでJavaScriptでつかえる"やりとり"が定義されているそうです。
ですので、今日は上の図のBOMってなにがあるのかなどを意味もなく見ながらBOM語りでもしたいと思ったのです。ちなみにdocument
に関しての話はみんな大好きDOM(Document Object Model)なんて呼ばれていたりします。その配下HTMLのパーツに対してできるやりとりがいっぱいあるぞ。
ということでどんな機能があるのか見ていきたいと思います。「Window」と「Document」に関しては多分よく使うやつだと思うので今回は確認しないです。また僕が隙あらばBOM語りしたくなったらやろうと思うので次回までおあずけだ!
そんなわけでBOMでなにができるか見ていきます。
Navigator
Navigatorをみていきます。ブラウザ情報とかを取得できます。
想定したよりも多かったのと別に表示させても面白みを感じなくて中途半端だけどNavigatorオブジェクトで表示できる要素はこんな感じ。詳細は参考リンク参照な。Vueの使い方へたくそすぎてループすらさせてないゴミコードになってしまった……。ただdata部分眺める分には見やすいと思う。他の部分は見てはいけないし、触れてもいけない。
参考:Navigator
Navigator - Web API | MDN
Location
Locationみていきます。
概ねURL欄の文字列から推測できる要素をいじる系のやつ。コードはそのまま流用しているのでゴミコードのままです。
参考:Location
Location - Web API | MDN
Screen
Screenみていきます。
画面情報を取得するやつ。ぶっちゃけると仕様みても "画面" ってのが何を指しているのかわかってなかったりする。ウィンドウの方でもウィンドウサイズ取得系のやつがあるのでさらに違いが分かってなかったりする。まあ、必要になったらちゃんとみます。それまではまあいいかな…。
とりあえず僕の知る限りのBOMに関してはこんな感じです。DOMよりも未整備の魔境なんで知っておく必要があるかは知らないです。