Coding Methodology

MovableTypeの事例別のおすすめプラグインと活用方法

2022 / 10 / 31

MovableTypeの実装を行う場合、「こんな時はどうやったらいいんだろう...?」という場面に遭遇することがあります。
そういった場面におすすめのプラグインのご紹介と具体的な活用例をご紹介いたします。

MovableTypeの事例別のおすすめプラグインと活用方法

1. 記事を移行したい

「ステージングサーバーなどの別環境にあるMovableTypeの記事を移行したい」「WordPressにある記事を、MovableTypeで構築した新環境に移行したい」ときは「CSVDataImExporter」がおすすめです。

おすすめポイント

CSVによる一括移行が可能になるため、移行のハードルを下げることが出来る点です。

データベースで一括インポートを試みる場合、データベースの知見やスキルが必要になってきますが、このプラグインを利用する場合はインポートするCSVファイルをエクセル等で編集することが出来るため、データ加工に関する難易度が下がります。また、インポートも管理画面のインポート画面にてCSVファイルをアップロードするだけで記事が登録されます。

csvイメージ

具体的な活用例

  • 旧サイトはWordPressで実装していたが、リニューアルに伴いMovableTypeで実装したサイトに対して記事移行したい
  • MovableTypeで実装済みの本番環境とステージング環境の記事を揃えてほしい

などの異なる環境に記事をインポートする要件で利用する場合が多いです。

基本的には、CSVDataImExporterのフォーマットに沿ってCSVファイルを作成すれば良いのですが、本文やアセット系ファイル(画像やPDF等)については注意すべき事項があります。

記事の本文中で挿入した画像のパスなどはCMSから絶対パスで登録されている場合が多いです。制作サイトの要件や仕様も考慮しつつCSVファイルで検索と置換を行い、ルート相対パスにします。ルート相対にすることで再度別の環境に移行する際にも移行しやすいし、絶対パス先を参照させずに同サイト内のアセットファイルを見に行ってくれます(画像移行ミスなどに気づきやすくなります)。

プラグイン名:CSVDataImExporter
提供元:https://www.koikikukan.com/movabletype/plugin/CSVDataImExporter/

2. 管理画面をカスタマイズしたい

WordPressはfunctions.phpを調整することでオリジナルのCSSやJSを容易に利用して管理画面をカスタマイズ出来ますが、MovableType標準では管理画面をカスタマイズする方法が公式では用意されていません。そのため、「MTAppjQuery」というプラグインを利用します。

おすすめポイント

管理画面に独自のCSSとJSを設置でき、カスタムフィールドを変化させることが出来るメソッドも用意されているため、Webサイトコーディングに慣れている方であれば自由度高く管理画面の調整が出来る点です。

具体的な活用例

  • カテゴリと同じような形式でチェックボックスのグループから複数の値を選択したい
  • 記事によって入力するセクションの個数が違うから、任意で入力欄を増減させたい

などの投稿ユーザーにとって自由度が高くなる記事投稿のUIを実現するためにカスタマイズすることが多くあります。

チェックボックスカスタムフィールドに関しては、標準ではYES/NO形式の単一チェックボックスのカスタムフィールドしか提供されていないのですが、「選択肢1、選択肢2、選択肢3…」と横に並んでいくような複数選択可能なチェックボックスをプラグインの提供する機能により実現することができます。

通常はこのような単一チェックボックスのみですが、

プラグインの機能を用いることによりマルチチェックボックスが可能に。

また任意で入力欄を増減するフィールドを用意したい場合も、MTAppjQueryが用意している multiField というメソッドを利用しつつjQueryで入出力の処理を記述することにより、画像のような自由度の高いカスタムフィールドグループを作ることができます。

自由度高いカスタムフィールドのイメージ

上記で出した例以外にも管理画面の見た目のスタイルをCSSで変更したりとCSS・JSを理解している方ならかなりカスタマイズ出来ます。

プラグイン名:MTAppjQuery
提供元:https://bit-part.net/products/mtappjquery/

3. MovableTypeでフォームを実装したい

MovableTypeでフォームを実装したい場合は以前のメソドロジーでもご紹介させて頂いた「A-Form」です。

おすすめポイント

やはり設置・実装の容易さです。

画像のようにマウスのドラッグ&ドロップでフォーム項目を追加することができ、バリデーション設定も管理画面で完了します。

フォーム項目追加のイメージ

また、プラグインファイル内にあるテンプレートファイルのコードを調整することで見た目をサイトと合わせるようにテンプレートをカスタマイズすることもできます。

実装する際には、CMSとプラグインが存在する同じ環境でないと動作しない仕様のため、MTクラウドのサーバー配信機能を使わない・別のサーバーにrsyncで同期させない等の本番公開の仕様確認や要件定義を行います。動作環境が問題無ければ、プラグインを導入し設定画面で入力項目や送信先などの設定を行います。

詳しい設定についてはプラグイン提供元のドキュメントをご確認ください。

プラグイン名:A-Form
提供元:https://www.ark-web.jp/movabletype/


今回はMovableType実装のお仕事でよく遭遇する事例とその事例に対応できるプラグインのご紹介をしました。
MovableTypeはあまりプラグイン数も多くないということもあり、「こういうシーンではこのプラグイン」というパターンがある程度決まっています。今後MovableTypeを実装する場合の参考になれば幸いです。

一覧に戻る

CODING FACTORYのWebサイトにご訪問いただき、ありがとうございます!サイトの改善や情報発信に活かすために、個人情報保護方針に基づいたCookieの取得と利用のご同意をお願いいたします!
個人情報保護方針の詳細