@Blog
日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。
CSSだけで3Dボックス（箱）が作れるようにいつの間にかなっていた.自動回転！？
2025.04.16
おはようございます.CSSだけで3Dボックス（箱）が作れるようにいつの間にかなっていた話を書いていきます.生成AIにCSSだけで3Dボックス（箱）を作ってと指示を行ったら自動回転してくれるものを出力してくれて驚愕している.
CSSだけで3Dボックスが作れることは知っていたのだけど、自動回転はJSを使用しないと無理だろうと思っていたので、実際生成AIが出力されたのを見て驚きでした.こんな感じで旧の知識を生成AIはアップデートしてくれるのには、凄く良いと思っています.
ただ、質問して実際動かないものも出力されるので要は使う側もそれなりに知識を持っていないと嘘を信じてしまうことにもなるので、生成AIを使う側も最低限の知識は必要になると思っています.
因みにソースコードは下記になります.これをテキストファイルに保存して拡張子をhtmlに変えた後に、そのファイルをブラウザにドロップすると表示されます.
明日へ続く
デモページ：https://zip358.com/tool/demo96/
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>3D Box</title>
<style>
body {
margin: 0;
background: #111;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
}
.scene {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
animation: rotate 10s infinite linear;
}
.face {
position: absolute;
width: 200px;
height: 200px;
background: rgba(0, 150, 255, 0.7);
border: 2px solid #fff;
}
.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
@keyframes rotate {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(360deg) rotateY(360deg); }
}
</style>
</head>
<body>
<div class="scene">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</body>
</html>
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
ソースコード, テキストファイル, デモページ, ファイル, ブラウザ, ボックス, 下記, 側, 嘘, 実際, 実際生成, 感じ, 拡張子, 指示, 旧, 最低限, 生成, 知識, 箱, 自動回転は,
VScodeでMCPを試してみました.#playwright-mcp
2025.04.11
おはようございます.IT界隈で流行っているMCPやってみたを自分も試してみました.今回、試したのはplaywright-mcpです.テキスト指示だけでブラウザを開きYahooページに行き、ITニュースを参照してと指示するとITニュースを開いてくれる.
当然、指示だけでログインなんかも出来てしまいます.何気に便利そうでしたがポップアップ画面に文字を入力して投稿なんてのは出来ない感じでしたね.そしてクリックしてという指示は出来るものの「続行」というボタンをこちらでクリックしないといけないので、これでは本末転倒だなって思いました.
そもそもそういう用途に使用するために作られたMCPではないのでしょうが無いですけどね.今回、参考にした記事は下記になります.
https://zenn.dev/dotdtech_blog/articles/9250aa8303a72f
尚、手順通りでは上手くsettings.jsonが開けなかった感じでしたね.これで開く事が出来ます.ctrl+pと押して下記を入力.
>settings.json尚、MCPを有効にするにはブラウザのアドレスバーに下記を入力してください.
vscode://settings/chat.agent.enabled後は上記のリンク通りに設定してchatをエージェントに切り替えて実行すれば出来ます.
明日へ続く
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
アドレスバー, エージェント, テキスト指示, ニュース, ブラウザ, ボタン, ポップアップ画面, リンク通り, ログイン, 上記, 下記, 入力, 参考, 手順通り, 投稿, 指示, 文字, 用途, 界隈, 続行,
地声ベースのAI音声合成モデルを再度構築しました話.たぶん似てる.
2025.01.04
おはようございます.地声ベースのAI音声合成モデルを再度構築しました話を書いていきます.まず地声ベースモデルを作る場合.自分の音声を録音しwavなどファイルにします.それが出来ない環境では音声モデルを作ることは難しいです.それが出来たらstyle-bert-vits2をGitHubから落としてきて、ブランチをdevに切り替えておきます.Windowsの場合、app.batを起動します.前提条件としてPythonがインストールされていることとgitがインストールされた環境であることです.
app.batを起動するとターミナルがターミナル立ち上がり次に任意のブラウザが開くことでしょう.ターミナルは閉じずにブラウザ画面のTOPにタブがあるので左から右へタスクをこなしていくと地声ベースの音声合成モデルが生成されます.
音声合成モデルが生成された後にstyle-bert-vits2内でターミナルを開き下記のコマンドを叩きます.
python convert_onnx.py --model model_assets\モデル名叩く処理が実行されonnxファイルがモデルフォルダに作られます.
作られたファイルをaivm-generator.aivis-project.comサイトにてコンバートします.コンバートするとAIVM / AIVMX ファイルがダウンロードされます.最後にダウンロードされたファイルをAivisSpeechアプリに取り込めば完了です.
で、こちらが地声ベースの音声合成モデルで今回の記事を読み上げている音源になります.
明日へ続く
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
コマンド, ターミナル, ターミナル立ち上がり次, タブ, ファイル, ブラウザ, ブラウザ画面, モデルフォルダ, 内, 再度, 前提条件, 右, 地声ベース, 地声ベースモデル, 左, 最後, 音声, 音声モデル, 音声合成モデル, 音源,
証明写真リサイズツールという物を作りました．お裾分けです
2024.12.03
おはようございます．証明写真リサイズツールという物を作りましたのでお裾分けです．この季節ぐらいから学生さんは就職活動とか冬休みや春休みのバイトなどにデジタル履歴書に貼る顔写真が必要になるのではと思ったのが、これを作った経緯です．
この証明写真リサイズツールはサーバー上にデータを残していないのでとても安全です．ユーザーさん側で動くJavascriptの力だけで構築したものになります．
そういう訳で多くの方に使用して頂ければ独立したドメインで再構築しようと思っています．
また、証明写真リサイズツールのソースコードを知りたいという方はブラウザの検証から調べてみてください．すべてJavaScriptでコードが書かれていることが理解出来ると思います．
最後にリンクを貼っときます．
https://zip358.com/tool/Passport-Photo-Resizer
明日へ続く
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
AivisSpeech用の自分の声ベースモデルを作ろうとしてStyle-Bert-VITS2
2024.11.28
おはようございます．AivisSpeech用の自分の声ベースモデルを作ろうとしてStyle-Bert-VITS2を頑張る．事前に自分の声を12本録音してた奴をOpenAIが提供しているopenai-whisperで文字起こしを行いました．そのデータを元にStyle-Bert-VITS2の配下にあるTrain.batを叩くとブラウザが立ち上がる．何処にデータセットを置かないいけないかなども記載されている．
その場所にデータを配置します．配置後、上から順番に実行していけば学習モデルが生成されます、生成されたモデルをONNX形式に変換しその後aivmx形式しないとAivisSpeechでは使用できないらしい．変換コマンドはこちら、やり方はこの方が記載されているので参照ください．
git checkout dev
pip install onnx
pip install onnxsim
pip install accelerate
python convert_onnx.py --model 【SVBS2のモデルフォルダ】onnxに変換後、AivisSpeechの公式サイトのコンバーターサイトで変換するとaivmx形式が落ちてきます（ダウンロード）．それをAivisSpeechアプリの設定から読み取ればOK！
結構長い手順ですが、これで自分の声の音声合成が出来ます．それで作ったのがこの音源です、雑音が入っているのはセミがなく中で録音した音声を学習させたからこんな感じになっています．
追伸：雑音を除去しました．下記は雑音を除去したものになります．
明日へ続く
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
コンバーターサイト, セミ, ダウンロード, ブラウザ, モデルフォルダ, 事前, 何処, 変換コマンド, 奴, 学習モデル, 形式, 本録音, 追伸, 配下, 長い手順, 雑音, 音声, 音声合成, 音源, 順番,
画像の軽量化．webpにしてみたら普通に軽いみたいですね．
2024.11.19
おはようございます．先日の休みの日に前から気になっていた画像の表示速度を改善したくてwebpという画像圧縮を採用しました．webpに関しては数年前に一度記事にはしていたのですが、その当時はブラウザの方が対応していなくて途中でもとに戻したような気がします．
今回はwebpを採用してこのまま運用していこうと思っています．過去の画像も一括でwebpにしました、それと同時に今までTopに配置していた動画も除けました．
ちょっと物足りない感じはしますが、表示速度を速くしてモバイルファーストに近づけていこうと思います．尚、webpにするためにewwwというプラグインを導入しています．
導入して上手く表示がwebpに変換されたかなと思ったら上手く変換されなかったので、自作のプラグインを作り力技でwebpに変換した形になります（画像はWebpに変換されましたがコードを見るとそのままだったので）．
明日へ続く
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
ewww, TOP, webp, コード, ブラウザ, プラグイン, もと, モバイルファースト, 一括, 休み, 作り力技, 形, 気, 物足りない感じ, 画像圧縮, 自作, 表示速度, 途中, 過去,
Push通知ってブラウザ閉じても通知出来る様に出来るのか？
2024.11.04
おはようございます．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
タグ
```, サービス, サービスワーカー, サービス機能, ソースコード, ブラウザ, ララベル, リアルタイム通知, 一部, 下記, 動作, 恥, 拡張, 有料, 機能, 無料, 無料枠, 答え, 通知,
Let’s encryptのSSLを適応してもブラウザ等で閲覧するとブロックされるかも．
2024.10.31
おはようございます．Let’s encryptのSSLを適応してもブラウザ等で閲覧するとブロックされるかも．．2024年10月31日以降に発行されるOCSPはブロックするとGさんから通告があった．
https://gigazine.net/news/20240724-letsencrypt-ocsp
OCSPは、ユーザーがウェブサイトにアクセスする際、証明書の有効性をリアルタイムで確認するプロトコルですが、プライバシーリスクや運用コストの問題が指摘されています。一方、CRLは失効した証明書の一覧を提供する方式で、プライバシー保護や運用の簡素化に寄与します。Let’s Encryptは、OCSPに依存しているユーザーに対し、早急にCRLへの移行を検討するよう推奨しています。
トイウコトデ、普通に大丈夫そうです．
明日へ続く
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
CRL, Gさん, Let's encrypt, OCSP, SSL, ウェブサイト, トイウコトデ, プライバシーリスク, ブラウザ, プロトコル, ユーザー, リアルタイム, 方式, 移行, 簡素化, 証明書, 通告, 運用, 運用コスト,
記事音声読み上げ機能追加しました．Chromeブラウザで読み上げ可能
2024.08.01
おはようございます．記事音声読み上げ機能追加しました．Chromeブラウザで読み上げ可能です、その他のブラウザでも比較的に簡単に導入できます．たまに読み上げが変なときがあるけれど、大体の読み上げは正確に読み上げが出来ていると思います．
音声読み上げはブラウザに標準搭載されているAPIになるのかな、それを呼び出して使っているだけです．誰でも原理を知っていれば使用できます、駆け出しのプログラマーでも作れるぐらい簡単です．
クラスを呼び出してそこに読み上げてほしいテキストデータを渡してあげればよいだけなんですから．具体的にはSpeechSynthesisUtteranceというものを呼び出すだけです．使用方法はQiitaなどに記載しているのを参考にしてみてください．
自分でも音声読み上げを使ってみたのだけど結構良いなという印象です．ながら作業しながら記事の読み返し行うことも可能です．ただ、音声が合成音声なのが若干聞き取りにくいかもしれないですね、そこはこれからAIなどが補っていく事になりそうだなって思います．
明日へ続く．
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
AI, API, chromeブラウザ, qiita, SpeechSynthesisUtterance, クラス, その他, ブラウザ, プログラマー, ほしいテキストデータ, 使用方法, 印象, 原理, 参考, 合成音声, 標準, 自分, 若干聞き取り, 記事音声, 音声,
サードパーティCookieが原因でアマゾンが毎回ログアウトする．
2024.06.09
おはようございます．サードパーティCookieが原因でアマゾンが毎回ログアウトします．毎回ログインしないといけなくなった人に対処方法を記載します．原因はKeepa – Amazon Price Trackerのトラッキングが原因になります．この拡張機能をChrome系に入れていると強制ログアウトが走る．
ブラウザ（Chrome）の設定からプライバシーとセキュリティーに進み．サードパーティCookieの使用が許可されているサイトに下記の画像のように設定します．
![[*.]amazon.co.jp](https://zip358.com/wp-content/uploads/2024/06/image.png)
次にChromeの拡張機能設定へ進み、Keepaの詳細からサイトへのアクセスをご自身のamazonの国ドメインだけにすることで対応可能です．
これでパソコンを再起動したり終了から起動やスリープ時にアマゾンだけがログアウトされている問題から解放されますと言いたい所だけど、これでも発生する場合はKeepaの拡張機能を削除するしか無いかもです．
明日へ続く．
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
Amazon, Amazon Price Tracker, Chrome, Chrome系, Keepa, アマゾン, サードパーティCookie, スリープ時, セキュリティー, トラッキング, パソコン, プライバシー, ブラウザ, 再起動, 国ドメイン, 強制ログアウト, 拡張機能, 拡張機能設定, 毎回, 起動,
Gドライブの復元をぽちぽちするのが面倒なので。
2023.12.16
おはようございます、Gドライブの復元をぽちぽちするのが面倒なのでPower automateを使用して自動化しました。マウスの座標値は任意で変更して、繰り返す条件は1回にしているけどお好みで変更すればブラウザをぽちぽちクリックして復元してくるボットの出来上がり。
ミソは二番目のマウスのクリックの設定です。こんな感じにしないと復元が表示されないままクリックすることになり失敗するので、大事にな設定ポイントになります。これで自分は3000ファイルを復元しましたが、JSのバッチじゃないので半日程度自動ボットを動かした感じになります。とほほ…。
明日へ続く。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
3000ファイル, Gドライブ, JS, Power automate, お好み, クリック, バッチ, ブラウザ, ボット, マウス, ミゾ, 二番目, 半日程度自動ボット, 座標値, 復元, 感じ, 条件, 自分, 設定, 設定ポイント,
スマホでも動画再生させる方法。
2023.10.16
おはよう御座います、スマホでも動画再生させる方法を記載しますね。このコードをvideoタグに入れるとスマホでも動画が再生されるようです。iPhoneのSafariとchromeで動作確認済。最新のブラウザではスマホでも動画再生されるようです。
<video autoplay preload="none" loop="loop" muted="muted" playsinline=""上記のコードで大事になるのが「playsinline」という所、この記述がなければスマホでは動画が再生されません。ググってもなかなかこのコードにたどり着くことが出来なかった。昔はスマホで動画が再生され無かったのですが、いまの最新のブラウザではスマホでも動画が再生出来るようになっているので、これは良い感じだなぁと思います。なお、ミュートとかオートプレイも大事だということも付け加えて置きます👍。
因みに一昔前だとサーバーサイドでストリーミング再生でとかしていたと思いますが、この手法が使えるようになってからは、かなり低予算で対応出来るようになったのではないかなって個人的には思いました。
明日へ続く😌
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
Chrome, iPhone, loop, lt;video autoplay preload, muted, muted", none", playsinline, quot, quot;loop", Safari, videoタグ, オートプレイ, サーバーサイド, ストリーミング再生, ブラウザ, ミュート, 一昔前, 手法, 記述,
JavaScriptでWebstorage使ってますか？🤔 #webstorage #javascript #cookie
2022.12.04
おはようございます。二日酔いです、遅めの更新🍃。
今日は今までフロントエンド側で使用していたcookieの処理コードをwebstorageに置き換えた理由と使い方のコードを記載します、JSでCookieを取り出すコードを書く場合、バニラコードで書くかライブラリを使用して書くかだと思います。自分は前者で、とにかくCookieで保存したものを取り出すのに無駄にコードを書いていましたので、そろそろコードを直そうと思ってwebstorageを採用しました。
webstorageを採用した理由は自分が保管するデータはそれ程、容量を食わないしローカル保存（ブラウザ側保存）で十分な情報だったのでwebstorageを採用しました。そして何より、もう殆どのブラウザで使用できるようになっただろうという考えの元、コードを改修しました。
今まで情報の呼び出しするのに数行書いていたものが、１行のコードで参照できるというのは本当に素晴らしいことです💯。
呼び出すコードはこちら
localStorage.getItem("bgcolor_code")値を保存するコードはこちら
localStorage.setItem("bgcolor_code",color)その他に削除やクリアするコードやSessionで保存するコード等も存在します、もし詳しく知りたい場合は上記のTwitterのリンクを辿ると情報にたどり着くはずです。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
COOKIE, javascript, JS, webstorage, エンド, コード, データ, バニラ, ブラウザ, フロント, もの, ライブラリ, ローカル, 二日酔い, 今日, 使い方, 使用, 保存, 保管, 元, 処理, 前者, 場合, 容量, 情報, 採用, 改修, 更新, 殆ど, 無駄, 理由, 自分, 記載,
Chromeブラウザの拡張機能を新たに作ったお話。 #拡張機能
2022.11.22
おはようございます、転職活動はあまりしていません😯。
本当なら就職出来ている頃だと思います。なぜならハローワークだけで活動しているので、他のスカウトは無視しているという変な転職活動をしています。今年欲しいという求人は人手不足な会社かなと思いますし、年末押し迫って転職できるとはとても思い難いです。頑張っている事は確かですが、今は難しいという思いもあります。
そんな中で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)
});
});
}
});
追伸：公開されました。拡張機能はこちら👉
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
Chrome, IT, エンジニア, お話, コード, サイト, スカウト, ドキュメント, ハローワーク, ブラウザ, リファレンス, 不安, 中, 事, 人, 人手, 人様, 今, 今年, 他, 会社, 使用, 変, 少し, 就職, 年末, 拡張, 時, 本当, 検索, 機能, 求人, 活動, 無視, 申請, 皆さん, 自作, 自分, 訳, 転職, 頃,
Manifest V3、ブラウザ拡張機能のアレに対応した解説動画。
2022.11.02
おはようございます、カサカサ肌には大変な季節です🫠。
今日はManifest V3、ブラウザ拡張機能（Chrome拡張）のアレに対応した解説動画がありましたのでご紹介します。こちらの動画で基本は分かる感じになっています。いつまで掲載されるかわからないので、リンクだけ貼っときます。こちらになります。
尚、マニフェストの書き方だけがV3になってから変わっただけではないので、そこの所が注意しないといけない所です。自分もグーグルクロームに拡張機能を公開していたので、そちらの使用されている拡張機能は修正しました。
今、自分用に作っているV3のマニフェストの書き方だけ載せときますね。
{
"name": "lancers footpoints",
"version": "1.0.0",
"manifest_version": 3,
"description": "ランサーズ。",
"permissions": [
"tabs",
"scripting"
],
"action": {
"default_icon": "icon20221101.png"
},
"background": {
"service_worker": "src/background.js"
},
"content_scripts": [
{
"matches": [
"https://www.lancers.jp/work/search*"
],
"css":["src/style.css"]
}
]
}あと、backgroundとcontent_scriptsの送受信の関係などが記載されているサイトを見つけたので、そちらもリンクを貼っときます、こちらのページになります。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
1.0.0, ３, Chrome, footpoints, Lancers, Manifest, name, quot, Version, アレ, いつ, グーグル, クローム, こちら, ご紹介, そこ, そちら, ブラウザ, マニフェスト, リンク, 今, 今日, 使用, 修正, 公開, 動画, 基本, 大変, 季節, 対応, 感じ, 所, 拡張, 掲載, 書き方, 機能, 注意, 肌, 自分, 解説,
基本情報技術者試験ワード集と単語帳作りアプリで学習の下準備をする方法！ #FE #英語 #効率
2022.10.06
おはようございます、朝、３時半頃から起きています😪。
先日から英語の勉強をアプリではじめました、自分が使用しているのはモノグサというアプリです。このアプリをインストールしたのは二年前の話です、そのアプリを使用して効率良く英単語を覚えていってます、なんかよく分からないけど覚えて行けている🙄。
さて、それとは別に本題のお話です、単語帳作りアプリを使って基本情報技術者試験に出てくるワードを再学習しています。ワードの方は基本情報技術者試験ドットコムから引っ張ってきています、そのワードを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"));
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
３, CSV, FE, NG, OK, アプリ, インストール, お気, お話, キーワード, コード, これ, コンソール, それ, ドットコム, ブラウザ, モノグサ, ワード, 下準備, 下記, 二, 使用, 先日, 公開, 共有, 分, 効率, 勉強, 半, 単語帳, 収, 収集, 取, 基本, 学習, 情報, 技術者, 方, 方法, 朝, 本題, 画面, 自分, 英単語, 英語, 試験, 話,
文字数カウントは奥が深いよ。日本語より𓅇エジプト😇 #javascript #code #プログラミング #unicode
2022.10.05
おはようございます、先日（日曜日のこと）は久しぶりに本屋さん巡りしていました😋。本屋📖は良いですね落ち着きます。
さて、文字コードのカウントは奥が深いなって話を記載していきます。人目線からすれば文字をカウントするという至って簡単な話にですが、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バイトで表現しているとか習っていたのですが、それはカナリ古い知識だったみたいです😇。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
8, Chrome, Code, EUC, javascript, PC, Unicode, UTF-, WindowsOS, エジプト, カウント, コード, こと, コピペ, コンピューター, サンプル, ツイッター, ブラウザ, プログラミング, 久しぶり, 人目, 使用, 先日, 動作, 変, 奥, 対応, 数, 文字, 日曜日, 日本語, 本屋, 本当, 検証, 漢字, 環境, 用, 簡単, 記載, 話, 象形, 面倒,
覚えとくと良いChromeの小技？大技！？
2022.07.06
おはようございます。お腹すきすぎて目が覚めました・・・。
今日はChromeブラウザの小技を紹介していきます。まずお使いのChromeのバージョンを知りたい場合、アドレスバーに下記のように入力するとバージョンが確認できます。わざわざ、ヘルプから見ないでも詳細な情報が見れます。
chrome://version/次にChromeタブを閉じずに再起動したいなど、そういう事がある方は下記のURLsをアドレスバーに入力してみてください。すぐに再起動がかかります、また再起動後、タブは保持されたままです。
chrome://restart/その他、いろいろな機能があります、どんな機能があるのか知りたい場合は下記の情報を入力してみてください。
chrome://chrome-urls/
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
Chrome, chrome-urls, restart, URLs, Version, アドレス, いろいろ, お使い, お腹, その他, タブ, バー, バージョン, ブラウザ, ヘルプ, まま, わざわざ, 下記, 事, 今日, 保持, 入力, 再起動, 場合, 大技, 小技, 情報, 方, 機能, 次, 目, 確認, 紹介, 詳細,
マイネオのマイソクプランを使ってみたので感想的な物を残しときます。
2022.06.08
おはようございます。この頃、iPhoneを買い替えたい欲が高まっています。
今日はタイトル通り、マイネオのマイソクプランを使ってみたので感想的な物を残しときます。マイネオとは格安スマホです。その中に通信量無制限のマイソクというプランが有るのですが、このプラン自分には合わない。お昼の１２時から１３時まで通信制限がかかります。それは契約を変更するときに理解はしていたのですが、実際、使用してみてこれは最悪だと気づきました。
お昼の休憩時間はスマホを操作する機会があります。また、コンビニでお昼ごはんを買う時には電子決済を使用していたのですが、マイソクに変更してからは通信エラーが頻発に起こり使い物にならないです、ブラウザは開けないし最悪としか言いようがないです。
尚、平日の１２時から１３時まで通信制限がかからない、タイプに変更したのだけど来月までマイソクプランで頑張らないといけないらしく正直なところ凹んでいます。
尚、それ以外の時間帯はサクサク通信します。
まとめ、平日の休み時間帯が１２時～１３時以外の方向けです、それ以外の人はマイソクはおすすめしません。32kbpsってかなり最悪です。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
12, 13, iPhone, エラー, お昼, これ, コンビニ, スマホ, ソク, それ, タイトル, タイプ, とき, ところ, ブラウザ, プラン, マイ, マイネオ, 中, 今日, 休憩, 使い物, 使用, 制限, 変更, 契約, 実際, 平日, 感想, 操作, 昼ごはん, 時, 時間, 最悪, 来月, 格安, 機会, 欲, 正直, 決済, 無制限, 物, 理解, 自分, 言いよう, 通信, 電子, 頃, 頻発,
JavaScriptのdocumentがドキュメントな訳。
2022.06.07
おはようございます。そろそろ梅雨入りなのかもなって。
さて、タイトル通りドキュメントな訳を知りたい方もいると思います、自分も何故、document（資料）なのかなって数秒間考えた結果、インターネットやHTMLの歴史を調べれば分かると思いますが、もともと研究者同士の情報交換（資料共有）に使用されていたのがモノがあるきっかけで注目を浴びた結果、今日では世界中で使用されるようになったのだと考えるとdocumentの意味がわかる。
因みにJavaScript（JS）はプログラミング学習、初学者には最適な言語だと思います、何故ならブラウザの開けるパソコンが一台有れば学習できる言語だからです。尚、JavaScriptを学んでVue.jsなどのフレームワークを学ぶのが定石だと思います。JavaScriptで独自プラグインを作ることが出来ればフレームワークの勉強に進んでも挫折しないと思います。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
document, html, javascript, JS, vue, インターネット, きっかけ, こと, タイトル, ドキュメント, パソコン, ブラウザ, プラグイン, フレームワーク, プログラミング, もの, 一, 世界, 交換, 今日, 使用, 共有, 初学者, 勉強, 同士, 学習, 定石, 情報, 意味, 挫折, 数秒, 方, 最適, 梅雨入り, 歴史, 注目, 研究者, 結果, 自分, 言語, 訳, 資料,
YOUTUBEプレミア一時停止しましたが、YOUTUBEをほぼ広告無しで見る方法。
2021.11.08
YOUTUBEプレミア一時停止しましたが、YOUTUBE広告無しで見る方法を先日知りまして、その合法的な方法で見ております。その方法とはbraveというブラウザで見ると一切の広告をカットしてくれます。その代わりにbraveの広告がはいるのですが、ほぼ無いみたいなモノなのでとてもストレスフリーなブラウザです。何故、このような事ができるのかといえば、Gさんなどに広告費を代わりに支払ってくれているのでこういう事ができているのだとか。
iosアプリやAndroidアプリも存在するので怪しいソフトではないです。このブレイブブラウザの発案者（開発）はjavascriptの開発者、ブレンダン・アイクなので全然、安全かと思います。そして全ての広告をカットするのではないとwikiには書いているけどほぼカットに近いｗ。
使用し始めてあまり月日が経っていないからなのか、広告はほぼ無いですね。全てをブレイブに委ねるのはちょっと心配なので、自分はYOUTUBE以外はChromeを今も使用中です。
そしてYOUTUBEミュージックの代替えにアマゾンミュージックを使用しています。アマゾンミュージックはプレミア機能だけだとちょっと物足りないけどもサブスクリプションが見直せて良かったと思います。尚、仕事に就き次第、YOUTUBEプレミアはまた始めようかなとは思っているので一時停止にしています。
以上、節約メモでした。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
5, Android, brave, com, dDkE-gzpNM, https, iOS, javascript, ｗ, watch, wiki, www, youtube, アイク, アプリ, カット, ストレスフリー, ソフト, ブラウザ, ブレイブ, プレミア, ブレンダン, もの, 一, 一切, 事, 停止, 先日, 全て, 存在, 安全, 広告, 方法, 発案者, 開発, 開発者,
ブラウザに画像をドロップして表示させる部分的な処理（javascript）。これを使って?
2021.10.07
本日はブログを更新するのがいつもよりかなり遅めです?、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";
};
}
});
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
2000, createElement, document, inp, input, javascript, obj, quot, var, アクセス, かなり, コード, こちら, こと, これ, これら, サーバー, サービス, ソース, デバッグ, ドロップ, ネタ, ブラウザ, ブログ, 保存, 充電, 全体, 処理, 完成, 少し, 更新, 本日, 機能, 毎日, 画像, 紹介, 表示, 記事,
遅いぐらいだけどES2015(ES6)が使い出せそう。js(java script)の話。
2021.09.30
今日は清々しい朝ですね、久しぶりに高知県、晴れましたね。
さて、遅いぐらいだけど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();
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
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
今日は朝、ヤシイパークまで自転車で行ってきました、行き帰りで結構な消費カロリーになるらしいですけど未だにあと10kgの体重が落ちません。今年中にはマイナス5kg落としたいなと思っています。
さて、話変わりまして10月の前半にはwindows10がwindows11へ条件を満たしていればアップグレードされます、因みに自分は条件を満たしているのでアップグレード対象者です。なんだかWindows11ってあのvistaに近い雰囲気がありますよね。今回のアップグレード、成功するかのかなぁ・・・。エンジニアが受けなくても一般ユーザーから好評だったら問題なく浸透するでしょうね。
アップグレードするとブラウザの変更が難しくなるとか言われています。初期設定で選択したブラウザから他のブラウザへ変更できないとか言われていますが、独禁法に接触すると思うので早々に変更できるようになるでしょう。なのでそういう面はあまり気にしていないのだけど、やはりGUI（グラフィックユーザーインターフェース）が大きく変わるとなれるまで時間がかかる気がします。
開発者としてはウィジェットが復活するらしいので、そこらへんは良いかなと思いますし、Androidアプリとかも仮想上で動かせるようになるのだとかで、そこらへんも良いかと思います。windows10でもアプリをインストールすれば仮想上で動かせるですけどね。
本当にあともう少し無償アップグレードが走ってwindows10とおさらばすることになるだなぁと思うと自分は複雑な気分になります。皆さんはどうですか?
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
10, 11, 5, kg, vista, Windows, アップ, エンジニア, カロリー, グレード, ブラウザ, マイナス, ヤシイパーク, ユーザー, 一般, 今回, 今年, 今日, 他, 体重, 初期, 前半, 変更, 好評, 対象者, 成功, 接触, 朝, 未だ, 条件, 気, 浸透, 消費, 独禁法, 結構, 自分, 自転車, 行き帰り, 設定, 話, 選択, 雰囲気, 面,
C#でwebview2を使用して情報を収集するためのサンプルコード。
2021.08.22
今日は日曜日ですね。先日は久しぶりにお天気になったので外へ出ていっておりました。これを投稿する日は晴れているでしょうか。
さて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("\"","");
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
2, 2019, IT, java, javascript, VC++, webBrowser, webview, Yahoo, アラート, インストール, エラー, オブジェクト, コード, こと, これ, サンプル, タイトル, ため, ドップ, ニュース, ブラウザ, ページ, もの, リンク, 久しぶり, 人, 今回, 今日, 作成, 作業, 使用, 先日, 勉強, 動作, 収集, 合間, 外, 天気, 役, 応用, 情報, 投稿, 方法, 既存, 日, 日曜日, 自動, 表示, 開発,