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

---

@パパリウス さま
今回変更したソースコードとビルド関係のツールについては戻しましたが、
ライブラリの入替を行っている素の（最小化していない）JavaScriptのライブラリ群と
minifyディレクトリのpackage.jsonはまだアップしていません。

これらについては「公式も含めて今後はこれを使う」という方向性が決まった時点でアップいたします。
（なお、上記に関係する残件として、bootstrapのv3.4へのアップデートがあります。）

@sunatomo さん

v1.0.8にwebui-plus 9月版を採用しました。数々の機能改善に感謝いたします。

porg設定ファイル(/etc/porg/webui-plus)をwebui-baseにリネームしてからporgballでパッケージ化しています。
本日時点では、plus版とbase版は全く同一のものということになります。

@パパリウス さま
リリースお疲れ様です。新しいwebui-plusのリリースはindex.htmlのアップしたものをこちらでpullした後になるかと思います。

さて、今週の状況について説明します。

• テキストコンテンツのgzip圧縮完全対応
  結局ympd内部プログラムでhttpサーバを独自に構成しており、こちら側でコンテンツの要求に対してそのまま返していたことが判明しました。
  当該コンテンツに".gz"が末尾に付くものがあればそちらを返すように修正し動作するようになりました。
  効果の程はわずかに0.3秒程度の高速化ですが、
  今後新たな機能を追加した際にJavaScriptのライブラリやCSSが肥大化した場合に更に効果がアップすると思っています。

• websocketパケットの圧縮
  ympd側・Webブラウザ側双方にパケットのタイプを指定することが出来ることが判りました（通常はテキスト形式）。
  圧縮済パケットは当然バイナリ形式になりますので、これを見て処理を分けられそうなところまではコードは実装しました。
  圧縮・伸長ライブラリはzlib（JavaScript側はzlib.js）を採用する予定です。
  JavaScript側の実装はテスト段階、C側の実装を現在調査中です。

• https（SSL)対応
  調査中。
  ympdのオリジナルソースコードのドキュメントでは-wオプションに "ssl://8081:/path/to/ssl.pem" のように指定すれば動作するみたいなことが
  書かれているのですが、ソースコードを見た限りそう見えないのですが...

• http/2対応
  今の所情報がないため、後回し。

• Lighthouseスコアの改善
  今回追加対応している部分です。
  「developper tool」を起動すると、一番最後のタグにLighthouseというものがあり、表示中のWebアプリケーションをスコア化して改善策を提案してくれます。
  （今までは存在は知っていましたが、読んでもいまいちわからなかったで後回しにしていた。）
  手元のバージョンでは「https非対応」と「jqueryのバージョンが古いことになるセキュリティ問題」以外はほぼ修正しました。

2020-10-03版のweb-ui配信について

ある程度まとまった成果が出ましたので更新版を配信します。
変更点は以下の通り。

• グリッドモードを有効にした場合のリロード時の挙動に関するバグ修正について
  グリッドモードを有効にしたあとでブラウザの再立ち上げやリロードを行った場合、
  表示が正常にされない（場合によっては全く映らない）ためこれを修正しました。

• Bootstrap Ver.3の最新版採用
  Ver.3.4.1を再度採用しました。
  また、これに合わせてpagination(1ページ内の最大コンテンツを超えた際に表示されるページ切替機構)のスタイルをテーマカラーに合わせるようにスタイルを修正しました。
  (各ライブラリの更新については、当面実施しないつもりです。)

• テキストコンテンツのgzip圧縮完全対応
  本バージョンから、webuiのメインコンテンツのうちテキストファイルを予めgzipで圧縮済みで用意しておき、
  ブラウザのgzipサポートが有効な場合は圧縮済みファイルを配信することで初期起動の高速化（と必要ファイルのダウンロード失敗防止）を図るようにしています。

• webブラウザ〜RaspberryPi間の電文伝達の一部にコンテンツ圧縮機能をサポート
  webuiを成立させるために利用者のWebブラウザとRaspberryPi側のympdプログラムの間では必要な情報の要求とその結果の返送を随時行っていますが、
  このうち比較的電文のサイズが大きな「ディレクトリ内の楽曲情報の伝送」について「電文文字列のgzip圧縮」を行い「バイナリデータで伝送する」ようにしました。
  手元にあるデバイス（PC,ipad mini2,Android OS ver.7以降の端末）では正常に動作することを確認済みですが、
  万が一お使いのデバイスで不具合があるようでしたらお教えてください。
  （将来的にはキュー内の楽曲情報伝送時も圧縮を有効化します）

• Lighthouseスコアの改善
  Chrome系ブラウザのWeb Kit(ブラウザ起動時にF12キーを押すと表示されるもの)の項目内にある「Lighthouse」のスコアについて可能な限り高めるように修正しました。

なお、前の投稿で挙げていたRaspberryPi上のympdプログラムで動作している組み込みwebサーバのmonngoose関連のネタ2件は、
以下の理由で「しばらくは採用なし」になります。

• https（SSL/TLS)対応
  設定を有効化したプログラムはビルド出来、SSL設定を有効化出来るところまでは検証出来ましたが、暗号化のための秘密鍵・証明書ファイルをドキュメント記載の方法で作成して設定しても正常に接続出来ないため断念。
  (curlで証明書を無視し他条件でhttpsで接続＋取得を確認したところまでは検証は出来たのですが...)

• http/2対応
  前にも書いたとおり調査の限りでは情報が全く引っかからないこと、
  現状のympdで採用されているmongoose ver.5.6ではバージョンが古過ぎで恐らく対応は難しいと判断しています。

さて、来週以降は機能拡充に関する宿題の対応を考えていきたいと思います。

次リリースでのjquery差替について
前の投稿で「各ライブラリの更新については、当面実施しないつもりです」等と書いておきながら裏側で調べ物をしたところ、
こちらの通りBootstrap v3.4.1ではjqueryの v3に対応することが判りました。

前に試しに入れてみた際に「Dashboard等の表で行間の罫線が描画されなかった」のは、「htmlのtbodyタグを使用していなかったため」と今回の調査で判明しました。

という訳で、次のリリース時にはjqueryも最新版の3.5.1に差替を行ったものを提供予定です。

先週末時点での進捗状況について

• jqueryのv3.5.1入替に伴うバグ修正
  動作を確認していたところ、$.trim関数がv3.5以降で消されていることがわかりました。
  webui内部と参照ライブラリのsammy.jsでこの関数を使っているため、
  その部分を修正して動作確認中です。

• ジャンル等のリストを指定した場合、アーティストを途中に挟みこむ
  リスト指定後に通常は楽曲が返されるのですが、アーティストを返すように修正しました。
  当然そのままアーティスト名を楽曲から抽出すると同一名称が重複したり並び順がバラバラのため、
  ユニークなリストを生成してからソートするようにしています。
  あとは、最終調整が残っている（動作の安定化と不要なメモリ使用を減らすように最適化）状態ですね。

他の機能開発も状況次第で追加対応し、今週末に新板のwebui-plusをリリースするようにします。

2020-10-17版のwebui-plus配信について

日曜日まで粘るのもありですが、とりあえず今の時点でリリースします。
変更点は以下の通り

• jqueryを最新版に差替
  　スレッドに進捗を記載したとおり、jqueryを最新版のv3.5.1に入替しました。
  　これに伴い1点だけ以前と異なる挙動があります。
  　updateとNASのチューニング画面で進捗表示される領域に外枠が表示される。
  　（挙動の最適化は今後実施します）

• リスト表示後に候補を選択した際の挙動について
  　Artistを除くカテゴリでリスト表示をクリックして選択した際、従来は当該カテゴリでヒットする楽曲が一覧表示されますが、本バージョン以降はアーティスト名が一覧表示されます。
  　ここで一覧の中から希望のアーティストを選択すると、「カテゴリ」＋「アーティスト」の双方で検索した楽曲が一覧表示されます。
  　一点だけ注意事項があります。
  　以前から動作は変わりませんが、楽曲の一覧で表示されるアルバムの「＋」ボタンをクリックした場合、当該アルバムの全楽曲がキューに選択されます。
  　（本来ならばカテゴリ＋アーティストで絞り込まれた楽曲のみが選択されるべきなので、これも後程動作を修正したいと思います。）

• 見た目は変わりませんが、将来的なメンテナンス性を考え機能毎に関数を分化
  　一通り動作は確認いたしましたが、万が一不具合がある場合は修正いたします。

以下、配信版では対応していませんが進捗の報告おば。

• Spotify APIの検証
  ドキュメントとサンプルを見ながら試行してみましたが、
  Client Credentials Flowを使えばアクセストークンは取得出来ました。
  あとは、Searchを実証してみたいと思います。
  （とりあえず、受領したトークンを利用してこのページで情報検索出来るところまでは確認出来ました。）

@sunatomo さん

plus版の更新ありがとうございます。
早速試してみたいと思います。

アルバムの「＋」ボタンをクリックした場合の挙動ですが、「当該アルバムの全楽曲がキューに追加される」というのも案外便利だと思います。特に違和感は感じませんでした。他の方の意見も聞いてみたいところですね。

SpotifyのAPIも面白そうですね。
（もしかして、APIを叩けばfreeアカウントで楽曲再生もできちゃったりするんでしょうか？）

画面レイアウトの調整を行うときに、1箇所見直していただきたい点があります。
iPhone/iPadのSafaliに共通なのですが、searchボックスの右側にある"ゴミ箱アイコン"と"罫線"が少しだけ左にずれる現象があります。（特に不便は感じていません。微調整が難しければそのままでも結構です。）

@パパリウス さま
リスト表示時の「＋」ボタンの挙動については確かに困っている人があまりいなければ「仕様です」ということでも良いですね。
（もし実現する場合は、複数楽曲をまとめてキューに登録する電文拡張が必要と思っていました）

SpotifyのAPIで実現できる機能についてはこちらをご覧ください。
とりあえず、楽曲情報＋画像を取り出すくらいしか自分は考えていませんでしたが、アイデア次第では色々できそうですよね。
ただ、認証方式にClient Credentialを利用した場合は「ACCESS USER RESOURCES」が出来ないので機能制限されます。
（Authorization Codeなどを使用して認証すれば機能制限なしになるでしょうが、そのためにympdのWebサーバ側での対応＋インターネット公開が必要になりそうで、ハードルが上がります。）

ご提示のテーブルヘッダと要素のズレについては気づいていましたが後回しにしていました。（実はFirefoxでもまたヅレているようです。）
Spotify・Last.fm関係はもう少し時間がかかりそう（どの機能をどうやって実装するかまだ未定なので...）ですので、次はレイアウト関連のfixを行いますね。

テストビルドの配信について
深夜で平日ですが、テストビルド配信します。もしよろしければ動作確認願います。（遅いので、もちろん明日以降で全然構いません。）
今回の対応は以下の通り。

• テーブルのスタイル修正について
  @パパリウス さまにご指摘を受けた楽曲情報表示テーブル領域のヘッダー部分とリスト表示部分のズレについて修正してみました。
  結論としては「Firefoxについては以前専用スタイルシートを指定してたが、現状のBootstrapなどでは不要になった」のと「Apple系のデバイスについてはスタイルシートの記述が誤っていたたためにズレていた」ようです。
  当方確認環境ではFirefox 81.0.2（Linux版）、Safari、Chrome（どちらもipad mini2で恐らく最新版）では動作チェック済みです。

@sunatomo さん

webui-plusの公開、どうもありがとうございます。
こちらでiPad/iPhoneのSafaliで確認しましたが、完璧に修正されていました。素晴らしいです。

１点気になったのが、左右にスライドさせてブラウズ/キュー画面とプレイバック画面を切り替える時のスライド速度が遅くなっていました。

滑らかにスライドするのを眺めるのは、これはこれで気持ちいいのですが、1テンポ待ってから操作する必要があるため、操作に引っかかりを感じます。元のスピードに戻すことは可能でしょうか？

@パパリウス さま
直ったようで何よりです。
一応手元のデバイスで確認しましたがios関連機器のデバッグ環境が現状手元にはないため、確認して頂くまで確たる自信がなかったので…
さて、carouselの切替ですが、スピードを変えるような設定は入れた記憶がないのですが、確かに少しもたつく動作は気になります。次はこちらの対応をしますね。

昨日に引き続き、テストビルドの配信について
ちょっと調べたら原因が判りましたので、修正してみました。

• bootstrap.cssの差替
  今まで使用していたv3.1.0系ではcarouselの切替アニメーションは0.3秒と記載されていましたが、
  今回良く見たら現状採用しているv3.4.1ではアニメーションの処理が0.6秒であったため修正。
  スピードは明らかに違いますね。

webui-plusではライブラリ類のバージョンアップに伴い、以前と挙動や外観が変わっている箇所が他にもあるかもしれません。
お使いの上で変な挙動やお気づきの点がありましたらご連絡ください。

@sunatomo さん

webui-plusの修正、どうもありがとうございます。
確認してみましたが、carouselのスライドが従来のスピードに戻っておりました。ストレスを感じない、テンポの良い操作感です。

しばらく使ってみて、何か気付いたらご報告いたします。
普段使いの範囲では特に問題なさそうですね。

2020-10-22版のwebui-plus配信について

テストビルドという名目で一昨日から毎日配信してきましたが、
ここで私の気づいた部分では一区切りが付きましたのでタイトル付きで投稿とします。

• Bootstrap v.3.4.1導入に伴うスタイルの修正
  　Dashboardのクロック表示の円グラフ下に枠線があった件の消去
  　mpd-statsのプラグインのテーブルで各項目間に枠線がなかったため修正

※これでバグ修正は終わりというわけではなく、気づいたタイミングとお申し出があれば当然対応いたします。

次のネタとしてはいよいよSpotifyやLast.fmのWebAPIで楽曲情報の取得を攻略しようかと思いますが、その前に軽いところで一点確認したいと思います。

現状ブラウザのウィンドウ左下に状況の通知をサポートしていますが、
これエラー表示以外は抑制したい方おられますか？
もし、おられるようでしたらweb-uiのプラグインにトグルボタンを置いて
切替可能にしようかと思います。

@sunatomo さん

現状ブラウザのウィンドウ左下に状況の通知をサポートしていますが、
これエラー表示以外は抑制したい方おられますか？

ハイ、私がそうです。
コントロールにiPhoneをメインに使っており、表示によって再生ボタンなどがしばらく隠されるのがうっとおしいなぁと感じております。

@ジャイアン さま

コントロールにiPhoneをメインに使っており

なるほど、実は現状のスクリプトでは「btnnotify」ボタン関係の記述がコメントアウトされているため、そのあたりを整理しようかと思っていました。

やり方としてはGridモードと同じく各端末のCookieに保存する方法を取りたいと思います（これでPCでは通知させるがスマホでは不要とか端末毎に制御出来ます）。

早ければ今週末くらいに実装できるかもしれません。

@sunatomo さん @ジャイアン さん

確かに、スマホ使用時は通知を抑制できると嬉しいですね！

通知のテストビルド配信について
早ければ今週末などと言っていましたが、コードを書いてみたらあっさり対応出来たのでテストビルドを配信いたします。

○ステータス変更時のメッセージ表示On/Off制御に対応
現状、デフォルトではメッセージは「表示しない」モードにしています。
表示されるメッセージのうちカテゴリが「通常の通知」である以下全てのメッセージが表示されなくなります。
On/Off制御はWebuiプラグインの「Notify Popup」ボタンで対応します。Onの場合は通知・Offで通知されません。
On・Offの情報はお使いの端末のブラウザのCookie領域に保存されるので、再読込で設定が復元されます。

• 'search param empty'
  Searchプラグインで検索文字列が空の場合
• 'Changed to GridView'
  Web-uiプラグインでグリッドビューに切替した場合
• 'Changed to ListView'
  Web-uiプラグインでリストビューに切替した場合
• 'Connected to ympd'
  起動時やネットワーク接続時、RaspberryPiに接続した際
• '〜〜〜〜 added'
  ディレクトリ（アルバム）・楽曲・プレイリストをキューに追加した際
• 楽曲名 アーティスト アルバム名を表示
  演奏楽曲切替時
• 'symphonic-mpd reboot... '
  rebootプラグインで再起動した際
• 'symphonic-mpd shutdown... '
  shutdownプラグインでシャットダウンした際
• 'Updating MPD Database... '
  データベースのアップデートを要求した際
• 'random activate','random deactivate'
  ランダム再生の有効・無効化時
• 'consume activate','consume deactivate'
  キューのコンシューム有効・無効化時
• 'single activate'),'single deactivate'
  シングル再生有効・無効化時
• 'repeat activate','repeat deactivate'
  リピート再生有効・無効化時
• 'ALL SONGS in playlists have been REMOVED'
  キューから全楽曲を削除した際

（今回は警告など高位のメッセージは手を入れていません。）
通常の通知カテゴリ全てをOn/Off対象にしているため、
今後は上記のリストから「Offでも必要なもの」を戻していく作業についてご意見お待ちしています。
また、現状通知されていませんが「このタイミングで通知を表示してほしい」ニーズがありましたらご連絡ください。

なお、アップデート処理中にRaspberryPiのmpdサーバが落ちている際に頻繁にメッセージが表示されてウザイのは今後改善したいと思います。

スマホからなのでサラッと書きます。
キューモードの際にカバーアートと楽曲の文字情報などが画面上部に表示されていますが、
これを折り畳み可能にしてその下のリスト表示領域を広げたいニーズ有りますでしょうか？