相変わらずの気まぐれで、なんやかやと変更したい部分が発生しています。

　今回は処理モードを確定して、それに伴う処理を行う様に変更を加えました。

商品マスタ設定画面

ここで今まで体験したことがないｊｓｏｎエラーが発生しました。

悩むこと丸一日、中々答えが見つかりません。

色々と調べてもコード的な原因が見つかりません。

二日目の朝、以前からよくミスををしていた「ファイルのコード」を念のため調べました。

案の定ＰＨＰファイルだけＵＴＦコードになっていません。

製造中はデータベース項目を貼り付ける作業が中心で、たまたまエラーにならなかった様で

す。

データベースはテーブルを製造する時にＵＴＦコードの設定をしていますので問題なく、文

字を使う部分でｊｓｏｎエラーになる部分が発生したと考えています。

スマホによる動作の異なり発生

ある程度動作確認ができる状態になりましたので、スマホで動作確認を行いました。

パソコンでは問題なく動作していますが、スマホになると同じ様に動作しない部分が発生し

ました。

まずＥｎｔｅｒキーの動作ですが、イベントの動作についてはｋｅｙｄｏｗｎイベントを利

用して発生キーのコードを確認する様にしていましたが、この処理がスマホではパソコン同

様の処理ができないことが分かりました。

色々と調べた結果、イベントをｃｈａｎｇｅに変更してキーコードを確認しない様に変更し

たら希望する様な動作が得られました。

次にｔｅｘｔａｒｅａタグの問題です。

商品名の入力文字数が全角２５文字で、スマホ画面のサイズを考えるとｉｎｐｕｔタグは幅

が大きくなり使用できず、ｔｅｘｔａｒｅａタグの複数行入力を使用して幅を小さくしまし

た。

これで可能かと思いましたが、Ｅｎｔｅｒキーが複数行の改行動作になりますので利用でき

ません。

イベントがｃｈａｎｇｅですので、入力終了は枠外をクリックしてフォーカスを移動させる

ことになります。

これよりも入力終了ボタンを追加して明確に終了とする方法を選択しました。

上の画面が説明の状態になります。

これで今のところスマホについての動作問題は落ち着いています。

商品マスタ設定画面は　製造継続中です。

小分類マスタ設定画面

この小分類マスタ設定画面は前の中分類マスタ設定画面と比べて使用している項目が

変更になるだけです。

ただ、この画面を製造する時に新しい問題とか気まぐれが発生しますので、さかのぼ

って修正を加えます。

中分類マスタ設定画面

大分類マスタ設定画面に新しく上位の「大分類コード」テキストが追加になりました。

今までの画面はボタンだけのイベントでしたが、それにテキストのイベントが増えました。

大分類コード入力で大分類名をデータベースから読込みますので、この処理をテキストの

イベントの中に記述しています。

大分類マスタ設定画面

店舗設定と同じく今回の製造の基本となる画面になります。

画面の行数を減らすために更新ボタンを横並びに変更しました。

「店舗設定」の開発はテスト仕様書の内容どおり完了しました。

成果物(店舗設定)

　・テスト仕様書 [PDF]

　・開発コード(ＨＴＭＬ) [PDF]

　・開発コード(ＰＨＰ) [PDF]

　レベルが高いコードではありませんが、ご覧ください。

　簡易型システムとして作成しましたので、ご了承下さい。

　次は「大分類設定」画面のプログラミングですが、今回の開発した内容が

　ベースになります。

今回の課題

  店舗設定について課題は残りました。

　①レコード排他の開始位置

　　今の更新ボタンの中で排他設定・解除を行っていますが、同じタイミングで同一

　　レコードを操作した場合、後から更新をした方の内容が残ります。

　　現実問題として同一店舗を同時に更新することがあるのか考えてみるとまずあり

　　ません。

　　現行環境で色々と考えてみました。

　　非同期通信の中で悲観的排他を実行した場合に、途中で非同期通信の処理をぬけ

　　るとTranzactionが無効になって排他ロックが維持できなくなります。

　　この様な場合には楽観的排他がベストの様にも感じましたが、決論として現行の

　　更新ボタン内での悲観的排他を継続する様にしました。

　　店舗設定は入力項目が店舗名の１項目ですが、入力する項目が増えると更新ボタ

　　ン内の排他の意味が増してくると考えます。

　　最終形態

　　　ＩＮＳＥＲＴ…２重キーの発生で対応する。

　　　ＤＥＬＥＴＥ…レコード無しで対応する。

　　　ＵＰＤＡＴＥ…登録状況確認で取得した更新日と排他ロックで取得した更新

　　　　　　　　　　日を比較して、後者が大きい場合は更新済みとしてエラーに

　　　　　　　　　　にする。　　　　　　　　　　   

　②Ｅｎｔｅｒキーの動作

　　前段で記述したとおりＥｎｔｅｒキーで次の項目へ進むことは必要と考えます。

　　ここで問題になるのがボタンにフォーカスがある場合、Ｅｎｔｅｒキーを押すと

　　次の項目へ移動します。

　　つまりボタンはクリックでしか動作しません。

　　Ｅｎｔｅｒキーで誤ってボタンの処理を動作させるよりもクリックに限定した方

　　が処理的に問題がない様にも感じます。

　　大した問題ではありませんが拘ってしまいました。

ｗｅｂシステムの難しさを実感！！

　「店舗設定」のプログラミング完了後、他の環境での動作を行いました。

　使用した環境

　　・Windows11 + Google chrome  (開発環境)

　　・Linux(mint) + Google chrome

　　・Android + Google chrome

　非同期通信に必要な手続きを完全に設定せずに、Windows でデバッグを行い目的

　とする動作が得られたので完了と思いましたが、上に記述したとおり環境に変える

　と同じ動作が再現できませんでした。

　原因は非同期通信で取得した内容を画面項目の[value]に代入していますのでタグ

　の属性が変わり、[input]タグのパターンが初期設定の状態ではありませんでした。

　対策として、画面項目の[value]に代入した後にパターンの再設定を追加しました。

　この問題に関してはＬｉｎｕｘ環境で正常動作の確認が完了しています。

　更にスマホ環境については、回線の不安定による問題やスマホ独自の挙動が考え

　られます。

　現行の中にも多少の対応は記述をしていて、問題が発生しなければ処理はできま

　すがベストではありません。

　そのためにスマホが必要な処理については、ＫｏｔｌｉｎやＤａｒｔの様なスマ

　ホに適した言語を使用することを考えています。

登録前のデータベースの内容

[03 店舗Ｃ] を追加する前のデータベースの内容になります。

登録する前の準備画面

①店舗コード[03]を入力して「登録状況確認」ボタンを押しました。

②店舗名を入力して「データ登録」ボタンを押します。

下の枠には操作手順が表示されています。

登録後の画面

枠の中が「データの登録が正常に終わりました。」に変わっています。

変更モードで確認

登録された内容が表示されていますので、店舗名の変更やレコードの削除ができます。

店舗コードについては主キーが設定されていますので変更ができません。

削除して再登録の処理になります。

登録後のデータベースの内容

ここまでの感想

久しぶりのプログラミングでしたので、単純ミスの繰り返しで苦労しました。

エラーの解決はＧｏｏｇｌｅのコンソールとレンタルサーバーのｐｈｐのエラーログ

を使用しています。

お詫び

現在２つのブログを投稿していますので、時間を切り分けながら準備をしています。

家にいる時はプログラミング中心で、それ以外はブログの取材で福岡・佐賀・長崎・

大分・熊本を下道を利用してドライブしています。

成果物　コード内容

コーディング パターン (ｐｈｐファイル)

　ｐｈｐコード

　ｈｔｍｌコード

コーディングを始める前に考えてみました。

ｗｅｂのシステム開発は基本ができている訳でもなく、どちらかと言うと自分流(我流)で

やっています。

今回自分流を振り返る意味で、ｗｅｂの基本スタイルを調べて方向性を明確に定義しよう

と考えました。

まず、最初に明確にしたいと思った内容は、「非同期通信」です。

現在動作している非同期通信システムはＡｊａｘを利用したものですが、以前から疑問が

ありました。

今回、非同期通信について調べました。

まずＧｅｍｉｎｉ様がどの様な回答を出してくるか、問いかけてみました。

回答があったサンプルコードを動作させてみましたが、ｊｓｏｎのエラーが出てなかなか

実行できません。

１３日の金曜でもないのにｊｓｏｎエラー？　(映画の見過ぎ？？)

２日間悩んで、風呂上りにコードを再度見てみましたが問題ありません。

ふとエディターの下の方を見たら、ｈｔｍｌファイルはｕｔｆ－８、非同期通信のｐｈｐ

ファイルはｓｊｉｓになっています。

これならｊｓｏｎエラーになるなと感じ、修正しましたら正常に動作しました。

シンプルな非同期通信を調べた結果、Ａｊａｘかｆｅｔｃｈか、今回はｆｅｔｃｈを利用

して開発することにしました。

店舗設定画面  [f-tenpo.php]

【仕様】

スマホ画面の操作を考えて、テキストの高さを４２ｐｘボタンの高さを４８ｐｘとする。

初期の操作可能項目

　店舗コード入力

　登録状況確認ボタン

その他の項目は操作できない様にする。

店舗コードを入力して、登録状況確認ボタンを押す。

店舗コードが未登録の場合

　店舗名を入力可に、データ登録ボタンを操作可に、その他のボタンは操作不可にする。

店舗コードが登録済みの場合

　店舗名称を表示して入力可に、データ変更ボタンとデータ削除ボタンを操作可にする。

　その他のボタンは操作不可にする。

【データベース更新】

データ登録…Ｉｎｓｅｒｔコマンド

データ変更…Ｕｐｄａｔｅコマンド

データ削除…Ｄｅｌｅｔｅコマンド

Ｕｐｄａｔｅの場合、変更日に現在の日時を入力する。

動作確認が終了したら以下の内容を別ファイルへ書き換える。

　・起動ファイル　　　　　：f-tenpo.php

　・ｃｓｓ　　　　　　　　：f-tenpo.css

　・ｊａｖａｓｃｒｉｐｔ　：script.js (共通)  tenpo.js (個別)

　・ｐｈｐ　　　　　　　　：func.php (共通)  tenpo.php (個別)

初期起動ファイルは、index.php 固定とする。

（要素）を重ねるレイアウト（モーダル、ポップアップ、ドロワーメニュー、固定

ヘッダーなど）を実装する際、スマホ特有の挙動や制約によるトラブルが多発します。

ユーザーの使いやすさ（UX）やアクセシビリティを損なわないために、必ず押さえて

おくべき注意事項をまとめました。

１. 背面のスクロール連動問題（スクロールバウンス）
最前面にモーダルやメニューを重ねた際、その中でスクロールしようとすると、後ろ

の背景画面（body）まで一緒にスクロールしてしまう、または背景だけが動いてしま

う現象（Scroll Chain）が起きます。

対策: 
重ねる画面が表示されている間は、CSSで body { overflow: hidden; } を付与して

背景のスクロールを止めます。
　iOS（Safari）の注意点: 
　iOSでは overflow: hidden だけでは背景スクロールが止まらないことが多いため、

　JavaScriptの touchmove イベントを制御するか、

　　CSSの overscroll-behavior: contain; を重ねる要素に指定してスクロールの

　　伝播を防ぐ必要があります。

２. タップエリアの重複と「誤タップ」
画面を重ねる際、透明な背景（オーバーレイ）や非表示の要素が原因で、クリック

イベントが意図しない挙動をすることがあります。

非表示時の注意（opacity の罠）:
モーダルを閉じる際、CSSで opacity: 0（透明）にしただけでは、要素はそこに存在

し続けているため、ユーザーが下のボタンを押そうとしても透明な壁に阻まれてタッ

プできない状態になります。

対策: 
非表示にする時は必ず display: none にするか、pointer-events: none を指定して、

タップイベントを透過させてください。

z-indexの管理:
z-index の値はむやみに 9999 などを連発せず、コンポーネントごとのルール

（例：ヘッダーは100、モーダルは200、トースト通知は300など）を決めて管理し

ないと、重ね順が崩壊します。

３. アドレスバー（ツールバー）による高さの変動
スマホのブラウザ（SafariやChrome）は、スクロールすると画面下部や上部のアド

レスバーが引っ込んだり出たりします。
これにより、画面の高さ（100vh）の定義が変わり、レイアウトが崩れる原因になり

ます。

問題点: 
height: 100vh; で画面いっぱいに重ねる要素を作ると、アドレスバーのせいで画面

下部にあるボタン（「閉じる」や「決定」など）が隠れて押せなくなることがありま

す。

対策: 
CSSの新しい単位である dvh（Dynamic Viewport Height） を使用してください。
height: 100dvh; と指定することで、アドレスバーの伸縮に追従した正確な全画面

表示が可能になります。

４.タップターゲットのサイズと位置（アクセシビリティ）
画面を重ねて表示する「閉じる（×）」ボタンや「次へ」ボタンが小さすぎたり、

押しにくい位置にあるとユーザーに強いストレスを与えます。

親指の届く範囲（親指ゾーン）: 
スマホを片手で持った際、画面の上部は親指が届きにくいです。
重要な操作ボタン（「購入する」「保存する」など）を重ねる画面内に配置する場合

は、画面中央から下部に配置するのが親切です。

ターゲットサイズ:
AppleやGoogleのガイドライン通り、タップできる要素は最低でも 44px × 44px

（または 48px × 48px）以上のサイズを確保してください。

5. キーボード表示時のレイアウト崩れ
重ねた画面（フォームなど）の中にテキスト入力（<input> や <textarea>）があ

る場合、スマホの仮想キーボードが立ち上がります。

問題点: 
キーボードが立ち上がると、画面の表示領域が極端に狭くなります。
このとき、重ねている画面が固定（position: fixed）されていると、入力欄や

「送信ボタン」がキーボードに隠れて見えなくなる、あるいは画面外に押し出され

る現象が起きます。

対策: 

入力欄がある重ね込み画面は、縦方向に十分なスクロール（overflow-y: auto）が

できるように設計しておく。

キーボード表示時（visualViewport の変更時）のレイアウトへの影響を実機で必

ずテストする。

まとめ：実装時のチェックリスト
項目チェック　内容
背面固定　　　モーダルを開いたとき、後ろの画面がスクロールしないか。
非表示時　　　閉じているとき、透明な要素が下のボタンの邪魔をしていないか。
高さ指定　　　100vh ではなく 100dvh を使い、ボタンが隠れないようにしてい

　　　　　　　るか。
ボタンサイズ　閉じるボタン（×）などは十分な大きさ（44px以上）があるか。
キーボード　　入力フォームが立ち上がっても、ボタンや入力欄が隠れないか。

私の技量では半分ぐらいしか理解できませんが、開発の途

中でＧｅｍｉｎｉ様に確認しながらクリアしたいと考えて

います。

数年前は、ＡＩは使えないと感じていましたが、今回のシステム開発については、

Ｇｅｍｉｎｉは十分使えると感じています。

ＥＸＣＥＬを利用してスマホの画面イメージを作成しました。

スマホの画面定義で矛盾することもありますが、イメージとしてご理解下さい。

画面設計書(ｐｄｆリンク)

マスタ情報

　各マスタの初期設定、メンテナンスを行う画面です。

　商品マスタには小分類を設定しているので、分類を利用する時は小分類から

　大分類に向かって分類コードの結合を行う。

　本来の業務ではもっと項目が必要になりますが、今回は在庫管理システムと

　言うことで割愛して縮小しています。

　・店舗設定

　・大分類設定

　・中分類設定

　・小分類設定

　・商品情報設定

データ情報

　・仕入入力

　　本来の業務では検品システムからの仕入確定や納品データの更新によって

　　仕入を確定しますが、今回は画面入力にしています。

　　通常は当月の日付しか入力できませんが、棚卸時期に翌期の仕入が入荷す

　　る場合がありますので翌月の仕入も入力を可能にします。

　・売上入力

　　本来の業務ではレジデータからの取り込みが一般的です。

移動処理

　入荷店に移動情報をどの様に伝えるか問題がありますが、本来は商品に移動

　明細を添付して出荷します。

　・出荷処理

　　移動する商品と数量を移動№で登録します。

　　この時点では移動データとして未確定の状態です。

　・入荷処理

　　移動№を入力して出荷データを表示して入荷数量を入力します。

　　更新することで移動データが確定します。

棚卸

　・調書作成

　　残高対象データをＵＮＩＯＮで追加して、残高コンバートテーブルを作成

　　し棚卸調書テーブルを作成します。

　・在庫調査

　　棚卸作業を行い棚卸調書テーブルに在庫数を更新します。

　・在庫ロスリスト

　　ロスが発生した商品を確認できる様にします。

　・棚卸未着リスト

　　棚卸作業がもれている商品を確認できる様にします。

これから、プログラムを作成します。

色々な問題に遭遇すると思いますが、問題も含めて紹介

をしていきます。

今回はレンタルサーバーを利用しますが、プランによっては通信量やデータ
ベースサイズ等の制限があります。
集計処理についてはＳＱＬを利用して行いますので、発生件数によっては
制限によるトラブルが発生します。
今回はＬＩＭＩＴ句を利用して制限を超える場合の対策を考えています。
ちなみにデータ件数は、１０００件以上を想定していますので１０００件
単位のＬＩＭＩＴで繰り返しの処理を行います。
件数が多くなった場合は、集計テーブルに都度集計することもありますが
今回はＳＱＬ主体のシステム作りを行います。

私の中にはデータベースシステムが存在しないオフコン時代の古い考えが
残っていますが、ＳＱＬの利用したシステムを考えていますので処理時間
が課題として残るかもしれません。

テーブル定義の補足
店舗マスタ
　店舗コードは２桁ですが、1～9までの数値にはゼロを付加する様にして
　います。(01～99とし文字列としています)
　ゼロを付加する重要性を考えています。
　店舗名は名称の後に空白が入らない様にvarchar型としています。
大分類マスタ

　01～99とし文字列としています。
中分類マスタ

　001～999とし文字列としています。
小分類マスタ

　0001～9999とし文字列としています。
　各分類マスタについても「店舗マスタ」同様の事を考えています。
　分類コードは単品から大分類までリンクできる様にして、必要な分類を
　使用できる様に考えています。
商品マスタ
　個人的な好みかもしれませんが、数量や金額にはdecimal型を利用します。
仕入データ
　本来は当月だけのデータしか入りませんが、棚卸時に翌期の商品が入っ
　てくる場合がありますので、計上を繰越として除外することを考えてい
　ます。
移動データ
　出荷と入荷の両方の意味を含んでいて、入荷で計上の対象になります。
　数量の取扱いはtenpo_cdでマイナス計上、idousaki_cdでプラス計上を
　行います。
売上データ
　数量にはプラスの数値が計上され、在庫集計時はマイナスとして計上
　をします。
棚管理マスタ
　商品棚、棚の段数、横並びの列をＪＡＮコードを読込んで設定します。
　棚№と段№は物理的な番号を設定し、列は読込んだ順を連番として設
　定します。
残高コンバート
　棚卸調書用のコンバートしたデータを残します。

　デバッグ作業も考慮しています。(ＵＮＩＯＮを使用します)

　先々は一連のＳＱＬへ変更することも考えています。
棚卸調書
　残高コンバートを店舗、商品毎に集計したもので、これに期末の在庫
　と調査コードを更新します。
　翌期への繰越は棚卸終了後に期末在庫を新しい年度、期の期首在庫に

　更新します。
管理データ
　年度、期、当月を登録し月次処理が完了したら翌月内容に更新し年度

　、期も時期に合わせて更新します。

家庭で使える環境
　レンタルサーバー：　スターレンタルサーバー(無料プラン)
　データベース：　　　ＭｙＳＱＬ
　言語：　　　　　　　ＨＴＭＬ
　　　　　　　　　　　ＰＨＰ
　　　　　　　　　　　ＪａｖａＳｃｒｉｐｔ
　　　　　　　　　　　ｊＱｕｅｒｙ
　　　　　　　　　　　Ａｊａｘ

上記の言語とデータベースを使ってオフコン動作ベースの「在庫管理」システムを
設計からプログラミングまでを行います。

なぜ、オフコン動作ベース
ＷＥＢのプログラミングを行ってみると、フォーカスの動作、Ｅｎｔｅｒキーの
使い方などオフコンの動作との違いを感じます。
オフコン動作に疑問を感じられるかもしれませんが、通信のやり取りなどを考慮して
パソコン動作になれた使い方を模索しようと考えています。

今までの主な仕事
ＶＢを利用してクライアントサーバーシステムを開発していました。
パソコン画面から伝票等を入力するイメージです。
これをＨＴＭＬで行うと、同じ動作を作成するのに苦労します。

これからの開発
スターレンタルサーバーは、Ｐｙｔｈｏｎも利用できますが、今回はＨＴＭＬ
を選択しました。

細かな動作については、ＪａｖａＳｃｒｉｐｔで補っていきます。

利用端末はパソコンを主体に考えています。

ただ、ハンディ機器を必要とする部分はスマホにスキャナーを装着して実現します。
バーコードを読込む付属機器も販売されていますので、ハンディターミナルイメージ
の処理が可能になります。

各言語に不慣れな部分は、Ｇｅｍｉｎｉを補足的に使っていきたいと考えています。
完成にどれくらい時間を要するか分かりませんが、製作過程を紹介したいと考えてい
ます。

最後に在庫管理に必要な項目だけにして、不必要な項目は割愛してコンパクトに製作
したいと考えています。
長年小売業のシステム作りを担当していましたので、詳細な部分を考慮するとシステム
が大きくなりますのでご了承下さい。
またＷＥＢ開発については、素人の域ですので宜しくお願いします。

手順としましては、
　・データベース設計書
　・画面設計書
　・プログラミング仕様書

　・プログラミング
　・テスト仕様書
を主にして補足内容を付加して紹介します。