検索するとき%sが文字コードに変換されずうまく検索できないです

IMUSURA

vivaldiの「ニックネーム+検索したい文字」で検索する機能を使いたいのですがうまくいきません。

「漢字辞典オンライン」というサイトで「漢字」を検索したときのURL(注1)から、
私は「6f22_5b57」が「漢字」を表していると思い、その部分を「%s」に変えたURL(注2)を作成したのですがうまく検索できません。

原因として「漢字」の部分、つまり「%s」が文字コード(多分Unicode)の「6f22_5b57」に変換されていないため(注3)と考えられるのですが、どのようにすれば正しく検索できるのでしょうか？

以下注釈
注1)漢字辞典オンラインで「漢字」を検索したときのURL
https://kanji.jitenon.jp/cat/search.php?getdata=6f22_5b57&search=contain&how=すべて

注2)「漢字(6f22_5b57)」を「%s」に変えたURL
https://kanji.jitenon.jp/cat/search.php?getdata=%s&search=contain&how=すべて

注3)(注2)を利用した「ニックネーム+検索したい文字」で、「漢字」を検索したときのＵＲＬ
https://kanji.jitenon.jp/cat/search.php?getdata=漢字&search=contain&how=すべて

naporitan0sushi

@IMUSURA

こんにちはーー。難しいですね～。僕も今試してみたんですが、同様にうまく検索できませんでした。

どうやら、調べた単語がそのままURLになっているのではなく、仰る通り「6f22_5b57」みたいな感じで、別の文字列に変わってしまうようですね。

普通は、以下のような理想の形になってくれたら、ニックネーム検索が活用できます。

<!--漢字辞典で「漢字」と調べた時の理想なURLの形-->
https://kanji.jitenon.jp/cat/search.php?getdata=漢字&search=contain&how=%E3%81%99%E3%81%B9%E3%81%A6

<!--漢字辞典で「漢字」と調べた時の実際のURLの形-->
https://kanji.jitenon.jp/cat/search.php?getdata=6f22_5b57&search=contain&how=%E3%81%99%E3%81%B9%E3%81%A6

登録した漢字辞典のニックネーム検索で、「漢字」ではなく、「6f22_5b57」と検索してみると、正常に漢字の検索結果ページに飛ぶと思います。

でも、全ての漢字に対して、IDを覚えるのは、とても現実的ではないので、難しいですね～～…。

パッと思いつくのがブックマークレットを活用したコマンドチェインとの組み合わせですかねぇ…。僕は、全くJavaScriptができないので、ベテランさんが登場するのを祈っております。

2023年10月31日13時12分36秒.png

IMUSURA

This post is deleted!

IMUSURA

なるほど、ビークマークレットを活用したコマンドチェインというものがあるんですね。なかなかに難しそう・・

とりあえず、今うまく開けないのが「漢字辞典オンライン」というサイトだけなので、キーボードコマンドでタブを開けるようにして対応しようと思います。

いつか複数のサイトでうまく検索できないときががあれば、コマンドチェインというものに挑戦してみようと思います。（私はプログラミングかじるどころか、ちょっとなめたぐらいの知識なのでそのときはまた相談板を立てるかもしれません）

naporitan0sushiさん相談に乗ってくださり、ありがとうございました。

HongKong3

こんばんわ。
ブックマークレット使うにしても、どうやって 検索語句 を受け取るかが問題なんですよねー。

「検索」としてブックマークレット登録しても使えなくなってますし、コマンドチェインから実行する場合は入力ボックスか一旦どこかに書いてコピペってなるでしょうし、それならサイト行って普通に文字入力した方が安全確実ですしねｗ

なのでダミーページを 「検索」 に登録する手法を提案してみます

以下の内容をメモ帳か何かにコピペして「***.html」として保存します。(*** 部分はお好きなファイル名で)

<!DOCTYPE html><html lang="ja"><meta charset="UTF-8"><script>
  do{let q=Array.from(decodeURI(document.location.search.replace(/^.*=\s*|\s*$/gm,''))).map(c=>c.charCodeAt(0).toString(16));
    if(q.length){document.location=`https://kanji.jitenon.jp/cat/search.php?getdata=${q.join('_')}\&search=contain\&how=%E3%81%99%E3%81%B9%E3%81%A6`}
  }while(0);
</script><style>
  @media (prefers-color-scheme:dark){:root{color-scheme:dark}}
</style></head><body>
  <a href="https://kanji.jitenon.jp/">漢字辞典オンライン:</a> 検索用ダミーページ
</body></html>

保存したHTMLファイルをVivaldiで開きます。
アドレスバーに表示されるURL(file:///～～/***.html)をコピーします。
Vivaldi設定: 検索 の検索エンジンのURL欄を「コピーしたURL + ?q=%s」にします。

一瞬空白ページ表示されますが、一応クイックコマンドから検索できるようになると思います

quake2moon

こんばんは。
自分はJavascriptをかじるどころか、ちょい舐めて味見したくらいでして…
なので、練習のつもりでコードを作ってみました。

一応留意点として、

UNIコード変換とかよくわからないんで、他の人が作ったものを流用した。
ご要望の検索機能を使った物とは別物が出来てしまった。
~~コード内は乱文乱筆状態でして、改善の余地はあるが改善していない、とりあえず動く程度のものである。~~
（とりあえずコードに関しては、そのまま全コピペでお願いしますｗ）

ということで、もしよろしければ、こちらも試してもらえたらうれしいです

【テキスト選択型】漢字オンライン検索

Command 1 のパラメータ（~~2023/11~~ 2024/02/23　更新）　↓
追記：コード内容を、大幅にスリム化、及び改変しました。

javascript: (() => {
  let str = window.getSelection().toString().match(/\p{sc=Han}/ug);
  let result = Array.from(new Set(str))
    .map(e => e.codePointAt(0).toString(16))
    .join('_');
  if (history.replaceState) {
    history.replaceState({}, null, location.href);
  }
  window.open(`https://kanji.jitenon.jp/cat/search.php?getdata=${result}&search=contain&how=すべて`);
})()

使い方

webページにて、調べたい漢字を範囲選択の後、コマンドチェインを実行
~~コマンドチェインの各行間の「遅延」の値は、各自環境の下、調整する~~
~~尚、当方の設定(vivaldi://settings/tabs/)では、「新しいタブ」で「空白のページ」が出るようになっています。~~

quake2moon

@HongKong3
ふむ…
書き方がモダンですね

っていうか、UNIコードにするのって、そんなに簡単に出来るのか…

ま、もっとも、UNIコード化の部分はよくわからなくて、他の方が作ったやつを流用したんですけどね

っていうか思い出した、自分は iとか i++とか使って for文でクルクル回すの好きじゃなかったんだ！

よ～し、メソッドチェーンとかバンバン使ってモダンな感じに書き直してみよ～っと

IMUSURA

HongKong3さん
ちゃんと検索することができました。私はプログラミングとか全くできなくてどうしようと思ってたので、コード作成＋わかりやすい解説を付けてくださりありがとうございます。役立ってます。とても嬉しいです。

quake2moonさん
選択した範囲を検索できるようなコード
私が妥協しようとしたところと言うか、かゆいところと言うか、なんと言うか...
とにかく、ネットサーフィンしてるときとかはこちらのほうが検索できるスピードが早くてめっちゃいいです🥰

皆さんのおかげでこの問題を解決することができました。相談に乗ってくださり本当にありがとうございます。

naporitan0sushi

@HongKong3 @IMUSURA @quake2moon

皆さんすげぇ…。僕の環境でも、HTMLダミーファイルを使った方法、コマンドチェインの両方で、問題なくできました。凄すぎます…。つぇえぇ…。

HongKong3

> @IMUSURA @naporitan0sushi
うまくいったようで何よりです。
別パターンのページがあったとしても、2・3行目書き換えれば対応できる方法だと思うのでご利用ください

> @quake2moon
最近 VS Code の慣らししてるのでモダンっぽいのはその影響かも？
まだ使いモノならないんで、結局サクラエディタ使ってるんですけどｗ

「UNIコード化」というより、単純に文字コード取り出したらUNIコードになってるって感じですね。
もしかするとUTF-8以外のページや第四水準漢字辺りで異なってたりするんですかねぇ？

quake2moon

@IMUSURA @naporitan0sushi
ありがとうございます。
上手く行ったようで、何よりです

っていうか、コード自体があまりにも散らかっていて見苦しい感じですね…
ってことで、今回 コードを大幅にスリム化、改変しました。

素人の浅はかな感じで、もしかしたら大切な部分もそぎ落としてしまった可能性もありますが…
もしよろしければ、使って見て頂いて、不具合なども含め、感想など頂けたらうれしいです

@HongKong3

サクラエディタ使ってる

自分ははじめvdcode から入り、今はcodesandbox、今回のようなちょっとしたコードならjsfiddleでインデントってかんじですかね。
codesandbox もおしゃれでカッコいいんですが、クラウドゆえログインして～繋げて～みたいな感じで始まるのに時間が掛かるのが玉にキズなんですよね…vscode に戻ろうかな？

UNIコード化

今回やってみて思ったんですが、UNIコードって「U+●●●●」みたいな感じらしい？
4桁に満たない物は、揃える為に頭に無理やり0を付ける部分もコード内にあったようなのですが、普通の文字コード？っていうんですか？２桁とかでも問題なく動いたので、コード内のその部分はカットしました。
っていうか、文字コード２桁とかは漢字じゃないんで、今回のオンライン辞典では検索は出来ないんですけどねｗ

HongKong3

@quake2moon
vscodeは見た目もテーマで変えれますし、なんならsettings.json弄れば丸ごと自分の好きな配色にできそうですよｗ

JSで'\u0041'みたいなユニコード文字参照指定(?)の時に4桁じゃないとエラーになるんですね。
参照元がそういう用途だったんじゃないかなーと思います。

今回は JS や UNIコードの仕様として正しいかどうかじゃなく、サーバーサイドの仕様に沿ってればOKなので気にしなくても良いと思います

quake2moon

@HongKong3

settings.json弄れば丸ごと自分の好きな配色にできそう

最近よく目にするんですが、実はワテクシ、.json なるものを、よく知らないんですよね…
まだそこまで本を読み進めていないっていうか？

codesandboxで新しいリポジトリ？とか作れば、決まって.json さんもいらっしゃって…
まあ、いじる事がないので、そのままそこにいてもらうだけなんですけどね

じゃあ今度、まずはvscodeの配色替える目的で、.json いじってみようかな？

HongKong3

百聞は一見に如かずと言いますか実際開いてみると分かると思うんですが、ほぼ JS の辞書型（連想配列）です。
（キー名も""で囲む。みたいなローカルルールあるっぽいですけど…）

キー名である程度内容も推測できるんで、フィーリングだけで結構なんとかなるくらい簡単な構造ですよｗ

quake2moon

確かに以前、ちょっとだけのぞいた時は、色々な設定がしてあるんだな～？　みたいな感想は持った記憶がありますけどね～

まあ、「色の設定が出来るんですよ」と言われれば、それっぽい所を見て、同様の記述で変更ぐらいは簡単そうではありますけどね～

本を見れば、.jsonもサーバー関連の章や非同期処理の章に書かれてる事が多いみたいですね。
まあホームページとかいじるだけなら、html、css、Javascript でまあ事足りるんですけどね。

でも、.json あたりを見る機会が増えるという事は、サーバーとのやり取りや、そしてゆくゆくはnode.jsみたいなことも知っていくという方向性になるのかもしれないですね～…

HongKong3

いきなり全色設定はさすがにツライんで、ある程度好みに合ったテーマを下地にして要所々々で色指定な感じですね。

VS Code Themes (テーマのプレビュー)

で実際に色を変える場合、それ用のキーを追加する必要があります。

  // エディタ部以外 (タブとかツールバーとか)
  "workbench.colorCustomizations": {
    "[(下地のテーマ名)]": {
      "titleBar.activeForeground": "#f0883e",     //アクティブタイトルバー文字
      "titleBar.activeBackground": "#161b22",     //アクティブタイトルバー背景
      ...,
    }
  },
  // エディタ内部の文字色など
  "editor.tokenColorCustomizations": {
    "[(下地のテーマ名)]": {
      // 大雑把な指定
      "functions": "#d2a8ff",
      "strings": "#ffd700",
      ...,
      "textMateRules": [
        // 細かい指定
        {
          "name": "(指定名？ 適当に)",
          // 変更したい部分の指定
          "scope": "entity.other.attribute-name.id",
          "settings": {
            "foreground": "#ff7b72",
            "fontStyle": "bold"
          }
        },
        ...,
      ],
    },
    ...,
  },
  ...,

書く事多そうですが、実際はゴリゴリ入力補完効くんでそんな大変じゃないですｗ

textMateRules内のscopeについては、
Ctrl+Shift+P > "scopes"と入力、「エディタートークンとスコープの検査」使うとカーソル位置のテキストのscopeを調べられます。

エディタ部以外はテーマ拡張内の *.json 覗いてキー名からアタリ付けてく感じですかね～

quake2moon

@HongKong3
こんばんは。
少し話が大きくなりそうだったんで、こちらにそれっぽいスレを立ててみました。
よろしければ、そちらに書き込みしていただけたらと思っています。
ヨロシクどうぞ～