@Ashra さま
バグ出しにお付き合いする形になり、申し訳ありません。
500を超えると落ちるのは文字列バッファが足りないと思い今回拡張したのですが、他の理由もあるかもしれません。
18:45 追記：リストの文字列格納用配列を500にしていたのを失念していました（501以上だとSEGVで落ちます）。
という訳で500を上限にプラグインも修正します。
アルバム数が多いとリストの生成も時間がかかるのですね。予想はしていましたが想像以上でした。
ページ数のバグは計算部分のミスだと思います。
18:45 追記：当該処理では1ページ内の最大値を通常のリスト向け（最大値500）、Gridビュー向け（設定値による）、AlbumView向けの3種類から切替しているのですが、
Gridビュー使用時はGridの最大値が反映されていました。
「再生中のアルバムが表示される件」と「下のページボタンが消える件」はこれから調査します。
カバーアートのNAS上ファイルに対するpng形式対応追加はそんなに難しく無さそうなので報告頂いたバグ潰しの後でやってみます。
sunatomoさま
お疲れ様です。
カバーアートのNAS上ファイルに対するpng形式対応追加はそんなに難しく無さそうなので報告頂いたバグ潰しの後でやってみます。
できれば、SongEmbededのイメージもpngファイル対応できると嬉しいです。いろいろとお願いして申し訳ございません。
よろしくお願い致します。
@sunatomoさま
バグ出しにお付き合いする形になり、申し訳ありません。
Album View実現のため、私の環境でテストできるので喜んで。
今の時点でもかなり楽しんでAlbum Viewを眺めています。開発ありがとうございます。
また、気づいた事を何点か。
１． Embeddedイメージについて
SongEmbeddedイメージはプレー中の曲のイメージは表示しますが、Album viewではイメージはブランクになります。EmbeddedイメージをAlbum Viewで表示できませんか？
２． プレイオプション
Albumイメージのプラスサインを押すとキューに追加ですが、いきなりプレイするオプションがあれば良いなと。画面を切り替えてないでプレイできます。
すいません。よろしくお願い致します。
@Ashra さま
昨日検証してみて、以下の不具合残件も現象確認できました。
途中でページ表示が消える件
ページ数を計算する変数の定義間違いの可能性
（昨日記載したページ数のバグ関連になります。）
再生時フォルダにカバーアートがない場合に再生中のものが表示される
カバーアート設定で「埋め込みカバーアート有効」時に再生中のものが表示されていたためです。
（これはグリッドモードでも同じ挙動になります。通常はFolder.jpgが優先されるため気づきませんでした。）
取り急ぎ、AlbumView と グリッド表示中は「埋め込みカバーアートは使用しない」方向で修正します（最終的には次項の通り、サポートするかも知れません）
合わせて、WEBUIプラグインの設定事項に応じて同じファイル名で拡張子が.pngの場合も合わせてurlリストに追加するように拡張します。
埋め込みカバーアートのAlbumViewでの有効化について
検討はしてみますが、すぐには難しいのが現状です。
なぜなら、現状の実装では/var/lib/mpd/music/RAM 上にmpd が
抽出した画像を書き込みしており、
AlbumView でこれが500枚有った場合は連続抽出させる形になるからです。
（ページ遷移の際、前に生成した画像ファイルをどうするかも検討が必要）
「クリックで再生」について
現状、他のリスト表示でも「そのような実装にはなっていない」ため、ちょっと実現方法の調査と検討が必要だと思っています。
UIとしての考え方は「従来どおり」を踏襲し、グリッドのようにカバーアートを表示した場合は「再生アイコンクリックで再生」のようになるかも知れません。
（この場合、キューに他の楽曲があった場合は割り込みになるのかも要検討でしょう）
どなたか埋め込みカバーアートにPNG画像が入っている楽曲提供頂けませんか?
手元で適当なファイルをEasyTAGで埋め込んで再生してみたのですが、作成したファイルが悪いのか
failed to recv pair(size): Resource temporarily unavailable
と表示されて解析出来ませんでした。
（埋め込みカバーアートのPNG対応に関する開発の方向性としては
生成したファイルの先頭バイト列を見てPNGとわかった場合はファイル名を変えるつもりです。）
@sunatomo さま
png埋め込み楽曲お送りしたいのですが、小さいものでも１３MBほどありますので、送り先を教えてください。
現状の懸案については大体目処が立ちました。
(埋め込みカバーアートのpng対応含めて)
以下の項目を今後の検討課題とし、今晩リリースしたいと思います。
・アルバムビュー他でのカバーアートのインターネットサイト対応
・同上の楽曲埋め込みカバーアート対応
・アルバムビューでのアルバム指定での直接再生
↑
これについてはlibmpdclientの仕様ではキューの末尾追加+追加した楽曲のキュー内並替+再生 と順をふんで実行が必要のため、
時間がかかりそうなことが判明したためです
リリースノートはこちら。
宿題（不具合)分
Genre, Artist 等のタグ検索 + SEARCHプラグイン関連の検索キーワードのバグ修正
検索対象文字列の途中に"," "+" "?" がある場合、またタグの抽出結果が空文字列の場合など今まで判明している検索に関する不具合に対し全て対応しました。
また、"SEARCH" プラグインではキーワード3個目を指定した場合、正常に動作しないことが判明したため修正済みです。
AlbumViewでのページ割計算修正
ページ割計算で使用している変数の取扱にバグが有ったため、修正しました。
（これでアルバム最大枚数に対して実際に設定した1ページあたりの最大数できっちりページ数を計算出来ていると思います。）
また、1ページ内の最大アルバム表示数を500枚としています。
AlbumViewでのブラウザウィンドウサイズ変更時のバグ対応
ブラウザのウィンドウサイズを変更した場合、ページ切替ボタンが隠れたりアルバム表示が中途半端な位置に移動するバグの修正
（原因はウィンドウリサイズ時に呼び出す関数での定義ミス＋AlbumViewに対する対応不足でした。）
新機能実装
フォルダ保存画像としてのPNG形式サポート
従来と同じ名前付けでルールで ".png" の拡張子を持つファイルを認識するようにしました。（当然 ".jpg" は継続サポートします。）
埋込カバーアートでのPNG形式サポート
カバーアート埋め込み楽曲からカバーアートを抽出する際に、ファイルヘッダーを確認して PNG 形式の場合はファイル拡張子を".png"で保存します。
（埋め込みカバーアートは/RAM/cover-art.jpg もしくは /RAM/cover-art.png）
また、/RAM にファイルアップロードなどを行って複写した楽曲を再生する際に埋込みカバーアートが表示されるように修正しています。
@sunatomo さま
お疲れ様です。
pngの対応ありがとうございます。pngファイル問題なく表示できております。
ページ数も問題ないようです。快適にAlbumView楽しんでおります。
早急な開発ありがとうございました。
また備忘録を兼ねて宿題を追記します。
（今日はソースコード触らずに聴きに徹しようと思ったが、無理でした...）
ツインビューへの移行時の対応（グリッド・AlbumView表示時）
通常状態でグリッド表示・AlbumViewでカバーアートを表示していた際にグリッドに切り替えた際、カバーアート表示が詰まってしまう。
→ ツインビュー向けにスタイルシートを修正した際に領域の再計算が必要
AlbumView 状態からキュー表示に移行し、戻った際の動作が不安定
初回に戻った際はページ1に初期化されてしまう（キュー表示前に他のページを表示していたとしても）
2回目移行は キュー表示以外できなくなる。（AlbumView どころか/root/も表示できないためブラウザのリロードが必要）
14:30 追記：
リスト系（Genre, Artist他やAlbumView等）の遷移（キュー←→リスト）にミスが有ったため、パッケージを差替えました。
ただし、リストに戻った際の「ページ数遷移」や「下部キーワードへの移動」は今のところは出来ません（ちょっと時間を下さい）。
なお、ツインビューへの切替でカバーアートが詰まる件も修正済みです。
最初の宿題は対応目処が立っていますが、2つ目はちょっと深刻かつ現在解決策を考察中です。
@Ashra さま
PNG 埋め込み楽曲の一時提供や動作確認含めてご協力頂き、ありがとうございます。
すいません。またバグを見つけましたのでパッケージ差替えです。
あと、上記とは別になりますが、ツインビュー（"t"キー切替）での画面左側領域（リスト・グリッド表示部分）の縮小カバーアート＋楽曲名表示を今回は隠して、
リスト・グリッド表示部分を拡大してみました。
（楽曲情報・スライダー他は画面右側にそのままあるため）
↑
不評でしたら戻します。実際に対応したのは見えていない部分のタグにcssで非表示にしたことと、リスト・グリッド表示部の高さを非表示にした分だけ広げただけですので．．．
リリースノートはこちら。
PC向け解像度での左右余白の削減について
横解像度が 992pixel を超える場合（横長画面の場合のみ）、ウィンドウに対してモード切替するための ”＜” ・ ”＞" ボタン領域を60pixelに制限しました。
カバーアートモードでのカバーアート切替
カバーアートモードで複数の URL を有効化していた場合、カバーアート部をクリックすると URL の優先度を変えることにより、通常は非表示のカバーアートを確認することが出来るようになりました。
@sunatomo さま
お疲れ様です。
早速、新リリース試してみましたが、Album Viewから＋サインをクリックし、アルバムをキューに追加しようとすると"No Such Directory"のエラーが出るようになりました。因みにNASから直接追加する分には問題ありません。
よろしくお願いします。
@Ashra さま
早速、新リリース試してみましたが、Album Viewから＋サインをクリックし、アルバムをキューに追加しようとすると"No Such Directory"のエラーが出るようになりました。
失礼いたしました。AlbumViewのリンク周りでアルバム名の認識を拡張した際にパスのエンコード・デコードに使用する関数が混在していたためでした。
という訳で、差替パッケージをアップしましたので、12/18版をお試しの方はアップデート頂ますようお願いします。
ちょっとおまけ：JavaScriptでのURLエンコード・デコードについて
JavaScriptでは過去の経緯は不明ですが、URLエンコード・デコードでそれぞれ２種類の関数があります。
エンコード側のみ関数名を書くと、encodeURI と encodeURIComponet になります。
後者の方はこちらの通り 通常URLとして使用する全ての文字列をエンコードしてくれるというものです。
実はmpdで各楽曲ファイルやディレクトリのパスとして今まで使用していたURLでは前者の関数を使用していました。
（それで問題が出なかった理由としては「NASによるファイル共有のパスで使用されているディレクトリ名」は必ずしも「アルバム名」と一致するとは限らないためです。）
今回AlbumViewではアルバムの特定のためURLにアルバム名文字列を直接入力する必要が生じましたが、このときに様々な文字を正確に伝送するため後者の関数を使用する必要がありました。
↑
この修正を行った結果、「＋」ボタンでのアルバム追加でデコードが正常に出来ないケースがバグとして発生したわけです。
長らくご無沙汰しております。
さて、リハビリを兼ねて個人的な興味のあるところからとなりますが、
「httpsのサポートがなんとかなりそう」というところまで判明しましたので、
もう少しだけ情報を集めてやり方を記載していきます。
目処は今週末を予定します。
ただし、httpsを有効化した場合、WebUIから "smpd.local" 以外のアクセスもすべてhttpsを使わないとブラウザの設定上エラーとなる事例があるため、プログラムの修正版リリースも必要な模様です。
今回の説明は以下の3部立てでレスを分けます。
１．サポートを行う前提（建前）について
２．自分でCA証明書と サーバ鍵などのセットを作成する方法について
３．ympd（webui）で https を有効化する方法＋当方作成のCA証明書＋サーバ鍵の配布
・webuiにてhttps サポートを行う理由
現状の近代的ブラウザではhttp に代わり https が標準となりつつあります。
（理由としてはサーバとブラウザ間の通信を暗号化してその内容を保証するため）
すでに一部ブラウザでは smpd ターゲットである LAN 環境下でも https を使わないと NG (もしくは設定変更により http でのアクセスを有効化する必要がある）な事例が発生しているため、
今回サポートの記述を追加しています。
また、今後”もしかしたら”サポートする可能性があるPWA（プログレッシブWebアプリ）では https アクセスが前提となるため、
これを先取りしてサポートする必要があります。
注意：https 化した場合、以下の制限があります。
・smpd で webui にアクセスする場合、「全ての端末で https でアクセスする必要」があります（例えばPCだけは https、ipad は http などの使い分けは 「NG」）
・エラーメッセージを表示させない「正しい https での通信を確立する」ためには、各端末のブラウザでCA証明書をインストールする必要があります。
なお、サーバ証明書を公の証明機関に送ることで端末に既にインストール済みのCA証明書で認証させることは可能ですが、
そのために当方として使用料金を支払う予定はありません（個人的に行いたい方はご自分でどうぞ）。
以下、個人的にはこちらの記述が非常に分かりやすく、結果としてこの記述に助けられたので、参照しながら記載します。
作成についてはsmpdのインストールされたRaspberryPi上で実施します。
root ユーザでも良いので ssh ログイン後、ホームディクトリ内に ”cert” でも何でも良いのでディレクトリを作成してその中でコマンドをを入れてください。
・CA証明書を作成する
（１）CA証明書で使用する秘密鍵を生成
openssl genrsa -aes256 -out localCA.key 2048
パラメータ + オプションを解説すると、
genrsa: RSAによる秘密鍵生成
-aes256: 秘密鍵をaes256ビットでの暗号化（パスワード付き）
-out ファイル名: 指定ファイル名で出力
数字: キーのビット数（2048ビット）
このときの秘密鍵は暗号化されているため、この後で使用するたびにopensslのアプリから問い合わせを受けます。
（２）生成した秘密鍵と識別情報を指定してCSR (certificate signing request 証明書署名要求) を生成
openssl req -out localCA.csr -key localCA.key -new
識別情報は以下の通りでOKでしょう。
Country Name:jp
State or Province Name:Tokyo
Locality Name: 空欄でOK
Organization Name: Papalius
（ここはsmpd作者のパパリウス様に敬意を込めてこのようにしましたが、実際にはサイト例の通り John Doe のような匿名でも良いです）
Organizational Unit Name:空欄でOK
Common Name:Papalius
（ここはサイト例の通り Organization Name と合わせています）
Email Address:[email protected]
（smpd のサポートサイトにしましたが、ここも実際には適当に入れてもOKです）
A challenge password:空欄でOK
An optional company name:空欄でOK
パラメータ・オプションの解説は以下の通り
req: CSRの作成要求
-key: 使用する秘密鍵の指定
-new: 新規作成
作成したCSRの中身を確認する際、以下の通りコマンドを入れてください（サイトの例のように表示されればOK）。
openssl req -text -noout in localCA.csr
（３）CA証明書を作成（CSRを秘密鍵で自己署名）
ここでのポイントは -days オプションの数字です。
LAN上でsmpdでしか使わない CA証明書ですから、なるべく長めというわけで、5110日に指定しました（2036年まで有効化）。
セキュリティ的に怖い場合は、短くしても良いでしょう（ただし 証明書の有効年度がすぎると再度インストールが必要）。
openssl x509 -req -days 5110 -signkey localCA.key -in localCA.csr -out localCA.crt -extfile rootca_v3.ext
パラメータ・オプションの解説は以下の通り
x509: x509形式でCA証明書作成
-signkey: サインキーを指定する
-in: CSRファイルを指定
-out: 出力ファイルを指定
-extfile: openssl に渡すパラメータファイルを指定
smpdの標準イメージの場合、openssl のパラメータファイルは /etc/ssl/openssl.cnf を使用しますが、実際には以下の記述でCA証明書専用パラメータファイルを作っておいたほうが私は良いと思います。
subjectKeyIdentifier=hash
authorityKeyIdentifier=keyid,issuer
basicConstraints=critical,CA:true
keyUsage = cRLSign, keyCertSign
nsCertType = sslCA, emailCA
簡単に言うと、ルート証明書での設定のポイントは basicConstraints と keyUsare で、
正確にはこのように記載がないとNGとなります。
作成後の証明書の中身を確認する場合は、以下のコマンドになります。（2項のコマンドに似ているが、頭のパラメータにx509と付いている。これは、証明書の初期がx509であるためになります。）
openssl x509 -text -noout -in localCA.crt
これで localCA.crt という名称でCA証明書が生成されました。
（４）Android向けのバイナリ証明書を生成する。
Androidの場合、バイナリ証明書を生成しないとインストールできません。
これは作成済みのlocalCA.crtをder形式に変換しlocalCA.der.crtファイルに出力するというコマンドになります。
openssl x509 -in localCA.crt -out localCA.der.crt -outform der
・サーバ証明書を作成する
次は実際にサーバで使用する証明書を作成していきます。
（１）サーバ用の秘密鍵を生成
CA証明書の秘密鍵とほぼ同じなので、説明は省略
openssl genrsa -out smpd.local.key 2048
ここで仮に -aes256 を指定した場合、以下のコマンドで復号したものを使用しないと
サーバ証明書として ympd に読み込ませた場合に ympd 側でエラーが発生します。
（パスフレーズが指定されていないため使えない）
一応消し込みのコマンドは以下の通り
mv smpd.local.key smpd.local.encrypted.key
openssl rsa -n smpd.local.encrypted.key -out smpd.local.key
（２）サーバ用の秘密鍵と識別情報からCSRを生成
openssl req -out smpd.local.csr -key smpd.local.key -new
識別情報はCA証明書と少し異なります（具体的にはCommon Name に ”smpd.local” が入る）。
Country Name: jp
State or Province Name: Tokyo
Locality Name:空欄でOK
Organization Name:Papalius
Organizational Unit Name:空欄でOK
Common Name: smpd.local
Email Address:Address:[email protected]
A challenge password:空欄でOK
An optional company name:空欄でOK
（３）サーバ証明書作成のためのパラメータファイルを作成
以下の記述でsmpd.local.csxファイルを作成します。
basicConstraints = CA:FALSE
keyUsage = nonRepudiation, digitalSignature, keyEncipherment
subjectAltName = DNS:smpd.local, IP:192.168.11.162, DNS:app, DNS:app.local
extendedKeyUsage = serverAuth
subjectKeyIdentifier = hash
authorityKeyIdentifier = keyid, issuer
subjectAltName は俗にSANと言われるもので、サーバ証明書でDNSやIP指定した場合にどのURLで参照されたかを指定するものです。つまり、固定IP運用の場合はIP:以降に自分のsmpdのIPアドレスを入力する必要があります。
（４）CSR＋SAN＋CA秘密鍵＋CA証明書でサーバ証明書を作成
openssl x509 -req -days 395 -CA localCA.crt -CAkey localCA.key -CAcreateserial -in smpd.local.csr -extfile smpd.local.csx -out smpd.local.crt
生成するのはCA証明書と同じくx509形式のため、内容確認コマンドも同一のため省略します。
ここでの注意は現在の最新環境だとサーバ証明書の有効期限が13ヶ月以内でないと正常に動かない環境があるということです（具体的にはipadがそうでした）。
（５）ympd 向けにサーバ秘密鍵とサーバ証明書を1ファイル化
cat smpd.local.key smpd.local.crt > smpd.local.pem
2つのファイルを標準出力に流し、それをファイルにリダイレクト化してテキスト保存するということです。
それでは最終章になりますが、実際に ympd での https 有効化方法などについて以下で説明します。
（１）必要なファイルを複写
ympdのルートディレクトリである /var/lib/mpd/music にCA証明書＋「サーバ秘密鍵とサーバ証明書セット」を複写します。
cp localCA.crt /var/lib/mpd/music/
cp localCA.der.crt /var/lib/mpd/music/
cp smpd.local.pem /var/lib/mpd/music/ssl.pem
（２）先に各端末にてCA証明書をダウンロードしておく
http://smpd.local/localCA.crt などのURLでブラウザにアクセスし、CA証明書をダウンロードして保存しておきます。
もしこの方法がNGの場合は Filezilla などでFTP経由でダウンロードするか、USBメモリなどに転送したものを端末に複写して下さい。
Androidの端末の場合、ダウンロードするファイルはlocalCA.der.crtになります。
ipadなどのApple製品の場合、電子メールの添付ファイルかSafari経由でしか証明書のダウンロードは出来ません。
（Safariの場合、場所でCA証明書のリンクを指定するとプロファイルとしてインストール直前まで処理を進めることが出来ます）。
（３）各ブラウザの設定を見て、CA証明書をインストールする。
以下、ブラウザごとに解説をします。
ａ．Chrome系のブラウザ（PC上での）
場所でchrome://settings と入力して設定画面を表示し、その中の「プライバシーとセキュリティ」を選択します。
次に「セキュリテイ」項目から「証明書の管理」がありますのでこれを選択します。
Windowsの場合はOSの証明書管理が開きますので、認証局で「インポート」を選んでダウンロード済みのCA証明書をインポートします。
Linux版でも基本的には同じです。ただし、ブラウザ毎に実施する必要があります。
ｂ．Firefox（PC上での）
基本的にChromeと同様ですが、Firefoxの場合Windows・Linux版問わず独自の証明書ストレージを持つためこれを有効にする必要があります。
ｃ．Android端末上のChrome・Firefox
私の手元にあるAndroid v13のOnePlus8を基準に説明しますが、「設定」の「パスワードとセキュリティ」画面から「システムセキュリティ」を選択し、
「認証情報ストレージ」から「ストレージから証明書をインストール」を選択してストレージに保存したder形式の証明書をインストールします。
Chromeの場合はこれでインストール完了ですが、Firefoxの場合はOSのユーザが追加したCA証明書を認識するようもうひと手間必要になります。
Firefoxを起動し、「設定」から「Firefox」についてをクリックしてFirefox Browserのアイコンを5回タップすると「設定」内に「Secret Settings」の項目が追加されます。
「Secret Settings」の「Use third party CA certificates」をOnにするとこのCA証明書が有効になります。
ｅ．ipadの場合（恐らくiPhoneも同じ）
「設定」→「一般」→「VPNとデバイス管理」を表示させます。
構成プロファイルにインストール済みのCA証明書が表示されますので、これをクリックして「インストール」を押します。
次に、「設定」→「一般」→「情報」→「証明書信頼設定」画面でインストールしたルート証明書をOnにして下さい。
（４）systemd の ympd 関連記述を修正する。
２箇所修正が必要です。
/lib/systemd/system/ympd.socket
ListenStream=80 の数値を443にしてください。
一応同じ行を複写しておいて 80の先頭に#を入れておくとコメント化出来て復活が楽になります。
/lib/systemd/system/ympd.service
ExecStart=/usr/bin/ympd -h /run/mpd/socket --webport 80 -i 200 --documentroot /var/lib/mpd/music
を
ExecStart=/usr/bin/ympd -h /run/mpd/socket --webport "ssl://443:/var/lib/mpd/music/ssl.pem" -i 200 --documentroot /var/lib
に変更してください。
これも ympd.socket と同じく元の80ポートの設定を複写してSSLに対応させ、元の行の先頭に#をつけてコメント化しておくことを推奨します。
両方のファイル修正後
systemctl daemon-reload
が必要です。
（５）念の為smpdを再起動してからブラウザでアクセス。
ブラウザの場所で「https://smpd.local」と入力し HTTPS でのアクセスを明示化しないと NG かもしれません。
・私の作ったCA証明書＋サーバ証明書をそのまま使いたい場合
cert.zip
固定IPアドレスでの https で正常動作させるには、本ZIPファイルを解凍したsrcディレクトリ内部にサーバ証明書向けのファイル1式があるので、
前の投稿で記載の csx ファイルを各自編集してサーバ証明書を作り直してみてください。
・https 有効化による弊害対応
取り急ぎ 「add-stream プラグインによる radio-browser.org へのアクセスが出来ない」対策を実施したものを以下のファイルで配布します。
/opt/plugins/13-add_stream/form.html を書き換えしてください。
（具体的には https サポートを有効化した場合、webui からの全てのアクセスを https で行わないとエラーになってしまう。）
form.html.zip
前にここに書いた記述は不要になりましたので削除します。
なお、CA証明書・サーバ証明書と生成＋インストール用のシェルスクリプトはセットにして提供し直ししたいと思います。