[横向き編] 8インチタブレットで擬似的にFold7を再現してみる

8インチタブレットでの擬似Fold7再現の続きです。縦向きはうまくいったので次は横向きを試してみます。

(縦向き編)8インチタブレットで擬似的にFold7を再現してみる

まずは解像度・表示領域の確認

Fold7系を横向きに持った際のブラウザの表示領域は概ね次の通りです。

CSS viewport 833*618px
スクショの解像度:2000*1483px

(タブレットで撮ったスクショ)

今回は、開発者向けオプションの「最小幅」は触りません。縦に持っても横に持っても最小幅は縦向きの際に調整した600dpにしておきます。

タブレット横向き、画面分割で2/3表示にしたときの表示領域
CSS viewport 786*648px
スクショの解像度:1257*1037px

(タブレットで撮ったスクショ)

ということで、縦向きの時ほどで正確ではありませんが、Fold7の横向きに持った時に近い感じにはなりそうです。

次に画面分割

続いて、横向きの画面を左右に分割し、左側にVivaldiを配置します。
分割の境界を画面の右から1/3程度の位置にすると、Vivaldiの表示領域がFold7を開いて横向きにした状態とだいたい同じになりました。

横向き固有の問題

MONO0373(このサイト)で最もスクロールを頻繁に使うのは

ARTICLE │ LIST │ MENU

という3カラムのうち、ARTICLEの部分です。
この部分はタブレットを横に持ってブラウザを画面分割の左側に置くことで左手の親指で操作ができます。

ところが、LISTとMENUは画面の中央に寄っているため、左右どちらの親指でも自然に届かせることができません。

「画面幅が広いために操作したい場所に指が届かない」

という問題が横向きにはありました。

何か解決策はないかと実機を触りながら試行錯誤しているうちに、あることに気づきました。

左手を少し上方向へずらすと人差し指がボリュームボタンに届く。

そこで、Androidアプリの中にボリュームボタンにスクロールを割り当てられるものはないかと探してみると、けっこういろいろありました。ただ、MONO 0373は

ARTICLE │ LIST │ MENU

の3つのカラムがそれぞれ独立してスクロールする構造になっているので、単純にブラウザをスクロールするだけのアプリでは問題の解決には至らず、もうひとひねりする必要がありました。そして、さらにいろいろ調べたり考えたりして、最終的に

画面上の指定の位置で、スワイプを発動できるアプリならうまくいくのでは。

という考えに行きつき、調べてみるとそれを完璧に実現できるアプリがありました。それがKey Mapperです。

Key Mapperで解決

Key Mapperは、端末の物理ボタンに別の操作を割り当てることができます。
今回は音量ボタンで操作がしたいので、音量ボタンにどのように操作を割り当てるかを考えました。

ARTICLEには左手親指で直接操作できるので除外して、次の通り割り当てる方針にしました。

ARTICLE → 左手親指
LIST → 音量アップボタン
MENU → 音量ダウンボタン

また、それぞれの音量ボタンについて、一度押すと下方向へスクロール、長押しで上方向へスクロール、と割り当てることにしました。

設定方法

まず、音量アップボタンの1回押しに、下方向へのスクロールを登録します。

「トリガー」タブにTap to record rigerと表示された部分をタップするとPress your keyと表示されるので音量アップボタンを押します。
するとVolume Upがトリガーとして登録されます。
下の方に1回押し、2回押し、長押しを選ぶメニューがありますが、ここでは1回押しのままにします。

次にActionタブでadd actionを押して、Swipe screenを選択します。
指をどこからどこまで動かすかの指定画面が開くのでつぎのとおり指定します。

startX → 750
startY → 1080
endX → 750
endY → 0
duration → 500ms

設定内容は、画面の左から (750px) の位置で、下から (1080px) の位置から (0px)の位置まで 、0.50秒かけて指を上方向へ動かすという操作です。
縦方向だけを動かすので、startX と endX は同じ 750 にしています。

これで、音量アップボタンを1回押すと、Webページが下方向へ大きくスクロールします。

長押しで上方向へ戻る

次に、同じ音量アップボタンの長押しに、逆方向のスワイプを割り当てます。

上記の手順と同じ要領で設定を進めて、Volume Upがトリガーとして登録されたら、下の方のメニューで長押しを選びます。

Actionタブでは以下の通り設定します。

startX → 750
startY → 190
endX → 750
endY → 1080
duration → 500ms

設定内容は、画面の左から (750px) の位置で、上から (190px) の位置から (1080px)の位置まで 、0.50秒かけて指を下方向へ動かすという操作です。つまり、1回押しとは逆方向のスワイプになります。

なぜ startY は「0」ではなく「190」なのか

ここは少しハマったポイントです。

最初は逆方向のスワイプの開始位置を、startY = 0 としていました。
ところが、画面の一番端である 0pxから始めるとうまくスワイプとして認識されずにエッジのタップと認識され通知画面が開いたりしていました。

そこで、startY = 190 に変更することで正常に動作しました。画面の端ギリギリではなく、少し内側からスワイプを開始するのがポイントでした。

これで音量アップボタンだけで記事リストを上下にスクロールできるようになりました。

音量ダウンボタンにも同様の設定をする

音量ダウンボタンの方は、基本的に音量アップと同じことを行い、startX と endX だけ 1000にしました。(左から1000pxの位置でスワイプを実行するということです)

Quick Cursorでタップ問題も解決

この時点で、MENUとLIST部分のスクロールについては音量ボタンで解決ができましたが、もう一つ

記事を選ぶ
MENUの項目を選ぶ
リンクをタップする
ボタンを押す

といった操作で必要な画面をタップするという操作ができない問題が残りました。

それを解決してくれたアプリがQuick Cursorです。

Quick Cursorは、画面の端からカーソルを呼び出し、画面の広い範囲を片手で操作できるようにするアプリです。これなら、画面の遠いところに指を伸ばす必要がありません。

画面の右親指が届く場所からカーソルを呼び出して、

カーソルを移動
    ↓
LISTの項目を選択

あるいは、

カーソルを移動
    ↓
MENUの項目を選択

という操作ができます。これで、今まで指が届かなかったLISTやMENUもタップできるようになりました。

まとめ

縦向きの設定手順

タブレットを縦向きにする
開発者向けオプションの「最小幅」を調整する
Vivaldi(ブラウザ)を起動する
Androidの画面分割を開始する
上下分割にして、Vivaldiを下側に配置する
分割境界を画面上から約1/3の位置に調整する
MONO 0373を表示する

これでVivaldiの表示領域がFold7を開いた状態とほぼ同じになります。ARTICLE・LIST・MENUを1画面に表示し、それぞれ独立してスクロールできます。

横向きの設定手順

タブレットを横向きにする
Vivaldiを起動する
Androidの画面分割を開始する
左右分割にして、Vivaldiを左側に配置する
分割境界を画面右から約1/3の位置に調整する
MONO 0373を表示する

これで、Vivaldiの表示領域がFold7を横向きに持った場合とほぼ同じになります。

以上で8インチタブレットによるFold7の疑似的な再現は完了です。

ところで、今回使っている8インチタブレットがなぜ古そうな機種なのかについて短めの記事を書いていますのでよかったらご覧ください。

Fold7の疑似再現に使用している8インチタブ

🗂  ガジェット

↓

Getting Started

記事は右側のリストメニューから探せます。
初めての方は下のおすすめ記事からどうぞ。

Quote of the Day

古い端末にも役目はある。

— MONO 0373
↑