前のチュートリアル: Developing Discourse Plugins - Part 1 - Create a basic plugin
始めましょう: テンプレート
Discourse のクライアントアプリケーションは、Ember.js という JavaScript フレームワークを使用して記述されています。Ember は、HTML を生成するために テンプレート を使用します。そのリンク先にはテンプレート言語の素晴らしい入門記事がありますので、必ず詳しく読んでください。
問題: Discourse ユーザーインターフェースへの要素の追加
多くのプラグインは、Discourse の Web インターフェースに要素を追加し、拡張する必要があります。これを行うためのメカニズムとして、Handlebars テンプレート内の「プラグインアウトレット」を提供しています。
Discourse のテンプレートを見て回ると、以下のようなマークアップをよく見かけるでしょう。
<PluginOutlet @name="edit-topic" />
これは「edit-topic」という名前のプラグインアウトレットを宣言しています。これはテンプレート内の拡張ポイントであり、プラグイン作成者が独自のマークアップを追加するために活用できます。
プラグインを作成する際は、変更したい Discourse のテンプレート（.gjs ファイル）内に <PluginOutlet /> がないか探してください。もし存在しない場合は、私たちに拡張を依頼してください。適切なユースケースがあれば、喜んで追加します。より簡単かつ迅速に対応できるよう、GitHub でプルリクエストを提出してください！
プラグインアウトレットが存在する場所を確認したい場合は、POSIX 準拠のシェルで以下のコマンドを実行できます。
git grep -A 1 "<PluginOutlet" -- "*.gjs"
また、Discourse 開発者ツールバーを有効にすることで、Discourse サイト上でプラグインアウトレットを表示することもできます。Discourse フォーラムのブラウザコンソールで enableDevTools() と入力し、ページの左側に表示されるプラグアイコンをクリックしてください。
プラグインアウトレットへの接続
追加したいプラグインアウトレットが見つかったら、そのための connector（コネクタ）を作成する必要があります。コネクタとは、ファイルパスに connectors/<アウトレット名> が含まれる .gjs コンポーネントです。
例えば、Discourse テンプレートに以下がある場合：
<PluginOutlet @name="evil-trout" />
connectors/evil-trout ディレクトリ内に作成する任意の .gjs ファイルが自動的に追加されます。したがって、以下のファイルを作成した場合：
plugins/hello/assets/javascripts/discourse/connectors/evil-trout/hello.gjs
内容が以下であれば：
<template>
<b>Hello World</b>
</template>
Discourse はそのテンプレートの該当箇所に <b>Hello World</b> を挿入します。
ファイル名を hello.gjs としましたが、ファイル名（ディレクトリ名ではなく）は重要ではありません。ただし、すべてのプラグイン間で一意である必要があります。何を拡張するかを説明する名前にすると、将来的なデバッグが容易になります。
トラブルシューティング
- コネクタの名前を再確認し、プラグイン名と完全に一致しているか確認してください。
詳細情報
シリーズの続き
パート 1: プラグインの基礎
パート 2: このトピック
パート 3: サイト設定
パート 4: git のセットアップ
パート 5: 管理インターフェース
パート 6: 受入テスト
パート 7: プラグインを公開する
このドキュメントはバージョン管理されています。変更の提案は GitHub でおこなってください。
