Q&A
上記の「該当のソースコード」に書かれたコードですが、オリジナルのソースではなく、書き写したものでしょうか？
色々と誤りがあるようです。
・全角/半角の違い
・綴り間違い
・記号の使用法の誤り
etc..
前提・実現したいこと
JQueryのソースコードの中のかっこの意味を教えて下さい。
最下部のコードは、メンテナンスモード（HTTP503)のページのコードで、GoogleのChromeのブラウザ上で右クリックメニューの「検証」をクリックして表示したソースコードですが、このソースコードが示すウェブページが非表示状態（削除ではない）ことを、プログラミングの知識が無い人に説明する必要があります。私自身、そのソースコードの中で、下記の質問以外の箇所は理解できる状態です。
先ず、下記のコードの<body>の5行目の（←●１）がわからない箇所です。
JQueryのドキュメントオブジェクトがHTML要素を読み込んでから、↓1から↓2（説明の為に↓1と↓2をつけました）までの{}の中身のreadyメソッドを実行するということは理解できるのですが、下記ソースコードの<body>の5行目の↓1から↓2までの{}の中身でわからない箇所を以下に記します。
先ず、$.supersized →（JQueryのsupersizedというプラグイン）ですが、「.」(ドット）が「の」という理解でよろしいでしょうか？
次に、｛ がオブジェクトの生成のかっこの始まりとしての｛ なのか、コードの（かたまり）としてかっこの始まりの｛なのかわかりません。
次にslidesの意味も、スライドショーのフルスクリーン表示なのかどうかいまいち確信を持てません。
次に、slidesの右側の : も わからない点です。（オブジェクトリテラルでしょうか？）
次に、[ は、配列（array)の生成のかっこの始まりとしての[ではないかと思いますが、いまいち確信を持てません。
次に、{image:''}は、全体が「オブジェクトの生成」なのか、コードのブロック（かたまり）なのかわかりませんし、:コロンと''ダブルクオテーションの意味もわかりません。
次に、]});}); の部分は、其々の初めの括弧を閉じていて、セミコロンがプログラムの最小構成単位を閉じていることはわかりますが、其々の括弧の意味がわかりません。
次に、下記のソースコード中の（←●２）がわからない箇所です。
自分の考えでは、順序のないsupersized(フルスクリーン表示の為のJQueryプラグイン）をulで定義するとの事だと思うのですが、背景が白一色で、画面の中央に小さく「メンテナンス中」と書いているウェブページを、ulで定義する理由もわかりません。
（ちなみに、GoogleのChromeのブラウザ上で右クリックメニューの「検証」をクリックして表示した画面上で、（←●２）のコードの上の行の<div id=“supersized-loader”></div>の部分にカーソルをあてると、23インチモニターで見て２センチ角の紫色の正方形が表示され(添付画像）、その正方形の上に「div#supersized-loader 60×60」と表示されました。
●9月27日 これより下に追記致します。
ご回答ありがとうございます。大変有用なサイトの数々をご紹介いただき、本当に助かります。
質問が多くて恐縮です。
質問１
ご紹介していただいた「【jQuery】背景画像を画面いっぱいでスライドショーさせる方法」のサイトのコードをGoogle Chromeの右クリックの検証をクリックして見て見ると、<div id=“supersized-loader”></div>の記述はありませんでした。添付画像の様なメンテナンス中の固定ページにはsupersizedをローディングする為に、<div id=“supersized-loader”></div>の記述が必要であるところ、ご紹介いただいたスライドショーで順次切り替わる様なウェブページでは、ローディング自体が必要ないということでしょうか？
質問２
（←●２）についてなのですが、背景が白一色で、画面の中央に小さく「メンテナンス中」と書いているウェブページを、順序なしリスト要素のulで定義する理由がわかりません。
ご紹介していただいた「【jQuery】背景画像を画面いっぱいでスライドショーさせる方法」もulで定義されていましたが、div要素は同じページに一度しか使えない為、“supersized”をローディングする為の<div id=“supersized-loader”></div>をコードに書くと、「メンテナンス中です」と真ん中に記された全画面ページ（スライドショーの様に順次切り替わらない固定ページ）のコードを順序無しリストを定義するul要素で<ul id=“supersized”></ul>となるのだろうと思いますが、ul以外でも固定の全画面ページを指定できるのでしょうか？
質問３
slides: [{ や、image: '' の中のコロン: は「ラベル名: 実行文」という理解でよろしいでしょうか
質問4
Online JavaScript Beautifier で整形表示したコードの意味を書き直しました。間違っているところをご指摘いただければ助かります。
JQuery(document).ready(function($) オブジェクトのJQueryが、( をもってreadyメソッドの定義を開始し、$.supersized を入れる為のコードのブロックの始点として { を置く
$.supersized({ supersizedが連想配列のパラメータ名であるslidesを呼出す為の始点として ( を置き、slidesを入れる為のコードのブロックの始点として { を置く
slides: [{ 連想配列のパラメータ名であるslidesの配列を生成する為に [ を始点とし、値が入るブロックの始点として { を置く。
image: '' 連想配列の画像ファイル名であるimageが実行文の文字列を指定する為に''を置いたが、'と'の間に入れるべき実行文の文字列は指定されていない
}] 連想配列の画像ファイル名であるimageの配列に対応する値が入るブロックを完成させる為に } を置き、] を置いて連想配列のパラメータ名であるimageの配列を生成を完成させる。
}); supersizedが連想配列のパラメータ名であるslidesを入れる為のコードのブロックの終点として}を置き、slidesを呼出しを完成させる為に)を置き、；を置いてプログラムの最小構成単位を終了する
質問５
以下は、Googke Chromeの右クリックメニューのソースを表示をクリックして表示した該当ページの全てのソースコードですが、
もし、現在表示されている「「メンテナンス中」のページの表示をとりやめ、本来表示されていたウェブページを再表示するには、
以下のソースコードのどの部分を削除すればよろしいでしょうか？
発生している問題・エラーメッセージ
プログラミングの知識が無い人に、ソースコード中の（←●１）及び（←●２）が何を意味しているのかを説明する必要がありますので、ご教授いただければ、本当に助かります。
エラーメッセージは特にありません ```](f480e60d28c59bdbe4808c3c5b44beda.jpeg) ### 該当のソースコード ```JQuery <body> <div class=“row”>..</div> <！－－[if It IE9]> <script> ↓1 ↓2 jQuery(document).ready(function($）{$.supersized(｛slides:[{image:''}]});});←●１ </script> <![endif]-->==$ <！--Coming Soon Page and Maintenance Mode by SeedProd. Learn more: http://www.seedprod.com--> <div id=“supersized-loader”></div> <ul id=“supersized”></ul> ←●２ </body> </html>
●9月27日 23時07分 追記致します。文字数制限がある為、大変恐縮ながら、前回掲載したソースコードのフルバージョンを割愛させていただきました。宜しくお願い致します。
ご回答いただき、本当に助かります。ありがとうございます。
ご教授いただき、503 で表示されている「メンテナンス中」のページが、本来のコンテンツとは別のページであることが理解できました。
supersizedの読み込みの＜処理概要＞も本当に助かりました。：や連想配列にかかる{[]}の意味や書き方ついても大変勉強になりました。感謝致します。
質問が多くて恐縮です。
質問１
前回の私の質問１につき、ご回答いただいた内容の中の
＞なお、今回の 503 のページでは、上記の 1～2 までの処理しか行われず、3～4 は動作していません。
したがって、
<div id="supersized-loader"></div>
<ul id="supersized"></ul>
のタグだけが残った状態となっています。
の部分ですが、添付画像の右のソースコードの6行目の<!--[if lt IE 9]>より、IEの９以上のブラウザ、又はIE以外のChrome,Firefox等のブラウザで閲覧していることが理由で今回のhttp503 の「メンテナンス中」のページでは、上記の 1～2までの処理しか行われず、3の<div id="supersized-loader"></div>と、4の<ul id="supersized"></ul> は動作していない《即ち、IE8以下のブラウザで閲覧した場合のみsupersizedプラグインの初期化処理が呼ばれて"supersized-loader" の位置に処理中を表す画像（60x60のサイズの画像）が表示され、且つ初期化処理で指定された画像ファイルを読み込もうとする（「imgage:’’」に何も画像ファイルを設定していないので、読み込もうとするだけ) 》との理解でよろしいでしょうか？
（もし、そうでなければ、今回のhttp503 ページで supersized プラグインの初期化処理が行われない理由は何処にあるのでしょうか？また、初期化処理が行われないことを、ソースコードのどの箇所を見て判断するのでしょうか？）
質問２
試しにGoogle ChromeのブラウザでJavascriptを無効にしても、Javascriptを有効にしている時と同じhttp503 の「メンテナンス中」のページが表示されました。
添付画像の右側に書かれたソースコードの2行目の<html class="no-js seed-csp4" lang="en">は、「ModernizrというJavaScriptライブラリがインストールされている理由で、ブラウザのJavaScriptが無効ならseed-csp4を実行する。ブラウザのJavaScriptが有効なら、CSSのクラス名のclass=no-jsがjsに置き変わり、seed-csp4を実行する。英語準拠」との理解でよろしいでしょうか？
質問３
以前に表示されていたウェブページのソースコードの中には、以前に表示されていたウェブページを該当URLから切り離してインターネットに接続しない指示だけが追加で書かれているという理解でよろしいでしょうか？
即ち、●「supersizedのフルスクリーン表示を同URLに紐づけて表示させる指示である<ul id=“supersized”></ul>」や、●「Javascriptを有効、無効にかかわらず、IEの９以上のブラウザ、又はIE以外のChrome,Firefox等のブラウザで閲覧していた場合に“seedcsp4”（https://wordpress.org/plugins/coming-soon/）の（メンテナンス中）のページを同URLに紐づけて表示させる指示」は、あくまで現在表示されている「メンテナンス中」のウェブページに該当URLを紐づけて「メンテナンス中」の画面を表示させる指示であり、それらの各指示は、以前に表示されていた同じ該当URLを持つウェブページのソースコードの中には書かれていない（以前に表示されていたウェブページのソースコードには、以前に表示されていたウェブページを該当URLから切り離してインターネットに接続しない指示のソースコードだけが追加で書かれている）という理解でよろしいでしょうか？
質問４
ここで述べる事は質問３と相反する内容ですが、該当URLにつき、以前に表示されていたウェブページを、「Webサイトのメンテナンス中画面を出す正しい作法と.htaccessの書き方」（https://webtan.impress.co.jp/e/2009/06/16/5880）に掲載されていた『メンテ中画面を出すWebサーバーに/maintenance.htmlというファイルを作り、そのファイルの中にブラウザ越しにウェブページを見た人間に対して表示する「メンテナンス中」を表示する為にHTMLで書いたメッセージ』及び.htaccessの「ソースコードA」（ソースコードAは便宜上、私が名づけたもので、今回の質問文の最下部に記載のもの）を書いて実行して、以前に表示されていたウェブページを非表示（「メンテナンス中」と表示される現在のページを表示）
にしていた場合、メンテナンス中画面を出すWebサーバーに作った/maintenance.htmlというファイルを丸ごと削除し（ブラウザ越しにウェブページを見た人間に対して表示する「メンテナンス中」を表示する為にHTMLで書いたメッセージも丸ごと削除）、且つ本質問文最下部に記載の「ソースコードA」を全て削除すれば、以前に表示されていたウェブページを再表示できるとの理解でよろしいでしょうか？
質問５
添付画像の「メンテナンス中」の記事の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）で書いて「メンテナンス中」のページにしているのでしょうか？二つの異なる方法のどちらを使って非表示にしているのかを知る方法は存在しますか？存在するのであればその方法とは何でしょうか？
質問６
添付画像の右側のソースコードの２行目に<html class=“no-js seed-csp4”lang=“en” style>と記載があり、その意味が、「ModernizrというJavaScriptライブラリがインストールされている理由で、ブラウザのJavaScriptが無効ならseed-csp4を実行する。ブラウザのJavaScriptが有効なら、CSSのクラス名のclass=no-jsがjsに置き変わり、seed-csp4を実行する。英語準拠」であるから（質問２の内容）、“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」を全て削除すれば、以前に表示されていたウェブページを再表示できるとの理解でよろしいでしょうか？
「ソースコードA」《「Webサイトのメンテナンス中画面を出す正しい作法と.htaccessの書き方」（https://webtan.impress.co.jp/e/2009/06/16/5880）より抜粋》
.htaccess（またはhttpd.conf）で書く
ErrorDocument 503 /maintenance.html
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{REQUEST_URI} !=/maintenance.html RewriteRule ^.*$ - [R=503,L] </IfModule> ### 試したこと 図書館で何冊も本を見たり、数々のサイトで調べましたが、JQueryにおいてのかっこの連続:''}]});});の意味やコロンの意味、ダブルクオテーションの意味を詳しく解説しているものは見当たりませんでした。補足情報（FW/ツールのバージョンなど）
私自身は、ソースコードの中の質問以外の箇所と、supersizedがJQueryのプラグインであり、フルスクリーン表示やスライドショーをするためのプラグインであることを理解しています。
supersized でググっていたら出てきましたが、こちらの件でしょうか。
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12249526077
技術的な話ではないようなので、回答は控えさせていただきます。。
オリジナルのソースではなく、書き写したものです。誤記があり、大変失礼しました。
今回、投稿させていただいたコードにかかるURLは、質問の内容は全く違いますが、ご指摘いただいたURLと同じです。
そもそも的な話ですが「←●１」の部分は実行されていないようです。
条件付きコメント <!--[if lt IE 9]> が入っており、IE9未満の場合のみプラグインが動作するようになっています。その為、IE11やChrome、Firefox等ではそのコードは実行されません。
また、仮に上記のプラグインが実行されたとしても、画像ファイル等のパラメータが設定されていない為、何も機能しないと思われます。
＜参考＞
■ IE条件付コメントまとめ
https://html-coding.co.jp/knowhow/tips/000009/
これもそもそも的な話ですが・・・
> このソースコードが示すウェブページが非表示状態（削除ではない）ことを、プログラミングの知識が無い人に説明する
503エラーはページにアクセス出来なかった場合に表示される代替ページです。
表示しようとしているウェブページとは別のページである為、jQuery や supersized プラグインの説明自体が不毛かと思いますが如何でしょうか？
ご回答ありがとうございます。条件付きコメント <!--[if lt IE 9]>が入っており、IE8以下の場合のみ実行され、画像ファイル等のパラメータが設定されていないので機能せず、また、表示しようとしているウェブページとは別の代替ページなのですが、質問のコードをプログラミングの知識が全く無い方に一語一句説明する必要がある為と、最大の理由として、添付画像の右側のソースコードの2行目の<html class=“no-js seed-csp4”の中の seed-csp4 は、SeedProdという会社が作成して公開しているComing Soon Page & Maintenance Modeのページであり、そのページについて解説した「WordPressをインストールしたらComing Soon Page & Maintenance Mode by SeedProdを追加すべし」https://livefreely93.net/archives/80 のウェブページの最下部で、Coming Soon Page & Maintenance Modeで非表示となっているページをボタン一つで表示させることができると書いてありますので、本質問の503のメンテナンス中のページについても、添付画像に掲載されているソースコード（右クリックメニューの検証でだしたソースコードなので、本来のコードはもっと長い）を全て消す？等の方法で、非表示になる前の元々存在したウェブページが表示されることを説明して納得してもらいたいのです。
> https://livefreely93.net/archives/80
そうですね。上記の説明ページにあるように「Coming Soon Page & Maintenance Mode」については WordPress のプラグインを使っている可能性が高いとは思います。
しかしながら、仮にそのプラグインを利用してメンテナンスモードにしていたとしても、一般の購読者が解除する術は無いのではないでしょうか。
そうなんです。WordPress のプラグインを使っていた場合は、記事作成者がワードプレスの管理画面からボタン一つで非表示を解除し、「メンテナンス中」の画面の表示を止めて、元々掲載されていた記事の再表示が可能なのですが、《「Webサイトのメンテナンス中画面を出す正しい作法と.htaccessの書き方」（https://webtan.impress.co.jp/e/2009/06/16/5880）より抜粋》に載っている以下のコードを使って非表示にしているのか、あるいは、ワードプレスの管理画面から非表示のボタン一つで非表示にしているのかを知りたいのです。
.htaccess（またはhttpd.conf）で書く
ErrorDocument 503 /maintenance.html
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} !=/maintenance.html
RewriteRule ^.*$ - [R=503,L]
</IfModule>
すみませんが、当初の質問の内容とだいぶかけ離れてきているかと思いますので、
一旦、この質問終了して別の質問を立ててもらっても良いでしょうか？
承知いたしました。
別の質問として新たに質問致します。
宜しくお願いいたします。
回答1件
0
ベストアンサー
かっこの連続:''}]});});の意味
恐らく１行につながってか書かれているので読みにくいのだと思います。
下記サイトを利用するとコードを整形表示してくれるので、多少見やすくなるかと思います。
■ Online JavaScript Beautifier
https://beautifier.io/
javascript
1jQuery(document).ready(function($) { 2 $.supersized({ 3 slides: [{ 4 image: '' 5 }] 6 }); 7});
下記に supersized プラグインの使い方が記載されていました。
slides で指定した image（画像）を一定間隔で表示するようなプラグインのようです。
■ 【jQuery】背景画像を画面いっぱいでスライドショーさせる方法
https://klutche.org/archives/856/
javascript
1jQuery(function($){ 2 $.supersized({ 3 slide_interval : 5000, 4 transition : 1, 5 transition_speed : 700, 6 slides : [ 7 { image : 'img/01.jpg' }, 8 { image : 'img/02.jpg' }, 9 { image : 'img/03.jpg' }, 10 { image : 'img/04.jpg' }, 11 { image : 'img/05.jpg' } 12 ] 13 }); 14});
カッコの意味としては、
・( xxx ) は関数の引数
・[ aaa, bbb, ccc] は配列
・{ key1: 'value1', key2: 'value2'} は連想配列
になります。
「''」はダブルクォーテーションではなく「'」（シングルクォーテーション）が２つ記載されたものなります。
意味としては「""」と同で、空文字になります。
投稿2021/09/25 16:07
編集2021/09/25 17:15総合スコア4648
大変有用なサイトをご紹介いただき、ありがとうございます。以下に整形表示後の各部について話言葉で書いてみました。間違っているところがあればご指摘いただけないでしょうか？何卒宜しくお願い致します。 二つのクオテーション ’’の意味が全くわかりませんので、そちらも教えていただけないでしょうか？
JQuery(document).ready(function($) { オブジェクトのJQueryが、readyメソッドを宣言
$.supersized({ JQueryのsupersizedのメソッドを呼出し、オブジェクトを生成。
slides: [{ Slidesメソッドの配列を生成し、オブジェクトを生成。
image: '' imageオブジェクトが二つのクオテーション ’’を本ページ内の、操作対象のHTMLの要素を特定するセレクタとして指定
}] Slidesメソッドの終わりを示す } と、配列の生成の終わりを示す ]
}); JQueryのsupersizedというオブジェクト（プラグイン）の生成が終了したことを示す } と、同オブジェクトの呼出を終了する)とプログラムの最小構成単位を終了する；
}); supersized($)という関数(function）というオブジェクトの生成を終了し、次にreadyメソッドを終了する
「''」は、「imageオブジェクトがシングルクォーテーション２つをセレクタとして指定」ということになるのでしょうか？
> $.supersized({ JQueryのsupersizedのメソッドを呼出し、オブジェクトを生成。
supersized() メソッドに渡している { から } までが設定値になります。
スライドショーを行うために必要な情報（スライドショーを切り替える間隔、表示する画像ファイル名等）を設定している形になります。
具体的なライブラリの使用例としてはこちらを参照下さい。
http://klutche.org/demo/supersized/
> slides: [{ Slidesメソッドの配列を生成し、オブジェクトを生成。
「slides」はメソッド(命令)ではなく連想配列と呼ばれる書き方のキーとなる名前になります。
ここではパラメータ名とらえて下さい。slide[s] と名前にあるように、複数のスライド（画像）を設定する為のパラメータのようです。
連想配列の使い方はこちらを参照下さい。
■ 【JavaScript入門】連想配列(Dictionary)の取得/追加/ソートまとめ
https://www.sejuku.net/blog/27965
上記の記事の例から拝借すると、
{ name:'太郎', age:32, tel:'080-1234-5678' }
と、することによって、
設定値[0]
設定値[1]
設定値[2]
ではなく
設定値.name
設定値.age
設定値.tel
というように名前で設定値を参照することが出来るようになります。
> image: '' imageオブジェクトが二つのクオテーション ’’を本ページ内の、操作対象のHTMLの要素を特定するセレクタとして指定
> 「''」は、「imageオブジェクトがシングルクォーテーション２つをセレクタとして指定」ということになるのでしょうか？
こちらの「image」も連想配列になります。セレクタではありません。
パラメータとしては画像ファイル名と思ってください。本来的にはファイル名が入るはずなので「''」となっている場合は、スライドショーを行うためのファイル名は指定されていないことになります。
「''」は「""」と同義で引用符になります。文字列を設定する場合に使用します。
ご回答ありがとうございます。「''」となっている場合は、スライドショーを行うためのファイル名は指定されていないとのご回答をいただき、大変助かりました。念入りに探してもその部分を解説している本やサイトを見つけることが出来ませんでしたので、本当に助かります。ライブラリの使用例と連想配列(Dictionary)の取得/追加/ソートまとめのサイトもとても参考になりました。 このコメント欄に返信と質問を書こうと思ったのですが、質問のウェブページの全てのソースコードを掲載した為に少し長くなってしまいましたので、質問欄に追記致しました。何卒宜しくお願い致します。
> 質問１
> ご紹介していただいた「【jQuery】背景画像を画面いっぱいでスライドショーさせる方法」のサイトのコードをGoogle Chromeの右クリックの検証をクリックして見て見ると、
> <div id=“supersized-loader”></div>の記述はありませんでした。添付画像の様なメンテナンス中の固定ページにはsupersizedをローディングする為に、
> <div id=“supersized-loader”></div>の記述が必要であるところ、ご紹介いただいたスライドショーで順次切り替わる様なウェブページでは、ローディング自体が必要ないということでしょうか？
supersized プラグインが機能しているページでは、以下のような動作になります。
■ 【jQuery】背景画像を画面いっぱいでスライドショーさせるデモページ
http://klutche.org/demo/supersized/
＜処理概要＞
1. supersized プラグインが読み込まれる
<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
2. supersized プラグインの読み込み時に body 部に以下のタグが追加される。
<div id="supersized-loader"></div>
<ul id="supersized"></ul>
3. supersized プラグインの初期化処理が呼ばれる
"supersized-loader" の位置に処理中を表す画像（60x60のサイズの画像）が表示される。
4. 初期化処理で指定された画像ファイルが読み込まれる
読み込みが完了されると "supersized-loader" の記述が非表示になる（処理中ではなくなった為、処理中を表す画像が消える
> ご紹介いただいたスライドショーで順次切り替わる様なウェブページでは、ローディング自体が必要ないということでしょうか？
"supersized-loader" のタグが無いのは、画像の読み込み処理が終わった為に非表示になっている為です。
なお、今回の 503 のページでは、上記の 1～2 までの処理しか行われず、3～4 は動作していません。
したがって、
<div id="supersized-loader"></div>
<ul id="supersized"></ul>
のタグだけが残った状態となっています。
> 質問２
> （←●２）についてなのですが、背景が白一色で、画面の中央に小さく「メンテナンス中」と書いているウェブページを、
> 順序なしリスト要素のulで定義する理由がわかりません。
503 ページでは未使用です。意味はありません。
"supersized" の ul タグですが、背景画像を表示する際に、supersized ライブラリが内部的に使用しているものになります。
今回の 503 ページでは supersized プラグインの初期化処理が呼ばれていないため、この ul タグが使用されることはありません。
> ご紹介していただいた「【jQuery】背景画像を画面いっぱいでスライドショーさせる方法」もulで定義されていましたが、
> div要素は同じページに一度しか使えない為、“supersized”をローディングする為の<div id=“supersized-loader”></div>をコードに書くと、
> 「メンテナンス中です」と真ん中に記された全画面ページ（スライドショーの様に順次切り替わらない固定ページ）のコードを
> 順序無しリストを定義するul要素で<ul id=“supersized”></ul>となるのだろうと思いますが、ul以外でも固定の全画面ページを指定できるのでしょうか？
supersized ライブラリにおける下記タグの使い方としては、
・<div id=“supersized-loader”></div> … 処理中を表す画像（60x60のサイズの画像）を表示するのに使用
・<ul id=“supersized”></ul> … 背景画像を表示するのに使用
「【jQuery】背景画像を画面いっぱいでスライドショーさせるデモページ」における実際の使われ方としては、
<ul id="supersized">
<li class="slide-0"><img src="img/01.jpg"></li>
<li class="slide-1"><img src="img/02.jpg"></li>
<li class="slide-2"><img src="img/03.jpg"></li>
<li class="slide-3"><img src="img/04.jpg"></li>
<li class="slide-4"><img src="img/05.jpg"></li>
</ul>
のような使われ方がされています。
> 質問３
> slides: [{ や、image: '' の中のコロン: は「ラベル名: 実行文」という理解でよろしいでしょうか
意味合い的には「ラベル名：設定値」になります。特段、実行文という訳ではありません。
> 質問4
> Online JavaScript Beautifier で整形表示したコードの意味を書き直しました。間違っているところをご指摘いただければ助かります。
> JQuery(document).ready(function($) オブジェクトのJQueryが、( をもってreadyメソッドの定義を開始し、
jQuery の読み込み処理については下記を参照下さい。
■ 【jQuery】処理実行タイミング $(document).readyと$(window).load
https://qiita.com/katsunory/items/3ba4683629333b94b2be
jQuery(document).ready(function(){ ～ }); は省略しない場合の書き方で、
$(function(){ ～ }); と同じ意味です。HTML が読み込まれた際に実行する、jQuery 特有の書き方になります。
> $.supersized({ supersizedが連想配列のパラメータ名であるslidesを呼出す為の始点として ( を置き、
「$.supersized()」自体は、supersized プラグイン処理を呼び出す為のメソッドになります。
使い方として「$.supersized(連想配列を用いた設定値)」というような書き方をしています。
> slidesを入れる為のコードのブロックの始点として { を置く
> slides: [{ 連想配列のパラメータ名であるslidesの配列を生成する為に [ を始点とし、値が入るブロックの始点として { を置く。
連想配列の書き方として {ラベル名：設定値} という書き方になります。{ } で囲まれていることに注意ください。
今回のケースだと {slides:[画像ファイルの配列]} という書き方になります。
配列の書き方としては [配列の要素, 配列の要素, ...] といった書き方になります。
今回のケースでは、配列の要素自体が、連想ファイルの形式となっている為、
書き方としては [{image:"画像ファイル名"}, {image:"画像ファイル名"}] のような書き方になります。
> image: '' 連想配列の画像ファイル名であるimageが実行文の文字列を指定する為に''を置いたが、'と'の間に入れるべき実行文の文字列は指定されていない
「画像ファイル名であるimage」よりは「パラメータ名であるimage」のほうがしっくりくるかと思います。
あと「実行文」ではなく「設定値」になります。ここでいう設定値は「画像ファイル名」になります。
> 質問５
> 以下は、Googke Chromeの右クリックメニューのソースを表示をクリックして表示した該当ページの全てのソースコードですが、
> もし、現在表示されている「「メンテナンス中」のページの表示をとりやめ、本来表示されていたウェブページを再表示するには、
> 以下のソースコードのどの部分を削除すればよろしいでしょうか？
503 で表示されている「メンテナンス中」のページは、本来のコンテンツとは別のページになります。URL 自体は同じですが、表示している内容が別になります。
ソースコードを削除しても本来のコンテンツが表示されるわけではありません。
あなたの回答
tips
プレビュー
