前のチュートリアル: Developing Discourse Plugins - Part 4 - Setup git
サイト設定だけでは、プラグインが望むように動作するための管理者インターフェースとして不十分な場合があります。例えば、discourse-akismet プラグインをインストールすると、Discourse の管理者プラグインセクションにナビゲーション項目が追加されていることに気づいたかもしれません。
このチュートリアルでは、プラグインに管理者インターフェースを追加する方法を紹介します。私のプラグインは、お気に入りのコンピュータゲームの一つにちなんで「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 が持つ仮定の一つは、フロントエンドのほぼすべてのルートに、データを供給するサーバー側のルートが存在することです。この例のプラグインでは、実際にはバックエンドからデータを必要としませんが、ユーザーが /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 という名前の 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'
ああ、その理由は、テンプレートでいくつかのことに依存していることです。
- ユーザーがボタンをクリックしたとき、コントローラーで
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 を参照してください。
