前のチュートリアル: Developing Discourse Plugins - Part 4 - Setup git
場合によっては、サイト設定だけでは、プラグインを希望通りに動作させるための管理インターフェースとして不十分なことがあります。例えば、discourse-akismet プラグインをインストールすると、Discourse の管理画面のプラグインセクションにナビゲーション項目が追加されていることに気づくかもしれません。
このチュートリアルでは、プラグイン用の管理インターフェースの追加方法を紹介していきます。私はこのプラグインを「purple-tentacle（紫色のタコ足）」と名付けます。これは、私の好きなコンピューターゲームの1つにちなんで名付けました。本当に、あのゲームが大好きです！
管理ルートの設定
まずは、これまでのチュートリアルと同様に 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'`
はい、その理由はテンプレート内で以下の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 でお知らせください。
