ブラウザ判定その他諸々ライブラリ hotcake.js
ダウンロードする
バージョン3.12.1／2018年12月30日更新
ちょっと便利な機能を色々詰め込んだスクリプトです。
主な機能
- ブラウザ判定
- 言語ローカライズ支援
- レスポンシブ画像置換
- IE対応支援
- スムーズスクロール
- その他諸々
導入
<script src="hotcake.js"></script>
hotcake.jsを読み込むタグをhead要素内に挿入して下さい。一部の機能は読み込むだけで発動します。
async属性、defer属性には対応してません。
CSSでブラウザ判定、OS判定、ページ状況判断
<html>
hotcake.jsをウェブページに読み込むと…
<html class="js desktop mouseUI macintosh webkit newVisit noReferrer">
自動的に色んなクラス名がゴチャゴチャとhtml要素に付けられます。（hotcake.jsの読み込みだけで発動）
ユーザ環境の違いによって付けられるクラス名が変わります。（※上記サンプルは一例です）
クラス名の例（一部抜粋）
- macintosh
- Macを使用しています
- windows
- Windowsを使用しています
- ios
- iOSを使用しています
- android
- Androidを使用しています
- webkit
- WebKit系ブラウザ（Safariなど）を使用しています
- blink
- Blink系ブラウザ（Chrome、Operaなど）を使用しています
- gecko
- Gecko系ブラウザ（Firefoxなど）を使用しています
- trident
- Trident系ブラウザ（Edge、IE）を使用しています
- desktop
- 端末がデスクトップです
- tablet
- 端末がタブレットです
- mobile
- 端末がモバイルです
- mouseUI
- 入力機器がマウスの可能性が高いです
- touchUI
- 入力機器がタッチパネルの可能性が高いです
- js
- JavaScriptがONです
- loading
- 現在ページがロード中です（ロードが終わるとこのclass名は削除されます）
- newVisit
- 新たなアクセスです（外部サイトからのリンクやブックマークからのアクセスの時など。サイト内のページ遷移ではこのclass名は付きません）
- fromOtherSite
- 外部サイトからのリンクです
- noReferrer
- リファラがありません（ブックマークからのアクセスの時など）
例えば、tridentクラス名を利用すると以下の様なスタイルシートを書くことが出来ます。
.someelement{
display: block;
color: #000;
border: 1px solid #bbb;
padding: 9px;
}
.trident .someelement{
display: none;
}
上記はIE系ブラウザにだけ特定の要素を表示しないという例です。
このように、ブラウザやOSによって表示する内容を変えたりといったことが出来ます。
また、loadingクラス名を利用すると以下の様なスタイルシートを書くことが出来ます。
.someelement{
transition: 0.5s ease-out opacity;
}
.loading .someelement{
opacity: 0;
}
上記はページのロード中だけ特定の要素の透明度を0にするという例です。
transitionと組み合わせる事で、ページのロード中は透明だった要素が、ロードが終わると徐々に表示されるといった効果を実現できます。
JSでブラウザ判定、OS判定
説明を書くのが面倒くさいから後回し
言語ローカライズ支援
説明を書くのが面倒くさいから後回し
レスポンシブ画像置換
画面の解像度やレイアウトに応じて、より高解像度の画像に差し替える事が出来ます。
従来のsrc属性に加え、data-srcw属性を使用することで複数の
二つの画像を指定する場合
<img src="一番目の画像ファイル" data-srcw="一番目の画像の幅, 二番目の画像ファイル" alt="" />
一番目の画像ファイルで指定した画像ファイルの幅を一番目の画像の幅に記述します。「px」などの単位を付ける必要はありません。このimg要素の表示サイズの幅が一番目の画像の幅で指定した値を上回った場合、二番目の画像ファイルで指定した画像ファイルに置き換わります。
<img src="image_1x.jpg" data-srcw="600, image_2x.jpg" alt="" />
表示サイズの幅は、画面上での実際の表示サイズとデバイスピクセル比が自動的に計算されます。例えば上記のような指定の場合で、画像が500css-pxの幅で表示されている時、画像の置き換えは行われずに「image_1x.jpg」がそのまま表示されます。しかし、画像が500css-pxの幅でかつデバイスピクセル比が2の端末で表示されている時、必要な解像度は500x2=1000ピクセルとなります。この場合、画像の置き換えが行われ「image_2x.jpg」が表示されます。
三つ以上の画像を指定する場合
<img src="一番目の画像ファイル" data-srcw="一番目の画像の幅, 二番目の画像ファイル 二番目の画像の幅, 三番目の画像ファイル" alt="" />
<img src="一番目の画像ファイル" data-srcw="一番目の画像の幅, 二番目の画像ファイル 二番目の画像の幅, 三番目の画像ファイル 三番目の画像の幅, 四番目の画像ファイル" alt="" />
<img src="一番目の画像ファイル" data-srcw="一番目の画像の幅, 二番目の画像ファイル 二番目の画像の幅, 三番目の画像ファイル 三番目の画像の幅, 四番目の画像ファイル 四番目の画像の幅, 五番目の画像ファイル" alt="" />
画像ファイルと画像の幅の指定を増やしていくことで、三つ以上の画像を指定することができます。二番目以降のファイルには、幅を数字で指定する必要があります。しかし、最後に指定するファイルにだけは幅を指定することが出来ません。
<img src="image_1x.jpg" data-srcw="600, image_2x.jpg 1200, image_3x.jpg" alt="" />
例えば三つの画像を指定する場合は上記のようなコードになります。
高さを基準にする
<img src="image_1x.jpg" data-srch="600, image_2x.jpg 1200, image_3x.jpg" alt="" />
画像の幅ではなく高さを基準にすることもできます。この場合、data-srcw属性の代わりにdata-srch属性を使用します。
背景画像をレスポンシブにする
<div style="background-image:url(image_1x.jpg)" data-srcw="600, image_2x.jpg 1200, image_3x.jpg" alt=""> ... </div>
img要素以外のタグにdata-srcw属性を付けると、背景画像の差し替えを行う事ができます。
※ 複数背景を設定する事は出来ません。
data-srcw属性は、HTML5.1の標準仕様となる可能性のあるsrcset属性と似ています。しかし、srcset属性は「ビューポートの幅 × 端末のデバイスピクセル比」ないしは「ビューポートの幅に対する画像のレイアウト上の幅の割合 × 端末のデバイスピクセル比」が基準になるのに対し、hotcake.jsのdata-srcw属性は画像のレイアウト上の幅と端末のデバイスピクセル比だけが基準になります。
srcset属性を使用する場合はWeb制作者が画像のレイアウト上の大きさを事前に計算する必要があり、特に複雑なレイアウトのWebページの場合は計算が非常に困難になりますが、hotcake.jsのdata-srcw属性ではページのレンダリング後に画像の大きさを計測し、自動的に最適な画像に置き換えるため、Web制作者の負担が軽減されます。
本機能は、hotcake.jsを読み込むだけで発動します。
IE対応支援
説明を書くのが面倒くさいから後回し
その他の機能
説明を書くのが面倒くさいから後回し
利用上のご注意＆利用規約
- このスクリプトの著作権は作者である猫分儀スミレに帰属します。
- 作者は、このスクリプトを使用したことによるいかなる損害にも責任を負いません。
- ウェブサイトでの利用を目的としたウェブサーバへのアップロード、アプリケーションでの利用を目的としたアプリケーションへの同梱などの正当な利用目的のための再配布を除き、無断でこのスクリプトを複製、再配布、公衆送信可能化することは出来ません。
- スクリプトファイル内の著作権表示を改変したり、取り除くことは出来ません。また、プログラム部分の一部または全部を転載するときは、著作権表示も一緒に転載しなければなりません。