ympdのスタイル変更について

---

@sunatomo さん

6月3日バージョン試してみました。
当方もゴンザエモンさんと同じく、NASからの所得が出来ません。
Firefoxのスクロールバーに関しては、段差はないようです。うまく作動してます。

@ゴンザエモン さま
@Cresson さま
お手数おかけします。

NAS ipaddrの件、もう少し当方でも詰めてみます。

次回お試しの際はブラウザのdevelopper toolでログを見て頂く可能性がありますがご了承下さい。

@sunatomo さん

私の希望ですが、一覧表示のさいは単純なフォルダアイコンが良いです。

sunatomoさん

合成された「URL」を最新のひとつだけでもどこかに書いておいていただければ、その内容でこちらでも確認できると思います。

当該URLをブラウザの別のタブに入力してカバーアートが表示されれば、URL自体は正しいと確認できます。

その後こちらで確認したところ、Last FMから持ってくる項目にチェックした場合はカバーアートが出ました。（NASから持ってきてるのではないと思いますが表示機能の問題はなさそう）

@Cresson さま
お使いのFireFox、当方予想通りの動作で良かったです（スクロールバーの件）。
私の使っているLinux版76.0で動作検証をしていたのですが、
いざ他のPCのWindows10で確認したらちょっと動作が違ったものでああいう書き方になっています。

一覧表の際の単純なフォルダアイコンについてですが、
このページでいうと、
glyphicon glyphicon-folder-open をキュー・楽曲リスト表示切替ボタンの一覧表示で使ってはということしょうか？

@ゴンザエモン さま
帰宅後、手元のテスト版でデバッグ用出力をしてみて試した限りでは当方環境では予想通りの動きなんですよね...
ただし、今回おつけする試作版には少々細工をしました。
カバーアートが更新される際に、画面上にダイアログが表示され、url(******)という形で実際にブラウザが探す文字列が表示されるようになりました。
恐らくこれで生成されるURLが何故予想通りの動作をしないのかわかるかと思います。

ちなみにlast.fmの場合、アルバム名とアーティスト名をAPIに指定して先方から返ってくるURLを叩くのでカバーアートはヒットした限りは必ず表示されます。

ympd_2020-06-04.zip

sunatomoさん

こんばんは～　　うまくいきました！
設定値は以下の通りです。

SETTINGS path //192.168.1.146/MusicFiles
NAS ipaddr 192.168.1.146/NAS/

これで正しいURLが作成されることを確認いたしました。
また表示も行われました。

（参考）
NAS ipaddr 192.168.1.146/NAS/FLACMusicFiles/　と指定してしまいますと、URLに一部重複が起こっていました。

なお、今後正式版へのインプリについては、このようなURL表示を毎回行うことは現実的には難しいと思いますので、やはり何らかの「URLを確認する機能」がもしかしたら必要かもしれませんね。（yaMPCではこのURLを表示させるテスト機能があります）

@ゴンザエモン さま
お手数おかけしました。無事に動いて何よりです。
テストの実装についてはちょっと考えてみます。
恐らくライブラリの最初のアルバムからURLを生成して、
正常にダウンロードできるかチェックする方法でしょう。

先程書込を見て久しぶりにyaMPC触ってみましたが、本当によく出来ています。
この分ですとWebUIの更なる改良も課題が多いですが、少しづつ進めていきたいですね。

@sunatomo さん

ympdのスタイル変更についてで@sunatomoが発言 :

glyphicon glyphicon-folder-open をキュー・楽曲リスト表示切替ボタンの一覧表示で使ってはということしょうか？

いいえ違います。うちの場合
/NAS/ジャンル/アーティスト名/アルバムタイトルなんですが
このNASやジャンルにはデフォルトの女性フォトが使われてますが
そこをフォルダアイコンでお願いしたいと思いまして

ところで、うちのNAS、Openmediavaultなんですが、httpでアクセス出来ないみたいです。お騒がせしました。

@Cresson さま
OpenmediavaultがHTTPDが使えない件、残念でした。
でもお試し頂いただけでこのようにいろいろな意見が聞けて参考になります。

なるほど。
実は通常楽曲再生時のカバーアート取得と同じロジックを使っているため、デフォルトの女性フォトになるんですよね。
これも次のプレビューには対応考えますね。

ちなみにNAS・ジャンルのところにご自分のお好みの画像をCoverArt Filenameで
指定した名前で保存すればこのようになります。

上のは私の環境の例ですが、NAS直下のディレクトリはアーティスト名になっています。
各ディレクトリ内に当該アーティストの画像を保存しておけば、
このようにグリッドは表示されます。
将来的にはNAS・RADIO・RAMもフリーのアイコン素材を置くような形にするつもりはあります。
（RAMはリブートで内部が初期化されるため、ブートプロセスで画像ファイルを複写する形の処理が必要になると思います。）

@sunatomo さん

なるほど、好きな画像に置き換えることが出来るんですね。
アーティストの画像集めしなくちゃ・・・

@sunatomo さん

このメッセージが出ないようにするにはどうすればいいのでしょか？

@Cresson さま
6/3のympdに変えていただければ消せます。
（単純にURLが正常に受信できているかを確認頂けるためのダイアログをデバッグのために表示した以外は6/4と6/3バージョンに違いはありません）。

@sunatomo さん

ありがとうございます。消えました。

6月6日時点での進捗状況について
あまり時間が取れていないのとネタ切れもあるせいで、とりあえずここまでという感じです。

・Gridモード向けのアイコンの添付について
NAS.jpg・RADIO.jpg・RAM.jpgを添付しました。
また、@Cresson さまの提案どおり、グリッドモードでの不明カバーアートはフォルダアイコンが表示されるよう調整してみました（フォルダアイコンはympd実行ファイルに添付）。
（なお、各アイコンはコチラからダウンロードしたものを使用しています）

・WebUIプラグインでの画像リンク設定のテスト対応について
@ゴンザエモン さま、@Cresson さまに使用いただいた際に色々お手数をおかけしたこともあり、
以下のアルゴリズムで確認可能なテストをプラグインに実装しました。

　「TEST」ボタンを押すと、ライブラリ内から'a'を含む楽曲を検索し、その最初にヒットしたもののuriからカバーアートを別に開いたウィンドウで取得します。

（このとき問い合わせするサイトは「Access Method」にRaspberryPiを指定した場合はRaspberryPi経由で、
NAS (httpd)を指定した場合は「NAS IP-addr」に指定したIPアドレス・パス経由になります）
つまり、正しくパスを設定してCoverArt Filename通りのカバーアートが保存してあれば、
別ウィンドウに画像が表示されるはずということになります。
（ゴメンナサイ。スマホ・タブレットはまだ動作未検証です。
また別ウィンドウ表示になった経緯は、クロスサイトスクリプティング対策になります。詳細は後程解説します。）

・MPD stats対応
mpdライブラリ内の楽曲の情報、ライブラリ構築日時などが表示されるプラグインを追加しました。

2020-06-06版エンジニアリングプレビュー
ympd_2020-06-06.zip

インストール方法
05-31版とほぼ同じですが、以下の通り一部追加になる項目があります。
また、先に動作確認していただいた方については04-webuiの中身を入替えたので
その内容を複写して下さい。
NAS.jpg・RADIO.jpg・RAM.jpgは「WebUI」プラグインの「CoverArt Filename」に指定した
ファイル名で保存して下さい（下記の例では私の環境で統一したFolder.jpgにしています）

cd /var/lib/mpd/music/RAM
cp RADIO.jpg ../RADIO/Folder.jpg
cp RAM.jpg ./Folder.jpg
cp -r /05-stats /opt/plugins
cd /opt/plugins/attach
ln -s /opt/plugins/05-stats 05-stats

なお、NAS.jpgはRaspberryPiからはマウントオプションを変更しないと複写出来ませんので
そのままエクスプローラ等で複写するほうが楽だと思います。

今後の展開について
@パパリウス 様から公式版をympd-base・私の先行開発版をympd-plusという形でパッケージを分ける提案を頂いております。
パッケージ化含めて少々調査・調整が必要になりますが、ympd-plusパッケージとしての提供準備が整った時点でこのスレッドは一旦停止にして新しいスレッドで進めていきたいと思います。
（それまでの間、お試し頂いた感想や機能の実装希望については変わらずコチラにお書きくださいませ。）

ympd-plusパッケージの準備ができたら、以下のようなコマンドで @sunatomo 版のWeb UIに差し替えできるようになります。

stop ympd
app remove ympd-base
app install ympd-plus

plusに差し替え済みなら、バージョンアップは次のコマンドで完了です。

stop ympd
app instll ympd-plus

デフォルトのWeb UIに戻すには、plusをアンインストールして、baseをインストールすればOKです。

stop ympd
app remove ympd-plus
app install ympd-base

@パパリウス さま
解説ありがとうございます。
パッケージリリースは申し訳ありませんが来週14日を目処に行いたいと思います。
（ちょっとまとまった時間が作れないもので...）
baseに適していると思われる機能についてはplusリリース前にソースコードを間違いなくお渡しします。
（plusのソースコードも当然ながら全部お渡しします）

さて、昨日詳細を書くと言ったクロスサイトスクリプティングについて解説します。

・WebUI（ympd）の簡単な動作解説
WebUIでは各ユーザのブラウザ上でJavaScriptを動かすことにより楽曲の取得・表示・再生制御などいろいろな機能を実現しておりますが、
最初にこのUIを構築するための各パーツはRaspberryPi上のympd実行ファイル内に格納されているhtml・css・JavaScriptソースコート・画像ファイル・フォントファイルになります。
これを利用者のWebブラウザへまず送って、ブラウザ上で展開・解析して実行しています。

・クロスサイトスクリプティングとその対策
JavaScriptはかなり強力なプログラム実行環境であり、
URLさえ指定すれば、Webブラウザの利用者が意図しないサイトに勝手に問い合わせが可能になります。
本来のWebサービスを提供するサイト上で「JavaScriptのソースコードを攻撃者が別のサイトに誘導するように書き換えすることが出来ると非常にマズイ」というわけです。
（そのように誘導されても利用者は全くわからないように偽装も可能）
これをクロスサイトスクリプティング（サイト間をまたいだスクリプト実行）といいます。

そこで、近代的なWebブラウザの標準設定では「最初にパーツ提供されたサイト以外にJavaScriptでパーツ取得をするためには専用の方法を使わないとダメ」というルールになっています。

・今回の「TEST」ボタンの実装について
利用者のWebブラウザ〜NAS上のHTTPサーバ間で直接カバーアートを取得という行為は、HTML上のプロパティで取得する分はルールにあまり抵触しませんが、
「TEST」ボタンをおしてJavaScriptでHTTPプロトコルを実行して直接取得（本当はURLの存在確認のためヘッダ取得のみ）するのは上記のルールに抵触するので動作しませんでした。

そこで、視覚的にもカバーアートが見えれば面白いと思い、直接URL指定した別ウィンドウを表示させる方法としています。

・対策方法
どうしてもTESTボタンでJavaScript経由でURLを取得する場合は以下の方法がありますが、
どれも利用者に設定の負担をかけたり、セキュリティの設定を変更するため採用しませんでした。

１）NASのHTTPサーバ側に「外部のどこからアクセスが来てもOK」というヘッダーを出力するように設定する
２）利用者のWebブラウザでクロスサイトスクリプティングを許可するように設定を入れる
３）利用者のWebブラウザで実行しているJavaScript内のコールバック関数に対して値を戻す（JSON形式のファイルのみ対応であること、HTTPサーバ側にCGI等のスクリプトを置く必要がある）

@sunatomo さん

RADIO.jpg,NAS.jpg,RAM.jpgはどこに置くのですか？
RADIO.jpgを /var/lib/mpd/music/RADIO/
,NAS.jpgを /etc/fstabに書かれてるNASのトップに置いたのですが、反映されません。

また、「TEST」ボタンが404です。

ps.
Webブラウザでクロスサイトスクリプティングを許可してます。

@Cresson さま

大変申し訳ありません。テスト不足で肝心な話を書いておりませんでした。
（この後、先の投稿のインストール用スクリプト記述も修正します。）
NAS.jpg・RADIO.jpg・RAM.jpgは「CoverArt Filename」で指定した名前にする必要があります。
（私の場合はFolder.jpgになります）
それぞれの保存場所は以下の通りです。
NAS.jpg・・・SETTINGSのNAS Setting pathで指定した場所
RADIO.jpg・・・/var/lib/mpd/music/RADIO
RAM.jpg・・・/var/lib/mpd/music/RAM

404が出た場合は指定したURLに誤りがあるかもしれませんね。
今回の場合、RaspberryPi指定のようですので、当方で作成したパス生成部分がおかしいか、Cresson さまの方で指定した「CoverArt Filename」の指定と実際に保存されているものが合わないかのどちらかになります。
（テストについてはちょっと手抜きをしておりまして、CoverArt Filenameの最上部選択項目でURLを生成します。
ご提示の画面の場合、別ウィンドウでのURLの最後がfolder.jpgになっているはずです。）

おまけ
クロスサイトスクリプティングは通常は許可しない（というか、一般のユーザはその設定を変えない前提）運用が望ましいと思い、JavaScript経由でのhttpリクエストでの実装は止めました。

@sunatomo さん

出来ました。

ただ、RAMは電源落とすと消えるのでは？