前回のチュートリアル: 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 という名前の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 でお願いします。
