Cyclo-Sphereのランキングをパソコンで確認する方法

Cyclo-Sphereのスマートフォン専用ページであるランキング機能を、パソコンでも表示させる方法を紹介する。

Cyclo-Sphereには「ランキング機能」が存在し、自分のMMP (Mean Maximum Power) やペダリング効率が他人と比べてどれくらいの数値なのかを確認することができる。また、年齢別や男女別に絞り込んでランキングを表示させることもできる。

しかし、このランキング機能はなぜかスマートフォン専用ページとなっており、何も設定しなければパソコンからランキングを表示させることはできない。そこで、パソコンからでもランキングを見る方法をChromeとInternet Explorer 11 (IE 11) の場合で紹介する。

なお、検証環境はWindows 7、Chromeバージョン 53.0.2785.143 m (64-bit)、IE 11バージョン11.0.9600.18499で行った。

Chromeの場合

その1: User-Agent Switcher for Chrome

Chromeの拡張機能を使った方法。まず、拡張機能からUser-Agent Switcher for Chromeをインストールする。有効化すると、URLバーの右横にこのようなボタンが現れる。

user-agent-switcher-for-chrome

後は、ログインした状態でCyclo-Sphereを表示させ、iOSかAndroidを選べばスマホ専用ページに遷移する。自動的に再読込されない場合は、手動で再読込みすれば表示されるはずだ。なお、Windows Phoneを選んでもスマホ専用ページは表示されなかった。

その2: Chrome Developer Tools

拡張機能なんてインストールしたくない! という方向けの方法。まず、Chrome Developer Toolsを起動させる。ログインした状態でCyclo-Sphereを表示させ、右クリック→検証を押すか、Windowsの場合F12キー、Macの場合はCommand+Option+Iキーを押す。

設定によっては、ブラウザの下方、もしくは別ウィンドウで表示されるかもしれない。次に、Developer Toolsの左上にあるToggle device toolbarボタンをクリックすると、次のような画面に遷移する。

chrome-developer-tools-02

これで、一応スマホ専用ページは表示できる。しかし、Developer Toolsの仕様かバグかわからないが、このままの状態では年齢や表示させたいデータを選択するドロップダウンリストが表示されず、切り替えることができない。

この現象を回避する方法は2つある。1つ目の方法は、Toggle device toolbarボタンをもう一度押して元の状態に戻すだけ。2つ目の方法は少し手間がかかる。まず、下図を参照してdevice typeを表示させる。次に、devise typeの中からDesktop(Desktop (touch)でも可)を選ぶと選択できるようになる。

chrome-developer-tools-04

IE 11の場合

IE 11の場合は、Chromeの2番目の方法とほぼ同じだ。まず、F12を押して開発者ツールを起動させ、エミュレーションタブを選択する。

ie-11-01

次に、ブラウザープロファイルをWindows Phoneに切り替えることで、スマホ専用ページに遷移することができる。

ie-11-02

Chromeの場合と違って、ドロップダウンリストは普通に選択することができる。

まとめ

Cyclo-Sphereのランキングをパソコンで確認する方法をいくつか紹介した。要するに、ブラウザのユーザーエージェントをモバイルOSに切り替えれば表示させることができる。この方法は、Cyclo-Sphereに限らず一般的に使える方法なので、覚えておいて損は無いだろう。