Skip to content

Pocket Mode

スマートフォンやタブレットからアノテーションできます。タッチデバイスは自動的に、スワイプできるカードスタック、親指の届く位置のコントロール、同期付きのオフラインアノテーション、PWAとしてのホーム画面インストールを備えたモバイル向けの画面に振り分けられます。

v2.7.0の新機能

Potatoはスマートフォンやタブレットからのアノテーションに対応しています。Pocket Mode（ポケットモード）を有効にすると、タスクを開いたタッチデバイスは自動的にモバイル向けのインターフェースへ振り分けられます。親指の届く位置にラベルボタンを置いたカードスタック、スワイプでの移動、自動同期付きのオフラインアノテーション、PWAとしてのホーム画面へのインストールが使えます。デスクトップのユーザーには通常のインターフェースが表示され、何も変わりません。

スワイプできるカードスタック、親指の届く位置のボタン、オフライン同期を、スマートフォンの画面で示した図。

すべてのアノテーションタイプがスマートフォン向きというわけではありません。スパンのハイライトやバウンディングボックスはデスクトップでの作業です。Potatoはこの点をはっきり分けています。タッチ対応のタスクにはモバイルインターフェースを出し、そうでないタスクには劣化したUIの代わりに明確な警告を出します。どちらの場合でも、誰がどの種類のデバイスからアノテーションしているかは管理者ダッシュボードで確認できます。

設定

yaml
pocket:
  enabled: true        # master switch for the mobile interface (default: false)
  auto_redirect: true  # send phones/tablets to /pocket automatically (default: true)
  batch_size: 25       # items fetched per batch; also the offline queue depth (1-200)

モバイルに向いているアノテーションタイプ

タッチ対応（モバイルで提供）デスクトップ専用
radio、multiselect、likert、slider、number、text/textbox、pure_displayspan、画像とバウンディングボックス、動画、音声、multirate、およびそれ以外のすべて

タスクがタッチ対応と見なされるのは、すべてのスキーマが左の列に収まっている場合だけです。デスクトップ専用のスキーマが1つでも混ざっているタスクは、タッチ向けに劣化させることはしません。スマートフォンはリダイレクトされず、このタスクはモバイル向けに最適化されていないという、閉じられる通知が表示されます。

モバイルのアノテーターを想定しているなら、それを前提に設計してください。単一のradioだけのタスクが理想で、1タップが1件のラベル付けになります。

デバイスの振り分けの仕組み

デバイスタッチ対応タスク、pocket有効タッチ非対応タスク
デスクトップ通常のインターフェース通常のインターフェース
スマートフォン / タブレットモバイルインターフェースにリダイレクト通常のインターフェース + 閉じられる警告

判定は2層で行われます。

  1. サーバー側（User-Agent）。 スマートフォンとほとんどのタブレットは自身を名乗るので、デスクトップ用ページが描画される前にリダイレクトされます。APIクライアントや判別できないエージェントはデスクトップ扱いになるため、スクリプトや連携処理がリダイレクトされることはありません。
  2. クライアント側（ポインターの判定）。 一部のタブレットはデスクトップのふりをします。たとえばiPadOSのSafariは自身をMacとして報告します。アノテーションページ上のスクリプトが、そのデバイスの主要なポインターが粗いもの（指）かどうかを調べ、該当すればリダイレクトします。タッチスクリーン搭載のノートPCは主要なポインターがトラックパッドなので影響を受けません。

振り分けの対象は、アノテーションフェーズにいるアノテーターだけです。同意ページ、説明ページ、アンケートページには手を加えません。

デスクトップのユーザーが自分から使うこともできます。pocket対応のタスクでは、ナビゲーションバーに /pocket へのコンパクト表示リンクが表示され、そこではカードスタックが1アイテム1クリックの高速ラベル付け画面になります。モバイルのユーザーはデスクトップサイトリンクで戻れて、その選択はセッションの間保持されます。

モバイルインターフェース

  • カードスタック — 1アイテムにつき1枚のカードです。左にスワイプで次へ、右にスワイプで前へ移動でき、タッチ以外の操作のために矢印ボタンもあります。対応するデバイスでは、保存のたびに触覚フィードバックが確認として返ります。
  • 親指の届く位置のコントロール — ラベルボタンは、実際に親指が届く画面下部3分の1に配置されます。タッチターゲットは48px以上、ノッチのあるスマートフォンではセーフエリアのインセットを守り、prefers-reduced-motion も尊重します。
  • スキーマの描画 — 単一のradioやlikertのタスクは、タップすると自動で次に進みます。複数スキーマのカードでは、すべてのコントロールに加えて明示的な保存して次へが表示されます。
  • オフラインアノテーション — 現在のバッチはプリフェッチされ、localStorageにミラーされます。接続が切れてもアノテーションは続けられ、チップに「オフライン — N件の保存を待機中」と表示され、再接続時にキューが自動で送信されます。Service Workerが初回訪問後にアプリシェルをキャッシュするので、接続がなくてもページは開きます。wifiのあるうちにバッチをプリフェッチしておけばどこでもアノテーションでき、電波の届く場所に戻ってから同期できます。
  • アプリとしてのインストール — ページはWebマニフェストを配信するので、「ホーム画面に追加」で独自のアイコンを持つスタンドアロンのアプリになります。

保存にはデスクトップ用ページと同じ /updateinstance エンドポイントとペイロードを使います。Pocket Modeは新しい書き込み経路を追加しないので、エクスポート、一致度統計、管理者ダッシュボード、品質管理のいずれから見ても、ごく普通のアノテーションです。

デバイスタブ

管理者ダッシュボードにデバイスタブが追加され、アノテーターごとに、最後に確認されたデバイス、デバイス種別ごとの訪問回数、モバイルインターフェースを使った回数、最終確認日時が表示されます。サマリー行には要点が出ます（「12人中3人がスマートフォンまたはタブレットから訪問しています」）。

これは2つの方向で役に立ちます。タスクがタッチ対応でないのに、デバイスタブにスマートフォンからのアノテーターが出ているなら、その人たちは警告を見たうえで続けたということなので、出力を見ておく価値があります。また、訪問はPocket Modeが有効かどうかにかかわらず記録されるので、有効化する前に「Pocket Modeを入れると効果があるか」を判断できます。

データは <output_annotation_dir>/pocket/device_visits.json にユーザーごとの集計だけが保存されます。アイテム単位のトラッキングはありません。

トラブルシューティング

  • スマートフォンがリダイレクトされない。 pocket.enabled と pocket.auto_redirect がtrueであること、タスクがタッチ対応であること（GET /pocket/api/routing が capable: true を返す）、そのセッションでユーザーが「デスクトップサイト」を選んでいないことを確認してください。
  • iPadで初回読み込み時にデスクトップ用ページが出る。 iPadOSのSafariは自身をMacとして名乗るため、サーバー側では捕まえられません。ページのスクリプトが動いた時点で、クライアント側のポインター判定がリダイレクトします。
  • モバイルでは「完了」なのに、デスクトップ用ページには残りのアイテムが表示される。 未同期のオフライン保存が残っている可能性があります。同期チップにキューが表示され、デバイスがオンラインに戻ると送信されます。

参考資料