webui-plus開発/サポート（webui-plus development/support)

---

@こうちゃん さん、横から失礼します。

http://smpd.local/index2.html#/0/
を指定していただくか、以下のレスを参考にしていただくと良いと思います。

ツインビューの正式対応（限定的ですが）
従来のようにブラウザの場所に直接指定することなく、キーボードの"t"をクリックすることで切り替わるようにしました。
（従来のURL直接指定でも動作します。）

※ちょっとだけ解説すると、現状のツインビューの HTML は従来の HTML を一部書替（タグのclass要素＋style要素の差替）です。
今回キーボードでjavascript関数を走らせ、従来のHTMLに対してこの書替を自動実行する様に調整して限定対応しました。
ただし、従来の「シングルビュー」→「ツインビュー」の切替はスムーズに出来ましたが、「ツインビュー」→「シングルビュー」は分割されたコンポーネントの横幅サイズが半分のママとなってしまうため、「ページの再読込」で対応させています。
今後も、ツインビューの開発自体はindex2.htmlを使用し、従来のindex.htmlとの差異はjavascript関数で定義する方向を考えています。

@hiroget9 さん
有難うございます。wgetコマンドでご教示頂いたURLを指定実行していますが、変化ありません。

@こうちゃん さま
@hiroget9 さまに説明いただいていますが、お使いのwebブラウザのURL入力欄で

http://smpd.local/index2.html

と入力するか、IPアドレス固定運用の場合（例としてお使いのIPアドレスが例えば192.168.1.1の場合）は

http://192.168.1.1/index2.html

と入力してみて下さい。

↑
#/0/ はなくてもリダイレクトされます。

もしくは PC の場合は @hiroget9 さま提示の通り、ブラウザで通常どおりwebuiを表示させた状態でキーボードの "t" をクリックすると切り替わります。

なお、wget コマンドで取得できるhtmlについては元々のものと全く変わりありません（その理由も @hiroget9 さまが引用したとおりになります。）

@hiroget9 さま
フォローありがとうございます。裏でちょっと手を動かしていました

@hiroget9 さん
@sunatomo さん
お手数をかけました。
ツインヴューを見ながら気持ち良く、好きな音楽に浸っております。
有難うございました。

@kkumax さん
upplayご紹介頂きありがとうございます。
UPnpは、AudirvanaやJriver（これらのソフトは Album viewもあります）等で試したことがありますが、私の環境ではSMPD純正の音と比べてしまうと今一つです。またSMPDのセパレート環境でもフロントのソフトの違いによる音への影響がかなり大きく今はSMPD純正に落ち着いているところです。
セパレート環境でのUPnpはまだ試したことがないので、upplay
も試してみたいと思います。
アイディアを頂きありがとうございます。

@sunatomo さま
mpdかなりクローズドな環境なのですね。
Album view対応に、Genre・Artistと同じように専用のリストを作成しても、url取得のためのクエリーができないということですか。結構難しいこと理解できました。

AlbumView ほか list 関連の対応状況について（中間報告）

これはAlbumView や 「/root でタグアイコンが左に表示される各種リスト表示（Genre, Artist, AlbumArtist, Composer, Date）の開発・対応状況についてです。
（上記については最初の必要データ取得方法が類似のため、今回同時対応しています）

1. ページ切替対応について
   各リストを指定して抽出する際、1度に表示可能な数量を500個に制限し、これを超える場合はアイテム数のみカウントする様にしました。
   ページ切替用のボタンを最下部に用意し、これのクリックで表示される範囲を変更可能です。
   （アイテム数カウントに伴い、ほんの少し出力が返るまで処理時間を要するかもしれません。）

2. AlbumView対応状況にについて
   後述する方法でアルバムのURLを取得することが出来ました。
   後はAlbumViewとして表示部分を機能として構成する部分を構築します。
   （通常のライブラリでGridViewにて対応済みのコードを上手く活用する予定です。）

おまけ：リスト表示の実現方法について
(興味のある方のみお読み下さい）

1. リスト表示についてはまず、mpd_search_db_tags 関数で mpd ライブラリ内部から指定タグの文字列検索条件を確立し、
   その後mpd_recv_pair_tag 関数をループで回してキーと値のペア（mpd_pair構造体）で実際のリストの対象文字列を取得出来ます。
   （「該当リストの候補がなくなる=同関数がNULLを返すまでまで」ループを回す。）

2. 上記のページ切替対応のため、最初の呼び出し時はループ内でのmpd_recv_pair_tag 関数の呼び出しを500回までは文字列を格納し、501回目以降はループが終了するまで空呼び出しでカウンターだけ回します。（このカウンター値で最大数量が分かる）
   もちろん最大数が500未満の場合は途中でループが終了するため、全文字列が取得されている状態になります。

3. Tag, Artist他のリスト表示(Album も含む）はこの文字列が利用者の端末に返った結果が表示されたものになります。

4. ちなみにページによる切替の場合、2ページ目を指定した場合は開始3項の開始位置を501回目からとします（1 〜 500回分は空呼び出し）。

5. 次に、利用者がリスト上の文字列をクリックした際、mpd_search_db_songs 関数でデータベース上から当該の楽曲を抽出します。
   （実際にはその後に現状ではリスト表示時に指定したタグ種類とリストで選択した文字列を検索キーとする mpd_search_add_tag_constraint 関数で検索条件を指定してから、
   mpd_search_commit 関数で検索条件を確定します。）
   検索後の楽曲はmpd_recv_song 関数のループで行います。
   この時、抽出された楽曲からArtistを抽出しているため、「リストで指定した文字列で絞り込みを行った結果がアーティスト名で表示される」訳です（同一Artist名が連続した場合、スキップ処理も行います）。

AlbumView 対応の場合、１ 〜 2項の処理でAlbum を指定タグとしてリストを生成するまでは他のリストの場合と同じですが、
その後生成された文字列（アルバム名）を使用して引き続き 5項の検索処理を行い（このときの検索タグは当然Albumで検索文字列は1項で得られた各アルバム名）、
最初に抽出された楽曲のURLを取得するという方法で各Albumの場所を特定して「アルバム名と共にURLを利用者の端末に戻す」ことにしました。
（この方法で実際に返されるURLは抽出した楽曲のものですが、最終的には利用者のブラウザ内のJavascriptで楽曲部分を削除すればアルバムのディレクトリのみ特定可能というわけです。）

ListenBrainz対応の要否について

webui-plus では last.fm が提供する Scrobble に対応していますが、MusicBrainz でもこれと同様の ListenBrainz というサービスを実施しています。
（最近になって気づきました）

AlbumView 対応が落ち着いてからというスケジュールになりますが、MusicBrainz のアカウントを保有していて ListenBrainz も使用したいという方がおられる（今後使用を検討するもアリ）場合は実装を検討しますが如何でしょうか?

@sunatomo さま
AlbumViewこんな短期間で目途が立つとはすばらしいです。リリースが楽しみです。

AlbumView ほか list 関連の対応状況について（中間報告#2）

とりあえず、手元で表示できるようには仕立てました。
（後述しますが、開発の途中でカバーアートに関するバグを見つけましたので、今回併せて修正します。）
ただし、リリースまでには解決しなければならない課題がいくつかあります。

1. 1ページ内での最大表示数（取得数）について
   グリッドモードと同じ25枚程度ならかなり快適に使用できると思いますが、
   現状のリスト数と同じ500枚だとブラウザからの問い合わせから表示までに 2〜3 秒ほど時間を要しています（デバッグ向けビルドの場合）。
   今後、最適な取得数をチューニングする必要があると考えています。
   （今の感触では私の保有ライブラリの規模=580枚だと、25枚ではちょっとページ数が多すぎのため、100枚位が妥当かなぁと）

2. URLが取得できないアルバムについて
   昨日の報告後に「ブラウザの表示部分を設計していた際にアルバム名からURLを検索する際に失敗している例がある」ことに気づきました。
   これが 私のプログラム実装による問題なのか、当方で使用中のライブラリに問題があるのか、確認して解決する必要があります。
   （現状はURLが取得できないアルバムは非表示にして対応しました）
   ↓
   22:30 追記：調査の結果、"/"を含むアルバム名は内部パラメータのデリミタ（区切り文字）と被るため正常に抽出できないことが判明しました。
   今回、デリミタを"^"に変えることで一次対応しています。
   （後は"/"を含む場合、アルバム名の前半が消える現象が発生しているのでこれの対策が残っています）

3. AlbumView からアルバム特定後に「戻る」際の挙動について
   AlbumView アルバム特定時には当該アルバム内部の楽曲リストを表示するようにしました（要は今までのリストで辿るのと同じ）が、
   このときの戻り経路は「従来どおりのパンくずリスト＝階層の一つ上」になっています。
   AlbumView からアルバムを特定した際は「パンくずリストの上位をAlbumViewに戻るようにするべき」か、考えています。
   ↑
   これは文章で説明が難しいので、実際に使って頂き対応を検討していく方向になるかも知れません。

4. カバーアートのバグについて
   動作の確認上何度もページをリロードする際に、「リロード直後はグリッドモードの場合も含めて正常なカバーアートが取得できない」バグに気づきました。
   （例えばグリッドモードにしていた際にリロードした場合など）

という訳で、初回はエンジニアリングプレビューレベルになるかも知れませんが、今週末を目処に皆さんに触って頂けるものを提供できそうです。
少々お待ち下さい。

2021-11-27 版の webui-plus リリースについて

リリースノートはこちら

1. AlbumView の暫定対応
   /root/ から Album を選択した場合、ライブラリ内のアルバムをグリッド表示と同じ方法でカバーアート付きで表示します。
   このときの1ページ内の最大表示数は現状は50枚としており、
   表示領域の最下部に「ページ切替」（pagination）ボタンがありますのでこちらを利用して切替を行って下さい。

2. 他のmpd 内タグ情報によるリスト化へのページ対応追加
   AlbumView 対応に伴い、Genre・Artist 等今までタグ情報を検索してライブラリ内のリストを表示する機能についてはページによる表示切り替え対応としました。
   これらの1ページ内の最大表示数は500個になります。

3. 検索に関するバグ修正
   利用者のwebブラウザからRaspberryPi へ検索用のキーワードを送る際に項目切り分けに使用していたデリミタ "//" では検索対象文字列に"/" を含む場合は正常に認識できなかったため、"^" に変更しました。
   また、従来のアルゴリズムでは""のように検索対象文字列が全く無い場合は正常に動作しなかったため、これの修正を行いました。

4. カバーアート取得に伴うバグ修正
   検索途中の状況などでページをリロードした際、カバーアートが正常に表示されなかったバグの修正。
   （リロード時はブラウザ側のwebuiプログラムが初期化しますが、
   その際に最初に画面を作る前に必要なパラメータがRaspberryPiから返ってきていない状況のため、
   カバーアート関連の関数で非正規のURLを出力していた。）

※宿題について
今回のリリース版を使用していて、以下の宿題があることは認識しています。
次回リリース以降で以下の項目について対応を検討し修正を行いたいと思います。

1. AlbumView での最大表示数
   先に記載の通り今回は1ページ内最大50枚と表示されるデバイスを問わず固定運用にしています。
   このまま固定でこの数値にするか、数値を変更可能にするかなどを検討します。
   （恐らく理想的なのはGridモードのように対象端末の事情に合わせて表示数を可変にすることでしょうか）

2. AlbumView でアルバム特定後に「パンくずリスト」で戻る際の挙動
   一昨日も書きましたが、現状ではAlbumView でアルバムをクリック後、その特定アルバムを/root/NAS 以降から遷移した階層に「パンくずリスト」が作成されます。
   「/root/Album から辿ってきたので、ここに戻りたい」というニーズが出るのは妥当だと思いますので、その実現方法を考えたいと思います。

3. Genre, Artist 等で「パンくずリスト」でカテゴリ検索に戻る際のキーワード対応
   今回のページ対応にも関連しますが、現状パンくずリストで一つ上の階層に戻る際に「クリックしたリスト位置が記憶されていない」状況です。
   合わせてページ数も記録されていないため、対応を検討します。

4. Genre, Artist 等でタグの指定後に遷移する相手先
   現状では各タグのキーワード選択後 当該キーワードにヒットする結果としてアーティスト名を抽出していましたが、
   これを「アルバム名」にするか検討してみます。
   （正直、どちらでも対応可です。）

5. ツインビューでのカバーアートモード側の左右余白
   リスト側は余白を詰めましたが、カバーアートのうち、楽曲の再生中情報やアーティスト情報表示箇所では 実表示領域の2/3 しか有効画面幅がない（左右余白がそれぞれ1/６使用）ためスタイル変更します。

@sunatomo さん
精力的な開発に感謝致します。

AlbumViewすばらしいですね！

私のライブラリでは1/5くらいのアルバムはFolder.jpgを持っていて、表示されるのですが、残りのアルバムはFolder.jpgが無いので表示されません。
この部分もInternetから引っ張ってくるということは難しいでしょうか？
表示に時間がかかってしまうのは仕方ないことですが、後からぱらぱらとでも良いので表示されると嬉しいなぁなんて思っています。

ついでに、見つかった画像ファイルをそのアルバムにFolder.jpgとして保存してくれるオプションがあると、さらに嬉しいです。
今までブラウザから手作業でamazonで探して画像を保存していたのですが、さすがに数が多いので、一挙に簡単にできる方法があったらなぁなんて思っておりました。（まぁ、無理な注文ですよね（笑））

@mgroovy さま
AlbumView でのインターネットからのカバーアート取得は恐らく可能だと思います。
（前にやり方を書きましたが、アルバム名から楽曲を特定しているため、その際にアーティスト名が取得できればサイトへの検索条件は揃いますので）
ただし、先に記載しました宿題のうち2. 3. 5. が片付いてからの対応とさせて下さい。
（昨日リリースしたばかりですが、
5.はほぼ対応完了、3.についてはパンくずリストと呼び出し遷移の関係を現在修正中です。）
なお、カバーアートの自動ダウンロードはちょっとハードル高そうですね。

@sunatomo さま
Album Viewのご対応ありがとうございます。

何点か気づいたことがあります。

１．14ページまでしか表示されない
私のライブラリーは約7500枚ほどありますが、14ページまでしか表示されません。

２．ソートについて
アルバム名でソートされていますが、それ以外のタグでソートすることは可能でしょうか？

３．1ページの最大表示数
できれば、変更できるようにお願いします。表示が遅くなってもよいので最大500くらいあればよいなと。

４．albumのイメージについて
今回の趣旨とははずれますが、Folder.jpgだけでなくFolder.pngでも表示できるようになりませんか？（参照するサイトにpngファイルしか存在しない場合があるとリッピングソフトによってはpngを割り当ててきます）

以上さっと見た感じですが、よろしくお願いします。

@Ashra さま

１．14ページまでしか表示されない
私のライブラリーは約7500枚ほどありますが、14ページまでしか表示されません。

念のために、「MPD STATS」プラグインを実行し、MPD でのアルバム認識数（albumsの数字）を確認頂けますか?
仮にこの数値が7500であった場合、アルバム名の取得方法を別途考えないとならないですね...

２．ソートについて
アルバム名でソートされていますが、それ以外のタグでソートすることは可能でしょうか？

AlbumView のような表示には現状対応していませんが、/root/ から「Genre」・「Artist」・「AlbumArtist」・「Composer」・「Date」などを選択した場合はリスト形式で楽曲の検索は出来ます。

（ただし、前の投稿にも書いたとおり、これらのタグによる検索の場合、タグの特定後に「アーティスト名」でリスト化されているので、
これを「アルバム名」に変更するかを宿題にしています。）

３．1ページの最大表示数
できれば、変更できるようにお願いします。表示が遅くなってもよいので最大500くらいあればよいなと。

少し時間下さい。（「WEB UI」プラグインで設定可能にしようと思います。）

sunatomoさま

念のために、「MPD STATS」プラグインを実行し、MPD でのアルバム認識数（albumsの数字）を確認頂けますか?
仮にこの数値が7500であった場合、アルバム名の取得方法を別途考えないとならないですね...

MPD STATS添付します。Volumioで確認した時は7500だったのですが、カウントの仕方が違うのか6800程になっております。

よろしくお願いします。

@Ashra さま
stat のご提示、有難うございます。
現状のループによる最大数カウントを止めて、
このstat の値を内部的に取って使用する方法で対応を考えてみます。

2021-11-30 版の webui-plus リリースについて

11-27 版の宿題に対して以下の通り対応しています。

1. AlbumView での最大表示数
   WEB UI プラグインの「Max Items (Album View)」で設定変更可能にしました。（なお、標準はそのまま50にしています）。
   
   本値は各ブラウザのCookieに記録されるため、一度設定後は当該端末では同じ値を使用し続けることが可能です。
   ちなみに最大値は1000、最小値は10にしています。
   
   なお、 @Ashra さまご指摘の「実際のアルバム総数に対して途中のメージで切れてしまう」件は、mpd から ライブラリ関連情報 (stat) で取得可能な総数を使うように変更しています。
   （具体的には Album と Artist については stat で総数を取得可能なためこれを使用、これ以外のタグについては従来通りループで総数をカウントします。）
   stat の総数は「ympdの起動時」 + 「ライブラリの更新が完了した時点」
   で取得して内部保持しますので、 問題ないはずです。

2. AlbumView でアルバム特定後に「パンくずリスト」で戻る際の挙動
   パンくずリストが階層化されるようになりました。
   これは従来のタグ選択によるリスト化（Genre等）も同一です。

3. Genre, Artist 等で「パンくずリスト」でカテゴリ検索に戻る際のキーワード対応
   AlbumViewおよびGenre等のタグからリストを生成する分については、
   「パンくずリスト」で上の階層に戻る際に「前にクリックした位置を復元して表示」するように設計し直しました（ページを跨ぐ場合も復元）。

4. ツインビューでのカバーアートモード側の左右余白
   修正しました。楽曲の再生中情報 + アーティスト情報は実領域の5/6が使用されているため、従来より見やすくなっているかと思います。

なお、Genre, Artist 等でタグの指定後に遷移する相手先 並びに AlbumView でのインターネットからのカバーアート取得 については今後の対応となります。
大量に表示されたAlbumViewでのカバーアートに対し、複数のインターネットアクセスが同時に発生した場合どういう動作になるのか、ちょっと怖い気もします。

宿題の追加について

以下、Genre, Artist や SEARCH プラグインでのキーワード指定に共通の事例になります。

• 解析できない文字列（その1 ","を含む場合)
  検索値の文字列内に","を含む場合、
  ","がRaspberryPiへ電文を送信する際のパラメータのデリミタになっているため
  途中で文字列が切れてヒットしない。
  （特にリストの場合は全文一致のため、そもそもヒットしない）

• 解析できない文字列（その2 文字列が空白の場合）
  前項と類似ですが、文字列空白時はヒットしない。

• 解析できない文字列（その3 "?" を含む場合）
  半角の ? を含む場合、 URL のフォームパラメータ向け区切りと判断してそれ以降の文字列を無視する。

• 解析できない文字列（その3 "+" を含む場合）
  これも前項と類似ですが、恐らく「内部的に渡されている文字列が生（URLエンコードされていない）であるため」だと推察しています。

※もう少し解説します。
webui ではクリック時にパンくずリストを生成するような遷移の場合、sammy.js を使用した階層式の問い合わせURLにパラメータ文字列を渡しています。
このときのパラメータが「上記のような場合」は正常に解析できないのが原因だという推察です。

最初の "," は目処が立ちましたが、それ以外は現在調査・検討中です。

なお、Genre, Artist 等でタグの指定後に遷移する相手先 については「アルバム名」にすることにします。
「Artist」で検索し生成されたリストでアーティスト名で指定後に再度同一アーティストのリストが表示されるとやはり見た目が変なので。

@sunatomo さま
早速の修正ありがとうございます。
何点かきづいたことがあります。

１．ページ表示の速度
Max Itemsの設定100で2秒、200で3秒、300で6秒、500で8秒で表示となります。500以上ではconnection lostになり表示されません。ストレスなく使えるのは200でしょうか。500でも一度に500ロードしてくれるので良いかも。だだし、キュー画面から戻ってくるとまた8秒かかります。

２．ページ数について
Max Items 200でページ数が138ページとなりました。138X200=27,600となりライブラリー総数6851とマッチしません。最後のページをみると1ページに100枚しか表示されていません。136,137,138ページはいずれも100アイテムの表示になっています。

３．イメージ
イメージが取得できなかったアルバムについては今プレイ中のアルバムが表示される。また、スクロールを何回かすると下のページボタンが消える。

４．その他
以前お願いしたのですが、albumのイメージについて、今回の趣旨とははずれますが、Folder.jpgだけでなくFolder.pngでも表示できるようになりませんか？（参照するサイトにpngファイルしか存在しない場合があるとリッピングソフトによってはpngを割り当ててきます。）

以上宜しくお願い致します。