Chrome拡張機能 Googleの検索結果を期間フィルターする機能のワンタッチ化

ハウドゥーユードゥー、火頭です。

これまで２つの拡張機能を公開し、もう作るモノもないかなぁと思っていましたが、ありました、困っていること。

グーグルで検索するときに、検索結果の期間指定できますよね？
あれ素晴らしい機能なんですけど場合によってはちょっと面倒なんですよね。

グーグルがデフォルトで提供しているのは、
１年以内とか１ヶ月みたいなキリの良い期間で、半年とか２年以内はない。そういうのは自分でカレンダーみたいなのを指定することになっていて、これが非常にめんどい。

もっと楽に機能のオンオフが出来ればいいなと思い、キーボードのショートカットを
割り当てて、ボタン一つでオンオフが出来るようにしようと試みました。
もちろん期間はある程度自分で選べます。

で、作りました。
仮名「○○までの情報を処分処分♪君」
実装はいつもの如く、かなり難航しました（といっても一日で終わりましたけど）。

グーグル検索の挙動って面白いんですよ。
例えば、グーグルで「dog」を検索します。検索バーにはこんな風に表示されているはず↓
https://www.google.co.jp/search?q=dog&oq=dog以下略
よく見るとキーワードが　q=dog　という形で出ています。

次に、この結果に１年以内の期間指定をしてみると．．．
ＵＲＬの一番後ろに　&tbs=qdr:y　こんなのが追加されます。

最後のｙが年を表しています。１ヶ月や１週間を選ぶと、ここがmやwになります。

おｋおｋ。

じゃ実装としては、ショートカットキーを押した時に、
表示中ページのＵＲＬを取得して、一番後ろに期間指定の文字列を追加してページをリロードさせれば．．．と思うじゃないですか？

実際これはこれで動きます、しかーし。

次、「dog」に続けて「cat」を検索します。
https://www.google.co.jp/search?q=dog&oq=dog 中略 tbs=qdr:y&q=cat
と、なんと今までの文字列を保持したまま、後ろに　q=cat　が追加されます。

え、どんどん後ろに追加しちゃうの？　ゴチャゴチャしてくるんですけど．．．

極めつけはデフォルト以外の期間指定をした場合、

こんな感じの書式が採用されており、見るからに面倒。↓
tbs=cdr%3A1%2Ccd_min%3A2016%2F11%2F01%2Ccd_max%3A2016%2F11%2F04&tbm=
長いです。よく見ると２０１６年１１月０１日～２０１６年１１月０４日と読めます。

これらの仕様、オフ機能を実装している時に気づきました。
オフする時はＵＲＬの期間指定の部分だけを消せばいいや、と思っていたのですが、検索を繰り返すうちに期間指定の文字列がＵＲＬの中にもぐってしまい、消したい文字列の取得が難しくなることに気づいたわけです。

正規表現キライだし、頑張りたくないわけです。

アレコレ試した後、結局は仕様を逆手にとり、あまりスマートとは言えない実装に落ち着きました。動くことは動くので良しとしましょう。

さて、自分で使ってみて、これは中々便利です。珍しく世のためになるものを作った気がします。情報によっては２年～３年より前のは邪魔なことありますもんね、半年もしかり。

かゆいところに手が届く神機能であります。公開したらお知らせします。

※公開しました。↓

chrome.google.com

Chrome拡張機能の公開。

とうとう作成したChrome拡張機能を公開いたしました。

タイピング補佐機能「Type Helper Beta」

Type Helper Beta - Chrome ウェブストア

YouTubeの画質調整する君「YouTube Quality Adjuster」

YouTube Quality Adjuster - Chrome ウェブストア

誰が使ってくれるのか不明ですが、気長にメガヒットを待ちます。

ちなみに市場に公開しているType Helper Betaと、私用に使っているType Helper Betaは少し違うんですよねぇ．．．

市場版は数字をショートカットキーとして登録できない仕様になっていますが、私のはできます。つまりアンリミテッドです。

私のキーボードは、１～９の上には何らかの記号がアサインされているのですが、０には何もアサインされていません、メーカーによってバラつきがあるんですよね。じゃシフト押しながら数字打っても思った通りに動作しないじゃんってことで、数字とか記号は全部ダメにしちゃおう、というのが公開したType Helper Beta、私のは何でもアリのアンリミテッドです。

( ´,_ゝ`)ｸｯｸｯｸ…( ´∀`)ﾌﾊﾊﾊﾊ…( ﾟ∀ﾟ)ﾊｧｰﾊｯﾊｯハッハッ！！

Type Helper Beta 公開一歩手前。

以前作成したショートカット機能あるいはオートコンプリート機能的なChrome拡張機能について。

前回のエントリーでは、これ以上あたらしいデータベース機能を学ぶのが嫌で、（拡張機能にはChrome Storageという独自の機能があります）作業終了！としたのですが．．．いやいや面倒くさがってはいかん、どうせヒマなんだしゆっくりやれば良いんだ、とガンバってみることに。

結果　→　やっぱり超面倒だった。

まず、今回の拡張機能の動作について。

・辞書機能よろしく、フレーズを登録し、アルファベットをヒモづける
・シフトキーを押した状態で、そのアルファベットを0.8秒以内に２度押すと、登録したフレーズがウェブサイト内のフォームに入力される

以上。たとえばｇのキーにgmailのアドレスを登録しておいて、タイピングの手間を省く的な使い方をします。

今までは私専用の機能だったので、JavaScriptに出力したいフレーズとヒモづけアルファベットを全てベタうちしていたのですが、ユーザーが使うためにはＨＴＭＬでポップアップを作り、データベース機能を使って、キーワードの登録・更新・削除などを行わなければならない、ということ。

まず、適当にＨＴＭＬのテーブルやらタブやらを引っ張って来て見た目を整え、JavaScriptでキーイベントや文字列取得の機能を付け足す。

次に例のクロームのデータベース機能を触る。
マニフェストファイルにパーミッションを書き、読み込めることを確認した後、まずは登録機能を試してみる。

このChrome Storage、データを{key : value}という形式で登録するらしい、Web Storage式ですね。valueには変数を渡して中身を保存できるのですが、なんとkeyには変数が格納できない！変数を文字列として認識しよる！

これどうするのよ。
keyにアルファベット、valueに出力したい文字列、を格納した変数を渡すつもりだったのですが、詰まりました。　

ググった結果、オブジェクトを {hiatama} こうやって単品で渡すのは可能らしい。そこでこの単品のオブジェクトの中にプロパティを持たせる形にしました。

var hiatama = {
  myKey : myValue
};

こんな感じ。登録自体は通ったのですが、こういう無茶をすることでデータベースの処理に問題が出ました。

例えばデータベースから全てのデータを取り出す時、普通ならkey : valueを沢山受け取ることになるのですが、このデータベースに入っているのは　hiatama　というオブジェクトのみということになります、その中にkey valueが入っている、と。

プロパティを取り出し、配列に格納し．．．など無駄な作業が増えました。

削除も同様で、このデータベース操作で消すことが出来るのは、hiatamaオブジェクトだけで、その中のプロパティを選んで消すことが出来ません。

「あああああああああああああああ！！データベースの意味ないやろがああああ！」

となりながらも処理を足していきます。

なんやかんや格闘し、大幅に路線変更したりしましたが、どうにか動作しました。

命名「Type Helper Beta」

永遠のベータ版でございます。

それでェ、ストアに公開しようと思ったのですが。
チョ、マテヨ。そういやこれMacで動作するのか？　動作の要のキー番号とかどうなってんだ？　ってなったわけです。

遠くにいるマッカーの友人に協力してもらったところ、動作が不安定らしい。シフト＋２回タイプの操作に成功する時としない時がある、だそうな。どういうことやねん。

おそらくシフトキーを押しっぱにした時の挙動がWindowsと違うんだろーな。でもお手上げ。ったくマック置いてる施設がどこにもないなんてどうかしてるぜ、キンコーズにあるのは知ってるけど、さすがにデバッグさせてくれないだろーし。

まぁいいやfor Windowsってことで出しちまおう。

何々、公開には５ドルかかります？

わたくし１０円玉貯金を始めました。貯まったら公開します。

Chrome拡張機能「Youtube Quality Adjuster」を公開。～先人の知恵を無視する阿呆～

Youtubeの画質は下げた状態が一番良いのだ。テザリング生活者にとってデータ通信量は死活問題なのだから。

というわけで、クロームの拡張機能制作の第二弾として「Youtubeの画質下げる君」に着手したお話。

とても難航しましたが、なんとか目的を達成。

この手の操作はYoutubeが公開しているapiを通じて操作をするものと思っていましたが、このapiは、動画プレイヤーをウェブページに埋め込む時を想定しているようで、つべ本家のページで設定をいじる情報が中々出なくて困りました。

調べ物をしている途中、

本家ページで、コンソールに「document.getElementById('movie_player').playVideo()」とか打てばプレイヤーを操作できるんだよ、という情報をキャッチ。

え、マジで？　と思って実際やってみたら．．．プレイヤーが操作できた。

こ、こんなことが可能だったのかどぉー！　知らなかったどぉーーーーー！！！（重ちぃー風）

もしかしてapiの読み込みとかいらないのか？ただ命令を飛ばせばプレイヤーが操作できるのでは？

今回の機能の動作イメージとしては

つべの動画ページを開く　→
getPlaybackQuality()で動画の画質情報をゲット　→
低画質でなかった場合は強制的に低画質に設定　setPlaybackQuality()　→ 

動画を選ぶたびに画質チェックとセットをしなおす。これだけです。

さて、具体的な可能性は．．．

１　Content Scriptを使う。
２　Event Script(Background Script)を使う。
３　javascriptをページにインジェクトし操作する。

この三つです。

１はＤＯＭアクセスはできるけどページ内の関数にはアクセスできない。２はＤＯＭアクセスも関数アクセスもできない。ページ内の関数にアクセスできるのは、３のインジェクトスクリプトのみ。

つまり．．．

インジェクトスクリプト「画質情報をゲット、結果をコンテンツスクリプトに通知します」　→

コンテントスクリプト「むむ、高画質再生してますぞ！　低画質に直しなさい！」　→　
インジェクトスクリプト「オス！画質設定を直しました！　結果を通知します」　→　
コンテントスクリプト「うむ、よろしい」

みたいな感じになりますかね。

ただし調べてみると、インジェクトスクリプトにメッセージを飛ばしたり、逆にメッセージを送ってもらうことは基本的に無理な様子　※できます、詳細は追記にて。

画質を調べた結果の通知や画質を設定したいときの命令通知をどうするのか．．．

えーいもどかしい。

メッセージとか無視して、インジェクトしたスクリプトから有無をいわさず画質を設定することは可能、onClickイベントで早々に動作確認が出来ました。ハイめでたし。でもなぜかload / onload関数が効かないのです．．．画質変更は自動でして欲しいのに。

さて、せっかくなのでメッセージのやりとりをもう少しがんばってみた所、以下の書式でインジェクトスクリプトからコンテントスクリプトへのメッセージ通知に成功。

new CustomEvent('関数名', { 'プロパティ名': データ });

コンテントスクリプト内でイベント設定し、インジェクトスクリプト内で上の関数にプロパティとしてデータを持たせ。コンテントスクリプト内で引数としてゲットできます。なんかわけがわからないので嫌になりました。

やっぱ素直にapiを通すのが良かったのかなどと思いつつ、作業終了。

追記：　

・ウェブページからメッセージを送受信するには、マニフェストファイルでの設定とonMessageExternalを使うことで可能、ただしコンテントスクリプトとではなく、バックグラウンド / イベントスクリプトとの通信になります。

・load / onload関数が実行されないのは謎のままですが、ページの変換をMutationObserverで監視することで同じ機能を実装できました。

・学習のためにメッセージの送受信にこだわっていましたが、動作のみを考えると不要。実際の挙動は　コンテントスクリプトからYoutubeページにスクリプトをインジェクト　→　そのスクリプトにて画質を取得したり低画質に設定する関数を叩く、インジェクトされたスクリプトにはMutationObserverも仕込んであり、ページの移動を監視し、新しい動画ページに移った時に画質の取得と設定を繰り返すだけです。

さて、誰のＰＣにイタズラで仕込んでやろうか．．．。

「よ」は、よろしくお願いします、の「よ」

最近スマホ＆ＰＣのデータ通信量の削減にやっきになっていた私ですが、その過程でクロームの拡張機能に注目しました。

調べたところ、html css javascriptなど私にも馴染みがあるモノで動いていることが判明し、これちょっと作ってみたいな、と思った次第です．．．物事は調べれば調べるほど、嫌になるのが常なので、モチスタベーションが切れてしまわないうちにとりあえず一つ作ってみることに。

作ったのは自分専用の辞書機能です。

ページのフォームにメールアドレスとか電話番号とか打つのって面倒じゃないですか。んで適当に「あど」→　変換　などで自動変換できるように辞書に登録するわけですが、使うアドレスが３つ４つあると煩雑です。あと日本語から変換する、という所もなんか気持ち悪いし。

そこで例えば、シフトキーを押しつつ「ｇ」を素早く２回打つとgmailのアドレスが入力できればなぁ、と考えたわけです。何故２回かというと、シフト＋ｇで大文字が打ちたい場合もあるだろうということで。

動作例は以下。

onkeydown(e)関数でシフトキーが押してある状態を感知　→　

その状態でｇを一度打つとフラグが立ち、setTimeout関数でタイマーがカウントを始める　（この時点では大文字Ｇが画面に入力されています）→　

０．８秒以内にもう一度ｇを打つと条件成立　→　

ページ内でクリックされているフォーム欄を取得し、そこにgmailアドレスを入力します（一回目で入力されたＧの文字を消し、かつそれ以前に入力されていた文字があるとしたらそれはそのままにします）。　→　

時間切れになるかシフトキーを途中で離すと条件不成立、フラグが落ちます。

とまぁこんな感じ。メールアドレスはホットメールならh、ヤフーならｙという感じで設定。ついでに電話番号も設定しておきました。

クロームをデベロッパーモードにし、作業フォルダを読み込むとブラウザで拡張機能として使えるようになります。

さて今回はページとのやりとりがＤＯＭだけなので、難しいことは何もなかったのですが、次はＹｏｕｔｕｂｅプレーヤーを操作する拡張機能を作りたいんですよね、これは何かと面倒です。実は最初にこちらを試しましたが、作業失敗で凍結中。

あと、今回の拡張機能、データベースよろしく単語の登録・編集・削除が出来るようにするのが当然ですが．．．めんどくせぇ。

なんか拡張機能用のデータベース機能があるみたいですが、その手の学習はwebstorageやらindexedDBやらmySQLやらもう沢山でございます。自分専用の機能なので、コードにベタ打ちして動作確認し、モチスタベーションが消滅。

モナコあたりでモナド囲ってよぉ～ 【Haskell モナド初心者がまず読むべきなのは】

私、地味にプログラミングのお勉強は続けています。

制作のモチスタベーションの低下がいちじるしい最近、調べ物や学習している時間が多いです。というのは関数型言語に少しでも触れてみたいということでHaskellを始め、その学習のためにサイトを漁っているわけです。

Haskellは初めての関数型言語としてはあまりオススメではない、との意見も目にしますが、手をつけちゃったものは仕方がありません、なにしろ導入にあたっての数々のダウンロード．．．データ通信は貴重なんですからねェ　ヒヒッ。

で、このHaskellですが、やはり難しい。というか書式に慣れるまで時間がかかります。それに型注釈っていうんですかね、理解しないまま読み進めると人のコードが読み進められません。

こういうの↓

(+) :: (Num a) => a -> a -> a

んで、Haskellといえばモナド。

このモナドという考え方がどうやら難関らしくビビっていました。実際に色んなサイトの説明を見学して「あ、こりゃ無理」と思っていたのですが、あるサイトの説明がすごく分かりやすかったので紹介します。

こちら↓

qiita.com

もとは英語のサイトですね、これは翻訳グッジョブです。

初心者はこのサイトからモナドの学習を始めることをオススメします。英語版にはモナドを使ってエクササイズも載っているので英語が得意な方にはさらにオススメです。

こういう説明に上手く当ればプログラミング学習は楽なんですけどね。情報に溢れたウェブ世界、必要な情報を自力で探すのは大変です。

別に私がHaskellが出来たって何の意味もないという噂もありますが、何かを学習することは良いことです。

電子工作もやりたいのですが、ハンダゴテが怖くてためらいます。

はぁ．．．今月もデータ通信量のやりくりが大変だわ．．．。

光回線のない田舎に住んでいる火頭です。ネットはテザリングでまかなう猛者（もさ）であります。

シムフリーのケータイで１０ギガのプランにしていますが、はっきり言って１０ギガあっても足りないといえば足りません、おかげでむやみに動画見たりとか音楽聴いたりとかしなくなりました。

私のプランには３日で１．７Ｇの制限がついていて、これが結構ネックです。毎日５００メガずつくらい使っていればそりゃ安全なのですが、そうはいかないもので、ある日はほとんどネットを使わないかと思えば、まとめて音楽や動画を見たりして１ギガ近く消費してしまったり．．．こうなってくると向こう２日ほどネットの使用を考えないといけませんので面倒です。

ちなみにテザリングでネットを使うと、スマホだけで通信するよりも多く通信量が発生します。なのでＰＣでのネットサーフィンを減らすのが一番良いです。あとは寝る前にスマホのデータ通信をオフにしたり、低速モードに入れたり．．．うーん、涙ぐましい。

ま、そんなのケチくさいし、他の方法をご紹介。

イチオシなのがChromeブラウザに拡張機能として取り入れられるデータセーバー。自動で通信量を減らしてくれます。

chrome.google.com

スマホのChromeにはデフォルトで入っているっぽく、設定にこのデータサーバーの項目がありますのでオンにしておくのがおすすめです。データ通信量を２０～３０％抑えてくれます。

ＰＣ版は上のリンクからダウンロードしてください。ボタン一つでオンオフが可能、オンにしても特に速度に影響を感じないので（テザリングですし）私は基本つけっぱなしです。

残念なことに一部のサイト（ｈｔｔｐｓ系のサイト）では効果が無視されます、そしてとても残念なことにYouTubeがこのｈｔｔｐｓサイトに当てはまり、データの削減をしてくれません。

スマホであれば、Opera Maxというアプリがあります。こちらはYouTubeであろうとどんなアプリのデータでも削減してくれるというスグレモノですが．．．削減指定したアプリの動作に影響を与えすぎる感があります、対象のアプリが強制終了することがあります、設定で個別にオンオフを指定できるのですが．．．ちょっとねぇ。

ＰＣであればもう一つ、広告表示を抑えるこの拡張機能もおすすめです。

chrome.google.com

元は通信量削減を狙ったモノではありませんが、まず広告をブロックするだけでも嬉しいことと、自動でブロックされない広告は手動で消せます。というかｈｔｍｌタグを指定して消しているっぽいので広告以外も消せます、これを悪用し、よく使うサイトの気にいらないセクションは片っ端から消しております　笑。

仕組みはよく分からないので、通信量削減にはどれほど効果があるかはわかりませんが、画像を読み込まないだけでも多少の効果が期待できるのと、表示が快適になるのは嬉しいですね。

ほいじゃまた。