トピックに PGN ファイルを埋め込もうとしています。これにはトピック内に CSS と JavaScript を含める必要があります。どなたか、トピックで CSS と JavaScript をどのように使用できるか教えていただけませんか?
これは Discourse では不可能です。PGN ファイルとは何ですか?ご要望をもう少し詳しく説明していただけますか?
PGN(Portable Game Notation)は、ポータブルゲーム表記を意味します。一般的に、チェスの対局のすべての手をテキスト形式でエクスポートでき、PGNリーダーを使用して読み取り、対局を再生することができます。
通常、以下のような形式になります。
[Event "World Championship 28th"]
[White "Spassky, Boris V"]
[Black "Fischer, Robert James"]
[Site "Reykjavik"]
[Result "1–0"]
[Date "1972.08.06"]
[WhiteElo "2660"]
[BlackElo "2785"]
1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 a6 6. Bg5 e6 7. f4 Qb6 8. Qd2 Qxb2 9. Nb3 Qa3 10. Bxf6 gxf6 11. Be2 h5 12. 0-0 Nc6 13. Kh1 Bd7 14. Nb1 Qb4 15. Qe3 d5 16. exd5 Ne7 17. c4 Nf5 18. Qd3 h4 19. Bg4 Nd6 20. N1d2 f5 21. a3 Qb6 22. c5 Qb5 23. Qc3 fxg4 24. a4 h3 25. axb5 hxg2+ 26. Kxg2 Rh3 27. Qf6 Nf5 28. c6 Bc8 29. dxe6 fxe6 30. Rfe1 Be7 31. Rxe6
きっと楽しいプラグインになるでしょうね!このトピックに「プルリクエスト歓迎」タグを追加します。
Chess.com などのサイトにゲームのメモを投稿し、そこから取得した埋め込みコードをウェブサイトに使用することは可能でしょうか?
Chess.com だけではありません。
私はあらゆるオンラインチェスプラットフォームで対局できます。PGN をコピーして自分のフォーラムに投稿できるはずです。
@codinghorror さん、
このようなプラグインがあれば本当に素晴らしいですね ![]()
これがいかにニッチな機能か、お分かりですか?
これは Discourse の機能としてあるべきではありません。フォーラムの 98% はこれを使うことがないでしょう。
選択肢は 3 つあります:
- 自分でコードを書く
- 誰かを雇ってコードを書いてもらう
- 13 時間前に私が提示した、あなたの問題を解決するソリューションを使う
@Monkey さん、こんにちは。
はい、ご指摘の通りだと理解しています。
私たちはこれまで15年間、UNIXやLinuxといった非常に技術的なフォーラムを運営してきました。会員には多くのチェスプレイヤー(私も含め)がいましたが、フォーラム内でチェスに関心を持つ人はいませんでした(年々、いくつかのチェス関連プラグインを導入しましたが)。
最も効果的だったのは、チェスやチェス全般に興味のあるメンバーが、優れたオンラインチェスサイトのいずれかで集まるよう促すことでした。
したがって、私は「フォーラム内でのチェスプレイ」が非常に小さなニッチであることを確認できます。その理由として、優れた代替手段が多数存在するからです。
非常に人気のあるオンラインチェスサイトからのコードを埋め込むことが、最善の進め方だと私も同意します。
@neounix さん、こんにちは。
あなたは技術フォーラムを運営されていますので、あなたの対象読者層はチェスには関心がないかもしれません。
私はスポーツおよびゲームフォーラムを運営しており、そこには多くのチェスプレイヤーや愛好家がおり、チェスの手について議論や論争に多くの時間を費やしています。これはあなたのターゲットオーディエンス次第です。あなたがスポーツフォーラムを運営したことがないのに、私の要件について確認・検証するのは視野が狭すぎます。また、あなたの検証は私のリクエストに対して有効ではありません。
@Monkey さん、こんにちは。
PGN をホストするための JavaScript ベースの埋め込みはすでに多数存在します。しかし、Discourse は現在、投稿への JavaScript 埋め込みをサポートしておらず、iFrame 埋め込みのみが許可されています。したがって、Discourse が PGN 用のプラグインの提供に関心があるなら、それが多くのスポーツ系フォーラムを惹きつけることは間違いありません。
Discourse の顧客リストにスポーツ関連やゲーム関連のフォーラムが多数含まれている以上、チェス関連のプラグインがニッチな機能であるとは思いません。
あなたが提示した解決策は、Chess.com のストリームをそのまま利用できるようにするだけです。しかし、多くのプレイヤーが単に Chess.com のデイリーパズルをホストするだけなので、これでは差別化が図れません。したがって、あなたの提案は私の問題に対する実際の解決策ではありません。
私はチェス愛好家で、フィンランドのチェスフォーラムをDiscourseに移行させるよう促そうとしています。そのため、まさにこの点について最近調べ、実際に試してみました。私の最善の提案は、すでに誰かが触れている通り、Discourseの組み込みiframe機能を活用することです。管理者設定で「allowed iframes」を検索し、chess.comやlichess.org、その他いくつかのサイトをホワイトリストに登録するだけです。これらはいずれも自サイト側でiframeをサポートしています。ユーザーは以下のような文字列をコピーして貼り付けるだけで済みます。
<iframe src="https://lichess.org/embed/jYSkjcuG?theme=auto&bg=auto" width=600 height=397 frameborder=0></iframe>
すると、とても見栄えの良いボックスが作成されます。このボックスにはチェス盤と、ゲームを行き来するための矢印が表示されます。ソースにコメントがある場合、それらも表示されます。もし受信者がPGNファイル(例えばエンジンを使ってゲームを分析するため)をどうしても必要とする場合は、ソースサイトからそのファイルにアクセスできます。必要なのはユーザーを少し教育することだけで、彼らはきっと気に入ってくれるはずです。
こんにちは @rizka さん、
非常に奇妙なケースが発生しています。
プレビューでは iFrame 埋め込みが表示されていますが、投稿を保存すると iFrame 埋め込みが表示されません。何か見落としているのでしょうか。
投稿保存後のスクリーンショット:
ブラウザのコンソールにエラーは表示されていますか?(CSP 関連かもしれません)
以下のエラーが発生しています:
https://lichess.org/ のクロスサイトリソースに関連するクッキーが、`SameSite` 属性なしで設定されました。Chrome は現在、`SameSite=None` および `Secure` が設定されている場合のみクロスサイトリクエストでクッキーを配信するため、ブロックされました。開発者ツールの Application > Storage > Cookies でクッキーを確認でき、詳細については https://www.chromestatus.com/feature/5088147346030592 および https://www.chromestatus.com/feature/5633521622188032 を参照してください。
設定を SameSite=None に変更しましたが、効果がありません。
あなたが埋め込もうとしているサイト(https://lichess.org/)は、他のサイトが自社のクッキーを利用できるようにしたいのであれば、その設定をクッキーに追加すべきだと思います。ただし、iframe が表示されない原因がそれかどうかは分かりません(通常、クッキーはセッションや広告に使用されるため、iframe にセッションがなくても表示されるはずです)。更新
どうやら彼らは 許可 しているようです。
さらに、プレビューを確認できます。もし私が Discourse Meta に iframe を直接 HTML として(ブラウザのインスペクター経由で)追加すると、以下の画像のように動作します:
ブラウザのインスペクターを使って、直接あなたのページに iframe を追加してみてください。もし動作しない場合、CSP ルールや Discourse による iframe のブロックが原因かもしれません(CSP の場合、ブラウザのコンソールにエラーや警告が表示されるはずです)。
Meta では、iframe を含めようとすると空白の投稿が表示されます(プレビューすら確認できません):
<iframe src="https://lichess.org/tv/frame?theme=wood&bg=light" style="width: 400px; height: 444px;" allowtransparency="true" frameborder="0"></iframe>
更新 2
allowed_iframes サイト設定が、そのドメインからの iframe を許可するために必要なものかもしれません:
try.discourse.org で一時的に lichess.org の iframe を有効にしましたので、誰でもそこで動作を確認できます:
有効期限は毎日リセットされるまでです。
Firefox の方が見栄えが良いです:
Chrome よりも:
@supermathie さん、こんにちは。
iframe 埋め込みの代わりに、以下のような JavaScript コードを使用したいと考えています:
<link rel="stylesheet" type="text/css" href="https://pgn.chessbase.com/CBReplay.css" />
<div class="cbreplay">
[Event "World Championship 28th"]
[White "Spassky, Boris V"]
[Black "Fischer, Robert James"]
[Site "Reykjavik"]
[Result "1–0"]
[Date "1972.08.06"]
[WhiteElo "2660"]
[BlackElo "2785"]
1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 a6 6. Bg5 e6 7. f4 Qb6 8. Qd2 Qxb2 9. Nb3 Qa3 10. Bxf6 gxf6 11. Be2 h5 12. 0-0 Nc6 13. Kh1 Bd7 14. Nb1 Qb4 15. Qe3 d5 16. exd5 Ne7 17. c4 Nf5 18. Qd3 h4 19. Bg4 Nd6 20. N1d2 f5 21. a3 Qb6 22. c5 Qb5 23. Qc3 fxg4 24. a4 h3 25. axb5 hxg2+ 26. Kxg2 Rh3 27. Qf6 Nf5 28. c6 Bc8 29. dxe6 fxe6 30. Rfe1 Be7 31. Rxe6
</div>
このようなコードを投稿に埋め込むことは可能でしょうか?多くのユーザーは、サードパーティのウェブサイトに移動して iframe を生成するよりも、このようなスクリプトを単純にコピー&ペーストすることを好んでいます。
はい、可能です!
どうやら、これをテーマコンポーネントとして完成させるために必要な要素がほぼ揃っているようです(テーマコンポーネントで実現可能だとは思いますが、私自身はそれらにあまり詳しくないため、この情報は絶対的なものとして受け取らないでください)。
次のステップは、@Monkey が提案したように、ご自身で実装するか、誰かに依頼して作業してもらうかのどちらかになります。
(テーマコンポーネントについて学ぶために、この課題に取り組みたいのですが、現時点では時間を割くことができません)
はい、このようなプロジェクトをベースにできるかもしれません:
Github にはいくつかありますが、これはその中でも代表的なものの一つです。
カスタム BBCode と組み合わせるには:Developer's guide to Markdown extensions
Ember のレンダリングパイプライン内にこれを統合する際に発生しうる落とし穴に注意する必要があります。
@supermathie の言うとおりです。仕組みを学び、実装に時間を費やす意欲のある愛好家を見つけるか、Marketplace で誰かを雇う必要があります。
@merefield さん、こんにちは。
テーマをカスタマイズして、以下のスクリプトを含めるようにしました:
<link rel="stylesheet" type="text/css" href="https://pgn.chessbase.com/CBReplay.css" />
また、埋め込みを許可するために CSS「https://pgn.chessbase.com/CBReplay.css」をホワイトリストに登録しました。
投稿にスクリプトをコピー&ペーストすると、div タグが無視され、テキストのみが表示されてしまいます。
<div class="cbreplay">
[Event "World Championship 28th"]
[White "Spassky, Boris V"]
[Black "Fischer, Robert James"]
[Site "Reykjavik"]
[Result "1–0"]
[Date "1972.08.06"]
[WhiteElo "2660"]
[BlackElo "2785"]
1. e4 c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 a6 6. Bg5 e6 7. f4 Qb6 8. Qd2 Qxb2 9. Nb3 Qa3 10. Bxf6 gxf6 11. Be2 h5 12. 0-0 Nc6 13. Kh1 Bd7 14. Nb1 Qb4 15. Qe3 d5 16. exd5 Ne7 17. c4 Nf5 18. Qd3 h4 19. Bg4 Nd6 20. N1d2 f5 21. a3 Qb6 22. c5 Qb5 23. Qc3 fxg4 24. a4 h3 25. axb5 hxg2+ 26. Kxg2 Rh3 27. Qf6 Nf5 28. c6 Bc8 29. dxe6 fxe6 30. Rfe1 Be7 31. Rxe6
</div>
このスクリプトを投稿で使うために、他に何か必要な設定はありますか?ご教示ください。
今はこれを見る時間がありません。私の提案通りにしてください。




