工事中のページを消したので、コンテンツは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 ;*/
}
↑ここまでーーーーーーーーーーーーー

CSS使わず(ちょっと使ってますけど)、殆ど素のHTMLで書いて、どこが悪い?2019年10月06日 23:54

CSS使わず(ちょっと使ってますけど)、殆ど素のHTMLで書いて、どこが悪い?
CSS使わず(ちょっと使ってますけど)、殆ど素のHTMLで書いて、どこが悪い?


<br>使うなとか、<hr>は良くないとか。

巷のホームページは、CSSに対応するために、要素名を付けたHTMLファイルで溢れている。

エディタといえば、ウインドウズに付属のメモ帳を愛用する浮沈子としては、後腐れがない(後から修飾しようがない?)書きっぱなしのHTMLファイルが一番性に合うんだがな。

モーダルウィンドウにコンテンツへのリンクを貼って、ワンクッション置いてページ遷移させるというのを作ってみたが、重大な問題を発見して困ってしまった。

リンク先からブラウザの戻るボタンを押しても、モーダルウィンドウの画面には戻れず、モーダルウィンドウの画面同士をリンクさせることも出来ない(未調査)。

ポップアップ画面は、メッセージを伝えたり、一方通行のリンクを貼るには重宝するが、双方向の画面遷移などには向かないのだ。

ちゃんと、別のページを作るなりなんなりして、階層構造を設定して、体系的にコンテンツとリンクさせなければユーザーは混乱し、サイトを離れてしまう(浮沈子的には、それで差し支えないけどな)。

しかし、飛び飛びのブログへのリンクを苦労してかき集めて貼って、次から次へと見たい時に、いちいちモーダルウィンドウを出し直すというのは手間だ。

自分で弄っていて、イライラする。

可能ならば、飛び飛びのブログを再編集して、一続きのコンテンツとして扱いたいくらいだ。

まあいい。

少なくとも、ブラウザーの戻るボタンを使って、直前に見ていたページに戻れないようでは話にならんからな。

残念ながら、モーダルウィンドウを使ったページ遷移は没だな。

仕掛け的には面白かったんだがな・・・。

こてこてのCSS装飾を捨て、シンプルなテキスト画面だけのUIも気に入ったんだがな(別に、装飾してもいいんですが)。

あまり凝らない、シンプルなメッセージを伝えることが目的のポップアップだ。

HTML的には、元のページに仕込まれているしな。

見せ方として、ページごとに細分化し、リンクタグを貼ってポップアップさせているだけの話だ。

しかも、戻れないし、ポップアップ間のリンクも貼れない。

やれやれ・・・。

こうなれば、泣く泣く新しいページを作らざるを得ないな。

今日も、徒労な時間を過ごした。

しかし、重要なことを学んだ気もする。

仕掛けに溺れて、目的を見誤ってはいけないということだな。

台風19号の進路が気になるが、成田の離陸には影響ない(たぶん)とホッとする出発2日前の朝2019年10月09日 09:38

台風19号の進路が気になるが、成田の離陸には影響ない(たぶん)とホッとする出発2日前の朝
台風19号の進路が気になるが、成田の離陸には影響ない(たぶん)とホッとする出発2日前の朝



台風19号が迫っている。

(大型で猛烈な台風19号 三連休に関東直撃へ 暴風被害に厳重警戒を)
https://weathernews.jp/s/topics/201910/090005/

「台風19号は9日(水)3時現在も、大型で猛烈な勢力を保ちながらマリアナ諸島近海を北西に進んでいます。」

「このあとは進路を少しずつ北寄りに変えて、12日(土)から13日(日)早朝に東海から関東にかなり近づき、上陸するおそれがあります。」

とはいえ、成田から離陸予定の11日18時頃には、まだ紀伊半島沖位だろうからな。

ほぼ影響はないと見ている。

上がってしまえば、多少揺れるかもしれないが、エティハド航空のパイロットの腕を信じるしかない。

大丈夫なのかあ?。

まあいい。

昨日は、大井町で久しぶりに泳いだ。

筋トレなしのプールだけ。

アウトロー(BC)のウエストベルトのSサイズを仕入れる。

腰回りが細くなって(ウエスト80cm以下!)、Lサイズのベルトが緩くなり過ぎてしまった。

Mサイズもあるんだが、思い切ってSサイズを注文した。

在庫があったようで、土曜日に注文して火曜日に届いていた。

レッドシーツアーに間に合ってよかったな。

先週金曜日に富戸で水中スクーターのバーンテスト(バッテリーの持ちを実際のダイビングで確認する)を兼ねて、アルミタンク(10リッター)で潜った。

後半、タンクが浮いてきたら、ベルトが緩いせいで背中から離れて泳ぎづらかったからな。

いずれにしても、間に合ってほっとした(間に合わなければ、ひもで結ぼうと思ってたんだがな)。

やれやれ・・・。

ダイコンやライトのバッテリーの充電も終わり、後はCタイプの変換プラグを探すだけ。

パリに行った際に、用意して行った記憶がある。

どこいったんだっけ・・・。

失せものいずるなれども、B3やBFタイプのコンセントしかなかったらどーするエジプト2019年10月09日 22:21

失せものいずるなれども、B3やBFタイプのコンセントしかなかったらどーするエジプト
失せものいずるなれども、B3やBFタイプのコンセントしかなかったらどーするエジプト


([an error occurred while processing this directive]と表示されてしまう便利なページ)
https://www.apple.com/jp/support/tell_us/plug.html

「世界の代表的な国と地域の電源プラグ」

アップルのページらしいんだが、浮沈子の環境ではちゃんと表示されない(サーバーのゴミになっているだけかも)。

コンテンツは、画像とテーブルで表示されているので、参照するのに問題はない。

エジプトではCタイプのコンセントと聞いたんだが、B3・BFも使われているようだ。

「国名:周波数(Hz):電圧(ボルト):プラグのタイプ:
エジプト・アラブ共和国:50:220:B3・BF・C」

とりあえず、変換アダプターを探し出して、ショルダーバッグに放り込む。

今回はリュックサックなしで、片掛けのミニバッグとショルダーバッグだけで行こうと考えている(ダイビング器材は別です)。

必要最小限の荷物にまとめる。

つまり、余計なものは持って行かない。

現地での移動とかあるしな。

観光地にも行く。

荷物は少なければ少ないほど楽ちんなはずだ。

普段行くダイビング旅行の時には、基本的にはホテルに着けば、部屋中に荷物をぶちまけて1週間以上そのままだが、今回はそうはいかないだろう。

たぶん相部屋。

ホテルは5泊4日(夜着、早朝出発)、往きの機中泊と帰りの機中泊がそれぞれ1泊ずつ。

器材選定と荷造りは明日行う予定だが、何を持って行かずに済ませるかで悩むだろうな。

予備器材なし、着替えは最小限(現地洗濯予定!)、お土産なし(Tシャツ程度か)。

現地は沖縄や小笠原よりは北になる。

が、天気予報を見ると、今後1週間の最低気温は25度、最高気温は37度とある。

真夏だ・・・。

天気は晴ればっか・・・。

サンダルとTシャツ短パンでOK。

また、成田で顰蹙を買うことになるな・・・。

台風19号の影響が気になるけど大圏航路では北朝鮮や北京上空を通過するのがもっと気になる2019年10月10日 20:51

台風19号の影響が気になるけど大圏航路では北朝鮮や北京上空を通過するのがもっと気になる
台風19号の影響が気になるけど大圏航路では北朝鮮や北京上空を通過するのがもっと気になる


(ウェブ地図で大圏航路を表示する (Leaflet版):成田ードバイを表示)
https://user.numazu-ct.ac.jp/~tsato/webmap/sphere/great-circle/?ll=30.448674,84.345702&z=4&t=gsipale&p1=35.764,140.3846&p2=24.633703,54.316406&vm=y&vgl=y&vrl=n

うーん、この通りに飛ぶのかあ?(ありえねー!)。

台風は、少し進路がふらついて、どっちに行くか分からないしな。

(台風19号 非常に強い勢力で直撃か 昨年21号匹敵)
https://tenki.jp/forecaster/t_yoshida/2019/10/10/6237.html

「「非常に強い」勢力で日本列島に上陸する台風はそうそうありません。2018年台風21号は記憶に新しいところですが、その前は1993年台風13号まで遡ります。」

「関西空港では 最大瞬間風速58.1メートルを観測し、観測史上1位となりました。」

浮沈子が乗る飛行機は、成田が大荒れになる頃にはとっくにアブダビに着いてしまってるはずだ。

それより気になるのは、やっぱ航路がどうなっているかだな。

(パリ~思い出を辿る旅《1》  成田⇒ドバイ⇒パリ ほとんど機内と空港の巻)
https://4travel.jp/travelogue/11140352

エミレーツでドバイ経由の航路(ページの真ん中位)。

初めには大圏航路が表示されているが、実際には南に飛んで上海ーカルカッタ上空を経てドバイに達している。

「あらっ? 北京じゃなくて上海上空を通って来たのね。」

ドバイからパリも同じパターンで、初めの表示は大圏航路、実際に飛行したのはやや蛇行している(ページの終わりの方)。

「航路が一部膨らんでいる・・・危ない所避けてきたのかな」

「エミレーツのビジネスクラスには空港送迎がセットになっています。」

いいなあ・・・。

リッチでノー天気な奥様だな。

エティハド航空が、同じ様に南回りの航路を取るかどうかは分からない。

ダイバートとか考えながら決めるだろうしな。

さて、明日の出発に備えて、今日は早めに休むとするか・・・。