月別アーカイブ: 2021年8月

Google Map関連

2021 08 30 (令和3年8月30日 月)

コピペでは動作不可!!

Customizing a Google Map: Custom Markersのサンプル実行について

コンソール エラー内容
Unhandled Promise Rejection: InvalidValueError: initMap is not a function

以下サイトにより、問題解決(async defer追加)!!
Uncaught InvalidValueError: initMap is not a function

2021 08 31 (令和3年8月31日 火)

上に続き、infowindow marker click対応改修(複数marker)。おk。
markerを配列とすること 及び 配列の事前宣言。
あとは、marker typeを含んだ改修となる。

google maps plat home

整理:

  • type 温泉郷を新たに追加するよう改修(get…….)
  • eaturesは使用せずに、loop本体内にiconを追加

別府関連 以下ファイル
HTML表示
BP_ONSEN_GET2_BEPPU_HTML3
CSV(JSON)出力
BP_ONSEN_GET2_BEPPU_XXX.php</span

ajaxでappendするも、そのままソースが表示されるのみ、ブラウザが解釈しないと判断。
ググって、iframeなるもの発見。あとはクリックで表示を制御すればおk か。
それまでの過程として、googlemap表示htmlを作成。iframeにて表示まで。。。

googlemap–my url

Ajaxに既に作られたgoogleMapを挿入したい

その後
検索key word -> ajax load googlemaps
Loading Google Maps API with Ajax using Javascript/JQuery, Callback not setup correctly

本日の神サイト…
Parsing returned HTML from jQuery AJAX request

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

本日の課題
you have included the google maps javascript api multiple times on this page. this may cause unexpected errors.
you have included the Google Maps API multiple times on this page. This may cause unexpected errors
Remove google map scripts

How to display google maps on click of a button in javascript?
How to display google maps on click of a button in javascript?

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

ページでjavascriptapiを複数回include不具合!!。。。前日の検索結果↑↑↑↑を試しておk。(Remove google map scripts)

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

本日の神サイト。。。
load google map without using callback method
load google map without using callback method

googlemaps読み込み!!

  1. CALLBACK
  2. window.onload = function addGoogleMapScript()
  3. function addGoogleMapScript()

あとは、initmapによる初期化で、同一ページに複数MAPを描画 おk。。
google.maps.event.addDomListener(window, ‘load’, initMap);

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

json形式取得、後 googlemaps埋め込み おk。
マップドラッグの際に遅延する不具合。原因は、themeのstylesheet内にあり、「transition:all 0.5s ease」部分を削除し、解決!!

2021 09 05 (令和3年9月5日 日)

本日わかったこと

  • googlemaps表示処理(initmap等)は、ajaxファイル内に書くこと
  • JSONでやりとりするときは、dataType: ‘json’,を忘れずに。(判明までほぼ半日費やす)
  • JSONデータの数について、以下サイト及びCODEでおk

get size of JSON object
var count = Object.keys(data).length;
console.log(count);

2021 09 06 (令和3年9月6日 月)

googlemapsについて、ほぼ基本技術はおk。ajaxにてjsonデータを取得し、marker配列を作成のちプロット。
エリア別marker iconについても実装おk。
次は、前エリアマップへ。

Googleマップ用地図アイコン
Googleマップ用地図アイコン

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

目から鱗
地図へマーカーを配置/削除
更に(change the centre of a google maps)
How to dynamically change the centre of a google maps without erasing markers?
更に(Google Maps JavaScript API V3 Reference)
Google Maps JavaScript API V3 Reference
更に(infoWindow逐次クローズ版)
Marker Accessibility

2021 09 08 (令和3年9月8日 水)
infoWindow逐次クローズ版 実装完了!!
markerクローズ任意指定地点(setVisible版)おk。

marker表示・非表示について
最終的にfunc外で宣言した変数(mapmapなんでも良い)に代入して問題解決
又、中心移動についても、これで解決!!

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

今後の課題:

  • ajax部分は、シンプルにjaso取得のみにすること(現在 取得とgooglemapsを切り離す googlemapsはhtml内記述)
  • グループ(今回はpart 温泉郷)による一括marker表示・非表示
  • loopをforeachに変更すること(済)

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

iPhone googlemapsの左右の余白が不要。

  • genericsのstyle sheet削除でおk。stylesheetのどこが原因か
  • 裸のhtmlでは余白は生じない

解明中!!
key word –>>  mobile safari right left margin
entry-contentでは無い。もっと上位での設定か。

googlemaps 一本指
How to disable two fingers zoom option in Maps in mobile devices using JavaScript API?

スマホ表示の時だけ画面幅いっぱいの画像にしたい
スマホ表示の時だけ画面幅いっぱいの画像にしたい

原因判明: stylesheepの下部 以下の記述部分にpadding:10%設定あり。
@media(max-width:480px)

本日の収穫: getstureHandling 一本指操作おk。
図を移動させるには指2本で操作します”の回避策

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

  • map切り替え表示の際のdispLoading処理 完了!!
  • メインボタン表示 ①MAP ②表 ③温泉郷切り替え(トグル)
  • ③の温泉郷切り替えは、郷の配列を作成し、loopで回し、on offする。
  • 表の詳細表示は、折り畳み表示が可能か検討
  • CSSすら不要!detailsとsummaryタグで作る簡単アコーディオン(過去 一度 掲載済み)
    気象予報士用語集にあり。

本日 完了したこと。 ajaxにより温泉郷取得(my-get-part-ajax.js)
function my_enqueue()の複数登録について、onloadで対処。
以下、参考サイトもあったが、今回はオンロード版。
WordPress: Loading multiple scripts with enqueue

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

boolean配列(for marker on off)
How to initialize a boolean array in javascript

part毎のon off関数完了。
個々のmarkerで無く、part単位でのon offであること。

残る課題として:詳細データ:jsonによる取得

本日の収穫!!Modal Box
How To Create a Modal Box

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

位置取得関連:
Get GPS location from the web browser
HTML Geolocation API

InfoWindow をカスタマイズ
InfoWindow をカスタマイズする

Modal Box化スタート!!

トグルボタン装飾
How do you create a toggle button?
How do you create a toggle button?

GooglemapsのMarkerクリック infowindow表示内のボタン押下にてModal Box表示 ok!!
次は、詳細ページ用データ ajax取得か

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

本日のお宝サイト:
how to use json file in html code
how to use json file in html code

詳細ページ用データajax取得完了!!
modal-boxに詳細ページを表示するも、スマホだとオーバー!!
エトセトラ試行するも、表ページならば地図、地図表示ならば文字情報でok!!
以上をもとに進める。

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

googlemaps //を消すこと!!

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

//の原因:不可
script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false&language=ja'”></script>

詳細ページ(テーブル版)の実装 ほぼOK!!
関連して・・・
セル(td)の中央寄せについて
【CSS】nth-childを使って行の色を交互に設定する!
【CSS】nth-childを使って行の色を交互に設定する!

次は、詳細ページ(マップ版)の実装 get_details_map.php
他のModal Boxについても検討要!!

Ajax関連

2021 08 21 (令和3年8月21日 土)

WordPressでAjaxを使う方法-標準機能版

WordPress以外
Ajaxを使ってデータベースのデータを非同期で取得する【Ajax+MySQL+PHP】

WordPressコアはすでにAjaxを使用してさまざまなバックエンド機能を強化しているため、同じ機能を使用してWordPressでAjaxを使用できます。アクションを登録し、サイトのadmin-ajax.phpファイルをポイントして、値を返す方法を定義するだけです。HTML、JSON、さらにはXMLを返すように設定できます。

本日、理解できたこと。

  • サーバーサイドのPHPファイルは、WORDPRESSのfunctions.php内に記述し、acition登録。
  • ajaxのjavascriptは、ページ内でおk。その際に、admin-ajax.phpをurl先とする。

2021 08 22 (令和3年8月22日 日)
標準機能版 本日完動!!
動作確認は、safariのコンソール
整理すると、

  • javascriptの起動は、スラッグで指定したページ下部に配置される。
  • javascriptの実行ファイルは、…./js/myjs/my-ajax.js
  • PHPファイルは、functions.php内に記述。

2021 08 23 (令和3年8月23日 月)

JavaScript内から外部JavaScriptを読み込む方法

function内のローカル変数をグローバル変数に代入したい

JavaScriptで『グローバル』として定義する場合に一番オススメしたい方法が『window.』を付けてしまうということ

windowオブジェクトとグローバルの実態について

How to make a local variable into a global in JavaScript [duplicate]

私がよく使うJSからの外部JSの読み込み方法

ワードプレス ホームurl取得関連
how to get wordpress home url in javascript?

CSS BUTTON と default button の違いについてエトセトラ学習中。。。

generic style sheet最後部分に以下記述 要解析
@media(max-width:1024px){

button関係 w3schoolのbutton groupでは、表示ズレ、css floatのサンプルでおk。

2021 08 24 (令和3年8月24日 火)

WordPress】jQueryでAjaxを実装する簡単な例|ajaxメソッド
コールバック関数について
フックのコールバック関数には、Ajax通信によってサーバー側で実行する処理を記述します。クライアント側(PC側)に返すデータはechoで指定します。また、その返したデータは、ajaxメソッドのsuccessの値に指定する関数の引数にセットされます。

Ajax通信がローディング中に、くるくる(スピナー)を表示させたい場合(リンク有り)

レイアウトがずれる。また意図しない改行がある。原因は、WordPressで自動挿入されるpタグ
知らないと恥ずかしい!WordPressで自動挿入されるpタグを自動挿入させない方法

2021 08 25 (令和3年8月25日 水)

本日のわかったこと。
cssの装飾について、genericのstylesheetに設定有り。(.buttonとして)これがdefaultとなる。
inputタグ、buttonタグ、hrefタグ等の種類有り

2021 08 26 (令和3年8月26日 木)

リダイレクト
初めてでもできる!WordPressのリダイレクト設定手順をすべて解説

カスタムテンプレート
前後にPHPを挿入すること。
Creating Custom Page Templates for Global Use

2021 08 27 (令和3年8月27日 金)

Ajax seo 対策
Search Console
Search Console の概要

2021 08 29 (令和3年8月29日 日)

spinner スピナー
非同期処理中の Now Loading を jQuery で表示させる方法

実装してみたものの、見た目イマイチ。エリア名の不透明度を変化させることでおkとする。
jQueryでCSSを変更する方法

2021 08 30 (令和3年8月30日 月)

GREEN GENERICSにPHP実行環境構築 functionsに登録(php include)

googlemaps表示作業が完了次第以下作業へ移行

ペグマン、英語: Pegmanの表示不具合は、genericsのstylesheetの設定の問題と判明。

第2ステップとして、googlemap表示関連開始
表示出来次第、load.htmlを使って動作確認。
jQueryのAjaxを使用して外部htmlを読み込む

Word Press 関連

2021 08 19 (令和3年8月19日 木)

ひととおり、CSS関連学習終え、本日よりword press関連 スタート。

WordPress ブランクテーマ

密かに使ってるカスタマイズ前提のWordPress ブランクテーマ4つ
「Bones」の使い方
Bones download

Borns
全体のレイアウトは、12分割のgridスタイル。コンテンツ外の余白設定が解らず断念。
sass要。使いこなすには、時間が必要。

style.css
key word
/*********************
BOX SIZING
*********************/

2021 08 19 (令和3年8月20日 金)

Bootstrap4
WordPressでのBootstrapの使い方!基礎を知ろう
https://getbootstrap.com/

Atom
Atomでsassを使いたいと思ったのでその方法をまとめました。

キャッシュ削除
【WordPress】キャッシュ削除せずに CSS の変更を反映させる方法

2021 08 21 (令和3年8月21日 土)

Generic(A superb starter theme)素晴らしいスターターテーマ
Generic(A fully responsive)
Generic Theme Demo Just another WordPress site
Generic CSS Grid

レイアウトは、flexか、フルスクリーン対応で、かつ超シンプル。。。しばらくはこれを基に学習か。
2021 08 22 (令和3年8月22日 日)

重要!!
bornsのレイアウトについて
テーマ内のcss library/css/style.cssのwrap(@media only screen)により変更可。おk

Googleドキュメント

2021 08 11 (令和3年8月11日)

備忘録(重要)
用語集作成時に、画像から文抽出の県について
以下サイト
超絶便利!画像化されている文字からテキストを抽出できるGoogleドキュメント(OCR)

  • Googleドキュメント
  • Googleドライブにアクセス
  • Googleドライブに画像をドラッグアンドドロップ
  • アップした画像をGoogleドキュメントで開く

CSS jQuery HTML

レスポンシブ対等サイト構築学習
ハンバーガーメニュー(hamberger menu含む)

目標サイト
Arbor Digital

2021 08 04 令和3年8月4日(水)

ハンバーガーメニュー
【レスポンシブ対応】ハンバーガーメニューの作り方解説(jQuery)
動作確認。さらに理解を深める。

以下に、コピペ サイト有り。
jQuery Core – All Versions

jQuery のtoggleClassメソッドを使用して CSS を変更

2021 08 05 令和3年8月5日(木)

二つの方法

  1. jQueryのtoggleClassを使う方法(上)
  2. チェックボックスを使う方法(CSS)

[CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法

重要(Stack Overflow)!!
Pure CSS Hamburger menu shows up when resizing viewport before disappearing
StackOverflow2.htmlにあり。一部修正して完動。。。

2021 08 06 令和3年8月6日(金)

画面ZOOMによるCSS切り替えポイント
@media only screen and (min-width: 600px) {
@media only screen and (min-width: 768px) {
Arbor Digital CSS 名前 blocks.style.build.css
style.css内にmenu関連有り。
(Site Navigationで分類)
/* Site Navigation—————————————————————————- */

/* Responsive Menu——————————————— */

ヘッダー含めて(site-header)考察要!!

メニュー関連JS
js/menu/responsive-menus.min.js
検索ワード(responsive-menus)

W3Schools
W3Schools

2021 08 09 令和3年8月9日(月)

引き続き、目標サイト解析中。その中で、style sheet内にjs-superfish有り。
検索すると、以下jQueryプラグインであることが判明。
簡単にドロップダウンメニューがつくれる「Superfish」

2021 08 114 令和3年8月13日(金)
font-family
2020年に最適なfont-familyの書き方

2021 08 0 令和3年8月14日(土)
clearfix
【CSS】今更clearfixについて解説してみる

web design trends
【2021年版】おしゃれな配色パターンが見つかる!カラーパレット人気ツール20個まとめ

2021 08 15 令和3年8月15日(日)

w3schools.com
css navigation barにシンプルなResponsive Topnav有り、余計なものが無いので理解し易い。

Responsive Topnav
CSS Image Gallery
CSS Image Gallery

2021 08 16 令和3年8月16日(月)

用語集VerUp予定

The border-radius Property


h1 {
color: #505050;/*文字色*/
padding: 0.5em;/*文字周りの余白*/
display: inline-block;/*おまじない*/
line-height: 2.3;/*行高*/
border: 2px solid #73AD21;
vertical-align: middle;
border-radius: 25px 25px 25px 25px;/*左側の角を丸く*/
}

テーブル装飾
w3school
CSS Table Style

2021 08 16 令和3年8月18日(水)

W3SCHOOL CSS部分 一通り学習。。。

  • CSS Website Layout(Responsive Website Layout有り 遷移が無ければ、これでおk)
  • CSS Table (Responsive Table)
  • CSS Flexbox
  • CSS Grid
  • CSS Responsive(Web Design)( Grid-View)以下にリンク

Responsive Web Design – Grid-View

気象予報士用語集

令和3年(2021)7月16日(土曜日)

気象予報士用語集

macbookproへコピー、Xcode Version 12.5.1 (12E507)
iphone8にて動作確認 ok!!

過去問 51回より、抽出中。

UINavigationControllerOneファイルをプロジェクト追加でok。

見直しや追加項目検討。
サイト情報取得・画像取得について、php利用を検討中。

2021 07 28追記
SWRevealViewController スライド幅調整
storyboard black.png変更

tipsにphp正規表現関連あり、チェック要。

【PHP入門】正規表現で検索・抽出・置換する5つの関数を使い倒せ!

PHP】画像をダウンロードして特定のディレクトリに保存する方法

オンライン気象情報

国際式の天気記号と記入方式

天気欄と記事欄の記号の説明jQueryのセレクタに正規表現・属性フィルタを使う方法!

Atom関連 FTPオープンエラーメッセージ
プロジェクトを開かずにファイルを表示していない状態で上記の様にconnectしようとするとエラーが発生するようです。

↑解決!!
packages remoteFTP toggleにて表示される。注意!!
ローカル sakura-tempoにある.ftpconfigに設定faileあり。。

preg_match(“/[A-Z].*/”, $url,$matches);
上にで、取得OK。
sourceは、九州温泉道内にあり、説明も同様。

正規表現関連サイト 以下リンク
【5分でまるっと理解】PHP正規表現の使い方まとめ
PHP の正規表現
正規表現で大文字から始まる文字列を取り出す(Ruby)

令和3年(2021)7月28日(水曜日)
記号等ダウンロード、一段落。加えてhtml作成まで完了、
cssによるテーブル修飾等も一段落。

令和3年(2021)7月29日(木曜日)
更新にあたって留意事項!!
WebViewControllerのピンチアウト対応。拡大縮小については、
self.webview.scalesPageToFit = NO;にておk。

AppDelegate内にて、三つのファイル読み込み。OBJECTS変換。model OBJECTS termに変換。

スライドメニューの移動量設定は、SWRevealViewController内にあり。

storyboard RootView Controllerのpngをblackに変更。

appdelegate 最後の行null読み飛ばし処理

CSSすら不要!detailsとsummaryタグで作る簡単アコーディオン
アコーディオン(折りたたみ)

Adobe Photoshop

画像編集ソフト。写真やイラスト、3Dアートワークの作成、webサイトやモバイルアプリのデザイン、動画編集や描画などはPhotoshopで。


令和3年(2021)8月1日(日曜日)
新規項目、内容充実ほぼ完了。あとはwebとviewの振り分け。もう一度各回をみて、項目移動や追加など。


UIColor* color = [UIColor colorWithRed:1.0f green:1.0f blue:1.0f alpha:1.0f];

Convert HEX & RGB colors to UIColor
伝統のいろは

pageViewController–>>rootview
ページ遷移の色変更は、AppDelegate内にあり。
pageViewController下に、APL(参考資料、衛星用語)有り、メイン画面は、TABLEVIEW内。。
タイトル文字等変更は、TABLEVIEWとAPLのふたつ。

令和3年(2021)8月2日(月曜日)
Export signing certificate:
Xcode has created a new Apple Distribution signing certificate for “”. The private key for this certificate is stored locally in your Keychain and cannot be recovered if lost. Apple recommends exporting the certificate and private key and storing them in a safe place.
Export Signing Certificate…
署名証明書のエクスポート
Xcodeは、「」の新しいAppleDistribution署名証明書を作成しました。 この証明書の秘密鍵はキーチェーンにローカルに保存されており、紛失した場合は復元できません。 証明書と秘密鍵をエクスポートして、安全な場所に保管することをお勧めします。
署名証明書のエクスポート…
develop用語集に保存。

App Store upload 0k!!

amazonドキュメントによる画像翻訳
amazonドキュメントからドライブを立ち上げること。
詳細は、imaichi daiaryにあり。

App Store upload ok!!
privacy policy新規作成 www下(編集はxcode)保存してftpにて転送!!
気象現象のスケール見直し中
ほぼほぼ完成中!!

令和3年(2021)8月3日(火曜日)
App Store connect upload作業など。。。
LaunchScreen画面 5.5 6.5 取得 upload
iPhone 11 Pro Max
iPhone 8 Plus
輸出コンプライアンス情報
Apple Storeへの審査でよく分からない「輸出コンプライアンス」についてまとめてみる

App Store UPLOAD waiting for review!! → In Review 公開

令和3年(2021)8月4日(水曜日)
後始末エトセトラ
サポートurlは、wordpress本家(問い合わせ確認ok)support@ メールアドレス MacBook設定完了。
もうひとつのサポートurlは、odekake。パスワード再設定。phpadminにて、MD5に注意!!