皆さん、明けましておめでとうございます。
本年もよろしくお願い致します。
m(_ _)m
今回は、Android端末でキャプチャした画像のレイアウトチェックや、Androidの画面をミーティングやプレゼンする際に有効なミラーリングについてご紹介したいと思います。
以下内容に沿ってご紹介したいと思います。
■記事内目次
「画像チェック」
・「GIMP」ツールの紹介
・「GIMP」ツールの導入
・画像レイアウトチェック
「ミラーリング」
・「Vysor」ツールの紹介
・「Vysor」ツールの導入
・ミラーリング操作
■画像チェック
画像チェックでは、「GIMP」ツールについてご紹介したいと思います。
□「GIMP」ツールの紹介
「GIMP」は無料のレタッチソフトです。
Adobe PhotoShopと似たような画像編集等が行えます。
こちらのソフトは、画像編集の他、ソフトウェアテストでは、スマートフォンアプリの画像レイアウトチェックなどにも有効です。
画像のレイアウトチェック（ピクセル単位）は、デザイナー側でチェックされるケースもありますが、ケースによっては、統合テストやシステムテスト、受け入れテストでも確認するケースがあると思います。
今回は上記のようなレイアウトチェックで行う際、GIMPでの使用方法についてご紹介したいと思います。
□「GIMP」ツールの導入
1.まずは、以下ページにアクセスし、「Download」のボタンを選択します。
https://www.gimp.org/
2.ダウンロードページに遷移しますので、オレンジ色ボタンの「Download GIMP (version) directly」を選択します。
ダウンロードが開始されますので、ダウンロード終了まで待機しましょう。
3.また、同ページをした方向へスクロールするとオンラインヘルプの言語ファイルを選べます。
「Japanese」を選択して、こちらもダウンロードしましょう。
4.exeファイルがダウンロードできたら、インストールを行っていきましょう。
以下のように、exeファイルをダブルクリックすると、初めに言語選択が行えますが、ここでは「日本語」が選べません。
「English」を選択して、次へ進みます。
5.「install」を選択して、インストールを行います。
インストールが終了すると以下のように表示されますので、「Finish」ボタンで閉じましょう。
6.続いて、helpをインストールしていきます。
インストールが終わるまで待機します。
7.GIMPを起動してみましょう。
スタートメニューに表示されていますので、選択して起動します。
起動すると、以下のような画面が表示されます。
PhotoShopを使ったことがある方は、なじみのあるレイアウトメニューではないかと思います。
□画像レイアウトチェック
1.まずは、画像ファイルを開いてみましょう。
画面上部のファイルから「開く」を選択します。
以前、以下記事で紹介しました、Android端末で、境界線を表示した際の画像を使用したいと思います。
https://susakiworks.com/2020/12/21/androidstudio_smartphone_operation/
私が所有しているAndroid端末「Asus ZenFone3」の場合、「設定」⇒「システム」⇒「開発者向けオプション」⇒「描画」の「レイアウト境界を表示」にチェックでレイアウト境界線を表示することができます。
以下画像をダウンロードできますので、こちらを利用いただいて問題ありません。
2.今回は例として、「Chrome」アイコン「Gmail」アイコンの間隔を図ってみたいと思います。
操作はそれほど難しくありません。
表示倍率を画面右上のナビゲーションウィンドウで上げましょう。
「Chrome」と「Gmail」アイコンをズームするように表示倍率を上げます。
3.次に、画面左上のツールアイコンから「矩形選択」を選びます。
画像をさらにわかりやすいようにズームし、「矩形選択」でChromeとGmailの間隔幅の境界をドラッグするように選択します。
すると画面左側に「矩形選択」のサイズに、24、7と数字が表れました。（緑枠）
この場合、横幅「24」ピクセルということがわかりました。
このように、Gimpの「矩形選択」を使用することで、ピクセル単位でのレイアウト確認を行うことができます。
アプリのレイアウトチェックで、ピクセル単位までがチェック対象となった場合、Gimpを使用するのも一つの手段ではないかと思います。
■ミラーリング
ミラーリングツールでは、「Vysor」をご紹介したいと思います。
□「Vysor」ツールの紹介
ミラーリングツールとしては、様々なツールがありますが、代表的な「Vysor」をご紹介したいと思います。
ミラーリングの特徴としては、Webでのミーティングの際や、アプリのプレゼンなどを行う際、PCにスマートフォンの画面を映して伝えることができますので、とても有益なツールだと思います。
前回ご紹介したAndroidStudioまたはadbコマンドからの動画撮影でも問題ないと思いますが、3分以上の動作を紹介する場合や、リアルタイムでの操作をミーティングやプレゼンの場で利用すると、とても説得力の高い内容を伝えることができると思います。
□「Vysor」ツールの導入
Vysorは、PC側とAndroid側にそれぞれ導入する必要があります。
事前に、Android端末とPCはUSBケーブルで接続しておきましょう。
◇Android端末側の導入
Google Playアプリで、「Vysor」で検索し、「Vysorアプリ」をインストールします。
スタートウィザードを進めていきます。
以下画面が表示されるので、PC側に導入するVysorソフトウェアのリンクを送るメッセージが表示されます。
メッセージをGmail等で送るか、URLをPC側でアクセスしダウンロードを行います。
◇PC側の導入
「Vysor」のダウンロードページにアクセスし、「Windows」のボタンを選択し、exeファイルをダウンロードします。
ダウンロード完了後、exeファイルを選択し、「Vysor」を起動します。
画面左上に、Android端末の情報が表示されますので、そちらを選択します。
Android端末側との認識が始まり、ミラーリングが行えるようになります。
□使用方法
ミラーリングした状態では、Android端末側の操作をPC側で行うことができます。
また、AndroidStudioのように、キャプチャや動画撮影等も行えます。
以下は、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対応 できるクリエイターシリーズ
