@Blog{zip358.com}

レンタルサーバーでデスクトップ通知はPush7がおすすめ．

2024.10.01

Logging

おはようございます．今日から１０月ですね～．この頃はクーラーを夜な夜な付けることもなくなり快適な生活を送っています．夏は好きですけど今年の夏は暑かった．

さてレンタルサーバーでデスクトップ通知はPush7がおすすめです、今のところプッシュ通知を行っている日本企業はここしか知りません．おそらく海外で同じようなAPIサービスはあると思います．

因みにこのサービス、無料版では購買者に一括送信しか出来ませんが９８０円支払えば個別送信することも可能です．自分がいま作っているサービスは「npush」というものです．このサービスはNHKの番組表から自分が見たい番組をチェックすると前の日にデスクトップ通知が送信されるというもの．あまり需要がなさそうだけど、自分には必要なものなので運用しようと思っています．まずは自分だけ使う感じで他のユーザーさんは番組検索機能だけ開放します．ただし番組表は東京だけですけどね．

技術的な話．デスクトップ通知などはレンタルサーバーが開放されているポートだけでは機能しません．なので、APIサービスを使用せずに制作したい場合はAWSやVPSサーバーなどを使用することをおすすめします．今回、使用したAPIサービスでPushするPHPコードを抜粋して貼っときます．あくまでもテスト用なので、ここから改修が必要になります．また、個別送信したい方は新たにパラメーターを付与してください．詳しくは公式ページのドキュメントを参照くださいませ．

        $apiurl = "https://api.push7.jp/api/v1/";
        $appno = config('app.push7no');
        $apikey = config('app.push7apikey');
        $icon_url = 'https://dashboard.push7.jp/uploads/example.png.webp';
        
        // 送信データ
        $data = array(
            'title' => "通知タイトル", // 通知タイトル
            'body' => "通知テキスト", // 通知テキスト。記事タイトルなど
            'icon' => $icon_url, // アイコンファイル
            'url' => "https://example.com/", // リンク先。記事URLなど
            'apikey' => $apikey
        );
        
        // JSON形式に変換
        $json_data = json_encode($data);
        
        // cURLセッションを初期化
        $ch = curl_init($apiurl . $appno . '/send');
        
        // オプションをセット
        curl_setopt($ch, CURLOPT_POST, true); // POSTメソッドを使用
        curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json')); // ヘッダーにJSON形式を指定
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // レスポンスを文字列で返す
        curl_setopt($ch, CURLOPT_POSTFIELDS, $json_data); // POSTデータをセット
        
        // 実行してレスポンスを取得
        $response = curl_exec($ch);
        
        // エラーチェック
        if (curl_errno($ch)) {
            $error_msg = curl_error($ch);
            log::error("cURLエラー: " . $error_msg); // エラーログ
        } else {
            // レスポンスをデコード
            $response_data = json_decode($response, true);
            log::info($response_data); // レスポンスをログに記録
        }
        
        // cURLセッションを終了
        curl_close($ch);

明日へ続く．

タグ

application, array, config, Content-type, curl_errno, cURLエラー, cURLセッション, else, Error, json_decode, json_encode, log, npush, quot, response, true, アイコンファイル, エラーログ, デコード, パラメーター,

JSのPromiseとawaitってこういう事なんだよね。理解した！！( ･ิω･ิ)

2022.04.29

Logging

おはよう御座います。

この頃、JSを使う機会が増えてきています。巷ではReact.jsなどやVue.jsなんかが人気ですよね。またnext.jsなんかも出来れば転職活動に有利です。でもそんなフレームワークを勉強するまえにJavaScriptの基礎が出来ていないといけないと思っています。ネイティブでゴリゴリ書ける人であれば、何処へ行ってもやってけると思っています。

"use strict";
const main = (a,b,c)=>{
    return new Promise ((resolve)=>{
        console.log(a,b,c);
        b++;
        resolve({a:a,b:b,c:c}); 
    });
}
(async()=>{
    await main("A1",1,"C1").then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c));
    // main("A1",1,"C1").then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c));
    console.log("fin");
})();

Promiseとawaitとかの使い方はこんな感じです😀、このコードでは重たい処理を書いているわけではないけど、非同期通信処理チェーンで繋ぐとどんな所で使えば良いのか分かるかなって思います。要するに順番に非同期通信処理をしたい時に役に立ちます。このソースコードの場合、awaitしなくても良いですがね・・・。awaitを付けると処理後に次のコードが処理されます。付けない場合は同時並行的に処理されます。

サンプルコードはこちらから閲覧ください（検証）ませ！！

タグ

１, async, await, console, const, gt, javascript, JS, log, main, new, NEXT, Promise, quo, quot, react, resolve, return, strict, use, vue, なん, なんか, ネイティブ, フレームワーク, まえ, 事, 人, 人気, 何処, 勉強, 基礎, 巷, 有利, 機会, 活動, 理解, 転職, 頃,

お気づきかと思いますが、サーバーを密かに変えました。（密かではないですけど。）

2022.01.08

Logging

お気づきかと思いますが、サーバーを密かに変えました。変えたのは年末あたりです、それから裏と表でサーバーをゴニョゴニョして何とか運用している感じです。変えた理由は経費削減ということが一番の理由ですね😌。

変えたことにより表示速度が若干早くなっているかのように思えます、サクラレンタルサーバーでは土台はnginx + Apache2.4系だったらしいので「.htaccess」が使用できていたのだと思いますが、現在、運用しているサーバーは nginxで動いております。 nginx上でApacheをどうやって動かせばよいのか、知見がないのでnginxだけ動いております。調べればやり方が書かれているサイトがあると思います。

12月にlog4jという脆弱性が見つかった事により、ApacheやJAVAなどに影響を与えているようです、そんな事もあったので今回はApacheサーバーを避けてnginxで構築したわけです。IPを調べるとどこのサーバーを使用しているか分かると思いますが、敢えてどこのサーバーのどのプランを使用しているかの公表は控えさせてもらいます。

因みにサーバーが落ちてもメールサーバーは別サーバーを使用しているので影響はないようにしています。今回分かったことはクラウドと言われているサーバーは、クリック一つでいろいろ出来るようになっているけれども、それを使用すると別途お金が発生するように設計されていたりしてます。なので自分はそこらへんお金を使いたくないので手動で対応しています。

結局のところ、VPSでゴリゴリとサーバサイド知見がある人にはAWSやGCPというサービスはポチポチ押すだけで、サーバー構築できるけど、もったいないと思うだけなのかもしれません。AWSやGCPの良い所は可用性だなって思えます。そしてオンプレと違ってサーバーが落ちてもAWSやGCPの障害のせいに出来ることかもしれません。

強者になりたい今日このごろでした・・・現場からは以上です。

タグ

12, 2.4, 4, Apache, htaccess, java, log, nginx, こと, ゴニョゴニョ, サーバー, サイト, さくら, やり方, レンタル, 一, 上, 事, 今回, 使用, 削減, 土台, 年末, 影響, 感じ, 構築, 現在, 理由, 知見, 経費, 脆弱性, 若干, 表, 表示, 裏, 速度, 運用,

Fox-Black.comというサイトを開設。

2020.09.29

Logging

Fox-Black.comというサイトを開設。本当はblack-fox.comが良かったのだけどPlayStationのアカウント(blackfox)が取られていてfoxblackにしてPlayStationのアカウントを取得。そのいうことでサイトも設置したいなと思いサイトを開設。
最初はfc2の無料サイトでサイトを開設していたのだけど、やっぱ独自のドメインで構築したくなったので、ドメインを取得。

そしてサイトを構築しました。まだ何もないのだけど、なんかやっていきたいなとGame logページまで作りましたが、たぶんゲームはあまりしないのでログとして残らないだろうから、何か違うものに変わっていくと思います。

ちなみにドメインはfox-black.comというドメインです、実は静的ページに見えてWPで出来ているですよ。昨日突貫工事でサイトを構築しました。ワードプレスだけどサイドバーという概念は除けてます。

明日、WPの超シンプルなコードを公開します。

タグ

2, black-fox, blackfox, com, fc, Fox-Black, FoxBlack, Game, log, PlayStation, wp, アカウント, ゲーム, こと, サイト, ドメイン, バー, プレス, ページ, もの, ログ, ワード, 取得, 工事, 明日, 昨日, 最初, 本当, 概念, 構築, 無料, 突貫, 設置, 開設,

js初心者さんのお勉強：思いつき写経。

2020.06.01

Logging

js初心者さんのお勉強をvlogとして昨日撮りました。もっと簡略化できることはあるのだが、敢えてやらない自分がいます。自分のモットーに初心者さんでもわかるコードをという考えがあります。初心者さんに分かりやすいと言うことは馬鹿な自分にも分かりやすいという事です。ぱっと見て読みやすければ良いという事です。javascriptを本当に1から勉強中なんですね。本当に右も左も分からないのでググりながらお勉強しています。知らないと言ってもプログラミングの基本は知っているのでJS用の書き方やお作法を覚えているというような感じです。

ソースコードはこちら

let btn1 = function (e) {
	//btn2
	console.clear();
	console.log("btn1");
	let p = document.getElementsByTagName("p");
	let style1 = [["backgroundColor", "fontSize", "color"], ["#000000", "20px", "#ffffff"]];
	for (const key in p) {
		if (p.hasOwnProperty(key)) {
			const element = p[key];
			for (var i = 0; i < style1[0].length; i++) {
				element.style[style1[0][i]] = style1[1][i];
			}
		}
	}
};
let btn2 = function (e) {
	//btn2
	console.clear();
	console.log("btn2");
	let p = document.getElementsByTagName("p");
	let style2 = {
		backgroundColor: "#ffffff",
		fontSize: "20px",
		color: "#000000"
	};
	for (const key in p) {
		if (p.hasOwnProperty(key)) {
			const element = p[key];
			for (const key2 in style2) {
				element.style[key2] = style2[key2];
			}
		}
	}
};
document.body.style.backgroundColor = "#0b222b";
document.getElementById("btn1").addEventListener("click",btn1);
document.getElementById("btn2").addEventListener("click",btn2);

デモページ
https://zip358.com/tool/demo17/

タグ

１, 2, btn, Clear, console, document, function, getElementsByTagName, javascript, JS, let, log, quot, Vlog, お勉強, コード, こちら, こと, ソース, プログラミング, モットー, 事, 作法, 写経, 初心者, 勉強, 右, 基本, 左, 思いつき, 感じ, 昨日, 書き方, 本当, 用, 簡略, 自分, 馬鹿,

Javascript? EVENT処理の際に引数を渡す。

2019.04.26

Logging

Javascript? EVENT処理の際に引数を渡す方法。
ちなみにもっと簡略化できます。

//NG
$(function(){
    let hoge = "test";
    $("input[type='text']").on("change",(function(hoge){
        console.log(hoge);
    })(hoge));
});
//OK!
//js
function hoge(a){
    return function(){
        console.log(a +  this.value);
    };
};
document.querySelector('input[type="text"]').addEventListener("click",hoge("aaaaaaa~"),false);
//jq
$(function(){
    let hoge = function(a){
        return function(){
            console.log(a + $(this).val());
        };
    };
    $("input[type='text']").on("change",hoge("test="));
});

タグ

aaaaaaa, addEventListener, change, click, console, document, EVENT, false, fu, function, hoge, input, javascript, jq, JS, let, log, NG, OK, ON, querySelector, return, test, Text, this, type, value, 処理, 引数, 方法, 簡略, 際,

javascriptでEVENT処理レベル1

2019.03.09

Logging

<!DOCTYPE html>
<html>
    <head>
    </head>
<body>
    <input type="text" class="zyezyezye">
    <script>
            "use strict";
            let zyezyezye = document.querySelector(".zyezyezye");
            zyezyezye.addEventListener("input",()=>{
                console.log(">おいら>>" + zyezyezye.value);
                if(zyezyezye.value=="じぇじぇじぇ")
                {
                    console.log("おいら>>ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!nおいら>>じぇじぇじぇn<<ストーカーかよ!!");
                }
            });
        </script>
</body>
</html>

jqueryばかり書いているとこういう書き方、書かなくなる。
jqueryから世の中はjavascriptやvue.jsなどへシフトしているそうだけど、未だにjqueryばかり書いている自分です。なれないといけないと思いつつ！？
別のことに力を注いでいる毎日です。
ちなみに「じぇじぇじぇ」は方言で驚きを指す言葉だとか。

タグ

１, addEventListener, body, class, console, DOCTYPE, document, EVENT, gt, head, html, if, input, javascript, let, log, lt, querySelector, script, strict, Text, type, use, value, zyezyezye, おいら, レベル, 処理,

javascriptのアロー関数というものを使ってみた。

2019.02.24

Logging

javascriptのアロー関数というものを使ってみた。
関数と同じだよねとおもっていると落とし穴があるみたい。
どうもグローバル変数が挙動不審みたいなんです。

/* アロー関数 */
let func1 = a => a + 3;
console.log(func1(5));
let func2 = (a,b)=>{
    return a + b + 3;
}
console.log(func2(1,2));

タグ

１, 2, ３, 5, console, FUNC, gt, javascript, let, log, return, アロー, グローバル, もの, 変数, 落とし穴, 関数,

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, あと, オブジェクト, キリ, つもり, もいら, もの, 上記, 仕事, 勉強, 変数, 実際, 文, 省略, 自分, 表示, 記載, 記述, 説明,