JavaScriptでユーザーエージェント(ブラウザ)を判定する方法

技術

Web制作をしてる時に、「ブラウザによって挙動が違う」のは当たり前の話ですが、
全てのブラウザで同じ挙動、表示をさせようとするとなかなか上手くいきません。

そこで、特定のブラウザだけに特殊な処理を施して、ブラウザ間に生じる際をなくそうと考えるのです!
ここで最初に必要になってくるのが「ブラウザやOSを判定すること」です。

今回はそのユーザーエージェントをJavaScriptで判定する方法をご紹介いたします。

そもそも「ユーザーエージェント」とは

「ユーザーエージェント」とは、ユーザーがそのWebサイトを表示させるときに使用している環境のことを言います。
簡単に言えば、ユーザーが「どんな端末(OS)で、どのブラウザを使っているか」をざっくりと調べることができます。

ユーザーエージェントがわかれば、各ブラウザに特定の処理を施すことができます。

ユーザーエージェントの判定コードをご紹介!

まずユーザーエージェントの取得方法は

navigator.userAgent

もしくは

window.navigator.userAgent

で取得できます。
userAgentプロパティを使用することでユーザーエージェントの取得が可能になるのですね!

そして判定は以下です。

var ua = navigator.userAgent;

if(ua.indexOf('Trident') != -1 || ua.indexOf('MSIE') != -1) {
  // Microsoft Internet Exploreの時の処理
} else if(ua.indexOf('Edge') != -1) {
  // Microsoft Edgeの時の処理
} else if(ua.indexOf('Chrome') != -1) {
  // Chromeの時の処理
} else if(ua.indexOf('Safari') != -1) {
  // Safariの時の処理
} else if(ua.indexOf('Firefox') != -1) {
  // Firefoxの時の処理
} else if(ua.indexOf('OPR') != -1 || ua.indexOf('Opera') != -1) {
  // Operaの時の処理
} else {
  // そのほかの時
}

判定時は大文字小文字を区別するので、「各ブラウザの大文字小文字なんて覚えてられないよ!」って方は
toLowerCase関数を使って文字列を小文字化して小文字で判定することをお勧めします!

// toLowerCase関数を追加
var ua = navigator.userAgent.toLowerCase();

// 全て小文字で判定
if(ua.indexOf('trident') != -1 || ua.indexOf('msie') != -1) {
  // Microsoft Internet Exploreの時の処理
} else if(ua.indexOf('edge') != -1) {
  // Microsoft Edgeの時の処理
} else if(ua.indexOf('chrome') != -1) {
  // Chromeの時の処理
} else if(ua.indexOf('safari') != -1) {
  // Safariの時の処理
} else if(ua.indexOf('firefox') != -1) {
  // Firefoxの時の処理
} else if(ua.indexOf('opr') != -1 || ua.indexOf('opera') != -1) {
  // Operaの時の処理
} else {
  // そのほかの時
}

indexOf関数は、文字列の中に探したい文字列が何文字目以降にあるかを判定してくれる関数です。
探したい文字列がそこにない時には-1が返されます。
ここで判定するのは「存在するかどうか」なので、「-1でなければ存在する」ということになります。

// 変数uaに「edge」という文字が存在する時
   if(ua.indexOf('edge') != -1) {
     // Microsoft Edgeの時の処理
   }

注意点と対処法

これを初めて使おうと思ったときに、あれ?と思ったことがあります。

OSはMac OSXで、Google Chromeを使用したときに、こんな表示になりました。

Safariがあります

よし、Chromeあるし、OK!
あれ?Safari…?

最後に「Safari」と記述されていました。

これはuserAgentプロパティの特徴で、
基本的には「Microsoft系ブラウザ→Chrome→Safari」の順番に表示されるそうです。

なので、例えば「Safariのみで処理をさせたい」というような時に

// 注意!誤った一例です。
 if(ua.indexOf('safari') != -1) {
   // Safariの時の処理
 }

と書きたくなってしまうのですが、これでは正しい判定ができません。
これだとChromeでも処理されてしまうことになります。

よって、先に例に出したように順番通りに判定していくことが大切です。

  

コメント

  1. OCCUSTYNC より:

    [url=https://vskamagrav.com/]kamagra or malegra[/url]

  2. OCCUSTYNC より:
  3. OCCUSTYNC より:
  4. OCCUSTYNC より:
  5. OCCUSTYNC より:
  6. OCCUSTYNC より:
  7. OCCUSTYNC より:
  8. OCCUSTYNC より:
  9. Otilia より:

    Woah! I’m really digging the template/theme of this blog.

    It’s simple, yet effective. A lot of times it’s very difficult to get that “perfect balance” between user friendliness and
    visual appearance. I must say you’ve done a great job with this.
    Also, the blog loads super fast for me on Opera. Excellent Blog!

  10. Millie より:

    Fantastic goods from you, man. I’ve be mindful your stuff prior
    to and you are simply too magnificent. I really like what you’ve obtained here, really
    like what you are saying and the way in which in which you are saying it.
    You’re making it entertaining and you continue to take care of to keep it sensible.
    I can not wait to learn much more from you. That is actually a wonderful site.

  11. OCCUSTYNC より:
  12. WilliamGor より:

    date sites
    [url=”http://datingonlinecome.com/?”]plenty of fish dating sight[/url]

  13. starbucks keto より:

    keto custom plan reviews https://ketodietplanus.com/

  14. gay hsv dating より:

    dating with a gay couple https://gaychatrooms.org/

  15. dating foreign gay men https://gaychatus.com/

  16. dating orlando gay https://freegaychatnew.com/

  17. gay dating tips https://gaydatingzz.com/

  18. gay abdl dating https://gaychatgay.com/

  19. gay interacial dating https://gaydatingcanada.com/

  20. free gay trucker dating sites https://gayonlinedating.net/

  21. gay dating czech https://gayedating.com/

  22. gay dating sites for free https://gaydatinglosangeles.com/

  23. gay dating utah https://dating-gaym.com/

  24. gay dating minneapolis https://gay-singles-dating.com/

  25. what to write college essay about https://essaywritercentral.com/

  26. mba essay writing service https://essayghostwriter.com/

  27. who to write an essay https://essaytag.com/

  28. essay writing websites https://essaysnet.com/

  29. writing good essays https://essaypoints.com/

  30. writing essay services https://onlinecasinos4me.com/

  31. online essay writing service https://online2casino.com/

  32. best online casinos for real money https://casinosonlinex.com/

  33. free bonus no deposit casino https://casinoonlinek.com/

  34. what to write an argumentative essay on https://buy1essay.com/

  35. help with essay writing https://multiessay.com/

  36. australia essay writing service https://essaytodo.com/

  37. my essay writing https://dollaressays.com/

  38. writing essay services https://student-essay.com/

  39. games that involve sex https://cybersexgames.net/

  40. free sex games for android https://sexgameszone.com/

  41. sex games on play store https://sexgamesx.net/

  42. sister sex party games https://winsexgames.com/

  43. 1allowable より:

    3calculated

  44. best gay dating sites https://gaypridee.com

  45. gay dating sites for kids 10-14 https://gay-buddies.com

  46. #ИМЯ? より:

    mister gay dating app https://gayprideusa.com

  47. gay crossdresser dating https://speedgaydate.com

  48. gay closet dating https://gayfade.com

  49. best gay dating より:

    gay hairy men dating sites https://gaysugardaddydatingsites.com

  50. when a secretive commitment phobic guy you are dating is really gay https://gaypridee.com/

  51. chat gay より:

    free gay sex chat https://gaytgpost.com/

  52. gay random chat https://gay-buddies.com/

  53. gay dating app windows https://speedgaydate.com/

  54. operation slots https://2-free-slots.com/

  55. calendar with time slots https://candylandslotmachine.com/

  56. free online casino slots https://pennyslotmachines.org/

  57. free slots instant play https://slotmachinesworld.com/

  58. caesar casino slots game https://slotmachinesforum.net/

  59. myvegas slots より:

    river slots sweepstakes https://slot-machine-sale.com/

  60. las vegas slots より:
  61. 459 free casino slots https://download-slot-machines.com/

  62. slots with high volitality https://411slotmachine.com/

  63. play free vegas slots https://www-slotmachines.com/

  64. quick hit slots より:

    free double diamond slots https://slotmachinegameinfo.com/

  65. dissertation proposal help https://buydissertationhelp.com/

  66. dissertation writing group https://dissertationwriting-service.com/

  67. literature review dissertation https://dissertations-writing.org/

  68. how to get help with dissertation https://helpon-doctoral-dissertations.net/

  69. psy- より:

    psy-

    psy-

  70. projectio より:

    projectio

    projectio

  71. moskva psiholog online

    moskva psiholog online

  72. slovar po psihoanalizu laplansh

    slovar po psihoanalizu laplansh

  73. psy online より:

    psy online

    psy online

  74. uels ukrain より:

    uels ukrain

    uels ukrain

  75. DPTPtNqS より:

    DPTPtNqS

    DPTPtNqS

  76. qQ8KZZE6 より:

    qQ8KZZE6

    qQ8KZZE6

  77. D6tuzANh より:

    D6tuzANh

    D6tuzANh

  78. SHKALA TONOV より:

    SHKALA TONOV

    SHKALA TONOV

  79. リ?? 濵 より:

    リ?? 濵

    リ?? 濵

  80. russianmanagement.com

    russianmanagement.com

  81. chelovek-iz-90-h

    chelovek-iz-90-h

  82. 3Hk12Bl より:

    3Hk12Bl

    3Hk12Bl

  83. 3NOZC44 より:

    3NOZC44

    3NOZC44

  84. 01211 より:

    01211

    01211 21546

  85. tor-lyubov-i-grom

    tor-lyubov-i-grom

  86. film-tor-2022 より:

    film-tor-2022

    film-tor-2022

  87. hd-tor-2022 より:

    hd-tor-2022

    hd-tor-2022

  88. hdorg2.ru より:

    hdorg2.ru

    hdorg2.ru

  89. Psikholog より:

    Psikholog

    Psikholog

  90. netstate.ru より:

    netstate.ru

    netstate.ru

  91. Link より:

    Link

    Link

  92. 1utilize より:

    3drinker

  93. tor-lyubov-i-grom.ru

    tor-lyubov-i-grom.ru

  94. psy より:

    psy

    psy

  95. chelovek soznaniye mozg

    chelovek soznaniye mozg

  96. bit.ly より:

    bit.ly

    bit.ly

  97. cleantalkorg2.ru

    cleantalkorg2.ru

  98. bucha killings より:

    bucha killings

    bucha killings

  99. War in Ukraine より:

    War in Ukraine

    War in Ukraine

  100. Ukraine より:

    Ukraine

    Ukraine

  101. Ukraine news live

    Ukraine news live

  102. The Latest Ukraine News

    The Latest Ukraine News

  103. 2seraphic より:

    1fretted

  104. writing a master’s dissertation https://professionaldissertationwriting.org/

  105. phd thesis vs dissertation https://dissertationwritingcenter.com/

  106. site より:

    site

    site

  107. dissertation cover page https://dissertationhelpexpert.com/

  108. writing methodology for dissertation https://examplesofdissertation.com/

  109. help with writing dissertation proposal https://writing-a-dissertation.net/

  110. dissertation writing advice https://businessdissertationhelp.com/

  111. writing help より:

    writing your dissertation https://writingadissertationproposal.com/

  112. dissertation editing help https://dissertationhelpspecialist.com/

  113. mathematics dissertation help https://dissertationhelperhub.com/

  114. stats より:

    stats

    stats

  115. Ukraine-war より:

    Ukraine-war

    Ukraine-war

  116. movies より:

    movies

    movies

  117. gidonline より:

    gidonline

    gidonline

  118. mir dikogo zapada 4 sezon 4 seriya

    mir dikogo zapada 4 sezon 4 seriya

  119. web より:

    web

    web

  120. film.8filmov.ru より:

    film.8filmov.ru

    film.8filmov.ru

  121. video より:

    video

    video

  122. film より:

    film

    film

  123. betmgm pa online casino https://download-casino-slots.com/

  124. pa online casino sign up bonus https://firstonlinecasino.org/

  125. online casino gaming https://onlinecasinofortunes.com/

  126. online casino free play https://newlasvegascasinos.com/

  127. zone online casino login https://trust-online-casino.com/

  128. gunlake online casino https://onlinecasinosdirectory.org/

  129. online casino games list https://9lineslotscasino.com/

  130. casino online canada https://free-online-casinos.net/

  131. harrahs online casino https://cybertimeonlinecasino.com/

  132. watch casino full movie free online https://1freeslotscasino.com/

  133. michigan online casino free play https://vrgamescasino.com/

  134. free online casino real money https://casino-online-roulette.com/

  135. msn games online casino https://casino-online-jackpot.com/

  136. online casino spanish https://onlineplayerscasino.com/

  137. play casino online https://ownonlinecasino.com/

  138. double down casino online https://all-online-casino-games.com/

  139. free online casino games real money no deposit https://casino8online.com/

  140. liusia-8-seriiaonlain

    liusia-8-seriiaonlain

  141. smotret-polnyj-film-smotret-v-khoroshem-kachestve

    smotret-polnyj-film-smotret-v-khoroshem-kachestve

  142. filmgoda.ru より:

    filmgoda.ru

    filmgoda.ru

  143. rodnoe-kino-ru より:

    rodnoe-kino-ru

    rodnoe-kino-ru

  144. stat.netstate.ru

    stat.netstate.ru

  145. kroger vpn より:
  146. business vpn software https://freehostingvpn.com/

  147. how does a vpn work https://ippowervpn.net/

  148. vypr vpn より:

    best free vpn service https://rsvpnorthvalley.com/

  149. sY5am より:

    sY5am

    sY5am

  150. Dom drakona より:

    Dom drakona

    Dom drakona

  151. JGXldbkj より:

    JGXldbkj

    JGXldbkj

  152. aOuSjapt より:

    aOuSjapt

    aOuSjapt

  153. 踵纃蒹 より:

    踵纃蒹

    踵纃蒹

  154. psikholog moskva

    psikholog moskva

  155. Usik Dzhoshua 2 2022

    Usik Dzhoshua 2 2022

  156. Dim Drakona 2022

    Dim Drakona 2022

  157. TwnE4zl6 より:

    TwnE4zl6

    TwnE4zl6

  158. gay trucker dating https://datinggayservices.com/

  159. psy 3CtwvjS より:

    psy 3CtwvjS

    psy 3CtwvjS

  160. share dating より:
  161. my dating sites より:
  162. dating sifes より:
  163. top rated dating websites https://datingpersonalsonline.com/

  164. dating near me free https://wowdatingsites.com/

  165. skycouger gf より:

    meet european singles in usa https://lavaonlinedating.com/

  166. mature nl free より:

    japanese singles dating sites https://freeadultdatingpasses.com/

  167. gay free より:

    free single personal ads https://zonlinedating.com/

  168. online dating best sites free https://onlinedatingservicesecrets.com/

  169. lalochesia より:

    lalochesia

    lalochesia

  170. online casino instant withdrawal https://onlinecasinos4me.com/

  171. casino slots online https://online2casino.com/

  172. start casino online https://casinosonlinex.com/

  173. western pa gay chat https://newgaychat.com/

  174. free gay bi chat lines in seattle wa https://gaychatcams.net/

  175. gay men chat cam https://gaychatspots.com/

  176. gay chat am より:

    gay sex chat rooms https://chatcongays.com/

  177. gay chat より:

    freer gay chat rooms https://gayphillychat.com/

  178. richie rose gay chat gay https://gaychatnorules.com/

  179. free rulette gay chat https://gaymusclechatrooms.com/

  180. film onlinee より:

    film onlinee

    film onlinee

  181. gay boy chat より:
  182. programma peredach na segodnya

    programma peredach na segodnya

  183. free xxx gay chat rooms https://gayinteracialchat.com/

  184. psycholog-v-moskve.ru

    psycholog-v-moskve.ru

  185. psycholog-moskva.ru

    psycholog-moskva.ru

  186. 3qAIwwN より:

    3qAIwwN

    3qAIwwN

  187. video-2 より:

    video-2

    video-2

  188. sezons.store より:

    sezons.store

    sezons.store

  189. socionika-eniostyle.ru

    socionika-eniostyle.ru

  190. psy-news.ru より:

    psy-news.ru

    psy-news.ru

  191. 000-1 より:

    000-1

    000-1

  192. 3SoTS32 より:

    3SoTS32

    3SoTS32

  193. 3DGofO7 より:

    3DGofO7

    3DGofO7

タイトルとURLをコピーしました