ブラウザで動作確認したい時にお手軽に使えるサービス BrowserStack を試してみた

# はじめに
使うことになったきっかけは、 **Windows8.1** 上で動作するブラウザで挙動確認を行う必要が出てきたことでした。

とはいえWindowsのバージョンとしては、リリースされてから年月が経ち、だいぶ古くなってきていて、手に入りにくいバージョン。

iso落としてVM作る？一から構築するしかない？
でもWindowsのiso ~~クソ重いしな（言うな~~
WindowsServerだったらAMIとかもあるし、AWSとかでも構築ラクな方法いっぱいあるのにな。。。

と、もよもよ悩んでいました。
<img width="271" alt="2019-07-30 20-01-58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73604/3bd866cd-92f3-9020-9c99-1486c39ffe36.png">

しかし、目的はあくまで<strong><font color="red";>ブラウジング。そうブラウジング。</font></strong>
目的を履き違えてはいけない。
Windows 8.1 環境を構築するところに手間をかけるのはなんか違う。
ワガママなのは百も承知…

そんな時に神アドバイスをいただいた。[@fukanoya](https://twitter.com/fukanoya) さん。
＊Twitterリプ転載許可済み
<img width="272" alt="2019-07-30 20-15-45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73604/3c9c6a88-1725-5c44-a262-370cfca9e45f.png">

ということで試してみたってばよ。

[BrowserStack](https://developer.microsoft.com/en-us/microsoft-edge/tools/remote/)
<img width="500" alt="2019-07-30 20-24-32.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73604/e16d55de-4b00-6fd3-4280-ff8c085d934e.jpeg">

# BrowserStack 〜操作手順
## アカウント作成
[BrowserStack](https://developer.microsoft.com/en-us/microsoft-edge/tools/remote/)の **「TEST YOUR SITES LIVE」** をクリック。
クリックすると↓のような画面に遷移するので、**「Get started Free」**をクリック。
<img width="500" alt="2019-07-30 19-12-41.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73604/f72bb67e-1eb1-0a87-6486-b6503cd7c049.jpeg">

サインアップ画面が出るので、名前とメールアドレス、パスワードを設定します。
<img width="500" alt="2019-07-30 19-17-26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73604/fb004c2f-395f-09da-ff43-d5d6200510db.png">
> わたしはけっこうサービスのアカウント登録にはエイリアスのアドレス(dolly+▲▲＠example.com)を使うんだけど、 BrowserStack は<strong><font color="red";>「Email not allowed」</font></strong>ではじかれちゃうのでエイリアスは不可[^1]

[^1]: エイリアスでアカウント作れちゃうとFree Trial無双できちゃうから、防止策なのかな…？とふと思うなど

登録したメールアドレス宛に認証メールが飛んでくるので、ボタンをクリックしてactivate(有効化)します。
<img width="400" alt="2019-07-30 19-22-34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73604/36556b6f-5621-97a5-0569-288941b62af0.png">

## サインイン
サインインできました。今回はブラウザでの動作テストなので、「LIVE」を選択します。
<img width="500" alt="2019-07-30 19-24-25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73604/abc220d0-5a58-7dc2-7c7a-c3b91f02a46a.png">

## 動作テスト
ここからはテストしたい環境を選択するだけ。
Free Trialなので、テスト可能な時間と、選択可能な環境に制約があります。
[FAQs - What do I get with a Free Trial?](https://www.browserstack.com/question/590)
<img width="500" alt="2019-07-30 21-16-02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73604/cd9057bc-bd05-cf9a-43eb-931f592696dd.png">

環境を選択したら、その環境が BrowserStack 上にデプロイされます。
今回は、Windows 8.1 で google Chrome というわりと汎用的な環境でテスト。
ブラウザのバージョンはLatestではないけど、まぁ許容範囲だろう…（そこまでクリティカルな話じゃなかったので
<img width="500" alt="2019-07-30 21-58-23.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73604/0e7578ac-87f0-6fe9-81e5-17ecafe71af1.jpeg">

> デプロイされた環境を開いたままにしておくと、テスト時間のカウントが進む…のかな？[^2]

[^2]: 詳細は未検証

わたしの周りは仕事上 kintone のユーザーやデベロッパーが多いけど、例えば kintone に組み込んだカスタマイズの動作テストやデバッグも、OSやブラウザの種類ごとに細かく対応可能[^3]です。
その環境をいちいち作らなくていいのはまじでラク…
[^3]: 有償プランにUpgradeする必要あり
<img width="500" alt="2019-07-31 10-24-43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73604/a245c69c-d2ee-0f08-3c9e-61adebad364e.png">



# おわりに
わたしはスポットで使っただけなので、今回はFreeに留まったけど、制約なく使いたいなら有償プランにUpgradeしたほうが使い勝手はいいと思います。
年額一括で払ったらLiveプランで 3,000円/月 くらいかな。
普通のデバッグとかで使うならLiveで必要十分な気がする。
<img width="750" alt="2019-07-30 19-28-13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73604/cf5719be-acfa-7814-e058-5e6776c8dd5f.png">

あと<strong><font color="red";>コピペがシームレスにできること。</font></strong>
ローカル環境でショートカットキーでコピーしたものを BrowserStack 上にデプロイしたブラウザに対してペーストできることに感動してしまった…（小並感
＊何かアドバイスとかコメントあれば下さい！