http、httpsを省略してCSSやJavascriptを簡単に読み込む

久しぶりにHTMLやらJavascriptを触っていて知ったこと。全く知りませんでした。
これは便利で、早速、色々なところのコードを書き換えました。

HTTPとHTTPSイチイチ切り替えるの面倒

HTTPとHTTPSのプロトコル（RFC的にはスキーム）が混在したウェブサイトがあります。

例えば、通常ページはHTTPを利用して表示していて、問い合わせページなどの保護された通信で情報を伝送したいときにはHTTPSを利用して表示します。大抵の場合、ページデザインは通常ページから継承されているのでHTMLコードも使い回し（テンプレート化等がされていたらば、それらの使い回し）になります。そこで問題なのは、CSS、Javascriptなど外部からURIを指定してリソースの読み込みを行っている場合です。

<script src="http://hogehoge.co.jp/demo.js">

こんなコードをそのままHTTPSを利用したページのHTMLに記載するとブラウザによっては警告が表示されます。もしくはブラウザの設定によっては読み込まれないかもしれません。

一番良い方法は、スキームが切り替わっても自動的に追従してくれる記述法なのですが、存在しないモノと思い込んでました。ですが、実は存在していました。気がついたのはGoogle Tag Managerのコード。こんな記述があります。

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=xxx-xxxxxx"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

ん！？src=”// という記述方法は大丈夫なのか？もし、可能なら凄く便利！！

調べてみました

• schemeのないURLは相対URL – あーありがち
• JavaScriptやCSSをURLで読み込む際の「http:」は省略できる – F.Ko-Jiの「一秒後は未来」
• HTMLやCSSでのプロトコル表記（http:、https:）の省略について – 小粋空間
• プロトコルを省略して “//example.com” で始める URL に、なにかデメリットはありますか？
• JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法
• Is it valid to replace http:// with // in a <script src=“http://…”>? – Stackover Flow
• 5a Missing schema double download – stevesouders.com

まとめ

• http、httpsは記載を省略できる
• 省略したときは、現在ブラウザが利用しているスキームが補完される
• RFC3986にも書かれているvalidな方法
• 少しだけコード量が少なくなる
  • ページ読み込みスピードに貢献
• HTMLやCSSにおいて、どんな外部読み込みも省略できる
  • Javascript内ではどうなる？
• IE7/8では、同じリソースを2回読み込んでしまうらしい
  • 本当のところどうなの？3年前の情報
  • 今のところ、書き換えてみたこのブログでは事実は確認できない