画面の隅にボタンを配置する方法

開発
1

コミュニティの皆様、こんにちは！
Discourse でプラグインを作成する方法を勉強しています。現在、画面の隅にボタンを配置し、クリック時にリクエストを処理する方法を探っています。どうすればよいでしょうか？非常に基本的なことですが、よくわかりません。

また、いくつかのプラグインで includePostAttributes や decorateWidget といった呼び出しを見かけました。Discourse が使用を許可するすべてのメソッドのリストはどこで見ることができますか？

2

このボタンを追加したい場所と、クリックされたときに何をしてほしいのかのスクリーンショットを投稿していただけますか？

おそらくプラグイン API のことを指しているのだと思います。その API のすべてのメソッド（いくつかの例付き）は、こちらで確認できます。

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js

また、その API で最も一般的なメソッドの詳細な説明は、こちらで確認できます。

3

ありがとうございます、メソッドの一覧を確認します。
スクリーンショット：

image
image1902×932 62.4 KB

ご覧の通り、角に小さな円を追加してボタンを表しています。このボタンは空中に浮遊する（つまり、スクロールしても角に留まる）ようにする必要があります。クリック時に実行されるロジックは自分で追加しようと考えていますが、より明確にするために、現時点ではアラートボックスを開く仕組みを理解しようとしています（練習のためです）。

4

お探しの機能は position: fixed という CSS プロパティです。CSS の位置指定については、こちらで詳しく読むことができます。

position: fixed を設定すると、要素はビューポートに対して同じ位置に固定され、スクロールしても移動しません。

ここで何を達成しようとしているのかは少し不明確ですが、ボタンをクリックしたときにアラートボックスを表示させたいだけなら、イベントリスナーが必要です。それについては、こちらで詳しく読むことができます。

何か具体的に解決したい問題がありますか？お手伝いできることがあればお知らせください。

5

情報提供ありがとうございます。その点はすべて理解しています。私の問題は、CSS をどこに配置すべきかがわからないことです。Ruby ファイルと JS ファイルはありますが、CSS や Sass ファイルはどこに置けばよいのでしょうか？

6

素敵ですね :+1:

Ruby ファイルをお持ちとのことですので、プラグインの開発を進めているのでしょうか？

さて、ご質問にお答えします。

既存の公式プラグインのフォルダ構成を確認することをお勧めします。例えば、こちら

またはこちら

をご覧いただくと、SCSS スタイルシートは常に

_ROOT_/assets/stylesheets/

に配置されていることがわかります。プラグインを作成される場合は、SCSS ファイルもここへ配置してください。