読者です 読者をやめる 読者になる 読者になる

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

一人バンド、火頭工房

Type Helper Beta 公開一歩手前。

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

 

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

 

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

 

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

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


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

 

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

 

まず、適当にHTMLのテーブルやらタブやらを引っ張って来て見た目を整え、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で動作するのか? 動作の要のキー番号とかどうなってんだ? ってなったわけです。


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


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

 

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

何々、公開には5ドルかかります?

 

 

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

先人の知恵を無視する阿呆。

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

 

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

 

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

 

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

 

調べ物をしている途中、

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

 

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

こ、こんなことが可能だったのかどぉー! 知らなかったどぉーーーーー!!!(重ちぃー風)

 

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

 

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

 

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

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

 

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

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

この三つです。


1はDOMアクセスはできるけどページ内の関数にはアクセスできない。2はDOMアクセスも関数アクセスもできない。ページ内の関数にアクセスできるのは、3のインジェクトスクリプトのみ。

 

つまり...

 

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

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

 

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

 

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

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

えーいもどかしい。

 

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


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

 

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

 

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


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

 

追記: 

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

 

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

 

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

 

さて、誰のPCにイタズラで仕込んでやろうか...。

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

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

 

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

 

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


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

 

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

 

動作例は以下。

 

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

 

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

 

0.8秒以内にもう一度gを打つと条件成立 → 

 

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

 

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

 

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

 

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

 

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


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


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

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

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

 

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

 

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

 

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

 

こういうの↓

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

 

んで、Haskellといえばモナド

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

 

こちら↓

qiita.com

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

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

 

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

 

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

 

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

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

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

 

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

 

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

 

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

 

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

 

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

chrome.google.com

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

 

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

 

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

 

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

 

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

chrome.google.com

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

 

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

 

ほいじゃまた。

スマホのポップアップ広告を一掃する方法 (案)。

最近スマホの広告がひどい。(別にきわどいサイトばかりを見ているわけではない)

 

サイト上をゆっくりと移動するタイプの広告をよく目にします。これはスクロールをする時に誤タッチを拾うイヤな奴です。

 

それならまだカワイイ方で、問答無用にいきなり画面が変わって「ウィルスが検知されました」などドキっとするような文言を目にすることが増えました。いわゆるフィッシングサイトですね。

 

さて、どうやって一掃するかというと。

 

JavaScriptをオフにする」です。

 

最近のブラウザなら設定のどこかにjavascriptをオフにするボタンがあります。この手の広告や別のサイトに飛ばす機能はjavascriptで動作しているので、オフにしたらまず表示されないです。さよならうざい広告達。

 

デメリットは、javascriptに頼っているサイトなどは見れなくなります、例えば2ちゃんは見れない。

 

それからブラウザ内でグーグルマップを表示させるようなサイトは地図の部分が表示がされなくなります。サイト内の動画も見れなくなるかもですねぇ、あとは装飾や動きがなくなって地味になったり。

 

地図はブラウザではなくmapアプリで見ればいいですし、動画も別のアプリで開けば問題ありません。2ちゃんは見れないですが、まとめサイトは大丈夫。ワンボタンで設定の切り替えができるようになると楽なんですけどね。

 

私などはこれでかなり快適になりました。javascript勉強しといて良かったぜ。

 

ほいじゃまた。

ジャズギターのウォーキングベース+コード奏法

なぜ多くのポップスミュージシャンはジャズに憧れるのか...

 

大抵のミュージシャンはクラシックとジャズを特別扱いします。
「実際に難しいことをやっているからしょうがない、演奏技術を追いかけるとジャズかクラシックに行き着くからね」なんて聞いたりします。


人のバンドのサポートしたりしていると、「よし、俺達も次はジャズに挑戦しよう。火頭ちゃん練習よろしく」なんてことになるんですよね。こういう安直なモクロミはロクなことにならないのを経験的に知っているので全然乗り気がしないのですが。

 

かくいう私も、ギターを練習する、といえばジャズを題材にすることが多いです。これは即興を練習するのにジャズが手ごろだからというのが一番の理由で、ジャズを研究したいというわけではなかったりするのですが...なんかややこしい。


ともあれ、たしかにジャズの即興演奏は多くの人の憧れであり、私も早々に学習すべき領域であります。

 

で、今回は何をするかと言えば、ジャズギターの伴奏法の一つをご紹介するということ(はっきり言って即興とはあまり関係がありません)。


ウォーキングベースをしながらコードを同時に放り込む、という奏法を考えてみたいと思います。ボーカルの伴奏を一人でする時なんかに使えると思います(というかそれしかない?)。でも手っ取り早くジャズっぽくて良い感じの奏法です。

 

まずはウォーキングベースの可能性から、枯葉を題材にしてみましょう。

 

こういうコード進行の時。Key = Gm

f:id:hiatama:20160820210146p:plain

ベース音は例えばこう。1、3拍目はコードトーンにするのが基本みたいです。

f:id:hiatama:20160820210206p:plain


3拍目はコードの3度の音になり、2拍目もキーの音から選んでいるので素直な響きがします。(しまった、4弦じゃなくて6弦を使った方がベースラインらしかった)

 

別パターン。

f:id:hiatama:20160820210338p:plain

4拍目は次の小節の一拍目の(大体がルートになりますが)半音上か下、というパターン。これは4拍目の音がよくキーの音から外れるので、少しビックリするような感じの音になります。それが良いのです。


あとは、同じ音を叩いたり、行ったり来たりするような動きもOKです。横の動きが好まれますが(ウォーキングというくらいなので)別に跳躍したって大丈夫です。

f:id:hiatama:20160820210508p:plain

では次にコードを放り込むぅ。

1拍目、表や裏に

f:id:hiatama:20160820210540p:plain

まぁこれは当たり前です。
ベースを動かし続けることが大事なので運指を考慮する必要があります、慣れ親しんだガッツリ系の押さえかたはとりあえず忘れましょう。4弦がルートになるケースも結構あるので、ついでに覚えておきましょう。

 

ベースライン用に指を空けておきたいので、コードの5度の省略などは当たり前に行います。2小節目F7のCの音は省略することが多いです。

 

さて、次はさきほどの半音アプローチのパターン、今度は3、4拍目にもコードを当ててみましょう。繰り返しですが、コードをガッツリおさえるのは運指が厳しいので、省略を上手く使います。

f:id:hiatama:20160820210726p:plain

おお、3拍目、4拍目のおかげでゴージャスに、それに4拍目はなんともエキサイティングな音がします。


3、4拍目のコードがどうなっているかは音楽理論を学習する必要があるのですが、
例えば...
・次にくるコードと同じ種類のコードを使い、上から(あるいは下から)アプローチする
ドミナントコードでアプローチする
・キーの音を優先しマイルドにアプローチする

などがあります。要は欲しい音が鳴るように選びます。


さて、最後にまた素直な音がするパターンから、1拍目にコードを入れるだけでは寂しいので3拍目の扱いについて考えましょう。

 

これは実はかなり難しいです。
3拍目にコードを入れようとすると普段とは違ったコードの押さえ方を習得しないといけません、ポジション的にどうしてもそうなります。

f:id:hiatama:20160820210838p:plain

3拍目のベース音はコードトーンの3度なので、ということは残った指で、ルート、5度、7度の音(その一部でも可)を足す、という考えになります。

 

まともに伴奏として使えるレベルまで習得するには、6弦がベース音の場合、5弦の場合(できれば4弦も)に分けて考え。

これを最低でも、メジャー7th、マイナー7th、ドミナント7(できればマイナーセブンフラット5、ディミニッシュ)のコードで覚えないといけません。かなり押さえ方にバリエーションがあるので、大変です。まぁこういうフィンガーボードに慣れましょう、というのはジャズギターで必須なんでしょうけど。

 

例えばこういうパターンになります、ベース音の動きがネックになって忙しい。

f:id:hiatama:20160820211113p:plain

3度が低音になった場合のコードの押さえ方というのは、転回形と呼ばれます。例えば3度がベースの場合はこんな感じの押さえ方が考えられます。↓ 場合によって、7度の音を省略したり、5度を省略したり、2音しか鳴らさなかったり、と色々考えられます。

f:id:hiatama:20160820214907p:plain

フィンガーボードトレーニングとして良い体操になりますので、お試しあれ。

 

こういうことをやり出すと、え?じゃ5度ベースの場合とか7度ベースの場合とかもやるの?となりがちですが...今回のウォーキングベース奏法は結構例外で、普通は1~4弦だけ使って覚えます(これは定番のトレーニングです)。

 

ウォーキングベースの話に戻ります。あとはこれらのパターンを自由に組み合わせれば、完成です。慣れるともう少しリズムに変化をつけたり、コード音を足したり、テンションも使ってみたり、ベースパターンを工夫したり出来ます。追加のトレーニングとして、ベースライン下降パターンとその場合のコードの転回形や、もっとアウトさせてみる、などが考えられます。


練習していると、このパターンは6弦から始める場合に向いているとか、メジャー7thコードの場合がやりやすいマイナーコードがうんぬんなど色々分かってくると思います。

 

最後に今回のエントリーを書くに当って大いに参考になった動画を一つ。

youtu.be

いつか満足にジャズが弾けるようになったら、ジャ爺(ジャジィ)という名前で活動したいと思います。

 

ではまた。