hogashi.*

日記から何から

Google Chromeのサイト内検索(検索のショートカット)機能を便利に使う

三行

  • Google Chrome には、「サイト内検索」という機能があり、好きなキーワード + 検索語で、好きな検索 URL をつくれる
    • 検索のショートカットのような機能
  • 特定のサイト内検索 URL をつくるだけじゃなくて、規定の検索エンジンの検索 URL をつくっても良い
  • 検索 URL だけじゃなくて、自由な URL をつくっても良い
    • 使い方には注意

目次

サイト内検索という機能がある

 Google Chrome には「サイト内検索」という機能がある*1。ユーザが好きに決めたキーワード + 検索語をアドレスバー (omnibox) に入力することで、規定の検索エンジンに限らない、好きな検索 URL をつくることができる。
 設定項目は「設定 > 検索エンジン」以下 (chrome://settings/searchEngines) にある。

 たとえば、キーワード amaz で URL https://www.amazon.co.jp/s?k=%s と設定した場合、アドレスバーにamaz[Tabキー]ディスコ CDと入力すると、 Amazon を「ディスコ CD」で検索したページに遷移できる (%s のところに検索語が入る)。キーワードを入れてショートカットを発動させてから、検索語を入れる感じ。
 これを使うと、一旦 amazon.co.jp にアクセスしてから検索バーに入力、という手間が減って便利。


規定の検索エンジンの URL でも良い

 好きな URL をつくれるので、あえて普段使っている検索エンジンの URL をつくっても良い。
 たとえば、 MySQL の公式ドキュメントで HAVING 句に関するページを探したいことがある。公式ドキュメントは https://dev.mysql.com/doc/ で、サイトの検索機能も使えるが、多分本文にもマッチしていて色んなページが出まくってしまい、目当てのページを見つけるのはちょっと難しいことが多い。

2614ページ出ていて難しい

 一方、 mysql having とだけアドレスバーに入れて (僕が普段規定の検索エンジンにしている) Google で検索すると、世界中のサイトが登場してしまい、公式ドキュメントを一覧しづらい。テクニックとして、 MySQL の公式ドキュメントの URL を使って site:https://dev.mysql.com/doc/ と絞り込むことができるのだけど、これを毎回手で打つのも大変。 developers.google.com

 そこで検索ショートカットを使う。キーワード my で URL https://www.google.com/search?q=site%3Ahttps%3A%2F%2Fdev.mysql.com+%s と設定すれば、アドレスバーにmy[Tabキー]havingと入力するだけで、 MySQL 公式ドキュメントで HAVING 句に関するページを Google で一覧できる。人々の関心が集まるページがほどよく上に表示されていて便利。


検索 URL じゃなくても良い

 キーワードに対応した特定の URL で、 %s を入れた場所に好きな文字列を入れられる機能、と捉えると、もっと使い方が広がる。
 たとえば、 URL http://hidic.u-aizu.ac.jp/result.php?tableName=tango&word=%s に設定すると、ハイパー英語語源辞書で入力した英単語についてのページ (パーマリンク) を開くことができる。普通はサイトにある検索機能を使って単語を検索して、出てきたリンクを踏んでパーマリンクにたどり着くけど、調べるときは単語はわかっていることが多いので、一発で開けるのが便利。
 URL のどこにでも %s を入れられるので、 https://%s.hog.as/ のようにドメインに入れることもできる。サイトで色んなサブドメインを切っている (Deploy Previews | Netlify Docs みたいな) ときなどに便利。同じ発想で、実は URL スキームに入れて %s://hog.as/ などということもできるけど、これは使い所があんまりなさそう……?
 ちなみに、少なくとも URL である必要はありそうだった (適当な文字列を入れて追加すると、勝手に http:// 始まりにされる)。

意図しない URL にしてしまわないよう注意

 意図しない URL をつくりあげてしまうと、悪意のあるサイトにアクセスしてしまう可能性があるので注意したい。 URL を設定する際に 1文字打ち間違えると違うサイトになってしまったりする。また単に文字列なので、ドメイン%s を入れた上で google.com/ と入れてしまうと、ドメイン部分が終わって以降は URL パスになってしまう。
 不安な場合は、少なくともドメイン部分まではよく確認した上で決め打ちにして、 %s を入れるのはパス以降にするのが安心そう。

developer.mozilla.org

追記

Firefox にもある

 Firefox では、ブックマークにキーワードを設定するという方法で同じことができる、と教えてもらった。便利。


%s も入れずに使う

 %s を入れるのは必須ではないので、単に短いキーワードでよく使うページを訪れるのにも使える、と指摘してもらった。たしかに便利。

*1:Firefox Safari でも検索ショートカット機能はあるけど、ユーザが好きに設定することはできないように見えた(2023/10/3 時点) → Firefox にはあると教えてもらった

拡張機能「twitter画像原寸ボタン」v5.3.0公開

 拡張機能twitter画像原寸ボタン」 v5.3.0 を公開しました。画像ページで Ctrl-s/Cmd-s を押したときの保存されるファイル名を修正する機能を削除しています。

 機能削除はあまり歓迎されないものと認識しています。そのために今まで残していましたが、メンテナンスしていくにあたって考えることを減らすためにやはり削除しました。削除するに至った理由は以下です。

 まず少し前に、 URL パスが hogehoge.jpg:orig から hogehoge?format=jpg&name=orig のような書式に変わり、この場合はファイル名を修正しなくても (hogehoge.jpg-orig とかにならずに) hogehoge.jpg として保存されるようになりました (つまり想定された拡張子で保存できるようになった)。ブラウザの仕様に乗れるなら、それが最も良い状態と考えます。
 また、もともとダウンロードを主な機能としていない拡張機能なので、ダウンロードに関わる機能の部分を強化していく方針はありませんでした。この機能を実装した当時の記事でもそう書いていますが、少なくとも拡張子が変なものになるのはおかしい、という動機で実装していました。上述の通りやらずに済むようになったということもあり、機能を削除することにしました。

あまり保存を主目的としないつもりでいるので、直感的に正しい挙動になるくらいを目指しています。

GoogleChrome拡張機能「twitter画像原寸ボタン」ver.2.1 - hogashi.*

 このバージョンから「twitter画像原寸ボタン」ではダウンロードについての機能が薄くなることになります。ダウンロード機能が必要な方は、そういった機能がある他の拡張機能をお使いいただけると幸いです。

 「twitter画像原寸ボタン」のインストールはこちら:

Google Chrome
chrome.google.com

Microsoft Edge 版 (公開まで 1週間くらいかかるようで、前のバージョンの公開待ちです)
microsoftedge.microsoft.com

拡張機能「twitter画像原寸ボタン」v5.2.1公開

 拡張機能twitter画像原寸ボタン」 v5.2.1 を公開しました (数日のうちに更新されるはず) 。

 公式 Web でたまに画像が webp で表示されることがあり、その場合は name=orig での表示ができないようなので、 webp のときに限ってかわりに name=4096x4096 を使うようにしました *1 。手元で確認した限り、同じ仕様 *2 で表示できるようなので、拡張機能としての挙動の変化は URL やファイル名が変わるくらいのもので、基本的な体験は変わりません。

 ついでに、ダークモードのとき Original ボタンが見えないことがあったので修正しました。表示はされているけど色が黒く、背景と同じ色になってしまっていたので、見える色になるように調整しています。

 インストールはこちらから:

Google Chrome
chrome.google.com

Microsoft Edge
microsoftedge.microsoft.com

 追記: この拡張機能が webp で画像を開くのは、 Twitter 側が表示している画像のサムネイルが webp になっているときです。基本的に Twitter が表示しようとしている画像をそのまま開くのが素直な実装であり、また webp で表示されている画像がもともと jpg だったのか png だったのかが html などからは判断できないので、 webp の場合は webp のまま表示することにしました。

*1:orig で作ったときと同じく偶然知った仕様なので綱渡りな感じですが、元来アドオンとはそういうものだと思います

*2:基本的に原寸表示で、長辺が 4096px 以上のときは 4096px 四方に収まるようにリサイズされる

marquee 入れ子 どうなる

<marquee scrollamount="1" direction="right">
  <div style="width: 100px; height: 100px; background-color: green;"></div>
</marquee>
<marquee scrollamount="10" direction="right">
  <marquee scrollamount="9">
    <div style="width: 100px; height: 100px; background-color: green;"></div>
  </marquee>
</marquee>
<marquee scrollamount="10" direction="right">
  <marquee scrollamount="10">
    <div style="width: 100px; height: 100px; background-color: green;"></div>
  </marquee>
</marquee>
<marquee scrollamount="10" direction="up">
  <marquee scrollamount="10" direction="down">
    <div style="width: 100px; height: 100px; background-color: green;"></div>
  </marquee>
</marquee>
<marquee scrollamount="20" direction="up">
  <marquee scrollamount="20" direction="down">
    <marquee scrollamount="20" direction="right">
      <marquee scrollamount="20">
        <div style="width: 100px; height: 100px; background-color: green;"></div>
      </marquee>
    </marquee>
  </marquee>
</marquee>
<marquee scrollamount="7" direction="up"  style="height: 300px;">
  <marquee scrollamount="19" direction="down"  style="height: 150px;">
    <marquee scrollamount="31" direction="right"  style="height: 100px;">
      <marquee scrollamount="59"  style="height: 100px;">
        <div style="width: 100px; height: 100px; background-color: green;"></div>
      </marquee>
    </marquee>
  </marquee>
</marquee>
<marquee scrollamount="7" direction="up" style="height: 300px;" behavior="alternate">
  <marquee scrollamount="19" direction="down" style="height: 150px;" behavior="alternate">
    <marquee scrollamount="31" direction="right" style="height: 100px;" behavior="alternate">
      <marquee scrollamount="59" style="height: 100px;" behavior="alternate">
        <div style="width: 100px; height: 100px; background-color: green;"></div>
      </marquee>
    </marquee>
  </marquee>
</marquee>

注釈

developer.mozilla.org

非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/marquee

 分割キーボード使ったりはしてるけどトラックパッドは右手で使うので結局なんとなく体の力の入り方のバランスが取れてないな〜と思っていたけど、こと Magic Trackpad に限っていえば左右どっちの手で使っても特に困ることないことに気付いた。ここ数年で上位に入る気付き。早速左手で使い始めているけど自然と右手が出てしまっておもしろい。

Chrome113でHTTPヘッダを上書きしていろんな状態をお試しできる

 Chrome 113 で、 DevTools の Network ペインで HTTP ヘッダを好きなように編集して、いろんな状態をお試しできるようになっている。 What's New in DevTools (Chrome 113) - Chrome Developers で紹介されている。

GitHub から example.com を fetch してみる

 試しに、 CSP で外部への通信がそれなりに制限されている GitHub から、 example.com への fetch を成功させてみる (外部サイトへの通信は、認証情報や秘密の情報の漏洩などに気をつけて試してください。この記事の事例は多分安全と思って書いています)。 Chrome のバージョンは 113.0.5672.92(Official Build) (arm64)

GitHub の CSP ヘッダを上書き

 https://github.com/git/git を開き*1、まず素朴に DevTools の Console から fetch する ( fetch('https://example.com/') )と失敗。 CSP のルールで弾かれている。

 Network ペインで編集したい通信 (今回は https://github.com/git/git) をクリックして Headers を開き、 Response Headers のどれでもよいのでホバーして鉛筆マークを押せば、編集モードに入ろうとする。

 ここで、「Select a folder to store override files in.」と言われて、「Select folder」を押すとファイルエクスプローラが開く。今回は適当にデスクトップにフォルダをつくった。

 すると「デベロッパーツールでは 〜(選んだパス) へのフルアクセスがリクエストされます。機密情報の漏えいにご注意ください。」と案内されて、許可と拒否を選べる。ミスって秘密のファイルが入ったフォルダなどを選んでもやり直せるようになっていて丁寧。今回は新しくつくったフォルダなので許可する。

 これでようやく編集モードに入る。わかりづらいけど、等幅フォントになり、ホバーすると textarea の枠が薄く表示されて、編集できそうな感じになる。 Content-Security-Policy ヘッダの 2〜3行目にある connect-srcexample.com を追加した (CSP: connect-src - HTTP | MDN を許可すると fetch できるようになる)。編集したヘッダはわかりやすく緑になっている。


 右上の Header Overrides をクリックすると、 Sources ペインの Overrides タブで .headers ファイルが開かれ、編集したヘッダの一覧が見られる。 GitHub の CSP ヘッダの内容が長くて見づらいけど、パス github.com/git の git というファイル (つまり github.com/git/git) への通信の際に、 CSP ヘッダが上書きされるよ、というのがわかる。ちなみにここでもヘッダの値を編集できる。

 これだけでは、まだ今のページには反映されていないので、 fetch すると失敗する。適用するには再読み込みが必要。
 再読み込みすると、 github.com/git/git への通信の Status の 200 の左にマークがついていて、 Header Overrides が適用されていることがわかる。

 Headers を見ると、さっき編集された状態のままになっている (画面を大きくしてしまって行がずれてるけど、 1行目の最後のほうに example.com が入っている)。

 これでいけるかと思って fetch すると、こんどは CORS で失敗する。 example.com 側で、 github.com からのアクセスを許可していない。


example.com の CORS のヘッダを上書き

 つまり example.com のヘッダも書き換えたらよい。今度は編集モードに入った後に登場する「Add header」ボタンで Access-Control-Allow-Origin - HTTP | MDN ヘッダ (値は https://github.com) を追加する。


 Sources ペインで見ても、 example.com の index.html に対してヘッダが増えている。

 この場合は、現在見ているページではなくて fetch してくるページなので、再読み込みとかはなく、新しく fetch し直したら成功する。めでたく HTML が console.log された。

fetch('https://example.com/').then(res => res.text()).then(t => console.log(t))


途中で指定したフォルダの中身は何?

 ヘッダの編集モードに入るときにフォルダを指定した。 Sources ペインで雰囲気はわかるかもしれないが、パスごとのフォルダができ、その中の .headers ファイルに JSON で上書きヘッダが書かれている。

$ tree -a ~/Desktop/chrome-http-header-override/
/Users/hogashi/Desktop/chrome-http-header-override/
├── example.com
│   └── .headers
└── github.com
    └── git
        └── .headers

4 directories, 2 files
$ cat ~/Desktop/chrome-http-header-override/example.com/.headers 
[
  {
    "applyTo": "index.html",
    "headers": [
      {
        "name": "access-control-allow-origin",
        "value": "https://github.com"
      }
    ]
  }
]

 このファイルを直接編集しても反映される。試しに example.com の .headers ファイルで、 hoge ヘッダを書き込んでみた。

$ cat ~/Desktop/chrome-http-header-override/example.com/.headers 
[
  {
    "applyTo": "index.html",
    "headers": [
      {
        "name": "access-control-allow-origin",
        "value": "https://github.com"
      },
      {
        "name": "hoge",
        "value": "hogashi"
      }
    ]
  }
]

 fetch すると Hoge ヘッダがちゃんとついている。自然とcamelcase にされるのですね。


上書きをやめるには?

 内容を残したまま一旦オフにしたいときは、「Enable Local Overrides」のチェックを外せばよさそう。

 あるいは、 .headers ファイルを消せば、上書きされなくなる。全部吹き飛ばすには、「Clear configuration」を押せばよい。



感想

 機能は便利そう。気をつけるポイントはありつつ、今までサーバ側を変更しないといけなかった部分をクライアントのみで試行錯誤できるので、開発しやすさがあがっていきそう。
 権限を要求してまでローカルのファイルに保存する仕組みにした理由はちょっと気になる。直接エディタなどで編集できるのは便利なので、そこを優先したのかな……? とか考えているけどわからない。

*1:一応シークレットウィンドウで開いた