増井ラボノート コロンブス日和

第12回 SmoothSnap

この記事を読むのに必要な時間:およそ 2 分

時刻を細かく設定する

前述のように,時/分/秒の設定は86,400通りの可能性がありますから,これを1つのスライダで設定することは困難です。このため,乗換案内のように時刻指定が必要なサービスでは,図6のようにメニューを利用して時刻指定を行うことが多いようです。

図6 時刻設定の例

図6 時刻設定の例

SmoothSnapに対応したスライダのノブを動かそうとするとき,マウスをクリックしたあとのマウスの移動距離が少ない場合は微細な調整が可能であり,移動距離が大きくなると粒度が粗くなって分単位/時間単位でスナッピングするようになっているので,スライダのノブを動かすだけで秒単位で時刻を設定できます図7⁠。

図7 ノブのスライドでさまざまな時刻を設定する

初期状態

初期状態

1秒単位の設定

1秒単位の設定

10秒単位の設定

10秒単位の設定

1分単位の設定

1分単位の設定

10分単位の設定

10分単位の設定

1時間単位の設定

1時間単位の設定

「12:34:56」のように細かい分/秒までを正確に指定したい場合,まずノブを大きく動かしてスナッピングを活用して目的の時刻に近いキリ時刻(e.g. 12:00:00)まで移動し,一度マウスを放してから再度ノブを動かすことにより目的の時刻にさらに近いところ(e.g. 12:30:00)まで移動し,……という操作を繰り返すことによって徐々に目的の時刻に近付けていくことができます。

おおまかな粗い操作をするとキリ時刻を指定でき,細かい操作を繰り返すと詳細時刻を指定できることになるのは,微妙な操作をするほど細かい調整が可能なので,人間の直感に近く感じられます。

大きな文書のスクロール

大きな文書が1ページのWebページになっているとき,その構造を把握しながらブラウジングを行うのはたいへんです。

図8は,私が昔書いた30個のWeb記事を並べて1つのページにしたものの一部をブラウザで表示している様子を示しています。ブラウザ画面では大きなWebページのごく一部しか見えていないため,スクロールを行いながらページ全体の構造を把握するのはかなり困難です。

図8 Web記事のスクロール

図8 Web記事のスクロール

右側の画面では章タイトル「(第28回……」)が見えているのでだいたいどのあたりをブラウズしているのかがわかりますが,左側の画面はタイトルが見えていないので,ブラウザ画面を見るだけではどの章なのかがわからず,上下にスクロールして初めて位置がわかることになります。

SmoothSnapを利用して同じページをブラウジングしている様子を図9~図12に示します。スクロールバーのノブをドラッグしたとき,ノブの移動量が小さい場合は通常の場合と同様にスクロールが行われますが,移動量が大きい場合は章や節の先頭でスクロールがスナッピングするため,常に<h2><h3>が画面のトップに位置することになり,全体的にどういう章や節で構成されているのかを容易にブラウズして把握できます。

図9 Web記事のスクロール

図9 Web記事のスクロール

図10 Web記事のスクロール

図10 Web記事のスクロール

図11 Web記事のスクロール

図11 Web記事のスクロール

図12 Web記事のスクロール

図12 Web記事のスクロール

SmoothSnapの期待

AlphaSliderのような手法では,標準的なスライダノブ以外に微調整用の特殊なGUI部品を使用していますが,SmoothSnapスライダもスクロールバーも外見は標準のものと変わりがなく,スナッピングと微調整の挙動が違うだけですから,特殊な前提知識なく利用できることが期待されます。

SmoothSnapは原理が単純であり,ブラウザのJavaScriptで簡単に実装できるのも利点でしょう。SmoothSnapは筆者のWebページで実際に使ってみることができます。汎用ライブラリとしてはまだ準備できていませんが,要望が多ければ開発したいと思っています。

スライダやスクロールバーが発明されてから何十年もたっていますが,画期的な改良は行われていないようです。しかしまだまだコロンブスの卵的な細かい改善は可能だと思われますので追及していきたいと考えています。

Software Design

本誌最新号をチェック!
Software Design 2020年6月号

2020年5月18日発売
B5判/176ページ
定価(本体1,220円+税)

  • 第1特集
    入門! Rust
    メモリ安全とパフォーマンスを両立するしくみとは?
  • 第2特集
    プロフェッショナルに訊く
    テストコードの流儀
  • 第3特集
    低レイヤソフトウェア開発入門(後編)
    Linuxカーネルを読み解く,OS・ベアメタルアプリを創る
  • 短期連載
    はじめよう,高速E2Eテスト
    【1】Seleniumで体験するE2Eテスト――速度の課題と並列化による対策
  • 短期連載
    スタートアップのためのAWSテクノロジー講座
    【2】コンテナ導入に向けた現実的な方法を知る

著者プロフィール

増井俊之(ますいとしゆき)

1959年生まれ。慶應義塾大学環境情報学部教授。ユーザーインターフェースの研究者。東京大学大学院を修了後,富士通半導体事業部に入社。以後,シャープ,米カーネギーメロン大学,ソニーコンピュータサイエンス研究所,産業技術総合研究所,Appleなどで働く。2009年より現職。携帯電話に搭載される日本語予測変換システム『POBox』や,iPhoneの日本語入力システムの開発者として知られる。近著に『スマホに満足してますか? ユーザインターフェースの心理学』。