saquetim
2022 年 1 月 7 日午前 3:15
1
このテーマコンポーネントは、ページにウォーターマークを追加します。
以下のいずれかの情報を追加できます。
短いテキストメッセージ
現在ログインしているユーザー名
ページがレンダリングされたタイムスタンプ
いくつかの設定により、ウォーターマークのレンダリング方法とタイミングをカスタマイズできます。
show_watermark_in_background : 有効にすると、ページにウォーターマークが生成され表示されます。
scroll_enabled : 有効にすると、ウォーターマークはページと一緒にスクロールします。
only_in_categories : ウォーターマークを表示する必要があるカテゴリのリスト。
except_in_categories : ウォーターマークを表示しないカテゴリのリスト。
only_in_tags : ウォーターマークを表示する必要があるタグのリスト。
except_in_tags : ウォーターマークを表示しないタグのリスト。
if_site_title_matches : サイトのタイトルがこの正規表現と一致する場合にのみウォーターマークを表示します。ユースケースについては、Discourse Web Page Watermark - #5 by pfaffman を参照してください。
or_if_url_matches : または 、URLがリスト内の正規表現のいずれかに一致する場合にウォーターマークを表示します。テストされるURLにはホスト名は含まれないことに注意してください。
tile_width: ウォーターマーク情報を含むタイルの幅（px）。
tile_height : ウォーターマーク情報を含むタイルの高さ（px）。
color: ウォーターマークテキストの色。
text_align: 描画時にx,y座標に対してテキストをどのように配置するか。
text_rotation : 描画時にx,y座標に対してテキストをどの角度で回転させるか。
display_text : ウォーターマークにレンダリングされるテキスト。
display_text_font : テキストのレンダリングに使用されるフォント（CSSフォント値として解析されます）。
display_text_x : タイルキャンバスにテキストの描画を開始するx軸座標（ピクセル単位）。
display_text_y : タイルキャンバスにテキストの描画を開始するy軸座標（ピクセル単位）。
display_username : 有効にすると、ウォーターマークは現在のユーザー名をレンダリングします。
display_username_font : ユーザー名のレンダリングに使用されるフォント（CSSフォント値として解析されます）。
display_username_x : タイルキャンバスにユーザー名の描画を開始するx軸座標（ピクセル単位）。
display_username_y : タイルキャンバスにユーザー名の描画を開始するy軸座標（ピクセル単位）。
display_timestamp : 有効にすると、ウォーターマークはページがレンダリングされたタイムスタンプをレンダリングします。
display_timestamp_format : タイムスタンプのフォーマット方法。有効なフォーマットについては、Moment.js | Docs を参照してください。
display_timestamp_font : タイムスタンプのレンダリングに使用されるフォント（CSSフォント値として解析されます）。
display_timestamp_x : タイルキャンバスにタイムスタンプの描画を開始するx軸座標（ピクセル単位）。
display_timestamp_y : タイルキャンバスにタイムスタンプの描画を開始するy軸座標（ピクセル単位）。
フォーラムインスタンスにウォーターマークを追加する場合、おそらくそこから取得したスクリーンショットにタグを付けたいと思うでしょう。それらがあなたに由来することを追跡できるようにするため、または例としてユーザーがスクリーンショットを撮ってソーシャルメディアに投稿することを抑止するためです。しかし、ウォーターマークを追加すると可読性が低下することに注意することが重要です 。UXとそれを持つことの間にはトレードオフがあります。
ウォーターマークは、ページの下のdivでレンダリングされます。テーマによっては、上記のコンポーネントがそれを覆う可能性があるため、ページに追加することを選択した場合、テーマには多くの透明度が必要です。CSSでz-indexを変更して、すべてのコンポーネントの上に配置することも可能です。視認性を向上させるためにmix-blend-modeを調整することも必要です。
div#watermark-background {
z-index: 99999;
mix-blend-mode: multiply;
}
このコンポーネントには、ほとんどのライトテーマでうまく機能する適切なデフォルト設定が付属しています。ただし、ダークテーマにウォーターマークを追加するのは難しいです。可読性への影響が大きくなる可能性があるためです。ケースに最適なものを見つけるために、設定とCSSを調整することを強くお勧めします。
ウォーターマークはdivでレンダリングされるため、ブラウザの開発者ツールを使いこなせるユーザーであれば誰でもそれを非表示にできます 。技術的でないユーザーの99%にとっては意図したとおりに機能しますが、万能な解決策ではないことに注意することが重要です。
: eyeglasses:
プレビュー
: hammer_and_wrench:
リポジトリ
: question:
インストールガイド
: open_book:
Discourseテーマ初心者ですか？
編集:
2022-01-12: ウォーターマークが表示されるタイミングを制御するための新しい設定を追加しました。
「いいね！」 11
カテゴリ別にできますか？私たちの中には、透かしが必要な特定のカテゴリしかない人もいるかもしれません。
「いいね！」 4
なるほど、画像透かしと混同していました。タイトルを編集して、より明確にします。かなり珍しいユースケースですね。すべてのウェブページに透かしを入れるウェブサイトは、私の知る限りありません。
「いいね！」 4
saquetim
2022 年 1 月 10 日午後 2:54
4
素晴らしいアイデアです。この機能はできるだけ早く開発するよう最善を尽くします。
@codinghorror 、タイトルの明確化ありがとうございます。
珍しいユースケースであることは私も同意します。現状では、主に金融セクターのような企業の、偏執的なセキュリティ部門を持つプライベートフォーラムに役立つと思います。
これは最初のMVPでした。コミュニティから寄せられたフィードバックに基づいて機能を追加します。
うまくいけば、Mr. Xが提案したカテゴリベースのフィルターを間もなく追加できるようになり、より幅広い層にとってより役立つものになるでしょう。
「いいね！」 1
pfaffman
2022 年 1 月 11 日午後 6:25
5
PR を提出しました: skip display if title matches by pfaffman · Pull Request #1 · megothss/discourse-watermark · GitHub
これにより、テーマ設定 include_if_title_matches が追加され、デフォルトでは空になります。設定が空の場合、何も変更されません。
設定に値がある場合、ウォーターマークを表示するには SiteSetting.title が一致する必要があります。
ユースケースは、データベースの変更を必要とせずに、ステージングサイトにウォーターマークを表示し、本番サイトには表示しないことです。include_if_title_matches を「staging」に設定し、ステージングサイトの SiteSetting.title に「staging」を含める（本番データベースをステージングサイトに復元しても永続するように ENV 変数で設定する）ことで、ウォーターマークはステージングサイトに表示され、本番サイトには表示されません。
この変更により、ステージングサイトがあるすべてのサイトにこれをインストールします。
「いいね！」 1
saquetim
2022 年 1 月 13 日午前 1:39
6
本日マージしました。少し調整しました。設定名は if_site_title_matches に変更されました。
最新のコミットが古いインスタンスで機能するかどうか確認していただけますか？
特定のカテゴリ、タグ、またはURLにウォーターマークを表示できる新しいバージョンをリリースしました。
新しいオプションにより、より多くのユースケースに対応できると思います。
「いいね！」 5
pfaffman
2022 年 1 月 13 日午後 8:04
7
本番環境とステージング環境の両方で機能することを確認しました。ステージング環境は、作業中に Discourse.siteSettings.xxx で機能していました（アップグレードを行う予定ですが、それが変更される可能性があります）。
ステージングサイトにウォーターマークが表示されるのを見るのは非常に助かります。テーマをありがとうございます！
「いいね！」 4
（機能的に）目に見えない透かしを作成するオプションを追加することは可能でしょうか？たとえば、背景から1つまたは2つの色の値が異なり、すべての下にあるようなものです。その後、任意のスクリーンショットを見て、それらの色の値を探してユーザー名のテキストを発見できます。
ユースケースは、スクリーンショットを抑止することではなく、どのユーザーがプライベートフォーラムから投稿をスクリーンショットして配布しているかを見つけることです。
あるいは、フォーラムは自動でライト/ダーク切り替えを使用しているため、テーマのコピーを2つ実行して色の値をハードコーディングすることは可能でしょうか？または、透かしの色をテーマごとの設定にすることは可能でしょうか？
これについてありがとうございます。私たちにとって完璧なソリューションになるかもしれません。
「いいね！」 1
pfaffman
2022 年 1 月 23 日午前 11:43
9
もし彼らを思いとどまらせることができれば、彼らは止まり、誰であったかは問題ではなくなるのではないでしょうか？
現在のテーマによって色が変わるようにするのは難しいと思います。もしあなたが秘密の透かしを入れて誰かを捕まえようとしているのであれば、他のテーマを無効にするのが最善の策でしょう。
「いいね！」 1
saquetim
2022 年 1 月 23 日午後 2:26
10
@baylands ,
[quote=“baylands, post:8, topic:214108”]
ユースケースはスクリーンショットを抑止することではなく、プライベートフォーラムからの投稿をスクリーンショットして配布しているユーザーを見つけることです。
このコンポーネントの主なユースケースはスクリーンショットを抑止することですが、アプローチを試して機能するかどうかを確認できます。それは私が以前考えたことのないユースケースです。
[quote=“pfaffman, post:9, topic:214108”]
color 設定は、CSS変数を使用することをサポートしています。たとえば、この設定のデフォルト値は var(--primary-low) です。
したがって、透かしを入れようとしているすべてのテーマで使用されている適切な色で設定されたCSS変数が使用されている限り、問題ありません。
試してみて、期待どおりに機能するかどうか教えてください。
「いいね！」 2
ありがとうございます。これで多くのことが明確になりました！
変数ルートを試したときに問題が発生しました。
私たちの唯一のテーマ はライトテーマであり、ライトとダークのカラーパレットを自動ダークモードに使用しています。
ライトテーマ のCSSに「–secondary-watermark」という変数を追加できますが、ライトテーマ でダークカラーパレット を使用しても変更されません。
テーマではなくカラーパレットに変数を追加する方法がわかりません。その結果、ライトテーマのオーバーライドはライトカラーパレットでのみ機能し、カラーパレットが自動的にダークに切り替わると、ウォーターマークがすぐに表示されます。
これは奇妙な癖であり、しばらく考えなければなりませんでした。ところで、変数で計算を実行できることをご存知ですか？たとえば、–secondary-watermarkを–secondaryから10を引いた値として定義するなどです。もしそうなら、それが解決策になると思います。
私たちのユースケースは、正直なところ少しニッチです。目に見えるウォーターマークがあっても、人々はそれを回避する方法を見つけようとするでしょう。私たちはクローズドメンバーシップグループであり、スクリーンショットを広めた人々を追放できるようにする必要があります。それが私たちにとってより重要です。
重ねて感謝いたします！
「いいね！」 1
if is-light-color-scheme 関数を使って取得しました。期待どおりに動作します。ありがとうございます！
「いいね！」 3
adambirds
2022 年 12 月 17 日午前 1:24
13
これは私たちにとって本当に素晴らしいことです。私たちのグループに侵入して私たちを悪く見せようとする人々によって、プライベートフォーラムの投稿がソーシャルメディアに投稿され続けていたので、これがあればそれを防ぐか、問題のあるユーザーを簡単にブロックできるようになります。これを開発してくれた @saquetim に感謝します。
「いいね！」 4
pfaffman
2024 年 1 月 4 日午後 9:26
14
いくつかの非推奨があります。
deprecate-shim.js:33 非推奨: [THEME 15 'discourse-watermark'] Ember グローバルの使用は非推奨です。代わりに Ember モジュールまたは特定の API をインポートしてください。[deprecation id: ember-global] 詳細については、https://deprecations.emberjs.com/v3.x/#toc_ember-global を参照してください。
非推奨: [THEME 15 'discourse-watermark'] `run.schedule` の使用は非推奨です。代わりに、`@ember/runloop` から直接値をインポートしてください。
`schedule` を `@ember/runloop` からインポート [deprecation id: deprecated-run-loop-and-computed-dot-access]
お手伝いしたいのですが、私自身の
「いいね！」 2
saquetim
2024 年 1 月 4 日午後 10:04
15
これは個人的なものです。
ウィジェットを使わないようにリファクタリングする必要もあります。
時間ができたらすぐに修正を試みます。
「いいね！」 3
Ventrilo
2024 年 1 月 10 日午後 12:22
16
使用しているテーマではあまりうまく機能しません。カスタマイズ可能なオプションがもっとあると良いのですが、例えば、ウォーターマークがページ全体のうちどれくらいの領域を占めるかを決定できるようにすること（ヘッダーではなく、投稿コンテンツ/ページの背景のみを占めるようにするなど）です。
私のテーマに関してですが、どのカラーセレクターCSSを使用しても、またどれだけ明るい色を選択しても、テキスト/SVGは暗い/黒く表示されます。
「いいね！」 1
Ventrilo
2024 年 1 月 28 日午前 11:30
17
これに関するアップデートはありますか？ @saquetim
「いいね！」 2
良いコンポーネントですが、Ember 5 をサポートしていませんか？@saquetim
「いいね！」 1
saquetim
2024 年 3 月 4 日午後 4:46
19
近日中に互換性のあるバージョンに取り組む時間を確保するようにします。
「いいね！」 1
pfaffman
2024 年 9 月 12 日午後 6:26
20
@saquetim さん、これを確認する時間はありましたか？ まだ壊れているようです。
「いいね！」 2
を消火しています。
