前のチュートリアル: Developing Discourse Plugins - Part 4 - Setup git
サイト設定 (site settings) だけでは、プラグインを意図したとおりに機能させるための管理者インターフェースとして不十分な場合があります。たとえば、discourse-akismet プラグインをインストールすると、Discourse の管理者プラグインセクションにナビゲーション項目が追加されることに気づいたかもしれません。
このチュートリアルでは、プラグインの管理者インターフェースを追加する方法を説明します。私の好きなコンピューターゲームの 1 つにちなんで、プラグイン名を purple-tentacle と呼びます。マジで、あのゲームが大好きなんです！
管理ルートの設定
これまでのチュートリアルと同様に、plugin.rb を追加することから始めましょう。
plugin.rb
# name: purple-tentacle
# about: プラグインルートの追加方法を示すサンプルプラグイン
# version: 0.1
# authors: Robin Ward
# url: https://github.com/discourse/purple-tentacle
add_admin_route 'purple_tentacle.title', 'purple-tentacle'
Discourse::Application.routes.append do
get '/admin/plugins/purple-tentacle' => 'admin/plugins#index', constraints: StaffConstraint.new
end
add_admin_route の行は、このプラグインが /admin/plugins ページにリンクを必要とすることを Discourse に伝えます。そのタイトルは i18n 翻訳ファイルからの purple_tentacle.title となり、purple-tentacle ルートにリンクします。
その下の行は、プラグインのルートのサーバー側マッピングを設定します。Discourse が行う仮定の 1 つは、フロントエンドのほぼすべてのルートに、データを供給するサーバー側のルートがあるということです。このサンプルプラグインでは、バックエンドからデータを取得する必要は実際にはありませんが、ユーザーが /admin/plugins/purple-tentacle に直接アクセスした場合に、Discourse に何かを提供するように伝える必要があります。この行は単に「もしユーザーがサーバー側でその URL に直接アクセスしたら、デフォルトのプラグインコンテンツを提供して！」と伝えています。
（これがわかりにくい場合は、気にしないでください。サーバー側の操作を扱う将来のチュートリアルで再度取り上げます。）
次に、ユーザーが /admin/plugins/purple-tentacle パスにアクセスしたときに表示されるテンプレートを追加します。これは、ユーザーがボタンをクリックすると紫色のタコの動く gif を表示するボタンになるだけです。
assets/javascripts/discourse/templates/admin/plugins-purple-tentacle.hbs
{{#if tentacleVisible}}
<div class="tentacle">
<img src="https://eviltrout.com/images/tentacle.gif" />
</div>
{{/if}}
<div class="buttons">
<DButton
@label="purple_tentacle.show"
@action={{action "showTentacle"}}
@icon="eye"
@id="show-tentacle"
/>
</div>
ハンドルバーズの基本を学んだことがあれば、テンプレートは理解しやすいはずです。 <DButton /> は、ラベルとアイコン付きのボタンを表示するために Discourse で使用するコンポーネントです。
新しいテンプレートを接続するには、ルートマップを追加する必要があります。
assets/javascripts/discourse/purple-tentacle-route-map.js
export default {
resource: "admin.adminPlugins",
path: "/plugins",
map() {
this.route("purple-tentacle");
},
};
ルートマップは、プラグインが ember アプリケーションにルートを追加できるようにするために Discourse に追加されたものです。map() 内の構文は、Ember のルーターと非常によく似ています。この場合、ルートマップは非常にシンプルで、/admin/plugins の下に purple-tentacle という 1 つのルートを宣言するだけです。
最後に、翻訳文字列を追加しましょう。
config/locales/client.en.yml
en:
js:
purple_tentacle:
title: "Purple Tentacle"
show: "Show Purple Tentacle"
開発サーバーを再起動すると、/admin/plugins にアクセスして、リンクが表示されるはずです！それをクリックすると、紫色のタコを表示するためのボタンが表示されます。
残念ながら、ボタンをクリックしても何も起こりません 
開発者コンソールを見ると、なぜそうなるのかの手がかりとなるエラーが表示されるはずです。
Uncaught Error: Nothing handled the action 'showTentacle'
ああ、そうですね。理由は、ハンドルバーズテンプレートで 2 つのことに依存しているからです。
- ユーザーがボタンをクリックしたときに、
showTentacleが呼び出されること。 showTentacleがプロパティtentacleVisibleをtrueに設定し、画像が表示されるようにすること。
Ember ガイドのコントローラーをまだ読んでいない場合は、今が読むのに最適な時期です。なぜなら、このロジックを処理する purple-tentacle テンプレートのコントローラーを実装するからです。
次のファイルを作成します。
assets/javascripts/discourse/controllers/admin-plugins-purple-tentacle.js
import Controller from "@ember/controller";
import { action } from "@ember/object";
import { tracked } from "@glimmer/tracking";
export default class AdminPluginsPurpleTentacleController extends Controller {
@tracked tentacleVisible = false;
@action
showTentacle() {
this.tentacleVisible = true;
}
}
これでページを更新すると、ボタンをクリックするとアニメーションキャラクターが表示されます！
クリックされたときにタコを隠すボタンを追加することは、読者への追加の演習として残しておきます 
このプラグインの自分のバージョンを動作させるのに問題がある場合は、github にプッシュしておきました。
シリーズの続き
パート 1: プラグインの基本
パート 2: プラグインアウトレット
パート 3: サイト設定
パート 4: git セットアップ
パート 5: このトピック
パート 6: 受け入れテスト
パート 7: プラグインの公開
このドキュメントはバージョン管理されています - 変更の提案はgithubで行ってください。
