キャッシュを削除（クリア）してWEBサイトの表示を正常にする方法

Transcription

1 サイトトップ > その他 > ホームページ作成 2017 年 01 月 14 日 改訂 :2017 年 03 月 25 日 改訂 :2018 年 01 月 08 日 キャッシュを削除 ( クリア ) して WEB サイトの表示を正常にする方法 - WEB サイトが正常に見られない場合の対応 - 柳川行雄 内容 1 最初に... 2 (1) ホームページの表示の乱れ... 2 (2) 今回の表示の乱れの原因 キャッシュを削除して表示の乱れを正す具体的な方法... 4 (1)Google 社の Chrome... 4 (2)Microsoft 社の Internet Explorer... 8 (3)Mozilla 社の Firefox (4)Microsoft 社の Edge (5)Opera Software ASA 社の Opera (6)Apple 社の Safari データをリロード ( 再読込み ) して表示を更新する方法 (1)Google 社の Chrome (2)Microsoft 社の Internet Explorer (3)Mozilla 社の Firefox (4)Microsoft 社の Edge (5)Opera Software ASA 社の Firefox (6)Apple 社の Safari 最後に

2 1 最初に (1) ホームページの表示の乱れ ホームページを閲覧しているとき 表示が乱れるという現象はしばしば発生します 図 1-1 は 実務家のための産業保健のサイト のトップサイトの表示ですが 左側の正常な表示画面に対して 右側は大きく乱れていることがお分かりいただけると思います これは ホームページの表示方法を指定するためのファイル (css ファイル ) を修正したために起こった現象です css ファイルを修正することは とくに個人のサイトではよくあり この現象はサイト管理者の頭痛の種となっています 正常な表示乱れた表示 ( 例 ) 図 1-1: 正常な画像と表示が乱れた画像 また WEB サイトを管理者が更新しても ユーザーには元のままの状態が見 えていることがあります この原因も 本質的には図 1-1 の表示乱れと同様な原 因で発生します 本稿では これらの現象を回避するための方法ブラウザの種類ごとに 具体的 に解説します (2) 今回の表示の乱れの原因 この項は やや技術的な内容となりますので 必要なければ読み飛ばして 2 に進んで頂くようお願いします 2

3 ホームページは html ファイル css ファイル jpg ファイルなど 様々なファイルから成り立っています そして これらのファイルで構成されるホームページを閲覧するためのソフトは ブラウザと呼ばれ よく用いられるものとしては Google 社の Chrome や Microsoft 社の Internet Explorer などがあり Windows10 では Edge が標準で添付されています ユーザーがあるホームページを ( 最初に ) 閲覧したとき ブラウザはそのサイトのファイルをキャッシュと呼ばれるエリアに保存します 次にユーザーがそのサイトを閲覧しようとすると 実際のサイトを読みにいくのではなく キャッシュのファイルによって表示します 1) このようにするのは 実際のサイトを読みに行くよりもキャッシュの方が速く読めるので ホームページを高速に表示できるようにするためです ところが このようにすると サイトの管理者が css ファイルを修正したときにも ブラウザにはそのことは分からないため キャッシュに保存された古い css ファイルを利用することとなります css ファイルは サイトをどのように表示するかを定めているファイルなので 画面が正しく表示されないこととなるわけです この場合の問題を解決するためには キャッシュに保存されているデータを 削除 ( クリア ) すればよいわけです キャッシュがクリアされれば ブラウザは 実際のホームページを読みにいくので正常に表示されることになります なお キャッシュに保存されたデータを削除すると その後 一時的に WEB サイトの表示時間が遅れることがあります しかし 最近は家庭でもブロードバンドを使用しているため ほとんど問題となりません つまり キャッシュの内容を削除してもとくに問題となるようなことはありません また 各サイトの内容等が更新されているときには新しい情報を読めるというメリットもあります ただし 各種の会員サイトや買い物サイトを閲覧している途中では キャッシュを削除することは避けて下さい 再び パスワードを要求されたり それまでの買い物情報がクリアされたりすることがあるので注意が必要です 1 実際には設定によります 設定によっては 閲覧するたびに 毎回 実際のサイトのファイルを読み込むようにすることも可能です ただ 当然のことながら読み込みに時間がかかることになります 3

4 2 キャッシュを削除して表示の乱れを正す具体的な方法 以下にブラウザの種類ごとに キャッシュを削除する方法をお示しします た だし 設定によっては 必ずしも画面が同じになるとは限りませんが それほど 大きな違いはないと思います (1)Google 社の Chrome Google 社の Chrome( ) のキャッシュの削除は次のように行います 図 は Chrome で当サイトを立ち上げたところです 設定によっては 画面上部の細かな表示は異なっていると思いますが ここではあまり気にする必要はありません なお 以下のすべてのブラウザに関して 冒頭に当サイトを立ち上げた画像をお示ししていますが 当サイトを起動する必要はありません どのサイトを表示していても効果は同じとなります 2 図 2-1-1:Chrome で当サイトを立ち上げたところ この画面で 右側の最上部にある 図 の赤丸で示したアイコンをクリッ クしてください 2 当サイトのキャッシュだけを削除することはできません ここに紹介する操作ですべてのサイトのキャッシュが削除されますが 問題となるようなことはありません 4

5 図 2-1-2:Chrome の右上の表示 そうすると 図 のプルダウンメニューが現れますから 設定 (S) を クリックしてください 図 2-1-3: プルダウンメニュー 図 のような設定の画面が現れます 下にスクロール 5

6 図 2-1-4: 設定の画面 下の方にスクロールして 詳細設定を表示 をクリックします なお 図 とは違って 実際の画面には青い枠は表示されません 図 2-1-5: 詳細設定を表示 さらに下方向にスクロールして 閲覧履歴データの消去 をクリックしま す 図 2-1-6: プライバシー そうすると図 の 閲覧履歴のデータ削除 のウインドウが表示されま す 6

7 図 2-1-7: 削除する項目の選択 特に問題がなければ キャッシュ等を削除する期間は すべて を選択して ください 1 して 2 ここを選択 図 2-1-8: 消去する期間の選択 次に キャッシュされた画像とファイル のチェックボックスにチェックを入れて選択します なお 他のチェックボックスは必要に応じてチェックを入れてください 入れなくても問題はありません Cookie やパスワードのチェックを入れると 他のサイトを次に閲覧したときに それまで求められなかったパスワードを求められることがあるかもしれませんので留意してください ここを選択 図 2-1-9: キャッシュされた画像とファイル 最後に図 の右下にある データを消去 のボタンをクリックすれば キ ャッシュは消去されます 7

8 図 : キャッシュされた画像とファイル (2)Microsoft 社の Internet Explorer Microsoft 社の Internet Explorer( / 以下 IE と略記します ) で当サイト を立ち上げると図 のようになります 図 2-2-1:IE で当サイトを立ち上げたところ この画面の右上にある 図 のアイコンをクリックしてください 図 2-2-2: 設定のアイコン そうすると 図 のようなメニューが現れますので インターネットオ プション (O) をクリックしてください 8

9 図 2-2-3: 設定のメニュー そうすると インターネットオプションのウインドウが表示されます 図 2-2-4: インターネットオプション インターネットオプションの左上にある 全般 タブをクリックしてください 図 2-2-5: 全般タブ 9

10 す 次に インターネットオプションの下方にある 削除 (D) をクリックしま 図 2-2-6: 削除 (D) ボタン 閲覧履歴の削除のウインドウが表示されます 図 2-2-7: 閲覧履歴の削除 インターネット一時ファイルおよび WEB サイトのファイル (T) のチェッ クボックスを選択してください ここを選択 図 2-2-8: インターネット一時ファイル 10

11 最後に図 の右下にある 閲覧データを消去する のボタンをクリックす れば キャッシュは消去されます 図 2-2-9: 削除ボタン (3)Mozilla 社の Firefox Mozilla 社の Firefox( ) のキャッシュの削除は次のように行います 図 は Firefox で当サイトを立ち上げたところです 設定によっては 画面上部の細かな表示は異なっていると思いますが ここではあまり気にする必要はありません 図 2-3-1:Firefox で当サイトを立ち上げたところ この画面で 右側の最上部にある 図 の赤丸で示したアイコンをクリッ クしてください 図 2-3-2:Firefox の右上の表示 11

12 そうすると 図 のメニューが現れますから オプション をクリック してください 図 2-3-3: メニュー 図 のようなオプションの画面が現れます 図 2-3-4: オプションの画面 12

13 左側のメニューにある プライバシーとセキュリティ をクリックします 図 2-3-5: オプション画面左側のメニュー プライバシーの画面に切替わります 図 2-3-6: ブラウザープライバシー画面 画面の中ほどにある 現在の履歴をすべて消去 の文字をクリックします な お 実際の画面では図 とは異なり 青い枠はありません 図 2-3-7: 現在の履歴をすべて消去 そうすると図 の すべての閲覧を消去 のウインドウが表示されます 13

14 図 2-3-8: すべての閲覧を消去 特に問題がなければ 消去する期間は すべての履歴 を選択してください 図 2-3-9: 消去する履歴の期間 次に キャッシュ のチェックボックスにチェックを入れて選択します なお 他のチェックボックスは必要に応じてチェックを入れてください 入れなくても問題はありません Cookie にチェックを入れると 他のサイトを次に閲覧したときに それまで求められなかったパスワードを求められることがあるかもしれませんので留意してください ここを選択 図 : キャッシュ 最後に図 の右下にある 今すぐ消去 のボタンをクリックすれば キャ ッシュは消去されます 14

15 図 : 今すぐ消去 (4)Microsoft 社の Edge Microsoft 社の Edge( ) のキャッシュの削除は次のように行います 図 は Edge で当サイトを立ち上げたところです 設定によっては 画面上部の細かな表示は異なっていると思いますが ここではあまり気にする必要はありません 図 2-4-1:Edge で当サイトを立ち上げたところ この画面で 右側の最上部にある 図 の赤丸で示したアイコンをクリッ クしてください 図 2-4-2:Edge の右上の表示 そうすると 図 のメニューが現れますから 設定 をクリックしてく ださい 15

16 図 2-4-3: メニュー 図 のように右側に設定のメニューが現れます 図 2-4-4: 設定の画面 ( 右側 ) メニューの閲覧データのクリアにある クリアするデータの選択 をクリック 16

17 します 図 2-4-5: 設定のメニュー 画面右側に 閲覧データのクリア のメニューが現れます 図 2-4-6: 閲覧データのクリア画面 17

18 ここで キャッシュされたデータとファイル のチェックボックスを選択し ます ここを選択 図 2-4-7: キャッシュされたデータとファイル 最後に図 の中ほどにある クリア のボタンをクリックすれば キャッ シュは消去されます 図 2-4-8: クリア (5)Opera Software ASA 社の Opera Opera Software ASA 社 3 ) の Opera( ) のキャッシュの削除は次のように行います 図 は Firefox で当サイトを立ち上げたところです 設定によっては 画面上部の細かな表示は異なっていると思いますが ここではあまり気にする必要はありません 図 2-5-1:Opera で当サイトを立ち上げたところ 3 Opera は 2016 年に奇虎 360 社に売却されている Opera Software ASA 社は Opera を開発した会社である 18

19 この画面で 最上部の左端にある メニュー 図 の赤丸で示したとこ ろをクリックしてください 図 2-5-2:Opera の左上表示 そうすると 図 のメニューが現れますから 履歴 (H) にマウスカーソ ルを合わせます ここにマウスカーソルを合わせる 図 2-5-3: メニュー サブメニューの 閲覧データの消去 をクリックします 図 2-5-4: サブメニュー 19

20 そうすると図 の 閲覧データを消去 のウインドウが表示されます 図 2-5-5: 閲覧データを消去 特に問題がなければ 消去する期間は すべての期間 を選んでください 図 2-5-6: 消去する期間 キャッシュされた画像およびファイル のチェックボックスにチェックを入れて選択します なお 他のチェックボックスは必要に応じてチェックを入れてください 入れなくても問題はありません Cookie にチェックを入れると 他のサイトを次に閲覧したときに それまで求められなかったパスワードを求められることがあるかもしれませんので留意してください ここを選択 図 2-5-7: キャッシュされた画像およびファイル 20

21 最後に図 の右下にある 閲覧データを消去 のボタンをクリックすれ ば キャッシュは消去されます 図 2-5-8: 閲覧データを消去 (6)Apple 社の Safari Apple 社の Safari は MAC 用のブラウザです 私は MAC を保有していないので実際に試したわけではありませんが 履歴とキャッシュの削除は簡単にできるようになっています 具体的には 以下の方法でキャッシュをクリアできるはずです 1 メニューバーに 履歴 を選択する 2 表れるメニューの一番下に 履歴を消去 があるので これをクリックする また キャッシュだけを削除したいという場合は次の方法で可能です 1 メニューバーの Safari を選択する 2 表れるメニューの 環境設定 をクリックする 3 環境設定画面 が表示されるので 詳細 タブをクリックする 4 メニューバーに 開発 メニューを表示 のチェックボックスをチェックする 5 メニューバーに 開発 が表示されるので これをクリックする 6 キャッシュを空にする というメニューが表示されるので これをクリックする 3 データをリロード ( 再読込み ) して表示を更新する方法 私の 実務家のための産業保健のサイト では 基本的にコンテンツは pdf フ ァイルで掲示しています pdf ファイルは 適宜 更新していますが 更新した ファイルは元のファイルを上書き保存しています 21

22 ところが 前に元の pdf ファイルを閲覧していると ブラウザはそのファイルをキャッシュに保存しておき 再び その pdf ファイルを閲覧したときには 保存されたファイルを表示します 4 これは pdf ファイルに限らず ホームページの本体部分である html ファイルや png ファイルなどの画像データについても同じです このため 私が html ファイルや pdf ファイルや更新しても ブラウザには更新されていることは分かりませんから 元の旧ファイルを表示することとなります そこで ブラウザの種類ごとに 新しいデータをリロード ( 再読込み ) する方法を以下にお示しします なお Microsoft 社の Internet Explorer を除けば ここでお示しする方法でリロードされるのは そのときに閲覧しているページのデータだけで 他のページや他のサイトのデータが更新されるわけではありません (1)Google 社の Chrome Chrome の表示画面は図 のようになっています 図 3-1-1:Chrome で当サイトを表示したところ 画面の左上にある 図 の赤で囲んであるアイコンをクリックしてくださ い 右側のホームのアイコンは設定によっては表示されていないと思いますが 気にする必要はありません これでページは最新のものに切替わります 4 これは設定によります 22

23 図 3-1-2:Chrome でデータをリロードする (2)Microsoft 社の Internet Explorer Microsoft 社の Internet Explorer でデータをリロードする方法は 2 に示した キャッシュを削除する方法と同じです この方法では その後に閲覧するすべて のページが最新のものとなります (3)Mozilla 社の Firefox Firefox の表示画面は図 のようになっています 図 3-3-1:Firefox で当サイトを表示したところ 画面の上中央付近にある 検索ボックスの右側の図 の赤で囲んであるア イコンをクリックしてください これでページは最新のものに切替わります 図 3-3-2:Firefox でデータをリロードする 23

24 (4)Microsoft 社の Edge Microsoft 社の Edge の表示画面は図 のようになっています 図 3-4-1:Edge で当サイトを表示したところ 画面の左上にある 図 の赤で囲んであるアイコンをクリックしてくださ い これでページは最新のものに切替わります 図 3-4-2:Edge でデータをリロードする (5)Opera Software ASA 社の Firefox Opera software 社の Opera の表示画面は図 のようになっています 24

25 図 3-5-1:Opera で当サイトを表示したところ 画面の左上にある 図 の赤で囲んであるアイコンをクリックしてくださ い これでページは最新のものに切替わります 図 3-5-2:Opera でデータをリロードする (6)Apple 社の Safari Apple 社の Safari でデータをリロードする方法は 2 に示したキャッシュを 削除する方法と同じです この方法では その後に閲覧するすべてのページが最 新のものとなります 4 最後に 2017 年に入ってから 私のサイトで トップページのメニューを CSS だけ で作る 多階層 なドロップダウンメニュー を参考にさせて頂いて ドロップ ダウン方式に切り替えたことを始めとして 様々に変更してきました 詳細は ホームページ作成入門 2 本サイトの大改修の記録 に記載してあり ます このとき css ファイルを大きく修正しています ところが ユーザーの 25

26 側でファイルのキャッシュをクリアして頂かないと ブラウザで表示したとき 画面が乱れることになります 実は ホームページ側で対応することも不可能ではありません そのひとつは css ファイルの場所か名称を変更してしまえば ブラウザは新しい css ファイル を読むため 画面が正常に表示されます また html 側でユーザーにキャッシュを保存させないような設定をすることも可能なのですが いずれも一長一短があり 根源的な解決とはなりません そこで それぞれのブラウザについてキャッシュをクリアする方法を紹介しました この資料は 実務家のための産業保健のサイト に掲示されています よろしけ ればサイトの方にもご訪問ください 26