「ブラウザ」の記事 - Crieit

puppeteer でファイルをダウンロードするときに、任意のパスと名前で保存する

2021-06-25T03:57:06+09:00

Puppeteer を使ってファイルをダウンロードする際に、任意のパスと名前で保存したい。

残念ながら、現時点ではシンプルな方法は提供されていないようだ。
以下の Issue で何年にもわたって議論されているものの、 「コレ!」 という解決方法は無さそう。
Question: How do I get puppeteer to download a file? · Issue #299 · puppeteer/puppeteer

しかし、この Issue の #issuecomment-668087154 のコメントで、なかなか泥臭い方法で実現するヒントが書かれていた。
これを参考にして、任意のパスと名前でダウンロードファイルを保存してみよう。

実行方法

あらかじめ、 puppeteer の npm パッケージをローカルにインストールしておく。

npm install puppeteer --save

その状態で、後述の .js ファイルを nodejs で実行すれば OK だ。

node puppeteer-download-with-specify-name.js

コードと解説

何をしているのかというと、 GitHub 上の puppeteer のソースコード ZIP ファイルをダウンロードする際に、 Chrome DevTools Protocol を直叩きして、任意のパスとファイル名で保存している。

具体的なポイントは、主に以下の 2点。

Page.setDownloadBehavior メソッドで、ファイルのダウンロードの許可とダウンロード先のディレクトリを指定
Fetch.enable メソッドと Fetch.requestPaused イベントで、ファイルダウンロードのレスポンスに Content-Disposition HTTP ヘッダーを無理やりねじ込む

Content-Disposition HTTP ヘッダーのドキュメントに書かれている通り、 attachment と filename ディレクティブを指定することで、ファイルが（ブラウザ内で表示されるのではなく）ダウンロードが必要であることと、ダウンロード時のファイル名を指定することができる。

但し、 Page.setDownloadBehavior メソッドは実験的で且つ非推奨なので、将来にわたってサポートが続くかどうかはわからない点は、注意だ。
少なくとも、 Chromium 92.0.4512.0 (r884014) では問題なく動いている。

ちなみに、実行する Chromium はヘッドレスモードでもヘッドフルモードでもどちらでも意図通り動くはず。

この方法は Chrome DevTools Protocol に思いっきり依存しているので、 Selenium など他のブラウザ自動化ツールでは同一の方法が難しく (※)、 Puppeteer ならではの方法と言える。
※: Selenium 4.x のプレリリース版を使えば、 Chrome DevTools Protocol にアクセスできるようだが、イベントハンドラを書くのが難しそう？ドキュメントがそろってないのでまだなんとも…

スクレイピング中にファイルをダウンロードする場合などでは、保存先のパスと名前を指定できたほうが良い気がするのだが……
今後の puppeteer や Chrome DevTools Protocol の更新でもっと簡単に実現できるようになることを期待しよう。

10年ぶりにFirefoxを3ヶ月ほどメインにした所感

2021-06-19T19:16:24+09:00

ここ10年ほど、僕はずっとGoogle Chromeを使っていた。正直Chrome最強だと思う。Chrome最強だと思うんだが、どういうわけなのか、僕のMacではやたらとCPUを使ってくれて、ただでさえ爆熱のMac mini 2018を目玉焼きでも焼けそうなほどに熱してくれる。MacBook Pro 2019でも同様だ。Windowsのマシンではそういうことはなかったので、Macとの相性問題もあったりするんだろうか。それとも何かエクステンションが悪さしているのか。

Firefoxを使い始める

わからないが、もうずっと爆熱が続いて全然なおらないので、ついに僕はChromeをメインにすることをやめて、Firefoxを使い始めた。それが今年の3月のことだ。

Firefoxをメインにするのは、10年ぶりくらいだろうか。僕の中ではFirefoxは今なお3.5だったのだが、もうバージョン90になっている。おかげで軽くタイムスリップしたような気分になれた。

さて、久方ぶりのFirefoxだが、けっこうすんなりと移行することができた。まぁもともと使っていたしね。

以下に、Firefox移行後の所感について書く。

爆熱は微妙におさまった

まずChromeからの移行のきっかけとなった爆熱についてだが、これは微妙におさまった。微妙にというのは、Firefoxも立ち上げてしばらくすると、やはりCPUをぶん回し始める現象が起きたからだ。

しかし、ウィンドウを閉じるとおさまるので、プロセスを終了しないと暴走がおさまらなかったChromeに比べるとマシだ。また、Chromeは起動してすぐくらいの勢いで暴走を初めていたが、Firefoxについては長時間起動していると、という感じなので、まぁいいかなという感じ。

ブックマーク、パスワードの同期

次に同期の問題。

まず、パスワード同期については僕はBitwardenを利用しており、BitwardenはFirefox用のエクステンションも提供しているから、その点は問題ない。

ただ、Android用のFirefoxブラウザにおいては、パスワード欄をタップした時のBitwarden連携が不安定で、出たり出なかったり、出たとしても一瞬で消えたり、ということが頻発してちょっと苛々する。iOS用Firefoxではそういう問題は起きない（まぁキーボードにパスワードマネージャの立ち上げがくっついてる形なので）。

ブックマーク同期については、昔はそれ用のソフトを使っていた（具体的には確かXmarksだ、もうサービス終了している）が、今はブラウザの同期機能を利用しているため、Firefox Syncの世話になった。これは普通に使えたのだが、職場ではproxy経由の時に問題があるのか、使えなかった。うーん？まぁいいけど。

それにしても、今ってクロスブラウザを前提にしたブックマーク同期アプリってあるのかな。ここしばらくChrome一強時代が続いているから、ちょっと厳しいよね。

パフォーマンス

パフォーマンスについては、正直体感ではあまり差がない。その昔は明らかにChromeのほうが快適で、まぁそのためにChromeは天下を取ったとも言えるのだが、今はそんなこともないようだ。

画面の崩れ

ほとんどない。今どきのモダンブラウザで表示が問題になることはないようだ。IEを使っている人は税金払ってほしい。

あ、そういえば職場のクソアプリが、Chromeだといつもレイアウトが崩れていたんだけれど、Firefoxだと崩れなくなった。

エクステンション

PCでWebブラウジングする魅力は、なんといってもフルブラウザ、というか豊富なエクステンションだろう。Amazonの商品の金額遷移を表示するKeepa、タイトルとURLをコピーするシンプルながら使い勝手の良いCreateLink、複数リンクを同時に開くLinkclump、Google検索からゴミサイトを排除するゴシップブロッカーなど、愛用しているエクステンションはいくつかある。

で、調べてみるとだいたいFirefoxに対応しているか、あるいはFirefoxで使える代替えとなるエクステンションがあったので、これも問題がなかった。ただもちろん、人によっては諦めなければならない機能はあるだろう。

とはいえ、大昔野良エクステンションが跋扈していた時代に比べると、随分と環境が整備されたのだなぁと思う。

スマホの検索窓など画面下部に

細かいのだが、いいなぁと思ったのはスマホのFirefoxだと検索窓を画面下部にすることができるところだった。

これは楽天Bigのスクリーンショットだ。楽天Bigはクソデカイので、検索するには少しばかり親指をダルシムのごとく伸ばす必要があるのだが、画面下部にあればホビット族の血を受け継ぐ僕も楽々検索することが可能だ。これは地味ながら嬉しいユーザー体験だった。

既に開いているタブ一覧なども、Chromeがやたらと親指の限界を試すのに比べて、Firefoxは軽く伸ばせば届くところがタップ範囲で、非常に好ましく思えた。

タブをウィンドウから移動させた時の挙動が不満

これまた地味だが、PCでタブを別ウィンドウに移動させた時、期待する動作はマウスポインタの場所あたりに新たなウィンドウを開いてタブが移動することだが、どうもそうならない。これがMac版故なのかどうかはわからないが、あまり直感的ではない。まぁ大した問題ではないのだが、ちょっとイラッとする。

マルチユーザーだとちょっと使いづらかった

Firefoxでマルチユーザーっぽく使おうと思ったら、ユーザーごとにprofileを作成し、都度切り替えていくことになると思うが、どうも使いづらい。

たとえば他アプリからURLをクリックしてFirefoxに飛ぶ時、Chromeだと最後に開いていたユーザーのウィンドウで開くが、Firefoxだと必ずデフォルトのprofileで開かれてしまう。

また、Firefoxを起動した時に最初に開かれるのがデフォルトユーザーではなくなることもちょくちょくあり、まぁOS再起動などすればなおるのだが、どうにもprofile周りは挙動が若干不安定に思えた。

そもそもabout:profilesを毎度入力するのがイケてないように思うが、他にいいやり方があるんだろうか……。

まぁでも、少し特殊な使い方だとは思う。

総評

ということで、Firefoxを3ヶ月ほどメインにした結果、十分に使えるものだということがわかった。

わかったが、しかしFirefoxでなければならない積極的な理由も特にはなく、恐らく多くの人にとってFirefoxを使う一番のモチベーションは「Chromeを使いたくない」になってしまうのではないだろうか。

まぁでも、それは案外バカにできない理由かもしれない。僕のChrome熱暴走問題は恐らくおまかんなのだが、おまかんと言われても僕の環境で起きている以上僕にとっては大きな問題であって、ブラウザを変えるだけで解決できるならそうしてしまいたいし、事象が異なるだけでブラウザを変えたい気持ちになっている人は、何も宗教上の理由がなくてもけっこういるであろう。

まぁもちろんChrome以外というだけなら他にも選択肢があるんだが、「結局WebKitじゃねぇか」みたいなものが多い中で、Firefoxの「Geckoですけど？」はひときわ輝いてみえる（個人の感想です）し、昔からクロスOSでやってきている信頼感もある。

ということで、Firefox悪くないんじゃないの、と言いながら、実はこの記事はBrave上で書いてます。結局WebKitじゃねぇか。いやBlinkです。使えればなんでもいいよ。はい。

メインブラウザをChromeからBraveに変えた話

2021-06-02T20:16:27+09:00

メインで使用しているブラウザを、Google ChromeからBraveに変えました。Braveは高品質な割にはそこまで普及していない気がします。せっかくなので紹介してみようと思います。

Braveについて

BraveはjavaScriptの開発者であるBrendan Eich氏らが開発したブラウザで、無料で利用できます。次のような特徴があります。

Windows/macOS/Linux/Android/iOSで利用可能
標準で広告を非表示にする
広告非表示にともなって読み込むデータ量が減り高速化する
Braveが提供する広告を見ることでリワードを得るプログラムがある

macOSはIntel/M1両対応しているそうです。あとは、他のブラウザもだいたいそうだと思いますが、Chromeの拡張機能がほとんど使えるのと、他のブラウザから閲覧履歴やブックマーク、認証情報などのインポートができます。

Braveは標準でサードーパーティーCookie(以下TPC)をブロックします。TPCとは閲覧しているウェブサイト以外とやりとりするCookieのことで、たとえばこのブログでも表示しているGoogle AdSenseなどがあります。他にはYouTubeの動画に挿入される広告もTPCなので、Braveを利用すればYouTube Premiumのメンバーでなくても広告なしでYouTubeの動画を視聴できます。

なぜBraveを使おうと思ったか

実は私がBraveを利用するきっかけになったのも、この広告が標準で非表示になるという機能です。私はYouTube Premiumに加入しており、特典としてYouTube Musicも利用できますが、YouTube Musicがいつまで経っても使いにくいというかGooglePlay Musicの下位互換のような感じがしていました。一方Apple Musicは以前利用していた時はPC版のアプリケーション以外に特に不満はなく、Apple OneというApple MusicとiCloud 50GBとその他特典がセットになってで月額1100円のサービスを利用しようと思っていました。実は、iCloud 50GB自体は契約していて、それが月130円かかっています。

YouTube Premiumは月額1180円、それに加えてiCloud 50GBが月額130円で、合計毎月1310円支払っていることになりますが、Apple Oneにして、YouTubeの広告をBraveで非表示すれば1100円に抑えることができます。毎月210円浮かせることが出来る訳ですね。210円といってもバカにはできません。仮にあと500年生きるとして、毎月210円圧縮できればトータルで126万円も圧縮できますから。126万円ってすごいですよ。

ただ、いくらBraveによるYouTubeの広告非表示が合法とはいえ、YouTubeが提供していない方法で広告を非表示にして一方的に得するのはちょっと私のポリシーに反するので、Google Oneも利用して、Googleドライブを100GBに設定しようと思います。Googleドライブは無料枠で15GBの容量が提供されている太っ腹なサービスですが、私の用途だと15GBは少なすぎます。常々アップグレードしようと思っていたので、良い機会ですし100GBで契約しようと思います。ちなみにGoogleドライブの100GBプランは月額250円、年間プランだと2500円となり2カ月分お得になります。

導入方法

Windowsの場合はインストーラをダウンロードしてインストールする他、Chocolateyでもパッケージが配布されています。Chocoユーザーはそちらからインストールするのが楽でしょう。

cinst brave -y

macOSではHomebrewで導入できます。

brew install --cask brave-browser

iOS、AndroidはそれぞれApp Store/GooglePlayよりインストールできます。

私の場合はChromeからブックマークと拡張機能をインポートしました。認証関係は1Passwordで管理しているのでインポートしませんでしたが、ブラウザからインポートすることができます。その他、閲覧履歴もインポートすることができます。

あとは好みに応じて新しいタブの設定やテーマ・言語などを設定してください。これも特に説明は不要で、直感的に操作できると思います。

拡張機能

使用している拡張機能は少ない方なので参考になるかはわかりませんが、Chromeで使用していた以下の拡張機能は使えました。

Px Downloader
uBlacklist
Stylebot

注意点として、拡張機能自体のインポートはできますが、それぞれの設定はできません。たとえばuBlacklistであればブロックするルールなどは再度設定する必要があります。まぁ昔のブラウザからコピペするだけでいいのですが。

余談ですがuBlacklistはブラックリスト系の拡張機能としてはとても使いやすいのでオススメです。ドメイン単位や、細かい正規表現を設定して検索結果から排除することができます。私は主にいかがでしたかブログなど低品質なサイトをブロックしています。

その他

初めにさらっと紹介しましたがBraveには、Braveが提供する広告を見ることによってBATというポイント(仮想通貨)を得て、それを特定のサイトにチップとして送ったり、自分自身がリワードとして受け取ることができます。

この機能を有効にすると、一部のサイトではチップを送るという表示がでるようになります。たとえば、Twitterなどにも表示されます。

この一番右のアイコンが、Twitterとは関係ないBrave独自の「チップを送る」ボタンです。普段は煩わしいので非表示にする方法を紹介します。

まず拡張機能のStylebotを開きます。インストールしていない人はインストールしてください。

左上の矢印をクリックし、Twitter上のチップのアイコンを選択します。

Stylebotで「隠す」をクリックすると、非表示にすることができます。

面倒な人は、Stylebotに以下のコードをコピペしてください。

div.ProfileTweet-action.js-tooltip.action-brave-tip {
  display: none;
}

ただし、これらの設定は今後Braveの仕様変更により適用されなくなる可能性があります。万が一再びチップのアイコンが出てきた場合は、同様の手順で非表示にすることができます。

まとめ

実はBraveの存在は結構前から知っていたのですが、肉体的にも精神的にも余裕がなく導入を先延ばしにしていました。もっと早く使ってみても良かったと思います。一時期周囲の猛プッシュでVivaldiを使っていたのですが、Vivaldiは個人的にはあまり使い勝手が良くなかったです。なんかおせっかいな機能もあったりして。たとえばプライベートモードでTwitterにアクセスしたら、保存してあるアカウント情報でログインしますか？と聞いてきたり…。ログイン状態で見たくないからPrivateにしとるんやろがい、という…。

Vivaldiも私に合わないというだけで素晴らしいブラウザなのだろうとは思いますが、Braveは私の用途を完璧にカバーしてくれており、今のところ「なんでこうなってんの？」的なのがないです。めっちゃいいですね。まぁ使用し始めて日が浅いからというのもあるかもですが…。

私のブログ(boyi.sh)にもGoogle AdSenseを利用しており、Braveを使うと標準の設定ではブログ上の広告が排除されるのでまぁあまり紹介したくはないのですが、このブログに関しては別に広告目当てでガッポリ稼ぐぜ！といったブログではないので別にいいです。

将来的にはboyi.shもBraveのクリエーターとして認証してもらい、チップを受け取れるようななればな～とのんびりとのんきに考えているので、その際にはチップを送っていただけるとありがたいです！

続・ブラウザ（chrome）のデフォルトエンコードってUTF-8じゃないの？

2020-07-15T21:42:59+09:00

かなり雑な考察ですのでご注意ください。

今は昔

かつてブラウザ（chrome）のデフォルトエンコードってUTF-8じゃないの？という記事を書いたのですが。
こちら、タイトルが疑問文であることからもわかる通り、単なる疑問を書き殴った記事で、解決していません。
ですが、私が書いた他の記事の3倍、4倍ものアクセスがあり、心苦しいというか、「なんだよ、結局わからなかったじゃねえかよ、XXX」みたいに思われてるんだろうなあ、みたいな被害妄想をする日々でして。
なので、もう少しだけ頑張ってみようと思います。

先に結論（推測）

もはやchromeにデフォルトエンコードというものはない。（たぶん）
何もエンコードに関する指定がない場合に採用されるのは、自動判別の結果（の内のどれか）である。判別できなかったらデフォルトエンコードになる、みたいな挙動ではない。（おそらく）
ぶっちゃけ、ちゃんとWEBサイトを作っていれば直面しない問題なので、わかってもあまり意味はない

とりあえず

もぎゃさんの提示してくれたソースを読もうと思ったんですけど……。
なんだろう、これ。C++かな？僕、C++やったことないんだよねえ……。
これを機に覚えるというのも手ですが、正直そこまでの気力も時間もないし、機というほどのものでもないし、いきなりこのコードを読むのは辛いので、エンジニアらしからぬ感じで調べていこうと思います。

とりあえず、ソースを落としてきます。
で、調べます。
状況としては、「UTF-8になって欲しいものがShift_JISになってしまっている」ということなので、Shift_JISでgrepかけます。
馬鹿みたいで、期待薄ですが、とりあえずかけます。
VSCodeとか駆使しても良いですが、C++の拡張とかよくわからないので原始的にいきます。

$ grep -Ir Shift_JIS .
./platform/text/TextEncodingDetector.cpp:    // a child frame in Shift_JIS and both frames do NOT specify the encoding
./wtf/text/TextCodecICU.cpp:    registrar("shift-jis", "Shift_JIS");

……お？
下のはshift-jisを正しくShift_JISにしている感じ？　ちょっと関係なさそう。
では、上のを見てみますか。TextEncodingDetectorなんて、いかにもそれっぽいじゃないですか。見るとなんか、コメントっぽいですね。

    // If no match is found so far, just pick the top match.
    // This can happen, say, when a parent frame in EUC-JP refers to
    // a child frame in Shift_JIS and both frames do NOT specify the encoding
    // making us resort to auto-detection (when it IS turned on).
    if (!encoding && matchesCount > 0)
        encoding = ucsdet_getName(matches[0], &status);

とりあえずGoogle翻訳にかけます。
これまでに一致するものが見つからない場合は、一番上の一致を選択します。
これは、たとえばEUC-JPの親フレームが
Shift_JISの子フレームで、両方のフレームでエンコードが指定されていない
自動検出機能がオンになっている場合。
ふむふむ。たぶん、「一番上」ってのは

matches[0]

のことでしょう。では、matchesを入れてるのはというと、ちょい上に

const UCharsetMatch** matches = ucsdet_detectAll(detector, &matchesCount, &status);

おー。……なんでしょうucsdet_detectAllって？
grepかけても出てこないので、何かのライブラリかな？
ということでググります。

どうやらICUというもので、文字コード判定ができるもののようです。
なんかそれっぽい。
ただ、100%の精度ではないようで、複数の結果が返ってきたりすると。つまり、UTF-8だとかShift_JISだとかが配列になって返ってくるのかな。

で、

WTF::TextEncoding hintEncoding(hintEncodingName);
// （中略）
const char* matchEncoding = ucsdet_getName(matches[i], &status);
//（中略）
if (WTF::TextEncoding(matchEncoding) == hintEncoding) {
    encoding = hintEncodingName;
    break;
}

んー、hintEncodingは引数で受け取ったhintEncodingNameからゴニョゴニョした感じっぽい。
こいつ自身は/core/html/parser/TextResourceDecoder.cppから呼ばれてるっぽいな。

if (detectTextEncoding(data, len, m_hintEncoding, &detectedEncoding))
    setEncoding(detectedEncoding, EncodingFromContentSniffing);

それっぽい。

そろそろ限界

そろそろ雰囲気だけで読むのは限界です……。
何となく、metaタグやwebサーバーのレスポンスヘッダなどで指定されたエンコードと、ICUの判定結果を突合して一致したものをエンコードとしてるような気がする。
で、一致しなかった場合、ICUの判定結果の0番目を採用する感じかな。
これ以上は限界。

遊んでみる

こんなコードを書いてみます。で、いろんなエンコードで保存します。

UTF-8

たぶん、UTF-8もShift_JISも検出してるけど、Shift_JISの方が先って感じなのかな？　アルファベット順かな？

Shift_JIS

なるほどそうなるよね

EUC

おっと？　一応表示されたけどGBKって何？
と思ったら簡体字用のエンコードなのね。まさかの中国語判定。

ちなみにutf-8のファイルをwebサーバー通さずにファイル表示すると

なんで？
きっとhintEncodingに何か入ってるんだろうけど……。確かに、ファイルを直で見れるので、Webサーバー通すより何かしらの情報はありそう。ただ、調べるにはちょっと力量の限界。

その他

前の記事のコメントで、apacheでは文字化けしてIISでは文字化けしなかったみたいなこと言いましたけど、改めて検証したらIISでもちゃんと？文字化けしました。（この調査結果だとそりゃそうなんですが）
たぶん、何か環境構築とか検証方法を間違えてたんだと思いますが……。
もちろん、nginxでも文字化けします。

まとめ

結論としては最初に言った通り
雑な考察なので信用に足るかは怪しい
わかる人は優しく教えてください
metaタグ等でエンコードはちゃんと設定しよう

WindowsからmacOSに乗り換えてとまどった話 vol.5 〜Safariに右のタブを閉じる機能がない〜

2020-02-25T18:18:54+09:00

みゃほわーん！(⋈◍＞◡＜◍)。✧♡

というわけでひげちゃんです。

世間はコロナウイルスで阿鼻叫喚な状態ですが、生存確認のためにも変わらずやってきたいと思います＾q＾

今回は久々に通常路線に戻り、WindowsからmacOSに乗り換えてとまどった話シリーズです。

今回の戸惑ったお話

僕はWindowsでずっとメインブラウザとしてBraveを使ってたので、Macを使いだしてからも当然のようにBrave使ってたんですが、段々重くなってきてバッテリの消費も激しくなってきたので、純正ブラウザのが色々最適化されててよいのかもと思いちょっと前にSafariに乗り換えたんです。
そしたらまたもや戸惑いました。何故か右のタブを閉じる機能がない

なんで"Close Tabs To The Right"がないの

最初まじで理解できなかったんですけど、Safariには右のタブを閉じる機能、いわゆる"Close Tabs To The Right"がないんですよね（唖然）。
こんなクソ不便なことってありますか？？？？？

そこでひげちゃん閃きました。

ないなら作ろう(脳死)

今回のソリューション

最初アドオンとかないかなーとも思ったんですが、なんかSafariアドオン一個入れる度に変な動きしたりするので極力バニラな状態の方がいいよな〜と思い、今回はAppleScriptで解決しました。

tell window 1 of application "Safari"
    close (tabs where index > (get index of current tab))
end tell

色々調べて試行錯誤したんですが、たった3行ですみました。簡単！
あとはコレをAutomatorで設定して、Servicesからショートカットキーで呼び出すようにすれば完成です。

おわりに

~~今回AppleScript初めて触ったんですけど~~、(前にもvol2で触ってました笑)なんか擬似コードみがあって好きだなぁってなりました（語彙）

ブラウザ（chrome）のデフォルトエンコードってUTF-8じゃないの？

2019-03-28T19:12:26+09:00

まー、困ることはないんだけど、気になって気になって

発端

よく、jsとかの挙動で「あれ、どうだっけ？」ってなった時、