htmlとcssとjavascript-初学フロント側-No.1#code

2022.11.07

Logging

おはようございます。今年もあと2ヶ月もないわけですよね早いものですね😮

htmlとcssとjavascript-初学フロント側-No.1という動画をYOUTUBEにUPしたのが昨日の9時のこと。これで理解出来るか、どうか分からない。解説もない教えもない、唯コードを書いているところを見せてるだけです。ソースコードは下記のサイトから参照できますが、次の動画作成のためにデザインや処理が変わっていたり、動作しなくなってたりするので注意が必要です。

https://358tool.com/sample-site/

自分はHtmlやcssはあまり覚えていないのですが、分かるのはそれなりに基本ベースがあるからだと思ってます。今からHtmlやcssを学ぶ人は全部を覚えようとはせずに、手を動かしてコードを書くことから始めて下さい。そのうち基本ベースは身につくことになると思います。

因みに自分が書いているclassの名前付けなどの書き方は駄目な書き方ですので、そういう所、お仕事として書く場合は会社によってキマりなんかが有りますので、そういう事まで知りたい人はこちらの動画を参照ください。

https://www.youtube.com/watch?v=pDhmhB1qI-0

タグ

, 2, 358, , cl, Code, com, css, html, https, javascript, no, sample-site, tool, UP, youtube, うち, コード, こと, これ, サイト, ソース, それなり, ため, デザイン, ところ, フロント, ベース, もの, 下記, , , 今年, 作成, 全部, 処理, 初学, 動作, 動画, 参照, 基本, 必要, , 昨日, , 注意, 理解, 自分, 解説, ,

Photo by Aleksandr Slobodianyk on Pexels.com

phpでソケット受信をする事だけ覚えとけば良い。#php #code

2022.10.27

Logging

おはようございます。Socket.ioというサービスをご存知ですか。あれ良いですよね。

さて、Socketとはいう意味は割愛させて頂き、知っていることを前提に話しますとPHPでSocketサーバーは立てれないじゃないかなって今のところ思っています。localhostや0.0.0.0とかならSocketサーバーは立てれるけど、ドメイン有りきでは難しいような気がします。

なので、Socket.ioなんかを使用してnode.jsなんかでサーバーを立てるのが定石かと思います。尚、webSocketのサーバーに対してPHPで送受信は可能です。要するにクライアント側はPHPでも可能ですね。

自分もAPIサーバーに対して常時通信処理を行っています。

PHPライブラリの使用して接続を確立しています、ライブラリはratchetという有名所のライブラリを使用しています。

composer require ratchet/pawl
<?php

require __DIR__ . '/vendor/autoload.php';

\Ratchet\Client\connect('wss://example.com')->then(function($conn) {
    $conn->on('message', function($msg) use ($conn) {
        echo "Received: {$msg}\n";
        $conn->close();
    });

    $conn->send('Hello World!');
}, function ($e) {
    echo "Could not connect: {$e->getMessage()}\n";
});

上記のようなPHPのソースコードで送受信が可能です😋

タグ

0.0.0.0, API, Code, Composer, io, JS, localhost, node, php, ra, ratchet, require, Socket, webSocket, あれ, クライアント, こと, ご存知, サーバー, サービス, ソケット, ところ, ドメイン, なん, ライブラリ, , , 使用, 処理, 前提, 割愛, 受信, 可能, 名所, 定石, 常時, 意味, 接続, , , 確立, 自分, 送受信, 通信,

WP予約投稿ツイートプラグイン作り方。#php言語 #code #v2

2022.10.11

Logging

おはようございます😤 お仕事に飢えてます…寒い季節ですね…。

さて、今日はWP予約投稿ツイートプラグイン作り方を記載していきます。ワードプレスでプラグインを作る場合はWordPressの下記の場所に任意のフォルダを作り、その中にディレクトリ名(任意名)と同じファイル名でphpファイルを作ります。※昔の名残なので今は命名が違っても動くかも知れませんが・・・。

cd /wp-content/plugins
mkdir mytweets
vi mytweets.php

そして、命名したファイル名を開き、ファイルの上部に下記のコメントを記載します。プラグイン名やプラグインの説明、プラグインバージョンをそれぞれ変更して頂き保存、その後サーバーサイドにアップロードします(フォルダごと)。

<?php
/*
Plugin Name: My tweets
Description: tweets
Version: 1.0
*/

これで何も動作しないプラグインが出来上がります。

後はコマンドラインからプラグインフォルダにcomposerをインストールしtwitteroauthのライブラリを入れます。

此処までが前手順です。此処までで挫折した人は結構いると思います🙄。

因みに此処までの事がすんなりと出来る人は、このブログの情報は必要ないものです。なのでココからはソースコードを記載します。WP予約投稿ツイートプラグインなんてオチャノコサイサイだと思います。

<?php
/*
Plugin Name: My tweets
Description: tweets
Version: 1.0
*/
if (!defined('ABSPATH')) exit;
require_once  "tw-v2-config.php";
require_once  "./vendor/autoload.php";

use Abraham\TwitterOAuth\TwitterOAuth;

function mytweets($new_status, $old_status, $post)
{
    
    if ($new_status == 'publish' && $old_status != 'publish') {
        try {
            $connection = new TwitterOAuth(APIKEY, APIKEYSECRET, ACCESSTOKEN, ACCESSTOKENSECRET);
            $connection->setApiVersion('2');
            $response = $connection->post('tweets', ['text' => get_the_title($post->ID) . "\n" . get_permalink($post->ID)], true);
        } catch (\Throwable $th) {
            //throw $th;
        }
    }
}
add_action('transition_post_status', 'mytweets', 10, 3);

上記のコードを記載した上で上書き保存&アップロードします。その後ワードプレスの管理画面よりプラグインを有効にして出来上がり、今回はtwitteroauthのライブラリを使用しましたがcrulなどのを理解している人はライブラリは特に必要ないのかなとも思います。ライブラリを使用すればお手軽ですが、万が一何かあった時に困るのでライブラリを使用せずにコードを書くという方もいらっしゃると思います。

自分も極力、公式のライブラリしか使わないようにしています🙇。

トイウコデ、ワードプレスのプラグインの作り方でした。

タグ

2, cd, Code, description, lt, mkdir, My, mytweets, name, php, plugin, plugins, Tweets, Vers, vI, WordPress, wp, wp-content, アップロード, お仕事, コメント, サーバー, それぞれ, ツイート, ディレクトリ, バージョン, ファイル, フォルダ, プラグイン, プレス, ワード, 上部, 下記, , 予約, , 今日, 任意, 作り方, 保存, 名残, 命名, 場合, 場所, 変更, 季節, , 投稿, , 言語, 記載, 説明,

数珠繋ぎのツイートシステムに予約機能を付けました😂 #php #code

2022.10.07

Logging

おはようございます、偏頭痛持ちは雨が降るが一番大変です☔。

先日、数珠繋ぎのツイートシステムを作ったのですが、そのシステムに予約機能を付けました。尚、TwitterAPIのバージョン2でスケジュールのパラメーターが今のところ無いですね。これから先、機能が付くかも知れないですが今のところ無いようです。因みにソースコードは近日中にQiitaGithubにUPします。此処ではソースコードの一部を掲載します(※記事を更新しました下へスクロール🫠)。

Twitter API v2 ツイート数珠繋ぎ

尚、crontabでPHPファイルを叩くようにしています、あと注意事項ですが予約を一度した投稿については変更等は出来ません、編集機能等の機能追加の予定はないです。また、予約管理はsqlite3を使用して管理しています。

<?php
date_default_timezone_set('Asia/Tokyo');
ini_set("display_errors",0);
require_once "./data/tw-config-v2.php";
require_once "../vendor/autoload.php";

use Abraham\TwitterOAuth\TwitterOAuth;

class tw
{
    var $connection = null;
    var $pdo = null;
    function __construct()
    {
        $this->connection = new TwitterOAuth(APIKEY, APISECRET, ACCESSTOKEN, ACCESSTOKENSECRET);
        $this->connection->setApiVersion("2");
    }
    function db_connection()
    {
        try {
            //code...
            $res = $this->pdo = new PDO("sqlite:./data/tw-tweets-db.sqlite3");
        } catch (\Throwable $th) {
            //throw $th;
            //print $th->getMessage();
            $res = false;
        }
        return $res;
    }

    function timecheck($timeonoff, $times)
    {
        if (!$timeonoff) return true;
        $n = new DateTime();
        $t = new DateTime($times);
        return $t <= $n ? true : false;
    }

    function pickup_tweets(mixed $tw_text = null, int $timeonoff = 0, mixed $times = null, string $id = "")
    {
        if (!$times) return false;
        $obj = (object)[];
        $times = preg_replace("/\-/", "/", $times);
        $times = preg_replace("/T/", " ", $times);

        if ($this->timecheck($timeonoff, $times)) {
            if (isset($tw_text) && is_array($tw_text)) {
                foreach ($tw_text as $key => $value) {
                    if (preg_replace("/[ | ]/", "", $value)) {
                        $obj = !$key ? ($this->connection->post("tweets", ["text" => $value], true)
                        ) : ($this->connection->post("tweets", ["reply" => ["in_reply_to_tweet_id" => $obj->data->id], "text" => $value], true)
                        );
                    }
                }
                return true;
            }
        } else {
            return $timeonoff ? $this->save_sqlite($tw_text, $timeonoff, $times, $id): true;
        }
    }

    function save_sqlite($tw_text = null, int $timeonoff = 0, mixed $times = null, string $id = "")
    {
        if ($this->db_connection()) {
            try {
                //code...
                if (isset($tw_text) && is_array($tw_text)) {
                    foreach ($tw_text as $key => &$value) {
                        if (preg_replace("/[ | ]/", "", $value)) {
                            $stmt = $this->pdo->prepare("insert into tweets (tw_id,user,times,tw_text)values(:tw_id,:user,:times,:tw_text)");
                            $stmt->bindValue(":tw_id", $key, PDO::PARAM_INT);
                            $stmt->bindValue(":user", $id, PDO::PARAM_STR);
                            $stmt->bindValue(":times", $times, PDO::PARAM_STR);
                            $stmt->bindValue(":tw_text", $value, PDO::PARAM_STR);
                            $stmt->execute();
                        }
                    }
                }
                $this->pdo = null;
                return true;
            } catch (\Throwable $th) {
                //throw $th;
                return false;
            }
        }
    }
    function tweets_load(string $id = "")
    {
        if (!$id) return false;
        try {
            //code...
            $value = null;
            if ($this->db_connection()) {
                $stmt = $this->pdo->prepare("select * from tweets where user = :user order by times,tw_id asc;");
                $stmt->bindValue(":user", $id, PDO::PARAM_STR);
                $res = $stmt->execute();
                $value = $res ? $stmt->fetchAll() : false;
                $this->pdo = null;
            }
            return $value;            
        } catch (\Throwable $th) {
            //throw $th;
            return false;
        }
    }
    function tweets_update(int $key = 0, int $timeonoff = 0, mixed $times = null, string $id = "",mixed $tw_text="")
    {
        try {
            //code...
            if(!preg_replace("/[ | ]{0,}/","",$tw_text))return false;
            if ($this->db_connection()) {
                $stmt = $this->pdo->prepare("update tweets set tw_text = :tw_text where tw_id = :tw_id and user = :user and times = :times");
                $stmt->bindValue(":tw_id", $key, PDO::PARAM_INT);
                $stmt->bindValue(":user", $id, PDO::PARAM_STR);
                $stmt->bindValue(":times", $times, PDO::PARAM_STR);
                $stmt->bindValue(":tw_text", $tw_text, PDO::PARAM_STR);
                $stmt->execute();
                $this->pdo = null;
            }
        } catch (\Throwable $th) {
            //throw $th;
            return false;
        }
        return true;

    }

    function tweets_delete(int $key = 0, int $timeonoff = 0, mixed $times = null, string $id = "")
    {
        try {
            //code...
            if ($this->db_connection()) {
                $stmt = $this->pdo->prepare("delete from tweets where tw_id = :tw_id and user = :user and times = :times");
                $stmt->bindValue(":tw_id", $key, PDO::PARAM_INT);
                $stmt->bindValue(":user", $id, PDO::PARAM_STR);
                $stmt->bindValue(":times", $times, PDO::PARAM_STR);
                $stmt->execute();
                $this->pdo = null;
            }
        } catch (\Throwable $th) {
            //throw $th;
            return false;
        }
        return true;
    }

    function bat_tweets(mixed $value = null)
    {
        if (!$value) return false;
        $obj = (object)[];
        $t = "";
        foreach ($value as $key => $val) {
            if ($this->timecheck(1, $val["times"])) {
                $obj = ($val["times"]<>$t)? ($this->connection->post("tweets", ["text" => $val["tw_text"]], true)
                ) : ($this->connection->post("tweets", ["reply" => ["in_reply_to_tweet_id" => $obj->data->id], "text" => $val["tw_text"]], true)
                );
                $this->tweets_delete($val["tw_id"], 1, $val["times"], $val["user"]);
                $t = $val["times"];
            } else {
              //  var_dump($val);
              //  break;
            }
        }
    }
}

if ($argv[0]) {
    $tw = new tw();
    $value = $tw->tweets_load(xss_d($argv[1]));
    $tw->bat_tweets($value);
}
function xss_d($val = false)
{
    if (is_array($val)) {
        foreach ($val as $key => $value) {
            $val[$key]  = strip_tags($value);
            $val[$key]  = htmlspecialchars($val[$key]);
        }
    } else {
        $val  = strip_tags($val);
        $val  = htmlspecialchars($val);
    }
    return $val;
}

追記:予約編集機能なども付けました🙄。

GithubとQittaのリンクはこちらです。
Github:https://github.com/taoka-toshiaki/tweets-system-box1
Qitta:https://qiita.com/taoka-toshiaki/items/5ef12b60b267742bf584

タグ

2, , 39, Asia, Code, crontab, date, default, github, ini, lt, php, qiita, Se, set, Sqlite, timezone, Tokyo, TwitterAPI, UP, コード, これ, システム, スクロール, スケジュール, ソース, ツイート, ところ, バージョン, パラメーター, ファイル, 一部, , 予定, 予約, 事項, , 使用, 偏頭痛, , 先日, 変更等, 大変, 投稿, 掲載, 数珠繋ぎ, 更新, 機能, 機能等, 此処, 注意, 管理, 編集, 記事, 近日, 追加, ,

Photo by Ender Vatan on Pexels.com

文字数カウントは奥が深いよ。日本語より𓅇エジプト😇 #javascript #code #プログラミング #unicode

2022.10.05

Logging

おはようございます、先日(日曜日のこと)は久しぶりに本屋さん巡りしていました😋。本屋📖は良いですね落ち着きます。

さて、文字コードのカウントは奥が深いなって話を記載していきます。人目線からすれば文字をカウントするという至って簡単な話にですが、PC(コンピューター)にとっては奥が深いです・・・日本語漢字も面倒だけどエジプト系の象形文字系(unicode)は本当に面倒そうです。まだ、作りかけですがツイッターの用な文字コードのカウントするjavascriptコードを書きましたのでサンプルコードとしてご使用ください

※WindowsOSの環境下でChromeブラウザ動作させ検証しました。コピペ文字には対応していません😇。UTF-8 ではない違う文字コードを貼り付けてみてください、変なことになると思います😂。例えばEUC文字コードだとか・・・。

動作サイトはこちらです。

        function moji(o) {
            let m = o.nextElementSibling;
            //ads
            let h = ((o) => {
                let l = o.value.match(/(https?:\/\/[a-z|A-Z|0-9|\-|_|%|\.|\/]{0,})/giu);
                let ml = l ? ((l) => {
                    return sum = l.reduce((s, e) => {
                        return s + e.length;
                    }, 0);
                })(l) : 0;
                return l ? {
                    len: (l.length * 23),
                    mlen: ml
                } : {
                    len: 0,
                    mlen: ml
                };
            })(o);
            //zenkaku            
            let k = ((o) => {
                let l = o.value.match(/[^\x20-\x7e]/giu);
                let ml = l ? ((l) => {
                    return sum = l.reduce((s, e) => {
                        return s + e.length;
                    }, 0);
                })(l) : 0;
                return l ? {
                    len: (l.length * 2),
                    mlen: l.length
                } : {
                    len: 0,
                    mlen: ml
                };
            })(o);
            m.innerHTML = "【 " + (o.value.length + h.len - h.mlen + k.len - k.mlen) + "文字{半角/280} 】";
            if ((o.value.length + h.len - h.mlen + k.len - k.mlen) >= 280) {
                m.innerHTML = "<span class='text-danger'>【 " + (o.value.length + h.len - h.mlen + k.len - k.mlen) + "文字{半角/280} 】</span>";
            }
        }
                    <label for="my-textarea" class="h3">文字を入力してください。</label>
                    <textarea id="my-textarea" class="form-control" oninput="moji(this);" name="" rows="3"></textarea>
                    <span class="h3"></span>

尚、サンプルコードは1バイトを一文字としてカウントしていきます、そしてURL文字はどんなに長くても23文字にカウントされます、これはTwitter社の仕様と合わしています。URL文字はURL短縮が行われ23文字の短縮URLが生成されるからその様にカウントしているのですが、なんか本物と違うですよね挙動が・・・🙇‍♂。因みに絵文字がどのようにカウントされるかは確認していません。

UTF8では絵文字(unicode)を3バイトで表記させているそうです。昔、UTF-8は2バイトで表現しているとか習っていたのですが、それはカナリ古い知識だったみたいです😇。

タグ

8, Chrome, Code, EUC, javascript, PC, Unicode, UTF-, WindowsOS, エジプト, カウント, コード, こと, コピペ, コンピューター, サンプル, ツイッター, ブラウザ, プログラミング, 久しぶり, 人目, 使用, 先日, 動作, , , 対応, , 文字, 日曜日, 日本語, 本屋, 本当, 検証, 漢字, 環境, , 簡単, 記載, , 象形, 面倒,

Photo by NEOSiAM 2021 on Pexels.com

Sqliteで作った簡易掲示板のコードを配布致します。#php #code

2022.09.20

Logging

おはようございます。台風は過ぎ去りましたがせっかくの三連休が残念です💦。

今日は先日、Sqliteを使用して簡易掲示板を作ってみましたのでコードを配布致します、尚、PHP8の環境下で動作させています(PHP7系でも動作すると思います)。

Sqliteってnow()関数がなかったりだとか、Deleteする時に、noカラムを昇順しlimitを使用して削除出来ないだとか、いろいろとMysqlとは違う所があり、面倒だなと思いながらコードを書きました、尚、SqliteはWebサーバーの階層に置かないように、置いても良いですが・・・。そのままの状態だと誰でもダウンロードが可能になってしまいますのでご注意ください。自分は地下に眠らしています😅。

一応、二重投稿防止の為に20秒経過しないと再投稿出来ないようにしています😌。トライしていない事は禁止ワード等がありません🤔。つけようと思ったのですがまぁ良いかなと、、、。

動作している環境のリンクはこちら。

https://reborn9.sakura.ne.jp/

軸となるPHPのソースコードを2つ貼っときますね。

<?php
session_start();
$toke_byte = openssl_random_pseudo_bytes(16);
$csrf_token = bin2hex($toke_byte);
$_SESSION['csrf_token'] = $csrf_token;
?>
<!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">
    <link rel="stylesheet" href="assets/css/style.css?<?= time() ?>">
    <title>掲示板</title>
</head>

<body class="p-3 text-white">
    <div class="p-4 shadow rounded" style="background-color:#d6dbdf;">
        <div class="container mt-5">
            <div class="row">
            <div class="col-12 text-center">
                <h1 class="shadow" style="color:#195a57;">掲示板::version 2.5</h1>
            </div>
                <div class="col-12">
                    <div class="input-group shadow rounded">
                        <div class="input-group-append">
                            <span class="input-group-text bg-dark text-white" id="my-addon">ニックネーム</span>
                        </div>
                        <input class="form-control" type="text" name="name" placeholder="ニックネームを入力" aria-describedby="my-addon">
                    </div>
                    <div class="form-group shadow rounded">
                        <label for="my-textarea">コメント</label>
                        <textarea id="my-textarea" class="form-control" name="comment" rows="7"></textarea>
                    </div>
                    <button id="btn" class="mt-2 btn btn-info text-white shadow rounded" type="button">投稿する</button>
                </div>
            </div>
        </div>
        <div class="container mt-5">
            <div class="row">
                <div id="view" class="col-12"></div>
            </div>
        </div>
    </div>
    <footer>
        <a href="/">TOP</a> :: © Reborn9.sakura.ne.jp <?=date("Y")?>
    </footer>
    <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
    <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>
<?php
class db
{
    var $pdo = null;
    function __construct()
    {
        try {
            $this->pdo = new PDO("sqlite:../../bbs.sqlite3");
            $this->pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);        //code...
        } catch (\Throwable $th) {
            //throw $th;
            print $th->getMessage();
        }
    }
    function select_limit()
    {
        if($this->pdo){
            $stmt = $this->pdo->prepare('select * from bbs order by no desc limit 0,5');
            $stmt->execute();
            $result = $stmt->fetchAll();
            $stmt = null;
            $this->pdo = null;
            return new view($result);
        }
    }
    function insert($name,$comment,$sns_cnt=0)
    {

        try {
            $stmt = $this->pdo->prepare('INSERT INTO bbs (`time`,`name`,`comment`,sns_cnt)values(strftime(\'%Y年%m月%d日 %H時%M分%S秒\',CURRENT_TIMESTAMP, \'localtime\'),:name,:comment,:sns_cnt)');
            $stmt->bindParam(':name', $name, PDO::PARAM_STR);
            $stmt->bindParam(':comment', $comment, PDO::PARAM_STR);
            $stmt->bindParam(':sns_cnt', $sns_cnt, PDO::PARAM_INT);
            $stmt->execute();
            $stmt = $this->pdo->prepare('DELETE FROM bbs WHERE bbs.no = (SELECT no from bbs ORDER BY no ASC LIMIT 1);');
            $stmt->execute();
            $stmt = null;
            $this->pdo = null;
            return true;
        } catch (\Throwable $th) {
            print $th->getMessage();
            return false;
        }
    }
}

class view{
    var $item = null;
    function __construct($item)
    {
        $this->item = $item;        
    }
    function view_item($item="")
    {
        try {
            $item = $item?$item:$this->item;
            ob_start();
            ?>
            
            <?php
            foreach($item as $key=>$value){
                ?>
                <div class="mt-2 row txtbox shadow rounded">
                <div class="col-3 name_<?=$value["no"]?> rounded-start fs-6">
                    ニックネーム::<?=$value["name"]?>さん
                </div>
                <div class="col-9 time_<?=$value["no"]?> fs-6">
                    投稿日時::<?=$value["time"]?>
                </div>
                <div class="col-12 comment_<?=$value["no"]?>">
                    <?= nl2br($value["comment"])?>
                </div>
                <div class="col-12 sns_cnt_<?=$value["no"]?>">
                    <!-- <?=$value["sns_cnt"]?> -->
                </div>
                </div>
                <?php
            }        
            ?>
                
            <?php
            $ret["view"]= ob_get_clean();
            $ret["msg"]= "done";
    
        } catch (\Throwable $th) {
            //throw $th;
            $ret["msg"] = "error";
        }
        return $ret;
    }
}

session_start();
$ret = null;
$mode =  xss_defence($_POST["mode"]);
// $time =  ;
$name =  xss_defence($_POST["name"]);
$comment =  xss_defence($_POST["comment"]);
$sns_cnt =  (int)xss_defence($_POST["sns_cnt"]);
if (isset($_POST["csrf_token"]) 
 && $_POST["csrf_token"] === $_SESSION['csrf_token'] && (function($t){
    return time() - $t > 20?true:false;
 })($_SESSION["save"])) {
    if($mode==="save"){
        $name = !preg_replace("/[ | ]/","",$name)?"匿名":$name;
        $comment = !preg_replace("/[ | ]/","",$comment)?"":$comment;
        if($comment){
            $db = new db();
            $db->insert($name,$comment);
            $_SESSION["save"] = time();
        }
    }
    $db = null;
    $db = new db();
    $ret = $db->select_limit()->view_item();
    print  json_encode($ret);
}
function xss_defence($value){
    if(is_array($value)){
        foreach($value as $key=>$val){
            $value["$key"] = strip_tags($val);
            $value["$key"] = htmlspecialchars($value["$key"],ENT_QUOTES);
        }

    }else{
        $value = strip_tags($value);
        $value = htmlspecialchars($value);
    }
    return $value;
}

配布コードはこちらです。

タグ

20, 7, 8, Code, Delete, LIMIT, MYSQL, no, Now, php, Sqlite, web, いろいろ, カラム, コード, ご注意, サーバー, せっかく, そのまま, ダウンロード, トライ, ワード, 三連, , , 今日, , 使用, 先日, 削除, 動作, 可能, 台風, 地下, , 投稿, 掲示, 昇順, , 残念, , 状態, 環境, 禁止, 簡易, 経過, 自分, , , 配布, 関数, 防止, 階層, 面倒,

一週間の予約が出来るデモコードです。良かったらどうぞ😌。 #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, オリジナル, キッカケ, コード, こちら, こと, コメント, これ, ソース, デモ, プログラマー, , 予約, 今日, 台風, 営業, 妨害, , 感じ, 感覚, 投稿, 接近, 掲載, , 方法, , 昨日, 時刻表, , 欠陥, 理由, 確認, 職場, 肝心, 自分, 解除, 記載, 設計書, , 選択, 部分, 駄目,

お店のホームページ(サイト)の作り方その壱

2022.03.01

Logging

オハヨウゴザイマス。
片言の日本語しか使えない日本人です😌、高知県はあいにくの雨になるそうですね。

昨日のうちにお店のホームページ(サイト)の雛形作りをしておりました。デザインの参考にしたサイトはこちらになります。こちらのサイトデザインを元に自分が少しデザインを改良した感じです。

https://zip358.com/tool/sample.com/

こちらの画像や文言を変更することにより貴方が作成したいホームページが簡単にできてしまいます。解説はテキストで記載していきます。前手順としてVisualStudio codeとfilezillaソフトをWindowsやMacにインストールしてください。インストールの仕方はYOUTUBEで検索するといろいろな人が解説していますので、そちらを参考にしてください。

お店のホームページ(サイト)の作り方その壱-2

今回はお店のホームページ(サイト)の雛形をダウンロードして頂いてindex.phpというファイルをVisualStudio codeで開いてみてください。そうすると英字で記載している所が何箇所かあると思いますが英字は英字のままで何も変更しないでください、変更するのは日本語で記述されたところを貴方の店舗に合わして説明文を変更してみて保存してください。

お店のホームページ(サイト)の作り方その壱-1

画像を変えたい場合はimagesの中にある画像をそれぞれサンプルサイトを照らし合わせながら、貴方の店舗の画像に上書きしてください(画像名は変えないでください)。

次回は予約サイトの設定とGoogleMapの設定になります。

雛形はこちらからダウンロード:https://zip358.com/tool/sample.com.zip

タグ

Code, filezilla, index, Mac, php, VisualStudio, Windows, youtube, あいにく, いろいろ, インストール, うち, オハ, お店, こちら, こと, サイト, そちら, ソフト, ダウンロード, テキスト, デザイン, ファイル, ホームページ, よう, , 今回, 仕方, 作り方, 作成, , 参考, , 変更, 少し, 感じ, 手順, 改良, 文言, 日本人, 日本語, 昨日, 検索, 片言, 画像, 簡単, 自分, 英字, 解説, 記載, 貴方, 雛形, , 高知県,

コードを見れば大体の技術レベルが分かるは本当?しかも、性格も分かる場合がある。

2022.02.07

Logging

おはようございます。今日の朝も寒いですね。。。

朝からcode.orgの動画を見ていたら日本もアメリカもITエンジニアの割合はあまり変わりないみたいな事を知りました、そしてアメリカでも子供たちのなりたい職業1位でもないみたいです。

さて、コードを見れば大体の技術レベルが分かるは本当?しかも性格も分かる場合があるですが、ソースコードを見ると其の人の技術がわかり、変数の名前付けとかで性格もある程度分かってしまったりします。そしてバージョン管理、ファイル管理で仕事に対する姿勢までもが分かってしまったりします。

Computer Science is Changing Everything

なので・・・日頃からご注意ください。自分の場合、Githubのコメントなどを見るとこの人は適当な人なんだなぁって事が分かってしまうかもしれません。唯、仕事に対する姿勢は少し違うかなっていうのはあります。

仕事になるとファイル管理やバージョン管理もこの頃はちゃんとするようになりました。やはり整理整頓は結構大事な要素です。ファイルがどこにいったんだろうとか検索しないでも良いように管理することは大切なことです。昔はごちゃごちゃなファイル管理をしていましたけど(反省)😣。

因みに私生活で使用するパソコンのフォルダ整理は全然ダメダメですね。整理しようと思っているのだけどフォルダやファイル数が多くて大変な感じです(負の遺産が多いです)。

タグ

, Code, github, IT, org, アメリカ, エンジニア, コード, コメント, ご注意, ソース, バージョン, ファイル, レベル, , , 今日, 仕事, 割合, 動画, 名前, 場合, 変数, 大体, 姿勢, 子供, 少し, 性格, 技術, 日本, 日頃, , 本当, 管理, 職業, 自分, 適当, ,

windows Terminal1.0を使ってみた。

2020.05.24

Logging

windows Terminal1.0を使ってみた、感想はカスタマイズして何だか良い感じですね。これからVS codeみたいにバージョンアップすればいろいろと便利になるみたいなので、良い感じです。今後に期待感もあります。

The new Windows Terminal

因みにカスタマイズの方法は公式ページに日本語で書かれているのでなんて親切なんだと思ってしまいました。
こちらがそのページになります。json形式の記述でカスタマイズすることでカラーの変更や透過することなど自分好みにwindows Terminalをカスタマイズすることが可能です。

https://docs.microsoft.com/ja-jp/windows/terminal/customize-settings/profile-settings

尚、windows Terminalのダウンロードはこちらからになります。
https://www.microsoft.com/ja-jp/p/windows-terminal-preview/9n0dx20hk701?activetab=pivot:overviewtab

タグ

1.0, Code, com, customize-settings, docs, https, ja-j, ja-jp, json, microsoft, profile-settings, Terminal, VS, Windows, www, アップ, いろいろ, カスタマイズ, カラー, こちら, こと, これ, ダウンロード, バージョン, ページ, 今後, 便利, 公式, 可能, 変更, 形式, 感じ, 感想, 方法, 日本語, 期待感, 自分, 親切, 記述, 透過,

Visual Studio Codeの話とビデオ通話API。

2020.05.19

Logging

Visual Studio Code(ビジュアルスタジオコード)の話とビデオ通話APIをわかりやすく解説している動画を見つけたので紹介します。下記の動画を見ていただければビデオ通話APIの導入とVisual Studio Codeの使い方の基本が一通りわかるかなと、2017年の動画なので3年前(現在:2020年)の話になる。

これさえあれば大丈夫!Visual Studio Code 徹底解説! -HTML5 Conference 2017-

今では、Visual Studio codeにはいろいろな機能追加がされているが基本的な機能はほぼ同じ、機能追加されてこれ以上に使いやすさが増している部分もあるけど、上記の動画解説の内容を知っていない人は見るべしかなと思います。あと、ビデオ通話APIの話が割愛されているが、NTTが提供しているSkywayというAPIサービスがある、これを使用することにより簡単にビデオ通話が導入ができるみたいです。動画ではnode.jstypescriptで動かしている部分も垣間見える。あとAzureにデプロイする事も紹介しているので初心者向きの講義ではないかなと思いますが、見習いIT戦士が見るには良い講義かなと思えたのでご紹介しました。

見る限り、APIを使用すれば簡単にビデオ会議システムなどが導入できるなと言う印象を持ったものの、有料版はお高いなという感じがします。あのお値段を支払うのは結構きついなと思います。このAPI機能で無料のサービスなどを立ち上げる場合などはビデオ通話の時間に制限を設けないといけない気がします。

タグ

2017, 2020, , API, Az, Code, JS, node, NTT, Skyway, Studio, TypeScript, Visual, いろいろ, コード, こと, これ, サービス, スタジオ, ビジュアル, ビデオ, 上記, 下記, , , 使い方, 使用, 内容, 割愛, 動画, 垣間, 基本, 導入, 提供, 機能, 現在, 簡単, 紹介, 解説, , 追加, 通話, 部分,

自分の務めてる会社の1次入社試験(過去問)

2019.10.12

Logging

自分の務めてる会社の入社試験(過去問)です。
これぐらいのことは出来てもらわないと困るという事で出題したのですが
どうもこの問題難しいのか?
ここまで漕ぎ着けて採用された人はひとりしかいない。
大手の会社にはこんなの簡単だよという人は
たくさんいると思いますが、自分の務めてる会社は
どちらかと言えば零細企業です。
こういう問題出しても中々、解けない人が多くて
採用まで至らないのが現状です。
※今は募集していません。
■問題
郵便番号入力すると検索結果を表示するようにせよ。
また下記の条件を満たしていることとする。
1.サジェスト機能がある。
2.PHP言語を使用。
3.非同期処理。
単なるこれだけでも、中々出来る人が来ない。
これが零細企業地方の現状です。
https://zip358.com/tool/postal_code_search/

タグ

, 2, , 358, Code, com, php, postal, search, tool, zip, ここ, こと, これ, これぐらい, これだけ, サジェスト, たくさん, どちらか, ひとり, また下, 中々, , , , 企業, 会社, 使用, 入力, 入社, 処理, 出題, 募集, 同期, 問題, 地方, 大手, 採用, 条件, 検索, 機能, 現状, 番号, 簡単, 結果, 自分, 表示, 言語, , 試験, 過去問, 郵便, 零細,

MYSQL8以降ウィンドウ関数対応=>ランキング。

2019.05.06

Logging

MYSQLでもランキング機能(rank())が使えるようになったとさ。日本国内のレンタルサーバーは最新の技術というより
一歩遅れた技術で運営している理由はリスクを取らないためにそうしているのだろうなとヒシヒシと感じます。

### support mysql>8.0.2 ウィンドウ関数
```sql
select id,namae, rank() over(order by code_total asc)as code_rank from code_data;
```
### code_data
|id|namae|code_total|
|---|---|---|
|1|kaonashi|15|
|2|mononoke|75|
|3|asitaka|52|
|4|san|87|
|5|theta|99|

タグ

```, ---, , 15, 2, , 4, 5, 52, 75, 8, 8.0.2, 87, 99, as, asc, asitaka, BY, Code, data, from, gt, ID, kaonashi, mononoke, MYSQL, namae, order, over, rank, san, select, SQL, support, theta, total, ウィンドウ, サーバー, ため, ランキング, リスク, レンタル, , 国内, 対応, 技術, 日本, 最新, 機能, 理由, 運営, 関数,

javascriptを勉強中

2018.12.15

Logging

var a = 3;
var b = 10;
var obj = {
        hoge:function(a){
            a = a + a;
            return a;
        },
        a:a = a && 5,
        b:b = b || 3
    };
console.log(obj.hoge(2));
console.log(obj.a);
console.log(obj.b);

上記のCodeを動かすと仕事と表示されます(笑)、4,5,10と表示されます。
何故そうなったかを考えるとキリがないのでそういうものだと
思ったほうが良いかもしれないです。
説明するとhogeはオブジェクトです。あとは変数とIF文の省略系を
記述しているだけです、実際は=もいらないですが・・・。
わかりやすく自分なりに記載したつもりです。
javascriptライブラリってこういうのが何百行も記載して成り立っていますが
概念はこういう事です。自分は基本的に概念しか覚えないのです。
何故、そうしているか・・・自分が怠惰な人間だからです。
 

タグ

10, 2, , 4,5,10, 5, amp, Code, console, function, hoge, if, javascript, log, obj, return, var, あと, オブジェクト, キリ, つもり, もいら, もの, 上記, 仕事, 勉強, 変数, 実際, , 省略, 自分, 表示, 記載, 記述, 説明,

いろいろエディタやIDEを試してみてこれが良いかなと。

2018.11.23

Logging

IDEとエディタの境目あたりで言えばATOMVisual Studio Codeですね。
IDEでPHPを使用するならばNetBeansかなと思います。
ATOMに関してはいろいろ試してみてこれだけのプラグインをインストールすれば
それなりに開発しやすいですよ。
auto-encoding
autocomplete
japanese-menu
linter-php
v-bootstrap4
これを入れてあとはPHPで開発するならばPHPのインストールも
お忘れなく。
ちなみにVisual Studio Codeの方が安定しています。
間違いなくシェアはこちらのほうが多いです。
会社でもVisual Studio Codeを使う人が多くなってきています。
サクサク動くので使用しやすいですね。
Visual Studio Codeでも上記と同じようなことがプラグインや
基本設定から可能です。
特に開発環境がUTF-8だけではない環境の方は
基本設定のここをONにしてあげると便利です。
“files.autoGuessEncoding”: true

タグ

4, 8, ATOM, auto-encoding, autocomplete, autoGuessEncoding, Code, files, IDE, japanese-menu, linter-php, NetBeans, ON, php, Studio, true, UTF-, v-bootstrap, Visual, あげる, あたり, あと, いろいろ, インストール, エディタ, , かな, ここ, こちら, こと, これ, これだけ, サクサク, , シェア, それなり, ちなみに, ない, プラグイン, やすい, 上記, , 会社, 使う, 使用, 便利, 入れ, 動く, 可能, 同じ, 基本, 境目, 多い, 多く, 安定, 忘れ, 思い, , 特に, 環境, 良い, 言え, 設定, 試し, 開発, 間違いなく, 関し,