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

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

ただいまの
回答率

90.34%

  • JavaScript

    17599questions

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

  • WordPress

    7696questions

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

  • HTML5

    4319questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2223questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

初回アクセス時のみローディング画面を表示する方法について

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,401

mogemoge1203

score 3

 実現したいこと

現在WordPressを利用してウェブサイトの構築を行っております。
ローディング画面を実装したのですが、現状はページが更新されるたびに処理が発生しております。
そこで、外部からのアクセス時(初回アクセス時)のみローディング画面を発生させたいです。

古い記事ではあるのですが、下記記事を参考に
jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法

を読み、jquery.cookie.jsを用いて、記事のサンプルをそのまま利用しても機能しない状態です。

また、私自身javascriptの知識がないに等しいため、紹介記事等を参考に組んでおります。
どなたか初回アクセス時のみ以下の処理を行うorローディング画面を発生させる方法をご教授いただけないでしょうか。
よろしくお願いいます。

 該当のソースコード

<script type="text/javascript">
var time=new Date().getTime();
$(function() {
  var h = $(window).height();

  $('#loader-bg ,#loader').height(h).css('display','block');
});

//全ての読み込みが完了したら実行
$(window).on('load',function () {
  var now = new Date().getTime();
  if (now-time<=3000) {
    setTimeout('stopload()',5000-(now-time));
    return;
  } else {
    stopload();
  }
});

//5秒たったら強制的にロード画面を非表示
$(function(){
  setTimeout('stopload()',5000);
});

function stopload(){
  $('#loader-bg').delay(900).fadeOut(800);
  $('#loader').delay(600).fadeOut(300);
}
</script>


現在は上記コードでローディング画面の発生・終了までは処理できております。

よろしくお願いいたします。

---追記---

Jqueryのバージョンや、Cookie.jsを使用した際のコードを書いたほうがいいとのご指摘をいただいたので、
追記させていただきます。

【ブラウザ】
GOOGLE Chrome
(バージョン: 67.0.3396.99(Official Build) (64 ビット))

【jQuery】
jquery-3.3.1.min.js

 参考サンプルを記述したもの

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.cookie.js"></script>
<script type="text/javascript">
$(function(){
  if($.cookie("access")){
    $('#first').css({display:'none'});
  }
  $(window).load(function(){
    $.cookie("access",$('body').addClass('access'));
  })
});
</script>

以上よろしくお願いいたします。

---追記---

外部からのアクセス時(初回アクセス時)のみ
と書いてありますが、私の説明不足でした。

主にページ内の内部リンクを対象と考えております。
トップページに直接アクセスした際にはローディング画面を表示。
サブページ等からトップページにアクセスした際にはローディング画面を非表示

と考えております。
私の記載内容がまとまっておらず、ご迷惑おかけしましたことおお詫び申し上げます。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 4

+3

おそらく提示コードは「ローディングを表示する」のみかと推察されます。

jquery.cookie.jsを用いて、記事のサンプルをそのまま利用しても機能しない状態です。

についてやってみたコードの提示もされた方がjquery.cookie.jsを使う場合のアドバイスももらえそうに思います。
あとできれば確認したブラウザですね。jQueryのバージョンも。

既に提示の記事では実現できているようですし、どこかが足りていないか、何か実装方法の違いがあるか だと思います。


他の案としては「localStorage」を使う案があります。

処理の流れ:
・ローカルストレージ「表示した」フラグがNULLかどうか確認
・NULLでなければ何もしない
NULLであればローディング表示し、ローディング「表示した」フラグに何かセット

 コードサンプル(未検証)

前提:ローディング表示処理は別途、loading()という関数にまとめておくこと。

localstorage

//localStorage.getItem("myCat");
$(function() {
  if(localStorage.getItem("access") == null){
     loading();
     localStorage.setItem("access","on");
  }
});
function loading(){
  //ローディング実行する処理
}
//ロード画面終了処理

Cookie.jsを使うときもほぼ同じです。
getItemのところを!$.cookie("access")に、setItemのところを$.cookie("access","on")にかえればできそうに思います。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/09 15:21

    mts10806様
    ご回答ありがとうございます。

    >おそらく提示コードは「ローディングを表示する」のみかと推察されます。
    はい、ご指摘の通りでございます。
    こちらの記述をカスタマイズして外部からのアクセス時のみ表示することは難しいのでしょうか。
    無知で申し訳ないです。

    >他の案としては「localStorage」を使う案があります。
    いただいたリンク先を確認すると、「localStorage」は永続的に記録されると書いてあるのですが、
    一度ブラウザを閉じても二度と処理は行わなくなってしまうのでしょうか?
    外部からアクセスる度に処理を行う場合は「sessionStorage」を使用するほうが懸命でしょうか。
    ただ、いただいたリンク先の内容をみても、いまいち記述の仕方がわかならいのが現状です。
    非常に申し訳ないのですが、記述の方法などご教授いただくことは難しいでしょうか?
    よろしくお願いいたします。

    キャンセル

  • 2018/07/09 16:28

    > こちらの記述をカスタマイズして外部からのアクセス時のみ表示することは難しいのでしょうか。

    jquery.cookie.js はプラグインなのでそのままコードを提示されても困りますね・・・。どこか自身で改修した箇所があるのでしたらそこを記載してください。
    要は「そのまま利用しても機能しない状態」だけでは「どう機能していないか」が分からないということです。

    Cookie.jsを使う場合でもlocalstorageを使う場合でも処理は同じですよ。
    回答に書いた「処理の流れ」の通りです。

    参考サンプルについてですが、#firstや.accessなどが与えられた要素がきちんとHTML上にあるのでしょうか?
    というかこのコードはどこに入れたのでしょうか?単体であるため、どのタイミングでどう実行されるのか質問内容だけでは分かりかねます。

    > 一度ブラウザを閉じても二度と処理は行わなくなってしまうのでしょうか?

    すみません。何が言いたいのか分かりませんが、
    「永続的」とは「ブラウザを閉じても意図的に破棄しない限り永遠に維持される」です。
    なので問題ありません。

    ひとまず・・・組んではみますが。
    少々お待ちを。

    キャンセル

checkベストアンサー

+2

僕の解釈ですが、
「外部サイト(検索とかブックマーク)からアクセスしたときはローディングを表示して、 サイト内リンクでトップページに戻ったりするときは表示しない」
ということであってますか?

JavaScriptには遷移元の情報(referrer)を取得することが出来るので、
自分のサイト以外からのアクセスの場合はローディングを入れるといいと思います!

document.referrer;
// Google検索からならhttps://www.google.co.jp/
// ブックマークやURL直打ちなら空

// 追記
あっていたようで良かったです!
あと、ドメイン名を特定するならdocument.referrerよりもwindow.location.hostnameのほうが良いですね。

例えば、自分のサイトのURLがhttp://www.example.com/だった場合...

// 自分のサイトからのアクセスなら「www.example.com」
const host = window.location.hostname;

// 自分のサイトからのアクセスでなければ...
if (host !== "www.example.com") {
  // 続く処理
  ...
}


if文の中に処理を書けば、外部からアクセスした場合のみ処理を実行するようになります。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/09 16:37

    > 外部からのアクセス時(初回アクセス時)

    とあるので、外部からアクセスするたびに表示されることになるので
    要件に合いません。

    キャンセル

  • 2018/07/09 16:45

    Yasha_Wedyue様
    >「外部サイト(検索とかブックマーク)からアクセスしたときはローディングを表示して、 サイト内リンクでトップページに戻ったりするときは表示しない」
    はい!こちらの認識で合っています!
    【外部からのアクセス時(初回アクセス時)】というのは外からウェブサイトに着た時を対象としています。
    私の書き方が悪かったようで、ご迷惑をおかけしました。

    大変申し訳無いのですが、「document.referrer;」を利用した記述にカスタマイズを行いたく、参考になるウェブ記事などありますでしょうか。
    私の方でも探しているのですが、いまいち理解できていない部分が多く迷走しております。

    お手数ですがよろしくお願いいたします。

    mts10806様
    わかりにくい要件定義をしてしまい申し訳ありません。

    キャンセル

  • 2018/07/09 16:50

    同じ人が同じブラウザでもブラウザを閉じたりPC再起動したりしても、
    外部からアクセスするたびにローディング表示されても良いということでしょうか?
    最初の1度だけという意味かと思ったのですが。

    キャンセル

  • 2018/07/09 16:52

    mts10806様
    はい、外部よりアクセスした際には表示することをイメージしております。

    キャンセル

  • 2018/07/09 16:59

    「外部よりアクセスした際には”必ず何度でも”ローディング表示」ということですよね。

    ではcookie.jsやLocalStorageでは実装できなくもないですが容易ではないですね。
    「対象のWebサイトから離脱した」というのを正確に取得した上で破棄する必要があります。
    document.referrerとlocationからチェックするのが吉です。(ある程度パターンだしして対応する必要はありますが)

    キャンセル

  • 2018/07/09 17:37

    Yasha_Wedyue様

    追記していただいた内容を下記でテストしてみたのですが、
    機能しませんでした。
    私が書いている【該当のソースコード】を落とし込む際にはまた複雑になってくるのでしょうか。
    知識・技術不足でご迷惑おかけしております。
    ※「ドメイン.com」の部分は実装時は正規の表記にしています。

    <script type="text/javascript">
    // 自分のサイトからのアクセスなら「www.example.com」
    const host = window.location.hostname;
    // 自分のサイトからのアクセスでなければ...
    if (host !== "ドメイン.com") {
    // 続く処理
    alert('テスト');
    }
    </script>


    mts10806様
    はい、何度でもローディングを表示させたいです。
    トップ ⇢ サブ ⇢トップの場合は非表示にしたいです。

    キャンセル

  • 2018/07/10 10:32

    hostの中身をconsole.logなどで確認してみてもらえますか?

    キャンセル

  • 2018/07/10 17:27

    Yasha_Wedyue様
    console.log('テスト');
    で処理を走らせようとしたのですが、何も確認できないのが現状です。
    なにか別のscriptが干渉している等でしょうか。

    私の記述方法としてはお間違いないでしょうか?
    お手数ですがご確認いただけると幸いです。

    キャンセル

  • 2018/07/11 08:24

    全く同じコードをローカルで試して、空の文字列が返って来ているのを確認していますよ。
    何も返って来ていないということはそもそも記述した処理が走ってないということなので、
    書く場所がおかしいのか他のスクリプトが干渉しているのか…それは分かりませんが
    動く場所に記述するようにしてください。

    キャンセル

+1

このページを参考にしてmogemoge1203さんのような効果をねらいましたが、うまくいきませんでした。
解決済みのようですが、参考になればと思い投稿しました。
私は次のように実装しました。
当該HP

    var pon = 1;
    const myURL = document.referrer;

    if ( myURL === 'http://jp.modelfes.com/') {
        pon = pon+1;
    } else if (myURL === 'http://jp.modelfes.com/mf/') {
        pon = pon+1;
    } else if (myURL === 'http://jp.modelfes.com/mf/access/') {
        pon = pon+1;
    } else if (myURL === 'http://jp.modelfes.com/mf/caution/') {
        pon = pon+1;
    } else if (myURL === 'http://jp.modelfes.com/mf/faq/') {
        pon = pon+1;
    } else if (myURL === 'http://jp.modelfes.com/mf/contact/') {
        pon = pon+1;
    } else if (myURL === 'http://jp.modelfes.com/know/about/') {
        pon = pon+1;
    } else if (myURL === 'http://jp.modelfes.com/know/event/') {
        pon = pon+1;
    } else if (myURL === 'http://jp.modelfes.com/know/terms/') {
        pon = pon+1;
    } else if (myURL === 'http://jp.modelfes.com/exhibition/') {
        pon = pon+1;
    } else if (myURL === 'http://jp.modelfes.com/exhibition/general/') {
        pon = pon+1;
    } else if (myURL === 'http://jp.modelfes.com/exhibition/invitation/') {
        pon = pon+1;
    } else if (myURL === 'http://jp.modelfes.com/dealer/') {
        pon = pon+1;
    } else if (myURL === 'http://jp.modelfes.com/dealer/company/') {
        pon = pon+1;
    } else if (myURL === 'http://jp.modelfes.com/dealer/hanken/') {
        pon = pon+1;
    } else if (myURL === 'http://jp.modelfes.com/enter/') {
        pon = pon+1;
    } else if (myURL === 'http://jp.modelfes.com/enter/player/') {
        pon = pon+1;
    } else if (myURL === 'http://jp.modelfes.com/press/') {
        pon = pon+1;
    } else if (myURL === 'http://jp.modelfes.com/press/day/') {
        pon = pon+1;
    };
    if (pon === 1) {
        alert('ただいま日本語訳ページは一部工事中です。ご不便をおかけします。');
        console.log(myURL);
    }


初心者なので、これが精一杯でした。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/09/18 13:16

    ceeport様
    ご丁寧なご回答ありがとうございます。
    全ページからのアクセス判断を行っているということでしょうか?
    私自身初心者なためこちらも参考にさせていただきたいと思います。
    ありがとうございます!

    キャンセル

  • 2018/09/21 15:32

    質問主さんの質問ではないのですが、回答させてください。
    配列にURLを格納してArray.forEachで回してやればもうちょっとスマートにかけそうです。

    const referrer = document.referrer;
    const urlList = [
    "jp.modelfes.com/",
    "jp.modelfes.com/mf/",
    ...
    ];

    urlList.forEach(function(url) {
    if(url !== referrer) {
    alert('ただいま日本語訳ページは一部工事中です。ご不便をおかけします。');
    console.log(referrer);
    }
    });

    pon という変数を他の場所でも使うのであれば、

    let pon = 1;
    urlList.forEach(function(url) {
    if(url === referrer) {
    pon++;
    }
    });

    if(pon === 1) {
    alert('ただいま日本語訳ページは一部工事中です。ご不便をおかけします。');
    console.log(referrer);
    }

    こんな感じでどうでしょうか。

    キャンセル

  • 2018/09/22 13:54

    Yasha_1wedyueさん
    ありがとうございました。

    >const referrer = document.referrer;
    >const urlList = [
    >"jp.modelfes.com/",
    >"jp.modelfes.com/mf/",
    >...
    >];
    >
    >urlList.forEach(function(url) {
    >if(url !== referrer) {
    >alert('ただいま日本語訳ページは一部工事中です。ご不便をおかけします。');
    >console.log(referrer);
    >}
    >});

    このスクリプトも、

    >let pon = 1;
    >urlList.forEach(function(url) {
    >if(url === referrer) {
    >pon++;
    >}
    >});
    >
    >if(pon === 1) {
    >alert('ただいま日本語訳ページは一部工事中です。ご不便をおかけします。');
    >console.log(referrer);
    >}

    このスクリプトもそれぞれ試しましたが、「NS_ERROR_XPC_SECURITY_MANAGER_VETO: 」というメッセージが出てうまくいきませんでした。
    うまく動く形を教えていただけたらありがたかったです。

    キャンセル

  • 2018/09/25 08:08

    そのエラーは見たこと無いのですが、調べてみるとFirefoxの拡張機能に起因するエラーのようですね。
    ちょっと解決方法わかりません…

    キャンセル

0

>全ページからのアクセス判断を行っているということでしょうか?
はい、そのとおりです。面倒ですが・・・

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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

  • JavaScript

    17599questions

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

  • WordPress

    7696questions

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

  • HTML5

    4319questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2223questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。