新・日々の暮らしに疲れてない?

一人バンド、火頭工房

クローム拡張機能まとめ。

どうも火頭です。

 

今まで作ったグーグルクローム拡張機能の説明です。

これらの機能、自分が欲しくなって作ったモノなので、実際に自分でもバリバリ使っています。どれもそれなりに愛着があり、役に立ってくれています。

 

個別に、技術的なポイントや、気づいたことをコメントしたいと思います。 

 

 

1つめ。「Tab Shortcuts」

 

これが一番役に立っている気がするので、これから。

chrome.google.com

マウスクリックにイベントを取り付けるタイプの機能、Tabs APIWindows APIを使いました。

 

左クリック長押しでリンクを新タブで開き、右ダブルクリックで現在のタブを閉じる。シンプルなだけに強力、とても便利です。

 

バグが多かったのもこの機能で、動画の再生ボタンが押せなくなったり(いかがわしい動画ではない)イベントが思うように発火しなかったり、クリック制御は色々試してみないと分からないことが多かったです。そもそも全ての拡張機能が作動しないページや要素も存在し、それを知らないユーザーからすると不満が残るかも。

 

この機能を作った辺りから、ポップアップウィンドウで機能のオンオフが出来るようにしたり、自分のサイトへのリンクを貼りはじめたり、拡張機能を作る時のテンプレートになっています。

 

 

2つめ。「Page Scroller」

 

左クリックを押しながらブラウザの左端を触るとページトップまでスクロール、右端を触るとそのスクロールをキャンセルする、という機能。

chrome.google.com

 最近長いサイトが多いじゃないですか、まとめサイトとか。上まで戻るのが面倒だったりするので、自作しました。

 

これもマウスクリック系の機能ですね、あとはページのサイズやクリックした位置を取得しスクロールメソッドを使うだけ。

 

最近ではサイト側が気を利かせてスクロール機能を導入していることも多いですが...私はスマホJavaScriptはオフ、PCでは余計な要素は表示できないようにブロックしています。

 

※余談ですが、邪魔なウェブ広告は大抵JavaScriptで動作しています、オフにすると一掃されてめちゃくちゃ快適になります、代償としてページの表示が崩れたり、閲覧自体できなくなったりするので、そこはトレードオフでございます。

 

ちなみに、公開版とは別のプライベート版では、右タッチでページ最下部にスクロールする仕様にしています。←使用感は一長一短。

 

 

3つめ。「YouTube Quality Adjuster」

 

何を隠そう一番ダウンロードされている機能がコレ、さすが世界のYouTube

chrome.google.com

自動で画質調整をしてくれる機能です。私がド田舎住まいで、テザリングだけでネットをまかない、データ使用量削減にやっきになったことから生まれた機能。

 

YouTubeのページに直接JavaScriptファイルを埋め込むことで動作しています。あとはプレイヤーを getElementById() で取得すれば、画質や再生のコントロールが出来ます。

 

ごくマレに機能が効いていない時がありギョっとしますが、理由は不明。偶発的なのでソースコードのロードのタイミングとかそんなんかな。

 

プライベート版ではさらに設定をいじって、画面を自動でシアターモードにし、音量は7割くらいで再生するように設定しています。フフン。

 

 

4つめ。「Google Search Filter by Period」

 

グーグル検索の期間指定をALTキーで指定できるというショートカット。

chrome.google.com

技術的には、URL取得と、文字列の操作。

 

使ってみて、機能の作動をALTキー1つに頼っている所がネック。情報によって、一週間指定をしたい場合と、2年指定をしたい場合ありますもんね。

 

別にショートカットキーを複数割り当てれば解決なんですが...ってかユーザーがキーを選べるようにすることも可能なんですが...実際にプライベート版では複数割り当ててるんですが...メンドクサイ

 

 

5つめ。「Type Helper Plus」

 

最初に作った機能です。データベース機能とDOM操作で実装。

chrome.google.com

フォームにメールアドレスやパスワードを打ち込む手間を減らす目的で作ったのですが、たぶん多くの人はオートログインを使っていることと、特定のページではログイン認証に失敗するので、良くないですね。

 

例えば私の場合、シフトキーを押しながら「hh」とタイプするとホットメールのアドレスが入力されたりするのですが、実際にホットメールのページで試すとアドレスの認証に失敗します。アドレスは手打ちし(コピペでもOK)パスワードで機能を試すと、これは通ります、サイト側の処理が違うんですかねぇ。

 

パスワード関連でユーザー体験を損ねてしまうと致命的です。私はこの「クセ」を知っているので、うまく付き合っています。

 

 

6つめ。「Your Eye Protection」

chrome.google.com

機能1 ウェブサイトの背景をマイルドな色にしてくれます。

機能2 フォントの大きさを変えてくれます。

 

 背景が黒とか白とかは目に悪そうなので、作りました。

 

以上、今までに公開した拡張機能のまとめでした。

もう作るモノもないという噂もあります。

 

Chrome拡張機能「ページスクローラー」を公開。

どうも、火頭です。

 

新しいクローム拡張機能を公開しました。

今度はページスクロールを助けてくれる機能です。

 

chrome.google.com

 

左クリックを押しながらカーソルをブラウザの「左端」にタッチさせるとページトップに戻ってくれます。バビューン。

 

もうひとつ、左クリックを押しながらカーソルをブラウザの「右端」にタッチさせると最後に機能を作動させた位置に戻ってくれます、つまりキャンセルアクション的なモノです。うまく使うとページ内を行ったり来たりできます。

 

最近まとめサイトとか、技術系のながぁーいページを読むことが増えたので作りました。

 

これで私のブラウザは自作の便利機能でいっぱいになり、怠け者ライフに磨きがかかりました。ダラダラ

Chrome拡張機能「タブショートカット」を公開。

どうも、火頭です。

 

ローム拡張機能「タブショートカット」を公開しました。

 

機能1. 左クリック長押しでリンクを新規タブで開きます。

機能2. 右ダブルクリックでタブを閉じます。

 

chrome.google.com

 

中々便利な機能ですので、使ってみてください。

 

注意1.  特定のボタン(例えばこのブログの記事を更新するボタン)が押せくなるバグが確認されました。クリック動作のキャンセル処理が邪魔をしていた模様。修正済みですが、もし似た症状が出た時はこの機能が悪さをしている可能性があります。その場合エクステンションを開いて機能をオフにしてください。

 

注意2.  どの拡張機能もだいたいそうですが、ページが読み込まれていない状態では作動しません。

Chrome拡張機能 左クリック長押しでページを新タブで開くショートカット機能 続き。

Chrome拡張機能 左クリック長押しでページを新タブで開くショートカット機能 の追記、改善し快適に動作するようになりました。

 

まずsetTimeout関数が作動しない問題について。

これは私の勘違いで、作動していないのはdocument.onmousedownイベントの方でした。これがあるサイトのある要素ではなぜか作動しません、最後までこの原因は不明、onmouseupやonmouseoverは作動するのに謎すぎ。

 

解決策として、作動が確認できていたonmouseoverイベントにてURLを取得、同時に「そのURLを持つ要素」に対してonmousedownイベントを取り付け、作動するよう仕組みました。onmouseoverイベントは発火しまくるのであまり好きではないのですが仕方ありません、原因がわかったら直します。

 

次、新タブに勝手に注目してしまう問題。

大幅にメスを入れました。chrome.tabsやchrome.windowsといったAPIを使えばタブを新規作成したりページを開いたりできます、ここでfocusを指定でき、これによりタブ移動を制御できました。あまり期待していなかったので、成功した時はかなり嬉しかったです。このAPIを使う方法は当初のやり方よりかなり面倒なのを知っていたので、決意するまで腰が重かったです。

 

あと、新タブ問題を制御できたということで次の課題。

長押しで新タブでページを開いた後、マウスボタンを離すとクリックイベントが発火してしまい、元タブの方でもリンクを開いてしまう問題。

 

ま、そうなるわな。関数のどこかでマウスクリックを preventDefault() などでキャンセルし、ボタンを離しても何も起こらないように、かつonmouseup時にクリック機能を復活させるため document.onclick = " "; これで戻りました。

 

一応これで完了。

どうしても作動させられないのは、iframe(まとめサイトとかで記事のタイトルがズラーって並んでる小窓みたいなアレです)の中のリンク取得や、サムネイルを自動で一覧表示しているようなサイトの場合。これらはウェブセキュリティ的にJavaScriptからリンクの取得ができないようになっていますので、無理。

 

この拡張機能、しばらくテストを重ね、問題なければ公開します。

でも作動する場合としない場合があるっていうのはちょっとなぁ...。

 

↓公開しました。

chrome.google.com

Chrome拡張機能 左クリック長押しでページを新タブで開くショートカット機能

どうも。火頭です。

仕事終わり夜のひととき、ネットサーフィンを楽しむ僕は以下の画像のような感じです。

f:id:hiatama:20161222225634p:plain

大抵はこの態勢で右手だけを動かしてページを閲覧していまして、タイピングする時はこの半身の状態からめんどくさそうに左手を伸ばして行います。

 

ロームの素晴らしい機能の一つに「コントロールキー + リンククリック」がありますよね、ページを新しいタブで開いてくれる神機能です。そうです、このコントロールキーを押すときにも私は半身の状態からめんどくさそうに左手を...

 

そこでクローム拡張機能として、マウスクリックの長押しで同じ機能を実装しようとしました。

 

 結果  一歩足りず

 

なんとクロームのポリシーだかのせいで、思うような機能には一歩及びませんでした。

※追記もありますので、改善した話も合わせてどうぞ。

 

 

処理の概要は以下↓

 

リンクを左クリック長押し → 

フラグが立ちタイマー機能が作動 → 

一定時間が経つと条件成立、onmousedownイベントからURLを取得 → window.open(取得したURL, '_blank')で新しいタブでページを開く → 

右手だけで行えてこりゃハッピー チヒッ

 

以上です。

 

問題は新しくタブを開いた時、元のページを離れ自動で新しいタブの方を注目してしまうんです。これをコントロールするために、任意のタブに注目する focus() や注目を外す blur() というメソッドがあるんですが...これがクロームのポリシーだかで無効なんです、直してくれないかなぁ。

 

ということで、長押しすればちゃんと新タブでページを開いてくれるんですが、元のタブを離れてしまうので、戻るために余計なクリックをしなければなりません。普段行っている、気になるページを新タブで開きまくって後で順に閲覧する、という行為が余計めんどくさくなったような...

 

さらに、あるサイトでは長押し判定のタイマーとして使っているsetTimeout関数が作動しないっぽい。私が別で使っている広告表示を制御する拡張機能(ソースのロードをブロックする?)などと干渉しているのか?など悩みましたが、原因は特定できず。うまくいかないもんです。 

 

次、改善した話 へと続く。

楽曲「Woods of Ashes」を公開。

楽曲「Woods of Ashes」を公開しました。

 

結構前に作った曲で、歌入れというか声入れ(?)をしていなかったので、インスト状態になっていたのですが、こないだ完成させました。

 

というわけで私の肉声です。加工しまくって魔女声になっていますけど。

イィーヒッヒッヒ!!!

 

soundcloud.com

 

Woods of Ashes

 

dim light, to your right
where things fade away
It touched your soul, and my soul
correct me, all wrong doings

 

give away all your secrets
taste of true goodness
over head, nothing sees us
all is here, meet me in

 

woods of ashes
meet me in this

woods of ashes
it's time to fade


did you, see what's there?
the ones shape the words
going through valley of damned
when stars fall, count me in

 

woods of ashes
meet me in this

woods of ashes
it's time to fade

Web Audio API のfilterの扱いが意外と繊細だったことについて。

どうも火頭です。

記事のタイトルは少しラノベを意識してみましたがいかがでしょう?

 

自分のサイト こちら で自作の音楽を聴けるようにしていまして、これはWeb Audio APIという技術を使って楽曲を再生させています。比較的新しい技術なので、ブラウザの更新に伴いバグが出たりするのでたまに動作確認をするのですが、久しぶりにバグに出くわしました、というお話。

 

楽曲の再生途中で「音がばらばらと崩壊する」とでも言いましょうか、ジジジ...と急に音が消え始め、しばらくして音量が0になる、みたいな感じ。タイミングがまともではないので、あーバグだな、と思いました。

 

元のmp3ファイルが破損しているのかな?と思ったのですが、再生してみても異常なし。ローパスフィルターをいじったらバグが出るので、どうやら原因はフィルターにあり。

 

var default_frequency = 44100;

var new_frequency = 400;

 

filter.frequency.value = new_frequency;

 

こんな感じで変数で代入してるのがダメなんかなーとか、不毛な試行錯誤をした結果...

 

var default_frequency = 44100; ←こいつがダメだったようです。

 

数字を20000とかキリの良いものに変えたら治りました。なんじゃそりゃ!

 

正確には、元が44100だったかなんだか忘れましたが、とにかく指定する周波数が問題だったようです。わけがわからん。

 

最後に言いたいことは、私のサイトで音楽聴いてね、ということです。YouTubeとかSoundCloudにはない素敵な機能を備えてるんだからー。

 

おわり