前のチュートリアル: 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が仮定していることの1つは、フロントエンドのほぼすべてのルートにデータを提供するサーバー側のルートがあるということです。この例のプラグインでは、実際にはバックエンドからデータは必要ありませんが、ユーザーが /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で提案してください。
