前回は、FTPを使用したデータのアップロード方法と、インデックスファイルの解説をしました。まりなちゃんデータのアップロードとインデックスファイルの作成は完了したのですが、肝心の画像が表示されず困っているところです...。SS先生そうでしたね。その後、ちょっと確認してみたのですが、画像が表示されないのは、やはりファイルのパスが間違っていることが原因のようです。まりなちゃんファイルのパスが原因ですか...。ところで、パスってなんですか?SS先生まだパスについての説明はしていなかったですね。それでは、今回はファイルのパスについての説明からはじめましょう。キャッシュファイルのデメリットルパスってなに?パスは、一言でいうとファイルやフォルダの場所を指し示す経路のことです。以前、ドメインはサーバがインターネット上のどこにあるのかを指し示す住所のようなものだと解説をしました。その時に、手紙を郵送する際には宛先となる住所を記載する必要があるという内容の話をしました。パスもドメインと似た意味合いを持っており、ファイルやフォルダがコンピュータ内のどこにあるのかを指し示す住所のようなものと言えます。どちらも場所を指し示す住所としての役割を持っていますが、パスとドメインでは指し示す対象が違います。[パス]・「ファイルやフォルダ」が「コンピュータ内」のどこにあるのかを指し示す。[ドメイン]・「サーバ」が「インターネット上」のどこにあるのかを指し示す。次の項目で詳しく説明をしますが、パスには「絶対パス」と「相対パス」という、2種類の記述方法がありますので、この機会にぜひ「絶対パス」と「相対パス」の違いを覚えてみてください。絶対パスと相対パス「絶対パス」も「相対パス」も、ファイルやフォルダがどこにあるのかを指し示すという点では同じ役割を持っています。「絶対パス」と「相対パス」では何が違うのでしょうか。それは、「どこを基準にファイルやフォルダの場所を指し示しているか」という部分です。具体的に解説をしてみましょう。「index.html」に記述しているハロウィン画像のパスを確認します。実際に「index.html」をテキストエディタで開いて確認したところ、ハロウィン画像のパスは以下のように記述されていました。#003で、少しだけimgタグについての説明をしましたが、復習もかねて軽くタグの意味をおさらいしてみましょう。imgは画像を表示するタグでした。src属性では表示する画像のパスを指定します。alt属性では、何らかの理由で画像が表示できない場合に表示するテキストを指定します。今回のお話ではあまり関係がないので、alt属性については特に気にしなくても大丈夫です。imgタグのおさらいはこれぐらいにして、「絶対パス」と「相対パス」の解説に戻りましょう。src属性で指定しているパスの部分だけを抜き出すと、以下のようになります。src=”image/Halloween.png”このsrc属性では「image/Halloween.png」のパスにあるファイルを表示するように指定しています。明記はされていないのですが、ここで指定されているパスは「index.html」がある現在の位置を基準として、そこから目的となるフォルダやファイルまでの経路を記述する方式です。このような方式を「相対パス」といいます。それに対し、コンピュータ内のフォルダ構成の頂点(ルート)から、目的となるフォルダやファイルまでの経路を省略することなく記述する方式を「絶対パス」といいます。実際に「image/Halloween.png」を「絶対パス」に変換すると以下のような記述になります。/home/アカウント名/www/image/Halloween.png「絶対パス」と「相対パス」についてまとめると、以下のようになります。[絶対パス]・コンピュータ内のフォルダ構成の頂点(ルート)から、目的となるフォルダやファイルまでの経路を省略することなく記述する方式。[相対パス]・現在の位置を基準として、そこから目的となるフォルダやファイルまでの経路を記述する方式。項目の最初でもお話しましたが、どこを基準にファイルやフォルダの場所を指し示しているかを意識することが違いを見分けるポイントです。まりなちゃん先生、修正したファイルをアップロードしなおしたのですが、やっぱり画像が表示されません...。SS先生もしかすると、ブラウザにキャッシュが残っているのかもしれませんね。まりなちゃんキャッシュ...ですか?SS先生はい、厳密にはキャッシュファイルといいます。次はキャッシュファイルについての説明をしましょうか。画像が表示されない原因はなに?ここからは、画像が表示されない原因について説明をしていきます。画像が表示されない現状のフォルダ構成から確認していきましょう。フォルダ構成をイメージにすると以下のようになります。現状のフォルダ構成では「/home/アカウント名/www」フォルダの中に「index.html」と「Halloween.png」のファイルがあります。次に「index.html」で指定している画像のパスをイメージにすると、以下のようになります。▼「index.html」で指定している画像のパスここで指定している画像のパスは、「/home/アカウント名/www」フォルダの中にある「index.html」を基準とした相対パスで記述されています。src=”image/Halloween.png”この記述では「index.html」があるフォルダに「image」フォルダがあり、さらにその「image」フォルダの中に「Halloween.png」があるので、そのファイルを表示するように指定されていることになります。実際には「/home/アカウント名/www」フォルダの中に「Halloween.png」のファイルがあります。上手く画像が表示されなかったというわけです。画像が表示されるように修正してみよう!ようやく原因が分かったので、画像が表示されるように修正してみましょう。修正方法はいくつかのパターンが考えられるのですが、今回はパスの指定方法に慣れるという意味でも「index.html」のパスを修正する方法を試してみましょう。「index.html」の12行目を以下のように修正してください。alt=”ハロウィンの写真”>修正が終わったら、「index.html」を再度アップロードしなおしてみましょう。キャッシュファイルってなに?キャッシュファイルとは、ブラウザなどで表示したウェブページのデータを一時的にコンピュータに保存したファイルのことです。同じウェブページにアクセスしたときに、インターネット上のデータではなく、コンピュータに保存されたキャッシュファイルのデータを参照することで、より速くデータを表示できるというメリットがあります。良い面ばかりではなく、デメリットもあります。キャッシュファイルのデメリットルキャッシュファイルを利用すると、同じウェブページにアクセスしたときに、より速くデータが表示できるようになります。ブラウザでキャッシュファイルを保持していた場合、ウェブサイトが更新されていてもキャッシュファイルのデータが優先され、更新されたはずの新しい内容が表示されなくなる場合があります。そのような症状を見受けたときは、ブラウザのキャッシュファイルを削除して、再度ウェブサイトを表示しなおしてみてください。まりなちゃんキャッシュファイルを削除してアクセスしなおしたら、ちゃんと画像ファイルが表示されました!SS先生よかったですね!まりなちゃんでも先生!検索サイトで私のホームページ名で検索しても、ウェブサイトが出てこないんですが...。次回は検索サイトに表示される仕組みについて説明しましょう。あるお問い合わせこのサイトについてこのブログは、さくらインターネットのカスタマーサポート担当であるまりなと、さくらのサービスやIT知識が豊富なSS先生による、さくらインターネットのサービスにまつわる初心者向け講座ブログです。