Yahoo!みたいな検索ボタンを付けてみた.挙動が若干不審気味かもしれない.

2024.11.03

Logging

おはようございます.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

OFUSEで応援を送る

タグ

body, createElement, else, encodeURI, getRangeAt, getSelection, handleSelectionPc, handleSelectionSp, keyword, null, px, removeButton, search, selectedText, window.scrollX, window.scrollY, zsearchButton, zsearchButton.classList.add, クリックイベントリスナー, 矩形,

Photo by cottonbro studio on Pexels.com

インターネットが鳴いていた頃から使い出した世代。 #GaGa

2023.02.17

Logging

おはようございます、ピーガッガーピーの時代からネット民です。

インターネットが鳴いていた頃から、使いだして今では常時接続が当たり前になり、これからは宇宙、スターリンクからネットに繋ぐ世界になろうとしています。そんな中、今自分が思うことは昔と違って、同じサイトばかりしか見ていないなって思っています。

昔はいろいろなサイトをネットサーフィンしていた気がします。そう思ったので今日はネットサーフィンして新しいサイト発見をしてみようと思って、世界中の検索サイトを網羅しているリンクは無いか。

ぐぐってみると有りました(下記参照)。因みにシェア率はこんな感じになっているようです。

  1. Google: https://www.google.com/
  2. Bing: https://www.bing.com/
  3. Yahoo! Search: https://www.yahoo.com/
  4. Baidu: https://www.baidu.com/
  5. DuckDuckGo: https://duckduckgo.com/
  6. Yandex: https://www.yandex.com/
  7. WolframAlpha: https://www.wolframalpha.com/
  8. Ask Jeeves: https://www.ask.com/
  9. AOL Search: https://www.aol.com/
  10. Excite: https://www.excite.com/
順位, 位検索エンジンシェア, %
1Google91.95
2bing2.83
3Yahoo!1.46
4Baidu1.35
5YANDEX1.09
6DuckDuckGo0.64
7Sogou0.12
8Naver0.12
9Ecosia0.12
10CocCoc0.06
引用:https://keikakuhiroba-mfi.com/archives/28900

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

AOL Search, Ask Jeeves, Baidu, bing, DuckDuckGo, Excite, Google, search, WolframAlpha, Yahoo, Yandex, インターネット, シェア率, ネット民, ピーガッガーピー, 下記参照, 位検索エンジンシェア, 宇宙, 常時接続, 順位,

WPのテンプレート構成とか。

2020.09.30

Logging

まず、オリジナルテンプレートを作成したときに使ったファイル構成はこんな感じです。この中で大事なファイルはstyle.css,functions.php,index.phpです。ワードプレスの自作テンプレートを作る際にどうすれば良いのかというのは、検索するといろいろな人が書かれているので、この記事では割愛しますね。

404.php
archive.php
category.php
footer.php
functions.php
header.php
index.php
page.php
screenshot.jpg.webp
search.php
sidebar.php
single.php
style.css

いろいろなサイトではstyle.cssのheader部分にいろいろと記述しないといけないような感じで書かれていますが、テンプレートを配布するのではない場合は数行、記述するだけで良いです。下記のような感じでテンプレート名だけ書いてあげれば良いです、そして空ファイルで上記の重要なファイル作成してあげるだけで、一応、ワードプレスのテンプレートの選択肢の中に自作テンプレートが現れます。

/*
Theme Name : 自作テンプレート名(英字)
*/

自作テンプレートには命名規則などがあるので、そちらも気をつけて命名してください。特に間違いやすいのがfunction.phpと記述してしまうことです。正しくはfunctions.phpですので間違いないようにsが無いとワードプレスのファンクションとして認識しないので注意です。

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

404, archive, category, css, footer, functions, header, index, jpg, page, php, screenshot, search, sidebar, single, style, wp, いろいろ, オリジナル, サイト, テンプレート, とき, ファイル, プレス, ワード, 下記, , , 作成, 割愛, 場合, 大事, 感じ, 数行, 検索, 構成, 自作, 記事, 記述, 部分, 配布, ,

ちょっとしたツール。

2020.05.11

Logging

サイト内の検索をするためのURLを生成してくれるツールを作りました。
ドメインを入力するとあらかじめ登録しているURLの候補が表示されます。
なお、プログラムでドキュメント検索する場合などに最適かなと思います、URLもプログラム関係のサイト(ドメイン)を登録しています。

因みにこれを作った経緯は単なる自分が使用するために作りました、そのお裾分けですので機能追加などは自分の判断で追加いたします(問い合わせなどは受け付けておりません)。

最後にリンクを貼っときます。
https://zip358.com/tool/site_search/ (サイト内検索URL生成)

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

358, com, https, search, site, tool, url, zip, お裾分け, これ, サイト, ため, ツール, ドキュメント, ドメイン, プログラム, リンク, 使用, 候補, 入力, 判断, 問い合わせ, 場合, 最後, 最適, 検索, 機能, 生成, 登録, 経緯, 自分, 表示, 追加, 関係,

自分の務めてる会社の1次入社試験(過去問)

2019.10.12

Logging

自分の務めてる会社の入社試験(過去問)です。
これぐらいのことは出来てもらわないと困るという事で出題したのですが
どうもこの問題難しいのか?
ここまで漕ぎ着けて採用された人はひとりしかいない。
大手の会社にはこんなの簡単だよという人は
たくさんいると思いますが、自分の務めてる会社は
どちらかと言えば零細企業です。
こういう問題出しても中々、解けない人が多くて
採用まで至らないのが現状です。
※今は募集していません。
■問題
郵便番号入力すると検索結果を表示するようにせよ。
また下記の条件を満たしていることとする。
1.サジェスト機能がある。
2.PHP言語を使用。
3.非同期処理。
単なるこれだけでも、中々出来る人が来ない。
これが零細企業地方の現状です。
https://zip358.com/tool/postal_code_search/

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

, 2, , 358, Code, com, php, postal, search, tool, zip, ここ, こと, これ, これぐらい, これだけ, サジェスト, たくさん, どちらか, ひとり, また下, 中々, , , , 企業, 会社, 使用, 入力, 入社, 処理, 出題, 募集, 同期, 問題, 地方, 大手, 採用, 条件, 検索, 機能, 現状, 番号, 簡単, 結果, 自分, 表示, 言語, , 試験, 過去問, 郵便, 零細,

映画、Search/サーチを観てきましたよ。

2019.03.03

Logging

映画『search/サーチ』予告(10月26日公開)

映画、Search/サーチを観てきましたよ(レンタルで)。
最後の最後まで見ごたえのある映画でした、久々に
楽しめた、エンターテイメント作品でした。
これ映画館でみたかったですね。
高知県では上映していない映画なんです。

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

6, 75, com, csA, RG, search, youtube, エンターテイメント, コレ, サーチ, レンタル, 上映, 久々, 作品, 映画, 映画館, 最後, 見ごたえ, 高知県,