QRコード共有アイテム

Alteras · 2024 年 12 月 11 日午後 9:11


	概要	リンクソースを共有するためのQRコードジェネレーターを追加します
	プレビュー
https://discourse.theme-creator.io/theme/Alteras/qr-code-shareables

	リポジトリ
GitHub - Alteras1/discourse-qr-code-shareables: Discourse Theme Component for generating QR codes for shareable links/invites

	インストールガイド	テーマまたはテーマコンポーネントのインストール方法
	Discourseテーマ初心者の方へ	Discourseテーマの使用に関する初心者向けガイド

このテーマコンポーネントをインストール

共有可能なリンクのソースにQRコードを追加します。QRコードのスタイルを調整するための設定が含まれています。

DETAILS
SUMMARY
スクリーンショット

/DETAILS

設定

名前	説明
share_in_private	プライベートコンテキスト（ログインが必要なサイトやプライベートメッセージ）でのQRコードを許可します。
dots_color	QRコードの点の色の設定。
dots_type	QRコードに使用される点の種類。オプション: `rounded`, `dots`, `classy`, `classy-rounded`, `square`, `extra-rounded`
corners_square_color	QRコードの角の正方形の色の設定。
corners_square_type	QRコードの角の正方形の種類。オプション: `dots`, `square`, `extra-rounded`, `dot`, `rounded`, `classy`, `classy-rounded`
corners_dots_type	QRコードの角の点の種類。オプション: `dot`, `square`, `dots`, `rounded`, `classy`, `classy-rounded`, `extra-rounded`
background_color	QRコードの背景色の設定。
image	QRコードに埋め込む画像。指定しない場合、画像なしでQRコードが通常通り生成されます。
image_hide_background_dots	画像の背後で背景の点を非表示にするかどうか。
image_margin	QRコード内の埋め込み画像の周囲の余白。 `px`単位
image_size	QRコードに対する埋め込み画像のサイズ。これは `0` から `1` までの比率です。

注意事項

いくつかの機能リクエスト（

および

）を読んだ後、共有可能なリンクにQRコードを追加するというアイデアを気に入りました。現在、これはトピックと投稿の共有のみを対象としています。招待作成モーダルにはプラグインのアウトレットがなく、共有APIも使用していないためです。

これは、QRコードのカスタマイズに https://www.npmjs.com/package/qr-code-styling パッケージを使用しています。

Jagster · 2024 年 12 月 11 日午後 9:28

それをどのように共有すればよいですか？印刷メディアからQRコードのみを使用することに慣れています🤷‍♂️

Alteras · 2024 年 12 月 11 日午後 9:53

共有したい相手が画面を見ることができる状況（例：モバイルでQRコードを素早く表示する）で役立ちます。QRコードはHTMLキャンバス要素なので、右クリックして画像として保存することもできます。

Jagster · 2024 年 12 月 11 日午後 10:01

iPadでは保存やコピーができません。

Alteras · 2024 年 12 月 11 日午後 10:31

HTMLキャンバスに何かを入れ忘れていたことに気づきました。PNGに変換する修正をプッシュしました。

Monikas · 2024 年 12 月 12 日午前 9:09

中央がくり抜かれていて、下のQRコードのような感じが少し変な感じがします。

merefield · 2024 年 12 月 12 日午前 9:13

素晴らしい追加をありがとうございます！

これは何らかの方法で埋めるべきギャップですね？ QR招待は素晴らしいものになるでしょう！

Alteras · 2024 年 12 月 12 日午後 4:32

修正をプッシュしました。image hide background dots と image margin が正しく機能するはずです。

Alteras · 2024 年 12 月 12 日午後 4:38

コアにいくつかの新しいプラグインアウトレットのためのPRがあります！招待で共有APIが使用されていない特別な理由があるかどうかわからないので、PRをプラグインアウトレットに限定しておきます。

merefield · 2024 年 12 月 12 日午後 4:39

チームと話し合ってください。

nathank · 2024 年 12 月 17 日午前 12:36

投稿でこれを機能させるにはどうすればよいですか？トピックしかできません。

現在、代わりにこれを入手しています。

image216×116 1.9 KB

また、欲張りなので、サイト上の任意のリンクに対してネイティブにこれ（つまり、QRコードの作成）を行えるようになりたいです！

tobiaseigen · 2024 年 12 月 17 日午前 1:18

このテーマコンポーネントにハマっています！家族のフォーラムでは、猫のトイレの掃除方法のようなハウツーの手順のカテゴリがあります。すでに、トイレの横に簡単な手順を印刷して置くことを考えていました。それには、詳細な手順のフォーラムへのQRコードを付けることができます。URLを使って他の場所で作成することもできますが、Discourseで直接行うのが好きです。

興味深いですね。招待システムをどのように改善するか、その壮大な物語を教えていただけますか？QRコードの招待はどのように、どこで共有され、どのように受け入れられるのでしょうか？他のプラットフォームで、他の人がどのようにこれを行っているかを示す先行事例を共有していただけますか？また、招待システムでは、QRコードはどこで利用可能になると考えていますか？

新しい共有リンクを使用しています。これは共有用のURLを取得するだけで、モーダルは表示されません。投稿メニューのサイト設定に移動すると、元の共有投稿メニュー項目を有効にすることができます。これにより、QRコードも表示されるようになります。投稿のタイムスタンプをクリックして、元の共有ポップアップにアクセスすることもできます。

nathank · 2024 年 12 月 17 日午前 5:20

投稿のタイムスタンプに共有モーダルがあることに気づきませんでした！確かに、そこに隠すのは良い場所ですし、よりシンプルな共有リンクは最も一般的な用途には理にかなっています。

特筆すべきは、私のAndroidスマートフォン（Pixel 7 Pro）は自動的にQRコードを作成することです。これは招待モーダルでも機能します。そして、それが私の主なユースケースです。実際にはこれを調査したことはありませんでした。ああ、発見の旅だ！

しかし、このTCが作成するものほど見栄えは良くありません！

merefield · 2024 年 12 月 17 日午前 7:05

おお！はい。それはすでにAndroidで実装されています。誰が知っていたのでしょう！素晴らしい！私に教えてくれてありがとう。だから、それはすでに素晴らしいのです！

しかし、待ってください！

iOSではこのオプションが見えませんが？

iOSではQRオプションが見えませんが？

tobiaseigen · 2024 年 12 月 20 日午後 5:35

QRコードの生成は高価ですか？もしそうでないなら、なぜそれを表示するためにボタンを選択する必要があるのではなく、共有モーダルに自動的に表示しないのですか？

Jagster · 2024 年 12 月 20 日午後 6:04

無料なので、残りはコーディングだけです。しかし、ほとんどの人にとってQRコードは単なるノイズなので、直接見えることはできません。

Heliosurge · 2024 年 12 月 21 日午前 6:36

名刺。Discourseを使用している企業は、参加するためのプラットフォームのQRコードを持つことができます。あるいは、イベントポスターなどで使用することもできます。

編集：Rob氏のAndroidに関する投稿を見ました。しかし、あなた自身が言ったように。Discourse内でやりたいです。

Alteras · 2024 年 12 月 22 日午後 2:44

@Jagster が言ったように、QR コードの生成は高価ではなく、主に QR コードの集中度と即時性に関する個人の好みに依存します。TC は共有 API（および DOM 操作の一部）を QR コードの表示に快適に利用しており、他の共有ソースと同じレベルで効果的に扱っています。これは、QR コードを情報送信の二次的な方法と見なす私の見解とほぼ一致していました。しかし、米国国外での休暇を開始して以来、物理世界での QR コードの普及率にかなり衝撃を受けています。

設定に「即時 QR コード」オプションを追加することを検討できますが、QR コードの配置方法/場所を再検討する必要があるでしょう。率直に言って、現在のモーダル（デスクトップとモバイルの両方のビュー）での QR コードの配置は、DOM 操作で本当に無理やり押し込まれています。理想的には、デスクトップビューでは、「リンクをコピー」ボタンと同じレベルで扱われる QR コードがモーダルの右側全体を占めるでしょうが、そのためには新しいプラグインアウトレットとかなりの CSS 変更が必要になります。現在、共有モーダルにはプラグインアウトレットが 1 つしかないのですが、それは「新しいトピック」ボタンのすぐ隣にあり、複雑な CSS や DOM 操作の追加は避けたいと考えています。

tl;dr: 休暇から戻ったら、「即時 QR コード」設定を追加するのに追加の労力に見合う価値があるかどうかをさらに検討し、決定します。

Jagster · 2025 年 1 月 16 日午前 8:02

画像を使用しているのですが、QRコードが表示されません。使用するフォーマットやサイズなどに何か要件がありますか？

Alteras · 2025 年 1 月 16 日午後 4:34

うーん、それはおかしいですね。画像自体に特に厳しい要件はないはずですが…

使用している画像と画像サイズの設定は何ですか？

トピック		返信	表示
Create a QR code for invites Feature invites	3	146	2025 年 1 月 5 日
Possible to share a post by save a picture with a QR code? Feature	5	965	2024 年 6 月 28 日
Social Share Theme component official , social-share	24	15507	2025 年 11 月 20 日
Adding social sharing to invites Feature invites	0	30	2024 年 12 月 13 日
Share Link Shortener Theme component official , share-link-shortener	25	3440	2025 年 5 月 19 日

QRコード共有アイテム

設定

注意事項

関連トピック