Yahoo！みたいな検索ボタンを付けてみた．挙動が若干不審気味かもしれない．
2024.11.03
おはようございます．Yahoo！みたいな検索ボタンを付けてみた．挙動が若干不審ですが先日の早朝にリリースしました．先日の記事にも書いたのですがいろいろと機能を追加しているのでなんだか、サイトがごちゃごちゃしてきている気がします．当初はシンプルベストにしたいなと思っていたのですが、まるで注文の多い料理店の様．
ソースコードは汎用性のあるコードにしたつもりなので、環境がワードプレスなら動作すると思います．ソースコードはこちら．因みに変数の命名は自分サイトの命名規則に従っていますので、ご自身のサイトにあった命名規則に変更してください．
const zbody = document.body;
let zsearchButton = null;
zbody.addEventListener('mouseup', handleSelectionPc);
function handleSelectionPc() {
const selection = window.getSelection();
const selectedText = selection.toString();
// 選択されたテキストが存在する場合
if (selectedText) {
// 選択範囲の矩形を取得
const range = selection.getRangeAt(0);
const rect = range.getBoundingClientRect();
// 検索ボタンを作成
if (!zsearchButton) {
zsearchButton = document.createElement('button');
zsearchButton.textContent = '検索';
zsearchButton.classList.add('search-button', 'btn', 'btn-dark');
// ボタンをbodyにappendChildし、位置を調整
document.body.appendChild(zsearchButton);
zsearchButton.style.position = 'absolute';
zsearchButton.style.top = `${rect.top + window.scrollY + 30}px`;
zsearchButton.style.left = `${rect.left + window.scrollX}px`;
}
// クリックイベントリスナーを追加
zsearchButton.addEventListener('click', () => {
search(selectedText);
removeButton();
});
} else {
// 検索ボタンを削除
removeButton();
}
}
zbody.addEventListener('touchend', handleSelectionSp);
function handleSelectionSp() {
const selection = window.getSelection();
const range = selection.getRangeAt(0);
const rect = range.getBoundingClientRect();
const selectedText = selection.toString();
if (selectedText) {
if (!zsearchButton) {
zsearchButton = document.createElement('button');
zsearchButton.textContent = '検索';
zsearchButton.classList.add('search-button', 'btn', 'btn-dark');
document.body.appendChild(zsearchButton);
zsearchButton.style.position = 'absolute';
zsearchButton.style.top = `${window.scrollY + rect.top + 30}px`;
zsearchButton.style.left = `${rect.left}px`;
}
zsearchButton.addEventListener('click', () => {
search(selectedText);
removeButton();
});
} else {
removeButton();
}
}
function removeButton() {
if (zsearchButton) {
zsearchButton.remove();
zsearchButton = null;
return removeButton();
}
}
function search(keyword) {
window.location.href = '://' + window.location.host + '/?s=' + encodeURI(keyword);
}明日へ続く
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
body, createElement, else, encodeURI, getRangeAt, getSelection, handleSelectionPc, handleSelectionSp, keyword, null, px, removeButton, search, selectedText, window.scrollX, window.scrollY, zsearchButton, zsearchButton.classList.add, クリックイベントリスナー, 矩形,
JS（javaScript）ファイルを動的に再読み込みする方法。
2021.10.13
今日は朝からメールで書類提出してクラウドワークスの仕事に何か良いものはないかなどを見ておりましたがありません?。
さて、JS（javaScript）ファイルを動的に再読み込みする方法のオリジナルコードを書きましたので、お裾分けします。前々の会社で JS（javaScript）ファイルを動的に再読み込みしないとJSが動作しないという何ともやるせない気持ちの仕様があり、その時は人様のコードを拝借して使っていましたが、今日はクラウドワークスなどの案件もないのでちゃちゃっと自分でコードを書きました?。同じように困っている方はご使用くださいな?
https://zip358.com/tool/demo67/
ちょっと愚痴?
そもそも前々の会社のオリジナルMVCはいろいろと欠陥だらけで且つ仕様書もない、何が正解なのかも教えてもらえない中、修正やらしていたので本当に大変でした。聞いても明確に答えてもらえないのは正直な所、大変です。後任にはちゃんと教えていたら良いのですがね。
"use strict";
document.querySelector("button").addEventListener("click",jsandcssreload);
function jsandcssreload(){
let d = (new Date()).getTime();
[...document.querySelectorAll("link")].forEach((elm)=>{
elm.href = elm.href.replace(/(\.css)\??[0-9]{0,}$/,".css?" + d);
});
[...document.querySelectorAll("script")].forEach((elm)=>{
elm.src = elm.src.replace(/(\.js)\??[0-9]{0,}$/,".js?" + d);
});
}上手く行かなかった場合の対応．
[...document.querySelectorAll('script')].forEach(elm => {
let script = document.createElement('script');
script.src = elm.src;
document.body.appendChild(script);
});
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
'src', addEventListener, createElement, css, document.querySelector, document.querySelectorAll, elm, foreach, getTime, gt, href, javascript, jsandcssreload, quot, quot;button", quot;use, script, src.replace, strict", 後任,
ブラウザに画像をドロップして表示させる部分的な処理（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, アクセス, かなり, コード, こちら, こと, これ, これら, サーバー, サービス, ソース, デバッグ, ドロップ, ネタ, ブラウザ, ブログ, 保存, 充電, 全体, 処理, 完成, 少し, 更新, 本日, 機能, 毎日, 画像, 紹介, 表示, 記事,