投稿2021/11/16 12:12
グッズ関連のページを作ってます。
アクセス毎や再読み込み時にデザインが異なるページを交互に表示したいのですが、
いろいろ調べても画像をランダムに変ええるくらいしか出てこず、どうしたらよいのかわからず質問してみました。
試したことを書きたいのですが、試せるのすら分からず解決口見えてこず質問させていただきました。
1つのhtmlに2種書いて、読み込み毎に交互に1つを表示1つを非表示にするとかの方がよいのでしょうか。
このページ見たらいいよとかありましたら教えてください。
こんな質問で申し訳ないです。
回答3件
0
方法自体はいくらでもありそうです。
ただ、PHPなりPerlなりのサーバサイドの言語は使わないようなので、ちょっと制限がつきそうですね。
jQueryはざっと調べた感じ、JavaScriptを簡略化するだけのクライアントサイドっぽいので。
単純に毎回違うものにするのは、ぱっと思いつくものだと、
方法1: index.html, a.html, b.html を用意し、index.htmlにアクセスさせる。そしてそのindex.htmlを介してa,bにアクセスさせる
ですかね。
デザインA,Bをそれぞれa.html, b.html のように用意する。
そして直接a.htmlとかにアクセスさせるのではなく、ユーザとA,Bの間にindex.htmlのようなものを設ける。
ファイル名はなんでもいいですが。
で、index.htmlでは、
1. 表示したいページを決定する 2. location.hrefに相当するやつで動的に移動する
的なロジックでできそうです。
えーっと、ほら、『ページが存在しません。30秒後にメインページに移動します』的なメッセージが表示されて指定の時間後に別のページに飛ぶアレです。
あれを、『○秒後』とは言わずにすぐに飛ぶ感じですね。
で、どのようにA,Bのどれかを決めるのかというのは、『前回表示したページ』を考えるとわかりますよね。
前回がAならB, BならAという風に。
ではこの『前回表示したページ』はどのようにわかるでしょうか。
現実世界で考えてみてください。
日ごとに、A,Bを交互に黒板に書くとします。
私なら、ノートかなんかに『今日黒板に書いたもの: B』的な感じで記録します。
そして翌日、その記録を見て、Bと書かれていたら次はAですよね。
なのでAと書く。そんでもって、ノートかなんかに『今日黒板に書いたもの: A』的なやつで更新する。
さらに翌日も…のように、『記録を残しておく』ですね。
これをやればいいだけです。
JavaScriptとかだと変数がありますが、これはそのページを更新したり、別のページに行ったりすると破棄されます。
なので今回は使えません。
PHPなりのバッグエンド系の言語が使えるならDBに突っ込んでおいてそれを使うという手が取れますが、今回はできません。
なので『クッキー』を使います。
クッキーとはなにか、使い方は？というのはご自分で調べてください。
そのクッキーを使えば、30日なら30日は保存がきくようです。
よって、
1. クッキーで『前回表示したページ』を参照する 2. (1)で取得したデータをもとに次に表示するページを決める 3. 『前回表示したページ』を今回表示するページに更新する 4. 表示すると
的な感じになるかと。( (3),(4)は逆になるかもしれないが )
ただ、この方法だと制限がつくかもしれません。
ざっと考えただけでも、
■ 別のWebブラウザでアクセスされた場合、どうするか
■ 別のPCでアクセスされた場合、どうするか
■ クッキーが破棄された場合、どうするか
■ クッキーの保存期間を過ぎていたら、どうするか
といった問題がありますね。
単純に『他の商品も見せたい』的な感じで、『ランダムに表示する』のなら問題はなさそうですが、
常に交互となると、上記のような場合はどうなるでしょうか。
ユーザは常に一つのPCだけでアクセスしているとは限りません。
ネットカフェを点々としている人や、
たまたまパソコンやケータイを買い替えたという人もいるはずです。
それに、やろうと思えばWebブラウザ側でクッキーの抹消だったかなぁ。
名前は覚えていませんが、破棄することも可能です。
あるいは、単純に一年後とかにアクセスするかもしれません。
それらの場合でも常に交互に…となるとちょっと厳しいかも。
やるならPythonなりPHPなりのサーバサイドに頼らないといけないはずです。
JavaScriptでもNode.isってのを使えばできる…かもしれませんが。
(試していないのでわかりませんが)
投稿2021/11/17 02:50
編集2021/11/17 03:07総合スコア4962
0
ベストアンサー
あたりでしょうか
切替条件はクッキーやlocalstorageあたりが妥当でしょう
アクセス毎や再読み込み時
というのも
など課題がありそうです
とりあえずサンプル
javascript
1<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script> 2<script> 3window.addEventListener('DOMContentLoaded', ()=>{ 4 const view=Cookies.get('view')||'A'; 5 document.body.setAttribute("data-view",view); 6 Cookies.set('view',view=='A'?'B':'A'); 7}); 8</script> 9<style> 10body[data-view="A"] #view_B{ 11display:none; 12} 13body[data-view="B"] #view_A{ 14display:none; 15} 16</style> 17<body> 18<div id="view_a"> 19a 20</div> 21<div id="view_b"> 22b 23</div> 24</body>
挙動が想定と違うようでしたら指摘ください
投稿2021/11/17 01:07
編集2021/11/17 02:45
総合スコア116724
0
質問タグの範囲ですと、「body要素 にクラスをつけてデザインをコントロールし、Cookie にクラスの状態を保存して JavaScript で Cookie を参照し変更をする」というのがいいように思います。
ググった感じ、参考になりそうなのはこの辺りのページでしょうか。
javascript - Set body class with jquery cookie plugin - Stack Overflow
JavaScript - jQueryでCSSを切り替えると、画面を更新する毎に画面が点滅してしまう件について。｜teratail
投稿2021/11/17 01:02
総合スコア36960
あなたの回答
tips
プレビュー
Q&A
