大晦日までカウントダウンしてまたカウントダウンするJSコード #永遠

2024.12.18

Logging

おはようございます.大晦日までカウントダウンしてまたカウントダウンするJSコードだけではツマラナイので全て漢字に変換して表示するコードを書きました.これでもツマラナイと思う人もいると思います.

そんなに難しいコードでもないのでコードを添付します💁.

        function updateCountdown() {
            const now = new Date();
            const nextNewYear = new Date(now.getFullYear() + 1, 0, 1, 0, 0, 0); // 次の年の1月1日0時0分0秒
            const diff = nextNewYear - now; // ミリ秒差

            if (diff > 0) {
                const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((diff % (1000 * 60)) / 1000);

                // 表示を更新
                document.getElementById("countdown").innerText =
                    kanji(`${days}日 ${hours}時間 ${minutes}分 ${seconds}秒`);
            } else {
                document.getElementById("countdown").innerText = "明けましておめでとうございます!";
            }
        }

        // 初回呼び出しと1秒ごとの更新
        updateCountdown();
        setInterval(updateCountdown, 1000);
        function kanji(str){
            let oo = [{'kanji':'零'},{'kanji':'壱'},{'kanji':'弐'},{'kanji':'参'},{'kanji':'肆'},{'kanji':'伍'},{'kanji':'陸'},{'kanji':'漆'},{'kanji':'捌'},{'kanji':'玖'}];
            oo.forEach((o,index)=>{
                str = str.replace(new RegExp(index, "g"),o.kanji);
            });
            return str;
        }

もっと芸のあるカウントダウンを作ろうとするとp5jsなどのライブラリが必要になると思います.WEBサイトでパーティカルなどを行っているサイトは大体こういうライブラリを使用しています.p5jsなどを使用して昔作ってみようかななどと思ったことが有りますが、実はp5jsは一度も触ったことがないです.

明日へ続く

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

```, カウント, カウントダウン, コード, ツマラナイ, パーティカル, ライブラリ, , 全て漢字, 初回呼び出し, , 大晦日, 月日時分秒, 漆#, 玖#, , 秒ごと, 肆#, , 陸#,

webpushのLaravelを使用しないパターンを箇条書き、フロントエンド側は

2024.11.14

Logging

おはようございます.webpushのLaravelを使用しないパターンを箇条書き、フロントエンドは過去記事を参照ください.まずwebpushを使用するにはパブリックキーとシークレットキーが必要になります.下記のURLより発行してみてください.

https://web-push-codelab.glitch.me

フロントエンド側でサービスワーカーの登録された識別データをバックエンドに送信.

// db.php: データベース接続の設定
function getDbConnection() {
    $host = 'localhost';
    $dbname = 'your_database';
    $username = 'your_username';
    $password = 'your_password';

    try {
        $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        return $pdo;
    } catch (PDOException $e) {
        die("DB接続エラー: " . $e->getMessage());
    }
}

// endpoint_register.php: エンドポイントをデータベースに登録
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $endpoint = $_POST['endpoint'];
    $auth = $_POST['auth'];
    $p256dh = $_POST['p256dh'];

    if ($endpoint && $auth && $p256dh) {
        $pdo = getDbConnection();
        $stmt = $pdo->prepare("INSERT INTO push_subscriptions (endpoint, auth, p256dh) VALUES (?, ?, ?)");
        $stmt->execute([$endpoint, $auth, $p256dh]);
        echo "登録成功";
    } else {
        echo "エンドポイントデータが不完全です";
    }
}

バックエンド側で下記のようなコードでデータを保存します.

次にminishlink/web-pushというライブラリを使用し登録されたデータを元に送信処理を行います.

composer require minishlink/web-push
// message_send.php: データベースからエンドポイントを取得し、プッシュ通知を送信
require 'db.php';
require 'vendor/autoload.php';

use Minishlink\WebPush\WebPush;
use Minishlink\WebPush\Subscription;

// VAPIDキーの設定
$auth = [
    'VAPID' => [
        'subject' => 'https://example.com',
        'publicKey' => 'YOUR_PUBLIC_VAPID_KEY',
        'privateKey' => 'YOUR_PRIVATE_VAPID_KEY',
    ],
];

$webPush = new WebPush($auth);

// データベースからサブスクリプション情報を取得
$pdo = getDbConnection();
$stmt = $pdo->query("SELECT endpoint, auth, p256dh FROM push_subscriptions");
$subscriptions = $stmt->fetchAll(PDO::FETCH_ASSOC);

foreach ($subscriptions as $sub) {
    $subscription = Subscription::create([
        'endpoint' => $sub['endpoint'],
        'publicKey' => $sub['p256dh'],
        'authToken' => $sub['auth'],
    ]);

    // 送信するメッセージ
    $message = json_encode(['title' => '通知タイトル', 'body' => 'メッセージ内容']);

    // プッシュ通知の送信
    $webPush->sendOneNotification($subscription, $message);
}

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

```, エンドポイント, キー, コード, サービスワーカー, サブスクリプション情報, シークレットキー, データベース, データベース接続, パターン, バックエンド, バックエンド側, パブリックキー, プッシュ通知, フロントエンド, フロントエンド側, ライブラリ, 接続エラー, 識別データ,

Push通知ってブラウザ閉じても通知出来る様に出来るのか?

2024.11.04

Logging

おはようございます.Push通知ってブラウザ閉じても通知出来る様に出来るのか?答えは出来るのですが無料でその機能を実装できるのか.こたえはYesに近い?.有料のサービス機能push7を使用すればもっと簡単に可能です.

サービスワーカーとかいう機能を使えば良いみたいですね.知らないは一時の恥ですね.サービスワーカーとGCPやララベルの拡張Webpushなどを使えば出来そうですがまだ試していません.

因みにPusherサービスを使用して実装しました.当分、無料枠で対応可能な感じですね💁.

下記はリアルタイムPush通知の動作とソースコードの一部になります.

<?php
namespace App\Events;

use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\Channel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class NotificationEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $title;
    public $message;
    public $userId;

    public function __construct($title, $message,$userId='')
    {
        $this->title = $title;
        $this->message = $message;
        $this->userId = $userId;
    }

    public function broadcastOn()
    {
        return new Channel('notifications.' . $this->userId);
    }

    public function broadcastAs()
    {
        return 'notification-event';
    }
}

明日へ続く

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

```, サービス, サービスワーカー, サービス機能, ソースコード, ブラウザ, ララベル, リアルタイム通知, 一部, 下記, 動作, , 拡張, 有料, 機能, 無料, 無料枠, 答え, 通知,

高知県のダム貯水率グラフ化2

2020.03.26

Logging

以前、高知県のダム貯水率のグラフ化してみた事があるのですがいつの間にかデータが取得できなくなっていたようです。なので取得できるようにPHPコードを変更しました。高知県のダム貯水率をJSON形式で吐き出してほしいなと思う人は少数ながらいると思います。そんな方は私がJSON形式で吐き出したデータを密かに使っていたりするのかな?因みにプログラム出来るよというひとは自身で貯水率のデータが転がっているURLを掲載しますので解析して頂ければ有り難いと思います。

https://suibo-kouho.suibou.bousai.pref.kochi.lg.jp/suibou/main.html?no=4&no2=0&fnm=openTable

<?php
$html = file_get_contents("高知県のダム貯水率のURL");
$html = mb_convert_encoding($html,"UTF-8","SJIS");
$dom = new DOMDocument();
$html = mb_convert_encoding($html, "HTML-ENTITIES", 'UTF-8');
@$dom->loadHTML($html,LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$xpath = new DOMXPath($dom);
$ary=array(
    "永瀬ダム"=>"nagase",
    "鎌井谷ダム"=>"kamaidani",
    "鏡ダム"=>"kagami",
    "早明浦ダム"=>"sameura",
    "桐見ダム"=>"kirimi",
    "坂本ダム"=>"sakamoto",
    "大渡ダム"=>"oodo",
    "中筋川ダム"=>"nakasugawa",
    "以布利川ダム"=>"iburigawa"
);
for($i=1;$i<=9;$i++){
    $r[$xpath->query("/html/body/form/div[2]/table/tbody/tr[$i]/td[3]")->item(0)->textContent] = preg_replace("/[\x{00a0}|?]/u","",$xpath->query("/html/body/form/div[2]/table/tbody/tr[$i]/td[7]")->item(0)->textContent);
}
foreach ($r as $key => $value) {
    $obj[$ary[$key]] = $value;
}
//echo '{"nagase":"91.16","kamaidani":"77.57","kagami":"39.32","sameura":"100.00","kirimi":"46.09","sakamoto":"99.38","oodo":"98.70","nakasugawa":"77.90","iburigawa":"99.12"}';
print json_encode($obj);

https://zip358.com/tool/demo6/index.html

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

```, グラフ化, コード, ダム貯水率, ひと, 中筋川ダム, 以布利川ダム, 坂本ダム, 大渡ダム, 少数, 形式, 明浦ダム, 桐見ダム, 永瀬ダム, 自身, 貯水率, 鎌井谷ダム, 鏡ダム, 高知県,

MYSQLのif文みたいなものを使用する機会が物凄く少ない気がする。

2019.05.18

Logging

### mysql case = if文みたいなもの
```sql
select namae,tensu
case when (tensu >= 75 and tensu <= 80)  then '可'
when (tensu >= 25 and tensu < 75)  then '否' else '???' end as kahi
from tbl;
table name tbl
|namae|tensu|
|---|---|
|hirose|77|
|non|76|
|arimura|78|
|aragaki|80|

mysql case = if文みたいなものを使用する機会が物凄く少ない気がする。
プログラム言語って使用しなければ抜け落ちるです。
自分の場合、たぶん長期的な記憶に障害があって抜け落ちるですw🙄。
メモしたことすら忘れてしまう…これは痛い老害?。

でも、好きな事は大体覚えていますね、概念的な事を覚えていたら大丈夫です😌。
 
 

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

```, 25, 39, 75, 76, 77, 78, 80, and, aragaki, arimura, as, case, else, end, from, gt, hirose, if, kahi, lt, MYSQL, namae, name, non, select, SQL, TABLE, tbl, tensu, then, when, こと, プログラム, メモ, もの, 使用, , , 場合, , 機会, , 自分, 言語, 記憶, 障害,

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|

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

```, ---, , 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, ウィンドウ, サーバー, ため, ランキング, リスク, レンタル, , 国内, 対応, 技術, 日本, 最新, 機能, 理由, 運営, 関数,

指定時間になったら自動的に復帰(スリープ/休止状態)

2015.11.18

Logging

rtcwake -m mem -s 3600
rtcwake -m disk -s 3600
rtcwake -m mem -t $(date +%s -d "2015-11-18 06:30")

上記のコマンドで指定時間になったら自動的に復帰(スリープ/休止状態)する
事ができます。ちなみに3600とは3600秒(1時間後)という意味です。
menはスリープ状態を指し、diskはサスペンドを指します。
スリープ状態では電源ボタン等で指定時間内でも復帰が出来ますが
サスペンドモードでは電源ボタンを押してもパソコンは起動しないので
注意が必要です。
———————
自分はローカルサーバーを立ち上げているのですが
平日など自分が使わない時間帯などはスリープ状態にしています。
そうすることで、電気代の節約をしています。
ローカルサーバーと言っても使わない時間帯は余計な電力は
使いたくないですから(。>?<。)。
Ubuntuなどはこの方法ではうまく行かないと思います。
Ubuntuの事はあまり知らないので分からないのですが・・・・。
※リナックス(Linux)、CentOSの話です。

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

```, -m, -s, -t, 06, , 11, 18, 2015, 30, 3600, D-, date, disk, mem, men, quot, rtcwake, こと, コマンド, サーバー, サスペンド, スリープ, パソコン, ボタン, モード, ローカル, 上記, , 休止, 余計, , 平日, 復帰, 必要, 意味, 指定, 時間, 注意, 状態, 節約, 自分, 起動, 電力, 電気, 電源,