UTの回顧法用に画面遷移スライドショーを簡単に作る

ユーザーテストでタスク完了後などにふり返りでインタビューをしますが、その時により記憶を鮮明にしながら振り返ってもらうために各画面をもう一度見せたいことがあります。しかし、ECサイトの申し込みフォーム等だとブラウザのバックでは単純に戻れなかったりしますし、最初から辿ると再入力などでもたつきがちです。

そこであらかじめスクリーンショットを用意してスライドショーで見せたりするわけですが、それにもいくつかハードルがあります。例えば縦に長いスクショ画像を一般的な画像ビューワーで表示すると、大抵は画像全体がウインドウに収まるように表示されてものすごく細長～い状態になったりします。それを適切なサイズにズームさせなければなりません。また参加者の目の前にあるタスクに使ったPCをモデレーターが別席から操作するのにマウスだけですべてのオペレーションをしたいのに、例えばWindows標準の「フォト」アプリなどは画像の切り替えがキーボードの左右カーソルキーでしかできません。また理想の画像ビューワーがあっても、クライアントのPCに許可無くインストールできなかったりすることもしばしば。

というわけで、理想の回顧法向け画面遷移スライドショーができるスクリプトをHTML + JavaScriptで作ることにしました。HTML + JSならインストール不要でブラウザで開くだけです。作るというか、ほぼほぼGitHub Copilotに希望を伝えて作ってもらったというのが正しい。生成AIスゴい！何度か追加プロンプトを入れて書き直してもらいましたが、直接書いた行は1割もない気がします。

■設定した要求仕様

マウス左クリックで次、右クリックで前の画像を表示する
幅を固定で表示し、縦にはみ出る分はホイールでスクロール
初期位置は画像の一番上（ファーストビュー）を表示

基本的にこれだけ（以外とこれができる画像ビューワーがない！）。

本当はフォルダ内の画像ファイルリストを自動的に取得して先頭から順に表示するようにしたかったんですが、ブラウザのセキュリティ仕様的にJavaScriptでローカルフォルダをスキャンすることは不可能だったので諦めました。Node.jsのようなフレームワークを使い始めると受け渡しが煩雑になってしまい本末転倒になってしまうので。

■完成したコード例

index.html （HTMLファイル）

 <html lang=" ><!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>スライドショー</title>
    <link rel="stylesheet" href="styles.css">
    <script>
        const images = [
            '1.png',
            '2.png',
            '3.png',
            '4.png',
            '5.png',
        ];
    </script>
</head>
<body>
    <div id="slideshow">
        <img id="slide" src="" alt="スライドショー画像">
    </div>
    <script src="script.js"></script>
</body>
</html>

<head>

<title>スライドショー</title>

const images = [

'1.png',

'2.png',

'3.png',

'4.png',

'5.png',

];

</script>

</head>

<body>

</div>

</body>

</html>

const images = {}; の中に画像ファイルを列挙します。”で囲って、最後に,をつけてください。必要な数だけ増減OKです。このhtmlファイルがあるディレクトリに画像ファイルを置く場合の例です。例えば「画像」というサブフォルダに入れるなら、

'画像/1.png',

のような形式になります。画像ファイルリストのJavaScriptコードだけHTMLファイルに埋め込んでいる理由は、HTMLファイルを目的別に複数セット作ることを想定しています。同じフォルダにHTMLファイルを複数作っても、下記のjs、cssファイルは1つずつあれば良いことになります。

'画像/1.png',

のような形式になります。画像ファイルリストのJavaScriptコードだけHTMLファイルに埋め込んでいる理由は、HTMLファイルを目的別に複数セット作ることを想定しています。同じフォルダにHTMLファイルを複数作っても、下記のjs、cssファイルは1つずつあれば良いことになります。

styles.css （スタイルシートファイル）

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background-color: white;
}

#slideshow {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    overflow-y: auto;
}

#slide {
    max-width: 1175.33px;
    height: auto;
}

body, html {

margin: 0;

padding: 0;

height: 100%;

overflow: hidden;

background-color: white;

}

#slideshow {

display: flex;

justify-content: center;

align-items: flex-start;

height: 100%;

overflow-y: auto;

}

#slide {

max-width: 1175.33px;

height: auto;

}

ポイントとしては、6行目のbackground-colorを変更すると、ウインドウの余白部分の色がかわります。実際にそのサイトでウインドウを幅広くした時の背景色にあわせるとより本物っぽく見えるでしょう。

もうひとつ重要なのが18行目のmax-widthの値です。単純に100%とかだとウインドウ幅一杯に広がってしまうので、なんらか実際の表示にスケールを固定したいです。画像キャプチャに使うツールにもよりますが、今時のディスプレイは画像のピクセル数と表示サイズが1:1ではありません。例えば画像ファイルの横ピクセル数が1763pxでした。これをそのままmax-widthにいれると実際より大きく表示される場合があります。これは例えばWindowsならディスプレイ設定画面の「拡大/縮小」設定値に応じて調整する必要があります。写真のように150%だった場合、1.5倍に拡大されているので、max-widthには1763を1.5で割った数値を指定します。

script.js （JavaScriptファイル）

let currentIndex = 0;

const slide = document.getElementById('slide');

function showImage(index) {
    slide.src = images[index];
    slide.onload = () => {
        document.getElementById('slideshow').scrollTop = 0;
    };
}

document.addEventListener('DOMContentLoaded', () => {
    showImage(currentIndex);

    document.addEventListener('click', (event) => {
        if (event.button === 0) { // 左クリック
            if (currentIndex < images.length - 1) {
                currentIndex++;
                showImage(currentIndex);
            }
        }
    });

    document.addEventListener('contextmenu', (event) => {
        event.preventDefault();
        if (currentIndex > 0) {
            currentIndex--;
            showImage(currentIndex);
        }
    });
});

let currentIndex = 0;

const slide = document.getElementById('slide');

function showImage(index) {

slide.src = images[index];

slide.onload = () => {

document.getElementById('slideshow').scrollTop = 0;

};

}

document.addEventListener('DOMContentLoaded', () => {

showImage(currentIndex);

document.addEventListener('click', (event) => {

if (event.button === 0) { // 左クリック

if (currentIndex < images.length - 1) {

currentIndex++;

showImage(currentIndex);

}

});

document.addEventListener('contextmenu', (event) => {

event.preventDefault();

if (currentIndex > 0) {

currentIndex--;

showImage(currentIndex);

}

});

このファイルは基本的にいじらなくて大丈夫です。当初最後のファイルで左クリックすると最初の画像にループする仕様でしたが、連打しがちなのであえてループしないよう修正してもらいました。

画像キャプチャのコツ

後は画像を用意するだけですが、注意するのは毎回同じ幅でキャプチャすることです。縦の長さはバラバラでもスクロールするので構いませんが、横が違うと表示サイズが大きくなったり小さくなったりして見栄えが悪いです。

なので、毎回矩形範囲指定するようなキャプチャーツール／機能（macOSのShift + Command + 4とか）だととてつもなく面倒です。ウインドウ範囲や繰り返し同じ範囲をキャプチャしてくれ、なおかつ連番でファイル名をふって保存してくれると良いです。Windowsだと古くはWinShot辺りでしょうか。Windows11で動くかわかりませんが…

Webサイトの場合、オススメなのはFireShotという拡張機能です。

長いページを自動でスクロールさせて連続キャプチャし、1枚の長い画像につなげてくれる
今みえている範囲だけのキャプチャも可能
ファイル名の初期値を日付や連番など柔軟に設定できる
開発者モードでスマホ表示にしていても使える
有料版もあるが無料版で基本的に充分事足りる

といった特長があります。今回のようなスライドショーを作る以外でも普通に便利です。

■まとめ

マウス完結で簡単に画面遷移スライドショーができるツールをHTML/JavaScript/CSSだけで作成しました。アプリインストール不要でローカルファイルで実行できますし、ブラウザ内で表示されるので、Webサイトのキャプチャなどはそれなりにリアルに提示できます。参加者とモデレーターがそれぞれマウスを持っていれば互いに「ここが～」などとポイントしつつページを行き来できるのも便利だと思います。

そのままWebサイトにアップしてURLを共有すれば誰かに見せるということもそのままできます。リモートUTなどでは遠隔の参加者にアクセスしてもらい、Zoomのリモートコントロールで双方が操作することは可能そうですね。

是非お役立てください。

2024年10月5日

RODE Wireless Pro用ネックストラップハンガー Ver3

RODEのクリップ型ワイヤレスマイクWireless Proをユーザーテスト／インタビュー案件で使用する際、色々な服装の参加者が入れ替わりいらっしゃるので、Tシャツのようなクリップ止めできる胸ポケットも合わせもない服装の方でも対応できるようネックストラップにぶら下げるということをしています。マイクがきちんと上を向いてぶら下がるようにするのに3Dプリンターでハンガーを作っていました。

RODE Microphones ロードマイクロフォンズ Wireless PRO ワイヤレスプロデュアルチャンネルワイヤレスマ…

56,364円(11/21 21:34時点)

■設定した要求仕様

■完成したコード例

index.html （HTMLファイル）

styles.css （スタイルシートファイル）

script.js （JavaScriptファイル）

画像キャプチャのコツ

■まとめ

■デジタルワイヤレスマイクは機種毎に遅延時間に結構差がある！

■Auditionで追加検証

■まとめ

■市販品で作る

再生ステータス表示

キーボードショートカットの変更

ログ・インポート時のダイアログの挙動変更

ショートカット一覧を作成

■結果比較

■精度

■処理速度、使用リソース

■使用感

■単語学習（まだ難あり）

■まとめ