質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

2149閲覧

【phpでの指定方法】Cookieの設定値を参照して、bodyタグのClass値を出し分ける。

退会済みユーザー

退会済みユーザー

総合スコア0

Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/12/06 20:08

編集2018/12/07 04:51

いつもお世話になっております。
少々長くなりますがよろしくお願いします。

#追記
1回目:大きな勘違いをしており、こちらの指定方法はcookieではなくブラウザへの一時的な保存であるlocalStorageであることが判明しました。
当方が指定しているlocalStorageからCookieへの指定方法を探しております。

2回目:どうやらJavascriptで指定する以上は遅延が発生するのは仕方がないということが分かりました。対策としてPHPへの切り替えを検討しております。
当方、これからPHPを学ぶのでこちらのコードをPHPに切り替えた場合の具体的な指定方法がありましたら教えていただけると嬉しいです。

前回の質問から得た回答について。

前回、Cookieを使いてサイトを黒色に切り替えた際、元の白色が一瞬だけ表示されることで画面がチカチカするのを防ぎたいという趣旨の質問をさせていただき、Cookieの設定値を参照してbodyタグにClass値を挿入するという方法を提示して頂きました。

【前回の質問】jQueryでCSSを切り替えると、画面を更新する毎に画面が点滅してしまう件について。 - teratail

以下は回答の引用です。

最初から黒にしておく等の対策はありますが、そうすれば今度は白背景の場合に黒から白に点灯する訳で辛いですね。

ブラウザ自体のデフォルト背景色が白である限りどうあがいても最初の一瞬が白背景になるのは仕方のないことです。
例えbodyタグの直下にCookieを読み込んでbodyタグをネイティブJSを使って速攻でクラスを付与したとしても、
CSS読み込み時間等で極一瞬だけ白背景が差し込まれるのは回避出来ません。
特にjQueryライブラリを読み込んでいるならなおさらで、min.jsでも100KBをDLし終わるまでは白背景が続くので回避策は絶望的です。
とはいえ、許容範囲内になる可能性があるので試してみる価値はあると思います。

おまけ: 一般的な対策

PHP等の動的にHTMLを返すWebサーバを構築するのが一般的です。
WebサーバというのはCookieを読み書き出来ますから、Cookieの設定値を参照して、bodyタグのClass値を出し分ければ今回の質問のような問題は一発で解決出来るでしょう。
もし上記の回避策でもチカチカして辛い(許容範囲外だった)とか、
scriptタグの位置がぐしゃぐしゃになるから無理だとか…などの理由で無理なら動的なWebサーバ構築を目指してください。
というか、今更ながらタグのWordPressを見つけました。
テンプレートファイル弄るのが根本的な解決になるでしょう。
bodyタグを見つけてこのように修正すれば解決することでしょう。

問題の糸口が見えたので解決済みとさせて頂きましたが、何度試してもCookieの値を上手く取得することができず症状を解決することができないため、改めて質問をさせて頂きました。

※追記
1回目:こちらCookieではなくlocalStorageを利用していることが判明しました。
2回目:javascriptを用いた指定方法ではCookieを用いても、遅延が発生するのは仕方のないことであると分かりました。

Cookieを用いたWebサイトの例。

ネットでCookieを用いた例を調べてみますと、やはり僕と同じようにCookieを利用した設定に切り替わるまで一瞬のタイムラグが発生しているWebサイトが多く見受けられました。
しかし、中には読書サイトである「カクヨム - https://kakuyomu.jp」さんのように、ユーザーがサイトを黒色に切り替えた後にWebサイトを更新しても、ベースとなる白色が表示されることなく黒色として表示されるような例もあり、同じような動作を期待して試行錯誤を繰り返していました。

当方が利用しているコード。

以下のコードは様々な方のコードを参考にしながら、bodyにクラス名を付けることでサイトの色を切り替えるよう設定したものです。
前回の質問に回答して頂いたHTMLの指定方法以外、問題なく作動するものとなっています。Cookieも問題なく利用できているようです。

※追記:CookieではなくlocalStorageでした。

しかし、サイトを更新すると一瞬だけ(通信速度が遅いときだと0.5秒〜1秒間くらい)白色が表示されてから、黒色へと変更が適用されるので、これをどうにかできないものかと試行錯誤しております。

//jQuery jQuery(document).ready(function($) { var color = "color"; var colordata = localStorage.getItem(color); if(colordata == "black"){ $('body').addClass("black"); $("#color .black").addClass("active"); }else{ $('body').removeClass("black"); $("#color .black").removeClass("active"); } $("#color li").click(function(){ $("#color li").removeClass("active"); var fontColor = $(this).attr("class"); $(this).addClass("active"); if(fontColor == "black"){ $('body').addClass("black"); colordata = "black"; localStorage.setItem(color,colordata); }else{ $('body').removeClass("black"); colordata = "white"; localStorage.setItem(color,colordata); } }); });
body{ color:#444; background::#fff; } body.black{ color:#fff; background:#444; }
<!-- 当方の場合、この指定方法では取得ができませんでした。 --> <body class="<?= htmlspecialchars($_COOKIE['color']) ?>">

Cookieに関して学び始めたのはつい最近のことで、まだまだ知識が浅いかもしれません。具体的なコードや指定方法を参照しながらご指摘していただけると理解が深まります。
また、まったく違う方法でも同じように動作するものがあれば記載していただいて構いませんので、どなかたお答えいただけると嬉しいです。

※追記
1回目:こちらのコードをCookieを利用して保存し、bodyタグにClass値を出し分ける方法を探しております。localStorageがまったく別物であることが判明したので、改めてCookieでの指定方法を学んでいるところですが、どなたか具体的なコードがありましたら教えていただけると嬉しいです。

2回目:Javascriptを用いた指定方法ではCookieを用いても遅延が発生するのは仕方のないことであることが分かりました。
そのため、現在はPHPでの指定方法に切り替えることを検討しておりますが、具体的な指定方法がありましたらご提示いただけると嬉しく思います。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/12/07 01:44

..removeClass で..と2つ続いてますが大丈夫でしょうか。またlocalStorageはあくまでブラウザ側にデータを保存する方法であるためCookie参照にはなりませんよ。
kei344

2018/12/07 03:22

Cookie指定部分のコードも提示されてはいかがでしょうか。
退会済みユーザー

退会済みユーザー

2018/12/07 04:09 編集

【mts10806さん】removeClassは問題なく作動しております。なるほど、これはCookieではなくブラウザ側にデータを保存しているだけなのですね。気付かせていただいてありがとうございます。
m.ts10806

2018/12/07 04:07

$("#color .black")..removeClass("active"); ←でもここはなおしたほうがいいと思います。たぶんエラーになるのでは。
退会済みユーザー

退会済みユーザー

2018/12/07 04:09 編集

【kei344さん】cookieではなくブラウザ側へのデータ保存であることが分かりました。どうやら大きな勘違いをしていたようです。投稿の内容を「localStorageからcookieへの変更」に編集いたします。もしこちらのコードをcookieへの指定へ変更する方法がありましたら教えていただけると嬉しいです。
kei344

2018/12/07 04:11

「JavaScript Cookie」で検索して、試してから、わからない部分を追記されては?
退会済みユーザー

退会済みユーザー

2018/12/07 04:21

【mts10806さん】ご指摘ありがとうございます。修正しました。
退会済みユーザー

退会済みユーザー

2018/12/07 04:23

【kei344さん】mts10806さん、そして前回のベストアンサーに選ばせて頂いた方々からの回答により、どうやらjavascriptで行う以上は遅延が発生することは致し方のないことだということが分かりました。現在、PHPでの指定方法を学び答えを探しております。
guest

回答2

0

ベストアンサー

基本はDocument.cookie

でもjQueryプラグインのcookie.js使った方が色々と便利

ただ、JavaScriptで行う以上は
「一度画面のレンダリングが全て終わった後にHTMLの対象箇所を書き換える」ことになるのでCookieに移行したからと下記の根本解決にはなりません。

サイトを更新すると一瞬だけ(通信速度が遅いときだと0.5秒〜1秒間くらい)白色が表示されてから

全てPHPで書き換えた方が良いと思います。

ちなみにCookieはphpとJavaScriptで共有のものです。
同じkeyで保存すればそのkeyで呼び出し可能ですし、
逆に言えば上書きされます。

タグ追加を受けて:
WordPressは詳しくないのでざっと調べましたがWordPress特有のCookieを扱う機能があるわけじゃないですね。WordPressが管理しているわけじゃなく普通にPHPのCookieの機能使ってます。

投稿2018/12/07 04:16

編集2018/12/07 04:57
m.ts10806

総合スコア80731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/12/07 04:27

なるほど、Javascriptで指定する以上はこなってしまうのは致し方のないことなのですね。前回のベストアンサーに選ばせていただいた方の回答をより鮮明に理解することができました。ありがとうございます。 当方、PHPでの指定方法をこれから学んでいく予定です。 もしお手数でなければ、こちらのコードをPHPでの指定に切り替えた場合どのようになるのか、具体的なコードを参照していただけると嬉しく思います。 今回頂いたご指摘をもとに、改めて質問の内容を変更・追記させていただきます。
m.ts10806

2018/12/07 04:30

数行追記しました。 コードについては各マニュアル参照してやってみてください。ただ、WordPressなんですかね。 それなら純粋なphpよりWordPressにおける取り扱いかたを調べて導入された方が良いかもしれません。
退会済みユーザー

退会済みユーザー

2018/12/07 04:38

はい、当方WordPressを利用しております。 PHPとJacascript、またCookieとの関係性についても学びながら期待する動作になるよう指定方法を探していきたいと思います。
m.ts10806

2018/12/07 04:43

なるほど、であればタグにWordPressがあった方がいいですね。確か5個までしかつけられなかったはずですが、重要度は今つけられてる幾つかのタグより高いです
退会済みユーザー

退会済みユーザー

2018/12/07 04:51

ご指摘ありがとうございます。タグにWordPressを追加しました。
m.ts10806

2018/12/07 04:57

回答に追記しました。
退会済みユーザー

退会済みユーザー

2018/12/07 05:06

追記ありがとうございます。参考にさせていただきながら指定方法を探していきます。
退会済みユーザー

退会済みユーザー

2018/12/08 08:59

無事にCookieを利用することができました! 自己解決を先に投稿してしまったためベストアンサーに選ぶことができず申し訳ありません。 ご指摘いただいた情報はとても参考になりました。
m.ts10806

2018/12/08 09:02

解決されたようで何よりです。 ベストアンサーは移すことができるようです。(つけはずしが可能) 判断はお任せします。 ただ、回答でもマークダウンは使えるのでコードはきちんと対応された方が良いかと。回答も編集可能です。
guest

0

cookie.jsを利用することで解決しました。

$(document).ready(function() { $("#color li").click(function(){ $("#color li").removeClass("active"); var fontColor = $(this).attr("class"); $(this).addClass("active"); if(fontColor == "black"){ $('body').addClass("black"); $.cookie('color','black'{ expires: 7, path: '/' });//追加部分 }else{ $('body').removeClass("black"); $.cookie('color','white'{ expires: 7, path: '/' });//追加部分 } }); });

投稿2018/12/08 08:55

編集2018/12/08 09:07
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問