@sunatomo さん
私も過去にmaterial-iconsへの置き換えを検証してみたことがあります。
その時の私の結論は次の通りです。
- アイコン表示が一瞬遅れる(代替テキストが一瞬見えることがある)
- 置き換え対象のアイコン(ヘッドフォンやゴミ箱など)に限って言えば、glyphiconのデザインの方が好みだった
2)の方は個人的な好みの話ですので、ここではひとまず置くことにします。
1)の現象については、sunatomoさんの環境では何も問題は発生していませんでしょうか?
webui-plus開発/サポート(webui-plus development/support)
@sunatomo さん
私も過去にmaterial-iconsへの置き換えを検証してみたことがあります。
その時の私の結論は次の通りです。
2)の方は個人的な好みの話ですので、ここではひとまず置くことにします。
1)の現象については、sunatomoさんの環境では何も問題は発生していませんでしょうか?
@パパリウス さま
アイコン表示が一瞬遅れる(代替テキストが一瞬見えることがある)
開発機である RaspberryPi4 での検証では、初期表示時に再生/ポーズボタンのアイコンが切り替わるまで少々時間を要するくらいしか自分にはこの点は気づきませんでした。
(これについてはWebブラウザとympdサーバ間での websocket 接続までの間で別なアイコンに置き換わるだけのため、
初期化の動作を確認してfixします。)
という訳で、我が家で RaspberryPi3 で動作している ArchLinux AoE でも動作状況確認してみます。
置き換え対象のアイコン(ヘッドフォンやゴミ箱など)に限って言えば、glyphiconのデザインの方が好みだった
いやー、地味にこの点ってUIの見た目に効きますので大事ですよ。
という訳で、font awesome や bootstrap icons 辺りもちょっと見てみます。
現状、私としては新機能の追加はちょっと一休みを頂いて、
効果は低いかもしれませんが「冗長な記述の簡素化・廃止」や「手を加えたために機能が阻害された部分の修正」を行っているところです。
その中で気づいたのが表題の件です。
このプラグイン、標準では自分自身の「PLUGIN」も表示され、これをOFFにすることでPLUGINをメニューから消し去ることが可能ですが、
これをやってしまうとPLUGINの差替がwebuiから出来なくなります。
(復活させる際はSSHでRaspberry Piにログインし、/opt/plugins内のシンボリックリンクを書き換えする必要あり)
というわけで、私個人的には「PLUGINの一覧からPLUGIN自身は非表示(=PLUGINはメニュー上で常に表示)」にしてしまったほうが良いと思いますが如何でしょうか?
(上記について当方手元では既に開発済みですので、次回の更新では提供可能です。)
今回も、私の考えとしてはお一人でも「現状の仕様が良い」ということであれば、標準としては提供しません。
ご意見お待ちしています。
@sunatomo さんのご提案に一票です。
I too vote for Sunatomo's suggestion.
@ジャイアン @Castle さま
他の方のレスを待ってみましたが、今の所無いのでお返事いたします。
ご提案に賛成頂き有難うございます。
実は/opt/plugins/90-plugins/form.html を添付のform.zip と差し替えるだけです
(事実上、内部的にJavascriptを2行ほど追加して90-pluginsを非表示にしただけ)。
もし、よろしければお使いください。
I've been waiting for other one's response, but there had been no, so make a reply.
Thank you for your positive suggestion.
I'd made only small change (2 line modify, add to javascript) in /opt/plugins/90-plugins/form.html, attached in this topic.
If you like it, please change the original file to this.
今週末に渡ってちょっと試行している内容の一つに、「ライブラリの更新時に表示される回転アイコンの表示位置調整」というのがあります。
ご存知の通り、mpdのライブラリ更新時にreplayアイコンが回転してそれを通知するようになっていますが、
実はスマホなどの画面では下に例示の通りハンバーガーメニューをクリック後に表示されるメニュー領域の左上に表示されます。
これを、下図の通りタイトルバーに表示変更してはという提案になります。
(PC向けのレイアウトの場合は従来通りタイトルバーのボリウム調整メニューアイコンの左隣で表示されます。)
一応手元では後で提示したレイアウトで動作するものは作成済みですが、これ以外の修正も行っていますのでもう少しパッケージ提供はお待ちください。
次回の更新版の予告について
前回投稿時に提案した、スマートホン向け解像度での更新アイコン表示場所修正を含めて、
以下の事項を実装します。
ミニプレーヤでの一部設定機能のサポート
従来、カバーアートモードにあったシングル再生・ランダム再生・リピート再生+コンシュームボタンをミニプレーヤ部分でも対応したいと思います。
(対応可能と判断した理由として、今回webuiのhtml内にインラインで埋め込みされているスタイルシートを外部ファイル化しながら見直しした結果、「ボタンを配置可能な場所が存在した」ためになります。
なお、今回表示対応したボタン類はキューボタンを押した際(ライブラリ表示切替時)にせり上がる「パンくずリスト」で隠れますが、それはご容赦ください。)
スマートホン向けミニプレーヤでの曲タイトル表示の改善
下図の通り縁取りありのフォント表示に修正いたします。
スマホでもタイトルが「かなり見やすくなった」と思います。
(上図は開発環境のPC上ブラウザでiphone5 エミュレート状態表示したものです)
次の2点は動作確認時にレイアウト上の不具合が見つかったので修正したものです。
(文章で説明しても分かりにくいため、実際の修正はリリース後に体験してください)
ミニプレーヤのカバーアート上の再生ボタン位置の不具合
リスト表示状態からカルーセルを回してカバーアートモードに変更し、
また、カルーセルを回した場合は必ずキュー表示に戻るのですが、
このときにカバーアート上の再生ボタンの位置がズレていた。
ライブラリ更新時のアイコン部分がクリックでメニュー選択時の様に背景が黒塗りになる。
メニュー項目ではないため黒塗りにならないようにしました。
最後2つはちょっとしたお試しになります。
不評でしたら取り止めしようかなと(希望が多ければ対応します)。
カウンター表示のデジタル表記について
こちらのサイト
でデジタル表記のフォントを見つけました。
もし昔懐かしいCDデッキ等の「デジタルカウンター表記にしてみては?」という意見がそれなりにありましたら、
フォントファイルを追加して対応してみようかと思います。
(アイコンファイルと同じようにフォントを変更する形になります)
カバーアートモードでの「楽曲名」・「アルバム名」・「アーティスト名」表示順の調整
現状のカバーアートモードでの楽曲情報の表記は図の通り上から「アルバム名」・「楽曲名」・「アーティスト名」の順ですが、
これをミニプレーヤと同じく「楽曲名」・「アルバム名」・「アーティスト名」にしてはという提案になります。
リリースの時期については今週末を予定しています。
ただし、今回リリースの個人的な根幹部分としては「webuiを実現させるための」htmlファイルとcssファイルの整理になりまして、
そちらのほうが「リリースしても良い」と判断出来るレベルになるまでと考えています(なるべく宣言どおり間に合わせたいと思います)。
他の曲が無いのかと言うのはさておいて、添付画像の右下端、ご覧ください。
あっさり出来てしまいました。
使ったのは7セグのデジタルフォント、斜体の太字です。
個人的には「これもありかなぁ」という気もしますが、「前のほうが良かったかも」という気もします。
率直な感想、よろしかったらお聞かせくださいませ。
@sunatomo さん
精力的な開発、ありがとうございます。
斜体の太字フォント、視認性も高いし、デザイン的にも洗練されているように感じます。
先週あたりから記載してきた内容を反映したパッケージを配信しました。
まずはリリースノートを提供します。
index.htmlへの埋め込みスタイルシートを分離
今回の個人的なメインネタになっています。埋め込みスタイルをスタイルシートファイルに全て移動させました。
(正直、動作改善にはあまり意味がなく、逆に定義間違い次第では不要なスタイルが動作する可能性はあるのですが)
不使用・不要HTMLタグの整理
ブラウザがHTMLを解析して表示する中でDOMノード(要はHTMLタグ数)の数量を減らすため、
プラグインを中心とした「現状不使用」のタグを消去しました。
index.htmlのファイル内容を改めて確認したところ、
「オンラインアップデートの際に表示されるダイアログ」と「NAS更新時に表示されるダイアログ」の共通化まで手を入れてみました。
(正直に言うと自己満足かもしれません。
リスト上に1ページ上の最大数である500曲を表示させた場合、
ブラウザ上の当該ウィンドウにはざっと3,000ノード以上が追加されますので)
スマホ向けミニプレーヤでの楽曲名表示の改善
従来はカバーアートを半透明にして文字が見えるように加工しましたが、今回文字自体に縁取りをすることで視認性を改善しました。
(さらに半透明を取り止めしました)
タブレット相当解像度以上でのミニプレーヤへの機能ボタン追加
single・random・repeat・consumeに対応させました。
(予告通り、パンくずリストが表示される場合は丁度カブるため、これらのボタンは操作不能になります)
スマホ向け表示でのライブラリ更新中の回転するアイコン表示箇所変更
従来はハンバーガーメニュークリック後に表示されるメニュー領域の左上に表示されていましたが、
今回からタイトルバーに移動させてみました。
デジタルカウンタ表示の変更
webfontにより、ちょっと懐かしいハイファイオーディオ・電卓風のカウンター表示に変更されます。
カバーアートモードでの再生中楽曲情報表示順の変更
「ミニプレーヤ」と合わせて上から「楽曲名」・「アルバム名」・「アーティスト名」の順に修正しました。
また、従来はタブレット以上の解像度では「アーティスト名」とカバーアートの間に隙間がなかったのですが、今回は隙間を開けるように修正済みです。
あとは気づいた範囲での細かな不具合の修正になります。
個人的な気持ちでは「そろそろ手を入れる余地がなくなりつつある」と勝手に思っていましたが、
まずは以下の部分に着手しようと思います。
ArchLinux AoE未対応部分の修正
Dashboardなどsmpdと構成の異なる部分で一部無効化、非表示化されていますので、
この辺りに手を入れてみたいと思います。
(あまり意味はないかもしれませんが、Core・ArmのCPU周波数表示やXenomaiのレイテンシーグラフ非表示など)
楽曲・アーティスト・アルバム情報の表示
これもメインの機能には全く効果はありませんが、フロントエンドとしてはちょっと有っても良い機能かと思います。
とりあえず公算としては「Musicbrainzのサーバにwebuiが表示された各クライアント単位で問い合わせ」する方法で考えています。
(本システムをお使いの大半のユーザのようにクラシックメインの環境ではあまり必要性は無いかもしれませんが、
私のようなカジュアルユーザには「ちょっと便利」だと思いますので。)
tag_cacheの保存・レストアでの宿題について
NASの接続を最大10台までサポートした際に、当該機能の詰めを行っていなかったため、
NAS0(/var/lib/mpd/NAS)不使用の場合は、当該機能が当然使えない状況でした。
という訳で、何らかの方法でケリを付けます。
見た目を変えない内部構造(HTML・CSS)の最適化
今まである程度までは実施してきましたが、もう少しだけ見直ししてみます。
上記は私の思いつくままネタを書いただけですので、不具合発見時や新たな機能提案などが有った場合は当然ながら優先度が変わります。
という訳で、不具合報告・ご提案をお待ちしております。
最後に、手元で外観をイジったものを貼り付けます。
(ミニプレーヤーのボタン領域のOnの部分を少し変更しました。
なお、従来のLightテーマの方はそのままになります)
次のリリースではこれで対応予定です。
前にも一度調べて書きましたが、再度webapiを調べます。
まず、 MuzicBrainz ではありとあらゆる情報(楽曲、アーティスト、アルバム等)がユニークなIDで纏められています。
このIDを指定すれば、当該の情報を引き出せそうだということです。
また、MusicBrainz のIDは他の音楽系サイトでも共通で使えるようなので、各文字列情報から ID を取得するのが必要ということになります。
次に IDを取得するためのAPIですが、こちら の方法で取得できそうですね。
英文なので簡単に解説すると、最初に出てくる表のtypeで検索の際に引き出したい情報が指定出来る形になります。
typeで指定可能な各情報はこういう意味のようです(調べがつき次第追加します)
キー名 | 詳細 |
---|---|
artist | アーティスト名 |
recording | 楽曲名 |
release | アルバム名 |
次にfmtでjsonを指定すれば、ブラウザ上で容易に情報をJavaScriptで取り出し出来、
queryで検索文字列を指定する形になりますね。
ちなみにsearchのURLは
"http://musicbrainz.org/ws/2/" で typeとしてその後ろに「指定文字列とスラッシュ」それに続いてパラメータを入れる場合は通常のフォームと同じ様に?に続いてキー=パラメータ文字列で記述し複数パラメータは&で接続出来ます。
まず動作確認した例を挙げてみます。
http://musicbrainz.org/ws/2/artist/?fmt=json&limit=1&query=鷺巣 詩郎
これは”鷺巣 詩郎” 氏のアーティスト情報を取得するために作成したURLです。一応先には説明していませんが、limitで1項目だけ抽出しました。
{"created":"2021-07-13T12:16:16.901Z","count":1405,"offset":0,"artists":[{"id":"9b127d23-f877-4541-83cd-44f46393dfb7","type":"Person","type-id":"b6e035f4-3ce9-331c-97df-83397230b0df","score":100,"gender-id":"36d3d30a-839d-3eda-8cb3-29be4384e4a9","name":"鷺巣詩郎","sort-name":"Sagisu, Shirō","gender":"male","country":"JP","area":{"id":"2db42837-c832-3c27-b4a3-08198f75693c","type":"Country","type-id":"06dd0ae4-8c74-30bb-b43d-95dcedf961de","name":"Japan","sort-name":"Japan","life-span":{"ended":null}},"begin-area":{"id":"1dcdfb34-fa66-496c-9823-51c329deddf6","type":"City","type-id":"6fd8f29a-3d0a-32fc-980d-ea697b69da78","name":"Setagaya","sort-name":"Setagaya","life-span":{"ended":null}},"disambiguation":"anime & film music composer","ipis":["00073418185","00422743574"],"isnis":["0000000079950105"],"life-span":{"begin":"1957-08-29","ended":null},"aliases":[{"sort-name":"Sagisu, Shirō","type-id":"894afba6-2816-3c24-8072-eadb66bd04bc","name":"Shirō Sagisu","locale":"en","type":"Artist name","primary":true,"begin-date":null,"end-date":null},{"sort-name":"Sagisu, Shirō","type-id":"d4dcd0c0-b341-3612-a332-c0ce797b25cf","name":"鷺巣詩郎","locale":"ja","type":"Legal name","primary":null,"begin-date":null,"end-date":null},{"sort-name":"Sagisu, Siro","name":"Siro Sagisu","locale":null,"type":null,"primary":null,"begin-date":null,"end-date":null},{"sort-name":"SAGISU, Shirou","name":"SAGISU Shirou","locale":null,"type":null,"primary":null,"begin-date":null,"end-date":null},{"sort-name":"Sagisu, Shiro","name":"Shiro Sagisu (鷺巣詩郎)","locale":null,"type":null,"primary":null,"begin-date":null,"end-date":null},{"sort-name":"鷺巣 詩郎","type-id":"894afba6-2816-3c24-8072-eadb66bd04bc","name":"鷺巣 詩郎","locale":"ja","type":"Artist name","primary":null,"begin-date":null,"end-date":null},{"sort-name":"Sagisu, Shiroh","name":"Shiroh Sagisu","locale":null,"type":null,"primary":null,"begin-date":null,"end-date":null},{"sort-name":"鷺巣詩朗","type-id":"1937e404-b981-3cb7-8151-4c86ebfc8d8e","name":"鷺巣詩朗","locale":null,"type":"Search hint","primary":null,"begin-date":null,"end-date":null},{"sort-name":"Shiro Sagasu","name":"Shiro Sagasu","locale":null,"type":null,"primary":null,"begin-date":null,"end-date":null},{"sort-name":"شيرو ساغيسو","name":"شيرو ساغيسو","locale":null,"type":null,"primary":null,"begin-date":null,"end-date":null},{"sort-name":"Sagisu, Shirou","name":"Shirou Sagisu","locale":null,"type":null,"primary":null,"begin-date":null,"end-date":null},{"sort-name":"鷲巣詩郎","type-id":"1937e404-b981-3cb7-8151-4c86ebfc8d8e","name":"鷲巣詩郎","locale":null,"type":"Search hint","primary":null,"begin-date":null,"end-date":null},{"sort-name":"Sagisu, Shirô","name":"Shirô Sagisu","locale":null,"type":null,"primary":null,"begin-date":null,"end-date":null},{"sort-name":"Sahisu, Shiro","name":"Shiro Sahisu","locale":null,"type":null,"primary":null,"begin-date":null,"end-date":null},{"sort-name":"Sagisu, Shirow","name":"Shirow Sagisu","locale":null,"type":null,"primary":null,"begin-date":null,"end-date":null},{"sort-name":"さぎす しろう","type-id":"894afba6-2816-3c24-8072-eadb66bd04bc","name":"さぎす しろう","locale":"ja","type":"Artist name","primary":null,"begin-date":null,"end-date":null},{"sort-name":"さぎす しろう","type-id":"894afba6-2816-3c24-8072-eadb66bd04bc","name":"鷺巣詩郎","locale":"ja","type":"Artist name","primary":true,"begin-date":null,"end-date":null}],"tags":[{"count":1,"name":"japanese"},{"count":1,"name":"composer"},{"count":1,"name":"clean up"},{"count":0,"name":"likedis auto"}]}]}
こちらがその際に出てきた結果です。
いろいろ情報がありますが、必要そうなのは "id":"9b127d23-f877-4541-83cd-44f46393dfb7" の部分だけですね。これが ”鷺巣 詩郎” 氏のアーティストとしてのユニークなIDでしょう。
同じ様にアルバム名を指定してIDを取得する方法ではtypeとしてreleaseを指定すれば良いようです。
(楽曲検索は現在捜索中)
また、paramではtype部分を別途指定して絞り込みができるようで
最初のtypeでreleaseを指定後に query="Clarity" AND artist:ZEDD 等と指定した場合は Claryty というアルバム名で アーティストはZEDD という絞り込みが可能でした。
今日はちょっと毛色が違うところで、MusicBrainzが提供するタグ付けツールのPicardについてちょっと書いていきます。
私の場合はEACは普段使わずAssunder+freedb日本語サイトでリッピングしていたのですが、MusicBrainzのwebapiを調査しているうちに
「そういえば前に使って意味が分からなかったPicardって一体なんだ?」と思い再度試してみることにしました。
ざっくり言うとPicardではMusicBrainzのデータベースを用いてCDリッピング済みの楽曲から不足しているタグ情報を埋めることが出来るソフトウェアです。
何が強みと言ったら、「海外版のアルバムならばかなりの確率でアルバム情報がヒット」します(それも、アメリカ版以外の様々なバージョンも欧米版はメジャーなところならかなり)。
国内盤でもMusicBrainzを利用して情報をサイトに転送するような人口の多そうなジャンル(いわゆるアニメ界隈)ならばヒット数は高くなりそうです。
基本的な使い方は以下のとおりです。
1項から4項はPicardのウィンドウ左半分で、5項以降は右半分で操作します。
今日気付いたのですが、アルバムの絵がうまく表示されない場合があります。
NASフォルダに Jazz/Various/HD Jazz Volume x/ というアルバムが多数(1~26)あり、その下にFolder.jpgとFLACファイルが置いてあるのですが、
不思議なことに、xが15,16,17,20,21,22,23,24,25,26のときだけカバーが表示されず、デフォルトの女の人の絵になってしまいます。
それ以外のフォルダの曲ではちゃんと登録されているものが表示されます。
Front End 側にログインしてファイルの属性を確認すると、正常なものと異常なものに、変わりはありません。
root [ ~ ]# ls -la /var/lib/mpd/music/NAS/Jazz/Various/'HD Jazz Volume 1'/Folder.jpg
-rwxr-xr-x 1 root root 127126 Aug 10 2020 '/var/lib/mpd/music/NAS/Jazz/Various/HD Jazz Volume 1/Folder.jpg'
root [ ~ ]# ls -la /var/lib/mpd/music/NAS/Jazz/Various/'HD Jazz Volume 13'/Folder.jpg
-rwxr-xr-x 1 root root 127173 Aug 10 2020 '/var/lib/mpd/music/NAS/Jazz/Various/HD Jazz Volume 13/Folder.jpg'
root [ ~ ]# ls -la /var/lib/mpd/music/NAS/Jazz/Various/'HD Jazz Volume 15'/Folder.jpg
-rwxr-xr-x 1 root root 125525 Aug 10 2020 '/var/lib/mpd/music/NAS/Jazz/Various/HD Jazz Volume 15/Folder.jpg'
root [ ~ ]# ls -la /var/lib/mpd/music/NAS/Jazz/Various/'HD Jazz Volume 16'/Folder.jpg
-rwxr-xr-x 1 root root 133340 Aug 10 2020 '/var/lib/mpd/music/NAS/Jazz/Various/HD Jazz Volume 16/Folder.jpg'
root [ ~ ]# ls -la /var/lib/mpd/music/NAS/Jazz/Various/'HD Jazz Volume 26'/Folder.jpg
-rwxr-xr-x 1 root root 134363 Aug 6 17:38 '/var/lib/mpd/music/NAS/Jazz/Various/HD Jazz Volume 26/Folder.jpg'
なお、PCでこのフォルダに接続し、jpgファイルを表示させてみましたが、正常に表示されるものも、されないものも、ちゃんと登録されているものが表示されました。
何かわかりますでしょうか?
@mgroovy さま
お返事遅れて申し訳ありません。
webuiの不具合なのか、元々のファイルから読み取れないのかちょっと切り分けさせていただきますね。
http://ご自分のIPアドレス/NAS/Jazz/Various/'HD Jazz Volume x'/Folder.jpg
上記のような形でブラウザの場所を指定した場合、ご提示のxの値がNGの場合は正常にカバーアートが表示されますでしょうか?
@sunatomo さん
遅くなってすみませんでした。
試してみましたが、正常に表示されるものもされないものも、すべて、
404 Not Find
と表示されました。
別のフォルダの正常に表示されるファイルについても同じ結果でした。
よろしくお願い致します。
@mgroovy さま
もしかしたらシングルコーテーションの部分でURLが変わっているかもしれません。
http://ご自分のIPアドレス/NAS/Jazz/Various/
でブラウザを叩いた場合、ディレクトリ一覧(青文字下線のリンクを押すとそのディレクトリの内部が見える)が表示されると思いますので、
こちらからHD Jazz Volume xをたどって探してみて各フォルダのFolder.jpgが見えるかちょっと確認頂けますでしょうか?
「webuiでカバーアートが見える」=「RaspberryPiにSMBでマウントされている当該NASのカバーアートをwebuiのwebサーバが参照出来ている」
ということを確認するための下調べになります。
@sunatomo さん
この方式で試してみましたら、表示されていたフォルダのFolder.jpgも、表示されなかったフォルダのFolder.jpgもすべて表示されることが確認できました。
なお、xが15,16,17,20,21,22,23,24,25,26のときだけカバーが表示されず、デフォルトの女の人の絵になってしまう症状は相変わらず同じで、ずっと再現しております。
よろしくお願い致します。
@mgroovy さま
やはり、webuiの内蔵httpdではFolder.jpg見えましたか。
それでは申し訳ありませんが、Folder.jpgが正常に表示された際のURL、
ご提示頂けますと幸いです。
(画像が表示された際に「場所」で表示されているURLをご提示下さい)
私の推察では以下のどちらか(もしくは両方?)により表示出来ないと想定しています。
1)MPDから返されたアルバムのフォルダ情報からカバーアートのためのURLを生成する部分に問題がある。
2)MPDから返されるアルバムのフォルダ情報と実際のカバーアートの場所が(何らかの原因で)異なるため参照できない。
1)は修正出来ると思いますが、2)は現象を特定してもちょっと対応が難しいかもしれません...
@sunatomo さん
こちらでよろしいでしょうか?
上の ls-la を取得したのと同じファイルを表示させてみました。
すべて大きな画像(600x600)で表示されております。
http://192.168.0.203/NAS/Jazz/Various/HD%20Jazz%20Volume%201/Folder.jpg
http://192.168.0.203/NAS/Jazz/Various/HD%20Jazz%20Volume%2013/Folder.jpg
http://192.168.0.203/NAS/Jazz/Various/HD%20Jazz%20Volume%2015/Folder.jpg
http://192.168.0.203/NAS/Jazz/Various/HD%20Jazz%20Volume%2016/Folder.jpg
http://192.168.0.203/NAS/Jazz/Various/HD%20Jazz%20Volume%2026/Folder.jpg