温泉道 WEB Update

2021 09 15 (令和3年9月15日 水)

スマホ時のボタン・・・要調査
generics仕様では無く、独自(w3shoolなど)を使用。

2021 09 17 (令和3年9月17日 金)

スマホ時のボタン・・・ひとまず ok!!

テーブル(表)の詳細部分の展開について
thisなどを使って、行の下に詳細表示できないか。

テーブル表示の項目洗い出し

thisキーワード
イベントでthisは、イベントを受信した要素を指します。
(In an event, this refers to the element that received the event.)

wordpressでは、以下となる。appendChild
//document.body.appendChild(x);
document.getElementById(“content”).appendChild(x);

本日のお宝サイト
How to insert a row in an HTML table body in JavaScript
テーブルに列を挿入する方法(insertRow())(newRow.insertCell)

How to insert a row in an HTML table body in JavaScript

HTMLTableElement.insertRow

JavaScript と DOM インターフェイスによる HTML の表の操作

2021 09 18 (令和3年9月18日 土)

本日のお宝サイト
delete rows from table

javascript delete rows from table” Code Answer’s

innerHTML より insertAdjacentHTML を使う
innerHTML より insertAdjacentHTML を使う

最終的にTBODYを使い、TR TD はinner HTMLにて挿入する。
削除は、カウンター使用か。

本日の神サイトか this について
JavaScript HTML DOM Events
日本語バージョン
JavaScript HTMLDOMイベント

ゆくゆく サイドバーも考察要か

2021 09 19 (令和3年9月19日 日)

テーブル行の一括削除について・・・
tbodyを追加し、idによる一括削除進行中!!

エトセトラ試すも一括削除は今のところ不可
行毎のloopとon offフラグが当面の課題!!

loopによる全消去ok!!
on offフラグについても、取得ok!!
残るは、挿入と削除の統合化!!

2021 09 20 (令和3年9月20日 月)

本日の予定:就寝中に・・・考察!!
get_details_table ーー>> AJAX対応(html出力)
その後テーブル挿入・削除か

本日のお宝サイト jsonからloopで値を取り出す(特定の要素指定無し)。。。

How to Loop Through the Array of JSON Objects in JavaScript
How to Loop Through the Array of JSON Objects in JavaScript
日本語
JavaScriptでJSONオブジェクトの配列をループする方法

2021 09 21 (令和3年9月21日 火)

最後の問題として、ajax取得前にテーブル表示する為、不具合有り。
ajax取得後にテーブル表示(ajaxのdone内の処理を移行してOK)

2021 09 22 (令和3年9月22日 水)

詳細テーブル STYLE関係 TBODYの最初の要素の変更要

表(LIST)表示改修(PHP サーバ側)。詳細テーブル表示clickまでok.
残りは、詳細テーブルの組み込み。

2021 09 23 (令和3年9月23日 木)

LIST版詳細ページの挿入OK
AJAX側での挿入では、テーブルが認識出来ずに、ページ側で挿入してOK。

2021 09 24 (令和3年9月24日 金)

詳細テーブルの装飾 CSS関係や画像の挿入、地図挿入など考察

2021 09 25 (令和3年9月25日 土)

取得プログラムの改修!!
nameの空白処理、緯度、経度が無いのでdbより取得、営業形態の廃止によりdbより取得など。カタカナ部分削除
BP_ONSEN_GET2_BEPPU_XXXX(GREENサイト)

latest version 処理 function作成
DB読み込み処理(csv)

2021 09 26 (令和3年9月26日 日)

緯度・経度について
別府:embedなので、正規表現にて抽出要(iframeなので置き換わり読み込み不可!!)
↑訂正 読み込み可能!! ifameの前にクラス指定し、.map iframeのようにすればOK!!
続きの作業継続すること
ソース上で確認出来る為、新規についてはここから読み取りを行うこと。

九州:Unicodeなので、コード変換が必要(全地点につき一括読み込み)
PHPでUTF-8以外の文字コードを扱う方法|文字コード変換の留意点も解説!

市営温泉などの情報は、今回無し、変わってジモ専など。
新たに、partの抜き出し追加中。

2021 09 27 (令和3年9月27日 月)

別府 CSV完了まで 残りCSVのヘッダー行の追加のみ
今後として・・・・
データベースのlatest version 全てに適用すること。(とりあえず別府)
九州の緯度・経度読み取り、更にlatest version対応。

データベースのlatest version 全てに適用(別府 完了)

九州分・・正規表現で作業中!!にふとJSONデータであることに気づく。
その後は、コピペ・・ファイル保存し、PHPのfile_get_contentsで読み込み、デコードしてOK!!
PHPでJSONデータの取得の仕方

2021 09 28 (令和3年9月28日 火)

  • 九州:一括ダウンロード(marker json)がサーバに有り。読み込んで配列にし、マッチしたものに挿入していくこと。read_all_marker()か
  • 別府:embedデータから緯度・経度を抽出すること。(朝のうちに完了DBとの置き換えFLAGあり)

九州:jr読み取り修正、url読み取り追加

2021 09 29 (令和3年9月29日 水)

九州:CSV取得関連:

  • マーカーからの緯度・経度取得FUNCTIONを詳細GET部分に組み込み。
  • Complimentary有無(on_off)完了。
  • 前バージョンから引き継ぎのための名称変更は取りやめ。マーカー緯度経度が取得できないため。

以上で、サイトからの読み込み完了。後はDBへの変換。

2021 09 30 (令和3年9月30日 木)

name_for_marker_search追加
m_point追加
google embed サイトが正しくdivで囲まれていないため、別途読み取り。

第25番 別府亀の井ホテル(131.49755465083322 33.27657546555821)
第225番 おやど湯の丘(131.4609106508339 33.30802886393254)
第227番 あるじ(RG)の温泉_足湯(131.456441 33.3118154)
第226番 亀川マリーナの湯(131.4968656 33.32625290000001)

別府・九州 DB作成完了(さくら)

2021 10 01 (令和3年10月1日 金)

梅園温泉 別府 共同温泉
別府亀の井ホテル 別府 宿泊施設
蓮田温泉 浜脇 共同温泉
さわやか別府の里 堀田 宿泊施設
弓ヶ浜温泉 別府 共同温泉
ゆめひのきの湯大仏温泉 別府 貸切湯
文化の湯 別府 共同温泉
白蓮の湯 別府 貸切湯
サンライン別府 別府 宿泊施設
活サロンKAJU 別府 その他
別府ラクテンチ 観海寺 レジャー施設
おやど湯の丘 鉄輪 宿泊施設
スーパー温泉やまなみの湯 鉄輪 外湯
大分香りの博物館ハーブガーデン足湯 鉄輪 足湯
あるじ(RG)の温泉_足湯明礬 足湯
湯山の里温泉 明礬 外湯
杜の湯リゾート 明礬 外湯

別府:運用形態 補完。。これにて別府DB作成完。

2021 10 02  (令和3年10月2日 土)

  • gmap挿入
  • img イメージのスタイル設定

2021 10 03 (令和3年10月3日 日)

詳細表示のgooglemapsについて、close処理が重複する問題。
↑問題解決!!

2021 10 7(令和3年10月7日 木)

お宝サイト発見
MASCOS HOTEL

  • header footer メインコンテンツ マージン パディング調べ
  • ボタンデザイン変更
  • CSS absolute設定か、固定ウィンドウと透過されたウィンドウなど

2021 10 9(令和3年10月9日 土)

googlemaps版詳細ページ モーダル関係ほぼ完了。
あとは、デザインなどの見かけ調整。

How do I clear inner HTML

2021 10 10(令和3年10月10日 日)

モーダル部分のデザイン追加、詳細テーブルはこれから。

2021 10 12(令和3年10月12日 火)

webモーダル学習(以下、重要)
W3.CSSモーダル(日本語訳)
W3.CSS Modal
How TO – CSS/JS Modal

以下、これをベースにして、構築か
Modal With Tabbed Content
Modal Tabs