こんにちは！ シックス・アパート株式会社 製品企画シニアマネージャーの早瀬です。
前回は、Movable Type の特長についてお話しました。第2回目となる今回は、Movable Type の人気プラグインと、その中でも2023年秋にリリースされるMovable Type 8 にバンドルされるブロックエディタプラグインの使い方についてご紹介します。
サーバーにインストールして利用するタイプのCMSではプラグインを入れることで機能を追加できるものが多く、Movable Typeでも、シックス・アパートのパートナー企業や個人の開発者さんが提供されているプラグインを追加することができます。もちろん自分で作成して、新しい機能を追加することもできます。
まずは、Movable Type でよく利用されているプラグインをご紹介しましょう。
目次
Movable Type の人気プラグイン
ワークフロー機能
記事の公開申請、承認処理の機能を追加でき、多人数で安全なサイト運用が可能になります。
- CheckRelease for Movable Type （株式会社cherry-pick）
- CheckRelease for Movable Type は、Movable Type にワークフロー機能を追加し、記事の公開申請、承認処理をするためのプラグインです。記事投稿者（ライター）が記事作成後、管理者（公開承認者）へ公開申請をし、管理者が記事確認後、公開承認処理を行えます。
- Workflowプラグイン（小粋空間）
- Workflowプラグインは、Movable Type に記事承認ワークフロー機能を追加するプラグインです。
承認付きの記事作成権限を持つライターが作成した記事に対して、承認者は編集画面およびプレビュー画面から「承認」または「差し戻し」が行えます。
ステージング機能
Movable Type が管理するファイルを、別の環境に同期させることができます。
- Uploader for Movable Type（株式会社cherry-pick）
- Uploader は、Movable Type が管理するディレクトリ配下のディレクトリ・ファイルを、別の環境に同期させるプラグインです。Movable Type の再構築により直接サイトが公開されるのではなく、その状態を確認した上で本番サーバーに転送できるため、コンプライアンス管理を確実に行いたい企業に最適です。
フォーム機能
メールフォームを作成してサイトに設置できます。
- MailForm（藤本壱）
- MailFormは、ウェブサイトにメールフォームを設置することができる Movable Type 用のプラグインです。テンプレートの作成が可能な方であれば、低コストでさまざまな形態のフォームを設置することができます。
- A-Form（株式会社アークウェブ）
- ドラッグ＆ドロップで項目を並べて、簡単にフォーム作成ができるプラグインです。フォームはいくつでも設置でき、CSSでサイト全体と合わせたデザインにも簡単に作成することができます。
管理画面カスタマイズ機能
jQuery や Vue.js など JavaScript を使って Movable Type の管理画面を簡単・自由自在にカスタマイズできるようになります。
- MTAppjQuery（bit part 合同会社）
- MTAppjQuery は、jQuery や Vue.js など JavaScript を使って Movable Type の管理画面を簡単・自由自在にカスタマイズすることができるプラグインです。Movable Type の管理画面をユーザーのニーズに合った形にカスタマイズすることで、ユーザーの満足度が向上し、運用の負荷の軽減につながります。
上で取り上げているプラグインは一例に過ぎません。多くの企業サイトでは、承認や事前確認のための機能追加や、CMSそのもののカスタマイズのニーズが高く、そのような機能を追加できるプラグインは人気です。
Movable Typeのプラグイン一覧はこちら
そして今回は、いま人気急上昇中のプラグイン「MTブロックエディタ」について、くわしくご紹介したいと思います。
Movable Type の人気プラグイン『MTブロックエディタ』とは？
MTブロックエディタは、シックス・アパート製で、冒頭でも書きましたが、2023年秋にリリースされる Movable Type 8 に同梱されているプラグインです。
本プラグインは数あるプラグインの中でも高機能を誇り、制作側でそのサイトに必要なブロックを用意しておくことでコンテンツの編集のしやすさが飛躍的に向上します。これから Movable Type に触れるという方には、ぜひとも一緒に使っていただきたいプラグインになります。
MTブロックエディタ | CMSプラットフォーム Movable Type ドキュメントサイト
MTブロックエディタの機能概要と特長
ブロックエディタとはCMSに登録するコンテンツを編集するエディタの一つです。コンテンツの中身を、見出し、本文、画像などをブロック毎に登録、編集し、その組み合わせでコンテンツを表現することができます。
MTブロックエディタでは、標準で「テキスト」「画像」「ファイル」「HTML」「oEmbed」「罫線」「テーブル」「マルチカラム（2列、3列、4列）」の8種のブロックを用意しています。
コンテンツをブロック単位で編集できるCMSは増えてきていますが、MTブロックエディタには次のような特長があります。
- 独自のコンテンツに合わせた要素を「カスタムブロック」として作成可能
- ブログごとに使用するブロックの表示設定、プリセットを作成可能
- 「エディタCSS」をしておくことで、編集画面上での見た目を公開ページと同じデザインで表示できるので視覚的に編集しやすい
- ブロック内の内容を構造化されたデータとして出力することができる
ここでは、機能について一つひとつ掘り下げることは難しいのですが、中でも、「カスタムブロック」というユーザーオリジナルのブロックを簡単に作成できるところが、MTブロックエディタの一番の強みと言えます。
カスタムブロックで使いやすい編集画面に
あまり複雑ではない標準的なウェブページ向けのコンテンツを作成するには、デフォルトで用意されているブロックをそのまま利用するだけでも十分ですが、コンテンツに特色がある場合、たとえば「マニュアルへのリンクが多い」「インタビュー形式のコンテンツを多く掲載する」など、特定の型にはまったコンテンツの要素があるなら、その型に合わせたオリジナルのカスタムブロックをあらかじめ作っておくと、コンテンツの登録がとても楽になります。
上の画像は、カスタムブロック作成画面のキャプチャです。カスタムブロックで設定したブロックの部分はHTMLで出力されます。「カスタムスクリプト」は、作成したカスタムブロックに対して設定するCSS、JavaScriptといったスクリプトで、いろいろな機能を持ったブロックを作成できます。
「マニュアルへのリンク」「インタビュー形式のコンテンツ」以外にも、カスタムブロックのさまざまな使い道が考えられます。
- 特定のclass名をつけたブロックを作成し、それぞれ異なるCSSを設定して見た目をコントロールする
- レスポンシブレイアウトを保持しながら、部分的にマルチカラムにする
- コンテンツのパターンに合わせたレイアウトのフォーマットを予め用意しておく
- Excelファイルを読み込んで、自動でテーブル（表）にして表示する
- 複数の画像をスライドショーで表示する
- 動画のURLを指定するだけでレスポンシブレイアウトに対応したプレーヤーを表示する
- ソースコードを見やすくきれいに表示する
これらは一例であり、挙げだすとキリがなく、バナーリンク画像を表示するだけのシンプルなものから、ページレイアウトまで行う複雑なブロックまで、アイデア次第でいろんなブロックを作ることができ、ウェブ制作者の方の腕の見せ所になります！
まだイメージがわかない……という方のために、さらに具体的にカスタムブロックの活用例をいくつか紹介します。
①バナーリンク画像を挿入するブロック
ウェブサイトにバナー画像を掲載し、特定のページへのリンクを設定したい、というケースがあるかと思います。これをカスタムブロックで用意しておくと、コンテンツを作る担当者は、バナー画像の指定とリンク先URLを記述するだけでOK！になります。
こちらについては、Movable Type のドキュメントサイトでも詳しく解説していますので、ぜひ参考にしてください。
バナーの画像のカスタムブロックを作成する - ブログ | MovableType.jp
②YouTubeのプレイヤーをレスポンシブ対応し表示させるブロック
続いて、動画プレイヤーのブロックのご紹介です。YoutTubeのプレイヤーは指定されたソースコードをそのまま貼り付けると、レスポンシブレイアウトに対応しておらず、はみ出したり、うまく表示できずに苦戦したことはありませんか？
そこで、動画のURLを入力するだけで自動的にレスポンシブレイアウトに対応したプレイヤーを表示するカスタムブロックを用意しておくと、動画を頻繁に掲載するコンテンツではとても重宝されます。
こちらも Movable Type のドキュメントサイトで詳しい作り方を紹介していますので、ぜひご覧ください。
YouTube のプレイヤーをレスポンシブ対応させるカスタムブロック - ブログ | MovableType.jp
③カスタムブロックを組み合わせてページレイアウトができるブロック
最初に紹介した「レスポンシブレイアウトを保持しながら、部分的にマルチカラムにする」というブロックをより発展させると、ページを自由に作成するカスタムブロックも作ることができます。
たとえば、背景色の設定ができるコンテンツの枠となるカスタムブロックを作成し、その中で前述した２列や３列のカスタムブロックを使えるようにする、といった組み合わせによってページを作成・レイアウトするために必要なブロックが作成できます。
まだまだ具体的な例はたくさんありますが、長くなりすぎるので、今回はここまでとします。
まとめ
今回ご紹介したように、コンテンツやサイトに合わせたカスタムブロックを用意すれば、コンテンツ作成の効率を飛躍的に上げることができます。
Web制作者の皆さんは、クライアントの担当者がどうやったらサイトを運用しやすいか？ コンテンツを適切に更新してサイトの価値を高めてもらえるか？といったことを考えながら、デザインや開発、マニュアル作成などを行われているかと思います。
ぜひ Movable Type を使って、そしてMTブロックエディタ、特にカスタムブロックを効果的に活用して、運用しやすいウェブサイトを構築してもらえると嬉しく思います。
最後に、MTブロックエディタの紹介動画もありますので、ぜひご覧ください！
https://www.youtube.com/watch?v=0d4aCm89KLk
この記事を書いた人
早瀬将一
シックス・アパート株式会社 プロダクトシニアマネージャー。CMSプラットフォーム「Movable Type」シリーズの製品企画を担当。
以前は同社でテクニカルサポートを担当、さらに合同会社アライアンス・ポートでWebディレクター職を経て現職についたこともあり、ユーザー視点にたった製品開発を心がけています。
また、個人ではインタラクティブ作品の制作、ドローンなどの動画撮影も得意とし、地元観光課の公式動画を制作するなど、さまざまな活動を行っています。
