久しぶりのサイト制作ネタです。
ちょくちょくプライベートでサイト制作をすることがありますが、スマホ対応方法はもうレスポンシブ1択でやらせてもらってます。
だいたいバンド用のウェブサイトを作ることが多いのですが、メンテナンスにコストをかけれないし、CMSを入れるにも、お客さんが扱えないことが多いこともあって、運用考えるとレスポンシブでええわな、という感じです。
あと、俺がめんどくさがりというのも大きいです。
jsっていうと昔は演出作るのがめんどくさくて手を付けてなかったのですが、最近は色気が出てきてちょっとずつ勉強してます。
で、レスポンシブのサイトだと、デバイスごとにjsを書き分けるとか読み込み分けたくなります。cssはブラウザ幅で簡単に記述を変えられますが、jsはいろいろとやり方がある。
たぶん一長一短あるんでしょうが、今のところの私なりの方法をメモしておきます。
更新. document.writeは非推奨
以下、思いっきりdocument.wirteを使いまくったコードを紹介していますが、非推奨との事です。
document.writeでscriptを読み込んではいけない – Qiita
私自身もこの記述をやめました。 / 2020年3月11日追記
前提
他人に強要する気は全くないのですが、「htmlには可能な限りコンテンツ以外の内容を記述しない」というのがモットーでやってます。なので、htmlではjsに関する記述は最小限に済ませます。ということでだいたいimportしてます。
html
<script src="/assets/js/import.js"></script>泣く子も黙る1行です。
import.js
document.write('<script type="text/javascript" src="/assets/js/aaaaa.js">');
document.write('<script type="text/javascript" src="/assets/js/bbbbb.js">');
document.write('<script type="text/javascript" src="/assets/js/ccccc.js">');
document.write('<script type="text/javascript" src="/assets/js/ddddd.js">');
document.write('<script type="text/javascript" src="/assets/js/eeeee.js">');一気に読み込んじゃうと、パフォーマンス的にあんまりよくない影響がありそうです。が、そこらへんは実はよく分かっていません。
<head>で読み込むimport.jsと、</body>真上で読み込みimport.jsを併用すればいいのしら。
jsファイルとデバイスの対応を関係づけて設計
あと、jsファイル内でいちいちデバイスごとの処理を書き分けたくないので、ハナからどのデバイスでどのjsファイルを読み込むかを「ファイル単位で」設計しておきます。
ざっとこんな感じです。が、実際はこんなに分岐しないです。
- 全デバイスで読み込むjsファイル
- PCだけで読み込むjsファイル
- スマホだけで読み込むjsファイル
- タブレットだけで読み込むjsファイル
- PCとスマホで読み込むjsファイル
- PCとタブレットで読み込むjsファイル
- スマホとタブレットけで読み込むjsファイル
大抵の場合、「全デバイスで読み込むjsファイル」+「PCだけで読み込むjsファイル」だけで事足りるはずです。
だいたい、オンマウス系とscroll系は「PCのみ」となる感じです。俺の場合。
import.jsでデバイス判定する
あとは、さっきにimport.jsに、UA分岐をファイル単位にかませばいいだけです。
ユーザーエージェント判定
if(!navigator.userAgent.match(/(iPhone|iPad)/)){
//
iOSで読み込ませたくないjsファイル
//
}結果の例
document.write('<script type="text/javascript" src="/assets/js/aaaaa.js">');
document.write('<script type="text/javascript" src="/assets/js/bbbbb.js">');
document.write('<script type="text/javascript" src="/assets/js/ccccc.js">');
document.write('<script type="text/javascript" src="/assets/js/ddddd.js">');
if(!navigator.userAgent.match(/(iPhone|iPad)/)){
document.write('<script type="text/javascript" src="/assets/js/eeeee.js">');
}一応こうやれば、
- htmlはコンテンツ、jsは演出
- import.jsファイルはデバイス判定を制御
- それ以外のjsファイルは演出を制御
というように、何のファイルが何を制御しているかがハッキリして、個人的には気分がいいです。
ただ上で言う通り、jsはまだ勉強し始めて間もないので、この方法のデメリットを把握しているわけではないです。
何かリスクとかあればアップデートします。
CONVERSATION