Craft CMS のプラグインを作ってみよう

これは Craft CMS Advent Calendar 2016 21日目の記事です。

今回は、プラグイン開発についてまとめてみます。
ありがちですが「Hello World」の文字列を出力するプラグインを実際に作ってみましょう。

プラグイン開発にあたって

リファレンス

プラグイン開発に関わる公式リファレンスが用意されていますので、一度目を通してみてください。
Dash for macOS をお使いであれば、Main Docsets にある Craft のインストールもおすすめです。

Introduction | Plugin Development | Craft CMS:
https://craftcms.com/docs/plugins/introduction

Dash for macOS - API Documentation Browser, Snippet Manager - Kapeli:
https://kapeli.com/dash

なお、2017年の第一四半期でβ版のリリースが予定されている Craft 3 では、プラグインの作成方法が若干変わりますので頭に入れておきましょう。

Writing Plugins for Craft 3 | Documentation | Craft CMS:
https://craftcms.com/3/docs/writing-plugins-for-craft-3

ひな形の作成

新しくプラグインを作る場合、開発元である Pixel & Tonic 社が公開している CodingStandards に則ったひな形を作成できる Web サービスを利用すると効率的です。

Build to Order Craft CMS plugins | pluginfactory.io:
https://pluginfactory.io/

Terminal.app からの操作がお好みであれば、 Yeoman ジェネレータの generator-craftplugin がおすすめです。

generator-craftplugin is a Yeoman generator for Craft CMS plugins:
https://github.com/nystudio107/generator-craftplugin

NodeJS、npm、yeoman をあらかじめインストールした状態で、 generator-craftplugin パッケージをグローバルにインストールしましょう。

$ npm -g install generator-craftplugin

プラグインの保存先となる任意のディレクトリに移動してから下記コマンドを実行し、画面に表示される質問に答えていくと Web サービスからダウンロードする場合と同じひな形が生成されます。

$ yo craftplugin

プラグインを作ってみる

では、実際にプラグインを作成してみましょう。

ひな形を作成

pluginfactory.io にアクセスします。

pluginfactory.io の設定サンプル

それぞれ下記の内容を入力後、BUILD MY PLUGIN ボタンをクリックしてひな形をダウンロードします。

ラベル
API VersionCraft CMS version 2.5.x
Plugin NameMyFirstPlugin
DescriptionThis is my first Craft CMS plug-in.
Initial Version1.0.0
Plugin Author(任意の作者名)
Author URL(任意の URL)
GitHub Name(GitHub のアカウント名)
Tweet it outOFF
※ON の場合、 BUILD MY PLUGIN をクリックした際に pluginfactory アカウントがプラグイン名をツイートします。
Code CommentsON
※ON の場合、生成されるコードに解説コメントが追加されます。
Plugin ComponentsVariables のみ ON

今回は「Hello World」の文字列を出力するだけのシンプルなプラグインですので、 Plugin Components はテンプレート変数だけ有効にしておきます。

その他の各コンポーネントについては、Plugin DevelopmentCOMPONENTS にあるリンクも参考にしてください。

テンプレート変数の調整

ダウンロードした myfirstplugin.zip を展開し、
myfirstplugin/variables/MyFirstPluginVariable.php を開きます。

myfirstplugin/resources の下層にあるスクリーンショットやロゴなどは、お好みで変更しておきましょう。

<?php
namespace Craft;

class MyFirstPluginVariable
{
    public function hello($optional = null)
    {
        return "Hello World";
    }
}

サンプルコードはコメント文を省いているため少し判りづらいかもしれませんが、 function 名を exampleVariable から hello に、戻り値を "And away we go to the Twig template..." から "Hello World" に変更した状態です。

プラグインのインストール

作成したプラグインをインストールしてみましょう。
myfirstplugin/Applications/MAMP/htdocs/craft/plugins にコピーします。

プラグインの一覧

設定 > プラグイン に移動し、 MyFirstPluginインストール ボタンをクリックします。

テンプレートの修正

blog/index.twig を開き、 mainContent ブロック内に出力用のタグを追加します。

{# このテンプレートの mainContent の内容をセット #}
{% block mainContent %}
  (中略)

  {{ craft.myFirstPlugin.hello }}
{% endblock %}

ブラウザで http://localhost/blog/index にアクセスし、Hello World の文字列が出力されていることを確認しましょう。

まとめ

ここでは、プラグインを作るにあたっての取っ掛かりについてまとめてみました。
Craft CMS のプラグイン開発は、はじめにジェネレータを利用してひな形を生成しておき、追加したい機能の作り込みに集中できる点が便利ですよね。

IntelliJ IDEA などを利用している方は、Craft CMS 本体をプロジェクトに追加しておくことでキーボードショートカットからクラスやメソッドの定義元を参照できるため、さらに効率化を図れると思います。

さて、次回は Craft CMS Advent Calendar 2016 の最終日です。
ひとまずの区切りとして、次期バージョンである Craft 3 に関する話題にしようと思います。

comments powered by Disqus