画像の軽量化．webpにしてみたら普通に軽いみたいですね．

2024.11.19

Logging

おはようございます．先日の休みの日に前から気になっていた画像の表示速度を改善したくてwebpという画像圧縮を採用しました．webpに関しては数年前に一度記事にはしていたのですが、その当時はブラウザの方が対応していなくて途中でもとに戻したような気がします．

今回はwebpを採用してこのまま運用していこうと思っています．過去の画像も一括でwebpにしました、それと同時に今までTopに配置していた動画も除けました．

ちょっと物足りない感じはしますが、表示速度を速くしてモバイルファーストに近づけていこうと思います．尚、webpにするためにewwwというプラグインを導入しています．

導入して上手く表示がwebpに変換されたかなと思ったら上手く変換されなかったので、自作のプラグインを作り力技でwebpに変換した形になります（画像はWebpに変換されましたがコードを見るとそのままだったので）．

明日へ続く

タグ

ewww, TOP, webp, コード, ブラウザ, プラグイン, もと, モバイルファースト, 一括, 休み, 作り力技, 形, 気, 物足りない感じ, 画像圧縮, 自作, 表示速度, 途中, 過去,

Let’s encryptのSSLを適応してもブラウザ等で閲覧するとブロックされるかも．

2024.10.31

Logging

おはようございます．Let’s encryptのSSLを適応してもブラウザ等で閲覧するとブロックされるかも．．2024年10月31日以降に発行されるOCSPはブロックするとGさんから通告があった．

https://gigazine.net/news/20240724-letsencrypt-ocsp

OCSPは、ユーザーがウェブサイトにアクセスする際、証明書の有効性をリアルタイムで確認するプロトコルですが、プライバシーリスクや運用コストの問題が指摘されています。一方、CRLは失効した証明書の一覧を提供する方式で、プライバシー保護や運用の簡素化に寄与します。Let’s Encryptは、OCSPに依存しているユーザーに対し、早急にCRLへの移行を検討するよう推奨しています。

トイウコトデ、普通に大丈夫そうです．

明日へ続く

タグ

CRL, Gさん, Let's encrypt, OCSP, SSL, ウェブサイト, トイウコトデ, プライバシーリスク, ブラウザ, プロトコル, ユーザー, リアルタイム, 方式, 移行, 簡素化, 証明書, 通告, 運用, 運用コスト,

記事音声読み上げ機能追加しました．Chromeブラウザで読み上げ可能

2024.08.01

Logging

おはようございます．記事音声読み上げ機能追加しました．Chromeブラウザで読み上げ可能です、その他のブラウザでも比較的に簡単に導入できます．たまに読み上げが変なときがあるけれど、大体の読み上げは正確に読み上げが出来ていると思います．

音声読み上げはブラウザに標準搭載されているAPIになるのかな、それを呼び出して使っているだけです．誰でも原理を知っていれば使用できます、駆け出しのプログラマーでも作れるぐらい簡単です．

クラスを呼び出してそこに読み上げてほしいテキストデータを渡してあげればよいだけなんですから．具体的にはSpeechSynthesisUtteranceというものを呼び出すだけです．使用方法はQiitaなどに記載しているのを参考にしてみてください．

自分でも音声読み上げを使ってみたのだけど結構良いなという印象です．ながら作業しながら記事の読み返し行うことも可能です．ただ、音声が合成音声なのが若干聞き取りにくいかもしれないですね、そこはこれからAIなどが補っていく事になりそうだなって思います．

明日へ続く．

タグ

AI, API, chromeブラウザ, qiita, SpeechSynthesisUtterance, クラス, その他, ブラウザ, プログラマー, ほしいテキストデータ, 使用方法, 印象, 原理, 参考, 合成音声, 標準, 自分, 若干聞き取り, 記事音声, 音声,

サードパーティCookieが原因でアマゾンが毎回ログアウトする．

2024.06.09

Logging

おはようございます．サードパーティCookieが原因でアマゾンが毎回ログアウトします．毎回ログインしないといけなくなった人に対処方法を記載します．原因はKeepa – Amazon Price Trackerのトラッキングが原因になります．この拡張機能をChrome系に入れていると強制ログアウトが走る．

ブラウザ（Chrome）の設定からプライバシーとセキュリティーに進み．サードパーティCookieの使用が許可されているサイトに下記の画像のように設定します．

次にChromeの拡張機能設定へ進み、Keepaの詳細からサイトへのアクセスをご自身のamazonの国ドメインだけにすることで対応可能です．

これでパソコンを再起動したり終了から起動やスリープ時にアマゾンだけがログアウトされている問題から解放されますと言いたい所だけど、これでも発生する場合はKeepaの拡張機能を削除するしか無いかもです．

明日へ続く．

タグ

Amazon, Amazon Price Tracker, Chrome, Chrome系, Keepa, アマゾン, サードパーティCookie, スリープ時, セキュリティー, トラッキング, パソコン, プライバシー, ブラウザ, 再起動, 国ドメイン, 強制ログアウト, 拡張機能, 拡張機能設定, 毎回, 起動,

Gドライブの復元をぽちぽちするのが面倒なので。

2023.12.16

Logging

おはようございます、Gドライブの復元をぽちぽちするのが面倒なのでPower automateを使用して自動化しました。マウスの座標値は任意で変更して、繰り返す条件は1回にしているけどお好みで変更すればブラウザをぽちぽちクリックして復元してくるボットの出来上がり。

ミソは二番目のマウスのクリックの設定です。こんな感じにしないと復元が表示されないままクリックすることになり失敗するので、大事にな設定ポイントになります。これで自分は3000ファイルを復元しましたが、JSのバッチじゃないので半日程度自動ボットを動かした感じになります。とほほ…。

明日へ続く。

タグ

3000ファイル, Gドライブ, JS, Power automate, お好み, クリック, バッチ, ブラウザ, ボット, マウス, ミゾ, 二番目, 半日程度自動ボット, 座標値, 復元, 感じ, 条件, 自分, 設定, 設定ポイント,

スマホでも動画再生させる方法。

2023.10.16

Logging

おはよう御座います、スマホでも動画再生させる方法を記載しますね。このコードをvideoタグに入れるとスマホでも動画が再生されるようです。iPhoneのSafariとchromeで動作確認済。最新のブラウザではスマホでも動画再生されるようです。

<video autoplay preload="none" loop="loop" muted="muted" playsinline=""

上記のコードで大事になるのが「playsinline」という所、この記述がなければスマホでは動画が再生されません。ググってもなかなかこのコードにたどり着くことが出来なかった。昔はスマホで動画が再生され無かったのですが、いまの最新のブラウザではスマホでも動画が再生出来るようになっているので、これは良い感じだなぁと思います。なお、ミュートとかオートプレイも大事だということも付け加えて置きます👍。

因みに一昔前だとサーバーサイドでストリーミング再生でとかしていたと思いますが、この手法が使えるようになってからは、かなり低予算で対応出来るようになったのではないかなって個人的には思いました。

明日へ続く😌

タグ

Chrome, iPhone, loop, lt;video autoplay preload, muted, muted&quot, none&quot, playsinline, quot, quot;loop&quot, Safari, videoタグ, オートプレイ, サーバーサイド, ストリーミング再生, ブラウザ, ミュート, 一昔前, 手法, 記述,

JavaScriptでWebstorage使ってますか？🤔 #webstorage #javascript #cookie

2022.12.04

Logging

おはようございます。二日酔いです、遅めの更新🍃。

今日は今までフロントエンド側で使用していたcookieの処理コードをwebstorageに置き換えた理由と使い方のコードを記載します、JSでCookieを取り出すコードを書く場合、バニラコードで書くかライブラリを使用して書くかだと思います。自分は前者で、とにかくCookieで保存したものを取り出すのに無駄にコードを書いていましたので、そろそろコードを直そうと思ってwebstorageを採用しました。

webstorageを採用した理由は自分が保管するデータはそれ程、容量を食わないしローカル保存（ブラウザ側保存）で十分な情報だったのでwebstorageを採用しました。そして何より、もう殆どのブラウザで使用できるようになっただろうという考えの元、コードを改修しました。

今まで情報の呼び出しするのに数行書いていたものが、１行のコードで参照できるというのは本当に素晴らしいことです💯。

呼び出すコードはこちら

localStorage.getItem("bgcolor_code")

値を保存するコードはこちら

localStorage.setItem("bgcolor_code",color)

その他に削除やクリアするコードやSessionで保存するコード等も存在します、もし詳しく知りたい場合は上記のTwitterのリンクを辿ると情報にたどり着くはずです。

タグ

COOKIE, javascript, JS, webstorage, エンド, コード, データ, バニラ, ブラウザ, フロント, もの, ライブラリ, ローカル, 二日酔い, 今日, 使い方, 使用, 保存, 保管, 元, 処理, 前者, 場合, 容量, 情報, 採用, 改修, 更新, 殆ど, 無駄, 理由, 自分, 記載,

Chromeブラウザの拡張機能を新たに作ったお話。 #拡張機能

2022.11.22

Logging

おはようございます、転職活動はあまりしていません😯。

本当なら就職出来ている頃だと思います。なぜならハローワークだけで活動しているので、他のスカウトは無視しているという変な転職活動をしています。今年欲しいという求人は人手不足な会社かなと思いますし、年末押し迫って転職できるとはとても思い難いです。頑張っている事は確かですが、今は難しいという思いもあります。

そんな中でChromeブラウザの拡張機能を新たに作ったお話です、一応、皆さんが使えるようにGさんに申請しました。どんな拡張機能を作ったのかと言えば、サイト内検索が出来る拡張機能です、特に難しいコードなどは使用していませんが、人様の拡張機能は少し不安なので自分で自作した訳です。どんな時に使用するかは人によって違うかも知れませんが、例えばITエンジニアならサイト内のドキュメント検索に使用できるかなって思います。今のリファレンスサイトなどはサイト内検索が出来るようになっているモノのそれでも抜け落ちている部分があるので、それを拡張機能の力で補えるかなと思います。

因みに中のmainコードはこれだけです。コレでサイト内検索を行っています。

document.getElementsByName("txt")[0].addEventListener("keydown", (elm) => {
    if (elm.key === "Enter") {
        chrome.tabs.query({ 'active': true,'lastFocusedWindow': true }, function (tabs) {
            var site = String(tabs[0].url).match(/https?\:\/\/[a-zA-Z0-9|\.|\-]*\/?/)[0].replace(/https?:\/\//,"").replace(/\//,"");
            chrome.tabs.create({
                url:"https://www.google.com/search?q=site" + encodeURI(":"+ site + " " + document.getElementsByName("txt")[0].value)
            });
        });
    }
});

追伸：公開されました。拡張機能はこちら👉

https://chrome.google.com/webstore/detail/site-search/ipemphkmnkbnfonlpmgacnmhnhfimmll/related?hl=ja&authuser=0

タグ

Chrome, IT, エンジニア, お話, コード, サイト, スカウト, ドキュメント, ハローワーク, ブラウザ, リファレンス, 不安, 中, 事, 人, 人手, 人様, 今, 今年, 他, 会社, 使用, 変, 少し, 就職, 年末, 拡張, 時, 本当, 検索, 機能, 求人, 活動, 無視, 申請, 皆さん, 自作, 自分, 訳, 転職, 頃,

Manifest V3、ブラウザ拡張機能のアレに対応した解説動画。

2022.11.02

Logging

おはようございます、カサカサ肌には大変な季節です🫠。

今日はManifest V3、ブラウザ拡張機能（Chrome拡張）のアレに対応した解説動画がありましたのでご紹介します。こちらの動画で基本は分かる感じになっています。いつまで掲載されるかわからないので、リンクだけ貼っときます。こちらになります。

尚、マニフェストの書き方だけがV3になってから変わっただけではないので、そこの所が注意しないといけない所です。自分もグーグルクロームに拡張機能を公開していたので、そちらの使用されている拡張機能は修正しました。

今、自分用に作っているV3のマニフェストの書き方だけ載せときますね。

{
  "name": "lancers footpoints",
  "version": "1.0.0",
  "manifest_version": 3,
  "description": "ランサーズ。",
  "permissions": [
    "tabs",
    "scripting"
  ],
  "action": {
    "default_icon": "icon20221101.png.webp"
  },
  "background": {
    "service_worker": "src/background.js"
  },
  "content_scripts": [
    {
      "matches": [
        "https://www.lancers.jp/work/search*"
      ],
      "css":["src/style.css"]
    }
  ]
}

あと、backgroundとcontent_scriptsの送受信の関係などが記載されているサイトを見つけたので、そちらもリンクを貼っときます、こちらのページになります。

タグ

1.0.0, ３, Chrome, footpoints, Lancers, Manifest, name, quot, Version, アレ, いつ, グーグル, クローム, こちら, ご紹介, そこ, そちら, ブラウザ, マニフェスト, リンク, 今, 今日, 使用, 修正, 公開, 動画, 基本, 大変, 季節, 対応, 感じ, 所, 拡張, 掲載, 書き方, 機能, 注意, 肌, 自分, 解説,

基本情報技術者試験ワード集と単語帳作りアプリで学習の下準備をする方法！ #FE #英語 #効率

2022.10.06

Logging

おはようございます、朝、３時半頃から起きています😪。

先日から英語の勉強をアプリではじめました、自分が使用しているのはモノグサというアプリです。このアプリをインストールしたのは二年前の話です、そのアプリを使用して効率良く英単語を覚えていってます、なんかよく分からないけど覚えて行けている🙄。

さて、それとは別に本題のお話です、単語帳作りアプリを使って基本情報技術者試験に出てくるワードを再学習しています。ワードの方は基本情報技術者試験ドットコムから引っ張ってきています、そのワードをCSV化してアプリに入れました。個人的に使用している分にはOKですが、これを公開や共有するとNGになりますので使用時はお気をつけてください🙇。

ワードを収取する方法はブラウザのコンソール画面に下記のコードを貼り付けて収集しました。
基本情報技術者試験ドットコムのキーワード集「あ」から「ん」までのリンクページをそれぞれ開きコンソール画面でコードを実行して、それをUTF8のファイルにペーストして一つのファイルにしてCSV保存。本当はnode.jsでコードを書いて実行でもしようかなと思っていたのですが、それすら面倒くさいと思ったので、こちらの地味な方法を選択しました。尚、行末に必要なカンマを追加して上げてくださいね🙄。

let s = [];
let $moji = function(m){
   return String(m).replace(/[\,|\n|'|"]/g," ");
};
Object.keys(document.querySelectorAll(".big")).forEach((e)=>{
    s[e] = "'" + $moji(document.querySelectorAll(".big")[e].innerText) + "'" + "," + "'" + $moji(document.querySelectorAll("ul > li > div > div")[e].innerText) + "'";
});
copy(s.join("\n"));

タグ

３, CSV, FE, NG, OK, アプリ, インストール, お気, お話, キーワード, コード, これ, コンソール, それ, ドットコム, ブラウザ, モノグサ, ワード, 下準備, 下記, 二, 使用, 先日, 公開, 共有, 分, 効率, 勉強, 半, 単語帳, 収, 収集, 取, 基本, 学習, 情報, 技術者, 方, 方法, 朝, 本題, 画面, 自分, 英単語, 英語, 試験, 話,

文字数カウントは奥が深いよ。日本語より𓅇エジプト😇 #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>

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

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

タグ

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

覚えとくと良いChromeの小技？大技！？

2022.07.06

Logging

おはようございます。お腹すきすぎて目が覚めました・・・。

今日はChromeブラウザの小技を紹介していきます。まずお使いのChromeのバージョンを知りたい場合、アドレスバーに下記のように入力するとバージョンが確認できます。わざわざ、ヘルプから見ないでも詳細な情報が見れます。

chrome://version/

次にChromeタブを閉じずに再起動したいなど、そういう事がある方は下記のURLsをアドレスバーに入力してみてください。すぐに再起動がかかります、また再起動後、タブは保持されたままです。

chrome://restart/

その他、いろいろな機能があります、どんな機能があるのか知りたい場合は下記の情報を入力してみてください。

chrome://chrome-urls/

タグ

Chrome, chrome-urls, restart, URLs, Version, アドレス, いろいろ, お使い, お腹, その他, タブ, バー, バージョン, ブラウザ, ヘルプ, まま, わざわざ, 下記, 事, 今日, 保持, 入力, 再起動, 場合, 大技, 小技, 情報, 方, 機能, 次, 目, 確認, 紹介, 詳細,

マイネオのマイソクプランを使ってみたので感想的な物を残しときます。

2022.06.08

Logging

おはようございます。この頃、iPhoneを買い替えたい欲が高まっています。

今日はタイトル通り、マイネオのマイソクプランを使ってみたので感想的な物を残しときます。マイネオとは格安スマホです。その中に通信量無制限のマイソクというプランが有るのですが、このプラン自分には合わない。お昼の１２時から１３時まで通信制限がかかります。それは契約を変更するときに理解はしていたのですが、実際、使用してみてこれは最悪だと気づきました。

お昼の休憩時間はスマホを操作する機会があります。また、コンビニでお昼ごはんを買う時には電子決済を使用していたのですが、マイソクに変更してからは通信エラーが頻発に起こり使い物にならないです、ブラウザは開けないし最悪としか言いようがないです。

尚、平日の１２時から１３時まで通信制限がかからない、タイプに変更したのだけど来月までマイソクプランで頑張らないといけないらしく正直なところ凹んでいます。

尚、それ以外の時間帯はサクサク通信します。

まとめ、平日の休み時間帯が１２時～１３時以外の方向けです、それ以外の人はマイソクはおすすめしません。32kbpsってかなり最悪です。

タグ

12, 13, iPhone, エラー, お昼, これ, コンビニ, スマホ, ソク, それ, タイトル, タイプ, とき, ところ, ブラウザ, プラン, マイ, マイネオ, 中, 今日, 休憩, 使い物, 使用, 制限, 変更, 契約, 実際, 平日, 感想, 操作, 昼ごはん, 時, 時間, 最悪, 来月, 格安, 機会, 欲, 正直, 決済, 無制限, 物, 理解, 自分, 言いよう, 通信, 電子, 頃, 頻発,

JavaScriptのdocumentがドキュメントな訳。

2022.06.07

Logging

おはようございます。そろそろ梅雨入りなのかもなって。

さて、タイトル通りドキュメントな訳を知りたい方もいると思います、自分も何故、document（資料）なのかなって数秒間考えた結果、インターネットやHTMLの歴史を調べれば分かると思いますが、もともと研究者同士の情報交換（資料共有）に使用されていたのがモノがあるきっかけで注目を浴びた結果、今日では世界中で使用されるようになったのだと考えるとdocumentの意味がわかる。

因みにJavaScript（JS）はプログラミング学習、初学者には最適な言語だと思います、何故ならブラウザの開けるパソコンが一台有れば学習できる言語だからです。尚、JavaScriptを学んでVue.jsなどのフレームワークを学ぶのが定石だと思います。JavaScriptで独自プラグインを作ることが出来ればフレームワークの勉強に進んでも挫折しないと思います。

タグ

document, html, javascript, JS, vue, インターネット, きっかけ, こと, タイトル, ドキュメント, パソコン, ブラウザ, プラグイン, フレームワーク, プログラミング, もの, 一, 世界, 交換, 今日, 使用, 共有, 初学者, 勉強, 同士, 学習, 定石, 情報, 意味, 挫折, 数秒, 方, 最適, 梅雨入り, 歴史, 注目, 研究者, 結果, 自分, 言語, 訳, 資料,

YOUTUBEプレミア一時停止しましたが、YOUTUBEをほぼ広告無しで見る方法。

2021.11.08

Logging

YOUTUBEプレミア一時停止しましたが、YOUTUBE広告無しで見る方法を先日知りまして、その合法的な方法で見ております。その方法とはbraveというブラウザで見ると一切の広告をカットしてくれます。その代わりにbraveの広告がはいるのですが、ほぼ無いみたいなモノなのでとてもストレスフリーなブラウザです。何故、このような事ができるのかといえば、Gさんなどに広告費を代わりに支払ってくれているのでこういう事ができているのだとか。

iosアプリやAndroidアプリも存在するので怪しいソフトではないです。このブレイブブラウザの発案者（開発）はjavascriptの開発者、ブレンダン・アイクなので全然、安全かと思います。そして全ての広告をカットするのではないとwikiには書いているけどほぼカットに近いｗ。

使用し始めてあまり月日が経っていないからなのか、広告はほぼ無いですね。全てをブレイブに委ねるのはちょっと心配なので、自分はYOUTUBE以外はChromeを今も使用中です。

そしてYOUTUBEミュージックの代替えにアマゾンミュージックを使用しています。アマゾンミュージックはプレミア機能だけだとちょっと物足りないけどもサブスクリプションが見直せて良かったと思います。尚、仕事に就き次第、YOUTUBEプレミアはまた始めようかなとは思っているので一時停止にしています。

以上、節約メモでした。

タグ

5, Android, brave, com, dDkE-gzpNM, https, iOS, javascript, ｗ, watch, wiki, www, youtube, アイク, アプリ, カット, ストレスフリー, ソフト, ブラウザ, ブレイブ, プレミア, ブレンダン, もの, 一, 一切, 事, 停止, 先日, 全て, 存在, 安全, 広告, 方法, 発案者, 開発, 開発者,

ブラウザに画像をドロップして表示させる部分的な処理（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, アクセス, かなり, コード, こちら, こと, これ, これら, サーバー, サービス, ソース, デバッグ, ドロップ, ネタ, ブラウザ, ブログ, 保存, 充電, 全体, 処理, 完成, 少し, 更新, 本日, 機能, 毎日, 画像, 紹介, 表示, 記事,

遅いぐらいだけどES2015(ES6)が使い出せそう。js(java script)の話。

2021.09.30

Logging

今日は清々しい朝ですね、久しぶりに高知県、晴れましたね。

さて、遅いぐらいだけどES2015(ES6)が使い出せそう。js(java script)の話。田舎では古いブラウザを使用している人が、いたりしてIE（インターネットエクスプローラー）をたまに使用している。だけど今回、 WindowsがWindows11にアップグレードされる事により、IEは廃止されるので堂々とES2015(ES6)以降の技術が使用できるようになる。これで現場は結構、自由に動けるようになるとおもいます。

それぐらいIEは一昔前のものだと思っています・・・。さらばIE！！

ES6ではやっとclassが使用できるようになっているので開発者としては、とても便利ですよ。今までfunctionで書いていたものをclassで置き換えたいぐらいです！！因みにclassの中の関数にはfunctionと記載すると動かないので関数名だけを記載しましょう・・・。

また、ES6対応のブラウザ一覧表はこちらから参照してください。
http://kangax.github.io/compat-table/es6/

最後にサンプルとしてコードを記載します。
https://zip358.com/tool/demo42/

class main{
    constructor(foo){
        this.name = foo;
    }
    view() {
      document.getElementById("demo42").innerHTML  =  this.name;
    }
}
const m = new main("ES6");
m.view();

タグ

11, 2015, 6, 7, 8, class, com, ES, function, https, IE, java, JS, L-, script, T-HGdc, watch, Windows, www, youtube, アップ, インターネット, エクスプローラー, グレード, これ, それぐらい, たま, ブラウザ, もの, 一, 久しぶり, 事, 人, 今回, 今日, 以降, 使用, 便利, 廃止, 技術, 昔, 朝, 現場, 田舎, 自由, 話, 開発者, 高知県,

windows11のアップグレードされるまであともう少し?

2021.09.27

Logging

今日は朝、ヤシイパークまで自転車で行ってきました、行き帰りで結構な消費カロリーになるらしいですけど未だにあと10kgの体重が落ちません。今年中にはマイナス5kg落としたいなと思っています。

さて、話変わりまして10月の前半にはwindows10がwindows11へ条件を満たしていればアップグレードされます、因みに自分は条件を満たしているのでアップグレード対象者です。なんだかWindows11ってあのvistaに近い雰囲気がありますよね。今回のアップグレード、成功するかのかなぁ・・・。エンジニアが受けなくても一般ユーザーから好評だったら問題なく浸透するでしょうね。

アップグレードするとブラウザの変更が難しくなるとか言われています。初期設定で選択したブラウザから他のブラウザへ変更できないとか言われていますが、独禁法に接触すると思うので早々に変更できるようになるでしょう。なのでそういう面はあまり気にしていないのだけど、やはりGUI（グラフィックユーザーインターフェース）が大きく変わるとなれるまで時間がかかる気がします。

開発者としてはウィジェットが復活するらしいので、そこらへんは良いかなと思いますし、Androidアプリとかも仮想上で動かせるようになるのだとかで、そこらへんも良いかと思います。windows10でもアプリをインストールすれば仮想上で動かせるですけどね。

本当にあともう少し無償アップグレードが走ってwindows10とおさらばすることになるだなぁと思うと自分は複雑な気分になります。皆さんはどうですか?

タグ

10, 11, 5, kg, vista, Windows, アップ, エンジニア, カロリー, グレード, ブラウザ, マイナス, ヤシイパーク, ユーザー, 一般, 今回, 今年, 今日, 他, 体重, 初期, 前半, 変更, 好評, 対象者, 成功, 接触, 朝, 未だ, 条件, 気, 浸透, 消費, 独禁法, 結構, 自分, 自転車, 行き帰り, 設定, 話, 選択, 雰囲気, 面,

C#でwebview2を使用して情報を収集するためのサンプルコード。

2021.08.22

Logging

今日は日曜日ですね。先日は久しぶりにお天気になったので外へ出ていっておりました。これを投稿する日は晴れているでしょうか。

さてjavaを勉強している合間にC#も勉強しております。javaを勉強しているとC#に応用が効くのでとてもやりやすいですね。webview2というオブジェクトをインストールして使用しました、VC#2019で開発しているのですが既存のwebBrowserというオブジェクトは全然というほど役に立ちません。例えばYahooのトップページを開いたらjavascriptエラーのアラートが表示されたりして動作してくれません。おそらくwebBrowserというオブジェクトを使用して何か開発している人はあまりいないじゃないかなと思います。

今回、作成したサンプルコードはYahoo!ニュースのITニュースのタイトルとリンクを収集するものですが、この方法を応用してブラウザの作業を自動化することはそれ程難しくないと思っています。

サンプルコードの一部を記載します＝ボタンをクリックする場所に埋め込んだソースコードになります。因みにawaitを使用しているのでボタンクリックにはasyncしてあげる必要があります。

※注意事項としてYahoo!ニュースのソースコードが変わればそれに対応したコードを記載する必要があります。

PM> Install-Package Microsoft.Web.WebView2 -Version 1.0.902.49

        async private void button1_Click(object sender, EventArgs e)
        {

         var result = await webView21.ExecuteScriptAsync(
                "(()=>{let obj = document.querySelectorAll(\"#uamods-topics > div > div > div > ul > li > a\");" +
                "let str = \"\";" +
                "for (let i = 0; i < obj.length; i++)" +
                "{" +
                "str += obj[i].innerText + \"[\" + obj[i].href + \"],\";" +
                "}" +
                "return str;" +
                "})();"
             );
            richTextBox1.Text = result.Replace(",","\n").Replace("\"","");
        }

タグ

2, 2019, IT, java, javascript, VC++, webBrowser, webview, Yahoo, アラート, インストール, エラー, オブジェクト, コード, こと, これ, サンプル, タイトル, ため, ドップ, ニュース, ブラウザ, ページ, もの, リンク, 久しぶり, 人, 今回, 今日, 作成, 作業, 使用, 先日, 勉強, 動作, 収集, 合間, 外, 天気, 役, 応用, 情報, 投稿, 方法, 既存, 日, 日曜日, 自動, 表示, 開発,

radiko[ラジコ]のWindowsアプリがないので作りました。

2021.03.24

Logging

昔、ラジコのWindowsアプリが存在していたのだけど今は使えなくなっていたのでradiko[ラジコ]のWindowsアプリを作りました。簡単な仕様です・・・とても簡単で単なるwebブラウザをはめ込むようにしているだけです。なのでこのページからリンクを辿れば別のサイトに移動することができます。何故、これを作ったのかというとブラウザとは別にアプリとして開きたかったという経緯があります。動作環境はwindows10です。

使用したい方は下記のURLからダウンロードしてくださいませ。

https://zip358.com/tool/radiko-view-Setup-1.0.0.zip

タグ

1.0.0, 10, 358, com, https, Radiko, radiko-view-Setup-, tool, url, web, Windows, www, zip, アプリ, こと, これ, サイト, ダウンロード, ブラウザ, ページ, ラジコ, リンク, 下記, 今, 仕様, 使用, 別, 動作, 存在, 方, 昔, 環境, 移動, 簡単, 経緯,

お気をつけて。

2021.02.28

Logging

zip358で検索するとzip358.comが終了しましたというサイトが何件か表示されますが、それをクリックするとweb attackでブラウザの脆弱性よりパソコンに侵入しようとしますのでお気をつけてください。なので、zip358.comとアドレスバー（URLバー）に入力することを強くオススメします。

ちなみにzip358.comが閉鎖するとか考えていないし、アメーバブログとかに移行するつもりもないです。グーグルやyahoo検索でも普通のサイトが標的になるということがあるので、必ずパソコンにはウィルススキャンのソフトを導入することをおすすめします。例えばノートンというソフトやウィルスバスターとかですかね。自分が思うにノートンは結構優秀なソフトだと思います。

たまに自分の作ったexeソフトもウィルスと間違って削除されることもありますが・・・。

という事で、くれぐれもお気をつけてください。

タグ

358, attack, com, exe, url, web, Yahoo, zip, アドレス, アメーバ, ウィルス, ウィルスバスター, おすすめ, お気, グーグル, クリック, くれぐれ, こと, サイト, スキャン, ソフト, それ, たま, つもり, ノートン, バー, パソコン, ブラウザ, ブログ, 事, 何件, 侵入, 優秀, 入力, 削除, 導入, 普通, 検索, 標的, 移行, 終了, 脆弱性, 自分, 表示, 閉鎖,

マウスの動きをトラッキング（追跡）する。

2020.11.17

Logging

サイトのマウスの動きをトラッキングして行動パターンを知りたいという案件がクラウドでありました。応募はしていませんが考え方はこのような感じだと思います。ただ楽天サイトだという制約があったのでクロスサイトへ接続可能なのかはわからないけれど…ね?。

考え方のソースコードとdemoサイトのリンクを貼っときます、因みにIPを取れるJSライブラリもあるみたいなので、それを使用すると案件の内容が完結すると思います。
尚、PHPで再度、返却していますが、実際トラッキングする場合はPHP側でJSから送ったデータを保存処理を行う処理とクライアントが開いている状態のページの画面をキャプチャする機能などが必要になるかと思われます。そういう処理をPHP側で行わないといけないので、実際はJS側ではマウスのトラッキングとクライアントがブラウザで開いた画面サイズもPHP側に送信する必要はあるかなと。そういう事をPHP側に追加すれば良いのかと・・・感じました。

Demo22:: https://zip358.com/tool/demo22/

window.onload = function(){
	document.body.addEventListener("mousemove",(e)=>{
		var timeInMs = Date.now();
		document.querySelector("#log").innerHTML = navigator.userAgent + "<br>" + "x=" + e.offsetX  + "y=" + e.offsetY;
		var data = {timeInMs:timeInMs,userAgent:navigator.userAgent,x:e.offsetX,y:e.offsetY};
		move_xy(data).then(function(response){
			console.log(response);
		});
		
	});
};

async function move_xy(data){
	return await new Promise(function(resolve) {$.ajax({
		type: "POST",
		dataType: "json",
		url: "./move_xy.php",
		data: data,
		success: function (response) {
			if(response.res==="ok"){
				
				resolve(response);
			}
			resolve(false);
		},
		error:function(XMLHttpRequest, textStatus, errorThrown){
			resolve(false);
		}
	});});
}

<?php
$obj["timeInMs"] = $_POST["timeInMs"];
$obj["userAgent"] = $_POST["userAgent"];
$obj["x"] = $_POST["x"];
$obj["y"] = $_POST["y"];
$obj["res"] = "ok";

print json_encode($obj);

タグ

demo, IP, JS, php, あるかな, キャプチャ, クライアント, クラウド, クロス, コード, サイズ, サイト, ソース, それ, データ, トラッキング, パターン, ブラウザ, ページ, マウス, ライブラリ, リンク, 事, 使用, 保存, 側, 内容, 再度, 処理, 制約, 可能, 場合, 完結, 実際, 必要, 応募, 感じ, 接続, 案件, 楽天, 機能, 状態, 画面, 考え方, 行動, 返却, 追加, 追跡, 送信,

Chromeリモートデスクトップを触ってみた。

2020.10.20

Logging

Chromeリモートデスクトップを使ってみて、やはり遅延あるなと感じます（発生）が、WINDOWSからMacの操作とかも出来るので便利ですが、遠隔操作でプログラミングなどをゴリゴリするには不向きです。操作に困っているお客さんに操作の方法を教えるなどには使用できそうです。あと何かトラブルがあったときにブラウザから確認できるなどには向いてそうです。

使用するにはグーグルのGメールのアカウントが必要になります。まずはこちらからアクセスくださいませ。

https://remotedesktop.google.com/home

使い方は上記の動画を参照ください。動画を見たら大体の人はわかるかなと思いますので、この記事には操作方法の手順は割愛させてもらいます。パソコンが２台あるかたは試すと操作感覚がわかるかと思います、因みにスマホやタブレットでも操作が可能です。

タグ

2, Chrome, Mac, Windows, アカウント, アクセス, お客さん, ガタ, グーグル, こちら, スマホ, タブレット, デスクトップ, とき, トラブル, パソコン, ブラウザ, プログラミング, メール, リモート, 上記, 不向き, 人, 使い方, 使用, 便利, 割愛, 動画, 参照, 可能, 大体, 必要, 感覚, 手順, 操作, 方法, 発生, 確認, 記事, 遅延, 遠隔操作,

おつりアルゴリズム番外編。

2020.07.10

Logging

おつりアルゴリズムのアクセスがまぁまぁ好評なので番外編を記載します。硬貨や紙幣の制限がない場合、単なるこれだけのアルゴリズムで動作させることが可能です。尚、自動販売機などは硬貨の枚数なども計算しておつりを算出しているだろうと思います。因みにこのアルゴリズムに硬貨の枚数などのアルゴリズムを追加することにより比較的に簡単に導入できるかと思います。

デモ21としてリンクを載せときます、実際に使用してみて勘どころを掴んでください。なお、このコードはHTMLとJSで動させています。PHPなどは使用していません。ジャバスクリプト（JavaScript）で結構いろいろなことを処理することが可能だと感じますね。WEBでなにか勉強しようと考えている場合、JS（ジャバスクリプト）は必須であり、ブラウザさえあれば普通に動くのでお勧めな言語かなと思います。

ソースコードは下記になります。https://zip358.com/tool/demo21/

document.getElementById("money").addEventListener("input",function(){
	var money = document.getElementById("money").value;
	var change = {
		calc1:{yen:10000,change:0,str1:"紙幣",str2:"枚"},
		calc2:{yen:5000,change:0,str1:"紙幣",str2:"枚"},
		// calc33:{yen:2000,change:0,str:"紙幣",str2:"枚"},
		calc3:{yen:1000,change:0,str1:"紙幣",str2:"枚"},
		calc4:{yen:500,change:0,str1:"硬貨",str2:"個"},
		calc5:{yen:100,change:0,str1:"硬貨",str2:"個"},
		calc6:{yen:50,change:0,str1:"硬貨",str2:"個"},
		calc7:{yen:10,change:0,str1:"硬貨",str2:"個"},
		calc8:{yen:5,change:0,str1:"硬貨",str2:"個"},
		calc9:{yen:1,change:0,str1:"硬貨",str2:"個"}
	};
	money = money.replace(/[,|，]/g,"");
	if(money.match(/[0-9]{1,}/g)){
		for (const key in change) {
			if (change.hasOwnProperty(key)) {
				const obj = change[key];
				change[key].change  = Math.floor(money / obj.yen);
				money = money % obj.yen;
			}
		}
		var anser = function() {
			var str = "";
			for (const key in change) {
				if (change.hasOwnProperty(key)) {
					const obj = change[key];
					if(obj.change){
						str+= obj.yen + "円、" + obj.str1 + "が" + obj.change + obj.str2 + "<br>";
					}
				}
			}
			return str;
		};
		document.getElementById("change_print").innerHTML = anser();
	}else{
		document.getElementById("change_print").innerHTML = "入力が不適切です！";
	}
});

タグ

21, document, getElementById, html, javascript, JS, php, quot, web, アクセス, アルゴリズム, いろいろ, おつり, お勧め, コード, こと, これだけ, ジャバ, スクリプト, ソース, デモ, ブラウザ, リンク, 下記, 使用, 処理, 制限, 勉強, 動, 動作, 勘どころ, 可能, 場合, 好評, 実際, 導入, 必須, 普通, 枚数, 番外編, 硬貨, 算出, 簡単, 紙幣, 自動販売機, 言語, 計算, 記載, 追加,

JavaScriptを再勉強しているのだが、ある疑惑が！？

2020.06.03

Logging

JavaScriptを再勉強しているのだが、ある疑惑が生まれた。それはjqueryで良いじゃねぇという疑惑。自分はjsよりjqueryの方が使いやすく感じる。まぁいまの所なのかもしれないが・・・使いやすいですね。

jqueryはいろいろなブラウザ上で動くことをサポートしてくれるライブラリとして普及したのだけど、IEが消滅時効状態のいまではシェア率は下がっていてネイティブJSが良いじゃねぇという動きですが・・・。いやいやjqueryの方が楽だしコードはあまり書かなくて良い。特にイベント処理時のデータの複数受け渡しでは、今の所、JavaScriptよりjqueryの方が楽だと思います。

あと非同期通信とかもね。ajaxで良いじゃねぇとか思いますよ。
最後に動画のJSコードを載せときますね。

document.getElementById("my-textarea").addEventListener("input",()=>{
	document.getElementById("view").innerText = document.getElementById("my-textarea").value;
});

タグ

addEv, ajax, document, getElementById, IE, javascript, jquery, JS, my-textarea, quot, イベント, いま, いやいや, いろいろ, コード, こと, サポート, シェア, それ, データ, ネイティブ, ブラウザ, ライブラリ, 今, 処理, 勉強, 動画, 同期, 所, 方, 時効, 普及, 最後, 消滅, 状態, 疑惑, 自分, 複数, 通信,