でも、そういう時に作ったものには結構高い確率でバグが潜んでいるので、喜ばしいばかりでもないw

半ば疲れつつも飽きずに作っているMlhi(音楽再生履歴・感想の記録・検索システム)のwebの見た目を改良できたので、結構進んだ気がした。とはいえ、それは、SpotifyのミニプレーヤーにMlhi対応機能を組み込むための準備なので、実際にはそれほど進んでいない。というのは昨日の話で、今日は更に進み、ミニプレーヤーにMlhi対応機能を組み込んで動き出した。いろいろ改良したいことはあるが、「一段落」している。

昨日からの作業は、ミニプレーヤーに対応機能を組み込むための準備とその実装である。いろいろな機能を組み込みたいが、「ミニ」なので表示に使える面積が小さい。そこで、何をどのように表示するかの検討が重要だ。

今回組み込もうとした機能は、以下である。

  • 評価の表示
  • 再生履歴の表示
    • 再生回数
    • 完奏率

評価はwebと同様にアイコン(♥など)と色でいいが、再生履歴は、回数と完奏率を別々に出すのではスペースを食うので、減らし方を考えた。デザインは全く素人だが、その代わりに(結果的に)工学的に考えた。

スペースを節約するため、表示する部品を一つにするとすると、2つの情報を1つにすることになるので、2次元とか3次元的な表示になるのだろう。最初は、マークの形と色で表すとか小さな円グラフにするとかを考えたが、どうも今ひとつだった。完奏率は、やっぱりwebの棒グラフが見やすい。それで、ミニプレーヤーを眺めながら考えているるうちに、再生位置のバー(プログレスバー)が目に付いた。これがうまく使えれば、スペースとしては全く問題ない。そして、プログレスバーの下に完奏率の棒グラフを並べることを思い付いた。この時、再生回数はグラフの色で表すのだ。早速、イメージ図を描いて検討した。

なかなか良さそうな感じなので、試してみることにした。ただ、いきなりミニプレーヤーに入れるのは大変だし、駄目だった時に疲れ果てるので、試しにwebに入れてみた。すると、結構いい感じにできたので、採用することにした(webもこの表示に変更した)。ついでに、以前からやりたかったのだが、アイコンなどへのマウスオーバーで値(評価の値や再生回数)を出せるようにした(上方のベージュ色の四角は、完奏率にマウスオーバー)。再生回数を表示しないようにしたので、なおさらこの機能が必要になったのだ。

あとで気付いたのだが、棒グラフでの表示方法は、以前から謎だったYouTubeでの良い評価率の表示(なのだろうかと、今推測している)に似ている。棒を細くするところは、まさにそのものだ。

Webのいいところは、ページの表示内容をプログラムで書けるので、ある値の色やその段階がどのようになるか試しに表示させられることだ。これで色や計算式を調整・確認した。のだが、例によって思わぬ間違いがあった。再生回数から色への変換式に対数を使ったのだが、PHPのlog()は自然対数(普通は"ln()"と書くと思っていたのだが、log10()があるし、数学ではlogとlog10だから、僕の思い違いかも・・・)で、想定していた常用対数(底が10, "log10()")でないために、実際には変な値になっていた。それでも、対数や色は細かく確認できない(やればできるが、それらしかったので正しいと思い込んだ)ために気付かなかったのだが、ミニプレーヤー(計算にはbcというプログラムを使ったので、自然対数しか使えない)に組み込んだ時にwebと色や係数が違うことでようやく気付いたw

上に少し書いたが、再生回数を色で表すために数値を色に変換する処理が必要で、これにも少し苦労した。最初は、グラデーションの方法・式(検索するといろいろ出てくる。が、ほとんどはRGBで計算していて、HSVでなくていいのかなと思う)で無段階にする(例: サーモグラフィーのようなイメージ)ことを考えたが、そこまで細かく色が判別できる訳ではないし、その必要もないし、グラデーションでは常に期待する(好きな)色が出る訳ではないので、好きな系統の色を選んで10段階(色)にすることにした(今はとても便利で、色チャートのサイトがいっぱいあって、いくらでも色が選べる → 例1, 例2)。ただ、それでも問題はあって、使い続けると曲の再生回数が無限に増えるので、いつかはオーバーフローして「最大」の色ばかりになってしまうことだ。色数を固定したままそれを防ぐには、何らかの方法で再生回数を色に割り当てる(対応させる)必要がある。

再生回数の最大値は、将来は例えば100回とかにもなるだろうし、一方で、常に「1回」という曲もあるだろうから、最大値との比でのリニアな変換にしたら、全体としては再生回数の多い曲は少なく、ほとんどの曲は小さい値だろうから、(少ない回数を薄い色に割り当てた場合)ほとんど見えなくなってしまう。それで、標準偏差で再生回数の分布を求めて「何とか」(ここには特にアイデアはなかったw)できないかと思ったのだが、使っているDBのSQLiteにはその機能がない。自分でSQLを書けば出せるが面倒なので止めて、ふとひらめいた対数を使うことにした(音量は対数表示することから連想したのだと思う)。対数を使うことで、小さい値の変化は拡大され、大きい値では圧縮されるので、結果的に幅の広い再生回数の違いが見やすくなるはずだと考えた。音で言えば、レベルメーター(今は滅多に見ないが・・・)の棒の長さを色にすることに相当する。この対数が上に書いたものである。

その変換は、基本的には、DBに記録された曲のうちで最大の再生回数を求め(この機能はSQLiteにもある。こういうのが一発でできるところが、DBの深みにはまる原因なのかも知れないw)、それと対象の曲の再生回数の比の対数で色の番号を決めている。どういう訳か、実際の変換式は複雑になったのだが、その理由はすっかり忘れたw おそらく、対数には0を与えられないとか、値域(色の番号)を0から9にするとか、そういう理由だったと思う。

ちなみに、最大の再生回数を求めるにはちょっとしたSQLを実行する必要があって、そのためのプログラムを作る必要があると思い、疲れているので「またかよー(一体、いくつ作ればいいんだ?)」とうんざりな気分になったのだが、曲をSpotifyとDBから検索するために作ったプログラム(webで検索に使っているもの)にそのSQLの判定部を「適当に」(= "1 order by played_cnt desc limit 0,1")入れたらできてしまったので、ちょっと驚いた。自分では全く想定していなかった用途に使えるのはおもしろいけど、結構怖い。こういうところからセキュリティホールが生まれるのかも知れない。

ここまでが昨日の話(log/log10の誤りに気付いた話とSQLの話を除く)で、今日、ミニプレーヤーに組み込んだ。久し振りのTck/Tk(どう考えても仕様が狂っている・・・)や肥大化したシェルスクリプト(調べたら、約1万行になっていた・・・)に手こずったが、さっき、何とか動き出した

早速使ってみると、満足するどころかすぐにいくつも文句が出て来るw 例えば、完奏率の棒グラフの色が鮮やか過ぎて目障りだとか、コメント(せめて有無)も見たい(→ とりあえず、コメントがあればアイコンを出し、マウスオーバーで出るようにできたが、間抜けな場合もあるw: 6/20 16:39 → 暫定対応した。: 6/22 8:41)とか、webと同様にマウスオーバーで値を見たい(→ それほど手間が掛からずに追加できた。: 6/20 12:34)などだ(我ながら、全くわがままだ)。もちろん、アイコンのクリックで評価などの値を設定したいとか、GMBのミニプレーヤーにも組み込みたいなどの希望・予定はあるが、次の段階の話だ。

以前苦しんだフォントと同様に、色も奥が深く、webと同じ値でもミニプレーヤーでは違って見える。おそらく、大きさ(面積)や背景や周囲の色によるのだろう。鮮やか過ぎたものは、とり急ぎ渋目の色に変えたのだが、この辺りはじっくり調整する必要がありそうだ。(こういう時に、変更したい箇所で右クリックすると色チャートが出て変更できたりすると便利だが、さすがにそれは全くもって無理だw)

 

(6/20 7:43 加筆・修正; 6/20 12:34, 16:39 マウスオーバーを追加した件を追記, わずかに修正)

  •   0
  •   1

コメントを書く

名前    

メール 

URL