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

一人バンド、火頭工房

楽曲「Fragments and Dreams」を公開。

楽曲「Fragments and Dreams」を公開しました。

今回は珍しく波形を切り貼りしたり、逆回転したり、サンプリング音源を多用しました。

soundcloud.com

一人で楽曲制作をやるにはこのスタイルを追求するのが良いのですが...

それ用のDAWを使っているわけではないので、作業がかなり面倒。

Chrome拡張機能「Your Eye Protection」を公開。

どうも火頭です。

 

久しぶりの更新になります。

年始は結構ヒマで、曲の2つ3つくらい出来るだろうとタカをくくっていたのですが、実際は全く出来ませんでした。サボっていてはダメですね。

 

さて、今回のエントリーは新しい拡張機能です。

JavaScriptも最近触っていなかったので、リハビリもかねて公開しました。

chrome.google.com

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

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

 

以上です。

明らかに誰かがすでに公開しているであろう機能ですが、

目的に「目に優しい色、文字の大きさ」を謳っております。

 

最近、背景が白だと目がキツイんですよね。光度を落としたら見えにくいし、白を見続けたあとに背景真っ黒のサイトとかにあたるともうダメ、メマイを起こしてしまいます。

 

そこで目に優しい、とされる和風の色を4種類ほどピックアップし、デフォルトカラーとして選択できるようにしました。お気に召さなければ自分で16進数のカラーコードを入力することも可能です。

 

フォントサイズは説明不要、個人的には1.1emが好きです(16pxくらい?)。

Body要素の他、文字によく使われる、p要素やspan要素にも適応してありますので、大抵は効果があるはず。

 

やはりシンプルな機能は強力です。かなり目が楽になったと感じています。

欠点としては、背景色変更は当然背景のみに適応されるので、それ以外の要素は白く箱が見えてしまうこと、つまり背景をがほとんどないサイトは恩恵が少ない。フォントの面では、文字要素で拾いきれないものがあるところですかね。これらの対応は様子を見てから。

 

この機能、思いっきりサイトデザインを壊すのでウェブデザイナーさん達に怒られそうですが...。

 

しらぬ、それではまた。

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

どうも火頭です。

 

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

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

 

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

 

 

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