\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n \r\n
\r\n
\r\n

Multi-page

\r\n
\r\n\r\n
\r\n

One

\r\n

Show page \"two\"

\r\n

Show page\r\n \"popup\" (as a dialog)

\r\n
\r\n\r\n
\r\n

Page Footer

\r\n
\r\n
\r\n\r\n \r\n
\r\n
\r\n

Two

\r\n
\r\n\r\n
\r\n

Two

\r\n

I have an id of \"two\" on my page container. I'm the second page container in this multi-page template.

\r\n

Notice that the theme is different for this page because we've added a few data-theme swatch\r\n assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're\r\n keeping these simple.

\r\n

Back to page \"one\"

\r\n
\r\n\r\n
\r\n

Page Footer

\r\n
\r\n
\r\n\r\n \r\n
\r\n
\r\n

Dialog

\r\n
\r\n\r\n
\r\n

Popup

\r\n

I have an id of \"popup\" on my page container and only look like a dialog because the link to me had a data-rel=\"dialog\"\r\n attribute which gives me this inset look and a data-transition=\"pop\" attribute to change the\r\n transition to pop. Without this, I'd be styled as a normal page.

\r\n

Back\r\n to page \"one\"

\r\n
\r\n\r\n
\r\n

Page Footer

\r\n
\r\n
\r\n\r\n
\r\n

loading

\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Drop here!
\r\n
\r\n
\r\n\r\n\r\n\r\n\r\n\r\n```","answerCount":2,"upvoteCount":0,"datePublished":"2019-12-10T14:57:30.634Z","dateModified":"2019-12-10T14:57:30.634Z","acceptedAnswer":{"@type":"Answer","text":"いつからか追加された`data-gr-c-s-loaded`の実際の用途についてはBootstrapから特に何のアナウンスも無いので不明ですが、\r\n\r\n`data-* = \"hoge\"` という記載は、data属性と言われるもので `jQuery` の中で**変数**のように取り扱う事ができる属性です。\r\ndata-以降の文字列は「英小文字」「数字」「-」「_」「.」「:」から、まさに [**変数名**] として自由につけることができます。\r\n\r\n`data-gr-c-s-loaded=\"true\"`の意味としては\r\n・`data-` データ属性の接頭語\r\n・`gr-c-s-loaded` gr-c-s な条件で読み込み（load）された時\r\n・=\"true\"` true を返す\r\n\r\nと言った意味で記載されています。\r\n\r\n\r\n実際にjqueryでは\r\n\r\n```jQuery\r\nvar flag = $('body').data('gr-c-s-loaded'); //flag = true \r\n\r\n```\r\n\r\nという風に `.data()` で取り出す事ができ、\r\nおそらくtrueの時とfalseの時で違う処理を走らせるためのデータセット記載と推定できます。\r\n\r\n実際の処理に使われているデータ値であれば、\r\n同時に読み込まれている [.jsファイル] の中を探せば `.data()` で呼び出されている箇所が見つかるハズです。\r\n\r\n▼dataの扱いについてわかりやすく解説しているブログがあったので貼っておきます。\r\n[https://www.sejuku.net/blog/38263](https://www.sejuku.net/blog/38263)","dateModified":"2019-12-11T01:47:42.296Z","datePublished":"2019-12-11T01:15:59.116Z","upvoteCount":1,"url":"https://teratail.com/questions/228666#reply-334082"},"suggestedAnswer":[{"@type":"Answer","text":"シンプルに「data-gr-c-s-loaded」でググったら、次のredditに行き当たりました。\r\n\r\n> psnoonan 5 points·3 years ago\r\nThe Grammarly extension adds that attribute.\r\n\r\n[https://www.reddit.com/r/chrome/comments/46eoi0/datagrcsloaded_attribute_added_to_body_tag_on_all/](https://www.reddit.com/r/chrome/comments/46eoi0/datagrcsloaded_attribute_added_to_body_tag_on_all/)","dateModified":"2019-12-10T16:52:04.536Z","datePublished":"2019-12-10T16:52:04.536Z","upvoteCount":2,"url":"https://teratail.com/questions/228666#reply-334029","comment":[]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/HTML5","name":"HTML5に関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/228666","name":"bodyタグ内のdata-gr-c-s-loaded=\"true\"とは？"}}]}}}
teratail
回答率
85.29%
質問するログイン新規登録
トップHTML5に関する質問bodyタグ内のdata-gr-c-s-loaded="true"とは？

Q&A

解決済

2回答

3066閲覧

bodyタグ内のdata-gr-c-s-loaded="true"とは？

SSi
SSi

総合スコア6

HTML5

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

0グッド

0クリップ

投稿2019/12/10 14:57

0

0

私の状況

フロントエンド勉強3日目程度です。
jQueryかbootstrapを使用しているソースでよく見るような気がしますが、
それらのリファレンスサイトで検索しても出ず。
また、そのままググってもピンとくる情報にたどり着けません。

丸投げの質問で本当にすみません。

知りたいこと

data-gr-c-s-loaded="true"　の役割
もしくは、解説のあるサイトにたどり着けそうな検索キーワード

遭遇したソース

monacaのサンプルプロジェクト"jQuery Mobile MultiPage"のhtmlのbodyタグ内。
ページ自体はjquery mobileを使用したページ遷移のサンプルプロジェクトとのこと。

html
1<!DOCTYPE HTML>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
8  <script src="components/loader.js"></script>
9  <link rel="stylesheet" href="components/loader.css">
10  <link rel="stylesheet" href="css/style.css">
11  <link rel="stylesheet" href="lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
12  <script src="lib/jquery/jquery-1.12.4.min.js"></script>
13  <script src="lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
14  <script>
15  </script>
16</head>
17
18<body data-gr-c-s-loaded="true" class="ui-mobile-viewport ui-overlay-a" style="" data-feedly-mini="yes">
19
20  <!-- Start of first page: #one -->
21  <div data-role="page" id="one" data-url="one" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="">
22    <div data-role="header" role="banner" class="ui-header ui-bar-inherit">
23      <h1 class="ui-title" role="heading" aria-level="1">Multi-page</h1>
24    </div><!-- /header -->
25
26    <div role="main" class="ui-content">
27      <h2>One</h2>
28      <p><a href="#two" class="ui-btn ui-shadow ui-corner-all">Show page "two"</a></p>
29      <p><a href="#popup" class="ui-btn ui-shadow ui-corner-all" data-rel="dialog" data-transition="pop">Show page
30          "popup" (as a dialog)</a></p>
31    </div><!-- /content -->
32
33    <div data-role="footer" data-theme="a" role="contentinfo" class="ui-footer ui-bar-a">
34      <h4 class="ui-title" role="heading" aria-level="1">Page Footer</h4>
35    </div><!-- /footer -->
36  </div><!-- /page one -->
37
38  <!-- Start of second page: #two -->
39  <div data-role="page" id="two" data-theme="a" data-url="two">
40    <div data-role="header">
41      <h1>Two</h1>
42    </div><!-- /header -->
43
44    <div role="main" class="ui-content">
45      <h2>Two</h2>
46      <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
47      <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch
48        assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're
49        keeping these simple.</p>
50      <p><a href="#one" data-direction="reverse" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Back to page "one"</a></p>
51    </div><!-- /content -->
52
53    <div data-role="footer">
54      <h4>Page Footer</h4>
55    </div><!-- /footer -->
56  </div><!-- /page two -->
57
58  <!-- Start of third page: #popup -->
59  <div data-role="page" id="popup" data-url="popup">
60    <div data-role="header" data-theme="b">
61      <h1>Dialog</h1>
62    </div><!-- /header -->
63
64    <div role="main" class="ui-content">
65      <h2>Popup</h2>
66      <p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code>
67        attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the
68        transition to pop. Without this, I'd be styled as a normal page.</p>
69      <p><a href="#one" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-icon-back ui-btn-icon-left">Back
70          to page "one"</a></p>
71    </div><!-- /content -->
72
73    <div data-role="footer">
74      <h4>Page Footer</h4>
75    </div><!-- /footer -->
76  </div><!-- /page popup -->
77
78  <div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
79    <h1>loading</h1>
80  </div>
81  <div id="weava-permanent-marker" date="1538710288557"></div>
82  <div id="feedly-mini" title="feedly Mini tookit"></div>
83  <div id="weava-ui-wrapper">
84    <div class="weava-drop-area-wrapper">
85      <div class="weava-drop-area"></div>
86      <div class="weava-drop-area-text">Drop here!</div>
87    </div>
88  </div>
89</body>
90
91</html>
92
93

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

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

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

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

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

m.ts10806
m.ts10806

2019/12/10 20:57

>ピンとくる情報 それはご自身の理解力が乏しいためか、サイトの説明が悪いか誰にも分からないので、確認した記事やサイトURLを代表的なもので良いので幾つかピックアップしてご提示ください
guest

回答2件

0

シンプルに「data-gr-c-s-loaded」でググったら、次のredditに行き当たりました。

psnoonan 5 points·3 years ago
The Grammarly extension adds that attribute.

https://www.reddit.com/r/chrome/comments/46eoi0/datagrcsloaded_attribute_added_to_body_tag_on_all/

投稿2019/12/10 16:52

thyda.eiqau
thyda.eiqau

総合スコア2982

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

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

0

ベストアンサー

いつからか追加されたdata-gr-c-s-loadedの実際の用途についてはBootstrapから特に何のアナウンスも無いので不明ですが、

data-* = "hoge" という記載は、data属性と言われるもので jQuery の中で変数のように取り扱う事ができる属性です。
data-以降の文字列は「英小文字」「数字」「-」「_」「.」「:」から、まさに [変数名] として自由につけることができます。

data-gr-c-s-loaded="true"の意味としては
・data- データ属性の接頭語
・gr-c-s-loaded gr-c-s な条件で読み込み（load）された時
・="true"` true を返す

と言った意味で記載されています。

実際にjqueryでは

jQuery
1var flag = $('body').data('gr-c-s-loaded'); //flag = true 
2

という風に .data() で取り出す事ができ、
おそらくtrueの時とfalseの時で違う処理を走らせるためのデータセット記載と推定できます。

実際の処理に使われているデータ値であれば、
同時に読み込まれている [.jsファイル] の中を探せば .data() で呼び出されている箇所が見つかるハズです。

▼dataの扱いについてわかりやすく解説しているブログがあったので貼っておきます。
https://www.sejuku.net/blog/38263

投稿2019/12/11 01:15

編集2019/12/11 01:47
iss
iss

総合スコア506

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問

トップHTML5に関する質問

bodyタグ内のdata-gr-c-s-loaded="true"とは？