プラグイン機能とは

symphonic-mpdの『プラグイン機能』とは、自分で書いたシェルを起動するボタンをWeb UIのメニューに追加できる機能です。

例えば、DACのデジタルフィルタを切り替えるシェルを用意して、Web UIのメニューから実行する、、、といったことができます。

Web UIのメニューに『REBOOT』『SHUTDOWN』といったラズパイの再起動やシャットダウンを行う機能が並んでいますが、これらもプラグインとして実装しています。

---

メニューのカスタマイズ

Web UIのメニューにある『PLUGINS』から、メニューに並んだプラグインの表示/非表示を切り替えることができます。

普段使うことがないプラグインを非表示にしておけば、メニューがスッキリして使いやすくなるでしょう。

---

プラグインの作り方

/home/pi/pluginsの下にディレクトリを作り、
app.json
form.html
run.sh
の3ファイルを作成します。

/home/pi/plugins/attachの下には各プラグインへのシンボリックリンクが格納されています。先ほど作ったディレクトリへのシンボリックリンクをattachの下に作成すれば、Web UIのメニューに表示されるようになります。

---

app.json

表示名やアイコンを指定するファイルです。

{
        "menu": "SAVE QUEUE",
        "icon": "save",
        "note": "MPD command"
}

アイコンはGoogle Material iconsを使用しています。
下記のサイトでアイコンの名称を確認してください。
https://material.io/resources/icons/?style=baseline

動作には影響しませんが、プラグインの概略をnoteに指定しておくとよいでしょう。

---

form.html

シェルにパラメータを引き渡したいときは、入力フォームを用意することができます。

ポイントは、入力欄(input要素)にclass="run"を指定することです。

<input type="text" class="run" />

このようにclass="run"が指定された入力欄が1つ以上あれば、入力フォームのOKを押したときにrun.shが実行され、入力値がシェルの引数となります。

もうひとつ、便利な機能があります。
class="config"を指定すると、設定ファイルの読み書きに特化した入力欄を作ることができます。

<input type="text" class="config" uri="/boot/config.txt" key="dtoverlay />

uriには設定ファイルのパスを、keyには設定項目名を指定してください。
これで全てです。入力フォームを開けば、設定ファイルの設定値を読み込み、初期値として表示されます。
さらに、入力フォームのOKボタンを押せば、設定ファイルに入力値が反映されます。
設定ファイルの読み書きだけであれば、シェルを用意する必要すらありません。

なお、入力フォームが不要な場合はform.htmlを作る必要はありません。

---

run.sh

実行するシェルをrun.shという名称で保存し、実行権限をつけてください。

#!/bin/bash

mpc rm "$1"
mpc save "$1"

exit $?

処理が終わると、標準出力の内容がダイアログに表示されます。

標準出力が無ければ、シェルの戻り値に応じたメッセージが表示されます。
戻り値が0のときはsuccess、0以外のときはerrorです。

---

その他のトピック

form.htmlでは、
<input type="text">
<input type="radio">
の2種類の入力欄のみ対応しています。
チェックボックスやセレクトボックスには未対応です。

form.htmlに
<debug />
を書いておくと、デバッグ情報欄が表示されるようになります。
デバッグ情報欄をクリックすると、シェルに引き渡されるパラメータが表示されます。

私はこうやってプラグインを新規に作成しました

という、Linux初心者目線の防備録をしたためたいと思います。
作成したのはmpdのデータベースをバックアップしたいにあるバックアップとリストアのスクリプトを実行するプラグインです。
さぁ、サクッと書けますでしょうか

---

先ずはsymphonic-mpdにSSHでアクセスできることが大前提です。
アクセスできたら...

cd /home/pi/plugins

をサクッと実行して、pluginsディレクトリに移動。
今回は３つのプラグインを作成しますから、plugins配下に３つのディレクトリを作成します。
ちなみに私はこうしました。

mkdir 94-save_backup

mkdir 95-read_mpd_data

mkdir 96-read_backup

次に、この各ディレクトリのシンボリックリンクを/home/pi/plugins/attachに作成します。

ln -s ../94-save_backup /home/pi/plugins/attach

ln -s ../95-read_mpd_data /home/pi/plugins/attach

ln -s ../96-read_backup /home/pi/plugins/attach

もう何が何だかワケ分からないと思います。私も訳も分からず、グーグルさんで検索しながら、GUIが便利なFileZillaも併用しながら、作業を進めました。（分かってしまえばそんなに難しくないと思う）

ちなみに、ここまでの作業を終えたところで...

cd /home/pi/plugins/attach

を実行し、ついでに...

ls -l

を私の環境で実行したら

lrwxrwxrwx 1 pi pi 15 Dec 29 14:36 01-soundcard -> ../01-soundcard
lrwxrwxrwx 1 pi pi  9 Dec 26 23:48 10-mpd -> ../10-mpd
lrwxrwxrwx 1 pi pi 20 Dec 29 14:36 11-update_library -> ../11-update_library
lrwxrwxrwx 1 pi pi 16 Dec 29 14:37 12-save_queue -> ../12-save_queue
lrwxrwxrwx 1 pi pi 16 Dec 29 14:37 13-add_stream -> ../13-add_stream
lrwxrwxrwx 1 pi pi 16 Dec 29 14:38 31-disk_usage -> ../31-disk_usage
lrwxrwxrwx 1 pi pi 13 Dec 29 14:37 40-spotify -> ../40-spotify
lrwxrwxrwx 1 pi pi 16 Dec 28 17:05 80-terraberry -> ../80-terraberry
lrwxrwxrwx 1 pi pi 13 Dec 29 14:40 90-plugins -> ../90-plugins
lrwxrwxrwx 1 pi pi 13 Dec 29 14:41 91-support -> ../91-support
lrwxrwxrwx 1 pi pi 12 Dec 29 14:41 92-reboot -> ../92-reboot
lrwxrwxrwx 1 pi pi 14 Dec 29 14:41 93-shutdown -> ../93-shutdown
lrwxrwxrwx 1 pi pi 31 Jan  5 00:19 94-save_backup -> /home/pi/plugins/94-save_backup
lrwxrwxrwx 1 pi pi 19 Jan  5 00:51 95-read_mpd_data -> ../95-read_mpd_data
lrwxrwxrwx 1 pi pi 17 Jan  5 00:30 96-read_backup -> ../96-read_backup

となりました。
しめしめ、チャンとできているっぽい。
（一部記述内容との不整合が見られますが、気にしない気にしない）
たぶん...

ls -l /home/pi/plugins/attach

でも同じ結果だと思う...

さて、各ディレクトリに
app.json
form.html
run.sh
の3ファイルを作成しなくちゃいけない。
まず

nano /home/pi/plugins/94-save_backup/app.json

を実行し、こう記述してみた。

{
        "menu": "SAVE BACKUP",
        "icon": "archive",
        "note": "BackUp Script"
}

ここは「見栄え」に関係するファイルなので、安心して編集すればイイと思う。
１行目はプルダウンメニューに表示されるタイトル。
２行目はプルダウンメニューに表示されるアイコン。
３行目はPLUGINSパネルの右側に表示される文字列だ。



（一部記述内容と違う部分もあるけど、気にしない気にしない）


さて、ココからちょっとサーカスをしよう。
この記述をしたnanoの画面はこうだ。



今度はこの内容を編集して、別ディレクトリに保存してみよう。
内容をこのように編集し...

{
        "menu": "READ MPD_DATA",
        "icon": "unarchive",
        "note": "Read MPD_data Script"
}

画像で見ると、こう...



“ctrl”キーと“o”キーを押して保存させるばかりの状態にして...



赤の下線で示した部分を編集してしまうのだ。



具体的には、先ほど作成した他のディレクトリのパスを打ち込んでやるのだ。



次は次のように編集をして

{
        "menu": "READ BACKUP",
        "icon": "unarchive",
        "note": "Read Conf Backuped Script"
}

保存先を/home/pi/plugins/96-read_backupにしてやればイイ。



nanoで編集内容を保存する時に、“File Name to Write:”以降に、保存したい先のディレクトリをコピー･ペーストするのがミソだ。


form.htmlの作成は超簡単。
先ずは...

nano /home/pi/plugins/94-save_backup/form.html

を実行し、パパリウスさんの説明にあるように...

<input type="text" class="run" />

コピー･ペースト。
一度はそのまま保存し、先ほどのapp.jsonでやった要領で２回、保存先のディレクトリを書き換えて保存すればイイ。
もしくは...

nano /home/pi/plugins/94-save_backup/form.html

nano /home/pi/plugins/95-read_mpd_data/form.html

nano /home/pi/plugins/96-read_backup/form.html

を実行し、それぞれに

<input type="text" class="run" />

をコピー･ペーストするのもアリだ。


さて、作業もやっと折り返し点だ。
ハッキリ言って、私は疲れてきた
なぜこんなことをやろうなんて考えてしまったのだろう...
次はいよいよrun.shの作成だ。


実はこれ、この場合は意外に簡単。

nano /home/pi/plugins/94-save_backup/run.sh

を実行し、コイツをコピー･ペースト。

#!/bin/bash

/home/pi/util-backup.sh

exit $?

何をやったかというと、FAQで紹介されているバックアップスクリプトをコピー･ペーストしただけだ。
同様に...

nano /home/pi/plugins/95-read_mpd_data/run.sh

を実行し、以下の内容をコピー･ペーストして保存。

#!/bin/bash

/home/pi/util-restore.sh --tag_cache

exit $?

最後に...

nano /home/pi/plugins/96-read_backup/run.sh

を実行し、以下をコピー･ペーストして保存。

#!/bin/bash

/home/pi/util-restore.sh --conf

exit $?

さて、ココまで来たらできたも同然！
各run.shに実行権限を付与するだけです。
ま、その実行権限ってなんやねん？というのが問題なんですけどね

私はこうやりました。

cd /home/pi/plugins/94-save_backup

して

chmod 777 run.sh

ディレクトリを移動して...

cd /home/pi/plugins/95-read_mpd_data

また

chmod 777 run.sh

再度ディレクトリを移動して...

cd /home/pi/plugins/96-read_backup

またまた

chmod 777 run.sh

これだけっすわ！
試しにチャンと実行権限が付与されているか、確認してみた。

pi@smpd:~/plugins/94-save_backup $ ls -l
total 12
-rw-r--r-- 1 pi pi 94 Jan  5 01:38 app.json
-rw-r--r-- 1 pi pi 34 Jan  5 00:09 form.html
-rwxrwxrwx 1 pi pi 46 Jan  5 00:10 run.sh

チャンとできてるっぽい！
プルダウンメニューはこうなった。





実際に動かしてみたけど、チャンと動いているっぽい。


てな感じで殴り書きしてみたけど、こんな内容で参考になるでしょうか？
こんな内容で、間違ってはいないでしょうか？＞パパリウスさん

@ジャイアン さん、プラグイン追加の説明ありがとうございます。
私もジャイアンさんの手順どおりにやってみて、うまく機能しているようです。
便利になりました！

@hiroget9 さん

動いているようで何よりです！
個人的には、run.shの記述がこれでいいのか疑問（１行目と３行目の意味が全くわかってない）なのですが、動けばオーライと深追いしてません。

@ジャイアン さん、run.shは私も全く解っていなくてググりました。
1行目：シェルがここから始まるよ
3行目：シェルはここまでだよ
ということらしいのですが・・・

@ジャイアン さん

パラメータの入力が不要であれば、form.htmlを作る必要はありません。

form.htmlがない場合は、メニューでプラグインをクリックすると、すぐにrun.shが実行されます。

---

run.shの一行目に#!/bin/bashと記載することで、bashで実行することを明示しています。
これをShebang(シバン)と呼びます。

sshでログインして自分でシェルを叩くときにはShebangを指定しなくてもトラブルになることは少ないですが、他のプロセスからシェルを起動する場合は、明示的に指定しておくのが無難です。

---

exitはシェルを終了するコマンドです。

引数にシェルの戻り値を指定することができます。
たとえば、
exit 0
exit 1
といった具合です。

$?は、直前に実行したコマンドの戻り値を指します。

つまりexit $?とは、シェルを終了して直前のコマンドの戻り値を返すという処理になります。

@パパリウス さん

ご指摘、ありがとうございます！
「この場合もform.htmlは必要なのかなぁ」とは思っていたので、モヤモヤが解けた感じです。
他にも実装してみたい（今までは実装していた）プラグインもあるので、改めてチャレンジしたいと思ってます。多分JavaScriptでjsファイルも追加してゴニョゴニョすればできるんじゃないかなぁと考えていたりして。ほとんど過去のファイルからのコピー・ペーストですが。私にJavaScriptを書ける訳もなく

リピート再生とランダム再生、toggle consume modeをON/OFFするプラグインを作ってみました

全て過去の作例からコピペしたんですけどね。
consume modeだけは期待していた動きになってくれなかったのですが、機能はするのでヨシとします。
と言う訳で、今日もサクッとレポートしたいと思います。

---

まずpluginsディレクトリにあるuser.jsを編集します。

nano /home/pi/plugins/user.js

このファイルに、下記の内容を追加でコピペします。

$('.dropdown-toggle').on('click', function (e) {
  if ($('#btnrepeat').hasClass("active")) {
    $('#repeat-state').text("Repeat OFF");
  } else {
    $('#repeat-state').text("Repeat ON"); 
  }
});

$('.dropdown-toggle').on('click', function (e) {
  if ($('#btnrandom').hasClass("active")) {
    $('#random-state').text("Random OFF");
  } else {
    $('#random-state').text("Random ON");
  }
});

$('.dropdown-toggle').on('click', function (e) {
  if ($('#btnconsume').hasClass("active")) {
    $('#consume-state').text("Consume OFF");
  } else {
    $('#consume-state').text("Consume ON");
  }
});

カーソルが「歯車マーク」の上に来た時に、リピート再生やランダム再生、consume modeのステイタスをチェックして、その結果をプルダウンメニューに反映させるためのスクリプトだそうです。
（私が書いたわけじゃない）
今回、結果としてconsumeだけはうまく動いてくれなかったんですけどね

---

次にpluginsディレクトリに移動して...

cd /home/pi/plugins

サクサクッとディレクトリを３つ作っちゃいました。

mkdir 02-repeat

mkdir 03-random

mkdir 04-consume

チャンとディレクトリが作成されているか、チェックしましょう。

ls -l /home/pi/plugins

（情報の取得を忘れてた ）

で、それぞれのシンボリックリンクを/home/pi/plugins/attachディレクトリに作成します。

ln -s ../02-repeat /home/pi/plugins/attach

ln -s ../03-random /home/pi/plugins/attach

ln -s ../04-consume /home/pi/plugins/attach

チャンとシンボリックリンクが作成されているか、チェックしておきましょう。

ls -l /home/pi/plugins/attach

lrwxrwxrwx 1 pi pi 15 Dec 29 14:36 01-soundcard -> ../01-soundcard
lrwxrwxrwx 1 pi pi 12 Jan  5 18:10 02-repeat -> ../02-repeat
lrwxrwxrwx 1 pi pi 12 Jan  5 18:19 03-random -> ../03-random
lrwxrwxrwx 1 pi pi 13 Jan  5 18:20 04-consume -> ../04-consume
lrwxrwxrwx 1 pi pi  9 Dec 26 23:48 10-mpd -> ../10-mpd
lrwxrwxrwx 1 pi pi 20 Dec 29 14:36 11-update_library -> ../11-update_library
lrwxrwxrwx 1 pi pi 16 Dec 29 14:37 12-save_queue -> ../12-save_queue
lrwxrwxrwx 1 pi pi 16 Dec 29 14:37 13-add_stream -> ../13-add_stream
lrwxrwxrwx 1 pi pi 16 Dec 29 14:38 31-disk_usage -> ../31-disk_usage
lrwxrwxrwx 1 pi pi 13 Dec 29 14:37 40-spotify -> ../40-spotify
lrwxrwxrwx 1 pi pi 13 Dec 29 14:40 90-plugins -> ../90-plugins
lrwxrwxrwx 1 pi pi 13 Dec 29 14:41 91-support -> ../91-support
lrwxrwxrwx 1 pi pi 12 Dec 29 14:41 92-reboot -> ../92-reboot
lrwxrwxrwx 1 pi pi 14 Dec 29 14:41 93-shutdown -> ../93-shutdown
lrwxrwxrwx 1 pi pi 31 Jan  5 00:19 94-save_backup -> /home/pi/plugins/94-save_backup
lrwxrwxrwx 1 pi pi 19 Jan  5 00:51 95-read_mpd_data -> ../95-read_mpd_data
lrwxrwxrwx 1 pi pi 17 Jan  5 00:30 96-read_backup -> ../96-read_backup

チャンとできていますね。

---

それでは、それぞれのファイルを作成していきましょう。
前回とちょっと方法を変えてみたいと思います。
まず、各ディレクトリに飛んじゃいます。

cd /home/pi/plugins/02-repeat

nanoでファイルを２つ作成。
先ずは...

nano app.json

で、以下の内容をコピペして保存。

{
        "menu": "<span id=repeat-state>Repeat</span>",
        "icon": "repeat",
        "note": "MPD Command"
}

次に...

nano run.sh

以下をコピペして保存。

#!/bin/bash

mpc repeat

exit $?

ここで実行権限も付与しておきましょう。

chmod 777 run.sh

同様の作業を、他２つのディレクトリで行います。
ココからはチョット手抜きでいきますよ

cd /home/pi/plugins/03-random

nano app.json

以下をコピペして保存。

{
        "menu": "<span id=random-state>Random</span>",
        "icon": "shuffle",
        "note": "MPD Command"
}

続いて...

nano run.sh

以下をコピペして保存。

#!/bin/bash

mpc random

exit $?

ついでに実行権限を付与。

chmod 777 run.sh

最後のディレクトリに移動。

cd /home/pi/plugins/04-consume

nano app.json

以下をコピペして保存。

{
        "menu": "<span id=consume-state>Consume</span>",
        "icon": "fireplace",
        "note": "MPD Command"
}

nano run.sh

以下をコピペして保存。

#!/bin/bash

mpc consume

exit $?

実行権限を付与。

chmod 777 run.sh

以上です！
細かいところで「何でやねん」というところもありますが、そこは多目に見てちょんまげ。

---

以上を行って、私のsymphonic-mpdのプルダウンメニューは、今、こうなってます。





consumeだけ表示が“ON”のままで“OFF”を表示しません！
consumeだけはMPDパネルからON/OFFするようにしますかね

---

以上、お役に立てますでしょうか！

HostNameを変更してAirPlay、Spotifyのデバイス名をHostNameにするプラグインを作成中です

初めて上に倣って書いてみました。
同じネットワーク上でSMPDを複数台動かす場合区別しやすくするためです。（Raspberryの種類、DEC、スピーカ、設置場所等を区別）

• プラグイン名は 50-change_hostname と取り敢えずしました。
• HostNameは２〜１０文字に制限しました。

使い方は簡単でプラグインを選択する

スクリーンショット 2020-03-20 0.15.35.png
入力画面にHostNameを入力する
スクリーンショット 2020-03-20 0.12.16.png
OKする結果の画面が出る
スクリーンショット 2020-03-20 0.13.38.png

作成したコードは
app.json

{
	"menu": "CHG HOST NAME",
	"icon": "account_balance",
	"note": "Change Host Name"
}

form.html

h1 {
    color: red;
    text-align: center;
}
.table1 { margin:20px ; margin-left: 40px ;
    border: 1px solid gray;
  }
  .table1 th, .table1 td {
    border: 1px solid gray;
  }
.olhit {line-height: 2.5}
.under {background: linear-gradient(transparent 70%, #ff99ab 70%);}
.del {text-decoration: line-through;}
.chuu {vertical-align: sub; }

AirPlayのawk用ファイル

/"Hostname"/ {print "        "$1, $2, "\""pname"\"""; "  $4,$5,$6,$7}
!/"Hostname"/ {print $0}

Spotifyのawk用ファイル

/device_name =/ {print $1,$2, vv}
!/device_name =/ {print $0} 

run.shのコード

if [ $# = 1 ]; then

  HNAM=$1
#  echo ${#HNAM}
#  su=${#HNAM}
#echo #su
#  sudo hostnamectl set-hostname #HNAME
    if [ ${#HNAM} -gt 1 -a ${#HNAM} -le 10  ]; then

     awk -v "pname=$HNAM" -f awksa /etc/shairport-sync.conf  > "tempf"
#     sudo  mv -f tempf /etc/shairport-sync.conf

     awk -v "vv=$HNAM" -f awkss /etc/spotifyd.conf > "tempf"
#     sudo mv -f tempf /etc/spotifyd.conf

     echo "WebUI と ssh のアドレスは  $HNAM.local  です"

#     sudo reboot
     exit $?

     fi
  fi

ここで、うまく行かないところをコメントアウトしています。
hostnameを変更する部分と
awkが実行してくれないため、コピーをさせないことです。
awkに関して./run.shとSSHで実行すればうまくいきます。

@miyt 最後の行のコードが誤っていました。
./run.sh abcd　　です　失礼しました。

@miyt さん

Web UIから起動したrun.shはrootで実行されますので、sudoは不要です。

（なお、RPi4版にはsudoはインストールしていません。）

@miyt さま
ざっと拝見した限り、以下の点でそのままでは動作しませんね。

１）form.htmlがcssしか入っていません。
　ちなみに自分でｃｓｓを調整するのはアリだと思いますが、WebUIの場合は既にBootstrap＋ympdのCSSを使用しておりますのでこれを上書きするように記載しないほうが良いかもしれません。

2）run.shの先頭行にシバン（#!/bin/sh)がありません

@sunatomo さま
１）違ったコードをアップしてました。訂正します。

<div style="padding:20px 20px 5px 20px;">
  <p>Set new HostName.</p>

  <label class="control-label">hostname</label><br/>
  <input type="text" class="run" /><br/>

  <p>after reboot, Use hostname.local for WebUI & ssh.</p>

</div>

２）一行目が抜けていました。

#!/bin/bash
if [ $# = 1 ]; then

  HNAM=$1
#  echo ${#HNAM}
#  su=${#HNAM}
#echo #su
#  sudo hostnamectl set-hostname #HNAME
    if [ ${#HNAM} -gt 1 -a ${#HNAM} -le 10  ]; then

     awk -v "pname=$HNAM" -f awksa /etc/shairport-sync.conf  > "tempf"
#     sudo  mv -f tempf /etc/shairport-sync.conf

     awk -v "vv=$HNAM" -f awkss /etc/spotifyd.conf > "tempfs"
#     sudo mv -f tempf /etc/spotifyd.conf

     echo "WebUI と ssh のアドレスは  $HNAM.local  です"

#     sudo reboot
     exit $?

     fi
  fi

exit 1

どちらも私の不注意で余分に時間を取らせてしまい誠にすみませんでした。

@miyt さま
私だったらrun.shはこうしますかね。(awkはちょっとわからないもので...)

#!/bin/bash
if [ $# = 1 ]; then
  HNAM=$1
  if [ ${#HNAM} -gt 1 -a ${#HNAM} -le 10  ]; then
    #update /etc/hosts
    #default 127.0.1.1       smpd
    cp /etc/hosts /etc/hosts.bak
    sed -i -e '/^127.0.1.1/c 127.0.1.1       ${HNAM}' /etc/hosts

    #update /etc/hostname
    #default smpd
    cp /etc/hostname /etc/hostname.bak
    echo "$HNAM" > /etc/hostname

    #update /etc/spotifid.conf
    #default device_name = symphonic-mpd(Pi4)
    systemctl stop spotifyd.service
    cp /etc/spotifyd.conf /etc/spotifyd.conf.bak
    sed -i -e '/^device_name/c device_name = ${HNAM}' /etc/spotifyd.conf
    systemctl start spotifyd.service

    systemctl stop shairport-sync.service
    cp /etc/shairport-sync.conf /etc/shairport-sync.conf.bak
    sed -i -e '/^\tname/c\\tname = "${HNAM}"; // This means "Hostname" -- see below. This is the name the service will advertise to iTunes.' /etc/shairport-sync.conf
    systemctl start shairport-sync.service

    echo "hostname was changed to ${HNAM}.local . your configuration takes effect after reboot"
  fi
fi

hostsは一応ホスト名が127.0.1.1に書かれているため書換
hostnameは今回ホスト名を書換えするため対応
spotifyd.conf shairport-sync.confもそれぞれ当該部分を書き換えます。
一応sedのコマンドはこれで動作することは確認しました（環境変数使わずに）。

@sunatomo さま
さすがプロの手にかかるとスッキリと見やすくなるのですね。私はawk,sedなどは２０年以上前にそれも単純なものしか作ってなかったので、ド素人で恥ずかしいです。-iとか/cは使った記憶はありません。
ホスト名が展開されていないので一部修正しました。

#!/bin/bash
if [ $# = 1 ]; then
  HNAM=$1
  if [ ${#HNAM} -gt 1 -a ${#HNAM} -le 10  ]; then
    #update /etc/hosts
    #default 127.0.1.1       smpd
    cp /etc/hosts /etc/hosts.bak
    sed -i -e '/^127.0.1.1/c 127.0.1.1       '${HNAM}'' /etc/hosts

    #update /etc/hostname
    #default smpd
    cp /etc/hostname /etc/hostname.bak
    echo "$HNAM" > /etc/hostname

    #update /etc/spotifid.conf
    #default device_name = symphonic-mpd(Pi4)
    systemctl stop spotifyd.service
    cp /etc/spotifyd.conf /etc/spotifyd.conf.bak
    sed -i -e '/^device_name/c device_name = '${HNAM}'' /etc/spotifyd.conf
    systemctl start spotifyd.service

    systemctl stop shairport-sync.service
    cp /etc/shairport-sync.conf /etc/shairport-sync.conf.bak
    sed -i -e '/^\tname/c\\tname = "'${HNAM}'"; // This means "Hostname" -- see below. This is the name the service will advertise to iTunes.' /etc/shairport-sync.conf
    systemctl start shairport-sync.service

    echo "hostname was changed to ${HNAM}.local . your configuration takes effect after reboot"
  fi
fi

RPi4のβ版と v0.9.3~版の両方ともうまくいきました。パパリウスさまありがとうございました。
AirPlayとSpotifyのデバイス選択画面(iPhone）はSMPD２台が現れます。

ここでAirPlayの場合SMPDのデバイスは一つしか現れない場合が多かった。

@miyt さま
プロではないです 今回のsedも日常的には使っていないので裏でググって調べました。
（確か、行毎書き換えるってのあったはずだと思って）
プラグインについてはお役に立てて何よりです。あとはパパリウスさまの方で標準に取り入れられると複数機で運用している人がちょっと喜びますよね。
（hostsとspotify・shairpot-syncそれぞれ別の名前で表示したい人は自分でなんとかしてもらいましょうか）

@miyt さん　@sunatomo さん

プラグインの動作、おめでとうございます。

Web UIのプラグイン機能は応用範囲が広くおもしろいギミックだと思います。

シェルが得意な人ならformは必要最小限の作りにしてシェルの方で全て解決したり、、、反対にWebが得意な人ならJavasciprtで全てお膳立てを整えてシェルは最小限のコマンドを叩くだけにするなど、得意な方法で実装できるのがユニークだなと思います。

---

ホスト名/AirPlayデバイス名/Spotifyデバイス名の変更は、標準機能としては対応しない予定です。

symphonic-mpdは、同一ネットワーク内で複数台を同時稼働させることを想定していないためです。