⚒️
Jitsi Meetのトップページをちょっとだけカスタマイズ
Jitsi Meetのトップページ(welcome page)の文字とかを少しだけ変更したかったので、やってみた。
ちなみにJitsi Meetの構築方法はこちら。
やりたいこと
- タイトルとサブタイトルの変更
- フッタからモバイルアプリへの誘導を削除
事前調査
トップページのソースファイルを探すのにちょっと苦労したので、メモ。
nginxの設定を見て、rootフォルダを確認
cat /etc/nginx/sites-available/hogehoge.conf
※[hogehoge.conf]は構築時に指定したドメイン名のconfファイルになっている。
rootフォルダのパスは[/usr/share/jitsi-meet]になっているみたいなので、以下の操作は、
このフォルダ配下で進める。
次にindex.htmlを眺めてみると、 [libs/lib-jitsi-meet.min.js]と[libs/app.bundle.min.js]を見てみると良さそう。
[app.bundle.min.js]にタイトル・サブタイトル・フッター情報があったので、これを編集していく。
タイトルとサブタイトルの変更
[app.bundle.min.js]のタイトルとサブタイトルは、以下の部分で定義しているっぽい。
app.bundle.min.js
"headerTitle":"Jitsi Meet"
"headerSubtitle":"Secure and high quality meetings
ここを直してしまってもOKだが、言語の設定にかかわらず変更されてしまうので、翻訳ファイルで変更してみる。
app.bundle.min.js
welcomepage.headerTitle
welcomepage.headerSubtitle
との記述もあったので、
/usr/share/jitsi-meet/lang/main-ja.json
の設定を変更する
main-ja.json
- "headerTitle":"Jitsi Meet",
- "headerSubtitle":"安全で高品質なミーティング"
+ "headerTitle":"社内WEB会議システム",
+ "headerSubtitle":"下のボックスに任意のミーティング名を入力し、【ミーティングを開始】をクリニックしてください。"
言語を日本語に設定して...

できた!

フッタからモバイルアプリへの誘導を削除
/usr/share/jitsi-meet/plugin.head.html
にスタイルシートを適用する。
app.bundle.min.js
+ <style> .welcome .welcome-footer-padded { visibility: hidden; } </style>
できた!

反映されない場合は、サービスの再起動やブラウザ側のキャッシュの削除を試してみてください。
参考
その他にもカスタマイズがいろいろとあるので、こちらを参考に。
Discussion