一週間の予約が出来るデモコードです。良かったらどうぞ😌。 #php #code

2022.09.17

Logging

おはようございます、今日から台風接近らしいですね。この投稿は昨日書きました。

さて、一週間の予約（時刻表から）が出来るデモコードを書きました。これを書いたキッカケは昔の職場の方がこんな感じのUIを作られていたのを見て、自分も書いてみようと思いDEMOコードを朝起きて調べながら書きました。調べたことは選択を解除する方法だけで、後はオリジナルコードです、設計書も何もなく組み立ていきましたので、欠陥があるかもです。また、Qiitaにも記載しましたが、コメントをほぼ書いていません。書かずともプログラマーなら分かるだろうという感覚です。

予約ー時刻表DEMO

肝心の確認部分は記載していないのにも訳があります。営業妨害になっては駄目だからです。そういう理由で確認部分以降は書いていません。

こちらにもソースコードを掲載しときますね。

<?php
ini_set("display_errors",0);
/**
 * @param array $holiday
 * @return string $str
 */
function fn_header($holiday = [])
{
    $str = "";
    $date = new DateTime();
    for ($i = 0; $i < 7; $i++) {
        !$i ? "" : $date->modify('+1 day');
        $w = $date->format("w");
        $tabindex = $i*7;
        $ho = (function ($days, $holiday = []) {
            return (array_search($days, $holiday) !== false) ? "holiday" : "";
        })($date->format("Y-m-d"), $holiday);
        $str .= "
        <th tabindex=$tabindex>
            <span class='header_no week_no_$w $ho'>" . $date->format("Y-m-d") . "</span>
        </th>";
    }
    return $str;
}
/**
 * @param int $h_min
 * @param int $h_max
 * @param int $m_interval
 * @param array $cnt
 * @param array $reserve
 * @param array $holiday
 * @return string $str
 */
function fn_time($h_min, $h_max, $m_interval,$cnt=[],$holiday = [], $reserve = [])
{
    $str= [];
    for ($h = $h_min; $h <= $h_max; $h++) {
        for ($m = 0; $m < 60; $m = $m + $m_interval) {
            print("<tr>\n");
            $date = new DateTime();
            for ($i = 0; $i < 7; $i++) {
                $cnt[$i]=!$cnt[$i]?(((($h_max - $h_min)+1)*(60/$m_interval))*($i))+7:(++$cnt[$i]);
                !$i ? "" : $date->modify('+1 day');
                $w = $date->format("w");
                $ho = (function ($days, $holiday = []) {
                    return (array_search($days, $holiday) !== false) ? "holiday" : "";
                })($date->format("Y-m-d"), $holiday);
                $time = sprintf("%02d:%02d",$h, $m);
                if ($ho) {
                    print("
                        <td class='' tabindex={$cnt[$i]}>
                            <span class='header_no week_no_$w $ho'>" . $time . "</span>
                        </td>");
                } else {
                    $r = (function ($days, $reserve = []) {
                        return (array_search($days, $reserve) !== false) ? "reserve" : "";
                    })($date->format("Y-m-d") . "_" . $time, $reserve);
                    if (!$r) {
                        print("
                            <td class='date_" . $date->format("Y-m-d") . "_{$time}' tabindex={$cnt[$i]} data-date='" . $date->format("Y-m-d") . "_{$time}'>
                                <a class='time_{$m}_" . $date->format("Y-m-d") . "_{$time}' data-sortno={$cnt[$i]}  href='#?data=" . $date->format("Y-m-d") . "_{$time}'><span class='header_no week_no_{$w} {$h}'>{$time}</span></a>
                            </td>");
                    } else {
                        print("
                            <td class='' tabindex={$cnt[$i]}>
                                <span class='header_no week_no_$w $r'>" . $time . "</span>
                            </td>");
                    }
                }
            }
            $date = null;
            print("</tr>\n");
        }
    }
    return "";
}
?>
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Description" content="Enter your description here" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <title>予約-時刻表(デモ版)</title>
    <style>
        table,tr,td{
            user-select: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <h1 class="display-1">予約-時刻表<br></h1>
                <h5>{予約：時刻をクリックするか、<br>
                    左クリック選択状態で複数選択可能です<br>
                    （日付またぎは禁止しています）}</h5>
                <h5>{ダブルクリックすると予約画面に遷移します。<br>
                    ※DEMO版ですので予約登録画面は御座いません}</h5>
            </div>
        </div>
    </div>
    <div class="container-fluid  text-center">
        <div class="row">
            <div class="col-12">
                <table class="shadow-lg table table-hover table-bordered">
                    <thead>
                        <tr>
                            <?= fn_header() ?>
                        </tr>
                    </thead>
                    <tbody>
                        <?=fn_time(10, 20, 10,[],["2022-09-18","2022-09-23"],["2022-09-19_10:40","2022-09-19_10:50"]) ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
    <script src="./assets/js/main.js?<?=time()?>"></script>
</body>
</html>
let date_obj = document.querySelectorAll("td");
let submit_url = "https://example.com";
let is_date_data = [];
let cnt = 0;

date_obj.forEach(function (elm, key) {
    elm.addEventListener("mouseout", select_in_value);
    elm.addEventListener("click", sp_select_in_value);
    elm.addEventListener("touchend", sp_select_in_value);
    elm.addEventListener("dblclick", select_out_value);
});
function check_value(o, e) {
    if (is_date_data.length === 0) {
        return true;
    }
    let d = o.getAttribute("data-date");
    return d ? ((d) => {
        let f = is_date_data.find(element => {
            let pattern = new RegExp(d.split("_")[0]);
            return !element.match(pattern);
        }) ? false : true;
        if (!f) {
            select_clear(o, e);
            is_date_data = [];
            cnt = 0;
        }
        return f;
    })(d) : false;
}
function select_in_value(e) {
    if (e.buttons === 1 && check_value(this, e)) {
        if (this.getAttribute("data-date")) {
            this.style.backgroundColor = "#555";
            this.children[0].style.color = "#fff";
            if (is_date_data.indexOf(this.getAttribute("data-date")) && is_date_data.indexOf(this.getAttribute("data-date"))) {
                is_date_data[cnt] = this.getAttribute("data-date");
                cnt++;
            }
        }
    }
}
function sp_select_in_value(e) {
    if (check_value(this, e)) {
        if (this.getAttribute("data-date")) {
            this.style.backgroundColor = "#555";
            this.children[0].style.color = "#fff";
            if (is_date_data.indexOf(this.getAttribute("data-date")) && is_date_data.indexOf(this.getAttribute("data-date"))) {
                is_date_data[cnt] = this.getAttribute("data-date");
                cnt++;
            }
        }
    }
}
function select_out_value(e) {
    if (is_date_data.length) {
        let is_data = is_date_data.map(function (elm, index) {
            return "date[" + index + "]=" + elm;
        });
        window.location.href = submit_url + "?" + is_data.join("&");
    }
}
function select_clear(o, e) {
    let is_ClassName = [];
    is_ClassName = is_date_data.map(function (d) {
        return "date_" + d;
    });
    is_ClassName.map(class_name => {
        document.getElementsByClassName(class_name)[0].style.backgroundColor = "#fff";
        document.getElementsByClassName(class_name)[0].children[0].style.color = "#0d6efd";
    })
}

タグ

0, Code, com, demo, https, ligaLgY-uZ, php, qiita, UI, watch, www, youtube, オリジナル, キッカケ, コード, こちら, こと, コメント, これ, ソース, デモ, プログラマー, 一, 予約, 今日, 台風, 営業, 妨害, 後, 感じ, 感覚, 投稿, 接近, 掲載, 方, 方法, 昔, 昨日, 時刻表, 朝, 欠陥, 理由, 確認, 職場, 肝心, 自分, 解除, 記載, 設計書, 訳, 選択, 部分, 駄目,

土佐電時刻表検索サービス復刻版を作りました?

2020.03.06

Logging

土佐電時刻表検索サービス復刻版を作りました。公表もせずにローカルでしか試していなかったものですが、この度、時刻表をクロールしてサイトからデータを抽出して、そのデータを元に土佐電時刻表の検索サービスを作りました。

パチパチ?
このサイト、本日稼働させたばかりですので不具合とかもあります、そういう所はご連絡頂けると有り難いなと思っています。アクセス数が上がれば収益化は考えています。昨日から寝ずに作ったわけです…。是非、検索するかこちらのURLでダイレクトアクセスして頂ければ有り難いなと…。

https://tosaden.net

尚、今日作ったばかりのホヤホヤサイトなので検索にはヒットしないと思います。SEO対策はしていません。高知県の人に密かに使って頂けると嬉しい限りです^^;。

ちなみに昔、ツイートに土佐電の時刻表をつぶやくBOTを作っていましたが鳴かず飛ばずで結局辞めてしまいました。

タグ

BOT, SEO, url, アクセス, クロール, こちら, ご連絡, サービス, サイト, ダイレクト, ツイート, データ, ヒット, ホヤホヤ, もの, ローカル, わけ, 不具合, 人, 今日, 元, 公表, 収益, 土佐, 対策, 度, 復刻, 所, 抽出, 昔, 昨日, 時刻表, 本日, 検索, 稼働, 限り, 電, 高知県,

非公式土佐電つぶやきBOTが完成したが速攻ロックされた件。

2017.07.31

Logging


非公式土佐電つぶやきBOTが完成したが速攻ロックされた件だけど
正直な所、少し予想はしていました。
世の中、よく思わない人々がいることは確かなことです。
今回の非公式土佐電つぶやきBOTの制作経緯ですけど・・・
作ろうと構想をねってから５年ほど月日が流れていたモノなんですね。
何故、ここまで時間がかかったかというと土佐電交通の時刻表が簡単に
プログラムで抽出することが不可能なんです。
なので・・・。
当初は人力でデータを入れ込もうと考えていました。
これが一番、長引く原因になったわけです、データを登録しようと
何度も頑張ってみたのですが、情報量が多いので途中で挫折すること何度か。
結局これでは埒が明かないので、
他の方法を考えた結果、WEBストライピングするという事です。
要はサイトのデータ抽出することで解決したのですが、
公式ページはあんな感じなので、よくある電車検索サイトから
データ抽出してきました。
路面電車の時刻表を検索できるサイトを
探すのに手間がかかりましたが、抽出事態は、一日ぐらいで
コーディングする事で何とかなりました。
ちなみにある大手の検索できるサイトからデータを抽出しています。
今回、作って思ったことは
公式ページがPDFじゃなく電車の時刻表が検索でき時刻表が表示されるサイトを作ったら
良いのにと思いました。バスアプリは作っているのに・・・。
https://twitter.com/tosaden_net

｛非公式｝土佐電時刻表検索を始めました。
https://tosaden.net/

タグ

5, BOT, web, ここ, こと, これ, サイト, ストライピング, データ, プログラム, ページ, もの, ロック, わけ, 不可能, 世, 中, 予想, 事, 交通, 人々, 人力, 今回, 他, 件, 何度, 何度か, 何故, 公式, 制作, 原因, 土佐, 埒, 完成, 少し, 当初, 情報, 感じ, 所, 抽出, 挫折, 方法, 時刻表, 時間, 月日, 検索, 構想, 正直, 登録, 簡単, 経緯, 結果, 要, 解決, 途中, 速攻, 電, 電車,