アップロード画像すべてにウォーターマーク

すべての Discourse 開発者の皆様へ

世界最高峰のフォーラムを作り上げてくださった Discourse 開発者の皆様に心から感謝申し上げます。:smiling_face_with_three_hearts: 私自身、過去 10 年間で Discuz や Buddyboss(WordPress)など他のプログラムを使って複数のフォーラムを構築してきましたが、Discourse に匹敵するものは一つもありませんでした。

Discourse で唯一不足している機能は、透かし(ウォーターマーク)機能です。Discourse がすべてのアップロード画像に透かしをサポートしてくれれば完璧です。このフォーラムで他のユーザーが提案したような、極めて複雑なものである必要はありません。(開発者がその要望を無視した理由も理解できます。それは完全に非現実的だからです。)


私見ですが、非常にシンプルな透かし機能があれば十分です。アップロードされるすべての画像にアイコンやテキストを追加し、誰かがあなたの画像を他のウェブサイトやプラットフォームに共有(あるいは盗用)した場合、その画像が私のフォーラムから来ていることがすぐに分かるようにします。

私自身は、フォーラムにアップロードする前に常に自分で透かしを入れていますが、多くのコミュニティメンバーは自分で行いたがっていません。特にスマートフォンで画像を投稿する際、フォーラム側で自動的に追加されることを望んでいます。

Discourse は、写真フォーラムのように画像が大量にあるフォーラムというよりは、テキストベースのフォーラムとして設計されたことは理解しています。しかし、多くの優れたプラグインやテーマコンポーネント(TC)のおかげで、Discourse で写真志向のフォーラムをきれいに構築することができました。


私は、以下の場所に透かし画像のアップロードボックスを追加することを推奨します。
/admin/site_settings/category/branding

また、以下の場所に選択ボタンを追加します。
/admin/site_settings/category/files
2020-12-30_042258

さらに、透かしの位置を選択するためのプルダウンメニューを追加します。例は以下の通りです。

これだけで十分です。他の派手な機能は不要です。
スケーリング、不透明度、元の画像のバックアップなどの機能は素晴らしいですが、必須ではありません。

最後に、Discourse 開発者の皆様の継続的なご尽力に心から感謝申し上げます。
ありがとうございます。良いお年を!~!:kissing_heart:

「いいね!」 7

Jacky さん、ありがとうございます。誰かが実験してみるのに興味深いプラグインのようですね。ただし、これはコア機能にはならないと思いますが、コア側でプラグインのサポートを促進することは可能です。

予算がある場合は、Marketplace に投稿することをお勧めします。最小限の構成(テキストの提供のみ)の最小プロトタイププラグインの構築には、おそらく 1〜2 日程度かかるでしょう。

画像を重ねて透かしを入れる処理は、完璧に仕上げるのに少し時間がかかるかもしれません。

「いいね!」 12

いくつかの実験の後、透かしに対する一時的な「解決策」を見つけました。:partying_face:

もしかしたら他の人にも役立つかもしれないので、私の回避策を共有したいと思います。お役に立てれば幸いです。:smiling_face_with_three_hearts:

  1. まず、別のサブドメインに Chevereto(無料版)をインストールします。
    (非常に簡単です。installer.php ファイルをサーバーにアップロードし、ページを開いてセットアップ手順に従うだけで、数分で完了します):kissing_heart:

  2. 無料版でも透かし機能がサポートされています。ダッシュボードの画像アップロード設定で設定できます。

また、ダッシュボードで画像の最大幅と高さを設定することもできます。これにより、アップロードされた大きな画像は自動的にリサイズされます。

  1. Chevereto プラグイン(スクリプト)を Discourse の <head> タグに追加します。
    <script async src="https://img.example.com/sdk/pup.js" data-url="https://img.example.com/upload"></script>

  2. Discourse はもはや i タグの Font Awesome アイコンをサポートしていないようですので、JavaScript を以下のように修正する必要があります。
    <i class="fa fa-cloud-upload d-icon d-icon-upload"></i>
    から
    <svg class="fa d-icon d-icon-cloud-upload-alt svg-icon svg-node" aria-hidden="true"><use xlink:href="#cloud-upload-alt"></use></svg>

  3. 設定が正しければ、Discourse エディタにクラウドアップロードアイコンが表示されます。

  4. 新しいアイコンをクリックし、ポップアップウィンドウに画像をドラッグ&ドロップすると、自動的にアップロードされ、透かし付きのコードがエディタに貼り付けられます。:partying_face:

  5. 現在はデスクトップで完璧に動作しています。しかし、スマートフォンにアイコンを追加する方法についてはまだ検討中です。:thinking: もし方法が見つかったら、この投稿を更新します。

これはあくまで一時的な解決策であり、完璧ではありませんが、数分で簡単に実現できます。将来的には、Discourse がコア機能またはプラグイン/TC を通じて透かし機能を追加してくれることを願っています。

「いいね!」 9

これは良さそうです。これらすべての機能を含むテーマコンポーネントがあれば、Cheveretoのインストールのみを手動で行うだけで済むので、非常に素晴らしいでしょう。

「いいね!」 4

Chevereto プラグインの JavaScript を少し修正しました。

sibling: ".upload.btn", siblingPos:"before",

sibling:".code.btn",siblingPos:"after",
に変更しました。

これで、アイコンがデスクトップとスマートフォンの両方に表示されるようになりました:partying_face:

「いいね!」 2

大好きです!同じターゲットを達成するためのプラグインはありますか?

ウォーターマーク用のコンポーネントがあれば、もっと良くなるはずです。

「いいね!」 2

画像の保存フォルダを教えていただけますか?

一括でウォーターマークを付けたい方法の1つは、外部の画像編集ツールを実行することです。

最新の Discourse 3.2 でこれを達成できた方はいらっしゃいますか?

これはかなりクールですね。この Theme component にも興味があるかもしれません。

「いいね!」 2

テーマコンポーネントで試してみました。あくまで概念実証なので、基本的なものです。:smile:
アップロードごとに、自動的に透かしが適用されます。

技術的な側面では、Discourse が画像をアップロード前に(圧縮などの)前処理を行うように、このツールも同様に透かし処理を行います。API と Uppy ライブラリのおかげで、透かし処理は簡単に実現できます。:pray:

最小限の機能やカスタマイズで検討したいものがあれば教えてください。:slight_smile:

編集:基本的な設定を実装したら、すぐにバージョンを投稿します。

「いいね!」 14

:heart: :heart: :heart:
素晴らしい出来栄えです!テスターが必要な場合はお知らせください。

「いいね!」 2

これで本番環境にデプロイできますか? 非常に興味があります。

「いいね!」 1

すべての画像に透かしを印刷するのに適した、合法的な状況はどのようなものですか?

「いいね!」 1

これは本番環境で利用可能ですか?

遅くなってすみません:sweat_smile:
もしよろしければ、ここにTCをリリースしました: https://meta.discourse.org/t/watermark-image/347138。フィードバックをお待ちしています!

「いいね!」 7