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

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

ただいまの
回答率

90.33%

  • PHP

    21341questions

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

  • JavaScript

    17532questions

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

  • HTML

    9575questions

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

  • WordPress

    7668questions

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

  • Cookie

    197questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 270

leth

score 29

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

追記

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での指定方法に切り替えることを検討しておりますが、具体的な指定方法がありましたらご提示いただけると嬉しく思います。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/12/07 13:11

    「JavaScript Cookie」で検索して、試してから、わからない部分を追記されては?

    キャンセル

  • leth

    2018/12/07 13:21

    【mts10806さん】ご指摘ありがとうございます。修正しました。

    キャンセル

  • leth

    2018/12/07 13:23

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

    キャンセル

回答 2

checkベストアンサー

+1

基本は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 13:27

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

    キャンセル

  • 2018/12/07 13:30

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

    キャンセル

  • 2018/12/07 13:38

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

    キャンセル

  • 2018/12/07 13:43

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

    キャンセル

  • 2018/12/07 13:51

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

    キャンセル

  • 2018/12/07 13:57

    回答に追記しました。

    キャンセル

  • 2018/12/07 14:06

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

    キャンセル

  • 2018/12/08 17:59

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

    キャンセル

  • 2018/12/08 18:02

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

    キャンセル

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: '/' });//追加部分
        }
     });
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • PHP

    21341questions

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

  • JavaScript

    17532questions

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

  • HTML

    9575questions

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

  • WordPress

    7668questions

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

  • Cookie

    197questions

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