teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

前回の私の質問1、2、5に関してご回答いただいた内容に関して

2021/09/27 14:24

投稿

hence
hence

スコア6

title CHANGED
File without changes
body CHANGED
@@ -49,89 +49,7 @@
49
49
  以下のソースコードのどの部分を削除すればよろしいでしょうか?
50
50
 
51
51
 
52
- <!DOCTYPE html>
53
- <html class="no-js seed-csp4" lang="en">
54
- <head>
55
- <meta charset="utf-8">
56
- <title>Nothing found for Wp Archives 166493</title>
57
-
58
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
59
-
60
-
61
- <!-- Bootstrap and default Style -->
62
- <link rel="stylesheet" href="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/bootstrap/css/bootstrap.min.css">
63
- <link rel="stylesheet" href="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/style.css">
64
- <style type="text/css">
65
- /* calculated styles */
66
52
 
67
- /* Background Style */
68
- html{
69
- height:100%;
70
- background: #fafafa;
71
- }
72
- .seed-csp4 body{
73
- height:100%;
74
- background: transparent;
75
- }
76
-
77
-
78
-
79
- /* Text Styles */
80
- .seed-csp4 body{
81
- font-family: Helvetica, Arial, sans-serif }
82
-
83
- .seed-csp4 h1, .seed-csp4 h2, .seed-csp4 h3, .seed-csp4 h4, .seed-csp4 h5, .seed-csp4 h6{
84
- font-family: Helvetica, Arial, sans-serif }
85
-
86
- .seed-csp4 body{
87
- color:#666666;
88
- }
89
-
90
-
91
-
92
- .seed-csp4 h1, .seed-csp4 h2, .seed-csp4 h3, .seed-csp4 h4, .seed-csp4 h5, .seed-csp4 h6{
93
- color:#444444;
94
- }
95
-
96
-
97
- .seed-csp4 a, .seed-csp4 a:visited, .seed-csp4 a:hover, .seed-csp4 a:active{
98
- color:#27AE60;
99
- }
100
-
101
-
102
- </style>
103
- <!-- JS -->
104
- <script src="http://monopowers.com/profile/wordpress/wp-includes/js/jquery/jquery.js"></script>
105
- <script src="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/bootstrap/js/bootstrap.js"></script>
106
- <script src="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/js/script.js"></script>
107
- <!-- Modernizr -->
108
- <script src="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/js/modernizr.min.js"></script>
109
-
110
-
111
- </head>
112
- <body>
113
- <div class="row">
114
- <div class="col-md-12">
115
- <div id="seed-csp4-content">
116
-
117
- <h1 id="seed-csp4-headline">メンテナンス中</h1>
118
- <div id="seed-csp4-description"><p>長期メンテナンス中です</p>
119
- </div>
120
- </div><!-- / #seed-csp4-content -->
121
- </div></div>
122
-
123
-
124
-
125
- <!--[if lt IE 9]>
126
- <script>
127
- jQuery(document).ready(function($){$.supersized({slides:[ {image : ''} ]});});
128
- </script>
129
- <![endif]-->
130
- </body>
131
- </html>
132
-
133
- <!-- Coming Soon Page and Maintenance Mode by SeedProd. Learn more: http://www.seedprod.com -->
134
-
135
53
  ### 発生している問題・エラーメッセージ
136
54
  プログラミングの知識が無い人に、ソースコード中の(←●1)及び(←●2)が何を意味しているのかを説明する必要がありますので、ご教授いただければ、本当に助かります。
137
55
  ```
@@ -156,7 +74,65 @@
156
74
  </body>
157
75
  </html>
158
76
  ```
77
+ ●9月27日 23時07分 追記致します。文字数制限がある為、大変恐縮ながら、前回掲載したソースコードのフルバージョンを割愛させていただきました。宜しくお願い致します。
159
78
 
79
+ ご回答いただき、本当に助かります。ありがとうございます。
80
+
81
+ ご教授いただき、503 で表示されている「メンテナンス中」のページが、本来のコンテンツとは別のページであることが理解できました。
82
+ supersizedの読み込みの<処理概要>も本当に助かりました。:や連想配列にかかる{[]}の意味や書き方ついても大変勉強になりました。感謝致します。
83
+
84
+ 質問が多くて恐縮です。
85
+
86
+ 質問1 
87
+ 前回の私の質問1につき、ご回答いただいた内容の中の
88
+
89
+ >なお、今回の 503 のページでは、上記の 1~2 までの処理しか行われず、3~4 は動作していません。
90
+  したがって、
91
+   <div id="supersized-loader"></div>
92
+   <ul id="supersized"></ul>
93
+  のタグだけが残った状態となっています。
94
+
95
+ の部分ですが、添付画像の右のソースコードの6行目の<!--[if lt IE 9]>より、IEの9以上のブラウザ、又はIE以外のChrome,Firefox等のブラウザで閲覧していることが理由で今回のhttp503 の「メンテナンス中」のページでは、上記の 1~2までの処理しか行われず、3の<div id="supersized-loader"></div>と、4の<ul id="supersized"></ul> は動作していない《即ち、IE8以下のブラウザで閲覧した場合のみsupersizedプラグインの初期化処理が呼ばれて"supersized-loader" の位置に処理中を表す画像(60x60のサイズの画像)が表示され、且つ初期化処理で指定された画像ファイルを読み込もうとする(「imgage:’’」に何も画像ファイルを設定していないので、読み込もうとするだけ) 》との理解でよろしいでしょうか?
96
+ (もし、そうでなければ、今回のhttp503 ページで supersized プラグインの初期化処理が行われない理由は何処にあるのでしょうか?また、初期化処理が行われないことを、ソースコードのどの箇所を見て判断するのでしょうか?)
97
+
98
+
99
+ 質問2
100
+ 試しにGoogle ChromeのブラウザでJavascriptを無効にしても、Javascriptを有効にしている時と同じhttp503 の「メンテナンス中」のページが表示されました。
101
+ 添付画像の右側に書かれたソースコードの2行目の<html class="no-js seed-csp4" lang="en">は、「ModernizrというJavaScriptライブラリがインストールされている理由で、ブラウザのJavaScriptが無効ならseed-csp4を実行する。ブラウザのJavaScriptが有効なら、CSSのクラス名のclass=no-jsがjsに置き変わり、seed-csp4を実行する。英語準拠」との理解でよろしいでしょうか?
102
+
103
+
104
+ 質問3
105
+ 以前に表示されていたウェブページのソースコードの中には、以前に表示されていたウェブページを該当URLから切り離してインターネットに接続しない指示だけが追加で書かれているという理解でよろしいでしょうか?
106
+ 即ち、●「supersizedのフルスクリーン表示を同URLに紐づけて表示させる指示である<ul id=“supersized”></ul>」や、●「Javascriptを有効、無効にかかわらず、IEの9以上のブラウザ、又はIE以外のChrome,Firefox等のブラウザで閲覧していた場合に“seedcsp4”(https://wordpress.org/plugins/coming-soon/)の(メンテナンス中)のページを同URLに紐づけて表示させる指示」は、あくまで現在表示されている「メンテナンス中」のウェブページに該当URLを紐づけて「メンテナンス中」の画面を表示させる指示であり、それらの各指示は、以前に表示されていた同じ該当URLを持つウェブページのソースコードの中には書かれていない(以前に表示されていたウェブページのソースコードには、以前に表示されていたウェブページを該当URLから切り離してインターネットに接続しない指示のソースコードだけが追加で書かれている)という理解でよろしいでしょうか?
107
+
108
+
109
+ 質問4
110
+ ここで述べる事は質問3と相反する内容ですが、該当URLにつき、以前に表示されていたウェブページを、「Webサイトのメンテナンス中画面を出す正しい作法と.htaccessの書き方」(https://webtan.impress.co.jp/e/2009/06/16/5880)に掲載されていた『メンテ中画面を出すWebサーバーに/maintenance.htmlというファイルを作り、そのファイルの中にブラウザ越しにウェブページを見た人間に対して表示する「メンテナンス中」を表示する為にHTMLで書いたメッセージ』及び.htaccessの「ソースコードA」(ソースコードAは便宜上、私が名づけたもので、今回の質問文の最下部に記載のもの)を書いて実行して、以前に表示されていたウェブページを非表示(「メンテナンス中」と表示される現在のページを表示)
111
+ にしていた場合、メンテナンス中画面を出すWebサーバーに作った/maintenance.htmlというファイルを丸ごと削除し(ブラウザ越しにウェブページを見た人間に対して表示する「メンテナンス中」を表示する為にHTMLで書いたメッセージも丸ごと削除)、且つ本質問文最下部に記載の「ソースコードA」を全て削除すれば、以前に表示されていたウェブページを再表示できるとの理解でよろしいでしょうか?
112
+
113
+
114
+ 質問5
115
+ 添付画像の「メンテナンス中」の記事のURLは「~.com/wp/archives~」となっており、ワードプレスの「wp」の英字が含まれるのですが、「メンテナンス中」の記事及び以前に表示されていた記事の作成者は、「WordPressの記事やサイトを非公開にする方法2つを紹介」(https://www.sejuku.net/blog/62544)のサイトの真ん中辺りの「記事を非公開にする方法」の中に載っているWordPressの機能の中の「非公開」のボタンを押す操作を実行して「メンテナンス中」の表示にしているのでしょうか? あるいは、「Webサイトのメンテナンス中画面を出す正しい作法と.htaccessの書き方」(https://webtan.impress.co.jp/e/2009/06/16/5880)に掲載されている方法の様に、「メンテナンス中」画面を出すWebサーバーに/maintenance.htmlというファイルを作り、ブラウザ越しにウェブページを見た人間に対して表示するメッセージ(メンテナンス中です)をHTMLで書いた後、本質問文最下部に記載の「ソースコードA」をhtaccess(またはhttpd.conf)で書いて「メンテナンス中」のページにしているのでしょうか?二つの異なる方法のどちらを使って非表示にしているのかを知る方法は存在しますか?存在するのであればその方法とは何でしょうか?
116
+
117
+
118
+ 質問6
119
+ 添付画像の右側のソースコードの2行目に<html class=“no-js seed-csp4”lang=“en” style>と記載があり、その意味が、「ModernizrというJavaScriptライブラリがインストールされている理由で、ブラウザのJavaScriptが無効ならseed-csp4を実行する。ブラウザのJavaScriptが有効なら、CSSのクラス名のclass=no-jsがjsに置き変わり、seed-csp4を実行する。英語準拠」であるから(質問2の内容)、“seedcsp4”(https://wordpress.org/plugins/coming-soon/)のメンテナンスモード(ワードプレスのプラグイン)の「メンテナンス中」のページが表示されるのであって、、「Webサイトのメンテナンス中画面を出す正しい作法と.htaccessの書き方」(https://webtan.impress.co.jp/e/2009/06/16/5880)に掲載されている方法の様に、メンテナンス画面を出すWebサーバーに/maintenance.htmlというファイルを作り、ブラウザ越しにウェブページを見た人間に対して表示するメッセージ(メンテナンス中)をHTMLで書いた後、本質問文最下部に記載の「ソースコードA」をhtaccess(またはhttpd.conf)で書いて「メンテナンス中」の表示にしているということになり、メンテナンス中画面を出すWebサーバーに作った/maintenance.htmlというファイルを丸ごと削除し(ブラウザ越しにウェブページを見た人間に対して表示する「メンテナンス中」を表示する為にHTMLで書いたメッセージも丸ごと削除)、且つ本質問文最下部に記載の「ソースコードA」を全て削除すれば、以前に表示されていたウェブページを再表示できるとの理解でよろしいでしょうか?
120
+
121
+
122
+
123
+ 「ソースコードA」《「Webサイトのメンテナンス中画面を出す正しい作法と.htaccessの書き方」(https://webtan.impress.co.jp/e/2009/06/16/5880)より抜粋》
124
+
125
+ .htaccess(またはhttpd.conf)で書く
126
+
127
+
128
+ ErrorDocument 503 /maintenance.html
129
+
130
+ <IfModule mod_rewrite.c>
131
+ RewriteEngine On
132
+ RewriteCond %{REQUEST_URI} !=/maintenance.html
133
+ RewriteRule ^.*$ - [R=503,L]
134
+ </IfModule>
135
+                           
160
136
  ### 試したこと
161
137
  図書館で何冊も本を見たり、数々のサイトで調べましたが、JQueryにおいてのかっこの連続:''}]});});の意味やコロンの意味、ダブルクオテーションの意味を詳しく解説しているものは見当たりませんでした。
162
138
 

1

追記に関して:ご回答いただいた内容を読み、改めて自らの質問を読んで発生した疑問点につき、質問致します。

2021/09/27 14:24

投稿

hence
hence

スコア6

title CHANGED
File without changes
body CHANGED
@@ -18,6 +18,120 @@
18
18
  自分の考えでは、順序のないsupersized(フルスクリーン表示の為のJQueryプラグイン)をulで定義するとの事だと思うのですが、背景が白一色で、画面の中央に小さく「メンテナンス中」と書いているウェブページを、ulで定義する理由もわかりません。
19
19
  (ちなみに、GoogleのChromeのブラウザ上で右クリックメニューの「検証」をクリックして表示した画面上で、(←●2)のコードの上の行の<div id=“supersized-loader”></div>の部分にカーソルをあてると、23インチモニターで見て2センチ角の紫色の正方形が表示され(添付画像)、その正方形の上に「div#supersized-loader 60×60」と表示されました。
20
20
 
21
+ ●9月27日 これより下に追記致します。
22
+
23
+ ご回答ありがとうございます。大変有用なサイトの数々をご紹介いただき、本当に助かります。
24
+ 質問が多くて恐縮です。
25
+
26
+ 質問1
27
+ ご紹介していただいた「【jQuery】背景画像を画面いっぱいでスライドショーさせる方法」のサイトのコードをGoogle Chromeの右クリックの検証をクリックして見て見ると、<div id=“supersized-loader”></div>の記述はありませんでした。添付画像の様なメンテナンス中の固定ページにはsupersizedをローディングする為に、<div id=“supersized-loader”></div>の記述が必要であるところ、ご紹介いただいたスライドショーで順次切り替わる様なウェブページでは、ローディング自体が必要ないということでしょうか?
28
+
29
+ 質問2
30
+ (←●2)についてなのですが、背景が白一色で、画面の中央に小さく「メンテナンス中」と書いているウェブページを、順序なしリスト要素のulで定義する理由がわかりません。
31
+ ご紹介していただいた「【jQuery】背景画像を画面いっぱいでスライドショーさせる方法」もulで定義されていましたが、div要素は同じページに一度しか使えない為、“supersized”をローディングする為の<div id=“supersized-loader”></div>をコードに書くと、「メンテナンス中です」と真ん中に記された全画面ページ(スライドショーの様に順次切り替わらない固定ページ)のコードを順序無しリストを定義するul要素で<ul id=“supersized”></ul>となるのだろうと思いますが、ul以外でも固定の全画面ページを指定できるのでしょうか?
32
+
33
+ 質問3
34
+ slides: [{ や、image: '' の中のコロン: は「ラベル名: 実行文」という理解でよろしいでしょうか
35
+
36
+ 質問4
37
+ Online JavaScript Beautifier で整形表示したコードの意味を書き直しました。間違っているところをご指摘いただければ助かります。
38
+
39
+ JQuery(document).ready(function($)      オブジェクトのJQueryが、( をもってreadyメソッドの定義を開始し、$.supersized を入れる為のコードのブロックの始点として { を置く
40
+ $.supersized({     supersizedが連想配列のパラメータ名であるslidesを呼出す為の始点として ( を置き、slidesを入れる為のコードのブロックの始点として { を置く
41
+ slides: [{      連想配列のパラメータ名であるslidesの配列を生成する為に [ を始点とし、値が入るブロックの始点として { を置く。
42
+ image: ''      連想配列の画像ファイル名であるimageが実行文の文字列を指定する為に''を置いたが、'と'の間に入れるべき実行文の文字列は指定されていない
43
+ }]    連想配列の画像ファイル名であるimageの配列に対応する値が入るブロックを完成させる為に } を置き、] を置いて連想配列のパラメータ名であるimageの配列を生成を完成させる。
44
+ }); supersizedが連想配列のパラメータ名であるslidesを入れる為のコードのブロックの終点として}を置き、slidesを呼出しを完成させる為に)を置き、;を置いてプログラムの最小構成単位を終了する
45
+
46
+ 質問5
47
+ 以下は、Googke Chromeの右クリックメニューのソースを表示をクリックして表示した該当ページの全てのソースコードですが、
48
+ もし、現在表示されている「「メンテナンス中」のページの表示をとりやめ、本来表示されていたウェブページを再表示するには、
49
+ 以下のソースコードのどの部分を削除すればよろしいでしょうか?
50
+
51
+
52
+ <!DOCTYPE html>
53
+ <html class="no-js seed-csp4" lang="en">
54
+ <head>
55
+ <meta charset="utf-8">
56
+ <title>Nothing found for Wp Archives 166493</title>
57
+
58
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
59
+
60
+
61
+ <!-- Bootstrap and default Style -->
62
+ <link rel="stylesheet" href="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/bootstrap/css/bootstrap.min.css">
63
+ <link rel="stylesheet" href="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/style.css">
64
+ <style type="text/css">
65
+ /* calculated styles */
66
+
67
+ /* Background Style */
68
+ html{
69
+ height:100%;
70
+ background: #fafafa;
71
+ }
72
+ .seed-csp4 body{
73
+ height:100%;
74
+ background: transparent;
75
+ }
76
+
77
+
78
+
79
+ /* Text Styles */
80
+ .seed-csp4 body{
81
+ font-family: Helvetica, Arial, sans-serif }
82
+
83
+ .seed-csp4 h1, .seed-csp4 h2, .seed-csp4 h3, .seed-csp4 h4, .seed-csp4 h5, .seed-csp4 h6{
84
+ font-family: Helvetica, Arial, sans-serif }
85
+
86
+ .seed-csp4 body{
87
+ color:#666666;
88
+ }
89
+
90
+
91
+
92
+ .seed-csp4 h1, .seed-csp4 h2, .seed-csp4 h3, .seed-csp4 h4, .seed-csp4 h5, .seed-csp4 h6{
93
+ color:#444444;
94
+ }
95
+
96
+
97
+ .seed-csp4 a, .seed-csp4 a:visited, .seed-csp4 a:hover, .seed-csp4 a:active{
98
+ color:#27AE60;
99
+ }
100
+
101
+
102
+ </style>
103
+ <!-- JS -->
104
+ <script src="http://monopowers.com/profile/wordpress/wp-includes/js/jquery/jquery.js"></script>
105
+ <script src="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/bootstrap/js/bootstrap.js"></script>
106
+ <script src="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/js/script.js"></script>
107
+ <!-- Modernizr -->
108
+ <script src="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/js/modernizr.min.js"></script>
109
+
110
+
111
+ </head>
112
+ <body>
113
+ <div class="row">
114
+ <div class="col-md-12">
115
+ <div id="seed-csp4-content">
116
+
117
+ <h1 id="seed-csp4-headline">メンテナンス中</h1>
118
+ <div id="seed-csp4-description"><p>長期メンテナンス中です</p>
119
+ </div>
120
+ </div><!-- / #seed-csp4-content -->
121
+ </div></div>
122
+
123
+
124
+
125
+ <!--[if lt IE 9]>
126
+ <script>
127
+ jQuery(document).ready(function($){$.supersized({slides:[ {image : ''} ]});});
128
+ </script>
129
+ <![endif]-->
130
+ </body>
131
+ </html>
132
+
133
+ <!-- Coming Soon Page and Maintenance Mode by SeedProd. Learn more: http://www.seedprod.com -->
134
+
21
135
  ### 発生している問題・エラーメッセージ
22
136
  プログラミングの知識が無い人に、ソースコード中の(←●1)及び(←●2)が何を意味しているのかを説明する必要がありますので、ご教授いただければ、本当に助かります。
23
137
  ```