どうも！こんにちは！タカノリです！
この前、コーポレートサイトを制作していた時に、アンドロイドのスマホだけ画像が表示されないという現象が起こりました。
こんな時に実機を持っていれば良いけれども、僕はiPhoneしか持っていないので、実際の見た目をクライアントさんに確認するしかない。
困ったな〜ってことで色々調べた結果、MacでAndroid Studioなるもので確認できるらしいという情報を得たので実際にやってみました。
もちろん実際に見たほうが良いので、会った時に実機を確認することが一番大事だと思いますが、ちょっと事前にも見ておきたい場合に使える方法かと思います。
Androidのバージョン関係も設定できるので、バージョンが低くて表示されないということもあるらしいです。
またAndroidの特定バージョンのバグが原因という可能性もあるらしいので、最新のバージョンに上げてもらうことが解決の一歩かもしれませんね。
Android Studioとは？
まず実際にAndroid Studioの操作を行う前に、Android Studioとはなんなのか？っていうことを説明したいと思う。
僕自身、Androidのスマホは一度も使ったことがないので、まるで「？？？」な状態なんですけれども、とりあえず、少しは理解しようと思って下記を読みました。
めちゃくちゃ簡単に説明すると、以下のような感じ。
たぶんアプリとか作る人にとってはなくてはならないものという感じだと思います。
まずはAndroid Studioをダウンロード
Android Studioのダウンロードはこちらからできます。
以下の画像が出てくると思うので、そちらから「DOWNLOAD ANDROID STUDIO」をクリックしましょう。
次に下の画面が出てくるので、利用規約に同意した上で、「ダウンロードする」をクリックしましょう。
ここらへんの流れは特に変化球はないので気にせずにやりましょう。
下の画面もMacではおなじみの画面になりますね。
こちらも、いつもどおり処理して下さい。
最終的に、こちらをクリックで、事前処理は終わりです。
上記の画像をクリックした後、以下の画像のようなものが出てきますが、ここは基本的に「Next Tip」をクリックすれば大丈夫です。
以下も「Next Tip」をクリック。
その後も数回出てくるので全て同じ処理「Next Tip」してください！
これも！
そしてこれも！
連打して下さい！笑
Android Studioで検証してみましょう
「Next Tip」の連打の後、Select a Project Templateというものが開きます。
今回は「No Activity」を選んで「Next」をクリックしましょう。
こちらも今回は検証を行うだけなので気にしなくていいですね。
Finishをクリックします。
この後、以下のような画面になるので、右上の方を確認して下さい。
上部右のアイコンから４つめになるかと思いますが、こちらをクリックです。
次の次の画像でクリックする場所を拡大したものがあります。
クリックする場所は右から四番目ですね。
スマホのアイコンです。
下の画面が出てきたら「＋Create Virtual Device…」をクリック。
Select Hardwareで今回検証する機種を選びましょう。
今回は「Galaxy Nexus」を選んで「Next」をクリック。
System Imageにてアンドロイドのバージョンも選べます。
今回の僕の案件だと、ここがポイントかなと思ったので、色々試してみました。
説明では好きな機種、バージョンでやってください。
今回は、以下のような感じでやります。
右のActionsの三角ボタンをクリック。
三角ボタンをクリックすると・・・はい、でました。
更に条件を変えてやってみます。
こんどは僕のサイトを表示してみました。
ちゃんと表示されますね。
まとめ
僕もAndroid Studioを触ったばかりなので、まだまだ便利な使い方を検証するまでにはいたっていませんが、Macでアンドロイドのチェックをするのには使えそうですね。
ちなみに案件の話をすると、アンドロイドのスマホでWordPressサイトの画像が表示されないという話だったので、まずは「画像の軽量化」をしました。
こちらはデモサイトだったので画像の軽量化はそんなにしてなかったので、まずはそこから処理しました。
そしてアンドロイドのバージョンが上がってないのでは？という仮説をたて、今回のAndroid Studioでの検証に至りました。
後日談
この記事を書いている途中でクライアント様と打ち合わせがあって、やはりアンドロイドのバージョンを上げていないのが原因ということがわかりました。
とりあえず安心。
ホッとしますね。
アンドロイドのバージョン違いでの動作、スマホ表示の確認など納品前にチェックすべきことができるAndroid Studioは便利かと思います。
他にも方法はありそうなので、もっと簡単な方法があるかもしれませんが、解決方法の一つとして、今回記事を書きました。
以上、ありがとうございました！
