iPhoneのSafariブラウザにAtCoderのお気に入り一覧を移動する

f:id:yuji9511yuji:20190805220437p:plain:h400

これはなに

AtCoderのお気に入り登録は普段PCで使っているブラウザで行うと思いますが、このお気に入り一覧をiPhoneSafariでも見られるようにしようという小ネタです。

きっかけ

AtCoderのお気に入り一覧は順位表を確認するときによく見ることが多いと思うんですが、例えば自分が用事があって参加できていないときにも周りの人たちの結果って気になりますよね。そういったときにスマホの順位表を覗くのですが、お気に入りの欄がまっさらで後悔したなんてこと、ありませんか?(僕はあります

なので、今ブラウザに登録されているお気に入りデータをスマホのブラウザにも反映させることができたら幸せになるんじゃないかなーと思ったのがきっかけです。

やること

お気に入り一覧はローカルストレージというブラウザ内部のDBに保存されています。なので別ブラウザから開くとお気に入りの内容は共有されていません。このローカルストレージからお気に入り一覧を取り出してスマホのブラウザのローカルストレージに貼り付けるのが今回やることです。それだけです。

準備するもの

やり方

1. 元のお気に入りデータをPCのブラウザから取っておきます。
SafariのWebインスペクタを開き、「ストレージ」タブ > ローカルストレージ > atcoder.jpをクリックします。キーに"fav"と書かれている行のデータを見ると、今まで登録したお気に入りした人たちの名前がjson形式で格納されていることがわかります。この値の部分を全てコピーしてテキストとしてどこかに貼り付けておきます。
Safariの開発タブがない場合はSafariのメニュー > 環境設定 > 詳細からメニューへの追加が可能です。
Chromeの場合もデベロッパツールを使えば似たような方法で取得ができます。

f:id:yuji9511yuji:20190805213517p:plain
SafariのWebインスペクタ


2. iPhoneの設定 > Safari > 詳細をタップし、Webインスペクタと書かれている項目をオンにします。

3. お気に入り情報を使っているAtCoderの該当ページ(順位表のページとか)を開いた状態で、ケーブルを用いてPCとiPhoneを接続します。

4. PCのSafariの開発タブから自分のiPhone端末の名前を選択し、該当ページのurlを選択します。urlをクリックすると先ほどのブラウザのWebインスペクタと似たような画面が開きます。これがiPhoneSafariのインスペクタです。
(自分がやってるときにこのインスペクタになにも表示されない状態に何回かなりました。ブラウザの再起動とか色々やったら出るようになりました)

5. 先ほど取っておいたPCブラウザのお気に入りデータのテキストをローカルストレージのfavの行にペーストします。

これでiPhoneSafariにお気に入り一覧が反映されるようになりました!

おわりに

いかがでしたか? これで外出時でも誰か冷えてるヤツいないかなーって確認することができます!