カキタクナッタラ

カキタクナッタラ

出力することを忘れないように何かを書きます

Androidスマホの画面をChromeアプリ「Vysor」を使って簡単にPCの画面上に表示させる手順の紹介

f:id:d3dayo:20170603163002j:plain

おっと!そういえばこういうハウツー系の記事を書くのは久々かも!というでででーさん(@d3_dayo)です!

このブログによく記事を読みにきてくださる方は、既にご存知な方も多いかもしれませんが、2017年6月から『昨日より今日はもっと×2!素敵』 BLOG(イケてる大人計画)でも記事を書くようになりました\(^o^)/ 88888888

で、そっちの記事でも何か私の特色を活かしながら、あとで検索のされやすいストック型の記事を少し書いておきたいな~と思いまして、早速そっちでも、このカキタクナッタラで書いてそうなスマホアプリに関する小技的なものを記事で紹介したのですが、その際に実際のスマホ画面の動きをアニメーション画像にしたいと思ったわけなのです。

そして、今回紹介したいスマホの画面をPC画面にミラーする方法と次回紹介する予定のPC画面の動きを録画してアニメーションGIFにする方法を組み合わせて、スマホアプリ紹介記事用の動くスクリーンショットを作ってみることにしました。

さて、1つ1つの手順にけっこうボリュームがあるので、今回の記事ではスマホの画面をPC画面にミラーする方法に絞って、手順を紹介していきたいと思います。また、次回以降紹介する画面上の動きをアニメーションGIFにする方法と合わせれば、以下のサンプル画像のようなスマホ上での動きをアニメーション化した画像も簡単に作成することができます。

さいしょに

まず最初に今回の手順で作成したスマホ画面の動きをアニメーション化した画像はこちらでございます!

f:id:d3dayo:20170602211850g:plain:w350

この画像を掲載して小技を紹介した記事はこちらでございます!
www.waja-next.com


この記事の中で紹介したChromeに隠されたゲームは、静止画だけで紹介するよりも動きのある画像で紹介したほうがわかりやすいかもなと思って、上に貼った動くスクリーンショットを貼ったわけなのです(^^)


次の記事で紹介しているこの手順と組み合わせるとスマホ画面のアニメーション画像が簡単に作れます!

d3dayo.hateblo.jp



では、こういった動きのあるスマホスクリーンショットを作るための手順を早速紹介していきますが、今回の手順には大きく分けて2つの工程があります。


VysorというChromeアプリでAndroidの画面をPCにミラーする

f:id:d3dayo:20170603141405p:plain

どういうことか?実際に画像でお見せすると、USBでPCとAndroidを接続することで上の画像みたいにPCの画面上にスマホ画面のウィンドウを表示して閲覧や制御(操作)をすることができます!


Vysorのインストール

まずはこの状態を作るために、Chromeにインストールするだけで使える『Vysor』というアプリを導入します。

Vysor


上記のサイトにアクセスしたら「Download」を選択します。

f:id:d3dayo:20170603142819p:plain

Windows用やMac用もあるのですが、今回はChrome用を使うので「Chrome」を選択します。

f:id:d3dayo:20170603143119p:plain

アプリを追加するか?の確認画面が表示されるので「アプリを追加」を選択します。

f:id:d3dayo:20170603143439p:plain:w285


これでChromeに『Vysor』がインストールされます。一旦ここでChrome上での作業は終わりです。

AndroidのUSBデバッグモードを有効にする

続いてはAndroid側でPC上に画面をミラーできるように設定を変更していきます。

Androidの「設定」を開き「端末情報」を選択します。

f:id:d3dayo:20170603144323p:plain:w350

続いて「端末情報」の画面から「ソフトウェア情報」を選択します。

f:id:d3dayo:20170603145605p:plain:w350

「ソフトウェア情報」の画面に切り替わったら「ビルド番号」の部分を7回タップします。

f:id:d3dayo:20170603150204p:plain:w350


これで『開発者向けオプション』という既定値では表示されていない項目が「設定」に表示されるようになります。

さっそく「設定」から、この「開発者向けオプション」を選択します。

f:id:d3dayo:20170603150558p:plain:w350

「開発者向けオプション」が表示されたら、機能を「ON」にして、さらに「USBデバッグ」をONにします。


以上でAndroidでの設定作業も完了です。

USBでPCとAndroidを接続してスマホ画面をPC画面にミラーする

ここまできたら、あとは実際にスマホ画面をPC画面にミラーするための作業に入ります。

先ほどインストールした『Vysor』のアプリをChromeから立ち上げます。(Chromeのアプリ一覧はお気に入りバーにある「アプリ」からアクセスすることができます)

f:id:d3dayo:20170603152801p:plain

『Vysor』の画面が立ち上がったらUSBでPCにAndroidを接続して『Vysor』の「Find Devices」を選択します。

f:id:d3dayo:20170603153029p:plain

次にこのような画面が表示されたら「Android、提供元:Android」という項目を選択した状態で画面右下の「選択」ボタンをクリックします。
f:id:d3dayo:20170603153308p:plain

すると、PCの画面上にこのようなウィンドウが表示ポップアップされてきます。(Androidとの接続を試みている状態の画面です)

f:id:d3dayo:20170603153549p:plain:w350


あとはAndroidとの接続が完了次第、このウィンドウにスマホ画面がミラーされるわけですが、このままだと接続が完了することはありませんのでスマホの画面を直接確認して、このようなメッセージが表示されていたらOKします。

f:id:d3dayo:20170603154625p:plain:w283


これで全ての作業は完了です!

f:id:d3dayo:20170603141405p:plain

あとは冒頭に貼ったこの画像のように、PC上でスマホの画面を確認したり制御(操作)をすることができるようになります。


おわりに

この記事で紹介した手順によって、最終的に果たしたかった目的はスマホ画面の動きをPC上で録画してアニメーション画像化するということだったので、次回以降に紹介するPC上の動きを録画してアニメーション画像にする方法も併せて読んで頂けたらと思いますが、今回紹介したこのAndroidスマホの画面をPC画面にミラーするという手順単独でも、いろいろと便利に活用することができます。

例えば、複数人に対してスマホアプリなどの使い方をレクチャーする際に実機の画面をみんなで見るのはかなり難儀なことなので、今回の方法でPCの大画面にミラーしながらレクチャーしたり(Chromecastを使ったり、他の方法でもこれは可能なことですが…)

あとは、私のようにスマホアプリに関する記事をよく書くブロガーさんにとっては、いちいちスマホでスクショしたものをPCに移してから編集する手間なく、PC上でミラーされているスマホ画面をガンガンスクショしてしまえばいいわけなので、作業の効率化を図ることもできるのではないかと思います。


さて、次回以降に紹介するPC画面の動きを録画してアニメーションGIF化する方法も乞うご期待ください!(^^)


Windows画面上の動きを録画してアニメーション化する手順はこちら!

d3dayo.hateblo.jp



でででーさん
d3dayo.hateblo.jp