iOS Safariで楽にスーパーリロード(キャッシュクリア)をする方法【ショートカット作成】

ショートカット
ショートカット

iOSのSafariは、iPhone、iPadを使用しているユーザのほぼ9割くらいは使っているであろうブラウザです。

iOSで制作中のWebページの最新状態を確認したいときは、このキャッシュを都度「クリア」、つまり一時保存データを削除し、
最新のデータを取得するようにしなければなりません。

なので、最新版のご確認をいただく際には、クライアントさま側でブラウザのキャッシュを手動でクリアしていただく方法があります。

ほかに、エンジニア側で、画像、css、jsの呼び出しをしているコードに任意文字のパラメータを付与することで、
キャッシュではなく最新のデータを取得させることも可能なのですが、こちらの方法は、
変更の都度、更新させたいファイル数分のパラメータの文字を更新しなければいけないので、
頻繁に更新しては確認、を繰り返すようなフローでは、この更新作業が毎回はさまれるだけでも地味に神経が消費していきます。

今回は、このようなお悩みを解消する機能を紹介します。以下のようなiOSに備わっている純正機能「ショートカット」を使用します。

1. キャッシュクリアが必要になる理由

ウェブページのキャッシュは、ページの読み込み速度を向上させるために一時的に保存されるデータです。このため、Webページ内で引用しているファイルのデータの更新がされない場合があります。そのさいはキャッシュクリアをしなければ、ブラウザ上でデータの最新状態の確認ができません。

補足1)

画像ファイルやCSSファイル、JSファイルは、「プライベートブラウズ」や「シークレットモード」にしていない限りは、ブラウザの「キャッシュ」というメモリ領域に一時保存されます。

「プライベートブラウズ(iOS Safari)」や「シークレットモード(Chrome)」を使用している場合、
ブラウジングセッション中に保存されたキャッシュ、履歴、Cookie、およびサイトデータはセッションが終了すると削除されます。
つまり、これらのモードを使用している間にキャッシュは一時的に保存されるものの、モードを終了すると自動的にクリアされます。

補足2)

Shopifyでは本当にこの部分も優秀で、
画像やCSS、JSの更新をしたさいに、意識しなくても最新のデータで取得されるようになっています
(まれになんらかの理由で特定地域のCDNキャッシュの更新が遅れている場合はあるかもしれません)。

Shopify以外の制作(Wordpressなど)をすると、
このキャッシュを最新の状態にしてクライアントさまにご確認をいただく必要があります。

2. Windows Chrome, Mac Safari それぞれのキャッシュクリアのショートカット

Windows Chrome:

Ctrl + Shift + R

これだけでOKです。または、

  1. Ctrl + Shift + Deleteを押します。
  2. 「閲覧履歴データの削除」ウィンドウが表示されます。
  3. 「キャッシュされた画像とファイル」にチェックを入れ、「データを消去」をクリックします。

Mac Safari:

Shiftキーを押しながらSafariブラウザのリロードボタンをクリック

これだけでOKです。または、

  1. Command + Option + Eを押します。
  2. 「開発」メニューから「キャッシュを空にする」を選択します

※MacとiPhoneをUSB接続し両方の端末のSafariを開くと、Mac上Safariの「開発」タブにてiPhone Safariの開発者ツールを開けますので、この状態であればMac Safari側のリロードボタンをShiftキーを押しながらクリックする方法でも、iPhone Safariのキャッシュクリアが可能です。

3. iOS, AndroidのChromeのキャッシュクリアの方法

  1. 右下の「…」をタップします。
  2. 「設定」を選択します。
  3. 「プライバシー」をタップし、「閲覧履歴データの削除」を選択します。
  4. 「キャッシュされた画像とファイル」にチェックを入れ、「閲覧履歴データを削除」をタップします。

4. 通常のiOS Safariのキャッシュクリアの方法と、その面倒さ

通常のiOS Safari:

  1. iOSの「設定」を開きます。
  2. 「アプリ」のリスト内の「Safari」を選択します。
  3. 「履歴とWebサイトデータを消去」をタップします。
  4. 確認のため「履歴とデータを消去」をタップします。

上のChromeと比べて、iOS Safariのキャッシュクリア方法は、毎回「設定」アプリを開く必要があり、手間がかかります。

スクロールやタップの数が実に多く、検証で何度もiOS Safariのキャッシュクリアをすることを考えると、操作が冗長すぎます。

5. iOS 「ショートカット」機能とは

iOSの「ショートカット」機能は、日常的なタスクを自動化し、効率化するためのアプリです。ユーザーは自分でショートカットを作成することができ、複数のアクションを一度に実行することが可能です。

6. ショートカットを追加する方法

  1. 「ショートカット」アプリを開く
    iPhoneで「ショートカット」アプリを開きます。
  2. 新しいショートカットを作成
    「ショートカットを作成」ボタンをタップします。
  3. アクションを追加
    「アクションを追加」をタップし、「Web」を選択します。次に、「URLを開く」を選びます。
  4. キャッシュクリアのスクリプトを追加
    「URLを開く」アクションのURLフィールドに、以下のスクリプトを入力します
javascript:location.reload(true)

このような登録状態になっているはずです。

7. Safari上でショートカットを呼び出す方法

それでは、作成したショートカットをSafari上で呼び出してみましょう。

  1. Safariの共有メニューを開く
    Safariで任意のページを開き、下部の「共有」アイコンをタップします。
  2. 「ショートカット」アクションを選択
    「ショートカット」アイコンを選択し、作成したキャッシュクリアのショートカットを選びます。
  3. ページをリロードしてキャッシュをクリア
    ショートカットが実行され、ページがリロードされキャッシュがクリアされます。

おつかれさまでした!大変でしたが、こうしてあなたのSafariではショートカット呼び出しの操作一発で、キャッシュクリアできるようになります!

Webサイト制作を依頼したい方へ

PRYTHM WORKS(プリズムワークス)は、東京都墨田区、東京スカイツリーのふもとにあるWebコンテンツ制作事務所です。

華々しいおしゃれなECサイトをはじめ、アンダーグラウンドな案件まで幅広くご依頼をいただき、どんな案件でも真心・丁寧・楽しくを理念に掲げて制作しております!

作りたいサービスはあるけど、まずは費用感が知りたい!という方も、まずはお問い合わせください!

mail@prytymworks.tokyo

PRYTHM WORKSが手掛ける仕事の一部をご紹介します。

制作のご依頼者様用 費用かんたんお見積もりフォーム

おそらく本記事を読まれるのは、制作の現場の、法人またはフリーの、プロデューサーの方、ディレクターの方、エンジニアの方がほとんどかと存じます。
いつもおつかれさまです!そして本記事をお読みいただきありがとうございます。
紹介した記事の内容について、またはその他制作のご依頼について、以下のフォームより簡易お見積もりができます!
試算だけならフォーム送信しなくてもできますので、ぜひ試しにいかがでしょう?

お仕事をご希望の制作者様用 お問合せフォーム

また、まずはライトなご相談から…ということであれば、こちらのコンタクトフォームからお気軽にどうぞ!ご縁を大切にしてご返信いたします!

    ShopifyでのECサイト制作を行うならPRYTHMWORKS(プリズムワークス)へ

    ShopifyでのECサイト制作を外注しようとお考えの方は、PRYTHMWORKS(プリズムワークス)にご依頼ください。高品質なWebサイト制作で、お客様のビジネス成長を支援する会社です。Shopifyを使ったECサイト制作に力を入れており、売上向上に貢献するECサイト構築を代行いたします。豊富な経験と実績にもとづき、お客様のニーズに最適なECサイトを構築しますので、費用相場や制作事例など、気になることがございましたらお気軽にお問い合わせください。移行のご相談も承っております。

    事業内容EC/Webサイトの構築、管理保守
    代表社員吉川直人
    法人事務所所在地〒150-0001
    東京都渋谷区神宮前六丁目23番4号桑野ビル2階
    設立日2023年(令和5年)7月3日
    沿革2020年(令和2年)10月
    個人事業主PRYTHMWORKS事業開始
    2023年(令和5年)7月
    合同会社PRYTHMWORKS設立

    会社に関するご連絡は以下よりお願いいたします。

    mail@prytymworks.tokyo


    お問い合わせ用LINEはこちらからどうぞ!

    お問い合わせ用LINEはこちらからどうぞ!

    LINE
    タイトルとURLをコピーしました