Friction River Software

  • お問い合わせ

CakePHP5入門【コラム⑦】JavaScript

Ａ子

例の掲示板だけどさー
CAPTCHAキャプチャの入力欄って数字オンリーじゃん

Ｃ菜

ですね～

Ａ子

だったら、そこには数字しか入力できないようにしたいんだけど、それってできるかな？

Ｂ美

そういうときは、JavaScriptを使いなさいね

Ｃ菜

ChatGPTに聞いてみるです～

Ａ子

すぐに教えてもらえたよ
（ChatGPTが提示したものとの変更点は「getElementById」の引数だけ）

<script>
document.getElementById("captcha-result").addEventListener("keydown", function (event) {
    // 数字 (0-9)、バックスペース、デリート、矢印キーを許可
    if (
        !((event.key >= '0' && event.key <= '9') ||
        event.key === 'Backspace' ||
        event.key === 'Delete' ||
        event.key === 'ArrowLeft' ||
        event.key === 'ArrowRight' ||
        event.key === 'Tab')
    ) {
        event.preventDefault();
    }
});
</script>

このコードを「bbsapp/templates/Posts」の中にある「add.php」の末尾に追加しただけで、うまくいったよ

ただし、必ず「末尾」に追加すること！
（「先頭」に追加すると動きません）

Ｃ菜

「先頭」に追加した場合、なぜ動かないのでしょう～？

Ｂ美

Captchaヘルパーがrender()メソッドを呼ぶことで、idが「captcha-result」であるinputタグが作られるのよ

先頭でJavaScriptを実行してイベントリスナーを追加しようとしても、まだ上記のinputタグが存在しない…ってわけ

Ａ子

そ、そういうことよ（汗）

Ｂ美

ん？
その反応って、適当にやったらうまくいったって感じか…

いや、それで良いんだけどね（苦笑）

Ｃ菜

あ、ついでと言っては何ですけど～

画像ファイル以外をアップロードしようとした際、警告メッセージを出して投稿をキャンセルするようにしましょうよ～

Ａ子

お、良いねぇ
ChatGPTに聞いてみるよ

・・・

こんな感じで良いみたい

<script>
document.getElementById("send_form").addEventListener("submit", function(event) {
    let fileInput = document.getElementById("upload");

    // 許可する拡張子
    let allowedExtensions = ["gif", "jpg", "jpeg", "png"];
    let fileName = fileInput.files[0].name;
    let fileExtension = fileName.split('.').pop().toLowerCase(); // 拡張子を取得

    if (!allowedExtensions.includes(fileExtension)) {
        alert("GIF・JPEG・PNG 以外のファイルはアップロードできません。");
        event.preventDefault(); // 送信中断
    }
});
</script>

やはり変更した箇所は、赤字のところだけよ
（それ以外は、ほとんどChatGPTの提示したコードのまま）

あれ？
よく考えたらサーバ側でも画像ファイルの拡張子チェックをやってるよね？
（このコードって意味ないかな？）

Ｂ美

いいえ、意味はあるわよ
ユーザによってはJavaScriptをOFFにしている人もいるかもしれないからね

クライアント（ブラウザ）側とサーバ側の両方でチェックするのはとても良いことよ

Ｃ菜

なるほどですね～

あ、バージョンってどうします～？

Ａ子

前々回のfaviconファビコンと前回のレスポンシブ対応もあるから、「Ver.1.2.0」ってことにしようか？

Ｃ菜

わかりました～

「bbsapp/config」の中にある「const.php」も変更しておきますね～

Ｂ美

ちなみに、こういう「改良」のことを「保守ほしゅ」と呼ぶの

「改良」以外には「修正」と「変更」もあるんだけどね

Ｃ菜

「修正」は不具合バグの修正だと思うんですけど～
「変更」って「改良」とは違うんですか～？

Ｂ美

「変更」は外的要因に伴う変更作業のことよ

例えば、税率が変更されたからプログラム側も変更しないと…って感じね

Ａ子

なるほど
なんとなく分かったよ

しっかし、なかなか実用的なWebアプリに仕上がってきたね
学習用に作ったとは思えないくらい（笑）