@Blog

ブログ通知を付けました.4時間置きに通知が飛びます.#サービスワーカー

2025.01.05

Logging

おはようございます.去年の暮にブログ通知を付けました.4時間置きに通知が飛びます.ソースコードは以前に書いたコードをベースとして再構築した形になります.平たく言うとLaravelを使用しないでWEB通知を行うものになります.一度作ってしまえば使いましが出来るようにコードを今回は書いたので使いまわそうと考えています.

以前、Laravelで作っていたので考え方は苦労せずに出来たのですが…

今まで知らないことが出てきてしまってそこでロスしてしまいました.知らなかったこととはjavascriptのfetchです.使用する機会は結構多めなんだけど知らないことがありました.それはurlのパラムに/exampleと書くか/example/index.phpと書くかでphp言語のグローバル変数$_SERVER[‘REQUEST_METHOD’]の値がPOSTで送っているのにも関わらずGETになるのです.

fetchを書く場合は/example/index.phpと書くことでPOST送信と判断されます.これをデバックもせずに悩んでいました（笑）.デバック大事.

明日へ続く

タグ

グローバル変数, コード, ソースコード, デバッグ, デバック大事, パラム, ブログ通知, ベース, 一度, 値, 去年, 形, 時間置き, 暮, 機会, 笑, 考え方, 言語, 送信, 通知,

ブラウザに画像をドロップして表示させる部分的な処理（javascript）。これを使って?

2021.10.07

Logging

本日はブログを更新するのがいつもよりかなり遅めです?、2000記事を超えてからネタが尽きているようにも思いますが、何とか毎日更新出来ています。ネタが尽きたら少し充電しようかなと思います。

さて、ブラウザに画像をドロップして表示させる部分的な処理（javascript）を作りました。これらを使ってちょっとしたサービスを作っています。まだ完成はしていませんが完成できたらこちらで紹介しようと思っています。尚、部分的な処理なのでドロップしても画像をサーバーに保存させたりすることはないです。

ソースコードはこちらになります。

全体のソースコードはこちらにアクセスしてブラウザのデバッグ機能で見ることが出来ます。
https://zip358.com/tool/demo43/

        var obj_input = document.createElement("input");
        obj_input.type = "file";
        obj_input.accept = "image/png,image/jpeg";
        var element = document.getElementById("dropArea");
        element.addEventListener("dragover", function(e) {
            e.preventDefault();
            this.classList.add("dragover");
        });
        element.addEventListener("dragleave", function(e) {
            e.preventDefault();
            this.classList.remove("dragover");
        });
        element.addEventListener("drop", function(e) {
            e.preventDefault();
            element.classList.remove("dragover");
            if (/\.((png)|(jpeg)|(jpg))/i.test(e.dataTransfer.files[0].name) === true) {
                var obj = element;
                obj.innerHTML = e.dataTransfer.files[0].name;
                var imgfiles = e.dataTransfer.files;
                obj_input.files = imgfiles;
                var fr = new FileReader();
                fr.readAsDataURL(obj_input.files[0]);
                fr.onload = function() {
                    obj.style.backgroundImage = "url(" + fr.result + ")";
                    obj.style.backgroundSize = "cover";
                };
            }
        });

タグ

2000, createElement, document, inp, input, javascript, obj, quot, var, アクセス, かなり, コード, こちら, こと, これ, これら, サーバー, サービス, ソース, デバッグ, ドロップ, ネタ, ブラウザ, ブログ, 保存, 充電, 全体, 処理, 完成, 少し, 更新, 本日, 機能, 毎日, 画像, 紹介, 表示, 記事,

PHP7でTwigを使う。

2020.05.10

Logging

Twigとは小枝であり、PHPのテンプレートエンジンであります。テンプレートエンジンが何なのかはぐぐってください。ここでは割愛します。

Twig3.x(3系)、Dumpの表示の仕方が書かれていないのでそれを記載します。記載方法は下記になります。特に記載方法が変わったのはデバッグの時の記述方法です、最初、デバッグ方法をググっていたのですが、全然上手くいかずエラーばかりはいていました。※Twig2系の情報が結構ヒットします。

require_once '/vendor/autoload.php';
$loader = new \Twig\Loader\FilesystemLoader('テンプレートの階層を指定');
$twig = new \Twig\Environment($loader,['debug' => true]);
$twig->addExtension(new \Twig\Extension\DebugExtension());//?ここの記述を忘れずに！！
echo $twig->render('index.html（レンダーするテンプレートファイル）', ['items'=>$this->top_view()]);

結局、公式ページのドキュメントにデバッグ方法が書かれていたのですが、それにたどり着くまで、小一時間ぐらいWEBの荒野をさまよっていました。最初からドキュメントを見ろよという教訓を得たのですが、結構ググる方を優先してしまう自分がいます。実際はドキュメントの中で検索するのが一番なのかもなと。皆さんが使用するようなエンジンはドキュメントを見るほうが良いと今回、痛感しました。これからはドキュメントを見るようにします。

https://twig.symfony.com/doc/3.x/functions/dump.html

タグ

2, ３, 39, 7, addExtension, autoload, debug, dump, Environment, FilesystemLoader, gt, loader, new, once, php, require, true, Twig, vendor, エラー, エンジン, ここ, それ, デバッグ, テンプレート, ヒット, 下記, 仕方, 何, 割愛, 小枝, 情報, 指定, 方法, 時, 最初, 表示, 記載, 記述, 階層,

知ってます？ちょいWINDOWS10便利機能。IT関係者は！

2020.02.10

Logging

知ってます？ちょいWINDOWS10便利機能。IT関係者は知っているひと多めです、逆に知らないのが少ないぐらいかなと思います。あのカズさんも知ってます。ちなみに仮想デスクトップは１画面の時はとても重宝しますね。これが出来るようになってかなり感激でした。

実際、WIN＋CTR+Dはとても良いですよ！コード作業用とかデバック用とか切り替えるとさっと確認できるのはとても良いです。ただ、自分は３画面を使っているので仮想デスクトップはあまり使用していません。会社は２画面だったのでたまに使用したりしていました。ついでに吉田さんの動画も載せときますね。圧縮系の話は良い感じかな。

タグ

１, 10, 2, ３, CTR, IT, win, Windows, カズ, かなり, コード, これ, たま, デスクトップ, デバッグ, 仮想, 会社, 作業, 使用, 便利, 動画, 吉田, 圧縮, 多め, 実際, 感激, 時, 機能, 画面, 確認, 自分, 話, 逆, 重宝, 関係者,