連絡履歴（社長と新入社員のICT開発 2023-07）

2023-07-03〜

本編記事

RWD化開発仕様メモより
HTMLのインデントは４⇒２に変更。PHPとJavaScriptは４のまま。
⇒PHPが２になっています。

RWD化開発仕様メモより
HTMLやPHPは、可読性を向上するため、ロジカルに行を空ける。
⇒何となくですが、見本としてやっておきました。
　出来るだけ見やすくしないと、後で後悔します。

不要なスペースが散見されました（２箇所）。
可視化して削除しましょう。


はサンプル用に記述しておいたものなので不要です。

スマホでみた場合、

テープルのセル内テキストが改行されて、非常に見づらい問題は、

画面サイズ判別によって、別テーブルを表示する事で対処しましょう（独自CSS）。

2023-07-10〜

本編記事

ページ内リンクボタンの表示問題ですが、
（★HTMLのテーブルで解決するのは、くれぐれもNGです）
「Bootstrapのリスト（list）を使ったら」と言いましたが、
あとで自分自身「？？？」となったので検証しました。
http://192.168.xx.xx/sample.html
参考にして下さい。

↑のような問題の解決策がフレームワークなので、
よく調べて実装すれば、大抵の事はフレームワークで解決できます。
★フレームワーク（デフォルト）の機能を使い、出来るだけオリジナルな事をやらない、です。
　オリジナル（独自CSSなど）は、止むを得ない場合のみにしましょう。

リンクボタンの当社組織グループ名は、略称で大丈夫です、略称が社内で認識されています。

⇒Yさん

上記について質問です。

今はDBに入っているデータを取り出して目次に表示しているのですが、略称で作成する場合はコードの方に手打ちで入力する形になると思います。
そちらでよろしいでしょうか？

⇒社長

あそうなんですね・・・（解説：過去に自分で実装したのに忘れている）
「DBに入っているデータを取り出して目次に表示」でお願いします。
×略称です。

⇒Yさん
承知いたしました。
「DBに入っているデータを取り出して目次に表示」で進めさせていただきます。

PHPの変数や配列は必ず{}で囲むようにしましょう、安全性と何よりも可読性です。
↓の変数部分が囲われていませんでした。

ページ内リンクですが、

<a href="http://xxxx/ディレクトリ名/?#アンカー名">リンクテキスト</a>（絶対URL）
と記述されていますが、
<a href="ディレクトリ名/#アンカー名">リンクテキスト</a>（相対URL）
で機能します。
絶対URLの場合、そのまま本番環境に移行すると誤作動します。
（「?」も不要です）

社内システムなので油断していましたが、
コーディング規約をしっかり守りましょう。
https://www.infiniteloop.co.jp/docs/psr/psr-2-coding-style-guide.php
がわかりやすそうです。
スペースなどチェックして下さい。

<code>
while ($expr) {
    // structure body
}
if ($expr1) {
    // if body
} elseif ($expr2) {
    // elseif body
} else {
    // else body;
}
</xode>

コメントをこまめに書きましょう。
私独自ですが、↓としています。
//■コメントコメントコメントコメント
コメントを発見しやすいので、今回はこれでお願いします。
大きなコードになると、自分で書いたものでも、後で「何だこれ？」となります。
未来の自分に宛てた手紙です。

スマホ画面の[目次へ]ボタンは、
右側にあると、スクロールした際に、意図せずに親指で押してしまいそうなので、
センタリングした方が良いと思います。

xxxxxxxx/index.html
180行目～195行目はPHPで出力する必要は無いと思います。
あとで「？？？」となるので、変数や配列を含まないものは出来るだけHTMLのままにしましょう。

191行目onkeydown=”forEnter();”は不要です。
ああ懐かしい・・・
フォーム内（～）のinputtype=”text”などを選択した状態でエンターキーを押すと、
送信（submit）されてしまうのを防止する独自関数です、以前実装していました。
今は、～内にinputtype=”text”などをあまり置きません。

function forEnter() {
    if (event.keyCode == 13) {
        event.cancelBubble = true;
        event.returnValue = false;
    }
}

2023-07-18〜

本編記事

Yさんが夏休みでいないので、DBの見直しとシナリオ管理機能の改修（私担当）のメモです。

DBに関しては、
〇プライマリーキーと表示順の値を共用している。
〇シリアル化（配列）して複数のカテゴリを１つのカラムに収納している（でもこれは、当時、私がアドバイスしたと思う・・・）、先々カテゴリー数を増減できるが、PHP側の処理が複雑になる。
が問題点で、それらを踏まえ再構築しました。

シナリオデータのベースはCSVファイルで、
CSV（Excelベース）読み込みあるあるですが、改行と「”（半角ダブルクォーテーション）」の問題があります。

〇改行検知問題（CSVから改行ありデータをむやみにアップロードできるので）

strstr($str, PHP_EOL)が効かず「？？」で随分悩みましたが、
mysqli_real_escape_string($con, $str)後に実行していました・・・ア〇です。
当たり前ですが、エスケープした後は検知しません。

〇「 “（半角ダブルクォーテーション）」問題
HTMLの表示にも影響するので、使用を禁止するなり、容赦なく削除するなり、すればいいのですが、それもちょっと乱暴なので、半角⇒全角に変換することにしました。
CSV（Excel）の「”」の仕様ですが、たぶんこういう事です。
・CSV（Excel）に“aと記入したものを、エディタなどで見ると“““a“。
　“を含む場合は自動で“”で囲い“でエスケープ。

　“”aの場合は“““““a“。
・改行有りも、自動で“”で囲われる。

まずは前後の「”」を取り除く関数を作りました。

//■文字列の先頭と末尾から「"（半角ダブルクォーテーション）」を１文字だけ取り除く関数

function trimDQ($str) {
    //■文字数
    $count = mb_strlen($str);
    //■先頭文字
    $fast = mb_substr($str, 0, 1);
    //■末尾文字
    $end = mb_substr($str, $count -1, 1);
    //■「"」だったら取り除く
    if ($end == "\"") {$str = mb_substr($str, 0, $count - 1);}
    if ($fast == "\"") {$str = mb_substr($str, 1);}
    return($str);
}

そして「”(半角ダブルクォーテーション)」を全角に変換する処理です。
先に👆trimDQ($str)で文字列両端から「”」を取り除きます。
そのままstr_replace("\"", "”", $str)すると、「”（全角）」の数が倍になるので、２⇒１str_replace("\"\"", "\"", $str)にしてから全角に置換します。

//■「"(半角ダブルクォーテーション)」を全角に変換

//■文字列の先頭と末尾から「"（半角ダブルクォーテーション）」を１文字だけ取り除く（↑独自関数）
$str = trimDQ($str);
//■２つ⇒１つにする
$str = str_replace("\"\"", "\"", $str);
//■半角⇒全角に変換
$str = str_replace("\"", "”", $str);

改行付きは「”」で囲い直さないと、CSV（Excel）にした際に滅茶苦茶になりますが、

DBにはCSV（Excel）の仕様に合わせたデータは入れない方がいいので、
それはCSVをダウンロードする際に実行するようにしました。

//■改行を含む場合は「"（半角ダブルクォーテーション）」で囲い直す

if (strstr($str, PHP_EOL)) {
    $str = "\"" . $str . "\"";
}

一応これで意図した通りに動作しています、まだ問題があるかも知れませんが。
今回、挿入・変更・削除Webフォームも作るので、その際も注意が必要です。
CSV（Excel）の仕様に依存しているので、「”」使用禁止機能も作って、準備はしておきます。

本当は、「”（半角）」のままDB登録する仕様を試行錯誤したのですが、処理が複雑になるので、割り切りました。

2023-07-24〜

本編記事

リサさんの顔の表示にタイムラグがある問題ですが、
PHPを経由せずに、公開ディレクトリの画像を読み込ませるようして、
キャッシュを効かせて、タイムラグが無いようにしました。

⇒Yさん
「”（半角）」だけではなく「’（半角）」「\（半角）」のデータもJavaScriptがエラーになります。

⇒社長
気が付きませんでした・・・
これは、新規登録の際に、[カテゴリー１] [カテゴリー２] [質問]が同じデータにならないようチェックする（シナリオとしておかしいので）ため、JavaScriptの配列にいれているからです。
Excelも「’（半角）」は意味があるので、これらも全角に変換するようにします。

文字数チェックですが、
・DB登録用にエスケープしたり、改行もある＝厳密には出来ないので、DBの制約（文字数上限）を変更することで対処しました。
・CSVからアップロード機能のチェック機能の実装が漏れていました・・・実装済みです。