前のチュートリアル: Developing Discourse Plugins - Part 4 - Setup git
場合によっては、サイト設定だけでは、プラグインを希望通りに動作させるための管理インターフェースとして不十分なことがあります。例えば、discourse-akismet プラグインをインストールすると、Discourse の管理画面のプラグインセクションにナビゲーション項目が追加されていることに気づくかもしれません。
このチュートリアルでは、プラグイン用の管理インターフェースの追加方法をご紹介します。私は自分のプラグインを「purple-tentacle（紫色の触手）」と名付けます。これは、お気に入りのコンピュータゲームの一つにちなんで命名しました。本当に、あのゲームが大好きです！
管理ルートの設定
まず、チュートリアルの前編で行ったように plugin.rb ファイルを追加することから始めましょう。
plugin.rb
# name: purple-tentacle
# about: A sample plugin showing how to add a plugin route
# 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 は、フロントエンドのほぼすべてのルートがデータを提供するサーバー側のルートを持つことを前提としています。このサンプルプラグインでは実際にはバックエンドからのデータは必要ありませんが、ユーザーが直接 /admin/plugins/purple-tentacle にアクセスした場合に何かを返すように Discourse に指示する必要があります。この行は、「もしユーザーがサーバー側でその URL に直接アクセスしたら、デフォルトのプラグインコンテンツを提供してね！」と伝えているだけです。
（もしこれが混乱を招くとしても心配しないでください。後でサーバー側のアクションを扱うチュートリアルで戻ってきます。）
次に、ユーザーが /admin/plugins/purple-tentacle パスにアクセスしたときに表示されるテンプレートを追加します。これは、ボタンをクリックすると紫色の触手のアニメーション GIF が表示されるだけのボタンです。
assets/javascripts/discourse/templates/admin/plugins-purple-tentacle.gjs
import DButton from "discourse/components/d-button";
<template>
{{#if @controller.tentacleVisible}}
<div class="tentacle">
<img src="https://eviltrout.com/images/tentacle.gif" />
</div>
{{/if}}
<div class="buttons">
<DButton
@label="purple_tentacle.show"
@action={{@controller.showTentacle}}
@icon="eye"
@id="show-tentacle"
/>
</div>
</template>
Handlebars の基本を学んでいれば、このテンプレートは非常にシンプルに理解できるはずです。<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 という名前のルートが一つだけ宣言されています。
最後に、翻訳文字列を追加しましょう。
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'`
はい、その理由はテンプレート内でいくつかのことに依存していることです。
- ユーザーがボタンをクリックすると、コントローラーで
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: プラグイン outlets
パート 3: サイト設定
パート 4: git 設定
パート 5: このトピック
パート 6: 受け入れテスト
パート 7: プラグインを公開する
このドキュメントはバージョン管理されています。変更を提案する場合は GitHub で。
