20210104_title_image

【テスト環境】Android端末ミラーリング(Vysor)、画像レイアウトチェック(GIMP)の紹介

皆さん、明けましておめでとうございます。
本年もよろしくお願い致します。
m(_ _)m

今回は、Android端末でキャプチャした画像のレイアウトチェックや、Androidの画面をミーティングやプレゼンする際に有効なミラーリングについてご紹介したいと思います。
以下内容に沿ってご紹介したいと思います。

■記事内目次

「画像チェック」
「GIMP」ツールの紹介
「GIMP」ツールの導入
画像レイアウトチェック

「ミラーリング」
「Vysor」ツールの紹介
「Vysor」ツールの導入
ミラーリング操作

 

■画像チェック

画像チェックでは、「GIMP」ツールについてご紹介したいと思います。
20210104_gimp_image_01

□「GIMP」ツールの紹介

「GIMP」は無料のレタッチソフトです。
Adobe PhotoShopと似たような画像編集等が行えます。
こちらのソフトは、画像編集の他、ソフトウェアテストでは、スマートフォンアプリの画像レイアウトチェックなどにも有効です。
画像のレイアウトチェック(ピクセル単位)は、デザイナー側でチェックされるケースもありますが、ケースによっては、統合テストやシステムテスト、受け入れテストでも確認するケースがあると思います。
今回は上記のようなレイアウトチェックで行う際、GIMPでの使用方法についてご紹介したいと思います。

□「GIMP」ツールの導入

1.まずは、以下ページにアクセスし、「Download」のボタンを選択します。
https://www.gimp.org/
20210104_gimp_image_01_1

2.ダウンロードページに遷移しますので、オレンジ色ボタンの「Download GIMP (version) directly」を選択します。
ダウンロードが開始されますので、ダウンロード終了まで待機しましょう。
20210104_gimp_image_01_2

3.また、同ページをした方向へスクロールするとオンラインヘルプの言語ファイルを選べます。
「Japanese」を選択して、こちらもダウンロードしましょう。
20210104_gimp_image_01_3

4.exeファイルがダウンロードできたら、インストールを行っていきましょう。
以下のように、exeファイルをダブルクリックすると、初めに言語選択が行えますが、ここでは「日本語」が選べません。
「English」を選択して、次へ進みます。
20210104_gimp_image_01_4

5.「install」を選択して、インストールを行います。
20210104_gimp_image_01_5
インストールが終了すると以下のように表示されますので、「Finish」ボタンで閉じましょう。
20210104_gimp_image_01_6

6.続いて、helpをインストールしていきます。
20210104_gimp_image_01_6
インストールが終わるまで待機します。
20210104_gimp_image_01_77.GIMPを起動してみましょう。
スタートメニューに表示されていますので、選択して起動します。
20210104_gimp_image_01_8
20210104_gimp_image_01_9

起動すると、以下のような画面が表示されます。
20210104_gimp_image_01_10

PhotoShopを使ったことがある方は、なじみのあるレイアウトメニューではないかと思います。

□画像レイアウトチェック

1.まずは、画像ファイルを開いてみましょう。
画面上部のファイルから「開く」を選択します。
20210104_gimp_image_01_11

以前、以下記事で紹介しました、Android端末で、境界線を表示した際の画像を使用したいと思います。
https://susakiworks.com/2020/12/21/androidstudio_smartphone_operation/

私が所有しているAndroid端末「Asus ZenFone3」の場合、「設定」⇒「システム」⇒「開発者向けオプション」⇒「描画」の「レイアウト境界を表示」にチェックでレイアウト境界線を表示することができます。
以下画像をダウンロードできますので、こちらを利用いただいて問題ありません。
20210104_gimp_image_01_11

2.今回は例として、「Chrome」アイコン「Gmail」アイコンの間隔を図ってみたいと思います。
操作はそれほど難しくありません。
表示倍率を画面右上のナビゲーションウィンドウで上げましょう。
20210104_gimp_image_01_12
「Chrome」と「Gmail」アイコンをズームするように表示倍率を上げます。

3.次に、画面左上のツールアイコンから「矩形選択」を選びます。
20210104_gimp_image_01_13
画像をさらにわかりやすいようにズームし、「矩形選択」でChromeとGmailの間隔幅の境界をドラッグするように選択します。
20210104_gimp_image_01_14
すると画面左側に「矩形選択」のサイズに、24、7と数字が表れました。(緑枠)
この場合、横幅「24」ピクセルということがわかりました。

このように、Gimpの「矩形選択」を使用することで、ピクセル単位でのレイアウト確認を行うことができます。
アプリのレイアウトチェックで、ピクセル単位までがチェック対象となった場合、Gimpを使用するのも一つの手段ではないかと思います。

 

■ミラーリング

ミラーリングツールでは、「Vysor」をご紹介したいと思います。
20210104_vysor_image_01

□「Vysor」ツールの紹介

ミラーリングツールとしては、様々なツールがありますが、代表的な「Vysor」をご紹介したいと思います。
ミラーリングの特徴としては、Webでのミーティングの際や、アプリのプレゼンなどを行う際、PCにスマートフォンの画面を映して伝えることができますので、とても有益なツールだと思います。
前回ご紹介したAndroidStudioまたはadbコマンドからの動画撮影でも問題ないと思いますが、3分以上の動作を紹介する場合や、リアルタイムでの操作をミーティングやプレゼンの場で利用すると、とても説得力の高い内容を伝えることができると思います。

□「Vysor」ツールの導入

Vysorは、PC側とAndroid側にそれぞれ導入する必要があります。
事前に、Android端末とPCはUSBケーブルで接続しておきましょう。

◇Android端末側の導入

Google Playアプリで、「Vysor」で検索し、「Vysorアプリ」をインストールします。
20210104_vysor_image_02
スタートウィザードを進めていきます。
20210104_vysor_image_03
以下画面が表示されるので、PC側に導入するVysorソフトウェアのリンクを送るメッセージが表示されます。
メッセージをGmail等で送るか、URLをPC側でアクセスしダウンロードを行います。
20210104_vysor_image_04

◇PC側の導入

「Vysor」のダウンロードページにアクセスし、「Windows」のボタンを選択し、exeファイルをダウンロードします。
20210104_vysor_image_05
ダウンロード完了後、exeファイルを選択し、「Vysor」を起動します。
20210104_vysor_image_06
画面左上に、Android端末の情報が表示されますので、そちらを選択します。
Android端末側との認識が始まり、ミラーリングが行えるようになります。
20210104_vysor_image_07

□使用方法

ミラーリングした状態では、Android端末側の操作をPC側で行うことができます。
また、AndroidStudioのように、キャプチャや動画撮影等も行えます。
20210104_vysor_image_08
以下は、PCとAndroid端末をVysorでミラーリングした際の動画を撮影したものです。
https://susakiworks.com/wp-content/uploads/2021/01/ASUS-Z017DA-Movie.mp4

Android端末のアプリについて、Webミーティングや、プレゼン時にPC側で操作を行うことで、より相手に伝えることができると思います。

 

■最後に

今回は、「GIMP」での画像レイアウトチェック方法、「Vysor」を使ったAndroid端末とPCのミラーリングについてご紹介いたしました。
ソフトウェアテストを行う上で、役立つツールであると思いますので、ご興味のある方は、導入されてみてはいかがでしょうか。

最後まで読んで頂き、ありがとうございました。

 

サイトトップへ
https://susakiworks.com/

できるクリエイター GIMP 2.10独習ナビ 改訂版 Windows&macOS対応 できるクリエイターシリーズ
GIMP

この記事が気に入ったら
いいね ! しよう

Twitter で
20210104_title_image
最新情報をチェックしよう!