📱スマホで /stats のグラフをタップすると違う場所がハイライトされる? (実機で要確認)

[yasulab]

ちょっと挙動がおかしいかも...? 👀💭📱 (iPhone XS 実機で確認)

[nacchan99]

こちら、調査してみます🙌

[nacchan99]

📱 確認環境

• iPhone 15（実機）
• Google Chrome / Safari

📊 挙動

• 棒グラフ → タップした位置の値が正しくハイライトされる
• 折れ線グラフ → タップした位置と異なる点がハイライトされる

[nacchan99]

@claude 現在 /stats ページのグラフについて調査しています。
実機（iPhone15）で確認したところ、棒グラフはタップした位置が正しく反応するのに、折れ線グラフはタップ位置と違うポイントがハイライトされます。
モバイル環境で折れ線グラフのタップ座標がズレる典型的な原因や、推奨される解決方法があれば、教えて欲しいです。

[claude]

Claude finished @nacchan99's task —— View job

---

📋 タスクリスト

• /stats ページの実装を確認
• 使用されているグラフライブラリを特定
• モバイル環境での座標ズレの原因を調査
• 推奨される解決方法を提供

---

📊 調査結果

/stats ページのグラフ実装を確認しました。lazy_high_charts gem (v1.5.8) と Highcharts ライブラリを使用していることがわかりました。

🔍 問題の原因

モバイル環境で折れ線グラフのタップ位置がズレる主な原因は以下の通りです：

1. Highcharts のデフォルトタッチ判定

   • 折れ線グラフは棒グラフと異なり、データポイントが小さいため、タッチ判定が難しい
   • Highcharts は近くのポイントを選択する「snap」機能があるが、モバイルでは座標計算がズレやすい

2. ビューポート変換の問題

   • モバイルブラウザのピンチズームや画面回転により、座標系の変換が正しく行われない可能性
   • 特に width: 600 で固定されているチャートがビューポートでスケーリングされる際に問題が発生

3. イベント座標の差異

   • タッチイベントの touchstart/touchmove と マウスイベントの座標系が異なる
   • Highcharts の古いバージョンではこの差異が適切に処理されていない可能性

💡 推奨される解決方法

1. plotOptions.line.stickyTracking を有効化

# app/models/high_charts_builder.rb
f.plotOptions(
  line: {
    stickyTracking: true,  # タッチ/マウスの追従を改善
    findNearestPointBy: 'xy',  # x,y両方向で最近傍点を探す
    marker: {
      enabled: true,  # データポイントを常に表示
      radius: 6       # タッチしやすいサイズに
    }
  }
)

2. tooltip の共有モードを有効化

# 同じX座標のすべての系列を表示（タップ精度の問題を軽減）
f.tooltip(
  shared: true,
  crosshairs: true
)

3. レスポンシブ設定の追加

# チャートをレスポンシブに
f.chart(
  width: nil,  # 固定幅を削除
  alignTicks: false
)
f.responsive(
  rules: [{
    condition: {
      maxWidth: 500
    },
    chartOptions: {
      plotOptions: {
        line: {
          marker: {
            radius: 8  # モバイルではさらに大きく
          }
        }
      }
    }
  }]
)

4. タッチイベントの最適化（フロントエンド）

// app/views/stats/show.html.erb に追加
Highcharts.setOptions({
  chart: {
    events: {
      load: function() {
        // iOS Safari のタッチイベント最適化
        if ('ontouchstart' in window) {
          this.container.style.touchAction = 'auto';
        }
      }
    }
  }
});

⚠️ 補足情報

• 現在使用中の lazy_high_charts gem (v1.5.8) は2014年リリースの古いバージョンです
• 最新の Highcharts にはモバイル対応が大幅に改善されています
• 可能であれば、gem のアップグレードも検討することをお勧めします

これらの対策を段階的に試すことで、モバイル環境での折れ線グラフのタップ精度が改善されるはずです。