Zenn
⚒️

Jitsi Meetのトップページをちょっとだけカスタマイズ

2022/01/20に公開
OSS
tech

Jitsi Meetのトップページ(welcome page)の文字とかを少しだけ変更したかったので、やってみた。

ちなみにJitsi Meetの構築方法はこちら。
https://zenn.dev/8chikuwa3/articles/a33a8c7ce97d63

やりたいこと

  1. タイトルとサブタイトルの変更
  2. フッタからモバイルアプリへの誘導を削除

事前調査

トップページのソースファイルを探すのにちょっと苦労したので、メモ。
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

との記述もあったので、[lang/main-ja.json]に設定を追加する。

main-ja.json
    "welcomepage": {
        "accessibilityLabel": {
            "join": "タップして参加",
            "roomname": "ルーム名を入力してください"
        },
        "appDescription": "チーム全体とビデオチャットをしましょう。あなたが知っ>
        "audioVideoSwitch": {
            "audio": "音声",
            "video": "映像"
        },
        "calendar": "カレンダー",
        "connectCalendarButton": "カレンダーに接続",
        "connectCalendarText": "{{app}} 内の全ミーティングを表示するために、カ[>
        "enterRoomTitle": "新しいミーテイングを開始",
        "getHelp": "ヘルプ",
        "go": "GO",
        "goSmall": "GO",
        "info": "ダイアルイン情報",
        "join": "作成/参加",
        "jitsiMeet": "Jitsi Meet",
        "jitsiOnMobile": "モバイル版 Jitsi ? アプリをダウンロードして、どこから>
        "moderatedMessage": "または、前もってあなたのみがモデレーターである<a h>
        "privacy": "プライバシー",
        "recentList": "最近の履歴",
        "recentListDelete": "削除",
        "recentListEmpty": "最近のリストは現在空です。チームとチャットすると、[>
        "reducedUIText": "{{app}} にようこそ!",
        "roomNameAllowedChars": "ミーティング名には、次の文字を含めないでくださ>
        "roomname": "ルーム名を入力してください",
        "roomnameHint": "参加したい部屋の名前または URL を入力してください。あ[>
        "sendFeedback": "フィードバックを送信",
        "secureMeetings": "安全で高品質なミーティング",
        "startMeeting": "ミーティングを開始",
        "terms": "利用規約",
        "title": "安全、機能充実、そして完全無料のビデオミーティング",
+       "headerTitle":"社内WEB会議システム",
+       "headerSubtitle":"下のボックスに任意のミーティング名を入力し、【ミーティングを開始】をクリニックしてください。"
    },

言語を日本語に設定して...

できた！

フッタからモバイルアプリへの誘導を削除

[app.bundle.min.js]を編集して、以下の部分を削除する。

app.bundle.min.js
- ,y.a.createElement("div",{className:"welcome-footer-row-1-text"},e("welcomepage.jitsiOnMobile")),y.a.createElement("a",{className:"welcome-badge",href:r},y.a.createElement("img",{src:"./images/app-store-badge.png"})),y.a.createElement("a",{className:"welcome-badge",href:t},y.a.createElement("img",{src:"./images/google-play-badge.png"})),y.a.createElement("a",{className:"welcome-badge",href:n},y.a.createElement("img",{src:"./images/f-droid-badge.png"}))

できた！

Discussion