/デベロッパーツールでのスマホ確認の裏ワザとクラウド実機テスト2016年3月18日デベロッパーツールでのスマホ確認の裏ワザとクラウド実機テストTweetPocketスマホサイトの制作において欠かせないのが実機での表示確認。解像度はもちろんのこと、コードの解釈も多種多様なスマートフォンにおいて、すべての端末でひとつひとつ検証していくのはコスト面でも現実的ではありません。そのため現場では、実機とエミュレーターを組み合わせてテストするのが一般的になっています。Cloud(シロッコクラウド)」について紹介します。GoogleChromeデベロッパーツールGoogleChrome(グーグルクローム)のデベロッパーツールは、Webサイトがスマートフォンでどのように表示されるか、ブラウザから手軽にチェックできます。100%正確に表示再現してくれるわけではないですが、レイアウト崩れがないかさっと確認したり、コードを修正したりする場合には本当に便利なツールです。誰でも今すぐ簡単に使えるデベロッパーツールGoogleChromeで検証したいサイトを表示したら、WindowsならF12(またはCtrl+Shift+I)、MacならCommand+Option+Iで瞬時にデベロッパーツールが立ち上がります。メニューから起動したい場合は、右上のメニューアイコン>その他のツール>デベロッパーツールで表示されます。立ち上げたら、ページ下部にウィンドウが表示されるので、左上にあるスマホの形をしたデバイスモードアイコンをクリック(Ctrl+Shift+MでもOK)。あとは、検証が必要なデバイスに切り替えて表示確認するのみという、初心者にも優しいシンプルな仕組みになっています。GoogleChromeデベロッパーツールは多機能で、スマホサイトを検証する際には特に下記のような点が便利です。HTMLとCSSをリアルタイムで検証できるHTMLとCSSを編集して、リアルタイムでその結果を表示、確認することができます。これは、意図する見た目にならなかった場合に、その原因と解決策を調べるのに便利です。sideを変更して右側に表示させるようにすると見やすくなります。DevTools)をクリックすると表示されます。device...から任意のデバイスを追加することができます。一度登録すれば、デバイスリストに表示されるようになるので、よく使うものを登録しておくと便利です。手元にあるAndroidをPCに接続してデバック作業ができるより正確な検証を実施したい場合は、デベロッパーツールの検証機能を手元にあるAndroid実機(Android4.0以上)に対して使用することができます。接続する手順は以下のとおりです。1.AndroidのUSBデバッグを有効にする設定>開発者向けオプション>USBデバッグにチェックでOKです。※Android4.2以降から開発者向けオプションが裏設定みたいな扱いになっているので、見当たらない場合は、端末情報>ソフトウェア情報>ビルド番号を7回タップで開発者向けオプションが設定メニューに表示されるようになります。隠しコマンドみたいで面白いですね。2.USBケーブルでAndroidとPCを接続するAndroidを認識させるために、USBケーブルでAndroidとPCを接続します。ここで、Windowsの場合はUSBドライバというものが必要になります。通常は初回接続時に自動的にインストールされると思うのですが、もし認識されない場合は、ドライバを再インストールする、最新のドライバに更新する、などの手順が必要な場合があります。USBドライバのインストールに関する詳細は各端末によって異なるので、メーカーのサポートサイトなどを参照してください。Laserという端末で、USB接続がなかなか認識されずに苦戦しました。ドライバはインストールされてるし最新なので問題なし。Link」というPC画面上でスマホを操作するアプリがプリインストールされていて、どうやらこれが邪魔しているようでした。Linkを起動したところ認識がうまくいき、その後はPCLinkを起動しなくてもちゃんと認識されるようになりました。接続がうまくいかない場合は、こういった類のアプリを使ってないか、ASUS系じゃないかなど確認してみるといいかもしれません。devices...をクリック。ここで端末名が表示されていれば、接続成功です。Inspectをクリックでデバッグを開始、URL入力でページを追加できる最近AndroidのChromeで開いたページの情報があらかじめ表示されており、inspectをクリックするとそのページのデバッグを開始します。Webサイトのリストにデバッグしたいページが表示されてなかったら、URLを直接入力することでページを開くこともできますし、Android側でURLを入力するなどして開いてもOKです。デバッグがはかどります!PC画面上のデベロッパーツールとAndroidの画面はリンクしているので、Android側でChromeを終了すると、デベロッパーツール上でも表示できなくなってしまうので注意してください。スマホ画面が表示されない、エラーが出る、というような時は、一度デベロッパーツールを終了して開き直すなどするとうまくいくことがあります。Queries(メディアクエリ)を設定している場合、その数値にあわせてワンクリックで表示領域の幅を切り替えることができます。使い方は簡単で、左上にあるメディアクエリアイコン(?)をクリックするとメディアクエリ設定がその設定内容(数値)に合わせてバーの形状でずらっと表示され、それぞれのバーをクリックすると幅が自動的に変更されるという仕組みです。それぞれのバーを右クリックすると、そのメディアクエリが含まれるCSSファイル一覧が表示され、さらにファイルを選択すると、Sourcesパネルでハイライト表示されるという便利な機能も。メディアクエリ設定が増えれば増えるほど、複雑になり混乱しがちなレスポンシブWebデザインのコーディングにおいて、重宝する便利な機能です。デベロッパーツールを起動した状態でウィンドウ幅を変更すると、ウィンドウの幅と高さのサイズが右上に表示されるようになっています。デバイスモードになっている場合は表示領域を変更すると上部バーの「Screen」に数値が表示されます。エミュレーターを補完するクラウド実機テストサービスここまで紹介したGoogleChromeのデベロッパーツールは、本当に便利で今やスマホサイト制作に手放せないツールですが、残念ながら100%実機を再現できるわけではありません。エミュレーターでは問題なくても、実機では問題あり、ということもしばしば。いえ、検証の度に様々な実機を用意するのは大変なコストがかかります。「どうしてもこの端末で実機テストしたい!でも手元にない!予算もない!時間もない!」という、そんな困った時に使えそうなのが、Webブラウザから簡単に実機テストができるクラウド実機テストサービス。Cloud(シロッコクラウド)」をためしてみましたので紹介します。Cloudクラウド実機テストサービスはアプリ開発の分野では一般的で、国内外で多数のサービスが展開されています。扱っている端末の数・種類や機能などサービス内容により金額も利用方法も様々ありますが、スマホサイトの表示確認・検証という比較的簡易的なテストであれば、ブラウザ上で操作ができて、短い時間単位の課金で手軽に利用できるサービスが良いと思います。Cloud(シロッコクラウド)は、お試し版の無料プランと、4,000円で5時間使えるプリペイドのスタンダードプラン(有効期限90日)があり、利用時間は分単位で消費されるため、実機レンタルよりはるかに安く、表示不具合の問い合わせなどがあった際にすぐさまテストできる点が魅力的です。upからアカウントを作成、メールを確認後すぐに無料プランで利用開始できます。クレジットカードなどの登録も不要です。SO-03Dの2機種のみ使えるようになっており、機能や操作感を試すことができます。端末一覧の中から検証したい端末を選択しますが、他の人が使用中の場合はBusyと表示され選択することができません。最新機種や人気機種はひょっとしたら、混み合ってなかなか使えない、ということがあるかもしれません。selectをクリックするとすぐに端末が起動し、ここから利用時間がカウントされます。NEXUSをためしてみました。端末は初期化状態だと思われます。デフォルトのアプリしか入っていませんので、標準ブラウザのみでChromeが使えない場合もあります。Playストアからアプリをインストールすることもできるそうです。この時Googleのアカウントが必要になりますが、端末の接続切断後に端末自体が初期化され、インストールされたアプリケーション、入力情報などは全て削除されるのでご安心を、とのことでした。標準ブラウザを使ってスマホサイトを表示します。ためしにGoogle検索を。PCのキーボードからは入力できないので、画面上で入力します。フリック入力はちょっとやりにくいです。動作はかなりもっさりしています。最初Firefoxで使ってしまっていましたが、サイトになかなか接続できないなどの不具合が出ました。当ブログを表示させてみました。モードで切り替えできます。表示させている画面をキャプチャできる点が便利です。いった作業をひとつひとつ手作業でやると、動作が重いこともあり時間と手間がかかります。Class(テストクラス)いう機能が用意されています。サンプルとしてライブラリが用意されているので、それを編集すれば簡単に作成できます。「端末一覧」と表示されているリンクテキストをクリック3秒待ちスクリーンショットを取得という操作が自動化されています。「3秒待ち」と言っても、実際には動作がもっさりしているのでもっと時間がかかったのですが、スクリプト自体はきちんと実行され、レポートとともにキャプチャ3点が出力されました。動作が思ったより重かったのが残念でしたが、スクリプトである程度時間短縮できるという点と、やはり実機レンタルと比較するとかなりコストが抑えられるので、選択肢としては十分ありだと思いました。手元にない端末で、急なトラブルや不具合にできるだけ早く対応しなければならないという時があると思いますので、こういう方法があるということを覚えておくといつか役に立つかもしれません。レスポンシブWebデザインSNSでもご購読できます。TwitterでフォローするFeedlyでフォローするいしかわモバイルフレンドリーラボのWebデザイナー兼ディレクターです。初心者にも分かりやすい記事を心がけてます。