element web
1.11.83
Element (以前は Vector および Riot として知られていました) は、Matrix JS SDK を使用して構築された Matrix Web クライアントです。
Element には、さまざまな環境向けに複数の層のサポートがあります。
サポートされています
問題は積極的に優先順位付けされ、回帰によりリリースがブロックされる
意味：
デスクトップ OS 上の Chrome、Firefox、Edge の最新の 2 つのメジャー バージョン
Safari の過去 2 つのバージョン
デスクトップ OS 上の公式 Element Desktop アプリの最新リリース
デスクトップ OS とは、OS ベンダーによってアクティブにサポートされ、セキュリティ アップデートを受け取るデスクトップ デバイスの macOS、Windows、および Linux バージョンを意味します。
ベストエフォート
問題は受け入れられ、リグレッションによってリリースがブロックされることはありません
より広範な Element 製品 (Element Call や Enterprise Server Suite を含む) は、まだこれらのブラウザを正式にサポートしていません。
要素 Web プロジェクトとそのコントリビューターは、クライアントの機能を維持し、他の兄弟機能 (要素呼び出しなど) が機能しない可能性がある場合には正常に機能を低下させる必要があります。
意味：
Firefox ESR および Chrome/Edge Extended Stable の最後のメジャー リリース
コミュニティのサポートあり
問題は受け入れられ、リグレッションによってリリースがブロックされることはありません
これらの問題をサポートするためにコミュニティへの貢献を歓迎します
意味：
Android、iOS、iPadOS 上の Chrome、Firefox、Safari の現在の安定バージョンのモバイル Web
サポートされていません
定義: サポートされていない環境にのみ影響する問題は解決されました
その他すべて
これらの層のサポート期間は、上記で指定したリリースに 1 アプリのリリース サイクル (2 週間) を加えた期間まで続きます。 Firefox ESR の場合、これは Debian 安定版に移行できるようにさらに拡張されています。
Android または iOS デバイスで Element にアクセスするには、現時点ではネイティブ アプリの element-android および element-ios をお勧めします。
Element をテストする最も簡単な方法は、https://app.element.io でホストされているコピーを使用することです。危険な生活を好む人のために、 developブランチは継続的に https://develop.element.io にデプロイされます。
Element の独自のインスタンスをホストするには、「Element Web のインストール」を参照してください。
Element をデスクトップ アプリケーションとしてインストールするには、以下の「デスクトップ アプリケーションとして実行する」を参照してください。
Matrix ホームサーバーと同じドメイン名から Element を実行することはお勧めしません。その理由は、誰かが Element に、Matrix API から悪意のあるユーザーが生成したコンテンツを読み込ませてレンダリングさせた場合に発生する可能性がある XSS (クロスサイト スクリプティング) 脆弱性のリスクです。Matrix API は、同じドメイン。
この状況から身を守るために、いくつかの大まかな緩和策を導入しましたが、最初からこれを行うことは依然として良い習慣ではありません。詳細については #1977 を参照してください。
特別な要件がない限り、Element Web をホストするときに Web サーバー構成に以下を追加する必要があります。
X-Frame-Options: SAMEORIGINヘッダー。Element Web がフレーム化されるのを防ぎ、クリックジャッキングから保護します。
X-Frame-Optionsの最新の代替として、 Content-Security-Policyヘッダーへのframe-ancestors 'self'ディレクティブ (ただし、すべてのブラウザーがまだサポートしているわけではないため、両方を含める必要があります。これを参照してください)。
X-Content-Type-Options: nosniffヘッダー。MIME スニッフィングを無効にします。
X-XSS-Protection: 1; mode=block;ヘッダー、従来のブラウザーでの基本的な XSS 保護用。
nginx を使用している場合、これは次のようになります。
add_header X-Frame-Options SAMEORIGIN; add_header X-Content-Type-Options nosniff; add_header X-XSS-Protection "1; mode=block"; add_header Content-Security-Policy "frame-ancestors 'self'";
Apache の場合、構成は次のようになります。
Header set X-Frame-Options SAMEORIGIN Header set X-Content-Type-Options nosniff Header set X-XSS-Protection "1; mode=block" Header set Content-Security-Policy "frame-ancestors 'self'"
注: すでにContent-Security-Policyヘッダーを他の場所で設定している場合は、最後の行を追加する代わりに、 frame-ancestorsディレクティブを含めるようにヘッダーを変更する必要があります。
Element は最新の ES6 で構築されたモジュール式 Web アプリで、Node.js ビルド システムを使用します。最新の LTS バージョンの Node.js がインストールされていることを確認してください。
npmの代わりにyarnを使用することをお勧めします。まだお持ちでない場合は、Yarn インストール ガイドを参照してください。
nodeが少なくとも現在推奨されている LTS になるように、 node.jsをインストールまたは更新します。
まだ存在しない場合は、 yarnインストールします。
リポジトリのクローンを作成します: git clone https://github.com/element-hq/element-web.git 。
element-web ディレクトリに切り替えます: cd element-web 。
前提条件をインストールします: yarn install 。
developブランチを使用している場合は、適切な開発環境をセットアップすることをお勧めします (下記の開発環境のセットアップを参照)。あるいは、https://develop.element.io (開発ブランチの継続的統合リリース) を使用することもできます。
config.sample.jsonをconfig.jsonにコピーし、変更してアプリを構成します。詳細については、構成ドキュメントを参照してください。
展開する tarball を構築するには、 yarn dist使用します。このファイルを展開すると、Web サーバーに置く必要があるすべてのファイルを含むバージョン固有のディレクトリが得られます。
yarn dist Windows ではサポートされていないことに注意してください。そのため、Windows ユーザーは、 yarn buildを実行して、必要なすべてのファイルをwebappディレクトリにビルドできます。 dist スクリプトを使用しないと、Element のバージョンは設定に表示されません。その後、Web サーバーにwebappディレクトリをマウントして、完全に静的なコンテンツであるアプリを実際に提供できます。
Element は、Electron でラップされたデスクトップ アプリとして実行することもできます。 https://element.io/get-started からビルド済みバージョンをダウンロードすることも、必要に応じて自分でビルドすることもできます。
自分でビルドするには、https://github.com/element-hq/element-desktop の手順に従ってください。
Electron 統合に関する最初の作業については @aviraldg に感謝します。
構成ドキュメントには、必要に応じてデスクトップ アプリのデフォルト設定をオーバーライドする方法が示されています。
Element は、デフォルトのサーバー、動作、テーマなどを構成するためのさまざまな設定をサポートしています。詳細については、構成ドキュメントを参照してください。
Element の一部の機能は、設定のLabsセクションのフラグによって有効になる場合があります。これらの機能の一部は、labs.md で説明されています。
独自の Web サーバーから Element を提供する場合、Element では次の URL がキャッシュされないようにする必要があります。
/config.*.json /i18n /home /sites /index.html
また、 /に対してCache-Control: no-cache返すように Web サーバーを構成することで、ページ読み込み時にブラウザーに Element のキャッシュされたコピーを強制的に再検証させることをお勧めします。これにより、ブラウザーは、展開後の次のページの読み込み時に、新しいバージョンの Element を確実にフェッチします。これは、Dockerfile の nginx 構成ですでに構成されていることに注意してください。
Element で開発を試みる前に、 Element の設計、アーキテクチャ、スタイルも定義されているmatrix-react-sdkの開発者ガイドを読む必要があります。
どこから始めればよいかについては、「問題の選択」ページを参照してください。機能の作業を開始する前に、計画が Element のビジョンとよく一致していることを確認することが最善です。開始する前に #element-dev:matrix.org でチームとチャットして、それがマージしてもよいかどうかを確認してください。
また、コードベースに存在する、飼いならされたドラゴンとそれほど飼いならされていないドラゴン (注意事項) についてのガイド「Here be Dragons」もよく理解しておく必要があります。
Element の考え方は、基になるmatrix-react-sdkの上にあるカスタマイズの比較的軽量の「スキン」になることです。 matrix-react-sdk React を使用して Matrix 通信アプリを構築するのに役立つ高レベルと低レベルの両方の React コンポーネントを提供します。
Element は公共のインターネットにアクセスしなくても正しく実行されるように設計されていることに注意してください。したがって、外部 CDN またはサーバーによってホストされているリソース (JS ライブラリ、CSS、画像、フォント) に依存せず、代わりにすべての依存関係を Element 自体にパッケージ化してください。
Element の機能の多くは、実際にはmatrix-js-sdkモジュールにあります。これらを、git でのdevelopブランチの追跡を容易にし、毎回手動で再構築することなくローカルに変更を加えられるように設定することが可能です。
最初にmatrix-js-sdkクローンしてビルドします。
git clone https://github.com/matrix-org/matrix-js-sdk.gitpushd matrix-js-sdk 糸リンク 糸インストールポップ
リポジトリのクローンを作成し、 element-webディレクトリに切り替えます。
git clone https://github.com/element-hq/element-web.gitcd element-web
config.sample.jsonをconfig.jsonにコピーし、変更してアプリを構成します。詳細については、構成ドキュメントを参照してください。
最後に、Element 自体をビルドして起動します。
糸リンク行列-js-sdk 糸のインストール 糸のスタート
初期ビルドが完了するまで数秒待ちます。次のようなものが表示されるはずです:
[element-js] <s> [webpack.Progress] 100% [element-js] [element-js] ℹ ｢wdm｣: 1840 modules [element-js] ℹ ｢wdm｣: Compiled successfully.
このコマンドは Web サーバーを実行し、ソース ファイルが変更されると再構築するため、コマンドは終了しないことに注意してください。この開発サーバーはキャッシュも無効にするため、運用環境では使用しないでください。
ブラウザで http://127.0.0.1:8080/ を開いて、新しく構築された要素を確認します。
注: Linux では、ビルド スクリプトはデフォルトで inotify を使用して、ディレクトリの変更を監視します。 inotify の制限が低すぎる場合、ビルドはサイレントに失敗するか、 Error: EMFILE: too many open filesが表示されて失敗します。これらの問題を回避するには、監視制限を少なくとも128M 、インスタンス制限を512程度にすることをお勧めします。
詳細については、問題 #15750 および #15774 に興味があるかもしれません。
新しい inotify 監視とインスタンスの制限を設定するには、次のコマンドを実行します。
sudo sysctl fs.inotify.max_user_watches=131072 sudo sysctl fs.inotify.max_user_instances=512 sudo sysctl -p
必要に応じて、次のコマンドを実行して、新しい制限を永続化することができます。
echo fs.inotify.max_user_watches=131072 | sudo tee -a /etc/sysctl.conf echo fs.inotify.max_user_instances=512 | sudo tee -a /etc/sysctl.conf sudo sysctl -p
matrix-js-sdkに変更を加えると、それらは webpack によって自動的に取得され、ビルドされる必要があります。
これらの手順のいずれかでfile table overflowのエラーが発生した場合は、開いているファイルの最大数の制限が非常に低い Mac を使用している可能性があります。 ulimit -Sn 1024を実行して、再試行してください。 Element をビルドする前に、新しいターミナルを開くたびにこれを行う必要があります。
testsディレクトリには、アプリケーション レベルのテストが多数あります。これらは Jest および JSDOM で実行するように設計されています。それらを実行するには
yarn test
エンドツーエンド テストの実行方法については、matrix-react-sdk を参照してください。
新しい翻訳を追加するには、翻訳ドキュメントにアクセスしてください。
開発者ガイドについては、翻訳された開発ドキュメントを参照してください。
問題は、トリアージ プロセスに従って、コミュニティ メンバーと Web アプリ チームによってトリアージされます。
問題ラベルを使用して、受信したすべての問題を並べ替えます。
