「～.css?数字」というファイル名のご解説を！

こんばんは。

現在CSSを学んでいるものです。下記のサイトのソースをご覧下さい。
http://lagoscript.org/jquery/flickable/demo

「screen.css?1252422308」や「print.css?1250502448」、また、「jquery-1.4.2.min.js?1273939646」や「view_source.js?1257599809」の様なファイル名が見受けられます。

参考のためにサンプルをコピーして動かして、それを少しずつ変えていこうと考えていたのですが、「screen.css」、「print.css」や「jquery-1.4.2.min.js」などファイル名には「?」は付けられません。そのせいかファイル名がどうしても付けられないせいか分かりませんが、ローカルにコピーしても動きません。

これがどう検索しても分かりませんでした。サイト主様にコメントを書こうとも考えましたが、コメント欄を見ると最近はご覧頂けていないようでした。ですので、こちらで質問させて頂きました。

みなさま、これはどの様なことなのかご説明、よろしくお願いいたします。

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2011/12/24 23:29

URLは、

http://
HTTPプロトコル
　　　www.abc.com
　　　ドメイン・サーバー
　　　　　　　　　/abc/efg
　　　　　　　　　パスとファイル名
　　　　　　　　　　　　　?・・
　　　　　　　　　　　　　QUERY_STRINGS
　　　　　　　　　　　　　　　　　　　　#アンカー
となっています。
?以降は、サーバーに対してデータを渡す方法です。たとえば、
http://www.google.co.jp/#hl=ja&gs_is=1&cp=7&gs_i …
　の?以降がそれに当たります。

問題は、/abc/efg/screen.css?1252422308 です。実は、screen.cssがファイル名でない可能性もあります。Windowsしか使っていないと理解しにくいでしょうが、
1) ?以降は、サーバーに環境変数QUERY_STRINGに格納されます。CGIなどで使われます。
2) screen.cssというファイルを探します。あればそれを提供します。
　　それがディレクトリでしたら、それを開きます。★.以降が拡張子とは限りません。
　　3) ディレクトリの中にINDEXとして使われるファイルが設定してあれば、
　　　それを表示します。たとえばindex.html
　　　　または、ディレクトリの一覧を表示する。
　　　　あるいは、アクセスを拒否します。
3) screen.cssがファイルでもディレクトリでもない場合はPATH_INFOという環境変数に格納して、そのディレクトリのINDEXファイルを探します。
　　それがあれば、実行します。なければ
　efgについて、同様に
　1) それがファイルなら開きます。
　2) ディレクトリなら、それを開いてINDEXファイルなり、一覧なり、拒否なりを行います。

　これを繰り返します。
　実に複雑なように見えますが、極めて単純なことを繰り返しているダメです。

　スタイルシートを動的に作成するために使用します。
　実際にどの部分が、実行ファイルか実行ファイルが存在するディレクトリかわかりませんが、?以降の値で、プログラムの挙動を変えているのでしょう。
例] http://hpcgi1.nifty.com/Iruka/ENV_FORM.cgi/test. …

nickname_1973と言う値を渡しています。test.cssというファイルがあるわけではないこともわかりますよね。もちろんこの方法でスタイルシートを出力することも出来ます。


　　　　　　　　　　　　　　

この回答へのお礼

ORUKA1951さん、

お礼が遅れまして申し訳ございません。ありがとうございました。

お礼日時：2011/12/25 17:36

No.1 回答者： 4017B 回答日時： 2011/12/24 22:37

え～っと、それは一般的には「引数」と呼ばれる物で、ファイル名ではありません。

＞webにおける引数
色んな物が有り得ますが。通常、

・http://example.com/hoge/hoge.html?123456

～の様な形のURLを考えた場合。この様なURLにアクセスした時、IEやChromeの様な一般的なブラウザは、URLに含まれる「？以降の文字列」を“引数”であると認識して無視します（例文の場合は ?123456 の部分）。

引数は主に、アクセスしたweb上のファイルに何らかのwebプログラムが施されている事が前提となっており。よく使われるものにはPHPやPerlなどがあります。何らかの動的に変化する要素を、アクセスする度にプログラム側に情報として与える手法としてポピュラーです。


＞CSS以降の？の値の意味は
これは前述の、引数は無視するというブラウザの仕様を利用した、一種のハックテクニックの1つです。

比較的、webサイトの更新スピードが速い場合。せっかくCSSやJSファイルを新しく更新したとしても、各Userのブラウザの設定によってはキャッシュファイルを保存する様な設定にしてある場合、直ちに最新版が反映されないという現象が起きます。このキャッシュファイルの保存期間は、User各自で違ってるので。人やPC環境によって表示のされ方が異なってくる事になり、webサイト運営上の1つの問題点となります。

これを防ぐには、各々Userがサイト更新される度に、手作業で古いキャッシュファイルを削除して、新しいキャッシュファイルに保存し直す事ですが…まあ、そんな面倒臭い事を素人Userに要求する事自体無理があります。

そこで登場するのが「引数」です。

前段でブラウザは引数を無視すると述べましたが。キャッシュファイルとして保存する時には、引数まで含めたURL全体の文字列でファイル名を判別する仕様になっています。

従って、
・http://example.com/hoge/hoge.css?123456
と
・http://example.com/hoge/hoge.css?abcdef

～は、ブラウザとしてアクセスするファイルの時には全く同じURL（？以降を無視）として処理されますが。キャッシュファイルとして保存する時には引数を含めますので、全く同じファイルであるにも関わらず、両者は別々のファイルとして2つに分けてキャッシュファイルが保存されます（ファイル的には全く同じ物です）。

この働きを利用する事により。サイト管理者側がHTMLコード内に記述する外部ファイルなどのURLに、意図的に意味を成さない引数を付加して置く事によって、webサイトを更新した際にCSSやJSファイルなどを常に最新版としてキャッシュして貰う事が出来ます（一般的にはファイルバージョンや日付を書く事が多い）。


P.S.
最近は多くのサイトがWordPressなどのCMSを利用していますので。キャッシュファイルのための引数も、自動的に最新版が常に反映される様な引数をアクセス毎に動的に作成する仕様もよく見かけます。ChromeやOperaはキャッシュファイルの保存期間が病的に長いので、このテクニックはかなり重要となっています。

この回答へのお礼

4017Bさん、

お礼が遅れまして申し訳ございません。ありがとうございました。

お礼日時：2011/12/25 17:35