@sunatomo さん
精力的な開発、いつもありがとうございます。
以前の要望をご検討頂けただけでも感謝です。
お忙しいと思いますので、「ジャンル+アーティスト」の絞り込みは、ご無理のない範囲で扱って頂ければと思います。
webui-plus開発/サポート(webui-plus development/support)
@sunatomo さん
精力的な開発、いつもありがとうございます。
以前の要望をご検討頂けただけでも感謝です。
お忙しいと思いますので、「ジャンル+アーティスト」の絞り込みは、ご無理のない範囲で扱って頂ければと思います。
思ったより早めに対応出来ましたので更新版を配信します。
変更点は以下の通り。
webuiプラグインでのバグの修正
申し訳ありません。プラグインでの/etc/webui.cfgへの書換が出来なくなくなっていました。
また、本バージョンからは次項でも説明しますが「1ページ内でのグリッドモードでの最大表示数」を設定した際に即座に画面を新しい設定値で書換するようにしました。
Cookieへの設定保存対応
デバイス単位で制御する必要のあるパラメータをブラウザのCookieへ保存するようようにしました。
(最大保存日数は365日にしています。もっと長くする可能性もあり。)
具体的には「list/grid」モードの設定フラグ、1ページ内でのグリッドモードでの最大表示数が保存されます。
(従来/etc/webui.cfgに保存されていた「1ページ内でのグリッドモードでの最大表示数」の設定MAX_ELEMENTS_PER_PAGEは本バージョンからCookieに同値がない場合の初期値として動作し、
webuiプラグインで今後は更新しても/etcの設定ファイルの値は変わりません。
今後は各webブラウザのCookieに上記値が保存されているため、デバイス毎に異なる値を設定可能になります。)
個人的な興味の探索として、ympdで採用している組み込みWebサーバであるmongooseについて以下の点を試してみようと思います。
テキストコンテンツのgzip圧縮完全対応
対応パッチを当てて高速化したように見えているのですが、developper modeでコンテンツのヘッダを見てもgzip圧縮されていると書いていないため、完全対応していない可能性があります。
恐らくympdのように実行ファイル内にコンテンツをバイナリ格納している場合はgzip圧縮済みファイルを見つけられていないのではと。
websocketパケットの圧縮について
前にも書きましたが、RaspberryPi → Webブラウザ間のパケットのみ圧縮したいと思います。
CならびにJavaScript双方で動くバイナリ圧縮処理のライブラリを探している最中です。
https(SSL)対応
あまり意味ないかもしれませんが、一応やってみようかと思います。
(個人的な自己満足レベルかもしれません)
http/2対応
これについては正直ググっても情報が全く出てきませんが、ネタとしては押さえておきたいかと(恐らくmongooseでは対応していないと思われる)。
今のところ頂いて宿題となっている機能拡張は以下のとおりでしょうか。
アーティストのカバーアート取得
恐らくspotifyのAPI対応が必要そう
last.fmでのscrobble対応
spotifyのAPIと同じく、トークンでの事前アクセス許可部分の開発が必要
カバーアートのうち、アーティスト名等特殊な対応が必要な場合、
事前にこれを指定しておく方法
やり方含めて要検討ですね。
ジャンル等のリストから楽曲を指定する際に途中で「アーティスト」を表示して絞り込みができるようにする。
ネタ的にはほぼやり方が固まってきているので何とか出来るかもしれません。
@sunatomo さん
plus版のリリースありがとうございます!
要望事項は全て反映されておりました。たいへんお疲れ様でした。
何日か動作を確認してからv1.0.8に正式に取り込ませていただこうと思います。
早ければ今週末にでもv1.0.8をリリースしたいと思います。
@パパリウス さま
今回変更したソースコードとビルド関係のツールについては戻しましたが、
ライブラリの入替を行っている素の(最小化していない)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のバージョンが古いことになるセキュリティ問題」以外はほぼ修正しました。
ある程度まとまった成果が出ましたので更新版を配信します。
変更点は以下の通り。
グリッドモードを有効にした場合のリロード時の挙動に関するバグ修正について
グリッドモードを有効にしたあとでブラウザの再立ち上げやリロードを行った場合、
表示が正常にされない(場合によっては全く映らない)ためこれを修正しました。
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をリリースするようにします。
日曜日まで粘るのもありですが、とりあえず今の時点でリリースします。
変更点は以下の通り
jqueryを最新版に差替
スレッドに進捗を記載したとおり、jqueryを最新版のv3.5.1に入替しました。
これに伴い1点だけ以前と異なる挙動があります。
updateとNASのチューニング画面で進捗表示される領域に外枠が表示される。
(挙動の最適化は今後実施します)
リスト表示後に候補を選択した際の挙動について
Artistを除くカテゴリでリスト表示をクリックして選択した際、従来は当該カテゴリでヒットする楽曲が一覧表示されますが、本バージョン以降はアーティスト名が一覧表示されます。
ここで一覧の中から希望のアーティストを選択すると、「カテゴリ」+「アーティスト」の双方で検索した楽曲が一覧表示されます。
一点だけ注意事項があります。
以前から動作は変わりませんが、楽曲の一覧で表示されるアルバムの「+」ボタンをクリックした場合、当該アルバムの全楽曲がキューに選択されます。
(本来ならばカテゴリ+アーティストで絞り込まれた楽曲のみが選択されるべきなので、これも後程動作を修正したいと思います。)
見た目は変わりませんが、将来的なメンテナンス性を考え機能毎に関数を分化
一通り動作は確認いたしましたが、万が一不具合がある場合は修正いたします。
以下、配信版では対応していませんが進捗の報告おば。
@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を行いますね。
テストビルドの配信について
深夜で平日ですが、テストビルド配信します。もしよろしければ動作確認願います。(遅いので、もちろん明日以降で全然構いません。)
今回の対応は以下の通り。
@sunatomo さん
webui-plusの公開、どうもありがとうございます。
こちらでiPad/iPhoneのSafaliで確認しましたが、完璧に修正されていました。素晴らしいです。
1点気になったのが、左右にスライドさせてブラウズ/キュー画面とプレイバック画面を切り替える時のスライド速度が遅くなっていました。
滑らかにスライドするのを眺めるのは、これはこれで気持ちいいのですが、1テンポ待ってから操作する必要があるため、操作に引っかかりを感じます。元のスピードに戻すことは可能でしょうか?
@パパリウス さま
直ったようで何よりです。
一応手元のデバイスで確認しましたがios関連機器のデバッグ環境が現状手元にはないため、確認して頂くまで確たる自信がなかったので…
さて、carouselの切替ですが、スピードを変えるような設定は入れた記憶がないのですが、確かに少しもたつく動作は気になります。次はこちらの対応をしますね。
昨日に引き続き、テストビルドの配信について
ちょっと調べたら原因が判りましたので、修正してみました。
webui-plusではライブラリ類のバージョンアップに伴い、以前と挙動や外観が変わっている箇所が他にもあるかもしれません。
お使いの上で変な挙動やお気づきの点がありましたらご連絡ください。
@sunatomo さん
webui-plusの修正、どうもありがとうございます。
確認してみましたが、carouselのスライドが従来のスピードに戻っておりました。ストレスを感じない、テンポの良い操作感です。
しばらく使ってみて、何か気付いたらご報告いたします。
普段使いの範囲では特に問題なさそうですね。
テストビルドという名目で一昨日から毎日配信してきましたが、
ここで私の気づいた部分では一区切りが付きましたのでタイトル付きで投稿とします。
※これでバグ修正は終わりというわけではなく、気づいたタイミングとお申し出があれば当然対応いたします。
次のネタとしてはいよいよSpotifyやLast.fmのWebAPIで楽曲情報の取得を攻略しようかと思いますが、その前に軽いところで一点確認したいと思います。
現状ブラウザのウィンドウ左下に状況の通知をサポートしていますが、
これエラー表示以外は抑制したい方おられますか?
もし、おられるようでしたらweb-uiのプラグインにトグルボタンを置いて
切替可能にしようかと思います。
@sunatomo さん
現状ブラウザのウィンドウ左下に状況の通知をサポートしていますが、
これエラー表示以外は抑制したい方おられますか?
ハイ、私がそうです。
コントロールにiPhoneをメインに使っており、表示によって再生ボタンなどがしばらく隠されるのがうっとおしいなぁと感じております。
@ジャイアン さま
コントロールにiPhoneをメインに使っており
なるほど、実は現状のスクリプトでは「btnnotify」ボタン関係の記述がコメントアウトされているため、そのあたりを整理しようかと思っていました。
やり方としてはGridモードと同じく各端末のCookieに保存する方法を取りたいと思います(これでPCでは通知させるがスマホでは不要とか端末毎に制御出来ます)。
早ければ今週末くらいに実装できるかもしれません。