工事中のページを消したので、コンテンツは2ページになったが、動的結合に拘ってモーダルウィンドウでジタバる2019年10月06日 13:02

工事中のページを消したので、コンテンツは2ページになったが、動的結合に拘ってモーダルウィンドウでジタバる
工事中のページを消したので、コンテンツは2ページになったが、動的結合に拘ってモーダルウィンドウでジタバる


コンテンツをどう見せるかという難題は、いつになっても解決しない。

ホームページの技術が発達すればするほど、そして、豊かなコンテンツが増えれば増えるほど、その見せ方には工夫が必要になる。

作成中のコンテンツへのアクセスを始末するのに、「工事中のページ」を作って、そこへリンクを張る時代は終わった(そうなのかあ?)。

浮沈子が採択したのは、モーダルウィンドウという仕掛けだ。

(モーダルウィンドウ)
https://ja.wikipedia.org/wiki/%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6

「コンピュータアプリケーションソフトウェアのユーザインタフェース設計において、何らかのウィンドウの子ウィンドウとして生成されるサブ要素のうち、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないもの。モーダルウィンドウはGUIシステムで、ユーザーに注意を促したり、選択肢を提示したり、緊急の状態を知らせたりする目的でよく使われる。モーダルダイアログやポップアップと呼ばれることもある」

本来は、ユーザーの一連の操作を打ち切らせて、何らかのアクションを促す仕掛けのようだが、浮沈子的にはこれを使ってページ遷移させずに「工事中」と表示させることにより、マウスのクリックだけで戻れるようにした(ポインター動かさずに済むのがミソだな)。

(初心者でも分かる!モーダルウィンドウの作り方:参考にしたページ)
https://syncer.jp/jquery-modal-window

コピペして、簡単なサンプルが動くところまでは簡単だったんだが、「浮沈子の部屋」に適用する際には苦労した。

ヘッダ部分は、jQuelyのload機能を使って、動的に読み込んでいる。

どう弄っても、その中でモーダルウィンドウを表示させることができなかった。

いろいろ試しているうちに、ひょっとしたらと思い当たったのが、以前、load機能を実装する際に参考にしたページの記述。

(【jQuery】htmlページをパーツごとに分けて読み込む方法:参考にしたページ)
https://code-life.hatenablog.com/entry/2015/10/27/222803

「loadメソッドで読み込んだページでjQueryが機能しない問題:
JavaScriptでページを読み込んでくる際に注意すべき点があります。それは各パーツに適用するJavaScriptの実行順序。 例えばheaderのグローバルメニューなんかはこだわってプルダウンメニューにしたかったりしますよね。」

「その時に使うのもやはりjQuery。そこで起きるのがこの問題。 実行順序によってはページが読み込まれる前にグローバルメニューのjQueryが実行されてしまい。 メニューが機能しないなんてことがあります。というか今回ありました。」

「浮沈子の部屋」では、プルダウンメニューはCSSだけの実装なので問題はないが、引っかかったのは今回導入しようとしたモーダルウィンドウのほうだな。

「一番簡単な方法はパーツのhtmlの方にscriptを記述してしまうこと。」

「こうすればパーツを読み込まれる前に実行されることは無いので確実にパーツ内のhtmlにjQueryを適用できます。」

「(ここに行き着くのに1時間ほど悩みました (´・ω・`))」

えーと、浮沈子が何日悩んだかは秘密だ・・・。

まあいい。

初めはロードされるheadr.htmに直書きして動作を確認し、その後に外部ファイルに戻した。

さっき、ようやく読み込まれるようになったので、実験室用のサンプルも作ってアップした。

(実験室:モーダルウィンドウ)
https://www.ne.jp/asahi/kfujito/fuchinshi/labo/modal_window/index.htm

ヘッダやフッタは別にして、管理すべきページは今のところトップページとアルバムだけになった。

たった2ページの管理を合理化するために、パーツごとの読み込みに拘り、そのせいでモーダルウィンドウの適用に何日もかかった。

アホか・・・。

モーダルウィンドウは、ページ遷移する際に、経由地として使用することも考えている。

たった10Mバイトしかないホームページスペースでは足りず、FC2のサーバーも借りていて、画像ファイルはこっちで管理しているからな。

そこへ飛ばす際に、現在はダイレクトリンクさせているが、ルックアンドフィール(最近の業界用語では、トンマナか?)が大幅に異なるので、何か咬ませてから誘導したいと思っていた。

また、同じ仕掛けを使って、リンクを貼り付けて分岐させる方法も検討の余地がある。

いずれにしても、それらは今後の課題だ。

単に工事中の表示だけして、ページ遷移を削減するだけなら、こんな苦労してまでチャレンジはしない(cssファイルやjsファイルを外出しにしたので、管理対象は増えてしまったしな)。

細かいところでは、メインのcssファイルでページ全体の文字色(濃いめの灰色)を規定していたコードを削除し、ベースを黒にした。

リンクの表示色などは、それぞれの部分で記述するようにしている。

全体の印象を統一することと、個別要素を際立たせることのバランスが求められるんだろうが、センスないしな・・・。

まあ、どうでもいいんですが。

仕掛けを作るために、コンテンツを考える。

本末転倒のホームページ作りは、遅々として進まず。

年内くらいには、一段落させたいもんだな・・・。

<参考:header.htm:実験室用です>

↓ここからーーーーーーーーーーーーー
<script src="modal.js"></script>

<link href="modal.css" rel="stylesheet" type="text/css">

<!-- ここから読み込まれます -->
<!-- ヘッダ -->
<div id="header"><h1>浮沈子の部屋</h1></div>
<div id="header1">まだ工事中(いつまで!?)</div>

<!-- メインメニュー -->
<ul class="nav">
<li><a id="modal-open" class="button-link">ごあいさつ(工事中)</a></li>
<li><a id="modal-open2" class="button-link">リンク(工事中)</a></li>
</ul>


<!-- ここからモーダルウィンドウ(スタイルシートで初めは非表示に設定) -->
<div id="modal-content">
<!-- モーダルウィンドウのコンテンツ開始 -->
<p><h2 style="text-align:center;color:#ff0000;"><a href="index.htm">リンクを貼って戻る</a></h2></p>

<p>ポインターが変わる部分、または周囲の背景(半透明の部分)をクリックして戻ります。</p>
<p><a id="modal-close" class="button-link"><h2 style="text-align:center; color:#ff0000;">モーダルウインドウを消して戻る</a></h2></p>
<!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<!-- ここまでモーダルウィンドウ -->
↑ここまでーーーーーーーーーーーーー

<参考:modal.js:実験室用です>

↓ここからーーーーーーーーーーーーー
$(function(){

//モーダルウィンドウを出現させるクリックイベント
$("#modal-open,#modal-open2").click( function(){

//キーボード操作などにより、オーバーレイが多重起動するのを防止する
$( this ).blur() ; //ボタンからフォーカスを外す
if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない (防止策1)
//if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する (防止策2)

//オーバーレイを出現させる
$( "body" ).append( '<div id="modal-overlay"></div>' ) ;
$( "#modal-overlay" ).fadeIn( "slow" ) ;

//コンテンツをセンタリングする
centeringModalSyncer() ;

//コンテンツをフェードインする
$( "#modal-content" ).fadeIn( "slow" ) ;

//[#modal-overlay]、または[#modal-close]をクリックしたら…
$( "#modal-overlay,#modal-close" ).unbind().click( function(){

//[#modal-content]と[#modal-overlay]をフェードアウトした後に…
$( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){

//[#modal-overlay]を削除する
$('#modal-overlay').remove() ;

} ) ;

} ) ;

} ) ;

//リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
$( window ).resize( centeringModalSyncer ) ;

//センタリングを実行する関数
function centeringModalSyncer() {

//画面(ウィンドウ)の幅、高さを取得
var w = $( window ).width() ;
var h = $( window ).height() ;

// コンテンツ(#modal-content)の幅、高さを取得
// jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
// var cw = $( "#modal-content" ).outerWidth( {margin:true} );
// var ch = $( "#modal-content" ).outerHeight( {margin:true} );
var cw = $( "#modal-content" ).outerWidth();
var ch = $( "#modal-content" ).outerHeight();

//センタリングを実行する
$( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;

}

} ) ;
↑ここまでーーーーーーーーーーーーー

<参考:modal.css:実験室用です>

↓ここからーーーーーーーーーーーーー
@charset "UTF-8";

/* ここからデモページ用のコード
body {
width: 100% ;
height: 5000px ;
padding: 0 ;
}
ここまでデモページ用のコード */

#modal-content {
width: 30% ;
margin: 0 ;
padding: 10px 20px ;
/* border: 2px solid #aaa ;*/
background: #ccc ;
position: fixed ;
display: none ;
z-index: 2 ;
}

#modal-overlay {
z-index: 1 ;
display: none ;
position: fixed ;
top: 0 ;
left: 0 ;
width: 100% ;
height: 120% ;
background-color: rgba( 0,0,0, 0.75 ) ;
}
/*
.button-link {
color: #00f ;
text-decoration: underline ;
}
*/
.button-link:hover {
cursor: pointer ;
/* color: #f00 ;*/
}
↑ここまでーーーーーーーーーーーーー

コメント

コメントをどうぞ

※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。

※なお、送られたコメントはブログの管理者が確認するまで公開されません。

※投稿には管理者が設定した質問に答える必要があります。

名前:
メールアドレス:
URL:
次の質問に答えてください:
kfujitoの徒然の筆者のペンネームは、
「○○子」です。
○○を記入してください。

コメント:

トラックバック